/* =====================================================================
   assets/css/atlas-clandestino.css
   Estilos EXCLUSIVOS de templates/pages/atlas-clandestino.php
   (Atlas Clandestino · consola táctica sobre mapa)

   IDENTIDAD PROPIA — ESTO NO ES pais.css
   --------------------------------------
   Comparte con el resto del sitio los tokens de marca (--color-primary,
   superficies, tipografías) y nada más. Aquí NO hay hero, ni subnav
   pegajosa, ni secciones apiladas, ni rejillas de tarjetas: ese es el
   lenguaje de la ficha de país, que es una página de LECTURA.

   Esto es una HERRAMIENTA. El mapa ocupa la ventana entera desde el primer
   píxel y todo el cromo —marca, buscador, filtros, listado, últimas
   incorporaciones, ficha de la ruta trazada— flota ENCIMA en paneles de
   cristal. Debajo del mapa solo queda una banda compacta de índice.

   Prefijo `.ac-*` y todo colgando de `.atlas-page`: `atlas.css` se carga en
   TODAS las páginas del sitio desde header.php y ocupa nombres muy
   genéricos (.card-header, .card-title, .map-area, .btn-icon,
   .desktop-only…), varios con `display:none !important`.
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. FIX CLS GLOBAL
   core.css declara para `.lazy-load-section` (newsletter + footer):
       content-visibility: auto; contain-intrinsic-size: 1000px;
   Fuera de pantalla les reserva 1000px de alto; al entrar colapsan a su
   altura real y arrastran todo lo visible => CLS enorme. Se neutraliza
   SOLO aquí (este CSS va después de core.css en la cascada, misma
   especificidad => gana).
   --------------------------------------------------------------------- */
.lazy-load-section {
    content-visibility: visible;
    contain-intrinsic-size: none;
}

/* =====================================================================
   1. TOKENS
   ===================================================================== */
.atlas-page {
    /* — Cristal: el material del que está hecha toda la interfaz —
       ------------------------------------------------------------------
       LA CLAVE ESTÁ EN EL `brightness()` DEL BACKDROP-FILTER.
       Un panel translúcido normal tiene que elegir: o tapa (opaco, se deja
       de ver el mapa) o deja ver (transparente, y el texto se vuelve
       ilegible sobre los tiles claros). Aquí no se tapa: se OSCURECE lo que
       hay detrás con brightness(.5) antes de pintar encima un tinte muy
       ligero (opacidad .34 en vez de .66). Resultado: se ve el mapa a
       través del panel el doble de bien Y el texto gana contraste, porque
       el fondo real llega ya apagado y uniforme.
       En modo claro la operación es la inversa: brightness(1.5) blanquea el
       backdrop. Medido con muestreo de píxeles reales en los dos temas. */
    --g-tint:    rgba(12, 15, 19, 0.34);
    --g-tint-2:  rgba(12, 15, 19, 0.46);   /* paneles con texto denso */
    --g-line:    rgba(255, 255, 255, 0.13);
    --g-line-2:  rgba(255, 255, 255, 0.20);
    --g-blur:    blur(26px) saturate(190%) brightness(0.50);
    --g-ink:     #F4F6F9;
    --g-ink-dim: #AFB9C4;

    /* Bisel: luz arriba, sombra abajo. Es lo que da el grosor del vidrio. */
    --g-bevel:   inset 0 1px 0 rgba(255, 255, 255, .22),
                 inset 0 -1px 0 rgba(0, 0, 0, .38),
                 inset 1px 0 0 rgba(255, 255, 255, .07),
                 inset -1px 0 0 rgba(0, 0, 0, .22);
    /* Sombra en tres planos: contacto, cuerpo y ambiente */
    --g-shadow:  0 2px 6px -2px rgba(0, 0, 0, .55),
                 0 12px 28px -12px rgba(0, 0, 0, .70),
                 0 32px 64px -28px rgba(0, 0, 0, .85);
    /* Borde con degradado (el truco de la máscara, más abajo) */
    --g-edge:    linear-gradient(145deg,
                     rgba(255,255,255,.42) 0%,
                     rgba(255,255,255,.10) 26%,
                     rgba(255,255,255,.02) 52%,
                     rgba(255,255,255,.16) 100%);
    /* Grano finísimo: sin él el cristal parece plástico plano */
    --g-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");

    /* — Acento — */
    --ac-accent: var(--color-primary, #FF5E14);
    /* Acento para TEXTO pequeño. El naranja de marca da 5,2:1 sobre cristal
       oscuro (pasa AA) pero solo 3,1:1 sobre cristal claro. En claro se
       sustituye por una versión oscurecida de 6,4:1. NO usar
       --color-primary directamente en texto pequeño. */
    --ac-accent-text: var(--color-primary, #FF5E14);
    --ac-magenta: var(--color-secondary-magenta, #FF2E63);

    /* — Geometría — */
    --ac-r:    16px;
    --ac-r-sm: 11px;
    --ac-pad:  clamp(12px, 1.6vw, 20px);   /* separación del HUD al borde */
    --ac-panel-w: 372px;
    --ac-chrome-bottom: 0px;
    --ac-ease: cubic-bezier(.22, .61, .36, 1);

    background: var(--color-background);
    color: var(--color-text-primary);
    font-family: var(--font-body);
}

/* Cristal claro: el mismo material, invertido */
body.light-theme .atlas-page {
    --g-tint:    rgba(255, 255, 255, 0.46);
    --g-tint-2:  rgba(255, 255, 255, 0.58);
    --g-line:    rgba(15, 23, 42, 0.09);
    --g-line-2:  rgba(15, 23, 42, 0.16);
    --g-blur:    blur(26px) saturate(180%) brightness(1.52);
    --g-ink:     #0C1116;
    --g-ink-dim: #4E5964;
    --g-bevel:   inset 0 1px 0 rgba(255, 255, 255, .95),
                 inset 0 -1px 0 rgba(15, 23, 42, .09),
                 inset 1px 0 0 rgba(255, 255, 255, .55),
                 inset -1px 0 0 rgba(15, 23, 42, .05);
    --g-shadow:  0 2px 6px -2px rgba(15, 23, 42, .10),
                 0 12px 28px -14px rgba(15, 23, 42, .22),
                 0 32px 64px -30px rgba(15, 23, 42, .28);
    --g-edge:    linear-gradient(145deg,
                     rgba(255,255,255,.95) 0%,
                     rgba(255,255,255,.35) 28%,
                     rgba(15,23,42,.05) 55%,
                     rgba(15,23,42,.12) 100%);
    --ac-accent-text: #A83A08;
}

/* Cifras: sin salto de ancho al cambiar de valor ni al hacer swap de fuente */
.atlas-page :where(.ac-brand__stats b, .ac-count, .ac-opt__n,                    .ac-route__meta, .ac-terr__n, .ac-bar__val, .ac-item__meta) {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.atlas-page :where(a, button, input, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--ac-accent);
    outline-offset: 2px;
    border-radius: 8px;
}

.ac-sr {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.ac-skip {
    position: fixed; top: -120%; left: 14px; z-index: 9999;
    height: 40px; padding: 0 18px;
    display: inline-flex; align-items: center;
    border-radius: 0 0 8px 8px;
    background: var(--ac-accent); color: #000;
    font-family: var(--font-subheading); font-weight: 800;
    font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1;
    text-decoration: none; transition: top .15s ease;
}
.ac-skip:focus { top: 0; }

/* ---------------------------------------------------------------------
   EL MATERIAL: una sola clase para todo el cromo flotante
   --------------------------------------------------------------------- */
.ac-glass {
    position: relative;
    isolation: isolate;
    /* Tres capas apiladas: brillo especular de la esquina superior
       izquierda, grano, y el tinte. En ese orden. */
    background:
        linear-gradient(145deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 22%, transparent 46%),
        var(--g-tint);
    -webkit-backdrop-filter: var(--g-blur);
            backdrop-filter: var(--g-blur);
    border: 0;
    border-radius: var(--ac-r);
    box-shadow: var(--g-shadow), var(--g-bevel);
    color: var(--g-ink);
}

/* Borde de un solo píxel CON DEGRADADO. No se puede con `border`, que solo
   admite un color plano; se pinta un rectángulo del degradado y se recorta
   a su propio contorno con dos máscaras en XOR. Es lo que hace que el canto
   del panel brille arriba a la izquierda y se apague abajo, como el filo de
   una lámina de vidrio de verdad. */
.ac-glass::before {
    content: ''; position: absolute; inset: 0; z-index: 2;
    border-radius: inherit; padding: 1px;
    background: var(--g-edge);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

/* Grano. Muy sutil (4 %) y a propósito: sin microtextura, un panel
   translúcido se lee como plástico. Con ella, como vidrio esmerilado. */
.ac-glass::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    border-radius: inherit;
    background-image: var(--g-grain);
    background-size: 140px 140px;
    /* Sin `mix-blend-mode`. La mezcla integra un poco mejor el grano, pero
       obliga al navegador a componer cada panel en una pasada aparte, y eso
       se paga: 40,3 fps con ella contra 41,3 sin ella (mismo banco de
       pruebas que el bloque 7j). Es poco, pero a una opacidad del 5 % la
       diferencia visual es prácticamente nula, así que no compensa. */
    opacity: .05;
    pointer-events: none;
}
/* El contenido va por encima de grano y borde */
.ac-glass > * { position: relative; z-index: 3; }

/* Sin soporte de backdrop-filter el cristal pasa a opaco: si no, el panel
   se quedaría transparente sobre los tiles y el texto ilegible. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .ac-glass { background: var(--color-surface); }
}

/* =====================================================================
   2. CONSOLA · el mapa ocupa la ventana
   ===================================================================== */
.ac-console {
    position: relative;
    isolation: isolate;                 /* contiene los z-index de Leaflet */
    overflow: hidden;
    /* Alto reservado desde el primer pintado: cero CLS. svh y no vh, para
       que la barra del navegador móvil no lo haga saltar. */
    height: calc(100svh - var(--header-height, 60px));
    min-height: 520px;
    background: var(--color-background);
    /* core.css le da al body `padding-top: var(--header-height)`, pero el
       <style> crítico de header.php declara `html, body { padding: 0 }`
       DESPUÉS y, a igual especificidad, gana el último: sin esto el header
       fijo se comería el principio de la consola. */
    margin-top: var(--header-height, 60px);
}
.ac-map { position: absolute; inset: 0; z-index: 0; background: var(--color-background); }

/* Viñeta: hunde los bordes del mapa para que el cristal despegue del fondo.
   Decorativa y `pointer-events:none`: no le roba ni un clic al mapa. */
.ac-console::after {
    content: ''; position: absolute; inset: 0; z-index: 380;
    pointer-events: none;
    background:
        radial-gradient(130% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.34) 100%),
        linear-gradient(to bottom, rgba(0,0,0,.26) 0%, transparent 17%);
}
body.light-theme .ac-console::after {
    background:
        radial-gradient(130% 100% at 50% 50%, transparent 58%, rgba(15,23,42,.10) 100%),
        linear-gradient(to bottom, rgba(15,23,42,.06) 0%, transparent 15%);
}

/* Esqueleto de carga (absolute => no reflowea al irse) */
.ac-skeleton {
    position: absolute; inset: 0; z-index: 400;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-background); color: var(--g-ink-dim);
    font-family: var(--font-subheading); font-size: 0.74rem;
    letter-spacing: 0.16em; text-transform: uppercase;
    transition: opacity .4s ease, visibility .4s ease;
}
.ac-skeleton::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 25%, rgba(125,125,125,.11) 45%, transparent 65%);
    background-size: 250% 100%;
    animation: ac-shimmer 1.5s linear infinite;
}
@keyframes ac-shimmer { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.ac-console.is-ready .ac-skeleton { opacity: 0; visibility: hidden; }

/* =====================================================================
   3. HUD · todo flota sobre el mapa
   ===================================================================== */
.ac-hud { position: absolute; z-index: 500; }

/* --- 3a. Marca + cifras (arriba a la izquierda) ---------------------- */
.ac-brand {
    top: var(--ac-pad); left: var(--ac-pad);
    max-width: var(--ac-panel-w);
    padding: 13px 18px 14px;
}
.ac-brand__eyebrow {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 6px;
    font-family: var(--font-subheading); font-weight: 800;
    font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--ac-accent-text); line-height: 1;
}
.ac-dot {
    width: 7px; height: 7px; flex: none; border-radius: 50%;
    background: var(--ac-accent);
    animation: ac-ping 2.4s ease-out infinite;
}
@keyframes ac-ping {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ac-accent) 60%, transparent); }
    70%  { box-shadow: 0 0 0 8px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.ac-brand__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(1.35rem, 2.4vw, 1.9rem);
    line-height: 1.12; letter-spacing: 0.5px;
    color: var(--g-ink);
}
.ac-brand__stats {
    display: flex; flex-wrap: wrap; gap: 4px 14px;
    margin: 8px 0 0;
    font-size: 0.75rem; line-height: 1.3; color: var(--g-ink-dim);
}
.ac-brand__stats b { color: var(--g-ink); font-weight: 700; }

