/* Aspecto de las slides.
   ---------------------------------------------------------------------
   DOS REGISTROS, Y LA REGLA ES EL SUJETO — no la decoración:

     .slide--brand  → campo azul Glya. Cuando la slide tiene un ARGUMENTO
                      (la tesis, los dos caminos, el número, el demo).
     .slide--photo  → fotografía a sangre. Cuando la slide tiene una
                      PERSONA (María Esther, la casa, el cierre).

   El fondo cambia cuando cambia el sujeto. El azul saturado —no negro—
   sobrevive a la luz de un espacio abierto; el teal se reserva para lo
   que hay que mirar.
   --------------------------------------------------------------------- */

/* --- Registro marca --------------------------------------------------- */

.slide--brand {
    color: var(--on-brand);
    background: var(--brand-field);
}

/* Regla teal corta: el acento del registro. Marca el corte entre el
   titular y lo que lo desarrolla. */
.rule-teal {
    width: 6cqw;
    height: 4px;
    background: var(--glya-teal);
    border-radius: 2px;
}

/* --- S1 · Portada -----------------------------------------------------
   Campo azul a la izquierda, la persona sangrada por el borde derecho.
   Sin marco ni esquinas redondeadas: enmarcar la volvía deck corporativo,
   y el corte seco entre color plano y fotografía dice más. */

.slide--cover {
    /* Franja azul corta y foto ancha. Cuanto más ancho el hueco de la foto,
       menos hay que recortar del original — y así el Módem IoT cabe holgado
       en vez de quedar pegado al borde. */
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.5fr);
    align-items: stretch;
    padding: 0;
}

.cover__text {
    position: relative;
    display: grid;
    align-content: center;
    justify-items: start;
    gap: calc(var(--cell) * 0.9);
    padding: calc(var(--cell) * 2.5);
    padding-bottom: calc(var(--cell) * 6);
}

.cover__title {
    font-size: 6.6cqw;
    font-weight: 700;
    line-height: 0.94;
    letter-spacing: -0.04em;
}

.cover__lead {
    max-width: 21ch;
    font-size: 1.75cqw;
    font-weight: 400;
    line-height: var(--lh-snug);
    color: var(--on-brand-soft);
    text-wrap: balance;
}

.cover__figure {
    position: relative;
    margin: 0;
    overflow: hidden;
}

.cover__figure img {
    width: 100%;
    height: 100%;
    display: block;
    /* Bajar este porcentaje corre la imagen hacia la derecha.
       Medido sobre el original (1920×1080): el Módem IoT ocupa x 1540–1730,
       así que con la franja azul actual el límite es 73% — por debajo de ahí
       el módem se sale por el borde y se pierde el argumento de la foto. */
    object-fit: cover;
    object-position: 78% 50%;
}

.cover__foot {
    position: absolute;
    left: calc(var(--cell) * 2.5);
    bottom: calc(var(--cell) * 2);
}

.cover__logo {
    height: calc(var(--cell) * 2.6);
    width: auto;
}

/* Entrada: una sola secuencia orquestada al cargar, sin bucles. El
   público mira esta slide varios minutos antes de que empieces. */
.slide--cover.is-active .cover__anim {
    animation: write-in 700ms var(--ease-out) backwards;
}

.slide--cover.is-active .cover__anim:nth-of-type(2) { animation-delay: 110ms; }
.slide--cover.is-active .cover__anim:nth-of-type(3) { animation-delay: 220ms; }

@keyframes write-in {
    from {
        opacity: 0;
        transform: translateY(calc(var(--cell) * 0.4));
    }
}

/* Elementos revelables paso a paso con la barra espaciadora. */
[data-step] {
    opacity: 0;
    transform: translateY(0.75rem);
    transition: opacity var(--dur-reveal) var(--ease-out),
        transform var(--dur-reveal) var(--ease-out);
}

[data-step].is-revealed {
    opacity: 1;
    transform: none;
}

/* --- S9 · Demo en vivo del oxímetro -----------------------------------
   Sobre azul de marca, NO sobre negro: Healthtech Park es un espacio
   abierto y con luz, donde un negro se lava a gris y un halo desaparece.
   El número se gana la pantalla por tamaño, no por brillo.

   La pantalla NO indica si el dato es en vivo, simulado o reproducido —
   eso vive en el HUD del presentador. El plan B tiene que ser
   indistinguible, y la afirmación «esto es en vivo» la hace la voz. */

.slide--demo {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    align-items: center;
    gap: 4cqw;
    padding: calc(var(--cell) * 2.4) calc(var(--cell) * 3);
}

