/* ==========================================================================
   A Boa Vila · aboavila.gal
   Un solo fichero, sin build.

   IDENTIDAD
   La paleta no es decorativa. El azul es el AZUR DEL ESCUDO de Pontevedra
   —un puente de oro sobre ondas, en campo de azur—, así que es literalmente
   el color de la ciudad. Se llegó a él después de descartar un verde ría que
   no decía nada y un azul petróleo que seguía tirando a verde; el naranja es
   la teja de los
   tejados del casco antiguo — el mismo que domina la foto de cabecera; los
   grises son granito, fríos y con un punto de azul, no beige.

   Tipografía editorial a propósito: Newsreader tiene la autoridad de un
   periódico local y IBM Plex Sans tiene carácter donde Inter no tiene
   ninguno. El radio de esquina es corto: el redondeo grande es lo que hace
   que cualquier web parezca la misma web.
   ========================================================================== */

:root {
    /* Azul de ría — color de marca */
    --ria:        #123f6d;
    --ria-osc:    #0c2c4e;
    --ria-clr:    #e9eff7;
    --ria-hondo:  #0a2440;   /* fondos oscuros */

    /* Teja — acento */
    --teja:       #bd5729;
    --teja-clr:   #fbeee7;

    /* Granito */
    --tinta:      #121e26;
    --tinta-sua:  #465862;
    --tinta-ten:  #778992;

    --papel:      #ffffff;
    --papel-2:    #f4f8f9;
    --papel-3:    #e6eef1;
    --borde:      #d3e0e5;

    --ok:         #1a7a4e;
    --ok-fondo:   #e4f4ea;
    --no:         #93a3ab;
    --no-fondo:   #eef2f4;

    --r-s:  5px;
    --r-m:  8px;
    --r-l:  11px;
    --sombra:     0 1px 2px rgba(10,40,55,.06), 0 3px 10px rgba(10,40,55,.05);
    --sombra-alt: 0 2px 6px rgba(10,40,55,.10), 0 12px 30px rgba(10,40,55,.11);

    --ancho: 1220px;
    --tipo:  'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --tit:   'Newsreader', Georgia, 'Times New Roman', serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ria:       #6ea8dc;  --ria-osc:  #8fc0ea;  --ria-clr:  #12283f;
        --ria-hondo: #08192b;
        --teja:      #e0764a;  --teja-clr: #332016;
        --tinta:     #e6eef1;  --tinta-sua:#a3b4bc;  --tinta-ten:#788b94;
        --papel:     #0c161c;  --papel-2:  #121e26;  --papel-3:  #1a2831;
        --borde:     #26363f;
        --ok:        #4bc183;  --ok-fondo: #123023;
        --no:        #6a7c85;  --no-fondo: #18242b;
        --sombra:     0 1px 2px rgba(0,0,0,.45), 0 3px 10px rgba(0,0,0,.35);
        --sombra-alt: 0 2px 6px rgba(0,0,0,.55), 0 12px 30px rgba(0,0,0,.5);
    }
}

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

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

body {
    margin: 0;
    font-family: var(--tipo);
    font-size: 16px;
    line-height: 1.6;
    color: var(--tinta);
    background: var(--papel);
    -webkit-font-smoothing: antialiased;
}

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

a { color: var(--ria); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { font-family: var(--tit); font-weight: 600; line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(1.75rem, 4vw, 2.6rem); }
h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
h3 { font-size: 1.05rem; }

p { margin: 0 0 1rem; }

:focus-visible { outline: 3px solid var(--ria); outline-offset: 2px; border-radius: 4px; }

.envoltura { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: 1.25rem; }
.sep { color: var(--tinta-ten); margin-inline: .3em; }

.saltar {
    position: absolute; left: -9999px; top: 0; z-index: 999;
    background: var(--ria); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 var(--r-s) 0;
}
.saltar:focus { left: 0; }

/* --------------------------------------------------------------- Botones */
.boton {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    background: var(--ria); color: #fff;
    padding: .7rem 1.25rem; border: 0; border-radius: 999px;
    font: inherit; font-weight: 600; font-size: .95rem;
    cursor: pointer; text-decoration: none; transition: background .15s, transform .15s;
}
.boton:hover { background: var(--ria-osc); text-decoration: none; transform: translateY(-1px); }

/* ------------------------------------------------------------- Cabecera */
.cabecera {
    position: sticky; top: 0; z-index: 100;
    background: color-mix(in srgb, var(--papel) 88%, transparent);
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--borde);
}
.cabecera-int {
    display: flex; align-items: center; gap: 1rem;
    min-height: 68px; padding-block: .6rem;
}

.marca { display: flex; align-items: center; gap: .5rem; color: var(--ria); flex-shrink: 0; }
.marca:hover { text-decoration: none; }
.marca-ic { color: var(--ria); }
.marca-txt { font-family: var(--tit); font-weight: 700; font-size: 1.3rem; color: var(--tinta); letter-spacing: -.02em; }
.marca-txt b { color: var(--ria); font-weight: 700; }

.buscador { position: relative; display: flex; align-items: center; flex: 1; max-width: 480px; }
.buscador .ic { position: absolute; left: .85rem; color: var(--tinta-ten); pointer-events: none; }
.buscador input {
    width: 100%; font: inherit; font-size: .95rem;
    padding: .62rem 5.5rem .62rem 2.5rem;
    border: 1px solid var(--borde); border-radius: 999px;
    background: var(--papel-2); color: var(--tinta);
}
.buscador input::placeholder { color: var(--tinta-ten); }
.buscador input:focus { background: var(--papel); border-color: var(--ria); outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ria) 18%, transparent); }
.buscador button {
    position: absolute; right: .28rem;
    background: var(--ria); color: #fff; border: 0; border-radius: 999px;
    padding: .45rem 1rem; font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
}
.buscador button:hover { background: var(--ria-osc); }

.sugerencias {
    position: absolute; top: calc(100% + .45rem); left: 0; right: 0; z-index: 60;
    background: var(--papel); border: 1px solid var(--borde); border-radius: var(--r-m);
    box-shadow: var(--sombra-alt); overflow: hidden; max-height: 60vh; overflow-y: auto;
}
.sug-item { display: block; padding: .6rem .9rem; border-bottom: 1px solid var(--borde); color: var(--tinta); }
.sug-item:last-child { border-bottom: 0; }
.sug-item:hover, .sug-item.es-activo { background: var(--ria-clr); text-decoration: none; }
.sug-tit { font-weight: 600; font-size: .93rem; display: block; }
.sug-sub { font-size: .8rem; color: var(--tinta-ten); }

.menu-btn {
    display: none; margin-left: auto;
    background: none; border: 1px solid var(--borde); border-radius: var(--r-s);
    padding: .4rem; color: var(--tinta); cursor: pointer;
}

.nav { display: flex; align-items: center; gap: .3rem; margin-left: auto; }
.nav > a, .mega-disparo {
    display: flex; align-items: center; gap: .3rem;
    padding: .5rem .7rem; border-radius: var(--r-s);
    color: var(--tinta-sua); font-size: .93rem; font-weight: 500; white-space: nowrap;
}
.nav > a:hover, .mega-disparo:hover { background: var(--papel-3); color: var(--tinta); text-decoration: none; }

.mega-envoltura { position: relative; }
.mega {
    position: absolute; top: calc(100% + .5rem); right: 0; z-index: 70;
    width: min(92vw, 860px);
    background: var(--papel); border: 1px solid var(--borde);
    border-radius: var(--r-l); box-shadow: var(--sombra-alt);
    padding: 1.25rem; opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .16s, transform .16s, visibility .16s;
}
.mega-envoltura:hover .mega,
.mega-envoltura:focus-within .mega { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 1rem 1.5rem; }
.mega-col h3 {
    font-family: var(--tipo); font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
    color: var(--tinta-ten); margin-bottom: .5rem;
}
.mega-col a { display: block; padding: .22rem 0; font-size: .89rem; color: var(--tinta-sua); }
.mega-col a:hover { color: var(--ria); }
.caret { transition: transform .16s; }
.mega-envoltura:hover .caret { transform: rotate(180deg); }

