/* ═══════════════════════════════════════════════════════════════════════
   STRIKE v2 · sistema
   Papel técnico en negativo. Las secciones de LEER van en crema; las de
   VER (las figuras) van en teal, porque el lime no aguanta filete de 1px
   sobre crema pero sí sobre teal. Esa es la única regla que obliga a algo.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* 🔴 #f6f8f8 y NO #f4f1ea. El crema original era el mismo de Logan — y el
     mismo de la interfaz de Claude. Juan (CEO) abrió el sitio y preguntó «¿es a
     propósito que parezca de Claude?»; Denise: «el color de fondo es medio el
     color de Claude». Un blanco frío, con un pelo de la tinta, corta esa
     lectura de raíz y lee más «web» y menos «papel», que es el otro pedido.
     Todos los rgba(246,248,248,…) son este mismo color con alfa. */
  --papel:#f6f8f8; --tinta:#013342; --piedra:#6a8f9d; --lime:#c8f135;
  --papel-78:rgba(246,248,248,.78); --papel-52:rgba(246,248,248,.52);
  --papel-20:rgba(246,248,248,.20); --papel-06:rgba(246,248,248,.06);
  --tinta-78:rgba(1,51,66,.78); --tinta-58:rgba(1,51,66,.58); --tinta-18:rgba(1,51,66,.18);
  --caja:1120px; --lado:clamp(20px,5vw,80px); --aire:clamp(76px,9vw,124px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--tinta);color:var(--tinta);
  font-family:Montserrat,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
.caja{max-width:var(--caja);margin:0 auto}
/* bloque teal con la tipografía en lime: el lime no funciona como texto
   sobre crema, pero sobre teal es donde mejor se lee. */
.acento{background:var(--tinta);color:var(--lime);padding:0 .16em .04em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* el fondo de un inline se pinta sobre el alto de la fuente, no sobre el
   line-height: para que el bloque no toque la línea de arriba hay que darle
   aire al titular que lo contiene, no menos padding al resaltado. */
h2:has(.acento){line-height:1.2}
.sec--tinta .acento{background:var(--lime);color:var(--tinta)}

/* ─── escena de video (la de la v1: fondo fijo a pantalla completa) ───
   ⚠️ RETIRADA el 01/09 junto con el hero viejo. Se medió antes de sacarla:
   todas las secciones pintan fondo propio, así que el #escena sólo se veía
   en #top. Las reglas se van con ella; el motor sigue entero en escena.js y
   el <div> se repone desde build.py si alguna vez vuelve.
   `#sitio` SE QUEDA: además del z-index es el que hace de referencia para
   `position:absolute` si alguien se olvida de poner `position:relative` en
   una sección (ver la nota de las cintas, más abajo). */
#sitio{position:relative;z-index:2}

/* ─── nav ─── */
.nav{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:14px var(--lado);background:var(--tinta);
  border-bottom:1px solid var(--papel-20)}
/* ⚠️ La barra era translúcida con blur porque flotaba sobre el video de fondo
   a pantalla completa. Ese fondo ya no existe: sobre el crema de las secciones
   —y ahora también sobre el crema del hero— el teal al 42% quedaba lavado y
   con el texto crema al borde de la legibilidad. Maciza es una barra oscura
   sobre página clara, que es lo que hace la referencia con su barra amarilla. */
/* 36 y no 30: el logotipo solo aguantaba 30px, pero con el ojo adelante a
   esa altura la corona y el iris se empastan. A 36 el ojo se lee y la barra
   crece 6px. */
.nav__logo{height:36px;width:auto}
.nav__links{display:flex;align-items:center;gap:28px}
.nav__links a{font-size:14px;font-weight:700;color:var(--papel-78)}
.nav__links a:hover{color:var(--lime)}
.nav__links a.nav__cta{background:var(--lime);color:var(--tinta);font-size:13px;font-weight:900;
  letter-spacing:.04em;padding:11px 20px}
.nav__links a.nav__cta:hover{background:#d9f57a;color:var(--tinta)}
/* ── v3: en el home la barra es fija y arranca fuera de pantalla ──
   `.nav--fuera` la pone y la saca escena.js según scrollY contra el alto del
   hero. El estado por defecto (sin clase) es VISIBLE: si el JS no corre, la
   barra está. En las subpáginas (body.pagina-modulo) sigue sticky y siempre
   a la vista — allá no hay video que ensuciar. */
body:not(.pagina-modulo) .nav{position:fixed;left:0;right:0;transition:transform .38s cubic-bezier(.2,.7,.3,1)}
body:not(.pagina-modulo) .nav.nav--fuera{transform:translateY(-100%)}
@media (prefers-reduced-motion:reduce){body:not(.pagina-modulo) .nav{transition:none}}
@media (max-width:980px){
  body:not(.pagina-modulo) .nav{position:sticky}
  body:not(.pagina-modulo) .nav.nav--fuera{transform:none}
}

/* ─── hero ─── el bloque entero vive más abajo, con el resto de lo que le
   toca. Acá no queda nada a propósito: el hero viejo declaraba #top dos veces
   —una acá y otra en el bloque del campo de pantallas— y la de abajo pisaba a
   la de arriba. Una sola declaración, y en el orden correcto. */
/* ─── ritmo de secciones ─── */
.sec{padding:var(--aire) var(--lado)}
.sec--papel{background:var(--papel);color:var(--tinta)}
.sec--tinta{background:var(--tinta);color:var(--papel);
  background-image:radial-gradient(rgba(246,248,248,.13) 1px,transparent 1px);background-size:22px 22px}
.sec--tinta h2,.sec--tinta h3{color:var(--papel)}

.rotulo{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding-bottom:14px;border-bottom:1px solid var(--tinta-18)}
.sec--tinta .rotulo{border-bottom-color:var(--papel-20)}
.rotulo span{font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--piedra)}
.sec--tinta .rotulo span:first-child{color:var(--lime)}
.sec--tinta .rotulo span:last-child{color:var(--papel-52)}

h2{margin:34px 0 0;font-size:clamp(32px,4.4vw,56px);line-height:1.02;font-weight:900;
  letter-spacing:-.02em;text-transform:uppercase;text-wrap:balance}
.lead{margin:26px 0 0;font-size:clamp(18px,1.9vw,20px);line-height:1.6;font-weight:600;max-width:760px;color:var(--tinta-78)}
.sec--tinta .lead{color:var(--papel-78)}
.lead b{font-weight:900;color:var(--tinta)}
.sec--tinta .lead b{color:var(--papel)}

/* ─── la posición: termina en el pilar ─── */
.premisa{margin:0;font-size:clamp(18px,1.8vw,20px);line-height:1.55;font-weight:600;color:rgba(1,51,66,.68);max-width:820px}
.puente{margin:40px 0 0;font-size:17px;line-height:1.55;font-weight:600;color:var(--tinta-58);max-width:620px}
.pilar{margin:6px 0 0;line-height:.92}
.pilar span{display:inline-block;font-size:clamp(66px,11.5vw,166px);font-weight:900;
  text-transform:uppercase;letter-spacing:-.03em;padding-bottom:.06em;border-bottom:6px solid var(--lime)}

/* ─── figuras ─── */
.fig{margin:52px 0 0}
.fig-lienzo{padding:8px 0}
.fig-svg{width:100%;height:auto;display:block;overflow:visible}
.fig-pie{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--papel-20);
  /* 12px/500 y no 10px/400: el pie de figura era el texto más chico Y más
     apagado del sitio, y es el que EXPLICA la figura. Se subió junto con los
     rótulos de adentro del SVG (ver ESCALA/SUBE_OP/PESO en figuras.py); esto
     es CSS y no pasa por ese helper, así que la primera vuelta se lo saltó. */
  font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(246,248,248,.74)}
/* .60 y no .38: la mitad derecha lleva la nota al pie —lo que falta del
   cliente— y estaba prácticamente invisible. Se deja por debajo de la
   izquierda a propósito: es secundaria, pero tiene que poder leerse. */
.fig-pie-der{text-align:right;color:rgba(246,248,248,.60)}

/* ─── los cuatro filtros ─── */
.filtros{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:54px;
  border-top:1px solid var(--lime);padding-top:28px}
.filtro{padding:0 28px;border-left:1px solid var(--papel-20)}
.filtro:first-child{padding-left:0;border-left:0}
.filtro:last-child{padding-right:0}
.filtro__n{font-size:10px;letter-spacing:.2em;color:var(--lime)}
.filtro h3{margin:14px 0 0;font-size:clamp(20px,1.9vw,26px);line-height:1.02;font-weight:900;
  text-transform:uppercase;letter-spacing:-.01em}
.filtro p{margin:14px 0 0;font-size:16px;line-height:1.62;font-weight:600;color:var(--papel-78)}
.filtro b{font-weight:900;color:var(--papel)}

.cierre{margin-top:76px}
.cierre .barra{width:64px;height:3px;background:var(--lime);margin-bottom:26px}
.cierre p{margin:0;font-size:clamp(19px,2vw,23px);line-height:1.45;font-weight:600;max-width:820px}

/* ─── promesa: tres patas, cada una con su figura ─── */
.pata{border-top:1px solid var(--papel-20);padding-top:34px;margin-top:64px}
.pata:first-of-type{margin-top:48px}
.pata__cab{display:grid;grid-template-columns:320px 1fr;gap:56px;align-items:start}
.pata__cab h3{margin:0;font-size:clamp(26px,3vw,38px);line-height:1.02;font-weight:900;
  text-transform:uppercase;letter-spacing:-.02em}
.pata__puntos{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.pata__puntos li{position:relative;padding-left:20px;font-size:16.5px;line-height:1.6;font-weight:600;color:var(--papel-78)}
.pata__puntos li > i{position:absolute;left:0;top:10px;width:7px;height:7px;background:var(--lime);transform-origin:50% 50%}

/* ─── respiro: el video se ve entre secciones ─── */
.respiro{position:relative;min-height:88svh;display:flex;flex-direction:column;justify-content:center;
  gap:18px;padding:var(--aire) var(--lado);color:var(--papel)}
/* El rótulo, el titular y el texto van dentro de un div (lo necesita el
   revelado), así que el gap de arriba los separaba del div, no entre sí:
   los tres venían pegados en todos los anchos. El aire se pone acá. */
.respiro > div{display:flex;flex-direction:column;gap:18px}
.respiro-rot{margin:0;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--lime)}
.respiro-t{margin:0;max-width:18ch;font-size:clamp(30px,5.4vw,68px);font-weight:900;line-height:1.02;
  text-transform:uppercase;letter-spacing:-.02em;text-shadow:0 2px 24px rgba(1,37,48,.45)}
.respiro-p{margin:0;max-width:56ch;font-size:17px;line-height:1.6;font-weight:600;color:var(--papel-78);
  text-shadow:0 1px 14px rgba(1,37,48,.5)}

