/* Landing pública. La base (tokens, tipografía, botones, cabecera) está en
   base.css, que se carga antes. Acá va sólo lo propio de la landing. */

/* ── EL héroe ───────────────────────────────────────────────────────────────
   Título arriba, la demo a todo el ancho de un marco al 80%, y el CTA abajo. */

.heroe {
  --ciclo: 12s;
  --alto-fila: 2.15rem;
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 6vw, 5rem);
  text-align: center;
  /* El lavado de documint, en nuestros tokens: un degradado tenue de lienzo a
     blanco que le da piso al titular sin dibujar nada. Encima, el halo verde
     de siempre y la grilla de la planilla en hairline — la misma idea que
     sostiene la caja de login (`.fondo-planilla` en base.css): el producto se
     presenta con una planilla detrás en las dos puntas del embudo. */
  background:
    radial-gradient(80% 55% at 50% 0%, rgba(15, 122, 82, .07), transparent 70%),
    repeating-linear-gradient(to right, rgba(19, 28, 24, .04) 0 1px, transparent 1px 8.5rem),
    linear-gradient(180deg, var(--lienzo) 0%, var(--blanco) 78%);
  background-size: 100% 100%, 100% 22rem, 100% 100%;
  background-repeat: no-repeat;
}

.heroe-cab { max-width: 46rem; margin: 0 auto clamp(2.25rem, 4.5vw, 3.5rem); padding-inline: var(--canal); }
.heroe h1 {
  font-size: clamp(2.2rem, 5vw, 3.9rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.05;
  text-wrap: balance;
}
.heroe h1 .apaga { color: var(--apagado); display: block; }
.heroe-bajada {
  margin: 1.15rem auto 0;
  max-width: 46ch;
  font-size: clamp(1.02rem, 1.4vw, 1.15rem);
  color: var(--cuerpo);
}

/* El marco de la demo: 80% del ancho, y la maquinaria ocupa el 100% de él. */
.heroe-marco {
  /* A todo el ancho: el panel verde corre de borde a borde, como los bloques
     de color de documint. Lo de adentro (planilla, hoja, progreso) sigue
     centrado con sus propios max-width. */
  width: 100%;
  margin: 0 auto;
}

/* El rótulo entre corchetes: la firma tipográfica del template. Mono y gris,
   con los corchetes como parte del texto — no una pastilla. */
.corchete {
  margin: 0 0 1.1rem;
  font-family: var(--mono);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--apagado);
}
.encabezado .corchete { margin-bottom: .9rem; }

/* Los destellos y los píxeles del héroe vivían acá. Se fueron con el
   degradado: el fondo pasó a ser el adorno y dos decoraciones compiten.
   Los .pixeles-color del CIERRE son otra pieza y siguen abajo. */

/* CTA doble ANTES del visual: el que llega decidido actúa sin scrollear, y la
   demo pasa a ser el argumento del que todavía duda. */
.heroe-acciones {
  display: flex;
  justify-content: center;
  gap: .8rem;
  flex-wrap: wrap;
  margin-top: 1.75rem;
}

.heroe-nota { margin: .9rem 0 0; font-size: .88rem; color: var(--apagado); }
.boton-grande { padding: .95rem 1.9rem; font-size: 1.02rem; border-radius: 9px; }

/* ── La maquinaria: planilla → pila de informes ─────────────────────────────
   Ciclo de 12s. El desfase va en los PORCENTAJES de los keyframes, con
   animation-delay:0 para todos, para que compartan una sola línea de tiempo y
   se vayan juntos. El índice lo pone el template en data-i.

   Ventanas: fila i activa desde 5%+(i-1)·11% durante ~9%; su tarjeta aterriza
   7% después; todo sostiene hasta 88% y sale en 88%→94%. */

.motor-paneles {
  display: grid;
  /* La planilla se acota: con el marco al 80% se estiraba a 700px y dejaba al
     documento como una estampilla. El par va centrado. */
  grid-template-columns: minmax(0, 34rem) auto;
  justify-content: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
  align-items: center;
  text-align: left;
}

/* ── El Excel ───────────────────────────────────────────────────────────────
   Acá la rejilla SÍ corresponde: es lo que lo hace reconocible al golpe de
   vista. Es lo contrario del papel milimetrado de fondo que se descartó. */