/* ----------------------------------------------------------------- Migas */
.migas { border-bottom: 1px solid var(--borde); background: var(--papel-2); }
.migas ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: .6rem 0; font-size: .83rem; }
.migas li + li::before { content: '/'; color: var(--tinta-ten); margin-right: .4rem; }
.migas a { color: var(--tinta-sua); }
.migas [aria-current] { color: var(--tinta-ten); }

/* ----------------------------------------------------------------- Héroe */
.heroe {
    background:
        radial-gradient(ellipse 80% 100% at 15% -10%, var(--ria-clr), transparent 60%),
        radial-gradient(ellipse 60% 90% at 90% 0%, var(--teja-clr), transparent 55%);
    padding: clamp(2.5rem, 7vw, 4.5rem) 0 clamp(2rem, 5vw, 3rem);
    border-bottom: 1px solid var(--borde);
    text-align: center;
}
.heroe h1 { max-width: 20ch; margin-inline: auto; }
.heroe h1 strong { color: var(--ria); font-weight: 700; }
.heroe-sub { max-width: 58ch; margin: 0 auto 1.75rem; color: var(--tinta-sua); font-size: 1.03rem; }

.heroe-busca { display: flex; gap: .5rem; max-width: 560px; margin: 0 auto 1.25rem; }
.heroe-busca input {
    flex: 1; font: inherit; padding: .8rem 1.1rem;
    border: 1px solid var(--borde); border-radius: 999px;
    background: var(--papel); color: var(--tinta); box-shadow: var(--sombra);
}
.heroe-busca input:focus { border-color: var(--ria); outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ria) 18%, transparent); }
.heroe-busca button {
    background: var(--ria); color: #fff; border: 0; border-radius: 999px;
    padding: .8rem 1.5rem; font: inherit; font-weight: 600; cursor: pointer;
}
.heroe-busca button:hover { background: var(--ria-osc); }

.heroe-datos { color: var(--tinta-sua); font-size: .93rem; margin: 0; }
.heroe-datos strong { color: var(--tinta); font-weight: 700; }

/* --------------------------------------------------------------- Bloques */
.bloque { padding-block: clamp(2rem, 4vw, 3rem); }
.bloque-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.bloque-cab h2 { margin: 0; }
.ver-todo { font-size: .9rem; font-weight: 500; white-space: nowrap; }

/* ------------------------------------------------------------ Categorías */
.rejilla-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: .6rem; }
.cat-pastilla {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .8rem 1rem; background: var(--papel-2);
    border: 1px solid var(--borde); border-radius: var(--r-m);
    color: var(--tinta); font-size: .92rem; font-weight: 500;
    transition: border-color .15s, background .15s, transform .15s;
}
.cat-pastilla:hover { border-color: var(--ria); background: var(--ria-clr); text-decoration: none; transform: translateY(-2px); }
.cat-num {
    background: var(--papel); border: 1px solid var(--borde); border-radius: 999px;
    padding: .05rem .5rem; font-size: .76rem; font-weight: 600; color: var(--tinta-ten);
}
.grupo-cats { margin-bottom: 2.25rem; }
.grupo-cats h2 {
    font-family: var(--tipo); font-size: .78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-ten);
    padding-bottom: .5rem; border-bottom: 1px solid var(--borde); margin-bottom: .9rem;
}

/* ------------------------------------------------------------- Concellos */
.rejilla-concellos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: .6rem; }
.concello-tarj {
    display: flex; flex-direction: column; gap: .1rem;
    padding: .9rem 1rem; border: 1px solid var(--borde); border-radius: var(--r-m);
    background: var(--papel); transition: border-color .15s, transform .15s;
}
.concello-tarj:hover { border-color: var(--ria); text-decoration: none; transform: translateY(-2px); }
.concello-nom { font-weight: 600; color: var(--tinta); font-size: .97rem; }
.concello-pob { font-size: .78rem; color: var(--tinta-ten); }

/* -------------------------------------------------------------- Tarjetas */
.rejilla-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(268px, 100%), 1fr)); gap: 1.1rem; }

.tarjeta {
    display: flex; flex-direction: column;
    background: var(--papel); border: 1px solid var(--borde);
    border-radius: var(--r-l); overflow: hidden;
    transition: box-shadow .18s, transform .18s, border-color .18s;
}
.tarjeta:hover { box-shadow: var(--sombra-alt); transform: translateY(-3px); border-color: color-mix(in srgb, var(--ria) 35%, var(--borde)); }

.tarjeta-img { position: relative; display: block; aspect-ratio: 16/10; background: var(--papel-3); overflow: hidden; }
.tarjeta-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.tarjeta:hover .tarjeta-img img { transform: scale(1.04); }
.tarjeta-sinimg {
    display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
    font-family: var(--tit); font-size: 2.6rem; font-weight: 700;
    color: color-mix(in srgb, var(--ria) 45%, transparent);
    background: linear-gradient(140deg, var(--ria-clr), var(--papel-3));
}

.pastilla {
    position: absolute; top: .6rem; left: .6rem;
    padding: .18rem .6rem; border-radius: 999px;
    font-size: .73rem; font-weight: 700; letter-spacing: .01em;
    backdrop-filter: blur(6px);
}
.es-abierto { background: color-mix(in srgb, var(--ok-fondo) 92%, transparent); color: var(--ok); }
.es-cerrado { background: color-mix(in srgb, var(--no-fondo) 92%, transparent); color: var(--no); }

.tarjeta-cuerpo { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.tarjeta-tit { font-size: 1.02rem; margin: 0; line-height: 1.3; }
.tarjeta-tit a { color: var(--tinta); }
.tarjeta-tit a:hover { color: var(--ria); text-decoration: none; }
.tarjeta-meta { font-size: .82rem; color: var(--tinta-ten); margin: 0; }
.tarjeta-meta a { color: var(--tinta-ten); }
.tarjeta-meta a:hover { color: var(--ria); }
.tarjeta-dir { font-size: .85rem; color: var(--tinta-sua); margin: 0; }
.tarjeta-dist { font-size: .82rem; font-weight: 600; color: var(--teja); margin: 0; }

.tarjeta-pie { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: auto; padding-top: .6rem; }
.chip {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .2rem .6rem; border-radius: 999px;
    border: 1px solid var(--borde); background: var(--papel-2);
    font-size: .77rem; font-weight: 600; color: var(--tinta-sua);
}
.chip:hover { text-decoration: none; border-color: var(--ria); color: var(--ria); }
.chip-ver { background: var(--ok-fondo); border-color: transparent; color: var(--ok); }
.chip-estrella { background: var(--teja-clr); border-color: transparent; color: var(--teja); }
.chip-sub { font-weight: 500; opacity: .8; }

/* -------------------------------------------------------------- Noticias */
.rejilla-noticias { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 1.25rem; }
.rejilla-noticias.grande { grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr)); }

.noti { display: flex; flex-direction: column; gap: .55rem; }
.noti-img { display: block; aspect-ratio: 16/9; border-radius: var(--r-m); overflow: hidden; background: var(--papel-3); }
.noti-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.noti:hover .noti-img img { transform: scale(1.04); }
.noti-cuerpo { display: flex; flex-direction: column; gap: .3rem; }
.noti-meta { font-size: .78rem; color: var(--tinta-ten); margin: 0; }
.noti h2, .noti h3 { margin: 0; font-size: 1.02rem; line-height: 1.32; }
.noti h2 { font-size: 1.15rem; }
.noti h2 a, .noti h3 a { color: var(--tinta); }
.noti h2 a:hover, .noti h3 a:hover { color: var(--ria); text-decoration: none; }
.noti-extr { font-size: .88rem; color: var(--tinta-sua); margin: 0; }

/* ------------------------------------------------------------ Aviso alta */
.aviso-alta {
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
    padding: clamp(1.5rem, 4vw, 2.4rem);
    background: linear-gradient(135deg, var(--ria-clr), var(--teja-clr));
    border: 1px solid var(--borde); border-radius: var(--r-l);
}
.aviso-alta h2 { margin: 0 0 .35rem; }
.aviso-alta p { margin: 0; color: var(--tinta-sua); max-width: 52ch; font-size: .95rem; }

