/* Pink · demo styles — componentes que consumen tokens.css
 * Aplica solo al template AZUR studio. */

/* Override experimental (sin rosa en el sitio): el hover swap del nav usa
 * --nav-hover-color definido en pink puro en tokens.css (no se toca ese
 * archivo, es del sistema base) — se sobreescribe aquí a nut. */
:root { --nav-hover-color: var(--nut); }

/* ---------------------------------------------------------------------
 * Botón de menú (texto)
 * ------------------------------------------------------------------ */
.menu-btn {
  position: fixed;
  top: 24px;
  right: 20px;
  z-index: calc(var(--nav-z) + 2);
  width: 32px;
  height: 22px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.menu-btn__bars { position: relative; display: block; width: 100%; height: 100%; }
.menu-btn__bars span {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--nut);
  transition: transform var(--dur-move) var(--ease-nav), top var(--dur-move) var(--ease-nav), background var(--dur-swap);
}
.menu-btn__bars span:nth-child(1) { top: 6px; }
.menu-btn__bars span:nth-child(2) { top: 14px; }
.menu-btn:hover .menu-btn__bars span { background: var(--ink); }
/* Abierto → X */
.menu-btn.is-open .menu-btn__bars span:nth-child(1) { top: 10px; transform: rotate(45deg); }
.menu-btn.is-open .menu-btn__bars span:nth-child(2) { top: 10px; transform: rotate(-45deg); }

/* ---------------------------------------------------------------------
 * Nav mega-menú overlay
 * ------------------------------------------------------------------ */
.pink-nav {
  position: fixed;
  inset: 0;
  background: var(--egg);
  transform: translateY(100vh);
  transition: transform var(--dur-nav) var(--ease-nav);
  z-index: var(--nav-z);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5vh 20px 20px;
  overflow: hidden;
}
.pink-nav.is-open { transform: translateY(0); }

.menu-list { display: flex; flex-direction: column; }
.menu-item {
  width: 100%;
  height: var(--nav-letter-size);
  position: relative;
}
.menu-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: var(--egg-hard);
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: calc(var(--nav-letter-size) * 0.6);  /* < alto de fila: Boldonse renderiza ~1.5× y se solapaba */
  line-height: var(--nav-letter-size);
  letter-spacing: var(--ls-title);
  text-transform: uppercase;
  transition: color var(--dur-swap) ease;
  position: relative;
}
.menu-link .animated-text {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--nav-hover-color);
  opacity: 0;
  transition: opacity var(--dur-swap), transform var(--dur-move);
  will-change: opacity, transform;
  pointer-events: none;
}
.menu-link:hover { color: transparent; }
.menu-link:hover .animated-text { opacity: 1; }
.menu-link .animated-text .svg-letter {
  height: var(--nav-svg-letter-size);
  font-size: var(--nav-svg-letter-size);
}

.menu-info {
  position: absolute;              /* fuera del flujo → el listado se centra vertical en el viewport */
  left: 20px;
  right: 20px;
  bottom: 20px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: var(--nut);
  font-family: var(--font-text);
  font-size: var(--size-legal);
  letter-spacing: var(--ls-legal);
}
.menu-info__social {
  display: flex;
  gap: 12px;
  font-size: var(--size-social);
}
.menu-info__legal a { margin-left: 10px; }

/* ---------------------------------------------------------------------
 * Double-title (h1 hero) — SIGNATURE MOVE
 * Dos palabras diagonalmente puestas: la primera arriba-izquierda,
 * la segunda abajo-derecha. Column-flex con space-between; no hay
 * superposición. La frase completa se lee de esquina a esquina.
 * ------------------------------------------------------------------ */
.double-title {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: var(--font-display);
  font-weight: var(--w-display);
  text-transform: uppercase;
  pointer-events: none;
  z-index: 2;
  padding: 20px;
}
.title-line {
  font-size: var(--title-size);
  line-height: var(--title-line);
  color: var(--egg-hard);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  letter-spacing: var(--ls-title);
}
.title-line--left  { align-self: flex-start; justify-content: flex-start; text-align: left; }
.title-line--right { align-self: flex-end;   justify-content: flex-end;   text-align: right; transition: opacity 0.3s; }

