/* =====================================================================
   BETANZOS HOXE — hoja de estilo del sitio publico
   ---------------------------------------------------------------------
   DIRECCION «MANDEO», elegida por el titular el 2026-08-22. Sustituye al
   diseno escrito contra el Manual de marca v1.0, y conviene decirlo aqui
   arriba porque medio fichero citaba el manual regla por regla y esas
   citas habrian quedado mintiendo:

     · La tipografia YA NO ES PALATINO. Titulares y rotulos en Big
       Shoulders Display —condensada, en versales—; cuerpo en Source
       Serif 4.
     · UN SOLO ACENTO DE COLOR: Verde Mandeo. Esto del manual SI se
       mantiene, y por eso `secciones.color` sigue sin pintarse.
     · La mancheta es un bloque verde macizo a sangre con la fecha
       dentro, y la barra de secciones va en negro. Del logotipo
       sobrevive lo esencial —«BetanzosHoxe» sin espacio, «Hoxe» en otro
       tono—; la Palatino y el interletraje del manual, no.
     · Filetes de 5 px donde el manual pedia 1-2 px, y esquinas a 0.

   La condensada en versales castiga los titulares largos: es el precio
   conocido de esta direccion y estaba dicho al elegirla.

   LAS DOS FAMILIAS VAN ALOJADAS AQUI, en /assets/fonts/. No es una
   preferencia: la CSP del sitio es `default-src 'self'` y no declara
   `font-src`, asi que un enlace a fonts.googleapis.com no llegaria a
   cargarse — y, sobre todo, la politica de privacidad promete por
   escrito que el sitio publico no le pide nada a un dominio ajeno, que
   es la razon de que no haya banner de cookies mas que para la
   analitica. Las dos son OFL y su licencia viaja al lado del fichero.

   Sigue sin dependencias, sin recursos de terceros y sin JavaScript
   para maquetar.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Las dos familias, en formato variable y solo con los subconjuntos que
   el gallego necesita (latin + latin-ext): 288 kB entre los cuatro
   ficheros. Se sirven con `max-age=31536000, immutable` como el resto de
   los estaticos, asi que se pagan una vez.

   OJO SI ALGUN DIA HAY QUE CAMBIAR UN FICHERO DE FUENTE: hay que
   RENOMBRARLO. Estas URL viven dentro del CSS y no pasan por
   `Urls::activo()`, asi que no llevan `?v=`; con `immutable` un ano, un
   navegador que ya tenga la vieja no volveria a pedirla nunca.

   `font-display: swap` a proposito: mas vale leer el titular en la
   fuente de respaldo durante 100 ms que no leerlo. Y los respaldos de la
   condensada son condensados de verdad — una Helvetica normal en su
   sitio desborda la barra de secciones.
   --------------------------------------------------------------------- */

@font-face {
    font-family: "Big Shoulders Display";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("/assets/fonts/bigshoulders-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Big Shoulders Display";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("/assets/fonts/bigshoulders-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Source Serif 4";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("/assets/fonts/sourceserif4-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Source Serif 4";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("/assets/fonts/sourceserif4-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* --- Paleta --- */
    --verde: #14503C;          /* Verde Mandeo. Sigue siendo el unico acento */
    --verde-escuro: #0F3D2D;
    /* Granate: el color TERCIARIO, para lo que tiene que resaltar sin ser
       el acento de la casa. Lo pidió el titular el 2026-09-09 para la
       franja «Inscricións hoxe». Es un granate apagado, tirando a vino, que
       convive con el Verde Mandeo sin pelearse: no es un rojo de alerta. */
    --granate: #7B1E2E;
    --granate-escuro: #5E1522;
    /* El granate rebajado sobre blanco, para tarjetas que tienen que
       destacar sin gritar (la gasolinera, 2026-09-13): el fondo es el 6 %
       del granate y el filete el 20 %. */
    --granate-suave: #F7F0F1;
    --granate-linha: #E5D2D5;
    --verde-claro: #B9E3CE;    /* Solo sobre fondo oscuro. Mas claro que el
                                  #7FBFA4 anterior: sobre el verde macizo de
                                  la mancheta aquel se quedaba en 4,4:1 */
    --tinta: #101010;          /* Barra de secciones, pie y texto */
    --papel: #FBFAF7;          /* Fondo del sitio */

    /* --- Derivados --- */
    --papel-alto: #FFFFFF;     /* Fondo de tarjeta */
    --linha: #DCD8CB;          /* Filete de tarjeta */
    --linha-suave: #E5E1D5;    /* Filete interior */
    --regra: #DCD8CB;
    --texto: #3D3B35;          /* Texto secundario */
    --apagado: #6E6B61;        /* Metadatos */
    --tenue: #8F8C82;

    /* --- Tipografia ---------------------------------------------------
       TRES variables y no dos, y la tercera es la que evita el desastre.

       `--cond` es una tipografia de DISPLAY: esta dibujada para 30 px y
       para arriba, y a 11 px no se lee. La direccion Mandeo, tal y como
       se aprobo, no usa la condensada por debajo de 14 px en ningun
       sitio — asi que aqui tampoco.

       Por eso `--sans` sigue existiendo con la Helvetica neutra de
       siempre: la letra pequena de verdad —el pie legal de la
       suscripcion, los avisos, los `small` del cuerpo, los campos de
       formulario— se queda en ella. Meter ahi la condensada en versales
       seria ilegible, y no es lo que se eligio.
       ------------------------------------------------------------------ */
    --serif: "Source Serif 4", "Palatino Linotype", "Book Antiqua", Georgia, serif;
    --cond: "Big Shoulders Display", "Arial Narrow", "Helvetica Neue Condensed",
            "Liberation Sans Narrow", "Nimbus Sans Narrow", Helvetica, sans-serif;
    --sans: Helvetica, "Helvetica Neue", Arial, "Liberation Sans", sans-serif;

    /* --- Medidas --- */
    --ancho: 1300px;           /* 1220 -> 1300: la apertura de Mandeo pide
                                  una figura de 520 px al lado del titular */
    --gutter: 2rem;
    --radio: 0;                /* Mandeo no tiene ni una esquina redonda */
}

/* =====================================================================
   Base
   ===================================================================== */

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

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

body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font-family: var(--serif);
    font-size: 18px;
    line-height: 1.65;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration-color: var(--regra); text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--verde); }

/* Los titulos van en la condensada, pero NO en versales aqui.

   La caja alta se pone pieza a pieza —titulares, rotulos, mancheta—, no
   de forma global: un subtitulo largo dentro del cuerpo de una noticia
   escrito en versales se lee como un grito y no aporta nada. Lo que si
   es global es la familia y el interlineado corto, que es lo que hace
   que la pagina se reconozca de lejos. */
h1, h2, h3, h4 {
    font-family: var(--cond);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: 0.004em;
    margin: 0 0 0.5em;
}

p { margin: 0 0 1em; }

hr { border: 0; border-top: 1px solid var(--linha); margin: 2rem 0; }

::selection { background: var(--verde); color: var(--papel-alto); }

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

.contedor {
    width: 100%;
    max-width: var(--ancho);
    margin-inline: auto;
    padding-inline: 1.25rem;
}

.visualmente-oculto {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

.saltar {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--verde);
    color: var(--papel-alto);
    padding: 0.75rem 1.25rem;
    z-index: 100;
    font-family: var(--sans);
    font-size: 0.9rem;
}
.saltar:focus { left: 0; }

.baleiro {
    font-family: var(--sans);
    color: var(--apagado);
    padding: 3rem 0;
    text-align: center;
    font-size: 0.95rem;
}

/* Etiquetas de interfaz, repartidas en dos grupos a proposito.

   Los ROTULOS —barra de secciones, antetitulos, fechas de pieza,
   paginacion— van en la condensada y en versales: son la voz de Mandeo y
   ninguno baja de 14 px.

   Los CONTENEDORES cuyo interior lleva frases de verdad —el pie, el
   bloque del tiempo, la suscripcion, el buscador, las migas— se quedan
   en la sans neutra, y dentro de ellos solo su titulo sube a la
   condensada. Ver la nota de `--cond` arriba: no es una excepcion, es la
   regla de la que depende que el sitio se pueda leer. */
.franxa, .navegacion, .tarxeta__seccion, .destacada__seccion, .peza__seccion,
.tarxeta__meta, .destacada__meta, .peza__meta, .bloque-seccion__data,
.ultimas__lista time, .paxinacion, .anuncio__etiqueta,
.etiqueta-publicidade, .cabeceira-seccion__feed {
    font-family: var(--cond);
}

.migas, .buscador, .pe, .tempo, .subscricion, .lateral-ultimas, .carburantes,
.resultados__contador {
    font-family: var(--sans);
}

/* =====================================================================
   Franja superior: fecha y herramientas
   ===================================================================== */

/* En Mandeo esta franja NO es una banda aparte: es el borde superior del
   bloque verde de la mancheta. Lleva el mismo fondo y no hay filete entre
   las dos, asi que se leen como una sola pieza maciza. La fecha, que es
   lo que dice de cuando es lo que estas mirando, sigue siendo lo primero
   que se lee. */
.franxa {
    background: var(--verde);
    color: var(--papel);
    font-size: 0.9rem;
    letter-spacing: 0.06em;
}

/* La franja de «previsualización» del panel. Ámbar y no verde: el verde es
   el color de lo que este periódico afirma, y esto no está publicado. Solo
   sale en /admin/…/previsualizar/. */
.previsualizacion {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #f5e6b8;
    color: #4a3a05;
    border-bottom: 2px solid #d9b94a;
    font-family: var(--sans);
    font-size: 0.92rem;
}
.previsualizacion__interior {
    padding: 0.55rem 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    align-items: center;
}
.previsualizacion a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    margin-left: auto;
}

.franxa__interior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 40px;
    padding-top: 0.35rem;
}

.franxa p { margin: 0; }

.franxa__data { text-transform: uppercase; letter-spacing: 0.14em; }
.franxa__lugar { color: var(--verde-claro); margin-left: 0.6rem; }

.franxa__ferramentas { display: flex; align-items: center; gap: 1.25rem; }
.franxa__ferramentas a {
    color: var(--verde-claro);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}
.franxa__ferramentas a:hover { color: var(--papel); }

/* Facebook, Instagram, Threads y X. Iconos en linea (partials/redes.php),
   del color de lo que los rodea. En la franja van solos; en el pie, con su
   nombre, y se parten en dos lineas si en el movil no caben las cuatro. */
.redes { display: flex; align-items: center; gap: 0.9rem; list-style: none; margin: 0; padding: 0; }
.redes__ligazon { display: inline-flex; align-items: center; gap: 0.45rem; }
.redes__icona { display: block; flex: none; }
.redes--franxa .redes__ligazon { padding: 0.2rem; margin: -0.2rem; }

.pe__marca .pe__segue {
    font-family: var(--cond);
    font-weight: 600;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--verde-claro);
    margin: 1.4rem 0 0.7rem;
}
.redes--pe { flex-wrap: wrap; gap: 0.7rem 1.4rem; }
.redes--pe .redes__ligazon { color: var(--papel); text-decoration: none; font-size: 0.86rem; }
.redes--pe .redes__ligazon:hover { color: var(--verde-claro); }
.redes--pe .redes__ligazon:hover span { text-decoration: underline; }

/* =====================================================================
   Mancheta
   ===================================================================== */

/* El bloque verde macizo, a sangre. Mismo fondo que la franja de arriba y
   sin filete entre las dos. */
.cabeceira {
    background: var(--verde);
    padding: 0.5rem 0 1.4rem;
}

/* Mancheta a la IZQUIERDA, no centrada. La rejilla pasa de tres columnas
   a dos: el logotipo ocupa la primera y las herramientas la segunda. Las
   dos se alinean por abajo para que el idioma y el buscador queden a ras
   de la base del logotipo. */
.cabeceira__interior {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: end;
    gap: 1rem 2rem;
}

/* El logotipo. Manual 01: sin espacio entre palabras, «Hoxe» en bold y
   verde, interletraje −1,5 %. No se altera. */
.marca {
    grid-column: 1;
    margin: 0;
    text-align: left;
}
.marca a { text-decoration: none; display: inline-block; }

/* El logotipo, en versales y condensado.

   Del manual v1.0 sobrevive lo que hacia falta que sobreviviese: las dos
   palabras SIN ESPACIO y «Hoxe» en otro tono. Lo que se va es la Palatino
   y el interletraje negativo — una condensada a 6,5rem con tracking
   negativo se empasta y deja de leerse.

   El `clamp` no es adorno: a 104 px fijos, que es como esta dibujada la
   direccion a 1440, en un movil de 360 px la mancheta saldria por la
   ventana. */
.marca__nome {
    font-family: var(--cond);
    font-size: clamp(2.6rem, 7.4vw, 6.5rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.008em;
    line-height: 0.9;
    color: var(--papel);
    white-space: nowrap;
    display: block;
}
.marca__nome strong { font-weight: 800; color: var(--verde-claro); }

/* ---------------------------------------------------------------------
   Selector de idioma y buscador: un solo grupo, a la derecha
   ---------------------------------------------------------------------
   El selector estuvo hasta el 2026-08-22 en la franja negra de arriba,
   en gris claro y a 0,78rem, entre la fecha y el RSS. Era el punto de
   menos peso visual de la pagina — y detras de el esta la mitad
   castellana del periodico entera.
   --------------------------------------------------------------------- */
.cabeceira__ferramentas {
    grid-column: 2;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding-bottom: 0.5rem;
}

/* El selector de idioma, AHORA EN NEGATIVO.

   Sigue sin haber un segundo acento —«un solo acento de color, ninguna
   excepcion» es lo unico del manual v1.0 que Mandeo conserva entero, y
   por eso `secciones.color` sigue sin pintarse—. Lo que cambia es el
   fondo sobre el que cae: hasta hoy era un bloque verde sobre Papel, y
   ahora la mancheta entera es verde, asi que el mismo bloque verde
   habria desaparecido dentro de ella. Se invierte: Papel macizo con el
   texto en Verde Mandeo, y el codigo de lengua en verde sobre blanco.
   La pieza sigue siendo la mas visible de la esquina, que es su trabajo:
   detras de ella esta la mitad castellana del periodico.

   El hueco de 0,9rem con el buscador tampoco es decorativo: sin
   separacion los dos bloques claros se leerian como un solo control. */
.idioma {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--papel);
    border-radius: var(--radio);
    background: var(--papel);
    color: var(--verde);
    font-family: var(--cond);
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-decoration: none;
    white-space: nowrap;
}

