/* =====================================================================
   assets/css/pais.css
   Estilos EXCLUSIVOS de la plantilla templates/pages/pais.php
   (Teatro de Operaciones · Ficha de País)

   Antes este bloque vivía como <style> inline dentro de pais.php. Se separa
   a un archivo propio para:
     - Desacoplar las clases .pais-*, .intel-*, .map-*, .lugar-card,
       .mission-card, etc. del CSS común del sitio (core.css/atlas.css),
       que ahora queda solo con lo compartido por TODAS las páginas.
     - Poder cachearlo en el navegador entre visitas (un <style> inline se
       vuelve a descargar y parsear en cada carga de página; un .css
       externo con cache-busting por mtime, igual que core.css/atlas.css,
       se sirve desde caché si no ha cambiado).
     - Reducir el HTML que viaja en cada respuesta de pais.php (~1300
       líneas menos de marcado en cada visita).

   Se carga desde pais.php vía $extra_head (ver el bloque "6. CONFIGURACIÓN
   SEO" / "8. CARGAR HEADER" de esa plantilla), con el mismo patrón de
   cache-busting por filemtime() que ya usan core.css y atlas.css.
   ===================================================================== */

/* =====================================================================
   TEATRO DE OPERACIONES · PAÍS  (V10)

   Regla de oro anti-CLS: toda caja que dependa de una descarga externa
   (fuente, icono, imagen, tile de mapa) tiene su tamaño reservado en CSS,
   y todo lo que aparece después de la carga es `position:absolute` o un
   cambio de opacidad/transform (que no reflowean).
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. FIX CLS GLOBAL (causa raíz del aviso de Search Console)
   ---------------------------------------------------------------------
   core.css declara para `.lazy-load-section` (newsletter + footer):
       content-visibility: auto;
       contain-intrinsic-size: 1000px;
   Mientras están fuera de pantalla el navegador les reserva 1000px de alto.
   Al entrar en el viewport se renderizan de verdad y colapsan a su altura
   real (~350px la newsletter, ~800px el footer): eso empuja/sube todo lo
   visible y dispara un CLS enorme en escritorio.

   Aquí se desactiva SOLO para esta página (este <style> va después de
   core.css en la cascada, misma especificidad => gana). La animación de
   entrada (opacity + transform) se mantiene intacta: no genera CLS.
   --------------------------------------------------------------------- */
.lazy-load-section {
    content-visibility: visible;
    contain-intrinsic-size: none;
}

/* Salto al contenido: invisible hasta que recibe foco por teclado */
.pp-skip-link {
    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(--color-primary, #FF5E14); 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;
}
.pp-skip-link:focus { top: 0; }

.pais-page {
    /* — Radios y ritmo — */
    --pp-radius: 18px;
    --pp-radius-sm: 12px;
    --pp-radius-xs: 8px;
    --pp-gap: clamp(16px, 3vw, 32px);
    /* Mismo ancho de panel que el Atlas (`--ac-panel-w`): flotando sobre el
       mapa, 430px se comían medio territorio. */
    --pp-sidebar: 372px;
    --pp-chrome-bottom: 0px;
    --pp-subnav-h: 54px;

    /* — Superficies — */
    --pp-shade: rgba(125, 125, 125, 0.06);
    --pp-shade-strong: rgba(125, 125, 125, 0.12);
    --pp-hairline: color-mix(in srgb, var(--color-border) 75%, transparent);
    --pp-glass: color-mix(in srgb, var(--color-surface) 80%, transparent);
    --pp-ink-soft: color-mix(in srgb, var(--color-text-secondary) 85%, transparent);

    /* — Acento — */
    --pp-accent: var(--color-primary);
    --pp-accent-8: color-mix(in srgb, var(--color-primary) 8%, transparent);
    --pp-accent-14: color-mix(in srgb, var(--color-primary) 14%, transparent);
    --pp-accent-45: color-mix(in srgb, var(--color-primary) 45%, transparent);

    /* — Profundidad — */
    --pp-shadow-sm: 0 1px 2px rgba(0,0,0,.16), 0 4px 12px rgba(0,0,0,.10);
    --pp-shadow-md: 0 10px 30px -12px rgba(0,0,0,.55);
    --pp-shadow-lg: 0 28px 64px -28px rgba(0,0,0,.70), 0 2px 8px rgba(0,0,0,.24);

    --pp-ease: cubic-bezier(.22,.61,.36,1);

    /* — CRISTAL: el material de la consola —————————————————————————
       Los mismos valores, uno a uno, que `.atlas-page` en
       atlas-clandestino.css. No es copia por pereza: el Atlas y la ficha de
       país enseñan el MISMO mapa con el MISMO cromo flotando encima, y hasta
       ahora cada una lo pintaba a su manera (aquí una barra lateral opaca con
       píldoras naranjas; allí paneles de vidrio sobre el mapa). Parecían dos
       webs distintas. Si algún día se tocan estos tokens, se tocan en los dos
       sitios a la vez.

       La clave es el `brightness()` del backdrop-filter: en vez de tapar el
       mapa con un panel opaco, se OSCURECE lo que hay detrás (brightness .5)
       y encima se pinta un tinte muy ligero. Se ve el mapa a través del panel
       y el texto gana contraste, porque el fondo llega ya apagado y uniforme.
       En claro la operación es la inversa: brightness(1.5) blanquea. */
    --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 para TEXTO pequeño sobre cristal. El naranja de marca da 5,2:1
       sobre cristal oscuro (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 sobre el cristal. */
    --g-accent-text: var(--color-primary, #FF5E14);
    --g-magenta: var(--color-secondary-magenta, #FF2E63);

    /* Separación del cromo flotante al borde de la consola */
    --pp-pad: clamp(12px, 1.6vw, 20px);
}
/* Sin misiones no se pinta la subnav: no reservamos su altura. */
.pais-page.has-no-subnav { --pp-subnav-h: 0px; }

body.light-theme .pais-page {
    --pp-shade: rgba(20, 25, 30, 0.035);
    --pp-shade-strong: rgba(20, 25, 30, 0.075);
    --pp-shadow-sm: 0 1px 2px rgba(16,24,40,.05), 0 4px 12px rgba(16,24,40,.06);
    --pp-shadow-md: 0 10px 30px -14px rgba(16,24,40,.22);
    --pp-shadow-lg: 0 28px 64px -30px rgba(16,24,40,.28), 0 2px 8px rgba(16,24,40,.06);

    /* Cristal claro: el mismo material, invertido (idéntico al Atlas) */
    --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%);
    --g-accent-text: #A83A08;
}

/* El ancla debe dejar hueco al header fijo + a la subnav pegajosa */
.pais-page :where(section, header, div[id]) {
    scroll-margin-top: calc(var(--header-height, 60px) + var(--pp-subnav-h) + 16px);
}

.pais-shell {
    width: min(1440px, 100%);
    margin-inline: auto;
    padding-inline: clamp(14px, 3vw, 40px);
}

/* Cifras: tabular-nums evita que el número cambie de ancho al hacer swap
   de fuente (micro-CLS horizontal). */
.pais-page :where(.pais-fact dd, .pais-link-chip b, .intel-count, .lugar-card__index) {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ---------------------------------------------------------------------
   1. HERO / FICHA DEL TERRITORIO
   --------------------------------------------------------------------- */
.pais-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* AQUÍ SE RESERVA EL ALTO DEL HEADER FIJO, y no es opcional.
       `core.css` le da al body `padding-top: var(--header-height)`, pero el
       bloque <style> crítico de header.php declara `html, body { padding: 0 }`
       DESPUÉS de enlazar core.css y, a igual especificidad, gana el último: el
       body acaba con `padding-top: 0` y el header fijo (60px) se come el
       principio del contenido. Medido: el breadcrumb quedaba tapado 8px a
       1920px y 26px (entero) a 390px.
       Es un bug GLOBAL del sitio (producción incluida), pero se compensa aquí
       en vez de arreglar el body para no desplazar 60px todas las demás
       páginas, que llevan tiempo compensándolo a mano.
       Al sumarse a --header-height, el segundo término es solo el aire que
       queda por debajo del header (y cubre de paso el desborde de ~14px del
       .site-logo, que mide 2.5rem con line-height heredado dentro de una
       barra de 60px). */
    padding-block: calc(var(--header-height, 60px) + max(20px, clamp(16px, 2.5vw, 36px))) clamp(22px, 3.4vw, 40px);
    border-bottom: 1px solid var(--pp-hairline);
    background: var(--color-background);
}
.pais-hero__bg {
    position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0.18;
    /* blur bajado de 3px a 1.5px: con el thumbnail de 400x267 estirado 4x hacía
       falta tapar la interpolación, pero ahora la fuente es el fondo de
       1600x1067 (ver $hero_bg_url en pais.php) y sí hay detalle que mostrar.
       Este es el valor a tocar si lo quieres más o menos difuminado. */
    filter: saturate(0.5) blur(1.5px);
    transform: scale(1.1);
}
.pais-hero::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(110% 80% at 8% -10%, color-mix(in srgb, var(--color-primary) 22%, transparent), transparent 60%),
        radial-gradient(90% 70% at 95% 0%, color-mix(in srgb, var(--color-primary) 9%, transparent), transparent 55%),
        linear-gradient(to bottom, transparent 30%, var(--color-background) 100%);
}
/* Retícula táctica sutil: puro CSS, cero peticiones, cero CLS */
.pais-hero::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background-image:
        linear-gradient(to right, var(--pp-shade-strong) 1px, transparent 1px),
        linear-gradient(to bottom, var(--pp-shade-strong) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(90% 70% at 30% 0%, #000 0%, transparent 75%);
            mask-image: radial-gradient(90% 70% at 30% 0%, #000 0%, transparent 75%);
    opacity: .7;
    pointer-events: none;
}

/* Migas */
.pais-breadcrumb { font-size: 0.72rem; font-family: var(--font-subheading); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.pais-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; line-height: 1.6; }
.pais-breadcrumb a { color: var(--color-text-secondary); text-decoration: none; transition: color .2s var(--pp-ease); }
.pais-breadcrumb a:hover { color: var(--color-primary); }
.pais-breadcrumb li + li::before { content: '/'; margin-right: 8px; color: var(--pp-ink-soft); opacity: .55; }
.pais-breadcrumb [aria-current] { color: var(--color-primary); }

.pais-hero__eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    margin-top: 20px;
    height: 30px;                     /* caja reservada */
    padding: 0 13px;
    border: 1px solid var(--pp-accent-45);
    border-radius: 999px;
    background: var(--pp-accent-14);
    color: var(--color-primary);
    font-family: var(--font-subheading); font-weight: 800;
    font-size: 0.66rem; letter-spacing: 0.15em; text-transform: uppercase;
    line-height: 1;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

.pais-hero__title {
    margin: 14px 0 0;
    font-family: var(--font-heading);
    font-size: clamp(2.1rem, 6.2vw, 4.2rem);
    /* Fijo (no `normal`) para no reflowear al hacer swap de fuente, pero con
       aire suficiente: Luckiest Guy tiene ascendentes muy altas y con 1.02 los
       glifos se salían de su caja de línea y se veían cortados. */
    line-height: 1.14;
    letter-spacing: 0.5px;
    color: var(--color-text-primary);
    text-wrap: balance;
}
/* El degradado sobre el nombre del país solo se aplica si el navegador
   soporta background-clip:text. Sin el @supports, un navegador que entienda
   -webkit-text-fill-color pero no el clip dejaría el título INVISIBLE. */
.pais-hero__title span { color: var(--color-primary); }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .pais-hero__title span {
        /* inline-block + padding vertical: el degradado se pinta dentro de la
           caja del elemento, y sin este aire recorta arriba y abajo los glifos
           de una tipografía display. El margen negativo lo compensa para que
           el layout no cambie ni un píxel. */
        display: inline-block;
        padding-block: 0.10em;
        margin-block: -0.10em;
        background: linear-gradient(100deg,
            var(--color-primary) 0%,
            #FF8500 45%,
            #FFC300 100%);
        -webkit-background-clip: text; background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.pais-hero__lead {
    max-width: 70ch;
    margin-top: 16px;
    font-size: clamp(0.95rem, 1.6vw, 1.1rem);
    line-height: 1.7;
    color: var(--color-text-secondary);
    text-wrap: pretty;
}
.pais-hero__lead strong { color: var(--color-text-primary); font-weight: 600; }

/* Acciones rápidas del hero */
.pais-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.pp-btn {
    display: inline-flex; align-items: center; gap: 9px;
    height: 46px; padding: 0 20px;            /* caja reservada */
    border-radius: 999px;
    font-family: var(--font-subheading); font-weight: 800;
    font-size: 0.76rem; letter-spacing: 0.07em; text-transform: uppercase;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    border: 1px solid transparent;
    transition: transform .2s var(--pp-ease), background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.pp-btn--primary {
    background: var(--color-primary); color: #000;
    box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--color-primary) 70%, transparent);
}
.pp-btn--primary:hover { transform: translateY(-2px); filter: brightness(1.06); }
.pp-btn--ghost {
    background: var(--pp-shade); color: var(--color-text-primary);
    border-color: var(--color-border);
}
.pp-btn--ghost:hover { border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-2px); }

/* Ficha de datos (bloque clave para motores generativos) */
.pais-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin: 26px 0 0;
    padding: 0;
}
.pais-fact {
    position: relative;
    min-height: 96px;                 /* caja reservada */
    padding: 15px 17px;
    border: 1px solid var(--pp-hairline);
    border-radius: var(--pp-radius-sm);
    background:
        linear-gradient(180deg, var(--pp-shade), transparent 70%),
        var(--color-surface);
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    overflow: hidden;
}
.pais-fact::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px;
    background: linear-gradient(90deg, var(--color-primary), transparent 70%);
    opacity: .8;
}
.pais-fact dt {
    font-family: var(--font-subheading); font-weight: 700;
    font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--color-text-secondary);
    line-height: 1.3;
}
.pais-fact dd {
    margin: 0;
    font-family: var(--font-tactical);
    font-size: clamp(1.3rem, 2.4vw, 1.75rem);
    font-weight: 700; line-height: 1.15;
    color: var(--color-text-primary);
}
.pais-fact dd small {
    display: block; margin-top: 3px;
    font-family: var(--font-body); font-size: 0.72rem; font-weight: 400;
    color: var(--color-text-secondary); letter-spacing: 0; text-transform: none;
    line-height: 1.35;
}

.pais-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding: 0; list-style: none; }
.pais-tag {
    display: inline-flex; align-items: center; gap: 7px;
    height: 32px; padding: 0 13px;           /* caja reservada */
    border: 1px solid var(--pp-hairline); border-radius: 999px;
    background: var(--pp-shade);
    color: var(--color-text-secondary);
    font-size: 0.75rem; font-weight: 600; line-height: 1;
    text-decoration: none; transition: border-color .2s, color .2s, background .2s, transform .2s var(--pp-ease);
}
a.pais-tag:hover { color: var(--color-primary); border-color: var(--color-primary); background: var(--pp-accent-8); transform: translateY(-1px); }

