/* ============================================================
   RESPONSIVE — mobile pass (launch-ready, polish later)
   ============================================================ */
/* The Astra site header is replaced everywhere by our own chrome (floating
   account control + ATLAS topbar + footer). Hide it at ALL resolutions — it
   used to reappear as a white "wildatlasguide" bar with a hamburger at Astra's
   own mobile breakpoint (769–921px). */
#masthead,
header.site-header,
.ast-mobile-header-wrap,
#ast-mobile-header,
.ast-mobile-menu-buttons { display: none !important; }

/* Tablets + phones (incl. iPad up to 1024px): the logged-in box becomes
   wildatlasguide + hamburger, and its dropdown opens full-screen. */
@media (max-width: 1200px) {
    /* Full-bleed: the main container spans the whole screen width (matches the
       full-width hero). Astra's .ast-container gutter is what inset the content. */
    .ast-container { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; }
    .site-content .ast-container, #primary, #content { padding-left: 0 !important; padding-right: 0 !important; }


    /* Logged-in box AND the guest hamburger trigger share the same dark pill +
       "MENU" label (Marc, 2026-08-03: "puede ser igual, que ponga MENU y sea
       de color oscuro" — avatar/name/caret hidden on the logged-in one). */
    .wa-account-btn.is-logged-in,
    .wa-guest-menu-btn {
        display: inline-flex; align-items: center; gap: 9px;
        background: #1a1e24; border: 1px solid var(--wag-type-account-line, var(--wag-style-account-line)); border-radius: 9px;
        box-shadow: var(--wag-shadow-14); padding: 7px 12px; cursor: pointer;
    }
    /* MENU va sin recuadro, con y sin sesión (Marc, 2026-10-04). */
    .wa .wa-guest-menu-btn,
    .wa .wa-guest-menu-btn:hover,
    .wa .wa-guest-menu-btn:focus,
    .wa .wa-guest-menu-btn:active,
    .wa #wa-account-btn-wrap .wa-account-btn.is-logged-in,
    .wa #wa-account-btn-wrap .wa-account-btn.is-logged-in:hover,
    .wa #wa-account-btn-wrap .wa-account-btn.is-logged-in:focus,
    .wa #wa-account-btn-wrap .wa-account-btn.is-logged-in:active { background: var(--wag-type-account-bg, var(--wag-style-account-bg)); border: 0; box-shadow: var(--wag-shadow-14); padding-left: 0; padding-right: 0; transform: none; }
    .wa-account-btn.is-logged-in .wa-account-av,
    .wa-account-btn.is-logged-in .wa-account-name,
    .wa-account-btn.is-logged-in .wa-account-caret { display: none; }
    .wa-account-btn.is-logged-in .wa-account-brand,
    .wa-guest-menu-btn .wa-account-brand {
        display: inline; font-size: var(--wag-text-14); font-weight: 700; letter-spacing: .2px; color: #fff;
    }
    /* Guest: hide the desktop inline pill (Sign in + toggles), show the
       hamburger trigger instead (Marc, 2026-08-02 — no room left in the
       topbar on mobile). */
    .wa-guest-desktop-only { display: none !important; }
    .wa-account-btn.is-logged-in .wa-account-burger,
    .wa-guest-menu-btn .wa-account-burger {
        display: inline-block; position: relative; width: 20px; height: 2px;
        background: var(--wag-surface); border-radius: 2px;
    }
    .wa-account-btn.is-logged-in .wa-account-burger::before,
    .wa-account-btn.is-logged-in .wa-account-burger::after,
    .wa-guest-menu-btn .wa-account-burger::before,
    .wa-guest-menu-btn .wa-account-burger::after {
        content: ""; position: absolute; left: 0; width: 20px; height: 2px;
        background: var(--wag-surface); border-radius: 2px;
    }
    .wa-account-btn.is-logged-in .wa-account-burger::before,
    .wa-guest-menu-btn .wa-account-burger::before { top: -6px; }
    .wa-account-btn.is-logged-in .wa-account-burger::after,
    .wa-guest-menu-btn .wa-account-burger::after { top: 6px; }

    /* Dropdown becomes a full-screen panel (keeps its dark palette + items).
       #wa-guest-menu mirrors #wa-account-menu exactly — same quick-menu pattern
       for logged-out visitors. */
    #wa-account-menu,
    #wa-guest-menu {
        position: fixed !important; inset: 0 !important;
        width: 100vw !important; height: 100vh !important; height: 100dvh !important;
        min-width: 0 !important; max-width: none !important; max-height: none !important; margin: 0 !important;
        border: 0 !important; border-radius: 0 !important; box-shadow: var(--wag-shadow-15) !important;
        padding: 0 0 24px !important; overflow-y: auto !important; z-index: 100001 !important;
    }
    .wa-account-menu-bar {
        display: flex; align-items: center; justify-content: space-between;
        padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.10);
        position: sticky; top: 0; background: #1a1e24;
    }
    .wa-account-menu-brand { font-size: var(--wag-text-18); font-weight: 700; color: #fff; }
    .wa-account-menu-close { background: none; border: 0; color: #fff; font-size: 30px; line-height: 1; padding: 0 6px; cursor: pointer; padding-bottom: 4px; }
    #wa-account-menu .wa-account-menu-head { padding: 18px 20px; margin: 0; }
    #wa-account-menu a, #wa-account-menu .wa-menu-group-toggle, #wa-account-menu .wa-account-menu-logout,
    #wa-guest-menu .wa-guest-menu-signin { font-size: var(--wag-text-16); padding: 15px 20px; border-radius: var(--wag-radius-8); }
    #wa-account-menu .wa-menu-group-items a { font-size: var(--wag-text-14); padding: 12px 20px 12px 40px; }
    #wa-account-menu .wa-account-menu-lang,
    #wa-guest-menu .wa-account-menu-lang,
    #wa-guest-menu .wa-account-menu-flags { padding: 16px 20px; }
    body.wa-account-menu-open { overflow: hidden; }
}

/* Mobile nav dropdown — transparent wrapper on desktop */
.wa-mob-nav-wrap { display: contents; }
/* Nombrando también `wa-owner-tab`, que es una clase que el botón YA lleva.
   No es adorno: `body.wa-owner .wa-owner-tab` (:1136) declara
   `display: inline-flex` y pesa (0,2,1), así que un selector de dos clases
   pierde y el disparador se quedaba VISIBLE en escritorio. Con tres clases
   (0,3,0) gana, y sirve igual para wa-owner, wa-admin y wa-profile sin
   escribir una variante por cada uno.

   Antes solo se llegaba a ese estado abriendo la página estrecha y
   ensanchándola después; ahora que el menú también se construye al cambiar el
   ancho, el camino es corriente. */
.wa-mob-nav-wrap > .wa-mob-nav-btn.wa-owner-tab { display: none; }

@media (max-width: 768px) {
    /* Tab navs (profile / owner / admin): scroll instead of breaking into rows */
    .profile-tabs {
        flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
        scrollbar-width: none; justify-content: flex-start;
    }
    .profile-tabs::-webkit-scrollbar { display: none; }
    .profile-tab, body .wa-owner-tab { padding: 12px 14px; font-size: 12.5px; white-space: nowrap; }
    body.wa-profile .profile-tabs { justify-content: flex-start; }

    /* ── Owner Dashboard + Control Center: dropdown nav ──────────────────── */
    /* Wrapper: no margin, just a positioning context */
    .wa-mob-nav-wrap { display: block; position: relative; }

    /* Trigger — inherits .wa-owner-tab.is-active styles + dark background to match profile-hero */
    .wa-mob-nav-wrap > .wa-mob-nav-btn.wa-owner-tab { display: inline-flex; }
    .wa-mob-nav-btn {
        width: 100%; box-sizing: border-box;
        background: #1a1e24 !important; border: none !important;
        border-bottom: 1px solid rgba(255,255,255,.08) !important;
        cursor: pointer; text-align: left;
    }
    .wa-mob-nav-wrap.is-open .wa-mob-nav-btn { border-bottom-color: transparent !important; }
    .wa-mob-nav-wrap.is-open .wa-mob-nav-chevron { transform: rotate(180deg); }

    /* Hide horizontal nav */
    body.wa-owner .wa-mob-nav-wrap .profile-tabs,
    body.wa-admin .wa-mob-nav-wrap .profile-tabs { display: none; }

    /* Open → dropdown panel. Dark, extends edge-to-edge beyond profile-card padding */
    body.wa-owner .wa-mob-nav-wrap.is-open .profile-tabs,
    body.wa-admin .wa-mob-nav-wrap.is-open .profile-tabs {
        display: flex; flex-direction: column; flex-wrap: nowrap;
        position: absolute; top: 100%; left: -16px; right: -16px; z-index: 300;
        background: var(--wag-type-tabs-bg, var(--wag-style-tabs-bg));
        border-bottom: 1px solid var(--wag-type-tabs-underline, var(--wag-style-tabs-underline));
        box-shadow: var(--wag-type-tabs-shadow, var(--wag-style-tabs-shadow));
        margin: 0; padding: 4px 0; gap: 0; overflow: hidden;
    }
    /* El sangrado de -16px está pensado para el Control Center, cuya tarjeta
       tiene 16px de padding. En el Owner Dashboard el hero es full-bleed en
       móvil y el nav ya llega a los dos bordes (medido: 0→375 en un viewport de
       375), así que ese sangrado se salía por la derecha y dejaba 16px de
       scroll horizontal mientras el menú estaba abierto. (Marc, 2026-09-13) */
    body.wa-owner .wa-mob-nav-wrap.is-open .profile-tabs { left: 0; right: 0; }

    /* Items: keep ALL existing color/font styles; only adjust layout */
    body.wa-owner .wa-mob-nav-wrap .wa-owner-tab,
    body.wa-admin .wa-mob-nav-wrap .wa-owner-tab {
        width: 100%; border-radius: 0;
        border-bottom: 1px solid rgba(255,255,255,.06) !important;
        border-top: none !important; border-left: 3px solid transparent !important; border-right: none !important;
        justify-content: flex-start;
    }
    body.wa-owner .wa-mob-nav-wrap .wa-owner-tab.is-active,
    body.wa-admin  .wa-mob-nav-wrap .wa-owner-tab.is-active {
        border-left-color: var(--wag-type-owner-tab-sideline, var(--wag-style-owner-tab-sideline)) !important;
    }
    /* Remove the desktop vertical separator pseudo-element */
    body.wa-owner .wa-mob-nav-wrap .wa-owner-tab + .wa-owner-tab::before,
    body.wa-admin  .wa-mob-nav-wrap .wa-owner-tab + .wa-owner-tab::before { display: none; }

    /* Sub-grupos siempre desplegados dentro del menú móvil.
       El Owner Dashboard se quedó fuera de estas reglas cuando nació su grupo
       "Manage" (Reviews/Analytics/Team, :19911): conservaba el CSS de
       escritorio, que abre el submenú con :hover/:focus-within. En un móvil no
       hay hover, así que "Manage" no se desplegaba nunca y tocarlo solo
       navegaba a Reviews — sus otras dos secciones eran inalcanzables desde el
       teléfono. Los dos paneles comparten el mismo desplegable oscuro
       (#1a1e24, activo #4fadd4), así que comparten también estas reglas: los
       colores claros de body.wa-owner .wa-nav-item (:19926) serían ilegibles
       sobre ese fondo. (Marc, 2026-09-13) */
    body.wa-owner .wa-mob-nav-wrap .wa-nav-group,
    body.wa-admin .wa-mob-nav-wrap .wa-nav-group { position: static; width: 100%; }
    body.wa-owner .wa-mob-nav-wrap .wa-nav-group > .profile-tab,
    body.wa-admin .wa-mob-nav-wrap .wa-nav-group > .profile-tab { width: 100%; border-bottom: 1px solid rgba(255,255,255,.06) !important; }
    body.wa-owner .wa-mob-nav-wrap .wa-nav-menu,
    body.wa-admin .wa-mob-nav-wrap .wa-nav-menu {
        position: static !important; opacity: 1 !important; visibility: visible !important;
        transform: none !important; display: flex !important; flex-direction: column;
        border: none; border-radius: 0; padding: 0; box-shadow: var(--wag-shadow-14);
        background: var(--wag-type-nav-menu-bg, var(--wag-style-nav-menu-bg)); min-width: auto;
    }
    body.wa-owner .wa-mob-nav-wrap .wa-nav-item,
    body.wa-admin .wa-mob-nav-wrap .wa-nav-item { padding: 11px 18px 11px 36px; border-radius: 0 !important; color: rgba(200,215,235,.75); }
    body.wa-owner .wa-mob-nav-wrap .wa-nav-item + .wa-nav-item,
    body.wa-admin .wa-mob-nav-wrap .wa-nav-item + .wa-nav-item { border-top: 1px solid rgba(255,255,255,.05); }
    body.wa-owner .wa-mob-nav-wrap .wa-nav-item:hover,
    body.wa-admin .wa-mob-nav-wrap .wa-nav-item:hover { background: rgba(255,255,255,.06) !important; color: #fff !important; }
    body.wa-owner .wa-mob-nav-wrap .wa-nav-item.is-active,
    body.wa-admin .wa-mob-nav-wrap .wa-nav-item.is-active { background: rgba(79,173,212,.12) !important; color: #4fadd4 !important; border-left: 3px solid #4fadd4 !important; border-radius: 0 !important; }
    body.wa-owner .wa-mob-nav-wrap .wa-nav-caret,
    body.wa-admin .wa-mob-nav-wrap .wa-nav-caret { display: none; }

    /* Hero de perfil en móvil (Marc, 2026-08-30: «es un caos»).
       Antes: flex con wrap y .profile-hero-info en flex:1 sin base, así que el
       info se estrujaba junto al avatar y el botón de salir caía descolgado a
       media línea. Ahora hay dos filas explícitas — avatar + identidad arriba,
       acciones debajo — sin rejillas de áreas fijas, porque este hero lo
       comparten 16 páginas y algunas no llevan avatar. */
    .profile-hero {
        flex-wrap: wrap;
        /* Arriba, no centrado: con nombre + meta + compartir, el bloque de
           identidad es mucho más alto que el avatar y centrarlo lo hundía
           hasta la mitad de la meta (Marc, 2026-08-30). */
        align-items: flex-start;
        gap: 6px 16px;
        padding: 22px 16px;
    }
    /* Los 2px compensan el interlineado del h1: alinea el aro con la letra,
       no con la caja de texto. */
    .profile-hero-avatar { width: 56px; height: 56px; margin-top: 2px; }
    /* Ocupa el resto de la primera fila: el botón se va entero a la segunda. */
    .profile-hero-info { flex: 1 1 calc(100% - 72px); min-width: 0; }
    .profile-hero-name {
        display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
        margin: 0 0 4px; font-size: var(--wag-text-24); line-height: 1.15;
    }
    .profile-hero-name .wa-user-category { margin-left: 0; }
    /* Los separadores «·» quedaban huérfanos al principio de línea cuando la
       meta se partía; el hueco los sustituye. */
    .profile-hero-meta { flex-wrap: wrap; gap: 3px 12px; }
    .profile-hero-meta .separator { display: none; }
    .profile-hero-logout { position: static; flex: 0 0 auto; margin-top: 10px; }
    .profile-card .wildatlas-feature-band-hero-banner { margin: 0 -16px; }

    /* Big page hero titles */
    .species-title, .country-title, .operator-title, .hide-title, .tour-title { font-size: 32px; }

    /* Content card padding */
    .profile-card.wa-page-card, .profile-card { padding-left: 16px; padding-right: 16px; }

    /* Dashboards: stat rows + kpis + alerts to 2 columns */
    .wa-stat-row, body.wa-admin .wa-admin-kpis, body.wa-admin .wa-admin-alerts,
    body.wa-admin .wa-admin-activity { grid-template-columns: repeat(2, 1fr); }

    /* Dropdown menus don't overflow the viewport */
    body.wa-admin .wa-nav-menu, body.wa-profile .wa-nav-menu { left: 0; right: auto; transform: none; min-width: 200px; }

    /* Hides & experiences: stack the two-column layouts */
    .tour-main, .tour-sidebar, .tour-layout > * { width: 100% !important; max-width: 100% !important; float: none !important; }
    .tour-layout { display: block; }

    /* Owner content cards / module boxes full width */
    body.wa-owner .wa-owner-cards { grid-template-columns: 1fr; }

    /* Submit/editor action buttons wrap */
    .wa-submit-row { flex-wrap: wrap; }
    /* Public forms: 2-col row → stacked on mobile */
    .wa-submit-row > div { flex: 1 1 100% !important; }

    /* ── Submit forms (add-hotspot, add-operator) on mobile — edge-to-edge ─── */
    /* Same pull-out technique as .wa-edit-card: the parent profile-card has
       16px horizontal padding, so negative margins make the card full-width. */
    .wa-submit-card,
    .wa-hotspot-family-picker {
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        box-shadow: var(--wag-shadow-14);
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        padding-right: 16px;
    }
    /* Ownership radio buttons: stack vertically on narrow screens */
    .wa-biz-own-radios { flex-direction: column; gap: 10px; }
    /* Submit-form top row (label + button): wrap so button goes below on mobile */
    .wa-submit-form-top { flex-wrap: wrap; gap: var(--wag-space-8); }
    .wa-submit-btn--top { align-self: stretch; }

    /* ── Editor forms (page-admin-edit.php) on mobile — edge-to-edge ───────── */
    /* The profile-card wrapper has 16px horizontal padding at this breakpoint.
       We pull the editor cards OUT of that padding with negative margins so they
       run full-width, then re-add horizontal padding INSIDE where content needs it.
       Result: zero double-margins — the card breathes the whole screen. */
    .wa-admin-editor { gap: 0; }
    .wa-edit-card {
        padding: 0 0 16px;
        border-radius: 0;
        border-left: 0; border-right: 0;
        box-shadow: var(--wag-shadow-14);
        margin: 0 -16px 1px;   /* pull out of parent's 16px padding */
    }
    .wa-edit-card-head {
        padding: 14px 16px;
        margin-bottom: 0;
        border-radius: 0;
    }
    /* Re-add horizontal padding inside the ACF form */
    .wa-admin-editor .acf-form { padding: 0 14px; }
    .wa-admin-editor .acf-form-submit { padding-left: 14px; padding-right: 14px; }
    /* ACF accordion content: remove the extra 10px inner margins */
    .wa-admin-editor .acf-field-accordion { margin: 0 -14px 0; }
    .wa-admin-editor .acf-field-accordion .acf-accordion-title { border-radius: 0; }
    .wa-admin-editor .acf-field-accordion .acf-accordion-content { border-radius: 0; border-left: 0; border-right: 0; }
    .wa-admin-editor .acf-field-accordion .acf-accordion-content > .acf-fields {
        margin-left: 0; margin-right: 0; padding: 0 4px;
    }
    /* ACF side-by-side field columns (50%/33%/25%) → full width */
    .wa-admin-editor .acf-field[data-width="50"],
    .wa-admin-editor .acf-field[data-width="33"],
    .wa-admin-editor .acf-field[data-width="25"] {
        width: 100% !important;
        float: none !important;
        clear: both !important;
        padding-right: 0 !important;
    }
    /* Clear ACF's float-based grid so stacked fields don't overlap */
    .wa-admin-editor .acf-fields.-left::after { content: ''; display: table; clear: both; }
    /* Relationship pickers: stack left/right panels vertically */
    .wa-admin-editor .acf-relationship { flex-direction: column; }
    .wa-admin-editor .acf-relationship .acf-relationship-left,
    .wa-admin-editor .acf-relationship .acf-relationship-right,
    .wa-admin-editor .acf-relationship .acf-selection {
        width: 100% !important; min-height: 140px;
    }
    /* GeoDirectory form embedded in editor */
    .wa-admin-editor-gd { padding: 14px 14px 8px; margin: 0; border-radius: 0; }
    /* add-hotspot page: .wa-admin-editor-gd is a direct child of profile-card
       (no .wa-edit-card wrapper), so it needs its own pull-out */
    body.wa-add-hotspot .wa-admin-editor-gd { margin-left: -16px; margin-right: -16px; }
    body.wa-add-hotspot .wa-biz-own-wrap { border-radius: 0; border-left: 0; border-right: 0; }
    /* Sticky save bar on mobile: hide label, View link + full-width Save */
    .wa-sticky-save { padding: 10px 14px; gap: var(--wag-space-8); }
    .wa-sticky-save-info { display: none; }
    .wa-sticky-save-btn { flex: 1; text-align: center; padding: 12px; }
    .wa-sticky-view-link { padding: 10px 12px; }

    /* Hotspot & operator hero: drop the description + "prime spot" badge (they clash) */
    .operator-hero-banner .operator-hero-description,
    .operator-hero-description,
    .hotspot-hero-camera-badge { display: none !important; }

    /* Country / species hotspot cards → single column, one after another */
    .country-hotspots-grid,
    .species-hotspots-grid,
    .country-hotspots-full-grid,
    .species-hotspots-full-grid { grid-template-columns: 1fr !important; }
    .country-hotspot-card, .species-hotspot-card { width: auto; min-width: 0; max-width: 100%; flex: 1 1 100%; }
}

@media (max-width: 480px) {
    .profile-hero { padding: 18px 14px; }
    .profile-hero-avatar { width: 48px; height: 48px; }
    .profile-hero-info { flex-basis: calc(100% - 64px); }
    .profile-hero-name { font-size: 22px; }
    .profile-hero-meta { font-size: 12.5px; }
    .wa-stat-row, body.wa-admin .wa-admin-kpis,
    body.wa-admin .wa-admin-alerts, body.wa-admin .wa-admin-activity { grid-template-columns: 1fr; }
    .species-title, .country-title, .operator-title, .hide-title, .tour-title { font-size: 27px; }
    /* Card grids: 2 across max on the smallest screens */
    .country-species-grid, .species-season-grid { gap: 10px; }
}

@media (max-width: 878px) {
 .country-hero-description { display:none !important;}
}

/* ── Description + mini location map — 2-col desktop layout ────────────── */
.wa-desc-map-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--wag-space-24);
    align-items: start;
}
@media (max-width: 900px) {
    .wa-desc-map-layout { grid-template-columns: 1fr; }
}

/* Map column — fixed size, sticky so it stays visible as description grows */
/* Posición fija en el flujo, NO sticky (Marc, 2026-08-30): al hacer scroll el
   bloque se despegaba y acababa montándose sobre .wa-contact-cta-note. Un mapa
   de 231px no necesita seguir al lector, y perseguirlo costaba solapes. */
.wa-desc-map-layout__map {
    position: static;
    display: flex;
    flex-direction: column;
}
.wa-desc-map-layout__map--solo { width: 100%; position: static; }

/* Descripción corta: la tarjeta llega igualmente hasta abajo (Marc, 2026-09-14).
   Con `align-items: start` cada columna medía lo suyo, así que un texto breve
   dejaba la tarjeta flotando muy por encima del borde inferior del mapa.

   Estirar ESTA columna es seguro, al revés que el intento fallido de estirar el
   aside que se documenta abajo: la descripción es quien MANDA en la altura de la
   fila cuando es alta, así que igualarla a la fila no puede realimentarse. El
   aside no manda, y por eso allí el stretch lo arrastraba al pulsar "Read more".

   Acotado a :has(.wa-loc-map-wrap) — el caso sin mapa tiene su propia regla.

   Se usa grid y NO flex a propósito: con `flex: 1 1 auto` el shrink encogía la
   tarjeta para caber en los 231px de la fila, y al pulsar "Read more" el texto
   se quedaba recortado sin que la fila creciera. Un item de grid conserva su
   `min-height: auto`, así que se estira cuando sobra sitio y empuja la fila
   cuando falta. */
.wa-desc-map-layout:has(.wa-loc-map-wrap) .wa-desc-map-layout__text {
    align-self: stretch;
    display: grid;
    grid-template-rows: 1fr;
}
/* En una sola columna no hay nada que igualar. */
@media (max-width: 900px) {
    .wa-desc-map-layout:has(.wa-loc-map-wrap) .wa-desc-map-layout__text { display: block; }
}

/* Operador: sin mapa, el aside es solo el chat y queda mucho más bajo que la
   descripción. Se le fija la altura de la descripción PLEGADA.

   Aquí hubo dos intentos fallidos, por si vuelve a tentar: `align-self: stretch`
   lo ataba a la altura de la FILA, y la fila crece al pulsar "Read more" — el
   chat crecía con ella y quedaba una tarjeta enorme con el botón flotando en
   medio. Condicionar ese stretch al estado plegado producía el efecto contrario:
   encogía de golpe al expandir. Con una altura fija no depende del estado —
   plegado iguala, expandido se queda quieto y anclado arriba.

   Los 230px son la descripción plegada: 28 de padding + 130 de recorte + el
   botón + 24 de padding. Si se toca el max-height de .wa-hotspot-desc-body, hay
   que recalcular este número.

   Acotado con :has() al caso SIN mapa. (El sticky que motivaba esta distinción
   se retiró el 2026-08-30; la altura mínima se mantiene porque sigue igualando
   la tarjeta de descripción.) */
.wa-desc-map-layout__map:not(:has(.wa-loc-map-wrap)) {
    align-self: start;
    position: static;   /* sin mapa no hay nada que fijar */
    min-height: 230px;
}

.wa-desc-map-layout__map:not(:has(.wa-loc-map-wrap)) .wa-contact-cta {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* El margen superior de 14px es para separarlo del mapa. Sin mapa,
       descuadraría el borde de arriba respecto a la tarjeta de descripción. */
    margin-top: 0;
}

/* En una sola columna no hay nada que igualar. */
@media (max-width: 900px) {
    .wa-desc-map-layout__map:not(:has(.wa-loc-map-wrap)) { min-height: 0; }
}

/* Mini Leaflet map thumbnail */
.wa-loc-map-wrap {
    position: relative;
    border-radius: var(--wag-type-loc-map-wrap-radius, var(--wag-style-hotspot-desc-radius));
    overflow: hidden;
    border: 1px solid var(--wa-line, #eef0f3);
    box-shadow: var(--wag-shadow-10);
    height: 231px;
    display: flex;
    flex-direction: column;
}
.wa-loc-map {
    width: 100%;
    height: 100%;
    display: block;
}
@media (max-width: 900px) {
    .wa-desc-map-layout__map { position: static; }
    .wa-loc-map-wrap { height: 200px; }
}

/* "Ver en el mapa" overlay button */
.wa-loc-map-actions {
    position: absolute;
    bottom: 14px;
    left: 50%;
    z-index: 500;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    align-items: center;
    gap: var(--wag-space-8);
    width: min(300px,calc(100% - 28px));
    transform: translateX(-50%);
}
/* Con un único botón (p. ej. un hotspot sin perfil de entorno) la rejilla de
   dos columnas lo dejaba ocupando la izquierda y pareciendo descentrado. */
.wa-loc-map-actions:has(> :only-child) {
    grid-template-columns: minmax(0,1fr);
    width: min(190px,calc(100% - 28px));
}
.wa-loc-map-btn {
    position: static;
    transform: none;
    width: 100%;
    min-height: 42px;
    justify-content: center;
    /* Sin borde, igual que su gemelo de entorno: el 1px translúcido sobre el
       gradiente ensuciaba las esquinas redondeadas (Marc, 2026-08-30). */
    border: 0;
    background: var(--wag-type-map-bg, var(--wag-style-degradado-mapa-bg));
    color: var(--wag-type-map-ink, var(--wag-style-degradado-mapa-ink)) !important;
    font-weight: 800;
    font-size: var(--wag-text-13);
    line-height: 1;
    padding: 10px 16px;
    border-radius: var(--wag-radius-12);
    text-decoration: none !important;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: var(--wag-type-map-shadow, var(--wag-style-degradado-mapa-shadow));
    transition: background .18s, transform .18s, box-shadow .18s;
    cursor: pointer;
}
.wa .wa-loc-map-btn:hover {
    background: var(--wag-type-map-hover-bg, var(--wag-style-degradado-mapa-hover-bg));
    box-shadow: var(--wag-type-map-hover-shadow, var(--wag-style-degradado-mapa-hover-shadow));
    transform: translateY(-1px);
}
.wa-loc-map-actions svg,.wa-loc-map-actions .wa-ico { width:16px; height:16px; flex:0 0 16px; }

/* Custom pin marker */
.wa-loc-pin { background: transparent; border: none; }
.wa-loc-pin__dot {
    width: 20px;
    height: 20px;
    background: #1f8a52;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,.35);
}

html[data-theme="dark"] .wa-loc-map-wrap {
    border-color: var(--wag-type-loc-map-wrap-dark-line, var(--wag-style-hotspot-desc-dark-line));
}

/* "Get directions" — icono cuadrado discreto arriba a la derecha del mini
   mapa (Marc, 2026-08-03: movido aquí desde la tarjeta de contacto — más
   cerca de donde el visitante ya está mirando la ubicación). Mismo degradado
   azul que la card "Explore the Atlas" del quick-access móvil de la home
   (.wa-home-quick-card--atlas) — Marc quería ese estilo reconocible en vez de
   un botón neutro. */
.wa-loc-map-directions {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wag-type-loc-map-directions-bg, var(--wag-style-loc-map-directions-bg));
    color: var(--wag-type-loc-map-directions-ink, var(--wag-style-loc-map-directions-ink)) !important;
    border: none;
    border-radius: var(--wag-type-loc-map-directions-radius, var(--wag-style-loc-map-directions-radius));
    box-shadow: var(--wag-type-loc-map-directions-shadow, var(--wag-style-loc-map-directions-shadow));
    text-decoration: none !important;
    z-index: 501;
    transition: transform .18s, box-shadow .18s;
}
/* Astra aplica su propio hover a <a> (color/underline) con más especificidad
   que un solo .wa-loc-map-directions:hover — igual que el resto de botones
   .wa-* del tema (ver "CSS vs Astra" en CLAUDE.md), así que se neutraliza
   explícitamente aquí en vez de heredarlo. */
.wa .wa-loc-map-directions:hover,
.wa .wa-loc-map-directions:focus-visible {
    color: var(--wag-type-loc-map-directions-hover-ink, var(--wag-style-loc-map-directions-hover-ink)) !important;
    text-decoration: none !important;
    background: var(--wag-type-loc-map-directions-hover-bg, var(--wag-style-loc-map-directions-hover-bg));
    transform: translateY(-1px);
    box-shadow: var(--wag-type-loc-map-directions-hover-shadow, var(--wag-style-loc-map-directions-hover-shadow));
}

/* ── Hotspot description section (módulo independiente, colapsable) ─────── */
.wa-hotspot-desc {
    background: var(--wa-card, #fff);
    border: 1px solid var(--wa-line, #eef0f3);
    border-radius: var(--wag-type-hotspot-desc-radius, var(--wag-style-hotspot-desc-radius));
    box-shadow: var(--wag-shadow-10);
    padding: 24px 32px;
}

.wa-hotspot-desc-body {
    max-height: 130px;
    overflow: hidden;
    transition: max-height .4s ease;
    position: relative;
}
/* Gradient fade al final del texto colapsado */
.wa-hotspot-desc-body:not(.is-expanded)::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 60px;
    background: linear-gradient(to bottom, transparent, var(--wa-card, #fff));
    pointer-events: none;
}
html[data-theme="dark"] .wa-hotspot-desc-body:not(.is-expanded)::after {
    background: linear-gradient(to bottom, transparent, #1a1f26);
}
.wa-hotspot-desc-body.is-expanded { max-height: none; }

/* Prose */
.wa-hotspot-desc-body p {
    margin: 0 0 .95em;
    font-size: 15.5px;
    line-height: 1.78;
    color: var(--wa-ink, #1a2230);
    letter-spacing: .01em;
}
.wa-hotspot-desc-body p:last-child { margin-bottom: 0; }

/* Botón "Read more / Show less" */
.wa-hotspot-desc-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    padding: 7px 16px 7px 14px;
    border: 1.5px solid var(--wa-line, #dde2e8);
    border-radius: var(--wag-radius-999);
    background: var(--wag-type-read-more-bg, var(--wag-style-pildora-neutra-bg));
    color: var(--wa-ink, #1a2230);
    font-size: var(--wag-text-13);
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
    letter-spacing: .02em;
}
.wa .wa-hotspot-desc-more:hover {
    border-color: var(--wag-type-read-more-hover-line, var(--wag-style-pildora-neutra-hover-line));
    color: var(--wag-type-read-more-hover-ink, var(--wag-style-pildora-neutra-hover-ink));
    background: var(--wag-type-read-more-hover-bg, var(--wag-style-pildora-neutra-hover-bg));
}
.wa-hotspot-desc-more svg { transition: transform .3s ease; flex-shrink: 0; }
.wa-hotspot-desc-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.wa-hotspot-desc-more[hidden] { display: none; }

/* Dark mode */
html[data-theme="dark"] .wa-hotspot-desc {
    background: var(--wag-dark-surface);
    border-color: var(--wag-type-hotspot-desc-dark-line, var(--wag-style-hotspot-desc-dark-line));
    box-shadow: var(--wag-shadow-14);
}
html[data-theme="dark"] .wa-hotspot-desc-body p { color: #c8d3dc; }
html[data-theme="dark"] .wa-hotspot-desc-more { border-color: var(--wag-type-read-more-dark-line, var(--wag-style-pildora-neutra-dark-line)); color: var(--wag-type-read-more-dark-ink, var(--wag-style-pildora-neutra-dark-ink)); }
html[data-theme="dark"] .wa-hotspot-desc-more:hover { border-color: var(--wag-type-read-more-dark-hover-line, var(--wag-style-pildora-neutra-dark-hover-line)); color: var(--wag-type-read-more-dark-hover-ink, var(--wag-style-pildora-neutra-dark-hover-ink)); background: var(--wag-type-read-more-dark-hover-bg, var(--wag-style-pildora-neutra-dark-hover-bg)); }

/* ── Consent banner (own, privacy-first) ─────────────────────────────────── */
.wa-consent {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%) translateY(140%);
    width: min(680px, calc(100vw - 32px));
    z-index: 99995;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 20px;
    background: #1a1e24;
    color: var(--wag-dark-ink);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
    opacity: 0;
    transition: transform .35s cubic-bezier(.22,.8,.3,1), opacity .35s ease;
}
.wa-consent.is-in { transform: translateX(-50%) translateY(0); opacity: 1; }
.wa-consent.is-gone { transform: translateX(-50%) translateY(140%); opacity: 0; }
.wa-consent-msg { margin: 0; font-size: 13.5px; line-height: 1.45; color: #cdd4db; flex: 1; }
.wa-consent-link { color: #6fb6e6; text-decoration: underline; margin-left: 4px; white-space: nowrap; }
.wa-consent-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.wa-consent-btn {
    font-size: var(--wag-text-13); font-weight: 600; letter-spacing: .02em;
    padding: 9px 18px; border-radius: 10px; cursor: pointer; white-space: nowrap;
    border: 1px solid transparent; transition: background .15s, border-color .15s;
}
.wa-consent-decline { background: #f3f5f7; color: #1a1e24; border-color: #f3f5f7; }
.wa .wa-consent-decline:hover { background: var(--wag-surface); color: #1a1e24; }
.wa-consent-accept { background: #1f8a52; color: #fff; }
.wa .wa-consent-accept:hover { background: #1c7a49; }
@media (max-width: 600px) {
    .wa-consent { flex-direction: column; align-items: stretch; gap: var(--wag-space-12); bottom: 12px; }
    .wa-consent-actions { justify-content: flex-end; }
}

/* ── Admin: Analytics settings card fields ───────────────────────────────── */
.wa-analytics-card .wa-field { display: block; margin-bottom: 16px; }
.wa-analytics-card .wa-field-label { display: block; font-size: var(--wag-text-13); font-weight: 600; margin-bottom: 6px; color: var(--wa-ink, #1a1e24); }
.wa-analytics-card .wa-field input[type="text"] {
    width: 100%; max-width: 420px; padding: 10px 12px; font-size: var(--wag-text-14);
    border: 1px solid var(--wa-line, #e3e8ee); border-radius: 9px;
    background: var(--wa-card, #fff); color: var(--wa-ink, #1a1e24);
}
.wa-analytics-card .wa-field input[type="text"]:disabled { opacity: .6; cursor: not-allowed; }
.wa-analytics-card .wa-field-hint { display: block; font-size: var(--wag-text-12); color: var(--wa-muted, #6b7a86); margin-top: 5px; }
.wa-analytics-card .wa-field-hint code,
.wa-analytics-card .wa-admin-module-desc code { background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: var(--wag-radius-4); font-size: var(--wag-text-12); }
.wa-analytics-save-row { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.wa-analytics-saved { font-size: var(--wag-text-13); font-weight: 600; color: #1f8a52; }

/* ── SPECIES section — master list table ─────────────────────────────────── */

.wa-species-cell-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wa-species-cell-name img, .wa-species-noimg {
    width: 44px; height: 44px; border-radius: var(--wag-radius-8); object-fit: cover; flex: 0 0 auto; background: #e9edf1;
}
.wa-species-actions { display: flex; gap: var(--wag-space-8); flex-wrap: wrap; align-items: center; }
.wa-species-actions a, .wa-species-actions button {
    font-size: var(--wag-text-12); font-weight: 600; padding: 5px 9px; border-radius: 7px; cursor: pointer;
    border: 1px solid var(--wa-line, #e3e8ee); background: var(--wa-card, #fff); color: var(--wa-ink, #1a1e24); text-decoration: none;
}
.wa-species-actions button:disabled { opacity: .5; }
.wa-csv-import input[type="file"] { font-size: var(--wag-text-12); }

/* ── Owner bookings: report toolbar + past/archived section ───────────────── */
.wa-bk-report-bar { display: flex; gap: var(--wag-space-8); align-items: center; flex-wrap: wrap; margin: 18px 0 6px; }
.wa-bk-report-lbl { font-size: var(--wag-text-12); text-transform: uppercase; letter-spacing: .05em; color: #5f7f9f; }
.wa-bk-report-arrow { color: #8a95a3; }
.wa-bk-report-bar input[type="date"] { padding: 7px 9px; border: 1px solid var(--wa-line, #e3e8ee); border-radius: var(--wag-radius-8); background: var(--wa-card, #fff); color: var(--wa-ink, #1a1e24); font-size: var(--wag-text-13); }
.wa-bk-past { margin-top: 20px; border-top: 1px solid var(--wa-line, #eef0f3); padding-top: 8px; }
.wa-bk-past > summary { cursor: pointer; font-weight: 700; font-size: var(--wag-text-14); color: var(--wa-ink, #1a1e24); padding: 8px 0; list-style: revert; }
.wa .wa-bk-past > summary:hover { color: #4fadd4; }
.wa-bk-past[open] > summary { margin-bottom: 8px; }

/* ===========================================================================
   WA SEARCH — custom global search (species + countries). Replaces ASL.
   Panel renders in-place under the input (no more body-appended dropdown that
   jumped to the top of the screen on mobile).
   =========================================================================== */
.wa-search { position: relative; width: 100%; }
.wa-search-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 0 14px; height: 52px;
    background: var(--wa-card, #fff);
    border: 1px solid var(--wa-line, #e3e8ee);
    border-radius: 14px;
    box-shadow: var(--wag-type-field-search-bar-shadow, var(--wag-style-field-search-bar-shadow));
}
.wa-search-icon { color: #8a95a3; flex-shrink: 0; }
.wa-search-input {
    flex: 1; min-width: 0; border: 0; outline: 0; background: var(--wag-type-field-search-bg, var(--wag-style-field-search-bg));
    font-size: var(--wag-text-16); color: var(--wa-ink, #1a1e24);
}
.wa-search-input::placeholder { color: #9aa6b2; }
.wa-search-input::-webkit-search-cancel-button { display: none; }
.wa-search-clear { border: 0; background: transparent; color: #9aa6b2; font-size: 22px; line-height: 1; cursor: pointer; padding: 0 2px; }
.wa .wa-search-clear:hover { color: var(--wa-ink, #1a1e24); }
.wa-search-spinner { width: 16px; height: 16px; border: 2px solid #d7dee6; border-top-color: #4fadd4; border-radius: 50%; animation: wa-search-spin .7s linear infinite; flex-shrink: 0; }
@keyframes wa-search-spin { to { transform: rotate(360deg); } }

.wa-search-panel {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 1200;
    background: var(--wa-card, #fff);
    border: 1px solid var(--wa-line, #e6ebf0);
    border-radius: var(--wag-radius-16);
    box-shadow: 0 18px 50px rgba(20, 30, 45, .18);
    max-height: min(64vh, 460px); overflow-y: auto; padding: 6px;
}
.wa-search-panel[hidden] { display: none; }

.wa-search-row { display: flex; align-items: center; gap: var(--wag-space-12); padding: 9px 10px; border-radius: 11px; text-decoration: none; color: inherit; }
.wa .wa-search-row:hover,
.wa-search-row.is-active { background: var(--wa-soft, #f3f6f9); }
.wa-search-thumb { width: 42px; height: 42px; border-radius: 9px; overflow: hidden; flex-shrink: 0; background: #e9eef3; display: flex; align-items: center; justify-content: center; color: #8a95a3; }
.wa-search-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.wa-search-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wa-search-en { font-weight: 700; font-size: 14.5px; color: var(--wa-ink, #1a1e24); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-search-sub { display: flex; align-items: center; gap: var(--wag-space-8); font-size: 12.5px; color: #76828f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-search-es { color: #5a6675; }
.wa-search-sci { font-style: italic; color: #8a95a3; }
.wa-search-code { font-weight: 700; letter-spacing: .5px; color: #9aa6b2; }

.wa-search-meta { display: flex; align-items: center; gap: var(--wag-space-8); flex-shrink: 0; }
.wa-search-hotspots { font-size: 11.5px; color: #5a6675; background: #eef2f6; padding: 3px 8px; border-radius: var(--wag-radius-999); white-space: nowrap; }
.wa-search-badge { font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; padding: 3px 8px; border-radius: var(--wag-radius-999); white-space: nowrap; }
.wa-search-badge--birds { background: #e8f3fb; color: #2b7cb0; }
.wa-search-badge--mammals { background: #f0eefb; color: #6a57c0; }
.wa-search-badge--country { background: #eaf6ee; color: #3a9d5d; }
/* Operador: azul acero. No compite con el verde de país ni con el naranja de
   hotspot, y transmite "negocio" en vez de "lugar". */
.wa-search-badge--operator        { background: #eaf1f8; color: #2f6690; }
.wa-search-badge--hotspot         { background: #fdf0e6; color: #c2772b; }
.wa-search-badge--hotspot-nature   { background: rgba(46,139,98,.12);  color: #1a7a4f; }
.wa-search-badge--hotspot-business { background: rgba(201,144,32,.12); color: #9a7015; }
.wa-search-empty { padding: 16px 14px; text-align: center; color: #8a95a3; font-size: 13.5px; }

/* ── Especie sin producto (filtros Hides / Experiences) ─────────────────────
   Sale igual que las demás, pero apagada: existe, y hoy no hay dónde. La foto
   baja a gris para que la fila se lea como "todavía no" y no como un error.
   (Marc, 2026-09-20) */
.wa-search-row--off { cursor: default; }
.wa .wa-search-row--off:hover { background: transparent; }
.wa-search-row--off .wa-search-thumb img { filter: grayscale(1); opacity: .55; }
.wa-search-row--off .wa-search-en { color: #8a95a3; font-weight: 600; }
.wa-search-none { color: #aab4bf; font-style: italic; }
html[data-theme="dark"] .wa-search-row--off .wa-search-en { color: #7a8794; }
html[data-theme="dark"] .wa-search-none { color: #6b7681; }

/* ── Search filter dropdown (right side of bar, home hero only) ── */
.wa-search-filters {
    display: none;
    /* no position:relative — menu anchors up to .wa-search wrapper */
    align-self: stretch;
    align-items: center;
    flex-shrink: 0;
    margin-left: 4px;
}
.wa-hp-search .wa-search-filters { display: flex; }
/* Filters always visible in all home search states */
/* Mobile: filters always visible — smaller trigger, touch-friendly items */
@media (max-width: 1024px) {
    .wa-hp-search .wa-search-filters { display: flex; }
    .wa-sf-trigger { height: 36px; }
    .wa-sf-item { font-size: var(--wag-text-14); } /* touch target ≥44px */
}

.wa-sf-trigger {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 4px 0 16px;
    border: none !important;
    background: none !important;
    box-shadow: var(--wag-shadow-15) !important;
    border-radius: 0 !important;
    cursor: pointer;
    color: #9aa6b2 !important;
    font-size: var(--wag-text-12);
    font-weight: 600;
    white-space: nowrap;
    position: relative;
    line-height: 1;
    -webkit-appearance: none;
    appearance: none;
}
.wa .wa-sf-trigger:hover,
.wa .wa-sf-trigger[aria-expanded="true"] { color: #374151 !important; }
.wa .wa-sf-trigger.has-filter { color: var(--wag-type-filter-scope-ink, var(--wag-style-filter-scope-ink)) !important; }
/* Short 20px centered separator */
.wa-sf-trigger::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5px;
    height: 20px;
    background: #dde4ec;
}
.wa-sf-trigger.has-filter { color: var(--wag-type-filter-scope-ink, var(--wag-style-filter-scope-ink)); }
.wa-sf-chevron { transition: transform .18s; flex-shrink: 0; }
.wa-sf-trigger[aria-expanded="true"] .wa-sf-chevron { transform: rotate(180deg); }

/* Dropdown — anchored to .wa-search (position:relative wrapper = bar outer edge) */
.wa-sf-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1300;
    background: var(--wag-surface);
    border: 1px solid #d4dbe3;
    border-radius: var(--wag-radius-12);
    box-shadow: 0 10px 30px rgba(26,30,36,.16);
    overflow: hidden;      /* clips item bg to rounded corners — same as .wa-dropdown-menu */
    padding: 0;
    min-width: 150px;
    width: max-content;
}
.wa-sf-menu[hidden] { display: none; }

.wa-sf-item {
    width: 100%;
    padding: 9px 14px;
    border: none;
    background: var(--wag-surface);
    border-radius: 0;      /* full-width blocks, no pills */
    font-size: 13.5px;
    font-weight: 500;
    color: #1a1e24;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    transition: background .12s, color .12s;
}
.wa .wa-sf-item:hover,
.wa .wa-sf-menu .wa-sf-item:hover { background: rgba(79,173,212,.08); color: #1a1e24; }
.wa .wa-sf-item.is-active,
.wa-sf-menu .wa-sf-item.is-active,
.wa .wa-sf-item.is-active:hover { background: #1a1e24; color: #fff; font-weight: 700; }

/* Dark mode */
html[data-theme="dark"] .wa-search-bar { background: var(--wag-dark-surface); border-color: #2a313a; box-shadow: var(--wag-type-field-search-bar-dark-shadow, var(--wag-style-field-search-bar-dark-shadow)); }
html[data-theme="dark"] .wa-sf-trigger::before { background: #2a313a; }
html[data-theme="dark"] .wa-sf-trigger { color: #5a6a7a; }
html[data-theme="dark"] .wa .wa-sf-trigger.has-filter { color: #4fadd4; }
html[data-theme="dark"] .wa-sf-menu { background: #1a2535; border-color: #2d3b4d; box-shadow: 0 10px 30px rgba(10,18,30,.35); }
html[data-theme="dark"] .wa-sf-item { background: #1a2535; color: #a8b8c8; }
html[data-theme="dark"] .wa-sf-item:hover { background: rgba(79,173,212,.12); color: #e0eaf2; }
html[data-theme="dark"] .wa-sf-item.is-active { background: #4fadd4; color: #0d1e2c; }
html[data-theme="dark"] .wa-search-input { color: var(--wag-dark-ink); background: #2a313a;}
html[data-theme="dark"] .wa-search-input::placeholder { color: #7a8794; }
html[data-theme="dark"] .wa-search-panel { background: var(--wag-dark-surface); border-color: #2a313a; box-shadow: 0 18px 50px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .wa-search-row:hover, html[data-theme="dark"] .wa-search-row.is-active { background: #232a33; }
html[data-theme="dark"] .wa-search-en { color: var(--wag-dark-ink); }
html[data-theme="dark"] .wa-search-sub { color: #93a0ab; }
html[data-theme="dark"] .wa-search-es { color: #b9c2cc; }
html[data-theme="dark"] .wa-search-sci { color: #8a95a3; }
html[data-theme="dark"] .wa-search-thumb { background: #11161c; }
html[data-theme="dark"] .wa-search-hotspots { background: #232a33; color: #b9c2cc; }
html[data-theme="dark"] .wa-search-badge--birds { background: rgba(43, 124, 176, .22); color: #7cc1ea; }
html[data-theme="dark"] .wa-search-badge--mammals { background: rgba(106, 87, 192, .22); color: #a99af0; }
html[data-theme="dark"] .wa-search-badge--country { background: rgba(58, 157, 93, .22); color: #79d49b; }
html[data-theme="dark"] .wa-search-badge--operator { background: rgba(47, 102, 144, .26); color: #8ab8dd; }
html[data-theme="dark"] .wa-search-badge--hotspot         { background: rgba(194, 119, 43, .22); color: #e0a868; }
html[data-theme="dark"] .wa-search-badge--hotspot-nature   { background: rgba(46,139,98,.22);   color: #6dcfa0; }
html[data-theme="dark"] .wa-search-badge--hotspot-business { background: rgba(201,144,32,.22);  color: #d4aa55; }

/* Mobile */
@media (max-width: 600px) {
    .wa-search-bar { height: 48px; border-radius: var(--wag-radius-12); }
    .wa-search-panel { max-height: min(70vh, 520px); border-radius: 14px; }
    .wa-search-meta .wa-search-badge { display: none; }
    .wa-search-hotspots { font-size: var(--wag-text-11); padding: 2px 7px; }
    .wa-search-thumb { width: 38px; height: 38px; }
}

/* Hide / experience CONTACT button — shown when the place has no registered owner
   (not bookable through WildAtlas; links to the official site instead). */
.wa-hide-contact-btn { background: transparent !important; color: var(--wa-ink, #1a1e24) !important; border: 1.5px solid var(--wa-line, #d7dee6) !important; }
.wa .wa-hide-contact-btn:hover { border-color: #4fadd4 !important; color: #2b7cb0 !important; }
.wa-hide-contact-note { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: #8a95a3; text-align: center; }
html[data-theme="dark"] .wa-hide-contact-btn { color: #e8edf1 !important; border-color: #2a313a !important; }
html[data-theme="dark"] .wa-hide-contact-note { color: #93a0ab; }

/* Profile section nav (.wa-profile-nav): on mobile it duplicates the account
   (hamburger) dropdown — which now covers every profile section — so hide it there
   and let the hamburger drive navigation. Frees vertical space on small screens. */
@media (max-width: 1024px) {
    .wa-profile-nav { display: none !important; }
    /* Season chart: fill the wrapper as-is — the wrapper already handles the bleed.
       No 100vw trick here (would double-bleed and overflow the page). No scaleY —
       the SVG viewBox handles vertical scaling on its own. */
    .species-season-timeline {
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
}

/* ── Season chart: dos versiones SVG — desktop 1200vb / mobile 600vb ─────── */
/* Desktop muestra el SVG "plano" original; mobile el más alto estilo community */
.season-svg--mobile  { display: none; }
.season-svg--desktop { display: block; }
@media (max-width: 1024px) {
    .season-svg--desktop { display: none; }
    .season-svg--mobile  { display: block; }
    .species-season-wrapper { padding: 0 20px; }
    .species-season-grid    { grid-template-columns: repeat(3, 1fr); gap: var(--wag-space-12); }
}

/* ===========================================================================
   HOME REDESIGN — credibility metrics (reusable; dark-mode aware).
   =========================================================================== */
.wa-home-metrics { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 14px 24px; }
.wa-home-metric { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.wa-home-metric-n { font-size: 21px; font-weight: 800; color: var(--wa-ink, #1a1e24); letter-spacing: -.3px; }
.wa-home-metric-l { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px; color: #8a95a3; margin-top: 4px; }
html[data-theme="dark"] .wa-home-metric-n { color: var(--wag-dark-ink); }
html[data-theme="dark"] .wa-home-metric-l { color: #93a0ab; }

/* Home carousels — sections + horizontal card rows (reusable, dark-mode aware) */
.wa-home-section { margin: 26px 0 0; }
.wa-home-section-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 16px; margin-bottom: 12px; }
.wa-home-section-head--has-legend { align-items: center; }
.wa-home-section-title { color: var(--wa-ink, #1a1e24); margin: 0; }
.wa-home-section-more { font-size: 12.5px; font-weight: 700; color: #4fadd4; text-decoration: none;
    flex: 0 0 auto; white-space: nowrap; }
.wa-home-section-head { gap: var(--wag-space-12); }
.wa-home-section-title { min-width: 0; }   /* sin esto el título no encoge y empuja al enlace fuera */
.wa .wa-home-section-more:hover { text-decoration: underline; }
@media (max-width: 700px) { .wa-home-section-more { font-size: var(--wag-text-12); } }
.wa-home-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 2px 16px 6px; scrollbar-width: none; }
.wa-home-row::-webkit-scrollbar { display: none; }

/* ── Slider "3up" (Marc, 2026-08-17): mismo slider Booking-style de arriba,
   dimensionado para Experiences/Hides/Stays/Nearby — 3 cards visibles en vez
   de las cards pequeñas de la home. Las cards NO cambian de diseño
   (species-hotspot-card / country-hotspot-card / wa-tour-card conservan su
   CSS intacto); esto solo controla cuántas caben por pantalla, igual que ya
   hacía el grid estático al que sustituye. */
/* Marc, 2026-08-17 (3a vuelta): el overflow-x:auto de .wa-home-row obliga al
   navegador a computar overflow-y:auto también (no existe overflow-x:auto +
   overflow-y:visible) — con el padding vertical casi a 0 de antes, el propio
   row recortaba la sombra de las cards contra su caja, por eso se veían
   "planas" aunque wa-tour-card nunca perdió su box-shadow. Fix real: dar al
   row suficiente padding vertical para que quepa la sombra completa
   (incluida la de :hover, más grande y desplazada -3px) y cancelarlo con un
   margin negativo idéntico para que el alto ocupado en la página no cambie
   — el padding solo existe para que el clip del scroll no llegue a tocar la
   sombra. display:flow-root en el wrap evita que ese margin negativo se
   "escape" y arrastre lo que hay ANTES del slider. */
.wa-home-row.wa-home-row--3up {
    /* box-sizing + width explícitos (en vez de fiar el ancho a "auto"):
       así el contenido de la fila (donde caen las 3 cards) mide siempre
       exactamente el 100% del wrap, quede como quede el padding lateral —
       sin esto, el padding izq/der desigual dejaba la fila descentrada
       (más hueco a la derecha que a la izquierda). */
    box-sizing: border-box;
    width: calc(100% + 48px);
    gap: var(--wag-space-24);
    padding: 30px 24px 20px;
    margin: -30px -24px -20px;
    /* Marc, 2026-08-17 (8a vuelta, confirmado en Chrome contra producción):
       el ancho ya cuadraba exacto para 3 cards (comprobado con
       getBoundingClientRect), pero el row NO reposaba en scrollLeft:0 al
       cargar — scroll-snap-type:x mandatory + una regla vieja compartida
       (.wa-home-row { scroll-padding-left:16px }) que no coincide con nuestro
       padding-left real (24px) hacían que el navegador snapeara solo a 8px,
       desplazando todo y dejando asomar ~8px de la 4ª card por la derecha.
       Se sobreescribe scroll-padding a los mismos 24px del padding lateral,
       para que el snap "de descanso" caiga exactamente en scrollLeft:0 (3
       cards exactas, sin asomo, confirmado visualmente). */
    scroll-padding-left: 24px;
    scroll-padding-right: 24px;
}
.wa-home-row--3up > * {
    flex: 0 0 calc((100% - 48px) / 3);
    scroll-snap-align: start;
    min-width: 0;
    /* Marc, 2026-08-17: cards salían de distinta altura — wa-tour-card fija
       height:100% pensado para un grid con grid-auto-rows:1fr; en una fila
       flex con altura automática ese 100% se resuelve como si fuera auto y
       cada card queda del alto de SU contenido, rompiendo el align-items:
       stretch por defecto del row. auto aquí deja que stretch vuelva a
       igualar la altura de las 3 cards a la más alta, como en el grid de
       antes. */
    height: auto;
    align-self: stretch;
}
/* Marc, 2026-08-17 (5a vuelta): el bug real era horizontal, no vertical — el
   padding lateral del row era de solo 2-4px, así que la card SÍ tenía sitio
   arriba/abajo para su sombra pero NO a los lados: la primera card de cada
   fila se recortaba a la izquierda contra el borde del scrollport (capturas
   de Marc, comparando contra la hotspot card sin slider). Mismo criterio que
   ya se usaba en vertical: padding lateral igual al gap entre cards (24px,
   que ya sabemos que basta porque la sombra ENTRE cards nunca se cortaba) +
   margin negativo igual para no mover el layout ni cuántas caben. Sin tocar
   el valor de la sombra — la card usa la misma que fuera del slider. */
/* Marc, 2026-08-17 (7a vuelta): la 6a vuelta (padding derecho reducido a
   10px, vertical vuelto a 30/40) dejó la fila descentrada — con padding
   izq/der desigual, el ancho de contenido del row podía acabar más corto
   por la derecha, así que las 3 cards quedaban desplazadas a la izquierda
   en vez de centradas. Fix real: fijar box-sizing:border-box + width:
   calc(100% + 48px) en el row, para que su caja de contenido mida siempre
   el 100% del wrap exacto pase lo que pase con el padding — ya no depende
   de que el navegador "adivine" el ancho descontando padding/margin, así
   que el padding izq/der puede volver a ser igual (24px/24px) sin volver a
   descentrar nada ni dejar asomar la 4ª card.
   El bottom también baja de 40px a 20px: el botón "Ver lista completa"
   empieza a solo 24px por debajo del row (margin-top del propio botón), así
   que cualquier bleed vertical mayor que eso lo tapa. 20px es lo máximo que
   cabe sin invadir esos 24px. */
@media (max-width: 1200px) {
    .wa-home-row.wa-home-row--3up > * { flex-basis: calc((100% - 24px) / 2); }
}
@media (max-width: 640px) {
    .wa-home-row.wa-home-row--3up { gap: 14px; }
    .wa-home-row.wa-home-row--3up > * { flex-basis: 88%; }

    /* Experiencias, hides, alojamientos y packs: en móvil, una columna, como
       el listado general (.wa-tours-grid). El carrusel al 88 % dejaba estas
       rejillas comportándose distinto según desde qué página se llegara
       (Marc, 2026-08-30). Solo afecta a .wa-tours-grid: las rejillas de
       hotspots relacionados siguen deslizándose. */
    .wa-home-row.wa-home-row--3up.wa-tours-grid {
        display: grid;
        grid-template-columns: 1fr;
        overflow-x: visible;
        scroll-snap-type: none;
        padding-left: 0;
        padding-right: 0;
    }
    .wa-home-row.wa-home-row--3up.wa-tours-grid > * { flex-basis: auto; width: auto; scroll-snap-align: none; }
    /* Sin scroll horizontal no hay nada que deslizar. */
    .wa-home-slider-wrap:has(.wa-tours-grid) .wa-home-slider-btn { display: none !important; }
}
.wa-home-card { position: relative; flex: 0 0 auto; width: 158px; scroll-snap-align: start; text-decoration: none; border-radius: var(--wag-type-home-card-radius, var(--wag-style-tarjeta-portada-radius)); overflow: hidden; background: var(--wa-card, #fff); border: 1px solid var(--wa-line, #eef0f3); display: flex; flex-direction: column; }
.wa-home-card-badge { position: absolute; top: 8px; left: 8px; z-index: 2; font-size: 9.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #5a4300; background: linear-gradient(135deg, #ffd84d, #f5b50a); padding: 3px 8px; border-radius: 7px; box-shadow: 0 2px 8px rgba(180,130,0,.45); }
.wa-home-card-img { display: block; width: 100%; height: 108px; background-size: cover; background-position: center; background-color: #e9eef3; position: relative; overflow: hidden; }
.wa-home-card-img--none { background: linear-gradient(135deg, #cfe0ec, #a9c7da); }
/* Fotos de fondo diferidas: la URL espera en --wa-bg hasta que la tarjeta va a verse (inc/helpers/lazy-bg.php). */
[data-wa-lazybg].is-bg { background-image: var(--wa-bg); }
.wa-home-card--species .wa-home-card-img { height: 120px; }
/* Experience cards: image height matches hide-product — no override, same as base .wa-home-card-img. */
.wa-home-hide-season { position: absolute; top: 8px; left: 8px; z-index: 2; padding: 4px 8px; border-radius: 7px; color: #fff; background: rgba(21,112,66,.9); box-shadow: 0 2px 8px rgba(0,0,0,.18); font-size: 9px; font-weight: 800; letter-spacing: .45px; line-height: 1; text-transform: uppercase; }
.wa-home-card-country { display: inline-flex; align-items: center; margin-top: auto; font-size: var(--wag-text-11); font-weight: 600; color: var(--wa-muted, #6b7280); background: var(--wa-bg2, #f3f4f6); border-radius: 5px; padding: 2px 7px; align-self: flex-start; }
.wa-home-card-body { padding: 9px 11px 11px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
/* CTA button inside home cards (span, not <a>, since card is already <a>) */
.wa-home-card-cta { display: block; text-align: center; margin-top: auto; padding: 6px 10px; background: #2b7cb0; color: #fff !important; border-radius: 7px; font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; transition: background .15s; }
.wa .wa-home-card:hover .wa-home-card-cta { background: #1f5f8a; }
/* Mismo motivo que el menú de cuenta: estas clases sólo fijan color en el
   estado normal, y Astra gana la guerra de especificidad en :hover (su
   `a:hover` alcanza a los hijos). El texto de las cards se oscurecía al pasar
   el ratón — nunca fue el degradado ni el fondo, era esto (Marc, 2026-07-27). */
.wa .wa-home-card:hover .wa-home-card-title   { color: var(--wa-ink, #1a1e24); }
.wa .wa-home-card:hover .wa-home-card-sub     { color: #76828f; }
.wa .wa-home-card:hover .wa-home-card-sci     { color: #8a95a3; }
.wa .wa-home-card:hover .wa-home-card-country { color: var(--wa-muted, #6b7280); }
/* Experience CTA: anchored below the price/country row (row has margin-top:auto) */
.wa-home-card-cta--exp { margin-top: 6px; }
/* En experiences, operador/hotspot sigue inmediatamente al título, como el
   hotspot de los hides. El hueco flexible vive antes del país y el CTA. */
.wa-home-card--hotspot .wa-home-card-sub { margin-top: auto; }
.wa-home-card--experience .wa-home-card-sub { margin-top: 1px; }
.wa-home-card--experience a.wa-home-card-title,
.wa-home-card--experience a.wa-home-card-sub,
.wa-home-card--hotspot a.wa-home-card-title { text-decoration: none; }
/* El país, en el verde de la marca y enlazado — el mismo tratamiento que ya
   tiene en las tarjetas de producto (Marc, 2026-09-16). Antes heredaba el gris
   de la línea y no se veía que fuera un enlace. */
.wa-home-hotspot-country-link { color: var(--wa-accent, #1f7a4d); text-decoration: none; font-weight: 600; }
.wa .wa-home-hotspot-country-link:hover { color: var(--wa-accent, #1f7a4d); text-decoration: underline; }
/* La valoración en la línea de texto: sólo en móvil (ver el bloque de
   <=1024px). En escritorio la lleva la insignia de la foto. */
.wa-home-card-sub-rate { display: none; margin-left: 6px; color: #b8860b; font-weight: 700; white-space: nowrap; }
/* En escritorio la sub va en una línea: categoría · país. */
.wa-home-card-sub-sep { margin: 0 4px; color: #b9c3cf; }
html[data-theme="dark"] .wa-home-card-sub-rate { color: #d4aa55; }

/* La montañita (hotspot) o la casita (alojamiento), delante de la categoría. */
.wa-home-card-sub-ico {
    display: inline-flex; align-items: center; vertical-align: -2px;
    margin-right: 5px; color: #9aa6b4;
}
.wa-home-card-sub-ico svg { display: block; }
.wa-home-card-country-link { text-decoration: none; }
.wa .wa-home-card-country-link:hover { color: #1f5f8a; background: #e6f0f6; }
.wa-home-card--experience .wa-home-card-title,
.wa-home-card--experience .wa-home-experience-source { display: block; overflow: hidden; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.wa-home-card--experience .wa-home-experience-source { margin-top: 1px; color: #2b7cb0; font-size: 11.5px; font-weight: 800; }
.wa .wa-home-card--experience .wa-home-experience-source:hover { color: #1f5f8a; }
/* Precio + país en la misma fila: precio a la izquierda, país a la derecha.
   La fila hereda el hueco flexible que antes tenía el país en solitario, para
   que el CTA siga alineado entre cards con o sin precio/país. */
.wa-home-card--experience .wa-home-card-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: auto;
}
.wa-home-card--experience .wa-home-card-meta-row .wa-home-hide-price,
.wa-home-card--experience .wa-home-card-meta-row .wa-home-card-country{ margin-top: 0; }
/* Same shared verified badge, anchored to the image so title ellipsis can
   never hide it. Cards that also carry the camera stack both at the right. */
.wa-home-card .wa-verified { margin-left: 4px; vertical-align: middle; }
.wa-home-card .wa-verified svg { width: 15px; height: 15px; }
.wa-home-card-img > .wa-verified {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 21;
    margin: 0;
}
.wa-home-card--verified.wa-home-card--is-hide .hotspot-camera-badge { top: 32px; }
.wa-home-card-title { font-size: 13.5px; font-weight: 700; color: var(--wa-ink, #1a1e24); line-height: 1.25; }
.wa-home-card-sub { font-size: 11.5px; color: #76828f; }
.wa-home-country-meta { display: inline-flex; align-items: center; }
.wa-home-country-meta__separator { display: inline-block; margin: 0 4px; }
@media (max-width: 640px) {
    .wa-home-country-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 1px;
    }
    .wa-home-country-meta__separator { display: none; }
}
.wa-home-card-sci { font-style: italic; color: #8a95a3; }
.wa-home-card--hide-product .wa-home-card-title,
.wa-home-card--hide-product .wa-home-hide-name,
.wa-home-card--hide-product .wa-home-hide-location,
.wa-home-card--hide-product .wa-home-hide-hotspot { display: block; overflow: hidden; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.wa-home-card--hide-product .wa-home-hide-location { color: #76828f; font-size: 10.5px; }
.wa-home-card--hide-product .wa-home-hide-name { color: var(--wa-ink, #1a1e24); }
.wa-home-card--hide-product .wa-home-hide-hotspot { margin-top: 1px; color: #2b7cb0; font-size: 11.5px; font-weight: 800; }
.wa .wa-home-card--hide-product .wa-home-hide-location:hover,
.wa .wa-home-card--hide-product .wa-home-hide-hotspot:hover { color: #1f5f8a; }
.wa-home-hide-price { display: block; margin-top: 5px; color: var(--wa-ink, #1a1e24); font-size: var(--wag-text-12); font-weight: 800; }
html[data-theme="dark"] .wa-home-section-title { color: var(--wag-dark-ink); }
html[data-theme="dark"] .wa-home-card { background: var(--wag-dark-surface); border-color: var(--wag-type-home-card-dark-line, var(--wag-style-tarjeta-portada-dark-line)); box-shadow: var(--wag-shadow-14); }
html[data-theme="dark"] .wa-home-card-img { background-color: #11161c; }
html[data-theme="dark"] .wa-home-card-title { color: var(--wag-dark-ink); }
html[data-theme="dark"] .wa-home-card-sub { color: #93a0ab; }
html[data-theme="dark"] .wa-home-card--experience .wa-home-experience-source { color: #72c4e7; }
html[data-theme="dark"] .wa-home-hotspot-country-link,
html[data-theme="dark"] .wa .wa-home-hotspot-country-link:hover { color: #5fc08c; }
html[data-theme="dark"] .wa .wa-home-card-country-link:hover { color: #72c4e7; }
html[data-theme="dark"] .wa-home-card-sub-ico { color: #5a6675; }
html[data-theme="dark"] .wa .wa-home-card-country-link:hover { background: #10283b; }
html[data-theme="dark"] .wa-home-card-sci { color: #8a95a3; }
html[data-theme="dark"] .wa-home-hide-price,
html[data-theme="dark"] .wa-home-card--hide-product .wa-home-hide-name{ color: var(--wag-dark-ink); }
html[data-theme="dark"] .wa-home-card--hide-product .wa-home-hide-hotspot { color: #72c4e7; }
html[data-theme="dark"] .wa .wa-home-card:hover .wa-home-card-title { color: var(--wag-dark-ink); }
html[data-theme="dark"] .wa .wa-home-card:hover .wa-home-card-sub   { color: #93a0ab; }
html[data-theme="dark"] .wa .wa-home-card:hover .wa-home-card-sci   { color: #8a95a3; }
html[data-theme="dark"] .wa-home-card-country {background: #0a1c2e;}

/* Home quick-access cards — "Near me" + "Explore the Atlas" (prominent entries) */
.wa-home-quick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wag-space-12); padding: 4px 16px 0; }
.wa-home-quick-card { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: var(--wag-space-12); min-height: 118px; padding: 15px; border: 0; border-radius: var(--wag-radius-16); cursor: pointer; text-align: left; color: #fff; box-shadow: 0 8px 24px rgba(20,30,45,.16); transition: transform .12s ease; }
.wa-home-quick-card:active { transform: translateY(1px); }
.wa-home-quick-card--near { background: linear-gradient(150deg, #2e7d52, #1f5a3a); }
.wa-home-quick-card--atlas { background: linear-gradient(150deg, #2b6ca8, #1d4a73); }
.wa .wa-home-quick-card:hover,
.wa .wa-home-quick-card:focus-visible {
    color: #fff !important;
    transform: translateY(-2px);
}
.wa .wa-home-quick-card:hover .wa-home-quick-ico,
.wa .wa-home-quick-card:hover .wa-home-quick-title,
.wa .wa-home-quick-card:hover .wa-home-quick-sub,
.wa .wa-home-quick-card:focus-visible .wa-home-quick-ico,
.wa .wa-home-quick-card:focus-visible .wa-home-quick-title,
.wa .wa-home-quick-card:focus-visible .wa-home-quick-sub {
    color: #fff !important;
}
.wa-home-quick-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; background: rgba(255,255,255,.18); color: #fff; }
.wa-home-quick-txt { display: flex; flex-direction: column; gap: 2px; }
.wa-home-quick-title { font-size: 15px; font-weight: 800; letter-spacing: -.2px; }
.wa-home-quick-sub { font-size: 11.5px; opacity: .88; line-height: 1.3; }

/* Full-screen map overlay (Near me / Explore the Atlas) */
.wa-map-overlay { position: fixed; inset: 0; z-index: 100100; /* sobre la barra (100000) */ background: var(--wa-card, #fff); display: flex; flex-direction: column; }
.wa-map-overlay[hidden] { display: none; }
body.wa-map-open { overflow: hidden; }
body.wa-map-open #wa-account-btn-wrap { display: none !important; }
/* ── Cabecera del overlay ──────────────────────────────────────────────────
   Eran 66px de alto con un título de 16px pegado a la izquierda y una × suelta
   a la derecha: dos elementos en los extremos de una barra ancha y nada en
   medio. Ahora es una cabecera de verdad — filete de marca, título y recuento
   — con el mismo vocabulario que el resto del sitio. */
.wa-map-overlay-bar { position: relative; z-index: 1002; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--wag-space-16); min-height: 66px; padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); border-bottom: 1px solid var(--wa-line, #e6ebf0); background: var(--wa-card, #fff); }
/* El filete es el mismo device que .wa-home-section-title::before: 4px con el
   degradado de marca. Ancla el título y da identidad sin añadir nada nuevo. */
.wa-map-overlay-heading { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-left: 13px; }
.wa-map-overlay-heading::before { content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 4px; border-radius: 3px; background: linear-gradient(#4fadd4, #2b7cb0); }
.wa-map-overlay-title { font-size: var(--wag-text-16); font-weight: 800; letter-spacing: -.01em; color: var(--wa-ink, #1a1e24); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-map-overlay-sub { font-size: var(--wag-text-12); font-weight: 600; color: var(--wag-type-map-overlay-sub-ink, var(--wag-style-map-overlay-sub-ink)); }
.wa-map-overlay-sub:empty { display: none; }
/* Solo la ×, sin caja (Marc, 2026-09-07). El cromado se declara igualmente —
   borde, radio, fondo y sombra a cero— porque el carácter &times; iba dentro
   de un <button> y arrastraba el borde y el box-shadow que Astra pone a todo
   botón: no basta con no pedirlos, hay que negarlos. Los 38px se quedan como
   área de pulsación aunque no se vean. */
.wa-map-overlay-close { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 38px; width: 38px; height: 38px; padding: 0; border: 0 !important; border-radius: 0 !important; background: var(--wag-type-map-overlay-close-bg, var(--wag-style-map-overlay-close-bg)) !important; box-shadow: var(--wag-shadow-15) !important; color: var(--wa-ink, #1a1e24); line-height: 0; cursor: pointer; transition: color .15s ease, transform .15s ease; }
.wa .wa-map-overlay-close:hover { background: var(--wag-type-map-overlay-close-hover-bg, var(--wag-style-map-overlay-close-hover-bg)) !important; box-shadow: var(--wag-shadow-15) !important; color: var(--wag-type-map-overlay-close-hover-ink, var(--wag-style-map-overlay-close-hover-ink)); transform: scale(1.08); }
.wa-map-overlay-close:focus-visible { outline: 3px solid var(--wag-type-map-overlay-close-focus-ring, var(--wag-style-map-overlay-close-focus-ring)); outline-offset: 2px; }
.wa-map-overlay-body { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; position: relative; }
/* Default: mapa llena todo, lista oculta */
.wa-map-canvas { flex: 1 1 auto; width: 100%; background: var(--wag-type-map-canvas-bg, var(--wag-style-map-canvas-bg)); }

/* ── Atribución del overlay ────────────────────────────────────────────────
   Las teselas son OpenStreetMap (ODbL) servidas por CARTO: ambas licencias
   exigen el crédito, y el mapa lo tenía desactivado con attributionControl:false.
   Se restituye, pero discreto — mismo tratamiento que ya recibe en el héroe de
   país (.country-hero-banner--map) y en el mapa de especie. Se sitúa abajo a la
   derecha del lienzo; el toggle de la lista es una barra a lo ancho POR DEBAJO
   del canvas, así que no se pisan. */
.wa-map-canvas .leaflet-control-attribution {
    background: rgba(255, 255, 255, 0.62) !important;
    color: rgba(26, 30, 36, 0.46) !important;
    font-size: 10px !important;
    padding: 1px 6px !important;
    backdrop-filter: blur(4px);
    border-radius: 4px 0 0 0;
}
.wa-map-canvas .leaflet-control-attribution a { color: rgba(26, 30, 36, 0.62) !important; }
.wa-map-canvas .leaflet-control-attribution:hover { background: rgba(255, 255, 255, 0.92) !important; }

html[data-theme="dark"] .wa-map-canvas .leaflet-control-attribution {
    background: rgba(0, 0, 0, 0.42) !important;
    color: rgba(255, 255, 255, 0.42) !important;
}
html[data-theme="dark"] .wa-map-canvas .leaflet-control-attribution a { color: rgba(255, 255, 255, 0.56) !important; }
html[data-theme="dark"] .wa-map-canvas .leaflet-control-attribution:hover { background: rgba(0, 0, 0, 0.72) !important; }

/* En claro se mantiene el #e9eef3 de arriba, que va con Voyager. En oscuro se
   iguala al gris de Dark Matter para que al abrir el overlay no dé un destello
   claro mientras cargan las teselas. */
html[data-theme="dark"] .wa-map-canvas { background: var(--wag-type-map-canvas-dark-bg, var(--wag-style-map-canvas-dark-bg)); }

/* Category filter — floating button + dropdown over the top-left of the map */
.wa-map-filter { position: absolute; top: 12px; right: 12px; z-index: 4050; max-width: calc(100% - 24px); }
.wa-map-filter[hidden] { display: none; }
.wa-map-filter-btn { display: inline-flex; align-items: center; gap: var(--wag-space-8); max-width: 100%; border: 1px solid var(--wa-line, #e2e8ef); background: rgba(255,255,255,.96); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--wa-ink, #1a1e24); font-size: var(--wag-text-13); font-weight: 700; line-height: 1; padding: 9px 13px; border-radius: var(--wag-radius-999); cursor: pointer; box-shadow: 0 2px 10px rgba(20,30,45,.16); transition: border-color .15s ease, box-shadow .15s ease; }
.wa .wa-map-filter-btn:hover { border-color: #c2ccd6; }
.wa-map-filter-cur { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-map-filter-chev { flex: 0 0 auto; opacity: .6; transition: transform .2s ease; }
.wa-map-filter.is-open .wa-map-filter-chev { transform: rotate(180deg); }

.wa-map-filter-menu { position: absolute; top: calc(100% + 7px); right: 0; left: auto; min-width: 210px; max-width: 260px; max-height: 60vh; overflow-y: auto; background: var(--wag-surface); border: 1px solid var(--wa-line, #e2e8ef); border-radius: 14px; box-shadow: 0 10px 30px rgba(20,30,45,.20); padding: 6px; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
.wa-map-filter.is-open .wa-map-filter-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
.wa-map-filter-opt { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: transparent; color: var(--wa-ink, #2a3038); font-size: var(--wag-text-13); font-weight: 600; line-height: 1.2; text-align: left; padding: 9px 10px; border-radius: 9px; cursor: pointer; }
.wa .wa-map-filter-opt:hover { background: var(--wa-soft, #f3f6f9); }
.wa-map-filter-opt.is-active { background: var(--wa-ink, #1a1e24); color: #fff; }
.wa-map-filter-optlbl { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-map-filter-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.wa-map-filter-n { flex: 0 0 auto; opacity: .55; font-weight: 700; font-size: var(--wag-text-12); }
.wa-map-filter-opt.is-active .wa-map-filter-n { opacity: .8; }

html[data-theme="dark"] .wa-map-filter-btn { background: rgba(26,31,38,.94); border-color: #2a313a; color: var(--wag-dark-ink); }
html[data-theme="dark"] .wa-map-filter-menu { background: var(--wag-dark-surface); border-color: #2a313a; }
html[data-theme="dark"] .wa-map-filter-opt { color: #dbe2e8; }
html[data-theme="dark"] .wa-map-filter-opt:hover { background: #232a32; }
html[data-theme="dark"] .wa-map-filter-opt.is-active { background: var(--wag-dark-ink); color: #12161b; }
.wa-map-list { flex: 0 0 0; max-height: 0; overflow: hidden !important; padding: 0 !important; }
.wa-map-status { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 4100; background: var(--wag-type-map-status-bg, var(--wag-style-map-status-bg)); color: var(--wag-type-map-status-ink, var(--wag-style-map-status-ink)); font-size: 12.5px; padding: 7px 14px; border-radius: var(--wag-radius-999); max-width: 86%; text-align: center; }
.wa-map-status[hidden] { display: none; }
.wa-map-item { display: flex; align-items: center; gap: var(--wag-space-12); padding: 9px 16px; text-decoration: none; }
.wa .wa-map-item:hover { background: var(--wa-soft, #f3f6f9); }
.wa-map-item-img { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 9px; background-size: cover; background-position: center; background-color: #e9eef3; }
.wa-map-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wa-map-item-t { font-size: var(--wag-text-14); font-weight: 700; color: var(--wa-ink, #1a1e24); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-map-item-c { font-size: var(--wag-text-12); color: #76828f; display: flex; align-items: center; gap: 6px; }
.wa-map-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.wa-map-empty { padding: 24px 16px; text-align: center; color: #8a95a3; }
.wa-map-pop { display: block; width: 160px; text-decoration: none; }
.wa-map-pop-img { display: block; width: 100%; height: 80px; border-radius: var(--wag-radius-8); background-size: cover; background-position: center; margin-bottom: 6px; }
.wa-map-pop-t { display: block; font-weight: 700; font-size: var(--wag-text-13); color: #1a1e24; }
.wa-map-pop-c { display: block; font-size: var(--wag-text-11); color: #76828f; }
html[data-theme="dark"] .wa-map-overlay { background: var(--wag-type-map-overlay-dark-bg, var(--wag-style-map-overlay-dark-bg)); }
html[data-theme="dark"] .wa-map-overlay-bar { border-color: var(--wag-type-map-overlay-bar-dark-line, var(--wag-style-map-overlay-bar-dark-line)); }
html[data-theme="dark"] .wa-map-overlay-bar { background: var(--wag-type-map-overlay-bar-dark-bg, var(--wag-style-map-overlay-bar-dark-bg)); }
html[data-theme="dark"] .wa-map-overlay-close { background: var(--wag-type-map-overlay-close-dark-bg, var(--wag-style-map-overlay-close-dark-bg)) !important; color: var(--wag-type-map-overlay-close-dark-ink, var(--wag-style-map-overlay-close-dark-ink)); }
html[data-theme="dark"] .wa .wa-map-overlay-close:hover { background: var(--wag-type-map-overlay-close-dark-hover-bg, var(--wag-style-map-overlay-close-dark-hover-bg)) !important; color: var(--wag-type-map-overlay-close-dark-hover-ink, var(--wag-style-map-overlay-close-dark-hover-ink)); }
html[data-theme="dark"] .wa-map-overlay-title { color: var(--wag-dark-ink); }
html[data-theme="dark"] .wa-map-overlay-sub { color: var(--wag-type-map-overlay-sub-dark-ink, var(--wag-style-map-overlay-sub-dark-ink)); }
html[data-theme="dark"] .wa-map-item:hover { background: var(--wag-dark-surface); }
html[data-theme="dark"] .wa-map-item-t { color: var(--wag-dark-ink); }
html[data-theme="dark"] .wa-map-item-c { color: #93a0ab; }

/* ── Map overlay: toggle lista colapsable — todos los tamaños ──────────────── */
/* Era una franja gris a lo ancho con una flecha y un recuento: se leía como
   una barra de estado del navegador, no como algo que se pueda pulsar. Sigue
   siendo una barra —el layout la necesita entre el lienzo y la lista— pero
   ahora se comporta como un control: fondo de tarjeta, la flecha dentro de un
   chip redondo como los del mapa, y una etiqueta que dice lo que HACE. El
   recuento se fue a la cabecera, que estaba vacía. */
.wa-map-list-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    flex: 0 0 auto;
    width: 100%;
    padding: 11px 16px;
    border: 0 !important;
    border-top: 1px solid var(--wa-line, #e6ebf0) !important;
    border-radius: 0 !important;
    background: var(--wa-card, #fff) !important;
    box-shadow: var(--wag-shadow-15) !important;
    font-size: var(--wag-text-13);
    font-weight: 700;
    color: var(--wa-ink, #1a1e24);
    cursor: pointer;
    letter-spacing: .02em;
    transition: background .15s ease, color .15s ease;
}
.wa .wa-map-list-toggle:hover { background: var(--wa-soft, #f3f6f9) !important; color: var(--wa-ink, #1a1e24); }
.wa-map-list-toggle-chev {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; width: 22px; height: 22px;
    border-radius: var(--wag-type-map-list-toggle-chev-radius, var(--wag-style-map-list-toggle-chev-radius));
    background: var(--wa-soft, #f3f6f9);
    color: var(--wag-type-map-list-toggle-chev-ink, var(--wag-style-map-list-toggle-chev-ink));
    transition: transform .25s ease, background .15s ease, color .15s ease;
}
.wa .wa-map-list-toggle:hover .wa-map-list-toggle-chev { background: var(--wag-type-map-list-toggle-chev-hover-bg, var(--wag-style-map-list-toggle-chev-hover-bg)); color: var(--wa-ink, #1a1e24); }
.wa-map-overlay.wa-list-open .wa-map-list-toggle-chev { transform: rotate(180deg); }
.wa-map-list-toggle:focus-visible { outline: 3px solid var(--wag-type-map-list-toggle-focus-ring, var(--wag-style-map-list-toggle-focus-ring)); outline-offset: -3px; }
/* Lista abierta: desktop 52/48, mobile 42/58 */
.wa-map-overlay.wa-list-open .wa-map-canvas { flex: 0 0 52%; }
.wa-map-overlay.wa-list-open .wa-map-list   { flex: 1 1 auto; max-height: none; overflow-y: auto !important; -webkit-overflow-scrolling: touch; padding: 6px 0 16px !important; }
@media (max-width: 768px) {
    .wa-map-overlay.wa-list-open .wa-map-canvas { flex: 0 0 42%; }
}
html[data-theme="dark"] .wa-map-list-toggle { background: var(--wag-type-map-list-toggle-dark-bg, var(--wag-style-map-list-toggle-dark-bg)) !important; border-top-color: var(--wag-type-map-list-toggle-dark-topline, var(--wag-style-map-list-toggle-dark-topline)) !important; color: var(--wag-dark-ink); }
html[data-theme="dark"] .wa .wa-map-list-toggle:hover { background: var(--wag-type-map-list-toggle-dark-hover-bg, var(--wag-style-map-list-toggle-dark-hover-bg)) !important; color: var(--wag-type-map-list-toggle-dark-hover-ink, var(--wag-style-map-list-toggle-dark-hover-ink)); }
html[data-theme="dark"] .wa-map-list-toggle-chev { background: var(--wag-type-map-list-toggle-chev-dark-bg, var(--wag-style-map-list-toggle-chev-dark-bg)); color: var(--wag-type-map-list-toggle-chev-dark-ink, var(--wag-style-map-list-toggle-chev-dark-ink)); }
html[data-theme="dark"] .wa .wa-map-list-toggle:hover .wa-map-list-toggle-chev { background: var(--wag-type-map-list-toggle-chev-dark-hover-bg, var(--wag-style-map-list-toggle-chev-dark-hover-bg)); color: var(--wag-type-map-list-toggle-chev-dark-hover-ink, var(--wag-style-map-list-toggle-chev-dark-hover-ink)); }

/* ── Controles de zoom de Leaflet ──────────────────────────────────────────
   Venían con su aspecto de fábrica: dos cuadrados grises pegados a la esquina,
   que no se parecen a nada del sitio. Se les da el mismo lenguaje que al botón
   de filtro que tienen justo enfrente — tarjeta blanca, filo, radio y sombra
   suave — para que los dos controles flotantes del mapa sean la misma familia. */
.wa-map-canvas .leaflet-control-zoom {
    border: 1px solid var(--wa-line, #e2e8ef) !important;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(20,30,45,.16) !important;
}
/* `.leaflet-touch` va en el propio lienzo y Leaflet fija desde ahí un 30px que
   gana a un selector de dos clases. Se nombra la clase para recuperar el mando
   del tamaño en vez de recurrir a !important. */
.wa-map-canvas.leaflet-touch .leaflet-control-zoom a,
.wa-map-canvas .leaflet-control-zoom a {
    width: 34px; height: 34px; line-height: 34px;
    background: rgba(255,255,255,.96);
    color: var(--wa-ink, #1a1e24);
    border: 0;
    font-size: 19px; font-weight: 600;
    transition: background .15s ease, color .15s ease;
}
.wa-map-canvas .leaflet-control-zoom a + a { border-top: 1px solid var(--wa-line, #e2e8ef); }
.wa .wa-map-canvas .leaflet-control-zoom a:hover { background: var(--wa-soft, #f3f6f9); color: var(--wa-ink, #1a1e24); }
.wa-map-canvas .leaflet-control-zoom a.leaflet-disabled { color: #b6c0ca; background: rgba(255,255,255,.96); }
/* Mismos 12px del borde que el botón de filtro de enfrente. */
.wa-map-canvas .leaflet-top .leaflet-control-zoom { margin: 12px 0 0 12px; }
.wa-map-canvas.leaflet-touch .leaflet-control-zoom { border: 1px solid var(--wa-line, #e2e8ef) !important; }
html[data-theme="dark"] .wa-map-canvas .leaflet-control-zoom { border-color: #2a313a !important; box-shadow: 0 2px 10px rgba(0,0,0,.5) !important; }
html[data-theme="dark"] .wa-map-canvas .leaflet-control-zoom a { background: rgba(26,31,38,.96); color: var(--wag-dark-ink); }
html[data-theme="dark"] .wa-map-canvas .leaflet-control-zoom a + a { border-top-color: #2a313a; }
html[data-theme="dark"] .wa .wa-map-canvas .leaflet-control-zoom a:hover { background: #232a32; color: #fff; }
html[data-theme="dark"] .wa-map-canvas .leaflet-control-zoom a.leaflet-disabled { color: #5a656f; background: rgba(26,31,38,.96); }

/* ── Dark mode: popup Leaflet en el mapa home (Near me / Explore Atlas) ───── */
html[data-theme="dark"] .wa-home-map-popup .leaflet-popup-content-wrapper {
    background: #1a1f26 !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    box-shadow: 0 6px 24px rgba(0,0,0,.55) !important;
    border-radius: 10px !important;
}
html[data-theme="dark"] .wa-home-map-popup .leaflet-popup-tip { background: #1a1f26 !important; box-shadow: var(--wag-shadow-15) !important; }
html[data-theme="dark"] .wa-map-pop-t { color: var(--wag-dark-ink); }
html[data-theme="dark"] .wa-map-pop-c { color: #93a0ab; }

/* Home "Recent sightings" community feed */
.wa-home-feed { display: flex; flex-direction: column; }
.wa-home-feed-item { display: flex; align-items: center; gap: var(--wag-space-12); padding: 9px 10px; text-decoration: none; }
.wa .wa-home-feed-item:hover { background: var(--wa-soft, #f3f6f9); }
.wa-home-feed-img { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 11px; background-size: cover; background-position: center; background-color: #e9eef3; }
.wa-home-feed-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wa-home-feed-t { font-size: var(--wag-text-14); font-weight: 700; color: var(--wa-ink, #1a1e24); line-height: 1.3; }
.wa-home-feed-at { font-weight: 500; color: #76828f; }
.wa-home-feed-meta { display: flex; align-items: center; gap: 6px; font-size: var(--wag-text-12); color: #76828f; }
.wa-home-feed-av { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.wa-home-feed-user { font-weight: 600; color: #5a6675; }
.wa-home-feed-ago { color: #8a95a3; }
/* Mismo fallo que las cards: sin fijar en :hover, Astra le gana el color al
   texto del feed (Marc, 2026-07-27). */
.wa .wa-home-feed-item:hover .wa-home-feed-t    { color: var(--wa-ink, #1a1e24); }
.wa .wa-home-feed-item:hover .wa-home-feed-at,
.wa .wa-home-feed-item:hover .wa-home-feed-meta{ color: #76828f; }
.wa .wa-home-feed-item:hover .wa-home-feed-user { color: #5a6675; }
.wa .wa-home-feed-item:hover .wa-home-feed-ago  { color: #8a95a3; }
html[data-theme="dark"] .wa-home-feed-item:hover { background: var(--wag-dark-surface); }
html[data-theme="dark"] .wa-home-feed-t { color: var(--wag-dark-ink); }
html[data-theme="dark"] .wa-home-feed-at,
html[data-theme="dark"] .wa-home-feed-meta{ color: #93a0ab; }
html[data-theme="dark"] .wa-home-feed-user { color: #b9c2cc; }
html[data-theme="dark"] .wa .wa-home-feed-item:hover .wa-home-feed-t    { color: var(--wag-dark-ink); }
html[data-theme="dark"] .wa .wa-home-feed-item:hover .wa-home-feed-at,
html[data-theme="dark"] .wa .wa-home-feed-item:hover .wa-home-feed-meta{ color: #93a0ab; }
html[data-theme="dark"] .wa .wa-home-feed-item:hover .wa-home-feed-user { color: #b9c2cc; }

/* Control Center · Business — featured hotspots manager */
.wa-feat-h { margin: 0 0 4px; }
.wa-feat-intro { color: #5f7f9f; font-size: var(--wag-text-13); margin: 0 0 14px; max-width: 640px; }
.wa-feat-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; margin-bottom: 18px; }
.wa-feat-search { position: relative; flex: 1 1 280px; min-width: 220px; }
.wa-feat-search input, .wa-feat-form > input#wa-feat-note, .wa-feat-form select { width: 100%; padding: 9px 12px; border: 1px solid var(--wa-line, #d7dee6); border-radius: 9px; background: var(--wa-card, #fff); color: var(--wa-ink, #1a1e24); font-size: var(--wag-text-14); }
.wa-feat-form > input#wa-feat-note { flex: 1 1 200px; min-width: 160px; }
.wa-feat-form select { flex: 0 0 140px; }
.wa-feat-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; background: var(--wa-card, #fff); border: 1px solid var(--wa-line, #e6ebf0); border-radius: 10px; box-shadow: 0 12px 30px rgba(20,30,45,.16); overflow: hidden; }
.wa-feat-results[hidden] { display: none; }
.wa-feat-opt { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 9px 12px; font-size: var(--wag-text-14); color: var(--wa-ink, #1a1e24); cursor: pointer; }
.wa .wa-feat-opt:hover { background: var(--wa-soft, #f3f6f9); }
.wa-feat-opt em { color: #8a95a3; font-style: normal; font-size: var(--wag-text-12); }
.wa-feat-none { padding: 10px 12px; color: #8a95a3; }
.wa-feat-list { display: flex; flex-direction: column; gap: var(--wag-space-8); }
.wa-feat-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--wa-line, #eef0f3); border-radius: 10px; background: var(--wa-card, #fff); }
.wa-feat-row.is-expired { opacity: .55; }
.wa-feat-row-name { font-weight: 700; color: var(--wa-ink, #1a1e24); }
.wa-feat-row-meta { color: #8a95a3; font-size: 12.5px; margin-left: auto; }
.wa-feat-remove { line-height: 1; }
.wa-feat-empty { color: #8a95a3; }

/* ═══════════════════════════════════════════════════════════════════════════
   HOME — premium polish (WildAtlas style)
   ═══════════════════════════════════════════════════════════════════════════ */

/* The home uses the shared .wa-topbar-search component above in every state. */

/* Section rhythm + premium headers (accent bar) */
.wa-home-sections .wa-home-section { margin-top: 30px; }
.wa-home-sections .wa-home-section:first-child { margin-top: 16px; }
.wa-home-section-title { font-size: var(--wag-text-18); font-weight: 800; letter-spacing: -.3px; position: relative; padding-left: 12px; }
.wa-home-section-title::before { content: ''; position: absolute; left: 0; top: 3px; bottom: 3px; width: 4px; border-radius: 3px; background: linear-gradient(#4fadd4, #2b7cb0); }

/* Cards — sin box-shadow, hover lift sutil (sin zoom de imagen) */
.wa-home-row { scroll-padding-left: 16px; gap: 13px; }
.wa-home-card { box-shadow: var(--wag-shadow-15) !important; transition: transform .16s ease; }
.wa .wa-home-card:hover { transform: translateY(-3px); box-shadow: var(--wag-shadow-15) !important; }

/* ══ HOME MÓVIL — densidad de carrusel tipo Booking ═══════════════════════════
   Marc, 2026-08-25. Portado desde el banco de pruebas /home-mobile-prueba/.
   SOLO móvil (<=1024px): la rejilla de 4 cards de escritorio no se toca.

   Medido en el móvil real de cada sitio a 375px (no estimado):
     Booking · propiedades  189px + gap 12 → 1,79 cards visibles
     Booking · destinos     123px + gap 12 → 2,66
     Airbnb  · alojamientos 158px + gap 12 → 2,06
   La home iba a 158px fijos → 1,69, por debajo de los dos.

   El ancho es FLUIDO a propósito: con un ancho fijo la densidad sólo cuadra en
   un tamaño de pantalla concreto — a 427px la 3ª card asomaba 9px y parecía un
   error de maquetación. Con calc se mantiene la proporción en cualquier móvil.

   Se excluye .wa-home-row--3up: esa variante es de las rejillas de ficha
   (inc/helpers/related-grid.php) y tiene su propio ajuste de scroll-padding. */
@media (max-width: 1024px) {
    .wa-home-sections .wa-home-row:not(.wa-home-row--3up) {
        gap: var(--wag-space-12);
        scroll-padding-left: 16px;
    }
    /* --cards vive en la CARD, no en la fila: así no hace falta :has() para
       distinguir las filas de tiles de las de producto. */
    .wa-home-sections .wa-home-row:not(.wa-home-row--3up) > .wa-home-card {
        --cards: 1.79;
        --w: calc((100vw - 16px) / var(--cards) - 12px);
        flex: 0 0 var(--w);
        width: var(--w);
    }
    /* Especies y países son tiles: sólo nombre, la foto no vende. Card
       estrecha y más escaneable, igual que los destinos de Booking.
       Mismo :not() que la regla de arriba a propósito: sin él son 3 clases
       contra 4 y la densidad de producto ganaba por especificidad. */
    .wa-home-sections .wa-home-row:not(.wa-home-row--3up) > .wa-home-card--species,
    .wa-home-sections .wa-home-row:not(.wa-home-row--3up) > .wa-home-card--country { --cards: 2.66; }

    /* aspect-ratio en vez de height fija: si la card es fluida, la imagen
       tiene que escalar con ella o se deforma el encuadre. */
    .wa-home-sections .wa-home-card .wa-home-card-img { height: auto; aspect-ratio: 4 / 3; }
    .wa-home-sections .wa-home-card--species .wa-home-card-img,
    .wa-home-sections .wa-home-card--country .wa-home-card-img { aspect-ratio: 5 / 4; }

    /* Fuera el botón "View hide / View experience": 29px + 6px de margen en
       CADA card, y la imagen y el título ya enlazan al mismo sitio. Ni Airbnb
       ni Booking ponen CTA dentro de una card de carrusel. */
    .wa-home-sections .wa-home-card-cta { display: none; }

    /* Sin margin-top:auto. Ese "auto" empujaba el subtítulo/país al fondo de la
       card y, como la altura la marca la card más alta de la fila, dejaba un
       agujero visible en medio (en "Trending hotspots" y "Where to Stay" era lo
       más evidente). El contenido va pegado al título y lo que sobre queda
       abajo, que se lee como margen y no como error. */
    .wa-home-sections .wa-home-card .wa-home-card-sub,
    .wa-home-sections .wa-home-card .wa-home-card-country { margin-top: 0; }

    /* Títulos a UNA línea con puntos suspensivos: al ir a dos líneas
       desnivelaban unas cards contra otras dentro de la misma fila. */
    .wa-home-sections .wa-home-card .wa-home-card-title {
        display: block; min-width: 0;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    /* ── Recent sightings — fila tipo Booking ────────────────────────────────
       Medido antes: alturas de 70 a 117px (67% de variación) porque especie +
       "at hotspot" + autor + fecha + badge se peleaban por 375px y rompían
       hasta en tres líneas ("· 3" / "semanas" / "ago"). Ahora cada dato tiene
       su propia línea de una sola altura y el badge sale del flujo, así que
       todas las filas miden lo mismo. Patrón de la card horizontal de Booking
       (imagen izquierda, texto derecha). Sólo CSS: el markup no cambia. */
    .wa-home-feed-item {
        display: flex; align-items: center; gap: var(--wag-space-12);
        padding: 12px; min-height: 108px;
    }
    .wa-home-feed-img {
        flex: 0 0 84px; width: 84px; height: 84px;
        border-radius: 10px; background-size: cover; background-position: center;
    }
    .wa-home-feed-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    /* padding-right sólo en el título: es la única línea que convive con el
       badge. La meta y el autor recuperan el ancho completo. */
    .wa-home-feed-t {
        display: block; padding-right: 74px;
        font-size: 15px; font-weight: 700; line-height: 1.25;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .wa-home-feed-at {
        display: block; padding-right: 0;
        font-size: 12.5px; font-weight: 400; color: var(--wa-muted, #6c7683);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .wa-home-feed-meta { display: flex; align-items: center; gap: 6px; min-width: 0; }
    .wa-home-feed-av { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 18px; }
    .wa-home-feed-user, .wa-home-feed-ago {
        font-size: var(--wag-text-12); color: var(--wa-muted, #6c7683);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .wa-home-feed-badge { position: absolute; right: 12px; top: 12px; }
}

/* Recent sightings — boxed list + Bird/Mammal badge on the right */
.wa-home-feed { gap: 0; margin: 0 16px; padding: 4px; background: var(--wa-card, #fff); border: 1px solid var(--wa-line, #eef0f3); border-radius: var(--wag-radius-16); box-shadow: 0 4px 16px rgba(20,30,45,.06); overflow: hidden; }
.wa-home-feed-item { border-radius: var(--wag-radius-12); }
.wa-home-feed-body { flex: 1; }
.wa-home-feed-badge { flex: 0 0 auto; align-self: center; }
html[data-theme="dark"] .wa-home-feed { background: var(--wag-dark-surface); border-color: #2a313a; box-shadow: var(--wag-shadow-14); }

/* Metrics — premium boxed credibility strip (now at the bottom of the home) */
.wa-home-sections .wa-home-metrics { margin: 30px 16px 4px; padding: 18px 16px; gap: 14px 22px; background: var(--wa-card, #fff); border: 1px solid var(--wa-line, #eef0f3); border-radius: var(--wag-radius-16); box-shadow: 0 4px 16px rgba(20,30,45,.06); }
html[data-theme="dark"] .wa-home-sections .wa-home-metrics { background: var(--wag-dark-surface); border-color: #2a313a; box-shadow: var(--wag-shadow-14); }

/* Featured manager — "Revoke" button (replaces the × icon) */
.wa-feat-remove { border: 1px solid #e3c0bb; background: transparent; color: #c0563f; font-size: var(--wag-text-12); font-weight: 700; padding: 5px 11px; border-radius: var(--wag-radius-8); cursor: pointer; }
.wa .wa-feat-remove:hover { background: #fbeeec; }

/* Recent community photos — carousel of user uploads with ❤ likes (reuses .wa-gal-like) */
.wa-home-photos-wrap { padding: 0; }
.wa-home-sections .wa-home-card--experience :is(.hotspot-badges,.wa-home-card-badge,.wa-verified){display:none!important}

/* ════════════════════════════════════════════════════════════════════
   HOME — HOTSPOT CARDS: overlays
   Mobile: solo badges de categoría, estilo propio.
   Desktop: todos los overlays activos.
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   HOME — HOTSPOT CARDS: overlays
   Mobile: solo badges de categoría, estilo mobile propio.
   Desktop: todos los overlays.
   ════════════════════════════════════════════════════════════════════ */

/* Mobile: ocultar estrellas y cámara (excepto hides — la cámara se re-habilita abajo) */
.wa-home-card--hotspot .hotspot-rating,
.wa-home-card--hotspot .hotspot-camera-badge{ display: none; }
/* La MISMA insignia pequeña que la tarjeta de sitio (Marc, 2026-09-16): a 5px
   del borde, estrellas de 12 y recuento de 11. La altura fija de 34px ya no
   hace falta — el caso «sin recuento» desapareció al dejar de pintarse cuando
   nadie ha votado. */
.wa-home-card--hotspot .hotspot-rating {
    box-sizing: border-box;
    top: 5px; left: 5px;
    gap: 1px; padding: 4px 9px;
    background: var(--wag-type-hotspot-rating-bg, var(--wag-style-hotspot-rating-bg));
    white-space: nowrap;
}
.wa-home-card--hotspot .hotspot-rating .star,
.wa-home-card--hotspot .hotspot-rating .star svg { width: 12px; height: 12px; }
.wa-home-card--hotspot .hotspot-rating-count { margin-left: 4px; font-size: var(--wag-text-11); font-weight: 700; color: var(--wag-type-hotspot-rating-count-ink, var(--wag-style-hotspot-rating-count-ink)); }
/* Título a una línea con puntos suspensivos, como en la tarjeta de sitio: un
   nombre largo descuadraba la fila del carrusel. */
.wa-home-card--hotspot .wa-home-card-title {
    display: block;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Hides en mobile: mostrar icono cámara — círculo perfecto (override padding asimétrico del base) */
.wa-home-card--is-hide .hotspot-camera-badge {
    display: flex;
    padding: 6px;
    border-radius: var(--wag-type-hotspot-camera-badge-radius, var(--wag-style-hotspot-camera-badge-radius));
}

/* Mobile: badges de categoría — solo el PRIMERO (la categoría por defecto) */
.wa-home-card--hotspot .hotspot-badges,
.wa-home-card--experience .hotspot-badges {
    position: absolute;
    bottom: 7px;
    left: 7px;
    right: 7px;
    display: flex;
    flex-wrap: nowrap;
    gap: 3px;
    z-index: 2;
}
/* Ocultar todos los badges excepto el primero en mobile */
.wa-home-card--hotspot .hotspot-badge:not(:first-child),
.wa-home-card--experience .hotspot-badge:not(:first-child) { display: none; }
.wa-home-card--hotspot .hotspot-badge,
.wa-home-card--experience .hotspot-badge {
    display: inline-flex;
    align-items: center;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 99px;
    background: rgba(14,20,32,.65);
    color: rgba(255,255,255,.95);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.12);
    line-height: 1;
}

/* ════════════════════════════════════════════════════════════════════
   HOME — SLIDER Booking-style: botón círculo perfecto en el borde del row
   ════════════════════════════════════════════════════════════════════ */
.wa-home-slider-wrap { position: relative; display: flow-root; }
/* Botones ocultos en mobile — solo desktop los muestra via @media */
/* Marc, 2026-08-17 (3a vuelta): el slider de top fauna (.country-species-
   wrapper .wa-home-slider-wrap, sin tocar en esta ronda) ya resuelve el
   margen de las flechas con margin:0 10px en su wrap — ni padding de 28px
   ni nada más. Se replica EXACTO ese valor para Experiences/Hides/Stays/
   Nearby en vez de inventar un padding distinto. */
.wa-home-slider-wrap--pad { margin: 0 10px; isolation: isolate; }
/* El margen de 10px es para las flechas, y las flechas sólo existen en
   escritorio (≥1025px). En móvil y tablet se quedaba el margen sin flechas y
   el carrusel empezaba 10px más adentro que el título, los filtros y el resto
   de tarjetas (medido en /country/spain/: 30 frente a 20; Marc, 2026-10-01). */
@media (max-width: 1024px) {
    .country-species-wrapper .wa-home-slider-wrap,
    .wa-home-slider-wrap--pad { margin-left: 0; margin-right: 0; }
}
.wa-home-slider-btn { display: none; }
/* Reset total para neutralizar el min-height/padding de Astra en <button> */
.wa-home-slider-btn,
.wa-home-slider-btn:focus,
.wa-home-slider-btn:active {
    padding: 0 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    max-height: none !important;
    line-height: 0 !important;
    outline: none;
}

/* ════════════════════════════════════════════════════════════════════
   HOME — DESKTOP PREMIUM (≥1025px)
   Secciones centradas 1240px · 4-card flex slider + flechas · Badges
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
    /* Badge Featured: esquina INFERIOR IZQUIERDA de la imagen */
    .wa-home-card-badge { top: auto; bottom: 8px; left: 8px; }

    /* Overlays completos en desktop */
    .wa-home-card--hotspot .hotspot-rating       { display: flex; }
    .wa-home-card--hotspot .hotspot-camera-badge { display: flex; padding: 6px; border-radius: var(--wag-type-hotspot-camera-badge-radius, var(--wag-style-hotspot-camera-badge-radius)); }
    /* Desktop: badges oscuros (estilo proyecto) */
    .wa-home-card--hotspot .hotspot-badge,
    .wa-home-card--experience .hotspot-badge {
        background: rgba(14,20,32,.72);
        color: rgba(255,255,255,.92);
        border-color: rgba(255,255,255,.10);
    }


    /* Secciones con padding lateral */
    .wa-home-sections .wa-home-section { margin-top: 32px; padding: 0 28px; }
    .wa-home-sections .wa-home-section:first-child { margin-top: 20px; }
    .wa-home-section-title { font-size: 19px; padding-left: 14px; }
    .wa-home-feed { margin-inline: 0; }

    /* ── Slider Booking-style: círculo perfecto en el borde del row ── */
    .wa-home-slider-wrap { overflow: visible; }
    /* Marc, 2026-08-17 (2a vuelta): se revierte el padding extra --pad de la
       1a vuelta. .place-card (hotspot) y .wa-section (country/species) YA
       traen 20px de padding propio — exactamente el mismo que usa el slider
       de top fauna/species (que no lleva ningún padding extra en su wrap y
       se ve bien). Añadir +28px encima separaba la flecha de la card y
       dejaba un hueco/línea rara antes de la flecha. Mismo margen que el
       slider de top fauna = ninguno extra, solo el del contenedor. */
    .wa-home-slider-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 42%;          /* visual center en la imagen, no en toda la card */
        transform: translateY(-50%);
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
        padding: 0 !important;
        line-height: 0 !important;
        border-radius: 50% !important;
        background: var(--wag-surface);
        border: 1px solid rgba(20,30,45,.12);
        box-shadow: 0 1px 6px rgba(20,30,45,.14), 0 0 0 1px rgba(20,30,45,.04);
        color: #1a1e24;
        cursor: pointer;
        z-index: 4;
        transition: box-shadow .15s, transform .1s;
    }
/* Astra's generic button hover was stripping the white circle, leaving the
   card underneath to look selectable. Keep these navigation controls opaque
   and above the scrolling cards in every interactive state. */
.wa .wa-home-slider-btn:hover,
.wa .wa-home-slider-btn:focus,
.wa .wa-home-slider-btn:active {
        background: #ffffff !important;
        color: #1a1e24 !important;
        border-color: rgba(20,30,45,.18) !important;
        opacity: 1 !important;
        box-shadow: 0 4px 16px rgba(20,30,45,.22), 0 0 0 1px rgba(20,30,45,.08);
        transform: translateY(-50%) scale(1.08);
        pointer-events: auto !important;
        user-select: none;
        -webkit-user-select: none;
    }
    /* Home rows have 4px above and 10px below the cards. */
    .wa-home-sections .wa-home-slider-btn { top: calc(50% - 3px); }
    .wa-home-slider-btn svg { display: block !important; pointer-events: none; flex-shrink: 0; width: 18px; height: 18px; }
    .wa-home-slider-prev { left: -20px; }
    .wa-home-slider-next { right: -20px; }
    /* Oscuro: el círculo pasa a la paleta de los controles del mapa (#1a1f26,
       borde #2a313a). !important porque el blanco de arriba también lo lleva. */
    html[data-theme="dark"] .wa-home-slider-btn,
    html[data-theme="dark"] .wa .wa-home-slider-btn:focus,
    html[data-theme="dark"] .wa .wa-home-slider-btn:active {
        background: #1a1f26 !important; color: #e8edf1 !important;
        border-color: #2a313a !important; box-shadow: 0 2px 10px rgba(0,0,0,.5);
    }
    html[data-theme="dark"] .wa .wa-home-slider-btn:hover {
        background: #232a32 !important; color: #fff !important;
        border-color: #3a4450 !important; box-shadow: 0 4px 16px rgba(0,0,0,.6);
    }

    /* ── 4 cards visibles + overflow horizontal ──────────────────────── */
    .wa-home-row {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: var(--wag-space-16);
        padding: 4px 0 10px;
        /*
         * El scroll-padding TIENE que valer lo mismo que el padding-left real.
         * Aquí en escritorio el padding lateral es 0, pero la regla compartida
         * de arriba dejaba scroll-padding-left:16px, así que el navegador
         * snapeaba cada tarjeta 16px por dentro del borde: en reposo la fila
         * arrancaba cuadrada con el título de la sección y, en cuanto pulsabas
         * una flecha, todo se desplazaba 16px y ya no volvía a cuadrar (Marc,
         * 2026-09-15). Es el mismo fallo que ya estaba documentado y resuelto
         * en .wa-home-row--3up, que iguala los suyos a sus 24px de padding.
         */
        scroll-padding-left: 0;
        scrollbar-width: none;
    }
    .wa-home-row::-webkit-scrollbar { display: none; }
    .wa-home-card {
        flex: 0 0 calc((100% - 3 * 16px) / 4);
        width: calc((100% - 3 * 16px) / 4);
        scroll-snap-align: start;
        border-radius: var(--wag-radius-16);
    }
    .wa-home-card-img { height: 180px; }
    .wa-home-card--hotspot .wa-home-card-img { height: 200px; }
    .wa-home-card--species .wa-home-card-img { height: 190px; }
    .wa-home-card-body { padding: 12px 14px 14px; gap: var(--wag-space-4); }
    .wa-home-card-title { font-size: 15px; }
    .wa-home-card-sub { font-size: 12.5px; }
.wa .wa-home-card:hover { transform: translateY(-4px); box-shadow: var(--wag-shadow-15) !important; }

    /* Feeds: carrusel libre sin tamaño fijo */
    .wa-home-feed-wrap .wa-home-row { gap: var(--wag-space-12); padding: 4px 0 8px; }
    .wa-home-feed-wrap .wa-home-card { flex: 0 0 220px; width: 220px; }

    /* Métricas */
    .wa-home-sections .wa-home-metrics { margin: 32px 28px 8px; padding: 20px 28px; }
}