/* Página de presentación de SOFTIA. Los colores, tipografías y estados siguen DESIGN.md; lo propio de esta página
   es el valle: la maqueta en 3D llena la portada, y un velo claro a la izquierda sostiene la tarjeta de cada punto.
   Una sola rejilla para toda la página (barra, capítulos, hoja y pie): el contenedor de 1280 px centrado con margen
   de 72 y doce columnas con canal de 24. Nueve tamaños de letra, uno por rol de DESIGN.md: rótulo 13, apoyo 14,
   lista 15, cuerpo 17, título de tarjeta 20, logotipo 22, cifra 30, titular de sección 48 y titular de portada 56. */
/* Bricolage Grotesque (titulares, con tamaño óptico) y Figtree (texto), variables, en latin y latin-ext (SIL Open Font
   License, ver los LICENSE de assets/fonts). El navegador baja solo el tramo de caracteres que la página usa. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fonts/bricolage-grotesque-latin-opsz-normal.woff2") format("woff2-variations"), url("fonts/bricolage-grotesque-latin-opsz-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fonts/bricolage-grotesque-latin-ext-opsz-normal.woff2") format("woff2-variations"), url("fonts/bricolage-grotesque-latin-ext-opsz-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("fonts/figtree-latin-wght-normal.woff2") format("woff2-variations"), url("fonts/figtree-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("fonts/figtree-latin-ext-wght-normal.woff2") format("woff2-variations"), url("fonts/figtree-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Registrada como longitud para que la escena la lea ya calculada en píxeles con getComputedStyle: es el borde
   derecho de la tarjeta de los puntos del valle (margen real + 32 rem). */
@property --columna-texto { syntax: "<length>"; inherits: true; initial-value: 584px; }
/* Largo extra del pie de un marcador y corrimiento lateral de su píldora (valle.js): registradas para que cambien con
   transición cuando dos marcadores se reacomodan. */
@property --pie { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --dx { syntax: "<length>"; inherits: true; initial-value: 0px; }

:root {
    --color-primario: #1F365C;
    --color-primario-profundo: #14253F;
    --color-primario-suave: #DCE6F5;
    --color-acento: #F2B01E;
    --color-sobre-acento: #2A1E00;
    --color-enlace: #0B5CAD;
    --color-fondo: #F7F8FB;
    --color-superficie: #FFFFFF;
    --color-superficie-2: #EEF1F7;
    --color-texto: #1A1C22;
    --color-texto-2: #4A5162;
    --color-borde: #C5CBD6;
    --color-borde-campo: #6B7385;
    --color-acento-suave: #FFF1CC;
    --color-sobre-acento-suave: #5C4300;
    --estado-error: #8C1D18;
    --estado-error-fondo: #FBE4E2;
    --estado-exito: #0F5C35;
    --estado-exito-fondo: #DDF3E6;
    --estado-advertencia: #6B4000;
    --estado-advertencia-fondo: #FFEFD1;
    --estado-info: #0A4A8C;
    --estado-info-fondo: #DCEBFA;
    /* Capas de estado de DESIGN.md: tinta del texto al 8 % al pasar el cursor y al 10 % al presionar. */
    --capa-hover: rgba(26, 28, 34, 0.08);
    --capa-presion: rgba(26, 28, 34, 0.10);
    /* Blanco con alfa para las píldoras que flotan sobre la maqueta (menú, accesos, «Ver más»). */
    --superficie-velada: rgba(255, 255, 255, 0.6);
    --superficie-velada-alta: rgba(255, 255, 255, 0.85);

    /* Un solo color plano detrás de la maqueta: la niebla de la escena se funde con él. El crema es la referencia
       del diorama y vive solo dentro de .valle (su fondo y el velo de la tarjeta); el cuerpo, la barra y la hoja usan
       el fondo de DESIGN.md. --velo es el mismo color en canales, para los degradados: las dos variables cambian
       juntas. */
    --escena-cielo: #F6F2EA;
    --velo: 246, 242, 234;

    /* La rejilla: contenido máximo, margen lateral (DESIGN.md: 72 en computador, 16 en celular), un solo canal y el
       ancho de una columna de doce. --margen-real es el margen efectivo cuando la ventana supera 1280 + 2 × 72 y el
       contenedor se centra; --columna-texto cuelga de él para que el velo y la cámara sigan al texto. */
    --ancho: 1280px;
    --margen: 72px;
    --canal: 24px;
    --columna: calc((min(var(--ancho), 100% - 2 * var(--margen)) - 11 * var(--canal)) / 12);
    --margen-real: max(var(--margen), calc((100vw - var(--ancho)) / 2));
    --columna-texto: calc(var(--margen-real) + 32rem);
    --seccion: 72px;
    --barra-alto: 76px;

    --fuente-titulo: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
    --fuente: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Los nueve tamaños, uno por rol. El titular de sección parte del piso de 48 de DESIGN.md y crece con la ventana. */
    --tam-pequeno: 13px;
    --tam-apoyo: 14px;
    --tam-lista: 15px;
    --tam-cuerpo: 17px;
    --tam-tarjeta: 20px;
    --tam-medio: 22px;
    --tam-cifra: 30px;
    --tam-titulo: clamp(2.25rem, 2.8vw, 2.75rem);
    --tam-portada: clamp(3rem, 3.9vw, 3.5rem);

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
    --t-press: 140ms;
    --t-hover: 180ms;
    --t-ui: 240ms;
}

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

html { scroll-padding-top: var(--barra-alto); }
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}
html.menu-abierto { overflow: hidden; }

body {
    margin: 0;
    background: var(--color-fondo);
    color: var(--color-texto);
    font: 400 var(--tam-cuerpo)/1.5 var(--fuente);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol { margin: 0; }
h1, h2 { font-family: var(--fuente-titulo); font-weight: 700; line-height: 1.1; color: var(--color-primario-profundo); text-wrap: balance; hyphens: none; }
h1 { font-size: var(--tam-portada); letter-spacing: -0.01em; }
h2 { font-size: var(--tam-titulo); }
h3 { font-size: var(--tam-medio); line-height: 1.3; color: var(--color-primario-profundo); }
p { text-wrap: pretty; }
a { color: var(--color-enlace); }
/* El anillo de foco sigue el radio de cada elemento; no se le impone uno propio. */
:focus-visible { outline: 3px solid var(--color-enlace); outline-offset: 2px; }
::selection { background: var(--color-acento); color: var(--color-sobre-acento); }

.saltar {
    position: absolute; left: 16px; top: -100px; z-index: 50;
    padding: 12px 16px; border-radius: 8px; background: var(--color-superficie); font-weight: 600;
}
.saltar:focus { top: 16px; }
/* El sprite de íconos no ocupa sitio: el atributo hidden no basta en un svg en línea. */
.iconos { display: none; }

/* ---- La rejilla ---- */

/* El contenedor único: lo usan la barra, cada capítulo, cada sección de la hoja y el pie, de modo que la marca, el
   h1, los h2 y las columnas del pie caen sobre la misma vertical en cualquier ancho. */
.contenedor, .seccion__interior { width: min(var(--ancho), 100% - 2 * var(--margen)); margin-inline: auto; }
.rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--canal); }

/* ---- Botones y enlaces de acción ---- */

/* Píldora plana, decidida una vez para toda la página; la capa ::after da el estado al pasar y al presionar. */
.boton {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 0 24px; border-radius: 999px; border: 0;
    font: 600 var(--tam-cuerpo)/1 var(--fuente); text-decoration: none; cursor: pointer; white-space: nowrap;
    position: relative; isolation: isolate;
    transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease;
}
.boton::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0; transition: opacity var(--t-hover) ease; z-index: -1; }
.boton:active { transform: scale(0.97); }
.boton:active::after { opacity: 0.1; }
@media (hover: hover) and (pointer: fine) {
    .boton:hover::after { opacity: 0.08; }
}
.boton--acento { background: var(--color-acento); color: var(--color-sobre-acento); }
.boton--primario { background: var(--color-primario); color: var(--color-superficie); }
.boton--primario:focus-visible { outline-color: var(--color-acento); }
/* La acción secundaria de DESIGN.md: delineada con el color de borde de campo, sin relleno. */
.boton--delineado { background: transparent; color: var(--color-primario); box-shadow: inset 0 0 0 1px var(--color-borde-campo); }

/* Indicador de carga dentro del botón: el texto se queda y el ancho no cambia. */
.boton[aria-busy="true"] { cursor: progress; }
.boton[aria-busy="true"]::before {
    content: ""; width: 16px; height: 16px; border-radius: 50%; flex: none;
    border: 2px solid currentColor; border-right-color: transparent; animation: gira 700ms linear infinite;
}
@keyframes gira { to { transform: rotate(1turn); } }

/* Enlace dentro del flujo con zona sensible de 48; el relleno lateral se compensa para que el texto quede en el eje. */
.enlace-texto {
    display: inline-flex; align-items: center; min-height: 48px; padding: 0 4px; margin-inline: -4px;
    font-weight: 600; color: var(--color-enlace); text-decoration: underline;
    text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; text-decoration-color: rgba(11, 92, 173, 0.4);
    transition: text-decoration-color var(--t-hover) ease, opacity var(--t-press) ease;
}
.enlace-texto:hover { text-decoration-color: currentColor; }
.enlace-texto:active { opacity: 0.8; }

/* ---- Barra superior ---- */

/* La barra siempre lleva una capa: sobre el valle, un velo translúcido del fondo de la página con desenfoque, para que
   ningún tejado ni letrero de la maqueta cruce detrás de la marca o del botón; sobre la hoja, la capa ::before se vuelve
   blanca con una transición de opacidad. El desenfoque no se quita al volverse sólida: quitarlo de golpe mientras el
   blanco aún entra dejaría ver un cuadro sin velo (parpadeo). La única acción de la barra va delineada: el dorado de
   «Agendar demostración» es el de la portada y el del formulario. */
.barra {
    position: fixed; inset: 0 0 auto; z-index: 20; height: var(--barra-alto); isolation: isolate;
    background: linear-gradient(color-mix(in srgb, var(--color-fondo) 92%, transparent), color-mix(in srgb, var(--color-fondo) 72%, transparent));
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.barra::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-superficie); opacity: 0; transition: opacity var(--t-ui) ease; }
.barra[data-solida="true"]::before { opacity: 1; }
/* Tres columnas simétricas: el menú queda centrado en la ventana sea cual sea el ancho de la marca y del botón. */
.barra__interior { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.marca { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--color-primario-profundo); min-height: 48px; justify-self: start; }
/* El logo es el archivo dibujado (DESIGN.md · Logo), nunca texto: horizontal de 40 px de alto en la barra y el menú,
   negativo de 48 en el pie. Su área de respeto la da el margen del enlace. */
.marca__logo { display: block; height: 40px; width: auto; }
.marca--pie .marca__logo { height: 48px; }
.barra__derecha { display: flex; align-items: center; gap: 8px; justify-self: end; }
.barra__accion-corta { display: none; }

/* El menú de píldoras del video, con las secciones de la hoja: la activa se rellena en claro, el botón de la derecha es
   la única acción oscura. Relleno de 12 por píldora: el grupo mide unos 640 px y en 1366 queda a más de 32 del botón. */
.barra__menu { display: grid; padding: 4px; border-radius: 999px; background: var(--superficie-velada); }
.barra__grupo { display: flex; gap: 4px; }
/* Cuando el visitante ya está en el formulario, el botón de la barra lo dice con un filete dorado. */
.barra__accion[aria-current="true"] { box-shadow: inset 0 0 0 2px var(--color-acento); }
.barra__menu a {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 999px;
    font: 500 var(--tam-pequeno)/1 var(--fuente); color: var(--color-texto); text-decoration: none;
    transition: background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.barra__menu a:hover { background: var(--capa-hover); }
.barra__menu a:active { background: var(--capa-presion); }
.barra__menu a[aria-current="true"] { background: var(--color-primario-suave); color: var(--color-primario); }

.barra__menu-boton {
    display: none; align-items: center; min-height: 48px; padding: 0 16px; border: 0; border-radius: 999px;
    background: var(--superficie-velada-alta); color: var(--color-primario); font: 600 var(--tam-cuerpo)/1 var(--fuente); cursor: pointer;
}
.barra__menu-boton:hover, .barra__menu-boton[aria-expanded="true"] { background: var(--color-primario-suave); }

/* El panel de navegación de tableta y celular: se abre desde la esquina del botón que lo llamó. */
.menu-movil {
    position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; gap: 24px;
    padding: 8px var(--margen) 24px; overflow: auto;
    background: var(--color-superficie); transform-origin: top right;
    transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out);
}
.menu-movil[hidden] { display: none; }
.js .menu-movil:not(.menu-movil--abierto) { opacity: 0; transform: scale(0.97) translateY(-6px); pointer-events: none; }
.menu-movil__cabeza { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
.menu-movil__cerrar {
    min-height: 48px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--color-superficie-2);
    color: var(--color-primario); font: 600 var(--tam-cuerpo)/1 var(--fuente); cursor: pointer;
}
.menu-movil__cerrar:hover { background: var(--color-primario-suave); }
.menu-movil__lista { list-style: none; padding: 0; display: grid; }
.menu-movil__lista a {
    display: flex; align-items: center; min-height: 56px; padding: 0 8px; border-radius: 12px;
    font: 500 var(--tam-medio)/1.3 var(--fuente); color: var(--color-primario-profundo); text-decoration: none;
}
.menu-movil__lista a:hover { background: var(--color-superficie-2); }
.menu-movil__lista a:active { background: var(--capa-presion); }
.menu-movil__accion { margin-top: auto; }

