/* =========================================================
   BETY'S ELEC
   HERO PRINCIPAL
   DISEÑO BASADO EN EL BOCETO ORIGINAL
========================================================= */


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

.hero {

    position: relative;

    width: 100%;

    height: 458px;

    overflow: hidden;

    background:
        radial-gradient(
            ellipse 700px 420px at 78% 58%,
            rgba(188, 126, 8, 0.095),
            transparent 68%
        ),
        radial-gradient(
            ellipse 500px 350px at 20% 50%,
            rgba(180, 120, 0, 0.035),
            transparent 70%
        ),
        transparent;

    border-bottom:
        1px solid rgba(210, 158, 35, 0.20);

}


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

.hero-inner {

    position: relative;

    z-index: 3;

    width:
        min(
            calc(100% - 40px),
            var(--ancho-maximo)
        );

    height: 100%;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 47% 53%;

}


/* =========================================================
   IZQUIERDA
========================================================= */

.hero-left {

    position: relative;

    z-index: 10;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding-left: 50px;

    padding-bottom: 2px;

}


/* =========================================================
   ETIQUETA
========================================================= */

.hero-label {

    align-self: flex-start;

    display: flex;

    align-items: center;

    gap: 6px;

    padding:
        6px 10px;

    margin-bottom: 18px;

    border:
        1px solid rgba(205, 151, 25, 0.26);

    border-radius: 7px;

    background:
        rgba(191, 137, 19, 0.10);

    color: #f2be38;

    font-size: 9px;

    font-weight: 700;

}


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

.hero-title {

    margin: 0;

    font-size: 44px;

    line-height: 1.05;

    letter-spacing: -1.7px;

    font-weight: 800;

}


.hero-title-white {

    display: block;

    color: #ffffff;

}


.hero-title-gold {

    display: block;

    color: #eeb329;

}


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

.hero-text {

    width: 470px;

    max-width: 100%;

    margin-top: 17px;

    color: #d4d4d4;

    font-size: 14px;

    line-height: 1.55;

}


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

.hero-actions {

    display: flex;

    align-items: center;

    gap: 17px;

    margin-top: 24px;

}


.hero-btn {

    height: 43px;

    padding:
        0 22px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    border-radius: 6px;

    font-size: 13px;

    font-weight: 700;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;

}


.hero-btn:hover {

    transform:
        translateY(-2px);

}


/* Principal */

.hero-btn-main {

    min-width: 158px;

    color: #080808;

    background:
        linear-gradient(
            135deg,
            #f8ca45,
            #e8aa1b
        );

    box-shadow:
        0 7px 20px
        rgba(225, 163, 24, .15);

}


.hero-btn-main:hover {

    box-shadow:
        0 10px 26px
        rgba(225, 163, 24, .30);

}


.hero-btn-arrow {

    font-size: 20px;

    line-height: 1;

}


/* Secundario */

.hero-btn-outline {

    min-width: 160px;

    color: #ffffff;

    border:
        1px solid #b88312;

    background:
        rgba(0,0,0,.18);

}


.hero-btn-outline:hover {

    color: #f5c445;

    background:
        rgba(210,153,24,.07);

}


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

.hero-features {

    display: flex;

    align-items: center;

    margin-top: 42px;

}


.hero-feature {

    display: flex;

    align-items: center;

    gap: 7px;

}


.feature-icon {

    width: 27px;

    height: 27px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #e8af27;

    font-size: 19px;

}
/* =========================================================
    ICONOS DE BENEFICIOS
========================================================= */

.feature-svg {
    width: 22px;
    height: 22px;

    display: block;

    fill: none;

    stroke: #e8af27;

    stroke-width: 1.6;

    stroke-linecap: round;

    stroke-linejoin: round;

    flex-shrink: 0;
}


.feature-info {

    display: flex;

    flex-direction: column;

}


.feature-info strong {

    color: #eab22e;

    font-size: 10px;

    font-weight: 700;

    white-space: nowrap;

}


.feature-info small {

    margin-top: 3px;

    color: #a7a7a7;

    font-size: 8px;

    white-space: nowrap;

}


.feature-divider {

    width: 1px;

    height: 28px;

    margin:
        0 12px;

    background:
        rgba(221, 165, 31, .38);

}
/* =========================================================
   VISUAL DEL HERO — IMAGEN DE ELECTRODOMÉSTICOS
========================================================= */

.hero-showcase {
    grid-column: 2;

    position: relative;

    z-index: 2;

    width: 100%;
    height: 100%;

    min-width: 0;

    overflow: visible;

    pointer-events: none;
}


/* =========================================================
   IMAGEN PRINCIPAL
========================================================= */

.hero-showcase-image {
    position: absolute;

    z-index: 2;

    /*
     * global.css limita las imágenes a 100%.
     * Esta imagen necesita poder superar ese límite.
     */
    max-width: none;

    /*
     * Aumentamos el tamaño horizontal
     * sin forzar una altura artificial.
     */
    width: 140%;
    height: auto;

    /*
     * La mantenemos dentro de la columna derecha,
     * con un pequeño desplazamiento hacia la izquierda.
     */
    right: -5%;

    top: 50%;

    transform:
        translateY(-50%);

    display: block;

    /*
     * Conservamos la proporción original
     * de 1536 × 1024.
     */
    object-fit: contain;

    object-position:
        100% 50%;


    /*
     * Fusión progresiva con el fondo negro.
     * No crea ningún borde rectangular.
     */
    -webkit-mask-image:
        linear-gradient(
            to right,

            transparent 0%,

            rgba(0,0,0,.08) 10%,

            rgba(0,0,0,.45) 22%,

            rgba(0,0,0,.82) 34%,

            #000 46%,

            #000 100%
        );

    mask-image:
        linear-gradient(
            to right,

            transparent 0%,

            rgba(0,0,0,.08) 10%,

            rgba(0,0,0,.45) 22%,

            rgba(0,0,0,.82) 34%,

            #000 46%,

            #000 100%
        );


    filter:
        brightness(1.02)
        contrast(1.03)
        saturate(.96);
}


/* =========================================================
   LUZ DE INTEGRACIÓN
========================================================= */

.hero-showcase::after {
    content: "";

    position: absolute;

    z-index: 1;

    pointer-events: none;

    width: 96%;
    height: 90%;

    right: -2%;
    top: 5%;

    background:
        radial-gradient(
            ellipse at 66% 54%,

            rgba(212,167,44,.11) 0%,

            rgba(212,167,44,.05) 30%,

            rgba(212,167,44,.015) 55%,

            transparent 76%
        );

    filter:
        blur(24px);

    opacity:
        .85;
}
/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1150px) {

    .hero-inner {
        grid-template-columns:
            50% 50%;
    }

    .hero-title {
        font-size: 39px;
    }

    .hero-features {
        transform:
            scale(.90);

        transform-origin:
            left center;
    }

}


@media (max-width: 900px) {

    .hero {
        height: 570px;
    }

    .hero-inner {
        grid-template-columns:
            52% 48%;
    }

    .hero-left {
        padding-left: 10px;
    }

    .hero-title {
        font-size: 35px;
    }

    .hero-text {
        width: 400px;
    }

    .hero-features {
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 28px;
    }

    .feature-divider {
        display: none;
    }

}


@media (max-width: 700px) {

    .hero {
        height: auto;
        min-height: 0;
        overflow: hidden;
        padding-bottom: 24px;
    }

    .hero-inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width:
            calc(100% - 24px);
    }

    .hero-left {
        width: 100%;
        min-height: 0;
        padding:
            30px 0 0;
        align-items: center;
        text-align: center;
        box-sizing: border-box;
    }

    .hero-label {
        align-self: center;
        margin-bottom: 14px;
    }

    .hero-title {
        font-size:
            clamp(
                30px,
                8.8vw,
                36px
            );

        line-height: 1.04;
        letter-spacing: -1px;
    }

    .hero-text {
        width: 100%;
        max-width: 370px;
        margin-top: 15px;
        font-size: 13.5px;
        line-height: 1.55;
    }

    .hero-actions {
        width: 100%;
        margin-top: 20px;
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    .hero-btn {
        width:
            min(
                100%,
                280px
            );

        min-width: 0;
        height: 44px;
        box-sizing: border-box;
    }

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

        gap: 10px 8px;
        margin-top: 25px;
        transform: none;
        align-items: stretch;
        justify-content: initial;
    }

    .hero-feature {
        min-width: 0;
        gap: 7px;
        padding: 5px 3px;
        align-items: center;
    }

    .feature-divider {
        display: none;
    }

    .feature-icon {
        width: 25px;
        height: 25px;
        flex:
            0 0 25px;
    }

    .feature-svg {
        width: 20px;
        height: 20px;
    }

    .feature-info {
        min-width: 0;
        text-align: left;
    }

    .feature-info strong {
        font-size: 9px;
        line-height: 1.2;
        white-space: normal;
    }

    .feature-info small {
        font-size: 8px;
        line-height: 1.2;
        white-space: normal;
    }

    .hero-showcase {
        grid-column: auto;
        width: 100%;
        height: 245px;
        min-width: 0;
        margin-top: 4px;
        overflow: visible;
    }

    .hero-showcase-image {
        width: 118%;
        right: -9%;
        top: 50%;
        transform:
            translateY(-43%);
    }

}


@media (max-width: 430px) {

    .hero {
        padding-bottom: 18px;
    }

    .hero-inner {
        width:
            calc(100% - 20px);
    }

    .hero-left {
        padding-top: 26px;
    }

    .hero-title {
        font-size:
            clamp(
                28px,
                8.6vw,
                32px
            );
    }

    .hero-text {
        max-width: 350px;
        font-size: 13px;
    }

    .hero-actions {
        margin-top: 18px;
    }

    .hero-btn {
        max-width: 270px;
    }

    .hero-features {
        gap: 8px 6px;
        margin-top: 22px;
    }

    .hero-feature {
        padding: 4px 1px;
    }

    .feature-icon {
        width: 23px;
        height: 23px;
        flex:
            0 0 23px;
    }

    .feature-svg {
        width: 18px;
        height: 18px;
    }

    .feature-info strong {
        font-size: 8.5px;
    }

    .feature-info small {
        font-size: 7.5px;
    }

    .hero-showcase {
        height: 215px;
        margin-top: 2px;
    }

    .hero-showcase-image {
        width: 120%;
        right: -10%;
        transform:
            translateY(-42%);
    }

}


@media (max-width: 360px) {

    .hero-title {
        font-size: 27px;
    }

    .hero-text {
        font-size: 12.5px;
    }

    .hero-btn {
        max-width: 250px;
    }

    .hero-showcase {
        height: 190px;
    }

}