/* ==========================================================================
   PLAN, RUTINA Y FICHA DE LA PACIENTE  ·  hoja de pantalla (v2)

   Cubre /portal/plan, /portal/planes, /portal/ficha y /portal/categoria.
   Se carga DESPUES de kctp.css, asi que no repite ni un token: todo lo que
   hay aqui son las decisiones que solo valen para estas cuatro vistas.

   La vara es lovi.care, del lado del paciente: cara, con aire, tipografia
   grande. Traducido a lo que faltaba aqui:

     1. La pantalla del plan no tenia titular. Abria con una franja verde de
        sistema y un h2 de 28px dentro de una tarjeta, o sea con menos peso
        que la lista que lleva a ella. Ahora abre con una portada: display de
        40px en peso 400 y, a 8px, la firma de quien lo aprobo.
     2. Un plan es una SECUENCIA y se veia como prosa. Va numerado, que es
        ademas como lo dibuja la propia portada de la aplicacion (.kctp-acceso
        -obra: "1 Limpiador suave / Todas las noches").
     3. Cinco tarjetas blancas iguales, apiladas: la rutina pesaba lo mismo
        que la lista de documentos. Ahora hay una columna de lectura y un riel
        para lo accesorio, y en escritorio el lienzo se abre a 1080px.
     4. Ritmo de dos velocidades de verdad: 96px entre secciones, 8-24px
        dentro de una. Antes todo estaba a 24px.
     5. Estado por marca, no por relleno. Ocho tarjetas de ficha pintadas de
        ambar dejaban de avisar: eran el fondo de la pantalla.

   Nada de lo que dice la pantalla cambio. Cambio donde esta y de que tamano.
   ========================================================================== */

/* ==========================================================================
   0. Lienzo

   Las cuatro vistas viven dentro de <main class="kctp-lienzo">, que mide
   720px. Para el plan y para la ficha eso convertia una pantalla de 1440 en
   una tira de telefono con 360px de hueso a cada lado. Se abre desde aqui
   con :has() —que la hoja base ya usa— para no tocar el controlador.
   ========================================================================== */

@media (min-width: 1040px) {
    .kctp-lienzo:has(> .plan-hoja),
    .kctp-lienzo:has(> .planes-hoja),
    .kctp-lienzo:has(> .ficha-hoja) { max-width: 1080px; }
    /* El pie legal es OTRO .kctp-lienzo, hermano del <main>. Si no se abre con
       el contenido, el aviso de urgencias arranca 180px mas adentro que todo
       lo demas y la pagina se ve descuadrada por abajo. */
    body:has(.plan-hoja)   > footer.kctp-pie-legal,
    body:has(.planes-hoja) > footer.kctp-pie-legal,
    body:has(.ficha-hoja)  > footer.kctp-pie-legal { max-width: 1080px; }
}

/* En las vistas cortas —/portal/planes con un solo plan, /portal/categoria
   con una entrada— el contenido terminaba a media pantalla, el aviso legal
   venia pegado detras y debajo quedaban 89px de hueso muerto hasta el borde:
   un pie flotando en el medio, que es la senal de una pagina sin terminar.
   Una altura minima manda ese hueco ARRIBA del pie y el pie al borde. El
   numero es la suma de lo que el armazon pone alrededor (64 de aire arriba,
   96 abajo, y el pie), medida en vivo. */
.planes-hoja,
.cat-hoja {
    min-height: calc(100vh - 470px);
    min-height: calc(100svh - 470px);
}
@media (min-width: 1040px) {
    .planes-hoja,
    .cat-hoja { min-height: calc(100vh - 400px); }
}

/* El titular de la pantalla y lo que viene debajo son DOS bloques, no uno.
   El sistema los separaba con 32px, que es el ritmo de dentro de un bloque:
   el titulo y la tarjeta se leian como un solo bulto arrimado al techo, con
   todo el vacio abajo. Entre bloques va el aire de seccion. (En la ficha ya
   estaba bien: su portada lleva --plan-aire.) */
.planes-hoja > .kctp-encabezado,
.cat-hoja    > .kctp-encabezado { margin-bottom: var(--kctp-e7); }
@media (min-width: 1040px) {
    .planes-hoja > .kctp-encabezado,
    .cat-hoja    > .kctp-encabezado { margin-bottom: 80px; }
}

/* Ritmo entre bloques grandes. En el telefono 56px; en escritorio 96, que es
   donde corren las dos referencias (Lovi 120, Stripe 96-128). */
.plan-hoja   { --plan-aire: 56px; }
.planes-hoja { --plan-aire: 56px; }
.ficha-hoja  { --plan-aire: 56px; }
@media (min-width: 700px) {
    .plan-hoja   { --plan-aire: 96px; }
    .planes-hoja { --plan-aire: 80px; }
    .ficha-hoja  { --plan-aire: 80px; }
}

/* ==========================================================================
   1. Portada del plan

   Titular de pantalla + la frase que sostiene el producto entero. Antes esa
   frase era un .kctp-aviso verde: una franja de sistema, del ancho de la
   pagina, por encima del titulo. Aqui es la bajada del titular, que es su
   sitio: es lo que hace que el plan valga algo.
   ========================================================================== */

.plan-portada { margin-bottom: var(--plan-aire); }

/* El ojo: el dato administrativo, en su tamano de dato administrativo. */
.plan-ojo {
    font-size: var(--kctp-t-meta);
    line-height: 1.2;
    color: var(--kctp-tenue);
    letter-spacing: -.004em;
    margin: 0 0 var(--kctp-e3);
}

.plan-portada h1 {
    font-family: var(--kctp-serif);
    font-weight: var(--kctp-peso-normal);
    color: var(--kctp-tinto);
    font-size: var(--kctp-t-display);
    line-height: var(--kctp-lh-display);
    letter-spacing: var(--kctp-ls-display);
    text-wrap: balance;
    margin: 0;
    max-width: 14ch;
}

/* Del titular a su firma, 16px: son un solo bloque. Despues viene el aire. */
.plan-firma {
    display: flex;
    align-items: flex-start;
    gap: var(--kctp-e2);
    margin: var(--kctp-e4) 0 0;
    max-width: 46ch;
    font-size: var(--kctp-t-menor);
    line-height: 1.55;
    color: var(--kctp-tenue);
}
.plan-firma i {
    flex: 0 0 auto;
    color: var(--kctp-ok);
    font-size: 1rem;
    line-height: 1.5;
}
/* El recurso de redaccion de Stripe: la frase clave en peso medio y casi
   negro, el resto al MISMO tamano en el tono de apoyo. La jerarquia dentro
   del parrafo la hacen el peso y el color, no un h4 nuevo. */
.plan-firma strong {
    font-weight: var(--kctp-peso-medio);
    color: var(--kctp-tinta);
}

/* ==========================================================================
   2. Cuerpo del plan: columna de lectura + riel
   ========================================================================== */

.plan-cuerpo { display: block; }

@media (min-width: 1040px) {
    .plan-cuerpo {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 296px;
        gap: 0 80px;
        align-items: start;
    }
}

/* Medida de parrafo: nunca el ancho del contenedor. */
.plan-columna p { max-width: 58ch; }

/* ---------- Que buscamos / como seguirlo ----------
   Eran dos .kctp-pregunta, o sea el patron de un CAMPO de formulario con su
   etiqueta, dentro de una tarjeta. No son campos: son dos frases del
   profesional. Van sin caja, con una linea de pelo entre ellas. */

.plan-intro {
    margin-bottom: var(--plan-aire);
    display: grid;
    gap: var(--kctp-e6);
}
.plan-nota h2 {
    font-family: var(--kctp-sans);
    font-size: var(--kctp-t-meta);
    font-weight: var(--kctp-peso-medio);
    line-height: 1.2;
    letter-spacing: -.004em;
    color: var(--kctp-tenue);
    margin: 0 0 var(--kctp-e2);
}
/* 21px en peso 400: la voz del profesional se lee como una cita, no como el
   valor de un campo. */
.plan-nota p {
    margin: 0;
    font-size: var(--paso-5);
    line-height: 1.42;
    letter-spacing: -.014em;
    color: var(--kctp-tinta);
}

/* ---------- Bloques de componentes ---------- */

.plan-bloque { margin-bottom: var(--plan-aire); }
.plan-bloque:last-child { margin-bottom: 0; }

.plan-bloque-titulo {
    font-family: var(--kctp-serif);
    font-weight: var(--kctp-peso-normal);
    color: var(--kctp-tinto);
    font-size: var(--kctp-t-titulo);
    line-height: var(--kctp-lh-titulo);
    letter-spacing: var(--kctp-ls-titulo);
    margin: 0 0 var(--kctp-e5);
}

/* ---------- Los pasos ----------
   Sin tarjeta y sin borde: la unica linea es el divisor entre pasos. Cinco
   tarjetas blancas apiladas no son jerarquia, son cinco rectangulos. */

.plan-pasos {
    list-style: none;
    margin: 0;
    padding: 0;
}
.plan-paso {
    display: flex;
    gap: var(--kctp-e4);
    padding: var(--kctp-e5) 0;
    /* --kctp-borde y no --kctp-linea: el divisor suave esta calibrado para ir
       DENTRO de una tarjeta blanca, y aqui los pasos van sobre el hueso, donde
       desaparece. Una sola linea de pelo en toda la pantalla. */
    border-top: 1px solid var(--kctp-borde);
}
.plan-paso:first-child { border-top: 0; padding-top: 0; }
.plan-paso:last-child  { padding-bottom: 0; }

@media (min-width: 700px) {
    .plan-paso { gap: var(--kctp-e5); }
}

/* Pastilla: radio = alto/2. Numero en peso medio, nunca en negrita. */
.plan-num {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: var(--kctp-r-pastilla);
    background: var(--kctp-acento-sw);
    color: var(--kctp-acento);
    display: grid;
    place-content: center;
    font-size: var(--kctp-t-meta);
    font-weight: var(--kctp-peso-medio);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    margin-top: 2px;
}

.plan-paso-cuerpo { min-width: 0; flex: 1; }