/* ---- El valle ---- */

/* La portada es el valle a pantalla completa (100 svh). Capas, de abajo arriba: la escena (lienzo y velo), los
   marcadores, las burbujas, la capa de portada (frase, acciones, accesos y «Ver más») y la tarjeta. La capa de portada
   no recibe eventos salvo en sus controles: arrastrar sobre el aire de la portada mueve la maqueta. */
main { position: relative; z-index: 1; }
.valle { position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; isolation: isolate; background: var(--escena-cielo); }

.escena { position: absolute; inset: 0; z-index: 0; }
/* El velo de lectura es un scrim funcional que solo existe con una tarjeta abierta y solo detrás de ella: firme bajo
   la columna de la tarjeta (la misma variable que lee la cámara) y apagado del todo 40 px después de su borde, así
   la institución que queda a la derecha se ve limpia y con su color real. La niebla del horizonte es de la escena y
   no depende de él. */
.escena::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 400ms ease;
    background: linear-gradient(90deg,
        rgba(var(--velo), 0.9) 0,
        rgba(var(--velo), 0.82) calc(var(--columna-texto) - 64px),
        rgba(var(--velo), 0.45) var(--columna-texto),
        rgba(var(--velo), 0) calc(var(--columna-texto) + 40px));
}
.valle[data-tarjeta="abierta"] .escena::after { opacity: 1; }
.escena[data-oculta="true"] { visibility: hidden; }
/* Un dedo desplaza la página (pan-y); dos dedos, el arrastre del ratón y la rueda los maneja la cámara. */
.escena__lienzo {
    position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 600ms ease;
    touch-action: pan-y; cursor: grab;
}
.escena__lienzo[data-lista="true"] { opacity: 1; }
.escena__lienzo[data-arrastrando="true"] { cursor: grabbing; }
.escena__lienzo:focus-visible { outline: 3px solid var(--color-enlace); outline-offset: -6px; }
.escena__burbujas { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }

/* La burbuja flota sobre la maqueta: es, con los marcadores, lo único de la página con sombra. Entra y sale sin rebote. */
.burbuja {
    position: absolute; left: 0; top: 0; max-width: 240px; padding: 8px 12px; border-radius: 16px;
    background: var(--color-superficie); color: var(--color-texto); box-shadow: 0 6px 20px rgba(20, 37, 63, 0.16);
    font: 500 var(--tam-pequeno)/1.3 var(--fuente); text-align: center; white-space: normal;
    transform-origin: 50% 100%; animation: burbuja-entra 220ms var(--ease-out) both;
}
.burbuja::after {
    content: ""; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; margin-left: -7px;
    background: inherit; transform: rotate(45deg); border-radius: 0 0 3px 0;
}
.burbuja[data-saliendo="true"] { animation: burbuja-sale 160ms var(--ease-out) both; }
@keyframes burbuja-entra { from { opacity: 0; scale: 0.96; translate: 0 6px; } }
@keyframes burbuja-sale { to { opacity: 0; scale: 0.96; } }

/* Capa de portada, sobre la rejilla de la página: la frase, la propuesta de valor y las acciones abajo a la izquierda
   y, al pie, los accesos y «Ver más». Con una tarjeta abierta la frase y las acciones se apartan; los accesos se
   quedan. */
.valle__capa {
    position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; justify-content: flex-end;
    padding-bottom: 24px; pointer-events: none;
}
/* El bloque de texto lleva detrás un velo translúcido (el blanco al 60 % de las píldoras de la barra) con un desenfoque
   leve: el titular se lee igual cuando la isla le queda debajo y la isla se sigue viendo a través. El margen negativo
   iguala el relleno: el texto sigue sobre la vertical de la rejilla y el velo sobresale hacia el margen. Los
   marcadores del valle evitan esta caja (valle.js la cuenta como zona prohibida), así que su alto decide cuántos
   caben: en ventanas bajas se compacta (ver la regla de max-height: 760px). */
.valle__portada {
    display: grid; gap: 16px; justify-items: start; width: fit-content; max-width: 36rem; margin: 0 0 24px -28px; padding: 24px 28px 28px;
    border-radius: 28px; background: var(--superficie-velada);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    pointer-events: auto; transition: opacity var(--t-ui) ease, visibility 0s;
}
.valle__portada h1 { font-size: var(--tam-portada); }
/* La propuesta de valor, en el tamaño de cuerpo: qué es y para quién, antes de las acciones. */
.valle__propuesta { max-width: 32rem; font-size: var(--tam-cuerpo); line-height: 1.5; color: var(--color-texto); }
.valle__portada .acciones { margin-top: 0; }
.valle__portada .boton svg { width: 18px; height: 18px; fill: currentColor; }
.valle[data-tarjeta="abierta"] .valle__portada { opacity: 0; visibility: hidden; transition: opacity var(--t-ui) ease, visibility 0s var(--t-ui); }

.valle__pie { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.accesos, .valle__mas { pointer-events: auto; background: var(--superficie-velada-alta); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(197, 203, 214, 0.7); }
.accesos { padding: 4px; border-radius: 999px; }
.accesos__lista { list-style: none; display: flex; gap: 4px; padding: 0; margin: 0; }
/* Los accesos nombran tipos de institución; la rectoría es un lugar dentro del colegio, y va aparte, tras un filete. */
.accesos__aparte { display: flex; align-items: center; padding-left: 4px; border-left: 1px solid var(--color-borde); }
.acceso {
    display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px 0 12px; border-radius: 999px;
    font: 500 var(--tam-lista)/1 var(--fuente); color: var(--color-texto); text-decoration: none; white-space: nowrap;
    transition: background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.acceso svg, .valle__mas svg, .parada__lugar svg, .punto__pildora svg { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.acceso svg { width: 20px; height: 20px; color: var(--color-primario); }
.acceso:hover { background: var(--capa-hover); }
.acceso:active { background: var(--capa-presion); }
.acceso[aria-current="true"] { background: var(--color-primario-suave); color: var(--color-primario); font-weight: 600; }
.valle__mas {
    display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px 0 20px; border-radius: 999px;
    font: 600 var(--tam-lista)/1 var(--fuente); color: var(--color-primario); text-decoration: none;
}
.valle__mas svg { width: 20px; height: 20px; }
.valle__mas:hover { background: var(--color-primario-suave); }

/* Marcadores: una píldora con ícono y nombre sobre un pie que baja hasta el lugar. La escena les da su posición con
   «translate» (el ancla queda en la punta del pie) y, si dos se estorban, alarga el pie (--pie) o corre la píldora de
   lado sobre él (--dx); se apagan cuando quedan detrás de la cámara, tapados, fuera del lienzo, bajo la tarjeta o
   sin sitio libre. La zona sensible mide 48 px de alto con el pie. */
.puntos { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.punto {
    position: absolute; left: 0; top: 0; translate: -999px -999px; transform: translate(-50%, -100%);
    display: flex; flex-direction: column; align-items: center; min-width: 48px; padding: 0; border: 0; background: none;
    font: inherit; cursor: pointer; pointer-events: auto; transition: opacity var(--t-ui) ease, visibility 0s, --pie 220ms ease, --dx 220ms ease;
}
.punto::after { content: ""; width: 2px; height: calc(14px + var(--pie, 0px)); background: var(--color-primario); border-radius: 0 0 2px 2px; }
.punto__pildora { translate: var(--dx, 0px) 0; }
.punto__pildora {
    display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px 0 10px; border-radius: 999px;
    background: var(--color-superficie); color: var(--color-primario-profundo); font: 600 var(--tam-pequeno)/1 var(--fuente); white-space: nowrap;
    box-shadow: inset 0 0 0 1px var(--color-borde), 0 4px 14px rgba(20, 37, 63, 0.14);
    transition: background-color var(--t-hover) ease, color var(--t-hover) ease, scale var(--t-press) var(--ease-out);
}
.punto__pildora svg { width: 16px; height: 16px; color: var(--color-primario); }
.punto:hover .punto__pildora { background: var(--color-primario-suave); }
.punto:active .punto__pildora { scale: 0.97; }
.punto:focus-visible { outline: none; }
.punto:focus-visible .punto__pildora { outline: 3px solid var(--color-enlace); outline-offset: 2px; }
.punto[aria-current="true"] .punto__pildora { background: var(--color-primario); color: var(--color-superficie); box-shadow: 0 4px 14px rgba(20, 37, 63, 0.2); }
.punto[aria-current="true"] .punto__pildora svg { color: var(--color-acento); }
.punto[aria-current="true"]:focus-visible .punto__pildora { outline-color: var(--color-acento); }
.punto[data-oculto="true"] { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--t-ui) ease, visibility 0s var(--t-ui), --pie 220ms ease, --dx 220ms ease; }

/* La tarjeta del punto: superficie blanca con borde (DESIGN.md), a la izquierda sobre la columna del velo y bajo la
   barra; si el contenido no cabe (657 px de alto), la tarjeta se desplaza por dentro y los controles quedan fijos. */
.paradas {
    position: absolute; z-index: 5; left: var(--margen-real); top: calc(var(--barra-alto) + 24px);
    width: min(32rem, 100% - 2 * var(--margen)); max-height: calc(100% - var(--barra-alto) - 24px - 104px);
    display: flex; flex-direction: column; gap: 16px; padding: 28px 32px 20px; overflow: hidden;
    border-radius: 28px; background: var(--color-superficie); border: 1px solid var(--color-borde);
    animation: paradas-entra var(--t-ui) var(--ease-out) both; transition: opacity 200ms ease;
}
.paradas[hidden], .parada[hidden] { display: none; }
.paradas[data-saliendo="true"] { opacity: 0; pointer-events: none; }
@keyframes paradas-entra { from { opacity: 0; translate: -12px 0; } }
.paradas__avance {
    position: absolute; inset: 0 0 auto; height: 4px; background: var(--color-acento); transform-origin: 0 50%;
    transform: scaleX(var(--avance, 0)); opacity: 0; transition: opacity var(--t-ui) ease;
}
.paradas[data-recorrido="activo"] .paradas__avance, .paradas[data-recorrido="pausado"] .paradas__avance { opacity: 1; }
.paradas__cerrar {
    position: absolute; top: 12px; right: 12px; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px;
    border: 0; border-radius: 50%; background: transparent; color: var(--color-texto-2); cursor: pointer;
    transition: background-color var(--t-hover) ease;
}
.paradas__cerrar svg, .paradas__boton svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.paradas__cerrar:hover { background: var(--capa-hover); }
.paradas__cerrar:active { background: var(--capa-presion); }

.parada { display: grid; gap: 12px; align-content: start; min-height: 0; overflow-y: auto; overscroll-behavior: contain; animation: parada-cambia var(--t-ui) ease both; }
/* La tarjeta recibe el foco por programa (tabindex −1) para que el lector de pantalla la anuncie; no es un control,
   así que no lleva anillo: el foco visible queda para sus enlaces y botones. */
.parada:focus, .parada:focus-visible { outline: none; }
@keyframes parada-cambia { from { opacity: 0; } }
.parada__lugar { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; padding-right: 48px; font: 500 var(--tam-apoyo)/1.3 var(--fuente); color: var(--color-texto-2); }
.parada__lugar svg { width: 18px; height: 18px; color: var(--color-primario); }
.parada h2 { font-size: clamp(2rem, 2.6vw, 2.5rem); color: var(--color-primario-profundo); }
.parada .etiquetas { margin: 0; }
.parada__enlace { justify-self: start; gap: 8px; }
.parada__enlace svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Controles del recorrido: ‹ y › delineados, el del centro (pausa, seguir o recorrer) en primario, y «n / 6». */
.paradas__controles { display: flex; align-items: center; gap: 8px; padding-top: 16px; border-top: 1px solid var(--color-borde); }
.paradas__boton {
    display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; cursor: pointer;
    background: transparent; color: var(--color-primario); box-shadow: inset 0 0 0 1px var(--color-borde-campo);
    transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.paradas__boton:hover { background: var(--capa-hover); }
.paradas__boton:active { background: var(--capa-presion); transform: scale(0.96); }
.paradas__boton--pausa { background: var(--color-primario); color: var(--color-superficie); box-shadow: none; }
.paradas__boton--pausa:hover { box-shadow: inset 0 0 0 48px rgba(255, 255, 255, 0.1); }
.paradas__boton--pausa:focus-visible { outline-color: var(--color-acento); }
.paradas__boton--pausa svg { fill: currentColor; stroke: none; width: 18px; height: 18px; }
.paradas__boton--pausa .si-pausar, .paradas__boton--pausa[data-estado="pausar"] .si-seguir { display: none; }
.paradas__boton--pausa[data-estado="pausar"] .si-pausar { display: block; }
.paradas__contador { margin-left: 8px; font: 500 var(--tam-apoyo)/1 var(--fuente); font-variant-numeric: tabular-nums; color: var(--color-texto-2); }
.paradas__contador b { font-weight: 600; color: var(--color-texto); }

/* En ventanas bajas (1366 × 657) la tarjeta se compacta para que el texto más largo quepa sin desplazarse por dentro. */
@media (min-width: 901px) and (max-height: 760px) {
    /* La portada baja y se aprieta: titular de 44, propuesta pegada a él, menos relleno y menos aire sobre los accesos.
       Así su borde de arriba queda por debajo de los marcadores del centro de la isla a 1366 × 657. */
    .valle__capa { padding-bottom: 16px; }
    .valle__portada { gap: 8px; margin-bottom: 12px; padding: 12px 24px 20px; margin-left: -24px; border-radius: 16px; }
    .valle__portada h1 { font-size: 2.75rem; }
    .valle__portada .acciones { margin-top: 8px; }
    .paradas { padding: 20px 28px 16px; gap: 12px; }
    .parada { gap: 8px; }
    .parada h2 { font-size: 1.75rem; }
    .parada__resumen { font-size: var(--tam-lista); line-height: 1.45; }
    .parada__enlace { min-height: 40px; }
    .paradas__controles { padding-top: 12px; }
}

.rotulo { font: 600 var(--tam-pequeno)/1 var(--fuente); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primario); }

.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 8px; }
/* Las etiquetas son rótulos, no botones: sin borde ni blanco de superficie, en texto secundario y 28 px de alto. */
.etiquetas { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 8px 0 0; }
.etiquetas li {
    display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px;
    background: var(--color-superficie-2); font: 500 var(--tam-pequeno)/1 var(--fuente); color: var(--color-texto-2);
}

/* ---- La hoja: lo que sigue al valle ---- */

/* Cada sección es un campo a todo el ancho de la ventana con el contenedor dentro. Las secciones planas se separan
   96 px entre sí (48 + 48); las bandas de color llevan 72 de relleno y 24 de margen, de modo que del contenido de
   una sección al borde de la banda hay 72 y del borde al contenido de la banda otros 72. */
/* overflow-x: clip (no hidden) recorta lo que asome por los lados, como un globo de ayuda en reposo, sin crear un
   contenedor de desplazamiento: las cabezas pegajosas siguen funcionando y la página no gana scroll horizontal. */
.hoja { position: relative; overflow-x: clip; pointer-events: auto; background: var(--color-fondo); border-radius: 28px 28px 0 0; }
.seccion { padding-block: 48px; }
.hoja .seccion:first-child { padding-top: 96px; }
.seccion--banda { padding-block: var(--seccion); margin-block: 24px; }
.seccion--banda:last-child { margin-bottom: 0; }
/* Dos bandas seguidas se tocan: entre ellas no queda una franja del fondo. */
.seccion--banda + .seccion--banda { margin-top: 0; }
/* En la hoja los títulos de sección van en primario (DESIGN.md: «títulos»); las bandas oscuras los pasan a blanco. */
.hoja h2 { color: var(--color-primario); }
.seccion__cabeza { display: grid; gap: 16px; margin-bottom: 40px; }
.seccion__cabeza h2 { max-width: 22ch; }
.seccion__cabeza p { max-width: 54ch; }
/* El rótulo de sección usa las mismas palabras que el menú y el pie, para que el lector se oriente sin leer el título. */
.seccion__cabeza .rotulo { margin-bottom: -4px; }
.seccion__accion { justify-self: start; }
/* El puente: una línea al cierre de la sección que anuncia la siguiente y la enlaza con el mismo verbo («Ver…»). */
.seccion__puente { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 40px; color: var(--color-texto-2); }
.seccion__puente .enlace-texto { font-size: var(--tam-cuerpo); }

/* ---- Las áreas del sistema, siempre del mismo color: en el ícono de su tarjeta, en su pestaña del producto y en su fila
   de la comparación. Los pares fondo/tinta son los estados de DESIGN.md; rectoría va en primario con ícono blanco (la que
   ve todo) y el sitio público en superficie-2 (la puerta abierta). ---- */
[data-area="familias"] { --area-fondo: var(--estado-info-fondo); --area-tinta: var(--estado-info); }
[data-area="academico"] { --area-fondo: var(--estado-exito-fondo); --area-tinta: var(--estado-exito); }
[data-area="financiero"] { --area-fondo: var(--color-acento-suave); --area-tinta: var(--color-sobre-acento-suave); }
[data-area="oficina"] { --area-fondo: var(--color-primario-suave); --area-tinta: var(--color-primario); }
[data-area="direccion"] { --area-fondo: var(--color-primario); --area-tinta: var(--color-superficie); }
[data-area="publico"] { --area-fondo: var(--color-superficie-2); --area-tinta: var(--color-primario); }
.icono[data-area] { background: var(--area-fondo); color: var(--area-tinta); }
.icono[data-area="publico"] { box-shadow: inset 0 0 0 1px var(--color-borde); }
/* La versión de 28 px acompaña a una línea de texto (pestañas y filas de tabla). */
.icono.icono--mini { width: 28px; height: 28px; border-radius: 6px; }
.icono--mini svg { width: 16px; height: 16px; }

/* En la maqueta P1 (copiada en el HTML), la tarjeta de pago parte sus filas si la fuente del navegador es más ancha, en vez de
   montar el valor sobre el botón «Pagar». */
.producto--p01 .p-pago .p-fila--entre { flex-wrap: wrap; gap: 8px 12px; }

/* ---- Sellos y semáforo de plazos (DESIGN.md): píldora de 28 con color, palabra y, en los plazos, ícono. ---- */
.sello, .estado {
    display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border-radius: 999px;
    font: 600 var(--tam-pequeno)/1 var(--fuente); white-space: nowrap;
}
.sello svg, .estado svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sello--borrador { background: var(--color-superficie-2); color: var(--color-texto-2); }
.sello--publicado, .estado--exito { background: var(--estado-exito-fondo); color: var(--estado-exito); }
.sello--cerrado { background: var(--color-primario-suave); color: var(--color-primario); }
.estado--advertencia { background: var(--estado-advertencia-fondo); color: var(--estado-advertencia); }
.estado--error { background: var(--estado-error-fondo); color: var(--estado-error); }
.sellos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; padding: 0; }
/* La frase que presenta los sellos ocupa su propia línea; las píldoras van debajo, juntas. */
.sellos__que { flex-basis: 100%; font-size: var(--tam-lista); line-height: 1.5; color: var(--color-texto-2); }

/* ---- En una frase: la propuesta de valor en tres hechos, en una tarjeta azul suave al abrir la hoja. El texto va en las
   columnas 1 a 4 y las tres cifras, en tarjetas blancas, en las 5 a 12. ---- */
.sintesis { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--canal); align-items: center; padding: 32px; border-radius: 16px; background: var(--color-primario-suave); }
.sintesis__texto { grid-column: 1 / 5; display: grid; gap: 12px; }
.sintesis h2.sintesis__frase { font: 600 var(--tam-tarjeta)/1.4 var(--fuente); color: var(--color-primario-profundo); max-width: 24ch; text-wrap: pretty; }
.sintesis__cifras { grid-column: 5 / -1; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--canal); }
.sintesis .cifra { border: 0; }
.sintesis .cifra__valor { color: var(--color-primario); }
/* Variante de cabeza al lado: el título ocupa las columnas 1 a 4 y el contenido de la 5 a la 12. La cabeza se pega
   bajo la barra mientras pasan las tarjetas; el margen negativo compensa el aire interno de la Bricolage Grotesque para que el ojo
   del título quede a la altura del borde de la primera tarjeta. */
