/* ============ TOKENS (idénticos al sitio principal — no se modifican) ============ */
:root{
  --ink: #101818;
  --ink-2: #0B1818;
  --ink-3: #132F2F;
  --paper: #F4F4F0;
  --paper-dim: #A8B5B0;
  --paper-faint: rgba(244,244,240,0.14);
  --amber: #58D408;
  --coral: #7CC934;
  --line: rgba(244,244,240,0.14);
  --maxw: 1180px;
}

*,*::before,*::after{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior: smooth; }
body{
  background: var(--ink);
  color: var(--paper);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 400;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
.display{
  font-family:'Anton', sans-serif;
  font-weight:400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.92;
}
.wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}
.eyebrow{
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber);
  font-weight: 600;
  display:flex;
  align-items:center;
  gap: 10px;
}
.eyebrow::before{
  content:"";
  width: 8px; height: 8px;
  background: var(--amber);
  border-radius: 50%;
  display:inline-block;
  animation: pulse-dot 1.6s ease-in-out infinite;
}
@keyframes pulse-dot{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:0.35; transform:scale(0.7); }
}
.eyebrow-light{ color: var(--paper); }
.eyebrow-light::before{ background: var(--paper); }
.eyebrow-center{ justify-content:center; }

section{ position: relative; }

/* ============ REVEAL (animación idéntica al sitio) ============ */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(.25,.1,.25,1), transform 0.8s cubic-bezier(.25,.1,.25,1);
}
.reveal.is-visible{ opacity:1; transform: translateY(0); }

.zoom{
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1.4s ease, transform 1.8s cubic-bezier(.25,.1,.25,1);
}
.zoom.is-visible{ opacity:1; transform: scale(1); }

.fade-in{ opacity:0; transition: opacity 1.6s ease; }
.fade-in.is-visible{ opacity:1; }

@media (prefers-reduced-motion: reduce){
  .reveal, .zoom, .fade-in{ opacity:1; transform:none; transition:none; }
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.25s ease, box-shadow 0.4s ease, background 0.25s ease, color 0.25s ease;
  white-space: nowrap;
}
.btn-fill{ background: var(--amber); color: var(--ink); }
.btn-fill:hover{
  transform: translateY(-2px);
  box-shadow: 0 0 0 8px rgba(88,212,8,0.14), 0 0 0 16px rgba(88,212,8,0.06);
}

