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

.hero {
    position: relative;

    height: calc(100vh - 85px);

    display: flex;
    align-items: center;

    overflow: hidden;

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


/* =========================================
   IMAGEN DE FONDO
========================================= */

.hero-background {
    position: absolute;

    inset: 0;

    z-index: 0;

    width: 100%;
    height: 100%;
}

.hero-background img {
    width: 100%;
    height: 100%;

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


/* =========================================
   OVERLAY
========================================= */

.hero-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(5, 20, 38, 0.94) 0%,
            rgba(5, 20, 38, 0.82) 38%,
            rgba(5, 20, 38, 0.35) 68%,
            rgba(5, 20, 38, 0.08) 100%
        );
}


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

.hero-container {
    position: relative;

    z-index: 2;

    width: 100%;

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

    display: flex;
    align-items: center;

    padding-left: 72px;
    padding-right: 72px;
}


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

.hero-content {
    width: min(680px, 100%);

    padding: 60px 0;
}


/* =========================================
   EYEBROW
========================================= */

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

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

    font-size: 0.8rem;
    font-weight: 700;

    letter-spacing: 0.12em;
}


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

.hero h1 {
    max-width: 650px;

    margin-bottom: 24px;

    font-size: clamp(3rem, 5.2vw, 5.8rem);

    font-weight: 700;

    line-height: 0.98;

    letter-spacing: -0.045em;
}


.hero h1 span {
    color: var(--color-accent-light);
}


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

.hero-description {
    max-width: 520px;

    margin-bottom: 34px;

    color: rgba(255, 255, 255, 0.88);

    font-size: 1rem;

    line-height: 1.7;
}


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

.hero-buttons {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 14px;

    margin-bottom: 55px;
}


.hero-buttons .btn {
    min-height: 52px;

    padding: 0 24px;
}


.hero-buttons .btn-secondary:hover {
    background-color:
        rgba(255, 255, 255, 0.12);
}


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

.hero-features {
    display: flex;
    align-items: flex-start;

    gap: 0;

    max-width: 850px;
}


.hero-feature {
    flex: 1;

    display: flex;
    align-items: flex-start;

    gap: 10px;

    padding-right: 22px;

    margin-right: 22px;

    border-right:
        1px solid
        rgba(255, 255, 255, 0.25);
}


.hero-feature:last-child {
    padding-right: 0;

    margin-right: 0;

    border-right: none;
}


.hero-feature i {
    margin-top: 2px;

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

    font-size: 1.1rem;
}


.hero-feature span {
    color: rgba(255, 255, 255, 0.88);

    font-size: 0.76rem;

    line-height: 1.45;
}
/* =========================================
   HERO RESPONSIVE - CELULARES
========================================= */

@media (max-width: 600px) {

    .hero {
        height: auto;
        min-height: calc(100svh - 75px);
    }

    .hero-container {
        min-height: auto;
        padding: 35px 24px;
        align-items: flex-start;
    }

    .hero-content {
        width: 100%;
        max-width: 100%;
        padding: 35px 0;
    }

    .hero h1 {
        width: 100%;
        max-width: 100%;
        font-size: clamp(2rem, 8.5vw, 2.8rem);
        line-height: 1.05;
        letter-spacing: -0.04em;
        overflow-wrap: break-word;
        margin-bottom: 22px;
    }

    .hero-description {
        max-width: 100%;
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 28px;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 35px;
    }

    .hero-buttons .btn {
        width: 100%;
        justify-content: center;
        text-align: center;
        padding: 12px 16px;
    }

    .hero-features {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 12px;
        width: 100%;
    }

    .hero-feature {
        margin-right: 0;
        padding-right: 8px;
        border-right: none;
    }

    .hero-feature span {
        font-size: 0.75rem;
    }
        /* Evitar que la imagen se estire en celulares */
    .hero-background img {
        object-fit: cover;
        object-position: 75% center;
    }
}