/* ==========================================================================
   MARCA · 2026 Website
   Tokens y medidas extraídos del archivo Figma "2026 Marca Web FINAL".
   Diseño base: 1920px. Toda la tipografía escala de forma fluida desde ahí.
   ========================================================================== */

:root {
  /* --- Marca --- */
  --black: #000000;
  --white: #ffffff;
  --off-white: #f9faf0;
  --grey: #8a8a8a;
  --grey-dark: #1a1a1a;

  /* --- Degradé de cliente (normalizado a 0.7 en todo el sitio) --- */
  --client-gradient-opacity: 0.7;

  /* --- Tipografía fluida. El segundo valor es el px del diseño / 1920 * 100vw --- */
  --fs-display: clamp(2.75rem, 5.2vw, 6.25rem);   /* 100px — contact, roster */
  --fs-h1:      clamp(2.5rem, 5vw, 6rem);         /* 96px  — our culture */
  --fs-h2:      clamp(2rem, 3.96vw, 4.75rem);     /* 76px  — campañas */
  --fs-body-lg: clamp(1.125rem, 2.08vw, 2.5rem);  /* 40px  — culture body */
  --fs-body:    clamp(1rem, 1.875vw, 2.25rem);    /* 36px  — clients body */
  --fs-label:   clamp(0.875rem, 1.46vw, 1.75rem); /* 28px  — form labels */
  --fs-nav:     clamp(0.8125rem, 1.3vw, 1.5625rem);/* 25px — menú */
  --fs-btn:     clamp(0.75rem, 1.15vw, 1.375rem); /* 22px  — botones */
  --fs-team:    clamp(0.8125rem, 1.04vw, 1.25rem);/* 20px  — equipo */
  --fs-small:   clamp(0.75rem, 0.99vw, 1.1875rem);/* 19px  — dirección */

  /* --- Ritmo. Medidas del diseño (canvas 1920): el texto arranca en 289px y
         la regla vertical en 240px. --- */
  --content-x: clamp(1.25rem, 15.05vw, 289px);
  --rule-x:    clamp(0.6rem, 12.5vw, 240px);
  --gutter: clamp(1.25rem, 4.2vw, 5rem);
  /* El logo de cliente mide lo mismo que el de MARCA: 169px sobre 1920 */
  --logo-w: clamp(104px, 8.6vw, 169px);
  --section-pad: clamp(4rem, 10vw, 11rem);
  --nav-h: clamp(3.5rem, 5.5vw, 5.5rem);
  /* Grosor único de TODAS las reglas del sitio: our culture, la vertical de
     clients, the team y contact. El diseño le da 3px a la vertical de clients y
     1px al resto; Sebastian unificó hacia arriba y subió a 4px. */
  --rule-w: 4px;
  /* El velo queda apenas por debajo de la barra y empieza a caer temprano. La
     rampa ocupa menos altura, pero distribuye la pérdida de alfa desde arriba;
     el último 8% ya es completamente transparente para que Safari no dibuje
     el borde físico del pseudo-elemento sobre imágenes de alto contraste. */
  --nav-veil: calc(var(--nav-h) * 1.35);
  --nav-veil-mask: linear-gradient(to bottom,
    rgba(0,0,0,1) 0%, rgba(0,0,0,.99) 12%, rgba(0,0,0,.96) 24%,
    rgba(0,0,0,.90) 36%, rgba(0,0,0,.80) 46%, rgba(0,0,0,.66) 56%,
    rgba(0,0,0,.50) 64%, rgba(0,0,0,.35) 71%, rgba(0,0,0,.22) 77%,
    rgba(0,0,0,.12) 82%, rgba(0,0,0,.055) 86%, rgba(0,0,0,.015) 89%,
    rgba(0,0,0,0) 92%, rgba(0,0,0,0) 100%);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ========================= Reset ========================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: 'Montserrat', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  line-height: 1.35;
  overflow-x: hidden;
}
/* height:auto es obligatorio cuando el <img> lleva atributos width/height: sin
   él el alto queda clavado en el valor del atributo mientras el ancho escala, y
   la imagen se deforma. También es lo que habilita el aspect-ratio, que sólo
   aplica cuando una de las dos dimensiones es auto. */
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, p, figure, figcaption { margin: 0; }

/* Respeta a quien pide menos movimiento */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================= Navegación ========================= */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
  background: none;
}
/* El velo del menú es SIEMPRE un degradé, también con scroll.
   Antes, `data-scrolled` cambiaba el degradé por un fondo plano y aparecía un
   rectángulo con borde duro cortando la imagen. Ahora el velo vive en un
   ::before más alto que la barra (--nav-veil), así el texto queda sobre la
   parte densa y el corte cae fuera del menú, donde ya es transparente.
   El desvanecido lo hace la MÁSCARA, no el color, para poder usar una rampa
   escalonada sin repetir los stops en cada variante de color.
   Sin `backdrop-filter`: el Figma no tiene blur, y un blur sobre un elemento
   enmascarado es donde WebKit a veces ignora la máscara y devuelve otra vez un
   rectángulo de foco con canto duro — el problema que esto viene a resolver.
   z-index:-1 porque el logo no está posicionado y un ::before absoluto le
   pasaría por encima. */
.nav::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 0; right: 0; top: 0; height: var(--nav-veil);
  background: rgba(0,0,0,.82);
  -webkit-mask-image: var(--nav-veil-mask); mask-image: var(--nav-veil-mask);
  transition: background .35s var(--ease);
}
/* Sin scroll el velo es más liviano: la intro y el primer slide se ven limpios. */
.nav:not([data-scrolled="true"])::before { background: rgba(0,0,0,.62); }

/* Siempre visible: el menú sirve en toda la navegación y en el diseño está en
   todos los frames. Sobre secciones claras se invierte: el degradé sigue siendo
   un degradé, pero blanco — un velo negro sobre la sección blanca del equipo se
   leería como una mancha oscura atravesando la sección. */
.nav[data-on-light="true"] { color: var(--black); }
.nav[data-on-light="true"]::before { background: rgba(255,255,255,.9); }
.nav[data-on-light="true"] .nav__logo-variant--white { opacity: 0; }
.nav[data-on-light="true"] .nav__logo-variant--black { opacity: 1; }
.nav[data-on-light="true"] .nav__toggle span,
.nav[data-on-light="true"] .nav__toggle span::before,
.nav[data-on-light="true"] .nav__toggle span::after { background: var(--black); }
.nav__logo {
  flex: none; display: block; position: relative;
  width: var(--logo-w); aspect-ratio: 768 / 229;
}
.nav__logo-variant {
  position: absolute; inset: 0; display: block; opacity: 0;
  transition: opacity .35s var(--ease);
}
.nav__logo-variant--white { opacity: 1; }
.nav__logo-variant img { width: 100%; height: 100%; object-fit: contain; display: block; }

.nav__links { display: flex; gap: clamp(1rem, 2.4vw, 2.9rem); align-items: center; }
.nav__link {
  font-size: var(--fs-nav); font-weight: 400; letter-spacing: .06em;
  text-transform: uppercase;
  position: relative; padding: .35em 0; white-space: nowrap;
}
.nav__link::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav__link:hover::after, .nav__link:focus-visible::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__logo:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }

.nav__toggle { display: none; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; }
.nav__toggle span { display: block; width: 22px; height: 2px; background: var(--white); position: relative; transition: background .2s; }
.nav__toggle span::before, .nav__toggle span::after {
  content: ''; position: absolute; left: 0; width: 22px; height: 2px; background: var(--white);
  transition: transform .3s var(--ease);
}
.nav__toggle span::before { top: -7px; } .nav__toggle span::after { top: 7px; }
.nav[data-open="true"] .nav__toggle span { background: transparent; }
.nav[data-open="true"] .nav__toggle span::before { transform: translateY(7px) rotate(45deg); }
.nav[data-open="true"] .nav__toggle span::after  { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav__toggle { display: flex; }
  .nav__links {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: rgba(0,0,0,.97); padding: var(--gutter);
    transform: translateY(-120%); transition: transform .5s var(--ease);
    visibility: hidden;
    height: calc(100dvh - var(--nav-h));
  }
  .nav[data-open="true"] .nav__links { transform: translateY(0); visibility: visible; }
  /* El panel desplegado siempre es negro, así que sus ítems van en blanco
     aunque el menú esté invertido por estar sobre una sección clara. */
  .nav[data-on-light="true"] .nav__links { color: var(--white); }
  .nav__link { font-size: 1.5rem; padding: .6em 0; width: 100%; }
}

/* ========================= Intro =========================
   Ya no es un overlay aparte: es el slide 0 del carrusel. Antes eran dos
   líneas de tiempo en paralelo (su temporizador + el del carrusel, que
   arrancaba apenas su sección entraba en pantalla) y se pisaban: Boost
   empezaba a correr debajo de la intro y cuando ésta se iba, ya iba por la
   mitad. Con un solo slide hay una sola línea de tiempo. */
.work__slide--intro { background: var(--black); display: grid; place-items: center; }

/* Mientras corre la intro: sin rayitas y sin menú */
.work[data-intro-active] .work__bars { opacity: 0; pointer-events: none; }
.nav[data-intro-hidden] { opacity: 0; pointer-events: none; }
html[data-intro-locked],
html[data-intro-locked] body { overflow: hidden; overscroll-behavior: none; }
.work[data-intro-active] .work__slide--intro { touch-action: none; overscroll-behavior: none; }
/* El fondo ahora vive en .nav::before y transiciona ahí; acá sólo el color del
   texto (para la inversión sobre secciones claras) y el fade de la intro. */
