/* ============================================================
   CHAMÁN — one page · styles.css
   Fase 1: estructura de bloques full viewport + nav fijo
   Paleta extraída del diseño (onepage-desktop.jpg)
   ============================================================ */

/* Bebas Neue Book — cut real del diseño (OFL, auto-hospedado).
   Google Fonts solo sirve el cut Regular, más grueso; por eso renderizaba pesada. */
@font-face {
  font-family: 'Bebas Neue Book';
  src: url('../fonts/BebasNeue-Book.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --blanco:  #FFFFFF;
  --lila:    #D8D1E1;   /* morado bajito */
  --negro:   #1D1C1A;
  --coral:   #F1928C;
  --morado:  #6539A8;
  --tinta:   #161513;
  --negro-puro: #000000;   /* color del nav según spec */

  /* Tipografías: nav confirmada por specs del diseño (Bebas Neue Book).
     Anton/Oswald siguen siendo provisionales para el resto. */
  --font-nav:     'Bebas Neue Book', sans-serif;
  --font-display: 'Anton', sans-serif;
  --font-ui:      'Oswald', sans-serif;

  /* Caja de contenido del diseño (Mafer maquetó todo a 1620px).
     Referencia para clamp: preferred = px_diseño / 16.2 vw
     → el valor del diseño es exacto cuando el viewport = 1620px,
       se mantiene fijo por encima (caja centrada) y escala por debajo. */
  --content-max: 1620px;
  --gutter:      clamp(20px, 4vw, 40px);

  --nav-font: clamp(20px, 1.975vw, 32px);    /* 32px  @1620 */
  --nav-h:    clamp(76px, 9.26vw, 150px);    /* 150px @1620 */
  --logo-w:   clamp(120px, 12.10vw, 196px);  /* 196px @1620 */

  --cta-w:    clamp(180px, 13.58vw, 220px);  /* 220px @1620 */
  --cta-h:    clamp(50px, 3.70vw, 60px);     /* 60px  @1620 */
  --cta-icon: clamp(19px, 1.48vw, 24px);     /* 24px  @1620 */

  /* Empuje óptico hacia abajo para centrar Bebas Neue (solo-mayúsculas
     se apoya alto en su caja de texto; escala con el font-size). */
  --cap-nudge: 0.09em;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-ui);
  color: var(--tinta);
  background: var(--blanco);
  overflow-x: hidden;
}

/* ============ NAV FIJO ============ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  /* Color base del nav = #000 (spec). Cambia a blanco sobre bloques negros. */
  --nav-color: var(--negro-puro);
  color: var(--nav-color);
  transition: color .3s ease;
}
.site-header[data-nav="dark"] { --nav-color: var(--blanco); }

.header-inner {
  width: min(var(--content-max), 100% - var(--gutter) * 2);  /* caja 1620 centrada */
  margin: 0 auto;
  height: var(--nav-h);            /* line-height 150px del diseño = banda del nav */
  display: flex;
  align-items: center;             /* vertical alignment: middle */
  justify-content: space-between;
  gap: 24px;
}

.logo {
  display: inline-flex;
  color: var(--nav-color);
}
.logo-svg {
  width: var(--logo-w);
  height: auto;
  display: block;
}

/* Nav + botón agrupados y pegados a la derecha de la caja 1620 (diseño Mafer) */
.nav-cluster {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
}
.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3.5vw, 56px);
}
.nav-link {
  /* Specs diseño: Bebas Neue Book 400 · 32px · ls 1% · uppercase · #000 */
  font-family: var(--font-nav);
  font-weight: 400;
  font-size: var(--nav-font);
  letter-spacing: .01em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--nav-color);
  transform: translateY(var(--cap-nudge));  /* centrado óptico */
}
.nav-link:hover { opacity: .7; }

/* Estado activo (diseño Mafer): texto morado + dot centrado debajo.
   dot 9px y gap 14px @32px → expresados en em para escalar con la fuente. */
.nav-link.is-active { color: var(--morado); }
.nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 0.10em);      /* afinado por captura para dejar ~14px bajo el texto */
  width: 0.281em;                /* 9px @32px */
  height: 0.281em;
  border-radius: 50%;
  background: var(--morado);
  transform: translateX(-50%);
}

.btn-cta {
  /* Diseño Mafer: 220 × 60 px, sin borde, pastilla coral */
  width: var(--cta-w);
  height: var(--cta-h);
  font-family: var(--font-nav);
  font-weight: 400;
  font-size: var(--nav-font);
  letter-spacing: .01em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tinta);
  background: var(--coral);
  border: none;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  transition: background .25s ease, color .25s ease;
}
.btn-cta:hover { background: var(--tinta); color: var(--coral); }
.btn-cta__label { transform: translateY(var(--cap-nudge)); }  /* centrado óptico, sin mover el ícono */
.cta-icon {
  width: var(--cta-icon);
  height: var(--cta-icon);
  flex-shrink: 0;
}

/* Hamburguesa (Lucide menu) — oculta en desktop, visible en tablet/mobile */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  color: var(--nav-color);
  cursor: pointer;
}
.nav-toggle svg {
  width: clamp(30px, 3.6vw, 42px);
  height: auto;
}

/* ============ MENÚ OVERLAY (tablet / mobile) ============ */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--blanco);
  display: flex;
  flex-direction: column;
  padding: 0 var(--gutter) calc(var(--gutter) + 20px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
  overflow-y: auto;
}
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  flex-shrink: 0;
}
.mm-logo-img { width: var(--logo-w); height: auto; display: block; }
.menu-close {
  background: none;
  border: none;
  color: var(--tinta);
  cursor: pointer;
  display: inline-flex;
  padding: 0;
}
.menu-close svg { width: clamp(30px, 3.6vw, 42px); height: auto; }

