/* ==========================================================
   RestGreen - Fixes de hero responsive (overlay siempre sobre foto)
   Objetivo: que el titular y texto del bloque superior (hero-static)
   no se corten y se mantengan superpuestos a la imagen en
   cualquier dispositivo/orientación (incl. móviles "pequeños" en landscape).
   ========================================================== */

/* 1) Solución estructural: superposición por CSS Grid (no por absolute)
      - La capa de texto participa en el cálculo de altura
      - La imagen se adapta con object-fit: cover
      - Evita recortes por overflow:hidden cuando el texto crece
*/
.hero-static{
  display: grid !important;
  grid-template-columns: 1fr !important;
  /* Mantener estilos existentes (bordes/radius) definidos en cada página */
}

.hero-static > img,
.hero-static .hero-static__overlay{
  grid-area: 1 / 1 !important;
}



/* Evitar separación silábica (guiones) en el texto del hero. */
.hero-static .hero-static__overlay,
.hero-static .hero-static__overlay *{
  -webkit-hyphens: none !important;
  -ms-hyphens: none !important;
  hyphens: none !important;
}
.hero-static > img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  /* Para navegadores antiguos */
  display: block !important;
}

.hero-static .hero-static__overlay{
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 2 !important;
  /* Respetamos el max-width existente; si la pantalla es menor, ocupa todo */
  max-width: min(560px, 100%) !important;
  /* Mantener la legibilidad: por defecto, conservar el degradado */
  background: linear-gradient(to right,
    rgba(255,255,255,0.97),
    rgba(255,255,255,0.75),
    rgba(255,255,255,0.10)) !important;
}

/* 2) Ajustes tipográficos y de espaciado para pantallas pequeñas
      (especialmente landscape con poca altura) */
.hero-static .hero-static__overlay{
  padding: clamp(14px, 3vw, 28px) !important;
}

.hero-static .hero-static__overlay h1{
  font-size: clamp(22px, 3.2vw, 34px) !important;
  line-height: 1.08 !important;
  margin-bottom: 10px !important;
  /* No partir palabras ni añadir guiones (móvil/desktop). */
  overflow-wrap: normal !important;
  word-break: normal !important;
  -webkit-hyphens: none !important;
  -ms-hyphens: none !important;
  hyphens: none !important;
}

.hero-static .hero-static__overlay p,
.hero-static .hero-static__overlay li{
  overflow-wrap: normal !important;
  word-break: normal !important;
  font-size: clamp(14px, 1.9vw, 16px) !important;
  line-height: 1.45 !important;
}

/* 3) Landscape “bajo” (móviles pequeños en horizontal):
      reducimos aún más márgenes para evitar que los CTAs queden fuera. */
@media (orientation: landscape) and (max-height: 520px){
  .hero-static .hero-static__overlay{
    padding: 12px !important;
  }
  .hero-static .hero-static__overlay h1{
    font-size: 20px !important;
    margin-bottom: 8px !important;
  }
  .hero-static .hero-static__cta{
    margin-top: 10px !important;
  }
  .hero-static .hero-static__cta .rg-btn{
    padding: 10px 12px !important;
  }
}

/* 4) Neutralización explícita de reglas antiguas de "móvil: overlay en bloque"
      (algunos HTML incluyen @media (max-width:767px){ position:static; background:#fff; }).
      Este archivo se carga al final y lo corrige para que el texto siga superpuesto. */
@media (max-width: 767px){
  .hero-static .hero-static__overlay{
    position: relative !important;
    background: linear-gradient(to right,
      rgba(255,255,255,0.97),
      rgba(255,255,255,0.75),
      rgba(255,255,255,0.10)) !important;
  }
}

/* 5) CTAs del primer recuadro (móvil vertical): apilar y evitar que sobrepasen el recuadro */
@media (max-width: 767px){
  .hero-static .hero-static__overlay .hero-static__cta{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .hero-static .hero-static__overlay .hero-static__cta .rg-btn{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    white-space: normal !important;
    text-align: center !important;
  }
}