/*
 * Portal público de RevistaFuente.
 *
 * La identidad es la del manual de marca: tinta casi negra, un único acento
 * terracota y un fondo de blanco cálido —nunca #FFF puro—. Lo que se lee va en
 * tinta; el terracota se guarda para lo que se pulsa y para el filete que
 * señala. El trato es de impreso, no de aplicación: filetes finos, mucho
 * blanco, jerarquía por tamaño de letra y no por caja.
 *
 * Los valores de --portal-* los puede sobreescribir el administrador desde
 * /panel/configuracion: el layout los emite en un <style> después de este archivo.
 */

:root {
    /*
     * Los cuatro colores de la marca. Se pueden cambiar desde el panel; todo lo
     * demás se deriva de ellos, así que cambiar uno mueve el sitio entero y no
     * deja tonos huérfanos del anterior.
     */
    --ink: #14140F;         /* tinta: titulares, cuerpo, superficies oscuras */
    --accent: #B03A24;      /* acento: enlaces, botones, etiquetas y filetes de destacado */
    --accent-neg: #E0653F;  /* el acento aclarado: fondo oscuro y filetes */
    --paper: #F2F1ED;       /* fondo general */

    /* El rojo del error no es el de la marca: si avisar y enlazar se pintan
       igual, el aviso deja de avisar. */
    --red-alert: #D9383A;
    /* El mismo rojo, aclarado para el pie: sobre tinta, el de arriba se queda
       en 4:1 y un aviso es justo el texto que no puede costar leer. */
    --red-alert-neg: color-mix(in srgb, #D9383A 65%, #fff);

    /*
     * Una sola familia para todo lo que se lee, la del logotipo: grotesca,
     * de sistema y por tanto sin descarga ni salto de fuente. La jerarquia la
     * hace el tamano y el peso, que es como se compone un impreso suizo.
     */
    --font-display: Helvetica, 'Helvetica Neue', Arial, sans-serif;
    --font-body: Helvetica, 'Helvetica Neue', Arial, sans-serif;

    /* El monoespaciado es el registro de los datos: fecha, firma, numero,
       paginacion. Se lee distinto porque dice otra cosa. */
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /*
     * Papel y tinta derivados del color de fondo y del de texto, no fijados a
     * mano. Antes eran literales: cambiar el fondo desde el panel dejaba los
     * huecos y los filetes con el tono anterior, así que solo servía para elegir
     * entre blancos casi idénticos.
     *
     * Las mezclas caen encima de los tonos que da el manual —#4A4842 para el
     * texto secundario, #6E6C64 para los metadatos, #E1DFD8 para la línea—, así
     * que la marca se respeta sin renunciar a que todo siga colgando de dos
     * colores.
     */
    --paper-sunk: color-mix(in srgb, var(--paper) 92%, var(--ink));
    /* La zona de reposo del manual es más CLARA que el fondo, no más oscura:
       tarjetas, citas y avisos se levantan del papel en vez de hundirse. */
    --paper-raised: color-mix(in srgb, #fff 38%, var(--paper));
    --ink-soft: color-mix(in srgb, var(--ink) 78%, var(--paper));
    /*
     * Estaba en 58%, que sobre papel da 4.44:1 —el minimo para un texto normal
     * es 4.5— y sobre el papel hundido de las cajas, 3.76. Es el tono de las
     * fechas, los contadores y los rotulos de un formulario: texto pequeno y
     * secundario, justo el que peor se lee y el que mas gente entrecierra los
     * ojos para leer. En 64% pasa en los dos fondos y sigue leyendose como
     * secundario, que es para lo que esta.
     */
    --ink-muted: color-mix(in srgb, var(--ink) 64%, var(--paper));
    /* 8% y no 14%: el filete del manual es un susurro, #E1DFD8 sobre #F2F1ED. */
    --rule: color-mix(in srgb, var(--ink) 8%, var(--paper));
    --rule-strong: color-mix(in srgb, var(--ink) 28%, var(--paper));

    /*
     * El borde de una caja de texto, que no es lo mismo que un filete. Los dos
     * de arriba separan bloques y son deliberadamente finos: un filete de
     * periodico no se mira, se cruza. El contorno de un control si se mira —es
     * lo unico que dice donde se puede escribir— y por eso la norma le pide
     * 3:1, que --rule y --rule-strong no dan ni de lejos. Oscurecer aquellos
     * para arreglar esto habria engordado toda la maqueta.
     */
    --rule-control: color-mix(in srgb, var(--ink) 48%, var(--paper));

    /*
     * El filete que separa una seccion de la siguiente. Va en el naranja y no
     * en el terracota: repetido veinte veces por pagina, el acento fuerte pesa
     * como un subrayado y compite con los titulares. Aqui el contraste bajo no
     * estorba —es una linea, no un texto— y de paso deja el terracota para lo
     * que se pulsa.
     */
    --rule-seccion: var(--accent-neg);

    /* El lavado del acento: fondo de los avisos y de los botones fantasma. Es
       el acento a un 7%, no un color aparte, para que siga la marca. */
    --accent-wash: color-mix(in srgb, var(--accent) 7%, var(--paper-raised));

    --shell: 1680px;      /* ancho del armazón: cabecera, rejillas, pie */
    --measure: 68ch;      /* columna de lectura de una nota */
    --sidebar-width: 320px;

    /*
     * La medida de los botones de la cabecera: menu, buscar, entrar y
     * registrarse. Tenian cada uno su cuerpo y su relleno —.72 y .7 de letra,
     * tres rellenos distintos— y la diferencia no significaba nada; solo se
     * notaba en que no acababan a la misma altura. Ahora comparten medida y
     * crece con la pagina, como la testera: en una cabecera de 1600 px un
     * boton de 11 px se queda en una nota al pie.
     */
    --control-texto: clamp(.7rem, .62rem + .3vw, .84rem);
    --control-relleno-v: clamp(.4rem, .3rem + .35vw, .6rem);
    --control-relleno-h: clamp(.75rem, .5rem + .8vw, 1.15rem);

    --gap: clamp(1.25rem, 2.2vw, 2.25rem);
    --rhythm: clamp(2.5rem, 4vw, 4rem);
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*
 * El apriete de los titulares. Va en el elemento y no en cada regla para que
 * los rotulos pequenos —que llevan su propio espaciado abierto— sigan
 * ganandole por especificidad.
 */
h1, h2, h3, h4 {
    letter-spacing: -.015em;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    background: var(--paper);
    color: var(--ink);
    line-height: 1.6;
    overflow-x: hidden;
    font-size: clamp(1rem, 0.97rem + 0.15vw, 1.06rem);
    -webkit-font-smoothing: antialiased;

    /*
     * Columna de alto completo para que el pie se apoye siempre en la parte de
     * abajo. Sin esto, una pagina corta —una seccion con pocas notas, una
     * busqueda sin resultados— dejaba el pie flotando a media pantalla con el
     * fondo vacio debajo. dvh va despues de vh: donde se entiende, evita el
     * salto de la barra del navegador en el movil.
     */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* El armazón llega al ancho de la pantalla; el aire lo pone el padding. */
.container {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 3rem);
}

/* ---------- CABECERA ---------- */

.top-header {
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
}

.header-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--gap);
    padding: 1.1rem 0 1rem;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    justify-self: start;
}

.header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;
    min-width: 0;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* El enlace de salto. Fuera de la pantalla hasta que el teclado lo enfoca, y
   entonces baja a la vista: si se ocultara con display:none no lo alcanzaria
   el tabulador, que es justo para quien esta puesto. */
.salto-al-contenido {
    position: absolute;
    left: 1rem;
    top: -3rem;
    z-index: 1000;
    padding: .6rem 1rem;
    background: var(--paper);
    color: var(--accent);
    border: 2px solid var(--accent);
    border-radius: 2px;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    transition: top .15s ease-in;
}

.salto-al-contenido:focus {
    top: 1rem;
}

/* El destino recibe el foco al saltar, pero no es un control: sin esto el
   navegador le pinta el recuadro de enfoque a la pagina entera. */
main:focus {
    outline: none;
}

.menu-btn {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    border: 1px solid var(--rule);
    background: transparent;
    border-radius: 2px;
    padding: var(--control-relleno-v) var(--control-relleno-h);
    font-family: inherit;
    font-size: var(--control-texto);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    cursor: pointer;
    transition: border-color .2s, color .2s;
}

.menu-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.menu-btn .hamburger {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    width: 1.15em;
    height: .85em;
}

.menu-btn .hamburger span {
    display: block;
    height: 1.5px;
    background: currentColor;
}

/* El nombre de la cabecera va centrado, como en la primera plana de un impreso. */
.logo-area {
    text-align: center;
    min-width: 0;
}

.logo-main a {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 3.4vw, 2.9rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--ink);
    display: inline-block;
}

/* El logotipo manda sobre su alto; el ancho lo pone la proporción del SVG. Las
   medidas del <img> están escritas en el marcado para que el navegador reserve
   el hueco antes de descargarlo y la cabecera no dé el salto. */