/* ---------------------------------------------------------------------
   1b. SUBNAV PEGAJOSA (anclas internas · UX + SEO)
   --------------------------------------------------------------------- */
.pais-subnav {
    position: sticky;
    top: var(--header-height, 60px);
    z-index: 60;                      /* por encima de la consola */
    height: var(--pp-subnav-h);       /* altura fija: sin CLS al pegarse */
    border-bottom: 1px solid var(--pp-hairline);
    background: var(--pp-glass);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
            backdrop-filter: saturate(140%) blur(12px);
}
.pais-subnav__inner {
    height: 100%;
    display: flex; align-items: center; gap: 6px;
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.pais-subnav__inner::-webkit-scrollbar { display: none; }
.pais-subnav a {
    display: inline-flex; align-items: center; gap: 8px;
    height: 34px; padding: 0 14px; flex: none;
    border-radius: 999px;
    color: var(--color-text-secondary);
    font-family: var(--font-subheading); font-weight: 700;
    font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
    line-height: 1; text-decoration: none; white-space: nowrap;
    transition: background .2s, color .2s;
}
.pais-subnav a:hover { background: var(--pp-shade-strong); color: var(--color-text-primary); }
.pais-subnav a.is-current { background: var(--pp-accent-14); color: var(--color-primary); }
.pais-subnav a i { color: var(--color-primary); opacity: .85; }

/* =====================================================================
   2. CONSOLA TÁCTICA (mapa + panel)
   =====================================================================
   MISMO LENGUAJE QUE EL ATLAS CLANDESTINO
   ---------------------------------------
   Antes esto era una barra lateral opaca pegada a un mapa: dos bloques
   uno al lado del otro, con bordes, y todo el cromo en píldoras naranjas.
   El Atlas, que enseña exactamente lo mismo (un mapa con rutas y su
   listado), lo resuelve al revés: el MAPA ocupa la caja entera y el cromo
   —marca, herramientas, listado— FLOTA encima en paneles de cristal.
   Puestas una al lado de la otra parecían webs distintas.

   Ahora las dos usan el mismo material (`.pp-glass` aquí, `.ac-glass`
   allí, tokens `--g-*` idénticos), la misma disposición (marca arriba a
   la izquierda, herramientas arriba a la derecha, panel a la izquierda,
   zoom abajo a la derecha) y el mismo tratamiento del mapa (tiles
   apagados, retícula táctica, viñeta).

   Lo que NO se copia, a propósito: la consola del Atlas ocupa la ventana
   entera porque esa página ES la herramienta. Aquí sigue siendo una
   sección de una ficha que se lee, así que conserva su caja con alto
   reservado (anti-CLS) y sus esquinas redondeadas.
   --------------------------------------------------------------------- */
.pais-console-wrap { padding-block: var(--pp-gap); }

.mission-layout {
    display: block;
    /* Altura reservada y estable. svh evita el salto por la barra del navegador. */
    height: 640px;
    height: clamp(560px, calc(100svh - var(--header-height, 60px) - var(--pp-subnav-h) - 48px), 880px);
    position: relative;
    z-index: 0;
    isolation: isolate;               /* contiene los z-index de Leaflet */
    overflow: hidden;
    border: 0;
    border-radius: var(--pp-radius);
    background: var(--color-background);
    box-shadow: var(--g-shadow);
}

/* Halo de acento bajo el cromo: un resplandor muy abierto que hace que el
   cristal parezca recoger la luz de la marca (bloque 7b del Atlas). */
.mission-layout::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(--pp-accent) 20%, transparent), transparent 70%),
        radial-gradient(40% 38% at 88% 92%, color-mix(in srgb, var(--g-magenta) 13%, transparent), transparent 72%);
    opacity: .55;
}
body.light-theme .mission-layout::before { opacity: .3; }