.plan-paso-cuerpo h3 {
    font-family: var(--kctp-sans);
    font-size: var(--paso-5);
    line-height: 1.28;
    letter-spacing: -.016em;
    font-weight: var(--kctp-peso-medio);
    color: var(--kctp-tinto);
    margin: 0;
}
.plan-detalle {
    margin: var(--kctp-e3) 0 0;
    font-size: var(--kctp-t-cuerpo);
    line-height: var(--kctp-lh-cuerpo);
    color: var(--kctp-tinta);
}

/* La cadencia es un DATO, no una frase. Pastilla de 12px sobre el piso del
   vino, que es la unica superficie tintada que se permite el sistema. */
/* inline-block y NO inline-flex: en flex el texto es un item que no baja de
   su ancho minimo, asi que una frecuencia larga ("Cada manana (y reaplicacion
   durante exposicion)") se salia de la tarjeta en el telefono. Asi envuelve
   como texto normal. */
.plan-cadencia {
    display: inline-block;
    margin: var(--kctp-e3) 0 0;
    padding: 5px 12px 5px 10px;
    border-radius: var(--kctp-radio-ch);
    background: var(--kctp-acento-sw);
    color: var(--kctp-acento);
    font-size: var(--kctp-t-micro);
    line-height: 1.35;
    letter-spacing: -.002em;
    max-width: 100%;
}
.plan-cadencia i { font-size: .8rem; opacity: .75; margin-right: 5px; vertical-align: -1px; }
.plan-cadencia strong { font-weight: var(--kctp-peso-medio); }

/* La precaucion: una nota colgada del paso, no una alarma.
   Cuatro cajas ambar rellenas a lo ancho convertian la pagina en un semaforo
   y, con todas iguales, ninguna avisaba de nada. Se queda la clase del
   sistema (y su icono, porque la informacion no puede depender solo del
   color) pero aqui adentro se pinta como cita: una linea de 2px y el texto.
   Alcance limitado a esta pantalla a proposito. */
.plan-paso .plan-precaucion {
    background: transparent;
    border: 0;
    border-left: 2px solid var(--kctp-aviso-bd);
    border-radius: 0;
    padding: 2px 0 2px var(--kctp-e3);
    margin: var(--kctp-e4) 0 0;
    gap: var(--kctp-e2);
    font-size: var(--kctp-t-menor);
    line-height: 1.5;
    color: var(--kctp-aviso);
    max-width: 54ch;
}
.plan-paso .plan-precaucion i { font-size: .82rem; line-height: 1.55; opacity: .9; }

/* "Cuando parar y avisarnos": lo unico que grita en toda la pantalla.
   Por eso el rojo se queda relleno y con su borde: es el unico. */
.plan-parar .kctp-aviso { font-size: var(--kctp-t-menor); line-height: 1.55; }

/* ==========================================================================
   3. Riel

   Lo que se consulta (una fecha, un PDF) separado de lo que se hace. En
   escritorio se queda pegado al hacer scroll; en el telefono es un bloque
   mas al final.
   ========================================================================== */

.plan-riel {
    margin-top: var(--plan-aire);
    display: grid;
    gap: var(--kctp-e5);
}
@media (min-width: 1040px) {
    .plan-riel {
        margin-top: 0;
        position: sticky;
        top: calc(var(--kctp-e8) + 24px);
    }
}

/* Del lado del paciente separa la SOMBRA, nunca un borde. */
.plan-ficha-lat {
    background: var(--kctp-blanco);
    border: 0;
    border-radius: var(--kctp-radio);
    box-shadow: var(--kctp-sombra);
    padding: var(--kctp-e5);
}
.plan-ficha-lat h2 {
    font-family: var(--kctp-sans);
    font-size: var(--kctp-t-meta);
    font-weight: var(--kctp-peso-medio);
    letter-spacing: -.004em;
    line-height: 1.2;
    color: var(--kctp-tenue);
    margin: 0 0 var(--kctp-e3);
}
.plan-fecha {
    display: flex;
    align-items: center;
    gap: var(--kctp-e2);
    margin: 0;
    font-size: var(--paso-5);
    line-height: 1.2;
    letter-spacing: -.016em;
    color: var(--kctp-tinto);
    font-variant-numeric: tabular-nums;
}
.plan-fecha i { font-size: 1rem; color: var(--kctp-acento); }
.plan-lat-nota {
    margin: var(--kctp-e3) 0 0;
    font-size: var(--kctp-t-meta);
    line-height: 1.5;
    color: var(--kctp-tenue);
}

.plan-docs { list-style: none; margin: 0; padding: 0; }
.plan-docs li + li { border-top: 1px solid var(--kctp-linea); }
.kctp-portal .plan-docs a {
    display: flex;
    align-items: center;
    gap: var(--kctp-e3);
    padding: var(--kctp-e3) 0;
    min-height: 48px;
    text-decoration: none;
    color: var(--kctp-tinta);
    font-size: var(--kctp-t-menor);
    line-height: 1.4;
    text-decoration: none;
    transition: color var(--kctp-mov-hover);
}
.plan-docs a:first-child { padding-top: 0; }
.plan-docs a > i:first-child { color: var(--kctp-tenue-2); font-size: 1rem; flex: 0 0 auto; }
.plan-docs a span { flex: 1; min-width: 0; }
.plan-docs-ir {
    flex: 0 0 auto;
    color: var(--kctp-tenue-2);
    font-size: .85rem;
    transition: transform var(--kctp-mov), color var(--kctp-mov-hover);
}
.plan-docs a:hover { color: var(--kctp-acento); }
.plan-docs a:hover .plan-docs-ir { color: var(--kctp-acento); transform: translateX(3px); }

/* Las acciones VIVEN EN EL RIEL. En el telefono el riel es el ultimo bloque,
   asi que cierran la pagina igual que antes; en escritorio acompanan a la
   fecha y a los documentos, que es lo que evita que el riel sean dos
   tarjetas cortas con 600px de hueso debajo. */
.plan-acciones {
    margin-top: var(--kctp-e2);
    padding-top: 0;
    border-top: 0;
}
.plan-acciones .kctp-btn { flex: 1 1 auto; }

/* Imprimir es una accion principal de esta pantalla, asi que la hoja de papel
   se disena igual que la de vidrio: sin el riel flotando, con la mitad de aire
   entre bloques (96px de blanco en papel es media hoja) y sin partir un paso
   por la mitad al cambiar de pagina. */
@media print {
    .plan-hoja      { --plan-aire: 40px; }
    .plan-cuerpo    { display: block; }
    .plan-riel      { position: static; margin-top: var(--plan-aire); }
    .plan-ficha-lat { box-shadow: none; padding: 0; }
    .plan-ficha-lat + .plan-ficha-lat { margin-top: var(--kctp-e5); }
    .plan-paso      { break-inside: avoid; }
    .plan-bloque-titulo { break-after: avoid; }
}

/* ==========================================================================
   4. Lista de planes

   La tarjeta abria con el codigo de consulta (un dato administrativo) como
   titular y dejaba el objetivo —lo unico que la persona reconoce como "su
   plan"— en texto corrido de 17px. Se invirtio. Y las vinetas eran las del
   navegador: un <ul> con disc.
   ========================================================================== */

.planes-lista { display: grid; gap: var(--kctp-e5); }

.plan-resumen { margin-bottom: 0; padding: var(--kctp-e6) var(--kctp-e5); }
@media (min-width: 700px) {
    .plan-resumen { padding: var(--kctp-e6); }
}

/* LA TARJETA VA EN UNA SOLA COLUMNA, y esto es una correccion de la vuelta
   anterior. Estaba partida en dos —el objetivo a la izquierda, la rutina a la
   derecha— y eso solo cuadra si las dos mitades pesan parecido. En los datos
   reales no pesan: cuatro de los cinco planes publicados no traen objetivo
   escrito, asi que la izquierda se queda con el titulo generico de una linea
   ("Tu plan de cuidado") mientras la derecha lleva cuatro pasos y un "y 2
   mas". Medido: 90px de columna izquierda contra 500 de derecha, o sea un
   hueco blanco de 460px DENTRO de la tarjeta. Una columna, y los pasos usan
   el ancho entero con la frecuencia alineada a la derecha: es la fila de
   resumen de Stripe (etiqueta izquierda / valor derecha), la misma que el
   indice de la ficha, y funciona con un paso o con seis. */
@media (min-width: 1040px) {
    .plan-resumen { padding: var(--kctp-e7) var(--kctp-e7) var(--kctp-e6); }
}

/* Codigo y estado son el mismo dato administrativo: van juntos y a la
   izquierda. Con la cabeza ya fuera de la columna de lectura, un
   "space-between" mandaba la pastilla a 900px del codigo, sola en la esquina
   de la tarjeta. */
.plan-resumen-cabeza {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--kctp-e3);
    margin-bottom: var(--kctp-e4);
}
@media (min-width: 1040px) { .plan-resumen-cabeza { margin-bottom: var(--kctp-e5); } }
.plan-resumen-cabeza .plan-ojo { margin: 0; }

/* 28px de serif en peso 400. Antes: 17px de Inter en peso 400 y, encima, con
   el codigo en negrita justo arriba pidiendo mas atencion que el. */
.plan-resumen-titulo {
    font-family: var(--kctp-serif);
    font-weight: var(--kctp-peso-normal);
    color: var(--kctp-tinto);
    font-size: var(--paso-6);
    line-height: 1.14;
    letter-spacing: -.026em;
    text-wrap: balance;
    margin: 0;
    max-width: 30ch;
}
/* Con un solo plan aprobado, /portal/planes era un titular y una tarjeta de
   414px de alto en una pagina de 900: "una tarjeta pequena flotando en una
   pagina casi vacia". El contenido no da para mas —un objetivo, una fecha y
   dos pasos— asi que lo que cambia es la ESCALA, que es como llena la pagina
   la vara: 34px de display en peso 400 para el objetivo, que es lo unico que
   la persona reconoce como "su plan". La jerarquia la da el tamano. */
