/* =========================================================
   BANNER PRINCIPAL AMAT
   Basado en la misma arquitectura visual del Banner DEMHILL
========================================================= */

.BannerPrincipal{
    --banner-vino:#7d0d2f;
    --banner-vino-oscuro:#5c071f;
    --banner-dorado:#c8a269;
    --banner-texto:#171313;
    --banner-gris:#5f585a;
    --banner-crema:#fbf7f2;

    position:relative;
    width:100%;
    height:620px;
    min-height:620px;
    overflow:hidden;
    background:#f6efe8;
}

/* =========================================================
   SLIDER DE FONDO
========================================================= */

.BannerSwiper,
.BannerSwiper .swiper-wrapper,
.BannerDiapositiva{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.BannerSwiper{
    z-index:1;
    overflow:hidden;
}

.BannerDiapositiva{
    opacity:0;
    visibility:hidden;
}

.BannerDiapositiva.BannerSlideActivo{
    opacity:1;
    visibility:visible;
}

.BannerImagen{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
    transform:scale(1.035);
    will-change:transform;
}

/* =========================================================
   VELO BLANCO COMO DEMHILL
   Blanco fuerte en la zona de lectura y desaparece hacia la foto.
========================================================= */

.BannerVelo{
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.99) 0%,
            rgba(255,255,255,.98) 23%,
            rgba(255,255,255,.93) 31%,
            rgba(255,255,255,.78) 38%,
            rgba(255,255,255,.46) 46%,
            rgba(255,255,255,.16) 54%,
            rgba(255,255,255,0) 64%
        );
}

/* =========================================================
   CONTENIDO FIJO
========================================================= */

.BannerLayout{
    position:relative;
    z-index:4;
    width:min(92%,1540px);
    height:100%;
    margin:0 auto;
    display:flex;
    align-items:center;
    padding-bottom:86px;
}

.BannerColumnaTexto{
    width:min(590px,40%);
    margin-left:12px;
    padding-top:4px;
}

.BannerEtiqueta{
    display:flex;
    align-items:center;
    gap:13px;
    margin-bottom:18px;
    color:#4f4749;
    font-family:var(--fuente-texto,"Montserrat",Arial,sans-serif);
    font-size:11px;
    font-weight:500;
    letter-spacing:.34em;
    text-transform:uppercase;
}

.BannerEtiqueta span{
    width:38px;
    height:1px;
    background:rgba(125,13,47,.34);
}

.BannerTituloFijo{
    min-height:224px;
    margin:0;
    color:var(--banner-texto);
    font-family:var(--fuente-titulos,"Cormorant Garamond",Georgia,serif);
    font-size:clamp(58px,4.65vw,82px);
    line-height:.90;
    letter-spacing:-.025em;
    font-weight:400;
}

.BannerTituloFijo span{
    color:var(--banner-vino);
    font-style:italic;
    font-weight:400;
}

.BannerTituloFijo.BannerEscribiendo::after{
    content:"";
    display:inline-block;
    width:1px;
    height:.82em;
    margin-left:4px;
    vertical-align:-.05em;
    background:var(--banner-vino);
    animation:BannerCursor .7s steps(1) infinite;
}

@keyframes BannerCursor{
    50%{opacity:0}
}

.BannerDescripcionFija{
    max-width:490px;
    margin:20px 0 25px;
    color:var(--banner-gris);
    font-family:var(--fuente-texto,"Montserrat",Arial,sans-serif);
    font-size:14px;
    line-height:1.7;
    font-weight:300;
}

.BannerBotonPrincipal{
    position:relative;
    overflow:hidden;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:24px;
    min-width:220px;
    height:52px;
    padding:0 21px;
    border:1px solid var(--banner-vino);
    border-radius:6px;
    background:var(--banner-vino);
    color:#fff;
    text-decoration:none;
    font-family:var(--fuente-texto,"Montserrat",Arial,sans-serif);
    font-size:12px;
    font-weight:500;
    transition:
        transform .28s ease,
        background .28s ease,
        box-shadow .28s ease;
}

.BannerBotonPrincipal::before{
    content:"";
    position:absolute;
    top:-45%;
    left:-58%;
    width:43%;
    height:190%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent);
    transform:skewX(-22deg);
    transition:left .55s ease;
}

.BannerBotonPrincipal:hover{
    transform:translateY(-3px) scale(1.035);
    background:var(--banner-vino-oscuro);
    box-shadow:0 12px 26px rgba(125,13,47,.20);
}

.BannerBotonPrincipal:hover::before{
    left:125%;
}

.BannerBotonPrincipal i{
    transition:transform .25s ease;
}

.BannerBotonPrincipal:hover i{
    transform:translateX(4px);
}

/* =========================================================
   BARRA DE BENEFICIOS
   NO SON BOTONES: SOLO HOVER
========================================================= */

.BannerBeneficios{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:5;
    height:86px;
    background:#fffaf6;
    border-top:1px solid rgba(125,13,47,.10);
    color:#2c2728;
}

.BannerBeneficiosInterior{
    width:min(92%,1540px);
    height:100%;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    align-items:center;
}

.BannerBeneficio{
    min-width:0;
    height:58px;
    padding:0 22px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:13px;
    border-right:1px solid rgba(125,13,47,.14);
    cursor:default;
    transition:
        transform .28s ease,
        background .28s ease;
}

.BannerBeneficio:last-child{
    border-right:0;
}

.BannerBeneficio i{
    width:42px;
    height:42px;
    flex:0 0 42px;
    display:grid;
    place-items:center;
    border:1px solid rgba(125,13,47,.55);
    border-radius:50%;
    color:var(--banner-vino);
    font-size:20px;
    transition:
        transform .30s ease,
        background .30s ease,
        color .30s ease,
        box-shadow .30s ease;
}

.BannerBeneficio span{
    font-family:var(--fuente-titulos,"Cormorant Garamond",Georgia,serif);
    font-size:17px;
    line-height:1.18;
    font-weight:500;
}

.BannerBeneficio strong{
    color:#6f6568;
    font-family:var(--fuente-texto,"Montserrat",Arial,sans-serif);
    font-size:9px;
    font-weight:300;
}

.BannerBeneficio:hover{
    transform:translateY(-3px);
    background:rgba(125,13,47,.025);
}

.BannerBeneficio:hover i{
    transform:scale(1.10) rotate(-4deg);
    background:var(--banner-vino);
    color:#fff;
    box-shadow:0 8px 18px rgba(125,13,47,.16);
}

/* =========================================================
   FLECHAS + PAGINACIÓN
========================================================= */

.BannerFlecha{
    width:42px;
    height:42px;
    top:auto;
    bottom:105px;
    border-radius:50%;
    color:#fff;
    background:rgba(125,13,47,.78);
    opacity:.10;
    transition:.25s ease;
    z-index:6;
}

.BannerPrincipal:hover .BannerFlecha{
    opacity:.85;
}

.BannerFlecha::after{
    font-size:15px;
    font-weight:700;
}

.BannerFlechaIzquierda{
    left:18px;
}

.BannerFlechaDerecha{
    right:18px;
}

.BannerPaginacion{
    position:absolute;
    left:50%;
    bottom:101px!important;
    z-index:6;
    transform:translateX(-50%);
    display:flex;
    justify-content:center;
    gap:7px;
}

.BannerPaginacion .swiper-pagination-bullet{
    width:7px;
    height:7px;
    margin:0!important;
    border-radius:50%;
    background:#fff;
    opacity:.55;
    cursor:pointer;
    transition:.25s ease;
}

.BannerPaginacion .swiper-pagination-bullet-active{
    opacity:1;
    background:var(--banner-vino);
    transform:scale(1.25);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1000px){
    .BannerPrincipal{
        height:580px;
        min-height:580px;
    }

    .BannerColumnaTexto{
        width:48%;
    }

    .BannerTituloFijo{
        font-size:56px;
    }

    .BannerBeneficio{
        padding:0 10px;
    }

    .BannerBeneficio span{
        font-size:14px;
    }
}

@media(max-width:820px){
    .BannerPrincipal{
        height:650px;
        min-height:650px;
    }

    .BannerVelo{
        background:
            linear-gradient(
                0deg,
                rgba(255,255,255,1) 0%,
                rgba(255,255,255,.98) 38%,
                rgba(255,255,255,.72) 58%,
                rgba(255,255,255,.10) 82%,
                rgba(255,255,255,0) 100%
            );
    }

    .BannerLayout{
        align-items:flex-end;
        padding-bottom:188px;
    }

    .BannerColumnaTexto{
        width:100%;
        max-width:580px;
        margin-left:0;
    }

    .BannerTituloFijo{
        min-height:auto;
        font-size:50px;
    }

    .BannerBeneficios{
        height:170px;
    }

    .BannerBeneficiosInterior{
        grid-template-columns:repeat(2,1fr);
    }

    .BannerBeneficio{
        border-right:0;
        justify-content:flex-start;
    }
}

@media(max-width:520px){
    .BannerPrincipal{
        height:760px;
        min-height:760px;
    }

    .BannerLayout{
        width:88%;
        padding-bottom:285px;
    }

    .BannerEtiqueta{
        font-size:9px;
        letter-spacing:.22em;
    }

    .BannerTituloFijo{
        font-size:44px;
    }

    .BannerDescripcionFija{
        font-size:12px;
    }

    .BannerBeneficios{
        height:270px;
    }

    .BannerBeneficiosInterior{
        grid-template-columns:1fr;
    }

    .BannerBeneficio{
        height:54px;
        border-bottom:1px solid rgba(125,13,47,.08);
    }

    .BannerBeneficio:last-child{
        border-bottom:0;
    }
}