.xls {
  background: var(--blanco);
  border-radius: 10px;
  box-shadow: var(--sombra-media);
  overflow: hidden;
}
.xls-barra {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .85rem;
  background: #217346;          /* sólo como fondo, con texto blanco */
  color: var(--blanco);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.xls-barra svg { flex: none; }

.xls-hoja { position: relative; }

.xls-fila {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 3.6rem 5.5rem;
  height: var(--alto-fila);     /* fijo: de esto depende la cuenta del cursor */
}
.xls-fila > span {
  display: block;
  line-height: var(--alto-fila);
  padding: 0 .55rem;
  font-size: .78rem;
  border-right: 1px solid #E6E6E2;
  border-bottom: 1px solid #E6E6E2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xls-fila > span:last-child { border-right: 0; }

/* Encabezados de fila y columna, en gris como en la planilla real. */
.xls-letras > span, .xls-num {
  text-align: center;
  background: #F4F4F2;
  color: var(--apagado);
  font-family: var(--mono);
  font-size: .66rem;
}
.xls-encab > span:not(.xls-num) { font-weight: 600; background: #FBFBFA; }

/* La fila que se está procesando se tiñe. */
.xls-dato { animation: var(--ciclo) linear infinite; }
.xls-dato[data-i="1"] { animation-name: xf1; }
.xls-dato[data-i="2"] { animation-name: xf2; }
.xls-dato[data-i="3"] { animation-name: xf3; }
.xls-dato[data-i="4"] { animation-name: xf4; }
.xls-dato[data-i="5"] { animation-name: xf5; }
@keyframes xf1 { 0%,4%{background:transparent}  5%,14%{background:#E7F3EC} 16%,100%{background:transparent} }
@keyframes xf2 { 0%,15%{background:transparent} 16%,25%{background:#E7F3EC} 27%,100%{background:transparent} }
@keyframes xf3 { 0%,26%{background:transparent} 27%,36%{background:#E7F3EC} 38%,100%{background:transparent} }
@keyframes xf4 { 0%,37%{background:transparent} 38%,47%{background:#E7F3EC} 49%,100%{background:transparent} }
@keyframes xf5 { 0%,48%{background:transparent} 49%,58%{background:#E7F3EC} 60%,100%{background:transparent} }

/* El cursor: un solo rectángulo que se desliza de fila en fila. Las dos
   primeras filas son letras y encabezado, así que la fila de datos i está en
   el múltiplo (i + 1) del alto de fila. */
.xls-cursor {
  position: absolute;
  top: 0;
  left: 2rem;
  right: 0;
  height: var(--alto-fila);
  border: 2px solid #107C41;
  border-radius: 2px;
  pointer-events: none;
  opacity: 0;
  animation: xcursor var(--ciclo) cubic-bezier(.4,.5,.2,1) infinite;
}
@keyframes xcursor {
  0%, 3%    { opacity: 0; transform: translateY(calc(var(--alto-fila) * 2)); }
  5%, 14%   { opacity: 1; transform: translateY(calc(var(--alto-fila) * 2)); }
  16%, 25%  { opacity: 1; transform: translateY(calc(var(--alto-fila) * 3)); }
  27%, 36%  { opacity: 1; transform: translateY(calc(var(--alto-fila) * 4)); }
  38%, 47%  { opacity: 1; transform: translateY(calc(var(--alto-fila) * 5)); }
  49%, 58%  { opacity: 1; transform: translateY(calc(var(--alto-fila) * 6)); }
  62%, 100% { opacity: 0; transform: translateY(calc(var(--alto-fila) * 6)); }
}

/* ── La pila de documentos ──────────────────────────────────────────────────
   Absolutas dentro de un contenedor de alto fijo: cada tarjeta aterriza
   corrida respecto de la anterior y con z-index mayor, así la nueva queda
   arriba y las de abajo asoman. */

/* Ancho fijo, porque --escala-hoja tiene que casar con él: 794px (210mm a
   96dpi) × .378 ≈ 300px. Con ancho fluido la hoja no encajaría. */
/* Ancho fijo, porque --escala-hoja tiene que casar con él: 794px (210mm a
   96dpi) × .484 ≈ 384px. Con ancho fluido la hoja no encajaría. */
.pila { position: relative; width: 24rem; height: 20.5rem; --escala-hoja: .484; }
.carta {
  position: absolute;
  /* right:26px reserva el corrimiento de la pila: la quinta tarjeta se desplaza
     24px y con inset-inline:0 se salía del viewport en móvil. */
  left: 0;
  top: 0;
  width: 24rem;      /* 384px — ver --escala-hoja */
  background: var(--blanco);
  border-radius: 10px;
  box-shadow: var(--sombra-alta);
  overflow: hidden;
  opacity: 0;
  animation: var(--ciclo) cubic-bezier(.2,.72,.3,1) infinite;
}
.carta[data-i="1"] { z-index: 1; animation-name: c1; }
.carta[data-i="2"] { z-index: 2; animation-name: c2; }
.carta[data-i="3"] { z-index: 3; animation-name: c3; }
.carta[data-i="4"] { z-index: 4; animation-name: c4; }
.carta[data-i="5"] { z-index: 5; animation-name: c5; }

/* Entra desde la planilla (izquierda y abajo) y se asienta en su lugar de la
   pila. Las cinco se van juntas en 88%→94%. */
@keyframes c1 {
  0%,8%   { opacity:0; transform: translate(-48px, 26px) scale(.92) rotate(-7deg); }
  13%,88% { opacity:1; transform: translate(0, 0) scale(1) rotate(-2.2deg); }
  94%,100%{ opacity:0; transform: translate(0, 12px) scale(.97) rotate(-2.2deg); }
}
@keyframes c2 {
  0%,19%  { opacity:0; transform: translate(-48px, 37px) scale(.92) rotate(-7deg); }
  24%,88% { opacity:1; transform: translate(6px, 11px) scale(1) rotate(-1.1deg); }
  94%,100%{ opacity:0; transform: translate(6px, 23px) scale(.97) rotate(-1.1deg); }
}
@keyframes c3 {
  0%,30%  { opacity:0; transform: translate(-48px, 48px) scale(.92) rotate(-7deg); }
  35%,88% { opacity:1; transform: translate(12px, 22px) scale(1) rotate(0deg); }
  94%,100%{ opacity:0; transform: translate(12px, 34px) scale(.97) rotate(0deg); }
}
@keyframes c4 {
  0%,41%  { opacity:0; transform: translate(-48px, 59px) scale(.92) rotate(-7deg); }
  46%,88% { opacity:1; transform: translate(18px, 33px) scale(1) rotate(1.1deg); }
  94%,100%{ opacity:0; transform: translate(18px, 45px) scale(.97) rotate(1.1deg); }
}
@keyframes c5 {
  0%,52%  { opacity:0; transform: translate(-48px, 70px) scale(.92) rotate(-7deg); }
  57%,88% { opacity:1; transform: translate(24px, 44px) scale(1) rotate(2.2deg); }
  94%,100%{ opacity:0; transform: translate(24px, 56px) scale(.97) rotate(2.2deg); }
}

/* La tarjeta ES una hoja: el informe renderizado por el motor, a escala, con
   desvanecido abajo. La hoja va en position:absolute para que sus 210mm no
   entren en el cálculo de layout — así no hace falta compensar con márgenes
   negativos como en .hoja-real, y el ancho lo manda la tarjeta. */

.carta-hoja {
  position: relative;
  height: 17.5rem;
  overflow: hidden;
  background: var(--blanco);
}
/* El desvanecido arranca por debajo de la última línea del informe: con 3.5rem
   se comía el «Validado por…». */
.carta-hoja::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2rem;
  background: linear-gradient(to bottom, rgba(252, 254, 253, 0), var(--blanco) 92%);
}
.hoja-informe {
  position: absolute;
  top: 0;
  left: 0;
  width: 210mm;
  min-height: 297mm;
  padding: 11mm 10mm;
  background: var(--blanco);
  transform: scale(var(--escala-hoja));
  transform-origin: top left;
}

/* ── La barra de progreso ───────────────────────────────────────────────────
   Va pegada a la maquinaria, no al pie de la sección: tiene que leerse junto
   con lo que está pasando. Superficie propia y sombra para que se despegue. */

.progreso {
  max-width: 60rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: 1.1rem;
  padding: .55rem .9rem;
  background: var(--blanco);
  border-radius: 999px;
  box-shadow: var(--sombra-media);
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--cuerpo);
}

.progreso-punto {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--verde);
  flex: none;
  animation: latido var(--ciclo) ease-in-out infinite;
}
@keyframes latido {
  0%, 4%    { opacity: .3; }
  8%, 58%   { opacity: 1; }
  62%, 100% { opacity: 1; }
}

/* Los textos van superpuestos en la misma caja, así que sus ventanas NO se
   pueden solapar: si se cruzan durante el fundido se leen los dos encima.
   Cada uno llega a 0 exactamente donde el siguiente empieza a subir. */
.progreso-texto { position: relative; flex: 1; min-width: 0; height: 1.3rem; }
.progreso-texto > span {
  position: absolute;
  inset: 0 auto auto 0;
  display: flex;
  align-items: center;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0;
  animation: var(--ciclo) linear infinite;
}
.progreso-texto b { color: var(--tinta); font-weight: 600; }
.progreso-texto > span[data-i="1"] { animation-name: e1; }
.progreso-texto > span[data-i="2"] { animation-name: e2; }
.progreso-texto > span[data-i="3"] { animation-name: e3; }
.progreso-texto > span[data-i="4"] { animation-name: e4; }
.progreso-texto > span[data-i="5"] { animation-name: e5; }
.progreso-texto .estado-fin { animation-name: efin; color: var(--verde); font-weight: 600; }
@keyframes e1 { 0%,4%{opacity:0}  5%,13%{opacity:1} 14%,100%{opacity:0} }
@keyframes e2 { 0%,14%{opacity:0} 16%,24%{opacity:1} 25%,100%{opacity:0} }
@keyframes e3 { 0%,25%{opacity:0} 27%,35%{opacity:1} 36%,100%{opacity:0} }
@keyframes e4 { 0%,36%{opacity:0} 38%,46%{opacity:1} 47%,100%{opacity:0} }
@keyframes e5 { 0%,47%{opacity:0} 49%,57%{opacity:1} 58%,100%{opacity:0} }
@keyframes efin { 0%,58%{opacity:0} 62%,88%{opacity:1} 94%,100%{opacity:0} }

.progreso-barra {
  width: 4.25rem;
  height: 5px;
  border-radius: 3px;
  background: var(--raya);
  overflow: hidden;
  flex: none;
}
.progreso-barra i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: var(--verde);
  animation: avance var(--ciclo) linear infinite;
}
/* Cinco escalones, uno por fila; vuelve a cero recién al reiniciar el lote. */
@keyframes avance {
  0%, 5%    { width: 0; }
  14%       { width: 20%; }
  25%       { width: 40%; }
  36%       { width: 60%; }
  47%       { width: 80%; }
  58%, 88%  { width: 100%; }
  94%, 100% { width: 0; }
}


/* ── Vida en las miniaturas ─────────────────────────────────────────────────
   «Cómo funciona» y «Entrada de datos» son dos bloques seguidos con la misma
   pinta, y es justo donde se abandona el scroll. Cada miniatura hace en bucle
   lo que su paso describe: se marca el dato, se recorre la planilla, caen los
   documentos. Todo CSS, todo apagable con prefers-reduced-motion. */

/* 1 · el dato que se marca sobre la hoja */
.dib-token {
  animation: marcar 4.5s ease-in-out infinite;
}
@keyframes marcar {
  0%, 12%   { transform: scale(.86); opacity: .35; }
  22%, 62%  { transform: scale(1);   opacity: 1; }
  74%, 100% { transform: scale(.86); opacity: .35; }
}
/* Las líneas de la hoja se corren un pelo, como si el texto se recompusiera. */
.dib-hoja .dib-linea:nth-child(4) { animation: reacomodar 4.5s ease-in-out infinite; }
.dib-hoja .dib-linea:nth-child(5) { animation: reacomodar 4.5s ease-in-out infinite .12s; }
@keyframes reacomodar {
  0%, 18%   { width: 100%; }
  30%, 66%  { width: 74%; }
  80%, 100% { width: 100%; }
}
.dib-hoja .dib-linea.corta:nth-child(5) { }

/* 2 · el recorrido por la planilla, fila por fila */
.dib-grilla i, .dib-planilla i { animation: 5s linear infinite; }
.dib-grilla i:nth-child(-n+3),  .dib-planilla i:nth-child(n+4):nth-child(-n+6)  { animation-name: recorrer-1; }
.dib-grilla i:nth-child(n+4):nth-child(-n+6),  .dib-planilla i:nth-child(n+7):nth-child(-n+9)  { animation-name: recorrer-2; }
.dib-grilla i:nth-child(n+7):nth-child(-n+9),  .dib-planilla i:nth-child(n+10):nth-child(-n+12) { animation-name: recorrer-3; }
.dib-grilla i:nth-child(n+10) { animation-name: recorrer-4; }
/* La fila de encabezado de la planilla no participa del recorrido. */
.dib-planilla i.cab { animation: none; }

@keyframes recorrer-1 { 0%,4%{background: var(--blanco)} 8%,20%{background:var(--paso-color,var(--verde))} 26%,100%{background: var(--blanco)} }
@keyframes recorrer-2 { 0%,24%{background: var(--blanco)} 28%,40%{background:var(--paso-color,var(--verde))} 46%,100%{background: var(--blanco)} }
@keyframes recorrer-3 { 0%,44%{background: var(--blanco)} 48%,60%{background:var(--paso-color,var(--verde))} 66%,100%{background: var(--blanco)} }
@keyframes recorrer-4 { 0%,64%{background: var(--blanco)} 68%,80%{background:var(--paso-color,var(--verde))} 86%,100%{background: var(--blanco)} }

/* 3 · los documentos que van cayendo sobre la pila */
.dib-pila i { animation: caer 4.5s cubic-bezier(.2,.7,.3,1) infinite; }
.dib-pila i:nth-child(1) { animation-delay: 0s; }
.dib-pila i:nth-child(2) { animation-delay: .35s; }
.dib-pila i:nth-child(3) { animation-delay: .7s; }
@keyframes caer {
  0%, 8%    { opacity: 0; }
  20%, 82%  { opacity: 1; }
  92%, 100% { opacity: 0; }
}
/* Cada hoja mantiene su posición de reposo mientras aparece. */
.dib-pila i:nth-child(1) { --reposo: translate(-8px, -6px) rotate(-5deg); }
.dib-pila i:nth-child(2) { --reposo: translate(0, 0) rotate(1deg); }
.dib-pila i:nth-child(3) { --reposo: translate(8px, 6px) rotate(5deg); }
.dib-pila i { transform: var(--reposo); }

/* Formulario: los campos se completan y el botón se aprieta. */
.dib-form i.campo { position: relative; overflow: hidden; }
.dib-form i.campo::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--operaciones);
  opacity: .5;
  animation: completar 5s ease-in-out infinite;
}
.dib-form i.campo.corto::after { animation-delay: .5s; }
@keyframes completar {
  0%, 6%    { width: 0; }
  26%, 62%  { width: 100%; }
  74%, 100% { width: 0; }
}
.dib-form i.enviar { animation: apretar 5s ease-in-out infinite; }
@keyframes apretar {
  0%, 64%   { transform: scale(1);   filter: none; }
  70%       { transform: scale(.92); filter: brightness(.8); }
  78%, 100% { transform: scale(1);   filter: none; }
}

/* API: el cursor que parpadea al final de la llamada. */
/* ── Entrada al hacer scroll ────────────────────────────────────────────────
   Con `animation-timeline: view()`: avanza según la posición del elemento en
   el scroll, sin una línea de JavaScript.

   Anima SÓLO el desplazamiento, nunca la opacidad. Es a propósito: si la línea
   de tiempo no se comporta como se espera —navegador raro, motor throttleado,
   un bug mío— con opacidad el peor caso es una sección invisible, que en una
   landing es catastrófico. Sin opacidad el peor caso es que una tarjeta quede
   20px más abajo, que no lo nota nadie.

   Va dentro de @supports: donde no está soportado (Firefox, Safari viejos) no
   pasa nada y todo se ve normal. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-revelar] {
      animation: asomar linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 26%;
    }
    /* El escalonado va escrito literal: animation-range NO admite calc() que
       mezcle el nombre del rango con un porcentaje —`calc(entry 2% + …)` es
       sintaxis inválida y el navegador descarta la declaración sin avisar. */
    [data-revelar]:nth-child(2) { animation-range: entry 8%  cover 32%; }
    [data-revelar]:nth-child(3) { animation-range: entry 14% cover 38%; }
  }
}

@keyframes asomar {
  from { transform: translateY(22px); }
  to   { transform: none; }
}

/* ── Sin movimiento ─────────────────────────────────────────────────────────
   Queda el estado final, que es el que comunica: la pila armada, el cursor en
   la última fila y el progreso completo. */

@media (prefers-reduced-motion: reduce) {
  .xls-dato, .xls-cursor, .carta, .progreso-texto > span,
  .progreso-punto, .progreso-barra i,
  .progreso-texto .estado-fin,
  .formatos-pista { animation: none; }
  .rueda { transition: none; }
  .rueda-texto { transition: none; }
  .dib-token, .dib-hoja .dib-linea, .dib-grilla i, .dib-planilla i,
  .dib-pila i, .dib-form i.campo::after, .dib-form i.enviar,
  .dib-api::after,

  /* Superpuestas y sin rotación se taparían: vuelven al flujo, las cuatro, y
     la frase baja al tamaño de un subtítulo porque ahora conviven. */
  .garantia-texto { margin-inline: 0; font-size: .92rem; }

  /* Sin movimiento las miniaturas quedan en su estado con sentido. */
  .dib-grilla i.viva, .dib-planilla i.viva { background: var(--paso-color, var(--verde)); opacity: .8; }
  .dib-form i.campo::after { width: 100%; }
  .dib-api::after { opacity: 1; }
  [data-revelar] { transform: none; animation: none; }


  .carta { opacity: 1; }
  .carta[data-i="1"] { transform: translate(0, 0)      rotate(-2.2deg); }
  .carta[data-i="2"] { transform: translate(6px, 11px)  rotate(-1.1deg); }
  .carta[data-i="3"] { transform: translate(12px, 22px) rotate(0deg); }
  .carta[data-i="4"] { transform: translate(18px, 33px) rotate(1.1deg); }
  .carta[data-i="5"] { transform: translate(24px, 44px) rotate(2.2deg); }
  .xls-cursor { opacity: 1; transform: translateY(calc(var(--alto-fila) * 6)); }
  .progreso-texto > span { opacity: 0; }
  .progreso-texto .estado-fin { opacity: 1; }
  .progreso-barra i { width: 100%; }

  .boton:hover, .tarjeta-muestra:hover { transform: none; }
  * { transition-duration: .01ms !important; }
}

/* ── Confianza: una promesa a la vez ────────────────────────────────────────
   Cuatro promesas turnándose en el mismo lugar, al tamaño de un titular chico.
   La frase es el contenido de la franja, no el pie de otra cosa.

   Antes acá había un contador («17» grande, etiqueta al costado) en una
   rejilla auto/1px/1fr. Se fue por dos motivos: el molde «número enorme +
   etiqueta chica» es el cliché de portada de todo SaaS, y esa rejilla dejaba
   el número pegado a la izquierda con un hueco muerto a la derecha, que es el
   descentrado que se veía. Ahora es una sola columna centrada.

   Peor todavía: el conteo colgaba de animation-timeline: view(), así que el
   número dependía de dónde parara el scroll y llegó a mostrar 13 con el dato
   real en 17. Al scroll sólo se le atan transform y opacity, nunca un valor. */

/* ── La diferencia: el panel de tres celdas ─────────────────────────────────
   Una caja reglada partida en tres. Las dos primeras celdas PLANAS, separadas
   por hairlines; la tercera ELEVADA como tarjeta blanca que sobresale del
   marco. El contraste plano/elevado hace el argumento solo. */

.diferencia { padding-block: clamp(3.5rem, 7vw, 5.5rem); }

.panel-dif {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 68rem;
  margin: 0 auto;
  border: 1px solid var(--raya);
  border-radius: 4px;
  background: color-mix(in srgb, var(--lienzo) 55%, var(--blanco));
}

.dif-celda { padding: 2rem 1.9rem 2.1rem; }
.dif-celda + .dif-celda { border-left: 1px solid var(--raya); }
.dif-celda h3 { font-size: 1.2rem; font-weight: 650; margin: 3.2rem 0 .9rem; }
.dif-celda ul { list-style: none; margin: 0; padding: 0; }
.dif-celda li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: .55rem;
  color: var(--cuerpo);
  font-size: .95rem;
}
.dif-celda li::before {
  content: "—";
  position: absolute; left: 0;
  color: var(--apagado);
}

/* El ✕ / ✓ como chip cuadrado, igual que en el template: los malos en línea
   sobre fondo plano, el bueno en tinta sobre la tarjeta elevada. */
.dif-icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem;
  border-radius: 8px;
  border: 1px solid var(--raya);
  background: var(--blanco);
  color: var(--tinta);
  font-size: .95rem;
  font-weight: 700;
}

/* La celda buena: tarjeta blanca que SOBRESALE del marco reglado. */
.dif-buena {
  background: var(--blanco);
  border: 1px solid var(--raya);
  border-radius: 16px;
  box-shadow: var(--sombra-alta);
  margin: -0.85rem -0.85rem -0.85rem 0;
}
.dif-celda + .dif-buena { border-left: 1px solid var(--raya); }
.dif-buena li { color: var(--tinta); }
.dif-buena li::before { content: "✦"; color: var(--verde); font-size: .7rem; top: .2em; }
.dif-tilde { background: var(--tinta); color: var(--blanco); border-color: var(--tinta); }

@media (max-width: 860px) {
  .panel-dif { grid-template-columns: minmax(0, 1fr); }
  .dif-celda + .dif-celda { border-left: 0; border-top: 1px solid var(--raya); }
  .dif-buena { margin: 0 -0.55rem -0.55rem; }
  .dif-celda h3 { margin-top: 1rem; }
}

/* ── FAQ: <details> reglado ─────────────────────────────────────────────────
   Cada pregunta es una fila de la misma caja reglada. El «+» en mono rota a
   «×» al abrir — el acordeón lo maneja el navegador, sin JS. */

.faq { padding-block: clamp(3.5rem, 7vw, 5.5rem); }

/* Como en el template: SIN caja. Dos columnas abiertas, la pregunta como
   título mediano, el ícono al borde derecho de la columna, y la respuesta
   suelta debajo. La jerarquía la hace el espacio, no un marco. */
.faq-lista {
  max-width: 68rem;
  margin: 0 auto;
  columns: 2;
  column-gap: clamp(2.5rem, 6vw, 5rem);
}
.faq-item {
  break-inside: avoid;
  margin-bottom: 1rem;
  border: 1px solid var(--raya);
  border-radius: 12px;
  background: var(--blanco);
  padding: 1.2rem 1.4rem;
}
.faq-item summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.25rem;
  cursor: pointer;
  list-style: none;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  font-weight: 650;
  letter-spacing: -.015em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i {
  font-family: var(--mono);
  font-style: normal;
  font-size: 1.05rem;
  color: var(--apagado);
  flex: none;
}
/* El ícono del template: «+» cerrada, «—» abierta. Dibujado por CSS y no
   tipeado en el HTML, así el estado y el símbolo no pueden desincronizarse. */
.faq-item summary i::before { content: "+"; }
.faq-item[open] summary i::before { content: "—"; }
.faq-item > p {
  margin: .8rem 0 0;
  max-width: 52ch;
  color: var(--cuerpo);
  font-size: .96rem;
  line-height: 1.55;
}
.faq-item summary:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }

/* ── Cómo funciona ──────────────────────────────────────────────────────────
   Tarjetas con una miniatura por paso, en el mismo lenguaje visual del héroe:
   una hoja con su token, la grilla de la planilla y la pila de documentos. */

/* ── El taller: el «How It Works» de Verseo ─────────────────────────────────
   Tres tarjetas de paso a la izquierda y un panel con el visual del paso
   elegido a la derecha. La tarjeta activa es blanca y elevada; las otras,
   planas y apagadas. Todo con radios: cero JS, como el carrusel. */

.taller {
  display: grid;
  grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: stretch;
  max-width: 68rem;
  margin: 0 auto;
}

.taller-radio { position: absolute; opacity: 0; pointer-events: none; }

.taller-pasos { display: flex; flex-direction: column; gap: .9rem; }

.tpaso {
  display: block;
  padding: 1.4rem 1.5rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 16px;
  cursor: pointer;
  transition: background .25s, box-shadow .25s, border-color .25s, opacity .25s;
  opacity: .55;
}
.tpaso h3 { font-size: 1.25rem; font-weight: 650; margin: .8rem 0 .4rem; }
.tpaso p { margin: 0; color: var(--cuerpo); font-size: .96rem; }

/* El chip «PASO N»: mono, esquinas chicas. Apagado de fábrica; en tinta con
   texto claro cuando su paso es el elegido — el chip oscuro del template. */
.tpaso-chip {
  display: inline-block;
  padding: .3rem .6rem;
  border-radius: 6px;
  background: var(--lienzo);
  color: var(--apagado);
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: background .25s, color .25s;
}

#paso-r1:checked ~ .taller-pasos .tpaso-1,
#paso-r2:checked ~ .taller-pasos .tpaso-2,
#paso-r3:checked ~ .taller-pasos .tpaso-3 {
  opacity: 1;
  background: var(--blanco);
  border-color: var(--raya);
  box-shadow: var(--sombra-media);
}
#paso-r1:checked ~ .taller-pasos .tpaso-1 .tpaso-chip,
#paso-r2:checked ~ .taller-pasos .tpaso-2 .tpaso-chip,
#paso-r3:checked ~ .taller-pasos .tpaso-3 .tpaso-chip {
  background: var(--tinta);
  color: var(--blanco);
}

