/* =============================================================
   GD_PLACE — single-gd_place.php (hotspots)
   ============================================================= */

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

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

.place-title {
    font-size: 72px;
    font-weight: 800;
    letter-spacing: -2px;
    line-height: 0.95;
    color: #111;
    margin-bottom: 18px;
    /* Sin text-transform: capitalize (Marc, 2026-10-12): convertía «i», «de»,
       «to», «and» en «I», «De», «To», «And». Los 1.034 nombres publicados ya
       empiezan en mayúscula (comprobado en producción). */
}

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

.category-name {
    font-size: var(--wag-text-20);
    font-style: normal;
    color: var(--wag-type-category-name-ink, var(--wag-style-category-name-ink));
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.82;
}

.country-name {
    font-size: var(--wag-text-16);
    color: var(--wag-type-country-name-ink, var(--wag-style-country-name-ink));
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    opacity: 0.68;
}
/* El país del hero lleva a su página (hotspot-hero.php, 2026-10-11): mismo
   texto blanco; el subrayado solo al pasar, para que se sepa que se pulsa. */
.wa .wa-hero-country-link,
.wa .wa-hero-country-link:visited,
.wa .wa-hero-country-link:focus,
.wa .wa-hero-country-link:active { color: inherit; text-decoration: none; }
.wa .wa-hero-country-link:hover,
.wa .wa-hero-country-link:focus-visible {
    color: var(--wag-type-hero-country-link-hover-ink, var(--wag-style-hero-country-link-hover-ink)); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; outline: none;
}

/* Hero */

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

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

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

.place-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;
}

.place-hero-content .place-title {
    /* Corrección óptica del margen lateral izquierdo (Marc, 2026-09-14).
       Las cajas del título y del subtítulo empiezan en la MISMA x — el CSS
       siempre estuvo cuadrado. Lo que no cuadra es la tinta: el hueco que la
       fuente deja a la izquierda del glifo escala con el cuerpo, así que a 72px
       son ~4px y en el subtítulo de 14px apenas ~1,3px. Medido con canvas
       (actualBoundingBoxLeft) en la pila del sistema. Va en em para seguir al
       clamp del font-size; es aproximado por naturaleza, porque el hueco
       depende de la letra inicial. */
    margin: 0 0 6px -0.04em;
    color: var(--wag-type-place-title-ink, var(--wag-style-hotspot-rating-count-ink));
    font-size: clamp(40px, 4vw, 60px); /* era 72: los nombres largos iban a 2 líneas y tapaban la foto (2026-10-12) */
    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);
}

.place-hero-content .place-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.place-hero-content .category-name { line-height: 1.15; }
.place-hero-content .country-name { line-height: 1.2; }

.place-hero-content .separator { display: none; }

/* Hotspot de naturaleza: «Parque Nacional · Suecia» en una línea, mismo cuerpo
   y color que la categoría; si no cabe, el país baja entero (wrap). */
.place-hero-content .place-meta--inline {
    flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: var(--wag-space-8);
}
.place-hero-content .place-meta--inline .separator,
.place-hero-content .place-meta--inline .country-name {
    display: inline; font-size: var(--wag-text-20); line-height: 1.15; color: var(--wag-type-country-name-ink, var(--wag-style-country-name-ink)); opacity: .82;
}

/* Mobile */

@media (max-width: 768px) {
    .place-hero-banner { height: 270px; }
    .place-hero-content { padding: 0 28px 28px; }
    .place-hero-content .place-title {
        font-size: clamp(22px, 7.5vw, 48px);
        line-height: 1.0;
        letter-spacing: -0.5px;
        overflow-wrap: break-word;
        word-break: break-word;
    }
    .place-hero-content .place-meta,
    .place-hero-content .place-meta--inline {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
    .place-hero-content .category-name { font-size: 15px; line-height: 1.15; }
    .place-hero-content .country-name,
    .place-hero-content .place-meta--inline .country-name {
        font-size: var(--wag-text-13);
        line-height: 1.15;
        color: rgba(255, 255, 255, .8);
    }
    .place-hero-content .separator,
    .place-hero-content .place-meta--inline .separator,
.place-hero-banner .wa-hero-rating-link,
.place-hero-banner .wa-follow-count{ display: none; }
    .place-hero-banner .wa-hero-rating-row { margin-top: 6px; gap: 4px 8px; }
    /* Prueba de tipografía limitada a 9 Pins. */
    body.postid-2129 .place-hero-content { padding-bottom: 20px; }
    body.postid-2129 .place-hero-content .place-title {
        margin-bottom: 1px;
        font-size: clamp(23px, 6vw, 30px);
    }
    body.postid-2129 .wa-hero-rating { gap: 6px; }
    body.postid-2129 .wa-hero-rating__stars { gap: 2px; }
    body.postid-2129 .wa-star { width: 20px; height: 20px; }
    body.postid-2129 .wa-follow { gap: 6px; }
    body.postid-2129 .wa-follow-btn { width: 88px; }
}

/* =============================================================
   OPERATOR — single-operator.php
   ============================================================= */

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

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

.operator-title {
    font-size: 72px;
    font-weight: 800;
    letter-spacing: -2px;
    line-height: 0.95;
    color: #111;
    margin-bottom: 18px;
    /* Sin text-transform: capitalize (Marc, 2026-10-12): convertía «i», «de»,
       «to», «and» en «I», «De», «To», «And». Los 1.034 nombres publicados ya
       empiezan en mayúscula (comprobado en producción). */
}

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

/* Hero */

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

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

/* No featured image: dark branded gradient keeps the hero usable */
.operator-hero-banner.hero-banner--no-image {
    background: var(--wag-type-operator-hero-banner-bg, var(--wag-style-operator-hero-banner-bg));
}

.operator-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.45) 35%, rgba(0,0,0,0.08) 100%);
}
/* Reduce overlay opacity when there's no photo (gradient already provides contrast) */
.hero-banner--no-image .operator-hero-overlay {
    background: var(--wag-type-operator-hero-overlay-bg, var(--wag-style-operator-hero-overlay-bg));
}

.operator-hero-content {
    position: absolute;
    inset: 0;
    z-index: 5;
}

.operator-hero-content .operator-title {
    position: absolute;
    left: 45px;
    /* 12px por encima de las estrellas (bottom 40px + 23px de fila), no 32:
       sin subtítulo, el título quedaba despegado de su fila (2026-10-12). */
    bottom: 75px;
    /* Corrección óptica del margen izquierdo, la misma que .place-title. */
    margin: 0 0 0 -0.04em;
    color: var(--wag-type-operator-title-ink, var(--wag-style-operator-title-ink));
    font-size: clamp(40px, 4vw, 60px); /* era 72: los nombres largos iban a 2 líneas y tapaban la foto (2026-10-12) */
    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);
}

/* Reviews + Follow row sits just under the title (same look as hotspots) */
.operator-hero-content .wa-hero-rating-row {
    position: absolute; left: 45px; bottom: 40px; margin: 0; z-index: 10;
}
.operator-hero-content .wa-hero-claim {
    position: absolute; left: 45px; bottom: 12px; margin: 0; z-index: 10;
}

.operator-hero-content .operator-meta {
    position: absolute;
    left: 45px;
    bottom: 38px;
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline;
    gap: var(--wag-space-12);
    flex-wrap: nowrap;
    white-space: nowrap;
    margin: 0;
    color: #fff !important;
    z-index: 10;
    text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

.operator-hero-content .separator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.65) !important;
    font-size: var(--wag-text-18);
    margin: 0 2px;
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .operator-hero-banner { height: 270px; }
    /* Móvil igual que el hero de un hotspot de negocio (Marc, 2026-10-01):
       en vez de piezas sueltas con posición fija —título a 95px del fondo y
       estrellas a 40px, con un hueco en medio—, una columna pegada abajo con
       el mismo relleno (28px), 6px entre título y estrellas, y sin el texto
       «5 · 1 valoración» ni el contador de seguidores. Ver .place-hero-*. */
    .operator-hero-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
        padding: 0 28px 28px;
    }
    .operator-hero-content .operator-title,
    .operator-hero-content .operator-meta,
    .operator-hero-content .wa-hero-rating-row,
    .operator-hero-content .wa-hero-claim {
        position: static;
        left: auto; right: auto; bottom: auto;
    }
    .operator-hero-content .operator-title {
        margin: 0 0 6px -0.04em;
        font-size: clamp(22px, 7.5vw, 48px);
        line-height: 1.0;
        letter-spacing: -0.5px;
        max-width: 100%;
        overflow-wrap: break-word;
        word-break: break-word;
    }
    .operator-hero-content .operator-meta { font-size: 15px; white-space: normal; }
    .operator-hero-content .wa-hero-rating-row { margin-top: 6px; gap: 4px 8px; }
    .operator-hero-banner .wa-hero-rating-link,
.operator-hero-banner .wa-follow-count,
.operator-hero-content .wa-hero-claim:empty{ display: none; }
    /* Nombres de más de 40 caracteres (is-long, lo pone la plantilla): a 28px
       llegaban a 4 líneas, media cabecera; así quedan en 3 (2026-10-12). */
    .place-hero-content .place-title.is-long,
    .operator-hero-content .operator-title.is-long { font-size: clamp(20px, 6.4vw, 40px); }
}

/* =============================================================
   FOOTER
   ============================================================= */

.wa-footer {
    background: var(--wag-type-footer-bg, var(--wag-style-footer-bg));
    color: var(--wag-type-footer-ink, var(--wag-style-footer-ink));
    font-size: var(--wag-text-13);
    margin-top: 0;
}

.wa-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 56px 40px 32px;
}