.idioma:hover,
.idioma:focus-visible {
    background: var(--verde-claro);
    border-color: var(--verde-claro);
    color: var(--verde-escuro);
}

/* El codigo de lengua, en negativo del negativo: verde sobre blanco
   dentro de una pastilla blanca no se distinguiria, asi que aqui lleva
   el fondo verde. Es lo que hace que el boton se reconozca de un vistazo
   sin leerlo. */
.idioma__codigo {
    padding: 0.1rem 0.36rem;
    border-radius: var(--radio);
    background: var(--verde);
    color: var(--papel);
    font-weight: 700;
    letter-spacing: 0.08em;
}

/* Dentro de la mancheta verde, el filete gris no pinta nada: lo que
   recorta el campo es el propio contraste con el verde. En la pagina de
   busqueda, donde `.buscador--grande` cae sobre Papel, el filete si hace
   falta y vuelve mas abajo. */
.buscador {
    display: flex;
    align-items: center;
    border: 1px solid transparent;
    background: var(--papel-alto);
    border-radius: var(--radio);
    overflow: hidden;
    max-width: 260px;
}
.buscador input {
    border: 0;
    background: transparent;
    padding: 0.5rem 0.7rem;
    font-family: var(--sans);
    font-size: 0.85rem;
    color: var(--tinta);
    width: 100%;
    min-width: 0;
}
.buscador input:focus { outline: none; }
/* El boton va en TINTA, no en verde: sobre la mancheta verde un boton
   verde no se separaria del fondo. El negro es el tercer color de
   Mandeo —mancheta verde, barra de secciones negra, fondo Papel— asi que
   no es un color nuevo. */
.buscador button {
    border: 0;
    background: var(--tinta);
    color: var(--papel);
    font-family: var(--cond);
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 0.55rem 0.9rem;
    cursor: pointer;
}
.buscador button:hover { background: var(--verde-escuro); }

.buscador--grande {
    max-width: none;
    width: 100%;
    margin-bottom: 2rem;
    border-color: var(--linha);
}
.buscador--grande input { font-size: 1rem; padding: 0.8rem 1rem; }

/* =====================================================================
   Barra de secciones
   ===================================================================== */

/* La barra de secciones, en NEGRO macizo y pegada a la mancheta verde.
   Los tres colores de Mandeo, uno encima de otro: verde, negro, Papel. */
.navegacion {
    border: 0;
    background: var(--tinta);
    position: sticky;
    top: 0;
    z-index: 20;
}

/* Alineada a la izquierda, como la mancheta. Centrada quedaba flotando
   en medio de una banda negra que ya no tiene nada a los lados. */
.navegacion ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.navegacion a {
    display: block;
    padding: 0.62rem 0.95rem;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    text-decoration: none;
    color: var(--papel);
    border-bottom: 3px solid transparent;
}
.navegacion a:hover { color: var(--verde-claro); border-bottom-color: var(--verde-claro); }


/* =====================================================================
   El menu de movil
   ---------------------------------------------------------------------
   En pantalla estrecha las secciones, el buscador y el selector de idioma
   se guardan detras de un boton y salen en un panel que ocupa la pantalla
   entera, en Verde oscuro y con todo en blanco.

   EL BOTON NO EXISTE HASTA QUE HAY JAVASCRIPT. Se enseña solo bajo
   `.con-menu`, que pone `nav.js` al arrancar. Sin JS no hay boton, no se
   esconde nada y la cabecera se queda como estaba: las secciones y el
   buscador a la vista. Un boton que no abre nada es peor que no tenerlo.

   La cabecera NO se tapa con el panel: se queda encima y sin fondo, de
   modo que el verde oscuro llega de arriba abajo y el logotipo y el boton
   siguen exactamente donde estaban. Asi al abrir no salta nada de sitio, y
   el boton que abrio el menu es el mismo que lo cierra.
   ===================================================================== */

.burger { display: none; }

@media (max-width: 860px) {

    .con-menu .cabeceira__interior { grid-template-columns: 1fr auto; }
    .con-menu .marca { grid-column: 1; }

    .con-menu .burger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        grid-column: 2;
        justify-self: end;
        align-self: center;
        /* 48 px: por debajo de 44 un dedo falla, y este boton es la unica
           puerta a la navegacion entera. */
        width: 48px;
        height: 48px;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--papel);
        cursor: pointer;
    }

    .burger__caixa {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 26px;
    }

    .burger__risca {
        display: block;
        height: 3px;
        background: currentColor;
        transition: transform 0.18s ease, opacity 0.18s ease;
    }

    /* Abierto, las tres rayas se cruzan. 8 px de desplazamiento = 3 de
       raya + 5 de hueco, que es lo que separa un centro del siguiente. */
    body.menu-aberto .burger__risca:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    body.menu-aberto .burger__risca:nth-child(2) { opacity: 0; }
    body.menu-aberto .burger__risca:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    /* --- El panel -------------------------------------------------- */

    .con-menu .navegacion { display: none; }

    body.menu-aberto { overflow: hidden; }

    /* z-index 70, POR ENCIMA DEL BANNER DE CONSENTIMIENTO, que esta en 60.

       Con los dos en 60 ganaba el banner por orden en el documento, y en
       una primera visita el menu recien abierto salia con el cartel de
       cookies cruzado por la mitad, tapando las ultimas secciones. No es
       esconder el banner: sigue ahi y vuelve entero al cerrar el menu. */
    body.menu-aberto .navegacion {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 70;
        background: var(--verde-escuro);
        overflow-y: auto;
        overscroll-behavior: contain;
        /* El hueco de arriba es para la cabecera, que queda por encima. */
        padding: 8.5rem 0 3rem;
    }

    body.menu-aberto .franxa,
    body.menu-aberto .cabeceira {
        position: relative;
        z-index: 72;
        background: transparent;
    }

    body.menu-aberto .navegacion ul {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0;
    }

    body.menu-aberto .navegacion > .contedor > ul > li {
        border-top: 1px solid rgba(255, 255, 255, 0.16);
    }

    body.menu-aberto .navegacion a {
        color: var(--papel);
        font-size: 1.6rem;
        letter-spacing: 0.08em;
        padding: 0.85rem 0;
        border-bottom: 0;
    }

    /* La flecha, mas grande y bajada. Centrada «de verdad» quedaba como un
       superindice: la condensada tiene mucha altura de caja por encima de
       las versales, y el centro de la linea cae bastante mas arriba que el
       centro optico de lo que se ve escrito. */
    body.menu-aberto .navegacion__frecha {
        border-left-width: 5px;
        border-right-width: 5px;
        border-top-width: 6px;
        margin-top: 0.34em;
        opacity: 0.8;
    }

    /* El submenu, dentro del panel, sin caja propia: una caja gris clara
       en medio del verde se leeria como otra cosa pegada encima. Se marca
       con sangria y un filete, que es lo que dice «esto cuelga de ahi». */
    body.menu-aberto .navegacion .navegacion__despregable {
        background: transparent;
        margin: 0 0 0.5rem 0.2rem;
        border-left: 2px solid rgba(255, 255, 255, 0.28);
        padding: 0;
    }
    body.menu-aberto .navegacion .navegacion__despregable li + li { border-top: 0; }
    body.menu-aberto .navegacion .navegacion__despregable a {
        color: var(--verde-claro);
        font-size: 1.2rem;
        text-align: left;
        padding: 0.45rem 0 0.45rem 1.1rem;
    }

    /* --- El buscador y el idioma, ya movidos aqui por nav.js -------- */

    body.menu-aberto .cabeceira__ferramentas {
        display: flex;
        flex-wrap: wrap;
        /* `flex-start` y no el `stretch` de serie: el selector de idioma
           esta solo en su linea y se estiraba a lo alto de ella, saliendo
           como un bloque el doble de alto de lo que mide su texto. */
        align-items: flex-start;
        gap: 0.9rem;
        margin: 0 0 1.25rem;
        padding: 0 0 1.5rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    }
    body.menu-aberto .buscador {
        flex: 1 1 100%;
        max-width: none;
        border-color: transparent;
    }
    body.menu-aberto .idioma { flex: 0 0 auto; }
}

/* =====================================================================
   Migas
   ===================================================================== */

/* ==========================================================================
   «Inscricións hoxe»: la franja de lo que se puede pedir hoy
   --------------------------------------------------------------------------
   Debajo de la barra de secciones. Es un <details> cerrado: UNA linea, y
   solo cuando hay algun plazo abierto. Cero invasivo fue la condicion, asi
   que ni color de fondo ni borde grueso: un filete y letra pequeña. La
   prisa la lleva el texto («hoxe remata»), no el color.
   ========================================================================== */
.inscricions {
    background: var(--granate);
    color: var(--papel);
    font-family: var(--sans);
    font-size: 0.82rem;
    line-height: 1.4;
}
/* El <summary> ocupa la franja entera, de borde a borde: todo el es
   pulsable. El contenido va centrado dentro con `.contedor`. */
.inscricions__resumo {
    display: block;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.inscricions__resumo-interior {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.9rem;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}
.inscricions__resumo::-webkit-details-marker { display: none; }
.inscricions__resumo:hover { background: var(--granate-escuro); }
.inscricions__titulo {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.72rem;
    color: var(--papel);
    white-space: nowrap;
}
.inscricions__conta {
    display: inline-block;
    min-width: 1.5em;
    padding: 0 0.4em;
    border-radius: 1em;
    background: var(--papel);
    color: var(--granate);
    text-align: center;
    font-size: 0.68rem;
    line-height: 1.6;
}
/* El aviso mas urgente, y es un enlace a su pieza: subrayado fino para que
   se vea que lo es sin que grite. */
/* El aviso mas urgente. Texto, no enlace: la linea entera abre la lista, y
   los enlaces estan dentro. */
.inscricions__aviso {
    color: var(--papel);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
/* La pista de que esto se despliega: a la derecha, con su flecha, y cambia
   de texto al abrirse. Un <details> sin marcador no se reconoce como
   desplegable; con un «Ver todas» al lado si. */
.inscricions__abrir {
    margin-left: auto;
    white-space: nowrap;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid rgba(251, 250, 247, 0.55);
    border-radius: 2px;
    padding: 0.1rem 0.55rem;
}
.inscricions__resumo:hover .inscricions__abrir { border-color: var(--papel); }
.inscricions__abrir::after { content: " ▾"; }
.inscricions[open] .inscricions__abrir::after { content: " ▴"; }
.inscricions__abrir-aberto { display: none; }
.inscricions[open] .inscricions__abrir-pechado { display: none; }
.inscricions[open] .inscricions__abrir-aberto { display: inline; }
.inscricions__lista {
    list-style: none;
    /* `auto` a los lados: `.contedor` centra con margen automatico, y un
       `margin: 0` a secas lo pegaria al borde izquierdo de la ventana. */
    margin: 0 auto;
    padding: 0.2rem 1.25rem 0.7rem;
    border-top: 1px solid rgba(251, 250, 247, 0.25);
}
.inscricions__item { padding: 0.2rem 0; }
.inscricions__item a {
    color: var(--papel);
    text-decoration: underline;
    text-decoration-color: rgba(251, 250, 247, 0.55);
    text-underline-offset: 0.18em;
}
.inscricions__item a:hover { text-decoration-color: var(--papel); }
.inscricions__item a::after { content: " →"; opacity: 0.7; }
.inscricions__item--urxe a { font-weight: 700; }
@media (max-width: 640px) {
    .inscricions__aviso { display: none; }
}

.migas {
    font-size: 0.76rem;
    color: var(--apagado);
    padding: 0.9rem 0 0;
}
.migas ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.migas li + li::before { content: "›"; margin-right: 0.4rem; color: var(--tenue); }
.migas a { text-decoration: none; }
.migas a:hover { color: var(--verde); }

/* =====================================================================
   Marco: contenido + columna lateral
   ===================================================================== */

.marco {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 3rem;
    align-items: start;
    padding-top: 2rem;
    padding-bottom: 4rem;
}

.marco__principal { min-width: 0; }

/* La columna lateral YA NO ES `sticky`, y se quito el 2026-08-23.
   ---------------------------------------------------------------------
   Un elemento pegajoso mas alto que la ventana se clava arriba y NO se
   desplaza por dentro: su mitad inferior no se puede alcanzar nunca, por
   mucho que se baje en la pagina.

   Medido en la portada ese dia: la columna mide 1965 px y una ventana de
   portatil, 1069. O sea que el tiempo y el boletin se veian y los otros
   dos bloques —«Ultimos comentarios» y «O ultimo»— no los habia visto
   nadie. No era un fallo nuevo: «O ultimo» llevaba asi desde que la
   columna crecio, y solo se noto al anadir un bloque mas.

   Sin `sticky` la columna sube con la pagina, que es lo que hace todo el
   mundo con una barra larga. Lo que se pierde es que el tiempo te siga
   mientras lees; lo que se gana es que exista la mitad de la columna. */
.lateral {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.lateral__titulo {
    font-family: var(--cond);
    font-weight: 600;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--tinta);
    margin: 0 0 0.9rem;
    padding-bottom: 0.5rem;
    border-bottom: 5px solid var(--verde);
}

/* =====================================================================
   Portada · 1. Apertura
   ===================================================================== */

/* El filete de 5 px es de la direccion, no un adorno: es lo que separa
   la apertura del resto de la portada sin necesidad de un titulo que
   diga «mas noticias». */
.apertura {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 2.75rem;
    padding-bottom: 2.5rem;
    margin-bottom: 2.5rem;
    border-bottom: 5px solid var(--tinta);
}

.destacada__imaxe {
    margin: 0 0 1.25rem;
    position: relative;
}
/* En la apertura el sello sube de cuerpo: la foto es el doble de grande y
   con el tamaño de la tarjeta pequeña se perderia en la esquina. */
.destacada__imaxe a { display: block; position: relative; }
.destacada__imaxe .tarxeta__data {
    position: absolute;
    top: 0.9rem;
    left: 0.9rem;
    font-size: 0.95rem;
    padding: 0.5rem 0.75rem;
}
.destacada__imaxe img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radio);
}
.destacada__imaxe figcaption,
.peza__imaxe figcaption {
    font-family: var(--sans);
    font-size: 0.72rem;
    color: var(--apagado);
    margin-top: 0.45rem;
    letter-spacing: 0.02em;
}

