/* ═══════════════════════════════════════════════════════════════════════
   Descubre Bareyo · Design System v3
   Overrides on top of styles.css (load order matters)
   Mobile-first · Modern glass · Dark-mode aware overlays
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tokens v3 ─────────────────────────────────────────────────────────── */
:root {
    /* Spacing scale (8pt grid) */
    --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
    --s-5: 20px;  --s-6: 24px;  --s-7: 32px;  --s-8: 40px;
    --s-9: 48px;  --s-10: 64px; --s-11: 80px; --s-12: 96px;

    /* Type scale (fluid clamp) */
    --type-display: clamp(40px, 7vw, 88px);
    --type-h1:      clamp(28px, 4vw, 44px);
    --type-h2:      clamp(22px, 2.6vw, 30px);
    --type-h3:      clamp(18px, 2vw, 22px);
    --type-body:    15px;
    --type-small:   13px;
    --type-micro:   11px;

    /* Radii */
    --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px;
    --r-xl: 24px; --r-2xl: 32px; --r-full: 999px;

    /* Shadows (multi-layer for real depth) */
    --shadow-sm: 0 1px 2px rgba(34,56,25,0.04), 0 2px 4px rgba(34,56,25,0.04);
    --shadow-md: 0 2px 4px rgba(34,56,25,0.04), 0 8px 20px rgba(34,56,25,0.08);
    --shadow-lg: 0 4px 8px rgba(34,56,25,0.04), 0 16px 40px rgba(34,56,25,0.12);
    --shadow-xl: 0 8px 16px rgba(34,56,25,0.06), 0 24px 60px rgba(34,56,25,0.18);
    --shadow-glow: 0 0 0 1px rgba(255,255,255,0.06), 0 12px 32px rgba(65,105,48,0.20);

    /* Easings */
    --e-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --e-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Glass blur levels */
    --blur-sm: blur(8px) saturate(160%);
    --blur-md: blur(20px) saturate(180%);
    --blur-lg: blur(32px) saturate(200%);

    /* Semantic surfaces — light theme */
    --surface:           #ffffff;
    --surface-elevated:  #ffffff;
    --surface-muted:     #f6f8f5;
    --surface-overlay:   rgba(255,255,255,0.85);
    --surface-glass:     rgba(255,255,255,0.92);
    --text:              #0f1f17;
    --text-muted:        #5b6a64;
    --text-faint:        #6b7a73;   /* AA: ~4.6:1 sobre blanco (antes #8b9892 = 3.0:1, ilegible al sol) */
    --border:            rgba(34,56,25,0.08);
    --border-strong:     rgba(34,56,25,0.16);

    /* Aurora gradient stops — sin neón, dentro del croma de la paleta */
    --aurora-1: #416930;
    --aurora-2: #7BB663;
    --aurora-3: #2E9BC0;
    --aurora-4: #B96A3C;
}

/* Foco de teclado visible en toda la app (WCAG 2.4.7). Solo teclado (:focus-visible),
   no roba el anillo a los clics de ratón. */
:focus-visible {
    outline: 2px solid var(--accent, #7BB663);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Dark theme overrides (overlay UI only — basemap se cambia en JS) */
html[data-theme="dark"] {
    --surface:           #142b1f;
    --surface-elevated:  #1a3527;
    --surface-muted:     #0f2419;
    --surface-overlay:   rgba(20,43,31,0.88);
    --surface-glass:     rgba(20,43,31,0.78);
    --text:              #EBF3E8;
    --text-muted:        #9eb0a4;
    --text-faint:        #6b7e72;
    --border:            rgba(168,196,147,0.14);
    --border-strong:     rgba(168,196,147,0.28);

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.20), 0 2px 4px rgba(0,0,0,0.20);
    --shadow-md: 0 2px 4px rgba(0,0,0,0.24), 0 8px 20px rgba(0,0,0,0.30);
    --shadow-lg: 0 4px 8px rgba(0,0,0,0.30), 0 16px 40px rgba(0,0,0,0.40);
    --shadow-xl: 0 8px 16px rgba(0,0,0,0.36), 0 24px 60px rgba(0,0,0,0.50);
}

/* Reduced motion — respect user prefs */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   LANDING PAGE v3 (2026-08-28) — patrón Descubre Llanes 2026
   Barra superior fija (marca + idioma + CTA) · hero con buscador search-first
   · tarjetas "Elige por dónde empezar" · franja de lo que incluye · pie.
   Las reglas legacy de styles.css (.landing-*) quedan pisadas aquí.
   ═══════════════════════════════════════════════════════════════════════ */

#landingPage {
    background: #fafbf9;
    color: var(--text);
}
html[data-theme="dark"] #landingPage { background: #0a1810; }

/* ── Barra superior fija ── */
.landing-topbar {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
    padding: 10px clamp(14px, 3vw, 28px);
    background: rgba(10, 36, 22, 0.80);
    backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md);
    border-bottom: 1px solid rgba(255,255,255,0.10);
    color: #EBF3E8;
}
.ltb-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ltb-brand img { height: 36px; width: auto; background: #fff; border-radius: 9px; padding: 3px 7px; }
.ltb-brand b {
    font-family: 'Signika', system-ui, sans-serif; font-weight: 700; font-size: 1.02rem;
    white-space: nowrap; letter-spacing: -0.01em;
}
.ltb-actions { display: flex; align-items: center; gap: 10px; }
.landing-langs { display: flex; gap: 3px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,0.08); }
.lang-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 10px; border: 0; border-radius: 999px;
    background: transparent; color: rgba(236,242,232,0.82);
    font: 700 12px/1 'DM Sans', system-ui, sans-serif; cursor: pointer;
    transition: background .15s, color .15s;
}
.lang-btn .flag { width: 18px; height: 12px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.25); }
.lang-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.lang-btn.is-active { background: #fff; color: #223819; }
.ltb-cta {
    height: 38px; padding: 0 18px; border: 0; border-radius: 10px;
    background: linear-gradient(135deg, #ADD19E, #7BB663); color: #223819;
    font: 700 14px/1 'Signika', system-ui, sans-serif; cursor: pointer;
    transition: filter .15s, transform .15s;
}
.ltb-cta:hover { filter: brightness(1.05); transform: translateY(-1px); }
/* ODA junto a «Explorar mapa»: el azul de todo lo aéreo */
.ltb-cta--oda { display: inline-flex; align-items: center; background: #226EA3; color: #fff; text-decoration: none; white-space: nowrap; }
@media (max-width: 720px) { .ltb-cta--oda { display: none; } }      /* en móvil no cabe en la barra: queda el del titular */
@media (max-width: 560px) {
    .ltb-brand b { display: none; }
    .lang-btn { padding: 0 8px; gap: 4px; }
    .ltb-cta { padding: 0 12px; font-size: 13px; }
}
/* A 320 px la barra no cabía (idiomas + botón se salían 10–20 px y toda la portada se deslizaba de lado): sin banderas, solo las siglas */
@media (max-width: 350px) {
    .landing-topbar .lang-btn .flag { display: none; }
}

/* ── Hero ── */
.landing-hero {
    position: relative; isolation: isolate; overflow: hidden;
    min-height: min(78svh, 760px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: clamp(44px, 8vh, 96px) var(--s-5) clamp(40px, 7vh, 80px);
    color: #fff; text-align: center;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(130,170,100,0.30) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 100%, rgba(14,165,233,0.22) 0%, transparent 55%),
        linear-gradient(160deg, #223819 0%, #416930 50%, #223819 100%);
}
/* Aurora (animada) + grano sutil */
.landing-hero::before,
.landing-hero::after {
    content: '';
    position: absolute;
    width: 60vw; height: 60vw;
    max-width: 800px; max-height: 800px;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.45;
    z-index: -1;
    pointer-events: none;
    animation: aurora 18s ease-in-out infinite;
}
.landing-hero::before { background: radial-gradient(circle, var(--aurora-2), transparent 70%); top: -20%; left: -10%; }
.landing-hero::after  { background: radial-gradient(circle, var(--aurora-3), transparent 70%); bottom: -20%; right: -10%; animation-delay: -9s; }
@keyframes aurora {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(8%, -6%) scale(1.1); }
    66%      { transform: translate(-6%, 8%) scale(0.95); }
}
.landing-hero-overlay { display: none; }
.landing-hero-content { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; }

.landing-eyebrow {
    font: 700 12px/1 'DM Sans', system-ui, sans-serif;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: #ADD19E; margin: 0 0 var(--s-4);
}
.landing-title {
    font-family: 'Signika', system-ui, sans-serif;
    font-weight: 800;
    font-size: var(--type-display);
    line-height: 0.95;
    letter-spacing: -0.04em;
    margin: 0 0 var(--s-4);
    color: #fff;
    text-shadow: 0 4px 24px rgba(0,0,0,0.25);
    text-wrap: balance;
}
.landing-title span {
    background: linear-gradient(135deg, #ADD19E 0%, #7BB663 50%, #9DC47F 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; font-weight: 800;
}
.landing-subtitle {
    font-size: clamp(15px, 1.6vw, 19px);
    line-height: 1.55;
    color: rgba(255,255,255,0.84);
    max-width: 640px;
    margin: 0 auto var(--s-6);
    font-weight: 400;
    text-wrap: balance;
}

/* Buscador search-first */
.landing-search {
    display: flex; align-items: center; gap: 8px;
    max-width: 580px; margin: 0 auto var(--s-5);
    padding: 6px 6px 6px 16px;
    background: #fff; border-radius: 999px;
    box-shadow: 0 14px 40px rgba(4, 26, 14, 0.35), 0 0 0 1px rgba(255,255,255,0.35);
    color: #0f1f17; text-align: left;
}
.landing-search:focus-within { box-shadow: 0 14px 40px rgba(4, 26, 14, 0.35), 0 0 0 3px rgba(130,170,100,0.55); }
.landing-search .ls-ico { color: #6b7a73; flex: none; }
.landing-search input {
    flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
    font: 500 16px/1.2 'DM Sans', system-ui, sans-serif; color: #0f1f17; padding: 12px 4px;
}
.landing-search input::placeholder { color: #8b9892; }
.landing-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.landing-search .ls-go {
    height: 44px; padding: 0 22px; border: 0; border-radius: 999px; flex: none;
    background: linear-gradient(135deg, #7BB663, #6E9456); color: #fff;
    font: 700 14px/1 'Signika', system-ui, sans-serif; cursor: pointer;
    transition: filter .15s;
}
.landing-search .ls-go:hover { filter: brightness(1.06); }
@media (max-width: 480px) { .landing-search .ls-go { padding: 0 14px; } }

.landing-cta {
    display: inline-flex; align-items: center; gap: var(--s-3);
    padding: var(--s-4) var(--s-7);
    background: linear-gradient(135deg, #7BB663 0%, #6E9456 100%);
    color: #fff; border: none; cursor: pointer;
    font-family: 'Signika', system-ui, sans-serif; font-weight: 700; font-size: 16px;
    border-radius: var(--r-full);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.15) inset,
        0 12px 32px rgba(110,148,86,0.45),
        0 4px 12px rgba(34,56,25,0.30);
    transition: transform 0.3s var(--e-spring), box-shadow 0.3s var(--e-out), filter 0.2s;
    position: relative; overflow: hidden;
}
.landing-cta::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.7s var(--e-out);
}
.landing-cta:hover { transform: translateY(-3px) scale(1.02); filter: brightness(1.06); }
.landing-cta:hover::before { transform: translateX(100%); }
.landing-cta:active { transform: translateY(-1px) scale(0.99); }
.landing-cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-3); }
.landing-cta--oda {
    text-decoration: none;
    background: linear-gradient(135deg, #2877AD 0%, #1D5F8E 100%);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.15) inset, 0 12px 32px rgba(34,110,163,0.42), 0 4px 12px rgba(20,48,70,0.30);
}
@media (max-width: 480px) { .landing-cta-row .landing-cta { flex: 1 1 100%; justify-content: center; } }
.landing-trust { margin: var(--s-4) 0 0; font-size: 12.5px; color: rgba(255,255,255,0.62); letter-spacing: 0.01em; }

/* ── Tarjetas de modo ── */
.landing-modes { max-width: 1160px; margin: 0 auto; padding: var(--s-9) var(--s-5) var(--s-6); }
.landing-section-title {
    font-family: 'Signika', system-ui, sans-serif; font-weight: 800;
    font-size: var(--type-h2); line-height: 1.1; letter-spacing: -0.02em;
    color: var(--text); text-align: center; margin: 0 0 var(--s-6);
}
.modes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-4); }
.landing-mode {
    position: relative; overflow: hidden; text-align: left;
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl);
    box-shadow: var(--shadow-sm); padding: 0; cursor: pointer; color: var(--text); font: inherit;
    transition: transform 0.2s var(--e-out), box-shadow 0.2s var(--e-out), border-color 0.2s;
}
.landing-mode:hover, .landing-mode:focus-visible {
    transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(130,170,100,0.45);
}
.lm-cover {
    position: relative; display: grid; place-items: center; height: 118px;
    background: linear-gradient(135deg, var(--lm-a), var(--lm-b));
    color: #fff;
}
/* Curvas de nivel sutiles sobre el degradado (sin assets externos) */
.lm-cover::after {
    content: ''; position: absolute; inset: 0; opacity: 0.16; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.2'%3E%3Cpath d='M-10 40c30-20 60 10 90-10s50-30 90-10'/%3E%3Cpath d='M-10 70c30-20 60 10 90-10s50-30 90-10'/%3E%3Cpath d='M-10 100c30-20 60 10 90-10s50-30 90-10'/%3E%3Cpath d='M-10 130c30-20 60 10 90-10s50-30 90-10'/%3E%3Cpath d='M-10 160c30-20 60 10 90-10s50-30 90-10'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 160px 160px;
}
.lm-icon { width: 54px; height: 54px; position: relative; z-index: 1; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.28)); }
.lm-body { display: flex; flex-direction: column; gap: 4px; padding: var(--s-4); flex: 1; }
.lm-body > b { font: 700 17px/1.2 'Signika', system-ui, sans-serif; letter-spacing: -0.01em; }
.lm-desc { font-size: 13.5px; color: var(--text-muted); line-height: 1.4; flex: 1; overflow-wrap: anywhere; hyphens: auto; }   /* alemán a 320 px: «Drohnenpanoramen» se cortaba */
.lm-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 8px; margin-top: var(--s-2); }   /* wrap: «207 panorámicas» + «Explorar» no caben en una línea en móvil */
.lm-badge { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.lm-badge b { font: 800 20px/1 'Signika', system-ui, sans-serif; color: var(--text); }
.lm-go { font: 700 13px/1 'DM Sans', system-ui, sans-serif; color: var(--bareyo); white-space: nowrap; }
.landing-mode:hover .lm-go { text-decoration: underline; }
/* Desde el 09-10-2026 las tarjetas son enlaces a las subpáginas de sección (patrimonio.html, rutas.html…), no botones */
a.landing-mode { text-decoration: none; }
html[data-theme="dark"] .lm-go { color: #ADD19E; }   /* --bareyo sobre la tarjeta oscura no llegaba a 4,5:1 */
@media (max-width: 640px) {
    .landing-modes { padding-top: var(--s-7); }
    .modes-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
    .lm-cover { height: 92px; }
    .lm-icon { width: 42px; height: 42px; }
    .lm-body { padding: var(--s-3); }
    .landing-mode[data-mode="agenda"] { grid-column: span 2; }
}

/* ── Franja "Todo lo que incluye" ── */
.landing-included { max-width: 1160px; margin: 0 auto; padding: var(--s-4) var(--s-5) var(--s-9); text-align: center; }
.landing-included h3 {
    font: 700 12px/1 'DM Sans', system-ui, sans-serif; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--text-faint); margin: 0 0 var(--s-4);
}
.included-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.inc-chip {
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--border);
    font: 600 13px/1 'DM Sans', system-ui, sans-serif; color: var(--text); box-shadow: var(--shadow-sm);
}
.inc-ico { width: 18px; height: 18px; color: var(--bareyo-light, #4B7E38); flex: none; }

/* ── Pie ── */
.landing-footer {
    background: linear-gradient(160deg, #223819 0%, #416930 100%);
    color: rgba(255,255,255,0.75); text-align: center;
    padding: var(--s-8) var(--s-5) calc(var(--s-8) + env(safe-area-inset-bottom));
    font-size: 13.5px;
}
.logo-ayto-mini { height: 44px; width: auto; background: #fff; border-radius: 10px; padding: 5px 9px; margin-bottom: var(--s-3); }
.landing-footer p { margin: 0; }
.landing-footer a { color: #fff; font-weight: 700; text-decoration: none; }
.landing-footer a:hover { text-decoration: underline; }
.landing-footer .credit { margin-top: 6px; color: rgba(255,255,255,0.55); }

/* ═══════════════════════════════════════════════════════════════════════
   FLOATING PILLS — Glass enriched + gradient border
   ═══════════════════════════════════════════════════════════════════════ */
.floating-pill {
    background: var(--surface-glass);
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
    border: 1px solid var(--border-strong);
    color: var(--text);
    box-shadow: var(--shadow-md);
    border-radius: var(--r-full);
    padding: 9px 16px;
    min-height: 42px;
    transition: transform 0.25s var(--e-spring), box-shadow 0.25s var(--e-out), background 0.25s;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-weight: 600;
    font-size: 13px;
    display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer;
}
.floating-pill:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    background: var(--surface);
}
.floating-pill.active {
    background: linear-gradient(135deg, var(--bareyo) 0%, var(--bareyo-light) 100%);
    color: white;
    border-color: rgba(255,255,255,0.20);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.15) inset,
        0 8px 20px rgba(65,105,48,0.40);
}
.floating-pill-icon { font-size: 16px; line-height: 1; }
.floating-pill-label { white-space: nowrap; }
.floating-pill-sep { opacity: 0.45; }

/* Help button keeps prominent pulse */
.map-ctrl-help {
    background: linear-gradient(135deg, var(--bareyo) 0%, var(--bareyo-light) 100%) !important;
    color: white !important;
    border-color: rgba(255,255,255,0.18) !important;
    animation: helpPulseV3 2.5s ease-in-out infinite;
}
@keyframes helpPulseV3 {
    0%, 100% { box-shadow: 0 0 0 0 rgba(130,170,100,0.5), var(--shadow-md); }
    50%      { box-shadow: 0 0 0 10px rgba(130,170,100,0),   var(--shadow-md); }
}

/* Floating expand panel (weather, marine) */
.floating-expand-panel {
    background: var(--surface);
    color: var(--text);
    border-radius: var(--r-xl);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xl);
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
}

/* Search */
.search-container {
    padding: var(--s-4) var(--s-5);
    background: var(--surface);
    position: relative;
}
.search-input {
    width: 100%;
    padding: 12px 16px 12px 42px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-family: 'DM Sans', system-ui;
    font-size: 14px;
    background: var(--surface-muted);
    color: var(--text);
    transition: all 0.25s var(--e-out);
}
.search-input::placeholder { color: var(--text-faint); }
.search-input:focus {
    outline: none;
    border-color: var(--bareyo-accent);
    background: var(--surface);
    box-shadow: 0 0 0 4px rgba(130,170,100,0.18);
}
.search-icon {
    position: absolute;
    left: calc(var(--s-5) + 14px);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-faint);
    pointer-events: none;
}

/* Tabs */
.tabs-container {
    display: flex;
    gap: 6px;
    padding: var(--s-3) var(--s-5);
    overflow-x: auto;
    scrollbar-width: none;
}
.tabs-container::-webkit-scrollbar { display: none; }

.tab-pill {
    flex-shrink: 0;
    padding: 8px 14px;
    border-radius: var(--r-full);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    font-family: 'Signika', system-ui, sans-serif;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.25s var(--e-out);
    display: inline-flex; align-items: center; gap: 6px;
}
.tab-pill:hover {
    border-color: var(--border-strong);
    color: var(--text);
}
.tab-pill.active {
    background: var(--bareyo);
    color: white;
    border-color: var(--bareyo);
    box-shadow: 0 4px 12px rgba(65,105,48,0.30);
    animation: tabPillPop 0.38s var(--e-spring);
}
/* Efecto "subrayado viajero" (efecto-ia-mapas-clotitec, menus-navegacion) adaptado: aquí las
   tabs son pills rellenos, no subrayadas, así que el feedback de cambio es un pop de escala
   en vez de una línea deslizante (que quedaría oculta bajo el propio relleno del pill). */
@keyframes tabPillPop { 0% { transform: scale(.92); } 55% { transform: scale(1.05); } 100% { transform: scale(1); } }

/* Filters container — same pattern */
.filters-container {
    padding: 0 var(--s-5) var(--s-3);
    display: flex; flex-wrap: wrap; gap: 6px;
}

/* List of items */
.company-list {
    overflow-y: auto;
    padding: var(--s-2) var(--s-5) var(--s-5);
    flex: 1;
    background: var(--surface);
}

.company-card {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    margin-bottom: var(--s-2);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: all 0.3s var(--e-out);
    position: relative;
    overflow: hidden;
}
.company-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(130,170,100,0.05));
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.company-card:hover {
    border-color: var(--bareyo-accent);
    transform: translateX(2px);
    box-shadow: var(--shadow-md);
}
.company-card:hover::before { opacity: 1; }
.company-card:focus-visible {
    outline: 2px solid var(--bareyo-accent);
    outline-offset: 2px;
}