.letter,
.svg-letter {
  display: inline-block;
  will-change: transform, opacity;
  transform: translateY(30px);
  opacity: 0;
  animation: letterIn var(--dur-letter) var(--ease-basic) 0s 1 normal forwards running;
  transform-origin: center bottom;
  line-height: var(--title-line);
}
.svg-letter {
  height: 7vw;
  width: auto;
  padding-left: 0.03em;
  fill: currentColor;
}

/* ---------------------------------------------------------------------
 * Lateral scroll editorial (home)
 * ------------------------------------------------------------------ */
.lateralScroll {
  position: relative;
  width: 100vw;
  height: var(--section-h);
  overflow: hidden;
}
/* Barra superior móvil: oculta por defecto (solo aparece ≤767px) */
.mobile-topbar, .mobile-wordmark { display: none; }
.scroller {
  display: flex;
  align-items: flex-end;
  height: 100%;
  width: max-content;
  will-change: transform;
}
.scroll-item {
  flex: 0 0 auto;
  height: 100%;
  position: relative;
}
.scroll-item[data-goto] { cursor: pointer; }
.scroll-item picture,
.scroll-item .ph,
.scroll-item img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center 25%;
  transition: opacity var(--dur-cross);
}
.scroll-item--tall  { align-self: flex-end; }

/* ---------------------------------------------------------------------
 * Banda de métricas · absoluta en bottom del intro-slot, atraviesa 100% del ancho
 * La foto (z-index 3) queda por delante → la banda "pasa por debajo"
 * Color suavizado (no negro puro) para no cortar el sistema visual
 * ------------------------------------------------------------------ */
/* Segundo viewport: foto completa full-bleed */
.scroll-item--second {
  position: relative;
  overflow: hidden;
}
.scroll-item--second .scroll-item__cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Banda de métricas · POR ENCIMA de la foto, colores del sistema (bg egg + texto nut, como brands) */
.metrics-marquee {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  background: var(--egg);
  overflow: hidden;
  padding: 24px 0;
  border-top: 1px solid var(--nut);
  border-bottom: 1px solid var(--nut);
  pointer-events: none;
  /* Oculta durante el scroll horizontal; aparece cuando la 2ª foto llena el viewport */
  opacity: 0;
  transition: opacity 0.6s ease;
}
.metrics-marquee.is-visible { opacity: 1; }
.metrics-marquee__track {
  display: inline-flex;
  gap: 100px;
  align-items: center;
  padding-left: 60px;
  animation: metricsMarquee 22s linear infinite;
  white-space: nowrap;
}
.metric {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.metric__num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 44px;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--nut);
}
.metric__label {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nut);
  opacity: 0.75;
}
@keyframes metricsMarquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (max-width: 767px) {
  /* opacity ya no se fuerza a 1: ahora el scroll lateral móvil (app.js)
     controla is-visible igual que en desktop, cuando la 2ª foto llena el viewport.
     Banda más alta (min-height, no solo padding) + flex para centrar las
     métricas de verdad en el eje vertical, no solo por padding aproximado. */
  .metrics-marquee { min-height: 104px; padding: 0; display: flex; align-items: center; }
  .metrics-marquee__track { gap: 56px; padding-left: 16px; }
  .metric__num { font-size: 30px; }
  .metric__label { font-size: 9px; }
}

/* ---------------------------------------------------------------------
 * /contact — textos compartidos con .section-contact (ver más abajo)
 * ------------------------------------------------------------------ */
.pageContact__lead {
  font-family: var(--font-text);
  font-weight: var(--w-text-lt);
  font-size: var(--size-lead);
  letter-spacing: var(--ls-lead);
  max-width: 22ch;
  color: var(--egg);
}
.pageContact__email {
  font-family: var(--font-text);
  font-weight: var(--w-text-md);
  font-size: var(--size-lead);
  letter-spacing: var(--ls-lead);
  color: var(--egg);
  display: inline-block;
  border-bottom: 1px solid color-mix(in srgb, var(--egg) 40%, transparent);
  padding-bottom: 2px;
}
/* ---------------------------------------------------------------------
 * Responsive · un solo bloque por breakpoint
 * ------------------------------------------------------------------ */
@media (pointer: coarse) {
  .double-title { height: var(--section-h-coarse); }
}