/* ------------------------------------------------------- Cabeza listados */
.cab-listado { padding: clamp(1.75rem, 4vw, 2.75rem) 0 1.25rem; border-bottom: 1px solid var(--borde); }
.cab-listado h1 { margin-bottom: .35rem; }
.cab-sub { color: var(--tinta-sua); max-width: 65ch; margin: 0 0 .5rem; }
.cab-cuenta { color: var(--tinta-ten); font-size: .93rem; margin: 0; }
.cab-cuenta strong { color: var(--tinta); }

/* --------------------------------------------------------------- Filtros */
.filtro-concellos {
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
    padding: 1rem 0; border-bottom: 1px solid var(--borde); font-size: .87rem;
}
.filtro-et { color: var(--tinta-ten); font-weight: 600; margin-right: .3rem; }
.filtro-concellos a {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .3rem .7rem; border-radius: 999px;
    border: 1px solid var(--borde); background: var(--papel-2); color: var(--tinta-sua);
}
.filtro-concellos a:hover { border-color: var(--ria); color: var(--ria); text-decoration: none; }
.filtro-concellos a.es-activo { background: var(--ria); border-color: var(--ria); color: #fff; }
.filtro-n { font-size: .75rem; opacity: .7; }
.volver { font-weight: 600; }

.barra-filtros {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    flex-wrap: wrap; padding: 1rem 0;
}
.filtros { display: flex; flex-wrap: wrap; gap: .4rem; }
.f-chip {
    padding: .38rem .85rem; border-radius: 999px;
    border: 1px solid var(--borde); background: var(--papel);
    font-size: .85rem; font-weight: 500; color: var(--tinta-sua);
}
.f-chip:hover { border-color: var(--ria); color: var(--ria); text-decoration: none; }
.f-chip.es-activo { background: var(--ria); border-color: var(--ria); color: #fff; }

.ordenar { display: flex; align-items: center; gap: .6rem; font-size: .85rem; color: var(--tinta-ten); }
.ordenar a { color: var(--tinta-sua); }
.ordenar a.es-activo { color: var(--ria); font-weight: 600; }

/* ------------------------------------------------------ Vacío / paginado */
.vacio { text-align: center; padding: clamp(2.5rem, 8vw, 5rem) 1rem; }
.vacio h2 { margin-bottom: .5rem; }
.vacio p { color: var(--tinta-sua); max-width: 48ch; margin-inline: auto; }
.vacio code { background: var(--papel-3); padding: .15rem .4rem; border-radius: 4px; font-size: .9em; }

.vacio-404 .err-num {
    font-family: var(--tit); font-size: clamp(3.5rem, 12vw, 6rem); font-weight: 700;
    color: var(--ria); opacity: .28; line-height: 1; margin: 0;
}
.err-enlaces { display: flex; gap: 1.25rem; justify-content: center; margin-top: 1.5rem; }

.paginacion {
    display: flex; align-items: center; justify-content: center; gap: 1.25rem;
    padding: 2.5rem 0 1rem; font-size: .92rem;
}
.pag-actual { color: var(--tinta-ten); }

/* ----------------------------------------------------------------- Ficha */
.ficha-cab { background: var(--papel-2); border-bottom: 1px solid var(--borde); padding-block: clamp(1.75rem, 4vw, 2.75rem); }
.ficha-cab-int { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center; }
@media (min-width: 860px) { .ficha-cab-int { grid-template-columns: 1.3fr 1fr; } }

.ficha-cat { font-size: .88rem; color: var(--tinta-ten); margin: 0 0 .4rem; }
.ficha-cab h1 { margin-bottom: .7rem; }
.ficha-estado { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.ficha-estado .pastilla { position: static; }
.ficha-foto { margin: 0; border-radius: var(--r-l); overflow: hidden; box-shadow: var(--sombra); }
.ficha-foto img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }

.ficha-cuerpo { display: grid; grid-template-columns: 1fr; gap: 2rem; padding-block: clamp(1.75rem, 4vw, 2.75rem); }
@media (min-width: 900px) { .ficha-cuerpo { grid-template-columns: 1fr 330px; } }

.ficha-bloque { margin-bottom: 2rem; }
.ficha-bloque h2 { font-size: 1.25rem; }
.ficha-desc { color: var(--tinta-sua); }
.cuenta { color: var(--tinta-ten); font-weight: 400; font-size: .9em; }

.horario { width: 100%; border-collapse: collapse; font-size: .92rem; }
.horario th, .horario td { padding: .55rem .25rem; border-bottom: 1px solid var(--borde); text-align: left; }
.horario th { font-weight: 500; color: var(--tinta-sua); width: 45%; }
.horario td { color: var(--tinta); }
.horario .es-hoy th, .horario .es-hoy td { font-weight: 700; color: var(--ria); }
.horario .cerrado { color: var(--tinta-ten); }

.resenas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.resena { padding: 1rem; background: var(--papel-2); border: 1px solid var(--borde); border-radius: var(--r-m); }
.resena-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; margin-bottom: .4rem; }
.resena-cab time { font-size: .8rem; color: var(--tinta-ten); margin-left: auto; }
.resena-estrellas { color: var(--teja); letter-spacing: .06em; font-size: .9rem; }
.resena p { margin: 0; font-size: .92rem; color: var(--tinta-sua); }

.ficha-lateral { display: flex; flex-direction: column; gap: 1rem; }
.tarjeta-contacto {
    background: var(--papel); border: 1px solid var(--borde);
    border-radius: var(--r-l); padding: 1.25rem; box-shadow: var(--sombra);
}
@media (min-width: 900px) { .tarjeta-contacto { position: sticky; top: 88px; } }
.tarjeta-contacto h2 { font-size: 1.05rem; margin-bottom: .9rem; }
.cont-linea { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; margin-bottom: .8rem; }
.cont-linea svg { flex-shrink: 0; color: var(--tinta-ten); margin-top: .18rem; }
.cont-redes { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .9rem; font-size: .88rem; }
.boton-mapa { width: 100%; margin-top: .35rem; }

.aviso-datos {
    font-size: .82rem; color: var(--tinta-ten);
    background: var(--papel-2); border: 1px dashed var(--borde);
    border-radius: var(--r-m); padding: .85rem 1rem;
}
.aviso-datos p { margin: 0; }

/* ------------------------------------------------------------- Artículos */
.articulo-cab { padding-block: clamp(1.75rem, 4vw, 2.75rem) 1rem; max-width: 760px; }
.articulo-meta { font-size: .87rem; color: var(--tinta-ten); margin-bottom: .5rem; }
.articulo-resumen { font-size: 1.1rem; color: var(--tinta-sua); }
.articulo-foto { margin: 0 auto 1.5rem; max-width: 900px; }
.articulo-foto img { width: 100%; border-radius: var(--r-l); aspect-ratio: 16/9; object-fit: cover; }
.articulo-cuerpo { max-width: 760px; padding-bottom: 2rem; }
.articulo-extracto { font-size: 1.06rem; line-height: 1.75; color: var(--tinta); }

.prosa { color: var(--tinta-sua); }
.prosa h2 { color: var(--tinta); margin-top: 2rem; }
.prosa h3 { color: var(--tinta); margin-top: 1.5rem; }
.prosa ul, .prosa ol { padding-left: 1.25rem; margin-bottom: 1rem; }
.prosa li { margin-bottom: .35rem; }

.fuente {
    margin-top: 2rem; padding: 1.25rem;
    background: var(--ria-clr); border-radius: var(--r-l);
    border-left: 4px solid var(--ria);
}
.fuente-et { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ria); margin: 0 0 .2rem; }
.fuente-nom { font-weight: 600; color: var(--tinta); margin: 0 0 .9rem; }

/* ----------------------------------------------------------------- Cerca */
.cerca-panel { padding: 1.5rem 0; text-align: center; }
.cerca-estado { font-size: .88rem; color: var(--tinta-ten); margin: .75rem 0 0; }