.logo-main img {
    display: block;
    margin: 0 auto;
    /* Ahora manda el ancho y no el alto: la testera de un impreso se mide por
       lo que ocupa de margen a margen. La columna del medio es «auto», asi que
       el logotipo se lleva el sitio que pide y las otras dos se reparten el
       resto; max-width lo hace encoger en el telefono en vez de desbordar. */
    width: clamp(11rem, 24vw, 19rem);
    height: auto;
    max-width: 100%;
}

.logo-main span {
    color: var(--accent);
}

.logo-date {
    margin-top: .45rem;
    font-size: .75rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-muted);
    font-family: var(--font-mono);
}

.logo-date .issn {
    color: var(--rule-strong);
}

/* Los botones de la cabecera llevan icono y etiqueta. En escritorio manda la
   etiqueta —un boton con su nombre escrito no se interpreta, se lee— y en
   telefono manda el icono, donde la etiqueta no cabe. */
.btn-icono {
    display: none;
    flex: none;
}

.header-search {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.header-search form {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.header-search input {
    border: 1px solid var(--rule-control);
    border-radius: 2px;
    background: transparent;
    /* El mismo relleno vertical que los botones: si no, la caja y el boton que
       tiene pegado acaban a alturas distintas y el renglon se ve descuadrado. */
    padding: var(--control-relleno-v) .7rem;
    font: inherit;
    font-size: .85rem;
    width: 11rem;
    color: var(--ink);
    transition: border-color .2s, width .2s;
}

/* Antes esto era «outline: none» y un borde de 1px que cambiaba de color, que
   ademas le ganaba en especificidad a la regla general de :focus-visible. Quien
   navega con teclado tenia que adivinar en que casilla estaba por un filete. */
.header-search input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
    width: 14rem;
}

.header-search input:focus:not(:focus-visible) {
    border-color: var(--accent);
    outline: none;
    width: 14rem;
}

.header-search input::placeholder {
    color: var(--ink-muted);
}

.header-search .search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--paper);
    border-radius: 2px;
    padding: var(--control-relleno-v) var(--control-relleno-h);
    font: inherit;
    font-size: var(--control-texto);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s;
}

.header-search .search-btn:hover {
    background: var(--ink);
}

.header-auth {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.auth-user {
    font-size: .78rem;
    color: var(--ink-muted);
    white-space: nowrap;
}

.auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: var(--control-relleno-v) var(--control-relleno-h);
    font-size: var(--control-texto);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .2s, color .2s, background .2s;
}

.auth-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.register-btn {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--paper);
}

.register-btn:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

.logout-btn:hover {
    border-color: var(--red-alert);
    color: var(--red-alert);
}

/* ---------- NAVEGACIÓN ---------- */

.nav-bar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 2%, transparent);
}

.nav-scroll {
    display: flex;
    align-items: stretch;
    gap: clamp(1rem, 2vw, 2rem);
    overflow-x: auto;
    scrollbar-width: none;
}

.nav-scroll::-webkit-scrollbar {
    display: none;
}

.nav-scroll a,
.nav-section-link {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: .85rem 0;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ink-soft);
    border-bottom: 2px solid transparent;
    transition: color .2s, border-color .2s;
}

.nav-scroll a:hover,
.nav-section-link:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* ---------- MENÚ LATERAL ---------- */

.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--ink) 50%, transparent);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s, visibility .25s;
    z-index: 90;
}

.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: min(var(--sidebar-width), 86vw);
    height: 100%;
    background: var(--ink);
    color: var(--paper);
    /* La otra superficie oscura del portal. Igual que en el pie, el acento pasa
       a su version aclarada: el terracota sobre tinta no llega a 3:1 y aqui lo
       que se pinta con el son los enlaces del menu. */
    --accent: var(--accent-neg);
    transform: translateX(-100%);
    transition: transform .28s ease;
    z-index: 100;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    overflow-y: auto;
}

.sidebar.open {
    transform: translateX(0);
}

.sidebar-close {
    display: flex;
    justify-content: flex-end;
}

.sidebar-close button {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.2rem;
    line-height: 1;
    padding: .3rem;
    cursor: pointer;
    opacity: .7;
}

.sidebar-close button:hover {
    opacity: 1;
}

.sidebar-logo {
    font-family: var(--font-display);
    font-size: 1.6rem;
    margin: .5rem 0 1.75rem;
    color: #fff;
}

.sidebar-logo span {
    display: block;
    font-family: var(--font-body);
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent-neg);
    margin-top: .35rem;
}

.sidebar-nav {
    list-style: none;
    display: flex;
    flex-direction: column;
}

.sidebar-nav li a {
    display: block;
    padding: .6rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    font-size: .95rem;
    color: var(--paper);
    transition: color .2s;
}

.sidebar-nav li a:hover {
    color: var(--accent);
}

.sidebar-nav .nav-section-title {
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent-neg);
    margin: 1.25rem 0 .35rem;
}

.sidebar-footer {
    margin-top: auto;
    padding-top: 1.5rem;
    font-size: .72rem;
    color: color-mix(in srgb, var(--paper) 55%, transparent);
    line-height: 1.5;
}

/* ---------- CUERPO ---------- */

main.container {
    padding-top: var(--rhythm);
    padding-bottom: var(--rhythm);
    /* Crece hasta llenar lo que sobre: es lo que empuja el pie hacia abajo. */
    flex: 1 0 auto;
    /* Y no mas: como elemento flexible dentro de un body en columna, sin ancho
       propio se estira hasta el contenido mas ancho que tenga dentro. Mientras la
       portada fueron rejillas de 1fr no se noto; la primera tira que desborda a
       proposito —el carrusel— se llevo con ella toda la pagina hacia la derecha. */
    width: 100%;
}

/* ---------- PORTADA: HUECOS ---------- */

/*
 * La portada ya no se ordena sola: la redaccion coloca cada nota en un hueco
 * —apertura, franja de tres, carrusel, cabeza de seccion— y lo que sobra se
 * rellena por fecha. Estos bloques son esos huecos, en el mismo orden en que se
 * leen: lo mas importante arriba y del tamano que le corresponde.
 */

.portada-vacia {
    padding: var(--rhythm) 0;
    font-size: 1rem;
    color: var(--ink-muted);
}

/* ---------- APERTURA ---------- */

.portada-apertura {
    padding-bottom: var(--rhythm);
    border-bottom: 2px solid var(--rule-seccion);
}

/* Foto a la izquierda y titular al lado: a este ancho, la foto encima empujaria
   el titular fuera de la primera pantalla, que es justo lo que no puede pasar. */
.apertura {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--gap);
    align-items: center;
}

.apertura-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--paper-sunk);
}

/* Sin foto el texto se queda con toda la fila; una columna vacia al lado se lee
   como un fallo de carga. */
.apertura:not(:has(.apertura-img)) {
    grid-template-columns: minmax(0, 1fr);
}

.apertura-texto {
    min-width: 0;
}

.apertura .antetitulo {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: .6rem;
}

.apertura h2 {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3.2vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: .75rem;
    text-wrap: balance;
    transition: color .2s;
}

.apertura:hover h2 {
    color: var(--accent);
}

.apertura p {
    font-size: 1.02rem;
    color: var(--ink-soft);
    line-height: 1.55;
    margin-bottom: .8rem;
}

/* Firma y hora, en el mismo renglon y separadas por un punto medio: son los dos
   datos de procedencia de la nota y en dos lineas parecian dos cosas distintas. */
.apertura-firma {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
    font-size: .75rem;
    color: var(--ink-muted);
    font-family: var(--font-mono);
}

/* Solo la inicial: «capitalize» sube todas las palabras y la fecha salia como
   «Jueves 27 De Agosto», con una preposicion en mayuscula en mitad del renglon. */
.apertura-firma time::first-letter {
    text-transform: uppercase;
}

.apertura-autor {
    font-weight: 600;
    color: var(--ink-soft);
    text-transform: none;
}

.apertura-autor::after {
    content: "·";
    margin-left: .5rem;
    color: var(--ink-muted);
    font-weight: 400;
}

/* Sin fecha detras el punto se queda colgando al final de la firma. */
.apertura-autor:last-child::after {
    content: none;
}

/* ---------- FRANJA DE TRES ---------- */

/*
 * Las tres notas que siguen a la apertura. Son la misma pieza .news-card del
 * resto del portal, pero aqui se leen como las tres columnas de una portada
 * impresa y no como tres tarjetas sueltas:
 *
 *  - El filete de cada tarjeta pasa de horizontal a vertical. Tres filetes
 *    gruesos en fila, justo debajo del que cierra la apertura, dibujaban un
 *    pentagrama; el filete fino entre columnas separa igual y no se ve.
 *  - Las tres pesan lo mismo: mismo ancho, misma foto, mismo titular. La
 *    jerarquia de la portada ya la marca la apertura, que esta justo encima; a
 *    partir de ahi estas tres son el mismo escalon y hacer una mas grande solo
 *    parecia un descuadre.
 */

.portada-franja {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* Sin hueco: el aire lo pone el sangrado de cada columna, y asi el filete
       cae en mitad del blanco y no pegado a un texto. */
    gap: 0;
    padding: clamp(1.35rem, 2.2vw, 2rem) 0 0;
}

.portada-franja > .news-card {
    border-top: 0;
    padding-top: 0;
    padding-inline: clamp(.9rem, 1.6vw, 1.7rem);
}

