/* ===========================================================================
   JurisOne — hoja del sitio
   Ninguna regla usa un color, un radio o una medida que no venga de tokens.css
   Sin bordes, sin filetes, sin separadores: la jerarquía es escala y aire.
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: var(--t-cuerpo);
  line-height: 1.6;
  font-synthesis-weight: none;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 4px;
  border-radius: 4px;
}

::selection { background: var(--menta); color: var(--tinta); }

/* — retícula ------------------------------------------------------------- */

.contenedor {
  width: 100%;
  max-width: calc(var(--ancho) + var(--marg) * 2);
  margin-inline: auto;
  padding-inline: var(--marg);
}

.seccion { padding-block: var(--pad-sec); background: var(--campo); color: var(--texto); }
.seccion--tras-flota { padding-top: calc(var(--pad-sec) + var(--solape)); }

.salto-contenido {
  position: absolute;
  left: var(--marg);
  top: 0;
  transform: translateY(-140%);
  z-index: 60;
  background: var(--morado);
  color: var(--papel);
  padding: 0.75rem 1.25rem;
  border-radius: var(--r-pastilla);
  font-weight: 700;
  transition: transform 180ms var(--ease-out);
}
.salto-contenido:focus { transform: translateY(0.5rem); }

/* lo que solo oyen los lectores de pantalla */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* — tipografía ----------------------------------------------------------- */

/* 700 y no 800: Plus Jakarta a 800 en cuerpos grandes pesa demasiado,
   y lo que se pidió es una tipografía más fina */
.titular-hero,
.titular-sec,
.titular-tier {
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.02;
  text-wrap: balance;
}

.titular-hero  { font-size: var(--t-hero); }
.titular-sec   { font-size: var(--t-sec); }
.titular-tier  { font-size: var(--t-tier); line-height: 1.06; }

/* El punto de Bankly, en nuestro acento. Es puntuación, no información. */

.entrada {
  font-size: var(--t-sub);
  font-weight: 400;
  line-height: 1.45;
  color: var(--texto-suave);
  max-width: 52ch;
}

.parrafo { color: var(--texto-suave); max-width: 58ch; }
:is(.titular-hero, .titular-sec, .titular-tier) + .parrafo { margin-top: clamp(1.1rem, 1.9vw, 1.7rem); }
.parrafo + .parrafo { margin-top: 1.1em; }

.destacado { color: var(--acento); font-weight: 700; }

.rotulo {
  font-size: var(--t-menor);
  font-weight: 600;
  color: var(--texto-suave);
}

/* — botón ---------------------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.9rem 2.1rem;
  border: 0;
  border-radius: var(--r-pastilla);
  background: var(--morado);
  color: var(--papel);
  font: inherit;
  font-size: var(--t-menor);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .boton:hover { background: var(--l-41); }
}
.boton:active { transform: scale(0.97); }

.campo-oscuro .boton { background: var(--menta); color: var(--tinta); }
@media (hover: hover) and (pointer: fine) {
  .campo-oscuro .boton:hover { background: var(--m-34); color: var(--papel); }
}

/* — cabecera ------------------------------------------------------------- */

/* LA CABECERA FLOTA

   Ya no es una banda pegada al borde de la ventana: es una lámina que
   se despega por los cuatro lados y por debajo de la cual pasa la
   página. Es la misma lámina que la ficha que vuela sobre el campo
   —mismo radio, misma sombra—, así que no hay un material nuevo en la
   página: hay uno que ahora también esta arriba.

   Flota siempre sobre papel blanco, también cuando por debajo pasan
   la tinta o el morado. Por eso el menú, el botón y el filo se miden
   una sola vez contra el blanco y valen para toda la página: no hay
   un caso oscuro que medir.

   `sticky` y no `fixed`: la lámina nace en su sitio del flujo, ya
   separada del borde por --flote-y, y al llegar ahí se queda. Sin
   salto, sin reservar hueco, sin que el contenido brinque al fijarse. */
.cabecera {
  --flote-x: clamp(12px, 3vw, 30px);
  --flote-y: clamp(10px, 1.2vw, 16px);

  position: sticky;
  top: var(--flote-y);
  z-index: 50;
  width: min(100% - var(--flote-x) * 2, calc(var(--ancho) + clamp(2rem, 5vw, 4.5rem)));
  margin: var(--flote-y) auto 0;
  border-radius: var(--r-flota);
  background: var(--papel);
  box-shadow: var(--s-baja);
  transition: box-shadow 260ms ease;
}
/* al despegarse la página, la lámina levanta la sombra: es lo único
   que dice que ahora hay algo por debajo */
.cabecera.esta-fija { box-shadow: var(--s-alta); }

/* la fila ya no usa el margen de la página: dentro de la lámina ese
   margen sería un hueco enorme. Lleva el suyo, a escala de la lámina. */
.cabecera__fila {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: 62px;
  max-width: none;
  padding-inline: clamp(1rem, 2.2vw, 2rem);
}

.cabecera__marca { flex: 0 0 auto; }
/* el isotipo, no el logotipo: cuadrado y de la altura de la fila */
.cabecera__logo { width: clamp(30px, 2.6vw, 36px); height: auto; }

/* ============================================================
   EL FILO QUE SE RECORRE

   Lo que pidió el cliente es una línea animada rodeando la cabecera.
   Lo que NO puede ser es un marco: un trazo cerrado dando vueltas es
   exactamente el filete que lleva toda la página evitando.

   Así que no hay marco. Hay un solo reflejo, corto y afilado, que
   recorre el canto de la lámina y no deja nada detrás. Es la luz
   corriendo por el filo de una plancha al girarla, no un borde
   encendido. Cuando no está pasando por un lado, ese lado no tiene
   línea ninguna: no la tiene nunca.

   Cómo va montado, y por qué así:

   · `offset-path: inset()` recorre el perímetro redondeado por su
     propia longitud de arco, que es lo que hace que el reflejo vaya
     a la misma velocidad en el lado largo y en el corto. Un
     `conic-gradient` girando —la receta habitual— sobre una lámina
     de 1250 × 62 se arrastraría por los extremos y cruzaría el lado
     largo de un salto.

   · El reflejo es una barra rígida, y una barra rígida no dobla una
     esquina: al llegar al canto corto —62 px— una pieza de 96 px se
     salía medio palmo por arriba y por abajo de la lámina. Medido,
     no supuesto. Por eso va dentro de `.cabecera__filo`, una capa
     que solo recorta el reflejo contra el mismo redondeo de la
     lámina: lo que sobresale se va, y al doblar el canto el reflejo
     se acorta solo, que es la luz escorzada al girar el filo. Se
     recorta esa capa y no la cabecera, que se comería el anillo de
     foco del teclado del menú y del botón.

   · 2 px de grueso, metido 2 px hacia dentro. Fino a propósito: lo
     que se pidió es un filo, y un filo de 3 px ya es un borde.

   · Los cantos cortos suman 124 px de un perímetro de 2.470: el
     reflejo pasa el 95 % del bucle por los lados largos y dobla en
     dos décimas de segundo. Nunca hay un lado encendido de punta a
     punta el tiempo suficiente para leerse como marco.

   · Lo que se mueve es una sola pseudo-pieza de 96 px en el sitio
     más caro de la página —fija y en bucle—, no un degradado que se
     vuelve a pintar entero cada cuadro. Medido más abajo.

   El `@supports` no es cortesía: sin `offset-path` el reflejo se
   quedaría plantado en una esquina de la lámina, y eso si sería una
   raya. Donde no hay recorrido, no hay reflejo.
   ============================================================ */
.cabecera__filo {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

@supports (offset-path: inset(2px round 10px)) {
  .cabecera__filo::before {
    content: "";
    position: absolute;
    width: clamp(48px, 7vw, 96px);
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg,
      transparent, var(--l-72) 30%, var(--morado) 50%, var(--l-72) 70%, transparent);
    offset-path: inset(2px round calc(var(--r-flota) - 2px)) border-box;
    offset-rotate: auto;
    offset-anchor: 50% 50%;
    animation: filo 9s linear infinite;
  }
}

@keyframes filo { to { offset-distance: 100%; } }

/* quieto, como se pidió: parado sobre el lado de arriba, no en un
   canto, donde el reflejo se dobla y parece un trozo de marco */
@media (prefers-reduced-motion: reduce) {
  .cabecera__filo::before { animation: none; offset-distance: 16%; }
}

/* el nav va centrado en la fila, no pegado a la derecha: la marca
   y el botón quedan de anclas a cada lado y el menú manda el centro */
.nav { flex: 1 1 auto; display: flex; justify-content: center; }
.nav__lista { display: flex; flex-wrap: wrap; gap: clamp(0.9rem, 1.9vw, 1.9rem); }
.nav__enlace {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--t-menor);
  font-weight: 600;
  color: var(--l-26);
  transition: color 180ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .nav__enlace:hover { color: var(--morado); }
}
/* el botón encoge con la fila pero se queda en 44 px de alto: por
   debajo de eso deja de ser un blanco cómodo para un dedo */
.cabecera .boton {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0.6rem clamp(1.1rem, 2vw, 1.7rem);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
}

/* Por debajo de 1200 la nav no cabe en una línea; se recurre a la del pie,
   que lleva las seis secciones. Una sola página: todo queda a un scroll. */
@media (max-width: 1199px) {
  .nav { display: none; }
  .cabecera__fila { justify-content: space-between; }
}

/* — 1. portada ----------------------------------------------------------- */

/* la portada descuenta la cabecera: la lámina flotante va por encima en
   el flujo, así que sin descontarla la sección medía una pantalla ENTERA
   más la cabecera, el contenido caía por debajo del centro y arriba
   sobraba aire. Y su padding propio se queda en lo justo: con la altura
   mínima y el centrado, un padding grande solo empuja. */
.portada {
  padding-block: clamp(20px, 2.5vw, 40px) clamp(32px, 4vw, 64px);
}

/* Sin el objeto al lado, la portada deja de ser dos columnas: el titular
   se queda solo y centrado, que es como se lee cuando no compite con
   nada. El ancho se limita para que no se estire de borde a borde. */
.portada__reja {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}

.portada__texto {
  max-width: min(100%, 52rem);
  margin-inline: auto;
}

/* Es lo único que hay en la portada: puede crecer por encima del tamaño
   de titular del resto del sitio sin competir con nada. */
.portada .titular-hero { font-size: clamp(2.4rem, 5.8vw, 5.2rem); }
.portada .parrafo { margin-top: clamp(1.4rem, 2.4vw, 2rem); }
.portada .boton { margin-top: clamp(1.8rem, 3vw, 2.6rem); }

@media (max-width: 899px) {
  .portada__texto { max-width: none; }
}

/* — el objeto: la firma. Volumen de verdad, se abre con el scroll --------- */

.objeto {
  perspective: 1400px;
  perspective-origin: 50% 42%;
  aspect-ratio: 1 / 0.86;
  display: grid;
  place-items: center;
}

.objeto__escena {
  position: relative;
  width: min(100%, 460px);
  aspect-ratio: 1;
  transform-style: preserve-3d;
  transform: rotateX(58deg) rotateZ(-42deg);
}

.objeto__sombra {
  position: absolute;
  inset: 12% 12% auto 12%;
  aspect-ratio: 1;
  transform: translateZ(-130px);
  background: radial-gradient(closest-side, rgb(17 9 52 / 0.34), rgb(17 9 52 / 0));
  filter: blur(18px);
}

.losa {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 62%;
  aspect-ratio: 1;
  border-radius: var(--r-losa);
  transform-style: preserve-3d;
  will-change: transform;
  box-shadow: 0 0 46px rgb(17 9 52 / 0.30);
}

