/* ============================================================
   RELATO — la reestructura narrativa
   Se carga DESPUES de sections.css y solo agrega o corrige: las
   capas del mundo, el riel de capitulos, la pista de scroll, la
   secuencia del claim, los tres actos del metodo y el aire nuevo
   de momentos y nosotros.

   Tres reglas que ordenan todo el archivo:

   1. El CSS por defecto es el fallback completo. Sin JS, sin GSAP
      o con prefers-reduced-motion, cada secuencia se lee apilada
      y entera. Las clases html.con-relato (pins activos),
      html.con-riel (riel activo) y html.con-mundo (canvas activo)
      las agregan los scripts SOLO cuando lo que prometen ya
      existe — la misma regla del velo: nada se esconde hasta que
      algo puede traerlo de vuelta.

   2. Ningun color fuera de tokens.css. El magenta solo pinta lo
      activo o lo que cambia: el guion del riel, el numero del
      acto en curso, los puntos-primitivo que ya eran marca.

   3. Sin sombras, sin radios, sin texturas nuevas.
   ============================================================ */

/* ------------------------------------------------------------
   CAPAS DEL CONTRATO
   El canvas del mundo es el suelo (z 0, fijo, nunca interactivo);
   el contenido scrollea por encima (z 1). El nav ya queda arriba
   por su propio z-index:100 — no se toca.
   ------------------------------------------------------------ */
#mundo {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

#smooth-wrapper {
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------------
   CON-MUNDO — el canvas es el suelo
   SOLO bajo html.con-mundo (mundo.js la agrega recien cuando el
   shader compila) las secciones sueltan su fondo para que la
   materia continua se vea. Sin la clase, estos fondos son el
   fallback completo y no se tocan.
   Las lineas de regla entre secciones tambien se apagan: un
   hairline que corta una materia continua la vuelve a hacer
   indice, que es exactamente lo que este relato deshace.
   ------------------------------------------------------------ */
html.con-mundo .section,
html.con-mundo .section--dark,
html.con-mundo .renglon-intro,
html.con-mundo .acto {
  background: transparent;
}

html.con-mundo .section {
  border-top-color: transparent;
}

/* El pie queda fuera del mundo: es la ficha tecnica, no el relato.
   Con fondo propio sigue legible aunque el canvas debajo haya
   quedado en void despues del cierre. */
/* El cierre guarda su propio void aunque haya mundo: su titulo entra
   al viewport mientras el canvas todavia esta claro y medimos 1.07:1
   (invisible) durante una pantalla entera. Con suelo propio el titulo
   llega legible desde el primer pixel; el fundido del canvas sigue
   corriendo detras, para el riel y el nav. */
html.con-mundo .close {
  background: var(--void);
}

html.con-mundo .foot {
  background: var(--paper);
}

/* ------------------------------------------------------------
   RIEL DE CAPITULOS
   Mono 11px, mayusculas, tracking 0.16em — la misma voz que todas
   las etiquetas del sitio. El activo toma el magenta y su guion se
   alarga: el acento marca la posicion actual, que es lo unico que
   la marca le permite marcar.
   Oculto por defecto: lo enciende relato.js (html.con-riel) recien
   cuando puede mantener el estado activo. Un riel sin estado es un
   adorno, y sobre los mundos oscuros seria ademas ilegible.
   ------------------------------------------------------------ */
.riel {
  display: none;
  position: fixed;
  left: clamp(0.9rem, 1.8vw, 2.2rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 80;                    /* sobre el contenido (1), bajo el nav (100) */
  flex-direction: column;
  gap: 0.85rem;
  font-family: var(--mono);
  font-size: var(--t-mono);       /* 11px */
  font-weight: 500;
  letter-spacing: var(--tr-mono); /* 0.16em */
  text-transform: uppercase;
  color: var(--ink-3);
  /* El color acompaña al tema cuando el mundo se oscurece. */
  transition: color 0.5s var(--ease-in);
}

html.con-riel .riel { display: flex; }

/* Sacada la barra de arriba en desktop: con el riel al costado, un nav
   full-width arriba con los mismos destinos era decir dos veces lo mismo.
   Solo cuando el riel esta (>1080 y con-riel): en movil el riel no se
   dibuja y la barra vuelve a ser la unica navegacion. El progreso de
   scroll (la linea magenta) no es parte del nav y se queda. */
@media (min-width: 1080.02px) {
  html.con-riel .nav { display: none; }
}

/* El ES/EN al pie del riel. Separado de los capitulos por una regla fina,
   con el mismo silencio mono. Hereda el color del tema del riel. */
.riel__lang {
  margin-top: clamp(1.1rem, 2.4vh, 1.8rem);
  padding-top: clamp(0.8rem, 1.8vh, 1.2rem);
  border-top: 1px solid currentColor;
  opacity: 0.9;
  gap: 0.5rem;
}
.riel__lang .lang__b {
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-mono);
}
/* Los botones de idioma traen su propio color de base.css (tinta), que
   sobre los mundos oscuros no se lee. En el riel siguen el tema como el
   resto: gris claro en oscuro, blanco el activo. */
body[data-tema="oscuro"] .riel__lang .lang__b { color: var(--void-ink-2); }
body[data-tema="oscuro"] .riel__lang .lang__b.is-on { color: var(--void-ink); }
body[data-tema="oscuro"] .riel__lang .lang__b:hover { color: var(--reagent-lift); }

/* El riel vive en un hueco propio, no sobre el texto: medido a 1440,
   sus items pisaban el titular del hero (73x22px de solape) y hasta
   interceptaban el click del mailto del cierre. Con el riel activo el
   contenido corre a la derecha exactamente el ancho que el riel usa. */
@media (min-width: 1080.02px) {
  /* Mismo umbral que oculta el riel: bajo 1080 la clase con-riel sigue
     en <html> pero el riel no se dibuja, y este hueco no tiene que
     correr el contenido de un riel que no esta. */
  html.con-riel .wrap,
  html.con-riel .hero__inner,
  html.con-riel .acto__escena,
  html.con-riel .foot__inner,
  html.con-riel .claim__title {
    padding-inline-start: calc(var(--gutter) + clamp(4.5rem, 6vw, 6rem));
  }
}

/* Y aunque algo vuelva a quedar debajo, el riel solo es clickeable en
   sus propios links: la caja no roba ningun puntero. */
.riel { pointer-events: none; }
.riel a { pointer-events: auto; }

/* Al llegar al pie el riel ya conto todo el relato: se retira antes de
   quedar a caballo del borde void/papel, donde ningun tema le da AA. */
.riel { transition: color 0.5s var(--ease-in), opacity 0.4s var(--ease-in); }
.riel.is-retirado { opacity: 0; }
.riel.is-retirado a { pointer-events: none; }

/* Bajo 1080px no hay margen que lo aguante sin pisar el texto. */
@media (max-width: 1080px) {
  html.con-riel .riel { display: none; }
}

.riel a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-block: 0.15rem;         /* blanco util para el puntero, invisible al ojo */
  transition: color var(--fast) var(--ease-in);
}

.riel a[hidden] { display: none; }

.riel__guion {
  display: block;
  width: 2.1rem;
  height: 1px;
  background: currentColor;
  /* El guion crece por transform, no por width: el ancho final ya esta
     puesto y el reposo es una escala. Nada re-mide el layout al activarse. */
  transform: scaleX(0.43);
  transform-origin: left center;
  transition: transform var(--mid) var(--ease), background var(--fast) linear;
}

/* Activo y hover dicen lo mismo — "aca" y "podrias estar aca" — con
   el mismo gesto. reagent-deep sobre claro y reagent-lift sobre
   oscuro: es texto de 11px y tiene que dar AA en los dos suelos. */
.riel a:hover,
.riel a.is-activa { color: var(--reagent-deep); }
.riel a.is-activa .riel__guion { transform: scaleX(1); background: var(--reagent-deep); }

body[data-tema="oscuro"] .riel { color: var(--void-ink-2); }
body[data-tema="oscuro"] .riel a:hover,
body[data-tema="oscuro"] .riel a.is-activa { color: var(--reagent-lift); }
body[data-tema="oscuro"] .riel a.is-activa .riel__guion { background: var(--reagent-lift); }

/* ------------------------------------------------------------
   PISTA DE SCROLL
   Discreta a proposito: los botones del hero ya dicen a DONDE ir;
   esto solo dice que la pagina sigue. relato.js la desvanece con
   el primer scroll; sin JS queda quieta al pie del hero.
   ------------------------------------------------------------ */
.hero__pista {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--ink-3);
}

.hero__pista-flecha {
  display: inline-block;
  animation: pista-baja 2.2s var(--ease) infinite;
}

/* La flecha respira; el texto no. Bajo reduced-motion la animacion
   ya la mata el guard global de tokens.css. */
@keyframes pista-baja {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(0.3em); }
}

/* Llega con el resto del hero, no antes. */
.js .hero__pista { opacity: 0; transition: opacity 0.9s var(--ease-in); }
.js.is-loaded .hero__pista { opacity: 1; transition-delay: 0.9s; }

/* ------------------------------------------------------------
   EL CLAIM EN TRES BEATS
   Por defecto (sin pins): los tres beats apilados en el flujo, cada
   uno enorme, y el flip lab/lab ya resuelto en su estado final —
   la serif visible, el cuadrado puesto. Eso es lo que lee quien no
   tiene JS o pidio menos movimiento.
   Bajo html.con-relato los beats se apilan en la MISMA celda de un
   grid de una pantalla y el timeline scrubbed de relato.js los va
   fundiendo de a uno.
   ------------------------------------------------------------ */
.claim {
  padding: clamp(2rem, 6vh, 4rem) var(--gutter);
}

.claim__title {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 8vh, 5rem);
  max-width: var(--max);
  margin-inline: auto;
}

.claim__beat {
  display: block;
  font-size: var(--t-display);
  line-height: 0.95;
  letter-spacing: var(--tr-display);
  font-variation-settings: 'wdth' 104, 'wght' 500;
  text-wrap: balance;
}

/* El flip lab/lab del tercer beat vive en la variable --flip del
   propio span. Por que una variable y no clases sobre los nodos de
   adentro: el switch de idioma reescribe el innerHTML del beat y
   cualquier referencia a .lab__a / .lab__b muere con el; el estilo
   inline con la variable, en cambio, queda en el span y sobrevive.
   En reposo (fallback) --flip es 1: la serif ya llego. relato.js lo
   pone en 0 y lo anima a 1 dentro del pin. */
.claim__beat--lab { --flip: 1; }

.claim__beat--lab .lab {
  display: inline-grid;
  vertical-align: baseline;
}

.claim__beat--lab .lab__a,
.claim__beat--lab .lab__b { grid-area: 1 / 1; }

.claim__beat--lab .lab__a { opacity: calc(1 - var(--flip)); }

.claim__beat--lab .lab__b {
  opacity: var(--flip);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
}

/* El punto es el cuadrado — el mismo primitivo que la marca le da a
   Make — y crece desde la linea de base, que es donde un punto vive. */
.claim__beat--lab .dot {
  display: inline-block;
  width: 0.15em;
  height: 0.15em;
  margin-left: 0.05em;
  background: var(--reagent);
  color: transparent;      /* el "." queda en el markup para copiar y leer en voz alta */
  overflow: hidden;
  vertical-align: baseline;
  transform: scale(var(--flip));
  transform-origin: 50% 100%;
}

/* Con pins: el escenario mide una pantalla y los beats comparten la
   celda central. Los estados iniciales de opacidad los pone gsap en
   el mismo tick en que esta clase aparece, asi que nunca se ven los
   tres superpuestos. */
/* El CRITICO: el claim colgaba directo de #what, que es flex, y GSAP
   apaga pinSpacing cuando el padre del pin es flex — el pin no reservaba
   espacio y TODO lo de abajo (Exploramos, el triptico, Dos momentos)
   desfilaba por debajo de los beats gigantes. Este envoltorio en bloque
   le devuelve a GSAP un padre que si reserva el alto del pin. */
.claim-hold { display: block; }

html.con-relato .claim {
  height: 100vh;
  height: 100svh;
  padding-block: 0;
  display: grid;
}

html.con-relato .claim__title {
  display: grid;
  place-items: center;
  gap: 0;
  width: 100%;
  max-width: none;
  height: 100%;
}

html.con-relato .claim__beat {
  grid-area: 1 / 1;
  text-align: center;
  max-width: min(92vw, 90rem);
}

/* ------------------------------------------------------------
   LOS TRES ACTOS
   Por defecto, cada acto es un afiche apilado: numero, nombre
   gigante, disciplina, parrafo, tags. Legible entero sin JS.
   Bajo html.con-relato la escena mide una pantalla, cabeza y
   cuerpo comparten la celda, y el timeline de relato.js recede el
   nombre y trae el cuerpo y los tags.

   Los colores viven en tres variables por acto (tinta, tinta-2,
   acento) para que el tema pueda moverlas de una sola vez cuando
   el mundo funde de claro a oscuro.
   ------------------------------------------------------------ */
.acto {
  padding-block: clamp(4rem, 12vh, 8rem);
}

/* Fallback estatico: cada acto trae su propio suelo. Los oscuros ya
   lo traen por .section--dark; el claro apoya en el papel del body.
   El acento chico (numeros, 11px) usa deep sobre claro y lift sobre
   oscuro, como manda tokens.css. */
.acto--oscuro {
  background: var(--void);
  color: var(--void-ink);
  --acto-tinta: var(--void-ink);
  --acto-tinta-2: var(--void-ink-2);
  --acto-acento: var(--reagent-lift);
}

.acto--claro {
  background: var(--paper);
  color: var(--ink);
  --acto-tinta: var(--ink);
  --acto-tinta-2: var(--ink-2);
  --acto-acento: var(--reagent-deep);
}

.acto__escena {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.acto__num {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: var(--tr-mono);
  font-variant-numeric: tabular-nums;
  color: var(--acto-tinta-2);
  margin-bottom: clamp(0.8rem, 2vh, 1.4rem);
  transition: color var(--mid) var(--ease-in);
}

/* El numero se enciende mientras su acto esta en curso (la clase la
   pone el pin). Posicion actual: lo unico que el acento puede decir. */
.acto.is-viva .acto__num { color: var(--acto-acento); }

/* El nombre puede superar --t-display: la escala ES la jerarquia,
   dice el manual, y aca la pantalla entera es para la palabra. */
.acto__nombre {
  font-size: clamp(3.4rem, 15vw, 16rem);
  line-height: 0.84;
  letter-spacing: -0.05em;
  font-variation-settings: 'wdth' 108, 'wght' 600;
  color: var(--acto-tinta);
  transition: color 0.5s var(--ease-in);
}

/* El punto del nombre es el primitivo del slogan — triangulo para
   Think, cuadrado para Make, circulo para Launch. Los clip-path de
   .dot--tri / --sq / --cir ya son globales en base.css; aca solo va
   la caja. A este tamaño es un plano de marca, no texto chico. */
.acto__nombre .dot {
  display: inline-block;
  width: 0.12em;
  height: 0.12em;
  margin-left: 0.06em;
  background: var(--reagent);
  color: transparent;
  overflow: hidden;
  vertical-align: baseline;
}

.acto__cuerpo {
  margin-top: clamp(2rem, 5vh, 3.5rem);
  max-width: 56rem;
}

.acto__disciplina {
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  line-height: 1.0;
  letter-spacing: -0.038em;
  font-variation-settings: 'wdth' 104, 'wght' 600;
  color: var(--acto-tinta);
  transition: color 0.5s var(--ease-in);
}

/* El PRIMITIVO del acto CORONA el titulo: bloque centrado arriba de la
   frase (izquierda en mobile). ▲ Think, ■ Make, ● Launch — magenta pleno,
   el mismo que su punto y sus vinetas, y el punto de partida del transform
   hacia el acto siguiente. */
/* La parada intermedia en el titulo se retiro: el primitivo va DIRECTO del
   nombre al renglon (Think▲ → Think▲ chiquito arriba). El span queda en el
   markup por el switch de idioma, pero no se pinta. */
.acto__marca { display: none; }

/* EL DOCK: el lugar donde el primitivo ATERRIZA en el renglon del metodo
   — "Think▲" arriba = paso cumplido. Oculto hasta que el vuelo lo trae
   (desktop, relato.js) o el acto queda hecho (mobile, estatico). */
.renglon__dock {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-left: 0.3em;
  background: var(--reagent);
  opacity: 0;
  visibility: hidden;
}
html.relato-movil .renglon__w.is-hecha .renglon__dock,
html.relato-movil .renglon__w.is-activa .renglon__dock {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease;
}

.acto__how {
  margin-top: clamp(0.9rem, 1.8vh, 1.3rem);
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--acto-tinta-2);
  max-width: 44ch;
  text-wrap: balance;
  transition: color 0.5s var(--ease-in);
}

/* La constelacion de etiquetas. Hereda la voz de .tags y el tamaño
   subido de #method .tags (el id vive ahora en el div y el selector
   de sections.css sigue alcanzando). El color va por variable para
   acompañar al tema; el selector .acto .tags empata en especificidad
   con el .section--dark .tags de sections.css y gana por orden de
   carga — con .acto__tags solo, el gris del fondo oscuro quedaria
   clavado aunque el mundo fundiera a claro. */
.acto__tags { margin-top: clamp(1.6rem, 3vh, 2.4rem); }

.acto .tags {
  color: var(--acto-tinta-2);
  transition: color 0.5s var(--ease-in);
}

.acto .tags li::after { color: var(--acto-tinta-2); }

/* Con pins: la escena es la pantalla. El nombre parte centrado y sube
   a cabecera; el cuerpo vive ABSOLUTO en la mitad de abajo, asi nunca
   comparte lugar con el nombre — se acabo el texto sobre texto. */
html.con-relato .acto { padding-block: 0; }

/* Con pins: la escena es la pantalla. El nombre parte centrado y sube
   a cabecera; el cuerpo vive ABSOLUTO en la mitad de abajo, asi nunca
   comparte lugar con el nombre — se acabo el texto sobre texto. */
html.con-relato .acto__escena {
  height: 100vh;
  height: 100svh;
  max-width: none;
  display: grid;
  place-items: center;
  position: relative;
}

html.con-relato .acto__cabeza {
  grid-area: 1 / 1;
  text-align: center;
}

/* El nombre ahora se va al renglon del metodo (arriba), asi que el detalle
   se CENTRA en la pantalla (antes vivia a 56% para dejarle lugar al nombre;
   sin nombre eso dejaba un hueco). Se centra con yPercent:-50 desde el JS. */
html.con-relato .acto__cuerpo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(92vw, 44rem);
  margin-top: 0;
  text-align: center;
  z-index: 1;
}

/* En desktop la disciplina no necesita ser gigante: es el titular del
   detalle, no la palabra-poster. Escala mas contenida. */
html.con-relato .acto__disciplina {
  font-size: clamp(1.5rem, 2.7vw, 2.4rem);
  line-height: 1.06;
}

html.con-relato .acto__how { margin-inline: auto; }
html.con-relato .acto__tags { justify-content: center; }

/* ------------------------------------------------------------
   TEMA DE TEXTO — data-tema en <body>
   relato.js lo conmuta cerca del punto medio de cada fundido del
   mundo. SOLO importa bajo con-mundo: sin canvas, cada seccion
   conserva su fondo propio y forzar el texto al tema del mundo
   que no existe lo dejaria ilegible sobre su propia caja.
   La transicion de color de los elementos de arriba es la que
   hace que el texto acompañe al fundido en vez de saltar.
   ------------------------------------------------------------ */
html.con-mundo body[data-tema="oscuro"] .acto {
  color: var(--void-ink);
  --acto-tinta: var(--void-ink);
  --acto-tinta-2: var(--void-ink-2);
  --acto-acento: var(--reagent-lift);
}

html.con-mundo body[data-tema="claro"] .acto {
  color: var(--ink);
  --acto-tinta: var(--ink);
  --acto-tinta-2: var(--ink-2);
  --acto-acento: var(--reagent-deep);
}

/* ------------------------------------------------------------
   AIRE NUEVO
   Momentos respira una pantalla y media; nosotros, un poco mas de
   una. La especificidad iguala a la del page-effect de
   sections.css (#main > section:not(#method)) y este archivo
   carga despues, asi que gana el min-height nuevo.
   ------------------------------------------------------------ */
#main > section#momentos {
  min-height: 150vh;
  min-height: 150svh;
}

#main > section#about {
  min-height: 130vh;
  min-height: 130svh;
}

/* ------------------------------------------------------------
   HERO — menos cliche, mas pear
   Fuera el eyebrow (el detector lo marca: label mono sobre titular
   gigante = el hero SaaS por defecto) y el segundo CTA. Una sola
   columna a la izquierda; el slogan pasa de bloque grande con borde a
   una etiqueta mono chica (el "AT YOUR SERVICE" de pear); y el morph
   deja de flotar como logo a la derecha para ser una marca chica arriba.
   El mundo ya vive detras: el hero deja de competir consigo mismo con
   seis bloques apilados.
   ------------------------------------------------------------ */
.hero__eyebrow { display: none; }
.hero__actions .btn--line { display: none; }

.hero__slogan {
  border-bottom: 0;
  padding-bottom: 0;
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  gap: 0 0.7rem;
  color: var(--ink-3);
}

.hero__morph { justify-self: start; order: -1; }
.hero__morph .morph__stage { max-width: clamp(5rem, 10vw, 8rem); }

/* Una sola columna: deshace la grilla titulo-izquierda / logo-derecha
   de sections.css (esta hoja carga despues y gana por orden). */
@media (min-width: 1000px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__title,
  .hero__slogan,
  .hero__lead,
  .hero__actions,
  .hero__morph {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    align-self: auto;
  }
  .hero__title { font-size: clamp(3rem, 8vw, 8rem); max-width: 18ch; }
  .hero__lead { max-width: 40ch; }
}

/* ------------------------------------------------------------
   LA REGLA — medidor de scroll, el instrumento de TML en magenta
   Como la regla de pear pero rosa: linea con marcas (cada 12px) muy
   tenue, y una lectura viva que baja con la pagina. El magenta solido
   solo en la marca activa — lo unico que se esta midiendo. La enciende
   relato.js (con-regla) cuando puede seguir el scroll; sin JS no aparece.
   ------------------------------------------------------------ */
.regla {
  position: fixed;
  top: 0;
  bottom: 0;
  right: clamp(0.9rem, 3vw, 2.6rem);
  width: 12px;
  z-index: 70;                    /* sobre el contenido, bajo riel y nav */
  pointer-events: none;
  color: var(--reagent);
  opacity: 0;
  transition: opacity 0.6s var(--ease-in), color 0.5s var(--ease-in);
}
html.con-regla .regla { opacity: 1; }

.regla::before {                  /* la linea madre */
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 1px;
  background: currentColor;
  opacity: 0.30;
}
.regla::after {                   /* los ticks cada 12px */
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 5px;
  background-image: repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 12px);
  opacity: 0.22;
}

.regla__marca {                   /* la lectura viva; relato.js la baja */
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 0;
  will-change: transform;
}
.regla__marca::before {           /* el tick largo de la marca */
  content: '';
  position: absolute;
  right: 0; top: 0;
  width: 12px; height: 1px;
  background: currentColor;
}
.regla__pct {
  position: absolute;
  right: 16px; top: 0;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-mono);
  color: currentColor;
  white-space: nowrap;
}
.regla__pct::after { content: '%'; }

/* sobre mundo oscuro, el magenta que aclara */
body[data-tema="oscuro"] .regla { color: var(--reagent-lift); }

/* angosto: no hay margen para el instrumento, se guarda */
@media (max-width: 720px) {
  .regla { display: none; }
}

/* El hero ya no es la portada (la pagina abre en THINK): es un momento de
   declaracion. Centrado, el titular solo sobre el mundo vivo — sin logo
   flotando ni kicker (los actos ya dijeron Think/Make/Launch). */
.hero__inner { justify-items: center; text-align: center; }
.hero__lead { margin-inline: auto; }
.hero__actions { justify-content: center; }
@media (min-width: 1000px) {
  .hero__title,
  .hero__lead,
  .hero__actions { justify-self: center; }
  .hero__title { max-width: 20ch; }
}

/* ------------------------------------------------------------
   INTRO — las tres primitivas y el PUM hacia Think
   El velo cubre desde el primer paint (fondo tinta) para que Think no
   asome antes; las formas nacen invisibles y las trae GSAP. Sin motion,
   base.css oculta el velo entero.
   ------------------------------------------------------------ */
.js .veil {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--void);
}
.js .veil {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--void);
}
.veil__morph {
  width: clamp(8rem, 26vw, 15rem);
  height: auto;
  overflow: visible;
}
.veil__shape { fill: var(--reagent); }






/* ------------------------------------------------------------
   TUNEL — entrar al triangulo de Think hacia Make
   Seccion pinneada con un canvas que dibuja el tunel de triangulos,
   scrolleado por relato.js. Sin pins (fallback) es una franja corta
   que no estorba; el mundo tinta queda detras.
   ------------------------------------------------------------ */
.tunel {
  position: relative;
  height: 60vh;
}
html.con-relato .tunel {
  height: 100vh;
  height: 100svh;
}
.tunel__cv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* ------------------------------------------------------------
   DENTRO — el contenido del acto, ya adentro de la forma
   Se lee despues del tunel: Estrategia + el que hacemos + etiquetas,
   sobre el mundo oscuro. Centrado y contenido, como el resto del relato.
   ------------------------------------------------------------ */
.dentro__wrap {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
  padding-block: clamp(18vh, 26vh, 30vh);
}
.dentro__disciplina {
  font-size: var(--t-h3);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variation-settings: 'wdth' 104, 'wght' 500;
  color: var(--void-ink);
}
.dentro__how {
  margin-top: 0.9rem;
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--void-ink-2);
  max-width: 46ch;
  margin-inline: auto;
  text-wrap: balance;
}
.dentro__tags {
  margin-top: clamp(1.6rem, 3vh, 2.4rem);
  justify-content: center;
}

/* El contenido "dentro" adapta su color al tema: Make es claro (tinta),
   Think y Launch oscuros (texto claro). */
.dentro__disciplina { color: var(--ink); }
.dentro__how { color: var(--ink-2); }
body[data-tema="oscuro"] .dentro__disciplina { color: var(--void-ink); }
body[data-tema="oscuro"] .dentro__how { color: var(--void-ink-2); }

/* ------------------------------------------------------------
   PORTAL — entrar a la forma y emerger adentro
   El canvas traga la pantalla con la forma solida; el contenido vive por
   encima y lo revela relato.js al abrirse el portal. Sin pins (fallback)
   es una franja normal con el contenido visible; el canvas queda transparente.
   ------------------------------------------------------------ */
.portal {
  position: relative;
  padding-block: clamp(4rem, 12vh, 8rem);
}
html.con-relato .portal {
  height: 100vh;
  height: 100svh;
  padding-block: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.portal__cv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.portal__dentro {
  position: relative;
  z-index: 3;
  grid-area: 1 / 1;
}
html.con-relato .portal .dentro__wrap { padding-block: 0; }

/* Tags del detalle: mas aire, contenidas. */
html.con-relato .acto__tags {
  margin-top: clamp(1.6rem, 3vh, 2.4rem);
  gap: 0.55rem 1.05rem;
  max-width: 42rem;
  margin-inline: auto;
}

/* ------------------------------------------------------------
   DETALLE — los tags como grilla con la primitiva del acto de bullet
   La forma que se entro (▲ Think, ■ Make, ● Launch) marca cada etiqueta:
   la geometria del acto se repite en su detalle. Magenta solo en el bullet
   (el acento) y en el acento sobre la disciplina. Solo bajo con-relato.
   ------------------------------------------------------------ */
html.con-relato .acto__tags {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  gap: clamp(0.6rem, 1.4vh, 1rem) clamp(1.6rem, 3vw, 2.8rem);
  max-width: none;
  margin-top: clamp(1.8rem, 3.4vh, 2.6rem);
}
html.con-relato .acto__tags li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-align: left;
}
html.con-relato .acto__tags li::after { content: none; }
html.con-relato .acto__tags li::before {
  content: '';
  width: 0.52em;
  height: 0.52em;
  flex: none;
  background: var(--reagent-lift);
  transform: translateY(0.02em);
}
/* la primitiva de cada acto */
html.con-relato #acto-think .acto__tags li::before {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
html.con-relato #acto-launch .acto__tags li::before {
  border-radius: 50%;
}
/* Make: cuadrado (el default, sin recorte) */

/* ------------------------------------------------------------
   THINK — el detalle vive DENTRO del rosa (como pear sobre su color)
   Al entrar al triangulo el magenta no se va: se queda de suelo y el
   metodo se lee en blanco encima. La capa rosa cubre la escena; el
   cuerpo va por arriba. Solo Think (data-zoom).
   ------------------------------------------------------------ */
html.con-relato #acto-think .acto__escena { position: relative; }
html.con-relato #acto-think .acto__rosa {
  position: absolute;
  inset: 0;
  background: var(--reagent);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
}
html.con-relato #acto-think .acto__cuerpo { z-index: 1; }
html.con-relato #acto-think .acto__disciplina,
html.con-relato #acto-think .acto .tags { color: var(--on-reagent); }
html.con-relato #acto-think .acto__how { color: rgba(255, 255, 255, 0.86); }
html.con-relato #acto-think .acto__disciplina::before,
html.con-relato #acto-think .acto__tags li::before { background: var(--on-reagent); }
html.con-relato #acto-think .acto .tags li::after { color: var(--on-reagent); }

/* El rosa, VIVO: material magenta que se mueve (como los fondos del mundo,
   pero en el color principal). Dos manchas —una clara, una profunda— que
   derivan lento detras del texto blanco. El centro queda tranquilo para leer. */
html.con-relato #acto-think .acto__rosa { overflow: hidden; }
html.con-relato #acto-think .acto__rosa::before,
html.con-relato #acto-think .acto__rosa::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  opacity: 0.5;
  will-change: transform;
}
html.con-relato #acto-think .acto__rosa::before {
  width: 58vw; height: 58vw; top: -16vw; left: -12vw;
  background: var(--reagent-lift);
  animation: rosaA 15s ease-in-out infinite alternate;
}
html.con-relato #acto-think .acto__rosa::after {
  width: 52vw; height: 52vw; bottom: -16vw; right: -10vw;
  background: var(--reagent-deep);
  animation: rosaB 19s ease-in-out infinite alternate;
}
@keyframes rosaA { from { transform: translate(0, 0) scale(1); } to { transform: translate(26%, 18%) scale(1.25); } }
@keyframes rosaB { from { transform: translate(0, 0) scale(1); } to { transform: translate(-22%, -14%) scale(1.15); } }

/* ------------------------------------------------------------
   LA ROSA — capa FIJA que interconecta Think -> Make
   Vive fija (no dentro de una seccion que scrollea), asi puede persistir
   entre secciones y contraerse sobre el ■ de Make sin importar el hueco
   de los pins. Magenta vivo (dos manchas que derivan) con el detalle en
   blanco encima. La enciende y contrae relato.js.
   ------------------------------------------------------------ */
.rosa {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--reagent);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  display: grid;
  place-items: center;
}
.rosa__mancha {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
  will-change: transform;
}
.rosa__mancha--a { width: 60vw; height: 60vw; top: -18vw; left: -14vw; background: var(--reagent-lift); animation: rosaA 15s ease-in-out infinite alternate; }
.rosa__mancha--b { width: 55vw; height: 55vw; bottom: -18vw; right: -12vw; background: var(--reagent-deep); animation: rosaB 19s ease-in-out infinite alternate; }
.rosa__inner {
  position: relative;
  text-align: center;
  max-width: 46rem;
  padding-inline: var(--gutter);
  color: var(--on-reagent);
}
.rosa__disciplina {
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  line-height: 1.0;
  letter-spacing: -0.038em;
  font-variation-settings: 'wdth' 104, 'wght' 600;
}
.rosa__disciplina::before {
  content: '';
  display: block;
  width: clamp(1.8rem, 3vw, 2.8rem);
  height: 2px;
  margin: 0 auto clamp(0.9rem, 2vh, 1.5rem);
  background: var(--on-reagent);
}
.rosa__how {
  margin-top: clamp(0.9rem, 1.8vh, 1.3rem);
  font-size: var(--t-lead);
  line-height: 1.55;
  max-width: 44ch;
  margin-inline: auto;
  color: rgba(255, 255, 255, 0.86);
  text-wrap: balance;
}
.rosa__tags {
  list-style: none;
  margin: clamp(1.8rem, 3.4vh, 2.6rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  gap: clamp(0.6rem, 1.4vh, 1rem) clamp(1.6rem, 3vw, 2.8rem);
  font-family: var(--mono);
  font-size: clamp(0.72rem, 0.85vw, 0.8rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rosa__tags li { display: flex; align-items: center; gap: 0.55rem; }
.rosa__tags li::before {
  content: '';
  width: 0.52em;
  height: 0.52em;
  flex: none;
  background: var(--on-reagent);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

/* ---- PUENTE Make -> Launch: la bisagra que gira ----
   El ■ se despega de "Make.", GIRA y se redondea hasta ser el ● de Launch.
   Fija, cruza el hueco entre pins. Registro opuesto al rosa: no envuelve,
   es una pieza de forma pura que se transforma a la vista. */
.bridge {
  position: fixed;
  left: 72.3%;
  top: 58.6%;
  width: 26px;
  height: 26px;
  background: var(--reagent);
  border-radius: 0;
  z-index: 58;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  will-change: transform, border-radius, clip-path, left;
}

/* ------------------------------------------------------------
   LAB — el universo TML se enciende en el fondo de Make
   Instrumental de laboratorio (tubo, matraz, vaso, pipeta,
   molecula) y de negocio (grafico, crecimiento, target, idea,
   %). Capa fija a sangre completa, sobre el shader y bajo el
   contenido. relato.js la funde solo mientras Make esta viva.
   Cada icono es una linea tenue que PULSA a magenta, escalonada
   por --d: reactivos activandose. Sobrio, no invade el centro.
   ------------------------------------------------------------ */
.lab {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
}
.lab__ic {
  position: absolute;
  width: clamp(30px, 4vw, 54px);
  color: var(--void-ink);
  opacity: 0.055;
  animation: labEncender 8s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.lab__ic svg {
  display: block;
  width: 100%;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@keyframes labEncender {
  0%, 100% { opacity: 0.05; color: var(--void-ink); filter: none; }
  46%      { opacity: 0.06; color: var(--void-ink); filter: none; }
  58%      { opacity: 0.24; color: var(--reagent); filter: drop-shadow(0 0 7px rgba(230, 0, 110, 0.55)); }
  72%      { opacity: 0.07; color: var(--void-ink); filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lab__ic { animation: none; opacity: 0.07; }
}

/* Modo MOUSE (pointer fino): los iconos del lab se encienden segun la
   cercania del cursor — una linterna sobre el instrumental TML. La variable
   --k (0..1) por icono la setea relato.js; sin mouse, corre el pulso de
   arriba (labEncender) como respaldo. */
.lab--mouse .lab__ic {
  animation: none;
  opacity: calc(0.05 + 0.34 * var(--k, 0));
  color: color-mix(in srgb, var(--void-ink), var(--reagent) calc(var(--k, 0) * 100%));
  filter: drop-shadow(0 0 calc(10px * var(--k, 0)) rgba(230, 0, 110, calc(0.6 * var(--k, 0))));
  transition: opacity 0.28s ease, filter 0.28s ease, color 0.28s ease;
}

/* ------------------------------------------------------------
   TODO OSCURO — hero + secciones de contenido + pie
   Estas secciones heredaban el tema claro (tokens --ink/--rule/
   --paper). Ahora que su mundo es oscuro, REMAPEAMOS esos tokens
   a sus equivalentes oscuros dentro de ellas: texto, bordes,
   grises y fondos se invierten solos, sin reescribir cada regla.
   Descansa la vista y el sitio ya no salta de claro a oscuro. */
html.con-mundo body[data-tema="oscuro"] .hero,
html.con-mundo body[data-tema="oscuro"] .section,
html.con-mundo body[data-tema="oscuro"] .foot {
  --ink: var(--void-ink);
  --ink-2: var(--void-ink-2);
  --rule: var(--void-rule);
  --paper: var(--void);
  --paper-2: #141414;
  color: var(--void-ink);
}
html.con-mundo body[data-tema="oscuro"] .foot {
  background: var(--void);
}

/* ------------------------------------------------------------
   EL RENGLON DEL METODO — Think Make Launch se acomodan en fila
   Barra fija centrada arriba. Cada palabra nace desde abajo y se
   enciende al llegar a su acto (is-activa), y queda tenue cuando
   ya pasaste (is-hecha). El separador aparece con la palabra que
   lo sigue. Es el mapa del proceso: siempre sabes donde estas. */
.renglon {
  position: fixed;
  top: clamp(3.6rem, 6vh, 5rem);
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  pointer-events: none;
  font-family: var(--sans, sans-serif);
  font-weight: 600;
  font-size: clamp(0.95rem, 1.7vw, 1.35rem);
  letter-spacing: -0.015em;
  opacity: 0;
  will-change: opacity;
}
.renglon__fila {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: clamp(0.45rem, 1.3vw, 1rem);
}

.renglon__punto { color: var(--reagent); }

/* LA MARCA-CHIP: arriba a la derecha, siempre presente. Click y cicla
   sus tres estados — The Marketing Lab. -> TML. -> ▲ ■ ● — la identidad
   jugando con sus propias formas. Solo donde el nav no esta (>1080). */
.marca-chip {
  position: fixed;
  top: clamp(1.1rem, 2.6vh, 1.8rem);
  left: clamp(1.1rem, 2vw, 2rem);
  z-index: 95;
  display: none;
  background: none;
  border: 0;
  padding: 0.35rem 0.2rem;
  cursor: pointer;
  font-family: var(--sans, sans-serif);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
  color: var(--void-ink);
}
@media (min-width: 1080.02px) {
  html.con-riel .marca-chip { display: grid; }
}
.marca-chip__v {
  grid-area: 1 / 1;
  justify-self: start;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.marca-chip__v.is-on { opacity: 1; transform: none; }
.marca-chip__v--formas { display: inline-flex; align-items: center; }
/* el TML del mark, que MORFEA a las formas al click (como el del pie) */
.chip-tml {
  height: 1.1em;
  width: auto;
  display: block;
  fill: var(--reagent);
}
.marca-chip:focus-visible { outline: 2px solid var(--reagent); outline-offset: 4px; }
.renglon__w {
  color: var(--void-ink);
  opacity: 0;
  transform: translateY(0.6em);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), color 0.55s ease;
}
.renglon__w.is-hecha { opacity: 0.4; transform: none; }
.renglon__w.is-activa { opacity: 1; transform: none; }
.renglon__sep {
  color: var(--reagent);
  opacity: 0;
  transition: opacity 0.55s ease;
}
.renglon__sep.is-on { opacity: 0.55; }
@media (prefers-reduced-motion: reduce) {
  .renglon__w { transition: opacity 0.3s ease, color 0.3s ease; transform: none; }
}

/* En touch (sin mouse) el pulso de los iconos evita drop-shadow -que repinta
   cada frame y traba en mobile-: solo opacidad y color, barato. */
@media (pointer: coarse) {
  .lab__ic { animation-name: labEncenderMovil; }
}
@keyframes labEncenderMovil {
  0%, 100% { opacity: 0.06; color: var(--void-ink); }
  58%      { opacity: 0.22; color: var(--reagent); }
  72%      { opacity: 0.08; color: var(--void-ink); }
}

/* ------------------------------------------------------------
   MOBILE SIN WEBGL — fondo oscuro CSS en vez del canvas
   El canvas a pantalla completa compositando con el scroll
   transformado traba el celu. Con .mundo-plano lo apagamos y
   pintamos un fondo oscuro (un guiño al reactivo) que es gratis
   de compositar. Las secciones son transparentes (con-mundo) y
   dejan verlo; el tema oscuro sigue igual. */
html.mundo-plano #mundo { display: none !important; }
html.mundo-plano body {
  background:
    radial-gradient(150% 100% at 50% -8%, #190713 0%, #0d0a0c 44%, var(--void) 100%) fixed,
    var(--void);
}

/* ------------------------------------------------------------
   MOBILE LIVIANO — reveals con scroll nativo (sin pins)
   Cada bloque entra con un fade-up cuando aparece. Barato:
   solo opacity + transform, disparado por IntersectionObserver. */
html.relato-movil .por-revelar {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
html.relato-movil .revelado {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html.relato-movil .por-revelar { opacity: 1; transform: none; transition: none; }
}

/* EL VUELO: el primitivo del nombre (Think▲) viaja hasta coronar el titulo
   — pieza fija que relato.js mueve con arco y giro durante el recompose. */
.vuelo {
  position: fixed;
  z-index: 55;
  background: var(--reagent);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  will-change: transform;
}

/* ------------------------------------------------------------
   LA FICHA — los servicios del acto como ficha tecnica de lab
   Filas CATEGORIA -> items en linea (middots), con hairlines.
   Densa pero escaneable; el primitivo del acto marca cada fila. */
.acto__ficha {
  margin: clamp(1.6rem, 3.2vh, 2.4rem) 0 0;
  text-align: left;
}
.ficha__fila {
  display: grid;
  grid-template-columns: clamp(7.5rem, 11vw, 10rem) 1fr;
  gap: 0.4rem 1.2rem;
  align-items: baseline;
  padding-block: clamp(0.5rem, 1.1vh, 0.75rem);
  border-top: 1px solid rgba(245, 245, 243, 0.12);
}
.ficha__fila:last-child { border-bottom: 1px solid rgba(245, 245, 243, 0.12); }
.acto__ficha dt {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acto-tinta);
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.acto__ficha dt::before {
  content: '';
  width: 0.55em;
  height: 0.55em;
  flex: none;
  background: var(--reagent);
}
#acto-think .acto__ficha dt::before { clip-path: polygon(50% 0%, 100% 100%, 0% 100%); }
#acto-launch .acto__ficha dt::before { border-radius: 50%; }
.acto__ficha dd {
  margin: 0;
  font-size: clamp(0.82rem, 1.05vw, 0.92rem);
  line-height: 1.6;
  color: var(--acto-tinta-2);
}
@media (max-width: 767px) {
  .ficha__fila { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* ------------------------------------------------------------
   WHAT — la declaracion ocupa la pantalla
   Tras Launch, "Estrategia, desarrollo y ejecucion de marketing."
   es LA frase de la casa: centrada, grande, con aire, una pantalla
   entera. Antes quedaba apretada en una columna angosta. */
#what {
  min-height: 100svh;
  display: flex;
  align-items: center;
}
#what .wrap { width: 100%; }
#what .what__say {
  max-width: 64rem;
  margin-inline: auto;
  text-align: center;
}
#what .what__title {
  font-size: clamp(2.4rem, 4.8vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
#what .what__when {
  margin-top: clamp(1.2rem, 2.6vh, 1.9rem);
  font-size: clamp(1.02rem, 1.45vw, 1.3rem);
  max-width: 50ch;
  margin-inline: auto;
  text-wrap: balance;
}

/* ------------------------------------------------------------
   EL DESPEGUE — el ● de Launch es el cohete
   Saliendo de Launch hacia la declaracion, un ● magenta DESPEGA:
   acelera hacia arriba con estela y se va de pantalla. El simbolo
   del acto lanzando — el lanzamiento, contado con la marca. */
.despegue {
  position: fixed;
  inset: 0;
  z-index: 8; /* sobre el mundo (0), bajo el contenido (smooth-wrapper z1 crea contexto propio; las estelas se ven entre secciones transparentes) */
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}
.despegue span {
  position: absolute;
  top: 0;
  left: var(--x, 50vw);
  width: 2px;
  height: var(--h, 14vh);
  background: linear-gradient(to top, transparent 0%, rgba(230, 0, 110, 0.5) 55%, var(--reagent) 100%);
  /* --pl (0..1) lo escribe el scroll: cada estela sube a SU velocidad (--v) */
  transform: translateY(calc(112vh - var(--pl, 0) * var(--v, 1) * 250vh));
  will-change: transform;
}
/* algunas cabezas casi blancas: calor de ignicion */
.despegue span:nth-child(3n) {
  background: linear-gradient(to top, transparent 0%, rgba(230, 0, 110, 0.55) 45%, #ff9ec9 100%);
}
/* mobile: disparo unico al entrar la declaracion */
html.relato-movil .despegue.es-lanzado { opacity: 1; }
html.relato-movil .despegue.es-lanzado span {
  /* duracion y delay los fija relato.js inline (calc() en duration no
     anda en WebKit y congelaba las estelas sobre las secciones) */
  animation-name: estelaSube;
  animation-timing-function: cubic-bezier(0.5, 0, 0.85, 0.4);
  animation-fill-mode: forwards;
}
@keyframes estelaSube {
  from { transform: translateY(112vh); }
  to   { transform: translateY(-140vh); }
}
@media (prefers-reduced-motion: reduce) {
  .despegue { display: none; }
}

/* La declaracion no vive en el grid de dos columnas: bloque unico, centrado,
   a lo ancho. (El grid venia de la version anterior de la seccion.) */
#what .what__grid { display: block; }
#what .what__title { max-width: none; }

/* La clausula de proposito de cada fila: dice PARA QUE sirve el grupo,
   arriba de los items. Es lo que vuelve la ficha entregable, no lista. */
.ficha__que {
  display: block;
  color: var(--acto-tinta);
  font-size: 0.9em;
  margin-bottom: 0.18rem;
}

/* ------------------------------------------------------------
   UNA ORACION, UNA LINEA (desktop)
   Las bajadas de una sola oracion no se parten en dos renglones
   por un max-width angosto: en desktop respiran a lo ancho del
   bloque. En mobile siguen envolviendo natural. */
html.con-relato .acto__how {
  max-width: none;
  text-wrap: balance;
}
html.con-relato .acto__cuerpo { width: min(92vw, 52rem); }

/* La bajada de "Del plan al mercado": una linea serena bajo el titulo,
   despegada de la grilla de escenarios (antes quedaba pegada a la regla
   de la primera puerta, como si fuera parte de ella). */
#momentos .lead {
  margin: clamp(0.6rem, 1.4vh, 1rem) 0 clamp(2.6rem, 5vh, 3.8rem);
  color: var(--ink-2);
  font-size: var(--t-lead);
  max-width: none;
}

/* ------------------------------------------------------------
   EL PAPER — la entrada al newspaper de TML
   Cabecera de periodico: regla doble arriba y abajo, folio mono,
   titular editorial con la serif, y una sola accion. */
.paper {
  min-height: 78svh;
  display: flex;
  align-items: center;
}
.paper .wrap { width: 100%; }
.paper__masthead {
  max-width: 56rem;
  text-align: left;
  padding-block: clamp(2rem, 4vh, 3rem);
}
.paper__vol {
  font-family: var(--mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--reagent-lift);
}
.paper__title {
  margin-top: clamp(0.8rem, 1.8vh, 1.2rem);
}
.paper__line {
  margin-top: clamp(0.9rem, 2vh, 1.4rem);
  font-size: var(--t-lead);
  color: var(--ink-2);
}
.paper__cta {
  margin-top: clamp(1.6rem, 3.2vh, 2.4rem);
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--reagent-lift);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.3em;
}
.paper__cta:hover { color: var(--reagent); }

/* ------------------------------------------------------------
   INTRO MOBILE — la marca centrada abre el sitio en el celu
   El mismo ciclo del chip de desktop, como secuencia de apertura:
   nombre -> TML -> morph a las formas. Solo bajo relato-movil. */
/* el #main > section:not(#method) de sections.css pesa (2,0,1) por el
   :not(#method): hace falta id + !important para esconder la intro en web */
html:not(.relato-movil) #main > #intro-movil { display: none !important; }
.im { display: none; }
html.relato-movil .im {
  display: grid;
  place-items: center;
  min-height: 100svh;
}
html.relato-movil .im__pila {
  display: grid;
  place-items: center;
  text-align: center;
}
html.relato-movil .im__v {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
html.relato-movil .im__v.is-on { opacity: 1; transform: none; }
html.relato-movil .im__nombre {
  font-family: var(--sans, sans-serif);
  font-weight: 600;
  font-variation-settings: 'wdth' 104, 'wght' 600;
  font-size: clamp(1.55rem, 7vw, 2.05rem);
  letter-spacing: -0.01em;
  color: var(--void-ink);
  white-space: nowrap;
}
html.relato-movil .im__svg {
  /* calza con el cap-height del "TML." colapsado: el swap texto->vector
     es un corte seco imperceptible, nunca dos TML a la vez */
  height: clamp(1.02rem, 4.6vw, 1.38rem);
  width: auto;
  display: block;
  fill: var(--void-ink);   /* blanco: el magenta llega CON las formas */
}

/* ------------------------------------------------------------
   MOBILE: cada acto llega con SU desplazamiento
   Think entra desde la izquierda, Make desde la derecha, Launch
   sube creciendo — variedad entre titulos sin costo (transform). */
/* :not(.revelado): el selector con ID no puede ganarle al estado final —
   sin esto el transform quedaba CONGELADO (la T de Think cortada, el
   subtitulo de Launch pegado, y ninguna transicion visible). */
html.relato-movil #acto-think .acto__cabeza.por-revelar:not(.revelado) { transform: translateX(-36px); }
html.relato-movil #acto-make .acto__cabeza.por-revelar:not(.revelado) { transform: translateX(36px); }
html.relato-movil #acto-launch .acto__cabeza.por-revelar:not(.revelado) { transform: translateY(34px) scale(0.94); }
html.relato-movil .acto__cabeza.revelado { transform: none; }

/* Mobile: nada ensancha la pagina hacia los costados. Triple defensa:
   (1) hidden como fallback (iOS viejo ignora clip), (2) media query que
   no depende del JS, (3) clip en cada seccion — los translateX de las
   entradas jamas extienden el ancho de la pagina. */
@media (max-width: 767px) {
  html, body {
    overflow-x: hidden;
    overflow-x: clip;
    max-width: 100vw;
  }
}

/* ------------------------------------------------------------
   LA EXTRACCION — el nombre colapsa a sus iniciales
   "The Marketing Lab." pierde lo de en medio y T·M·L se deslizan
   a juntarse: las iniciales se sienten EXTRAIDAS del titulo, y ese
   TML es el que se vuelve mark y morfea a las formas. */
/* inline-block con overflow oculto corre su baseline al borde inferior:
   TODOS los tramos se alinean por el TOPE para que el titulo no se
   desacomode (el bug de las iniciales caidas). */
.n-ini, .n-resto {
  display: inline-block;
  vertical-align: top;
  line-height: 1.15;
}
.n-resto {
  overflow: hidden;
  white-space: pre;
  transition: width 0.6s cubic-bezier(0.6, 0, 0.3, 1), opacity 0.4s ease;
}
/* el nombre colapsado se agranda y cede el lugar al mark vectorial */
html.relato-movil .im__nombre.se-va {
  transform: scale(2.3);
  opacity: 0;
  transition: transform 0.65s cubic-bezier(0.5, 0, 0.75, 0.6), opacity 0.5s ease 0.12s;
}
@media (prefers-reduced-motion: reduce) {
  .n-resto { transition: opacity 0.3s ease; }
}

/* ------------------------------------------------------------
   MOBILE: la ficha como REEL
   Los grupos de servicios se deslizan en horizontal (scroll-snap
   nativo, gratis): un panel por categoria, el siguiente asoma
   invitando el swipe. Hairlines verticales, sin tarjetas. */
html.relato-movil .acto__ficha {
  display: flex;
  gap: 0.65rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  /* capa propia: el scroll del reel no repinta la slide entera */
  transform: translateZ(0);
}
html.relato-movil .acto__ficha::-webkit-scrollbar { display: none; }
html.relato-movil .ficha__fila {
  display: block;
  flex: 0 0 auto;
  min-width: 76vw;
  max-width: 76vw;
  scroll-snap-align: start;
  border-top: 1px solid rgba(245, 245, 243, 0.15);
  border-bottom: 1px solid rgba(245, 245, 243, 0.15);
  border-left: 1px solid rgba(245, 245, 243, 0.15);
  border-right: 1px solid rgba(245, 245, 243, 0.15);
  background: rgba(245, 245, 243, 0.028);
  padding: 0.95rem 1.05rem 1.05rem;
  margin-right: 0;
  /* la fila es autonoma: iOS no relayoutea las vecinas al deslizar */
  contain: content;
}
html.relato-movil .acto__ficha dt { margin-bottom: 0.5rem; }

/* el cuerpo es flex item del acto: sin esto su min-content es el ancho
   COMPLETO del reel (896px) y la barra/hint quedan fuera de pantalla */
html.relato-movil .acto__cuerpo,
html.relato-movil .acto__escena { min-width: 0; max-width: 100vw; }

/* la barra del reel: un punto por ficha (con la primitiva del acto)
   y el hint de swipe, que se retira al primer gesto */
html.relato-movil .reel__barra {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.85rem;
  min-height: 1rem;
}
html.relato-movil .reel__barra i {
  width: 7px;
  height: 7px;
  background: rgba(245, 245, 243, 0.22);
  transition: background 0.25s ease, transform 0.25s ease;
}
html.relato-movil #acto-think .reel__barra i { clip-path: polygon(50% 0%, 100% 100%, 0% 100%); }
html.relato-movil #acto-launch .reel__barra i { border-radius: 50%; }
html.relato-movil .reel__barra i.is-on { background: var(--reagent); transform: scale(1.3); }
html.relato-movil .reel__hint {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 245, 243, 0.55);
  opacity: 0.85;
  transition: opacity 0.4s ease;
}
html.relato-movil .reel__barra.es-usado .reel__hint { opacity: 0; }
/* la barra entra con la cascada, junto a la ficha */
html.relato-movil .acto .reel__barra { transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease; }
html.relato-movil .acto:not(.es-coreo) .reel__barra { opacity: 0; transform: translateY(14px); }
html.relato-movil .acto.es-coreo .reel__barra { transition-delay: 0.46s; }
/* desktop no la necesita: la ficha es una tabla, no un reel */
html.con-relato .reel__barra { display: none; }

/* ------------------------------------------------------------
   LA TRANSFORMACION DE LAS INICIALES
   Cada inicial lleva su forma superpuesta en SU lugar: cuando el
   titulo colapso a T·M·L, cada letra se disuelve EN su forma
   (cascada T->M->L). No hay un segundo TML: son las mismas
   iniciales volviendose ▲ ■ ●. */
.n-ini { position: relative; perspective: 340px; }
.ini__l {
  display: inline-block;
  transform-origin: 50% 100%;
  transition: opacity 0.38s ease, transform 0.45s cubic-bezier(0.55, 0, 0.85, 0.4);
}
.ini__f {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 0.66em;
  height: 0.66em;
  transform: translate(-50%, -50%) rotateX(-89deg) scale(0.8);
  transform-origin: 50% 100%;
  background: var(--reagent);
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.ini__f--tri { clip-path: polygon(50% 0%, 100% 100%, 0% 100%); }
.ini__f--cir { border-radius: 50%; }
/* el punto magenta comparte metrica con las iniciales: no se cae */
.im__nombre .renglon__punto {
  display: inline-block;
  vertical-align: top;
  line-height: 1.15;
}
.n-ini { transition: margin 0.55s cubic-bezier(0.16, 1, 0.3, 1); }
/* el AIRE llega con el colapso: T·M·L quedan respirados, y las formas
   usan ese mismo aire — nada se reacomoda al transformarse */
.im__nombre.colapsado .n-ini { margin-inline: 0.14em; }
/* METAMORFOSIS, todas a la vez: la letra es ABSORBIDA girando hacia el
   punto de nacimiento (blur de velocidad) y la forma EMERGE girando en
   sentido contrario, con estiron y rebote. Transmutacion, no fundido. */
.im__nombre.se-transforma .ini__l {
  transform-origin: 50% 46%;
  animation: letraAbsorbida 0.48s cubic-bezier(0.6, 0, 0.9, 0.4) forwards;
}
@keyframes letraAbsorbida {
  0%   { opacity: 1; transform: scale(1) rotate(0deg); filter: blur(0); }
  100% { opacity: 0; transform: scale(0.12) rotate(35deg); filter: blur(3px); }
}
.im__nombre.se-transforma .ini__f {
  animation: formaEmerge 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}
@keyframes formaEmerge {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.12) rotate(-100deg); }
  45%  { opacity: 1; transform: translate(-50%, -50%) scale(1.28, 0.8) rotate(12deg); }
  70%  { transform: translate(-50%, -50%) scale(0.92, 1.12) rotate(-4deg); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}
.im__nombre.se-transforma .renglon__punto { opacity: 0; transition: opacity 0.3s ease; }

/* ------------------------------------------------------------
   MOBILE: cada titulo tiene SU pantalla
   El nombre del acto ocupa el viewport entero, con un fondo
   propio (gradientes estaticos: gratis). El detalle llega en la
   pantalla siguiente con transicion rapida. */
/* UN ACTO = UNA SLIDE: titulo, subtitulo y detalle juntos en la
   pantalla, con el fondo del acto cubriendo la escena entera. */
html.relato-movil .acto {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
html.relato-movil .acto__nombre { font-size: clamp(2.9rem, 13.5vw, 3.8rem); }
/* THINK: resplandor magenta alto — la chispa de la idea */
html.relato-movil #acto-think {
  background: radial-gradient(120% 75% at 82% 8%, rgba(230, 0, 110, 0.16), transparent 55%);
}
/* MAKE: grilla de laboratorio — el taller */
html.relato-movil #acto-make {
  background:
    repeating-linear-gradient(0deg, rgba(245, 245, 243, 0.045) 0 1px, transparent 1px 54px),
    repeating-linear-gradient(90deg, rgba(245, 245, 243, 0.045) 0 1px, transparent 1px 54px);
}
/* LAUNCH: ignicion desde abajo */
html.relato-movil #acto-launch {
  background: radial-gradient(140% 85% at 50% 102%, rgba(230, 0, 110, 0.20), transparent 60%);
}
/* el detalle llega RAPIDO: reveal corto y cercano */
html.relato-movil .acto__cuerpo.por-revelar { transform: translateY(14px); }
html.relato-movil .acto__cuerpo {
  transition-duration: 0.35s, 0.4s;
}

/* ------------------------------------------------------------
   SCROLL-PRESENTACION (mobile) — el principio cinematografico
   con mecanica NATIVA: las escenas clave ENCAJAN como slides
   (scroll-snap proximity: cerca de una escena, clic a lugar;
   el contenido largo sigue fluyendo libre). Cero JS, cero jank. */
@media (max-width: 767px) {
  /* MANDATORY: cada escena ENCAJA como diapositiva — deck de verdad.
     Las zonas mas altas que la pantalla se scrollean libres adentro
     (la spec lo permite): nada queda trabado. */
  /* proximity, no mandatory: con escenas de pantalla exacta el snap
     engancha igual, y las zonas largas (Nosotros, cierre) no TIRONEAN
     de vuelta al ultimo punto cuando frenas adentro. */
  /* PRESENTACION (ojosdebambi): dentro del deck (intro -> actos ->
     Notes) el snap es MANDATORY con stop: un gesto = UNA lamina.
     La clase en-deck la pone/saca el JS segun la posicion — pasada
     la seccion de Notes el snap se apaga y Nosotros/cierre se leen
     con scroll libre (el mandatory global tironeaba ahi adentro). */
  html.relato-movil.en-deck { scroll-snap-type: y mandatory; }
  html.relato-movil .im,
  html.relato-movil .acto,
  html.relato-movil .paper {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  html.relato-movil .acto__cuerpo { margin-top: clamp(1.4rem, 4vh, 2.2rem); }
  html.relato-movil .paper { min-height: 100svh; }
}

/* ------------------------------------------------------------
   MORPH VECTORIAL POR INICIAL — el efecto original, en el diseño
   actual: la letra vectorial FLUYE hasta su forma (vertices en
   movimiento), en el lugar y tamano de cada inicial. La letra de
   texto se funde mientras el morph ya corre: una sola lectura. */
/* la inicial ES vectorial desde el primer frame: nunca cambia de glifo.
   Inline, calzada con las mayusculas de Archivo; todas las formas
   comparten base y=172 -> alineacion perfecta por geometria. */
.ini__m {
  display: block;
  overflow: visible;   /* el circulo de la L desborda su caja sin recortarse */
  height: 0.686em;              /* cap-height EXACTO de Archivo (686/1000) */
  width: auto;
  fill: var(--void-ink);
  pointer-events: none;
}

/* ------------------------------------------------------------
   AFINADO DE LA SLIDE DE ACTO (mobile)
   1) el reel necesita pan-x explicito: el snap vertical del deck
      se lo estaba comiendo en iOS.
   2) fuera el padding heredado del layout apilado: era el vacio.
   3) subtitulo y bajada a escala de slide. */
html.relato-movil .acto__ficha {
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
}
html.relato-movil .acto { padding-block: 0; }
html.relato-movil .acto__escena { padding-block: 0; min-height: 0; }
html.relato-movil .acto__cabeza { margin: 0; padding: 0; min-height: 0; }
html.relato-movil .acto__cuerpo { margin-top: clamp(1.1rem, 3vh, 1.7rem); }
html.relato-movil .acto__disciplina {
  font-size: clamp(1.45rem, 6.2vw, 1.85rem);
  line-height: 1.1;
}
html.relato-movil .acto__how {
  font-size: clamp(0.98rem, 4.2vw, 1.12rem);
  margin-top: clamp(0.5rem, 1.4vh, 0.8rem);
}



/* ------------------------------------------------------------
   LOS POSTS DE TML NEWS — las dos ultimas columnas del diario
   Entradas con folio mono, titular con la serif en la palabra
   acento, y el "leer" en magenta. Hairline entre ambas. */
.paper__posts {
  margin-top: clamp(1.4rem, 3vh, 2rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-align: left;
}
.paper__posts .post {
  display: block;
  padding: 0.9rem 1.2rem;
  border-left: 1px solid rgba(245, 245, 243, 0.14);
  text-decoration: none;
}
.paper__posts .post:first-child { border-left: 0; }
.post__kicker {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.post__t {
  margin-top: 0.4rem;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--void-ink);
}
.post__t em { font-family: var(--serif, serif); font-style: italic; font-weight: 400; }
.post__leer {
  display: inline-block;
  margin-top: 0.55rem;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--reagent-lift);
}
.post:hover .post__leer { color: var(--reagent); }
@media (max-width: 767px) {
  .paper__posts { grid-template-columns: 1fr; }
  .paper__posts .post { border-left: 0; border-top: 1px solid rgba(245, 245, 243, 0.14); }
  .paper__posts .post:first-child { border-top: 0; }
}

/* ------------------------------------------------------------
   VIDA DE SCROLL EN MOBILE
   1) Marca de agua: la primitiva de cada acto (▲ ■ ●), gigante y
      tenue, con parallax y giro sutil via --sp (transform puro).
   2) Coreografia de entrada: la slide no aparece de un fade parejo,
      entra en cascada — num, nombre, disciplina, bajada, ficha. */
html.relato-movil .acto { position: relative; overflow: hidden; }
html.relato-movil .acto__escena { position: relative; z-index: 1; }
html.relato-movil .acto::before {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: 82vw;
  height: 82vw;
  right: -26vw;
  top: 12svh;
  transform: translateY(calc(var(--sp, 0) * -16svh)) rotate(calc(var(--sp, 0) * 30deg));
  will-change: transform;
}
html.relato-movil #acto-think::before {
  background: rgba(230, 0, 110, 0.07);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
html.relato-movil #acto-make::before {
  background: rgba(245, 245, 243, 0.045);
  clip-path: polygon(8% 8%, 92% 8%, 92% 92%, 8% 92%);
}
html.relato-movil #acto-launch::before {
  background: rgba(230, 0, 110, 0.075);
  border-radius: 50%;
}
/* News: los primitivos suben tenues detras del masthead */
html.relato-movil #paper { position: relative; }
html.relato-movil #paper > * { position: relative; z-index: 1; }

/* cascada: estado inicial (solo antes de es-coreo — nada queda congelado) */
html.relato-movil .acto :is(.acto__num, .acto__nombre, .acto__disciplina, .acto__how, .acto__ficha) {
  transition:
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.5s ease;
}
html.relato-movil .acto:not(.es-coreo) :is(.acto__num, .acto__nombre, .acto__disciplina, .acto__how, .acto__ficha) {
  opacity: 0;
}
html.relato-movil .acto:not(.es-coreo) .acto__num        { transform: translateX(-16px); }
html.relato-movil .acto:not(.es-coreo) .acto__nombre     { transform: translateY(30px); }
html.relato-movil .acto:not(.es-coreo) .acto__disciplina { transform: translateY(22px); }
html.relato-movil .acto:not(.es-coreo) .acto__how        { transform: translateY(18px); }
html.relato-movil .acto:not(.es-coreo) .acto__ficha      { transform: translateY(16px); }
/* el escalonado: cada pieza llega un beat despues de la anterior */
html.relato-movil .acto.es-coreo .acto__nombre     { transition-delay: 0.08s; }
html.relato-movil .acto.es-coreo .acto__disciplina { transition-delay: 0.18s; }
html.relato-movil .acto.es-coreo .acto__how        { transition-delay: 0.26s; }
html.relato-movil .acto.es-coreo .acto__ficha      { transition-delay: 0.36s; }
/* y adentro de la ficha, las fichas del reel entran una a una */
/* solo opacidad: un transform en hijos de un scroller con snap corre
   los puntos de anclaje mientras anima y iOS deja el reel a mitad */
html.relato-movil .acto .ficha__fila { transition: opacity 0.45s ease; }
html.relato-movil .acto:not(.es-coreo) .ficha__fila { opacity: 0; }
html.relato-movil .acto.es-coreo .ficha__fila:nth-child(1) { transition-delay: 0.42s; }
html.relato-movil .acto.es-coreo .ficha__fila:nth-child(2) { transition-delay: 0.50s; }
html.relato-movil .acto.es-coreo .ficha__fila:nth-child(3) { transition-delay: 0.58s; }
html.relato-movil .acto.es-coreo .ficha__fila:nth-child(4) { transition-delay: 0.66s; }
/* el punto de la palabra POPEA al final: la firma de cada acto */
html.relato-movil .acto .acto__nombre .dot {
  display: inline-block;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.34s;
}
html.relato-movil .acto:not(.es-coreo) .acto__nombre .dot { transform: scale(0); }

/* ------------------------------------------------------------
   EL CUE DE LA INTRO (mobile): despues de que las formas llegan,
   un "Deslizá" con hilo descendente invita a bajar. Toda la
   pantalla es tappeable (el JS scrollea a Think). */
html.relato-movil .im { position: relative; cursor: pointer; }
html.relato-movil .im__cue {
  position: absolute;
  left: 50%;
  bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 245, 243, 0.55);
  opacity: 0;
  animation: imCue 0.9s ease 3.6s forwards;
  pointer-events: none;
}
html.relato-movil .im__cue i {
  width: 1px;
  height: 2.1rem;
  background: linear-gradient(rgba(230, 0, 110, 0.9), transparent);
  animation: imCueHilo 1.7s ease-in-out 3.6s infinite;
}
@keyframes imCue { to { opacity: 1; } }
@keyframes imCueHilo {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }
}
@media (prefers-reduced-motion: reduce) {
  html.relato-movil .im__cue { animation: none; opacity: 1; }
  html.relato-movil .im__cue i { animation: none; }
}
.im__cue { display: none; }
html.relato-movil .im__cue { display: grid; }

/* ------------------------------------------------------------
   TITULARES DE UNA LINEA (web)
   En desktop ningun titular de seccion parte en dos renglones:
   los largos bajan de cuerpo con escala fluida y no envuelven.
   El tamano acompana al viewport, asi nunca desbordan. */
html.con-relato .paper__title {
  font-size: clamp(2.2rem, 3.6vw, 3.3rem);
  white-space: nowrap;
}
html.con-relato .close__title {
  font-size: clamp(2.4rem, 4.4vw, 4.1rem);
  white-space: nowrap;
}

/* el chip usa la metrica de la intro: glifos exactos, mismo tracking */
.marca-chip .im__nombre {
  letter-spacing: -0.01em;
  font-variation-settings: 'wdth' 104, 'wght' 600;
}


/* ------------------------------------------------------------
   HOVER DE LAS FICHAS (web): la fila del servicio se AMPLIA bajo
   el mouse — crece un poco (la letra con ella), gana fondo y se
   despega de las vecinas. Transform puro: gratis. */
html.con-relato .ficha__fila {
  position: relative;
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
  padding-inline: 0.7rem;
  margin-inline: -0.7rem;
}
html.con-relato .ficha__fila:hover {
  transform: scale(1.05);
  background: rgba(245, 245, 243, 0.05);
  z-index: 2;
}
/* y el contenido se enciende: la bajada pasa a tinta plena */
html.con-relato .ficha__fila dd,
html.con-relato .ficha__fila .ficha__que { transition: color 0.3s ease; }
html.con-relato .ficha__fila:hover dd { color: var(--acto-tinta); }

/* la bajada de cada post y el bloque de suscripcion de TML News */
.post__baja {
  margin: 0.5rem 0 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 34ch;
}
.paper__sub { margin-top: clamp(2rem, 4.5vh, 3rem); }
.paper__sub-t {
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  letter-spacing: -0.02em;
  color: var(--void-ink);
}
.paper__sub-l {
  margin-top: 0.45rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 52ch;
}
.paper__sub .paper__cta { margin-top: 1.1rem; }

/* el post que todavia no existe: presente pero en espera */
.post--proximo { opacity: 0.45; cursor: default; }
.post--proximo .post__leer { color: var(--ink-2); }

/* items apilados dentro de la ficha del reel: un renglon por servicio,
   con hairline finita entre ellos — se lee como lista, no como corrida */
html.relato-movil .ficha__fila dd .it {
  display: block;
  padding: 0.28rem 0;
  border-top: 1px solid rgba(245, 245, 243, 0.09);
}
html.relato-movil .ficha__fila dd .it:first-child { border-top: 0; }

/* cabecera de ficha en mobile: "DIAGNOSTICO: El punto de partida" corrido
   en una linea (el dt deja el flex para fluir como texto) */
html.relato-movil .acto__ficha dt { display: block; }
html.relato-movil .acto__ficha dt::before {
  display: inline-block;
  vertical-align: baseline;
  margin-right: 0.55rem;
}
/* el proposito habla con LA MISMA voz que la categoria: mono, caps,
   mismo cuerpo y tracking — "MARKETING: COMO SE ACTIVA" es una linea */
html.relato-movil .dt__que {
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  color: var(--acto-tinta);
}

/* tap = reaccion (mobile no tiene hover): la ficha pulsa apenas y el
   item tocado se enciende — transform/color puros, gratis */
html.relato-movil .ficha__fila {
  transition-property: transform, opacity, background-color;
}
html.relato-movil .ficha__fila.es-tocada {
  transform: scale(0.985) !important;
  background: rgba(230, 0, 110, 0.06);
}
html.relato-movil .ficha__fila dd .it { transition: color 0.3s ease, border-color 0.3s ease; }
html.relato-movil .ficha__fila dd .it.es-tocado {
  color: var(--acto-tinta);
  border-top-color: rgba(230, 0, 110, 0.45);
}

/* ------------------------------------------------------------
   AIRE DE LA SLIDE DE ACTO (mobile)
   Con la lista vertical la ficha crecio y el centrado dejaba un
   VACIO arriba del titulo. La slide ahora arranca desde arriba
   con un aire fijo, y el contenido baja en orden. */
html.relato-movil .acto {
  justify-content: flex-start;
  padding-top: calc(env(safe-area-inset-top, 0px) + 11svh);
}
/* cada panel del reel mide lo suyo: sin estirarse a la altura del
   vecino mas alto (el marco vacio de abajo era eso) */
html.relato-movil .acto__ficha { align-items: flex-start; }

/* la cabecera respirada: dos lineas se leen bien si tienen aire —
   menos tracking, mas interlinea, y el proposito un tono abajo */
html.relato-movil .acto__ficha dt {
  letter-spacing: 0.11em;
  line-height: 1.7;
  margin-bottom: 0.65rem;
}
html.relato-movil .dt__que { color: var(--acto-tinta-2); }

/* ------------------------------------------------------------
   FICHA DEL REEL, v3 (mobile)
   1) Todas las fichas del carrousel miden LO MISMO (stretch).
   2) Cabecera en dos voces: la categoria mono corta arriba y el
      proposito como bajada en sans — menos caps, menos cargado. */
html.relato-movil .acto__ficha { align-items: stretch; }
html.relato-movil .acto__ficha dt { margin-bottom: 0.3rem; }
html.relato-movil .ficha__que {
  display: block;
  font-family: var(--sans, sans-serif);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--acto-tinta);
  margin: 0 0 0.5rem;
}



/* ------------------------------------------------------------
   TML NOTES EN WEB: dos columnas, nada de vacio a la derecha.
   Izquierda: kicker, titular, bajada y la suscripcion.
   Derecha: las notas apiladas con sus hairlines. */
html.con-relato .paper__masthead {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 40rem) minmax(0, 34rem);
  justify-content: space-between;
  column-gap: clamp(3rem, 7vw, 8rem);
  align-items: start;
}
html.con-relato .paper__vol,
html.con-relato .paper__title,
html.con-relato .paper__line,
html.con-relato .paper__sub { grid-column: 1; }
html.con-relato .paper__title { white-space: normal; }
html.con-relato .paper__sub { margin-top: clamp(2.6rem, 7vh, 4.5rem); }
html.con-relato .paper__posts {
  grid-column: 2;
  grid-row: 1 / span 4;
  display: block;
  margin-top: 0.5rem;
}
html.con-relato .paper__posts .post {
  border-left: 0;
  border-top: 1px solid rgba(245, 245, 243, 0.14);
  padding: 1.3rem 0 1.5rem;
}
html.con-relato .paper__posts .post:first-child { border-top: 0; padding-top: 0; }
html.con-relato .post__baja { max-width: 46ch; }

/* SIN VIUDAS: ninguna bajada termina con una palabra suelta en su
   propio renglon. pretty reacomoda el corte; los nbsp del markup
   cubren a los navegadores que aun no lo soportan. */
.paper__line, .post__baja, .paper__sub-l, .acto__how, .lead,
.close__line, .crew__bio, .paper__line span { text-wrap: pretty; }

/* ------------------------------------------------------------
   SELECTED WORK — lo hecho en el lab
   Marcos hairline con la primitiva de agua adentro; el indice
   grande habita el marco hasta que llegue la foto (el <img>
   comentado en el markup entra con object-fit: cover). */
.work .wrap { width: 100%; }
.work__vol {
  font-family: var(--mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--reagent-lift);
}
.work__title { margin-top: clamp(0.7rem, 1.6vh, 1.1rem); }
.work__grid {
  margin-top: clamp(1.8rem, 4vh, 2.8rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.6rem, 3vw, 2.6rem);
}
.job { margin: 0; }
.job__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid rgba(245, 245, 243, 0.15);
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(230, 0, 110, 0.10), transparent 58%),
    rgba(245, 245, 243, 0.025);
}
.job__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
/* la primitiva de agua del marco */
.job__media::after {
  content: '';
  position: absolute;
  right: -14%;
  bottom: -22%;
  width: 55%;
  aspect-ratio: 1;
  background: rgba(230, 0, 110, 0.08);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.job[data-fw="tri"] .job__media::after { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.job[data-fw="cir"] .job__media::after { border-radius: 50%; }
/* el indice grande, mientras el marco espera su foto */
.job__idx {
  position: absolute;
  left: 1.1rem;
  bottom: 0.4rem;
  font-family: var(--sans, sans-serif);
  font-variation-settings: 'wdth' 104, 'wght' 600;
  font-size: clamp(4rem, 8vw, 7rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(245, 245, 243, 0.10);
  pointer-events: none;
}
.job__pie {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin-top: 0.75rem;
}
.job__num {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--reagent-lift);
  flex: none;
}
.job__nombre {
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--void-ink);
  transition: color 0.3s ease;
}
.job__tag {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 245, 243, 0.4);
  white-space: nowrap;
}
/* hover web: la foto respira y la primitiva se corre */
html.con-relato .job:hover .job__media img { transform: scale(1.07); }
html.con-relato .job:hover .job__media::after { transform: translate(-6%, -8%) rotate(-6deg); }
html.con-relato .job:hover .job__nombre { color: var(--reagent); }

/* MOBILE: el work es una lamina mas del deck, y los jobs un reel */
html.relato-movil .work {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: calc(env(safe-area-inset-top, 0px) + 11svh);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
html.relato-movil .work__grid {
  display: flex;
  gap: 0.65rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
  transform: translateZ(0);
}
html.relato-movil .work__grid::-webkit-scrollbar { display: none; }
html.relato-movil .job { flex: 0 0 auto; width: 78vw; }
html.relato-movil .job__pie { flex-wrap: wrap; gap: 0.45rem 0.9rem; }
html.relato-movil .job__tag { margin-left: 0; width: 100%; }

/* el .job viejo de sections.css (lista de 3 columnas) no aplica al
   grid nuevo de Selected Work: aca el job es marco + pie */
.work__grid .job {
  display: block;
  grid-template-columns: none;
  padding-block: 0;
  border-bottom: 0;
  gap: 0;
}

/* Selected Work en web: marcos mas contenidos — la grilla se acota
   en vez de estirarse al ancho completo de la pantalla */
html.con-relato .work__grid {
  max-width: 66rem;
  gap: clamp(1.4rem, 2.2vw, 2rem);
}

/* ------------------------------------------------------------
   TML NOTES, EDITORIAL — revista, no diapositiva
   La columna de notas gana cuerpo: titulares grandes con su
   acento serif, numeral fantasma de edicion, hairline de columna
   y el bloque de suscripcion como colofon. El acento magenta
   sigue siendo reaccion: aparece al hover, en la palabra serif. */
html.con-relato .paper__posts {
  border-left: 1px solid rgba(245, 245, 243, 0.13);
  padding-left: clamp(2rem, 3.2vw, 3.6rem);
}
.paper__posts .post { position: relative; }
/* el numeral fantasma de cada edicion, como folio de revista */
html.con-relato .paper__posts .post::after {
  content: attr(data-n);
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--sans, sans-serif);
  font-variation-settings: 'wdth' 104, 'wght' 600;
  font-size: clamp(3.4rem, 5vw, 5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(245, 245, 243, 0.07);
  pointer-events: none;
}
/* titulares de nota con cuerpo editorial */
html.con-relato .post__t {
  font-size: clamp(1.6rem, 2.5vw, 2.25rem);
  letter-spacing: -0.03em;
  line-height: 1.08;
  max-width: 12em;
}
html.con-relato .paper__posts .post { padding: 1.6rem 0 1.8rem; }
html.con-relato .post__baja { margin-top: 0.65rem; }
html.con-relato .post__leer {
  margin-top: 0.8rem;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
}
/* hover: la palabra serif toma el reactivo y el leer avanza */
.post .post__t em { transition: color 0.3s ease; }
.post:hover .post__t em { color: var(--reagent); }
html.con-relato .post:hover .post__leer { transform: translateX(5px); color: var(--reagent); }
/* el colofon: una linea de imprenta, no un bloque apilado */
html.con-relato .paper__sub {
  display: flex;
  align-items: baseline;
  gap: 1.4rem;
  flex-wrap: wrap;
  border-top: 1px solid rgba(245, 245, 243, 0.13);
  padding-top: 1.4rem;
}
html.con-relato .paper__sub-t { flex: none; }
html.con-relato .paper__sub-l { margin-top: 0; }
html.con-relato .paper__sub .paper__cta { margin-top: 0; margin-left: auto; }

/* mobile: mismos titulares con mas cuerpo, numeral discreto */
html.relato-movil .post__t { font-size: clamp(1.45rem, 6.4vw, 1.8rem); }

/* ------------------------------------------------------------
   EXPERIENCIA (ex Selected Work): bloque editorial, sin grilla.
   El titular grande, la bajada, y el puente en dos voces que
   desemboca en Hablemos. Mismo sistema: hairlines, mono, sans. */
.work__lead {
  margin-top: clamp(1rem, 2.4vh, 1.6rem);
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 44ch;
  text-wrap: pretty;
}
.work__puente {
  margin-top: clamp(2.4rem, 6vh, 4rem);
  border-top: 1px solid rgba(245, 245, 243, 0.13);
  padding-top: clamp(1.4rem, 3vh, 2rem);
  max-width: 44ch;
}
.work__linea {
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.25;
  color: var(--void-ink);
  text-wrap: pretty;
}
/* la respuesta llega un tono abajo: dialogo, no eslogan */
.work__linea--eco {
  margin-top: 0.35rem;
  color: var(--ink-2);
  font-weight: 500;
}
.work__cta {
  display: inline-block;
  margin-top: clamp(1.2rem, 2.6vh, 1.8rem);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--reagent-lift);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.3em;
  transition: color 0.3s ease;
}
.work__cta:hover { color: var(--reagent); }

