/**
 * site.css
 * -----------------------------------------------------------------------
 * Combina variables.css + base.css + components.css en un solo archivo.
 *
 * Por qué: las 3 se cargaban siempre juntas (ninguna página usa una sin
 * las otras dos), así que separarlas en 3 archivos no daba ningún
 * beneficio de cacheo independiente — solo sumaba 2 requests bloqueantes
 * de más antes de poder pintar la página. PageSpeed lo confirmó con datos
 * reales: "Solicitudes que bloquean el renderizado" marcaba ~1.8 segundos
 * de ahorro estimado en la página de Bariloche.
 *
 * Las hojas de estilo propias de cada tipo de página (home.css,
 * destino.css) siguen aparte a propósito: esas SÍ varían según la página
 * (ver $pageExtraCss en partials/head.php), así que separarlas evita
 * cargar CSS de la home en una página de destino y viceversa.
 *
 * Se mantiene el mismo orden de cascada que antes (variables → base →
 * componentes), con las 3 secciones bien separadas para que sea fácil
 * encontrar qué es cada cosa.
 * -----------------------------------------------------------------------
 */


/* =========================================================================
 * SECCIÓN 1: VARIABLES (antes variables.css)
 * -----------------------------------------------------------------------
 * Tokens de diseño (colores, tipografía, espaciados). Cambiando los
 * valores acá se actualiza todo el sitio, porque el resto de este archivo
 * solo usa estas variables (var(--color-primary), etc).
 *
 * Paleta: gama de azules a partir del color de marca del logo (#081754).
 * Tipografía: Anton para títulos (con interletrado, como el isologo) +
 * Nunito para texto de cuerpo — sin serif, pedido del cliente.
 * Si más adelante llega un manual de marca formal con otros valores,
 * ajustar acá.
 * ========================================================================= */
:root {
    /* ---- Colores: gama de azules a partir del logo (#081754) ---- */
    --color-primary: #081754;       /* azul marca (logo): botones, header, acentos */
    --color-primary-dark: #050d38;  /* variante más oscura: hover de botones */
    --color-secondary: #2f6fed;     /* azul más vivo: ratings, taglines, detalles */
    --color-bg: #ffffff;
    --color-bg-alt: #eef2fa;        /* fondo alternado entre secciones (azul muy claro) */
    --color-text: #12203f;          /* texto principal, con tinte azulado */
    --color-text-muted: #56607a;
    --color-border: #d7e0ef;
    --color-whatsapp: #25d366;      /* verde de marca de WhatsApp: no cambia con la paleta del sitio */

    /* ---- Tipografía: sin serif (pedido del cliente) ---- */
    /* Anton para TODOS los títulos del sitio (h1-h4), no solo la home —
       es la misma fuente que --font-display, para que se vea consistente
       con el isologo (mayúsculas + interletrado ancho). */
    --font-heading: 'Anton', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

    /* Alias semántico: hoy vale lo mismo que --font-heading, se mantiene
       separado por si el día de mañana se quiere un tratamiento distinto
       solo para los títulos grandes sobre video/imagen de la home. */
    --font-display: 'Anton', 'Nunito', sans-serif;

    /* Interletrado de los títulos, para acercarse al isologo (que tiene
       las letras bien separadas). Un solo valor acá para que quede
       consistente en toda la web. */
    --heading-letter-spacing: 0.05em;

    --fs-base: 16px;
    --fs-sm: 0.875rem;
    --fs-md: 1rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.75rem;
    --fs-xxl: 2.25rem;

    /* ---- Espaciados (escala consistente, mobile-first) ---- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2.5rem;
    --space-6: 4rem;

    /* ---- Layout ---- */
    --container-max: 1180px;
    --radius: 12px;
    --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.08);

    /* ---- Breakpoints de referencia (documentación; en CSS puro no se
       pueden usar variables dentro de @media, se dejan como comentario
       para que todo el equipo use los mismos cortes) ----
       tablet: 700px
       desktop: 1024px
    */

    /* ---- z-index ---- */
    --z-header: 100;
    --z-whatsapp: 90;
}