/* --- 3b. Herramientas (arriba a la derecha) -------------------------- */
.ac-tools {
    top: var(--ac-pad); right: var(--ac-pad);
    display: flex; gap: 8px; padding: 7px;
    border-radius: 999px;
}
.ac-tool {
    width: 38px; height: 38px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid transparent; border-radius: 999px;
    background: transparent; color: var(--g-ink);
    cursor: pointer; font-size: 0.92rem;
    transition: background .2s, color .2s, border-color .2s;
}
.ac-tool:hover {
    background: color-mix(in srgb, var(--ac-accent) 20%, transparent);
    color: var(--ac-accent-text); border-color: var(--g-line-2);
}
.ac-tool[hidden] { display: none; }

/* --- 3c. Panel de búsqueda y listado (izquierda) --------------------- */
.ac-panel {
    top: calc(var(--ac-pad) + 108px);
    left: var(--ac-pad);
    bottom: var(--ac-pad);   /* hasta abajo: ya no hay carrusel que esquivar */
    width: var(--ac-panel-w);
    display: flex; flex-direction: column;
    overflow: hidden;
    transition: transform .34s var(--ac-ease), opacity .34s var(--ac-ease);
}
/* Plegado: se va por la izquierda sin desmontar nada */
.ac-panel.is-folded { transform: translateX(calc(-100% - var(--ac-pad) - 8px)); opacity: 0; pointer-events: none; }

/* z-index 5 explícito y no accidental: `.ac-glass > *` pone a todos los
   hijos en `position:relative; z-index:3`, y eso convierte a la cabecera en
   un contexto de apilamiento. Sin subirla, el menú desplegable de filtros
   (z-index 20 DENTRO de la cabecera) quedaba atrapado por debajo del
   listado, que es su hermano con el mismo z-index 3 y va después en el DOM. */
.ac-panel__head {
    position: relative; z-index: 5;
    padding: 14px 14px 12px; border-bottom: 1px solid var(--g-line); flex: none;
}

.ac-search { position: relative; height: 40px; }
.ac-search > i {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    color: var(--g-ink-dim); font-size: 0.8rem; pointer-events: none;
}
.ac-search input {
    width: 100%; height: 100%;
    padding: 0 38px 0 36px;
    border: 1px solid var(--g-line-2); border-radius: 999px;
    background: color-mix(in srgb, var(--g-ink) 7%, transparent);
    color: var(--g-ink);
    font-family: var(--font-body); font-size: 0.86rem;
    -webkit-appearance: none; appearance: none;
}
.ac-search input::placeholder { color: var(--g-ink-dim); }
.ac-search input::-webkit-search-cancel-button { display: none; }
.ac-search input:focus {
    outline: none; border-color: var(--ac-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac-accent) 22%, transparent);
}
.ac-search__x {
    position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
    width: 30px; height: 30px;
    display: none; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; background: transparent;
    color: var(--g-ink-dim); cursor: pointer; font-size: 0.78rem;
}
.ac-search.has-value .ac-search__x { display: inline-flex; }
.ac-search__x:hover { background: color-mix(in srgb, var(--g-ink) 13%, transparent); color: var(--ac-accent-text); }