/* Que el teclado también llegue: el foco del radio se dibuja sobre su tarjeta. */
#paso-r1:focus-visible ~ .taller-pasos .tpaso-1,
#paso-r2:focus-visible ~ .taller-pasos .tpaso-2,
#paso-r3:focus-visible ~ .taller-pasos .tpaso-3 {
  outline: 2px solid var(--verde); outline-offset: 2px;
}

/* El panel: la superficie reglada donde vive el visual del paso. El fondo
   lleva la grilla de cajitas del template, en hairline. */
.taller-panel {
  position: relative;
  min-height: 24rem;
  border: 1px solid var(--raya);
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(90% 90% at 70% 15%, color-mix(in srgb, var(--operaciones) 9%, transparent), transparent 70%),
    radial-gradient(80% 80% at 15% 90%, color-mix(in srgb, var(--verde) 8%, transparent), transparent 65%),
    repeating-linear-gradient(to right, transparent 0 71px, var(--raya) 71px 72px),
    repeating-linear-gradient(to bottom, transparent 0 71px, var(--raya) 71px 72px),
    var(--blanco);
}

.tvista {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}
.tvista > :first-child { transform: scale(3); }

/* Dentro del panel, los dibujos suben de volumen: más grandes (la escala de
   arriba) y con los acentos SATURADOS en vez de los tenues. El alcance es
   sólo .tvista a propósito — en las celdas de las vías los mismos dibujos
   siguen chicos y calmos, porque ahí acompañan y acá SON el contenido. */
