/* ===== portada ===== */
/* ==========================================================================
   00 · PORTADA — el pliegue

   Orden vertical: mancheta / filete a sangre / titular / bajada / boton /
   BANDA VACIA / retrato a sangre con la cota / pie de foto. Padding inferior
   cero: la foto muere en el suelo.

   Tres decisiones que sostienen la pieza:

     1. La banda vacia es un elemento con altura y sin contenido. Se declara
        asi, y no como un margin, para que nadie la borre por parecer un
        descuido: es el 14% del pliegue y es lo que hace que se vea cara.

     2. La foto no tiene contenedor, ni borde, ni radio, ni sombra. Se disuelve
        por los CUATRO lados con degradados apilados; en las esquinas se cruzan
        dos degradados opacos, de modo que el pixel de esquina vale exactamente
        el hueso #fbf7f5 y la foto no tiene canto.

     3. En telefono el boton del pliegue NO existe: la accion vive en la barra
        fija de abajo. Dos botones identicos en pantalla serian dos superficies
        de vino, y el presupuesto es una.
   ========================================================================== */

/* --- Mancheta ------------------------------------------------------------ */

.mancheta__fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e4);
    min-height: 88px;
}

.mancheta__marca { display: block; line-height: 0; padding-block: 8px; }   /* 28 + 16 = 44 de area tactil */
.mancheta__marca img { height: 28px; width: auto; }

.mancheta__descargo { text-align: right; }

/* --- El bloque de texto -------------------------------------------------- */

.portada {
    padding-block: var(--e4) 0;   /* 24 arriba, 0 abajo */
}

.portada__texto { text-align: center; }

.portada__titular {
    font-family: var(--serif);
    font-weight: var(--peso-normal);
    font-size: var(--t-hero);
    line-height: var(--lh-hero);
    letter-spacing: var(--ls-hero);
    color: var(--tinta);
}

.portada__bajada {
    margin: 20px auto 0;
    max-width: 30ch;
    font-size: var(--t-bajada);
    line-height: var(--lh-bajada);
    letter-spacing: -.008em;
    color: var(--guia);
}

.portada__boton { margin-top: var(--e4); }

/* La banda vacia. Es obligatoria. */
.portada__banda { height: 128px; }

/* --- La foto a sangre ---------------------------------------------------- */

.portada__figura { margin: 0; }

.portada__foto {
    position: relative;
    overflow: hidden;
    background: var(--fondo);
    /* El tope de ancho vive AQUI y no en la imagen. Los cuatro degradados que
       disuelven la foto se dibujan sobre este contenedor: si el contenedor
       ocupa toda la ventana y la imagen se queda en 1500, los degradados
       laterales caen sobre hueso vacio y la foto termina en un canto duro,
       justo el borde que la direccion prohibe. Con el tope aqui, el fundido y
       la imagen comparten los mismos cuatro lados. */
    max-width: 1500px;
    margin-inline: auto;
}

.portada__foto img {
    width: 100%;
    /* DOS TOPES, PORQUE SON DOS PROBLEMAS DISTINTOS.

       El de ANCHO: con la foto a sangre sin freno, su altura la dictaba el
       ancho de la ventana, y en una pantalla de 1920 la cara se convertia en
       una valla publicitaria. Con 1500 de tope, la foto deja de crecer y el
       hueso que queda a los lados lo funden los mismos degradados que ya
       existen, asi que se sigue leyendo a sangre.

       El de ALTO: en una pantalla baja (1366x768 es la mas comun en portatiles
       de gama media) el pliegue no da para 500px de foto y solo asomaba una
       banda de ojos. El tope en dvh mantiene la proporcion.

       El recorte se ancla en 22% y no en el centro porque lo que sostiene el
       pliegue son los ojos y el pomulo donde vive la cota; anclado mas abajo,
       la foto se quedaba en nariz y boca. */
    height: auto;
    max-height: 58dvh;
    object-fit: cover;
    object-position: 50% 22%;
}

@supports not (height: 100dvh) {
    .portada__foto img { max-height: 58vh; }
}

@supports not (height: 100dvh) {
    .portada__foto img { height: clamp(300px, 44vh, 560px); }
}

/* Los cuatro degradados. El orden importa: el primero pinta encima.
   Cada uno es opaco solo en su borde, asi que en una esquina coinciden dos
   opacos y el resultado es hueso puro. El corte del suelo se hace en dos
   tramos para que el menton se funda sin lavar la boca. */
.portada__foto::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(to top,
            var(--fondo) 0%, var(--fondo) 1%,
            rgba(251, 247, 245, .55) 4%,
            rgba(251, 247, 245, 0) 9%),
        linear-gradient(to bottom,
            var(--fondo) 0%, var(--fondo) 2%,
            rgba(251, 247, 245, 0) 13%),
        linear-gradient(to right,
            var(--fondo) 0%, var(--fondo) 1%,
            rgba(251, 247, 245, 0) 18%),
        linear-gradient(to left,
            var(--fondo) 0%, var(--fondo) 1%,
            rgba(251, 247, 245, 0) 18%);
}

/* --- La cota ------------------------------------------------------------
   Un punto de anclaje de tamano cero sobre el pomulo. Todo lo demas cuelga
   de el, asi que mover la anotacion es mover dos numeros. */

.cota {
    position: absolute;
    left: 67%;
    /* 39,5% y no 50,4%: el 8-sep se recorto el 18% superior de hero.webp (la
       frente). A sangre y con altura automatica la foto mide 506px a 1440, y el
       pliegue solo deja ver los primeros 399; con la frente dentro, lo unico
       que entraba era una banda de ojos. Al recortarla, el mismo punto del
       pomulo se mueve en el eje Y y este numero lo sigue. Si se cambia la foto,
       se recalcula: (porcentaje_viejo * alto_viejo - corte) / alto_nuevo. */
    top: 39.5%;
    z-index: 2;   /* por encima de los degradados */
    --largo: 96px;
}

.cota__linea {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--largo);
    height: 1px;
    background: var(--vino);
    transform-origin: left center;
    animation: cota-linea .6s cubic-bezier(.7, 0, 0, 1) .25s both;
}

.cota__anillo {
    position: absolute;
    left: var(--largo);
    top: 0;
    width: 5px;
    height: 5px;
    margin: -3px 0 0 -3px;
    border: 1px solid var(--vino);
    border-radius: 50%;
    animation: cota-aparece .3s linear .8s both;
}

.cota__num {
    position: absolute;
    left: 22px;      /* corrido: en el origen mismo taparia el lunar */
    bottom: 9px;
    font-size: var(--t-cota);
    font-weight: var(--peso-medio);
    line-height: 1;
    letter-spacing: -.01em;
    color: var(--vino);
    font-variant-numeric: tabular-nums;
    animation: cota-aparece .3s linear .8s both;
}

.cota__rotulo {
    position: absolute;
    left: calc(var(--largo) + 14px);
    top: 0;
    display: block;
    width: max-content;
    text-align: right;      /* las dos lineas al ras por la derecha */
    transform: translateY(-50%);
    animation: cota-aparece .3s linear .85s both;
}

.cota__nombre {
    display: block;
    font-size: var(--t-meta);
    font-weight: var(--peso-medio);
    line-height: 1.35;
    color: var(--tinta);
}

.cota__valor {
    display: block;
    font-size: var(--t-cota);
    line-height: 1.35;
    color: var(--tinta);   /* medido: --tenue da 1,9:1 sobre esta foto */
    font-variant-numeric: tabular-nums;
}

@keyframes cota-linea {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@keyframes cota-aparece {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Sin movimiento: la cota ya esta dibujada, no hay retardo ni parpadeo. */
@media (prefers-reduced-motion: reduce) {
    .cota__linea,
    .cota__anillo,
    .cota__num,
    .cota__rotulo { animation: none; opacity: 1; }
    .cota__linea { transform: none; }
    .cota__rotulo { transform: translateY(-50%); }
}

/* --- Pie de foto --------------------------------------------------------- */

.portada__pie { margin-top: var(--e3); }

/* --- Barra de accion fija (solo telefono) -------------------------------- */

.barra-fija { display: none; }

/* ==========================================================================
   TELEFONO
   ========================================================================== */

@media (max-width: 767px) {

    .mancheta__fila {
        min-height: 64px;
        justify-content: center;
    }
    .mancheta__marca { padding-block: 12px; }   /* 20 + 24 = 44 */
    .mancheta__marca img { height: 20px; }
    .mancheta__descargo { display: none; }   /* fuera del pliegue */

    .portada { padding-block: var(--e4) 0; }

    /* El boton del pliegue desaparece: la accion es la barra fija. */
    .portada__texto .portada__boton { display: none; }

    .portada__bajada { margin-top: var(--e3); max-width: 20ch; }

    .portada__banda { height: 40px; }

    /* El retrato movil es apaisado; en el telefono se recorta a vertical para
       que ocupe el pliegue como manda la direccion. */
    .portada__foto img {
        height: 470px;
        object-fit: cover;
        object-position: 50% 46%;
    }

    /* Con la cara a todo lo ancho, los costados se disuelven menos: si no,
       el degradado se come el pomulo justo donde va la cota. */
    .portada__foto::after {
        background:
            linear-gradient(to top,
                var(--fondo) 0%, var(--fondo) 2%,
                rgba(251, 247, 245, .70) 5%,
                rgba(251, 247, 245, 0) 14%),
            linear-gradient(to bottom,
                var(--fondo) 0%, var(--fondo) 2%,
                rgba(251, 247, 245, 0) 11%),
            linear-gradient(to right,
                var(--fondo) 0%, var(--fondo) 1%,
                rgba(251, 247, 245, 0) 11%),
            linear-gradient(to left,
                var(--fondo) 0%, var(--fondo) 1%,
                rgba(251, 247, 245, 0) 9%);
    }

    /* La cota apunta hacia adentro: en el telefono el pomulo queda a la
       derecha del cuadro y la unica sala disponible esta a su izquierda. */
    .cota {
        left: 87.2%;
        top: 54.9%;
        --largo: 152px;
    }
    .cota__num {
        left: auto;
        right: 0;
        top: 9px;
        bottom: auto;
    }
    .cota__linea {
        left: calc(var(--largo) * -1);
        transform-origin: right center;
    }
    .cota__anillo { left: calc(var(--largo) * -1); }
    .cota__rotulo {
        left: auto;
        right: calc(100% + var(--largo) + 14px);
    }
    .cota__valor { display: none; }   /* una sola linea */

    .portada__pie { margin-top: var(--e4); }

    .barra-fija {
        display: block;
        position: fixed;
        inset: auto 0 0 0;
        z-index: 20;
        padding: 10px var(--pad-lat) 9px;   /* 1 + 10 + 56 + 9 = 76 */
        padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px));
        background: var(--fondo);
        border-top: 1px solid var(--borde);
    }

    /* Dentro del embudo la barra se retira, y no vuelve. En la pantalla de la
       foto "Empezar el analisis" deja de ser una invitacion: es un segundo
       boton de vino justo debajo de "Tomar foto" -- dos superficies solidas en
       la misma pantalla, contra la regla de la pieza -- y quien lo toca se
       devuelve al principio sin querer. La clase la pone 06-quiz.js al
       encender el quiz y ya no se quita. */
    html.en-embudo .barra-fija { display: none; }

    /* El sitio que se reserva la barra fija para no tapar el final de la
       pagina. Es una declaracion, no una suma: si otra pieza la repite, no
       se acumula. */
    body { padding-bottom: 76px; }
}

/* ===== tokens ===== */
/* ==========================================================================
   FICHAS DEL SISTEMA — KARA Quiz de Piel
   Direccion de arte: "Expediente" (elegida por jurado, 8-sep-2026)

   Los colores y las familias salen de `040_kara_rutinas_ia/app/public/css/
   kctp.css`, que es la fuente de verdad de la marca: aqui no se inventa ni un
   color ni una familia.

   Los NUMEROS de retícula, ritmo y escala salen de MEDIR lovi.care en el DOM,
   no de estimarlos a ojo. Los tres hallazgos que mandan sobre esta hoja:

     1. LA RETICULA TIENE TRES ESCALONES, no uno. Contenedor de 1200px, mas
        120px de padding por lado en cada seccion (columna real de 960), mas
        48px dentro de cada tarjeta (texto en 864). A 1440 eso deja el 40% del
        ancho en aire. El atajo `max-width:1200px; padding:0 24px` deja el
        texto en 1152px y se ve barato: es la diferencia medible.

     2. EL ESPACIADO TIENE DOS VELOCIDADES Y EL SALTO ES BRUSCO. En la vara los
        valores usados son 6, 8, 12, 16, 24, 32, 40, 48, 56, 64 ... y saltan a
        120 y 200. NO EXISTEN el 72, el 80 ni el 96. Por eso aqui se borro el
        peldano de 96px que traia KCTP: es exactamente el valor que hace que
        todo se vea tibio.

     3. LA ESCALA TIPOGRAFICA ES ESCALONADA, NO FLUIDA. La vara mantiene su
        titular en 48px desde 1280 hasta 1920 y solo lo baja en el quiebre de
        movil. Un clamp() que crece con el viewport hace que la pagina no tenga
        una talla propia. Aqui hay dos tallas y un quiebre, y ya.

   Y dos reglas heredadas de KCTP que aqui siguen valiendo:
     - NO HAY GRISES NEUTROS. Toda la tinta esta tenida de tinto.
     - NO HAY PESO 600 NI 700. La jerarquia la da el TAMANO. El 500 es "la
       negrita del sistema".
   ========================================================================== */

