/* ==================================================
   HERO BANNER — Responsive 16:9, anti-CLS
   ================================================== */

/* Ajusta la proporción acá si quieres 21:9 o 4:3 */
:root{
  --hero-ratio: 16/9; /* opciones: 21/9, 4/3 */
}

/* === Contenedor === */
.hero-banner .hero-slider{
  width:100%;
  aspect-ratio: var(--hero-ratio);        /* fija la proporción (anti-CLS) */
  position:relative;
  overflow:hidden;
  /* límite suave de altura en pantallas muy altas */
  max-height: clamp(220px, 45vw, 560px);
}
/* Fallback si algún navegador no soporta aspect-ratio */
@supports not (aspect-ratio: 1 / 1){
  .hero-banner .hero-slider{
    height: clamp(220px, 45vw, 560px);
  }
}

/* === Slide individual === */
.hero-banner .swiper-slide{
  position:relative;
}
/* Usamos <img> visible (no background-image) para que el navegador gestione srcset */
.hero-banner .swiper-slide > img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;       /* llena sin deformar */
  object-position:center;
}

/* Overlay suave opcional para legibilidad */
.hero-banner.has-overlay .swiper-slide::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.35) 100%);
  pointer-events:none;
}

/* ==================================================
   CONTENIDO (anclado abajo por defecto)
   ================================================== */
.hero-banner .hero-content{
  position:absolute; inset:auto 0 0 0; /* bottom fijo */
  display:flex; flex-direction:column; gap:.45rem;
  padding: clamp(12px, 4vw, 40px);
  color:#fff; text-align:left; align-items:flex-start;
  text-shadow:0 1px 6px rgba(0,0,0,.28);
}
/* Alineaciones utilitarias */
.hero-banner .align-center{ text-align:center; align-items:center; }
.hero-banner .align-right{  text-align:right;  align-items:flex-end; }

/* Contraste (por si usas tono dark/light en el slide) */
.hero-banner .text-dark{ color:#111; text-shadow:none; }
.hero-banner .text-dark .hero-btn{ background:#111; color:#fff; }
.hero-banner .text-light{ color:#fff; }

/* Título / Subtítulo */
.hero-banner .hero-title{
  font-size: clamp(22px, 4vw, 44px);
  line-height:1.1; margin:0; font-weight:800;
}
.hero-banner .hero-subtitle{
  font-size: clamp(14px, 2.2vw, 18px);
  line-height:1.3; margin:.15em 0 .6em; opacity:.98;
}

/* Botón */
.hero-banner .hero-btn{
  display:inline-block; padding:.7em 1.1em; border-radius:999px;
  font-weight:700; color:#fff; background:#0AC5CA;
  text-decoration:none; transition:background .25s ease, transform .2s ease;
}
.hero-banner .hero-btn:hover,
.hero-banner .hero-btn:focus{ background:#099da1; transform:translateY(-2px); }
.hero-banner .hero-btn:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* ==================================================
   CONTROLES Swiper
   ================================================== */
.hero-banner .swiper-button-prev,
.hero-banner .swiper-button-next{
  color:#fff; transition:opacity .3s, transform .2s;
}
.hero-banner .swiper-button-prev:hover,
.hero-banner .swiper-button-next:hover{
  opacity:.8; transform:scale(1.05);
}
.hero-banner .swiper-pagination-bullet{
  background:#fff; opacity:.6; transition:opacity .25s, transform .2s;
}
.hero-banner .swiper-pagination-bullet:hover{ opacity:.9; transform:scale(1.2); }
.hero-banner .swiper-pagination-bullet-active{ opacity:1; }

/* ==================================================
   RESPONSIVE FINO
   ================================================== */
@media (max-width: 640px){
  .hero-banner .hero-content{ padding:clamp(12px, 6vw, 24px); gap:.35rem; }
  .hero-banner .hero-title{   font-size:clamp(20px, 6vw, 30px); }
  .hero-banner .hero-subtitle{font-size:clamp(13px, 3.5vw, 16px); }
  .hero-banner .hero-btn{     padding:.55em 1em; font-size:.9rem; }
}