/*
 * ============================================================
 *  ELSUS — SLIDER DE PORTADA
 *  Capa sobre YerbaCSS v1 · se carga DESPUÉS de elsus-home.css
 *  Prefijo propio: .el-slider   (no toca nada del framework)
 * ============================================================
 *
 *  Portado del ejemplo "WebGL Distortion Slider" (dist/):
 *  la transición entre fotos la resuelve un shader de
 *  displacement sobre un canvas de three.js. El canvas se apoya
 *  en las mismas fotos que ya están en el DOM, así que si no hay
 *  WebGL o falla el script, el bloque sigue funcionando como un
 *  crossfade CSS. Nunca queda en blanco.
 *
 *  Del brochure se conservan tres cosas:
 *    · .el-barra a la izquierda, igual que en el hero
 *    · velo petróleo→verde para que el titular siempre se lea
 *    · Archivo 800 con tracking negativo, radio 2px
 *
 *  Los tokens (--el-verde, --el-lima, --el-display…) vienen de
 *  elsus-home.css. Este archivo no los redefine.
 * ============================================================ */


/* ============================================================
   1. CONTENEDOR
   ============================================================ */

.el-slider {
    position: relative;
    width: 100%;
    min-height: 420px;
    height: min(82vh, 700px);
    background: var(--el-verde, #004833);
    overflow: hidden;
    isolation: isolate;      /* el canvas no se escapa del stacking local */
    display: flex;
    align-items: center;
}


/* ============================================================
   2. CAPA DE IMAGEN
   Las <img> son la fuente real: las precarga el navegador,
   cuentan para el LCP y quedan como fallback sin WebGL.
   Cuando el canvas arranca, se apagan.
   ============================================================ */

.el-slider__lienzo {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--el-verde, #004833);
}

.el-slider__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity .9s ease;
}

/* Antes de que corra el JS (o si el JS no carga) se ve la primera foto.
   :where() deja la especificidad en (0,1,0) para que no le gane después
   a .is-activa — si acá va un :first-of-type normal, la foto 1 queda
   encendida para siempre y el crossfade se rompe al volver hacia atrás. */
.el-slider__img:where(:first-of-type) { opacity: 1; }

/* Con el JS ya inicializado manda el estado, no el orden del DOM */
.el-slider--listo .el-slider__img            { opacity: 0; }
.el-slider--listo .el-slider__img.is-activa  { opacity: 1; }

/* Con WebGL activo el canvas pinta todo; las <img> se retiran */
.el-slider--gl .el-slider__img { opacity: 0 !important; }

.el-slider__lienzo canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}


/* ============================================================
   3. VELO
   Direccional, no uniforme: densidad máxima sobre la columna de
   texto y prácticamente nada sobre el borde derecho, donde la
   foto tiene que respirar. Mismo criterio que la sección de
   impacto en la comunidad.
   ============================================================ */

   .el-slider__velo {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(96deg, rgb(43 54 51 / 92%) 0%, rgba(0, 72, 51, .74) 34%, rgb(3 36 21 / 64%) 62%, rgb(28 72 53 / 0%) 100%);
}
/* Sombra inferior corta: despega el slider de la sección siguiente */
.el-slider__velo::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 120px;
    background: linear-gradient(to top, rgba(0, 72, 51, .55), transparent);
}


/* ============================================================
   4. BARRA DE COLOR
   Misma pieza del hero. .el-barra ya está definida en
   elsus-home.css (posición, ancho, flex, colores); acá sólo se
   sube de capa para que no la tape el canvas.
   ============================================================ */

.el-slider .el-barra {
    z-index: 5;
    width: 58px;
}

@media (max-width: 767.98px) {
    .el-slider .el-barra { width: 34px; }
}


/* ============================================================
   4bis. ARCO
   Mismo recurso del brochure, pero acá vive sobre una foto, no
   sobre blanco: hay que subirlo de capa (el velo lo tapaba) y
   darle un poco más de cuerpo al trazo, porque el --sutil está
   calibrado para fondo claro y sobre la foto desaparece.
   ============================================================ */

.el-slider .el-arco {
    z-index: 3;              /* arriba del velo (2), debajo del texto (4) */
}

.el-slider .el-arco--sutil {
    border-color: rgba(179, 215, 133, .55);
}

/* El velo es más denso a la izquierda: ahí el trazo necesita
   menos ayuda, así que el arco se queda en el cuadrante derecho,
   que es donde la foto respira. */
@media (max-width: 991.98px) {
    .el-slider .el-arco--der {
        width: 420px; height: 420px;
        right: -210px; top: -110px;
    }
}

/* En móvil el velo pasa a vertical y el arco quedaría cruzando el
   titular. Se achica y se sube al ángulo. */
@media (max-width: 767.98px) {
    .el-slider .el-arco--der {
        width: 300px; height: 300px;
        right: -150px; top: -90px;
        border-color: rgba(179, 215, 133, .42);
    }
}


