/*
 * Los textos legales, que se leen de arriba abajo y no se usan.
 *
 * Hoja aparte de `panel.css` a propósito: aquella está pensada para una
 * herramienta —barra lateral, tablas, formularios— y esta página es un
 * documento largo. Y además la abre gente sin sesión, incluido el revisor de
 * Google, así que no debería arrastrar el CSS entero del panel para nada.
 *
 * Sin estilos en línea: la CSP del sitio es `style-src 'self'` y un `style=`
 * suelto no se aplicaría. Por eso hasta el detalle más tonto vive aquí.
 */

:root {
    --tinta: #1c2430;
    --tinta-suave: #4a5568;
    --fondo: #f7f8fa;
    --papel: #ffffff;
    --borde: #e2e6ec;
    --acento: #8a6d3b;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--tinta);
    font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.legal {
    /* 68 caracteres de ancho: más largo cansa y se pierde el renglón. */
    max-width: 44rem;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 4rem;
}

.volver {
    margin: 0 0 2rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.volver a { color: var(--acento); text-decoration: none; }
.volver a:hover { text-decoration: underline; }

h1 {
    margin: 0 0 .75rem;
    font-size: 2rem;
    line-height: 1.2;
}

.intro {
    margin: 0 0 .5rem;
    font-size: 1.05rem;
    color: var(--tinta-suave);
}

.fecha {
    margin: 0 0 2.5rem;
    font-size: .875rem;
    color: var(--tinta-suave);
}

section {
    margin: 0 0 2.5rem;
    padding: 1.5rem;
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: 12px;
}

h2 {
    margin: 0 0 1rem;
    font-size: 1.25rem;
    line-height: 1.3;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

/*
 * Las tablas de «esto es esto», en dos columnas cuando hay sitio y apiladas
 * cuando no. Con <dl> y no con <table>: no son datos que se comparen entre sí,
 * son parejas de término y explicación, que es justo para lo que existe.
 */
dl {
    display: grid;
    grid-template-columns: 1fr;
    gap: .25rem 1.5rem;
    margin: 0 0 1rem;
    padding-top: .5rem;
    border-top: 1px solid var(--borde);
}

dt {
    padding-top: .75rem;
    font-weight: 600;
}

dd {
    margin: 0 0 .5rem;
    color: var(--tinta-suave);
}

@media (min-width: 40rem) {
    dl { grid-template-columns: 13rem 1fr; }
    dt { padding-top: .75rem; }
    dd { padding-top: .75rem; margin-bottom: 0; }
}

/* El párrafo que Google espera encontrar tal cual. */
.destacado {
    padding: 1rem;
    background: #fbf7ef;
    border-left: 3px solid var(--acento);
    border-radius: 0 8px 8px 0;
    font-style: italic;
}

.menudo {
    font-size: .9rem;
    color: var(--tinta-suave);
}

footer {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--borde);
    font-size: .875rem;
    color: var(--tinta-suave);
}

footer a { color: var(--acento); }

@media (prefers-color-scheme: dark) {
    :root {
        --tinta: #e8ecf2;
        --tinta-suave: #a8b2c1;
        --fondo: #12171f;
        --papel: #1a2029;
        --borde: #2a323d;
        --acento: #d4b483;
    }
    .destacado { background: #221d14; }
}