.nav { transition: color .35s var(--ease), opacity .6s var(--ease); }
.intro__video,
.intro__poster,
.intro__fallback {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  object-fit: contain;
}
.intro__poster img,
.intro__fallback img { width: 100%; height: 100%; display: block; object-fit: contain; }
.intro__video { z-index: 1; opacity: 0; }
.intro__poster { z-index: 0; }
.intro__fallback { z-index: 0; display: none; }
.work__slide--intro[data-intro-error] .intro__poster { display: none; }
.work__slide--intro[data-intro-error] .intro__fallback { display: block; }
.work__slide--intro[data-intro-playing] .intro__video { opacity: 1; }
.work__slide--intro[data-intro-error] .intro__video { display: none; }

.intro__caption {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 20%;
  margin: 0; padding: 0 1.5rem; text-align: center;
  color: var(--white); font-size: clamp(18px, 2vw, 26px);
  font-weight: 400; line-height: 1.4;
  pointer-events: none;
}
.intro__caption[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .intro__video { display: none; }
  .intro__fallback { z-index: 1; }
}

/* Flecha "bajá" — aparece al terminar la animación */
.scroll-cue {
  position: absolute; left: 50%; bottom: clamp(1.75rem, 4vw, 3.5rem);
  translate: -50% 0; width: 34px; height: 34px;
  opacity: 0; animation: cueIn .7s var(--ease) 2.3s forwards;
}
.scroll-cue svg { width: 100%; height: 100%; animation: bob 2.1s ease-in-out 3s infinite; }
@keyframes cueIn { to { opacity: .85; } }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(9px); } }

/* ========================= Secciones ========================= */
.section { position: relative; }
.section--pad { padding: var(--section-pad) var(--gutter); }

/* Entrada disparada al llegar (no atada al scroll).
   OJO: la transición se declara en el estado BASE. Si se declara sólo en
   .is-in, en el momento del cambio el elemento todavía no tenía transición
   para esa propiedad y el navegador puede aplicar el salto sin animar. */
.reveal {
  opacity: 0; transform: translateY(48px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal--d1 { transition-delay: .16s; }
.reveal--d2 { transition-delay: .32s; }
.reveal--d3 { transition-delay: .48s; }

/* ---- Reglas que se DIBUJAN en vez de aparecer ----
   Va DESPUÉS de .reveal a propósito: misma especificidad, gana el orden de
   aparición. Sobrescribe el translateY del reveal y deja la opacidad en 1 —
   si no, la línea se desvanecería además de crecer y se pierde el trazo.
   La transición se declara acá, en el estado BASE, no en .is-in: declarada
   sólo en la clase que se agrega, el navegador puede aplicar el salto sin
   animar (ya pasó con los reveals). */
.reveal--draw {
  opacity: 1;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .9s var(--ease);
}
.reveal--draw.is-in { transform: scaleX(1); }

/* ---------- WORK ---------- */
.work { position: relative; height: 100dvh; min-height: 34rem; overflow: hidden; }
.work__slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .9s var(--ease), visibility .9s;
  isolation: isolate;
}
.work__slide[data-active] { opacity: 1; visibility: visible; }

.work__media { position: absolute; inset: 0; z-index: 0; }
.work__media img, .work__media video { width: 100%; height: 100%; object-fit: cover; }
/* Poster del slide como <picture> DETRÁS del video (AVIF + JPEG), en lugar del
   atributo `poster` que sólo acepta una URL. El video va encima y lo tapa al
   pintar su primer frame; mientras el clip lazy no cargó, el <video> vacío es
   transparente y deja ver el poster. En AVIF los nueve pasan de ~1.22MB a
   ~0.34MB en la primera visita. */
.work__poster, .work__video { position: absolute; inset: 0; }
.work__poster { z-index: 0; }
.work__video {
  z-index: 1; opacity: 0;
  transition: opacity .14s linear;
}
/* El video sólo tapa el poster cuando ya decodificó su primer frame. JS lo
   rebobina antes de marcarlo listo, así el cambio ocurre frame 0 → frame 0 y
   no poster → clip ya avanzado en una visita con caché fría. */
.work__video[data-frame-ready] { opacity: 1; }

/* El degradé del cliente, a 0.7 en todos (normalizado) */
/* Degradé de cliente: entra fuerte desde la izquierda y se disuelve hacia
   la derecha. Opacity 0.7 para todos (normalizado — ver nota en el brief). */
.work__wash {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: var(--client-gradient-opacity);
  background: linear-gradient(100deg,
    var(--c-grad, #000) 0%,
    color-mix(in srgb, var(--c-grad, #000) 55%, transparent) 32%,
    rgba(0,0,0,0) 68%);
}
/* Oscurecido inferior, para que el texto y las rayitas siempre lean */
.work__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,0) 46%),
    linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 22%);
}

/* Posiciones tomadas del diseño (frame 1920×1080): el logo del cliente va en
   x=79 / y=536 — o sea centrado en vertical y al mismo margen que el logo de
   MARCA — y el botón abajo, en y=896. */
.work__body { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.work__body > * { pointer-events: auto; }
.work__logo {
  position: absolute; left: var(--gutter); top: 50%; translate: 0 -50%;
  width: var(--logo-w); height: auto; object-fit: contain;
}
.work__name {
  position: absolute; left: var(--gutter); top: 50%; translate: 0 -50%;
  max-width: min(40rem, 60vw);
}
.btn-work.work__cta { position: absolute; left: var(--gutter); top: 83%; }
/* La pastilla visual conserva el tamaño aprobado, pero su hit area se extiende
   fuera de la caja: 10 px verticales y 12 px horizontales por lado. En mobile
   pasa de ~31 px a ~51 px de alto sin mover ni agrandar el diseño. */
.work__cta::after { content: ''; position: absolute; inset: -10px -12px; }
.work__cta--preview { pointer-events: none; user-select: none; }
.work__cta--preview::after { display: none; }
.work__name { font-weight: 400; font-size: var(--fs-h2); line-height: .95; letter-spacing: -.005em; }

.btn-work {
  display: inline-flex; align-items: center; gap: .7em;
  align-self: flex-start;
  padding: .62em 1.15em;
  background: var(--c-color, #fff); color: var(--white);
  font-size: var(--fs-btn); font-weight: 600; letter-spacing: .01em;
  border-radius: 3px;
  transition: transform .35s var(--ease), filter .35s var(--ease);
}
.btn-work:hover { transform: translateX(5px); filter: brightness(1.12); }
.btn-work svg { width: 1.05em; height: auto; flex: none; }

/* Rayitas de progreso */
.work__bars {
  position: absolute; left: var(--gutter); right: var(--gutter);
  bottom: clamp(2rem, 4.2vw, 3.2rem);
  z-index: 4; display: flex; gap: clamp(5px, .55vw, 10px);
}
.work__bar {
  flex: 1 1 0; height: 3px; padding: 10px 0; position: relative;
  background: none; cursor: pointer;
}
/* Nombre del cliente sobre la rayita. Las rayitas no tenían etiqueta: eran 11
   rectángulos iguales y no había forma de saber a cuál ibas a saltar hasta que
   saltabas. Aparece en hover Y en focus, así que también sirve con teclado.
   El texto está siempre en el DOM (y en el aria-label), sólo se oculta a la
   vista: para un lector de pantalla la lista siempre estuvo etiquetada. */
.work__bar-name {
  position: absolute; bottom: calc(100% - 4px); left: 0;
  font-size: clamp(.62rem, .78vw, .95rem);
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  color: var(--white); text-shadow: 0 1px 6px rgba(0,0,0,.9);
  opacity: 0; transform: translateY(.35em);
  transition: opacity .28s var(--ease), transform .28s var(--ease);
  pointer-events: none;
}
/* Las últimas se alinean a la derecha: .work tiene overflow:hidden y un nombre
   largo ("Atlas Ocean Voyages") en la última rayita se cortaría contra el borde. */
.work__bar:nth-last-child(-n+3) .work__bar-name { left: auto; right: 0; }
.work__bar:hover .work__bar-name,
.work__bar:focus-visible .work__bar-name { opacity: 1; transform: none; }

.work__bar::before {
  content: ''; position: absolute; left: 0; right: 0; top: 10px; height: 3px;
  background: rgba(255,255,255,.28);
}
.work__bar::after {
  content: ''; position: absolute; left: 0; top: 10px; height: 3px; width: 0;
  background: var(--white);
}
.work__bar[data-state="done"]::after { width: 100%; }
.work__bar[data-state="active"]::after { width: 100%; transition: width var(--dur, 3s) linear; }
.work__bar:hover::before { background: rgba(255,255,255,.5); }

/* WebKit puede rechazar incluso un video muted/playsinline cuando el teléfono
   impide autoplay (por política del dispositivo o ahorro de energía). En ese
   caso JS deja de recorrer posters y ofrece un único gesto explícito. */
.work__play-gate {
  position: absolute; left: 50%; top: 50%; z-index: 5;
  display: grid; place-items: center;
  width: clamp(3rem, 4vw, 3.6rem); aspect-ratio: 1; padding: 0;
  border: 1px solid rgba(255,255,255,.68); border-radius: 50%;
  background: rgba(0,0,0,.58); color: var(--white);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, -42%);
  transition: opacity .25s var(--ease), transform .25s var(--ease), background .25s;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.work__play-gate svg { width: 1.15rem; height: 1.15rem; fill: currentColor; translate: 1px 0; }
.work[data-play-required] .work__play-gate {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, -50%);
}
.work__play-gate:hover { background: rgba(0,0,0,.8); }
.work__play-gate:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }

@media (max-width: 700px) {
  .work__body { right: var(--gutter); max-width: none; bottom: clamp(4.5rem, 16vw, 7rem); }
  .work__name { font-size: clamp(1.75rem, 8.5vw, 2.75rem); }
}

/* Encuadres verticales por cliente. Se activa recién en 3:4 o más angosto:
   cerca de 1:1 el recorte centrado ya funciona y no conviene tocarlo. Poster y
   video comparten siempre el mismo foco para que el cruce entre ambos no salte. */
@media (max-width: 700px) and (max-aspect-ratio: 3 / 4) {
  .work__media img,
  .work__media video { object-position: var(--mobile-focus-x, 50%) center; }

  /* Se conserva más del lado izquierdo del plano. Boost ya no necesita un
     compromiso de object-position: en vertical usa su edición 9:16 propia. */
  .work__slide[data-client="charles-schwab"] { --mobile-focus-x: 26%; }

  /* El contenido del plano se desplaza hacia la izquierda. */
  .work__slide[data-client="dishlatino"]     { --mobile-focus-x: 64%; }
  .work__slide[data-client="atlas"]          { --mobile-focus-x: 58%; }

  /* Big Papi es el protagonista del plano y está en el extremo derecho. En
     mobile se prioriza ese lado sin compromiso con los otros dos talentos. */
  .work__slide[data-client="draftkings"]     { --mobile-focus-x: 100%; }

  /* H&R conserva sólo la acción izquierda. En 0% aparecía el extremo vacío
     del master; 35% centra al personaje izquierdo y deja fuera a la derecha. */
  .work__slide[data-client="hr-block"]       { --mobile-focus-x: 35%; }
}