.seccion__interior--lado { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--canal); align-items: start; }
.seccion__interior--lado .seccion__cabeza { grid-column: 1 / 5; margin-top: -8px; margin-bottom: 0; position: sticky; top: calc(var(--barra-alto) + 32px); }
.seccion__interior--lado .tarjetas, .seccion__interior--lado .modulos__panel, .seccion__interior--lado .seccion__puente { grid-column: 5 / -1; }
.modulos__panel .seccion__puente { margin-top: 24px; }
/* Qué incluye va en banda superficie-2 para que las tarjetas blancas de las áreas se recorten; la cabeza lleva las tres
   cifras del alcance (módulos, base de datos, costo por módulo) en Figtree 700 de 30. */
.seccion--modulos { background: var(--color-superficie-2); }
.modulos__cifras { list-style: none; padding: 0; display: grid; gap: 16px; margin-top: 8px; }
.modulos__cifras li { display: grid; gap: 2px; }
.modulos__cifras strong { font: 700 var(--tam-medio)/1.2 var(--fuente); font-variant-numeric: tabular-nums; color: var(--color-primario); }
.modulos__cifras span { font-size: var(--tam-lista); line-height: 1.5; color: var(--color-texto-2); }

/* Un solo tamaño para todo título de tarjeta, tile, paso, plan y compromiso: Figtree 700 de 20 px. */
.tarjeta h3, .tile h3, .paso h3, .compromiso h3, .plan h3 { font: 700 var(--tam-tarjeta)/1.3 var(--fuente); color: var(--color-primario-profundo); }

/* Ícono de línea en su cuadro azul suave de 40 px, como las tarjetas de acceso de DESIGN.md; en línea con el texto,
   un solo tamaño de 20 px. */
.icono {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none;
    border-radius: 8px; background: var(--color-primario-suave); color: var(--color-primario);
}
.icono svg, .tarjeta__enlace svg, .incluido__lista svg, .pie__columna svg {
    width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.tarjeta__enlace svg, .incluido__lista svg, .pie__columna svg { width: 20px; height: 20px; flex: none; }

/* Lista con viñeta redonda del color primario; la viñeta cae en el eje izquierdo del texto que la rodea. */
.tarjeta__lista, .plan__lista { list-style: none; padding: 0; display: grid; gap: 8px; font-size: var(--tam-lista); line-height: 1.5; }
.tarjeta__lista li, .plan__lista li { position: relative; padding-left: 16px; }
.tarjeta__lista li::before, .plan__lista li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-primario); }

/* Qué incluye: cuatro tarjetas delineadas en dos por dos. Toda la tarjeta lleva al capítulo (el enlace extiende su
   área a la tarjeta entera) y al pasar el cursor recibe la capa de tinta al 8 %. */
.tarjetas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--canal); }
.tarjeta {
    position: relative; display: grid; gap: 12px; align-content: start; padding: 24px; border-radius: 16px;
    background: var(--color-superficie); border: 1px solid var(--color-borde);
    transition: border-color var(--t-hover) ease;
}
.tarjeta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--color-texto); opacity: 0; transition: opacity var(--t-hover) ease; pointer-events: none; }
.tarjeta:hover::after { opacity: 0.08; }
.tarjeta:hover { border-color: var(--color-borde-campo); }
/* La tarjeta quieta no lleva a ningún sitio: ni capa ni cambio de borde al pasar el cursor. */
.tarjeta--quieta::after { display: none; }
.tarjeta--quieta:hover { border-color: var(--color-borde); }
.tarjeta--quieta p { font-size: var(--tam-lista); line-height: 1.5; }
.tarjeta--quieta .boton { justify-self: start; margin-top: 4px; }
.tarjetas--quietas { margin-top: 24px; }
.tarjeta:has(.tarjeta__enlace:focus-visible) { outline: 3px solid var(--color-enlace); outline-offset: 2px; }
.tarjeta__enlace {
    display: inline-flex; align-items: center; gap: 8px; min-height: 48px;
    font-weight: 600; font-size: var(--tam-lista); color: var(--color-enlace); text-decoration: none;
    transition: opacity var(--t-press) ease;
}
.tarjeta__enlace::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tarjeta__enlace:focus-visible { outline: none; }
.tarjeta__enlace:active { opacity: 0.8; }
.tarjeta__enlace svg { transition: transform var(--t-hover) var(--ease-out); }
.tarjeta:hover .tarjeta__enlace svg { transform: translateX(3px); }

/* Para quién es: cuatro tiles delineados en las mismas cuatro columnas que los pasos y los compromisos. La subrejilla
   alinea ícono, título y párrafo entre tiles aunque un título ocupe dos líneas. */
.tiles { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--canal); }
.tiles--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile p { font-size: var(--tam-lista); line-height: 1.5; }
/* Lista con visto en primario (el verde queda para los estados); en dos columnas cuando acompaña a un título. */
.lista-vistos { list-style: none; padding: 0; display: grid; gap: 8px; font-size: var(--tam-lista); line-height: 1.5; }
.lista-vistos li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; align-items: start; }
.lista-vistos svg { width: 20px; height: 20px; margin-top: 2px; fill: none; stroke: var(--color-primario); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lista-vistos--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px var(--canal); }
.tile { display: grid; gap: 12px; align-content: start; padding: 24px; border-radius: 16px; background: var(--color-superficie); border: 1px solid var(--color-borde); }
@supports (grid-template-rows: subgrid) {
    .tile, .compromiso { grid-row: span 3; grid-template-rows: subgrid; row-gap: 12px; }
}

/* Cómo empieza: cuatro pasos numerados en fila, unidos por una línea en color borde; el número va en un círculo
   azul de 40 px como los «pasos con estado» de DESIGN.md. La línea arranca 12 px después del círculo y termina 12 px
   antes del siguiente, cruzando el canal. */