/* 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. */
.mission-layout::after {
    content: ''; position: absolute; inset: 0; z-index: 380;
    pointer-events: none;
    border-radius: inherit;
    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 .mission-layout::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%);
}

/* ---------------------------------------------------------------------
   EL MATERIAL: una sola clase para todo el cromo flotante
   (equivalente exacto de `.ac-glass`)
   --------------------------------------------------------------------- */
.pp-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(--pp-radius-sm);
    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. */
.pp-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 (5 %) y a propósito: sin microtextura, un panel
   translúcido se lee como plástico. Con ella, como vidrio esmerilado. */
.pp-glass::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    border-radius: inherit;
    background-image: var(--g-grain);
    background-size: 140px 140px;
    opacity: .05;
    pointer-events: none;
}
.pp-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))) {
    .pp-glass { background: var(--color-surface); }
}

/* --- MARCA DEL TERRITORIO (arriba a la izquierda) ------------------- */
.map-brand {
    position: absolute; z-index: 500;
    top: var(--pp-pad); left: var(--pp-pad);
    max-width: min(var(--pp-sidebar), calc(100% - var(--pp-pad) * 2 - 110px));
    padding: 13px 18px 14px;
    border-radius: var(--pp-radius);
}
.map-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(--g-accent-text); line-height: 1;
}
.map-brand__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    line-height: 1.12; letter-spacing: 0.5px;
    color: var(--g-ink);
}
.map-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);
}
.map-brand__stats b { color: var(--g-ink); font-weight: 700; }

/* --- HERRAMIENTAS (arriba a la derecha) ----------------------------- */
.map-tools {
    position: absolute; z-index: 500;
    top: var(--pp-pad); right: var(--pp-pad);
    display: flex; gap: 8px; padding: 7px;
    border-radius: 999px;
}
.map-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;
}
.map-tool:hover {
    background: color-mix(in srgb, var(--pp-accent) 20%, transparent);
    color: var(--g-accent-text); border-color: var(--g-line-2);
}
/* Panel plegado: la herramienta queda «apagada», que es la señal de que
   hay algo oculto. Antes esto era la rotación del chevron de la pestaña. */
.map-tool[aria-expanded="false"] { color: var(--g-ink-dim); }

/* --- PANEL DE MISIONES (flota a la izquierda) ------------------------
   Ya no es una columna del layout: es un panel de cristal por encima del
   mapa, como `.ac-panel`. Por eso el plegado ya no anima el `width` (que
   aplastaba la cabecera mientras duraba la transición) sino que lo saca
   por la izquierda con un transform, que la GPU compone sin repintar. */
.intel-panel {
    position: absolute; z-index: 500;
    top: calc(var(--pp-pad) + 118px);
    left: var(--pp-pad);
    bottom: var(--pp-pad);
    width: var(--pp-sidebar);
    display: flex; flex-direction: column;
    overflow: hidden;
    border-radius: var(--pp-radius);
    transition: transform .34s var(--pp-ease), opacity .34s var(--pp-ease);
}
.intel-panel.is-collapsed {
    transform: translateX(calc(-100% - var(--pp-pad) - 8px));
    opacity: 0;
    pointer-events: none;
}

.intel-panel-inner {
    width: 100%;
    height: 100%;
    background: transparent;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Cabecera del panel.
   Ya no lleva fondo propio ni la línea de acento tricolor: va DENTRO de un
   panel de cristal (igual que `.ac-panel__head`), así que basta una
   hairline de separación. Un fondo opaco aquí rompía el material. */
.intel-header {
    /* OJO — COLISIÓN CON core.css: allí existe una `.intel-header` heredada del
       diseño v8 (`display:flex; align-items:center; gap:8px; color:var(--color-primary);
       margin-bottom:5px`). Tiene la MISMA especificidad que esta, así que la
       nuestra gana solo en las propiedades que declara: al no declarar `display`,
       el `flex` antiguo sobrevivía y ponía título, píldoras, subtítulo y buscador
       en FILA (todos apelotonados en una línea). Por eso reafirmamos aquí las
       cuatro propiedades del bloque antiguo, aunque `display:block` parezca
       redundante: no lo es. */
    display: block;
    margin-bottom: 0;
    color: inherit;

    /* z-index 5 explícito y no accidental: `.pp-glass > *` pone a todos los
       hijos en `position:relative; z-index:3`, y eso convierte a la cabecera
       en un contexto de apilamiento propio. Sin subirla, cualquier cosa que
       tenga que salirse de ella (el buscador con foco, un desplegable futuro)
       quedaría atrapada por debajo del feed, que es su hermano con el mismo
       z-index 3 y va después en el DOM. Mismo motivo que en `.ac-panel__head`. */
    position: relative; z-index: 5;
    padding: 14px 14px 12px;
    background: transparent;
    border-bottom: 1px solid var(--g-line);
    flex-shrink: 0;
}

.intel-title {
    margin: 0;
    font-family: var(--font-subheading);
    font-size: 0.86rem; font-weight: 800;
    letter-spacing: 0.04em; text-transform: uppercase;
    line-height: 1.3;
    color: var(--g-ink);
}
.intel-subtitle { margin-top: 6px; font-size: 0.75rem; line-height: 1.45; color: var(--g-ink-dim); }

/* Buscador del panel · misma forma que `.ac-search`: píldora, lupa dentro,
   aspa a la derecha. El fondo es un tinte de la propia tinta, no una
   superficie opaca: dentro del cristal, un input sólido canta. */
.intel-search { position: relative; margin-top: 12px; height: 40px; }
.intel-search > i {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    color: var(--g-ink-dim); font-size: 0.8rem; pointer-events: none; z-index: 1;
}
.intel-search input {
    width: 100%; height: 100%;                 /* caja reservada */
    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;
    transition: border-color .2s, box-shadow .2s;
    -webkit-appearance: none; appearance: none;
}
.intel-search input::-webkit-search-cancel-button { display: none; }
.intel-search input::placeholder { color: var(--g-ink-dim); }
.intel-search input:focus {
    outline: none;
    border-color: var(--pp-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-accent) 22%, transparent);
}
.intel-search__clear {
    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; cursor: pointer;
    color: var(--g-ink-dim); font-size: 0.78rem;
}
.intel-search.has-value .intel-search__clear { display: flex; }
.intel-search__clear:hover { color: var(--g-accent-text); background: color-mix(in srgb, var(--g-ink) 13%, transparent); }

