/*
 * ------------------------------------------------------------
 * CUERVO ANIMATIONS
 * GSAP + ScrollTrigger
 * ------------------------------------------------------------
 */


/*
 * Evita desbordamiento horizontal durante
 * la expansión a pantalla completa.
 */
html,
body {
    overflow-x: clip;
}


/*
 * ------------------------------------------------------------
 * 1. EXPAND TO FULLSCREEN
 *
 * Estructura:
 *
 * .cuervo-expand-scene
 *     .cuervo-expand-box
 * ------------------------------------------------------------
 */

.cuervo-expand-scene {
    position: relative;
    width: 100%;
    height: 400vh;
    overflow: visible !important;
}

.cuervo-expand-box {
    position: sticky;
    top: 50vh;

    margin-left: auto;
    margin-right: auto;

    transform: translateY(-50%);

    overflow: hidden;
    box-sizing: border-box;

    will-change: width, height, min-height, border-radius;
    backface-visibility: hidden;
}


/*
 * ------------------------------------------------------------
 * 2. ROTACIÓN SEGÚN SCROLL
 *
 * Clase:
 * .cuervo-scroll-rotate
 * ------------------------------------------------------------
 */

.cuervo-scroll-rotate {
    will-change: transform;
    backface-visibility: hidden;
}






/*
 * ------------------------------------------------------------
 * 3. ENTORNO BENTO → FULLSCREEN
 *
 * Estructura Elementor:
 *
 * .cuervo-entorno-bento
 *     .cuervo-bento-grid
 *         .cuervo-bento-item
 *         .cuervo-bento-item
 *         .cuervo-bento-item.cuervo-bento-focus
 *         ...
 *
 * Versión estable sin pin de ScrollTrigger:
 * - La escena genera el recorrido de scroll.
 * - El mosaico se mantiene con position: sticky.
 * - ScrollTrigger solamente controla el progreso del zoom.
 * - Al terminar, el sticky se libera de forma nativa y la
 *   fotografía protagonista sube hacia la siguiente sección.
 * ------------------------------------------------------------
 */

.cuervo-entorno-bento {
    position: relative;

    /* Full bleed aunque Elementor esté dentro de un contenedor boxed */
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    /*
     * 100svh visibles + 185svh de recorrido.
     * Sustituye al espacio que antes generaba el pin de GSAP.
     */
    height: 285svh;

    box-sizing: border-box;

    /* El Bento empieza 150 px por debajo del borde superior */
    padding: 150px 0 24px !important;

    /*
     * overflow: clip recorta el grid ampliado al abandonar la escena,
     * pero NO crea un contenedor de scroll como overflow:hidden.
     * De este modo position:sticky sigue funcionando y la imagen
     * protagonista no invade la sección siguiente.
     */
    overflow: clip !important;

    isolation: isolate;
    z-index: 1;
}


/*
 * MOSAICO METRO
 *
 * El propio grid es el elemento sticky. De este modo evitamos
 * completamente el pin/unpin de ScrollTrigger.
 */

.cuervo-bento-grid {
    position: sticky !important;
    top: 150px;

    width: 100vw !important;
    max-width: none !important;

    /* 150 px superiores + 24 px inferiores */
    height: calc(100svh - 174px) !important;

    display: grid !important;

    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(6, minmax(0, 1fr));

    gap: 12px;

    padding: 0 !important;
    margin: 0 !important;

    min-width: 0;
    min-height: 0;

    transform-origin: 0 0;
    will-change: transform;
    backface-visibility: hidden;

    /* Mejora la composición de capas en Safari */
    transform: translateZ(0);
}


/*
 * PIEZAS
 */

.cuervo-bento-item {
    position: relative;

    width: 100% !important;
    height: 100% !important;
    min-width: 0;
    min-height: 0;

    padding: 0 !important;
    margin: 0 !important;

    overflow: hidden !important;

    border-radius: 18px;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    backface-visibility: hidden;
    transform: translateZ(0);
}