/* Main row: brand + cols */
.wa-footer-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 48px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.wa-footer-brand {
    flex-shrink: 0;
    max-height: 240px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.wa-footer-logo {
    display: inline-block;
    text-decoration: none;
}
.wa-footer-logo-img {
    height: auto;
    width: auto;
    max-width: 220px;
    max-height: 210px;
    display: block;
    opacity: 0.9;
    transition: opacity .2s ease;
}
.wa .wa-footer-logo:hover .wa-footer-logo-img { opacity: 1; }

.wa-footer-tagline {
    font-size: var(--wag-text-12);
    color: #666;
    margin: 0;
    font-style: italic;
}

/* Columns */
.wa-footer-cols {
    display: flex;
    gap: 64px;
}

.wa-footer-col-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 16px;
}

.wa-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wa-footer-col ul li a {
    color: #888;
    text-decoration: none;
    font-size: var(--wag-text-13);
    transition: color .15s ease;
}
.wa .wa-footer-col ul li a:hover { color: #4fadd4; }

/* Bottom bar */
.wa-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--wag-space-12);
    padding-top: 24px;
    font-size: var(--wag-text-12);
    color: #555;
}

.wa-footer-copy { color: #555; }

.wa-footer-legal {
    display: flex;
    align-items: center;
    gap: var(--wag-space-8);
}

.wa-footer-legal a {
    color: #555;
    text-decoration: none;
    transition: color .15s ease;
}161c24
.wa .wa-footer-legal a:hover { color: #4fadd4; }

.wa-footer-dot { color: #444; }

/* ── Contact / Report modals ─────────────────────────────────────────── */
.wa-modal {
    position: fixed;
    inset: 0;
    z-index: 100100; /* sobre la barra superior (100000) */;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wa-modal[hidden] { display: none; }
/* El fondo no se mueve mientras hay un modal abierto. La clase la ponía ya
   `custom-trips.php` al abrir, pero NUNCA tuvo CSS: el aviso salía y la página
   seguía deslizándose por detrás. Con los modales a pantalla completa en móvil
   eso se nota el doble, porque no hay tarjeta que sirva de referencia.
   OJO: en el pie, `.wa-modal-open` es además la clase del ENLACE que abre el
   modal (site-footer.php); aquí va anclada a `body`, así que no se pisan. */
body.wa-modal-open { overflow: hidden; }
.wa-modal-overlay {
    position: absolute;
    inset: 0;
    background: var(--wag-type-modal-overlay-bg, var(--wag-style-modal-backdrop-bg));
    cursor: pointer;
}
.wa-modal-box {
    position: relative;
    background: var(--wag-surface);
    border-radius: var(--wag-type-modal-box-radius, var(--wag-style-modal-box-radius));
    padding: 40px 44px;
    width: min(540px, 94vw);
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: var(--wag-type-modal-box-shadow, var(--wag-style-modal-box-shadow));
}

html[data-theme="dark"] .wa-modal-box {background: var(--wag-type-modal-box-dark-bg, var(--wag-style-modal-box-dark-bg));}

.wa-modal-x {
    position: absolute;
    top: 14px; right: 18px;
    background: none;
    border: none;
    font-size: var(--wag-text-24);
    color: var(--wag-type-modal-x-ink, var(--wag-style-modal-close-ink));
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
    transition: color .15s;
}
.wa .wa-modal-x:hover { color: var(--wag-type-modal-x-hover-ink, var(--wag-style-modal-close-hover-ink)); }
.wa-modal-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--wag-type-modal-title-ink, var(--wag-style-modal-title-ink));
    margin: 0 0 6px;
    line-height: 1.2;
}
.wa-modal-sub {
    font-size: var(--wag-text-14);
    color: var(--wag-type-modal-sub-ink, var(--wag-style-modal-sub-ink));
    margin: 0 0 26px;
    line-height: 1.5;
}
.wa-contact-form .wa-form-row { margin-bottom: 16px; }
.wa-contact-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: var(--wag-text-13);
    font-weight: 600;
    color: #333;
}
.wa-contact-form input,
.wa-contact-form select,
.wa-contact-form textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 9px;
    font-size: var(--wag-text-14);
    color: #222;
    background: #f9fafb;
    transition: border-color .18s;
    box-sizing: border-box;
    font-family: inherit;
}
.wa-contact-form input:focus,
.wa-contact-form select:focus,
.wa .wa-contact-form textarea:focus {
    outline: none;
    border-color: #16a34a;
    background: var(--wag-surface);
}
.wa-contact-form textarea { resize: vertical; min-height: 110px; }
.wa-form-footer {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 6px;
}
.wa-form-submit:not(.wag-btn) {
    background: var(--wag-type-ficha-form-submit-bg, var(--wag-style-ficha-form-submit-bg));
    color: var(--wag-type-ficha-form-submit-ink, var(--wag-style-ficha-form-submit-ink));
    border: none;
    border-radius: var(--wag-type-ficha-form-submit-radius, var(--wag-style-ficha-form-submit-radius));
    padding: 11px 30px;
    font-size: var(--wag-text-14);
    font-weight: 600;
    cursor: pointer;
    transition: background .18s;
    font-family: inherit;
}
.wa .wa-form-submit:not(.wag-btn):hover:not(:disabled) { background: var(--wag-type-ficha-form-submit-hover-bg, var(--wag-style-ficha-form-submit-hover-bg)); }
.wa-form-submit:not(.wag-btn):disabled { opacity: .55; cursor: default; }
.wa-form-msg { font-size: var(--wag-text-13); }
.wa-form-msg.is-ok  { color: #16a34a; }
.wa-form-msg.is-err { color: var(--wag-type-form-msg-ink, var(--wag-style-form-msg-ink)); }

/* Responsive */
@media (max-width: 768px) {
    .wa-footer-main {
        flex-direction: column;
        gap: 32px;
    }
    .wa-footer-cols { gap: 40px; }
    .wa-footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* =============================================================
   SCROLL TO TOP — RETIRADO
   =============================================================
   Astra pinta #ast-scroll-top abajo a la derecha, y ahí es donde va ahora la
   burbuja de chat (Marc, 2026-07-20). Convivían mal: dos círculos flotantes
   solapados en la misma esquina.

   Se oculta por CSS y no desactivando la opción en el Customizer porque así el
   cambio viaja con el tema; si alguien reactiva la opción, sigue sin verse.
   Volver arriba con la rueda o Inicio es un gesto que la gente ya tiene. */
#ast-scroll-top { display: none !important; }

/* Social icons */
.wa-footer-social {
    display: flex;
    gap: var(--wag-space-16);
    align-items: center;
}

.wa-social-link {
    transition: color .2s ease;
    display: flex;
    align-items: center;
}

.wa .wa-social-link:hover {
    color: rgba(255,255,255,0.85);
}

/* =============================================================
   LAYOUT — Eliminar gap entre contenido y footer
   ============================================================= */

#content,
.ast-container,
.site-content,
.ast-article-post,
.ast-page-builder-template .entry-content,
.entry-content,
#primary{
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* =============================================================
   LOCAL GUIDES & TOURS
   ============================================================= */

.wa-tours-section {
    margin: 0;
}

/* Alias — use .wa-section-heading as the canonical module title */
.wa-tours-title {
    font-size: var(--wag-text-12);
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 28px;
}

.wa-tours-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-auto-rows: 1fr;    /* all cards identical height, sized to the tallest content
                               (was a fixed 460px → left big white gaps on short cards) */
    gap: var(--wag-space-24);
    align-items: stretch;
}
.wa-hides-section .wa-tours-grid {
    grid-auto-rows: 1fr;
}

/* Pocos productos en una fila (wa_resource_group_products): tres columnas
   fijas, las mismas que una rejilla normal, y cada tipo ocupa tantas como
   tarjetas tiene. Dentro, su rejilla se ajusta a esas columnas. */
.wa-book-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--wag-space-24);
    align-items: stretch;
}
/* Siempre en columna: título encima y rejilla debajo, venga el contenido
   envuelto (.wa-tours-section) o suelto (las experiencias no traen envoltorio). */
.wa-book-group { grid-column: span var(--wa-book-span, 1); min-width: 0; display: flex; flex-direction: column; }
.wa-book-group > .wa-tours-section,
.wa-book-group > .wa-nearby-group { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.wa-book-group .country-hotspots-grid { grid-template-columns: repeat(var(--wa-book-span, 1), minmax(0, 1fr)) !important; }
.wa-book-group .wa-tours-grid,
.wa-book-group .wa-stays-grid,
.wa-book-group .wa-packs-grid,
.wa-book-group .country-hotspots-grid {
    flex: 1;
    grid-template-columns: repeat(var(--wa-book-span, 1), minmax(0, 1fr));
    gap: var(--wag-space-24);
}
@media (max-width: 700px) {
    .wa-book-row,
.wa-book-group{ display: block; }
    .wa-book-group + .wa-book-group { margin-top: 28px; }
    .wa-book-group .wa-tours-grid,
    .wa-book-group .wa-stays-grid,
    .wa-book-group .wa-packs-grid,
    .wa-book-group .country-hotspots-grid { grid-template-columns: 1fr !important; }
}

/* Card */
.wa-tour-card {
    background: var(--wag-surface);
    border-radius: var(--wag-radius-16);
    overflow: hidden;
    box-shadow: var(--wag-type-product-card-shadow, var(--wag-style-tarjeta-producto-shadow));
    display: flex;
    flex-direction: column;
    height: 100%;        /* fills the fixed grid-auto-rows row */
    transition: transform .2s ease, box-shadow .2s ease;
    position: relative;  /* needed for stretched-link overlay */
    cursor: pointer;
}

.wa .wa-tour-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--wag-type-product-card-hover-shadow, var(--wag-style-tarjeta-producto-hover-shadow));
}

/* Stretched link: title anchor covers the whole card */
.wa-tour-card__title a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
}
/* Operator link + CTA button must float above the overlay */
.wa-tour-card__operator,
.wa-tour-book-btn {
    position: relative;
    z-index: 1;
}

.wa-tour-card--unavailable {
    opacity: 0.6;
}