.portada-franja > .news-card:first-child {
    padding-inline-start: 0;
}

.portada-franja > .news-card:last-child {
    padding-inline-end: 0;
}

.portada-franja > .news-card + .news-card {
    border-left: 1px solid var(--rule);
}

/* Panoramica: a un tercio de ancho el 3/2 salia casi cuadrado y se comia media
   columna antes de llegar al titular. */
.portada-franja .news-card .card-media,
.portada-franja .news-card .card-img {
    aspect-ratio: 16 / 9;
    margin-bottom: .7rem;
}

/*
 * La franja es un bloque de paso, no una pagina: entre la apertura y lo que
 * viene despues tiene que caber entera de un vistazo. Todo lo de dentro va mas
 * apretado que en la rejilla de /noticias —interlineado, huecos y pie—, sin
 * tocar el cuerpo de letra, que es lo que se lee.
 */
.portada-franja .card-category {
    margin-bottom: .25rem;
}

.portada-franja .news-card h4 {
    font-size: clamp(1.12rem, 1.35vw, 1.4rem);
    line-height: 1.16;
    letter-spacing: -0.01em;
    margin-bottom: .4rem;
}

/* Dos lineas de entradilla en las columnas estrechas: tres dejaban un parrafo
   gris tan alto como el titular. */
.portada-franja .news-card p {
    font-size: .89rem;
    line-height: 1.45;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* La firma se queda al fondo de la columna, como en la rejilla: con las tres
   tarjetas del mismo tamano las fechas caen en la misma linea y es eso lo que
   hace que la fila se lea como una fila. */
.portada-franja .card-pie {
    padding-top: .5rem;
}

/* ---------- CARRUSEL ---------- */

/*
 * Una tira que se arrastra, no un componente: overflow y scroll-snap bastan para
 * que funcione con el dedo, con la rueda y con el teclado. Las flechas las
 * ensena portal.js solo si hay algo a lo que ir, asi que sin JavaScript la tira
 * sigue completa y accesible en vez de quedarse a medias.
 */

.portada-carrusel .section-header {
    align-items: center;
}

.carrusel-flechas {
    display: flex;
    gap: .4rem;
}

.carrusel-flecha {
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--rule-strong);
    background: var(--paper);
    color: var(--ink);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color .2s, color .2s;
}

.carrusel-flecha:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
}

.carrusel-flecha:disabled {
    opacity: .35;
    cursor: default;
}

.carrusel-pista {
    display: flex;
    /* Cinturon: aunque manda el ancho de main, un contenedor que scrollea no
       deberia poder empujar a sus padres desde dentro. */
    min-width: 0;
    gap: var(--gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* Sitio para la sombra de las tarjetas, que si no se recorta al desbordar. */
    padding-bottom: .5rem;
    scrollbar-width: thin;
}

.carrusel-item {
    flex: 0 0 clamp(15rem, 24vw, 20rem);
    scroll-snap-align: start;
}

.carrusel-item .news-card {
    height: 100%;
}

/* ---------- BLOQUE DE SECCION ---------- */

.seccion-bloque {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--gap);
    align-items: start;
}

.seccion-principal {
    display: block;
    min-width: 0;
}

.seccion-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--paper-sunk);
    margin-bottom: .7rem;
}

.seccion-principal h3 {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2vw, 1.7rem);
    line-height: 1.15;
    color: var(--ink);
    margin-bottom: .5rem;
    text-wrap: balance;
    transition: color .2s;
}

.seccion-principal:hover h3 {
    color: var(--accent);
}

.seccion-principal p {
    font-size: .95rem;
    color: var(--ink-soft);
    line-height: 1.55;
}

/* El resto de la seccion son titulares sueltos: filete fino y nada mas. */
.seccion-lista {
    list-style: none;
    border-top: 2px solid var(--rule-seccion);
    min-width: 0;
}

.seccion-lista li {
    border-bottom: 1px solid var(--rule);
}

.seccion-lista li a {
    display: block;
    padding: .8rem 0;
    font-family: var(--font-display);
    font-size: 1rem;
    line-height: 1.3;
    color: var(--ink);
    transition: color .2s;
}

.seccion-lista li a:hover {
    color: var(--accent);
}

/* ---------- SECCIONES ---------- */

.section-block {
    padding: var(--rhythm) 0 0;
}

.section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--rule-seccion);
    padding-bottom: .6rem;
    margin-bottom: 1.4rem;
}

/*
 * La cabecera de seccion del manual: una marca, el nombre en versal muy
 * espaciada, el filete debajo y a la derecha el dato en monoespaciado, como el
 * numero de pagina de un sumario. El nombre baja de cuerpo y sube de espaciado
 * a proposito: en un sumario el rotulo ordena, no compite con los titulares
 * que van debajo.
 */
.section-header h2 {
    display: flex;
    align-items: center;
    gap: .8rem;
    font-family: var(--font-display);
    font-size: clamp(.95rem, 1.1vw, 1.1rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .24em;
    color: var(--ink);
}

/* El punto que abria la seccion. Estaba escrito en la vista, detras del nombre
   y en un <span>; aqui es la marca del manual y va delante. */
.section-header h2::before {
    content: "";
    flex: none;
    width: .8em;
    height: .8em;
    border-radius: 50%;
    background: var(--accent);
}

/* El hueco de la derecha es el del numero de pagina: registro de dato, no de
   titular. Se enciende en el acento al pasar, que es lo que lo distingue de un
   dato de verdad —este se pulsa—. */
.ver-todos {
    font-family: var(--font-mono);
    font-size: .75rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    white-space: nowrap;
}

.ver-todos:hover {
    color: var(--accent);
}

.section-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0 var(--gap);
}

.section-grid a {
    display: block;
    padding: .9rem 0;
    border-top: 1px solid var(--rule);
    font-family: var(--font-display);
    font-size: 1.05rem;
    line-height: 1.3;
    color: var(--ink);
    transition: color .2s;
}

.section-grid a:hover {
    color: var(--accent);
}

/* ---------- REJILLA DE NOTICIAS ---------- */

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: var(--gap);
}

.news-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-top: 1rem;
    border-top: 2px solid var(--accent);
    transition: border-color .2s;
}

.news-card:hover {
    border-top-color: var(--accent);
}

/*
 * El enlace es el titular, pero se pulsa la tarjeta entera: esta capa la cubre.
 * Asi quien navega a oidas oye un enlace que es el titular y no la tarjeta
 * recitada de corrido, y quien la pulsa con el dedo sigue teniendo por diana
 * todo el bloque.
 */
.card-enlace {
    color: inherit;
}

.card-enlace::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* El foco tiene que verse en la tarjeta, no en el renglon del titular: es lo que
   se esta a punto de abrir. */
.news-card:has(.card-enlace:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

.card-enlace:focus-visible {
    outline: none;
}

/* El marco guarda la proporcion y recorta; la foto de dentro puede crecer al
   pasar por encima sin mover una linea del texto. La proporcion la declaran los
   dos: si la foto va suelta —una tarjeta servida antes de este cambio— sigue
   ocupando su hueco en vez de quedarse en nada. */
.news-card .card-media {
    display: block;
    width: 100%;
    overflow: hidden;
}

.news-card .card-media,
.news-card .card-img {
    aspect-ratio: 3 / 2;
    background: var(--paper-sunk);
    margin-bottom: .8rem;
}

.news-card .card-img {
    display: block;
    width: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2, .6, .2, 1);
}

/* Dentro del marco manda el marco: alto completo y sin margen propio. */
.news-card .card-media .card-img {
    height: 100%;
    margin-bottom: 0;
}

/* El acercamiento se pide al marco, no a la foto: sin marco no hay recorte, y
   una foto que crece sin nada que la contenga se sube encima del titular. */
.news-card:hover .card-media .card-img {
    transform: scale(1.04);
}

.card-category {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: .35rem;
}

.card-time {
    font-size: .75rem;
    color: var(--ink-muted);
    margin-bottom: .5rem;
    font-family: var(--font-mono);
}

.card-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .4rem;
    /* Empuja la firma al fondo de la tarjeta: en una rejilla de alturas desiguales,
       las fechas alineadas abajo son lo que hace que la fila se lea como fila. */
    margin-top: auto;
    padding-top: .6rem;
}

.card-pie .card-time {
    margin-bottom: 0;
}

.card-autor {
    font-size: .75rem;
    font-weight: 600;
    color: var(--ink-soft);
    font-family: var(--font-mono);
}

.card-autor::after {
    content: "·";
    margin-left: .4rem;
    color: var(--ink-muted);
    font-weight: 400;
}

.card-autor:last-child::after {
    content: none;
}

/* El retrato de quien firma, en la tarjeta y en la apertura: las dos firmas son
   flex con las lineas alineadas por su base, y una foto alineada por la base
   cuelga del renglon, asi que esta se centra aparte.

   Cuadrado como el monograma de la ficha de marca, igual que en la nota abierta:
   la firma no puede cambiar de figura de una pagina a otra.

   2.75rem contra un texto de .75rem, que son las 3,6 veces que pide la ficha.
   Empezo mas pequeno por no comerle sitio a las fotos de las noticias, y a esa
   escala la cara no se reconocia, que es lo unico para lo que esta puesta. */