/* Antetitulo. En Mandeo sube a 17 px y baja de tracking: el +0,3em del
   manual estaba calculado para una Helvetica a 15 px, y una condensada
   en versales con esa separacion se deshace en letras sueltas. */
.destacada__seccion, .tarxeta__seccion, .peza__seccion {
    font-size: 1.05rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--verde);
    margin: 0 0 0.6rem;
}
.destacada__seccion a, .tarxeta__seccion a, .peza__seccion a { text-decoration: none; }

/* El titular de apertura. En versales y con interlineado por debajo de 1
   —una condensada de caja alta no tiene ascendentes ni descendentes que
   choquen, asi que el hueco de una linea normal la deja desarmada—.

   NO va a los 88 px con los que esta dibujada la direccion, y la razon
   es la maqueta real: alli el titular tenia toda la anchura menos una
   figura, y aqui la apertura convive con la columna de ultimas Y con la
   lateral, asi que le quedan unos 590 px. A 88 px, un titular gallego de
   verdad —«Un incendio en Talai mobiliza a Proteccion Civil e a Xunta»—
   salia a CINCO lineas y empujaba la portada entera por debajo del
   pliegue. A 3,4rem caben tres, que es lo que pide un titular de
   apertura. */
.destacada__titular {
    font-size: clamp(2.2rem, 3.8vw, 3.4rem);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 0.94;
    letter-spacing: 0.002em;
    margin: 0 0 1rem;
}
.destacada__titular a { text-decoration: none; }
.destacada__titular a:hover { color: var(--verde); }

.destacada__entradilla {
    font-size: 1.3rem;
    line-height: 1.45;
    color: var(--texto);
    margin-bottom: 0.7rem;
    max-width: 38em;
}

.destacada__meta, .tarxeta__meta, .bloque-seccion__data {
    font-size: 0.9rem;
    color: var(--apagado);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
}

/* ---------------------------------------------------------------------
   Carrusel de entrevistas, dentro de la apertura y a todo su ancho.

   Es CSS: una fila con scroll horizontal y `scroll-snap`. DOS piezas a la
   vista en escritorio, UNA en movil (ver el bloque de 860px, abajo). Las flechas
   las enseña `carrusel.js`; sin el, se arrastra igual.
   --------------------------------------------------------------------- */
.carrusel {
    grid-column: 1 / -1;
    min-width: 0;
    padding-top: 1.75rem;
    border-top: 1px solid var(--linha);
}
.carrusel__cabeceira {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}
.carrusel__titulo {
    font-family: var(--cond);
    font-weight: 600;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin: 0;
}
.carrusel__titulo a { text-decoration: none; }
.carrusel__titulo a:hover { color: var(--verde); }
.carrusel__frechas { display: flex; gap: 0.4rem; }
.carrusel__frechas[hidden] { display: none; }
.carrusel__frecha {
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid var(--tinta);
    background: transparent;
    color: var(--tinta);
    font-family: var(--sans);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}
.carrusel__frecha:hover:not(:disabled) { background: var(--tinta); color: var(--papel); }
.carrusel__frecha:disabled { opacity: 0.3; cursor: default; }

.carrusel__pista {
    --carrusel-oco: 1.75rem;
    display: flex;
    gap: var(--carrusel-oco);
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}
.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__elemento {
    flex: 0 0 calc((100% - var(--carrusel-oco)) / 2);
    min-width: 0;
    scroll-snap-align: start;
}

/* Cada entrevista: la imagen a la izquierda en las tres filas; a la derecha
   titular, entradilla reducida y fecha. */
.entrevista {
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
        "image title"
        "image entradilla"
        "image fecha";
    column-gap: 1.1rem;
    height: 100%;
}
.entrevista--sen-imaxe {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "entradilla" "fecha";
}
.entrevista__imaxe { grid-area: image; display: block; }
.entrevista__imaxe img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.entrevista__titular {
    grid-area: title;
    font-size: clamp(1.15rem, 1.5vw, 1.4rem);
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.02;
    margin: 0 0 0.5rem;
}
.entrevista__titular a { text-decoration: none; }
.entrevista__titular a:hover { color: var(--verde); }
.entrevista__entradilla {
    grid-area: entradilla;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--texto);
    margin: 0 0 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.entrevista__data {
    grid-area: fecha;
    align-self: end;
    font-family: var(--cond);
    font-size: 0.85rem;
    color: var(--apagado);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
}

/* Columna de ultimas de la apertura */
.ultimas {
    border-left: 0;
    padding-left: 0;
}
.ultimas__titulo {
    font-family: var(--cond);
    font-weight: 600;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--tinta);
    padding-bottom: 0.5rem;
    border-bottom: 5px solid var(--tinta);
    margin-bottom: 0.4rem;
}

/* La columna numerada 01-04.

   Los numeros NO estan en la plantilla y no hacia falta ponerlos: la
   lista ya era un `<ol>`, asi que un contador de CSS los saca solos y
   se renumeran soles cuando entra una pieza nueva. Si algun dia esto
   deja de ser un `<ol>`, los numeros desaparecen sin romper nada.

   Cada `li` tiene exactamente dos hijos —`time` y `a`—, y de ahi salen
   las dos filas de la rejilla; el numero ocupa las dos. */
.ultimas__lista { list-style: none; margin: 0; padding: 0; counter-reset: ultimas; }
.ultimas__lista li {
    counter-increment: ultimas;
    display: grid;
    grid-template-columns: 2.2rem minmax(0, 1fr);
    gap: 0 0.8rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--linha-suave);
    font-size: 1rem;
    line-height: 1.3;
}
.ultimas__lista li::before {
    content: counter(ultimas, decimal-leading-zero);
    grid-row: 1 / span 2;
    font-family: var(--cond);
    font-weight: 700;
    font-size: 2rem;
    line-height: 0.85;
    color: var(--verde);
}
.ultimas__lista li:last-child { border-bottom: 0; }
.ultimas__lista time {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--apagado);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.15rem;
}
.ultimas__lista a { text-decoration: none; }
.ultimas__lista a:hover { color: var(--verde); }

/* =====================================================================
   Portada · 2. Rejilla de tarjetas
   ===================================================================== */

.grella {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.tarxeta { display: flex; flex-direction: column; }

.tarxeta__imaxe { margin: 0 0 0.9rem; display: block; position: relative; }
.tarxeta__imaxe img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radio);
}

/* =====================================================================
   El sello con la fecha del acto, sobre la foto de la tarjeta
   ---------------------------------------------------------------------
   En una agenda la fecha es la mitad de la informacion: quien mira un
   listado de actos busca el dia, no el titular. Abajo, en la linea de la
   firma, quedaria pegada a la fecha de PUBLICACION — dos fechas seguidas
   que dicen cosas distintas es la mejor forma de que no se lea ninguna.

   Va en verde solido y no en un cristal translucido: sobre una foto
   cualquiera, un fondo semitransparente puede quedar ilegible segun lo que
   haya debajo, y eso solo se descubre con la foto que lo rompe.
   ===================================================================== */
.tarxeta__data {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3em;
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
    color: #fff;
    background: var(--verde);
    padding: 0.42rem 0.6rem;
    border-radius: var(--radio);
    /* Un filete blanco: sobre una foto clara, el verde solo se funde. */
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}
.tarxeta__data small {
    font-size: 0.78em;
    font-weight: 600;
    opacity: 0.85;
}
/* Dentro de la foto: arriba a la izquierda, que es por donde se empieza a
   leer y donde menos foto se tapa. */
.tarxeta__imaxe .tarxeta__data {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
}
/* Un acto que ya paso no grita. La tarjeta sigue ahi —su URL puede estar en
   un marcador— pero el sello deja de parecer un aviso. */
.tarxeta__data--pasado {
    background: var(--apagado);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75);
}
/* Sin foto, el sello ocupa el sitio donde iria la imagen: que la fecha se
   pierda justo en las piezas sin foto seria el peor sitio para perderla. */
.tarxeta__data-soa { margin: 0 0 0.7rem; }

.tarxeta__seccion { font-size: 0.95rem; letter-spacing: 0.14em; margin-bottom: 0.4rem; }

.tarxeta__titular {
    font-size: clamp(1.55rem, 2.2vw, 2.1rem);
    font-weight: 600;
    text-transform: uppercase;
    line-height: 0.98;
    margin: 0 0 0.55rem;
}
.tarxeta__titular a { text-decoration: none; }
.tarxeta__titular a:hover { color: var(--verde); }

.tarxeta__entradilla {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--texto);
    margin-bottom: 0.5rem;
}

.tarxeta__firma { font-family: var(--sans); font-size: 0.72rem; color: var(--apagado); }

/* =====================================================================
   Portada · 3. Bloques por seccion
   ===================================================================== */

.bloques {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem;
    padding-top: 2.5rem;
    border-top: 5px solid var(--tinta);
}

/* El rotulo de seccion va en TINTA con el filete verde debajo, no al
   reves. Con el titulo tambien en verde, el filete de 5 px y el texto se
   sumaban en una sola mancha de color y la seccion dejaba de leerse. */
.bloque-seccion__titulo {
    font-family: var(--cond);
    font-weight: 600;
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--tinta);
    padding-bottom: 0.5rem;
    border-bottom: 5px solid var(--verde);
    margin-bottom: 0.8rem;
}
.bloque-seccion__titulo a { text-decoration: none; }

.bloque-seccion__lista { list-style: none; margin: 0; padding: 0; }
.bloque-seccion__lista li {
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--linha-suave);
}
.bloque-seccion__lista li:last-child { border-bottom: 0; }
.bloque-seccion__lista h3 {
    font-size: 1.55rem;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 0.98;
    margin: 0 0 0.35rem;
}
.bloque-seccion__lista h3 a { text-decoration: none; }
.bloque-seccion__lista h3 a:hover { color: var(--verde); }

.bloque-seccion__imaxe { display: block; margin-bottom: 0.6rem; }
.bloque-seccion__imaxe img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radio);
}

/* =====================================================================
   Portada · 4. Indice de secciones
   ===================================================================== */

.seccions-portada {
    margin-top: 3.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--linha);
}
.seccions-portada h2 {
    font-family: var(--cond);
    font-weight: 600;
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--apagado);
    margin-bottom: 1.25rem;
}
.seccions-portada__lista {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}
.seccions-portada__lista a {
    display: block;
    background: var(--papel-alto);
    border: 1px solid var(--linha);
    border-left: 5px solid var(--verde);
    border-radius: var(--radio);
    padding: 0.9rem 1rem;
    text-decoration: none;
    height: 100%;
}
.seccions-portada__lista a:hover { border-color: var(--verde); }
.seccions-portada__lista strong {
    display: block;
    font-family: var(--cond);
    font-weight: 600;
    font-size: 1.45rem;
    text-transform: uppercase;
    line-height: 1;
}
.seccions-portada__lista span {
    display: block;
    font-family: var(--sans);
    font-size: 0.78rem;
    color: var(--apagado);
    line-height: 1.4;
    margin-top: 0.2rem;
}

/* =====================================================================
   Cabecera de seccion y paginacion
   ===================================================================== */

.cabeceira-seccion {
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
    border-bottom: 5px solid var(--tinta);
}
.cabeceira-seccion h1 {
    font-size: clamp(2.2rem, 4.5vw, 3.6rem);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 0.95;
    margin-bottom: 0.4rem;
}
.cabeceira-seccion__intro { color: var(--texto); font-size: 1.1rem; margin-bottom: 0.5rem; }
.cabeceira-seccion__feed { font-size: 0.95rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; }
.cabeceira-seccion__feed a { color: var(--verde); text-decoration: none; }

.paxinacion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--linha);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.paxinacion a {
    text-decoration: none;
    border: 1px solid var(--linha);
    background: var(--papel-alto);
    padding: 0.55rem 1rem;
    border-radius: var(--radio);
}
.paxinacion a:hover { border-color: var(--verde); color: var(--verde); }
.paxinacion__estado { color: var(--apagado); letter-spacing: 0.06em; }

.resultados__contador { font-size: 0.85rem; color: var(--apagado); margin-bottom: 1.5rem; }

/* =====================================================================
   Pieza
   ===================================================================== */

.peza__cabeceira {
    padding-bottom: 1.5rem;
    margin-bottom: 1.75rem;
    border-bottom: 5px solid var(--tinta);
}

/* El titular de la pieza. Mas contenido que el de portada —4,2rem
   contra 5,5rem— porque aqui no compite con nada: ya has entrado. */
.peza__titular {
    font-size: clamp(2.3rem, 5vw, 4.2rem);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 0.95;
    letter-spacing: 0.002em;
    margin: 0 0 1rem;
}

/* La entradilla se queda en Source Serif y en caja baja. Es la primera
   frase de verdad de la noticia, no un rotulo. */
.peza__entradilla {
    font-size: 1.35rem;
    line-height: 1.45;
    color: var(--texto);
    margin-bottom: 1rem;
    max-width: 38em;
}

.peza__meta, .peza__firma {
    font-family: var(--cond);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--apagado);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 0.3rem;
}

.peza__imaxe { margin: 0 0 2rem; }
.peza__imaxe img {
    width: 100%;
    /* SIEMPRE 16/9, sea la foto apaisada o vertical.
       El archivo tiene 22 fotos verticales de 3000x4000: servida a su
       proporcion, una de ellas ocuparia metro y medio de pantalla y
       empujaria el texto de la noticia por debajo del pliegue. Y ademas la
       portada, los listados y los bloques ya recortan a proporcion fija,
       asi que sin esto la misma foto tendria una forma en la portada y otra
       en la pieza. Se recorta por el centro. */
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radio);
}