.tvista .dib-hoja { box-shadow: 0 2px 10px rgba(23,23,26,.18); }
.tvista .dib-hoja .dib-linea { background: color-mix(in srgb, var(--operaciones) 30%, #E4E4E0); }
.tvista .dib-token {
  background: var(--verde);
  color: var(--blanco);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--verde) 40%, transparent);
}
.tvista .dib-planilla { background: color-mix(in srgb, var(--verde) 28%, #D8E4DE); }
.tvista .dib-planilla i.viva { background: var(--verde); opacity: 1; }
.tvista .dib-planilla i.cab { background: color-mix(in srgb, var(--verde) 55%, var(--blanco)); }
.tvista .dib-pila i { box-shadow: 0 2px 10px rgba(23,23,26,.2); }
.tvista .dib-pila i:nth-child(1) { background: color-mix(in srgb, var(--operaciones) 14%, var(--blanco)); }
.tvista .dib-pila i:nth-child(2) { background: color-mix(in srgb, var(--verde) 12%, var(--blanco)); }
.tvista .dib-pila i:nth-child(3) { background: color-mix(in srgb, var(--comunicacion) 16%, var(--blanco)); }

#paso-r1:checked ~ .taller-panel .tvista-1,
#paso-r2:checked ~ .taller-panel .tvista-2,
#paso-r3:checked ~ .taller-panel .tvista-3 { opacity: 1; transform: none; }

/* Los chips de estado que flotan sobre el visual, como en el template. */
.tchip {
  position: absolute;
  padding: .4rem .7rem;
  border: 1px solid var(--raya);
  border-radius: 8px;
  background: var(--blanco);
  box-shadow: var(--sombra-baja);
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--cuerpo);
  white-space: nowrap;
}
.tchip-a { right: 12%; top: 22%; transform: none !important; }
.tchip-b { left: 12%; bottom: 20%; }
/* Arriba a la derecha: abajo pisaba el botón verde de descarga de la
   escena nueva del paso 3. */
.tchip-c { right: 12%; top: 20%; }

@media (max-width: 860px) {
  .taller { grid-template-columns: minmax(0, 1fr); }
  .taller-panel { min-height: 17rem; }
  .tvista > :first-child { transform: scale(2); }
}

/* 1 · una hoja con un dato marcado */
.dib-hoja {
  width: 5.75rem; padding: .55rem .5rem;
  background: var(--blanco); border-radius: 3px;
  box-shadow: 0 1px 4px rgba(23,23,26,.14);
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
}
.dib-linea { display: block; height: 3px; width: 100%; border-radius: 2px; background: #E4E4E0; }
.dib-linea.corta { width: 62%; }
.dib-token {
  font-family: var(--mono); font-style: normal; font-size: .46rem;
  padding: .1rem .3rem; border-radius: 3px;
  background: var(--verde-tenue); color: var(--verde);
}
/* 2 · la grilla de la planilla, con una fila encendida */
.dib-grilla {
  display: grid; grid-template-columns: repeat(3, 1.75rem); gap: 2px;
  padding: 3px; background: #DFE6EC; border-radius: 3px;
}
.dib-grilla i { display: block; height: .95rem; background: var(--blanco); }
.dib-grilla i.viva { background: var(--operaciones); opacity: .78; }
/* 3 · la pila de documentos */
.dib-pila { position: relative; width: 4.8rem; height: 3.9rem; }
.dib-pila i {
  position: absolute; inset: 0; border-radius: 3px;
  background: var(--blanco); box-shadow: 0 1px 4px rgba(23,23,26,.16);
}
.dib-pila i:nth-child(1) { transform: translate(-8px, -6px) rotate(-5deg); }
.dib-pila i:nth-child(2) { transform: translate(0, 0) rotate(1deg); }
.dib-pila i:nth-child(3) { transform: translate(8px, 6px) rotate(5deg); background: color-mix(in srgb, var(--legales) 10%, var(--blanco)); }

/* ── Entrada de datos ───────────────────────────────────────────────────────
   Lista, no rejilla: «Cómo funciona» ya es una rejilla de tres tarjetas justo
   arriba, y dos rejillas idénticas seguidas se leen como la misma sección
   repetida. Acá cada vía es una fila: miniatura, texto y el dato al costado. */

.vias {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 68rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--raya);
  border-radius: 4px;
  background: var(--blanco);
}
.via { padding: 1.9rem 1.8rem 2rem; display: flex; flex-direction: column; }
.via + .via { border-left: 1px solid var(--raya); }
.via-1 { --via-color: var(--verde); }
.via-2 { --via-color: var(--operaciones); }
.via-3 { --via-color: var(--comunicacion); }

/* El número editorial del template: 001 en mono grande y apagado, con el
   dibujo de la vía en la esquina opuesta. */
.via-cab {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.6rem;
}
.via-numero {
  font-family: var(--mono);
  font-size: 1.9rem;
  font-weight: 500;
  line-height: 1;
  color: var(--apagado);
  opacity: .55;
}
.via-dibujo {
  display: flex; align-items: center; justify-content: center;
  width: 5.5rem; height: 4.25rem;
  flex: none;
  border-radius: 10px;
  background: color-mix(in srgb, var(--via-color) 9%, var(--blanco));
}

.via h3 { font-size: 1.15rem; font-weight: 650; margin-bottom: .4rem; }
.via p { margin: 0; color: var(--cuerpo); font-size: .95rem; }

/* El dato concreto, como chip mono al pie de la celda. Va calificado con .via
   por el choque de especificidad ya documentado acá: `.via p` (0,1,1) le gana
   a `.via-detalle` (0,1,0) y se comería el color, el margen y el cuerpo. */
.via .via-detalle {
  align-self: flex-start;
  margin-top: 1.1rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--via-color) 10%, var(--blanco));
  color: var(--via-color);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .03em;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .vias { grid-template-columns: minmax(0, 1fr); }
  .via + .via { border-left: 0; border-top: 1px solid var(--raya); }
}

/* ── Las miniaturas de cada vía ─────────────────────────────────────────── */

