/* =========================================================================
   SETEGUA — Capa pública del portal (pre-inscripción y auto-inscripción)
   =========================================================================

   Este archivo NO es parte del UI Kit del portal administrativo
   (setegua-theme.css + setegua-ui.css). Es la contraparte, dentro del
   portal, del sistema visual de setegua.org: las páginas a las que llega
   alguien de fuera desde el botón "Pre-inscríbete" del sitio madre.

   La regla que ordena todo el archivo: los tokens de identidad son los
   MISMOS valores que publica setegua.org/css/styles.css. Si allá cambia
   la paleta o la tipografía, aquí se cambian estos mismos números y el
   embudo entero sigue siendo una sola pieza. Por eso los tokens van
   primero, solos, y nada más abajo escribe un color a mano.

   Prefijo `sp-` (setegua público) para que ninguna clase choque con las
   del UI Kit administrativo, que comparte navegador cuando un admin abre
   el portal y el formulario en dos pestañas.

   Las clases sin prefijo (.marca-nombre, .acento-titulo, .enlace-activo)
   se llaman igual que en setegua.org a propósito: son las mismas piezas,
   y quien conozca un repo reconoce el otro.
   ========================================================================= */

/* ======= Identidad =======
   Canales RGB sueltos, igual que el sitio madre, para poder aplicarles
   opacidad con rgb(var(--x) / 0.5). */
:root {
    --marca-navy: 1 10 114;          /* #010a72  azul institucional */
    --marca-navy-claro: 26 37 163;   /* #1a25a3  el mismo azul aclarado */
    --marca-oro: 250 223 26;         /* #fadf1a  amarillo institucional */
    --marca-oro-hover: 230 203 10;   /* #e6cb0a  un punto más hondo */
    /* El amarillo institucional da 1.34:1 sobre blanco: es ilegible como
       texto en fondo claro. Sobre azul luce entero; sobre blanco se usa
       esta entintada, que llega a 6.07:1. */
    --marca-oro-tinta: 111 99 0;     /* #6f6300 */
    --marca-claro: 245 246 252;      /* #f5f6fc  blanco con una gota de azul */

    --fuente-display: 'Cormorant Garamond', Georgia, serif;
    --fuente-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Grises: los de Tailwind, que son los que usa el sitio madre en su
       marcado (text-gray-600, text-gray-400...). */
    --gris-900: #111827;
    --gris-800: #1f2937;
    --gris-700: #374151;
    --gris-600: #4b5563;
    --gris-500: #6b7280;
    --gris-400: #9ca3af;
    --gris-300: #d1d5db;
    --gris-200: #e5e7eb;
    --gris-100: #f3f4f6;

    /* Señales de estado. El verde y el rojo no están en la paleta
       institucional (que es azul/blanco/amarillo) porque allá no hacen
       falta: aquí sí, un formulario tiene que poder decir "esto salió
       bien" y "esto salió mal" sin que el usuario lo deduzca del texto.
       Se eligieron oscuros para que pasen AA sobre su propio fondo claro. */
    --exito: 21 128 61;              /* #15803d */
    --exito-fondo: 240 253 244;      /* #f0fdf4 */
    --aviso: 161 98 7;               /* #a16207 */
    --aviso-fondo: 254 252 232;      /* #fefce8 */
    --error: 185 28 28;              /* #b91c1c */
    --error-fondo: 254 242 242;      /* #fef2f2 */

    --radio-chico: 0.5rem;
    --radio: 0.75rem;
    --radio-grande: 1.25rem;
    --radio-pildora: 9999px;

    --sombra-suave: 0 1px 3px rgb(1 10 114 / 0.06), 0 4px 16px rgb(1 10 114 / 0.06);
    --sombra-media: 0 4px 12px rgb(1 10 114 / 0.08), 0 12px 32px rgb(1 10 114 / 0.1);
    --sombra-alta: 0 12px 32px rgb(1 10 114 / 0.14), 0 24px 56px rgb(1 10 114 / 0.12);

    --alto-barra: 5rem;              /* h-20, el de setegua.org */
}

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

.sp-cuerpo {
    margin: 0;
    /* El mismo fondo del sitio madre (bg-brand-light): el blanco puro deja
       las tarjetas sin canto y la página se lee plana. */
    background-color: rgb(var(--marca-claro));
    color: var(--gris-800);
    font-family: var(--fuente-sans);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    /* La barra va fija: sin este hueco el primer bloque queda debajo. Las
       páginas con hero lo anulan con .sp-cuerpo--hero, porque allí la
       barra flota sobre la fotografía. */
    padding-top: var(--alto-barra);
}
.sp-cuerpo--hero { padding-top: 0; }

.sp-cuerpo ::selection {
    background: rgb(var(--marca-oro));
    color: rgb(var(--marca-navy));
}

.sp-cuerpo img { max-width: 100%; }

.sp-cuerpo a { color: rgb(var(--marca-navy)); }

/* ======= Tipografía ======= */
.font-display,
.sp-display { font-family: var(--fuente-display); }

/* La palabra que carga el mensaje, en cursiva y amarilla. Es el recurso
   que hace reconocibles los títulos del sitio madre; se usa igual aquí
   para que el titular del formulario pertenezca a la misma familia. */
.acento-titulo {
    font-style: italic;
    /* La cursiva de Cormorant está cargada hasta el peso 500; pedir 600
       haría que el navegador la inclinara a mano. */
    font-weight: 500;
    color: rgb(var(--marca-oro));
}
/* Sobre fondo claro el amarillo no se lee: ahí va la entintada. */
.sp-seccion .acento-titulo,
.sp-tarjeta .acento-titulo { color: rgb(var(--marca-oro-tinta)); }

.sp-titulo {
    margin: 0 0 0.75rem;
    font-family: var(--fuente-display);
    font-size: clamp(1.875rem, 3.4vw, 2.75rem);
    font-weight: 600;
    line-height: 1.15;
    color: rgb(var(--marca-navy));
    text-wrap: balance;
}
.sp-titulo--chico { font-size: clamp(1.5rem, 2.4vw, 2rem); }