@media (max-width: 767px) {
  :root { --mobile-bar-h: 56px; }

  /* ---- Barra superior fija: fondo sólido + wordmark ------------------
     Antes lang-toggle/menu-btn flotaban transparentes y el contenido
     (imágenes, chips, texto) pasaba por detrás y se veía mal. */
  .mobile-topbar {
    display: block;
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--mobile-bar-h);
    background: var(--egg);
    border-bottom: 1px solid color-mix(in srgb, var(--nut) 30%, transparent);
    z-index: var(--toggle-z);
  }
  .mobile-wordmark {
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: var(--pad-x-mobile);
    height: var(--mobile-bar-h);
    font-family: var(--font-display);
    font-weight: var(--w-display);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--nut);
    z-index: var(--toggle-z);
    pointer-events: none;
  }
  /* body.is-contact / body.is-home: la barra se oculta en Contacto y en
     Home (Home la quiere "como estaba antes", sin barra beige encima de
     las fotos); es correcta a partir de Photos en adelante. */
  body.is-contact .mobile-topbar,
  body.is-contact .mobile-wordmark,
  body.is-contact .lang-toggle,
  body.is-contact .menu-btn,
  body.is-home .mobile-topbar,
  body.is-home .mobile-wordmark { display: none; }
  /* En Home, lang-toggle/menu-btn vuelven a flotar sueltos como antes
     (valores originales, sin centrar en ninguna barra). */
  body.is-home .lang-toggle { top: 26px; right: 90px; }
  body.is-home .menu-btn { top: 24px; right: 20px; }

  .double-title { height: var(--section-h-mobile); }
  .menu-info { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* =====================================================================
 * PORTFOLIO UGC · secciones específicas (single-pager)
 * ===================================================================== */

/* Toggle idioma ES/EN --------------------------------------------------*/
.lang-toggle {
  position: fixed;
  top: 26px;
  right: 90px;
  z-index: calc(var(--toggle-z) + 1);
  display: inline-flex;
  gap: 6px;
  font-family: var(--font-text);
  font-weight: var(--w-text-md);
  font-size: var(--size-legal);
  letter-spacing: var(--ls-legal);
  color: var(--nut);
  padding: 6px 10px;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.lang-toggle__opt { transition: color 0.2s; }
.lang-toggle__opt.is-active { color: color-mix(in srgb, var(--nut) 45%, var(--ink) 55%); }
.lang-toggle__sep { opacity: 0.4; }

/* Cabecera común de sección --------------------------------------------*/
.section-head { padding: 12vh var(--pad-x-desktop) 4vh; }
/* Título de sección estandarizado · Boldonse grande (en línea con los titulares) */
.section-title,
.section-head__label {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--title-size);
  /* Boldonse es muy alto: sus astas suben y bajan mucho, así que las líneas
     envueltas necesitan bastante aire para no solaparse. 1.3 separa de verdad
     un título de 2-3 líneas sin desvirtuar uno de una sola línea. */
  line-height: 1.3;
  letter-spacing: var(--ls-title);
  text-transform: uppercase;
  color: var(--nut);
  overflow-wrap: break-word;   /* un título largo nunca desborda su ancho */
}
.section-head__label { margin-bottom: 20px; }
.section-title { margin: 0; }

/* Home single-pager: viewport-full sin fixed global -------------------- */
.section-home {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.section-home .double-title { position: absolute; height: 100%; }
/* .home-pin: wrapper neutro en desktop (sin estilos propios); en móvil
   se vuelve el sticky que ancla título + carrusel — ver @media 767px. */
.home-pin { display: contents; }

/* Lateral scroll · MÓVIL — mecanismo propio, independiente del hijack de
   desktop: pin real con scroll nativo de página + position:sticky, el
   MISMO patrón que ya usa Photos (.photos-sticky) y que funciona en
   dispositivos reales. Nada de touchstart/touchmove ni preventDefault:
   el navegador scrollea de verdad, JS solo lee el progreso y mueve el
   carrusel — cero fricción con el gesto nativo del usuario.
   .section-home pasa a 200vh (1 viewport para el carrusel + 1 para el
   "espera" con la foto 2 fija) y .home-pin se pinea en top:0 mientras esa
   zona se recorre. El tramo extra de espera es --home-hold-vh: un scroll
   adicional con la foto 2 + métricas ya asentadas antes de soltar a Photos.
   (Va DESPUÉS de la regla base .home-pin{display:contents} arriba —
   si va antes, pierde la cascada aunque esté en @media, como ya pasó
   antes con .lang-toggle.) */
@media (max-width: 767px) {
  :root { --home-hold-vh: 60vh; }
  .section-home { height: calc(200vh + var(--home-hold-vh)); overflow: visible; }
  .home-pin {
    display: block;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
  }
  .section-home .double-title { height: 100vh; }
  /* El toggle ES/EN y el menú flotan arriba a la derecha (y≈20-53). Bajamos el
     título del hero para que arranque DEBAJO de ellos → con nombres largos ya
     no se solapa el toggle sobre el nombre. */
  .double-title { padding-top: 62px; }
}

/* ---- 2 · PHOTOS UGC (parallax opuesto con scroll pinning) ---------- */
.section-photos {
  position: relative;
  height: 480vh;
  padding-bottom: 0;
}
.photos-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.photos-watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.photos-watermark__text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 6vw;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--nut);
  white-space: nowrap;
  transform: translateY(8vh) scale(1);
  transform-origin: center center;
  will-change: transform, color, opacity;
  opacity: 1;
}
.parallax-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 64px;
  padding: 0 var(--pad-x-desktop);
  align-items: start;
  overflow: hidden;
  z-index: 2;
  will-change: transform;
  /* transform inicial se aplica por JS: translateY(100vh) → 0 durante fase P3a */
}
.parallax-col {
  display: flex;
  flex-direction: column;
  gap: 64px;
  will-change: transform;
}
.parallax-col img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