/* las dos caras laterales que se ven en esta proyección */
.losa::before,
.losa::after {
  content: "";
  position: absolute;
  background: var(--cara-lado);
}
.losa::before {
  top: 100%; left: 0;
  width: 100%; height: var(--grosor);
  transform-origin: top;
  transform: rotateX(-90deg);
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
.losa::after {
  top: 0; left: 100%;
  width: var(--grosor); height: 100%;
  transform-origin: left;
  transform: rotateY(90deg);
  background: var(--cara-canto);
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.losa--1 { --grosor: 26px; background: var(--l-26); --cara-lado: var(--l-19); --cara-canto: var(--l-12); width: 78%; }
.losa--2 { --grosor: 22px; background: var(--l-41); --cara-lado: var(--l-26); --cara-canto: var(--l-19); width: 70%; }
.losa--3 { --grosor: 22px; background: var(--morado); --cara-lado: var(--l-34); --cara-canto: var(--l-26); width: 62%; }
.losa--4 { --grosor: 20px; background: var(--menta); --cara-lado: var(--m-34); --cara-canto: var(--m-26); width: 50%; }
.losa--5 { --grosor: 18px; background: var(--l-72); --cara-lado: var(--l-52); --cara-canto: var(--l-41); width: 36%; }

@media (max-width: 899px) {
  /* el ancho explícito es necesario: sin él los márgenes automáticos
     anulan el estirado de la celda y la escena se queda en cero */
  .objeto { width: min(100%, 400px); margin-inline: auto; }
}

/* — 2. por qué JurisOne ---------------------------------------------------
   Era un campo partido en dos: tinta a la izquierda con el titular y morado
   a la derecha con un párrafo. Al retirarse el párrafo, media sección quedó
   vacía, así que la división se fue con él: un solo campo de tinta. */

.porque { background: var(--tinta); }


@media (max-width: 899px) {
}

/* la ficha que se monta sobre el borde del campo, como en Bankly */
.flota {
  position: relative;
  z-index: 3;
  margin-top: calc(var(--solape) * -1);
  margin-bottom: calc(var(--solape) * -1);
  background: var(--papel);
  color: var(--tinta);
  border-radius: var(--r-flota);
  box-shadow: var(--s-alta);
  padding: clamp(1.8rem, 3.4vw, 3rem);
}

.flota__reja {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: clamp(1.5rem, 2.6vw, 2.4rem);
}
/* filas completas, como la tira de Bankly. Solo queda la de seis: la
   de cinco se fue con su ficha. */
@media (min-width: 1040px) {
  .flota__reja--seis { grid-template-columns: repeat(3, 1fr); }
}

.pieza__nombre {
  font-size: var(--t-ficha);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.012em;
}
.pieza__dice { margin-top: 0.55rem; font-size: var(--t-menor); color: var(--l-34); line-height: 1.55; }

/* — 3. integraciones ------------------------------------------------ */

.eco__reja {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(2.4rem, 6vw, 5.5rem);
  align-items: start;
}

/* donde Bankly pone un render, aquí trabaja el eje de ancho de la Asap */
.sistemas { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35em 0.7em; }
.sistemas__voz {
  font-size: clamp(1.3rem, 2.5vw, 2.15rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--tinta);
}
/* los tres grupos se distinguían por el ancho de la Asap. Plus Jakarta
   no tiene ese eje, así que la distinción pasa al peso y al color. */
.sistemas__voz:nth-child(3n + 1) { font-weight: 700; }
.sistemas__voz:nth-child(3n + 2) { font-weight: 500; color: var(--morado); }
.sistemas__voz:nth-child(3n + 3) { font-weight: 300; color: var(--l-34); }

/* los cinco mecanismos ya no son una lista dentro de la columna: son
   fichas, y por eso bajan a ocupar el ancho entero debajo de la reja.
   En la columna izquierda habrían salido a 110 px cada una. */
.mecanismos { margin-top: clamp(2.6rem, 5vw, 4.2rem); }
.mecanismos__lista {
  display: grid;
  align-items: stretch;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.4vw, 1.3rem);
  margin-top: clamp(1rem, 1.6vw, 1.4rem);
}
@media (min-width: 700px)  { .mecanismos__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .mecanismos__lista { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

@media (max-width: 899px) { .eco__reja { grid-template-columns: 1fr; } }

/* — 4. soluciones: veintitrés en cinco grupos, cinco bandas --------------

   El archivo del cliente trae cinco grupos con título y bajada, de 4, 3, 6,
   5 y 5 soluciones. Antes los veintitrés y los cinco rótulos iban en una
   sola reja plana sobre campo oscuro, y el rótulo era una celda sin ficha
   que tapaba exactamente el hueco que su grupo dejaba. Eso ya no está, y
   por dos razones del cliente: el campo pasa a papel, y los grupos tienen
   que distinguirse entre sí mejor que por un hueco.

   1 · CINCO BANDAS QUE CAMBIAN DE LADO.

   Cada grupo es una banda de dos columnas: el rótulo a un lado, sus
   soluciones al otro. Y el lado SE INVIERTE de una banda a la siguiente
   —primera a la izquierda, segunda a la derecha, y así—. Eso es lo único
   que separa un grupo del siguiente: ni una línea, ni un fondo, ni un
   cambio de luz. Cambia de lado, y por eso se ve que empezó otra cosa.

   El rótulo se pega al borde EXTERIOR de la página y se alinea hacia él:
   a la izquierda, alineado a la izquierda; a la derecha, alineado a la
   derecha. Los cinco rótulos dibujan un zigzag de titulares por los dos
   márgenes y las soluciones se quedan siempre en el centro. El eje dice
   quién es quién sin dibujar nada, igual que antes lo decía el hueco.

   Y sigue sin cuerpo: el rótulo no tiene ficha debajo. Lo que lo
   distingue de una solución es material QUITADO y escala —el nombre del
   grupo va en --t-tier y el de una solución en --t-ficha, casi la mitad—.
   Jerarquía por ausencia y por cuerpo de letra.

   2 · LAS CUENTAS DESIGUALES, AHORA SIN CUENTAS.

   Cuatro, tres, seis, cinco y cinco no se parten en columnas iguales.
   Antes había que cuadrarlo porque las veintitrés compartían reja y una
   fila coja se veía. Ahora cada grupo tiene su propia reja de dos o tres
   columnas y su última fila acaba donde acaba: a tres columnas, el grupo
   de cuatro deja tres y una, y el de cinco tres y dos. Son bloques
   bandeados, como un párrafo de texto, y el bandeo dice la verdad sobre
   cuántas trae cada grupo. Con eso se van las clases --de4/--de3/--de6/
   --de5 y la tabla de huecos: no queda nada que calcular.

   3 · LOS LADOS SOLO EXISTEN SI HAY SITIO.

   Por debajo de 900 px no hay dos columnas que alternar: el rótulo se
   pone encima de su grupo a todo el ancho y va centrado, como todo lo
   demás de la página en esa medida (lo centra el bloque de móvil del
   final de la hoja, que ya lo hacía). Lo que separa un grupo del
   siguiente ahí es el aire: el hueco entre bandas es el doble del que hay
   entre dos fichas de la misma banda.

   4 · EL CONTEO DEL SIGILO.

   Los cuatro mandos del sigilo se reparten por ciclos de 3, 4, 5 y 7 con
   nth-of-type. Antes las veintitrés eran hermanas y el conteo corría de la
   1 a la 23. Ahora cada grupo tiene su propia caja, así que el conteo
   corre DENTRO del grupo: 1 a 4, 1 a 3, 1 a 6, 1 a 5, 1 a 5. Sigue
   valiendo, y por la razón de siempre: 3, 4 y 5 no tienen divisores
   comunes, así que las combinaciones no se repiten hasta la sexagésima
   ficha y dentro de un grupo —seis como mucho— no hay dos iguales. Lo que
   se pierde es que la primera de un grupo tenga el mismo objeto que la
   primera del siguiente, y eso no se ve nunca: están a bandas de
   distancia y en lados contrarios.
   ------------------------------------------------------------------------ */

/* EL CAMPO: PAPEL, Y NADA ESCRITO AQUÍ

   Tenía un degradado vertical de --l-08 a --l-26 porque el campo aclaraba
   conforme se bajaba. El cliente lo quiere claro, así que no hay nada que
   declarar: .seccion ya pinta var(--campo), que sobre papel es el blanco
   de la página. Una regla que repitiera el papel sería una regla que no
   dice nada. Con el campo se fue también el .campo-oscuro del <section>, y
   con él la menta del kicker y la de los cinco puntos: las dos salen de
   var(--acento), que sin campo oscuro vuelve al morado por sí solo.
   7,63:1 el kicker sobre papel; el punto es puntuación y va con su
   titular. */

.soluciones__reja {
  display: grid;

  /* el hueco entre bandas. Es lo único que separa dos grupos cuando no hay
     lados que alternar, así que tiene que ser claramente mayor que el hueco
     de dentro de una banda: 51 px contra 26 en el teléfono. */
  gap: clamp(3.2rem, 7vw, 5.2rem);
  margin-top: clamp(2.4rem, 4vw, 3.4rem);

  /* las dos curvas de la reacción al ratón. No salen de tokens.css a
     propósito: --ease-out es el perfil de la página entera y aquí hace
     falta uno con menos tirón al arrancar. Son de esta reja y se quedan
     en esta reja. */
  --alza: cubic-bezier(0.32, 0.78, 0.28, 1);   /* la ficha se levanta */
  --posa: cubic-bezier(0.40, 0.55, 0.25, 1);   /* y se vuelve a posar */
}

/* LA BANDA. Apilada mientras no quepan dos columnas. */
.grupo {
  display: grid;
  gap: clamp(1.2rem, 2.6vw, 1.8rem);
}

/* la reja de dentro de cada grupo: una, dos o tres columnas. Contadas y no
   `auto-fit`: con cuatro, cinco y seis, `auto-fit` parte los grupos de
   maneras distintas en el mismo ancho y los cinco bloques dejan de
   parecerse entre sí. */
.grupo__fichas {
  display: grid;
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.6rem, 2.6vw, 2.6rem) clamp(1rem, 1.8vw, 1.6rem);
}
@media (min-width: 700px)  { .grupo__fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .grupo__fichas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* LA FICHA SUELTA DE LA ÚLTIMA FILA

   Cuatro, tres, seis, cinco y cinco no caben en filas iguales, y ahora que
   el rótulo se fue al lado ya no hay nada que tape el hueco. La mayoría de
   las veces la última fila queda con dos, y dos fichas juntas se leen como
   un bloque. Cuando queda UNA SOLA, no: queda un cabo suelto pegado a un
   lado.

   Se resuelve como esta hoja ya lo resuelve para los cinco mecanismos de
   integración —misma regla, dos líneas más abajo en la misma hoja—: la
   suelta se pone en el centro CON EL ANCHO DE SUS HERMANAS, no estirada a
   lo ancho. Es la misma ficha, no otra. A tres columnas cae justo sobre la
   del medio, así que ni siquiera se sale de la reja.

   Solo de 700 px para arriba: a una columna todas son la última de su fila
   y no hay nada que centrar. */
@media (min-width: 700px) and (max-width: 1099px) {
  .grupo__fichas > .solucion:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - clamp(1rem, 1.8vw, 1.6rem) / 2);
    justify-self: center;
  }
}
@media (min-width: 1100px) {
  .grupo__fichas > .solucion:last-child:nth-child(3n + 1) {
    grid-column: 1 / -1;
    width: calc((100% - clamp(1rem, 1.8vw, 1.6rem) * 2) / 3);
    justify-self: center;
  }
}

/* — LOS LADOS, Y CÓMO SE INVIERTEN —

   900 px y no 700: a dos columnas de ficha el rótulo se quedaría con
   doscientos y pico píxeles para un titular de --t-tier, y «Experiencia y
   relacionamiento con el cliente» saldría en seis líneas de dos palabras.

   Centrado vertical contra su bloque de fichas, no pegado arriba: cuando
   el grupo trae seis fichas en dos filas, arriba el rótulo se quedaba
   flotando con media banda de nada debajo.

   El rótulo pesa 1 y las fichas 1,9: a 1024 px eso da 268 px de rótulo y
   dos fichas de 259, que es la medida que las fichas han tenido siempre. */
@media (min-width: 900px) {
  .grupo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
    gap: clamp(1.8rem, 3.6vw, 3.4rem);
    align-items: center;
  }
  .grupo__rotulo { grid-column: 1; }
  .grupo__fichas { grid-column: 2; }

  /* la banda par cambia de lado: el rótulo se va a la derecha y se alinea
     hacia el borde exterior, y las fichas pasan a la izquierda */
  .grupo:nth-of-type(even) { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
  .grupo:nth-of-type(even) .grupo__rotulo { grid-column: 2; text-align: right; }
  .grupo:nth-of-type(even) .grupo__fichas { grid-column: 1; }
}

/* con tres columnas de ficha el rótulo pide algo más de reparto: 1 contra
   2,15 da 359 px de rótulo a 1440 —tres líneas de titular— y fichas de 240 */
@media (min-width: 1100px) {
  .grupo { grid-template-columns: minmax(0, 1fr) minmax(0, 2.15fr); }
  .grupo:nth-of-type(even) { grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr); }
}

/* La ficha sigue en dos capas, y sigue habiendo razón. `.solucion` es
   la celda: ocupa su sitio en la reja. `.solucion__cara` es lo que se
   ve y lo que reacciona al ratón. Si la reacción creciera la celda,
   movería la reja entera —las fichas del grupo recolocándose porque el
   cursor rozó una—. Reaccionando por dentro, la reja no se entera. */
.solucion { display: flex; }

/* EL PAPEL DE LA FICHA SOBRE PAPEL

   Era --l-41 —una masa de morado— porque debajo había campo oscuro. Sobre
   papel, veintitrés masas de morado serían la mancha más grande de la
   página y le robarían el sitio a las dos que ya hay: el campo de tinta de
   «Por qué JurisOne» y el morado del roadmap. Así que la ficha pasa a
   clara, y no a una clara nueva: a la que esta página ya tiene resuelta
   —--l-94 sobre papel, la de integraciones—. Hay UNA ficha en esta página
   y sigue habiendo una. */
