/* ============================================================
   PORTAVIDA
   HERO PRINCIPAL
   Basado en la referencia visual aprobada.
   ============================================================ */

.pv-hero {
    --pv-hero-green-dark: #0d4f3c;
    --pv-hero-green: #2f7d32;
    --pv-hero-green-light: #69a82f;
    --pv-hero-cream: #f8f5ee;
    --pv-hero-text: #153f35;
    --pv-hero-muted: #536259;

    width: min(1440px, calc(100% - 40px));

    margin:
        0
        auto
        10px;

    overflow: hidden;

    background: var(--pv-hero-cream);

    color: var(--pv-hero-text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
}


/* ============================================================
   BLOQUE PRINCIPAL
   ============================================================ */

.pv-hero-main {
    min-height: 245px;

    display: grid;

    grid-template-columns:
        minmax(390px, 41%)
        minmax(0, 59%);

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            #fbf8f0 0%,
            #f8f5ee 43%,
            #ffffff 100%
        );
}


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

.pv-hero-content {
    min-width: 0;

    padding:
        24px
        24px
        22px
        52px;

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

    position: relative;
    z-index: 2;
}


.pv-hero-kicker {
    margin-bottom: 7px;

    color: #315e54;

    font-size: 11px;
    font-weight: 700;
    line-height: 1;

    letter-spacing: 4px;
}


.pv-hero-title {
    margin: 0;

    color: var(--pv-hero-green-dark) !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            40px,
            4vw,
            56px
        );

    font-weight: 500;

    line-height: .94;

    letter-spacing: -1.8px;
}


.pv-hero-line {
    width: 45px;
    height: 2px;

    margin:
        10px
        0
        9px;

    border-radius: 4px;

    background: var(--pv-hero-green);
}


.pv-hero-description {
    max-width: 430px;

    margin:
        0
        0
        13px;

    color: #40574f;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 15px;
    line-height: 1.32;
}


/* ============================================================
   BOTÓN
   ============================================================ */

.pv-hero-button {
    width: fit-content;

    min-height: 40px;

    padding:
        0
        17px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #2f7d32,
            #4f9631
        );

    color: #ffffff !important;

    text-decoration: none !important;

    font-size: 14px;
    font-weight: 700;

    box-shadow:
        0 5px 14px
        rgba(55,117,43,.16);

    transition:
        background .18s ease,
        transform .18s ease;
}


.pv-hero-button:hover,
.pv-hero-button:focus-visible {
    color: #ffffff !important;

    background:
        linear-gradient(
            90deg,
            #286d28,
            #43832c
        );

    transform: translateY(-1px);
}


.pv-hero-button-icon,
.pv-hero-button-arrow {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;
}


.pv-hero-button-icon {
    width: 20px;
    height: 20px;
}


.pv-hero-button-arrow {
    width: 16px;
    height: 16px;

    margin-left: 2px;
}


.pv-hero-button svg {
    width: 100%;
    height: 100%;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ============================================================
   FOTO
   ============================================================ */

.pv-hero-image {
    min-width: 0;

    position: relative;

    overflow: hidden;
}


.pv-hero-image img {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 245px;

    object-fit: cover;

    object-position: center;
}


/*
 * Unión suave entre el fondo crema y la fotografía.
 */
.pv-hero-image::before {
    content: "";

    position: absolute;

    inset:
        0
        auto
        0
        0;

    width: 110px;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(248,245,238,1) 0%,
            rgba(248,245,238,.78) 35%,
            rgba(248,245,238,0) 100%
        );
}


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

@media (max-width: 1000px) {

    .pv-hero {
        width:
            min(
                calc(100% - 32px),
                960px
            );
    }


    .pv-hero-main {
        min-height: 220px;

        grid-template-columns:
            45%
            55%;
    }


    .pv-hero-content {
        padding:
            20px
            18px
            18px
            30px;
    }


    .pv-hero-title {
        font-size: 42px;
    }


    .pv-hero-description {
        font-size: 14px;
    }


    .pv-hero-image img {
        min-height: 220px;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 767px) {

    .pv-hero {
        width: 100%;

        margin:
            0
            auto
            8px;
    }


    .pv-hero-main {
        min-height: 205px;

        grid-template-columns:
            61%
            39%;

        background: #fbf8f0;
    }


    .pv-hero-content {
        padding:
            18px
            0
            15px
            18px;
    }


    .pv-hero-kicker {
        max-width: 190px;

        margin-bottom: 6px;

        font-size: 8.5px;

        letter-spacing: 2.8px;
    }


    .pv-hero-title {
        width: 225px;

        font-size: 31px;

        line-height: .94;
    }


    .pv-hero-line {
        width: 34px;

        margin:
            8px
            0
            7px;
    }


    .pv-hero-description {
        width: 210px;

        margin-bottom: 10px;

        font-size: 11.5px;

        line-height: 1.25;
    }


    .pv-hero-button {
        width: 220px;

        min-height: 36px;

        padding:
            0
            13px;

        gap: 7px;

        font-size: 12px;

        position: relative;
        z-index: 3;
    }


    .pv-hero-button-icon {
        width: 18px;
        height: 18px;
    }


    .pv-hero-button-arrow {
        width: 14px;
        height: 14px;

        margin-left: auto;
    }


    .pv-hero-image {
        margin-left: -18px;
    }


    .pv-hero-image img {
        width: calc(100% + 18px);

        min-height: 205px;
        height: 205px;

        object-position:
            52%
            center;
    }


    .pv-hero-image::before {
        width: 62px;

        background:
            linear-gradient(
                90deg,
                rgba(251,248,240,1) 0%,
                rgba(251,248,240,.74) 42%,
                rgba(251,248,240,0) 100%
            );
    }

}