/* ---- 3 · BRANDS (marquee horizontal infinito) ---------------------- */
.section-brands { padding-top: 16vh; padding-bottom: 12vh; }

/* Label sobre la banda · mismo tratamiento tipográfico que el toggle ES/EN */
.brands-head { padding: 0 var(--pad-x-desktop); margin-bottom: 3vh; text-align: center; }
.brands-head__label {
  font-family: var(--font-text);
  font-weight: var(--w-text-md);
  font-size: var(--size-legal);
  letter-spacing: var(--ls-legal);
  text-transform: uppercase;
  color: var(--nut);
}
.marquee {
  overflow: hidden;
  width: 100%;
  padding: 40px 0;
}
.marquee__track {
  display: inline-flex;
  gap: 80px;
  animation: marquee 60s linear infinite;
  white-space: nowrap;
  padding-left: 80px;
}
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee--logos .marquee__track { gap: 110px; padding-left: 110px; align-items: center; animation-duration: 18s; }
.marquee__logo {
  height: 4.2vw;
  width: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  object-fit: contain;
  opacity: 0.82;
  position: relative;
}
.marquee__logo--img img { height: 100%; width: auto; display: block; object-fit: contain; }
/* Recolor al color del sistema (tan) cuando NO se muestran a color: pinta la
   silueta del logo (su alpha) con --nut vía mask → look uniforme de la demo. */
.marquee--logos.is-mono .marquee__logo--img img { visibility: hidden; }
.marquee--logos.is-mono .marquee__logo--img::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--nut);
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
}
@media (max-width: 767px) {
  .marquee__logo { height: 12vw; }
  .marquee--logos .marquee__track { gap: 60px; padding-left: 60px; }
}

/* ---- 4 · VIDEOS UGC ------------------------------------------------ */
.section-videos { position: relative; padding-bottom: 12vh; }

/* ---- 4a · VIDEO STAGE (sticky, chips + título + reel horizontal) ---- */
.video-stage {
  position: relative;
  z-index: 3;
  background: var(--egg);
  /* height se calcula por JS según el ancho total del reel */
  height: 800vh;
}
.video-stage__inner {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-rows: auto auto 1fr;
  padding: 20px var(--pad-x-desktop) 6vh;   /* top alineado con el toggle ES/EN */
  overflow: hidden;
  gap: 3vh;
  background: var(--egg);
}

