/* Estilos del blog público de RealStack.
 *
 * Va aparte de la aplicación A PROPÓSITO: estas páginas son HTML estático que
 * Vercel sirve antes de la reescritura de la SPA, así que se leen sin ejecutar
 * JavaScript. Eso es justo lo que las hace indexables, y por eso no dependen de
 * Tailwind ni del build de Vite: si el día de mañana cambia el front, los
 * artículos siguen en pie.
 *
 * Solo tema claro. Un conmutador de tema exigiría JavaScript y aquí estorba más
 * de lo que aporta.
 */

:root {
    --tinta: #16202e;
    --tinta-2: #4a5768;
    --fondo: #ffffff;
    --fondo-2: #f5f7fa;
    --linea: #e2e8f0;
    --marca: #1e3a5f;
    --acento: #0f766e;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--tinta);
    font: 18px/1.7 ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;
    -webkit-text-size-adjust: 100%;
}

.envoltorio { max-width: 720px; margin: 0 auto; padding: 0 20px; }

header.sitio {
    border-bottom: 1px solid var(--linea);
    padding: 18px 0;
    margin-bottom: 40px;
}
header.sitio .envoltorio { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
header.sitio a.marca {
    font-weight: 700;
    font-size: 19px;
    color: var(--marca);
    text-decoration: none;
    letter-spacing: -.01em;
}
header.sitio a.app {
    font-size: 15px;
    color: var(--acento);
    text-decoration: none;
    font-weight: 600;
}
header.sitio a.app:hover { text-decoration: underline; }

h1 { font-size: 34px; line-height: 1.25; letter-spacing: -.02em; margin: 0 0 12px; }
h2 { font-size: 23px; line-height: 1.3; margin: 44px 0 12px; letter-spacing: -.01em; }
h3 { font-size: 19px; margin: 32px 0 8px; }
p { margin: 0 0 18px; }
a { color: var(--acento); }

.fecha { color: var(--tinta-2); font-size: 15px; margin: 0 0 28px; }
.entradilla { font-size: 20px; color: var(--tinta-2); margin-bottom: 32px; }

ul, ol { margin: 0 0 18px; padding-left: 22px; }
li { margin-bottom: 8px; }

table { width: 100%; border-collapse: collapse; font-size: 16px; margin: 0 0 24px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--linea); }
th { color: var(--tinta-2); font-weight: 600; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

blockquote {
    margin: 0 0 24px;
    padding: 14px 18px;
    background: var(--fondo-2);
    border-left: 3px solid var(--marca);
    color: var(--tinta-2);
    font-size: 17px;
}
blockquote p:last-child { margin-bottom: 0; }

.caja {
    background: var(--fondo-2);
    border: 1px solid var(--linea);
    border-radius: 10px;
    padding: 18px 20px;
    margin: 36px 0;
    font-size: 16px;
}
.caja h3 { margin-top: 0; font-size: 17px; }
.caja p:last-child { margin-bottom: 0; }

.aviso {
    font-size: 14px;
    color: var(--tinta-2);
    border-top: 1px solid var(--linea);
    padding-top: 18px;
    margin-top: 44px;
}

.listado { list-style: none; padding: 0; }
.listado li { border-bottom: 1px solid var(--linea); padding: 20px 0; margin: 0; }
.listado a { font-size: 21px; font-weight: 600; text-decoration: none; color: var(--tinta); }
.listado a:hover { color: var(--acento); }
.listado p { margin: 6px 0 0; color: var(--tinta-2); font-size: 16px; }

footer.sitio {
    border-top: 1px solid var(--linea);
    margin-top: 56px;
    padding: 24px 0 48px;
    font-size: 15px;
    color: var(--tinta-2);
}

@media (max-width: 600px) {
    body { font-size: 17px; }
    h1 { font-size: 27px; }
    h2 { font-size: 21px; }
    .entradilla { font-size: 18px; }
    table { font-size: 15px; }
}