/* =====================================================================
   EL CUERPO DE LA NOTICIA VA EN SANS, Y ES LO ÚNICO QUE VA EN SANS
   ---------------------------------------------------------------------
   Decidido por el titular el 2026-09-01. Es una DISCREPANCIA CON EL
   MANUAL DE MARCA v1.0, que fija la serif para todo, y va anotada como
   la del sello: no es un descuido.

   El reparto que queda, y conviene tenerlo claro antes de tocar nada:

     - SANS  el texto corrido de una pieza y el de las páginas fijas, que
             es lo que se lee de seguido y durante minutos.
     - SERIF todo lo que RODEA a la noticia: la entradilla, las tarjetas
             de portada y de sección, el bloque «Cando», el pie, la
             columna lateral. Eso es lo que le da la cara al sitio.

   La entradilla se queda en serif A PROPÓSITO —ver su regla ahí arriba—:
   marca «esto es el resumen» y el cuerpo marca «esto es el texto». Si
   algún día se decide bajarla también, se cambia allí y no aquí.

   NO se carga ninguna tipografía nueva, y esa fue la condición: `--sans`
   es la Helvetica/Arial del sistema, así que esto cuesta CERO bytes de
   descarga — de hecho el cuerpo pasa a pintarse sin esperar a ningún
   fichero. La Source Serif se sigue cargando igual, porque la usa todo
   lo demás.

   --------------------------------------------------------------------
   POR QUÉ BAJA DE 1,06rem A 1rem SI NADIE PIDIÓ QUE FUERA MÁS PEQUEÑO
   --------------------------------------------------------------------
   Porque no es más pequeño: es el MISMO tamaño aparente. Lo que se ve de
   una letra es su altura de x, no su cuerpo nominal, y la de la
   Helvetica es bastante mayor que la de la Source Serif (≈0,52 del em
   frente a ≈0,47). Dejando 1,06rem, el cuerpo daría un salto de tamaño
   al cambiar de letra que nadie pidió y que en la portada —que sigue en
   serif— se vería como una incoherencia.

   Y por eso mismo sube el interlineado a 1,7: una letra con la altura de
   x grande necesita más aire entre líneas para no empastarse, que es el
   defecto clásico de una Arial en párrafo largo.
   ===================================================================== */
.peza__corpo {
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.7;
    max-width: 40em;
}
.peza__corpo p { margin-bottom: 1.15em; }
/* Los intertitulos suben de cuerpo porque la condensada ocupa menos:
   a 1,6rem quedaban por debajo del texto que encabezan. En caja BAJA,
   por lo que dice la nota de `h1..h4` alla arriba. */
.peza__corpo h2 { font-size: 2.05rem; margin-top: 2rem; }
.peza__corpo h3 { font-size: 1.6rem; margin-top: 1.6rem; }
.peza__corpo a { color: var(--verde); }
.peza__corpo ul, .peza__corpo ol { padding-left: 1.3em; margin-bottom: 1.15em; }
.peza__corpo li { margin-bottom: 0.4em; }
.peza__corpo blockquote {
    margin: 1.6em 0;
    padding-left: 1.2em;
    border-left: 3px solid var(--verde);
    color: var(--texto);
    font-style: italic;
}
.peza__corpo table { width: 100%; border-collapse: collapse; margin-bottom: 1.15em; font-size: 0.95rem; }
.peza__corpo th, .peza__corpo td { border-bottom: 1px solid var(--linha); padding: 0.5rem 0.6rem; text-align: left; }
/* Toda tabla del cuerpo va dentro de `.taboa-desprazable`, que la envuelve
   `Str::taboasDesprazables()` al pintar. En un movil de 380 px una tabla de
   cuatro columnas se salia por la derecha y partia cada hora en tres lineas
   (2026-09-09, el programa del Festibam). Ahora la tabla mide lo que
   necesita y es el contenedor el que se desplaza a lo ancho. */
.taboa-marco { position: relative; margin: 0 0 1.15em; max-width: 100%; }
.taboa-desprazable {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}
.taboa-desprazable table { margin-bottom: 0; min-width: 100%; }
.taboa-desprazable th, .taboa-desprazable td { min-width: 6.5rem; }
.taboa-desprazable th:first-child, .taboa-desprazable td:first-child { min-width: 5rem; }
/* La señal de que queda tabla por la derecha: un degradado en el borde y
   una pista debajo. Van en `.taboa-marco`, FUERA de lo que se desplaza. Las
   enciende `taboas.js` (`--mais`) cuando hay algo oculto y las apaga al
   llegar al final. Sin script, en pantalla estrecha se ven siempre: una
   tabla que no desborda con una pista de sobra es un mal menor frente a una
   columna que nadie ve. */
.taboa-marco::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 3.5rem;
    pointer-events: none;
    /* Oscuro, no blanco: el blanco se confundia con el fondo y no se veia
       (2026-09-09). Una sombra que cae sobre la ultima columna se lee como
       «hay algo detras». */
    background: linear-gradient(to right, rgba(16, 16, 16, 0), rgba(16, 16, 16, 0.38));
    display: none;
}
.taboa-marco--mais::after { display: block; }
.taboa-marco--mais .taboa-desprazable { padding-bottom: 0; }
.taboa-pista {
    display: none;
    margin: 0.35rem 0 0;
    font-family: var(--sans);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--granate);
    text-align: right;
}
.taboa-marco--mais .taboa-pista { display: block; }
.taboa-pista::before {
    content: "";
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    margin-right: 0.45em;
    border-radius: 50%;
    background: var(--granate);
    animation: taboa-pista-late 1.4s ease-in-out infinite;
}
@keyframes taboa-pista-late { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .taboa-pista::before { animation: none; } }
/* Sin JavaScript (`--js` no puesto): en pantalla estrecha se ensena todo. */
@media (max-width: 640px) {
    .taboa-marco:not(.taboa-marco--js)::after { display: block; }
    .taboa-marco:not(.taboa-marco--js) .taboa-pista { display: block; }
}
/* Red por si una tabla llega sin envoltorio (una plantilla nueva que no
   pase por el helper): que al menos no rompa la pagina. */
.peza__corpo > table { display: block; overflow-x: auto; }
.peza__corpo small { font-size: 0.82rem; color: var(--apagado); }

/* Imagenes DENTRO del texto. No es la destacada: esa va arriba, a 16/9 y
   recortada al centro porque tiene que caber en la portada y en la tarjeta
   social. Estas no van a ninguna de las dos partes, asi que se respeta su
   proporcion: una vertical de una fachada se lee como una fachada, y
   recortarla a apaisada seria cortar justo lo que se estaba enseñando. */
.peza__corpo figure {
    margin: 2rem 0;
}
.peza__corpo figure img {
    width: 100%;
    height: auto;
    border-radius: var(--radio);
}
.peza__corpo figcaption {
    font-family: var(--sans);
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--apagado);
    margin-top: 0.5rem;
}
/* El credito y el origen, que los pone solos `ImaxeCorpo::pe()`. Van mas
   apagados que el pie porque son otra cosa: el pie cuenta la foto y esto
   dice de quien es. Pero se leen — que se lean es justamente el motivo de
   que esten ahi. */
.peza__corpo figcaption small {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    margin-top: 0.15rem;
}
.peza__corpo figcaption a { color: var(--verde); }

/* Aviso de retirada o de alerta dentro del cuerpo. */
.peza__corpo .retirada {
    background: #FDF6E7;
    border-left: 3px solid #B45309;
    padding: 0.9rem 1.1rem;
    border-radius: var(--radio);
}

.peza__fonte, .peza__actualizada {
    font-family: var(--sans);
    font-size: 0.8rem;
    color: var(--apagado);
    margin-top: 1.5rem;
}
.peza__fonte a { color: var(--verde); }

.peza__temas {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    list-style: none; margin: 2rem 0 0; padding: 1.5rem 0 0;
    border-top: 1px solid var(--linha);
}
.peza__temas a {
    font-family: var(--sans);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    border: 1px solid var(--linha);
    background: var(--papel-alto);
    padding: 0.35rem 0.7rem;
    border-radius: var(--radio);
}
.peza__temas a:hover { border-color: var(--verde); color: var(--verde); }

.ficha {
    background: var(--papel-alto);
    border: 1px solid var(--linha);
    border-left: 3px solid var(--verde);
    border-radius: var(--radio);
    padding: 1.25rem 1.4rem;
    margin: 2rem 0;
    font-size: 0.95rem;
}

.relacionadas {
    margin-top: 3.5rem;
    padding-top: 2rem;
    border-top: 2px solid var(--tinta);
}
.relacionadas h2 {
    font-family: var(--sans);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--verde);
    margin-bottom: 1.25rem;
}

/* =====================================================================
   Columna lateral · El tiempo
   ---------------------------------------------------------------------
   El unico bloque del sitio con fondo verde solido, y por eso es el unico
   que usa Verde claro para el texto secundario: el manual reserva ese
   color para fondo oscuro y aqui es donde hay fondo oscuro.
   ===================================================================== */

.tempo {
    background: var(--verde);
    color: var(--papel-alto);
    border-radius: var(--radio);
    padding: 1.25rem 1.35rem 1rem;
    overflow: hidden;
}

.tempo__titulo {
    font-family: var(--cond);
    font-weight: 600;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--verde-claro);
    margin: 0 0 0.9rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.tempo__agora {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1rem;
}

.tempo__icona { flex: 0 0 auto; }

.icona-tempo { display: block; }
.icona-tempo--grande { width: 62px; height: 62px; }
.icona-tempo--mini { width: 26px; height: 26px; }

/* Los iconos usan variables propias para que sobre verde se vean. La nube
   gris del manual desaparece sobre Verde Mandeo. */
.tempo {
    --tempo-nube: #E8EFEA;
    --tempo-nube-alta: #C6DCD0;
    --tempo-sol: #FBBF24;
    --tempo-lua: #DCE7E0;
    --tempo-choiva: #9AD8F5;
    --tempo-neve: #DFF3FC;
    --tempo-neboa: #C6DCD0;
    --tempo-raio: #FBBF24;
}

.tempo__grados {
    font-family: var(--cond);
    font-weight: 700;
    font-size: 3.8rem;
    line-height: 0.9;
    margin: 0;
    letter-spacing: 0;
}
.tempo__unidade { font-size: 1.3rem; vertical-align: super; margin-left: 0.1rem; opacity: 0.8; }

.tempo__ceo {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    color: var(--verde-claro);
    line-height: 1.3;
}

.tempo__detalles {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0.75rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.72rem;
}
.tempo__detalles li { display: flex; flex-direction: column; gap: 0.15rem; }
.tempo__detalles span { color: var(--verde-claro); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.64rem; }
.tempo__detalles strong { font-weight: 400; font-size: 0.9rem; }

.tempo__horas {
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 0.35rem;
    margin: 0 0 0.9rem;
    padding: 0;
}
.tempo__horas li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    flex: 1;
    text-align: center;
}
.tempo__hora { font-size: 0.68rem; color: var(--verde-claro); letter-spacing: 0.04em; }
.tempo__hora-temp { font-size: 0.85rem; }
.tempo__hora-choiva { font-size: 0.62rem; color: var(--tempo-choiva); }

.tempo__dias {
    list-style: none;
    margin: 0;
    padding: 0.75rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.tempo__dias li {
    display: grid;
    grid-template-columns: 2.4rem 26px 1fr auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.28rem 0;
    font-size: 0.82rem;
}
.tempo__dia { text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.08em; color: var(--verde-claro); }
.tempo__dia-choiva { font-size: 0.65rem; color: var(--tempo-choiva); }
.tempo__dia-temps strong { font-weight: 400; }
.tempo__dia-temps em { font-style: normal; color: var(--verde-claro); margin-left: 0.35rem; }

.tempo__fonte {
    margin: 0.9rem 0 0;
    font-size: 0.64rem;
    color: var(--verde-claro);
    letter-spacing: 0.03em;
    opacity: 0.85;
}
.tempo__fonte a { color: var(--papel-alto); }

/* =====================================================================
   Columna lateral · Gasolina mas barata (2026-09-13)
   ---------------------------------------------------------------------
   El precio en la condensada grande, como los grados del tiempo: es el
   numero que se viene a mirar. El nombre de la gasolinera va en versales
   porque asi lo escribe el Ministerio y asi esta en el poste.

   EN GRANATE, Y SUAVE. El mismo dia el titular pidio que se viera mas,
   «usando de forma sutil el color terciario». Granate porque es el color
   de lo que tiene que resaltar sin ser el acento de la casa —el mismo de
   la franja «Inscricions hoxe»—, y suave porque es una tarjeta de
   servicio, no un aviso: fondo apenas tintado, el filete del titulo, las
   etiquetas y la flecha. El precio sigue en Tinta, que es lo que se lee.
   ===================================================================== */

.carburantes {
    background: var(--granate-suave);
    border: 1px solid var(--granate-linha);
    border-radius: var(--radio);
    padding: 1.1rem 1.25rem;
    /* La barra de secciones va pegada arriba: sin esto, al llegar desde el
       submenu el titulo de la tarjeta quedaria debajo de ella. */
    scroll-margin-top: 4.5rem;
}
.carburantes .lateral__titulo {
    margin-bottom: 0.5rem;
    border-bottom-color: var(--granate);
}
/* Al llegar desde el submenu, un destello que se apaga: dice «es esta»
   sin quedarse marcado para siempre. Quien pide menos movimiento se queda
   con el marco quieto. */
.carburantes:target { animation: carburantes-sinal 2.4s ease-out 1; }
@keyframes carburantes-sinal {
    from { box-shadow: 0 0 0 4px rgba(123, 30, 46, 0.45); }
    to   { box-shadow: 0 0 0 4px rgba(123, 30, 46, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .carburantes:target { animation: none; box-shadow: 0 0 0 3px rgba(123, 30, 46, 0.35); }
}
.carburantes__ambito {
    margin: 0 0 0.3rem;
    font-size: 0.72rem;
    color: var(--apagado);
}
.carburantes__lista { list-style: none; margin: 0; padding: 0; }
.carburantes__item {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--granate-linha);
}
.carburantes__item:last-child { border-bottom: 0; padding-bottom: 0.2rem; }
.carburantes__produto {
    margin: 0;
    font-family: var(--cond);
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--granate);
}
.carburantes__prezo {
    margin: 0.1rem 0 0.25rem;
    font-family: var(--cond);
    font-weight: 700;
    font-size: 2.3rem;
    line-height: 1;
    color: var(--tinta);
}
.carburantes__unidade { font-size: 1rem; font-weight: 600; color: var(--apagado); }
.carburantes__estacion {
    display: inline-block;
    font-family: var(--cond);
    font-weight: 500;
    font-size: 1.15rem;
    text-transform: uppercase;
    line-height: 1.05;
    color: var(--tinta);
    text-decoration: underline;
    text-decoration-color: var(--granate-linha);
    text-underline-offset: 0.18em;
}
.carburantes__estacion::after { content: " →"; color: var(--granate); }
.carburantes__estacion:hover { color: var(--granate); text-decoration-color: currentColor; }
.carburantes__onde {
    margin: 0.2rem 0 0;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--apagado);
}
.carburantes__fonte {
    margin: 0.8rem 0 0;
    padding-top: 0.6rem;
    border-top: 1px solid var(--granate-linha);
    font-size: 0.64rem;
    line-height: 1.45;
    color: var(--apagado);
}
.carburantes__fonte a { color: var(--granate); }