/* Menú header sutil arriba — mismo tratamiento que ES/EN */
.cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  align-items: center;
}
.cat-chip {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nut);
  padding: 4px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: color 0.2s;
  white-space: nowrap;
}
.cat-chip:hover { color: var(--ink); }
.cat-chip.is-active { color: color-mix(in srgb, var(--nut) 45%, var(--ink) 55%); }

/* Título grande de categoría actual — alineado izquierda */
.cat-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 4vw;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--nut);
  position: relative;
  height: 1.85em;                 /* caja holgada para Boldonse, sin recorte */
  line-height: 1;
  overflow: hidden;
}
/* Dos capas que ruedan a la vez: la saliente sube y sale mientras la
 * entrante sube desde abajo hasta el centro → nunca hay hueco vacío. */
.cat-title__text {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;            /* centra el glyph vertical sin cortar */
  white-space: nowrap;
  transform: translateY(0);
  opacity: 1;
  transition: transform 0.34s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.28s;
  will-change: transform, opacity;
}

/* Reel horizontal — 3 tiles visibles centrados en proporción 9:16 real, con aire entre ellos */
.reel {
  align-self: center;
  overflow: hidden;
  width: 100%;
}
.reel-track {
  display: flex;
  gap: 5vw;
  align-items: center;
  height: 70vh;              /* reels más grandes; se ven menos por pantalla pero mantienen 9:16 */
  will-change: transform;
}
.reel-spacer { flex: 0 0 auto; height: 100%; width: 0; pointer-events: none; }
.reel-tile {
  flex: 0 0 auto;
  height: 100%;
  aspect-ratio: 9 / 16;                    /* height fijo 50vh → width se calcula */
  overflow: hidden;
  background: var(--nut);
  cursor: pointer;
  position: relative;
  transition: transform 0.3s;
}
.reel-tile__media {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.reel-tile__media img,
.reel-tile__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
  display: block;
}
.reel-tile:hover { transform: translateY(-6px); }
.reel-tile:hover .reel-tile__media img,
.reel-tile:hover .reel-tile__media video { transform: scale(1.02); }
.reel-tile__views {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.55);
  color: var(--egg);
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.02em;
  z-index: 3;
}
.reel-tile__brand {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  color: var(--egg);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  z-index: 3;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.reel-tile__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--egg);
  font-size: 40px;
  opacity: 0;
  transition: opacity 0.2s;
  background: rgba(0,0,0,0.25);
  z-index: 4;
  pointer-events: none;
}
.reel-tile:hover .reel-tile__play { opacity: 1; }