.sp-entrada {
    max-width: 44rem;
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--gris-600);
}
.sp-entrada--centrada { margin-inline: auto; }

.sp-rotulo {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgb(var(--marca-oro-tinta));
}

/* ======= El nombre de la institución, armado como logotipo =======
   Dos renglones: el nombre arriba y la bajada debajo, más pequeña y más
   espaciada, calibrada para terminar donde termina la de arriba. Todo en
   em, así que la proporción aguanta en cualquier cuerpo. Los valores son
   los medidos en setegua.org. */
.marca-nombre {
    display: block;
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
}
.marca-nombre__linea {
    display: block;
    letter-spacing: 0.025em;
}
.marca-nombre__linea--bajada {
    font-size: var(--bajada-cuerpo, 0.62em);
    font-weight: var(--bajada-peso, 600);
    letter-spacing: var(--bajada-espaciado, 0.1203em);
    /* El espaciado se aplica también tras la última letra: sin descontarlo
       el renglón de abajo sobresaldría por la derecha. */
    margin-right: calc(var(--bajada-espaciado, 0.1203em) * -1);
}
/* En el pie el nombre va en caja alta y baja, donde el espaciado ancho de
   la barra se vería forzado: cada contexto fija los suyos. */
.marca-nombre--pie {
    --bajada-cuerpo: 0.7em;
    --bajada-peso: 700;
    --bajada-espaciado: 0.038em;
    text-transform: none;
}

