/* Landing de la nómina para DSP. Calca la estructura de la cafetería con la paleta completa de
   Bravman: noche azul marino, azul eléctrico como única luz de color, Inter para titulares y
   DM Sans para leer. */
:root {
  --noche: #07090F; --noche-2: #0D1120; --noche-3: #101628;
  --azul: #1E3A7B; --azul-b: #2251A8; --azul-l: #3B6FD4; --electrico: #4A8CFF;
  --blanco: #EEF2FA; --tinta: #EEF2FA; --tinta-2: #C7D2E8; --tinta-3: #8FA0BF; --tinta-4: #5F7085;
  /* Una sola familia, más rango: el azul eléctrico al 100% para lo que importa, y un azul
     apagado para lo que se va a quedar atrás. Decidido con Manuel el 9 de septiembre. */
  --electrico-suave: #9CC0FF; --apagado: #7C8AA5;
  /* Los dos acentos de la lámina de la presentación: lo crudo entra en rojo, lo resuelto sale
     en verde. Solo viven en el diagrama del camino del dato. */
  --crudo: #FF6B6B; --resuelto: #10B981;
  --linea: rgba(199, 210, 232, .14); --linea-2: rgba(199, 210, 232, .26);
  --panel: #0F1526; --panel-2: #131B30;
  /* Archivo para los titulares: es una grotesca de anchura amplia y remates rectos, hecha para
     leerse grande y de frente, que es lo que pide una portada que afirma algo. Inter, la que
     estaba, es la tipografía por omisión de media web y no dice nada de la marca. DM Sans se
     queda para leer: geométrica, abierta y sin personalidad que compita con el titular. */
  --display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --texto: "DM Sans", system-ui, sans-serif;
  --canal: min(1240px, calc(100% - 3rem));
  --radio: 18px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--noche); color: var(--tinta); font: 400 17px/1.55 var(--texto); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; margin: 0; letter-spacing: -.03em; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 6.4vw, 5.2rem); line-height: 1; font-weight: 900; color: #fff; }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.1; color: #fff; }
h3 { font-size: 1rem; font-weight: 700; letter-spacing: 0; }
.canal { width: var(--canal); margin-inline: auto; }
/* La pastilla de la marca, tal cual la usa bravmanconsulting.com: punto, borde de una línea y
   versalitas en el azul pleno #4A8CFF. */
.copete { font: 700 .72rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--electrico); margin: 0 0 1.4rem; display: inline-flex; align-items: center; gap: .55rem; border: 1px solid rgba(74,140,255,.28); border-radius: 100px; padding: .45rem 1rem; width: fit-content; }
.copete::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--electrico); flex: none; }
.dice { color: var(--tinta-2); font-size: clamp(1.02rem, 1.4vw, 1.2rem); max-width: 46ch; margin: 0; }
.dice.dolor { color: var(--tinta-3); }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .95rem 1.6rem; border-radius: 999px; background: var(--electrico); color: var(--noche); font: 700 1rem var(--display); text-decoration: none; border: 0; cursor: pointer; transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s; box-shadow: 0 10px 30px -10px rgba(74,140,255,.6); }
.boton:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -10px rgba(74,140,255,.7); }
.boton:active { transform: translateY(0); }
.boton:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.boton.grande { padding: 1.15rem 2rem; font-size: 1.08rem; }
.boton.chico { padding: .6rem 1.1rem; font-size: .9rem; }
.boton.calada { background: transparent; color: var(--tinta); border: 1px solid var(--linea-2); box-shadow: none; }
.boton.calada:hover { border-color: var(--electrico); box-shadow: none; }