.pasos { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--canal); }
.paso { position: relative; display: grid; gap: 12px; align-content: start; }
.paso__numero {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
    background: var(--color-primario); color: var(--color-superficie); font: 600 var(--tam-cuerpo)/1 var(--fuente); font-variant-numeric: tabular-nums;
}
/* top: 19 centra la línea de 2 px en el círculo de 40. */
.paso:not(:last-child)::before { content: ""; position: absolute; top: 19px; left: 52px; right: calc(12px - var(--canal)); height: 2px; background: var(--color-borde); }
.paso p { max-width: 30ch; }
/* La duración va como rótulo de 13 encima del título, sin mover el círculo del número. */
.paso__duracion { font: 600 var(--tam-pequeno)/1 var(--fuente); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-texto-2); margin-top: 4px; }
.paso__duracion + h3 { margin-top: -4px; }
.aviso {
    display: flex; align-items: center; gap: 16px; margin-top: 40px; padding: 24px; border-radius: 16px;
    background: var(--color-primario-suave); color: var(--color-primario-profundo);
}
.aviso .icono { background: var(--color-superficie); }
.aviso p { max-width: 54ch; font-size: var(--tam-lista); line-height: 1.5; }
/* El aviso clave de la implantación es la única franja dorada suave de la pantalla: texto `#5C4300`, como manda DESIGN.md. */
.aviso--clave { background: var(--color-acento-suave); color: var(--color-sobre-acento-suave); }
.aviso--clave .icono { color: var(--color-sobre-acento-suave); }
/* Tres avisos en fila: cada uno en cuatro columnas, ícono arriba y texto debajo. */
.avisos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--canal); margin-top: 40px; }
.avisos .aviso { margin-top: 0; flex-direction: column; align-items: flex-start; }
.necesitamos { display: grid; gap: 16px; margin-top: 24px; padding: 24px; border-radius: 16px; background: var(--color-superficie); border: 1px solid var(--color-borde); }
.necesitamos h3 { font: 700 var(--tam-tarjeta)/1.3 var(--fuente); color: var(--color-primario-profundo); }

/* Planes: dos tarjetas lado a lado que son dos cobros del mismo contrato, no dos opciones: un rótulo de papel lo dice
   encima de cada título. La suscripción va en azul primario con el único botón dorado de la pantalla; la implantación
   en blanco delineado con una acción secundaria. La subrejilla alinea las seis filas (papel, título, precio, nota,
   lista, acción) entre las dos tarjetas en cualquier ancho. */
.planes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--canal); align-items: stretch; }
.plan {
    display: flex; flex-direction: column; gap: 16px; padding: 32px; border-radius: 16px;
    background: var(--color-superficie); border: 1px solid var(--color-borde);
}
@supports (grid-template-rows: subgrid) {
    .plan { display: grid; grid-template-rows: subgrid; grid-row: span 6; row-gap: 16px; }
}
/* La suscripción lleva la forma expresiva de DESIGN.md (dos esquinas muy redondeadas en diagonal), una vez por página. */
.plan--destacado { background: var(--color-primario); border-color: var(--color-primario); color: var(--color-superficie); border-radius: 48px 16px 48px 16px; }
.plan--destacado h3 { color: var(--color-acento); }
.plan__papel { font: 600 var(--tam-pequeno)/1 var(--fuente); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-texto-2); }
.plan--destacado .plan__papel { color: var(--color-primario-suave); }
.plan__precio { display: grid; gap: 4px; }
.plan__valor { display: block; font: 700 var(--tam-titulo)/1.1 var(--fuente); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
/* UX20: sobre la tarjeta azul el anillo de foco es dorado, como en las demás bandas azules. */
.plan--destacado :focus-visible { outline-color: var(--color-acento); }
.plan__precio span { font-size: var(--tam-lista); }
.plan__lista { align-self: start; }
.plan--destacado .plan__lista li::before { background: var(--color-acento); }
.plan__accion { align-self: end; justify-self: start; margin-top: auto; }
.plan--destacado .boton--delineado, .plan .boton--delineado { color: var(--color-primario); }

/* Tabla de ejemplos: filas cómodas de 44 px, cifras tabulares a la derecha, encabezado Figtree 600 de 13 sobre
   superficie-2, como las tablas de DESIGN.md. */
.planes__ejemplos {
    width: 100%; margin-top: 32px; border-collapse: separate; border-spacing: 0; font-size: var(--tam-lista); line-height: 1.5;
    font-variant-numeric: tabular-nums; background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: 12px; overflow: hidden;
}
.planes__ejemplos caption { text-align: left; font: 600 var(--tam-lista)/1.5 var(--fuente); padding: 16px 24px 12px; color: var(--color-primario-profundo); }
.planes__ejemplos th, .planes__ejemplos td { height: 44px; padding: 0 24px; text-align: right; border-top: 1px solid var(--color-borde); }
.planes__ejemplos th[scope="row"], .planes__ejemplos thead th:first-child { text-align: left; }
.planes__ejemplos thead th { font: 600 var(--tam-pequeno)/1.5 var(--fuente); background: var(--color-superficie-2); color: var(--color-texto-2); }
.planes__ejemplos td:last-child { font-weight: 600; }
.planes__ejemplos tbody tr:nth-child(even) > * { background: var(--color-fondo); }
.planes__ejemplos tbody tr:hover > * { background: var(--capa-hover); }
.planes__ejemplos tbody tr[aria-current="true"] > * { background: var(--color-primario-suave); color: var(--color-primario); font-weight: 600; }
.planes__ejemplos small { font-size: var(--tam-pequeno); color: var(--color-texto-2); }

.planes__condiciones { margin-top: 24px; }
.incluido { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; margin-top: 24px; padding: 20px 24px; border-radius: 12px; background: var(--color-superficie); border: 1px solid var(--color-borde); }
.incluido__titulo { font-weight: 600; font-size: var(--tam-lista); line-height: 1.5; }
.incluido__lista { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: var(--tam-lista); line-height: 1.5; }
.incluido__lista li { display: inline-flex; align-items: center; gap: 8px; }
/* Los vistos van en primario: el verde queda reservado a los estados. */
.incluido__lista svg { color: var(--color-primario); }
.planes__terceros { margin-top: 16px; font-size: var(--tam-apoyo); line-height: 1.5; color: var(--color-texto-2); max-width: 58ch; }
.planes__terceros strong { font-weight: 600; color: var(--color-texto); }
/* El borde envuelve también el título (caption) de la tabla de respaldo. */
.planes__ejemplos-marco { margin-top: 32px; border: 1px solid var(--color-borde); border-radius: 12px; overflow: hidden; background: var(--color-superficie); }
.respaldo .planes__ejemplos-marco { margin-top: 8px; }
.planes__ejemplos-marco > table.planes__ejemplos { border: 0; border-radius: 0; margin-top: 0; }

/* Sus datos: los seis puntos de seguridad van en una banda azul profundo (la marca «Confidencial» de DESIGN.md: banda
   azul profundo con candado) y lo que sigue (continuidad, soporte y las cuatro condiciones del contrato) vuelve al fondo
   de la hoja dentro de la misma sección. */
.seccion--confianza { padding-block: 0 48px; margin-top: 24px; }
.confianza__banda { padding-block: var(--seccion); background: var(--color-primario-profundo); color: var(--color-superficie); }
.confianza__banda h2, .confianza__banda .compromiso h3 { color: var(--color-superficie); }
.confianza__banda .rotulo { color: var(--color-acento); }
.confianza__banda .seccion__cabeza { margin-bottom: 48px; }
.confianza__banda .compromiso .icono { background: var(--color-primario-suave); color: var(--color-primario); }
.confianza__banda .compromisos__nota { color: rgba(255, 255, 255, 0.78); }
.confianza__banda :focus-visible { outline-color: var(--color-acento); }
.confianza__contrato { padding-top: 48px; }
.compromisos { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--canal); }
.compromiso { display: grid; gap: 12px; align-content: start; }
.compromiso p { font-size: var(--tam-lista); line-height: 1.5; }
/* Lista de dos líneas de Material en dos columnas: el ícono a la izquierda ocupa las dos filas (título y frase). */
.compromisos--lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px var(--canal); }
.compromisos--lista .compromiso { grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; grid-row: auto; column-gap: 16px; row-gap: 4px; }
.compromisos--lista .compromiso .icono { grid-row: 1 / span 2; }
.compromisos--lista .compromiso h3, .compromisos--lista .compromiso p { grid-column: 2; }
.compromisos--lista .compromiso p { max-width: 54ch; }
.compromisos__nota { margin-top: 24px; font-size: var(--tam-apoyo); line-height: 1.5; color: var(--color-texto-2); max-width: 54ch; }
.compromisos__titulo { font: 700 var(--tam-medio)/1.3 var(--fuente); color: var(--color-primario-profundo); margin: 0 0 24px; max-width: 40ch; }

/* Preguntas: acordeón delineado en una sola columna de ocho, para que abrir una respuesta no mueva nada al lado;
   el «más» es un ícono de la familia que gira a «×». */
.preguntas { display: grid; grid-template-columns: 1fr; gap: 8px; max-width: calc(8 * var(--columna) + 7 * var(--canal)); }
.preguntas details { background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: 12px; }
.preguntas details[open] { border-color: var(--color-borde-campo); }
.preguntas summary {
    display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding: 12px 20px;
    font: 600 var(--tam-cuerpo)/1.5 var(--fuente); cursor: pointer; list-style: none; border-radius: 12px;
    transition: background-color var(--t-hover) ease;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after, .supuesto summary::after, .respaldo summary::after {
    content: ""; flex: none; width: 24px; height: 24px; background: var(--color-primario);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform var(--t-ui) var(--ease-out);
}
.preguntas details[open] summary::after, .supuesto[open] summary::after, .respaldo[open] summary::after { transform: rotate(45deg); }
.preguntas summary:hover { background: var(--capa-hover); }
.preguntas summary:active { background: var(--capa-presion); }
/* El panel que se despliega: con el guion pasa de 0fr a 1fr; cuando ya está abierto del todo (clase desplegado) deja de
   recortar, para que un globo de ayuda que viva dentro pueda asomar. */
.despliegue > div { overflow: hidden; }
.preguntas .despliegue p { padding: 0 20px 20px; max-width: 64ch; color: var(--color-texto); }
.js .despliegue { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms var(--ease-out); }
.js details.abierto .despliegue { grid-template-rows: 1fr; }
.js details.desplegado .despliegue > div { overflow: visible; }

/* Demostración: banda azul primaria (el pie, debajo, es el profundo); el texto ocupa las columnas 1 a 5 con los tres
   pasos de lo que pasa después, y el formulario, en una sola tarjeta blanca, de la 6 a la 12. */
.seccion--demostracion { background: var(--color-primario); color: var(--color-superficie); }
.seccion--demostracion .rotulo { color: var(--color-acento); }
.demostracion { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--canal); align-items: start; }
.demostracion__texto { grid-column: 1 / 6; display: grid; gap: 16px; position: sticky; top: calc(var(--barra-alto) + 32px); }
.demostracion h2 { color: var(--color-superficie); }
.demostracion__texto p { max-width: 40ch; }
.demostracion__subtitulo { font-weight: 600; margin-top: 16px; }
.demostracion__pasos { list-style: none; padding: 0; display: grid; gap: 16px; counter-reset: paso; max-width: 40ch; }
/* El número va absoluto a la izquierda para que el texto del paso, con su parte en negrita, fluya como un solo párrafo. */
.demostracion__pasos li { position: relative; padding-left: 44px; min-height: 32px; font-size: var(--tam-lista); line-height: 1.5; }
.demostracion__pasos li::before {
    counter-increment: paso; content: counter(paso); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
    background: var(--color-acento); color: var(--color-sobre-acento); font: 600 var(--tam-lista)/1 var(--fuente); font-variant-numeric: tabular-nums;
}
.demostracion__pasos strong { font-weight: 600; }
.demostracion__texto :focus-visible { outline-color: var(--color-acento); }

