/* ============================================================
   RESPONSIVE / MÓVIL — Green Land
   Compartido por todas las páginas. Móvil = ≤ 860px.
   ============================================================ */

/* Hamburguesa y menú móvil: ocultos por defecto (desktop) */
.gl-burger{display:none}
.gl-mobile-menu{display:none}

@media (max-width: 860px){

  body{overflow-x:hidden}

  /* ---------- HEADER: siempre sólido + texto oscuro en móvil ---------- */
  header{background:rgba(255,255,255,.97)!important;backdrop-filter:blur(14px)!important;box-shadow:0 4px 20px rgba(6,47,28,.08)!important;padding:10px 0!important}
  header [data-navword],header .display{color:#0d2418!important}
  header [data-navsub]{color:#5a8a6e!important}

  /* Ocultar nav y botones originales; mostrar hamburguesa */
  .gl-desk-only{display:none!important}
  .gl-burger{display:flex;flex-direction:column;gap:5px;width:44px;height:40px;border:none;background:transparent;cursor:pointer;align-items:center;justify-content:center;color:#0d2418;z-index:5}
  .gl-burger span{width:25px;height:2.5px;background:#0d2418;border-radius:2px;transition:.3s}
  .gl-burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .gl-burger.open span:nth-child(2){opacity:0}
  .gl-burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

  /* Panel desplegable */
  .gl-mobile-menu{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;box-shadow:0 14px 30px rgba(6,47,28,.16);padding:14px 22px 20px;flex-direction:column}
  .gl-mobile-menu.open{display:flex}
  .gl-mobile-menu nav{display:flex!important;flex-direction:column;gap:2px;width:100%}
  .gl-mobile-menu nav a{color:#0d2418!important;padding:13px 14px!important;font-size:16px!important;border-radius:10px;text-align:left}
  .gl-mobile-menu nav a:active{background:rgba(47,191,153,.14)}
  .gl-mobile-menu > div{display:flex!important;flex-direction:column;gap:10px;margin-top:12px;padding-top:14px;border-top:1px solid #eef3ef}
  .gl-mobile-menu > div a{justify-content:center!important;width:100%}

  /* ---------- GRIDS inline → 1 columna ---------- */
  [style*="grid-template-columns"]{grid-template-columns:1fr!important;gap:20px!important}

  /* ---------- HERO: centrado ---------- */
  [data-herocontent]{text-align:center!important;align-items:center!important;padding-top:118px!important;padding-bottom:60px!important}
  [data-herocontent] h1,[data-herocontent] p{margin-left:auto!important;margin-right:auto!important}
  [data-herocontent] [style*="flex-wrap:wrap"]{justify-content:center!important}
  [data-hero-house]{display:none!important}

  /* ---------- Alturas de imágenes grandes ---------- */
  [style*="height:480px"]{height:300px!important}
  [style*="height:440px"]{height:280px!important}
  [style*="height:470px"]{height:330px!important}
  [style*="height:460px"]{height:300px!important}
  .scard{height:280px!important}

  /* ---------- Tarjetas flotantes que se salen del margen ---------- */
  [style*="right:-22px"],[style*="right:-18px"],[style*="left:-26px"]{position:static!important;margin:14px auto 0!important;display:inline-block}

  /* ---------- Banners / secciones: padding más compacto ---------- */
  section[style*="padding:130px"]{padding-top:110px!important}
  main{padding-left:18px!important;padding-right:18px!important}

  /* ---------- Centrar bloques de texto de 2 columnas ---------- */
  .cols2{text-align:center}
  .cols2 p{margin-left:auto;margin-right:auto}

  /* ---------- Tipografías un poco más chicas ---------- */
  h1{font-size:clamp(34px,11vw,52px)!important}

  /* ---------- Modales: ocupar bien el ancho ---------- */
  #promoModal,#loginOverlay > div,.modal{max-width:100%!important}

  /* ---------- Footer centrado ---------- */
  footer [style*="grid-template-columns"]{justify-items:center;text-align:center}
}

/* Teléfonos chicos */
@media (max-width: 480px){
  .wrap, main{padding-left:16px!important;padding-right:16px!important}
  [data-herocontent]{padding-left:20px!important;padding-right:20px!important}
}