.solucion__cara {
  flex: 1 1 auto;
  width: 100%;
  background: var(--l-94);
  border-radius: var(--r-ficha);
  padding: clamp(1.8rem, 2.6vw, 2.4rem) clamp(1.2rem, 1.8vw, 1.6rem) clamp(2rem, 2.8vw, 2.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  /* la ficha adelantada tiene que pasar por encima de sus vecinas, y
     `position` es lo que le da derecho a tener altura de apilado. Va
     aquí y no en `.solucion` porque `.solucion` es además `.rev`, y
     escribirle una transición propia le pisaría la de la aparición. */
  position: relative;
}

.solucion__texto { width: 100%; }

/* tinta sobre --l-94: 15,3:1 */
.solucion__nombre {
  margin-top: clamp(1rem, 1.7vw, 1.4rem);
  font-size: var(--t-ficha);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.012em;
  color: var(--tinta);
  text-wrap: balance;
}

/* --l-34 sobre --l-94 da 10,1:1. Era --l-94 sobre --l-41 y daba 8,2: el
   detalle gana contraste al pasar a papel. Se ve siempre, en las
   veintitrés: el cliente ya lo pidió así cuando esto era un carril. */
.solucion__detalle {
  margin-top: .7rem;
  font-size: var(--t-menor);
  line-height: 1.58;
  color: var(--l-34);
  text-wrap: pretty;
}

/* — EL RÓTULO DE GRUPO —

   Ni fondo, ni borde, ni nada que lo encuadre: es el único sitio de la
   banda donde el campo se ve sin ficha delante, y eso ya basta para que
   no se confunda con una solución. La medida no la pone un max-width: la
   pone su columna, que es lo que una columna sirve para hacer. */

/* a escala de titular, con el punto de la página al final. Sin color
   propio: hereda la tinta del campo como los demás titulares, y el punto
   sale de var(--acento) —morado, porque el campo ya es claro—. */
.grupo__nombre {
  font-size: var(--t-tier);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

/* --l-34 sobre papel: 12,4:1 */
.grupo__bajada {
  margin-top: clamp(.55rem, .9vw, .85rem);
  font-size: var(--t-cuerpo);
  line-height: 1.5;
  color: var(--texto-suave);
  text-wrap: pretty;
}

/* ============================================================
   EL SIGILO — la pieza de arriba

   No es un icono. Es el objeto de la portada en pequeño: tres losas
   apiladas en la misma proyección isométrica, con sus dos caras
   laterales, hechas del mismo morado moviendo la luz. Ni un pictograma
   de librería, ni un cuadrito de color con algo dentro.

   Y no son veintitrés dibujos: es un sistema de cuatro mandos —cuánto
   se abre la pila, cuánto gira cada losa, cuánto se desliza en el
   plano, y cuál de las tres lleva la menta— que se reparten por ciclos
   de 3, 4, 5 y 7. Como no tienen divisores comunes, la combinación no
   se repite hasta la ficha cuatrocientos veinte: las veintitrés son
   distintas entre sí y de la misma familia. La vigesimocuarta que
   llegue mañana coge la suya sola, sin tocar nada.
   ============================================================ */

.sigilo {
  --lado: clamp(100px, 9.8vw, 134px);
  --abre: 15px;      /* lo que sube cada losa sobre la anterior */
  --giro: 0deg;      /* lo que gira cada losa sobre la anterior */
  --desliz: 0px;     /* lo que se corre cada losa en el plano */

  display: block;
  position: relative;
  width: var(--lado);
  height: calc(var(--lado) * 0.78);
  transform-style: preserve-3d;
  transform: rotateX(58deg) rotateZ(-42deg);
}

.sigilo__losa {
  position: absolute;
  inset: 0;
  margin: auto;
  aspect-ratio: 1;
  border-radius: 4px;
  transform-style: preserve-3d;
  background: var(--cara);
}

/* las dos caras laterales que se ven en esta proyección, igual que en
   el objeto de la portada */
.sigilo__losa::before,
.sigilo__losa::after {
  content: "";
  position: absolute;
}
.sigilo__losa::before {
  top: 100%; left: 0;
  width: 100%; height: var(--grosor);
  transform-origin: top;
  transform: rotateX(-90deg);
  background: var(--lado-cara);
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}
.sigilo__losa::after {
  top: 0; left: 100%;
  width: var(--grosor); height: 100%;
  transform-origin: left;
  transform: rotateY(90deg);
  background: var(--canto);
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}

/* la pila: de abajo arriba, más pequeña y más clara */
.sigilo__losa:nth-child(1) {
  width: 84%; --grosor: 11px;
  --cara: var(--l-26); --lado-cara: var(--l-19); --canto: var(--l-12);
}
.sigilo__losa:nth-child(2) {
  width: 62%; --grosor: 10px;
  --cara: var(--l-62); --lado-cara: var(--l-41); --canto: var(--l-34);
  transform: translate3d(calc(var(--desliz) * var(--mando, 1)),
                         calc(var(--desliz) * var(--mando, 1)),
                         calc(var(--abre) + var(--abrir)))
             rotateZ(calc((var(--giro) + var(--girar)) * var(--mando, 1)));
}
.sigilo__losa:nth-child(3) {
  width: 40%; --grosor: 9px;
  --cara: var(--l-86); --lado-cara: var(--l-62); --canto: var(--l-52);
  transform: translate3d(calc(var(--desliz) * 2 * var(--mando, 1)),
                         calc(var(--desliz) * 2 * var(--mando, 1)),
                         calc((var(--abre) + var(--abrir)) * 2))
             rotateZ(calc((var(--giro) * 2 + var(--girar) * 2) * var(--mando, 1)));
}

/* --mando: cuánto de lo que dicen el giro y el deslizamiento se aplica
   de verdad. Sin declarar vale 1, así que la ficha de soluciones sale
   exactamente igual: `calc(x * 1)` es `x`. Solo la ficha quieta lo baja,
   y arriba está la razón. La apertura de la pila no se toca: esa no
   saca nada fuera de su sitio, y es la que más se nota. */

/* Los tres primeros mandos los comparten la ficha de soluciones y la
   ficha quieta de las otras tres secciones: es el mismo objeto y el
   mismo sistema de variación. `:is()` toma la especificidad de su
   argumento más alto —aquí, una clase— así que estas reglas pesan
   exactamente lo mismo que cuando decían solo `.solucion`.

   SE CUENTA CON nth-of-type Y NO CON nth-child. Da lo mismo en las otras
   tres secciones —ahí la ficha es el único tipo de hijo—, pero en
   soluciones las fichas son <article> y así quedan contadas solas aunque
   mañana les entre un hermano de otro tipo en la caja.

   EL CONTEO CORRE DENTRO DE CADA GRUPO. Con las cinco bandas, los
   veintitrés dejaron de ser hermanos: cada grupo tiene su propia caja de
   fichas, así que los ciclos van de 1 a 4, de 1 a 3, de 1 a 6, de 1 a 5 y
   de 1 a 5. Sigue valiendo: 3, 4 y 5 no tienen divisores comunes, la
   combinación no se repite hasta la sexagésima ficha y el grupo más grande
   trae seis, así que dentro de un grupo no hay dos objetos iguales. Lo
   único que se pierde es que la primera ficha de un grupo repita el objeto
   de la primera del siguiente, y eso no se ve nunca: están a una banda de
   distancia y en lados contrarios de la página.

   SE FUE EL CUARTO MANDO —cuál de las tres losas lleva la menta—. Existía
   porque debajo había campo oscuro y la menta podía caer en cualquiera de
   las tres. Sobre papel no: la menta solo puede ir en la losa de en medio,
   que es la única que la de abajo enmarca por entero, y en la de abajo o
   la de arriba tocaría el papel —1,46:1, invisible, y una arista de menta
   sobre blanco no es un acento, es un error—. Así que la menta se ancla a
   la de en medio en las veintitrés, igual que en las otras tres secciones,
   y la variación se reparte entre los tres mandos que quedan. */

/* 1 · cuánto se abre la pila — ciclo de tres */
:is(.solucion, .ficha):nth-of-type(3n+2) .sigilo { --abre: 9px; }
:is(.solucion, .ficha):nth-of-type(3n+3) .sigilo { --abre: 22px; }

/* 2 · cuánto gira cada losa — ciclo de cuatro */
:is(.solucion, .ficha):nth-of-type(4n+2) .sigilo { --giro: 11deg; }
:is(.solucion, .ficha):nth-of-type(4n+3) .sigilo { --giro: -17deg; }
:is(.solucion, .ficha):nth-of-type(4n+4) .sigilo { --giro: 25deg; }

/* 3 · cuánto se desliza en el plano — ciclo de cinco */
:is(.solucion, .ficha):nth-of-type(5n+2) .sigilo { --desliz: 5px; }
:is(.solucion, .ficha):nth-of-type(5n+3) .sigilo { --desliz: -7px; }
:is(.solucion, .ficha):nth-of-type(5n+4) .sigilo { --desliz: 11px; }
:is(.solucion, .ficha):nth-of-type(5n+5) .sigilo { --desliz: -12px; }

/* ============================================================
   5 · LA FICHA QUIETA — industrias, beneficios e integraciones

   Es la misma ficha de soluciones en otro campo: el mismo sigilo, el
   mismo cuerpo, el mismo orden —objeto, nombre, detalle— pero sin
   fila que se mueva. Comparte con ella los tres primeros mandos del
   sigilo (arriba, con `:is()`), así que no hay dos objetos: hay uno.

   LO QUE CAMBIA DE UNA SECCIÓN A OTRA es a qué altura de la escalera
   de luz del morado está posada la pila, y sobre qué papel. Las tres
   suben un peldaño respecto de la anterior según se baja por la
   página: la losa grande va de --l-19 a --l-34 y a --l-52, y el papel
   de la ficha va de --l-94 a --l-97 y al blanco. El objeto sube
   mientras el campo se aclara, y cada pila queda siempre unos veinte
   peldaños por debajo de su propio papel: siempre se lee.

   Y DESDE QUE SOLUCIONES PASÓ A PAPEL, ESTA ES TAMBIÉN SU PILA. Las
   veintitrés comparten el peldaño de integraciones —--l-19 abajo, --l-72
   arriba, sobre ficha de --l-94— porque es el caso ya resuelto de «ficha
   sobre campo claro» y no hacía falta inventar otro. Lo que distingue
   soluciones de integraciones no es el peldaño: es que aquí la ficha se
   adelanta al apuntarla y allí no.

   La menta queda anclada a la losa de en medio en las cuatro secciones
   —la única que la losa de abajo enmarca por entero—. Ni una arista de
   menta toca el papel en ningún sitio de la página.
   ============================================================ */

.ficha { display: flex; position: relative; }

.ficha__cara {
  flex: 1 1 auto;
  width: 100%;
  background: var(--ficha-campo, var(--l-97));
  border-radius: var(--r-ficha);
  padding: clamp(1.8rem, 2.6vw, 2.4rem) clamp(1.2rem, 1.8vw, 1.6rem) clamp(2rem, 2.8vw, 2.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ficha__nombre {
  margin-top: clamp(1rem, 1.7vw, 1.4rem);
  font-size: var(--t-ficha);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.012em;
  color: var(--tinta);
  text-wrap: balance;
}

.ficha__dice {
  margin-top: .7rem;
  font-size: var(--t-menor);
  line-height: 1.58;
  color: var(--l-34);
  text-wrap: pretty;
}

/* — los tres peldaños — */

.ficha--baja  { --ficha-campo: var(--l-94); }
.ficha--media { --ficha-campo: var(--l-97); }
.ficha--alta  { --ficha-campo: var(--papel); }

/* la de más arriba en la escalera es también la única que se despega
   del campo: sobre --l-97 el papel blanco necesita el peso de la
   sombra para que se lea como ficha y no como un hueco */
.ficha--alta .ficha__cara { box-shadow: var(--s-baja); }

/* EL MANDO DE LA FICHA QUIETA — por qué el sigilo aquí se mueve menos

   El sigilo gira y se desliza sobre su propio eje. Con el giro y el
   deslizamiento a tope, la losa de en medio se sale de la de abajo:
   en soluciones da igual, porque lo que hay detrás es morado. Aquí
   detrás hay papel, y la de en medio es la de menta — que tiene que
   ir sobre morado siempre, no «casi siempre».

   A 0,35 la losa de menta cabe entera dentro de la de abajo en todas
   las medidas de la ficha, también con la pila abierta al apuntarla.
   Lo comprobado: media losa girada mide (cos+sen)/2 de su lado, y a
   0,35 eso más lo que se desliza sigue por debajo del medio lado de
   la de abajo desde 73 px de sigilo; el más pequeño que hay mide 100.

   Lo que se pierde en giro se gana en otra parte: la apertura de la
   pila va entera, y es la que de verdad distingue una ficha de otra.

   VALE IGUAL PARA SOLUCIONES AHORA QUE ES CLARA, y por la misma cuenta:
   su sigilo mide de 100 a 134 px, el mismo intervalo, y la pila se le
   abre 9 px más al apuntarla contra los 7 de la ficha quieta —2 px de
   apertura no sacan nada de su sitio; la apertura no se multiplica por
   el mando porque no mueve ninguna losa fuera de la de abajo. */
:is(.ficha, .solucion) .sigilo { --mando: 0.35; }

:is(.ficha--baja, .solucion) .sigilo__losa:nth-child(1) { --cara: var(--l-19); --lado-cara: var(--l-12); --canto: var(--l-08); }
:is(.ficha--baja, .solucion) .sigilo__losa:nth-child(3) { --cara: var(--l-72); --lado-cara: var(--l-62); --canto: var(--l-52); }

.ficha--media .sigilo__losa:nth-child(1) { --cara: var(--l-34); --lado-cara: var(--l-26); --canto: var(--l-19); }
.ficha--media .sigilo__losa:nth-child(3) { --cara: var(--l-80); --lado-cara: var(--l-72); --canto: var(--l-62); }

.ficha--alta .sigilo__losa:nth-child(1) { --cara: var(--l-52); --lado-cara: var(--l-41); --canto: var(--l-34); }
.ficha--alta .sigilo__losa:nth-child(3) { --cara: var(--l-86); --lado-cara: var(--l-80); --canto: var(--l-72); }

/* la menta, anclada a la de en medio en las cuatro secciones claras */
:is(.ficha, .solucion) .sigilo__losa:nth-child(2) { --cara: var(--menta); --lado-cara: var(--m-34); --canto: var(--m-26); }

/* — la ficha sin detalle ------------------------------------------------

   Los cinco mecanismos de integración no traen detalle, y no se les
   inventa uno. Lo que cambia no es el texto: es la proporción. La
   ficha con detalle es un retrato —objeto arriba, dos párrafos
   debajo—; sin detalle se vuelve casi cuadrada, el objeto crece hasta
   ocupar dos tercios del ancho y el nombre pasa a ser su pie. El
   objeto deja de ilustrar la ficha y pasa a ser la ficha. No queda
   hueco porque no hay sitio reservado para nada que falte: el relleno
   de arriba y el de abajo son el mismo, y el bloque va centrado.
   -------------------------------------------------------------------- */
.ficha--desnuda .ficha__cara {
  justify-content: center;
  padding: clamp(1.5rem, 2.2vw, 2rem) clamp(1rem, 1.4vw, 1.3rem);
}
.ficha--desnuda .sigilo { --lado: clamp(100px, 8.8vw, 124px); }
.ficha--desnuda .ficha__nombre {
  margin-top: clamp(.75rem, 1.2vw, 1rem);
  font-size: var(--t-cuerpo);
}

/* — la reacción al ratón ------------------------------------------------

   La misma de soluciones y por la misma razón: lo que hay que enseñar
   es el objeto, así que la pila se abre y gira un poco y la ficha se
   adelanta. `scale` y `translate` van aparte de `transform`, que es
   de quien se ocupa la aparición al desplazar: nunca se pisan.

   La salida (150 ms) va más rápida que la entrada (240 ms): entrar es
   una invitación, salir es el sistema respondiendo. Y todo detrás de
   `hover: hover`, para que un dedo no la deje encendida.
   -------------------------------------------------------------------- */
.con-js .ficha__cara {
  transition: scale 150ms var(--ease-out), translate 150ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .ficha:hover { z-index: 2; }
  .con-js .ficha:hover .ficha__cara {
    scale: 1.02;
    translate: 0 -5px;
    transition-duration: 240ms;
  }
  .con-js .ficha:hover .sigilo { --abrir: 7px; --girar: 6deg; }
}

@media (prefers-reduced-motion: reduce) {
  .con-js .ficha__cara { transition: none; }
  .con-js .ficha:hover .ficha__cara { scale: 1; translate: none; }
  .con-js .ficha:hover .sigilo { --abrir: 0px; --girar: 0deg; }
}

/* — las tres rejas ------------------------------------------------------

   Cada sección reparte sus fichas según lo que carga cada una, y no
   según una reja única. Cinco mecanismos que son solo un nombre caben
   apretados a cinco por fila; cuatro industrias con su logro piden un
   ancho de lectura, y salen justas a cuatro; seis beneficios de una
   línea van de tres en tres, que es lo único que parte seis en filas
   iguales. Columnas contadas y no `auto-fit`: con cinco y con seis,
   `auto-fit` deja la última fila coja.
   -------------------------------------------------------------------- */
.industrias__reja {
  display: grid;
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 1.8vw, 1.6rem);
  margin-top: clamp(2.4rem, 4vw, 3.4rem);
}
@media (min-width: 700px)  { .industrias__reja { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .industrias__reja { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* — 6. beneficios -------------------------------------------------------- */

.beneficios { background: var(--l-97); }
/* el titular estuvo oculto un tiempo —repetía al kicker— y la reja se
   quedó sin aire bajo él. Al volver a verse hay que separarlo de las
   fichas, como en las demás secciones. */
.beneficios__reja { display: grid; grid-template-columns: minmax(0, 1fr); }
.beneficios__reja > .titular-sec { margin-bottom: clamp(2rem, 3.4vw, 3.2rem); }
.beneficios__lista {
  display: grid;
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 1.8vw, 1.6rem);
}
@media (min-width: 700px)  { .beneficios__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .beneficios__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* — 7. roadmap: escalera, porque es una secuencia de verdad --------------- */

.adopcion { background: var(--morado); color: var(--papel); --acento: var(--menta); --foco: var(--menta); }
.adopcion .titular-sec { color: var(--papel); }
.adopcion__escalera { margin-top: clamp(2.4rem, 4vw, 3.6rem); display: grid; gap: clamp(1.4rem, 2.4vw, 2.2rem); }

.paso {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.2rem, 2.4vw, 2.2rem);
  align-items: baseline;
  max-width: 58ch;
}
.paso:nth-child(2) { margin-left: clamp(0px, 3vw, 46px); }
.paso:nth-child(3) { margin-left: clamp(0px, 6vw, 92px); }
.paso:nth-child(4) { margin-left: clamp(0px, 9vw, 138px); }
.paso:nth-child(5) { margin-left: clamp(0px, 12vw, 184px); }
.paso:nth-child(6) { margin-left: clamp(0px, 15vw, 230px); }

.paso__cifra {
  font-size: var(--t-cifra);
  font-weight: 800;
  line-height: 0.9;
  color: var(--menta);
  font-variant-numeric: tabular-nums;
}
.paso__nombre {
  font-size: var(--t-sub);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.paso__dice { margin-top: 0.5rem; font-size: var(--t-menor); line-height: 1.55; color: var(--l-94); }

/* — 8. cierre ------------------------------------------------------------ */

.cierre__reja {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: end;
}
.cierre__lista { display: grid; gap: clamp(0.7rem, 1.2vw, 1.1rem); }
.cierre__voz {
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.2;
  color: var(--l-34);
}
.cierre__voz:first-child { color: var(--morado); }
@media (max-width: 899px) { .cierre__reja { grid-template-columns: 1fr; } }

/* — pie ------------------------------------------------------------------ */

/* ============================================================
   EL PIE
   Cuatro columnas: la marca con su bajada, y tres de enlaces.
   Debajo, una cola con el aviso y lo legal sobre la tinta.
   Sin una sola línea divisoria: lo que separa es el aire y el
   cambio de campo entre el morado y la tinta.
   ============================================================ */
.pie { --foco: var(--menta); background: var(--morado); color: var(--papel); }

.pie__cuerpo {
  padding-block: clamp(56px, 7vw, 96px) clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2.2rem, 4vw, 4rem) clamp(1.6rem, 3vw, 3.2rem);
  align-items: start;
}

.pie__logo { width: clamp(140px, 14vw, 186px); filter: brightness(0) invert(1); }
.pie__bajada {
  margin-top: clamp(1.1rem, 1.8vw, 1.6rem);
  max-width: 34ch;
  font-size: var(--t-menor);
  line-height: 1.6;
  color: var(--l-86);
}
.pie__lugar { margin-top: 1rem; font-size: var(--t-menor); color: var(--l-72); }

.pie__titulo {
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--menta);
  margin-bottom: .4rem;
}
.pie__lista { display: grid; }
.pie__enlace {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-size: var(--t-menor);
  font-weight: 600;
  color: var(--l-94);
  transition: color 180ms ease;
}
@media (hover: hover) and (pointer: fine) { .pie__enlace:hover { color: var(--menta); } }

.pie__cola {
  padding-block: clamp(22px, 2.6vw, 32px);
  margin-top: clamp(16px, 2vw, 24px);
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .6rem clamp(1rem, 2.4vw, 2rem);
}
/* --l-86 y no --l-72: la cola ya no va sobre tinta sino sobre el
   morado del pie, y ahí el 72 se queda en 2,51:1 */
.pie__nota { font-size: var(--t-menor); color: var(--l-86); }
/* la franja del copyright, del mismo morado que el resto del pie */
.pie__cola-campo { background: transparent; }
.pie__legal { display: flex; flex-wrap: wrap; gap: 0 clamp(1rem, 2.4vw, 2rem); }
.pie__cola .pie__enlace { color: var(--l-86); }

@media (max-width: 900px){
  .pie__cuerpo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie__marca { grid-column: 1 / -1; }
}
@media (max-width: 540px){
  .pie__cuerpo { grid-template-columns: minmax(0, 1fr); }
}


/* — apariciones al desplazar --------------------------------------------- */

.con-js .rev {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
}
.con-js .rev.se-ve { opacity: 1; transform: none; }

.escalonar > .rev:nth-child(2) { transition-delay: 60ms; }
.escalonar > .rev:nth-child(3) { transition-delay: 120ms; }
.escalonar > .rev:nth-child(4) { transition-delay: 180ms; }
.escalonar > .rev:nth-child(5) { transition-delay: 240ms; }
.escalonar > .rev:nth-child(6) { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  .con-js .rev { opacity: 1; transform: none; transition: none; }
  .escalonar > .rev { transition-delay: 0ms; }
  .losa { transition: none; }
}

/* ============================================================
   EL KICKER
   Dice de qué se está hablando antes del titular. Va pequeño,
   estrecho y en versalita: no compite con el titular, lo sitúa.
   ============================================================ */
/* el kicker abre la sección: va solo, centrado y a todo el ancho,
   antes de que empiece la rejilla de cada bloque. */
.kicker{
  font-weight: 600;
  font-size: clamp(.72rem, .82vw, .84rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--morado);
  text-align: center;
  padding-inline: var(--marg);
  margin-bottom: clamp(2rem, 3.4vw, 3.2rem);
}
/* al salir de la banda oscura, este kicker queda sobre el papel: la
   menta ahí no se lee (1,46:1), así que vuelve al morado como los demás */
/* sobre campo oscuro o morado, el kicker va en menta:
   es el único sitio donde el acento tiene morado debajo */
.campo-oscuro .kicker,
.kicker--claro{ color: var(--menta); }


/* el roadmap va sobre campo morado: ahí el kicker morado no se lee */
.adopcion > .kicker{ color: var(--menta); }

/* ============================================================
   2 · JURISONE — qué es
   Titular a la izquierda y la definición a la derecha, a cuerpo
   de lectura. El texto es provisional: va a cambiar.
   ============================================================ */
.quees__reja{
  display: grid;
  justify-items: center;
  gap: clamp(2rem, 4vw, 3.4rem);
  text-align: center;
}
.quees__logo{ width: clamp(200px, 26vw, 380px); display: block; }
.quees__texto{
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.62;
  color: var(--texto-suave, var(--l-34));
  max-width: 62ch;
  text-align: justify;
  text-wrap: pretty;
  hyphens: auto;
}

/* ============================================================
   CADA SECCIÓN, UNA PANTALLA
   min-height y no height: las que traen mucho contenido —las tres
   bandas de soluciones— crecen lo que necesiten en vez de recortarse.
   El contenido se centra vertical dentro de la pantalla.
   100svh, no 100vh, para que en móvil la barra del navegador no
   empuje la sección fuera de cuadro.
   ============================================================ */
/* la altura se pide, no se impone: min-height y nunca height, y sin
   tocar el display que cada bloque ya tenía. Forzarles flex los rompe. */
.seccion{
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* la ficha que vuela sobre el borde necesita su sitio arriba */
.seccion--tras-flota{ justify-content: flex-start; }

/* en pantallas muy bajas o apaisadas, que mande el contenido */
@media (max-height: 640px){
  .seccion{ min-height: 0; }
}

/* ============================================================
   LA FICHA QUE SE ADELANTA

   Al apuntarla, la ficha se adelanta un poco y la pila de losas se
   abre: las tres se separan y giran, y se ve que son tres piezas con
   canto, no un dibujo plano. Esa es la reacción, y es la única: el
   sigilo ya es lo característico de la sección, así que la respuesta
   al ratón lo enseña en vez de inventar otra cosa.

   Y ES LA ÚNICA TAMBIÉN EN EL OTRO SENTIDO: LAS DEMÁS NO SE ENTERAN.
   En el carril, apuntar una retiraba a las otras a 0,42 de luz. Tenía
   sentido con cuatro fichas a la vista y una fila que se recorría de
   punta a punta. En una reja de veintitrés, apagar veintidós para
   encender una no es un realce, es un apagón —y lo peor, un apagón que
   se enciende y se apaga entero cada vez que el cursor cruza un hueco
   de la reja. La ficha apuntada ya se adelanta, se agranda y abre su
   pila: el realce está completo sin tocarle la luz a nadie. Con la
   atenuación se van también el retardo de 110 ms de la opacidad y el
   encogido de las vecinas, que existían solo para suavizarla.

   La reacción conserva sus tiempos: 380 ms al entrar con --alza,
   260 al salir con --posa, y la pila 40 ms por detrás —440 al entrar,
   300 al salir—. Se lee primero que la ficha se levanta y luego que se
   abre, que es el orden en que pasaría de verdad. La salida es dos
   tercios de la entrada: entrar es una invitación, salir es el sistema
   respondiendo.

   `scale` y `translate` van aparte de `transform`, que es de quien se
   ocupa la aparición al desplazar: nunca se pisan.
   ============================================================ */

/* las dos manos del sigilo: lo que la reacción suma a lo que ya trae
   cada pila. Van declaradas para que el navegador las sepa interpolar
   —una variable corriente no se anima— y heredan, porque quien las usa
   son las losas de dentro. */
@property --abrir { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --girar { syntax: "<angle>";  inherits: true; initial-value: 0deg; }

/* — el reposo, que es también la salida —

   La altura de apilado es explícita y baja tarde, no en el mismo
   cuadro: al dejar de apuntar, la ficha caía al fondo mientras seguía
   agrandada y la vecina de al lado —que se pinta después— le mordía el
   borde durante toda la bajada. */
.con-js .soluciones__reja .solucion__cara {
  z-index: 0;
  box-shadow: 0 0 0 0 rgb(17 9 52 / 0);
  transition:
    scale      260ms var(--posa),
    translate  260ms var(--posa),
    box-shadow 260ms var(--posa),
    z-index    0s linear 260ms;
}

/* la pila fuera de esta reja —las fichas quietas de las otras tres
   secciones— conserva su tiempo corto: ahí la reacción es otra cosa. */
.con-js .sigilo {
  transition: --abrir 170ms var(--ease-out), --girar 170ms var(--ease-out);
}
.con-js .soluciones__reja .sigilo {
  transition: --abrir 300ms var(--posa), --girar 300ms var(--posa);
}

/* — la entrada —

   La curva no es la del sistema. --ease-out vale (0.23, 1, 0.32, 1),
   que es casi exponencial: recorre medio camino en la primera décima y
   el resto arrastrando. A 380 ms eso se lee como un salto con cola.
   --alza sale con decisión pero reparte: la ficha se levanta. --posa
   devuelve algo más plano, para que aterrice en vez de caerse. Ninguna
   de las dos es ease-in.

   Todo detrás de `hover: hover`, para que un dedo no deje una ficha
   encendida al pasar por encima. */
@media (hover: hover) and (pointer: fine) {
  .con-js .soluciones__reja .solucion:hover .solucion__cara {
    z-index: 2;
    scale: 1.035;
    translate: 0 -7px;

    /* LO QUE AÑADIÓ EL PAPEL. Sobre campo oscuro, una ficha de morado que
       crece un 3,5 % y sube 7 px se leía como que se adelanta: el campo
       detrás era más oscuro que ella. Sobre papel no —la ficha es --l-94 y
       el campo es blanco—, así que crecer sin sombra se lee como que se
       infla, y al solaparse 8 px con la vecina parece un choque y no una
       capa. La sombra es --s-techo, que es justo un levantamiento de diez
       píxeles: la misma distancia que dice el translate. Mismos tiempos,
       misma curva: la reacción no cambia de gramática, solo se vuelve
       legible sobre blanco. */
    box-shadow: var(--s-techo);

    transition: scale 380ms var(--alza), translate 380ms var(--alza),
                box-shadow 380ms var(--alza), z-index 0s;
  }
  .con-js .soluciones__reja .solucion:hover .sigilo {
    --abrir: 9px;
    --girar: 7deg;
    transition: --abrir 440ms var(--alza) 40ms, --girar 440ms var(--alza) 40ms;
  }
}

/* movimiento reducido: nada se mueve. Queda el cambio de luz, que es
   color y no movimiento, y dice lo mismo.

   ANTES LA FICHA SE PONÍA --l-52 AL APUNTARLA, porque el campo era oscuro
   y oscurecerla no habría dicho nada. Sobre papel, una ficha que se vuelve
   morada de golpe es un fogonazo y además rompe la regla de una sola masa:
   el morado aparecería y desaparecería al pasar el cursor. Aquí la ficha va
   al revés y sube a papel —de --l-94 al blanco—, con la sombra que la
   despega del campo. Es lo mismo que hace la ficha más alta de la escalera
   en beneficios, y los contrastes solo mejoran: la tinta sobre blanco da
   18,9:1 y el detalle 12,4:1. */
@media (prefers-reduced-motion: reduce) {
  .con-js .soluciones__reja .solucion__cara {
    transition: background-color 220ms ease, box-shadow 220ms ease;
  }
  .con-js .soluciones__reja .sigilo { transition: none; }
  .con-js .soluciones__reja .solucion:hover .solucion__cara {
    scale: 1;
    translate: none;
    background: var(--papel);
    box-shadow: var(--s-baja);
    transition: background-color 220ms ease, box-shadow 220ms ease;
  }
  .con-js .soluciones__reja .solucion:hover .sigilo {
    --abrir: 0px;
    --girar: 0deg;
    transition: none;
  }
  .soluciones__reja .rev { transition-delay: 0ms; }
}

/* LA APARICIÓN — el rótulo delante, su grupo detrás

   Una regla y nada más: el rótulo entra sin retardo y las soluciones de su
   grupo sesenta milisegundos detrás. Se lee primero de qué va el grupo y
   luego lo que trae, que es el orden en que se lee de verdad. Vale para
   las tres rejas y para los dos lados sin tocar nada.

   Con las bandas la regla dejó de poder ser de hijo directo —las fichas
   viven ahora dentro de .grupo__fichas—, así que baja por descendencia.
   Dice lo mismo. */
.soluciones .solucion { transition-delay: 60ms; }

/* la del logotipo respira menos que las demás: es un rótulo, no una
   sección de contenido, y a pantalla entera quedaba hueca. Con las
   dos clases para ganar a la altura general, que se declara después. */
.seccion.quees{ min-height: 68svh; }

/* ============================================================
   DOS ARREGLOS DE PÁGINA
   ============================================================ */

/* 1 · el objeto de la portada tiene volumen y se sale del ancho:
   la sección lo recorta en horizontal sin cortar su sombra abajo */
.portada{ overflow-x: clip; }

/* 2 · las anclas del menú caían debajo de la cabecera fija y el
   titular quedaba medio tapado */
:where(section[id], div[id]){ scroll-margin-top: clamp(86px, 9vh, 104px); }

/* la portada descuenta la cabecera. Va aquí, al final y con las dos clases,
   porque la altura general de .seccion se declara después de su bloque y le
   ganaba: sin esto la portada medía una pantalla ENTERA más la cabecera, el
   contenido caía por debajo del centro y arriba sobraba aire. */
.seccion.portada{ min-height: calc(100svh - 62px - clamp(10px, 1.2vw, 16px) * 2); }


/* ###########################################################################
   #                                                                         #
   #   M Ó V I L                                                             #
   #                                                                         #
   #   Todo lo que sigue vive dentro de una consulta de ancho. Por encima    #
   #   de 1200 px no aplica ni una sola regla de este bloque: el escritorio  #
   #   queda exactamente como estaba.                                        #
   #                                                                         #
   ########################################################################### */


/* ============================================================
   1 · LA NAVEGACIÓN QUE NO HABÍA  (≤ 1199 px)

   Por debajo de 1200 la nav de escritorio se esconde y hasta hoy
   no la sustituía nada: quedaban el isotipo y el botón, y la
   página dejaba de poder navegarse.

   No hay hamburguesa porque tres rayas son tres barras, y no hay
   icono porque en esta página no hay iconos. Se abre con una
   palabra —MENÚ / CERRAR— a juego con la palabra del botón que
   tiene al lado, que es el único rótulo en versalita que ya
   existía en la cabecera.

   Y lo que se abre no es un cajón nuevo: es LA MISMA LÁMINA otra
   vez. Mismo papel, mismo radio, misma sombra, misma anchura,
   separada por el mismo --flote-y. La cabecera no crece —crecer
   empujaría la página al abrir— : se desdobla.
   ============================================================ */

/* de 1200 para arriba no existen */
.llave,
.pliego { display: none; }

@media (max-width: 1199px) {

  /* el isotipo a la izquierda, la palabra y el botón juntos a la
     derecha. Antes eran dos extremos y un vacío de 250 px en medio. */
  .cabecera__fila { justify-content: flex-start; gap: clamp(.5rem, 2.4vw, 1.2rem); }
  .llave { margin-left: auto; }

  /* el isotipo pasa a ser un blanco de dedo, no una imagen de 30 px
     suelta: la caja crece a 44, el dibujo se queda igual */
  .cabecera__marca {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
  .cabecera__logo { width: 32px; }

  .llave {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding-inline: .45rem;
    border: 0;
    border-radius: var(--r-pastilla);
    background: none;
    font: inherit;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--l-26);
    cursor: pointer;
    transition: color 180ms ease, transform 160ms var(--ease-out);
  }
  .llave:active { transform: scale(0.97); }
  .cabecera[data-abierta] .llave { color: var(--morado); }

  .pliego {
    display: block;
    position: absolute;
    top: calc(100% + var(--flote-y));
    left: 0;
    right: 0;
    background: var(--papel);
    border-radius: var(--r-flota);
    box-shadow: var(--s-alta);
    padding: clamp(.5rem, 2.2vw, .9rem) clamp(.7rem, 3vw, 1.4rem);
  }

  /* baja desde la lámina que la dispara —de ahí el origen arriba— y
     nunca desde la nada: 0,98 y no 0. Sale en dos tercios de lo que
     tarda en entrar: entrar invita, salir responde. */
  .con-js .pliego {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.98);
    transform-origin: 50% 0;
    transition:
      opacity 160ms var(--ease-out),
      transform 160ms var(--ease-out),
      visibility 0s linear 160ms;
  }
  .con-js .cabecera[data-abierta] .pliego {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
      opacity 240ms var(--ease-out),
      transform 240ms var(--ease-out),
      visibility 0s;
  }

  /* sin guion no hay palabra que pulsar: la lista se queda dentro de la
     lámina de la cabecera, sin lámina propia, y la página se navega igual */
  html:not(.con-js) .llave { display: none; }
  html:not(.con-js) .pliego {
    position: static;
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding-block: 0 clamp(.6rem, 2.4vw, 1rem);
  }
  /* sin la palabra en medio, el botón tiene que empujarse solo hasta
     la derecha: si no, se pega al isotipo y la fila queda coja */
  html:not(.con-js) .cabecera .boton { margin-left: auto; }
  /* y la lámina deja de pegarse: con la lista dentro mide casi 500 px,
     y una cabecera de media pantalla que no se va nunca es peor que no
     tener cabecera fija. Se lee arriba, se usa, y se marcha con la página. */
  html:not(.con-js) .cabecera { position: static; }

  .pliego__lista { display: grid; }

  /* LA SECCIÓN EN LA QUE ESTÁS SE MARCA CON EL PUNTO

     El punto de color después de la palabra es el signo de esta
     página: cierra todos sus titulares. Aquí dice dónde estás, que
     es información de verdad y no adorno. Las demás se retiran un
     paso de luz; la de ahora es la única a plena tinta. Ni pastilla,
     ni subrayado, ni barra al lado. */
  .pliego__enlace {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding-inline: .6rem;
    font-size: var(--t-sub);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.2;
    text-align: center;
    color: var(--l-34);
    border-radius: var(--r-losa);
    transition: color 180ms ease;
  }
  .pliego__enlace[aria-current] { color: var(--tinta); font-weight: 800; }
  .pliego__enlace[aria-current]::after { content: "."; color: var(--acento); }
  .pliego__enlace:active { color: var(--morado); }
  @media (hover: hover) and (pointer: fine) {
    .pliego__enlace:hover { color: var(--morado); }
  }
}

/* con movimiento reducido el pliego aparece y desaparece sin desplazarse:
   queda el cambio de luz, que dice lo mismo y no mueve nada */
@media (prefers-reduced-motion: reduce) {
  .con-js .pliego {
    transform: none;
    transition: opacity 140ms ease, visibility 0s linear 140ms;
  }
  .con-js .cabecera[data-abierta] .pliego {
    transition: opacity 140ms ease, visibility 0s;
  }
  .llave { transition: color 180ms ease; }
  .llave:active { transform: none; }
}

/* NO SE BLOQUEA EL DESPLAZAMIENTO, Y ESTO NO ES UN OLVIDO

   El pliego cuelga de la cabecera, que es `sticky`. Poner
   `overflow: hidden` en la raíz para congelar la página le quita a
   la cabecera su contenedor de desplazamiento, la sticky deja de
   pegarse y la lámina vuelve de un salto a su sitio del flujo —el
   principio del documento—, llevándose el pliego con ella. Medido:
   el panel aparecía a 4.118 px por encima de la ventana.

   No hace falta congelar nada. El pliego viaja con la cabecera, y
   si la página se mueve de verdad —más de lo que mueve un dedo
   apoyado— el pliego se cierra solo, que es lo que se espera. */


/* ============================================================
   2 · EL EJE DE LA PÁGINA EN MÓVIL  (≤ 899 px)

   En escritorio la página se lee contra un eje izquierdo: hay dos
   columnas, hay sangría y el bandeo de la derecha es lo que da
   aire. En una columna de 390 px esa asimetría no existe —no hay
   segunda columna contra la que alinearse— y lo que queda es una
   sección alineada a un lado, otra al centro y otra justificada.
   Era eso: nueve secciones haciendo nueve cosas.

   De aquí para abajo el eje es uno solo y es el centro, que es lo
   que pidió el cliente y lo único que se sostiene con una sola
   columna. La jerarquía la siguen llevando la escala y el color,
   no la alineación.

   Y con el eje se va el justificado: en una medida estrecha abre
   ríos de blanco entre palabras. Los anchos máximos bajan a la
   vez, para que el bandeo de un texto centrado quede corto y
   parejo en vez de irse de punta a punta.
   ============================================================ */

@media (max-width: 899px) {

  /* el cuerpo menor sube a 16 px: era 15 y es el tamaño de lectura
     de media página —detalles de ficha, pie, pistas del formulario— */
  :root { --t-menor: 1rem; }

  /* — el eje — */
  .titular-hero,
  .titular-sec,
  .titular-tier,
  .entrada,
  .parrafo,
  .rotulo,
  .pieza__nombre,
  .pieza__dice,
  .cierre__voz,
  .grupo__nombre,
  .grupo__bajada,
  .quees__texto { text-align: center; }

  /* centrar el texto y dejar la caja pegada a un lado no centra nada */
  .entrada,
  .parrafo,
  .porque .titular-sec,
  .pie__bajada,
  .grupo__nombre,
  .grupo__bajada,
  .quees__texto { margin-inline: auto; }

  /* el rótulo de grupo pierde el lado que tiene en escritorio: por debajo
     de 900 px no hay dos columnas que alternar, así que se pone encima de
     su grupo a todo el ancho y va centrado, como toda la página en esta
     medida. Lo que lo distingue de una ficha sigue ahí sin tocarlo —no
     tiene cuerpo y el nombre es el doble de grande—, lo que separa un
     grupo del siguiente pasa a ser el aire entre bandas, y la medida baja
     a la vez para que el bandeo de un texto centrado quede corto. */
  .grupo__nombre { max-width: 22ch; }
  .grupo__bajada { max-width: 34ch; }

  /* medidas cortas: un texto centrado se lee por el bandeo de las dos
     puntas, y a 60 caracteres las dos puntas quedan lejísimos */
  .parrafo { max-width: 34ch; }
  .entrada { max-width: 32ch; }
  .porque .titular-sec { max-width: 18ch; }

  /* el justificado se va, y con él la partición de palabras: ambos
     estaban ahí para tapar el bandeo de un texto que ahora va centrado */
  .quees__texto {
    text-align: center;
    hyphens: manual;
    max-width: 36ch;
    text-wrap: pretty;
  }

  /* — el aire — cada sección medía una pantalla entera también cuando
     solo llevaba un titular: el campo de tinta de «Por qué JurisOne»
     eran 844 px con cuatro líneas dentro y 600 de nada. En una página
     que se recorre con el pulgar, ese hueco es un tramo muerto. Manda
     el contenido y el relleno de sección, como en cualquier página
     larga. La portada se queda a pantalla: esa sí es una portada. */
  .seccion { min-height: 0; }
  .seccion.quees { min-height: 0; }

  /* — la portada — el objeto ocupaba 320 px de los 762 de alto útil y
     se salía del ancho por los dos lados. Se queda —es la firma de la
     página— pero a dos tercios: sigue siendo el objeto y deja que el
     titular mande, que es lo que tiene que pasar en una portada. */
  .objeto { width: min(66vw, 250px); }
  .portada__texto { margin-inline: auto; }

  /* — la escalera de adopción — en escritorio cada peldaño se corre a
     la derecha y la cifra va al lado del nombre: la forma dice que es
     una secuencia. En una columna, correrlos solo los descuadra. La
     secuencia la sigue diciendo la cifra, que sube a ponerse encima
     de su propio paso, como un número de capítulo. */
  .paso {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
    gap: .35rem;
    max-width: 34ch;
    margin-inline: auto;
  }
  .paso:nth-child(2),
  .paso:nth-child(3),
  .paso:nth-child(4),
  .paso:nth-child(5),
  .paso:nth-child(6) { margin-left: auto; }
  /* apilados y centrados, los seis peldaños pasan a distinguirse solo
     por el aire que los separa: si el hueco entre pasos se parece al
     hueco de dentro de un paso, los seis se leen como un texto seguido */
  .adopcion__escalera { gap: clamp(2.4rem, 7vw, 3.2rem); }
  .paso__cifra { line-height: 1; }
  .paso__dice { max-width: 32ch; margin-inline: auto; }

  /* — integraciones — el titular venía DESPUÉS de la lista de sistemas
     que explica: en dos columnas están uno al lado del otro y da igual,
     en una se leía la lista sin saber de qué iba. Se ordena. */
  .eco__reja > :first-child { order: 2; }
  .eco__reja > :last-child { order: 1; }
  .sistemas { justify-content: center; }
  .mecanismos { text-align: center; }

  /* cinco mecanismos en dos columnas dejan uno solo en la última fila,
     pegado a la izquierda. Se pone en el centro con el ancho de sus
     hermanas, no estirado a lo ancho: es la misma ficha, no otra. */
  .mecanismos__lista > .ficha:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - clamp(0.8rem, 1.4vw, 1.3rem) / 2);
    justify-self: center;
  }

  /* la tira de seis beneficios: en tres columnas cada pieza tiene su
     propia columna y el hueco de al lado ya las separa. Apiladas y
     centradas, lo único que las separa es el aire de arriba, y 24 px
     contra los 9 que hay entre un nombre y su frase no bastan. */
  .flota__reja { gap: clamp(2rem, 6vw, 2.6rem); }

  /* — el cierre — */
  .cierre__lista { justify-items: center; }

  /* — el pie — a una columna todo iba a la izquierda mientras el resto
     de la página iba al centro. Aquí también manda el eje. */
  .pie__cuerpo { justify-items: center; text-align: center; }
  .pie__marca { display: flex; flex-direction: column; align-items: center; }
  .pie__lista { justify-items: center; }
  .pie__cola { justify-content: center; text-align: center; }
  .pie__legal { justify-content: center; }
  /* 40 px no es un blanco de dedo: los enlaces del pie van uno detrás
     de otro y el de al lado está a cuatro píxeles */
  .pie__enlace { min-height: 44px; }
  .pie__titulo { font-size: .8125rem; }

  /* «Bogotá, Colombia» iba en --l-72 sobre el morado: 2,51:1, muy por
     debajo del 4,5 que pide AA, y a 16 px en una pantalla al sol no se
     lee. --l-94 sobre morado da 6,20:1 y sigue siendo el tono apagado
     que separa el lugar de la bajada. ESTO MISMO PASA EN ESCRITORIO —
     ahí no lo toco, va en el informe. */
  .pie__lugar { color: var(--l-94); }

  /* el rótulo de sección iba a 11,5 px: por debajo de lo que se lee
     cómodo en una pantalla que se sostiene con la mano */
  .kicker { font-size: .8125rem; }
}


/* ============================================================
   3 · APAISADO Y PANTALLAS BAJAS

   844 × 390 es un teléfono de lado, no una tableta: sigue siendo
   una columna y sigue llevando el eje al centro. Lo único que
   cambia es que ahí sobra alto, así que la portada tampoco pide
   una pantalla entera —la pediría y dejaría el objeto fuera.
   ============================================================ */
@media (max-height: 640px) and (max-width: 1199px) {
  .seccion.portada { min-height: 0; padding-block: clamp(28px, 6vh, 48px); }
  .objeto { width: min(42vw, 220px); }
}

/* de lado sobra ancho y falta alto: el titular y el objeto vuelven a
   ponerse uno al lado del otro, que es como caben. El texto sigue
   centrado —el eje de móvil no cambia porque se gire el teléfono. */
@media (max-height: 640px) and (min-width: 640px) and (max-width: 1199px) {
  .portada__reja { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}

/* ============================================================
   UN SOLO EJE EN TODA LA PÁGINA

   La página se fue construyendo sección a sección y cada una acabó
   con su propia alineación: kickers centrados, titulares al ras de
   la izquierda, párrafos justificados, listas a la izquierda bajo
   titulares centrados. Eso es lo que se veía descuadrado.

   Una sola regla, aquí, al final, para que gane a todo lo anterior:
   TODO VA CENTRADO. Las dos únicas excepciones están escritas
   debajo y tienen razón de ser.
   ============================================================ */

.seccion,
.seccion .contenedor,
.seccion .titular-sec,
.seccion .entrada,
.seccion .parrafo,
.seccion .kicker,
.seccion h2, .seccion h3, .seccion h4, .seccion p {
  text-align: center;
}

/* los bloques de texto, centrados también como caja, no solo por dentro */
.seccion .titular-sec,
.seccion .entrada,
.seccion .parrafo { margin-inline: auto; }

/* La portada era la excepción del sitio: iba alineada a la izquierda
   porque el titular hacía eje contra el objeto de la derecha. Sin el
   objeto no hay eje que sostener, así que vuelve al centro como el
   resto. */

/* ── Excepción 2 · los rótulos de grupo de soluciones ────────
   Van alineados al borde exterior, alternando lado, y ese zigzag
   es lo único que separa un grupo del siguiente. Centrarlos lo
   borraría. En móvil sí se centran, y de eso se ocupa su bloque. */
.soluciones__rotulo,
.soluciones__rotulo * { text-align: inherit; }

/* las dos que quedaban fuera del eje común:
   · integraciones iba a dos columnas, lista a la izquierda y titular
     a la derecha, sin relación con el resto de la página
   · el roadmap tenía los pasos al ras de la izquierda bajo un titular
     ya centrado */
.seccion#ecosistema .eco__reja {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}
.seccion#ecosistema .sistemas,
.seccion#ecosistema .mecanismos__lista { justify-content: center; }

.adopcion .paso { justify-items: center; text-align: center; }
.adopcion__escalera { justify-items: center; }

/* ============================================================
   SOLUCIONES, PUESTAS EN ORDEN

   Lo que estaba descuadrado, y por qué:
   · el rótulo flotaba a media altura de su grupo, colgado de un eje
     que no compartía con nada;
   · dentro de cada ficha el nombre ocupa una o dos líneas según el
     caso, así que el detalle arrancaba a una altura distinta en
     cada una y la fila entera se leía desalineada;
   · las filas incompletas dejaban fichas sueltas pegadas a un lado.

   Se arregla sin inventar nada: el rótulo arriba de su grupo, las
   fichas en una reja uniforme, y dentro de la ficha una rejilla de
   tres bandas —objeto, nombre, detalle— con el nombre reservando
   su altura, para que las tres bandas empiecen a la misma cota en
   todas las tarjetas.
   ============================================================ */

/* 1 · el grupo deja de ser dos columnas: rótulo arriba, fichas debajo */
.soluciones__reja { display: block; }
.grupo {
  display: block;
  margin-bottom: clamp(3.4rem, 6vw, 6rem);
}
.grupo:last-child { margin-bottom: 0; }

.grupo__rotulo,
.grupo__rotulo * { text-align: center; }
.grupo__rotulo {
  max-width: 46ch;
  margin: 0 auto clamp(1.8rem, 3vw, 2.8rem);
}

/* 2 · las fichas, en reja uniforme; las filas incompletas se centran */
.grupo__fichas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--hueco-ficha);

  --hueco-ficha: clamp(16px, 1.8vw, 26px);
}

/* un único ancho para las veintitrés, en todas las filas y todos los grupos.

   Sin encoger (el 0 1 de antes dejaba que una fila de dos saliera más
   ancha que una de cuatro), y con suelo de 300px, que es el ancho a
   partir del cual ningún nombre pasa de dos líneas en ninguna pantalla
   —el cuerpo del nombre se topa en 20,8px y ahí hacen falta 298—. */
.grupo__fichas > .solucion {
  flex: 0 0 clamp(300px, calc((100% - 2 * var(--hueco-ficha)) / 3), 376px);
  max-width: 100%;
}

/* 3 · dentro de la ficha: tres bandas a la misma cota en todas */
/* La ficha, con medidas exactas y las mismas en las veintitrés.

   Tres bandas de altura fija, no «lo que ocupe cada cosa»:

     · el objeto — reserva su alto aunque la pila se abra más o menos
       (cada sigilo lleva --abre de 9, 15 o 22 px, y sin reserva cada
       ficha empezaba el texto a una cota distinta);
     · el nombre — dos líneas siempre, tenga una o dos;
     · el detalle — el resto, arrancando a la misma cota en todas.

   Todo centrado: el objeto, el nombre y el detalle. */
.solucion__cara {
  display: grid;
  grid-template-rows: var(--banda-objeto) var(--banda-nombre) 1fr;
  justify-items: center;
  align-content: start;
  text-align: center;

  --banda-objeto: clamp(150px, 13vw, 176px);
  --banda-nombre: 4.4em;        /* tres líneas más su aire. Con el ancho de
                                   ficha a suelo de 290px ningún nombre pasa
                                   de dos, así que la tercera es el margen */
  --banda-detalle: 9.5em;       /* el detalle más largo son seis líneas */
}

/* y el alto, igual en las veintitrés: la banda del detalle se reserva
   entera, así que una ficha de texto corto no encoge respecto a la de
   al lado ni respecto a las de otra fila */
.solucion__cara {
  grid-template-rows: var(--banda-objeto) var(--banda-nombre) var(--banda-detalle);
}

/* el objeto se planta en el centro de su banda, da igual cuánto se abra */
.solucion__cara > .sigilo {
  place-self: center;
  margin: 0;
}

.solucion__nombre {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  align-self: stretch;          /* la caja ocupa su banda entera; si no, se
                                   centra en ella y un nombre de una línea
                                   arranca 11 px más abajo que uno de dos */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  max-width: 100%;
}

.solucion__texto {
  display: contents;            /* las bandas las manda la cara, no esta caja */
}

.solucion__detalle {
  margin: 0;
  align-self: start;
  max-width: 26ch;
  margin-inline: auto;
}

/* el cierre volvió con un mensaje nuevo y una sola columna: titular,
   una línea y el botón, centrados. La reja de dos columnas era del
   cierre anterior, que listaba cinco voces al lado del titular. */
.cierre__reja {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  max-width: 44rem;
  margin-inline: auto;
}
.cierre__reja .parrafo { margin-top: clamp(1rem, 1.6vw, 1.4rem); }
.cierre__reja .boton {
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
  width: auto;
  justify-self: center;
}

/* ============================================================
   LOS PASOS DE LA IMPLEMENTACIÓN

   Iban escalonados: cada paso sangrado un poco más que el anterior,
   para que la cifra dibujara una escalera. Eso funcionaba cuando la
   sección iba alineada a la izquierda; con el texto ya centrado la
   numeración queda flotando en seis sitios distintos y se lee como
   un desorden, no como una secuencia.

   Ahora los seis comparten eje: la cifra arriba, centrada, y debajo
   el nombre y la línea. La secuencia la cuenta el número, que para
   eso está, no la sangría.
   ============================================================ */
.paso {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: .3rem;
  max-width: 46ch;
  margin-left: 0 !important;    /* anula el escalonado de nth-child */
}
.paso__cifra { line-height: 1; }
.adopcion__escalera { gap: clamp(2.4rem, 4vw, 3.4rem); }

/* los seis pasos en reja, no apilados: la sección tiene que caber en
   una pantalla y en columna se iba a más del doble. Tres y tres, que
   es como se lee una secuencia de seis sin perder el orden. */
.adopcion__escalera {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.6rem, 3vw, 2.8rem) clamp(1.4rem, 2.4vw, 2.4rem);
  align-items: start;
}
.paso { max-width: none; }

@media (max-width: 899px) {
  .adopcion__escalera { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .adopcion__escalera { grid-template-columns: minmax(0, 1fr); }
}

/* ocho beneficios en tres columnas son tres filas y la sección se iba
   a pantalla y media. En cuatro son dos filas justas. */
@media (min-width: 1100px) {
  .beneficios__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* y aun así se pasaba: con ocho fichas en dos filas, el objeto y el
   aire de cada una tienen que medir menos que en las secciones de
   cuatro o cinco. */
.beneficios .sigilo { --lado: clamp(70px, 6.2vw, 90px); }
.beneficios .ficha__cara { padding-block: clamp(1rem, 1.4vw, 1.3rem) clamp(1.1rem, 1.6vw, 1.4rem); }
.beneficios__lista { gap: clamp(.7rem, 1vw, .95rem); }


/* el titular de Integraciones salió de la reja y va antes que la lista
   de sistemas: primero lo que explica, luego lo que enumera */
#ecosistema > .titular-sec { padding-inline: var(--marg); }
#ecosistema .eco__reja { grid-template-columns: minmax(0, 1fr); }

/* la lista de sistemas, con aire entre sus voces y separada de lo que
   viene debajo: iba toda junta y se leía como un párrafo */
#ecosistema .sistemas {
  gap: clamp(.45rem, .9vw, .8rem) clamp(1.1rem, 2.2vw, 2rem);
  max-width: 54rem;
  margin-inline: auto;
}
#ecosistema .mecanismos { margin-top: clamp(2.4rem, 4vw, 3.4rem); }

/* los cinco mecanismos, algo más compactos: la sección tiene que caber
   en una pantalla y el titular con su aire ya se lleva su parte */
#ecosistema .sigilo { --lado: clamp(72px, 6.4vw, 94px); }
#ecosistema .ficha__cara { padding-block: clamp(1rem, 1.5vw, 1.4rem) clamp(1.1rem, 1.7vw, 1.5rem); }

/* ============================================================
   LOS TITULARES DE SECCIÓN, CON UNA SOLA MEDIDA

   Cada uno había acabado con su propio ancho —de 445 a 1180 px— y su
   propio margen —de 0 a 51—, porque se fueron ajustando de uno en uno
   según lo que hiciera falta en cada momento. Ocho medidas distintas
   para ocho cosas que son lo mismo.

   Una sola regla, al final, para que gane a todas las anteriores: el
   mismo ancho máximo y el mismo aire debajo. Los titulares cortos
   siguen midiendo lo que mide su texto; solo se limita a los largos.
   ============================================================ */
.seccion .titular-sec {
  max-width: 26ch;
  margin-inline: auto;
  margin-bottom: clamp(1.5rem, 2.4vw, 2.2rem);
}

/* ───────────────────────────────────────────────────────────────────
   LOS GRUPOS DE CINCO, EN UNA SOLA FILA

   El .contenedor da 1180px de ancho útil y cinco fichas con sus huecos
   piden 1554, así que no caben por mucho que se reparta. La reja de
   soluciones —sólo ella, ninguna otra sección— se sale del contenedor
   y toma el ancho de la ventana.

   Las fichas no cambian de tamaño: siguen entre 300 y 376px. Lo que
   cambia es el reparto, que antes se hacía entre tres y ahora entre
   cinco.

   Sólo a partir de 1668px, que es donde cinco fichas de 300 más sus
   cuatro huecos (1604px) caben de verdad. Por debajo no se toca nada:
   la reja sigue dentro del contenedor y con los márgenes de siempre,
   que en móvil son los que separan las fichas del borde.            */
@media (min-width: 1668px) {
  .soluciones .soluciones__reja {
    --banda: min(1856px, calc(100vw - 64px));
    width: var(--banda);
    max-width: none;
    margin-inline: calc(50% - var(--banda) / 2);

    /* la reja hace de contenedor de consulta para que el ancho de
       ficha se mida siempre contra ella y no contra el grupo, que
       puede ser más estrecho —el de seis lo es— */
    container-type: inline-size;
    --hueco-ficha: clamp(16px, 1.8vw, 26px);
    --ancho-ficha: clamp(300px, calc((100cqw - 4 * var(--hueco-ficha)) / 5), 376px);
  }
  .grupo__fichas > .solucion { flex-basis: var(--ancho-ficha); }

  /* el grupo de seis, en dos filas de tres y no en 5+1: se le acota el
     ancho a tres fichas. Las fichas siguen midiendo lo mismo que en
     los demás grupos, porque su ancho se mide contra la reja */
  .grupo__fichas:has(> .solucion:nth-child(6):last-child) {
    max-width: calc(3 * var(--ancho-ficha) + 2 * var(--hueco-ficha));
    margin-inline: auto;
  }
}

/* La cola del pie reparte con space-between, que necesita dos piezas:
   el aviso de copyright a un lado y los enlaces legales al otro. Sin
   los enlaces —no hay contenido legal todavía— el aviso se quedaba
   solo, pegado al borde izquierdo. Cuando vuelvan, esta regla deja de
   aplicar sin tocar nada. */
.pie__cola:has(> :only-child) { justify-content: center; }

/* ───────────────────────────────────────────────────────────────────
   «POR QUÉ», EL TITULAR Y EL PANEL EN UNA SOLA PANTALLA

   El panel de los seis beneficios vive fuera de la sección —tiene que
   estar fuera para montarse sobre el borde del campo oscuro—, así que
   la sección reservaba una pantalla entera para un titular de 103px y
   el conjunto se salía por abajo. Peor aún, el hueco sobrante crecía
   con la ventana: 238px de alto a 750, 403px a 1080. De ahí que la
   sección se viera distinta según el zoom.

   Ahora la sección mide lo que queda de pantalla tras descontar el
   panel, de modo que titular y panel suman exactamente una. El alto
   del panel lo publica sitio.js en --alto-flota; el valor de reserva
   es el que mide en escritorio, por si el guion no llega a correr. */
.seccion.porque {
  min-height: calc(
    100svh
    - var(--alto-flota, 360px)   /* el panel, que va fuera de la sección */
    + var(--solape)              /* menos lo que el panel ya se monta encima */
    - clamp(86px, 9vh, 104px)    /* y el scroll-margin con que se ancla */
    - 8px                        /* holgura para los redondeos del clamp */
  );
}

/* el aire de arriba y abajo, atado a la altura de la ventana y no al
   ancho: con el --pad-sec de siempre, en una pantalla baja el titular
   y sus márgenes pedían más de lo que quedaba y empujaban el panel
   fuera de cuadro */
.seccion.porque { padding-block: clamp(32px, 6vh, 96px); }

/* ───────────────────────────────────────────────────────────────────
   LA FLECHA DE VOLVER

   Sólo en las páginas aparte —Educación, Contacto, las que vengan—,
   nunca en la portada.

   Siempre en el mismo sitio: justo debajo de la cabecera y pegada a
   su borde izquierdo, se desplace la página lo que se desplace. Por
   eso va fija y fuera del flujo, y no la coloca cada página a su
   manera: antes salía centrada en Educación y a media altura, porque
   heredaba la composición de la sección que la contenía.

   Para alinearla con la cabecera se repiten aquí sus tres medidas
   —el flote, el ancho y su relleno—, que viven en .cabecera y no en
   tokens.css. Si allí cambian, cambian aquí.

   Lleva pastilla propia, como la cabecera, porque pasa por encima de
   fondos claros y oscuros —el campo morado de Contacto— y así se lee
   igual en todos.

   Para una página nueva: este enlace, en cualquier punto del
   contenido; va fijo, da igual dónde se escriba. */
.volver {
  --flote-x: clamp(12px, 3vw, 30px);
  --flote-y: clamp(10px, 1.2vw, 16px);
  --pad-cabecera: clamp(1rem, 2.2vw, 2rem);

  position: fixed;
  z-index: 45;
  top: calc(var(--flote-y) * 2 + 62px);
  inset-inline: 0;

  /* el mismo ancho y el mismo centrado que la cabecera, para caer
     exactamente bajo su borde */
  width: min(100% - var(--flote-x) * 2, calc(var(--ancho) + clamp(2rem, 5vw, 4.5rem)));
  margin-inline: auto;
  padding-inline: var(--pad-cabecera);

  display: flex;
  justify-content: flex-start;
  text-decoration: none;

  /* la fila entera no debe tragarse los clics del contenido que hay
     debajo: sólo la pastilla recibe el puntero */
  pointer-events: none;
}

.volver__pastilla {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: .45em;
  min-height: 44px;
  padding-inline: 1rem;
  border-radius: 999px;
  background: var(--morado);
  color: var(--papel);
  box-shadow: var(--s-alta);
  font-size: var(--t-menor);
  font-weight: 600;
  transition: box-shadow .18s ease;
}

.volver__flecha {
  font-size: 1.25em;
  line-height: 1;
  transition: transform .18s ease;
}

.volver:hover .volver__flecha { transform: translateX(-3px); }
.volver:focus-visible { outline: none; }
.volver:focus-visible .volver__pastilla {
  outline: none;
  box-shadow: var(--s-alta), 0 0 0 2px var(--papel), 0 0 0 4px var(--tinta);
}

@media (prefers-reduced-motion: reduce) {
  .volver__pastilla, .volver__flecha { transition: none; }
  .volver:hover .volver__flecha { transform: none; }
}

/* sobre un campo oscuro —el morado de Contacto— el botón se da la
   vuelta, que si no se funde con el fondo. Quién está debajo lo
   decide sitio.js midiendo la claridad, no una lista de páginas */
.volver--sobre-oscuro .volver__pastilla {
  background: var(--papel);
  color: var(--morado);
}

/* ───────────────────────────────────────────────────────────────────
   LAS ILUSTRACIONES

   Sustituyen a la pila de losas de CSS. Cada ficha lleva la suya,
   dibujada según lo que cuenta: una billetera en Billetera Digital,
   un puente en Pagos Transfronterizos, un escudo en Respaldo
   regulatorio. Son WebP con transparencia, así que caen igual sobre
   el papel de Beneficios, el lila de Soluciones y el de Industrias.

   Quietas, como se pidió: entran con el mismo gesto de aparición de
   su ficha y ahí se quedan, sin moverse con el scroll.

   El alto manda sobre el ancho: todas se dibujaron en un lienzo
   cuadrado con el objeto centrado, así que fijando el alto quedan
   todas del mismo peso visual aunque unas sean anchas y otras
   estrechas. */
.ilus {
  display: block;
  place-self: center;
  width: auto;
  height: var(--lado-ilus, clamp(100px, 9.8vw, 134px));
  max-width: 100%;
  margin: 0;
  object-fit: contain;
}

/* en Beneficios la banda es más baja, para que la sección siga
   cabiendo en una pantalla */
.beneficios .ilus { --lado-ilus: clamp(70px, 6.2vw, 90px); }

/* ───────────────────────────────────────────────────────────────────
   IMPLEMENTACIÓN · EL RIEL

   El cliente pidió línea de tiempo con línea visible y animada, y
   aquí la línea tiene por qué: en esta industria el riel es literal
   —un mensaje lo recorre y cada nodo lo autoriza—, así que la línea
   no decora: es el riel, y lo que se mueve por él es la autorización
   pasando de un hito al siguiente. Es la única línea del sitio y la
   única cosa que se mueve en la sección.

   Geometría sin medir nada con JS: cada paso dibuja el tramo que va
   de SU cifra a la siguiente —`left:50%` más el hueco de la reja—, y
   por construcción los seis caen al mismo eje. El sexto no dibuja
   tramo: el riel acaba en producción.

   La cifra lleva el papel de la sección por fondo. El riel entra y
   sale de ella, y la cifra queda PUESTA sobre el riel, como el rótulo
   de un nodo en un esquema, no metida en un círculo.

   Sincronía: la vía se traza en seis cotas iguales, --riel-dur/5 cada
   una, y la cifra y su texto se encienden en la cota que les toca.
   Un único número —el índice --i de cada paso— lo cuadra todo.
   ─────────────────────────────────────────────────────────────────── */

.adopcion .riel {
  position: relative;
  margin-top: clamp(2.4rem, 4vw, 3.6rem);

  --riel-dur: 2000ms;              /* el recorrido completo */
  --riel-grueso: 2px;
  --riel-gap: clamp(1.5rem, 3.4vw, 2rem);
  --riel-cifra: var(--t-tier);     /* en vertical la cifra es el rótulo */
  --riel-eje: calc(var(--riel-cifra) * 1.6);
}

/* — la reja: en vertical, una columna; es como se lee una línea de
     tiempo en un teléfono — */
.adopcion .adopcion__escalera {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--riel-gap);
  align-items: start;
  justify-items: stretch;
}

.adopcion .paso {
  position: relative;
  display: grid;
  grid-template-columns: var(--riel-eje) minmax(0, 1fr);
  column-gap: clamp(.6rem, 1.6vw, 1rem);
  row-gap: 0;
  align-items: start;
  justify-items: stretch;
  text-align: left;
  max-width: none;
}

/* el índice de cada paso: de él salen las seis cotas del recorrido */
.adopcion .paso:nth-child(1) { --i: 0; }
.adopcion .paso:nth-child(2) { --i: 1; }
.adopcion .paso:nth-child(3) { --i: 2; }
.adopcion .paso:nth-child(4) { --i: 3; }
.adopcion .paso:nth-child(5) { --i: 4; }
.adopcion .paso:nth-child(6) { --i: 5; }

.adopcion .paso__cifra {
  position: relative;
  z-index: 1;                      /* la cifra interrumpe el riel */
  grid-column: 1;
  font-size: var(--riel-cifra);
  line-height: 1;
  text-align: center;
  background: var(--morado);
  padding-bottom: .22em;
  color: var(--menta);
  transition: color 280ms var(--ease-out);
  transition-delay: calc(var(--riel-dur) / 5 * var(--i));
}

.adopcion .paso > div {
  grid-column: 2;
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
  transition-delay: calc(var(--riel-dur) / 5 * var(--i));
}

.adopcion .paso__nombre { text-align: left; }
.adopcion .paso__dice {
  text-align: left;
  margin-top: .35rem;
  max-width: 68ch;              /* en una columna ancha la linea se alarga
                                   y el texto deja de leerse de corrido */
}

/* — el tramo: ::before es la vía apagada, ::after la ya recorrida — */
.adopcion .paso::before,
.adopcion .paso::after {
  content: "";
  position: absolute;
  left: calc(var(--riel-eje) / 2 - var(--riel-grueso) / 2);
  top: calc(var(--riel-cifra) / 2);
  width: var(--riel-grueso);
  height: calc(100% + var(--riel-gap));
  border-radius: var(--riel-grueso);
}
.adopcion .paso::before { background: var(--l-41); }
.adopcion .paso::after {
  background: var(--m-42);
  transform-origin: top center;
  transition: transform calc(var(--riel-dur) / 5) linear;
  transition-delay: calc(var(--riel-dur) / 5 * var(--i));
}
.adopcion .paso:last-child::before,
.adopcion .paso:last-child::after { content: none; }

/* — el estado de reposo existe SOLO con JS: sin él, y con el
     movimiento reducido, los seis hitos están encendidos de entrada — */
.con-js .adopcion .riel .paso::after { transform: scaleY(0); }
.con-js .adopcion .riel.se-enciende .paso::after { transform: scaleY(1); }
.con-js .adopcion .riel:not(.se-enciende) .paso__cifra { color: var(--l-72); }
.con-js .adopcion .riel:not(.se-enciende) .paso > div {
  opacity: 0;
  transform: translateY(10px);
}

/* — la chispa: el pulso que recorre la vía. Solo en horizontal, donde
     la vía es una recta de cota uniforme y el viaje se lee de un
     vistazo. Es el único alarde de la sección. — */
.adopcion .riel__via { display: none; }

@keyframes riel-viaje {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}
@keyframes riel-brillo {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ── de 1100 arriba: el riel se tumba y los seis van en fila ──────── */
@media (min-width: 1100px) {
  .adopcion .riel {
    --riel-cifra: var(--t-cifra);
    --riel-gap: clamp(1rem, 1.8vw, 1.6rem);
    --riel-halo: calc(var(--riel-cifra) * 0.45);   /* radio del halo */
    --riel-alto: calc(var(--riel-cifra) * 0.9);    /* alto de la caja */
  }

  .adopcion .adopcion__escalera {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .adopcion .paso {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    text-align: center;
  }
  .adopcion .paso__cifra {
    justify-self: center;
    padding-bottom: 0;
    padding-inline: .3em;          /* el hueco por donde pasa el riel */
    margin-bottom: .6rem;
  }
  .adopcion .paso > div { grid-column: 1; }
  .adopcion .paso__nombre {
    text-align: center;
    font-size: var(--t-ficha);
  }
  .adopcion .paso__dice { text-align: center; margin-top: .3rem; }

  /* el tramo, ahora de esta cifra a la siguiente */
  .adopcion .paso::before,
  .adopcion .paso::after {
    left: 50%;
    top: calc(var(--riel-cifra) / 2 - var(--riel-grueso) / 2);
    width: calc(100% + var(--riel-gap));
    height: var(--riel-grueso);
  }
  .adopcion .paso::after { transform-origin: left center; }
  .con-js .adopcion .riel .paso::after { transform: scaleX(0); }
  .con-js .adopcion .riel.se-enciende .paso::after { transform: scaleX(1); }

  /* La vía es la caja por la que corre la chispa. Va del centro del
     hito 1 al del hito 6 —media columna por cada lado, descontados los
     cinco huecos— más el halo, que es lo que hay que dejar asomar en
     los dos extremos del viaje.

     Recorta: la chispa acaba su viaje fuera de la caja y, sin recortar,
     esa caja vacía engordaba el ancho desplazable de la página. */
  .adopcion .riel__via {
    display: block;
    position: absolute;
    top: calc(var(--riel-cifra) / 2 - var(--riel-alto) / 2);
    left: calc((100% - 5 * var(--riel-gap)) / 12 - var(--riel-halo));
    right: calc((100% - 5 * var(--riel-gap)) / 12 - var(--riel-halo));
    height: var(--riel-alto);
    overflow: hidden;
    pointer-events: none;
    /* por encima del papel de las cifras: el pulso pasa POR el hito y
       lo deja encendido, que es lo que cuenta la sección. Por debajo,
       el recorte del rótulo le comía media luz. */
    z-index: 2;
  }
  /* dentro, la chispa mide exactamente el riel: viaja el 100% de SU
     ancho, y eso la deja clavada en el centro del sexto hito */
  .adopcion .riel__chispa {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--riel-halo);
    right: var(--riel-halo);
  }
  .adopcion .riel__chispa::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(var(--riel-cifra) * -0.4);
    width: calc(var(--riel-cifra) * 0.85);
    height: calc(var(--riel-cifra) * 0.85);
    transform: translateY(-50%);
    border-radius: 50%;
    background: radial-gradient(circle at center,
                var(--menta) 0 9%, var(--m-42) 20%, transparent 62%);
    opacity: 0;
  }
  .con-js .adopcion .riel.se-enciende .riel__chispa {
    animation: riel-viaje var(--riel-dur) linear forwards;
  }
  .con-js .adopcion .riel.se-enciende .riel__chispa::before {
    animation: riel-brillo var(--riel-dur) linear forwards;
  }
}

/* ── movimiento reducido: el riel está trazado y los seis encendidos
      desde el primer cuadro. Nada se mueve. ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .con-js .adopcion .riel .paso::after,
  .con-js .adopcion .riel.se-enciende .paso::after { transform: none; transition: none; }
  .adopcion .paso__cifra,
  .con-js .adopcion .riel:not(.se-enciende) .paso__cifra {
    color: var(--menta);
    transition: none;
  }
  .adopcion .paso > div,
  .con-js .adopcion .riel:not(.se-enciende) .paso > div {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .adopcion .riel__chispa,
  .adopcion .riel__chispa::before { animation: none; display: none; }
}

/* ───────────────────────────────────────────────────────────────────
   LAS FICHAS DE INDUSTRIAS Y BENEFICIOS, A MEDIDA EXACTA

   Mismo trato que las 23 de Soluciones: tres bandas de alto fijo
   —objeto, nombre, detalle— en vez de dejar que cada ficha se
   acomode a su texto. Así el nombre arranca a la misma cota tenga
   una línea o tres, y el detalle también, y las fichas de una fila
   miden lo mismo.

   El nombre se centra DENTRO de su banda, no se apoya arriba: con
   una línea queda a media banda y con dos la llena, pero el detalle
   siempre empieza donde mismo. */
:is(.industrias__reja, .beneficios__lista) .ficha__cara {
  display: grid;
  grid-template-rows: var(--banda-ilus) var(--banda-nom) var(--banda-det);
  justify-items: center;
  align-content: start;
  text-align: center;
  gap: 0;
}

/* la ilustración, centrada en su banda */
:is(.industrias__reja, .beneficios__lista) .ficha__cara > .ilus {
  align-self: center;
}

/* el nombre, centrado en su banda y en dos líneas de techo */
:is(.industrias__reja, .beneficios__lista) .ficha__nombre {
  margin: 0;
  align-self: center;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* el detalle, pegado al principio de la suya */
:is(.industrias__reja, .beneficios__lista) .ficha__dice {
  margin: 0;
  align-self: start;
}

.industrias__reja .ficha__cara {
  --banda-ilus: calc(var(--lado-ilus, clamp(100px, 9.8vw, 134px)) + 1.6rem);
  --banda-nom: 3.4em;      /* dos líneas: «Empresas con Finanzas Embebidas» */
  --banda-det: 7em;
}

.beneficios__lista .ficha__cara {
  --banda-ilus: calc(var(--lado-ilus, clamp(70px, 6.2vw, 90px)) + 1.2rem);
  --banda-nom: 3.2em;      /* dos líneas: «Nuevos productos e ingresos» */
  --banda-det: 7.6em;      /* cinco: «Capacidades y acompañamiento…» */
}

/* ═══════════════════════════════════════════════════════════════════════
   EDUCACIÓN · TRANSFORMACIÓN DIGITAL PARA COOPERATIVAS

   El brochure del cliente es verde oscuro y mostaza, con filetes entre
   filas, pastillas para los temas y bullets de color. Nada de eso entra
   aquí: lo que se conserva es su JERARQUÍA —qué manda sobre qué— y su
   texto, palabra por palabra. El color, el tipo y los componentes son
   los del sitio.

   Lo que se reutiliza sin inventar nada nuevo:
   · .entrada, .parrafo, .titular-sec con su .punto, .destacado, .rotulo
   · .sistemas, que es como la portada nombra un conjunto de cosas a
     cuerpo grande sin recurrir a pastillas: los tres temas van ahí
   · .flota, la lámina que se monta sobre el borde del campo: el
     entregable es justo lo que hay entre el programa y la inscripción
   · el riel de la implementación, para las ocho sesiones

   Lo que se añade son cuatro rejas de texto —fuerzas, logros, datos— y
   el riel en vertical. Ni una medida, ni un color, ni un radio que no
   venga de tokens.css.

   Móvil primero: por debajo de 900 px manda el contenido, que es lo que
   ya dice `.seccion { min-height: 0 }`, y el eje es el centro.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1 · LA CUBIERTA ─────────────────────────────────────────────────
   La flecha de volver va fija y flota por encima: no ocupa alto ni
   empuja nada. Por eso la cubierta no le reserva sitio y centra su
   contenido en el alto completo de la pantalla — lo que se lee queda
   en el medio de verdad, no desplazado hacia abajo por un botón que
   ni siquiera está en el flujo. */
/* La regla general del sitio estira cada sección a la pantalla entera
   y centra lo que lleva dentro. Acá no: la cubierta mide lo que mide su
   contenido. Lo que hay es un titular, una línea y tres temas — con el
   alto forzado, todo eso quedaba flotando en medio de un vacío que no
   dice nada. Arriba lleva algo más que abajo, y solo eso, porque la
   cabecera y la flecha flotan encima sin ocupar flujo. */
.seccion.cubierta {
  min-height: 0;
  padding-top: clamp(104px, 11vh, 140px);
  padding-bottom: clamp(56px, 7vh, 88px);
}

/* la regla del sitio da ese aire a `.parrafo`, no a `.entrada`, y aquí
   la entradilla va justo bajo el titular: sin él, se le pega al pie
   de la última línea. */
.cubierta .entrada { margin-top: clamp(1.8rem, 3.2vw, 2.8rem); }

/* Los tres temas del programa. Antes eran tres palabras seguidas y se
   leían como una frase; ahora cada una tiene su objeto encima y el
   espacio para respirar, que es lo que las vuelve tres cosas y no una
   enumeración. El peso y el color de cada voz se conservan, que es como
   la portada distingue los sistemas del ecosistema. */
.temas {
  --lado-tema: clamp(112px, 13vw, 186px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: start;
  gap: clamp(2.6rem, 9vw, 8rem);
  margin-top: clamp(3.4rem, 6.4vw, 5.2rem);
}
/* Cada tema es su objeto con el nombre debajo, y los tres van en fila
   sobre el mismo eje que el titular y la entradilla. La banda de la
   ilustración es fija para que los tres nombres caigan a la misma cota
   aunque los objetos midan distinto. */
.temas__uno {
  display: grid;
  grid-template-rows: var(--lado-tema) auto;
  justify-items: center;
  align-items: center;
  gap: clamp(0.5rem, 1vw, 0.85rem);
  width: max-content;
  max-width: 100%;
  text-align: center;
}
.temas .ilus {
  --lado-ilus: var(--lado-tema);
  width: var(--lado-tema);
  object-fit: contain;
}
/* Los tres pesan lo mismo porque valen lo mismo: son las tres materias
   del programa, no una jerarquía. Variar peso y color entre ellas, como
   hace la lista de sistemas de la portada, sugeriría un orden que acá
   no existe. */
.temas__voz {
  font-size: clamp(1.05rem, 1.9vw, 1.5rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--tinta);
}

/* ── 2 · POR QUÉ AHORA ───────────────────────────────────────────────
   Tres fuerzas, no tres fichas: no hay objeto que enseñar ni dato que
   comparar, hay tres frases. Lo que distingue a cada una es el acento
   sobre su sujeto, que es exactamente lo que hace el original.

   El sujeto va en su propio renglón y centrado: leído de corrido dentro
   del párrafo se perdía. El cuerpo va justificado debajo, con guionado,
   porque justificar en una columna estrecha sin partir palabras abre
   ríos blancos. */
.fuerzas .destacado {
  display: block;
  text-align: center;
  margin-bottom: 0.35em;
}
.fuerzas .parrafo {
  text-align: justify;
  text-align-last: center;
  hyphens: auto;
}

.fuerzas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.4rem, 2.6vw, 2rem);
  margin-top: clamp(2.2rem, 4vw, 3.4rem);
}

/* el remate de la sección: sube de cuerpo porque es la frase que el
   cliente quiere que quede. Jerarquía por escala, no por recuadro. */
.conviccion {
  margin-top: clamp(2.4rem, 4.4vw, 3.6rem);
  margin-inline: auto;
  max-width: 34ch;
  font-size: var(--t-sub);
  line-height: 1.45;
  color: var(--texto);
  text-wrap: pretty;
}

/* ── 3 · QUÉ OBTIENE SU COOPERATIVA ──────────────────────────────────
   Siete resultados. En el original son siete viñetas; aquí son siete
   frases con el logro en acento al principio, que es lo que de verdad
   las distingue. */
.logros {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.1rem, 2vw, 1.6rem);
  margin-top: clamp(2.2rem, 3.6vw, 3rem);
}