.demo__readout {
    display: grid;
    justify-items: start;
    gap: 0;
}

.demo__label {
    font-family: var(--font-mono);
    font-size: 0.85cqw;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--on-brand-faint);
    margin-bottom: 0.6cqw;
}

.demo__value {
    font-family: var(--font-display);
    font-size: 15cqw;
    font-weight: 700;
    line-height: 0.82;
    letter-spacing: -0.05em;
    /* Tabular aquí SÍ: el número cambia en vivo y sin ancho fijo salta
       de posición en cada lectura. */
    font-variant-numeric: tabular-nums;
    color: var(--on-brand);
}

.demo__value.is-beating {
    animation: beat 620ms var(--ease-out);
}

@keyframes beat {
    0% { transform: scale(1); }
    16% { transform: scale(1.035); }
    100% { transform: scale(1); }
}

.demo__unit {
    font-family: var(--font-display);
    font-size: 2cqw;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--glya-teal);
    margin-top: 0.4cqw;
}

.demo__meta {
    margin-top: 1.4cqw;
    font-size: 1.15cqw;
    color: var(--on-brand-soft);
    font-variant-numeric: tabular-nums;
}

.demo__side {
    display: flex;
    gap: 3cqw;
    margin-top: 1.6cqw;
    padding-top: 1.4cqw;
    border-top: 1px solid var(--border-on-dark);
    /* Acotado al ancho del número, no a toda la columna: la regla suelta
       cruzando el vacío se leía como un borde perdido. */
    min-width: 22cqw;
}

.demo__stat {
    display: grid;
    gap: 0.25cqw;
}

.demo__stat dt {
    font-family: var(--font-mono);
    font-size: 0.75cqw;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--on-brand-faint);
}

.demo__stat dd {
    margin: 0;
    font-family: var(--font-display);
    font-size: 2.1cqw;
    font-weight: 700;
    color: var(--on-brand);
    font-variant-numeric: tabular-nums;
}

.demo__chart {
    position: relative;
    height: 58cqh;
}

.demo__chart canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.demo-trace {
    position: absolute;
    right: calc(var(--cell) * 3);
    bottom: calc(var(--cell) * 1.2);
    display: grid;
    gap: 0.25cqw;
    justify-items: end;
    font-family: var(--font-mono);
    font-size: 0.68cqw;
    color: rgba(255, 255, 255, 0.42);
    pointer-events: none;
}

.demo-trace__row b {
    color: var(--glya-teal);
    font-weight: 600;
}

/* --- Patrón: composición partida -------------------------------------
   Retrato a altura completa contra el campo azul. Es el patrón para las
   slides con PERSONA cuando la foto es vertical — que son casi todas las
   reales: un sangrado a 16:9 obligaría a recortar una banda tan estrecha
   del original que habría que ampliarla 4× o más.
   `--split-figure` controla cuánto se lleva la foto. */

.slide--split {
    --split-figure: 1fr;
    --split-body: 1.15fr;
    grid-template-columns: minmax(0, var(--split-figure)) minmax(0, var(--split-body));
    align-items: stretch;
    padding: 0;
}

/* Invierte el orden sin tocar el HTML: la foto pasa a la derecha. */
.slide--split.is-mirrored {
    grid-template-columns: minmax(0, var(--split-body)) minmax(0, var(--split-figure));
}

.slide--split.is-mirrored .split__figure { order: 2; }
.slide--split.is-mirrored .split__body { order: 1; }

.split__figure {
    position: relative;
    margin: 0;
    overflow: hidden;
}

.split__figure img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.split__body {
    display: grid;
    align-content: center;
    justify-items: start;
    gap: calc(var(--cell) * 0.9);
    padding: calc(var(--cell) * 2.5) calc(var(--cell) * 3);
}

.split__name {
    font-size: 4.2cqw;
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.03em;
}

.split__line {
    max-width: 20ch;
    font-size: 2cqw;
    line-height: var(--lh-snug);
    color: var(--on-brand-soft);
    text-wrap: balance;
}

/* Pie de foto en mono: registro documental, no titular. Deliberadamente
   pequeño — da procedencia sin pedir que se lea desde el fondo. */
.split__credit {
    position: absolute;
    left: calc(var(--cell) * 1.2);
    bottom: calc(var(--cell) * 1);
    font-family: var(--font-mono);
    font-size: 0.72cqw;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 1px 12px rgba(2, 6, 23, 0.9);
}

/* --- S2 · Doña María Esther ------------------------------------------- */

.slide--maria {
    --split-figure: 1fr;
    --split-body: 1.25fr;
}