/* ---- 4b · MODAL GLASS para reproducir video ------------------------ */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 8vh 8vw;
}
.video-modal[hidden] { display: none; }
.video-modal__glass {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--egg) 12%, transparent);   /* tinte muy leve: deja ver los reels difuminados detrás */
  backdrop-filter: blur(20px) saturate(1.05);
  -webkit-backdrop-filter: blur(20px) saturate(1.05);
  cursor: pointer;
}
.video-modal__player {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  animation: modalIn 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}
.video-modal__ph {
  /* width acotado por AMBOS lados (80vw y 80vh convertido a ancho 9:16):
     con solo height:80vh, en viewports estrechos (móvil) el ancho resultante
     supera el hueco disponible del grid y el modal queda descentrado/cortado
     (el grid no encoge el track por debajo del contenido). */
  width: min(80vw, calc(80vh * 9 / 16));
  aspect-ratio: 9 / 16;                 /* reel limpio: sin overlays, el glass se ve detrás */
  background: var(--ink) center / cover no-repeat;
  border-radius: 4px;
}
/* Meta FUERA del reel, debajo, sutil */
.video-modal__meta {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.video-modal__brand { color: var(--ink); opacity: 0.7; }
.video-modal__views { color: var(--nut); }
.video-modal__views::before { content: "▷ "; opacity: 0.7; }
@keyframes modalIn {
  from { transform: scale(0.95); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

@media (max-width: 767px) {
  /* padding-top despeja la barra superior fija: antes los chips (Cosmética,
     Moda...) arrancaban en 20px y quedaban justo debajo del toggle ES/EN
     y el botón de menú, solapándose visualmente con ellos. */
  .video-stage__inner { padding: calc(var(--mobile-bar-h) + 14px) var(--pad-x-mobile) 3vh; }
  /* 14vw recortaba hasta la categoría más corta ("Cosmética"); 7vw cabe con
     margen incluso para la más larga ("Cuidado capilar", 16 caracteres). */
  .cat-title { font-size: 7vw; }

  /* Reorden móvil: categoría (grande) → video → filtro. Antes los chips
     iban primero y envolvían en 2-3 filas irregulares (se veía desordenado).
     grid-template-rows cambia de orden para que la fila 1fr (flexible) le
     toque ahora al reel, que es el que va en medio. */
  .video-stage__inner { grid-template-rows: auto 1fr auto; gap: 2vh; }
  .cat-title { order: 1; }
  .reel { order: 2; }
  .cat-chips { order: 3; }

  /* Filtro como tira horizontal de una sola línea con scroll táctil, en vez
     de envolver en varias filas: más compacto y ordenado a este ancho. */
  .cat-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 20px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cat-chips::-webkit-scrollbar { display: none; }
  .cat-chip { flex: 0 0 auto; font-size: 12px; }
  /* Sin width fijo: deja que aspect-ratio:9/16 (regla base) calcule el ancho
     a partir de height:100% del track. El width calc() de antes competía con
     el aspect-ratio y la ficha quedaba deformada (ratio real 0.47 en vez de 0.5625). */
}

/* ---- 5 · MEDIA KIT ------------------------------------------------- */
.section-media-kit {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6vh 0;
}
.section-media-kit .section-head { padding: 0 var(--pad-x-desktop) 5vh; }
.gear-list {
  padding: 0 var(--pad-x-desktop);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--nut);
}
.gear-item {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--nut);
  align-items: baseline;
}
.gear-item:nth-child(odd)  { padding-right: 24px; border-right: 1px solid var(--nut); }
.gear-item:nth-child(even) { padding-left: 24px; }
/* Item impar SOLO en su fila (p. ej. uno solo): ocupa ancho completo, sin borde colgando. */
.gear-item:nth-child(odd):last-child { grid-column: 1 / -1; border-right: 0; padding-right: 0; }
.gear-item__label {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--size-sub-title);
  letter-spacing: var(--ls-para);
  text-transform: uppercase;
  color: var(--nut);
}
.gear-item__name {
  font-family: var(--font-text);
  font-weight: var(--w-text-md);
  font-size: var(--size-para);
  letter-spacing: var(--ls-para);
  color: var(--ink);
}
.gear-item__note {
  font-family: var(--font-text);
  font-weight: var(--w-text-lt);
  font-size: var(--size-legal);
  letter-spacing: var(--ls-legal);
  color: var(--nut);
  grid-column: 2;
  margin-top: 4px;
}

/* ---- 6 · ABOUT · foto izq (alto viewport) + panel derecho con texto ancho justificado --- */
.section-about {
  display: grid;
  grid-template-columns: 1fr 1fr;    /* foto a la mitad; el texto se expande dentro de su columna */
  min-height: 100vh;
  align-items: stretch;
  padding: 0;
}
.about-photo { height: 100vh; overflow: hidden; background: var(--nut); }
.about-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;              /* el contenido usa todo el ancho del panel */
  text-align: center;                /* título centrado */
  gap: 40px;
  padding: 6vh 3vw;
}
.about-copy {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: none;                   /* mucho más ancho: llena el panel (≈ el doble) */
  width: 100%;
}
.about-copy p {
  font-family: var(--font-text);
  font-weight: var(--w-text-lt);
  font-size: var(--size-list);       /* discreto (20px) */
  letter-spacing: var(--ls-list);
  line-height: 1.6;
  color: var(--ink);
  text-align: justify;               /* texto sustentado */
}

/* ---- 7 · FEEDBACK -------------------------------------------------- */
.section-feedback { padding-bottom: 12vh; }
/* Organización lógica según cuántas reseñas se publiquen: flex centrado → la
   ÚLTIMA fila siempre queda centrada, nunca deja una tarjeta huérfana suelta a
   un lado. 1→centrada · 2→pareja centrada · 3→trío · 4→2×2 · 5-6+→filas de 3
   con la cola centrada. */