/* ── 4 · EL PROGRAMA ─────────────────────────────────────────────────
   Campo morado, como la implementación: las dos secciones cuentan una
   secuencia y comparten campo por eso, no por turnarse el color. */
.programa {
  background: var(--morado);
  color: var(--papel);
  --acento: var(--menta);
  --foco: var(--menta);
}
.programa .titular-sec { color: var(--papel); }

/* --texto-suave es morado oscuro: sobre el morado no llega ni a 2:1.
   El mismo cambio que hace la implementación con el detalle del paso. */
.programa .parrafo { color: var(--l-94); }

/* ── EL RIEL DE LAS OCHO SESIONES ────────────────────────────────────

   Es el riel de «Cómo lo implementamos», y lo es porque las ocho
   sesiones son lo mismo que los seis hitos: una secuencia con orden
   propio, donde el sitio donde estás depende de por dónde has pasado.
   La línea no decora: es el curso, y lo que la recorre es el grupo
   avanzando. Sigue siendo la única línea de todo el sitio.

   EN VERTICAL EN TODAS LAS MEDIDAS, y no tumbado a partir de 1100 como
   el de la implementación. Allí son seis nombres de una palabra
   —Diagnóstico, Integraciones, Certificación— y caben en fila. Aquí
   son ocho de hasta ocho palabras: en fila darían ocho columnas de
   140 px y seis líneas cada una. En columna se lee como lo que es,
   un temario.

   La cifra y el nombre comparten cuerpo e interlínea, así que sus
   bases caen a la misma cota sin tener que compensar nada. De ahí
   salen también las dos medidas del riel: el tramo arranca a media
   cifra y mide lo que queda de paso más el hueco hasta el siguiente.

   Sincronía: siete cotas entre la 01 y la 08, --riel-dur/7 cada una,
   y cada paso enciende la suya con su propio índice --i.
   ──────────────────────────────────────────────────────────────────── */