:root {
    /* --- Marca KARA (no se toca) ---------------------------------------- */
    --fondo:      #fbf7f5;   /* hueso: el suelo, ~60% de los pixeles */
    --blanco:     #ffffff;   /* la hoja: solo cinco superficies en toda la pagina */
    --crema:      #f9f4f5;
    --panel:      #f5edef;
    --vino:       #5b0c2f;   /* el acento. Presupuesto duro: 0,45% de los pixeles */
    --vino-cl:    #8a2a50;
    --vino-os:    #3d0820;   /* hover del boton */
    --vino-sw:    #f5edef;
    --tinto:      #260514;   /* el del logotipo */
    --oro:        #9c7433;   /* CUENTAGOTAS LITERAL: numerales de seccion y un filete */
    --mint:       #c8e6da;   /* NO entra en la landing: es el verde de "aprobado" del panel */

    /* --- Tinta: tres escalones SOLIDOS, nunca alfa -----------------------
       Prohibido rgba(42,26,33,.5): da 3,22:1 sobre el hueso y no pasa. Cada
       pantalla usa como maximo dos de los tres. */
    --tinta:      #2a1a21;   /* 15,55:1 sobre blanco. Titulares y cuerpo. */
    --guia:       #67555d;   /* 6,50:1. Bajadas e instrucciones. */
    --tenue:      #7e6a73;   /* 4,70:1. Meta, legales, etiquetas de medida. */

    /* --- El filete ------------------------------------------------------
       Regla absoluta: los filetes son SIEMPRE horizontales y a sangre, o
       divisores de tabla. NUNCA dibujan el contorno de una tarjeta. La unica
       excepcion es el campo de formulario, que necesita leerse como un hueco. */
    --borde:      #ebe1e4;
    --linea:      #f3ecee;   /* divisor interno de tabla */
    --borde-c:    #e3d5da;   /* campo dentro de superficie blanca */
    --borde-f:    #dbc9d0;   /* campo activo */

    /* --- Estados --------------------------------------------------------- */
    --ok:         #1f7a58;
    --aviso:      #8a5a00;
    --alerta:     #a5231f;
    --alerta-sw:  #fdeeed;

    /* --- Sobre el vino ---------------------------------------------------
       Sobre un vino tan oscuro el blanco puro vibra: se usa el hueso, que es
       el mismo material del resto de la pagina. */
    --sobre-vino:   #fbf7f5;
    --sobre-vino-2: rgba(251, 247, 245, .74);

    /* ======================================================================
       ESCALA TIPOGRAFICA — ocho peldanos, dos tallas, un quiebre

       12 / 13 / 15 / 17 / 21 / 28 / 40 / 56 en escritorio.
       La frontera entre los dos mundos esta en el salto 21 -> 28, que es
       tambien donde cambia la familia: hasta 21 manda Inter, desde 28 la serif.
       ====================================================================== */
    --t-hero:     3.5rem;      /* 56 */
    --t-seccion:  2.5rem;      /* 40 */
    --t-tarjeta:  1.75rem;     /* 28 */
    --t-bajada:   1.3125rem;   /* 21 */
    --t-cuerpo:   1.0625rem;   /* 17 — IDENTICO en movil, a proposito */
    --t-apoyo:    .9375rem;    /* 15 */
    --t-meta:     .8125rem;    /* 13 */
    --t-cota:     .75rem;      /* 12 */

    /* Interlineado inverso al tamano. NUNCA el 0,92 de la grotesca de la vara:
       Noto Serif Display tiene ascendentes y descendentes largas y a 0,92 se
       chocan. */
    --lh-hero:    1.02;
    --lh-seccion: 1.06;
    --lh-tarjeta: 1.18;
    --lh-bajada:  1.43;
    --lh-cuerpo:  1.6;

    /* Tracking negativo y creciente con el tamano solo por encima de 20px;
       practicamente neutro debajo. NI UN SOLO VALOR POSITIVO en la pagina:
       las versalitas con tracking abierto son el recurso que la abarata. */
    --ls-hero:    -.034em;
    --ls-seccion: -.028em;
    --ls-tarjeta: -.022em;
    --ls-cuerpo:  -.006em;

    --peso-normal: 400;
    --peso-medio:  500;   /* el "negrita" del sistema. No hay nada por encima. */

    --serif: "Noto Serif Display", Georgia, "Times New Roman", serif;
    --sans:  Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    /* ======================================================================
       RITMO VERTICAL — dos velocidades, salto brusco

       Afuera: 120 (piso), 184 (normal), 200 (climax).
       Adentro: 6, 8, 12, 16, 24, 32, 40, 48, 56, 64.
       No existe el 72, ni el 80, ni el 96.
       TODO el aire entre secciones vive en el padding de la seccion; entre
       secciones el gap y el margin son cero.
       ====================================================================== */
    --e-pelo:  6px;    /* separacion entre tarjetas hermanas: se lee como doblez */
    --e1:  8px;
    --e2: 12px;
    --e3: 16px;
    --e4: 24px;
    --e5: 32px;
    --e6: 40px;
    --e7: 48px;
    --e8: 56px;
    --e9: 64px;
    --e-fuera:  120px;   /* piso entre secciones */
    --e-normal: 184px;   /* el caso corriente */
    --e-climax: 200px;   /* apertura y cierre */

    /* ======================================================================
       RETICULA DE TRES ESCALONES
       ====================================================================== */
    --ancho:      1200px;   /* contenedor */
    --pad-lat:     120px;   /* padding de seccion -> columna de 960 */
    --pad-tarjeta:  48px;   /* padding de tarjeta -> texto de 864 */
    --ancho-tex:   560px;   /* 33em: 67 a 72 caracteres. NUNCA los 960. */
    --ancho-corta: 380px;   /* opciones y ayudas del quiz: 30 a 36 caracteres */

    /* --- Radios ----------------------------------------------------------
       El 20px de KCTP es para el panel denso del personal, no para una
       landing. Aqui la tarjeta grande va a 40px. */
    --radio:      40px;
    --radio-med:  20px;
    --radio-ch:    8px;
    --radio-min:   4px;
    --pastilla:  999px;

    /* --- Sombra ----------------------------------------------------------
       Hay UNA sola sombra en toda la pagina (la tarjeta de resultado). Las
       demas superficies blancas se separan por el suelo visible y por su
       tamano, jamas por borde ni por sombra. */
    --sombra-caja: 0 1px 2px rgba(38, 5, 20, .05), 0 28px 56px -24px rgba(38, 5, 20, .22);

    /* --- Movimiento ------------------------------------------------------ */
    --mov-hover: .15s cubic-bezier(.215, .61, .355, 1);
    --mov:       .3s cubic-bezier(.33, 1, .68, 1);
    --mov-entra: .6s cubic-bezier(.7, 0, 0, 1);
}

/* La otra talla. Un solo quiebre: o es telefono o es pagina.
   El CUERPO NO ENCOGE: 17px en los dos. Encoger el cuerpo en movil es lo que
   hace que un formulario se sienta barato en el telefono. */
@media (max-width: 767px) {
    :root {
        --t-hero:     2.125rem;   /* 34 */
        --t-seccion:  1.75rem;    /* 28 */
        --t-tarjeta:  1.3125rem;  /* 21 */
        --lh-hero:    1.03;
        --lh-seccion: 1.07;
        --lh-tarjeta: 1.24;
        --lh-bajada:  1.24;
        --ls-hero:    -.03em;
        --e-pelo:     8px;
        --pad-lat:    20px;
        --e-fuera:    120px;
        --e-normal:   128px;
        --e-climax:   120px;
        --radio:      24px;
    }
}

/* ==========================================================================
   REPOSICION — solo lo que de verdad estorba
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

body {
    margin: 0;
    /* El suelo lo pinta UN SOLO degradado de altura completa; ninguna seccion
       tiene fondo propio. Asi el blanco del cierre nace del mismo material y
       no se ve como un bloque pegado. */
    background: linear-gradient(var(--fondo) 0%, var(--fondo) 86%, var(--blanco) 92%);
    background-attachment: fixed;
    color: var(--tinta);
    font-family: var(--sans);
    font-size: var(--t-cuerpo);
    line-height: var(--lh-cuerpo);
    letter-spacing: var(--ls-cuerpo);
    font-weight: var(--peso-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;   /* el hero rompe el contenedor a proposito */
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

/* TODAS las cifras de la pagina llevan numeros tabulares: sin ellos una tabla
   clinica se ve casera. */
table, .cifra, .cota, .dato { font-variant-numeric: tabular-nums; }

:focus-visible { outline: 2px solid var(--vino); outline-offset: 3px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }

/* ==========================================================================
   PIEZAS COMPARTIDAS
   ========================================================================== */

/* Escalon 1 y 2 de la retícula en una sola clase. */
.env {
    width: 100%;
    max-width: var(--ancho);
    margin-inline: auto;
    padding-inline: var(--pad-lat);
}
.tex { max-width: var(--ancho-tex); }

.display {
    font-family: var(--serif);
    font-weight: var(--peso-normal);
    font-size: var(--t-seccion);
    line-height: var(--lh-seccion);
    letter-spacing: var(--ls-seccion);
    color: var(--tinta);
}

.titulo {
    font-family: var(--serif);
    font-weight: var(--peso-normal);
    font-size: var(--t-tarjeta);
    line-height: var(--lh-tarjeta);
    letter-spacing: var(--ls-tarjeta);
    color: var(--tinta);
}

/* El numeral de seccion, en oro. Nunca por debajo de 21px: el oro esta a
   3,98:1 sobre el hueso y en pequeno deja de leerse. */
.numeral {
    font-family: var(--serif);
    font-weight: var(--peso-normal);
    font-size: var(--t-tarjeta);
    color: var(--oro);
    font-variant-numeric: tabular-nums;
}

.bajada {
    font-size: var(--t-bajada);
    line-height: var(--lh-bajada);
    color: var(--guia);
    max-width: var(--ancho-tex);
}

.cuerpo { max-width: var(--ancho-tex); text-wrap: pretty; }

.meta {
    font-size: var(--t-meta);
    font-weight: var(--peso-medio);
    color: var(--tenue);
    line-height: 1.4;
}

/* El pie de foto de revista. Raya em, no guion. */
.pie-foto {
    font-size: var(--t-meta);
    color: var(--tenue);
    line-height: 1.45;
    max-width: 42ch;
}

/* --- El filete a sangre ---------------------------------------------------
   Corre de borde a borde de la ventana, no del contenedor. Es lo primero que
   separa esta pagina de la vara, que no tiene ni un borde. */
.filete {
    border: 0;
    height: 1px;
    margin: 0;
    background: var(--borde);
}

/* --- El boton -------------------------------------------------------------
   La UNICA superficie de vino solida de cada pantalla. Una landing con dos
   acciones pierde las dos. */
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 var(--e5);
    border: 0;
    border-radius: var(--pastilla);
    background: var(--vino);
    color: var(--sobre-vino);
    font-size: var(--t-cuerpo);
    font-weight: var(--peso-medio);
    letter-spacing: -.004em;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--mov-hover), transform var(--mov-hover);
}
.boton:hover { background: var(--vino-os); transform: translateY(-1px); }
.boton:active { transform: translateY(0); }

@media (max-width: 767px) {
    .boton { min-height: 56px; width: 100%; }
}

/* --- Seccion --------------------------------------------------------------
   TODO el aire de fuera vive aqui. Entre secciones no hay margin ni gap. */
.seccion { padding-block: var(--e-normal); }
.seccion-piso   { padding-block: var(--e-fuera); }
.seccion-climax { padding-block: var(--e-climax); }

/* --- Entrada ---------------------------------------------------------------
   Desde un estado VISIBLE en reposo: si el JavaScript no corre, la pagina se
   lee igual. Una landing que necesita un observador para mostrar su texto es
   una landing rota. */
.entra { opacity: 1; transform: none; }
.js .entra { opacity: 0; transform: translateY(12px); transition: opacity var(--mov-entra), transform var(--mov-entra); }
.js .entra.dentro { opacity: 1; transform: none; }

.oculto-visual {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ===== medimos ===== */
/* ==========================================================================
   01 - LO QUE SE MIDE

   La seccion que la vara no tiene. Es una tabla clinica: siete dimensiones,
   su traduccion a lenguaje de persona y la misma escala repetida siete veces
   por el borde derecho. Esa repeticion NO es ruido: es lo que hace que la
   columna se lea como la regla de un instrumento y no como una lista.

   Cero tarjetas, cero iconos, cero color. El unico color de la seccion es el
   oro del numeral. El vino no aparece: su presupuesto se gasta en la portada
   y en el boton.

   TRES MEDIDAS QUE MANDAN SOBRE ESTA HOJA (medidas en el navegador con las
   fuentes reales, no estimadas a ojo):

     - la escala completa mide 225,7px a 13px Inter 500;
     - el nombre mas largo ("Lesiones acneiformes") mide 176,4px a 17px;
     - la columna del telefono son 350px.

   176,4 + 225,7 = 402px, y no caben en 350. Por eso en telefono la escala se
   contrae a sus dos extremos ("ausente - marcado", 117,6px): el arreglo que
   pide la direccion -nombre y escala en una linea- se respeta, y lo que cede
   es el detalle de los pasos intermedios, no la maqueta. Es el unico sitio
   donde el contenido cambia entre tallas, y esta hecho sin duplicar texto en
   el marcado: se muestra un tramo o el otro.
   ========================================================================== */

/* El aire de la seccion NO va aqui: el filete tiene que quedar por encima de
   el para correr a sangre. */
.mide { padding: 0; }

.mide-caja { padding-block: var(--e-climax) var(--e-fuera); }   /* 200 / 120 */

/* --- El numeral colgado --------------------------------------------------
   El "01" no entra en la columna de texto: cuelga en el padding lateral (72
   de los 120 disponibles) y comparte linea base con la primera linea de la
   frase. La alineacion la hace `baseline`, no un margen a ojo. */
.mide-tapa {
    display: flex;
    align-items: baseline;
    gap: var(--e5);
    margin-left: calc(-1 * (40px + var(--e5)));
}

.mide-numeral {
    flex: 0 0 40px;
    line-height: 1;
}

/* --- El latido -----------------------------------------------------------
   Misma talla que el titulo de seccion, pero con el interlineado suelto: es
   una frase dicha, no un rotulo. Ese contraste de leading (1,26 contra 1,06)
   es lo unico que evita que las dos serifas seguidas se lean como un solo
   parrafo de cuatro lineas. */
.mide-latido {
    line-height: 1.3;
    max-width: 22ch;
}

.mide-titulo { margin-top: var(--e9); }   /* 64 */

/* Los saltos de linea a mano. En telefono vuelven a ser en linea y el texto
   se reparte solo, equilibrado. */
.mide-linea { display: block; }

/* --- La tabla ------------------------------------------------------------
   Filete --borde arriba y abajo, --linea entre filas. Los filetes de aqui
   son divisores de tabla, que es el otro uso permitido: nunca dibujan el
   contorno de nada. */
.mide-tabla {
    margin-top: var(--e9);   /* 64 */
    border-top: 1px solid var(--borde);
    border-bottom: 1px solid var(--borde);
}

/* 56px CLAVADOS, borde incluido: 23 de linea + 16 y 16 de aire dan 55, y el
   min-height (que aqui cuenta borde y relleno, porque el reposicion pone
   border-box) sube el resto. Sin esto la fila mide 56,8 y el paso de la
   tabla deja de ser un numero redondo, que es lo unico que se le pide a un
   instrumento. La columna del nombre son 240 = el mismo numero del margen. */
.mide-fila {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) max-content;
    column-gap: var(--e6);
    align-items: baseline;
    min-height: 56px;
    padding-block: var(--e3);
}

.mide-fila + .mide-fila { border-top: 1px solid var(--linea); }

.mide-nombre {
    font-size: var(--t-cuerpo);
    font-weight: var(--peso-medio);
    line-height: 1.35;
    color: var(--tinta);
}

.mide-dice {
    font-size: var(--t-cuerpo);
    font-weight: var(--peso-normal);
    line-height: 1.35;
    color: var(--guia);
}

/* La regla del instrumento. Tenue a proposito: es una etiqueta de medida, no
   texto de lectura, y tiene que quedar por debajo de la traduccion. */
.mide-escala {
    justify-self: end;
    font-size: var(--t-meta);
    font-weight: var(--peso-medio);
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--tenue);
    white-space: nowrap;
}

.mide-rango { display: none; }   /* solo en telefono */

/* --- Talla intermedia ----------------------------------------------------
   Por debajo de 1140 la columna ya no da para las tres columnas con la
   traduccion en una linea (297,4px la mas larga), asi que la fila se parte
   en dos alturas antes de que el texto empiece a apretarse. La escala aqui
   todavia cabe entera. */
@media (max-width: 1139px) {
    .mide-fila {
        grid-template-columns: minmax(0, 1fr) max-content;
        column-gap: var(--e4);
        row-gap: 2px;
        min-height: 0;
        padding-block: var(--e3);
    }
    .mide-nombre  { grid-area: 1 / 1; }
    .mide-escala  { grid-area: 1 / 2; }
    .mide-dice    { grid-area: 2 / 1 / 3 / 3; }
}

