/* ECOS Responsive Align v1.2.0 - Frontend CSS */

/* Contenedor (modo contained) */
.ecos-container{
  max-width: var(--ecos-container-max, 1100px);
  margin: 0 auto;
  padding-left: var(--ecos-gutter, 16px);
  padding-right: var(--ecos-gutter, 16px);
  box-sizing: border-box;
}

/* CONTAINED MODE */
.ecos-mode-contained .ecos-container--slider{
  padding-left: 0;
  padding-right: 0;
}
.ecos-mode-contained .ecos-container--slider > .slider{
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

/* FULL-BLEED CENTRADO con calibración */
.ecos-mode-fullbleed .ecos-fullbleed{
  width: 100dvw;
  max-width: 100dvw;
  margin-left: calc(50% - 50dvw - var(--ecos-bleed-corr, 0px) - env(safe-area-inset-left, 0px));
  margin-right: calc(50% - 50dvw - var(--ecos-bleed-corr, 0px) - env(safe-area-inset-right, 0px));
  padding: 0 !important;
  border: 0;
  box-sizing: border-box;
}
@supports not (width: 100dvw){
  .ecos-mode-fullbleed .ecos-fullbleed{
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw - var(--ecos-bleed-corr, 0px));
    margin-right: calc(50% - 50vw - var(--ecos-bleed-corr, 0px));
  }
}

/* Evitar scrollbar horizontal por subpíxeles */
html, body{
  overflow-x: clip;
}

/* Altura responsiva para el slider */
.slider{
  aspect-ratio: 16 / 6;
  min-height: 320px;
  overflow: hidden;
}

/* Tablet */
@media (max-width: 900px){
  .slider{ aspect-ratio: 16 / 8; }
}

/* Móvil */
@media (max-width: 640px){
  .slider{ aspect-ratio: 16 / 9; }
}

/* Slides con imagen de fondo: cubrir sin bandas */
.slider .slide{
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Reset global no invasivo para imágenes */
img{
  max-width: 100%;
  height: auto;
  display: block;
}