/* =========================================================
   DOLCI HANDS
   HERO
   ========================================================= */


/* =========================================================
   HERO PRINCIPAL
   ========================================================= */

.hero {

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

    min-height:
        680px;

    margin:
        0 auto;

    padding:
        80px 0;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(420px, 0.85fr);

    align-items:
        center;

    gap:
        80px;

}


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

.hero-content {

    max-width:
        650px;

}


.hero-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        24px;

    color:
        var(--color-accent);

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

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

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

}


.hero-eyebrow::before {

    content:
        "";

    width:
        28px;

    height:
        1px;

    background:
        var(--color-accent);

}


/* =========================================================
   TÍTULO
   ========================================================= */

.hero-title {

    margin:
        0;

    color:
        var(--color-text);

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

    font-size:
        clamp(
            3.5rem,
            5.5vw,
            5.5rem
        );

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

    line-height:
        0.98;

    letter-spacing:
        -0.045em;

}


.hero-title span {

    display:
        block;

    color:
        var(--color-accent);

}


/* =========================================================
   DESCRIPCIÓN
   ========================================================= */

.hero-description {

    max-width:
        520px;

    margin:
        30px 0 0;

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

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

    line-height:
        1.75;

}


/* =========================================================
   ACCIONES
   ========================================================= */

.hero-actions {

    margin-top:
        34px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    flex-wrap:
        wrap;

}


/* =========================================================
   BENEFICIOS
   ========================================================= */

.hero-benefits {

    margin-top:
        46px;

    display:
        flex;

    align-items:
        center;

    gap:
        30px;

}


.hero-benefit {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

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

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

    line-height:
        1.35;

}


.hero-benefit strong {

    display:
        block;

    color:
        var(--color-text);

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

}


.hero-benefit-icon {

    width:
        32px;

    height:
        32px;

    flex:
        0 0 auto;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--dh-cream-warm);

    color:
        var(--color-accent);

    font-size:
        0.95rem;

}


/* =========================================================
   ÁREA DE IMAGEN
   ========================================================= */

.hero-media {

    position:
        relative;

    min-height:
        540px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


/* =========================================================
   PLACEHOLDER DE FOTOGRAFÍA
   ========================================================= */

.hero-image-placeholder {

    width:
        min(
            100%,
            520px
        );

    aspect-ratio:
        4 / 5;

    border-radius:
        240px 240px 28px 28px;

    background:
        var(--dh-cream-warm);

    overflow:
        hidden;

    position:
        relative;

}


/*
    Cuando tengamos la fotografía real,
    aquí podremos utilizar:

    background-image:
        url(...);

    sin modificar la estructura del Hero.
*/


.hero-image-placeholder::after {

    content:
        "Dolci Hands";

    position:
        absolute;

    inset:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        rgba(
            74,
            44,
            36,
            0.20
        );

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

    font-size:
        1.2rem;

    letter-spacing:
        0.05em;

}


/* =========================================================
   TARJETA FLOTANTE
   ========================================================= */

.hero-floating-message {

    position:
        absolute;

    right:
        -15px;

    bottom:
        50px;

    width:
        min(
            300px,
            70%
        );

    padding:
        18px;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;

    border:
        1px solid
        var(--color-border-soft);

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

    background:
        rgba(
            255,
            253,
            248,
            0.96
        );

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

}


.hero-floating-icon {

    width:
        38px;

    height:
        38px;

    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--dh-cream-warm);

    color:
        var(--color-accent);

}


.hero-floating-message strong {

    display:
        block;

    color:
        var(--color-text);

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

    line-height:
        1.35;

}


.hero-floating-message p {

    margin:
        4px 0 0;

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

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

    line-height:
        1.5;

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .hero {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(350px, 0.8fr);

        gap:
            45px;

    }


    .hero-title {

        font-size:
            clamp(
                3rem,
                5vw,
                4.5rem
            );

    }


    .hero-benefits {

        gap:
            18px;

    }


    .hero-benefit {

        font-size:
            0.7rem;

    }


    .hero-floating-message {

        right:
            -5px;

    }

}


/* =========================================================
   TABLET VERTICAL
   ========================================================= */

@media (max-width: 850px) {

    .hero {

        min-height:
            auto;

        padding:
            60px 0;

        grid-template-columns:
            1fr;

        gap:
            45px;

    }


    .hero-content {

        max-width:
            720px;

        margin-inline:
            auto;

        text-align:
            center;

    }


    .hero-eyebrow {

        justify-content:
            center;

    }


    .hero-description {

        margin-inline:
            auto;

    }


    .hero-actions {

        justify-content:
            center;

    }


    .hero-benefits {

        justify-content:
            center;

        flex-wrap:
            wrap;

    }


    .hero-media {

        min-height:
            500px;

    }

}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 600px) {

    .hero {

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

        padding:
            42px 0 60px;

    }


    .hero-title {

        font-size:
            clamp(
                2.7rem,
                12vw,
                4rem
            );

        line-height:
            1;

    }


    .hero-description {

        margin-top:
            22px;

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

        line-height:
            1.65;

    }


    .hero-actions {

        margin-top:
            28px;

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .hero-actions .button {

        width:
            100%;

    }


    .hero-benefits {

        display:
            none;

    }


    .hero-media {

        min-height:
            400px;

    }


    .hero-image-placeholder {

        width:
            100%;

        max-width:
            360px;

    }


    .hero-floating-message {

        right:
            0;

        bottom:
            20px;

        width:
            min(
                280px,
                85%
            );

    }

}