/* Image */
.wa-tour-card__image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.wa-tour-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.wa .wa-tour-card:hover .wa-tour-card__image img {
    transform: scale(1.04);
}

/* Abajo a la derecha, con los mismos valores que .hotspot-badges (línea 329):
   es la posición que usa el resto de tarjetas del sitio y la que espera el ojo.
   Ojo: aquí viven también los badges de estado (Full / Out of Season), así que
   bajan con el de tipo. */
.wa-tour-card__badges {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.wa-tour-badge {
    padding: 4px 10px;
    border-radius: var(--wag-radius-999);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.wa-tour-badge--type {
    background: var(--wag-type-tour-badge--type-bg, var(--wag-style-tour-badge--type-bg));
    color: var(--wag-type-tour-badge--type-ink, var(--wag-style-tour-badge--type-ink));
}

/* Enlace al hotspot padre en el hero del hide (Marc, 2026-09-14). Un modificador
   más de la familia, como --type o --diff-*: hereda medidas de .wa-tour-badge y
   solo cambia el color. Va en blanco sólido, no en el negro translúcido de los
   otros, porque tiene que cantar que se puede pulsar; el verde del hover es el
   mismo #187344 del CTA "View on map". */
.wa-tour-badge--link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--wag-surface);
    color: var(--wag-type-tour-badge--link-ink, var(--wag-style-tour-badge--link-ink)) !important;
    text-decoration: none !important;
    box-shadow: var(--wag-type-tour-badge--link-shadow, var(--wag-style-tour-badge--link-shadow));
    transition: background .18s ease, color .18s ease;
}
.wa .wa-tour-badge--link:hover,
.wa .wa-tour-badge--link:focus-visible {
    background: var(--wag-type-tour-badge--link-hover-bg, var(--wag-style-tour-badge--link-hover-bg));
    color: var(--wag-type-tour-badge--link-hover-ink, var(--wag-style-tour-badge--link-hover-ink)) !important;
}
/* 10px: un icono más alto que la caja de texto de 9px estiraría el enlace y lo
   dejaría escalonado respecto a los badges de al lado. */
.wa-tour-badge--link svg { flex: 0 0 10px; width: 10px; height: 10px; }