/* ---------- SERVICES (antes Our Take; conserva el ancla #culture) ---------- */
.culture { position: relative; min-height: 92vh; min-height: 92svh; display: grid; align-items: center; overflow: hidden; }
.culture__bg { position: absolute; inset: 0; }
.culture__bg picture { display: block; height: 100%; }
.culture__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.culture__bg::after {
  content: ''; position: absolute; inset: 0;
  /* La foto sigue cubriendo toda la sección. El velo inferior permite leer
     descripciones pequeñas sin tarjetas opacas ni otra franja de fondo. */
  background: linear-gradient(180deg, rgba(0,0,0,.08) 25%, rgba(0,0,0,.64) 100%),
    linear-gradient(90deg, rgba(0,0,0,.6), rgba(0,0,0,.38));
}
.culture__inner {
  position: relative; width: 100%; min-width: 0;
  padding: clamp(4.5rem, 6vw, 7rem) var(--gutter);
}
.culture__intro {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 6rem); align-items: end;
}
.culture__label {
  font-size: clamp(.8125rem, 1vw, 1rem); font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em;
  margin-bottom: clamp(1.25rem, 2vw, 2rem);
}
.culture__title {
  font-weight: 400; font-size: var(--fs-h1); line-height: .9; letter-spacing: -.005em;
}
.culture__body { font-size: clamp(1.125rem, 1.6vw, 1.875rem); font-weight: 400; line-height: 1.45; max-width: 38rem; color: #fff; }
/* Línea blanca bajo el texto — está en el diseño y me la había salteado */
/* La regla arranca en el borde izquierdo del texto y corre hasta el final de
   la imagen — no es un subrayado del párrafo. */
.culture__rule {
  height: var(--rule-w); background: var(--white);
  margin-top: clamp(1.75rem, 3vw, 3rem);
  margin-right: calc(var(--gutter) * -1);
}

.services__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 3rem) clamp(1.5rem, 3vw, 3.5rem);
  margin: clamp(1.75rem, 3vw, 3rem) 0 0; padding: 0; list-style: none;
}
.services__item {
  display: grid; grid-template-columns: clamp(1.75rem, 2.2vw, 2.5rem) minmax(0, 1fr);
  align-content: start; align-items: start; gap: clamp(.75rem, 1.2vw, 1.25rem);
}
.services__icon {
  display: block; width: 100%; height: auto; aspect-ratio: 1;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.services__item h3 {
  font-size: clamp(.875rem, 1.04vw, 1.25rem); font-weight: 600;
  line-height: 1.3; margin-bottom: .5em;
}
.services__item p {
  font-size: clamp(.875rem, .94vw, 1.125rem); line-height: 1.5;
  color: rgba(255,255,255,.9); max-width: 29ch;
}
@media (max-width: 1050px) {
  .culture__intro { grid-template-columns: 1fr; gap: 1.5rem; }
  .culture__body { max-width: 42rem; }
  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .culture__inner { padding-block: 4rem; }
  .culture__title { font-size: clamp(2rem, 7.8vw, 2.75rem); }
  .culture__bg img { object-position: 60% center; }
  .services__grid { gap: 1.75rem 1.25rem; }
  .services__item { grid-template-columns: 1fr; gap: .75rem; }
  .services__icon { width: 1.75rem; }
}

/* ---------- CLIENTS ---------- */
.clients__title { font-weight: 400; font-size: var(--fs-display); line-height: .9; letter-spacing: -.005em; }
.clients__body {
  font-size: var(--fs-body); line-height: 1.45; color: rgba(255,255,255,.86);
  max-width: 62rem; margin-top: clamp(1rem, 2vw, 2rem);
}
.clients__grid {
  margin-top: clamp(3rem, 7vw, 7rem);
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(2rem, 4.4vw, 4.6rem) clamp(1.5rem, 3.4vw, 3.6rem);
  align-items: center;
}
@media (max-width: 900px) { .clients__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .clients__grid { grid-template-columns: repeat(2, 1fr); } }

/* Sección con la regla vertical blanca del diseño, a 240px del borde.
   El diseño le da 3px, pero va con --rule-w para que empareje con la de our
   culture y la de the team (decisión de Sebastian). */
.section--ruled { position: relative; padding-left: var(--content-x); padding-right: var(--gutter); }
.section--ruled::before {
  content: ''; position: absolute; left: var(--rule-x);
  /* Arranca a la ALTURA DEL TEXTO, no arriba de él. Antes usaba la mitad del
     padding de la sección y quedaba flotando por encima del título.
     El título es el primer hijo, así que su caja empieza en --section-pad; a
     eso se le suma el descuelgue hasta la línea de mayúsculas.
     De dónde sale .1136em: medido del render del Figma, el top de la regla cae
     5.5px POR DEBAJO del techo de tinta del título — o sea sobre la cap line,
     no sobre los ascendentes (la 1ra línea es "a roster of": la "f" y la "t"
     suben más que las mayúsculas). Para Montserrat con line-height .9 la base
     queda a .8136em del techo de caja y la cap height es .7em → .1136em.
     Va contra --fs-display porque un `em` acá heredaría el cuerpo de la
     sección, no el del título. */
  top: calc(var(--section-pad) + var(--fs-display) * .1136);
  /* Llega hasta el borde inferior de la sección, igual que las horizontales
     llegan al derecho. Medido en el diseño: la regla termina en y=1619.6 sobre
     un frame de 1621. Antes cortaba ~88px antes. */
  bottom: 0;
  width: var(--rule-w); background: var(--white);
  /* Se dibuja de arriba hacia abajo. Es un ::before, así que no se lo puede
     observar: el IntersectionObserver marca la SECCIÓN con .is-in
     (data-draw en el HTML) y el pseudo cuelga de eso. */
  transform: scaleY(0); transform-origin: top center;
  transition: transform 1.1s var(--ease);
}
.section--ruled.is-in::before { transform: scaleY(1); }
@media (max-width: 700px) {
  /* En mobile la regla también forma parte de la secuencia Clients. Se acerca
     al borde para conservar aire respecto del título y la grilla de dos
     columnas. El recorrido es deliberadamente más pausado que en desktop:
     así acompaña la entrada de los logos en vez de resolverse de golpe. */
  .section--ruled::before {
    left: var(--gutter);
    transition-duration: 1.65s;
  }
}
/* Muro de logos: 5 columnas como el diseño, cada celda del mismo alto para que
   todos queden ópticamente alineados. Los PNG ya vienen blancos sobre
   transparente, recortados del propio archivo de Figma. */
.clients__logo {
  height: clamp(3.2rem, 5vw, 5rem);
  display: grid; place-items: center;
  opacity: .95; transition: opacity .35s var(--ease);
}
/* Medida absoluta, no porcentual: dentro de un grid el % de alto no resuelve.
   La mayoría de las marcas son horizontales y quedan equilibradas con este
   límite común. */
.clients__logo img { max-height: clamp(2rem, 3.1vw, 3rem); max-width: 100%; width: auto; object-fit: contain; }
/* Atlas y Deezer son casi cuadrados. Igualarles el alto a un wordmark ancho
   les da menos de la mitad del área visible. build.py detecta automáticamente
   esa proporción (ancho/alto <= 1.25) y les permite crecer fuera de la caja
   nominal; el gap de la grilla conserva el aire entre filas. */
.clients__logo--compact img { max-height: clamp(4.5rem, 7.5vw, 6rem); }
/* Los lockups apilados (hasta 1.70) y medios (hasta 2.20) reciben correcciones
   menores. Así el ancho óptico mínimo ronda 90px en desktop sin inflar NASCAR,
   PepsiCo y los demás wordmarks naturalmente anchos. */
.clients__logo--stacked img { max-height: clamp(2.5rem, 4.7vw, 4rem); }
.clients__logo--medium img { max-height: clamp(2.25rem, 3.9vw, 3.5rem); }
@media (max-width: 560px) {
  .clients__logo--compact img { max-height: clamp(3.2rem, 15vw, 4rem); }
}
.clients__logo--large img { max-height: clamp(2.75rem, 4.1vw, 4rem); }
.clients__logo:hover { opacity: 1; }
/* Sólo los que tienen destino se comportan como clickeables */
a.clients__logo { cursor: pointer; transition: opacity .35s var(--ease), transform .35s var(--ease); }
a.clients__logo:hover { transform: scale(1.06); }
a.clients__logo:focus-visible { outline: 2px solid var(--white); outline-offset: 6px; }

/* ---------- TEAM — Frame 38 ----------
   Retratos cuadrados sin separación, textos sobre la foto y mapa debajo.
   Montserrat conserva la decisión tipográfica vigente del website. */
.team {
  --team-gutter: clamp(1.25rem, 12vw, 14.375rem);
  background: var(--white); color: var(--black); padding: 0;
}
.team__head { padding: clamp(4rem, 4vw, 4.75rem) var(--team-gutter) 0; }
.team__title { font-weight: 400; font-size: var(--fs-display); line-height: .9; letter-spacing: -.005em; }
.team__rule { height: var(--rule-w); background: var(--black); margin-top: 1.5rem; margin-right: calc(var(--team-gutter) * -1); }
.team__map-panel { padding: clamp(3rem, 3.55vw, 4.25rem) var(--team-gutter) clamp(3rem, 3.25vw, 4rem); }
.team__roster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 0; margin: 0; list-style: none; }
.team__node { min-width: 0; }
.team__profile { display: block; position: relative; aspect-ratio: 1; overflow: hidden; color: #fff; text-decoration: none; }
.team__profile > picture { display: block; width: 100%; height: 100%; }
.team__portrait { display: block; width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }
.team__caption { position: absolute; inset: auto 0 0; padding: 1.5rem clamp(.75rem, 1.3vw, 1.55rem) clamp(.8rem, 1.4vw, 1.7rem); background: linear-gradient(transparent, rgba(0,0,0,.24)); }
.team__name { font-weight: 400; font-size: clamp(.8125rem, .9vw, 1.0625rem); line-height: 1.2; margin: 0; }
.team__role { font-weight: 400; font-size: clamp(.6875rem, .68vw, .8125rem); line-height: 1.25; margin: 0; }
a.team__profile:focus-visible { outline: 3px solid var(--black); outline-offset: 3px; z-index: 1; }
a.team__profile:hover .team__name { text-decoration: underline; text-underline-offset: .15em; }
.team__geo { display: grid; grid-template-columns: minmax(0, 459fr) minmax(0, 362fr); align-items: center; gap: 1rem; width: min(100%, 52.25rem); margin: clamp(3rem, 3.55vw, 4.25rem) auto 0; }
.team__cities { display: flex; flex-direction: column; align-items: flex-end; font-weight: 600; font-size: clamp(3rem, 5.94vw, 7.125rem); line-height: .86; letter-spacing: -.01em; color: #E3E3E3; text-align: right; user-select: none; }
.team__map-box { width: 100%; aspect-ratio: 861 / 1152; }
.team__map { width: 100%; height: auto; display: block; opacity: .7; }
@media (max-width: 1100px) {
  .team { --team-gutter: clamp(1.25rem, 6.25vw, 5rem); }
  .team__roster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team__name { font-size: clamp(.875rem, 1.8vw, 1.125rem); }
  .team__role { font-size: clamp(.6875rem, 1.35vw, .9375rem); }
}
@media (max-width: 500px) {
  .team__caption { padding: 1.5rem .65rem .75rem; }
  .team__cities { font-size: clamp(2rem, 9vw, 2.8rem); }
  .team__geo { gap: .5rem; }
}

/* ---------- CONTACT ---------- */
/* En el diseño esta sección va sobre NEGRO, con los labels a la izquierda del
   campo, los campos en gris relleno y "Send:" como texto con flecha. */
.contact { background: var(--black); color: var(--white); }
.contact__head {
  display: flex; justify-content: space-between; align-items: end;
  gap: 2rem;
}
.contact__title { font-weight: 400; font-size: var(--fs-display); line-height: .9; letter-spacing: -.005em; }
/* Ya medía 1px: pasa al token para no quedar suelta si el grosor cambia.
   Sangra al borde derecho como el resto (medido en el diseño: x1=1918.6/1920). */
.contact__rule {
  height: var(--rule-w); background: var(--white); margin-top: .3em;
  margin-right: calc(var(--gutter) * -1);
}
.contact__grid {
  margin-top: clamp(2.5rem, 5vw, 5rem);
  display: grid; grid-template-columns: minmax(17rem, .82fr) minmax(0, 1.18fr);
  gap: clamp(3rem, 8vw, 9rem); align-items: stretch;
}
@media (max-width: 820px) { .contact__grid { grid-template-columns: 1fr; } }

.contact__info { display: flex; flex-direction: column; }
.contact__kicker, .contact__label {
  display: block; font-size: clamp(.65rem, .72vw, .82rem); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5);
}
.contact__statement {
  max-width: 15ch; margin-top: .7em;
  font-size: clamp(2rem, 3.5vw, 4.25rem); font-weight: 400;
  line-height: .98; letter-spacing: -.035em;
}
.contact__detail {
  display: grid; grid-template-columns: 2.1rem 1fr; gap: 1rem;
  padding: clamp(1.25rem, 2vw, 2rem) 0;
  border-top: 1px solid rgba(255,255,255,.22);
}
.contact__detail:first-of-type { margin-top: clamp(2.5rem, 5vw, 5rem); }
.contact__number { font-size: .7rem; color: rgba(255,255,255,.4); padding-top: .15rem; }
.contact__address {
  margin-top: .7rem; font-size: clamp(.88rem, 1.05vw, 1.16rem); line-height: 1.5;
}
.contact__text-link {
  display: inline-flex; align-items: center; gap: .65rem; margin-top: 1rem;
  font-size: clamp(.75rem, .84vw, .92rem); color: rgba(255,255,255,.72);
  transition: color .25s var(--ease), gap .25s var(--ease);
}
.contact__text-link svg { width: 2rem; }
.contact__text-link:hover { color: var(--white); gap: .95rem; }
.contact__business {
  display: grid; grid-template-columns: clamp(4rem, 6vw, 6rem) minmax(0, 1fr);
  align-items: center; gap: clamp(1rem, 1.6vw, 1.75rem);
  padding: clamp(1.25rem, 2vw, 2rem) 0;
  border-top: 1px solid rgba(255,255,255,.22);
}
.contact__business img {
  width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%;
}
.contact__business-info { min-width: 0; }
.contact__business h3 {
  font-size: clamp(1.05rem, 1.35vw, 1.5rem); font-weight: 400;
  margin-top: .5rem; line-height: 1.2;
}
.contact__business a {
  display: inline-block; max-width: 100%; min-height: 44px; padding-block: .65rem;
  font-size: clamp(.8125rem, .94vw, 1rem); line-height: 1.5;
  overflow-wrap: anywhere; color: rgba(255,255,255,.8);
  text-decoration: underline; text-underline-offset: .25em;
  transition: color .25s var(--ease);
}
.contact__business a:hover { color: var(--white); }
.contact__business a:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }
.contact__socials {
  display: flex; flex-wrap: wrap; gap: 1.4rem; padding: 1.35rem 0;
  border-top: 1px solid rgba(255,255,255,.22);
}
.contact__socials a { font-size: clamp(.76rem, .9vw, 1rem); color: rgba(255,255,255,.72); }
.contact__socials a:hover { color: var(--white); }
.contact__socials span { font-size: .8em; margin-left: .2em; }
.contact__network {
  margin-top: auto; padding-top: clamp(1.5rem, 3vw, 3rem);
  border-top: 1px solid rgba(255,255,255,.22);
}
.contact__network-logo {
  display: block; width: clamp(12rem, 22vw, 19rem); max-width: 100%;
  height: auto; margin-top: 1rem;
}

.contact__form {
  align-self: start; padding: clamp(1.5rem, 3.2vw, 3.5rem);
  background: #101010; border: 1px solid rgba(255,255,255,.18);
}
.contact__form-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding-bottom: clamp(1.5rem, 3vw, 2.75rem);
  border-bottom: 1px solid rgba(255,255,255,.28);
}
.contact__form-head h3 { font-size: clamp(1.5rem, 2.45vw, 3rem); font-weight: 400; letter-spacing: -.025em; }
.contact__form-head span { font-size: .72rem; color: rgba(255,255,255,.5); white-space: nowrap; }
.contact__form b { color: #ff3b30; font-weight: 400; }
.contact__fields {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(1.2rem, 2.2vw, 2rem);
  padding-top: clamp(1.5rem, 3vw, 2.75rem);
}
.field {
  display: flex; flex-direction: column; gap: .65rem; margin: 0;
}
.field--wide { grid-column: 1 / -1; }
.field label {
  font-size: clamp(.65rem, .72vw, .82rem); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.64);
}
.field input, .field textarea {
  font: inherit; font-size: clamp(.9rem, 1vw, 1.08rem);
  padding: .35rem 0 .85rem; border: 0; border-bottom: 1px solid rgba(255,255,255,.28);
  border-radius: 0; background: transparent; color: var(--white); width: 100%;
  transition: border-color .25s var(--ease);
}
.field textarea { min-height: clamp(6rem, 10vw, 9rem); resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,.28); }
.field input:focus, .field textarea:focus { outline: 0; border-color: var(--white); }