/* la bio del perfil: abajo del nombre, cuerpo de lectura, medida corta */
.crew__bio {
  margin: 0.5rem 0 0.6rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 38ch;
  text-wrap: pretty;
}

/* con la bio, el texto del miembro tiene 4 filas: la placa abarca todas
   (sin esto la credencial caia DEBAJO de la placa, fuera de la tarjeta) */
@media (max-width: 640px) {
  .crew__plate { grid-row: 1 / span 4; }
}

/* iOS: el rebote del scroll y la zona de la barra muestran el fondo del
   html — en mobile ese fondo es el void, nunca el papel claro */
html.relato-movil, html.relato-movil body { background: var(--void); }

/* En el deck mobile las laminas son pantalla completa: el scroll-padding
   de 6rem (para la nav del layout apilado) corria anclas y snaps 96px
   y dejaba una franja de la seccion anterior asomando arriba. */
html.relato-movil { scroll-padding-top: 0; }

/* el titular de Notes en mobile: un cuerpo mas editorial, menos cartel */
html.relato-movil .paper__title {
  font-size: clamp(1.5rem, 6.6vw, 1.9rem);
  line-height: 1.05;
}

/* ------------------------------------------------------------
   NOSOTROS EN MOBILE — tarjetas con skills e interaccion
   Cada perfil es una tarjeta hairline: placa + nombre + rol,
   los skills como chips mono (tap = pulso magenta), y la BIO
   plegada — un toque la abre en acordeon. */
.crew__skills { display: none; }
@media (max-width: 640px) {
  html.relato-movil .crew__member {
    display: grid;
    grid-template-columns: 4.2rem minmax(0, 1fr);
    grid-auto-rows: auto;
    column-gap: 1rem;
    align-items: start;
    border: 1px solid rgba(245, 245, 243, 0.15);
    background: rgba(245, 245, 243, 0.028);
    padding: 1rem 1.05rem 1.1rem;
    margin-bottom: 0.75rem;
    cursor: pointer;
  }
  html.relato-movil .crew__plate {
    grid-row: 1 / span 2;
    height: auto;
    aspect-ratio: 1;
    margin-bottom: 0;
  }
  html.relato-movil .crew__initials { font-size: 1.5rem; }
  html.relato-movil .crew__name {
    position: relative;
    padding-right: 1.6rem;
  }
  /* el indicador del acordeon: un + que gira a x */
  html.relato-movil .crew__name::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 0.05em;
    font-family: var(--mono);
    font-weight: 500;
    color: var(--reagent-lift);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  html.relato-movil .crew__member.es-abierta .crew__name::after { transform: rotate(45deg); }
  /* skills como chips, a lo ancho de la tarjeta */
  html.relato-movil .crew__skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    grid-column: 1 / -1;
    margin: 0.85rem 0 0;
    padding: 0;
    list-style: none;
  }
  html.relato-movil .crew__skills li {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-2);
    border: 1px solid rgba(245, 245, 243, 0.18);
    padding: 0.32em 0.7em;
    transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
  }
  html.relato-movil .crew__skills li.es-tocado {
    color: var(--void-ink);
    border-color: var(--reagent);
    background: rgba(230, 0, 110, 0.12);
  }
  /* la bio y la credencial viven plegadas; el tap las abre */
  html.relato-movil .crew__bio,
  html.relato-movil .crew__cred {
    grid-column: 1 / -1;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    margin: 0;
    transition: max-height 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, margin 0.4s ease;
  }
  html.relato-movil .crew__member.es-abierta .crew__bio {
    max-height: 22rem;
    opacity: 1;
    margin-top: 0.9rem;
  }
  html.relato-movil .crew__member.es-abierta .crew__cred {
    max-height: 6rem;
    opacity: 1;
    margin-top: 0.55rem;
  }
}

