/* ========================================
    COMPONENTE: HERO
    ========================================
*/

.hero__swiper {
    --swiper-navigation-size: 2rem;
    --swiper-navigation-color: var(--color-text-wt);
    --swiper-pagination-color: var(--color-accent);
    --swiper-pagination-bullet-size: 24px;
    --swiper-pagination-bullet-inactive-color: #fff;
    --swiper-pagination-bullet-inactive-opacity: 0.4;
    --swiper-pagination-bullet-opacity: 1;
    --swiper-pagination-bullet-horizontal-gap: 6px;
    --swiper-pagination-bottom: clamp(0.625rem, 0.179rem + 2.232vw, 1.25rem);
}
@media (min-width: 768px) {
    .hero__swiper {
        --swiper-pagination-bottom: clamp(1.25rem, -0.625rem + 3.906vw, 1.875rem);
    }
}
@media (min-width: 1024px) {
    .hero__swiper {
        --swiper-pagination-bottom: 30px;
    }
}

.hero__swiper {
    width: 100%;
    height: 50rem; /* 800px */
    margin: auto;
}
@media (min-width: 768px) {
    .hero__swiper {
        height: 59.375rem;
    }
}
@media (min-width: 1024px) {
    .hero__swiper {
        height: 59.375rem;
    }
}

.swiper-wrapper {
    position: relative;
}

.swiper-slide {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.slide__background {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.05);
    filter: blur(0px) brightness(50%);
    z-index: 0;
}

.slide__background--1 {
    filter: blur(2px) brightness(60%) !important;
}

.slide__background--1 {background-image: url('../../assets/img/hero/slide-1.webp');}
.slide__background--2 {background-image: url('../../assets/img/hero/slide-2.webp');}
.slide__background--3 {background-image: url('../../assets/img/hero/slide-3.webp');}
.slide__background--4 {background-image: url('../../assets/img/hero/slide-4.webp');}

.slide__hero-layout {
    display: flex;
    margin: 0;
    width: 100%;
    max-width: 1400px;
    height: 100%;
    padding: 0 clamp(1rem, -4.597rem + 17.91vw, 4rem);
    z-index: 1;
}

.swiper-slide__container {
    display: flex;
    flex: 1;
    justify-content: space-evenly;
    padding: calc(var(--header-height-mobile) + 10px) 0 40px 0;
    flex-direction: column;
    width: 100%;
    height: 100%;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.5), 0 0 8px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 2;
    background: transparent;
}

.slide__hero-layout--img-container {
    display: none;
}


/* =============================================== */
/*  SOLUCIÓN MÓVIL (PANTALLAS < 768px)           */
/* =============================================== */

.slide--1 .slide__hero-layout--img-container {
    display: flex;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* Tu ajuste de posicionamiento: */
    justify-content: end; 
    left: -15px; 
    align-items: flex-end;
    /* --- */
    z-index: 1;
    pointer-events: none;
}

.slide--1 .slide__hero-layout--img {
    height: 65%;
    width: auto;
    object-fit: contain;
    opacity: 0.9;
    transform: translateY(-200px);

    /* >>> NUEVO: DIFUMINADO INFERIOR <<< */
    mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}


/* =============================================== */
/*  RESTAURACIÓN para escritorio (≥ 768px)       */
/* =============================================== */
@media (min-width: 768px) {

    /* >>> CORRECCIÓN: TAMAÑO DE FLECHAS PARA TABLET <<< */
    .hero__swiper {
        --swiper-navigation-size: 2.5rem;
    }

    .slide__hero-layout {
        justify-content: space-between;
        flex-direction: row;
        padding: 0 var(--spacing-l);
        width: 100%;
    }

    .slide--1 .slide__hero-layout--img-container {
        display: flex;
        position: static;
        width: clamp(18.75rem, -7.624rem + 54.945vw, 25rem);
        max-width: 400px;
        height: 100%;
        align-items: flex-end;
        pointer-events: auto;
        z-index: auto;
        /* Reseteamos tu ajuste para que no afecte al escritorio */
        justify-content: center;
        left: 0;
    }

    .slide--1 .slide__hero-layout--img {
        width: 100%;
        height: calc(100% - 2rem);
        object-fit: contain;
        object-position: bottom;
        opacity: 1;
        transform: none; /* Resetea el desplazamiento vertical */
        mask-image: none; /* >>> Resetea el difuminado <<< */
        -webkit-mask-image: none;
    }

    .swiper-slide__container {
        padding: clamp(5.625rem, 1.875rem + 7.813vw, 6.875rem) 0;
    }
}

/* >>> CORRECCIÓN: TAMAÑO DE FLECHAS PARA DESKTOP GRANDE <<< */
@media (min-width: 1500px) {
    .hero__swiper {
        --swiper-navigation-size: 3.5rem;
    }
}