/* =========================================================================
 * SECCIÓN 2: BASE (antes base.css)
 * -----------------------------------------------------------------------
 * Reset mínimo + estilos base de tipografía y layout. Mobile-first: los
 * estilos "de base" son para pantallas chicas, y los @media (min-width)
 * van agrandando/ajustando para tablet y escritorio.
 * ========================================================================= */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: var(--fs-base);
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    /* Anton solo existe en un peso (viene bien "negro"/pesado de fábrica,
       es su estilo). Sin este font-weight:400 explícito, el navegador
       aplica su bold por defecto de los títulos (h1-h4) y, como Anton no
       tiene un archivo "bold" real, lo simula engrosando encima las
       letras — quedaba doblemente pesado. Con 400 se pide el único peso
       real que tiene la fuente, sin ese engrosado sintético. */
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: var(--heading-letter-spacing);
    line-height: 1.15; /* un poco más ajustado que 1.2: Anton es alto/condensado */
    margin: 0 0 var(--space-3);
}

h1 { font-size: var(--fs-xxl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }

p {
    margin: 0 0 var(--space-3);
    color: var(--color-text-muted);
}

/* Contenedor centrado, con padding lateral en mobile */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-3);
}

@media (min-width: 700px) {
    .container {
        padding-inline: var(--space-4);
    }
}

/* Utilidad genérica de sección con separación vertical consistente */
.section {
    padding-block: var(--space-5);
}

.section--alt {
    background: var(--color-bg-alt);
}

.section__title {
    margin-bottom: var(--space-4);
}

/* Foco visible para accesibilidad de teclado */
a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

/* Oculta visualmente pero deja accesible para lectores de pantalla y
   buscadores (NO usar display:none, eso sí lo saca del todo). Se usa
   para el <h1> de la home: el cliente pidió que la home sea solo
   logo + menú + videos, pero un <h1> ayuda al SEO igual sin romper
   ese diseño porque no se ve. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Animación de aparición al scrollear ----
   Clase que agrega assets/js/reveal.js vía IntersectionObserver cuando un
   bloque entra en pantalla. Si JS no corre (falla, deshabilitado, un
   crawler que no lo ejecuta), el contenido queda visible igual: la clase
   ".reveal-on-scroll" recién se agrega por JS, nunca viene en el HTML de
   entrada, así que nada depende de la animación para poder leerse. Solo
   anima opacity/transform (nunca layout), así que no cuesta rendimiento
   ni genera Cumulative Layout Shift. */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal-on-scroll.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* =========================================================================
 * SECCIÓN 3: COMPONENTES (antes components.css)
 * -----------------------------------------------------------------------
 * Estilos de los componentes reutilizables definidos en includes/functions.php
 * (header/menú, botones, card de destino, tarjeta de habitación, galería,
 * mapa, botón de WhatsApp, listas de info). Mobile-first.
 * ========================================================================= */

/* ============ Botones ============ */
.btn {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius);
    font-weight: 600;
    font-size: var(--fs-md);
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn--primary {
    background: var(--color-primary);
    color: #fff;
}

.btn--primary:hover {
    background: var(--color-primary-dark);
}

.btn--outline {
    background: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn--reserva {
    width: 100%;
    text-align: center;
}

.btn__icon {
    vertical-align: middle;
    margin-right: var(--space-2);
}

@media (min-width: 700px) {
    .btn--reserva {
        width: auto;
    }
}


/* ============ Header / navegación ============ */
.site-header {
    position: sticky;
    /* --cb-bar-h la publica main.js: alto de la barra de Cloudbeds cuando
       es fija (desktop/tablet, solo Cariló y Bariloche), 0 en el resto.
       Sin esto la barra (z-index 50001) tapaba el header al scrollear. */
    top: var(--cb-bar-h, 0px);
    z-index: var(--z-header);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--space-2);
}

.site-header__logo img {
    height: 40px;
    width: auto;
}

/* Botón hamburguesa (mobile) */
.hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
}

.hamburger span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--color-text);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Menú: en mobile es un panel que se despliega debajo del header */
.main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}

.main-nav[data-state="open"] {
    max-height: 500px;
}

.main-nav__list {
    display: flex;
    flex-direction: column;
    padding: var(--space-3);
}

.main-nav__list li a {
    display: block;
    padding: var(--space-2) 0;
    font-weight: 500;
}

.main-nav__list li a[aria-current="page"] {
    color: var(--color-primary);
    font-weight: 700;
}

/* Pedido del cliente (corrección post-demo): los 4 destinos en negrita,
   para diferenciarlos del resto de las opciones del menú (Reservar,
   Formas de pago, Rewards, Empleos), que quedan con el peso normal. */
.main-nav__list li a.main-nav__destino {
    font-weight: 700;
}

.main-nav__divider {
    border-top: 1px solid var(--color-border);
    margin: var(--space-2) 0;
}

