/* =============================================================
   SPECIES — single-species.php (birds + mammals)
   ============================================================= */

.species-container {
    width: 100%;
    margin: auto;
    padding-top: 0;
}

.species-card {
    background: var(--wag-surface);
    box-shadow: var(--wag-shadow-6);
    padding: 0 20px 20px;
}

.species-title {
    font-size: 72px;
    font-weight: 800;
    letter-spacing: -2px;
    line-height: 0.95;
    color: #111;
    margin-bottom: 18px;
    text-transform: capitalize;
}

.species-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 60px;
}

.species-description {
    font-size: var(--wag-text-18);
    line-height: 1.8;
    color: #333;
    /* Eran 80px de margen inferior: espacio muerto puro dentro de una fila de
       rejilla, donde el alto ya lo marca la columna más alta (el mapa). */
    margin-bottom: 24px;
}

/* Read-more widget inside species description — no card chrome, just collapse behaviour */
.wa-species-desc { position: relative; }
/* El recorte de 180px dejaba la descripción ~80px más corta que el mapa de
   distribución, y de ahí el hueco que se veía a su derecha (Marc, 2026-07-26).
   A 250px las dos columnas terminan casi a la vez y además se lee más texto
   antes de tener que pulsar "Read more" — el hueco se cierra dando contenido,
   no empujando el bloque hacia abajo (eso solo movería el hueco arriba).
   Solo escritorio: en móvil no hay dos columnas que alinear y 180px es el
   recorte que ya funcionaba. */
