/* =========================================================
   DOLCI HANDS
   BASE GENERAL
   ========================================================= */


/* =========================================================
   RESET
   ========================================================= */

*,
*::before,
*::after {

    box-sizing:
        border-box;

}


html {

    scroll-behavior:
        smooth;

}


body {

    margin:
        0;

    min-height:
        100vh;

    background:
        var(--color-background);

    color:
        var(--color-text);

    font-family:
        var(--font-body);

    font-size:
        var(--text-base);

    line-height:
        1.6;

    -webkit-font-smoothing:
        antialiased;

}


/* =========================================================
   ELEMENTOS
   ========================================================= */

img {

    display:
        block;

    max-width:
        100%;

}


button,
input,
textarea,
select {

    font:
        inherit;

}


button {

    cursor:
        pointer;

}


a {

    color:
        inherit;

    text-decoration:
        none;

}


/* =========================================================
   CONTENEDOR
   ========================================================= */

.container {

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

    margin-inline:
        auto;

}


/* =========================================================
   SECCIONES
   ========================================================= */

section {

    width:
        100%;

}


.section-eyebrow {

    display:
        inline-block;

    margin-bottom:
        var(--space-4);

    color:
        var(--color-accent);

    font-size:
        var(--text-sm);

    font-weight:
        var(--font-weight-semibold);

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

}


.section-heading {

    max-width:
        680px;

    margin-inline:
        auto;

    text-align:
        center;

}


.section-heading h2 {

    margin:
        0;

    color:
        var(--color-text);

    font-family:
        var(--font-display);

    font-size:
        var(--text-3xl);

    font-weight:
        var(--font-weight-bold);

    line-height:
        1.15;

}


.section-heading p {

    margin:
        var(--space-5) auto 0;

    max-width:
        560px;

    color:
        var(--color-text-soft);

}


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

.button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        var(--space-2);

    min-height:
        48px;

    padding:
        12px 24px;

    border:
        1px solid transparent;

    border-radius:
        var(--radius-pill);

    font-size:
        var(--text-sm);

    font-weight:
        var(--font-weight-semibold);

    white-space:
        nowrap;

    transition:
        transform var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast);

}


.button:hover {

    transform:
        translateY(-2px);

}


.button-primary {

    background:
        var(--color-primary);

    color:
        var(--dh-warm-white);

}


.button-primary:hover {

    background:
        var(--color-primary-deep);

}


.button-secondary {

    background:
        transparent;

    border-color:
        var(--color-accent);

    color:
        var(--color-text);

}


.button-secondary:hover {

    background:
        rgba(184, 111, 91, 0.08);

}


/* =========================================================
   FOCUS
   ========================================================= */

:focus-visible {

    outline:
        3px solid
        rgba(184, 111, 91, 0.45);

    outline-offset:
        3px;

}


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

@media (max-width: 600px) {

    .container {

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

    }


    .button {

        min-height:
            46px;

        padding:
            11px 20px;

    }

}



/* =========================================================
   LOGOUT TOAST
   ========================================================= */

.logout-toast {

    position:
        fixed;

    top:
        90px;

    left:
        50%;

    transform:
        translateX(-50%);

    z-index:
        9999;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        12px 18px;

    border:
        1px solid
        #ddcec2;

    border-radius:
        14px;

    background:
        #fffaf5;

    color:
        #4c2b22;

    font-size:
        14px;

    font-weight:
        600;

    box-shadow:
        0 12px 30px
        rgba(76, 43, 34, .14);

    animation:
        logout-toast-in .25s ease
        both;

}


.logout-toast-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        22px;

    height:
        22px;

    border-radius:
        50%;

    color:
        #426342;

    background:
        rgba(92, 130, 92, .12);

    font-size:
        13px;

}


@keyframes logout-toast-in {

    from {

        opacity:
            0;

        transform:
            translate(-50%, -8px);

    }

    to {

        opacity:
            1;

        transform:
            translate(-50%, 0);

    }

}