.wa-tour-badge--diff-easy     { background: var(--wag-type-tour-badge--diff-easy-bg, var(--wag-style-tour-badge--diff-easy-bg)); color: var(--wag-type-tour-badge--diff-easy-ink, var(--wag-style-tour-badge--diff-easy-ink)); }
.wa-tour-badge--diff-moderate { background: var(--wag-type-tour-badge--diff-moderate-bg, var(--wag-style-tour-badge--diff-moderate-bg)); color: var(--wag-type-tour-badge--diff-moderate-ink, var(--wag-style-tour-badge--diff-moderate-ink)); }
.wa-tour-badge--diff-hard     { background: rgba(210,70,60,0.85); color: #fff; }


/* Body */
.wa-tour-card__body {
    padding: 18px 20px 0;
    flex: 1;
}

.wa-tour-card__operator {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #4fadd4;
    text-decoration: none;
    display: block;
    margin-bottom: 6px;
}

.wa .wa-tour-card__operator:hover { color: #3a9abf; }

.wa-tour-card__title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 7px;
    letter-spacing: -0.2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* SIN min-height (2026-09-15). Reservaba dos líneas siempre para que los
       títulos de una no descuadraran la rejilla, pero eso dejaba ~22px de hueco
       entre el título y la primera línea de datos. Ya no hace falta: la tarjeta
       tiene height:100% y el pie va con margin-top:auto, así que los pies
       siguen alineados aunque el cuerpo mida distinto. */
}

.wa-tour-card__title a {
    color: #111;
    text-decoration: none;
}

html[data-theme="dark"] .wa-tour-card__title a {color:#fff;}

.wa .wa-tour-card__title a:hover { color: #4fadd4; }
.wa-tour-card__title .wa-verified { margin-left: 5px; }
.wa-tour-card__title .wa-verified svg { width: 16px; height: 16px; }

.wa-tour-card__excerpt {
    font-size: var(--wag-text-13);
    color: #777;
    line-height: 1.6;
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Meta */
.wa-tour-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 16px;
}

.wa-tour-meta-item {
    display: flex;
    align-items: center;
    gap: var(--wag-space-4);
    font-size: var(--wag-text-12);
    color: #888;
}

.wa-tour-meta-item svg {
    flex-shrink: 0;
    color: #bbb;
}

/* Hide cards: same product-card shell, but only decision-making information. */


.wa-hide-card--species .wa-tour-card__title {
    min-height: 0;
    margin-bottom: 5px;
}


.wa-hide-card--species .wa-tour-price-prefix {
    display: block;
    color: #87919b;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    text-transform: lowercase;
}


html[data-theme="dark"] .wa-hide-card--species .wa-tour-price-prefix { color: #98a5b1; }

/* Footer */
.wa-tour-card__footer {
    padding: 14px 20px 18px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wag-space-12);
    margin-top: auto;    /* price+CTA always pinned to bottom */
}

.wa-tour-price-amount {
    font-size: var(--wag-text-20);
    font-weight: 800;
    color: var(--wag-type-ficha-tour-price-amount-ink, var(--wag-style-ficha-tour-price-amount-ink));
    letter-spacing: -0.5px;
}

.wa-tour-price-label {
    font-size: var(--wag-text-12);
    color: var(--wag-type-ficha-tour-price-label-ink, var(--wag-style-tour-detail-label-ink));
    margin-left: 2px;
}

/* «desde X» en grupo bajo el precio original (inc/helpers/hide-card.php, Marc 2026-10-25): el
   precio por persona sigue siendo el protagonista y esto es una pista, pequeña y en verde. */
.wa-card-group-from {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: var(--wag-text-12);
    line-height: 1.2;
    color: var(--wag-color-brand);
}
.wa-card-group-from svg { flex: none; }
.wa-card-group-from strong { font-weight: 700; }
html[data-theme="dark"] .wa-card-group-from { color: var(--wag-color-success); }
/* Portada: en la MISMA línea que el precio, a la izquierda (el importe sigue a la derecha). Sin línea
   extra, así la tarjeta compacta no se amontona y el precio queda a la altura de sus vecinas. */
.wa-home-hide-price > .wa-card-group-from {
    align-self: baseline; align-items: baseline; gap: 5px; margin: 0 auto 0 0; white-space: nowrap; font-weight: 400;
}
/* Texto e icono apoyados en la línea de base del importe: centrados parecían ir más arriba. */
.wa-home-hide-price > .wa-card-group-from svg { align-self: baseline; }
/* «desde» menudo, como «/ persona»; la cifra conserva su tamaño. */
.wa-home-hide-price > .wa-card-group-from > span { font-size: 10.5px; }
.wa-home-hide-price > .wa-card-group-from strong { font-size: var(--wag-text-12); }
/* En la portada el precio cierra la tarjeta a la derecha (2026-09-15): el «desde» se alinea igual. */
.wa-home-hide-price > .wa-card-group-from { left: auto; right: 0; }

/* Alojamiento con varias habitaciones (2026-09-25): los tipos de habitación en
   píldoras bajo los datos, con la misma letra de 12px y el gris de
   .wa-tour-meta-item, sobre un fondo apenas marcado para que se lean como
   opciones y no como un dato más. */
.wa-tour-card__meta:has(+ .wa-stay-card-rooms) { padding-bottom: 10px; }
/* SIEMPRE DOS LÍNEAS DE ALTO, uses una o dos. Con alto libre, la tarjeta de
   varias habitaciones crecía y la de un alojamiento entero, al lado, se
   quedaba con un hueco sobre el precio. En una sola línea forzada, a 300 px,
   se recortaban todos los nombres a la vez («Trip…»). Reservando dos líneas
   en todas, los textos salen enteros y todas las tarjetas miden lo mismo.
   Cada píldora mide 24 px (18 de línea + 3+3): dos filas y el hueco = 54. */
.wa-stay-card-rooms {
    display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px;
    height: 54px; overflow: hidden; margin-bottom: 16px;
}
.wa-stay-card-rooms span {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding: 3px 9px; border-radius: var(--wag-radius-999); background: #f3f5f4;
    font-size: var(--wag-text-12); line-height: 18px; color: #5b6660;
}
.wa-stay-card-rooms span.is-more { color: #8a948f; }
/* «desde» delante del importe: la unidad ya lleva margen a la izquierda. */
.wa-tour-price-label.wa-stay-price-from { margin: 0 2px 0 0; }
html[data-theme="dark"] .wa-stay-card-rooms span { background: #232a33; color: #b8c4cd; }
html[data-theme="dark"] .wa-stay-card-rooms span.is-more { color: #8e9ba6; }
/* Comida en la tarjeta del alojamiento, dentro de la ficha del hotspot
   (inc/helpers/stay-card.php, Marc 2026-10-11): una línea con cubiertos,
   alto fijo de 18 px —también vacía— para que las tarjetas midan lo mismo. */
.wa-stay-card-rooms:has(+ .wa-stay-card-food) { margin-bottom: 8px; }
.wa-stay-card-food {
    display: flex; align-items: center; gap: 6px; height: 18px; margin-bottom: 16px; overflow: hidden;
    color: var(--wag-type-stay-card-food-ink, var(--wag-style-stay-card-food-ink)); font-size: 12.5px; font-weight: 600; line-height: 18px;
}
.wa-stay-card-food svg { flex: 0 0 13px; }
.wa-stay-card-food span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme="dark"] .wa-stay-card-food { color: var(--wag-type-stay-card-food-dark-ink, var(--wag-style-stay-card-food-dark-ink)); }

/* ── Cuerpo de las tarjetas de producto (2026-09-15) ────────────────────────
   Dos líneas gemelas bajo el título: dónde está, y qué define a este producto.
   Antes eran hasta cinco renglones del mismo tamaño y color —ubicación,
   hotspot, valoración, especies— y ninguno mandaba: la tarjeta no se leía, se
   miraba. El icono sustituye a la etiqueta de texto; «Verás» ocupaba sitio y
   sonaba a instrucción. */
.wa-card-line {
    display: flex; align-items: center;
    /*
     * Sin `gap`: la separación del icono la pone su propio margen.
     *
     * Con gap, el punto que separa localidad y país quedaba asimétrico: está
     * dentro de .wa-card-line-pais, que es OTRO ítem del flex, así que a su
     * izquierda sumaban los 7px del gap más sus 4px de margen —11 en total—
     * frente a los 4 de su derecha. El punto entre hotspot y localidad, que
     * vive dentro del mismo span de texto, sí tenía sus 4 y 4 (Marc,
     * 2026-09-16). Quitando el gap, los dos puntos miden igual por los dos
     * lados.
     */
    gap: 0;
    min-width: 0; margin: 0 0 6px;
    /* El tamaño se declara AQUÍ, no en el span del texto. Cuando estaba solo en
       .wa-card-line-t, el «+17» —que es hermano suyo, no hijo— heredaba los
       16px del cuerpo de la tarjeta y salía más grande que la propia especie
       (Marc, 2026-09-15). */
    font-size: 12.5px; line-height: 1.4;
}
/* También el icono subido en Ajustes → Iconos, que llega como <span> con
   máscara y no como <svg>: sin esto se pegaba al texto (2026-10-01). */
.wa-card-line > svg, .wa-card-line > .wa-ico { flex: none; margin-right: 7px; color: #b9c3cf; }
.wa-card-line-t {
    min-width: 0; flex: 1; font-size: inherit; line-height: inherit;
    /* Una sola línea: al envolver, la valoración se despegaba y la altura de la
       tarjeta dependía de lo largo que fuera el nombre del hotspot. */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Dónde: apagado, es contexto. */
.wa-card-place { margin-bottom: 5px; }
.wa-card-place .wa-card-line-t {
    color: #7a8696;
    /* Encoge hasta su contenido: si no, se quedaba con todo el ancho libre y
       empujaba el país al borde derecho de la tarjeta, separado del hotspot al
       que acompaña. Sólo se corta cuando de verdad no cabe. */
    flex: 0 1 auto;
}
.wa-card-place .wa-card-line-t a { color: #2b7cb0; text-decoration: none; font-weight: 600; }
.wa-card-place a:hover { text-decoration: underline; }
/* El país no encoge NUNCA: es la pieza que sitúa el producto y la que antes
   desaparecía entera cuando el hotspot traía un nombre largo. Lo que se corta
   es lo de su izquierda. */
.wa-card-line-pais { flex: none; min-width: 0; }
/* En el verde de la marca, para distinguirlo del enlace al hotspot, que es
   azul y va justo delante. */
.wa-card-place .wa-card-country { color: var(--wa-accent, #1f7a4d); text-decoration: none; font-weight: 600; }
.wa-card-sep { margin: 0 4px; color: var(--wag-type-card-sep-ink, var(--wag-style-card-sep-ink)); }
.wa-card-rate { flex: none; margin-left: auto; padding-left: 8px; font-size: 0.92em; color: var(--wag-type-card-rate-ink, var(--wag-style-card-more-ink)); white-space: nowrap; }
.wa-card-rate b { color: #b8860b; font-weight: 700; }

/* Lo que define el producto: en tinta, porque es lo que decide la compra. */
.wa-card-keys { margin-bottom: 12px; }
.wa-card-keys .wa-card-line-t {
    color: var(--wag-type-card-line-t-ink, var(--wag-style-card-line-t-ink)); font-weight: 500;
    /* Encoge hasta el contenido para que el «+7» vaya PEGADO a los nombres. Con
       flex:1 el texto ocupaba todo el ancho y la cuenta se iba sola al borde
       derecho, como una etiqueta suelta. */
    flex: 0 1 auto;
}
.wa-card-more {
    flex: none; font-size: 0.88em; font-weight: 600; color: var(--wag-type-card-more-ink, var(--wag-style-card-more-ink));
    letter-spacing: -.1px;
    margin-left: 6px;
}

/* Precio: importe y unidad detrás. La unidad hace falta porque sin ella no se
   sabe si es por plaza o por noche. El «Desde» delante se quitó el 2026-09-21
   (Marc), así que .wa-tour-price-from ya no se pinta. */

/* Pie sin botón: el precio se queda solo, a la izquierda. */
.wa-tour-card__footer.is-solo { justify-content: flex-start; }
.wa-tour-card__note {
    display: flex; align-items: center; gap: 5px;
    font-size: 12.5px; color: #7a8696; white-space: nowrap;
}
.wa-tour-card__note svg { color: #c3ccd6; flex: none; }

.wa-tour-badge--season { background: #2f7a52; color: #fff; }

/* Variante compacta: las mismas dos líneas en los carruseles de la home, un
   punto más pequeñas. 274px de ancho dejan 246 de contenido, así que aquí cabe
   UNA especie y no cabe la valoración. */
/* Una sola escala para las cuatro filas del cuerpo compacto: 11px para las
   líneas con icono, 10.5px para los datos secos, 16px para el importe. Antes
   cada regla traía su propio tamaño y el resultado eran cinco cuerpos de letra
   distintos en 274px de ancho. */
.wa-card-line.is-mini { gap: 0; margin-bottom: 4px; font-size: var(--wag-text-11); }
.wa-card-line.is-mini > svg { margin-right: 6px; }
.wa-card-keys.is-mini { margin-bottom: 7px; }

/* Los datos secos. Fila que envuelve: si a un producto le falta uno, los otros
   se recolocan solos en lugar de dejar hueco. */
.wa-card-mini-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 3px 9px;
    margin: 0 0 2px;
}
.wa-card-mini-meta .wa-tour-meta-item {
    display: inline-flex; align-items: center; gap: var(--wag-space-4);
    font-size: 10.5px; line-height: 1.35; font-weight: 500; color: var(--wag-type-tour-meta-item-ink, var(--wag-style-tour-meta-item-ink));
    background: none; padding: 0; border: 0; white-space: nowrap;
}
.wa-card-mini-meta .wa-tour-meta-item svg { flex: none; width: 11px; height: 11px; color: #b9c3cf; }
.wa-card-mini-meta .wa-tour-meta-item--star { color: #6b7684; font-weight: 700; }
.wa-card-mini-meta .wa-tour-meta-item--star svg { color: #d4a017; }

/* Precio de la compacta: las mismas tres piezas y la misma jerarquía que en la
   grande, un punto más pequeñas. El importe manda; «Desde» y la unidad son
   letra menuda a su lado, alineadas por la línea de base. */
.wa-home-card-body .wa-home-hide-price {
    display: flex; align-items: baseline; gap: var(--wag-space-4);
    /* A la derecha, decisión de Marc (2026-09-15). En la compacta no hay botón
       que ocupe ese lado, así que el importe se queda solo ahí y cierra la
       tarjeta en diagonal: título arriba a la izquierda, precio abajo a la
       derecha. */
    justify-content: flex-end;
    margin-top: auto; padding-top: 9px;
    font-size: inherit; font-weight: 400;
}
.wa-home-price-unit { font-style: normal; font-weight: 500; font-size: 10.5px; color: #9aa6b4; }
.wa-home-price-amount {
    font-size: var(--wag-text-16); font-weight: 800; letter-spacing: -.35px;
    color: var(--wa-ink, #111);
}

html[data-theme="dark"] .wa-card-place .wa-card-line-t { color: #93a0b0; }
html[data-theme="dark"] .wa-card-place .wa-card-country { color: var(--wag-type-card-country-dark-ink, var(--wag-style-card-country-dark-ink)); }
html[data-theme="dark"] .wa-card-sep { color: var(--wag-type-card-sep-dark-ink, var(--wag-style-card-sep-dark-ink)); }
html[data-theme="dark"] .wa-card-keys .wa-card-line-t { color: var(--wag-type-card-line-t-dark-ink, var(--wag-style-card-line-t-dark-ink)); }
html[data-theme="dark"] .wa-card-line > svg, html[data-theme="dark"] .wa-card-line > .wa-ico { color: #5a6675; }
html[data-theme="dark"] .wa-card-mini-meta .wa-tour-meta-item { color: var(--wag-type-tour-meta-item-dark-ink, var(--wag-style-tour-meta-item-dark-ink)); }
html[data-theme="dark"] .wa-card-mini-meta .wa-tour-meta-item svg { color: #5a6675; }

/* ── Tarjeta de operador del directorio /operators/ (2026-10-01) ────────────
   La carcasa es .wa-tour-card y las líneas son .wa-card-line: aquí sólo lo
   propio (inc/helpers/operator-card.php). */
.wa-op-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--wag-space-24); }
/* Sin portada: el azul pizarra de los banners, no un hueco blanco. */
.wa-op-card .wa-tour-card__image[data-empty="1"] { background: #1a1e24; }
/* Portada que es un logo (inc/helpers/image-fit.php): entera, con aire, sobre
   el color de su propio fondo para que no se vea la costura. Las fotos siguen
   recortándose para llenar el hueco. */
.wa-tour-card__image[data-fit="logo"] { background: var(--wa-fit-bg, #fff); }
.wa-tour-card__image[data-fit="logo"] img { object-fit: contain; padding: 22px 30px; box-sizing: border-box; }
.wa-op-card .wa-card-keys { margin-bottom: 16px; }
/* La valoración en su propia línea, pegada al texto: anula el empuje al borde
   derecho que lleva .wa-card-rate en la línea de lugar. */
.wa-op-card-rate .wa-card-rate { margin-left: 0; padding-left: 0; font-size: inherit; }
/* «Acepta / Viajes a medida»: la forma del precio de las otras tarjetas —
   etiqueta de 10px como el «desde» de los hides y el dato debajo. */
.wa-op-card-custom { display: block; line-height: 1.2; }
.wa-op-card-custom small { display: block; font-size: 10px; font-weight: 700; color: #87919b; line-height: 1; margin-bottom: 3px; }
.wa-op-card-custom strong { font-size: var(--wag-text-14); font-weight: 600; color: #5a6a7a; }
.wa-op-card-custom strong { display: inline-flex; align-items: center; gap: 6px; }
.wa-op-card-custom .wa-ico { flex: none; color: var(--wa-accent, #1f7a4d); }
html[data-theme="dark"] .wa-op-card-custom .wa-ico { color: #5fc08c; }
html[data-theme="dark"] .wa-op-card-custom small { color: #98a5b1; }
html[data-theme="dark"] .wa-op-card-custom strong { color: #b8c4cd; }
html[data-theme="dark"] .wa-home-price-unit { color: #8b98a8; }
html[data-theme="dark"] .wa-home-price-amount { color: #fff; }

/* ── MÓVIL: las compactas de la home se quedan COMO ESTABAN ────────────────
   Marc, 2026-09-16. Los renderizadores de la home son los mismos para las dos
   anchuras, así que todo lo que se añadió para escritorio —la fila de datos
   secos, el precio reestructurado a la derecha, el icono de categoría y el
   país en verde— se coló también en móvil, donde la tarjeta mide 189px y no
   hay sitio: se leía «Great Spotted Wood… +8» y el precio se comía el ancho.
   Aquí se apaga todo eso; móvil vuelve al cuerpo de antes. Si algo de esto
   tiene que volver a móvil, se enciende pieza a pieza, no en bloque. */
@media (max-width: 1024px) {
    .wa-home-card .wa-card-mini-meta,
/* El icono de categoría SÍ va en móvil en las de hotspot: casita en
       alojamientos, montañita en espacios naturales (Marc, 2026-09-16). */
    .wa-home-card--hide-product .wa-home-card-sub-ico{ display: none; }
    /* Y la valoración pasa a la línea de texto, porque aquí la insignia de la
       foto está oculta. */
    .wa-home-card--hotspot .wa-home-card-sub-rate { display: inline; }
    /*
     * Tres renglones en móvil: título, categoría, y país con su valoración.
     * Con todo en una línea y 189px de ancho el navegador la partía por donde
     * cabía —«Eco Lodge ·» arriba y «Spain ★ 5,0» debajo—, que es el corte que
     * NO queremos (Marc, 2026-09-16).
     */
    .wa-home-card--hotspot .wa-home-card-cat,
    .wa-home-card--hotspot .wa-home-card-loc { display: block; }
    .wa-home-card--hotspot .wa-home-card-loc { margin-top: 1px; }
    .wa-home-card--hotspot .wa-home-card-sub-sep { display: none; }
    /* El precio de las experiencias, pegado abajo: sin fecha de salida la
       tarjeta tiene una línea menos y el importe quedaba a distinta altura que
       el de su vecina. */
    .wa-home-card--experience .wa-home-card-body .wa-home-hide-price {
        margin-top: auto;
    }
    .wa-home-card .wa-home-hotspot-country-link,
    .wa-home-card .wa-card-country { color: inherit; font-weight: inherit; }
    /* Precio a la derecha y con su unidad también en móvil (Marc, 2026-09-26:
       «solo pone la cifra, falta el /person, y a la derecha»). */
    .wa-home-card-body .wa-home-hide-price {
        display: flex; align-items: baseline; justify-content: flex-end; gap: 3px;
        margin-top: 5px; padding-top: 0;
        font-size: var(--wag-text-12); font-weight: 800;
    }
    .wa-home-card-body .wa-home-price-amount {
        font-size: inherit; font-weight: inherit; color: inherit; letter-spacing: 0;
    }
    .wa-home-card-body .wa-home-price-unit { display: inline; font-size: 10px; white-space: nowrap; }
}

/* Botón SECUNDARIO, no primario (2026-09-15).
   Relleno azul, mayúsculas y 1,8px de tracking significan «esta es la acción
   principal de la pantalla». En una lista hay ocho, así que ocho primarias son
   cero primarias: el ojo iba al rectángulo y no al precio. En contorno sigue
   diciendo que se puede pulsar, sin competir con el título ni con el importe. */
.wa-tour-book-btn {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: var(--wag-radius-8);
    border: 1px solid var(--wag-type-book-line, var(--wag-style-silueta-line));
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    text-align: center;
    text-decoration: none;
    background: var(--wag-surface);
    color: var(--wag-type-book-ink, var(--wag-style-silueta-ink)) !important;
    transition: background .18s ease, border-color .18s ease;
    white-space: nowrap;
}

.wa .wa-tour-book-btn:hover {
    background: var(--wag-type-book-hover-bg, var(--wag-style-silueta-hover-bg));
    border-color: var(--wag-type-book-hover-line, var(--wag-style-silueta-hover-line));
    color: var(--wag-type-book-hover-ink, var(--wag-style-silueta-hover-ink)) !important;
}
html[data-theme="dark"] .wa-tour-book-btn { background: var(--wag-type-book-dark-bg, var(--wag-style-silueta-dark-bg)); border-color: var(--wag-type-book-dark-line, var(--wag-style-silueta-dark-line)); color: var(--wag-type-book-dark-ink, var(--wag-style-silueta-dark-ink)) !important; }
html[data-theme="dark"] .wa .wa-tour-book-btn:hover { background: var(--wag-type-book-dark-hover-bg, var(--wag-style-silueta-dark-hover-bg)); border-color: var(--wag-type-book-dark-hover-line, var(--wag-style-silueta-dark-hover-line)); }

@media (max-width: 600px) {
    .wa-tours-grid { grid-template-columns: 1fr; }
}

/* =============================================================
   TOUR — single-tour.php
   ============================================================= */

/* page-body emite .{type}-container/.{type}-card → hide comparte el de tour */
.tour-container,
.hide-container,
.stay-container,
.pack-container { width: 100%; margin: auto; padding-top: 0; }

.tour-card,
.hide-card,
.stay-card,
.pack-card {
    background: var(--wag-surface);
    box-shadow: var(--wag-shadow-6);
    padding: 0 20px 40px;
}

/* Hero */
.tour-hero-banner {
    position: relative;
    margin-left: -20px;
    margin-right: -20px;
    height: 500px;
    overflow: hidden;
    margin-top: 0 !important;
}
.tour-hero-banner img {
    width: 100%; height: 100%; object-fit: cover;
    position: absolute; top: 0; left: 0;
}
.tour-hero-overlay {
    position: absolute; inset: 0;
    background: var(--wag-type-tour-hero-overlay-bg, var(--wag-style-tour-hero-overlay-bg));
}
.tour-hero-content {
    position: absolute; inset: 0; z-index: 5;
    display: flex; flex-direction: column;
    justify-content: flex-end;
    padding: 0 45px 38px;
}
.tour-hero-operator {
    font-size: var(--wag-text-11); font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase;
    color: var(--wag-type-tour-hero-operator-ink, var(--wag-style-tour-hero-operator-ink)); text-decoration: none;
    margin-bottom: 8px; display: block;
}
.wa .tour-hero-operator:hover { color: var(--wag-type-tour-hero-operator-hover-ink, var(--wag-style-tour-hero-operator-hover-ink)); }
.tour-title {
    font-size: clamp(32px, 4vw, 58px);
    font-weight: 800; letter-spacing: -1.5px;
    /* Misma corrección óptica que .place-title: las cajas cuadran, pero el hueco
       que la fuente deja a la izquierda del glifo escala con el cuerpo (3,21px
       medidos a 58px contra el borde sólido de los badges de debajo). */
    line-height: 0.95; color: var(--wag-type-tour-title-ink, var(--wag-style-tour-title-ink)); margin: 0 0 14px -0.04em;
    max-width: 75%; text-shadow: 0 3px 20px rgba(0,0,0,0.5);
}
.tour-hero-badges { display: flex; gap: var(--wag-space-8); flex-wrap: wrap; }


/* Body layout */
.tour-body {
    display: grid;
    /* minmax(0, 1fr) y no 1fr: `1fr` deja que el contenido más ancho ensanche
       la columna, y Safari mide ese mínimo distinto que Chrome. En iPhone la
       tarjeta de reserva se salía por la derecha en todos los productos y en
       Chrome no se veía (Marc, 2026-10-04). */
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 48px;
    /* 40px dejaban un salto muy marcado entre el hero y el contenido (Marc,
       2026-07-26). Desde el ritmo único (2026-09-26) el espacio tras el hero
       lo pone .wa-section, como en el resto de fichas: aquí ya no suma nada. */
    margin-top: 0;
    align-items: start;
}

/* Main */
/* Descripción de hide, experiencia, alojamiento y pack (2026-09-28): el MISMO
   texto que la descripción del hotspot (.wa-hotspot-desc-body p) — 15,5 px,
   interlineado 1,78, la tinta del sitio. Antes iba a 17 px / 1,85 en #333 y
   era el texto más grande de toda la web. */
.tour-description { font-size: 15.5px; line-height: 1.78; color: var(--wa-ink, #1a2230); letter-spacing: .01em; margin-bottom: 45px; }
.tour-description :is(p, ul, ol) { margin: 0 0 .95em; font-size: inherit; line-height: inherit; }
.tour-description :is(h2, h3, h4) { margin: 1.2em 0 .5em; font-size: 17px; line-height: 1.35; color: inherit; }
.tour-description > :last-child { margin-bottom: 0; }
/* Formato cerrado del dueño (2026-10-01, inc/helpers/product-description.php):
   «Título» = h3 y «Subtítulo» = h4, en la misma familia que el texto; listas
   con su punto; y cinco colores de la casa. Nada más entra en la descripción. */
.tour-description h3 { font-size: 21px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; margin: 1.1em 0 .45em; }
.tour-description h4 { font-size: 17px; font-weight: 700; line-height: 1.35; margin: 1em 0 .4em; }
.tour-description > :first-child { margin-top: 0; }
.tour-description ul { padding-left: 1.3em; list-style: disc; }
.tour-description li::marker { color: var(--wa-accent, #1f7a4d); }
/* Filas de lista más juntas que los párrafos (Marc, 2026-10-01): con el
   interlineado del texto (1,78) y su margen, cada punto parecía un párrafo.
   Y si un <p> se cuela dentro de un <li> (lo hace el editor del navegador),
   no suma su margen de párrafo. */
.tour-description li { margin-bottom: .2em; line-height: 1.55; }
.tour-description li > p { margin: 0; }
.tour-description ul { margin-bottom: .95em; }
.tour-description strong { font-weight: 700; }
.wa-txt-forest { color: var(--wag-accent); }
.wa-txt-sky    { color: #2b7cb0; }
.wa-txt-earth  { color: #9a5b2d; }
.wa-txt-navy   { color: #1d4a73; }
.wa-txt-slate  { color: #5a6a7a; }
html[data-theme="dark"] .wa-txt-forest { color: #6db84c; }
html[data-theme="dark"] .wa-txt-sky    { color: #7fc0e6; }
html[data-theme="dark"] .wa-txt-earth  { color: #d9a06b; }
html[data-theme="dark"] .wa-txt-navy   { color: #8ab9da; }
html[data-theme="dark"] .wa-txt-slate  { color: #a9b5c0; }
@media (max-width: 700px) {
    .tour-description h3 { font-size: 19px; }
    .tour-description h4 { font-size: var(--wag-text-16); }
}
.tour-section-label {
    font-size: 10px; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase;
    color: #aaa; margin-bottom: 12px;
}
.tour-included { font-size: 15px; color: #555; line-height: 1.8; }

/* Sidebar */
.tour-sidebar-card {
    background: var(--wag-type-tour-sidebar-card-bg, var(--wag-style-tour-sidebar-card-bg));
    border-radius: var(--wag-radius-16);
    padding: 24px;
    margin-bottom: 16px;
}
.tour-sidebar-price { margin-bottom: 20px; }
.tour-price-amount { font-size: 36px; font-weight: 800; color: var(--wag-type-tour-price-amount-ink, var(--wag-style-tour-price-amount-ink)); letter-spacing: -1px; }
.tour-price-label  { font-size: var(--wag-text-13); color: var(--wag-type-tour-price-label-ink, var(--wag-style-tour-detail-label-ink)); margin-left: 4px; }

.tour-book-btn-full {
    display: block;
    text-align: center;
    padding: 12px 20px;
    font-size: var(--wag-text-12);
    border-radius: var(--wag-type-tour-book-btn-full-radius, var(--wag-style-tour-book-btn-full-radius));
}
.tour-book-btn-full.wa-bk-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--wag-space-8);
    width: 100%;
}
.wa-bk-submit-card {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}
.wa-bk-submit-paypal {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
}
body.wa button.tour-book-btn-full.wa-bk-submit--paypal,
body.wa button.tour-book-btn-full.wa-bk-submit--paypal:focus,
body.wa button.tour-book-btn-full.wa-bk-submit--paypal:focus-visible,
body.wa button.tour-book-btn-full.wa-bk-submit--paypal:active {
    background: #ffe6a0 !important;
    background-image: none !important;
    border: 1px solid #ecc85d !important;
    color: #003087 !important;
    box-shadow: var(--wag-type-tour-book-btn-full-shadow, var(--wag-style-tour-book-btn-full-shadow)) !important;
}
body.wa button.tour-book-btn-full.wa-bk-submit--paypal:hover {
    background: #ffdc72 !important;
    border-color: #e3b93c !important;
    color: #003087 !important;
}
body.wa button.tour-book-btn-full.wa-bk-submit--paypal:focus-visible {
    outline: 3px solid rgba(0, 112, 186, .24) !important;
    outline-offset: 3px !important;
}
/* Botón de pago directo (Marc, 2026-09-25): el mismo contorno fino y la misma
   letra que el resto de botones, con el azul un punto más firme y el importe
   que sale de la tarjeta a la derecha. Que se lea «aquí se paga» sin gritar.
   Se declaran todos los estados porque Astra pinta button:hover/focus. */
body.wa button.tour-book-btn-full.wa-bk-submit--pay,
body.wa button.tour-book-btn-full.wa-bk-submit--pay:focus,
body.wa button.tour-book-btn-full.wa-bk-submit--pay:active {
    background: var(--wag-type-tour-book-btn-full-bg, var(--wag-style-tour-book-btn-full-bg)) !important;
    background-image: none !important;
    border: 1px solid var(--wag-type-tour-book-btn-full-line, var(--wag-style-tour-book-btn-full-line)) !important;
    color: var(--wag-type-tour-book-btn-full-ink, var(--wag-style-tour-book-btn-full-ink)) !important;
    box-shadow: var(--wag-shadow-15) !important;
    min-height: 44px;
}
body.wa button.tour-book-btn-full.wa-bk-submit--pay:hover {
    background: var(--wag-type-tour-book-btn-full-hover-bg, var(--wag-style-tour-book-btn-full-hover-bg)) !important;
    border-color: var(--wag-type-tour-book-btn-full-hover-line, var(--wag-style-tour-book-btn-full-hover-line)) !important;
    color: var(--wag-type-tour-book-btn-full-hover-ink, var(--wag-style-tour-book-btn-full-hover-ink)) !important;
}
body.wa button.tour-book-btn-full.wa-bk-submit--pay:focus-visible {
    outline: 3px solid var(--wag-type-tour-book-btn-full-focus-ring, var(--wag-style-tour-book-btn-full-focus-ring)) !important;
    outline-offset: 2px !important;
}
body.wa button.tour-book-btn-full.wa-bk-submit--pay.has-price {
    justify-content: space-between;
    padding: 0 7px 0 20px;
}
.wa-bk-submit--pay .wa-bk-submit-label { margin-right: auto; }
.wa-bk-submit-price {
    font-size: var(--wag-text-12);
    font-weight: 600;
    line-height: 1;
    padding: 7px 10px;
    border-radius: var(--wag-type-bk-submit-price-radius, var(--wag-style-bk-submit-price-radius));
    background: var(--wag-type-bk-submit-price-bg, var(--wag-style-bk-submit-price-bg));
    border: 1px solid var(--wag-type-bk-submit-price-line, var(--wag-style-bk-submit-price-line));
    color: var(--wag-type-bk-submit-price-ink, var(--wag-style-bk-submit-price-ink));
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.wa-bk-submit-price[hidden] { display: none !important; }
html[data-theme="dark"] body.wa button.tour-book-btn-full.wa-bk-submit--pay,
html[data-theme="dark"] body.wa button.tour-book-btn-full.wa-bk-submit--pay:focus,
html[data-theme="dark"] body.wa button.tour-book-btn-full.wa-bk-submit--pay:active {
    background: var(--wag-type-tour-book-btn-full-dark-bg, var(--wag-style-tour-book-btn-full-dark-bg)) !important;
    border-color: var(--wag-type-tour-book-btn-full-dark-line, var(--wag-style-tour-book-btn-full-dark-line)) !important;
    color: var(--wag-type-tour-book-btn-full-dark-ink, var(--wag-style-tour-book-btn-full-dark-ink)) !important;
}
html[data-theme="dark"] body.wa button.tour-book-btn-full.wa-bk-submit--pay:hover {
    background: var(--wag-type-tour-book-btn-full-dark-hover-bg, var(--wag-style-tour-book-btn-full-dark-hover-bg)) !important;
    border-color: var(--wag-type-tour-book-btn-full-dark-hover-line, var(--wag-style-tour-book-btn-full-dark-hover-line)) !important;
    color: var(--wag-type-tour-book-btn-full-dark-hover-ink, var(--wag-style-tour-book-btn-full-dark-hover-ink)) !important;
}
html[data-theme="dark"] .wa-bk-submit-price { background: var(--wag-type-bk-submit-price-dark-bg, var(--wag-style-bk-submit-price-dark-bg)); border-color: var(--wag-type-bk-submit-price-dark-line, var(--wag-style-bk-submit-price-dark-line)); color: var(--wag-type-bk-submit-price-dark-ink, var(--wag-style-bk-submit-price-dark-ink)); }

/* Nota de pago seguro: antes era letra gris de pie de página y es justo lo que
   tranquiliza antes de dar la tarjeta. */
.wa-bk-help.wa-bk-secure {
    display: flex; gap: var(--wag-space-8); align-items: flex-start;
    margin-top: 10px;
    font-size: 12.5px; line-height: 1.55; color: var(--wag-type-bk-help-ink, var(--wag-style-bk-help-ink)); text-align: left;
}
.wa-bk-secure .wa-bk-secure-ico { flex: 0 0 14px; margin-top: 2px; color: #2b7cb0; }
/* Tarjetas aceptadas: sólo las tres de siempre, con sus colores de marca
   pero apagados (saturate), para que se reconozcan sin chillar al lado del
   botón azul. Apple Pay y Google Pay van en el texto: sus normas de marca no
   admiten el logo alterado ni enseñarlo donde el navegador no lo ofrece. */
.wa-bk-cards { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wa-bk-cards svg { width: 34px; height: 22px; display: block; filter: saturate(.7); opacity: .9; }
/* Apple Pay / Google Pay: la marca tal cual (sin filtro) y sólo donde el
   navegador puede pagar con ella — lo decide bookings.js. */
.wa-bk-cards svg.wa-bk-wallet { width: 42px; filter: none; opacity: 1; }
.wa-bk-cards svg[hidden] { display: none; }
.wa-bk-wallet rect { stroke: #1a1a1a; }
.wa-bk-wallet text { fill: #000; }
.wa-bk-wallet[data-wallet="google"] text { fill: #5f6368; }
.wa-bk-cards rect { fill: #fff; stroke: #d5dde5; }
.wa-bk-card-visa text { fill: #1a1f71; }
.wa-bk-cards .wa-bk-card-mc1 { fill: #eb001b; }
.wa-bk-cards .wa-bk-card-mc2 { fill: #f79e1b; }
.wa-bk-cards .wa-bk-card-mc3 { fill: #ff5f00; }
.wa-bk-card-amex rect { fill: #2e77bc; stroke: #2e77bc; }
.wa-bk-card-amex text { fill: #fff; }
html[data-theme="dark"] .wa-bk-cards rect { fill: #1c222a; stroke: #35414d; }
html[data-theme="dark"] .wa-bk-card-visa text { fill: #dfe4f5; }
html[data-theme="dark"] .wa-bk-card-amex rect { fill: #2e77bc; stroke: #2e77bc; }
html[data-theme="dark"] .wa-bk-wallet rect { fill: #000; stroke: #8a95a3; }
html[data-theme="dark"] .wa-bk-wallet text,
html[data-theme="dark"] .wa-bk-wallet[data-wallet="google"] text { fill: #fff; }
html[data-theme="dark"] .wa-bk-help.wa-bk-secure { color: var(--wag-type-bk-help-dark-ink, var(--wag-style-bk-help-dark-ink)); }
html[data-theme="dark"] .wa-bk-secure .wa-bk-secure-ico { color: #7fc0e6; }

.tour-status-msg { font-size: var(--wag-text-13); color: #888; text-align: center; padding: 10px 0; }

/* Details */
.tour-sidebar-details { background: var(--wag-type-tour-sidebar-details-bg, var(--wag-style-tour-sidebar-card-bg)); border-radius: var(--wag-radius-16); padding: 20px 24px; }
.tour-detail-row {
    display: flex; justify-content: space-between;
    align-items: baseline; gap: var(--wag-space-12);
    padding: 10px 0; border-bottom: 1px solid var(--wag-type-tour-detail-row-underline, var(--wag-style-tour-detail-row-underline));
    font-size: var(--wag-text-13);
}
.tour-detail-row:last-child { border-bottom: none; }
.tour-detail-label { color: var(--wag-type-tour-detail-label-ink, var(--wag-style-tour-detail-label-ink)); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; font-size: 10px; white-space: nowrap; }
.tour-detail-value { color: var(--wag-type-tour-detail-value-ink, var(--wag-style-tour-detail-value-ink)); font-weight: 500; text-align: right; }
.tour-detail-value a { color: #4fadd4; text-decoration: none; }
.wa .tour-detail-value a:hover { text-decoration: underline; }

@media (max-width: 768px) {
    .tour-body { grid-template-columns: minmax(0, 1fr); }
    .tour-body > * { min-width: 0; }
    .tour-sidebar { order: -1; }
    .tour-title { max-width: 100%; }
    /* Marc, 2026-08-26: el hero de hide/stay/pack/experience se quedaba en los
       500px de escritorio en movil (62% de la pantalla) porque, al reves que
       .place-hero-banner, nunca tuvo override movil. Misma altura que el hero
       de hotspot para que todas las fichas se lean igual. */
    .tour-hero-banner { height: 380px; }
    /* Prueba de encuadre móvil para La bassa; no afecta a otras fichas. */
    body.postid-2140 .tour-hero-banner { height: 270px; }
    .tour-hero-content { padding: 0 24px 28px; }
}

/* Tour / Hide status pill */
.wa-tour-badge--available  { background: var(--wag-type-tour-badge--available-bg, var(--wag-style-tour-badge--available-bg));  color: var(--wag-type-tour-badge--available-ink, var(--wag-style-tour-badge--available-ink)); }
.wa-tour-badge--full       { background: rgba(200,50,50,0.85);  color: #fff; }
.wa-tour-badge--offseason  { background: rgba(90,120,160,0.85); color: #fff; }
.wa-tour-badge--cancelled  { background: rgba(200,50,50,0.85);  color: #fff; }

/* Hide sidebar — distance-to-subject icon */
.hide-distance-ico { vertical-align: middle; margin-right: 3px; opacity: .7; }

/* Included / Not included grid */
.tour-included-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wag-space-24);
    margin-bottom: 45px;
}
.tour-included-block {
    background: var(--wag-type-tour-included-block-bg, var(--wag-style-tour-included-block-bg));
    border-radius: var(--wag-radius-12);
    padding: 20px;
    font-size: var(--wag-text-14);
    color: var(--wag-type-tour-included-block-ink, var(--wag-style-tour-included-block-ink));
    line-height: 1.8;
}
.tour-included-block--yes .tour-section-label { color: #3a9a5c; }
.tour-included-block--no  .tour-section-label { color: #c03030; }

@media (max-width: 600px) {
    .tour-included-grid { grid-template-columns: 1fr; }
}

/* =============================================================
   EXPERIENCE CARD — compacta (country preview + full grid)
   ============================================================= */


/* Grid preview (country page — 3 cards) */
/* Full grid (experiences page + operator) */
.wa-exp-full-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 22px;
    margin-top: 28px;
}


.wa-exp-viewmore-btn,
.wa-hotspot-viewmore-btn {
    display: inline-block;
    padding: 11px 28px;
    border: 1.5px solid var(--wag-type-more-line, var(--wag-style-pildora-contorno-line));
    border-radius: var(--wag-type-more-radius, var(--wag-style-pildora-contorno-radius));
    font-size: var(--wag-text-12);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--wag-type-more-ink, var(--wag-style-pildora-contorno-ink));
    text-decoration: none;
    transition: all .2s ease;
}

html[data-theme="dark"] .wa-hotspot-viewmore-btn,
html[data-theme="dark"] .wa-exp-viewmore-btn{color: var(--wag-type-more-dark-ink, var(--wag-style-pildora-contorno-dark-ink));}

.wa-exp-viewmore-btn:hover,
.wa .wa-hotspot-viewmore-btn:hover {
    background: var(--wag-type-more-hover-bg, var(--wag-style-pildora-contorno-hover-bg));
    color: var(--wag-type-more-hover-ink, var(--wag-style-pildora-contorno-hover-ink));
}

.wa-viewmore-wrap {
    text-align: center;
    margin-top: 24px;
}

/* =============================================================
   PAGE SECTIONS
   ============================================================= */

/* Ritmo vertical único entre módulos (Marc, 2026-09-26). Unidad 15px:
   45px entre módulos en escritorio, 30px en móvil, repartidos a partes
   iguales arriba y abajo para que la línea divisoria quede centrada en el
   hueco. Antes: 30px de base y cada módulo sumaba lo suyo (+8 el «Ver
   todos», +18 los operadores asociados…), así que ningún hueco medía igual.
   Referencia: Airbnb usa ~64px con línea; 45 es la parte compacta del rango.
   El espacio entre módulos lo pone SOLO esta regla: un módulo no debe traer
   margen exterior propio arriba ni abajo. */
.wa-section {
    padding-top: 22.5px;
    margin-bottom: 22.5px;
}
/* Línea divisoria en todos los módulos a partir del segundo (antes solo en
   algunos de productos: unos la tenían y otros no). Mismo trazo que el de
   .hotspot-*-section::before. */
.wa-section ~ .wa-section { position: relative; }
.wa-section ~ .wa-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: -20px;
    width: calc(100% + 40px);
    box-shadow: var(--wag-shadow-1);
    border-top: 1px solid #ececec;
    pointer-events: none;
}
html[data-theme="dark"] body .wa-section ~ .wa-section::before { border-top-color: #2a313a; }
@media (max-width: 700px) {
    .wa-section { padding-top: 15px; margin-bottom: 15px; }
}
/* Márgenes propios que sumaban al hueco entre módulos. */
.wa-section > .wa-assoc-block:first-child,
.wa-section > .wa-section-mobile-title + .wa-assoc-block { margin-top: 0; }
.wa-section > .wa-assoc-block:last-child { margin-bottom: 0; }

/* Justified description text in all detail page sections */
.wa-section p {
    text-align: justify;
    hyphens: auto;
    text-align-last: left; /* last line stays left, not stretched */
}

/* =============================================================
   MOBILE SECTION TITLES (shown when sidenav has no room)
   ============================================================= */

/* Hidden on desktop — sidenav replaces them */
.wa-section-mobile-title { display: none; }

/* Show when there's not enough lateral space for the sidenav (< ~1100px) */
@media (max-width: 1100px) {
    .wa-section-mobile-title {
        display: block;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.8px;
        text-transform: uppercase;
        color: var(--wag-type-section-mobile-title-ink, var(--wag-style-section-mobile-title-ink));
        /* Título → contenido: 15px, como en escritorio (antes quedaba a 4). */
        padding: 0;
        margin-bottom: 15px;
    }
    /* Hide existing headings inside any section that has a nav label
       (= already has a .wa-section-mobile-title at the top).
       !important overrides specificity from the filterbar context.
       .wa-assoc-title covers [operator_hotspots] which uses a different class. */
    .wa-section[data-nav-label] .wa-section-heading,
.wa-section[data-nav-label] .wa-assoc-title,
.wa-section[data-nav-label] .wa-tours-title{ display: none !important; }
    /* Si la barra solo llevaba ese título, queda vacía pero seguía ocupando
       6px + su margen: 36px entre el título móvil y la primera tarjeta en
       vez de 15 (medido 2026-09-26). Con filtros dentro se queda. */
    .wa-section[data-nav-label] .wa-tours-filterbar:not(:has(> :not(.wa-section-heading))) { display: none; }
    /* Excepción: en la fila agrupada («Reservar», «Alrededor») el título de la
       sección es genérico y cada grupo necesita el suyo. */
    .wa-section[data-nav-label] .wa-book-group .wa-section-heading { display: block !important; }
    .wa-section[data-nav-label] .wa-book-group .wa-tours-filterbar { display: flex; }
}

/* =============================================================
   STICKY SIDEBAR NAV
   ============================================================= */

.wa-sidenav {
    position: fixed;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: var(--wag-space-8);
    pointer-events: none;
    margin-top: 20px;
    /* left + top set by JS */
}

.wa-sidenav__item {
    pointer-events: all;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* right-justified (Marc, 2026-08-02): the box's
        right edge is already fixed by JS (placeH()); without this, shorter
        labels sit flush-left inside their equal-width row instead of lining
        up on the right, which reads as a ragged left-aligned TOC. */
    gap: 7px;
    text-decoration: none;
    padding: 2px 0;
    opacity: 0.35;
    color: #657083;
    transition: opacity .2s ease, color .2s ease;
}

.wa .wa-sidenav__item:hover { opacity: 0.7; }

.wa-sidenav__item.is-active {
    opacity: 1;
    color: #12171e; /* el de la topbar (#wa-global-topbar) */
}
html[data-theme="dark"] .wa-sidenav__item.is-active { color: var(--wag-dark-ink); }

.wa-sidenav__label {
    font-size: var(--wag-text-12);
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: inherit;
    white-space: nowrap;
}

.wa-sidenav__arrow {
    /* 8 de ancho, no 13: la caja sigue al viewBox estrecho del chevron
       (sidenav.js), así que la altura se mantiene y el ancho se recorta. */
    width: 8px;
    height: 13px;
    flex-shrink: 0;
    color: inherit;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .2s ease, transform .25s ease;
}

.wa-sidenav__item:hover .wa-sidenav__arrow,
.wa-sidenav__item.is-active .wa-sidenav__arrow {
    opacity: 1;
    transform: translateX(0);
}


/* =============================================================
   HOTSPOT — Contact section
   ============================================================= */

.hotspot-contact-card {
    display: flex;
    gap: var(--wag-space-24);
    align-items: flex-start;
    flex-wrap: wrap;
}

/* Contact details block */
.hc-details-block {
    flex: 1;
    min-width: 220px;
    background: #f8f9fb;
    border-radius: var(--wag-radius-16);
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.hc-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #eef0f3;
}

.hc-row:last-child { border-bottom: none; }

.hc-row__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--wag-radius-8);
    background: var(--wag-surface);
    flex-shrink: 0;
    color: #5f7f9f;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.hc-row__icon svg { width: 15px; height: 15px; }

.hc-row__body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.hc-row__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #aaa;
}

.hc-row__value {
    font-size: var(--wag-text-14);
    font-weight: 500;
    color: #2b3546;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hc-row__value a {
    color: inherit;
    text-decoration: none;
    transition: color .15s ease;
}

.wa .hc-row__value a:hover { color: #5f7f9f; }

/* Social block */
.hc-socials-block {
    background: #f8f9fb;
    border-radius: var(--wag-radius-16);
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: var(--wag-space-16);
    align-items: flex-start;
}

.hc-block-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #aaa;
}

.hc-socials {
    display: flex;
    gap: 10px;
}

.hc-social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--wag-surface);
    color: #657083;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    text-decoration: none;
    transition: color .18s ease, background .18s ease, transform .15s ease, box-shadow .15s ease;
}

.hc-social svg { width: 17px; height: 17px; }

.wa .hc-social:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.wa .hc-social--instagram:hover { color: #c13584; background: rgba(193,53,132,.06); }
.wa .hc-social--facebook:hover { color: #1877f2; background: rgba(24,119,242,.06); }
.wa .hc-social--twitter:hover { color: #111;    background: rgba(0,0,0,.04); }

/* Right column: social + directions stacked (column by default, row on small mobile) */
.hc-right-col { display: flex; flex-direction: column; gap: var(--wag-space-12); }

@media (max-width: 497px) {
    .hc-right-col { flex-direction: row; align-items: stretch; }
    .hc-right-col > * { flex: 1; }
}

/* ── Gallery admin moderation panel ──────────────────────────────────────── */

.wa-gal-admin-kpis { display: flex; gap: var(--wag-space-12); flex-wrap: wrap; margin-bottom: 24px; }
.wa-gal-admin-kpi {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 14px 24px; border-radius: 14px; text-decoration: none;
    background: #f5f7fa; border: 2px solid transparent;
    transition: border-color .15s, background .15s;
}
.wa-gal-admin-kpi strong { font-size: 26px; font-weight: 700; color: var(--kpi-color, #333); line-height: 1; }
.wa-gal-admin-kpi span   { font-size: var(--wag-text-12); color: #666; font-weight: 500; }
.wa-gal-admin-kpi--active { background: var(--wag-surface); border-color: var(--kpi-color, #333); }
.wa .wa-gal-admin-kpi:hover:not(.wa-gal-admin-kpi--active) { background: #eef0f3; }

.wa-gal-admin-table .wa-admin-trow { grid-template-columns: 80px 1fr auto; align-items: center; gap: var(--wag-space-16); }
.wa-gal-admin-thumb-link { display: block; border-radius: var(--wag-radius-8); overflow: hidden; flex-shrink: 0; }
.wa-gal-admin-thumb      { width: 80px; height: 56px; object-fit: cover; display: block; }

.wa-gal-admin-meta   { display: flex; flex-direction: column; gap: var(--wag-space-4); min-width: 0; }
.wa-gal-admin-species { font-weight: 600; font-size: var(--wag-text-14); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-gal-admin-species a { color: inherit; text-decoration: none; }
.wa .wa-gal-admin-species a:hover { text-decoration: underline; }
.wa-gal-admin-sub    { font-size: var(--wag-text-12); color: #888; }
.wa-gal-admin-sub strong { color: #555; }

.wa-gal-admin-actions { display: flex; gap: var(--wag-space-8); flex-shrink: 0; }
.wa-gal-mod-btn {
    padding: 5px 14px; border-radius: var(--wag-radius-8); font-size: var(--wag-text-13); font-weight: 600;
    border: none; cursor: pointer; transition: opacity .15s;
}
.wa-gal-mod-btn:disabled { opacity: .5; cursor: default; }
.wa-gal-mod-btn--approve { background: #22c55e; color: #fff; }
.wa .wa-gal-mod-btn--approve:hover:not(:disabled) { background: #16a34a; }
.wa-gal-mod-btn--reject  { background: #f1f3f5; color: #555; }
.wa .wa-gal-mod-btn--reject:hover:not(:disabled) { background: #e8ebee; }

/* ── Search results page ──────────────────────────────────────────────────── */

.wa-search-page {
    min-height: 100vh;
    background: #f4f6f8;
    /* Full-bleed: escape Astra's #primary container regardless of sidebar layout.
       Works because Astra doesn't apply overflow:hidden on #primary. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    box-sizing: border-box;
}

/* Topbar */
.wa-search-topbar {
    display: flex;
    align-items: center;
    gap: var(--wag-space-20);
    padding: 0 40px;
    height: 48px;
    background: #0d1521;
    position: sticky;
    top: 0;
    z-index: 100;
}

.wa-search-back {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    text-decoration: none;
    transition: color .2s;
}
.wa .wa-search-back:hover { color: rgba(255,255,255,0.9); }

.wa-search-topbar-query {
    display: flex;
    align-items: center;
    gap: var(--wag-space-8);
    font-size: var(--wag-text-11);
}
.wa-search-label {
    color: rgba(255,255,255,0.3);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
}
.wa-search-term {
    color: rgba(255,255,255,0.75);
    font-style: italic;
}

/* Header */
.wa-search-header {
    background: var(--wag-surface);
    border-bottom: 1px solid #e8ecf0;
    padding: 36px 0 28px;
}
.wa-search-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}
.wa-search-title {
    font-size: 22px;
    font-weight: 600;
    color: #1a2535;
    margin: 0;
}
.wa-search-title em {
    font-style: italic;
    color: #4e6d88;
}

/* Body */
.wa-search-body {
    max-width: 1200px;
    margin: 0 auto;
    padding: 36px 40px 64px;
}

/* Group */
.wa-search-group {
    margin-bottom: 40px;
}
.wa-search-group-title {
    display: flex;
    align-items: center;
    gap: var(--wag-space-8);
    font-size: var(--wag-text-11);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #6b7a8d;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e8ecf0;
}
.wa-sgt-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.wa-sgt-count {
    margin-left: auto;
    font-size: 10px;
    color: #aab0bb;
    font-weight: 500;
    letter-spacing: 0;
}

/* Cards grid */
.wa-search-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}

.wa-search-card {
    background: var(--wag-surface);
    border-radius: var(--wag-radius-8);
    text-decoration: none;
    border: 1px solid var(--wag-type-search-card-line, var(--wag-style-tarjeta-busqueda-line));
    padding: 10px 12px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    transition: border-color .15s, box-shadow .15s;
}
.wa .wa-search-card:hover {
    border-color: var(--wag-type-search-card-hover-line, var(--wag-style-tarjeta-busqueda-hover-line));
    box-shadow: var(--wag-type-search-card-hover-shadow, var(--wag-style-tarjeta-busqueda-hover-shadow));
}
.wa-sc-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--wag-space-4);
}
.wa-sc-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
}
.wa-sc-title {
    font-size: var(--wag-text-14);
    font-weight: 600;
    color: #1a2535;
    line-height: 1.3;
}
.wa-sc-meta {
    font-size: var(--wag-text-12);
    color: #8a95a3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.wa-sc-footer .wa-search-badge {
    flex-shrink: 0;
}

/* Empty state */
.wa-search-empty p { margin-bottom: 16px; font-size: 15px; }
.wa-search-empty-cta {
    font-size: var(--wag-text-12);
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #4e6d88;
    text-decoration: none;
}

/* Search page — break out of Astra container */
body.search #content.site-content,
body.search .ast-container,
body.search #primary {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    flex: 0 0 100% !important;
}
body.search .site-content > .ast-container {
    display: block !important;
}
body.search #primary { padding: 0 !important; }
body.search .ast-right-sidebar #secondary,
body.search .ast-left-sidebar #secondary { display: none !important; }