/* Estilos de las páginas web públicas de La casa de las salas sin ventanas (2026-11-13).
   Los mismos de la app (Interfaz/wwwroot/css/interfaz.css): las tres fuentes, los colores de la casa de noche (oscuro,
   por defecto) y del papel cálido (claro, si el sistema está en modo claro), el foco grueso de color lámpara y los
   botones redondeados. Mismas reglas de accesibilidad (WCAG 2.2 AA): texto con 6:1 o más de contraste, foco siempre
   visible, medidas en rem (se puede ampliar hasta 400 % sin desplazarse de lado), nada depende solo del color y el
   movimiento se apaga si el sistema pide menos movimiento. Sin scripts. */

/* ------------------------------------------------------------------ Fuentes (licencia SIL Open Font License) */

@font-face {
    font-family: "Atkinson Hyperlegible";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/publico/fuentes/atkinson-hyperlegible-latin-400-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: "Atkinson Hyperlegible";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/publico/fuentes/atkinson-hyperlegible-latin-ext-400-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: "Atkinson Hyperlegible";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("/publico/fuentes/atkinson-hyperlegible-latin-400-italic.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: "Atkinson Hyperlegible";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/publico/fuentes/atkinson-hyperlegible-latin-700-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: "Atkinson Hyperlegible";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/publico/fuentes/atkinson-hyperlegible-latin-ext-700-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;
}

/* Space Grotesk es variable: un archivo para todos los pesos, del 300 al 700. */
@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("/publico/fuentes/space-grotesk-latin-wght-normal.woff2") format("woff2-variations");
    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: "Space Grotesk";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("/publico/fuentes/space-grotesk-latin-ext-wght-normal.woff2") format("woff2-variations");
    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: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/publico/fuentes/ibm-plex-mono-latin-400-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;
}

/* ------------------------------------------------------------------ Colores (los de la app) */

/* Tema oscuro (por defecto): una casa de noche, con luz de lámpara. */
:root {
    color-scheme: dark;
    --fondo: #14112a;
    --fondo-degradado: #1b1640;
    --superficie: #1e1a3a;
    --elevada: #2a2550;
    --texto: #f5f2ff;
    --texto-suave: #cfc8ee;
    --titulo: #ffc95c;
    --enlace: #7ee0ff;
    --foco: #ffc95c;
    --borde: #8d84cf;
    --boton: #ffc95c;
    --texto-boton: #1a1530;
    --error: #ff9b9b;
    --fondo-error: #3a1b2a;
    --correcto: #8ee8b4;
    --fondo-correcto: #14322a;
    --sombra: 0 0.25rem 1.5rem rgb(0 0 0 / 0.45);
    --sombra-alta: 0 0.6rem 2rem rgb(0 0 0 / 0.6);
    --letra-texto: "Atkinson Hyperlegible", "Segoe UI", Roboto, Arial, sans-serif;
    --letra-titulos: "Space Grotesk", "Atkinson Hyperlegible", "Segoe UI", Arial, sans-serif;
    --letra-mono: "IBM Plex Mono", Consolas, "Courier New", monospace;
    --radio: 0.75rem;
    --radio-chico: 0.5rem;
    --curva: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Tema claro, si el sistema está en modo claro: papel cálido y tinta violeta. */
@media (prefers-color-scheme: light) {
    :root {
        color-scheme: light;
        --fondo: #faf6ee;
        --fondo-degradado: #f3ecff;
        --superficie: #ffffff;
        --elevada: #f1ecff;
        --texto: #1b1730;
        --texto-suave: #4a4463;
        --titulo: #5a2a8c;
        --enlace: #0a5c86;
        --foco: #8a3ffc;
        --borde: #6d6590;
        --boton: #5a2a8c;
        --texto-boton: #ffffff;
        --error: #a8182a;
        --fondo-error: #fdecee;
        --correcto: #17663a;
        --fondo-correcto: #e8f6ee;
        --sombra: 0 0.25rem 1.25rem rgb(40 20 80 / 0.12);
        --sombra-alta: 0 0.6rem 1.75rem rgb(40 20 80 / 0.22);
    }
}

/* ------------------------------------------------------------------ Base */

html {
    font-size: 112.5%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--letra-texto);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--texto);
    background-color: var(--fondo);
    background-image: radial-gradient(ellipse at top, var(--fondo-degradado), var(--fondo) 60%);
    background-attachment: fixed;
    overflow-wrap: anywhere;
}

.pagina {
    max-width: 48rem;
    margin: 0 auto;
    padding: 1rem clamp(0.75rem, 4vw, 2rem) 2.5rem;
}

p,
ul,
ol {
    margin-block: 0 1em;
}

li {
    margin-block: 0.25em;
}

h1,
h2,
h3 {
    font-family: var(--letra-titulos);
    color: var(--titulo);
    line-height: 1.25;
    letter-spacing: -0.01em;
}

h1 {
    font-size: 2.1rem;
    font-weight: 700;
    margin-block: 0 0.6em;
}

h2 {
    font-size: 1.45rem;
    font-weight: 600;
    margin-block: 1.4em 0.6em;
}

h3 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-block: 1.2em 0.5em;
}

a {
    color: var(--enlace);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

a:hover {
    text-decoration-thickness: 0.15em;
}

/* Foco siempre visible: grueso, de color de acento y separado del elemento. */
:focus-visible {
    outline: 3px solid var(--foco);
    outline-offset: 3px;
    border-radius: 0.2em;
}

code,
kbd {
    font-family: var(--letra-mono);
    font-size: 0.95em;
}

/* ------------------------------------------------------------------ La marca, arriba de cada página */

.cabecera {
    padding-bottom: 0.75rem;
    margin-bottom: 1.25rem;
    border-bottom: 2px solid var(--borde);
}

.marca {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--titulo);
    text-decoration: none;
    font-family: var(--letra-titulos);
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.2;
}

.marca:hover {
    text-decoration: underline;
}

.marca svg {
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.6rem;
    /* Un filo fino alrededor, para que el cuadro de la marca se distinga también sobre el fondo oscuro. */
    box-shadow: 0 0 0 1px var(--borde), var(--sombra);
}

/* ------------------------------------------------------------------ El contenido, en una tarjeta */

main {
    padding: clamp(1rem, 4vw, 2rem);
    background: var(--superficie);
    border: 1px solid color-mix(in srgb, var(--borde) 45%, transparent);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

main > :last-child {
    margin-bottom: 0;
}

/* La página de inicio: la marca grande y los enlaces como tarjetas. */
.portada {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.portada svg {
    flex: none;
    width: 6rem;
    height: 6rem;
    border-radius: 1.3rem;
    box-shadow: 0 0 0 1px var(--borde), var(--sombra-alta);
}

.portada h1 {
    margin: 0;
    font-size: clamp(1.8rem, 6vw, 2.6rem);
}

.portada .antes {
    display: block;
    font-size: 0.6em;
    font-weight: 500;
    color: var(--texto-suave);
}

.descripcion {
    font-size: 1.1rem;
}

ul.tarjetas {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
    gap: 0.75rem;
}

ul.tarjetas li {
    margin: 0;
}

ul.tarjetas a {
    display: block;
    height: 100%;
    box-sizing: border-box;
    padding: 0.9rem 1rem;
    font-family: var(--letra-titulos);
    font-weight: 600;
    text-decoration: none;
    color: var(--texto);
    background: var(--elevada);
    border: 2px solid var(--borde);
    border-left: 0.4rem solid var(--titulo);
    border-radius: var(--radio-chico);
}

ul.tarjetas a:hover {
    border-color: var(--foco);
    text-decoration: underline;
}

/* ------------------------------------------------------------------ El menú de páginas y el pie */

nav {
    margin-top: 1.5rem;
}

nav h2 {
    font-size: 1.1rem;
    margin: 0 0 0.5rem;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

nav li {
    margin: 0;
}

nav a {
    display: inline-block;
    padding: 0.35rem 0.9rem;
    border: 2px solid var(--borde);
    border-radius: 999px;
    background: var(--elevada);
    color: var(--texto);
    text-decoration: none;
    font-weight: 700;
}

nav a:hover {
    border-color: var(--foco);
    text-decoration: underline;
}

footer {
    margin-top: 1.5rem;
    padding-top: 0.75rem;
    border-top: 2px solid var(--borde);
    color: var(--texto-suave);
}

footer p {
    margin: 0;
}

/* ------------------------------------------------------------------ Formularios */

label {
    font-weight: 700;
}

input,
button {
    font: inherit;
    line-height: 1.5;
}

input[type="email"],
input[type="password"] {
    box-sizing: border-box;
    width: 100%;
    max-width: 28rem;
    margin-top: 0.25rem;
    padding: 0.5rem 0.75rem;
    color: var(--texto);
    background: var(--fondo);
    border: 2px solid var(--borde);
    border-radius: var(--radio-chico);
}

input[type="checkbox"] {
    accent-color: var(--boton);
    width: 1.2em;
    height: 1.2em;
    vertical-align: -0.2em;
    margin-inline-end: 0.4em;
}

button {
    min-height: 2.75rem;
    padding: 0.5rem 1.4rem;
    color: var(--texto-boton);
    background: var(--boton);
    border: 2px solid var(--boton);
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
}

button:hover {
    border-color: var(--texto);
}

/* Los errores: además del color, un borde y una franja a la izquierda. */
.error {
    padding: 0.75rem 1rem;
    border: 2px solid var(--error);
    border-left-width: 0.5rem;
    border-radius: var(--radio-chico);
    background: var(--fondo-error);
    font-weight: 700;
}

/* ------------------------------------------------------------------ Contraste alto de Windows y movimiento */

@media (forced-colors: active) {
    .marca svg,
    .portada svg {
        forced-color-adjust: none;
    }

    main,
    nav a,
    ul.tarjetas a {
        border: 1px solid CanvasText;
    }

    :focus-visible {
        outline-color: Highlight;
    }
}

/* Transiciones cortas, solo si el sistema no pide menos movimiento. */
@media (prefers-reduced-motion: no-preference) {
    nav a,
    ul.tarjetas a,
    button {
        transition: transform 0.12s var(--curva), border-color 0.12s var(--curva), box-shadow 0.2s var(--curva);
    }

    nav a:hover,
    ul.tarjetas a:hover,
    button:hover {
        transform: translateY(-2px);
        box-shadow: var(--sombra);
    }

    main {
        animation: entrar 0.35s var(--curva);
    }

    @keyframes entrar {
        from {
            opacity: 0;
            transform: translateY(0.5rem);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }
}

@media print {
    body {
        background: #fff;
        color: #000;
    }

    main {
        box-shadow: none;
        border: none;
    }

    nav,
    .cabecera {
        display: none;
    }
}