@media (min-width: 1040px) {
    .plan-resumen-titulo {
        font-size: 2.125rem;   /* 34 */
        line-height: 1.08;
        letter-spacing: -.03em;
        max-width: 28ch;
    }
    /* Del titular a su firma, 12px: son un solo bloque. Y la firma sube a 15:
       de 34 a 13 el salto era de tres peldanos de la escala y la fecha se
       leia como letra chica de contrato. */
    .plan-resumen-firma { margin-top: var(--kctp-e3); font-size: var(--kctp-t-menor); }
}
.plan-resumen-firma {
    margin: var(--kctp-e2) 0 0;
    font-size: var(--kctp-t-meta);
    line-height: 1.45;
    color: var(--kctp-tenue);
}

.plan-resumen-pasos {
    list-style: none;
    margin: var(--kctp-e5) 0 0;
    padding: 0;
    display: grid;
    gap: 0;
}
@media (min-width: 1040px) { .plan-resumen-pasos { margin-top: var(--kctp-e6); } }
/* El mismo divisor que la rutina de /portal/plan: son la misma cosa vista de
   lejos y de cerca, y tienen que leerse igual. Una sola linea de pelo en toda
   la pantalla, nunca dos grosores. */
.plan-resumen-pasos li {
    display: flex;
    align-items: baseline;
    gap: var(--kctp-e3);
    padding: var(--kctp-e3) 0;
    border-top: 1px solid var(--kctp-linea);
}
.plan-resumen-pasos li:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 1040px) {
    .plan-resumen-pasos li { padding: var(--kctp-e4) 0; }
    .plan-resumen-pasos li:first-child { padding-top: 0; }
}
.plan-num-ch {
    width: 22px;
    height: 22px;
    font-size: var(--kctp-t-micro);
    margin-top: 0;
    transform: translateY(4px);
}
.plan-resumen-paso { min-width: 0; flex: 1; }
.plan-resumen-paso strong {
    font-weight: var(--kctp-peso-medio);
    font-size: var(--kctp-t-menor);
    color: var(--kctp-tinta);
    letter-spacing: -.008em;
}
.plan-resumen-paso span {
    display: block;
    font-size: var(--kctp-t-meta);
    line-height: 1.45;
    color: var(--kctp-tenue);
}
/* De 560 para arriba el paso y su frecuencia comparten renglon, con la
   frecuencia contra el borde derecho: el ojo baja por una columna de pasos y
   por otra de cuandos. Debajo de 560 no cabe y vuelven a apilarse. */
@media (min-width: 560px) {
    .plan-resumen-paso {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--kctp-e5);
    }
    .plan-resumen-paso strong { min-width: 0; }
    .plan-resumen-paso span { flex: 0 0 auto; text-align: right; }
}
.plan-resumen-mas {
    font-size: var(--kctp-t-meta);
    color: var(--kctp-tenue);
    padding-left: calc(22px + var(--kctp-e3));
}

.plan-resumen-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--kctp-e3);
    margin-top: var(--kctp-e6);
    padding-top: var(--kctp-e4);
    border-top: 1px solid var(--kctp-linea);
}
.plan-resumen-control {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: var(--kctp-t-meta);
    color: var(--kctp-tenue);
    font-variant-numeric: tabular-nums;
}
.plan-resumen-control i { color: var(--kctp-tenue-2); }
.plan-resumen-botones { display: flex; gap: var(--kctp-e2); flex-wrap: wrap; margin-left: auto; }
.plan-resumen-botones .kctp-btn { min-height: 40px; padding: 9px 16px; }

@media (max-width: 480px) {
    .plan-resumen-botones { width: 100%; }
    .plan-resumen-botones .kctp-btn { flex: 1 1 auto; }
}

/* ---------- La espera ----------
   Es el estado que mas gente ve —entre que manda la consulta y que le
   aprueban el plan pasan horas— y era el peor tratado: una tarjeta chica con
   dos frases, sola en 1440px de hueso. Ahora es la portada de la pantalla:
   el dibujo que ya usa el estado vacio de esta misma vista, el titular, y a
   su lado las consultas que estan en camino. Ni una palabra nueva. */

.planes-espera { padding: var(--kctp-e6) var(--kctp-e5); }
@media (min-width: 700px) { .planes-espera { padding: var(--kctp-e7) var(--kctp-e6); } }

.planes-espera-dicho svg {
    display: block;
    width: 128px;
    height: auto;
    margin: 0 0 var(--kctp-e5);
}
/* Es el estado que mas gente ve y estaba escrito a tamano de subtitulo: 28px
   como maximo, dentro de una tarjeta que ocupaba media pantalla. Sube al
   display de la pantalla (28 -> 40 segun el ancho) en peso 400, que es la
   regla de las dos referencias: la jerarquia la da el tamano, no el peso. */
.planes-espera h3 {
    font-family: var(--kctp-serif);
    font-weight: var(--kctp-peso-normal);
    color: var(--kctp-tinto);
    font-size: var(--kctp-t-display);
    line-height: var(--kctp-lh-display);
    letter-spacing: var(--kctp-ls-display);
    text-wrap: balance;
    margin: 0 0 var(--kctp-e3);
    max-width: 16ch;
}
.planes-espera .kctp-sub {
    margin: 0;
    max-width: 46ch;
    font-size: var(--kctp-t-cuerpo);
    line-height: 1.5;
    letter-spacing: -.012em;
    color: var(--kctp-tenue);
}
.planes-espera-lista { margin-top: var(--kctp-e6); }

/* En escritorio el dibujo se sale a una columna propia y el texto y las
   consultas comparten la de lectura. Asi la fila de estado vuelve a tener el
   ancho para el que esta hecha —codigo a la izquierda, boton a la derecha— en
   vez de partirse en dos renglones dentro de una columna angosta. */
@media (min-width: 1040px) {
    .planes-espera {
        display: grid;
        grid-template-columns: 208px minmax(0, 1fr);
        column-gap: var(--kctp-e8);
        align-items: start;
        padding: var(--kctp-e7);
    }
    /* El envoltorio desaparece de la rejilla para que dibujo, titular y
       bajada se coloquen cada uno en su celda. */
    .planes-espera-dicho { display: contents; }
    .planes-espera-dicho svg {
        grid-column: 1;
        grid-row: 1 / span 3;
        align-self: center;
        width: 208px;
        margin: 0;
    }
    .planes-espera h3        { grid-column: 2; grid-row: 1; max-width: 15ch; }
    .planes-espera .kctp-sub { grid-column: 2; grid-row: 2; margin-top: var(--kctp-e3); max-width: 52ch; }
    .planes-espera-lista     { grid-column: 2; grid-row: 3; margin-top: var(--kctp-e7); }
}

/* ==========================================================================
   5. Ficha clinica
   ========================================================================== */

/* ---------- Portada de dos columnas ----------
   Antes: titular, franja de autorizaciones, franja verde de "ficha completa"
   y tarjeta de videoconsulta. Cuatro bloques de ancho completo, apilados. En
   1440 eso empujaba los cuatro accesos justo encima del pliegue y dejaba el
   titular solo con 700px de hueso a su derecha. La bajada del titular y el
   ESTADO de la ficha son dos cosas distintas: ahora son dos columnas. */

.ficha-portada { margin-bottom: var(--plan-aire); }
.ficha-portada .kctp-encabezado { margin-bottom: 0; }

.ficha-estado { margin-top: var(--kctp-e6); }
/* Los avisos traen 24px de margen del sistema para cuando van sueltos en la
   pagina; aqui son una pila y se separan con 12. El ultimo no empuja nada. */
.ficha-estado .kctp-aviso { margin-bottom: var(--kctp-e3); }
.ficha-estado > :last-child { margin-bottom: 0; }

@media (min-width: 1040px) {
    .ficha-portada {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 400px;
        gap: 0 var(--kctp-e8);
        align-items: start;
    }
    .ficha-portada .kctp-encabezado p { max-width: 40ch; }
    .ficha-estado { margin-top: 0; }
}

.ficha-hoja .kctp-categorias { margin-bottom: 0; }
.ficha-atajos { margin-bottom: var(--plan-aire) !important; }

.ficha-seccion { margin-bottom: var(--plan-aire); }

/* --- Las tres franjas de la tarjeta de acceso ---------------------------
   EL DEFECTO DE LA VUELTA ANTERIOR. .kctp-cuenta lleva margin-top:auto, o
   sea que la descripcion se pega al FONDO de la tarjeta. Como la rejilla
   estira las cuatro al mismo alto y los titulos ocupan una o dos lineas y
   las descripciones dos o tres, cada descripcion arrancaba a una altura
   distinta: 43px de desfase medidos a 390 ("Mis datos" contra "Mis fotos en
   el tiempo") y 21px a 1440 ("Mis planes y rutinas" contra las otras tres).

   Con subgrid las cuatro tarjetas comparten LAS MISMAS tres pistas de la
   rejilla madre —icono, titulo, descripcion—, asi que icono, titulo y
   descripcion caen exactamente en la misma y en cualquier ancho, y un titulo
   que pasa a dos lineas ensancha la pista para las cuatro a la vez. */

/* Y de paso, los cuatro accesos dejan de pesar lo mismo que las doce filas de
   abajo: son la navegacion de la pantalla, no un item de indice. Icono de
   44px y nombre en el cuerpo del portal (17px) contra icono de 36 y nombre de
   15 en el indice. Dos niveles claros, sin tocar ni un peso tipografico. */
.ficha-atajos .kctp-categoria { padding: var(--kctp-e5); }
.ficha-atajos .kctp-categoria .kctp-icono {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    font-size: 1.2rem;
}
.ficha-atajos .kctp-categoria strong {
    font-size: var(--kctp-t-cuerpo);
    line-height: 1.28;
    letter-spacing: -.014em;
}
.ficha-atajos .kctp-categoria .kctp-cuenta { margin-top: 0; }

/* --- Telefono: una columna, icono al lado -------------------------------
   A dos columnas, la caja de texto medía 137px: la mitad de la medida de
   parrafo mas corta de la referencia (270px dentro de tarjeta). "Contacto,
   fecha de nacimiento, tipo de piel y fototipo" caia en cuatro renglones de
   tres palabras. Con el icono a la izquierda, la misma frase entra en dos
   renglones de 274px y ademas caben tres accesos sobre el pliegue. */