.programa .riel {
  position: relative;
  margin: clamp(2rem, 3.4vw, 2.8rem) auto clamp(1.8rem, 3vw, 2.4rem);

  /* mide lo que mide su sesión más larga y no un ancho inventado: con
     un máximo fijo, el bloque quedaba con el flanco derecho vacío y se
     leía descentrado aunque estuviera centrado. */
  width: fit-content;
  max-width: 100%;

  --riel-dur: 2400ms;                              /* de la 01 a la 08 */
  --riel-cota: calc(var(--riel-dur) / 7);          /* siete tramos */
  --riel-grueso: 2px;
  --riel-gap: clamp(1.2rem, 2.2vw, 1.7rem);   /* lo que se ve de vía entre dos nodos */
  --riel-cifra: var(--t-sub);
  --riel-linea: 1.15;                              /* cifra y nombre, la misma */
  --riel-eje: calc(var(--riel-cifra) * 2.4);       /* la columna de la cifra */
}

.programa .riel__lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--riel-gap);
}

.programa .paso {
  position: relative;
  display: grid;
  grid-template-columns: var(--riel-eje) minmax(0, 1fr);
  column-gap: clamp(.6rem, 1.4vw, 1rem);
  row-gap: 0;
  align-items: start;
  justify-items: stretch;
  text-align: left;          /* un temario numerado se lee contra un eje */
  max-width: none;
  margin-inline: 0;
}