/* =============================================== */
/*  RESTO DE ESTILOS (sin cambios)                 */
/* =============================================== */
.swiper-slide__container span:not(.swiper-slide__container--tag) { color: var(--color-accent); }
.swiper-slide__container--tag { background-color: var(--color-accent); font-family: var(--font-primary); color: var(--color-text-wt); width: fit-content; font-size: clamp(1rem, 0.857rem + 0.714vw, 1.2rem); font-weight: 500; padding: 8px 15px; text-shadow: none; }
@media (min-width: 768px) { .swiper-slide__container--tag { font-size: clamp(1.2rem, 0.3rem + 1.875vw, 1.5rem); } }
@media (min-width: 1024px) { .swiper-slide__container--tag { font-size: clamp(1.5rem, 1.228rem + 0.426vw, 1.6rem); } }
.swiper-slide__container--title { color: var(--color-text-wt); font-family: var(--font-primary); font-weight: 500; font-size: clamp(1.6rem, 1.171rem + 2.143vw, 2.2rem); width: 100%; margin: 0; }
@media (min-width: 768px) { .swiper-slide__container--title { font-size: clamp(2.2rem, 0.4rem + 3.75vw, 2.8rem); } }
@media (min-width: 1024px) { .swiper-slide__container--title { font-size: clamp(2.8rem, 2.255rem + 0.851vw, 3rem); } }
.swiper-slide__container--subtitle { color: var(--color-text-wt); font-family: var(--font-primary); font-size: clamp(1.4rem, 1.114rem + 1.429vw, 1.8rem); font-weight: 500; width: 100%; max-width: 70ch; margin: 0; }
@media (min-width: 768px) { .swiper-slide__container--subtitle { font-size: clamp(1.8rem, 0.3rem + 3.125vw, 2.3rem); } }
@media (min-width: 1024px) { .swiper-slide__container--subtitle { font-size: clamp(2.3rem, 1.755rem + 0.851vw, 2.5rem); } }
.swiper-slide__container--parrafo { color: var(--color-text-wt); font-family: var(--font-secondary); font-size: clamp(1rem, 0.857rem + 0.714vw, 1.2rem); line-height: clamp(1.5rem, 1.286rem + 1.071vw, 1.8rem); font-weight: 400; width: 100%; max-width: 70ch; margin: 0; }
@media (min-width: 768px) { .swiper-slide__container--parrafo { font-size: clamp(1.2rem, 0.6rem + 1.25vw, 1.4rem); line-height: clamp(1.8rem, 0.9rem + 1.875vw, 2.1rem); } }
@media (min-width: 1024px) { .swiper-slide__container--parrafo { font-size: clamp(1.4rem, 1.128rem + 0.426vw, 1.5rem); line-height: clamp(2.1rem, 1.691rem + 0.638vw, 2.25rem); } }
.swiper-slide__container--link {
    width: fit-content;
    height: auto;
    text-align: center;
    padding: 6px 10px;
    margin-left: 0;
    color: var(--color-text-wt);
    font-family: var(--font-secondary);
    font-size: clamp(1rem, 0.714rem + 1.429vw, 1.4rem);
    font-weight: 400;
    text-decoration: none;
    border: 2px solid white;
    text-shadow: none;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.swiper-slide__container--link span {
    color: var(--color-text-wt) !important;
    transition: color 0.3s ease;
}
.swiper-slide__container--link:hover,
.swiper-slide__container--link:focus {
    background-color: var(--color-text-wt);
    color: var(--color-text-dk);
    border-color: var(--color-text-wt);
    transform: translateY(-4px);
}
.swiper-slide__container--link:hover span,
.swiper-slide__container--link:focus span {
    color: var(--color-text-dk) !important;
}
.swiper-slide__container--link i {
    animation: arrowMov 2s infinite ease-in-out;
    margin-left: 10px;
    font-size: 1.1em;
}
@media (min-width: 768px) { .swiper-slide__container--link { font-size: clamp(1.4rem, 0.8rem + 1.25vw, 1.6rem); } }
@media (min-width: 1024px) { .swiper-slide__container--link { font-size: clamp(1.6rem, 1.055rem + 0.851vw, 1.8rem); } }
@keyframes arrowMov { 0% { transform: translateX(0); } 50% {transform: translateX(4px);} 100% { transform: translateX(0); } }
.hero__swiper .swiper-button-prev, .hero__swiper .swiper-button-next { display: none; position: absolute; top: 50%; transform: translateY(-50%); color: var(--swiper-navigation-color); width: var(--swiper-navigation-size); height: var(--swiper-navigation-size); padding: 0; font-weight: 600; text-shadow: 0px 5px 10px black; transition: 0.2s; margin: 0; }
.swiper-button-prev { left: 0; }
.swiper-button-next { right: 0; }
@media (min-width: 768px) { .hero__swiper .swiper-button-prev, .hero__swiper .swiper-button-next { display: flex; justify-content: center; align-items: center; } }
@media (min-width: 1500px) { .hero__swiper .swiper-button-prev, .hero__swiper .swiper-button-next { margin: 0 calc((100vw - 1500px) / 4); } }
.hero__swiper .swiper-button-prev:hover, .hero__swiper .swiper-button-next:hover { color: var(--color-accent); }
.hero__swiper .autoplay-progress { position: absolute; right: 24px; bottom: 24px; z-index: 10; width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center; font-family: var(--font-secondary); font-weight: 400; font-size: 1.2rem; color: var(--color-accent); }
.hero__swiper .autoplay-progress svg { --progress: 0; position: absolute; left: 0; top: 0px; z-index: 10; width: 100%; height: 100%; stroke-width: 2px; stroke: var(--color-accent); fill: none; stroke-dashoffset: calc(125.6px * (1 - var(--progress))); stroke-dasharray: 125.6; transform: rotate(-90deg); }