.ficha-atajos { grid-template-columns: 1fr; }
.ficha-atajos .kctp-categoria {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: var(--kctp-e4);
    row-gap: var(--kctp-e1);
    align-content: start;
    min-height: 0;
    padding: var(--kctp-e4) var(--kctp-e5);
}
.ficha-atajos .kctp-categoria .kctp-icono  { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
.ficha-atajos .kctp-categoria strong       { grid-column: 2; grid-row: 1; align-self: center; }
.ficha-atajos .kctp-categoria .kctp-cuenta { grid-column: 2; grid-row: 2; }

/* --- Tableta y escritorio: la tarjeta vertical de tres franjas ----------- */
@media (min-width: 620px) {
    .ficha-atajos { grid-template-columns: repeat(2, 1fr); }
    .ficha-atajos .kctp-categoria {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--kctp-e3);
        min-height: 138px;
        padding: var(--kctp-e5);
    }
    .ficha-atajos .kctp-categoria .kctp-icono,
    .ficha-atajos .kctp-categoria strong,
    .ficha-atajos .kctp-categoria .kctp-cuenta { grid-column: 1; grid-row: auto; }
    .ficha-atajos .kctp-categoria strong { align-self: start; }

    @supports (grid-template-rows: subgrid) {
        .ficha-atajos .kctp-categoria {
            grid-row: span 3;
            grid-template-rows: subgrid;
        }
    }
    /* Sin subgrid, las dos lineas de titulo se reservan a mano. Mismo
       resultado mientras ningun titulo pase de dos lineas, que es el caso en
       los dos anchos: 17px de cuerpo por 1.28 de interlineado, dos veces. */
    @supports not (grid-template-rows: subgrid) {
        .ficha-atajos .kctp-categoria {
            grid-template-rows: 44px calc(var(--paso-4) * 2.56) auto;
        }
    }
}
@media (min-width: 1040px) {
    .ficha-atajos { grid-template-columns: repeat(4, 1fr); }
}

/* --- El indice de antecedentes ------------------------------------------
   Doce accesos con el mismo icono, un nombre corto y un estado NO son doce
   tarjetas: son un indice. Como tarjetas se leian como un muro —y con las
   doce en "No tengo ninguna", como un muro que repite la misma frase doce
   veces—. Como filas se recorren de un vistazo, ocupan un tercio menos de
   alto y los estados quedan en una columna, que es lo que deja ver de golpe
   cuantas faltan. Sigue siendo la superficie del sistema: blanco, sombra de
   dos capas, sin un solo borde, y el mismo destino y el mismo texto. */

/* EL DEFECTO DE LA VUELTA ANTERIOR: doce filas blancas, cada una con su
   sombra de dos capas y su redondeo, sobre el hueso. Aunque ya no eran
   tarjetas altas, seguian siendo DOCE SUPERFICIES, y con las doce diciendo
   "No tengo ninguna" la pantalla era un muro que repite la misma frase doce
   veces. Un indice es UNA superficie con doce renglones, que es como lo
   resuelven las dos referencias: Lovi con una tarjeta blanca sin bordes,
   Stripe con un panel y filas separadas por una linea de pelo. Una sombra en
   vez de doce, y el estado se lee en columna. */
.ficha-indice {
    background: var(--kctp-blanco);
    border: 0;
    border-radius: var(--kctp-radio);
    box-shadow: var(--kctp-sombra);
    padding: var(--kctp-e2) var(--kctp-e3);
    grid-template-columns: 1fr;
    gap: 0;
}
@media (min-width: 700px) {
    .ficha-indice { grid-template-columns: repeat(2, 1fr); padding: var(--kctp-e2) var(--kctp-e4); }
}

.ficha-indice .kctp-categoria {
    position: relative;
    flex-direction: row;
    align-items: center;
    gap: var(--kctp-e3);
    min-height: 0;
    padding: var(--kctp-e3) var(--kctp-e3);
    background: transparent;
    box-shadow: none;
    border-radius: var(--kctp-radio-ch);
}
/* Una fila no levita ni se le abre la sombra: el chevron avanza y el renglon
   se tine, y ya. Doce rectangulos saltando 2px al pasar el raton es ruido. */
.ficha-indice .kctp-categoria:hover {
    transform: none;
    box-shadow: none;
    background: var(--kctp-crema);
}

/* Los divisores van en pseudoelementos y no en border, por dos razones: la
   sombra del hover no los borra, y la linea entre columnas puede empezar y
   terminar dentro del renglon en vez de tocar el borde del panel. */
.ficha-indice .kctp-categoria::before {
    content: "";
    position: absolute;
    left: var(--kctp-e3);
    right: var(--kctp-e3);
    top: 0;
    height: 1px;
    background: var(--kctp-linea);
}
.ficha-indice .kctp-categoria:first-child::before { display: none; }
@media (min-width: 700px) {
    .ficha-indice .kctp-categoria:nth-child(2)::before { display: none; }
    .ficha-indice .kctp-categoria:nth-child(even)::after {
        content: "";
        position: absolute;
        left: 0;
        top: 10px;
        bottom: 10px;
        width: 1px;
        background: var(--kctp-linea);
    }
}

/* El icono del indice baja a 32: es una marca de renglon, no el icono de una
   tarjeta de navegacion. Los cuatro accesos de arriba se quedan en 44 y la
   diferencia es lo que separa los dos niveles de la pantalla. */
.ficha-indice .kctp-categoria .kctp-icono {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    font-size: .95rem;
}

.ficha-indice-texto {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* A partir de 1040 —donde el lienzo se abre a 1080 y cada columna del panel
   pasa de 336 a 470px— el nombre y el estado comparten renglon: el ojo baja
   por una columna de nombres y por otra, callada, de estados. Es la fila de
   resumen de Stripe (etiqueta izquierda / valor derecha), y es lo que hace
   que doce "No tengo ninguna" se lean como una columna resuelta y no como
   doce avisos. Por debajo de 1040 no caben en el mismo renglon: medido, a
   760 "Antecedentes familiares" mas su estado pedian 291px en una columna de
   230 y el nombre se partia en dos lineas, dejando renglones de 64 y de 56
   en el mismo panel. Ahi el estado va debajo del nombre, y las doce filas
   vuelven a medir lo mismo. */
@media (min-width: 1040px) {
    .ficha-indice-texto {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--kctp-e4);
    }
    .ficha-indice-texto > strong { min-width: 0; }
    .ficha-indice .kctp-categoria .kctp-cuenta { flex: 0 0 auto; text-align: right; }
}
/* Alturas de linea en pixeles y no en factor, y alto fijo para el renglon de
   estado. Motivo medido: "Falta revisar" es un inline-flex (lleva el punto de
   6px) y su caja mide una pizca mas que la de "1 registro", asi que las dos
   filas de una misma banda quedaban centradas a 0,95px de diferencia. Con las
   dos lineas de alto fijo, las doce filas caen en la misma y exacta. */
.ficha-indice .kctp-categoria strong { line-height: 20px; }
.ficha-indice .kctp-categoria .kctp-cuenta {
    margin-top: 0;
    font-size: var(--kctp-t-meta);
    line-height: 18px;
    height: 18px;
}
.ficha-indice .kctp-falta { line-height: 18px; }
.ficha-indice-ir {
    flex: 0 0 auto;
    color: var(--kctp-tenue-2);
    font-size: .8rem;
    transition: transform var(--kctp-mov), color var(--kctp-mov-hover);
}
.ficha-indice .kctp-categoria:hover .ficha-indice-ir {
    color: var(--kctp-acento);
    transform: translateX(3px);
}

/* Antes: style="font-size:1.05rem;font-weight:700". Un 700 en una hoja que
   no tiene un solo 700, y a 17px, o sea mas chico que el cuerpo del portal
   redondeado. La jerarquia la da el tamano. */
.ficha-titulo {
    font-family: var(--kctp-serif);
    font-weight: var(--kctp-peso-normal);
    color: var(--kctp-tinto);
    font-size: var(--kctp-t-titulo);
    line-height: var(--kctp-lh-titulo);
    letter-spacing: var(--kctp-ls-titulo);
    margin: 0 0 var(--kctp-e4);
}

/* El avance y el porque, juntos y pegados a las doce que cuentan. Estaban a
   700px de distancia el uno del otro, contando lo mismo. */
.ficha-avance {
    background: var(--kctp-blanco);
    border: 0;
    border-radius: var(--kctp-radio);
    box-shadow: var(--kctp-sombra);
    padding: var(--kctp-e5);
    margin-bottom: var(--kctp-e5);
}
.ficha-avance .kctp-progreso-texto { margin-bottom: var(--kctp-e2); }
.ficha-avance .kctp-progreso { margin-bottom: var(--kctp-e4); }
/* En escritorio el panel medía 1032px de ancho con un parrafo de 68ch dentro:
   media tarjeta vacia. La cuenta y la barra se van a una columna corta y el
   porque a la de lectura, que es lo unico que hay que leer entero. */
@media (min-width: 1040px) {
    .ficha-avance {
        display: grid;
        grid-template-columns: 300px minmax(0, 1fr);
        column-gap: var(--kctp-e7);
        align-items: start;
        padding: var(--kctp-e6);
    }
    .ficha-avance .kctp-progreso-texto { grid-column: 1; grid-row: 1; }
    .ficha-avance .kctp-progreso       { grid-column: 1; grid-row: 2; margin-bottom: 0; }
    .ficha-avance-texto                { grid-column: 2; grid-row: 1 / span 2; }
}
.ficha-avance-texto {
    margin: 0;
    font-size: var(--kctp-t-menor);
    line-height: 1.55;
    color: var(--kctp-tenue);
    max-width: 68ch;
}
.ficha-avance-texto strong { font-weight: var(--kctp-peso-medio); color: var(--kctp-tinta); }
.ficha-avance-texto em { font-style: normal; color: var(--kctp-tinta); }

