/* =========================================================
   PÁGINAS ÍNDICE · PIEL DE APP PARA EL MÓVIL (< 1024 px)
   ---------------------------------------------------------
   País (pais.php), Atlas (atlas-paises.php) y Buscador (buscador.php).
   Se carga con media="(max-width: 1023px)": el escritorio ni la aplica.
   Mismo lenguaje que guia-movil.css y plan-fuga-movil.css (AGENTS.md regla 6,
   docs/AGENTS-producto.md §7.1):
     · País: cabecera INMERSIVA como la de la guía (foto, título grande, cifras
       de cristal y «Abrir el mapa»), pestañas pegadas, listas nativas;
     · Atlas y Buscador: cabecera de app SIN foto (título grande), como pidió
       David: «son páginas genéricas»;
     · las tres: fichas y mapa a pantalla completa (assets/js/app-movil.js).
   Mismo HTML para todos: aquí solo hay piel.
   ========================================================= */

/* =========================================================
   1. PANTALLAS (app-movil.js → VVApp.abrir)
   ========================================================= */
html.va-lock, html.va-lock body { overflow: hidden; }
.va-scr {
    position: fixed; inset: 0; z-index: 2147483000;    /* sobre la barra del sitio, el dock y los diálogos */
    display: flex; flex-direction: column; height: 100vh; height: 100dvh;
    background: var(--color-background); color: var(--color-text-primary);
    animation: va-in 0.22s cubic-bezier(0.23, 1, 0.32, 1);
}
@keyframes va-in { from { transform: translateX(24px); opacity: 0.6; } to { transform: none; opacity: 1; } }
.va-scr__bar { flex: none; display: flex; align-items: center; gap: 4px; min-height: 56px; padding: calc(6px + env(safe-area-inset-top)) 10px 6px 4px; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.va-scr__bar::after { content: ''; flex: none; width: 30px; height: 30px; margin-left: 6px; background: url('/favicon.png') center / contain no-repeat; }
.va-scr__back { flex: none; width: 48px; height: 48px; border: none; border-radius: 50%; background: transparent; color: var(--color-primary); font-size: 1.3rem; cursor: pointer; display: grid; place-items: center; -webkit-tap-highlight-color: transparent; }
.va-scr__back:focus-visible, .va-scr__act:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -4px; }
.va-scr__titles { flex: 1; min-width: 0; }
.va-scr__kicker { margin: 0; font-family: var(--font-tactical); font-size: 0.6rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.va-scr__title { margin: 2px 0 0; font-family: var(--font-subheading); font-weight: 800; font-size: 1.08rem; line-height: 1.2; text-transform: none; letter-spacing: 0; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.va-scr__act { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 40px; min-width: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-background); color: var(--color-text-primary); font: inherit; font-weight: 800; font-size: 0.8rem; cursor: pointer; }
.va-scr__act i { color: var(--color-primary); }
.va-scr__main { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

/* Barras de scroll de la casa dentro de las pantallas */
.va-det__text { scrollbar-width: thin; scrollbar-color: var(--color-primary) transparent; }
.va-det__text::-webkit-scrollbar { width: 5px; }
.va-det__text::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 3px; }

/* ---------- Ficha ---------- */
.va-det { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.va-det__hero { position: relative; flex: none; height: min(30vh, 240px); height: min(30dvh, 240px); overflow: hidden; background: linear-gradient(135deg, var(--color-primary), #3a1a0b); display: grid; place-items: center; }
.va-det__hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.va-det__hero > i { font-size: 2.4rem; color: rgba(255, 255, 255, 0.85); }
.va-det__num { position: absolute; left: 12px; bottom: 12px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--color-primary); color: var(--color-text-inverted); font-weight: 800; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45); }
@media (max-height: 640px) { .va-det__hero { height: 20vh; height: 20dvh; } }
@media (orientation: landscape) and (max-height: 500px) { .va-det__hero { display: none; } }
/* El nombre sobre la foto (18-10-2026): copia de .gm-det__cap de guia-movil.css,
   para que la ficha se vea igual en guía, plan, País, Atlas, Buscador y portada. */
.va-det__hero.has-cap { height: min(34vh, 270px); height: min(34dvh, 270px); }
.va-det__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: flex-end; gap: 10px; padding: 40px 50px 12px 12px; background: linear-gradient(to top, rgba(8, 10, 13, 0.9) 0%, rgba(8, 10, 13, 0.55) 55%, rgba(8, 10, 13, 0) 100%); pointer-events: none; }
.va-det__cap .va-det__num { position: static; flex: none; }
.va-det__name { min-width: 0; color: #fff; font-family: var(--font-subheading); font-weight: 800; font-size: 1.22rem; line-height: 1.2; text-transform: none; letter-spacing: 0; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.va-det__hero.is-empty.has-cap > i { margin-bottom: 30%; }
@media (max-height: 640px) { .va-det__hero.has-cap { height: 24vh; height: 24dvh; } .va-det__name { -webkit-line-clamp: 2; font-size: 1.08rem; } }
/* Accesos rápidos en UNA fila (con cinco y auto-fit, el último bajaba de línea) */
.va-det__acts { flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; padding: 12px 4px 10px; border-bottom: 1px solid var(--color-border); }
.va-det__text { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); }
.va-det__text:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.va-det__meta { margin: 0 0 12px; color: var(--color-text-secondary); font-size: 0.88rem; }
.va-det__desc, .va-det__brief p { margin: 14px 0 0; font-size: 0.97rem; line-height: 1.65; }
.va-det__text > .vv-geo:first-child, .va-det__meta + .vv-geo { margin-top: 0; }
.va-det__from { margin: 16px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--color-surface); border: 1px solid var(--color-border); font-size: 0.86rem; color: var(--color-text-secondary); }
.va-det__from b { color: var(--color-text-primary); }
.va-det__sub { font-family: var(--font-subheading); font-weight: 800; color: var(--color-primary) !important; font-size: 0.86rem !important; text-transform: uppercase; letter-spacing: 0.4px; }
.va-det__loading { color: var(--color-text-secondary); font-style: italic; }
.va-det__loading i { color: var(--color-primary); margin-right: 4px; }
.va-det__h { margin: 22px 0 10px; font-family: var(--font-subheading); font-weight: 800; font-size: 0.95rem; text-transform: none; letter-spacing: 0; color: var(--color-text-primary); }

