@charset "UTF-8";
/* =============================================================================
   ViajeDesiertoMarruecos.com — Capa responsive
   -----------------------------------------------------------------------------
   style.css contiene la versión móvil. Aquí se escala hacia arriba.

   Puntos de ruptura
     540px   móvil grande  → rejillas de 2 columnas
     768px   tableta       → escala tipográfica intermedia
     1024px  escritorio    → menú horizontal, barra lateral, escala completa
     1280px  pantalla ancha
   ========================================================================== */

/* ==========================================================================
   ≥ 540px — MÓVIL GRANDE
   ========================================================================== */
@media (min-width: 540px) {

    .rejilla--2, .rejilla--3, .rejilla--4 { grid-template-columns: repeat(2, 1fr); }

    .galeria { grid-template-columns: repeat(3, 1fr); }

    .formulario__fila { grid-template-columns: 1fr 1fr; }

    .opinion { flex-basis: 62%; }

    .datos-tour { grid-template-columns: repeat(2, 1fr); }

    .aviso-cookies { left: auto; right: 16px; max-width: 420px; }
}

/* ==========================================================================
   ≥ 768px — TABLETA
   ========================================================================== */
@media (min-width: 768px) {

    :root {
        --t-body:     18px;
        --t-small:    16px;
        --t-h1:       40px;
        --t-h2:       34px;
        --t-h3:       28px;
        --t-h4:       23px;
        --t-h5:       20px;
        --t-h6:       18px;
        --t-hero:     48px;
        --t-hero-sub: 21px;
        --t-cita:     21px;
    }

    .seccion { padding-block: var(--e-8); }

    .hero--corto { min-height: 280px; }
    .hero--medio { min-height: 380px; }
    .hero--alto  { min-height: 560px; }

    .cajas-incluye  { grid-template-columns: 1fr 1fr; }
    .columnas-extras { grid-template-columns: repeat(3, 1fr); }

    .cta-final__inner {
        grid-template-columns: 1fr auto;
        gap: var(--e-6);
    }

    .pie__grid { grid-template-columns: repeat(2, 1fr); }
    .pie__col--empresa { grid-column: 1 / -1; }
    .pie__base-inner { grid-template-columns: 1fr auto; text-align: left; align-items: center; }
    .pie__legal { justify-content: flex-end; }

    .buscador { grid-template-columns: repeat(2, 1fr); align-items: end; }
    .buscador .buscador__accion { grid-column: 1 / -1; }

    .datos-tour { grid-template-columns: repeat(3, 1fr); }

    .opinion { flex-basis: 46%; }

    .carrusel__flecha--izq { left: -18px; }
    .carrusel__flecha--der { right: -18px; }
}

/* ==========================================================================
   ≥ 1024px — ESCRITORIO
   ========================================================================== */