.company-icon {
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: var(--r-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    position: relative;
}
.company-emoji { font-size: 22px; }

.company-info { flex: 1; min-width: 0; }
.company-name {
    font-family: 'Signika', system-ui, sans-serif;
    font-weight: 700;
    font-size: 14.5px;
    color: var(--text);
    line-height: 1.25;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.company-sector-tag {
    font-size: 11.5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.company-arrow {
    color: var(--text-faint);
    transition: transform 0.25s var(--e-spring);
    flex-shrink: 0;
}
.company-card:hover .company-arrow { transform: translateX(3px); color: var(--bareyo-accent); }

.item-badge {
    position: absolute;
    top: -4px; right: -4px;
    width: 18px; height: 18px;
    border-radius: 50%;
    color: white;
    font-family: 'Signika', system-ui, sans-serif;
    font-weight: 800;
    font-size: 10px;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--surface);
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: var(--s-9) var(--s-5);
    color: var(--text-muted);
    font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════════════════
   DETAIL MODAL — Bigger hero, sticky header, generous typography
   ═══════════════════════════════════════════════════════════════════════ */
.detail-overlay {
    background: rgba(34,56,25,0.65);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
}

.detail-card {
    background: var(--surface);
    color: var(--text);
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border);
    max-width: 760px;
    width: calc(100% - var(--s-6));
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
@media (max-width: 700px) {
    .detail-card {
        max-height: 96vh;
        border-radius: var(--r-2xl) var(--r-2xl) 0 0;
        align-self: flex-end;
        width: 100%;
    }
}

.detail-hero {
    height: clamp(220px, 38vh, 380px);
    position: relative;
    background-color: var(--bareyo);
}
.detail-hero-gradient {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(34,56,25,0.20) 60%, rgba(34,56,25,0.85) 100%);
}

.hero-top-bar {
    position: absolute;
    top: 0; left: 0; right: 0;
    padding: var(--s-4) var(--s-5);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 2;
}
.hero-sector-badge {
    padding: 6px 12px;
    background: rgba(255,255,255,0.25);
    color: white;
    border-radius: var(--r-full);
    font-family: 'Signika', system-ui, sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    backdrop-filter: var(--blur-sm);
    -webkit-backdrop-filter: var(--blur-sm);
    border: 1px solid rgba(255,255,255,0.30);
}

.detail-close {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(34,56,25,0.55);
    color: white;
    border: 1px solid rgba(255,255,255,0.18);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: var(--blur-sm);
    -webkit-backdrop-filter: var(--blur-sm);
    transition: transform 0.2s var(--e-spring), background 0.2s;
}
.detail-close:hover { transform: scale(1.08); background: rgba(34,56,25,0.85); }

/* Cierre fiable en táctil (tótem): touch-action none evita que un toque con leve
   arrastre sobre la X se convierta en scroll (pointercancel se comía el tap) y el
   ::after amplía la zona de toque más allá del círculo visible. app.js añade el
   fallback por pointerup con tolerancia de movimiento. */
.detail-close { position: relative; }
.detail-close, .event-modal-close, .f360-viewer-close, .tutorial-skip { touch-action: none; }
.detail-close::after, .event-modal-close::after, .f360-viewer-close::after {
    content: '';
    position: absolute;
    inset: -12px;
    border-radius: 50%;
}
html[data-kiosco="1"] .detail-close::after,
html[data-kiosco="1"] .event-modal-close::after,
html[data-kiosco="1"] .f360-viewer-close::after { inset: -22px; }

.hero-bottom-bar {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: var(--s-6) var(--s-5);
    color: white;
    z-index: 2;
}
.hero-title {
    font-family: 'Signika', system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(22px, 3.5vw, 32px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 12px rgba(0,0,0,0.30);
    margin-bottom: 6px;
}
.hero-location {
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    display: flex; align-items: center; gap: 6px;
}
/* Pin de trazo (js/iconos.js → 'pin') como máscara: hereda el color del texto, sin emoji */
.hero-location::before {
    content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.2s7-5.7 7-11.2a7 7 0 1 0-14 0c0 5.5 7 11.2 7 11.2z'/%3E%3Ccircle cx='12' cy='9.8' r='2.6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.2s7-5.7 7-11.2a7 7 0 1 0-14 0c0 5.5 7 11.2 7 11.2z'/%3E%3Ccircle cx='12' cy='9.8' r='2.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* When there's no hero (3D, costa without image) */
.detail-header {
    padding: var(--s-6) var(--s-5);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.detail-title {
    font-family: 'Signika', system-ui, sans-serif;
    font-weight: 800;
    font-size: var(--type-h2);
    color: var(--text);
    line-height: 1.15;
    margin-bottom: var(--s-2);
    letter-spacing: -0.02em;
}
.detail-sector-badge { display: inline-block; padding: 3px 10px; border-radius: var(--r-full); font-size: 11px; font-weight: 700; }
.detail-area { color: var(--text-muted); font-size: 13px; margin-top: 6px; }

/* Body */
.detail-body {
    flex: 1; min-height: 0;
    overflow-y: auto;
    padding: var(--s-5) var(--s-5) var(--s-7);
    background: var(--surface);
}

.detail-section {
    margin-bottom: var(--s-6);
}

.detail-section-title {
    font-family: 'Signika', system-ui, sans-serif;
    font-weight: 700;
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--s-3);
    display: flex; align-items: center; gap: 6px;
}

.detail-description {
    font-size: 15px;
    color: var(--text);
    line-height: 1.65;
    font-weight: 400;
}

.detail-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.detail-tag {
    padding: 4px 12px;
    border-radius: var(--r-full);
    font-size: 12px;
    font-weight: 600;
    transition: transform 0.2s;
}
.detail-tag:hover { transform: translateY(-1px); }

.detail-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-3);
}
.stat-card {
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--s-4);
    text-align: center;
    transition: all 0.3s var(--e-out);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-value {
    font-family: 'Signika', system-ui, sans-serif;
    font-weight: 800;
    font-size: 18px;
    color: var(--text);
    margin-bottom: 4px;
    letter-spacing: -0.02em;
}
.stat-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }

.elevation-container {
    background: var(--surface-muted);
    border-radius: var(--r-md);
    padding: var(--s-3);
}

.minimap-container {
    height: 200px;
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--border);
}