/* Acceso rápido: icono redondo de 46 px + rótulo (el lenguaje del plan y la guía) */
.va-qa { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; min-height: 64px; padding: 2px; border: none; background: none; color: var(--color-text-primary); text-decoration: none; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.va-qa[disabled] { opacity: 0.45; cursor: default; }
.va-qa__ico { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-primary); font-size: 1.05rem; transition: transform 0.12s ease; }
.va-qa:active .va-qa__ico { transform: scale(0.92); }
.va-qa__lbl { max-width: 100%; font-size: 0.68rem; font-weight: 700; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.va-qa--main .va-qa__ico { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverted); }
/* Guardado: PlanDeFuga pone aria-pressed y le da color al botón en línea; se le quita el borde */
.va-qa[aria-pressed="true"] { border-color: transparent !important; }
.va-qa[aria-pressed="true"] .va-qa__ico { background: color-mix(in srgb, var(--color-primary) 18%, var(--color-surface)); border-color: var(--color-primary); }
.va-qa:focus-visible { outline: none; }
.va-qa:focus-visible .va-qa__ico { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Filas de lista con chevron */
.va-rows { list-style: none; margin: 0; padding: 0; border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; background: var(--color-surface); }
.va-rows li + li { border-top: 1px solid var(--color-border); }
.va-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 8px 14px 8px 10px; border: none; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.va-row:active { background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
.va-row:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.va-row__img { flex: none; width: 52px; height: 52px; border-radius: 12px; object-fit: cover; background: var(--color-background); }
.va-row__img--ph { display: grid; place-items: center; color: var(--color-primary); font-weight: 800; border: 1px solid var(--color-border); }
.va-row__txt { flex: 1; min-width: 0; }
.va-row__txt b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.95rem; line-height: 1.25; color: var(--color-text-primary); }
.va-row__txt small { display: block; margin-top: 2px; font-size: 0.74rem; color: var(--color-text-secondary); }
.va-row__txt small:first-child { margin: 0 0 1px; font-size: 0.62rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--color-primary); }
.va-row__chev { flex: none; color: var(--color-text-secondary); font-size: 0.8rem; }