.formulario { grid-column: 6 / -1; display: grid; gap: 20px; padding: 32px; border-radius: 16px; background: var(--color-superficie); color: var(--color-texto); }
.campo { display: grid; gap: 8px; align-content: start; }
.campo-par { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
/* En dos columnas, los campos del par comparten cuatro filas (rótulo, pista, control y error) con subgrid: el control
   de un campo sin pista se alinea con el del vecino que sí la tiene. En una columna cada campo vuelve a su flujo. */
@media (min-width: 561px) {
    .campo-par { row-gap: 0; }
    .campo-par > .campo { grid-row: span 4; grid-template-rows: subgrid; row-gap: 8px; }
    .campo-par > .campo > label { grid-row: 1; }
    .campo-par > .campo > .campo__pista { grid-row: 2; }
    .campo-par > .campo > :is(input, select) { grid-row: 3; }
    .campo-par > .campo > .campo__error { grid-row: 4; }
}
.campo label { font-weight: 600; font-size: var(--tam-lista); line-height: 1.5; }
.campo__pista { font-size: var(--tam-apoyo); line-height: 1.5; color: var(--color-texto-2); margin-top: -4px; }
.campo input, .campo select {
    width: 100%; min-height: 48px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--color-borde-campo);
    font: 400 var(--tam-cuerpo) var(--fuente); color: var(--color-texto); background: var(--color-superficie);
}
.campo ::placeholder { color: var(--color-texto-2); opacity: 1; }
.campo select { appearance: none; -webkit-appearance: none; height: 48px; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%231F365C' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
/* El foco es el propio borde del campo, en azul de enlace (rojo si el campo está en error): un solo anillo, no dos. */
.campo :is(input, select):focus-visible { outline: 2px solid var(--color-enlace); outline-offset: -1px; border-color: var(--color-enlace); }
.campo input[aria-invalid="true"]:focus-visible { outline-color: var(--estado-error); border-color: var(--estado-error); }
/* Con error, el borde del campo pasa a rojo de 2 px y el mensaje lleva su ícono, como manda DESIGN.md. */
.campo input[aria-invalid="true"] { border-color: var(--estado-error); box-shadow: inset 0 0 0 1px var(--estado-error); }
.campo__error { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 4px 12px; border-radius: 8px; background: var(--estado-error-fondo); color: var(--estado-error); font-weight: 500; font-size: var(--tam-apoyo); line-height: 1.5; }
.campo__error::before {
    content: ""; width: 16px; height: 16px; flex: none; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* El ancho del botón reserva desde el reposo el sitio del indicador de carga: no cambia de tamaño al enviar. */
.formulario .boton { justify-self: start; min-width: 264px; }
.formulario__ayuda { font-size: var(--tam-apoyo); line-height: 1.5; color: var(--color-texto-2); margin-top: -8px; max-width: 54ch; }
.formulario__estado:empty { display: none; }
.formulario__estado { display: grid; gap: 8px; padding: 16px 20px; border-radius: 12px; color: var(--color-texto); }
.formulario__estado:focus-visible { outline: 3px solid var(--color-enlace); outline-offset: 2px; }
.formulario__estado[data-tipo="error"] { background: var(--estado-error-fondo); color: var(--estado-error); }
.formulario__estado[data-tipo="exito"] { background: var(--estado-exito-fondo); color: var(--estado-exito); }
.formulario__estado strong { font-weight: 600; }
.formulario__estado ul { padding-left: 20px; display: grid; gap: 4px; }
.formulario__estado li { min-height: 32px; display: flex; align-items: center; }
.formulario__estado a { color: inherit; font-weight: 500; }

/* ---- Pie: azul profundo, la marca en las columnas 1 a 4 y cuatro columnas de dos con títulos dorados ---- */

/* El filete superior marca el paso de la banda azul primaria al pie profundo, que de otro modo se confunden. */
.pie { position: relative; z-index: 1; padding: var(--seccion) 0 32px; background: var(--color-primario-profundo); color: var(--color-superficie); border-top: 1px solid rgba(255, 255, 255, 0.18); }
.pie__columnas { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px var(--canal); }
.pie__marca { grid-column: 1 / 4; display: grid; gap: 16px; align-content: start; }
.pie__marca p { max-width: 32ch; }
.marca--pie { justify-self: start; }
.pie__columna { grid-column: span 2; }
/* «Producto» son nueve enlaces: van en dos subcolumnas (5 + 4) para que la columna mida como las demás. */
.pie__columna--producto { grid-column: span 3; }
.pie__columna.pie__columna--producto ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(5, auto); column-gap: var(--canal); }
.pie__arriba { margin-left: 16px; }
.pie__columna h3 { font: 600 var(--tam-lista)/1.5 var(--fuente); color: var(--color-acento); margin-bottom: 8px; }
.pie__columna ul { list-style: none; padding: 0; display: grid; }
.pie__columna li { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--tam-lista); line-height: 1.5; }
.pie__columna svg { color: var(--color-acento); }
/* Los datos sin acción se atenúan y su ícono pierde el dorado: el dorado queda para lo que se puede tocar. */
.pie__dato { color: rgba(255, 255, 255, 0.72); }
.pie__dato svg { color: rgba(255, 255, 255, 0.6); }
.pie a { color: var(--color-superficie); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; text-decoration-color: rgba(255, 255, 255, 0.4); transition: text-decoration-color var(--t-hover) ease; }
.pie a:hover { text-decoration-color: currentColor; }
.pie a:focus-visible { outline-color: var(--color-acento); }
.pie__cierre { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.18); font-size: var(--tam-apoyo); line-height: 1.5; }

/* ---- El sistema por dentro: la cabeza en dos columnas (texto en las 1 a 5, el botón segmentado de las puertas en las 6 a
   12), debajo los chips de pantalla de la puerta elegida y un escenario de una sola fila y altura fija (la ficha en las
   columnas 1 a 4, la maqueta en las 5 a 12) para que la sección no salte al cambiar de pantalla. ---- */

.producto__cabeza { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px var(--canal); align-items: end; }
.producto__texto { grid-column: 1 / 6; display: grid; gap: 16px; }
.producto__texto .rotulo { margin-bottom: -4px; }
/* Siete columnas para que los tres nombres completos quepan en una sola línea también en 1366. */
.puertas { grid-column: 6 / -1; display: grid; gap: 12px; align-content: end; }
/* El segmentado llena su mitad en tres partes iguales; cada una lleva ícono, nombre y el conteo de pantallas en pastilla. */
/* Con la clase doblada porque la regla general de .segmentos (una píldora que sí parte filas) viene después en la hoja. */
.segmentos.segmentos--puertas { display: flex; flex-wrap: nowrap; margin-bottom: 0; }
.segmentos.segmentos--puertas[hidden] { display: none; }
.segmento--puerta { flex: 1 1 auto; justify-content: center; padding: 0 12px; font-size: var(--tam-apoyo); white-space: nowrap; }
.segmento--puerta svg, .segmento__conteo { flex: none; }
.segmento__conteo {
    min-width: 24px; height: 24px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
    background: var(--color-superficie-2); font: 600 var(--tam-pequeno)/1 var(--fuente); font-variant-numeric: tabular-nums; color: var(--color-texto-2);
}
.segmento[aria-selected="true"] .segmento__conteo { background: var(--color-superficie); color: var(--color-primario); }
/* La línea que explica la puerta elegida reserva dos renglones para que la cabeza no cambie de alto entre puertas. */
.puertas__texto { margin: 0; min-height: 3em; font-size: var(--tam-lista); line-height: 1.5; color: var(--color-texto-2); }
.puertas__texto[hidden], html:not(.js) .puertas__texto { display: none; }

.pantallas { scroll-margin-top: 24px; }
.pantallas__chips { margin-bottom: 24px; }
/* Los chips de la puerta van en una sola fila; si no caben (tableta) se desplazan con una barra fina, nunca superpuesta al texto. */
.chips--pantallas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--color-borde) transparent; padding: 6px 2px; margin: -6px -2px; }
.chips--pantallas[hidden], html:not(.js) .chips--pantallas { display: none; }
.chip--pantalla { flex: none; min-height: 40px; padding: 0 16px 0 12px; }
.chip--pantalla svg { width: 20px; height: 20px; }
.chip[aria-selected="true"] { background: var(--color-primario-suave); color: var(--color-primario); border-color: transparent; }
.chip[data-area][aria-selected="true"] { background: var(--area-fondo); color: var(--area-tinta); }
.chip[data-area][aria-selected="true"] svg { color: inherit; }
.chip:focus-visible { outline: 3px solid var(--color-enlace); outline-offset: 2px; }

/* El escenario: una sola fila de 12 columnas con alto mínimo fijo; el panel visible y los controles comparten la fila, y la
   ficha reserva abajo el espacio de los botones ‹ › para que nunca se monten sobre el texto. */
.escenario { --escenario-alto: 640px; position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--canal); min-height: var(--escenario-alto); }
.pantalla { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--canal); align-items: start; animation: aparecer var(--t-ui) var(--ease-out) both; }
.pantalla[hidden] { display: none; }
html:not(.js) .pantalla { grid-row: auto; margin-bottom: 40px; }
@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } }
.pantalla__texto { grid-column: 1 / 5; display: grid; gap: 12px; padding-bottom: 72px; }
.pantalla__texto h3 { font: 700 var(--tam-medio)/1.3 var(--fuente); color: var(--color-primario-profundo); }
.pantalla__texto .lista-vistos { margin-top: 4px; }
.pantalla__texto .pantalla__pie { margin-top: 4px; font-size: var(--tam-apoyo); line-height: 1.5; color: var(--color-texto-2); }
.pantalla__marco { grid-column: 5 / -1; min-width: 0; align-self: start; }
/* El teléfono va entero y centrado en un marco gris de radio 28 con borde; el guion lo escala al alto del escenario.
   El mismo marco sostiene las maquetas de dos aparatos (--doble: el celular junto al Panel, o dos celulares del sitio):
   cada aparato trae su propia barra, así que aquí no se dibuja ninguna y la maqueta no se recorta con el radio del teléfono. */
.pantalla__marco--celular { display: flex; align-items: center; justify-content: center; min-height: var(--escenario-alto); padding: 24px; border: 1px solid var(--color-borde); border-radius: 28px; background: var(--color-superficie-2); }
.pantalla__marco--celular .maqueta { width: 390px; max-width: 100%; flex: none; border-radius: 44px; }
.pantalla__marco--celular .maqueta > .producto { transform: scale(var(--escala, 1)); }
.pantalla__marco--doble .maqueta { border-radius: 0; }
/* Las de computador van en un marco de ventana: una sola barra gris con tres puntos, la dirección de producción y, a la
   derecha, «Ver completa», que abre la maqueta suelta (radio 12). La maqueta de 1200 se encoge al ancho del marco y el
   cuerpo recorta lo que pase del alto del escenario con un fundido corto que avisa el corte sin tapar contenido. La
   maqueta trae su propia barra de navegador para cuando se ve sola (galería, página suelta): dentro del marco se oculta,
   y su ventana pierde borde y radio, para que nunca haya un navegador dentro de otro. */
.ventana { width: min(100%, 860px); margin-inline: auto; border: 1px solid var(--color-borde); border-radius: 12px; overflow: hidden; background: var(--color-superficie); }
.ventana__barra { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 40px; padding: 0 8px 0 12px; background: var(--color-superficie-2); border-bottom: 1px solid var(--color-borde); }
.ventana__puntos { display: flex; gap: 6px; }
.ventana__puntos i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--color-borde-campo); background: var(--color-superficie); }
.ventana__direccion { grid-column: 2; min-width: 320px; height: 26px; padding: 0 14px; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 6px; background: var(--color-superficie); font: 500 var(--tam-pequeno)/1 var(--fuente); color: var(--color-texto-2); }
.ventana__direccion svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ventana__cuerpo { position: relative; max-height: calc(var(--escenario-alto) - 42px); overflow: hidden; }
.ventana__cuerpo .producto .p-ventana { border: 0; border-radius: 0; }
.ventana__cuerpo .producto .p-ventana__barra { display: none; }
.ventana__cuerpo:has(> .maqueta--centrada) { background: var(--color-superficie-2); }
.ventana__cuerpo--recortada::after, .ventana__cuerpo:has(> .maqueta--alta)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--color-superficie) 85%);
}
.ventana__completa {
    grid-column: 3; justify-self: end; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px;
    border-radius: 999px; color: var(--color-primario); font: 600 var(--tam-pequeno)/1 var(--fuente); text-decoration: none; white-space: nowrap;
    transition: background-color var(--t-hover) ease;
}
.ventana__completa:hover { background: var(--capa-hover); }
.ventana__completa:active { background: var(--capa-presion); }
.ventana__completa:focus-visible { outline: 3px solid var(--color-enlace); outline-offset: 2px; }
.ventana__completa svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* La maqueta se dibuja a su tamaño natural (--w × --h) y se encoge con la escala que fija el guion; la caja reserva el alto
   real por la escala con la proporción declarada. Dentro de la ventana no lleva radio propio. Ninguna lleva sombra. */
.maqueta { position: relative; width: 100%; overflow: hidden; aspect-ratio: var(--w) / var(--h); }
.maqueta > .producto { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: scale(var(--escala, 0.7)); }
.maqueta--centrada > .producto { left: 50%; transform: translateX(-50%) scale(var(--escala, 1)); }
/* Los controles ‹ › con el contador «n / 12» se sientan al pie de la ficha, en la misma fila que el panel. */
/* El panel conserva su animación de entrada (y con ella un contexto de apilamiento), así que los controles suben un nivel. */
.escenario__controles { grid-column: 1 / 5; grid-row: 1; align-self: end; position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.escenario__controles[hidden] { display: none; }
.escenario__boton {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-borde-campo);
    background: var(--color-superficie); color: var(--color-primario); cursor: pointer; transition: background-color var(--t-hover) ease;
}
.escenario__boton:hover { background: var(--capa-hover); }
.escenario__boton:active { background: var(--capa-presion); }
.escenario__boton:focus-visible { outline: 3px solid var(--color-enlace); outline-offset: 2px; }
.escenario__boton svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.escenario__contador { min-width: 56px; text-align: center; font: 500 var(--tam-apoyo)/1 var(--fuente); font-variant-numeric: tabular-nums; color: var(--color-texto-2); }
.escenario__contador b { font-weight: 600; color: var(--color-texto); }
/* Sin el guion se apilan la primera pantalla de cada puerta y queda el enlace a la galería; con él, sobra. */
.pantallas__galeria { margin-top: 8px; }
.js .pantallas__galeria { display: none; }
.pantallas__pie { margin-top: 32px; font-size: var(--tam-apoyo); line-height: 1.5; color: var(--color-texto-2); }
.pantallas__pie .enlace-texto { font-size: var(--tam-lista); }

