/* ============================================================
   El Despeñadero — Ajustes responsive (móvil/tablet)
   Solo overrides dentro de @media + corrección de un modal oculto.
   El diseño de ESCRITORIO no se toca.
   ============================================================ */

/* Pie del panel del menú móvil: oculto en escritorio (vive dentro de .nav-list). */
.nav-panel-foot{display:none}

/* Selector de idioma (WPML) — conserva el aspecto "ES | EN" de la maqueta. */
.lang a{color:inherit;text-decoration:none;transition:color .25s var(--ease)}
.lang a:hover,.lang a.is-active{color:var(--gold)}
.lang i{font-style:normal;opacity:.5;margin:0 6px}
.nav-panel-lang{display:flex;align-items:center;justify-content:center;gap:0;font-size:15px;font-weight:600;letter-spacing:1px;color:rgba(255,255,255,.7)}
.nav-panel-lang a{color:rgba(255,255,255,.7);padding:0}
.nav-panel-lang a.is-active{color:var(--gold)}
.nav-panel-lang i{font-style:normal;opacity:.4;margin:0 8px}

/* ESCRITORIO — cabecera sólida (páginas interiores): el logo (74px) desbordaba
   7px por debajo de la barra blanca e invadía la imagen del hero (bug heredado
   de la maqueta). Se contiene dentro de la barra sin alterar su altura. */
@media(min-width:993px){
  .site-header--solid .nav-logo,.site-header--solid .nav-logo img,
  .site-header--solid.scrolled .nav-logo,.site-header--solid.scrolled .nav-logo img{height:58px}
}

/* ── Modal de vídeo global: debe estar OCULTO por defecto ─────
   (setup.php imprime el markup; sin este CSS aparecía una "×" y
   una caja vacía al pie en todas las vistas). ──────────────── */