/* ---- la caída ---- */
.caida { position: relative; background: var(--noche); }
.caida-pega { position: relative; height: 100lvh; min-height: 640px; overflow: hidden; background: #0A0E1B; }
.caida-fija, .caida-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.caida-lienzo { opacity: 0; transition: opacity .5s ease; }
.caida.pintada .caida-lienzo { opacity: 1; }
.caida.viva { height: var(--riel, 900svh); }
.caida.viva .caida-pega { position: sticky; top: 0; }
.caida-pega::after { content: ""; position: absolute; inset: auto 0 0 0; height: 22vh; background: linear-gradient(to bottom, rgba(7,9,15,0), var(--noche)); pointer-events: none; }
.caida-textos { position: absolute; inset: 0; z-index: 2; }
/* El fondo inferior deja libre la banda del riel de capítulos: sin esto, el último renglón de
   un beat bajo se encima con los nombres de los tramos. */
.beat { position: absolute; inset: 0; display: grid; padding: clamp(5rem, 10vh, 8rem) clamp(1.2rem, 5vw, 5rem) clamp(6.5rem, 13vh, 9.5rem); visibility: hidden; }
.beat-caja { max-width: 560px; display: grid; gap: .85rem; translate: 0 var(--deriva, 0px); }
/* El renglón que resuelve pesa más y respira más que el del dolor: es el que se queda. */
.beat .dice.dolor + .dice { margin-top: .5rem; }
.beat.centro { place-items: center; text-align: center; }
.beat.centro .beat-caja { max-width: 900px; justify-items: center; }
.beat.izquierda.arriba { align-content: start; justify-content: start; }
.beat.izquierda.abajo { align-content: end; justify-content: start; }
.beat.derecha { align-content: start; justify-content: end; }
.beat h2 { font-size: clamp(2.1rem, 4.3vw, 3.7rem); line-height: 1.04; }
.beat .dice { max-width: 38ch; font-size: clamp(1.16rem, 1.75vw, 1.52rem); line-height: 1.45; color: var(--tinta); }
.beat.centro .dice { max-width: 46ch; }
/* La frase que resuelve lleva la palabra que importa en azul eléctrico; el resto de la página
   no usa color para enfatizar, así que aquí sí dirige la mirada. */
/* El azul de la marca a tope. Medido sobre los fotogramas reales: 5.0 a la izquierda, 4.9 a
   la derecha y 4.9 al centro, todos por encima del 4.5:1. */
.beat .dice b { color: var(--electrico); font-weight: 600; }
.beat h1 b, .beat h2 b { color: var(--electrico); }
/* El renglón del dolor va un peldaño atrás y su "Hoy" es una etiqueta, no una palabra más. */
.beat .dice.dolor { color: #A2B0C8; font-size: clamp(.98rem, 1.15vw, 1.06rem); max-width: 32ch; line-height: 1.4; }
.beat .dice.dolor span { font: 700 .72rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); display: inline-block; margin-right: .55rem; translate: 0 -.12em; }
.beat .acciones { margin-top: .6rem; }
/* Las cinco variables de la tarifa: rejilla pareja, ícono grande arriba y la palabra debajo.
   En fila envuelta se veían asimétricas, con cuatro arriba y una sola abajo. */
.cinco { list-style: none; margin: .6rem 0 .4rem; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .7rem; }
.cinco li { display: grid; justify-items: center; gap: .55rem; padding: 1rem .5rem .85rem; border: 1px solid var(--linea-2); border-radius: 14px; background: rgba(15,21,38,.55); text-align: center; font: 600 .84rem var(--display); color: var(--tinta); }
.cinco .ico { width: 30px; height: 30px; color: var(--electrico); }
.beat-caja.ancha { max-width: 680px; }
@media (max-width: 900px) { .cinco { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cinco li { font-size: .76rem; padding: .8rem .4rem .7rem; } .cinco .ico { width: 24px; height: 24px; } }

/* Los orígenes de la información: se entienden por el ícono, la palabra solo confirma. */
.origenes { list-style: none; margin: .5rem 0 .2rem; padding: 0; display: grid; gap: .5rem; }
.origenes li { display: flex; align-items: center; gap: .8rem; font: 600 clamp(1rem, 1.4vw, 1.18rem) var(--display); color: var(--tinta); }
.origenes .ico { width: 22px; height: 22px; color: var(--electrico); flex: none; }

/* La escala: de lo más pequeño a lo más grande, un renglón cada uno. */
.escala { list-style: none; margin: .8rem auto .4rem; padding: 0; display: grid; gap: .8rem; justify-items: start; }
.escala li { display: flex; align-items: center; gap: 1rem; font: 500 clamp(1.3rem, 2.6vw, 2.1rem) var(--display); color: var(--tinta-2); letter-spacing: -.02em; }
.escala b { color: #fff; font-weight: 800; }
.escala .ico { width: clamp(28px, 3.4vw, 40px); height: clamp(28px, 3.4vw, 40px); color: var(--electrico); flex: none; }

/* El cierre de la caída: la promesa en azul eléctrico, del tamaño de la portada. */
/* Sin sombra: el degradado de escena ya sostiene el contraste y la sombra ensuciaba la letra. */
.cierre-caida { font-size: clamp(2.2rem, 5vw, 4.2rem); text-shadow: none; }

/* Cada tramo tiene la forma que le toca, no la misma plantilla: una lista cuando lo que importa
   es cuántos son, pastillas cuando son variables, y un contraste de números cuando el argumento
   es el tiempo. */
.fuentes, .responde { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .55rem; }
.fuentes li, .responde li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: .7rem; align-items: baseline; font: 500 clamp(1.02rem, 1.45vw, 1.24rem) var(--texto); color: var(--tinta); }
.fuentes li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--electrico); margin-left: 5px; translate: 0 -.15em; }
.responde li { font-family: var(--display); font-weight: 700; font-size: clamp(1.12rem, 1.7vw, 1.5rem); letter-spacing: -.015em; color: #fff; }
.responde li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--electrico); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A8CFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat; translate: 0 .15em; }

.contraste { display: flex; align-items: center; gap: clamp(.9rem, 2.5vw, 1.8rem); margin: .2rem 0 .4rem; flex-wrap: wrap; }
.contraste span { display: grid; font: 500 .92rem var(--texto); color: var(--tinta-3); }
.contraste b { font: 900 clamp(2.2rem, 5vw, 3.6rem)/1 var(--display); letter-spacing: -.035em; }
.contraste .antes b { color: #fff; }
.contraste .ahora b { color: var(--electrico); }
.contraste .flecha { align-self: center; }
.contraste .flecha svg { width: 28px; height: 28px; fill: none; stroke: var(--tinta-4); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.cierre-caida b { color: var(--electrico); }
/* Cada renglón entra y sale por su cuenta. El contraste sobre la foto lo da un degradado de
   escena que cubre el lado donde vive el texto, no una placa por renglón: la placa se veía
   como una caja negra recortada encima de la imagen. En el punto donde cae la letra el
   degradado nunca baja de 0.88, que es lo que hace pasar el 4.5:1 aun sobre el cuadro más
   claro de la secuencia. */
.caida.viva .beat-caja .linea { opacity: 0; translate: 0 var(--sube, 0px); position: relative; }
.beat::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--papel-vivo, 1); transition: opacity .4s; }
.beat.izquierda::before { background: linear-gradient(100deg, rgba(7,9,15,.96) 0%, rgba(7,9,15,.9) 30%, rgba(7,9,15,.55) 52%, rgba(7,9,15,0) 70%); }
.beat.derecha::before { background: linear-gradient(260deg, rgba(7,9,15,.96) 0%, rgba(7,9,15,.9) 30%, rgba(7,9,15,.55) 52%, rgba(7,9,15,0) 70%); }
/* Una banda de arriba abajo, no un óvalo: el óvalo se leía como una sombra sucia detrás de la
   letra. En la franja donde vive el texto no baja de .90, que es lo que hace pasar el azul de
   la marca sobre el cuadro más claro de la secuencia. */
.beat.centro::before { background: linear-gradient(to bottom, rgba(7,9,15,.3) 0%, rgba(7,9,15,.9) 26%, rgba(7,9,15,.92) 72%, rgba(7,9,15,.35) 100%); }
/* En el teléfono el texto ocupa el ancho completo, así que el degradado va de arriba abajo y
   solo por el lado donde cae el bloque: si oscurece toda la pantalla, la escena desaparece,
   que es justo lo que se paga por tenerla. */
@media (max-width: 860px) {
  .beat.izquierda::before, .beat.derecha::before, .beat.centro::before {
    background: linear-gradient(to bottom, rgba(7,9,15,.95) 0%, rgba(7,9,15,.9) 46%, rgba(7,9,15,.3) 74%, rgba(7,9,15,0) 100%);
  }
  .beat.abajo::before {
    background: linear-gradient(to top, rgba(7,9,15,.95) 0%, rgba(7,9,15,.9) 46%, rgba(7,9,15,.3) 74%, rgba(7,9,15,0) 100%);
  }
  .beat.centro::before {
    background: linear-gradient(to bottom, rgba(7,9,15,.55) 0%, rgba(7,9,15,.9) 35%, rgba(7,9,15,.92) 72%, rgba(7,9,15,.6) 100%);
  }
}
.caida:not(.viva) .caida-pega { position: relative; height: auto; min-height: 0; }
.caida:not(.viva) .caida-fija { position: static; }
.caida:not(.viva) .caida-lienzo, .caida:not(.viva) .riel, .caida:not(.viva) .pista { display: none; }
.caida:not(.viva) .caida-textos { position: static; display: grid; gap: 2rem; padding: 2rem 0; }
.caida:not(.viva) .beat { position: static; visibility: visible; padding: 0 clamp(1.2rem, 5vw, 5rem); }
.caida:not(.viva) .beat::before { content: none; }

/* el riel de capítulos, como en la cafetería: vertical, a la derecha y con el nombre de cada
   tramo. Dice dos cosas a la vez, que esto avanza con el scroll y en qué parte del recorrido
   va uno, que es lo que hace que alguien siga bajando. */
.riel { position: absolute; z-index: 4; right: clamp(1rem, 2.6vw, 2.2rem); top: 50%; translate: 0 -50%;
  display: grid; grid-template-columns: auto auto; gap: 0 .85rem; align-items: stretch;
  padding: .9rem 1.1rem; border-radius: 16px;
  background: rgba(7,9,15,.6); border: 1px solid rgba(74,140,255,.18); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .6s ease; }
.caida.viva .riel { opacity: 1; }
.riel-linea { position: relative; display: block; width: 2px; height: auto; border-radius: 2px; background: var(--linea-2); overflow: hidden; }
/* Sigue al scroll, así que no lleva transición: cualquier retardo lo desincroniza de la imagen. */
.riel-avance { position: absolute; inset: 0 0 auto 0; width: 100%; height: 100%; transform-origin: top center; scale: 1 var(--av, 0); background: var(--electrico); border-radius: 2px; transition: none; }
.riel-pasos { list-style: none; margin: 0; padding: 0; display: grid; align-content: space-between; gap: .35rem; }
.riel-pasos li { display: block; }
.riel-pasos button { border: 0; background: none; padding: .18rem 0; cursor: pointer; display: block; text-align: left;
  font: 600 .68rem var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3);
  transition: color .3s ease; }