.slide--maria .split__figure img {
    /* Encuadre alto: las dos caras y el brazalete del tensiómetro. */
    object-position: 50% 22%;
}

.slide--maria .split__name {
    font-size: 3.6cqw;
}

.slide--maria .split__line {
    max-width: 24ch;
    font-size: 1.7cqw;
}

/* El campo de días. Los 7.300 puntos los dibuja
   /js/slides/maria-esther.mjs; aquí solo se le reserva el ancho. */
.interval {
    display: grid;
    gap: calc(var(--cell) * 0.45);
    width: 100%;
    margin-top: calc(var(--cell) * 0.6);
}

.interval__field {
    width: 100%;
    display: block;
}

.interval__legend {
    font-family: var(--font-mono);
    font-size: 0.78cqw;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--on-brand-faint);
}

.interval__punch {
    font-size: 1.5cqw;
    line-height: var(--lh-snug);
    color: var(--on-brand);
}

.interval__punch b {
    font-weight: 700;
    color: var(--glya-teal);
}

/* --- S3 · El cuaderno --------------------------------------------------
   Las dos páginas se presentan COMPLETAS y sin recortar, apoyadas en una
   misma línea de base como documentos sobre una mesa. Recortarlas a panel
   destruiría lo único que importa: que se vea una página entera de números
   escritos a mano, y luego otra. Cantos duros, sin sombra ni radio — son
   pruebas documentales, no tarjetas. */

.slide--cuaderno {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: end;
    gap: calc(var(--cell) * 1.2);
    padding: calc(var(--cell) * 2.5) calc(var(--cell) * 2.5) calc(var(--cell) * 3);
}

.cuaderno__body {
    display: grid;
    justify-items: start;
    gap: calc(var(--cell) * 0.9);
    align-self: center;
}

.cuaderno__title {
    font-size: 4.4cqw;
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.03em;
}

.cuaderno__lead {
    max-width: 26ch;
    font-size: 1.7cqw;
    line-height: var(--lh-snug);
    color: var(--on-brand-soft);
    text-wrap: balance;
}

.cuaderno__punch {
    max-width: 27ch;
    font-size: 1.5cqw;
    line-height: var(--lh-snug);
    color: var(--on-brand);
}

.cuaderno__punch b {
    font-weight: 700;
    color: var(--glya-teal);
}

.cuaderno__page {
    margin: 0;
}

.cuaderno__page img {
    height: 62cqh;
    width: auto;
    display: block;
}

/* --- S4 · Las cifras del problema -------------------------------------
   Cuatro cifras de titular son una FILA DE KPIs, no un gráfico: forzar un
   gráfico de dos barras con «×2» y «+10%» sería un gráfico de una sola
   comparación, que se lee peor que los números sueltos.

   La jerarquía la da el argumento: las dos cifras centrales forman la
   tijera —la demanda se duplica, quienes cuidan casi no crecen— y van en
   teal junto al «pero» que las articula. Las otras dos son contexto, en
   blanco. El acento marca el ARGUMENTO, no el dato más grande.

   Cifras en figuras proporcionales (sin tabular-nums): a tamaño de titular,
   `tabular-nums` da a cada dígito el ancho de un cero y «70» queda flojo. */

.slide--cifras {
    align-content: center;
    justify-items: start;
    gap: calc(var(--cell) * 1.1);
    padding: calc(var(--cell) * 3);
}

.cifras__title {
    font-size: 4cqw;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
}


/* Superficie alterna: misma marca, más profundidad. Evita que dos slides
   azules consecutivas se lean como la misma. */
.slide--brand-deep {
    color: var(--on-brand);
    background: var(--brand-field-deep);
}

/* --- S4 · Las cifras del problema, con forma ---------------------------
   Reescrita: la primera versión eran cuatro cifras grandes sin forma
   visual y con las etiquetas desalineadas bajo números de anchos
   distintos. Ahora hay DOS formas, cada una elegida por el trabajo del
   dato (ver skill dataviz · choosing-a-form):

   1. TIJERA — barras desde una línea de base común. Es el argumento.
      Truco de rigor: expresar AMBAS como crecimiento (+100% y +10%) las
      hace comparables en un solo eje. «×2 pacientes» contra «+10%
      personal» son magnitudes distintas y no se pueden graficar juntas
      sin caer en el doble eje, que está prohibido.
   2. MEDIDORES — los dos valores que son una proporción sobre un total.

   Todo apoyado en la MISMA línea vertical a la izquierda: eso resuelve
   el descentrado, que venía de colgar etiquetas bajo cifras de ancho
   variable. */

.slide--cifras {
    align-content: center;
    gap: calc(var(--cell) * 1.4);
    padding: calc(var(--cell) * 3);
}