.card-autor-foto {
    flex: none;
    align-self: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    object-fit: cover;
    background: var(--paper-sunk);
}

.news-card h4 {
    font-family: var(--font-display);
    font-size: 1.22rem;
    line-height: 1.25;
    color: var(--ink);
    margin-bottom: .5rem;
    text-wrap: balance;
    transition: color .2s;
}

.news-card:hover h4 {
    color: var(--accent);
}

.news-card p {
    font-size: .92rem;
    color: var(--ink-soft);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- LISTADO Y FILTROS ---------- */

.list-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    border-bottom: 2px solid var(--rule-seccion);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

.list-head h1 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    color: var(--ink);
    letter-spacing: -0.02em;
}

.list-head p {
    color: var(--ink-muted);
    font-size: .92rem;
    margin-top: .25rem;
}

.filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1rem;
    align-items: end;
    padding: 1.1rem 0 1.4rem;
    border-bottom: 1px solid var(--rule);
    margin-bottom: var(--gap);
}

.filters label {
    display: block;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: .35rem;
}

.filters input,
.filters select {
    width: 100%;
    border: 1px solid var(--rule-control);
    border-radius: 2px;
    background: transparent;
    padding: .5rem .65rem;
    font: inherit;
    font-size: .92rem;
    color: var(--ink);
}

.filters input:focus-visible,
.filters select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}

.filters input:focus:not(:focus-visible),
.filters select:focus:not(:focus-visible) {
    border-color: var(--accent);
    outline: none;
}

.filters-actions {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.btn-portal {
    display: inline-block;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--paper);
    border-radius: 2px;
    padding: .5rem 1rem;
    font: inherit;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
}

.btn-portal:hover {
    background: var(--ink);
    border-color: var(--ink);
}

.btn-portal-ghost {
    background: transparent;
    color: var(--accent);
}

.btn-portal-ghost:hover {
    background: var(--accent-wash);
    color: var(--accent);
    border-color: var(--accent);
}

.empty-note {
    border: 1px solid var(--rule);
    border-left: 3px solid var(--accent);
    padding: 1rem 1.2rem;
    color: var(--ink-soft);
    background: var(--paper-raised);
}

.pagination {
    display: flex;
    gap: .4rem;
    justify-content: center;
    margin-top: var(--rhythm);
}

.pagination a,
.pagination span {
    border: 1px solid var(--rule);
    padding: .4rem .75rem;
    font-size: .85rem;
    color: var(--ink-soft);
    font-family: var(--font-mono);
}

.pagination a:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* La pagina en la que estas no es un enlace: se marca en lugar de invitar a
   pulsarla, que es lo que hace un numero identico a los de al lado. */
.pagination .pagination-actual {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--paper);
    font-weight: 600;
}

.pagination-resumen {
    text-align: center;
    margin-top: .6rem;
    font-size: .8rem;
    color: var(--ink-soft);
}

/* ---------- PIE ---------- */

.footer {
    /*
     * La banda oscura que cierra la pagina. En vez de repintar cada regla de
     * dentro, aqui se le da la vuelta a los derivados: las mezclas pasan a
     * hacerse del papel hacia la tinta y el texto secundario, los metadatos y
     * los filetes salen claros solos.
     *
     * El acento tambien cambia de version. El terracota sobre tinta se queda
     * en 3:1 —no llega ni para un rotulo— y el aclarado da 5.4:1. Es
     * exactamente para esto que el manual trae un acento negativo.
     */
    --ink-soft: color-mix(in srgb, var(--paper) 84%, var(--ink));
    --ink-muted: color-mix(in srgb, var(--paper) 66%, var(--ink));
    --rule: color-mix(in srgb, var(--paper) 20%, var(--ink));
    --rule-strong: color-mix(in srgb, var(--paper) 38%, var(--ink));
    --rule-control: color-mix(in srgb, var(--paper) 55%, var(--ink));
    --accent: var(--accent-neg);
    --red-alert: var(--red-alert-neg);

    border-top: 2px solid var(--accent);
    background: var(--ink);
    color: var(--paper);
    margin-top: var(--rhythm);
    padding: var(--rhythm) 0 2.5rem;
    flex-shrink: 0;
}

/*
 * Dos bandas. Arriba, quien publica y por donde se entra a lo publicado; abajo,
 * redes y letra pequena, separadas por un filete porque son otro registro de
 * lectura. La de abajo va a dos columnas: la de la izquierda mide lo que ocupan
 * los iconos y la derecha se queda con el resto, de modo que el aviso legal
 * forma un parrafo largo en vez de una columna estrecha.
 */

.footer-top {
    display: grid;
    /* La marca ocupa un tercio y las listas se reparten el resto: con la nav en
       «auto» los enlaces se pegaban al borde derecho y dejaban un hueco muerto
       en medio en cuanto la pantalla pasaba de los 1400 px. */
    grid-template-columns: minmax(220px, 1fr) minmax(230px, 1fr) minmax(0, 2fr);
    gap: var(--gap);
    align-items: start;
    padding-bottom: 2.5rem;
}

.footer-brand {
    font-family: var(--font-display);
}

.footer-brand-name {
    font-size: 1.5rem;
    color: var(--paper);
}

.footer-brand small {
    display: block;
    font-family: var(--font-body);
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-top: .35rem;
}

.footer-brand-mail {
    display: inline-block;
    margin-top: 1rem;
    font-family: var(--font-body);
    font-size: .8rem;
    color: var(--ink-soft);
}

.footer-brand-mail:hover {
    color: var(--accent);
}

.footer-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2rem;
}

.footer-col-title {
    font-family: var(--font-body);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: .9rem;
}

.footer-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    margin: 0;
    padding: 0;
}

/*
 * Multicolumna y no rejilla: el flujo de columnas llena hacia abajo antes de
 * saltar a la derecha, que es como se lee una lista, y se reparte solo cuando
 * cambian las secciones sin tener que contarlas desde la vista.
 */
.footer-list-doble {
    /* La lista base es un flex en columna y el multicolumna no le aplica. */
    display: block;
    columns: 2;
    column-gap: 2rem;
}

.footer-list-doble li {
    break-inside: avoid;
    margin-bottom: .55rem;
}

.footer-list a {
    font-size: .84rem;
    color: var(--ink-soft);
}

.footer-list a:hover {
    color: var(--accent);
}

.footer-legal {
    display: flex;
    gap: 2.5rem;
    border-top: 1px solid var(--rule);
    padding-top: 1.75rem;
}

/* No crece: mide lo que ocupan los iconos y los dos enlaces legales. */
.footer-legal-side {
    flex: none;
}

.footer-legal-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
    font-size: .76rem;
    color: var(--ink-muted);
}

.footer-social {
    list-style: none;
    display: flex;
    gap: .6rem;
    margin: 0 0 1.25rem;
    padding: 0;
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--rule);
    border-radius: 50%;
    color: var(--ink-soft);
    transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}

.footer-social a:hover {
    color: var(--ink);
    background: var(--accent);
    border-color: var(--accent);
}

.footer-social-icon {
    display: block;
}

.footer-legal-links {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    font-size: .74rem;
}

.footer-legal-links a {
    color: var(--ink-muted);
    text-decoration: underline;
    text-underline-offset: .2em;
}

.footer-legal-links a:hover {
    color: var(--accent);
}

.footer-legal-note {
    max-width: 68ch;
    line-height: 1.6;
}

.footer-copy {
    font-size: .76rem;
    color: var(--ink-muted);
}

/* Fuera de la vista pero accesible al <use>: display:none lo dejaria inservible. */
.svg-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ---------- MURO DE PAGO ---------- */

/*
 * Ocupa el sitio del cuerpo de la nota, con la misma medida de lectura, para que
 * el corte se lea como parte del articulo y no como un cartel pegado encima.
 */
.muro {
    max-width: var(--measure);
    margin: var(--rhythm) 0 0;
    padding: var(--gap);
    border: 1px solid var(--rule);
    border-top: 3px solid var(--accent);
    background: var(--paper-raised);
}

.muro-sello {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: .6rem;
}

.muro h2 {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    line-height: 1.2;
    color: var(--ink);
    margin-bottom: .75rem;
}

.muro p {
    color: var(--ink-soft);
    margin-bottom: 1rem;
}

.muro-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 1.25rem;
}

.muro-btn {
    display: inline-block;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--paper);
    border-radius: 2px;
    padding: .55rem 1.1rem;
    font-size: .73rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: background .2s, border-color .2s, color .2s;
}

.muro-btn:hover {
    background: var(--ink);
    border-color: var(--ink);
}

.muro-btn-suave {
    background: transparent;
    color: var(--ink-soft);
    border-color: var(--rule-strong);
}

.muro-btn-suave:hover {
    background: transparent;
    color: var(--accent);
    border-color: var(--accent);
}

.muro-planes {
    list-style: none;
    border-top: 1px solid var(--rule);
    margin-bottom: .75rem;
}

.muro-planes li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
    border-bottom: 1px solid var(--rule);
    padding: .7rem 0;
}

.muro-plan-nombre {
    font-weight: 600;
    color: var(--ink);
}

.muro-plan-precio {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--ink);
}

.muro-plan-precio small {
    font-family: var(--font-body);
    font-size: .72rem;
    color: var(--ink-muted);
}