/* ======= Contenedor y retícula ======= */
.sp-contenedor {
    max-width: 80rem;   /* max-w-7xl */
    margin: 0 auto;
    padding-inline: 1rem;
}
@media (min-width: 640px) { .sp-contenedor { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .sp-contenedor { padding-inline: 2rem; } }

.sp-contenedor--estrecho { max-width: 56rem; }
.sp-contenedor--angosto { max-width: 34rem; }
.sp-contenedor--medio { max-width: 64rem; }

.sp-seccion { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.sp-seccion--corta { padding-block: clamp(1.75rem, 4vw, 3rem); }
.sp-seccion--clara { background: #fff; }

/* Retícula de 12 columnas. Se apila entera por debajo de 768px: en un
   formulario largo, dos campos por fila en pantalla de teléfono obliga a
   escribir dentro de cajas de 140px. */
.sp-fila {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.25rem;
}
.sp-fila--apretada { gap: 0.875rem; }
.sp-fila--amplia { gap: 2rem; }
.sp-fila > * { grid-column: span 12; }

@media (min-width: 768px) {
    .sp-col-3 { grid-column: span 3; }
    .sp-col-4 { grid-column: span 4; }
    .sp-col-5 { grid-column: span 5; }
    .sp-col-6 { grid-column: span 6; }
    .sp-col-7 { grid-column: span 7; }
    .sp-col-8 { grid-column: span 8; }
    .sp-col-9 { grid-column: span 9; }
    .sp-col-12 { grid-column: span 12; }
}

/* ======= Barra de navegación =======
   Misma estructura que la de setegua.org: fija, blanca translúcida con
   difuminado, 5rem de alto, logo + nombre a la izquierda, menú al centro
   y Portal + botón amarillo a la derecha. */
.sp-barra {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 50;
    background: rgb(255 255 255 / 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--gris-100);
    box-shadow: 0 1px 2px rgb(1 10 114 / 0.05);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.sp-barra__fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--alto-barra);
}

.sp-barra__marca {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}
@media (min-width: 1024px) { .sp-barra__marca { gap: 0.75rem; } }

.sp-barra__logo {
    width: 3.25rem;
    height: 3.25rem;
    object-fit: contain;
}
@media (min-width: 1024px) {
    .sp-barra__logo { width: 4.5rem; height: 4.5rem; }
}

.sp-barra .marca-nombre {
    font-size: 0.9375rem;
    color: rgb(var(--marca-navy));
}
@media (min-width: 1280px) { .sp-barra .marca-nombre { font-size: 1.0625rem; } }
/* Por debajo de 360px el nombre se queda pegado al botón del menú. */
@media (max-width: 359px) { .sp-barra .marca-nombre { font-size: 0.8125rem; } }

.sp-barra__menu {
    display: none;
    align-items: center;
    gap: 1.75rem;
}
@media (min-width: 1024px) { .sp-barra__menu { display: flex; } }

.sp-barra__enlace {
    font-weight: 500;
    color: var(--gris-600);
    text-decoration: none;
    transition: color 0.2s ease;
}
.sp-barra__enlace:hover { color: rgb(var(--marca-oro-tinta)); }

.sp-barra__acciones {
    display: none;
    align-items: center;
    gap: 1rem;
}
@media (min-width: 1024px) { .sp-barra__acciones { display: flex; } }

.sp-barra__portal {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: rgb(var(--marca-navy));
    text-decoration: none;
    transition: color 0.2s ease;
}
.sp-barra__portal:hover { color: rgb(var(--marca-oro-tinta)); }

.sp-barra__hamburguesa {
    display: flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border: 0;
    border-radius: var(--radio-chico);
    background: none;
    font-size: 1.75rem;
    line-height: 1;
    color: rgb(var(--marca-navy));
    cursor: pointer;
}
@media (min-width: 1024px) { .sp-barra__hamburguesa { display: none; } }

/* La página en la que estás se marca con un trazo amarillo bajo el
   enlace: el amarillo funciona aquí como resaltador, que es su papel, y
   el texto se queda en azul, donde sí se lee. */
.enlace-activo {
    position: relative;
    font-weight: 600;
    color: rgb(var(--marca-navy));
}
.enlace-activo::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -0.4rem;
    left: 0;
    height: 3px;
    border-radius: 2px;
    background: rgb(var(--marca-oro));
}

/* ---- Menú desplegado ---- */
.sp-barra--abierta {
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.sp-menu-movil {
    display: none;
    padding: 1rem 0 1.25rem;
    border-top: 1px solid var(--gris-100);
}
.sp-menu-movil.es-visible { display: block; }
@media (min-width: 1024px) { .sp-menu-movil.es-visible { display: none; } }

.sp-menu-movil__enlace {
    display: block;
    padding: 0.625rem 0;
    font-weight: 500;
    color: var(--gris-700);
    text-decoration: none;
}
.sp-menu-movil__enlace:hover { color: rgb(var(--marca-oro-tinta)); }

/* Todo el ancho: un subrayado se leería como separador entre filas, así
   que el trazo del enlace activo se pasa al costado. */
.sp-menu-movil .enlace-activo::after {
    top: 0.35rem;
    right: auto;
    bottom: 0.35rem;
    left: -0.75rem;
    width: 3px;
    height: auto;
}

.sp-menu-movil__pie {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--gris-100);
    display: grid;
    gap: 0.75rem;
}

/* ---- La barra sobre el hero ----
   Mientras el hero está detrás, la barra se vuelve transparente y el
   logotipo pasa al blanco. Esta clase la pone el JavaScript, nunca al
   revés: si el guion fallara quedaría una barra blanca legible en vez de
   texto blanco sobre fondo blanco. */
.sp-barra__logo--blanco { display: none; }

.sp-barra--sobre-hero:not(.sp-barra--abierta) {
    background: transparent;
    /* El difuminado sólo alcanza el alto de la barra: deja una franja de
       fotografía borrosa con un canto recto justo debajo, que es lo que
       más delata que ahí hay una barra. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
    box-shadow: none;
}

/* El apoyo de contraste no vive en el fondo de la barra, que terminaría
   siempre en un filo recto, sino en una sombra que la desborda por debajo
   y se apaga sin canto. */
.sp-barra--sobre-hero:not(.sp-barra--abierta)::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 13rem;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(to bottom,
        rgb(var(--marca-navy) / 0.5) 0%,
        rgb(var(--marca-navy) / 0.42) 30%,
        rgb(var(--marca-navy) / 0.18) 62%,
        rgb(var(--marca-navy) / 0) 100%);
}

/* La sombra se queda a media fuerza a propósito: sola no basta sobre una
   foto clara. Lo que cierra el contraste es la sombra del propio texto. */
.sp-barra--sobre-hero:not(.sp-barra--abierta) .marca-nombre,
.sp-barra--sobre-hero:not(.sp-barra--abierta) .sp-barra__enlace,
.sp-barra--sobre-hero:not(.sp-barra--abierta) .sp-barra__portal,
.sp-barra--sobre-hero:not(.sp-barra--abierta) .sp-barra__hamburguesa {
    text-shadow: 0 1px 3px rgb(1 10 114 / 0.9), 0 2px 14px rgb(1 10 114 / 0.65);
}
.sp-barra--sobre-hero:not(.sp-barra--abierta) .sp-barra__logo--blanco {
    filter: drop-shadow(0 2px 6px rgb(1 10 114 / 0.6));
}

.sp-barra--sobre-hero:not(.sp-barra--abierta) .sp-barra__logo--color { display: none; }
.sp-barra--sobre-hero:not(.sp-barra--abierta) .sp-barra__logo--blanco { display: block; }
.sp-barra--sobre-hero:not(.sp-barra--abierta) .marca-nombre { color: #fff; }
.sp-barra--sobre-hero:not(.sp-barra--abierta) .sp-barra__enlace,
.sp-barra--sobre-hero:not(.sp-barra--abierta) .sp-barra__portal { color: #e5e7eb; }
.sp-barra--sobre-hero:not(.sp-barra--abierta) .sp-barra__enlace:hover,
.sp-barra--sobre-hero:not(.sp-barra--abierta) .sp-barra__portal:hover { color: rgb(var(--marca-oro)); }
.sp-barra--sobre-hero:not(.sp-barra--abierta) .enlace-activo { color: #fff; }
.sp-barra--sobre-hero:not(.sp-barra--abierta) .sp-barra__hamburguesa { color: #fff; }

/* ======= Hero =======
   Foto velada sobre el navy de marca, en tres capas y no en un solo
   background apilado: la foto tiene que poder moverse (el acercamiento
   lento) sin arrastrar consigo el velo, que debe quedarse quieto.
   El background-color queda de respaldo: si la imagen no carga, el hero
   sigue siendo navy sólido en vez de transparente. */
.sp-hero {
    position: relative;
    /* Contexto de apilado propio: así las capas con z-index negativo
       quedan detrás del contenido de la sección y no detrás de la página. */
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 30rem;
    padding-top: var(--alto-barra);
    background-color: #010a72;
    color: #fff;
    text-align: center;
}
@media (min-width: 1024px) {
    .sp-hero { min-height: 34rem; text-align: left; }
}

.sp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--hero-foto, url('../img/publico/hero-setegua.jpg'));
    background-size: cover;
    background-position: center;
    /* Acercamiento lento, el mismo del sitio madre: termina en su sitio
       (forwards) y no se repite, un vaivén continuo distrae al leer. */
    transform: scale(1.09);
    animation: sp-acercamiento-lento 14s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* El velo se abre hacia la derecha: denso donde vive el texto y tenue
   donde se quiere ver la foto. Es lo que sostiene el contraste, de modo
   que cambiar una foto nunca puede dejar un titular ilegible. */
.sp-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom,
        rgb(var(--marca-navy) / 0.88) 0%,
        rgb(var(--marca-navy) / 0.78) 45%,
        rgb(var(--marca-navy) / 0.7) 100%);
}
@media (min-width: 1024px) {
    /* En horizontal el texto ocupa la mitad izquierda, así que el velo
       puede abrirse de lado y dejar ver la fotografía. */
    .sp-hero::after {
        background: linear-gradient(to right,
            rgb(var(--marca-navy) / 0.9) 0%,
            rgb(var(--marca-navy) / 0.72) 45%,
            rgb(var(--marca-navy) / 0.35) 80%,
            rgb(var(--marca-navy) / 0.2) 100%);
    }
}

@keyframes sp-acercamiento-lento {
    from { transform: scale(1.09); }
    to   { transform: scale(1); }
}

.sp-hero__contenido { padding-block: clamp(3rem, 8vw, 5rem); }

.sp-hero__titulo {
    /* Estrecho a propósito: el texto tiene que caber en el tramo sólido
       del velo. Si se pasara al degradado, la última palabra de cada
       renglón quedaría sobre la foto sin nada que le sostenga el contraste. */
    max-width: 20ch;
    margin: 0 auto 1.25rem;
    font-family: var(--fuente-display);
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    font-weight: 600;
    line-height: 1.1;
    color: #fff;
    text-wrap: balance;
    /* El velo no es un bloque opaco, así que el texto lleva su propia
       sombra: le da un borde contra cualquier detalle claro de la foto. */
    text-shadow: 0 2px 12px rgb(1 10 114 / 0.55);
}

.sp-hero__entrada {
    max-width: 34rem;
    margin: 0 auto;
    font-size: 1.125rem;
    line-height: 1.65;
    /* Blanco puro, no un gris: es lo que permite bajar la rampa del velo.
       La jerarquía frente al título la llevan el cuerpo y la familia. */
    color: #fff;
    text-shadow: 0 1px 8px rgb(1 10 114 / 0.5);
}

.sp-hero__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
}

@media (min-width: 1024px) {
    .sp-hero__titulo,
    .sp-hero__entrada { margin-left: 0; margin-right: 0; }
    .sp-hero__acciones { justify-content: flex-start; }
}

/* Hero corto para las páginas interiores del flujo (formulario, consulta,
   confirmación): la misma pieza sin fotografía, para que el paso a paso
   no obligue a desplazar media pantalla antes de llegar a los campos. */
.sp-hero--interior {
    min-height: 0;
    /* Estas páginas no llevan la barra encima, así que el hueco de la barra ya
       lo pone .sp-cuerpo: repetirlo aquí dejaba 10rem de azul vacío arriba. */
    padding-top: 0;
    text-align: center;
}
.sp-hero--interior::before { display: none; }
.sp-hero--interior::after {
    background: linear-gradient(135deg,
        rgb(var(--marca-navy)) 0%,
        rgb(var(--marca-navy-claro)) 100%);
}
.sp-hero--interior .sp-hero__contenido { padding-block: clamp(2.25rem, 5vw, 3.5rem); }
.sp-hero--interior .sp-hero__titulo {
    max-width: 30ch;
    margin-inline: auto;
    font-size: clamp(1.75rem, 3.6vw, 2.5rem);
}
.sp-hero--interior .sp-hero__entrada { margin-inline: auto; }
@media (min-width: 1024px) {
    .sp-hero--interior { text-align: center; }
    .sp-hero--interior .sp-hero__titulo,
    .sp-hero--interior .sp-hero__entrada { margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .sp-hero::before { animation: none; transform: none; }
}

/* ======= Botones =======
   El amarillo es el botón principal del sitio madre: píldora, texto navy,
   sombra teñida y un empujón de medio píxel al pasar el puntero. */
.sp-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    border: 2px solid transparent;
    border-radius: var(--radio-pildora);
    font-family: var(--fuente-sans);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease,
                transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.sp-boton:hover { transform: translateY(-2px); }
.sp-boton:disabled,
.sp-boton[aria-disabled="true"] {
    opacity: 0.6;
    transform: none;
    cursor: not-allowed;
}

.sp-boton--oro {
    background: rgb(var(--marca-oro));
    color: rgb(var(--marca-navy));
    box-shadow: 0 10px 15px -3px rgb(var(--marca-oro) / 0.3);
}
.sp-boton--oro:hover { background: rgb(var(--marca-oro-hover)); color: rgb(var(--marca-navy)); }

.sp-boton--navy {
    background: rgb(var(--marca-navy));
    color: #fff;
    box-shadow: 0 10px 15px -3px rgb(var(--marca-navy) / 0.25);
}
.sp-boton--navy:hover { background: rgb(var(--marca-navy-claro)); color: #fff; }

.sp-boton--linea {
    background: transparent;
    border-color: rgb(var(--marca-navy) / 0.25);
    color: rgb(var(--marca-navy));
}
.sp-boton--linea:hover {
    border-color: rgb(var(--marca-navy));
    background: rgb(var(--marca-navy) / 0.04);
}

/* Sobre el hero: borde blanco, relleno translúcido. */
.sp-boton--claro {
    background: rgb(255 255 255 / 0.1);
    border-color: rgb(255 255 255 / 0.6);
    color: #fff;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.sp-boton--claro:hover {
    background: #fff;
    border-color: #fff;
    color: rgb(var(--marca-navy));
}

.sp-boton--chico { padding: 0.5rem 1.15rem; font-size: 0.875rem; }
.sp-boton--ancho { width: 100%; }

.sp-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}
.sp-acciones--centradas { justify-content: center; }

/* ======= Tarjetas ======= */
.sp-tarjeta {
    background: #fff;
    border: 1px solid var(--gris-100);
    border-radius: var(--radio-grande);
    box-shadow: var(--sombra-suave);
    overflow: hidden;
}
.sp-tarjeta--elevable { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.sp-tarjeta--elevable:hover { transform: translateY(-6px); box-shadow: var(--sombra-media); }
/* Filo amarillo arriba: es el resaltador de la marca puesto al servicio
   de "esta es la tarjeta que importa de la página". */
.sp-tarjeta--destacada { border-top: 4px solid rgb(var(--marca-oro)); }

.sp-tarjeta__encabezado {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 1.15rem 1.5rem;
    border-bottom: 1px solid var(--gris-100);
    background: rgb(var(--marca-claro) / 0.6);
    font-family: var(--fuente-display);
    font-size: 1.375rem;
    font-weight: 600;
    color: rgb(var(--marca-navy));
}
.sp-tarjeta__encabezado i { color: rgb(var(--marca-oro-tinta)); }

.sp-tarjeta__cuerpo { padding: 1.5rem; }
@media (min-width: 768px) { .sp-tarjeta__cuerpo { padding: 2rem; } }

.sp-tarjeta__pie {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--gris-100);
    background: rgb(var(--marca-claro) / 0.6);
}

/* ======= Pasos numerados ======= */
.sp-paso { height: 100%; text-align: center; }
.sp-paso__numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 1rem;
    border-radius: var(--radio-pildora);
    background: rgb(var(--marca-navy));
    font-family: var(--fuente-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: rgb(var(--marca-oro));
}
.sp-paso__titulo {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: rgb(var(--marca-navy));
}
.sp-paso__texto { margin: 0; color: var(--gris-600); }

/* ======= Lista de requisitos ======= */
.sp-lista {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.75rem;
}
.sp-lista li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    color: var(--gris-700);
}
.sp-lista li::before {
    content: '26a';                 /* bi-check-circle-fill */
    flex-shrink: 0;
    font-family: 'bootstrap-icons';
    /* Sin esto, dentro de un <strong> el navegador intenta engrosar la fuente
       de iconos y el glifo se deforma. */
    font-weight: normal;
    font-size: 1.05rem;
    line-height: 1.5;
    color: rgb(var(--marca-oro-tinta));
}

/* Lista ordenada de próximos pasos: el número va en amarillo entintado
   dentro de un disco claro, no como viñeta del navegador. */
.sp-pasos-numerados {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: sp-paso;
    display: grid;
    gap: 1.25rem;
}
.sp-pasos-numerados > li {
    counter-increment: sp-paso;
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: 0.875rem;
    align-items: start;
}
.sp-pasos-numerados > li::before {
    content: counter(sp-paso);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radio-pildora);
    background: rgb(var(--marca-navy) / 0.08);
    font-weight: 700;
    font-size: 0.875rem;
    color: rgb(var(--marca-navy));
}