/* ---------- Mapa a pantalla completa (el nodo real se muda aquí) ---------- */
.va-scr--mapa .va-scr__main { position: relative; }
.va-hueco { display: block; }
.va-en-pantalla { flex: 1; min-height: 0; height: 100% !important; width: 100%; margin: 0 !important; border: 0 !important; border-radius: 0 !important; }

/* Botón «pantalla completa» de los mapas (nace hidden: solo esta hoja lo enseña) */
.va-expand, .va-expand[hidden] { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--color-border); background: var(--color-background); color: var(--color-text-primary); font-size: 1rem; cursor: pointer; box-shadow: var(--shadow-md); }
.va-expand:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.va-en-pantalla .va-expand { display: none; }

/* El aviso de «copiado» tiene que verse por encima de una pantalla */
.vv-toast { z-index: 2147483600; }
html.va-lock .vv-toast { bottom: calc(20px + env(safe-area-inset-bottom)); }

@media (prefers-reduced-motion: reduce) { .va-scr { animation: none; } .va-qa__ico { transition: none; } }

/* =========================================================
   2. PAÍS · cabecera inmersiva, pestañas y listas nativas
   ========================================================= */
.pais-page .pais-hero {
    display: flex; flex-direction: column; justify-content: flex-end;
    min-height: 88vh; min-height: 88svh;
    /* La foto sube por debajo de la barra del sitio: el relleno de arriba cuenta con sus 60 px */
    padding: calc(var(--header-height, 60px) + 64px) 0 22px;
    border-bottom: 0; background: #0b0d10;
}
.pais-page .pais-hero__bg { opacity: 1; filter: none; transform: none; }
.pais-page .pais-hero::before { display: none; }
/* Oscuro hasta abajo (también en el tema claro): el texto va en blanco sobre la foto */
.pais-page .pais-hero::after {
    background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0.12) 38%, rgba(8,10,13,0.8) 66%, rgba(8,10,13,0.95) 100%);
}
.pais-page .pais-hero .pais-shell { width: 100%; padding-inline: 18px; }

/* Migas → «‹ Atlas» de cristal arriba a la izquierda, como el «atrás» de una app.
   Las tres migas siguen en el HTML (y en el BreadcrumbList). */
.pais-page .pais-breadcrumb { position: absolute; top: calc(var(--header-height, 60px) + 14px); left: 16px; z-index: 2; }
.pais-page .pais-breadcrumb li:first-child, .pais-page .pais-breadcrumb li:last-child { display: none; }
.pais-page .pais-breadcrumb li + li::before { content: none; }
.pais-page .pais-breadcrumb a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 12px; border-radius: 999px; background: rgba(0,0,0,0.42); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.2); color: #fff; font-size: 0.7rem; letter-spacing: 1px; }
.pais-page .pais-breadcrumb a::before { content: '\f053'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.8rem; color: var(--color-primary); }

