/* ==========================================================
   1. CONFIGURACIÓN DEL TEMA
   Cambia estos valores para personalizar toda la portada.
   ========================================================== */
:root {
    /* Colores */
    --color-fondo: #f3f5fb;
    --color-superficie: #ffffff;
    --color-cabecera: #253a8f;
    --color-texto-cabecera: #ffffff;
    --color-menu: #e7ecff;
    --color-texto: #202a43;
    --color-titulos: #203477;
    --color-enlace: #243e9c;
    --color-enlace-hover: #14265f;
    --color-enlace-fondo-hover: #d4ddff;
    --color-borde: #c6cfe8;
    --color-foco: #9b3b00;

    /* Tipografía: usa fuentes instaladas en el dispositivo. */
    --fuente-texto: Arial, Helvetica, sans-serif;
    --fuente-titulos: Georgia, 'Times New Roman', serif;
    --letra-ordenador: 18px;
    --letra-movil: 16px;
    --titulo-ordenador: 2.5rem;
    --titulo-movil: 2rem;
    --subtitulo: 1.35rem;
    --interlineado: 1.6;

    /* Distribución y espacios */
    --ancho-maximo: 1100px;
    --ancho-menu: 320px;
    --espacio-ordenador: 2rem;
    --espacio-movil: 1rem;
    --separacion: 1.5rem;
    --radio: 10px;
}

/* ==========================================================
   2. BASE COMÚN PARA ORDENADOR Y MÓVIL
   ========================================================== */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: var(--color-fondo);
    color: var(--color-texto);
    font-family: var(--fuente-texto);
    line-height: var(--interlineado);
    overflow-wrap: anywhere;
}

h1,
h2 {
    margin: 0 0 1rem;
    font-family: var(--fuente-titulos);
    line-height: 1.25;
}

h2 {
    color: var(--color-titulos);
    font-size: var(--subtitulo);
}

p {
    margin: 0 0 1rem;
}

a {
    color: var(--color-enlace);
    text-underline-offset: 0.2em;
}

a:hover {
    color: var(--color-enlace-hover);
}

a:focus-visible {
    outline: 3px solid var(--color-foco);
    outline-offset: 3px;
}

.cabecera {
    background-color: var(--color-cabecera);
    color: var(--color-texto-cabecera);
    text-align: center;
}

.cabecera h1 {
    margin: 0;
}

.cabecera a {
    color: var(--color-texto-cabecera);
}

.menu,
.contenido {
    min-width: 0;
    border: 1px solid var(--color-borde);
}

.menu {
    background-color: var(--color-menu);
}

.contenido {
    background-color: var(--color-superficie);
}

.menu__lista,
.menu__enlaces {
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu__categoria {
    display: block;
    margin-bottom: 0.5rem;

    cursor: pointer;
}


.menu__enlaces {
    display: grid;
    gap: 0.25rem;
}

.menu__enlaces a {
    display: block;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
}

.menu__enlaces a:hover {
    background-color: var(--color-enlace-fondo-hover);
}

/* ==========================================================
   3. ORDENADOR: MÁS DE 650 PX
   Menú a la izquierda y contenido a la derecha.
   Estas reglas se sustituyen por las de móvil hasta 650 px.
   ========================================================== */
body {
    font-size: var(--letra-ordenador);
}

.cabecera {
    padding: var(--espacio-ordenador);
}

.cabecera h1 {
    font-size: var(--titulo-ordenador);
}

.distribucion {
    display: grid;
    grid-template-columns: var(--ancho-menu) minmax(0, 1fr);
    align-items: start;
    margin: 0;
    padding: 0;
}

.menu,
.contenido {
    padding: var(--espacio-ordenador);
}

/* ==========================================================
   4. MÓVIL: HASTA 650 PX (INCLUIDOS)
   Una sola columna: menú arriba y contenido debajo.
   Solo hay dos diseños; el ancho determina cuál se utiliza.
   El punto de cambio se edita directamente en esta consulta.
   ========================================================== */
@media (max-width: 650px) {
    body {
        font-size: var(--letra-movil);
    }

    .cabecera {
        padding: var(--espacio-movil);
    }

    .cabecera h1 {
        font-size: var(--titulo-movil);
    }

    .distribucion {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--espacio-movil);
        padding: var(--espacio-movil);
    }

    .menu,
    .contenido {
        padding: var(--espacio-movil);
    }
}