/* --- Telefono ------------------------------------------------------------ */
@media (max-width: 767px) {
    /* El numeral se pone de pie: en linea propia antes de la frase. A 21px
       el oro sigue por encima de su piso de legibilidad. */
    .mide-tapa {
        display: block;
        margin-left: 0;
    }
    .mide-numeral {
        display: block;
        margin-bottom: var(--e2);
    }

    .mide-latido { max-width: none; }

    /* El titulo se reparte solo y equilibrado: a 28px su primera linea mide
       347,6px contra los 350 de la columna, y un salto fijo dejaria una
       huerfana al primer pixel de diferencia. */
    .mide-titulo .mide-linea { display: inline; }
    .mide-titulo { text-wrap: balance; }

    /* Aqui la fila son dos lineas de lectura, no una celda: el interlineado
       vuelve a 1,4 y la altura la manda el contenido. */
    .mide-fila   { padding-block: var(--e3); min-height: 0; }
    .mide-nombre,
    .mide-dice   { line-height: 1.4; }
    .mide-tramos { display: none; }
    .mide-rango  { display: inline; }
}

/* ===== lectura ===== */
/* ==========================================================================
   02 — LA LECTURA

   El mecanismo de la seccion es un contraste de saturacion, no una decoracion:
   FUERA de la tarjeta la piel es un fantasma (macro a sangre, saturate .62,
   disuelta por los cuatro lados hacia el hueso); DENTRO de la tarjeta la piel
   esta a saturacion plena, con tres cotas encima. Eso es lo que dice
   "aqui se mide" sin escribirlo.

   Aqui vive la UNICA sombra de toda la pagina y el UNICO filete de oro.
   La unica italica de la pagina es la cita de Aura.
   Ni un filete dibuja el contorno de la tarjeta: la tarjeta se separa del
   suelo por su sombra y por su tamano.
   ========================================================================== */

.lectura {
    position: relative;
    isolation: isolate;
}

/* --- La macro fantasma -----------------------------------------------------
   A sangre de ventana (la seccion es de ancho completo) y disuelta por los
   cuatro lados con una sola elipse: no lleva contenedor, ni borde, ni radio.
   Se corre a la derecha para que el texto de la izquierda caiga sobre hueso
   limpio y conserve su contraste real. */
.lec-fondo {
    position: absolute;
    inset: 0 0 0 30%;
    z-index: 0;
    overflow: hidden;
    /* Una sola elipse hace el desvanecido por los CUATRO lados: la alfa llega
       a cero antes del borde del bloque, asi que el arranque de la capa no
       deja costura vertical. */
    -webkit-mask-image: radial-gradient(60% 84% at 56% 50%,
        #000 0%, rgba(0,0,0,.92) 26%, rgba(0,0,0,.4) 62%, transparent 88%);
            mask-image: radial-gradient(60% 84% at 56% 50%,
        #000 0%, rgba(0,0,0,.92) 26%, rgba(0,0,0,.4) 62%, transparent 88%);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
}

/* El encuadre baja al pomulo y la mandibula a proposito: la parte alta de la
   macro es pelo desenfocado y a esta opacidad se lee como nube, no como piel. */
.lec-fondo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 76%;
    filter: saturate(.62);
    opacity: .46;
}

.lec-env { position: relative; z-index: 1; }

/* --- Retícula --------------------------------------------------------------
   La tarjeta se sale 72px del contenedor hacia la derecha: por eso queda
   "superpuesta" a la macro y no simplemente al lado. El texto conserva sus
   560px enteros. */
.lec-rejilla {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: var(--e7);
    align-items: center;
    margin-right: -72px;
}

/* --- Columna de texto ------------------------------------------------------ */
.lec-numeral { margin-bottom: var(--e4); }

.lec-titulo { margin-bottom: var(--e4); }

.lec-parrafo {
    max-width: 560px;
    color: var(--guia);
    line-height: 1.588;   /* 17/27, medido, no heredado */
}

/* La UNICA italica de la pagina. Serif 400, al tamano de bajada. No lleva
   comillas de adorno ni raya de apertura: la abre el cambio de familia. */
.lec-cita { margin-top: var(--e6); }

.lec-cita__frase {
    font-family: var(--serif);
    font-style: italic;
    font-weight: var(--peso-normal);
    font-size: var(--t-bajada);
    line-height: var(--lh-bajada);
    letter-spacing: -.012em;
    color: var(--tinta);
    max-width: 520px;
}

.lec-cita__firma {
    margin-top: var(--e2);
    font-size: var(--t-meta);
    color: var(--tenue);
    line-height: 1.4;
}

/* --- La tarjeta de resultado ----------------------------------------------
   Radio 40, padding 16, foto a 24 (40 - 16): radios concentricos exactos.
   En movil el token baja a 24 y la foto acompana sola a 8. */
.lec-tarjeta {
    --r-tarjeta: var(--radio);
    --pad-t: 16px;
    background: var(--blanco);
    border-radius: var(--r-tarjeta);
    padding: var(--pad-t);
    box-shadow: var(--sombra-caja);
}

.lec-foto {
    position: relative;
    border-radius: calc(var(--r-tarjeta) - var(--pad-t));
    overflow: hidden;
}

.lec-foto img {
    width: 100%;
    /* height:auto es obligatorio: los atributos width/height del HTML entran
       como pista de presentacion y, si no se anulan, la altura queda clavada
       en 1600px y aspect-ratio no llega a calcularse. */
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 50% 22%;
}

/* --- Las cotas -------------------------------------------------------------
   Mas pequenas que la de la portada (96px): aqui el filete va de 28 a 40px y
   la etiqueta es de una sola linea. Anillo sobre el rasgo, filete horizontal
   saliendo hacia el margen limpio de la derecha, numeral y palabra al final.
   El numeral repite el de la tabla de abajo: la foto y la tabla son la misma
   medicion vista dos veces. */
.lec-cotas { position: absolute; inset: 0; }

.lec-cota {
    position: absolute;
    display: flex;
    align-items: center;
    transform: translate(-3px, -50%);
    white-space: nowrap;
    font-size: var(--t-cota);
    line-height: 1;
}

.lec-cota__anillo {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    border: 1px solid var(--vino);
    background: transparent;
    flex: none;
}

.lec-cota__linea {
    height: 1px;
    width: var(--largo, 32px);
    margin: 0 8px;
    background: var(--vino);
    flex: none;
    transform-origin: left center;
    animation: lec-traza .6s cubic-bezier(.7, 0, 0, 1) both;
}

.lec-cota__n {
    font-weight: var(--peso-medio);
    color: var(--vino);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.004em;
}

/* Los anillos caen en tres puntos distintos del rostro (pomulo, comisura,
   menton) y cada filete tiene el largo justo para que los tres numerales
   terminen en el MISMO riel: asi se lee como plano acotado y no como tres
   globos sueltos. Los tres van por debajo del pelo, que es la unica zona
   oscura del retrato: un filete de vino sobre pelo no se ve. */
.lec-cota--1 { top: 60%; left: 60%; --largo: 56px; }
.lec-cota--2 { top: 65%; left: 58%; --largo: 64px; }
.lec-cota--3 { top: 74%; left: 56%; --largo: 72px; }

.lec-cota--2 .lec-cota__linea { animation-delay: .09s; }
.lec-cota--3 .lec-cota__linea { animation-delay: .18s; }

@keyframes lec-traza {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* --- El bloque de medicion -------------------------------------------------
   La etiqueta va subrayada por el UNICO filete de oro de la pagina. Los
   divisores entre filas son de tabla, no contornos. */
.lec-medicion {
    padding: var(--e4) var(--e1) var(--e1);
}

.lec-medicion__eti {
    font-size: var(--t-meta);
    font-weight: var(--peso-medio);
    letter-spacing: -.002em;
    color: var(--tinta);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--oro);
}

.lec-fila {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0 var(--e2);
    min-height: 42px;
    padding-block: 11px;
    font-variant-numeric: tabular-nums;
}

.lec-fila + .lec-fila { border-top: 1px solid var(--linea); }

.lec-fila__n {
    font-size: var(--t-cota);
    font-weight: var(--peso-medio);
    color: var(--vino);
}

.lec-fila__dim {
    font-size: var(--t-apoyo);
    color: var(--guia);
}

.lec-fila__niv {
    font-size: var(--t-apoyo);
    font-weight: var(--peso-medio);
    color: var(--tinta);
    text-align: right;
}

/* ==========================================================================
   UNA COLUMNA — telefono y tabletas angostas
   La tarjeta baja debajo del texto, centrada y con tope de ancho para que
   NUNCA se salga de la ventana. La macro se recorta y se apaga: en 390px el
   fantasma tiene que dejar leer el parrafo.
   ========================================================================== */
@media (max-width: 1023px) {
    .lec-rejilla {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--e9);
        margin-right: 0;
        justify-items: center;
    }

    .lec-texto { width: 100%; max-width: 560px; }

    .lec-tarjeta {
        width: 100%;
        max-width: 420px;
        justify-self: center;
    }

    /* En una columna el fantasma baja a la altura de la tarjeta: si se queda
       arriba, el parrafo se lee sobre la macro y la seccion se ensucia. La
       elipse llega a cero antes del borde de arriba para que no quede un corte
       contra la seccion anterior. */
    .lec-fondo {
        inset: 0;
        -webkit-mask-image: radial-gradient(150% 46% at 50% 69%,
            #000 0%, rgba(0,0,0,.95) 22%, rgba(0,0,0,.5) 58%, transparent 92%);
                mask-image: radial-gradient(150% 46% at 50% 69%,
            #000 0%, rgba(0,0,0,.95) 22%, rgba(0,0,0,.5) 58%, transparent 92%);
    }

    /* En vertical la macro se recorta por el ANCHO, no por el alto: con el
       encuadre centrado sale una franja de pomulo casi lisa que desaparece
       contra el hueso. Se corre al borde de la mandibula, que si tiene forma. */
    .lec-fondo img {
        object-position: 72% 50%;
        opacity: .62;
    }
}

@media (max-width: 767px) {
    .lec-cita__frase { max-width: none; }

    .lec-medicion { padding: var(--e4) 4px var(--e1); }
    .lec-fila { grid-template-columns: 24px minmax(0, 1fr) auto; }
}

/* ===== proceso ===== */
/* ==========================================================================
   03 — COMO SE HACE

   Cuatro decisiones que sostienen la seccion:

   1. EL HUECO ES DE PELO. Las tarjetas se separan por --e-pelo (6px en
      escritorio, 8px en movil) y por nada mas: ni borde, ni sombra. A 6px el
      ojo no separa tres objetos, lee un doblez. A 16px ya son tres tarjetas
      sueltas y la seccion se cae al lugar comun.

   2. EL RADIO ES ASIMETRICO para que la costura se lea como doblez y no como
      un error de alineacion: redondo por fuera del bloque, casi recto por
      dentro. Se resuelve con dos variables locales para no repetir cuatro
      valores en tres reglas.

   3. LA TARJETA SE LLENA DE ARRIBA A ABAJO, no se centra. La primera version
      centraba el bloque de texto en los 220px y quedaban ~148px de blanco
      muerto repartidos arriba y abajo: tres losas huecas, no un instrumento.
      Ahora el renglon de medida se ancla al borde superior, el texto al
      inferior, y el sobrante cae en UN solo hueco en medio (space-between
      sobre un gap minimo de 24px). Los 220px quedan trabajados y no regalados.

   4. EL RENGLON DE MEDIDA SE ALINEA POR LINEA DE BASE, no por caja. Son dos
      tipos de tamano muy distinto (28px serif en oro contra 13px sans) y
      alinearlos por caja deja la cifra flotando; sobre el mismo renglon se
      lee como la lectura de un aparato, que es justo la tesis de la pagina.
   ========================================================================== */

.proceso {
    /* Radio externo del bloque (el 40 del sistema, 24 en movil) e interno de
       las costuras. Se declaran aqui para que las tres reglas de tarjeta lean
       de un solo sitio. */
    --r-ext: var(--radio);
    --r-int: var(--radio-ch);

    /* El MISMO hueso que pinta el degradado del body en esta altura de la
       pagina: no cambia un pixel de como se ve montada. Esta aqui porque el
       hueco de 6px es TODA la estructura de la seccion, y ese hueco no puede
       depender de en que punto del degradado caiga la seccion. Sin esto, la
       pieza fotografiada suelta sale con las tres tarjetas fundidas en una:
       el degradado del body es `fixed` y en una pagina corta ya llega al
       blanco antes de la tercera costura. */
    background: var(--fondo);
}

/* El filete va pegado al borde superior de la seccion, a sangre de ventana,
   por eso el aire vive en un envoltorio y no en la propia <section>. */
.proceso__aire {
    padding-top: var(--e-normal);
    padding-bottom: var(--e-fuera);
}

/* --- Cabecera de seccion --------------------------------------------------
   El numeral es folio, no titulo: line-height 1 para que la caja no meta aire
   fantasma, y 24px hasta el titular para que se lean como un par. */
.proceso__numeral {
    line-height: 1;
    margin-bottom: var(--e4);
}

.proceso__titulo {
    margin-bottom: var(--e9);   /* 64px hasta el bloque de tarjetas */
}

/* --- El bloque de tres ---------------------------------------------------- */
.pasos {
    display: grid;
    gap: var(--e-pelo);
}

.paso {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--e4);          /* hueco minimo; el sobrante de los 220px se suma aqui */

    min-height: 220px;
    padding: var(--e6) var(--pad-tarjeta);   /* 40 / 48 */
    background: var(--blanco);
    border-radius: var(--r-int);
}

/* Solo las dos esquinas que dan al hueso se redondean de verdad. */
.paso:first-child { border-radius: var(--r-ext) var(--r-ext) var(--r-int) var(--r-int); }
.paso:last-child  { border-radius: var(--r-int) var(--r-int) var(--r-ext) var(--r-ext); }

/* El renglon de medida: folio a la izquierda, cifra a la derecha, un solo
   renglon compartido. */
.paso__medida {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--e4);
}

.paso__n    { line-height: 1; }
.paso__dato { text-align: right; }

.paso__titulo { margin-bottom: var(--e2); }

.paso__cuerpo {
    color: var(--guia);
    /* Tope de medida: la linea mas larga de las tres son 74 caracteres y a
       68ch entra en un solo renglon, pero una reescritura futura no se estira
       hasta los 91 caracteres que caben en la tarjeta. */
    max-width: 68ch;
    text-wrap: pretty;
}

/* ==========================================================================
   TELEFONO — el trafico de Meta es casi todo de aqui
   ========================================================================== */
@media (max-width: 767px) {

    .proceso {
        --r-int: 6px;   /* la costura se cierra otro par de pixeles */
    }

    .paso {
        /* Sin altura minima: aqui manda el texto. La estructura no cambia
           (medida arriba, texto abajo), solo se aprieta la caja. */
        min-height: 0;
        padding: var(--e5) var(--e4);   /* 32 / 24 */
    }

    .paso__cuerpo { max-width: none; }
}