/* Desktop/tablet: menú horizontal siempre visible, sin hamburguesa */
@media (min-width: 900px) {
    .hamburger {
        display: none;
    }

    .main-nav {
        position: static;
        max-height: none;
        overflow: visible;
        border-bottom: none;
    }

    .main-nav__list {
        flex-direction: row;
        align-items: center;
        gap: var(--space-4);
        padding: 0;
    }

    .main-nav__divider {
        display: none;
    }
}


/* ============ Widget flotante de Cloudbeds (reservas.widgetFloatScript) ============ */
/* El widget lo inyecta Cloudbeds en tiempo de ejecución con sus propios
   estilos (gris genérico de fábrica, Arial, sin nada de la marca) — por
   eso todo acá necesita !important para poder pisarlos. Solo aparece en
   Cariló y Bariloche (los únicos destinos con reservas.widgetFloatScript
   configurado).

   El bloque del botón (fondo blanco, texto #333, radio 4px, negrita +
   hover #e6e6e6) es tal cual lo mandó el cliente por mail — no tocar esos
   valores puntuales sin que lo pida de nuevo. El resto (fondo de la barra,
   tipografía, inputs) lo agregué para que deje de verse como un widget
   gris pegado sin relación con el resto del sitio. Cambios acotados a
   color/tipografía/bordes — nunca ancho/posición, para no romper el
   selector de fechas propio de Cloudbeds (Pikaday). */
.CloudBedsWidget .float_bg2 {
    background: var(--color-primary) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.CloudBedsWidget .float_bg2,
.CloudBedsWidget .float_bg2 * {
    font-family: var(--font-body) !important;
}

.CloudBedsWidget .acessa_float_description {
    font-weight: 600 !important;
    /* Cloudbeds calculó el "margin-top: 14px" original para su texto en
       inglés de una sola línea ("Book direct..."). El texto en español que
       generó el cliente es más largo y envuelve en 2 líneas, así que ese
       margen fijo lo empujaba hacia abajo y quedaba descentrado respecto
       a las fechas/botón. Centrado con flexbox en vez de un número fijo,
       así funciona sea cual sea la cantidad de líneas que ocupe el texto. */
    margin-top: 5px !important;
    padding: 0 !important;
    align-items: center !important;
}

.CloudBedsWidget .form_group .control-label {
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    font-size: 11px !important;
    opacity: 0.85;
}

.CloudBedsWidget .input_group input.date {
    border-radius: 6px !important;
    border: none !important;
}

/* El ancho/alto (100x32px) los fija el propio CSS de Cloudbeds — acá NO
   se tocan (ver comentario grande de arriba), solo color/forma/feedback.
   ".submit_link.submit_link" (la clase repetida dos veces) es un truco de
   especificidad: Cloudbeds tiene su propia regla de border-radius con
   !important y más específica que la nuestra, así que aunque la pisábamos
   en todo lo demás, el radio seguía quedando en 0. Repetir la clase cuenta
   como un selector de clase extra para el navegador (sube la
   especificidad) sin necesidad de tocar el HTML que genera el widget. */
.CloudBedsWidget .float_bg2 a.submit_link.submit_link {
    background: #ffffff !important;
    color: #333333 !important;
    border-radius: 6px !important;
    padding: 5px 10px;
    margin: 0 0 2px 0;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}

.CloudBedsWidget .float_bg2 a.submit_link:hover {
    background: #e6e6e6 !important;
    color: #333333 !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28) !important;
}

.CloudBedsWidget .float_bg2 a.submit_link:active {
    transform: scale(0.95) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}


/* ============ Botón flotante de WhatsApp ============ */
/* El widget flotante de Cloudbeds (reservas.widgetFloatScript, solo en
   Cariló/Bariloche) en la práctica se muestra como una barra de reserva
   arriba de la página, no abajo a la derecha, así que no compite con este
   espacio. El chatbot de HiJiffy se quitó (el cliente decidió no usarlo);
   si vuelve, definir --whatsapp-bottom-offset en ~96px para apilar el
   botón de WhatsApp arriba de la burbuja del bot. */
.whatsapp-float {
    position: fixed;
    bottom: var(--whatsapp-bottom-offset, var(--space-3));
    right: var(--space-3);
    z-index: var(--z-whatsapp);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-whatsapp);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-soft);
}


/* ============ Bloque "foto + texto corto" (imagen-texto / imagen) ============ */
.bloque-imagen-texto {
    margin-bottom: var(--space-5);
}