/* ─── módulos: la lista de ítems dentro de cada panel ─── */
.mod-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;margin-top:26px}
.mod-lista > div{background:var(--papel);padding:22px 20px;box-shadow:0 0 0 1px var(--tinta-18)}
.mod-lista h4{margin:0 0 10px;font-size:16px;font-weight:900;text-transform:uppercase;letter-spacing:.01em}
.mod-lista p{margin:0;font-size:15px;line-height:1.6;color:var(--tinta-78)}
.mod-aviso{margin-top:22px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#b06a2c}

/* ─── equipo ─── */
.equipo{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2px;margin-top:52px}
.equipo figure{margin:0;background:var(--papel-06);position:relative}
.equipo img{width:100%;aspect-ratio:1;object-fit:cover;filter:grayscale(1) contrast(1.06);opacity:.86;transition:opacity .35s,filter .35s}
.equipo figure:hover img{opacity:1;filter:grayscale(0)}
.equipo figcaption{padding:12px 12px 16px;font-size:13px;font-weight:900;letter-spacing:.01em}
.equipo .rol{display:block;margin-top:4px;font-size:9.5px;letter-spacing:.16em;color:var(--papel-52);font-weight:500}

/* ─── contacto ─── */
.form{display:flex;flex-direction:column;gap:20px;max-width:640px;margin-top:44px}
.control{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(1,51,66,.26);
  color:var(--tinta);font-family:inherit;font-size:17px;font-weight:600;padding:14px 0;transition:border-color .3s}
.control::placeholder{color:rgba(1,51,66,.45)}
/* si alguna vez el formulario va sobre teal, se da vuelta solo */
.sec--tinta .control{border-bottom-color:var(--papel-20);color:var(--papel)}
.sec--tinta .control::placeholder{color:rgba(246,248,248,.42)}
.control:focus{outline:0;border-bottom-color:var(--tinta)}
.sec--tinta .control:focus{border-bottom-color:var(--lime)}
textarea.control{resize:vertical;min-height:110px}
.enviar{align-self:flex-start;background:var(--lime);color:var(--tinta);border:0;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:900;letter-spacing:.06em;padding:15px 34px}
.enviar:hover{background:#d9f57a}
.form-aviso{margin:14px 0 0;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--tinta);min-height:1em}
.sec--tinta .form-aviso{color:var(--lime)}
.form-aviso[data-error]{color:#c0392b}
.sec--tinta .form-aviso[data-error]{color:#ff8a7a}

/* ─── pie ─── */
.pie{background:var(--tinta);color:var(--papel);padding:clamp(48px,6vw,72px) var(--lado) 40px;
  border-top:1px solid var(--papel-20)}
.pie__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:40px}
.pie__cols h4{margin:0 0 16px;font-size:10px;font-weight:500;letter-spacing:.18em;color:var(--lime);
  font-family:"IBM Plex Mono",ui-monospace,monospace}
.pie__cols li{list-style:none;font-size:15px;font-weight:600;color:var(--papel-78);margin-bottom:9px}
.pie__cols ul{margin:0;padding:0}
.pie__linea{margin-top:52px;padding-top:20px;border-top:1px solid var(--papel-20);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--papel-52)}

/* ═══════════════ animación de las figuras ═══════════════
   Un ciclo por figura. Todo se apaga con prefers-reduced-motion. */

/* FIG 01 · las pantallas se van descartando en cuatro olas */
.pant{transform-box:fill-box;transform-origin:center}
@keyframes desc1{0%,10%{opacity:1;transform:scale(1)}15%,88%{opacity:.14;transform:scale(.88)}95%,100%{opacity:1;transform:scale(1)}}
@keyframes desc2{0%,22%{opacity:1;transform:scale(1)}27%,88%{opacity:.14;transform:scale(.88)}95%,100%{opacity:1;transform:scale(1)}}
@keyframes desc3{0%,34%{opacity:1;transform:scale(1)}39%,88%{opacity:.14;transform:scale(.88)}95%,100%{opacity:1;transform:scale(1)}}
@keyframes desc4{0%,46%{opacity:1;transform:scale(1)}51%,88%{opacity:.14;transform:scale(.88)}95%,100%{opacity:1;transform:scale(1)}}
.pant.w1{animation:desc1 11s cubic-bezier(.22,.61,.36,1) infinite}
.pant.w2{animation:desc2 11s cubic-bezier(.22,.61,.36,1) infinite}
.pant.w3{animation:desc3 11s cubic-bezier(.22,.61,.36,1) infinite}
.pant.w4{animation:desc4 11s cubic-bezier(.22,.61,.36,1) infinite}
@keyframes vive{0%,55%{transform:scale(1)}64%,88%{transform:scale(1.18)}95%,100%{transform:scale(1)}}
@keyframes marco{0%,55%{opacity:0}64%,88%{opacity:1}95%,100%{opacity:0}}
.pant.viva{animation:vive 11s cubic-bezier(.22,.61,.36,1) infinite}
.pant.viva .fig-marco{opacity:0;animation:marco 11s ease infinite}
@keyframes prende{0%,8%{opacity:.22}13%,88%{opacity:1}95%,100%{opacity:.22}}
.gate{opacity:.22;animation:prende 11s ease infinite}
.gate.g2{animation-delay:1.3s}.gate.g3{animation-delay:2.6s}.gate.g4{animation-delay:3.9s}
.salida{opacity:.25;animation:prende 11s ease infinite;animation-delay:5.6s}

/* FIG 02 · la ficha se completa fila por fila y se sella */
@keyframes fila{0%,4%{opacity:0}10%,88%{opacity:1}95%,100%{opacity:0}}
.ficha-fila{opacity:0;animation:fila 9s ease infinite}
.ficha-fila.f2{animation-delay:.5s}.ficha-fila.f3{animation-delay:1s}
.ficha-fila.f4{animation-delay:1.5s}.ficha-fila.f5{animation-delay:2s}
@keyframes sello{0%,32%{opacity:0;transform:scale(.96)}38%,88%{opacity:1;transform:scale(1)}95%,100%{opacity:0;transform:scale(.96)}}
.ficha-sello{opacity:0;transform-box:fill-box;transform-origin:center;animation:sello 9s cubic-bezier(.22,.61,.36,1) infinite}

/* FIG 03 · el recorte cambia con el objetivo */
@keyframes objAct{0%,2%{opacity:.3}8%,30%{opacity:1}36%,100%{opacity:.3}}
.obj{opacity:.3;animation:objAct 12s ease infinite}
.obj.o2{animation-delay:4s}.obj.o3{animation-delay:8s}
@keyframes tileAct{0%,3%{fill:rgba(246,248,248,.06);stroke:rgba(246,248,248,.30)}
  9%,29%{fill:#c8f135;stroke:#c8f135}36%,100%{fill:rgba(246,248,248,.06);stroke:rgba(246,248,248,.30)}}
.tile.t0{animation:tileAct 12s ease infinite}
.tile.t1{animation:tileAct 12s ease infinite;animation-delay:4s}
.tile.t2{animation:tileAct 12s ease infinite;animation-delay:8s}

/* FIG 04 · la ruta cambia con cada campaña */
@keyframes rutaOn{0%,4%{stroke:rgba(246,248,248,.16);stroke-width:1}
  10%,44%{stroke:#c8f135;stroke-width:2}50%,100%{stroke:rgba(246,248,248,.16);stroke-width:1}}
.r001,.r112,.r220{animation:rutaOn 10s ease infinite}
.r020,.r100,.r202{animation:rutaOn 10s ease infinite;animation-delay:5s}
@keyframes nodoOn{0%,4%{stroke:rgba(246,248,248,.32)}10%,44%{stroke:#c8f135}50%,100%{stroke:rgba(246,248,248,.32)}}
.nodo.n00 rect,.nodo.n11 rect,.nodo.n22 rect,.nodo.n30 rect{animation:nodoOn 10s ease infinite}
.nodo.n02 rect,.nodo.n10 rect,.nodo.n20 rect,.nodo.n32 rect{animation:nodoOn 10s ease infinite;animation-delay:5s}

/* FIG 05 · los tres módulos entran al mismo núcleo */
@keyframes modOn{0%,6%{opacity:.4}12%,30%{opacity:1}36%,100%{opacity:.4}}
.modulo{opacity:.4;animation:modOn 9s ease infinite}
.modulo.m2{animation-delay:3s}.modulo.m3{animation-delay:6s}
@keyframes late{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.nucleo{transform-box:fill-box;transform-origin:center;animation:late 3s ease-in-out infinite}

/* FIG 06 · la cadena corre sola; el humano decide */
@keyframes mano{0%,100%{opacity:.72}50%{opacity:1}}
.paso.humano{transform-box:fill-box;transform-origin:center;animation:mano 2.4s ease-in-out infinite}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .pant,.gate,.salida,.ficha-fila,.ficha-sello,.obj,.tile,.nodo rect,
  .ruta,.modulo,.nucleo,.paso.humano{animation:none!important;opacity:1!important;transform:none!important}
  .pant.viva .fig-marco{opacity:1!important}
}

/* ─── responsive ─── */
@media (max-width:980px){
  .filtros{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 0}
  .filtro{padding:0 24px}
  .filtro:nth-child(odd){padding-left:0;border-left:0}
  .pata__cab{grid-template-columns:1fr;gap:24px}
}
@media (max-width:620px){
  .filtros{grid-template-columns:1fr;gap:30px}
  .filtro{padding:0;border-left:0}
  /* En el teléfono la barra se queda con la marca y el CTA. Los tres enlaces
     de sección se van (viven en el pie), pero el CTA NO: sin él, el único
     camino al formulario serían 13.000 px de scroll. */
  /* (02/09: los enlaces ya no se esconden acá; en angosto viven en el panel
     del menú hamburguesa — ver «la barra en el teléfono» al final) */
  /* El pilar tiene piso de 66px, y a 66px «CURACIÓN» mide 366px: más que la
     columna de cualquier teléfono. Con body{overflow-x:hidden} no aparecía
     scroll, se cortaba la N y nadie se enteraba. Acá manda el ancho. */
  .pilar span{font-size:min(14vw,66px)}
  /* Enlaces del pie: 18px de alto es la mitad de un dedo. El relleno va en el
     li —así las dos columnas quedan con el mismo ritmo, aunque PARTNERS no
     tenga enlaces— y el margen negativo del a lo anula para que el área
     tocable sea la fila entera y no sólo el texto. */
  .pie__cols li{margin-bottom:0;padding:13px 0}
  .pie__cols li a{display:block;margin:-13px 0;padding:13px 0}
  .fig-pie{flex-direction:column;gap:6px}
  .fig-pie-der{text-align:left}
}

/* ─── panel de figura dentro de una sección de lectura ─── */
.panel{background:var(--tinta);color:var(--papel);padding:clamp(26px,3.2vw,44px);margin-top:36px;
  background-image:radial-gradient(rgba(246,248,248,.13) 1px,transparent 1px);background-size:22px 22px}
.panel .fig{margin:0}
.panel .fig-pie{border-top-color:var(--papel-20);color:rgba(246,248,248,.74)}

/* la regla: es la conclusión de la figura, no un bloque aparte */
.regla{margin:36px 0 0;font-size:clamp(21px,2.4vw,30px);line-height:1.22;font-weight:800;
  letter-spacing:-.015em;color:var(--lime);max-width:820px}
.regla b{font-weight:900}


/* ═══════════════ hero: la pieza de video ═══════════════
   Referencia logan.ai, medida sobre la captura: bloque 16:9 a ancho de
   grilla, pegado abajo de la barra, y el titular debajo. Allá los márgenes
   laterales dan 6,6%; acá se usa --lado (5vw, tope 80px), que es la grilla
   que ya tiene el sitio. No vale la pena copiar 1,6 puntos de diferencia a
   costa de desalinear el hero del resto de la página.

   VA SOBRE PAPEL — decisión de Sergio el 01/09, sobre una primera versión
   que había salido sobre tinta.

   > El argumento de la tinta era que la pieza ABRE con el logotipo sobre
   > crema, exactamente el #f4f1ea de --papel: sobre claro el primer cuadro es
   > un logotipo sin marco y por medio segundo no se entiende que hay un
   > video. Sobre tinta el bloque se recortaba desde el cuadro 1. Sergio lo
   > escuchó y pidió claro igual: **no volver a "arreglarlo" por las
   > nuestras.** Si alguna vez molesta de verdad, se resuelve en la PIEZA
   > —abriendo con un cuadro que no sea crema—, no cambiándole el fondo a la
   > página.

   ⚠️ SIN `padding-bottom`, y no es un olvido: el hero se quedó sin titular
   —Sergio lo sacó— así que abajo del video no hay nada, y el aire hasta la
   sección 01 lo pone el `--aire` de `.sec`. Con padding propio se sumaban los
   dos y quedaban ~224 px de crema vacío entre el video y el rótulo.

   ⚠️ El fondo del hero es el MISMO --papel que la sección 01, que también es
   `sec--papel`: las dos se leen como una sola superficie continua, que es lo
   que hace la referencia. Por eso el fondo NO es #fff — un blanco puro contra
   el #f4f1ea de la sección de abajo dibuja una costura y se lee como un bug.

   ⚠️ El hero viejo (logotipo gigante + campo de pantallas en alambre +
   fondo a pantalla completa) salió entero el 01/09. `hero_campo()` sigue en
   figuras.py, marcada como retirada, por si vuelve. */
/* ── v3 (call del 01/09): «PANTALLA FULL DEL VIDEO». ──
   La v2 tenía la pieza EN CAJA a ancho de grilla, como Logan. En la call
   Denise pidió que lo primero que se vea sea sólo el video, sin barra, a
   pantalla completa; la barra aparece al scrollear. La caja queda anotada
   abajo por si se vuelve.

   En desktop: 100svh y `object-fit:cover` — la pieza es 16:9, así que a
   1440×900 recorta 80px por lado y nada más. La barra es `fixed` en el home y
   arranca escondida (clase `.nav--fuera`, la pone el JS: si el JS no corre,
   la barra se ve — regla 3).

   ⚠️ En el TELÉFONO NO va a 100svh: un 16:9 en 390×844 con cover deja visible
   sólo el tercio central y el logotipo de la pieza queda cortado. Abajo de
   980 (ANGOSTO) vuelve a ser 16:9 a ancho completo, con la barra visible. */
#top{position:relative;background:var(--tinta);padding:0;height:100svh;overflow:hidden}
.hero__pieza{width:100%;height:100%;margin:0;position:relative;background:#012530}
.hero__video{display:block;width:100%;height:100%;object-fit:cover}
/* la caja de la v2, por si vuelve: max-width:calc((100svh - 80px)*16/9);
   margin:0 auto; aspect-ratio:16/9; y #top con padding:0 var(--lado). */
@media (max-width:980px){
  #top{height:auto}
  .hero__pieza{aspect-ratio:16/9;height:auto}
}

/* 🔴 EL TITULAR DEL HERO NO SE VE, A PROPÓSITO. Sergio lo sacó el 01/09: el
   hero es la pieza y nada más. Pero el documento NO puede quedarse sin h1
   —sin él la página no tiene ningún encabezado arriba de los h2, y el HTML
   crudo sin contenido ya fue un P0 de la auditoría de la v1: SEO y previews
   de link vacíos—. Así que el h1 se queda y se esconde SÓLO de la vista.

   La técnica es la de siempre (clip + 1px), no `display:none` ni
   `visibility:hidden`: esas dos lo esconden también del lector de pantalla y
   entonces no serviría de nada tenerlo.

   ⚠️ Si alguna vez vuelve un titular visible, no reescribir esto: se le saca
   la clase y se le pone su propia regla. El texto sale de HERO["bajada"] en
   contenido.py y la verificación del build lo controla. */
.hero__oculto{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}



/* ═══════════════ estructura izquierda / derecha ═══════════════
   Título y texto de un lado, la figura del otro, alternando el lado entre
   secciones. Es la estructura de la referencia de Multilocal. */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(30px,4.5vw,72px);align-items:center;margin-top:40px}
.duo--rev .duo__texto{order:2}
.duo__texto > h2{margin-top:0}
.duo__texto > .lead{max-width:none}
.duo .panel{margin-top:0}
/* dentro de un duo la figura es más angosta, pero 9px era ilegible: 11 es el
   piso. Si en algún ancho el pie se parte feo, se acorta el texto, no la
   tipografía. */
.duo .fig-pie{font-size:11px;letter-spacing:.10em}

/* la promesa: cada pata es un duo, y el lado se alterna */
.pata{border-top:1px solid var(--tinta-18);padding-top:38px;margin-top:64px}
.pata:first-of-type{margin-top:44px}
.pata h3{margin:0;font-size:clamp(26px,3vw,40px);line-height:1.02;font-weight:900;
  text-transform:uppercase;letter-spacing:-.02em;color:var(--tinta)}
.pata__puntos{margin:24px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:13px}
.pata__puntos li{position:relative;padding-left:20px;font-size:16.5px;line-height:1.6;
  font-weight:600;color:var(--tinta-78)}
.pata__puntos li > i{position:absolute;left:0;top:10px;width:7px;height:7px;background:var(--lime);transform-origin:50% 50%}

@media (max-width:980px){
  .duo{grid-template-columns:1fr;gap:32px}
  .duo--rev .duo__texto{order:0}
}

/* ═══════════════ botón del explainer ═══════════════
   ⚠️ RETIRADO del build el 01/09: el video del hero ES el explainer. Estas
   reglas y las del reproductor de abajo quedan enteras y calibradas —igual
   que las ramas viejas del revelado— porque no las aplica nada: ni
   `.hero__play` ni `.expl*` se emiten. Si STRIKE hace una pieza distinta, se
   repone el <dialog> en build.py y el estilo ya está.
   ⚠️ El `@media` de la cruz vive al FINAL del archivo, no acá: la regla base
   de `.expl__cerrar` está después de los bloques responsive de arriba y con
   la misma especificidad gana la última. No moverlo. */
.hero__play{display:inline-flex;align-items:center;gap:11px;margin-top:34px;cursor:pointer;
  background:transparent;border:1.5px solid rgba(246,248,248,.55);color:var(--papel);
  font-family:inherit;font-size:14px;font-weight:900;letter-spacing:.03em;padding:14px 26px;
  transition:background .3s,color .3s,border-color .3s}
.hero__play svg{color:var(--lime);transition:color .3s}
.hero__play:hover{background:var(--lime);border-color:var(--lime);color:var(--tinta)}
.hero__play:hover svg{color:var(--tinta)}
.hero__play:focus-visible{outline:2px solid var(--lime);outline-offset:3px}

/* ═══════════════ el reproductor ═══════════════ */
.expl{border:0;padding:0;background:transparent;max-width:min(1120px,92vw);width:100%}
.expl::backdrop{background:rgba(1,37,48,.86);backdrop-filter:blur(6px)}
.expl__caja{background:var(--tinta);color:var(--papel);padding:clamp(22px,3vw,38px);
  background-image:radial-gradient(rgba(246,248,248,.13) 1px,transparent 1px);background-size:22px 22px;
  border:1px solid var(--papel-20)}
.expl__cab{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-bottom:12px;border-bottom:1px solid var(--papel-20)}
.expl__rot{font-size:10px;letter-spacing:.18em;color:var(--lime)}
.expl__cerrar{background:none;border:0;color:var(--papel-52);cursor:pointer;padding:4px;
  display:flex;transition:color .25s}
.expl__cerrar:hover{color:var(--lime)}
/* Va acá abajo y no en el bloque responsive de arriba: la regla base declara
   su propio padding y, al estar después en el archivo, le ganaba al del
   media query. En el teléfono la cruz pasa a 44px; el margen negativo se
   come el relleno extra para que la cabecera no crezca. */
@media (max-width:620px){
  .expl__cerrar{padding:14px;margin:-14px -14px -14px 0}
}
.expl__t{margin:22px 0 24px;font-size:clamp(24px,3vw,40px);line-height:1.02;font-weight:900;
  text-transform:uppercase;letter-spacing:-.02em;color:var(--papel)}
.expl__marco{aspect-ratio:16/9;background:rgba(246,248,248,.04);border:1px solid var(--papel-20)}
.expl__video{width:100%;height:100%;display:block;object-fit:contain;background:#012530}
.expl__hueco{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;text-align:center;padding:clamp(20px,4vw,48px);
  background:repeating-linear-gradient(45deg,transparent 0 5px,rgba(246,248,248,.045) 5px 7px)}
.expl__hueco-marca{font-size:11px;letter-spacing:.24em;color:var(--lime);
  border:1px solid var(--lime);padding:8px 14px}
.expl__hueco-txt{margin:0;max-width:58ch;font-size:15.5px;line-height:1.65;font-weight:600;color:var(--papel-78)}

/* ═══════════════ módulos en el home: una fila por módulo ═══════════════ */
.mfilas{margin-top:56px;border-top:1px solid var(--tinta-18)}
.mfila{display:grid;align-items:center;padding:44px 0;border-bottom:1px solid var(--tinta-18);
  color:inherit;transition:padding .35s cubic-bezier(.22,.61,.36,1)}
.mfila:hover{padding-left:16px;padding-right:16px}
.mfila:focus-visible{outline:2px solid var(--tinta);outline-offset:-2px}
.mfila__n{font-size:10px;letter-spacing:.2em;color:var(--piedra)}
.mfila h3{margin:14px 0 0;font-size:clamp(26px,3.2vw,42px);line-height:1.0;font-weight:900;
  text-transform:uppercase;letter-spacing:-.02em;color:var(--tinta)}
.mfila p{margin:16px 0 0;font-size:16.5px;line-height:1.6;font-weight:600;color:var(--tinta-78);max-width:46ch}
.mfila__ver{display:inline-flex;align-items:center;gap:9px;margin-top:26px;
  font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta)}
.flecha{display:inline-block;transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.mfila:hover .flecha{transform:translateX(6px)}
.mfila:hover .mfila__ver{color:var(--piedra)}

/* ═══════════════ páginas de módulo ═══════════════ */
.pagina-modulo{background:var(--papel)}
.mhero{padding-top:clamp(56px,7vw,96px)}
.mhero__t{margin:32px 0 0;font-size:clamp(40px,7vw,96px);line-height:.96;font-weight:900;
  text-transform:uppercase;letter-spacing:-.03em;color:var(--papel)}
.mhero .lead{margin-top:26px;max-width:640px}
.mhero .fig{margin-top:52px}
.mbloque__txt{margin-top:20px}
.mbloque__txt p{margin:0 0 15px;font-size:17px;line-height:1.68;font-weight:600;max-width:68ch;color:var(--tinta-78)}
.sec--tinta .mbloque__txt p{color:var(--papel-78)}
.sec--tinta .mod-lista > div{background:rgba(246,248,248,.05);box-shadow:0 0 0 1px var(--papel-20)}
.sec--tinta .mod-lista h4{color:var(--papel)}
.sec--tinta .mod-lista p{color:var(--papel-78)}

.mcierre .motros{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;margin-top:38px}
.motro{display:flex;flex-direction:column;gap:12px;padding:30px 26px;color:var(--papel);
  background:rgba(246,248,248,.05);box-shadow:0 0 0 1px var(--papel-20);transition:background .3s}
.motro:hover{background:var(--lime);color:var(--tinta)}
.motro .mono{font-size:10px;letter-spacing:.2em;color:var(--lime)}
.motro:hover .mono{color:rgba(1,51,66,.62)}
.motro__t{font-size:clamp(20px,2.2vw,28px);font-weight:900;text-transform:uppercase;letter-spacing:-.015em;line-height:1}
.mcierre__cta{margin-top:64px;padding-top:34px;border-top:1px solid var(--lime)}
.mcierre__cta h2{margin:0 0 28px;color:var(--papel)}
.mcierre__cta .enviar{display:inline-block;text-decoration:none}

@media (max-width:980px){
  .mfila{padding:34px 0}
  .mcierre .motros{grid-template-columns:1fr}
}

/* El titular de módulo tenía piso de 40px en su clamp(), y a 40px
   «Plataformas» —once letras, una sola palabra que no se puede cortar— mide
   315px contra una columna de 265. Con body{overflow-x:hidden} no aparecía
   scroll: la página desbordaba 50px y no se notaba. Es el MISMO bug que
   «CURACIÓN» (ver .pilar span) y se arregla igual: abajo de cierto ancho
   manda la columna, no el piso.

   De dónde sale el 10.5vw: medido, PLATAFORMAS mide 7,88 × el font-size, y
   la columna es el ancho de pantalla menos 40px de aire. A 320px entra en
   35,5px, o sea 11,1vw; se deja 10,5 para tener margen. Arriba de ~381px el
   min() elige los 40px y esta regla no hace nada.

   Si algún día un módulo se llama con una palabra más larga que
   «Plataformas», hay que volver a medir.

   ⚠️ VA AL FINAL DEL ARCHIVO A PROPÓSITO. El bloque responsive de arriba
   está ANTES que la regla base de .mhero__t, y con la misma especificidad
   gana la última: puesto arriba, esto no haría nada. Es la misma trampa que
   ya obligó a bajar la cruz del explainer. */
@media (max-width:620px){
  .mhero__t{font-size:min(10.5vw,40px)}
}

/* ═══════════════ v3 (01/09): LA HOME LIMPIA ═══════════════
   Lo que entró con la limpieza de la home pedida en la call. Va ANTES del
   bloque .rv y DESPUÉS de todos los @media de arriba, a propósito (regla 7:
   con la misma especificidad gana la última). */

/* el título con su línea de apoyo APILADOS, no en dos columnas */
/* sin tope de medida: Sergio, con captura, «que llegue bien hasta el margen
   derecho donde está la palabra ACTIVAR del título, porque se cortan antes y
   pasan de renglón sin sentido». Misma regla que en las subpáginas (10 quinquies). */
/* centrada bajo el título, con el título también centrado: es la cabecera de
   la banda oscura de abajo y se lee como una presentación, no como un párrafo.
   (Sergio: «capaz queda mejor centrado»). */
.lead--apilada{margin:22px auto 0;max-width:66ch;text-align:center;text-wrap:balance}   /* 66ch = dos renglones parejos (Sergio) */
#mecanismo > .caja:first-child h2{text-align:center;margin-left:auto;margin-right:auto}

/* el enlace «Ver cómo curamos →» que lleva a curacion.html */
.ver{display:inline-flex;align-items:center;gap:10px;margin-top:38px;
  font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lime);text-decoration:none}
.ver .flecha{display:inline-block;transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.ver:hover .flecha{transform:translateX(6px)}
.ver--tinta{color:var(--tinta)}
.ver:focus-visible{outline:2px solid var(--lime);outline-offset:3px}

/* ── los tres factores en un bloque ──
   La palabra, la figura, y el texto plegado que se abre con hover, foco o tap.
   `.factor--abierto` la pone escena.js en el táctil. Sin JS: hover y foco
   siguen funcionando, y el texto completo está en curacion.html. */
.factores{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:44px;align-items:start}
.factor{position:relative;cursor:pointer;outline:none}
.factor__t{margin:0 0 16px;font-size:clamp(24px,2.6vw,34px);line-height:1;font-weight:900;
  text-transform:uppercase;letter-spacing:-.02em;color:var(--tinta);
  display:flex;align-items:baseline;gap:12px}
/* la señal de que hay más: un cuadradito lime que gira al abrir */
.factor__t::after{content:"";width:9px;height:9px;background:var(--lime);flex:none;
  transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.factor:hover .factor__t::after,.factor:focus-within .factor__t::after,.factor--abierto .factor__t::after{transform:rotate(45deg)}
.factor__fig.panel{margin-top:0}
.factor__txt{max-height:0;overflow:hidden;opacity:0;
  transition:max-height .5s cubic-bezier(.2,.7,.3,1),opacity .35s ease,margin-top .5s}
.factor:hover .factor__txt,.factor:focus-within .factor__txt,.factor--abierto .factor__txt{max-height:520px;opacity:1;margin-top:18px}
.factor__lista{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.factor__lista li{position:relative;padding-left:18px;font-size:15px;line-height:1.55;font-weight:600;color:var(--tinta-78)}
.factor__lista li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;background:var(--lime)}
.factor:focus-visible{outline:2px solid var(--lime);outline-offset:6px}
/* a un tercio de ancho el pie de figura no tiene lugar para las dos mitades:
   la nota de la derecha (lo que falta del cliente) se esconde acá y sigue a
   la vista en curacion.html, donde la figura tiene su ancho entero. */
.factor .fig-pie{flex-direction:column;gap:6px;align-items:flex-start}
.factor .fig-pie-der{text-align:left}
@media (prefers-reduced-motion:reduce){.factor__txt,.factor__t::after{transition:none}}
@media (max-width:980px){
  .factores{grid-template-columns:1fr;gap:40px}
}

/* ── la frase que corre (la premisa de POSICIÓN) ──
   Misma mecánica que la cinta de Agency: pista de dos mitades idénticas y
   `desfile` desplaza el 50%, así el ciclo cierra sin salto. A 56 px/s la cinta
   lee bien con 9px; acá la letra es 20px y la frase larga, así que va más
   lento —la duración se calcula sobre el ancho real en escena.js para que la
   velocidad sea la misma en cualquier pantalla—. Sin filete: es texto, no
   separación. `overflow:hidden` en la sección lo recorta al ancho. */
#posicion{overflow:hidden}
/* pegada al borde de arriba de la sección —o sea al borde de abajo del
   video—: el margen negativo anula el `--aire` del .sec, así la frase es una
   banda entre el hero y el contenido, como un ticker, y no un párrafo más con
   aire arriba. Sin línea arriba: la de arriba la pone el corte del video. */
.frase{width:100%;overflow:hidden;margin:calc(-1 * var(--aire)) 0 clamp(36px,5vw,60px);
  padding:16px 0;border-bottom:1px solid var(--tinta-18)}
.frase__pista{display:flex;width:max-content;will-change:transform;
  animation:desfile 60s linear infinite}
.frase__pista span{white-space:nowrap;font-size:clamp(17px,1.7vw,21px);font-weight:600;
  line-height:1.3;color:rgba(1,51,66,.72);letter-spacing:.01em}
@media (prefers-reduced-motion:reduce){.frase__pista{animation:none}}

/* ═══════════════ v3 · ROMPER EL DISEÑO (01/09, noche) ═══════════════
   Sergio: «la intención es buena, pero tenés que mejorar cosas de diseño, y
   agregarle más interactividad, animaciones. Rompé el diseño, descontractu-
   ralo, no quieren nada editorial». Sacar los rótulos no alcanzaba: el
   esqueleto seguía siendo dos columnas dentro de una caja. La idea que se
   aplica en todo el home es UNA: nada queda en su columna.

   ── 1 · bordes rasgados entre secciones ──
   Logan corta sus bandas con un borde irregular (la barra amarilla, la banda
   rosa). Acá cada sección tinta se recorta con un polígono en px arriba y
   abajo y se monta 22px sobre la de al lado, así el crema asoma por las
   muescas. Es lo que más cambia la sensación de «bloques de revista». Agency
   no lo lleva: tiene sus cintas, que ahora van torcidas. */
.sec--tinta:not(.sec--unidad):not(.mhero):not(.mcierre){
  clip-path:polygon(0 18px,9% 3px,21% 21px,34% 6px,47% 19px,61% 2px,74% 17px,88% 5px,100% 14px,
                    100% calc(100% - 15px),91% 100%,78% calc(100% - 19px),63% calc(100% - 4px),
                    49% calc(100% - 20px),35% calc(100% - 7px),22% calc(100% - 18px),10% calc(100% - 3px),0 calc(100% - 16px));
  margin:-22px 0;padding-top:calc(var(--aire) + 22px);padding-bottom:calc(var(--aire) + 22px);position:relative;z-index:1}

/* ── 2 · POSICIÓN: el título gigante y el panel montado encima ──
   La frase de la casa a 120px, a todo el ancho. El panel de la FIG. 00 se
   sube sobre la última línea del título, corrido a la derecha; el puente
   queda chico a la izquierda. Se lee como un afiche, no como una página. */
.pos{position:relative;padding-bottom:clamp(28px,3vw,44px)}
.pos__t{margin:0}
/* ── el escenario de CURACIÓN ──
   Banda tinta a sangre (márgenes negativos, sin 100vw). Adentro: el canvas
   con el inventario a la deriva, la palabra en texto real, el barrido, y una
   pista chica de qué hacer. La sección sigue siendo crema: la banda oscura
   entre el texto claro de arriba y el mecanismo oscuro de abajo le da al home
   el ritmo claro-oscuro-claro-oscuro. */
#posicion{padding-bottom:0}
.cura{position:relative;overflow:hidden;background:var(--tinta);color:var(--papel);
  margin:0 calc(-1 * var(--lado));height:clamp(420px,78vh,760px);
  background-image:radial-gradient(rgba(246,248,248,.13) 1px,transparent 1px);background-size:22px 22px;
  cursor:crosshair}
.cura__lienzo{position:absolute;inset:0;width:100%;height:100%;display:block}
.cura__palabra{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(10px,1.6vw,22px);pointer-events:none;padding:0 var(--lado)}
/* la línea que presenta a la palabra. Nace visible; con JS arranca apagada
   (.cura--js) y .cura--previa la prende justo antes del barrido. */
.cura__previa{margin:0;font-size:clamp(15px,1.7vw,23px);line-height:1.3;font-weight:600;color:var(--papel-78);
  text-align:center;max-width:44ch;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.cura--js .cura__previa{opacity:0;transform:translateY(10px)}
.cura--js.cura--previa .cura__previa{opacity:1;transform:none}
.cura .cur{margin:0}
/* la tesis, en negrita dentro de la frase que corre */
.frase__pista span b{color:var(--tinta);font-weight:800}
.cura .cur{background:transparent;padding:0;font-size:clamp(60px,16vw,250px);letter-spacing:-.05em;line-height:1;
  color:var(--lime);text-shadow:0 0 40px rgba(200,241,53,.28);pointer-events:auto;user-select:none;
  transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.cura .cur .l{display:inline-block;transition:transform .45s cubic-bezier(.2,.7,.3,1),opacity .45s;
  will-change:transform}
/* las letras arrancan apagadas SÓLO cuando el JS está (cura--js); .on las
   prende una por una al paso del barrido */
.cura--js .cur .l{opacity:0;transform:translateY(.18em) scale(.92)}
.cura--js .cur .l.on{opacity:1;transform:none}
.cura__barrido{position:absolute;top:0;bottom:0;width:2px;left:-2%;pointer-events:none;opacity:0;
  background:var(--lime);box-shadow:0 0 18px 4px rgba(200,241,53,.55),0 0 80px 20px rgba(200,241,53,.18)}
.cura__pista{position:absolute;right:clamp(16px,2vw,32px);bottom:clamp(14px,2vw,26px);margin:0;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--papel-52);opacity:0;transition:opacity .8s}
.cura--lista .cura__pista{opacity:1}
@media (pointer:coarse){.cura__pista{display:none}.cura{cursor:default}}
@media (max-width:980px){.cura{height:clamp(300px,52vh,460px)}}
@media (prefers-reduced-motion:reduce){.cura .cur .l,.cura .cur{transition:none}}
.pos__puente{margin:26px 0 0;font-size:clamp(20px,2.2vw,28px);line-height:1.3;font-weight:600;color:var(--tinta-78);max-width:34ch}
/* la palabra: lo más grande del sitio. Lime sobre tinta, como el resaltado
   del sitio pero a escala de afiche. Las letras son <span class="l"> que
   pone escena.js y entran de a una (paso 55 ms). Sin JS es texto plano. */
.pos__cur{margin-top:clamp(18px,2.4vw,34px);position:relative;z-index:2}
/* nowrap es obligatorio: las letras son spans inline-block y sin esto la
   palabra se parte «CURACIÓ / N» en cuanto no entra. El tamaño está medido
   para que a 1440 la palabra ocupe ~85% de la caja (5,3 em de ancho). */
.cur{display:inline-block;white-space:nowrap;max-width:100%;background:var(--tinta);color:var(--lime);
  font-size:clamp(64px,12.4vw,180px);line-height:.9;font-weight:900;text-transform:uppercase;
  letter-spacing:-.045em;padding:.06em .14em .1em .12em}
.cur .l{display:inline-block}
.pos__bajo{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:0}
/* el solape es el padding del panel y nada más: así los dos bloques tinta se
   funden en una forma pero el primer rótulo de la figura («LA VÍA HABITUAL»)
   queda a la vista justo debajo de la palabra. Con -72 quedaba tapado. */
.pos__bajo .pos__panel{grid-column:2;margin-top:clamp(-44px,-3vw,-24px)}
@media (max-width:980px){
  .cur{font-size:clamp(52px,15vw,96px)}
  .pos__bajo{grid-template-columns:1fr}
  .pos__bajo .pos__panel{grid-column:1;margin-top:28px}
}

/* ── 3 · MECANISMO: la figura a sangre y la regla que corre ──
   `.sangre` saca al hijo de la caja: ancho de ventana, centrado. La figura
   de las pantallas es el escenario del sitio; en una caja de 1120 era un
   cuadro más. `.regla--corre` es la misma pista de dos mitades de la premisa,
   en lime y grande, de izquierda a derecha. */
/* ⚠️ sin `100vw`: con barra de scroll vertical, 100vw es 15px más ancho que
   la ventana y aparece scroll horizontal (medido: +11px). El .sangre es hijo
   directo del .sec, así que anular el padding lateral del .sec es exactamente
   el ancho de la ventana, sin unidades de viewport. */
.sangre{margin:0 calc(-1 * var(--lado));padding:0 var(--lado)}
/* la franja oscura a sangre dentro de una sección crema (mecanismo): la
   FIG. 01 y la regla que corre. Mismo borde rasgado que las secciones tinta. */
.banda{margin:clamp(40px,5vw,64px) calc(-1 * var(--lado)) 0;padding:clamp(48px,6vw,84px) var(--lado) clamp(56px,6vw,88px);
  background:var(--tinta);color:var(--papel);position:relative;
  background-image:radial-gradient(rgba(246,248,248,.13) 1px,transparent 1px);background-size:22px 22px;
  clip-path:polygon(0 18px,9% 3px,21% 21px,34% 6px,47% 19px,61% 2px,74% 17px,88% 5px,100% 14px,
                    100% calc(100% - 15px),91% 100%,78% calc(100% - 19px),63% calc(100% - 4px),
                    49% calc(100% - 20px),35% calc(100% - 7px),22% calc(100% - 18px),10% calc(100% - 3px),0 calc(100% - 16px))}
.banda .sangre{margin-top:0}
.banda .fig{margin-top:0}
.sangre .fig{max-width:1600px;margin-left:auto;margin-right:auto}
.regla--corre{margin:clamp(40px,5vw,64px) calc(-1 * var(--lado)) 0;overflow:hidden;
  padding:14px 0;border-top:1px solid var(--papel-20);border-bottom:1px solid var(--papel-20);
  max-width:none;font-size:inherit;line-height:inherit}
.regla__pista{display:flex;width:max-content;will-change:transform;animation:desfile 40s linear infinite}
.regla__pista span{white-space:nowrap;color:var(--lime);font-size:clamp(24px,3.2vw,44px);
  font-weight:800;letter-spacing:-.015em;line-height:1.15}
.regla__pista span b{font-weight:900}
@media (prefers-reduced-motion:reduce){.regla__pista{animation:none}}

/* ── 4 · los factores: tres paneles IGUALES, alineados ──
   Sergio, con captura: «deberían ser los 3 alineados del mismo tamaño». Los
   tres SVG tienen viewBox distintos y el pie distinta longitud, así que el
   alto no puede salir del contenido: el panel lleva relación de aspecto fija,
   la figura se centra adentro y el pie queda abajo. Mismo ancho de columna +
   misma relación = mismo tamaño, pase lo que pase con el dibujo. */
.factor .panel{aspect-ratio:1/.96;display:flex;flex-direction:column;
  transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s}
.factor .panel .fig{flex:1;display:flex;flex-direction:column;margin-top:0;min-height:0}
.factor .panel .fig-lienzo{flex:1;display:flex;align-items:center;min-height:0}
.factor .panel .fig-lienzo svg{width:100%;height:auto;max-height:100%}
.factor .panel .fig-pie{min-height:48px;align-items:flex-start}
/* interactividad: al pasar, el panel se levanta y se inclina hacia el cursor
   (la inclinación la pone escena.js con --rx/--ry; sin JS sólo se levanta) */
.pos__panel,.unidad__panel,.factor .panel{transform:translateY(var(--py,0px))}
.factor:hover .panel,.factor:focus-within .panel,.factor--abierto .panel{
  transform:translateY(calc(var(--py,0px) - 8px)) perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  box-shadow:0 26px 60px -24px rgba(1,37,48,.55)}
@media (prefers-reduced-motion:reduce){.factor .panel{transition:none}.factor:hover .panel{transform:none}}

/* ── 5 · Agency: las cintas torcidas, cruzando los bordes ──
   Una cinta recta es un filete; torcida 1,4° y sobresaliendo por los lados
   es una etiqueta pegada a mano. Cruza al crema de al lado a propósito. */
/* clip-path inset con valores negativos arriba/abajo: la sección deja
   sobresalir las cintas 40px por los bordes de arriba y abajo (que es el
   gesto) pero las recorta EXACTO a los lados — sin esto la cinta torcida y
   ensanchada asomaba 21px por la derecha y daba scroll horizontal. */
.sec--unidad{clip-path:inset(-40px 0)}
.cinta--arriba{left:-3%;right:-3%;transform:rotate(-1.4deg);transform-origin:50% 50%;z-index:2}
.cinta--abajo{left:-3%;right:-3%;transform:rotate(1.2deg);transform-origin:50% 50%;z-index:2}

/* ── 6 · Equipo: la grilla deja de ser perfecta ──
   Las columnas pares bajan 18px: mismas fotos, misma grilla, pero ya no es
   una planilla. Al pasar, la foto sube y toma color (eso ya estaba). */
.equipo figure{transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.equipo figure:nth-child(even){transform:translateY(18px)}
.equipo figure:hover{transform:translateY(-6px);z-index:1}
.equipo figure:nth-child(even):hover{transform:translateY(12px)}
@media (max-width:980px){.equipo figure:nth-child(even){transform:none}}
/* ⚠️ El escalón es un transform: NO reacomoda la grilla. La tarjeta par se
   mete 18px en la celda de abajo y la de abajo, posterior en el DOM, pinta
   encima: con un rol de dos líneas («Country Manager Uruguay»), la segunda
   línea quedaba tocando la foto siguiente sin aire (Sergio, 02/09: «Thiago
   está tapando el Uruguay de Alejandro»). 16px más de pie sólo en desktop:
   el texto par queda a 16px de la tarjeta de abajo, la grilla no se toca. */
@media (min-width:981px){.equipo figcaption{padding-bottom:32px}}

/* ── 7 · las palabras del título entran de a una ──
   escena.js parte los h2 del home en <span class="w"> y los marca con paso:
   «que ese título aparezca de alguna manera» — de a palabra, no en bloque.
   Sin JS no hay spans y el h2 es texto plano. */
.w{display:inline-block;white-space:pre}

/* ── 8 · el hero respira: zoom al entrar, se apaga al scrollear ──
   El video entra desde 1.06 a 1 en 4 s (CSS pura, termina en su estado
   normal: sin JS no pasa nada raro). Al scrollear, escena.js baja su opacidad
   con --hero-op y el crema de la frase lo va tapando. Abajo, una flecha que
   late: la señal de que hay más. */
.hero__video{animation:heroEntra 4s cubic-bezier(.2,.7,.3,1) both;opacity:var(--hero-op,1)}
@keyframes heroEntra{from{transform:scale(1.06)}to{transform:scale(1)}}
.hero__cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;
  width:34px;height:34px;border:1.5px solid rgba(246,248,248,.55);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--papel);
  animation:cueLate 2.2s ease-in-out infinite;pointer-events:none}
.hero__cue svg{width:14px;height:14px}
@keyframes cueLate{0%,100%{transform:translate(-50%,0);opacity:.85}50%{transform:translate(-50%,8px);opacity:1}}
@media (max-width:980px){.hero__cue{display:none}}

/* ── 9 · barra de progreso de lectura ──
   2px de lime, fija arriba de todo. escena.js le pone --progreso. */
.progreso{position:fixed;left:0;top:0;height:3px;width:100%;z-index:60;pointer-events:none;
  background:var(--lime);transform:scaleX(var(--progreso,0));transform-origin:0 50%}

/* ── 10 · spotlight en las secciones oscuras ──
   Un halo lime muy tenue que sigue al cursor sobre el patrón de puntos:
   la sección responde. --mx/--my las pone escena.js; sin JS no hay halo. */
.sec--tinta{position:relative}
.sec--tinta::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(200,241,53,.085),transparent 60%);
  opacity:0;transition:opacity .5s}
.sec--tinta:hover::before{opacity:1}
.sec--tinta > *{position:relative}

/* ── 11 · (las bandas se pausaban al pasar el cursor «para leerlas». STRIKE,
   03/09: «todos los textos que se están desplazando, cuando le ponés el
   cursor encima dejan de hacerlo» — Sergio: que sigan. Ninguna se pausa.) */

/* ── 12 · el botón Hablemos es magnético (escena.js pone --bx/--by) ── */
/* (el Hablemos magnético salió el 02/09: Sergio, «lo que se corre el botón
   cuando me posiciono ahí no me gusta») */

/* ── 13 · las fotos del equipo también se inclinan hacia el cursor ── */
.equipo figure{transform-style:preserve-3d}
.equipo figure:hover{transform:translateY(-6px) perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.equipo figure:nth-child(even):hover{transform:translateY(12px) perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}

/* ── 14 · TODAS las figuras responden (Sergio: «mejorá las animaciones de
   todos los otros gráficos, y al que creas hacelo interactivo») ──
   · Al pasar el cursor por un panel, la figura se VUELVE A DIBUJAR trazo por
     trazo (escena.js llama dibujarFigura de nuevo, con un respiro de 2,5 s).
   · Los paneles se inclinan hacia el cursor como los factores.
   · El spotlight lime también vive dentro de los paneles y la banda.
   · FIG. 01: cada pantalla se ENCIENDE al pasar por encima — curás vos. */
.panel{transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s;position:relative;overflow:hidden}
.panel:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px);
  box-shadow:0 26px 60px -24px rgba(1,37,48,.5)}
.panel::before,.banda::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(200,241,53,.10),transparent 62%);
  opacity:0;transition:opacity .5s}
.panel:hover::before,.banda:hover::before{opacity:1}
.panel > *,.banda > *{position:relative;z-index:1}
.fig-svg .pant{cursor:pointer;transition:filter .25s}
.fig-svg .pant:hover rect{stroke:var(--lime) !important;fill:rgba(200,241,53,.18) !important;transition:stroke .2s,fill .2s}
.fig-svg .pant:hover text{fill:var(--lime) !important}
@media (prefers-reduced-motion:reduce){.panel{transition:none}.panel:hover{transform:none}}
@media (pointer:coarse){.panel:hover{transform:none}}

/* ── 15 · las subpáginas, con el mismo tratamiento ──
   El h1 grande y sin rótulo encima; la figura de portada en una banda a
   sangre; las tarjetas de lista se levantan al pasar. Los bordes rasgados,
   el spotlight y las palabras de a una ya les llegan por las reglas de arriba. */
.pagina-modulo .mhero .rotulo{display:none}
.pagina-modulo .mhero__t{font-size:clamp(48px,9vw,132px);letter-spacing:-.035em;line-height:.9}
.pagina-modulo .mhero .lead{font-size:clamp(19px,2vw,24px);max-width:none;margin-top:30px}
.pagina-modulo .mhero .fig{margin:clamp(40px,5vw,64px) calc(-1 * var(--lado)) 0;padding:0 var(--lado)}
.mod-lista > div{transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s}
.mod-lista > div:hover{transform:translateY(-6px);box-shadow:0 0 0 1px var(--tinta),0 22px 44px -22px rgba(1,37,48,.45);z-index:1}
.mod-lista h4{display:flex;align-items:baseline;gap:10px}
.mod-lista h4::before{content:"";width:8px;height:8px;background:var(--lime);flex:none;transition:transform .35s}
.mod-lista > div:hover h4::before{transform:rotate(45deg)}

/* ── 16 · los cuatro filtros, plegados bajo la FIG. 01 ──
   Número y nombre a la vista; el texto se abre al pasar/tocar. Al pasar por
   uno, escena.js enciende su marca (.gate.gN) en la figura. */
.filtros--pliega{margin-top:clamp(26px,3vw,40px)}
.filtros--pliega .filtro{cursor:pointer;outline:none;transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.filtros--pliega .filtro h3{display:flex;align-items:baseline;gap:10px}
.filtros--pliega .filtro h3::after{content:"";width:8px;height:8px;background:var(--lime);flex:none;transition:transform .35s}
/* Sergio: «¡le sacaste los textos!». Los textos de los pasos quedan A LA
   VISTA. El hover sólo levanta el paso y enciende su marca en la figura. */
.filtros--pliega .filtro p{margin-top:14px}
.filtros--pliega .filtro:hover h3::after,.filtros--pliega .filtro.abierto h3::after{transform:rotate(45deg)}
.filtros--pliega .filtro:hover{transform:translateY(-4px)}
.filtros--pliega .filtro:focus-visible{outline:2px solid var(--lime);outline-offset:6px}
.fig-svg .gate.activa rect{fill:var(--lime) !important;stroke:var(--lime) !important}
.fig-svg .gate.activa text{fill:var(--lime) !important;opacity:1 !important}
@media (prefers-reduced-motion:reduce){.filtros--pliega .filtro p{transition:none}}

/* ── 17 · los factores: sin el pie de figura, la figura llena el panel, el
   texto en fichas y no en viñetas, y el cuadradito lime LATE hasta que lo
   tocás (Sergio: «que se sepa que podés tocar»). ── */
.factor .fig-pie{display:none}
.factor .panel{padding:clamp(14px,1.8vw,24px)}
.factor .panel .fig-lienzo svg{width:100%;height:auto;max-height:100%;transform:scale(1.06);transform-origin:center}
.factor__lista{flex-direction:row;flex-wrap:wrap;gap:8px}
.factor__lista li{padding:9px 13px;border:1px solid var(--tinta-18);background:var(--papel);font-size:14px;line-height:1.35;
  color:var(--tinta);font-weight:600;opacity:0;transform:translateY(8px);
  transition:opacity .4s ease,transform .4s cubic-bezier(.2,.7,.3,1),border-color .25s}
.factor__lista li::before{display:none}
.factor:hover .factor__lista li,.factor:focus-within .factor__lista li,.factor--abierto .factor__lista li{opacity:1;transform:none}
.factor__lista li:nth-child(2){transition-delay:.06s}.factor__lista li:nth-child(3){transition-delay:.12s}
.factor__lista li:nth-child(4){transition-delay:.18s}.factor__lista li:nth-child(5){transition-delay:.24s}
.factor__lista li:hover{border-color:var(--tinta);background:var(--lime)}
/* la señal: el cuadradito late hasta que el factor se abre por primera vez */
.factor__t::after{animation:cuadraLate 1.6s ease-in-out infinite}
.factor:hover .factor__t::after,.factor:focus-within .factor__t::after,.factor--abierto .factor__t::after,.factor--tocado .factor__t::after{animation:none}
@keyframes cuadraLate{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(200,241,53,.55)}50%{transform:scale(1.35);box-shadow:0 0 0 8px rgba(200,241,53,0)}}
@media (prefers-reduced-motion:reduce){.factor__t::after{animation:none}.factor__lista li{transition:none;opacity:1;transform:none}}

/* ═══════════════ REVELADO ESTILO LOGAN (31/08) ═══════════════

   El modelo que pidió Sergio, sacado de la ingeniería inversa de logan.ai:
   IntersectionObserver dispara cuando el borde de arriba del bloque cruza el
   borde de abajo de la ventana, y a partir de ahí la animación corre POR
   TIEMPO (1,25 s / 2 s, ease), una sola vez, pase lo que pase con el scroll.

   Por qué reemplaza al revelado con scrub: con `scrub` el progreso es la
   posición del scroll, así que si scrolleás rápido la animación se completa
   en tres cuadros y NO SE VE, y si frenás se congela. En Logan, frenes o no,
   los bloques siguen entrando durante dos segundos. Eso es lo que se veía en
   el video y lo que faltaba acá.

   ⚠️ REGLA 1 INTACTA: la clase .rv la pone el JS en runtime, no el HTML. Si
   el JS no corre, no hay .rv y la página se ve entera. Nunca se oculta desde
   la CSS sola. */
.rv{visibility:hidden}
.rv.rv--on{visibility:visible;animation-duration:1.25s;
  animation-timing-function:ease;animation-fill-mode:none}
.rv.rv--on.rv--lento{animation-duration:2s}
.rv.rv--on.rv--rapido{animation-duration:.75s}

.rv-fade.rv--on   {animation-name:rvFade}
.rv-sube.rv--on   {animation-name:rvSube}
.rv-izq.rv--on    {animation-name:rvIzq}
.rv-der.rv--on    {animation-name:rvDer}
.rv-rebote.rv--on {animation-name:rvRebote}

@keyframes rvFade{from{opacity:0}to{opacity:1}}
/* 40px y no 100%: en Logan el recorrido es 100% del alto del PROPIO elemento,
   así que un bloque de 400px viaja 400px y se siente pesado y desprolijo. Es
   el defecto 2 que marcó el propio análisis de Sergio. Acá va fijo. */
@keyframes rvSube{from{opacity:0;transform:translate3d(0,40px,0)}to{opacity:1;transform:none}}
/* ±64px y no ±100%: mismo motivo, y además un corrimiento del 100% del ancho
   se sale de la pantalla cuando el layout colapsa a una columna. */
@keyframes rvIzq{from{opacity:0;transform:translate3d(-64px,0,0)}to{opacity:1;transform:none}}
@keyframes rvDer{from{opacity:0;transform:translate3d(64px,0,0)}to{opacity:1;transform:none}}
@keyframes rvRebote{
  0%,20%,40%,60%,80%,100%{animation-timing-function:cubic-bezier(.215,.61,.355,1)}
  0%{opacity:0;transform:scale3d(.4,.4,.4)}
  20%{transform:scale3d(1.1,1.1,1.1)}
  40%{transform:scale3d(.9,.9,.9)}
  60%{opacity:1;transform:scale3d(1.03,1.03,1.03)}
  80%{transform:scale3d(.97,.97,.97)}
  100%{opacity:1;transform:scale3d(1,1,1)}}

/* Logan no lo respeta; nosotros sí. */
@media (prefers-reduced-motion:reduce){
  .rv,.rv.rv--on{visibility:visible;animation:none !important}
}

/* ═══════════════ unidad de negocio · STRIKE Agency ═══════════════

   Referencia pmlatam.com: la unidad tiene peso propio, bajada de una línea y
   su página. No se copió su grilla de cinco tarjetas porque acá la unidad es
   UNA; las tarjetas se usan para sus siete servicios, que sí son múltiples.

   Va sobre teal para leerse como otra cosa dentro del sitio. */
.unidad{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,4.5vw,72px);align-items:center;margin-top:40px}
.unidad__cab h2{margin:0}
.unidad__cab .lead{max-width:44ch}
.unidad__ver{display:inline-flex;align-items:center;gap:10px;margin-top:30px;
  text-decoration:none;background:var(--lime);color:var(--tinta);
  font-size:14px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;
  padding:15px 30px;transition:background .3s}
.unidad__ver:hover{background:#d9f57a}
.unidad__ver .flecha{transition:transform .3s;display:inline-block}
.unidad__ver:hover .flecha{transform:translateX(5px)}
.unidad__ver:focus-visible{outline:2px solid var(--papel);outline-offset:3px}
.unidad__panel{margin-top:0}

/* Las tarjetas de servicio: mismo sistema que .mod-lista pero en negativo, que
   es lo que ya hace .sec--tinta con el resto. El filete de 1px lo da el
   box-shadow, igual que en la banda de módulos. */
.unidad__servicios{margin-top:clamp(40px,5vw,64px)}
.sec--tinta .unidad__servicios > div{background:transparent;
  box-shadow:0 0 0 1px var(--papel-20)}
.sec--tinta .unidad__servicios h4{color:var(--papel)}
.sec--tinta .unidad__servicios p{color:var(--papel-78)}

@media (max-width:980px){
  .unidad{grid-template-columns:1fr;gap:32px}
}

/* ═══════ 05 · la unidad se tiene que leer como OTRA cosa ═══════
   Agency estaba en el mismo teal con puntos que EQUIPO, que va justo abajo:
   dos secciones seguidas idénticas, y la que tenía que destacar no destacaba.
   Lo marcó Sergio el 31/08 — y no era un problema de tamaño ni de copy.

   La paleta son cuatro colores y dos estaban vetados: el papel (queda igual a
   POSICIÓN y a MÓDULOS) y el teal con puntos (es justamente el que hay que
   evitar). Quedan el lime y la piedra. La piedra se probó y se lee apagada,
   con el contraste al borde para texto de cuerpo. Así que la hace el lime.

   ⚠️ A PÁGINA COMPLETA NO. Se probó: sobre lime la barra de navegación —texto
   crema— queda ilegible, y el botón «Hablemos», que es lime, desaparece en el
   fondo. Arreglarlo obliga a tocar un componente global por una sola sección.
   Va como bloque macizo detrás de la cabecera, sobre el teal profundo de la
   escena (#012530) y sin puntos.

   Y la FIG. 09 se queda sobre teal, que es el fondo para el que está dibujada:
   así el cambio de color no obliga a redibujar la figura. */
.sec--unidad{background:#012530;background-image:none}
.sec--unidad .unidad{align-items:stretch}
.sec--unidad .unidad__cab{background:var(--lime);color:var(--tinta);
  padding:clamp(28px,3.2vw,44px);display:flex;flex-direction:column;justify-content:center}
.sec--unidad .unidad__cab h2{color:var(--tinta)}
.sec--unidad .unidad__cab .lead{color:rgba(1,51,66,.80)}
/* el botón se invierte: sobre lime, un botón lime no existe */
.sec--unidad .unidad__ver{background:var(--tinta);color:var(--lime);align-self:flex-start}
.sec--unidad .unidad__ver:hover{background:#02465c}
.sec--unidad .unidad__ver:focus-visible{outline-color:var(--lime)}

/* ─── la cinta: corta la sección arriba y abajo ───
   Antes el corte con lo de arriba (MÓDULOS, crema) y con lo de abajo (EQUIPO,
   teal con puntos) era flojo: el teal profundo y el teal con puntos se parecen
   demasiado. Se probaron tres bordes —filete macizo, línea de corte de 1px con
   marcas, y esta cinta rotulada— y Sergio eligió la cinta: es la única que sale
   del sistema del sitio, que está lleno de rótulos monoespaciados, y de paso
   nombra la unidad dos veces más.

   ⚠️ La pista lleva DOS MITADES IDÉNTICAS y la animación desplaza 50%. Por eso
   el ciclo cierra sin salto. Si se cambia la cantidad de repeticiones en
   build.py hay que mantener las dos mitades iguales o aparece un corte.

   ⚠️ Va FUERA de `.caja`, a ancho completo. Y no la reclama el revelado: la red
   de seguridad sólo mira `.sec > .caja > *`, así que la cinta nunca queda con
   `.rv` propio — entra y sale con la sección, que es lo que se quiere. */
.cinta{position:absolute;left:0;right:0;height:26px;background:var(--lime);overflow:hidden}
.cinta--arriba{top:0}
.cinta--abajo{bottom:0}
/* ⚠️ `position:relative` OBLIGATORIO: sin esto las cintas se posicionan
   contra `#sitio` —el ancestro posicionado más cercano— y se van a los
   extremos de la página entera. Medido: la de arriba a 9.000 px de su
   sección. En pantalla pasa desapercibido si no se mira el número. */
.sec--unidad{position:relative;
  padding-top:calc(var(--aire) + 12px);padding-bottom:calc(var(--aire) + 12px)}
.cinta__pista{display:flex;width:max-content;will-change:transform;
  animation:desfile 38s linear infinite}
.cinta__pista span{color:var(--tinta);white-space:nowrap;
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:9px;line-height:26px;font-weight:600;letter-spacing:.34em;text-transform:uppercase}
/* De DERECHA A IZQUIERDA desde el 03/09 (STRIKE: «¿los textos no deberían
   desplazarse para el otro lado para que se entiendan mejor?» — sí: el texto
   entra por la derecha y sale por la izquierda, en el sentido en que se
   lee, como adsmood.com). Iba al revés desde el 31/08. Arranca en cero y
   termina corrida media pista: mismas dos mitades, mismo cierre sin salto.
   Las cinco cintas usan esta animación; la fila de vuelta de Marcas sigue
   en sentido opuesto (animation-direction:reverse). */
@keyframes desfile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.cinta__pista{animation:none}}

/* ── 5 · Marcas: dos cintas en sentidos opuestos ──
   51 logos (02/09) en UNA tinta, máscaras de marcas.py. A ancho completo,
   fuera de .caja, como la cinta de Agency; misma pista de dos mitades y
   `desfile`, con la duración calculada sobre el ancho real en escena.js
   (misma velocidad en cualquier pantalla). La fila de vuelta usa la MISMA
   animación al revés. `--h` viene del build (peso visual por proporción) y
   `--k` es la escala: 1px en escritorio, .74px en el teléfono.
   Sin filtro CSS sobre los logos: ya vienen pintados en tinta, y la opacidad
   los asienta en el crema sin volverlos gris. Al pasar el cursor la fila se
   detiene (regla compartida con .frase, más abajo) y el logo toma cuerpo. */
#marcas{overflow:hidden}
.marcas{--k:1px;margin:44px calc(-1 * var(--lado)) 0;border-top:1px solid var(--tinta-18)}  /* sangra al borde: una cinta se corta contra la pantalla, no contra la caja */
.marcas__fila{overflow:hidden;padding:26px 0;border-bottom:1px solid var(--tinta-18)}
.marcas__pista{display:flex;align-items:center;width:max-content;will-change:transform;
  animation:desfile 60s linear infinite}
.marcas__fila--vuelta .marcas__pista{animation-direction:reverse}
.marcas__pista img{display:block;height:calc(var(--h,40) * var(--k));width:auto;
  margin:0 clamp(26px,3.4vw,52px);opacity:.62;transition:opacity .35s}
.marcas__fila:hover .marcas__pista img{opacity:.8}
.marcas__pista img:hover{opacity:1}
@media (prefers-reduced-motion:reduce){.marcas__pista{animation:none}}
@media (max-width:620px){
  .marcas{--k:.74px;margin-top:32px}
  .marcas__fila{padding:18px 0}
}

/* ═══════ figuras en el teléfono ═══════
   Decisión de Sergio, 31/08: mobile no replica desktop. Las 25 etiquetas de
   las pantallas descartadas de la FIG. 01 quedan en ~4 px sobre una pila de
   marcos superpuestos: ilegibles y encimadas. La figura se entiende igual —lo
   que cuenta es el campo lleno y la única que queda encendida, que conserva
   su etiqueta—. Va al final del archivo por el orden de reglas de siempre. */
@media (max-width:980px){
  .rot-pieza{display:none}
}
/* (La fila de compuertas de la FIG. 01 se pisaba en el teléfono; NO se
   esconde: `repartirCompuertas()` en escena.js la reparte según el ancho
   real de cada rótulo. Sergio, 02/09: «¿vos decís que no hay espacio en un
   renglón?» — lo había: sobraba un tercio.) */

/* el bloque lime de la FIG. 00 late apenas, como el núcleo de la FIG. 05 */
.fig .nucleo{transform-origin:center}

/* la entrada del módulo: los párrafos sin título que suben a la portada.
   Van más grandes que el cuerpo normal y con la columna angosta de un lead,
   para que se lean como la entrada de la página y no como texto de relleno. */
/* ─── el texto de las subpáginas llega al límite derecho ───
   Reporte de Sergio (31/08): «el margen derecho de este texto está incorrecto,
   debería llegar y estar estructurado al límite derecho como el gráfico».
   Medido a 1920: los párrafos cortaban en 1170 y la grilla llegaba a 1513
   —343 px de hueco—. La causa eran los topes de medida: 68ch en el cuerpo,
   64ch en la entrada, 640px en la bajada. Se sacan los tres.

   ⚠️ PRIMER INTENTO, DESCARTADO POR SERGIO: partir el texto en DOS COLUMNAS
   para que el bloque llegara al borde sin estirar la línea. No lo había
   pedido, y con razón: cambia la lectura de la página por un problema de
   alineación. **Que el texto llegue al borde significa el texto, no un
   invento que lo reemplace.** Si vuelve a aparecer la idea, ya se probó.

   ⚠️ Y el intento tenía un segundo error: la bajada sólo se ensanchaba en los
   módulos CON párrafos de entrada, así que Plataformas y Formatos —que no
   tienen— quedaron igual que antes. El arreglo tiene que valer para las tres
   subpáginas, tengan entrada o no.

   Sí, a 1120 px la línea queda larga. Es una decisión de Sergio, tomada dos
   veces y sabiendo el argumento. No volver a "corregirla" por las nuestras. */
.mhero .lead,.mhero__entrada,.mhero__entrada p,.mbloque__txt p{max-width:none}
.mhero__entrada{margin-top:26px}
.mhero__entrada p{margin:0 0 14px;font-size:17px;line-height:1.68;font-weight:600;
  color:var(--papel-78)}
.mhero__entrada p:last-child{margin-bottom:0}

/* ═══════════════ v3 · SUBPÁGINAS: UNA ESCENA POR PÁGINA (02/09) ═══════════════
   Sergio: «hacer las subpáginas creativas, súper dinámicas, súper animadas…
   que queden espectaculares como la home». La receta es la del home: la
   portada con el h1 gigante entrando letra por letra, la bajada corrida a la
   derecha, y debajo UNA escena a sangre que es la frase del módulo en
   movimiento (escena.js: platEscena / fmtEscena / agEscena). El contenido
   del cliente va en fichas —palabra grande, texto que se abre al pasar—, el
   patrón de los factores que pidió Denise. Va al final del archivo a
   propósito (regla 7). */

/* ── la portada ── */
.mhero--v3{padding-bottom:clamp(40px,5vw,64px)}
.mhero--v3 .mhero__t .w{transition:transform .3s cubic-bezier(.2,.7,.3,1),color .3s}
.mhero--v3 .mhero__t .w:hover{color:var(--lime)}
.mhero__t .pal{display:inline-block;white-space:nowrap}
/* Sergio (02/09, con captura): la bajada iba corrida a la derecha y quedaba
   en tres renglones; va al margen izquierdo y llega al derecho, a todo el
   ancho de la grilla (regla 10 quinquies: el texto llega al borde). */
.mhero__bajo{margin-top:clamp(22px,3vw,40px)}
.mhero__bajo .lead{margin-top:0;max-width:none}
.mhero__entrada{margin-top:18px}
.pagina-modulo .mhero__entrada p{color:var(--papel-78);font-size:16px;line-height:1.65;font-weight:600;margin:0 0 14px;max-width:none}

/* ── la escena: banda tinta profunda, a sangre, con borde rasgado abajo ──
   Se monta 40px sobre la sección siguiente para que el rasgado asome sobre
   el crema, como las secciones tinta del home. Por eso la de la portada va
   FUERA de .mhero, como hermana: adentro, el fondo tinta del hero tapaba
   las muescas (medido). Sin 100vw (regla del scroll horizontal). */
/* 62 y no 40: las muescas del rasgado bajan hasta 60px del borde; con 40 de
   solape quedaba una franja crema de 15px entre el rasgado y la sección de
   abajo (medido en Agency, donde la siguiente es tinta). */
.esc{position:relative;z-index:2;margin:0 0 -62px;
  padding:clamp(40px,5vw,64px) var(--lado) calc(clamp(48px,6vw,84px) + 62px);
  background:#012530;color:var(--papel);overflow:hidden;
  background-image:radial-gradient(rgba(246,248,248,.10) 1px,transparent 1px);background-size:22px 22px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 55px),91% calc(100% - 40px),78% calc(100% - 59px),63% calc(100% - 44px),
                    49% calc(100% - 60px),35% calc(100% - 47px),22% calc(100% - 58px),10% calc(100% - 43px),0 calc(100% - 56px))}
.esc::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(200,241,53,.09),transparent 60%);
  opacity:0;transition:opacity .5s}
.esc:hover::before{opacity:1}
.esc__lienzo{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
/* ⚠️ `.esc > *` pesa lo mismo que `.esc__lienzo` y va después: sin esta
   regla más específica el canvas quedaba en flujo con height:100% del
   documento —medido: 8.387 px de escena—. */
.esc > *{position:relative;z-index:1}
.esc > .esc__lienzo{position:absolute;z-index:0}
.esc__rot{margin:0 0 18px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--papel-52);font-weight:700}
.esc__pista{position:absolute;right:clamp(16px,2vw,32px);bottom:calc(62px + clamp(14px,2vw,26px));margin:0;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--papel-52);opacity:0;transition:opacity .8s}
.esc--lista .esc__pista{opacity:1}
@media (pointer:coarse){.esc__pista{display:none}}

/* ── PLATAFORMAS: la mesa de operaciones ──
   Cinco nodos arriba, la mesa abajo, y entre medio el canvas dibuja los
   cables con la señal viajando (platEscena). Al pasar por un nodo, su cable
   se prende y la mesa responde; un clic manda una ráfaga. */
.plat__nodos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,1.2vw,18px)}
.plat__nodo{appearance:none;position:relative;background:rgba(246,248,248,.05);border:1px solid var(--papel-20);color:var(--papel);
  font:inherit;font-weight:900;font-size:clamp(11px,1.3vw,17px);letter-spacing:.04em;text-transform:uppercase;
  padding:clamp(14px,1.8vw,24px) clamp(10px,1.2vw,18px) clamp(18px,2vw,28px);cursor:pointer;text-align:left;
  display:flex;flex-direction:column;gap:8px;align-items:flex-start;
  transition:transform .35s cubic-bezier(.2,.7,.3,1),background .3s,border-color .3s,color .3s}
.plat__nodo .mono{font-size:10px;letter-spacing:.2em;color:var(--lime);font-weight:500;transition:color .3s}
/* la señal: un punto lime que late en el borde de abajo, donde nace el cable */
.plat__nodo::after{content:"";position:absolute;left:50%;bottom:-5px;width:9px;height:9px;margin-left:-4.5px;background:var(--lime);
  border-radius:50%;animation:cuadraLate 1.8s ease-in-out infinite}
.plat__nodo:nth-child(2)::after{animation-delay:.3s}.plat__nodo:nth-child(3)::after{animation-delay:.6s}
.plat__nodo:nth-child(4)::after{animation-delay:.9s}.plat__nodo:nth-child(5)::after{animation-delay:1.2s}
.plat__nodo:hover,.plat__nodo.activo,.plat__nodo:focus-visible{background:var(--lime);color:var(--tinta);border-color:var(--lime);transform:translateY(-6px);outline:none}
.plat__nodo:hover .mono,.plat__nodo.activo .mono{color:rgba(1,51,66,.62)}
.plat__nodo:hover::after,.plat__nodo.activo::after{animation:none;transform:scale(1.4)}
.plat__mesa{margin-top:clamp(110px,15vw,190px);border:1.2px solid var(--lime);background:rgba(1,37,48,.72);
  padding:clamp(16px,2vw,26px);transition:box-shadow .5s}
.plat__mesa.activa{box-shadow:0 0 0 1px rgba(200,241,53,.35),0 30px 80px -30px rgba(200,241,53,.35)}
.plat__cab{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--lime);font-weight:700}
.plat__senal{color:var(--papel-52);transition:color .3s}
.plat__mesa.activa .plat__senal{color:var(--papel)}
.plat__tablero{display:block;width:100%;height:clamp(150px,19vw,230px);margin-top:16px}
.plat__nota{margin:14px 0 0;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--papel-52)}
@media (max-width:980px){
  .plat__nodos{grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}
  .plat__nodo{font-size:12px;padding:12px 10px 16px}
  .plat__mesa{margin-top:90px}
  .plat__cab{font-size:9px}
}

/* ── las fichas: la lista del cliente como palabras grandes ──
   Número, palabra y el texto plegado que abre con hover / foco / tap. Las
   pares bajan 22px (nada queda en su columna). Al pasar, se da vuelta:
   tinta sobre crema, lime sobre tinta. El cuadradito late hasta que la tocás. */
.fichas{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(12px,1.6vw,20px);
  margin-top:clamp(28px,3.5vw,48px);align-items:start}
.ficha{position:relative;padding:clamp(18px,2vw,26px);background:var(--papel);box-shadow:0 0 0 1px var(--tinta-18);color:var(--tinta);
  cursor:pointer;outline:none;transform:translateY(var(--fy,0px));
  transition:transform .4s cubic-bezier(.2,.7,.3,1),background .3s,color .3s,box-shadow .4s}
.fichas .ficha:nth-child(even){--fy:22px}
.ficha__n{display:block;font-size:10px;letter-spacing:.22em;color:var(--piedra);margin-bottom:26px;font-weight:500;transition:color .3s}
.ficha__t{margin:0;font-size:clamp(19px,1.9vw,26px);line-height:1;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;
  display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ficha__t::after{content:"";width:9px;height:9px;background:var(--lime);flex:none;
  animation:cuadraLate 1.6s ease-in-out infinite;transition:transform .35s cubic-bezier(.2,.7,.3,1)}
/* el texto es una solapa que se despliega POR ENCIMA de lo de abajo, no
   adentro de la ficha: así la grilla no salta de alto al pasar el cursor
   (medido: la fila crecía 180px y todo lo de abajo se corría). */
.ficha__txt{position:absolute;left:0;right:0;top:100%;z-index:2;background:inherit;color:inherit;
  padding:0 clamp(18px,2vw,26px);max-height:0;overflow:hidden;opacity:0;
  box-shadow:0 26px 60px -24px rgba(1,37,48,.6);
  transition:max-height .5s cubic-bezier(.2,.7,.3,1),opacity .35s ease,padding .5s}
.ficha__txt p{margin:0;font-size:15px;line-height:1.6;font-weight:600;opacity:.84}
.ficha:hover,.ficha:focus-within,.ficha--abierta{background:var(--tinta);color:var(--papel);z-index:3;
  box-shadow:0 26px 60px -24px rgba(1,37,48,.6);transform:translateY(calc(var(--fy,0px) - 8px))}
.ficha:hover .ficha__txt,.ficha:focus-within .ficha__txt,.ficha--abierta .ficha__txt{max-height:420px;opacity:1;padding-bottom:clamp(18px,2vw,26px)}
.ficha:hover .ficha__t::after,.ficha:focus-within .ficha__t::after,.ficha--abierta .ficha__t::after,.ficha--tocada .ficha__t::after{animation:none;transform:rotate(45deg)}
.ficha--tocada:not(:hover):not(:focus-within):not(.ficha--abierta) .ficha__t::after{transform:none}
.ficha:hover .ficha__n,.ficha:focus-within .ficha__n,.ficha--abierta .ficha__n{color:var(--lime)}
.ficha:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
.fichas--oscuras .ficha{background:rgba(246,248,248,.05);box-shadow:0 0 0 1px var(--papel-20);color:var(--papel)}
.fichas--oscuras .ficha__n{color:var(--lime)}
.fichas--oscuras .ficha:hover,.fichas--oscuras .ficha:focus-within,.fichas--oscuras .ficha--abierta{background:var(--lime);color:var(--tinta)}
.fichas--oscuras .ficha:hover .ficha__n,.fichas--oscuras .ficha:focus-within .ficha__n,.fichas--oscuras .ficha--abierta .ficha__n{color:rgba(1,51,66,.62)}
.fichas--oscuras .ficha:hover .ficha__t::after,.fichas--oscuras .ficha:focus-within .ficha__t::after,.fichas--oscuras .ficha--abierta .ficha__t::after{background:var(--tinta)}
@media (max-width:980px){.fichas{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.fichas .ficha:nth-child(even){--fy:0px}
  .ficha{padding:16px 14px}.ficha__n{margin-bottom:16px}.ficha__t{font-size:16px}
  /* en el teléfono el texto va EN FLUJO (empuja), no como solapa: la solapa
     de la última fila se salía de la sección y el rasgado la cortaba
     (medido: «Analítica y optimización» a 390 quedaba a la mitad) */
  .ficha__txt{position:static;padding:0;box-shadow:none}
  .ficha:hover .ficha__txt,.ficha:focus-within .ficha__txt,.ficha--abierta .ficha__txt{padding:12px 0 0}
  .fichas .ficha--abierta{grid-column:1/-1}}

/* ── FORMATOS: el formato vivo ──
   Una sola pieza lime —la marca— salta de pantalla en pantalla y se acomoda
   a cada una: en display es un banner, en video lleva el play y la barra, en
   rich media se agranda al tocarla, en CTV llena la tele. Las pantallas son
   DOM con su gesto dibujado en CSS; el salto lo hace fmtEscena moviendo
   left/top/width/height con transición. Sin JS: pantallas quietas, pieza en
   el centro. `data-modo="recorrido"` es la banda del respiro: desktop →
   mobile → tablet → DOOH → CTV, de izquierda a derecha. */
.esc--fmt{padding-top:clamp(28px,3.5vw,48px)}
.fmt__escena{position:relative;aspect-ratio:16/7.4;max-width:1400px;margin:0 auto}
.esc--fmt[data-modo=recorrido] .fmt__escena{aspect-ratio:16/5.6;max-width:1200px}
.fmt__marco{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);cursor:pointer;outline:none;
  border:1px solid var(--papel-20);background:rgba(246,248,248,.04);border-radius:3px;
  transition:border-color .3s,background .3s,transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s}
.fmt__marco:hover,.fmt__marco.activo,.fmt__marco:focus-visible{border-color:var(--lime);background:rgba(200,241,53,.05)}
.fmt__marco.activo{box-shadow:0 0 0 1px rgba(200,241,53,.25),0 30px 70px -30px rgba(200,241,53,.45)}
.fmt__marco:hover{transform:translateY(-3px)}
.fmt__rot{position:absolute;left:0;top:100%;margin-top:9px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--papel-52);white-space:nowrap;transition:color .3s}
.fmt__marco.activo .fmt__rot,.fmt__marco:hover .fmt__rot{color:var(--lime)}
/* los gestos de cada pantalla, sin imágenes */
.fmt__marco--display::before{content:"";position:absolute;left:0;right:0;top:0;height:12%;max-height:14px;background:rgba(246,248,248,.10);border-bottom:1px solid var(--papel-20)}
.fmt__marco--display::after{content:"";position:absolute;left:5%;top:4%;width:4px;height:4px;border-radius:50%;background:var(--papel-52);
  box-shadow:8px 0 0 var(--papel-52),16px 0 0 var(--papel-52)}
.fmt__marco--video::after{content:"";position:absolute;left:5%;right:5%;bottom:7%;height:2px;background:var(--papel-20)}
.fmt__marco--rich{border-style:dashed}
.fmt__marco--ctv,.fmt__marco--desktop{border-width:2px;border-radius:4px}
.fmt__marco--ctv::after,.fmt__marco--desktop::after{content:"";position:absolute;left:50%;top:100%;width:28%;height:6px;margin-left:-14%;
  background:var(--papel-20);box-shadow:0 -8px 0 -2px var(--papel-20)}
.fmt__marco--mobile{border-radius:14px}
.fmt__marco--mobile::before{content:"";position:absolute;left:50%;top:3%;width:36%;height:3.5%;margin-left:-18%;border-radius:6px;background:var(--papel-20)}
.fmt__marco--mobile::after{content:"";position:absolute;left:50%;bottom:2.5%;width:40%;height:2px;margin-left:-20%;border-radius:2px;background:var(--papel-20)}
.fmt__marco--tablet{border-radius:8px}
.fmt__marco--tablet::before{content:"";position:absolute;left:50%;top:3%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--papel-52)}
.fmt__marco--dooh{border-width:2px}
.fmt__marco--dooh::after{content:"";position:absolute;left:50%;top:100%;width:12%;height:26px;margin-left:-6%;background:var(--papel-20);
  box-shadow:0 26px 0 -9px var(--papel-20)}
.fmt__marco--dooh .fmt__rot{left:auto;right:0}
/* el monitor lleva bisel arriba; la tele, bisel grueso abajo */
.fmt__marco--desktop{border-top-width:7px}
.fmt__marco--ctv{border-width:3px;border-bottom-width:9px}
/* la pieza */
.fmt__pieza{position:absolute;left:var(--px,40%);top:var(--py,38%);width:var(--pw,20%);height:var(--ph,24%);
  background:var(--lime);color:var(--tinta);border-radius:2px;overflow:hidden;pointer-events:none;z-index:2;
  display:flex;align-items:center;justify-content:center;gap:.5em;
  box-shadow:0 20px 50px -20px rgba(200,241,53,.55);will-change:left,top,width,height;
  transition:left .95s cubic-bezier(.76,0,.18,1),top .95s cubic-bezier(.76,0,.18,1),
             width .95s cubic-bezier(.76,0,.18,1),height .95s cubic-bezier(.76,0,.18,1),transform .5s cubic-bezier(.2,.7,.3,1)}
.fmt__pieza img{width:auto;height:46%;max-width:70%;max-height:64px;object-fit:contain;flex:none;transition:height .5s,opacity .5s}
.fmt__marca{font-weight:900;font-size:clamp(11px,1.5vw,24px);letter-spacing:.06em;line-height:1;transition:font-size .5s,opacity .5s}
.fmt__play,.fmt__barra,.fmt__toca{display:none}
/* video: el logotipo se hace chico arriba a la izquierda, el play al centro, la barra abajo corre */
.fmt__pieza[data-tipo=video] img{position:absolute;left:5%;top:8%;height:22%;max-height:28px}
.fmt__pieza[data-tipo=ctv] img,.fmt__pieza[data-tipo=desktop] img{height:52%;max-height:110px}
.fmt__pieza[data-tipo=mobile] img,.fmt__pieza[data-tipo=dooh] img{height:auto;width:78%}
.fmt__pieza[data-tipo=video] .fmt__marca{position:absolute;left:5%;bottom:14%;font-size:clamp(9px,1vw,13px);opacity:.7}
.fmt__pieza[data-tipo=video] .fmt__play{display:block;position:absolute;left:50%;top:50%;transform:translate(-40%,-50%);
  border-left:1.6em solid rgba(1,51,66,.85);border-top:1em solid transparent;border-bottom:1em solid transparent;font-size:clamp(8px,1.1vw,16px)}
.fmt__pieza[data-tipo=video] .fmt__barra{display:block;position:absolute;left:5%;right:5%;bottom:7%;height:3px;background:rgba(1,51,66,.22)}
.fmt__barra::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--tinta);animation:fmtProg 2.8s linear infinite}
@keyframes fmtProg{to{width:100%}}
/* rich media: la pieza avisa que se toca, y al pasar por su pantalla se agranda */
.fmt__pieza[data-tipo=rich] .fmt__toca{display:block;position:absolute;right:8%;bottom:8%;font-size:9px;letter-spacing:.22em;color:rgba(1,51,66,.75);
  animation:cuadraFade 1.4s ease-in-out infinite}
@keyframes cuadraFade{0%,100%{opacity:.5}50%{opacity:1}}
.fmt__marco--rich:hover ~ .fmt__pieza[data-tipo=rich],.fmt__marco--rich:focus-visible ~ .fmt__pieza[data-tipo=rich]{transform:scale(1.12);box-shadow:0 30px 80px -20px rgba(200,241,53,.7)}
/* CTV: la marca grande, como en la tele */
.fmt__pieza[data-tipo=ctv] .fmt__marca,.fmt__pieza[data-tipo=desktop] .fmt__marca{font-size:clamp(16px,2.6vw,40px)}
.fmt__pieza[data-tipo=mobile],.fmt__pieza[data-tipo=dooh]{flex-direction:column}
.fmt__pieza[data-tipo=mobile] .fmt__marca,.fmt__pieza[data-tipo=dooh] .fmt__marca{font-size:clamp(9px,1.1vw,15px)}
/* el salto: la pieza se aplasta un poco al despegar y al aterrizar */
.fmt__pieza.salta{animation:fmtSalta .95s cubic-bezier(.76,0,.18,1)}
@keyframes fmtSalta{0%{transform:scale(1)}30%{transform:scale(.94,1.06)}70%{transform:scale(1.05,.95)}100%{transform:scale(1)}}
/* la huella: el contorno que deja al irse */
.fmt__huella{position:absolute;border:1px solid rgba(200,241,53,.7);border-radius:2px;pointer-events:none;z-index:1;animation:fmtHuella 1.3s ease-out forwards}
@keyframes fmtHuella{to{opacity:0;transform:scale(.94)}}
.fmt__pista{margin:clamp(30px,4vw,52px) 0 0;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--papel-52)}
/* las fichas de los cuatro formatos viven adentro de la escena: pasar por
   una manda la pieza a su pantalla */
.esc--fmt .fichas{margin-top:clamp(44px,6vw,80px);max-width:var(--caja);margin-left:auto;margin-right:auto}
.esc--fmt .ficha__txt{background:var(--lime)}
/* el respiro va en crema y el título entra en menos renglones */
.pagina-modulo .respiro-rot{color:var(--piedra)}
/* Sergio (02/09): como en las portadas, el texto arranca en el margen
   izquierdo y llega al derecho, sin topes de medida */