/* ===== limites ===== */
/* ==========================================================================
   04 — LIMITES · "Lo que esta pagina no va a hacer"
   ==========================================================================
   Ritmo: 184 arriba, 120 abajo (128/120 en telefono, por los tokens).
   El aire de arriba vive en el padding de la REJILLA y no de la seccion,
   porque el filete tiene que quedar al ras de la costura y el padding de la
   seccion lo empujaria 184px hacia adentro.

   El reparto de la columna de 960:
       380 (cabeza)  +  64 (aire)  +  516 (clausulas)
   El 64 es peldano legitimo del sistema; el 80 y el 96 no existen a proposito.
   El filete de cada fila mide 516 y el texto ocupa unos 270: ese sobrante de
   regla vacia es lo que hace que se lea como tabla de instrumento y no como
   parrafo con vinetas.

   Presupuesto de vino: seis rayas de 12x1px = 72px de vino en toda la
   seccion. Es literalmente todo el adorno que lleva.
   ========================================================================== */

.seccion-limites {
    padding-bottom: var(--e-fuera);
}

.limites-rejilla {
    padding-top: var(--e-normal);
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    column-gap: var(--e9);
    align-items: start;
}

/* --- La cabeza ------------------------------------------------------------
   El numeral va a line-height 1 para que su borde superior coincida con el
   filete que abre la tabla de la derecha. Con el 1,6 que hereda del cuerpo
   quedaria flotando 9px por debajo y las dos columnas no arrancarian juntas. */

.limites-numeral {
    line-height: 1;
}

.limites-titulo {
    margin-top: var(--e4);
}

/* --- Las seis clausulas ---------------------------------------------------
   Filetes horizontales, jamas un contorno: --borde (mas oscuro) abre y cierra
   la tabla, --linea separa por dentro. Es la jerarquia de una tabla clinica,
   donde la cabecera y el pie pesan mas que los divisores internos. */

.limites-lista {
    border-top: 1px solid var(--borde);
    border-bottom: 1px solid var(--borde);
}

.limites-fila {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: var(--e1) 0 var(--e1) 28px;
    font-size: var(--t-cuerpo);
    line-height: 27px;
    color: var(--tinta);
}

.limites-fila + .limites-fila {
    border-top: 1px solid var(--linea);
}

/* La raya. 12px de largo, 1px de grueso, y 16px de aire hasta el texto
   (12 + 16 = los 28 de sangria). Sube 1px sobre el centro de la caja porque
   el centro optico de una linea de Inter esta en la altura de la x, no en el
   medio geometrico del interlineado. */
.limites-fila::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(50% - 1px);
    width: 12px;
    height: 1px;
    background: var(--vino);
}

/* --- La nota de privacidad ------------------------------------------------
   Nota al pie del expediente: 24px por debajo del filete de cierre. La medida
   se corta en 460 (no en los 516 de la columna) por dos razones: a 13px los
   516 dan 78 caracteres por linea, muy por encima de los 72 que aguanta el
   ojo; y a 460 el texto cae en DOS lineas parejas. A 46ch caia en tres y la
   ultima era "a Aura.", una viuda de dos palabras al pie de la seccion. */

.limites-nota {
    margin-top: var(--e4);
    max-width: 460px;
    font-size: var(--t-meta);
    line-height: 1.5;
    color: var(--tenue);
    text-wrap: pretty;
}

/* ==========================================================================
   TABLETA — la rejilla de dos columnas se rompe antes del quiebre de movil
   ==========================================================================
   A 768px la columna real son 528px y no caben 380 + 64 + una tabla legible.
   Esto no contradice la regla de "un solo quiebre": aquella habla de la
   ESCALA TIPOGRAFICA, que aqui sigue siendo la misma a los dos lados. */

@media (max-width: 1023px) {
    .limites-rejilla {
        grid-template-columns: minmax(0, 1fr);
    }
    .limites-hoja {
        margin-top: var(--e7);
    }
}

/* ==========================================================================
   TELEFONO
   ==========================================================================
   El cuerpo NO encoge: las seis lineas siguen en 17/27. A 390 la columna es
   de 350 y la mas larga ("Tu foto se borra a los treinta dias.") mide unos
   300 con la sangria descontada, asi que entra en una sola linea. Si en un
   telefono mas angosto se partiera, la fila crece sola: manda min-height,
   no height. */

@media (max-width: 767px) {
    .limites-hoja {
        margin-top: var(--e6);
    }
    .limites-nota {
        max-width: none;
    }
}

/* ===== cierre ===== */
/* ==========================================================================
   05 — CIERRE + PIE

   Tres decisiones que explican todo lo demas:

   1. NI UN FONDO. El blanco del cierre lo trae el degradado del body. Si esta
      seccion se pintara de blanco, el corte se veria como una costura.
   2. NI UNA CAJA EN EL PIE. Lo que separa el pie del cierre es el filete a
      sangre y nada mas: sin panel gris, sin borde de contorno, sin columnas de
      enlaces. Un pie que se dibuja a si mismo una caja es un pie de plantilla.
   3. LOS PUNTOS MEDIOS SE COMPONEN, NO SE ESCRIBEN. En escritorio separan una
      linea; en telefono desaparecen y cada clausula toma su renglon, para que
      nunca quede un punto huerfano al empezar o al cerrar una linea.
   ========================================================================== */

.cierre__col { text-align: center; }

/* La frase hereda .display (serif 400 al tamano de seccion). Solo se centra:
   el salto de linea ya viene puesto a mano en el HTML. */
.cierre__frase { margin-inline: auto; }

/* La unica superficie solida de vino de esta pantalla. Se le abre el aire
   lateral porque es el climax de la pagina, no un boton de fila. */
.cierre__boton {
    margin-top: var(--e4);
    padding-inline: var(--e6);
}

.cierre__meta {
    margin-top: var(--e2);
    font-variant-numeric: tabular-nums;   /* los "90 segundos" */
}

/* .45em a cada lado: un poco mas que un espacio de palabra, que es lo que pide
   un punto medio para leerse como separador y no como puntuacion. */
.cierre__pto,
.pie__pto { margin-inline: .45em; }

/* --------------------------------------------------------------------------
   EL PIE — una banda de 88px, no un bloque
   -------------------------------------------------------------------------- */

.pie__fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e4);
    min-height: 88px;
}

.pie__marca {
    height: 20px;
    width: auto;
    flex: none;
}

/* El descargo va en 400, no en el 500 de .meta: son 90 caracteres de prosa
   legal, y a ese largo el 500 se lee como enfasis. */
.pie__legal {
    font-size: var(--t-meta);
    line-height: 1.45;
    color: var(--tenue);
    text-align: right;
}

/* --------------------------------------------------------------------------
   TELEFONO
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

    /* El boton ya es de ancho completo y 56px de alto por la hoja de fichas. */
    .cierre__boton { padding-inline: var(--e4); }

    /* Corte gobernado: "90 segundos · sin registro" arriba y "resultado por
       WhatsApp" abajo. El punto que sobra se convierte en el propio salto. */
    .cierre__pto--corte,
    .pie__pto {
        display: block;
        margin-inline: 0;
        font-size: 0;
        line-height: 0;
    }

    .pie__fila {
        flex-direction: column;
        justify-content: center;
        gap: var(--e4);
        min-height: 0;
        padding-block: var(--e6);
    }

    .pie__legal { text-align: center; }
}

/* ===== quiz ===== */
/* ==========================================================================
   06 - EL QUIZ

   Es la unica pieza de la pagina que TAPA a las demas: cuando esta viva se
   pone fija sobre toda la ventana. No es un capricho de app; es que un quiz
   dentro del scroll de la landing deja ver el pie de pagina por debajo y la
   persona se distrae justo donde hay que decidir.

   CINCO NUMEROS QUE MANDAN SOBRE ESTA HOJA
   ----------------------------------------

     1. LA COLUMNA DEL QUIZ SON 560px CENTRADOS, no los 960 de la landing.
        La landing alinea a la izquierda porque tiene fotos y tablas que
        ocupan el ancho; aqui no hay nada mas en pantalla, y una columna de
        960 con una pregunta de cuatro palabras se ve vacia por accidente en
        vez de vacia a proposito. En telefono son 350, exactamente los mismos
        que el resto de la pagina (--pad-lat vale 20).

     2. LAS OPCIONES SE CORTAN EN 380 (--ancho-corta) DENTRO DE ESOS 560.
        Que la lista sea mas corta que la pregunta es la unica jerarquia de
        la pantalla: no hay color, no hay peso, no hay icono que la marque.

     3. LA FILA SON 56px, el mismo paso que la tabla de la seccion 01 y el
        mismo alto minimo del boton. Las filas con linea de ayuda crecen; el
        56 es el piso, no la ley.

     4. EL BLOQUE DE VINO SOBRESALE 16px POR CADA LADO de la columna de
        texto. Con el bloque al ras de las letras parece un error de relleno;
        con 16 de aire dentro parece una marca hecha sobre el papel. Los
        filetes divisores NO sobresalen: solo el vino.

     5. LA BARRA DE ARRIBA ES UN FILETE GRIS DE 1px CON UNO DE VINO DE 2px
        ENCIMA. El gris se pinta con un degradado de dos paradas dentro de una
        caja de 2px, no con un borde, para que el vino lo tape al crecer y no
        quede una linea gris asomando por debajo.

   Y una regla que se hereda: en las pantallas de pregunta NO hay boton. El
   presupuesto es UNA superficie de vino solida por pantalla, y ahi la gasta
   la opcion elegida. En la de contacto no hay opciones, asi que la gasta el
   boton. La pregunta 3 es la unica que tiene las dos cosas a la vez, y como se
   resuelve esta escrito abajo, en su propio bloque.
   ========================================================================== */

/* --------------------------------------------------------------------------
   LOS DOS ESTADOS DE LA SECCION

   Sin JavaScript la seccion es una seccion mas: las ocho pantallas apiladas,
   legibles, sin nada escondido. En cuanto el script arranca marca `data-js`
   y la seccion se apaga hasta que alguien la enciende (`data-vivo`).
   -------------------------------------------------------------------------- */

.quiz { padding-block: var(--e-fuera); }

.quiz[data-js] { display: none; }

.quiz[data-js][data-vivo] {
    display: block;
    padding: 0;
    position: fixed;
    inset: 0;
    z-index: 40;             /* por encima de la barra fija de la portada (20) */
    background: var(--fondo);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* El fondo de la pagina no se mueve mientras el quiz esta encima. */
html.quiz-abierto,
body.quiz-abierto { overflow: hidden; }

/* --------------------------------------------------------------------------
   LA RETICULA DEL QUIZ
   -------------------------------------------------------------------------- */

.quiz__fila,
.quiz__lienzo {
    width: 100%;
    max-width: 600px;        /* 560 de columna + 20 de aire a cada lado */
    margin-inline: auto;
    padding-inline: 20px;
}

.quiz__lienzo {
    /* EL BLOQUE SE CENTRA VERTICALMENTE, no cuelga del techo.

       La version anterior fijaba 184 arriba y 120 abajo, calculados para que
       la pregunta MAS LARGA (la 3, de siete opciones) cupiera justa. El efecto
       es que las preguntas cortas -que son cinco de las siete- dejaban el
       tercio inferior vacio: medido, 251px de 844 en telefono, el 30% de la
       pantalla, y 184px en escritorio. Eso no se lee como aire, se lee como
       que la pagina esta rota o a medio cargar.

       Con min-height y justify-content:center el aire sobrante se reparte
       arriba y abajo en vez de acumularse al pie, y las preguntas largas
       siguen cabiendo porque el bloque CRECE: si el contenido pasa de la
       altura de la ventana, el centrado deja de actuar y el panel corre.
       Los paddings pasan a ser el minimo, no la ley.

       dvh y no vh: en el telefono la barra del navegador aparece y desaparece
       al desplazarse, y con vh el bloque salta cada vez. */
    min-height: calc(100dvh - 58px);   /* 58 = la cabecera sticky */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: var(--e7);          /* 48 de respiro minimo arriba y abajo */
}

/* Los navegadores sin dvh (Safari viejo) reciben el equivalente en vh, que es
   peor pero no rompe nada. */
@supports not (height: 100dvh) {
    .quiz__lienzo { min-height: calc(100vh - 58px); }
}

/* --------------------------------------------------------------------------
   LA CABECERA: barra de avance y numeral

   Es sticky y no fija porque vive DENTRO del panel que corre: asi el filete
   se queda pegado al borde de arriba sin que haya que descontarle altura al
   lienzo ni sincronizar dos scrolls.
   -------------------------------------------------------------------------- */

.quiz__cabeza {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--fondo);
}

.quiz__barra {
    position: relative;
    height: 2px;
    /* El filete gris: 1px pegado abajo, a sangre. */
    background: linear-gradient(var(--fondo) 0 1px, var(--borde) 1px 2px);
}

.quiz__avance {
    position: absolute;
    inset: 0;
    background: var(--vino);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--mov);
}

.quiz__fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e4);
    min-height: 56px;
}

.quiz__volver {
    padding: 8px 0;          /* 13 de linea + 16 = area tactil decente */
    margin: 0;
    border: 0;
    background: none;
    font-size: var(--t-meta);
    font-weight: var(--peso-normal);
    line-height: 1.4;
    color: var(--tenue);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--borde-c);
    cursor: pointer;
    transition: color var(--mov-hover), text-decoration-color var(--mov-hover);
}
.quiz__volver:hover { color: var(--tinta); text-decoration-color: var(--tenue); }
.quiz__volver[data-oculto] { visibility: hidden; pointer-events: none; }

.quiz__paso {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}
.quiz__paso[data-oculto] { visibility: hidden; }

/* --------------------------------------------------------------------------
   LA PANTALLA
   -------------------------------------------------------------------------- */

.quiz[data-js] .quiz-p { display: none; }

.quiz[data-js] .quiz-p[data-actual] {
    display: block;
    animation: quiz-entra .3s cubic-bezier(.33, 1, .68, 1) both;
}