.bloque-imagen-texto img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius);
}

.bloque-imagen-texto__caption {
    margin-top: var(--space-2);
    text-align: center;
    font-weight: 600;
    color: var(--color-text);
}


/* ============ Bloque de unidad (habitación / apart / tiny house) ============
   A propósito NO es una grilla: el croquis muestra cada unidad de forma
   completa (foto + nombre + detalle) antes de pasar a la siguiente, en
   una sola columna de scroll. */
.bloque-unidad {
    margin-bottom: var(--space-6);
}

.bloque-unidad > img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius);
    margin-bottom: var(--space-3);
}

.bloque-unidad__body h2 {
    /* El nombre de cada unidad (habitación/apart) es un <h2> por
       jerarquía semántica correcta (ver render_bloque(), functions.php),
       pero se ve del mismo tamaño que antes cuando era <h3> — solo
       cambió la etiqueta, no el diseño. */
    font-size: var(--fs-lg);
    margin-bottom: var(--space-1);
}

/* ============ Imágenes ampliables (lightbox) ============
   Se aplica a la foto principal de cada bloque (.zoomable-img) y a las
   fotos de galería (.gallery__item, ver más abajo) — el click lo maneja
   assets/js/gallery.js. Mismo criterio de feedback táctil que el resto
   del sitio: :active para touch, :hover solo si hay mouse real. */
.zoomable-img,
.gallery__item {
    cursor: zoom-in;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.zoomable-img:active,
.gallery__item:active {
    transform: scale(0.98);
    opacity: 0.9;
}

@media (hover: hover) and (pointer: fine) {
    .zoomable-img:hover,
    .gallery__item:hover {
        opacity: 0.9;
    }
}

.bloque-unidad__caracteristicas li {
    padding-left: var(--space-3);
    position: relative;
    margin-bottom: var(--space-1);
}

.bloque-unidad__caracteristicas li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--color-primary);
}


/* ============ Botón de reserva del hero ============ */
.btn--reserva-hero {
    margin-block: var(--space-3);
}


/* ============ Galería ============ */
.gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
}

@media (min-width: 700px) {
    .gallery {
        grid-template-columns: repeat(4, 1fr);
    }
}

.gallery__item {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
    border-radius: var(--radius);
}

/* Lightbox creado dinámicamente por assets/js/gallery.js */
.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.85);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.gallery-lightbox.is-open {
    display: flex;
}

.gallery-lightbox img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: var(--radius);
}

/* Botón cerrar y flechas prev/next — mismos círculos semitransparentes,
   misma respuesta táctil (:active / :hover solo con mouse real) que el
   resto de los controles del sitio. Las flechas se ocultan por JS
   (display:none inline) cuando la foto ampliada no pertenece a un grupo
   navegable (una sola imagen, sin mini-galería). */
.gallery-lightbox__close,
.gallery-lightbox__nav {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.gallery-lightbox__close:active,
.gallery-lightbox__nav:active {
    transform: scale(0.92);
    background: rgba(255, 255, 255, 0.3);
}

@media (hover: hover) and (pointer: fine) {
    .gallery-lightbox__close:hover,
    .gallery-lightbox__nav:hover {
        background: rgba(255, 255, 255, 0.3);
    }
}

.gallery-lightbox__close {
    top: var(--space-3);
    right: var(--space-3);
    font-size: 1.75rem;
}

.gallery-lightbox__nav--prev {
    left: var(--space-3);
}

.gallery-lightbox__nav--next {
    right: var(--space-3);
}

/* En pantallas chicas las flechas a los costados quedan muy pegadas al
   borde y tapan la foto — las bajamos a una franja fija abajo. */
@media (max-width: 700px) {
    .gallery-lightbox__nav {
        top: auto;
        bottom: var(--space-3);
    }

    .gallery-lightbox__nav--prev {
        left: var(--space-3);
    }

    .gallery-lightbox__nav--next {
        right: var(--space-3);
    }
}

@media (min-width: 701px) {
    .gallery-lightbox__nav {
        top: 50%;
        transform: translateY(-50%);
    }

    .gallery-lightbox__nav--prev:active,
    .gallery-lightbox__nav--next:active {
        transform: translateY(-50%) scale(0.92);
    }
}


/* ============ Bloque de mapa (carga diferida) ============
   Antes del clic se muestra una ilustración de mapa genérica (ver el SVG
   inline en render_map_block(), includes/functions.php) — no es la
   ubicación real, es solo para dar la idea visual de "acá va un mapa"
   sin pedir ninguna imagen ni API externa. Recién al hacer clic se
   reemplaza por el iframe real de Google Maps (assets/js/maps.js). */
.map-block {
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-bg-alt);
}

