/**
 * Ecosol — Hero slider.
 * Todo namespaceado bajo .ecosol-hero: en producción conviven Elementor,
 * Essential Addons, ElementsKit y HappyAddons, así que nada de clases genéricas.
 */

.ecosol-hero {
  --eh-lime: #a9cf3f;
  --eh-teal-dark: #15806d;
  --eh-bg: #0f5a49;

  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--eh-bg);
  aspect-ratio: var(--eh-ratio, 1425/625);
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---- Slides ---- */
.ecosol-hero__slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transition: opacity .7s ease;
  pointer-events: none;
  text-decoration: none;
}

.ecosol-hero__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.ecosol-hero__slide picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* Doble clase: empata en especificidad con `.elementor img{height:auto}` y no quiero
   depender del orden de carga de las hojas. */
.ecosol-hero .ecosol-hero__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Degradado opcional: solo para fotos de ambiente, donde el texto blanco
   quedaría ilegible sobre la imagen. Se activa por banner desde el panel. */
.ecosol-hero .ecosol-hero__slide--overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Radial y no lineal: si oscurece toda la columna izquierda también apaga el badge
     que está abajo. Así la sombra se concentra donde va el texto y suelta antes de llegar. */
  background: radial-gradient(115% 82% at 2% 18%,
    rgba(15, 45, 38, .70) 0%,
    rgba(15, 45, 38, .34) 40%,
    rgba(15, 45, 38, 0) 68%);
}

/* ---- Texto sobre el banner ---- */
/* El alto del hero sale de una proporción fija, así que escala con el ancho de la ventana.
   Si el texto fuera en px fijos, en pantallas angostas se desbordaría sobre el badge que
   viene dibujado en la imagen. Por eso todo el bloque se mide en vw: escala junto con la foto.
   Los valores de referencia son los del diseño a 1920px (título 50px = 2.6vw). */
.ecosol-hero__copy {
  position: absolute;
  top: 12%;
  left: 8%;
  width: 46%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #fff;
  z-index: 2;
}

.ecosol-hero__title {
  font-size: clamp(22px, 2.6vw, 54px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .22);
  margin-bottom: .3em;
}

.ecosol-hero__title em {
  font-style: normal;
  color: var(--eh-lime);
}

.ecosol-hero__text {
  color: rgba(255, 255, 255, .95);
  font-size: clamp(13px, .95vw, 19px);
  line-height: 1.5;
  max-width: 36ch;
  margin-bottom: 1.4em;
}

.ecosol-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-weight: 600;
  font-size: clamp(13px, .8vw, 16px);
  padding: .9em 1.75em;
  border-radius: 999px;
  background: #fff;
  color: var(--eh-teal-dark);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .18);
  transition: background .22s cubic-bezier(.2, .7, .3, 1), transform .22s cubic-bezier(.2, .7, .3, 1);
}

.ecosol-hero__cta svg {
  width: 1.15em;
  height: 1.15em;
}

.ecosol-hero__slide:hover .ecosol-hero__cta {
  background: #eafaf5;
  transform: translateY(-2px);
}

/* ---- Flechas ---- */
.ecosol-hero .ecosol-hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  backdrop-filter: blur(6px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: .9;
  transition: background .2s, transform .2s;
}

.ecosol-hero .ecosol-hero__arrow:hover {
  background: rgba(255, 255, 255, .42);
  opacity: 1;
}

.ecosol-hero .ecosol-hero__arrow:active {
  transform: translateY(-50%) scale(.94);
}

.ecosol-hero .ecosol-hero__arrow--prev { left: 18px; }
.ecosol-hero .ecosol-hero__arrow--next { right: 18px; }

/* ---- Puntos ---- */
.ecosol-hero__dots {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 6;
}

.ecosol-hero .ecosol-hero__dot {
  min-width: 0;
  min-height: 0;
  box-shadow: none;
  width: 11px;
  height: 11px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  cursor: pointer;
  transition: .25s;
}

.ecosol-hero .ecosol-hero__dot.is-active {
  background: #fff;
  width: 30px;
  border-radius: 6px;
}

/* ---- Tablet ---- */
/* El tamaño de letra ya lo resuelve el clamp en vw: acá solo se ensancha la columna. */
@media (max-width: 820px) {
  .ecosol-hero__copy { width: 72%; }
  .ecosol-hero .ecosol-hero__arrow { width: 38px; height: 38px; }
}

/* ---- Celular: imagen completa, texto arriba y botón abajo ---- */
@media (max-width: 600px) {
  /* Se mantiene una proporción también acá: si el alto lo definiera la imagen al cargar,
     la página daría un salto cada vez que aparece o cambia de banner. */
  .ecosol-hero {
    aspect-ratio: var(--eh-ratio-mob, 500/884);
  }

  .ecosol-hero__slide {
    position: relative;
    display: none;
    opacity: 1;
    pointer-events: auto;
  }

  .ecosol-hero__slide.is-active {
    display: block;
  }

  .ecosol-hero .ecosol-hero__slide img {
    height: 100%;
    object-fit: cover;
  }

  .ecosol-hero__slide picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* Acá el degradado va siempre: el texto se superpone a la foto en las dos puntas,
     independientemente de lo que esté configurado por banner. */
  .ecosol-hero .ecosol-hero__slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg,
      rgba(15, 45, 38, .58) 0%,
      rgba(15, 45, 38, .02) 28%,
      rgba(15, 45, 38, .02) 58%,
      rgba(15, 45, 38, .70) 100%);
  }

  .ecosol-hero__copy {
    display: flex;
    position: absolute;
    inset: 0;
    width: 100%;
    transform: none;
    /* Más aire arriba: pegado al borde el título competía con el header. */
    padding: 46px 20px 48px;
  }

  .ecosol-hero__title {
    font-size: 26px;
    margin-bottom: 10px;
  }

  .ecosol-hero__text {
    font-size: 14.5px;
    max-width: none;
    margin-bottom: 0;
  }

  /* Empuja el botón al pie de la imagen, arriba de los puntos. En celular ocupa
     todo el ancho: es el objetivo principal del banner y conviene que sea fácil de tocar. */
  .ecosol-hero__cta {
    margin-top: auto;
    width: 100%;
    justify-content: center;
    font-size: 15px;
    padding: 14px 22px;
  }

  .ecosol-hero .ecosol-hero__arrow { display: none; }
  .ecosol-hero__dots { bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .ecosol-hero__slide { transition: none; }
}