/* el índice de cada sesión: de él salen las ocho cotas del recorrido */
.programa .paso:nth-child(1) { --i: 0; }
.programa .paso:nth-child(2) { --i: 1; }
.programa .paso:nth-child(3) { --i: 2; }
.programa .paso:nth-child(4) { --i: 3; }
.programa .paso:nth-child(5) { --i: 4; }
.programa .paso:nth-child(6) { --i: 5; }
.programa .paso:nth-child(7) { --i: 6; }
.programa .paso:nth-child(8) { --i: 7; }

.programa .paso__cifra {
  position: relative;
  z-index: 1;                       /* la cifra interrumpe el riel */
  grid-column: 1;
  font-size: var(--riel-cifra);
  line-height: var(--riel-linea);
  text-align: center;
  background: var(--morado);        /* el papel de la sección recorta la vía */
  padding-block: 0;                 /* cuanto menos recorte, más vía se ve */
  color: var(--menta);
  transition: color 280ms var(--ease-out);
  transition-delay: calc(var(--riel-cota) * var(--i));
}

.programa .paso__nombre {
  grid-column: 2;
  font-size: var(--riel-cifra);
  line-height: var(--riel-linea);
  font-weight: 700;
  text-align: left;
  text-wrap: pretty;
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
  transition-delay: calc(var(--riel-cota) * var(--i));
}