/* 1 · la planilla, con una fila resaltada */
.dib-planilla {
  display: grid;
  grid-template-columns: repeat(3, 1.5rem);
  gap: 2px;
  padding: 3px;
  background: #D8E4DE;
  border-radius: 3px;
}
.dib-planilla i { display: block; height: .7rem; background: var(--blanco); }
.dib-planilla i.cab { background: #BCCFC7; }
.dib-planilla i.viva { background: var(--verde); opacity: .8; }

/* 2 · el formulario, con su botón */
.dib-form {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 4.5rem;
  padding: .5rem;
  background: var(--blanco);
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(23, 23, 26, .14);
}
.dib-form i { display: block; height: 6px; border-radius: 2px; background: #E2E8EF; }
.dib-form i.corto { width: 65%; }
.dib-form i.enviar { height: 10px; width: 50%; background: var(--operaciones); }

/* 3 · la llamada, tal cual es */
/* 3 · la API: una petición que sale y una respuesta que vuelve.
   Era el texto «POST /v1/documents» con nowrap dentro de una caja de ancho
   fijo: en móvil se salía por la derecha y tapaba el párrafo. Un ancho fijo y
   un texto que no se puede cortar no conviven. */
.dib-api {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 3.6rem;
  padding: .5rem;
  border-radius: 6px;
  background: var(--tinta);
}
.dib-api i {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: #4A4A52;
}
.dib-api i.corta { width: 60%; }
/* La respuesta llega después de la petición: por eso el retraso. */
.dib-api i.responde {
  width: 45%;
  margin-left: auto;
  background: var(--comunicacion);
  animation: responder 3.2s ease-in-out infinite;
}
@keyframes responder {
  0%, 30%   { opacity: 0; transform: translateX(6px); }
  45%, 80%  { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: translateX(6px); }
}

/* ── Formatos, al pie de entrada de datos ───────────────────────────────────
   Fila fija, no marquesina: el formato importa cuando se habla de cómo entran
   los datos, no como argumento de portada. Se nombran los productos, nunca sus
   logotipos — la guía de Microsoft prohíbe los íconos y permite el nombre. */

/* Los formatos como cinta corrida de «logos». Cada uno es un lockup: el
   glifo cuadrado con la sigla (como ícono de app) y el nombre en negrita
   apretada al lado. Sin pill: los logos van sueltos, como en cualquier tira
   de logos. La pista lleva DOS copias idénticas y se desplaza -50%: cuando
   la primera salió entera, la segunda está exactamente donde arrancó la
   primera, y el ciclo no salta. */
.formatos-marquee {
  max-width: 64rem;
  margin: 2.75rem auto 0;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.formatos-pista {
  display: flex;
  width: max-content;
  animation: formatos-correr 30s linear infinite;
}
.formatos-marquee:hover .formatos-pista { animation-play-state: paused; }
@keyframes formatos-correr { to { transform: translateX(-50%); } }

.formatos-grupo {
  display: flex;
  align-items: center;
  gap: clamp(2.75rem, 6vw, 4.5rem);
  padding-right: clamp(2.75rem, 6vw, 4.5rem);
  flex: none;
}

.marca-formato { display: inline-flex; align-items: center; gap: .55rem; }
.marca-glifo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem;
  border-radius: 7px;
  background: var(--chip);
  color: var(--blanco);
  font-family: var(--mono);
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.marca-nombre {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--cuerpo);
  white-space: nowrap;
}

.formatos-pie {
  margin: 1.1rem 0 0;
  text-align: center;
  font-size: .9rem;
  color: var(--apagado);
}

/* ── Plantillas listas: el carrusel-rueda ───────────────────────────────────
   Los documentos van pegados a una rueda cuyo pivote está muy por debajo de
   la ventana. Cambiar de plantilla ROTA la rueda (sentido horario) y el
   documento elegido llega a la única posición que la ventana muestra: arriba.

   La geometría que hace que sólo se vea el de arriba: el vecino está a 60°, o
   sea con su centro a R·sen60 del eje. Para que quede afuera de la ventana
   tiene que cumplirse

       R · 0,866  −  (ancho del item / 2)  >  ancho de la ventana / 2

   Con R = 54rem, item de 36rem y ventana de 46rem: 46,8 − 18 = 28,8 > 23. ✓
   El ALTO del item no entra en la cuenta: el vecino queda tapado por el
   costado, no por arriba.

   ESA DESIGUALDAD ES LA TRAMPA. El 29/08 se agrandó la hoja para que se lea
   —era el pedido— y agrandar el item acerca al vecino al borde: con el radio
   viejo de 48rem el margen quedaba en 0,6rem y el documento de al lado
   asomaba. Si volvés a tocar el ancho del item, recalculá R.

   Un item queda derecho cuando su ángulo y el giro de la rueda suman 0; en
   tránsito se inclina, que es el gesto. */

.carrusel-rueda { position: relative; max-width: 58rem; margin: 0 auto; }
.carrusel-radio { position: absolute; opacity: 0; pointer-events: none; }

/* La rueda se retiró (01/09, a pedido): pedía 28rem de ventana y, al pasar
   de la última plantilla a la primera, el camino corto entre ángulos
   absolutos giraba 300° al revés — el «algo raro». Ahora los seis documentos
   ocupan la misma celda y sólo el elegido se ve, con el mismo fundido que ya
   usaban los textos: compacto y sin sentido de giro que pueda fallar. */
.rueda-ventana {
  position: relative;
  height: 18rem;
  overflow: hidden;
}

.rueda { position: absolute; inset: 0; }

.rueda-item {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s, transform .45s;
}

#pl-1:checked ~ .rueda-ventana .rueda-item:nth-child(1),
#pl-2:checked ~ .rueda-ventana .rueda-item:nth-child(2),
#pl-3:checked ~ .rueda-ventana .rueda-item:nth-child(3),
#pl-4:checked ~ .rueda-ventana .rueda-item:nth-child(4),
#pl-5:checked ~ .rueda-ventana .rueda-item:nth-child(5),
#pl-6:checked ~ .rueda-ventana .rueda-item:nth-child(6) { opacity: 1; transform: none; }

/* La hoja, grande: es el argumento de la sección. */
/* Sin marco: la hoja ya trae su blanco y su sombra, y el fondo gris sólo la
   encajonaba. El desvanecido de abajo va con mask, que funciona sobre
   CUALQUIER fondo de sección — el ::after pintado necesitaba adivinar el
   color de atrás. */
.lamina-visor {
  position: relative;
  height: 17.5rem;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  display: flex;
  justify-content: center;
  mask-image: linear-gradient(to bottom, black 70%, transparent 97%);
}
/* Misma mecánica de siempre: la hoja mide sus 210mm y se achica con transform;
   como transform NO achica la caja de layout, los márgenes negativos la dejan
   del tamaño visual. La tipografía la inyecta la vista con
   css_contenido(prefijo=".hoja-real "). No tocar la geometría. */
.hoja-real {
  --ancho-hoja: 210mm;
  --escala: .55;

  width: var(--ancho-hoja);
  min-height: 297mm;
  padding: 16mm 14mm;
  background: var(--blanco);
  box-shadow: 0 2px 12px rgba(23, 23, 26, .16);
  transform: scale(var(--escala));
  transform-origin: top center;
  flex: 0 0 auto;
  margin: 0 calc(var(--ancho-hoja) * (var(--escala) - 1) / 2);
}

/* El texto y el botón, abajo del documento y centrados. Los seis bloques
   ocupan la misma celda y sólo el elegido se ve, con un fundido corto. */
.rueda-textos { display: grid; margin-top: .9rem; }
.rueda-texto {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s .25s, transform .45s .25s;
  pointer-events: none;
}
#pl-1:checked ~ .rueda-textos .rueda-texto:nth-child(1),
#pl-2:checked ~ .rueda-textos .rueda-texto:nth-child(2),
#pl-3:checked ~ .rueda-textos .rueda-texto:nth-child(3),
#pl-4:checked ~ .rueda-textos .rueda-texto:nth-child(4),
#pl-5:checked ~ .rueda-textos .rueda-texto:nth-child(5),
#pl-6:checked ~ .rueda-textos .rueda-texto:nth-child(6) {
  opacity: 1; transform: none; pointer-events: auto;
}

.rueda-texto {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  text-align: left;
}
.rueda-texto h3 {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  margin: 0 0 .3rem;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -.03em;
}
.rueda-texto p { margin: 0; color: var(--cuerpo); font-size: 1rem; }
.rueda-accion { flex: none; text-align: right; }
.rueda-accion .lamina-meta { margin: 0 0 .6rem; font-size: .85rem; color: var(--apagado); }
.lamina-meta b { color: var(--tinta); }

@media (max-width: 700px) {
  .rueda-texto { flex-direction: column; align-items: center; text-align: center; }
  .rueda-texto h3 { justify-content: center; }
  .rueda-accion { text-align: center; }
}

/* La salida de la sección: el enlace a /modelos/. Tranquilo y centrado, no un
   botón — al lado del CTA de la ficha compite con «crear cuenta», que es lo
   que la sección viene a pedir. Es para el que todavía está mirando qué hay. */
.muestras-salida { margin: 1.25rem 0 0; text-align: center; }
.enlace-salida {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .95rem; font-weight: 550;
  color: var(--verde); text-decoration: none;
}
.enlace-salida:hover { text-decoration: underline; }

.muestra-familia {
  display: inline-block;
  padding: .18rem .55rem;
  border-radius: 5px;
  background: var(--fam-tenue);
  color: var(--fam);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.fam-cobro        { --fam: var(--cobro);        --fam-tenue: var(--cobro-tenue); }
.fam-operaciones  { --fam: var(--operaciones);  --fam-tenue: var(--operaciones-tenue); }
.fam-legales      { --fam: var(--legales);      --fam-tenue: var(--legales-tenue); }
.fam-comunicacion { --fam: var(--comunicacion); --fam-tenue: var(--comunicacion-tenue); }

/* Las flechas: una por lado, centradas a la altura de la hoja. El estado de
   los radios decide QUÉ label se ve — cada lámina muestra el par que apunta a
   su anterior y su siguiente, con vuelta en los extremos. */
.carrusel-flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.flecha-izq { left: .35rem; }
.flecha-der { right: .35rem; }
.carrusel-flecha label {
  display: none;
  width: 2.9rem; height: 2.9rem;
  align-items: center; justify-content: center;
  border: 1px solid var(--raya);
  border-radius: 12px;
  background: var(--blanco);
  box-shadow: var(--sombra-baja);
  color: var(--tinta);
  font-family: var(--mono);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.carrusel-flecha label:hover {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--blanco);
  box-shadow: var(--sombra-media);
}

/* Las flechas viven DENTRO de la ventana: el selector baja un nivel. */
#pl-1:checked ~ .rueda-ventana .carrusel-flecha label[data-desde="1"],
#pl-2:checked ~ .rueda-ventana .carrusel-flecha label[data-desde="2"],
#pl-3:checked ~ .rueda-ventana .carrusel-flecha label[data-desde="3"],
#pl-4:checked ~ .rueda-ventana .carrusel-flecha label[data-desde="4"],
#pl-5:checked ~ .rueda-ventana .carrusel-flecha label[data-desde="5"],
#pl-6:checked ~ .rueda-ventana .carrusel-flecha label[data-desde="6"] { display: inline-flex; }

/* ── Precios ────────────────────────────────────────────────────────────────
   Tres planes pagos, con el del medio más alto arriba y abajo. Free sale de la
   tabla: no es una opción a comparar contra las pagas, es una salida — va como
   franja al pie, disponible sin competir por la atención. */

/* ── Precios: la misma caja reglada, con la celda del medio elevada ─────────
   El truco se repite a propósito — es el sistema del template: diferencia,
   vías y precios comparten el marco reglado, y lo importante SOBRESALE. Antes
   la destacada era una tarjeta oscura; en Verseo es blanca y elevada, y el
   contraste lo hace la elevación, no el color. */

.tarifas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 68rem;
  margin: 0 auto;
  border: 1px solid var(--raya);
  border-radius: 4px;
  background: color-mix(in srgb, var(--lienzo) 55%, var(--blanco));
}

.tarifa { display: flex; flex-direction: column; padding: 2rem 1.9rem 2.1rem; }
.tarifa + .tarifa { border-left: 1px solid var(--raya); }

.tarifa-destacada {
  background: var(--blanco);
  border: 1px solid var(--raya);
  border-radius: 16px;
  box-shadow: var(--sombra-alta);
  margin: -0.85rem;
}
/* Los divisores mueren contra la tarjeta elevada: su propio borde separa.
   Sin esto, el border-left de Agencia asomaba como una línea suelta pegada
   al costado derecho de la destacada. */
.tarifa-destacada + .tarifa { border-left: 0; }

.tarifa-nombre {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin: 0 0 .4rem;
  font-size: 1.3rem; font-weight: 650; letter-spacing: -.02em;
}
.tarifa-cinta {
  padding: .2rem .55rem;
  border-radius: 999px;
  background: var(--verde-tenue);
  color: var(--verde);
  font-family: var(--mono);
  font-size: .62rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}

.tarifa-precio {
  margin: .4rem 0 1.25rem;
  font-size: clamp(2.4rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tarifa-precio .moneda { font-size: .38em; font-weight: 600; color: var(--apagado); margin-right: .2rem; vertical-align: .5em; }
.tarifa-precio .unidad { font-size: .34em; font-weight: 500; color: var(--apagado); margin-left: .25rem; }

.tarifa .boton { width: 100%; }
.tarifa-destacada .boton { background: var(--verde); }
.tarifa-destacada .boton:hover { background: #0C6543; }

/* La lista con guiones del template, tras la regla. La marca propia mantiene
   su ✦ y lo que no entra su ×: mostrar lo que NO entra es lo que vuelve
   creíble lo que sí. */
.tarifa-lista {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--raya);
  font-size: .93rem;
  color: var(--cuerpo);
}
.tarifa-lista li { position: relative; padding-left: 1.5rem; margin-bottom: .55rem; }
.tarifa-lista li::before {
  content: "—";
  position: absolute; left: 0;
  color: var(--apagado);
}
.tarifa-lista li.propio { color: var(--tinta); font-weight: 600; }
.tarifa-lista li.propio::before { content: "✦"; color: var(--verde); font-size: .7rem; top: .25em; }
/* La cruz tiene que LEERSE como cruz.

   Estaba en el mismo gris que el «—» de lo incluido, mismo peso y sin ninguna
   otra señal, así que en el teléfono —donde la columna se ve sola, sin las
   otras dos al lado para contrastar— los cinco renglones parecían cinco
   viñetas iguales. Alguien podía contratar convencido de que se llevaba algo
   que la tabla marcaba como no incluido.

   La cruz va con el color del cuerpo y en negrita, y el renglón entero se
   apaga: la diferencia queda en dos señales y no en una. Sin tachado, que a
   este tamaño es ruido. El «no incluido» para lectores de pantalla va en el
   marcado, porque un ::before no siempre se anuncia. */
.tarifa-lista li.no { color: var(--apagado); opacity: .6; }
.tarifa-lista li.no::before { content: "×"; color: var(--cuerpo); font-weight: 700; }

@media (max-width: 860px) {
  .tarifas { grid-template-columns: minmax(0, 1fr); }
  .tarifa + .tarifa { border-left: 0; border-top: 1px solid var(--raya); }
  .tarifa-destacada { margin: 0 -0.55rem; }
}

.precios-nota {
  margin: 1.5rem 0 0;
  text-align: center;
  font-size: .88rem;
  color: var(--apagado);
}

/* Free: la salida, no una columna más. */
.free {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2rem);
  flex-wrap: wrap;
  max-width: 58rem;
  margin: 2.5rem auto 0;
  padding: 1.25rem 1.6rem;
  border-radius: var(--radio);
  background: var(--lienzo);
  text-align: center;
}
.free-titulo { margin: 0; font-weight: 650; letter-spacing: -.015em; }
.free-texto { margin: .15rem 0 0; font-size: .93rem; color: var(--cuerpo); }
.free .boton { flex: none; }

/* ── Cierre ─────────────────────────────────────────────────────────────── */

.cierre { text-align: center; }
.cierre .env {
  max-width: 62rem;
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
  border: 1px solid var(--raya);
  border-radius: 16px;
  background:
    radial-gradient(85% 85% at 50% 0%, color-mix(in srgb, var(--verde) 7%, transparent), transparent 70%),
    radial-gradient(60% 60% at 12% 90%, color-mix(in srgb, var(--operaciones) 7%, transparent), transparent 70%),
    radial-gradient(55% 55% at 90% 80%, color-mix(in srgb, var(--comunicacion) 6%, transparent), transparent 70%),
    repeating-linear-gradient(to right, transparent 0 71px, var(--raya) 71px 72px),
    repeating-linear-gradient(to bottom, transparent 0 71px, var(--raya) 71px 72px),
    var(--blanco);
  position: relative;
  overflow: hidden;
}

/* ── 3 · Los cuadraditos de colores del CTA final ───────────────────────────
   Pixel-art con box-shadow, como los clusters del héroe, pero en los cuatro
   acentos de la marca: la única sección donde la paleta entera aparece junta,
   como despedida. */
.cierre .pixeles-color {
  position: absolute;
  width: 7px; height: 7px;
  background: var(--verde);
  pointer-events: none;
}
.cierre .pixeles-color-a {
  left: 8%; top: 24%;
  box-shadow:
    14px 7px 0 var(--operaciones),
    7px 21px 0 var(--comunicacion),
    -7px 14px 0 color-mix(in srgb, var(--verde) 45%, transparent),
    21px -7px 0 color-mix(in srgb, var(--legales) 70%, transparent);
}
.cierre .pixeles-color-b {
  right: 8%; bottom: 22%;
  background: var(--comunicacion);
  box-shadow:
    -14px -7px 0 var(--verde),
    -7px -21px 0 var(--operaciones),
    7px -14px 0 color-mix(in srgb, var(--legales) 70%, transparent),
    -21px 7px 0 color-mix(in srgb, var(--comunicacion) 45%, transparent);
}
@media (max-width: 900px) { .cierre .pixeles-color { display: none; } }
.cierre .titulo-seccion { max-width: 18ch; margin-inline: auto; }
.cierre p { margin: 1rem auto 2rem; color: var(--cuerpo); max-width: 42ch; }
.cierre-acciones { display: flex; justify-content: center; gap: .8rem; flex-wrap: wrap; }

/* ── Adaptación ─────────────────────────────────────────────────────────────
   minmax(0, 1fr) en todas las pistas: una pista `1fr` tiene min-width:auto y no
   puede achicarse por debajo de su contenido. La hoja A4 mide cientos de px de
   layout aun escalada, y sin el minmax(0,…) empuja la página. */

/* Entre 62 y 84rem el marco del héroe se queda sin lugar para las dos columnas
   a la vez: la planilla y la pila se apilan. */
@media (max-width: 84rem) and (min-width: 62.01rem) {
}

@media (max-width: 62rem) {
  .heroe-marco { width: 100%; padding-inline: var(--canal); }
  .motor-paneles { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; justify-items: center; }
  .pila { justify-self: center; }
}

@media (max-width: 40rem) {
  /* La barra sólo entra con marca + botón. Los enlaces ocultos están en el pie. */
  /* Angosto, la bajada más larga sí parte en dos: 84px medidos a 320 y 375. */

  /* `.solo-ancho` ya no se usa en la landing: los enlaces viven en el menú
     desplegable de base.css. La regla queda sólo en sitio.css, para el «Docs»
     de la barra deslogueada. */
  /* La marca no se parte en dos renglones. Con el botón «Menú» al lado,
     «Genera Informes» caía en dos líneas y estiraba la barra al doble de
     alto. A 390 px entra entera: ~140 px de marca, 74 del menú y 132 del
     CTA. */
  .marca { font-size: .9rem; gap: .45rem; white-space: nowrap; }
  .barra .boton-chico { padding: .5rem .85rem; font-size: .78rem; }

  .heroe { --alto-fila: 1.9rem; }
  .heroe h1 { font-size: clamp(1.95rem, 8.5vw, 2.6rem); }
  .heroe-bajada { font-size: 1rem; }
  .boton-grande { padding: .85rem 1.5rem; font-size: .96rem; }

  /* La demo, en columna y centrada. */
  .motor { display: flex; flex-direction: column; align-items: stretch; gap: 1.1rem; }
  .motor-paneles { display: contents; }
  .xls { order: 1; }
  .progreso { order: 2; margin-top: 0; }
  .pila { order: 3; }
  .pila { width: 15rem; height: 13.25rem; --escala-hoja: .303; justify-self: center; margin-inline: auto; }
  .carta { width: 15rem; }
  .carta-hoja { height: 10.5rem; }
  .xls-fila { grid-template-columns: 1.7rem minmax(0, 1fr) 3.4rem 5.9rem; }
  .xls-cursor { left: 1.7rem; }
  .progreso { font-size: .72rem; gap: .55rem; padding: .5rem .7rem; }
  .progreso-barra { width: 3rem; }

  /* Plantillas: una sola columna y hoja más chica, que era lo que se rompía. */
  .via { grid-template-columns: auto minmax(0, 1fr); gap: 1rem; padding: 1.25rem; }
  .via-dibujo { width: 4.5rem; height: 4rem; }
  .via-detalle { grid-column: 1 / -1; justify-self: start; margin-top: .25rem; }

  .tarifas { grid-template-columns: minmax(0, 1fr); max-width: 24rem; }
  .tarifa-destacada { padding-block: 2.5rem 2rem; }
  .free { flex-direction: column; text-align: center; }

  /* La rueda, en chico: radio y documento menores, misma geometría. */
  .rueda-ventana { height: 19rem; }
  .rueda { --R: 32rem; top: calc(9rem + var(--R)); }
  .rueda-item { width: 21rem; height: 18rem; margin-left: -10.5rem; margin-top: -9rem; }
  .lamina-visor { height: 18rem; }
  .hoja-real { --escala: .40; }

  .pie-nav { margin-left: 0; }
}

/* ── Pie multi-columna (sólo la landing; la app conserva el de base.css) ────
   Marca e idioma a la izquierda, los enlaces agrupados por lo que son, y la
   firma como fila de cierre a todo el ancho. */
.pie-landing { padding-block: 2.75rem 2.25rem; }
.pie-columnas {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(4, auto);
  gap: 2rem clamp(1.75rem, 4.5vw, 4.5rem);
  align-items: start;
}
.pie-col { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
.pie-col .enlace { padding-inline: 0; }
.pie-col-marca { gap: .9rem; }
.pie-landing .pie-firma {
  grid-column: 1 / -1;
  margin: .5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--raya);
  width: 100%;
}

@media (max-width: 860px) {
  .pie-columnas { grid-template-columns: 1fr 1fr; }
  .pie-col-marca { grid-column: 1 / -1; }
}


/* ── La grilla centimetrada de la página ────────────────────────────────────
   Dos verticales en hairline recorren TODO el main, y cada sección se separa
   con una regla horizontal que las cruza, con un «+» en cada intersección.
   Es el andamiaje visual del template: la página como plano técnico. */
@media (min-width: 1180px) {
  main { position: relative; }
  main::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
      linear-gradient(var(--raya), var(--raya)) 1.75rem 0 / 1px 100% no-repeat,
      linear-gradient(var(--raya), var(--raya)) calc(100% - 1.75rem) 0 / 1px 100% no-repeat,
      linear-gradient(var(--raya), var(--raya)) calc(50% - var(--ancho) / 2) 0 / 1px 100% no-repeat,
      linear-gradient(var(--raya), var(--raya)) calc(50% + var(--ancho) / 2) 0 / 1px 100% no-repeat;
  }

  main > section { position: relative; }
  main > section + section { border-top: 1px solid var(--raya); }
  /* La cruz en cada intersección regla-columna. Dibujada, no tipeada: un
     glifo «+» nunca cae exacto sobre el cruce porque sus métricas son de la
     fuente. Acá son dos líneas de 1px centradas en una caja de 13px con fondo
     blanco, que interrumpe las reglas igual que en el template. La cuenta:
     la vertical está en 1.75rem (28px) y la horizontal en el borde superior,
     así que el centro de la caja va a 28px−6px y −7px. */
  main > section + section::before,
  main > section + section::after {
    content: "";
    position: absolute;
    top: -7px;
    width: 13px; height: 13px;
    background:
      linear-gradient(var(--apagado), var(--apagado)) center / 1px 9px no-repeat,
      linear-gradient(var(--apagado), var(--apagado)) center / 9px 1px no-repeat,
      var(--blanco);
    pointer-events: none;
    z-index: 2;
  }
  main > section + section::before { left: 22px; }
  main > section + section::after  { right: 22px; }
}

/* ═══ El aire de documint: píldora, verde y la grilla de seis ═══════════════
   Tres piezas que viven SÓLO en la landing (este archivo carga después de
   base.css y las pantallas de la app no lo ven — allá la barra sigue quieta
   y los botones siguen en tinta, como manda base.css). */

/* ── La barra en píldora ────────────────────────────────────────────────────
   Se mudó a base.css el 31/08, acotada a `.barra:not(.barra-app)`: la quieren
   TODAS las públicas y no sólo la landing, y tenerla acá la dejaba fuera del
   alcance de modelos, docs, legales y entrar, que cargan sitio.css. */

/* ── El verde como color de la marca ────────────────────────────────────────
   El acento de documint aparece ocho veces con el mismo peso; el nuestro
   aparecía dos. Todos los CTA de la landing pasan a verde — el mismo verde
   y el mismo hover que ya usaba el plan destacado, que deja de ser la
   excepción. Contraste verificado: #0F7A52 sobre blanco da 4.6:1.
   .boton-liso no cambia: define su propio fondo. */
.boton { background: var(--verde); }
.boton:hover { background: #0C6543; }
/* .boton-liso vive en base.css, que carga ANTES: contra las reglas de arriba
   pierde el empate de especificidad por orden de archivo, y el botón blanco
   salía verde. Se redeclara acá, DESPUÉS, estado y hover. */
.boton-liso { background: var(--blanco); }
.boton-liso:hover { background: var(--lienzo); }

/* ── Todo lo que trae: la grilla de seis ──────────────────────────────────
   La misma caja reglada de «la diferencia» y las vías: celdas de 1px de
   junta sobre --raya. Ícono de línea en verde — el acento, repetido seis
   veces con el mismo peso — título y dos renglones. */
.todo-grilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--raya);
  border: 1px solid var(--raya);
  border-radius: var(--radio);
  overflow: hidden;
}
.todo-celda { background: var(--blanco); padding: 1.5rem 1.5rem 1.6rem; }
.todo-icono { width: 22px; height: 22px; color: var(--verde); }
.todo-celda h3 {
  margin: .7rem 0 .35rem;
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: -.015em;
}
.todo-celda p { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--cuerpo); }
@media (max-width: 900px) { .todo-grilla { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .todo-grilla { grid-template-columns: 1fr; } }

/* ═══ Las seis piezas gráficas (comparación contra documint, 31/08) ═════════
   Ilustración, no estructura: paneles de color, el editor como mockup, el
   diagrama del mapeo, el nodo con badge, las fichas dibujadas y el trazo a
   mano. Todo CSS/SVG inline; ninguna imagen. */

/* ── 02a · El panel verde profundo del héroe ────────────────────────────────
   El bloque de color saturado que enmarca la ilustración, como el panel
   ámbar de documint. La demo (planilla + hoja + progreso) ya era clara:
   sobre el verde profundo pasa de «captura» a «pieza». */
.heroe-marco {
  background: linear-gradient(160deg, #11875B 0%, var(--verde) 45%, #0B5C3E 100%);
  border-radius: 0;
  padding: clamp(1.5rem, 3.5vw, 3rem) clamp(1rem, 4vw, 3rem);
  box-shadow:
    0 2px 4px rgba(19, 28, 24, .08),
    0 24px 60px color-mix(in srgb, var(--verde) 32%, transparent);
}
/* Sobre el verde, el texto suelto del marco pasa a claro. */
.heroe-marco .progreso { box-shadow: 0 2px 10px rgba(11, 92, 62, .45); }

/* ── 02b · La celda crema de la API ─────────────────────────────────────────
   El segundo bloque de color: la vía técnica con su propio fondo, como las
   celdas crema de documint. El chip naranja ya vivía ahí; ahora tiene casa. */
.via-3 { background: var(--ambar-fondo); border-radius: 0 4px 4px 0; }
@media (max-width: 860px) { .via-3 { border-radius: 0 0 4px 4px; } }

/* ── 01 · El editor como ilustración ────────────────────────────────────────
   Mockup del editor real en el paso 1 del taller: cromo de ventana,
   carril de herramientas y la hoja con tokens. Reemplaza al dibujito
   de rayas, que queda para las celdas chicas de las vías. */
.tvista-1 > :first-child { transform: none; }
.mini-editor {
  width: min(21rem, 78%);
  background: var(--blanco);
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 2px 6px rgba(19, 28, 24, .1),
    0 26px 60px rgba(19, 28, 24, .22);
  transform: rotate(-1.6deg);
}
.mini-cromo {
  display: flex; align-items: center; gap: 6px;
  padding: .55rem .8rem;
  background: var(--lienzo);
  border-bottom: 1px solid var(--raya);
}
.mini-cromo i { width: 9px; height: 9px; border-radius: 50%; background: #D6DDD9; }
.mini-cromo i:nth-child(1) { background: #E8A9A3; }
.mini-cromo i:nth-child(2) { background: #EBD3A0; }
.mini-cromo i:nth-child(3) { background: #A9CDB9; }
.mini-cromo b { margin-left: .35rem; font-size: .62rem; font-weight: 500; color: var(--apagado); }
.mini-cuerpo { display: grid; grid-template-columns: 2.2rem 1fr; }
.mini-herr {
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  padding: .8rem 0;
  border-right: 1px solid var(--raya);
}
.mini-herr i { width: .95rem; height: .95rem; border-radius: 4px; background: var(--lienzo); box-shadow: inset 0 0 0 1px var(--raya); }
.mini-herr span { width: 1.1rem; height: 1px; background: var(--raya); }
.mini-hoja {
  padding: 1.1rem 1.15rem 1.25rem;
  display: flex; flex-direction: column; gap: .55rem; align-items: flex-start;
}
.mini-hoja .ml { display: block; height: 5px; border-radius: 3px; background: #E4E7E5; width: 78%; }
.mini-hoja .ml.ancha { width: 92%; }
.mini-hoja .ml.corta { width: 52%; }
.mini-token {
  font-family: var(--mono); font-style: normal;
  font-size: .68rem; padding: .22rem .5rem; border-radius: 5px;
  background: var(--verde); color: var(--blanco);
  box-shadow: 0 1px 5px color-mix(in srgb, var(--verde) 45%, transparent);
}
.mini-token-b { background: var(--verde-tenue); color: var(--verde); box-shadow: none; }

/* ── 03 · El diagrama del mapeo ─────────────────────────────────────────────
   Columna de la planilla → token de la plantilla, con flechas curvas en
   guiones. El único diagrama dibujado de la página. */
.mapeo {
  display: grid;
  grid-template-columns: auto minmax(4.5rem, 8rem) auto;
  justify-content: center;
  align-items: stretch;
  gap: .5rem;
  margin: 0 auto 2.5rem;
}
.mapeo-lado { display: flex; flex-direction: column; gap: .55rem; align-items: flex-start; }
.mapeo-der { align-items: flex-start; }
.mapeo-rotulo {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .06em;
  color: var(--apagado); margin-bottom: .15rem;
}
.mapeo-col {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .42rem .8rem .42rem .42rem;
  background: var(--blanco); border: 1px solid var(--raya); border-radius: 8px;
  font-size: .85rem; font-weight: 550; color: var(--tinta);
  box-shadow: var(--sombra-baja);
}
.mapeo-col b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.35rem; height: 1.35rem; border-radius: 5px;
  background: color-mix(in srgb, #217346 12%, var(--blanco));
  color: #217346; font-family: var(--mono); font-size: .68rem; font-weight: 600;
}
.mapeo-flechas { width: 100%; height: auto; align-self: center; color: #9AA6A0; }
.mapeo-token {
  font-family: var(--mono); font-size: .8rem;
  padding: .45rem .7rem; border-radius: 7px;
  background: var(--verde-tenue); color: var(--verde);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--verde) 22%, transparent);
}
@media (max-width: 640px) {
  .mapeo { grid-template-columns: auto; justify-items: center; }
  .mapeo-flechas { display: none; }
  .mapeo-lado { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .mapeo-rotulo { width: 100%; text-align: center; }
}

/* ── 04 · El nodo con badge del progreso ────────────────────────────────────
   El «462» de documint, en verde y con un número cierto: las cinco filas
   de la demo. Vive dentro de la píldora de progreso. */
.progreso-nodo {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; flex: none;
  border-radius: 50%;
  background: var(--lienzo);
  box-shadow: inset 0 0 0 1px var(--raya);
  color: var(--cuerpo);
}
.progreso-nodo b {
  position: absolute; top: -.45rem; right: -.55rem;
  padding: .1rem .34rem; border-radius: 999px;
  background: var(--verde); color: var(--blanco);
  font-family: var(--mono); font-size: .58rem; font-weight: 600;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--verde) 45%, transparent);
}

/* ── 05 · Las fichas de formato dibujadas ───────────────────────────────────
   El cuadradito de color plano con la sigla se volvió una ficha con el
   archivo dibujado (partes/ficha_formato.html). */
.marca-ficha { width: 2.15rem; height: 2.15rem; flex: none; border-radius: 8px; }

/* ── 06 · El trazo a mano ───────────────────────────────────────────────────
   La flecha manuscrita hacia «Ver todos los modelos». Único trazo irregular
   de la página, a propósito. */
.muestras-salida { display: flex; align-items: flex-end; justify-content: center; gap: .3rem; }
.trazo-mano { color: #9AA6A0; }
.trazo-mano svg { width: 4.2rem; height: auto; display: block; transform: translateY(.35rem); }

/* ═══ Segunda tanda gráfica (01/09): escenas, taller al scroll, vías limpias,
   pie con títulos ═══════════════════════════════════════════════════════ */

/* ── Las escenas de «La diferencia» ────────────────────────────────────────
   Tres columnas de texto no daban nada que mirar. Cada celda lleva ahora su
   escena: la hoja tachada, las versiones desparramadas, la pila prolija. */
.dif-escena {
  height: 7rem;
  margin-top: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dif-celda h3 { margin-top: 1.1rem; }

.esc-hoja {
  position: relative;
  width: 7.5rem;
  padding: .9rem .8rem 1rem;
  background: var(--blanco);
  border-radius: 4px;
  box-shadow: 0 1px 6px rgba(23, 23, 26, .16);
  transform: rotate(-2.5deg);
  display: flex; flex-direction: column; gap: 6px;
}
.esc-hoja i { height: 4px; border-radius: 2px; background: #E1E4E2; }
.esc-hoja i.corta { width: 55%; }
.esc-tachon { position: absolute; inset: 0; width: 100%; height: 100%; }

.esc-docs { position: relative; width: 100%; max-width: 13rem; height: 100%; }
.esc-docs b {
  position: absolute;
  font-family: var(--mono); font-weight: 500; font-size: .58rem;
  color: var(--cuerpo);
  background: var(--blanco);
  border: 1px solid var(--raya);
  border-radius: 5px;
  padding: .8rem .55rem .3rem;
  box-shadow: 0 1px 5px rgba(23, 23, 26, .12);
  white-space: nowrap;
}
.esc-docs b::before {
  content: "";
  position: absolute; top: .32rem; left: .55rem; right: .55rem;
  height: 3px; border-radius: 2px;
  background: var(--operaciones); opacity: .35;
}
.esc-docs b:nth-child(1) { left: 2%;  top: 6%;  transform: rotate(-3.5deg); }
.esc-docs b:nth-child(2) { left: 24%; top: 37%; transform: rotate(2deg); z-index: 1; }
.esc-docs b:nth-child(3) { left: 8%;  top: 66%; transform: rotate(-1.5deg); }

.esc-pila { position: relative; width: 7.5rem; height: 5.4rem; }
.esc-pila i, .esc-pila b {
  position: absolute; inset: 0;
  border-radius: 5px;
  background: var(--blanco);
  box-shadow: 0 1px 4px rgba(23, 23, 26, .12);
}
.esc-pila i:nth-child(1) { transform: translate(10px, -10px); background: var(--lienzo); }
.esc-pila i:nth-child(2) { transform: translate(5px, -5px); }
.esc-pila b { display: flex; flex-direction: column; gap: 6px; padding: .8rem .75rem; }
.esc-fila { height: 5px; border-radius: 2px; background: var(--verde); width: 70%; }
.esc-linea { height: 4px; border-radius: 2px; background: #E1E4E2; }
.esc-linea.corta { width: 55%; }
.esc-tilde {
  position: absolute;
  right: -.6rem; bottom: -.6rem;
  width: 1.9rem; height: 1.9rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--verde); color: var(--blanco);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--verde) 45%, transparent);
}

/* ── El taller atado al scroll ─────────────────────────────────────────────
   El tramo mide dos pantallas y media; el taller queda sticky y el script
   marca el paso según el avance. En pantallas angostas el tramo no se estira
   y el script se apaga solo (recorrible < 60). */
@media (min-width: 861px) {
  .taller-tramo { height: 240vh; }
  /* Anclado CENTRADO en lo que queda de pantalla: 50vh baja el punto de
     anclaje a la mitad del viewport, el translate centra el bloque sobre ese
     punto, y los 2.4rem lo corren media barra hacia abajo — la píldora sticky
     ocupa pantalla y sin descontarla el bloque quedaba alto, con el aire
     todo abajo. */
  .taller-fijo {
    position: sticky;
    top: calc(50vh - 10.5rem);
  }
}

/* ── El mapeo dentro del taller ────────────────────────────────────────────
   El diagrama se mudó al paso 2: acá es EL contenido del panel, sin el
   margen de sección que traía. */
.tvista .mapeo { margin: 0; }
.tvista-2 > :first-child { transform: none; }
/* La escena del paso 3 también se dibuja a tamaño real: sin la regla, la
   escala 3× del panel viejo agigantaba el botón de descarga y el zip. */
.tvista-3 > :first-child { transform: none; }

/* ── Las vías, limpias ─────────────────────────────────────────────────────
   Un solo ícono de línea por celda — el mismo juego que «Todo lo que trae» —
   en lugar del 001 + miniatura. El color de la vía queda en el ícono y el
   chip. */
.via-icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.9rem; height: 2.9rem;
  margin-bottom: 1.2rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--via-color) 10%, var(--blanco));
  color: var(--via-color);
}
.via-icono .ic { width: 22px; height: 22px; }

/* ── Los títulos y el lema del pie ─────────────────────────────────────────*/
.pie-titulo {
  margin: 0 0 .25rem;
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--apagado);
}
.pie-lema { margin: 0; max-width: 24ch; font-size: .92rem; color: var(--cuerpo); }

/* ═══ Tercera pasada del taller + barra sin banda blanca (01/09) ═══════════ */

/* ── El héroe se mete DEBAJO de la píldora ─────────────────────────────────
   La barra reservaba su fila y quedaba una banda blanca entre la píldora y
   el degradado del héroe. El margen negativo mete el héroe abajo de la barra
   y el padding lo compensa: el degradado corre detrás de la píldora y la
   banda desaparece. */
.barra { margin-bottom: calc(-1 * var(--alto-barra) - .75rem); }
.heroe { padding-top: calc(clamp(2.5rem, 6vw, 4.5rem) + var(--alto-barra) + 1.5rem); }

/* ── El panel verde, por encima de la grilla centimetrada ──────────────────
   Las verticales en hairline del plano técnico pasaban por ARRIBA del verde.
   El panel sube de capa y las líneas quedan por abajo, como corresponde:
   son andamiaje, no contenido. */
.heroe-marco { position: relative; z-index: 2; }

/* ── Paso 1 · la plantilla linda ───────────────────────────────────────────
   El documento de verdad: título, texto real y las variables como chips
   ADENTRO del texto, a la documint. */
.plinda {
  width: min(19rem, 82%);
  background: var(--blanco);
  border-radius: 10px;
  padding: 1.4rem 1.5rem 1.5rem;
  box-shadow: 0 2px 6px rgba(19, 28, 24, .09), 0 24px 55px rgba(19, 28, 24, .2);
  transform: rotate(-1.2deg);
  text-align: left;
}
.plinda-titulo {
  margin: 0 0 .2rem;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--verde);
}
.plinda-meta { margin: 0 0 .85rem; font-size: .68rem; color: var(--apagado); }
.plinda-texto { margin: 0 0 .95rem; font-size: .78rem; color: var(--cuerpo); }
.plinda em {
  font-family: var(--mono);
  font-style: normal;
  font-size: .66rem;
  padding: .16rem .4rem;
  border-radius: 4px;
  background: var(--verde-tenue);
  color: var(--verde);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--verde) 25%, transparent);
  white-space: nowrap;
}
.plinda-tabla {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .45rem .8rem;
  font-size: .74rem;
  color: var(--cuerpo);
}
.plinda-th {
  font-size: .6rem;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--blanco);
  background: var(--verde);
  padding: .28rem .5rem;
  margin: 0 -.5rem;
  border-radius: 3px 0 0 3px;
}
.plinda-th.plinda-der { border-radius: 0 3px 3px 0; }
.plinda-der { text-align: right; justify-self: end; }