.pagina-modulo .respiro-t{max-width:none;margin-top:14px;text-shadow:none;color:var(--tinta)}
.pagina-modulo .respiro-p{max-width:none;margin-top:18px;text-shadow:none;color:var(--tinta-78)}
@media (max-width:980px){
  .fmt__escena{aspect-ratio:16/12}
  .esc--fmt[data-modo=recorrido] .fmt__escena{aspect-ratio:16/8}
  .fmt__rot{font-size:8px;margin-top:6px}
  .fmt__pieza img{max-height:28px}
}
@media (pointer:coarse){.fmt__pista{display:none}}

/* ── STRIKE AGENCY: tres hilos, siete puntos ──
   A la izquierda las tres palabras, grandes, apiladas; a la derecha los siete
   servicios en escalera como fichas. El canvas de atrás teje 21 hilos entre
   unas y otras con la señal viajando (agEscena). Al pasar por un servicio sus
   tres hilos se tensan y se prenden; al pasar por una palabra, sus siete. */
.esc--ag{display:grid;grid-template-columns:minmax(0,4fr) minmax(120px,2fr) minmax(0,6fr);gap:clamp(24px,4vw,64px);align-items:start}
/* el nudo: la comunicación coherente. Tres cuadrados que giran a distinta
   velocidad, en lime, con el rótulo debajo. Late con --late (agEscena). */
.ag__medio{align-self:center;position:sticky;top:34vh;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.ag__nudo{position:relative;width:clamp(56px,6vw,84px);height:clamp(56px,6vw,84px);transform:scale(var(--late,1));transition:transform .3s;
  appearance:none;background:transparent;border:0;padding:0;cursor:pointer;outline:none}
.ag__nudo:hover{transform:scale(calc(var(--late,1) * 1.08))}
.ag__nudo:focus-visible{outline:2px solid var(--lime);outline-offset:8px}
/* el texto del nudo nace escondido y aparece al apretarlo (Sergio) */
.ag__nudo-t{opacity:0;transform:translateY(-6px);transition:opacity .4s,transform .4s cubic-bezier(.2,.7,.3,1);pointer-events:none}
.ag__medio.abierto .ag__nudo-t{opacity:1;transform:none}
/* Sergio (02/09): el nudo cambia de forma: de cuadrados girando a un NÚCLEO
   circular, como el de la audiencia: disco lime y dos ondas que salen. */
.ag__nudo i{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--lime);opacity:0;animation:nudoOnda 2.8s ease-out infinite}
.ag__nudo i:nth-child(2){animation-delay:1.4s}
.ag__nudo i:nth-child(3){inset:28%;border:0;background:var(--lime);opacity:1;animation:nudoLate 2.8s ease-in-out infinite;
  box-shadow:0 0 30px rgba(200,241,53,.45)}