.cifras__title {
    font-size: 3.7cqw;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
}

.cifras__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: calc(var(--cell) * 3);
    align-items: start;
}

.cifras__caption {
    font-family: var(--font-mono);
    font-size: 0.8cqw;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--on-brand-faint);
    margin-bottom: calc(var(--cell) * 0.7);
}

/* --- La tijera --- */

.scissor {
    display: grid;
    gap: calc(var(--cell) * 1.7);
}

.scissor__row {
    display: grid;
    gap: calc(var(--cell) * 0.3);
}

.scissor__label {
    font-size: 1.25cqw;
    color: var(--on-brand-soft);
}

.scissor__track {
    display: flex;
    align-items: center;
    gap: calc(var(--cell) * 0.5);
}

/* Barra: tope de grosor, extremo redondeado solo en la punta y escuadrado
   en la base — crece desde una única línea de base. */
.scissor__bar {
    height: 1.5cqw;
    max-height: 24px;
    border-radius: 0 4px 4px 0;
    background: var(--glya-teal);
}

.scissor__row--muted .scissor__bar {
    background: rgba(255, 255, 255, 0.4);
}

/* El valor va en la punta y en tinta de texto, nunca en el color del dato:
   el teal claro es ilegible como texto sobre este fondo. */
.scissor__value {
    font-family: var(--font-display);
    font-size: 2.5cqw;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--on-brand);
    white-space: nowrap;
}

/* --- Anillos de proporción ---
   El valor va en el centro, así que el anillo no tiene que ser preciso:
   codifica la proporción y el número la dice. El arco lo anima
   /js/slides/cifras.mjs con stroke-dashoffset. */

.rings {
    display: flex;
    gap: calc(var(--cell) * 2.2);
}

.ring {
    display: grid;
    justify-items: center;
    gap: calc(var(--cell) * 0.6);
}

.ring__svg {
    width: 11cqw;
    height: 11cqw;
    display: block;
    /* Arranca a las 12 en punto en vez de a las 3. */
    transform: rotate(-90deg);
}

.ring__track {
    fill: none;
    stroke: var(--track);
    stroke-width: 11;
}

.ring__arc {
    fill: none;
    stroke: var(--glya-teal);
    stroke-width: 11;
    stroke-linecap: round;
}

.ring__figure {
    position: relative;
    display: grid;
    place-items: center;
}

.ring__value {
    position: absolute;
    font-family: var(--font-display);
    font-size: 2.4cqw;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--on-brand);
}

.ring__label {
    max-width: 17ch;
    font-size: 1.1cqw;
    line-height: 1.3;
    text-align: center;
    color: var(--on-brand-soft);
}

/* Superficie noche: azul casi negro con acento degradado en dos focos.
   La más legible de las tres (blanco 18,3:1, teal 8,1:1). */
.slide--night {
    color: var(--on-brand);
    background: var(--brand-field-night);
}

/* --- S5 · La app que construimos --------------------------------------
   La escalera de fricción. Cada peldaño se desplaza a la derecha: el
   desplazamiento ES el argumento — la fricción no es un paso difícil,
   es la suma de varios fáciles.

   Aquí la numeración sí está justificada: es una secuencia real y ordenada
   (el onboarding que había que completar), no una lista decorada.

   Se eliminó «aceptar los términos»: WhatsApp también los pide, así que
   no distingue una vía de la otra y debilitaba el argumento. */

.slide--app {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    align-items: stretch;
    padding: 0;
}

.app__body {
    display: grid;
    align-content: center;
    justify-items: start;
    gap: calc(var(--cell) * 1.1);
    padding: calc(var(--cell) * 2.6) calc(var(--cell) * 3);
}

.app__figure {
    position: relative;
    margin: 0;
    overflow: hidden;
}

.app__figure img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 68% 50%;
}

.app__title {
    font-size: 3.4cqw;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
}

.app__lead {
    font-size: 1.6cqw;
    color: var(--on-brand-soft);
}

.friction {
    display: grid;
    gap: calc(var(--cell) * 0.5);
    margin-top: calc(var(--cell) * 0.3);
}

.friction__step {
    display: flex;
    align-items: baseline;
    gap: calc(var(--cell) * 0.8);
    /* El escalón. --i lo fija cada fila en el HTML. */
    margin-left: calc(var(--i) * 1.9cqw);
}

.friction__num {
    font-family: var(--font-mono);
    font-size: 0.85cqw;
    letter-spacing: 0.08em;
    color: var(--on-brand-faint);
}

.friction__text {
    font-size: 1.5cqw;
    color: var(--on-brand-soft);
}