/* ── Paso 2 · Excel → flechas → variables ──────────────────────────────────*/
.m2 { display: flex; align-items: center; gap: .35rem; }
.m2-xls {
  width: 13.5rem;
  background: var(--blanco);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(19, 28, 24, .09), 0 18px 44px rgba(19, 28, 24, .16);
}
.m2-cab {
  display: flex; align-items: center; gap: .45rem;
  padding: .45rem .7rem;
  background: #217346;
  color: var(--blanco);
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 500;
}
.m2-cab span {
  width: .7rem; height: .7rem; flex: none;
  border-radius: 2px;
  background: rgba(252, 254, 253, .92);  /* var(--blanco) con alfa */
}
.m2-grilla {
  display: grid;
  grid-template-columns: 1.2fr .7fr 1fr;
  font-size: .62rem;
  color: var(--cuerpo);
}
.m2-grilla span {
  padding: .34rem .55rem;
  border-bottom: 1px solid var(--raya);
  border-right: 1px solid var(--raya);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m2-grilla span:nth-child(3n) { border-right: 0; }
.m2-th {
  font-weight: 650;
  color: var(--tinta);
  background: color-mix(in srgb, #217346 10%, var(--blanco));
}
.m2-flechas { width: 3.6rem; height: 8rem; flex: none; color: var(--verde); }
.m2-doc {
  background: var(--blanco);
  border-radius: 8px;
  padding: .9rem .85rem;
  display: flex; flex-direction: column; gap: .6rem; align-items: flex-start;
  box-shadow: 0 2px 6px rgba(19, 28, 24, .09), 0 18px 44px rgba(19, 28, 24, .16);
}
.m2-doc em {
  font-family: var(--mono);
  font-style: normal;
  font-size: .66rem;
  padding: .2rem .45rem;
  border-radius: 4px;
  background: var(--verde-tenue);
  color: var(--verde);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--verde) 25%, transparent);
  white-space: nowrap;
}