.muro-nota {
    font-size: .82rem;
    color: var(--ink-muted);
    margin-bottom: 0;
}

/* ---------- PAGINA DE SUSCRIPCION ---------- */

/*
 * Es la pagina a la que remite el muro, asi que reusa sus piezas —los botones y
 * la forma de listar los planes— para que quien llega no sienta que ha cambiado
 * de sitio. Lo que cambia es la medida: aqui hay una pagina entera, no un corte
 * dentro de un articulo.
 */

.suscripcion {
    max-width: var(--measure);
    margin: 0 auto;
    padding: var(--rhythm) 0;
}

/* Mismo trato que el antetitulo de una nota: es la misma senal de seccion. */
.suscripcion-cabecera .antetitulo {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent);
}

.suscripcion-cabecera h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.9rem);
    line-height: 1.1;
    color: var(--ink);
    margin: .4rem 0 1rem;
}

.suscripcion-entradilla {
    font-size: 1.05rem;
    color: var(--ink-soft);
    line-height: 1.6;
}

.suscripcion-estado {
    border: 1px solid var(--rule);
    border-left: 3px solid var(--rule-strong);
    background: var(--paper-raised);
    padding: 1rem 1.2rem;
    margin: var(--rhythm) 0 0;
}

/* Verde no: la paleta no lo tiene. El acento ya significa «esto va contigo». */
.suscripcion-estado-activa {
    border-left-color: var(--accent);
}

.suscripcion-estado-titulo {
    font-weight: 700;
    color: var(--ink);
    margin-bottom: .35rem;
}

.suscripcion-estado p:last-child {
    margin-bottom: 0;
}

.suscripcion-planes,
.suscripcion-como {
    margin-top: var(--rhythm);
}

.suscripcion-planes h2,
.suscripcion-como h2 {
    font-family: var(--font-body);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: .9rem;
}

.suscripcion-planes-lista {
    list-style: none;
    border-top: 1px solid var(--rule);
}

.suscripcion-plan {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem 1rem;
    border-bottom: 1px solid var(--rule);
    padding: 1rem 0;
}

.suscripcion-plan-nombre {
    flex: 1;
    font-weight: 600;
    color: var(--ink);
}

.suscripcion-plan-precio {
    font-family: var(--font-display);
    font-size: 1.35rem;
    color: var(--ink);
}

.suscripcion-plan-duracion {
    width: 100%;
    font-size: .78rem;
    color: var(--ink-muted);
}

.suscripcion-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 1.25rem 0;
}

.suscripcion-nota,
.suscripcion-vacio {
    font-size: .88rem;
    color: var(--ink-muted);
    line-height: 1.6;
}

.suscripcion-contacto a {
    font-weight: 600;
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: .2em;
}

/* ---------- ERROR ---------- */

/*
 * La sirve /error sin layout: es la unica pantalla que tiene que funcionar cuando
 * ha fallado la base, asi que se apoya solo en las variables de :root de este
 * archivo y no en el tema que emite el panel.
 */
main.error-main {
    display: flex;
    align-items: center;
}

.error-page {
    max-width: var(--measure);
    margin: 0 auto;
    padding: var(--rhythm) 0;
}

.error-page .error-code {
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 12vw, 7rem);
    line-height: 1;
    color: var(--accent);
    margin-bottom: 1rem;
}

.error-page h1 {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    line-height: 1.15;
    color: var(--ink);
    margin-bottom: 1rem;
}

.error-page p {
    color: var(--ink-soft);
    margin-bottom: 1rem;
}

.error-page .error-id {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .78rem;
    color: var(--ink-muted);
    word-break: break-all;
    border-left: 2px solid var(--rule);
    padding-left: .75rem;
}

.error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: var(--gap);
}

.error-btn {
    display: inline-block;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--paper);
    border-radius: 2px;
    padding: .6rem 1.1rem;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: background .2s, color .2s;
}

.error-btn:hover {
    background: var(--ink);
    border-color: var(--ink);
}

.error-btn-quiet {
    background: transparent;
    color: var(--ink-soft);
    border-color: var(--rule);
}

.error-btn-quiet:hover {
    background: transparent;
    color: var(--accent);
    border-color: var(--accent);
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 1080px) {
    /* La foto sobre el titular: a este ancho, en dos columnas no cabe ninguna
       de las dos. La franja pasa a dos y deja la tercera debajo. */
    .apertura,
    .seccion-bloque {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Dos columnas, y la tercera baja a una segunda fila con su propio filete. */
    .portada-franja {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .portada-franja > .news-card + .news-card:nth-child(odd) {
        padding-inline-start: 0;
        border-left: 0;
    }

    .portada-franja > .news-card:nth-child(even) {
        padding-inline-end: 0;
    }

    .portada-franja > .news-card:nth-child(n + 3) {
        margin-top: var(--gap);
        padding-top: var(--gap);
        border-top: 1px solid var(--rule);
    }

    .seccion-lista {
        border-top: 1px solid var(--rule);
        padding-top: .25rem;
    }
}

@media (max-width: 900px) {
    /*
     * A este ancho el buscador ya no cabe al lado del nombre del medio, y en la
     * fila de antes se le montaba encima: iba dentro de .header-right, que es una
     * sola columna de la rejilla, y al pasar a ancho completo estiraba esa columna
     * hasta comerse el centro.
     *
     * Ahora la cabecera son dos filas de verdad —menu, nombre y cuenta arriba;
     * buscador entero debajo—, y .header-right deja de ser una caja para que sus
     * dos mitades caigan cada una en su sitio.
     */
    .header-grid {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "menu   logo   cuenta"
            "buscar buscar buscar";
        row-gap: .9rem;
    }

    .header-left { grid-area: menu; }
    .logo-area { grid-area: logo; }

    .header-right {
        display: contents;
    }

    .header-search {
        grid-area: buscar;
    }

    .header-auth {
        grid-area: cuenta;
        justify-self: end;
    }

    .header-search form,
    .header-search input {
        width: 100%;
    }

    .header-search input:focus {
        width: 100%;
    }

    .menu-btn-text {
        display: none;
    }

    .footer-top {
        grid-template-columns: 1fr;
    }

    /* Apilado: el aviso legal deja de compartir renglon con los iconos. */
    .footer-legal {
        flex-direction: column;
        gap: 1.75rem;
    }
}

@media (max-width: 640px) {
    /*
     * En un telefono, «Buscar», «Salir» o «Registrarse» escritos al lado del
     * nombre del medio no caben: se partian en dos lineas o empujaban la fila. El
     * texto no se borra, se esconde —sigue siendo el nombre del boton para quien
     * navega a oidas—; lo que se ve es el icono.
     */
    .btn-icono {
        display: block;
    }

    .btn-texto {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* Cuadrados y del tamano de un dedo, no de un raton. */
    .header-search .search-btn,
    .header-auth .auth-btn {
        padding: .55rem;
        min-width: 2.4rem;
        min-height: 2.4rem;
    }

    .menu-btn {
        padding: .55rem .7rem;
    }
}

@media (max-width: 560px) {
    .auth-user {
        display: none;
    }

    .apertura h2 {
        font-size: 1.85rem;
    }

    /* Una sola columna: el filete vuelve a ser horizontal, que es lo unico que
       separa dos notas apiladas. */
    .portada-franja {
        grid-template-columns: 1fr;
    }

    .portada-franja > .news-card {
        padding-inline: 0;
    }

    .portada-franja > .news-card + .news-card {
        margin-top: var(--gap);
        padding-top: var(--gap);
        border-left: 0;
        border-top: 1px solid var(--rule);
    }

    .section-grid {
        grid-template-columns: 1fr;
    }

    .news-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    /* Sin transicion, el acercamiento de la foto seria un salto seco al pasar
       por encima: quien pide menos movimiento tampoco quiere ese. */
    .news-card:hover .card-media .card-img {
        transform: none;
    }
}

/* ---------- LA NOTA ---------- */

/*
 * El cuerpo se lee en una columna estrecha aunque la página sea ancha: pasada
 * cierta medida el ojo pierde el renglón al saltar de línea. Lo ancho es el
 * armazón, no el texto.
 */
.nota {
    max-width: var(--measure);
    margin: 0 auto;
}

.nota-cabecera {
    border-bottom: 1px solid var(--rule);
    padding-bottom: 1.5rem;
    margin-bottom: 1.75rem;
}

.nota-seccion {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: .9rem;
}

.nota-seccion:hover {
    color: var(--accent);
}

.nota-titulo {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.2vw, 3.2rem);
    line-height: 1.08;
    letter-spacing: -0.022em;
    color: var(--ink);
    text-wrap: balance;
    margin-bottom: .9rem;
}

.nota-entradilla {
    font-size: 1.18rem;
    line-height: 1.55;
    color: var(--ink-soft);
    margin-bottom: 1.25rem;
}

/*
 * La firma del manual. Era un renglon corrido —nombre, fecha, actualizacion,
 * todo del mismo tamano y del mismo gris— y pasa a ser un bloque de tres
 * alturas: quien firma en tinta y a cuerpo de lectura, para quien firma en
 * gris, y el dato en monoespaciado. Se lee en ese orden porque asi esta
 * jerarquizado, no porque haya que buscarlo.
 */
.nota-firma {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    padding-right: 1.5rem;
}

/* El sello de la casa hace de retrato. Cuadrado y sin recortar en circulo: el
   monograma esta compuesto para su caja. */
/* La ficha de marca de la firma de editor pone el monograma a unas 3,6 veces el
   cuerpo del nombre, y el nombre es 1.15rem. Eso daba 4rem, y seguia leyendose
   pequeno: en la ficha el bloque ocupa el ancho de la firma y aqui compite con
   el titular de la nota, que es mucho mas grande que el nombre. 5rem es lo que
   hace que el retrato se lea como parte de la nota y no como un icono. */
.nota-firma-marca,
.nota-firma-retrato {
    flex: none;
    width: 5rem;
    height: 5rem;
    /* Redondos los dos. El monograma se dibuja sobre un cuadrado oscuro, asi que
       recortado en circulo queda un disco con la RF centrada: pierde las esquinas
       del fondo y ninguna letra. Lo que no puede pasar es que la foto sea redonda
       y su respaldo cuadrado, porque entonces la firma cambia de figura segun
       quien escriba. */
    border-radius: 50%;
}

/* El retrato de quien firma, cuando lo ha puesto, en el mismo hueco y con la
   misma caja que la marca del medio: cuadrado, como el monograma de la ficha.
   Redondearlo dejaba la foto y su respaldo con dos formas distintas, y la firma
   cambiaba de figura segun quien escribiera.

   Se recorta al pintar y no al subir: el archivo se guarda entero, que el dia
   que alguien quiera otro encuadre no tenga que volver a hacerse la foto. */
.nota-firma-retrato {
    object-fit: cover;
    background: var(--paper-sunk);
}

.nota-firma-datos {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

/* El filete vertical que cierra la firma por la derecha. */
.nota-firma::after {
    content: "";
    position: absolute;
    right: 0;
    top: .35rem;
    bottom: .35rem;
    width: 4px;
    background: var(--accent);
}

.nota-firma-medio {
    font-size: .92rem;
    color: var(--ink-soft);
}

.nota-firma-dato {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    font-family: var(--font-mono);
    font-size: .75rem;
    color: var(--ink-muted);
}

.nota-firma-separador {
    color: var(--rule-strong);
}

.nota-autor {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ink);
}

/* La firma lleva a la pagina del autor desde que existe. Se subraya al pasar y
   no siempre: en una linea de creditos, cuatro subrayados seguidos compiten con
   el titular que tienen encima. */
a.nota-autor {
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

a.nota-autor:hover,
a.nota-autor:focus-visible {
    color: var(--accent);
    border-bottom-color: currentColor;
}

.nota-actualizado {
    font-style: italic;
}

/* La portada rompe la columna de lectura: es lo único que se sale a los lados. */
.nota-portada {
    width: min(100%, 60rem);
    margin: 0 calc((var(--measure) - min(100%, 60rem)) / 2) 2rem;
    margin-inline: auto;
    max-width: none;
}

.nota-portada img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--paper-sunk);
}

@media (min-width: 1200px) {
    .nota-portada {
        width: 60rem;
        margin-left: calc((60rem - var(--measure)) / -2);
        margin-right: calc((60rem - var(--measure)) / -2);
    }
}

/* ----- cuerpo escrito por el redactor ----- */

.nota-cuerpo {
    font-size: 1.12rem;
    line-height: 1.75;
    color: var(--ink);
}

.nota-cuerpo > * + * {
    margin-top: 1.15rem;
}

.nota-cuerpo p {
    max-width: 100%;
}

.nota-cuerpo h2,
.nota-cuerpo h3 {
    font-family: var(--font-display);
    color: var(--ink);
    line-height: 1.2;
    letter-spacing: -0.015em;
    margin-top: 2.4rem;
}

.nota-cuerpo h2 { font-size: 1.65rem; }
.nota-cuerpo h3 { font-size: 1.32rem; }

/* Los enlaces a otras notas son el motivo de permitir HTML: tienen que verse. */
.nota-cuerpo a {
    color: var(--accent);
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, var(--paper));
    transition: border-color .2s, color .2s;
}