/* — el tramo: ::before es la vía apagada, ::after la ya recorrida — */
.programa .paso::before,
.programa .paso::after {
  content: "";
  position: absolute;
  left: calc(var(--riel-eje) / 2 - var(--riel-grueso) / 2);
  top: calc(var(--riel-cifra) * var(--riel-linea) / 2);
  width: var(--riel-grueso);
  height: calc(100% + var(--riel-gap));
  border-radius: var(--riel-grueso);
}
.programa .paso::before { background: var(--l-41); }
.programa .paso::after {
  background: var(--m-42);
  transform-origin: top center;
  transition: transform var(--riel-cota) linear;
  transition-delay: calc(var(--riel-cota) * var(--i));
}
.programa .paso:last-child::before,
.programa .paso:last-child::after { content: none; }

/* — el estado de reposo existe SOLO con JS: sin él las ocho sesiones
     están encendidas desde el primer cuadro y el temario se lee entero — */
.con-js .programa .riel .paso::after { transform: scaleY(0); }
.con-js .programa .riel.se-enciende .paso::after { transform: scaleY(1); }
.con-js .programa .riel:not(.se-enciende) .paso__cifra { color: var(--l-72); }
.con-js .programa .riel:not(.se-enciende) .paso__nombre {
  opacity: 0;
  transform: translateY(10px);
}