@media (min-width: 1024px) {

    :root {
        /* Escala tipográfica completa del proyecto */
        --t-body:     18px;
        --t-small:    16px;
        --t-nav:      16px;
        --t-boton:    16px;
        --t-h1:       48px;
        --t-h2:       38px;
        --t-h3:       30px;
        --t-h4:       24px;
        --t-h5:       20px;
        --t-h6:       18px;
        --t-hero:     58px;
        --t-hero-sub: 22px;
        --t-cita:     22px;
    }

    html { scroll-padding-top: 130px; }

    /* --- Cabecera y menú horizontal --------------------------------- */

    .cabecera__inner { min-height: 84px; }
    .logo img { height: 56px; }

    .menu-boton { display: none; }

    .navegacion {
        position: static;
        max-height: none;
        overflow: visible;
        border: 0;
        box-shadow: none;
        background: transparent;
    }

    .menu { display: flex; align-items: center; gap: var(--e-1); }

    .menu__item { border: 0; }

    .menu__item > a {
        padding: 10px 14px;
        border-bottom: 3px solid transparent;
        white-space: nowrap;
    }
    .menu__item > a.activo,
    .menu__item > a:hover { border-bottom-color: var(--rojo); }

    .menu__flecha { display: inline-block; font-size: 11px; margin-left: 4px; }

    .menu__cta {
        background: var(--rojo);
        color: var(--blanco) !important;
        border-radius: var(--radio);
        border-bottom-color: transparent !important;
    }
    .menu__cta:hover { background: var(--rojo-oscuro); }

    .submenu-boton { display: none; }

    .submenu {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 260px;
        max-height: none;
        background: var(--blanco);
        border-top: 3px solid var(--rojo);
        box-shadow: var(--sombra-alta);
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        transition: opacity var(--transicion), transform var(--transicion), visibility var(--transicion);
    }
    .menu__item--desplegable:hover > .submenu,
    .menu__item--desplegable:focus-within > .submenu,
    .submenu.esta-abierto {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .submenu a { padding: 12px var(--e-4); }

    .menu__item--solo-movil { display: none; }

    /* --- Rejillas ---------------------------------------------------- */

    .rejilla--3 { grid-template-columns: repeat(3, 1fr); }
    .rejilla--4 { grid-template-columns: repeat(4, 1fr); }

    /* --- Disposición con barra lateral ------------------------------- */

    .diseno-lateral {
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: var(--e-8);
    }
    .diseno-lateral--izquierda { grid-template-columns: 340px minmax(0, 1fr); }
    .diseno-lateral--izquierda .barra-lateral { order: -1; }

    .barra-lateral {
        position: sticky;
        top: 104px;
        align-self: start;
    }

    /* --- Ficha de tour ----------------------------------------------- */

    .indice-tour { top: 84px; }
    .indice-tour ul { justify-content: flex-start; padding-inline: 0; }

    .datos-tour { grid-template-columns: repeat(2, 1fr); gap: var(--e-3) var(--e-6); }

    .galeria { grid-template-columns: repeat(4, 1fr); }
    .galeria a:first-child { grid-column: span 2; grid-row: span 2; }

    /* --- Opiniones ---------------------------------------------------- */

    .opinion { flex-basis: 31%; }

    /* --- Hero --------------------------------------------------------- */

    .hero--alto { min-height: 640px; }
    .hero--portada .hero__titulo { font-size: 64px; padding: var(--e-4) var(--e-7); }

    .buscador { grid-template-columns: repeat(4, 1fr); }
    .buscador .buscador__accion { grid-column: auto; }

    /* --- Pie de página ------------------------------------------------ */

    .pie__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr; gap: var(--e-6); }
    .pie__col--empresa { grid-column: auto; }

    /* --- CTA ---------------------------------------------------------- */

    .cta-final h2 { font-size: var(--t-h3); }

    /* --- Flotantes ---------------------------------------------------- */

    .whatsapp-flotante { right: 24px; bottom: 24px; width: 60px; height: 60px; font-size: 30px; }
    .subir { right: 24px; bottom: 96px; }
}

/* ==========================================================================
   ≥ 1280px — PANTALLA ANCHA
   ========================================================================== */
@media (min-width: 1280px) {

    :root { --t-hero: 64px; }

    .contenedor { padding-inline: var(--e-6); }

    .diseno-lateral { grid-template-columns: minmax(0, 1fr) 360px; }
}

/* ==========================================================================
   PREFERENCIAS DEL SISTEMA
   ========================================================================== */

/* Ajuste fino para pantallas de alta densidad */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    body { -webkit-font-smoothing: antialiased; }
}


/* =============================================================================
   Sitio estático — envoltorio del filtro del catálogo y salvaguardas móviles
   ========================================================================== */

/* Cada tarjeta del catálogo va envuelta en .tour-item para poder filtrarla;
   el envoltorio debe estirarse para que las tarjetas queden a la misma altura. */
.tour-item { display: flex; }
.tour-item > .tarjeta { width: 100%; }
.tour-item[hidden] { display: none !important; }

/* En móvil, los dos botones del formulario (WhatsApp / correo) se apilan
   y ocupan todo el ancho para que sean fáciles de pulsar. */
@media (max-width: 640px) {
    form[data-form-reserva] .boton { display: flex; width: 100%; margin: 0 0 var(--e-3) 0 !important; }
    .hero__acciones .boton,
    .cta-final__acciones .boton { width: 100%; }
    .indice-tour ul { gap: var(--e-4); }
    /* Evita desbordes horizontales de cualquier contenido ancho embebido */
    .contenido-principal { min-width: 0; }
    table.tabla { min-width: 480px; }
}

/* Nunca permitir scroll horizontal accidental en pantallas estrechas */
@media (max-width: 480px) {
    .hero__titulo { word-break: break-word; }
}