.embed-360-container {
    aspect-ratio: 16 / 9;
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--border);
}
.embed-360-iframe { width: 100%; height: 100%; border: 0; }

.info-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    color: var(--text);
}
.info-row:last-child { border-bottom: none; }
.info-row a { font-weight: 600; }

/* Action buttons */
.action-buttons {
    padding: var(--s-4) var(--s-5);
    display: flex; flex-wrap: wrap; gap: var(--s-2);
    background: var(--surface);
    border-top: 1px solid var(--border);
    position: sticky; bottom: 0;
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
}
.action-btn {
    flex: 1 1 auto;
    min-width: 110px;
    padding: 12px 16px;
    border-radius: var(--r-md);
    border: none;
    cursor: pointer;
    font-family: 'Signika', system-ui, sans-serif;
    font-weight: 700;
    font-size: 13px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    transition: transform 0.2s var(--e-spring), box-shadow 0.2s var(--e-out), filter 0.2s;
}
.action-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.action-btn:active { transform: translateY(0); }
.action-btn-primary {
    /* Fondo por defecto en CSS (A5): antes dependía de que JS inyectara inline
       → si fallaba, botón sin fondo. El inline de categoría lo sobrescribe. */
    background: linear-gradient(135deg, var(--bareyo), var(--bareyo-light));
    color: white;
    box-shadow: 0 6px 16px rgba(65,105,48,0.30), 0 0 0 1px rgba(255,255,255,0.10) inset;
}
.action-btn-secondary {
    background: var(--surface-muted);
    color: var(--text);
    border: 1px solid var(--border);
}
.action-btn-secondary:hover { background: var(--surface); border-color: var(--border-strong); }
.action-btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════════════════
   MAP CONTROLS — gap mejorado
   ═══════════════════════════════════════════════════════════════════════ */
.map-controls {
    position: absolute;
    top: var(--s-4); right: var(--s-4);
    z-index: 10;
    display: flex; flex-wrap: wrap; gap: var(--s-2);
    justify-content: flex-end;
    max-width: calc(100vw - 32px);
}
@media (max-width: 700px) {
    .map-controls { top: var(--s-3); right: var(--s-3); }
    .floating-pill .floating-pill-label { display: none; }
    .floating-pill { padding: 9px 11px; min-width: 42px; justify-content: center; }
}

.floating-overlays {
    position: absolute;
    bottom: var(--s-5); right: var(--s-4);
    z-index: 10;
    display: flex; flex-direction: column-reverse; gap: var(--s-3);
    align-items: flex-end;
    pointer-events: none;
}
.floating-overlays > * { pointer-events: auto; }

.floating-btn-group { position: relative; display: flex; align-items: center; gap: 0; }
/* El panel abre a la IZQUIERDA de su pastilla (anclado abajo): así nunca tapa la
   columna de pastillas — antes abría encima y se superponía a los otros menús. */
.floating-expand-panel {
    position: absolute;
    bottom: 0;
    right: calc(100% + 12px);
    min-width: 280px;
    max-width: calc(100vw - 84px);
    max-height: min(72vh, 640px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: var(--s-5);
    padding-right: var(--s-7); /* hueco para el botón cerrar */
    transform: translateX(10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s var(--e-out), transform 0.25s var(--e-spring);
}
.floating-expand-panel.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

/* Botón cerrar de los paneles flotantes (inyectado por _openFloatPanel) */
.float-panel-close {
    position: sticky;
    top: 0;
    float: right;
    margin: calc(var(--s-2) * -1) calc(var(--s-5) * -1) 0 var(--s-2);
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    background: var(--surface);
    color: var(--text-muted);
    box-shadow: var(--shadow-sm);
    z-index: 2;
}
.float-panel-close:hover { background: var(--surface-muted); color: var(--text); }
html[data-kiosco="1"] .float-panel-close { width: 64px; height: 64px; }
html[data-kiosco="1"] .float-panel-close svg { width: 24px; height: 24px; }

/* Mobile: bottom sheet visible → pull overlays up */
@media (max-width: 1023px) {
    .floating-overlays { bottom: 160px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MAP ATTRIBUTION (subtle)
   ═══════════════════════════════════════════════════════════════════════ */
.map-attribution {
    position: absolute;
    bottom: 4px; left: 4px;
    font-size: 10px;
    color: var(--text-faint);
    background: rgba(255,255,255,0.6);
    backdrop-filter: var(--blur-sm);
    padding: 2px 8px;
    border-radius: var(--r-xs);
    z-index: 5;
}

/* ═══════════════════════════════════════════════════════════════════════
   TUTORIAL — refresh card
   ═══════════════════════════════════════════════════════════════════════ */
.tutorial-card {
    background: var(--surface);
    color: var(--text);
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow-xl);
    padding: var(--s-7);
    max-width: 420px;
    border: 1px solid var(--border);
}
.tutorial-icon {
    font-size: 48px;
    margin-bottom: var(--s-4);
    text-align: center;
}
.tutorial-title {
    font-family: 'Signika', system-ui, sans-serif;
    font-weight: 800;
    font-size: 22px;
    color: var(--text);
    text-align: center;
    margin-bottom: var(--s-3);
    letter-spacing: -0.02em;
}
.tutorial-text {
    font-size: 14.5px;
    color: var(--text-muted);
    line-height: 1.6;
    text-align: center;
}

.tutorial-progress {
    height: 3px;
    background: var(--border);
    border-radius: var(--r-full);
    overflow: hidden;
    margin-bottom: var(--s-2);
}
.tutorial-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--bareyo), var(--bareyo-accent));
    transition: width 0.4s var(--e-out);
}
.tutorial-step-counter {
    text-align: center;
    font-size: 11px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin-bottom: var(--s-4);
}

.tutorial-nav {
    display: flex; gap: var(--s-2);
    margin-top: var(--s-5);
}
.tutorial-btn {
    flex: 1;
    padding: 12px;
    border-radius: var(--r-md);
    font-family: 'Signika', system-ui, sans-serif;
    font-weight: 700;
    font-size: 13px;
    border: none; cursor: pointer;
    transition: all 0.2s var(--e-out);
}
.tutorial-btn-primary { background: var(--bareyo); color: white; }
.tutorial-btn-primary:hover { background: var(--bareyo-light); transform: translateY(-1px); }
.tutorial-btn-secondary { background: var(--surface-muted); color: var(--text); }

.tutorial-skip {
    display: block;
    margin: var(--s-4) auto 0;
    background: transparent;
    border: none;
    color: var(--text-faint);
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
}

.tutorial-spotlight {
    position: fixed;
    border: 3px solid var(--bareyo-accent);
    box-shadow:
        0 0 0 9999px rgba(34,56,25,0.65),
        0 0 40px 8px rgba(130,170,100,0.50);
    border-radius: var(--r-md);
    z-index: 99996;
    pointer-events: none;
    animation: spotlightPulseV3 2.4s ease-in-out infinite;
    transition: all 0.4s var(--e-out);
}
@keyframes spotlightPulseV3 {
    0%, 100% { box-shadow: 0 0 0 9999px rgba(34,56,25,0.65), 0 0 40px 8px rgba(130,170,100,0.50); }
    50%      { box-shadow: 0 0 0 9999px rgba(34,56,25,0.65), 0 0 60px 16px rgba(130,170,100,0.65); }
}

/* ═══════════════════════════════════════════════════════════════════════
   LOADER refresh
   ═══════════════════════════════════════════════════════════════════════ */