/* Filtros desplegables: no ocupan sitio hasta que se piden */
.ac-filters { display: flex; gap: 7px; margin-top: 11px; }
.ac-filter { position: relative; flex: 1 1 0; min-width: 0; }
.ac-filter__btn {
    width: 100%; height: 34px; padding: 0 11px;
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid var(--g-line-2); border-radius: 999px;
    background: transparent; color: var(--g-ink);
    font-family: var(--font-subheading); font-weight: 700;
    font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase;
    cursor: pointer; white-space: nowrap; overflow: hidden;
    transition: border-color .2s, background .2s, color .2s;
}
.ac-filter__btn > span { overflow: hidden; text-overflow: ellipsis; }
.ac-filter__btn:hover { border-color: var(--ac-accent); }
.ac-filter__btn i:last-child { margin-left: auto; font-size: 0.58rem; opacity: .7; }
.ac-filter__btn[aria-expanded="true"] {
    border-color: var(--ac-accent);
    background: color-mix(in srgb, var(--ac-accent) 15%, transparent);
}
/* Con filtro puesto el botón se rellena: el estado se ve sin abrirlo */
.ac-filter.is-set .ac-filter__btn { background: var(--ac-accent); border-color: var(--ac-accent); color: #000; }

.ac-filter__pop {
    position: absolute; top: calc(100% + 8px); left: 0;
    z-index: 20; width: max(214px, 100%);
    max-height: 268px; overflow-y: auto;
    padding: 7px;
    /* Va DENTRO de otro cristal, así que su backdrop ya llega oscurecido:
       lleva tinte casi sólido en vez de repetir el brightness (encadenar dos
       backdrop-filter apaga el fondo dos veces y deja un agujero negro). */
    background: color-mix(in srgb, var(--color-surface) 94%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
            backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid var(--g-line-2); border-radius: var(--ac-r-sm);
    box-shadow: var(--g-shadow);
    scrollbar-width: thin;
    transform-origin: top center;
    animation: ac-drop-in .2s var(--ac-ease);
}
@keyframes ac-drop-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.ac-filter__pop[hidden] { display: none; }
.ac-opt {
    width: 100%;
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px;
    border: 0; border-radius: 8px;
    background: transparent; color: var(--g-ink);
    font-family: var(--font-body); font-size: 0.8rem; line-height: 1.25;
    text-align: left; cursor: pointer;
    transition: background .15s;
}
.ac-opt:hover { background: color-mix(in srgb, var(--g-ink) 11%, transparent); }
.ac-opt[aria-pressed="true"] {
    background: color-mix(in srgb, var(--ac-accent) 20%, transparent);
    color: var(--ac-accent-text); font-weight: 600;
}
.ac-opt__dot { width: 9px; height: 9px; flex: none; border-radius: 3px; background: var(--ac-dot-c, var(--ac-accent)); }
.ac-opt__n { margin-left: auto; font-size: 0.72rem; color: var(--g-ink-dim); }
.ac-opt[aria-pressed="true"] .ac-opt__n { color: inherit; }

.ac-count {
    display: flex; align-items: center; gap: 8px;
    margin: 10px 0 0;
    font-size: 0.72rem; color: var(--g-ink-dim); min-height: 1.15em;
}
.ac-count b { color: var(--ac-accent-text); }
.ac-count button {
    margin-left: auto;
    border: 0; background: transparent; padding: 0;
    color: var(--ac-magenta); cursor: pointer;
    font-family: var(--font-subheading); font-weight: 800;
    font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase;
}
.ac-count button[hidden] { display: none; }
.ac-count button:hover { text-decoration: underline; }

/* --- Listado de rutas --- */
.ac-list {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 6px;
    scrollbar-width: thin;
}
/* Cada fila lleva DOS destinos, y es a propósito:
   · el <button> traza el itinerario sobre el mapa (la acción de la consola)
   · el <a> abre la guía completa
   El enlace no es solo comodidad: son los 128 <a href> reales que hacen
   rastreable el catálogo. Antes las rutas solo existían dentro de un blob
   JSON que pintaba el JS, invisible para un buscador. */
.ac-item {
    display: flex; align-items: stretch;
    border: 1px solid transparent; border-radius: var(--ac-r-sm);
    transition: background .18s, border-color .18s;
}
.ac-item[hidden] { display: none; }
.ac-item:hover { background: color-mix(in srgb, var(--g-ink) 9%, transparent); border-color: var(--g-line); }
.ac-item.is-active {
    background: color-mix(in srgb, var(--mc, var(--ac-accent)) 18%, transparent);
    border-color: color-mix(in srgb, var(--mc, var(--ac-accent)) 55%, transparent);
}

.ac-item__trace {
    flex: 1 1 auto; min-width: 0;
    display: grid; grid-template-columns: 4px minmax(0, 1fr);
    align-items: center; gap: 11px;
    padding: 10px 4px 10px 11px;
    border: 0; border-radius: var(--ac-r-sm);
    background: transparent; color: inherit;
    text-align: left; cursor: pointer; font-family: inherit;
}
.ac-item__trace::before {
    content: '';
    width: 4px; height: 30px; border-radius: 999px;
    background: var(--mc, var(--ac-accent));
}
.ac-item__name {
    font-family: var(--font-subheading); font-weight: 700;
    font-size: 0.83rem; line-height: 1.33; color: var(--g-ink);
    /* 2 líneas fijas: la fila no cambia de alto al filtrar */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ac-item__meta { margin-top: 3px; font-size: 0.7rem; line-height: 1.3; color: var(--g-ink-dim); }

.ac-item__link {
    flex: none; width: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--ac-r-sm);
    color: var(--g-ink-dim); font-size: 0.7rem; text-decoration: none;
    transition: color .2s, transform .2s var(--ac-ease);
}
.ac-item__link:hover { color: var(--ac-accent-text); transform: translateX(2px); }

.ac-empty { padding: 40px 20px; text-align: center; color: var(--g-ink-dim); font-size: 0.83rem; line-height: 1.6; }
.ac-empty i { display: block; font-size: 1.9rem; margin-bottom: 11px; opacity: .5; color: var(--ac-accent); }

/* --- 3e. Ficha de la ruta trazada (derecha) -------------------------- */
.ac-route {
    top: calc(var(--ac-pad) + 62px);
    right: var(--ac-pad);
    width: 322px;
    max-height: calc(100% - var(--ac-pad) * 2 - 62px);
    display: flex; flex-direction: column; overflow: hidden;
    transform-origin: top right;
    animation: ac-pop .28s var(--ac-ease);
}
.ac-route[hidden] { display: none; }
@keyframes ac-pop { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } }

.ac-route__head { position: relative; padding: 14px 14px 12px; border-bottom: 1px solid var(--g-line); flex: none; }
.ac-route__head::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--mc, var(--ac-accent)), transparent 80%);
}
.ac-route__tag {
    display: inline-flex; align-items: center; height: 19px; padding: 0 8px;
    border-radius: 999px;
    background: var(--mc, var(--ac-accent)); color: #000;
    font-family: var(--font-subheading); font-weight: 800;
    font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1;
}
.ac-route__title {
    margin: 8px 0 0;
    font-family: var(--font-subheading); font-weight: 800;
    font-size: 0.9rem; line-height: 1.35; color: var(--g-ink);
}
.ac-route__meta { margin: 5px 0 0; font-size: 0.72rem; color: var(--g-ink-dim); }

