/* ===== AMENIDADES: imágenes que llenan + texto blanco legible =====
   Especificidad ELEVADA para ganar al white-theme-override (1,1,3+)
   Usamos main + section#amenidades + :not() para sumar especificidad. */

/* Imagen inyectada por Airtable llena toda la tarjeta */
main section#amenidades article { position: relative; overflow: hidden; }
main section#amenidades article .img-slot {
  position: absolute !important;
  inset: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  display: block !important;
}
main section#amenidades article .ovt-img-wrap {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
}
main section#amenidades article .ovt-img-wrap img,
main section#amenidades article .ovt-img-wrap video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  min-height: 100% !important;
}

/* Gradient overlay encima de la imagen */
main section#amenidades article > div.absolute.inset-0:not(.img-slot) {
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Bloque de texto arriba del todo */
main section#amenidades article > div.absolute.bottom-0 {
  z-index: 2 !important;
}

/* ---- TEXTO BLANCO FORZADO (especificidad alta con :not) ---- */
main section#amenidades:not(#x):not(#y) article h3,
main section#amenidades:not(#x):not(#y) article p,
main section#amenidades:not(#x):not(#y) article span,
main section#amenidades:not(#x):not(#y) article div {
  color: #fff !important;
}
main section#amenidades:not(#x):not(#y) article .pill,
main section#amenidades:not(#x):not(#y) article .pill-preventa {
  color: #fff !important;
  background: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.35) !important;
}

/* Placeholder visible mientras no carga imagen → fondo oscuro */
main section#amenidades article .img-slot:not(.ovt-filled) {
  background: linear-gradient(135deg, #0B2B4B 0%, #15375e 100%) !important;
}
main section#amenidades article .img-slot:not(.ovt-filled) .tag,
main section#amenidades article .img-slot:not(.ovt-filled) .dim {
  color: rgba(255,255,255,0.7) !important;
}

/* ===== FALLBACK: si el gradient via-45% no renderiza en Tailwind v4 CDN,
   usar un gradient CSS directo controlable ===== */
main section#amenidades article > div.absolute.inset-0:not(.img-slot) {
  background: linear-gradient(to top,
    rgba(11,43,75,0.95) 0%,
    rgba(11,43,75,0.75) 30%,
    rgba(11,43,75,0.25) 50%,
    rgba(11,43,75,0) 70%) !important;
}