/* ============================================================================
   Apitropia — tema "consola de datos en vivo" (mission control).
   Capa visual propia, sin frameworks. Un color de neón por fuente (--neon),
   fondo con rejilla técnica + glow, tarjetas de cristal y microdetalles vivos.
   ========================================================================== */

/* --------------------------------------------------------------- variables */

:root {
    --sans: "Onest Variable", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Cascadia Code", Consolas, monospace;

    /* Tema noche (por defecto) — cálido, "café/amanecer" */
    --bg: #1b120d;
    --bg-2: #241811;
    --panel: rgba(36, 24, 17, 0.60);
    --panel-solido: #241811;
    --borde: rgba(200, 150, 110, 0.14);
    --borde-fuerte: rgba(200, 150, 110, 0.26);
    --texto: #fbeee3;
    --mut: #c2a794;
    --mut-2: #a68a77;
    --glow-1: #ffa057;
    --glow-2: #ff6f86;
    --acento: #ff8a5c;        /* naranja claro: legible como texto/icono sobre fondo oscuro */
    --acento-solido: #c2410c; /* terracota: fondo con texto blanco (AA) */
    --verde: #34d399;
    --rojo: #fb7185;
    --ambar: #fbbf24;
    --rejilla: rgba(200, 150, 110, 0.06);
    /* Sombra tintada hacia el marrón cálido del fondo, en dos capas (contacto + difusa). */
    --sombra: 0 1px 1px rgba(20, 8, 2, 0.5), 0 16px 40px -22px rgba(20, 8, 2, 0.9);
    --neon: #ff9a5a; /* se sobreescribe por fuente */

    /* Curvas y tiempos de movimiento (review-animations / apple-design). Las CSS de
       serie son demasiado flojas: usamos curvas fuertes y duraciones cortas de UI. */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-suave: cubic-bezier(0.4, 0, 0.2, 1);
    --t-rapido: 130ms;   /* pulsación, hover de color */
    --t-medio: 200ms;    /* la mayoría de transiciones */
    --t-lento: 280ms;    /* movimientos mayores */
    --anillo: color-mix(in srgb, var(--neon) 55%, transparent); /* foco de teclado */
}

:root[data-tema="light"] {
    --bg: #fdf4ea;       /* crema cálida (amanecer) */
    --bg-2: #f7e9da;
    --panel: rgba(255, 253, 251, 0.86);
    --panel-solido: #fffdfb;
    --borde: rgba(120, 70, 30, 0.10);
    --borde-fuerte: rgba(120, 70, 30, 0.20);
    --texto: #2a1d16;
    --mut: #6b574c;      /* 6,9:1 sobre panel claro (antes #836f62 se quedaba en 4,39) */
    --mut-2: #7a6154;    /* mínimo para textos de 11-13 px */
    --glow-1: #ff8a3d;   /* sol */
    --glow-2: #ff546f;   /* coral */
    --acento: #c2410c;
    --acento-solido: #c2410c;
    --verde: #0f6b3d;    /* 5,9:1 (antes #059669 se quedaba en 3,4 para texto) */
    --rojo: #e11d48;
    --ambar: #d97706;
    --rejilla: rgba(120, 70, 30, 0.03);
    --sombra: 0 2px 5px rgba(80, 40, 20, 0.05), 0 16px 34px -22px rgba(120, 60, 20, 0.35);
}