/* --- "Falta revisar": marca, no relleno ---------------------------------
   Ocho de doce tarjetas pintadas de ambar hacian de la pantalla un muro
   naranja, y el aviso dejaba de avisar. Se marca con un punto y con el color
   del texto —que es como el sistema marca ya el estado de una consulta—, y
   la tarjeta se queda blanca como las demas. Regla de las dos referencias:
   el estado va por la marca, nunca por rellenar la tarjeta de color. */
.ficha-hoja .kctp-categoria.kctp-pendiente {
    background: var(--kctp-blanco);
    border: 0;
}
.ficha-hoja .kctp-categoria.kctp-pendiente .kctp-icono {
    background: var(--kctp-aviso-sw);
    color: var(--kctp-aviso);
}
.ficha-hoja .kctp-falta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--kctp-aviso);
    font-weight: var(--kctp-peso-medio);
}
.ficha-hoja .kctp-falta::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

/* La marca de "no tengo ninguna" es informacion resuelta: se apaga. */
.ficha-hoja .kctp-categoria .kctp-cuenta .bi-check2 { color: var(--kctp-ok); }

.ficha-privacidad { margin-top: 0; max-width: 76ch; }

/* ==========================================================================
   6. Categoria del expediente
   ========================================================================== */

/* Las dos salidas del estado vacio iban apiladas y centradas con anchos
   distintos: un eje central roto en el punto donde la persona decide si
   sigue o se va. Una al lado de otra y del mismo alto. */
.cat-vacio-salidas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: var(--kctp-e3);
}
.cat-vacio-salidas form { margin: 0; display: flex; }
.cat-vacio-salidas .kctp-btn { min-height: 48px; }
.cat-vacio .cat-vacio-nota {
    margin: var(--kctp-e5) auto 0;
    max-width: 44ch;
    text-align: center;
}
@media (max-width: 480px) {
    .cat-vacio-salidas { flex-direction: column; }
    .cat-vacio-salidas form,
    .cat-vacio-salidas .kctp-btn { width: 100%; }
}

/* La barra estiraba el boton a los 720px del lienzo, asi que la accion
   secundaria de la pantalla era una banda de vino de lado a lado: lo mas
   ruidoso que habia. Se queda del ancho de su texto. */
@media (min-width: 560px) {
    .cat-barra .kctp-btn { flex: 0 0 auto; }
}

/* --- La marca de estado de una entrada -----------------------------------
   Era un border-left de 4px sobre una tarjeta de radio 12 y con sombra. Dos
   consecuencias: la unica pareja borde+sombra que quedaba en estas cuatro
   pantallas, y un filo que al llegar a las esquinas redondeadas se afina en
   punta y parece un fallo de dibujo (se ve a simple vista al ampliar).
   Misma marca, misma anchura, mismos colores: ahora es una pastilla dentro de
   la tarjeta, con su propio redondeo. */
.cat-hoja .kctp-fila { position: relative; border-left: 0; padding-left: var(--kctp-e5); }
.cat-hoja .kctp-fila::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 12px;
    bottom: 12px;
    width: 4px;
    border-radius: var(--kctp-r-pastilla);
    background: transparent;
}
.cat-hoja .kctp-fila.est-ACTIVO::before     { background: var(--kctp-acento-cl); }
.cat-hoja .kctp-fila.est-RESUELTO::before   { background: var(--kctp-mint); }
.cat-hoja .kctp-fila.est-SUSPENDIDO::before { background: var(--kctp-nude); }

/* En esta pantalla la fila ES el contenido, no un renglon de una lista larga:
   el nombre de la entrada sube al cuerpo del portal. */
.cat-hoja .kctp-fila-cuerpo strong { font-size: var(--kctp-t-cuerpo); line-height: 1.35; }
/* Y el resumen deja de recortarse con puntos suspensivos: era el unico sitio
   de la pantalla donde se perdia texto clinico ("...tuve que ir a emergen...").
   Envuelve; son dos lineas como mucho. */