/* ------------------------------------------------------------------- Pie */
.pie { background: var(--papel-2); border-top: 1px solid var(--borde); margin-top: 3rem; }
.pie-int {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: 2rem; padding-block: clamp(2rem, 5vw, 3rem);
}
.pie-marca { grid-column: span 1; }
.pie-marca p { font-size: .88rem; color: var(--tinta-ten); margin-top: .5rem; max-width: 36ch; }
.pie-col h3 {
    font-family: var(--tipo); font-size: .74rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-ten); margin-bottom: .6rem;
}
.pie-col a { display: block; padding: .22rem 0; font-size: .89rem; color: var(--tinta-sua); }
.pie-col a:hover { color: var(--ria); }

.pie-legal { border-top: 1px solid var(--borde); padding-block: 1.1rem; }
.pie-legal p { font-size: .8rem; color: var(--tinta-ten); margin: 0 0 .35rem; max-width: 80ch; }
.pie-legal a { color: var(--tinta-sua); text-decoration: underline; }

/* -------------------------------------------------------------- Responsive */
@media (max-width: 880px) {
    .menu-btn { display: block; }
    .nav {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--papel); border-bottom: 1px solid var(--borde);
        box-shadow: var(--sombra-alt); padding: .6rem 1.25rem 1rem;
        max-height: 78vh; overflow-y: auto;
    }
    .nav.es-abierta { display: flex; }
    .nav > a, .mega-disparo { padding: .7rem .3rem; border-bottom: 1px solid var(--borde); border-radius: 0; }
    .mega {
        position: static; width: auto; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; border: 0; padding: .6rem 0 0; display: none;
    }
    .mega-envoltura.es-abierta .mega { display: block; }
    .mega-rejilla { grid-template-columns: 1fr 1fr; }
    .caret { margin-left: auto; }
}

@media (max-width: 620px) {
    .cabecera-int { flex-wrap: wrap; }
    .buscador { order: 3; flex-basis: 100%; max-width: none; }
    .menu-btn { order: 2; }
    .marca { order: 1; }
    .mega-rejilla { grid-template-columns: 1fr; }
    .barra-filtros { flex-direction: column; align-items: stretch; }
    .rejilla-tarjetas { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Monetización, formularios y panel
   ========================================================================== */

.nav-cta {
    background: var(--ria); color: #fff !important;
    padding: .5rem 1rem !important; border-radius: 999px; font-weight: 600 !important;
}
.nav-cta:hover { background: var(--ria-osc); }

.boton-suave {
    background: var(--papel); color: var(--ria);
    border: 1px solid color-mix(in srgb, var(--ria) 40%, var(--borde));
}
.boton-suave:hover { background: var(--ria-clr); color: var(--ria-osc); }

/* ------------------------------------------------------------- Planes */
.cab-precios { background: linear-gradient(180deg, var(--ria-clr), transparent); border-bottom: 0; }

.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 1.25rem; align-items: start; }

.plan {
    position: relative; display: flex; flex-direction: column;
    background: var(--papel); border: 1px solid var(--borde);
    border-radius: var(--r-l); padding: 1.75rem 1.5rem;
}
.plan.es-recomendado {
    border-color: var(--ria); border-width: 2px;
    box-shadow: var(--sombra-alt);
}
.plan-cinta {
    position: absolute; top: -.75rem; left: 50%; transform: translateX(-50%);
    background: var(--ria); color: #fff; font-size: .72rem; font-weight: 700;
    padding: .25rem .8rem; border-radius: 999px; white-space: nowrap;
}
.plan h2 { font-size: 1.3rem; margin-bottom: .3rem; }
.plan-gancho { font-size: .89rem; color: var(--tinta-sua); min-height: 2.6em; }

.plan-precio { display: flex; align-items: baseline; gap: .4rem; margin: .5rem 0 .2rem; }
.plan-num { font-family: var(--tit); font-size: 2.2rem; font-weight: 700; color: var(--tinta); }
.plan-per { font-size: .85rem; color: var(--tinta-ten); }
.plan-anual { font-size: .85rem; color: var(--tinta-sua); margin-bottom: 1rem; }
.plan-ahorro {
    background: var(--ok-fondo); color: var(--ok); font-weight: 700;
    font-size: .75rem; padding: .1rem .45rem; border-radius: 999px; margin-left: .3rem;
}

.plan-lista { list-style: none; margin: 0 0 1.5rem; padding: 0; flex: 1; }
.plan-lista li {
    position: relative; padding: .4rem 0 .4rem 1.6rem;
    font-size: .88rem; border-bottom: 1px solid var(--papel-3);
}
.plan-lista li::before {
    position: absolute; left: 0; top: .4rem; font-weight: 700;
}
.plan-lista .si { color: var(--tinta); }
.plan-lista .si::before { content: '✓'; color: var(--ok); }
.plan-lista .no { color: var(--tinta-ten); }
.plan-lista .no::before { content: '·'; color: var(--tinta-ten); font-size: 1.3em; line-height: .7; }

.plan .boton { width: 100%; }
.plan-nota { font-size: .76rem; color: var(--tinta-ten); text-align: center; margin: .6rem 0 0; }

/* --------------------------------------------------------- Valor / FAQ */
.valor-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 1.5rem; }
.valor-item h3 { color: var(--tinta); margin-bottom: .4rem; }
.valor-item p { font-size: .92rem; color: var(--tinta-sua); margin: 0; }

.faq { display: flex; flex-direction: column; gap: .6rem; max-width: 780px; }
.faq details {
    border: 1px solid var(--borde); border-radius: var(--r-m);
    background: var(--papel-2); padding: .9rem 1.1rem;
}
.faq summary {
    cursor: pointer; font-weight: 600; font-size: .96rem; color: var(--tinta);
    list-style: none; display: flex; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--ria); font-weight: 700; font-size: 1.2rem; line-height: 1; }
.faq details[open] summary::after { content: '−'; }
.faq details p { margin: .7rem 0 0; font-size: .92rem; color: var(--tinta-sua); }

