/* Qué Pasa Hoy · dirección editorial
   Una guía de ciudad impresa llevada a la pantalla: tipografía grande, filetes finos en lugar de cajas,
   blanco y tinta, y un único acento color albero. El color fuerte se reserva para el pueblo de la semana. */
:root {
  --bg: #ffffff; --bg2: #f4f4f1; --ink: #111111; --ink2: #63635e; --line: #e2e2dd;
  --acento: #e3a21a; --acento-tx: #8f5f00; --sobre-acento: #1a1200; --enlace: #111111;
  --sol: #e3a21a; --nube: #c9cbd1; --lluvia: #3a6df0;
  --ok: #1d7f4e; --amarillo: #b98500; --naranja: #d35d12; --rojo: #c42d1a; --info: #3a6df0;
  --f-t: "Schibsted Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
  --f-s: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --ancho: 1240px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0e0e0d; --bg2: #181816; --ink: #f1f1ec; --ink2: #a4a49c; --line: #2b2b28;
  --acento-tx: #f0b53c; --enlace: #f1f1ec; --nube: #6b6e78; --lluvia: #7a9bff;
  --ok: #52c486; --amarillo: #e7bb3c; --naranja: #f18c4c; --rojo: #ff6d58; --info: #7a9bff; color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #0e0e0d; --bg2: #181816; --ink: #f1f1ec; --ink2: #a4a49c; --line: #2b2b28;
  --acento-tx: #f0b53c; --enlace: #f1f1ec; --nube: #6b6e78; --lluvia: #7a9bff;
  --ok: #52c486; --amarillo: #e7bb3c; --naranja: #f18c4c; --rojo: #ff6d58; --info: #7a9bff; color-scheme: dark; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.55 var(--f-t); -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 50; background: var(--bg); }
a { color: var(--enlace); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { text-decoration-color: var(--acento); }
a:focus-visible, button:focus-visible, select:focus-visible, [role=button]:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
.envoltura { max-width: var(--ancho); margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.eyebrow, .col-t, .ev-c, .plan-cat, .tp-com, .migas, .ficha dt, .tabla th, .cifras dt, .destacado-e, .aviso-n, .selector span {
  font: 700 .72rem/1.3 var(--f-t); letter-spacing: .09em; text-transform: uppercase; }
.eyebrow { color: var(--ink2); }
.nota { font-size: .9rem; color: var(--ink2); max-width: 70ch; }
.fuente { font-size: .78rem; color: var(--ink2); margin: 14px 0 0; }
.vacio { color: var(--ink2); }
.saltar { position: absolute; left: -999px; } .saltar:focus { left: 16px; top: 16px; z-index: 99; background: var(--bg); padding: 8px 12px; }

/* ---------- Cabecera ---------- */
.ticker { overflow: hidden; border-bottom: 1px solid var(--line); font-size: .78rem; color: var(--ink2); background: var(--bg); }
.ticker-in { display: inline-flex; gap: 48px; white-space: nowrap; padding: 8px 0; animation: ticker 80s linear infinite; }
.ticker-in span::before { content: "●"; color: var(--acento); margin-right: 10px; font-size: .6rem; vertical-align: 2px; }
@keyframes ticker { to { transform: translateX(-50%); } }
.cab { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--ink); }
.cab-in { display: flex; align-items: center; gap: 28px; padding-block: 16px; }
.logo { display: flex; align-items: baseline; gap: 6px; color: var(--ink); text-decoration: none; font: 800 1.5rem/1 var(--f-t); letter-spacing: -.045em; white-space: nowrap; }
.logo em { font: italic 400 1.85rem/1 var(--f-s); letter-spacing: -.01em; color: var(--acento-tx); }
.logo small { font: 700 .62rem var(--f-t); letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); margin-left: 6px; padding-left: 10px; border-left: 1px solid var(--line); align-self: center; }
.nav-top { display: flex; gap: 22px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.nav-top a { color: var(--ink2); text-decoration: none; font-weight: 500; font-size: .95rem; white-space: nowrap; padding-block: 6px; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.nav-top a:hover { color: var(--ink); }
.nav-top a[aria-current] { color: var(--ink); border-color: var(--acento); }
.menu-btn { margin-left: auto; display: none; align-items: center; gap: 8px; background: none; color: var(--ink); border: 0; font: 600 .95rem var(--f-t); padding: 6px 0; cursor: pointer; }

.menu { position: fixed; inset: 0; z-index: 60; background: var(--bg); overflow-y: auto; padding-top: env(safe-area-inset-top, 0px); padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
.menu-cab { display: flex; justify-content: space-between; align-items: center; padding-block: 18px; border-bottom: 1px solid var(--ink); }
.menu-cab strong { font: 800 1.4rem var(--f-t); letter-spacing: -.03em; }
.menu-cerrar { background: none; color: var(--ink); border: 0; font: 600 .95rem var(--f-t); cursor: pointer; padding: 6px 0; }
.menu-grupos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 32px 40px; padding-block: 28px; }
.menu-grupos h2 { font: 800 1.6rem/1.1 var(--f-t); letter-spacing: -.035em; margin-bottom: 10px; }
.menu-grupos h2 a { color: var(--ink); text-decoration: none; }
.menu-grupos ul { list-style: none; margin: 0; padding: 0; display: grid; }
.menu-grupos li a { color: var(--ink2); text-decoration: none; display: block; padding: 4px 0; }
.menu-grupos li a:hover { color: var(--ink); }
body.menu-abierto { overflow: hidden; }

main { padding-block: 0 80px; min-height: 60vh; }

/* ---------- Portada ---------- */
.portada { padding-top: clamp(28px, 5vw, 64px); }
.fecha { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 0 0 18px; font-size: .95rem; color: var(--ink2); }
.fecha span:first-child::first-letter { text-transform: uppercase; }
.vivo { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 600; color: var(--ink); }
.vivo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: latido 2.4s infinite; }
.vivo[data-fuente="muestra"]::before { background: var(--acento); }
@keyframes latido { 50% { opacity: .25; } }
.portada h1 { font: 800 clamp(3rem, 9vw, 7.4rem)/.9 var(--f-t); letter-spacing: -.055em; max-width: 12ch; }
.portada h1 em { font: italic 400 1.1em/.8 var(--f-s); letter-spacing: -.02em; color: var(--acento-tx); padding-right: .04em; }
.selector { display: inline-flex; align-items: baseline; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.selector span { color: var(--ink2); }
select { font: 700 1.05rem var(--f-t); color: var(--ink); background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23e3a21a' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 2px center; border: 0; border-bottom: 2px solid var(--ink); padding: 4px 24px 4px 0; appearance: none; border-radius: 0; cursor: pointer; max-width: 100%; }
select option { color: #111; background: #fff; }
.cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(32px, 5vw, 56px) 0 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.cifras > div { padding: 16px 20px 18px; border-left: 1px solid var(--line); min-width: 0; }
.cifras > div:first-child { border-left: 0; padding-left: 0; }
.cifras dt { color: var(--ink2); }
.cifras dd { margin: 10px 0 2px; display: flex; align-items: center; gap: 8px; font: 700 clamp(1.7rem, 3.4vw, 2.6rem)/1 var(--f-t); letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cifras dd i { font-style: normal; color: var(--ink2); font-weight: 300; margin: 0 .12em; }
.cifras p { margin: 0; font-size: .86rem; color: var(--ink2); }
.cifra-ico { display: inline-flex; }

.portada-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.05fr); gap: 0; margin-top: 40px; }
.col { padding: 0 28px; border-left: 1px solid var(--line); min-width: 0; }
.col:first-child { padding-left: 0; border-left: 0; }
.col-t { color: var(--ink); padding-bottom: 10px; border-bottom: 1px solid var(--ink); margin-bottom: 4px; }
.col-t2 { margin-top: 30px; }
.col-pie { margin: 14px 0 0; font-weight: 600; font-size: .92rem; }
.hoy-toca { list-style: none; margin: 0; padding: 0; }
.hoy-toca li { display: grid; grid-template-columns: 82px minmax(0, 1fr); column-gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.hoy-toca li span { grid-row: span 2; font-size: .8rem; font-weight: 600; color: var(--ink2); padding-top: 2px; }
.hoy-toca li span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c); margin-right: 7px; vertical-align: 1px; }
.hoy-toca strong { font-weight: 700; line-height: 1.3; }
.hoy-toca em { font-style: normal; font-size: .86rem; color: var(--ink2); }
.destacado { display: grid; gap: 10px; align-content: start; align-self: start; padding: 26px 28px 28px; background: var(--acento); color: var(--sobre-acento); text-decoration: none; transition: background .2s; }
.destacado:hover { background: color-mix(in srgb, var(--acento) 88%, #000); }
.destacado-e { padding-bottom: 10px; border-bottom: 1px solid rgb(26 18 0 / .5); }
.destacado strong { font: 800 clamp(2.2rem, 3.6vw, 3.1rem)/.95 var(--f-t); letter-spacing: -.05em; margin-top: 8px; }
.destacado-f { font: italic 400 1.5rem/1.15 var(--f-s); }
.destacado-p { font-size: .95rem; line-height: 1.5; }
.destacado-km { font-size: .82rem; font-weight: 600; opacity: .8; }
.destacado-ir { margin-top: 8px; font-weight: 700; border-top: 1px solid rgb(26 18 0 / .5); padding-top: 12px; }

/* ---------- Avisos ---------- */
.avisos { list-style: none; margin: 0; padding: 0; }
.aviso { display: grid; gap: 3px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.aviso-n { display: inline-flex; align-items: center; gap: 8px; color: var(--c); }
.aviso-n::before { content: ""; width: 9px; height: 9px; background: var(--c); }
.aviso strong { font-weight: 700; font-size: 1.02rem; line-height: 1.3; }
.aviso-x { font-size: .9rem; color: var(--ink2); }
.n-rojo { --c: var(--rojo); } .n-naranja { --c: var(--naranja); } .n-amarillo { --c: var(--amarillo); } .n-info { --c: var(--info); } .n-ok { --c: var(--ok); }

/* ---------- Cabeceras de página ---------- */
.ph { padding: clamp(28px, 5vw, 60px) 0 26px; border-bottom: 1px solid var(--ink); margin-bottom: 26px; }
.ph-in { display: grid; gap: 14px; }
.ph h1 { font: 800 clamp(2.6rem, 7.5vw, 5.8rem)/.92 var(--f-t); letter-spacing: -.055em; max-width: 16ch; }
.ph p { margin: 0; font: italic 400 clamp(1.3rem, 2.4vw, 1.75rem)/1.2 var(--f-s); color: var(--ink2); max-width: 40ch; }
.migas { display: flex; flex-wrap: wrap; gap: 10px; color: var(--ink2); }
.migas a { color: var(--ink2); text-decoration: none; } .migas a:hover { color: var(--ink); }
.migas [aria-current] { color: var(--acento-tx); }

.subnav { display: flex; gap: 24px; overflow-x: auto; margin: -8px 0 32px; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.subnav a { white-space: nowrap; text-decoration: none; padding: 10px 0 12px; color: var(--ink2); font-weight: 500; font-size: .95rem; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.subnav a:hover { color: var(--ink); }
.subnav a[aria-current] { color: var(--ink); border-color: var(--acento); font-weight: 700; }

/* ---------- Secciones ---------- */
.sec { margin-top: clamp(56px, 8vw, 96px); min-width: 0; }
.sh { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-top: 2px solid var(--ink); padding-top: 14px; margin-bottom: 22px; }
.sh h2 { font: 800 clamp(1.7rem, 3.6vw, 2.75rem)/1.02 var(--f-t); letter-spacing: -.045em; }
.ver { font-weight: 600; font-size: .92rem; white-space: nowrap; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.ver:hover { color: var(--acento-tx); }
.dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 48px; }
.dos > * { min-width: 0; }
.dos-ficha { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
.intro { font-size: 1.22rem; line-height: 1.5; max-width: 60ch; margin-top: 0; }
.sep { margin-top: 26px; }

/* ---------- El Parte ---------- */
.parte { display: grid; gap: 6px; align-content: start; min-width: 0; padding-top: 14px; border-top: 1px solid var(--ink); }
.parte header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.parte h3 { margin-top: 4px; font: 800 1.7rem/1.05 var(--f-t); letter-spacing: -.045em; }
.parte h3 a { color: inherit; text-decoration: none; }
.parte-wx { display: flex; align-items: center; gap: 4px; }
.parte-t { font: 600 2.2rem/1 var(--f-t); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.parte-l { margin: 0; font-size: .9rem; color: var(--ink2); }
.parte.corto h3 { font-size: 1.3rem; } .parte.corto .parte-t { font-size: 1.7rem; }
.parte.corto .aviso { padding: 9px 0; }
.partes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 40px 32px; }
.partes > .parte:first-child { grid-column: 1 / -1; }

/* ---------- Planes ---------- */
.filtros { display: flex; gap: 22px; overflow-x: auto; margin-bottom: 4px; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.filtros button { font: 500 .95rem var(--f-t); white-space: nowrap; padding: 8px 0 12px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--ink2); cursor: pointer; }
.filtros button:hover { color: var(--ink); }
.filtros button[aria-pressed="true"] { color: var(--ink); font-weight: 700; border-color: var(--acento); }
.planes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
.plan { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.plan-f { display: grid; justify-items: start; align-content: start; line-height: 1; }
.plan-f span { font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink2); }
.plan-f b { font: 800 2.9rem/.95 var(--f-t); letter-spacing: -.06em; margin: 4px 0; font-variant-numeric: tabular-nums; }
.plan-f.fijo b { font: italic 400 1.6rem/1 var(--f-s); letter-spacing: 0; text-transform: capitalize; margin: 6px 0; }
.plan-b { display: grid; gap: 5px; align-content: start; min-width: 0; }
.plan-cat { display: inline-flex; align-items: center; gap: 8px; color: var(--ink2); }
.plan-cat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.plan h3 { font: 700 1.3rem/1.15 var(--f-t); letter-spacing: -.03em; }
.plan-l { margin: 0; font-size: .92rem; color: var(--ink2); }
.plan-d { margin: 2px 0 0; font-size: .92rem; }
.plan-pie { display: flex; gap: 18px; align-items: baseline; margin-top: 6px; flex-wrap: wrap; font-size: .88rem; }
.precio { font-weight: 700; }
.precio.gratis { color: var(--ok); }
.plan-pie a { font-weight: 600; }
.planes-vacio { grid-column: 1 / -1; padding: 22px 0; }

/* ---------- Tiempo ---------- */
.franja { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(118px, 1fr); overflow-x: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.mini { display: grid; justify-items: start; gap: 4px; padding: 16px 16px 18px; border-left: 1px solid var(--line); color: var(--ink); text-decoration: none; position: relative; transition: background .15s; }
.mini:first-child { border-left: 0; padding-left: 0; }
.mini:hover { background: var(--bg2); }
.mini-n { font-weight: 700; font-size: .88rem; line-height: 1.2; min-height: 2.4em; }
.mini-t { font: 600 2.1rem/1 var(--f-t); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.mini-r { font-size: .8rem; color: var(--ink2); font-variant-numeric: tabular-nums; }
.mini-barra { position: absolute; left: 0; top: -1px; height: 2px; width: calc(20% + var(--calor) * 80%); background: color-mix(in oklab, #3a6df0, #d9361e calc(var(--calor) * 100%)); }
.prev { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.prev-d { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 16px 6px; border-left: 1px solid var(--line); }
.prev-d:first-child { border-left: 0; }
.prev-n { font-weight: 700; text-transform: capitalize; font-size: .9rem; }
.prev-t { display: grid; gap: 4px; justify-items: center; font-size: .82rem; color: var(--ink2); font-variant-numeric: tabular-nums; }
.prev-t b { font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.prev-r { position: relative; width: 4px; height: 56px; background: var(--line); display: block; }
.prev-r i { position: absolute; left: 0; right: 0; background: linear-gradient(#d9361e, #e3a21a, #3a6df0); }
.prev-x { font-size: .76rem; color: var(--ink2); }
.sol-linea { margin-top: 14px; }

/* ---------- Mapa ---------- */
.mapa { margin: 0; display: grid; gap: 12px; }
.mapa-svg svg { width: 100%; height: auto; display: block; }
.m-rio { fill: none; stroke: var(--lluvia); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: .3; }
.m-rio-t { font: italic 400 17px var(--f-s); fill: var(--lluvia); }
.m-zona { font: 700 10px var(--f-t); letter-spacing: .3em; fill: var(--ink2); }
.m-lab { font: 700 14px var(--f-t); fill: var(--ink); paint-order: stroke; stroke: var(--bg); stroke-width: 5px; stroke-linejoin: round; }
.m-tmp { font-weight: 500; fill: var(--ink2); }
.m-dot { stroke: var(--bg); stroke-width: 2.5; transition: transform .2s; transform-box: fill-box; transform-origin: center; }
.m-pt:hover .m-dot, .m-pt:focus .m-dot, .m-pt.sel .m-dot { transform: scale(1.35); }
.m-pt.sel .m-dot { stroke: var(--ink); stroke-width: 2.5; }
.m-pulso { transform-box: fill-box; transform-origin: center; animation: pulso 2s ease-out infinite; }
@keyframes pulso { from { opacity: .55; transform: scale(1); } to { opacity: 0; transform: scale(3); } }
.leyenda { list-style: none; margin: 0; padding: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; border-top: 1px solid var(--line); }
.leyenda a { display: inline-flex; gap: 7px; align-items: center; color: var(--ink); text-decoration: none; font-size: .86rem; }
.leyenda a:hover { text-decoration: underline; }
.leyenda i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.mapa .nota { margin: 6px 0 0; font-size: .84rem; }

/* ---------- Pueblos ---------- */
.tps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 28px; }
.tp { display: grid; gap: 6px; align-content: start; padding: 18px 0 22px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.tp-com { display: inline-flex; align-items: center; gap: 8px; color: var(--ink2); }
.tp-com::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.tp strong { font: 800 1.55rem/1.02 var(--f-t); letter-spacing: -.045em; transition: color .15s; }
.tp:hover strong { color: var(--acento-tx); }
.tp-f { font: italic 400 1.15rem/1.25 var(--f-s); color: var(--ink2); }
.tp-km { font-size: .8rem; color: var(--ink2); }
.ficha { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 18px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.ficha div { padding: 12px 16px 14px; border-left: 1px solid var(--line); }
.ficha div:first-child { border-left: 0; padding-left: 0; }
.ficha dt { color: var(--ink2); }
.ficha dd { margin: 6px 0 0; font-weight: 700; font-size: 1.05rem; }
.ficha dd a { color: inherit; }
.enlaces-pueblo { display: flex; gap: 22px; flex-wrap: wrap; }
.lista-rica { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.lista-rica li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 4px 28px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.lista-rica strong { font: 700 1.15rem/1.25 var(--f-t); letter-spacing: -.02em; }
.lista-rica span { color: var(--ink2); }

/* ---------- Agenda ---------- */
.eventos { list-style: none; margin: 0; padding: 0; }
.ev { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ev time { display: grid; align-content: start; font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink2); }
.ev time b { font: 800 2rem/.95 var(--f-t); letter-spacing: -.05em; color: var(--ink); }
.t-festivo time b { color: var(--rojo); }
.ev div { display: grid; gap: 2px; }
.ev-c { color: var(--ink2); }
.ev strong { font-weight: 700; line-height: 1.3; }
.ev-l { font-size: .88rem; color: var(--ink2); }
.temporadas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.temporadas li { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.temporadas li:nth-child(-n+2) { border-top: 1px solid var(--line); }
.temporadas strong { font: 700 1.12rem/1.2 var(--f-t); letter-spacing: -.025em; }
.temporadas strong a { color: inherit; }
.temporadas li > span:last-child { font-size: .9rem; color: var(--ink2); }

/* ---------- Tablas ---------- */
.tabla-scroll { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 560px; }
.tabla th { text-align: left; color: var(--ink2); padding: 12px 14px 12px 0; border-bottom: 1px solid var(--ink); }
.tabla td { padding: 13px 14px 13px 0; border-bottom: 1px solid var(--line); }
.tabla td:first-child { font-weight: 700; }
.tabla td a { color: var(--ink); text-decoration: none; } .tabla td a:hover { text-decoration: underline; }
.tabla tbody tr:hover { background: var(--bg2); }
.aqi { font-weight: 700; }
.aqi::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.aqi[data-n=bien]::before { background: var(--ok); } .aqi[data-n=reg]::before { background: var(--amarillo); } .aqi[data-n=mal]::before { background: var(--rojo); }

/* ---------- Noticias ---------- */
.titulares { list-style: none; margin: 0; padding: 0; counter-reset: n; }
.titulares li { display: grid; gap: 4px; padding: 16px 0 16px 52px; border-bottom: 1px solid var(--line); position: relative; counter-increment: n; }
.titulares li::before { content: counter(n); position: absolute; left: 0; top: 10px; font: italic 400 2.2rem/1 var(--f-s); color: var(--acento-tx); }
.titulares a { color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1.05rem; line-height: 1.3; } .titulares a:hover { text-decoration: underline; }
.titulares span { font-size: .8rem; color: var(--ink2); }
.aviso-previa { display: grid; gap: 8px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.aviso-previa strong { font: italic 400 1.6rem/1.1 var(--f-s); }
.aviso-previa span { color: var(--ink2); font-size: .94rem; }
.aviso-previa a { font-weight: 700; }

/* ---------- Juegos ---------- */
.juegos { display: grid; border-top: 1px solid var(--line); }
.juego { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 16px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); align-items: center; }
.juego strong { font: 700 1.25rem/1.2 var(--f-t); letter-spacing: -.03em; }
.juego span { grid-column: 1; font: italic 400 1.1rem var(--f-s); color: var(--ink2); }
.juego i { grid-row: 1 / 3; grid-column: 2; font-style: normal; font-size: 1.4rem; transition: transform .2s; }
.juego:hover i { transform: translateX(6px); color: var(--acento-tx); }
.widget { background: var(--bg2); padding: clamp(22px, 4vw, 40px); max-width: 780px; }
.q h3 { font: 800 clamp(1.6rem, 3.4vw, 2.3rem)/1.08 var(--f-t); letter-spacing: -.04em; margin: 16px 0 20px; }
.q-prog { margin: 0; font-size: .8rem; font-weight: 600; color: var(--ink2); }
.q-barra { height: 2px; background: var(--line); margin-top: 10px; } .q-barra i { display: block; height: 100%; background: var(--acento); transition: width .4s; }
.q-ops { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 8px; margin: 14px 0; }
.op { font: 600 1rem var(--f-t); text-align: left; padding: 15px 16px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; transition: border-color .15s; }
.op:hover:not(:disabled) { border-color: var(--ink); }
.op.bien { border-color: var(--ok); box-shadow: inset 4px 0 0 var(--ok); }
.op.mal { border-color: var(--rojo); box-shadow: inset 4px 0 0 var(--rojo); }
.op:disabled { cursor: default; }
.q-exp { min-height: 1.5em; }
.btn { font: 700 .95rem var(--f-t); padding: 13px 22px; border: 0; background: var(--ink); color: var(--bg); cursor: pointer; margin: 8px 8px 0 0; transition: background .15s; }
.btn:hover { background: color-mix(in srgb, var(--ink) 82%, var(--acento)); }
.btn.sec { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn:disabled { opacity: .5; cursor: progress; }
.q-fin { text-align: center; } .q-nota { font: 800 6rem/1 var(--f-t); letter-spacing: -.06em; margin: 0; } .q-nota span { font-size: 2rem; color: var(--ink2); }
.pistas { display: grid; gap: 10px; padding-left: 22px; font-size: 1.08rem; }
.palabra { text-align: center; } .palabra-w { font: italic 400 clamp(3.4rem, 11vw, 6rem)/1 var(--f-s); color: var(--acento-tx); margin: 12px 0; }
.palabra-e { font-style: italic; color: var(--ink2); }
.ruleta { display: grid; gap: 16px; justify-items: center; text-align: center; }
.ruleta-v { width: 100%; padding: 36px 10px; background: var(--acento); color: var(--sobre-acento); }
.ruleta-n { display: inline-block; font: 800 clamp(2rem, 6vw, 3.4rem)/1.02 var(--f-t); letter-spacing: -.05em; }
.salta { animation: salta .12s ease-out; } @keyframes salta { from { transform: translateY(-30%); opacity: .4; } }
.ruleta-r { width: 100%; text-align: left; }
.ruleta-r .destacado { background: var(--bg); color: var(--ink); border-top: 2px solid var(--ink); padding: 18px 0 0; }
.ruleta-r .destacado:hover { background: var(--bg); }
.ruleta-r .mas { font-weight: 700; }
.todas { margin-top: 24px; } .todas summary { cursor: pointer; font-weight: 700; }
.glosario { display: grid; } .glosario > div { padding: 12px 0; border-bottom: 1px solid var(--line); } .glosario dt { font: italic 400 1.5rem var(--f-s); } .glosario dd { margin: 0; color: var(--ink2); }

/* ---------- Servicios ---------- */
.telefonos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); column-gap: 28px; }
.telefonos li { display: grid; gap: 2px; padding: 16px 0; border-top: 1px solid var(--line); }
.tel { font: 800 2rem/1.1 var(--f-t); letter-spacing: -.04em; cursor: pointer; position: relative; width: fit-content; font-variant-numeric: tabular-nums; }
.tel[data-ok]::after { content: attr(data-ok); position: absolute; left: 100%; top: 8px; margin-left: 10px; font: 700 .72rem var(--f-t); background: var(--ink); color: var(--bg); padding: 3px 7px; white-space: nowrap; }
.tel-d { font-size: .88rem; color: var(--ink2); }
.enlaces { display: grid; gap: 8px; padding-left: 20px; }
.prosa { max-width: 66ch; font-size: 1.08rem; } .prosa h2 { font: 800 1.8rem var(--f-t); letter-spacing: -.04em; margin-top: 32px; }

/* ---------- Pie ---------- */
.pie { color: #e9e9e4; margin-top: 40px; background: #111; }
.pie-in { padding-block: 56px calc(48px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; font-size: .92rem; }
.pie h2 { font: 700 .72rem var(--f-t); letter-spacing: .09em; text-transform: uppercase; color: #9d9d96; margin: 0 0 14px; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pie a { color: #e9e9e4; text-decoration: none; } .pie a:hover { color: #fff; text-decoration: underline; text-decoration-color: #e3a21a; }
.pie p { margin: 0; color: #a9a9a2; max-width: 34ch; }
.pie-marca { display: block; font: 800 2.6rem/1 var(--f-t); letter-spacing: -.05em; color: #fff; margin-bottom: 14px; }
.pie-marca em { font: italic 400 1.15em var(--f-s); color: #e3a21a; letter-spacing: 0; }

/* ---------- Movimiento: entradas suaves desde un estado visible ---------- */
.anim .portada h1, .anim .ph h1 { animation: sube .8s cubic-bezier(.16, 1, .3, 1) both; }
.anim .cifras > div, .anim .col, .anim .plan, .anim .mini, .anim .tp, .anim .ev, .anim .aviso, .anim .lista-rica li, .anim .prev-d, .anim .parte, .anim .juego, .anim .temporadas li {
  animation: sube .7s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--i, 0) * 35ms + 80ms); }
.anim .cifras > div:nth-child(2) { animation-delay: 140ms; } .anim .cifras > div:nth-child(3) { animation-delay: 200ms; } .anim .cifras > div:nth-child(4) { animation-delay: 260ms; }
.anim .col:nth-child(2) { animation-delay: 220ms; } .anim .col:nth-child(3) { animation-delay: 320ms; }
.anim .m-dot { animation: brota .5s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--i, 0) * 30ms + 200ms); }
@keyframes sube { from { transform: translateY(16px); opacity: .25; } }
@keyframes brota { from { transform: scale(.2); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- Adaptación ---------- */
@media (max-width: 1080px) {
  .portada-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 40px; }
  .destacado { grid-column: 1 / -1; }
  .col:nth-child(3) { border-left: 0; }
  .tps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pie-in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .nav-top { display: none; } .menu-btn { display: inline-flex; }
  .dos, .dos-ficha { grid-template-columns: minmax(0, 1fr); }
  .planes { grid-template-columns: minmax(0, 1fr); }
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifras > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .cifras > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ficha div:nth-child(3) { border-left: 0; padding-left: 0; }
  .ficha div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .cab-in { padding-block: 13px; }
  .logo small { display: none; }
  .portada-grid { grid-template-columns: minmax(0, 1fr); }
  .col { padding: 0; border-left: 0; }
  .destacado { padding: 22px 20px 24px; }
  .tps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 18px; }
  .tp strong { font-size: 1.3rem; }
  .temporadas { grid-template-columns: minmax(0, 1fr); }
  .temporadas li:nth-child(2) { border-top: 0; }
  .lista-rica li { grid-template-columns: minmax(0, 1fr); }
  .prev { grid-template-columns: repeat(5, minmax(72px, 1fr)); overflow-x: auto; }
  .cifras > div { padding: 14px 0 16px 16px; }
  .cifras dd { font-size: 1.45rem; gap: 6px; }
  .cifras dd i { margin: 0; }
  .plan { grid-template-columns: 58px minmax(0, 1fr); gap: 14px; }
  .plan-f b { font-size: 2.4rem; }
  .pie-in { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   Color sevillano: almagra (fachadas y la Maestranza), albero (el suelo de la Feria y el ruedo)
   y azul de azulejo (Triana). Se usan en filetes, bandas y detalles, nunca en cajas.
   ========================================================= */
:root { --almagra: #b23a1f; --almagra-hondo: #7c2614; --azulejo: #1f4fb8; --verde: #2d7a4c; --albero-suave: #fbf1d9; --almagra-suave: #f8e8e2; --azulejo-suave: #e9eefa; --marca: #7c2614; }
.logo, .sec-planes .sh h2 { color: var(--marca); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --almagra: #f07a5a; --azulejo: #86a6ff; --verde: #5cc18a; --albero-suave: #1d180c; --almagra-suave: #22140f; --azulejo-suave: #111827; --marca: #f1f1ec; } }
:root[data-theme="dark"] { --almagra: #f07a5a; --azulejo: #86a6ff; --verde: #5cc18a; --albero-suave: #1d180c; --almagra-suave: #22140f; --azulejo-suave: #111827; --marca: #f1f1ec; }

/* Franja tricolor bajo la cabecera */
.cab { border-bottom: 0; }
.cab::after { content: ""; display: block; height: 4px; background: linear-gradient(90deg, var(--almagra) 0 33.4%, var(--acento) 33.4% 66.7%, var(--azulejo) 66.7%); }

.nav-top a[aria-current] { border-color: var(--almagra); }
.ticker-in span::before { color: var(--almagra); }

/* Portada */
.fecha span:first-child { color: var(--almagra); font-weight: 600; }
.cifras { border-top: 2px solid var(--almagra); }
.cifras dt { color: var(--almagra); }
.col-t { border-bottom-color: var(--almagra); color: var(--almagra); }
.hoy-toca li span { color: var(--ink); }

/* Secciones con color propio */
.sh { border-top-color: var(--ink); }
.sec-planes .sh { border-top-color: var(--acento); }
.sec-azul .sh { border-top-color: var(--azulejo); }
.sec-verde .sh { border-top-color: var(--verde); }
.sec-almagra .sh { border-top-color: var(--almagra); }
.sec-azul .sh h2 { color: var(--azulejo); } .sec-verde .sh h2 { color: var(--verde); } .sec-almagra .sh h2 { color: var(--almagra); }
.sh { border-top-width: 3px; }

/* Banda albero para los planes (de borde a borde) */
.sec-planes { background: var(--albero-suave); box-shadow: 0 0 0 100vmax var(--albero-suave); clip-path: inset(0 -100vmax); padding-block: 8px 34px; }
.sec-planes .sh { border-top: 0; padding-top: 30px; }

.sec-planes .plan, .sec-planes .filtros { border-color: color-mix(in srgb, var(--acento) 35%, var(--line)); }
.plan-f span:first-child { color: var(--almagra); }
.filtros button[aria-pressed="true"] { border-color: var(--almagra); }
.subnav a[aria-current] { border-color: var(--almagra); }

/* Cabeceras de página según la sección */
.ph { border-bottom: 3px solid var(--azulejo); }
.ph[data-tono="albero"] { border-bottom-color: var(--acento); }
.ph[data-tono="almagra"] { border-bottom-color: var(--almagra); }
.ph[data-tono="verde"] { border-bottom-color: var(--verde); }
.ph .migas [aria-current] { color: var(--almagra); }
.ph h1::after { content: "."; color: var(--acento); }

/* Pueblos, agenda, noticias */
.tp:hover strong { color: var(--almagra); }
.ev time b { color: var(--almagra); }
.t-aviso time b { color: var(--azulejo); }
.titulares li::before { color: var(--almagra); }
.palabra-w { color: var(--almagra); }
.q-barra i { background: var(--almagra); }

/* Pie en almagra, como los muros de la Plaza de España */
.pie { background: var(--almagra-hondo); color: #f6e7df; }
.pie h2 { color: #f2c9b9; }
.pie p { color: #edd6cc; }
.pie a { color: #fff3ec; }

/* ---------- Menú inferior ---------- */
.tabs { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line); padding: 0 max(6px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(6px, env(safe-area-inset-left, 0px)); }
.tabs a, .tabs button { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0 9px; background: none; border: 0; color: var(--ink2); text-decoration: none; font: 600 .7rem/1 var(--f-t); letter-spacing: .02em; cursor: pointer; transition: color .15s; }
.tabs svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tabs a::before { content: ""; position: absolute; top: -1px; left: 28%; right: 28%; height: 3px; background: transparent; transition: background .2s; }
.tabs a[aria-current] { color: var(--almagra); }
.tabs a[aria-current]::before { background: var(--almagra); }
.tabs a[href="/planes/"][aria-current] { color: var(--almagra); }
.tabs a:active, .tabs button:active { transform: scale(.94); }
@media (max-width: 900px) {
  .tabs { display: flex; }
  main { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
  .pie-in { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* =========================================================
   Cartelera visual (inspirada en las agendas de ocio): imagen arriba, fecha encima, precio claro.
   ========================================================= */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.media { position: relative; width: 100%; height: 100%; background: var(--bg2); overflow: hidden; }
.media .arte, .media .foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .5s; }
.media .foto { opacity: 0; } .media .foto.ok { opacity: 1; }
.credito { position: absolute; right: 8px; bottom: 6px; z-index: 2; font-size: .6rem; color: #fff; text-decoration: none; opacity: .85; text-shadow: 0 1px 3px rgb(0 0 0 / .6); }

/* Buscador y atajos */
.buscador { position: relative; display: flex; align-items: center; gap: 12px; max-width: 640px; margin-top: 28px; padding: 0 22px; height: 60px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); box-shadow: 0 10px 30px -12px rgb(17 17 17 / .18); }
.buscador:focus-within { border-color: var(--almagra); }
.buscador > svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--almagra); stroke-width: 2; stroke-linecap: round; }
.buscador input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 500 1.08rem var(--f-t); }
.buscador input::placeholder { color: var(--ink2); }
.buscador-res { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30; background: var(--bg); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 50px -20px rgb(17 17 17 / .3); padding: 8px; display: grid; }
.buscador-res a { display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 12px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--ink); }
.buscador-res a:hover, .buscador-res a:focus { background: var(--bg2); }
.buscador-res span { grid-row: span 2; font: 700 .66rem var(--f-t); letter-spacing: .08em; text-transform: uppercase; color: var(--almagra); padding-top: 3px; }
.buscador-res strong { font-weight: 700; } .buscador-res em { font-style: normal; font-size: .85rem; color: var(--ink2); }
.buscador-res p { margin: 8px 12px; color: var(--ink2); }
.atajos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.atajos a { text-decoration: none; color: var(--ink); font-weight: 600; font-size: .9rem; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); transition: border-color .15s, background .15s; }
.atajos a:hover { border-color: var(--ink); }
.atajos a:first-child { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.portada .selector { margin-top: 22px; }

/* Tarjeta de plan */
.planes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 34px 22px; column-gap: 22px; }
.plan { position: relative; display: grid; grid-template-columns: none; gap: 0; padding: 0; border: 0; align-content: start; }
.sec-planes .plan { border: 0; }
.plan-media { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; }
.plan:hover .media > * { transform: scale(1.045); }
.plan-chip { position: absolute; left: 10px; bottom: 10px; z-index: 2; background: var(--bg); color: var(--ink); font: 800 .72rem/1 var(--f-t); letter-spacing: .05em; text-transform: uppercase; padding: 7px 9px; border-radius: 7px; box-shadow: 0 4px 12px rgb(0 0 0 / .18); }
.fav { position: absolute; top: 10px; right: 10px; z-index: 3; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--bg) 92%, transparent); cursor: pointer; box-shadow: 0 4px 12px rgb(0 0 0 / .18); transition: transform .15s; }
.fav:hover { transform: scale(1.08); }
.fav svg { width: 19px; height: 19px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.fav[aria-pressed="true"] svg { fill: var(--almagra); stroke: var(--almagra); }
.fav[aria-pressed="true"] { animation: late .3s; } @keyframes late { 50% { transform: scale(1.25); } }
.plan-b { padding: 12px 2px 0; gap: 3px; }
.plan h3 { font-size: 1.12rem; line-height: 1.2; }
.plan h3 a { color: var(--ink); text-decoration: none; } .plan h3 a:hover { text-decoration: underline; text-decoration-color: var(--almagra); }
.plan .precio { margin: 4px 0 0; font-weight: 800; font-size: .95rem; background: none; padding: 0; }
.plan .precio.gratis { color: var(--ok); }

/* Carrusel del finde */
.carril-wrap { position: relative; }
.carril { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 22px) / 4); gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; align-items: start; }
.carril::-webkit-scrollbar { display: none; }
.carril > * { scroll-snap-align: start; }
.carril-flechas { position: absolute; right: 0; top: -66px; display: flex; gap: 8px; }
.sec-finde .sh { padding-right: 104px; }
.carril-flechas button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: 1.1rem; cursor: pointer; transition: border-color .15s; }
.carril-flechas button:hover { border-color: var(--ink); }

/* Categorías */
.cats { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; }
.cat { position: relative; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; color: #fff; text-decoration: none; display: grid; align-content: end; padding: 14px; isolation: isolate; }
.cat .arte { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.cat::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(transparent 40%, rgb(0 0 0 / .62)); }
.cat:hover .arte { transform: scale(1.06); }
.cat span { font: 800 1.12rem/1.1 var(--f-t); letter-spacing: -.02em; }
.cat em { font-style: normal; font-size: .78rem; opacity: .85; }

/* Pueblo de la semana con imagen */
.destacado { padding: 0; overflow: hidden; border-radius: 4px; }
.destacado-media { aspect-ratio: 16 / 10; height: auto; }
.destacado:hover .media > * { transform: scale(1.04); }
.destacado-txt { display: grid; gap: 10px; padding: 22px 26px 26px; }

/* Pueblos con imagen */
.tps { row-gap: 30px; }
.tp { border-top: 0; padding: 0; gap: 5px; }
.tp .media { aspect-ratio: 4 / 3; height: auto; border-radius: 12px; margin-bottom: 8px; }
.tp:hover .media > * { transform: scale(1.05); }
.tp-com::before { border-radius: 50%; }

@media (max-width: 1080px) {
  .carril { grid-auto-columns: calc((100% - 2 * 22px) / 3); }
  .cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .carril { grid-auto-columns: 72%; gap: 16px; }
  .carril-flechas { display: none; } .sec-finde .sh { padding-right: 0; }
  .cats { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 40%; overflow-x: auto; scrollbar-width: none; }
  .planes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px; }
}
@media (max-width: 640px) {
  .buscador { height: 54px; padding: 0 18px; }
  .planes { grid-template-columns: minmax(0, 1fr); }
  .cats { grid-auto-columns: 44%; }
  .tps { row-gap: 22px; }
}
.cat .media { position: absolute; inset: 0; z-index: -2; }
.cat .media .arte, .cat .media .foto { z-index: auto; }
.cat:hover .media > * { transform: scale(1.06); }
.cat .credito { display: none; }
.media .foto.ok + .credito { opacity: .85; }

/* Crédito de foto discreto: un pequeño icono que muestra autor y licencia */
.credito { right: 8px; bottom: 8px; top: auto; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: rgb(0 0 0 / .45); color: #fff; font: italic 700 .72rem/1 Georgia, serif; text-shadow: none; opacity: 0; transition: opacity .2s; }
.media:hover .credito, .credito:focus-visible { opacity: .9; }
@media (hover: none) { .credito { opacity: .6; } }

/* Mapa interactivo */
.mapa.vivo .mapa-svg { display: none; }
.mapa-vivo { height: clamp(380px, 58vh, 620px); border-radius: 16px; overflow: hidden; background: #f6f1e7; }
.mapa.vivo .mapa-vivo { display: block; }
.pin { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 5px; border: 0; border-radius: 999px; background: #fff; color: #111; font: 700 12px/1 var(--f-t); box-shadow: 0 2px 10px rgb(0 0 0 / .22); cursor: pointer; white-space: nowrap; transition: transform .15s; }
.pin:hover, .pin.sel { transform: scale(1.08); z-index: 3; }
.pin i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--c); }
.pin b { font-weight: 800; color: #b23a1f; }
.pin.grande { font-size: 13px; padding: 5px 11px 5px 6px; }
.pin.sel { background: #111; color: #fff; } .pin.sel b { color: #f0b53c; }
.pin.alerta i { animation: pulsoPin 1.6s infinite; }
@keyframes pulsoPin { 50% { box-shadow: 0 0 0 2px #fff, 0 0 0 7px color-mix(in srgb, var(--c) 35%, transparent); } }
.maplibregl-popup-content { border-radius: 14px; padding: 14px 16px; box-shadow: 0 14px 40px rgb(0 0 0 / .22); font-family: var(--f-t); }
.pop { display: grid; gap: 3px; color: #111; }
.pop-co { font: 700 .66rem var(--f-t); letter-spacing: .08em; text-transform: uppercase; color: var(--c); }
.pop strong { font: 800 1.2rem/1.1 var(--f-t); letter-spacing: -.03em; }
.pop em { font: italic 400 1rem var(--f-s); color: #555; }
.pop p { margin: 4px 0 0; font-size: .86rem; } .pop p b { font-size: 1.05rem; }
.pop-al { color: #c42d1a; font-weight: 700; }
.pop a { margin-top: 8px; font-weight: 700; color: #b23a1f; text-decoration: none; }
:root[data-theme="dark"] .mapa-vivo canvas { filter: invert(.92) hue-rotate(180deg) saturate(.6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mapa-vivo canvas { filter: invert(.92) hue-rotate(180deg) saturate(.6); } }
/* A poca distancia solo se rotulan las ciudades grandes; al acercarse aparecen todos */
.mapa-vivo:not(.cerca) .pin.peq:not(.sel):not(:hover) { padding: 4px; }
.mapa-vivo:not(.cerca) .pin.peq:not(.sel):not(:hover) span, .mapa-vivo:not(.cerca) .pin.peq:not(.sel):not(:hover) b { display: none; }
.mapa-vivo { background: #e8eddf; }
/* Canales oficiales y redes */
.canales { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.canales h3 { margin-bottom: 4px; }
.canales ul { list-style: none; margin: 0; padding: 0; }
.canales li a { display: block; padding: 11px 0; border-bottom: 1px solid var(--line); font-weight: 600; text-decoration: none; color: var(--ink); }
.canales li a:hover { color: var(--almagra); }
.col .titulares li { padding: 12px 0 12px 40px; } .col .titulares li::before { font-size: 1.7rem; top: 8px; }
.col .titulares a { font-size: .96rem; }
.sec-planes-mini .sh { border-top-color: var(--acento); }
@media (max-width: 640px) { .canales { grid-template-columns: 1fr; gap: 10px; } }