.riel-pasos li.puesto button { color: var(--electrico); font-weight: 700; }
.riel-pasos button:hover { color: var(--tinta); }
.riel-pasos button:focus-visible { outline: 2px solid var(--electrico); outline-offset: 3px; border-radius: 3px; }
/* El lado derecho es del riel y de la imagen: ningún bloque de texto vive ahí. Los tramos se
   diferencian por altura (arriba, abajo, centrado), no por lado, y así nunca compiten con el
   riel a ningún ancho. La caja mide 560px como máximo y arranca en el margen izquierdo, así que
   nunca se acerca al riel: no hace falta reservarle espacio, y reservarlo partía los titulares
   en columnas de tres palabras. */
@media (max-width: 900px) {
  /* En pantalla angosta las etiquetas se comen el ancho de la escena: queda la barra sola,
     tumbada arriba, que es la que dice cuánto falta. */
  .riel { right: 0; left: 0; top: 0; translate: none; display: block; height: 3px; padding: 0; border-radius: 0; background: none; border: 0; backdrop-filter: none; }
  .riel-linea { width: auto; height: 3px; }
  .riel-avance { inset: 0 auto 0 0; height: 100%; transform-origin: left center; scale: var(--av, 0) 1; }
  .riel-pasos { display: none; }
}

/* la invitación a bajar */
/* La invitación a bajar es lo único que sostiene el primer viewport: se ve, se lee y se puede
   pulsar. Antes era un texto tenue que nadie encontraba. */