/* ======= Notas (la contraparte pública de los alert) ======= */
.sp-nota {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border: 1px solid transparent;
    border-left-width: 4px;
    border-radius: var(--radio);
    font-size: 0.9375rem;
}
.sp-nota > i { flex-shrink: 0; font-size: 1.15rem; line-height: 1.4; }
.sp-nota p:last-child { margin-bottom: 0; }

.sp-nota--info {
    background: rgb(var(--marca-navy) / 0.05);
    border-color: rgb(var(--marca-navy) / 0.12);
    border-left-color: rgb(var(--marca-navy));
    color: var(--gris-700);
}
.sp-nota--info > i { color: rgb(var(--marca-navy)); }

.sp-nota--aviso {
    background: rgb(var(--aviso-fondo));
    border-color: rgb(var(--aviso) / 0.2);
    border-left-color: rgb(var(--aviso));
    color: #713f12;
}
.sp-nota--aviso > i { color: rgb(var(--aviso)); }

.sp-nota--exito {
    background: rgb(var(--exito-fondo));
    border-color: rgb(var(--exito) / 0.2);
    border-left-color: rgb(var(--exito));
    color: #14532d;
}
.sp-nota--exito > i { color: rgb(var(--exito)); }

.sp-nota--error {
    background: rgb(var(--error-fondo));
    border-color: rgb(var(--error) / 0.2);
    border-left-color: rgb(var(--error));
    color: #7f1d1d;
}
.sp-nota--error > i { color: rgb(var(--error)); }