.wa-species-desc .wa-hotspot-desc-body { max-height: 180px; }
@media (min-width: 901px) {
    .wa-species-desc .wa-hotspot-desc-body { max-height: 250px; }
}
.wa-species-desc .wa-hotspot-desc-body p {
    font-size: 17px;
    line-height: 1.8;
    color: var(--wa-ink, #1a2230);
}
/* Override the gradient fade to match the species page background */
.wa-species-desc .wa-hotspot-desc-body:not(.is-expanded)::after {
    background: linear-gradient(to bottom, transparent, var(--wa-bg, #fff));
}
html[data-theme="dark"] .wa-species-desc .wa-hotspot-desc-body:not(.is-expanded)::after {
    background: linear-gradient(to bottom, transparent, #111519);
}

/* Hero */

.species-hero-banner {
    position: relative;
    margin-left: -20px;
    margin-right: -20px;
    height: 550px;
    overflow: hidden;
    margin-top: 0 !important;
}

.species-hero-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.species-hero-overlay {
    position: absolute;
    inset: 0;
    background: var(--wag-type-species-hero-overlay-bg, var(--wag-style-species-hero-overlay-bg));
}

.species-hero-content {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 0 45px 38px;
    text-align: left;
}

.species-hero-content .species-title {
    margin: 0 0 10px;
    color: var(--wag-type-species-title-ink, var(--wag-style-species-season-english-ink));
    font-size: clamp(42px, 5vw, 72px);
    line-height: 0.92;
    font-weight: 800;
    letter-spacing: -2px;
    max-width: 75%;
    text-wrap: balance;
    text-shadow: 0 3px 20px rgba(0,0,0,0.5);
}

.species-hero-content .species-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    margin: 0;
    text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

.species-hero-content .scientific-name {
    color: var(--wag-type-scientific-name-ink, var(--wag-style-category-name-ink)) !important;
    font-style: normal;
    font-size: var(--wag-text-18);
    font-weight: 400;
    opacity: 0.82;
}

.species-hero-content .spanish-name {
    color: var(--wag-type-spanish-name-ink, var(--wag-style-category-name-ink)) !important;
    font-size: var(--wag-text-18);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.3px;
    opacity: 0.68;
}

.species-hero-content .separator {
    display: inline;
    color: rgba(255,255,255,0.40);
    font-size: var(--wag-text-18);
    padding: 0 8px;
}

.photo-credit {
    position: absolute;
    bottom: 10px;
    right: 20px;
    font-size: var(--wag-text-12);
    color: var(--wag-type-photo-credit-ink, var(--wag-style-photo-credit-ink));
    text-decoration: none;
    background: rgba(0,0,0,0.35);
    padding: 4px 8px;
    border-radius: var(--wag-type-photo-credit-radius, var(--wag-style-photo-credit-radius));
    backdrop-filter: blur(4px);
    transition: 0.2s ease;
    z-index: 9999;
}

.wa .photo-credit:hover {
    color: var(--wag-type-photo-credit-hover-ink, var(--wag-style-photo-credit-hover-ink));
    background: var(--wag-type-photo-credit-hover-bg, var(--wag-style-photo-credit-hover-bg));
}

.photo-credit a { white-space: nowrap; }

/* Rich attribution stays compact in the hero.  Opening it exposes the
   complete CC trail (author, licence and source) without crowding the image. */
.photo-credit--rich { max-width: min(90vw, 520px); line-height: 1.4; }
.photo-credit--rich .wa-photo-credit-details { position: relative; }
.photo-credit--rich summary {
    display: block;
    max-width: clamp(120px, 20vw, 260px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
    list-style: none;
}
.photo-credit--rich summary::-webkit-details-marker { display: none; }
.photo-credit--rich .wa-photo-credit-full {
    display: none;
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    width: max-content;
    max-width: min(90vw, 520px);
    padding: 7px 9px;
    border-radius: var(--wag-type-photo-credit-full-radius, var(--wag-style-photo-credit-full-radius));
    background: var(--wag-type-photo-credit-full-bg, var(--wag-style-photo-credit-full-bg));
    line-height: 1.4;
}
.photo-credit--rich details[open] .wa-photo-credit-full { display: block; }
.photo-credit--rich .wa-photo-credit-full a {
    color: rgba(255,255,255,0.9);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.wa .photo-credit--rich .wa-photo-credit-full a:hover { color: #fff; }
.photo-credit--rich .wa-photo-credit-full .sep { opacity: .55; margin: 0 1px; }

/* Mobile: very discreet, tiny, single-line with ellipsis */
@media (max-width: 768px) {
    .photo-credit {
        font-size: 9px;
        padding: 2px 6px;
        border-radius: var(--wag-radius-4);
        opacity: 0.7;
        bottom: 8px;
        right: 12px;
        background: var(--wag-type-photo-credit-bg, var(--wag-style-photo-credit-bg));
        backdrop-filter: none;
    }
    .photo-credit--rich {
        max-width: min(55vw, 220px);
        line-height: 1.1;
    }
    .photo-credit--rich summary { max-width: min(55vw, 220px); }
    .photo-credit--rich .wa-photo-credit-full {
        max-width: min(78vw, 300px);
        padding: 6px 8px;
        line-height: 1.3;
    }
}

/* ============================================================
   CANONICAL FILTER DROPDOWN (.wa-dropdown) — every filter, site-wide
   Rendered by wa_filter_dropdown(), wired by wa-filters.js.
   ============================================================ */
.wa-dropdown { position: relative; display: inline-block; }
.wa-dropdown-trigger {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid #d4dbe3; background: var(--wag-surface); border-radius: var(--wag-radius-999);
    padding: 7px 14px; font-size: var(--wag-text-13); font-weight: 600; color: var(--wag-type-filter-dropdown-ink, var(--wag-style-filter-dropdown-ink)); cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
/* Astra imprime en su CSS inline `button:hover { background-color: <color del
   tema> }`. Esta regla fijaba borde y color pero NO fondo, así que el azul de
   Astra ganaba por omisión y todos los filtros del sitio parpadeaban en azul al
   pasar por encima. Fijar el fondo es lo único que faltaba (Marc, 2026-09-20). */
.wa .wa-dropdown-trigger:hover,
.wa .wa-dropdown-trigger:focus,
.wa .wa-dropdown-trigger:focus-visible,
.wa .wa-dropdown-trigger:active { border-color: var(--wag-type-filter-dropdown-hover-line, var(--wag-style-filter-dropdown-hover-line)); background: var(--wag-surface); color: var(--wag-type-filter-dropdown-hover-ink, var(--wag-style-filter-dropdown-hover-ink)); }
html[data-theme="dark"] .wa .wa-dropdown-trigger:hover,
html[data-theme="dark"] .wa .wa-dropdown-trigger:focus,
html[data-theme="dark"] .wa .wa-dropdown-trigger:active { background: var(--wag-dark-surface); color: var(--wag-type-filter-dropdown-dark-hover-ink, var(--wag-style-filter-dropdown-dark-hover-ink)); }
.wa-dropdown.is-open .wa-dropdown-trigger { border-color: var(--wag-type-filter-dropdown-line, var(--wag-style-filter-dropdown-line)); box-shadow: var(--wag-type-filter-dropdown-shadow, var(--wag-style-filter-dropdown-shadow)); }
.wa-dropdown-trigger svg { opacity: .6; flex-shrink: 0; }
.wa-dropdown-label { white-space: nowrap; }
.wa-dd-chevron { transition: transform .15s; }
.wa-dropdown.is-open .wa-dd-chevron { transform: rotate(180deg); }
.wa-dropdown-menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
    min-width: 100%; width: max-content; max-width: 280px;
    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;
    display: none;
}
.wa-dropdown.is-open .wa-dropdown-menu { display: block; }

/* ── Desplegables largos (país, mes, especie…) ──────────────────────────────
   Diez opciones y el resto con scroll. La barra de scroll se oculta y en su
   lugar queda una flechita fija abajo: sin ella, un menú cortado a diez parece
   un menú de diez.

   Solo escritorio: a ≤700px wa-filters.js se lleva el menú a <body> y lo abre a
   pantalla completa, donde no hay nada que recortar.

   La marca `wa-dd-scrolls` la pone wa_filter_dropdown() cuando hay más de diez
   opciones, así que el menú corto no paga ni el hueco de la pista. */
@media (min-width: 701px) {
    .wa-dropdown-menu.wa-dd-scrolls {
        max-height: 380px;           /* ~10 opciones de 38px */
        overflow-y: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .wa-dropdown-menu.wa-dd-scrolls::-webkit-scrollbar { width: 0; height: 0; display: none; }
    .wa-dd-more {
        position: sticky; bottom: 0; z-index: 2;
        display: flex; align-items: flex-end; justify-content: center;
        height: 34px; margin-top: -34px;   /* flota sobre la última opción, no ocupa sitio */
        pointer-events: none;
        color: #7b8794;
        background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 75%);
        transition: opacity .15s;
    }
    .wa-dropdown-menu.is-end .wa-dd-more { opacity: 0; }
    html[data-theme="dark"] .wa-dd-more {
        color: #93a0ab;
        background: linear-gradient(to bottom, rgba(26,31,38,0) 0%, #1a1f26 75%);
    }
}
/* En móvil el menú va a pantalla completa: ni recorte, ni pista. */
.wa-dd-fullscreen .wa-dd-more { display: none; }
@media (max-width: 700px) { .wa-dd-more { display: none; } }
.wa-dd-head { display: none; }
.wa-dropdown-option {
    display: block; width: 100%; text-align: left; border: 0; background: var(--wag-surface);
    padding: 9px 14px; font-size: 13.5px; color: #1a1e24; cursor: pointer; white-space: nowrap;
}
/* Keep the option's original text colour on hover (beats theme button:hover). */
.wa-dropdown-option:hover,
.wa .wa-dropdown-menu .wa-dropdown-option:hover { background: rgba(26,30,36,.055); color: #1a1e24; }
.wa-dropdown-option.is-active,
.wa-dropdown-menu .wa-dropdown-option.is-active,
.wa .wa-dropdown-option.is-active:hover { background: #1a1e24; color: #fff; font-weight: 700; }

/* Filter bar (heading + dropdown) shared by tours/hides sections */
.wa-tours-filterbar {
    display: flex; align-items: center;
    flex-wrap: wrap; gap: var(--wag-space-12); margin-bottom: 15px;
}
.wa-section-heading {
    margin: 0; font-size: var(--wag-text-12); font-weight: 700; letter-spacing: 2.2px;
    text-transform: uppercase; color: var(--wag-type-section-heading-ink, var(--wag-style-section-heading-ink));
}
/* Reviews sort now uses the canonical dropdown */

/* ── Hides de país: bloque híbrido ────────────────────────────────────────────
   Debajo de los hides reservables van los lugares etiquetados que aún no tienen
   producto (country-hides.php). El título se quedaba pegado a las dos rejillas
   —medido: 0px de hueco arriba y 0 abajo— porque .wa-section-heading nace con
   margin: 0 para vivir dentro de una .wa-tours-filterbar, y aquí va suelto.
   La línea marca el cambio de nivel: lo de arriba se reserva, lo de abajo aún
   no. (Marc, 2026-09-14) */
.wa-co-hides-more {
    /* Tipografía copiada de .wa-section-heading, pero SIN esa clase: en móvil
       se ocultan todos los .wa-section-heading que viven en una sección con
       data-nav-label (:8506), porque la sección ya pinta su título arriba.
       Este no es el título de la sección — es un divisor dentro de ella — así
       que llevarlo aparte es más honesto que pelear con aquel !important. */
    margin: 30px 0 14px;
    padding-top: 22px;
    border-top: 1px solid var(--wa-line, #e6eaef);
    font-size: var(--wag-text-12); font-weight: 700; letter-spacing: 2.2px;
    text-transform: uppercase; color: var(--wag-type-co-hides-more-ink, var(--wag-style-co-hides-more-ink));
}
@media (max-width: 700px) {
    .wa-co-hides-more { margin: 22px 0 12px; padding-top: 18px; }
}
html[data-theme="dark"] .wa-co-hides-more { border-top-color: var(--wag-type-co-hides-more-dark-topline, var(--wag-style-co-hides-more-dark-topline)); }

/* Merged nearby-business section (hides group + accommodations group) —
   each group keeps the standard .wa-section-heading grey eyebrow as its
   ONLY title (Marc, 2026-08-02: no extra black subheading on top of it).
   Just spacing between the two groups when both render. */
.wa-nearby-group + .wa-nearby-group { margin-top: 30px; }

/* ============================================================
   COMMUNITY — footer "View all reports" link
   ============================================================ */
.wa-community-footer { margin-top: 14px; text-align: right; }
.wa-community-view-all {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .82rem; font-weight: 600; color: var(--wag-type-community-view-all-ink, var(--wag-style-community-view-all-ink)); text-decoration: none;
    letter-spacing: .02em;
}
.wa .wa-community-view-all:hover { color: var(--wag-type-community-view-all-hover-ink, var(--wag-style-community-view-all-hover-ink)); }
.wa-community-view-all svg { flex-shrink: 0; }

/* ============================================================
   REPORTS PAGE  /places/{slug}/reports/
   ============================================================ */
/* Rehecha con las piezas de los catálogos (Marc, 2026-10-01): caja
   .wa-cat-box, buscador de siempre y desplegables de WAG. Marcado en
   template-parts/sections/reports-body.php. */

/* Fechas personalizadas: los dos campos con la forma de un desplegable de
   filtro (.wa-dropdown-trigger, línea ~4706), uno al lado del otro. */
.wa-reports-range { display: flex; align-items: center; gap: var(--wag-space-8); }
.wa-reports-range[hidden] { display: none; }
/* El campo visible lo pone wa-datepicker.js como <input type="text">, y el
   `input[type="text"]` de Astra (ancho 100%, radio 4px) ganaba a una clase
   sola: de ahí el `.wa .wa-reports-range` delante. */
.wa .wa-reports-range .wa-reports-date-input {
    display: block; height: auto; line-height: 1.4; box-shadow: var(--wag-shadow-14);
    width: 150px; max-width: calc(50% - 14px);
    border: 1px solid #d4dbe3; background: var(--wag-surface); border-radius: var(--wag-radius-999);
    padding: 7px 14px; font-size: var(--wag-text-13); font-weight: 600; color: var(--wag-type-reports-date-input-ink, var(--wag-style-reports-date-input-ink));
    cursor: pointer; outline: none;
}
.wa .wa-reports-range .wa-reports-date-input:hover, .wa .wa-reports-range .wa-reports-date-input:focus,
.wa .wa-reports-range .wa-reports-date-input.is-active { border-color: var(--wag-type-reports-date-input-line, var(--wag-style-reports-date-input-line)); }
.wa-reports-range-sep { color: var(--wag-type-reports-range-sep-ink, var(--wag-style-reports-range-sep-ink)); }
html[data-theme="dark"] .wa .wa-reports-range .wa-reports-date-input { background: var(--wag-dark-surface); border-color: var(--wag-type-reports-date-input-dark-line, var(--wag-style-reports-date-input-dark-line)); color: var(--wag-type-reports-date-input-dark-ink, var(--wag-style-reports-date-input-dark-ink)); }
/* En móvil, la regla anti-zoom de iOS (@media (pointer: coarse), ~línea
   24884) subía estos campos a 16px y salían más grandes que los desplegables
   de al lado. Aquí no hace falta: el campo visible es readOnly (lo crea
   wa-datepicker.js) y abre el calendario a pantalla completa, sin teclado, así
   que Safari no amplía. Mismo tamaño que .wa-dropdown-trigger en móvil. */
@media (pointer: coarse) {
    body:not(.wa-admin):not(.wa-owner) .wa-reports-range input.wa-dp-trigger[readonly] {
        font-size: var(--wag-text-14); height: 38px; line-height: 38px; padding: 0 16px;
    }
}

.wa-reports-summary strong { color: #5a6a7a; font-weight: 700; }
html[data-theme="dark"] .wa-reports-summary strong { color: #b8c4cd; }

.wa-reports-list { margin-top: 0; }
.wa-reports-meta { display: flex; align-items: center; gap: 14px; flex: none; }
.wa-reports-last-seen { font-size: var(--wag-text-12); color: var(--wag-type-reports-last-seen-ink, var(--wag-style-reports-last-seen-ink)); white-space: nowrap; }
.wa-reports-list .wa-community-row[hidden] { display: none; }
.wa-reports-nomatch { margin: 8px 0 0; }

/* Móvil: cada especie en dos líneas — nombre y nivel arriba, reportes y
   última vez debajo. En una sola línea el nombre se montaba sobre los
   reportes y el nivel se salía de la pantalla. */
@media (max-width: 700px) {
    .wa-reports-list .wa-community-row {
        display: grid; grid-template-columns: minmax(0, 1fr) auto;
        column-gap: var(--wag-space-12); row-gap: 6px; align-items: start;
    }
    .wa-reports-list .wa-community-row-name { grid-column: 1; grid-row: 1; }
    .wa-reports-list .wa-community-label { grid-column: 2; grid-row: 1; margin-top: 1px; }
    .wa-reports-list .wa-reports-meta { grid-column: 1 / -1; grid-row: 2; gap: 10px; }
    .wa-reports-list .wa-community-row-reports { font-size: 12.5px; }
    .wa-reports-list .wa-reports-last-seen { white-space: normal; }
}

/* ============================================================
   COMMUNITY SPECIES GALLERY ([species_gallery])
   ============================================================ */
.wa-gal-wrap { display: flex; flex-direction: column; gap: var(--wag-space-16); }
/* Spacing when gallery is merged into the community section */
.wa-community--boxed + .wa-gal-wrap,
.wa-community + .wa-gal-wrap,
.wa-gal-wrap + .wa-community,
.wa-gal-wrap + .wa-community--boxed{ margin-top: 15px; }
/* Gallery box — clean: just filter + photos */
.wa-gal {
    background: #f6f9fc;
    border: 1px solid var(--wag-type-gal-line, var(--wag-style-gal-line));
    border-radius: var(--wag-type-gal-radius, var(--wag-style-gal-radius));
    padding: 24px 26px;
    box-shadow: var(--wag-shadow-11);
}
html[data-theme="dark"] .wa-gal {background: var(--wag-type-gal-dark-bg, var(--wag-style-gal-dark-bg)); border-color: var(--wag-type-gal-dark-line, var(--wag-style-gal-dark-line));}
.wa-gal-head {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--wag-space-12); margin-bottom: 18px;
}

/* Upload feedback: the server optimizes the web copy, so a photographer does
   not need to resize a normal camera JPEG before contributing. */
.wa-gal-upload-note {
    display: block; margin-top: 7px; color: #718096;
    font-size: var(--wag-text-11); font-weight: 600; line-height: 1.35; text-align: center;
}

/* ── Like ────────────────────────────────────────────────────────────────────
   Mismo corazón que el resto del sitio: el glifo ♥ (&#9829;, igual que
   .species-favourite) y el rojo #ff3040. Antes esto usaba ❤ (&#10084;), un rosa
   propio y una píldora negra — se notaba que era de otra familia.
   Sin fondo: ahora vive sobre el cuerpo claro de la card, no sobre la foto. */
.wa-gal-like {
    display: inline-flex; align-items: center; gap: 5px;
    flex: 0 0 auto;                      /* nunca se encoge: el que trunca es el texto */
    max-width: 42%;                      /* ...pero tampoco se come la card */
    border: 0; padding: 2px 0; cursor: pointer;
    font-size: var(--wag-text-12); font-weight: 700;
    transition: color .18s ease;
    white-space: nowrap;
}
/* Astra pinta sus azules en button:hover/:focus y ganaba a la regla de arriba
   (el corazón se ponía azul al pasar por encima). Se fijan los tres estados con
   !important, que es lo que ya hace falta en el resto del tema para ganarle. */
.wa-gal-like,
.wa-gal-like:hover,
.wa-gal-like:focus,
.wa-gal-like:active {
    background: none !important;
    box-shadow: var(--wag-shadow-15) !important;
    color: #8a95a3 !important;
}
.wa-gal-like.is-liked,
.wa-gal-like.is-liked:hover,
.wa .wa-gal-like.is-liked:focus { color: #ff3040 !important; }

.wa-gal-heart { font-size: 15px; line-height: 1; color: #c3ccd5; transition: color .25s ease, transform .25s ease; }
/* Mismo motivo que en la card: en táctil el :hover se queda pegado tras tocar y
   el corazón se quedaría agrandado y rojo aunque no le hayas dado like. */
@media (hover: hover) {
.wa .wa-gal-like:hover .wa-gal-heart { color: #ff3040; transform: scale(1.15); }
}
.wa-gal-like.is-liked .wa-gal-heart { color: #ff3040; }
.wa-gal-like:disabled { opacity: .5; cursor: default; }

/* El contador se compacta en PHP/JS (1.2k), pero además: cifras de ancho fijo
   para que el número no baile al cambiar, y truncado si aun así se pasara. */
.wa-gal-likecount {
    font-variant-numeric: tabular-nums;
    overflow: hidden; text-overflow: ellipsis; min-width: 0;
}

html[data-theme="dark"] .wa-gal-like,
html[data-theme="dark"] .wa-gal-like:hover,
html[data-theme="dark"] .wa-gal-like:focus { color: #8fa0b0 !important; }
html[data-theme="dark"] .wa-gal-like.is-liked,
html[data-theme="dark"] .wa-gal-like.is-liked:hover { color: #ff3040 !important; }
html[data-theme="dark"] .wa-gal-heart { color: #4a5764; }
.wa-gal-act {
    border: 0; border-radius: 7px; padding: 3px 9px;
    font-size: var(--wag-text-11); font-weight: 700; cursor: pointer;
    background: rgba(26,30,36,.85); color: #fff;
}
.wa-gal-approve { background: #2e9e5b; }
.wa-gal-hero    { background: #2d7ea3; }
.wa-gal-del     { background: #d92638; }
.wa-gal-report  { background: rgba(26,30,36,.85); }
.wa-gal-reported { font-size: var(--wag-text-11); font-weight: 700; color: #f5a623; background: rgba(0,0,0,.6); border-radius: 7px; padding: 3px 7px; }
.wa-gal-empty { color: var(--wag-type-gal-empty-ink, var(--wag-style-gal-empty-ink)); font-size: var(--wag-text-14); }
.wa-gal-manager-note { font-size: 12.5px; color: rgba(255,255,255,.65); margin: 6px 0 0; line-height: 1.5; }

/* Upload consent (copyright/license) */
.wa-gal-uploadwrap { display: flex; flex-direction: column; align-items: flex-end; gap: var(--wag-space-8); max-width: 360px; }
.wa-gal-consent { font-size: 11.5px; line-height: 1.4; color: var(--wag-type-gal-consent-ink, var(--wag-style-gal-consent-ink)); }
.wa-gal-consent-label { display: flex; gap: var(--wag-space-8); align-items: flex-start; cursor: pointer; }
.wa-gal-consent input { margin-top: 2px; flex-shrink: 0; }
.wa-gal-consent-more { margin: 5px 0 0 24px; font-size: var(--wag-text-11); color: inherit; }
.wa-gal-consent-more summary { display: inline-block; cursor: pointer; color: #6e94b4; font-weight: 700; }
.wa .wa-gal-consent-more summary:hover { color: #8bb6d5; }
.wa-gal-consent-more p { margin: 6px 0 0; color: inherit; }
@media (max-width: 700px) {
    .wa-gal-uploadwrap { max-width: none; width: 100%; align-items: stretch; }
}
/* ── Autocomplete pickers (hotspot + species) in gallery upload box ──────── */
.wa-gal-hotspot-picker,
.wa-gal-species-picker { position: relative; width: 100%; }
/* Search-bar row: icon + text input */
.wa-gal-hotspot-input,
.wa-gal-species-input {
    flex: 1; border: 0 !important; outline: none !important; min-width: 0;
    background: transparent !important;
    font-size: var(--wag-text-13); box-shadow: var(--wag-shadow-15) !important;
    -webkit-appearance: none; appearance: none;
}
/* Position only: colors and rows come from the shared WAG search panel. */
.wa-gal-hotspot-suggestions,
.wa-gal-species-suggestions {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 200;
    list-style: none; margin: 0; padding: 6px;
}
/* Items inside gallery pickers — same structure as wa-search-row */
.wa-gal-hotspot-suggestions .wa-search-row,
.wa-gal-species-suggestions .wa-search-row { cursor: pointer; }
.wa-gal-hotspot-suggestions .wa-search-row:hover,
.wa .wa-gal-species-suggestions .wa-search-row:hover { background: #232a33; }
.wa-gal-hotspot-suggestions .wa-search-en,
.wa-gal-species-suggestions .wa-search-en { color: var(--wag-dark-ink); }
.wa-gal-hotspot-suggestions .wa-search-sub,
.wa-gal-species-suggestions .wa-search-sub { color: #93a0ab; }
.wa-gal-hotspot-suggestions .wa-search-thumb,
.wa-gal-species-suggestions .wa-search-thumb { background: #11161c; }
/* li wrapping each row */
.wa-gal-ac-item { display: block; list-style: none; }
/* Report reasons menu */
.wa-gal-reportwrap { position: relative; }
.wa-gal-reasons {
    position: absolute; top: 100%; right: 0; margin-top: 4px; z-index: 20;
    background: var(--wag-surface); border: 1px solid #d4dbe3; border-radius: 10px; overflow: hidden;
    box-shadow: 0 8px 24px rgba(26,30,36,.18); min-width: 180px;
}
.wa-gal-reason {
    display: block; width: 100%; text-align: left; border: 0; background: var(--wag-surface);
    padding: 8px 12px; font-size: 12.5px; color: #1a1e24; cursor: pointer;
}
.wa .wa-gal-reason:hover { background: rgba(217,38,56,.08); color: #d92638; }

/* ============================================================
   CONTROL CENTER — PHOTOS section (iNaturalist import queue)
   ============================================================ */
.wa-photo-queue {
    background: #f8f9fb;
    border: 1px solid #eef1f4;
    border-radius: var(--wag-radius-16);
    padding: 20px 22px;
    margin-bottom: 8px;
}
.wa-photo-progress {
    height: 10px;
    border-radius: var(--wag-radius-999);
    background: #e7ebf0;
    overflow: hidden;
}
.wa-photo-progress-bar {
    height: 100%;
    width: 0;
    border-radius: var(--wag-radius-999);
    background: #2e9e5b;
    transition: width .4s ease;
}
.wa-photo-queue-info { margin: 10px 0 14px; font-size: var(--wag-text-14); font-weight: 600; color: #1a1e24; }
.wa-photo-queue-actions { display: flex; flex-wrap: wrap; gap: var(--wag-space-8); }
.wa-photo-act:disabled { opacity: .5; cursor: wait; }
.wa-photo-fix-one {
    border: 1px solid #d4dbe3;
    background: var(--wag-surface);
    border-radius: var(--wag-radius-8);
    padding: 3px 12px;
    font-size: var(--wag-text-12);
    font-weight: 600;
    cursor: pointer;
    color: #1a1e24;
}
.wa .wa-photo-fix-one:hover { border-color: #4fadd4; color: #2d7ea3; }

/* ============================================================
   NEWS — frontend feed (Latest Updates) + Control Center CRUD
   ============================================================ */
.wa-news {
    margin: 0 auto; max-width: 780px;
    background: var(--wag-type-news-bg, var(--wag-style-news-bg));
    border: 1px solid var(--wag-type-news-line, var(--wag-style-news-line));
    border-radius: var(--wag-radius-20);
    padding: 26px 28px;
    box-shadow: var(--wag-type-news-shadow, var(--wag-style-news-shadow));
}
.wa-news-title {
    display: flex; align-items: center; gap: 9px;
    font-size: var(--wag-text-12); font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--wag-accent); margin: 0 0 18px;
}
.wa-news-title::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: #2e9e5b; box-shadow: 0 0 0 4px rgba(46, 158, 91, .18);
}
/* Timeline rail down the left of the feed */
.wa-news-feed {
    list-style: none; margin: 0; padding: 0 0 0 22px; position: relative;
}
.wa-news-feed::before {
    content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px;
    width: 2px; background: linear-gradient(180deg, #cfe6da, #eef4f0);
}
.wa-news-item {
    position: relative; padding: 6px 0 18px;
}
.wa-news-item:last-child { padding-bottom: 0; }
/* Timeline node */
.wa-news-item::before {
    content: ""; position: absolute; left: -22px; top: 9px;
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--wag-surface); border: 2.5px solid #2e9e5b;
    transform: translateX(-1px);
}
.wa-news-item.is-featured::before { background: #2e9e5b; }
/* Featured = soft accent card */
.wa-news-item.is-featured {
    background: var(--wag-type-news-item-bg, var(--wag-style-news-item-bg)); border: 1px solid var(--wag-type-news-item-line, var(--wag-style-news-item-line));
    border-radius: var(--wag-type-news-item-radius, var(--wag-style-news-item-radius)); padding: 14px 16px; margin: 0 0 16px -6px;
}
.wa-news-item.is-featured::after {
    content: "Featured"; position: absolute; top: 12px; right: 14px;
    font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
    color: var(--wag-accent); background: #d9efe3; padding: 3px 8px; border-radius: var(--wag-radius-999);
}
.wa-news-date {
    display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .3px;
    color: var(--wag-type-news-date-ink, var(--wag-style-news-date-ink)); text-transform: uppercase; margin-bottom: 4px;
}
.wa-news-headline {
    display: block; font-size: var(--wag-text-16); font-weight: 700; color: var(--wag-ink); line-height: 1.35;
}
.wa-news-text { margin: 5px 0 0; font-size: var(--wag-text-14); line-height: 1.6; color: var(--wag-type-news-text-ink, var(--wag-style-news-text-ink)); }
.wa-news-link {
    display: inline-flex; align-items: center; margin-top: 9px;
    font-size: 12.5px; font-weight: 700; color: var(--wag-accent); text-decoration: none;
    background: #e9f4ee; padding: 6px 13px; border-radius: var(--wag-radius-999);
    transition: background .14s;
}
.wa .wa-news-link:hover { background: #dceee4; text-decoration: none; }

/* Admin form */
.wa-news-form { background: #f8f9fb; border: 1px solid #eef1f4; border-radius: var(--wag-radius-16); padding: 18px 20px; margin-bottom: 8px; }
.wa-news-form input[type="text"], .wa-news-form input[type="url"], .wa-news-form input[type="date"],
.wa-news-form textarea, .wa-news-form select {
    width: 100%; padding: 9px 12px; border: 1px solid var(--wag-type-field-news-line, var(--wag-style-field-news-line)); border-radius: var(--wag-type-field-news-radius, var(--wag-style-field-news-radius));
    background: var(--wag-surface); font-size: var(--wag-text-14); margin-bottom: 8px; color: var(--wag-type-field-news-ink, var(--wag-style-field-news-ink));
}
.wa-news-form input::placeholder, .wa-news-form textarea::placeholder { color: #9aa7b4; }
.wa-news-form-row { display: flex; gap: var(--wag-space-8); flex-wrap: wrap; position: relative; }
.wa-news-form-row > * { flex: 1; min-width: 120px; }
.wa-news-featured { display: flex; align-items: center; gap: 6px; font-size: var(--wag-text-13); flex: 0 0 auto; }
.wa-news-featured input { width: auto; margin: 0; }
.wa-news-suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; background: var(--wag-surface); border: 1px solid #d4dbe3; border-radius: 10px; overflow: hidden; }
.wa-news-suggest:empty { display: none; }
.wa-news-suggest-item { display: block; width: 100%; text-align: left; padding: 8px 12px; border: 0; background: var(--wag-surface); cursor: pointer; font-size: 13.5px; color: #1a1e24; }
.wa .wa-news-suggest-item:hover { background: rgba(79,173,212,.08); color: #1a1e24; }
.wa-news-form-actions { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.wa-news-msg { font-size: var(--wag-text-13); color: #2e9e5b; }
.wa-news-edit, .wa-news-del {
    border: 1px solid #d4dbe3; background: var(--wag-surface); border-radius: var(--wag-radius-8); padding: 3px 12px;
    font-size: var(--wag-text-12); font-weight: 600; cursor: pointer; color: #1a1e24;
}
.wa .wa-news-del:hover { border-color: #d92638; color: #d92638; }
.wa .wa-news-edit:hover { border-color: #4fadd4; color: #2d7ea3; }
/* Scope buttons: keep label readable in both states */
.wa-news-scope-btn,
.wa-news-scope-btn.is-active{ color: #1a1e24; }

/* Hotspots */

.species-hotspots { margin-top: 0; }

.species-hotspots h2 {
    font-size: 36px;
    margin-bottom: 30px;
    color: #111;
}

.species-hotspot-image {
    position: relative;
    height: 240px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

/* ── Filters row (category + country dropdown on same line) ── */
.wa-filters-row {
    display: flex;
    justify-content: left;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.wa-filters-row .wa-filters {
    margin-bottom: 0;
    justify-content: flex-start;
}
.wa-filters-row .wa-filter {
    margin-top: 0;
}

/* Móvil: la barra de filtros pasa a UNA sola fila desplazable con el dedo,
   igual que los .wa-hp-chips de la home (front-page.php:929) — mismo gap 8px,
   misma scrollbar oculta. Antes hacía wrap y en un móvil dos dropdowns + un
   botón ocupaban tres líneas antes de la primera tarjeta. (Marc, 2026-09-10)

   Ojo: overflow-x convierte la barra en contenedor de recorte, así que el
   .wa-dropdown-menu abierto (position: absolute) quedaría cortado. Lo
   resuelve wa-filters.js reposicionándolo en fixed → .wa-dd-fixed. */
@media (max-width: 700px) {
    .wa-tours-filterbar,
    .wa-filters-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        gap: var(--wag-space-8);
        /* Ancho completo de pantalla, como .wa-hp-chips en la home: la fila se
           sale del padding del contenedor para que el scroll muera en el borde
           del móvil y no a media pantalla. El truco clásico de full-bleed —
           los % resuelven contra el contenedor, así que 50vw - 50% ES su
           gutter y el primer filtro sigue alineado con las tarjetas, sea el
           padding que sea. El max() cubre las secciones ya full-bleed (gutter
           0), donde si no los filtros tocarían el borde. */
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        /* El trigger abierto lleva un anillo de 3px (.wa-dropdown.is-open):
           sin este colchón vertical, overflow-y: hidden lo recortaría. */
        padding: 3px max(16px, calc(50vw - 50%));
        scroll-padding-left: max(16px, calc(50vw - 50%));
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }
    .wa-tours-filterbar::-webkit-scrollbar,
    .wa-filters-row::-webkit-scrollbar { display: none; }
    /* Nada se encoge ni se estira: cada control mantiene su ancho natural. */
    .wa-tours-filterbar > *,
    .wa-filters-row > * { flex: 0 0 auto; }
    /* .wa-filters es a su vez un flex con wrap; dentro de la fila, tampoco. */
    .wa-tours-filterbar .wa-filters,
    .wa-filters-row .wa-filters { flex-wrap: nowrap; margin-bottom: 0; }
}

/* ── Dropdown de filtro = panel a pantalla completa en móvil ──────────────
   El menú anclado al trigger no se veía: la barra recorta por overflow-x y
   sacarlo con position: fixed tampoco basta (cualquier ancestro con
   transform/filter vuelve a ser su contenedor). wa-filters.js lo mueve a
   <body> y le pone .wa-dd-fullscreen; aquí ocupa el viewport entero.
   Tokens tomados de las sheets que ya existen (.wa-gal-sheet-*:5830).
   (Marc, 2026-09-10) */
@media (max-width: 700px) {
    /* Bloquea el scroll de fondo mientras el panel está abierto. */
    html.wa-dd-open, html.wa-dd-open body { overflow: hidden; }

    /* Hoja que sube desde abajo (Marc, 2026-09-26: «la veo muy cutre»).
       Antes: pantalla blanca completa con la opción elegida en una franja
       negra. Ahora: fondo atenuado, hoja redondeada con asa, filas de pulgar
       y la elegida con un check azul (#2b7cb0, el azul del sitio). */
    .wa-dd-backdrop {
        position: fixed; inset: 0; z-index: 100049;
        background: rgba(10,14,18,.45);
        animation: wa-dd-fade-in .18s ease;
    }
    .wa-dropdown-menu.wa-dd-fullscreen {
        display: flex; flex-direction: column;
        position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 100050;
        width: auto; min-width: 0; max-width: none; max-height: 82vh;
        background: var(--wag-surface); border: 0; border-radius: 20px 20px 0 0;
        box-shadow: 0 -10px 30px rgba(0,0,0,.18);
        overflow-y: auto; overscroll-behavior: contain;
        padding: 0 0 calc(12px + env(safe-area-inset-bottom));
        animation: wa-dd-sheet-in .24s cubic-bezier(.2,.8,.2,1);
    }
    .wa-dd-fullscreen .wa-dd-head {
        display: flex; align-items: center; justify-content: space-between; gap: var(--wag-space-12);
        position: sticky; top: 0; z-index: 1;
        padding: 22px 20px 12px; background: var(--wag-surface);
    }
    /* Asa de arrastre, como las hojas de iOS: dice «esto es una capa». */
    .wa-dd-fullscreen .wa-dd-head::before {
        content: ''; position: absolute; top: 8px; left: 50%;
        width: 40px; height: 4px; margin-left: -20px; border-radius: var(--wag-radius-4); background: #d4dbe3;
    }
    .wa-dd-head-title {
        font-size: 17px; font-weight: 700; color: var(--wa-ink, #1a1e24); letter-spacing: -.2px;
    }
    .wa .wa-dd-fullscreen .wa-dd-head-close,
    .wa .wa-dd-fullscreen .wa-dd-head-close:hover,
    .wa .wa-dd-fullscreen .wa-dd-head-close:focus {
        margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
        width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--wag-radius-999);
        /* Sin círculo detrás de la X (Marc, 2026-09-25 y recordado el 26):
           basta el aspa; el hueco de 36px la deja fácil de pulsar. */
        background: transparent; box-shadow: var(--wag-shadow-14); color: var(--wa-ink, #1a1e24); cursor: pointer;
    }
    .wa .wa-dd-fullscreen .wa-dropdown-action,
    .wa .wa-dd-fullscreen .wa-dropdown-action:hover,
    .wa .wa-dd-fullscreen .wa-dropdown-action:focus,
    .wa .wa-dd-fullscreen .wa-dropdown-option,
    .wa .wa-dd-fullscreen .wa-dropdown-option:hover,
    .wa .wa-dd-fullscreen .wa-dropdown-option:focus {
        display: flex; align-items: center; justify-content: space-between; gap: var(--wag-space-12);
        min-height: 52px; margin: 0 20px; width: auto; padding: 0 2px;
        font-size: 15px; font-weight: 500; white-space: normal; text-align: left;
        color: var(--wa-ink, #1a1e24); background: transparent;
        border: 0; border-bottom: 1px solid #eef2f6; border-radius: 0; box-shadow: var(--wag-shadow-14);
    }
    .wa .wa-dd-fullscreen .wa-dropdown-action:last-child,
    .wa .wa-dd-fullscreen .wa-dropdown-option:last-child { border-bottom: 0; }
    .wa .wa-dd-fullscreen .wa-dropdown-option.is-active,
    .wa .wa-dd-fullscreen .wa-dropdown-option.is-active:hover {
        background: transparent; color: #1f6a9c; font-weight: 700;
    }
    .wa .wa-dd-fullscreen .wa-dropdown-option.is-active::after {
        content: ''; flex: 0 0 18px; width: 18px; height: 18px;
        background: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12.5 10 17.5 19 7'/%3E%3C/svg%3E") center / contain no-repeat;
                mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12.5 10 17.5 19 7'/%3E%3C/svg%3E") center / contain no-repeat;
    }
    html[data-theme="dark"] .wa-dropdown-menu.wa-dd-fullscreen { background: #171c22; box-shadow: 0 -10px 30px rgba(0,0,0,.5); }
    html[data-theme="dark"] .wa-dd-fullscreen .wa-dd-head { background: #171c22; }
    html[data-theme="dark"] .wa-dd-fullscreen .wa-dd-head::before { background: #3a4552; }
    html[data-theme="dark"] .wa-dd-head-title { color: var(--wag-dark-ink); }
    html[data-theme="dark"] .wa .wa-dd-fullscreen .wa-dd-head-close { background: transparent; color: var(--wag-dark-ink); }
    html[data-theme="dark"] .wa .wa-dd-fullscreen .wa-dropdown-action,
    html[data-theme="dark"] .wa .wa-dd-fullscreen .wa-dropdown-option { color: var(--wag-dark-ink); border-bottom-color: #242c36; }
    html[data-theme="dark"] .wa .wa-dd-fullscreen .wa-dropdown-option.is-active { color: #8ecbef; }
}
@keyframes wa-dd-sheet-in {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
@keyframes wa-dd-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Country dropdown ── */


.wa-chevron {
    transition: transform .2s ease;
    flex-shrink: 0;
}


/* Hotspots grid */

.species-hotspots-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--wag-space-16);
}

@media (max-width: 1200px) { .species-hotspots-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .species-hotspots-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .species-hotspots-grid { grid-template-columns: 1fr; } }

/* See-all card dentro del hotspots grid */
/* Load More */
.load-more-wrapper {
    display: flex;
    justify-content: center;
    margin: 40px 0 24px;
}
/* `display: flex` gana a la regla por defecto de [hidden] (display: none) por
   especificidad, así que ocultar el bloque desde JS no bastaba: el botón seguía
   viéndose, y con el texto "Load 0 more" dentro. */
.load-more-wrapper[hidden] { display: none; }
.load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--wag-space-8);
    padding: 15px 44px;
    background: var(--wag-type-load-more-bg, var(--wag-style-relleno-negro-bg));
    color: var(--wag-type-load-more-ink, var(--wag-style-relleno-negro-ink)) !important;
    border: none;
    border-radius: var(--wag-type-load-more-radius, var(--wag-style-relleno-negro-radius));
    font-size: var(--wag-text-14);
    font-weight: 500;
    letter-spacing: 0.2px;
    cursor: pointer;
    box-shadow: var(--wag-type-load-more-shadow, var(--wag-style-relleno-negro-shadow));
    transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}
.wa .load-more-btn:hover,
.wa .load-more-btn:focus {
    opacity: 0.82;
    transform: translateY(-2px);
    box-shadow: var(--wag-type-load-more-hover-shadow, var(--wag-style-relleno-negro-hover-shadow));
    color: var(--wag-type-load-more-hover-ink, var(--wag-style-relleno-negro-hover-ink)) !important;
    /* Astra aplica el color de botón del Customizer en :hover con !important
       (mismo mecanismo de todos los "otro problema de astra-child" de esta
       sesión) — sin esto el fondo negro se vuelve azul/verde del tema al
       pasar el ratón. Mismo valor que el estado normal, así que visualmente
       no cambia nada salvo lo que ya hacía esta regla. */
    background-color: var(--wag-type-load-more-hover-bg, var(--wag-style-relleno-negro-hover-bg)) !important;
}
.load-more-btn:active {
    transform: translateY(0);
    opacity: 0.95;
}
.wa .load-more-btn:focus { outline: none; }
/* El botón es un enlace (href="?wa_page=N") para que la lista se recorra sin
   JavaScript; hereda de Astra el subrayado y el color de enlace, que sobre el
   fondo negro de la píldora no pintan nada. */
.wa a.load-more-btn,
.wa a.load-more-btn:hover,
.wa a.load-more-btn:focus { text-decoration: none; }
.load-more-btn.is-loading { opacity: .6; pointer-events: none; }

/* ── Rejillas paginadas en servidor (inc/helpers/grid-view.php) ─────────────
   El recuento NO es decoración: el tope de wa_grid_cap() cortaba en 300 sin
   decirlo, y esta línea es la que impide que vuelva a pasar en silencio. */
.wa-grid-count {
    margin: 0 0 12px;
    font-size: 12.5px;
    color: var(--wag-type-grid-count-ink, var(--wag-style-grid-count-ink));
    text-align: right;
}
.wa-grid-empty {
    grid-column: 1 / -1;
    padding: 40px 20px;
    text-align: center;
    font-size: var(--wag-text-14);
    color: var(--wag-type-grid-empty-ink, var(--wag-style-grid-count-ink));
}
.wa-grid-empty[hidden] { display: none; }
.wa-grid-prev {
    margin: -8px 0 24px;
    text-align: center;
    font-size: var(--wag-text-13);
}
@media (max-width: 700px) {
    .wa-grid-count { text-align: left; }
}
html[data-theme="dark"] .wa-grid-count,
html[data-theme="dark"] .wa-grid-empty { color: #8a95a3; }

/* ── Catálogos (/hides/, /experiences/, /stays/) ────────────────────────────
   Container de dos filas: buscador arriba, filtros abajo. El gris muy suave no
   es decorativo: el buscador y los desplegables son blancos, y sobre blanco se
   leerían como cajas dentro de otra caja. */
.wa-cat-box {
    display: flex;
    flex-direction: column;
    gap: var(--wag-space-12);
    margin-bottom: 12px;
    padding: 14px;
    background: var(--wag-type-cat-box-bg, var(--wag-style-cat-box-bg));
    border: 1px solid var(--wa-line, #e6eaef);
    border-radius: var(--wag-radius-16);
}
.wa-cat-box .wa-tours-filterbar { margin: 0; }
@media (max-width: 700px) {
    /* Dentro de la caja del buscador de los catálogos (.wa-cat-box), la regla
       `.wa-cat-box .wa-tours-filterbar { margin: 0 }` anulaba la salida a sangre
       de la barra de filtros en móvil pero no su relleno: el primer filtro quedaba 16px más adentro
       que el buscador y las tarjetas (medido: 32 frente a 16 en /hides/,
       /experiences/, /stays/ y /operators/; Marc, 2026-10-01). */
    .wa-cat-box .wa-tours-filterbar,
    .wa-cat-box .wa-filters-row {
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
}
.wa-cat-search { width: 100%; max-width: 780px; }   /* el mismo tope que la home */
/* Sin sombra dentro del container: la píldora de la home flota porque está
   sobre una foto a pantalla completa. Aquí está dentro de una caja, y una
   sombra ahí dentro la despega de su propio contenedor (Marc, 2026-09-20). */
.wa-cat-box .wa-search-bar { box-shadow: var(--wag-type-field-search-bar-catalogue-shadow, var(--wag-style-field-search-bar-catalogue-shadow)) !important; }
.wa-cat-box .wa-search { box-shadow: var(--wag-shadow-15) !important; }
.wa-cat-box .wa-search:focus-within .wa-search-bar {
    /* El foco sigue notándose: filo azul, sin halo. */
    border-color: rgba(79,173,212,.55);
    box-shadow: var(--wag-shadow-15) !important;
}
/* En móvil, la píldora de la home (front-page.php, ≤1024px: radio 999 y 52px
   de alto). Los catálogos se habían quedado con la caja de 16px de escritorio
   y el buscador no era el mismo en las dos páginas (Marc, 2026-10-01). */
@media (max-width: 1024px) {
    .wa-cat-box .wa-search-bar { border-radius: var(--wag-radius-999); height: 52px; padding: 0 16px; }
}
/* El selector "All" del buscador global no pinta nada en un listado de un solo
   producto: aquí la página YA es el filtro de tipo. */
.wa-cat-search .wa-search-filters { display: none !important; }

/* Sugerencias de especie dentro del panel del buscador. El panel es el mismo
   .wa-search-panel de [wa_search]: posición, sombra y filas vienen del tema. */
.wa-cat-sug {
    width: 100%; text-align: left; border: 0; background: none;
    cursor: pointer; font: inherit;
}
.wa-cat-sug-head {
    padding: 10px 12px 4px;
    font-size: 10.5px; font-weight: 800; letter-spacing: 1.4px;
    text-transform: uppercase; color: #93a0ab;
}
.wa-cat-sug--free {
    border-top: 1px solid var(--wa-line, #e6eaef);
    border-radius: 0; margin-top: 4px; padding-top: 12px;
}
.wa-cat-sug--free .wa-search-en { font-weight: 600; color: #5f7f9f; }

/* Píldora de la especie elegida */
.wa-cat-pill {
    display: inline-flex; align-items: center; gap: 6px;
    /* El chip cuelga de .wa-cat-box, que es un flex en columna: sin
       align-self, `stretch` le daba el ancho entero de la caja (Marc,
       2026-09-20). inline-flex no basta contra el estiramiento del padre. */
    align-self: flex-start; width: auto; max-width: 100%;
    height: 30px; padding: 0 6px 0 12px; margin: 0 0 12px;
    border-radius: var(--wag-radius-999); background: #eaf4ee; border: 1px solid #cfe6d8;
    font-size: 12.5px; font-weight: 600; color: #1f6b45;
}
.wa-cat-pill-ico { display: flex; opacity: .7; }
.wa-cat-pill button {
    border: 0; background: none; cursor: pointer;
    color: #4e8c6a; font-size: var(--wag-text-11); padding: 2px 4px; line-height: 1;
}
.wa .wa-cat-pill button:hover { color: #14512f; }

@media (max-width: 700px) {
    /* Sin caja: con el borde puesto, la fila de filtros no puede salirse a los
       bordes de la pantalla, y si no se sale, el último filtro muere a media
       pantalla y nadie sabe que había más. */
    .wa-cat-box { background: none; border: 0; border-radius: 0; padding: 0; gap: 10px; }
}
html[data-theme="dark"] .wa-cat-box { background: var(--wag-type-cat-box-dark-bg, var(--wag-style-cat-box-dark-bg)); border-color: var(--wag-type-cat-box-dark-line, var(--wag-style-cat-box-dark-line)); }
html[data-theme="dark"] .wa-cat-pill { background: #16241d; border-color: #27402f; color: #7fd3a3; }
@media (max-width: 700px) {
    html[data-theme="dark"] .wa-cat-box { background: none; border: 0; }
}

/* Card enter animation */
@keyframes wa-card-in {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.wa-card-entering {
    animation: wa-card-in 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation-delay: var(--wa-delay, 0ms);
}

/* =============================================================
   SPECIES — DESCRIPCIÓN + MAPA DE DISTRIBUCIÓN
   ============================================================= */

.species-auto-description-map {
    display: grid;
    grid-template-columns: 80px 1fr 360px;
    gap: 32px;
    align-items: start;
    margin: 10px 0 60px;
}

/* Las tres columnas son pill | descripción | mapa. El chip de subespecies es un
   CUARTO hijo opcional, así que hay que colocar todo explícitamente: en
   autoflujo el chip robaba la columna de la descripción, la descripción la del
   mapa y el mapa caía a una fila nueva (Marc, 2026-07-26).
   Con columnas explícitas la fila la resuelve el propio autoflujo: si el chip
   no está, descripción y mapa suben solos a la primera fila. */
/* El chip va ARRIBA DEL TODO (Marc, 2026-07-26): ancho completo, por encima
   también de la pill de acciones, no solo de la descripción. */
/* grid-row:1 explícito además del ancho: la pill es el primer hijo del DOM y sin
   esto se quedaba con la fila 1, empujando el chip debajo. Colocado a mano, el
   chip ocupa la fila entera y todo lo demás baja a la segunda. */
.species-auto-description-map > .wa-subsp { grid-column: 1 / -1; grid-row: 1; }
.species-auto-description-map > .species-description,
.species-auto-description-map > .wa-species-desc { grid-column: 2; }
.species-auto-description-map > .species-map-wrapper,
.species-auto-description-map > .species-map-unavailable { grid-column: 3; }

/* Aire pedido por Marc (2026-07-26): 15px entre el hero y el chip, y 15px entre
   el chip y el bloque pill+descripción+mapa.
   Solo escritorio: en móvil no hay dos columnas y el chip se apila con todo lo
   demás, así que apretarlo ahí cambiaría un layout que ya estaba bien.
   - Hero → chip: eran 25px (10 de margin-top + 15 de padding-top). Se quita el
     margen y queda el padding, que es justo 15.
   - Chip → contenido: eran 50px (32 de gap + 18 del margen del propio chip). Se
     separa el gap por ejes (filas 15, columnas 32) y se anula ese margen, que
     dentro de la rejilla se sumaba al hueco. */
@media (min-width: 901px) {
    .species-auto-description-map {
        margin-top: 0;
        row-gap: 32px;
        column-gap: 32px;
    }
    .species-auto-description-map > .wa-subsp { margin-bottom: 0; }

    /* BUG PREVIO (visto al colocar el chip, 2026-07-26). Los dos puntos de
       corte no coincidían: la rejilla pasa a 3 columnas a partir de 901px, pero
       .wa-section-mobile-title sigue visible hasta 1100px. En esa franja el
       título entraba como un hijo más de la rejilla y descolocaba TODO: se
       quedaba la primera celda, la pill se estiraba por la columna de la
       descripción, la descripción caía en la del mapa y el mapa se iba solo a
       otra fila. Pasaba ya antes del chip.
       Se oculta solo DENTRO de esta rejilla (no se toca la clase global, que
       otras secciones sí usan): a partir de 901px la sección ya está en su
       forma de escritorio, donde ese título nunca estuvo previsto. */
    .species-auto-description-map > .wa-section-mobile-title { display: none; }
}

.species-auto-description-map .species-description {
    font-size: 15px;
    line-height: 1.8;
    color: var(--wag-type-species-description-ink, var(--wag-style-species-description-ink));
    margin-bottom: 0;
}

/* Pill de acciones */

.species-pill-wrapper {
    display: flex;
    justify-content: center;
    position: sticky;
    top: 24px;
    z-index: 20;
}

.species-action-pill {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: #2b3546;
    border-radius: var(--wag-radius-999);
    padding: 18px 0;
    width: 56px;
    box-shadow: var(--wag-type-species-action-pill-shadow, var(--wag-style-species-action-pill-shadow));
    border: 1px solid var(--wag-type-species-action-pill-line, var(--wag-style-species-action-pill-line));
}

.species-pill-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: var(--wag-type-species-pill-btn-bg, var(--wag-style-species-pill-btn-bg));
    cursor: pointer;
    border-radius: var(--wag-type-species-pill-btn-radius, var(--wag-style-species-pill-btn-radius));
    color: rgba(255,255,255,0.45);
    transition: color .2s ease, transform .15s ease, background .2s ease;
    padding: 0;
}

.species-pill-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.species-pill-btn.species-favourite svg {
    width: 22px;
    height: 22px;
}
.species-pill-btn.species-biology svg {
    width: 21px;
    height: 21px;
}

/* Ojo: muestra check al activarse */
.species-pill-btn.species-seen .icon-check,
.species-pill-btn.species-seen.active .icon-eye{ display: none; }
.species-pill-btn.species-seen.active .icon-check { display: block; }

/* Hover — SOLO donde hay puntero de verdad.
   En una pantalla táctil el :hover se queda PEGADO después de tocar, hasta que
   toques otra cosa. Y como este hover pinta el corazón de rojo (el mismo rojo
   que el estado .active), al desmarcar un favorito el JS quitaba la clase pero
   el botón seguía rojo: parecía que el segundo toque no hacía nada
   (Marc, 2026-07-26). El estado ahora solo lo pinta .active. */
@media (hover: hover) {
.wa .species-pill-btn:hover { background: var(--wag-type-species-pill-btn-hover-bg, var(--wag-style-species-pill-btn-hover-bg)); }
.wa .species-pill-btn.species-biology:hover { color: var(--wag-type-species-pill-btn-hover-ink, var(--wag-style-species-pill-btn-hover-ink)); transform: scale(1); }
.wa .species-pill-btn.species-favourite:hover { color: var(--wag-type-species-favourite-hover-ink, var(--wag-style-species-favourite-hover-ink)); transform: scale(1); }
.wa .species-pill-btn.species-seen:hover,
.wa .species-pill-btn.species-listed:hover{ color: #5f7f9f; transform: scale(1); }
}

/* Tooltips */
.species-pill-btn[data-tooltip] {
    position: relative;
}
.species-pill-btn[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%);
    background: #1a1e24;
    color: #fff;
    font-size: var(--wag-text-11);
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
    padding: 5px 10px;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
    z-index: 100;
}
.species-pill-btn[data-tooltip]::before {
    content: '';
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-right-color: #1a1e24;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
    z-index: 100;
}
.species-pill-btn[data-tooltip]:hover::after,
.wa .species-pill-btn[data-tooltip]:hover::before {
    opacity: 1;
}

/* Activo */
.species-pill-btn.species-favourite.active { color: var(--wag-type-species-favourite-ink, var(--wag-style-species-favourite-ink)); }
.species-pill-btn.species-seen.active,
.species-pill-btn.species-listed.active{ color: #5f7f9f; }

/* Biological profile dialog — rendered under <body>, so it cannot be clipped
   by the species section or the sticky action pill. */
body.wa-bio-modal-open { overflow: hidden; }
.wa-bio-modal[hidden] { display: none !important; }
.wa-bio-modal { position: fixed; inset: 0; z-index: 100050; display: grid; place-items: center; padding: 28px; }
.wa-bio-modal__backdrop { position: absolute; inset: 0; background: rgba(10,15,22,.76); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.wa-bio-modal__panel { position: relative; display: flex; flex-direction: column; width: min(930px,100%); max-height: min(720px,calc(100vh - 56px)); overflow: hidden; padding: 26px; border: 1px solid #e4e8ed; border-radius: var(--wag-radius-24); background: #f8fafb; box-shadow: 0 28px 90px rgba(0,0,0,.35); color: #20303b; overscroll-behavior: contain; }
.wa-bio-modal__close,.wa-bio-modal__close:hover,.wa-bio-modal__close:focus,.wa-bio-modal__close:active { position: absolute; z-index: 2; top: 18px; right: 20px; width: 36px; height: 36px; padding: 0; border: 0; background: transparent; box-shadow: var(--wag-shadow-14); color: #6d7882; font: 300 31px/34px Arial,sans-serif; cursor: pointer; }
.wa-bio-modal__close:hover { color: #e65486; }
.wa-bio-modal__close:focus-visible { outline: 2px solid #e65486; outline-offset: 2px; }
.wa-bio-modal__header { display: flex; flex: 0 0 auto; align-items: center; gap: 14px; padding: 0 54px 18px 0; border-bottom: 1px solid #e3e8ec; }
.wa-bio-modal__dna { flex: 0 0 auto; display: grid; width: 48px; height: 48px; place-items: center; border-radius: 15px; background: #ffe7f0; color: #df4c81; }
.wa-bio-modal__eyebrow { display: block; margin-bottom: 4px; color: #df4c81; font-size: 10px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; }
.wa-bio-modal__header h2 { margin: 0; color: #173224; font-size: clamp(25px,3vw,34px); line-height: 1.05; letter-spacing: -.7px; }
.wa-bio-modal__header p { max-width: 650px; margin: 5px 0 0; color: #6c7a84; font-size: 12.5px; line-height: 1.45; }
.wa-bio-modal__preview { flex: 0 0 auto; margin: 11px 0 0; padding: 7px 11px; border: 1px solid #ecd798; border-radius: 9px; background: #fff9e9; color: #7d611c; font-size: 10.5px; font-weight: 700; }
.wa-bio-modal__explorer { display: grid; grid-template-columns: 188px minmax(0,1fr); min-height: 405px; margin-top: 14px; overflow: hidden; border: 1px solid #e1e7e4; border-radius: 17px; background: var(--wag-surface); }
.wa-bio-modal__tabs { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; padding: 9px; border-right: 1px solid #e4eae7; background: #f2f6f4; }
.wa-bio-modal__tabs button,.wa-bio-modal__tabs button:hover,.wa-bio-modal__tabs button:focus,.wa-bio-modal__tabs button:active { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 36px; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; box-shadow: var(--wag-shadow-14); color: #64736b; font-size: 11.5px; font-weight: 750; line-height: 1.15; text-align: left; cursor: pointer; }
.wa-bio-modal__tabs button svg { flex: 0 0 auto; }
.wa-bio-modal__tabs button:hover { background: #e9f1ec; color: #295c40; }
.wa-bio-modal__tabs button.is-active { background: var(--wag-surface); color: #d94d80; box-shadow: 0 4px 13px rgba(31,72,50,.09); }
.wa-bio-modal__content { min-width: 0; overflow: auto; padding: 22px 24px; background: var(--wag-surface); }
.wa-bio-modal__content>[hidden] { display: none !important; }
.wa-bio-modal__panel-title { display: flex; align-items: center; gap: 10px; margin-bottom: 17px; color: #1c5e3d; }
.wa-bio-modal__panel-title>i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #edf7f1; color: #2f8056; font-style: normal; }
.wa-bio-modal__panel-title>span { font-size: 19px; font-weight: 850; letter-spacing: -.25px; }
.wa-bio-modal__panel-title p { margin: 1px 0 0 auto; color: #8a9690; font-size: 10.5px; }
.wa-bio-modal__overview-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.wa-bio-modal__overview-grid button,.wa-bio-modal__overview-grid button:hover,.wa-bio-modal__overview-grid button:focus,.wa-bio-modal__overview-grid button:active { display: grid; grid-template-columns: 38px minmax(0,1fr) 12px; align-items: center; gap: 10px; min-height: 77px; padding: 11px 12px; border: 1px solid #e2e9e5; border-radius: 13px; background: #fbfcfc; box-shadow: var(--wag-shadow-14); color: #254934; text-align: left; cursor: pointer; transform: none; }
.wa-bio-modal__overview-grid button:hover { border-color: #c7dbcf; background: #f5faf7; }
.wa-bio-modal__overview-grid button i { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; background: #edf7f1; color: #2f8056; font-style: normal; }
.wa-bio-modal__overview-grid button span { display: grid; min-width: 0; gap: 3px; }
.wa-bio-modal__overview-grid button small { color: #85928b; font-size: 9px; font-weight: 850; letter-spacing: .45px; text-transform: uppercase; }
.wa-bio-modal__overview-grid button strong { overflow: hidden; color: #244b35; font-size: var(--wag-text-12); line-height: 1.25; text-overflow: ellipsis; }
.wa-bio-modal__overview-grid button b { color: #b4c0ba; font-size: 21px; font-weight: 400; }
.wa-bio-modal__section dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 20px; margin: 0; }
.wa-bio-modal__section dl>div { display: grid; align-content: start; gap: 6px; min-width: 0; padding-bottom: 10px; border-bottom: 1px solid #edf1ef; }
.wa-bio-modal__section dt { color: #829089; font-size: 10px; font-weight: 800; letter-spacing: .65px; text-transform: uppercase; }
.wa-bio-modal__section dd { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; }
.wa-bio-modal__section dd span { display: inline-flex; max-width: 100%; padding: 5px 9px; border: 1px solid #dce8e0; border-radius: var(--wag-radius-999); background: #f2f8f4; color: #315d45; font-size: 11.5px; font-weight: 700; line-height: 1.25; }
.wa-bio-modal__panel>footer { flex: 0 0 auto; margin-top: 10px; color: #89958f; font-size: 10px; text-align: center; }

/* Xeno-canto audio — top right of the header, opposite the name. Pink, like
   the DNA badge: pink marks the FUNCTION of this dialog, green its data.
   The credit line is a licence requirement (CC BY / BY-SA), so it is always
   visible and never hidden behind the play state. */
.wa-bio-modal__sound { flex: 0 0 auto; display: grid; grid-template-columns: 44px minmax(0,1fr); align-items: center; gap: 10px; max-width: 205px; margin-left: auto; padding: 8px 10px; border: 1px solid #f1dae3; border-radius: 13px; background: #fff6f9; }
.wa-bio-modal__sound-btn,.wa-bio-modal__sound-btn:hover,.wa-bio-modal__sound-btn:focus,.wa-bio-modal__sound-btn:active { display: grid; width: 44px; height: 44px; padding: 0; place-items: center; border: 0; border-radius: var(--wag-type-bio-sound-radius, var(--wag-style-bio-sound-radius)); background: #ffe7f0; box-shadow: var(--wag-shadow-14); color: #df4c81; cursor: pointer; }
.wa-bio-modal__sound-btn i { display: grid; grid-area: 1/1; place-items: center; font-style: normal; }
.wa-bio-modal__sound-btn .wa-bio-modal__sound-stop { display: none; }
.wa-bio-modal__sound-btn.is-playing,.wa-bio-modal__sound-btn:hover { background: var(--wag-type-bio-sound-bg, var(--wag-style-bio-sound-bg)); color: var(--wag-type-bio-sound-ink, var(--wag-style-bio-sound-ink)); }
.wa-bio-modal__sound-btn.is-playing .wa-bio-modal__sound-play { display: none; }
.wa-bio-modal__sound-btn.is-playing .wa-bio-modal__sound-stop { display: grid; }
.wa-bio-modal__sound-btn:focus-visible { outline: 2px solid var(--wag-type-bio-sound-focus-ring, var(--wag-style-bio-sound-focus-ring)); outline-offset: 2px; }
/* Amplified playback downloads the clip first, so the button says so. */
.wa-bio-modal__sound-btn.is-loading { animation: wa-bio-sound-pulse 1s ease-in-out infinite; }
@keyframes wa-bio-sound-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .wa-bio-modal__sound-btn.is-loading { animation: none; opacity: .55; } }
.wa-bio-modal__sound-meta { display: grid; min-width: 0; gap: 1px; }
.wa-bio-modal__sound-meta small { color: #b3798f; font-size: 8.5px; font-weight: 850; letter-spacing: .5px; text-transform: uppercase; }
.wa-bio-modal__sound-meta a,.wa-bio-modal__sound-meta span { overflow: hidden; color: #8b6674; font-size: 9.5px; line-height: 1.3; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.wa-bio-modal__sound-meta a:hover { color: #df4c81; text-decoration: underline; }
.wa-bio-modal__sound audio { display: none; }
@media(max-width:700px){.wa-bio-modal{padding:0;place-items:stretch}.wa-bio-modal__panel{width:100%;max-height:100dvh;padding:18px 12px calc(76px + env(safe-area-inset-bottom));border:0;border-radius:0}.wa-bio-modal__close,.wa-bio-modal__close:hover,.wa-bio-modal__close:focus,.wa-bio-modal__close:active{top:10px;right:8px}.wa-bio-modal__header{gap:10px;padding:0 38px 13px 0}.wa-bio-modal__dna{width:40px;height:40px;border-radius:var(--wag-radius-12)}.wa-bio-modal__header h2{font-size:var(--wag-text-24)}.wa-bio-modal__header p{display:none}.wa-bio-modal__preview{margin-top:8px}.wa-bio-modal__explorer{display:flex;flex:1 1 auto;min-height:0;flex-direction:column;margin-top:10px}.wa-bio-modal__tabs{flex:0 0 auto;flex-direction:row;overflow-x:auto;overflow-y:hidden;padding:7px;border-right:0;border-bottom:1px solid #e4eae7;scrollbar-width:none}.wa-bio-modal__tabs::-webkit-scrollbar{display:none}.wa-bio-modal__tabs button,.wa-bio-modal__tabs button:hover,.wa-bio-modal__tabs button:focus,.wa-bio-modal__tabs button:active{flex:0 0 auto;width:auto;min-height:34px;padding:7px 9px;white-space:nowrap}.wa-bio-modal__content{flex:1 1 auto;padding:16px;overflow:auto}.wa-bio-modal__panel-title{margin-bottom:12px}.wa-bio-modal__panel-title>span{font-size:17px}.wa-bio-modal__panel-title p{display:none}.wa-bio-modal__overview-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.wa-bio-modal__overview-grid button,.wa-bio-modal__overview-grid button:hover,.wa-bio-modal__overview-grid button:focus,.wa-bio-modal__overview-grid button:active{grid-template-columns:32px minmax(0,1fr);min-height:84px;padding:9px;gap:var(--wag-space-8)}.wa-bio-modal__overview-grid button i{width:32px;height:32px}.wa-bio-modal__overview-grid button b{display:none}.wa-bio-modal__overview-grid button strong{font-size:10.5px}.wa-bio-modal__section dl{grid-template-columns:1fr;gap:9px}.wa-bio-modal__panel>footer{display:none}.wa-bio-modal__header{flex-wrap:wrap}.wa-bio-modal__sound{width:100%;max-width:none;margin:9px 0 0}}
html[data-theme="dark"] .wa-bio-modal__panel { border-color: #303943; background: #151a20; color: #d7dfe5; }
html[data-theme="dark"] .wa-bio-modal__header { border-color: #303943; }
html[data-theme="dark"] .wa-bio-modal__header h2 { color: #edf4ef; }
html[data-theme="dark"] .wa-bio-modal__header p { color: #98a5af; }
html[data-theme="dark"] .wa-bio-modal__explorer,html[data-theme="dark"] .wa-bio-modal__content { border-color: #303b36; background: #1d242b; }
html[data-theme="dark"] .wa-bio-modal__tabs { border-color: #303b36; background: #18211c; }
html[data-theme="dark"] .wa-bio-modal__tabs button.is-active { background: #26322c; }
html[data-theme="dark"] .wa-bio-modal__overview-grid button { border-color: #303b36; background: #202a25; }
html[data-theme="dark"] .wa-bio-modal__overview-grid button strong { color: #c5ddd0; }
html[data-theme="dark"] .wa-bio-modal__section dt { color: #84918c; }
html[data-theme="dark"] .wa-bio-modal__section dd span { border-color: #34473d; background: #23352c; color: #afd7c0; }
html[data-theme="dark"] .wa-bio-modal__sound { border-color: #3b2b33; background: #221a1e; }
html[data-theme="dark"] .wa-bio-modal__sound-btn,html[data-theme="dark"] .wa-bio-modal__sound-btn:focus { background: #3a2029; color: #f19bb8; }
/* After the rule above, or dark would repaint the playing state back to idle. */
html[data-theme="dark"] .wa-bio-modal__sound-btn.is-playing,html[data-theme="dark"] .wa-bio-modal__sound-btn:hover { background: var(--wag-type-bio-sound-dark-bg, var(--wag-style-bio-sound-dark-bg)); color: var(--wag-type-bio-sound-dark-ink, var(--wag-style-bio-sound-dark-ink)); }
html[data-theme="dark"] .wa-bio-modal__sound-meta small { color: #a67a8a; }
html[data-theme="dark"] .wa-bio-modal__sound-meta a,html[data-theme="dark"] .wa-bio-modal__sound-meta span { color: #b98da0; }

/* Mapa */

.species-map-wrapper {
    position: sticky;
    top: 24px;
}

.species-map-wrapper > div[id^="species-map"] {
    border-radius: var(--wag-radius-12);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(100,120,160,0.15);
    border: 1px solid #dde3ed;
}

/* Leaflet attribution — muy discreta */
.species-map-wrapper .leaflet-control-attribution {
    background: transparent !important;
    box-shadow: var(--wag-shadow-15) !important;
    font-size: 8px !important;
    color: rgba(80,100,130,0.3) !important;
    padding: 2px 4px !important;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.species-map-wrapper .leaflet-control-attribution a {
    color: rgba(80,100,130,0.3) !important;
}

.wa .species-map-wrapper:hover .leaflet-control-attribution {
    opacity: 1;
}

.species-map-wrapper .leaflet-control-attribution:hover,
.wa .species-map-wrapper .leaflet-control-attribution:hover a {
    color: rgba(30,45,69,0.7) !important;
}

.species-hotspots-section {
    position: relative;
    padding-top: 0;
}

.species-hotspots-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: -20px;
    width: calc(100% + 40px);
    box-shadow: var(--wag-shadow-1);
    border-top: 1px solid #ececec;
}

.species-map-unavailable {
    font-size: var(--wag-text-13);
    color: #aaa;
    font-style: italic;
}

/* Mobile hero */

@media (max-width: 768px) {
    .species-hero-banner { height: 380px; }
    .species-hero-content { padding: 0 28px 28px; }
    .species-hero-content .species-title { font-size: var(--wa-species-title-size, clamp(32px, 9vw, 42px)); }
}

@media (max-width: 900px) {
    .species-auto-description-map { grid-template-columns: 1fr; }
    /* A una sola columna, las columnas explícitas de arriba dejarían huecos. */
    .species-auto-description-map > * { grid-column: 1 !important; }
    .species-map-wrapper  { position: static; }

    /* Aire pedido por Marc (2026-07-27): 15px entre el chip de subespecies y la
       descripción, en móvil. El "gap: 32px" base de la rejilla (línea ~4608)
       sólo se parte en row/column a partir de 901px — por debajo de eso sigue
       siendo 32px de fila TAMBIÉN, y encima el chip aporta sus propios 18px de
       margen: 32 + 18 = 50px antes de que empiece nada. Se iguala al mismo
       patrón que ya usa la versión de escritorio (separar el gap, anular el
       margen del chip) en vez de dejarlo sumar sin control. */
    .species-auto-description-map { row-gap: 15px; }
    .species-auto-description-map > .wa-subsp { margin-bottom: 0; }

    /* "ABOUT" quitado en la ficha de especie (Marc, 2026-07-27): sólo aporta
       aire vacío en móvil, no navegación (el sidenav ya no cabe en este ancho
       de todas formas). Se apaga SOLO en esta rejilla, no en la clase global
       — otras secciones (COMMUNITY, HIDES...) sí la necesitan como título. */
    .species-auto-description-map > .wa-section-mobile-title { display: none; }

    /* ── Bottom action bar (native mobile pattern) ─────────────────────────── */
    .species-pill-wrapper {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        z-index: 1001; /* above Leaflet map panes (z-index ~400-1000) */
        justify-content: normal;
        padding: 0;
        background: var(--wag-type-species-pill-wrapper-bg, var(--wag-style-species-pill-wrapper-bg));
        border-top: 1px solid var(--wag-type-species-pill-wrapper-topline, var(--wag-style-species-pill-wrapper-topline));
        box-shadow: var(--wag-type-species-pill-wrapper-shadow, var(--wag-style-species-pill-wrapper-shadow));
    }
    .species-action-pill {
        flex-direction: row;
        width: 100%;
        border-radius: 0;
        padding: 0 0 env(safe-area-inset-bottom);
        gap: 0;
        box-shadow: var(--wag-shadow-14);
        border: none;
        justify-content: space-around;
        background: var(--wag-type-species-action-pill-bg, var(--wag-style-species-action-pill-bg));
    }
    /* Each button: icon + label, full touch target */
    .species-pill-btn {
        flex: 1;
        flex-direction: column;
        gap: 3px;
        height: 64px;
        width: auto;
        border-radius: 0;
        padding: 8px 4px 6px;
        justify-content: center;
        align-items: center;
    }
    /* Icons on mobile */
    .species-pill-btn svg,
.species-pill-btn.species-favourite svg{ width: 24px; height: 24px; }
    /* Label under icon */
    .species-pill-label {
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        opacity: 0.65;
        line-height: 1;
    }
    /* Active state label opacity */
    .species-pill-btn.is-active .species-pill-label,
    .species-pill-btn.is-favourite .species-pill-label,
    .species-pill-btn.is-in-list .species-pill-label { opacity: 1; }
    /* Hide tooltip pseudo-elements entirely */
    .species-pill-btn[data-tooltip]::after,
    .species-pill-btn[data-tooltip]::before { display: none; }
    /* Dividers between buttons */
    .species-pill-btn + .species-pill-btn {
        border-left: 1px solid var(--wag-type-species-pill-btn-sideline, var(--wag-style-species-pill-btn-sideline));
    }
    /* Body padding so the bar doesn't cover content */
    body.single-birds .site-content,
    body.single-mammals .site-content {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }
}

/* ── Mobile bottom-sheet menu (list / observation menus) ────────────────── */
@media (max-width: 900px) {
    /* Backdrop behind the sheet */
    .wa-list-menu-backdrop {
        position: fixed;
        inset: 0;
        bottom: calc(64px + env(safe-area-inset-bottom));
        background: rgba(0,0,0,0.45);
        z-index: 100000; /* below sheet (100002) but above everything else */
    }
    /* Sheet slides up from above the pill bar */
    .wa-list-menu--sheet {
        position: fixed !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: calc(64px + env(safe-area-inset-bottom)) !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 72vh;
        overflow-y: auto;
        border-radius: 20px 20px 0 0 !important;
        box-shadow: 0 -8px 32px rgba(0,0,0,0.35) !important;
        z-index: 100002 !important; /* must beat .wa-list-menu base (100001) */
        animation: wa-sheet-up 0.22s ease;
    }
    /* Sheet handle */
    .wa-list-menu--sheet::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background: rgba(255,255,255,0.2);
        border-radius: 2px;
        margin: 10px auto 6px;
    }
}
@keyframes wa-sheet-up {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* Hide camera pill button on desktop — only meaningful on mobile */
@media (min-width: 901px) {
    .species-gal-pill-btn { display: none !important; }
}

/* Labels hidden on desktop pill (visible only in mobile tab-bar) */
.species-pill-label { display: none; }

/* ── Mobile species page — full-bleed season grid + premium sheet ───────── */
@media (max-width: 600px) {
    /* Full-bleed for the full-page variant only: zero lateral padding + reset margins */
    .species-season-wrapper.species-full-page {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Premium bottom sheet items: bigger touch targets */
    .wa-list-menu--sheet .wa-list-menu-item {
        padding: 14px 16px;
        font-size: 15px;
        min-height: 54px;
    }
    .wa-list-menu--sheet .wa-list-menu-title {
        padding: 14px 16px 8px;
        font-size: var(--wag-text-12);
    }
    .wa-list-menu--sheet .wa-list-menu-newbtn {
        padding: 14px 16px;
        font-size: var(--wag-text-14);
        min-height: 52px;
    }
    .wa-list-menu--sheet .wa-list-menu-manage {
        padding: 12px 16px 8px;
        font-size: var(--wag-text-13);
    }
    .wa-list-menu--sheet .wa-list-menu-check {
        width: 22px;
        font-size: var(--wag-text-18);
    }
    .wa-list-menu--sheet .wa-list-menu-create {
        padding: 8px 16px 16px;
        gap: 10px;
    }
    .wa-list-menu--sheet .wa-list-menu-create input {
        padding: 12px 14px;
        font-size: 15px;
    }
    .wa-list-menu--sheet .wa-list-menu-confirm {
        padding: 12px 18px;
        font-size: 15px;
    }
}

/* ── Mobile gallery bottom sheet ─────────────────────────────── */
.wa-gal-mobile-sheet {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: flex-end;
}
.wa-gal-mobile-sheet[hidden] { display: none; }

.wa-gal-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: var(--wag-type-gal-sheet-backdrop-bg, var(--wag-style-gal-sheet-backdrop-bg));
    backdrop-filter: blur(2px);
}

.wa-gal-sheet-panel {
    position: relative;
    width: 100%;
    background: var(--wag-type-gal-sheet-panel-bg, var(--wag-style-gal-sheet-panel-bg));
    border-radius: 20px 20px 0 0;
    padding: 0 20px calc(24px + env(safe-area-inset-bottom));
    box-shadow: var(--wag-type-gal-sheet-panel-shadow, var(--wag-style-gal-sheet-panel-shadow));
    max-height: 85vh;
    overflow-y: auto;
    animation: wa-sheet-up 0.28s cubic-bezier(0.32,0.72,0,1);
}
@keyframes wa-sheet-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

.wa-gal-sheet-handle {
    width: 40px; height: 4px;
    border-radius: var(--wag-type-gal-sheet-handle-radius, var(--wag-style-gal-sheet-handle-radius));
    background: var(--wag-type-gal-sheet-handle-bg, var(--wag-style-gal-sheet-handle-bg));
    margin: 12px auto 20px;
}

.wa-gal-sheet-step { display: flex; flex-direction: column; gap: var(--wag-space-12); }
.wa-gal-sheet-step[hidden] { display: none !important; }

.wa-gal-sheet-title {
    font-size: 17px; font-weight: 700; color: var(--wag-type-gal-sheet-title-ink, var(--wag-style-hotspot-rating-count-ink));
    margin: 0;
}

.wa-gal-sheet-body {
    font-size: var(--wag-text-14); color: var(--wag-type-gal-sheet-body-ink, var(--wag-style-gal-sheet-body-ink));
    margin: 0;
}

.wa-gal-sheet-list {
    font-size: var(--wag-text-13); color: rgba(255,255,255,0.65);
    padding-left: 18px; margin: 0;
    display: flex; flex-direction: column; gap: var(--wag-space-4);
}

.wa-gal-sheet-agree {
    background: #4a7c59; color: #fff;
    border: none; border-radius: 10px;
    padding: 13px 20px; font-size: 15px; font-weight: 600;
    cursor: pointer; width: 100%;
}
.wa .wa-gal-sheet-agree:hover { background: #5a9c6e; }

/* Consent comes before iOS opens the native photo picker. The label is styled
   as the primary action because a real label is the reliable picker trigger. */
.wa-gal-sheet-choose {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 12px 16px;
    border: 0;
    border-radius: var(--wag-type-gal-sheet-choose-radius, var(--wag-style-gal-sheet-choose-radius));
    background: var(--wag-accent);
    color: var(--wag-type-gal-sheet-choose-ink, var(--wag-style-gal-sheet-choose-ink));
    font-size: var(--wag-text-14);
    font-weight: 700;
    cursor: pointer;
    text-align: center;
}
.wa-gal-sheet-choose[aria-disabled="true"] { opacity: .46; cursor: not-allowed; }
.wa .wa-gal-sheet-choose:hover { background: var(--wag-type-gal-sheet-choose-hover-bg, var(--wag-style-gal-sheet-choose-hover-bg)); color: var(--wag-type-gal-sheet-choose-hover-ink, var(--wag-style-gal-sheet-choose-hover-ink)); }
.wa-gal-sheet-choose[aria-disabled="true"]:hover { background: var(--wag-accent); }
.wa-gal-mobile-sheet .wa-gal-consent-label { color: var(--wag-type-gal-consent-label-ink, var(--wag-style-gal-consent-label-ink)); }
.wa-gal-mobile-sheet .wa-gal-consent-more summary { color: #a9d0e8; }
.wa .wa-gal-mobile-sheet .wa-gal-consent-more summary:hover { color: #fff; }
.wa-gal-sheet-consent-error { margin: -4px 0 0; color: var(--wag-type-gal-sheet-consent-error-ink, var(--wag-style-gal-sheet-consent-error-ink)); font-size: 12.5px; font-weight: 600; }

.wa-gal-sheet-cancel {
    background: var(--wag-type-gal-sheet-cancel-bg, var(--wag-style-gal-sheet-cancel-bg)); color: var(--wag-type-gal-sheet-cancel-ink, var(--wag-style-gal-sheet-cancel-ink));
    border: none; font-size: var(--wag-text-14); cursor: pointer;
    padding: 6px; text-align: center;
}

/* Hotspot autocomplete */
.wa-gal-sheet-hotspot-wrap { position: relative; }
.wa-gal-sheet-hotspot-input {
    width: 100%; box-sizing: border-box;
    background: var(--wag-type-gal-sheet-hotspot-input-bg, var(--wag-style-gal-sheet-hotspot-input-bg)); border: 1px solid var(--wag-type-gal-sheet-hotspot-input-line, var(--wag-style-gal-sheet-hotspot-input-line));
    border-radius: var(--wag-radius-8); padding: 10px 14px;
    color: var(--wag-type-gal-sheet-hotspot-input-ink, var(--wag-style-gal-sheet-hotspot-input-ink)); font-size: var(--wag-text-14); outline: none;
}
.wa-gal-sheet-hotspot-input::placeholder { color: rgba(255,255,255,0.35); }
.wa .wa-gal-sheet-hotspot-input:focus { border-color: var(--wag-type-gal-sheet-hotspot-input-focus-line, var(--wag-style-gal-sheet-hotspot-input-focus-line)); }

.wa-gal-sheet-suggestions {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--wag-type-gal-sheet-suggestions-bg, var(--wag-style-gal-sheet-suggestions-bg)); border: 1px solid var(--wag-type-gal-sheet-suggestions-line, var(--wag-style-gal-sheet-suggestions-line));
    border-radius: var(--wag-radius-8); z-index: 10;
    max-height: 180px; overflow-y: auto;
    padding: 4px 0; margin-top: 4px;
    list-style: none;
}
.wa-gal-ac-item {
    padding: 9px 14px; font-size: var(--wag-text-13); color: rgba(255,255,255,0.8);
    cursor: pointer;
}
.wa .wa-gal-ac-item:hover { background: rgba(255,255,255,0.07); }

/* File chooser */
.wa-gal-sheet-filelabel {
    display: flex; flex-direction: column; align-items: center; gap: var(--wag-space-8);
    border: 2px dashed rgba(255,255,255,0.2); border-radius: var(--wag-radius-12);
    padding: 24px 16px; cursor: pointer;
    color: rgba(255,255,255,0.5); font-size: var(--wag-text-13); text-align: center;
    transition: border-color 0.2s, background 0.2s;
}
.wa .wa-gal-sheet-filelabel:hover {
    border-color: rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.04);
}
.wa-gal-sheet-filelabel input[type="file"] { display: none; }

.wa-gal-sheet-file-label { font-size: var(--wag-text-13); color: rgba(255,255,255,0.55); }

.wa-gal-sheet-progress {
    font-size: var(--wag-text-13); color: var(--wag-type-gal-sheet-progress-ink, var(--wag-style-gal-sheet-body-ink));
    text-align: center; padding: 4px 0;
}

/* =============================================================
   GLOBAL
   ============================================================= */

html { scroll-behavior: smooth; }
/* iPhone: la página se podía arrastrar de lado y todo salía desplazado (Marc,
   2026-10-04, módulo de reserva cortado por la derecha en todos los productos).
   El recorte horizontal estaba sólo en <body> (overflow-x: hidden), y Safari
   en iOS desplaza la página por <html>: con un solo píxel que sobresalga de
   cualquier cosa, deja moverla. `clip` y no `hidden`: hidden en <html> rompe
   las barras position: sticky; clip no crea contenedor de scroll. */
html { overflow-x: clip; }
/* Sin zoom de doble toque (Marc, 2026-10-04): era el que saltaba sin querer
   al hacer scroll. touch-action no se hereda, pero el navegador aplica a cada
   toque la intersección con la de sus antepasados, así que en <html> vale
   para toda la página. Los mapas (Leaflet ya pone `none`) siguen igual. El
   zoom al enfocar campos lo quita `maximum-scale=1` (inc/hooks/viewport.php). */
html { touch-action: manipulation; }

/* =============================================================
   WORLD ATLAS — Mapa interactivo
   ============================================================= */

.wildatlas-copyright {
    text-align: center;
    padding: 18px 0 24px;
    font-size: var(--wag-text-11);
    letter-spacing: 2px;
    color: #1e293b;
    text-transform: uppercase;
    background: var(--wag-surface);
}

.wildatlas-antarctica {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow: visible;
    margin-top: 30px;
    margin-bottom: -1px;
    line-height: 0;
    position: relative;
}

.wildatlas-antarctica svg { width: 100%; height: auto; display: block; }

#aq path { fill: #fff; transition: .3s ease; }
#aq.has-content path { cursor: pointer; }
.wa #aq.has-content:hover path { fill: #a9c3e9; }

#atlas-tooltip {
    position: fixed; z-index: 9999;
    display: inline-flex; align-items: center; gap: var(--wag-space-8);
    padding: 7px 14px; border-radius: var(--wag-radius-999); white-space: nowrap;
    background: rgba(16, 22, 34, 0.95);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.09);
    box-shadow: 0 10px 30px rgba(0,0,0,.42);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    pointer-events: none; opacity: 0;
    transform: translate(-50%, calc(-100% - 12px)); /* centred above the cursor */
    transition: opacity .12s ease;
}
/* little caret pointing down at the cursor */
#atlas-tooltip::after {
    content: ""; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
    border: 6px solid transparent; border-top-color: rgba(16,22,34,0.95);
}
#atlas-tooltip .tooltip-name {
    font-size: 13.5px; font-weight: 700; letter-spacing: -0.2px;
}
#atlas-tooltip .tooltip-cta {
    font-size: var(--wag-text-11); font-weight: 600; color: #4cc585; letter-spacing: 0.3px;
}
/* subtle divider between name and CTA */
#atlas-tooltip .tooltip-cta::before {
    content: ""; display: inline-block; width: 1px; height: 11px;
    background: rgba(255,255,255,.18); margin-right: 8px; vertical-align: -1px;
}

.wildatlas-world-map{
    transition: transform 0.35s ease-out;
    will-change: transform;
}

.wildatlas-world-map path {
    fill: #bcc6d1;
    /* =============================================================
    stroke: #cdd4db;
    stroke-width: 0.15;
    ============================================================= */
    transition: all .2s ease;
    cursor: default;
    pointer-events: none;
}

.wildatlas-world-map path.has-content,
.wildatlas-world-map g.has-content path {
    fill: #3a4251 !important;
    /* =============================================================
    stroke: rgba(255,255,255,0.18) !important;
    stroke-width: 0.1 !important;
     ============================================================= */
    cursor: pointer;
    pointer-events: auto;
    transition: fill .22s ease, filter .22s ease, transform .22s ease, stroke .22s ease;
}

.wildatlas-world-map path.has-content:hover,
.wa .wildatlas-world-map g.has-content:hover path {

    /* =============================================================
    fill: #3a89bc !important;
    stroke: rgba(180,215,240,0.6);
    stroke-width: 0.25;
      ============================================================= */
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.22));
    transform: translateY(-1px);
}

.wildatlas-world-map path.active { fill: #a3d977; stroke: #d8f0b0; }

.wildatlas-world-map g {
    fill: #3a4251;

    transition: all .2s ease;
}

.wildatlas-world-map { animation: atlasFade .8s ease; }

@keyframes atlasFade {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.wildatlas-atlas-fullwidth svg { width: 90vw; height: auto; display: block; margin: 0 auto; }

/* ── Homepage: logo + search overlaid on map ──────────────────────────────── */

/* Logo and search sections: transparent, float above map */
.page-id-34 [data-id="49df3ba"],
.page-id-34 [data-id="d22568f"] {
    position: relative;
    z-index: 5;
    background: transparent !important;
}


/* Tagline injected between logo and search */
.page-id-34 [data-id="d22568f"]::before {
    content: "Discover wildlife, plan your next adventure";
    display: block;
    text-align: center;
    font-size: var(--wag-text-11);
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(25, 40, 60, 0.45);
    margin-bottom: 14px;
}

/* Push search section down for better vertical centering */
.page-id-34 [data-id="d22568f"] {
    margin-top: 55px;
}

/* Limit search width and center it — prevents the pill from spanning full column */
.page-id-34 [data-id="d22568f"] > .elementor-container,
.page-id-34 [data-id="d22568f"] > .e-con-inner {
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.page-id-34 [data-id="49df3ba"] .elementor-container,
.page-id-34 [data-id="49df3ba"] .elementor-column-wrap,
.page-id-34 [data-id="49df3ba"] .elementor-widget-wrap,
.page-id-34 [data-id="49df3ba"] .elementor-element,
.page-id-34 [data-id="d22568f"] .elementor-container,
.page-id-34 [data-id="d22568f"] .elementor-column-wrap,
.page-id-34 [data-id="d22568f"] .elementor-widget-wrap,
.page-id-34 [data-id="d22568f"] .elementor-element {
    background: transparent !important;
    background-color: transparent !important;
}

/* Map section: pull up to sit behind logo + search, with breathing room at top */
.page-id-34 [data-id="117ce73"] {
    position: relative;
    z-index: 0;
    margin-top: -210px;
}

/* ── ──────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .wildatlas-atlas-fullwidth  { display: none; }

}

/* =============================================================
   HOTSPOTS GRID
   ============================================================= */

.species-hotspots-grid,
.country-hotspots-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--wag-space-24);
}

.species-hotspot-card,
.country-hotspot-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--wag-type-country-hotspot-card-radius, var(--wag-style-country-hotspot-card-radius));
    background: var(--wag-surface);
    text-decoration: none;
    box-shadow: var(--wag-type-country-hotspot-card-shadow, var(--wag-style-country-hotspot-card-shadow));
    transition: all .2s ease;
}

.species-hotspot-card:hover,
.wa .country-hotspot-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--wag-type-country-hotspot-card-hover-shadow, var(--wag-style-country-hotspot-card-hover-shadow));
}

/* Shared image wrapper (new class used by the helper) */
.hotspot-card-image {
    position: relative;
    height: 240px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

/* ── Tarjeta de SITIO con el lenguaje de las de producto (2026-09-16) ──────
   Hereda todo de .wa-tour-card; aquí sólo lo que le es propio. */
.wa-tour-card.wa-place-card .wa-place-card__image {
    /* 240px, la altura que esta tarjeta ya tenía: la foto es lo que vende un
       sitio y Marc la quiere igual que antes, no la de 200 del producto. */
    height: 240px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}
/* La insignia de valoración es la de siempre —.hotspot-rating ya ES la
   píldora, posicionada en absoluto— sólo que más pequeña y a 5px del borde
   (Marc, 2026-09-16). Envolverla en otro div no servía: al estar el contenido
   fuera de flujo, el envoltorio colapsaba a 18x6px y lo único que se veía de
   él era su fondo oscuro en la esquina. */
.wa-place-card .hotspot-rating {
    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-place-card .hotspot-rating .star,
.wa-place-card .hotspot-rating .star svg { width: 12px; height: 12px; }
.wa-place-card .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)); }

/* El distintivo de cámara era un óvalo: 16px de icono con padding 7/9 dan
   34x30. Con lado fijo y sin padding es un círculo de verdad. Va a los mismos
   5px que la valoración, para que los dos extremos de la foto respiren igual
   (Marc, 2026-09-16). */
.wa-place-card .hotspot-camera-badge {
    top: 5px; right: 5px;
    /* 26px = la MISMA altura que la píldora de valoración del otro extremo, y
       lado fijo para que sea un círculo y no el óvalo de 34x30 que salía de un
       icono de 16 con padding 7/9 (Marc, 2026-09-16). */
    width: 26px; height: 26px; padding: 0;
    border-radius: var(--wag-type-hotspot-camera-badge-radius, var(--wag-style-hotspot-camera-badge-radius));
    background: rgba(18,23,30,.62);
    line-height: 0;
}
.wa-place-card .hotspot-camera-badge svg {
    /* El dibujo de la cámara ocupa 22x18 de su lienzo de 24: es más ancho que
       alto, así que a igual tamaño parece descolgado dentro del círculo. A 14px
       su masa visual iguala a la de las estrellas. */
    width: 14px; height: 14px; display: block;
}

/* Título a UNA línea con puntos suspensivos (Marc, 2026-09-16). Medido sobre
   los 77 hotspots de la ficha de España en producción, 65 ya caben enteros en
   una; los 12 largos se cortan. Todos ocupan lo mismo y la rejilla no se
   descuadra. */
.wa-place-card .wa-tour-card__title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Aves y mamíferos: dos datos con su icono en una línea, en lugar de las dos
   pastillas verdes que competían con el título. */
.wa-card-line.wa-card-fauna { column-gap: var(--wag-space-16); row-gap: 2px; flex-wrap: wrap; }
.wa-card-sp { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; color: var(--wag-type-card-sp-ink, var(--wag-style-card-line-t-ink)); }
.wa-card-sp svg, .wa-card-sp .wa-ico { width: 13px; height: 13px; flex: none; color: #7a8696; }
html[data-theme="dark"] .wa-card-sp { color: var(--wag-type-card-sp-dark-ink, var(--wag-style-card-line-t-dark-ink)); }
html[data-theme="dark"] .wa-card-sp svg, html[data-theme="dark"] .wa-card-sp .wa-ico { color: #8a95a3; }

/* Legacy classes kept for backwards compat */
.species-hotspot-image,
/* Shared content wrapper */
.hotspot-card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px 20px 20px;
}

.species-hotspot-content,
.hotspot-card-content h3,
.species-hotspot-content h3 { margin: 0 0 4px; color: #111; font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -0.2px; }

.hotspot-card-content p,
.species-hotspot-content p { margin: 0; padding-bottom: 16px; color: #666; line-height: 1.55; font-size: var(--wag-text-14); }

/* Location line below title */
.hotspot-card-location {
    display: flex;
    align-items: center;
    gap: var(--wag-space-4);
    margin: 0 0 14px !important;
    padding-bottom: 0 !important;
    font-size: 12px !important;
    color: #aaa !important;
    font-weight: 500;
    letter-spacing: 0.3px;
    line-height: 1 !important;
}

/* Distance chip inside location line */
.hotspot-card-distance {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    font-size: var(--wag-text-11);
    color: #9aabb8;
    white-space: nowrap;
}

/* ── Star rating ─────────────────────────────────────────── */
.hotspot-rating {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    gap: 3px;
    align-items: center;
    background: rgba(0,0,0,0.45);
    padding: 7px 11px;
    border-radius: var(--wag-radius-999);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 20;
}

.hotspot-rating .star { display: block; width: 16px; height: 16px; }
.hotspot-rating .star svg { width: 16px; height: 16px; }
.hotspot-rating .star.filled { color: #f5a623; }
.hotspot-rating .star.empty  { color: var(--wag-type-ficha-star-ink, var(--wag-style-ficha-star-ink)); }
.hotspot-rating-count {
    margin-left: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
}

/* Camera badge — top right, hides only */
.hotspot-hero-camera-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--wag-type-hotspot-hero-camera-badge-bg, var(--wag-style-hotspot-hero-camera-badge-bg));
    padding: 6px 12px 6px 9px;
    border-radius: var(--wag-radius-999);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--wag-type-hotspot-hero-camera-badge-ink, var(--wag-style-hotspot-hero-camera-badge-ink));
    z-index: 20;
}
.hotspot-hero-camera-badge svg { width: 15px; height: 15px; }

.hotspot-hero-camera-badge span {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.wa-hotspot-creator-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    font-size: var(--wag-text-11);
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
}
.wa-hotspot-creator-badge svg { opacity: 0.7; flex-shrink: 0; }

.hotspot-camera-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wag-type-hotspot-camera-badge-bg, var(--wag-style-hotspot-camera-badge-bg));
    padding: 7px 9px;
    border-radius: var(--wag-radius-999);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--wag-type-hotspot-camera-badge-ink, var(--wag-style-hotspot-camera-badge-ink));
    z-index: 20;
}

/* ── CTA button ──────────────────────────────────────────── */
.hotspot-cta-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: auto;
    padding: 8px 18px;
    border-radius: var(--wag-radius-8);
    font-size: var(--wag-text-11);
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    text-align: center;
    background: #2b7cb0;
    color: #fff !important;
    cursor: pointer;
    transition: background .2s ease, transform .1s ease;
    user-select: none;
    white-space: nowrap;
}

.wa .hotspot-cta-btn:hover {
    background: #1f5f8a;
    transform: translateY(-1px);
    color: #fff !important;
}
/* =============================================================
   AJAX SEARCH LITE
   ============================================================= */

.atlas-country-result   { display: block; }
.atlas-country-main     { font-weight: 700; }
.atlas-country-secondary { color: #777; font-weight: 400; }
.atlas-country-code     { color: #999; }
.atlas-country-hotspots { display: block; font-size: var(--wag-text-12); color: #999; margin-top: 4px; }

/* Container es el punto de referencia para el autocomplete absoluto */
div.asl_w_container {
    position: relative !important;
    margin-top: 10px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: var(--wag-shadow-15) !important;
    border-radius: 999px !important;
}

/* Neutralizar el wrapper intermedio */
div.asl_w,
div.asl_w_p,
div.asl_w > div:not(.probox):not(.asl_r) {
    background: transparent !important;
    border: none !important;
    box-shadow: var(--wag-shadow-15) !important;
    border-radius: 12px !important;
    padding: 0 !important;
}

div.asl_w .probox,
#ajaxsearchlite1 .probox,
#ajaxsearchlite1 div.probox,
.asl_w .probox.proinput_height {
    display: flex !important;
    align-items: center !important;
    height: 44px !important;
    background: rgba(255,255,255,0.92) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255,255,255,0.7) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12) !important;
    overflow: hidden !important;
}

/* proinput sin position para que el containing block del autocomplete suba a asl_w_container */
div.asl_w .probox .proinput {
    position: static !important;
    height: 72px !important;
    width: 100% !important;
}

div.asl_w .probox input.orig {
    height: 100% !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-style: italic;
    color: #111 !important;
    padding-left: 1px !important;
    border: none !important;
    box-shadow: var(--wag-shadow-15) !important;
}

/* Ocultar el <input> autocomplete original — el span #wa-ghost lo reemplaza */
div.asl_w .autocomplete,
div.asl_m .proinput input.autocomplete,
div.asl_m .probox .proinput input.autocomplete,
#ajaxsearchlite1 .probox .proinput input.autocomplete {
    display: none !important;
}

/* Ghost text span inyectado por JS — sufijo de autocompletar */
#wa-ghost {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: var(--wag-text-13);
    font-weight: 500;
    font-style: italic;
    color: #555;
    opacity: 0.5;
    white-space: nowrap;
    z-index: 9;
}

div.asl_w .promagnifier {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    margin-right: 4px !important;
    background: #e8ecf0 !important;
    border-radius: 8px !important;
    border: none !important;
    top: auto !important;
    right: auto !important;
}

div.asl_w .promagnifier svg { fill: #6c788a !important; }

div.asl_w .proclose {
    position: relative !important;
    display: none !important;
    width: 40px !important;
    height: 40px !important;
    top: auto !important;
    right: auto !important;
    margin-right: 8px !important;
}

div.asl_w .proloading { display: none !important; }

div.asl_r {
    margin-top: 10px !important;
    border: 1px solid #ececec !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06) !important;
    background: #fff !important;
}

div.asl_r .item {
    padding: 8px 22px !important;
    border-bottom: 1px solid #f2f2f2 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    background: #fff !important;
    transition: background-color 0.15s ease !important;
    transform: none !important;
}

div.asl_r .item:hover,
div.asl_r .item.hover,
div.asl_r .item.selected {
    background: #fafafa !important;
    padding: 8px 22px !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    transform: none !important;
    margin: 0 !important;
}

div.asl_r .item .asl_content h3,
div.asl_r .item .asl_content h3 a { font-size: 16px !important; font-weight: 700 !important; color: #111 !important; line-height: 1.4 !important; }

div.asl_r .item .asl_content { color: #666 !important; font-size: 14px !important; }

/* Imagen fija — dimensiones bloqueadas para evitar reflow en hover */
div.asl_r .item .asl_image {
    display: block !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}
div.asl_r .item .asl_image img {
    width: 50px !important;
    height: 50px !important;
    object-fit: cover !important;
}

div.asl_r:before,
div.asl_r:after { display: none !important; }

/* =============================================================
   SPECIES SEASON GRID
   ============================================================= */

.species-season-timeline {
    width: 100%;
    max-width: 100%;
    margin: 0 auto 20px;
    position: relative;
}

.species-season-timeline svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.season-dot {
    cursor: pointer;
    transition: r .15s ease;
}
.wa .season-dot:hover { r: 5.5; }

.season-tooltip {
    position: absolute;
    background: #1a2a3a;
    color: #fff;
    font-size: var(--wag-text-11);
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 4px 9px;
    border-radius: 6px;
    pointer-events: none;
    white-space: nowrap;
    transform: translate(-50%, -100%);
    margin-top: -8px;
    z-index: 10;
}


/* "SHOW ALL YEAR" — reset button, left-aligned */


/* Default (all months showing): matches other filters */


/* Month selected: becomes blue reset CTA */


.species-season-wrapper {
    background: var(--wag-surface);
    padding: 0 40px;
    margin-left: -20px;
    margin-right: -20px;
}

/* Grid */

.species-season-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    padding: 0 0 20px;
    align-items: start;
}

/* Card */

.species-season-card {
    display: block;
    position: relative;
    background: var(--wag-surface);
    border: 1px solid var(--wag-type-season-card-line, var(--wag-style-tarjeta-temporada-line));
    border-radius: var(--wag-radius-16);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: all .25s ease;
    box-shadow: var(--wag-shadow-8);
}

.wa-species-rarity-dot {
    /* Ancla a .species-season-content (abajo, position:relative), no a la
       card entera: antes caía sobre la foto en escritorio, donde el borde
       blanco y la sombra tenían sentido por el contraste con la imagen.
       Sobre el fondo blanco del bloque de texto ya no hacen falta. */
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 16;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}
.wa-species-rarity-dot.is-very-rare { background: #dc862f; }
.wa-species-rarity-dot.is-exceptional { background: #c84642; }

.wa .species-season-card:hover { transform: translateY(-3px); border-color: var(--wag-type-season-card-hover-line, var(--wag-style-tarjeta-temporada-hover-line)); }

.species-season-image {
    height: 148px;
    overflow: hidden;
    position: relative;
}

.actions-species-overlay {
    position: absolute;
    backdrop-filter: blur(1px);
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-direction: row;
    padding-bottom: 14px;
    background: var(--wag-type-actions-species-overlay-bg, var(--wag-style-actions-species-overlay-bg));
    opacity: 0;
    transition: opacity .25s ease;
    z-index: 10;
}

.species-season-card:hover .actions-species-overlay,
.wa .country-species-card:hover .actions-species-overlay { opacity: 1; }

.species-favourite {
    color: #fff;
    font-size: 28px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .25s ease;
    cursor: pointer;
    user-select: none;
}

.species-seen {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--wag-radius-999);
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(8px);
    color: #fff;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    height: 30px;
    font-size: var(--wag-text-11);
    padding: 0 9px;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}

/* Mismo motivo que en la píldora: el hover no debe existir en táctil, porque se
   queda pegado y confunde el estado real (marcado / sin marcar). */
@media (hover: hover) {
.wa .species-favourite:hover { color: var(--wag-type-species-favourite-hover-ink, var(--wag-style-species-favourite-hover-ink)); transform: scale(1.15); }
.wa .species-seen:hover { background: var(--wag-type-species-seen-hover-bg, var(--wag-style-species-seen-hover-bg)); color: var(--wag-type-species-seen-hover-ink, var(--wag-style-species-seen-hover-ink)); }
}
.species-favourite.active     { color: var(--wag-type-species-favourite-ink, var(--wag-style-species-favourite-ink)); }
.species-seen.active          { background: var(--wag-surface); color: #111; }

.species-season-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.wa .species-season-card:hover .species-season-image img { transform: scale(1.05); }

/* Atajo editorial: no existe en el HTML de visitantes, y en administración
   permanece oculto hasta hover/focus para no contaminar la card pública. */
.wa-species-card-inspect {
    position: absolute !important; top: 9px !important; right: 9px !important;
    z-index: 14 !important; opacity: 0; transform: translateY(-3px);
    min-height: 30px !important; padding: 6px 10px !important;
    border: 1px solid rgba(255,255,255,.72) !important; border-radius: 8px !important;
    background: rgba(18,25,34,.9) !important; color: #fff !important;
    box-shadow: 0 3px 12px rgba(0,0,0,.22) !important;
    font-size: 11px !important; font-weight: 800 !important; line-height: 1 !important;
    cursor: pointer !important; transition: opacity .15s, transform .15s, background .15s !important;
}
.species-season-card:hover .wa-species-card-inspect,
.wa-species-card-inspect:focus-visible { opacity: 1; transform: none; }
.wa .wa-species-card-inspect:hover,
.wa .wa-species-card-inspect:focus-visible { background: #a95f2a !important; color: #fff !important; }
.wa-species-card-inspect:disabled { opacity: .7 !important; cursor: wait !important; }

/* Gradient overlay + name on image */
.species-season-img-overlay {
    position: absolute;
    inset: 0;
    background: var(--wag-type-species-season-img-overlay-bg, var(--wag-style-species-season-img-overlay-bg));
    display: flex;
    align-items: flex-end;
    padding: 10px;
    /* z-index ABOVE .actions-species-overlay (10, ↓): backdrop-filter blurs
       whatever sits BEHIND the element in the stack, so with z-index:1 the
       name text was behind the blurred layer and blurred along with the
       photo on hover (Marc, 2026-08-02). Raising it above pulls the name out
       of that blur — the photo still blurs, the name stays sharp. Safe:
       pointer-events:none lets clicks fall through to the heart/seen
       buttons underneath, and the two overlays don't overlap vertically
       (name bottom-aligned, buttons centered). */
    z-index: 11;
    pointer-events: none;
}

.species-season-content  { position: relative; padding: 8px 10px 10px; }
.species-season-english  { color: var(--wag-type-species-season-english-ink, var(--wag-style-species-season-english-ink)); font-size: var(--wag-text-13); font-weight: 700; line-height: 1.2; }
.species-season-scientific {
    font-size: var(--wag-text-11); font-style: italic; color: #888; margin-bottom: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.species-season-spanish  {
    font-size: var(--wag-text-12); color: #222; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Tarjeta "Ver todas las especies" ─────────────────────────── */
.species-see-all-card {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    background: #f7f7f5;
    border: 1.5px dashed #ccc;
    border-radius: var(--wag-radius-16);
    text-decoration: none;
    transition: background .2s, border-color .2s, transform .2s;
}
.wa .species-see-all-card:hover {
    background: #f0f0ec;
    border-color: #999;
    transform: translateY(-4px);
}
/* When the see-all card sits inside a hotspot grid it also carries the
   hotspot-card class — neutralise the inherited white-card look so both
   "view all" cards share the exact same dashed style. */
.species-hotspot-card.species-see-all-card,
.country-hotspot-card.species-see-all-card {
    background: var(--wag-type-country-hotspot-card-bg, var(--wag-style-country-hotspot-card-bg));
    border: 1.5px dashed var(--wag-type-country-hotspot-card-line, var(--wag-style-country-hotspot-card-line));
    box-shadow: var(--wag-shadow-14);
    overflow: visible;
    border-radius: var(--wag-radius-16);
}
.species-hotspot-card.species-see-all-card:hover,
.wa .country-hotspot-card.species-see-all-card:hover {
    background: var(--wag-type-country-hotspot-card-hover-bg, var(--wag-style-country-hotspot-card-hover-bg));
    border-color: var(--wag-type-country-hotspot-card-hover-line, var(--wag-style-country-hotspot-card-hover-line));
    box-shadow: var(--wag-shadow-14);
    transform: translateY(-4px);
}
.species-see-all-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
    text-align: center;
}
.species-see-all-count {
    font-weight: 700;
    color: #627085;
    letter-spacing: -0.5px;
}
.species-see-all-link {
    font-size: var(--wag-text-13);
    color: #666;
    letter-spacing: 0.3px;
}

/* ── Página completa de especies ──────────────────────────────── */
.species-season-wrapper.species-full-page {
    margin-left: 0;
    margin-right: 0;
    padding-top: 0;
    /* Sin padding lateral propio: el gutter ya lo pone .wa-section, que es el
       contenedor del resto del sitio (20px). Con los 40px que traía la regla
       base, esta página metía sus tarjetas y su módulo de filtros 20px más
       adentro que cualquier otra — se notaba al cambiar de página. */
    padding-left: 0;
    padding-right: 0;
}

/* Temporada v3 publicada: la tarjeta rica existe solo cuando el lector ha
   resuelto un veredicto APPROVED para este hotspot. Las especies sin temporada
   conservan exactamente la tarjeta anterior. */
.species-full-page .species-season-grid {
    /* Cinco por fila, no auto-fill: con `auto-fill` el número de columnas lo
       decide el ancho y saltaba de 4 a 6 sin avisar. Fijo se sabe siempre qué
       se ve, y la escalera de abajo lo baja a 4/3/2 conforme encoge. */
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--wag-space-12);
    align-items: stretch;
    padding-bottom: 0; /* sin cola propia: el final lo marca la sección */
}
.species-full-page > .wa-filters-row { margin-bottom: 15px; }
/* Los cortes NO van en 1024: a ese ancho exacto —el portátil de 13 pulgadas y la
   ventana a media pantalla— todavía caben cinco de 187px, y cortar justo ahí
   dejaba en cuatro a media base de usuarios. */
@media (max-width: 1000px) {
    .species-full-page .species-season-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
    .species-full-page .species-season-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.species-season-card--v3 { display: flex; flex-direction: column; height: 100%; }
.species-season-card--v3 .species-season-image { height: 148px; flex: 0 0 auto; }
.species-season-card--v3 .species-season-content {
    display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0;
    padding: 10px 11px 12px;
}
.species-season-card--v3 .species-season-scientific { margin-bottom: 8px; }
.species-season-v3-heading { display: none; min-width: 0; }
.species-season-card--v3 .wa-season-chart-visual { margin: 0; }
.species-season-card--v3 .wa-season-bars { height: 41px; }
.species-season-card--v3 .wa-season-no-data {
    display: flex; align-items: center; justify-content: center; height: 41px;
    border-bottom: 1px solid #d6e0e6; color: #84929d; font-size: 10px;
    font-weight: 800; letter-spacing: .015em; text-align: center;
}
.species-season-card--v3 .wa-season-chart-visual.is-no-data .wa-season-month-labels {
    display: block; height: 9px;
}
html[data-theme="dark"] .species-season-card--v3 .wa-season-no-data {
    border-color: #44515d; color: #8e9ba6;
}
.species-season-v3-caption {
    display: flex; align-items: baseline; gap: var(--wag-space-4); min-height: 2.55em;
    margin: 8px 0 0; color: #536572; font-size: 10.5px; line-height: 1.3;
}
.species-season-v3-caption > span {
    flex: 0 0 auto; width: 14px; height: 3px; margin-right: 2px;
    border-radius: var(--wag-radius-999); background: #8ec5dc; transform: translateY(-2px);
}
.species-season-v3-caption.is-event > span { background: #75bc8a; }
.species-season-v3-caption b { color: #344a3e; font-weight: 850; white-space: nowrap; }
html[data-theme="dark"] .species-season-v3-caption { color: #a9b6c1; }
html[data-theme="dark"] .species-season-v3-caption b { color: #c8d6ce; }

@media (max-width: 700px) {
    /* Las tarjetas con temporada son una fila compacta. Las antiguas siguen en
       la rejilla de dos columnas y no fingen tener datos que no existen. */
    .species-full-page .species-season-card--v3 {
        grid-column: 1 / -1; display: grid; grid-template-columns: 96px minmax(0,1fr);
        min-height: 126px; height: auto;
    }
    .species-season-card--v3 .species-season-image { height: 100%; min-height: 126px; }
    .species-season-card--v3 .species-season-img-overlay { display: none; }
    .species-season-card--v3 .species-season-content { justify-content: center; padding: 9px 10px 8px; }
    .species-season-card--v3 .species-season-scientific { display: none; }
    .species-season-v3-heading { display: flex; align-items: baseline; gap: 6px; margin-bottom: 5px; }
    .species-season-v3-heading strong,
    .species-season-v3-heading em { overflow: hidden; min-width: 0; text-overflow: ellipsis; white-space: nowrap; }
    .species-season-v3-heading strong { flex: 0 1 auto; color: #263b30; font-size: var(--wag-text-12); font-weight: 850; font-style: normal; }
    .species-season-v3-heading em { flex: 1 1 auto; color: #87939d; font-size: 9.5px; }
    .species-season-card--v3 .wa-season-bars { height: 43px; }
    .species-season-card--v3 .wa-season-no-data { height: 43px; font-size: 9.5px; }
    .species-season-card--v3 .wa-season-month-labels { margin-top: 2px; font-size: 7px; }
    .species-season-v3-caption { min-height: 0; margin-top: 5px; font-size: 9.5px; white-space: nowrap; }
    .species-season-card--v3 .country-species-touch-actions { display: none; }
    html[data-theme="dark"] .species-season-v3-heading strong { color: #e3ebe6; }
}

@media (max-width: 768px) {
    .species-season-grid    { grid-template-columns: repeat(2, 1fr); gap: var(--wag-space-16); }

}

/* =============================================================
   COUNTRY TOP SPECIES — Slider compacto
   ============================================================= */

.country-species-wrapper {
    padding: 0;
    margin-bottom: 0;
    position: relative;
}

/* La barra de filtro va por encima del degradado del slider */
.country-species-wrapper .wa-tours-filterbar {
    position: relative;
    z-index: 3;
}

/* Margen lateral para que las flechas círculo no queden pegadas al
   borde del container (Marc, 2026-07-28) */
.country-species-wrapper .wa-home-slider-wrap {
    margin: 0 10px;
    isolation: isolate;
}

/* Country cards are links and their image hover creates a stacking context.
   Keep the shared home-style arrows decisively above that link layer so the
   whole circle, not just one half, receives the click. */
.country-species-wrapper .country-species-grid { position: relative; z-index: 1; }
.country-species-wrapper .wa-home-slider-btn { z-index: 10 !important; pointer-events: auto !important; }

/* Barra de progreso */
.country-species-track {
    height: 3px;
    background: var(--wag-type-country-species-track-bg, var(--wag-style-country-species-track-bg));
    border-radius: var(--wag-radius-999);
    margin-top: 14px;
    overflow: hidden;
}

.country-species-progress {
    height: 100%;
    background: var(--wag-type-country-species-progress-bg, var(--wag-style-country-species-progress-bg));
    border-radius: var(--wag-radius-999);
    width: 0%;
    transition: width .12s ease;
}

/* Filtros — texto con separador */


/* Slider */
.country-species-grid {
    display: flex;
    gap: var(--wag-space-12);
    overflow-x: auto;
    overflow-y: clip;
    flex-wrap: nowrap;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
}
.country-species-grid:active { cursor: grabbing; }
.country-species-grid::-webkit-scrollbar { display: none; }

/* Card compacta */
.country-species-card {
    display: flex;
    flex-direction: column;
    flex: 0 0 160px;
    width: 160px;
    min-width: 160px;
    border-radius: var(--wag-radius-12);
    overflow: hidden;
    text-decoration: none;
    border: 1px solid #ececec;
    background: var(--wag-surface);
    scroll-snap-align: start;
    transition: transform .25s ease, border-color .2s ease;
}

.wa .country-species-card:hover {
    transform: translateY(-3px);
    border-color: var(--wag-type-country-species-card-hover-line, var(--wag-style-country-species-card-hover-line));
}

/* Imagen */
.country-species-image {
    height: 160px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.country-species-image img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.wa .country-species-card:hover .country-species-image img { transform: scale(1.05); }

/* Overlay con nombre */
.country-species-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 30%, rgba(0,0,0,0.68) 100%);
    display: flex;
    align-items: flex-end;
    padding: 10px;
    /* z-index ABOVE .actions-species-overlay (10, ↓): backdrop-filter blurs
       whatever sits BEHIND the element in the stack, so with no z-index the
       name text was behind the blurred layer and blurred along with the
       photo on hover (same fix as .species-season-img-overlay, Marc,
       2026-08-02). pointer-events:none lets clicks fall through to the
       heart/seen buttons underneath. */
    z-index: 11;
    pointer-events: none;
}

.country-species-name-block { width: 100%; }

.country-species-english {
    color: var(--wag-type-country-species-english-ink, var(--wag-style-country-name-ink));
    font-size: var(--wag-text-13);
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* Meta */
.country-species-content {
    padding: 8px 10px 10px;
}

.country-species-scientific {
    font-size: var(--wag-text-11);
    font-style: italic;
    color: #888;
    line-height: 1.3;
    margin-bottom: 2px;
}

.country-species-spanish {
    font-size: var(--wag-text-12);
    font-weight: 500;
    color: #222;
    line-height: 1.2;
}

/* ── Touch-only action bar (♥ + ✓ Seen) bajo el nombre ─────────────────── */
/* Desktop: oculto — los botones ya están en el overlay hover de la imagen */
.country-species-touch-actions { display: none; }

/* Móvil (≤768px): el overlay hover no funciona → barra física de acciones */
@media (max-width: 768px) {
    .actions-species-overlay { display: none !important; }

    .country-species-touch-actions {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--wag-space-12);
        padding: 10px 10px 8px;
        border-top: 1px solid var(--wag-type-country-species-touch-actions-topline, var(--wag-style-country-species-touch-actions-topline));
        margin-top: 4px;
    }
    .country-species-touch-actions .species-favourite {
        font-size: 26px;
        color: #c8d3dc;
        line-height: 1;
        flex-shrink: 0;
        cursor: pointer;
        transition: color .2s, transform .2s;
    }
    .country-species-touch-actions .species-favourite:active,
    .country-species-touch-actions .species-favourite.active { color: var(--wag-type-species-favourite-ink, var(--wag-style-species-favourite-ink)); transform: scale(1.18); }
    .country-species-touch-actions .species-seen {
        display: inline-flex;
        align-items: center;
        background: #eef1f5;
        color: #3a4a5a;
        font-size: var(--wag-text-12);
        font-weight: 700;
        height: 32px;
        padding: 0 14px;
        border-radius: var(--wag-radius-999);
        border: none;
        cursor: pointer;
        transition: background .2s, color .2s;
    }
    .country-species-touch-actions .species-seen:active,
    .country-species-touch-actions .species-seen.active {
        background: var(--wag-type-species-seen-bg, var(--wag-style-species-seen-bg));
        color: var(--wag-type-species-seen-ink, var(--wag-style-species-seen-ink));
        font-weight: 800;
    }
    html[data-theme="dark"] .country-species-touch-actions { border-top-color: var(--wag-type-country-species-touch-actions-dark-topline, var(--wag-style-country-species-touch-actions-dark-topline)); }
    html[data-theme="dark"] .country-species-touch-actions .species-favourite { color: var(--wag-type-species-favourite-dark-ink, var(--wag-style-species-favourite-dark-ink)); }
    html[data-theme="dark"] .country-species-touch-actions .species-seen { background: var(--wag-type-species-seen-dark-bg, var(--wag-style-species-seen-dark-bg)); color: var(--wag-type-species-seen-dark-ink, var(--wag-style-species-seen-dark-ink)); }
}

/* Móvil: la card del slider de Top fauna del país es la MISMA que la de la
   rejilla de especies del hotspot en móvil (Marc, 2026-10-04): foto cuadrada
   con el nombre encima, el científico debajo y sin los botones ♥ / ✓ Visto.
   Valores copiados de `.species-season-card:not(--v3)` en móvil (~línea 7425)
   y de su base (.species-season-card, ~6898). El slider sigue siendo slider:
   tres tarjetas por pantalla, igual que las tres columnas del hotspot. */
@media (max-width: 700px) {
    /* Y se mueve como los sliders de la home en móvil (Marc, 2026-10-04): la
       fila va de borde a borde de la pantalla, la primera card alineada con el
       título y las cards con el ancho de los tiles de especies de la home
       (--cards: 2.66, ~línea 16002), así que asoma la siguiente por la derecha.
       Mismo truco a sangre que la barra de filtros: 50vw - 50% es el margen
       del contenedor, sea el que sea. */
    .country-species-grid {
        gap: var(--wag-space-12);
        margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
        padding-left: calc(50vw - 50%); padding-right: calc(50vw - 50%);
        /* En px y no con el truco del 50%: en scroll-padding el % se mide
           contra la propia fila (que ya es de borde a borde) y daba 0, así
           que el «imán» del slider pegaba la primera card al borde. 20px es
           el margen de las secciones de la ficha de país en móvil (medido). */
        scroll-padding-left: 20px;
    }
    .country-species-card {
        --cards: 2.66;
        flex: 0 0 calc((100vw - 16px) / var(--cards) - 12px); width: auto; min-width: 0;
        border: 1px solid var(--wag-type-country-species-card-line, var(--wag-style-country-species-card-line)); border-radius: var(--wag-radius-16);
        box-shadow: var(--wag-shadow-8);
    }
    .country-species-image { height: auto; aspect-ratio: 1 / 1; }
    .country-species-image img { height: 100%; }
    .country-species-img-overlay {
        background: var(--wag-type-country-species-img-overlay-bg, var(--wag-style-country-species-img-overlay-bg));
        padding: 8px;
    }
    .country-species-english {
        font-size: 11.5px; line-height: 1.2; text-shadow: none;
        min-width: 0; max-width: 100%; overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto;
    }
    .country-species-content { padding: 6px 7px 7px; }
    .country-species-scientific {
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        color: var(--wag-type-country-species-scientific-ink, var(--wag-style-country-species-scientific-ink)); font-size: 9.5px; font-style: italic; line-height: 1.3; margin: 1px 0 0;
    }
    .country-species-card .country-species-touch-actions { display: none; }
}

/*
 * Móvil: la tarjeta de especie es un CUADRADO de foto (Marc, 2026-09-25).
 * Con tres columnas de 104 px, la foto de 148 más el científico y la barra
 * ♥ / ✓ Seen daban tarjetas de 104×241, altísimas. Se sacrifican los botones
 * y el científico: el nombre común ya va sobre la foto (.species-season-img-overlay).
 *
 * El bloque de contenido NO se oculta: dentro vive el punto de rareza. Pasa a
 * ser una capa encima de la foto sin fondo ni relleno, así el punto queda
 * arriba a la derecha de la tarjeta. Sólo la tarjeta clásica: la v3 (con
 * temporada) ya tiene su propia fila compacta en /species/.
 */
/* Móvil, 2026-09-26 (Marc: «cards gigantes, mínimo 3 por fila y con el
   científico abajo»): tres por fila, foto cuadrada con el nombre común
   encima (su capa de siempre) y debajo el científico, con la tipografía de
   la fila compacta de la v3 (.species-season-v3-heading). */
@media (max-width: 700px) {
    .species-full-page .species-season-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wag-space-8); }
    .species-season-card:not(.species-season-card--v3):not(.species-see-all-card) { display: flex; flex-direction: column; height: auto; }
    .species-season-card:not(.species-season-card--v3) .species-season-image { height: auto; aspect-ratio: 1 / 1; flex: none; }
    .species-season-card:not(.species-season-card--v3) .species-season-content {
        position: relative; padding: 6px 7px 7px;
    }
    .species-season-card:not(.species-season-card--v3) .species-season-scientific {
        display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        color: var(--wag-type-species-season-scientific-ink, var(--wag-style-species-season-scientific-ink)); font-size: 9.5px; font-style: italic; margin: 1px 0 0;
    }
    .species-season-card:not(.species-season-card--v3) .country-species-touch-actions { display: none; }
    /* Nombre sobre la foto un pelín más pequeño: a 106px de ancho partía en dos líneas. */
    .species-season-card:not(.species-season-card--v3) .species-season-english {
        font-size: 11.5px; line-height: 1.2;
        /* Nombres de una sola palabra más anchos que la tarjeta (Quebrantahuesos)
           se salían por la derecha: se parten con guion y respetan el margen. */
        min-width: 0; max-width: 100%; overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto;
    }
    .species-season-card:not(.species-season-card--v3) .species-season-img-overlay { padding: 8px; }
    /* El punto de rareza vive en el bloque de texto: lo subimos a la foto. */
    .species-season-card:not(.species-season-card--v3) .wa-species-rarity-dot { top: -18px; right: 7px; }

    /* La capa oscura le pone fondo al contenido (arriba, «Season species»)
       y con más especificidad: sin esto taparía la foto entera. */
    html[data-theme="dark"] body .species-season-card:not(.species-season-card--v3) .species-season-content { background: none; }
}

/* =============================================================
   HOTSPOT HERO RATING
   ============================================================= */

.wa-hero-rating-row {
    display: flex;
    align-items: center;
    gap: var(--wag-space-16);
    flex-wrap: wrap;
    margin-top: 14px;
    position: relative; /* anchor for the quick-review float */
}

.wa-write-review-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: var(--wag-radius-999);
    color: rgba(255,255,255,0.75);
    font-size: var(--wag-text-12);
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 6px 14px;
    cursor: not-allowed;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background .2s ease, color .2s ease;
}

.wa-hero-rating {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wa-hero-rating__stars {
    display: flex;
    gap: 3px;
}

.wa-star {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 22px;
    height: 22px;
    color: rgba(255,255,255,0.25);
    transition: color .15s ease, transform .15s ease;
    line-height: 1;
}

.wa-star svg {
    width: 100%;
    height: 100%;
    display: block;
}

.wa-star.is-filled,
.wa-star.is-hovered { color: var(--wag-type-star-ink, var(--wag-style-star-ink)); }

.wa-star:hover,
.wa .wa-star:focus-visible { transform: scale(1.15); outline: none; }

.wa-hero-rating--guest .wa-star { cursor: default; }

.wa-hero-rating--saving { opacity: 0.6; pointer-events: none; }

.wa-hero-rating__count {
    font-size: var(--wag-text-12);
    font-weight: 500;
    color: var(--wag-type-hero-rating-count-ink, var(--wag-style-hero-rating-count-ink));
    letter-spacing: 0.3px;
    white-space: nowrap;
}