.testimonial-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  padding: 0 var(--pad-x-desktop);
  align-items: flex-start;            /* alturas orgánicas, no estiradas */
}
.testimonial { flex: 0 1 clamp(300px, 30%, 380px); }
/* Exactamente 4 → rejilla 2×2 equilibrada (mejor que 3 + 1 centrada). */
.testimonial-grid:has(> .testimonial:nth-child(4):last-child) > .testimonial { flex-basis: 42%; }
/* Ritmo visual: la 2ª de cada trío en color acento (nut). */
.testimonial-grid > .testimonial:nth-child(3n+2) { background: var(--nut); color: var(--egg); }
.testimonial-grid > .testimonial:nth-child(3n+2) footer { color: var(--egg); opacity: 0.85; }
.testimonial-grid > .testimonial:nth-child(3n+2) footer strong { color: var(--egg); }
.testimonial {
  margin: 0;
  padding: 32px;
  background: var(--egg-hard);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* reveal al entrar en viewport (JS añade .is-in) */
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.6s var(--ease-nav), transform 0.6s var(--ease-nav), box-shadow 0.3s ease;
  will-change: opacity, transform;
}
.testimonial.is-in { opacity: 1; transform: translateY(0); }
.testimonial.is-in:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--ink) 12%, transparent);
}
.testimonial p {
  font-family: var(--font-text);
  font-weight: var(--w-text-lt);
  font-size: var(--size-para);
  letter-spacing: var(--ls-para);
  line-height: 1.4;
  overflow-wrap: break-word;
  min-width: 0;
}
/* Espacio irrompible antes de la comilla de cierre → no se queda huérfana en su propia línea */
.testimonial p::before { content: "\201C "; color: var(--nut); font-weight: var(--w-text-md); }
.testimonial p::after  { content: "\00A0\201D"; color: var(--nut); font-weight: var(--w-text-md); }
/* En las tarjetas de acento (fondo nut) la comilla nut queda invisible → usar egg */
.testimonial-grid > .testimonial:nth-child(3n+2) p::before,
.testimonial-grid > .testimonial:nth-child(3n+2) p::after { color: var(--egg); }
.testimonial footer {
  font-family: var(--font-text);
  font-weight: var(--w-text-lt);
  font-size: var(--size-legal);
  letter-spacing: var(--ls-legal);
  color: var(--nut);
  text-transform: uppercase;
  margin-top: auto;
}
.testimonial footer strong {
  color: var(--ink);
  font-weight: var(--w-text-md);
  margin-right: 4px;
}

/* ---- 8 · RATES ----------------------------------------------------- */
.section-rates {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6vh 0;
}
.section-rates .section-head { padding: 0 var(--pad-x-desktop) 5vh; }
.rates-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 0 var(--pad-x-desktop);
}
/* Pocos planes: se centran en vez de dejar columnas vacías (1 o 2). */
.rates-grid:has(> .rate-card:last-child:nth-child(1)) { grid-template-columns: minmax(0, 420px); justify-content: center; }
.rates-grid:has(> .rate-card:last-child:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 380px)); justify-content: center; }
.rate-card {
  padding: 40px 32px;
  border: 1px solid var(--nut);
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--egg);
  transition: background 0.3s, color 0.3s;
}
.rate-card:hover { background: var(--nut); color: var(--egg); }
.rate-card:hover .rate-card__label,
.rate-card:hover .rate-card__price { color: var(--egg); }
.rate-card__label {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--size-sub-title);
  letter-spacing: var(--ls-para);
  text-transform: uppercase;
  color: var(--nut);
  overflow-wrap: break-word;
}
.rate-card__price {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: 4vw;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  overflow-wrap: break-word;
}
.rate-card__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-text);
  font-weight: var(--w-text-lt);
  font-size: var(--size-list);
  letter-spacing: var(--ls-list);
}
.rate-card__list li::before { content: "\B7 "; opacity: 0.5; }
.rates-note {
  padding: 32px var(--pad-x-desktop) 0;
  font-family: var(--font-text);
  font-weight: var(--w-text-lt);
  font-size: var(--size-legal);
  letter-spacing: var(--ls-legal);
  color: var(--nut);
  text-align: center;
}