.nota-cuerpo a:hover {
    color: var(--ink);
    border-bottom-color: var(--ink);
}

.nota-cuerpo strong { font-weight: 700; }

/*
 * La cita, compuesta como la tarjeta del manual: bloque en terracota, el
 * monograma en papel arriba y la frase en grande. Era un filete a la izquierda
 * y letra un poco mayor, que dentro de una nota larga apenas se distinguia de
 * un parrafo. Esta se ve desde lejos, que es lo que hace una cita destacada.
 *
 * Pide frase corta: dos o tres lineas, como dice el especimen. Una cita de
 * ocho renglones aqui es un muro de color.
 */
.nota-cuerpo blockquote {
    position: relative;
    margin: 2.5rem 0;
    padding: 4.5rem 1.75rem 1.75rem;
    border: 0;
    background: var(--accent);
    color: var(--paper);
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.6vw, 1.7rem);
    line-height: 1.25;
}

.nota-cuerpo blockquote::before {
    content: "";
    position: absolute;
    top: 1.6rem;
    left: 1.75rem;
    width: 2.7rem;
    height: 2.4rem;
    background: url("../img/revistafuente-rf-papel.svg") no-repeat left center / contain;
}

/* Quien lo dijo, en el registro del dato. */
.nota-cuerpo blockquote cite,
.nota-cuerpo blockquote footer {
    display: block;
    margin-top: 1.25rem;
    font-family: var(--font-mono);
    font-size: .75rem;
    font-style: normal;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--paper) 76%, var(--accent));
}

/* Sobre el terracota, el acento de los enlaces no se ve: van en papel. */
.nota-cuerpo blockquote a {
    color: var(--paper);
    border-bottom-color: color-mix(in srgb, var(--paper) 50%, var(--accent));
}

.nota-cuerpo blockquote a:hover {
    color: var(--paper);
    border-bottom-color: var(--paper);
}

.nota-cuerpo ul,
.nota-cuerpo ol {
    padding-left: 1.35rem;
}

.nota-cuerpo li + li {
    margin-top: .4rem;
}

.nota-cuerpo figure {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.nota-cuerpo img {
    width: 100%;
    background: var(--paper-sunk);
}

.nota-cuerpo figcaption {
    margin-top: .55rem;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--ink-muted);
    border-left: 2px solid var(--rule);
    padding-left: .6rem;
}

/* ----- publicaciones incrustadas ----- */

/*
 * Lo que se guarda en el cuerpo es un enlace marcado con el nombre de la red;
 * incrustados.js lo cambia por el tuit, el video o el post al pintar la nota. Un
 * tuit y un post de Instagram traen su propia caja y su propio ancho: aqui solo
 * hay que centrarlos. El video, en cambio, se estira a la columna de lectura.
 */
.nota-cuerpo .incrustado {
    margin: 2.25rem auto;
    max-width: 34rem;
}

.nota-cuerpo .incrustado[data-incrustado="youtube"] {
    max-width: none;
}

/* Mientras la red contesta, y para siempre si el lector llega sin JavaScript o la
   red no carga: debajo del incrustado siempre hay un enlace. */
.nota-cuerpo .incrustado a {
    display: block;
    border: 1px solid var(--rule);
    border-left: 3px solid var(--accent);
    padding: .85rem 1.1rem;
    font-size: .95rem;
    font-weight: 600;
    color: var(--accent);
}

.nota-cuerpo .incrustado a:hover {
    color: var(--ink);
    border-left-color: var(--accent);
}

/* La cita de la nota lleva filete dorado y serif. El <blockquote> que traen X,
   Instagram y TikTok no es una cita del redactor: es el andamio del incrustado, y
   con el filete encima parecia una cita a medio cargar. */
.nota-cuerpo .incrustado blockquote {
    margin: 0 auto;
    padding: 0;
    border: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.incrustado-marco {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--paper-raised);
}

/* Facebook devuelve la publicacion con su texto debajo: en 16/9 se corta. */
.incrustado-marco-alto {
    aspect-ratio: 4 / 5;
    max-width: 34rem;
    margin: 0 auto;
}

.incrustado-marco iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.nota-cuerpo hr {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: 2.5rem 0;
}

.nota-cuerpo table {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
}

.nota-cuerpo th,
.nota-cuerpo td {
    border-bottom: 1px solid var(--rule);
    padding: .55rem .6rem;
    text-align: left;
}

.nota-cuerpo th {
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.nota-cuerpo pre {
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    padding: 1rem;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: .9rem;
}

.nota-cuerpo caption {
    caption-side: top;
    text-align: left;
    font-size: .8rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-muted);
    padding-bottom: .5rem;
}

/* Lo que el editor del panel deja marcar en el cuerpo de una nota.
 *
 * Son clases y no `style` a proposito: el saneador borra los estilos en linea,
 * asi que el aspecto lo decide esta hoja -y con ella el tema que se configura
 * desde el panel- y no lo que escriba una nota suelta. */
.nota-cuerpo .texto-izquierda { text-align: left; }
.nota-cuerpo .texto-centro { text-align: center; }
.nota-cuerpo .texto-derecha { text-align: right; }
.nota-cuerpo .texto-justificado { text-align: justify; }