/*
 * ------------------------------------------------------------
 * DISTRIBUCIÓN METRO — 6 FOTOS
 * ------------------------------------------------------------
 *
 *  ┌──────────┬──────────┬──────────┐
 *  │    1     │    2     │          │
 *  │          │          │    3     │
 *  │          │          │  FOCUS   │
 *  ├────────┬─┴──────────┤          │
 *  │   4    │     5      ├──────────┤
 *  │        │            │    6     │
 *  │        │            │          │
 *  └────────┴────────────┴──────────┘
 * ------------------------------------------------------------
 */

.cuervo-bento-grid > .cuervo-bento-item:nth-child(1) {
    grid-column: 1 / 5;
    grid-row: 1 / 4;
}

.cuervo-bento-grid > .cuervo-bento-item:nth-child(2) {
    grid-column: 5 / 9;
    grid-row: 1 / 4;
}

.cuervo-bento-grid > .cuervo-bento-item:nth-child(3) {
    grid-column: 9 / 13;
    grid-row: 1 / 5;
}

.cuervo-bento-grid > .cuervo-bento-item:nth-child(4) {
    grid-column: 1 / 4;
    grid-row: 4 / 7;
}

.cuervo-bento-grid > .cuervo-bento-item:nth-child(5) {
    grid-column: 4 / 9;
    grid-row: 4 / 7;
}

.cuervo-bento-grid > .cuervo-bento-item:nth-child(6) {
    grid-column: 9 / 13;
    grid-row: 5 / 7;
}


/*
 * FOTO PROTAGONISTA
 */

.cuervo-bento-focus {
    z-index: 4;
    will-change: border-radius;
}


/*
 * IMÁGENES DE ELEMENTOR
 */

.cuervo-bento-item > .e-con-inner,
.cuervo-bento-item > .elementor-element,
.cuervo-bento-item .elementor-widget-image,
.cuervo-bento-item .elementor-widget-image .elementor-widget-container,
.cuervo-bento-item .elementor-widget-container,
.cuervo-bento-item .elementor-image,
.cuervo-bento-item picture {
    width: 100% !important;
    height: 100% !important;
    min-width: 0;
    min-height: 0;
}

.cuervo-bento-item .elementor-widget-image img,
.cuervo-bento-item picture img,
.cuervo-bento-item img {
    display: block;

    width: 100% !important;
    height: 100% !important;
    max-width: none !important;

    object-fit: cover;
    object-position: center;
}


/*
 * TABLET
 */

@media (max-width: 1024px) {

    .cuervo-entorno-bento {
        height: 270svh;
        padding: 110px 0 20px !important;
    }

    .cuervo-bento-grid {
        top: 110px;
        height: calc(100svh - 130px) !important;
        gap: 10px;
    }

    .cuervo-bento-item {
        border-radius: 16px;
    }

}


/*
 * MÓVIL
 *
 * En vertical reorganizamos las 6 fotos en una composición cerrada.
 */

@media (max-width: 767px) {

    .cuervo-entorno-bento {
        height: 255svh;
        padding: 80px 0 16px !important;
    }

    .cuervo-bento-grid {
        top: 80px;
        height: calc(100svh - 96px) !important;

        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: repeat(6, minmax(0, 1fr));

        gap: 7px;
    }

    .cuervo-bento-grid > .cuervo-bento-item:nth-child(1) {
        grid-column: 1 / 3;
        grid-row: 1 / 3;
    }

    .cuervo-bento-grid > .cuervo-bento-item:nth-child(2) {
        grid-column: 3 / 5;
        grid-row: 1 / 3;
    }

    .cuervo-bento-grid > .cuervo-bento-item:nth-child(3) {
        grid-column: 1 / 5;
        grid-row: 3 / 5;
    }

    .cuervo-bento-grid > .cuervo-bento-item:nth-child(4) {
        grid-column: 1 / 3;
        grid-row: 5 / 7;
    }

    .cuervo-bento-grid > .cuervo-bento-item:nth-child(5) {
        grid-column: 3 / 4;
        grid-row: 5 / 7;
    }

    .cuervo-bento-grid > .cuervo-bento-item:nth-child(6) {
        grid-column: 4 / 5;
        grid-row: 5 / 7;
    }

    .cuervo-bento-item {
        border-radius: 12px;
    }

}