.ac-stops { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 7px; scrollbar-width: thin; }
.ac-stops ol { list-style: none; margin: 0; padding: 0; }
.ac-stop {
    width: 100%;
    display: flex; align-items: center; gap: 10px;
    padding: 7px 9px;
    border: 1px solid transparent; border-radius: 9px;
    background: transparent; color: inherit;
    text-align: left; cursor: pointer; font-family: inherit;
    transition: background .16s, border-color .16s;
}
.ac-stop:hover, .ac-stop.is-active {
    background: color-mix(in srgb, var(--mc, var(--ac-accent)) 18%, transparent);
    border-color: color-mix(in srgb, var(--mc, var(--ac-accent)) 45%, transparent);
}
.ac-stop__n {
    width: 22px; height: 22px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--mc, var(--ac-accent)); color: #000;
    font-family: var(--font-tactical); font-weight: 700; font-size: 0.62rem;
}
.ac-stop__name { font-size: 0.78rem; line-height: 1.3; color: var(--g-ink); }

.ac-route__foot { flex: none; display: flex; gap: 7px; padding: 10px 12px 12px; border-top: 1px solid var(--g-line); }
.ac-btn {
    flex: 1 1 auto;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 36px; padding: 0 13px;
    border: 1px solid var(--g-line-2); border-radius: 999px;
    background: transparent; color: var(--g-ink);
    font-family: var(--font-subheading); font-weight: 800;
    font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background .2s, color .2s, border-color .2s, filter .2s;
}
.ac-btn:hover { border-color: var(--ac-accent); color: var(--ac-accent-text); }
.ac-btn--go { flex: 2 1 auto; background: var(--ac-accent); border-color: var(--ac-accent); color: #000; }
.ac-btn--go:hover { color: #000; filter: brightness(1.07); }
.ac-btn--x {
    flex: none; width: 36px; padding: 0;
    color: var(--ac-magenta); border-color: color-mix(in srgb, var(--ac-magenta) 50%, transparent);
}
.ac-btn--x:hover { background: var(--ac-magenta); color: #fff; border-color: var(--ac-magenta); }

/* =====================================================================
   4. MAPA · marcadores, itinerario y popups
   ===================================================================== */
.ac-mk {
    display: block; width: 13px; height: 13px;
    border-radius: 50%;
    background: var(--mk, var(--ac-accent));
    border: 2px solid rgba(255, 255, 255, .88);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--mk, var(--ac-accent)) 55%, transparent),
                0 2px 7px rgba(0, 0, 0, .5);
    transition: transform .18s var(--ac-ease);
}
.ac-mk::after {
    content: ''; position: absolute; inset: -6px;
    border-radius: 50%; border: 1px solid var(--mk, var(--ac-accent));
    opacity: .5;
    animation: ac-ring 2.6s var(--d, 0s) ease-out infinite;
}
@keyframes ac-ring {
    0%   { transform: scale(.5);  opacity: .6; }
    70%  { transform: scale(1.6); opacity: 0; }
    100% { transform: scale(1.6); opacity: 0; }
}
.leaflet-marker-icon:hover .ac-mk { transform: scale(1.35); }
/* Al arrastrar se paran los anillos: son 128 animaciones a la vez */
.leaflet-dragging .ac-mk::after { animation-play-state: paused; }

/* Con una ruta trazada, los 128 pines del resto compiten con ella: se
   apagan (y se les corta el pulso) para que mande el itinerario. Siguen
   siendo clicables, solo pierden peso visual. */
.ac-console.is-tracing .ac-mk { opacity: .22; }
.ac-console.is-tracing .ac-mk::after { animation: none; opacity: 0; }

/* Parada numerada del itinerario. Aparecen escalonadas mientras se dibuja
   la línea (el escalonado lo secuencia el JS con --i). */
.ac-wp {
    display: flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--mk, var(--ac-accent)); color: #000;
    border: 2px solid rgba(255, 255, 255, .92);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .55);
    font-family: var(--font-tactical); font-weight: 700; font-size: 0.6rem; line-height: 1;
    animation: ac-drop .34s var(--ac-ease) both;
    animation-delay: var(--d, 0s);
}
@keyframes ac-drop { from { opacity: 0; transform: scale(.25); } to { opacity: 1; transform: scale(1); } }
.ac-wp.is-active { box-shadow: 0 0 0 3px #fff, 0 2px 10px rgba(0,0,0,.6); }

/* Popups */
.atlas-page .leaflet-popup-content-wrapper {
    background: var(--g-tint-2);
    -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
    color: var(--g-ink);
    border: 1px solid var(--g-line-2); border-radius: var(--ac-r-sm);
    box-shadow: var(--g-shadow), var(--g-hi);
    padding: 0; overflow: hidden;
}
.atlas-page .leaflet-popup-content { margin: 0; width: 246px !important; }
.atlas-page .leaflet-popup-tip { background: var(--g-tint-2); border: 1px solid var(--g-line-2); }
.atlas-page .leaflet-popup-close-button { color: var(--g-ink-dim) !important; padding: 7px 8px 0 0 !important; }

.ac-pop { padding: 13px; }
.ac-pop__tag {
    display: inline-flex; align-items: center; height: 19px; padding: 0 8px;
    border-radius: 999px; background: var(--pc, var(--ac-accent)); color: #000;
    font-family: var(--font-subheading); font-weight: 800;
    font-size: 0.55rem; letter-spacing: 0.09em; text-transform: uppercase; line-height: 1;
}
.ac-pop__title { margin: 8px 0 0; font-family: var(--font-subheading); font-weight: 800; font-size: 0.86rem; line-height: 1.35; color: var(--g-ink); }
.ac-pop__meta { margin: 5px 0 0; font-size: 0.72rem; color: var(--g-ink-dim); }
.ac-pop__acts { display: flex; gap: 6px; margin-top: 11px; }
.ac-pop__acts .ac-btn { height: 32px; font-size: 0.61rem; padding: 0 10px; }

/* Controles nativos de Leaflet, vestidos de cristal */
.atlas-page .leaflet-control-zoom { border: 0 !important; box-shadow: none !important; }
.atlas-page .leaflet-control-zoom a {
    width: 36px; height: 36px; line-height: 34px;
    background: var(--g-tint);
    -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
    border: 1px solid var(--g-line) !important;
    color: var(--g-ink) !important;
    font-size: 1.1rem;
}
.atlas-page .leaflet-control-zoom a:first-child { border-radius: 999px 999px 7px 7px; }
.atlas-page .leaflet-control-zoom a:last-child  { border-radius: 7px 7px 999px 999px; margin-top: 4px; }
.atlas-page .leaflet-control-zoom a:hover { color: var(--ac-accent-text) !important; }
.atlas-page .leaflet-control-attribution {
    background: var(--g-tint) !important;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    color: var(--g-ink-dim) !important;
    border-radius: 8px 0 0 0; font-size: 0.62rem; padding: 2px 7px;
}
.atlas-page .leaflet-control-attribution a { color: var(--g-ink-dim) !important; }

/* --- BLOQUEO DE GESTOS ----------------------------------------------
   Modelo "cooperative gestures" (el de los mapas incrustados de Google):
     · Móvil: un dedo hace SCROLL de la página; el mapa solo se mueve con
       DOS dedos. El bloqueo real lo hace `touch-action`, porque el
       navegador decide antes de que Leaflet vea el evento; el JS solo
       alterna la clase mientras haya 2+ dedos.
     · Escritorio: la rueda hace scroll; el zoom pide Ctrl/⌘.
   El aviso es un overlay con `pointer-events:none`: aparece y desaparece
   por opacidad, sin tocar el layout ni robar clics.
   --------------------------------------------------------------------- */
.ac-console.is-locked .leaflet-container { touch-action: pan-x pan-y; }
.ac-console:not(.is-locked) .leaflet-container { touch-action: none; }

.ac-hint {
    position: absolute; inset: 0; z-index: 700;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, .45);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .22s ease, visibility .22s ease;
}
.ac-hint.is-on { opacity: 1; visibility: visible; }
.ac-hint span {
    display: inline-flex; align-items: center; gap: 12px;
    max-width: 26ch;
    padding: 15px 20px; border-radius: 999px;
    background: var(--g-tint-2);
    -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
    border: 1px solid var(--g-line-2);
    color: var(--g-ink);
    font-family: var(--font-subheading); font-weight: 700;
    font-size: clamp(0.78rem, 2.2vw, 0.92rem); text-align: left; line-height: 1.4;
}
.ac-hint i { font-size: 1.4em; color: var(--ac-accent); flex: none; }