/* ======= Formulario ======= */
.sp-bloque {
    padding-top: 1.75rem;
    margin-top: 1.75rem;
    border-top: 1px solid var(--gris-100);
}
.sp-bloque--primero { padding-top: 0; margin-top: 0; border-top: 0; }

.sp-bloque__titulo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.25rem;
    font-family: var(--fuente-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: rgb(var(--marca-navy));
}
.sp-bloque__titulo i { font-size: 1.15rem; color: rgb(var(--marca-oro-tinta)); }

.sp-bloque__nota {
    margin: -0.5rem 0 1rem;
    font-size: 0.9375rem;
    color: var(--gris-500);
}

.sp-etiqueta {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gris-700);
}
.sp-etiqueta .sp-opcional { font-weight: 400; color: var(--gris-400); }

.sp-requerido { color: rgb(var(--error)); }

.sp-campo,
.sp-selector {
    display: block;
    width: 100%;
    padding: 0.7rem 0.95rem;
    border: 1px solid var(--gris-300);
    border-radius: var(--radio-chico);
    background: #fff;
    font-family: var(--fuente-sans);
    font-size: 0.9375rem;
    color: var(--gris-900);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sp-campo::placeholder { color: var(--gris-400); }
.sp-campo:focus,
.sp-selector:focus {
    outline: none;
    border-color: rgb(var(--marca-navy));
    box-shadow: 0 0 0 3px rgb(var(--marca-navy) / 0.12);
}
.sp-campo:disabled,
.sp-selector:disabled {
    background: var(--gris-100);
    color: var(--gris-500);
    cursor: not-allowed;
}
textarea.sp-campo { min-height: 5rem; resize: vertical; }

.sp-selector {
    /* Flecha propia: la del navegador cambia de forma entre Chrome, Safari
       y Firefox, y al lado de los campos de texto se nota. */
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234b5563'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 0.9rem;
}

/* Mensaje de validación de jQuery unobtrusive. */
.sp-error,
.field-validation-error {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgb(var(--error));
}
.field-validation-valid { display: none; }
.sp-campo.input-validation-error,
.sp-selector.input-validation-error { border-color: rgb(var(--error)); }

.sp-resumen-errores {
    margin-bottom: 1.25rem;
    padding: 1rem 1.25rem;
    border: 1px solid rgb(var(--error) / 0.2);
    border-left: 4px solid rgb(var(--error));
    border-radius: var(--radio);
    background: rgb(var(--error-fondo));
    color: #7f1d1d;
}
.sp-resumen-errores ul { margin: 0; padding-left: 1.25rem; }
.sp-resumen-errores:empty,
.validation-summary-valid { display: none; }

/* ---- Casilla de compromiso ---- */
.sp-casilla {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
}
.sp-casilla input[type="checkbox"] {
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: 0.1rem;
    accent-color: rgb(var(--marca-navy));
    cursor: pointer;
}
.sp-casilla span { font-weight: 600; color: var(--gris-800); }

/* El texto del compromiso: justificado y con más interlínea, es un
   párrafo legal y se lee entero o no se lee. */
.sp-compromiso {
    margin: 0 0 1.25rem;
    text-align: justify;
    line-height: 1.8;
    color: var(--gris-600);
    font-size: 0.9375rem;
}

/* ======= Dato mostrado (confirmación / consulta) ======= */
.sp-dato__etiqueta {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gris-400);
}
.sp-dato__valor {
    margin: 0;
    font-size: 1.0625rem;
    color: var(--gris-900);
}
.sp-dato__valor--fuerte {
    font-family: var(--fuente-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: rgb(var(--marca-navy));
}

.sp-separador {
    height: 1px;
    margin-block: 1.5rem;
    border: 0;
    background: var(--gris-100);
}

/* ======= Campo con botón pegado (token) ======= */
.sp-grupo-campo {
    display: flex;
    border: 1px solid var(--gris-300);
    border-radius: var(--radio-chico);
    background: #fff;
    overflow: hidden;
}
.sp-grupo-campo:focus-within {
    border-color: rgb(var(--marca-navy));
    box-shadow: 0 0 0 3px rgb(var(--marca-navy) / 0.12);
}
.sp-grupo-campo__icono {
    display: flex;
    align-items: center;
    padding-left: 0.95rem;
    color: var(--gris-400);
}
.sp-grupo-campo input {
    flex: 1;
    min-width: 0;
    padding: 0.7rem 0.95rem;
    border: 0;
    background: none;
    font-family: var(--fuente-sans);
    font-size: 0.9375rem;
    color: var(--gris-900);
}
.sp-grupo-campo input:focus { outline: none; }
.sp-grupo-campo__boton {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 1.25rem;
    border: 0;
    border-left: 1px solid var(--gris-200);
    background: rgb(var(--marca-navy));
    font-family: var(--fuente-sans);
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.sp-grupo-campo__boton:hover { background: rgb(var(--marca-navy-claro)); }

/* El token es un código que la gente copia y teclea: en la tipografía del
   sitio 0 y O se parecen demasiado. */
.sp-monoespacio {
    font-family: ui-monospace, 'Cascadia Mono', 'Consolas', monospace;
    letter-spacing: 0.04em;
}

/* ======= Insignias de estado ======= */
.sp-insignia {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border-radius: var(--radio-pildora);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.sp-insignia--pendiente { background: rgb(var(--aviso-fondo)); color: rgb(var(--aviso)); }
.sp-insignia--aprobada { background: rgb(var(--exito-fondo)); color: rgb(var(--exito)); }
.sp-insignia--rechazada { background: rgb(var(--error-fondo)); color: rgb(var(--error)); }
.sp-insignia--neutra { background: var(--gris-100); color: var(--gris-600); }

/* Disco grande de resultado (la confirmación). */
.sp-sello {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: var(--radio-pildora);
    background: rgb(var(--exito-fondo));
    font-size: 3rem;
    color: rgb(var(--exito));
}

/* ======= Cabecera de sesión (auto-inscripción) =======
   El estudiante que entra con carnet y documento no tiene el portal
   completo detrás: esta franja es todo lo que le dice quién es y por
   dónde salir, así que lleva su nombre, su carnet y las dos acciones. */
.sp-sesion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem;
    border-radius: var(--radio-grande);
    background: linear-gradient(135deg,
        rgb(var(--marca-navy)) 0%,
        rgb(var(--marca-navy-claro)) 100%);
    color: #fff;
    box-shadow: var(--sombra-media);
}
.sp-sesion__avatar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radio-pildora);
    background: rgb(255 255 255 / 0.15);
    font-size: 1.75rem;
    color: rgb(var(--marca-oro));
}
.sp-sesion__datos { flex: 1 1 14rem; min-width: 0; }
.sp-sesion__nombre {
    margin: 0;
    font-family: var(--fuente-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
}
.sp-sesion__detalle {
    margin: 0.15rem 0 0;
    font-size: 0.9375rem;
    color: rgb(255 255 255 / 0.75);
}
.sp-sesion__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
/* Sobre el azul de la franja, el botón de contorno necesita el suyo. */
.sp-sesion .sp-boton--linea {
    border-color: rgb(255 255 255 / 0.45);
    color: #fff;
}
.sp-sesion .sp-boton--linea:hover {
    border-color: #fff;
    background: rgb(255 255 255 / 0.12);
}

/* ======= Tabla =======
   La única tabla del flujo público (el historial de inscripciones). Sin
   DataTables: son unas pocas filas y no necesitan buscador ni paginación. */
.sp-tabla-marco { overflow-x: auto; }
.sp-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}
.sp-tabla th {
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--gris-200);
    background: rgb(var(--marca-claro) / 0.6);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
    color: var(--gris-500);
    white-space: nowrap;
}
.sp-tabla td {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--gris-100);
    vertical-align: middle;
}
.sp-tabla tbody tr:last-child td { border-bottom: 0; }
.sp-tabla tbody tr:hover { background: rgb(var(--marca-claro) / 0.5); }
.sp-tabla__destacado { font-weight: 700; color: rgb(var(--marca-navy)); }
.sp-tabla__apunte {
    display: block;
    font-size: 0.8125rem;
    color: var(--gris-400);
}