@keyframes quiz-entra {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* Solo cuenta sin JavaScript, donde las ocho van una debajo de otra. */
.quiz-p + .quiz-p { margin-top: var(--e9); }

.quiz-p__num {
    display: block;
    line-height: 1;
    margin-bottom: var(--e4);
}

.quiz-p__titulo { outline: none; }        /* recibe el foco al cambiar de pantalla */
.quiz-p__linea { display: block; }

/* El interlineado del sistema (1,06) esta pensado para titulares en ingles.
   Aqui las preguntas llevan tildes y enes, y un juez lo midio: entre la tilde
   de "anos" y las mayusculas de "tienes?" quedaban 8px de tinta a tinta, al
   borde de tocarse. 1,15 lo resuelve sin tocar el tamano ni salir del sistema:
   es el mismo peldano que ya usa el titulo de tarjeta. Solo se sube AQUI,
   donde el problema existe, y no en el token, que gobierna titulares sin
   tildes por debajo de la linea. */
.quiz-p__titulo { line-height: 1.15; }

/* --------------------------------------------------------------------------
   LAS OPCIONES

   Filetes de tabla, como en la seccion 01: --borde arriba y abajo, --linea
   entre filas. Nunca dibujan una tarjeta.
   -------------------------------------------------------------------------- */

.quiz-ops {
    /* En telefono la lista se corta antes que la pregunta y esa diferencia es
       toda la jerarquia de la pantalla. En escritorio ese mismo 380 dentro de
       una ventana de 1440 se lee como una tira estrecha perdida, no como una
       decision: la mancha de tinta ocupa el 26% del ancho y el ojo no encuentra
       el centro. Se ensancha a 480 en pantallas grandes, que conserva la
       jerarquia (la lista sigue siendo mas corta que la columna de 560) y da
       un bloque con peso. */
    max-width: var(--ancho-corta);
    margin-top: var(--e7);                /* 48 */
    border-top: 1px solid var(--borde);
    border-bottom: 1px solid var(--borde);
}

.quiz-op {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    width: 100%;
    min-height: 56px;
    padding: 9px 0;
    margin: 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.quiz-op + .quiz-op { border-top: 1px solid var(--linea); }

/* --- La senal de que esto se toca ---------------------------------------
   Tres jueces distintos dijeron lo mismo mirando la pantalla a ciegas: "las
   opciones no tienen ninguna afordancia tactil, el usuario no sabe que son
   botones". No es una queja de estetica, es de conversion: una fila que no
   parece tocable no se toca, y esta es la pantalla donde empieza el quiz.

   La direccion prohibe iconos, pastillas y contornos de tarjeta. Pero la cota
   de la portada YA es un filete de 1px con un anillo, asi que una punta de
   flecha dibujada con dos filetes de 1px esta EN EL MISMO IDIOMA: no es un
   icono importado, es la misma linea que mide la piel, girada.

   En reposo va en el gris de adornos; al pasar por encima o al elegir, en
   vino y desplazada 3px. Ese desplazamiento es la segunda senal. */
.quiz-op::after {
    content: "";
    position: absolute;
    right: 2px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -4px;
    /* --tenue, y no un gris de adorno mas claro, por dos razones. La primera
       es que el sistema de esta landing tiene TRES escalones de tinta y no
       cuatro (tinta, guia, tenue): meter un cuarto para un adorno rompe la
       regla que sostiene que todo se lea como un solo material.
       La segunda es que este galon no es un adorno: es la unica senal de que
       la fila se toca, asi que tiene que verse.

       Aqui hubo un fallo que vale la pena dejar escrito: la primera version
       usaba var(--tenue-2), un token que existia en el sistema viejo de KCTP y
       que YO borre al rehacer los tokens. En CSS, una variable inexistente
       dentro de una propiedad ABREVIADA invalida la declaracion COMPLETA,
       incluido el border-style, que vuelve a `none`. Resultado: no pintaba
       nada, sin un solo error en consola. Un color mal puesto se ve; un token
       que no existe dentro de un atajo desaparece en silencio. */
    border-top: 1px solid var(--tenue);
    border-right: 1px solid var(--tenue);
    transform: rotate(45deg);
    transition: border-color var(--mov-hover), transform var(--mov-hover);
}
.quiz-op:hover::after,
.quiz-op:focus-visible::after {
    border-color: var(--vino);
    transform: rotate(45deg) translate(2px, -2px);
}
/* La punta de una fila ELEGIDA, en claro sobre el vino.

   ESTA REGLA NO SE APLICABA NUNCA. Nombraba `aria-pressed` y `data-elegida`,
   dos atributos que el codigo no escribe en ningun sitio: escribe `aria-checked`
   (casillas y radios) y `aria-selected` (la lista de estados). El resultado era
   que la punta de una fila elegida se quedaba en --tenue -- un gris pensado para
   el fondo claro -- encima del bloque vino, y con el raton encima pasaba a
   --vino sobre --vino, o sea desaparecia.

   En las otras seis pantallas eso duraba los 250 ms del avance automatico y no
   se veia. En la 3 la seleccion se queda en pantalla hasta que la persona toca
   "Continuar", y ahi si se ve: con tres marcadas, dos filas ensenaban su punta
   y la tercera -- la que tenia el raton encima -- no ensenaba ninguna. Se
   corrigen los dos selectores para que digan lo que la regla siempre quiso
   decir; el texto de la fila elegida ya iba a --sobre-vino por su propia regla,
   asi que esto solo termina de aplicar lo que el sistema ya decia. */
.quiz-op[aria-checked="true"]::after,
.quiz-op[aria-selected="true"]::after {
    border-color: var(--sobre-vino);
}

/* El texto deja sitio a la punta para que nunca la pise, ni con la opcion
   mas larga ni con la ayuda debajo. */
.quiz-op__texto,
.quiz-op__ayuda { padding-right: var(--e4); }

/* La superficie. Sale 16px por cada lado y se come su propio filete de
   arriba (el -1px), para que el vino se lea como un bloque entero. */
.quiz-op::before {
    content: "";
    position: absolute;
    inset: -1px -16px;
    border-radius: var(--radio-min);
    background: var(--vino-sw);
    opacity: 0;
    transition: opacity var(--mov-hover);
}

.quiz-op:hover::before { opacity: 1; }

.quiz-op[aria-checked="true"]::before,
.quiz-op[aria-selected="true"]::before {
    background: var(--vino);
    opacity: 1;
}

.quiz-op__texto,
.quiz-op__ayuda {
    position: relative;
    z-index: 1;
    transition: color var(--mov-hover);
}

.quiz-op__texto {
    font-size: var(--t-cuerpo);
    font-weight: var(--peso-medio);
    line-height: 1.35;
    color: var(--tinta);
    font-variant-numeric: tabular-nums;
}

.quiz-op__ayuda {
    font-size: var(--t-apoyo);
    font-weight: var(--peso-normal);
    line-height: 1.4;
    color: var(--guia);
}

.quiz-op[aria-checked="true"] .quiz-op__texto,
.quiz-op[aria-selected="true"] .quiz-op__texto { color: var(--sobre-vino); }

.quiz-op[aria-checked="true"] .quiz-op__ayuda,
.quiz-op[aria-selected="true"] .quiz-op__ayuda { color: var(--sobre-vino-2); }

/* ==========================================================================
   LA PREGUNTA 3: LA UNICA DE VARIAS OPCIONES

   Se reconoce por `role="group"` en la lista (las otras seis son radiogroup y
   la de estados es listbox). Nada de lo de arriba se toca: una fila elegida
   aqui se pinta EXACTAMENTE igual que en las otras seis, porque la
   consistencia entre pantallas pesa mas que cualquier otra cosa -- si el vino
   significara una cosa en la 2 y otra en la 3, dejaria de significar nada.

   EL PRESUPUESTO DE VINO, Y POR QUE ESTE BOTON NO LO ROMPE
   --------------------------------------------------------
   La direccion dice: "una sola superficie solida por pantalla: el boton, O la
   opcion elegida, nunca las dos". Aqui hacen falta las dos cosas -- filas
   elegidas y un boton para avanzar -- y la salida NO es rebajar las filas,
   que es lo que primero se ocurre y lo que romperia la consistencia.

   La salida es que el boton se dibuje con el OTRO trabajo del vino, el que la
   misma direccion enumera dos lineas mas abajo: "su trabajo real es de 1px y
   de 12px: filetes de cota, ANILLOS, numerales, barra de progreso, borde de
   campo activo". Un anillo de 1px de vino sobre el hueso es vino, es de la
   casa, y no es una superficie solida. El presupuesto queda intacto: en esta
   pantalla la unica mancha solida de vino la siguen gastando las filas.

   Y el ojo sigue encontrando UNA accion, que es para lo que existe la regla,
   por tres razones que se pueden verificar mirando la pantalla:

     1. UNA FILA ELEGIDA NO ES UNA ACCION, es el registro de lo que la persona
        acaba de decir. La regla protege la accion, no la mancha: aqui solo hay
        una cosa que HACE algo, y es el boton.
     2. EL BOTON ES LO UNICO CON ANILLO en toda la pantalla, y esta solo debajo
        de la tabla. No compite con las filas: llega despues de ellas, en el
        orden en que se lee y en el orden en que se decide.
     3. APAGADO NO TIENE NADA DE VINO. El vino le entra en el momento exacto en
        que la primera fila se marca. Ese cambio -- el unico movimiento de la
        pantalla que la persona no provoco tocando esa fila -- es lo que lo
        senala mejor que cualquier relleno.

   Lo que NO se hizo, y por que: pintar el boton solido y bajar las filas a
   `--vino-sw` habria respetado la letra de la regla y roto lo que la regla
   protege, porque el vino solido dejaria de querer decir "esto es lo que
   respondiste" en la unica pantalla donde hay que responder varias veces.
   ========================================================================== */

/* --- La pista -------------------------------------------------------------
   No es decoracion ni cortesia: las otras seis preguntas avanzan solas al
   primer toque, asi que nadie llega a esta esperando poder marcar mas de una.
   Sin esta linea, la funcion existe solo para quien la descubre por accidente.
   En --guia y no en --tenue porque es una instruccion que hay que leer, no una
   nota al pie. */
.quiz-p__pista {
    margin-top: var(--e2);
    font-size: var(--t-apoyo);      /* 15 */
    line-height: 1.45;
    color: var(--guia);
    max-width: var(--ancho-corta);
}

/* La pista ya abrio parte del aire que separaba el titulo de la tabla. */
.quiz-p__pista + .quiz-ops { margin-top: var(--e5); }   /* 32 en vez de 48 */

/* --- El numeral de orden --------------------------------------------------
   La PRIMERA que toca es el eje del analisis; las otras dos acompanan. Sin
   ensenar ese orden, quien marca tres no tiene forma de saber cual manda, y el
   dato que decide la lectura entera quedaria decidido a ciegas.

   Va en --sobre-vino-2 y no en oro: solo aparece sobre una fila ya elegida, o
   sea sobre vino solido, y el oro esta a 3,98:1 sobre el hueso -- a 12px, y
   ademas sobre vino, no se leeria. --sobre-vino-2 es el mismo material que ya
   usa la linea de ayuda cuando la fila esta elegida. */
.quiz-op__orden {
    position: absolute;
    right: 22px;                    /* la punta ocupa de 2 a 9: no se pisan */
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    font-size: var(--t-cota);       /* 12 */
    font-weight: var(--peso-medio);
    line-height: 1;
    color: var(--sobre-vino-2);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

/* El texto le deja sitio al numeral, solo en esta lista: en las otras seis no
   hay numeral y el texto puede llegar hasta la punta. */
.quiz-ops[role="group"] .quiz-op__texto { padding-right: 48px; }

/* --- El tope ---------------------------------------------------------------
   Con siete de siete marcadas el analisis se queda sin eje, que es justo lo que
   esta pregunta aporta. A las tres, las no elegidas se apagan y dejan de
   responder al raton; el teclado las sigue alcanzando (siguen enfocables) y es
   `06-quiz.js` quien las ignora, porque una casilla que desaparece del
   recorrido del tabulador deja a quien navega con teclado sin entender que
   paso. */
.quiz-op[aria-disabled="true"] {
    opacity: .4;
    pointer-events: none;
}

.quiz-p__tope {
    margin-top: var(--e2);
    font-size: var(--t-meta);       /* 13 */
    line-height: 1.4;
    color: var(--tenue);
}

/* --- El boton "Continuar" -------------------------------------------------
   El anillo de 1px del que habla el bloque de arriba. Mismo alto, mismo radio
   y misma letra que `.boton`, para que se lea como el mismo boton de la
   pagina: lo unico que cambia es que el vino esta en el borde y en la letra,
   no en el relleno. */
.quiz-p__seguir {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 var(--e5);
    margin-top: var(--e6);          /* 40 desde la tabla */
    background: none;
    border: 1px solid var(--vino);
    border-radius: var(--pastilla);
    color: var(--vino);
    font-size: var(--t-cuerpo);
    font-weight: var(--peso-medio);
    letter-spacing: -.004em;
    cursor: pointer;
    transition: background var(--mov-hover), border-color var(--mov-hover),
                color var(--mov-hover), transform var(--mov-hover);
}

/* El relleno del hover es el mismo lavado de vino que usan las filas al pasar
   por encima: sigue sin ser una superficie solida. */
.quiz-p__seguir:hover:not(:disabled) { background: var(--vino-sw); transform: translateY(-1px); }
.quiz-p__seguir:active:not(:disabled) { transform: translateY(0); }

/* Apagado NO lleva vino. Es lo que hace que encenderlo se note: el vino le
   entra en el mismo instante en que se marca la primera fila. */
.quiz-p__seguir:disabled {
    border-color: var(--borde-c);
    color: var(--tenue);
    background: none;
    cursor: default;
    transform: none;
}

/* Cuando el aviso del tope esta a la vista ya abrio el aire que hacia falta. */
.quiz-p__tope:not([hidden]) + .quiz-p__seguir { margin-top: var(--e4); }   /* 24 */

/* --------------------------------------------------------------------------
   LA LISTA DE ESTADOS

   Desplegable propio. El campo cerrado es la excepcion de la direccion: un
   hueco con borde de 1px. La lista abierta NO es un panel flotante -no hay
   sombra que gastar-, sino que empuja hacia abajo y el quiz corre.
   -------------------------------------------------------------------------- */

.quiz-lista {
    max-width: var(--ancho-corta);
    margin-top: var(--e7);
}

.quiz-lista__campo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e3);
    width: 100%;
    min-height: 56px;
    padding: 0 var(--e3);
    margin: 0;
    background: var(--blanco);
    border: 1px solid var(--borde-c);
    border-radius: var(--radio-ch);
    font-size: var(--t-cuerpo);
    line-height: 1.35;
    color: var(--tinta);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--mov-hover), box-shadow var(--mov-hover);
}

.quiz-lista__campo:hover { border-color: var(--borde-f); }

.quiz-lista__campo[aria-expanded="true"] {
    border-color: var(--vino);
    box-shadow: 0 0 0 1px var(--vino);
}

.quiz-lista__valor[data-vacio] { color: var(--tenue); }

/* La punta del desplegable. Dos filetes de 1px girados: es un control, no un
   icono; sin el, el campo no dice que se abre. */
.quiz-lista__campo::after {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border-right: 1px solid var(--tenue);
    border-bottom: 1px solid var(--tenue);
    transform: rotate(45deg);
    transition: transform var(--mov-hover);
}

.quiz-lista__campo[aria-expanded="true"]::after {
    margin-top: 2px;
    transform: rotate(-135deg);
}