.send-row { display: flex; justify-content: flex-end; align-items: center; margin-top: clamp(1.5rem, 3vw, 2.75rem); }
.btn-send {
  display: inline-flex; align-items: center; gap: .55em;
  background: var(--white); color: var(--black); padding: .9em 1.15em;
  font-size: clamp(.78rem, .9vw, 1rem); font-weight: 600;
  transition: gap .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.btn-send svg { width: 2.2em; height: auto; }
.btn-send:hover { gap: 1em; background: #d9d9d9; }
.btn-send[disabled] { opacity: .45; cursor: not-allowed; }

.form-note {
  margin-top: 1.1rem; font-size: clamp(.62rem, .7vw, .76rem);
  color: rgba(255,255,255,.38); text-align: right;
}

@media (max-width: 820px) {
  .contact__head { align-items: start; flex-direction: column; gap: 1rem; }
  .contact__grid { gap: 3.5rem; }
  .contact__statement { max-width: 18ch; }
  .contact__network { margin-top: 0; }
}
@media (max-width: 520px) {
  .contact__fields { grid-template-columns: 1fr; }
  .field--wide { grid-column: auto; }
  .contact__form { padding: 1.25rem; }
  .contact__form-head { align-items: start; flex-direction: column; }
}

/* ---------- Footer ---------- */
.footer { background: var(--black); color: var(--grey); padding: clamp(2rem,4vw,3rem) var(--gutter); font-size: var(--fs-small); }

/* ========================= Página de campaña =========================
   Del master: la banda del título va en BLANCO con texto negro y una regla
   naranja que llega al borde derecho; los spots van a sangre, sin márgenes,
   con el logo del cliente abajo a la izquierda. */
.camp {
  background: var(--white); color: var(--black);
  padding: calc(var(--nav-h) + clamp(2rem,4vw,4rem)) 0 clamp(2rem,4vw,3.5rem);
}
.camp--first { padding-top: calc(var(--nav-h) + clamp(1rem,2vw,2rem)); }
.camp__head { padding: 0 0 0 clamp(1.25rem, 5.4vw, 6.5rem); }
.camp__title { font-weight: 400; font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -.01em; }
.camp__rule { height: 2px; background: var(--c-color, #FF4500); margin: .45em 0 .9em; }
.camp__kicker, .case-head__kicker, .case-copy__eyebrow,
.campaign-story__title {
  font-size: clamp(.7rem, .78vw, .88rem); line-height: 1.2; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}
.camp__kicker, .case-head__kicker { color: var(--c-color); margin-bottom: .65rem; }
.camp__body {
  font-size: clamp(1rem, 1.35vw, 1.6rem); line-height: 1.35;
  max-width: 62rem; color: #1a1a1a;
}

.campaign-story {
  background: var(--white); color: #252525;
  padding: clamp(3rem, 5.5vw, 6.5rem) var(--gutter);
  border-top: 3px solid var(--c-color);
}
.campaign-story__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: clamp(2rem, 4vw, 4.5rem); max-width: 112rem; margin: 0 auto;
}
.campaign-story__item { min-width: 0; }
.campaign-story__title, .case-copy__eyebrow {
  color: var(--c-color); margin-bottom: clamp(.85rem, 1.3vw, 1.35rem);
}
.campaign-story__copy, .case-copy__eyebrow + p {
  font-size: clamp(.92rem, 1.08vw, 1.25rem); line-height: 1.52;
}
.campaign-story__copy p + p { margin-top: .85em; }
.campaign-story__grid--with-metrics > .campaign-story__item:not(.campaign-story__item--metrics) {
  grid-column: 1 / -1; max-width: 62rem;
}
.campaign-story__item--metrics { grid-column: 1 / -1; }
.campaign-results__intro { max-width: 62rem; margin-bottom: clamp(2rem, 3vw, 3.5rem); }
.campaign-results__grid {
  display: grid;
  grid-template-columns: repeat(var(--results-columns, 4), minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 3.25rem);
  max-width: var(--results-width, 98rem);
  margin: 0; padding: 0; list-style: none;
}
.campaign-results__grid--count-1 { --results-columns: 1; --results-width: 26rem; }
.campaign-results__grid--count-2 { --results-columns: 2; --results-width: 46rem; }
.campaign-results__grid--count-3 { --results-columns: 3; --results-width: 76rem; }
.campaign-results__grid--count-4 { --results-columns: 4; --results-width: 98rem; }
.campaign-results__grid--count-5 { --results-columns: 5; --results-width: 108rem; }
.campaign-results__metric { min-width: 0; }
.campaign-results__metric strong {
  display: block; color: var(--c-color); font-size: clamp(3rem, 4.8vw, 5.75rem);
  line-height: .92; font-weight: 300; letter-spacing: -.055em; white-space: nowrap;
}
.campaign-results__grid--count-4 strong,
.campaign-results__grid--count-5 strong { font-size: clamp(2.75rem, 4vw, 4.85rem); }
.campaign-results__metric--long strong {
  font-size: clamp(2.75rem, 4.1vw, 4.9rem); line-height: .96; white-space: normal;
}
.campaign-results__metric span {
  display: block; max-width: 18rem; margin-top: .8rem; color: #353535;
  font-size: clamp(.86rem, 1.1vw, 1.2rem); line-height: 1.2;
}

/* Separador editorial: introduce un segundo tema sin simular otra página. */
.campaign-divider {
  padding: clamp(4rem, 8vw, 9rem) var(--gutter) clamp(1.5rem, 3vw, 3rem);
  background: #fff; color: #2e2e2e;
  border-top: 3px solid var(--c-color);
}
.campaign-divider__inner { width: min(90rem, 100%); margin: 0 auto; }
.campaign-divider h2 {
  max-width: 19ch; font-size: clamp(2.5rem, 5.4vw, 6.5rem); line-height: .98;
  font-weight: 400; letter-spacing: -.04em;
}
.campaign-divider__copy {
  max-width: 60rem; margin-top: 1.4rem; font-size: clamp(1rem, 1.35vw, 1.5rem);
  line-height: 1.4;
}

/* Carrusel estándar de páginas de clientes. El marco hereda el lenguaje de
   Influencer Army y reduce escala para mostrar 3 piezas; acepta 16:9, 9:16 y 1:1. */
.client-carousel-section {
  overflow: hidden; padding: clamp(3.25rem, 6vw, 7rem) 0 clamp(5rem, 8vw, 9rem);
  background: #fff; color: #2e2e2e;
}
.campaign-divider + .client-carousel-section,
.campaign-story + .client-carousel-section {
  padding-top: 0;
}
.campaign-story:has(+ .client-carousel-section) {
  padding-bottom: clamp(1rem, 2vw, 2rem);
}
.client-carousel__head { padding: 0 var(--gutter); text-align: center; }
.client-carousel__head h2 {
  font-size: clamp(2.4rem, 5vw, 5.8rem); line-height: .98; font-weight: 400;
  letter-spacing: -.04em;
}
.client-carousel {
  position: relative; width: min(94rem, 100%); margin: clamp(1.5rem, 3vw, 3rem) auto 0;
  outline: none;
}
.client-carousel-section > .client-carousel:first-child { margin-top: 0; }
.client-carousel:focus-visible { outline: 3px solid var(--c-color); outline-offset: .5rem; }
.client-carousel__stage { position: relative; height: clamp(18rem, 32vw, 30rem); }
.client-frame {
  position: absolute; left: 50%; top: 50%; z-index: 1; width: clamp(24rem, 42vw, 42rem);
  aspect-ratio: 16 / 9; transform: translate(-50%, -50%) scale(.72);
  opacity: .66; filter: saturate(.84); transition:
    left .58s cubic-bezier(.22,.75,.2,1), transform .58s cubic-bezier(.22,.75,.2,1),
    opacity .42s ease, filter .42s ease; will-change: left, transform;
}
.client-frame[data-client-position="center"] {
  left: 50%; z-index: 3; transform: translate(-50%, -50%) scale(1);
  opacity: 1; filter: none;
}
.client-frame[data-client-position="left"] { left: 17%; z-index: 2; }
.client-frame[data-client-position="right"] { left: 83%; z-index: 2; }
.client-frame[data-client-position="hidden"] {
  left: 50%; transform: translate(-50%, -50%) scale(.55); opacity: 0; pointer-events: none;
}
.client-frame__shell {
  position: absolute; inset: 0; overflow: hidden; padding: .5rem;
  border: .3rem solid #cbcbcb; border-radius: clamp(1.4rem, 2.3vw, 2.35rem);
  background: #fff; box-shadow: 0 1.5rem 3rem rgba(0,0,0,.12);
}
.client-frame__shell > picture,
.client-frame__image,
.client-frame__player { width: 100%; height: 100%; display: block; }
.client-frame__image {
  border-radius: clamp(1rem, 1.8vw, 1.75rem); object-fit: cover; background: #f0f0f0;
}
.client-frame__player {
  aspect-ratio: auto; border-radius: clamp(1rem, 1.8vw, 1.75rem); background: #101010;
}
.client-frame__player .stream-player__poster img,
.client-frame__player .stream-player__video { object-fit: cover; }
.client-frame:not([data-client-position="center"]) .stream-player__play,
.client-frame:not([data-client-position="center"]) .stream-player__controls,
.client-frame:not([data-client-position="center"]) .stream-player__retry { display: none; }
.client-frame__select {
  position: absolute; inset: 0; z-index: 8; width: 100%; height: 100%; border: 0;
  border-radius: 2.35rem; background: transparent; cursor: pointer;
}
.client-frame[data-client-position="center"] .client-frame__select { display: none; }
.client-frame__select:focus-visible { outline: 3px solid var(--c-color); outline-offset: .3rem; }
.client-frame .stream-player__controls {
  left: 50%; bottom: .5rem; width: calc(100% - 1rem); min-height: 2.5rem;
  gap: .25rem; padding: .28rem .4rem;
}
.client-frame .stream-control { width: 1.9rem; height: 1.9rem; flex-basis: 1.9rem; }
.client-frame .stream-icon { width: 1rem; height: 1rem; }
.client-carousel__arrow {
  position: absolute; top: 45%; z-index: 6; width: 3.25rem; height: 3.25rem;
  display: grid; place-items: center; translate: 0 -50%; border-radius: 50%;
  color: #2e2e2e; background: rgba(255,255,255,.9);
  box-shadow: 0 .4rem 1.5rem rgba(0,0,0,.12);
}
.client-carousel__arrow--prev { left: clamp(.75rem, 2vw, 2rem); }
.client-carousel__arrow--next { right: clamp(.75rem, 2vw, 2rem); }
.client-carousel__arrow svg { width: 1.6rem; fill: none; stroke: currentColor; stroke-width: 2; }
.client-carousel__arrow:hover { color: var(--c-color); }
.client-carousel__arrow:focus-visible { outline: 3px solid var(--c-color); outline-offset: 3px; }
.client-carousel__dots {
  display: flex; justify-content: center; gap: .6rem; margin-top: .9rem;
}
.client-carousel__dots button {
  width: .65rem; height: .65rem; padding: 0; border-radius: 50%; background: #d3d3d3;
  transition: width .25s ease, background-color .25s ease;
}
.client-carousel__dots button[aria-current="true"] {
  width: 2.25rem; border-radius: 999px; background: var(--c-color);
}
.client-carousel-section--vertical .client-carousel__stage { height: clamp(37rem, 51vw, 52rem); }
.client-carousel-section--vertical .client-frame {
  top: 0; width: clamp(18rem, 24vw, 24rem); aspect-ratio: 9 / 16;
}
.client-carousel-section--vertical .client-frame[data-client-position="center"] {
  transform: translateX(-50%) scale(1);
}
.client-carousel-section--vertical .client-frame[data-client-position="left"] {
  left: 30%; transform: translateX(-50%) scale(.76);
}
.client-carousel-section--vertical .client-frame[data-client-position="right"] {
  left: 70%; transform: translateX(-50%) scale(.76);
}
.client-carousel-section--vertical .client-frame[data-client-position="hidden"] {
  transform: translateX(-50%) scale(.55);
}
.client-carousel-section--vertical .client-frame__image { object-fit: contain; background: #fff; }
.client-carousel-section--square .client-carousel__stage { height: clamp(24rem, 42vw, 42rem); }
.client-carousel-section--square .client-frame { width: clamp(21rem, 35vw, 35rem); aspect-ratio: 1; }
.client-carousel-section--square .client-frame[data-client-position="left"] { left: 23%; }
.client-carousel-section--square .client-frame[data-client-position="right"] { left: 77%; }

/* Galería editorial: piezas completas, apiladas y sin interacción falsa. */
.client-gallery {
  padding: clamp(1.5rem, 3vw, 3.5rem) var(--gutter) clamp(5rem, 8vw, 9rem);
  background: #fff; color: #2e2e2e;
}
.client-gallery__grid {
  display: grid; gap: clamp(1.25rem, 2.5vw, 2.75rem); width: min(92rem, 100%); margin: 0 auto;
}
.client-gallery__item {
  display: grid; place-items: center; min-height: clamp(18rem, 48vw, 46rem);
  padding: clamp(1rem, 3vw, 3.5rem); background: #f1f1f1;
}
.client-gallery__item picture { display: contents; }
.client-gallery__image {
  display: block; width: 100%; height: auto; max-height: min(76vh, 48rem); object-fit: contain;
}
.influencer-results__copy { width: min(62rem, 100%); margin: 0 auto clamp(3rem, 5vw, 5rem); }
.influencer-results__label {
  width: min(62rem, 100%); margin: 0 auto clamp(2rem, 3vw, 3rem);
  color: var(--c-color); font-size: clamp(.7rem, .78vw, .88rem); line-height: 1.2;
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.influencer-results__copy h2 {
  color: var(--c-color); margin-bottom: .8rem; font-size: clamp(.7rem, .78vw, .88rem);
  line-height: 1.2; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.influencer-results__copy p { font-size: clamp(1rem, 1.35vw, 1.55rem); line-height: 1.4; }

/* ---------- Case studies editoriales ----------
   El manifiesto compone estas páginas con cuatro piezas reutilizables: cabecera,
   hero, split imagen/texto y composición gráfica. Boost conserva la pila de
   spots de arriba; ambos modelos salen del mismo generador. */
.case-head {
  background: var(--white); color: #2e2e2e;
  padding: calc(var(--nav-h) + clamp(2.75rem, 5vw, 6rem)) 0 clamp(1.75rem, 3.2vw, 3.75rem);
}
.case-head__inner { padding-left: clamp(1.25rem, 8.75vw, 10.5rem); }
.case-head .back-link { margin-bottom: clamp(1.5rem, 2.5vw, 2.75rem); }
.case-head__title {
  font-size: var(--fs-h2); line-height: 1.05; font-weight: 400;
  letter-spacing: -.018em;
}
.case-head__rule {
  height: 3px; margin: .35em 0 1.15em;
  background: var(--c-color); width: 100%;
}
.case-head__intro {
  color: #353535; font-size: clamp(1.05rem, 1.875vw, 2.25rem);
  line-height: 1.12; max-width: 84rem; padding-right: var(--gutter);
}

/* Influencer Army — el frame de Figma se vuelve una experiencia editorial:
   key art con entrada breve y teléfonos navegables, no una captura estática. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.influencer-head { padding-bottom: clamp(1.25rem, 2vw, 2.5rem); }
.influencer-hero {
  min-height: clamp(28rem, 52vw, 56rem); display: grid; place-items: center;
  overflow: hidden; padding: clamp(1rem, 2vw, 2rem) var(--gutter) 0;
  background: #fff;
}
.influencer-hero__picture {
  width: min(55rem, 46vw); align-self: end; transform-origin: 50% 100%;
}
.influencer-hero__picture img { width: 100%; height: auto; display: block; }
.js .influencer-hero__picture.reveal { transform: translateY(2.25rem) scale(.97); }
.js .influencer-hero__picture.reveal.is-visible { transform: translateY(0) scale(1); }
.influencer-results { padding: clamp(2.5rem, 5vw, 5.5rem) var(--gutter); background: #fff; }
.influencer-results__grid {
  width: min(74rem, 100%); margin: 0 auto; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 6vw, 7rem);
}
.influencer-metric { min-width: 0; }
.influencer-metric strong {
  display: block; color: #2e2e2e; font-size: clamp(4.25rem, 8.15vw, 9.75rem);
  line-height: .9; font-weight: 300; letter-spacing: -.07em; white-space: nowrap;
}
.influencer-metric span {
  display: block; max-width: 17rem; margin: 1rem auto 0; color: #353535;
  font-size: clamp(.85rem, 1.35vw, 1.55rem); line-height: 1.08; text-align: left;
}
.influencer-videos {
  overflow: hidden; padding: clamp(3.5rem, 6vw, 7rem) 0 clamp(5rem, 8vw, 9rem);
  background: #fff;
}
.influencer-videos__head { padding: 0 var(--gutter); color: #2e2e2e; text-align: center; }
.influencer-videos__head h2 {
  font-size: clamp(2.6rem, 6vw, 7rem); line-height: .95; font-weight: 700;
  letter-spacing: -.045em;
}
.army-carousel {
  position: relative; width: min(78rem, 100%); margin: clamp(2.25rem, 4vw, 4rem) auto 0;
  outline: none;
}
.army-carousel:focus-visible { outline: 3px solid var(--c-color); outline-offset: .5rem; }
.army-carousel__stage { position: relative; height: clamp(40rem, 52vw, 52rem); }
.army-phone {
  position: absolute; left: 50%; top: 0; z-index: 1;
  width: clamp(18rem, 24vw, 24rem); aspect-ratio: 9 / 16;
  transform: translateX(-50%) scale(.76); transform-origin: 50% 52%;
  opacity: .72; filter: saturate(.86); transition:
    left .58s cubic-bezier(.22,.75,.2,1), transform .58s cubic-bezier(.22,.75,.2,1),
    opacity .42s ease, filter .42s ease; will-change: left, transform;
}
.army-phone[data-army-position="center"] {
  left: 50%; z-index: 3; transform: translateX(-50%) scale(1);
  opacity: 1; filter: none;
}
.army-phone[data-army-position="left"] { left: 27%; z-index: 2; }
.army-phone[data-army-position="right"] { left: 73%; z-index: 2; }
.army-phone[data-army-position="hidden"] {
  left: 50%; transform: translateX(-50%) scale(.6); opacity: 0; pointer-events: none;
}
.army-phone__shell {
  position: absolute; inset: 0; overflow: hidden; padding: .65rem;
  border: .35rem solid #cbcbcb; border-radius: clamp(2.3rem, 3.5vw, 3.55rem);
  background: #fff; box-shadow: 0 1.5rem 3rem rgba(0,0,0,.12);
}
.army-phone__player {
  width: 100%; height: 100%; aspect-ratio: 9 / 16;
  border-radius: clamp(1.8rem, 3vw, 2.8rem); background: #101010;
}
.army-phone__player .stream-player__poster img,
.army-phone__player .stream-player__video { object-fit: cover; }
.army-phone:not([data-army-position="center"]) .stream-player__play,
.army-phone:not([data-army-position="center"]) .stream-player__controls,
.army-phone:not([data-army-position="center"]) .stream-player__retry { display: none; }
.army-phone__select {
  position: absolute; inset: 0; z-index: 8; width: 100%; height: 100%;
  border: 0; border-radius: 3.5rem; background: transparent; cursor: pointer;
}
.army-phone[data-army-position="center"] .army-phone__select { display: none; }
.army-phone__select:focus-visible { outline: 3px solid var(--c-color); outline-offset: .35rem; }
.army-phone .stream-player__controls {
  left: 50%; bottom: .65rem; width: calc(100% - 1rem); min-height: 2.5rem;
  gap: .2rem; padding: .28rem .4rem;
}
.army-phone .stream-control { width: 1.85rem; height: 1.85rem; flex-basis: 1.85rem; }
.army-phone .stream-icon { width: 1rem; height: 1rem; }
.army-phone .stream-player__time, .army-phone .stream-player__volume { display: none; }
.army-carousel__arrow {
  position: absolute; top: 46%; z-index: 6; width: 3.25rem; height: 3.25rem;
  display: grid; place-items: center; translate: 0 -50%; border-radius: 50%;
  color: #2e2e2e; background: rgba(255,255,255,.88);
  box-shadow: 0 .4rem 1.5rem rgba(0,0,0,.12);
}
.army-carousel__arrow--prev { left: clamp(.75rem, 2vw, 2rem); }
.army-carousel__arrow--next { right: clamp(.75rem, 2vw, 2rem); }
.army-carousel__arrow svg { width: 1.6rem; fill: none; stroke: currentColor; stroke-width: 2; }
.army-carousel__arrow:hover { color: var(--c-color); }
.army-carousel__arrow:focus-visible { outline: 3px solid var(--c-color); outline-offset: 3px; }
.army-carousel__dots { display: flex; justify-content: center; gap: .6rem; margin-top: 1rem; }
.army-carousel__dots button {
  width: .65rem; height: .65rem; padding: 0; border-radius: 50%;
  background: #d3d3d3; transition: width .25s ease, background-color .25s ease;
}
.army-carousel__dots button[aria-current="true"] { width: 2.25rem; border-radius: 999px; background: var(--c-color); }

@media (max-width: 700px) {
  .campaign-results__grid {
    --results-columns: 2; --results-width: 100%;
    grid-template-columns: repeat(var(--results-columns), minmax(0, 1fr)); gap: 2.25rem 1.5rem;
  }
  .campaign-results__grid--count-1 { --results-columns: 1; --results-width: 22rem; }
  .campaign-results__metric strong { font-size: clamp(3rem, 15vw, 4.75rem); }
  .campaign-results__metric--long strong { font-size: clamp(2.75rem, 12vw, 4rem); }
  .influencer-hero { min-height: 25rem; padding-left: 0; padding-right: 0; }
  .influencer-hero__picture { width: min(24rem, 88vw); }
  .influencer-results__grid { grid-template-columns: 1fr; gap: 2.6rem; width: min(21rem, 100%); }
  .influencer-metric { text-align: center; }
  .influencer-metric strong { font-size: clamp(4.8rem, 26vw, 7rem); }
  .influencer-metric span { text-align: center; margin-top: .7rem; }
  .army-carousel__stage { height: min(127vw, 37rem); }
  .army-phone { width: min(68vw, 19rem); }
  .army-phone[data-army-position="left"] { left: 5%; transform: translateX(-50%) scale(.72); }
  .army-phone[data-army-position="right"] { left: 95%; transform: translateX(-50%) scale(.72); }
  .army-carousel__arrow { top: auto; bottom: -3.7rem; translate: 0; }
  .army-carousel__arrow--prev { left: var(--gutter); }
  .army-carousel__arrow--next { right: var(--gutter); }
  .army-carousel__dots { margin-top: 1.35rem; }
  .campaign-divider h2 { font-size: clamp(2.2rem, 11vw, 4rem); }
  .client-carousel__stage { height: min(65vw, 18rem); }
  .client-frame { width: min(76vw, 25rem); }
  .client-frame[data-client-position="left"] { left: 2%; transform: translate(-50%, -50%) scale(.7); }
  .client-frame[data-client-position="right"] { left: 98%; transform: translate(-50%, -50%) scale(.7); }
  .client-carousel__arrow { top: auto; bottom: -3.8rem; translate: 0; }
  .client-carousel__arrow--prev { left: var(--gutter); }
  .client-carousel__arrow--next { right: var(--gutter); }
  .client-carousel__dots { margin-top: 1.25rem; }
  .client-carousel-section--vertical .client-carousel__stage { height: min(127vw, 37rem); }
  .client-carousel-section--vertical .client-frame { width: min(68vw, 19rem); }
  .client-carousel-section--vertical .client-frame[data-client-position="left"] {
    left: 5%; transform: translateX(-50%) scale(.72);
  }
  .client-carousel-section--vertical .client-frame[data-client-position="right"] {
    left: 95%; transform: translateX(-50%) scale(.72);
  }
  .client-carousel-section--square .client-carousel__stage { height: min(78vw, 25rem); }
  .client-carousel-section--square .client-frame { width: min(76vw, 25rem); }
  .client-carousel-section--square .client-frame[data-client-position="left"] { left: 2%; }
  .client-carousel-section--square .client-frame[data-client-position="right"] { left: 98%; }
  .client-gallery__item { min-height: min(78vw, 27rem); padding: 1rem; }
}

@media (max-width: 390px) {
  .campaign-results__grid { grid-template-columns: 1fr; }
}

.case-hero {
  position: relative; overflow: hidden; background: var(--black);
  min-height: min(56.25vw, 1080px);
}
.case-hero__media { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.case-hero__wash {
  position: absolute; inset: 0 auto 0 0; width: 53%; pointer-events: none;
  background: linear-gradient(90deg, var(--c-grad), transparent);
  opacity: .5; z-index: 2;
}
.case-hero__brand {
  position: absolute; left: clamp(1.25rem, 4vw, 4.75rem);
  bottom: clamp(5rem, 11vw, 11rem); width: var(--logo-w); height: auto; z-index: 3;
  transition: bottom .2s ease;
}
.case-hero__cta {
  position: absolute; left: clamp(1.25rem, 4vw, 4.75rem);
  bottom: clamp(1.5rem, 4vw, 4.75rem); z-index: 7;
  transition: bottom .2s ease;
}

/* Video largo HLS adaptativo. El poster y este Play pertenecen a la página:
   aparecen con el primer render y sólo ceden cuando el <video> reproduce. */
.stream-player {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  overflow: hidden; background: #000;
}
.stream-player__poster, .stream-player__poster img,
.stream-player__video {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
.stream-player__poster {
  z-index: 2; opacity: 1; transition: opacity .24s var(--ease);
}
.stream-player__poster img { object-fit: cover; }
.stream-player__video {
  z-index: 1; border: 0; background: #000; object-fit: cover; pointer-events: none;
}
.stream-player__play {
  position: absolute; left: 50%; top: 50%; z-index: 5;
  width: clamp(3.8rem, 5.2vw, 5.6rem); aspect-ratio: 1;
  translate: -50% -50%; display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  color: #fff; background: rgba(12,12,14,.78);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08);
  transition: background-color .2s ease, scale .2s ease, opacity .2s ease;
}
.stream-player__play:hover { background: rgba(12,12,14,.92); scale: 1.04; }
.stream-player__play:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.stream-player__play svg { width: 58%; height: 58%; fill: currentColor; }
.stream-player__play[disabled] { cursor: wait; }
.stream-player.is-starting .stream-player__play { animation: stream-play-pulse 1s ease-in-out infinite; }
.stream-player.is-playing .stream-player__poster {
  opacity: 0; pointer-events: none;
}
.stream-player.is-playing .stream-player__play {
  opacity: 0; visibility: hidden; pointer-events: none; animation: none;
}
@keyframes stream-play-pulse { 50% { opacity: .58; } }
.stream-player__controls {
  position: absolute; left: 58%; bottom: clamp(.65rem, 1.4vw, 1.5rem); z-index: 6;
  translate: -50% .35rem; width: min(56rem, 58vw); min-height: 3.25rem;
  display: flex; align-items: center; gap: clamp(.45rem, .75vw, .8rem);
  padding: .52rem .72rem; border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px; color: #fff; background: rgba(13,13,15,.48);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 .35rem 1.4rem rgba(0,0,0,.18);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, translate .18s ease, visibility 0s linear .18s;
}
.stream-player.is-playing.is-controls-visible .stream-player__controls {
  translate: -50% 0; opacity: 1; visibility: visible; pointer-events: auto;
  transition-delay: 0s;
}
.stream-player.is-playing:not(.is-controls-visible) { cursor: none; }
.stream-control {
  width: 2.25rem; height: 2.25rem; flex: 0 0 2.25rem;
  display: grid; place-items: center; border-radius: 50%;
  color: #fff; background: transparent;
}
.stream-control:hover { background: rgba(255,255,255,.13); }
.stream-control:focus-visible,
.stream-player__seek:focus-visible,
.stream-player__volume:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.stream-icon { width: 1.18rem; height: 1.18rem; display: block; fill: currentColor; }
.stream-icon--play, .stream-icon--muted { display: none; }
.stream-player.is-paused .stream-icon--play,
.stream-player.is-muted .stream-icon--muted { display: block; }
.stream-player.is-paused .stream-icon--pause,
.stream-player.is-muted .stream-icon--volume { display: none; }
.stream-player__time {
  flex: 0 0 auto; min-width: 2.6rem; font-size: .7rem;
  line-height: 1; font-variant-numeric: tabular-nums; text-align: center;
}
.stream-player__seek, .stream-player__volume {
  height: 1.4rem; margin: 0; cursor: pointer; accent-color: #fff;
}
.stream-player__seek { min-width: 4rem; flex: 1 1 auto; }
.stream-player__volume { width: clamp(3.5rem, 5vw, 5.5rem); flex: 0 1 5.5rem; }
.stream-player:fullscreen,
.stream-player:-webkit-full-screen { width: 100%; height: 100%; aspect-ratio: auto; }
.stream-player:fullscreen .stream-player__controls,
.stream-player:-webkit-full-screen .stream-player__controls {
  left: 50%; width: min(60rem, calc(100% - 2rem));
}
.stream-player__status {
  position: absolute; left: 50%; top: 50%; z-index: 4;
  translate: -50% -50%; color: #fff; font-size: .78rem;
  letter-spacing: .08em; text-transform: uppercase; opacity: 0;
  pointer-events: none;
}
.stream-player.is-error .stream-player__status { opacity: 1; top: calc(50% - 1.4rem); }
.stream-player.is-error .stream-player__play { opacity: 0; visibility: hidden; pointer-events: none; }
.stream-player__retry {
  position: absolute; left: 50%; top: calc(50% + 1rem); z-index: 4;
  translate: -50% -50%; padding: .65rem 1rem;
  border: 1px solid rgba(255,255,255,.7); color: #fff;
  background: rgba(0,0,0,.72); font: inherit; cursor: pointer;
}

.case-split {
  --case-panel: #d5d5d5;
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: clamp(30rem, 43.6vw, 52.3rem);
  background: var(--white); color: #353535;
  border-bottom: 3px solid rgba(173,173,173,.68);
}
.case-split__media {
  position: relative; min-width: 0; min-height: 0;
  background: var(--case-panel); display: grid; place-items: center;
  overflow: hidden;
}
.case-split__media picture {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: grid; place-items: center;
}
.case-split__img { width: 100%; height: 100%; object-fit: contain; }
.case-split__copy {
  align-self: center; padding: clamp(2.5rem, 7.6vw, 9.1rem);
  font-size: clamp(.95rem, 1.25vw, 1.5rem); line-height: 1.42;
}
.case-split__copy p + p, .case-copy p + p { margin-top: 0; }
.case-split--reverse .case-split__media { order: 2; }
.case-split--reverse .case-split__copy { order: 1; }

.case-text, .case-composition {
  background: var(--white); color: #353535;
  padding: clamp(3rem, 5.5vw, 6.5rem) clamp(1.25rem, 10.5vw, 12.5rem);
}
.case-text { border-bottom: 3px solid rgba(173,173,173,.68); }
.case-copy { font-size: clamp(.95rem, 1.25vw, 1.5rem); line-height: 1.42; }
.case-composition { padding-bottom: 0; }
.case-composition__visual {
  position: relative; min-height: clamp(24rem, 42vw, 50.5rem);
  margin-top: clamp(2.5rem, 5vw, 6rem); overflow: hidden;
  border-bottom: 3px solid var(--c-color);
}
.case-composition__visual picture { display: contents; }
.case-composition__base {
  position: absolute; left: 0; bottom: 12%; width: 76%; height: auto;
}
.case-composition__front {
  position: absolute; right: 5%; bottom: -1px; width: 36%; max-height: 94%;
  object-fit: contain; object-position: bottom right;
}

@media (max-width: 760px) {
  .case-head { padding-top: calc(var(--nav-h) + 2rem); }
  .case-head__inner { padding-left: var(--gutter); }
  .case-head__intro { line-height: 1.25; }
  .case-hero { min-height: 56.25vw; }
  .case-hero__brand { bottom: 4.4rem; }
  .case-hero.has-stream-controls .case-hero__brand { bottom: 7.25rem; }
  .case-hero.has-stream-controls .case-hero__cta { bottom: 3.75rem; }
  .case-hero__wash { width: 78%; }
  .stream-player__controls {
    left: 50%; bottom: .42rem; width: calc(100% - .8rem); min-height: 2.8rem;
    gap: .25rem; padding: .34rem .42rem;
  }
  .stream-control { width: 2rem; height: 2rem; flex-basis: 2rem; }
  .stream-player__time { min-width: 2.25rem; font-size: .62rem; }
  .stream-player__volume { display: none; }
  .case-split { grid-template-columns: 1fr; min-height: 0; }
  .case-split--reverse .case-split__media,
  .case-split--reverse .case-split__copy { order: initial; }
  .case-split__media { min-height: min(92vw, 34rem); }
  .case-split__copy { padding: 2.5rem var(--gutter) 3.25rem; }
  .case-text, .case-composition { padding-left: var(--gutter); padding-right: var(--gutter); }
  .case-composition { padding-bottom: 0; }
  .case-composition__visual { min-height: 67vw; }
  .case-composition__base { width: 88%; bottom: 18%; }
  .case-composition__front { right: -4%; width: 46%; }
}

/* Spots a sangre, uno debajo del otro */
.camp__stack { display: block; }
.spot { position: relative; overflow: hidden; background: var(--grey-dark); display: block; }
.spot__img, .spot video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.spot--square { width: min(100%, 67.5rem); margin-inline: auto; }
.spot--square .spot__img,
.spot--square video,
.spot__img--square { aspect-ratio: 1; }
.spot__brand {
  position: absolute; left: clamp(1rem, 3vw, 3.5rem);
  bottom: clamp(3.6rem, 6.5vw, 6rem);
  width: var(--logo-w); height: auto; z-index: 3;
}
.spot__cta { position: absolute; left: clamp(1rem, 3vw, 3.5rem); bottom: clamp(1rem, 2.4vw, 2.4rem); z-index: 3; }
.spot__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(0,0,0,.14); transition: background .4s var(--ease);
}
.spot__play:hover { background: rgba(0,0,0,.03); }
.spot__play svg { width: clamp(3.5rem, 6vw, 6rem); height: auto; filter: drop-shadow(0 2px 14px rgba(0,0,0,.5)); }

.placeholder-tag {
  position: absolute; right: clamp(.75rem,1.5vw,1.25rem); top: clamp(.75rem,1.5vw,1.25rem);
  background: rgba(0,0,0,.72); color: #ffd400; border: 1px solid rgba(255,212,0,.5);
  font-size: clamp(.65rem,.85vw,.8rem); letter-spacing: .1em; text-transform: uppercase;
  padding: .4em .7em; border-radius: 2px; font-weight: 600;
}

.back-link {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: var(--fs-btn); color: #666; margin-bottom: 1.2rem;
}
.back-link:hover { color: var(--black); }
.back-link svg { width: 1em; rotate: 180deg; }

.morework { padding: var(--section-pad) var(--gutter); background: var(--black); }
.morework__action { display: flex; justify-content: center; margin-top: clamp(2rem, 4vw, 3rem); }
.morework__all { background: var(--white); color: var(--black); }
.morework__all:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }
.morework__title { font-weight: 400; font-size: var(--fs-h2); margin-bottom: clamp(1.5rem,3vw,2.5rem); }
.morework__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(220px, 28vw, 400px), 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.morework__card { display: block; position: relative; overflow: hidden; background: var(--grey-dark); }
.morework__card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .7s var(--ease); }
a.morework__card:hover img, a.morework__card:focus-visible img { transform: scale(1.045); }
a.morework__card:focus-visible { outline: 3px solid var(--white); outline-offset: 4px; }
.morework__label {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4em .9em .8em;
  background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,0));
  font-size: var(--fs-btn); font-weight: 600;
}

/* Work es un índice de proyectos, no otro carrusel. Sin altura fija ni reveal
   del contenedor completo: la grilla puede crecer sin ocultar filas enteras. */
.work-index { padding-top: calc(var(--nav-h) + clamp(2rem, 4vw, 4rem)); min-height: calc(100svh - 5rem); }
.work-index__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; margin: 0; list-style: none; }
.work-index__grid > li { min-width: 0; }
.work-index__grid .morework__label { font-size: clamp(.875rem, 1.25vw, 1.5rem); }
@media (max-width: 1000px) {
  .work-index__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .work-index__grid { grid-template-columns: minmax(0, 1fr); }
  .work-index__grid .morework__label { font-size: 1rem; }
}

.back-link {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: var(--fs-btn); color: var(--grey); margin-bottom: 1.5rem;
}
.back-link:hover { color: var(--white); }
.back-link svg { width: 1em; rotate: 180deg; }

/* Confirmación persistente y visible tras la aceptación del servidor. */
.form-note[data-success] {
  margin-top: 24px;
  padding: 24px;
  border: 1px solid #737373;
  background: #191919;
  color: #fff;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.4;
  text-align: left;
  scroll-margin-block: 110px;
}
.form-note[data-success]:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }