/* 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); }
/* La línea que dice de qué giro es esto. Va sin data-en, o sea sin esperar al desplazamiento:
   es lo primero que tiene que leerse, y la palabra Amazon es el único filtro que le dice al
   lector en diez segundos si la página es para él. */
.dice.quien { margin: .8rem 0 0; max-width: 34ch; font-size: clamp(1rem, 1.35vw, 1.2rem); color: var(--tinta-2); }
.dice.quien b { color: var(--tinta); font-weight: 700; }
/* En una laptop de 720 px de alto el titular, esta línea y el botón tienen que caber en la
   primera pantalla: la prueba 6 de probar-caida.py falla si el botón se sale. Aquí se encoge. */
@media (max-height: 800px) { .dice.quien { margin-top: .55rem; font-size: 1rem; } }
.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, .caida-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.caida-video, .avance { display: none; }
.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: 640px; 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. */
/* El matiz que faltaba: cuatro de las cinco variables salen de la ruta y la quinta, la
   calificación, es semanal. Sin esto se entiende que Amazon califica ruta por ruta, que fue la
   confusión que costó una revisión completa del modelo de datos. */
.cinco li i { display: block; font-style: normal; font-size: .8em; color: var(--tinta-3); letter-spacing: .01em; margin-top: .15rem; }
.cinco { list-style: none; margin: .6rem 0 .4rem; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .7rem; }
/* Seis caben en 3x2 y no en una fila: a seis columnas la palabra más larga parte en dos renglones. */
.cinco.seis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* El DNR no es una llave del tabulador, es el descuento. Se ve distinto para que no se lea como
   la sexta variable de la tarifa. */
.cinco li.resta { border-style: dashed; background: rgba(15,21,38,.3); }
.cinco li.resta .ico { color: var(--tinta-3); }
.cinco li { display: grid; justify-items: center; gap: .7rem; padding: 1.15rem .5rem 1rem; border: 1px solid var(--linea-2); border-radius: 16px; background: rgba(15,21,38,.55); text-align: center; font: 600 clamp(1.08rem, 1.35vw, 1.3rem) var(--display); color: var(--tinta); letter-spacing: -.01em; }
.cinco .ico { width: clamp(38px, 3.4vw, 46px); height: clamp(38px, 3.4vw, 46px); 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: .92rem; padding: .9rem .4rem .8rem; } .cinco .ico { width: 32px; height: 32px; } }

/* Los orígenes de la información: se entienden por el ícono, la palabra solo confirma. Por eso
   el ícono es más grande que la letra y no al revés: a 22 px medía lo mismo que el texto y
   pasaba por viñeta. Ahora tiene su placa redonda y manda el renglón. */
.origenes { list-style: none; margin: .7rem 0 .3rem; padding: 0; display: grid; gap: .85rem; }
.origenes li { display: flex; align-items: center; gap: 1.1rem; font: 600 clamp(1.22rem, 1.85vw, 1.62rem) var(--display); color: var(--tinta); letter-spacing: -.015em; }
.origenes .ico { width: clamp(30px, 2.9vw, 40px); height: clamp(30px, 2.9vw, 40px); color: var(--electrico); flex: none;
  box-sizing: content-box; padding: .5rem; border-radius: 14px;
  background: rgba(74,140,255,.12); border: 1px solid rgba(74,140,255,.28); }

/* 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: .5rem 0 0; padding: 0; display: grid; gap: .9rem; }
.fuentes li, .responde li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 1.05rem; align-items: center; font: 500 clamp(1.12rem, 1.6vw, 1.36rem) 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.3rem, 2vw, 1.78rem); letter-spacing: -.02em; color: #fff; }
/* La paloma pasó de 18 px a 34: al tamaño anterior era una viñeta, no un ícono, y el renglón
   se leía como una lista cualquiera en vez de como tres cosas resueltas. */
.responde li::before { content: ""; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--electrico); background: rgba(74,140,255,.12) 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/19px no-repeat; }

.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 clamp(1.05rem, 1.3vw, 1.22rem) var(--texto); color: var(--tinta-2); }
.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; }
/* EL PARPADEO ESTABA AQUÍ. Este degradado es lo que sostiene el texto sobre la escena, y su
   opacidad la escribe landing.js sesenta veces por segundo en `--papel-vivo`. Pero el respaldo
   de la variable era 1, y landing.js no la escribe hasta el primer cuadro en que el beat ya
   está dentro de su tramo: en ese hueco el panel se pintaba al 97 por ciento de negro sobre
   toda la pantalla, con el texto todavía en opacidad 0, y la transición de .4s tardaba un
   tercio de segundo en bajarlo. Un velo negro que entra y se va, cinco veces por pasada, una
   por beat. Medido sobre los píxeles que salen a pantalla el 20 de septiembre: el brillo medio
   de la ventana caía entre 12.6 y 46.1 por ciento durante más de veinte cuadros.
   El respaldo ahora es 0 y la transición se fue: el valor ya viene suavizado desde el motor,
   y la transición solo agregaba retraso, además en los dos sentidos (al subir dejaba el papel
   hasta 0.43 por debajo del texto que tenía que sostener). */
.beat::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--papel-vivo, 0); }
.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%);
  }
}
/* La escena sin secuencia: con movimiento reducido, o si el navegador bloqueó el video del
   teléfono, la caída deja de ser una escena y se vuelve la foto más el texto apilado.
   Dos cosas medidas el 20 de septiembre que había que corregir aquí:
   1. La foto quedaba `static` y tomaba el ancho completo con su proporción de 2400x1340, o sea
      0.558 por el ancho de la ventana. En cualquier laptop (1280x720, 1366x768, 1512x860,
      1920x1080) eso son entre 715 y 1072 px de alto y empujaba el titular DEBAJO de la línea
      de flotación: la primera pantalla era la foto sola, sin una sola letra y sin el botón.
      Ahora la foto tiene techo y recorta, así que el titular entra siempre.
   2. El degradado del pie (`.caida-pega::after`, 22vh anclados abajo) dejaba de cubrir el pie
      de una pantalla y pasaba a cubrir el pie de toda la columna de texto, encima del último
      beat, porque `.caida-textos` en `static` deja su `z-index` sin efecto. El botón final
      quedaba a 1.69 de contraste. Sin video que desvanecer, el degradado no pinta nada. */
.caida:not(.viva) .caida-pega { position: relative; height: auto; min-height: 0; }
.caida:not(.viva) .caida-pega::after { content: none; }
.caida:not(.viva) .caida-fija { position: static; max-height: 46svh; object-fit: cover; }
.caida:not(.viva) .caida-lienzo, .caida:not(.viva) .caida-video, .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; } }

/* Mientras la escena se cuenta sola, la pista se enciende. Las dos cosas dicen lo mismo y
   juntas se leen como una: esto avanza con el scroll, y usted lo puede tomar cuando quiera.
   La clase la pone y la quita `correrSolo()` en landing.js, y el primer gesto del visitante la
   cancela junto con el recorrido. Antes colgaba de `invitando`, que era el adelanto que
   avanzaba y regresaba; ese adelanto ya no existe. */
body.corriendo-solo .pista {
  border-color: var(--electrico);
  background: rgba(7,9,15,.82);
  box-shadow: 0 0 0 6px rgba(74,140,255,.12), 0 12px 40px -12px rgba(74,140,255,.5);
  animation-duration: 1s;
}
body.corriendo-solo .pista-txt b { color: #fff; }
body.corriendo-solo .pista-riel { border-color: var(--electrico); }
body.corriendo-solo .pista-riel i { animation-duration: .7s; }
@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. */
/* Se llama `bajada` y no `abajo` porque `abajo` ya era el modificador de un beat de la caída
   (`.beat.izquierda.abajo`): el fondo opaco de este bloque le caía encima al beat de "2 días" y
   tapaba la escena con un rectángulo negro. */
.bajada { position: relative; background: var(--noche); }
.bajada > section { position: relative; z-index: 1; }
.bajada > section.flujo, .bajada > section.medir, .bajada > section.pantallas { background: none; }
.bajada > section.prueba { background: linear-gradient(to bottom, rgba(13,17,32,0), rgba(13,17,32,.45), rgba(13,17,32,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; }
.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); }
.chip.verde { background: rgba(16,185,129,.16); border-color: rgba(16,185,129,.5); color: #6EE7B7; }
.chip.rojo { background: rgba(248,113,113,.16); border-color: rgba(248,113,113,.55); color: #FCA5A5; }
/* 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; } }

/* ---- el pie ---- */
.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; }
/* El pie dice quién está detrás y cómo encontrarlo: a la izquierda Bravman Consulting, a la
   derecha su página, su correo y el WhatsApp. Es la última parada de alguien que ya decidió
   escribir, así que los contactos van grandes y con ícono, no como letra chica. */
.pie .pie-rejilla { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem 3rem; align-items: start; }
.pie p { margin: 0; line-height: 1.55; max-width: 52ch; }
.pie-quien { display: grid; gap: .55rem; }
.pie-marca { font: 800 1.15rem/1.2 var(--display); color: var(--tinta); letter-spacing: -.01em; }
.pie-quien p:not(.pie-marca) { color: var(--tinta-3); font-size: .92rem; }
.pie-lugar { color: var(--tinta-4) !important; font-size: .85rem !important; }
.pie-contacto { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; justify-items: start; }
.pie-contacto a { display: inline-flex; align-items: center; gap: .7rem; color: var(--tinta-2); text-decoration: none; font-size: .98rem; cursor: pointer; }
.pie-contacto a:hover, .pie-contacto a:focus-visible { color: var(--tinta); }
.pie-contacto .ico { width: 22px; height: 22px; color: var(--electrico); }
.pie-contacto .ico-lleno { fill: currentColor; stroke: none; }
@media (max-width: 720px) { .pie .pie-rejilla { grid-template-columns: 1fr; } }

/* ---- í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. */
.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. */
/* Un día con más de una ruta: las etiquetas se apilan dentro de la misma celda en vez de que
   la segunda borre a la primera. Pasa de verdad, un conductor puede hacer dos rutas en un día
   con distinta unidad y distinto contrato. */
.lider-tabla td.varias { line-height: 1.25; }
.lider-tabla td.varias span { display: block; }
.lider-tabla td.varias span + span { margin-top: .15rem; opacity: .82; }
.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; }
/* La celda del nombre NO es flex. Lo era, y un `th` en flex deja de ser celda de tabla: su
   alto ya no lo manda el renglón, así que la raya de abajo del nombre quedaba a distinta altura
   que la del resto de la fila y la columna se veía desfasada de lo de abajo. Sigue siendo celda
   y lo que se apila son sus hijos. */
.lider-tabla .c-nombre { text-align: left; padding-left: 1.2rem; font-weight: 600; color: var(--tinta); vertical-align: middle; }
.lider-tabla .c-nombre > span:first-child { display: block; }
.lider-tabla .c-nombre > .chip { display: inline-flex; margin-top: .3rem; }
.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; }
/* La cuadrícula dice qué pasó cada día; al pulsar una celda se abre el día y dice por qué,
   que es lo mismo que hace el sistema. Sin esto la tabla se lee como abreviaturas. */
.lider-tabla td[data-dia] { cursor: pointer; }
.lider-tabla td[data-dia]:hover { background: rgba(74,140,255,.12); }
.lider-tabla td.puesta { background: rgba(74,140,255,.2); box-shadow: inset 0 0 0 1px rgba(74,140,255,.5); }
.lider-detalle { padding: .9rem 1.2rem; border-top: 1px solid var(--linea); background: var(--noche-2); display: grid; gap: .6rem; }
.lider-detalle[hidden] { display: none; }
.lider-detalle-cab { margin: 0; font-size: .9rem; color: var(--tinta-2); }
.lider-detalle-cab b { color: #fff; font-family: var(--display); }
.lider-detalle-fila { margin: 0; display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.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-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; }
/* La paloma va posicionada, NO como columna de una rejilla. En rejilla, cada hijo del renglón
   es una celda: al poner `<b>título</b> más texto`, el texto quedaba en una tercera celda que
   caía en la columna de 20 px y salía una palabra por renglón. Con la paloma absoluta, el
   renglón es texto normal y adentro puede ir lo que sea. */
.lista-palomas li { position: relative; padding-left: 2rem; }
.lista-palomas li b { color: #fff; }
.lista-palomas li::before { content: ""; position: absolute; left: 0; top: .2rem; 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; }
.lista-pasos { list-style: none; counter-reset: paso; }
/* El número va posicionado, NO como columna de una rejilla: en rejilla cada hijo del renglón
   es una celda, y al poner título, texto y etiqueta dentro de un paso, el texto caía en la
   columna de 28 px y salía una palabra por renglón. Es el mismo error que tenía la lista de
   lo que incluye. */
.lista-pasos li { counter-increment: paso; position: relative; padding-left: 2.6rem; }
.lista-pasos li + li { margin-top: .95rem; }
.lista-pasos li::before { content: counter(paso); position: absolute; left: 0; top: 0; 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; }

/* ---- el teléfono ---- */
/* La caída del teléfono es un video que se reproduce solo, una pantalla, con el texto llegando
   en sincronía; no la mueve el scroll. El porqué está en montarCaidaVideo, en landing.js. */
@media (max-width: 700px) {
  .caida.hero { height: auto; }
  /* La escena llena la pantalla entera. Estaba en 92svh para dejar asomar la sección siguiente,
     y eso la acortaba dos veces: `svh` ya es el alto CON las barras de Safari visibles (unos
     752 px de los 844 de un iPhone 14), y encima el 92% lo bajaba a 691. El video terminaba
     ocupando el 82% de lo que se ve, y por eso parecía corto. No era proporción del video: es
     más ancho que la pantalla, así que con `cover` siempre llena el alto de su caja.
     `dvh` es el alto realmente visible en cada momento; `svh` queda de respaldo para los
     navegadores que no lo entienden. */
  .caida.hero .caida-pega { position: relative; height: 100svh; height: 100dvh; min-height: 500px; }
  .caida.hero .caida-lienzo { display: none; }
  .caida.hero .caida-video { display: block; }
  /* El degradado de la caja NO va en el teléfono: se encimaba con el del beat y entre los dos
     dejaban el cuarto inferior del cuadro en negro sólido, así que el video parecía cortado. */
  .caida.hero .caida-pega::after { content: none; }
  /* El texto va del lado donde el video NO tiene acción, beat por beat: `data-pos-movil`. En la
     salida y en la entrega la camioneta y la casa ocupan la mitad de abajo, así que ahí el texto
     sube. El degradado acompaña y se abre en el borde contrario, para que nunca quede una franja
     negra sólida: eso era lo que hacía ver el video cortado. */
  .caida.hero .beat { padding: clamp(1rem, 3vh, 2rem) clamp(1.2rem, 5vw, 2rem) clamp(2.6rem, 7vh, 3.6rem); }
  .caida.hero .beat { justify-content: start; }
  .caida.hero .beat[data-pos-movil="abajo"] { align-content: end; }
  .caida.hero .beat[data-pos-movil="arriba"] { align-content: start; padding-top: clamp(3rem, 8vh, 4.4rem); }
  .caida.hero .beat[data-pos-movil="abajo"]::before {
    background: linear-gradient(to top,
      rgba(7,9,15,.58) 0%, rgba(7,9,15,.86) 10%, rgba(7,9,15,.82) 55%,
      rgba(7,9,15,.34) 78%, rgba(7,9,15,.04) 100%);
  }
  .caida.hero .beat[data-pos-movil="arriba"]::before {
    background: linear-gradient(to bottom,
      rgba(7,9,15,.58) 0%, rgba(7,9,15,.86) 10%, rgba(7,9,15,.82) 55%,
      rgba(7,9,15,.34) 78%, rgba(7,9,15,.04) 100%);
  }
  /* El degradado solo no alcanza: la escena se mueve y por detrás del texto pasan la carrocería
     blanca y las luces de freno. Una sombra pegada a las letras oscurece ahí y solo ahí, así que
     el texto aguanta cualquier cuadro sin poner una placa negra encima del video. */
  .caida.hero .beat-caja { text-shadow: 0 1px 2px rgba(7,9,15,.75), 0 2px 20px rgba(7,9,15,.92); }
  .caida.hero .beat-caja .ico { filter: drop-shadow(0 2px 12px rgba(7,9,15,.9)); }
  .riel, .pista { display: none; }
  .beat h1 { font-size: clamp(2.3rem, 10.5vw, 3.2rem); }
  .beat h2 { font-size: clamp(1.9rem, 8.6vw, 2.6rem); }
  /* Cuánto falta de la escena. Sin esto el visitante no sabe si son diez segundos o dos
     minutos, y se va. Se anima con `scale`, nunca con `width`, para no reflujar en cada cuadro. */
  .caida.hero .avance {
    display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 3;
    background: rgba(255,255,255,.1); pointer-events: none;
  }
  .caida.hero .avance span {
    display: block; height: 100%; background: var(--electrico);
    transform: scaleX(var(--parte, 0)); transform-origin: left;
  }
}

/* ---- el sistema, vuelto a dibujar dentro de la landing ---- */
/* Las cuatro pantallas de esta sección no son capturas: son las del producto vueltas a dibujar
   aquí con sus mismos tokens (los de src/web/layout.js) y los datos de la demostración, para
   que se puedan tocar. Una captura enseña; esto deja probar, que es lo que decide una compra.
   Todo lo de adentro vive bajo `.app`, que reinicia color y tipografía: la landing es noche
   azul marino y el sistema es claro, y las dos cosas conviven en la misma página sin pelearse.
   Los nombres llevan `ap-` para no cruzarse con los de la landing (.dice, .marco, .chip). */
.app {
  --lateral: #26313D; --lateral-2: #323F4B; --lateral-txt: #B6C3D0; --lateral-grupo: #7A8B9C;
  --fondo: #F5F7FA; --papel: #FFFFFF; --raya: #E7ECF2; --raya-2: #D3DBE6;
  --negro: #101A2B; --gris: #54637A; --gris-2: #5F7085;
  --az: #2E90D9; --az-f: #1D6FA8; --az-s: #D8EAFA; --az-b: #93C6EC;
  --ve: #6FB544; --ve-f: #3F7522; --ve-s: #DFF0D2; --ve-b: #A6D387;
  --am: #E89A00; --am-f: #8A5B00; --am-s: #FCEBC2; --am-b: #F0C765;
  --ro: #DE3A28; --ro-f: #A81E10; --ro-s: #FCDED8; --ro-b: #F2A296;
  --r: 12px;
  --sombra-app: 0 1px 2px rgba(16,26,43,.06), 0 4px 12px -6px rgba(16,26,43,.12);
  font: 400 14px/1.5 "Inter", system-ui, -apple-system, sans-serif;
  color: var(--negro); background: var(--fondo);
  display: grid; grid-template-columns: 216px minmax(0, 1fr);
  /* Alto fijo, no mínimo: el sistema se recorre por dentro de su marco, como se recorrería en
     una ventana de navegador. Con `min-height` la pantalla crecía hacia abajo y empujaba la
     landing entera, que es justo lo contrario de enseñar una aplicación. */
  height: clamp(560px, 82svh, 860px); text-align: left;
}
.app *, .app *::before, .app *::after { box-sizing: border-box; }
.app h1, .app h2, .app h3 { font-family: inherit; letter-spacing: -.01em; color: var(--negro); }
.app h1 { font-size: 24px; font-weight: 700; line-height: 1.2; }
.app h2 { font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.app h3 { font-size: 13px; font-weight: 600; }
.app p { margin: 0; }
.app .ic { width: 20px; height: 20px; flex: none; }

/* El menú lateral: el mismo azul marino de las letras del logo, con el grupo en versalitas. */
.ap-lateral { background: var(--lateral); padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.ap-marca { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; color: #fff; font-weight: 700; font-size: 15px; }
.ap-marca span { width: 28px; height: 28px; border-radius: 8px; background: #fff; color: var(--lateral); display: grid; place-items: center; flex: none; }
.ap-marca span img { width: 20px; height: 20px; }
.ap-lateral h3 { color: var(--lateral-grupo); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; margin: 14px 8px 6px; font-weight: 600; }
.ap-lateral a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; color: var(--lateral-txt); text-decoration: none; font-size: 12.5px; line-height: 1.3; }
.ap-lateral a.puesto { background: var(--az-f); color: #fff; }
.ap-lateral a:not(.puesto):hover { background: var(--lateral-2); color: #fff; }

/* `min-height: 0` no es cosmético: sin él, un hijo flexible crece hasta el alto de su contenido
   en vez de quedarse en el espacio que le toca, y entonces `overflow: auto` no tiene de dónde
   recortar y no aparece la barra. Medido: dentro del marco de teléfono el cuerpo llegaba a
   1248 px en una ventana de 640 y se cortaba sin poder rodar. */
.ap-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ap-barra { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 20px; background: var(--papel); border-bottom: 2px solid var(--az); }
/* La marca vive en el menú lateral; en el teléfono, que no lo tiene, sube a la barra. */
.app:not(.movil) .ap-barra .ap-marca { display: none; }
.ap-barra b { font-size: 13.5px; font-weight: 600; }
.ap-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--az-f); color: #fff; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }
/* Sin overscroll-behavior: contain. Con él, al llegar al fondo o al tope del tablero la rueda se
   quedaba muerta y había que sacar el cursor de la pantalla para seguir bajando la página. El
   navegador ya encadena solo: primero rueda el tablero y, cuando se acaba, sigue la página. */
.ap-cuerpo { padding: 22px 24px 26px; overflow-y: auto; overflow-x: hidden; flex: 1 1 0; min-height: 0; }

/* La cabecera de la semana: título, avance de los pasos, la cifra y el selector. */
.ap-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; }
/* La columna derecha de la cabecera: el selector arriba y la cifra debajo, las dos al mismo
   ancho. Sin el ancho fijo, el texto al pie de la tarjeta se parte palabra por palabra. */
.ap-cab-der { display: grid; gap: 12px; justify-items: stretch; width: 260px; max-width: 100%; }
.ap-cab-der .ap-elegir { justify-content: flex-end; }
.ap-cab .ap-sub { margin-top: 5px; color: var(--gris); font-size: 13px; }
.ap-barrita { margin: 11px 0 6px; height: 8px; width: 240px; max-width: 100%; border-radius: 999px; background: var(--raya-2); overflow: hidden; }
.ap-barrita i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--az), var(--ve)); transition: width .45s cubic-bezier(.2,.8,.2,1); }
.ap-cifra { display: grid; gap: 2px; padding: 13px 18px; background: var(--papel); border: 1px solid var(--raya); border-radius: var(--r); box-shadow: var(--sombra-app); min-width: 210px; }
.ap-cifra span { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--gris-2); }
/* `pie` a secas es la clase del pie de la landing, que trae su propio relleno: dentro del
   sistema el renglón de abajo de la tarjeta lleva nombre propio. */
.ap-cifra span.ap-abajo { text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.ap-cifra b { font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ap-elegir { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
/* La etiqueta y su selector viajan juntos: al envolverse, "ESTACIÓN" se quedaba en el
   renglón de arriba, lejos del campo que nombra. */
.ap-campo { display: inline-flex; align-items: center; gap: 8px; }
.ap-elegir label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--gris-2); }
.app select { font: inherit; font-size: 13px; padding: 7px 11px; border: 1px solid var(--raya-2); border-radius: 999px; background: var(--papel); color: var(--negro); cursor: pointer; }
.app select:focus-visible { outline: 2px solid var(--az); outline-offset: 1px; }

/* Los cinco pasos, con el riel que los une. */
.ap-pasos { list-style: none; margin: 0; padding: 0; position: relative; }
.ap-pasos::before { content: ""; position: absolute; left: 19px; top: 26px; bottom: 26px; width: 2px; background: var(--raya-2); }
.ap-paso { position: relative; border-radius: var(--r); }
.ap-paso > button { width: 100%; display: flex; align-items: center; gap: 15px; padding: 13px 16px 13px 0; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: var(--r); }
.ap-paso > button:focus-visible { outline: 2px solid var(--az); outline-offset: -2px; }
.ap-num { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--papel); border: 2px solid var(--raya-2); color: var(--gris-2); font-weight: 600; font-size: 15px; position: relative; z-index: 1; font-variant-numeric: tabular-nums; }
.ap-paso .ap-txt { flex: 1; min-width: 0; }
.ap-paso .ap-txt p { margin-top: 3px; font-size: 13px; color: var(--gris); }
.ap-dato { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.ap-dato b { font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--negro); font-variant-numeric: tabular-nums; }
.ap-dato span { font-size: 13px; color: var(--gris); }
.ap-paso.hecho .ap-num { background: var(--ve-s); border-color: var(--ve-b); color: var(--ve-f); }
.ap-paso.hecho .ap-txt h2 { color: var(--gris); font-weight: 500; }
.ap-paso.actual { background: var(--papel); box-shadow: var(--sombra-app); }
.ap-paso.actual > button { padding-left: 16px; }
.ap-paso.actual .ap-num { background: var(--az-f); border-color: var(--az-f); color: #fff; }
.ap-paso.actual .ap-txt h2 { font-size: 17px; }
.ap-paso.actual .ap-dato b { font-size: 23px; }
.ap-paso .ap-abrir { flex: none; color: var(--gris-2); transition: transform .2s; }
.ap-paso.abierto .ap-abrir { transform: rotate(-90deg); }
.ap-detalle { margin: 0 16px 14px 55px; padding: 13px 15px; background: var(--papel); border: 1px solid var(--raya); border-radius: var(--r); font-size: 13px; color: var(--gris); display: grid; gap: 8px; }
.ap-detalle b { color: var(--negro); }
.ap-detalle ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }

.ap-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--raya-2); background: var(--papel); color: var(--negro); font: 600 13px/1 inherit; cursor: pointer; white-space: nowrap; transition: border-color .16s, background .16s, transform .16s; }
.ap-btn:hover { border-color: var(--az); transform: translateY(-1px); }
.ap-btn:active { transform: none; }
.ap-btn:focus-visible { outline: 2px solid var(--az); outline-offset: 2px; }
.ap-btn.lleno { background: var(--az-f); border-color: var(--az-f); color: #fff; }
.ap-btn.lleno:hover { background: #17608F; border-color: #17608F; }
.ap-btn.verde { background: var(--ve-f); border-color: var(--ve-f); color: #fff; }
.ap-btn.chico { padding: 6px 11px; font-size: 12px; }
.ap-btn[disabled] { opacity: .5; cursor: default; transform: none; }

.ap-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--fondo); border: 1px solid var(--raya-2); color: var(--gris); white-space: nowrap; }
.ap-chip.verde { background: var(--ve-s); border-color: var(--ve-b); color: var(--ve-f); }
.ap-chip.azul { background: var(--az-s); border-color: var(--az-b); color: var(--az-f); }
.ap-chip.ambar { background: var(--am-s); border-color: var(--am-b); color: var(--am-f); }
.ap-chip.rojo { background: var(--ro-s); border-color: var(--ro-b); color: var(--ro-f); }
/* La calificación de Amazon es una escala, no una etiqueta: se pinta de verde a rojo. */
.ap-chip.s1 { background: #CFE9BE; border-color: #8CC96A; color: #2F5C17; }
.ap-chip.s2 { background: var(--ve-s); border-color: var(--ve-b); color: var(--ve-f); }
.ap-chip.s3 { background: var(--az-s); border-color: var(--az-b); color: var(--az-f); }
.ap-chip.s4 { background: var(--am-s); border-color: var(--am-b); color: var(--am-f); }
.ap-chip.s5 { background: var(--ro-s); border-color: var(--ro-b); color: var(--ro-f); }

.ap-tarjeta { background: var(--papel); border: 1px solid var(--raya); border-radius: var(--r); box-shadow: var(--sombra-app); padding: 16px 18px; }
.ap-tarjeta > h2 { margin-bottom: 4px; }
.ap-nota { font-size: 12.5px; color: var(--gris-2); margin-top: 10px; }
.ap-rejilla { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.ap-rejilla.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .ap-rejilla.tres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ap-rejilla, .ap-rejilla.tres { grid-template-columns: 1fr; } }
/* Dentro del marco de teléfono el ancho es fijo y la consulta de medios no aplica: aquí
   las tarjetas van de dos en dos para que el recibo no quede a seis pantallas de scroll. */
.app.movil .ap-rejilla, .app.movil .ap-rejilla.tres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.app.movil .ap-ind .ap-val b { font-size: 19px; }
.app.movil .ap-ind .ap-redondo { width: 22px; height: 22px; top: 10px; right: 10px; }
.app.movil .ap-ind .ap-redondo .ic { width: 14px; height: 14px; }
.app.movil .ap-tarjeta { padding: 12px 13px; }

/* Indicadores del tablero: cifra grande, delta contra la semana anterior y el antes al pie. */
.ap-ind { position: relative; }
.ap-ind .ap-eti { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--gris-2); font-weight: 600; padding-right: 34px; }
.ap-ind .ap-val { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.ap-ind .ap-val b { font-size: 27px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ap-ind .ap-pie { font-size: 12px; color: var(--gris-2); margin-top: 8px; }
.ap-ind .ap-redondo { position: absolute; top: 14px; right: 16px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.ap-delta { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.ap-delta.sube { background: var(--ve-s); color: var(--ve-f); }
.ap-delta.baja { background: var(--ro-s); color: var(--ro-f); }
.ap-delta.igual { background: var(--fondo); color: var(--gris-2); border: 1px solid var(--raya-2); }

/* Tablas densas: la del líder y la del recibo. */
.ap-tabla-caja { overflow-x: auto; border: 1px solid var(--raya); border-radius: var(--r); background: var(--papel); }
.ap-tabla { border-collapse: collapse; width: 100%; font-size: 13px; }
.ap-tabla th, .ap-tabla td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--raya); white-space: nowrap; }
.ap-tabla thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--gris-2); font-weight: 600; background: var(--fondo); position: sticky; top: 0; }
.ap-tabla tbody tr:last-child td, .ap-tabla tbody tr:last-child th { border-bottom: 0; }
.ap-tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.ap-tabla tr.abrible { cursor: pointer; }
.ap-tabla tr.abrible:hover td { background: var(--az-s); }
.ap-tabla tr.puesta td { background: var(--az-s); }
.ap-tabla td.hueco { color: var(--raya-2); }
.ap-tabla .sangria td { background: var(--fondo); white-space: normal; }

/* La gráfica del neto: tres semanas, una línea y el promedio punteado. Sin librería. */
.ap-grafica { width: 100%; height: auto; display: block; overflow: visible; }
.ap-grafica .area { fill: rgba(46,144,217,.12); }
.ap-grafica .linea { fill: none; stroke: var(--az); stroke-width: 2; stroke-linejoin: round; }
.ap-grafica .promedio { stroke: var(--raya-2); stroke-dasharray: 4 4; }
.ap-grafica circle { fill: var(--az); }
.ap-grafica text { font-size: 11px; fill: var(--gris-2); }
.ap-grafica .marca-txt { fill: var(--negro); font-weight: 600; }

/* La pantalla del teléfono: el líder confirma desde la estación, no desde la oficina. */
.app.movil { grid-template-columns: 1fr; min-height: 0; height: 640px; }
.app.movil .ap-marca { padding: 0; font-size: 14px; }
.app.movil .ap-lateral { display: none; }
.app.movil .ap-barra { justify-content: space-between; background: var(--lateral); border-bottom-color: var(--az); }
.app.movil .ap-barra b, .app.movil .ap-barra .ap-marca { color: #fff; }
.app.movil .ap-cuerpo { padding: 16px 14px 20px; }
.ap-dias { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 12px; }
.ap-dias { justify-content: space-between; }
.ap-dias button { flex: 1 1 0; min-width: 0; display: grid; gap: 1px; justify-items: center; padding: 6px 4px; border-radius: 10px; border: 1px solid var(--raya-2); background: var(--papel); font: inherit; cursor: pointer; color: var(--gris); }
.ap-dias button i { font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.ap-dias button b { font-size: 15px; font-variant-numeric: tabular-nums; }
.ap-dias button.puesto { background: var(--az-f); border-color: var(--az-f); color: #fff; }
.ap-dias button .punto { width: 6px; height: 6px; border-radius: 50%; background: var(--am); display: block; }
.ap-dias button.puesto .punto { background: #fff; }
.ap-fila { display: flex; align-items: center; gap: 12px; padding: 11px 13px; background: var(--papel); border: 1px solid var(--raya); border-radius: var(--r); margin-bottom: 8px; }
.ap-fila.ok { border-color: var(--ve-b); background: linear-gradient(0deg, var(--ve-s), var(--ve-s)) padding-box, var(--papel); }
.ap-fila .ap-quien { flex: 1; min-width: 0; }
.ap-fila .ap-quien b { display: block; font-size: 13.5px; font-weight: 600; }
.ap-fila .ap-quien span { font-size: 12px; color: var(--gris); display: block; margin-top: 2px; }
.ap-fila .ap-quien .ap-marcas { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }

/* El recibo del conductor. */
.ap-aviso { display: grid; gap: 4px; padding: 13px 16px; border-radius: var(--r); border: 1px solid var(--ve-b); background: var(--ve-s); color: var(--ve-f); font-size: 13px; }
.ap-aviso b { font-size: 14px; }
.ap-aviso.roja { border-color: var(--ro-b); background: var(--ro-s); color: var(--ro-f); }
.ap-seccion { display: flex; align-items: center; gap: 9px; margin: 20px 0 10px; }
.ap-seccion span { width: 22px; height: 22px; border-radius: 50%; background: var(--az-s); color: var(--az-f); display: grid; place-items: center; font-size: 11.5px; font-weight: 700; flex: none; }
.ap-aclara { display: grid; gap: 9px; margin-top: 10px; padding: 12px 14px; border: 1px dashed var(--az-b); border-radius: var(--r); background: var(--az-s); }
.ap-aclara textarea { font: inherit; font-size: 13px; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--raya-2); resize: vertical; min-height: 62px; background: var(--papel); color: var(--negro); }
.ap-aclara textarea:focus-visible { outline: 2px solid var(--az); outline-offset: 0; }

/* El marco de la pantalla: el sistema entra sin que la landing le ponga su propio fondo. */
.marco.sistema { background: var(--fondo); }
.marco.telefono { max-width: 380px; justify-self: center; border-radius: 26px; padding: 8px; background: #1A2233; }
.marco.telefono .app { border-radius: 19px; overflow: hidden; }
.ap-par { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 1.4rem; align-items: start; }

@media (max-width: 980px) {
  .app { grid-template-columns: 1fr; }
  .app > .ap-lateral { display: none; }
  .ap-par { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .ap-cuerpo { padding: 16px 14px 20px; }
  .ap-cab { gap: 12px; }
  .ap-cifra { min-width: 0; width: 100%; }
}

/* La puesta en marcha: una franja debajo de las dos tarjetas, no una tercera columna. Es un
   trato distinto del precio por conductor (aquello es de lista, esto se cotiza) y ponerlo al
   lado lo haría leer como una opción más del mismo menú. */
.arranque { margin-top: 1.4rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 1.4rem 2rem; align-items: center;
  background: var(--panel-2); border: 1px solid var(--linea-2); border-radius: var(--radio); padding: 1.6rem 1.7rem; }
.arranque h3 { font-size: 1.3rem; color: #fff; letter-spacing: -.015em; margin-bottom: .6rem; }
.arranque .dice { max-width: 62ch; font-size: 1rem; }
.arranque-accion { display: grid; gap: .6rem; justify-items: stretch; }


.arranque-accion .precio-nota { text-align: center; }
@media (max-width: 860px) { .arranque { grid-template-columns: 1fr; } }

/* El recibo del conductor, renglón por renglón. Era una tabla de seis columnas, y el conductor
   lo abre en el teléfono: ahí una tabla obliga a rodar de lado para ver cuánto le tocó, que es
   justo el dato que busca. Cada ruta es un renglón que se abre. */
.ap-rutas { display: grid; gap: 8px; }
.ap-ruta { background: var(--papel); border: 1px solid var(--raya); border-radius: var(--r); overflow: hidden; }
.ap-ruta.abierta { border-color: var(--az-b); box-shadow: var(--sombra-app); }
.ap-ruta-cab { width: 100%; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 11px 14px; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.ap-ruta-cab:hover { background: var(--az-s); }
.ap-ruta-cab:focus-visible { outline: 2px solid var(--az); outline-offset: -2px; }
.ap-ruta-dia { display: grid; gap: 1px; font-size: 11.5px; color: var(--gris-2); }
.ap-ruta-dia b { font-size: 12.5px; color: var(--negro); text-transform: uppercase; letter-spacing: .04em; }
.ap-ruta-que { min-width: 0; display: grid; gap: 2px; }
.ap-ruta-que b { font-size: 13.5px; font-weight: 600; }
.ap-ruta-que span { font-size: 12px; color: var(--gris); }
.ap-ruta-monto { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap-ruta-detalle { padding: 0 14px 13px; display: grid; gap: 9px; font-size: 13px; color: var(--gris); border-top: 1px solid var(--raya); padding-top: 11px; }
.ap-ruta-detalle b { color: var(--negro); }
.ap-ruta-chips { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---- el camino del dato, vivo ---- */
/* El diagrama decía lo correcto pero estaba quieto, y un flujo quieto se lee como un cuadro.
   Ahora los puntos de las flechas se encienden uno tras otro en el sentido de la marcha, el
   ciclo gira y cada tarjeta se enciende en su turno. Nada de esto cambia lo que dice: solo lo
   pone a correr, que es lo que hace que se entienda sin leerlo.
   Todo arranca con la clase `viva`, que pone el observador de landing.js cuando el diagrama
   entra en pantalla: animar algo que nadie está viendo solo gasta batería. */
@media (prefers-reduced-motion: no-preference) {
  .diagrama.viva .paso-flecha span { animation: corre-punto 1.5s ease-in-out infinite; }
  .diagrama.viva .paso-flecha span:nth-child(1) { animation-delay: 0s; }
  .diagrama.viva .paso-flecha span:nth-child(2) { animation-delay: .18s; }
  .diagrama.viva .paso-flecha span:nth-child(3) { animation-delay: .36s; }
  .diagrama.viva .paso-flecha svg { animation: empuja-flecha 1.5s ease-in-out infinite; animation-delay: .5s; }
  /* La flecha verde sale DESPUÉS de que el sistema hizo lo suyo: media vuelta de retraso. */
  .diagrama.viva .paso-flecha.verde span:nth-child(1) { animation-delay: .75s; }
  .diagrama.viva .paso-flecha.verde span:nth-child(2) { animation-delay: .93s; }
  .diagrama.viva .paso-flecha.verde span:nth-child(3) { animation-delay: 1.11s; }
  .diagrama.viva .paso-flecha.verde svg { animation-delay: 1.25s; }
  /* El ciclo gira de verdad: la línea punteada corre sobre sí misma. */
  .diagrama.viva .paso-flecha.ciclo svg { animation: gira-ciclo 2.4s linear infinite; }
  /* Cada renglón de lo que llega se enciende en su turno, como si fuera entrando. */
  .diagrama.viva .etapa.cruda li { animation: respira-renglon 4s ease-in-out infinite; }
  .diagrama.viva .etapa.cruda li:nth-child(1) { animation-delay: 0s; }
  .diagrama.viva .etapa.cruda li:nth-child(2) { animation-delay: .25s; }
  .diagrama.viva .etapa.cruda li:nth-child(3) { animation-delay: .5s; }
  .diagrama.viva .etapa.cruda li:nth-child(4) { animation-delay: .75s; }
  .diagrama.viva .etapa.cruda li:nth-child(5) { animation-delay: 1s; }
  /* Y lo que sale se enciende al final de la vuelta, en verde. */
  .diagrama.viva .etapa.salida li { animation: respira-salida 4s ease-in-out infinite; }
  .diagrama.viva .etapa.salida li:nth-child(1) { animation-delay: 2s; }
  .diagrama.viva .etapa.salida li:nth-child(2) { animation-delay: 2.2s; }
  .diagrama.viva .etapa.salida li:nth-child(3) { animation-delay: 2.4s; }
  .diagrama.viva .etapa.salida li:nth-child(4) { animation-delay: 2.6s; }
  /* El punto de cada paso del sistema late al ritmo del proceso. */
  .diagrama.viva .caja-proceso li::before { animation: late-punto 1.6s ease-in-out infinite; }
  .diagrama.viva .caja-proceso li:nth-child(2)::before { animation-delay: .2s; }
  .diagrama.viva .caja-proceso li:nth-child(3)::before { animation-delay: .4s; }
  .diagrama.viva .caja-proceso li:nth-child(4)::before { animation-delay: .6s; }
  /* La paloma del cierre de la semana se marca una vez por vuelta. */
  .diagrama.viva .cilindro svg { animation: marca-cierre 4s ease-in-out infinite; }
}
@keyframes corre-punto { 0%, 60%, 100% { opacity: .25; } 20% { opacity: 1; } }
@keyframes empuja-flecha { 0%, 100% { transform: translateX(0); opacity: .6; } 30% { transform: translateX(3px); opacity: 1; } }
@keyframes gira-ciclo { to { stroke-dashoffset: -26; } }
@keyframes respira-renglon {
  0%, 55%, 100% { border-color: var(--linea-2); background: var(--panel); }
  15%, 30% { border-color: rgba(255,107,107,.45); background: rgba(255,107,107,.07); }
}
@keyframes respira-salida {
  0%, 55%, 100% { border-color: rgba(16,185,129,.32); background: var(--panel); }
  15%, 30% { border-color: rgba(16,185,129,.7); background: rgba(16,185,129,.09); }
}
@keyframes late-punto { 0%, 100% { transform: scale(1); opacity: .7; } 45% { transform: scale(1.5); opacity: 1; } }
@keyframes marca-cierre { 0%, 45%, 100% { opacity: .75; } 60%, 75% { opacity: 1; } }

/* ---- el tablero de dirección, con lo que el producto enseña de verdad ---- */
/* Cinco pestañas sobre la franja de seis indicadores, igual que la pantalla real. La franja se
   queda fija al cambiar de pestaña: lo que se mira al abrir el tablero el lunes no cambia
   porque uno esté viendo el detalle de otra cosa. */
.ap-rejilla.seis { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1250px) { .ap-rejilla.seis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .ap-rejilla.seis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ap-rejilla.seis .ap-ind .ap-val b { font-size: 23px; }
.ap-rejilla.seis .ap-eti { padding-right: 32px; font-size: 10px; letter-spacing: .05em; line-height: 1.25; min-height: 2.5em; }
.ap-rejilla.seis .ap-ind .ap-val { gap: 6px; }
.ap-rejilla.seis .ap-ind .ap-pie { font-size: 11.5px; line-height: 1.35; }
.ap-rejilla.seis .ap-ind .ap-redondo { top: 12px; right: 12px; width: 26px; height: 26px; }
.ap-rejilla.seis .ap-ind .ap-redondo .ic { width: 15px; height: 15px; }
.ap-ind .ap-antes { font-size: 11.5px; color: var(--gris-2); margin-top: 4px; }
/* El color del semáforo tiñe la CIFRA, no la tarjeta: la tarjeta en rojo grita, la cifra en
   rojo informa. Es lo que hace el producto. */
.ap-ind.bien .ap-val b { color: var(--ve-f); }
.ap-ind.regular .ap-val b { color: var(--am-f); }
.ap-ind.mal .ap-val b { color: var(--ro-f); }
.ap-ind.bien .ap-redondo { background: var(--ve-f); }
.ap-ind.regular .ap-redondo { background: var(--am-f); }
.ap-ind.mal .ap-redondo { background: var(--ro-f); }
.ap-ind .ap-redondo { background: var(--az-f); }

.ap-pestanas { display: flex; gap: 2px; margin: 16px 0 12px; border-bottom: 1px solid var(--raya); overflow-x: auto; }
.ap-pestanas button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; background: none; border: 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px; font: 600 13px inherit; color: var(--gris); cursor: pointer; white-space: nowrap; }
.ap-pestanas button:hover { color: var(--negro); }
.ap-pestanas button[aria-selected="true"] { color: var(--az-f); border-bottom-color: var(--az-f); }
.ap-pestanas button:focus-visible { outline: 2px solid var(--az); outline-offset: -2px; }
.ap-pestanas .ic { width: 16px; height: 16px; }

.ap-tenue { color: var(--gris-2); font-size: 11.5px; font-weight: 400; }
.ap-tabla td.bien, .ap-tabla td.regular, .ap-tabla td.mal { font-weight: 600; }
.ap-tabla td.bien { color: var(--ve-f); }
.ap-tabla td.regular { color: var(--am-f); }
.ap-tabla td.mal { color: var(--ro-f); }
/* El renglón que pide atención lleva una barra en el canto, no un fondo: el fondo rojo en una
   tabla hace que todo se vea urgente y nada lo sea. */
.ap-tabla tr.pide td:first-child { box-shadow: inset 3px 0 0 var(--am); }
.ap-chip.bien { background: var(--ve-s); border-color: var(--ve-b); color: var(--ve-f); }
.ap-chip.regular { background: var(--am-s); border-color: var(--am-b); color: var(--am-f); }
.ap-chip.mal { background: var(--ro-s); border-color: var(--ro-b); color: var(--ro-f); }
.ap-cifra-chica { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ap-cifra-chica.bien { color: var(--ve-f); }
.ap-cifra-chica.regular { color: var(--am-f); }
.ap-cifra-chica.mal { color: var(--ro-f); }
.ap-fila.puesta { border-color: var(--az-b); background: var(--az-s); }

/* Los panelitos por estación: misma escala, para poder compararlas de un ojo. */
.ap-panelitos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.ap-panelito { border: 1px solid var(--raya); border-radius: 10px; padding: 9px 11px 4px; }
.ap-panelito-cab { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; }
.ap-panelito svg { width: 100%; height: auto; display: block; overflow: visible; }
.ap-panelito .linea { fill: none; stroke: var(--az); stroke-width: 1.8; }
.ap-panelito .area { fill: rgba(46,144,217,.12); }
.ap-panelito .promedio { stroke: var(--am-b); stroke-dasharray: 3 3; }

/* Barras horizontales: la comparación más honesta que hay para cuatro o cinco cosas. */
/* `ap-barra` a secas ya era la barra de arriba del sistema, la del nombre de quien mira. Estas
   son otras: los renglones de una gráfica de barras. */
.ap-barras { display: grid; gap: 9px; }
.ap-barra-h { display: grid; grid-template-columns: 108px minmax(0, 1fr) auto; gap: 11px; align-items: center; font-size: 13px; }
.ap-barra-eti { font-weight: 600; }
.ap-barra-riel { height: 12px; border-radius: 999px; background: var(--fondo); overflow: hidden; }
.ap-barra-riel i { display: block; height: 100%; border-radius: 999px; background: var(--az); }
.ap-barra-riel i.bien { background: var(--ve); }
.ap-barra-riel i.regular { background: var(--am); }
.ap-barra-riel i.mal { background: var(--ro); }
.ap-barra-h b { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* La cinta de proporciones y su leyenda. */
.ap-cinta { display: flex; height: 16px; border-radius: 999px; overflow: hidden; background: var(--fondo); }
.ap-cinta span { display: block; }
.ap-cinta .s1, .ap-leyenda i.s1 { background: #4E9A2F; }
.ap-cinta .s2, .ap-leyenda i.s2 { background: var(--ve); }
.ap-cinta .s3, .ap-leyenda i.s3 { background: var(--az); }
.ap-cinta .s4, .ap-leyenda i.s4 { background: var(--am); }
.ap-cinta .s5, .ap-leyenda i.s5 { background: var(--ro); }
.ap-cinta .act-ruta, .ap-leyenda i.act-ruta { background: var(--az); }
.ap-cinta .act-descanso, .ap-leyenda i.act-descanso { background: var(--raya-2); }
.ap-cinta .act-apoyo, .ap-leyenda i.act-apoyo { background: var(--ve); }
.ap-cinta .act-incidencia, .ap-leyenda i.act-incidencia { background: var(--ro); }
.ap-cinta .act-hub, .ap-leyenda i.act-hub { background: var(--am); }
.ap-leyenda { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 5px; font-size: 12.5px; }
.ap-leyenda li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; gap: 9px; align-items: center; color: var(--gris); }
.ap-leyenda i { width: 10px; height: 10px; border-radius: 3px; }
.ap-leyenda b { color: var(--negro); font-variant-numeric: tabular-nums; }
.ap-leyenda span { color: var(--gris-2); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }

.ap-chips-orden { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 12px; }
.ap-chips-orden button { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--raya-2); background: var(--papel);
  font: 600 12px inherit; color: var(--gris); cursor: pointer; }
.ap-chips-orden button:hover { border-color: var(--az); }
.ap-chips-orden button.puesto { background: var(--az-f); border-color: var(--az-f); color: #fff; }

.ap-movs { display: grid; gap: 7px; max-height: 320px; overflow: auto; }
.ap-mov { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center;
  padding: 8px 11px; border: 1px solid var(--raya); border-radius: 10px; font-size: 13px; }
.ap-mov.sube { box-shadow: inset 3px 0 0 var(--ve); }
.ap-mov.baja { box-shadow: inset 3px 0 0 var(--ro); }
.ap-mov span { display: flex; align-items: center; gap: 5px; }
.ap-mov .ic { width: 14px; height: 14px; color: var(--gris-2); }

.ap-dos-series { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.ap-serie-eti { font-size: 12px; font-weight: 600; color: var(--gris); margin-bottom: 4px; }

.ap-avance-caja { display: grid; gap: 7px; }
.ap-avance-riel { height: 14px; border-radius: 999px; background: var(--fondo); overflow: hidden; }
.ap-avance-riel i { display: block; height: 100%; border-radius: 999px; background: var(--ve); }
.ap-avance-caja p { font-size: 13px; color: var(--gris); }

.ap-ajuste { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start;
  padding: 11px 13px; border: 1px solid var(--raya); border-radius: var(--r); font-size: 13px; color: var(--gris); }
.ap-ajuste + .ap-ajuste { margin-top: 8px; }
.ap-ajuste b { color: var(--negro); }
.ap-tabla th[scope], .ap-tabla tbody th { text-align: left; font-weight: 500; color: var(--gris); }

/* La semana del líder: sus conductores contra los siete días. Es la pantalla que más se usa
   del producto y la trabaja en la computadora de la estación, no en el teléfono: necesita ver
   a los trece contra los siete días a la vez para saber qué le falta. */
.ap-semana th, .ap-semana td { text-align: center; }
.ap-semana thead th { vertical-align: top; padding: 8px 10px 10px; }
.ap-semana .d-nom { display: block; font-size: 11px; }
.ap-semana .d-num { display: block; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--gris-2); font-size: 10.5px; margin-bottom: 5px; }
.ap-semana thead .ap-btn { padding: 4px 9px; font-size: 11px; }
.ap-semana thead .ap-chip { font-size: 10.5px; padding: 2px 7px; }
.ap-semana .c-nombre { text-align: left; font-weight: 600; white-space: nowrap; }
.ap-semana td.celda { cursor: pointer; font-size: 12.5px; }
.ap-semana td.celda:hover { background: var(--az-s); }
/* Ámbar es lo que falta. Verde no: si todo lo confirmado se pinta, la pantalla se vuelve un
   semáforo y ya no se ve dónde está el trabajo. Lo confirmado se queda neutro y basta. */
.ap-semana td.falta { background: var(--am-s); color: var(--am-f); font-weight: 600; box-shadow: inset 0 0 0 1px var(--am-b); }
.ap-semana td.descanso { color: var(--gris-2); }
.ap-semana td.incidencia { color: var(--ro-f); font-weight: 600; }
.ap-semana td.vacio { color: var(--raya-2); }
.ap-semana td.puesta { box-shadow: inset 0 0 0 2px var(--az); }
.ap-semana .marca { display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-left: 4px; vertical-align: middle; }
.ap-semana .marca.retardo { background: var(--ro); }
.ap-semana .marca.parcial { background: var(--am); }
.ap-dia-detalle { margin-top: 12px; padding: 13px 15px; background: var(--papel); border: 1px solid var(--raya); border-radius: var(--r); box-shadow: var(--sombra-app); display: grid; gap: 9px; }
.ap-dia-cab { font-size: 13.5px; color: var(--gris); }
.ap-dia-cab b { color: var(--negro); font-size: 15px; }
.ap-dia-fila { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }

/* ---- la cuenta del precio ---- */
/* Un precio por conductor al mes es abstracto hasta que se multiplica por la plantilla propia.
   Esta pieza es la que convierte "$150" en "a mí me costaría esto", y por eso pesa lo mismo
   que el titular: el número que cambia es el argumento, no un adorno. */
.calcula {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .88fr); gap: 0;
  margin: 2rem 0 1.4rem; border: 1px solid var(--linea-2); border-radius: var(--radio);
  background: var(--panel); overflow: hidden;
}
@media (max-width: 860px) { .calcula { grid-template-columns: 1fr; } }
.calcula-pregunta { padding: 1.8rem 1.9rem; display: grid; gap: .9rem; align-content: start; }
.calcula-pregunta label { font: 700 .72rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--electrico); }
.calcula-cuantos { margin: 0; display: flex; align-items: baseline; gap: .6rem; }
.calcula-cuantos b { font: 900 clamp(3rem, 6vw, 4.6rem)/1 var(--display); letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; }
.calcula-cuantos span { font-size: 1rem; color: var(--tinta-3); }

/* El riel se pinta a mano para que la parte recorrida vaya en azul eléctrico: el control del
   sistema operativo no se deja teñir y en oscuro casi no se ve. */
.calcula input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; background: none; cursor: pointer; }
.calcula input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--electrico) calc(var(--parte, .14) * 100%), var(--linea-2) 0);
}
.calcula input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--linea-2); }
.calcula input[type="range"]::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--electrico); }
.calcula input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -8px;
  border-radius: 50%; background: #fff; border: 4px solid var(--electrico);
  box-shadow: 0 4px 16px -4px rgba(74,140,255,.9); transition: transform .15s;
}
.calcula input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 4px solid var(--electrico); }
.calcula input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.calcula input[type="range"]:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 999px; }

.calcula-atajos { display: flex; gap: .45rem; flex-wrap: wrap; }
.calcula-atajos button {
  padding: .4rem .85rem; border-radius: 999px; border: 1px solid var(--linea-2);
  background: transparent; color: var(--tinta-3); font: 600 .85rem var(--display); cursor: pointer;
  font-variant-numeric: tabular-nums; transition: border-color .16s, color .16s, background .16s;
}
.calcula-atajos button:hover { border-color: var(--electrico); color: var(--tinta); }
.calcula-atajos button.puesto { background: rgba(74,140,255,.16); border-color: var(--electrico); color: #fff; }
.calcula-atajos button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* La salida va sobre el azul de la marca: es la cifra que el visitante se lleva. */
.calcula-salida { padding: 1.8rem 1.9rem; display: grid; gap: .8rem; align-content: start;
  background: linear-gradient(160deg, rgba(74,140,255,.22), rgba(74,140,255,.05));
  border-left: 1px solid var(--linea-2); }
@media (max-width: 860px) { .calcula-salida { border-left: 0; border-top: 1px solid var(--linea-2); } }
.calcula-salida .copete { margin: 0; }
.calcula-monto { margin: 0; display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.calcula-monto b { font: 900 clamp(2.6rem, 5.4vw, 4rem)/1 var(--display); letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; }
.calcula-monto i { font-style: normal; font-size: 1.05rem; color: var(--tinta-2); }
.calcula-detalle { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .5rem; }
.calcula-detalle li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding-bottom: .5rem; border-bottom: 1px solid var(--linea); font-size: .95rem; color: var(--tinta-3); }
.calcula-detalle li:last-child { border-bottom: 0; padding-bottom: 0; }
.calcula-detalle b { color: var(--tinta); font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums; }
.calcula-nota { margin: .2rem 0 0; font-size: .86rem; color: var(--tinta-4); }

/* Lo que incluye son nueve renglones: en una columna es un muro. Van en dos columnas de flujo,
   no en rejilla: la rejilla alinea los renglones por fila y, como miden distinto, deja huecos
   entre uno y otro. Con columnas el texto se acomoda solo y la tarjeta se acorta a la mitad. */
@media (min-width: 900px) {
  .precio-par > .precio-tarjeta:first-child .lista-palomas {
    display: block; columns: 2; column-gap: 2rem;
  }
  .precio-par > .precio-tarjeta:first-child .lista-palomas li {
    break-inside: avoid; margin-bottom: .75rem;
  }
}
/* Las dos tarjetas arrancan arriba y la de la prueba no se estira hasta el pie de la otra. */
.precio-par { align-items: start; }

/* Dónde termina el producto. Va al pie de lo que incluye y cruza las dos columnas, porque acota
   la lista entera y no un renglón. Se ve como aclaración y no como letra chica: mismo tamaño que
   la lista, con una raya arriba que la separa. */
.hasta-donde {
  margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--linea-2);
  color: var(--tinta-2); font-size: .98rem; line-height: 1.5;
}
.hasta-donde b { color: var(--tinta); }

