/*=========================================================
    CÓDIGO DE VESTIMENTA
=========================================================*/

.dress-code{
    position:relative;

    min-height:100vh;

    display:flex;
    align-items:center;
}

.dress-code::before{
    content:"";

    position:absolute;

    top:-180px;
    right:-180px;

    width:420px;
    height:420px;

    border:1px solid rgba(106,36,52,.08);
    border-radius:50%;

    pointer-events:none;
}

.dress-code::after{
    content:"";

    position:absolute;

    bottom:-220px;
    left:-220px;

    width:480px;
    height:480px;

    border:1px solid rgba(142,148,156,.12);
    border-radius:50%;

    pointer-events:none;
}

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

.dress-code-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));

    gap:28px;
}

.dress-card{
    position:relative;

    min-height:340px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    padding:44px 36px;

    overflow:hidden;

    border:1px solid rgba(200,204,211,.62);
    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.96),
            rgba(248,245,239,.82)
        );

    text-align:center;

    box-shadow:
        0 18px 45px rgba(71,19,31,.08);

    transition:
        transform .4s ease,
        box-shadow .4s ease,
        border-color .4s ease;
}

.dress-card:hover{
    transform:translateY(-7px);

    border-color:rgba(106,36,52,.34);

    box-shadow:
        0 28px 65px rgba(71,19,31,.14);
}

.dress-card::before{
    content:"";

    position:absolute;

    top:-90px;
    right:-90px;

    width:190px;
    height:190px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(106,36,52,.08),
            transparent 68%
        );

    pointer-events:none;
}

.dress-card-icon{
    width:58px;
    height:58px;

    margin-bottom:26px;

    object-fit:contain;

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

.dress-card:hover .dress-card-icon{
    transform:translateY(-4px) scale(1.05);

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

.dress-card-number{
    margin-bottom:10px;

    color:var(--plateado-dark);

    font-size:.72rem;
    letter-spacing:3px;
}

.dress-card-title{
    margin-bottom:16px;

    color:var(--vino);

    font-family:var(--font-title);
    font-size:clamp(2.1rem, 4vw, 3rem);
    font-weight:500;
    line-height:1;
}

.dress-card-text{
    max-width:380px;

    color:var(--texto);

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

/*=========================================================
    TARJETA ANCHA
=========================================================*/

.dress-card-wide{
    grid-column:1 / -1;

    min-height:auto;

    display:grid;
    grid-template-columns:130px 1fr;

    align-items:center;

    padding:38px 48px;

    text-align:left;
}

.dress-card-wide-icon{
    display:flex;
    align-items:center;
    justify-content:center;
}

.dress-card-wide-content{
    padding-left:24px;

    border-left:1px solid rgba(200,204,211,.65);
}

/*=========================================================
    NOTA
=========================================================*/

.dress-code-note{
    margin-top:32px;

    color:var(--vino);

    font-size:1.60rem;
    font-weight:500;

    line-height:1.8;
    letter-spacing:.06em;

    text-align:center;
}
/*=========================================================
    RESPONSIVE
=========================================================*/

@media (max-width:760px){

    .dress-code-grid{
        grid-template-columns:1fr;
    }

    .dress-card{
        min-height:300px;
    }

    .dress-card-wide{
        grid-column:auto;

        grid-template-columns:1fr;

        padding:42px 30px;

        text-align:center;
    }

    .dress-card-wide-icon{
        margin-bottom:24px;
    }

    .dress-card-wide-content{
        padding-left:0;

        border-left:none;
    }

}

@media (max-width:460px){

    .dress-card{
        padding:38px 24px;
    }

    .dress-code-note{
        font-size:1.60rem;
        letter-spacing:1.5px;
    }

}

/*=========================================================
    ICONOS DE VESTIMENTA
=========================================================*/

.dress-icons-pair{
    display:flex;
    justify-content:center;
    align-items:center;

    gap:20px;

    margin-bottom:28px;
}

.dress-icons-pair .brand-icon{
    width:54px;
    height:54px;

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

.dress-divider{
    width:1px;
    height:44px;

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

    transition:
        background .35s ease,
        height .35s ease;
}

.dress-card:hover .dress-divider{
    height:54px;

    background:
        linear-gradient(
            180deg,
            transparent,
            var(--vino),
            transparent
        );
}

.dress-card:hover .dress-icons-pair .brand-icon:first-child{
    transform:
        rotate(-6deg)
        translateY(-3px);
}

.dress-card:hover .dress-icons-pair .brand-icon:last-child{
    transform:
        rotate(6deg)
        translateY(-3px);
}

.dress-card-wide-icon .brand-icon{
    width:70px;
    height:70px;
}