@keyframes nudoOnda{0%{transform:scale(.45);opacity:.9}100%{transform:scale(1.25);opacity:0}}
@keyframes nudoLate{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.ag__nudo-t{margin:0;font-size:clamp(12px,1.1vw,15px);line-height:1.35;font-weight:600;color:var(--papel-78);max-width:16ch}
.ag__nudo-t b{color:var(--lime);font-weight:900;text-transform:uppercase;display:block;margin-top:2px}
@media (prefers-reduced-motion:reduce){.ag__nudo i{animation:none}}
.esc--ag .esc__lienzo{grid-column:1/-1}
.ag__ent{display:flex;flex-direction:column;gap:clamp(12px,1.6vw,22px);position:sticky;top:110px}
.ag__in{appearance:none;background:transparent;border:0;padding:0;color:var(--papel);text-align:left;cursor:pointer;align-self:flex-start;
  font:inherit;font-weight:900;font-size:clamp(28px,4.4vw,66px);line-height:.95;letter-spacing:-.03em;text-transform:uppercase;
  transition:color .3s,transform .4s cubic-bezier(.2,.7,.3,1)}
.ag__in::after{content:"";display:block;height:4px;width:0;background:var(--lime);margin-top:8px;transition:width .5s cubic-bezier(.2,.7,.3,1)}
.ag__in:hover,.ag__in.activo,.ag__in:focus-visible{color:var(--lime);transform:translateX(10px);outline:none}
.ag__in:hover::after,.ag__in.activo::after{width:100%}
.ag__sal{display:flex;flex-direction:column;gap:8px}
/* Sergio (02/09): los dos rótulos más grandes que los 10px de rótulo, PERO
   en la misma mono de siempre —«tenían que mantener la tipografía», «no era
   necesario tan grande»— y con aire para que no se mezclen con las
   palabras y las fichas. Sin «· Qué hacemos». */
.esc--ag .esc__rot,.ag__h2{font-size:clamp(13px,1.2vw,17px) !important;line-height:1.4;font-weight:700;letter-spacing:.24em;
  color:var(--lime);text-transform:uppercase;margin:0 0 clamp(22px,2.6vw,36px)}
/* dentro de CUALQUIER escena (Agency y Formatos) el texto de la ficha va en
   flujo, no como solapa: la escena tiene clip-path (el rasgado) y la solapa
   de la última fila se salía y quedaba cortada — Sergio, con captura, en
   Formatos a 1440. */
.esc .ficha__txt{position:static;padding:0;box-shadow:none}
.esc .ficha:hover .ficha__txt,.esc .ficha:focus-within .ficha__txt,.esc .ficha--abierta .ficha__txt{padding:12px 0 0}
.esc--ag .ficha{background:rgba(1,37,48,.55);box-shadow:0 0 0 1px var(--papel-20);color:var(--papel);padding:16px 20px;--fy:0px;
  backdrop-filter:blur(2px);transition:transform .4s cubic-bezier(.2,.7,.3,1),background .3s,color .3s,box-shadow .4s,margin-left .4s}
.esc--ag .ficha:nth-of-type(even){margin-left:clamp(14px,3vw,44px)}
.esc--ag .ficha:nth-of-type(3n){margin-left:clamp(28px,6vw,88px)}
.esc--ag .ficha__n{margin-bottom:8px;color:var(--lime)}
.esc--ag .ficha__t{font-size:clamp(15px,1.5vw,20px)}
.esc--ag .ficha:hover,.esc--ag .ficha:focus-within,.esc--ag .ficha--abierta{background:var(--lime);color:var(--tinta);transform:translateX(12px)}
.esc--ag .ficha:hover .ficha__n,.esc--ag .ficha:focus-within .ficha__n,.esc--ag .ficha--abierta .ficha__n{color:rgba(1,51,66,.62)}
.esc--ag .ficha:hover .ficha__t::after,.esc--ag .ficha:focus-within .ficha__t::after,.esc--ag .ficha--abierta .ficha__t::after{background:var(--tinta)}
/* ── en el teléfono: la columna vertebral a la derecha (Sergio, 02/09, con
   captura: «los hilos pasan por atrás»). Las palabras apiladas a la
   izquierda y el nudo a su derecha, así los hilos palabra → nudo son cortos
   y no cruzan texto; del nudo baja un TRONCO por el margen derecho que entra
   a cada servicio por su costado (las fichas dejan 40px a la derecha). Lo
   dibuja agEscena en su rama `angosto`. Desktop no cambia. ── */
@media (max-width:980px){
  .esc--ag{grid-template-columns:minmax(0,1fr) 56px;grid-template-rows:auto auto;gap:22px 16px;align-items:center}
  .ag__ent{position:static;flex-direction:column;gap:10px;grid-column:1;grid-row:1}
  .ag__ent .esc__rot{margin-bottom:6px}
  .ag__in{font-size:clamp(22px,7.4vw,30px)}
  .ag__in:hover,.ag__in.activo{transform:none}
  .ag__medio{position:static;grid-column:2;grid-row:1;align-self:center;margin:0;width:56px}
  .ag__nudo{width:56px;height:56px}
  .ag__nudo-t{display:none}
  .ag__sal{grid-column:1/-1;grid-row:2;margin-right:40px}
  .esc--ag .ficha:nth-of-type(even),.esc--ag .ficha:nth-of-type(3n){margin-left:0}
  .esc--ag .ficha:hover,.esc--ag .ficha:focus-within,.esc--ag .ficha--abierta{transform:none}
}

@media (prefers-reduced-motion:reduce){
  .ficha__t::after,.plat__nodo::after,.fmt__toca,.fmt__barra::after{animation:none}
  .fmt__pieza{transition:none}.fmt__pieza.salta{animation:none}
  .ficha,.plat__nodo,.fmt__marco,.ag__in{transition:none}
}
/* PLATAFORMAS a 390px: el piso de 48px del clamp de arriba pisaba la regla
   de 620px (más arriba en el archivo, menos específica) y la palabra salía
   24px de la pantalla. Medido con scrollWidth. Va al final, regla 7. */
@media (max-width:620px){.pagina-modulo .mhero__t{font-size:min(10.5vw,48px)}}

/* ── el ciclo de Plataformas: planificamos → implementamos → optimizamos → …
   Tres pasos en HTML y un SVG detrás que los une (cicloEscena traza el
   circuito según dónde caen las cajas: en fila en desktop, en columna en
   angosto). La señal lo recorre y prende cada paso al pasar. Sobre crema:
   trazos tinta, lime sólo como bloque. */
.ciclo{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(40px,7vw,110px);
  margin:clamp(28px,3.5vw,44px) 0 0;padding-bottom:52px}
.ciclo__hilos{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ciclo__paso{position:relative;z-index:1;background:var(--papel);border:1.5px solid var(--tinta);padding:16px 18px 18px;
  font-weight:900;font-size:clamp(14px,1.5vw,20px);text-transform:uppercase;letter-spacing:-.01em;color:var(--tinta);
  display:flex;flex-direction:column;gap:8px;transition:background .35s,color .35s,transform .35s cubic-bezier(.2,.7,.3,1)}
.ciclo__paso .mono{font-size:10px;letter-spacing:.22em;color:var(--piedra);font-weight:500;transition:color .35s}
.ciclo__paso.on{background:var(--lime);transform:translateY(-4px)}
.ciclo__paso.on .mono{color:var(--tinta-58)}
.ciclo__paso:hover{background:var(--tinta);color:var(--papel)}
.ciclo__paso:hover .mono{color:var(--lime)}
@media (max-width:980px){
  .ciclo{grid-template-columns:1fr;gap:34px;padding-bottom:0;padding-right:40px}
}

/* ── los datos se transforman (Plataformas, bloque de data) ──
   Canvas de puntos: a la izquierda ruido, en el medio la franja lime, a la
   derecha el gráfico que se arma con los mismos puntos (datosEscena). Las
   tres salidas se prenden cuando el gráfico se completa. Sobre tinta. */
.datos{position:relative;margin:clamp(28px,3.5vw,44px) 0 0;height:clamp(240px,26vw,340px);
  border:1px solid var(--papel-20);background:rgba(1,37,48,.45);overflow:hidden}
.datos__lienzo{position:absolute;inset:0;width:100%;height:100%}
.datos__rot{position:absolute;top:14px;font-size:10px;letter-spacing:.22em;color:var(--papel-52);font-weight:700}
.datos__rot--izq{left:16px}
.datos__rot--med{left:50%;transform:translateX(-50%);color:var(--lime)}
.datos__salidas{position:absolute;right:16px;top:14px;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.datos__salida{font-size:10px;letter-spacing:.22em;font-weight:700;color:var(--papel-20);padding:5px 9px;border:1px solid var(--papel-20);
  transition:color .4s,border-color .4s,background .4s,transform .4s cubic-bezier(.2,.7,.3,1)}
.datos__salida.on{color:var(--tinta);background:var(--lime);border-color:var(--lime);transform:translateX(-6px)}
.datos__pista{bottom:12px !important}
.datos--lista .datos__pista{opacity:1}
@media (max-width:980px){
  .datos{height:300px}
  .datos__salidas{flex-direction:row;right:auto;left:16px;top:auto;bottom:14px;gap:6px}
  .datos__salida{font-size:8px;padding:4px 6px;letter-spacing:.14em}
  .datos__salida.on{transform:translateY(-4px)}
  .datos__pista{display:none}
}

/* ── Agency: construir → conectar → potenciar (portada) ──
   El párrafo de entrada, dibujado: tres cuadros en un canvas con turno
   rotativo (armadoEscena). ⚠️ Se llama .armado y NO .marca: .marca son las celdas
   de logos de la sección Marcas del home, y reusar el nombre rompió el layout.. Pasar por una etapa la enfoca; clic la reinicia.
   En angosto los tres cuadros se apilan (el canvas crece). */
.armado{position:relative;margin-top:clamp(28px,3.5vw,44px);border:1px solid var(--papel-20);background:rgba(1,37,48,.45);
  padding:16px 16px 14px}
/* Sergio: «eso más grande» — deja de ser rótulo mono y pasa a titular */
.armado__rot{margin:0 0 16px;font-family:Montserrat,system-ui,sans-serif;font-size:clamp(16px,1.7vw,24px);letter-spacing:-.01em;
  line-height:1.15;color:var(--papel);font-weight:900;text-transform:uppercase}
.armado__lienzo{display:block;width:100%;height:clamp(200px,22vw,300px)}
.armado__etapas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:8px}
.armado__etapa{cursor:pointer;outline:none;padding:12px 0 0;border-top:1px solid var(--papel-20);
  font-size:clamp(12px,1.15vw,15px);line-height:1.35;font-weight:600;color:var(--papel-52);
  transition:color .35s,border-color .35s}
.armado__etapa .mono{display:block;font-size:10px;letter-spacing:.22em;color:var(--papel-52);margin-bottom:6px;transition:color .35s}
.armado__etapa b{text-transform:uppercase;font-weight:900;color:var(--papel-78);transition:color .35s}
.armado__etapa.on{color:var(--papel);border-top-color:var(--lime)}
.armado__etapa.on .mono,.armado__etapa.on b{color:var(--lime)}
.armado__etapa:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
@media (max-width:980px){
  .armado__lienzo{height:560px}
  .armado__etapas{grid-template-columns:1fr;gap:8px}
  .armado__etapa{padding-top:8px}
}

/* ═══════════════ la barra (02/09): logo más grande, menú vivo ═══════════════
   Sergio: «el logo un poco más grande», «¿qué le podemos hacer al menú para
   que esté más atractivo y animado?», «el botón que se corre no me gusta».
   · Logo a 46px (era 36) y crece un pelo al pasar.
   · Los enlaces entran de a uno al cargar (fade + 8px), y al pasar el
     cursor una barrita lime SE DESLIZA de un enlace al otro (`.nav__cursor`,
     la mueve escena.js); sin JS cada enlace tiene su subrayado propio que
     se dibuja de izquierda a derecha. La página actual lleva la barrita
     quieta y un cuadradito lime adelante (aria-current, lo pone build.py).
   · Hablemos ya no se mueve: al pasar se da vuelta (crema) con un anillo
     lime, y la flecha aparece adentro sin cambiar el ancho. */
.nav__logo{height:46px;transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.nav > a:hover .nav__logo{transform:scale(1.06)}
.nav__links{position:relative;gap:30px}
.nav__links a:not(.nav__cta){position:relative;padding:6px 0;letter-spacing:.01em;
  transition:color .25s,transform .35s cubic-bezier(.2,.7,.3,1);
  animation:navEntra .6s cubic-bezier(.2,.7,.3,1) both}
.nav__links a:nth-child(1){animation-delay:.05s}.nav__links a:nth-child(2){animation-delay:.11s}
.nav__links a:nth-child(3){animation-delay:.17s}.nav__links a:nth-child(4){animation-delay:.23s}
.nav__links a:nth-child(5){animation-delay:.29s}.nav__links a:nth-child(6){animation-delay:.35s}
.nav__links a.nav__cta{animation:navEntra .6s cubic-bezier(.2,.7,.3,1) .42s both}
@keyframes navEntra{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.nav__links a:not(.nav__cta):hover{color:var(--papel);transform:translateY(-1px)}
/* subrayado propio: sólo cuando NO hay cursor deslizante (sin JS) */
.nav__links a:not(.nav__cta)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--lime);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.nav__links:not(.nav__links--js) a:not(.nav__cta):hover::after,.nav__links:not(.nav__links--js) a[aria-current]::after{transform:scaleX(1)}
/* la página actual: cuadradito lime adelante */
.nav__links a[aria-current]{color:var(--papel);padding-left:14px}
.nav__links a[aria-current]::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;background:var(--lime)}
/* la barrita que se desliza */
.nav__cursor{position:absolute;bottom:0;height:2px;background:var(--lime);left:var(--cx,0px);width:var(--cw,0px);opacity:var(--co,0);
  transition:left .38s cubic-bezier(.2,.7,.3,1),width .38s cubic-bezier(.2,.7,.3,1),opacity .25s;pointer-events:none}
/* Hablemos: se da vuelta, sin moverse */
.nav__links a.nav__cta{position:relative;overflow:hidden;transition:background .3s,color .3s,box-shadow .3s}
.nav__links a.nav__cta::before{content:"";position:absolute;inset:0;background:var(--papel);transform:translateX(-101%);
  transition:transform .38s cubic-bezier(.2,.7,.3,1)}
.nav__links a.nav__cta:hover{background:var(--lime);box-shadow:inset 0 0 0 2px var(--lime)}
.nav__links a.nav__cta:hover::before{transform:none}
.nav__links a.nav__cta span{position:relative}
@media (prefers-reduced-motion:reduce){
  .nav__links a,.nav__links a.nav__cta{animation:none}.nav__cursor,.nav__links a::after,.nav__links a.nav__cta::before{transition:none}
}
@media (max-width:980px){.nav__logo{height:40px}.nav__links{gap:18px}.nav__links a[aria-current]{padding-left:12px}}

/* ═══════════════ el pie (02/09): un cierre, no un colofón ═══════════════
   La línea de la casa corre en una banda lime a lo ancho; el logotipo grande
   con el Hablemos al lado; partners en grande; secciones al día; firma. */
.pie{padding:0 var(--lado) 40px;border-top:0}
.pie__banda{margin:0 calc(-1 * var(--lado)) clamp(48px,6vw,72px);background:var(--lime);color:var(--tinta);overflow:hidden;padding:14px 0}
.pie__pista{display:flex;width:max-content;will-change:transform;animation:desfile 40s linear infinite}
.pie__pista span{white-space:nowrap;font-size:clamp(18px,2.2vw,30px);font-weight:900;text-transform:uppercase;letter-spacing:-.01em;line-height:1.1}
.pie__arriba{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(40px,5vw,64px)}
.pie__logo img{height:clamp(56px,6vw,84px);width:auto;transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.pie__logo:hover img{transform:scale(1.04)}
.pie__cta{display:inline-flex;align-items:center;gap:12px;background:var(--lime);color:var(--tinta);font-size:15px;font-weight:900;
  letter-spacing:.04em;text-transform:uppercase;padding:16px 30px;position:relative;overflow:hidden;transition:color .3s}
.pie__cta::before{content:"";position:absolute;inset:0;background:var(--papel);transform:translateX(-101%);transition:transform .38s cubic-bezier(.2,.7,.3,1)}
.pie__cta:hover::before{transform:none}
.pie__cta > *{position:relative}
.pie__cta .flecha{transition:transform .3s}
.pie__cta:hover .flecha{transform:translateX(6px)}
.pie__cols{gap:clamp(32px,5vw,80px);grid-template-columns:repeat(2,minmax(0,1fr))}
.pie__cols h4{margin-bottom:20px;font-size:11px;letter-spacing:.24em;font-weight:700}
.pie__cols li{font-size:17px;margin-bottom:12px}
.pie__cols li a{position:relative;display:inline-block;transition:color .25s}
.pie__cols li a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--lime);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.pie__cols li a:hover{color:var(--papel)}
.pie__cols li a:hover::after{transform:scaleX(1)}
/* los partners, en grande: son las tres firmas que avalan la casa */
.pie__partners li{font-size:clamp(24px,2.6vw,36px);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;color:var(--papel);
  display:flex;align-items:center;gap:14px;margin-bottom:10px;transition:color .25s,transform .35s cubic-bezier(.2,.7,.3,1)}
.pie__partners li::before{content:"";width:8px;height:8px;background:var(--lime);flex:none;transition:transform .35s}
.pie__partners li:hover{color:var(--lime);transform:translateX(6px)}
.pie__partners li:hover::before{transform:rotate(45deg)}
.pie__linea{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){.pie__pista{animation:none}}
@media (max-width:980px){.pie__cols{grid-template-columns:1fr}.pie__arriba{margin-bottom:36px}}
/* ═══════════════ el resaltado «curación AdTech» se anima (02/09) ═══════════════
   Sergio: «¿le podemos agregar alguna animación sin quitarle el diseño?».
   El 31/08 se descartó un marcador que barría la palabra porque la palabra
   DESAPARECÍA mientras pasaba el bloque (tinta sobre tinta). Esto es otra
   cosa: la palabra está siempre a la vista. El resaltado nace como texto
   tinta sin caja; al aterrizar el título, un ::before —la caja tinta con
   una copia lime del texto (attr(data-t), la pone escena.js)— se revela de
   izquierda a derecha con clip-path, así el cambio tinta→lime va exacto con
   el borde de la caja. Después, cada 5 s, un brillo lo recorre.
   Sin JS no hay data-t ni .rv: el resaltado es el de siempre, estático. */
/* ⚠️ Sin overflow:hidden: un inline-block con overflow apoya su BORDE de abajo
   en la línea base y el resaltado subía 6px respecto de «NUESTRA» (Sergio,
   con captura). Con vertical-align:baseline el texto de adentro es el que
   se alinea. El brillo va como capa de fondo del ::before, no como ::after
   desbordado. */
.acento[data-t]{position:relative;display:inline-block;vertical-align:baseline;background:transparent;color:var(--tinta);white-space:nowrap}
.acento[data-t]::before{content:attr(data-t);position:absolute;inset:0;padding:0 .16em .04em;box-sizing:border-box;
  color:var(--lime);clip-path:inset(0 0 0 0);
  background:linear-gradient(105deg,transparent 40%,rgba(246,248,248,.28) 50%,transparent 60%) no-repeat -80% 0 / 60% 100%,var(--tinta);
  animation:acentoBrillo 5s ease-in-out 2.4s infinite}
/* sólo con .rv--on: la clase .rv sola llega al cargar y el retraso contaría
   desde ahí, no desde que el título entra */
.rv--on .acento[data-t]::before{animation:acentoRevela 1s cubic-bezier(.2,.7,.3,1) .85s both,acentoBrillo 5s ease-in-out 2.4s infinite}
@keyframes acentoRevela{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes acentoBrillo{0%{background-position:-80% 0,0 0}24%{background-position:180% 0,0 0}100%{background-position:180% 0,0 0}}
.sec--tinta .acento[data-t]{color:var(--papel)}
.sec--tinta .acento[data-t]::before{color:var(--tinta);
  background:linear-gradient(105deg,transparent 40%,rgba(1,51,66,.22) 50%,transparent 60%) no-repeat -80% 0 / 60% 100%,var(--lime)}
@media (prefers-reduced-motion:reduce){.acento[data-t]::before,.rv--on .acento[data-t]::before{animation:none}}

/* el cierre de la banda del home llega al margen derecho (Sergio, 02/09) */
.banda .cierre{margin-top:clamp(40px,5vw,64px)}
.banda .cierre p{max-width:none;font-size:clamp(19px,2.1vw,26px)}

/* ═══════════════ la barra en el teléfono (02/09): menú hamburguesa ═══════════════
   Sergio: «a la versión mobile le falta el menú acordeón para ir a las
   subpáginas». A ≤820px: la barra muestra logo + «Hablemos» chico + el botón
   de tres líneas; `.nav__links` pasa a ser un PANEL a pantalla completa en
   tinta que entra desde la derecha, con los enlaces grandes entrando de a
   uno y el CTA abajo. escena.js pone `body.menu-abierto` y `aria-expanded`;
   Escape, un enlace o agrandar la ventana lo cierran. Sin JS: el botón no
   hace nada, pero los enlaces siguen en el pie. */
.nav__ang{display:none;align-items:center;gap:10px}
.nav__menu{appearance:none;background:transparent;border:0;padding:8px;margin:-8px;cursor:pointer;width:44px;height:44px;
  display:flex;flex-direction:column;justify-content:center;gap:5px;align-items:center}
.nav__menu span{display:block;width:24px;height:2px;background:var(--papel);transition:transform .35s cubic-bezier(.2,.7,.3,1),opacity .25s}
body.menu-abierto .nav__menu span:nth-child(1){transform:translateY(7px) rotate(45deg);background:var(--lime)}
body.menu-abierto .nav__menu span:nth-child(2){opacity:0;transform:scaleX(0)}
body.menu-abierto .nav__menu span:nth-child(3){transform:translateY(-7px) rotate(-45deg);background:var(--lime)}
@media (max-width:820px){
  .nav{gap:12px}
  .nav__ang{display:flex}
  /* el CTA de la barra vive fuera de .nav__links, así que los estilos de
     `.nav__links a.nav__cta` no le llegan: van acá */
  .nav__ang .nav__cta{background:var(--lime);color:var(--tinta);font-size:12px;font-weight:900;letter-spacing:.04em;padding:11px 16px}
  .nav__links{position:fixed;left:0;right:0;top:var(--barra,70px);height:calc(100dvh - var(--barra,70px));z-index:-1;
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    padding:28px var(--lado) 32px;
    background:var(--tinta);background-image:radial-gradient(rgba(246,248,248,.13) 1px,transparent 1px);background-size:22px 22px;
    transform:translateX(100%);visibility:hidden;transition:transform .45s cubic-bezier(.2,.7,.3,1),visibility 0s .45s}
  body.menu-abierto .nav__links{transform:none;visibility:visible;transition:transform .45s cubic-bezier(.2,.7,.3,1),visibility 0s}
  .nav__links a:not(.nav__cta){display:block;padding:14px 0;border-bottom:1px solid var(--papel-20);
    font-size:clamp(26px,7.5vw,40px);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:1;color:var(--papel);
    opacity:0;transform:translateX(-18px);animation:none;transition:opacity .4s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
  body.menu-abierto .nav__links a:not(.nav__cta){opacity:1;transform:none}
  body.menu-abierto .nav__links a:nth-child(1){transition-delay:.12s}body.menu-abierto .nav__links a:nth-child(2){transition-delay:.18s}
  body.menu-abierto .nav__links a:nth-child(3){transition-delay:.24s}body.menu-abierto .nav__links a:nth-child(4){transition-delay:.30s}
  body.menu-abierto .nav__links a:nth-child(5){transition-delay:.36s}body.menu-abierto .nav__links a:nth-child(6){transition-delay:.42s}
  .nav__links a[aria-current]{padding-left:22px;color:var(--lime)}
  .nav__links a[aria-current]::before{width:9px;height:9px;margin-top:-4.5px}
  .nav__links a:not(.nav__cta)::after{display:none}
  .nav__cursor{display:none}
  .nav__links a.nav__cta:not(.nav__cta--m){margin-top:auto;text-align:center;padding:18px 20px;font-size:15px;
    animation:none;opacity:0;transform:translateY(12px);transition:opacity .4s .48s,transform .5s .48s cubic-bezier(.2,.7,.3,1)}
  body.menu-abierto .nav__links a.nav__cta:not(.nav__cta--m){opacity:1;transform:none}
  body.menu-abierto{overflow:hidden}
  /* en el home la barra se esconde sobre el hero: con el menú abierto no */
  body.menu-abierto .nav.nav--fuera{transform:none}
}
@media (prefers-reduced-motion:reduce){.nav__links,.nav__links a,.nav__menu span{transition:none !important}}
/* las figuras van SIN pie (Sergio, 02/09: pidió sacar el de la FIG. 01 y el
   de la FIG. 06 uno atrás del otro; era el último rótulo editorial que
   quedaba). Los pies siguen en el HTML —los arma figuras.py— pero no se
   muestran en ninguna figura del sitio. */
.fig-pie{display:none}

/* los badges de partnership, cuando lleguen (assets/partners/): cuatro en
   fila, mismo alto, colores originales (las guías de cada programa no
   permiten recolorearlos), y suben un pelo al pasar */
/* los archivos vienen con fondo blanco (Meta lo pide así sobre oscuro), así
   que TODOS van sobre una tarjeta blanca del mismo alto: es lo que los
   unifica. Google es cuadrado, los demás apaisados: el alto manda. */
/* Denise (02/09): «esto lo haría más delicado, chico». Salieron con 84px de
   alto y sombra grande y se comían el pie: bajan a 44 (38 en el teléfono)
   —a 52 Multilocal caía solo a una segunda fila—, padding y radio finos,
   hover apenas. Los colores no se tocan. */
/* Denise (03/09): «me quedó muy chiquito Google, si pudiéramos ver que
   equiparen». El de Google es el badge oficial cuadrado, sin margen; los
   otros tres traían 30–60% de lienzo blanco vacío y por eso, en la misma
   tarjeta, se veían grandes y Google chico. Los PNG se recortan al
   contenido (originales en assets/partners/originales/) y la tarjeta sube a
   52 con menos padding: Google gana ~40%; los apaisados tienen tope de
   ancho para que Pinterest (7:1) no se coma la fila. */
.pie__partners--badges{display:flex;flex-wrap:wrap;gap:6px;align-items:stretch}
.pie__partners--badges li{margin:0;display:flex;align-items:center;background:#fff;border-radius:4px;padding:12px 14px;
  height:64px;transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s}   /* 64 (Sergio, 03/09, comparando 52/64/72 contra una referencia) */
.pie__partners--badges li.pie__badge--cuadrado{padding:3px 6px}   /* el cuadrado llena la tarjeta; los apaisados llevan aire */
.pie__partners--badges li::before{display:none}
.pie__partners--badges img{height:100%;width:auto;max-width:186px;object-fit:contain;display:block}
.pie__partners--badges li:hover{transform:translateY(-2px);color:inherit;box-shadow:0 10px 24px -14px rgba(0,0,0,.5)}
@media (max-width:980px){.pie__partners--badges li{height:52px;padding:10px 12px}.pie__partners--badges li.pie__badge--cuadrado{padding:3px 5px}.pie__partners--badges img{max-width:140px}}

/* ── 21 · El pie como mapa del sitio (02/09) ──
   Referencia de Sergio: pie de agencia a cinco columnas. Una columna por
   módulo con sus servicios, Conocenos, Encontranos (ciudad en negrita +
   dirección, redes con ícono) y los badges de partnership en una fila
   abajo. Va AL FINAL del archivo porque pisa el `.pie__cols` a dos
   columnas de arriba (regla 7). Cinco columnas de 160+ a ancho de grilla;
   a menos ancho la grilla se acomoda sola: 3 en tablet, 2 en el teléfono. */
.pie__cols{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:44px clamp(24px,3vw,48px)}
.pie__cols h4{text-transform:uppercase}  /* los nombres de módulo vienen en caja mixta; los rótulos del pie van todos iguales */
.pie__cols li{font-size:15px;margin-bottom:10px}
.pie__cols li a{display:inline-block}
.pie__ciudad{display:block;font-weight:900;text-transform:uppercase;letter-spacing:.02em;color:var(--papel);margin-bottom:4px}
.pie__oficinas li a span{display:block;font-weight:500;color:var(--papel-78);font-size:14px}
.pie__redes{margin-top:24px}
.pie__redes li a{display:inline-flex;align-items:center;gap:10px}
.pie__redes svg{width:16px;height:16px;fill:currentColor;flex:none}
.pie__partners-fila{margin-top:clamp(44px,5vw,64px)}
.pie__partners-fila ul{margin:0;padding:0;list-style:none}  /* fuera de .pie__cols la ul traía sus 40px de sangría */
.pie__partners-fila h4{margin:0 0 16px;font-size:11px;letter-spacing:.24em;font-weight:700;color:var(--lime);
  font-family:"IBM Plex Mono",ui-monospace,monospace}
@media (max-width:980px){.pie__cols{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}
@media (max-width:620px){.pie__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 24px}}

/* ── 22 · Equipo con LinkedIn (03/09) ──
   Si STRIKE pasa la URL, la tarjeta entera es un enlace: mismo dibujo, y al
   pasar el cursor el nombre toma lime (además de la foto a color, que ya
   estaba). Sin URL no cambia nada. */
.equipo figure.con-enlace a{display:block;color:inherit;text-decoration:none}
.equipo figure.con-enlace:hover figcaption{color:var(--lime)}