/* ---- Lo que cambia: tabla cómoda de dos columnas en las diez columnas centrales y tres tarjetas de cifra ---- */

.comparacion {
    width: 100%; border-collapse: separate; border-spacing: 0;
    font-size: var(--tam-lista); line-height: 1.5; background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: 12px; overflow: hidden;
}
.comparacion th, .comparacion td { width: 50%; padding: 12px 24px; text-align: left; vertical-align: top; border-top: 1px solid var(--color-borde); }
.comparacion thead th { font: 600 var(--tam-pequeno)/1.5 var(--fuente); background: var(--color-superficie-2); color: var(--color-texto-2); border-top: 0; height: 44px; }
.comparacion td { min-height: 56px; }
.comparacion td + td { border-left: 1px solid var(--color-borde); color: var(--color-primario-profundo); font-weight: 500; }
/* Cada fila lleva a la izquierda el ícono de su área, del mismo color que en «Qué incluye». */
.comparacion td:first-child { color: var(--color-texto-2); padding-left: 64px; }
.comparacion td:first-child .icono--mini { float: left; margin: -2px 0 0 -40px; }
.seccion--comparacion { background: var(--color-superficie-2); }
.seccion--comparacion .cifra, .seccion--comparacion .comparacion { border-color: var(--color-borde); }
.recupera { display: grid; gap: 12px; margin-top: 48px; }
.recupera h3 { font: 700 var(--tam-medio)/1.3 var(--fuente); color: var(--color-primario-profundo); }
.recupera p { max-width: 54ch; }
.cifras { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--canal); margin-top: 24px; }
.cifra { display: grid; gap: 8px; align-content: start; padding: 24px; border-radius: 16px; background: var(--color-superficie); border: 1px solid var(--color-borde); }
.cifra__valor { font: 700 var(--tam-cifra)/1.1 var(--fuente); font-variant-numeric: tabular-nums; color: var(--color-primario); }
.cifra .sellos { margin-top: 4px; }
.cifra__que { font-size: var(--tam-lista); line-height: 1.5; }
.cifra__supuesto { font-size: var(--tam-apoyo); line-height: 1.5; color: var(--color-texto-2); }
/* La tercera tarjeta no es una cifra: título de tarjeta, una frase y el enlace a la pantalla. */
.cifra__titulo { font: 700 var(--tam-tarjeta)/1.3 var(--fuente); color: var(--color-primario-profundo); }
.cifra--texto .enlace-texto { justify-self: start; font-size: var(--tam-lista); }
/* El supuesto va plegado bajo «Ver el supuesto» (abierto sin el guion); el «más» es el mismo de las preguntas, en 20 px. */
.supuesto summary, .respaldo summary { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font: 600 var(--tam-lista)/1.5 var(--fuente); color: var(--color-enlace); cursor: pointer; list-style: none; border-radius: 8px; }
.supuesto summary::-webkit-details-marker, .respaldo summary::-webkit-details-marker { display: none; }
.supuesto summary::after, .respaldo summary::after { width: 20px; height: 20px; background: currentColor; }
.supuesto .cifra__supuesto { padding-bottom: 4px; }
.seccion__cierre { margin-top: 16px; }

/* ---- Preguntas en tres bloques: el subtítulo en las columnas 1 a 4 y el acordeón en las 5 a 12 ---- */

.preguntas__bloque { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--canal); align-items: start; }
.preguntas__bloque + .preguntas__bloque { margin-top: 40px; }
.preguntas__bloque > h3 { grid-column: 1 / 5; font: 700 var(--tam-medio)/1.3 var(--fuente); color: var(--color-primario-profundo); padding-top: 12px; }
.preguntas__bloque .preguntas { grid-column: 5 / -1; max-width: none; }
/* Con el guion, los tres subtítulos se vuelven la lista maestra, pegajosa en las columnas 1 a 4, y a la derecha se ve un
   solo tema; el h3 del bloque se queda para los lectores de pantalla. */
.js .preguntas__cuerpo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--canal); align-items: start; }
.js .preguntas__lado { grid-column: 1 / 5; position: sticky; top: calc(var(--barra-alto) + 24px); }
.preguntas__lado .seccion__cabeza { margin-bottom: 32px; }
/* Los tres bloques se apilan en la misma celda: la sección mide siempre lo del tema más largo y no salta al cambiar. */
.js .preguntas__bloques { grid-column: 5 / -1; display: grid; }
.preguntas__temas { display: grid; gap: 4px; }
.preguntas__temas[hidden] { display: none; }
.preguntas__tema {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 16px; border: 0; border-radius: 12px;
    background: transparent; color: var(--color-texto); font: 600 var(--tam-lista)/1.4 var(--fuente); text-align: left; cursor: pointer;
    transition: background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.preguntas__tema:hover { background: var(--capa-hover); }
.preguntas__tema:active { background: var(--capa-presion); }
.preguntas__tema[aria-selected="true"] { background: var(--color-primario-suave); color: var(--color-primario); }
.preguntas__conteo { margin-left: auto; min-width: 28px; height: 28px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--color-superficie-2); font: 600 var(--tam-pequeno)/1 var(--fuente); font-variant-numeric: tabular-nums; color: var(--color-texto-2); }
.preguntas__tema[aria-selected="true"] .preguntas__conteo { background: var(--color-superficie); color: var(--color-primario); }
.js .preguntas__bloque { display: block; }
.js .preguntas__bloque + .preguntas__bloque { margin-top: 0; }
.js .preguntas__bloque > h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.js .preguntas__bloque .preguntas { animation: aparecer var(--t-ui) var(--ease-out) both; }

/* ---- Hechos en Pasto: texto en las columnas 1 a 7 y la tarjeta de fundadora en las 8 a 12 ---- */

.nosotros { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--canal); align-items: start; }
.nosotros__texto { grid-column: 1 / 8; display: grid; gap: 16px; }
.nosotros__texto h2 { max-width: 22ch; margin-bottom: 8px; }
.nosotros__texto p { max-width: 54ch; }
/* Tres hechos con rótulo en 22 y una línea de apoyo, como las cifras de la cabeza de «Qué incluye». */
/* Los tres hechos van a lo ancho, en tres columnas bajo el texto y la tarjeta, cada uno con su cifra arriba. */
.hechos { grid-column: 1 / -1; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--canal); margin: 8px 0 0; }
.hechos li { display: grid; row-gap: 6px; align-content: start; }
.hechos strong { font: 700 var(--tam-medio)/1.2 var(--fuente); color: var(--color-primario); }
.hechos span { font-size: var(--tam-lista); line-height: 1.5; color: var(--color-texto-2); }
.nosotros__tarjeta { grid-column: 8 / -1; }
/* Hechos en Pasto va en la banda dorada suave: lo cálido y lo humano de la hoja; las etiquetas pasan a blanco encima. */
.seccion--nosotros { background: var(--color-acento-suave); margin-bottom: 0; }
.seccion--nosotros .etiquetas { gap: 4px 8px; }
.seccion--nosotros .etiquetas li { background: transparent; padding: 0; color: var(--color-sobre-acento-suave); }
.seccion--nosotros .etiquetas li + li::before { content: "·"; margin-right: 8px; }

/* ---- Ilustraciones: personajes y maquetas del elenco que acompañan cuatro secciones de la hoja ----
   Van sin marco ni sombra de caja (la sombra de contacto es parte del render) y siempre en las columnas que la sección
   deja libres. width y height en el img reservan el alto antes de que llegue la imagen. Se ven solo desde 901 px: en
   una columna empujarían el contenido sin decir nada nuevo, y como el img oculto no entra en pantalla, la carga
   diferida no lo descarga. */
.ilustracion { margin: 0; pointer-events: none; }
.ilustracion img { display: block; width: 100%; height: auto; }

/* Para quién: la cabeza, el segmentado, la tarjeta y el puente en las columnas 1 a 9; en las 10 a 12, las cuatro
   imágenes apiladas en una sola celda, con los pies a la altura del borde inferior de la tarjeta. Solo se ve la del
   panel que figura en data-elegida; las demás quedan ocultas (también para el lector de pantalla) y el alto no cambia. */
#para-quien .seccion__interior { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--canal); }
#para-quien .seccion__interior > * { grid-column: 1 / 10; }
/* La celda ya mide nueve columnas: el tope de nueve columnas de la regla general se mediría contra ella y la encogería. */
@media (min-width: 901px) {
    #para-quien .seccion__interior > .segmentos, #para-quien .seccion__interior > .tiles--publicos { max-width: none; }
}
#para-quien .ilustracion--publico { grid-column: 10 / -1; grid-row: 1 / 4; align-self: end; display: grid; }
.ilustracion--publico > picture { grid-area: 1 / 1; transition: opacity var(--t-ui) ease, visibility 0s; }
.js .ilustracion--publico > picture { visibility: hidden; opacity: 0; transition: opacity var(--t-ui) ease, visibility 0s var(--t-ui); }
.ilustracion--publico[data-elegida="publico-colegios"] > [data-panel="publico-colegios"],
.ilustracion--publico[data-elegida="publico-jardines"] > [data-panel="publico-jardines"],
.ilustracion--publico[data-elegida="publico-academias"] > [data-panel="publico-academias"],
.ilustracion--publico[data-elegida="publico-sedes"] > [data-panel="publico-sedes"] { visibility: visible; opacity: 1; transition: opacity var(--t-ui) ease, visibility 0s; }
html:not(.js) .ilustracion--publico > picture:not(:first-child) { display: none; }

/* Así empieza: la maqueta de la secretaría en las columnas 9 a 12, a la altura de la cabeza (que ocupa las 1 a 8).
   Va en posición absoluta y sube 56 px sobre el relleno superior de la sección, así no alarga la sección. Por
   debajo de 1181 px el párrafo de la cabeza llegaría hasta ella y se esconde. */
#implantacion .seccion__interior { position: relative; }
.ilustracion--implantacion { position: absolute; top: -56px; right: 0; width: 280px; }

/* Hechos en Pasto: los tres hechos pasan a las columnas 1 a 9 y la escuela rural ocupa las 10 a 12 de la misma fila. */
.nosotros .hechos { grid-column: 1 / 10; }
.ilustracion--nosotros { grid-column: 10 / -1; align-self: end; }

/* Demostración: el secretario saluda bajo «Qué pasa después», en el espacio que deja la columna de texto junto al
   formulario; baja 64 px sobre el relleno inferior de la banda para que la columna no pase del alto del formulario. */
.ilustracion--demostracion { width: 112px; margin-bottom: -64px; }

@media (max-width: 1180px) {
    .nosotros .hechos { grid-column: auto; }
    .ilustracion--nosotros, .ilustracion--implantacion { display: none; }
}
@media (max-width: 900px) {
    .ilustracion, #para-quien .ilustracion--publico { display: none; }
    #para-quien .seccion__interior { display: block; }
}

.formulario__consentimiento { font-size: var(--tam-apoyo); line-height: 1.5; color: var(--color-texto-2); margin-top: -8px; max-width: 54ch; }

/* ---- Componentes interactivos de la hoja: paneles apilados, botones segmentados, chips, globos de ayuda, pestañas de
   área, tarjetas que se abren y calculadora. Todos nacen ocultos o como su versión plana y la clase
   .js los enciende. Estados de DESIGN.md en cada uno: capa del 8 % al pasar, 10 % al presionar, anillo de 3 px al
   enfocar y azul suave (o el color del área) al elegir. ---- */

/* Los paneles de un conjunto de pestañas se apilan en la misma celda: el bloque mide siempre lo que el más alto y el
   cambio es un fundido de 240 ms en vez de un salto. El oculto sigue en la rejilla, invisible y sin eventos. */
.js .apilados { grid-template-columns: minmax(0, 1fr); }
.js .apilados > [role="tabpanel"] { grid-area: 1 / 1; transition: opacity var(--t-ui) ease, visibility 0s; }
.js .apilados > [role="tabpanel"][hidden] { display: grid; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity var(--t-ui) ease, visibility 0s var(--t-ui); }

/* Botones segmentados de Material: una píldora dividida de 48 px; el elegido en azul suave. El anillo de foco va por
   dentro porque la píldora recorta lo que sobresale. */
.segmentos { display: inline-flex; flex-wrap: wrap; margin-bottom: 24px; border: 1px solid var(--color-borde-campo); border-radius: 999px; overflow: hidden; }
.segmentos[hidden] { display: none; }
.segmento {
    display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border: 0; border-left: 1px solid var(--color-borde-campo);
    background: transparent; color: var(--color-texto); font: 600 var(--tam-lista)/1 var(--fuente); cursor: pointer;
    transition: background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.segmento:first-child { border-left: 0; }
.segmento svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.segmento:hover { background: var(--capa-hover); }
.segmento:active { background: var(--capa-presion); }
.segmento[aria-selected="true"] { background: var(--color-primario-suave); color: var(--color-primario); }
.segmento:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--color-enlace); }
/* La tarjeta de ejemplo del público elegido: ícono a la izquierda, título y párrafo a la derecha. */
.js .tile--publico { grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; grid-row: auto; column-gap: 16px; row-gap: 4px; align-items: center; }
.js .tile--publico .icono { grid-row: 1 / span 2; align-self: start; }
.js .tile--publico h3, .js .tile--publico p { grid-column: 2; }
.js .tile--publico p { max-width: none; font-size: var(--tam-cuerpo); }
/* El segmentado y la tarjeta del público elegido miden lo mismo (nueve columnas) y los cuatro segmentos son iguales. */
#para-quien .segmentos, #para-quien .tiles--publicos { max-width: calc(9 * var(--columna) + 8 * var(--canal)); }
#para-quien .segmentos { display: flex; width: 100%; }
#para-quien .segmento { flex: 1 1 0; justify-content: center; }