/* EL MURO. El emparejamiento Bluetooth no es un paso más: es donde la
   instalación se rompe de verdad —PIN, el equipo que no aparece, volver a
   emparejar—. El énfasis lo da un SALTO de sangría desproporcionado, no un
   adorno nuevo: la sangría ya codifica fricción, así que un escalón que se
   va mucho más a la derecha dice «este cuesta el triple» sin tinta extra.
   El naranja cálido es la reserva de marca; es su único uso en el deck. */
.friction__step--wall .friction__text {
    font-size: 1.85cqw;
    font-weight: 600;
    color: var(--glya-warm);
}

.friction__step--wall .friction__num {
    color: var(--glya-warm);
    opacity: 0.8;
}

/* El último peldaño no es de la instalación: es el impuesto diario, y es
   el que de verdad mata la adherencia a largo plazo. */
.friction__step--daily {
    margin-top: calc(var(--cell) * 0.8);
}

.friction__step--daily .friction__text {
    font-weight: 600;
    color: var(--glya-teal);
}

.app__punch {
    margin-top: calc(var(--cell) * 1);
    font-size: 1.8cqw;
    line-height: var(--lh-snug);
    color: var(--on-brand);
}

.app__punch b {
    font-weight: 700;
    color: var(--glya-teal);
}

/* --- S6 · No es la edad -----------------------------------------------
   RIMA VISUAL con la S2. Allá era un campo de 7.300 días con ~30 vistos;
   aquí es la pantalla de un teléfono cualquiera con las pocas apps que de
   verdad se abren. Misma imagen, otro sujeto — y ESE es el argumento:
   el público hace exactamente lo mismo que el paciente.

   Sin marco de teléfono ni logos de marcas: cuadrados redondeados sueltos
   se leen como apps sin nombrar ninguna. */

.slide--edad {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: calc(var(--cell) * 2.5);
    padding: calc(var(--cell) * 3);
}

.edad__body {
    display: grid;
    justify-items: start;
    gap: calc(var(--cell) * 1);
}

.edad__title {
    font-size: 3.9cqw;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
}

.edad__ask {
    max-width: 20ch;
    font-size: 1.75cqw;
    line-height: var(--lh-snug);
    color: var(--on-brand-soft);
}

.edad__punch {
    max-width: 24ch;
    margin-top: calc(var(--cell) * 0.6);
    font-size: 1.75cqw;
    line-height: var(--lh-snug);
    color: var(--on-brand);
}

.edad__punch b {
    font-weight: 700;
    color: var(--glya-teal);
}

.apps {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 1.1cqw;
}

.apps__icon {
    aspect-ratio: 1;
    border-radius: 24%;
    background: rgba(255, 255, 255, 0.22);
    transition: background var(--dur-slow) var(--ease-out),
        opacity var(--dur-slow) var(--ease-out);
}

/* Un solo momento orquestado, no un encendido icono por icono: al revelar,
   todo se apaga MENOS lo que de verdad se abre. La caída en bloque es la
   que cuenta el argumento. */
.apps:has(~ .apps__cue.is-revealed) .apps__icon {
    opacity: 0.16;
}

.apps:has(~ .apps__cue.is-revealed) .apps__icon--used {
    opacity: 1;
    background: var(--glya-teal);
}

.apps__cue {
    display: block;
    width: 0;
    height: 0;
}

.apps__legend {
    margin-top: calc(var(--cell) * 1.4);
    font-family: var(--font-mono);
    font-size: 0.8cqw;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--on-brand-faint);
}

/* --- S7 · La tesis ----------------------------------------------------
   La slide más callada del deck, a propósito. Todo lo demás va alineado a
   la izquierda; esta va centrada y sin regla teal. Ese cambio de ritmo es
   lo que la convierte en una PAUSA — el público levanta la vista del dato
   y escucha una frase. Máxima contención: una idea, nada más. */

.slide--tesis {
    align-content: center;
    justify-items: center;
    text-align: center;
    gap: calc(var(--cell) * 1.4);
    padding: calc(var(--cell) * 4);
}

.tesis__line {
    max-width: 18ch;
    font-size: 5.2cqw;
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.035em;
}

.tesis__line em {
    font-style: normal;
    color: var(--glya-teal);
}

.tesis__note {
    max-width: 34ch;
    font-size: 1.7cqw;
    line-height: var(--lh-snug);
    color: var(--on-brand-soft);
}