/* posiciones EXPLICITAS en la tarjeta: el auto-placement mandaba el rol
   a la columna de la placa (4rem) y lo partia letra por letra */
@media (max-width: 640px) {
  html.relato-movil .crew__name  { grid-column: 2; grid-row: 1; }
  html.relato-movil .crew__does  { grid-column: 2; grid-row: 2; margin-top: 0.2rem; }
  html.relato-movil .crew__plate { grid-column: 1; grid-row: 1 / span 2; }
  html.relato-movil .crew__skills{ grid-column: 1 / -1; grid-row: 3; }
  html.relato-movil .crew__bio   { grid-column: 1 / -1; grid-row: 4; }
  html.relato-movil .crew__cred  { grid-column: 1 / -1; grid-row: 5; }
}

/* el indicador del acordeon ya no es un "+": es la primitiva de cada
   perfil — ▲ ■ ● , el equipo ES Think·Make·Launch. Cerrada, gris y
   quieta; abierta, gira y toma el reactivo. */
@media (max-width: 640px) {
  html.relato-movil .crew__name::after {
    content: '';
    width: 9px;
    height: 9px;
    top: 0.32em;
    background: rgba(245, 245, 243, 0.35);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
  }
  html.relato-movil .crew__member:nth-child(1) .crew__name::after {
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
  }
  html.relato-movil .crew__member:nth-child(3) .crew__name::after {
    border-radius: 50%;
  }
  html.relato-movil .crew__member.es-abierta .crew__name::after {
    background: var(--reagent);
  }
  html.relato-movil .crew__member:nth-child(1).es-abierta .crew__name::after { transform: rotate(180deg); }
  html.relato-movil .crew__member:nth-child(2).es-abierta .crew__name::after { transform: rotate(45deg); }
  html.relato-movil .crew__member:nth-child(3).es-abierta .crew__name::after { transform: scale(1.35); }
}

/* las formas cerradas LATEN suave hasta el primer toque: invitacion */
@media (max-width: 640px) {
  html.relato-movil:not(.crew-usada) .crew__member:not(.es-abierta) .crew__name::after {
    animation: crewLate 2.2s ease-in-out infinite;
  }
}
@keyframes crewLate {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .crew__name::after { animation: none !important; }
}

/* ------------------------------------------------------------
   INTRO SIN RUIDO: en reposo el titulo es TEXTO nativo puro
   (antialiasing y hinting de la fuente, cero mezcla texto/vector).
   El glifo vectorial recien entra al COLAPSAR — el movimiento
   tapa el relevo — y de ahi morfea a su forma. */
#intro-movil .ini__m { display: none; }
#intro-movil .im__nombre.colapsado .ini__m { display: block; }
#intro-movil .im__nombre.colapsado .ini__t { display: none; }

/* ------------------------------------------------------------
   TML NOTES EN MOBILE — editorial con vida
   El folio fantasma tambien en el celu, el kicker toma el
   reactivo, el tap responde (la palabra serif se enciende y el
   LEER avanza) y el colofon es una tarjeta del sistema. */
html.relato-movil .paper__posts .post {
  position: relative;
  padding: 1.35rem 0 1.5rem;
}
html.relato-movil .paper__posts .post::after {
  content: attr(data-n);
  position: absolute;
  right: 0;
  top: 1.1rem;
  font-family: var(--sans, sans-serif);
  font-variation-settings: 'wdth' 104, 'wght' 600;
  font-size: 3rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(245, 245, 243, 0.08);
  pointer-events: none;
}
html.relato-movil .post__kicker { color: var(--reagent-lift); }
html.relato-movil .post__leer { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease; }
html.relato-movil .post.es-tocada .post__t em { color: var(--reagent); }
html.relato-movil .post.es-tocada .post__leer { transform: translateX(6px); color: var(--reagent); }
/* el colofon como tarjeta del sistema, con su primitiva */
html.relato-movil .paper__sub {
  border: 1px solid rgba(245, 245, 243, 0.15);
  background: rgba(245, 245, 243, 0.028);
  padding: 1.1rem 1.05rem 1.25rem;
  margin-top: 1.6rem;
}
html.relato-movil .paper__sub-t {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
html.relato-movil .paper__sub-t::before {
  content: '';
  width: 0.5em;
  height: 0.5em;
  background: var(--reagent);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* ------------------------------------------------------------
   EL TITULO EN REPOSO ES UN SOLO SPAN
   Los wrappers por inicial matan el kerning entre pares (T-h,
   L-a) y el titulo respiraba raro. En reposo se ve la copia
   PLANA (kerning nativo); la maquinaria segmentada aparece
   recien al colapsar, cuando el movimiento tapa el relevo. */
html.relato-movil .im__plano {
  font-family: var(--sans, sans-serif);
  font-weight: 600;
  font-variation-settings: 'wdth' 104, 'wght' 600;
  font-size: clamp(1.55rem, 7vw, 2.05rem);
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--void-ink);
  white-space: nowrap;
}
#intro-movil .im__nombre { opacity: 0; }



/* ------------------------------------------------------------
   EL CARRIL DEL RIEL — nunca mas pisado
   El wrap centra con max-width 1680: en pantallas ~1700-2100 su
   margen lateral baja de lo que el riel ocupa y la barra PISABA
   el contenido. Reserva exacta: lo que le falte al margen del
   wrap para cubrir 13rem se agrega como padding, y a partir de
   ~2100 (margen ya generoso) la formula da 0 y no toca nada. */
@media (min-width: 860px) {
  html.con-riel #smooth-content {
    padding-left: clamp(0rem, calc(15rem - (100vw - 1680px) / 2), 15rem);
  }
  /* el riel, un toque mas compacto: mas aire ganado sin perder voz */
  html.con-riel .riel { left: clamp(0.9rem, 1.2vw, 1.6rem); }
}

/* ============================================================
   NOSOTROS WEB — LEDGER EDITORIAL
   Indice mono a la izquierda (el gesto del riel: guion que crece
   y se enciende), UN solo perfil grande a la derecha, la inicial
   serif gigante como marca de agua. El estado lo fija el JS con
   .es-activa (hover previsualiza, click fija, teclado idem): el
   perfil elegido PERSISTE y la bio se puede seleccionar.
   Mobile (tarjetas acordeon) intacto: scope min-861 + pointer fine.
   ============================================================ */
@media (min-width: 480px) and (pointer: fine) {

  html.con-relato .crew {
    --idx: clamp(8.5rem, 19vw, 18rem);
    --gapcol: clamp(1.4rem, 5vw, 5.5rem);
    position: relative;
    display: grid;
    grid-template-columns: var(--idx) minmax(0, 1fr);
    column-gap: var(--gapcol);
    padding-top: 1.5rem;
  }
  /* etiqueta de instrumento sobre el indice */
  html.con-relato .crew::before {
    content: 'TML · 03';
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    font-family: var(--mono);
    font-size: var(--t-mono);
    font-weight: 500;
    letter-spacing: var(--tr-mono);
    text-transform: uppercase;
    color: var(--ink-3);
    line-height: 1;
  }
  /* la linea del libro mayor */
  html.con-relato .crew::after {
    content: '';
    position: absolute;
    left: calc(var(--idx) + var(--gapcol) / 2);
    top: 1.5rem;
    bottom: 0.5rem;
    width: 1px;
    background: rgba(245, 245, 243, 0.14);
  }

  /* los tres perfiles, apilados en la MISMA celda */
  html.con-relato .crew__member {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: clamp(17rem, 52vw, 24rem);
    min-width: 0;
    flex: none;
    transition: none;
  }

  /* EL INDICE: el nombre sale a la columna izquierda */
  html.con-relato .crew__name {
    position: absolute;
    left: calc(-1 * (var(--idx) + var(--gapcol)));
    width: var(--idx);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-block: 1.05rem;
    font-family: var(--mono);
    font-size: var(--t-mono);
    font-weight: 500;
    font-variation-settings: normal;
    letter-spacing: var(--tr-mono);
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    color: #9A9A94;
    cursor: pointer;
    transition: color 0.28s ease;
  }
  html.con-relato .crew__member:nth-child(1) .crew__name { top: 2.2rem; }
  html.con-relato .crew__member:nth-child(2) .crew__name { top: 5rem; }
  html.con-relato .crew__member:nth-child(3) .crew__name { top: 7.8rem; }
  /* el guion del riel */
  html.con-relato .crew__name::before {
    content: '';
    flex: 0 0 auto;
    width: 2.1rem;
    height: 1px;
    background: currentColor;
    transform: scaleX(0.43);
    transform-origin: left center;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), background 0.28s linear;
  }
  /* numero de ficha, gris tenue */
  html.con-relato .crew__name::after {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    color: rgba(245, 245, 243, 0.3);
    margin-left: auto;
  }
  html.con-relato .crew__member:nth-child(1) .crew__name::after { content: '01'; }
  html.con-relato .crew__member:nth-child(2) .crew__name::after { content: '02'; }
  html.con-relato .crew__member:nth-child(3) .crew__name::after { content: '03'; }
  /* activo: encendido magenta */
  html.con-relato .crew__member.es-activa .crew__name { color: var(--reagent-lift); }
  html.con-relato .crew__member.es-activa .crew__name::before {
    transform: scaleX(1);
    background: var(--reagent-lift);
  }
  html.con-relato .crew__name:hover { color: var(--void-ink); }

  /* EL PERFIL: rol > nombre display > bio > skills > credencial */
  html.con-relato .crew__does          { order: 1; }
  html.con-relato .crew__member::after { order: 2; }
  html.con-relato .crew__bio           { order: 3; }
  html.con-relato .crew__skills        { order: 4; }
  html.con-relato .crew__cred          { order: 5; }

  html.con-relato .crew__member::after,
  html.con-relato .crew__member :is(.crew__does, .crew__bio, .crew__skills, .crew__cred, .crew__plate) {
    opacity: 0;
    transition: opacity 0.42s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  html.con-relato .crew__does {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--ink-3);
  }
  html.con-relato .crew__does::before {
    font-size: 0.72rem;
    line-height: 1;
    transform: translateY(-0.5px);
    color: var(--reagent);
  }
  html.con-relato .crew__member:nth-child(1) .crew__does::before { content: '▲'; }
  html.con-relato .crew__member:nth-child(2) .crew__does::before { content: '■'; }
  html.con-relato .crew__member:nth-child(3) .crew__does::before { content: '●'; }

  /* nombre display desde data-nombre */
  html.con-relato .crew__member::after {
    content: attr(data-nombre);
    font-family: var(--sans, sans-serif);
    font-variation-settings: 'wdth' 104, 'wght' 600;
    font-size: clamp(1.6rem, 3vw, 2.5rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--void-ink);
    max-width: 18ch;
    text-wrap: balance;
    margin: 0.6rem 0 1.2rem;
    transform: translateY(0.45rem);
  }

  html.con-relato .crew__bio {
    margin: 0;
    font-size: clamp(1rem, 1.25vw, 1.125rem);
    line-height: 1.7;
    max-width: 44ch;
    color: var(--void-ink);
    text-wrap: pretty;
    transform: translateY(0.4rem);
  }

  /* skills: linea de instrumentos con middots (pisa el display:none) */
  html.con-relato .crew__skills {
    display: flex;
    flex-wrap: wrap;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    font-family: var(--mono);
    font-size: var(--t-mono);
    font-weight: 500;
    letter-spacing: var(--tr-mono);
    text-transform: uppercase;
    color: var(--ink-3);
  }
  html.con-relato .crew__skills li + li::before {
    content: '·';
    margin: 0 0.8rem;
    color: rgba(245, 245, 243, 0.3);
  }

  html.con-relato .crew__cred {
    margin: 1.4rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(245, 245, 243, 0.14);
    width: 100%;
    max-width: 44ch;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--ink-2);
  }

  /* la placa vuelta MARCA DE AGUA: inicial serif gigante */
  html.con-relato .crew__plate {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: -1;
    width: auto;
    height: auto;
    margin: 0;
    background: transparent;
    border: 0;
    overflow: visible;
    display: block;
    transform: translate(1.25rem, -54%);
  }
  html.con-relato .crew__initials {
    font-size: clamp(5.5rem, 14vw, 12rem);
    letter-spacing: -0.04em;
    line-height: 1;
    color: rgba(245, 245, 243, 0.06);
  }

  /* EL INTERCAMBIO: manda .es-activa (la pone el JS) */
  html.con-relato .crew__member { pointer-events: none; }
  html.con-relato .crew__member .crew__name { pointer-events: auto; }
  html.con-relato .crew__member.es-activa { pointer-events: auto; }
  html.con-relato .crew__member:not(.es-activa) { z-index: 0; }
  html.con-relato .crew__member.es-activa { z-index: 1; }
  html.con-relato .crew__member.es-activa::after,
  html.con-relato .crew__member.es-activa :is(.crew__does, .crew__bio, .crew__skills, .crew__cred, .crew__plate) {
    opacity: 1;
    transform: none;
  }
  html.con-relato .crew__member.es-activa .crew__plate { transform: translate(0, -54%); }
  html.con-relato .crew__member.es-activa .crew__bio    { transition-delay: 0.05s; }
  html.con-relato .crew__member.es-activa .crew__skills { transition-delay: 0.1s; }
  html.con-relato .crew__member.es-activa .crew__cred   { transition-delay: 0.15s; }
}
@media (min-width: 480px) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  html.con-relato .crew__name,
  html.con-relato .crew__name::before,
  html.con-relato .crew__member::after,
  html.con-relato .crew__member :is(.crew__does, .crew__bio, .crew__skills, .crew__cred, .crew__plate) {
    transition: none !important;
  }
}

/* ============================================================
   ADAPTIVE LAPTOP — la escala entera respira con el viewport
   En laptops (1200-1600) todo se sentia GRANDE: la raiz rem ahora
   es fluida, asi el sistema completo (tipos, aires, columnas) se
   ACHICA coherente en pantallas chicas y recupera su tamano en
   monitores grandes — mismo diseno, otra talla. Y las medidas de
   lectura se ensanchan: mas texto por renglon, menos vacio. */
@media (min-width: 480px) and (pointer: fine) {
  html.con-relato { font-size: clamp(13px, 9.8px + 0.29vw, 16px); }

  /* medidas de lectura mas generosas en horizontal */
  html.con-relato .acto__how { max-width: 58ch; }
  html.con-relato .work__lead { max-width: 58ch; }
  html.con-relato .work__puente { max-width: 52ch; }
  html.con-relato .paper__line { max-width: 60ch; }
  html.con-relato .post__baja { max-width: 56ch; }
  html.con-relato .paper__sub-l { max-width: 60ch; }
  html.con-relato .crew__bio { max-width: 56ch; }

  /* nosotros: titulos a talla editorial, no cartel */
  html.con-relato .crew__member::after {
    font-size: clamp(1.8rem, 2.3vw, 2.5rem);
  }
  html.con-relato .crew__initials { font-size: clamp(8rem, 12.5vw, 12rem); }
  html.con-relato .about__title { font-size: clamp(2.1rem, 3.4vw, 3rem); }
}

/* el titular de Notes respirado: el tracking display (-0.045em)
   a esta talla lo dejaba CONDENSADO — se abre y gana interlinea */
html.con-relato .paper__title {
  letter-spacing: -0.02em;
  line-height: 1.04;
}


/* NOTES EN EL TELEFONO: compactado para que la lamina ENTRE
   (en iPhone con barra el svh se achica y el colofon quedaba
   cortado). Menos aire entre piezas, mismo diseno. */
@media (max-width: 767px) {
  html.relato-movil .paper { justify-content: flex-start; padding-top: calc(env(safe-area-inset-top, 0px) + 9svh); }
  html.relato-movil .paper__masthead { padding-block: 0 2rem; }
  html.relato-movil .paper__title { margin-top: 0.55rem; }
  html.relato-movil .paper__line { margin-top: 0.65rem; font-size: 1.02rem; line-height: 1.5; }
  html.relato-movil .paper__posts { margin-top: 1rem; }
  html.relato-movil .paper__posts .post { padding: 1.05rem 0 1.15rem; }
  html.relato-movil .post__baja { margin-top: 0.45rem; font-size: 0.9rem; line-height: 1.5; }
  html.relato-movil .post__leer { margin-top: 0.5rem; }
  html.relato-movil .paper__posts .post::after { font-size: 2.4rem; top: 0.9rem; }
  html.relato-movil .paper__sub { margin-top: 1.1rem; padding: 0.95rem 1rem 1.05rem; }
  html.relato-movil .paper__sub-l { margin-top: 0.35rem; font-size: 0.9rem; }
  html.relato-movil .paper__sub .paper__cta { margin-top: 0.8rem; }
}