.mobile-menu__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(4px, 1.5vh, 18px);
}
.mm-link {
  font-family: var(--font-nav);
  font-weight: 400;
  font-size: clamp(48px, 13vw, 100px);
  line-height: 1.1;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: var(--tinta);
  padding: .18em 0;
}
/* Estado activo en el menú = banda morada full-width + texto blanco */
.mm-link.is-active {
  color: var(--blanco);
  background: var(--morado);
  margin: 0 calc(var(--gutter) * -1);   /* full-bleed hasta los bordes */
}
.mobile-menu__cta {
  align-self: center;
  flex-shrink: 0;
  width: min(420px, 100%);
  height: clamp(60px, 11vw, 80px);
  font-size: clamp(20px, 5vw, 30px);
}

/* ============ BLOQUES ============ */
.bloque {
  position: relative;
  min-height: 100svh;      /* full alto viewport (svh = estable en mobile) */
  width: 100%;
  display: grid;
  place-items: center;
}

/* ---- Viñetas de navegación del manifiesto (bloques 2-3-4) ----
   Fijas al borde de la caja 1620, centradas verticalmente. Solo visibles
   mientras se recorren los bloques 2-4. Activo baja 1→2→3.
   Medidas Mafer: inactivo ~14px, activo ~20px, separación ~40px centro a centro. */
.dots-nav {
  position: fixed;
  top: 50%;
  right: max(var(--gutter), (100vw - var(--content-max)) / 2);
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 1.6vw, 26px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s ease, visibility .35s ease;

  /* colores por fondo (los ajusta el JS con data-bg) */
  --dot-off: var(--tinta);
  --dot-on:  var(--coral);
}
.dots-nav.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }
.dots-nav[data-bg="lila"]  { --dot-off: var(--tinta);  --dot-on: var(--coral); }
.dots-nav[data-bg="negro"] { --dot-off: var(--blanco); --dot-on: var(--coral); }
.dots-nav[data-bg="coral"] { --dot-off: var(--tinta);  --dot-on: var(--blanco); }

.dots-nav .dot {
  width: clamp(10px, 0.864vw, 14px);   /* 14px @1620 */
  height: clamp(10px, 0.864vw, 14px);
  border-radius: 50%;
  background: var(--dot-off);
  transition: background .3s ease, transform .3s ease;
}
.dots-nav .dot.is-active {
  background: var(--dot-on);
  transform: scale(1.42);              /* activo ~20px */
}

/* ---- Indicador de scroll al pie del hero ---- */
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: clamp(24px, 3vw, 48px);
  transform: translateX(-50%);
  color: var(--tinta);
  display: block;
}
.scroll-hint-svg {
  width: auto;
  height: clamp(56px, 5.19vw, 84px);   /* 84px @1620 */
  display: block;
}
/* Ruedita: baja y se desvanece (animación clásica de mouse) */
.sh-wheel {
  animation: sh-wheel 1.8s cubic-bezier(.4,0,.2,1) infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes sh-wheel {
  0%      { transform: translateY(-3px); opacity: 0; }
  25%     { opacity: 1; }
  70%     { transform: translateY(4px);  opacity: 0; }
  100%    { transform: translateY(4px);  opacity: 0; }
}
/* Chevrons: pulso en secuencia hacia abajo */
.sh-chev {
  animation: sh-chev 1.8s ease-in-out infinite;
  opacity: .35;
}
.sh-chev-1 { animation-delay: .15s; }
.sh-chev-2 { animation-delay: .35s; }
@keyframes sh-chev {
  0%, 60%, 100% { opacity: .3; }
  30%           { opacity: 1; }
}

/* El footer no mide alto full */
footer.bloque {
  min-height: auto;
  padding: 90px 24px;
}

.bg-blanco { background: var(--blanco); color: var(--tinta); }

/* ---- Hero: cover full-bleed (fallback del video) ---- */
.hero { overflow: hidden; }
.hero-cover {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero .scroll-hint { z-index: 2; }
.bg-lila   { background: var(--lila);   color: var(--morado); }
.bg-negro  { background: var(--negro);  color: var(--blanco); }
.bg-coral  { background: var(--coral);  color: var(--tinta); }

/* Etiquetas provisionales para ubicar cada bloque durante la maquetación */
.bloque-label {
  font-family: var(--font-display);
  font-size: clamp(22px, 3.2vw, 52px);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.15;
  padding: 0 24px;
  opacity: .85;
}
.bloque-label span {
  display: block;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: .45em;
  letter-spacing: .35em;
  opacity: .6;
  margin-bottom: 10px;
}

/* ============ RESPONSIVE ============ */
/* ---- TABLET (≤1024): logo completo + botón + hamburguesa; links al menú ---- */
@media (max-width: 1024px) {
  .main-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .logo-svg { width: 196px; }              /* logo completo en tablet (diseño Mafer) */
}

/* ---- Pantallas angostas (≤600): el CTA del header se va al menú (evita desborde) ---- */
@media (max-width: 600px) {
  .nav-cluster .btn-cta { display: none; }
}

/* ---- MOBILE (≤480): logo a la mitad ---- */
@media (max-width: 480px) {
  .logo-svg,
  .mm-logo-img { width: 98px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}