.quiz-lista__caja {
    margin-top: var(--e1);
    /* 364 = seis filas y media. La media fila cortada es lo unico que avisa
       de que la lista sigue: con un corte limpio en la sexta parece que
       Venezuela se acaba en Falcon. */
    max-height: 364px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.quiz[data-js] .quiz-lista__caja { display: none; }
.quiz[data-js] .quiz-lista[data-abierta] .quiz-lista__caja { display: block; }

/* Dentro de la caja las filas se sangran 16 para que su texto arranque en la
   misma vertical que el del campo de arriba; sin esto el desplegable se ve
   descuadrado contra su propio disparador. Los filetes SI van de lado a lado:
   asi la caja se lee como un menu y no como siete parrafos sueltos. */
.quiz-lista__caja .quiz-op { padding-inline: var(--e3); }

/* Y el bloque de vino no puede salirse por los lados de una caja que corre, o
   aparece una barra horizontal. */
.quiz-lista__caja .quiz-op::before { inset: -1px 0; }

/* --------------------------------------------------------------------------
   LA PANTALLA DE CONTACTO
   -------------------------------------------------------------------------- */

.quiz-fin__forma {
    max-width: var(--ancho-corta);
    margin-top: var(--e7);
}

.quiz-campo + .quiz-campo { margin-top: var(--e4); }

.quiz-campo__rotulo {
    display: block;
    margin-bottom: var(--e1);
    font-size: var(--t-apoyo);
    line-height: 1.4;
    color: var(--guia);
}

/* El hueco. Unica excepcion a la regla de los filetes en toda la pagina. */
.quiz-hueco {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 0 var(--e3);
    background: var(--blanco);
    border: 1px solid var(--borde-c);
    border-radius: var(--radio-ch);
    transition: border-color var(--mov-hover), box-shadow var(--mov-hover);
}

.quiz-hueco:hover { border-color: var(--borde-f); }

.quiz-hueco:focus-within {
    border-color: var(--vino);
    box-shadow: 0 0 0 1px var(--vino);
}

.quiz-hueco[data-mal] { border-color: var(--alerta); }

/* El +58 vive dentro del mismo hueco. Sin filete que lo separe: los filetes
   verticales no existen en esta pagina. */
.quiz-hueco__prefijo {
    flex: 0 0 auto;
    margin-right: var(--e2);
    font-size: var(--t-cuerpo);
    color: var(--tinta);      /* es parte del numero, no una pista: el gris se
                                 lo queda el placeholder */
    font-variant-numeric: tabular-nums;
}

.quiz-hueco__dato {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: var(--t-cuerpo);
    line-height: 1.4;
    color: var(--tinta);
    font-variant-numeric: tabular-nums;
}
.quiz-hueco__dato::placeholder { color: var(--tenue); }
.quiz-hueco__dato:focus,
.quiz-hueco__dato:focus-visible { outline: none; }   /* el foco lo pinta el hueco */

.quiz-campo__error {
    margin-top: var(--e1);
    font-size: var(--t-meta);
    line-height: 1.4;
    color: var(--alerta);
}

/* --- La casilla ---------------------------------------------------------
   Marcada NO se pinta de vino solido: el vino solido de esta pantalla es el
   boton. Se marca con un filete de vino y el visto dibujado con dos bordes,
   que es el mismo recurso de 1px de la cota. */

.quiz-visto {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: var(--e2);
    align-items: start;
    margin-top: var(--e5);
    font-size: var(--t-apoyo);
    line-height: 1.45;
    color: var(--guia);
    cursor: pointer;
}

.quiz-visto__dato {
    grid-area: 1 / 1;
    width: 20px;
    height: 20px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.quiz-visto__caja {
    grid-area: 1 / 1;
    position: relative;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    background: var(--blanco);
    border: 1px solid var(--borde-c);
    border-radius: var(--radio-min);
    transition: border-color var(--mov-hover);
    pointer-events: none;
}

.quiz-visto__caja::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border-right: 1.5px solid var(--vino);
    border-bottom: 1.5px solid var(--vino);
    transform: rotate(45deg) scale(.6);
    opacity: 0;
    transition: opacity var(--mov-hover), transform var(--mov-hover);
}

.quiz-visto:hover .quiz-visto__caja { border-color: var(--borde-f); }

.quiz-visto__dato:checked + .quiz-visto__caja { border-color: var(--vino); }
.quiz-visto__dato:checked + .quiz-visto__caja::after { opacity: 1; transform: rotate(45deg) scale(1); }

.quiz-visto__dato:focus-visible + .quiz-visto__caja {
    outline: 2px solid var(--vino);
    outline-offset: 3px;
}

.quiz-visto__dato[data-mal] + .quiz-visto__caja { border-color: var(--alerta); }

.quiz-visto__texto { grid-area: 1 / 2; }

/* --- El susurro y el boton ---------------------------------------------- */

.quiz-fin__susurro {
    margin-top: var(--e5);
    font-size: var(--t-meta);
    line-height: 1.45;
    color: var(--tenue);
}

.quiz-fin__boton { margin-top: var(--e2); }

/* El aviso de lo que respondio el servidor (numero que no cuadra, tope por
   conexion, red caida). Va debajo del boton porque es la respuesta a haberlo
   tocado, no la etiqueta de un campo. */
.quiz-fin__aviso { margin-top: var(--e2); }

.quiz .boton:disabled {
    background: var(--vino);
    opacity: .55;
    cursor: default;
    transform: none;
}

/* ==========================================================================
   TELEFONO
   ========================================================================== */

@media (max-width: 767px) {

    .quiz__fila { min-height: 48px; }

    .quiz__lienzo {
        /* Mismo aire: --e-normal ya vale 128 en esta talla. Aqui solo se le
           suma la barra del sistema. */
        padding-bottom: calc(var(--e-fuera) + env(safe-area-inset-bottom, 0px));
    }

    .quiz-p__num { margin-bottom: var(--e3); }

    .quiz-ops,
    .quiz-lista,
    .quiz-fin__forma { margin-top: var(--e5); }        /* 32 */

    .quiz-p__pista + .quiz-ops { margin-top: var(--e4); }   /* 24 */

    /* Mismo trato que `.boton` en telefono: alto de pulgar y ancho completo.
       Que no sea solido no lo hace mas pequeno. */
    .quiz-p__seguir {
        width: 100%;
        min-height: 56px;
        margin-top: var(--e5);                          /* 32 */
    }

    /* Con la columna a 350 y --pad-lat en 20, un bloque que sobresalga 16
       dejaria 4px hasta el borde de la pantalla: se lee como un desborde. */
    .quiz-op::before { inset: -1px -12px; }

    .quiz-lista__caja { max-height: 60vh; }

    .quiz-fin__boton { margin-top: var(--e3); }
}

/* ==========================================================================
   PANTALLAS GRANDES

   Todo lo de arriba esta pensado para el telefono, que es de donde llega el
   trafico de los anuncios. Aqui solo se corrigen las dos cosas que en una
   ventana ancha dejan de funcionar: la lista se ve como una tira estrecha, y
   la columna entera queda demasiado a la izquierda del centro optico.
   ========================================================================== */

@media (min-width: 900px) {

    /* La columna se ajusta al ancho de su CONTENIDO, no al reves. Con la
       columna a 680 y la lista a 480 alineada a la izquierda, el centro
       optico del bloque caia 80px a la izquierda del centro de la pantalla:
       medido, 640 contra 720. El ojo lo lee como una pagina descuadrada, no
       como una composicion. Igualando los dos anchos, todo el bloque queda
       centrado de verdad. */
    .quiz__fila,
    .quiz__lienzo {
        max-width: 520px;      /* 480 de contenido + 20 de aire a cada lado */
    }

    .quiz-ops {
        max-width: 480px;      /* sigue siendo mas corta que la pregunta */
    }

    /* La pregunta puede respirar en dos lineas comodas en vez de tres justas. */
    .quiz-p__titulo { max-width: 14ch; }
}

/* ===== foto ===== */
/* ==========================================================================
   07 - LA FOTO
   ==========================================================================
   Tres pantallas en una hoja. Se turnan con `data-estado` en la seccion, no
   con clases sueltas, para que forzar una desde el hash sea escribir un
   atributo y nada mas.

   POR QUE ESTA HOJA NO USA EL RITMO DE 184 NI DE 200
   --------------------------------------------------
   Aquellos son el aire ENTRE secciones de una landing que se recorre. Esto es
   un paso de un formulario: la persona tiene que ver el titulo, la guia, la
   casilla y el boton sin pelear con la pagina. En telefono el aire de arriba
   baja a 40 y el de abajo a 64, que siguen siendo peldanos del sistema. En
   escritorio se queda en el piso de 120, porque ahi sobra alto.

   EL PRESUPUESTO DE VINO, CONTADO
   -------------------------------
   Guia:     el ovalo (1px de trazo), 4 marcas de 12px, 3 rayas de 12px, el
             filete de la casilla y UNA superficie solida: el boton.
   Camara:   el ovalo con sus 4 marcas y UNA superficie solida: el obturador
             de 72px. La casilla ya quedo atras y "Cancelar" es texto.
   Revision: la raya del veredicto y UNA superficie solida: el boton.

   Por eso la casilla marcada no se rellena: se marca con el filete en vino y
   una palomita de dos trazos de 1px. Un cuadrito solido de vino junto al
   boton serian dos superficies en la misma pantalla.
   ========================================================================== */

/* El aire vive en la rejilla y no en la seccion: el filete de arriba tiene
   que quedar al ras de la costura, como en 01 y en 04. */
.foto { padding: 0; }

/* Los tres estados. `display` lo manda el atributo de la seccion; el estado
   inicial del marcado es la guia, asi que sin JavaScript la pantalla sigue
   siendo legible y completa. */
.foto-vista { display: none; }
.foto[data-estado="guia"]     [data-vista="guia"]     { display: block; }
.foto[data-estado="revision"] [data-vista="revision"] { display: block; }
.foto[data-estado="camara"]   [data-vista="camara"]   { display: flex; }

/* El atributo `hidden` tiene que ganarle a los display de aqui abajo: hay
   elementos (el aviso de camara, el enlace a la camara en un escritorio sin
   camara) que se retiran asi. */
.foto [hidden] { display: none !important; }

/* Mientras la capa de la camara esta abierta, la pagina de abajo no se
   mueve. */
.foto-abierta { overflow: hidden; }

/* --------------------------------------------------------------------------
   LA REJILLA — el mismo reparto de la seccion 04
   --------------------------------------------------------------------------
   380 (la figura) + 64 (aire) + 516 (la hoja). Las dos columnas arrancan a la
   misma altura: el filete que abre la tabla de instrucciones nace en la misma
   linea que el "Paso 8 de 9". */

.foto-rejilla {
    padding-block: var(--e-fuera);
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    column-gap: var(--e9);
    align-items: start;
}

.foto-paso {
    font-variant-numeric: tabular-nums;
}

.foto-titulo {
    margin-top: var(--e2);
}

/* Sin anillo al recibir el foco por programa: el titulo se enfoca al cambiar
   de pantalla para que un lector de pantalla anuncie donde esta, y ahi el
   anillo seria ruido. Al llegar con el teclado si aparece. */
.foto-titulo:focus:not(:focus-visible) { outline: none; }

/* --------------------------------------------------------------------------
   EL ENCUADRE — un ovalo dibujado, no una foto
   --------------------------------------------------------------------------
   3:4, que es la proporcion de un retrato. Cuatro marcas de 12px en los ejes:
   son las que lo convierten de adorno en instrumento, y son la misma unidad
   de 12px que abre las clausulas de la seccion 04.

   Las marcas horizontales cuelgan de .foto-marco y las verticales del ovalo,
   asi el componente no necesita ni un elemento mas de marcado. Las primeras
   llevan z-index para quedar por encima del velo de la camara, que es una
   sombra del ovalo y en orden de arbol se pintaria despues. */

.foto-marco {
    position: relative;
    width: 260px;
    aspect-ratio: 3 / 4;
    margin-top: var(--e7);
}

.foto-marco__ovalo {
    position: absolute;
    inset: 0;
    z-index: 1;
    border: 1px solid var(--vino);
    border-radius: 50%;
}

.foto-marco::before,
.foto-marco::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: calc(50% - .5px);
    width: 12px;
    height: 1px;
    background: var(--vino);
}
.foto-marco::before { left: -6px; }
.foto-marco::after  { right: -6px; }

.foto-marco__ovalo::before,
.foto-marco__ovalo::after {
    content: "";
    position: absolute;
    left: calc(50% - .5px);
    width: 1px;
    height: 12px;
    background: var(--vino);
}
.foto-marco__ovalo::before { top: -6px; }
.foto-marco__ovalo::after  { bottom: -6px; }

/* El pie de foto de revista, el mismo recurso de la portada: raya em, 13px,
   y un dato que quita una objecion en vez de repetir la instruccion. */
.foto-pie { margin-top: var(--e3); }

/* --------------------------------------------------------------------------
   LAS TRES INSTRUCCIONES — la tabla de la seccion 04, sin inventar nada
   -------------------------------------------------------------------------- */

.foto-guia {
    border-top: 1px solid var(--borde);
    border-bottom: 1px solid var(--borde);
}

.foto-fila {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: var(--e1) 0 var(--e1) 28px;
    font-size: var(--t-cuerpo);
    line-height: 27px;
    color: var(--tinta);
}

.foto-fila + .foto-fila { border-top: 1px solid var(--linea); }

/* 12 de raya + 16 de aire = los 28 de sangria. Sube 1px sobre el centro
   geometrico porque el centro optico de una linea de Inter esta en la altura
   de la x. */
.foto-fila::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(50% - 1px);
    width: 12px;
    height: 1px;
    background: var(--vino);
}

/* --------------------------------------------------------------------------
   AVISOS — el de la camara y el de la casilla
   --------------------------------------------------------------------------
   Ni rojo ni pastilla: la misma raya de vino y la misma voz que las clausulas.
   Una pantalla que se pinta de rojo cuando algo falla deja de parecer un
   expediente y pasa a parecer un formulario. Lo que informa es el texto. */

.foto-alerta,
.foto-nota {
    position: relative;
    margin-top: var(--e4);
    padding-left: 28px;
    font-size: var(--t-apoyo);
    line-height: 1.5;
    color: var(--tinta);
    max-width: 46ch;
}

.foto-alerta::before,
.foto-nota::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 12px;
    height: 1px;
    background: var(--vino);
}

/* --------------------------------------------------------------------------
   LA CASILLA
   -------------------------------------------------------------------------- */

.foto-casilla {
    position: relative;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    column-gap: var(--e3);
    align-items: start;
    margin-top: var(--e5);
    padding-block: 6px;   /* 20 + 12 + el aire de la linea = area tactil de 44 */
    cursor: pointer;
    max-width: 46ch;
}

/* La caja real se queda encima de su dibujo, invisible pero enfocable: asi el
   foco, el estado y el arrastre siguen siendo los del navegador. */
.foto-casilla__caja {
    position: absolute;
    left: 0;
    top: 9px;
    width: 20px;
    height: 20px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.foto-casilla__marca {
    position: relative;
    width: 20px;
    height: 20px;
    margin-top: 3px;   /* alinea el cuadro con la altura de la x del texto */
    border: 1px solid var(--borde-c);
    border-radius: var(--radio-min);
    background: var(--blanco);
    transition: border-color var(--mov-hover);
}

.foto-casilla:hover .foto-casilla__marca { border-color: var(--borde-f); }

.foto-casilla__caja:checked + .foto-casilla__marca { border-color: var(--vino); }

/* La palomita: dos trazos de 1px girados 45 grados. Ni icono ni relleno. */
.foto-casilla__caja:checked + .foto-casilla__marca::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border-right: 1px solid var(--vino);
    border-bottom: 1px solid var(--vino);
    transform: rotate(45deg);
}

.foto-casilla__caja:focus-visible + .foto-casilla__marca {
    outline: 2px solid var(--vino);
    outline-offset: 3px;
}

.foto-casilla__texto {
    font-size: var(--t-apoyo);
    line-height: 1.5;
    color: var(--guia);
}

/* --------------------------------------------------------------------------
   LAS ACCIONES — un boton y un enlace, nunca dos botones
   -------------------------------------------------------------------------- */

.foto-acciones {
    margin-top: var(--e6);
    display: flex;
    align-items: center;
    gap: var(--e5);
}

