/* =====================================================================
   HERO (section#top) — fix nuclear estilo amenidades/avance:
   la imagen de drone mar llena el hero completo, sin recortes raros.
   ===================================================================== */

/* Section hero: garantizar que la imagen de fondo llene todo */
html body section#top {
  position: relative !important;
  overflow: hidden !important;
  background: #0B2B4B !important;
}

/* El img-slot que contiene la imagen del drone */
html body section#top > .img-slot {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: #0B2B4B !important;
  z-index: 0 !important;
}

/* Imagen inyectada por Airtable llena el hero completamente */
html body section#top .ovt-img-wrap {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  overflow: hidden !important;
}
html body section#top .ovt-img-wrap img,
html body section#top .ovt-img-wrap video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  min-width: 100% !important;
  min-height: 100% !important;
}

/* Overlay encima de la imagen para legibilidad del texto */
html body section#top .hero-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  /* Gradient más suave: top casi transparente, bottom navy con buen contraste */
  background: linear-gradient(to bottom,
    rgba(11,43,75,0.15) 0%,
    rgba(11,43,75,0.35) 40%,
    rgba(11,43,75,0.75) 80%,
    rgba(11,43,75,0.9) 100%) !important;
}

/* Contenido textual encima de todo */
html body section#top > div.relative.z-10 {
  z-index: 2 !important;
}
html body section#top > div.absolute.top-5,
html body section#top > div.absolute.top-8,
html body section#top > div[class*="top-5"],
html body section#top > div[class*="top-8"] {
  z-index: 2 !important;
}

/* Ocultar etiquetas placeholder [[ IMG_HERO_... ]] */
html body section#top .img-slot .tag,
html body section#top .img-slot .dim {
  display: none !important;
}