/* --------------------------------------------------------- Formularios */
.formulario { max-width: 640px; }
.campo { margin-bottom: 1.1rem; }
.campo label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: .35rem; color: var(--tinta); }
.campo input, .campo select, .campo textarea {
    width: 100%; font: inherit; font-size: .95rem;
    padding: .65rem .85rem; color: var(--tinta); background: var(--papel);
    border: 1px solid var(--borde); border-radius: var(--r-s);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
    border-color: var(--ria); outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ria) 16%, transparent);
}
.campo textarea { resize: vertical; min-height: 5rem; }
.campo-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .campo-fila { grid-template-columns: 1fr; } }
.campo-ayuda { font-size: .8rem; color: var(--tinta-ten); margin: .35rem 0 0; }
.campo-legal { font-size: .8rem; color: var(--tinta-ten); margin: 1rem 0; }
.req { color: var(--teja); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* -------------------------------------------------------------- Avisos */
.aviso-ok, .aviso-error {
    border-radius: var(--r-m); padding: 1.1rem 1.25rem; margin-bottom: 1.5rem;
    border-left: 4px solid;
}
.aviso-ok    { background: var(--ok-fondo); border-color: var(--ok); }
.aviso-error { background: var(--teja-clr); border-color: var(--teja); }
.aviso-ok h2 { margin: 0 0 .4rem; font-size: 1.15rem; }
.aviso-ok p, .aviso-error p { margin: 0 0 .4rem; font-size: .92rem; }
.aviso-error ul { margin: .3rem 0 0; padding-left: 1.2rem; font-size: .9rem; }
.compacto { padding: .7rem 1rem; margin-bottom: 1rem; }
.aviso-caducada {
    display: inline-block; background: var(--no-fondo); color: var(--no);
    font-size: .82rem; font-weight: 600; padding: .25rem .7rem; border-radius: 999px;
}

/* ------------------------------------------------------ Caja de acceso */
.caja-acceso {
    max-width: 440px; margin: 2rem auto; padding: 2rem;
    background: var(--papel); border: 1px solid var(--borde);
    border-radius: var(--r-l); box-shadow: var(--sombra);
}
.caja-acceso.ancha { max-width: 620px; }
.caja-acceso h1 { font-size: 1.6rem; }
.caja-sub { font-size: .92rem; color: var(--tinta-sua); margin-bottom: 1.5rem; }
.caja-pie { margin: 1.25rem 0 0; font-size: .88rem; color: var(--tinta-ten); text-align: center; }
.reclama-ficha {
    background: var(--papel-2); border: 1px solid var(--borde);
    border-radius: var(--r-m); padding: 1rem; margin-bottom: 1.5rem;
}
.reclama-ficha p { margin: 0 0 .2rem; font-size: .9rem; color: var(--tinta-sua); }

/* --------------------------------------------------------------- Panel */
.cab-panel { background: var(--papel-2); }
.panel-migas { font-size: .85rem; margin-bottom: .5rem; }
.panel-seccion {
    background: var(--papel); border: 1px solid var(--borde);
    border-radius: var(--r-l); padding: 1.5rem; margin-bottom: 1.5rem;
}
.panel-seccion h2 { font-size: 1.2rem; }
.panel-nota { font-size: .88rem; color: var(--tinta-sua); margin: 1rem 0 0; }
.etiqueta-plan {
    background: var(--papel-3); color: var(--tinta-ten);
    font-size: .75rem; font-weight: 600; padding: .2rem .6rem; border-radius: 999px;
}

.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 1rem; }
.metrica {
    background: var(--papel-2); border: 1px solid var(--borde);
    border-radius: var(--r-m); padding: 1rem;
}
.met-num { display: block; font-family: var(--tit); font-size: 1.9rem; font-weight: 700; color: var(--tinta); line-height: 1.1; }
.met-et { display: block; font-size: .8rem; color: var(--tinta-ten); margin-top: .2rem; }
.tend { font-weight: 700; margin-left: .3rem; }
.tend.sube  { color: var(--ok); }
.tend.baja  { color: var(--teja); }
.tend.igual { color: var(--tinta-ten); }

.grafico {
    display: flex; align-items: flex-end; gap: 2px;
    height: 110px; margin-top: 1.25rem;
    padding: .5rem; background: var(--papel-2);
    border: 1px solid var(--borde); border-radius: var(--r-m);
}
.g-barra {
    flex: 1; min-height: 2px; height: var(--h);
    background: var(--ria); border-radius: 2px 2px 0 0; opacity: .8;
}
.g-barra:hover { opacity: 1; }

.posicion { background: var(--ria-clr); border-radius: var(--r-m); padding: 1.25rem; }
.pos-frase { font-size: 1.05rem; margin-bottom: .5rem; }
.pos-nota { font-size: .9rem; color: var(--tinta-sua); margin-bottom: .9rem; }

.plan-actual { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.plan-actual-nom { font-family: var(--tit); font-size: 1.3rem; font-weight: 700; margin: 0; }
.plan-actual-sub { font-size: .88rem; color: var(--tinta-sua); margin: .2rem 0 0; }

.lista-mios { display: flex; flex-direction: column; gap: .75rem; }
.mio {
    display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
    background: var(--papel); border: 1px solid var(--borde);
    border-radius: var(--r-m); padding: 1.1rem 1.25rem; color: var(--tinta);
}
.mio:hover { border-color: var(--ria); text-decoration: none; box-shadow: var(--sombra); }
.mio-txt { flex: 1; min-width: 180px; }
.mio-txt h2 { font-size: 1.05rem; margin: 0; }
.mio-txt p { font-size: .84rem; color: var(--tinta-ten); margin: .15rem 0 0; }
.mio-num { display: block; font-family: var(--tit); font-size: 1.4rem; font-weight: 700; }
.mio-et { font-size: .75rem; color: var(--tinta-ten); }
.mio-plan {
    background: var(--papel-3); color: var(--tinta-ten);
    font-size: .76rem; font-weight: 700; padding: .25rem .7rem; border-radius: 999px;
}
.mio-plan.es-pago { background: var(--ria); color: #fff; }

.reclamar {
    background: var(--teja-clr); border: 1px dashed var(--teja);
    border-radius: var(--r-m); padding: 1.1rem;
}
.reclamar-tit { font-weight: 700; margin-bottom: .3rem; }
.reclamar p { font-size: .86rem; color: var(--tinta-sua); margin-bottom: .8rem; }

/* ------------------------------------------------------------- Ofertas */
.es-descuento { background: var(--teja); color: #fff; }
.oferta-precio { display: flex; align-items: baseline; gap: .5rem; margin: .3rem 0; }
.oferta-precio s { color: var(--tinta-ten); font-size: .9rem; }
.oferta-precio strong { color: var(--teja); font-size: 1.15rem; }
.oferta-precio.grande strong { font-size: 1.8rem; font-family: var(--tit); }
.oferta-pct { background: var(--teja); color: #fff; font-weight: 700; font-size: .8rem; padding: .15rem .55rem; border-radius: 999px; }
.oferta-vig { font-size: .8rem; color: var(--tinta-ten); margin: 0; }
.oferta-negocio { font-size: 1rem; color: var(--tinta-sua); }
.oferta-fechas { font-size: .88rem; color: var(--tinta-ten); }
.oferta-cond { font-size: .82rem; color: var(--tinta-ten); border-top: 1px solid var(--borde); padding-top: .75rem; }
.oferta-acciones { display: flex; gap: .5rem; flex-wrap: wrap; margin: .9rem 0 0; }

.ofertas-ficha { list-style: none; margin: 0; padding: 0; }
.ofertas-ficha li {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    padding: .7rem 0; border-bottom: 1px solid var(--borde); flex-wrap: wrap;
}
.of-pct { background: var(--teja); color: #fff; font-size: .74rem; font-weight: 700; padding: .1rem .45rem; border-radius: 999px; margin-left: .4rem; }
.of-hasta { font-size: .78rem; color: var(--tinta-ten); }

.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: .6rem; }
.galeria img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-s); }

/* -------------------------------------------------- Texto de categoría */
.intro-cat {
    max-width: 78ch; font-size: .95rem; color: var(--tinta-sua);
    padding: 1.1rem 0 0;
}
.intro-cat strong { color: var(--tinta); }
.enlaces-relacionados {
    display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
    padding: 1.25rem 0; border-top: 1px solid var(--borde); margin-top: 1.5rem;
    font-size: .87rem;
}
.enlaces-relacionados span { color: var(--tinta-ten); font-weight: 600; }
.enlaces-relacionados a {
    padding: .28rem .7rem; border: 1px solid var(--borde);
    border-radius: 999px; background: var(--papel-2); color: var(--tinta-sua);
}
.enlaces-relacionados a:hover { border-color: var(--ria); color: var(--ria); text-decoration: none; }

/* ==========================================================================
   Agenda y bloque "ahora mismo"
   ========================================================================== */

/* --------------------------------------------------------- Bloque ahora */
.bloque-ahora {
    background: linear-gradient(180deg, var(--ria-clr), transparent 70%);
    border-radius: var(--r-l);
    margin-top: 1.5rem;
}
.reloj {
    font-family: var(--tit); font-size: 1.05rem; font-weight: 700;
    color: var(--ria); background: var(--papel);
    padding: .2rem .7rem; border-radius: 999px; border: 1px solid var(--borde);
}

.ahora-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 1rem; }

.panel-ahora {
    background: var(--papel); border: 1px solid var(--borde);
    border-radius: var(--r-l); padding: 1.15rem 1.25rem;
}
.panel-ahora h3 {
    display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
    font-family: var(--tipo); font-size: .78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-ten);
    padding-bottom: .6rem; margin-bottom: .6rem; border-bottom: 1px solid var(--borde);
}
.panel-ahora h3 .ver-todo { font-size: .75rem; text-transform: none; letter-spacing: 0; }
.panel-vacio { font-size: .87rem; color: var(--tinta-ten); margin: 0; }