.map-block__preview {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    background: none;
}

.map-block__illustration {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.map-block__pin {
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 34px;
    height: auto;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.3));
    transition: transform 0.15s ease;
}

.map-block__cta-text {
    position: absolute;
    left: 50%;
    bottom: var(--space-3);
    transform: translateX(-50%);
    background: var(--color-bg);
    color: var(--color-primary);
    font-weight: 600;
    font-size: var(--fs-sm);
    padding: var(--space-1) var(--space-3);
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: var(--shadow-soft);
}

.map-block__preview:active .map-block__pin {
    transform: translate(-50%, -50%) scale(0.9);
}

@media (hover: hover) and (pointer: fine) {
    .map-block__preview:hover .map-block__pin {
        transform: translate(-50%, -58%);
    }
}

.map-block__direccion {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    text-align: center;
}

.map-block iframe {
    width: 100%;
    height: 320px;
    border: 0;
}


/* ============ Bloque genérico de listas (servicios, restaurantes, POIs, etc.) ============ */
.bloque-lista {
    margin-bottom: var(--space-5);
}

/* ============ Bloque de texto suelto (descripciones generales largas) ============ */
.bloque-texto {
    margin-bottom: var(--space-5);
}

.bloque-texto p {
    margin-bottom: var(--space-3);
}

.bloque-texto p:last-child {
    margin-bottom: 0;
}

/* ============ Bloque de horarios (check-in/check-out, libre de humo) ============ */
.bloque-horarios {
    margin-bottom: var(--space-5);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-alt);
    border-radius: var(--radius);
}

.bloque-horarios p {
    margin: 0 0 var(--space-1);
}

.bloque-horarios p:last-child {
    margin-bottom: 0;
}

.bloque-horarios__humo {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

/* ============ Grilla de promociones ============ */
/* Cada tarjeta linkea a la página propia de esa promo (ver
   includes/promocion-template.php) — mismo criterio táctil (:active/:hover)
   que el resto de los elementos clickeables del sitio. */
.promo-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

@media (min-width: 700px) {
    .promo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.promo-card {
    display: block;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-bg-alt);
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.promo-card:active {
    transform: scale(0.98);
    opacity: 0.9;
}

@media (hover: hover) and (pointer: fine) {
    .promo-card:hover {
        opacity: 0.9;
    }
}

.promo-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.promo-card__body {
    padding: var(--space-3);
}

.promo-card__body h3 {
    margin: 0 0 var(--space-1);
    font-size: var(--fs-md);
}

.promo-card__body p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

/* ============ Link "volver al destino" (páginas de promoción) ============ */
.promo-volver {
    margin-bottom: var(--space-3);
}

.promo-volver a {
    font-weight: 600;
    color: var(--color-secondary);
}


/* ============ Listas de info (restaurantes, POIs, excursiones, enlaces) ============ */
.info-list li {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
}

.info-list .rating {
    color: var(--color-secondary);
    font-weight: 600;
    margin-left: var(--space-2);
}

.service-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.service-list__item {
    background: var(--color-bg-alt);
    border-radius: 999px;
    padding: var(--space-1) var(--space-3);
    font-size: var(--fs-sm);
}


/* ============ Footer ============ */
.site-footer {
    background: var(--color-bg-alt);
    padding-block: var(--space-5);
    margin-top: var(--space-6);
}

.site-footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    text-align: center;
}

/* Mobile: en fila (sin wrap) 4 links se apretaban tanto que el texto de
   cada uno terminaba envolviendo en varias líneas angostas que se pisaban
   entre sí (reporte del cliente, mail 27/08, tras sumar "Botón de
   arrepentimiento" como 4º link). En columna, centrado, no hay ese
   problema aunque se sumen más links a futuro. Desktop tiene de sobra
   espacio, así que ahí sigue en fila. */
.site-footer__links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

@media (min-width: 700px) {
    .site-footer__links {
        flex-direction: row;
        gap: var(--space-4);
    }
}

.social-links {
    display: flex;
    gap: var(--space-3);
}

.social-links__item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.social-links__item:active {
    transform: scale(0.94);
}

@media (hover: hover) and (pointer: fine) {
    .social-links__item:hover {
        background: var(--color-secondary);
    }
}

.site-footer__copy {
    font-size: var(--fs-sm);
}