/* ==========================================================
   CUERVO AURORA / AGUA DEL SELLA
   ==========================================================

   Fondo claro:
   cuervo-aurora cuervo-aurora-soft

   Fondo oscuro:
   cuervo-aurora cuervo-aurora-soft cuervo-aurora-light

   Variantes:
   cuervo-aurora-soft
   cuervo-aurora-medium
   cuervo-aurora-strong

   ========================================================== */


/* ----------------------------------------------------------
   CONTENEDOR PRINCIPAL
   ---------------------------------------------------------- */

.cuervo-aurora {

    /*
     * Colores base de las ondas
     */

    --aurora-color-1: 105, 207, 227;
    --aurora-color-2: 62, 185, 215;
    --aurora-color-3: 112, 215, 207;


    /*
     * Valores por defecto
     */

    --aurora-opacity-1: 0.11;
    --aurora-opacity-2: 0.065;
    --aurora-opacity-3: 0.04;

    --aurora-blur: 50px;


    /*
     * El fondo NO se define aquí.
     * Lo controla Elementor.
     */

    position: relative;

    isolation: isolate;

    overflow: hidden;
}


/* ----------------------------------------------------------
   CONTENIDO ELEMENTOR
   Siempre por encima de la Aurora
   ---------------------------------------------------------- */

.cuervo-aurora > *:not(.cuervo-aurora-bg) {

    position: relative;

    z-index: 2;
}


/* ==========================================================
   CAPA GENERAL DE LA AURORA
   ========================================================== */

.cuervo-aurora-bg {

    position: absolute;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    user-select: none;

    overflow: hidden;

    background: transparent;
}


/* ==========================================================
   SVG
   ========================================================== */

.cuervo-aurora-svg {

    position: absolute;

    /*
     * Lo hacemos más grande que el propio contenedor
     * para permitir movimiento lateral y vertical.
     */

    width: 125%;

    height: 125%;

    left: -12.5%;

    top: -12.5%;

    overflow: visible;

    pointer-events: none;
}


/* ==========================================================
   ONDAS
   ========================================================== */

.cuervo-aurora-wave {

    fill: none;

    stroke-linecap: round;

    stroke-linejoin: round;

    transform-box: fill-box;

    transform-origin: center center;

    will-change:
        transform,
        opacity;

    /*
     * Blur principal.
     *
     * Es intencionadamente elevado para que
     * las formas pierdan el aspecto de "línea SVG"
     * y parezcan masas de agua/luz.
     */

    filter:
        blur(var(--aurora-blur));
}


/* ----------------------------------------------------------
   ONDA 1
   La más presente
   ---------------------------------------------------------- */

.cuervo-aurora-wave-1 {

    opacity:
        var(--aurora-opacity-1);
}


/* ----------------------------------------------------------
   ONDA 2
   Más secundaria
   ---------------------------------------------------------- */

.cuervo-aurora-wave-2 {

    opacity:
        var(--aurora-opacity-2);

    filter:
        blur(
            calc(
                var(--aurora-blur) * 1.15
            )
        );
}


/* ----------------------------------------------------------
   ONDA 3
   La más tenue y difusa
   ---------------------------------------------------------- */

.cuervo-aurora-wave-3 {

    opacity:
        var(--aurora-opacity-3);

    filter:
        blur(
            calc(
                var(--aurora-blur) * 1.30
            )
        );
}