/* ============================================================
   5. CONTENIDO
   Todas las copias comparten la misma celda de grid: la altura
   la fija la más larga y no hay salto al cambiar de slide.
   ============================================================ */

.el-slider__contenido {
    position: relative;
    z-index: 4;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding-left: 58px;      /* despeja la barra */
}

@media (max-width: 767.98px) {
    .el-slider__contenido { padding-left: 34px; }
}

/* Desde 1400px el margen natural del .container ya deja la barra
   holgada, así que se saca el desplazamiento: la copia del slider
   queda alineada al mismo eje que el resto de las secciones. */
@media (min-width: 1400px) {
    .el-slider__contenido { padding-left: 94px; }
}

/* El ancho lo manda el titular en Archivo 800, no el texto corrido:
   62ch (≈480px) partía "Soluciones con" en dos renglones. La bajada
   sigue limitada aparte, a 46ch. */
.el-slider__copias {
    display: grid;
    max-width: min(760px, 100%);
    padding: clamp(28px, 4vw, 56px) 0;
}

.el-slider__copia {
    grid-area: 1 / 1;        /* apiladas, sin position:absolute */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.el-slider__copia.is-activa {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.el-slider__volanta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--el-menta, #B3D785);
    margin-bottom: 1rem;
}
.el-slider__volanta::before {
    content: "";
    width: 34px;
    height: 3px;
    background: var(--el-lima, #7ABA29);
    flex: 0 0 auto;
}

.el-slider__titulo {
    font-family: var(--el-display, 'Archivo', sans-serif);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    line-height: .97;
    font-size: clamp(2.1rem, 4.6vw, 4rem);
    color: #fff;
    margin: 0 0 1.1rem;
    text-wrap: balance;
}
.el-slider__titulo .lima { color: var(--el-lima, #7ABA29); }

.el-slider__bajada {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    font-weight: 500;
    line-height: 1.55;
    color: rgba(255, 255, 255, .88);
    max-width: 46ch;
    margin: 0 0 1.9rem;
}

.el-slider__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}


/* ============================================================
   6. PAGINACIÓN
   Los puntos y el anillo que se expande vienen del ejemplo dist;
   el color pasa a la paleta ELSUS (lima activo, menta el anillo).
   ============================================================ */

.el-slider__paginacion {
    position: absolute;
    z-index: 6;
    top: 50%;
    right: clamp(18px, 3vw, 42px);
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.el-slider__punto {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    padding: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #03ff6c;
    opacity: .3;
    cursor: pointer;
    position: relative;
    transition: opacity .25s ease;
}
.el-slider__punto:hover { opacity: .6; }

.el-slider__punto::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid rgba(179, 215, 133, .6);
    opacity: 0;
    transition: opacity .4s ease, width .4s ease, height .4s ease;
}

.el-slider__punto.is-activo {
    opacity: 1;
    background: var(--el-lima, #7ABA29);
}
.el-slider__punto.is-activo::before {
    width: 280%;
    height: 280%;
    opacity: 1;
}

/* Foco visible: obligatorio, son los únicos controles del bloque */
.el-slider__punto:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 6px;
    opacity: 1;
}

@media (max-width: 767.98px) {
    .el-slider__paginacion {
        top: auto;
        bottom: 20px;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        flex-direction: row;
        gap: 20px;
    }
}


/* ============================================================
   7. PROGRESO DEL AUTOPLAY
   Hairline lima al pie. Es el único indicador de que el bloque
   avanza solo; se detiene al pasar el mouse o al enfocar.
   ============================================================ */

.el-slider__progreso {
    position: absolute;
    z-index: 6;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, .14);
}
.el-slider__progreso span {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--el-lima, #7ABA29);
    transform: scaleX(0);
    transform-origin: left center;
}


/* ============================================================
   8. ESTADO DE CARGA
   Sin spinner: la sección ya es verde ELSUS, así que la espera
   se ve como un bloque de marca y no como un hueco.
   ============================================================ */

.el-slider--cargando .el-slider__contenido,
.el-slider--cargando .el-slider__paginacion { opacity: 0; }

.el-slider__contenido,
.el-slider__paginacion { transition: opacity .5s ease .1s; }


/* ============================================================
   9. MOVIMIENTO REDUCIDO
   Sin autoplay ni animación de entrada: el usuario cambia de
   slide cuando quiere y el cambio es instantáneo.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .el-slider__img { transition: none; }
    .el-slider__progreso { display: none; }
}


/* ============================================================
   10. AJUSTES DE ALTURA
   ============================================================ */

@media (max-width: 991.98px) {
    .el-slider { height: min(76vh, 620px); }
}

@media (max-width: 767.98px) {
    .el-slider {
        height: auto;
        min-height: 78vh;
    }
    .el-slider__copias { padding: 64px 0 88px; }
    .el-slider__velo {
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        background: linear-gradient(96deg, rgb(43 54 51 / 92%) 0%, rgba(0, 72, 51, .74) 34%, rgb(95 99 100 / 55%) 62%, rgb(113 116 115 / 68%) 100%);
    }
}