.pista { position: absolute; left: 50%; bottom: clamp(1.6rem, 6vh, 3.4rem); translate: -50% 0; z-index: 3; background: rgba(7,9,15,.55); border: 1px solid rgba(74,140,255,.3); border-radius: 100px; padding: .7rem 1.4rem .8rem; color: var(--tinta); cursor: pointer; display: grid; justify-items: center; gap: .45rem; animation: vaiven 2.2s ease-in-out infinite; transition: border-color .2s, background .2s; }
.pista:hover { border-color: var(--electrico); background: rgba(7,9,15,.75); }
.pista:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.pista-txt { font: 500 .82rem var(--texto); color: var(--tinta-2); letter-spacing: .02em; display: grid; justify-items: center; gap: .15rem; }
.pista-txt b { font: 800 .82rem var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--electrico); }
.pista-riel { width: 22px; height: 36px; border: 1.5px solid var(--linea-2); border-radius: 12px; position: relative; }
.pista-riel i { position: absolute; left: 50%; top: 6px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: var(--electrico); animation: cae 1.6s ease-in-out infinite; }
body.movida .pista { opacity: 0; pointer-events: none; transition: opacity .45s; }
@keyframes vaiven { 0%, 100% { translate: -50% 0; } 50% { translate: -50% 6px; } }
@keyframes cae { 0% { top: 6px; opacity: 1; } 70% { top: 18px; opacity: 0; } 100% { top: 6px; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pista, .pista-riel i { animation: none; } }

/* ---- la red de nodos detrás de todo lo que se explica ---- */
/* Nace donde terminan las líneas de la escena anterior, arriba y al centro, y se abre hacia
   abajo. Es la misma idea de la web de Bravman llevada a esta paleta: puntos que se mueven y se
   unen cuando se acercan. Las secciones dejan de traer fondo propio para que se vea. */
.abajo { position: relative; background: var(--noche); }
.red { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.abajo > section { position: relative; z-index: 1; }
.abajo > section.flujo, .abajo > section.medir, .abajo > section.pantallas { background: none; }
.abajo > section.prueba { background: linear-gradient(to bottom, rgba(13,17,32,0), rgba(13,17,32,.45), rgba(13,17,32,0)); }
@media (prefers-reduced-motion: reduce) { .red { display: none; } }

/* ---- donde desembocan los caminos ---- */
/* El cierre es otra secuencia movida por el scroll, no una imagen fija: continúa donde terminó
   la caída y llega al paquete entregado. Riel corto, una sola pantalla y media. */
.cierre .caida-pega { height: 100lvh; min-height: 560px; }
.cierre .beat { padding-block: clamp(4rem, 10vh, 7rem); }
.cierre .beat-caja { max-width: 900px; }
.cierre .copete { justify-content: center; margin-inline: auto; }
.cierre .beat.centro::before { background: linear-gradient(to bottom, rgba(7,9,15,.55) 0%, rgba(7,9,15,.9) 30%, rgba(7,9,15,.86) 62%, rgba(7,9,15,.2) 100%); }
.cierre .dice { font-size: clamp(1.08rem, 1.6vw, 1.35rem); }
.cierre:not(.viva) .caida-pega { position: relative; height: auto; min-height: 0; }

/* ---- escenas de producto ---- */
.escena { padding: clamp(4rem, 9vh, 7rem) 0; position: relative; }
.escena + .escena { border-top: 1px solid var(--linea); }
.escena-cabeza { display: grid; gap: 1rem; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.escena-cabeza.par { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; gap: clamp(2rem, 4vw, 3.5rem); }
.escena-cabeza h2 { font-size: clamp(2.1rem, 4vw, 3.4rem); line-height: 1.05; }
.escena-cabeza .dice { font-size: clamp(1.02rem, 1.25vw, 1.15rem); }
@media (max-width: 860px) { .escena-cabeza.par { grid-template-columns: 1fr; } }
.marco { margin: 0; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--linea-2); background: var(--panel); box-shadow: 0 30px 80px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(74,140,255,.08); }
.marco + .marco { margin-top: 1.4rem; }
.marco-par { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .32fr); gap: 1.4rem; align-items: start; }
.marco.movil { max-width: 320px; justify-self: center; border-radius: 30px; }
@media (max-width: 860px) { .marco-par { grid-template-columns: 1fr; } }

/* ---- la prueba ---- */
.prueba { background: linear-gradient(to bottom, var(--noche), var(--noche-2) 40%, var(--noche)); padding-block: clamp(2rem, 4vh, 3.2rem); }
.prueba .escena-cabeza { margin-bottom: 1rem; }
.prueba .escena-cabeza h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.prueba-tablero { display: grid; grid-template-columns: minmax(0, 1.12fr) 190px minmax(0, 1.12fr); gap: 1.1rem; align-items: stretch; }
@media (max-width: 980px) { .prueba-tablero { grid-template-columns: 1fr; } .prueba-medio { order: -1; position: static; } .prueba-lado { min-height: 0; } }
/* Los dos paneles miden lo mismo y la sección entra en una pantalla; lo que se desborda es la
   lista, dentro de su panel. */
.prueba-lado { background: var(--panel); border: 1px solid var(--linea-2); border-radius: var(--radio); padding: 1rem 1.1rem; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: clamp(400px, 54vh, 500px); }
/* La sección entra en una pantalla: lo que crece son las dos listas, con su propio scroll, no
   la página. El recuadro de totales queda fuera del scroll, anclado abajo. */
/* align-content: start es obligatorio aquí: al darle un alto definido a un contenedor grid, sus
   filas automáticas se reparten ese alto y el texto se aplasta a tres píxeles. */
.renglones-llegan, .tarjetas-producen { overflow-y: auto; min-height: 0; padding-right: .35rem; scrollbar-width: thin; align-content: start; grid-auto-rows: min-content;
  /* El difuminado del borde inferior dice que hay más abajo sin meter una barra ni una flecha. */
  mask-image: linear-gradient(to bottom, #000 calc(100% - 34px), transparent 100%); }
.prueba-lado h3 { display: flex; justify-content: space-between; align-items: baseline; color: var(--tinta-2); text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; margin-bottom: 1rem; }
.prueba-lado h3 span { color: var(--tinta-3); font-weight: 500; letter-spacing: 0; text-transform: none; }
.prueba-medio { display: grid; gap: .9rem; justify-items: center; text-align: center; align-content: center; }
.prueba-nota { color: var(--tinta-3); font-size: .86rem; margin: 0; max-width: 24ch; }
.renglones-llegan { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .8rem; }
/* Cinco columnas, las mismas que trae el archivo de Amazon, con su encabezado arriba: así se
   ve que es el reporte tal cual y no un resumen. */
.reporte-caja { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; border: 1px solid var(--linea); border-radius: 12px; overflow: hidden; background: var(--noche-2); }
.reporte-enc, .renglones-llegan li { display: grid; grid-template-columns: 4.5em 4.5em minmax(0, 1.2fr) minmax(0, 1.35fr) 4.2em; gap: .4rem; padding: .5rem .6rem; }
.reporte-enc span, .renglones-llegan li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.reporte-enc { font: 700 .58rem/1.25 var(--display); letter-spacing: .02em; text-transform: uppercase; color: var(--tinta-3); border-bottom: 1px solid var(--linea); background: rgba(74,140,255,.06); align-items: end; }
.renglones-llegan { gap: 0; }
.renglones-llegan li { border-radius: 0; background: none; border: 0; border-bottom: 1px solid rgba(199,210,232,.07); color: var(--tinta-2); transition: opacity .35s, transform .35s cubic-bezier(.2,.8,.2,1); white-space: nowrap; overflow: hidden; }

/* El renglón que ya se clasificó no desaparece: se atenúa y se recorre, para que se vea que
   pasó de un lado al otro y no que la lista se vació. */
.renglones-llegan li.vuela { opacity: .5; transform: translateX(14px); }
.tarjetas-producen { display: grid; gap: .7rem; }
.tarjeta-conductor { border: 1px solid var(--linea-2); border-radius: 14px; padding: .8rem .95rem; background: var(--panel-2); display: grid; gap: .5rem; opacity: 0; transform: translateY(10px); animation: entra .45s cubic-bezier(.2,.8,.2,1) forwards; }
.tarjeta-conductor.pendiente { border-color: rgba(255, 190, 90, .5); }
.tc-cab { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; }
.tc-cab b { font-family: var(--display); font-size: 1rem; color: #fff; }
.tc-cab .tc-total { font: 700 1rem var(--display); color: var(--electrico); font-variant-numeric: tabular-nums; }
.tc-cab .tc-quien { color: var(--tinta-3); font-size: .78rem; margin-left: .5rem; font-weight: 500; }
.tc-rutas { display: grid; gap: .3rem; }
.tc-ruta { display: grid; grid-template-columns: 4.6em minmax(0, 1fr) auto; gap: .6rem; align-items: center; font-size: .84rem; color: var(--tinta-2); }
.tc-ruta .chips { display: flex; gap: .35rem; flex-wrap: wrap; }
.chip { font: 600 .68rem/1 var(--display); letter-spacing: .04em; padding: .32rem .5rem; border-radius: 999px; border: 1px solid var(--linea-2); color: var(--tinta-2); white-space: nowrap; }
.chip.azul { background: rgba(74,140,255,.16); border-color: rgba(74,140,255,.5); color: #BBD3FF; }
.chip.ambar { background: rgba(255,190,90,.14); border-color: rgba(255,190,90,.5); color: #FFD59A; }
.chip.gris { color: var(--tinta-3); }
/* La calificación de Amazon, de mejor a peor. Es el único lugar de la página donde el color
   dice algo por sí mismo, así que aquí sí sale de la familia azul. */
.chip.cal { font-weight: 700; letter-spacing: .02em; }
.chip.cal.s1 { background: rgba(52,211,153,.16); border-color: rgba(52,211,153,.55); color: #6EE7B7; }
.chip.cal.s2 { background: rgba(132,204,22,.16); border-color: rgba(132,204,22,.55); color: #BEF264; }
.chip.cal.s3 { background: rgba(250,204,21,.15); border-color: rgba(250,204,21,.5); color: #FDE68A; }
.chip.cal.s4 { background: rgba(251,146,60,.16); border-color: rgba(251,146,60,.55); color: #FDBA74; }
.chip.cal.s5 { background: rgba(248,113,113,.16); border-color: rgba(248,113,113,.55); color: #FCA5A5; }
.tc-cal { display: flex; gap: .4rem; }
.tc-monto { font-variant-numeric: tabular-nums; color: #fff; font-weight: 600; }
.tc-nota { font-size: .8rem; color: #FFD59A; }
.prueba-totales { margin-top: .9rem; padding: .9rem 1rem; border-radius: 12px; background: rgba(74,140,255,.1); border: 1px solid rgba(74,140,255,.35); display: grid; gap: .3rem; font-size: .92rem; color: var(--tinta-2); }
.prueba-totales b { color: #fff; font-family: var(--display); }
@keyframes entra { to { opacity: 1; transform: none; } }

/* ---- cierre y pie ---- */
.cierre { text-align: center; background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(34,81,168,.35), transparent 70%); }
.cierre .copete { justify-content: center; }
.cierre .dice { margin: 1rem auto 1.8rem; }
.cierre-nota { color: var(--tinta-3); margin: 1.2rem 0 0; font-size: .95rem; }
.pie { border-top: 1px solid var(--linea); padding: 2rem 0 3rem; color: var(--tinta-4); font-size: .85rem; }
.pie .canal { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ---- íconos en línea (un solo set, trazo 1.75, caja de 24) ---- */
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ---- el camino del dato, con la forma de la lámina de la presentación ---- */
.flujo { background: linear-gradient(to bottom, var(--noche), var(--noche-2) 50%, var(--noche)); position: relative; overflow: hidden; }
/* La constelación de la lámina: puntos y líneas colocados a mano, no una retícula repetida.
   Una retícula uniforme se lee como papel milimétrico; lo que da carácter es lo irregular. */
.constelacion { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .5; }
.constelacion line { stroke: rgba(74,140,255,.22); stroke-width: .5; }
.constelacion circle { fill: rgba(74,140,255,.5); }
.constelacion circle.grande { fill: rgba(74,140,255,.75); }
.flujo > .canal { position: relative; }
.flujo .escena-cabeza { margin-bottom: clamp(2rem, 4vw, 3rem); }
.flujo .escena-cabeza h2 { max-width: 22ch; }
/* Las etiquetas de las cuatro etapas van en una sola línea, como en la lámina: cada etapa es
   una rejilla de dos filas y el cuerpo se centra en la altura que quede. La textura de puntos
   es la constelación de la presentación, apenas visible. */
.diagrama { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.05fr) auto minmax(0, .62fr) auto minmax(0, 1fr); gap: clamp(.6rem, 1.4vw, 1.4rem); align-items: stretch; position: relative; }

.etapa-cuerpo { align-self: center; }
.etapa { display: grid; grid-template-rows: auto 1fr; gap: .7rem; }
.etapa-tag { font: 700 .68rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .2rem; text-align: center; color: var(--tinta-3); }
.etapa.cruda .etapa-tag { color: var(--crudo); }
.etapa.proceso .etapa-tag, .etapa.base .etapa-tag { color: var(--electrico); }
.etapa.salida .etapa-tag { color: var(--resuelto); }
.etapa ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.etapa li { display: flex; align-items: center; gap: .65rem; padding: .72rem .9rem; border: 1px solid var(--linea-2); border-radius: 12px; background: var(--panel); font: 500 .92rem var(--texto); color: var(--tinta-2); }
.etapa .ico { width: 18px; height: 18px; flex: none; color: var(--tinta-3); }
.etapa.salida li { border-color: rgba(16,185,129,.32); }
.etapa.salida .ico { color: var(--resuelto); }

.caja-proceso { border: 1px solid rgba(74,140,255,.4); border-radius: 16px; background: linear-gradient(165deg, rgba(74,140,255,.12), rgba(74,140,255,.02)); padding: 1.1rem 1.1rem .8rem; display: grid; gap: .8rem; }
.caja-proceso ul { gap: .6rem; }
.caja-proceso li { border: 0; background: none; padding: 0; color: var(--tinta); font-family: var(--display); font-weight: 600; font-size: .95rem; gap: .7rem; }
.caja-proceso li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--electrico); flex: none; }
.sello { font: 700 .6rem var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--tinta-4); text-align: right; }

/* Las flechas entre etapas: tres guiones y una punta, como en la lámina. */
.paso-flecha { display: flex; align-items: center; justify-content: center; gap: .3rem; }
.paso-flecha span { width: 10px; height: 2px; border-radius: 2px; background: var(--electrico); opacity: .55; }
.paso-flecha svg { width: 20px; height: 20px; fill: none; stroke: var(--electrico); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.paso-flecha.verde span { background: var(--resuelto); }
.paso-flecha.verde svg { stroke: var(--resuelto); }
.paso-flecha.ciclo { display: grid; justify-items: center; align-content: center; gap: .4rem; }
.paso-flecha.ciclo svg { width: clamp(64px, 7vw, 96px); height: auto; fill: none; stroke: var(--electrico); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 7 6; }
.paso-flecha.ciclo p { margin: 0; font: 700 .6rem/1.3 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--electrico); text-align: center; }

.cilindro { display: grid; justify-items: center; }
.cilindro svg { width: clamp(58px, 6.5vw, 82px); height: auto; fill: none; stroke: var(--electrico); stroke-width: 2; opacity: .85; }
.base-pie { margin: .5rem 0 0; text-align: center; font-size: .86rem; color: var(--tinta-3); line-height: 1.35; }
.diagrama-pie { margin: clamp(1.4rem, 3vw, 2.2rem) 0 0; text-align: center; font-size: .92rem; color: var(--tinta-3); font-style: italic; }

/* En pantalla angosta el diagrama se cuenta de arriba abajo y las flechas apuntan hacia abajo. */
@media (max-width: 1000px) {
  .diagrama { grid-template-columns: 1fr; gap: .9rem; }
  .diagrama::before { display: none; }
  .etapa { grid-template-rows: auto auto; }
  .paso-flecha { justify-content: center; }
  .paso-flecha:not(.ciclo) { flex-direction: column; gap: .25rem; }
  .paso-flecha:not(.ciclo) span { width: 2px; height: 8px; }
  .paso-flecha:not(.ciclo) svg { rotate: 90deg; }
  .paso-flecha.ciclo svg { rotate: 90deg; width: 52px; }
  .paso-flecha.ciclo { grid-template-columns: auto auto; align-items: center; gap: .8rem; }
}

.cambio-cifras { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.cambio-cifras li { display: grid; gap: .35rem; padding: 1.4rem 1.5rem; border-radius: 14px; border: 1px solid var(--linea); background: linear-gradient(135deg, rgba(74,140,255,.12), rgba(74,140,255,.03)); }
.cambio-cifras b { font: 800 clamp(2.6rem, 5vw, 4.2rem)/.95 var(--display); color: #fff; letter-spacing: -.035em; }
.cambio-cifras span { color: var(--tinta-2); font-size: .95rem; }
@media (max-width: 700px) { .cambio-cifras { grid-template-columns: 1fr; } }

/* ---- mídalo: la semana del líder ---- */
.medir { background: linear-gradient(to bottom, var(--noche), var(--noche-2) 45%, var(--noche)); }
.lider { border: 1px solid var(--linea-2); border-radius: var(--radio); background: var(--panel); overflow: hidden; }
.lider-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.2rem; border-bottom: 1px solid var(--linea); background: var(--noche-2); }
.lider-titulo { font: 700 .95rem var(--display); color: #fff; }
.lider-nota { font-size: .86rem; color: var(--tinta-3); }
/* La tabla se desborda a lo ancho dentro de su caja, nunca la página. */
.lider-tabla-caja { overflow-x: auto; }
.lider-tabla { width: 100%; border-collapse: collapse; font-size: .88rem; }
.lider-tabla th, .lider-tabla td { padding: .55rem .5rem; text-align: center; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.lider-tabla thead th { font: 700 .72rem var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); background: var(--noche-2); position: sticky; top: 0; }
.lider-tabla .d-nom { display: block; }
.lider-tabla .d-num { display: block; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--tinta-4); font-size: .68rem; }
.lider-tabla .c-nombre { text-align: left; padding-left: 1.2rem; display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; font-weight: 600; color: var(--tinta); }
.lider-tabla tbody .c-nombre span:first-child { font-family: var(--display); }
.lider-tabla .c-pago { text-align: right; padding-right: 1.2rem; font-variant-numeric: tabular-nums; font-weight: 700; color: #fff; }
.lider-tabla thead .c-pago, .lider-tabla thead .c-nombre { color: var(--tinta-3); }
.lider-tabla td.ruta { color: var(--tinta); }
.lider-tabla td.descanso { color: var(--tinta-4); }
.lider-tabla td.incidencia { color: #FDBA74; }
.lider-tabla td.vacio { color: var(--tinta-4); }
/* El punto azul es la confirmación del líder: sin él, ese día todavía no cuenta. */
.lider-tabla td.ok span { position: relative; }
.lider-tabla td.ok span::after { content: ""; position: absolute; top: -.15rem; right: -.5rem; width: 5px; height: 5px; border-radius: 50%; background: var(--electrico); }
.lider-tabla .marca { display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-left: .35rem; }
.lider-tabla .marca.retardo { background: #FCA5A5; }
.lider-tabla .marca.parcial { background: #FDE68A; }
.lider-tabla tbody tr:hover td, .lider-tabla tbody tr:hover th { background: rgba(74,140,255,.06); }
.lider-pie { margin: 0; padding: .9rem 1.2rem; color: var(--tinta-3); font-size: .84rem; border-top: 1px solid var(--linea); }
@media (max-width: 700px) { .lider-tabla { font-size: .8rem; } .lider-tabla .c-nombre { padding-left: .8rem; } }

/* ---- las pantallas en pestañas ---- */
.pestanas-botones { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.pestanas-botones button { background: var(--panel); border: 1px solid var(--linea-2); color: var(--tinta-2); border-radius: 999px; padding: .65rem 1.2rem; font: 700 .92rem var(--display); cursor: pointer; transition: transform .18s cubic-bezier(.2,.8,.2,1), border-color .18s, color .18s; }
.pestanas-botones button:hover { transform: translateY(-1px); border-color: var(--electrico); }
.pestanas-botones button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.pestanas-botones button:active { transform: translateY(0); }
.pestanas-botones button[aria-selected="true"] { background: var(--electrico); color: var(--noche); border-color: var(--electrico); }
.pestana { display: grid; gap: 1.4rem; }
.pestana[hidden] { display: none; }
.pestana-dice { color: var(--tinta-2); max-width: 70ch; margin: 0; font-size: 1.05rem; }
.pestana-dice b { color: #fff; font-family: var(--display); }
.pestana .marco + .marco { margin-top: 0; }

/* ---- precio y prueba ---- */
.precio { background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(34,81,168,.35), transparent 70%); }
.precio-par { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1.4rem; align-items: stretch; }
@media (max-width: 860px) { .precio-par { grid-template-columns: 1fr; } }
.precio-tarjeta { background: var(--panel); border: 1px solid var(--linea-2); border-radius: var(--radio); padding: 1.6rem 1.7rem; display: grid; gap: 1rem; align-content: start; }
.precio-tarjeta h3 { font-size: 1.3rem; color: #fff; letter-spacing: -.015em; }
.precio .escena-cabeza h2 { font-size: clamp(2.6rem, 5.6vw, 4.6rem); letter-spacing: -.035em; }
.precio-tarjeta.destacada { background: linear-gradient(160deg, rgba(74,140,255,.2), rgba(74,140,255,.04)); border-color: rgba(74,140,255,.5); box-shadow: 0 30px 80px -40px rgba(74,140,255,.5); }
.precio-tarjeta .copete { margin-bottom: 0; }
.lista-palomas, .lista-pasos { margin: 0; padding: 0; display: grid; gap: .65rem; color: var(--tinta-2); }
.lista-palomas { list-style: none; }
.lista-palomas li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: .7rem; align-items: start; }
.lista-palomas li::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: rgba(74,140,255,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A8CFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat; margin-top: .15rem; }
.lista-pasos { list-style: none; counter-reset: paso; }
.lista-pasos li { counter-increment: paso; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: .8rem; align-items: start; }
.lista-pasos li::before { content: counter(paso); width: 28px; height: 28px; border-radius: 50%; background: var(--electrico); color: var(--noche); font: 800 .85rem/28px var(--display); text-align: center; }
.precio-nota { color: var(--tinta-3); font-size: .92rem; margin: 0; }
.precio-tarjeta .acciones { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: .4rem; }