/* La columna derecha del precio: la prueba arriba y la puesta en marcha debajo. Iban en una
   franja suelta al pie, y eso dejaba un hueco del alto de la tarjeta de lo que incluye y
   estiraba la sección media pantalla más sin decir nada nuevo. */
.precio-columna { display: grid; gap: 1.4rem; align-content: start; }
.precio-columna .arranque { margin-top: 0; grid-template-columns: 1fr; gap: 1.1rem; }
.precio-columna .arranque .dice { max-width: none; font-size: .95rem; }
.precio-columna .arranque-accion .boton { width: 100%; }

/* Los tres pasos de la prueba. Cada uno dice DE QUIÉN es el trabajo y cuánto dura, que es lo
   que un DSP quiere saber antes de mandar su padrón y su tabulador a un desconocido. Sin eso,
   "nos comparte su padrón" se lee como el principio de un proyecto. */
.lista-pasos li b { display: block; color: #fff; font-family: var(--display); font-weight: 700; font-size: 1.02rem; }
.lista-pasos li span { display: block; margin-top: .2rem; font-size: .94rem; color: var(--tinta-2); }
.lista-pasos li i { display: inline-block; margin-top: .4rem; font-style: normal; font: 700 .68rem var(--display);
  letter-spacing: .1em; text-transform: uppercase; color: var(--electrico);
  border: 1px solid rgba(74,140,255,.3); border-radius: 100px; padding: .22rem .6rem; }
.precio-dice { margin: 0; font-size: .98rem; color: var(--tinta-2); }
/* El cobro va dicho de frente y separado, no como paso 3 de la prueba: ahí se leía como el
   muro de pago disfrazado de parte del trato. */
.precio-limite { margin: 0; padding: .85rem 1rem; border-radius: 12px; font-size: .92rem; color: var(--tinta-2);
  background: rgba(7,9,15,.45); border: 1px solid var(--linea); }
.precio-limite b { color: #fff; }
/* El botón de WhatsApp se reconoce por su verde, aquí y en la puesta en marcha. */
.boton.wa { background: #25D366; color: #06210F; box-shadow: 0 10px 30px -10px rgba(37,211,102,.55); }
.boton.wa:hover { box-shadow: 0 16px 36px -10px rgba(37,211,102,.65); }

/* Mientras falte el número de WhatsApp el botón se ve apagado y no lleva a ningún lado. Es a
   propósito y es visible: un botón verde que abre una conversación con un contacto que no
   existe es peor que uno que se nota sin terminar, y así nadie publica la landing sin verlo. */
.boton.wa.sin-numero { background: var(--linea-2); color: var(--tinta-4); box-shadow: none; cursor: not-allowed; }
.boton.wa.sin-numero:hover { transform: none; box-shadow: none; }

/* ---- el precio, en una sola pieza ---- */
/* Lo que incluye ocupa el ancho entero: son nueve renglones y en una columna era un muro. */
.precio-tarjeta.incluye { padding: 1.7rem 1.8rem; }
.precio-tarjeta.incluye h3 { margin-bottom: .3rem; }
@media (min-width: 900px) {
  .precio-tarjeta.incluye .lista-palomas { display: block; columns: 3; column-gap: 2.2rem; }
  .precio-tarjeta.incluye .lista-palomas li { break-inside: avoid; margin-bottom: .85rem; }
}
@media (min-width: 640px) and (max-width: 899px) {
  .precio-tarjeta.incluye .lista-palomas { display: block; columns: 2; column-gap: 2rem; }
  .precio-tarjeta.incluye .lista-palomas li { break-inside: avoid; margin-bottom: .85rem; }
}

/* El cierre: la invitación y los dos botones, juntos. Antes eran dos bloques con dos botones
   cada uno y el visitante tenía que decidir cuál de los cuatro pulsar. */
.cierre-precio { margin-top: 1.4rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: 1.4rem 2.4rem; align-items: center; padding: 1.8rem 1.9rem; border-radius: var(--radio);
  background: linear-gradient(160deg, rgba(74,140,255,.2), rgba(74,140,255,.04));
  border: 1px solid rgba(74,140,255,.5); box-shadow: 0 30px 80px -40px rgba(74,140,255,.5); }
@media (max-width: 860px) { .cierre-precio { grid-template-columns: 1fr; } }
.cierre-precio h3 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); color: #fff; letter-spacing: -.02em; margin-bottom: .6rem; }
.cierre-precio .dice { max-width: 58ch; font-size: 1rem; }
.cierre-acciones { display: grid; gap: .7rem; }
.cierre-acciones .boton { width: 100%; }
.cierre-acciones .precio-nota { text-align: center; margin-top: .1rem; }