.cat-hoja .kctp-fila-cuerpo span {
    font-size: var(--kctp-t-menor);
    line-height: 1.45;
    margin-top: 2px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
.cat-hoja .kctp-fila { min-height: 76px; align-items: flex-start; }
.cat-hoja .kctp-fila .kctp-icono,
.cat-hoja .kctp-fila .kctp-chevron { margin-top: 2px; }

/* ==========================================================================
   7. VUELTA 2 — lo que la comparacion lado a lado con lovi.care seguia
      ganando, medido en el DOM en vivo a 390 y a 1440.

   La rejilla ya cuadraba: las cuatro tarjetas de acceso caen en la misma
   linea al centesimo (top 243.75 / icono 267.75 / titulo 323.75 /
   descripcion 357.50 en las cuatro a 1440; y el mismo desfase exacto en las
   cuatro a 390). El "2px mas arriba" que se veia en la medicion anterior era
   el :hover del sistema pegado bajo el cursor del robot en un viewport
   tactil —lo arregla el bloque de (hover: none) de mas abajo—, no la caja.

   Lo que si seguia fuera de la vara era la ESCALA. Contada en la pantalla:
   titular 40, y despues de el TODO caia a 15 o a 13. La bajada del titular
   —la frase que explica de que va la pantalla— medía 15px, o sea MENOS que
   el cuerpo del portal (17). En la referencia esa frase mide 22-24 sobre un
   cuerpo de 16-17.6: esta un peldano ARRIBA del cuerpo, no uno abajo. Y los
   titulos de seccion medían 28 cuando en la referencia miden 44.

   Aqui no se toca ni una palabra ni una caja: se corrige la escala, el
   ritmo dentro de la tarjeta de plan, y el hover fantasma del tactil.
   ========================================================================== */

/* ---------- 7.1 La bajada del titular ------------------------------------
   Sube de 15 a 17 en el telefono y a 20 en escritorio, con interlineado mas
   corto (1.42 / 1.34) y tracking negativo, que es lo que la referencia hace
   con todo lo que pasa de 17px. Y del titular a su bajada, 12px: son un solo
   bloque, y el aire va DESPUES. */
.ficha-hoja  .kctp-encabezado p,
.planes-hoja .kctp-encabezado p,
.cat-hoja    .kctp-encabezado p {
    margin-top: var(--kctp-e3);
    font-size: var(--paso-4);      /* 17 */
    line-height: 1.42;
    letter-spacing: -.011em;
    max-width: 34ch;
}
@media (min-width: 1040px) {
    .ficha-hoja  .kctp-encabezado p,
    .planes-hoja .kctp-encabezado p,
    .cat-hoja    .kctp-encabezado p {
        font-size: 1.25rem;        /* 20 */
        line-height: 1.34;
        letter-spacing: -.016em;
        max-width: 44ch;
    }
    /* En la ficha la bajada ya vive dentro de una columna de 568px —la misma
       medida de parrafo que usa la referencia (560)—, asi que ahi la columna
       manda y no hace falta un tope propio. */
    .ficha-portada .kctp-encabezado p { max-width: none; }
}

/* La bajada de /portal/plan no es un <p> del sistema sino la firma de quien
   aprobo el plan. Mismo papel, misma escala. */
@media (min-width: 1040px) {
    .plan-firma {
        font-size: var(--paso-4);  /* 17 */
        line-height: 1.5;
        max-width: 54ch;
    }
    .plan-firma i { font-size: 1.05rem; line-height: 1.45; }
}

/* ---------- 7.2 Titulos de seccion ---------------------------------------
   "Mis antecedentes", "Rutina de cuidado", "Cuando parar y avisarnos". Eran
   28px en escritorio; la referencia pone 44 en peso 400 y deja que el TAMANO
   haga la jerarquia. 34 es el peldano que le corresponde aqui: por debajo
   del titular de pantalla (40) y bien por encima de la bajada (20), sin
   pelearse con el. Interlineado 1.06 y tracking -.03em, que es la palanca
   barata que hace que un display se vea caro. */
.ficha-titulo,
.plan-bloque-titulo {
    font-size: 1.5rem;             /* 24 en telefono */
    line-height: 1.1;
    letter-spacing: -.026em;
}
@media (min-width: 1040px) {
    .ficha-titulo,
    .plan-bloque-titulo {
        font-size: 2.125rem;       /* 34 */
        line-height: 1.06;
        letter-spacing: -.03em;
    }
    /* Del titulo a lo que cuenta, el ritmo corto de la referencia. */
    .ficha-titulo       { margin-bottom: var(--kctp-e5); }
    .plan-bloque-titulo { margin-bottom: var(--kctp-e6); }
}

/* ---------- 7.3 La rutina dentro de la tarjeta de /portal/planes ----------
   El resumen del plan es lo unico que hay en esa pantalla, y sus renglones
   estaban dos peldanos por debajo del cuerpo del portal (15 el paso y 13 el
   cuando). Suben a 17 y 15: es la misma rutina que /portal/plan muestra de
   cerca, y tiene que leerse como algo que se hace, no como letra chica. */
.plan-resumen-paso strong {
    font-size: var(--paso-4);      /* 17 */
    line-height: 1.35;
}
.plan-resumen-paso span {
    font-size: var(--paso-3);      /* 15 */
    line-height: 1.45;
}
@media (min-width: 700px) {
    .plan-num-ch {
        width: 26px;
        height: 26px;
        font-size: var(--kctp-t-meta);
        transform: translateY(4px);
    }
    .plan-resumen-mas { padding-left: calc(26px + var(--kctp-e3)); }
}

/* El hueco antes del divisor del pie: 12px del ultimo renglon mas 32 de
   margen daban 44px de blanco sin nada que separar, y con dos pasos en la
   lista se leia como que la tarjeta se habia quedado a medias. 16 basta:
   el divisor ya hace el corte. */
.plan-resumen-pie { margin-top: var(--kctp-e4); }

/* ---------- 7.4 El hover fantasma en pantalla tactil ---------------------
   El sistema levanta la tarjeta 2px al pasar el raton. En un viewport tactil
   no hay raton, pero el ultimo punto donde se toco queda "hovereado" y esa
   tarjeta se dibuja 2px mas arriba que sus tres vecinas: una fila que cuadra
   al centesimo se mide desalineada. En (hover: none) no hay estado de paso,
   asi que no hay levantada ni tinte que se quede pegado. */
@media (hover: none) {
    .ficha-hoja .ficha-atajos .kctp-categoria:hover {
        transform: none;
        box-shadow: var(--kctp-sombra);
    }
    .ficha-hoja .ficha-indice .kctp-categoria:hover { background: transparent; }
    .cat-hoja .kctp-fila:hover { transform: none; }
    .planes-hoja .plan-resumen:hover { transform: none; }
}

/* ---------- 7.5 La rutina, dentro de su propia superficie ----------------
   /portal/planes es, para casi todo el mundo, UNA tarjeta en una pagina de
   900px de alto: si esa tarjeta es texto apilado sobre blanco, la pantalla
   se lee "armada", no disenada. La rutina no es mas texto: es la lista de lo
   que la persona hace cada dia, y ahora tiene superficie propia —el rosa de
   marca, sin borde y sin sombra, que es como las dos referencias meten un
   bloque dentro de una tarjeta—. De paso, el par "paso / cuando" deja de
   cruzar 936px de blanco: lo enmarca el panel y se lee como una sola fila.

   Cuidado medido: .plan-num usa --kctp-acento-sw, que es EXACTAMENTE el
   mismo #f5edef del panel. Dentro del panel, la pastilla del numero se
   quedaba invisible; sobre el rosa va en blanco. */
.plan-resumen-pasos {
    background: var(--kctp-panel);
    border-radius: 14px;
    padding: var(--kctp-e4) var(--kctp-e5);
}
.plan-resumen-pasos li { border-top-color: var(--kctp-borde); }
.plan-resumen-pasos li:last-child { padding-bottom: 0; }
.plan-resumen-pasos .plan-num-ch {
    background: var(--kctp-blanco);
    color: var(--kctp-acento);
}
@media (min-width: 1040px) {
    .plan-resumen-pasos {
        padding: var(--kctp-e5) var(--kctp-e6);
        border-radius: 16px;
    }
    .plan-resumen-pasos li:last-child { padding-bottom: 0; }
    /* La tarjeta respira igual por los cuatro lados. */
    .plan-resumen { padding: var(--kctp-e7); }
}
/* Del panel al divisor del pie, el aire de dentro de un bloque. */
.plan-resumen-pie { margin-top: var(--kctp-e5); }

/* En el telefono el panel con 24px de sangria dejaba la columna del paso en
   244px y "Limpieza suave dos veces al dia" se partia en dos renglones. Ahi
   el panel deja de ser una caja dentro de la tarjeta y pasa a ser una BANDA
   que la cruza de lado a lado: el paso recupera sus 276px y entra en una
   sola linea, y la tarjeta gana igual su segunda superficie. Los lados de la
   tarjeta son rectos en ese tramo, asi que la banda cierra a ras. */
@media (max-width: 699px) {
    .plan-resumen-pasos {
        margin-left: calc(var(--kctp-e5) * -1);
        margin-right: calc(var(--kctp-e5) * -1);
        border-radius: 0;
        padding: var(--kctp-e4) var(--kctp-e5);
    }
}

/* ---------- 7.6 El aviso de privacidad, contra la rejilla ----------------
   Media 76ch: terminaba en 719px, o sea ni el ancho del lienzo ni ninguna
   linea que exista en la pantalla. Un bloque que corta donde no corta nada
   es lo que hace que una pagina se lea "armada". Al 50% termina EXACTAMENTE
   en el divisor entre las dos columnas del indice de antecedentes (x=854 en
   1440), y de paso los 516px caen dentro de la medida de parrafo de la
   referencia (410-560). */
@media (min-width: 1040px) {
    .ficha-privacidad { max-width: 50%; }
}

/* ==========================================================================
   8. VUELTA 3 — el acantilado de escala, el contenedor estirado y el verde

   Medido en el DOM en vivo (histograma de font-size de todo lo que tiene
   texto propio dentro de <main>), a 1440x900 y a 390x844:

     /portal/ficha a 1440 ... 40 (h1) - 34 (h2) - 20 (bajada) - 15 EN 25
                              ELEMENTOS - 13. Ese unico peldano de 15 cargaba
                              las 12 etiquetas del indice, sus 12 estados, los
                              cuerpos de las cuatro tarjetas y los avisos.
     /portal/ficha a 390 .... 28,11 - 17 - 15 en 19 elementos - 12.

   Y al lado, en la MISMA hoja, /portal/plan corria 40 - 34 - 21 - 17 - 13:
   una escalera de verdad. O sea que el problema no era el sistema, era que
   la ficha no usaba mas que dos de sus peldanos.

   Tres cosas se cierran aqui, en orden de impacto:

     8.1  La escala. El peldano de trabajo del portal sube de 15 a 17-19, y
          aparece el escalon de 26px que faltaba entre el titulo de seccion
          y el cuerpo: la bajada del titular. Con eso la ficha pasa de cuatro
          tamanos utiles a siete.
     8.2  El verde. El aviso de "ficha completa" era un bloque #e9f5f0 en una
          pantalla hueso/vino/oro, en la esquina superior derecha, peleando
          con el titular. El estado de la ficha deja de ser un bloque de
          color: pasa a ser texto con su icono en color. Ni una palabra menos.
     8.3  El contenedor estirado de /portal/planes: una tarjeta de 1032px con
          tres lineas dentro y 500px de hueco entre el codigo y el boton. La
          columna de esa pantalla se cierra en 920px, que es donde la fila de
          estado vuelve a medir lo que tiene que medir.

   Dos valores de esta seccion no salen de --paso-N y se declaran a
   proposito, con su medida y su porque (el contrato de kctp.css lo permite
   si se rompe en la hoja de la pantalla y con comentario):

     26px  la bajada del titular. La escala salta de 21 a 28 y la referencia
           pone el subtitulo en 22-24 sobre un cuerpo de 16-17,6. 28 se pelea
           con el titulo de seccion (34); 21 no se despega del cuerpo (17).
     19px  la etiqueta de las doce filas del indice. Con 17 no se separa del
           cuerpo de las tarjetas de arriba; con 21, doce renglones seguidos
           pesan como doce titulos.
   ========================================================================== */

/* ---------- 8.1 El titular, al tamano de la vara -------------------------
   La vara abre en 44-48px de grotesca a 1440 y en 28-36 a 390 con
   interlineado exactamente 1.0. Nuestro display del sistema topa en 40 y en
   el telefono se quedaba en 28,11: casi la mitad de su titular movil. Una
   serif de display necesita ademas mas cuerpo para pesar lo mismo que una
   grotesca. 36 -> 50 es donde el titular de estas cuatro vistas deja de ser
   "un titulo" y pasa a ser la pantalla. */
.plan-hoja   .kctp-encabezado h1,
.planes-hoja .kctp-encabezado h1,
.ficha-hoja  .kctp-encabezado h1,
.cat-hoja    .kctp-encabezado h1,
.plan-portada h1 {
    font-size: clamp(2.25rem, 1.2rem + 4.3vw, 3.125rem);   /* 36 -> 50 */
    line-height: 1;
    letter-spacing: -.03em;
    text-wrap: balance;
}
@media (min-width: 1040px) {
    .plan-hoja   .kctp-encabezado h1,
    .planes-hoja .kctp-encabezado h1,
    .ficha-hoja  .kctp-encabezado h1,
    .cat-hoja    .kctp-encabezado h1,
    .plan-portada h1 { line-height: 1.02; letter-spacing: -.034em; }
}
/* El boton de volver es un circulo de 40px alineado al borde SUPERIOR de la
   caja del titular. Con el titular en 28px ese borde y la altura de
   mayusculas casi coincidian; a 50px la letra empieza mas abajo que la caja
   y el circulo quedaba flotando por encima del texto. Se baja hasta la mitad
   optica de la primera linea. */
@media (min-width: 1040px) {
    .plan-hoja   .kctp-encabezado > .kctp-volver,
    .planes-hoja .kctp-encabezado > .kctp-volver,
    .ficha-hoja  .kctp-encabezado > .kctp-volver,
    .cat-hoja    .kctp-encabezado > .kctp-volver { margin-top: 7px; }
}

/* ---------- 8.1b La bajada: el escalon de 26 que no existia --------------
   Es la frase que dice de que va la pantalla ("Lo que un profesional reviso,
   corrigio y aprobo para ti"), y medía 20 en escritorio y 17 en el telefono,
   o sea pegada al cuerpo. En la vara el subtitulo esta un peldano ARRIBA del
   cuerpo, con interlineado 1,09-1,14. Aqui: 20 -> 26 en escritorio, 17 -> 20
   en el telefono, y el interlineado baja al subir el tamano. */
.ficha-hoja  .kctp-encabezado p,
.planes-hoja .kctp-encabezado p,
.cat-hoja    .kctp-encabezado p {
    font-size: 1.25rem;            /* 20 */
    line-height: 1.32;
    letter-spacing: -.016em;
    max-width: 30ch;
}
@media (min-width: 1040px) {
    .ficha-hoja  .kctp-encabezado p,
    .planes-hoja .kctp-encabezado p,
    .cat-hoja    .kctp-encabezado p {
        font-size: 1.625rem;       /* 26 */
        line-height: 1.24;
        letter-spacing: -.02em;
        max-width: 26ch;
    }
    .ficha-portada .kctp-encabezado p { max-width: 23ch; }
}
/* La firma de /portal/plan hace el mismo papel: es la frase que sostiene el
   producto entero ("lo reviso y lo aprobo una persona"). Mismo tramo, un
   peldano por debajo porque lleva nombre propio y fecha y a 26 se partia en
   tres lineas. */
@media (min-width: 1040px) {
    .plan-firma {
        font-size: 1.375rem;       /* 22 */
        line-height: 1.36;
        letter-spacing: -.017em;
        max-width: 44ch;
    }
    .plan-firma i { font-size: 1.25rem; line-height: 1.3; }
}

/* ---------- 8.1c El titulo de seccion ------------------------------------
   Sube en el telefono (24 -> 27) para no quedar por debajo de la bajada
   nueva. En escritorio se queda en 34: entre el titular (50) y la bajada
   (26) esta en su sitio. (Va acotado a max-width porque el 34 de la seccion
   7.2 vive en una media query y una regla suelta posterior le gana.) */
@media (max-width: 1039px) {
    .ficha-titulo,
    .plan-bloque-titulo { font-size: 1.6875rem; }   /* 27 */
}

/* ---------- 8.1d Las cuatro tarjetas de acceso ---------------------------
   Eran el nivel de navegacion de la pantalla y median lo mismo que una fila
   del indice (17 el nombre, 15 la frase). Suben al peldano de titulo de
   tarjeta (21) y al cuerpo del portal (17). Es el tramo que la vara pone en
   28 / 16-17,6 dentro de tarjetas de 270px. */
.ficha-atajos .kctp-categoria strong {
    font-size: var(--paso-5);      /* 21 */
    line-height: 1.2;
    letter-spacing: -.02em;
}
.ficha-atajos .kctp-categoria .kctp-cuenta {
    font-size: var(--paso-4);      /* 17 */
    line-height: 1.42;
    letter-spacing: -.008em;
}
@media (max-width: 619px) {
    /* En una columna, con el icono al lado, el nombre no necesita tanto
       cuerpo y la frase entera cabe igual: 19. */
    .ficha-atajos .kctp-categoria strong { font-size: 1.1875rem; }
}
@media (min-width: 620px) {
    .ficha-atajos .kctp-categoria { min-height: 176px; }
    /* El reserva-lineas del fallback sin subgrid se recalcula sobre el
       tamano nuevo: dos lineas de 21px a 1,2 de interlineado. */
    @supports not (grid-template-rows: subgrid) {
        .ficha-atajos .kctp-categoria {
            grid-template-rows: 44px calc(var(--paso-5) * 2.4) auto;
        }
    }
}

/* ---------- 8.1e Las doce filas del indice -------------------------------
   Etiqueta 15 -> 19 y estado 13 -> 15. Las alturas de linea van en pixeles
   por la misma razon que en la vuelta 2 (el estado es un inline-flex con un
   punto de 6px y su caja mide una pizca mas): con las dos fijas, las doce
   filas caen en la misma linea base exacta. */
.ficha-indice .kctp-categoria strong {
    font-size: 1.1875rem;          /* 19 */
    line-height: 26px;
    letter-spacing: -.017em;
}
.ficha-indice .kctp-categoria .kctp-cuenta {
    font-size: var(--paso-3);      /* 15 */
    line-height: 22px;
    height: 22px;
}
.ficha-indice .kctp-falta { line-height: 22px; }
/* El renglon crece con la letra: 12px de sangria sobre una etiqueta de 19
   dejaba filas de 50px, y la vara no baja de 56-64 en una lista que se toca
   con el dedo. */
.ficha-indice .kctp-categoria { padding: var(--kctp-e4) var(--kctp-e3); }
.ficha-indice .kctp-categoria .kctp-icono {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 1.05rem;
}
@media (max-width: 1039px) {
    /* Ahi el estado va DEBAJO del nombre, asi que la fila ya es alta por si
       misma y no necesita el mismo relleno. */
    .ficha-indice .kctp-categoria strong { font-size: var(--paso-4); }  /* 17 */
    .ficha-indice .kctp-categoria { padding: var(--kctp-e3); }
}

/* ---------- 8.1f Lo que quedaba en 15: avisos, avance y privacidad -------
   Son texto de lectura, no letra chica: el cuerpo del portal es 17. */
.ficha-hoja .kctp-aviso,
.ficha-hoja .kctp-aviso p,
.ficha-avance-texto,
.planes-hoja .kctp-aviso {
    font-size: var(--paso-4);      /* 17 */
    line-height: 1.5;
}
.ficha-hoja .kctp-aviso i { font-size: 1.1rem; line-height: 1.4; }
.ficha-avance .kctp-progreso-texto { font-size: var(--kctp-t-meta); }  /* 13 */
@media (min-width: 1040px) {
    .ficha-avance-texto { max-width: 62ch; }
}

/* ---------- 8.2 El estado de la ficha deja de ser un bloque de color -----
   El aviso de exito del sistema es un rectangulo #e9f5f0 con borde verde. En
   esta pantalla vive arriba a la derecha, al lado del titular, y era lo
   PRIMERO que se veia: un verde de sistema operativo en un esquema
   hueso/vino/oro, con tanto peso visual como el titular. La vara entera cabe
   en cinco colores y no tiene un solo bloque de estado.

   Aqui el estado se cuenta como se cuenta todo lo demas: texto en la tinta
   de la pagina, con el icono —y solo el icono— en el color del estado. No se
   quita ni una palabra, y no queda informacion fiada solo al color: el icono
   tiene forma propia (check / documento) y la frase lo dice completo.

   La excepcion es el aviso accionable ("te faltan autorizaciones"): ese si
   lleva superficie, pero la de la marca (--kctp-panel, el mismo rosa que ya
   usa la rutina dentro de la tarjeta de plan). Asi la jerarquia queda al
   reves de como estaba: tiene fondo lo que hay que hacer, no lo que ya esta
   hecho. Solo dentro de .ficha-estado; el resto de la aplicacion no cambia. */
.ficha-hoja .ficha-estado .kctp-aviso {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--kctp-tinta);
    padding: 0;
    margin-bottom: 0;
    gap: var(--kctp-e3);
    align-items: start;
}
.ficha-hoja .ficha-estado .kctp-aviso + .kctp-aviso,
.ficha-hoja .ficha-estado .kctp-aviso + .kctp-video {
    margin-top: var(--kctp-e5);
    padding-top: var(--kctp-e5);
    border-top: 1px solid var(--kctp-borde);
}
.ficha-hoja .ficha-estado .kctp-aviso-ok i       { color: var(--kctp-ok); }
.ficha-hoja .ficha-estado .kctp-aviso-atencion i { color: var(--kctp-aviso); }
.ficha-hoja .ficha-estado .kctp-aviso-alerta i   { color: var(--kctp-alerta); }
.ficha-hoja .ficha-estado .kctp-aviso a {
    color: var(--kctp-acento);
    text-underline-offset: 3px;
}
/* El unico que conserva superficie es el que pide una accion, y en el rosa
   de marca en vez de en el ambar del sistema. */