/* ==========================================================
   COLORES DEL GRADIENTE SVG
   ========================================================== */

.cuervo-aurora-stop-1 {

    stop-color:
        rgb(
            var(--aurora-color-1)
        );
}


.cuervo-aurora-stop-2 {

    stop-color:
        rgb(
            var(--aurora-color-2)
        );
}


.cuervo-aurora-stop-3 {

    stop-color:
        rgb(
            var(--aurora-color-3)
        );
}


/* ==========================================================
   INTENSIDADES
   ========================================================== */


/* ----------------------------------------------------------
   SOFT

   Recomendada para Los Cauces.

   Muy difusa, ligera y elegante.
   ---------------------------------------------------------- */

.cuervo-aurora.cuervo-aurora-soft {

    --aurora-opacity-1: 0.085;

    --aurora-opacity-2: 0.045;

    --aurora-opacity-3: 0.025;

    --aurora-blur: 65px;
}


/* ----------------------------------------------------------
   MEDIUM

   Algo más visible, pero todavía sutil.
   ---------------------------------------------------------- */

.cuervo-aurora.cuervo-aurora-medium {

    --aurora-opacity-1: 0.14;

    --aurora-opacity-2: 0.08;

    --aurora-opacity-3: 0.045;

    --aurora-blur: 52px;
}


/* ----------------------------------------------------------
   STRONG

   Más visible, pero sigue siendo una masa difusa.
   ---------------------------------------------------------- */

.cuervo-aurora.cuervo-aurora-strong {

    --aurora-opacity-1: 0.21;

    --aurora-opacity-2: 0.13;

    --aurora-opacity-3: 0.075;

    --aurora-blur: 40px;
}


/* ==========================================================
   VARIANTE PARA FONDOS OSCUROS
   ==========================================================

   Ejemplo:

   cuervo-aurora
   cuervo-aurora-soft
   cuervo-aurora-light

   Convierte las ondas en reflejos claros/cian.
   ========================================================== */

.cuervo-aurora.cuervo-aurora-light {

    --aurora-color-1: 220, 246, 248;

    --aurora-color-2: 153, 230, 238;

    --aurora-color-3: 190, 240, 230;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1024px) {

    .cuervo-aurora-svg {

        width: 140%;

        height: 130%;

        left: -20%;

        top: -15%;
    }


    .cuervo-aurora.cuervo-aurora-soft {

        --aurora-opacity-1: 0.075;

        --aurora-opacity-2: 0.04;

        --aurora-opacity-3: 0.022;

        --aurora-blur: 58px;
    }


    .cuervo-aurora.cuervo-aurora-medium {

        --aurora-opacity-1: 0.12;

        --aurora-opacity-2: 0.07;

        --aurora-opacity-3: 0.04;

        --aurora-blur: 48px;
    }


    .cuervo-aurora.cuervo-aurora-strong {

        --aurora-opacity-1: 0.18;

        --aurora-opacity-2: 0.11;

        --aurora-opacity-3: 0.065;

        --aurora-blur: 38px;
    }

}


/* ==========================================================
   MÓVIL
   ========================================================== */

@media (max-width: 767px) {

    /*
     * Hacemos el SVG bastante más ancho para que
     * siga percibiéndose como corriente horizontal.
     */

    .cuervo-aurora-svg {

        width: 175%;

        height: 140%;

        left: -37.5%;

        top: -20%;
    }


    /*
     * En móvil bajamos intensidad.
     */

    .cuervo-aurora.cuervo-aurora-soft {

        --aurora-opacity-1: 0.06;

        --aurora-opacity-2: 0.035;

        --aurora-opacity-3: 0.02;

        --aurora-blur: 48px;
    }


    .cuervo-aurora.cuervo-aurora-medium {

        --aurora-opacity-1: 0.10;

        --aurora-opacity-2: 0.06;

        --aurora-opacity-3: 0.035;

        --aurora-blur: 42px;
    }


    .cuervo-aurora.cuervo-aurora-strong {

        --aurora-opacity-1: 0.15;

        --aurora-opacity-2: 0.09;

        --aurora-opacity-3: 0.05;

        --aurora-blur: 34px;
    }

}




