/* Isolated adaptation of the approved HOME hero for the Energy Solar page. */

.energia-home-hero .energia-solar-hero__equipamentos {
    grid-area: foto;
    position: relative;
    z-index: 9;
    isolation: isolate;
    width: min(100%, 720px);
    margin: clamp(14px, 3vw, 24px) auto 32px;
    pointer-events: none;
}

.energia-home-hero .energia-solar-hero__equipamentos::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 79%;
    right: 0;
    bottom: auto;
    left: 0;
    height: 29%;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse 72% 76% at 54% 8%,
            rgba(255, 164, 69, 0.18) 0%,
            rgba(58, 39, 24, 0.32) 30%,
            rgba(9, 13, 17, 0.54) 54%,
            rgba(2, 6, 10, 0.18) 72%,
            transparent 100%
        );
    transform: none;
    -webkit-mask-image: radial-gradient(
        ellipse 76% 100% at 52% 0%,
        #000 0%,
        rgba(0, 0, 0, 0.82) 38%,
        rgba(0, 0, 0, 0.28) 68%,
        transparent 100%
    );
    mask-image: radial-gradient(
        ellipse 76% 100% at 52% 0%,
        #000 0%,
        rgba(0, 0, 0, 0.82) 38%,
        rgba(0, 0, 0, 0.28) 68%,
        transparent 100%
    );
    filter: blur(2.2px);
}

.energia-home-hero .energia-solar-hero__equipamentos::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 86%;
    right: 4%;
    left: 4%;
    height: 13%;
    pointer-events: none;
    background:
        radial-gradient(ellipse 42% 38% at 53% 18%, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.48) 44%, transparent 74%),
        radial-gradient(ellipse 16% 36% at 39% 34%, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.34) 52%, transparent 80%),
        radial-gradient(ellipse 17% 34% at 65% 35%, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0.30) 54%, transparent 82%),
        radial-gradient(ellipse 17% 26% at 83% 54%, rgba(0, 0, 0, 0.76) 0%, rgba(0, 0, 0, 0.28) 56%, transparent 84%),
        radial-gradient(ellipse 24% 22% at 25% 62%, rgba(0, 0, 0, 0.70) 0%, rgba(0, 0, 0, 0.24) 58%, transparent 86%);
    filter: blur(4px);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.76) 46%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.76) 46%, transparent 100%);
}

.energia-home-hero .energia-solar-hero__equipamentos-reflexo {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    pointer-events: none;
    opacity: 0.36;
    object-fit: contain;
    transform: translateY(120%) scaleY(-0.28);
    transform-origin: center top;
    clip-path: inset(60% 0 0 0);
    filter:
        blur(1.2px)
        brightness(0.82)
        saturate(0.82)
        sepia(0.16);
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 60%,
        rgba(0, 0, 0, 0.18) 66%,
        rgba(0, 0, 0, 0.50) 75%,
        rgba(0, 0, 0, 0.82) 88%,
        #000 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 60%,
        rgba(0, 0, 0, 0.18) 66%,
        rgba(0, 0, 0, 0.50) 75%,
        rgba(0, 0, 0, 0.82) 88%,
        #000 100%
    );
}