.pais-page .pais-hero__eyebrow { align-self: flex-start; margin: 0 0 12px; height: 30px; background: rgba(0,0,0,0.45); border-color: rgba(255,255,255,0.18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 0.6rem; }
.pais-page .pais-hero__title { margin: 0 0 12px; font-size: clamp(2.6rem, 12.5vw, 3.6rem); line-height: 1.02; color: #fff; text-shadow: 0 4px 24px rgba(0,0,0,0.6), 0 2px 4px rgba(0,0,0,0.5); }
.pais-page .pais-hero__title span { display: block; }
.pais-page .pais-hero__lead { margin: 0 0 16px; font-size: 0.95rem; line-height: 1.5; color: rgba(255,255,255,0.88); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 2px 10px rgba(0,0,0,0.6); }
.pais-page .pais-hero__lead strong { color: #fff; }

/* Cifras en fichas de cristal (la cuarta, «Actualizado», queda para el escritorio) */
.pais-page .pais-facts { order: 3; display: flex; gap: 8px; margin: 0 0 16px; }
.pais-page .pais-fact { flex: 1 1 0; min-width: 0; min-height: 0; height: 56px; padding: 8px 12px; border-radius: 14px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); gap: 2px; }
.pais-page .pais-fact::before { display: none; }
.pais-page .pais-fact:nth-child(4) { display: none; }
.pais-page .pais-fact dt { font-size: 0.54rem; letter-spacing: 1px; color: rgba(255,255,255,0.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pais-page .pais-fact dd { font-size: 1.15rem; color: #fff; }
.pais-page .pais-fact dd small { display: none; }

.pais-page .pais-hero .pais-shell { display: flex; flex-direction: column; }
.pais-page .pais-hero__actions { order: 4; margin: 0; }
.pais-page .pais-hero__actions .pp-btn--ghost { display: none; }   /* «Lugares» y «Rutas» ya están en las pestañas */
.pais-page .pais-hero__actions .pp-btn--primary { flex: 1 1 100%; justify-content: center; height: 54px; font-size: 0.95rem; letter-spacing: 0.2px; text-transform: none; box-shadow: 0 10px 28px color-mix(in srgb, var(--color-primary) 45%, transparent); }
/* Temáticas: una fila deslizable bajo el botón */
.pais-page .pais-tags { order: 5; flex-wrap: nowrap; overflow-x: auto; margin: 14px -18px 0; padding: 0 18px 2px; scrollbar-width: none; }
.pais-page .pais-tags::-webkit-scrollbar { display: none; }
.pais-page .pais-tags li { flex: none; }
.pais-page .pais-tag { height: 36px; background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); color: #fff; }

/* Pestañas pegadas bajo la barra del sitio, como las de la guía */
.pais-page .pais-subnav { top: var(--header-height, 60px); padding: 8px 0; background: color-mix(in srgb, var(--color-background) 88%, transparent); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent); }
.pais-page .pais-subnav__inner { gap: 8px; padding-inline: 12px; }
.pais-page .pais-subnav a { flex: none; min-height: 44px; height: 44px; padding: 0 14px 0 12px; gap: 8px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-primary); font-family: var(--font-subheading); font-weight: 800; font-size: 0.84rem; letter-spacing: 0; text-transform: none; }
.pais-page .pais-subnav a i { opacity: 1; }
.pais-page .pais-subnav a.is-current { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverted); }
.pais-page .pais-subnav a.is-current i { color: inherit; }

/* Mapa en la página: vista previa (el botón de expandir lo lleva a pantalla completa) */
.pais-page .map-zone { height: 62vh; height: 62svh; min-height: 360px; }
#paisConsole.va-en-pantalla .mission-layout, #paisConsole.va-en-pantalla .map-zone { height: 100%; min-height: 0; }
/* Dentro de la pantalla no hay dock: la lista baja hasta el borde */
#paisConsole.va-en-pantalla .intel-panel { bottom: 0; height: min(74dvh, 620px); padding-bottom: env(safe-area-inset-bottom); }
.pais-page .map-tools .va-expand { width: 40px; height: 40px; border-radius: 50%; box-shadow: none; background: transparent; border: 0; }

/* Lugares imprescindibles → lista agrupada: miniatura, nombre, dirección y chevron.
   La fila abre la ficha a pantalla completa (app-movil.js). */
.pais-page .lugares-grid { display: block; border: 1px solid var(--color-border); border-radius: 18px; overflow: hidden; background: var(--color-surface); }
.pais-page .lugar-card { position: relative; display: flex; flex-direction: row; align-items: center; gap: 12px; min-height: 76px; padding: 10px 14px 10px 10px; border: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pais-page .lugar-card + .lugar-card { border-top: 1px solid var(--color-border); }
.pais-page .lugar-card:hover { transform: none; box-shadow: none; }
.pais-page .lugar-card:active { background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
.pais-page .lugar-card::after { content: '\f054'; flex: none; margin-left: auto; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.8rem; color: var(--color-text-secondary); }
.pais-page .lugar-card__media, .pais-page .lugar-card__media img { width: 56px; height: 56px; border-radius: 12px; }
.pais-page .lugar-card__body { gap: 2px; }
.pais-page .lugar-card__index { margin: 0; font-size: 0.6rem; }
.pais-page .lugar-card__title { font-size: 0.95rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pais-page .lugar-card__addr { font-size: 0.74rem; }
.pais-page .lugar-card__addr span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.pais-page .lugar-card__desc, .pais-page .lugar-card__foot { display: none; }
.pais-page .pais-answer { border-radius: 18px; }

/* Rutas: tarjetas de app */
.pais-page .pais-grid { gap: 14px; }
.pais-page .mission-card { border-radius: 20px; overflow: hidden; }
.pais-page .mission-card:hover { transform: none; }

/* Preguntas frecuentes y otros destinos: listas agrupadas */
.pais-page .pais-faq-list { display: block; border: 1px solid var(--color-border); border-radius: 18px; overflow: hidden; background: var(--color-surface); }
.pais-page .pais-faq-item { margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.pais-page .pais-faq-item + .pais-faq-item { border-top: 1px solid var(--color-border); }
.pais-page .pais-faq-item > summary { min-height: 56px; }
.pais-page .pais-links-grid { display: block; border: 1px solid var(--color-border); border-radius: 18px; overflow: hidden; background: var(--color-surface); }
.pais-page .pais-links-grid li + li { border-top: 1px solid var(--color-border); }
.pais-page .pais-link-chip { display: flex; width: 100%; height: auto; min-height: 54px; padding: 0 14px; border: 0; border-radius: 0; background: transparent; font-size: 0.95rem; }
.pais-page .pais-link-chip:hover { transform: none; box-shadow: none; }
.pais-page .pais-link-chip b { margin-left: auto; min-width: 26px; padding: 2px 8px; border-radius: 999px; background: var(--color-background); border: 1px solid var(--color-border); font-size: 0.72rem; font-weight: 800; text-align: center; }
.pais-page .pais-link-chip::after { content: '\f054'; margin-left: 10px; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.75rem; color: var(--color-text-secondary); }
.pais-page .pais-links-grid li:last-child .pais-link-chip { color: var(--color-primary); font-weight: 800; }
body.light-theme .pais-page .pais-links-grid li:last-child .pais-link-chip { color: #B53A09; }

/* =========================================================
   3. ATLAS · cabecera de app sin foto (título grande) y mapa
   ========================================================= */
.ap-page .ap-hero .vv-title { font-size: clamp(2.4rem, 11vw, 3.2rem); line-height: 1; }
.ap-page .ap-sub { font-size: 0.95rem; line-height: 1.55; }
/* Cifras: tres fichas iguales, como los segmentos de una app */
.ap-page .ap-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.ap-page .ap-stats li { flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--color-surface); border: 1px solid var(--color-border); }
.ap-page .ap-stats b { font-size: 1.4rem; }
.ap-page .ap-stats span { font-size: 0.58rem; letter-spacing: 1.5px; }
/* El mapa en la página es la vista previa; el botón lo abre a pantalla completa */
.ap-page .ap-console { height: 64vh; height: 64svh; min-height: 360px; }
.ap-page .ap-console.va-en-pantalla { min-height: 0; }
.ap-page .ap-console.va-en-pantalla .ap-hint { display: none; }
/* Índice y preguntas: listas agrupadas */
.ap-page .ap-country { margin: 0; border-radius: 0; border-top-width: 0; }
.ap-page .ap-all__title + .ap-country { border-top-width: 1px; border-radius: 16px 16px 0 0; }
.ap-page .ap-country:last-of-type { border-radius: 0 0 16px 16px; }
.ap-page .ap-faq { border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-surface); padding: 4px 14px; margin-top: 32px; }
.ap-page .ap-faq__title { margin: 14px 0 6px; }
.ap-page .ap-faq details:last-of-type { border-bottom: 0; }
.ap-page .ap-faq summary { min-height: 52px; }

/* =========================================================
   4. BUSCADOR · cabecera de app, filtros y ruta a pantalla completa
   ========================================================= */
.ms-page .ms-hero .vv-title { font-size: clamp(2.4rem, 11vw, 3.2rem); line-height: 1; }
.ms-page .ms-mapbox.va-en-pantalla .ms-map { height: 100%; }
.ms-page .ms-map { height: 56vh; height: 56svh; }

/* Filtros: pantalla completa con «‹» a la izquierda, como el resto de pantallas */
.ms-brief.is-modal { z-index: 2147483000; padding: 0; align-items: stretch; background: var(--color-background); -webkit-backdrop-filter: none; backdrop-filter: none; }
.ms-brief.is-modal .ms-wiz { width: 100%; max-height: none; height: 100vh; height: 100dvh; border-radius: 0; box-shadow: none; padding: 0 16px; }
.ms-brief.is-modal .ms-wiz__head { margin: 0 -16px; padding: calc(6px + env(safe-area-inset-top)) 16px 6px 4px; min-height: 56px; background: var(--color-surface); gap: 4px; }
.ms-brief.is-modal .ms-brief__title { order: 1; flex: 1; min-width: 0; font-family: var(--font-subheading); font-weight: 800; font-size: 1.08rem; letter-spacing: 0; text-transform: none; color: var(--color-text-primary); }
.ms-brief.is-modal .ms-brief__num { display: none; }
.ms-brief.is-modal .js-wiz-close { order: 0; margin: 0; width: 48px; height: 48px; padding: 0; display: grid; place-items: center; font-size: 0; color: var(--color-primary); border-radius: 50%; }
.ms-brief.is-modal .js-wiz-close i { display: none; }
.ms-brief.is-modal .js-wiz-close::before { content: '\f053'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 1.3rem; }
.ms-brief.is-modal .ms-wiz__foot { position: static; }

/* Ruta de una misión: mapa a pantalla completa con «‹», como el de la guía */
.sb-modal { z-index: 2147483000; padding: 0; align-items: stretch; background: var(--color-background); }
.sb-modal__box { width: 100%; max-width: none; height: 100vh; height: 100dvh; border-radius: 0; border: 0; }
.sb-modal__head { gap: 4px; min-height: 56px; padding: calc(4px + env(safe-area-inset-top)) 12px 4px 4px; }
.sb-modal__x { order: -1; width: 48px; height: 48px; border: 0; background: transparent; color: var(--color-primary); font-size: 0; display: grid; place-items: center; }
.sb-modal__x i { display: none; }
.sb-modal__x::before { content: '\f053'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 1.3rem; }
.sb-modal__titles { flex: 1; min-width: 0; }
.sb-modal__foot { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }

/* ---------- Ficha a pantalla completa: la misma en plan, guía, País, Atlas y Buscador (26-09-2026) ----------
   «‹» siempre dentro de su aro naranja (antes el aro solo salía con el foco y las fichas
   nuevas lo enseñaban suelto) y la «A» de la casa como sello en la foto, como en las
   fotos de la guía. El sello es decorativo: pseudoelemento, fuera del árbol de accesibilidad. */
.va-scr__back, .ms-brief.is-modal .js-wiz-close, .sb-modal__x { box-shadow: inset 0 0 0 2px var(--color-primary); width: 44px !important; height: 44px !important; margin: 2px; }
.va-det__hero::after { content: ''; position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 28px; height: 26px; pointer-events: none; background: url('/assets/img/marca-a.webp') center / contain no-repeat; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55)); opacity: 0.92; }

/* El nombre del país va en degradado con el relleno transparente: un text-shadow se
   vería A TRAVÉS de las letras y las apagaba. La sombra va por filtro, detrás. */
.pais-page .pais-hero__title span { text-shadow: none; filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.6)); }