/* --- S8 · Dos caminos, cero apps --------------------------------------
   Diagrama de convergencia. La forma dice el argumento: dos rutas que
   parten del MISMO gesto del paciente (medirse como siempre) y llegan al
   MISMO lugar. Lo que cambia en medio es de quién es el trabajo.

   Sin flechas dibujadas a mano: las guías son líneas finas de una sola
   pieza SVG, que se comportan mejor al escalar que bordes CSS. */

.slide--caminos {
    align-content: center;
    gap: calc(var(--cell) * 1.4);
    padding: calc(var(--cell) * 2.6) calc(var(--cell) * 3);
}

.caminos__title {
    font-size: 3.5cqw;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
}

.caminos__map {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto;
    align-items: center;
    gap: 0 1.2cqw;
    margin-top: calc(var(--cell) * 0.8);
}

.node {
    display: grid;
    justify-items: center;
    gap: 0.7cqw;
    text-align: center;
}

/* Chips anchos, no cuadrados: los logos de producto son marcas
   denominativas de proporción 4:1 o 5:1 y en un cuadrado quedaban
   ilegibles. */
.node__art {
    display: grid;
    place-items: center;
    width: 13cqw;
    height: 7.2cqw;
    border-radius: 14%/25%;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.13);
}

.node__art img {
    max-width: 76%;
    max-height: 74%;
    object-fit: contain;
}

/* Los logos de Glya son azul oscuro —hechos para fondo claro— y sobre el
   campo azul desaparecían. Invertidos a blanco se leen perfecto y no hace
   falta meterlos en tarjetas blancas, que ensuciarían el diagrama. */
.node__art--logo img {
    filter: brightness(0) invert(1);
    opacity: 0.92;
}

.node__label {
    font-size: 1.05cqw;
    line-height: 1.25;
    max-width: 13ch;
    color: var(--on-brand-soft);
}

.node__label b {
    display: block;
    font-weight: 600;
    color: var(--on-brand);
}

/* La ruta: dos carriles que se separan y vuelven a juntarse. */
.lane {
    position: relative;
    height: 100%;
    min-height: 15cqw;
}

.lane svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.lane path {
    fill: none;
    stroke: rgba(255, 255, 255, 0.28);
    stroke-width: 2;
}

.lane path.is-accent {
    stroke: var(--glya-teal);
}

.lane__tag {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 0.78cqw;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--on-brand-faint);
}

.caminos__punch {
    margin-top: calc(var(--cell) * 1);
    font-size: 1.8cqw;
    line-height: var(--lh-snug);
    color: var(--on-brand);
}

.caminos__punch b {
    font-weight: 700;
    color: var(--glya-teal);
}

/* --- S10 · La traza del dato ------------------------------------------
   Lo que acaba de pasar, paso a paso, con la latencia real medida. Un
   pulso recorre la cadena una sola vez al entrar: la animación ES el
   contenido —el dato viajando— y no decoración.

   Aquí la numeración de etapas no hace falta: la flecha ya ordena. */

.slide--traza {
    align-content: center;
    gap: calc(var(--cell) * 1.6);
    padding: calc(var(--cell) * 2.6) calc(var(--cell) * 3);
}

.traza__title {
    font-size: 3.5cqw;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
}

.traza__rail {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.4cqw;
    margin-top: calc(var(--cell) * 0.6);
    padding-top: 3.4cqw;
}

/* El riel por el que viaja el pulso. */
.traza__rail::before {
    content: '';
    position: absolute;
    top: 1.55cqw;
    left: 6%;
    right: 6%;
    height: 2px;
    background: rgba(255, 255, 255, 0.16);
}

.traza__pulse {
    position: absolute;
    top: 1.05cqw;
    left: 6%;
    width: 1cqw;
    height: 1cqw;
    border-radius: 50%;
    background: var(--glya-teal);
    box-shadow: 0 0 0 0.35cqw rgba(10, 191, 191, 0.28);
    opacity: 0;
}

.slide--traza.is-running .traza__pulse {
    animation: viaja 2600ms var(--ease-in-out) forwards;
}

@keyframes viaja {
    0% { left: 6%; opacity: 0; }
    6% { opacity: 1; }
    94% { opacity: 1; }
    100% { left: calc(94% - 1cqw); opacity: 0; }
}

.paso {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.5cqw;
    text-align: center;
}

.paso::before {
    content: '';
    position: absolute;
    top: -2.4cqw;
    width: 0.85cqw;
    height: 0.85cqw;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transition: background var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-out);
}

.paso.is-lit::before {
    background: var(--glya-teal);
    transform: scale(1.5);
}

.paso__name {
    font-size: 1.3cqw;
    font-weight: 600;
    color: var(--on-brand);
    max-width: 14ch;
}