/* Filtros por temática */
.intel-filters {
    display: flex; gap: 7px; margin-top: 11px;
    overflow-x: auto; scrollbar-width: none;
    padding-bottom: 2px;
    min-height: 32px;                          /* caja reservada */
}
.intel-filters::-webkit-scrollbar { display: none; }
.intel-chip {
    flex: none;
    height: 30px; padding: 0 12px;
    display: inline-flex; align-items: center; gap: 6px;
    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;
    line-height: 1; cursor: pointer; white-space: nowrap;
    transition: background .2s, color .2s, border-color .2s;
}
.intel-chip:hover { border-color: var(--pp-accent); }
/* Chip puesto = relleno de acento, igual que `.ac-filter.is-set` */
.intel-chip.is-active { background: var(--pp-accent); border-color: var(--pp-accent); color: #000; }

.intel-count {
    display: flex; align-items: center; gap: 8px;
    margin-top: 10px; min-height: 1.15em;      /* caja reservada */
    font-size: 0.72rem; line-height: 1.35;
    color: var(--g-ink-dim);
}
.intel-count b { color: var(--g-accent-text); font-weight: 700; }

/* Feed Scrollable */
.intel-feed {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 6px;
    scrollbar-gutter: stable;         /* evita el salto al aparecer la barra */
}

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

/* --- MAPA: es el FONDO de la consola, no una columna --- */
.map-zone {
    position: absolute; inset: 0; z-index: 0;
    background: var(--color-background);
}
#tactical-map { width: 100%; height: 100%; }

/* Gradado de los tiles (bloque 7a del Atlas): los de CARTO vienen planos.
   Bajarles la saturación y subirles el contraste hace dos cosas a la vez:
   el mapa pasa a ser fondo (deja de competir con el cristal) y los puntos
   de color de las misiones destacan mucho más. */
.pais-page .leaflet-tile-pane { filter: saturate(.82) contrast(1.07) brightness(.96); }
body.light-theme .pais-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`. El z-index 370 la deja por
   encima del panel de tiles (200) y por debajo de los marcadores (400+).
   Idéntica a la de `.ac-map::after`. */
.map-zone::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 .map-zone::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);
}

/* Skeleton: absoluto => no ocupa flujo => no genera CLS */
.map-skeleton {
    position: absolute; inset: 0; z-index: 400;
    display: grid; place-items: center; gap: 12px;
    background: var(--color-background);
    color: var(--g-ink-dim);
    font-family: var(--font-subheading); font-weight: 800;
    font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
    transition: opacity .45s var(--pp-ease), visibility .45s;
}
.map-skeleton::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 20%, var(--pp-shade-strong) 45%, transparent 70%);
    background-size: 220% 100%;
    animation: pp-shimmer 1.6s linear infinite;
}
.map-skeleton span { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; }
@keyframes pp-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.pais-console.is-map-ready .map-skeleton { opacity: 0; visibility: hidden; }

/* --- BLOQUEO DE GESTOS ----------------------------------------------
   Modelo "cooperative gestures" (el de los mapas incrustados de Google):
   en móvil un dedo hace SCROLL de la página y 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 (ver «bloqueo de gestos» en pais.php).
   El aviso es un overlay con `pointer-events:none`: aparece y desaparece
   por opacidad, sin tocar el layout ni robar toques.
   --------------------------------------------------------------------- */
.pais-console.is-locked .leaflet-container { touch-action: pan-x pan-y; }
.pais-console:not(.is-locked) .leaflet-container { touch-action: none; }

.map-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 var(--pp-ease), visibility .22s;
}
.map-hint.is-on { opacity: 1; visibility: visible; }
.map-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;
}
.map-hint i { font-size: 1.4em; color: var(--pp-accent); flex: none; }

/* Punto «en directo» del bloque de marca (antes vivía en la píldora de
   estado que flotaba arriba a la derecha). Mismo latido que el `.ac-dot`. */
.status-indicator {
    width: 7px; height: 7px; flex: none;
    border-radius: 50%; background: var(--pp-accent);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--pp-accent) 70%, transparent);
}
.status-indicator.live { animation: pp-pulse 2.4s ease-out infinite; }
@keyframes pp-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pp-accent) 60%, transparent); }
    70%  { box-shadow: 0 0 0 8px rgba(255, 94, 20, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 94, 20, 0); }
}

/* ---------------------------------------------------------------------
   MARCADORES DEL MAPA
   Cada punto es UN solo nodo (.pp-marker): el degradado del color de su
   misión va en su propio fondo y los anillos de pulso son pseudoelementos.
   Menos DOM = mapa más fluido con cientos de puntos.

   --mk  color base · --mk2 variante clara · --d desfase del pulso
   El desfase escalonado evita que los cientos de anillos latan a la vez
   (queda mejor y reparte el trabajo de pintado del navegador).

   Geometría calcada de `.ac-mk` (13px, filo blanco de 2px, anillo que se
   expande desde -6px): son los mismos puntos sobre el mismo mapa en las dos
   páginas, y hasta ahora aquí eran bolas de 16px con doble anillo y allí
   discos de 13px. Lo que sí se conserva de aquí es el degradado con el color
   de la misión (--mk/--mk2), que en el Atlas no existe porque allí el color
   codifica la temática y aquí la ruta.
   --------------------------------------------------------------------- */
.pp-marker {
    position: relative; display: block;
    width: 13px; height: 13px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%,
                var(--mk2, #FFA04D) 0%,
                var(--mk, #FF5E14) 72%);
    border: 2px solid rgba(255, 255, 255, .88);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--mk, #FF5E14) 55%, transparent),
                0 2px 7px rgba(0, 0, 0, .5);
    transition: transform .18s var(--pp-ease);
}
/* Anillo de pulso (todos los puntos) */
.pp-marker::before,
.pp-marker::after {
    content: ''; position: absolute; inset: -6px;
    border-radius: 50%;
    border: 1px solid var(--mk, #FF5E14);
    opacity: .5;
    animation: pp-ping 2.6s var(--d, 0s) ease-out infinite;
}
/* El segundo anillo solo en el punto seleccionado: pulso doble y más marcado */
.pp-marker::after { display: none; }
.leaflet-marker-icon:hover .pp-marker { transform: scale(1.35); }
.pp-marker.is-active { transform: scale(1.55); z-index: 2; }
.pp-marker.is-active::before,
.pp-marker.is-active::after {
    display: block;
    border-width: 1.5px;
    animation-duration: 1.6s;
}
.pp-marker.is-active::after { animation-delay: calc(var(--d, 0s) + .8s); }

@keyframes pp-ping {
    0%   { transform: scale(.5);  opacity: .6; }
    70%  { transform: scale(1.6); opacity: 0; }
    100% { transform: scale(1.6); opacity: 0; }
}

body.light-theme .pp-marker {
    border-color: rgba(255,255,255,.98);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--mk, #FF5E14) 65%, transparent),
                0 2px 7px rgba(15,23,42,.35);
}

/* Mientras el mapa hace zoom o se arrastra, el navegador ya está recolocando
   todos los marcadores: pausar los pulsos ahí evita tirones en móvil. */
.leaflet-zoom-anim .pp-marker::before,
.leaflet-zoom-anim .pp-marker::after,
.leaflet-dragging .pp-marker::before,
.leaflet-dragging .pp-marker::after { animation-play-state: paused; }

/* --- BOTONES DE MÓVIL (FAB que abre la lista + cierre de la hoja) ---
   En móvil el MAPA es la vista base (está en el flujo) y la LISTA es una hoja
   deslizante. Antes era al contrario: la lista ocupaba la página y el mapa se
   abría como overlay a pantalla completa, que además quedaba parcialmente
   tapado por el header fijo del sitio (atlas.css lo sube a z-index 9999999
   con !important, muy por encima del 2000 del overlay). Con el mapa en el
   flujo ese solape desaparece solo. */
.list-fab {
    display: none;                       /* solo móvil, ver media query */
    position: fixed;
    left: 18px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    z-index: 400;
    width: 56px; height: 56px;
    align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    /* Acento plano y tinta negra, como el `.ac-fab` del Atlas: el degradado
       naranja→magenta era otro dialecto más que no se repetía allí. */
    background: var(--pp-accent);
    color: #000; font-size: 1.15rem;
    cursor: pointer;
    box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .65);
    /* Aparece solo cuando la consola está a la vista (lo activa el JS) */
    opacity: 0; visibility: hidden; transform: scale(.7);
    transition: opacity .25s var(--pp-ease), transform .25s var(--pp-ease), visibility .25s;
}
.list-fab.is-visible { opacity: 1; visibility: visible; transform: scale(1); }
.list-fab:active { transform: scale(.94); }
/* Contador de objetivos sobre el FAB, para que se entienda qué abre */
.list-fab__badge {
    position: absolute; top: -2px; right: -2px;
    min-width: 22px; height: 22px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    background: var(--color-background);
    color: var(--color-primary);
    border: 1px solid var(--pp-accent-45);
    font-family: var(--font-subheading); font-weight: 800;
    font-size: 0.62rem; line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Cierre de la hoja de la lista (solo móvil). Círculo compacto: así la
   cabecera solo tiene que reservarle ~46px a la derecha y el título sigue
   cabiendo en una línea. */
.intel-close-btn {
    display: none;                       /* solo dentro de la hoja móvil */
    position: absolute; top: 14px; right: 12px; z-index: 5;
    width: 36px; height: 36px;
    align-items: center; justify-content: center;
    border: 1px solid var(--g-line-2); border-radius: 50%;
    /* Va DENTRO del cristal: un botón macizo de acento aquí gritaba. Mismo
       tratamiento que `.map-tool`. */
    background: color-mix(in srgb, var(--g-ink) 10%, transparent);
    color: var(--g-ink); font-size: 0.85rem;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}
.intel-close-btn:hover {
    background: color-mix(in srgb, var(--pp-accent) 22%, transparent);
    color: var(--g-accent-text);
}
.intel-close-btn:active { transform: scale(.94); }

/* --- ACORDEÓN (color propio por misión vía --mission-color) ---
   Filas redondeadas sobre el cristal, como `.ac-item`: nada de separadores
   ni de fondos opacos, que dentro de un panel translúcido se leen como
   parches. El color de la misión pinta el tinte de la fila abierta. */
.guide-group {
    border: 1px solid transparent;
    border-radius: var(--pp-radius-sm);
    margin-bottom: 4px;
    overflow: hidden;
    transition: background .18s, border-color .18s;
}
.guide-group.is-hidden { display: none; }
.guide-group:hover {
    background: color-mix(in srgb, var(--g-ink) 9%, transparent);
    border-color: var(--g-line);
}
.guide-group.active {
    background: color-mix(in srgb, var(--mission-color, var(--pp-accent)) 16%, transparent);
    border-color: color-mix(in srgb, var(--mission-color, var(--pp-accent)) 50%, transparent);
}

/* El toggle y el enlace «Ver guía» son hermanos: nada de <a> dentro de <button>. */
.guide-header {
    display: flex; align-items: stretch;
    background: transparent;
    border-left: 3px solid transparent;
    transition: border-color .25s;
}
.guide-group.active > .guide-header {
    border-left-color: var(--mission-color, var(--pp-accent));
}

.guide-header__toggle {
    flex: 1 1 auto; min-width: 0;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 15px 10px 15px 13px;
    border: 0; background: transparent;
    font: inherit; color: inherit; text-align: left; cursor: pointer;
}

.guide-title-box { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; }
.guide-title-text { min-width: 0; }

/* Diana con anillo «sonar». Solo se anima la misión abierta: con 20+ rutas,
   animar todas destrozaría la CPU en móvil sin aportar nada. */
.mission-dot {
    position: relative; flex: none;
    width: 24px; height: 24px;
    display: grid; place-items: center;
    border-radius: 50%;
    /* Halo con el degradado de la misión (claro → base) */
    background: radial-gradient(circle at 34% 30%,
                color-mix(in srgb, var(--mission-light, var(--color-primary)) 34%, transparent) 0%,
                transparent 68%);
}
.mission-dot i {
    position: relative; z-index: 1;
    font-size: 0.8rem;
    color: var(--mission-color, var(--color-primary));
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--mission-color, var(--color-primary)) 60%, transparent));
    transition: transform .25s var(--pp-ease);
}
.mission-dot::before,
.mission-dot::after {
    content: ''; position: absolute; inset: 0;
    border-radius: 50%;
    border: 1.5px solid var(--mission-color, var(--color-primary));
    opacity: 0;
}
.guide-group.active .mission-dot::before,
.guide-group.active .mission-dot::after { animation: pp-sonar 2.8s ease-out infinite; }
.guide-group.active .mission-dot::after { animation-delay: 1.4s; }
.guide-group.active .mission-dot i { transform: rotate(45deg) scale(1.12); }

@keyframes pp-sonar {
    0%        { transform: scale(.5); opacity: .85; }
    80%, 100% { transform: scale(2.2); opacity: 0; }
}

.guide-title {
    display: block;
    font-family: var(--font-subheading); font-weight: 700;
    color: var(--g-ink);
    font-size: 0.83rem; letter-spacing: 0.02em; text-transform: uppercase;
    line-height: 1.33;
    transition: color .2s;
}
.guide-count {
    display: block; margin-top: 3px;
    font-family: var(--font-body); font-weight: 400; text-transform: none; letter-spacing: 0;
    font-size: 0.7rem; line-height: 1.3; color: var(--g-ink-dim);
}

.guide-tools { display: flex; align-items: center; gap: 10px; flex: none; padding-right: 13px; }

/* Mismo botón que `.ac-btn`: cápsula de contorno sobre el cristal, que se
   tiñe de acento al pasar por encima. Antes era un chip con fondo opaco. */
.btn-view-guide {
    display: inline-flex; align-items: center;
    height: 30px; padding: 0 12px;
    font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    font-family: var(--font-subheading); line-height: 1;
    color: var(--g-ink);
    background: transparent;
    border: 1px solid var(--g-line-2);
    border-radius: 999px;
    text-decoration: none; white-space: nowrap;
    transition: background .2s, color .2s, border-color .2s;
}
.btn-view-guide:hover { border-color: var(--pp-accent); color: var(--g-accent-text); }

.acc-icon { color: var(--g-ink-dim); transition: transform .32s var(--pp-ease), color .2s; font-size: 0.7rem; width: 1em; }
.guide-group.active .acc-icon { transform: rotate(180deg); color: var(--mission-color, var(--pp-accent)); }

/* Apertura suave con grid (0fr → 1fr): sin max-height a ojo y sin saltos.
   Ocurre dentro del feed, así que no genera CLS de página. */
.guide-steps-container {
    display: grid;
    grid-template-rows: 0fr;
    background: color-mix(in srgb, var(--g-ink) 4%, transparent);
    transition: grid-template-rows .35s var(--pp-ease);
}
/* `visibility` saca las paradas colapsadas del orden de tabulación: con solo
   `overflow:hidden` seguirían siendo enfocables aunque midan 0px de alto.
   El retardo de 0.35s al ocultar deja que termine la animación de cierre;
   al abrir se hace visible al instante. */
.guide-steps-container > .steps-inner {
    overflow: hidden; min-height: 0;
    visibility: hidden;
    transition: visibility 0s linear .35s;
}
.guide-group.active .guide-steps-container { grid-template-rows: 1fr; }
.guide-group.active .guide-steps-container > .steps-inner {
    visibility: visible;
    transition-delay: 0s;
}

/* --- ITEM LISTA --- */
.stop-node {
    position: relative;
    display: flex; width: 100%;
    padding: 12px 14px 12px 22px; gap: 14px;
    border: 0; border-bottom: 1px solid var(--g-line);
    background: transparent; text-align: left; font: inherit; color: inherit;
    cursor: pointer; transition: background .2s, padding-left .2s var(--pp-ease);
}
.stop-node:last-child { border-bottom: 0; }
/* Barrita de acento con el degradado de la misión */
.stop-node::before {
    content: ''; position: absolute;
    left: 15px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 0; border-radius: 3px;
    background: linear-gradient(180deg,
                var(--mission-light, var(--color-primary)) 0%,
                var(--mission-color, var(--color-primary)) 100%);
    transition: height .22s var(--pp-ease);
}
.stop-node:hover::before, .stop-node.active::before { height: 62%; }
.stop-node:hover { background: color-mix(in srgb, var(--g-ink) 10%, transparent); }
.stop-node.is-hidden { display: none; }
.stop-node.active {
    padding-left: 28px;
    background: color-mix(in srgb, var(--mission-color, var(--pp-accent)) 18%, transparent);
}

.node-visual { flex: none; width: 62px; height: 62px; }
.node-visual img {
    width: 62px; height: 62px;
    aspect-ratio: 1 / 1;                /* reserva la caja aunque falle la imagen */
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--g-line-2);
    display: block;
    background: var(--pp-shade-strong);
    filter: grayscale(100%) contrast(1.05);
    transition: filter .3s ease, border-color .3s ease, transform .35s var(--pp-ease);
}
.stop-node:hover .node-visual img,
.stop-node.active .node-visual img {
    filter: grayscale(0%);
    border-color: var(--mission-color, var(--color-primary));
}

.node-info { flex: 1; min-width: 0; align-self: center; }
.node-name {
    font-family: var(--font-body); font-weight: 600;
    color: var(--g-ink);
    font-size: 0.88rem; line-height: 1.35; margin-bottom: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.node-address {
    font-size: 0.72rem; line-height: 1.4; color: var(--g-ink-dim);
    display: flex; align-items: baseline; gap: 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.node-address i { color: var(--mission-color, var(--color-primary)); opacity: .85; }

/* Foco accesible coherente en toda la página */
.pais-page :where(a, button, input, summary):focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 6px;
}

/* --- CONTROLES DE LEAFLET, VESTIDOS DE CRISTAL ---
   Los mismos que en el Atlas: sin esto, el zoom nativo (cuadrado, blanco,
   con su borde gris) era lo primero que delataba que estas dos páginas
   estaban hechas por sitios distintos. */
.pais-page .leaflet-control-zoom { border: 0 !important; box-shadow: none !important; }
.pais-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;
}
.pais-page .leaflet-control-zoom a:first-child { border-radius: 999px 999px 7px 7px; }
.pais-page .leaflet-control-zoom a:last-child  { border-radius: 7px 7px 999px 999px; margin-top: 4px; }
.pais-page .leaflet-control-zoom a:hover { color: var(--g-accent-text) !important; }
.pais-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;
}
.pais-page .leaflet-control-attribution a { color: var(--g-ink-dim) !important; }

/* --- POPUP DEL MAPA (TARJETA) ---
   Mismo material que `.ac-pop`: cristal, no una superficie opaca. */
.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(--pp-radius-sm);
    padding: 0; overflow: hidden;
    box-shadow: var(--g-shadow);
}
.leaflet-popup-content { margin: 0 !important; width: 280px !important; }
.leaflet-popup-tip { background: var(--g-tint-2); border: 1px solid var(--g-line-2); }
.leaflet-container a.leaflet-popup-close-button { color: var(--g-ink-dim) !important; font-size: 22px; top: 6px; right: 7px; z-index: 20; }

.tactical-card { display: flex; flex-direction: column; }
/* La caja de la foto tiene proporción fija: el hueco está reservado antes de
   que llegue la imagen, así que el popup no da un salto al cargarla. */
.card-cover {
    position: relative; width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: color-mix(in srgb, var(--popup-color, var(--pp-accent)) 18%, var(--color-surface));
}
.card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.92) contrast(1.04); }
/* Velo oscuro, no un degradado hacia la superficie: el popup ya no tiene
   fondo opaco al que fundir. */
.card-cover::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(6,8,11,.55), transparent 55%);
}

/* Etiqueta de misión sobre la foto, con el color de su ruta */
.card-mission-tag {
    position: absolute; top: 9px; left: 9px; z-index: 2;
    display: inline-flex; align-items: center;
    height: 20px; padding: 0 9px;
    border-radius: 999px;
    background: linear-gradient(100deg,
                var(--popup-color, var(--color-primary)) 0%,
                var(--popup-light, var(--color-primary)) 100%);
    color: #0b0b0d;
    font-family: var(--font-subheading); font-weight: 800;
    font-size: 0.55rem; letter-spacing: 0.09em; text-transform: uppercase; line-height: 1;
    max-width: calc(100% - 18px);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,.45);
}

.card-body { padding: 12px 13px 13px; text-align: left; }
.card-title { font-family: var(--font-subheading); font-weight: 800; font-size: 0.86rem; color: var(--g-ink); line-height: 1.35; margin: 0; }
.card-desc {
    margin: 8px 0 0;
    font-size: 0.76rem; color: var(--g-ink-dim); line-height: 1.55; font-family: var(--font-body);
    display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card-actions { display: flex; gap: 6px; margin-top: 11px; }
/* Mismos botones que `.ac-btn` / `.ac-btn--go` del Atlas: cápsulas de 32px,
   la principal rellena de acento y la secundaria de contorno. */
.card-btn {
    flex: 1 1 auto;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 32px; padding: 0 12px;
    background: var(--pp-accent);
    border: 1px solid var(--pp-accent);
    color: #000;
    text-align: center;
    font-size: 0.61rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    border-radius: 999px; text-decoration: none; white-space: nowrap;
    font-family: var(--font-subheading); line-height: 1;
    cursor: pointer;
    transition: filter .2s, background .2s, color .2s, border-color .2s;
}
.card-btn:hover { filter: brightness(1.07); }
/* Botones de icono: «guardar en el plan» y «cómo llegar» */
.card-btn--ghost {
    flex: none; width: 36px; padding: 0;
    background: transparent;
    color: var(--g-ink);
    border: 1px solid var(--g-line-2);
    font-size: 0.8rem;
}
.card-btn--ghost:hover { border-color: var(--pp-accent); color: var(--g-accent-text); filter: none; }

/* Leaflet trae `.leaflet-container a { color:#0078A8 }` en su propio CSS, y
   ese selector (0,1,1) gana a `.card-btn` (0,1,0): los enlaces del popup
   salían con el azul de Leaflet en vez del color del botón. Se reafirma con
   la misma raíz para superarlo, en vez de con `!important` — que además
   pisaría el color en línea que `PlanDeFuga.animateBtn()` pone al botón de
   guardar cuando el objetivo ya está en el plan. */
.pais-page .leaflet-container a.card-btn { color: #000; }
.pais-page .leaflet-container a.card-btn--ghost { color: var(--g-ink); }
.pais-page .leaflet-container a.card-btn--ghost:hover { color: var(--g-accent-text); }

/* ---------------------------------------------------------------------
   3. SECCIONES DE CONTENIDO (SEO / GEO)
   --------------------------------------------------------------------- */
.pais-section { padding-block: clamp(34px, 5vw, 64px); border-top: 1px solid var(--pp-hairline); }
.pais-section__head { max-width: 74ch; margin-bottom: clamp(22px, 3vw, 34px); }
.pais-section__kicker {
    display: inline-flex; align-items: center; gap: 8px;
    height: 26px; margin-bottom: 12px;
    font-family: var(--font-subheading); font-weight: 800;
    font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
    line-height: 1; color: var(--color-primary);
}
.pais-section__kicker::before { content: ''; width: 22px; height: 2px; background: var(--color-primary); border-radius: 2px; }
.pais-section__title {
    margin: 0;
    font-family: var(--font-subheading); font-weight: 800;
    font-size: clamp(1.35rem, 3vw, 1.95rem);
    letter-spacing: -0.015em; text-transform: uppercase; line-height: 1.2;
    color: var(--color-text-primary);
    text-wrap: balance;
}
.pais-section__sub { margin-top: 12px; font-size: 0.96rem; line-height: 1.7; color: var(--color-text-secondary); text-wrap: pretty; }

/* Respuesta directa (optimizada para motores generativos) */
.pais-answer {
    margin: 0 0 clamp(22px, 3vw, 32px);
    padding: 18px 20px;
    border: 1px solid var(--pp-hairline);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--pp-radius-sm);
    background: var(--pp-shade);
    font-size: 0.95rem; line-height: 1.75; color: var(--color-text-secondary);
    max-width: 92ch;
    text-wrap: pretty;
}
.pais-answer strong { color: var(--color-text-primary); font-weight: 600; }

/* Rejilla de lugares imprescindibles */
/* `min(320px, 100%)` en vez de `320px` pelado: si el contenedor es más
   estrecho que 320px, un minmax con mínimo fijo NO puede encogerse y la pista
   desborda. Con min() el mínimo se rinde al ancho disponible. */
.lugares-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: clamp(12px, 1.6vw, 18px); list-style: none; padding: 0; margin: 0; }

.lugar-card {
    position: relative;
    /* `min-width: 0` es OBLIGATORIO aquí, no cosmético. Un `1fr` es
       `minmax(auto, 1fr)` y el `auto` no baja del min-content del item; como
       los items de grid nacen con `min-width: auto`, una dirección larga
       inflaba el min-content de la tarjeta y con él la pista entera. Medido en
       /misiones-en-francia @390px: la pista se resolvía a 504,281px y la
       tarjeta a 504px, generando 130px de scroll horizontal en la página. */
    min-width: 0;
    display: flex; gap: 14px; height: 100%;
    padding: 14px;
    border: 1px solid var(--pp-hairline);
    border-radius: var(--pp-radius-sm);
    background: var(--color-surface);
    transition: border-color .25s, box-shadow .25s, transform .25s var(--pp-ease);
}
.lugar-card:hover { border-color: var(--pp-accent-45); box-shadow: var(--pp-shadow-md); transform: translateY(-2px); }

.lugar-card__media { flex: none; width: 92px; height: 92px; border-radius: 10px; overflow: hidden; background: var(--pp-shade-strong); }
.lugar-card__media img { width: 92px; height: 92px; aspect-ratio: 1/1; object-fit: cover; display: block; }

.lugar-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.lugar-card__index {
    font-family: var(--font-tactical); font-weight: 700;
    font-size: 0.66rem; letter-spacing: 0.1em; color: var(--color-primary); line-height: 1.3;
}
/* `overflow-wrap: anywhere` (y no `break-word`) a propósito: es la única de
   las dos que además REDUCE el min-content, que es justo lo que infla la
   pista del grid cuando un topónimo o una dirección traen una palabra larga
   sin espacios. Segunda línea de defensa del `min-width: 0` de arriba. */
.lugar-card__title { margin: 0; font-family: var(--font-body); font-weight: 700; font-size: 0.98rem; line-height: 1.3; color: var(--color-text-primary); overflow-wrap: anywhere; }
.lugar-card__title a { color: inherit; text-decoration: none; }
.lugar-card__title a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.lugar-card__title a:hover { color: var(--color-primary); }
.lugar-card__addr { font-size: 0.75rem; line-height: 1.45; color: var(--color-text-secondary); display: flex; gap: 6px; min-width: 0; }
.lugar-card__addr i { flex: none; color: var(--color-primary); opacity: .8; margin-top: .25em; }
/* El <span> de la dirección es el que medía 451px y disparaba el min-content
   de la tarjeta: en un contenedor flex también nace con `min-width: auto`. */
.lugar-card__addr span { min-width: 0; overflow-wrap: anywhere; }
.lugar-card__desc { font-size: 0.82rem; line-height: 1.55; color: var(--color-text-secondary); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.lugar-card__foot { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lugar-card__mission { font-size: 0.71rem; line-height: 1.4; color: var(--color-text-secondary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.lugar-card__mission b { color: var(--color-text-primary); font-weight: 600; }

/* Botón «Ver en el mapa»: por encima del enlace-manta de la tarjeta */
.lugar-card__locate {
    position: relative; z-index: 2;
    display: inline-flex; align-items: center; gap: 7px;
    height: 30px; padding: 0 12px; flex: none;
    border: 1px solid var(--color-border); border-radius: 999px;
    background: var(--color-background); color: var(--color-text-primary);
    font-family: var(--font-subheading); font-weight: 700;
    font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1;
    cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.lugar-card__locate:hover { background: var(--color-primary); color: #000; border-color: var(--color-primary); }

/* Rejilla de misiones */
/* Mismo blindaje que .lugares-grid: min() en el mínimo del track y min-width:0
   en los items, para que un título largo no pueda ensanchar la pista. */
.pais-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: clamp(14px, 2vw, 22px); list-style: none; padding: 0; margin: 0; }
.pais-grid > li { min-width: 0; }

.mission-card {
    display: flex; flex-direction: column; height: 100%;
    background: var(--color-surface);
    border: 1px solid var(--pp-hairline);
    border-radius: var(--pp-radius);
    overflow: hidden;
    text-decoration: none;
    transition: transform .28s var(--pp-ease), border-color .28s ease, box-shadow .28s ease;
}
.mission-card:hover { transform: translateY(-5px); border-color: var(--pp-accent-45); box-shadow: var(--pp-shadow-lg); }

.mission-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--pp-shade-strong); overflow: hidden; }
.mission-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--pp-ease); }
.mission-card:hover .mission-card__media img { transform: scale(1.06); }
.mission-card__media::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, color-mix(in srgb, var(--color-surface) 85%, transparent), transparent 45%);
}
.mission-card__badge {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    display: inline-flex; align-items: center; gap: 6px;
    height: 28px; padding: 0 12px;
    border-radius: 999px;
    background: rgba(9, 9, 11, 0.72);
    border: 1px solid rgba(255,255,255,0.14);
    color: #fff; font-family: var(--font-subheading); font-weight: 800;
    font-size: 0.64rem; letter-spacing: 0.09em; text-transform: uppercase; line-height: 1;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.mission-card__stops {
    position: absolute; right: 12px; bottom: 12px; z-index: 2;
    display: inline-flex; align-items: center; gap: 6px;
    height: 26px; padding: 0 10px;
    border-radius: 999px;
    background: var(--color-primary); color: #000;
    font-family: var(--font-subheading); font-weight: 800;
    font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1;
}

.mission-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.mission-card__title { margin: 0; font-family: var(--font-subheading); font-weight: 800; font-size: 1rem; line-height: 1.3; text-transform: uppercase; letter-spacing: -0.01em; color: var(--color-text-primary); }
.mission-card__desc { font-size: 0.85rem; line-height: 1.6; color: var(--color-text-secondary); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mission-card__meta { margin-top: auto; padding-top: 13px; border-top: 1px solid var(--pp-hairline); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 0.74rem; color: var(--color-text-secondary); }
.mission-card__meta span { display: inline-flex; align-items: center; gap: 6px; line-height: 1.5; }
.mission-card__meta i { color: var(--color-primary); }
.mission-card__cta { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-subheading); font-weight: 800; font-size: 0.71rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-primary); }
.mission-card__cta i { transition: transform .25s var(--pp-ease); }
.mission-card:hover .mission-card__cta i { transform: translateX(4px); }