/* =====================================================================
   Columna lateral · Ultimas
   ===================================================================== */

.lateral-ultimas {
    background: var(--papel-alto);
    border: 1px solid var(--linha);
    border-radius: var(--radio);
    padding: 1.1rem 1.25rem;
}
.lateral-ultimas ol { list-style: none; margin: 0; padding: 0; }
.lateral-ultimas li {
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--linha-suave);
}
.lateral-ultimas li:last-child { border-bottom: 0; padding-bottom: 0; }
.lateral-ultimas__seccion {
    margin: 0 0 0.2rem;
    font-family: var(--cond);
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--verde);
}
.lateral-ultimas a {
    font-family: var(--cond);
    font-weight: 500;
    font-size: 1.35rem;
    text-transform: uppercase;
    line-height: 1;
    text-decoration: none;
    display: block;
}
.lateral-ultimas a:hover { color: var(--verde); }
.lateral-ultimas time { display: block; font-size: 0.68rem; color: var(--apagado); margin-top: 0.2rem; }

/* =====================================================================
   Suscripcion
   ===================================================================== */

.subscricion {
    background: var(--papel-alto);
    border: 1px solid var(--linha);
    border-top: 3px solid var(--verde);
    border-radius: var(--radio);
    padding: 1.2rem 1.3rem;
}

.subscricion__titulo {
    font-family: var(--cond);
    font-weight: 600;
    font-size: 1.9rem;
    text-transform: uppercase;
    line-height: 0.98;
    margin: 0 0 0.5rem;
    letter-spacing: 0.004em;
}

.subscricion__texto {
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--texto);
    margin-bottom: 0.9rem;
}

.subscricion__campo { display: flex; gap: 0; }
.subscricion__campo input {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid var(--linha);
    border-right: 0;
    border-radius: var(--radio) 0 0 var(--radio);
    background: var(--papel);
    padding: 0.65rem 0.75rem;
    font-family: var(--sans);
    font-size: 0.88rem;
    color: var(--tinta);
}
.subscricion__campo input:focus { outline: none; border-color: var(--verde); }
.subscricion__campo button {
    flex: 0 0 auto;
    border: 0;
    background: var(--verde);
    color: var(--papel-alto);
    border-radius: 0 var(--radio) var(--radio) 0;
    padding: 0.65rem 1rem;
    font-family: var(--sans);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
}
.subscricion__campo button:hover { background: var(--verde-escuro); }

.subscricion__legal {
    font-size: 0.7rem;
    line-height: 1.45;
    color: var(--apagado);
    margin: 0.7rem 0 0;
}
.subscricion__legal a { color: var(--verde); }

/* El campo trampa. Fuera de la pantalla, no display:none: hay robots que
   miran justamente si un campo esta oculto con display para saltarselo. */
.subscricion__trampa {
    position: absolute !important;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

/* Variante del pie: ancha, sobre tinta. */
.subscricion--pe {
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0;
    padding: 2rem 0;
    margin-bottom: 2.5rem;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 2rem 3rem;
    align-items: center;
}
.subscricion--pe .subscricion__titulo { color: var(--papel-alto); font-size: 1.8rem; margin: 0; }
.subscricion--pe .subscricion__texto { color: var(--verde-claro); margin: 0.3rem 0 0; grid-row: 2; grid-column: 1; }
.subscricion--pe .subscricion__form { grid-row: 1 / span 2; grid-column: 2; }
.subscricion--pe .subscricion__campo input { background: var(--papel-alto); border-color: transparent; }
.subscricion--pe .subscricion__legal { color: var(--verde-claro); opacity: 0.85; }
.subscricion--pe .subscricion__legal a { color: var(--papel-alto); }

.subscricion--paxina { margin-top: 2rem; }

/* =====================================================================
   Pagina estrecha (suscripcion, error)
   ===================================================================== */

.paxina-estreita { max-width: 44em; }

.aviso-paxina {
    background: var(--papel-alto);
    border: 1px solid var(--linha);
    border-left: 5px solid var(--verde);
    border-radius: var(--radio);
    padding: 2rem 2.25rem;
}
.aviso-paxina--aviso { border-left-color: #B45309; }
.aviso-paxina--neutro { border-left-color: var(--regra); }
.aviso-paxina h1 { font-size: 2rem; margin-bottom: 0.5rem; }
.aviso-paxina p { color: var(--texto); margin: 0; }

.erro { text-align: center; padding: 4rem 0; }
.erro h1 { font-size: clamp(2.4rem, 6vw, 3.4rem); }
.erro p { color: var(--texto); font-size: 1.1rem; }

/* =====================================================================
   Publicidad
   ===================================================================== */

/* 0,9rem y no 0,62: en la condensada, 11 px no se leen. Es el suelo de
   14 px del que habla la nota de `--cond`, y la etiqueta que dice que
   algo es publicidad es justo la que no puede quedar ilegible. */
.anuncio__etiqueta, .etiqueta-publicidade {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--apagado);
    margin: 0 0 0.3rem;
}
.anuncio__texto { font-size: 0.9rem; }
.etiqueta-publicidade--destacada {
    display: inline-block;
    background: var(--linha-suave);
    padding: 0.25rem 0.6rem;
    border-radius: var(--radio);
    color: var(--texto);
}

/* =====================================================================
   Pie
   ===================================================================== */

.pe {
    background: var(--tinta);
    color: var(--papel);
    padding: 3rem 0 2rem;
    font-size: 0.88rem;
}

/* Dos filas, y la de arriba mide lo que mida la marca.
   ---------------------------------------------------------------------
   El credito (`.pe__aviso`) va en la primera columna, segunda fila: justo
   debajo de la linea que dice que es este medio.

   La clave esta en `min-content` para la primera fila Y en que las dos
   listas de enlaces ocupan LAS DOS filas. Si no fuera asi, la primera fila
   mediria lo que mide la lista de secciones —que es la mas alta de las
   tres columnas— y el credito acabaria muy por debajo de la marca, casi
   donde estaba antes. Con la fila a `min-content`, su altura la fija el
   unico elemento que no la cruza, que es `.pe__marca`; lo que le sobra a
   las listas se va a la fila de abajo.

   El `row-gap` es mas corto que el `column-gap` a proposito: entre la
   marca y su letra pequena hay menos distancia que entre columnas, porque
   son la misma cosa. */
.pe__interior {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    grid-template-rows: min-content auto;
    column-gap: 2.5rem;
    row-gap: 1.4rem;
    padding-bottom: 2rem;
}

.pe__marca { grid-column: 1; grid-row: 1; }
.pe__aviso { grid-column: 1; grid-row: 2; align-self: start; }
.pe__ligazons:nth-of-type(1) { grid-column: 2; grid-row: 1 / span 2; }
.pe__ligazons:nth-of-type(2) { grid-column: 3; grid-row: 1 / span 2; }

.pe__marca p { color: var(--tenue); line-height: 1.55; }
.marca--pe { text-align: left; margin-bottom: 0.8rem; }
.marca--pe .marca__nome { font-size: 2.5rem; color: var(--papel); }
.marca--pe .marca__nome strong { color: var(--verde-claro); }

.pe__ligazons h2 {
    font-family: var(--cond);
    font-weight: 600;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--verde-claro);
    margin-bottom: 0.9rem;
}
.pe__ligazons ul { list-style: none; margin: 0; padding: 0; }
.pe__ligazons li { margin-bottom: 0.5rem; }
.pe__ligazons a { color: var(--papel); text-decoration: none; font-size: 0.86rem; }
.pe__ligazons a:hover { color: var(--verde-claro); text-decoration: underline; }

/* El credito y el enlace de la analitica.
   ---------------------------------------------------------------------
   Desde el 2026-08-23 viven DENTRO de la columna de la marca, debajo de
   la linea que dice que es este medio, y ya no en una franja a todo lo
   ancho por debajo de las tres columnas.

   Va con el selector doble —`.pe__marca .pe__aviso`— y no suelto: ahora
   es un `p` dentro de `.pe__marca`, y la regla `.pe__marca p` de arriba
   tiene mas peso que `.pe__aviso` a secas. Sin esto, el interlineado y el
   color los decidiria aquella y no esta.

   El filete de arriba se queda: al estar dentro de una columna ya no
   separa dos zonas de la pagina, separa la marca de su letra pequena, que
   es justo lo que hace falta que se lea aparte. Y se va el `max-width:
   60em`, que no significa nada dentro de una columna de 380 px. */
.pe__aviso {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    margin: 0;
    padding-top: 1.2rem;
    font-size: 0.74rem;
    line-height: 1.6;
    color: var(--tenue);
}

/* =====================================================================
   Adaptacion
   ---------------------------------------------------------------------
   La columna lateral NO desaparece en pantalla estrecha: baja debajo del
   contenido. El tiempo es justo lo que mas se mira desde el movil y desde
   la calle; esconderlo ahi seria esconderlo a quien lo necesita.
   ===================================================================== */

@media (max-width: 1080px) {
    .marco { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
    /* Ya no hace falta devolverla a `static`: la columna dejo de ser
       pegajosa arriba del todo. Ver la nota de `.lateral`. */
    .lateral { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
    .apertura { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .ultimas { border-left: 0; padding-left: 0; border-top: 1px solid var(--linha); padding-top: 1.5rem; }
}

@media (max-width: 860px) {
    /* En movil, UNA entrevista a la vista. */
    .carrusel__elemento { flex-basis: 100%; }
    body { font-size: 17px; }
    .cabeceira__interior { grid-template-columns: 1fr; }
    .marca { grid-column: 1; }
    /* El grupo entero baja debajo de la mancheta; dentro, el buscador se
       come el ancho que sobra y el selector conserva el suyo. */
    .cabeceira__ferramentas {
        grid-column: 1;
        justify-self: stretch;
        flex-wrap: wrap;
        margin-top: 1rem;
    }
    .buscador { max-width: none; flex: 1 1 200px; }
    .navegacion { position: static; }
    /* La barra se ENVUELVE, ya no se desplaza en horizontal.

       El motivo es el submenu: por debajo de 700 px el desplegable pasa
       a `static` y empuja hacia abajo (ver el bloque de mas abajo). Un
       elemento que empuja dentro de un `overflow-x: auto` —que arrastra
       consigo `overflow-y: auto`— acaba abriendo una segunda barra de
       desplazamiento vertical dentro de la propia navegacion.

       Envolviendo no hay caja de scroll que valga, y ademas se ganan las
       siete secciones a la vista de una vez en el movil en vez de
       escondidas a la derecha. */
    .navegacion ul { justify-content: flex-start; flex-wrap: wrap; overflow: visible; }
    .navegacion a { white-space: nowrap; }
    /* Una sola columna, y SE ANULAN LAS COLOCACIONES DE ESCRITORIO.
       Sin esto, el credito seguiria pedido a la fila 2 y las listas
       seguirian cruzando dos filas, con lo que en el movil quedarian
       amontonadas y el credito en medio. Anuladas, los cuatro bloques caen
       en orden de marcado y el credito queda el ultimo, que es donde tiene
       que estar en el movil. */
    .pe__interior {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 2rem;
    }
    .pe__marca,
    .pe__aviso,
    .pe__ligazons:nth-of-type(1),
    .pe__ligazons:nth-of-type(2) { grid-column: auto; grid-row: auto; }
    .subscricion--pe { grid-template-columns: 1fr; }
    .subscricion--pe .subscricion__texto,
    .subscricion--pe .subscricion__form { grid-row: auto; grid-column: 1; }
}

@media (max-width: 560px) {
    .contedor { padding-inline: 1rem; }
    .franxa__interior { flex-direction: column; align-items: flex-start; gap: 0.25rem; padding-block: 0.4rem; }
    .franxa__lugar { margin-left: 0; }
    .grella { grid-template-columns: 1fr; gap: 1.75rem; }
    .lateral { grid-template-columns: 1fr; }
}

/* =====================================================================
   Banner de consentimiento
   ---------------------------------------------------------------------
   Abajo y a lo ancho, no en el centro tapando la noticia. Un cuadro modal
   que oscurece la pagina obliga a decidir para poder leer, y una decision
   tomada para quitarse algo de encima no es una decision: es lo que hace
   que todo el mundo pulse «aceptar» sin mirar.

   Los dos botones tienen EXACTAMENTE el mismo tamano, el mismo peso y el
   mismo sitio. El de aceptar va relleno de verde y el de rechazar
   perfilado, que es la unica diferencia que queda — y no es de jerarquia,
   es para distinguirlos de un vistazo. Ninguno esta preseleccionado y
   ninguno se esconde detras de «configurar».
   ===================================================================== */

.consentimento {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60;
    background: var(--tinta);
    color: var(--papel);
    border-top: 3px solid var(--verde);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
    font-family: var(--sans);
}

.consentimento[hidden] { display: none; }

.consentimento__caixa {
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 1.1rem var(--gutter);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
}

.consentimento__texto { flex: 1 1 30rem; min-width: 0; }

/* En condensada como todo, pero en caja BAJA: es lo unico que se le dice
   a alguien antes de pedirle una decision, y en versales se lee como un
   grito. Nada del banner de consentimiento se pinta para presionar. */
.consentimento__texto h2 {
    font-family: var(--cond);
    font-weight: 600;
    font-size: 1.5rem;
    margin: 0 0 0.3rem;
    color: var(--papel);
}

.consentimento__texto p {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.55;
    color: #D9D6CC;
}

.consentimento__legal { margin-top: 0.4rem !important; font-size: 0.8rem !important; }
.consentimento__legal a { color: var(--verde-claro); }

.consentimento__botons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    flex: 0 0 auto;
}

/* El mismo tamano los dos. Si algun dia alguien toca esto, que sepa que
   la diferencia de tamano entre aceptar y rechazar es la forma clasica de
   fabricar un consentimiento que no lo es. */
.btn-consent {
    font: inherit;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.65rem 1.4rem;
    min-width: 9.5rem;
    border-radius: var(--radio);
    cursor: pointer;
    border: 1px solid var(--verde-claro);
}

.btn-consent--si {
    background: var(--verde);
    border-color: var(--verde);
    color: var(--papel);
}
.btn-consent--si:hover { background: var(--verde-escuro); border-color: var(--verde-escuro); }

.btn-consent--non {
    background: transparent;
    color: var(--papel);
}
.btn-consent--non:hover { background: rgba(255, 255, 255, 0.12); }

.btn-consent:focus-visible { outline: 2px solid var(--verde-claro); outline-offset: 2px; }

@media (max-width: 700px) {
    .consentimento__caixa { padding: 1rem; gap: 0.9rem; }
    .consentimento__botons { width: 100%; }
    .btn-consent { flex: 1 1 auto; min-width: 0; }
}

@media print {
    .franxa, .navegacion, .lateral, .cabeceira__ferramentas, .buscador,
    .pe, .saltar, .subscricion, .consentimento { display: none !important; }
    .marco { display: block; }
    body { background: #fff; font-size: 12pt; }
}

/* =====================================================================
   Paginas fijas de la casa
   ---------------------------------------------------------------------
   Estrechas a proposito. Un aviso legal a todo el ancho es ilegible, y
   nadie lee lo que no puede leer: acaba siendo un texto que cumple la ley
   en el papel y no informa a nadie.
   ===================================================================== */

.paxina-fixa { max-width: 42em; }

.paxina-fixa__cabeceira {
    padding-bottom: 1.25rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--tinta);
}
.paxina-fixa h1 { font-size: clamp(2rem, 4.4vw, 2.6rem); margin-bottom: 0.5rem; }

.paxina-fixa__data {
    font-family: var(--sans);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--apagado);
    margin: 0;
}

.paxina-fixa__corpo h2 {
    font-size: 1.45rem;
    margin-top: 2.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--linha);
}
.paxina-fixa__corpo h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.paxina-fixa__corpo h3 { font-size: 1.15rem; margin-top: 1.75rem; }
.paxina-fixa__corpo dl { margin: 0 0 1.15em; }
.paxina-fixa__corpo dt { font-weight: 700; margin-top: 0.6em; }
.paxina-fixa__corpo dd { margin: 0 0 0.2em; padding-left: 1.2em; color: var(--texto); }