/* ------------------------------------------------------------
   AUDITORIA IMPECCABLE — fixes A11y y touch targets
   1) h1 semantico (el hero se fue y la pagina quedo sin h1). */
.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* 2) foco visible en el form: el teclado tiene que VER donde esta */
.field__input:focus-visible {
  outline: 2px solid var(--reagent);
  outline-offset: 3px;
}
/* 3) targets tactiles >=44px en mobile: los links mono crecen su area
   de toque con padding (el negativo conserva el layout visual) */
@media (max-width: 767px) {
  html.relato-movil .paper__cta,
  html.relato-movil .work__cta,
  html.relato-movil .post__leer {
    padding-top: 11px;
    padding-bottom: 11px;
    margin-top: calc(clamp(1.2rem, 2.6vh, 1.8rem) - 11px);
    margin-bottom: -11px;
  }
  html.relato-movil .nav__mark {
    padding: 14px 10px;
    margin: -14px -10px;
  }
  html.relato-movil .nav__toggle {
    padding: 14px 10px;
    margin: -14px -10px;
    margin-left: auto;
  }
}

/* NOTES MOBILE, mas corto: menos aire arriba y entre piezas */
@media (max-width: 767px) {
  html.relato-movil .paper { padding-top: calc(env(safe-area-inset-top, 0px) + 6.5svh); }
  html.relato-movil .paper__masthead { padding-bottom: 1.2rem; }
  html.relato-movil .paper__title { font-size: clamp(1.4rem, 6vw, 1.7rem); }
  html.relato-movil .paper__line { font-size: 0.98rem; }
  html.relato-movil .paper__posts { margin-top: 0.7rem; }
  html.relato-movil .paper__posts .post { padding: 0.85rem 0 0.95rem; }
  html.relato-movil .post__t { font-size: clamp(1.3rem, 5.6vw, 1.55rem); }
  html.relato-movil .post__baja { max-width: 40ch; }
  html.relato-movil .paper__posts .post::after { font-size: 2rem; top: 0.75rem; }
  html.relato-movil .paper__sub { margin-top: 0.9rem; }
}

/* ------------------------------------------------------------
   TYPESET DE LA BIO — dos voces, cero choclo
   El lead (los tres campos) en tinta plena y peso; el recorrido
   en gris con la interlinea compensada para fondo oscuro. */
.bio__campos {
  display: block;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--void-ink);
  margin-bottom: 0.5rem;
}
.bio__resto {
  display: block;
  color: #9A9A94;
  letter-spacing: 0.004em;
  line-height: 1.75;
}
@media (min-width: 480px) and (pointer: fine) {
  html.con-relato .bio__campos { font-size: 1.12em; }
  /* en el ledger, la linea de skills duplicaria el lead: fuera */
  html.con-relato .crew__skills { display: none; }
  html.con-relato .crew__cred { margin-top: 1.1rem; }
}

/* menu desplegable mobile: talla editorial, no cartel */
@media (max-width: 767px) {
  html.relato-movil .menu__nav a {
    font-size: clamp(1.5rem, 6.4vw, 1.85rem);
    letter-spacing: -0.02em;
  }
  html.relato-movil .menu__idx { font-size: 11px; }
}

/* Experience web: la bajada en DOS lineas y el statement en UNA */
@media (min-width: 861px) and (pointer: fine) {
  html.con-relato .work__lead { max-width: 78ch; }
  html.con-relato .work__puente { max-width: none; }
  html.con-relato .work__linea {
    max-width: none;
    white-space: nowrap;
    font-size: clamp(1.15rem, 1.75vw, 1.55rem);
  }
}

/* ledger: nombre en UNA linea y recorrido en DOS */
@media (min-width: 861px) and (pointer: fine) {
  html.con-relato .crew__member::after {
    max-width: none;
    white-space: nowrap;
  }
  html.con-relato .crew__bio { max-width: 76ch; }
  html.con-relato .crew__cred { max-width: 76ch; }
}

/* JUSTIFICADO CON CRITERIO (web): solo los parrafos de lectura de
   varias lineas — bordes parejos tipo editorial, con guionado es/en
   para que no queden rios. Titulos, monos y lineas cortas, jamas. */
@media (min-width: 861px) and (pointer: fine) {
  html.con-relato .bio__resto,
  html.con-relato .work__lead,
  html.con-relato .paper__line,
  html.con-relato .post__baja,
  html.con-relato .acto__how {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
  /* el ancho real del recorrido: dos lineas holgadas */
  html.con-relato #about .crew__bio { max-width: 100%; }
  html.con-relato #about .crew__cred { max-width: 100%; }
}

/* bio del ledger: medida de lectura (60ch), sin guionado, a la
   izquierda — una linea de 100 caracteres con "in-terseccion" no es
   aprovechar el espacio, es cansar el ojo */
@media (min-width: 861px) and (pointer: fine) {
  html.con-relato #about .crew__bio { max-width: 60ch; }
  html.con-relato .bio__resto { text-align: start; hyphens: manual; -webkit-hyphens: manual; }
}

/* TML News: captura de email sin salir de la pagina (03-sep). El boton es
   el mismo CTA mono de siempre; el campo es un renglon con hairline, sin
   caja ni sombra, como el resto del formulario del cierre. */
.news { margin-top: clamp(1.6rem, 3.2vh, 2.4rem); max-width: 30rem; }
.news__row { display: flex; align-items: flex-end; gap: 1.4rem; }
.news__input {
  flex: 1 1 auto; min-width: 0;
  background: none; border: 0; border-radius: 0;
  border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  padding: 0.35rem 0; color: inherit; font: inherit;
  font-size: clamp(1rem, 1.2vw, 1.125rem); letter-spacing: -0.01em; line-height: 1.4;
  outline: none; transition: border-color .25s ease;
}
.news__input::placeholder { color: currentColor; opacity: .38; }
.news__input:focus-visible { border-bottom-color: var(--reagent); }
.news__btn { margin-top: 0 !important; background: none; border: 0; border-bottom: 1px solid currentColor; cursor: pointer; white-space: nowrap; flex: 0 0 auto; }
.news__btn:disabled { opacity: .5; cursor: default; }
.news__msg { margin-top: .9rem; min-height: 1.4em; }
html.con-relato .paper__sub .news { max-width: 34rem; }
@media (max-width: 560px) {
  .news__row { flex-direction: column; align-items: stretch; gap: 1.1rem; }
  .news__input { padding: 0.7rem 0; font-size: 1rem; }
  .news__btn { align-self: flex-start; }
}

/* NAV MOBILE OPACO (03-sep). En iOS la barra translucida dejaba ver el
   texto pasando por detras, sobre todo en la franja de la barra de
   estado; en tactil la barra es solida en cuanto se despega del tope. */
html.relato-movil .nav--stuck { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
html.relato-movil .nav--light.nav--stuck { background: #0B0B0B; }

/* iOS 26: la barra de estado es de vidrio y muestra lo que pasa por
   debajo, y el nav fijo nace justo bajo ella. Una losa del mismo fondo
   se extiende hacia arriba desde el nav y tapa esa franja. */
html.relato-movil .nav--stuck::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 160px;
  background: inherit; pointer-events: none;
}

/* TAPA DE LA BARRA DE ESTADO (iOS 26, 03-sep). Safari 26 pinta la franja
   de la barra de estado con el CONTENIDO del documento que va pasando e
   ignora las capas fixed, asi que ningun nav fijo la tapa. Un sticky vive
   en el documento: queda clavado arriba con el alto exacto del safe-area
   y sin ocupar lugar (margen negativo). En desktop el inset es 0. */
html.relato-movil .tapa-estado {
  position: sticky; top: 0; z-index: 200;
  height: env(safe-area-inset-top, 0px);
  margin-bottom: calc(-1 * env(safe-area-inset-top, 0px));
  background: #0B0B0B; pointer-events: none;
}
html:not(.relato-movil) .tapa-estado { display: none; }

/* v2 (03-sep): en iOS 26 el viewport arranca DEBAJO de la barra de estado
   (safe-area-inset-top = 0) y Safari sigue pintando el documento por
   encima, mostrando lo que acaba de salir por arriba. La tira sticky
   queda de alto cero y extiende una losa hacia arriba, fuera del
   viewport, que es justo la zona que se ve tras la barra de estado. */
html.relato-movil .tapa-estado { height: 0; margin-bottom: 0; overflow: visible; }
html.relato-movil .tapa-estado::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 200px;
  background: #0B0B0B;
}

/* ============================================================
   PULIDO (03-sep): superficies del navegador y estados que no se
   dibujan pero se sienten. Nada nuevo a la vista: cursor de texto,
   barra de scroll, foco, pulsado, numerales alineados.
   ============================================================ */
/* la barra de scroll pertenece al mundo: fina, tinta apagada, sin pista */
html.con-relato { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--paper) 22%, transparent) transparent; }
html.con-relato::-webkit-scrollbar { width: 8px; }
html.con-relato::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--paper) 22%, transparent); border-radius: 8px; }
html.con-relato::-webkit-scrollbar-track { background: transparent; }
/* el cursor de escritura es del color de la marca, como la seleccion */
.field__input, .news__input { caret-color: var(--reagent); }
.field__input--area { resize: none; min-height: 3.2em; }
/* pulsado: un descenso breve, mismo easing del resto */
.enquiry__btn, .news__btn, .paper__cta, .post, .crew__name, .marca-chip { transition-property: background, color, transform, border-color, opacity; transition-duration: var(--fast); transition-timing-function: var(--ease-in); }
.enquiry__btn:active { transform: translateY(1px); }
.news__btn:hover, .paper__cta:hover { color: var(--reagent); }
.news__btn:active { transform: translateY(1px); }
.news__btn:focus-visible, .paper__cta:focus-visible, .post:focus-visible, .crew__name:focus-visible { outline: 2px solid var(--reagent); outline-offset: 5px; }
button:disabled, .enquiry__btn[disabled] { cursor: progress; }
/* numerales alineados donde hay cifras: regla de lectura, indices */
.regla__pct, .crew__member::after, .reel__barra, .riel { font-variant-numeric: tabular-nums; }
/* links de texto: subrayado fino y separado de la x-height */
.footer a:hover, .close__direct:hover, .enquiry__msg a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
/* el envio a medias nunca queda mudo: el boton se apaga y el mensaje respira */
.enquiry__btn[disabled] { opacity: .55; }

/* ============================================================
   SCROLLER INTERNO EN TACTIL (03-sep). Safari 26 pinta la barra de
   estado con el contenido del documento que va pasando e ignora las
   capas fixed/sticky; la unica forma de que muestre el color de fondo
   es que el documento NO scrollee. En tactil el body es un contenedor
   fijo que scrollea por dentro: el html queda en scrollY=0 para
   siempre y Safari usa el fondo raiz (#0B0B0B). Snap, anclas e IO
   siguen funcionando porque todo se mide contra el viewport.
   ============================================================ */