/* ---- 9 · CONTACT --------------------------------------------------- */
.section-contact.bgPink {
  /* Override experimental: sin rosa en todo el sitio → tan (nut), combo válido del sistema con egg */
  background-color: var(--nut);
}
.section-contact {
  position: relative;
  min-height: 100vh;
  padding: 12vh var(--pad-x-desktop);
  color: var(--egg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}
.section-contact .pageContact__title {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: 12vw;
  line-height: 0.95;
  letter-spacing: var(--ls-title);
  color: var(--egg);
  text-transform: uppercase;
  max-width: 8ch;
}
.contact-block { display: flex; flex-direction: column; gap: 24px; max-width: 42ch; }
.contact-channels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  border-top: 1px solid color-mix(in srgb, var(--egg) 40%, transparent);
  padding-top: 24px;
}
.contact-channel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--egg);
  text-decoration: none;
}
.contact-channel__label {
  font-family: var(--font-text);
  font-weight: var(--w-text-md);
  font-size: var(--size-legal);
  letter-spacing: var(--ls-legal);
  text-transform: uppercase;
  opacity: 0.7;
}
.site-credit {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3vh;
  font-family: var(--font-text);
  font-weight: var(--w-text-md);
  font-size: 10px;
  letter-spacing: var(--ls-legal);
  text-transform: uppercase;
  color: var(--egg);
  opacity: 0.5;
  text-align: center;
}
.site-credit__link {
  color: var(--egg);
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 1;
  transition: opacity 0.2s;
}
.site-credit__link:hover { opacity: 0.7; }
.contact-channel__value {
  font-family: var(--font-text);
  font-weight: var(--w-text-lt);
  font-size: var(--size-para);
  letter-spacing: var(--ls-para);
}

/* ---- Responsive overrides para las nuevas secciones ---------------- */
@media (max-width: 767px) {
  /* Centrados verticalmente en la barra de 56px (van DESPUÉS de la regla
     base .lang-toggle{top:26px} en el archivo — si se declaran antes,
     pierden la cascada aunque estén en @media). */
  .lang-toggle { top: 15px; right: 80px; }
  .menu-btn { top: 17px; right: 20px; }
  .section-head { padding: 8vh var(--pad-x-mobile) 3vh; }

  /* padding-top despeja la barra superior: antes las columnas llegaban
     hasta arriba (inset:0) y las fotos, al subir, pasaban por detrás del
     header en vez de detenerse debajo. */
  .parallax-grid { grid-template-columns: 1fr 1fr; gap: 32px; padding: calc(var(--mobile-bar-h) + 12px) var(--pad-x-mobile) 0; min-height: auto; }
  .parallax-grid .parallax-col { gap: 32px; }
  .parallax-grid .parallax-col:nth-child(3) { display: none; }

  .marquee__track { gap: 40px; padding-left: 40px; }

  .gear-list { grid-template-columns: 1fr; padding: 0 var(--pad-x-mobile); }
  .gear-item { grid-template-columns: 120px 1fr; padding: 20px 0; }
  .gear-item:nth-child(odd) { padding-right: 0; border-right: 0; }
  .gear-item:nth-child(even) { padding-left: 0; }
  /* "Iluminación" (una sola palabra, sin espacio para partir) a 24px medía
     187px de ancho real y desbordaba su columna de 120px por encima del
     texto del nombre (overflow:visible). A 15px cabe con margen; el
     overflow-wrap de refuerzo evita que cualquier palabra futura repita el bug. */
  .gear-item__label { font-size: 15px; overflow-wrap: anywhere; }

  .section-about { grid-template-columns: 1fr; min-height: auto; }
  .about-photo { height: auto; aspect-ratio: 3 / 4; }
  .about-panel { padding: 8vh var(--pad-x-mobile); gap: 28px; }

  .testimonial-grid { padding: 0 var(--pad-x-mobile); }
  .testimonial-grid > .testimonial { flex-basis: 100%; }
  /* Reseñas visibles en móvil: las que sobran del número elegido se ocultan
     (por defecto 3; el creator lo cambia en el wizard) */
  .testimonial-grid > .testimonial.is-mobile-extra { display: none; }
  .rates-grid { grid-template-columns: 1fr; padding: 0 var(--pad-x-mobile); }

  .section-contact { padding: 8vh var(--pad-x-mobile); }
  .contact-channels { grid-template-columns: 1fr 1fr; gap: 20px; }
}