/* Aviso meteorologico oficial dentro del bloque del tiempo.
   Ambar sobre el verde: es el unico sitio del sitio publico donde se rompe
   el acento unico del manual, y se rompe a proposito. Un aviso con
   consecuencia fisica que se pinta del mismo color que el resto del bloque
   no es un aviso, es una linea mas. */
.tempo__aviso {
    background: #FBBF24;
    color: #16150F;
    border-radius: var(--radio);
    padding: 0.6rem 0.75rem;
    margin: 0 0 1rem;
    font-size: 0.76rem;
    line-height: 1.45;
}
.tempo__aviso strong { display: block; margin-bottom: 0.15rem; }
.tempo__aviso a { color: #16150F; font-weight: 700; }

/* =====================================================================
   Submenu de la barra de secciones
   ---------------------------------------------------------------------
   Abre con :hover, con :focus-within y con la clase .aberto que pone
   nav.js para el tactil. Los tres caminos llevan al mismo sitio, y el CSS
   basta para dos de ellos: sin JavaScript el menu sigue funcionando.

   El cierre lleva 200 ms de retraso —el transition-delay sobre
   `visibility`— para que se pueda bajar en diagonal hacia el submenu sin
   que se cierre por el camino. Es el mismo numero que hay en nav.js.
   ===================================================================== */

.navegacion__grupo { position: relative; }

.navegacion__pai {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.navegacion__frecha {
    width: 0;
    height: 0;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-top: 4px solid currentColor;
    opacity: 0.65;
}

.navegacion .navegacion__despregable {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    min-width: 15.5rem;
    margin: 0;
    padding: 0.3rem 0;
    list-style: none;
    background: var(--papel-alto);
    border: 1px solid var(--tinta);
    border-top: 0;
    box-shadow: 0 6px 18px rgba(22, 21, 15, 0.12);
    z-index: 30;

    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 0.2s, opacity 0.12s linear 0.08s;
}

/* El color se dice AQUI y no se hereda.

   La barra es negra con los enlaces en Papel, pero el desplegable cae
   sobre un panel blanco: heredando, quedaba texto blanco sobre blanco y
   el submenu desaparecia sin dejar rastro. */
.navegacion .navegacion__despregable a {
    display: block;
    padding: 0.55rem 1.1rem;
    text-align: left;
    letter-spacing: 0.09em;
    border-bottom: 0;
    white-space: nowrap;
    color: var(--tinta);
}
.navegacion .navegacion__despregable a:hover,
.navegacion .navegacion__despregable a:focus-visible {
    background: var(--verde);
    color: var(--papel);
}
.navegacion .navegacion__despregable li + li { border-top: 1px solid var(--linha-suave); }

/* El hover, solo donde hay hover de verdad. En una pantalla tactil el
   navegador simula un :hover pegajoso al tocar, y el menu se quedaria
   abierto despues de navegar. */
@media (hover: hover) {
    .navegacion__grupo:hover > .navegacion__despregable {
        visibility: visible;
        opacity: 1;
        transition-delay: 0s;
    }
}

.navegacion__grupo:focus-within > .navegacion__despregable,
.navegacion__grupo.aberto > .navegacion__despregable {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}

/* Escape: cierra aunque el foco siga dentro. Va DESPUES y con mas
   especificidad a proposito — es lo unico que le gana a :focus-within,
   que desde JavaScript no se puede apagar. */
.navegacion__grupo.pechado > .navegacion__despregable,
.navegacion__grupo.pechado:focus-within > .navegacion__despregable {
    visibility: hidden;
    opacity: 0;
}

/* En estrecho el desplegable no flota: empuja. Un panel absoluto de 15rem
   centrado en una barra de 360 px se sale de la pantalla por un lado. */
@media (max-width: 700px) {
    .navegacion .navegacion__despregable {
        position: static;
        transform: none;
        min-width: 0;
        border: 0;
        box-shadow: none;
        background: var(--linha-suave);
    }
    .navegacion .navegacion__despregable a { text-align: center; }

    /* CERRADO, FUERA DEL FLUJO.

       Aqui arriba el desplegable pasa a `static` para que empuje en vez
       de flotar, y eso esta bien. Lo que no funcionaba es como se cierra:
       `visibility: hidden` lo hace invisible pero LE CONSERVA LA CAJA, y
       en estatico eso son unos 100 px de hueco reservados debajo de
       «Servizos» en todas las paginas del sitio, con el submenu cerrado.

       Con la barra en Papel el hueco se confundia con el fondo y no lo
       vio nadie; con la barra negra de Mandeo es un agujero en medio de
       la pantalla. La caja solo se quita con `display`. */
    .navegacion .navegacion__despregable { display: none; }
    .navegacion__grupo:focus-within > .navegacion__despregable,
    .navegacion__grupo.aberto > .navegacion__despregable { display: block; }
    .navegacion__grupo.pechado > .navegacion__despregable,
    .navegacion__grupo.pechado:focus-within > .navegacion__despregable { display: none; }
}

/* =====================================================================
   Farmacias de garda
   ===================================================================== */

.farmacias__cabeceira { margin-bottom: 1.5rem; }
.farmacias__cabeceira h1 {
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 0.95;
    margin: 0 0 0.5rem;
}
.farmacias__entrada {
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--texto);
    margin: 0;
}

/* --- La de ahora mismo -----------------------------------------------
   Es lo unico que la mayoria de la gente va a leer. Va en Verde Mandeo
   solido: no es decoracion, es la jerarquia de la pagina dicha en voz
   alta. */
.garda-agora {
    background: var(--verde);
    color: var(--papel);
    padding: 1.6rem 1.5rem;
    border-radius: var(--radio);
    margin-bottom: 2rem;
}

.garda-agora__etiqueta {
    font-family: var(--sans);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--verde-claro);
    margin: 0 0 0.5rem;
}

/* El nombre de la farmacia de guardia. Es literalmente lo unico que la
   mayoria de la gente viene a leer, y un domingo lo lee de pie en la
   calle: va en la condensada, en versales y lo mas grande que cabe. */
.garda-agora__nome {
    font-family: var(--cond);
    font-weight: 700;
    font-size: 2.9rem;
    text-transform: uppercase;
    line-height: 0.95;
    margin: 0 0 0.6rem;
}
.garda-agora__nome a { color: var(--papel); text-decoration: none; }
.garda-agora__nome a:hover { text-decoration: underline; text-underline-offset: 4px; }

.garda-agora__mapa-nota {
    display: inline-block;
    font-family: var(--sans);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--verde-claro);
    border: 1px solid var(--verde-claro);
    border-radius: var(--radio);
    padding: 0.18rem 0.5rem;
    margin-left: 0.5rem;
    vertical-align: middle;
    white-space: nowrap;
}

.garda-agora__enderezo { font-size: 1.1rem; margin: 0 0 0.75rem; }

.garda-agora__telefono { margin: 0 0 1rem; }
.garda-agora__telefono a {
    display: inline-flex;
    align-items: center;
    font-family: var(--sans);
    font-size: 1.25rem;
    letter-spacing: 0.04em;
    color: var(--papel);
    text-decoration: none;
    border: 1px solid var(--verde-claro);
    border-radius: var(--radio);
    /* 44 px de alto minimo: se toca con el pulgar, de noche y con prisa. */
    min-height: 44px;
    padding: 0.55rem 1rem;
}
.garda-agora__telefono a:hover { background: var(--verde-escuro); }

.garda-agora__horario { margin: 0 0 0.35rem; font-size: 1.02rem; }
.garda-agora__quenda {
    margin: 0;
    font-family: var(--sans);
    font-size: 0.78rem;
    color: var(--verde-claro);
}

.garda-agora--sen-dato { background: var(--tinta); }
.garda-agora--sen-dato .garda-agora__etiqueta,
.garda-agora--sen-dato .garda-agora__quenda { color: var(--tenue); }
.garda-agora--sen-dato a { color: var(--papel); }

/* --- Las siguientes --------------------------------------------------- */

.garda-lista { margin-bottom: 2rem; }
.garda-lista h2 {
    font-size: 1.35rem;
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--tinta);
}

.garda-lista__aviso {
    background: var(--papel-alto);
    border: 1px solid var(--linha);
    border-left: 3px solid var(--verde);
    border-radius: var(--radio);
    padding: 0.85rem 1rem;
    margin: 0 0 1rem;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--texto);
}

.garda-lista__quendas { list-style: none; margin: 0; padding: 0; }
.garda-lista__quendas li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.5rem;
    align-items: baseline;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--linha);
}

.garda-lista__data {
    flex: 0 0 15rem;
    margin: 0;
    font-family: var(--sans);
    font-size: 0.82rem;
    color: var(--tinta);
}
.garda-lista__data time { display: block; font-weight: 700; }
.garda-lista__horas { color: var(--apagado); font-size: 0.76rem; }

.garda-lista__farmacia { flex: 1 1 16rem; margin: 0; }
.garda-lista__farmacia a { text-decoration: none; color: var(--tinta); }
.garda-lista__farmacia a:hover strong { color: var(--verde); text-decoration: underline; text-underline-offset: 3px; }
.garda-lista__farmacia strong { display: block; font-size: 1.05rem; }
.garda-lista__farmacia span { font-family: var(--sans); font-size: 0.8rem; color: var(--texto); }

/* --- Boton del mapa --------------------------------------------------
   Accion principal secundaria: se ve, pero no compite con el bloque
   verde de arriba. Por eso va en verde solido pero a la altura de un
   boton, no de un panel. */
.garda-mapa { margin: 0 0 2rem; }

.btn-mapa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 44px;
    padding: 0.75rem 1.5rem;
    background: var(--verde);
    color: var(--papel);
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-decoration: none;
    border: 1px solid var(--verde);
    border-radius: var(--radio);
}
.btn-mapa:hover { background: var(--verde-escuro); border-color: var(--verde-escuro); color: var(--papel); }
.btn-mapa__icona { flex: 0 0 auto; }

@media (max-width: 560px) {
    .btn-mapa { display: flex; width: 100%; }
    .garda-lista__data { flex-basis: 100%; }
}

/* --- Las cinco -------------------------------------------------------- */