/* FAQ */
.pais-faq-list { display: grid; gap: 10px; max-width: 92ch; }
.pais-faq-item { border: 1px solid var(--pp-hairline); border-radius: var(--pp-radius-sm); background: var(--color-surface); overflow: hidden; transition: border-color .2s; }
.pais-faq-item[open] { border-color: var(--pp-accent-45); }
.pais-faq-item > summary {
    list-style: none; cursor: pointer;
    padding: 17px 19px;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    font-family: var(--font-subheading); font-weight: 700;
    font-size: 0.93rem; line-height: 1.45;
    color: var(--color-text-primary);
    transition: color .2s;
}
.pais-faq-item > summary::-webkit-details-marker { display: none; }
.pais-faq-item > summary:hover { color: var(--color-primary); }
.pais-faq-item > summary::after {
    content: '+'; flex: none;
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border: 1px solid var(--color-border); border-radius: 8px;
    color: var(--color-primary); font-size: 1rem; line-height: 1;
    transition: background .2s, color .2s;
}
.pais-faq-item[open] > summary::after { content: '−'; background: var(--color-primary); color: #000; border-color: var(--color-primary); }
.pais-faq-answer { padding: 0 19px 19px; font-size: 0.91rem; line-height: 1.75; color: var(--color-text-secondary); text-wrap: pretty; }

/* Enlazado interno */
.pais-links-grid { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
.pais-link-chip {
    display: inline-flex; align-items: center; gap: 9px;
    height: 42px; padding: 0 16px;
    border: 1px solid var(--pp-hairline); border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-size: 0.85rem; font-weight: 600; line-height: 1; text-decoration: none;
    transition: border-color .2s, color .2s, transform .2s var(--pp-ease), box-shadow .2s;
}
.pais-link-chip b { color: var(--color-text-secondary); font-weight: 500; font-size: 0.76rem; }
.pais-link-chip:hover { border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-2px); box-shadow: var(--pp-shadow-sm); }
.pais-link-chip:hover b { color: var(--color-primary); }

/* Estado vacío */
/* Misma colisión que .intel-header: core.css trae dos `.empty-state` heredadas
   (una con borde discontinuo, otra con borde rojizo + fondo granate y margen
   superior) que aquí la disfrazaban de caja de error. Reafirmamos lo que no
   declarábamos. */
.empty-state { padding: 52px 24px; text-align: center; color: var(--g-ink-dim); line-height: 1.6; border: 0; background: none; margin-top: 0; border-radius: 0; }
.empty-state i { font-size: 2.6rem; margin-bottom: 14px; opacity: .5; display: block; color: var(--pp-accent); }

/* ---------------------------------------------------------------------
   4. RESPONSIVE  (breakpoint alineado con la barra inferior móvil: 1023px)
   --------------------------------------------------------------------- */
@media (max-width: 1240px) {
    /* Mismo escalón que el Atlas (`--ac-panel-w: 322px`) */
    .pais-page { --pp-sidebar: 322px; }
}

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

   Mismo reparto que el Atlas Clandestino en móvil: el MAPA es la vista
   base y la LISTA es una hoja que sube desde abajo.

     · El MAPA va en el flujo con el alto útil de la pantalla (menos el
       header, la subnav y la barra táctil del sitio). El cromo se reduce:
       marca compacta arriba a la izquierda, herramientas arriba a la
       derecha, FAB del listado abajo a la izquierda.
     · La LISTA es una hoja inferior de cristal (78 % de alto máximo) que
       abre el FAB y cierra su propio botón. No tapa el mapa entero: se
       sigue viendo dónde está lo que se está leyendo.

   Todo son `transform` y cajas con alto reservado: el mapa nunca cambia
   de tamaño al abrir o cerrar la hoja, así que no hay que remedirlo ni se
   genera CLS.
   ===================================================================== */
@media (max-width: 1023px) {
    /* --pp-chrome-bottom = alto real de la barra táctil inferior fija del
       sitio (.mobile-bottom-kit, ver footer.php/core.css: 65px + su propio
       env(safe-area-inset-bottom)). Antes esta variable se declaraba aquí
       pero NUNCA se usaba en ningún selector de esta página: el overlay del
       mapa (abajo) hacía inset:0 e ignoraba por completo esa barra, así que
       la barra táctil (z-index 99999, muy por encima del 2000 del mapa) se
       quedaba siempre encima, tapando el botón "Vista general" y los
       controles inferiores del mapa. Ahora sí se usa para recortar el alto
       del overlay del mapa justo por encima de esa barra. */
    .pais-page { --pp-chrome-bottom: calc(65px + env(safe-area-inset-bottom, 0px)); --pp-subnav-h: 50px; }

    .pais-console-wrap { padding-block: 0 var(--pp-gap); }

    /* En móvil manda el MAPA (vista base, en el flujo) y la lista es una hoja
       `position: fixed`.
       IMPORTANTE: hay que anular `isolation` y `z-index` del escritorio. Si no,
       .mission-layout sigue siendo un contexto de apilamiento con z-index 0 y la
       hoja de la lista (z-index 1800) quedaría atrapada DENTRO, o sea por debajo
       de la subnav pegajosa y del resto del cromo del sitio.
       `position: relative` (y no `static`) porque el cromo que flota sobre el
       mapa —marca, herramientas, esqueleto, aviso de gestos— se ancla aquí;
       con `z-index: auto` NO crea contexto de apilamiento, así que la hoja
       fija sigue escapando por encima de todo. */
    .mission-layout {
        display: block;
        position: relative;
        isolation: auto;
        z-index: auto;
        height: auto;
        min-height: 0;
        border-radius: 0;
        border-left: 0; border-right: 0;
        box-shadow: none;
        overflow: visible;
    }
    .mission-layout::after { border-radius: 0; }

    /* Plegar el panel es cosa del escritorio: en móvil lo abre y lo cierra el
       FAB, y la hoja trae su propio botón de cierre. */
    #panelToggleBtn { display: none; }

    /* --- LISTA: hoja inferior de cristal, como `.ac-panel` en el Atlas ---
       Antes era un overlay a pantalla completa de fondo opaco, del header a
       la barra táctil. Ahora sube desde abajo, deja ver el mapa por encima
       de ella y se recorta sobre la barra táctil del sitio
       (--pp-chrome-bottom), que es lo que impide que la barra (z-index
       99999) le coma el borde inferior. */
    .intel-panel {
        position: fixed;
        top: auto;
        left: 0; right: 0;
        bottom: var(--pp-chrome-bottom, 0px);
        z-index: 1800;
        width: 100%;
        height: min(78svh, 560px);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border-radius: var(--pp-radius) var(--pp-radius) 0 0;
        /* Tinte más denso que el del escritorio: aquí el panel tapa media
           pantalla y el texto va sobre lo que quede del mapa detrás. */
        background: var(--g-tint-2);
        transform: translateY(101%);
        visibility: hidden;
        transition: transform .3s var(--pp-ease), visibility .3s var(--pp-ease);
    }
    /* Neutraliza el plegado de escritorio ANTES que `.is-open`: si la clase
       `is-collapsed` sobrevive a un cambio de tamaño, no debe dejar la hoja
       invisible ni sin eventos. Va antes a propósito: misma especificidad,
       gana la última. */
    .intel-panel.is-collapsed { transform: translateY(101%); opacity: 1; pointer-events: auto; }
    .intel-panel.is-open { transform: translateY(0); visibility: visible; }

    .intel-panel-inner {
        width: 100%;
        height: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
        background: transparent;
    }

    /* Sin sticky: la cabecera del panel es alta (buscador + filtros) y pegada
       se comería media pantalla del móvil. El asa superior es la señal de
       que esto es una hoja que se arrastra hacia abajo. */
    .intel-header {
        /* padding-right deja sitio al botón de cierre de la hoja (34px + aire) */
        padding: 20px 52px 12px 14px;
        flex-shrink: 0;
        background: transparent;
    }
    .intel-header::before {
        content: ''; position: absolute;
        top: 8px; left: 50%; transform: translateX(-50%);
        width: 38px; height: 4px; border-radius: 999px;
        background: var(--g-line-2);
    }

    /* El feed scrollea DENTRO de la hoja (no estira la página) */
    .intel-feed {
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-gutter: auto;
    }

    /* Cierre de la hoja */
    .intel-close-btn { display: inline-flex; }

    /* --- MAPA: vista base, dentro del flujo ---
       Ya no es un overlay fijo. Al estar en el flujo queda por debajo del
       header (body ya reserva --header-height) en vez de por detrás de él,
       así que se ve entero. Le damos el alto útil de la pantalla: menos el
       header, menos la subnav pegajosa y menos la barra táctil inferior. */
    .map-zone {
        position: relative;
        inset: auto;                  /* deja de ser la capa de fondo absoluta */
        display: block;
        width: 100%;
        height: calc(100svh - var(--header-height, 60px) - var(--pp-subnav-h) - var(--pp-chrome-bottom, 0px) - 8px);
        min-height: 400px;
        border-radius: 0;
    }

    /* Con la hoja de la lista abierta se bloquea el scroll de la página */
    body.pp-list-open { overflow: hidden; }

    /* Reparto de las cuatro esquinas del mapa, igual que en el Atlas:
       marca arriba-izquierda, herramientas arriba-derecha, zoom de Leaflet
       abajo-derecha y el FAB del listado abajo-izquierda. Ninguna se pisa. */
    .pais-page { --pp-pad: 11px; }
    .map-brand { max-width: calc(100% - 112px); padding: 9px 14px 10px; }
    .map-brand__title { font-size: 1.05rem; }
    .map-brand__stats { font-size: 0.68rem; gap: 2px 10px; margin-top: 4px; }
    .map-tools { padding: 5px; gap: 5px; }
    .map-tool { width: 40px; height: 40px; }

    /* El FAB flota sobre el MAPA, así que necesita su propio despeje de la
       barra táctil + margen. Lo calculamos a partir de la misma variable en
       vez de un número suelto. */
    .list-fab { display: flex; bottom: calc(var(--pp-chrome-bottom, 68px) + 10px); }
    /* Con la hoja abierta el FAB no pinta nada (la hoja ya trae su cierre) */
    body.pp-list-open .list-fab { opacity: 0; visibility: hidden; pointer-events: none; }

    /* El #scroll-top-btn del footer (fixed, right:20px, bottom:70px, 48px) cae
       encima de los controles +/- de Leaflet, ancladas a la esquina inferior
       derecha del mapa: los dos se pegan al borde derecho (x 322-370 contra
       336-370) y, cuando el mapa llena la pantalla, también coinciden en
       vertical. Encima gana en pintura, porque su z-index 40 está por encima
       del z-index 1 de .map-zone.
       Mientras la consola está a la vista lo retiramos (lo marca el JS con
       `pp-console-view`): ahí estorba y el mapa ya tiene su propio «Vista
       general». En cuanto sales del mapa, vuelve.
       Si prefieres conservarlo, la alternativa es subirlo con
       `bottom: calc(var(--pp-chrome-bottom) + 130px)` en vez de ocultarlo. */
    body.pp-console-view #scroll-top-btn {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .leaflet-popup-content { width: min(76vw, 262px) !important; }

    /* minmax(0, 1fr) y no `1fr`: el `auto` implícito de 1fr no baja del
       min-content del item, que es exactamente lo que ensanchaba la pista. */
    .lugares-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Toques finos de móvil pequeño */
@media (max-width: 640px) {
    .pais-shell { padding-inline: 16px; }
    /* OJO: no tocar el padding-top aquí. La regla base de .pais-hero ya
       reserva un mínimo de 34px arriba precisamente para que el logo del
       header (que desborda unos 12-14px por debajo de la barra fija) no
       pinte encima del hero. Sobrescribir aquí a 20px anulaba esa reserva
       en justo los móviles donde más se notaba el solape. Solo ajustamos
       el padding inferior. */
    .pais-hero { padding-bottom: 26px; }
    .pais-hero__lead { font-size: 0.95rem; line-height: 1.65; }
    .pais-facts { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .pais-fact { min-height: 84px; padding: 12px 14px; }
    .pais-fact dd { font-size: 1.25rem; }
    .pais-grid { grid-template-columns: minmax(0, 1fr); }
    .pais-hero__actions { gap: 8px; }
    .pais-hero__actions .pp-btn { flex: 1 1 100%; justify-content: center; height: 48px; }
    .pais-section { padding-block: 32px; }
    .pais-answer { padding: 16px; font-size: 0.92rem; }
    .lugar-card { flex-direction: column; padding: 12px; }
    .lugar-card__media, .lugar-card__media img { width: 100%; height: 150px; aspect-ratio: auto; }
    .lugar-card__foot { padding-top: 10px; }
    .mission-card__meta { gap: 10px; }
    .pais-faq-item > summary { padding: 15px 16px; font-size: 0.88rem; }
    .pais-faq-answer { padding: 0 16px 16px; font-size: 0.88rem; }
    .stop-node { padding: 11px 14px 11px 20px; gap: 12px; }
    .node-visual, .node-visual img { width: 56px; height: 56px; }
    .node-name { font-size: 0.88rem; }
    .guide-header__toggle { padding: 14px 8px 14px 11px; }
}

@media (max-width: 380px) {
    .pais-facts { grid-template-columns: 1fr; }
    .guide-tools { padding-right: 11px; }
    .btn-view-guide { padding: 0 9px; font-size: 0.62rem; }
}

/* Objetivos táctiles cómodos en dispositivos sin ratón (WCAG 2.5.8) */
@media (hover: none) and (pointer: coarse) {
    .pais-page :where(.pp-btn, .pais-link-chip, .map-tool, .lugar-card__locate,
                      .intel-chip, .btn-view-guide, .card-btn) {
        min-height: 40px;
    }
    .mission-card:hover, .lugar-card:hover, .pais-link-chip:hover, .pp-btn:hover { transform: none; }
}

/* =====================================================================
   BARRAS DE DESPLAZAMIENTO
   =====================================================================
   Las grises por defecto son lo único de la consola que no es de marca, y
   sobre cristal cantan. Mismas reglas que el Atlas, con las DOS sintaxis
   porque 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 gana la estándar; por eso la
   `::-webkit-` va después, para que los que solo entienden esa la cojan.
   ===================================================================== */
.pais-page .intel-feed {
    scrollbar-width: thin;
    scrollbar-color: var(--pp-accent) transparent;
}
.pais-page .intel-feed::-webkit-scrollbar { width: 7px; height: 7px; }
.pais-page .intel-feed::-webkit-scrollbar-track { background: transparent; }
.pais-page .intel-feed::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(180deg,
        var(--pp-accent),
        color-mix(in srgb, var(--pp-accent) 70%, var(--g-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;
}
.pais-page .intel-feed::-webkit-scrollbar-thumb:hover {
    background: var(--pp-accent);
    background-clip: content-box;
}
.pais-page ::-webkit-scrollbar-corner { background: transparent; }

@media (prefers-reduced-motion: reduce) {
    .pais-page *, .leaflet-popup-content-wrapper, .map-skeleton::before,
    .mission-dot::before, .mission-dot::after,
    .pp-marker, .pp-marker::before, .pp-marker::after, .status-indicator {
        animation: none !important;
        transition: none !important;
    }
    .mission-card:hover, .lugar-card:hover, .pp-btn:hover, .pais-link-chip:hover { transform: none; }
    /* Sin animación el acordeón debe abrir igualmente */
    .guide-group.active .guide-steps-container { grid-template-rows: 1fr; }
}