/* ════════════════════════════════════════════════
   NEXT PLAY — sections.css
   Hero collage · manifiesto · solución · servicios
   editoriales · proyectos · diagnóstico · final
   ════════════════════════════════════════════════ */

/* ═══ 1 · HERO EDITORIAL — papel crema, titular gigante y producto flotante ═══
   Referencia de lenguaje: cartelería de marca (tipografía a sangre con
   textura serigrafiada + producto por delante de las letras). */
.hero-edit {
  position: relative; min-height: 100svh; overflow: hidden;
  background: var(--paper); color: var(--ink);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: clamp(96px, 13vh, 150px);
  isolation: isolate;
}
.paper-grain {
  position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .1 0 0 0 0 .1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23p)'/%3E%3C/svg%3E");
}

/* ── Titular gigante a sangre, con textura de serigrafía ── */
.mega {
  position: absolute; z-index: 1; left: 0; right: 0;
  top: clamp(84px, 15vh, 190px);
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(2px, .8vh, 10px); pointer-events: none;
  will-change: transform;
}
.mega-l {
  display: block; line-height: .82; letter-spacing: -.03em;
  font-family: var(--f-head); font-weight: 800;
  /* Cuerpos calculados sobre el ancho real de cada línea en Syne 800
     para que ambas lleguen a sangre en cualquier pantalla:
     "LA PRÓXIMA" (10 caracteres) y "JUGADA" (6). */
  font-size: 12.9vw;
  /* rojo + grano: la textura "come" el color como una serigrafía */
  color: transparent;
  background-color: var(--red);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4'/%3E%3CfeColorMatrix values='0 0 0 0 .96 0 0 0 0 .94 0 0 0 0 .9 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E");
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mega-l:nth-of-type(2) { font-size: 14.3vw; }
.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;
}

/* ── El producto: el trabajo de NEXT PLAY, por delante del titular ── */
/* Se dimensiona por ALTURA (no por ancho) para que la composición
   entera —titular, producto, pie y ticker— quepa siempre en una
   pantalla, sea cual sea el alto del viewport. */