.garda-todas {
    border: 1px solid var(--linha);
    border-radius: var(--radio);
    background: var(--papel-alto);
    padding: 0.9rem 1.1rem;
    margin-bottom: 2rem;
}
.garda-todas summary {
    cursor: pointer;
    font-family: var(--sans);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--verde);
}
.garda-todas ul { list-style: none; margin: 1rem 0 0; padding: 0; }
.garda-todas li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.3rem 1rem;
    padding: 0.65rem 0;
    border-top: 1px solid var(--linha-suave);
}
.garda-todas a { text-decoration: none; color: var(--tinta); }
.garda-todas a:hover strong { color: var(--verde); }
.garda-todas strong { display: block; font-size: 1rem; }
.garda-todas span { font-family: var(--sans); font-size: 0.78rem; color: var(--texto); }
.garda-todas__tel {
    font-family: var(--sans);
    font-size: 0.85rem;
    color: var(--verde);
    align-self: center;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* --- De donde sale ---------------------------------------------------- */

.garda-fonte {
    border-top: 1px solid var(--linha);
    padding-top: 1rem;
    font-family: var(--sans);
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--texto);
}
.garda-fonte p { margin: 0 0 0.5rem; }
.garda-fonte__nota { color: var(--apagado); margin-bottom: 0; }

/* ---------------------------------------------------------------------
   Compartir la noticia
   ---------------------------------------------------------------------

   Dos bloques en la misma pieza y con distinto peso a proposito:

     · Arriba, tras la entradilla, para quien decide compartir con el
       titular y no baja al pie. Discreto: la noticia todavia no se ha
       leido y esto no puede competir con ella.
     · Abajo, al terminar el texto, que es el sitio con mas intencion de
       toda la pagina. Ese lleva filete y fondo.

   Los iconos van EN TINTA, no con el color de cada red. El manual de
   marca fija un solo acento de color sin excepciones, y seis logotipos
   con sus seis colores al pie de una noticia serian lo mas llamativo de
   la pagina, por encima del titular. La forma del icono ya identifica a
   cada red; el color solo hace ruido.
   --------------------------------------------------------------------- */

.compartir {
    margin: 1.5rem 0;
}

.compartir__rotulo {
    margin: 0 0 .55rem;
    font-family: var(--sans);
    font-size: .74rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--apagado);
}

.compartir__lista {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.compartir__lista > li {
    /* El aviso de «copiado» se ancla aqui. */
    position: relative;
    margin: 0;
}

/* Cuadrado de 44 px: es el minimo que se acierta con el pulgar sin
   ampliar, y esto se usa sobre todo desde el movil. */
.compartir__ligazon {
    /* `--rede` la pone cada modificador de mas abajo. Correo y copiar no
       tienen marca, asi que caen a tinta: no se les inventa un color. */
    color: var(--rede, var(--tinta));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--linha);
    border-radius: var(--radio);
    background: var(--papel-alto);
    cursor: pointer;
    padding: 0;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

/* `currentColor` en el relleno: asi el icono cambia con el texto y no hay
   que repetir el color en cada estado. */
.compartir__ligazon svg { fill: currentColor; display: block; }

.compartir__ligazon:hover,
.compartir__ligazon:focus-visible {
    background: var(--rede, var(--verde));
    border-color: var(--rede, var(--verde));
    color: #FFF;
}

/* El foco de teclado se queda en Verde Mandeo pase lo que pase.
   Es el unico color del sitio que significa «estas aqui», y ese
   lenguaje no puede cambiar segun el boton en el que estes. */
.compartir__ligazon:focus-visible {
    outline: 2px solid var(--verde);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   El color de cada red

   Discrepancia con el manual de marca v1.0, que fija un solo acento de
   color sin excepciones. Pedida por el titular el 2026-08-16; esta
   anotada entera en app/View/partials/compartir.php.

   El color va SOLO en el icono, sobre el fondo Papel. Ocho pastillas de
   color solido al pie de una noticia taparian el titular.
   --------------------------------------------------------------------- */

.compartir__ligazon--whatsapp  { --rede: #25D366; }
.compartir__ligazon--facebook  { --rede: #1877F2; }
.compartir__ligazon--x         { --rede: #000000; }
.compartir__ligazon--telegram  { --rede: #229ED9; }
.compartir__ligazon--bluesky   { --rede: #0285FF; }

/* Instagram no tiene UN color: tiene un degradado, y es su identidad. El
   icono lo lleva dentro del SVG (ver el parcial); aqui va el de la
   pastilla al pasar por encima, y el icono pasa a blanco. `fill` como
   atributo lo pisa el CSS, que es lo que permite el cambio. */
.compartir__ligazon--instagram { --rede: #D62976; }

.compartir__ligazon--instagram:hover,
.compartir__ligazon--instagram:focus-visible {
    background: linear-gradient(45deg, #FEDA75, #FA7E1E, #D62976, #962FBF, #4F5BD5);
    border-color: #962FBF;
}

.compartir__ligazon--instagram:hover svg path,
.compartir__ligazon--instagram:focus-visible svg path {
    fill: #FFF;
}

/* --- El de abajo, destacado --- */

.compartir--abaixo {
    margin-top: 2rem;
    padding: 1.1rem 1.2rem;
    border-top: 1px solid var(--regra);
    border-bottom: 1px solid var(--regra);
    background: var(--papel-alto);
}

.compartir--abaixo .compartir__rotulo {
    font-size: .78rem;
    color: var(--texto);
}

/* --- El de arriba, discreto --- */

.compartir--arriba {
    margin: 1.1rem 0 1.4rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--linha-suave);
}

.compartir--arriba .compartir__ligazon {
    width: 38px;
    height: 38px;
}

/* El fondo del bloque de arriba se acota al estado EN REPOSO.
   `.compartir--arriba .compartir__ligazon` y `.compartir__ligazon:hover`
   tienen la misma especificidad (0,2,0) y esta va despues en el fichero,
   asi que sin el `:not()` ganaba tambien al pasar por encima: el color de
   la red no llegaba a pintarse y el boton de arriba se quedaba igual que
   antes. No da error, no rompe nada — simplemente no se enciende. */
.compartir--arriba .compartir__ligazon:not(:hover):not(:focus-visible) {
    border-color: var(--linha-suave);
    background: transparent;
}

/* --- Copiar el enlace --- */

.compartir__ligazon--feito {
    background: var(--verde);
    border-color: var(--verde);
    color: var(--papel);
}

.compartir__ligazon--fallo {
    border-color: #A33;
    color: #A33;
}

/* El «¡Copiado!» flota sobre el boton para no mover la fila entera: un
   salto de maquetacion al pulsar se lee como un fallo. */
.compartir__feito:not(:empty) {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    /* El aviso de Instagram —«pégalo en tu historia»— no cabe en una linea
       en un movil estrecho. Se le deja envolver con un tope, en vez de
       `nowrap`, que lo sacaria de la pantalla. */
    max-width: 60vw;
    width: max-content;
    text-align: center;
    line-height: 1.35;
    background: var(--tinta);
    color: var(--papel);
    font-family: var(--sans);
    font-size: .72rem;
    padding: .2rem .45rem;
    border-radius: var(--radio);
    pointer-events: none;
}

/* En pantallas estrechas los seis caben en una fila de sobra; lo que se
   aprieta es el espacio entre ellos. */
@media (max-width: 400px) {
    .compartir__lista { gap: .35rem; }
    .compartir__ligazon { width: 40px; height: 40px; }
    .compartir--arriba .compartir__ligazon { width: 36px; height: 36px; }
}

/* Quien pide menos movimiento no tiene por que aguantar la transicion. */
@media (prefers-reduced-motion: reduce) {
    .compartir__ligazon { transition: none; }
}

/* =====================================================================
   Materiales de un especial — «Documental local»
   ---------------------------------------------------------------------
   El vídeo, el audio, las imágenes y los documentos originales de un
   trabajo de fondo. Todo alojado aquí: la política de privacidad promete
   que el sitio público no pide nada a un dominio ajeno, y ésa es la razón
   por la que no hay banner de cookies.

   El bloque va pegado al final del texto y antes de compartir, porque en
   un documental el documento original ES parte de la pieza y no un
   apéndice. Se le pone regla arriba y fondo propio para que se lea como
   un bloque aparte sin parecer publicidad.
   ===================================================================== */

.materiais {
    margin: 3rem 0 0;
    padding: 2rem 0 0;
    border-top: 2px solid var(--verde);
}

.materiais__titulo {
    font-family: var(--sans);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--verde);
    margin: 0 0 .4rem;
}

.materiais__intro {
    margin: 0 0 1.5rem;
    color: var(--texto);
    font-size: .92rem;
}

.materiais__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.5rem;
}

.material__medio { margin: 0; }

/* El vídeo manda en el ancho de la columna y respeta su proporción: sin
   `height:auto` un vídeo vertical sale estirado. `background` oscuro para
   que las bandas de un 4:3 no salgan blancas. */
.material video,
.material__medio img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radio);
}

.material video { background: var(--tinta); }

.material audio {
    width: 100%;
    margin-bottom: .6rem;
}

.material__pe {
    display: block;
    margin-top: .6rem;
    font-size: .9rem;
    line-height: 1.45;
}

.material__pe strong { display: block; }

.material__descricion {
    display: block;
    color: var(--texto);
    margin-top: .15rem;
}

/* La ficha técnica —formato, peso, crédito— en gris y pequeña. No es la
   noticia: es lo que hay que saber ANTES de darle a un enlace de 40 MB
   desde un móvil con datos. */
.material__ficha {
    display: block;
    margin-top: .3rem;
    font-family: var(--sans);
    font-size: .72rem;
    letter-spacing: .04em;
    color: var(--apagado);
}

/* Un documento es un enlace, no un visor: se dice el formato y el peso y
   se abre si se quiere. */
.material__documento {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    text-decoration: none;
    color: inherit;
    background: var(--papel-alto);
    border: 1px solid var(--linha);
    border-left: 3px solid var(--verde);
    border-radius: var(--radio);
    padding: 1rem 1.2rem;
}

.material__documento:hover { border-color: var(--verde); }

.material__icona {
    flex: 0 0 auto;
    font-family: var(--sans);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--verde);
    border: 1px solid var(--verde);
    border-radius: var(--radio);
    padding: .3rem .45rem;
    margin-top: .1rem;
}

.material__texto { display: block; }

/* «También en»: las secciones ADICIONALES de la pieza. Van abajo y en
   gris, no arriba junto a la principal — sólo una de ellas es la dueña de
   la dirección, y pintarlas al mismo nivel diría que valen lo mismo. */
.peza__tamen {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
    margin: 2rem 0 0;
    padding: 1.25rem 0 0;
    border-top: 1px solid var(--linha);
    font-family: var(--sans);
    font-size: .74rem;
}

.peza__tamen-etiqueta {
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--apagado);
}

.peza__tamen ul {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.peza__tamen a {
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--verde);
}

.peza__tamen a:hover { text-decoration: underline; }

/* =====================================================================
   Comentarios dos lectores
   ---------------------------------------------------------------------
   Van ao final da columna da peza, despois de compartir. Lense cando xa
   se leu a noticia, non antes.

   O bloque enteiro esta en Papel sobre Papel: nin caixa nin sombra. O que
   separa unha conversa da noticia e o filete de 5 px de arriba, que e o
   mesmo recurso que separa a apertura do resto da portada.
   ===================================================================== */

.comentarios {
    margin-top: 3rem;
    padding-top: 1.75rem;
    border-top: 5px solid var(--tinta);
}

.comentarios__titulo {
    font-size: 1.6rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

/* El numero, en verde y sin parentesis: es un dato, no una nota al pie. */
.comentarios__conta {
    font-family: var(--cond);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--verde);
}

/* --- El aviso de «gracias» / «ya lo verificamos» / error -------------
   Va arriba del todo del bloque y con `role="status"`: quien acaba de
   mandar el formulario tiene que enterarse de que paso sin buscarlo. */
.comentarios__aviso {
    font-family: var(--sans);
    font-size: 0.95rem;
    line-height: 1.5;
    padding: 0.9rem 1.1rem;
    margin-bottom: 1.5rem;
    border-left: 5px solid var(--verde);
    background: var(--papel-alto);
}
.comentarios__aviso--erro { border-left-color: #B45309; }

.comentarios__baleiro,
.comentarios__pechado {
    font-family: var(--sans);
    font-size: 0.95rem;
    color: var(--apagado);
    margin-bottom: 1.5rem;
}

/* --- La lista ---------------------------------------------------- */

.comentarios__lista { list-style: none; margin: 0 0 2.5rem; padding: 0; }

.comentario {
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--linha-suave);
}
.comentario:last-child { border-bottom: 0; }

.comentario__cabeza {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.9rem;
    margin: 0 0 0.5rem;
}

.comentario__autor {
    font-family: var(--cond);
    font-weight: 600;
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-style: normal;
}

.comentario__data {
    font-family: var(--cond);
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--apagado);
}

.comentario__corpo {
    font-size: 1.02rem;
    line-height: 1.6;
    max-width: 38em;
}

/* --- El formulario ------------------------------------------------ */

.comentarios__form {
    background: var(--papel-alto);
    border: 1px solid var(--linha);
    border-top: 5px solid var(--verde);
    padding: 1.5rem 1.6rem 1.6rem;
}

.comentarios__form-titulo {
    font-size: 1.5rem;
    text-transform: uppercase;
    margin-bottom: 1.1rem;
}

/* El campo trampa. Fuera de la pantalla, NO `display: none`: hay robots
   que miran justamente si un campo esta oculto con display para
   saltarselo. Mismo criterio que el del boletin. */
.comentarios__trampa {
    position: absolute !important;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

.comentarios__fila {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.1rem;
}

.comentarios__campo { margin: 0 0 1.1rem; }

.comentarios__campo label {
    display: block;
    font-family: var(--cond);
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 0.35rem;
}

.comentarios__campo input,
.comentarios__campo textarea {
    width: 100%;
    border: 1px solid var(--linha);
    border-radius: var(--radio);
    background: var(--papel);
    padding: 0.65rem 0.8rem;
    font-family: var(--sans);
    font-size: 0.95rem;
    color: var(--tinta);
}
.comentarios__campo textarea {
    font-family: var(--serif);
    font-size: 1rem;
    line-height: 1.55;
    resize: vertical;
    min-height: 7rem;
}
.comentarios__campo input:focus,
.comentarios__campo textarea:focus { outline: none; border-color: var(--verde); }

.comentarios__pista,
.comentarios__legal,
.comentarios__nota {
    display: block;
    font-family: var(--sans);
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--apagado);
    margin-top: 0.4rem;
}
.comentarios__legal { margin: 0 0 1.1rem; }
.comentarios__legal a { color: var(--verde); }
.comentarios__nota { margin-top: 0.9rem; }

.comentarios__accion { margin: 0; }
.comentarios__accion button {
    border: 0;
    background: var(--tinta);
    color: var(--papel);
    border-radius: var(--radio);
    padding: 0.7rem 1.4rem;
    font-family: var(--cond);
    font-weight: 600;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
}
.comentarios__accion button:hover { background: var(--verde); }

/* =====================================================================
   Barra lateral · Últimos comentarios
   ---------------------------------------------------------------------
   Debajo del boletin. Sin fecha y sin nombre: solo lo que se dijo y en
   que noticia se dijo.

   El TEXTO va en serif y con su tamano de lectura, y el enlace a la pieza
   en condensada pequena debajo. Al reves —el titular grande y el
   comentario de pie de foto— esto seria otra lista de noticias, que es
   justo lo que ya hay dos bloques mas abajo.
   ===================================================================== */

.lateral-comentarios {
    background: var(--papel-alto);
    border: 1px solid var(--linha);
    border-radius: var(--radio);
    padding: 1.1rem 1.25rem;
}

.lateral-comentarios ul { list-style: none; margin: 0; padding: 0; }

.lateral-comentarios li {
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--linha-suave);
}
.lateral-comentarios li:last-child { border-bottom: 0; padding-bottom: 0; }

