/*=========================================================
    SISTEMA DE DISEÑO
=========================================================*/

/*=========================================================
    CONTENEDORES
=========================================================*/

.section{
    position:relative;

    width:100%;

    padding:110px 24px;

    overflow:hidden;
}

.section-container{
    position:relative;

    z-index:var(--z-content);

    width:min(var(--container), 100%);

    margin-inline:auto;
}

.section-narrow{
    width:min(900px, 100%);
}

/*=========================================================
    ENCABEZADOS DE SECCIÓN
=========================================================*/

.section-header{
    margin-bottom:60px;

    text-align:center;
}

.section-eyebrow{
    margin-bottom:12px;

    color:var(--plateado-dark);

    font-size:.78rem;
    letter-spacing:4px;
    text-transform:uppercase;
}

.section-title{
    color:var(--vino);

    font-family:var(--font-title);
    font-size:clamp(3.4rem, 8vw, 6rem);
    font-weight:500;
    line-height:.95;
}

.section-subtitle{
    max-width:650px;

    margin:22px auto 0;

    color:var(--texto);

    font-size:clamp(1rem, 2vw, 1.2rem);
    line-height:1.75;
}

/*=========================================================
    DIVISORES
=========================================================*/

.divider{
    width:120px;
    height:1px;

    margin:32px auto;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--plateado),
            transparent
        );
}

.divider-left{
    margin-left:0;
}

.divider-vino{
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--vino),
            transparent
        );
}

/*=========================================================
    BOTONES
=========================================================*/

.button{
    display:inline-flex;
    justify-content:center;
    align-items:center;

    min-height:52px;

    padding:14px 34px;

    border:1px solid var(--vino);
    border-radius:999px;

    background:var(--vino);
    color:var(--blanco);

    font-size:.86rem;
    letter-spacing:2.5px;
    text-transform:uppercase;

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease,
        box-shadow .3s ease;
}

.button:hover{
    transform:translateY(-3px);

    box-shadow:
        0 14px 30px rgba(106,36,52,.2);
}

.button-outline{
    background:transparent;
    color:var(--vino);
}

.button-outline:hover{
    background:var(--vino);
    color:var(--blanco);
}

.button-light{
    border-color:var(--plateado-light);

    background:transparent;
    color:var(--blanco);
}

.button-light:hover{
    background:var(--blanco);
    color:var(--vino);
}

/*=========================================================
    ENLACES DECORATIVOS
=========================================================*/

.text-link{
    position:relative;

    display:inline-block;

    color:var(--vino);

    font-size:.88rem;
    letter-spacing:2.5px;
    text-transform:uppercase;
}

.text-link::after{
    content:"";

    position:absolute;

    left:50%;
    bottom:-8px;

    width:0;
    height:1px;

    transform:translateX(-50%);

    background:currentColor;

    transition:width .3s ease;
}

.text-link:hover::after{
    width:100%;
}

/*=========================================================
    TARJETAS
=========================================================*/

.card{
    position:relative;

    padding:38px;

    border:1px solid rgba(200,204,211,.55);
    border-radius:var(--radius-md);

    background:
        rgba(255,255,255,.72);

    box-shadow:
        var(--shadow-soft);

    backdrop-filter:blur(8px);
}

.card-title{
    margin-bottom:12px;

    color:var(--vino);

    font-family:var(--font-title);
    font-size:2rem;
    font-weight:500;
}

.card-text{
    color:var(--texto);

    font-size:1.05rem;
    line-height:1.7;
}

/*=========================================================
    FONDOS
=========================================================*/

.background-cream{
    background:
        linear-gradient(
            180deg,
            var(--crema) 0%,
            #fffdf9 50%,
            var(--crema) 100%
        );
}

.background-white{
    background:var(--blanco);
}

.background-wine{
    background:
        linear-gradient(
            145deg,
            var(--vino-dark) 0%,
            var(--vino) 52%,
            #7c3042 100%
        );

    color:var(--blanco);
}

/*=========================================================
    TEXTO
=========================================================*/

.text-center{
    text-align:center;
}

.text-wine{
    color:var(--vino);
}

.text-silver{
    color:var(--plateado-dark);
}

.text-light{
    color:var(--plateado-light);
}

/*=========================================================
    ANIMACIONES REUTILIZABLES
=========================================================*/

.reveal{
    opacity:0;

    transform:translateY(32px);

    transition:
        opacity .85s ease,
        transform .85s ease;
}

.reveal-left{
    opacity:0;

    transform:translateX(-38px);

    transition:
        opacity .85s ease,
        transform .85s ease;
}

.reveal-right{
    opacity:0;

    transform:translateX(38px);

    transition:
        opacity .85s ease,
        transform .85s ease;
}

.is-visible .reveal,
.reveal.is-visible,
.is-visible .reveal-left,
.reveal-left.is-visible,
.is-visible .reveal-right,
.reveal-right.is-visible{
    opacity:1;

    transform:none;
}

.delay-1{
    transition-delay:.12s;
}

.delay-2{
    transition-delay:.24s;
}

.delay-3{
    transition-delay:.36s;
}

.delay-4{
    transition-delay:.48s;
}

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

@media (max-width:700px){

    .section{
        padding:85px 20px;
    }

    .section-header{
        margin-bottom:45px;
    }

    .card{
        padding:28px 24px;
    }

}

@media (max-width:420px){

    .section{
        padding:70px 18px;
    }

    .button{
        width:100%;
    }

}

/*=========================================================
    ICONOS DE MARCA
=========================================================*/

.brand-icon{
    width:52px;
    height:52px;

    display:block;

    object-fit:contain;
    user-select:none;

    transition:
        transform .35s ease,
        filter .35s ease;
}

.brand-icon:hover{
    transform:
        translateY(-3px)
        scale(1.05);

    filter:
        drop-shadow(0 8px 16px rgba(106,36,52,.18));
}