/* Lo que pone la institución: cuatro vistos en fila a lo ancho de la tarjeta, cada uno con su nombre y, debajo, su frase
   a la vista (son frases cortas: nada que esconder en un globo que taparía el título). */
.requisitos.lista-vistos--dos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px var(--canal); }
.requisito { grid-template-columns: 20px minmax(0, 1fr); gap: 4px 8px; align-content: start; }
.requisito__nombre { font-weight: 600; color: var(--color-primario-profundo); }
.requisito__frase { grid-column: 2; font-size: var(--tam-apoyo); line-height: 1.5; color: var(--color-texto-2); }
/* Las normas van una por renglón, «Decreto 1290: su SIEE tal como es», con el nombre en negrita: la tarjeta queda tan alta
   como las de la fila de arriba y ninguna frase se esconde en un globo. */
.normas { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; font-size: var(--tam-lista); line-height: 1.5; }
.norma__nombre { font-weight: 600; color: var(--color-primario-profundo); }
.norma__nombre::after { content: ": "; }

/* Globo de ayuda (tooltip de Material): bajo su disparador, en azul profundo con texto de apoyo de 14, en 240 ms al
   pasar el cursor o al enfocar; Escape lo cierra hasta que el foco o el cursor salen. El disparador lleva .con-globo. */
.js .con-globo { position: relative; }
.js .globo {
    position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 4; width: max-content; max-width: min(38ch, 80vw); margin: 0; padding: 10px 14px; border-radius: 8px;
    background: var(--color-primario-profundo); color: var(--color-superficie); font: 400 var(--tam-apoyo)/1.5 var(--fuente); text-align: left; text-wrap: pretty;
    opacity: 0; visibility: hidden; transform: translateY(4px); pointer-events: none;
    transition: opacity var(--t-ui) ease, transform var(--t-ui) var(--ease-out), visibility 0s var(--t-ui);
}
.js .globo--derecha, .js .calculadora__cifra .globo { left: auto; right: 0; }
/* El globo que se saldría por la izquierda (el de la primera cifra en tableta) vuelve a nacer en el borde de su disparador. */
.js .con-globo > .globo.globo--izquierda { left: 0; right: auto; }
.js .globo::first-letter { text-transform: uppercase; }
.js .con-globo:hover > .globo, .js .con-globo:focus-within > .globo { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.js .con-globo.globo-cerrado > .globo { opacity: 0; visibility: hidden; }
/* Botón de ayuda: la «i» en un círculo de 24 con zona sensible de 48. */
.ayuda { font: inherit; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: 4px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--color-texto-2); cursor: help; vertical-align: middle; transition: color var(--t-hover) ease, background-color var(--t-hover) ease; }
.ayuda[hidden] { display: none; }
.ayuda::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; }
.ayuda svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ayuda:hover { color: var(--color-primario); background: var(--capa-hover); }
.ayuda:active { background: var(--capa-presion); }

/* Chips con acción (filtro y preajuste): botón de 36 px, radio 8; el elegido en azul suave o en el color de su área. La
   capa ::after da los estados sin tapar el color del elegido y ::before amplía la zona sensible a 48. */
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips[hidden] { display: none; }
.chip {
    position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 16px; border-radius: 8px;
    border: 1px solid var(--color-borde-campo); background: var(--color-superficie); color: var(--color-texto);
    font: 600 var(--tam-apoyo)/1 var(--fuente); font-variant-numeric: tabular-nums; cursor: pointer;
    transition: background-color var(--t-hover) ease, color var(--t-hover) ease, border-color var(--t-hover) ease;
}
.chip::before { content: ""; position: absolute; inset: -6px 0; }
.chip::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0; transition: opacity var(--t-hover) ease; z-index: -1; }
.chip:hover::after { opacity: 0.08; }
.chip:active::after { opacity: 0.1; }
.chip svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chip[data-area] svg { color: var(--area-tinta); }
.chip[aria-pressed="true"] { background: var(--color-primario-suave); color: var(--color-primario); border-color: transparent; }
.chip[data-area][aria-pressed="true"] { background: var(--area-fondo); color: var(--area-tinta); }
.chip[data-area][aria-pressed="true"] svg { color: inherit; }
/* La tinta de rectoría es blanca (su fondo es el primario): sobre el chip blanco el ícono va en primario. */
.chip[data-area="direccion"]:not([aria-pressed="true"]):not([aria-selected="true"]) svg { color: var(--color-primario); }
/* El filtro de la comparación elige un área, como las pestañas de «Qué incluye»: toma su misma forma de píldora de 44, para
   que la página tenga solo dos controles de «elegir uno» (segmentos y píldoras de área). */
.chips--filtro { margin-bottom: 16px; }
.chips--filtro .chip { min-height: 44px; border-radius: 999px; }
.js .comparacion tbody tr { animation: aparecer var(--t-ui) var(--ease-out) both; }

/* Pestañas de área de «Qué incluye»: píldoras de 44 con el ícono de su color; la elegida toma el fondo del área y el
   ícono se invierte para seguir viéndose. */
.areas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.areas[hidden] { display: none; }
.area-tab {
    position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px 0 9px; border-radius: 999px;
    border: 1px solid var(--color-borde-campo); background: var(--color-superficie); color: var(--color-texto); font: 600 var(--tam-apoyo)/1 var(--fuente); cursor: pointer;
    transition: background-color var(--t-hover) ease, color var(--t-hover) ease, border-color var(--t-hover) ease;
}
.area-tab::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0; transition: opacity var(--t-hover) ease; z-index: -1; }
.area-tab:hover::after { opacity: 0.08; }
.area-tab:active::after { opacity: 0.1; }
.area-tab[aria-selected="true"] { background: var(--area-fondo); color: var(--area-tinta); border-color: transparent; }
.area-tab[aria-selected="true"] .icono { background: var(--area-tinta); color: var(--area-fondo); box-shadow: none; }
.area-tab .icono { transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
/* El panel del área: ícono y título en una fila; las viñetas pasan a casillas con un visto del color del área, en dos
   columnas; la capa de tinta de la tarjeta no se usa en un panel tan ancho. */
.js .tarjetas--areas { grid-template-columns: minmax(0, 1fr); }
.js .tarjeta--area .tarjeta__enlace::before { display: none; }
.js .tarjeta--area { grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; align-items: center; animation: aparecer var(--t-ui) var(--ease-out) both; }
.js .tarjeta--area > :not(.icono):not(h3) { grid-column: 1 / -1; }
.js .tarjeta--area::after { display: none; }
.js .tarjeta--area .tarjeta__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px var(--canal); }
.js .tarjeta--area .tarjeta__lista li { padding: 10px 16px 10px 44px; border-radius: 8px; background: var(--color-fondo); }
.js .tarjeta--area .tarjeta__lista li::before {
    left: 16px; top: 12px; width: 18px; height: 18px; border-radius: 0; background: var(--area-tinta);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.js .tarjeta--area[data-area="direccion"] .tarjeta__lista li::before { background: var(--color-primario); }

/* Las seis cosas del contrato: tarjetas iguales en tres columnas con el ícono de 40, el título y el texto a la vista
   (son una a cuatro líneas: no hay nada que plegar, y así ninguna descoloca a sus vecinas). */
.condiciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--canal); align-items: stretch; }
.condicion {
    display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; row-gap: 8px; align-content: start; align-items: center; padding: 20px 24px;
    background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: 16px;
}
.condicion h3 { font: 700 var(--tam-tarjeta)/1.3 var(--fuente); color: var(--color-primario-profundo); }
.condicion__texto { grid-column: 2; display: grid; gap: 12px; font-size: var(--tam-lista); line-height: 1.5; }

/* La calculadora de planes: a la izquierda el deslizador con su cifra y los cuatro tamaños de ejemplo; a la derecha las
   tres cifras en tabular, la del primer año en azul suave. Las notas reservan su alto para que nada salte al moverlo. */
.calculadora { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px var(--canal); margin-top: var(--canal); padding: 32px; border-radius: 16px; background: var(--color-superficie); border: 1px solid var(--color-borde); }
.calculadora[hidden] { display: none; }
.calculadora__control { grid-column: 1 / 6; display: grid; gap: 12px; align-content: start; }
.calculadora__rotulo { display: flex; align-items: center; font: 600 var(--tam-lista)/1.5 var(--fuente); color: var(--color-primario-profundo); }
.calculadora__deslizador { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.calculadora__n { font: 700 var(--tam-medio)/1.1 var(--fuente); font-variant-numeric: tabular-nums; color: var(--color-primario); min-width: 4ch; text-align: right; }
.calculadora input[type="range"] { width: 100%; height: 44px; margin: 0; font: inherit; accent-color: var(--color-primario); cursor: pointer; }
.calculadora input[type="range"]:focus-visible { outline: 3px solid var(--color-enlace); outline-offset: 2px; border-radius: 8px; }
.calculadora__formula { font-size: var(--tam-apoyo); line-height: 1.5; color: var(--color-texto-2); max-width: 44ch; }
/* Las cifras se alinean arriba con el rótulo del deslizador y miden lo que su contenido (con la nota reservada), no lo
   que la columna del control: así ninguna caja queda medio vacía. */
.calculadora__cifras { grid-column: 6 / -1; align-self: start; display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: var(--canal); margin: 0; }
.calculadora__cifra { display: grid; gap: 4px; align-content: start; padding: 16px; border-radius: 12px; background: var(--color-fondo); }
.calculadora__cifra dt { display: flex; align-items: center; white-space: nowrap; font: 600 var(--tam-apoyo)/1.5 var(--fuente); color: var(--color-texto-2); }
.calculadora__valor { margin: 0; font: 700 var(--tam-medio)/1.1 var(--fuente); font-variant-numeric: tabular-nums; color: var(--color-primario-profundo); transition: color var(--t-ui) ease; }
.calculadora__total { background: var(--color-primario-suave); }
.calculadora__total .calculadora__valor { color: var(--color-primario); font-size: var(--tam-cifra); }
.calculadora__nota { margin: 0; min-height: 42px; font-size: var(--tam-apoyo); line-height: 1.5; color: var(--color-texto-2); }
.calculadora__nota[hidden] { display: block; visibility: hidden; }
.respaldo { margin-top: 16px; }
.respaldo .planes__ejemplos { margin-top: 8px; }
.js .planes__condiciones { display: none; }

/* Tras enviar, la tarjeta del formulario muestra qué pasa ahora y la salida para otra solicitud. */
.formulario > [hidden], .formulario .campo-par[hidden] { display: none; }
.formulario__despues { display: grid; gap: 16px; }
.formulario__despues[hidden] { display: none; }
.formulario__despues-titulo { font: 700 var(--tam-tarjeta)/1.3 var(--fuente); color: var(--color-primario-profundo); }
.formulario__pasos { max-width: none; }
.formulario__otra { justify-self: start; border: 0; background: none; padding: 0 4px; font-size: var(--tam-lista); cursor: pointer; }


/* ---- Sin JavaScript o sin WebGL: el valle queda como portada fija (la imagen de la maqueta) y las seis tarjetas bajan
   a una lista en la rejilla de la hoja, justo debajo; los accesos son anclas a cada tarjeta. Con la maqueta viva
   valle.js pone data-modo="tarjeta" y vale todo lo anterior; con JavaScript, mientras el módulo carga, la lista no se
   ve (no hay salto). valle.js pone data-modo="lista" si no hay WebGL. ---- */

.valle:not([data-modo="tarjeta"]) { height: auto; min-height: 0; overflow: visible; padding-top: max(520px, 100vh); padding-top: max(520px, 100svh); }
.valle:not([data-modo="tarjeta"]) .escena, .valle:not([data-modo="tarjeta"]) .valle__capa { bottom: auto; height: 100vh; height: 100svh; min-height: 520px; }
.valle:not([data-modo="tarjeta"]) .escena { background: var(--escena-cielo) url("valle-portada-4.webp") 58% 46% / cover no-repeat; }
.valle:not([data-modo="tarjeta"]) .escena__lienzo, .valle:not([data-modo="tarjeta"]) .puntos, .valle:not([data-modo="tarjeta"]) .escena__burbujas,
.valle:not([data-modo="tarjeta"]) [data-accion="recorrer"], .valle:not([data-modo="tarjeta"]) .paradas__cerrar,
.valle:not([data-modo="tarjeta"]) .paradas__controles, .valle:not([data-modo="tarjeta"]) .paradas__avance { display: none; }
.valle:not([data-modo="tarjeta"]) .paradas {
    position: relative; inset: auto; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--canal);
    width: min(var(--ancho), 100% - 2 * var(--margen)); max-height: none; margin: 0 auto;
    padding: 72px 0 96px; overflow: visible; border: 0; border-radius: 0; background: none; animation: none;
}
.paradas__cabeza { display: none; }
.valle:not([data-modo="tarjeta"]) .paradas__cabeza { display: grid; gap: 16px; grid-column: 1 / -1; margin-bottom: 16px; }
.paradas__intro { margin: 0; max-width: 32ch; font: 700 var(--tam-titulo)/1.15 var(--fuente-titulo); color: var(--color-primario); }
.valle:not([data-modo="tarjeta"]) .parada {
    display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px 28px 24px; overflow: visible; animation: none;
    scroll-margin-top: calc(var(--barra-alto) + 24px);
    border: 1px solid var(--color-borde); border-radius: 28px; background: var(--color-superficie);
}
.valle:not([data-modo="tarjeta"]) .parada__lugar { padding-right: 0; }
.valle:not([data-modo="tarjeta"]) .parada h2 { font-size: 1.75rem; }
.valle:not([data-modo="tarjeta"]) .parada__enlace { margin-top: auto; }
.js .valle:not([data-modo]) .paradas { display: none; }
@media (max-width: 1180px) {
    .valle:not([data-modo="tarjeta"]) .paradas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .valle:not([data-modo="tarjeta"]) .paradas { padding: 48px 0 64px; }
    .valle:not([data-modo="tarjeta"]) .parada { padding: 24px 20px 20px; }
    .valle:not([data-modo="tarjeta"]) .parada h2 { font-size: 1.5rem; padding-right: 0; }
}
@media (max-width: 560px) {
    .valle:not([data-modo="tarjeta"]) .paradas { grid-template-columns: 1fr; }
}