/* FAB móvil */
.ac-fab {
    position: absolute; z-index: 600;
    left: var(--ac-pad); bottom: var(--ac-pad);
    display: none; align-items: center; gap: 9px;
    height: 46px; padding: 0 18px;
    border: 0; border-radius: 999px;
    background: var(--ac-accent); color: #000;
    box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .65);
    cursor: pointer;
    font-family: var(--font-subheading); font-weight: 800;
    font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase;
    transition: opacity .25s ease, visibility .25s ease;
}

/* =====================================================================
   5. ÍNDICE · editorial
   =====================================================================
   Un destino se elige por una imagen. Aquí antes había tres tablas de
   cifras (19 países con su número, 12 temáticas con su porcentaje) y se
   leía como un informe: correcto y frío. Ahora manda la fotografía, las
   temáticas son una línea de enlaces sin números y las preguntas quedan
   al final como la utilidad que son.

   Debajo de todo sigue la aurora, que es lo que le da al cristal algo que
   refractar (sin ella, `backdrop-filter` sobre un color plano no hace
   absolutamente nada).
   ===================================================================== */
.ac-index {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-top: 1px solid var(--g-line-2);
    background: var(--color-background);
    padding-block: clamp(44px, 6vw, 84px) clamp(36px, 4vw, 60px);
}

/* Aurora: el desenfoque se calcula UNA vez (capa estática) y la deriva va
   por `transform`, que la GPU compone sin volver a desenfocar nada. */
.ac-index::before {
    content: ''; position: absolute; inset: -25% -12%; z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(34% 40% at 16% 18%, color-mix(in srgb, var(--ac-accent) 60%, transparent), transparent 62%),
        radial-gradient(30% 36% at 78% 8%,  color-mix(in srgb, var(--ac-magenta) 46%, transparent), transparent 60%),
        radial-gradient(36% 42% at 62% 88%, color-mix(in srgb, #4DA3FF 32%, transparent), transparent 64%),
        radial-gradient(28% 34% at 6% 90%,  color-mix(in srgb, #FFB300 34%, transparent), transparent 60%);
    filter: blur(60px) saturate(150%);
    opacity: .42;
}
body.light-theme .ac-index::before { opacity: .26; }

@media (prefers-reduced-motion: no-preference) {
    .ac-index::before { animation: ac-drift 34s ease-in-out infinite alternate; }
    @keyframes ac-drift {
        from { transform: translate3d(0, 0, 0) scale(1); }
        to   { transform: translate3d(-3%, 2%, 0) scale(1.12); }
    }
}

.ac-index::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    pointer-events: none;
    background-image: var(--g-grain);
    background-size: 140px 140px;
    opacity: .05;
}

.ac-shell { width: min(1400px, 100%); margin-inline: auto; padding-inline: clamp(16px, 3vw, 40px); }

/* --- Encabezado de sección ------------------------------------------- */
.ac-lead { max-width: 62ch; margin-bottom: clamp(24px, 3vw, 40px); }
.ac-lead__kicker {
    margin: 0 0 12px;
    font-family: var(--font-subheading); font-weight: 800;
    font-size: 0.63rem; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--ac-accent-text);
}
.ac-lead__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(1.9rem, 4vw, 3.1rem);
    line-height: 1.12; letter-spacing: .5px;
    color: var(--g-ink);
    text-wrap: balance;
}
/* Segunda mitad del titular en tono secundario: jerarquía dentro de una
   sola línea, sin partirla en dos elementos. */
.ac-lead__title span { color: var(--g-ink-dim); }
.ac-lead__sub {
    margin: 16px 0 0;
    font-size: clamp(0.93rem, 1.4vw, 1.05rem); line-height: 1.7;
    color: var(--g-ink-dim);
    text-wrap: pretty;
}

/* --- Rejilla de destinos ---------------------------------------------- */
.ac-dest {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
    gap: clamp(10px, 1.2vw, 16px);
    list-style: none; margin: 0; padding: 0;
}
.ac-dest__card {
    position: relative;
    display: block; overflow: hidden;
    border-radius: var(--ac-r);
    border: 1px solid var(--g-line);
    background: var(--color-surface);
    text-decoration: none;
    box-shadow: var(--g-shadow);
    transition: transform .3s var(--ac-ease), box-shadow .3s, border-color .3s;
}
.ac-dest__card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--ac-accent) 55%, transparent);
    box-shadow: var(--g-shadow), 0 0 40px -18px var(--ac-accent);
}

/* La caja de la imagen tiene proporción fija: el hueco está reservado
   antes de que la foto llegue, así que no hay ni un píxel de CLS. */
.ac-dest__media {
    position: relative; display: block;
    aspect-ratio: 4 / 3;
    background: linear-gradient(140deg,
        color-mix(in srgb, var(--ac-accent) 22%, var(--color-surface)),
        var(--color-surface));
    overflow: hidden;
}
.ac-dest__media img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    /* Las fotos vienen sin tratar y con dominantes muy distintas entre sí;
       apagarlas un punto las unifica y deja que mande la tipografía. */
    filter: saturate(.88) contrast(1.05) brightness(.82);
    transform: scale(1.02);
    transition: transform .55s var(--ac-ease), filter .4s;
}
.ac-dest__card:hover .ac-dest__media img {
    transform: scale(1.09);
    filter: saturate(1) contrast(1.05) brightness(.95);
}
/* Velo inferior: es lo que hace legible el nombre encima de cualquier foto */
.ac-dest__media::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top,
        rgba(6, 8, 11, .92) 0%,
        rgba(6, 8, 11, .55) 34%,
        rgba(6, 8, 11, .10) 62%,
        transparent 100%);
}
/* Territorio sin foto: iniciales sobre degradado de marca. Intencionado, no
   un hueco (República Checa no tiene imagen en el servidor). */
.ac-dest__initial {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-heading);
    font-size: 3.4rem; line-height: 1;
    color: color-mix(in srgb, var(--g-ink) 22%, transparent);
    letter-spacing: 2px;
}

.ac-dest__body {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    display: flex; flex-direction: column; gap: 3px;
    padding: 14px 15px 15px;
}
.ac-dest__name {
    font-family: var(--font-heading);
    font-size: 1.12rem; line-height: 1.15; letter-spacing: .4px;
    color: #fff;
    text-shadow: 0 1px 12px rgba(0,0,0,.7);
}
.ac-dest__meta {
    font-size: 0.74rem; line-height: 1.3;
    color: rgba(255,255,255,.82);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 8px rgba(0,0,0,.75);
}
/* Filo superior de acento al pasar por encima */
.ac-dest__card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 3;
    background: linear-gradient(90deg, var(--ac-accent), var(--ac-magenta) 70%, transparent);
    opacity: 0; transition: opacity .3s;
}
.ac-dest__card:hover::before { opacity: 1; }