#loader {
    background:
        radial-gradient(ellipse at 50% 30%, rgba(130,170,100,0.30) 0%, transparent 60%),
        linear-gradient(160deg, var(--bareyo-dark) 0%, var(--bareyo) 100%);
    color: white;
    position: fixed; inset: 0;
    z-index: 9999;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--s-5);
}
.loader-logos { display: flex; gap: var(--s-4); }
.loader-logo-app {
    width: auto; height: 80px; object-fit: contain;
    border-radius: var(--r-xl);
    background: rgba(255,255,255,0.10);
    padding: var(--s-3);
    backdrop-filter: var(--blur-md);
}
.spinner {
    width: 36px; height: 36px;
    border: 3px solid rgba(255,255,255,0.18);
    border-top-color: var(--bareyo-glow);
    border-radius: 50%;
    animation: spin 0.85s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
#loaderText { color: rgba(255,255,255,0.82); font-size: 14px; font-weight: 500; }

/* ═══════════════════════════════════════════════════════════════════════
   SEARCH RESULTS COUNTER
   ═══════════════════════════════════════════════════════════════════════ */
.search-results-count {
    padding: 6px var(--s-5);
    background: var(--surface-muted);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    border-bottom: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════════════════
   DARK MODE — application overlay UI specific overrides
   ═══════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] .floating-pill { color: var(--text); }
html[data-theme="dark"] .map-attribution { background: rgba(20,43,31,0.7); color: var(--text-faint); }
html[data-theme="dark"] .search-input { background: var(--surface-muted); color: var(--text); }
html[data-theme="dark"] .company-card { background: var(--surface); color: var(--text); }
html[data-theme="dark"] .detail-card { background: var(--surface); color: var(--text); }
html[data-theme="dark"] .detail-body, html[data-theme="dark"] .detail-header { background: var(--surface); }
html[data-theme="dark"] .stat-card { background: var(--surface-muted); }
html[data-theme="dark"] .elevation-container { background: var(--surface-muted); }
html[data-theme="dark"] .floating-expand-panel { background: var(--surface); color: var(--text); }
html[data-theme="dark"] .tutorial-card { background: var(--surface); color: var(--text); }
html[data-theme="dark"] .action-btn-secondary { background: var(--surface-muted); color: var(--text); }
html[data-theme="dark"] .action-buttons { background: var(--surface); }

/* ── Agenda / Eventos del municipio (events.json) ───────────────────────────── */
#eventsFloatPanel.floating-expand-panel { width: min(344px, 86vw); }
.floating-expand-panel .events-head {
    font: 700 13px/1.2 'Signika', system-ui, sans-serif; color: var(--text);
    padding: 2px 2px 9px; border-bottom: 1px solid var(--border); margin-bottom: 8px;
}
.events-list { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; }
.event-item {
    display: flex; gap: 10px; text-decoration: none; color: inherit;
    background: var(--surface-muted); border: 1px solid var(--border);
    border-radius: 12px; padding: 8px; transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.event-item:hover { background: var(--surface-elevated); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.event-thumb {
    flex: 0 0 54px; width: 54px; height: 54px; border-radius: 9px;
    object-fit: cover; background-color: var(--surface); display: block;
}
.event-body { min-width: 0; flex: 1; }
.event-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 3px; }
.event-date { font: 600 10px/1 system-ui, sans-serif; color: var(--text-muted); }
.event-cat {
    font: 700 9px/1 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-muted); background: var(--surface); border: 1px solid var(--border);
    padding: 2px 6px; border-radius: 999px;
}
.event-title {
    font: 700 12px/1.25 'Signika', system-ui, sans-serif; color: var(--text); margin-bottom: 2px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.event-summary {
    font: 400 11px/1.35 system-ui, sans-serif; color: var(--text-muted);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.events-source {
    display: block; text-align: right; font: 600 11px/1 system-ui, sans-serif;
    color: var(--text-muted); text-decoration: none; padding: 10px 2px 2px;
}
.events-source:hover { color: var(--text); }
.events-empty { font: 500 12px/1.4 system-ui, sans-serif; color: var(--text-muted); padding: 14px 6px; text-align: center; }
/* Destacado: reconocimiento Pueblo del Año a Güemes */
.events-featured {
    display: flex; gap: 8px; align-items: flex-start; width: 100%; text-align: left;
    font: 600 11.5px/1.35 system-ui, sans-serif; color: var(--text);
    background: var(--surface-muted); border: 1px solid var(--border);
    border-left: 4px solid var(--aurora-4); border-radius: 12px;
    padding: 9px 11px; margin-bottom: 10px; cursor: pointer;
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.events-featured:hover { background: var(--surface-elevated); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.events-featured--static { cursor: default; }
.events-featured--static:hover { transform: none; box-shadow: none; background: var(--surface-muted); }

/* ── Banderas de playa (Cruz Roja) ──────────────────────────────────────────── */
.flag-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px rgba(0,0,0,.10); }
.beach-flag-banner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; margin-bottom: 10px; border-radius: 12px; background: var(--surface-muted); border-left: 4px solid var(--text-faint); }
.beach-flag-label { font: 600 12px/1.25 system-ui, sans-serif; color: var(--text); }
.beach-flag-cam { margin-left: auto; font: 600 11px/1 system-ui, sans-serif; color: var(--text-muted); text-decoration: none; white-space: nowrap; }
.beach-flag-cam:hover { color: var(--text); }
.marine-flags { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
.marine-flags-title { font: 700 11px/1.2 'Signika', system-ui, sans-serif; color: var(--text); margin-bottom: 6px; }
.marine-flag-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font: 500 12px/1.2 system-ui, sans-serif; color: var(--text); }
.marine-flag-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marine-flag-val { font-weight: 700; }
.marine-flags-cam { display: block; margin-top: 6px; font: 600 10px/1.2 system-ui, sans-serif; color: var(--text-muted); text-decoration: none; }

/* ── ICV piloto ──────────────────────────────────────────────────────────── */
.icv-pilot-badge { display: inline-block; margin: 2px 0 10px; padding: 3px 9px; border-radius: var(--r-full); background: #FEF3C7; color: #92400E; font: 700 10px/1.2 system-ui, sans-serif; cursor: help; }
html[data-theme="dark"] .icv-pilot-badge { background: #451a03; color: #fcd34d; }
.icv-areas { display: flex; flex-direction: column; gap: 7px; margin-bottom: 8px; }
.icv-area-row { display: flex; align-items: center; gap: 8px; }
.icv-area-label { flex: 0 0 132px; font: 500 12px/1.2 system-ui, sans-serif; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icv-area-bar { flex: 1; height: 6px; border-radius: var(--r-full); background: var(--surface-muted); overflow: hidden; }
.icv-area-bar-fill { height: 100%; border-radius: var(--r-full); background: linear-gradient(90deg, var(--bareyo) 0%, var(--bareyo-light) 100%); }
.icv-disclaimer { font: 500 10.5px/1.4 system-ui, sans-serif; color: var(--text-muted); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }

/* ── Servicios: luz, gasolineras, festivos, carga EV ─────────────────────── */
.services-section { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.services-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.services-section-title { font: 700 10.5px/1.2 system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); margin-bottom: 4px; }

/* ── Pulso del POI seleccionado (efecto-ia-mapas-clotitec: chinchetas-pois/pulso-anillo) ── */
@keyframes fxPulseRing { 0% { transform: translate(-50%,-50%) scale(.2); opacity: .85; } 100% { transform: translate(-50%,-50%) scale(1); opacity: 0; } }
.fx-pulse-marker { width: 0; height: 0; pointer-events: none; }
.fx-pulse-ring {
    position: absolute; left: 0; top: 0; width: 70px; height: 70px; margin-left: -35px; margin-top: -35px;
    border-radius: 50%; border: 3px solid var(--bareyo); box-shadow: 0 0 14px var(--bareyo);
    animation: fxPulseRing 1800ms cubic-bezier(.25,.6,.4,1) infinite;
}

/* ── Cielo del relieve 3D ────────────────────────────────────────────────────
   El canvas WebGL de MapLibre es transparente por encima del horizonte (al
   inclinar la cámara con el terreno 3D activo). MapLibre 4.1.2 NO expone setSky
   (llegó en v5), así que el cielo se pinta con el FONDO del contenedor #map,
   que solo asoma sobre el horizonte — a pitch bajo el canvas lo cubre y no tiñe
   nada. Theme-aware vía [data-theme]; cubre también el modo satélite. */
#map { background: linear-gradient(180deg, #2f80c4 0%, #6fb7ea 52%, #bcdef6 100%); }
[data-theme="dark"] #map { background: linear-gradient(180deg, #081225 0%, #0d2138 58%, #16324f 100%); }

/* ── Modal de noticia (agenda) ── */
.event-overlay { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.55); }
.event-overlay.active { display: flex; }
.event-modal { position: relative; width: min(680px, 96vw); max-height: 90vh; overflow: auto; background: var(--surface); color: var(--text); border-radius: 18px; box-shadow: 0 18px 60px rgba(0,0,0,.4); }
.event-modal-close { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border: none; border-radius: 50%; background: var(--surface-muted); color: var(--text); font-size: 16px; cursor: pointer; }
.event-modal-img { width: 100%; height: 220px; object-fit: cover; border-radius: 18px 18px 0 0; display: block; }
.event-modal-body { padding: 18px 20px 22px; }
.event-modal-meta { display: flex; gap: 10px; align-items: center; font: 600 12px/1.2 system-ui, sans-serif; color: var(--text-muted); margin-bottom: 6px; }
.event-modal-title { font: 800 22px/1.25 'Signika', system-ui, sans-serif; margin: 0 0 12px; }
.event-modal-content { font: 400 15px/1.6 system-ui, sans-serif; color: var(--text); }
.event-modal-content p { margin: 0 0 12px; }
.event-modal-content h2, .event-modal-content h3, .event-modal-content h4 { font-family: 'Signika', system-ui, sans-serif; margin: 16px 0 8px; }
.event-modal-content ul, .event-modal-content ol { padding-left: 20px; margin: 0 0 12px; }
.event-modal-content img { max-width: 100%; height: auto; border-radius: 10px; margin: 8px 0; }
.event-modal-content a { color: var(--bareyo); }
.event-modal-original { display: inline-block; margin-top: 12px; font: 600 13px/1 system-ui, sans-serif; color: var(--bareyo); text-decoration: none; }

/* Visor 360°/Street View embebido (capa fotos360.geojson) */
.f360-viewer { position: fixed; inset: 0; z-index: 65; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.7); }
.f360-viewer.active { display: flex; }
.f360-viewer-panel { position: relative; width: min(720px, 96vw); background: var(--surface); color: var(--text); border-radius: 18px; box-shadow: 0 18px 60px rgba(0,0,0,.5); overflow: hidden; }
.f360-viewer-close { position: absolute; top: 10px; right: 10px; z-index: 2; width: 36px; height: 36px; border: none; border-radius: 50%; background: rgba(255,255,255,.92); color: #111; font-size: 16px; cursor: pointer; }
.f360-viewer-embed { aspect-ratio: 16/10; }
.f360-viewer-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; }
.f360-viewer-caption { font: 600 13px/1.3 system-ui, sans-serif; color: var(--text); }
.f360-viewer-fallback { flex: 0 0 auto; font: 600 12px/1 system-ui, sans-serif; color: var(--bareyo); text-decoration: none; white-space: nowrap; }


/* ── Barra de controles del mapa (unificada) ── */
.map-toolbar { position: absolute; top: 12px; right: 12px; z-index: 20; display: flex; flex-direction: column; gap: 6px; padding: 6px; background: var(--surface-glass); backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-md); }
.map-tool { width: 42px; height: 42px; border: none; border-radius: var(--r-sm); background: transparent; color: var(--text); cursor: pointer; display: grid; place-items: center; transition: background .15s, color .15s; }
.map-tool:hover { background: var(--surface-muted); }
.map-tool.active { background: var(--bareyo); color: #fff; } /* #fff intencional: blanco sobre --bareyo es legible en claro y oscuro (no hay token --on-accent) */
.map-tool-icon { width: 20px; height: 20px; display: block; color: currentColor; pointer-events: none; }
.map-tool.active .map-tool-icon { color: #fff; } /* el icono hereda el blanco del estado activo */
.map-toolbar-more { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--border); }
.map-toolbar-more[hidden] { display: none; }

/* ── Menú de idiomas (popover anclado a la toolbar: bandera + endónimo + check) ── */
.lang-menu { position: absolute; top: 0; right: calc(100% + 10px); min-width: 172px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); z-index: 30; }
.lang-menu[hidden] { display: none; }
.lang-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; border: none; border-radius: var(--r-sm); background: transparent; color: var(--text); font-size: 15px; font-family: inherit; cursor: pointer; text-align: left; transition: background .15s; }
.lang-row:hover { background: var(--surface-muted); }
.lang-row-flag { width: 24px; height: 14px; border-radius: 2px; object-fit: cover; flex: none; box-shadow: 0 0 0 1px var(--border); }
.lang-row-name { flex: 1; }
.lang-row-check { color: var(--bareyo); font-weight: 700; opacity: 0; }
.lang-row.active .lang-row-check { opacity: 1; }
.lang-row.active { font-weight: 600; }

/* Origen de la bandera de baño (oficial Cruz Roja / estimada por oleaje) */
.beach-flag-origin { font-size: 11px; color: var(--text-muted); font-weight: 500; }

/* ── Sección "Historia y detalle" en la ficha (textos largos del cliente) ── */
.detail-history-title {
    margin: var(--s-5) 0 var(--s-2);
    font: 700 13px/1.3 'Signika', system-ui, sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bareyo);
}
.detail-history-p { margin: 0 0 10px; }
html[data-kiosco="1"] .detail-history-title { font-size: 17px; }
html[data-kiosco="1"] .detail-history-p { font-size: 19px; line-height: 1.55; }

/* Popup de los hitos numerados de una ruta (waypoints) */
.wp-popup .maplibregl-popup-content {
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: var(--shadow-lg);
    font-family: 'DM Sans', system-ui, sans-serif;
    background: var(--surface);
    color: var(--text);
}
.wp-popup-title { font: 700 13.5px/1.3 'Signika', system-ui, sans-serif; display: block; }
.wp-popup-desc { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
html[data-kiosco="1"] .wp-popup .maplibregl-popup-content { max-width: 420px; }
html[data-kiosco="1"] .wp-popup-title { font-size: 19px; }
html[data-kiosco="1"] .wp-popup-desc { font-size: 16px; }

/* Etiqueta de nombre bajo el pin numerado de inicio de cada ruta: solo hay 6 en todo el
   municipio, así que va siempre visible (no depende del zoom, a diferencia de los ~90
   POI de la capa symbol) para que cada punto se identifique por sí mismo en el mapa. */
/* efecto al pasar el ratón en el HIJO: el transform del marcador es de MapLibre (ver createRouteMarker) */
.route-pin .route-pin-dot { transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease; }
.route-pin:hover .route-pin-dot { transform: scale(1.12) translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .route-pin .route-pin-dot { transition: none; } }
.route-pin-label {
    font: 700 10.5px/1.2 'DM Sans', system-ui, sans-serif;
    color: #fff;
    padding: 2px 7px;
    border-radius: 20px;
    white-space: nowrap;
    max-width: 128px;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 3px 8px rgba(0,0,0,.22);
    pointer-events: none;
}
html[data-kiosco="1"] .route-pin-label { font-size: 13px; max-width: 170px; padding: 3px 9px; }

/* ── Menú de estilo de mapa (popover anclado a la toolbar, patrón lang-menu) ── */
.basemap-menu { position: absolute; top: 0; right: calc(100% + 10px); min-width: 172px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); z-index: 30; }
.basemap-menu[hidden] { display: none; }
.basemap-option { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; border: none; border-radius: var(--r-sm); background: transparent; color: var(--text); font-size: 15px; font-family: inherit; cursor: pointer; text-align: left; transition: background .15s; }
.basemap-option:hover { background: var(--surface-muted); }
.basemap-option.is-active { font-weight: 700; color: var(--bareyo); }
.basemap-swatch { width: 24px; height: 24px; border-radius: 6px; flex: none; box-shadow: 0 0 0 1px var(--border); }

/* ── Visor de coordenadas del cursor (herramienta ocasional del menú «···») ── */
.coords-viewer { position: absolute; bottom: 28px; left: 12px; z-index: 20; padding: 6px 12px; background: var(--surface-glass); border: 1px solid var(--border); border-radius: var(--r-sm); font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 12.5px; color: var(--text); pointer-events: none; box-shadow: var(--shadow-md); backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md); }
.coords-viewer[hidden] { display: none; }