.foto-enlace {
    appearance: none;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    font-size: var(--t-cuerpo);
    letter-spacing: var(--ls-cuerpo);
    color: var(--tinta);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--borde-c);
    text-underline-offset: 5px;
    cursor: pointer;
    transition: text-decoration-color var(--mov-hover);
}

.foto-enlace:hover { text-decoration-color: var(--vino); }

/* --------------------------------------------------------------------------
   2 · LA CAMARA
   --------------------------------------------------------------------------
   Una hoja de hueso con un hueco, no un visor negro. El velo es una sombra de
   100vmax del propio ovalo: recorta el video sin mascaras ni SVG, y deja la
   pantalla en el mismo material que el resto de la pagina.

   El video va espejado para que la persona se vea como en un espejo. La foto
   que se envia NO se espeja: eso lo resuelve el lienzo, en el JavaScript. */

.foto-camara {
    position: fixed;
    inset: 0;
    z-index: 40;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px var(--e6);
    padding-bottom: calc(var(--e6) + env(safe-area-inset-bottom, 0px));
    background: var(--fondo);
}

.foto-camara__video,
.foto-camara__suplente {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.foto-camara__video { transform: scaleX(-1); }

/* El suplente solo existe cuando el estado viene forzado para fotografiar la
   pantalla. En produccion este elemento no tiene ni src. */
.foto-camara__suplente { display: none; }
.foto[data-demo] .foto-camara__suplente { display: block; }

.foto-camara .foto-marco {
    z-index: 1;
    width: min(78vw, 320px);
    margin: 0;
    flex: none;
}

.foto-camara .foto-marco__ovalo {
    background: none;
    box-shadow: 0 0 0 100vmax rgba(251, 247, 245, .95);
}

/* La barra de arriba corre de lado a lado para que "Cancelar" caiga en la
   esquina, que es donde se busca. La de abajo se estrecha para que la
   instruccion se lea en dos lineas cortas y no en una linea de 90 caracteres
   cruzando una pantalla de escritorio. */
.foto-camara__barra {
    position: relative;
    z-index: 3;
    width: 100%;
    display: flex;
}

.foto-camara__barra--baja {
    max-width: 420px;
    flex-direction: column;
    align-items: center;
    gap: var(--e4);
}

.foto-camara__pauta {
    font-size: var(--t-cuerpo);
    line-height: 1.4;
    color: var(--tinta);
    text-align: center;
    max-width: 28ch;
}

/* El obturador. Es la unica superficie solida de esta pantalla y por eso el
   "Cancelar" de arriba es texto. Lleva la palabra dentro porque un circulo
   mudo no se puede rotular sin agregar una linea mas de interfaz. */
.foto-disparo {
    width: 72px;
    height: 72px;
    border: 0;
    border-radius: 50%;
    background: var(--vino);
    color: var(--sobre-vino);
    font-size: var(--t-meta);
    font-weight: var(--peso-medio);
    letter-spacing: -.004em;
    cursor: pointer;
    transition: background var(--mov-hover), transform var(--mov-hover);
}

.foto-disparo:hover { background: var(--vino-os); }
.foto-disparo:active { transform: scale(.96); }

/* --------------------------------------------------------------------------
   3 · LA REVISION
   --------------------------------------------------------------------------
   La foto sin contenedor, sin borde, sin radio y sin sombra: se disuelve por
   los cuatro lados hacia el hueso, igual que el retrato de la portada. En las
   esquinas se cruzan dos degradados opacos, asi que el pixel de esquina vale
   exactamente el hueso y la foto no tiene canto. */

/* 340 y no los 380 de la columna: con el retrato vertical de un telefono, a
   380 la pantalla pasaba de 900px y el pliegue de escritorio se partia en dos.
   Aqui la foto es el objeto del juicio, no un adorno, asi que entra entera. */
.foto-tomada {
    position: relative;
    margin: var(--e7) 0 0;
    max-width: 340px;
    overflow: hidden;
    background: var(--fondo);
}

/* Sin recorte y sin proporcion impuesta: la persona tiene que ver EXACTAMENTE
   el encuadre que va a enviar. Un `object-fit: cover` aqui le escondería que
   se quedo sin menton. */
.foto-tomada img {
    width: 100%;
    height: auto;
}

/* Los degradados son mas cortos que los de la portada (8% contra 18%) y no es
   por gusto: alli disuelven una foto de decoracion, aqui tapan el borde de la
   foto que la persona esta JUZGANDO. Si se comen 50px por lado, deja de ver si
   se quedo sin oreja. Lo justo para que no haya canto, ni un pixel mas. */
.foto-tomada::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(to top,
            var(--fondo) 0%, var(--fondo) 1.5%,
            rgba(251, 247, 245, .55) 4%,
            rgba(251, 247, 245, 0) 9%),
        linear-gradient(to bottom,
            var(--fondo) 0%, var(--fondo) 1.5%,
            rgba(251, 247, 245, 0) 8%),
        linear-gradient(to right,
            var(--fondo) 0%, var(--fondo) 1%,
            rgba(251, 247, 245, 0) 8%),
        linear-gradient(to left,
            var(--fondo) 0%, var(--fondo) 1%,
            rgba(251, 247, 245, 0) 8%);
}

/* El veredicto. Una fila de tabla como las demas: filete arriba, filete
   abajo, raya de vino y dos lineas. Lo que dice el servidor cabe en la misma
   forma que lo que dice la maqueta. */
.foto-veredicto { display: none; }

.foto[data-veredicto="pasa"]     .foto-veredicto[data-caso="pasa"],
.foto[data-veredicto="oscura"]   .foto-veredicto[data-caso="oscura"],
.foto[data-veredicto="movida"]   .foto-veredicto[data-caso="movida"],
.foto[data-veredicto="servidor"] .foto-veredicto[data-caso="servidor"],
.foto:not([data-veredicto])      .foto-veredicto[data-caso="pasa"] {
    display: block;
    position: relative;
    padding: var(--e4) 0 var(--e4) 28px;
    border-top: 1px solid var(--borde);
    border-bottom: 1px solid var(--borde);
}

.foto-veredicto::before {
    content: "";
    position: absolute;
    left: 0;
    top: 35px;   /* 24 de relleno + la mitad de la primera linea de 23px */
    width: 12px;
    height: 1px;
    background: var(--vino);
}

.foto-veredicto__que,
.foto-veredicto__hacer {
    display: block;
    font-size: var(--t-cuerpo);
    line-height: 1.35;
}

.foto-veredicto__que   { color: var(--tinta); }
.foto-veredicto__hacer { color: var(--guia); margin-top: 4px; }

/* Dos juegos de salidas. Cuando la foto no pasa el control de calidad,
   "Usar esta foto" no aparece: el servidor no la va a aceptar y ofrecerla
   seria mentir. */
.foto-acciones--pasa,
.foto-acciones--repetir { display: none; }

.foto[data-veredicto="pasa"] .foto-acciones--pasa,
.foto:not([data-veredicto]) .foto-acciones--pasa,
.foto[data-veredicto="oscura"] .foto-acciones--repetir,
.foto[data-veredicto="movida"] .foto-acciones--repetir,
.foto[data-veredicto="servidor"] .foto-acciones--repetir { display: flex; }

/* ==========================================================================
   TABLETA — la rejilla se parte antes que la escala tipografica
   ==========================================================================
   A 768 la columna real son 528px y no caben 380 + 64 + una tabla legible.
   Es el mismo quiebre que usa la seccion 04, y no contradice la regla de un
   solo quiebre: aquella habla de la escala, que aqui no cambia. */

@media (max-width: 1023px) {
    .foto-rejilla { grid-template-columns: minmax(0, 1fr); }
    .foto-hoja { margin-top: var(--e7); }
    .foto-marco { margin-inline: auto; }
    .foto-pie { text-align: center; margin-inline: auto; }
    .foto-tomada { margin-inline: auto; }
}

/* ==========================================================================
   TELEFONO
   ==========================================================================
   Aqui manda una sola pregunta: donde cae el boton. Con el ovalo a 168px, el
   aire de arriba a 40 y el de abajo a 64, la accion queda al alcance de un
   golpe de pulgar sin robarle sitio a la guia, que es lo que de verdad evita
   que la foto salga mal.

   El cuerpo NO encoge: las tres instrucciones siguen en 17px. Lo que cede es
   el aire, nunca la letra. */

@media (max-width: 767px) {

    /* Todo lo de aqui abajo persigue UN numero: que el boton entre en el
       primer pliegue de 844px. Se recortaron 150px de aire y ni una palabra ni
       un peldano de letra: la guia es lo que evita que la foto salga mal, y no
       se toca. */
    .foto-rejilla { padding-block: var(--e5) var(--e7); }   /* 32 / 48 */

    .foto-marco { width: 132px; margin-top: var(--e4); }

    .foto-pie { margin-top: var(--e1); }

    .foto-hoja { margin-top: var(--e5); }

    .foto-casilla { margin-top: var(--e4); }

    /* Cada instruccion cae en dos lineas a 350px de columna: la fila crece
       sola porque manda min-height, no height. */
    .foto-fila { padding-block: var(--e1); }

    .foto-acciones {
        margin-top: var(--e4);
        flex-direction: column;
        align-items: stretch;
        gap: var(--e1);
    }

    .foto-enlace { justify-content: center; }

    .foto-tomada { margin-top: var(--e6); max-width: 300px; }

    .foto-camara { padding-bottom: calc(var(--e5) + env(safe-area-inset-bottom, 0px)); }
    .foto-camara__barra--baja { gap: var(--e4); }
}

/* ===== resultado ===== */
/* ==========================================================================
   08 — RESULTADO · la espera y el análisis

   Son dos pantallas de un mismo documento, así que comparten una sola columna
   de 560px (--ancho-tex) centrada dentro del sobre de la retícula. No es la
   maqueta de la landing: aquí no hay dos columnas ni rejilla, hay un
   expediente que se lee de arriba abajo y que la persona va a guardar en su
   teléfono y a reenviar por WhatsApp.

   CUATRO DECISIONES QUE SOSTIENEN LA PIEZA
   --------------------------------------------------------------------------
   1. EN "ANALIZANDO" EL FILETE QUE SEPARA CADA FILA **ES** SU BARRA DE
      PROGRESO. Se tiñe de vino de izquierda a derecha con un scaleX. Poner una
      barra aparte obligaría a dibujar DOS líneas de un pelo a 8px de distancia:
      ruido. Y una barra a rayas o una rueda girando son el recurso que abarata
      una espera. Cero cuentas atrás: un contador que se pasa del número
      prometido se ve peor que no tener contador.

   2. LA FOTO MARCADA VA A SANGRE DEL ANCHO DEL CONTENIDO y se disuelve por los
      cuatro lados hacia el hueso, sin contenedor, sin borde, sin radio y sin
      sombra: la única sombra de la página vive en la sección 02. Las cotas
      llevan SOLO el numeral, y ese numeral es el mismo con el que empieza su
      fila en la tabla de abajo. La foto y la tabla son la misma medición vista
      dos veces.

   3. UNA SOLA SUPERFICIE DE VINO SÓLIDA POR PANTALLA: el botón de WhatsApp.
      Todo el otro vino de la pieza es trabajo de 1px y de 12px —filetes de
      cota, anillos, numerales de medición, barra de progreso—, que es
      exactamente lo que la dirección le reserva.

   4. EL ORO SOLO EN LOS NUMERALES DE LOS TRES HÁBITOS, a 21px, que es su piso
      de legibilidad (3,98:1 sobre el hueso). Ni un filete de oro: el único de
      la página está en la sección 02.
   ========================================================================== */

/* Sin JavaScript quedan las tres pantallas apiladas y separadas por filete:
   la pieza se lee entera igual. El JavaScript solo esconde. */
.res-pantalla[hidden] { display: none !important; }

/* El corte entre pantallas apiladas solo existe en el modo de hoja completa. */
.res-corte { display: none; }
.res[data-pantalla="todas"] .res-corte { display: block; }

.res-col {
    max-width: var(--ancho-tex);   /* 560 */
    margin-inline: auto;
}

/* El bloque de la foto y el de la abstención ocupan el mismo sitio; el
   servidor cambia un atributo y no una plantilla. */
.res-analisis[data-lectura="foto"]     [data-solo="abstiene"],
.res-analisis[data-lectura="abstiene"] [data-solo="foto"] { display: none; }

/* ==========================================================================
   ANALIZANDO
   ========================================================================== */

/* La pantalla más corta de todo el quiz. Se centra en el alto disponible para
   que no quede el contenido colgando del techo con medio pliegue vacío
   debajo; 72vh y no 100vh porque encima vive la mancheta. */
.ana {
    display: grid;
    align-content: center;
    min-height: 72vh;
    padding-block: var(--e-fuera);
}

.ana-titulo { margin-bottom: var(--e8); }   /* 56 */

.ana-lista {
    border-top: 1px solid var(--borde);
}

/* 56px clavados: 16 + 23 + 16 = 55 y el min-height sube el pixel que falta.
   El mismo paso que la tabla de la sección 01, a propósito. */
.ana-fila {
    position: relative;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    column-gap: var(--e2);
    align-items: baseline;
    min-height: 56px;
    padding-block: var(--e3);
    border-bottom: 1px solid var(--linea);
}

.ana-fila:last-child { border-bottom-color: var(--borde); }

.ana-num {
    font-size: var(--t-cota);
    font-weight: var(--peso-medio);
    line-height: 1;
    color: var(--tenue);
    font-variant-numeric: tabular-nums;
    transition: color var(--mov);
}

.ana-texto {
    font-size: var(--t-cuerpo);
    line-height: 1.35;
    color: var(--tenue);
    transition: color var(--mov);
}

/* La fila que ya se marcó pasa a tinta y a medio: es todo lo que hace falta
   para que se lea "hecha". Nada de palomitas ni de pastillas de color. */
.ana-fila.es-lista .ana-num   { color: var(--vino); }
.ana-fila.es-lista .ana-texto { color: var(--tinta); font-weight: var(--peso-medio); }
.ana-fila.es-activa .ana-texto { color: var(--tinta); }

/* El riel se monta EXACTAMENTE encima del filete de la fila (bottom: -1px,
   que es el borde) y lo sustituye a medida que avanza. */
.ana-riel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    overflow: hidden;
}

.ana-avance {
    display: block;
    height: 1px;
    background: var(--vino);
    transform: scaleX(0);
    transform-origin: left center;
}

.ana-nota {
    margin-top: var(--e4);
    font-size: var(--t-meta);
    line-height: 1.45;
    color: var(--tenue);
}

/* ==========================================================================
   RESULTADO
   ========================================================================== */

.res-analisis { padding-block: var(--e8) 0; }   /* 56 arriba; abajo lo pone el cierre */

.res-titulo { text-wrap: pretty; }

/* La fila de perfil: cinco datos separados por punto medio. Es la ficha de
   cabecera del expediente, no una hilera de pastillas. */
.res-perfil {
    margin-top: var(--e3);
    font-size: var(--t-meta);
    line-height: 1.5;
    color: var(--tenue);
    font-variant-numeric: tabular-nums;
}

/* .45em a cada lado: un poco más que un espacio de palabra, que es lo que
   pide un punto medio para leerse como separador y no como puntuación. */
.res-pto { margin-inline: .45em; }