/* Un parrafo que va suelto: la entradilla dentro del cuerpo, el remate de una
   cronica. Se apoya en el color de marca, no en uno propio. */
.nota-cuerpo .destacado {
    font-size: 1.22em;
    line-height: 1.5;
    color: var(--ink);
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.nota-cuerpo mark {
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    color: inherit;
    padding: 0 .15rem;
}

.nota-cuerpo u {
    text-underline-offset: .18em;
}

.nota-cuerpo sub,
.nota-cuerpo sup {
    font-size: .72em;
    line-height: 0;
}

/* ----- etiquetas y galería ----- */

.nota-etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule);
}

.nota-etiquetas a {
    border: 1px solid var(--rule);
    padding: .3rem .7rem;
    font-size: .74rem;
    color: var(--ink-soft);
    transition: border-color .2s, color .2s;
}

.nota-etiquetas a:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.nota-galeria {
    margin-top: 2.75rem;
}

.nota-galeria h2 {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink);
    border-bottom: 2px solid var(--accent);
    padding-bottom: .5rem;
    margin-bottom: 1rem;
}

.nota-galeria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: .75rem;
}

.nota-galeria-grid img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--paper-sunk);
}

/* La hora va al pie de la tarjeta, no antes del titular: primero se lee que paso.
   Bajarla hasta el fondo lo hace .card-pie, que la lleva junto a la firma; hacerlo
   tambien aqui descolgaba la fecha medio renglon por debajo del autor. */
.news-card .card-time {
    margin-bottom: 0;
}

.card-premium {
    display: inline-block;
    margin-left: .4rem;
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: 0 .35rem;
    font-size: .6rem;
    letter-spacing: .1em;
}

/* ---------- TE PUEDE INTERESAR Y COMENTARIOS ---------- */

/*
 * Los dos bloques que cierran la nota vivian en un <style> dentro de la propia
 * pagina, escrito antes de que el portal dejara de ser una aplicacion de
 * tarjetas: caja blanca, esquinas redondas, sombra grande y botones de pastilla.
 *
 * Lo que mas se veia no era el estilo, era el sitio: llevaban «max-width: 800px»
 * anclado a la izquierda del armazon, asi que la nota se leia en una columna
 * centrada y estos dos colgaban cuatrocientos pixeles a su izquierda, como si
 * fueran de otra pagina. Ahora comparten columna con el cuerpo de la nota y el
 * mismo trato que el resto: filete fino, sin sombra y con los colores del tema.
 */

.relacionados,
.comentarios {
    max-width: var(--measure);
    margin-inline: auto;
    margin-top: var(--rhythm);
    padding-top: 1.75rem;
    border-top: 2px solid var(--accent);
}

.comentarios {
    margin-bottom: var(--rhythm);
}

.relacionados-titulo,
.comentarios-titulo {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--ink);
    margin-bottom: 1.25rem;
}

/* ----- te puede interesar ----- */

.relacionados-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: var(--gap);
}

.relacionado {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-top: .7rem;
    border-top: 1px solid var(--rule-strong);
    transition: border-color .2s;
}

.relacionado:hover {
    border-top-color: var(--accent);
}

.relacionado-imagen {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    background: var(--paper-sunk);
    margin-bottom: .6rem;
}

/* Sin foto se queda el hueco hundido: en una fila de cuatro, la que no la tiene
   subiria su titular media tarjeta y desalinearia la fila entera. */
.relacionado-imagen-vacia {
    display: block;
}

.relacionado-categoria {
    display: block;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: .25rem;
}

.relacionado-titulo {
    font-family: var(--font-display);
    font-size: 1.02rem;
    line-height: 1.25;
    color: var(--ink);
    margin-bottom: .4rem;
    text-wrap: balance;
    transition: color .2s;
}

.relacionado:hover .relacionado-titulo {
    color: var(--accent);
}

.relacionado-fecha {
    margin-top: auto;
    font-size: .75rem;
    color: var(--ink-muted);
    font-family: var(--font-mono);
}

/* ----- comentarios ----- */

.comentarios-titulo {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.comentarios-conteo {
    font-family: var(--font-mono);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--paper);
    background: var(--accent);
    padding: .1rem .5rem;
}

.comentarios-vacio {
    font-size: .95rem;
    color: var(--ink-muted);
    margin-bottom: 1.75rem;
}

.comentario-aviso {
    border-left: 3px solid var(--accent);
    background: var(--accent-wash);
    padding: .8rem 1rem;
    margin-bottom: 1.5rem;
    font-size: .92rem;
    font-weight: 600;
    color: var(--ink);
}

.hilo {
    list-style: none;
    margin-bottom: 2rem;
}

.hilo .comentario {
    padding: 1.1rem 0;
    border-top: 1px solid var(--rule);
}

/* El primero va pegado al titulo, que ya trae su propio filete encima. */
.hilo > .comentario:first-child {
    border-top: 0;
    padding-top: 0;
}

/* Las respuestas cuelgan del comentario al que contestan: el filete lateral es
   lo que dice de quien cuelgan. */
.hilo-respuestas {
    margin: .9rem 0 0;
    padding-left: 1.1rem;
    border-left: 2px solid var(--rule);
}

.hilo-respuestas .comentario:first-child {
    border-top: 0;
    padding-top: 0;
}

.comentario-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
    margin-bottom: .3rem;
}

.comentario-autor {
    font-weight: 700;
    font-size: .92rem;
    color: var(--ink);
}

.comentario-cabecera time {
    font-size: .74rem;
    color: var(--ink-muted);
}

.comentario-cuerpo {
    margin-bottom: .5rem;
    font-size: .98rem;
    line-height: 1.6;
    color: var(--ink);
    /* Los saltos de linea que escribio quien comenta son suyos; y una palabra sin
       espacios de doscientos caracteres no puede ensanchar la columna. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.comentario-responder {
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--accent);
    cursor: pointer;
    transition: color .2s;
}

.comentario-responder:hover {
    color: var(--accent);
}

/* ----- dejar un comentario ----- */

.comentario-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-top: 1px solid var(--rule);
    padding-top: 1.75rem;
}

.comentario-form h3 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--ink);
}

.comentario-form .campo {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.comentario-form label {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.comentario-form input,
.comentario-form textarea {
    font: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--rule-control);
    border-radius: 2px;
    padding: .6rem .75rem;
    width: 100%;
    resize: vertical;
}

.comentario-form input:focus,
.comentario-form textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}

.comentario-form input::placeholder,
.comentario-form textarea::placeholder {
    color: var(--ink-muted);
}

/* El atributo hidden pierde contra cualquier clase que declare display. */
.comentario-respondiendo[hidden] {
    display: none;
}

.comentario-respondiendo {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .9rem;
    color: var(--ink);
    background: var(--accent-wash);
    padding: .6rem .85rem;
}

.comentario-respondiendo button {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    color: var(--red-alert);
    cursor: pointer;
}

.comentario-identidad {
    font-size: .9rem;
    color: var(--ink-muted);
}

.comentario-enviar {
    align-self: flex-start;
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--paper);
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 2px;
    padding: .65rem 1.5rem;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}

.comentario-enviar:hover {
    background: var(--ink);
    border-color: var(--ink);
}

.comentario-nota {
    font-size: .78rem;
    color: var(--ink-muted);
}

.comentario-error {
    font-size: .85rem;
    color: var(--red-alert);
}

/* ---------- CUENTA DE LECTOR ---------- */

/*
 * Alta y entrada del lector, /registro y /entrar. Viven en el portal y no en el
 * panel a proposito: quien se registra viene a leer, y el menu de administracion
 * al lado no le sirve de nada —le ensena una puerta que no puede abrir—. Misma
 * columna estrecha que la pagina de suscripcion: es la misma clase de tramite.
 */

.cuenta {
    max-width: 27rem;
    margin: 0 auto;
    padding: var(--rhythm) 0;
}

.cuenta-cabecera {
    margin-bottom: 1.5rem;
}

.cuenta-cabecera .antetitulo {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent);
}

.cuenta-cabecera h1 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.4vw, 2.4rem);
    line-height: 1.1;
    color: var(--ink);
    margin: .4rem 0 0;
}

.cuenta-entradilla {
    margin-top: .7rem;
    font-size: .92rem;
    color: var(--ink-muted);
    line-height: 1.6;
}

/* Rojo solo para lo que impide seguir; el aviso de alta creada usa el acento. */
.cuenta-error,
.cuenta-aviso {
    border: 1px solid var(--rule);
    border-left: 3px solid var(--red-alert);
    background: var(--paper-raised);
    padding: .7rem .9rem;
    margin-bottom: 1.2rem;
    font-size: .9rem;
    line-height: 1.5;
}

.cuenta-aviso {
    border-left-color: var(--accent);
}

.cuenta-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    border: 1px solid var(--rule-strong);
    background: var(--paper);
    color: var(--ink);
    padding: .7rem 1rem;
    font-family: var(--font-body);
    font-size: .9rem;
    font-weight: 600;
    transition: border-color .2s, background .2s;
}

.cuenta-google:hover {
    border-color: var(--accent);
    background: var(--paper-sunk);
}

.cuenta-google-icono {
    flex: 0 0 auto;
}