/* --- Temáticas: una línea de enlaces, sin cifras ---------------------- */
.ac-themes { margin-top: clamp(30px, 3.5vw, 48px); }
.ac-themes__label {
    margin: 0 0 12px;
    font-family: var(--font-subheading); font-weight: 800;
    font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--g-ink-dim);
}
.ac-themes__list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.ac-themes__list a {
    display: inline-flex; align-items: center; gap: 9px;
    height: 38px; padding: 0 16px;
    border: 1px solid var(--g-line-2); border-radius: 999px;
    background: color-mix(in srgb, var(--g-ink) 5%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    color: var(--g-ink);
    font-size: 0.85rem; font-weight: 600; line-height: 1;
    text-decoration: none;
    transition: border-color .2s, transform .2s var(--ac-ease), box-shadow .2s;
}
.ac-themes__dot {
    width: 8px; height: 8px; flex: none; border-radius: 50%;
    background: var(--ac-dot-c);
    box-shadow: 0 0 10px -1px var(--ac-dot-c);
}
.ac-themes__list a:hover {
    border-color: var(--ac-dot-c);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -12px var(--ac-dot-c);
}

/* --- Preguntas: al final y en dos columnas ---------------------------- */
.ac-faq-wrap { margin-top: clamp(34px, 4vw, 56px); }
.ac-faq {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px; align-content: start;
}
.ac-faq details {
    border: 1px solid var(--g-line); border-radius: var(--ac-r-sm);
    background: color-mix(in srgb, var(--g-ink) 4%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    overflow: hidden; height: fit-content;
    transition: border-color .2s, background .2s;
}
.ac-faq details[open] {
    border-color: color-mix(in srgb, var(--ac-accent) 40%, transparent);
    background: color-mix(in srgb, var(--ac-accent) 6%, transparent);
}
.ac-faq summary {
    position: relative; list-style: none; cursor: pointer;
    padding: 14px 44px 14px 16px;
    font-family: var(--font-subheading); font-weight: 700;
    font-size: 0.85rem; line-height: 1.45; color: var(--g-ink);
}
.ac-faq summary::-webkit-details-marker { display: none; }
.ac-faq summary:hover { color: var(--ac-accent-text); }
.ac-faq summary::after {
    content: '+';
    position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--g-line-2); border-radius: 50%;
    color: var(--g-ink-dim); font-family: var(--font-body); font-size: 0.95rem; line-height: 1;
    transition: background .2s, color .2s, border-color .2s;
}
.ac-faq details[open] summary::after {
    content: '−'; background: var(--ac-accent); color: #000; border-color: var(--ac-accent);
}
.ac-faq p {
    margin: 0; padding: 0 16px 16px;
    font-size: 0.83rem; line-height: 1.7; color: var(--g-ink-dim);
    text-wrap: pretty;
}

.ac-alert {
    display: flex; align-items: center; gap: 11px;
    max-width: 720px; margin: 0 auto;
    padding: 15px 17px;
    border: 1px solid color-mix(in srgb, var(--ac-magenta) 45%, transparent);
    border-radius: var(--ac-r-sm);
    background: color-mix(in srgb, var(--ac-magenta) 8%, transparent);
    color: var(--color-text-primary); font-size: 0.88rem; line-height: 1.6;
}
.ac-alert i { color: var(--ac-magenta); font-size: 1.15rem; }

/* =====================================================================
   6. RESPONSIVE
   ===================================================================== */
@media (max-width: 1240px) {
    .atlas-page { --ac-panel-w: 322px; }
    .ac-route { width: 292px; }
}

/* ---------------------------------------------------------------------
   MÓVIL Y TABLET (≤1023px)

   El mapa sigue mandando y ocupa la ventana. El cromo se reordena:
     · marca reducida a una píldora arriba
     · buscador + listado pasan a hoja inferior (la abre el FAB)
     · el rail de últimas vive abajo, y lo releva la ficha de ruta cuando
       hay una trazada
   Todo son `transform` y `position:absolute`: el mapa nunca cambia de
   tamaño, así que no hay que remedirlo ni se genera CLS.
   --------------------------------------------------------------------- */
@media (max-width: 1023px) {
    /* Alto real de la barra táctil inferior fija del sitio
       (.mobile-bottom-kit: 65px + su safe-area) */
    .atlas-page { --ac-chrome-bottom: calc(65px + env(safe-area-inset-bottom, 0px)); --ac-pad: 11px; }

    .ac-console { height: calc(100svh - var(--header-height, 60px) - var(--ac-chrome-bottom)); }

    .ac-brand { max-width: calc(100% - 122px); padding: 9px 14px 10px; }
    .ac-brand__title { font-size: 1.05rem; }
    .ac-brand__stats { font-size: 0.68rem; gap: 2px 10px; margin-top: 4px; }

    .ac-tools { padding: 5px; gap: 5px; }
    .ac-tool { width: 40px; height: 40px; }

    /* Panel = hoja inferior */
    .ac-panel {
        top: auto; left: 0; right: 0; bottom: 0;
        width: 100%; height: min(78%, 560px);
        border-radius: var(--ac-r) var(--ac-r) 0 0;
        border-left: 0; border-right: 0; border-bottom: 0;
        background: var(--g-tint-2);
        transform: translateY(101%);
        opacity: 1;
    }
    .ac-panel.is-open { transform: translateY(0); }
    .ac-panel.is-folded { transform: translateY(101%); opacity: 1; }
    /* Asa de la hoja */
    .ac-panel__head { padding-top: 10px; }
    .ac-panel__head::before {
        content: ''; display: block;
        width: 38px; height: 4px; margin: 0 auto 11px;
        border-radius: 999px; background: var(--g-line-2);
    }

    .ac-fab { display: inline-flex; }
    /* El FAB desaparece cuando hay algo ocupando la franja inferior: con la
       hoja abierta no pinta nada, y con una ruta trazada se plantaba justo
       encima del «Ver la guía» de la ficha, que es su CTA principal. */
    .ac-panel.is-open ~ .ac-fab,
    .ac-console.is-tracing .ac-fab { opacity: 0; visibility: hidden; pointer-events: none; }

    /* Ficha de ruta = hoja inferior también */
    .ac-route {
        top: auto; right: 0; left: 0; bottom: 0;
        width: 100%; max-height: min(62%, 460px);
        border-radius: var(--ac-r) var(--ac-r) 0 0;
        border-left: 0; border-right: 0; border-bottom: 0;
        background: var(--g-tint-2);
    }
    .ac-panel.is-open ~ .ac-route { display: none; }

    /* El #scroll-top-btn del footer (fixed, right:20px, bottom:70px,
       z-index 40) cae justo encima de los controles +/- de Leaflet. Mientras
       la consola está a la vista se retira (lo marca el JS). */
    body.ac-map-view #scroll-top-btn { opacity: 0; visibility: hidden; pointer-events: none; }
    body.ac-sheet-open { overflow: hidden; }

    .ac-faq { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
    .ac-brand__stats span:nth-child(n+3) { display: none; }   /* solo rutas y objetivos */
    .ac-route { max-height: 58%; }
}

/* Objetivos táctiles cómodos en dispositivos sin ratón (WCAG 2.5.8) */
@media (hover: none) and (pointer: coarse) {
    .atlas-page :where(.ac-btn, .ac-tool, .ac-opt, .ac-item, .ac-stop, .ac-terr, .ac-filter__btn) { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .atlas-page *, .atlas-page .leaflet-popup-content-wrapper,
    .ac-skeleton::before, .ac-mk::after, .ac-dot, .ac-wp, .ac-route {
        animation: none !important;
        transition: none !important;
    }
}


/* =====================================================================
   7. CAPA DE ACABADO
   =====================================================================
   Lo que separa "funciona" de "da gusto usarlo". Todo lo de aquí es
   decorativo: si el navegador no lo entiende, o si el usuario pide menos
   movimiento, la consola sigue siendo exactamente igual de usable.
   ===================================================================== */

/* --- 7a. Gradado del mapa --------------------------------------------
   Los tiles de CARTO vienen planos. Bajarles un punto la saturación y
   subirles el contraste hace dos cosas: el mapa pasa a ser fondo (deja de
   competir con el cristal) y los pines de color destacan mucho más. */
.atlas-page .leaflet-tile-pane { filter: saturate(.82) contrast(1.07) brightness(.96); }
body.light-theme .atlas-page .leaflet-tile-pane { filter: saturate(.78) contrast(1.03) brightness(1.02); }

/* Retícula táctica sobre el mapa: puro CSS, cero peticiones. Muy tenue (se
   ve, no se mira) y `pointer-events:none`. Refuerza la idea de consola sin
   ensuciar la lectura del mapa. */
.ac-console .ac-map::after {
    content: ''; position: absolute; inset: 0; z-index: 370;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 78px 78px;
    -webkit-mask-image: radial-gradient(120% 90% at 50% 45%, #000 25%, transparent 78%);
            mask-image: radial-gradient(120% 90% at 50% 45%, #000 25%, transparent 78%);
}
body.light-theme .ac-console .ac-map::after {
    background-image:
        linear-gradient(to right, rgba(15,23,42,.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(15,23,42,.05) 1px, transparent 1px);
}

/* --- 7b. Halo de acento bajo el cromo --------------------------------
   Un resplandor muy abierto detrás de la marca y del panel. No se lee como
   "una mancha": se lee como que el cristal recoge la luz de la marca. */
.ac-console::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(46% 42% at 12% 8%,  color-mix(in srgb, var(--ac-accent) 20%, transparent), transparent 70%),
        radial-gradient(40% 38% at 88% 92%, color-mix(in srgb, var(--ac-magenta) 13%, transparent), transparent 72%);
    opacity: .55;
}
body.light-theme .ac-console::before { opacity: .3; }

/* --- 7c. Entrada escalonada ------------------------------------------
   `backwards` y NO `both`: con `both`, el estado final de la animación se
   queda pegado y ganaría al `transform` de la clase .is-folded, dejando el
   panel imposible de plegar. Con `backwards`, en cuanto termina vuelve a
   mandar el estilo declarado. */
@media (prefers-reduced-motion: no-preference) {
    @keyframes ac-in-up   { from { opacity: 0; transform: translateY(-14px); } }
    @keyframes ac-in-left { from { opacity: 0; transform: translateX(-26px); } }
    @keyframes ac-in-down { from { opacity: 0; transform: translateY(22px); } }

    .ac-brand { animation: ac-in-up   .75s var(--ac-ease) .05s backwards; }
    .ac-tools { animation: ac-in-up   .75s var(--ac-ease) .13s backwards; }
    .ac-panel { animation: ac-in-left .85s var(--ac-ease) .20s backwards; }
    .ac-fab   { animation: ac-in-down .85s var(--ac-ease) .30s backwards; }

}

/* --- 7d. Barrido especular en los botones sólidos --------------------
   Una banda de luz cruza el botón al pasar por encima. Se mueve con
   `transform`/`left` sobre una capa propia, no repintando el fondo. */
.ac-btn--go, .ac-fab { position: relative; overflow: hidden; }
.ac-btn--go::after, .ac-fab::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 45%; left: -60%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
    transform: skewX(-18deg);
    pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
    .ac-btn--go:hover::after, .ac-fab:hover::after { animation: ac-sheen .75s var(--ac-ease); }
    @keyframes ac-sheen { to { left: 120%; } }
}

/* --- 7e. Profundidad al pasar por encima ------------------------------ */
/* La ruta activa se ilumina con SU color, no con el de marca */
/* Fila resaltada al pasar por su pin en el mapa (y al revés) */
.ac-item.is-hi { background: color-mix(in srgb, var(--mc, var(--ac-accent)) 13%, transparent); }

/* La ficha de ruta emite el color de su temática */
.ac-route {
    box-shadow: var(--g-shadow), var(--g-bevel),
                0 0 70px -26px var(--mc, var(--ac-accent));
}

/* --- 7f. Pin resaltado desde la lista --------------------------------- */
.ac-pin.is-hi { z-index: 650 !important; }
.ac-pin.is-hi .ac-mk {
    transform: scale(2.1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk, var(--ac-accent)) 35%, transparent),
                0 0 22px 2px var(--mk, var(--ac-accent)),
                0 3px 10px rgba(0,0,0,.6);
}
.ac-console.is-tracing .ac-pin.is-hi .ac-mk { opacity: 1; }

/* Halo de vidrio en las paradas numeradas: el mismo material, en pequeño */
.ac-wp {
    border-color: rgba(255,255,255,.96);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--mk, var(--ac-accent)) 45%, transparent),
                0 0 16px -2px var(--mk, var(--ac-accent)),
                0 3px 9px rgba(0,0,0,.55);
}

/* --- 7g. Brillo del título -------------------------------------------- */
.ac-brand__title {
    background: linear-gradient(112deg,
        var(--g-ink) 0%, var(--g-ink) 38%,
        color-mix(in srgb, var(--g-ink) 62%, var(--ac-accent)) 55%,
        var(--g-ink) 72%);
    -webkit-background-clip: text; background-clip: text;
}
/* El relleno solo se hace transparente si el recorte funciona: sin este
   @supports, un navegador que entienda -webkit-text-fill-color pero no el
   background-clip dejaría el título INVISIBLE. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .ac-brand__title { -webkit-text-fill-color: transparent; }
}

/* --- 7h. Barra de temáticas con relieve -------------------------------- */
.ac-bar { box-shadow: inset 0 1px 2px rgba(0,0,0,.28), inset 0 -1px 0 rgba(255,255,255,.08); }
.ac-bar span { position: relative; }
.ac-bar span::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.28), transparent 60%);
}