.ficha-hoja .ficha-estado .kctp-aviso-atencion {
    background: var(--kctp-panel);
    border-radius: var(--kctp-radio-ch);
    padding: var(--kctp-e4) var(--kctp-e5);
}
.ficha-hoja .ficha-estado .kctp-aviso-atencion + .kctp-aviso {
    margin-top: var(--kctp-e5);
    padding-top: 0;
    border-top: 0;
}

/* El aviso de privacidad del pie de la ficha sigue en el rosa de marca —ese
   si esta en paleta— pero deja de llevar borde: en el lado del paciente
   manda la sombra o nada, nunca la linea de pelo del lado del personal. */
.ficha-privacidad {
    border: 0;
    padding: var(--kctp-e5);
    border-radius: var(--kctp-radio-ch);
}

/* ---------- 8.3 /portal/planes: cerrar el contenedor estirado ------------
   La tarjeta de espera medía 1032x381 con 48px de sangria: dentro, un dibujo
   pequeno, tres lineas y ~500px de blanco entre el chip del codigo y el
   boton. Eso no es aire, es una caja estirada hasta el borde del lienzo.

   El lienzo se abrio a 1080 para el PLAN, que tiene columna de lectura y
   riel y los necesita. Esta pantalla es una sola tarjeta: su medida es la de
   un texto, no la del monitor. A 920px la columna derecha de la tarjeta de
   espera mide 552px —la medida de parrafo de la vara (560)— y la fila de
   estado vuelve a leerse como una fila: codigo y chip a la izquierda, boton
   a la derecha, con ~60px entre medias en vez de 500. */
@media (min-width: 1040px) {
    .planes-espera,
    .planes-lista,
    .kctp-vacio-ilustrado { max-width: 920px; }
    /* El dibujo tambien crece: era el unico elemento grafico de la pantalla
       y median 208px dentro de 1032 de tarjeta. */
    .planes-espera { grid-template-columns: 232px minmax(0, 1fr); }
    .planes-espera-dicho svg { width: 232px; }
    .planes-espera h3        { max-width: 13ch; }
    .planes-espera .kctp-sub { max-width: 44ch; }
}
/* La bajada de la tarjeta de espera hace el mismo papel que la bajada del
   titular de pantalla: sube al mismo tramo. */
.planes-espera .kctp-sub { font-size: var(--paso-4); line-height: 1.5; }
@media (min-width: 1040px) {
    .planes-espera .kctp-sub {
        font-size: 1.375rem;       /* 22 */
        line-height: 1.36;
        letter-spacing: -.017em;
    }
}
/* Y el estado vacio de verdad (sin ninguna consulta) hereda lo mismo. */
.kctp-vacio-ilustrado p { font-size: var(--paso-4); line-height: 1.55; }
@media (min-width: 1040px) {
    .kctp-vacio-ilustrado p {
        font-size: 1.375rem;
        line-height: 1.4;
        letter-spacing: -.017em;
    }
}

/* La tarjeta de un plan aprobado: mismo cierre. Con 920 el panel de la
   rutina mide 776 y el par "paso / cuando" deja de cruzar un campo de
   futbol; el titular del objetivo ya tenia su medida de 440. */
@media (min-width: 1040px) {
    .plan-resumen-titulo {
        font-size: 2.125rem;       /* 34 */
        line-height: 1.08;
        letter-spacing: -.028em;
    }
    .plan-resumen-firma { font-size: var(--paso-4); }
}