/* — movimiento reducido: el riel está trazado y las ocho encendidas
     desde el principio. Nada se mueve. — */
@media (prefers-reduced-motion: reduce) {
  .con-js .programa .riel .paso::after,
  .con-js .programa .riel.se-enciende .paso::after { transform: none; transition: none; }
  .programa .paso__cifra,
  .con-js .programa .riel:not(.se-enciende) .paso__cifra {
    color: var(--menta);
    transition: none;
  }
  .programa .paso__nombre,
  .con-js .programa .riel:not(.se-enciende) .paso__nombre {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── EL RESULTADO FINAL ──────────────────────────────────────────────
   La lámina que se monta sobre el borde del campo, la misma de los
   seis beneficios de la portada. Aquí tiene una razón de más: el
   entregable del programa es literalmente lo que queda entre el
   temario y la inscripción. */
.flota.resultado {
  display: grid;
  justify-items: center;
  gap: clamp(.4rem, .9vw, .7rem);
  text-align: center;
}
.resultado .titular-tier { max-width: 24ch; }

/* ── 5 · FORMATO Y 6 · INSCRIPCIONES ─────────────────────────────────
   Las dos secciones son lo mismo —un dato y su rótulo, repetido— así
   que son un solo componente usado dos veces. El original los separa
   con filetes; aquí los separa el aire y el contraste entre el rótulo
   pequeño y su dato. */
.formato { background: var(--l-97); }

.datos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.4rem, 2.6vw, 2.2rem);
  margin-top: clamp(2.2rem, 3.6vw, 3rem);
}
.datos__par { text-align: center; }
.datos__dice {
  margin: .35rem auto 0;
  max-width: 34ch;
  font-size: var(--t-ficha);
  font-weight: 600;
  line-height: 1.35;
  color: var(--texto);
  text-wrap: pretty;
}

.inscripcion__ir { margin-top: clamp(2.2rem, 3.6vw, 3rem); }

/* ── DE 900 PARA ARRIBA ──────────────────────────────────────────────
   Hasta aquí todo iba en una columna. Con ancho de sobra, las rejas de
   texto se reparten y las secciones vuelven a medir una pantalla.
   Todas las alturas viven aquí dentro: por debajo de 900 manda el
   contenido, y eso ya lo dice `.seccion { min-height: 0 }`. */
@media (min-width: 900px) {

  .cubierta .entrada { max-width: 42ch; }

  .fuerzas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .conviccion { max-width: 52ch; }

  /* siete logros en dos columnas: el séptimo se queda solo en su fila,
     y va al centro con el ancho de sus hermanos —no estirado a lo
     ancho, que lo convertiría en otra cosa. Es el mismo arreglo que
     ya hacen los cinco mecanismos de integraciones. */
  .logros,
  .datos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 4vw, 3.6rem);
  }
  .logros > :last-child:nth-child(odd),
  .datos > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - clamp(2rem, 4vw, 3.6rem) / 2);
    justify-self: center;
  }

  /* El programa comparte pantalla con la lámina del resultado, que vive
     fuera de la sección para poder montarse sobre su borde. Se descuenta
     igual que en «Por qué»: el alto lo publica sitio.js en --alto-flota,
     y el valor de reserva es lo que mide la lámina en escritorio por si
     el guion no llega a correr. El aire va atado al alto de la ventana
     y no al ancho: ocho sesiones y un titular no caben con --pad-sec. */
  .seccion.programa {
    min-height: calc(
      100svh
      - var(--alto-flota, 210px)   /* la lámina, que va fuera de la sección */
      + var(--solape)              /* menos lo que ya se monta encima */
      - 8px                        /* holgura para los redondeos del clamp */
    );
    /* arriba, lo que mide la cabecera flotante más su holgura: con el
       --pad-sec de siempre el titular se le metía debajo cada vez que
       la sección cuadraba con la pantalla. Abajo, --solape y algo más:
       la lámina del resultado se monta sobre ese borde con un margen
       negativo de --solape, y con menos aire le caería encima a la
       última línea. */
    padding-block: clamp(88px, 10vh, 118px) calc(var(--solape) + clamp(24px, 3vh, 42px));
  }
}

/* la línea de datos del programa, bajo la entradilla de Educación:
   el mismo tono apagado que usa la página del programa */
/* La misma frase, el mismo ancho y el mismo quiebre que en la portada
   de Educación: quien baje hasta acá y luego entre al programa debe
   leer exactamente lo mismo. */
.edu-cta__entrada {
  max-width: 44ch;
  margin-inline: auto;
  text-wrap: pretty;
}

/* el botón cierra la sección: necesita su propio aire respecto a los
   temas, que ahora van justo encima */
.educacion .temas + .boton { margin-top: clamp(2.4rem, 4.4vw, 3.6rem); }