/* --- 7i. (retirado) El relieve del índice vive ahora en el bloque 5:
   esas cajas ya no están sobre un fondo plano, sino sobre la aurora y
   dentro de un panel .ac-glass, así que heredan el material. */


/* --- 7j. Coste de pintado del cristal ---------------------------------
   `backdrop-filter` se recalcula en cada fotograma en el que cambie lo que
   hay detrás, así que arrastrar el mapa con seis paneles grandes encima es
   lo más caro de esta página. Medido arrastrando el mapa con una GPU vieja
   a propósito (Intel HD 3000, de 2011), 5 pasadas con calentamiento previo
   y descartando la primera:

       con todo el cristal .................. 40,7 fps
       sustituyendo el cristal por opaco .... 44,1 fps

   O sea: el sistema entero de cristal cuesta un 8 % de fotogramas en el
   peor hardware que se puede encontrar. Asumible de sobra.

   OJO CON OPTIMIZAR A OJO. Se probó lo que parecía obvio —bajar el radio de
   desenfoque a 8px mientras el mapa se mueve— y no cambia nada: 41,7 fps
   frente a 41,0 sin tocarlo, dentro de la propia variación de la medida. No
   se hace, porque añadiría un cambio de filtro en caliente (riesgo de
   parpadeo) a cambio de cero. Lo que sí se hace es lo barato: congelar los
   128 anillos de los pines mientras dura el movimiento, que es justo cuando
   nadie los mira. */
.ac-console.is-moving .ac-mk::after,
.leaflet-dragging .ac-mk::after { animation-play-state: paused; }


/* =====================================================================
   8. BARRAS DE DESPLAZAMIENTO
   =====================================================================
   Las barras grises por defecto son lo único de la consola que no es de
   marca, y en paneles de cristal cantan mucho. Se tiñen de naranja.

   Hacen falta las DOS sintaxis y no son intercambiables:
     · `scrollbar-color` es el estándar (Firefox, y Chrome desde la 121).
     · `::-webkit-scrollbar` es lo que entienden Safari y los Chrome
       anteriores, que siguen siendo mucha gente.
   Cuando el navegador soporta las dos, la estándar gana; por eso el
   `::-webkit-` va después, para que los que solo entienden esa la cojan.
   ===================================================================== */
.atlas-page :where(.ac-list, .ac-stops, .ac-filter__pop, .ac-panel__inner) {
    scrollbar-width: thin;
    scrollbar-color: var(--ac-accent) transparent;
}