/* ======= Cifra resumen ======= */
.sp-cifra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 100%;
    padding: 1.5rem;
}
.sp-cifra__rotulo {
    margin: 0 0 0.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gris-500);
}
.sp-cifra__valor {
    margin: 0;
    font-family: var(--fuente-display);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    color: rgb(var(--marca-navy));
}
.sp-cifra__icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radio);
    background: rgb(var(--marca-navy) / 0.08);
    font-size: 1.35rem;
    color: rgb(var(--marca-navy));
}
.sp-cifra__icono--oro {
    background: rgb(var(--marca-oro) / 0.18);
    color: rgb(var(--marca-oro-tinta));
}
.sp-cifra__icono--exito {
    background: rgb(var(--exito-fondo));
    color: rgb(var(--exito));
}

/* ======= Estado vacío ======= */
.sp-vacio {
    padding: 3.5rem 1.5rem;
    text-align: center;
    color: var(--gris-500);
}
.sp-vacio__icono {
    font-size: 3.5rem;
    line-height: 1;
    color: var(--gris-300);
}
.sp-vacio__titulo {
    margin: 1rem 0 0.5rem;
    font-family: var(--fuente-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: rgb(var(--marca-navy));
}

/* Viñetas dentro de una nota: la lista con check de .sp-lista es para
   requisitos cumplibles; una advertencia lleva viñeta normal. */
.sp-vinetas {
    margin: 0.5rem 0 0;
    padding-left: 1.15rem;
}
.sp-vinetas li { margin-bottom: 0.35rem; }
.sp-vinetas li:last-child { margin-bottom: 0; }

/* ======= Pie de página =======
   El mismo de setegua.org: navy a sangre, cuatro columnas, redes en
   discos que se vuelven amarillos al pasar el puntero. */
.sp-pie {
    padding-top: 4rem;
    padding-bottom: 2rem;
    background: rgb(var(--marca-navy));
    color: var(--gris-400);
}

.sp-pie__cuerpo {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    padding-bottom: 3rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgb(255 255 255 / 0.1);
}
@media (min-width: 768px) {
    .sp-pie__cuerpo { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sp-pie__marca { grid-column: span 2; }
}

.sp-pie__logotipo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.sp-pie__logotipo img { width: 4rem; height: 4rem; object-fit: contain; }
.sp-pie__logotipo .marca-nombre { font-size: 1.25rem; color: #fff; }

.sp-pie__lema {
    max-width: 24rem;
    margin: 0 0 1.5rem;
    font-size: 0.875rem;
}

.sp-pie__redes { display: flex; gap: 1rem; }
.sp-pie__red {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radio-pildora);
    background: rgb(var(--marca-navy-claro));
    color: var(--gris-400);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.sp-pie__red:hover { background: rgb(var(--marca-oro)); color: rgb(var(--marca-navy)); }

.sp-pie__titulo {
    margin: 0 0 1.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
}

.sp-pie__lista {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.75rem;
    font-size: 0.875rem;
}
.sp-pie__lista a {
    color: var(--gris-400);
    text-decoration: none;
    transition: color 0.2s ease;
}
.sp-pie__lista a:hover { color: rgb(var(--marca-oro)); }
.sp-pie__lista li { display: flex; align-items: flex-start; gap: 0.75rem; }
.sp-pie__lista i { flex-shrink: 0; margin-top: 0.15rem; color: rgb(var(--marca-oro)); }

.sp-pie__firma {
    text-align: center;
    font-size: 0.875rem;
}

/* ======= WhatsApp flotante ======= */
.sp-whatsapp {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radio-pildora);
    background: #25d366;
    font-size: 1.75rem;
    color: #fff;
    text-decoration: none;
    box-shadow: var(--sombra-media);
    animation: sp-rebote-suave 2s infinite;
}
@keyframes sp-rebote-suave {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
    .sp-whatsapp { animation: none; }
}

/* ======= Toastr, vestido de marca =======
   Los avisos siguen saliendo por toastr (el JavaScript del flujo ya los
   usa), pero con su hoja por defecto llegan en naranja y verde lima, que
   no son colores de nadie aquí. */
.sp-cuerpo #toast-container > div {
    border-radius: var(--radio);
    box-shadow: var(--sombra-media);
    font-family: var(--fuente-sans);
    opacity: 1;
}
.sp-cuerpo #toast-container > .toast-success { background-color: rgb(var(--exito)); }
.sp-cuerpo #toast-container > .toast-error { background-color: rgb(var(--error)); }
.sp-cuerpo #toast-container > .toast-warning { background-color: rgb(var(--aviso)); }
.sp-cuerpo #toast-container > .toast-info { background-color: rgb(var(--marca-navy)); }

/* ======= Accesibilidad y utilidades mínimas ======= */
.sp-cuerpo a:focus-visible,
.sp-cuerpo button:focus-visible,
.sp-cuerpo input:focus-visible,
.sp-cuerpo select:focus-visible,
.sp-cuerpo textarea:focus-visible {
    outline: 3px solid rgb(var(--marca-oro));
    outline-offset: 2px;
}

.sp-salto {
    position: absolute;
    left: -9999px;
    z-index: 60;
    padding: 0.75rem 1.25rem;
    border-radius: 0 0 var(--radio) 0;
    background: rgb(var(--marca-navy));
    color: #fff;
    text-decoration: none;
}
.sp-salto:focus { left: 0; top: 0; }

.sp-centro { text-align: center; }
.sp-oculto { display: none !important; }
.sp-sin-margen { margin: 0; }
.sp-mt-1 { margin-top: 0.5rem; }
.sp-mt-2 { margin-top: 1rem; }
.sp-mt-3 { margin-top: 1.5rem; }
.sp-mt-4 { margin-top: 2rem; }
.sp-mb-2 { margin-bottom: 1rem; }
.sp-mb-3 { margin-bottom: 1.5rem; }
.sp-mb-4 { margin-bottom: 2rem; }
.sp-tenue { color: var(--gris-500); }
.sp-pequeno { font-size: 0.875rem; }

/* ======= Asistente de pasos (formulario largo dividido en etapas) =======
   Un solo paso visible a la vez. En escritorio una guía lateral fija muestra
   dónde va la persona; en teléfono la guía se pliega a una cabecera compacta
   con barra de avance dentro de la tarjeta. Los números son legítimos aquí:
   el contenido sí es una secuencia. */
.sp-asistente { display: grid; gap: 1.5rem; }
@media (min-width: 1024px) {
    .sp-asistente {
        grid-template-columns: 17rem minmax(0, 1fr);
        gap: 2.5rem;
        align-items: start;
    }
}

/* --- Guía lateral (escritorio) --- */
.sp-guia { display: none; }
@media (min-width: 1024px) {
    .sp-guia {
        display: block;
        position: sticky;
        top: calc(var(--alto-barra) + 1.5rem);
    }
}
.sp-guia__lista {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* La línea que une los pasos: recorre el centro de los círculos */
.sp-guia__lista::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: 1.5rem;
    bottom: 1.5rem;
    width: 2px;
    background: var(--gris-200);
    transform: translateX(-50%);
}
.sp-guia__paso { position: relative; }
.sp-guia__boton {
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: 0.875rem;
    align-items: start;
    width: 100%;
    padding: 0.75rem 0;
    border: 0;
    background: none;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: default;
}
.sp-guia__paso--hecho .sp-guia__boton { cursor: pointer; }
.sp-guia__boton:focus-visible {
    outline: 3px solid rgb(var(--marca-oro));
    outline-offset: 2px;
    border-radius: var(--radio-chico);
}
.sp-guia__numero {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radio-pildora);
    border: 2px solid var(--gris-300);
    background: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--gris-500);
}
.sp-guia__titulo {
    margin: 0;
    font-family: var(--fuente-display);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--gris-500);
}
.sp-guia__pista {
    margin: 0.2rem 0 0;
    font-size: 0.8125rem;
    color: var(--gris-400);
}
.sp-guia__paso--activo .sp-guia__numero {
    border-color: rgb(var(--marca-navy));
    background: rgb(var(--marca-navy));
    color: #fff;
}
.sp-guia__paso--activo .sp-guia__titulo { color: rgb(var(--marca-navy)); }
.sp-guia__paso--activo .sp-guia__pista { color: var(--gris-600); }
.sp-guia__paso--hecho .sp-guia__numero {
    border-color: rgb(var(--marca-oro));
    background: rgb(var(--marca-oro));
    color: rgb(var(--marca-navy));
}
.sp-guia__paso--hecho .sp-guia__titulo { color: var(--gris-700); }
.sp-guia__paso--hecho .sp-guia__boton:hover .sp-guia__titulo { color: rgb(var(--marca-navy)); }

