/* ==========================================================
   HERO SECTION
========================================================== */

.hero-section {
    position: relative;
    isolation: isolate;

    display: grid;
    grid-template-columns: 49% 51%;

    width: 100%;
    min-height: calc(100vh - var(--header-height));

    background-color: var(--color-white);

    overflow: hidden;
}


/* ==========================================================
   HERO CONTENT
========================================================== */

.hero-content-wrapper {
    position: relative;
    z-index: 5;

    display: flex;
    align-items: center;

    min-width: 0;

    padding:
        clamp(64px, 7vh, 105px) 32px clamp(58px, 7vh, 96px) var(--container-padding);
}

.hero-content {
    width: 100%;
    max-width: 720px;
}

.hero-eyebrow {
    margin: 0 0 26px;

    color: var(--color-primary);

    font-size: clamp(12px, 0.95vw, 17px);
    font-weight: var(--font-extrabold);
    line-height: 1.5;
    letter-spacing: 0.4px;
}

.hero-eyebrow span {
    margin-inline: 4px;
}

.hero-title {
    margin: 0;

    color: var(--color-black);

    font-size: clamp(46px, 4.25vw, 82px);
    font-weight: var(--font-bold);
    line-height: 1.08;
    letter-spacing: -3.2px;
}

.hero-description {
    max-width: 660px;
    margin: 24px 0 0;

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

    font-size: clamp(15px, 1vw, 18px);
    font-weight: var(--font-regular);
    line-height: 1.65;
}


/* ==========================================================
   HERO BUTTONS
========================================================== */

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;

    margin-top: 32px;
}

.hero-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    min-width: 224px;
    padding-inline: 34px 22px;
}

.hero-button svg {
    width: 22px;
    height: 22px;
}

.hero-button-whatsapp {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    display: block;
    transform: translateX(-6px);
    transition: transform 160ms ease, filter 160ms ease;
    filter: brightness(0) invert(1);
}

@media (max-width: 520px) {
    .hero-button-whatsapp {
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        transform: translateX(-4px);
    }
}


/* ==========================================================
   HERO FEATURES
========================================================== */

.hero-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 20px;

    max-width: 700px;
    margin-top: clamp(48px, 6vh, 72px);
}

.hero-feature {
    display: flex;
    align-items: center;
    gap: 13px;

    min-width: 0;
}

.hero-feature-icon {
    flex: 0 0 auto;

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

    width: 39px;
    height: 39px;

    color: var(--color-black);
}

.hero-feature-icon svg {
    width: 100%;
    height: 100%;
}

.hero-feature p {
    margin: 0;

    color: var(--color-black);

    font-size: clamp(11px, 0.75vw, 14px);
    font-weight: var(--font-medium);
    line-height: 1.55;
}


/* ==========================================================
   HERO MEDIA
========================================================== */

.hero-media {
    position: relative;
    z-index: 1;

    min-width: 0;
    min-height: 100%;

    background-color: #eeeeec;

    overflow: hidden;
}

.hero-image {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* ==========================================================
   HERO RED CHEVRON
========================================================== */

.hero-chevron {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 49%;
    z-index: 2;

    width: clamp(155px, 14vw, 275px);

    background:
        linear-gradient(145deg,
            #ef0015 0%,
            var(--color-primary) 47%,
            #be0012 100%);

    clip-path: polygon(0 0,
            35% 0,
            100% 50%,
            35% 100%,
            0 100%,
            65% 50%);

    pointer-events: none;
    transform: none;
}


/* ==========================================================
   LARGE DESKTOP
========================================================== */

@media (min-width: 1700px) {
    .hero-content {
        max-width: 760px;
    }

    .hero-features {
        max-width: 740px;
    }
}


/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width: 1440px) {
    .hero-content-wrapper {
        padding-right: 24px;
    }

    .hero-title {
        letter-spacing: -2.5px;
    }

    .hero-features {
        gap: 14px;
    }

    .hero-feature {
        gap: 9px;
    }

    .hero-feature-icon {
        width: 34px;
        height: 34px;
    }
}


/* ==========================================================
   SMALL LAPTOP
========================================================== */

@media (max-width: 1150px) {
    .hero-section {
        grid-template-columns: 54% 46%;
    }

    .hero-chevron {
        left: 54%;
        width: 180px;
    }

    .hero-title {
        font-size: clamp(43px, 5vw, 62px);
    }

    .hero-features {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
        max-width: 480px;
    }
}


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

@media (max-width: 900px) {
    .hero-section {
        display: flex;
        flex-direction: column;

        min-height: auto;
    }

    .hero-content-wrapper {
        order: 1;

        min-height: auto;

        padding:
            70px var(--container-padding) 70px;
    }

    .hero-content {
        max-width: 700px;
    }

    .hero-title {
        font-size: clamp(45px, 8vw, 68px);
    }

    .hero-description {
        max-width: 630px;
    }

    .hero-media {
        order: 2;

        width: 100%;
        min-height: 430px;
    }

    .hero-chevron {
        display: none;
    }

    .hero-content-wrapper::after {
        position: absolute;
        right: var(--container-padding);
        bottom: 0;
        left: var(--container-padding);

        height: 8px;

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

        content: "";
    }
}


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

@media (max-width: 640px) {
    .hero-content-wrapper {
        padding-top: 56px;
        padding-bottom: 58px;
    }

    .hero-eyebrow {
        margin-bottom: 20px;

        font-size: 11px;
        line-height: 1.8;
    }

    .hero-title {
        font-size: clamp(38px, 12vw, 52px);
        line-height: 1.12;
        letter-spacing: -2px;
    }

    .hero-description {
        margin-top: 22px;

        font-size: 14px;
        line-height: 1.7;
    }

    .hero-actions {
        flex-direction: column;
        gap: 14px;

        margin-top: 28px;
    }

    .hero-button {
        width: 100%;
        min-width: 0;
        min-height: 56px;
    }

    .hero-features {
        grid-template-columns: 1fr 1fr;
        gap: 26px 18px;

        margin-top: 48px;
    }

    .hero-feature {
        align-items: flex-start;
    }

    .hero-feature-icon {
        width: 32px;
        height: 32px;
    }

    .hero-feature p {
        font-size: 11px;
    }

    .hero-media {
        min-height: 290px;
    }
}


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

@media (max-width: 390px) {
    .hero-title {
        font-size: 36px;
    }

    .hero-features {
        grid-template-columns: 1fr;
    }

    .hero-feature p br {
        display: none;
    }
}