.paso__note {
    font-size: 1cqw;
    line-height: 1.3;
    max-width: 16ch;
    color: var(--on-brand-soft);
}

.paso__t {
    font-family: var(--font-mono);
    font-size: 0.82cqw;
    letter-spacing: 0.06em;
    color: var(--glya-teal);
}

.traza__punch {
    margin-top: calc(var(--cell) * 1.4);
    font-size: 1.9cqw;
    line-height: var(--lh-snug);
    color: var(--on-brand);
}

.traza__punch b {
    font-weight: 700;
    color: var(--glya-teal);
}

/* --- S13 · Más que signos vitales -------------------------------------
   Dos columnas de longitud deliberadamente desigual. La asimetría ES el
   argumento: un sensor mide cuatro cosas; una conversación trae todo lo
   demás, y muchas veces es lo que anticipa la complicación. */

.slide--mas {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    align-items: start;
    gap: 4cqw;
    padding: calc(var(--cell) * 2.6) calc(var(--cell) * 3);
    align-content: center;
}

.mas__col h3 {
    font-family: var(--font-display);
    font-size: 1.9cqw;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--on-brand);
}

.mas__col--voz h3 {
    color: var(--glya-teal);
}

.mas__kicker {
    font-family: var(--font-mono);
    font-size: 0.8cqw;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--on-brand-faint);
    margin-bottom: 0.5cqw;
}

.mas__list {
    list-style: none;
    margin: 1.4cqw 0 0;
    padding: 0;
    display: grid;
    gap: 0.75cqw;
}

.mas__list li {
    font-size: 1.35cqw;
    line-height: 1.3;
    color: var(--on-brand-soft);
    padding-left: 1.4cqw;
    position: relative;
}

.mas__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 0.5cqw;
    height: 2px;
    background: rgba(255, 255, 255, 0.35);
}

.mas__col--voz .mas__list li::before {
    background: var(--glya-teal);
}

.mas__foot {
    grid-column: 1 / -1;
    margin-top: calc(var(--cell) * 1.6);
    font-size: 1.8cqw;
    line-height: var(--lh-snug);
    color: var(--on-brand);
}

.mas__foot b {
    font-weight: 700;
    color: var(--glya-teal);
}


/* --- S12 · Tendencias --------------------------------------------------
   La gráfica se lleva la slide. El resumen antes/después va arriba, junto
   al titular, porque es la conclusión — no un pie de gráfico. */

.slide--tendencia {
    grid-template-rows: auto 1fr;
    align-content: stretch;
    gap: 1.2cqw;
    padding: calc(var(--cell) * 2.2) calc(var(--cell) * 3) calc(var(--cell) * 1.6);
}

.tend__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 3cqw;
}

.tend__title {
    font-size: 3.1cqw;
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.03em;
    max-width: 20ch;
}

.tend__summary {
    display: flex;
    align-items: flex-end;
    gap: 2.2cqw;
}

.tend__ba {
    display: grid;
    gap: 0.2cqw;
}

.tend__ba dt {
    font-family: var(--font-mono);
    font-size: 0.76cqw;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--on-brand-faint);
}

.tend__ba dd {
    margin: 0;
    font-family: var(--font-display);
    font-size: 2.6cqw;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--on-brand);
}

.tend__ba--after dd {
    color: var(--glya-teal);
}

.tend__arrow {
    font-size: 1.8cqw;
    color: var(--on-brand-faint);
    padding-bottom: 0.4cqw;
}

.tend__plot {
    position: relative;
    min-height: 0;
}

.tend__plot canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.tend__foot {
    position: absolute;
    left: 0;
    bottom: -1.2cqw;
    font-family: var(--font-mono);
    font-size: 0.76cqw;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--on-brand-faint);
}

/* --- S11 · Demo de Glady por WhatsApp ---------------------------------
   El teléfono va con los colores del tema oscuro de WhatsApp: se reconoce
   al instante y encaja con el deck sin disfraz. Es el único sitio donde un
   marco de dispositivo está justificado — aquí el CANAL es el argumento.

   El contexto del paciente va ANTES que la conversación. Sin él, la
   respuesta de Glady se lee como un chatbot amable; con él, se lee como
   alguien que sabía con quién estaba hablando. */

.slide--wa {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    align-items: center;
    gap: 4cqw;
    padding: calc(var(--cell) * 2.4) calc(var(--cell) * 3);
}

.wa__body {
    display: grid;
    justify-items: start;
    gap: 1.1cqw;
}

.wa__title {
    font-size: 3.2cqw;
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.03em;
    max-width: 17ch;
}