.energia-home-hero .energia-solar-hero__equipamentos-imagem {
    position: relative;
    z-index: 3;
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

@media (min-width: 1021px) {
    .energia-home-hero .energia-solar-hero__equipamentos {
        --energia-equipamentos-deslocamento-x: clamp(
            12px,
            calc(11.1vw - 102px),
            72px
        );
        --energia-equipamentos-deslocamento-y: clamp(20px, 2vw, 30px);
        grid-area: auto;
        position: absolute;
        top: calc(
            clamp(42px, 6vh, 72px) +
            var(--energia-equipamentos-deslocamento-y)
        );
        right: calc(
            ((100% - 100vw) / 2) +
            var(--energia-equipamentos-deslocamento-x)
        );
        left: calc(
            52.5% -
            var(--energia-equipamentos-deslocamento-x)
        );
        width: auto;
        margin: 0;
    }

    .energia-home-hero [data-amj-editable="energia-hero-grid"] {
        margin-bottom: 0 !important;
        transform: none !important;
        transform-origin: initial !important;
    }

    .energia-home-hero [data-amj-editable="energia-hero-texto"] {
        --energia-hero-text-offset: clamp(
            0px,
            calc((65vh - 590px) * 0.438125),
            26.2875px
        );
        --energia-hero-text-narrow-offset: clamp(
            0px,
            calc((1280px - 100vw) * 0.0160645),
            4.1125px
        );
        transform: translateY(
            calc(
                -1 * (
                    var(--energia-hero-text-offset) +
                    var(--energia-hero-text-narrow-offset)
                )
            )
        ) !important;
    }

    .energia-home-hero [data-amj-editable="energia-hero-selo"],
    .energia-home-hero [data-amj-editable="energia-hero-titulo"],
    .energia-home-hero [data-amj-editable="energia-hero-subtitulo"],
    .energia-home-hero [data-amj-editable="energia-hero-botoes"] {
        transform: none !important;
        transform-origin: initial !important;
    }

}

@media (max-width: 1020px) {
    .energia-home-hero .energia-solar-hero__equipamentos::before {
        top: 82%;
        right: 1%;
        left: 1%;
        height: 20%;
        opacity: 0.78;
        filter: blur(1.4px);
    }

    .energia-home-hero .energia-solar-hero__equipamentos::after {
        top: 88%;
        right: 5%;
        left: 5%;
        height: 9%;
        opacity: 0.76;
        filter: blur(2.5px);
    }

    .energia-home-hero .energia-solar-hero__equipamentos-reflexo {
        opacity: 0.26;
        transform: translateY(117.5%) scaleY(-0.235);
        clip-path: inset(70% 0 0 0);
        filter:
            blur(0.9px)
            brightness(0.78)
            saturate(0.80)
            sepia(0.12);
        -webkit-mask-image: linear-gradient(
            to bottom,
            transparent 70%,
            rgba(0, 0, 0, 0.28) 80%,
            rgba(0, 0, 0, 0.72) 92%,
            #000 100%
        );
        mask-image: linear-gradient(
            to bottom,
            transparent 70%,
            rgba(0, 0, 0, 0.28) 80%,
            rgba(0, 0, 0, 0.72) 92%,
            #000 100%
        );
    }

    .energia-home-hero > .energia-home-hero__indicadores-home {
        position: relative;
        z-index: 5;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        width: auto;
        max-width: none;
        margin: 0 5% 24px;
        padding: 8px;
        gap: 0;
        color: #ffffff;
        background: linear-gradient(rgba(6, 10, 17, 0.72), rgba(1, 5, 10, 0.92));
        border: 1px solid rgba(255, 255, 255, 0.10);
        border-radius: 6px;
        box-shadow:
            0 24px 58px rgba(0, 0, 0, 0.22),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(18px);
    }

    .energia-home-hero .energia-home-hero__indicadores-home .numero-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        min-width: 0;
        min-height: 116px;
        height: 100%;
        padding: 10px 4px 8px;
        border: 0;
        border-right: 1px solid rgba(255, 255, 255, 0.13);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        text-align: center;
    }

    .energia-home-hero .energia-home-hero__indicadores-home .numero-item:last-child {
        border-right: 0;
    }

    .energia-home-hero .energia-home-hero__indicadores-home .numero-item > i {
        position: static;
        display: flex;
        flex: 0 0 clamp(28px, 9vw, 38px);
        align-items: center;
        justify-content: center;
        width: clamp(28px, 9vw, 38px);
        height: clamp(28px, 9vw, 38px);
        margin: 0 auto 5px;
        color: #ff8a00;
        background: transparent;
        transform: none;
        filter: none;
    }

    .energia-home-hero .energia-home-hero__indicadores-home .numero-item > i svg {
        display: block;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        fill: none;
        stroke: currentColor;
        filter:
            drop-shadow(0 0 2px rgba(255, 232, 184, 0.42))
            drop-shadow(0 0 8px rgba(255, 138, 0, 0.48))
            drop-shadow(0 0 16px rgba(255, 104, 0, 0.20));
    }

    .energia-home-hero .energia-home-hero__indicadores-home .numero-item > div {
        width: 100%;
        min-width: 0;
    }

    .energia-home-hero .energia-home-hero__indicadores-home .numero-item strong {
        display: block;
        margin: 0 0 5px;
        color: #ffffff;
        font-size: clamp(21px, 6.6vw, 27px);
        line-height: 1;
        white-space: nowrap;
    }

    .energia-home-hero .energia-home-hero__indicadores-home .numero-item span {
        display: block;
        color: rgba(255, 255, 255, 0.76);
        font-size: clamp(7.5px, 2.25vw, 9px);
        line-height: 1.16;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }
}

@media (max-width: 767.98px) {
    .energia-home-hero.hero-premium-dark {
        color: #ffffff;
        background-color: #03080d;
        background-image:
            radial-gradient(ellipse at 65% 35%, rgba(255, 172, 70, 0.34), transparent 22%),
            radial-gradient(ellipse at 58% 55%, rgba(255, 117, 20, 0.24), transparent 32%),
            radial-gradient(ellipse at 77% 18%, rgba(255, 128, 24, 0.14), transparent 22%),
            linear-gradient(90deg, rgba(0, 0, 0, 0.97) 0%, rgba(0, 0, 0, 0.79) 31%, rgba(0, 0, 0, 0.17) 57%, rgba(0, 0, 0, 0.69) 100%),
            linear-gradient(180deg, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0.02) 45%, rgba(0, 0, 0, 0.94) 100%),
            url("../img/fundo-solar-home.png");
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
    }

    .energia-home-hero .tag-hero {
        color: #ff9b18;
        background-color: rgba(7, 8, 12, 0.42);
        border-color: rgba(255, 138, 0, 0.54);
    }

    .energia-home-hero .hero-texto h1 {
        color: #ffffff;
    }

    .energia-home-hero .hero-texto p {
        color: rgba(255, 255, 255, 0.80);
    }

    .energia-home-hero .botao-secundario {
        color: #ffffff;
        background-color: rgba(0, 0, 0, 0.28);
        border-color: rgba(255, 255, 255, 0.30);
    }
}

@media (max-width: 359px) {
    .energia-home-hero > .energia-home-hero__indicadores-home {
        margin-inline: 5%;
        padding: 5px;
        gap: 3px;
    }

    .energia-home-hero .energia-home-hero__indicadores-home .numero-item {
        min-height: 114px;
        padding-inline: 2px;
    }
}