/*
 * ------------------------------------------------------------
 * TEXT TICKER
 * ------------------------------------------------------------
 */

.cuervo-ticker {
    position: relative;

    width: 100%;
    max-width: none;

    overflow: hidden;
}


/*
 * ------------------------------------------------------------
 * TRACK
 * ------------------------------------------------------------
 *
 * Es la pista completa que mueve GSAP.
 * El JS la crea automáticamente.
 * ------------------------------------------------------------
 */

.cuervo-ticker-track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;

    width: max-content;
    max-width: none;

    will-change: transform;
}


/*
 * ------------------------------------------------------------
 * GRUPO
 * ------------------------------------------------------------
 *
 * Contiene una repetición completa
 * de todos los textos.
 * ------------------------------------------------------------
 */

.cuervo-ticker-group {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;

    flex: 0 0 auto;

    width: max-content;
    max-width: none;

    /*
     * Separación entre cada bloque
     */
    gap: 30px;

    /*
     * Espacio entre el último elemento
     * de un grupo y el primero del siguiente.
     */
    padding-right: 30px;
}


/*
 * ------------------------------------------------------------
 * WIDGETS DE ELEMENTOR
 * ------------------------------------------------------------
 */

.cuervo-ticker-group > .elementor-element {
    display: flex;
    flex-direction: row;
    align-items: center;

    flex: 0 0 auto;

    width: auto;
    max-width: none;

    /*
     * Espacio entre el texto
     * y su separador.
     */
    gap: 30px;
}


/*
 * ------------------------------------------------------------
 * TEXTOS
 * ------------------------------------------------------------
 */

.cuervo-ticker h1,
.cuervo-ticker h2,
.cuervo-ticker h3,
.cuervo-ticker h4,
.cuervo-ticker h5,
.cuervo-ticker h6,
.cuervo-ticker p {
    margin: 0;

    white-space: nowrap;

    flex-shrink: 0;
}


/*
 * ------------------------------------------------------------
 * SEPARADORES
 * ------------------------------------------------------------
 *
 * Se pone después de TODOS los elementos,
 * también del último.
 *
 * Así queda:
 *
 * TEXTO ✦ TEXTO ✦ TEXTO ✦ TEXTO ✦
 *
 * y cuando empieza el siguiente clon:
 *
 * ... TEXTO ✦ TEXTO ...
 *
 * sin detectar dónde empieza o termina el loop.
 * ------------------------------------------------------------
 */

.cuervo-ticker-group > .elementor-element::after {
    content: "";

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    /*
     * Tamaño relativo al texto
     */
    font-size: 2em;

    line-height: 1;

    /*
     * Separador algo más discreto
     */
    opacity: 0.65;

    /*
     * Evita comportamientos extraños
     * con el ancho.
     */
    white-space: nowrap;
}


/*
 * ------------------------------------------------------------
 * CLONES
 * ------------------------------------------------------------
 *
 * Los crea automáticamente el JS.
 * ------------------------------------------------------------
 */

.cuervo-ticker-clone {
    flex: 0 0 auto;
}


/*
 * ------------------------------------------------------------
 * MÓVIL
 * ------------------------------------------------------------
 */

@media (max-width: 767px) {

    .cuervo-ticker-group {
        gap: 18px;
        padding-right: 18px;
    }

    .cuervo-ticker-group > .elementor-element {
        gap: 18px;
    }

    .cuervo-ticker-group > .elementor-element::after {
        font-size: 0.4em;
    }

}












/* ==========================================================
   ACCESIBILIDAD
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .cuervo-aurora-wave {

        transform: none !important;
    }

}