.atlas-page :where(.ac-list, .ac-stops, .ac-filter__pop, .ac-panel__inner)::-webkit-scrollbar {
    width: 7px; height: 7px;
}
.atlas-page :where(.ac-list, .ac-stops, .ac-filter__pop, .ac-panel__inner)::-webkit-scrollbar-track {
    background: transparent;
}
.atlas-page :where(.ac-list, .ac-stops, .ac-filter__pop, .ac-panel__inner)::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(180deg,
        var(--ac-accent),
        color-mix(in srgb, var(--ac-accent) 70%, var(--ac-magenta)));
    /* El borde transparente adelgaza el pulgar sin tocar el ancho de la
       barra, que es lo que reserva el sitio: así no salta el contenido. */
    border: 2px solid transparent;
    background-clip: content-box;
}
.atlas-page :where(.ac-list, .ac-stops, .ac-filter__pop, .ac-panel__inner)::-webkit-scrollbar-thumb:hover {
    background: var(--ac-accent);
    background-clip: content-box;
}
.atlas-page ::-webkit-scrollbar-corner { background: transparent; }

/* =====================================================================
   9. FICHA DE PARADA (popup con foto)
   =====================================================================
   Al pulsar una parada, el mapa vuela hasta ella y abre esta ficha. Antes
   solo volaba: un número sobre un mapa no cuenta nada del sitio.
   ===================================================================== */
.atlas-page .leaflet-popup.ac-pop-wrap .leaflet-popup-content { width: 262px !important; }

.ac-pop--stop { padding: 0; }

.ac-pop__media {
    position: relative;
    aspect-ratio: 16 / 9;      /* hueco reservado: la foto no mueve nada al llegar */
    overflow: hidden;
    background: color-mix(in srgb, var(--pc, var(--ac-accent)) 18%, var(--color-surface));
}
.ac-pop__media img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    filter: saturate(.92) contrast(1.04);
}
.ac-pop__media::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(6,8,11,.55), transparent 55%);
}
/* Contador "3 / 27": sitúa la parada dentro del itinerario */
.ac-pop__n {
    position: absolute; top: 9px; left: 9px; z-index: 2;
    display: inline-flex; align-items: center;
    height: 21px; padding: 0 9px;
    border-radius: 999px;
    background: var(--pc, var(--ac-accent)); color: #000;
    font-family: var(--font-tactical); font-weight: 700;
    font-size: 0.63rem; line-height: 1;
    box-shadow: 0 2px 8px rgba(0,0,0,.45);
}

.ac-pop__body { padding: 12px 13px 13px; }
.ac-pop--stop .ac-pop__title { margin: 0; }
.ac-pop__addr {
    display: flex; align-items: flex-start; gap: 7px;
    margin: 7px 0 0;
    font-size: 0.72rem; line-height: 1.4; color: var(--g-ink-dim);
}
.ac-pop__addr i { color: var(--pc, var(--ac-accent)); margin-top: 2px; flex: none; }
.ac-pop__desc {
    margin: 8px 0 0;
    font-size: 0.76rem; line-height: 1.55; color: var(--g-ink-dim);
    text-wrap: pretty;
}
.ac-pop--stop .ac-pop__acts { margin-top: 12px; }

/* La parada abierta se marca también sobre el mapa */
.ac-wp.is-active {
    box-shadow: 0 0 0 3px #fff,
                0 0 20px 2px var(--mk, var(--ac-accent)),
                0 3px 10px rgba(0,0,0,.6);
    z-index: 2;
}

/* Leaflet trae `.leaflet-container a { color:#0078A8 }` en su propio CSS, y
   ese selector (0,1,1) gana a `.ac-btn` (0,1,0): los botones-enlace de
   dentro de los popups salían con el azul de Leaflet en vez del color del
   botón. Se reafirma con la misma raíz para superarlo. */
.atlas-page .leaflet-container a.ac-btn { color: var(--g-ink); }
.atlas-page .leaflet-container a.ac-btn:hover { color: var(--ac-accent-text); }
.atlas-page .leaflet-container a.ac-btn--go,
.atlas-page .leaflet-container a.ac-btn--go:hover { color: #000; }


/* =====================================================================
   10. NOVEDADES
   =====================================================================
   Antes las últimas incorporaciones vivían en un carrusel pegado al borde
   inferior del mapa: robaba ~130px de mapa, competía con la ficha de ruta
   y desaparecía justo cuando se trazaba una. Ahora lo nuevo se señala
   DONDE está —sobre su propio punto del mapa— y se puede aislar con un
   filtro.

   El halo NO sustituye al color de la temática, se suma: el color sigue
   diciendo de qué va la ruta y el anillo dice que es reciente. Y como el
   color no puede ser el único portador de información (WCAG 1.4.1), la
   fila del listado y el popup llevan además la etiqueta «Nueva» en texto.
   ===================================================================== */
.ac-mk--new {
    /* Anillo blanco fijo: se distingue del pulso de color que llevan todos
       los pines y no depende de percibir bien el matiz. */
    box-shadow: 0 0 0 2px rgba(255,255,255,.92),
                0 0 0 3px color-mix(in srgb, var(--mk, var(--ac-accent)) 70%, transparent),
                0 0 14px 1px var(--mk, var(--ac-accent)),
                0 2px 7px rgba(0,0,0,.5);
}
body.light-theme .ac-mk--new {
    box-shadow: 0 0 0 2px rgba(255,255,255,.98),
                0 0 0 3px color-mix(in srgb, var(--mk, var(--ac-accent)) 80%, transparent),
                0 0 12px 1px var(--mk, var(--ac-accent)),
                0 2px 7px rgba(15,23,42,.35);
}
/* Segundo anillo que se expande: solo en los nuevos, para que canten sin
   cambiarles el color. */
.ac-mk--new::before {
    content: ''; position: absolute; inset: -9px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.75);
    opacity: 0;
    animation: ac-new-ring 2.8s var(--d, 0s) ease-out infinite;
}
@keyframes ac-new-ring {
    0%   { transform: scale(.45); opacity: .85; }
    65%  { transform: scale(1.35); opacity: 0; }
    100% { transform: scale(1.35); opacity: 0; }
}
.leaflet-dragging .ac-mk--new::before,
.ac-console.is-moving .ac-mk--new::before { animation-play-state: paused; }
/* Con una ruta trazada, los pines se apagan; los nuevos también. */
.ac-console.is-tracing .ac-mk--new::before { animation: none; opacity: 0; }

/* Etiqueta textual: la información no puede ir solo en el color */
.ac-tag-new {
    display: inline-flex; align-items: center;
    height: 16px; padding: 0 6px; margin-left: 7px;
    border-radius: 999px;
    background: var(--ac-accent); color: #000;
    font-family: var(--font-subheading); font-weight: 800;
    font-size: 0.55rem; letter-spacing: 0.08em; text-transform: uppercase;
    line-height: 1; vertical-align: middle;
}
.ac-tag-new--pop { margin-left: 6px; height: 19px; font-size: 0.55rem; }

/* Botón del filtro */
.ac-newbtn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 32px; padding: 0 13px; margin-top: 11px;
    border: 1px solid color-mix(in srgb, var(--ac-accent) 45%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--ac-accent) 10%, transparent);
    color: var(--g-ink);
    font-family: var(--font-subheading); font-weight: 800;
    font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}
.ac-newbtn:hover { border-color: var(--ac-accent); }
.ac-newbtn[aria-pressed="true"] {
    background: var(--ac-accent); border-color: var(--ac-accent); color: #000;
}
.ac-newbtn__spark {
    width: 8px; height: 8px; flex: none; border-radius: 50%;
    background: var(--ac-accent);
    box-shadow: 0 0 0 2px rgba(255,255,255,.55);
}
.ac-newbtn[aria-pressed="true"] .ac-newbtn__spark { background: #000; box-shadow: 0 0 0 2px rgba(0,0,0,.25); }
.ac-newbtn__n {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 18px; padding: 0 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--g-ink) 14%, transparent);
    font-size: 0.62rem;
}
.ac-newbtn[aria-pressed="true"] .ac-newbtn__n { background: rgba(0,0,0,.22); }

/* La fila nueva lleva un filo de acento a la izquierda */
.ac-item.is-new .ac-item__trace::before {
    background: linear-gradient(180deg, var(--mc, var(--ac-accent)), rgba(255,255,255,.85));
}