.lateral-comentarios__texto {
    font-family: var(--serif);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0 0 0.35rem;
}

/* Una comilla de apertura colgada al margen. Es lo unico que dice «esto
   lo dijo alguien» sin gastar una linea en decirlo, ahora que no hay
   nombre ni fecha. */
.lateral-comentarios__texto::before {
    content: "«";
    color: var(--verde);
}
.lateral-comentarios__texto::after {
    content: "»";
    color: var(--verde);
}

.lateral-comentarios__peza {
    display: block;
    font-family: var(--cond);
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.15;
    color: var(--apagado);
    text-decoration: none;
}
.lateral-comentarios__peza:hover { color: var(--verde); }

/* =====================================================================
   Preferencias do boletín  (/subscribirse/preferencias/{token}/)
   ---------------------------------------------------------------------
   O botón de «darme de baixa de todo» vai ARRIBA e con peso propio.
   Non é estética: a ligazón do correo trae ata aquí, así que darse de
   baixa xa custa un clic máis que antes. Iso só é aceptable se ese
   botón é o primeiro que se ve e non hai que buscalo entre dez
   caixiñas. Quen quere marcharse non ten que ler nada.
   ===================================================================== */

.subscricion-prefs .prefs__baixa {
    background: var(--papel-alto);
    border: 1px solid var(--linha);
    border-radius: 4px;
    padding: 1rem 1.1rem;
    margin: 1.4rem 0;
}

.subscricion-prefs .prefs__baixa p { margin: 0 0 0.7rem; }

.subscricion-prefs .btn--baixa {
    background: transparent;
    border: 2px solid var(--verde);
    color: var(--verde);
    font-weight: 600;
}

.subscricion-prefs .prefs__separador {
    border: 0;
    border-top: 1px solid var(--linha);
    margin: 1.8rem 0;
}

.subscricion-prefs .prefs__lista {
    list-style: none;
    margin: 1rem 0 1.2rem;
    padding: 0;
}

.subscricion-prefs .prefs__item { margin-bottom: 0.75rem; }

/* A etiqueta enteira é a zona pulsable: unha caixiña de 13 px é
   difícil de acertar nun móbil, e aquí equivocarse significa deixar de
   recibir algo que si se quería. */
.subscricion-prefs .prefs__item label {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.15rem 0.6rem;
    align-items: start;
    cursor: pointer;
}

.subscricion-prefs .prefs__item input[type="checkbox"] {
    grid-row: 1 / 3;
    margin-top: 0.25rem;
    width: 1.1rem;
    height: 1.1rem;
}

.subscricion-prefs .prefs__nome { font-weight: 600; }

.subscricion-prefs .prefs__desc {
    grid-column: 2;
    font-size: 0.9rem;
    color: var(--apagado);
}

/* O boletín xeral vai destacado e separado das seccións: non é unha
   sección, é o correo co que se manda todo xunto, e mestural·o coas
   dez faríao pasar por unha máis. */
.subscricion-prefs .prefs__lista--xeral {
    margin-bottom: 0.4rem;
}

.subscricion-prefs .prefs__item--xeral {
    background: var(--papel-alto);
    border: 1px solid var(--linha);
    border-left: 3px solid var(--verde);
    border-radius: 4px;
    padding: 0.8rem 0.9rem;
    margin-bottom: 0;
}

.subscricion-prefs .prefs__subtitulo {
    margin: 1.6rem 0 0.2rem;
    font-size: 1rem;
    color: var(--apagado);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* =====================================================================
   Cuando es un acto de la Axenda
   ---------------------------------------------------------------------
   Va ENCIMA del texto, no debajo. En un acto la fecha no es un dato de la
   noticia: es casi el titular, y quien entra en una pieza de la Axenda
   entra a saber cuando es. Muchas veces no lee mas.
   ===================================================================== */
.peza__cando {
    margin: 0 0 1.6rem;
    padding: 0.85rem 1.1rem;
    border-left: 4px solid var(--verde);
    background: rgba(15, 118, 110, 0.05);
    border-radius: 0 var(--radio) var(--radio) 0;
    max-width: 40em;
}
.peza__cando-etiqueta {
    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--verde);
    margin: 0 0 0.2rem;
}
.peza__cando-data {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
}
/* El lugar. Va un punto por debajo de la fecha en peso visual y no por
   descuido: cuando las dos cosas gritan igual, no se lee ninguna. La fecha
   es lo que decide si alguien puede ir; el sitio, lo que mira despues. */
.peza__cando-lugar {
    font-size: 1rem;
    line-height: 1.4;
    margin: 0.2rem 0 0;
    color: var(--tinta);
}
.peza__cando-nota {
    font-family: var(--sans);
    font-size: 0.78rem;
    color: var(--apagado);
    margin: 0.35rem 0 0;
}
/* El plazo de inscripción, debajo del lugar. Mismo cuerpo que el lugar y
   el enlace «Apuntarse» en el verde de la casa. */
.peza__cando-inscricion {
    font-size: 0.95rem;
    line-height: 1.4;
    margin: 0.3rem 0 0;
    color: var(--tinta);
}
.peza__cando-inscricion a { color: var(--verde); font-weight: 700; text-decoration: none; }
.peza__cando-inscricion a:hover { text-decoration: underline; }
/* Un acto que ya paso no se esconde —su URL puede estar en un marcador, y
   el archivo de lo que paso en Betanzos es parte de lo que hace un
   periodico local— pero deja de gritar. */
.peza__cando--pasado {
    border-left-color: var(--apagado);
    background: rgba(0, 0, 0, 0.03);
}
.peza__cando--pasado .peza__cando-etiqueta { color: var(--apagado); }

/* =====================================================================
   El filtro por dia de la Axenda
   ---------------------------------------------------------------------
   Es un formulario GET, asi que cada estado del filtro es una URL: se
   puede compartir, guardar en marcadores y volver atras con el boton del
   navegador. Un calendario que solo cambia la pantalla no deja hacer
   ninguna de las tres.
   ===================================================================== */
.filtro-dia {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 1.75rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--linha);
    border-radius: var(--radio);
    background: var(--papel-alt, rgba(0, 0, 0, 0.02));
}
.filtro-dia__etiqueta {
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--apagado);
    margin: 0 0.3rem 0 0;
}
.filtro-dia input[type="date"] {
    font-family: var(--sans);
    font-size: 0.9rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--linha);
    border-radius: var(--radio);
    background: #fff;
    color: var(--texto);
}
.filtro-dia__btn {
    font-family: var(--sans);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.42rem 0.9rem;
    border: 1px solid var(--verde);
    border-radius: var(--radio);
    background: none;
    color: var(--verde);
    text-decoration: none;
    cursor: pointer;
}
.filtro-dia__btn:hover { background: var(--verde); color: #fff; }
.filtro-dia__btn.is-activo { background: var(--verde); color: #fff; }
.filtro-dia__quitar {
    font-family: var(--sans);
    font-size: 0.8rem;
    color: var(--apagado);
    text-decoration: none;
    margin-left: auto;
}
.filtro-dia__quitar:hover { color: var(--texto); text-decoration: underline; }

@media (max-width: 40rem) {
    .filtro-dia__quitar { margin-left: 0; }
}

/* La miniatura del bloque de seccion en portada es pequeña: el sello baja de
   cuerpo o no cabe. El «+N» de los ciclos no se pinta aqui — en dos
   centimetros, un numero suelto sin explicacion es ruido. */
.bloque-seccion__imaxe { position: relative; display: block; }
.tarxeta__data--mini {
    position: absolute;
    top: 0.35rem;
    left: 0.35rem;
    font-size: 0.68rem;
    padding: 0.25rem 0.4rem;
    letter-spacing: 0.04em;
}

/* ===================================================================
   MATERIAIS DENTRO DUNHA PEZA
   ===================================================================

   O corpo garda un marcador baleiro e `Materiais::expandir()` pinta isto
   ao servir. O pé escríbeo o código, non un formulario: un campo que se
   pode deixar baleiro déixase baleiro, e o día que alguén reclame por un
   material seu a resposta non pode ser «esquecéusenos enchelo». */

.material { margin: 1.6rem 0; }

.material video,
.material--imaxe img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 3px;
    background: #111;
}
.material--imaxe img { background: transparent; }

.material audio { display: block; width: 100%; }

/* O visor do PDF. Debaixo vai SEMPRE a ligazón: no móbil moitos
   navegadores non incrustan PDF e o que deixan é un recadro baleiro sen
   dicir por que. Unha ligazón de máis non molesta a ninguén; un recadro
   baleiro é un documento que non se pode ler. */
.material__visor {
    display: block;
    width: 100%;
    height: 32rem;
    border: 1px solid var(--liña, #ddd9d1);
    border-radius: 3px;
    background: #fff;
}
@media (max-width: 40rem) {
    .material__visor { height: 20rem; }
}

.material__descarga {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--liña, #ddd9d1);
    border-radius: 4px;
    text-decoration: none;
    color: inherit;
}
.material__descarga:hover { border-color: currentColor; }
.material__icona { font-size: 1.5rem; line-height: 1; }
.material__nome { font-weight: 600; }
.material__dato { margin-left: auto; font-size: 0.85rem; opacity: 0.7; }

/* O pé vai en serif, coma todo o que rodea á noticia. O corpo vai en
   sans desde o 2026-09-01, e esta é a marxe entre as dúas cousas. */
.material figcaption {
    margin-top: 0.45rem;
    font-family: var(--serif, Palatino, "Palatino Linotype", Georgia, serif);
    font-size: 0.9rem;
    line-height: 1.5;
    opacity: 0.85;
}
.material figcaption small { opacity: 0.8; }

/* =====================================================================
   Páxina de contacto
   ---------------------------------------------------------------------
   Vai dentro da páxina fixa, debaixo do texto. O texto edítase desde a
   base; isto non, porque un formulario non é texto.

   TEN O SEU PROPIO BLOQUE e non reaproveita o dos comentarios aínda que
   se parezan. Son dúas portas distintas que poden separarse calquera día
   —esta ten desplegable e non ten fío de conversa—, e enganchar unha ao
   CSS da outra fai que cambiar unha rompa a que ninguén estaba mirando.
   ===================================================================== */

.contacto {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--linha);
}

.contacto__titulo {
    font-size: 1.7rem;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
}

/* O aviso do que acaba de pasar. `role="status"` no marcado: quen acaba
   de mandar o formulario ten que enterarse sen ir buscalo. */
.contacto__aviso {
    font-family: var(--sans);
    font-size: 0.95rem;
    line-height: 1.5;
    padding: 0.9rem 1.1rem;
    margin-bottom: 1.5rem;
    border-left: 5px solid var(--verde);
    background: var(--papel-alto);
}
.contacto__aviso--erro { border-left-color: #B45309; }

.contacto__form {
    background: var(--papel-alto);
    border: 1px solid var(--linha);
    border-top: 5px solid var(--verde);
    padding: 1.5rem 1.6rem 1.6rem;
}

/* O campo trampa. Fóra da pantalla, NON `display: none`: hai robots que
   miran xustamente se un campo está oculto con display para saltalo.
   Mesmo criterio que o do boletín e o dos comentarios. */
.contacto__trampa {
    position: absolute !important;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

.contacto__fila {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.1rem;
}

.contacto__campo { margin: 0 0 1.1rem; }

.contacto__campo label {
    display: block;
    font-family: var(--cond);
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 0.35rem;
}

.contacto__campo input,
.contacto__campo select,
.contacto__campo textarea {
    width: 100%;
    border: 1px solid var(--linha);
    border-radius: var(--radio);
    background: var(--papel);
    padding: 0.65rem 0.8rem;
    font-family: var(--sans);
    font-size: 0.95rem;
    color: var(--tinta);
}
.contacto__campo textarea {
    font-family: var(--serif);
    font-size: 1rem;
    line-height: 1.55;
    resize: vertical;
    min-height: 9rem;
}
.contacto__campo input:focus,
.contacto__campo select:focus,
.contacto__campo textarea:focus { outline: none; border-color: var(--verde); }

.contacto__pista,
.contacto__legal,
.contacto__nota {
    display: block;
    font-family: var(--sans);
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--apagado);
    margin-top: 0.4rem;
}
.contacto__legal { margin: 0 0 1.1rem; }
.contacto__legal a { color: var(--verde); }
.contacto__nota { margin-top: 0.9rem; }

.contacto__accion { margin: 0; }
.contacto__accion button {
    border: 0;
    background: var(--tinta);
    color: var(--papel);
    border-radius: var(--radio);
    padding: 0.7rem 1.4rem;
    font-family: var(--cond);
    font-weight: 600;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
}
.contacto__accion button:hover { background: var(--verde); }