/* ---- Tamaños ---- */

@media (max-width: 1180px) {
    :root { --tam-titulo: 2.5rem; }
    .barra__menu { display: none; }
    .barra__menu-boton { display: inline-flex; }
    .seccion__interior--lado { grid-template-columns: 1fr; gap: 32px; }
    .seccion__interior--lado .seccion__cabeza, .seccion__interior--lado .tarjetas, .seccion__interior--lado .seccion__puente { grid-column: auto; }
    .seccion__interior--lado .seccion__cabeza { position: static; margin-top: 0; }
    .tiles, .tiles--tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pasos, .compromisos, .compromisos--tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .producto__cabeza { grid-template-columns: 1fr; }
    .producto__texto, .puertas { grid-column: auto; }
    .segmentos.segmentos--puertas { flex-wrap: wrap; border-radius: 12px; }
    .escenario { min-height: 0; }
    .pantalla { grid-template-columns: 1fr; }
    .pantalla__texto, .pantalla__marco { grid-column: auto; }
    .pantalla__texto { padding-bottom: 0; }
    .pantalla__marco--celular { min-height: 0; }
    .escenario__controles { grid-column: auto; grid-row: 2; margin-top: 24px; }
    .seccion__interior--lado .modulos__panel { grid-column: auto; }
    .preguntas__bloque, .nosotros { grid-template-columns: 1fr; }
    .js .preguntas__cuerpo { grid-template-columns: 1fr; }
    .js .preguntas__lado, .js .preguntas__bloques { grid-column: auto; }
    .js .preguntas__lado { position: static; }
    .preguntas__temas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .calculadora__control, .calculadora__cifras { grid-column: 1 / -1; }
    .condiciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pie__columna--producto { grid-column: span 3; }
    .preguntas__bloque > h3, .preguntas__bloque .preguntas, .nosotros__texto, .nosotros__tarjeta { grid-column: auto; }
    .preguntas__bloque > h3 { padding-top: 0; }
    .paso:nth-child(2n)::before { display: none; }
    .pie__marca { grid-column: 1 / -1; }
    .pie__columna { grid-column: span 3; }
    .pie__columna--producto { grid-column: span 3; }
}

@media (max-width: 900px) {
    :root { --margen: 16px; --canal: 16px; --seccion: 48px; --barra-alto: 64px; --tam-cuerpo: 16px; --tam-tarjeta: 18px; --tam-cifra: 24px; --tam-titulo: 32px; --tam-portada: 36px; }
    /* En celular el velo sube desde abajo y la tarjeta es una hoja inferior que tapa los accesos; la maqueta se corre
       hacia arriba (camara.js) para que el punto quede sobre ella. La barra de accesos se desliza de lado. */
    .escena::after { background: linear-gradient(180deg, rgba(var(--velo), 0) 30%, rgba(var(--velo), 0.9) 60%); }
    .valle__capa { padding-bottom: 16px; }
    .valle__portada { gap: 12px; margin: 0 0 16px -12px; padding: 16px 12px 20px; border-radius: 16px; }
    .valle__portada h1 { font-size: 2rem; }
    .valle__pie { gap: 8px; }
    .accesos { min-width: 0; overflow-x: auto; scrollbar-width: none; }
    .accesos::-webkit-scrollbar { display: none; }
    .acceso { padding: 0 14px 0 10px; }
    .valle__mas { flex: none; padding: 0; width: 48px; justify-content: center; }
    .valle__mas span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .paradas { inset: auto 0 0; width: auto; max-height: min(64%, 520px); padding: 20px 16px 16px; border-radius: 28px 28px 0 0; border-width: 1px 0 0; gap: 12px; }
    .paradas__cerrar { top: 8px; right: 8px; }
    .parada { gap: 10px; }
    .parada h2 { font-size: 1.625rem; padding-right: 40px; }
    .parada__resumen { font-size: var(--tam-lista); }
    .punto__pildora { min-height: 32px; padding: 0 12px 0 8px; }
    .seccion { padding-block: 32px; }
    .hoja .seccion:first-child { padding-top: 72px; }
    .seccion__cabeza { margin-bottom: 32px; }
    .planes { grid-template-columns: 1fr; }
    .avisos, .cifras, .compromisos--lista, .calculadora__cifras, .condiciones, .hechos { grid-template-columns: 1fr; }
    .requisitos.lista-vistos--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .segmentos { border-radius: 12px; }
    .segmento { flex: 1 1 50%; justify-content: center; }
    .js .tarjeta--area .tarjeta__lista { grid-template-columns: 1fr; }
    .lista-vistos--dos { grid-template-columns: 1fr; }
    .pantalla__marco--celular { padding: 16px; border-radius: 16px; }
    .ventana__direccion { min-width: 0; }
    .comparacion thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .comparacion tr { display: grid; }
    .comparacion td { width: auto; display: block; padding: 12px 16px; }
    .comparacion td:first-child { padding-left: 56px; }
    .comparacion td + td { border-left: 0; border-top: 0; padding-top: 0; padding-left: 16px; }
    .sintesis { grid-template-columns: 1fr; padding: 20px; }
    .sintesis__texto, .sintesis__cifras { grid-column: auto; }
    .sintesis__cifras { grid-template-columns: 1fr; }
    .comparacion td::before { display: block; font: 600 var(--tam-pequeno)/1.5 var(--fuente); color: var(--color-texto-2); content: "Hoy, en muchas instituciones"; }
    .comparacion td + td::before { content: "Con SOFTIA"; }
    @supports (grid-template-rows: subgrid) {
        .plan { grid-template-rows: auto; grid-row: auto; }
    }
    .demostracion { grid-template-columns: 1fr; gap: 32px; }
    .demostracion__texto, .formulario { grid-column: auto; }
    .demostracion__texto { position: static; }
    .formulario { padding: 24px 20px; }
    .planes__ejemplos th, .planes__ejemplos td { padding: 0 12px; }
    .pie { padding-top: 56px; }
    .pie__columnas { gap: 32px var(--canal); }
    .pie__columna { grid-column: span 6; }
    .pie__columna li { min-height: 48px; }
    .pie a { min-height: 48px; }
}

@media (max-width: 560px) {
    .tarjetas, .tiles, .tiles--tres, .pasos, .compromisos, .compromisos--tres, .campo-par { grid-template-columns: 1fr; }
    /* En una sola columna los pasos se encadenan en vertical: el número a la izquierda y la línea baja hasta el siguiente. */
    .pasos { gap: 24px; }
    .paso { grid-template-columns: 40px 1fr; column-gap: 16px; gap: 4px 16px; }
    .paso__numero { grid-row: 1 / span 2; }
    .paso:not(:last-child)::before { top: 48px; left: 19px; right: auto; bottom: -20px; width: 2px; height: auto; }
    .paso:nth-child(2n)::before { display: block; }
    .paso p { max-width: none; }
    .aviso { align-items: flex-start; padding: 20px; }
    .incluido { padding: 16px; }
    .incluido__lista { display: grid; gap: 8px; }
    .formulario .boton { justify-self: stretch; }
    .pie__columna, .pie__columna--producto { grid-column: 1 / -1; }
    .pie__columna.pie__columna--producto ul { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
    .preguntas__temas { grid-template-columns: 1fr; }
    .requisitos.lista-vistos--dos { grid-template-columns: 1fr; }
    .segmento { flex-basis: 100%; }
    .barra__accion { min-height: 44px; padding: 0 16px; }
    .barra__accion-larga { display: none; }
    .barra__accion-corta { display: inline; }
    .barra__menu-boton { padding: 0 12px; }
    /* En celular las dos acciones de la portada van una sobre otra, a todo el ancho. */
    .valle__portada { justify-items: stretch; }
    .valle__portada .acciones { display: grid; grid-template-columns: 1fr; gap: 8px; }
}

/* ---- Movimiento reducido: todo lo que aparece, cambia o se desplaza lo hace de inmediato; el indicador de carga del
   botón sigue girando porque es información, no adorno. ---- */
@media (prefers-reduced-motion: reduce) {
    .menu-movil, .despliegue, .escena::after, .valle__portada, .paradas, .parada, .punto, .punto__pildora, .acceso, .barra::before, .tarjeta__enlace svg, .boton, .burbuja,
    .js .apilados > [role="tabpanel"], .js .globo, .area-tab, .area-tab .icono, .segmento, .chip, .chip::after, .escenario__boton, .ventana__completa, .preguntas__tema, .calculadora__valor, .ilustracion--publico > picture {
        transition-duration: 0.01ms !important; animation-duration: 0.01ms !important;
    }
    .pantalla, .js .comparacion tbody tr, .js .preguntas__bloque .preguntas { animation: none; }
}

/* ---- Páginas legales (tratamiento de datos y términos): la barra sólida de la hoja, el documento en una tarjeta de
   superficie sobre el fondo de la página y el mismo pie. El texto corre en una columna de 72 caracteres como máximo;
   el índice va a la izquierda en computador y arriba en celular. ---- */
.legal { padding: calc(var(--barra-alto) + 48px) 0 var(--seccion); }
.legal__rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--canal); align-items: start; }
.legal__indice { grid-column: 1 / 4; position: sticky; top: calc(var(--barra-alto) + 24px); }
.legal__indice h2 { font: 600 var(--tam-lista)/1.5 var(--fuente); color: var(--color-primario); margin-bottom: 8px; }
.legal__indice ol { list-style: none; padding: 0; display: grid; }
.legal__indice a {
    display: flex; align-items: center; min-height: 40px; padding: 0 12px; margin-inline: -12px; border-radius: 8px;
    font-size: var(--tam-apoyo); line-height: 1.4; color: var(--color-texto-2); text-decoration: none;
}
.legal__indice a:hover { background: var(--capa-hover); color: var(--color-texto); }
.legal__indice a:active { background: var(--capa-presion); }
.legal__documento {
    grid-column: 4 / -1; display: grid; gap: 16px; padding: 48px; border-radius: 16px; background: var(--color-superficie);
    border: 1px solid var(--color-borde);
}
.legal__documento > * { max-width: 72ch; }
.legal__documento h1 { color: var(--color-primario-profundo); }
.legal__documento h2 { margin-top: 24px; font: 700 var(--tam-medio)/1.3 var(--fuente); color: var(--color-primario); scroll-margin-top: calc(var(--barra-alto) + 24px); }
.legal__documento h3 { margin-top: 8px; font: 600 var(--tam-cuerpo)/1.5 var(--fuente); color: var(--color-primario-profundo); }
.legal__documento ul, .legal__documento ol { padding-left: 24px; display: grid; gap: 8px; }
.legal__documento strong { font-weight: 600; }
.legal__fecha { font-size: var(--tam-apoyo); color: var(--color-texto-2); }
.legal__entrada { font-size: var(--tam-medio); line-height: 1.45; color: var(--color-texto-2); }
/* Lo que el dueño todavía debe llenar va marcado a la vista, con el amarillo suave de los avisos. */
.legal__marcador { padding: 0 4px; border-radius: 4px; background: var(--color-acento-suave); color: var(--color-sobre-acento-suave); font-weight: 600; }
@media (max-width: 900px) {
    .legal { padding-top: calc(var(--barra-alto) + 24px); }
    .legal__indice, .legal__documento { grid-column: 1 / -1; }
    .legal__indice { position: static; }
    .legal__documento { padding: 24px 16px; }
    .legal__entrada { font-size: var(--tam-tarjeta); }
    /* Sin el menú de píldoras (no hay menú desplegable en estas páginas), la acción sigue en la tercera columna. */
    .pagina-legal .barra__derecha { grid-column: 3; }
}