/* ============ NAVBAR (idéntico al sitio principal) ============ */
header{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 100;
  padding: 20px 0;
  background: linear-gradient(to bottom, rgba(16,24,24,0.9), rgba(16,24,24,0));
  backdrop-filter: blur(6px);
}
nav{ display:flex; align-items:center; justify-content: space-between; }
.logo{ font-family:'Anton', sans-serif; font-size: 1.5rem; letter-spacing: 0.02em; display:flex; align-items:center; gap: 10px; }
.logo-img{ width: 150px; height: auto; display: block; }
.nav-links{ display:flex; gap: 34px; font-size: 0.92rem; letter-spacing: 0.02em; font-weight: 500; }
.nav-links a{ opacity: 0.78; transition: opacity 0.2s ease; position: relative; }
.nav-links a:hover{ opacity:1; }
.nav-right{ display:flex; align-items:center; gap: 26px; }
.back-link{ display:flex; align-items:center; gap:8px; font-size:0.85rem; font-weight:600; opacity:0.85; transition:opacity 0.2s ease; }
.back-link:hover{ opacity:1; }
.burger{ display:none; width: 26px; height: 20px; position: relative; cursor:pointer; background:none; border:none; padding:0; }
.burger span{ position:absolute; left:0; right:0; height: 2px; background: var(--paper); transition: transform 0.3s ease, opacity 0.3s ease; }
.burger span:nth-child(1){ top:0; }
.burger span:nth-child(2){ top:9px; }
.burger span:nth-child(3){ top:18px; }
.burger.open span:nth-child(1){ transform: translateY(9px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform: translateY(-9px) rotate(-45deg); }
.mobile-menu{
  display:none; position: fixed; inset: 0; background: var(--ink); z-index: 90;
  flex-direction: column; align-items:center; justify-content:center; gap: 30px;
  transform: translateY(-100%); transition: transform 0.4s cubic-bezier(.25,.1,.25,1);
}
.mobile-menu.open{ transform: translateY(0); display:flex; }
.mobile-menu a{ font-size: 1.8rem; font-family:'Anton',sans-serif; text-transform:uppercase; }

/* ============ CIERRE (idéntico al sitio) ============ */
.closing{ background: var(--paper); color: var(--ink); border-radius: 40px 40px 0 0; padding: 170px 0 90px; text-align:center; }
.closing .wrap{ max-width: 880px; }
.closing h2{ font-size: clamp(2.2rem, 6.2vw, 4.4rem); color: var(--ink); line-height: 1.08; }
.closing .btn{ margin-top: 48px; }
.closing .btn-fill{ background: var(--ink); color: var(--paper); }
.closing .btn-fill:hover{ box-shadow: 0 0 0 8px rgba(16,24,24,0.1), 0 0 0 16px rgba(16,24,24,0.05); }
.closing-foot{ margin-top: 90px; padding-top: 26px; border-top: 1px solid rgba(16,24,24,0.15); font-size: 0.85rem; color: rgba(16,24,24,0.55); }


/* =========================================================================
   A PARTIR DE ACÁ: secciones propias de este caso (SuperMaira).
   Misma tipografía, misma paleta, misma animación — estructura nueva.
   ========================================================================= */

/* ---------- 00. VOID SCREEN (el vacío inicial: no existía nada) ---------- */
.void{
  min-height: 100svh;
  display:flex; align-items:center; justify-content:center;
  background: var(--ink); text-align:center; overflow:hidden;
}
.void .wrap{ max-width: 900px; }
.void .eyebrow{ justify-content:center; margin-bottom: 30px; }
.void h1{
  font-size: clamp(2rem, 6.8vw, 5rem);
  color: var(--paper-dim);
  line-height: 1.18;
}
.void h1 strong{ color: var(--paper); display:block; }
.void .scroll-cue{
  position:absolute; bottom: 46px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size: 0.72rem; letter-spacing:0.2em; color: var(--paper-dim); text-transform:uppercase;
}
.void .scroll-cue .line{ width:1px; height:36px; background:var(--paper-dim); overflow:hidden; position:relative; }
.void .scroll-cue .line::after{
  content:""; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background: var(--amber); animation: line-fall 1.8s ease-in-out infinite;
}
@keyframes line-fall{ 0%{ top:-100%; } 100%{ top:100%; } }

/* ---------- 01. CUT (el corte: de la nada, a la marca) ---------- */
.cut{ position:relative; min-height: 100svh; overflow:hidden; display:flex; align-items:flex-end; }
.cut-bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.cut-fade{ position:absolute; inset:0; background: linear-gradient(to top, rgba(8,16,16,0.92) 0%, rgba(8,16,16,0.35) 40%, rgba(8,16,16,0.08) 70%); }
.cut-inner{ position:relative; z-index:2; padding: 0 0 80px; width:100%; }
.cut-inner .eyebrow{ color: var(--paper); }
.cut-inner .eyebrow::before{ background: var(--paper); }
.cut-inner h2{
  font-size: clamp(2rem, 6vw, 4.6rem); color: var(--paper); max-width: 900px;
  text-shadow: 0 8px 30px rgba(0,0,0,0.5); margin-top: 14px;
}

/* ---------- 02. EDITORIAL TEXT (bloques de texto: problema / idea) ---------- */
.editorial{ padding: 160px 0; }
.editorial .wrap{ max-width: 760px; }
.editorial h2{ font-size: clamp(1.8rem, 4.4vw, 3.2rem); margin: 18px 0 34px; line-height:1.12; }
.editorial p{ font-size: clamp(1.05rem, 1.7vw, 1.25rem); color: var(--paper-dim); line-height: 1.75; max-width: 620px; }
.editorial p + p{ margin-top: 18px; }
.editorial p strong{ color: var(--paper); font-weight: 600; }

/* ---------- 03. PULL QUOTE (la decisión estratégica, protagonista) ---------- */
.pull{ padding: 100px 0 180px; background: var(--ink-2); }
.pull .wrap{ max-width: 980px; }
.pull p{
  font-family:'Anton', sans-serif; text-transform:uppercase; letter-spacing:0.01em;
  font-size: clamp(2rem, 5.6vw, 4.2rem); line-height: 1.1; color: var(--paper);
}
.pull p .accent{ color: var(--amber); }
.pull .attrib{ margin-top: 34px; font-family:'Space Grotesk', sans-serif; text-transform:none; font-size: 1rem; color: var(--paper-dim); letter-spacing:0.02em; }

/* ---------- 04. LOGO REVEAL (pieza gráfica: pantalla completa, sin recorte) ---------- */
.logo-reveal{ min-height: 100svh; background: #000; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.logo-reveal img{ width: min(72vw, 760px); height:auto; }

/* ---------- 05. PALETTE (paleta real, construida en HTML — no una captura) ---------- */
.palette{ padding: 140px 0; }
.palette .wrap{ max-width: 900px; }
.palette-head h2{ font-size: clamp(1.8rem, 4.4vw, 3rem); margin: 18px 0 60px; max-width: 640px; }
.palette-grid{ display:flex; gap: 40px; flex-wrap:wrap; }
.swatch{ flex: 1 1 220px; }
.swatch-color{ width:100%; aspect-ratio: 1/1; border-radius: 26px; margin-bottom: 22px; box-shadow: 0 30px 60px rgba(0,0,0,0.35); }
.swatch-name{ font-family:'Anton', sans-serif; text-transform:uppercase; font-size:1.1rem; letter-spacing:0.02em; color: var(--paper); }
.swatch-hex{ font-size:0.9rem; color: var(--paper-dim); margin-top:6px; letter-spacing:0.04em; }

/* ---------- 06. FULL IMAGE (una fotografía real, protagonista, sin forzar nada) ---------- */
.full-shot{ position:relative; overflow:hidden; }
.full-shot img{ width:100%; height:auto; display:block; }
.full-shot.tall img{ max-height: 92vh; width:100%; object-fit:cover; object-position:center; }
.full-shot-cap{ padding: 26px 0 0; }
.full-shot-cap .wrap{ display:flex; justify-content:space-between; align-items:baseline; gap: 20px; flex-wrap:wrap; }
.full-shot-cap p{ font-size: 1rem; color: var(--paper-dim); max-width: 520px; }
.full-shot-cap .tag{ font-size:0.75rem; letter-spacing:0.18em; text-transform:uppercase; color: var(--paper-dim); opacity:0.6; white-space:nowrap; }

/* ---------- 07. SPLIT EDIT (imagen + texto, asimétrico) ---------- */
.split-edit{ padding: 30px 0; background: var(--ink); }
.split-edit .wrap{ display:grid; grid-template-columns: 1.15fr 0.85fr; gap: 70px; align-items:center; }
.split-edit.rev .wrap{ direction: rtl; }
.split-edit.rev .wrap > *{ direction: ltr; }
.split-edit-img{ border-radius: 6px; overflow:hidden; background: var(--ink-2); }
.split-edit-img img{ width:100%; height:auto; display:block; }
.split-edit-text .eyebrow{ margin-bottom: 20px; }
.split-edit-text h3{ font-size: clamp(1.5rem, 2.8vw, 2.2rem); margin: 0 0 20px; line-height:1.15; }
.split-edit-text p{ color: var(--paper-dim); font-size: 1.05rem; line-height:1.7; max-width: 420px; }

/* ---------- 08. CONTAIN SHOWCASE (piezas gráficas con texto: nunca se recortan) ---------- */
.showcase{ padding: 120px 0; background: var(--ink-2); }
.showcase-head{ margin-bottom: 56px; }
.showcase-head h2{ font-size: clamp(1.8rem, 4vw, 3rem); max-width: 640px; margin-top:16px; }
.showcase-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.showcase-item{ background: var(--ink); border-radius: 18px; overflow:hidden; display:flex; align-items:center; justify-content:center; min-height: 340px; padding: 20px; }
.showcase-item img{ max-width:100%; max-height: 460px; width:auto; height:auto; object-fit:contain; }
.showcase-cap{ margin-top: 14px; font-size: 0.85rem; color: var(--paper-dim); text-align:center; }

/* ---------- 09. MASCOT SCENE (el personaje: momento grande) ---------- */
.mascot{ position:relative; min-height: 100svh; overflow:hidden; display:flex; align-items:flex-end; }
.mascot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position: center 20%; }
.mascot-fade{ position:absolute; inset:0; background: linear-gradient(to top, rgba(8,16,16,0.9) 0%, rgba(8,16,16,0.15) 55%); }
.mascot-inner{ position:relative; z-index:2; padding: 0 0 90px; width:100%; }
.mascot-inner h2{ font-size: clamp(1.9rem, 5vw, 3.6rem); color: var(--paper); max-width: 760px; text-shadow: 0 8px 30px rgba(0,0,0,0.5); margin-top:14px; }

/* ---------- 10. COMMUNITY STRIP (comunidad: ritmo variado, no grilla) ---------- */
.community{ padding: 150px 0 90px; }
.community-head{ max-width: 640px; margin-bottom: 70px; }
.community-head h2{ font-size: clamp(1.8rem, 4.4vw, 3rem); margin-top:16px; }
.community-row{ display:grid; grid-template-columns: 1.3fr 1fr; gap: 22px; margin-bottom: 22px; }
.community-row.reverse{ grid-template-columns: 1fr 1.3fr; }
.community-row.reverse .community-cell:first-child{ order:2; }
.community-cell{ border-radius: 16px; overflow:hidden; background: var(--ink-2); aspect-ratio: 5/4; }
.community-cell img{ width:100%; height:100%; object-fit:cover; display:block; }
.community-row.portrait .community-cell{ aspect-ratio: 4/5; }
.community-row.landscape .community-cell{ aspect-ratio: 3/2; }
.community-solo{ margin-bottom: 22px; border-radius: 16px; overflow:hidden; }
.community-solo img{ width:100%; max-height: 78vh; object-fit:cover; display:block; }
.community-note{ max-width: 560px; margin-top: 30px; color: var(--paper-dim); font-size: 1.02rem; line-height:1.7; }

/* ---------- 11. RESULT (el resultado: cierre editorial antes del CTA) ---------- */
.result{ padding: 160px 0 130px; background: var(--ink-2); text-align:center; }
.result .wrap{ max-width: 880px; }
.result .eyebrow{ justify-content:center; margin-bottom: 26px; }
.result h2{ font-size: clamp(2rem, 5.6vw, 3.8rem); line-height:1.12; }
.result h2 .accent{ color: var(--amber); }
.result p{ margin-top: 30px; color: var(--paper-dim); font-size: 1.1rem; max-width: 560px; margin-left:auto; margin-right:auto; line-height:1.7; }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px){
  .nav-links{ display:none; }
  .burger{ display:block; }
  .logo-img{ width: 120px; }
  .back-link span.back-label{ display:none; }

  .split-edit .wrap, .split-edit.rev .wrap{ grid-template-columns: 1fr; direction:ltr; gap: 30px; }
  .split-edit.rev .wrap > *{ direction:ltr; }
  .showcase-grid{ grid-template-columns: 1fr 1fr; }
  .community-row, .community-row.reverse{ grid-template-columns: 1fr; }
  .community-row.reverse .community-cell:first-child{ order:0; }
  .editorial{ padding: 110px 0; }
  .pull{ padding: 80px 0 120px; }
  .palette{ padding: 100px 0; }
  .palette-grid{ gap: 24px; }
  .showcase{ padding: 90px 0; }
  .community{ padding: 110px 0 60px; }
  .result{ padding: 110px 0 90px; }
}
@media (max-width: 560px){
  .showcase-grid{ grid-template-columns: 1fr; }
  .logo-reveal img{ width: 84vw; }
}