.mini-eventos, .mini-abiertos, .mini-ofertas { list-style: none; margin: 0; padding: 0; }
.mini-eventos li, .mini-abiertos li, .mini-ofertas li {
    padding: .5rem 0; border-bottom: 1px dashed var(--borde);
    font-size: .9rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem;
}
.mini-eventos li:last-child, .mini-abiertos li:last-child, .mini-ofertas li:last-child { border-bottom: 0; }

.me-hora {
    flex-shrink: 0; min-width: 3.4rem;
    font-weight: 700; font-size: .8rem; color: var(--ria);
}
.me-lugar, .ma-con { font-size: .76rem; color: var(--tinta-ten); margin-left: auto; }
.ma-cat { font-size: .76rem; color: var(--tinta-ten); }
.mo-neg { font-size: .78rem; color: var(--tinta-ten); }
.mo-pct {
    background: var(--teja); color: #fff; font-size: .72rem; font-weight: 700;
    padding: .05rem .4rem; border-radius: 999px; margin-left: auto;
}
.mini-abiertos li a, .mini-eventos li a, .mini-ofertas li a { font-weight: 500; color: var(--tinta); }
.mini-abiertos li a:hover, .mini-eventos li a:hover, .mini-ofertas li a:hover { color: var(--ria); }

/* -------------------------------------------------------------- Agenda */
.cab-agenda { background: linear-gradient(180deg, var(--teja-clr), transparent); border-bottom: 0; }

.agenda-cuando { display: flex; gap: .5rem; padding: 1rem 0 .25rem; }
.agenda-cuando a {
    padding: .5rem 1.1rem; border-radius: 999px; font-weight: 600; font-size: .92rem;
    border: 1px solid var(--borde); background: var(--papel); color: var(--tinta-sua);
}
.agenda-cuando a:hover { border-color: var(--ria); color: var(--ria); text-decoration: none; }
.agenda-cuando a.es-activo { background: var(--ria); border-color: var(--ria); color: #fff; }

.calendario {
    display: flex; gap: .4rem; overflow-x: auto; padding: 1rem 0;
    scrollbar-width: thin;
}
.cal-dia {
    flex: 0 0 auto; position: relative;
    display: flex; flex-direction: column; align-items: center; gap: .1rem;
    min-width: 3.2rem; padding: .5rem .4rem;
    border: 1px solid var(--borde); border-radius: var(--r-m);
    background: var(--papel); color: var(--tinta);
}
.cal-dia:hover { border-color: var(--ria); text-decoration: none; }
.cal-dia.es-activo { background: var(--ria); border-color: var(--ria); color: #fff; }
.cal-dia.es-vacio { opacity: .45; }
.cal-sem { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: inherit; opacity: .75; }
.cal-num { font-family: var(--tit); font-size: 1.15rem; font-weight: 700; line-height: 1; }
.cal-pt {
    position: absolute; top: -.35rem; right: -.35rem;
    background: var(--teja); color: #fff;
    font-size: .65rem; font-weight: 700; line-height: 1;
    min-width: 1.1rem; height: 1.1rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 999px; padding: 0 .2rem;
}

.dia-bloque { margin-bottom: 2rem; }
.dia-cab {
    display: flex; align-items: baseline; gap: .6rem;
    font-size: 1.15rem; padding-bottom: .5rem; margin-bottom: .75rem;
    border-bottom: 2px solid var(--borde);
}
.dia-cab.es-hoy { border-bottom-color: var(--ria); color: var(--ria); }
.dia-fecha { font-family: var(--tipo); font-size: .82rem; font-weight: 400; color: var(--tinta-ten); }

.eventos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.evento {
    display: flex; gap: 1rem; align-items: flex-start;
    padding: .85rem 1rem;
    background: var(--papel); border: 1px solid var(--borde); border-radius: var(--r-m);
    transition: border-color .15s, box-shadow .15s;
}
.evento:hover { border-color: color-mix(in srgb, var(--ria) 40%, var(--borde)); box-shadow: var(--sombra); }
.evento.es-destacado { border-left: 3px solid var(--teja); }

.ev-hora {
    flex: 0 0 4.6rem; font-weight: 700; font-size: .88rem; color: var(--ria);
    padding-top: .1rem;
}
.ev-sinhora { font-weight: 500; font-size: .8rem; color: var(--tinta-ten); }

.ev-img { flex: 0 0 108px; border-radius: var(--r-s); overflow: hidden; background: var(--papel-3); }
.ev-img img { width: 108px; height: 74px; object-fit: cover; }

.ev-cuerpo { flex: 1; min-width: 0; }
.ev-cuerpo h3 { font-size: 1.02rem; margin: 0 0 .2rem; line-height: 1.3; }
.ev-cuerpo h3 a { color: var(--tinta); }
.ev-cuerpo h3 a:hover { color: var(--ria); text-decoration: none; }
.ev-meta { font-size: .82rem; color: var(--tinta-ten); margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .2rem; }
.ev-tipo {
    background: var(--papel-3); color: var(--tinta-sua);
    font-size: .72rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px;
}
.ev-gratis {
    background: var(--ok-fondo); color: var(--ok);
    font-size: .72rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px;
    margin-left: .3rem;
}
.ev-rango { font-size: .8rem; color: var(--teja); font-weight: 600; margin: .25rem 0 0; }

.ev-cuando-grande { font-size: 1.1rem; color: var(--tinta-sua); }
.ev-cuando-grande strong { color: var(--ria); }

.ev-datos {
    display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.25rem;
    background: var(--papel-2); border: 1px solid var(--borde);
    border-radius: var(--r-m); padding: 1.1rem 1.25rem; margin: 1.5rem 0;
    font-size: .93rem;
}
.ev-datos dt { font-weight: 700; color: var(--tinta-ten); font-size: .78rem;
               text-transform: uppercase; letter-spacing: .05em; padding-top: .15rem; }
.ev-datos dd { margin: 0; color: var(--tinta); }
.ev-fecha-exacta { color: var(--tinta-ten); font-size: .85em; }

.fuente-nota { font-size: .85rem; color: var(--tinta-sua); margin: 0 0 .9rem; }

@media (max-width: 560px) {
    .evento { flex-wrap: wrap; gap: .6rem; }
    .ev-hora { flex-basis: 100%; }
    .ev-img { flex-basis: 84px; }
    .ev-img img { width: 84px; height: 60px; }
    .ev-datos { grid-template-columns: 1fr; gap: .2rem .5rem; }
    .ev-datos dt { padding-top: .6rem; }
}

/* ==========================================================================
   Fotografía de patrimonio
   Las de Commons van bajo CC-BY / CC-BY-SA: el crédito es obligatorio,
   así que está pensado para que se lea sin afear la página.
   ========================================================================== */

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

/* ------------------------------------------------ Figura con crédito */
.figura-patrimonio { margin: 0; }
.figura-patrimonio picture {
    border-radius: var(--r-l); overflow: hidden;
    background: var(--papel-3); box-shadow: var(--sombra);
}
.figura-patrimonio img { aspect-ratio: 16 / 9; object-fit: cover; }
.figura-patrimonio figcaption {
    padding: .55rem .15rem 0;
    font-size: .78rem; color: var(--tinta-ten); line-height: 1.45;
}
.credito a { color: var(--tinta-ten); text-decoration: underline; text-underline-offset: 2px; }
.credito a:hover { color: var(--ria); }

/* ------------------------------------------------------------ Mosaico */
.mosaico {
    display: grid; gap: .75rem;
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 760px) {
    .mosaico { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 150px; }
    .mos-item.es-grande { grid-column: span 2; grid-row: span 2; }
}

.mos-item {
    position: relative; display: block; overflow: hidden;
    border-radius: var(--r-m); background: var(--papel-3);
    min-height: 150px;
}
.mos-item picture, .mos-item img { width: 100%; height: 100%; }
.mos-item img { object-fit: cover; transition: transform .45s ease; }
.mos-item:hover img { transform: scale(1.05); }
.mos-item:hover { text-decoration: none; }

/* Degradado sólo en la mitad baja: sin esto el texto se pierde sobre
   las fotos claras y se lee fatal sobre las oscuras. */
.mos-item::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top,
        rgba(8, 20, 17, .82) 0%,
        rgba(8, 20, 17, .45) 32%,
        rgba(8, 20, 17, 0) 62%);
    pointer-events: none;
}