.wa__ficha {
    display: grid;
    gap: 0.8cqw;
    margin: 0;
    padding: 1.5cqw 1.8cqw;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-on-dark);
    max-width: 36ch;
}

.wa__ficha dt {
    font-family: var(--font-mono);
    font-size: 0.75cqw;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--on-brand-faint);
}

.wa__ficha dd {
    margin: 0.15cqw 0 0;
    font-size: 1.15cqw;
    line-height: 1.3;
    color: var(--on-brand-soft);
}

.wa__punch {
    max-width: 32ch;
    font-size: 1.55cqw;
    line-height: var(--lh-snug);
    color: var(--on-brand);
}

.wa__punch b {
    font-weight: 700;
    color: var(--glya-teal);
}

/* --- El teléfono --- */

.fono {
    justify-self: center;
    width: 25cqw;
    height: 74cqh;
    border-radius: 3.4cqw;
    padding: 0.55cqw;
    background: #1b2730;
    box-shadow: 0 2cqw 5cqw rgba(2, 6, 23, 0.55);
}

.fono__pantalla {
    height: 100%;
    border-radius: 3cqw;
    background: #0b141a;   /* WhatsApp, tema oscuro */
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
}

.fono__barra {
    display: flex;
    align-items: center;
    gap: 0.8cqw;
    padding: 1.3cqw 1.3cqw 1cqw;
    background: #202c33;
}

.fono__avatar {
    width: 2.6cqw;
    height: 2.6cqw;
    border-radius: 50%;
    overflow: hidden;
    background: #0b141a;
    display: grid;
    place-items: center;
    flex: none;
}

.fono__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fono__quien {
    font-size: 1.15cqw;
    font-weight: 600;
    color: #e9edef;
    line-height: 1.2;
}

.fono__estado {
    font-size: 0.78cqw;
    color: #8696a0;
}

.wa__hilo {
    padding: 1.2cqw;
    display: grid;
    align-content: end;
    gap: 0.7cqw;
    overflow: hidden;
}

.wa__msg {
    max-width: 86%;
    padding: 0.7cqw 0.95cqw 0.45cqw;
    border-radius: 0.9cqw;
    font-size: 1.02cqw;
    line-height: 1.35;
    color: #e9edef;
}

.wa__msg p { margin: 0; }

.wa__msg--in {
    justify-self: start;
    background: #202c33;
    border-top-left-radius: 0.2cqw;
}

.wa__msg--out {
    justify-self: end;
    background: #005c4b;
    border-top-right-radius: 0.2cqw;
}

.wa__hora {
    display: block;
    margin-top: 0.2cqw;
    text-align: right;
    font-size: 0.72cqw;
    color: rgba(233, 237, 239, 0.55);
}

.wa__vacio {
    justify-self: center;
    align-self: center;
    max-width: 20ch;
    text-align: center;
    font-size: 1cqw;
    color: #8696a0;
}

/* --- S14 · Cierre + QR ------------------------------------------------
   El QR es blanco sobre transparente: se apoya en el campo azul sin
   recuadro. Grande — tiene que escanearse desde la última fila. */

.slide--cierre {
    grid-template-columns: minmax(0, 1.15fr) auto;
    align-items: center;
    gap: 5cqw;
    padding: calc(var(--cell) * 3);
}

.cierre__body {
    display: grid;
    justify-items: start;
    gap: 1.2cqw;
}

.cierre__title {
    font-size: 3.8cqw;
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.03em;
    max-width: 16ch;
}

.cierre__lead {
    max-width: 30ch;
    font-size: 1.7cqw;
    line-height: var(--lh-snug);
    color: var(--on-brand-soft);
}

.cierre__cita {
    max-width: 34ch;
    margin-top: 0.8cqw;
    padding-left: 1.4cqw;
    border-left: 3px solid var(--glya-teal);
    font-size: 1.45cqw;
    line-height: var(--lh-snug);
    color: var(--on-brand);
}

.cierre__disclaimer {
    margin-top: 1.4cqw;
    max-width: 42ch;
    font-size: 0.85cqw;
    line-height: 1.4;
    color: var(--on-brand-faint);
}

.cierre__qr {
    display: grid;
    justify-items: center;
    gap: 1.2cqw;
}

.cierre__qr img {
    width: 24cqw;
    height: 24cqw;
    display: block;
}

.cierre__qr figcaption {
    font-family: var(--font-mono);
    font-size: 0.85cqw;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--on-brand-faint);
    text-align: center;
}

.cierre__logo {
    position: absolute;
    left: calc(var(--cell) * 3);
    bottom: calc(var(--cell) * 2);
    height: calc(var(--cell) * 2.2);
}