/* --- La foto marcada ------------------------------------------------------
   A sangre de la columna. Sin caja: se disuelve por los cuatro lados con
   degradados apilados, igual que el retrato de la portada. En las esquinas se
   cruzan dos degradados opacos, así que el píxel de esquina vale exactamente
   el hueso y la foto no tiene canto. */

.res-figura { margin: var(--e6) 0 0; }

.res-foto {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--fondo);
}

/* EL ENCUADRE SE DECLARA COMO UN RECTÁNGULO DEL ORIGINAL, no con
   object-position, y la razón es aritmética: retrato.jpg es 1200x1600 (3:4) y
   la caja es 4:5, así que `object-fit: cover` solo tiene 100px de holgura
   vertical para jugar. Con object-position la cara sale pequeña y sobra pared.
   Aquí se recorta a mano el rectángulo x 112..1088, y 170..1390 del original
   —976 x 1220, que es 4:5 exacto— y la cara pasa a ocupar dos tercios del alto.

   De ese rectángulo salen los tres números de abajo y también las anclas de
   las cotas. Si se cambia la foto, se recalculan los cuatro juntos:
       ancho  = 1200 / 976            = 122,951%
       izq    = -112 / 976            = -11,475%
       arriba = -170 / 976 / 1,25     = -13,934%   (el % de `top` es del ALTO) */
.res-foto img {
    position: absolute;
    left: -11.475%;
    top: -13.934%;
    width: 122.951%;
    height: auto;
    max-width: none;   /* el max-width:100% de la reposición anularía el ancho */
}

.res-foto::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(to top,
            var(--fondo) 0%, var(--fondo) 1.5%,
            rgba(251, 247, 245, .60) 4%,
            rgba(251, 247, 245, 0) 11%),
        linear-gradient(to bottom,
            var(--fondo) 0%, var(--fondo) 1.5%,
            rgba(251, 247, 245, 0) 10%),
        linear-gradient(to right,
            var(--fondo) 0%, var(--fondo) 1%,
            rgba(251, 247, 245, 0) 7%),
        linear-gradient(to left,
            var(--fondo) 0%, var(--fondo) 1%,
            rgba(251, 247, 245, 0) 7%);
}

/* --- Las cotas ------------------------------------------------------------
   Cada cota es una fila de ancho completo colocada a una altura; el anillo se
   corre con un margen EN PORCENTAJE y el filete mide un PORCENTAJE del ancho
   de la foto. Así la anotación es fluida: los tres numerales caen en el mismo
   riel (82%) lo mismo a 560px que a 350px, sin una sola media consulta. */

.res-cotas {
    position: absolute;
    inset: 0;
    z-index: 2;   /* por encima de los degradados */
    /* El riel donde terminan los tres filetes. Se declara una sola vez y cada
       cota calcula su propio largo restándole su ancla: así mover el riel es
       mover un número, y en teléfono se recoge sin retocar tres reglas. */
    --riel: 85%;
}

.res-cota {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--y);
    display: flex;
    align-items: center;
    transform: translateY(-50%);
    font-size: var(--t-cota);
    line-height: 1;
    white-space: nowrap;
}

.res-cota__anillo {
    flex: none;
    width: 5px;
    height: 5px;
    margin-left: calc(var(--x) - 3px);
    border: 1px solid var(--vino);
    border-radius: 50%;
    animation: res-aparece .3s linear .5s both;
}

.res-cota__linea {
    flex: 0 0 calc(var(--riel) - var(--x));
    height: 1px;
    margin: 0 8px;
    background: var(--vino);
    transform-origin: left center;
}

.res-cota__n {
    flex: none;
    font-weight: var(--peso-medio);
    letter-spacing: -.004em;
    color: var(--vino);
    font-variant-numeric: tabular-nums;
    animation: res-aparece .3s linear .75s both;
}

/* Anclas leídas sobre retrato.jpg (1200x1600) y traducidas al rectángulo del
   encuadre de arriba —x 112..1088, y 170..1390— con
       x% = (sx - 112) / 976        y% = (sy - 170) / 1220
       01 pómulo            (768,  862)  ->  67,2% / 56,7%
       02 ala de la nariz   (658,  935)  ->  55,9% / 62,7%
       03 mejilla baja      (772, 1095)  ->  67,6% / 75,8%
   Los tres terminan en el riel, que cae sobre la pared del fondo: un filete de
   vino sobre el pelo no se vería, y el numeral encima del pelo, menos. */
.res-cota--1 { --y: 56.7%; --x: 67.2%; }
.res-cota--2 { --y: 62.7%; --x: 55.9%; }
.res-cota--3 { --y: 75.8%; --x: 67.6%; }

/* La traza solo corre cuando la pantalla se muestra de verdad; en reposo la
   cota ya está dibujada, para que sin JavaScript no falte nada. */
.res-pantalla.es-visible .res-cota__linea {
    animation: res-traza .6s cubic-bezier(.7, 0, 0, 1) both;
}
.res-pantalla.es-visible .res-cota--2 .res-cota__linea { animation-delay: .09s; }
.res-pantalla.es-visible .res-cota--3 .res-cota__linea { animation-delay: .18s; }

@keyframes res-traza {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@keyframes res-aparece {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .res-cota__linea,
    .res-cota__anillo,
    .res-cota__n { animation: none; opacity: 1; transform: none; }
}

.res-pie { margin-top: var(--e3); }

/* --- La tabla de dimensiones ----------------------------------------------
   Mismo paso de 56px y misma jerarquía de filetes que la tabla de la sección
   01: --borde abre y cierra, --linea separa por dentro. */

.res-medicion {
    margin-top: var(--e6);
    border-top: 1px solid var(--borde);
    border-bottom: 1px solid var(--borde);
}

.res-med {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) max-content;
    column-gap: var(--e2);
    align-items: baseline;
    min-height: 56px;
    padding-block: var(--e3);
    font-variant-numeric: tabular-nums;
}

.res-med + .res-med { border-top: 1px solid var(--linea); }

.res-med__n {
    font-size: var(--t-cota);
    font-weight: var(--peso-medio);
    color: var(--vino);
}

.res-med__dim {
    font-size: var(--t-cuerpo);
    line-height: 1.35;
    color: var(--tinta);
}

.res-med__niv {
    justify-self: end;
    font-size: var(--t-cuerpo);
    font-weight: var(--peso-medio);
    line-height: 1.35;
    color: var(--tinta);
}

/* La zona es dato de apoyo: pesa menos que el nivel y en teléfono se retira,
   que es donde la fila se queda sin ancho. */
.res-med__zona {
    font-size: var(--t-apoyo);
    font-weight: var(--peso-normal);
    color: var(--tenue);
}

/* --- Cuando el análisis se abstiene ---------------------------------------
   Ocupa el mismo hueco que la foto y la tabla. Se abre con la misma raya de
   vino de 12px que las cláusulas de la sección 04: es la marca de "esto lo
   dice el sistema", y cuesta 12 píxeles de vino. */

.res-nota {
    position: relative;
    margin-top: var(--e6);
    padding: var(--e4) 0 0 28px;
    border-top: 1px solid var(--borde);
    border-bottom: 1px solid var(--borde);
    padding-bottom: var(--e4);
}

.res-nota::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(var(--e4) + 13px);
    width: 12px;
    height: 1px;
    background: var(--vino);
}

.res-nota__frase {
    font-size: var(--t-cuerpo);
    line-height: 27px;
    color: var(--tinta);
    text-wrap: pretty;
}

.res-nota__pie {
    margin-top: var(--e2);
    font-size: var(--t-meta);
    line-height: 1.45;
    color: var(--tenue);
}

/* --- Los bloques de texto ------------------------------------------------- */

.res-h { margin-top: var(--e9); }   /* 64 */

.res-parrafo {
    margin-top: var(--e4);
    font-size: var(--t-cuerpo);
    line-height: 27px;   /* 17/27, medido, no heredado */
    color: var(--guia);
    text-wrap: pretty;
}

.res-firma {
    margin-top: var(--e4);
    font-size: var(--t-meta);
    line-height: 1.45;
    color: var(--tenue);
}

/* --- Los tres hábitos -----------------------------------------------------
   El numeral es el ÚNICO oro de la pantalla y va a 21px, su piso. La fila
   sigue el paso de 56px: 14 + 27 + 14 = 55 y el min-height sube el pixel. */

.res-habitos {
    margin-top: var(--e4);
    border-top: 1px solid var(--borde);
    border-bottom: 1px solid var(--borde);
}

.res-habito {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: var(--e4);
    align-items: baseline;
    min-height: 56px;
    padding-block: 14px;
}

.res-habito + .res-habito { border-top: 1px solid var(--linea); }

.res-habito__n {
    font-family: var(--serif);
    font-weight: var(--peso-normal);
    font-size: var(--t-bajada);   /* 21: el oro no baja de aquí */
    line-height: 1;
    color: var(--oro);
    font-variant-numeric: tabular-nums;
}

.res-habito__t {
    font-size: var(--t-cuerpo);
    line-height: 27px;
    color: var(--tinta);
    font-variant-numeric: tabular-nums;
    text-wrap: pretty;
}

/* --- Las dos rutinas (informe v2) -----------------------------------------
   MISMA REJILLA Y MISMOS FILETES QUE LA TABLA DE MEDICIÓN, y no por comodidad:
   la medición y la rutina son las dos mitades del mismo expediente —esto es lo
   que se ve, esto es lo que se hace—, así que se leen con el mismo paso, el
   mismo numeral de 26px y la misma jerarquía de filetes. Que la segunda mitad
   estrenara una retícula propia rompería el documento a la mitad.

   TRES NIVELES POR FILA, resueltos con color y peso y no con más tamaños:
   el ingrediente en tinta (es el título de la fila, como la dimensión en la
   tabla), el gesto en gris de instrucción y la nota en meta. Ni un icono, ni
   una pastilla, ni una flecha entre pasos: el numeral ya dice el orden. */

.res-rutina {
    margin-top: var(--e4);
    border-top: 1px solid var(--borde);
    border-bottom: 1px solid var(--borde);
}

.res-paso {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    column-gap: var(--e2);
    align-items: baseline;
    padding-block: var(--e3);
    font-variant-numeric: tabular-nums;
}

.res-paso + .res-paso { border-top: 1px solid var(--linea); }

.res-paso__n {
    font-size: var(--t-cota);
    font-weight: var(--peso-medio);
    line-height: 1;
    color: var(--vino);
}

.res-paso__ing {
    display: block;
    font-size: var(--t-cuerpo);
    font-weight: var(--peso-medio);
    line-height: 1.35;
    color: var(--tinta);
}

.res-paso__que {
    display: block;
    margin-top: var(--e1);
    font-size: var(--t-cuerpo);
    line-height: 27px;
    color: var(--guia);
    text-wrap: pretty;
}

.res-paso__nota {
    display: block;
    margin-top: var(--e1);
    font-size: var(--t-meta);
    line-height: 1.45;
    color: var(--tenue);
    text-wrap: pretty;
}

/* --- Las precauciones -----------------------------------------------------
   Se abren con la misma raya de vino de 12px que las cláusulas de la sección
   04 de la landing, y por el mismo motivo: es la marca de "esto lo dice la
   clínica, no el modelo". Cuatro rayas de 12px son 48 píxeles de vino, dentro
   del presupuesto de 1px y 12px que la dirección le reserva. */

.res-cuidados {
    margin-top: var(--e4);
    border-top: 1px solid var(--borde);
    border-bottom: 1px solid var(--borde);
}

.res-cuidado {
    position: relative;
    display: block;
    padding: var(--e3) 0 var(--e3) 28px;
}

.res-cuidado + .res-cuidado { border-top: 1px solid var(--linea); }

.res-cuidado::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(var(--e3) + 11px);
    width: 12px;
    height: 1px;
    background: var(--vino);
}

.res-cuidado__t {
    display: block;
    font-size: var(--t-cuerpo);
    font-weight: var(--peso-medio);
    line-height: 1.35;
    color: var(--tinta);
}

.res-cuidado__d {
    display: block;
    margin-top: var(--e1);
    font-size: var(--t-cuerpo);
    line-height: 27px;
    color: var(--guia);
    text-wrap: pretty;
}

/* --- La lámina ------------------------------------------------------------
   Llega minutos después que la página, así que casi siempre se pinta primero
   la línea de espera. LA LÍNEA NO LLEVA NI UNA RUEDA GIRANDO NI UNA CUENTA
   ATRÁS: un contador que se pasa del número prometido se ve peor que no tener
   contador, y aquí ni siquiera se promete un número.

   La lámina viene con el mismo hueso de fondo que la página, así que no
   necesita ni caja ni degradados: se apoya en el suelo y desaparece por los
   bordes ella sola. Sin borde, sin radio y sin sombra, como toda foto de esta
   página: la única sombra vive en la sección 02. */

.res-lamina {
    margin: var(--e9) 0 0;
}

.res-lamina img {
    display: block;
    width: 100%;
    height: auto;
}

.res-lamina__espera {
    margin-top: var(--e9);
    padding-top: var(--e4);
    border-top: 1px solid var(--borde);
    font-size: var(--t-meta);
    line-height: 1.45;
    color: var(--tenue);
    text-wrap: pretty;
}

/* --- El cierre ------------------------------------------------------------
   El filete corre a sangre (vive fuera de .env). Debajo, la única superficie
   de vino sólida de la pantalla. */

.res-linea { margin-top: var(--e9); }

.res-cierre { padding-block: var(--e8) var(--e-fuera); }

.res-cierre__frase {
    font-size: var(--t-cuerpo);
    line-height: 27px;
    color: var(--guia);
    text-wrap: pretty;
}

.res-cierre__boton { margin-top: var(--e4); }

.res-cierre__legal {
    margin-top: var(--e3);
    font-size: var(--t-meta);
    line-height: 1.45;
    color: var(--tenue);
}

/* ==========================================================================
   TELÉFONO
   El cuerpo NO encoge: las filas siguen en 17px. Lo que cede es el dato de
   apoyo de la tabla, igual que en la sección 01.
   ========================================================================== */

@media (max-width: 767px) {

    .ana { min-height: 68vh; padding-block: var(--e-fuera); }
    .ana-titulo { margin-bottom: var(--e7); }

    .res-analisis { padding-block: var(--e6) 0; }

    /* El riel se recoge: a 350px de foto, con el riel al 85% el numeral caería
       dentro del degradado del borde derecho y se lavaría. */
    .res-cotas { --riel: 78%; }

    /* A 350px de columna "Uniformidad del tono" (unos 165px) más
       "leve · mejillas" (unos 108px) más el numeral no dejan aire; la zona se
       retira y el nivel queda solo, que es lo que pide la fila. */
    .res-med__zona { display: none; }
    .res-med { grid-template-columns: 24px minmax(0, 1fr) max-content; }

    .res-habito { grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--e3); }

    /* La rutina sigue al numeral de la tabla, que en teléfono baja a 24px. La
       nota NO se retira como sí se retira la zona en la tabla de medición: allí
       es un dato de apoyo que cabe en la fila de al lado, y aquí es la
       precaución del ingrediente. Esa no se esconde por falta de ancho. */
    .res-paso { grid-template-columns: 24px minmax(0, 1fr); }

    .res-cuidado { padding-left: 24px; }

    .res-lamina { margin-top: var(--e8); }
    .res-lamina__espera { margin-top: var(--e8); }

    .res-cierre { padding-block: var(--e7) var(--e-fuera); }
}