/* Color de neón por fuente (portada, resumen y detalle) */
[data-fuente="luz"],        [data-resumen="luz"]        { --neon: #ffd60a; }
[data-fuente="gasolina"],   [data-resumen="gasolina"]   { --neon: #34d399; }
[data-fuente="demanda"],    [data-resumen="demanda"]    { --neon: #0284c7; }
[data-fuente="mix"],        [data-resumen="mix"]        { --neon: #10b981; }
[data-fuente="aire"],       [data-resumen="aire"]       { --neon: #22d3ee; }
[data-fuente="tiempo"],     [data-resumen="tiempo"]     { --neon: #38bdf8; }
[data-fuente="sol"],        [data-resumen="sol"]        { --neon: #f59e0b; }
[data-fuente="huracanes"],  [data-resumen="huracanes"]  { --neon: #f97316; }
[data-fuente="auroras"],    [data-resumen="auroras"]    { --neon: #d946ef; }
[data-fuente="astronautas"],[data-resumen="astronautas"]{ --neon: #0ea5e9; }
[data-fuente="luna"],       [data-resumen="luna"]       { --neon: #c4b5fd; }
[data-fuente="eclipse"],    [data-resumen="eclipse"]    { --neon: #f59e0b; }
[data-fuente="divisas"],    [data-resumen="divisas"]    { --neon: #2dd4bf; }
[data-fuente="miedo"],      [data-resumen="miedo"]      { --neon: #f472b6; }
[data-fuente="ipc"],        [data-resumen="ipc"]        { --neon: #ef4444; }
[data-fuente="euribor"],    [data-resumen="euribor"]    { --neon: #0891b2; }
[data-fuente="efemerides"], [data-resumen="efemerides"] { --neon: #d97706; }
[data-fuente="co2"],        [data-resumen="co2"]        { --neon: #78716c; }
[data-fuente="boe"],        [data-resumen="boe"]        { --neon: #64748b; }
[data-fuente="festivos"],   [data-resumen="festivos"]   { --neon: #f43f5e; }
[data-fuente="poblacion"],  [data-resumen="poblacion"]  { --neon: #3b82f6; }
[data-fuente="nacimientos"],[data-resumen="nacimientos"]{ --neon: #38bdf8; }
[data-fuente="defunciones"],[data-resumen="defunciones"]{ --neon: #94a3b8; }
[data-fuente="matrimonios"],[data-resumen="matrimonios"]{ --neon: #fb7185; }
[data-fuente="divorcios"],  [data-resumen="divorcios"]  { --neon: #f43f5e; }
[data-fuente="esperanza"],  [data-resumen="esperanza"]  { --neon: #2dd4bf; }
[data-fuente="salario"],    [data-resumen="salario"]    { --neon: #34d399; }
[data-fuente="gastoturistico"],[data-resumen="gastoturistico"]{ --neon: #f59e0b; }
[data-fuente="sociedades"], [data-resumen="sociedades"] { --neon: #818cf8; }
[data-fuente="viajeros"],   [data-resumen="viajeros"]   { --neon: #2dd4bf; }
[data-fuente="montania"],   [data-resumen="montania"]   { --neon: #94a3b8; }
[data-fuente="leido"],      [data-resumen="leido"]      { --neon: #8b5cf6; }
[data-fuente="intercambios"],[data-resumen="intercambios"]{ --neon: #14b8a6; }
[data-fuente="paro"],       [data-resumen="paro"]       { --neon: #e11d48; }
[data-fuente="vivienda"],   [data-resumen="vivienda"]   { --neon: #fb923c; }
[data-fuente="hipotecas"],  [data-resumen="hipotecas"]  { --neon: #65a30d; }
[data-fuente="turismo"],    [data-resumen="turismo"]    { --neon: #5eead4; }
[data-fuente="compraventa"],[data-resumen="compraventa"]{ --neon: #c084fc; }
[data-fuente="pib"],        [data-resumen="pib"]        { --neon: #22c55e; }
[data-fuente="comercio"],   [data-resumen="comercio"]   { --neon: #0d9488; }
[data-fuente="ipi"],        [data-resumen="ipi"]        { --neon: #6366f1; }
[data-fuente="ipri"],       [data-resumen="ipri"]       { --neon: #db2777; }
[data-fuente="confianza"],  [data-resumen="confianza"]  { --neon: #eab308; }
[data-fuente="demografia"], [data-resumen="demografia"] { --neon: #ec4899; }
[data-fuente="borme"],      [data-resumen="borme"]      { --neon: #94a3b8; }
[data-fuente="uv"],         [data-resumen="uv"]         { --neon: #fbbf24; }
[data-fuente="iss"],        [data-resumen="iss"]        { --neon: #06b6d4; }
[data-fuente="coste"],      [data-resumen="coste"]      { --neon: #a855f7; }
[data-fuente="lanzamientos"],[data-resumen="lanzamientos"]{ --neon: #818cf8; }
[data-fuente="bicis"],      [data-resumen="bicis"]      { --neon: #4ade80; }
[data-fuente="bus"],        [data-resumen="bus"]        { --neon: #2563eb; }
[data-fuente="incendios"],  [data-resumen="incendios"]  { --neon: #ea580c; }
[data-fuente="cripto"],     [data-resumen="cripto"]     { --neon: #f7931a; }
[data-fuente="terremotos"], [data-resumen="terremotos"] { --neon: #f59e0b; }
[data-fuente="avisos"],     [data-resumen="avisos"]     { --neon: #fb923c; }
[data-fuente="bolas"],      [data-resumen="bolas"]      { --neon: #fbbf24; }
[data-fuente="asteroides"], [data-resumen="asteroides"] { --neon: #a5b4fc; }
[data-fuente="playas"],     [data-resumen="playas"]     { --neon: #22d3ee; }
[data-fuente="oleaje"],     [data-resumen="oleaje"]     { --neon: #38bdf8; }
[data-fuente="polen"],      [data-resumen="polen"]      { --neon: #a3e635; }
[data-fuente="radiacion"],  [data-resumen="radiacion"]  { --neon: #eab308; }
[data-fuente="nieve"],      [data-resumen="nieve"]      { --neon: #67e8f9; }
[data-fuente="agro"],       [data-resumen="agro"]       { --neon: #a3e635; }
[data-fuente="calima"],     [data-resumen="calima"]     { --neon: #d97706; }
[data-fuente="solar"],      [data-resumen="solar"]      { --neon: #f59e0b; }
[data-fuente="imagen"],     [data-resumen="imagen"]     { --neon: #c084fc; }

/* ------------------------------------------------------------------- base */

* { box-sizing: border-box; }

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

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--sans);
    color: var(--texto);
    background:
        radial-gradient(1100px 560px at 12% -12%, color-mix(in srgb, var(--glow-1) 24%, transparent), transparent 60%),
        radial-gradient(1000px 520px at 92% -6%, color-mix(in srgb, var(--glow-2) 20%, transparent), transparent 58%),
        var(--bg);
    background-attachment: fixed;
    line-height: 1.5;
    /* clip, NUNCA hidden: `overflow-x: hidden` convierte al body en contenedor de scroll
       y con eso la cabecera sticky deja de pegarse (se iba con el scroll). `clip` recorta
       igual el desborde lateral de móvil pero no crea contenedor. */
    overflow-x: clip;
}

/* Rejilla técnica sutil que deriva despacio por detrás de todo */
body::before {
    content: "";
    position: fixed;
    inset: -2px;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(var(--rejilla) 1px, transparent 1px),
        linear-gradient(90deg, var(--rejilla) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse 120% 80% at 50% 0%, #000 55%, transparent 100%);
    animation: deriva 40s linear infinite;
    will-change: transform; /* deriva por GPU (transform), no repintando el fondo */
}

@keyframes deriva {
    to { transform: translate3d(44px, 44px, 0); }
}

/* Tema claro: fondo blanco y aireado con blobs suaves, sin malla técnica (que daba
   aire "de app antigua"). El grid animado se queda solo para el tema noche. */
:root[data-tema="light"] body {
    background:
        radial-gradient(1200px 720px at 12% -12%, #ffe6cf, transparent 55%),
        radial-gradient(1000px 700px at 100% -6%, #ffd9e2, transparent 50%),
        linear-gradient(180deg, #fffaf4 0%, #fdf1e4 55%);
    background-attachment: fixed;
}
:root[data-tema="light"] body::before { display: none; }

a { color: inherit; }

/* Foco de teclado visible y coherente en todo lo interactivo (a11y: WCAG 2.4.7). */
:where(a, button, [role="button"], .tira__item, .pill, .opcion-trivia):focus-visible {
    outline: 2.5px solid var(--acento);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Saltar al contenido: el primer tabulador de la página, para quien navega con teclado
   o lector de pantalla y no quiere recorrer la cabecera en cada página. */
.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 99;
    background: var(--acento-solido);
    color: #fff;
    padding: 10px 16px;
    border-radius: 0 0 10px 0;
    font-weight: 650;
}
.skip:focus { left: 0; }
/* Los controles de formulario (.control) ya tienen su propio anillo de neón en :focus. */

.envoltura {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 1.15rem;
}

/* Etiqueta de telemetría (mono, mayúsculas, espaciada) */
.eti {
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mut);
}

.mut  { color: var(--mut); }
.mut2 { color: var(--mut-2); }
.small { font-size: 0.82rem; }
.mono { font-family: var(--mono); }
.b { font-weight: 700; }
.tnum { font-variant-numeric: tabular-nums; }
.c-verde { color: var(--verde); }
.c-rojo  { color: var(--rojo); }
.c-neon  { color: var(--neon); }
.truncar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Solo para lectores de pantalla (nombres accesibles de cabeceras/iconos). */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------- barra sup */

/* El envoltorio del header se hace sticky (su bloque contenedor es el body, alto);
   la barra vive dentro como capa visual translúcida a ancho completo. */
.envoltura:has(> .barra) {
    position: sticky;
    top: 0;
    z-index: 20;
}

.barra {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.7rem 1.15rem;
    margin: 0 -1.15rem;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    backdrop-filter: blur(12px) saturate(150%);
    /* Borde-edge que aparece solo donde el contenido pasa por debajo del header. */
    border-bottom: 1px solid transparent;
    transition: border-color var(--t-medio) var(--ease-out), background var(--t-medio) var(--ease-out);
}

/* JS añade [data-scrolled] al hacer scroll: el borde inferior se materializa. */
.barra[data-scrolled] {
    border-bottom-color: var(--borde);
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    box-shadow: 0 6px 18px -14px rgba(42, 26, 18, 0.45);
}

/* Al despegarse la cabecera, el valor actual sube a ella: bajes hasta donde bajes,
   la cifra de la que va la página nunca se pierde de vista. */
.head-val {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity var(--t-medio) var(--ease-out), transform var(--t-medio) var(--ease-out);
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}
.barra[data-scrolled] .head-val { opacity: 1; transform: none; }
.head-val b { font-size: 16px; font-weight: 750; letter-spacing: -0.02em; }
.head-val span {
    font-size: 11.5px;
    color: var(--mut-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Destinos: los cuatro sitios a los que se va desde cualquier ficha. */
.dests { display: flex; gap: 3px; flex: none; }
.dests a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 11px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    color: var(--mut);
    white-space: nowrap;
}
.dests a:hover { background: var(--panel-solido); color: var(--texto); }
.dests a[aria-current="page"] { background: var(--panel-solido); color: var(--acento); }

.kbd {
    font-family: var(--mono);
    font-size: 11px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 6px;
    padding: 4px 7px;
    color: var(--mut-2);
}

@media (max-width: 960px) { .dests, .kbd { display: none; } }

.marca {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--mono);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: var(--texto);
}

.marca__logo {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.6rem;
    background: linear-gradient(135deg, var(--glow-1), var(--glow-2));
    color: #fff;
    box-shadow: 0 0 22px -4px var(--glow-1);
}

.marca__logo i { font-size: 1.25rem; }

.marca__barra { color: var(--glow-2); opacity: 0.8; }

.barra__sep { flex: 1; }

/* Indicador LIVE + reloj */
.live {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    white-space: nowrap;              /* "en vivo" nunca parte en dos líneas */
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--verde);
    padding: 0.3rem 0.6rem;
    border: 1px solid color-mix(in srgb, var(--verde) 45%, transparent);
    border-radius: 2rem;
    background: color-mix(in srgb, var(--verde) 12%, transparent);
}

.live__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--verde);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--verde) 70%, transparent);
    animation: latido-dot 1.8s ease-out infinite;
}

@keyframes latido-dot {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--verde) 65%, transparent); }
    70%  { box-shadow: 0 0 0 7px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.reloj {
    font-family: var(--mono);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    color: var(--mut);
    font-variant-numeric: tabular-nums;
}

.icono-btn {
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 0.65rem;
    border: 1px solid var(--borde);
    background: var(--panel);
    color: var(--texto);
    cursor: pointer;
    transition: border-color var(--t-medio) var(--ease-out), transform var(--t-rapido) var(--ease-out), color var(--t-medio);
}

.icono-btn:hover { border-color: var(--borde-fuerte); transform: translateY(-1px); }
.icono-btn:active { transform: scale(0.94); }
.icono-btn i { font-size: 1.2rem; }

.volver {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    color: var(--mut);
    font-family: var(--mono);
    font-size: 0.85rem;
    padding: 0.35rem 0.2rem;
    transition: color var(--t-medio) var(--ease-out);
}
.volver i { transition: transform var(--t-medio) var(--ease-out); }
.volver:hover { color: var(--texto); }
.volver:hover i { transform: translateX(-3px); }

/* ------------------------------------------------------------------- hero */

.hero {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 1.6rem;
    align-items: center;
    text-align: left;
    background: color-mix(in srgb, var(--panel-solido) 70%, transparent);
    border: 1px solid var(--borde);
    border-radius: 1.5rem;
    box-shadow: var(--sombra);
    padding: 1.9rem 2rem;
    margin-top: 1.4rem;              /* separación de la barra superior */
    margin-bottom: 1.4rem;
    overflow: hidden;
}
.hero__col { min-width: 0; }

/* Ilustración de amanecer, enmarcada en su propia caja (así se ve bien). */
.hero__arte {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 1.15rem;
    overflow: hidden;
    border: 1px solid var(--borde);
    background: linear-gradient(180deg, color-mix(in srgb, var(--glow-1) 20%, var(--panel-solido)), color-mix(in srgb, var(--glow-2) 16%, var(--panel-solido)));
}
.hero__escena { position: absolute; inset: 0; }
.hero__escena svg { width: 100%; height: 100%; display: block; }
.hero__pulso { position: absolute; left: 0; right: 0; bottom: 9%; width: 100%; height: 32px; }
@media (max-width: 820px) {
    .hero { grid-template-columns: 1fr; padding: 1.5rem 1.3rem; }
    .hero__arte { aspect-ratio: 16 / 7; order: -1; }
}
.hero__satelite { transform-box: fill-box; transform-origin: center; }
.hero__anillo { transform-box: fill-box; transform-origin: center; stroke-width: 3; opacity: 0; }
.hero__colina--1 { fill: color-mix(in srgb, var(--glow-1) 42%, transparent); }
.hero__colina--2 { fill: color-mix(in srgb, var(--acento) 48%, transparent); }
@media (prefers-reduced-motion: no-preference) {
    /* El satélite flota; los anillos de sonar salen escalonados. */
    .hero__satelite { animation: satBob 6s ease-in-out infinite; }
    .hero__anillo--1 { animation: sonar 3.2s ease-out infinite; }
    .hero__anillo--2 { animation: sonar 3.2s ease-out infinite 1.07s; }
    .hero__anillo--3 { animation: sonar 3.2s ease-out infinite 2.14s; }
}
@keyframes satBob {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%      { transform: translateY(-10px) rotate(3deg); }
}
@keyframes sonar {
    0%   { transform: scale(0.5); opacity: 0.7; }
    70%  { opacity: 0.16; }
    100% { transform: scale(2.7); opacity: 0; }
}

.hero__pico {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mut);
    padding: 0.32rem 0.7rem;
    border: 1px solid var(--borde);
    border-radius: 2rem;
    background: var(--panel);
    margin-bottom: 1.1rem;
}

.hero__titulo {
    margin: 0 0 0.9rem;
    font-size: clamp(2.1rem, 5.2vw, 3.4rem);
    font-weight: 800;
    line-height: 1.1;              /* leading tenso para display (apple: grande = leading corto) */
    letter-spacing: -0.03em;       /* ≥ -0.04em: tenso pero sin que las letras se toquen */
    text-wrap: balance;            /* líneas equilibradas en el titular */
    padding-bottom: 0.15em; /* aire para tildes/descendentes, que no se recorten */
}

.hero__brillo {
    /* Dos tonos de acento en vez del arcoíris: más serio y moderno. */
    background: linear-gradient(90deg, var(--acento), var(--glow-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* Al partir en dos líneas, WebKit recorta el degradado: clone lo aplica por línea */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

@keyframes brillo { to { background-position: 250% center; } }

/* Latido de firma del hero (posicionado por el bloque .hero de arriba). */
.hero__pulso-linea {
    fill: none; stroke: url(#pulsoGrad); stroke-width: 2.5;
    stroke-linecap: round; stroke-linejoin: round;
}
@media (prefers-reduced-motion: no-preference) {
    .hero__pulso-linea {
        stroke-dasharray: 1400; stroke-dashoffset: 1400;
        animation: pulsoDibuja 3s var(--ease-out) forwards;
    }
}
@keyframes pulsoDibuja { to { stroke-dashoffset: 0; } }
.hero__pulso-punto { filter: drop-shadow(0 0 7px #ff546f); }
@media (prefers-reduced-motion: reduce) { .hero__pulso-punto { display: none; } }

.hero__texto {
    position: relative;
    overflow: hidden;
    font-size: clamp(1.15rem, 2.1vw, 1.42rem);
    line-height: 1.7;
    color: var(--texto);
    max-width: none;
    margin: 0;
    font-weight: 450;
    padding: 1.6rem 2rem 1.5rem;
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: 1.1rem;
    box-shadow: 0 6px 22px rgba(15, 23, 42, 0.06);
}

/* Barra de acento con el degradado del hero. */
.hero__texto::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ffd60a, #fb7185, #b794ff, #22d3ee, #34d399);
    background-size: 250% auto;
    animation: brillo 7s linear infinite;
}

.hero__texto strong {
    color: var(--texto);
    font-weight: 750;
}

/* Segundo párrafo del hero: texto de apoyo, sin caja ni barra de acento. */
.hero__texto--sec {
    margin-top: 0.9rem;
    padding: 0 0.15rem;
    background: none;
    border: 0;
    box-shadow: none;
    overflow: visible;
    font-size: clamp(0.98rem, 1.7vw, 1.1rem);
    line-height: 1.65;
    color: var(--mut);
}
.hero__texto--sec::before { display: none; }
.hero__texto--sec strong { color: var(--texto); font-weight: 650; }

/* Palabras clave con icono de color dentro de la frase. */
.hero__kw {
    font-weight: 700;
    /* Subrayado que se despliega al pasar el cursor, en el color de la palabra. */
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    transition: background-size var(--t-lento) var(--ease-out);
}

.hero__kw i {
    margin-right: 0.22rem;
    font-size: 0.9em;
    vertical-align: -0.08em;
    display: inline-block;
    transition: transform var(--t-medio) var(--ease-out);
}

/* Delight descubrible: subrayado + saltito del icono. Solo con puntero fino (no en táctil). */
@media (hover: hover) {
    .hero__kw:hover { background-size: 100% 2px; }
    .hero__kw:hover i { transform: translateY(-2px) scale(1.18); }
}

/* Un único acento para todas las palabras clave (antes cada una de un color): más sobrio. */
.hero__kw, .hero__kw i,
.hero__kw--luz, .hero__kw--luz i,
.hero__kw--gas, .hero__kw--gas i,
.hero__kw--sky, .hero__kw--sky i,
.hero__kw--eco, .hero__kw--eco i,
.hero__kw--soc, .hero__kw--soc i { color: var(--acento); }

.hero__datos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.6rem;
}

.hero__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;             /* cada pill en una línea: la fila queda cuadrada */
    font-size: 0.98rem;
    font-weight: 650;
    color: var(--texto);
    padding: 0.55rem 1rem;
    border: 1px solid var(--borde);
    border-radius: 2rem;
    background: var(--panel);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

.hero__chip {
    transition: transform var(--t-medio) var(--ease-out), border-color var(--t-medio) var(--ease-out), box-shadow var(--t-medio) var(--ease-out);
}

.hero__chip i {
    font-size: 1.2rem;
    color: var(--neon, #22d3ee);
    transition: transform var(--t-medio) var(--ease-out);
}

@media (hover: hover) {
    .hero__chip:hover {
        transform: translateY(-2px);
        border-color: color-mix(in srgb, var(--neon, #22d3ee) 40%, var(--borde));
        box-shadow: var(--sombra);
    }
    .hero__chip:hover i { transform: scale(1.18); }
}

/* ----------------------------------------------------------- tira resumen */

/* KPIs destacados en vivo (portada). */
.kpis { margin-bottom: 2rem; }
.kpis__cab { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.kpis__cab .kpis__titulo { margin: 0; }
.zona-btn {
    font: inherit; font-weight: 700; font-size: 0.85rem; cursor: pointer;
    display: inline-flex; align-items: center; gap: 0.4rem;
    color: var(--acento);
    background: color-mix(in srgb, var(--acento) 10%, var(--panel-solido));
    border: 1px solid color-mix(in srgb, var(--acento) 22%, transparent);
    border-radius: 999px; padding: 0.4rem 0.85rem;
    transition: border-color var(--t-rapido) var(--ease-out), background var(--t-rapido) var(--ease-out);
}
.zona-btn:hover { border-color: var(--acento); }
.zona-btn--activa { color: #fff; background: var(--acento-solido); border-color: transparent; }
.zona-btn i { font-size: 1rem; }
/* Aviso la primera vez: la burbuja de "Tu zona" late hasta que la usas. */
.zona-btn--nuevo { animation: zonaLate 1.8s ease-in-out infinite; }
@keyframes zonaLate {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acento) 40%, transparent); }
    50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--acento) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .zona-btn--nuevo { animation: none; } }

/* En la home, las destacadas no llevan chincheta (Fijados vive en /fuentes). */
.grupo--home-dest .tarjeta__fijar { display: none; }
.kpis__titulo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.9rem;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mut);
}

.tira {
    display: grid;
    grid-template-columns: repeat(6, 1fr);   /* 12 KPIs = 2 filas exactas, bien cuadradas */
    gap: 0.9rem;
}
@media (max-width: 1200px) { .tira { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .tira { grid-template-columns: repeat(2, 1fr); } }

.tira__item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
    color: inherit;
    padding: 1rem 1.1rem;
    border: 1px solid var(--borde);
    border-radius: 1.1rem;
    background: var(--panel-solido);
    box-shadow: var(--sombra);
    transition: transform var(--t-medio) var(--ease-out), border-color var(--t-medio) var(--ease-out), box-shadow var(--t-medio) var(--ease-out);
}
.tira__item:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--neon) 42%, var(--borde));
    box-shadow: var(--sombra), 0 20px 40px -24px color-mix(in srgb, var(--neon) 55%, transparent);
}
.tira__item:active { transform: translateY(-1px) scale(0.99); }

.tira__ico {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    flex: 0 0 auto;
    color: var(--neon);
    background: color-mix(in srgb, var(--neon) 16%, var(--panel-solido));
}
.tira__txt { min-width: 0; display: flex; flex-direction: column; }
.tira__eti { font-size: 0.8rem; font-weight: 600; color: var(--mut); }
.tira__valor {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tira__sufijo { font-size: 0.78rem; color: var(--mut); }

/* Buscador global + accesos prominentes de la portada. */
.explora { display: flex; flex-direction: column; gap: 0.9rem; margin: 0 0 1.6rem; }
.buscar-home {
    display: flex; align-items: center; gap: 0.6rem;
    background: var(--panel-solido); border: 1px solid var(--borde);
    border-radius: 1rem; padding: 0.65rem 0.9rem; box-shadow: var(--sombra);
}
.buscar-home:focus-within { border-color: var(--acento); }
.buscar-home > i { color: var(--mut); font-size: 1.2rem; }
.buscar-home input { flex: 1; border: 0; background: none; font: inherit; font-size: 1.02rem; color: var(--texto); outline: none; min-width: 0; }
.buscar-home__btn { font: inherit; font-weight: 700; cursor: pointer; border: 0; border-radius: 0.75rem; padding: 0.55rem 1.1rem; color: #fff; background: var(--acento-solido); flex: 0 0 auto; }
.buscar-home__btn:hover { filter: brightness(1.07); }
/* Accesos como fichas claras: icono + qué es + una explicación corta. */
.acciones { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.accion {
    flex: 1 1 190px;
    display: flex; align-items: center; gap: 0.75rem;
    text-align: left; text-decoration: none; color: var(--texto);
    background: var(--panel-solido); border: 1px solid var(--borde); border-radius: 1rem;
    padding: 0.85rem 1rem; box-shadow: var(--sombra);
    transition: transform var(--t-rapido) var(--ease-out), border-color var(--t-rapido) var(--ease-out);
}
.accion:hover { transform: translateY(-2px); border-color: var(--borde-fuerte); }
.accion i { color: var(--acento); font-size: 1.5rem; flex: 0 0 auto; }
.accion__txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.accion__tit { font-weight: 700; font-size: 0.98rem; }
.accion__sub { font-weight: 500; font-size: 0.78rem; color: var(--mut); margin-top: 0.12rem; }
.accion--primaria { color: #fff; background: linear-gradient(135deg, var(--glow-1), var(--acento-solido)); border-color: transparent; }
.accion--primaria i { color: #fff; }
.accion--primaria .accion__sub { color: rgba(255, 255, 255, 0.9); }

/* CTA "ver todas las fuentes" (portada) y cabecera de /fuentes. */
.ver-todas { text-align: center; margin: 0.5rem 0 2.5rem; }
.boton-todas {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 800;
    font-size: 1.05rem;
    color: #fff;
    text-decoration: none;
    padding: 0.85rem 1.6rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--glow-1), var(--acento-solido));
    box-shadow: 0 12px 30px -14px var(--acento);
    transition: transform var(--t-rapido) var(--ease-out), box-shadow var(--t-rapido) var(--ease-out);
}
.boton-todas:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -14px var(--acento); }
.boton-todas:active { transform: translateY(0) scale(0.98); }
.pagina-titulo {
    display: flex; align-items: center; gap: 0.6rem;
    font-size: clamp(1.7rem, 4vw, 2.3rem); font-weight: 800; letter-spacing: -0.02em;
    margin: 0.5rem 0 0.3rem;
}
.pagina-titulo i { color: var(--acento); }
.pagina-titulo__n { font-family: var(--mono); font-size: 1rem; font-weight: 700; color: #fff; background: var(--acento-solido); padding: 0.15rem 0.6rem; border-radius: 1rem; }
.pagina-sub { color: var(--mut); margin: 0 0 1.4rem; font-size: 1.05rem; }

/* Mapa de España: silueta real coloreada por temperatura. */
.mapa-esp2 { margin-bottom: 2.3rem; }
.mapa-esp2__cab { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.mapa-esp2__cab .kpis__titulo { margin: 0; }
.mapa-esp2__toggle { display: inline-flex; gap: 0.25rem; background: var(--panel-solido); border: 1px solid var(--borde); border-radius: 999px; padding: 0.25rem; box-shadow: var(--sombra); }
.mapa-tg {
    font: inherit; font-weight: 700; font-size: 0.85rem; cursor: pointer;
    border: 0; background: none; color: var(--mut);
    padding: 0.42rem 0.85rem; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 0.35rem;
    transition: color var(--t-rapido) var(--ease-out), background var(--t-rapido) var(--ease-out);
}
.mapa-tg.activa { background: var(--acento-solido); color: #fff; }
.mapa-tg:hover:not(.activa) { color: var(--texto); }

/* Reproductor de las últimas 24 h del mapa. */
.mapa-play { display: flex; align-items: center; gap: 0.7rem; max-width: 660px; margin: 0.8rem auto 0; }
.mapa-play__btn {
    flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: 50%;
    border: 0; background: var(--acento-solido); color: #fff; cursor: pointer;
    display: grid; place-items: center; font-size: 1.1rem;
    transition: filter var(--t-rapido) var(--ease-out), transform var(--t-rapido) var(--ease-out);
}
.mapa-play__btn:hover { filter: brightness(1.07); }
.mapa-play__btn:active { transform: scale(0.94); }
/* El alto va a 44 px aunque la barra se dibuje fina: lo que se arrastra con el dedo
   es el control entero, no la línea. */
.mapa-play__slider { flex: 1; accent-color: var(--acento); cursor: pointer; height: 44px; }
.mapa-play__hora { flex: 0 0 auto; font-family: var(--mono); font-size: 0.82rem; font-weight: 700; color: var(--mut); min-width: 4rem; text-align: right; }
.mapa-esp2__lienzo { position: relative; max-width: 660px; margin: 0 auto; }
.mapa-esp2__svg { width: 100%; height: auto; display: block; overflow: visible; }
.mapa-r {
    fill: var(--borde-fuerte);
    stroke: var(--panel-solido);
    stroke-width: 1.2;
    stroke-linejoin: round;
    transition: fill 0.45s var(--ease-out), filter 0.18s var(--ease-out);
    cursor: pointer;
}
.mapa-r:hover, .mapa-r.activa { filter: brightness(1.13) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3)); }
.mapa-esp2__caja { fill: none; stroke: var(--borde-fuerte); stroke-dasharray: 4 5; opacity: 0.5; }
.mapa-r__label {
    fill: #fff;
    font-family: var(--sans);
    font-size: 21px;
    font-weight: 800;
    text-anchor: middle;
    pointer-events: none;
    paint-order: stroke;
    stroke: rgba(0, 0, 0, 0.30);
    stroke-width: 3.4px;
    stroke-linejoin: round;
}
/* Tooltip bonito del mapa. */
.mapa-tt {
    position: absolute;
    z-index: 6;
    pointer-events: none;
    transform: translate(-50%, calc(-100% - 12px));
    background: var(--panel-solido);
    color: var(--texto);
    border: 1px solid var(--borde);
    border-radius: 0.8rem;
    box-shadow: var(--sombra);
    padding: 0.55rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 8.5rem;
    white-space: nowrap;
}
.mapa-tt[hidden] { display: none; }
.mapa-tt__nom { font-weight: 700; font-size: 0.85rem; color: var(--mut); }
.mapa-tt__val { font-size: 1.7rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mapa-tt__mm { font-size: 0.78rem; font-weight: 700; color: var(--mut); }
.mapa-tt__mm:empty { display: none; }
.mapa-tt__pie { font-size: 0.74rem; font-weight: 700; }
.mapa-tt::after {
    content: "";
    position: absolute;
    left: 50%; bottom: -6px;
    transform: translateX(-50%) rotate(45deg);
    width: 12px; height: 12px;
    background: var(--panel-solido);
    border-right: 1px solid var(--borde);
    border-bottom: 1px solid var(--borde);
}

/* Mapa de España por temperatura (mosaico de comunidades). */
.mapa-esp { margin-bottom: 2.3rem; }
.mapa-esp__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.45rem;
    max-width: 560px;
}
.mapa-esp__tile {
    aspect-ratio: 1;
    border-radius: 0.7rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    color: #fff;
    background: var(--borde-fuerte);
    font-weight: 800;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
    transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}
.mapa-esp__tile:hover { transform: scale(1.1); box-shadow: var(--sombra); }
.mapa-esp__ab { font-size: 0.62rem; opacity: 0.92; letter-spacing: 0.02em; }
.mapa-esp__t { font-size: 1.05rem; line-height: 1; font-variant-numeric: tabular-nums; }
.mapa-esp__leyenda { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.8rem; font-size: 0.78rem; color: var(--mut); flex-wrap: wrap; }
.mapa-esp__esc { width: 130px; height: 10px; border-radius: 6px; background: linear-gradient(90deg, #2563eb, #14b8a6, #22c55e, #eab308, #f59e0b, #dc2626); }
.mapa-esp__nota { color: var(--mut-2); }
@media (max-width: 560px) {
    .mapa-esp__grid { max-width: 100%; }
    .mapa-esp__ab { font-size: 0.55rem; }
    .mapa-esp__t { font-size: 0.9rem; }
}

[data-cargando] .tira__valor { color: var(--mut-2); animation: pulso 1.2s ease-in-out infinite; }

@keyframes pulso { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.85; } }

/* --------------------------------------------------------------- tarjetas */

.rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
    gap: 1.15rem;
    padding-bottom: 2.5rem;
}
.rejilla > .tarjeta--ancha { grid-column: span 2; }
/* En la selección de la portada todas las tarjetas van iguales (12 → filas cuadradas). */
.rejilla--home > .tarjeta--ancha { grid-column: auto; }

.tarjeta {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Altura reservada: los cuatro estados (dato, cargando, fallo, sin resultados)
       ocupan lo mismo. La tarjeta no crece cuando llega el dato porque nunca fue más
       pequeña; es lo que quita el salto de diseño (CLS) al recorrer la página. */
    min-height: 290px;
    border: 1px solid var(--borde);
    border-radius: 1.15rem;
    /* Superficie sólida y limpia (sin blur: 41 tarjetas con backdrop-filter atascaban
       el scroll). El color de cada fuente entra como acento, no como fondo. */
    background: var(--panel-solido);
    box-shadow: var(--sombra);
    overflow: hidden;
    content-visibility: auto;           /* no renderiza las tarjetas fuera de pantalla */
    /* Alto estimado de las que aún no se han pintado. Con 280 px se quedaba muy corto
       (van de 290 a 525) y la barra de scroll mentía: pulsar Fin no llegaba al final. */
    contain-intrinsic-size: auto 400px;
    transition: transform var(--t-lento) var(--ease-out), border-color var(--t-lento) var(--ease-out), box-shadow var(--t-lento) var(--ease-out);
}

/* Franja de neón superior: apagada en reposo (look limpio), se enciende al pasar. */
.tarjeta::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--neon), transparent);
    opacity: 0;
    transition: opacity var(--t-lento) var(--ease-out);
}

.tarjeta:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--neon) 35%, var(--borde));
    box-shadow: var(--sombra), 0 22px 48px -28px color-mix(in srgb, var(--neon) 60%, rgba(20, 26, 38, 0.6));
}
.tarjeta:hover::before { opacity: 0.95; }

.tarjeta--ancha { grid-column: span 2; }

.tarjeta__cab {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1rem 1.1rem 0.85rem;
}

.tarjeta__ico {
    position: relative;
    display: grid;
    place-items: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;                 /* burbuja de color por fuente (identidad "amanecer") */
    color: var(--neon);
    background: color-mix(in srgb, var(--neon) 16%, var(--panel-solido));
    flex: 0 0 auto;
    transition: transform var(--t-lento) var(--ease-out);
}
/* Anillo que late alrededor de la burbuja (datos vivos). */
@media (prefers-reduced-motion: no-preference) {
    .tarjeta__ico::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 2px solid var(--neon);
        opacity: 0.35;
        animation: burbujaLate 2.8s ease-out infinite;
    }
}
@keyframes burbujaLate {
    0% { transform: scale(1); opacity: 0.4; }
    70%, 100% { transform: scale(1.5); opacity: 0; }
}
.tarjeta:hover .tarjeta__ico { transform: scale(1.08) rotate(-6deg); }

.tarjeta__ico i { font-size: 1.3rem; }

.tarjeta__titulo { font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; line-height: 1.15; margin: 0; }

.tarjeta__cab-sep { flex: 1; }

.tarjeta__estado { color: var(--rojo); font-size: 0.95rem; display: inline-flex; }
.tarjeta__estado:empty { display: none; }
.tarjeta__estado[role="button"] {
    cursor: pointer;
    border-radius: 0.35rem;
    transition: transform var(--t-rapido) var(--ease-out);
}
.tarjeta__estado[role="button"]:hover { transform: scale(1.12); }
.tarjeta__estado[role="button"]:focus-visible {
    outline: 2px solid var(--anillo);
    outline-offset: 2px;
}
/* Pie en alerta: la hora del último dato en rojo, para que "desde cuándo" se lea sin hover. */
.tarjeta__pie--alerta { color: var(--rojo); font-weight: 600; }
.cabecera-detalle__estado[role="button"] { cursor: pointer; border-radius: 0.35rem; }
.cabecera-detalle__estado[role="button"]:focus-visible { outline: 2px solid var(--anillo); outline-offset: 2px; }
.detalle-pie--alerta { color: var(--rojo); font-weight: 600; }

/* Botón de fijar (favoritos): toma el color neón de la propia tarjeta al activarse. */
.tarjeta__fijar {
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    padding: 0;
    background: none;
    border: 0;
    color: var(--mut-2);
    cursor: pointer;
    border-radius: 0.4rem;
    transition: color var(--t-medio) var(--ease-out), transform var(--t-rapido) var(--ease-out);
}
.tarjeta__fijar i { transition: transform var(--t-medio) var(--ease-out); }
.tarjeta__fijar:hover { color: var(--neon, #22d3ee); }
.tarjeta__fijar:active { transform: scale(0.9); }
.tarjeta__fijar[aria-pressed="true"] { color: var(--neon, #22d3ee); }
.tarjeta__fijar[aria-pressed="true"] i { transform: rotate(45deg); }

/* Sección Fijados */
[data-fijados][hidden] { display: none; }

/* Fijados: sección destacada (marco cálido de acento) para que resalte. */
.grupo--fijados {
    background: linear-gradient(180deg, color-mix(in srgb, var(--acento) 9%, var(--panel-solido)), color-mix(in srgb, var(--glow-2) 7%, var(--panel-solido)));
    border: 1px solid color-mix(in srgb, var(--acento) 26%, var(--borde));
    border-radius: 1.35rem;
    padding: 1.3rem 1.4rem 0.4rem;
    box-shadow: var(--sombra);
    margin-bottom: 2.4rem;
}
.grupo--fijados .grupo__titulo { border-bottom-color: color-mix(in srgb, var(--acento) 22%, var(--borde)); }
.grupo--fijados .grupo__titulo i {
    color: #fff;
    background: linear-gradient(135deg, var(--glow-1), var(--acento-solido));
    border-color: transparent;
}
.grupo--fijados .grupo__contador {
    color: #fff;
    background: var(--acento-solido);
    border-color: transparent;
}

.tarjeta__ir {
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.5rem;
    color: var(--mut);
    text-decoration: none;
    transition: color var(--t-medio) var(--ease-out), background var(--t-medio) var(--ease-out), transform var(--t-rapido) var(--ease-out);
}
.tarjeta__ir i { transition: transform var(--t-medio) var(--ease-out); }
.tarjeta__ir:hover { color: var(--neon); background: color-mix(in srgb, var(--neon) 12%, transparent); }
.tarjeta:hover .tarjeta__ir i { transform: translateX(2px); }
.tarjeta__ir:active { transform: scale(0.9); }

/* Botones de acción de la cabecera (compartir, fijar): mismo tamaño y estilo. */
.tarjeta__accion {
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    padding: 0;
    background: none;
    border: 0;
    color: var(--mut-2);
    cursor: pointer;
    border-radius: 0.4rem;
    transition: color var(--t-medio) var(--ease-out), transform var(--t-rapido) var(--ease-out);
}
.tarjeta__accion:hover { color: var(--neon, #22d3ee); }
.tarjeta__accion:active { transform: scale(0.9); }
.tarjeta__accion:focus-visible { outline: 2px solid var(--anillo); outline-offset: 2px; }

/* Botón grande "Ver detalle": el acceso claro al detalle de cada módulo (la flechita de
   la cabecera no era evidente para todo el mundo). */
.tarjeta__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin: 0.2rem 1.1rem 0.55rem;
    padding: 0.72rem 1rem;
    border-radius: 0.85rem;
    border: 1.5px solid color-mix(in srgb, var(--acento) 38%, var(--borde));
    background: color-mix(in srgb, var(--acento) 7%, transparent);
    color: var(--acento);
    font: inherit;
    font-weight: 700;
    font-size: 0.95rem;
    text-align: center;
    text-decoration: none;
    transition: background var(--t-medio) var(--ease-out), color var(--t-medio) var(--ease-out),
                border-color var(--t-medio) var(--ease-out), transform var(--t-rapido) var(--ease-out);
}
.tarjeta__cta:hover { background: var(--acento-solido); color: #fff; border-color: transparent; transform: translateY(-1px); }
.tarjeta__cta:active { transform: translateY(0) scale(0.99); }
.tarjeta__cta i { transition: transform var(--t-medio) var(--ease-out); }
.tarjeta__cta:hover i { transform: translateX(3px); }
/* La flechita pequeña de la cabecera se retira: la sustituye la CTA grande. */
.tarjeta__ir { display: none; }

/* Cuerpo de altura FIJA (mín = máx): el esqueleto ocupa exactamente lo que ocupará
   el dato, así que la tarjeta no salta al cargar. Las tarjetas muy largas (listas,
   tablas) se recortan con un desvanecido; el contenido completo va en el detalle. */
.tarjeta__cuerpo {
    padding: 0.35rem 1.1rem 1.1rem;
    flex: 1;
    min-height: 16rem;
    max-height: 16rem;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent);
    mask-image: linear-gradient(180deg, #000 86%, transparent);
}

.tarjeta__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--borde);
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    color: var(--mut-2);
    min-height: 1.9rem;
}
/* Crédito de la fuente (atribución con enlace, requisito de uso comercial de varias APIs) */
.tarjeta__fuente {
    color: var(--mut-2);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    transition: color var(--t-medio) var(--ease-out);
}
.tarjeta__fuente:hover { color: var(--neon); }
.tarjeta__pie [data-pie] { flex: none; }

/* Monetización: CTA de afiliado (tarjeta y detalle) y donación. Ocultos si no hay config. */
.tarjeta__aff {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 0 0.9rem 0.7rem;
    padding: 0.5rem 0.7rem;
    border-radius: 0.6rem;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    color: #06101f;
    background: color-mix(in srgb, var(--neon) 85%, white);
    border: 1px solid color-mix(in srgb, var(--neon) 55%, transparent);
    transition: transform var(--t-medio) var(--ease-out), filter var(--t-medio) var(--ease-out);
}
.tarjeta__aff:hover { transform: translateY(-1px); filter: brightness(1.06); }
.tarjeta__aff i { font-size: 0.95rem; }

.aff-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
    padding: 0.85rem 1.1rem;
    border-radius: 0.8rem;
    text-decoration: none;
    font-weight: 700;
    color: #06101f;
    background: linear-gradient(90deg, color-mix(in srgb, var(--neon) 88%, white), color-mix(in srgb, var(--neon) 68%, white));
    border: 1px solid color-mix(in srgb, var(--neon) 50%, transparent);
    transition: transform var(--t-medio) var(--ease-out), filter var(--t-medio) var(--ease-out);
}
.aff-banner:hover { transform: translateY(-1px); filter: brightness(1.05); }

.donacion { color: var(--neon); text-decoration: none; font-weight: 600; }
.donacion:hover { text-decoration: underline; }

/* Subtítulo indexable de la tarjeta (SEO + contexto para el lector). */
.tarjeta__sub {
    margin: 0;
    padding: 0 1.1rem 0.2rem; /* alineado con el cuerpo; bajo la cabecera sin divisoria */
    color: var(--mut);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Texto introductorio y FAQ de la página de detalle (contenido SEO servido). */
.detalle-intro {
    margin: 0 0 1.1rem;
    max-width: 70ch;
    color: var(--mut);
    font-size: 1rem;
    line-height: 1.55;
}
.faq {
    margin: 1.6rem 0 0.5rem;
    max-width: 70ch;
}
.faq__titulo {
    margin: 0 0 0.7rem;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.faq__item {
    border: 1px solid var(--borde);
    border-radius: 0.7rem;
    background: color-mix(in srgb, var(--panel-solido) 88%, transparent);
    margin-bottom: 0.6rem;
    overflow: hidden;
}
.faq__q {
    cursor: pointer;
    padding: 0.85rem 1rem;
    font-weight: 700;
    list-style: none;
    position: relative;
    padding-right: 2.2rem;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
    content: "+";
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--neon);
    font-weight: 800;
}
.faq__item[open] .faq__q::after { content: "−"; }
.faq__a {
    margin: 0;
    padding: 0 1rem 0.95rem;
    color: var(--mut);
    line-height: 1.55;
}

/* Enlazado interno "Ver también" (fuentes de la misma categoría). */
.relacionadas { margin: 1.8rem 0 0.5rem; }
.relacionadas__titulo {
    margin: 0 0 0.7rem;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.relacionadas__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.relacionadas__lista a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--borde);
    border-radius: 0.6rem;
    background: color-mix(in srgb, var(--panel-solido) 88%, transparent);
    color: var(--mut-2);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: color var(--t-medio) var(--ease-out), border-color var(--t-medio) var(--ease-out);
}
.relacionadas__lista a:hover { color: var(--neon); border-color: color-mix(in srgb, var(--neon) 45%, transparent); }
.relacionadas__lista i { color: var(--neon); font-size: 0.9rem; }

/* Latido del borde al refrescar */
.tarjeta.actualizada { animation: latido-tarjeta 0.9s ease; }

@keyframes latido-tarjeta {
    0%   { box-shadow: var(--sombra), 0 0 0 0 color-mix(in srgb, var(--neon) 60%, transparent); }
    30%  { box-shadow: var(--sombra), 0 0 34px -6px var(--neon); }
    100% { box-shadow: var(--sombra), 0 0 0 0 transparent; }
}

/* --------------------------------------------------------- primitivas dato */

/* Cifra principal de la tarjeta (el KPI del prototipo). */
.dato-grande {
    font-size: 30px;
    font-weight: 750;
    letter-spacing: -0.035em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    display: inline-block;
    transform-origin: left center;
}

.dato-unidad { font-size: 12px; font-weight: 600; color: var(--mut); }

/* Valor que entra animado al actualizarse */
.valor-anim { animation: subir 0.5s cubic-bezier(0.2, 0.7, 0.3, 1); }

@keyframes subir {
    from { opacity: 0; transform: translateY(7px); filter: blur(3px); }
    to   { opacity: 1; transform: none; filter: none; }
}

.fila {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.4rem 0;
    border-top: 1px solid var(--borde);
}
.fila .mut { font-size: 0.88rem; }
.fila__val { font-weight: 600; font-variant-numeric: tabular-nums; }

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

.item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--borde);
    min-width: 0;
}
.item:first-child { border-top: 0; }
.item__txt { min-width: 0; flex: 1; }

.chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.6rem;
    padding: 0.15rem 0.5rem;
    border-radius: 0.5rem;
    font-family: var(--mono);
    font-weight: 700;
    font-size: 0.82rem;
    color: #06101f;
    font-variant-numeric: tabular-nums;
}

/* El número va con el color del TEXTO, no con el neón de la fuente: hay neones
   apagados (pizarra, piedra) que sobre el panel oscuro se quedaban en 3,61:1. El color
   de la fuente sigue estando, en el fondo y en el borde. */
.chip--neon {
    color: var(--texto);
    background: color-mix(in srgb, var(--neon) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--neon) 45%, transparent);
}

.tag {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    border-radius: 0.35rem;
    font-size: 0.68rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--mut) 20%, transparent);
    color: var(--mut);
    vertical-align: middle;
}

.tag--rojo { background: color-mix(in srgb, var(--rojo) 22%, transparent); color: var(--rojo); }
.tag--acento { background: color-mix(in srgb, var(--acento) 18%, transparent); color: var(--acento); }

/* Selector compacto dentro de una tarjeta (p. ej. comunidad en festivos). */
.festivos-com { margin-bottom: 0.6rem; }
.selector-mini {
    width: 100%;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--texto);
    background: var(--bg-2);
    border: 1px solid var(--borde);
    border-radius: 0.55rem;
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    transition: border-color var(--t-rapido) var(--ease-out);
}
.selector-mini:hover { border-color: var(--borde-fuerte); }
.selector-mini:focus-visible { outline: 2px solid var(--anillo); outline-offset: 2px; }

.punto {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    flex: 0 0 auto;
}

.enlace-neon { color: var(--neon); text-decoration: none; font-weight: 600; }
.enlace-neon:hover { text-decoration: underline; }

/* ------------------------------------------------------------ estadísticas */

.estads {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 1rem;
}

.estad {
    background: var(--bg-2);
    border-radius: 11px;
    padding: 12px 14px;
}

.estad__num {
    display: block;
    font-size: 22px;
    font-weight: 750;
    letter-spacing: -0.03em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.estad__eti { font-size: 12.5px; color: var(--mut); font-weight: 600; margin-top: 2px; }
/* Sobre qué se ha calculado: "de las 4 que coinciden". Sin esto, un estadístico sobre
   el conjunto entero mientras la tabla enseña un filtro es sencillamente un dato falso. */
.estad__de { font-size: 11.5px; color: var(--mut-2); margin-top: 1px; }

@media (max-width: 900px) { .estads { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ sparkline */

.spark { display: flex; align-items: flex-end; gap: 2px; height: 44px; }
.spark--alto { height: 96px; }
.spark__col {
    flex: 1; min-width: 0; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
}
.spark__bar {
    width: 100%; max-width: 22px; min-height: 3px;
    border-radius: 3px 3px 0 0;
    box-shadow: 0 0 8px -2px currentColor;
    transition: height 0.4s ease;
}
.spark__eti { margin-top: 0.2rem; font-size: 0.6rem; color: var(--mut-2); }

/* --------------------------------------------------------------- gráfico */

.grafico-caja { position: relative; height: 130px; }
.grafico-caja--alto { height: 220px; }

/* ------------------------------------------------------------------ tabla */

.tabla { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
/* La cabecera de la tabla se queda pegada bajo la barra de controles: en una tabla de
   50 filas dejabas de saber qué columna estabas mirando a los tres desplazamientos.

   El desplazamiento NO es un número fijo. La barra de controles mide 88 px en /luz y
   225 en /gasolina (cinco selectores que envuelven), así que con los 104 px de antes
   la fila de cabecera se pegaba DETRÁS de la barra y no se veía en NINGUNA página:
   elementFromPoint sobre el centro del th devolvía el <select> de los filtros.
   El alto real lo mide el script de pie.php y lo publica en --alto-fijo; los 104 px
   son solo el valor de partida mientras el script no ha corrido. */
.tabla th {
    position: sticky;
    top: var(--alto-fijo, 104px);
    z-index: 5;
    text-align: left;
    background: var(--panel-solido);
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mut);
    font-weight: 600;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--borde-fuerte);
}
/* Por debajo de 561 px la tabla sí necesita su contenedor con scroll lateral (ver
   .scroll-x), y dentro de un contenedor con scroll el sticky se pega a ÉL, no a la
   ventana: nunca se movería. Ahí se deja quieta en vez de fingir que se pega. */
@media (max-width: 560px) { .tabla th { position: static; } }

/* La fila del valor mínimo, señalada en la propia tabla. */
.tabla tr.es-min td { background: color-mix(in srgb, var(--verde) 8%, transparent); }
.tag--min { background: color-mix(in srgb, var(--verde) 14%, transparent); color: var(--verde); font-weight: 700; }
.tag--ahora { background: color-mix(in srgb, var(--ambar) 16%, transparent); color: var(--ambar); font-weight: 700; }
.tabla td {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--borde);
    vertical-align: middle;
    transition: background var(--t-rapido) var(--ease-out);
}
.tabla tbody tr:hover td { background: color-mix(in srgb, var(--neon) 9%, transparent); }
.tabla .der { text-align: right; font-variant-numeric: tabular-nums; }
.scroll-x { overflow-x: auto; }
/* Mientras el contenedor tenga scroll, la cabecera pegajosa de la tabla se pega a ÉL
   y no a la ventana, así que no se ve. Y `overflow-x: auto` arrastra el eje Y a `auto`
   también, de modo que basta con eso para romperla.
   Medido en las nueve tablas del sitio: a 900 px de ancho NINGUNA desborda (la más
   ancha, /gasolina, ocupa 794 de 794). Solo a 390 px se salen cinco de ellas, y ahí el
   scroll lateral hace falta de verdad. El corte estaba en 961 y sobraban 400 px. */
@media (min-width: 561px) { .scroll-x { overflow: visible; } }

/* ------------------------------------------------------- página de detalle */

.cabecera-detalle {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 1.4rem;
    margin-bottom: 0.4rem;
    border: 1px solid var(--borde);
    border-radius: 1.15rem;
    background: linear-gradient(120deg,
        color-mix(in srgb, var(--sec1, var(--glow-1)) 14%, var(--panel-solido)),
        color-mix(in srgb, var(--sec2, var(--glow-2)) 11%, var(--panel-solido)));
    box-shadow: var(--sombra);
}
.cabecera-detalle__fondo {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.42;
    pointer-events: none;
    -webkit-mask: linear-gradient(90deg, transparent 12%, #000 58%);
    mask: linear-gradient(90deg, transparent 12%, #000 58%);
}
.cabecera-detalle__fondo svg { display: block; width: 100%; height: 100%; }
.cabecera-detalle > *:not(.cabecera-detalle__fondo) { position: relative; z-index: 1; }

.cabecera-detalle__ico {
    display: grid;
    place-items: center;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 0.9rem;
    color: var(--neon);
    background: color-mix(in srgb, var(--neon) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--neon) 32%, transparent);
    box-shadow: 0 0 30px -10px var(--neon);
    flex: 0 0 auto;
}
.cabecera-detalle__ico i { font-size: 1.7rem; }
.cabecera-detalle__titulo { margin: 0; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; }
.cabecera-detalle__lema { color: var(--mut); font-size: 0.95rem; }
.cabecera-detalle__estado { margin-left: auto; color: var(--rojo); font-size: 1.4rem; }

.tarjeta-plana {
    border: 1px solid var(--borde);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--panel-solido) 88%, transparent);
    box-shadow: var(--sombra);
    margin-bottom: 1.1rem;
    /* clip, no hidden: recorta igual las esquinas pero no crea contenedor de scroll, y
       así la cabecera pegajosa de la tabla se pega a la ventana y no a esta caja. */
    overflow: clip;
}

.tarjeta-plana--neon { position: relative; }
.tarjeta-plana--neon::before {
    content: "";
    position: absolute; left: 0; right: 0; top: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--neon), transparent);
}

.tarjeta-plana__cuerpo { padding: 1.15rem; }
.tarjeta-plana__pie {
    padding: 0.5rem 1.15rem;
    border-top: 1px solid var(--borde);
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--mut-2);
    text-align: right;
}

.fuente-cred { color: var(--neon); text-decoration: none; }
.fuente-cred:hover { text-decoration: underline; }

/* Filtros */
.filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    align-items: flex-end;
    padding: 1.1rem;
}

.campo { display: flex; flex-direction: column; gap: 0.3rem; }
.campo--ancho { flex: 1 1 100%; }
.campo--rel { position: relative; }
.campo__eti {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mut);
}

.control {
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--sans);
    font-size: 0.92rem;
    color: var(--texto);
    background: var(--bg-2);
    border: 1px solid var(--borde-fuerte);
    border-radius: 0.6rem;
    padding: 0.55rem 0.75rem;   /* algo más de altura: objetivo táctil más cómodo */
    min-width: 9rem;
    transition: border-color var(--t-medio) var(--ease-out), box-shadow var(--t-medio) var(--ease-out);
}
.control:hover:not(:focus) {
    border-color: color-mix(in srgb, var(--neon) 32%, var(--borde-fuerte));
}
.control:focus {
    outline: none;
    border-color: var(--neon);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--neon) 22%, transparent);
}
select.control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a96b2' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    padding-right: 2rem;
}
.control--busca { width: 100%; min-width: 0; }

/* Interruptor (checkbox de forks) */
.interruptor { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; user-select: none; font-size: 0.9rem; }
.interruptor input { position: absolute; opacity: 0; }
.interruptor__via {
    width: 2.3rem; height: 1.3rem; border-radius: 1rem;
    background: var(--bg-2); border: 1px solid var(--borde-fuerte);
    position: relative; transition: background var(--t-medio) var(--ease-out), border-color var(--t-medio) var(--ease-out);
}
.interruptor__via::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 1rem; height: 1rem; border-radius: 50%;
    background: var(--mut);
    /* Curva con un punto de rebote leve al deslizar el pomo (feel de spring). */
    transition: transform var(--t-medio) cubic-bezier(0.34, 1.56, 0.64, 1), background var(--t-medio) var(--ease-out);
}
.interruptor input:checked + .interruptor__via { background: color-mix(in srgb, var(--neon) 30%, transparent); border-color: var(--neon); }
.interruptor input:checked + .interruptor__via::after { transform: translateX(1rem); background: var(--neon); }

/* Menú de geolocalización (autocompletar) */
.menu-geo {
    position: absolute;
    z-index: 30;
    top: 100%; left: 0; right: 0;
    margin-top: 0.3rem;
    background: var(--panel-solido);
    border: 1px solid var(--borde-fuerte);
    border-radius: 0.6rem;
    box-shadow: var(--sombra);
    max-height: 15rem;
    overflow-y: auto;
    display: none;
}
.menu-geo.show { display: block; }
.menu-geo__item {
    display: block; width: 100%; text-align: left;
    padding: 0.5rem 0.75rem;
    background: none; border: 0; color: var(--texto);
    font-size: 0.9rem; cursor: pointer;
    transition: background var(--t-rapido) var(--ease-out);
}
.menu-geo__item:hover,
.menu-geo__item:focus-visible { background: color-mix(in srgb, var(--neon) 12%, transparent); }

/* --------------------------------------------------------------- botones */

.boton {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border-radius: 0.6rem;
    border: 1px solid var(--borde-fuerte);
    background: var(--panel);
    color: var(--texto);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color var(--t-medio) var(--ease-out), transform var(--t-rapido) var(--ease-out), box-shadow var(--t-medio);
}
.boton:hover { border-color: var(--neon); transform: translateY(-1px); }
.boton:active { transform: scale(0.97); }
.boton--neon { background: linear-gradient(135deg, var(--glow-1), var(--glow-2)); color: #fff; border: 0; }
.boton--neon:hover { box-shadow: 0 6px 20px -8px var(--glow-1); }

.foto-detalle { width: 100%; border-radius: 0.8rem; border: 1px solid var(--borde); }

/* --------------------------------------------------------------- footer */

.pie-web {
    position: relative;
    z-index: 1;
    border-top: 1px solid var(--borde);
    padding: 1.5rem 0 2.5rem;
    text-align: center;
    color: var(--mut);
    font-size: 0.82rem;
    line-height: 1.7;
}
.pie-web .mono { color: var(--mut-2); }

/* Barra legal (global en todas las páginas vía pie.php). */
.pie-legal {
    position: relative;
    z-index: 1;
    border-top: 1px solid var(--borde);
    padding: 1rem 0 2rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--mut);
}
.pie-legal a { color: var(--mut); text-decoration: none; }
.pie-legal a:hover { color: var(--neon); }
.pie-legal span[aria-hidden] { margin: 0 0.4rem; color: var(--borde); }

/* Páginas legales (aviso legal, privacidad). */
.documento-legal { max-width: 46rem; padding-bottom: 2rem; }
.documento-legal h1 { margin: 0.4rem 0 0.6rem; }
.documento-legal h2 { margin: 1.6rem 0 0.5rem; font-size: 1.1rem; }
.documento-legal p, .documento-legal li { line-height: 1.7; color: var(--texto); }
.documento-legal ul { padding-left: 1.2rem; }
.documento-legal li { margin-bottom: 0.6rem; }
.documento-legal a { color: var(--neon); }

/* --------------------------------------------------------------- 404 */

.vacio {
    min-height: 70vh;
    display: grid;
    place-content: center;
    text-align: center;
    gap: 0.6rem;
}
.vacio__codigo {
    font-family: var(--mono);
    font-size: 4.5rem;
    font-weight: 800;
    background: linear-gradient(90deg, var(--glow-1), var(--glow-2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* --------------------------------------------------------------- alerta */

.alerta {
    border: 1px solid color-mix(in srgb, var(--rojo) 40%, transparent);
    background: color-mix(in srgb, var(--rojo) 12%, transparent);
    border-radius: 0.75rem;
    padding: 0.85rem 1rem;
    margin: 1rem 0;
    color: var(--texto);
}

/* ------------------------------------------------- categorías (filtro + secciones) */

.filtros-cat {
    display: flex;
    gap: 0.5rem;
    margin: 0 -1rem 1.6rem;
    padding: 0.6rem 1rem;
    overflow-x: auto;
    scrollbar-width: none;
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.filtros-cat::-webkit-scrollbar { display: none; }
.filtros-cat .pill { flex: 0 0 auto; white-space: nowrap; }

.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.15rem;
    border-radius: 2rem;
    border: 1px solid var(--borde);
    background: var(--panel);
    color: var(--mut);
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
    transition: color var(--t-rapido) var(--ease-out), border-color var(--t-rapido) var(--ease-out), background var(--t-rapido) var(--ease-out), transform var(--t-rapido) var(--ease-out);
}
.pill i { font-size: 1.2rem; }
.pill:hover { border-color: var(--borde-fuerte); color: var(--texto); }
.pill:active { transform: scale(0.96); }
.pill.activa { background: var(--acento-solido); color: #fff; border-color: var(--acento-solido); }
/* Cuántas fuentes hay en esa categoría. En monoespaciada y tono apagado: es un dato
   de apoyo, no compite con el nombre. */
.pill__n {
    font-family: var(--mono);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mut-2);
    font-variant-numeric: tabular-nums;
}
.pill.activa .pill__n { color: color-mix(in srgb, #fff 72%, transparent); }

.grupo { margin-bottom: 2.8rem; }
.grupo.oculto { display: none; }

/* Flechas del carrusel (se ocultan en táctil, donde se arrastra). */
.grupo__flechas { margin-left: auto; display: flex; gap: 0.35rem; }
.grupo__flecha {
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--borde); background: var(--panel);
    color: var(--mut); cursor: pointer; font-size: 1.2rem; line-height: 1;
    display: grid; place-items: center;
    transition: color var(--t-rapido) var(--ease-out), border-color var(--t-rapido) var(--ease-out), transform var(--t-rapido) var(--ease-out);
}
.grupo__flecha:hover { color: var(--texto); border-color: var(--borde-fuerte); }
.grupo__flecha:active { transform: scale(0.92); }
@media (hover: none) { .grupo__flechas { display: none; } }

/* Entrada escalonada de las tarjetas (cascada) cuando se renderizan. */
@media (prefers-reduced-motion: no-preference) {
    .tarjeta { animation: tarjetaEntra 0.55s var(--ease-out) both; }
    .rejilla > .tarjeta:nth-child(1) { animation-delay: 0.02s; }
    .rejilla > .tarjeta:nth-child(2) { animation-delay: 0.07s; }
    .rejilla > .tarjeta:nth-child(3) { animation-delay: 0.12s; }
    .rejilla > .tarjeta:nth-child(4) { animation-delay: 0.17s; }
    .rejilla > .tarjeta:nth-child(5) { animation-delay: 0.22s; }
    .rejilla > .tarjeta:nth-child(6) { animation-delay: 0.27s; }
    .rejilla > .tarjeta:nth-child(7) { animation-delay: 0.32s; }
    .rejilla > .tarjeta:nth-child(8) { animation-delay: 0.36s; }
}
@keyframes tarjetaEntra {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Cabecera de cada categoría: banda a todo el ancho, grande y con el icono en un
   chip de color, para separar visualmente las secciones (más llamativa). */
/* Banner de sección: la ILUSTRACIÓN ocupa todo el ancho como fondo; el texto va encima.
   La imagen se desvanece por la izquierda (máscara) para que el texto se lea limpio. */
/* Sin banda: la sección es solo su título + subtítulo, sin caja de color. */
.seccion-banner {
    position: relative;
    margin-bottom: 1.1rem;
}

/* Selector de rango para las gráficas de serie histórica (1/5/10 años · Todo). */
.serie-ctrl { display: inline-flex; gap: 0.2rem; background: var(--panel-solido); border: 1px solid var(--borde); border-radius: 999px; padding: 0.2rem; margin-bottom: 0.7rem; }
.serie-tg {
    font: inherit; font-weight: 700; font-size: 0.8rem; border: 0; background: none;
    color: var(--mut); cursor: pointer; padding: 0.3rem 0.75rem; border-radius: 999px;
}
.serie-tg.activa { background: var(--acento-solido); color: #fff; }
.serie-tg:hover:not(.activa) { color: var(--texto); }

/* ---------------------------------------- lanzamientos: filtros, lista, calendario */
.lz-ctrl { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }
.lz-buscar { flex: 1 1 220px; }
.lz-sel { flex: 1 1 150px; }
.lz-buscar, .lz-sel {
    font: inherit; min-width: 0; max-width: 100%; padding: 0.5rem 0.7rem;
    border: 1px solid var(--borde); border-radius: 0.6rem;
    background: var(--panel-solido); color: var(--texto);
}
.lz-check { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--mut); cursor: pointer; }
.lz-vista { display: inline-flex; gap: 0.2rem; margin-left: auto; background: var(--panel-solido); border: 1px solid var(--borde); border-radius: 999px; padding: 0.2rem; }
.lz-tg {
    font: inherit; font-weight: 700; font-size: 0.82rem; border: 0; background: none;
    color: var(--mut); cursor: pointer; padding: 0.35rem 0.7rem; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 0.3rem;
}
.lz-tg.activa { background: var(--acento-solido); color: #fff; }

.lz-item { border: 1px solid var(--borde); border-radius: 0.8rem; background: var(--panel-solido); margin-bottom: 0.5rem; overflow: hidden; }
.lz-item__sum { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.7rem 0.8rem; cursor: pointer; list-style: none; }
.lz-item__sum::-webkit-details-marker { display: none; }
.lz-img { width: 52px; height: 52px; border-radius: 0.55rem; object-fit: cover; flex: 0 0 auto; background: var(--bg-2); }
.lz-img--vacia { display: grid; place-items: center; color: var(--mut-2); font-size: 1.4rem; }
.lz-item__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.lz-item__tit { line-height: 1.25; }
.lz-meta { display: block; }
.lz-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.1rem; }
.lz-badge {
    font-size: 0.68rem; font-weight: 700; padding: 0.12rem 0.45rem; border-radius: 999px;
    background: color-mix(in srgb, var(--acento-solido) 14%, var(--panel-solido));
    color: var(--texto); border: 1px solid var(--borde);
}
.lz-badge--trip { background: #ff7a3d; color: #fff; border-color: transparent; }
.lz-fecha { flex: 0 0 auto; text-align: right; white-space: nowrap; }
.lz-more { padding: 0 0.8rem 0.8rem calc(52px + 1.5rem); }
.lz-desc { margin: 0.2rem 0 0.5rem; font-size: 0.88rem; line-height: 1.5; color: var(--mut); }
.lz-web { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 700; font-size: 0.85rem; color: var(--acento); text-decoration: none; }
.lz-web:hover { text-decoration: underline; }

/* Calendario en rejilla de mes: días con lanzamiento iluminados y seleccionables. */
/* Calendario compacto a un lado, lista del día al otro (apilado en móvil). */
.cal-wrap { display: grid; grid-template-columns: minmax(230px, 300px) 1fr; gap: 1.4rem; align-items: start; }
.cal { margin-bottom: 0; }
.cal-wrap .cal__panel { margin-top: 0; }
/* Bajo ~640px no caben dos columnas: el calendario va arriba (ancho) y la lista debajo. */
@media (max-width: 640px) {
    .cal-wrap { grid-template-columns: 1fr; gap: 1rem; }
    .cal-wrap .cal__panel { margin-top: 0.4rem; }
}
.cal__nav { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.6rem; }
.cal__flecha {
    flex: 0 0 auto; width: 2.2rem; height: 2.2rem; border-radius: 0.6rem; cursor: pointer;
    border: 1px solid var(--borde); background: var(--panel-solido); color: var(--texto);
    display: grid; place-items: center; font-size: 1.1rem;
}
.cal__flecha:hover:not(:disabled) { background: color-mix(in srgb, var(--acento-solido) 12%, var(--panel-solido)); }
.cal__flecha:disabled { opacity: 0.35; cursor: default; }
.cal__tit { font-size: 1.05rem; margin: 0; text-align: center; }
.cal__dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 4px; }
.cal__dow span { text-align: center; font-size: 0.68rem; font-weight: 700; color: var(--mut-2); text-transform: uppercase; letter-spacing: 0.04em; }
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal__c { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: 0.5rem; font-size: 0.8rem; color: var(--mut-2); font-variant-numeric: tabular-nums; border: 1px solid transparent; }
.cal__c--vacia { border: 0; }
.cal__c--on {
    cursor: pointer; color: var(--texto); font: inherit; font-weight: 700;
    background: color-mix(in srgb, var(--acento-solido) 12%, var(--panel-solido));
    border-color: color-mix(in srgb, var(--acento-solido) 30%, transparent);
}
.cal__c--on:hover { background: color-mix(in srgb, var(--acento-solido) 22%, var(--panel-solido)); }
.cal__c--sel { background: var(--acento-solido); color: #fff; border-color: transparent; }
.cal__n { line-height: 1; }
.cal__rocks { display: flex; align-items: center; justify-content: center; gap: 1px; font-size: 0.52rem; line-height: 1; color: var(--acento); }
.cal__c--sel .cal__rocks { color: #fff; }
.cal__mas { font-size: 0.6rem; font-weight: 800; margin-left: 1px; }
.cal__panel { margin-top: 0.4rem; }
.cal__panel-tit { font-size: 1rem; margin: 0 0 0.6rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--borde); }

/* Calendario ANUAL: 12 mini-meses. */
.cal-anual__year { font-size: 1.15rem; font-weight: 800; margin: 0.6rem 0 0.6rem; }
.cal-anual { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem 1.2rem; margin-bottom: 1rem; }
.cal-mes__tit { font-weight: 700; font-size: 0.85rem; margin-bottom: 0.35rem; text-align: center; }
.cal-anual .cal__dow { gap: 2px; margin-bottom: 2px; }
.cal-anual .cal__dow span { font-size: 0.55rem; }
.cal-anual .cal__grid { gap: 2px; }
.cal-anual .cal__c { font-size: 0.68rem; border-radius: 0.35rem; }
.cal-anual .cal__c--on { font-weight: 700; }

/* Calendario lunar: dos meses navegables, emoji de fase por día, tooltip propio. */
.luna-cont { position: relative; }
.luna-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.luna-par { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 2.4rem; align-items: start; }
.luna-mes { min-width: 0; }
.luna-mes .cal-mes__tit { margin-bottom: 0.4rem; }
@media (max-width: 900px) { .luna-par { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .luna-par { grid-template-columns: 1fr; gap: 1.6rem; max-width: 340px; margin: 0 auto; } }
.luna-c { position: relative; transition: transform 0.12s ease, background 0.12s ease; }
.luna-c__d { position: absolute; top: 3px; left: 5px; font-size: 0.62rem; color: var(--mut-2); line-height: 1; }
.luna-c__e { font-size: 1.35rem; line-height: 1; }
.luna-c[data-nombre] { cursor: default; }
.luna-c[data-nombre]:hover, .luna-c[data-nombre]:focus-visible { transform: scale(1.09); background: color-mix(in srgb, var(--acento-solido) 10%, var(--panel-solido)); outline: none; }
.luna-c--pri { background: color-mix(in srgb, var(--acento-solido) 14%, var(--panel-solido)); border-color: color-mix(in srgb, var(--acento-solido) 34%, transparent); }
/* Entrada animada al cambiar de mes. */
.luna-grid--in { animation: lunaIn 0.35s var(--ease-out, ease); }
@keyframes lunaIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Tooltip propio. */
.luna-tt {
    position: absolute; z-index: 20; transform: translate(-50%, -100%); pointer-events: none;
    display: flex; align-items: center; gap: 0.55rem; white-space: nowrap;
    background: var(--panel-solido); border: 1px solid var(--borde); border-radius: 0.75rem;
    box-shadow: var(--sombra); padding: 0.5rem 0.75rem;
}
.luna-tt[hidden] { display: none; }
.luna-tt__e { font-size: 1.7rem; line-height: 1; }
.luna-tt__t { display: flex; flex-direction: column; line-height: 1.25; }
.luna-tt__s { font-size: 0.72rem; color: var(--mut); }

/* ------------------------------------------------------------- eclipses */
.ecl-hero {
    display: flex; gap: 1.1rem; align-items: center; padding: 1.2rem 1.3rem;
    border-radius: 1rem; border: 1px solid var(--borde); box-shadow: var(--sombra);
    background: radial-gradient(130% 150% at 12% 15%, color-mix(in srgb, var(--acento-solido) 22%, var(--panel-solido)), var(--panel-solido));
    margin-bottom: 0.6rem;
}
.ecl-hero--total { border-color: color-mix(in srgb, var(--acento-solido) 45%, transparent); }
.ecl-hero__emoji { font-size: 3.6rem; line-height: 1; flex: 0 0 auto; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.28)); }
.ecl-hero__txt { min-width: 0; }
.ecl-hero__tit { margin: 0.25rem 0 0; font-size: 1.4rem; }
.ecl-hero__fecha { color: var(--mut); font-size: 0.95rem; }
.ecl-hero__cd { margin: 0.35rem 0 0.45rem; font-size: 1.05rem; }
.ecl-hero__cd b { font-size: 1.7rem; color: var(--acento); font-variant-numeric: tabular-nums; }
.ecl-hero__vis { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--texto); }
.ecl-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.2rem; }
.ecl-badge { font-size: 0.7rem; font-weight: 700; padding: 0.14rem 0.5rem; border-radius: 999px; border: 1px solid var(--borde); background: var(--panel-solido); }
.ecl-badge--total { background: var(--acento-solido); color: #fff; border-color: transparent; }
.ecl-badge--anular { background: #f59e0b; color: #3a2a20; border-color: transparent; }
.ecl-badge--parcial { color: var(--mut); }
.ecl-badge--sol { background: color-mix(in srgb, #f59e0b 20%, var(--panel-solido)); }
.ecl-badge--luna { background: color-mix(in srgb, #8f7bff 22%, var(--panel-solido)); }
.ecl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.7rem; }
.ecl-card { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.8rem; border: 1px solid var(--borde); border-radius: 0.8rem; background: var(--panel-solido); }
.ecl-card--total { border-color: color-mix(in srgb, var(--acento-solido) 40%, transparent); }
.ecl-card__emoji { font-size: 2rem; line-height: 1; flex: 0 0 auto; }
.ecl-card__b { min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.ecl-card--link { text-decoration: none; color: inherit; transition: transform 0.15s ease, border-color 0.15s ease; }
.ecl-card--link:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--acento-solido) 55%, transparent); }
.ecl-card__mas { margin-top: 0.2rem; font-size: 0.78rem; font-weight: 700; color: var(--acento); display: inline-flex; align-items: center; gap: 0.25rem; }
@media (max-width: 560px) {
    .ecl-hero { flex-direction: column; text-align: center; }
    .ecl-badges { justify-content: center; }
}

/* ===== Ficha específica de un eclipse (/eclipse/<slug>) ===== */
.ecl-ficha { display: flex; gap: 1.4rem; align-items: center; padding: 1.4rem; margin: 0.8rem 0 1.2rem; border: 1px solid var(--borde); border-radius: 1.1rem;
    background: radial-gradient(120% 140% at 85% 15%, color-mix(in srgb, var(--acento-solido) 16%, transparent), transparent 60%), var(--panel-solido); }
.ecl-ficha--total { border-color: color-mix(in srgb, var(--acento-solido) 45%, transparent); }
.ecl-ficha__arte { flex: 0 0 clamp(120px, 26vw, 190px); aspect-ratio: 1; display: grid; place-items: center; }
.ecl-ficha__txt { min-width: 0; }
.ecl-ficha__tit { margin: 0.3rem 0 0.2rem; font-size: clamp(1.5rem, 4vw, 2.1rem); line-height: 1.1; text-wrap: balance; }
.ecl-ficha__fecha { color: var(--mut); font-size: 0.95rem; display: flex; align-items: center; gap: 0.35rem; }
.ecl-ficha__cd { margin: 0.55rem 0; }
.ecl-ficha__cd b { font-size: clamp(1.5rem, 4vw, 2rem); color: var(--acento); font-variant-numeric: tabular-nums; }
.ecl-ficha__vis { margin: 0.3rem 0 0; font-size: 0.98rem; line-height: 1.55; color: var(--texto); max-width: 60ch; }

.ecl-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.7rem; margin-bottom: 1.4rem; }
.ecl-dato { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 0.9rem; border: 1px solid var(--borde); border-radius: 0.8rem; background: var(--panel-solido); }
.ecl-dato i { font-size: 1.5rem; color: var(--acento); flex: 0 0 auto; }
.ecl-dato__eti { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--mut); }
.ecl-dato__val { display: block; font-weight: 700; font-size: 0.95rem; }

.ecl-bloque { margin: 0 0 1.6rem; }
.ecl-h2 { display: flex; align-items: center; gap: 0.5rem; font-size: 1.2rem; margin: 0 0 0.6rem; }
.ecl-h2 i { color: var(--acento); }
.ecl-h3 { font-size: 1rem; margin: 1rem 0 0.5rem; }
.ecl-p { margin: 0 0 0.7rem; line-height: 1.6; max-width: 68ch; color: var(--texto); }
.ecl-lista { margin: 0; padding-left: 1.2rem; line-height: 1.65; max-width: 68ch; }
.ecl-lista li { margin-bottom: 0.3rem; }

.ecl-cob { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.5rem; }
.ecl-cob__it { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.5rem 0.7rem; border: 1px solid var(--borde); border-radius: 0.6rem; background: var(--panel-solido); }
.ecl-cob__it--total { border-color: color-mix(in srgb, var(--acento-solido) 50%, transparent); background: color-mix(in srgb, var(--acento-solido) 12%, var(--panel-solido)); }
.ecl-cob__ciu { font-weight: 600; min-width: 0; }
.ecl-cob__val { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--acento); flex: 0 0 auto; }

.ecl-seg__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.8rem; margin: 0.8rem 0; }
.ecl-seg__ok, .ecl-seg__no { padding: 0.9rem 1rem; border: 1px solid var(--borde); border-radius: 0.8rem; background: var(--panel-solido); }
.ecl-seg__ok { border-color: color-mix(in srgb, #16a34a 45%, transparent); }
.ecl-seg__no { border-color: color-mix(in srgb, #dc2626 45%, transparent); }
.ecl-seg__cab { display: flex; align-items: center; gap: 0.35rem; font-weight: 700; margin-bottom: 0.4rem; }
.ecl-seg__ok .ecl-seg__cab { color: #16a34a; }
.ecl-seg__no .ecl-seg__cab { color: #dc2626; }
.ecl-seg__ok ul, .ecl-seg__no ul { margin: 0; padding-left: 1.1rem; line-height: 1.55; font-size: 0.92rem; }
.ecl-seg__ok li, .ecl-seg__no li { margin-bottom: 0.25rem; }

.ecl-cta { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.3rem; padding: 0.6rem 1rem; border-radius: 0.7rem; font-weight: 700; text-decoration: none;
    background: var(--acento-solido); color: #fff; transition: filter 0.15s ease, transform 0.15s ease; }
.ecl-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }

.ecl-mapa { position: relative; max-width: 620px; margin: 0.5rem auto 0.4rem; }
.ecl-mapa svg { width: 100%; height: auto; display: block; overflow: visible; }
.ecl-mapa .mapa-r { fill: color-mix(in srgb, var(--acento-solido) 8%, var(--panel-solido)); stroke: var(--borde); stroke-width: 1; }
.ecl-mapa .mapa-esp2__caja { fill: none; stroke: var(--borde); }
.ecl-mapa__franja-halo { fill: none; stroke: color-mix(in srgb, var(--acento-solido) 35%, transparent); stroke-width: 58; stroke-linecap: round; stroke-linejoin: round; cursor: pointer; }
.ecl-mapa__franja-halo:hover, .ecl-mapa__franja-halo.ecl-mapa__ciu--on { stroke: color-mix(in srgb, var(--acento-solido) 50%, transparent); }
.ecl-mapa__franja-halo:focus-visible { outline: none; stroke: color-mix(in srgb, var(--acento-solido) 55%, transparent); }
.ecl-mapa__franja { fill: none; stroke: var(--acento-solido); stroke-width: 26; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; pointer-events: none; }
.ecl-mapa__ciu { cursor: pointer; }
.ecl-mapa__ciu:focus-visible { outline: none; }
.ecl-mapa__hit { fill: transparent; }
.ecl-mapa__pt { transition: stroke-width 0.12s ease; }
.ecl-mapa__pt--total { fill: #fff; stroke: var(--acento-solido); stroke-width: 4; }
.ecl-mapa__pt--parcial { fill: var(--panel-solido); stroke: var(--mut); stroke-width: 3; }
.ecl-mapa__ciu--on .ecl-mapa__pt--total { stroke-width: 7; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--acento-solido) 70%, transparent)); }
.ecl-mapa__ciu--on .ecl-mapa__pt--parcial { fill: var(--acento-solido); stroke: var(--acento-solido); r: 8; }
.ecl-mapa__lbl { fill: var(--texto); font-size: 20px; font-weight: 700; text-anchor: middle; paint-order: stroke; stroke: var(--bg); stroke-width: 4px; pointer-events: none; }
.ecl-mapa__lbl--total { fill: var(--acento); font-size: 22px; }
.ecl-mapa__tt { position: absolute; transform: translate(-50%, -100%); background: var(--bg); color: var(--texto); border: 1px solid var(--borde);
    border-radius: 0.55rem; padding: 0.35rem 0.6rem; font-size: 0.85rem; line-height: 1.25; white-space: nowrap; pointer-events: none; z-index: 5;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18); display: flex; flex-direction: column; }
.ecl-mapa__tt b { color: var(--acento); }
.ecl-mapa__tt span { color: var(--mut); font-size: 0.78rem; }
.ecl-mapa__tt--total b { color: var(--acento); }
.ecl-mapa__tt[hidden] { display: none; }
.ecl-mapa__ley { display: flex; gap: 1.2rem; flex-wrap: wrap; justify-content: center; font-size: 0.85rem; color: var(--mut); margin-bottom: 0.4rem; }
.ecl-mapa__sw { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 3px; vertical-align: -1px; margin-right: 0.2rem; }
.ecl-mapa__sw--total { background: var(--acento-solido); }
.ecl-mapa__sw--parcial { background: var(--panel-solido); border: 2px solid var(--mut); }
.ecl-mapa__pt--cob { stroke: var(--bg); stroke-width: 2.5; transition: stroke-width 0.12s ease; }
.ecl-mapa__ciu--on .ecl-mapa__pt--cob { stroke: var(--acento-solido); stroke-width: 4; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--acento-solido) 60%, transparent)); }
.ecl-mapa__escala { display: flex; align-items: center; gap: 0.5rem; justify-content: center; flex-wrap: wrap; font-size: 0.85rem; color: var(--mut); margin-bottom: 0.4rem; }
.ecl-mapa__barra { width: 140px; height: 0.7rem; border-radius: 999px; border: 1px solid var(--borde); }

.ecl-geo { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.ecl-geo__fig { flex: 1 1 300px; max-width: 460px; padding: 0.8rem 1rem; border: 1px solid var(--borde); border-radius: 0.9rem; background: var(--panel-solido); }
.ecl-geo .ecl-p { flex: 1 1 280px; margin: 0; }
.ecl-geo-lbl { fill: var(--mut); font-size: 13px; font-weight: 700; font-family: inherit; }

.ecl-fases { display: flex; gap: 0.4rem; flex-wrap: nowrap; justify-content: space-between; overflow-x: auto; padding: 0.6rem 0.2rem; }
.ecl-fase { flex: 1 1 0; min-width: 72px; text-align: center; position: relative; }
.ecl-fase:not(:last-child)::after { content: ""; position: absolute; top: 32px; right: -0.2rem; width: 0.4rem; height: 2px; background: var(--borde); }
.ecl-fase svg { width: 60px; height: 60px; }
.ecl-fase__cap { display: block; font-size: 0.72rem; color: var(--mut); margin-top: 0.15rem; line-height: 1.2; }
.ecl-fase--pico .ecl-fase__cap { color: var(--acento); font-weight: 700; }

.ecl-otros { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.6rem; }
.ecl-otro { display: flex; gap: 0.7rem; align-items: center; padding: 0.7rem 0.85rem; border: 1px solid var(--borde); border-radius: 0.8rem; background: var(--panel-solido); text-decoration: none; color: inherit; transition: transform 0.15s ease, border-color 0.15s ease; }
.ecl-otro:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--acento-solido) 50%, transparent); }
.ecl-otro__emoji { font-size: 1.7rem; flex: 0 0 auto; }
.ecl-otro__b { min-width: 0; display: flex; flex-direction: column; }
.ecl-otro__tit { font-weight: 700; }
.ecl-otro__fecha { font-size: 0.82rem; color: var(--mut); }

/* ===== "Hoy en España": destacados contextuales de la portada ===== */
.hoy { margin: 2.6rem 0; padding: 1.6rem clamp(1rem, 3vw, 2rem); border-radius: 1.3rem; border: 1px solid var(--borde);
    background: radial-gradient(130% 120% at 100% 0%, color-mix(in srgb, var(--acento-solido) 12%, transparent), transparent 55%), var(--panel-solido); }
.hoy__cab { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.hoy__marca { flex: 0 0 auto; width: 2.9rem; height: 2.9rem; display: grid; place-items: center; border-radius: 0.9rem; font-size: 1.5rem;
    background: var(--acento-solido); color: #fff; box-shadow: 0 6px 18px color-mix(in srgb, var(--acento-solido) 35%, transparent); }
.hoy__titulo { font-size: clamp(1.4rem, 3.2vw, 1.9rem); margin: 0; line-height: 1.1; }
.hoy__sub { display: block; color: var(--mut); font-size: 0.95rem; margin-top: 0.15rem; }
.hoy__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.hoy__it { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.3rem; border: 1px solid var(--borde); border-radius: 1.1rem; background: var(--bg);
    text-decoration: none; color: inherit; position: relative; overflow: hidden; transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease; }
.hoy__it::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--acento-solido); }
.hoy__it:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--acento-solido) 50%, transparent); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12); }
.hoy__ico { flex: 0 0 auto; width: 3.4rem; height: 3.4rem; display: grid; place-items: center; border-radius: 1rem; font-size: 1.85rem;
    background: color-mix(in srgb, var(--acento-solido) 16%, var(--panel-solido)); color: var(--acento); }
.hoy__txt { min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.hoy__tag { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--acento); }
.hoy__tit { font-weight: 800; font-size: 1.12rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hoy__desc { font-size: 0.9rem; color: var(--mut); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hoy__ir { flex: 0 0 auto; color: var(--mut); font-size: 1.3rem; }
.hoy__it--alerta::before { background: #dc2626; }
.hoy__it--alerta .hoy__ico { background: color-mix(in srgb, #dc2626 16%, var(--panel-solido)); color: #dc2626; }
.hoy__it--alerta .hoy__tag { color: #dc2626; }
.hoy__it--aviso::before { background: #f59e0b; }
.hoy__it--aviso .hoy__ico { background: color-mix(in srgb, #f59e0b 18%, var(--panel-solido)); color: #b45309; }
.hoy__it--aviso .hoy__tag { color: #b45309; }
.hoy__it--fiesta::before { background: #ec4899; }
.hoy__it--fiesta .hoy__ico { background: color-mix(in srgb, #ec4899 16%, var(--panel-solido)); color: #db2777; }
.hoy__it--fiesta .hoy__tag { color: #db2777; }
.hoy__it--espacio::before { background: #6366f1; }
.hoy__it--espacio .hoy__ico { background: color-mix(in srgb, #6366f1 16%, var(--panel-solido)); color: #6366f1; }
.hoy__it--espacio .hoy__tag { color: #6366f1; }
.hoy__it--sismo::before { background: #0ea5e9; }
.hoy__it--sismo .hoy__ico { background: color-mix(in srgb, #0ea5e9 16%, var(--panel-solido)); color: #0284c7; }
.hoy__it--sismo .hoy__tag { color: #0284c7; }
.hoy__it--luz::before { background: #eab308; }
.hoy__it--luz .hoy__ico { background: color-mix(in srgb, #eab308 20%, var(--panel-solido)); color: #a16207; }
.hoy__it--luz .hoy__tag { color: #a16207; }
@media (max-width: 560px) {
    .hoy { padding: 1.2rem 1rem; }
    .hoy__grid { grid-template-columns: 1fr; }
    .ecl-ficha { flex-direction: column; text-align: center; }
    .ecl-ficha__vis { text-align: left; }
    .ecl-ficha__fecha { justify-content: center; }
}
@media (max-width: 560px) {
    .lz-buscar { flex-basis: 100%; }
    .lz-sel { flex: 1 1 45%; }
    .lz-vista { margin-left: 0; }
    .lz-more { padding-left: 0.8rem; }
    .lz-fecha { font-size: 0.72rem; white-space: normal; }
}
.seccion-banner__fondo {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.44;
    pointer-events: none;
    -webkit-mask: linear-gradient(90deg, transparent 6%, #000 52%);
    mask: linear-gradient(90deg, transparent 6%, #000 52%);
}
.seccion-banner__fondo svg { display: block; width: 100%; height: 100%; }
/* Sin ilustración: la sección se distingue solo por su banda de color. */
.seccion-banner__fondo, .cabecera-detalle__fondo { display: none; }
.seccion-banner__txt { position: relative; z-index: 1; max-width: 42ch; }
.grupo__titulo--banner { margin: 0; padding: 0; border-bottom: 0; font-size: 1.7rem; }
.seccion-banner .seccion__sub { margin: 0.3rem 0 0; }
.seccion-banner--strip .seccion__sub { margin: 0; }
@media (max-width: 560px) {
    .seccion-banner__txt { max-width: none; }
    .grupo__titulo--banner { font-size: 1.35rem; }
}

/* Mini-banner de sección: una línea que explica de qué va cada bloque. */
.seccion__sub {
    margin: 0 0 1.15rem;
    color: var(--mut);
    font-size: 0.95rem;
    line-height: 1.45;
    max-width: 62ch;
}
.grupo__titulo + .seccion__sub { margin-top: -0.9rem; }
.kpis__cab + .seccion__sub,
.mapa-esp2__cab + .seccion__sub { margin-top: -0.35rem; }

.grupo__titulo {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0 0 1.35rem;
    padding-bottom: 0.85rem;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    border-bottom: 1px solid var(--borde);
}
.grupo__titulo i {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.7rem;
    color: var(--acento);
    font-size: 1.35rem;
    background: color-mix(in srgb, var(--acento) 10%, var(--panel-solido));
    border: 1px solid color-mix(in srgb, var(--acento) 16%, transparent);
    flex: 0 0 auto;
}
.grupo__contador {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--mut);
    padding: 0.2rem 0.7rem;
    border: 1px solid var(--borde);
    border-radius: 1rem;
    /* Ya no es solo un número: puede decir "6 · 1 fijada arriba" cuando la sección
       ha cedido tarjetas a Fijados. Que no se parta en dos líneas. */
    white-space: nowrap;
    flex: none;
}
@media (max-width: 560px) {
    .grupo__titulo { font-size: 1.5rem; gap: 0.6rem; }
    .grupo__titulo i { width: 2.3rem; height: 2.3rem; font-size: 1.25rem; }
}

.buscar-cajon {
    display: block;
    width: 100%;
    max-width: 34rem;
    margin: 0 auto 1.3rem;
    font-size: 1.08rem;
    padding: 0.8rem 1.15rem;
    border-radius: 0.9rem;
}

.vacio-busqueda {
    display: none;
    padding: 2rem 0;
    text-align: center;
    color: var(--mut);
}
.vacio-busqueda.visible { display: block; }

/* Opciones de trivia (revelan la respuesta al pulsar) */
.opcion-trivia {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.7rem 0.9rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--borde-fuerte);
    border-radius: 0.6rem;
    background: var(--bg-2);
    color: var(--texto);
    font-size: 0.95rem;
    cursor: pointer;
    transition: border-color var(--t-rapido) var(--ease-out), background var(--t-rapido) var(--ease-out), transform var(--t-rapido) var(--ease-out);
}
.opcion-trivia:hover { border-color: var(--neon); }
.opcion-trivia:active { transform: scale(0.99); }
.opcion-trivia.correcta { background: color-mix(in srgb, #22c55e 22%, transparent); border-color: #22c55e; }
.opcion-trivia.incorrecta { background: color-mix(in srgb, #ef4444 18%, transparent); border-color: #ef4444; }

/* --------------------------------------------------------- esqueletos carga */

/* Esqueleto que ocupa exactamente lo que ocupará el dato: misma altura para la cifra
   (30px), el subtítulo (12px) y cada fila (12px). Barrido en diagonal, no parpadeo. */
.esqueleto { display: block; }

.esq {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(100deg,
        var(--bg-2) 30%,
        color-mix(in srgb, var(--neon) 14%, var(--bg-2)) 50%,
        var(--bg-2) 70%);
    background-size: 220% 100%;
    animation: esq-barrido 1.4s linear infinite;
}
.esq--num { height: 30px; width: 56%; }
.esq--w40  { width: 40%; margin-top: 8px; }
.esq--w60  { width: 60%; margin-top: 12px; }
.esq--w75  { width: 75%; margin-top: 12px; }
.esq--w90  { width: 90%; margin-top: 12px; }
.esq--w100 { width: 100%; margin-top: 12px; }

@keyframes esq-barrido { to { background-position: -220% 0; } }

/* ------------------------------------------- estado "fallo de refresco" y vacío */

/* Regla: un dato válido NO se borra nunca, se marca. La cifra se queda, se atenúa y
   gana el aviso de desde cuándo no se actualiza más un botón de reintento. */
.tarjeta.is-stale { border-color: color-mix(in srgb, var(--ambar) 45%, transparent); }
.tarjeta.is-stale .dato-grande { color: var(--mut); }

.stale-flag {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: color-mix(in srgb, var(--ambar) 10%, transparent);
    border-radius: 9px;
    padding: 8px 10px;
    margin-top: 11px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--mut);
}
.stale-flag b { color: var(--ambar); }

.retry {
    background: transparent;
    border: 1px solid var(--borde-fuerte);
    border-radius: 8px;
    padding: 0 11px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 650;
    color: var(--acento);
    cursor: pointer;
    min-height: 34px;
    margin-top: 9px;
}
.retry:hover { border-color: var(--acento); }
.retry:focus-visible { outline: 2px solid var(--anillo); outline-offset: 2px; }

/* Estado vacío CON salida: nunca un hueco mudo. */
.empty {
    text-align: center;
    padding: 26px 16px;
    color: var(--mut);
}
.empty p { margin: 0 0 12px; font-size: 13.5px; }

/* ------------------------------------------ suavizado del tema claro (menos neón) */

:root[data-tema="light"] .tarjeta::before,
:root[data-tema="light"] .tarjeta-plana--neon::before { opacity: 0.55; }
:root[data-tema="light"] .tarjeta:hover { box-shadow: var(--sombra), 0 0 26px -20px var(--neon); }
:root[data-tema="light"] .tira__item::before { box-shadow: none; }
:root[data-tema="light"] .tira__item:hover { box-shadow: var(--sombra); }
:root[data-tema="light"] .cabecera-detalle__ico { box-shadow: 0 0 22px -14px var(--neon); }

/* ------------------------------------------------------------------ mapa */

.mapa {
    height: 480px;
    border-radius: 0.8rem;
    overflow: hidden;
    border: 1px solid var(--borde);
    margin-bottom: 1rem;
    position: relative;
    z-index: 0;
}
.mapa--esp { height: 420px; }
.mapa--alto { height: 640px; }
@media (max-width: 640px) {
    /* En móvil los mapas eran demasiado pequeños: crecen con la pantalla (clamp), con
       un mínimo generoso y un tope para que no tapen todo en pantallas altas. */
    .mapa { height: clamp(400px, 68vh, 560px); }
    .mapa--esp { height: clamp(360px, 62vh, 520px); }
    .mapa--alto { height: clamp(460px, 78vh, 640px); }
    .mapa--global { height: clamp(440px, 78vh, 640px); }
}

/* Comparador de ciudades. */
.comparar-sel { margin-bottom: 1rem; }
.comparar-tabla th, .comparar-tabla td { text-align: right; }
.comparar-tabla th:first-child, .comparar-tabla td:first-child { text-align: left; }
.comparar-mejor { color: var(--neon); font-weight: 700; }

/* ---------------------------------------------------- cola de la ficha (.tail)

   Preguntas frecuentes, "ver también" e "inserta este dato" van EN FILA, no apiladas:
   antes había que recorrer media pantalla para pasar de una a la siguiente. */
.tail {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 16px;
    margin-top: 26px;
    align-items: start;
}
.tail > * {
    margin: 0;
    background: var(--bg-2);
    border-radius: 12px;
    padding: 15px 16px;
    max-width: none;
}
/* `.insertar` trae `margin: 2rem 0 1rem` de cuando era una sección suelta, y como
   `.tail > *` tiene su misma especificidad y va antes en el archivo, ganaba ella: la
   tercera columna quedaba 32 px más baja que sus dos hermanas. Con la clase, gana esta. */
.tail > .insertar { margin: 0; }
.tail h2 { margin: 0 0 9px; font-size: 13.5px; }
.tail .insertar__caja { flex-direction: column; gap: 0.6rem; }
.tail .insertar__preview { width: 100%; height: 130px; }
.tail .insertar__codigo { min-width: 0; }
.tail .insertar__code { font-size: 10.5px; padding: 0.6rem; }
.tail .insertar__texto { font-size: 12.5px; margin-bottom: 0.6rem; }
.tail .relacionadas__lista { gap: 0; }

@media (max-width: 960px) { .tail { grid-template-columns: 1fr; } }

/* ------------------------------------------------- mapa y lista en paralelo

   El mapa se queda fijo mientras recorres la tabla, en vez de perderse arriba a los
   dos desplazamientos. Debajo de 960 px vuelven a apilarse. */
.split {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    border: 1px solid var(--borde);
    border-radius: 14px;
    overflow: clip;
    background: var(--panel-solido);
    box-shadow: var(--sombra);
    margin-bottom: 1.1rem;
}
.split-map { border-right: 1px solid var(--borde); padding: 14px; }
.split-map .inner { position: sticky; top: 120px; }
.split-map .mapa { height: 400px; margin-bottom: 0; }
.split-list { padding: 14px; min-width: 0; }
.split-list .pager { margin-bottom: 0; }

@media (max-width: 960px) {
    .split { grid-template-columns: 1fr; }
    .split-map { border-right: 0; border-bottom: 1px solid var(--borde); }
    .split-map .inner { position: static; }
    .split-map .mapa { height: clamp(280px, 42vh, 380px); }
}

/* Aviso de fuentes mezcladas: cuando el mismo dato puede venir de dos sitios y no
   coincidir, se dice antes de enseñarlo, no en una nota al pie. */
.mixed {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    background: color-mix(in srgb, var(--ambar) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--ambar) 28%, transparent);
    border-radius: 11px;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--mut);
    margin: 14px 0;
}
.mixed b { color: var(--ambar); }
.mixed a { color: var(--acento); font-weight: 650; text-decoration: underline; }

/* Cada fila de la comparativa dice su fuente y su hora. */
.cmp-fuente { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--mut-2); font-weight: 400; }

/* /cerca: dos caminos. Si deniegas la ubicación, la página era un callejón sin salida
   con casi toda la pantalla en blanco. */
.geo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; margin: 1.2rem 0; }
.geo > div {
    background: var(--panel-solido);
    border: 1px solid var(--borde);
    border-radius: 14px;
    padding: 20px;
    box-shadow: var(--sombra);
}
.geo h2 { margin: 0 0 6px; font-size: 16px; }
.geo p { margin: 0 0 14px; font-size: 13.5px; color: var(--mut); }
.geo .nota { font-size: 12px; color: var(--mut-2); margin: 10px 0 0; }
@media (max-width: 960px) { .geo { grid-template-columns: 1fr; } }

/* Contexto bajo la cabecera: para qué sirve el dato, en una frase. */
.ctx {
    margin: 14px 0 0;
    font-size: 14.5px;
    color: var(--mut);
    max-width: 70ch;
}

/* ------------------------------------------------------- controles pegados

   Segunda fila pegajosa, justo bajo la cabecera: los filtros siguen a mano aunque
   bajes por una tabla de 856 filas.

   El `top` iba a 52 px fijos, pero la cabecera mide 64 en móvil y 67 en escritorio:
   la barra se metía debajo y quedaba tapada por ella. Lo mide pie.php y lo publica
   en --alto-cabecera. */
.controles {
    position: sticky;
    top: var(--alto-cabecera, 52px);
    z-index: 15;
    margin: 0 -1.15rem 1.1rem;
    padding: 0 1.15rem;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--borde);
}
.controles .filtros { padding: 0.7rem 0; }
/* En el catálogo, buscador y categorías comparten la misma barra pegajosa. */
/* Una barra de controles alta pegada es peor que no pegarla: en /gasolina a 390 px
   son cinco selectores envueltos en 384 px que, con la cabecera, dejaban fija el 53 %
   de la pantalla, y encima empujaban la cabecera de la tabla hasta media altura útil.
   Pasado el umbral (pie.php), se suelta y se recupera la pantalla. */
.controles--suelta { position: static; }

.controles--catalogo { padding-top: 0.7rem; padding-bottom: 0.2rem; }
.controles--catalogo .buscar-cajon { margin-bottom: 0.6rem; }
.controles--catalogo .filtros-cat { margin-bottom: 0.5rem; }
.controles__cuenta {
    margin-left: auto;
    font-size: 13px;
    color: var(--mut);
    font-variant-numeric: tabular-nums;
    align-self: center;
}
/* Atajo para saltarse la tabla entera con el teclado. */
.saltar-tabla {
    align-self: center;
    font-size: 12.5px;
    font-weight: 650;
    color: var(--acento);
    border: 1px dashed var(--borde-fuerte);
    border-radius: 9px;
    padding: 0 11px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.saltar-tabla:hover { border-color: var(--acento); }

/* Paginador de tablas y listas largas: páginas numeradas, con el tramo escrito. */
.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0.9rem 0 1rem;
}
.pager__btn {
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 0 12px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 9px;
    background: var(--panel-solido);
    color: var(--mut);
    cursor: pointer;
}
.pager__btn:hover:not(:disabled) { border-color: var(--acento); color: var(--acento); }
.pager__btn:disabled { opacity: 0.4; cursor: default; }
.pager__btn[aria-current="page"] {
    background: var(--texto);
    color: var(--bg);
    border-color: var(--texto);
    font-weight: 750;
}
.pager__hueco { color: var(--mut-2); }
.pager__info {
    width: 100%;
    text-align: center;
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--mut-2);
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ áreas táctiles

   Regla global: todo lo que se pulsa mide 44 px de alto real. Antes ni un solo
   control llegaba: las casillas de capa del mapa medían 13 px, los enlaces "ver en
   el mapa" de /gasolina 19 (y son 855), los botones de tarjeta 27 y los enlaces del
   pie 17. Las excepciones de abajo son celdas de una rejilla, donde 44 px rompería
   la propia rejilla; ahí el objetivo es el contenedor, no la celda.
   ------------------------------------------------------------------------- */

button,
select,
textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
    min-height: 44px;
}

/* Enlaces que funcionan como botón: además de alto, hay que centrarlos. */
.marca,
.volver,
.icono-btn,
.accion,
.tarjeta__ir,
.tarjeta__fuente,
.tarjeta__cta,
.tarjeta__aff,
.fuente-cred,
.pie-legal a,
.pie-web a,
.relacionadas__lista a,
.tabla__mapa {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* Excepciones: celdas de rejilla y controles embebidos donde 44 px rompe el diseño.
   En todas ellas el área pulsable real es su contenedor (la etiqueta, la fila). */
.cal__c,
.layer input,
.maplibregl-ctrl-attrib button,
.maplibregl-popup-close-button,
.spark__col {
    min-height: 0;
}

/* -------------------------------------------------------------- mapa en vivo */

/* Capas: eran casillas de 13 px, el único control de la página. Ahora 44 px. */
.layers { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.layer {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0 15px;
    min-height: 44px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 99px;
    background: var(--panel-solido);
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--mut);
    user-select: none;
    transition: border-color var(--t-medio) var(--ease-out), background var(--t-medio) var(--ease-out);
}
.layer input { width: 17px; height: 17px; min-height: 0; accent-color: var(--cat, var(--acento)); margin: 0; }
.layer .n { font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--mut-2); }
.layer:has(input:checked) {
    border-color: color-mix(in srgb, var(--cat) 50%, transparent);
    background: color-mix(in srgb, var(--cat) 7%, var(--panel-solido));
    color: var(--cat);
}
.layer:focus-within { outline: 2px solid var(--anillo); outline-offset: 2px; }

/* Mapa + su alternativa en texto, lado a lado. Los 664 puntos existían solo como
   píxeles de un canvas: sin lista no hay nada que leer ni que tabular. */
.map-split {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    border: 1px solid var(--borde);
    border-radius: 14px;
    overflow: hidden;
    background: var(--panel-solido);
    box-shadow: var(--sombra);
}
.map-side { border-right: 1px solid var(--borde); padding: 14px; position: relative; }
/* 440 px: el mapa ocupaba 821, el 97 % de una pantalla de móvil, y se comía el gesto. */
.map-side .mapa { height: 440px; margin-bottom: 0; }
.map-legend { display: flex; align-items: center; gap: 9px; margin-top: 11px; font-size: 12px; color: var(--mut); }
.map-legend .bar { height: 7px; flex: 1; border-radius: 99px; background: linear-gradient(90deg, var(--verde), #c9a227, var(--acento)); }

.list-side { display: flex; flex-direction: column; max-height: 520px; }
.list-head { padding: 13px 14px 9px; border-bottom: 1px solid var(--borde); }
.list-head h2 { margin: 0; font-size: 14px; }
.list-head p { margin: 2px 0 0; font-size: 12px; color: var(--mut-2); }
.list-body { overflow: auto; padding: 6px 8px; }

.ev {
    display: flex;
    gap: 11px;
    align-items: center;
    padding: 0 9px;
    min-height: 44px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--borde);
    border-radius: 9px;
    cursor: pointer;
    color: inherit;
    font: inherit;
}
.ev:hover, .ev:focus-visible { background: var(--bg-2); }
.ev[aria-current="true"] { background: color-mix(in srgb, var(--cat) 12%, transparent); }
.ev .m { min-width: 46px; font-size: 17px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--cat); }
.ev .p { flex: 1; min-width: 0; }
.ev .p b { display: block; font-size: 13px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev .p span { font-size: 11.5px; color: var(--mut-2); }

@media (max-width: 900px) {
    .map-split { grid-template-columns: 1fr; }
    .map-side { border-right: 0; border-bottom: 1px solid var(--borde); }
    .map-side .mapa { height: clamp(300px, 46vh, 420px); }
}

/* Controles de MapLibre a 44 px (venían a 29). */
.maplibregl-ctrl-group button { width: 44px !important; height: 44px !important; }

/* El lienzo del mapa es enfocable (tabindex=0) pero su anillo de foco medía 0,67 px:
   con el teclado no se veía dónde estabas. */
.maplibregl-canvas:focus-visible,
.maplibregl-canvas-container:focus-visible {
    outline: 3px solid var(--anillo);
    outline-offset: -3px;
}

/* "Cerca de mí": pantalla inicial. */
.cerca-inicio { text-align: center; padding: 1.5rem 0; max-width: 34rem; margin: 0 auto; }
.boton--grande { font-size: 1rem; padding: 0.8rem 1.4rem; margin: 1rem 0 0.5rem; }

/* Explorador de playas: mapa (todas) + lista sincronizada. */
.playas-explorer { display: grid; grid-template-columns: 1fr 300px; gap: 1rem; margin-bottom: 1rem; }
.playas-explorer .mapa { height: 460px; margin-bottom: 0; }
.playas-lista { max-height: 460px; overflow-y: auto; border: 1px solid var(--borde); border-radius: 0.8rem; padding: 0.4rem; background: var(--bg-1, var(--bg-2)); }
.playas-lista__cab { padding: 0.3rem 0.5rem 0.5rem; position: sticky; top: 0; }
.playa-item { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 0.5rem; padding: 0.5rem 0.6rem; cursor: pointer; color: inherit; font: inherit; }
.playa-item:hover { background: var(--bg-2); }
.playa-item.sel { background: color-mix(in srgb, var(--neon) 18%, transparent); }
.playa-item__n { display: block; font-weight: 600; }
.playa-item__m { display: block; }
@media (max-width: 720px) {
    .playas-explorer { grid-template-columns: 1fr; }
    .playas-explorer .mapa { height: 340px; }
    .playas-lista { max-height: 320px; }
}

/* Esqueleto del mapa: el hueco más alto de la página dejaba de estar en blanco. */
.mapa-cargando {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    border-radius: inherit;
    font-size: 12.5px;
    color: var(--mut);
    background: linear-gradient(100deg,
        var(--bg-2) 30%,
        color-mix(in srgb, var(--neon) 12%, var(--bg-2)) 50%,
        var(--bg-2) 70%);
    background-size: 220% 100%;
    animation: esq-barrido 1.4s linear infinite;
}

.maplibregl-map { background: var(--bg-2); font: inherit; }
.maplibregl-popup-content {
    font-family: var(--sans);
    font-size: 0.85rem;
    color: #1f2937;
    border-radius: 0.5rem;
    padding: 0.5rem 0.7rem;
}
/* El globo no puede ser un callejón: lleva a la ficha completa del evento. */
.pop-tit { display: block; font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.pop-meta { display: block; font-family: var(--mono); font-size: 10.5px; color: #6b7280; margin-top: 3px; }
.pop-go {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 650;
    color: var(--acento-solido);
    text-decoration: none;
}
.pop-go:hover { text-decoration: underline; }
.maplibregl-popup-close-button { width: 34px; height: 34px; font-size: 18px; }

.marcador-emoji {
    font-size: 22px;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.55));
}

.marcador-emoji--iss { font-size: 30px; }

/* --------------------------------------------------------------- responsive */

@media (max-width: 560px) {
    /* KPIs en dos columnas (antes 1): menos scroll y tarjetas más cuadradas. */
    .tira { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
    .tira__item { padding: 0.7rem 0.75rem; gap: 0.55rem; }
    .tira__ico { width: 2.3rem; height: 2.3rem; font-size: 1.1rem; }
    .rejilla { grid-template-columns: 1fr; }
    .rejilla > .tarjeta--ancha { grid-column: span 1; }
    .reloj { display: none; }
    /* "en vivo" más compacto para que la cabecera respire. */
    .live { font-size: 0.62rem; letter-spacing: 0.06em; padding: 0.26rem 0.5rem; }
    .estads { gap: 1.1rem; }

    /* Iconos-botón: en móvil, más grandes, con aspecto de botón y buen área de toque
       (≈44px), para que se vean y se pulsen sin apretar. */
    .icono-btn { width: 2.7rem; height: 2.7rem; border-radius: 0.8rem; }
    .icono-btn i { font-size: 1.35rem; }
    .tarjeta__cab { gap: 0.5rem; padding: 1rem 0.95rem 0.85rem; }
    .tarjeta__accion,
    .tarjeta__ir,
    .tarjeta__fijar {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 0.75rem;
        background: var(--panel);
        border: 1px solid var(--borde);
        color: var(--mut);
    }
    .tarjeta__accion i,
    .tarjeta__ir i,
    .tarjeta__fijar i { font-size: 1.2rem; }
    .tarjeta__titulo { font-size: 1.2rem; }

    /* Filtros de categoría: altura cómoda para el dedo. */
    .filtros-cat .pill { padding: 0.55rem 0.95rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* Transparencia reducida: los cristales pasan a superficies sólidas y sin blur (apple §14). */
@media (prefers-reduced-transparency: reduce) {
    .barra,
    .tarjeta, .tira__item, .tarjeta-plana,
    .hero__texto, .hero__pico, .hero__chip,
    .pill, .menu-geo, .icono-btn, .boton {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: var(--panel-solido);
    }
}

/* Contraste alto: bordes más marcados en toda la interfaz. */
@media (prefers-contrast: more) {
    :root, :root[data-tema="light"] { --borde: var(--borde-fuerte); }
}

/* --------------------------------------------------------------- toast (avisos) */
.toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translate(-50%, 1rem);
    z-index: 90;
    max-width: min(90vw, 30rem);
    padding: 0.7rem 1.1rem;
    border-radius: 0.7rem;
    background: var(--panel-solido);
    color: var(--texto);
    border: 1px solid var(--borde-fuerte);
    box-shadow: var(--sombra);
    font-size: 0.92rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-medio) var(--ease-out), transform var(--t-medio) var(--ease-out);
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
    .toast { transition: opacity var(--t-medio) linear; transform: translate(-50%, 0); }
}

/* --------------------------------------------------- paleta de comandos (Ctrl+K) */
.paleta {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 1rem 1rem;
    background: rgba(4, 7, 16, 0.55);
}
.paleta.visible { display: flex; }
.paleta__caja {
    width: min(560px, 100%);
    background: var(--panel-solido);
    border: 1px solid var(--borde-fuerte);
    border-radius: 0.9rem;
    box-shadow: var(--sombra);
    overflow: hidden;
}
.paleta__cab { display: flex; align-items: center; gap: 0.6rem; padding: 0.9rem 1rem; border-bottom: 1px solid var(--borde); }
.paleta__cab > i { color: var(--mut); font-size: 1.15rem; }
.paleta__inp { flex: 1; min-width: 0; background: none; border: 0; color: var(--texto); font-size: 1.05rem; outline: none; }
.paleta__kbd { font: 0.72rem var(--mono); color: var(--mut); border: 1px solid var(--borde-fuerte); border-radius: 0.35rem; padding: 0.1rem 0.35rem; }
.paleta__lista { list-style: none; margin: 0; padding: 0.4rem; max-height: 52vh; overflow-y: auto; }
.paleta__item { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.7rem; border-radius: 0.55rem; cursor: pointer; }
.paleta__item > i { color: var(--neon); font-size: 1.05rem; width: 1.2rem; text-align: center; }
.paleta__nom { flex: 1; min-width: 0; }
.paleta__item.activo { background: color-mix(in srgb, var(--neon) 14%, transparent); }
.paleta__cat { text-transform: capitalize; }
.paleta__vacio { padding: 1rem; text-align: center; }
.paleta__pie { padding: 0.55rem 1rem; border-top: 1px solid var(--borde); }
@media (prefers-reduced-motion: no-preference) {
    .paleta.visible .paleta__caja { animation: paleta-in 0.16s var(--ease-out); }
}
@keyframes paleta-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------- alertas de precio */
.tarjeta__alerta.activa { color: var(--neon); }
.alerta-pop {
    position: absolute;
    z-index: 95;
    width: 240px;
    max-width: calc(100vw - 16px);
    padding: 0.9rem;
    border-radius: 0.8rem;
    background: var(--panel-solido);
    border: 1px solid var(--borde-fuerte);
    box-shadow: var(--sombra);
}
.alerta-pop__t { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; }
.alerta-pop__row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.7rem; }
.alerta-pop__inp { width: 100%; }
.alerta-pop__acc { display: flex; gap: 0.5rem; justify-content: flex-end; }
.alerta-pop__push { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.7rem; cursor: pointer; }
.alerta-pop__push input { accent-color: var(--neon); }
.alerta-pop__nota { margin-top: 0.5rem; }
.boton--sutil { background: none; border: 1px solid var(--borde-fuerte); color: var(--mut); }
.boton--sutil:hover { color: var(--texto); border-color: var(--neon); }

/* ---------------------------------------------------- ranking gasolina (SEO) */
.miga { margin: 0 0 1rem; color: var(--mut); font-size: 0.9rem; }
.miga a { color: var(--mut); text-decoration: none; }
.miga a:hover { color: var(--neon); }

.tabla-ranking { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.tabla-ranking th, .tabla-ranking td { padding: 0.6rem 0.7rem; text-align: left; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla-ranking th { color: var(--mut); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.03em; }
.tabla-ranking td span.small { display: block; }
.tabla-ranking .ta-der { text-align: right; white-space: nowrap; }
.tabla-ranking .fila-top td { background: color-mix(in srgb, var(--neon) 8%, transparent); }
.tabla-ranking tr:last-child td { border-bottom: 0; }

.relacionadas__lista--prov { flex-wrap: wrap; }
.relacionadas__lista--prov a { font-size: 0.88rem; }

/* ------------------------------------------------------- sparkline (tendencia) */
.sparkline {
    margin-top: 0.8rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--borde);
    color: var(--neon);
}
.sparkline__eti { display: block; margin-bottom: 0.25rem; letter-spacing: 0.02em; }
.spark-svg { display: block; overflow: visible; }

/* -------------------------------------------------- insertar widget (detalle) */
.insertar { margin: 2rem 0 1rem; }
.insertar__titulo { display: flex; align-items: center; gap: 0.5rem; font-size: 1.05rem; margin: 0 0 0.4rem; }
.insertar__titulo i { color: var(--neon); }
.insertar__texto { color: var(--mut); margin: 0 0 0.9rem; font-size: 0.95rem; }
.insertar__caja { display: flex; flex-wrap: wrap; gap: 1rem; align-items: stretch; }
.insertar__preview { flex: none; width: 340px; max-width: 100%; height: 150px; border: 0; border-radius: 0.9rem; }
.insertar__codigo { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 0.6rem; }
.insertar__code {
    display: block;
    padding: 0.8rem 0.9rem;
    border-radius: 0.6rem;
    border: 1px solid var(--borde);
    background: color-mix(in srgb, var(--panel-solido) 90%, transparent);
    color: var(--mut);
    font: 0.82rem/1.5 var(--mono);
    word-break: break-all;
    user-select: all;
}
.insertar__copiar { align-self: flex-start; }

/* --------------------------------------------------------- titular del día */
.titular {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1.1rem;
    padding: 0.7rem 1rem;
    border-radius: 0.7rem;
    border: 1px solid var(--borde);
    background: color-mix(in srgb, var(--panel-solido) 85%, transparent);
    color: var(--texto);
    font-size: 0.98rem;
    font-weight: 600;
    box-shadow: var(--sombra);
}
.titular[hidden] { display: none; }
.titular__tag {
    flex: none;
    font: 700 0.68rem/1 var(--mono);
    letter-spacing: 0.08em;
    color: var(--neon);
    border: 1px solid color-mix(in srgb, var(--neon) 45%, transparent);
    padding: 0.28rem 0.45rem;
    border-radius: 0.4rem;
}
.titular__ico { flex: none; color: var(--neon); font-size: 1.15rem; }
.titular__txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.titular--in { animation: titular-in var(--t-lento) var(--ease-out); }
@keyframes titular-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .titular--in { animation: none; } }
@media (max-width: 560px) { .titular__txt { white-space: normal; } }

/* ----------------------------------------------- modo escaparate (pantalla/TV) */
/* Vista limpia para monitor o TV: oculta navegación y deja solo los datos. */
:root[data-escaparate] .hero,
:root[data-escaparate] .buscar-cajon,
:root[data-escaparate] .filtros-cat,
:root[data-escaparate] .pie-web,
:root[data-escaparate] .barra__sep,
:root[data-escaparate] .marca__barra { display: none; }
:root[data-escaparate] .envoltura { max-width: 100%; }
:root[data-escaparate] .grupo:first-of-type { margin-top: 0.8rem; }

/* Cabecera reactiva del detalle: la cifra grande y sus calificadores (variante, ámbito
   y hora). Va en el HTML del servidor (SEO) y el JS la reescribe con cada filtro, así
   que siempre describe lo que hay en pantalla. */
.dato {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 18px;
    margin: 0.5rem 0 6px;
}
.dato[hidden] { display: none; }
.dato-v { display: flex; align-items: baseline; gap: 7px; }
.dato-v b {
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--acento);
}
.dato-v u { text-decoration: none; font-size: 15px; font-weight: 650; color: var(--mut); }

/* Migas visibles sobre el H1. */
.crumb { font-size: 12.5px; color: var(--mut-2); margin: 0 0 9px; }
.crumb a { color: var(--mut); font-weight: 600; text-decoration: none; }
.crumb a:hover { color: var(--acento); }

.qual { display: flex; flex-wrap: wrap; gap: 6px; }
.q {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 99px;
    background: var(--bg-2);
    border: 1px solid var(--borde);
    color: var(--mut);
}
.q[hidden] { display: none; }
.q.scope {
    border-color: color-mix(in srgb, var(--neon) 40%, transparent);
    color: var(--texto);
}
.q.time { font-family: var(--mono); font-size: 11px; }

/* Leyenda de avisos del mapa de la portada (se muestra al activar la pestaña "Avisos"). */
.mapa-esp__leyenda[hidden], .mapa-avisos-ley[hidden] { display: none; }
.mapa-avisos-ley {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
    margin-top: 0.8rem;
    font-size: 0.8rem;
    color: var(--mut);
}
.mapa-avisos-ley__it { display: inline-flex; align-items: center; gap: 0.35rem; }
.mapa-avisos-ley .sw { width: 0.85rem; height: 0.85rem; border-radius: 3px; display: inline-block; }
.mapa-avisos-ley .sw--am { background: #f2c94c; }
.mapa-avisos-ley .sw--na { background: #f2994a; }
.mapa-avisos-ley .sw--ro { background: #eb5757; }
.mapa-avisos-ley__n { font-weight: 700; color: var(--texto); }

/* Versión móvil del mapa: una lista de comunidades (color + valor), más legible que
   la silueta minúscula. Reutiliza los mismos datos y el mismo selector de métrica. */
.mapa-lista { display: none; }
.mapa-lista__it {
    display: flex; align-items: center; gap: 0.45rem;
    padding: 0.55rem 0.6rem;
    border: 1px solid var(--borde); border-radius: 0.7rem;
    background: var(--panel-solido); box-shadow: var(--sombra);
    text-decoration: none; color: var(--texto);
}
.mapa-lista__it:active { transform: scale(0.99); }
.mapa-lista__dot { width: 0.8rem; height: 0.8rem; border-radius: 50%; flex: 0 0 auto; }
.mapa-lista__nom { flex: 1; min-width: 0; font-size: 0.8rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mapa-lista__val { flex: 0 0 auto; font-size: 0.8rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
    .mapa-esp2__lienzo, .mapa-esp__leyenda, .mapa-avisos-ley, .mapa-play { display: none; }
    /* 1 columna: caben los nombres largos ("Comunidad Valenciana") sin cortarse. */
    .mapa-lista { display: grid; grid-template-columns: 1fr; gap: 0.4rem; }
    .mapa-lista__nom { white-space: normal; }
    /* El selector Temperatura/Lluvia/Viento/Avisos no debe desbordar: envuelve. */
    .mapa-esp2__cab { justify-content: flex-start; }
    .mapa-esp2__toggle { flex-wrap: wrap; justify-content: center; }
}

/* Capa de avisos del mapa: contador en la pestaña "Avisos" + latido si hay alguno. */
.mapa-tg__n {
    display: inline-grid;
    place-items: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    margin-left: 0.15rem;
    border-radius: 999px;
    background: #eb5757;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}
.mapa-tg--alerta {
    border-color: #eb5757;
    color: #eb5757;
}
.mapa-tg--alerta:not(.activa) { animation: avisoLate 2s ease-in-out infinite; }
@keyframes avisoLate {
    0%, 100% { box-shadow: 0 0 0 0 rgba(235, 87, 87, 0); }
    50% { box-shadow: 0 0 0 4px rgba(235, 87, 87, 0.16); }
}
@media (prefers-reduced-motion: reduce) {
    .mapa-tg--alerta:not(.activa) { animation: none; }
}

/* Banner "Instalar app" (PWA). Aparece abajo cuando el navegador ofrece la instalación;
   se descarta con la X y descansa 30 días (localStorage). Oculto si ya está instalada. */
.instalar {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    z-index: 60;
    transform: translate(-50%, 140%);
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: min(30rem, calc(100vw - 1.6rem));
    padding: 0.7rem 0.8rem 0.7rem 0.9rem;
    background: var(--panel-solido);
    border: 1px solid var(--borde-fuerte);
    border-radius: 16px;
    box-shadow: var(--sombra);
    opacity: 0;
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.42s ease;
}
.instalar.visible { transform: translate(-50%, 0); opacity: 1; }
.instalar__ico {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 12px;
    font-size: 1.25rem;
    color: #fff;
    background: linear-gradient(135deg, var(--glow-1), var(--glow-2));
}
.instalar__txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.instalar__txt b { color: var(--texto); font-size: 0.95rem; }
.instalar__txt span { color: var(--mut); font-size: 0.8rem; }
.instalar__si {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0.5rem 0.9rem;
    border: 0;
    border-radius: 999px;
    background: var(--acento-solido);
    color: #fff;
    font: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
}
.instalar__si:hover { transform: translateY(-1px); filter: brightness(1.06); }
.instalar__no {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--mut);
    font-size: 1.05rem;
    cursor: pointer;
}
.instalar__no:hover { color: var(--texto); background: var(--borde); }
@media (prefers-reduced-motion: reduce) {
    .instalar { transition: opacity 0.2s ease; }
}

/* ------------------------------------------------------------ móvil: encaje
   Nada debe provocar scroll horizontal. `clip` (no `hidden`) para no romper el
   header sticky. Es la red de seguridad; debajo se corrigen las causas concretas. */
html { overflow-x: clip; }

@media (max-width: 560px) {
    /* La cabecera no cabe con logo + "EN VIVO" + 6 iconos. La navegación por iconos
       se duplica en los botones .acciones de la portada, así que en móvil se ocultan
       (quedan marca, "EN VIVO", tema y la paleta de comandos). */
    .barra { gap: 0.5rem; padding: 0.6rem 0.95rem; }
    .marca { font-size: 1.02rem; }
    .barra a.icono-btn,
    .barra [data-escaparate-boton] { display: none; }

    /* Chips del hero: que el texto pueda encoger en la rejilla de 2 columnas. */
    .hero__chip { min-width: 0; padding: 0.65rem 0.8rem; font-size: 0.9rem; }

    /* Botones de acción: en vez de una fila que se desliza (con opciones ocultas),
       se reparten en dos columnas visibles con buen área de toque. La primaria, ancha. */
    .acciones { gap: 0.55rem; }
    .accion { flex: 1 1 calc(50% - 0.3rem); padding: 0.8rem 0.8rem; }
    .accion i { font-size: 1.35rem; }
    .accion--primaria { flex-basis: 100%; }

    /* Mapa de España: título y selector apilados, pestañas que envuelven, etiquetas
       algo mayores para que se lean, y algo más de aire para el pie/leyenda. */
    .mapa-esp2__cab { flex-direction: column; align-items: stretch; }
    .mapa-esp2__toggle { flex-wrap: wrap; justify-content: center; }
    .mapa-tg { padding: 0.5rem 0.85rem; font-size: 0.82rem; }
    .mapa-r__label { font-size: 26px; }
    .mapa-esp__nota { flex-basis: 100%; }

    /* Espaciado con aire (nada apretado). */
    .kpis, .mapa-esp2 { margin-bottom: 1.8rem; }
    .rejilla { gap: 1rem; padding-bottom: 1.8rem; }
    .grupo { margin-bottom: 2rem; }
}