/* Filete con la etiqueta encima: separa las dos vias sin gritar «o bien». */
.cuenta-separador {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 1.3rem 0;
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.cuenta-separador::before,
.cuenta-separador::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--rule);
}

.cuenta-formulario .campo {
    margin-bottom: 1rem;
}

.cuenta-formulario label {
    display: block;
    margin-bottom: .3rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.cuenta-formulario label small {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink-muted);
}

.cuenta-formulario input {
    width: 100%;
    border: 1px solid var(--rule-control);
    border-radius: 2px;
    background: var(--paper);
    padding: .6rem .7rem;
    font-family: var(--font-body);
    font-size: .95rem;
    color: var(--ink);
}

/* El dorado de la identidad da 2.05:1 sobre papel y un anillo de foco necesita
   3:1: era el indicador mas dificil de ver de todo el portal, y estaba puesto
   justo en el formulario de entrada. El morado suave da 6.18 y ya es el color
   de foco del resto del sitio. */
.cuenta-formulario input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}

.campo-ayuda {
    display: block;
    margin-top: .3rem;
    font-size: .78rem;
    color: var(--ink-muted);
}

.campo-error {
    display: block;
    margin-top: .3rem;
    font-size: .8rem;
    color: var(--red-alert);
}

.cuenta-enviar {
    width: 100%;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--paper);
    border-radius: 2px;
    padding: .7rem 1.1rem;
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}

.cuenta-enviar:hover {
    background: var(--ink);
    border-color: var(--ink);
}

.cuenta-pie {
    margin-top: 1.3rem;
    font-size: .87rem;
    color: var(--ink-muted);
    line-height: 1.7;
}

.cuenta-pie a {
    font-weight: 600;
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: .2em;
}

/* ----- publicidad ----- */

/*
 * El anuncio se anuncia. El sello va siempre y no depende de quien lo da de
 * alta: es lo unico que separa una pieza pagada de una de la redaccion, y en un
 * medio esa raya no se deja a criterio de nadie.
 */
.anuncios {
    max-width: var(--measure);
    margin-inline: auto;
    margin-block: var(--rhythm);
    display: grid;
    gap: var(--gap);
}

.anuncio {
    border: 1px solid var(--rule);
    border-radius: .5rem;
    background: var(--paper-raised);
    padding: .75rem;
}

.anuncio-sello {
    display: block;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: .5rem;
}

/*
 * Lo que hay dentro es marcado ajeno y no se le puede pedir que se comporte: se
 * centra, se le impide desbordar el ancho de lectura y, si trae algo mas ancho,
 * que se desplace dentro de su caja en vez de estirar la pagina entera.
 */
.anuncio-cuerpo {
    display: flex;
    justify-content: center;
    overflow-x: auto;
}

.anuncio-cuerpo img,
.anuncio-cuerpo iframe {
    max-width: 100%;
    height: auto;
}

/* ----- boletin ----- */

/* En el pie y no en una ventana emergente a propósito: una capa que tapa la nota
   a los tres segundos de llegar es la forma más rápida de que alguien cierre la
   pestaña. Aquí lo ve quien termina de leer, que es quien puede querer más. */
.boletin {
    font-family: var(--font-body);
}

.boletin-nota {
    font-size: .85rem;
    line-height: 1.55;
    color: var(--ink-muted);
    margin: .75rem 0 1rem;
    max-width: 34ch;
}

.boletin-form {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.boletin-campo {
    flex: 1 1 11rem;
    min-width: 0;
    border: 1px solid var(--rule-control);
    background: var(--paper);
    color: var(--ink);
    padding: .6rem .75rem;
    font-family: inherit;
    font-size: .9rem;
}

.boletin-campo:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.boletin-boton {
    border: 0;
    background: var(--accent);
    color: var(--paper);
    padding: .6rem 1.1rem;
    font-family: inherit;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s;
}

.boletin-boton:hover {
    background: var(--ink);
}

.boletin-aviso {
    font-size: .85rem;
    line-height: 1.55;
    max-width: 34ch;
    margin: .75rem 0 0;
    padding-left: .8rem;
    border-left: 3px solid var(--accent);
}

.boletin-aviso-bien { color: var(--ink-soft); }
.boletin-aviso-mal { color: var(--red-alert); border-left-color: var(--red-alert); }

/*
 * El formulario vive en el pie, y alli el acento ya es el aclarado: un texto en
 * papel encima se queda en 3:1. El manual lo resuelve al reves —chip claro,
 * letra en tinta—, que da 5.4:1 y ademas destaca mas sobre la banda oscura.
 */
.footer .boletin-boton {
    color: var(--ink);
}

.footer .boletin-boton:hover {
    background: var(--paper);
}

/* Las páginas de confirmación y de baja: una frase y la puerta de salida. */
.boletin-pagina {
    max-width: 46ch;
    margin: 4rem auto 6rem;
    padding: 0 1rem;
}

.boletin-pagina h1 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    line-height: 1.1;
    color: var(--ink);
    margin: 0 0 1rem;
}

.boletin-pagina-entrada {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

.boletin-pagina-volver {
    display: inline-block;
    margin-top: 1.5rem;
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
}


/* ---------------------------------------------------------------------------
   Pagina de autor y paginas del medio. Comparten el mismo registro: una cabecera
   con filete y una columna de lectura, sin las rejillas de la portada.
   --------------------------------------------------------------------------- */

.autor-ficha {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    border-bottom: 2px solid var(--accent);
    padding-bottom: 1.25rem;
    margin-bottom: var(--gap);
}

.autor-retrato {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--rule);
    flex-shrink: 0;
}

/* El sello no se recorta en circulo ni lleva filete: el monograma esta
   compuesto para su cuadrado y el fondo ya lo separa del papel. */
.autor-retrato-marca {
    border-radius: 0;
    border: 0;
}

.autor-datos {
    min-width: 0;
    flex: 1 1 18rem;
}

.autor-rotulo {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: .35rem;
}

.autor-datos h1 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1.1;
    color: var(--ink);
    letter-spacing: -0.02em;
}

.autor-bio {
    margin-top: .6rem;
    max-width: var(--measure);
    color: var(--ink-soft);
    line-height: 1.6;
}

.autor-cuenta {
    margin-top: .5rem;
    font-size: .82rem;
    color: var(--ink-muted);
    font-family: var(--font-mono);
}

.pagina-medio {
    max-width: var(--measure);
    margin: 0 auto;
    padding-bottom: var(--rhythm);
}

.pagina-medio header {
    border-bottom: 2px solid var(--accent);
    padding-bottom: 1rem;
    margin-bottom: var(--gap);
}

.pagina-medio-rotulo {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: .35rem;
}

.pagina-medio h1 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1.1;
    color: var(--ink);
    letter-spacing: -0.02em;
}

.pagina-medio h2 {
    font-family: var(--font-display);
    font-size: 1.35rem;
    color: var(--ink);
    margin: 2rem 0 .75rem;
}

.pagina-medio p {
    line-height: 1.7;
    color: var(--ink-soft);
    margin-bottom: 1.1rem;
}

.contacto-datos {
    margin-top: 1.5rem;
    border-top: 1px solid var(--rule);
    padding-top: 1.25rem;
}

.contacto-datos dt {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-top: 1rem;
}

.contacto-datos dt:first-child {
    margin-top: 0;
}

.contacto-datos dd {
    margin: .2rem 0 0;
    font-size: 1.05rem;
    color: var(--ink);
}

/* ---------------------------------------------------------------------------
   Aviso de cookies. Abajo y a lo ancho, por encima de todo lo demas pero sin
   tapar la pagina: un lector puede seguir leyendo sin responder, que es
   justamente lo que un consentimiento libre exige.
   --------------------------------------------------------------------------- */

.consentimiento {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem clamp(1rem, 4vw, 2.5rem);
    background: var(--paper);
    border-top: 2px solid var(--accent);
    box-shadow: 0 -6px 24px color-mix(in srgb, var(--ink) 12%, transparent);
}

/* El display de la clase le gana al [hidden] del navegador, que es una regla de
   la hoja del agente de usuario. Sin esto el aviso se pintaba siempre: el guion
   quitaba y ponia el atributo y no se movia nada, ni al responder ni en la
   segunda visita de quien ya habia respondido. */
.consentimiento[hidden] {
    display: none;
}

.consentimiento-texto {
    flex: 1 1 22rem;
    min-width: 0;
}

.consentimiento-titulo {
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: .3rem;
}

.consentimiento-texto p {
    font-size: .88rem;
    line-height: 1.5;
    color: var(--ink-soft);
}

.consentimiento-texto a {
    color: var(--accent);
    text-decoration: underline;
}

/* Los dos botones miden lo mismo y estan a la misma altura: un «rechazar» mas
   pequeno o escondido no recoge un consentimiento valido. */
.consentimiento-botones {
    display: flex;
    gap: .6rem;
    flex-shrink: 0;
}

.consentimiento-botones .btn-portal {
    min-width: 8rem;
    justify-content: center;
}

/* El enlace del pie para volver a decidir. Es un boton porque no navega a
   ninguna parte, pero se lee como el resto de la letra pequena. */
.footer-consentimiento {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-decoration: underline;
}