.mos-txt {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
    display: flex; flex-direction: column; gap: .2rem;
    padding: .8rem .9rem; color: #fff;
}
.mos-tit {
    font-family: var(--tit); font-weight: 700; line-height: 1.2;
    font-size: .95rem; text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.es-grande .mos-tit { font-size: 1.35rem; }
.mos-sub {
    font-size: .82rem; opacity: .9; line-height: 1.4;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.mosaico-credito { font-size: .78rem; color: var(--tinta-ten); margin: .75rem 0 0; }

/* ------------------------------------------- Fotos en tarjetas y fichas */
.noti-img picture, .noti-img picture img { width: 100%; height: 100%; }
.noti-img picture img { object-fit: cover; }

.articulo-foto { max-width: 1120px; margin-inline: auto; }
.articulo-foto .figura-patrimonio picture { border-radius: var(--r-l); }

/* Sin foto, la sección no debe verse rota: la tarjeta se apaña sola. */
.noti:not(:has(.noti-img)) .noti-cuerpo { padding-top: .25rem; }

@media (prefers-reduced-motion: reduce) {
    .mos-item img { transition: none; }
    .mos-item:hover img { transform: none; }
}

/* ==========================================================================
   IDENTIDAD
   Este bloque va al final a propósito: corrige lo que hacía que la web
   pareciera una plantilla cualquiera. Los tres culpables eran el redondeo
   grande, el todo-centrado y la ausencia de imagen.
   ========================================================================== */

/* ------------------------------------------------------ Portada con foto */
.portada {
    position: relative;
    min-height: clamp(420px, 52vw, 620px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    background: var(--ria-hondo);
    isolation: isolate;
}
.portada.sin-foto { min-height: 340px; }

.portada-fondos { position: absolute; inset: 0; z-index: 0; }

.pf {
    position: absolute; inset: 0;
    opacity: 0;
    /* Fundido largo a propósito: las tres fotos son el mismo encuadre a
       distintas horas, así que un cambio lento no se lee como un carrusel
       sino como el paso del día. Con 300 ms parecería un fallo. */
    transition: opacity 2.2s ease-in-out;
}
.pf.es-activa { opacity: 1; }
.pf img { width: 100%; height: 100%; object-fit: cover; }

/* El velo hace legible el texto sobre cualquier foto: sin él, un titular
   blanco sobre el cielo claro de la panorámica no se lee. Va más cargado
   por la izquierda, que es donde cae el texto. */
.portada-velo {
    position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(100deg,
            rgba(6,26,35,.88) 0%,
            rgba(6,26,35,.72) 34%,
            rgba(6,26,35,.30) 62%,
            rgba(6,26,35,.42) 100%),
        linear-gradient(to top, rgba(6,26,35,.55) 0%, transparent 42%);
}

.portada-txt {
    position: relative; z-index: 2;
    padding-block: clamp(2.5rem, 6vw, 4rem) clamp(3.5rem, 7vw, 5rem);
    color: #fff;
    max-width: 100%;
}

.portada-kicker {
    display: inline-block;
    font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .14em;
    color: #fff;
    background: var(--teja);
    padding: .3rem .7rem;
    border-radius: 2px;
    margin-bottom: 1.1rem;
}

.portada h1 {
    font-family: var(--tit);
    font-size: clamp(2.1rem, 5.2vw, 4rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: #fff;
    margin: 0 0 .6rem;
    max-width: 16ch;
    text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.portada h1 em {
    font-style: normal;
    color: #ffd9c2;
}

.portada-sub {
    font-size: clamp(.98rem, 1.5vw, 1.12rem);
    color: rgba(255,255,255,.9);
    max-width: 46ch;
    margin-bottom: 1.6rem;
    text-shadow: 0 1px 10px rgba(0,0,0,.4);
}

.portada-busca {
    display: flex; gap: .5rem;
    max-width: 560px; margin-bottom: 1.1rem;
}
.portada-busca input {
    flex: 1; min-width: 0;
    font: inherit; font-size: 1rem;
    padding: .85rem 1.1rem;
    border: 0; border-radius: var(--r-m);
    background: #fff; color: var(--tinta);
    box-shadow: 0 6px 24px rgba(0,0,0,.22);
}
.portada-busca input:focus {
    outline: none;
    box-shadow: 0 6px 24px rgba(0,0,0,.22), 0 0 0 3px rgba(255,255,255,.55);
}
.portada-busca button {
    flex-shrink: 0;
    background: var(--teja); color: #fff;
    border: 0; border-radius: var(--r-m);
    padding: .85rem 1.5rem;
    font: inherit; font-weight: 700; cursor: pointer;
    box-shadow: 0 6px 24px rgba(0,0,0,.22);
    transition: background .15s;
}
.portada-busca button:hover { background: #a4471f; }

.portada-datos {
    font-size: .88rem; color: rgba(255,255,255,.82); margin: 0;
    text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.portada-datos strong { color: #fff; font-weight: 700; }
.portada-datos .sep { color: rgba(255,255,255,.45); }

/* --- Pie del banner: crédito y navegación entre fotos --- */
.portada-pie {
    position: relative; z-index: 2;
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    padding-bottom: 1.1rem;
}
.portada-cap {
    display: flex; flex-direction: column; gap: .1rem;
    color: rgba(255,255,255,.92); max-width: 60%;
}
.portada-cap:hover { text-decoration: none; }
.portada-cap:hover .cap-txt { text-decoration: underline; text-underline-offset: 3px; }
.cap-txt { font-size: .88rem; font-weight: 600; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.cap-credito { font-size: .72rem; color: rgba(255,255,255,.62); text-shadow: 0 1px 8px rgba(0,0,0,.5); }

.portada-puntos { display: flex; gap: .4rem; margin-left: auto; }
.pp {
    width: 30px; height: 4px; padding: 0;
    border: 0; border-radius: 2px; cursor: pointer;
    background: rgba(255,255,255,.38);
    transition: background .2s, width .2s;
}
.pp:hover { background: rgba(255,255,255,.65); }
.pp.es-activo { background: var(--teja); width: 44px; }

@media (max-width: 620px) {
    .portada h1 { max-width: 100%; }
    .portada-busca { flex-direction: column; }
    .portada-cap { max-width: 100%; }
    .portada-pie { padding-bottom: .8rem; }
}

/* --------------------------------------- Cabeceras de sección con marca */
/* Una regla corta en teja delante del h2. Es lo que le da ritmo a la
   página: sin ella todos los bloques pesan lo mismo y se leen como una
   lista infinita de tarjetas. */
.bloque-cab h2,
.grupo-cats h2 {
    position: relative;
    padding-left: 0;
}
.bloque-cab h2::before {
    content: '';
    display: block;
    width: 34px; height: 3px;
    background: var(--teja);
    margin-bottom: .55rem;
    border-radius: 2px;
}
.bloque-cab { align-items: flex-end; }

/* ------------------------------------------ Banda oscura del "ahora" */
/* Rompe el blanco continuo y marca que esa zona es la que cambia sola. */
.bloque-ahora {
    background: var(--ria-hondo);
    color: #fff;
    padding: clamp(1.75rem, 3.5vw, 2.5rem);
    border-radius: var(--r-l);
    margin-top: 2rem;
}
.bloque-ahora .bloque-cab h2 { color: #fff; }
.bloque-ahora .bloque-cab h2::before { background: var(--teja); }
.reloj {
    background: rgba(255,255,255,.1); color: #fff;
    border-color: rgba(255,255,255,.2);
    font-variant-numeric: tabular-nums;
}
.bloque-ahora .panel-ahora {
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.13);
}
.bloque-ahora .panel-ahora h3 {
    color: rgba(255,255,255,.62);
    border-bottom-color: rgba(255,255,255,.13);
}
.bloque-ahora .panel-ahora h3 .ver-todo { color: var(--teja); }
.bloque-ahora .mini-eventos li,
.bloque-ahora .mini-abiertos li,
.bloque-ahora .mini-ofertas li { border-bottom-color: rgba(255,255,255,.1); }
.bloque-ahora .mini-eventos li a,
.bloque-ahora .mini-abiertos li a,
.bloque-ahora .mini-ofertas li a { color: rgba(255,255,255,.94); }
.bloque-ahora .mini-eventos li a:hover,
.bloque-ahora .mini-abiertos li a:hover,
.bloque-ahora .mini-ofertas li a:hover { color: #ffd9c2; }
.bloque-ahora .me-hora { color: #8fbdf0; }
.bloque-ahora .me-lugar,
.bloque-ahora .ma-con,
.bloque-ahora .ma-cat,
.bloque-ahora .mo-neg { color: rgba(255,255,255,.55); }
.bloque-ahora .panel-vacio { color: rgba(255,255,255,.6); }
.bloque-ahora .panel-vacio a { color: #8fbdf0; }

/* ---------------------------------------------------- Marca y cabecera */
.marca-txt {
    font-family: var(--tit);
    font-weight: 700;
    font-size: 1.34rem;
    letter-spacing: -.015em;
    color: var(--tinta);
}
.marca-txt b { color: var(--ria); font-weight: 700; }
.marca-ic { color: var(--ria); }

.cabecera { border-bottom: 1px solid var(--borde); }
.nav > a, .mega-disparo { font-weight: 500; }
.nav-cta { background: var(--teja); }
.nav-cta:hover { background: #a4471f; }

/* ------------------------------------------------------------ Detalles */
/* Titulares con la serif editorial y algo más de peso. */
h1, h2, h3 { font-weight: 600; letter-spacing: -.015em; }

/* La pastilla de categoría deja de ser una caja blanda y pasa a leerse
   como una etiqueta. */
.cat-pastilla {
    border-radius: var(--r-s);
    background: var(--papel);
}
.cat-pastilla:hover {
    background: var(--ria-clr);
    border-color: var(--ria);
}
.cat-num { border-radius: 3px; font-variant-numeric: tabular-nums; }

.tarjeta { border-radius: var(--r-m); }
.tarjeta-img { border-radius: 0; }
.pastilla { border-radius: 3px; }
.chip { border-radius: 3px; }

.concello-tarj { border-radius: var(--r-s); }
.concello-pob { font-variant-numeric: tabular-nums; }

/* Cifras siempre en cifras tabulares: los números desalineados en las
   métricas del panel se leen como un error de maquetación. */
.met-num, .mio-num, .cal-num, .plan-num, .heroe-datos strong { font-variant-numeric: tabular-nums; }

.mosaico { gap: .5rem; }
.mos-item { border-radius: var(--r-s); }
.mos-tit { font-family: var(--tit); }

.faq details { border-radius: var(--r-m); }
.figura-patrimonio picture { border-radius: var(--r-m); }

/* ==========================================================================
   Tarjeta compacta (negocio sin foto)
   Ninguno de los negocios importados de OSM trae imagen. Con el hueco de
   foto vacío, un listado eran ocho marcadores grises seguidos; sin él,
   son ocho fichas de directorio legibles.
   ========================================================================== */

.tarjeta.es-compacta {
    border-left: 3px solid var(--ria);
    background: var(--papel);
}
.tarjeta.es-compacta:hover { border-left-color: var(--teja); }

.tarjeta.es-compacta .tarjeta-cuerpo {
    padding: .95rem 1.1rem 1rem;
    gap: .18rem;
}

/* Sin foto, el orden de lectura cambia: primero de qué es y dónde, y
   después el nombre, que es lo que se busca con la vista. */
.tarjeta.es-compacta .tarjeta-meta {
    order: -1;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
    color: var(--tinta-ten);
    margin-bottom: .1rem;
}
.tarjeta.es-compacta .tarjeta-tit {
    font-size: 1.14rem;
    line-height: 1.25;
    margin-bottom: .1rem;
}
.tarjeta.es-compacta .tarjeta-dir { font-size: .87rem; }

.tarjeta.es-compacta .tarjeta-pie {
    padding-top: .75rem;
    margin-top: .55rem;
    border-top: 1px solid var(--papel-3);
}

/* El estado abierto/cerrado, que en la tarjeta con foto va superpuesto
   sobre la imagen, aquí baja al pie con el resto de señales. */
.chip-abierto { background: var(--ok-fondo); border-color: transparent; color: var(--ok); }
.chip-cerrado { background: var(--no-fondo); border-color: transparent; color: var(--no); }

/* Las rejillas pueden apretarse: sin foto caben más por fila y el listado
   deja de obligar a hacer scroll para ver ocho negocios. */
.rejilla-tarjetas { grid-template-columns: repeat(auto-fill, minmax(min(238px, 100%), 1fr)); gap: .85rem; }

@media (max-width: 620px) {
    .rejilla-tarjetas { grid-template-columns: 1fr; }
}

/* Rejilla de columnas fijas.
   La rejilla normal usa auto-fill, que reparte según el ancho disponible y
   deja huecos cuando el número de piezas no es múltiplo de las columnas.
   Aquí las columnas son fijas (4 / 2 / 1) y se sirven cuatro piezas: el
   único número que llena fila completa en los tres casos. */
.rejilla-fija { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .rejilla-fija { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .rejilla-fija { grid-template-columns: 1fr; } }

/* A 360 px o menos el buscador grande no cabe en una fila: el botón se
   salía de la pantalla en el 404 y en la página de búsqueda. */
@media (max-width: 400px) {
    .heroe-busca { flex-direction: column; }
    .heroe-busca button { width: 100%; }
}

/* ==========================================================================
   Aviso de instalación (PWA)
   Barra discreta abajo, no un modal. Aparece a los 25 s y sólo una vez:
   si la cierras, no vuelve.
   ========================================================================== */
.instalar {
    position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 200;
    display: flex; align-items: center; gap: .75rem;
    max-width: 34rem; margin-inline: auto;
    padding: .8rem .9rem .8rem 1.1rem;
    background: var(--ria-hondo); color: #fff;
    border-radius: var(--r-m);
    box-shadow: 0 8px 34px rgba(6, 26, 40, .35);
    animation: instalar-entra .35s ease-out;
}
@keyframes instalar-entra {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
.instalar-txt { flex: 1; font-size: .89rem; line-height: 1.45; }
.instalar-txt b { color: #ffd9c2; font-weight: 700; }

.instalar-si {
    flex-shrink: 0; font: inherit; font-weight: 700; font-size: .88rem;
    background: var(--teja); color: #fff; border: 0;
    border-radius: var(--r-s); padding: .5rem 1rem; cursor: pointer;
}
.instalar-si:hover { background: #a4471f; }

.instalar-no {
    flex-shrink: 0; background: none; border: 0; cursor: pointer;
    color: rgba(255, 255, 255, .6); font-size: 1.4rem; line-height: 1;
    padding: .2rem .4rem;
}
.instalar-no:hover { color: #fff; }

@media (prefers-reduced-motion: reduce) { .instalar { animation: none; } }

/* --- Ficha · bloque "Dónde está" ---------------------------------- */
/* Listas con separador en vez de frases: los recuentos se leen de un
   vistazo y no hay que fingir concordancias que el dato no da. */

.ficha-entorno {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .3rem .55rem;
    margin: .7rem 0 0;
    line-height: 1.75;
}

.ficha-entorno-tit {
    flex: 0 0 100%;
    font-size: .72rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--tinta-ten);
    margin-bottom: -.15rem;
}

.ficha-entorno a {
    color: var(--tinta);
    text-decoration: none;
    border-bottom: 1px solid var(--borde);
}
.ficha-entorno a:hover { border-bottom-color: var(--ria); color: var(--ria); }

.ficha-entorno .dist {
    font-size: .82em;
    color: var(--tinta-ten);
    font-variant-numeric: tabular-nums;
}