.hero-prod {
  position: relative; z-index: 2; align-self: center;
  height: clamp(250px, 43vh, 430px); aspect-ratio: 9 / 16.4;
  margin-bottom: clamp(14px, 2vh, 34px);
  will-change: transform;
}
.prod {
  position: relative; width: 100%; height: 100%;
  background: var(--carbon); border-radius: 32px; padding: 13px;
  transform: rotate(-4deg);
  box-shadow: 0 50px 90px rgba(16,16,18,.34), 0 6px 18px rgba(16,16,18,.16);
}
.prod-scr {
  width: 100%; height: 100%; border-radius: 21px; background: #121216;
  padding: 16px 14px; color: var(--white);
  display: flex; flex-direction: column; justify-content: center;
}
.pr-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 11.5px; }
.pr-av {
  width: 25px; height: 25px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--red), #ff7a86);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-head); font-weight: 700; font-size: 9px;
}
.pr-img { height: 44%; border-radius: 11px; background: linear-gradient(140deg, #24421c, #10203c); margin-bottom: 11px; }
.pr-line { height: 8px; border-radius: 4px; background: #26262d; margin-bottom: 6px; }
.pr-line.sh { width: 56%; }
.pr-meta { font-size: 10.5px; color: var(--grey); margin-top: 10px; }

/* El producto del hero es decorativo: no captura clics ni foco. */
.hero-prod { pointer-events: none; }

/* ═══ BIBLIOTECA DE DISPOSITIVOS ═══
   Cámara de fotos y ordenador construidos solo con CSS. Son las piezas
   de la morfosis del escenario de servicios (#servicios): cada servicio
   muestra su herramienta y ninguna puede solapar una lectura, porque
   viven dentro de su propia columna.

   Medida clave: cada dispositivo dimensiona sus piezas internas en `em`.
   La `font-size` la fija `.mo` con `min(cqw, vh)`, de modo que el objeto
   se ajusta a la vez al ANCHO de su columna y al ALTO de la pantalla.
   Por eso aquí no hay ni un solo tamaño en píxeles ni media queries.

   ── Cámara de fotos ──
   Todas las piezas solapan el cuerpo para que se lea una sola
   silueta: nada debe parecer una caja flotando al lado. */
.cam-body {
  position: relative; width: 42em; aspect-ratio: 4 / 3;
  background: linear-gradient(168deg, #26262f 0%, #1a1a21 42%, #101015 100%);
  border-radius: 18px;
  box-shadow: 0 40px 80px rgba(16,16,18,.34), inset 0 1px 0 rgba(255,255,255,.07);
  display: flex; align-items: center; justify-content: center;
}
/* Meseta superior: nace dentro del cuerpo y sobresale por arriba */
.cam-vf {
  position: absolute; top: -11%; left: 26%; width: 34%; height: 17%;
  background: #26262f; border-radius: 9px 9px 0 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.cam-vf::after {  /* disparador, sobre la meseta */
  content: ''; position: absolute; right: -34%; bottom: 6%;
  width: 22%; height: 42%; border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #b9b9c6, #6f6f7c);
}
.cam-flash {
  position: absolute; top: 12%; left: 9%; width: 15%; height: 7%;
  border-radius: 3px;
  background: linear-gradient(180deg, #52525f, #2b2b34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
/* Empuñadura derecha, integrada en el cuerpo */
.cam-body::after {
  content: ''; position: absolute; right: 0; top: 8%; width: 15%; height: 84%;
  border-radius: 0 18px 18px 0;
  background: linear-gradient(90deg, rgba(255,255,255,.03), rgba(0,0,0,.28));
}
.cam-lens {
  position: relative; width: 52%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #3a3a46, #0a0a0e 74%);
  /* anillo de montura: une el objetivo al cuerpo */
  box-shadow: 0 0 0 .5em #21212a, 0 0 0 .62em rgba(255,255,255,.05),
              inset 0 2px 5px rgba(0,0,0,.6), 0 10px 24px rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
}
.cam-lens-ring { position: absolute; inset: 12%; border-radius: 50%; border: 1px solid rgba(255,255,255,.10); }
.cam-lens-core {
  position: relative; width: 46%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #6f86b8, #0d1524 72%);
  box-shadow: inset 0 0 .8em rgba(0,0,0,.7);
}
.cam-lens-core::after {  /* reflejo de cristal */
  content: ''; position: absolute; top: 12%; left: 16%; width: 34%; height: 24%;
  border-radius: 50%; background: rgba(255,255,255,.28); filter: blur(1px);
}
.cam-brand {
  position: absolute; bottom: 8%; left: 9%;
  font-size: .9em; letter-spacing: .16em; font-weight: 700; color: rgba(255,255,255,.42);
}

/* ── Ordenador con la web de la agencia dentro ── */
.lt-screen {
  width: 40em; aspect-ratio: 16 / 10;
  background: #0d0d11; border: .55em solid #1e1e25;
  border-radius: 12px 12px 2px 2px; overflow: hidden;
  box-shadow: 0 44px 84px rgba(16,16,18,.36);
}
.lt-base {
  position: relative; width: 44em; height: .9em; margin-top: -1px;
  background: linear-gradient(180deg, #2a2a33, #15151a);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 16px 30px rgba(16,16,18,.28);
}
.lt-base::after {
  content: ''; position: absolute; top: .18em; left: 50%; transform: translateX(-50%);
  width: 13%; height: .22em; border-radius: 2px; background: #0d0d11;
}
.lt-site {
  width: 100%; height: 100%; background: var(--paper); color: var(--ink);
  padding: 5.5% 6.5%; display: flex; flex-direction: column;
}
.lt-nav { display: flex; align-items: center; gap: .6em; font-family: var(--f-head); font-weight: 800; font-size: 1.1em; }
.lt-nav i { width: 1.8em; height: .22em; border-radius: 1px; background: rgba(16,16,18,.22); }
.lt-nav i:first-of-type { margin-left: auto; }
.lt-hero {
  font-family: var(--f-head); font-weight: 800; font-size: 2.7em; line-height: .88;
  letter-spacing: -.02em; color: var(--red); margin-top: 6%;
}
.lt-txt { font-size: .92em; line-height: 1.5; color: #5f5a52; margin-top: 5%; max-width: 78%; }
.lt-tags { display: flex; gap: .35em; flex-wrap: wrap; margin-top: auto; }
.lt-tags i { font-style: normal; font-size: .8em; font-weight: 700; padding: .25em .6em; border-radius: 99px; background: rgba(16,16,18,.08); }
.lt-cta {
  margin-top: 4%; align-self: flex-start; font-size: .85em; font-weight: 700;
  background: var(--ink); color: var(--paper); padding: .4em .9em; border-radius: 99px;
}

/* Sello circular giratorio — se apoya en la esquina del dispositivo
   sin taparlo, y siempre por encima de él (z-index alto). */
.seal {
  position: absolute; z-index: 6; width: clamp(58px, 6vw, 84px); height: auto;
  top: -12%; left: -40%;
  animation: sealSpin 26s linear infinite;
}
@keyframes sealSpin { to { transform: rotate(360deg); } }
.seal-ring { fill: none; stroke: var(--ink); stroke-width: 1; opacity: .35; }
.seal-ring.thin { opacity: .22; }
.seal-txt { font-family: var(--f-body); font-size: 9.5px; font-weight: 600; letter-spacing: .12em; fill: var(--ink); }
.seal-core { font-family: var(--f-head); font-weight: 800; font-size: 26px; fill: var(--red); }

/* Etiquetas de servicio flotando junto al producto */
.prod-tag {
  position: absolute; z-index: 3;
  background: var(--paper); color: var(--ink);
  border: 1px solid rgba(16,16,18,.14);
  font-size: 12px; font-weight: 600; padding: 8px 14px; border-radius: 999px;
  box-shadow: 0 12px 28px rgba(16,16,18,.12);
  animation: tagFloat 7s ease-in-out infinite;
  white-space: nowrap;
}
/* El dispositivo se proyecta más ancho que su caja (perspectiva 3D):
   las etiquetas se separan lo suficiente para no invadir la pantalla. */
.tag-a { top: 16%; right: -62%; }
.tag-b { top: 54%; left: -52%; animation-delay: .8s; }
.tag-c { bottom: 8%; right: -56%; animation-delay: 1.5s; }
@keyframes tagFloat { 50% { transform: translateY(-11px); } }

/* ── Pie del hero: copy a la izquierda, ficha a la derecha ── */
.hero-base {
  position: relative; z-index: 2; width: 100%;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: clamp(22px, 4vw, 60px); align-items: end;
  padding-bottom: clamp(18px, 2.6vh, 40px);
  border-top: 1px solid rgba(16,16,18,.14); padding-top: clamp(16px, 2.4vh, 28px);
}
.hb-kicker {
  font-size: 11.5px; font-weight: 600; letter-spacing: .26em;
  text-transform: uppercase; color: #8a5560; margin-bottom: 14px;
}
.hb-sub { font-size: clamp(14.5px, 1.5vw, 17px); color: #46423c; max-width: 46ch; margin-bottom: 24px; }
.hb-ctas { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.btn-solid.ink { background: var(--ink); color: var(--paper); }
.btn-solid.ink:hover { background: var(--red); color: #fff; }
.hero-edit .btn-line { color: var(--ink); }
.hero-edit .btn-line:hover { color: var(--red); }

.hb-card { border-left: 1px solid rgba(16,16,18,.14); padding-left: clamp(16px, 2vw, 26px); }
.hbc-label { font-size: 10.5px; font-weight: 700; letter-spacing: .22em; color: #8a8378; }
.hbc-list {
  display: block; font-family: var(--f-head); font-weight: 800;
  font-size: clamp(16px, 1.5vw, 20px); line-height: 1.25; margin: 10px 0 10px;
}
.hb-card p { font-size: 13px; color: #6b665e; line-height: 1.55; }
.hb-card a {
  display: inline-block; margin-top: 6px; font-weight: 700; font-size: 11.5px;
  letter-spacing: .1em; color: var(--red); border-bottom: 1px solid currentColor;
}

/* El ticker vive sobre papel en este hero */
.hero-edit .ticker { position: relative; z-index: 2; border-top: 1px solid rgba(16,16,18,.14); border-bottom: none; background: transparent; }
.hero-edit .ticker-track { color: #8a8378; }
.hero-edit .ticker-track i { color: var(--red); }

/* ═══ 2 · MANIFIESTO (papel) ═══ */
.manifesto { background: var(--paper); color: var(--ink); padding: clamp(90px, 12vw, 160px) 0; }
.manifesto .kicker { color: #77726a; }
.manifesto-intro { font-size: clamp(28px, 3.6vw, 52px); max-width: 900px; }
.manifesto-intro u { text-decoration-color: var(--lime-d); text-decoration-thickness: 4px; text-underline-offset: 6px; }
/* `clip` para contener el desplazamiento con el que entran las frases:
   arrancan 56 px a un lado y, aunque son invisibles (opacidad 0), ese
   desplazamiento ensancha la página mientras no han entrado. */
.manifesto-lines {
  padding: clamp(48px, 7vw, 100px) var(--gut);
  max-width: 1400px; margin: 0 auto; overflow-x: clip;
}
.m-line {
  font-family: var(--f-head); font-weight: 800; line-height: 1.04;
  font-size: clamp(27px, 6.4vw, 92px); letter-spacing: -.02em;
}
.m-line.ghost { color: transparent; -webkit-text-stroke: 1.5px rgba(16,16,18,.55); }
.m-line.ind { padding-left: clamp(24px, 12vw, 220px); }
/* Esta línea carga con la palabra más larga del manifiesto
   ("Oportunidades", 13 caracteres) y además lleva relleno lateral, así
   que dispone de menos ancho que sus hermanas. Por eso baja el mínimo
   del cuerpo: con los 34 px del resto se salía 51 px y se partía en
   "Oportunida / des". Si cambias el texto, comprueba la palabra más
   larga que vayas a poner. */
.m-line.accent {
  color: var(--carbon); background: var(--lime);
  width: fit-content; max-width: 100%;
  font-size: clamp(23px, 6.4vw, 92px);
  padding: 0 clamp(10px, 3vw, 18px);
  transform: rotate(-1deg); margin-top: 14px;
}
.manifesto-out { font-size: clamp(19px, 2.2vw, 28px); color: #55504a; line-height: 1.45; }
.manifesto-out b { color: var(--ink); font-weight: 700; }

/* ═══ 3 · SOLUCIÓN (carbón, capas) ═══ */
.solucion {
  background: var(--carbon); padding: clamp(90px, 12vw, 160px) 0;
  clip-path: polygon(0 0, 100% 2.5vw, 100% 100%, 0 100%);
  margin-top: -2.5vw; position: relative;
}
.sol-head h2 { max-width: 880px; }
.sol-layers { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 100px); margin-top: clamp(48px, 6vw, 80px); align-items: start; }
.sol-step { border-top: 1px solid var(--hair-d); padding: 26px 0 30px; display: grid; grid-template-columns: 70px 1fr; gap: 8px 20px; }
.sol-step span { font-family: var(--f-head); font-weight: 700; color: var(--lime); font-size: 15px; padding-top: 6px; }
.sol-step h3 { font-size: clamp(22px, 2.6vw, 34px); min-width: 0; }
.sol-step p { grid-column: 2; color: var(--grey); font-size: 15px; max-width: 460px; min-width: 0; }
/* Composición fija que acompaña a los pasos: se queda pegada mientras
   el texto de la izquierda avanza. */
.sol-visual { position: sticky; top: 110px; }
.sv-stack { position: relative; height: 480px; }
.sv-card { position: absolute; border-radius: 16px; box-shadow: 0 40px 90px rgba(0,0,0,.5); }
.sv-dossier {
  top: 0; left: 6%; width: 220px; aspect-ratio: 3/4; padding: 22px;
  container-type: inline-size;
  background: linear-gradient(160deg, #15181f, #0d0f14);
  border: 1px solid var(--hair-d); transform: rotate(-6deg);
  display: flex; flex-direction: column;
}
.sv-dossier small { font-size: 9px; letter-spacing: .22em; color: var(--grey-d); }
/* El cuerpo se mide contra el ancho de la TARJETA, no del viewport: la
   palabra más larga ("empresa", 7 caracteres) entra siempre. Con 30 px
   fijos se salía por 1 px y el navegador la partía en "empres / a". */
.sv-dossier b {
  font-family: var(--f-head); font-size: min(30px, 15cqw);
  line-height: 1.02; margin-top: 12px;
}
.sv-foot { margin-top: auto; font-size: 10px; letter-spacing: .18em; color: var(--lime); }
.sv-phone {
  top: 12%; right: 4%; width: 190px; aspect-ratio: 9/17; padding: 14px 12px;
  background: #141419; border: 1px solid var(--hair-d); transform: rotate(5deg);
}
.svp-head { height: 10px; width: 50%; border-radius: 5px; background: #26262d; margin: 0 auto 12px; }
.svp-img { height: 46%; border-radius: 10px; background: linear-gradient(140deg, #1d3218, #101d38); margin-bottom: 10px; }
.svp-txt { height: 9px; border-radius: 5px; background: #232329; margin-bottom: 6px; }
.svp-txt.s { width: 65%; }
.sv-metric {
  bottom: 4%; left: 18%; padding: 18px 24px;
  background: var(--lime); color: var(--carbon); transform: rotate(-2deg);
}
.sv-metric small { font-size: 11px; font-weight: 600; }
/* El símbolo va con la tipografía de texto y un respaldo del sistema:
   Syne es una tipografía de display y no incluye este glifo. */
.sv-metric strong {
  font-family: var(--f-body), "Apple Symbols", "Segoe UI Symbol", sans-serif;
  font-size: 40px; display: block; line-height: 1.1;
}
.sv-metric span { font-size: 12px; font-weight: 600; }

/* ════════════════════════════════════════════════════
   EL RECORRIDO — corredor 3D que se atraviesa

   Un solo espacio con profundidad. Las cinco estaciones se colocan a
   distintas distancias en Z y el scroll mueve la "cámara" hacia dentro,
   así que el usuario las ATRAVIESA en vez de verlas cambiar en el sitio.

   Por qué CSS y no WebGL: la sensación de recorrer un espacio la da la
   proyección en perspectiva, y eso el navegador ya lo hace. Sin librería,
   sin canvas, sin 150 KB y sin riesgo de pantalla en blanco.

   El TEXTO vive fuera del espacio 3D (.jr-hud): dentro se deformaría con
   la perspectiva y perdería nitidez. Así se lee perfecto y lo indexa
   Google igual de bien.
   ════════════════════════════════════════════════════ */
.journey {
  /* La SECCIÓN es la que se fija (pin), no su hijo. Fijando el hijo,
     ScrollTrigger calculaba un inicio de -40 px —imposible, la sección
     está en 3717— y el recorrido se pintaba encima del hero. */
  position: relative; height: 100svh; overflow: hidden;
  /* Halo central: separa las piezas del fondo cuando pasan a media
     opacidad durante el tránsito. Sin él, una pieza oscura al 40 %
     sobre negro simplemente desaparece. */
  background:
    radial-gradient(70% 50% at 50% 42%, rgba(198,241,63,.07), transparent 70%),
    radial-gradient(120% 80% at 50% 0%, #191920, var(--carbon) 62%);
  color: var(--white);
}
.jr-sticky {
  position: relative; height: 100svh;
  display: flex; align-items: center; justify-content: center;
  /* `clip` recorta en los dos ejes sin convertir la caja en contenedor
     de scroll (que es lo que rompía el anclaje con `hidden`). Es
     imprescindible: al final del recorrido las estaciones pasan por
     delante de la cámara y se agrandan a varios miles de píxeles; sin
     recorte, ensancharían la página entera. */
  overflow: clip;
}
/* Cinturón y tirantes: la sección tampoco debe dejar escapar nada */
.journey { overflow: clip; }

/* ── El espacio ── */
.jr-scene {
  position: absolute; inset: 0;
  perspective: 900px; perspective-origin: 50% 36%;
  transform-style: preserve-3d;
}
.jr-track {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Suelo en fuga: la referencia que hace legible la profundidad */
.jr-floor {
  position: absolute; left: -60%; right: -60%; bottom: -6%; height: 62%;
  background:
    repeating-linear-gradient(90deg, rgba(198,241,63,.12) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(0deg,  rgba(198,241,63,.10) 0 1px, transparent 1px 88px);
  transform: rotateX(74deg);
  transform-origin: 50% 100%;
  mask-image: linear-gradient(to top, #000 5%, transparent 72%);
  -webkit-mask-image: linear-gradient(to top, #000 5%, transparent 72%);
  pointer-events: none;
}

/* ── Cada estación ── */
.jr-st {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}
.jr-art {
  /* Escala interna: las piezas miden en em, como el resto del proyecto */
  /* Al llegar a su parada, la pieza debe llenar la escena: si se
     queda pequeña, el recorrido no impresiona. */
  font-size: clamp(5px, min(2.2vw, 2.1vh), 14px);
  display: flex; align-items: center; justify-content: center;
}

/* 01 · Diagnóstico — escáner */
/* Contraste: el panel era #14141a sobre un fondo #0b0b0c y no se veía
   NADA. Las superficies del recorrido tienen que despegarse del fondo
   por sí solas, sin depender de la iluminación de la pantalla. */
.jr-scan {
  position: relative; width: 34em; aspect-ratio: 4/3;
  background: linear-gradient(160deg, #2a2a36, #191922);
  border: .2em solid rgba(198,241,63,.55); border-radius: 1.2em;
  padding: 2.4em; overflow: hidden;
  box-shadow: 0 4em 8em rgba(0,0,0,.6),
              0 0 6em rgba(198,241,63,.12),
              inset 0 1px 0 rgba(255,255,255,.09);
}
.jr-scan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1em; height: 74%; }
.jr-scan-grid i { background: rgba(255,255,255,.16); border-radius: .5em; }
.jr-scan-grid i:nth-child(2) { background: rgba(198,241,63,.5); }
.jr-scan-grid i:nth-child(5) { background: rgba(211,58,72,.62); }
.jr-scan-line {
  position: absolute; left: 0; right: 0; height: .22em; top: 0;
  background: linear-gradient(90deg, transparent, var(--lime), transparent);
  box-shadow: 0 0 2em rgba(198,241,63,.7);
  animation: jrScan 3.2s ease-in-out infinite;
}
@keyframes jrScan { 0%,100% { top: 8%; } 50% { top: 86%; } }
.jr-scan-tag {
  position: absolute; left: 2.4em; bottom: 1.5em;
  font-size: 1.3em; font-weight: 600; color: var(--lime); letter-spacing: .08em;
}

/* 02 · Estrategia — pizarra */
.jr-board {
  position: relative; width: 34em; aspect-ratio: 8/5;
  background: linear-gradient(160deg, #2a2a36, #191922);
  border: .2em solid rgba(255,255,255,.22); border-radius: 1.2em;
  padding: 1.6em;
  box-shadow: 0 4em 8em rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.09);
}
.jr-board-svg { width: 100%; height: 82%; }
.jr-b-route {
  fill: none; stroke: var(--lime); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 340; stroke-dashoffset: 340;
  animation: jrDraw 3.6s var(--ease) infinite;
}
@keyframes jrDraw { 0% { stroke-dashoffset: 340; } 55%,100% { stroke-dashoffset: 0; } }
.jr-b-node { fill: #4a4a58; stroke: rgba(255,255,255,.6); stroke-width: 1.5; }
.jr-b-goal { fill: var(--lime); }

/* 03 · Diseño — piezas de marca */
.jr-brand { width: 26em; display: grid; grid-template-columns: 1fr 1fr; gap: 1.2em; }
.jr-tile {
  aspect-ratio: 1; border-radius: 1.4em;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-head); font-weight: 800; font-size: 3em;
  box-shadow: 0 2.6em 5em rgba(0,0,0,.45);
}
.jr-t1 { background: #fff; color: var(--carbon); transform: rotate(-4deg); }
.jr-t2 { background: var(--red); transform: rotate(3deg); }
.jr-t3 { background: var(--lime); color: var(--carbon); transform: rotate(2.5deg); }
.jr-t4 { background: repeating-linear-gradient(45deg, #1c1c22 0 .8em, #26262d .8em 1.6em); transform: rotate(-3deg); }

/* 04 · Web — el ordenador (reutiliza .lt-* de la biblioteca) */
.jr-laptop { display: flex; flex-direction: column; align-items: center; }

/* 05 · Clientes — avisos entrando */
.jr-leads { display: flex; flex-direction: column; gap: 1.2em; }
.jr-lead {
  display: flex; align-items: center; gap: 1em;
  background: var(--lime); color: var(--carbon);
  font-weight: 700; font-size: 1.6em;
  padding: 1em 1.6em; border-radius: 99px;
  box-shadow: 0 2em 4em rgba(0,0,0,.4);
  animation: jrPop 3.4s var(--ease) infinite;
}
.jr-lead:nth-child(2) { animation-delay: .5s; background: #fff; }
.jr-lead:nth-child(3) { animation-delay: 1s; }
@keyframes jrPop { 0%,70%,100% { transform: none; } 12% { transform: translateX(.6em) scale(1.03); } }

/* ── Texto: fuera del 3D, siempre nítido ── */
.jr-hud {
  position: absolute; inset: auto 0 0; z-index: 3;
  /* Al hueco propio se le suma el de los botones flotantes: esta sección
     está FIJADA cuatro pantallas, así que si el CTA cae debajo del botón
     de WhatsApp no queda tapado un instante, sino todo el recorrido. */
  padding-bottom: calc(clamp(28px, 4vh, 52px) + var(--zona-flotantes));
  pointer-events: none;
}
/* Velo bajo el texto.
   Las piezas pasan MUY cerca de la cámara y se agrandan hasta llenar la
   pantalla: sin esto, una ficha blanca cruzando por detrás dejaba el
   titular blanco sobre blanco e ilegible. Es el mismo fallo que tuvo el
   objeto que antes recorría toda la página, y aquí no se repite: el
   texto siempre tiene fondo suficiente para leerse. */
.jr-hud::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  top: -55%; z-index: -1; pointer-events: none;
  background: linear-gradient(to top,
    var(--carbon) 26%,
    rgba(11,11,12,.94) 52%,
    rgba(11,11,12,.6) 74%,
    transparent 100%);
}
.jr-hud .wrap { pointer-events: auto; }
.jr-kicker {
  font-size: 11.5px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--lime); margin-bottom: 14px;
}
.jr-copy { position: relative; min-height: clamp(140px, 20vh, 190px); }
/* Relevo escalonado entre textos.
   Con un fundido cruzado simétrico, durante casi medio segundo se veían
   los dos títulos superpuestos y parecía un error de maquetación. Ahora
   el que sale se va rápido (.2 s) y el que entra espera a que se haya
   ido (.16 s de retraso): nunca coinciden legibles a la vez. */
.jr-c {
  position: absolute; inset: 0;
  opacity: 0; transform: translateY(22px); pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.jr-c.on {
  opacity: 1; transform: none; pointer-events: auto;
  transition: opacity .38s var(--ease) .16s, transform .44s var(--ease) .16s;
}
.jr-num {
  font-family: var(--f-head); font-weight: 800; font-size: 13px;
  letter-spacing: .18em; color: var(--lime);
}
.jr-c h2 { font-size: clamp(26px, 4vw, 52px); margin: 8px 0 12px; max-width: 17ch; }
.jr-c p { color: var(--grey); max-width: 44ch; font-size: clamp(14.5px, 1.6vw, 17px); }
.jr-cta { margin-top: 6px; }

/* ── Barra de progreso del recorrido ── */
.jr-rail {
  position: absolute; left: var(--gut); right: var(--gut); top: 84px; z-index: 4;
  height: 2px; background: rgba(255,255,255,.12);
}
.jr-rail-fill {
  position: absolute; inset: 0 auto 0 0; width: 0%;
  background: var(--lime); box-shadow: 0 0 12px rgba(198,241,63,.6);
}
.jr-rail-dots { position: absolute; inset: -3px 0; display: flex; justify-content: space-between; }
.jr-rail-dots i {
  width: 8px; height: 8px; border-radius: 50%;
  background: #2a2a30; box-shadow: 0 0 0 3px var(--carbon);
  transition: background .3s, transform .3s;
}
.jr-rail-dots i.on { background: var(--lime); transform: scale(1.25); }

@media (max-width: 860px) {
  .jr-scene { perspective: 620px; perspective-origin: 50% 32%; }
  .jr-art { font-size: clamp(3.6px, min(3.1vw, 1.5vh), 10px); }
  .jr-hud { padding-bottom: calc(18px + var(--zona-flotantes)); }
  .jr-copy { min-height: clamp(126px, 19vh, 165px); }
  .jr-rail { top: 70px; }
  .jr-floor { height: 52%; }
}

/* Sin animación: se ve la primera estación quieta y el texto completo,
   que es un estado válido y legible. */
@media (prefers-reduced-motion: reduce) {
  .jr-scan-line, .jr-b-route, .jr-lead { animation: none; }
  .jr-b-route { stroke-dashoffset: 0; }
}



/* ════════════════════════════════════════════════════
   PROYECTOS — casos en formato editorial
   Alternan lado para que no se lea como una lista de fichas.
   ════════════════════════════════════════════════════ */
.proyectos { background: var(--carbon); color: var(--white); padding: clamp(80px, 12vh, 140px) 0 clamp(60px, 9vh, 110px); }
.proyectos > .wrap { margin-bottom: clamp(40px, 6vh, 72px); }

.case {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(26px, 4vw, 64px); align-items: center;
  max-width: var(--wrap); margin: 0 auto clamp(52px, 7vh, 96px);
  padding: 0 var(--gut);
}
.case:nth-child(odd) .case-art { order: 2; }
.case-art {
  position: relative; border-radius: 18px; overflow: hidden;
  aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #17171d, #0e0e12);
  border: 1px solid var(--hair-d);
}
.case-halftone {
  position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image: radial-gradient(rgba(198,241,63,.16) 1px, transparent 1px);
  background-size: 9px 9px;
}
.crest-float, .crest-float-mini { position: relative; z-index: 2; display: flex; }
.case-crest { width: clamp(96px, 16vw, 168px); height: auto; filter: drop-shadow(0 18px 34px rgba(0,0,0,.5)); }
/* La pieza es vertical (9:16, formato historia de redes). Se muestra
   ENTERA —nada de recortarla a 16/9— sobre el naranja del torneo. */
.case-art-story {
  background: radial-gradient(120% 100% at 50% 0%, #ff914c, #d2611f);
  padding: 3%;
}
.case-story {
  height: 100%; width: auto; max-width: 100%;
  object-fit: contain; border-radius: 8px;
  box-shadow: 0 22px 50px rgba(0,0,0,.45);
}
.case-art-poster { aspect-ratio: 16/10; padding: 0; }
.case-poster { width: 100%; height: 100%; object-fit: cover; }
.crest-float-mini {
  position: absolute; right: 5%; bottom: 7%; z-index: 3;
  background: rgba(11,11,12,.82); border-radius: 14px; padding: 10px;
  backdrop-filter: blur(6px); border: 1px solid var(--hair-d);
}
.case-crest-mini { width: clamp(44px, 6vw, 66px); height: auto; display: block; }

.case-txt small {
  font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--lime);
}
.case-txt h3 { font-size: clamp(26px, 3.4vw, 44px); margin: 12px 0 14px; }
.case-txt p { color: var(--grey); max-width: 44ch; font-size: clamp(14.5px, 1.6vw, 16.5px); }
.case-tags {
  display: block; margin-top: 18px; font-size: 12.5px;
  letter-spacing: .06em; color: var(--grey-d);
}
.case-next { grid-template-columns: 1fr; }
.case-next .case-txt {
  border-top: 1px solid var(--hair-d); padding-top: clamp(26px, 4vh, 44px);
}
.case-next h3 { color: var(--lime); }
.case-next .btn-solid { margin-top: 20px; }

/* ── Caso web: captura real dentro de un marco de navegador ──
   Una captura suelta se lee como una foto cualquiera. Con la barra del
   navegador encima se entiende de un vistazo que es una WEB, que es
   justo lo que se está vendiendo. */
.case-art-web {
  background: linear-gradient(150deg, #1b1b22, #0e0e12);
  padding: clamp(14px, 2.5vw, 30px);
  aspect-ratio: 16/10;
}
.browser {
  width: 100%; border-radius: 9px; overflow: hidden;
  box-shadow: 0 26px 60px rgba(0,0,0,.55);
  background: #f2efe9;
}
.browser-bar {
  display: flex; align-items: center; gap: 6px;
  background: #24242c; padding: 8px 12px;
}
.browser-bar i { width: 8px; height: 8px; border-radius: 50%; background: #45454f; flex-shrink: 0; }
.browser-bar u {
  text-decoration: none; margin-left: 10px; font-size: 10.5px;
  color: #8b8b90; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.browser-shot { display: block; width: 100%; height: auto; }

@media (max-width: 560px) {
  .browser-bar { padding: 6px 9px; }
  .browser-bar u { font-size: 9px; }
}

/* ════════════════════════════════════════════════════
   DIAGNÓSTICO — herramienta de captación paso a paso
   ════════════════════════════════════════════════════ */
.diagnostico {
  background: var(--paper); color: var(--ink);
  padding: clamp(80px, 12vh, 140px) 0;
}
.diagnostico .kicker { color: #6b665e; }
.diag-head { text-align: center; }
.diag-head h2 { font-size: clamp(30px, 4.6vw, 62px); }
.diag-head .kicker { justify-content: center; }
.diag-sub { color: #5f5a52; margin-top: 16px; font-size: clamp(15px, 1.7vw, 18px); }

.diag-tool {
  max-width: 720px; margin: clamp(36px, 5vh, 60px) auto 0;
  background: #fff; border-radius: 22px; overflow: hidden;
  box-shadow: 0 40px 90px rgba(16,16,18,.14), 0 0 0 1px rgba(16,16,18,.06);
}
.diag-track { height: 4px; background: rgba(16,16,18,.08); }
.diag-fill { height: 100%; width: 0%; background: var(--lime-d); transition: width .45s var(--ease); }
.diag-stage { padding: clamp(30px, 5vw, 56px); min-height: 268px; display: flex; flex-direction: column; justify-content: center; }
.diag-start { text-align: center; }

.diag-idx {
  font-family: var(--f-head); font-weight: 800; font-size: 12.5px;
  letter-spacing: .18em; color: var(--red);
}
.diag-q-text {
  font-family: var(--f-head); font-weight: 800; letter-spacing: -.01em;
  font-size: clamp(21px, 2.8vw, 32px); line-height: 1.18;
  margin: 14px 0 26px; max-width: 26ch;
}
.diag-answers { display: flex; gap: 12px; }
.diag-answers button {
  flex: 1; max-width: 170px; padding: 15px 18px; border-radius: 999px;
  font-weight: 600; font-size: 15px;
  border: 1px solid rgba(16,16,18,.18); background: transparent; color: var(--ink);
  transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease);
}
.diag-answers button:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-2px); }

.diag-meter {
  position: relative; height: 8px; border-radius: 99px; margin-bottom: 18px;
  background: linear-gradient(90deg, #d33a48, #e8b84b 52%, var(--lime-d));
}
.diag-needle {
  position: absolute; top: 50%; left: 0; width: 18px; height: 18px;
  margin: -9px 0 0 -9px; border-radius: 50%;
  background: #fff; border: 3px solid var(--ink);
  transition: left .8s var(--ease);
}
.diag-level {
  font-family: var(--f-head); font-weight: 800; font-size: 12.5px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--red);
}
.diag-done h3 { font-size: clamp(22px, 2.9vw, 34px); margin: 10px 0 16px; max-width: 24ch; }
.diag-done ul { list-style: none; margin-bottom: 26px; }
.diag-done li {
  position: relative; padding-left: 26px; margin-bottom: 10px;
  font-size: 15px; color: #4b463f; line-height: 1.55;
}
.diag-done li::before {
  content: '→'; position: absolute; left: 0; top: 0;
  color: var(--red); font-weight: 700;
}
.diag-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.diagnostico .btn-line { color: var(--ink); }

/* ════════════════════════════════════════════════════
   CIERRE + FORMULARIO DE CONTACTO
   ════════════════════════════════════════════════════ */
.final {
  position: relative; overflow: clip;
  background: var(--carbon); color: var(--white);
  padding: clamp(80px, 12vh, 150px) 0 clamp(60px, 9vh, 110px);
}
.final-ai-glow {
  position: absolute; left: 50%; top: -10%; transform: translateX(-50%);
  width: min(900px, 120vw); aspect-ratio: 1; pointer-events: none;
  background: radial-gradient(circle, rgba(198,241,63,.10), transparent 62%);
}
.final-marquee {
  position: absolute; left: 0; right: 0; top: 8%;
  pointer-events: none; overflow: clip;
}
.final-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(34px, 5vw, 76px); align-items: start;
}
.final-copy h2 { font-size: clamp(30px, 4.2vw, 58px); max-width: 15ch; }
.final-line {
  font-family: var(--f-head); font-weight: 800;
  font-size: clamp(20px, 2.4vw, 30px); margin-top: 22px;
}
.final-line em { font-style: normal; color: var(--lime); }
.final-direct { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 30px; }

/* ── Formulario ──
   Etiquetas flotantes: el rótulo vive DENTRO del campo y sube al
   escribir. Requiere `placeholder=" "` en el HTML (un espacio), que es
   lo que permite a CSS distinguir "vacío" con :placeholder-shown. */
.final-form { display: grid; gap: 14px; }
.ff { position: relative; }
.ff input, .ff select, .ff textarea {
  width: 100%; font-family: inherit; font-size: 15px; color: var(--white);
  background: rgba(255,255,255,.04); border: 1px solid var(--hair-d);
  border-radius: 12px; padding: 22px 16px 10px;
  transition: border-color .25s, background .25s;
}
.ff textarea { resize: vertical; min-height: 96px; padding-top: 26px; }
.ff select { padding: 18px 16px 14px; color: var(--grey); appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--grey) 50%),
                    linear-gradient(135deg, var(--grey) 50%, transparent 50%);
  background-position: calc(100% - 20px) 24px, calc(100% - 14px) 24px;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.ff select:valid { color: var(--white); }
.ff input:focus, .ff select:focus, .ff textarea:focus {
  outline: none; border-color: var(--lime); background: rgba(255,255,255,.06);
}
.ff label {
  position: absolute; left: 17px; top: 7px;
  font-size: 11px; letter-spacing: .04em; color: var(--grey);
  pointer-events: none; transition: all .2s var(--ease);
}
/* Campo vacío y sin foco: el rótulo baja y hace de marcador */
.ff input:placeholder-shown:not(:focus) + label,
.ff textarea:placeholder-shown:not(:focus) + label {
  top: 16px; font-size: 15px; color: var(--grey);
}
.ff input:focus + label, .ff textarea:focus + label { color: var(--lime); }
.ff.err input, .ff.err select, .ff.err textarea { border-color: var(--red); }

.form-consent {
  display: grid; grid-template-columns: 18px 1fr; gap: 11px;
  align-items: start; font-size: 12.5px; line-height: 1.55; color: var(--grey);
  cursor: pointer;
}
.form-consent input { margin-top: 2px; accent-color: var(--lime); width: 16px; height: 16px; }
.form-consent a { color: var(--white); border-bottom: 1px solid var(--hair-d); }
.form-consent a:hover { color: var(--lime); border-color: var(--lime); }
.form-consent.err span { color: #ff8f99; }
.form-legal { font-size: 11.5px; color: var(--grey-d); text-align: center; }
.form-ok {
  background: var(--lime); color: var(--carbon);
  font-weight: 700; text-align: center; padding: 15px; border-radius: 12px;
}
/* Trampa antibots: fuera de la vista y fuera del foco del teclado */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Piezas sueltas */
.accent-dot { color: var(--red); }
.srv-more-band { background: var(--carbon); color: var(--white); padding: clamp(34px, 5vh, 60px) 0; border-top: 1px solid var(--hair-d); }
.srv-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.srv-more p { font-family: var(--f-head); font-weight: 800; font-size: clamp(24px, 3.4vw, 44px); }
.hb-copy { min-width: 0; }
.sol-steps { min-width: 0; }
.s-ic { font-style: normal; margin-right: .35em; opacity: .75; }

@media (max-width: 860px) {
  .final-grid { grid-template-columns: 1fr; gap: 34px; }
  .diag-stage { padding: 26px 22px; min-height: 240px; }
  .case-txt h3 { margin: 10px 0 12px; }
  .srv-more { flex-direction: column; align-items: flex-start; }
}

/* ════════════════════════════════════════════════════
   MÓVIL — reglas generales
   (Este bloque se perdió al retirar el escenario antiguo y se ha
   restaurado. Contiene la adaptación del hero, la solución, los
   proyectos y el diagnóstico: sin él la web se ve rota en el móvil.)
   ════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  /* ── Hero en vertical ── */
  .hero-edit { padding-top: clamp(88px, 12vh, 120px); }
  .mega { top: clamp(74px, 12vh, 120px); }
  .hero-prod { height: clamp(190px, 30vh, 300px); }
  .seal { width: clamp(64px, 17vw, 86px); left: -18%; top: -4%; }
  /* En vertical solo caben dos etiquetas sin invadir la pantalla del
     dispositivo: se conservan las dos primeras, bien separadas. */
  .prod-tag { font-size: 10.5px; padding: 6px 11px; }
  .tag-a { right: -74%; top: 12%; }
  .tag-b { left: -60%; top: 56%; }
  .tag-c { display: none; }
  .hero-base { grid-template-columns: 1fr; gap: 14px; }
  .hb-sub { margin-bottom: 18px; }
  .hb-ctas { gap: 16px; }
  /* La ficha se reduce a su esencia: el párrafo y el enlace son
     redundantes con la sección de servicios, que está a un scroll. */
  .hb-card {
    border-left: none; padding-left: 0;
    border-top: 1px solid rgba(16,16,18,.14); padding-top: 14px;
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  }
  .hb-card p { display: none; }
  .hbc-list { font-size: 14px; margin: 0; line-height: 1.4; }

  /* ── Solución ──
     UNA sola columna. Con las dos de escritorio, el texto quedaba en
     162 px y las tarjetas (221 px, posicionadas en absoluto) se le
     echaban encima: era el solape de letras más visible de la web. */
  .sol-layers { grid-template-columns: 1fr; gap: 34px; }
  .sol-visual { position: static; margin-top: 8px; order: -1; }
  .sol-step { grid-template-columns: 1fr; gap: 2px; }
  .sol-step span { padding-top: 0; margin-bottom: 6px; }
  .sol-step p { grid-column: 1; max-width: none; }

  /* ── Proyectos y manifiesto ── */
  .case, .case:nth-child(odd) { grid-template-columns: 1fr; align-items: start; }
  .case:nth-child(odd) .case-art { order: 0; }
  .m-line.ind { padding-left: 8vw; }
  .case-art-logo { padding: 12%; }
  .srv-num { font-size: clamp(44px, 14vw, 70px); top: 8px; }
}

@media (max-width: 560px) {
  .diag-answers { flex-direction: column; }
  .diag-answers button { max-width: none; }
  .v-brand .tiles { grid-template-columns: repeat(2, 96px); }
  /* Solución: el collage se despliega en fila.
     Las tres piezas se superponen a propósito en pantallas anchas, pero
     por debajo de 560 px se aplastan entre sí: el móvil (221 px) caía
     encima del dosier (190 px) en una caja de 320 y tapaba su texto.
     Aquí dejan de estar posicionadas en absoluto y se ordenan solas. */
  .sv-stack {
    position: static; height: auto;
    display: flex; flex-wrap: wrap; align-items: flex-start;
    justify-content: center; gap: 12px;
  }
  .sv-card { position: static; box-shadow: 0 18px 40px rgba(0,0,0,.42); }
  .sv-dossier {
    width: 46%; max-width: 180px; padding: 16px;
    transform: rotate(-3deg); top: auto; left: auto;
  }
  .sv-phone {
    width: 42%; max-width: 158px; padding: 12px 10px;
    transform: rotate(3deg); top: auto; right: auto;
  }
  .sv-metric {
    width: 100%; max-width: 250px; margin-top: 8px;
    transform: rotate(-1deg); top: auto; left: auto; bottom: auto;
    display: flex; align-items: center; gap: 12px; padding: 14px 20px;
  }
  .sv-metric strong { font-size: 30px; }
}

@media (max-width: 400px) {
  h2 { font-size: clamp(28px, 8.2vw, 72px); }
}

/* ════════════════════════════════════════════════════
   LA JUGADA — pizarra táctica interactiva
   Sección oscura entre servicios y proyectos. Traduce el origen
   deportivo de la agencia sin dibujar un campo literal: son líneas
   tácticas, cuatro nodos y un balón que recorre la jugada.

   El balón lo mueve js/play.js combinando dos cosas: la posición
   base sobre el trazado (la marca el scroll) y un desvío corto
   hacia el cursor. Sin JS se ve la pizarra completa y estática,
   que sigue siendo una composición válida.
   ════════════════════════════════════════════════════ */
.play {
  background: var(--carbon); color: var(--white);
  padding: clamp(70px, 11vh, 130px) 0 clamp(60px, 9vh, 110px);
  overflow: hidden;
}
.play-head h2 { font-size: clamp(32px, 5.4vw, 74px); line-height: .96; margin-top: 10px; }
.play-head h2 em { font-style: normal; color: var(--lime); }
.play-sub { color: var(--grey); margin-top: 14px; font-size: clamp(14.5px, 1.6vw, 17px); }

.play-board {
  position: relative; margin: clamp(28px, 5vh, 54px) auto 0;
  width: min(1180px, 92vw); aspect-ratio: 1000 / 420;
  border-radius: 14px; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(198,241,63,.07), transparent 62%),
    linear-gradient(160deg, #131318, #0b0b0d);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 40px 90px rgba(0,0,0,.45);
  cursor: crosshair;
}

/* Líneas del campo */
.play-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.pl-frame, .pl-mid, .pl-circle, .pl-area {
  fill: none; stroke: rgba(255,255,255,.11); stroke-width: 1.4;
}
.pl-circle { stroke-dasharray: 5 7; }

/* Trazado de la jugada: se dibuja según avanza el balón.
   --draw va de 1 (sin dibujar) a 0 (dibujado del todo). */
.pl-route {
  fill: none; stroke: var(--lime); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: calc(var(--len, 1200) * var(--draw, 1));
  opacity: .85;
  filter: drop-shadow(0 0 6px rgba(198,241,63,.35));
}

/* Nodos de la jugada */
.pl-node {
  position: absolute; left: var(--nx); top: var(--ny);
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; pointer-events: none;
}
.pl-dot {
  width: 13px; height: 13px; border-radius: 50%;
  background: #2a2a31; box-shadow: 0 0 0 1px rgba(255,255,255,.14);
  transition: background .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease);
}
.pl-node b {
  font-family: var(--f-head); font-size: 11px; letter-spacing: .14em;
  color: var(--grey-d); transition: color .45s var(--ease);
}
.pl-node i {
  font-style: normal; font-size: clamp(11px, 1.25vw, 14px); font-weight: 600;
  color: rgba(255,255,255,.42); white-space: nowrap;
  transition: color .45s var(--ease);
}
/* Encendido: lo activa el JS cuando el balón pasa por el nodo */
.pl-node.lit .pl-dot {
  background: var(--lime); transform: scale(1.5);
  box-shadow: 0 0 0 5px rgba(198,241,63,.16), 0 0 16px rgba(198,241,63,.6);
}
.pl-node.lit b { color: var(--lime); }
.pl-node.lit i { color: #fff; }
.pl-node.goal.lit .pl-dot { box-shadow: 0 0 0 7px rgba(198,241,63,.2), 0 0 26px rgba(198,241,63,.75); }

/* El balón: esfera sobria con costura, nada infantil */
.pl-ball {
  position: absolute; left: 0; top: 0; width: 30px; height: 30px;
  margin: -15px 0 0 -15px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 34% 28%, #fbfbf8, #cfcdc6 58%, #8d8b84);
  box-shadow: 0 10px 22px rgba(0,0,0,.55), inset 0 -2px 6px rgba(0,0,0,.25);
  will-change: transform;
}
.pl-ball-in {
  position: absolute; inset: 26%; border-radius: 50%;
  border: 1.4px solid rgba(16,16,18,.3); border-top-color: transparent;
}
.pl-ball.kicked { animation: ballKick .5s var(--ease); }
@keyframes ballKick {
  40% { box-shadow: 0 10px 22px rgba(0,0,0,.55), 0 0 0 14px rgba(198,241,63,.22); }
}

.pl-hint {
  position: absolute; right: 16px; bottom: 12px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.3); transition: opacity .5s ease;
}
.pl-hint.gone { opacity: 0; }

.play-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 22px; margin-top: clamp(26px, 4.5vh, 48px);
}
.play-foot p { font-size: clamp(16px, 2vw, 24px); max-width: 30ch; color: rgba(255,255,255,.82); }

/* En pantallas estrechas la pizarra se hace más alta y se ocultan
   las etiquetas largas de los nodos intermedios: en 390 px no caben
   cuatro rótulos sin pisarse. */
@media (max-width: 860px) {
  .play-board { aspect-ratio: 1000 / 780; }
  .pl-node i { font-size: 10.5px; }
  .pl-node.n2 i, .pl-node.n3 i { display: none; }
  .pl-ball { width: 24px; height: 24px; margin: -12px 0 0 -12px; }
  .pl-hint { display: none; }
  .play-foot { flex-direction: column; align-items: flex-start; }
}

/* La marquesina gigante del cierre mide más de 7.000 px de ancho: sin
   recorte propio ensanchaba el documento entero. No se notaba a simple
   vista porque el `overflow-x: clip` del body tapaba el síntoma, pero el
   scrollWidth de la página se disparaba a 3.867 px sobre 1.272 reales. */
.final-marquee { overflow: clip; }

/* ════════════════════════════════════════════════════
   UBICACIÓN — señal de negocio local
   El mapa es un SVG propio, no un iframe de terceros: sin rastreadores,
   sin abrir la CSP, sin coste de carga. Para el posicionamiento local lo
   que pesa no es el mapa, sino el bloque NAP de al lado (nombre, ciudad,
   teléfono) y los datos estructurados del <head>.
   ════════════════════════════════════════════════════ */
.local { background: var(--carbon); color: var(--white); padding: clamp(70px, 10vh, 120px) 0; }
.local-grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.local-copy h2 { font-size: clamp(30px, 4.4vw, 60px); margin-top: 8px; }
.local-copy h2 em { font-style: normal; color: var(--lime); }
.local-sub { color: var(--grey); margin-top: 16px; max-width: 46ch; font-size: clamp(14.5px, 1.6vw, 16.5px); }

/* NAP: los datos que Google contrasta con tu ficha de empresa */
.local-nap { margin: 26px 0 20px; display: grid; gap: 10px; }
.local-nap > div { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: baseline; }
.local-nap dt { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--grey-d); }
.local-nap dd { font-size: 15px; color: var(--white); }
.local-nap a { border-bottom: 1px solid var(--hair-d); }
.local-nap a:hover { color: var(--lime); border-color: var(--lime); }
.local-zonas { font-size: 13.5px; color: var(--grey); margin-bottom: 26px; max-width: 44ch; line-height: 1.7; }
.local-zonas strong { color: rgba(255,255,255,.82); font-weight: 600; }

.local-map { position: relative; }
.local-map svg {
  width: 100%; height: auto; display: block; border-radius: 14px;
  box-shadow: 0 30px 70px rgba(0,0,0,.45);
}
.lm-bg { fill: #101015; }
.lm-river { fill: none; stroke: #1d3a4d; stroke-width: 13; stroke-linecap: round; opacity: .85; }
.lm-roads path { fill: none; stroke: rgba(255,255,255,.07); stroke-width: 2; }
.lm-blocks rect { fill: rgba(255,255,255,.05); }
.lm-dot { fill: var(--lime); }
.lm-halo { fill: var(--lime); opacity: .1; animation: lmPulse 3.4s ease-in-out infinite; }
.lm-halo-2 { opacity: .18; animation-delay: .5s; }
@keyframes lmPulse { 50% { opacity: .04; transform-box: fill-box; } }
.lm-name {
  font-family: var(--f-head); font-weight: 800; font-size: 13px;
  fill: rgba(255,255,255,.9); letter-spacing: .18em;
}
.lm-river-name { font-size: 10px; fill: #4a7f9e; letter-spacing: .1em; font-style: italic; }
.local-map-link {
  display: inline-block; margin-top: 14px; font-size: 13.5px;
  color: var(--grey); border-bottom: 1px solid var(--hair-d); padding-bottom: 2px;
}
.local-map-link:hover { color: var(--lime); border-color: var(--lime); }

@media (max-width: 860px) {
  .local-grid { grid-template-columns: 1fr; gap: 30px; }
  .local-map { order: -1; }
  .local-nap > div { grid-template-columns: 82px 1fr; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .lm-halo { animation: none; }
}

/* ═══════════════════════════════════════════════════════════
   BENTO DEL PROBLEMA
   Sustituye a las ocho frases sueltas de .manifesto-lines.
   Seis tarjetas, cada una con su ilustración dibujada aquí:
   ni una imagen, ni una petición extra al servidor.
   Recolorear = cambiar los tokens de :root en base.css.
   ═══════════════════════════════════════════════════════════ */

.mb-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
  padding:clamp(40px,6vw,72px) 0 clamp(28px,4vw,48px);
}
.mb-card{
  background:#fff; border:1px solid rgba(16,16,18,.10); border-radius:20px;
  padding:clamp(18px,2.2vw,26px); display:flex; flex-direction:column; gap:14px;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.mb-card:hover{ transform:translateY(-4px); border-color:rgba(16,16,18,.2);
  box-shadow:0 22px 48px rgba(16,16,18,.10); }
.mb-card.mb-wide{ grid-column:span 2; }
.mb-card h3{
  font-family:var(--f-head); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(19px,2.1vw,25px); color:var(--ink); line-height:1.1;
}
.mb-card p{ font-size:clamp(14px,1.05vw,15.5px); color:var(--grey-d); line-height:1.5; margin:0; }

/* Lienzo común de las ilustraciones */
.mb-art{
  background:var(--paper); border:1px solid rgba(16,16,18,.07); border-radius:13px;
  min-height:172px; padding:16px; overflow:hidden; position:relative;
  display:flex; align-items:center; justify-content:center; gap:14px;
}

/* ── 01 · Calendario con huecos + alcance plano ── */
.mb-cal{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; flex:1; max-width:250px; }
.mb-cal-h{ font-size:9px; font-weight:600; color:#a8a49c; text-align:center; letter-spacing:.04em; }
.mb-cal i{ aspect-ratio:1; border-radius:4px; background:#e4e0d7; display:block; }
.mb-cal i.on{ background:var(--ink); animation:mbBlink 3.4s var(--ease) infinite; }
.mb-cal i.on.late{ background:var(--red); animation-delay:1.7s; }
@keyframes mbBlink{ 0%,86%,100%{opacity:1} 92%{opacity:.25} }
.mb-flat{ flex:1; max-width:230px; }
.mb-flat svg{ width:100%; height:46px; display:block; }
.mb-flat-l{ fill:none; stroke:#b9b4ab; stroke-width:2; stroke-linecap:round;
  stroke-dasharray:260; stroke-dashoffset:260; animation:mbDraw 3.6s var(--ease) infinite; }
@keyframes mbDraw{ 0%{stroke-dashoffset:260} 45%,100%{stroke-dashoffset:0} }
.mb-flat-tag{ display:block; margin-top:8px; font-size:11px; font-weight:600;
  color:#a8a49c; letter-spacing:.05em; text-transform:uppercase; }

/* ── 02 · Embudo con fugas ── */
.mb-funnel{ width:100%; display:flex; flex-direction:column; align-items:center; gap:9px; position:relative; }
.mb-fu{ border-radius:8px; text-align:center; font-size:11.5px; color:var(--grey-d);
  padding:9px 0; background:#e4e0d7; }
.mb-fu b{ display:block; font-family:var(--f-head); font-weight:800;
  font-size:19px; color:var(--ink); line-height:1.1; }
.mb-fu1{ width:100%; }
.mb-fu2{ width:66%; }
.mb-fu3{ width:36%; background:var(--red); color:#fff4f4; }
.mb-fu3 b{ color:#fff; }
.mb-drop{ position:absolute; width:5px; height:5px; border-radius:50%;
  background:#c9c4ba; opacity:0; animation:mbDrop 2.8s linear infinite; }
.mb-drop.d1{ left:14%; top:26%; }
.mb-drop.d2{ right:16%; top:30%; animation-delay:.9s; }
.mb-drop.d3{ left:24%; top:52%; animation-delay:1.8s; }
@keyframes mbDrop{ 0%{opacity:0;transform:translateY(0)} 18%{opacity:1}
  100%{opacity:0;transform:translateY(42px)} }

/* ── 03 · Piezas que tiran cada una para un lado ── */
.mb-scatter{ position:relative; width:100%; height:132px; }
.mb-pc{ position:absolute; width:40px; height:52px; border-radius:6px;
  border:1px solid rgba(16,16,18,.14); background:#fff; }
.mb-pc.p1{ left:8%;  top:2%;  transform:rotate(-9deg);  background:linear-gradient(160deg,#fff,#efece4); }
.mb-pc.p2{ right:6%; top:12%; transform:rotate(11deg);  background:linear-gradient(160deg,#fff,#f3eee2); }
.mb-pc.p3{ left:36%; bottom:0; transform:rotate(4deg);  background:linear-gradient(160deg,#fff,#eeeae0); }
.mb-arrows{ position:absolute; inset:0; width:100%; height:100%; }
.mb-ar{ fill:none; stroke:#c1bcb2; stroke-width:1.6; stroke-linecap:round; stroke-dasharray:4 5; }

/* ── 04 · Dosier pobre vs dosier con marca ── */
.mb-art-docs{ gap:clamp(14px,3vw,34px); }
.mb-doc{ width:104px; aspect-ratio:3/4; border-radius:8px; padding:11px;
  display:flex; flex-direction:column; gap:6px; position:relative; }
.mb-doc i{ height:4px; border-radius:2px; background:#ddd8ce; display:block; }
.mb-doc i.t{ width:62%; }
.mb-doc i.s{ width:44%; }
.mb-doc.bad{ background:#fff; border:1px solid rgba(16,16,18,.13); }
.mb-doc.good{ background:var(--carbon); border:1px solid var(--carbon); }
.mb-doc.good i{ background:rgba(255,255,255,.16); }
.mb-doc-head{ font-family:var(--f-head); font-weight:800; font-size:9.5px;
  color:var(--lime); line-height:1.25; letter-spacing:.06em; margin-bottom:2px; }
.mb-doc-head b{ font-size:15px; color:#fff; }
.mb-doc-foot{ margin-top:auto; font-family:var(--f-head); font-weight:700;
  font-size:7.5px; color:rgba(255,255,255,.55); letter-spacing:.1em; }
.mb-doc-tag{ position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  white-space:nowrap; font-size:9px; font-weight:700; letter-spacing:.05em;
  padding:3px 8px; border-radius:20px; background:var(--red); color:#fff; }
.mb-doc-tag.ok{ background:var(--lime); color:var(--carbon); }
.mb-vs{ font-size:19px; color:#b9b4ab; flex:0 0 auto; }

/* ── 05 · Paleta descontrolada + tipografías sueltas ── */
.mb-brand{ width:100%; display:flex; flex-direction:column; gap:14px; align-items:center; }
.mb-sw{ display:flex; gap:6px; }
.mb-sw i{ width:26px; height:26px; border-radius:6px; background:var(--c); display:block;
  animation:mbTilt 4s var(--ease) infinite; }
.mb-sw i:nth-child(2){ animation-delay:.3s } .mb-sw i:nth-child(3){ animation-delay:.6s }
.mb-sw i:nth-child(4){ animation-delay:.9s } .mb-sw i:nth-child(5){ animation-delay:1.2s }
.mb-sw i:nth-child(6){ animation-delay:1.5s }
@keyframes mbTilt{ 0%,88%,100%{transform:none} 94%{transform:rotate(-7deg) translateY(-2px)} }
.mb-types{ display:flex; flex-direction:column; gap:3px; align-items:center;
  font-size:16px; color:var(--ink); line-height:1.2; }

/* ── 06 · Mensajes sin responder ── */
.mb-msgs{ width:100%; display:flex; flex-direction:column; gap:7px; }
.mb-msg{ display:flex; align-items:center; gap:10px; background:#fff;
  border:1px solid rgba(16,16,18,.09); border-radius:9px; padding:9px 12px;
  font-size:12.5px; color:var(--grey-d); }
.mb-msg b{ font-size:13px; color:#b9b4ab; flex:0 0 auto; }
.mb-msg u{ margin-left:auto; text-decoration:none; font-size:10.5px; color:#b0aba1; white-space:nowrap; }
.mb-msg.new{ animation:mbSlide 5s var(--ease) infinite; }
@keyframes mbSlide{ 0%{opacity:0;transform:translateX(-10px)} 12%,100%{opacity:1;transform:none} }
.mb-msg-sum{ align-self:flex-end; display:flex; align-items:center; gap:8px;
  font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--red); margin-top:2px; }
.mb-count{ background:var(--red); color:#fff; border-radius:20px;
  padding:2px 9px; font-size:12px; font-family:var(--f-head); font-weight:800; }

/* ── Adaptación a pantallas pequeñas ── */
@media (max-width:1000px){
  .mb-grid{ grid-template-columns:repeat(2,1fr); }
  .mb-card.mb-wide{ grid-column:span 2; }
}
@media (max-width:640px){
  .mb-grid{ grid-template-columns:1fr; }
  .mb-card.mb-wide{ grid-column:span 1; }
  .mb-art{ min-height:150px; flex-wrap:wrap; }
  .mb-cal{ max-width:200px; }
}

/* Movimiento reducido: las ilustraciones se quedan quietas, no desaparecen */
@media (prefers-reduced-motion: reduce){
  .mb-cal i.on, .mb-flat-l, .mb-drop, .mb-sw i, .mb-msg.new{ animation:none !important; }
  .mb-flat-l{ stroke-dashoffset:0; }
  .mb-drop{ opacity:.5; }
  .mb-card{ transition:none; }
}

/* ═══════════════════════════════════════════════════════════
   ANTON · normalización tipográfica
   Syne tenía 600/700/800. Anton solo existe en un grosor (400):
   si se le pide 700 u 800, el navegador lo "engorda" a la fuerza
   y sale con los bordes sucios. Aquí se fuerza 400 en todo lo que
   use --f-head y se relaja el interletraje, porque Anton ya es
   condensada de fábrica y con tracking negativo se apelmaza.
   ═══════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6,
.mega, .mega-l, .logo, .m-line, .sol-step h3, .jr-c h2, .jr-num,
.case-txt h3, .diag-level, .lg-title, .mb-card h3, .mb-fu b, .mb-count,
.mb-doc-head, .mb-doc-foot, .play-head h2, .local-copy h2, .final-copy h2,
.hbc-list, .seal-core, .ticker-track, .cli-card figcaption b {
  font-family: var(--f-head);
  font-weight: 400 !important;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
}
/* Anton sube mucho la mancha de texto: se compensa bajando la altura
   de línea en los titulares grandes. */
h1, h2, .mega, .mega-l, .m-line { line-height: .96; }
h3 { line-height: 1.05; }
/* Los titulares gigantes en Anton ocupan más ancho que en Syne.
   Se recorta un punto el tamaño máximo para que no se partan feo. */
.case-txt h3 { font-size: clamp(24px, 3.1vw, 40px); }
.manifesto-intro { font-size: clamp(26px, 3.3vw, 47px); }

/* ═══════════════════════════════════════════════════════════
   ETIQUETAS AL ESTILO iUROP
   Antes: MAYÚSCULAS, interletraje muy abierto, color lima y una
   rayita delante. Ahora: frase normal, gris, sin adornos — que es
   como lo resuelve iUROP. El protagonismo lo lleva el titular.
   ═══════════════════════════════════════════════════════════ */

.kicker {
  font-family: var(--f-body);
  font-size: clamp(14px, 1.15vw, 16px);
  font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--grey); margin-bottom: 14px; gap: 0;
}
.kicker::before { display: none; }
.kicker.lime { color: var(--grey); }
.manifesto .kicker { color: #8a857d; }
.solucion .kicker, .play .kicker, .local-copy .kicker,
.proyectos .kicker { color: var(--grey); }

.case-txt small {
  font-family: var(--f-body);
  font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--grey);
}

/* Los rombos ◆ de las cintas ya no están en el HTML.
   Se sustituye su separación por espaciado real. */
.ticker-track i { display: none; }
.ticker-track span { padding-right: 46px; }
.ticker-track.big span { padding-right: 90px; }

/* ═══════════════════════════════════════════════════════════
   CLIENTES · carrusel de trabajo real
   Dos juegos idénticos de tarjetas desplazándose: cuando el primero
   termina, el segundo ya está en su sitio, así que el bucle no tiene
   costura. Se pausa al pasar el ratón por encima.
   ═══════════════════════════════════════════════════════════ */

.clientes {
  background: var(--carbon); color: var(--white);
  padding: clamp(56px, 8vw, 96px) 0; overflow: hidden;
}
.cli-lbl {
  text-align: center; color: var(--grey);
  font-size: clamp(14px, 1.2vw, 16.5px);
  margin: 0 auto clamp(30px, 4vw, 48px); padding: 0 var(--gut); max-width: 640px;
}
.cli-track { display: flex; width: max-content; animation: cliSlide 42s linear infinite; }
/* (la pausa al pasar el ratón se quitó: debe moverse siempre) */
@keyframes cliSlide { to { transform: translateX(-50%); } }
.cli-set { display: flex; gap: 18px; padding-right: 18px; }
.cli-card {
  width: clamp(210px, 21vw, 280px); margin: 0; flex-shrink: 0;
  border-radius: 16px; overflow: hidden; background: var(--carbon-2);
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .45s var(--ease), border-color .45s var(--ease);
}
.cli-card:hover { transform: translateY(-6px); border-color: rgba(198,241,63,.45); }
.cli-card img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block;
  filter: grayscale(.35); transition: filter .45s var(--ease);
}
.cli-card:hover img { filter: none; }
.cli-card figcaption { padding: 14px 16px 16px; }
.cli-card figcaption b {
  display: block; font-size: 14.5px; line-height: 1.2;
  color: var(--white); margin-bottom: 5px;
}
.cli-card figcaption span { font-size: 12.5px; color: var(--grey); line-height: 1.4; }

@media (max-width: 640px) {
  .cli-card { width: 172px; }
  .cli-card figcaption { padding: 11px 12px 13px; }
  .cli-card figcaption b { font-size: 13px; }
  .cli-card figcaption span { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .cli-track { animation: none !important; }
  .clientes { overflow-x: auto; }
  .cli-card, .cli-card img { transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   ARREGLOS TRAS EL CAMBIO A ANTON
   Anton tiene la caja de mayúsculas mucho más alta que Syne y
   ocupa más ancho por carácter. Donde había una altura reservada
   a ojo, el texto se salía y pisaba lo de abajo.
   ═══════════════════════════════════════════════════════════ */

/* El bloque de texto del recorrido se salía de su caja de 190 px
   y se solapaba con el botón "Quiero empezar por el diagnóstico". */
.jr-copy { min-height: clamp(186px, 26vh, 256px); }
.jr-c h2 { font-size: clamp(24px, 3.3vw, 44px); max-width: 15ch; margin: 8px 0 14px; }
.jr-c p  { font-size: clamp(14px, 1.5vw, 16px); }
.jr-cta  { margin-top: 12px; }

/* Esta etiqueta es .jr-kicker, no .kicker: se quedó fuera del
   cambio de estilo y seguía en mayúsculas, lima y muy espaciada. */
.jr-kicker {
  font-family: var(--f-body);
  font-size: clamp(13.5px, 1.1vw, 15.5px); font-weight: 400;
  letter-spacing: 0; text-transform: none;
  color: var(--grey); margin-bottom: 12px;
}

/* ═══════════════════════════════════════════════════════════
   CLIENTES · cuatro tarjetas que llenan la pantalla
   El ancho se calcula para que entren exactamente --n tarjetas
   en el ancho de la ventana. Como cada juego mide justo 100vw,
   el desplazamiento del 50% cae clavado y la que sale por la
   izquierda entra a la vez por la derecha, sin salto.
   Escritorio 4 · móvil 2.
   ═══════════════════════════════════════════════════════════ */

.cli-track { --n: 4; --gap: 16px; animation-duration: 46s; }
.cli-set   { gap: 0; padding-right: 0; }
.cli-card  {
  width: calc(100vw / var(--n) - var(--gap));
  margin-right: var(--gap);
  border-radius: 14px;
}
.cli-card figcaption { padding: 13px 15px 15px; }
.cli-card figcaption b { font-size: clamp(13.5px, 1.05vw, 15.5px); }
.cli-card figcaption span { font-size: clamp(11.5px, .9vw, 13px); }

@media (max-width: 820px) {
  .cli-track { --n: 2; --gap: 12px; animation-duration: 30s; }
}

/* ── El titular gigante del héroe ──────────────────────────
   Los cuerpos de arriba (12.9vw y 14.3vw) estaban medidos a ojo
   sobre Syne 800 para que "LA PRÓXIMA" y "JUGADA" llegaran justo
   a los bordes. Anton es bastante más estrecha, así que con esos
   valores las dos líneas se quedarían cortas.

   ⚠️ ESTOS DOS NÚMEROS HAY QUE AFINARLOS A OJO EN EL NAVEGADOR.
   Van deliberadamente algo por debajo: que sobre un poco de margen
   es feo, pero que el texto se salga de la pantalla es peor.
   Sube o baja de medio en medio hasta que ambas líneas terminen
   a la misma distancia del borde.

   La altura de línea también se recupera aquí: la regla general de
   Anton la había subido a .96 y el héroe necesita ir mucho más
   apretado. */
.mega-l { font-size: 17vw; line-height: .86; letter-spacing: -.005em; }
.mega-l:nth-of-type(2) { font-size: 19.4vw; }

/* En móvil el titular ya iba a sangre con más holgura */
@media (max-width: 640px) {
  .mega-l { font-size: 18.5vw; }
  .mega-l:nth-of-type(2) { font-size: 21vw; }
  .jr-copy { min-height: clamp(170px, 30vh, 220px); }
}

/* ═══════════════════════════════════════════════════════════
   ARREGLO DEFINITIVO DEL SOLAPE DEL RECORRIDO
   El problema de raíz no era la altura: era que los cinco textos
   van en posición absoluta dentro de .jr-copy, así que NO empujan
   a su contenedor y este necesitaba una altura adivinada a mano.
   Con cualquier tipografía o texto nuevo, volvía a romperse.

   Solución: apilarlos en la MISMA celda de una rejilla. Siguen
   superpuestos y el fundido cruzado funciona igual, pero ahora
   el contenedor crece solo hasta el más alto de los cinco.
   Nunca más hay que tocar un número.
   ═══════════════════════════════════════════════════════════ */
.jr-copy { display: grid; min-height: 0; }
.jr-c {
  position: static;
  grid-area: 1 / 1;
  align-self: start;
}
/* El de móvil también */
@media (max-width: 640px) { .jr-copy { min-height: 0; } }

/* ═══════════════════════════════════════════════════════════
   CARRUSEL DE CLIENTES · siempre en movimiento
   Había una regla que lo pausaba al pasar el ratón por encima.
   Como el cursor suele quedarse en mitad de la pantalla, parecía
   que no se movía nunca. Fuera: no para jamás.
   ═══════════════════════════════════════════════════════════ */
.cli-track { animation: cliSlide 46s linear infinite; }

/* ═══════════════════════════════════════════════════════════
   CARRUSEL DE CLIENTES · marco cuadrado, imagen entera
   Las tarjetas eran verticales 4:5 y las imágenes originales no
   lo son: la foto de Unionistas es apaisada (3:2) y el cartel del
   Torneo muy vertical (9:16). Con "cover" cada una perdía medio
   encuadre.

   Ahora el marco es CUADRADO y la imagen va con "contain": entra
   completa, sin recortar ni un píxel, y el hueco que sobra queda
   como fondo del marco. Además la tarjeta baja de altura (antes
   medía 1,25 veces su ancho; ahora mide lo mismo), así que pesa
   menos en pantalla aunque se vea más imagen.
   ═══════════════════════════════════════════════════════════ */

/* Cinco por pantalla en escritorio: tarjetas más pequeñas y se ven
   más proyectos de un vistazo. */
.cli-track { --n: 5; --gap: 14px; animation-duration: 52s; }

.cli-card img {
  aspect-ratio: 1 / 1;
  object-fit: contain;              /* nada se recorta */
  background: #0a0a0b;
  padding: 8px;
  filter: grayscale(.22);           /* menos apagado: la foto se lee mejor */
}
.cli-card:hover img { filter: none; }

@media (max-width: 1180px) { .cli-track { --n: 4; } }
@media (max-width: 900px)  { .cli-track { --n: 3; } }
@media (max-width: 620px)  { .cli-track { --n: 2; --gap: 10px; animation-duration: 34s; } }

/* ═══════════════════════════════════════════════════════════
   CARRUSEL DE CLIENTES · versión definitiva
   Intento anterior: marco cuadrado + object-fit:contain. Mal.
   Cada imagen quedaba flotando a un tamaño distinto dentro de un
   recuadro enorme, porque las cuatro tienen proporciones distintas.

   Ahora las imágenes YA vienen compuestas a 800x800 desde el
   servidor: la foto completa centrada sobre una versión desenfocada
   de sí misma. Todas idénticas de origen, así que el CSS solo tiene
   que ponerlas a un ancho fijo. Sin cálculos con vw, sin contain,
   sin recuadros.
   ═══════════════════════════════════════════════════════════ */

.cli-track { --gap: 14px; animation-duration: 48s; }
.cli-set   { display: flex; }

.cli-card {
  width: clamp(168px, 16vw, 224px);   /* ancho fijo: nada de 100vw/n */
  margin-right: var(--gap);
  flex-shrink: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--carbon-2);
  border: 1px solid rgba(255,255,255,.08);
}
.cli-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;      /* el archivo ya es cuadrado: no recorta nada */
  padding: 0;
  background: none;
  display: block;
  filter: grayscale(.18);
}
.cli-card:hover img { filter: none; }

.cli-card figcaption { padding: 11px 13px 13px; }
.cli-card figcaption b { font-size: 13px; line-height: 1.25; }
.cli-card figcaption span { font-size: 11.5px; }

@media (max-width: 620px) {
  .cli-card { width: 150px; }
  .cli-track { --gap: 10px; animation-duration: 32s; }
}