/* ── Paso 3 · la descarga ──────────────────────────────────────────────────*/
.m3 { position: relative; width: 14rem; height: 11rem; }
.m3-pila { position: absolute; inset: 0 1.2rem 1.2rem 0; }
.m3-pila i, .m3-pila b {
  position: absolute; inset: 0;
  border-radius: 6px;
  background: var(--blanco);
  box-shadow: 0 2px 8px rgba(19, 28, 24, .13);
}
.m3-pila i:nth-child(1) { transform: translate(14px, -14px); background: var(--lienzo); }
.m3-pila i:nth-child(2) { transform: translate(7px, -7px); }
.m3-pila b { display: flex; flex-direction: column; gap: .55rem; padding: .95rem .9rem; }
.m3-cab { height: 7px; border-radius: 3px; background: var(--verde); width: 55%; }
.m3-l { height: 5px; border-radius: 3px; background: #E1E4E2; }
.m3-l.corta { width: 60%; }
.m3-bajar {
  position: absolute;
  right: .1rem; bottom: .4rem;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--verde);
  color: var(--blanco);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--verde) 50%, transparent);
}
.m3-zip {
  position: absolute;
  left: 0; bottom: -.4rem;
  font-family: var(--mono);
  font-size: .62rem;
  padding: .25rem .55rem;
  border-radius: 5px;
  background: var(--tinta);
  color: var(--blanco);
  box-shadow: 0 2px 8px rgba(19, 28, 24, .3);
}


/* ── Plantillas listas en ~110vh (01/09, a pedido) ─────────────────────────
   La sección medía 133vh. Se recorta lo que no argumenta: padding de la
   sección, aire del encabezado y ventana del documento — el documento se
   corta antes con la máscara, mostrando cabecera y tabla, que es lo que
   importa. */
#plantillas { padding-block: 2.75rem 2.5rem; }
#plantillas .encabezado-centro { margin-bottom: 1.25rem; }
#plantillas .bajada-seccion { margin-bottom: 0; }