/* ── Pill protagonista de Fotos 360 (bottom-right, junto a Agenda/Condiciones) ── */
.floating-pill-accent { background: linear-gradient(135deg, #0e7490, #0ea5e9); color: #fff; border: none; font-weight: 700; }
.floating-pill-accent:hover { filter: brightness(1.07); }
.floating-pill-accent.active { background: linear-gradient(135deg, #075985, #0369a1); box-shadow: 0 0 0 2px rgba(14, 165, 233, .45), var(--shadow-md); }
.floating-pill-accent[aria-busy="true"] { opacity: .7; cursor: progress; }
.floating-pill-count { background: rgba(255, 255, 255, .22); border-radius: 999px; padding: 2px 8px; font-size: 12px; font-weight: 700; }
.floating-pill-count[hidden] { display: none; }
html[data-theme="dark"] .floating-pill-accent { color: #fff; } /* gana a la regla genérica de pills en oscuro */

/* Escritorio/kiosko: la barra pasa a rail vertical DENTRO del área del mapa,
   arriba a la izquierda (a la derecha del panel lateral fijo, sin solaparlo).
   El disclosure (⋯) despliega en vertical hacia abajo. Móvil/tablet: top-right. */
@media (min-width: 1024px) {
    /* Kiosco: rail a la izquierda junto al panel fijo, "grande y potente" para 65" */
    html[data-kiosco="1"] .map-toolbar {
        top: 12px;
        right: auto;
        left: 12px;
        transform: none;
    }
    html[data-kiosco="1"] .map-tool { width: 48px; height: 48px; }
    html[data-kiosco="1"] .map-tool-icon { width: 22px; height: 22px; }
    /* En kiosco el rail está a la IZQUIERDA → el menú de idiomas abre hacia la derecha
       (hacia el mapa), no encima del panel lateral. */
    html[data-kiosco="1"] .lang-menu { left: calc(100% + 10px); right: auto; }
    html[data-kiosco="1"] .basemap-menu { left: calc(100% + 10px); right: auto; }
    /* Web escritorio: rail a la DERECHA (base) — el panel flotante Komoot ocupa la izquierda.
       Los popovers abren hacia la izquierda (comportamiento base). */
}

/* ═══════════════════════════════════════════════════════════════════════
   NAVEGADOR CAJÓN — drawer deslizante (árbol + bento) · mapa protagonista
   ═══════════════════════════════════════════════════════════════════════ */
.cajon {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 30;                 /* sobre mapa/toolbar/overlays, bajo ficha (50) y agenda (60) */
    display: none;               /* revelado por JS (setupCajon) tras cargar el mapa */
    flex-direction: column;
    height: 156px;
    max-height: 96vh;
    background: var(--surface-glass);
    backdrop-filter: var(--blur-lg);
    -webkit-backdrop-filter: var(--blur-lg);
    border-top: 1px solid var(--border);
    border-radius: var(--r-2xl) var(--r-2xl) 0 0;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    transition: height .45s var(--e-spring);
}
.cajon.is-ready { display: flex; }
.cajon.is-dragging { transition: none; }

/* ── Escritorio/kiosko (>=1024px): split menú-izquierda / mapa-derecha ──────
   El cajón deja de ser bottom-sheet y pasa a PANEL LATERAL FIJO a la izquierda,
   altura completa y SIEMPRE visible (los estados peek/half/full no aplican). El
   área del mapa se empuja a la derecha con padding en el contenedor raíz, así
   #map (absolute inset:0 dentro de .flex-1) se redimensiona solo. El rail de
   controles y los overlays quedan dentro del mapa, a la derecha del panel.
   Dimensionado "grande y potente" para pantallas de 65". */
@media (min-width: 1024px) {
    :root { --cajon-panel-w: clamp(340px, 26vw, 460px); }

    /* Kiosco (tótem): conserva el split original menú-izquierda / mapa-derecha */
    html[data-kiosco="1"] .cajon {
        left: 0; top: 0; right: auto; bottom: 0;
        transform: none;
        width: var(--cajon-panel-w);
        height: 100vh; max-height: none;
        border-radius: 0;
        border: none; border-right: 1px solid var(--border);
        box-shadow: var(--shadow-lg);
        background: var(--surface);
        backdrop-filter: none; -webkit-backdrop-filter: none;
        transition: none;
    }
    html[data-kiosco="1"] [role="main"].flex { padding-left: var(--cajon-panel-w); }

    /* Web escritorio: PANEL FLOTANTE estilo Komoot — mapa a sangre completa detrás */
    html:not([data-kiosco="1"]) .cajon {
        left: 16px; top: 64px; right: auto; bottom: 16px;
        width: var(--cajon-panel-w);
        height: auto; max-height: none;
        border-radius: var(--r-2xl);
        border: 1px solid var(--border);
        box-shadow: var(--shadow-xl);
        background: var(--surface);
        backdrop-filter: none; -webkit-backdrop-filter: none;
        overflow: visible;              /* el asa-chevron sobresale por la derecha */
        transition: transform .28s ease;
    }
    /* Plegado: el panel sale por la izquierda pero el asa-chevron queda asomando en el borde */
    html:not([data-kiosco="1"]) .cajon[data-panel="collapsed"] { transform: translateX(calc(-100% - 17px)); }
    html:not([data-kiosco="1"]) .cajon-head { border-radius: var(--r-2xl) var(--r-2xl) 0 0; }
    html:not([data-kiosco="1"]) .cajon-body { border-radius: 0 0 var(--r-2xl) var(--r-2xl); overflow-y: auto; }

    /* Asa-chevron de colapso pegada al borde derecho del panel */
    .cajon-collapse {
        position: absolute; right: -30px; top: 50%; transform: translateY(-50%);
        width: 30px; height: 64px;
        border: 1px solid var(--border); border-left: 0;
        border-radius: 0 12px 12px 0; cursor: pointer;
        display: grid; place-items: center;
        background: var(--surface); color: var(--text);
        box-shadow: var(--shadow-md);
    }
    .cajon-collapse svg { transition: transform .2s ease; }
    .cajon[data-panel="collapsed"] .cajon-collapse svg { transform: rotate(180deg); }

    .cajon.is-ready { display: flex; }

    /* El asa es afordancia de bottom-sheet: sin sentido en panel fijo */
    .cajon-handle { display: none; }

    /* En panel fijo el contenido va SIEMPRE visible aunque quede data-state="peek" */
    .cajon[data-state="peek"] .cajon-featured,
    .cajon[data-state="peek"] .cajon-body { visibility: visible; }

    /* Overlays flotantes: abajo-derecha del mapa (ya no hay peek que esquivar) */
    .floating-overlays { bottom: var(--s-5); }

    /* Ritmo y tipografía mayores para lectura a distancia en 65" */
    .cajon-head { padding: var(--s-5) var(--s-6) var(--s-3); }
    .cajon-title { font-size: var(--type-h2); }
    .cajon-subtitle { font-size: var(--type-small); }
    .cajon-search { margin: 0 var(--s-6) var(--s-4); }
    .cajon-search-input { height: 52px; }
    .cajon-featured { margin: 0 var(--s-6) var(--s-4); width: calc(100% - var(--s-6) * 2); }
    .cajon-body { padding: 0 var(--s-5) var(--s-8); }
    .cajon-vbtn { width: 46px; height: 40px; }
}

/* ── Handle (asa) ── */
.cajon-handle {
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 100%; height: 26px;
    padding: 0; border: none; background: transparent;
    cursor: grab; touch-action: none;
}
.cajon-handle:active { cursor: grabbing; }
.cajon-grabber {
    display: block; width: 44px; height: 5px; border-radius: var(--r-full);
    background: var(--border-strong);
    transition: background .2s, width .2s var(--e-spring);
}
.cajon-handle:hover .cajon-grabber { background: var(--text-faint); width: 56px; }
.cajon-handle:focus-visible { outline: none; }
.cajon-handle:focus-visible .cajon-grabber { background: var(--aurora-1); box-shadow: 0 0 0 3px rgba(130,170,100,.35); }

/* ── Cabecera (título + toggle vista) ── */
.cajon-head {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
    padding: 0 var(--s-5) var(--s-2);
}
.cajon-titles { min-width: 0; }
.cajon-title { margin: 0; font-size: var(--type-h3); font-weight: 800; color: var(--text); line-height: 1.1; }
.cajon-subtitle { margin: 2px 0 0; font-size: var(--type-micro); color: var(--text-muted); }

.cajon-viewtoggle {
    flex: 0 0 auto;
    display: flex; gap: 2px; padding: 3px;
    background: var(--surface-muted); border-radius: var(--r-full); border: 1px solid var(--border);
}
.cajon-vbtn {
    width: 40px; height: 34px; border: none; border-radius: var(--r-full);
    background: transparent; color: var(--text-muted); cursor: pointer;
    display: grid; place-items: center; transition: background .18s, color .18s;
}
.cajon-vbtn:hover { color: var(--text); }
.cajon-vbtn.is-active { background: var(--surface); color: var(--aurora-1); box-shadow: var(--shadow-sm); }

/* ── Buscador global ── */
.cajon-search {
    flex: 0 0 auto;
    position: relative; margin: 0 var(--s-5) var(--s-3);
    display: flex; align-items: center;
}
.cajon-search-icon { position: absolute; left: 14px; color: var(--text-faint); pointer-events: none; }
.cajon-search-input {
    width: 100%; height: 46px;
    padding: 0 42px 0 42px;
    border: 1px solid var(--border); border-radius: var(--r-full);
    background: var(--surface); color: var(--text);
    font-size: var(--type-body); font-family: inherit;
    transition: border-color .18s, box-shadow .18s;
}
.cajon-search-input::placeholder { color: var(--text-faint); }
.cajon-search-input:focus { outline: none; border-color: var(--aurora-2); box-shadow: 0 0 0 3px rgba(130,170,100,.22); }
.cajon-search-clear {
    position: absolute; right: 8px; width: 30px; height: 30px;
    border: none; border-radius: 50%; background: var(--surface-muted); color: var(--text-muted);
    cursor: pointer; display: grid; place-items: center;
}
.cajon-search-clear[hidden] { display: none; }
.cajon-search-clear:hover { color: var(--text); }

/* ── Destacado Güemes (Pueblo del Año) ── */
.cajon-featured {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: var(--s-3);
    margin: 0 var(--s-5) var(--s-3);
    padding: var(--s-3) var(--s-4);
    border: 1px solid rgba(201,150,43,.4);
    border-radius: var(--r-lg);
    background: linear-gradient(120deg, rgba(201,150,43,.18), rgba(201,150,43,.06));
    color: var(--text); cursor: pointer; text-align: left; width: calc(100% - var(--s-5) * 2);
    transition: transform .2s var(--e-spring), box-shadow .2s;
}
.cajon-featured:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.cajon-featured-badge { font-size: 22px; line-height: 1; flex: 0 0 auto; }
.cajon-featured-text { flex: 1 1 auto; font-size: var(--type-small); font-weight: 600; line-height: 1.3; }
.cajon-featured-arrow { flex: 0 0 auto; color: #C9962B; }
/* Vistazo (peek, solo móvil): en 156px el destacado no cabe junto a cabecera+buscador y
   pisaba la primera categoría. Se oculta en peek y reaparece al expandir el cajón. */
.cajon[data-state="peek"] .cajon-featured { display: none; }

/* ── Cuerpo scrollable ── */
.cajon-body { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 0 var(--s-4) var(--s-6); }

/* ── Árbol (ramas expandibles) ── */
.cajon-tree { display: flex; flex-direction: column; gap: var(--s-2); }
.cajon-branch { border-radius: var(--r-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--border); }
.cajon-branch-header {
    display: flex; align-items: center; gap: var(--s-3); width: 100%;
    padding: var(--s-3) var(--s-4);
    border: none; border-left: 4px solid var(--branch-color, var(--aurora-1));
    background: transparent; color: var(--text); cursor: pointer; text-align: left;
    transition: background .15s;
}
.cajon-branch-header:hover { background: var(--surface-muted); }
.cajon-branch-emoji {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--r-sm);
    display: grid; place-items: center; font-size: 18px;
    background: color-mix(in srgb, var(--branch-color, var(--aurora-1)) 16%, transparent);
}
.cajon-branch-label { flex: 1 1 auto; font-size: var(--type-body); font-weight: 700; }
.cajon-branch-count {
    flex: 0 0 auto; min-width: 26px; height: 22px; padding: 0 8px;
    border-radius: var(--r-full); display: grid; place-items: center;
    font-size: var(--type-micro); font-weight: 700; color: #fff;
    background: var(--branch-color, var(--aurora-1));
}
.cajon-branch-chevron { flex: 0 0 auto; color: var(--text-faint); transition: transform .25s var(--e-spring); }
.cajon-branch-header[aria-expanded="true"] .cajon-branch-chevron { transform: rotate(90deg); }
.cajon-branch-body { display: none; flex-direction: column; padding: var(--s-1) var(--s-2) var(--s-2); }
.cajon-branch-body.is-open { display: flex; }

/* Fila de la cabecera + interruptor de visibilidad de capa en el mapa (ojo). El interruptor
   es botón HERMANO del header (no anidado) para no romper la delegación de clics ni la a11y. */
.cajon-branch-row { display: flex; align-items: stretch; }
.cajon-branch-row .cajon-branch-header { width: auto; flex: 1 1 auto; min-width: 0; }
.cajon-layer-toggle {
    flex: 0 0 auto; align-self: stretch; width: 48px;
    border: none; border-left: 1px solid var(--border); background: transparent;
    color: var(--branch-color, var(--aurora-1)); cursor: pointer;
    display: grid; place-items: center;
    transition: background .15s, color .15s, opacity .15s;
}
.cajon-layer-toggle:hover { background: color-mix(in srgb, var(--branch-color, var(--aurora-1)) 12%, transparent); }
.cajon-layer-toggle.is-off { color: var(--text-faint); opacity: .75; }
.cajon-layer-toggle svg { display: block; }

/* Subgrupos (negocios por categoría) */
.cajon-subbranch { display: flex; flex-direction: column; }
.cajon-subhead {
    display: flex; align-items: center; gap: var(--s-2); width: 100%;
    padding: var(--s-2) var(--s-3); margin-top: 2px;
    border: none; background: transparent; color: var(--text-muted); cursor: pointer; text-align: left;
    font-size: var(--type-small); font-weight: 700; border-radius: var(--r-sm);
}
.cajon-subhead:hover { background: var(--surface-muted); color: var(--text); }
.cajon-subhead-emoji { font-size: 14px; }
.cajon-subhead-count { margin-left: auto; font-size: var(--type-micro); color: var(--text-faint); font-weight: 700; }
.cajon-subhead-chevron { color: var(--text-faint); transition: transform .25s var(--e-spring); }
.cajon-subhead[aria-expanded="true"] .cajon-subhead-chevron { transform: rotate(90deg); }
.cajon-subbody { display: none; flex-direction: column; padding-left: var(--s-2); }
.cajon-subbody.is-open { display: flex; }

/* Hoja (ítem) */
.cajon-leaf {
    display: flex; align-items: center; gap: var(--s-3); width: 100%;
    padding: var(--s-2) var(--s-3); border: none; background: transparent;
    color: var(--text); cursor: pointer; text-align: left; border-radius: var(--r-sm);
    transition: background .15s;
}
.cajon-leaf:hover { background: var(--surface-muted); }
.cajon-leaf-dot {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center; font-size: 18px; line-height: 1; overflow: hidden;
    background: var(--leaf-color, var(--aurora-1));
    box-shadow: var(--shadow-sm), inset 0 0 0 2px rgba(255,255,255,.6);
}
.cajon-leaf-dot.has-img { background: var(--surface-muted); box-shadow: var(--shadow-sm), inset 0 0 0 2px rgba(255,255,255,.6); }
.cajon-leaf-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
/* Glifo SVG blanco (máscara) sobre el chip de color → coherente con el pin del mapa. */
.cajon-leaf-svg {
    width: 21px; height: 21px; background: #fff;
    -webkit-mask: var(--svg) no-repeat center / contain;
    mask: var(--svg) no-repeat center / contain;
}
.cajon-leaf-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cajon-leaf-name { display: block; font-size: var(--type-small); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cajon-leaf-loc { display: block; font-size: var(--type-micro); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cajon-leaf-arrow { flex: 0 0 auto; color: var(--text-faint); }

/* ── Rejilla (bento) ── */
.cajon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: var(--s-3); }
.cajon-grid[hidden] { display: none; }
.cajon-card {
    position: relative; display: flex; flex-direction: column; justify-content: flex-end;
    min-height: 132px; padding: var(--s-3);
    border: none; border-radius: var(--r-lg); overflow: hidden; cursor: pointer; text-align: left;
    color: #fff; background: var(--card-bg, var(--aurora-1)); background-size: cover; background-position: center;
    transition: transform .2s var(--e-spring), box-shadow .2s;
    isolation: isolate;
}
.cajon-card::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.72) 100%);
}
.cajon-card:hover { transform: translateY(-3px) scale(1.01); box-shadow: var(--shadow-lg); }
.cajon-card-badge {
    position: absolute; top: 8px; left: 8px;
    width: 42px; height: 42px; border-radius: var(--r-md);
    display: grid; place-items: center; font-size: 22px; line-height: 1; overflow: hidden;
    background: rgba(255,255,255,.94); box-shadow: var(--shadow-md);
    border: 2px solid var(--badge-color, transparent);
}
.cajon-card-img { width: 100%; height: 100%; object-fit: cover; }
/* Glifo SVG en color de categoría (máscara) sobre el badge blanco de la tarjeta. */
.cajon-card-svg {
    width: 26px; height: 26px; background: var(--badge-color, #334155);
    -webkit-mask: var(--svg) no-repeat center / contain;
    mask: var(--svg) no-repeat center / contain;
}
.cajon-card-cat {
    position: absolute; top: 12px; right: 8px;
    padding: 2px 8px; border-radius: var(--r-full);
    font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
    color: #fff; background: var(--card-cat-color, rgba(0,0,0,.5));
}
.cajon-card-name { display: block; font-size: var(--type-small); font-weight: 800; line-height: 1.2; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.cajon-card-loc { display: block; margin-top: 2px; font-size: var(--type-micro); opacity: .92; text-shadow: 0 1px 2px rgba(0,0,0,.5); }

/* ── Estado vacío ── */
.cajon-empty { padding: var(--s-8) var(--s-4); text-align: center; color: var(--text-muted); }
.cajon-empty-emoji { font-size: 40px; margin-bottom: var(--s-2); }

/* En peek ocultamos destacado y cuerpo (solo asa + cabecera + buscador) */
.cajon[data-state="peek"] .cajon-featured,
.cajon[data-state="peek"] .cajon-body { visibility: hidden; }

/* Fallback si el navegador no soporta color-mix */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .cajon-branch-emoji { background: var(--surface-muted); }
}

/* ── Popup de Fotos 360° / Street View ─────────────────────────────────────── */
.f360-popup-wrap .maplibregl-popup-content {
    padding: 0;
    overflow: hidden;
    border-radius: var(--r-md, 12px);
    background: var(--surface, #fff);
    box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,0.18));
}
.f360-popup-wrap .maplibregl-popup-tip { border-top-color: var(--surface, #fff); }
.f360-popup-wrap .maplibregl-popup-close-button {
    color: #fff; font-size: 18px; padding: 2px 7px; text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.f360-popup-thumb { display: block; width: 100%; height: 120px; object-fit: cover; }
.f360-popup-body { padding: 10px 12px 12px; }
.f360-popup-name {
    font-family: 'DM Sans', system-ui, sans-serif; font-weight: 600;
    font-size: 13px; color: var(--text, #1a2332); margin-bottom: 8px; line-height: 1.25;
}
.f360-popup-btn {
    display: inline-block; background: var(--bareyo, #2f7fa8); color: #fff;
    font-family: 'DM Sans', system-ui, sans-serif; font-weight: 600; font-size: 12.5px;
    text-decoration: none; padding: 7px 12px; border-radius: var(--r-sm, 8px);
    transition: filter .15s;
}
.f360-popup-btn:hover { filter: brightness(1.08); }

/* ── Tira de fotos 360 en la ficha de ruta (orden "miga de pan" a lo largo del track) ── */
.f360-strip {
    display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px;
    scrollbar-width: none;
}
.f360-strip::-webkit-scrollbar { display: none; }
.f360-thumb {
    flex-shrink: 0; width: 76px; height: 76px; padding: 0; border: 2px solid transparent;
    border-radius: var(--r-sm, 8px); overflow: hidden; cursor: pointer; background: var(--surface-muted);
    transition: transform .15s, filter .15s;
}
.f360-thumb:hover, .f360-thumb:focus-visible { transform: scale(1.05); filter: brightness(1.05); }
.f360-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Miniatura de Google caducada (403): icono neutro en vez de imagen rota. */
.f360-thumb-broken img { display: none; }
.f360-thumb-broken::after {
    content: '📸'; display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; font-size: 22px; opacity: .5;
}

/* ═══════════════════════════════════════════════════════════════════════
   MODO KIOSCO (?kiosco=1 · js/kiosco.js) — pantalla táctil 75" landscape.
   TODO gateado por html[data-kiosco="1"]: cero efecto en móvil/desktop.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Restricciones táctiles: sin selección, sin callout de long-press, sin
      overscroll ni doble-tap zoom de página. El canvas del mapa define su
      propio touch-action → los gestos del mapa NO se ven afectados. ── */
html[data-kiosco="1"],
html[data-kiosco="1"] body {
    overscroll-behavior: none;
    touch-action: manipulation;
}
html[data-kiosco="1"] body {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    font-size: 21px;
}
html[data-kiosco="1"],
html[data-kiosco="1"] * { cursor: none !important; }

/* ── Ocultar lo que no aplica en un tótem fijo: instalar PWA, "mi ubicación",
      skip-link de teclado y todo enlace que saque de la app ── */
html[data-kiosco="1"] #btnInstallPWA,
html[data-kiosco="1"] #btnLang, /* en kiosco manda la barra de banderas ES/EN/FR (kioscoLangBar); el menú del rail duplicaría */
html[data-kiosco="1"] button[onclick="locateUser()"],
html[data-kiosco="1"] .skip-link,
html[data-kiosco="1"] .event-modal-original,
html[data-kiosco="1"] .f360-viewer-fallback,
html[data-kiosco="1"] .beach-flag-cam,
html[data-kiosco="1"] .wiki-link { display: none !important; }
/* Datos de contacto del negocio: visibles como información, pero inertes */
html[data-kiosco="1"] #detailContact a { pointer-events: none; }

/* ── Targets táctiles ≥72px y tipografía amplia ── */
html[data-kiosco="1"] .map-tool { width: 72px; height: 72px; border-radius: 20px; }
html[data-kiosco="1"] .map-tool-icon { width: 32px; height: 32px; }
html[data-kiosco="1"] .floating-pill { min-height: 72px; padding: 14px 26px; font-size: 20px; }
html[data-kiosco="1"] .floating-pill-icon { font-size: 26px; }
html[data-kiosco="1"] .lang-menu { min-width: 240px; }
html[data-kiosco="1"] .basemap-menu { min-width: 260px; }
html[data-kiosco="1"] .basemap-option { min-height: 64px; font-size: 20px; }
html[data-kiosco="1"] .basemap-swatch { width: 32px; height: 32px; }
html[data-kiosco="1"] .lang-row { min-height: 64px; font-size: 20px; }
html[data-kiosco="1"] .lang-row-flag { width: 36px; height: 20px; }
html[data-kiosco="1"] .floating-pill-count { font-size: 16px; padding: 3px 12px; }
html[data-kiosco="1"] .toast { font-size: 20px; }

/* Cajón (panel izquierdo en ≥1024px): algo más ancho y con filas más grandes */
@media (min-width: 1024px) {
    html[data-kiosco="1"] { --cajon-panel-w: clamp(380px, 23vw, 540px); }
}
html[data-kiosco="1"] .cajon-title { font-size: 30px; }
html[data-kiosco="1"] .cajon-subtitle { font-size: 17px; }
html[data-kiosco="1"] .cajon-search-input { font-size: 20px; min-height: 64px; }
html[data-kiosco="1"] .cajon-vbtn { width: 60px; height: 60px; }
html[data-kiosco="1"] .cajon-branch-header { min-height: 72px; }
html[data-kiosco="1"] .cajon-branch-label { font-size: 21px; }
html[data-kiosco="1"] .cajon-branch-emoji { font-size: 28px; }
html[data-kiosco="1"] .cajon-branch-count { font-size: 16px; }
html[data-kiosco="1"] .cajon-layer-toggle { min-width: 60px; min-height: 60px; }
html[data-kiosco="1"] .cajon-leaf { min-height: 64px; }
html[data-kiosco="1"] .cajon-leaf-name { font-size: 19px; }
html[data-kiosco="1"] .cajon-leaf-loc { font-size: 15px; }
html[data-kiosco="1"] .cajon-card-name { font-size: 19px; }
html[data-kiosco="1"] .cajon-featured { min-height: 64px; font-size: 17px; }

/* ── Ficha de detalle: de modal centrado a PANEL LATERAL DERECHO fijo.
      El overlay deja pasar los toques (pointer-events:none) → el mapa sigue
      vivo mientras la ficha está abierta; solo el panel captura. ── */
html[data-kiosco="1"] .detail-overlay {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    justify-content: flex-end;
    align-items: stretch;
    pointer-events: none;
}
html[data-kiosco="1"] .detail-card {
    pointer-events: auto;
    width: clamp(420px, 26vw, 620px);
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    align-self: stretch;
    border-radius: 0;
    border: none;
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-xl);
    animation: kioscoFichaIn 0.32s ease;
}
@keyframes kioscoFichaIn {
    from { transform: translateX(64px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}
html[data-kiosco="1"] .detail-close { width: 72px; height: 72px; }
html[data-kiosco="1"] .detail-close svg { width: 26px; height: 26px; }
html[data-kiosco="1"] .detail-description { font-size: 20px; line-height: 1.55; }
html[data-kiosco="1"] .detail-section-title { font-size: 18px; }
html[data-kiosco="1"] .detail-wiki { font-size: 18px; }
html[data-kiosco="1"] .action-btn { min-height: 72px; font-size: 20px; }

/* QR "llévatelo en tu móvil" dentro de la ficha */
.kiosco-qr-box { display: flex; align-items: center; gap: 18px; }
.kiosco-qr-box img {
    width: 156px; height: 156px; flex-shrink: 0;
    border-radius: var(--r-md, 12px); border: 1px solid var(--border);
    background: #fff; padding: 8px;
    image-rendering: pixelated; /* módulos del QR nítidos al escalar */
}
.kiosco-qr-box p { margin: 0; color: var(--text-muted); font-size: 17px; line-height: 1.5; }

/* ── Overlay de atracción (90 s de inactividad) ── */
#kioscoAttract {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    background: #223819;
    opacity: 0;
    transition: opacity 0.45s ease;
}
#kioscoAttract.is-on { opacity: 1; }
#kioscoAttract[hidden] { display: none; }
.kiosco-attract-bg {
    position: absolute; inset: -5%;
    background: center/cover no-repeat;
    opacity: 0;
    transition: opacity 1.2s ease;
    /* La foto es ambiente, no contenido: desenfocada y atenuada para que el
       texto/tiles del atractor no compitan con lo que haya en la imagen */
    filter: blur(7px) brightness(0.75);
}
.kiosco-attract-bg.is-visible {
    opacity: 1;
    animation: kioscoKenBurns 18s ease-in-out infinite alternate;
}
@keyframes kioscoKenBurns {
    from { transform: scale(1); }
    to   { transform: scale(1.08) translate(1.5%, -1.5%); }
}
.kiosco-attract-veil {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(34,56,25,0.50) 0%, rgba(34,56,25,0.22) 45%, rgba(7,26,14,0.85) 100%);
}
.kiosco-attract-content { position: relative; text-align: center; color: #fff; padding: 40px; }
.kiosco-attract-logo {
    display: block; width: clamp(120px, 15vh, 210px); height: auto;
    margin: 0 auto 30px; border-radius: 24px; background: #fff; padding: 12px;
}
.kiosco-attract-title {
    font-size: clamp(52px, 7vw, 116px); font-weight: 800; line-height: 1.05;
    text-shadow: 0 4px 30px rgba(0,0,0,0.35);
}
.kiosco-attract-title span { color: var(--bareyo-glow, #ADD19E); }
.kiosco-attract-cta {
    margin-top: 46px;
    display: inline-flex; align-items: center; gap: 18px;
    font-size: clamp(26px, 2.6vw, 42px); font-weight: 700;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.28);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 999px; padding: 24px 48px;
    animation: kioscoPulse 2.4s ease-in-out infinite;
}
.kiosco-attract-hand { font-size: 1.2em; }
@keyframes kioscoPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}

/* ── Kiosco: menú de CTAs del atractor (tiles por rama, patrón Mobbin
      Entale/Byte: color de marca + emoji grande + etiqueta + contador) ── */
.kiosco-attract-menu {
    margin-top: 48px;
    display: grid;
    grid-template-columns: repeat(4, minmax(210px, 280px));
    gap: 18px;
    justify-content: center;
}
.kiosco-attract-tile {
    display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
    min-height: 128px;
    padding: 20px 22px;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 22px;
    background-color: var(--tile-color, #416930);
    background-image: linear-gradient(160deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 40%, rgba(0,0,0,0.24) 100%);
    color: #fff;
    font-family: 'DM Sans', system-ui, sans-serif;
    text-align: left;
    box-shadow: 0 10px 30px rgba(0,0,0,0.28);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.kiosco-attract-tile:active { transform: scale(0.96); }
.kiosco-attract-tile-emoji { font-size: 40px; line-height: 1; }
.kiosco-attract-tile-label {
    display: flex; align-items: center; gap: 10px;
    font-size: 23px; font-weight: 700; line-height: 1.1;
    text-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.kiosco-attract-tile-count {
    flex: 0 0 auto;
    min-width: 34px; padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.24);
    font-size: 17px; font-weight: 800;
}

/* Kiosco: las ramas del cajón heredan el color de marca (barra lateral + badge
   mayor) para que las "soluciones" del municipio destaquen también en el menú */
html[data-kiosco="1"] .cajon-branch { border-left: 6px solid var(--branch-color, var(--border)); }
html[data-kiosco="1"] .cajon-branch-count { height: 30px; min-width: 34px; padding: 0 10px; }

/* ── Iconos a medida de las ramas (BRANCH_ICONS): chip redondeado con el color
      de la rama en el cajón; en los tiles del atractor, icono blanco grande ── */
.cajon-branch-ic {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: var(--branch-color, var(--bareyo));
    color: #fff;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--branch-color, #416930) 35%, transparent);
}
.cajon-branch-ic svg { width: 21px; height: 21px; }
html[data-kiosco="1"] .cajon-branch-ic { width: 48px; height: 48px; border-radius: 14px; }
html[data-kiosco="1"] .cajon-branch-ic svg { width: 26px; height: 26px; }

.kiosco-attract-tile-ic { color: #fff; opacity: 0.95; }
.kiosco-attract-tile-ic svg { width: 44px; height: 44px; }

/* ── Kiosco: selector de idioma con banderas (arriba-centro del mapa) ── */
#kioscoLangBar {
    position: fixed;
    top: 14px; left: 50%;
    transform: translateX(-50%);
    z-index: 40; /* sobre mapa/overlays (10-30), bajo la ficha (50) y el atractor (200) */
    display: flex; gap: 10px;
    padding: 8px;
    border-radius: 999px;
    background: var(--surface-glass);
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
}
.kiosco-lang-btn {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 60px; padding: 8px 22px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    font-family: 'DM Sans', system-ui, sans-serif;
    font-weight: 800; font-size: 19px;
    transition: background 0.2s, color 0.2s;
}
.kiosco-lang-btn svg { width: 34px; height: 23px; border-radius: 4px; box-shadow: 0 0 0 1px rgba(0,0,0,0.12); }
.kiosco-lang-btn.is-active { background: var(--bareyo, #416930); color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════
   BOTTOM-NAV MÓVIL (v1, 2026-07-22) — 5 selectores estilo app nativa.
   Solo en móvil (<1024px) y con la app arrancada (body.has-bottomnav).
   El cajón y los overlays flotantes suben para dejarle sitio.
   ═══════════════════════════════════════════════════════════════════════ */
.bottom-nav { display: none; }
@media (max-width: 1023.98px) {
    body.has-bottomnav .bottom-nav {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 31; /* sobre el cajón (30), bajo ficha (50) y agenda (60) */
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        background: var(--surface-glass);
        backdrop-filter: var(--blur-md);
        -webkit-backdrop-filter: var(--blur-md);
        border-top: 1px solid var(--border);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    }
    .bottom-nav-tab {
        display: flex; flex-direction: column; align-items: center; gap: 3px;
        padding: 6px 2px;
        border: 0; background: transparent;
        color: var(--text-muted);
        font: 600 10.5px/1 'DM Sans', system-ui, sans-serif;
        border-radius: 10px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    .bottom-nav-ic { width: 24px; height: 24px; display: grid; place-items: center; transition: transform .18s var(--e-spring, ease); }
    .bottom-nav-ic svg { width: 22px; height: 22px; display: block; }
    /* Acento único (patrón Komoot): el tab activo siempre en verde --bareyo */
    .bottom-nav-tab.is-active { color: var(--bareyo); }
    .bottom-nav-tab.is-active .bottom-nav-ic { transform: scale(1.12) translateY(-1px); }
    .bottom-nav-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* Layout: el cajón se apoya sobre la barra; los flotantes suben en consecuencia */
    body.has-bottomnav .cajon { bottom: calc(56px + env(safe-area-inset-bottom)); }
    body.has-bottomnav .floating-overlays { bottom: calc(216px + env(safe-area-inset-bottom)); }
}
html[data-kiosco="1"] .bottom-nav { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   CHIPS DE CATEGORÍAS (patrón Komoot) — rediseño nav 2026-07-23
   Check = capa visible (sustituye al ojo) · label = abre la categoría.
   Solo escritorio: en móvil los cubre el bottom-nav; en kiosco no existen.
   ═══════════════════════════════════════════════════════════════════════ */
.nav-chips {
    position: fixed; z-index: 32;
    top: 12px; left: 16px;
    display: flex; gap: 8px; align-items: center;
    max-width: calc(100vw - 140px);
    overflow-x: auto; padding: 4px;
    scrollbar-width: none;
}
.nav-chips::-webkit-scrollbar { display: none; }
/* Chip = UN botón (selección exclusiva): activo = solo esa categoría en el mapa */
.nav-chip {
    display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
    border-radius: 999px; padding: 9px 15px;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    white-space: nowrap; cursor: pointer;
    font: inherit; font-weight: 600; font-size: 14px;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.nav-chip-ic { display: grid; place-items: center; color: var(--chip-color); }
.nav-chip-ic svg { width: 17px; height: 17px; display: block; }
.nav-chip-count { font-size: 11.5px; font-weight: 700; opacity: .55; }
.nav-chip.is-active { background: var(--chip-color); border-color: var(--chip-color); color: #fff; }
.nav-chip.is-active .nav-chip-ic { color: #fff; }
.nav-chip.is-active .nav-chip-count { opacity: .8; }
.nav-chip:hover:not(.is-active) { border-color: var(--chip-color); }
.nav-chip:focus-visible { outline: 2px solid var(--chip-color); outline-offset: 2px; }
@media (max-width: 1023px) { .nav-chips { display: none; } }
html[data-kiosco="1"] .nav-chips { display: none; }

/* Asa de colapso del panel: solo existe en web escritorio */
@media (max-width: 1023px) { .cajon-collapse { display: none; } }
html[data-kiosco="1"] .cajon-collapse { display: none; }

/* El asa/grabber de bottom-sheet no existe en escritorio (la regla base .cajon-handle
   va después de la media query del panel y ganaba por orden — de ahí este refuerzo). */
@media (min-width: 1024px) { .cajon-handle { display: none; } }

/* Botón "Mapa ▾" del sheet (solo móvil): plegar/desplegar sin depender del gesto de arrastre */
.cajon-hide-btn {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 8px 13px;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface); color: var(--text);
    font: inherit; font-size: 13px; font-weight: 700;
    cursor: pointer; box-shadow: var(--shadow-sm);
}
.cajon-hide-chevron { transition: transform .2s ease; }
.cajon-hide-btn.is-peek .cajon-hide-chevron { transform: rotate(180deg); }
@media (min-width: 1024px) { .cajon-hide-btn { display: none; } }
html[data-kiosco="1"] .cajon-hide-btn { display: none; }

/* ── Flotantes (tiempo, servicios, cifras, agenda, 360) con el sheet abierto ──
   Se recolocan como FILA horizontal justo sobre el borde del sheet (altura real
   vía --cajon-sheet-h) → visibles en cualquier tamaño de pantalla; a pantalla
   completa del sheet se ocultan (no hay mapa que consultar). */
@media (max-width: 1023px) {
    body.has-bottomnav.sheet-open .floating-overlays {
        left: 8px; right: 8px;
        bottom: calc(var(--cajon-sheet-h, 156px) + 66px + env(safe-area-inset-bottom, 0px) + var(--dock-lift, 0px));
        flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 6px;
        overflow-x: auto; scrollbar-width: none;
        transition: bottom .25s ease;
    }
    body.has-bottomnav.sheet-open .floating-overlays::-webkit-scrollbar { display: none; }
    body.has-bottomnav.sheet-open .floating-overlays > * { flex: 0 0 auto; }
    body.has-bottomnav.sheet-full .floating-overlays { display: none; }
}

/* ── Chips de sector (panel Negocios): multi-selección que filtra lista + pins ── */
.biz-sector-chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 4px 2px 10px;
}
.biz-sector-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 11px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600;
    cursor: pointer; opacity: .6;
    transition: background .15s ease, color .15s ease, opacity .15s ease, border-color .15s ease;
}
.biz-sector-chip.is-on { opacity: 1; background: var(--chip-color, var(--bareyo)); border-color: var(--chip-color, var(--bareyo)); color: #fff; }
.biz-sector-chip.is-on .biz-sector-count { color: rgba(255,255,255,.85); }
.biz-sector-count { font-size: 11px; font-weight: 700; opacity: .75; }
.biz-sector-all.is-on { background: var(--text); border-color: var(--text); color: var(--surface); }
.biz-sector-chip:focus-visible { outline: 2px solid var(--bareyo); outline-offset: 2px; }
html[data-kiosco="1"] .biz-sector-chip { font-size: 16px; padding: 10px 16px; }

/* ── Horarios en ficha (misas/visitas/exposiciones) + agenda de actos + transporte + teléfonos ── */
.detail-schedule { background: var(--surface-muted, rgba(34,56,25,0.04)); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; margin: 12px 0 4px; }
.detail-sched-row { margin: 6px 0; font-size: 13.5px; line-height: 1.45; }
.detail-sched-note { margin: 8px 0 2px; font-size: 11.5px; color: var(--text-faint, #94a3b8); }
.events-acts-head { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint, #64748b); margin: 10px 4px 6px; }
.event-item--act .event-cat { border-radius: 999px; padding: 2px 8px; font-weight: 700; }
.act-map-btn { border: 1px solid var(--border); background: var(--bareyo); color: #fff; font: inherit; font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: 999px; cursor: pointer; }

/* Panel Transporte */
.trans-dirs { display: flex; gap: 6px; margin: 8px 0; }
.trans-dir-btn { flex: 1; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 700; padding: 7px 10px; border-radius: 999px; cursor: pointer; opacity: .65; }
.trans-dir-btn.is-on { background: var(--bareyo); border-color: var(--bareyo); color: #fff; opacity: 1; }
.trans-stop-label { display: block; font-size: 11.5px; font-weight: 700; color: var(--text-faint, #64748b); margin: 8px 0 4px; }
.trans-stop-select { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13px; background: var(--surface); color: var(--text); }
.trans-next-title { font-size: 11.5px; font-weight: 700; color: var(--text-faint, #64748b); margin: 10px 0 4px; }
.trans-times { display: flex; flex-wrap: wrap; gap: 6px; }
.trans-time { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.trans-time.is-past { opacity: .35; text-decoration: line-through; font-weight: 500; }
.trans-time.is-next { background: var(--bareyo); border-color: var(--bareyo); color: #fff; }
.trans-nomore { font-size: 12.5px; color: var(--text-faint, #94a3b8); }
.trans-pal-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.trans-pal-head { font-size: 11.5px; font-weight: 800; margin-bottom: 4px; }
.trans-days { font-size: 11px; color: var(--text-faint, #94a3b8); }

/* Teléfonos de interés (panel Servicios) */
.phone-link { font-weight: 700; color: var(--bareyo); text-decoration: none; white-space: nowrap; }
.phone-extra { font-size: 11px; color: var(--text-faint, #94a3b8); margin: 0 0 6px; line-height: 1.4; }

/* ═══════════════════════════════════════════════════════════════════════
   MAPA v3 (2026-08-28) — marca junto a los chips · rail de controles en
   tres bloques · dock único de "información útil" (antes seis pastillas
   apiladas). Patrón portado de Descubre Llanes 2026. Va al FINAL del
   fichero a propósito: pisa por orden las reglas de flotantes anteriores.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Barra superior izquierda: marca + chips (solo escritorio web) ── */
.map-topbar {
    position: fixed; z-index: 32;
    top: 12px; left: 16px;
    display: flex; align-items: center; gap: 10px;
    max-width: calc(100vw - 120px);
}
.map-topbar .nav-chips { position: static; max-width: none; min-width: 0; }
.map-brand {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 9px;
    height: 42px; padding: 0 14px 0 6px;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface); color: var(--text);
    box-shadow: var(--shadow-md); cursor: pointer; font: inherit;
    transition: border-color .18s ease, transform .18s ease;
}
.map-brand:hover { border-color: var(--bareyo-accent); transform: translateY(-1px); }
.map-brand img { height: 30px; width: auto; border-radius: 8px; display: block; }
.map-brand-name { font: 600 14px/1 'Signika', system-ui, sans-serif; letter-spacing: -0.01em; white-space: nowrap; }
.map-brand-name b { font-weight: 800; color: var(--bareyo); }
@media (min-width: 1024px) and (max-width: 1279px) {
    /* Antes ocultaba el nombre y dejaba el botón como icono suelto sin texto (feedback
       cliente 2026-08-28: "mejor que aparezca el texto"). Se reduce en vez de ocultar. */
    .map-brand-name { font-size: 12.5px; }
    .map-brand { padding-right: 10px; }
}
@media (max-width: 1023px) { .map-topbar { display: none; } }
html[data-kiosco="1"] .map-topbar { display: none; }

/* ── Rail de controles en bloques: capas · encuadre · idioma/más ── */
.map-tool-group { display: flex; flex-direction: column; gap: 4px; }
.map-tool-group + .map-tool-group { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--border); }

/* Rail solo-icono (feedback cliente 2026-08-28: "mejor que aparezca el texto"): las 4
   capas (satélite/cumbres/AR/relieve) llevan una etiqueta corta siempre visible, no solo
   en el title al pasar el ratón. El resto del rail (ubicación/encuadre/norte/idioma/···)
   son iconos ya estándar en cualquier mapa y se quedan solo-icono con tooltip. */
.map-tool:has(.map-tool-label) { width: auto; display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 0 14px 0 11px; }
.map-tool-label { font: 700 12px/1 'DM Sans', system-ui, sans-serif; white-space: nowrap; }
html[data-kiosco="1"] .map-tool:has(.map-tool-label) { padding: 0 18px 0 14px; }
html[data-kiosco="1"] .map-tool-label { font-size: 15px; }

/* ── Iconos SVG dentro de las pastillas (sustituyen a los emojis) ── */
.floating-pill-icon svg { width: 18px; height: 18px; display: block; }
html[data-kiosco="1"] .floating-pill-icon svg { width: 26px; height: 26px; }

/* ── Dock de info útil — escritorio y kiosco (≥1024px): barra de cristal única ── */
@media (min-width: 1024px) {
    .floating-overlays {
        flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center;
        gap: 4px; padding: 5px;
        right: 16px; bottom: 16px;
        max-width: calc(100vw - var(--cajon-panel-w, 400px) - 64px);
        background: var(--surface-glass);
        backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md);
        border: 1px solid var(--border); border-radius: 999px;
        box-shadow: var(--shadow-lg);
        pointer-events: auto;
    }
    .floating-overlays .floating-pill {
        background: transparent; border-color: transparent; box-shadow: none;
        min-height: 38px; padding: 7px 13px;
    }
    .floating-overlays .floating-pill:hover { background: var(--surface-muted); transform: none; box-shadow: none; }
    .floating-overlays .floating-pill.active { background: var(--bareyo); color: #fff; }
    .floating-overlays .floating-pill-accent { background: linear-gradient(135deg, #0e7490, #0ea5e9); color: #fff; box-shadow: none; }
    .floating-overlays .floating-pill-accent:hover { background: linear-gradient(135deg, #0e7490, #0ea5e9); filter: brightness(1.07); }
    .floating-overlays .floating-pill-accent.active { background: linear-gradient(135deg, #075985, #0369a1); }
    /* El panel abre ENCIMA del dock, alineado a la derecha de su pastilla */
    .floating-expand-panel {
        bottom: calc(100% + 14px); right: 0; left: auto; top: auto;
        transform: translateY(8px);
    }
    .floating-expand-panel.active { transform: translateY(0); }
    html[data-kiosco="1"] .floating-overlays { gap: 6px; padding: 8px; border-radius: 28px; }
    html[data-kiosco="1"] .floating-overlays .floating-pill { min-height: 72px; padding: 14px 26px; }
}
/* Escritorio estrecho (1024–1279px): el dock compite con el panel izquierdo → las pastillas
   de sección pasan a icono; el dato (tiempo/mar) y Fotos 360 conservan su etiqueta. */
@media (min-width: 1024px) and (max-width: 1279px) {
    html:not([data-kiosco="1"]) .floating-overlays .floating-pill:not(.floating-pill-accent):not(#btnConditionsFloat) .floating-pill-label { display: none; }
    html:not([data-kiosco="1"]) .floating-overlays .floating-pill:not(.floating-pill-accent):not(#btnConditionsFloat) { padding: 7px 10px; }
}

/* iPad: la tira de píldoras (y los paneles que abre) sube un poco más sobre la hoja inferior; en iPad apaisado (≥1024 px, táctil) el
   dock de escritorio sube también, para que no quede pegado a la barra de inicio. */
@media (min-width: 700px) and (max-width: 1023.98px) { :root { --dock-lift: 16px; } }
@media (min-width: 1024px) and (max-width: 1366px) and (pointer: coarse) {
    html:not([data-kiosco="1"]) .floating-overlays { bottom: max(28px, calc(env(safe-area-inset-bottom, 0px) + 18px)); }
}

/* ── Móvil/tablet (<1024px): tira horizontal deslizable sobre el borde del sheet,
      SIEMPRE (antes: columna de botones redondos a la derecha con el sheet plegado y
      fila solo con el sheet abierto). Los paneles salen FIJOS sobre la tira: escapan
      del overflow-x del carril. ── */
@media (max-width: 1023px) {
    body.has-bottomnav .floating-overlays {
        left: 8px; right: 72px; /* deja libre la columna del rail de controles (54px + márgenes) */
        bottom: calc(var(--cajon-sheet-h, 156px) + 66px + env(safe-area-inset-bottom, 0px) + var(--dock-lift, 0px));
        flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 6px;
        overflow-x: auto; scrollbar-width: none; padding: 2px 2px 6px;
        transition: bottom .25s ease;
        -webkit-overflow-scrolling: touch;
    }
    body.has-bottomnav .floating-overlays::-webkit-scrollbar { display: none; }
    body.has-bottomnav .floating-overlays > * { flex: 0 0 auto; }
    body.has-bottomnav .floating-pill { padding: 8px 13px; min-height: 40px; min-width: 0; font-size: 12.5px; }
    body.has-bottomnav .floating-pill .floating-pill-label { display: inline; }
    body.has-bottomnav .floating-expand-panel {
        position: fixed; left: 8px; right: 72px; top: auto;
        bottom: calc(var(--cajon-sheet-h, 156px) + 118px + env(safe-area-inset-bottom, 0px) + var(--dock-lift, 0px));
        min-width: 0; max-width: none; width: auto;
        /* nunca por encima del borde superior: lo que queda entre la tira y el techo */
        max-height: min(62vh, calc(100vh - var(--cajon-sheet-h, 156px) - 140px));
        transform: translateY(8px);
    }
    body.has-bottomnav .floating-expand-panel.active { transform: translateY(0); }
    body.has-bottomnav #eventsFloatPanel.floating-expand-panel { width: auto; }
    body.has-bottomnav.sheet-full .floating-overlays { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ICONOS 2D DE TRAZO (js/iconos.js, v3 2026-08-28) — sustituyen a los emojis.
   .ico hereda color y tamaño del texto; los contenedores fijan tamaños exactos.
   ═══════════════════════════════════════════════════════════════════════ */
.ico { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -0.22em; flex: none; }
.cajon-leaf-dot .ico, .cajon-card-badge .ico { width: 18px; height: 18px; vertical-align: middle; }
.cajon-subhead-emoji .ico { width: 16px; height: 16px; }
.biz-sector-chip .ico { width: 14px; height: 14px; vertical-align: -0.15em; }
.weather-row .ico, .event-date .ico, .event-summary .ico, .events-acts-head .ico, .services-section-title .ico,
.marine-flags-title .ico, .weather-sun-row .ico, .icv-area-label .ico, .icv-pilot-badge .ico, .events-head .ico,
.events-featured .ico, .detail-sched-row .ico, .detail-history-title .ico, .weather-day-rain .ico, .float-empty .ico,
.beach-flag-cam .ico, .marine-flags-cam .ico, .act-map-btn .ico, .route-hud-route .ico, .route-hud-stop .ico, .wiki-loading .ico {
    width: 15px; height: 15px; margin-right: 3px; vertical-align: -0.2em; opacity: .85;
}
.weather-row > span:first-child { display: inline-flex; align-items: center; gap: 2px; }
.panel-hero-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface-muted); color: var(--bareyo); flex: none; }
.panel-hero-ico .ico { width: 26px; height: 26px; }
.weather-day-icon .ico { width: 22px; height: 22px; }
.dst-ico { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 6px; border-radius: 7px; background: var(--bareyo-pale, #EBF3E8); color: var(--bareyo); vertical-align: -0.35em; }
.dst-ico .ico { width: 14px; height: 14px; }
.hero-sector-badge .ico, .detail-sector-badge .ico { width: 14px; height: 14px; margin-right: 4px; vertical-align: -0.2em; }
.tutorial-icon .ico { width: 48px; height: 48px; color: var(--bareyo); }
.tide-icon .ico { width: 16px; height: 16px; }
.kiosco-attract-hand .ico { width: 1em; height: 1em; }
.cajon-leaf-dot .ico { color: #fff; }                                   /* chip de color → glifo blanco */
.cajon-card-badge .ico { color: var(--badge-color, var(--bareyo)); }    /* badge blanco → glifo del color */
html[data-kiosco="1"] .weather-row .ico, html[data-kiosco="1"] .services-section-title .ico { width: 20px; height: 20px; }
html[data-kiosco="1"] .dst-ico { width: 28px; height: 28px; }
html[data-kiosco="1"] .dst-ico .ico { width: 18px; height: 18px; }

/* ═══════════════════════════════════════════════════════════════════════
   PORTADA v3.1 (2026-08-28) — hero con fotografía, portadas en las tarjetas,
   horizonte real desde el Faro de Ajo. Imágenes en assets/landing/ (renders
   ilustrativos hasta que el cliente entregue fotos reales).
   ═══════════════════════════════════════════════════════════════════════ */
.landing-hero.has-photo {
    background:
        linear-gradient(180deg, rgba(10,36,22,0.55) 0%, rgba(10,36,22,0.35) 45%, rgba(34,56,25,0.82) 100%),
        url('assets/landing/hero.webp') center / cover no-repeat;
    min-height: min(84svh, 820px);
}
.landing-hero.has-photo::before, .landing-hero.has-photo::after { display: none; }
@media (max-width: 640px) {
    .landing-hero.has-photo {
        background-image:
            linear-gradient(180deg, rgba(10,36,22,0.55) 0%, rgba(10,36,22,0.30) 40%, rgba(34,56,25,0.85) 100%),
            url('assets/landing/hero-mobile.webp');
    }
}
.landing-hero.has-photo .landing-title { text-shadow: 0 6px 30px rgba(0,0,0,0.45); }
.landing-hero.has-photo .landing-subtitle { color: rgba(255,255,255,0.92); text-shadow: 0 2px 12px rgba(0,0,0,0.4); }
.lm-cover.has-photo { background: var(--cover) center / cover no-repeat, linear-gradient(135deg, var(--lm-a, #416930), var(--lm-b, #4B7E38)); }
.lm-cover.has-photo::after { background-image: none; background: linear-gradient(180deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.45) 100%); opacity: 1; }
.lm-cover.has-photo .lm-icon { width: 40px; height: 40px; position: absolute; left: 12px; bottom: 10px; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5)); }
.lm-tag { position: absolute; top: 10px; right: 10px; z-index: 1; padding: 4px 9px; border-radius: 999px; background: #FFCC00; color: #1A1A1A; font: 800 10.5px/1 'DM Sans', system-ui, sans-serif; letter-spacing: .06em; }
.landing-mode:hover .lm-cover.has-photo { filter: saturate(1.08); }
/* Panel «Condiciones ahora»: enlace a la previsión completa (el-tiempo.html) */
.weather-more-link { display: inline-block; margin-top: 8px; font: 700 12.5px/1.3 'DM Sans', system-ui, sans-serif; color: var(--bareyo, #416930); text-decoration: none; }
.weather-more-link:hover { text-decoration: underline; }
.weather-more-link:focus-visible { outline: 3px solid #226EA3; outline-offset: 2px; border-radius: 4px; }
/* Ocho tarjetas (con ODA y El tiempo): 4×2 en escritorio, 2 columnas limpias en tableta y móvil (antes eran seis, 3×2) */
@media (min-width: 641px) { .modes-grid { grid-template-columns: repeat(2, 1fr); } }   /* desde 641: entre 672 y 759 salían 3 + 3 + 2 */
@media (min-width: 1000px) { .modes-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .lm-cover { height: 150px; } }
@media (max-width: 640px) { .landing-mode[data-mode="agenda"] { grid-column: auto; } }
.landing-img-note { font-size: 11.5px; opacity: .75; margin-top: 10px; }

/* Horizonte (SVG, js/horizonte.js) */
.landing-horizonte { max-width: 1160px; margin: 0 auto; padding: var(--s-5) var(--s-5) var(--s-7); }
.horizonte-wrap { overflow-x: auto; overflow-y: hidden; border-radius: var(--r-xl); box-shadow: var(--shadow-lg); background: #223819; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.horizonte-wrap[aria-busy="true"] { min-height: 150px; background: linear-gradient(180deg, #223819, #2E9BC0); }
.hz-svg { display: block; font-family: 'DM Sans', system-ui, sans-serif; }
.hz-rosa { fill: rgba(255,255,255,0.75); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.hz-pico { cursor: pointer; outline: none; }
.hz-vara { stroke: rgba(255,255,255,0.75); stroke-width: 1; }
.hz-punto { fill: #FFCC00; stroke: #223819; stroke-width: 1; }
.hz-rotulo { fill: #fff; font-size: 11.5px; font-weight: 600; paint-order: stroke; stroke: rgba(34,56,25,0.75); stroke-width: 3px; stroke-linejoin: round; }
.hz-rotulo .hz-ele { fill: #FFCC00; font-weight: 800; }
.hz-pico.is-dest .hz-rotulo { font-size: 13px; font-weight: 800; }
.hz-pico:hover .hz-punto, .hz-pico:focus-visible .hz-punto { r: 5; }
.hz-pico:hover .hz-rotulo, .hz-pico:focus-visible .hz-rotulo { fill: #FFCC00; }
.landing-horizon-note { text-align: center; color: var(--text-muted); font-size: 13px; margin: var(--s-3) 0 0; }
/* En el cajón: bloque compacto al abrir la rama Cumbres */
.cajon-horizonte { margin: 4px 0 10px; }
.cajon-horizonte-head { display: flex; align-items: center; gap: 6px; font: 700 12px/1.2 'DM Sans', system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin: 0 2px 6px; }
.cajon-horizonte-head .ico { width: 15px; height: 15px; color: var(--bareyo); }
.horizonte-wrap--cajon { border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.horizonte-wrap--cajon .hz-svg { height: 170px; width: auto; }
.cajon-horizonte-note { font-size: 11.5px; color: var(--text-muted); line-height: 1.4; margin: 8px 2px 0; }

/* Cumbres: rail, pastilla del popup del kit, acciones como enlace */
.map-tool-ar { text-decoration: none; }
html[data-kiosco="1"] #btn-ar { display: none !important; }
#btn-picos.on { background: var(--bareyo); color: #fff; }
.maplibregl-popup-content .pop { font-family: 'DM Sans', system-ui, sans-serif; min-width: 200px; }
.maplibregl-popup-content .pop .cat { font: 700 10px/1.2 'DM Sans', system-ui, sans-serif; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.maplibregl-popup-content .pop h3 { margin: 2px 0 4px; font: 800 15px/1.2 'Signika', system-ui, sans-serif; color: var(--text); }
.maplibregl-popup-content .pop p { margin: 4px 0; font-size: 12.5px; color: var(--text); }
.maplibregl-popup-content .pop .accs { display: flex; gap: 6px; margin-top: 8px; }
.maplibregl-popup-content .pop .accs button, .maplibregl-popup-content .pop .accs a { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 6px 11px; font: 700 11.5px/1 'DM Sans', system-ui, sans-serif; text-decoration: none; color: var(--text); cursor: pointer; }
.maplibregl-popup-content .pop .accs .primaria { background: var(--bareyo); color: #fff; border-color: var(--bareyo); }
html[data-kiosco="1"] .maplibregl-popup-content .pop .accs a[href^="ar.html"] { display: none; }
a.action-btn { text-decoration: none; }
.action-btn .ico { width: 16px; height: 16px; }