.dsp-vmodal{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center}
.dsp-vmodal[aria-hidden="false"]{display:flex}
.dsp-vmodal__overlay{position:absolute;inset:0;background:rgba(0,0,0,.82)}
.dsp-vmodal__box{position:relative;z-index:1;width:min(960px,92vw);aspect-ratio:16/9;background:#000}
.dsp-vmodal__media{width:100%;height:100%}
.dsp-vmodal__media iframe,.dsp-vmodal__media video{width:100%;height:100%;border:0;display:block}
.dsp-vmodal__close{position:absolute;top:-46px;right:0;background:none;border:0;color:#fff;font-size:34px;line-height:1;cursor:pointer}

/* ============================================================
   TABLET + MÓVIL (≤992): cabecera + MENÚ móvil (rediseñado)
   ============================================================ */
@media(max-width:992px){
  /* Bloquea el scroll del fondo con el menú abierto. */
  body.nav-open{overflow:hidden}

  /* Cabecera y logo por encima del panel; hamburguesa clicable. */
  #siteHeader{z-index:1000}
  .nav-logo,.nav-toggle{position:relative;z-index:1002}
  .nav-toggle{padding:10px 6px}

  /* Doble barra sticky en páginas internas: topbar oculta en móvil. */
  .site-header--solid.scrolled .topbar{display:none}

  /* El logo (74px) era más alto que la barra (60px) y se salía por debajo,
     invadiendo la imagen del hero. Barra y logo proporcionados en móvil. */
  .navrow,.site-header--solid.scrolled .navrow{padding-top:8px}
  .navrow .shell,
  .site-header--solid.scrolled .navrow .shell,
  .site-header.scrolled .navrow .shell{height:auto;min-height:58px;padding-block:6px}
  .nav-logo,.nav-logo img,
  .site-header.scrolled .nav-logo,.site-header.scrolled .nav-logo img,
  .site-header--solid.scrolled .nav-logo,.site-header--solid.scrolled .nav-logo img{height:50px}

  /* ── Panel del menú: pantalla completa, elegante ── */
  .nav-list.open{
    position:fixed;top:0;left:0;right:0;bottom:auto;z-index:1001;
    /* Altura explícita: en iOS Safari un ancestro con backdrop-filter/animación
       (cabecera .scrolled) hace que position:fixed se dimensione al ancestro.
       Forzamos el alto real de viewport (dvh = dinámico con las barras de iOS). */
    height:100vh;height:100dvh;
    display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:0;padding:104px 30px 40px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    background:radial-gradient(130% 90% at 100% 0,#1f4a22 0%,#12210f 55%,#0b130a 100%);
    animation:dspNavIn .28s var(--ease) both;
  }
  @keyframes dspNavIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

  .nav-list.open a,
  .nav-list.open .nav-more{
    color:#fff;font-size:19px;font-weight:500;letter-spacing:.4px;
    padding:15px 2px;display:flex;align-items:center;justify-content:space-between;
    border-bottom:1px solid rgba(255,255,255,.12);
  }
  .nav-list.open a.active{color:var(--gold)}
  .nav-list.open a:active{opacity:.65}

  /* "Mas Info": etiqueta de grupo + subenlaces alineados como el resto (izquierda). */
  .nav-list.open .nav-dd{display:flex;flex-direction:column;align-items:stretch}
  .nav-list.open .nav-more{
    justify-content:flex-start;text-align:left;
    color:var(--gold);font-size:12px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;
    border-bottom:0;padding:22px 2px 4px;cursor:default;pointer-events:none;
  }
  .nav-list.open .nav-more .chev{display:none}
  /* Reset del submenú (base es dropdown absoluto/oculto) → lista plana en el panel. */
  .nav-list.open .nav-submenu{
    position:static;left:auto;transform:none;opacity:1;visibility:visible;pointer-events:auto;
    display:flex;flex-direction:column;align-items:stretch;
    background:none;box-shadow:none;padding:0;margin:0;min-width:0;width:auto;border:0;
  }
  .nav-list.open .nav-submenu a{
    display:block;text-align:left;width:auto;
    font-size:19px;font-weight:500;color:rgba(255,255,255,.85);letter-spacing:.4px;
    padding:15px 2px;border-bottom:1px solid rgba(255,255,255,.12);
  }
  .nav-list.open .nav-submenu a:last-child{border-bottom:0}
  .nav-list.open .nav-submenu a:hover{background:none;color:var(--gold)}

  /* Franja superior sólida sobre el panel: el logo/X no se solapan al hacer scroll. */
  body.nav-open .navrow{position:relative;z-index:1002;background:#1b431e}

  /* Logo blanco dentro del menú abierto (invierte el color en páginas internas). */
  body.nav-open .nav-logo img{filter:brightness(0) invert(1)}

  /* Hamburguesa → X. */
  body.nav-open .nav-toggle span{background:#fff}
  body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.nav-open .nav-toggle span:nth-child(2){opacity:0}
  body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* Pie del panel: empujado al fondo para llenar el alto (CTA + tel + redes). */
  .nav-list.open .nav-panel-foot{
    display:flex;flex-direction:column;align-items:stretch;gap:20px;
    margin-top:auto;padding-top:30px;
  }
  .nav-list.open .nav-panel-cta{justify-content:center;padding:15px 20px;font-size:16px}
  .nav-list.open .nav-panel-phone{
    display:inline-flex;align-items:center;gap:10px;color:#fff;font-size:17px;font-weight:500;justify-content:center;
  }
  .nav-list.open .nav-panel-phone img{width:20px;height:20px;filter:brightness(0) invert(1)}
  .nav-list.open .nav-panel-social{display:flex;justify-content:center;gap:22px}
  .nav-list.open .nav-panel-social a{color:rgba(255,255,255,.85);padding:0;border:0;display:inline-flex}
  .nav-list.open .nav-panel-social a:hover{color:var(--gold)}
}

/* ============================================================
   TABLET (641–992): pilares en fila (aprovechar el ancho)
   ============================================================ */
@media(min-width:641px) and (max-width:992px){
  .pilares__cols{flex-direction:row;align-items:stretch;gap:0}
  .pilar{flex:1 1 0;max-width:none;padding:26px 16px}
  .pilar:not(:last-child){border-right:1px solid rgba(255,255,255,.2);border-bottom:0}
  .pilar h3{font-size:18px;letter-spacing:2px}
  .pilar p{font-size:15px;line-height:23px}
}

/* ============================================================
   ≤992: sección Contacto equilibrada (centrada) + legibilidad
   ============================================================ */
@media(max-width:992px){
  .contact__panel{text-align:center}
  .contact__row{justify-content:center}
  /* Longitud de línea cómoda en tablet para el texto largo. */
  .history__card p{max-width:68ch}
}

/* ============================================================
   ≤1100: mapa de Contacto sin recortar (ver el mapa entero)
   ============================================================ */
@media(max-width:1100px){
  .cinfo__map{min-height:0}
  .cinfo__map img{position:static;height:auto;object-fit:contain;background:var(--cream)}
}

/* ============================================================
   MÓVIL (≤640): footer (logos más contenidos + aire) y contacto
   ============================================================ */
@media(max-width:640px){
  /* Logos del footer no tan grandes y con aire respecto al copyright. */
  .footer{padding:56px 0 46px}
  .footer__brand .logos{gap:22px;margin-bottom:16px}
  .footer__brand .logos img:first-child,
  .footer__brand .ademac{height:58px}
  .footer__brand p{max-width:none}
  .subfooter .shell{height:auto;min-height:64px;padding-block:16px;text-align:center}
  .subfooter p{font-size:14px}

  /* Sección "Contacta con nosotros": título que no se corte. */
  .contact__panel{padding:32px 22px}
  .contact__panel h2{font-size:26px;letter-spacing:-.4px}
  .contact__row span{font-size:17px}

  /* Direcciones/textos largos del footer: que envuelvan. */
  .footer__contact .frow{align-items:flex-start;line-height:1.4}
}

/* Gracias: título de agradecimiento sin desbordar en móvil. */
@media(max-width:640px){
  .page-gracias .hero--inner .h-section{font-size:28px;line-height:1.18}
  .page-gracias .hero--inner{min-height:66vh}
}

/* ============================================================
   RITMO VERTICAL + ALTURAS DE IMAGEN — TABLET (≤992)
   Secciones proporcionadas, sin bloques enormes ni fotos gigantes.
   ============================================================ */
@media(max-width:992px){
  /* Héroes: nunca más altos que la pantalla. */
  .hero{min-height:640px}
  .hero--inner{min-height:640px}
  .hero--inner .hero__inner{padding-top:170px}

  /* Ritmo vertical unificado entre secciones. */
  .caceria,.checklist,.itin,.reviews,.insta{padding-block:60px}
  .team-sec{padding:60px 0}
  .pilares{padding:52px 0 56px}
  .history{padding-top:48px}
  .gal{padding:52px 0}
  .vids{padding:52px 0 60px}
  .frows{padding-block:48px}
  .agal{padding-block:48px}
  .lodge{padding-top:48px}
  .estancia{padding-top:44px}
  .tincl{padding-block:56px}
  .sadd{padding-bottom:60px}
  .mgal{padding-block:32px 60px}
  .mediav{padding-block:32px 60px}
  .faqpage{padding-block:44px 60px}
  .footer{padding:60px 0 48px}

  /* Imágenes contenidas (nada de fotos que ocupen pantallas enteras). */
  .pillar__img{min-height:0}
  .pillar__img img{height:auto;aspect-ratio:16/10;max-height:420px;object-fit:cover}
  .itin__img{min-height:0}
  .itin__img img{height:auto;aspect-ratio:16/10;max-height:400px;object-fit:cover}
  .contact__media{min-height:0}
  .contact__media img{height:auto;aspect-ratio:16/9;max-height:420px;object-fit:cover}
  .caceria__col--media img{min-height:0;max-height:460px;object-fit:cover}
  .caceria__photo{max-height:360px;object-fit:cover}
  .lodge__left>img{height:auto;max-height:520px;object-fit:cover}
  .lodge__right .bed{height:auto;max-height:400px;object-fit:cover}
  .frow__img img{max-height:440px}
  .crow__img{height:auto}
  .crow__img img{height:auto;aspect-ratio:16/10;max-height:420px;object-fit:cover}
  .estancia__img{height:auto;max-height:380px}
  .history__band{max-height:420px}
  .history__band img{height:100%;object-fit:cover}
}

/* ============================================================
   RITMO VERTICAL + ALTURAS — MÓVIL (≤640)
   ============================================================ */
@media(max-width:640px){
  .hero{min-height:540px}
  .hero--inner{min-height:520px}
  .hero--inner .hero__inner{padding-top:140px}

  /* Ritmo compacto y homogéneo. */
  .caceria,.checklist,.itin,.reviews,.insta{padding-block:46px}
  .team-sec{padding:46px 0}
  .pilares{padding:42px 0 46px}
  .history{padding-top:38px}
  .gal{padding:38px 0}
  .vids{padding:38px 0 46px}
  .frows{padding-block:36px}
  .agal{padding-block:34px}
  .lodge{padding-top:36px}
  .estancia{padding-top:34px}
  .tincl{padding-block:44px}
  .sadd{padding-bottom:46px}
  .mgal{padding-block:22px 46px}
  .mediav{padding-block:22px 46px}
  .faqpage{padding-block:32px 46px}
  .numbers .shell{padding-block:46px}

  /* Imágenes proporcionadas al móvil. */
  .pillar__img img{aspect-ratio:4/3;max-height:280px}
  .itin__img img{aspect-ratio:4/3;max-height:250px}
  .contact__media img{aspect-ratio:4/3;max-height:300px}
  .caceria__photo{max-height:250px}
  .caceria__col--media img{max-height:300px}
  .lodge__left>img{max-height:330px}
  .lodge__right .bed{max-height:250px}
  .frow__img img{max-height:270px}
  .crow__img img{aspect-ratio:4/3;max-height:270px}
  .estancia__img{max-height:240px}
  .history__band{max-height:260px}

  /* Galería: 2 columnas (12 fotos en 1 columna era interminable). */
  .mgal{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .mgal__col{display:contents}
  .mgal .tall,.mgal .short{aspect-ratio:1/1}

  /* Checklist 360: tarjetas más compactas. */
  .card-svc{padding:22px 18px}
  .card-svc h3{font-size:18px}
  .card-svc p{font-size:15px}
  .card-svc .ico{width:48px;height:48px}

  /* Equipo: menos aire entre tarjetas. */
  .team{gap:28px}
  .tm__toggle{margin-top:30px;width:42px;height:42px;font-size:22px}
  .tm__name{height:44px;font-size:18px}

  /* Instagram y footer, más compactos. */
  .insta__grid{gap:8px}
  .footer .shell{gap:26px}
}

/* ============================================================
   MÓVIL (≤640): flechas de carrusel legibles sobre la imagen
   ============================================================ */
@media(max-width:640px){
  .gal .chev-nav,.vids .chev-nav{width:40px;height:40px;border-radius:50%;
    background:rgba(0,0,0,.4);color:#fff;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
  .gal .chev-nav svg,.vids .chev-nav svg{width:16px;height:26px}
}

/* Página Opiniones — responsive */
@media(max-width:992px){
  .op-hero{padding-top:120px}
  .op-hero__title{font-size:40px}
  .op-grid{grid-template-columns:repeat(2,1fr);gap:22px}
  .op-list{padding-block:36px 60px}
}
@media(max-width:640px){
  .op-hero{padding-top:104px}
  .op-hero__title{font-size:30px}
  .op-hero__sub{font-size:16px}
  .op-grid{grid-template-columns:1fr;gap:16px}
  .op-list{padding-block:26px 46px}
}

/* Carrusel de vídeos: swipe/arrastre horizontal (JS), scroll vertical intacto */
#vidViewport{touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
#vidViewport:active{cursor:grabbing}
#vidViewport img,#vidViewport video{-webkit-user-drag:none;user-drag:none}