html.relato-movil { height: 100%; overflow: hidden; background: #0B0B0B; }
html.relato-movil body {
  position: fixed; inset: 0; width: 100%; height: 100%;
  overflow-x: hidden; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: none;
  scroll-padding-top: 0;
}
html.relato-movil.en-deck { scroll-snap-type: none; }
html.relato-movil.en-deck body { scroll-snap-type: y mandatory; }
html.relato-movil body.is-locked { overflow: hidden; }
html.relato-movil .tapa-estado { display: none; }

/* ============================================================
   AJUSTES MOBILE (03-sep, tras el scroller interno)
   ============================================================ */
/* la miga del metodo (Think▲ · Make■ · Launch●) va alineada al margen,
   justo bajo la barra, como una linea mas de la lamina: antes flotaba
   centrada y parecia fuera de lugar */
html.relato-movil .renglon {
  top: calc(env(safe-area-inset-top, 0px) + 5.4rem);
  left: var(--gutter); right: auto;
  align-items: flex-start;
  font-size: 0.95rem;
}
/* el bloque del acto baja un poco: menos vacio abajo */
html.relato-movil .acto__escena { padding-top: 9svh; }
/* Notes mas corto en el telefono: la ficha de la proxima nota sin "Leer",
   menos aire entre piezas, colofon mas compacto */
@media (max-width: 767px) {
  html.relato-movil .paper { padding-top: calc(env(safe-area-inset-top, 0px) + 5svh); }
  html.relato-movil .paper__masthead { padding-bottom: 1.1rem; }
  html.relato-movil .paper__line { font-size: 0.95rem; margin-top: 0.5rem; }
  html.relato-movil .paper__posts { margin-top: 0.4rem; }
  html.relato-movil .paper__posts .post { padding: 0.85rem 0 0.9rem; }
  html.relato-movil .post__baja { font-size: 0.88rem; margin-top: 0.35rem; }
  html.relato-movil .post__leer { margin-top: 0.4rem; }
  html.relato-movil .post--proximo .post__leer { display: none; }
  html.relato-movil .post--proximo .post__t { font-size: 1.25rem; }
  html.relato-movil .paper__posts .post::after { font-size: 2rem; top: 0.7rem; }
  html.relato-movil .paper__sub { margin-top: 0.8rem; padding: 0.8rem 0.9rem 0.85rem; }
  html.relato-movil .paper__sub-l { font-size: 0.86rem; margin-top: 0.25rem; }
  html.relato-movil .news { margin-top: 0.7rem; }
  html.relato-movil .news__row { gap: 0.7rem; }
  html.relato-movil .news__input { padding: 0.45rem 0; font-size: 1rem; }
  html.relato-movil .news__msg { margin-top: 0.4rem; min-height: 0; }
  html.relato-movil .news__msg:empty { display: none; }
}
@media (max-width: 767px) {
  /* la proxima nota es una sola linea: el kicker ya lo dice todo */
  html.relato-movil .post--proximo .post__t { display: none; }
  html.relato-movil .paper__posts .post--proximo { padding: 0.7rem 0 0.75rem; }
  html.relato-movil .paper__posts .post--proximo::after { display: none; }
  html.relato-movil .paper__title { font-size: clamp(1.4rem, 6vw, 1.7rem); }
  html.relato-movil .paper__masthead { padding-bottom: 0.8rem; }
  html.relato-movil .paper__sub-t { font-size: 1.1rem; }
}
@media (max-width: 767px) {
  html.relato-movil .paper { padding-top: calc(env(safe-area-inset-top, 0px) + 3.5svh); }
  html.relato-movil .paper__masthead { padding-bottom: 0.6rem; }
  html.relato-movil .paper__posts .post { padding: 0.7rem 0 0.75rem; }
  html.relato-movil .paper__sub { padding: 0.7rem 0.85rem 0.75rem; margin-top: 0.6rem; }
  html.relato-movil .news { margin-top: 0.5rem; }
}

/* la miga se despide (mobile, 03-sep): al pasar a Experience no se apaga
   de golpe, sube, se desenfoca y las primitivas se contraen en cascada */
html.relato-movil .renglon {
  transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.55s ease;
  will-change: opacity, transform, filter;
}
html.relato-movil .renglon.renglon--sale { transform: translateY(-0.9em); filter: blur(4px); }
html.relato-movil .renglon .renglon__w { transition: opacity 0.55s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), color 0.55s ease; }
html.relato-movil .renglon--sale .renglon__w:nth-child(1) { transition-delay: 0s; transform: translateY(-0.3em); }
html.relato-movil .renglon--sale .renglon__w:nth-child(3) { transition-delay: 0.06s; transform: translateY(-0.45em); }
html.relato-movil .renglon--sale .renglon__w:nth-child(5) { transition-delay: 0.12s; transform: translateY(-0.6em); }
html.relato-movil .renglon__dock { transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
html.relato-movil .renglon--sale .renglon__dock { transform: scale(0); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  html.relato-movil .renglon.renglon--sale, html.relato-movil .renglon--sale .renglon__w { transform: none; filter: none; }
}


/* ============================================================
   MOBILE MAS TECNOLOGICO (03-sep). Efectos livianos: opacity,
   transform y clip-path; nada que corra por frame salvo el scroll.
   ============================================================ */
/* A. linea de progreso bajo la barra (el JS la posiciona y la mueve) */
html.relato-movil .fx-progress { animation: none; height: 1.5px; opacity: .9; }
html.relato-movil .fx-progress::after {
  content: ''; position: absolute; right: -3px; top: -2.25px; width: 6px; height: 6px;
  background: var(--reagent); border-radius: 50%;
  box-shadow: 0 0 10px 2px rgba(230, 0, 110, 0.55);
}
/* B. el indice cuenta y el nombre se descubre con un barrido */
html.relato-movil .acto__num { font-variant-numeric: tabular-nums; }
html.relato-movil .acto .acto__nombre {
  clip-path: inset(-0.1em 100% -0.15em 0);
  transition: clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.12s, opacity 0.4s ease;
}
html.relato-movil .acto.es-coreo .acto__nombre { clip-path: inset(-0.1em -0.2em -0.15em 0); }
html.relato-movil .acto .acto__nombre .dot { transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.85s; display: inline-block; transform: scale(0); }
html.relato-movil .acto.es-coreo .acto__nombre .dot { transform: scale(1); }
/* C. reel: etiqueta de la ficha activa + contador; las otras fichas se atenuan */
html.relato-movil .reel__idx {
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--reagent-lift); margin-left: 0.4rem;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
html.relato-movil .reel__idx.tic { animation: reel-tic 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes reel-tic { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
html.relato-movil .reel__barra i { cursor: pointer; padding: 6px; box-sizing: content-box; background-clip: content-box; }
html.relato-movil .reel__barra.es-usado .reel__hint { display: none; }
html.relato-movil .ficha__fila { transition: opacity 0.35s ease; }
html.relato-movil .acto.es-coreo .ficha__fila:not(.es-activa) { opacity: 0.55; }
/* la ficha activa muestra una esquina magenta: marca de lectura */
html.relato-movil .ficha__fila { position: relative; }
html.relato-movil .ficha__fila::before {
  content: ''; position: absolute; top: -1px; left: -1px; width: 14px; height: 14px;
  border-top: 2px solid var(--reagent); border-left: 2px solid var(--reagent);
  opacity: 0; transform: scale(0.6); transform-origin: 0 0;
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
html.relato-movil .ficha__fila.es-activa::before { opacity: 1; transform: none; }
/* E. Experience: la linea puente se subraya sola al llegar */
html.relato-movil .work__puente::after {
  content: ''; display: block; width: 3.5rem; height: 2px; margin-top: 0.9rem;
  background: var(--reagent); transform: scaleX(0); transform-origin: left;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.35s;
}
html.relato-movil .work__puente.is-visible::after { transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.relato-movil .acto .acto__nombre { clip-path: none; transition: none; }
  html.relato-movil .acto .acto__nombre .dot { transform: none; transition: none; }
  html.relato-movil .reel__idx.tic { animation: none; }
}

/* el punto activo tambien recorta el fondo al contenido (el shorthand lo reseteaba) */
html.relato-movil .reel__barra i.is-on { background-clip: content-box; }

/* ============================================================
   WEB: ACTO CENTRADO EN LA PANTALLA (03-sep). Las fichas vuelven a ser
   filas (Pilar descarto las columnas: parecian cajas y sumaban tamanos).
   ============================================================ */
@media (min-width: 860px) and (pointer: fine) {
  html.con-riel { --carril: clamp(0rem, calc(15rem - (100vw - 1680px) / 2), 15rem); }
  html.con-riel.con-relato .acto__escena { margin-left: calc(var(--carril) * -0.5); }
  html.con-relato .acto__nombre { font-size: clamp(3.2rem, 13.8vw, 14.7rem); }
  html.con-relato .acto__num { font-variant-numeric: tabular-nums; }
  /* hover en las filas: la esquina magenta marca la fila leida */
  html.con-relato .ficha__fila::before {
    content: ''; position: absolute; top: -1px; left: 0; width: 12px; height: 12px;
    border-top: 2px solid var(--reagent); border-left: 2px solid var(--reagent);
    opacity: 0; transform: scale(0.6); transform-origin: 0 0;
    transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  }
  html.con-relato .ficha__fila:hover::before { opacity: 1; transform: none; }
}

/* NOTES (web): los articulos venian tirados al borde derecho por el
   space-between; las dos columnas ahora se apoyan a la izquierda con un
   respiro fijo, y la columna de articulos gana ancho. */
html.con-relato .paper__masthead {
  grid-template-columns: minmax(0, 38rem) minmax(0, 38rem);
  justify-content: start;
  column-gap: clamp(3.5rem, 6vw, 7rem);
}

/* Experience (web): la bajada corta en "Un recorrido..." y no parte
   palabras; en mobile el salto se ignora y el texto fluye. */
html.con-relato .work__lead { max-width: none; text-align: start; hyphens: manual; -webkit-hyphens: manual; }
.salto-web { display: none; }
html.con-relato .salto-web { display: inline; }

/* Notes (web): la bajada corta en "que vale la pena..." sin justificar ni partir */
html.con-relato .paper__line { max-width: none; text-align: start; hyphens: manual; -webkit-hyphens: manual; white-space: normal; }

/* ============================================================
   COMPENSACION OPTICA DEL CIRCULO (03-sep). Un circulo del mismo alto
   que el cuadrado se ve mas chico (tiene menos area); en toda la marca
   el circulo va un 8% mas grande, como en la intro (O680 vs 640).
   Los svg ya llevan r=58 (vs cuadrado 108); aca van los dibujados en CSS.
   ============================================================ */
.dot--cir,
#acto-launch .acto__ficha dt::before,
html.con-relato #acto-launch .acto__tags li::before,
html.relato-movil #acto-launch .reel__barra i,
html.relato-movil .crew__member:nth-child(3) .crew__name::after,
.ini__f--cir,
.renglon__dock.dot--cir { transform: scale(1.08); }
html.relato-movil #acto-launch .reel__barra i.is-on { transform: scale(1.38); }

/* ============================================================
   RIEL (web), 03-sep
   ============================================================ */
/* el idioma ES/EN vive en el riel, que no recibe puntero salvo en sus
   links: los botones tambien tienen que recibirlo (en Mac no cambiaba) */
.riel button, .riel .lang, .riel .lang__b { pointer-events: auto; }
/* el riel se apaga cuando no se lo usa y se enciende al acercarse: la
   seccion activa queda legible, el resto deja de competir con la pagina */
html.con-riel .riel { opacity: 0.42; transition: opacity 0.45s ease; }
html.con-riel .riel:hover, html.con-riel .riel:focus-within { opacity: 1; }
/* el nombre del acto se centra por la palabra, no por la palabra + punto */
html.con-relato .acto__nombre .dot { margin-right: -0.1em; }

/* el nombre grande queda unos px a la derecha del cuerpo por su propia caja: se compensa solo el */
@media (min-width: 860px) and (pointer: fine) { html.con-riel.con-relato .acto__cabeza { margin-left: 0; } }

/* la escena tenia mas padding a la izquierda que a la derecha (por eso el nombre caia a la derecha): simetrico */
@media (min-width: 860px) and (pointer: fine) { html.con-relato .acto__escena { padding-left: var(--gutter); padding-right: var(--gutter); } }

/* SELECCION EN TITULARES (web, 03-sep). Al arrastrar el mouse sobre un
   titular grande, la seleccion pintaba un bloque magenta detras de las
   letras. En los titulares la seleccion invierte el color (letras
   magenta, sin bloque); en el texto de lectura sigue el bloque normal. */
.h-display::selection, .h-display *::selection,
.acto__nombre::selection, .acto__nombre *::selection,
.paper__title::selection, .work__title::selection, .close__title::selection,
.crew__name::selection, .about__title::selection { background: transparent; color: var(--reagent); }
.h-display::-moz-selection, .close__title::-moz-selection { background: transparent; color: var(--reagent); }

/* PISTA DE SCROLL (web): abajo al centro, mono en mayusculas y una linea
   que cae en bucle; se retira al primer scroll (relato.js). */
.cue-web {
  position: fixed; left: 50%; bottom: clamp(1.4rem, 3.2vh, 2.4rem); z-index: 60;
  transform: translate(-50%, 8px);
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(245, 245, 243, 0.55);
  opacity: 0; pointer-events: none;
  transition: opacity 0.7s ease 1.6s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1.6s;
}
.cue-web.es-visible { opacity: 1; transform: translate(-50%, 0); }
.cue-web:not(.es-visible) { transition-delay: 0s; }
.cue-web__l { position: relative; display: block; width: 1px; height: 3rem; overflow: hidden; background: rgba(245, 245, 243, 0.14); }
.cue-web__l::after {
  content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 45%;
  background: var(--reagent); animation: cue-cae 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes cue-cae { 0% { transform: translateY(-100%); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(240%); opacity: 0; } }
html.relato-movil .cue-web { display: none; }
@media (prefers-reduced-motion: reduce) { .cue-web__l::after { animation: none; transform: none; } }

/* DESTELLO DE LA APERTURA (03-sep). El velo web con sus formas se pintaba
   desde el primer frame hasta que el script del pie lo quitaba: en
   mobile se veia un flash de ▲■● antes de la intro. En tactil el velo no
   existe desde el CSS; y en web las formas nacen a escala 0 (GSAP las
   trae), asi tampoco parpadean antes de la animacion. */
@media (hover: none) and (pointer: coarse) { .js .veil { display: none !important; } }
/* (las formas NO se ocultan por CSS: GSAP anima el atributo transform del svg y la propiedad CSS lo pisaba; la apertura web quedaba vacia) */

/* CIERRE (web): el suelo negro de la seccion entraba como una losa
   flotando sobre el mundo al scrollear; ahora se funde desde arriba y
   solo es solido donde vive el titulo. */
html.con-mundo .close {
  background: linear-gradient(to bottom, rgba(11, 11, 11, 0) 0%, var(--void) 26%);
}


/* ============================================================
   NOSOTROS, LEDGER (web) — pulido 03-sep
   ============================================================ */
@media (min-width: 480px) and (pointer: fine) {
  /* el marcador del indice es la primitiva de cada persona (▲ ■ ●),
     apagada en gris y encendida en magenta; el guion queda como riel */
  html.con-relato .crew__name::before {
    width: 0.62em; height: 0.62em; margin-right: 0.35rem;
    background: currentColor; transform: none; opacity: 0.55;
    transition: opacity 0.28s ease, background 0.28s linear, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  html.con-relato .crew__member:nth-child(1) .crew__name::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
  html.con-relato .crew__member:nth-child(3) .crew__name::before { border-radius: 50%; transform: scale(1.08); }
  html.con-relato .crew__member.es-activa .crew__name::before { opacity: 1; background: var(--reagent); transform: scale(1.18); }
  html.con-relato .crew__member:nth-child(3).es-activa .crew__name::before { transform: scale(1.26); }
  /* el indice lleva su propia regla abajo, como cierre de la lista */
  html.con-relato .crew__member:nth-child(3) .crew__name::after { content: '03'; }
  /* skills: instrumentos en chips de hairline, mono, en una linea */
  html.con-relato .crew__skills { display: flex; gap: 0.45rem; margin-top: 1.4rem; }
  html.con-relato .crew__skills li { border: 1px solid rgba(245, 245, 243, 0.16); padding: 0.38em 0.75em; color: var(--ink-2); font-size: 10.5px; transition: border-color 0.3s ease, color 0.3s ease; }
  html.con-relato .crew__skills li + li::before { content: none; margin: 0; }
  html.con-relato .crew__skills li:hover { border-color: var(--reagent); color: var(--void-ink); }
  html.con-relato .crew__member.es-activa .crew__skills { transition-delay: 0.14s; }
  /* el monograma de fondo: mas grande, mas atras, apenas presente */
  html.con-relato .crew__plate { font-size: clamp(9rem, 16vw, 15rem); opacity: 0.05; right: -0.06em; bottom: -0.12em; }
  /* el perfil entra con un pelo mas de recorrido: se nota el cambio */
  html.con-relato .crew__member.es-activa .crew__does { transition-delay: 0s; }
}

/* PUNTOS DEL REEL (mobile, 03-sep). El area de toque (padding) hacia que el
   clip-path del triangulo recortara la caja entera y quedara un cuadrado.
   El glifo vive ahora en un ::before de 7px dentro de una caja de toque
   sin recorte: triangulo en Think, cuadrado en Make, circulo en Launch. */
html.relato-movil .reel__barra i,
html.relato-movil #acto-think .reel__barra i,
html.relato-movil #acto-launch .reel__barra i {
  position: relative; width: 7px; height: 7px; padding: 6px; box-sizing: content-box;
  background: none; clip-path: none; border-radius: 0; transform: none;
}
html.relato-movil .reel__barra i::before {
  content: ''; position: absolute; inset: 6px; background: rgba(245, 245, 243, 0.22);
  transition: background 0.25s ease, transform 0.25s ease;
}
html.relato-movil #acto-think .reel__barra i::before { clip-path: polygon(50% 0%, 100% 100%, 0% 100%); }
html.relato-movil #acto-launch .reel__barra i::before { border-radius: 50%; transform: scale(1.08); }
html.relato-movil .reel__barra i.is-on::before { background: var(--reagent); transform: scale(1.3); }
html.relato-movil #acto-launch .reel__barra i.is-on::before { transform: scale(1.38); }

/* NOSOTROS ledger, ajuste fino (03-sep): el monograma de fondo sube al
   tope del perfil, donde no lo cruza ninguna regla; el indice se alinea
   con el nombre display (misma altura de la primera fila) y las tres
   primitivas comparten centro optico. */
@media (min-width: 480px) and (pointer: fine) {
  html.con-relato .crew__plate { top: 0; bottom: auto; transform: none; line-height: 0.82; }
  html.con-relato .crew__member:nth-child(1) .crew__name { top: 2.35rem; }
  html.con-relato .crew__member:nth-child(2) .crew__name { top: 5.15rem; }
  html.con-relato .crew__member:nth-child(3) .crew__name { top: 7.95rem; }
  html.con-relato .crew__name::before { align-self: center; }
  html.con-relato .crew__member:nth-child(1) .crew__name::before { transform: translateY(0.5px); }
  html.con-relato .crew__member:nth-child(1).es-activa .crew__name::before { transform: translateY(0.5px) scale(1.18); }
}
@media (min-width: 480px) and (pointer: fine) {
  /* el activo tambien: la regla del intercambio lo subia un 54% */
  html.con-relato .crew__member.es-activa .crew__plate { transform: none; }
  html.con-relato .crew__initials { font-size: clamp(7.5rem, 14vw, 13rem); line-height: 0.82; color: rgba(245, 245, 243, 0.05); }
}

/* NOSOTROS ledger: una sola voz mono (03-sep). Todo lo mono de la seccion
   usa el mismo tamano, peso y tracking que los kickers del resto del
   sitio (11px / 500 / 0.16em): indice, numero, rol y chips. */
@media (min-width: 480px) and (pointer: fine) {
  html.con-relato .crew__name { font-size: 11px; letter-spacing: 0.16em; font-weight: 500; }
  html.con-relato .crew__name::after { font-size: 10px; letter-spacing: 0.16em; }
  html.con-relato .crew__does { font-size: 11px; letter-spacing: 0.16em; font-weight: 500; color: #9A9A94; }
  html.con-relato .crew__skills li { font-size: 11px; letter-spacing: 0.16em; font-weight: 500; }
  html.con-relato .crew__idx, html.con-relato .crew > .crew__kicker { font-size: 11px; letter-spacing: 0.16em; }
}

/* ============================================================
   ESCALA DE CUERPO (03-sep). Auditoria tipografica: en web habia texto
   de lectura a 12-13px (fichas, bajadas de Notes, credenciales) y monos
   a 10px. Se ordena en tres pasos de cuerpo y un solo mono:
     cuerpo  15-18px   (bajadas, bio, items de ficha; en px, el rem es fluido)
     detalle 14px      (credenciales, notas al pie)
     mono    11px / 500 / 0.16em (etiquetas, siempre)
   Titulares y display quedan como estan.
   ============================================================ */
@media (min-width: 861px) and (pointer: fine) {
  /* fichas de servicios: proposito y items legibles */
  html.con-relato .ficha__que { font-size: clamp(14px, 1.05rem, 16px); font-weight: 500; color: var(--acto-tinta); margin-bottom: 0.25rem; }
  html.con-relato .acto__ficha dd { font-size: clamp(14px, 1rem, 15px); line-height: 1.6; }
  /* Notes: bajadas de post y colofon */
  html.con-relato .post__baja { font-size: clamp(15px, 1.07rem, 16px); line-height: 1.6; }
  html.con-relato .paper__sub-l { font-size: clamp(15px, 1.07rem, 16px); }
  /* Experience */
  html.con-relato .work__lead { font-size: clamp(16px, 1.15rem, 18px); line-height: 1.6; }
  /* Nosotros: bio y credencial */
  html.con-relato .crew__bio { font-size: clamp(16px, 1.15rem, 18px); line-height: 1.65; }
  html.con-relato .crew__cred { font-size: 14px; }
  /* monos a 10px -> 11px, misma voz en todo el sitio */
  html.con-relato .field__label, html.con-relato .close__slogan, html.con-relato .close__direct-k,
  html.con-relato .regla__pct, html.con-relato .skip-link { font-size: 11px; }
  html.con-relato .post__leer { font-weight: 500; }
}
/* mobile: los items de ficha y la bio suben al cuerpo minimo */
html.relato-movil .ficha__fila dd .it { font-size: 0.9rem; }
html.relato-movil .crew__bio { font-size: 1rem; line-height: 1.6; }

/* la bajada de Experience tenia una regla mas especifica: se fija por id */
@media (min-width: 861px) and (pointer: fine) { html.con-relato #work .work__lead { font-size: clamp(16px, 1.15rem, 18px); line-height: 1.6; } }