/* --- Cabecera compacta con avance (teléfono y tableta) --- */
.sp-progreso {
    display: grid;
    gap: 0.625rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--gris-100);
    background: rgb(var(--marca-claro) / 0.6);
}
@media (min-width: 1024px) { .sp-progreso { display: none; } }
.sp-progreso__texto {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}
.sp-progreso__titulo {
    margin: 0;
    font-family: var(--fuente-display);
    font-size: 1.3rem;
    font-weight: 600;
    color: rgb(var(--marca-navy));
}
.sp-progreso__paso {
    flex-shrink: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gris-500);
}
.sp-progreso__barra {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.375rem;
}
.sp-progreso__barra span {
    height: 0.375rem;
    border-radius: var(--radio-pildora);
    background: var(--gris-200);
}
.sp-progreso__barra span.es-hecho { background: rgb(var(--marca-oro)); }
.sp-progreso__barra span.es-activo { background: rgb(var(--marca-navy)); }

/* --- Paneles y subgrupos --- */
.sp-panel-paso[hidden] { display: none; }
.sp-subgrupo {
    margin: 1.75rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--gris-100);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gris-700);
}
.sp-subgrupo:first-child { margin-top: 0; }
.sp-subgrupo .sp-opcional { font-weight: 400; color: var(--gris-400); }