/* ---------- 8.4 Ajustes medidos sobre la vuelta 3 ------------------------
   Lo que aparecio al ver la escala nueva puesta, y que no se veia sobre el
   papel. Todo medido en la captura, a 1440 y a 390.

   a) La bajada de la ficha caia en TRES lineas cortas (23ch sobre 26px) y el
      bloque de la bajada resultaba mas alto que el titular al que acompana.
      A 29ch entra en dos y el titular vuelve a mandar.
   b) Las bajadas partian donde tocaba el ancho, no donde tocaba la frase
      ("Lo que un profesional reviso, / corrigio y aprobo para ti"). La vara
      equilibra sus titulares de tres lineas a mano; text-wrap: balance es la
      version automatica y es exactamente para esto.
   c) El titular de la tarjeta de espera se habia quedado en el display
      viejo (28 -> 40) mientras el de la pantalla subia a 36 -> 50. En el
      telefono eso lo dejaba por DEBAJO del titular de pantalla y encima con
      un salto raro; sube un peldano y se mantiene la distancia.
   d) La nota de pie del estado vacio de /portal/categoria lleva .kctp-ayuda:
      es letra de apoyo y se habia colado en el peldano de 22 junto con el
      parrafo de verdad. Se la excluye por nombre.
   e) Sin el bloque verde, el estado de la ficha se pegaba a la bajada del
      titular en el telefono: dos parrafos seguidos sin nada que los separe.
      Donde no hay color, separa la linea de pelo. En escritorio no hace
      falta: ahi el estado ya vive en su propia columna. */

/* a + b */
@media (min-width: 1040px) {
    .ficha-portada .kctp-encabezado p { max-width: 29ch; }
}
.ficha-hoja  .kctp-encabezado p,
.planes-hoja .kctp-encabezado p,
.cat-hoja    .kctp-encabezado p { text-wrap: balance; }

/* c */
.planes-espera h3 {
    font-size: clamp(1.875rem, 1.15rem + 3vw, 2.5rem);   /* 30 -> 40 */
    line-height: 1.04;
    letter-spacing: -.028em;
}

/* d */
.kctp-vacio-ilustrado p.kctp-ayuda {
    font-size: var(--kctp-t-menor);
    line-height: 1.55;
    letter-spacing: normal;
}

/* e */
@media (max-width: 1039px) {
    .ficha-estado {
        margin-top: var(--kctp-e5);
        padding-top: var(--kctp-e5);
        border-top: 1px solid var(--kctp-borde);
    }
}

/* ---------- 8.5 Lo que solo se ve en el telefono -------------------------
   f) text-wrap: balance reparte la bajada en lineas de igual largo, que es
      lo que quiere una columna ancha. En 342px de ancho el resultado eran
      CUATRO renglones cortos ("Al abrir una consulta," terminaba a media
      linea) donde caben tres llenos. Balance solo de tableta para arriba.
   g) El nombre de las cuatro tarjetas de acceso se quedaba en 19 sobre una
      descripcion de 17: un escalon de 1,12 no es un escalon. Medido, a 390
      la caja de texto de la tarjeta mide 250px y "Mis fotos en el tiempo"
      pide 210 a 21px, o sea que entra entera en un renglon. Sube a 21 y el
      par pasa a 21/17, el mismo de escritorio. */
@media (max-width: 699px) {
    .ficha-hoja  .kctp-encabezado p,
    .planes-hoja .kctp-encabezado p,
    .cat-hoja    .kctp-encabezado p { text-wrap: pretty; }
}
@media (max-width: 619px) {
    .ficha-atajos .kctp-categoria strong { font-size: var(--paso-5); }  /* 21 */
}

/* ---------- 8.6 Las dos palancas de la vara, aplicadas al titular --------
   De la lista de "por que se ve caro" de la referencia, las dos primeras son
   interlineado sub-1 en el display y tracking negativo fuerte. Nosotros
   estabamos en 1,02 y -0,034em.

   Ojo con copiarlo a ciegas: la vara es una grotesca sin acentos, y "Tu plan
   todavia se esta preparando" lleva una tilde en la segunda linea justo
   debajo de la "p" de la primera. Por eso se aplica SOLO al titular de
   pantalla —que en las cuatro vistas ocupa una o dos lineas y no tiene ese
   choque— y los titulares de dos y tres lineas de dentro de las tarjetas se
   quedan en 1,04-1,08.

   0,98 sobre 50px deja el bloque 20px mas corto y el titular pesa mas contra
   su bajada, que es exactamente el efecto que se busca. */
@media (min-width: 1040px) {
    .plan-hoja   .kctp-encabezado h1,
    .planes-hoja .kctp-encabezado h1,
    .ficha-hoja  .kctp-encabezado h1,
    .cat-hoja    .kctp-encabezado h1,
    .plan-portada h1 { line-height: .98; letter-spacing: -.038em; }
}

/* ---------- 8.7 El aire entre secciones ----------------------------------
   80px. La referencia corre 120 (Lovi) y 96-128 (Stripe), y la regla comun
   dice ser tacano adentro y generoso afuera: dentro de un bloque seguimos en
   8-24, asi que el de fuera puede subir. 96 es el peldano --kctp-e9, o sea
   que no se inventa un numero. En el telefono se queda en 56: ahi la
   referencia baja a 64 y la pantalla ya es un scroll largo. */
@media (min-width: 700px) {
    .planes-hoja { --plan-aire: 96px; }
    .ficha-hoja  { --plan-aire: 96px; }
}

/* ---------- 8.8 /portal/categoria: la misma linea de salida --------------
   Medido: en /portal/ficha el titular arranca en x=390; al tocar una de las
   doce filas, en /portal/categoria arranca en x=546. Son la misma pantalla
   un clic despues y el titulo salta 156px a la derecha, porque la ficha abre
   el lienzo a 1080 y la categoria se queda en los 720 centrados del portal.
   Un salto asi es lo que hace que dos pantallas se lean como dos productos.

   Se abre el lienzo tambien aqui —para que el titular salga de la misma
   linea— y se le pone tope a lo que hay DEBAJO, que es una lista corta y no
   quiere 1032px de ancho. Es el mismo criterio de 8.3: el lienzo lo fija la
   pantalla, la medida la fija el contenido. */
@media (min-width: 1040px) {
    .kctp-lienzo:has(> .cat-hoja) { max-width: 1080px; }
    body:has(.cat-hoja) > footer.kctp-pie-legal { max-width: 1080px; }
    .cat-hoja .kctp-lista,
    .cat-hoja .kctp-vacio-ilustrado,
    .cat-hoja .kctp-barra-accion,
    .cat-hoja > .kctp-aviso { max-width: 720px; }
}

/* ---------- 8.9 La entrada del expediente, en la escala nueva ------------
   El nombre de una alergia o de un medicamento estaba en 17 con su detalle
   en 15: los dos peldanos de abajo, en una pantalla cuyo titular mide 50.
   Es la misma fila que el indice de la ficha vista de cerca, asi que lleva
   la misma pareja: 21/17 en escritorio y 19/15 en el telefono. */
.cat-hoja .kctp-fila-cuerpo strong {
    font-size: 1.1875rem;          /* 19 */
    line-height: 1.3;
    letter-spacing: -.015em;
}
@media (min-width: 1040px) {
    .cat-hoja .kctp-fila-cuerpo strong { font-size: var(--paso-5); }   /* 21 */
    .cat-hoja .kctp-fila-cuerpo span   { font-size: var(--paso-4); line-height: 1.45; }
    .cat-hoja .kctp-fila { min-height: 84px; }
}

/* ---------- 8.10 El titular del estado vacio -----------------------------
   "Todavia no hay nada aqui" media 28 sobre un cuerpo de 22: un escalon de
   1,27 entre las dos unicas cosas que hay en la tarjeta. Es el titular de esa
   pantalla igual que el de la tarjeta de espera, y va en el mismo tramo
   (30 -> 40), que contra la bajada de 22 da 1,8. */
.cat-hoja    .kctp-vacio-ilustrado h3,
.planes-hoja .kctp-vacio-ilustrado h3 {
    font-size: clamp(1.875rem, 1.15rem + 3vw, 2.5rem);   /* 30 -> 40 */
    line-height: 1.04;
    letter-spacing: -.028em;
    text-wrap: balance;
}

/* ---------- 8.11 El objetivo del plan nunca midio lo que decia -----------
   DEFECTO ENCONTRADO AL MEDIR, no al mirar. El objetivo de /portal/planes
   —la unica frase que la persona reconoce como "su plan"— se pedia en 28 en
   el telefono y 34 en escritorio desde la vuelta 2. Medido en vivo salia en
   21,12 y en 28, con interlineado 1,18 y tracking -0,022em, que son
   exactamente --kctp-lh-titulo y --kctp-ls-titulo.

   El motivo: .plan-resumen-titulo es un <h2> dentro de .kctp-tarjeta, y la
   hoja base trae .kctp-tarjeta h2 (0,1,1) que le gana a una clase sola
   (0,1,0). Las tres declaraciones de la clase se estaban perdiendo enteras
   sin que nada avisara. Se repiten aqui con el nombre de la etiqueta
   delante, que iguala la especificidad y, al ir despues, gana.

   (Es la misma trampa que el archivo ya avisaba para los style= en linea:
   si algo se ve fuera del sistema, mira primero quien le esta ganando.) */
h2.plan-resumen-titulo {
    font-size: var(--paso-6);      /* 28 en telefono */
    line-height: 1.12;
    letter-spacing: -.026em;
}
@media (min-width: 1040px) {
    h2.plan-resumen-titulo {
        font-size: 2.125rem;       /* 34 */
        line-height: 1.06;
        letter-spacing: -.03em;
        max-width: 28ch;
    }
}

/* ---------- 8.12 El hueco de la tarjeta de espera ------------------------
   El dibujo va centrado contra las tres filas de la derecha (titular, bajada
   y las consultas en camino). Con DOS consultas la columna derecha mide 552
   y el dibujo 232: quedaban 160px de blanco encima y otros tantos debajo, a
   la izquierda, que es el mismo hueco que estamos quitando en el resto de la
   pantalla, solo que dentro de la tarjeta.

   Centrado sigue siendo lo correcto —top-aligned deja el hueco abajo, y con
   una sola consulta queda peor—, asi que lo que se acorta es la columna:
   48 -> 32 del cuerpo a las consultas, y la sangria vertical de la tarjeta
   baja un peldano. Son ~50px menos de hueco sin mover nada de sitio. */
@media (min-width: 1040px) {
    .planes-espera { padding: var(--kctp-e6) var(--kctp-e7); }
    .planes-espera-lista { margin-top: var(--kctp-e6); }
}