/* --- Resumen antes de enviar --- */
.sp-resumen {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem 1.5rem;
    margin: 0;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--gris-100);
    border-radius: var(--radio);
    background: rgb(var(--marca-claro) / 0.6);
}
@media (min-width: 640px) { .sp-resumen { grid-template-columns: 1fr 1fr; } }
.sp-resumen > div { min-width: 0; }
.sp-resumen dt {
    margin-bottom: 0.15rem;
    font-size: 0.8125rem;
    color: var(--gris-500);
}
.sp-resumen dd {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    color: var(--gris-900);
    overflow-wrap: anywhere;
}
.sp-resumen dd:empty::before { content: "—"; color: var(--gris-400); }

/* El texto largo del compromiso se lee dentro de una caja con scroll propio */
.sp-compromiso-caja {
    max-height: 15rem;
    overflow: auto;
    padding: 1rem 1.25rem;
    border: 1px solid var(--gris-200);
    border-radius: var(--radio-chico);
    background: #fff;
}
.sp-compromiso-caja .sp-compromiso { margin: 0; }

/* Botones de navegación: "Atrás" a la izquierda, "Continuar" a la derecha */
.sp-acciones--entre { justify-content: space-between; }
.sp-acciones--entre > :only-child { margin-left: auto; }

/* Aviso de borrador recuperado + botón con aspecto de enlace */
.sp-borrador {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin: 0 0 1.25rem;
    font-size: 0.8125rem;
    color: var(--gris-500);
}
.sp-enlace-boton {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: rgb(var(--marca-navy));
    text-decoration: underline;
    text-underline-offset: 0.15em;
    cursor: pointer;
}
.sp-enlace-boton:hover { color: rgb(var(--marca-navy-claro)); }