/* =========================================================
   AMJ SITE - STYLE REFATORADO LIMPO
   Desktop e mobile separados para não quebrarem um ao outro.
========================================================= */

/* 1. BASE */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --azul-escuro: #020b14;
    --azul-fundo: #06111f;
    --azul-card: #071322;
    --laranja: #ff8a00;
    --laranja-claro: #ffae32;
    --verde: #25d366;
    --branco: #ffffff;
    --texto-escuro: #111827;
    --texto-suave: #4b5563;
    --cinza-claro: #d8dde6;
    --cinza-medio: #9da7b6;
    --borda-clara: #e5e7eb;
    --sombra-premium: 0 26px 70px rgba(15, 23, 42, 0.12);
    --sombra-suave: 0 18px 46px rgba(15, 23, 42, 0.09);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #ffffff;
    color: var(--texto-escuro);
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

/* 2. HEADER DESKTOP */

.topo-site {
    width: 100%;
    min-height: 88px;
    padding: 0 5.2%;
    background: rgba(255, 255, 255, 0.86);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.05);
    transition: min-height 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

body.amj-scroll-ativo .topo-site {
    min-height: 76px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 14px 42px rgba(15, 23, 42, 0.08);
}

.logo-area a {
    display: flex;
    align-items: center;
}

.logo-img {
    width: 210px;
    height: auto;
    object-fit: contain;
}

.menu-site {
    display: flex;
    align-items: center;
    gap: 28px;
}

.menu-site a {
    position: relative;
    color: #111827;
    font-weight: 900;
    font-size: 15px;
    white-space: nowrap;
    transition: color 0.25s ease, transform 0.25s ease;
}

.menu-site a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 0;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--laranja), var(--laranja-claro));
    transition: width 0.25s ease;
}

.menu-site a:hover {
    color: var(--laranja);
    transform: translateY(-1px);
}

.menu-site a:hover::after {
    width: 100%;
}

.menu-contato {
    border: 1px solid var(--laranja);
    padding: 13px 23px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.52);
}

.menu-contato:hover {
    background: var(--laranja);
    color: #ffffff !important;
}

.acoes-mobile-site {
    display: none;
}

/* 3. BOTÕES */

.botao-principal,
.botao-secundario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 14px 26px;
    border-radius: 14px;
    font-weight: 900;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, color 0.22s ease;
}

.botao-principal {
    color: #ffffff;
    background: linear-gradient(135deg, var(--laranja), var(--laranja-claro));
    box-shadow: 0 18px 42px rgba(255, 138, 0, 0.32);
}

.botao-principal::after {
    content: "→";
    margin-left: 12px;
    font-size: 20px;
    line-height: 1;
}

.botao-secundario {
    color: #111827;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(15, 23, 42, 0.14);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(14px);
}

.botao-secundario::before {
    content: "◉";
    margin-right: 10px;
    font-size: 14px;
}

.botao-principal:hover,
.botao-secundario:hover {
    transform: translateY(-2px);
}

/* 4. HERO DESKTOP */

.hero-premium {
    position: relative;
    min-height: 660px;
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.97) 0%,
            rgba(255,255,255,0.90) 31%,
            rgba(255,255,255,0.50) 56%,
            rgba(255,255,255,0.10) 100%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,0) 0%,
            rgba(2,11,20,0.12) 72%,
            rgba(2,11,20,0.58) 100%
        ),
        url("../img/fundo-solar-home.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.hero-premium::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(circle at 78% 48%, rgba(255,138,0,0.28), transparent 34%),
        radial-gradient(circle at 12% 38%, rgba(255,138,0,0.14), transparent 30%);
}

.hero-luz {
    position: absolute;
    border-radius: 999px;
    filter: blur(28px);
    pointer-events: none;
    z-index: 2;
}

.hero-luz-1 {
    width: 380px;
    height: 380px;
    left: -170px;
    top: 160px;
    background: rgba(255, 138, 0, 0.14);
}

.hero-luz-2 {
    width: 460px;
    height: 460px;
    right: 8%;
    bottom: -210px;
    background: rgba(255, 138, 0, 0.12);
}

.hero-container {
    position: relative;
    z-index: 5;
    width: 100%;
    min-height: 660px;
    padding: 34px 5.2% 0;
    display: grid;
    grid-template-columns: minmax(0, 53%) minmax(430px, 47%);
    grid-template-areas:
        "texto foto"
        "info foto";
    gap: 0 28px;
    align-items: end;
}

.hero-texto {
    grid-area: texto;
    align-self: center;
    max-width: 730px;
    padding-bottom: 20px;
    position: relative;
    z-index: 9;
}

.tag-hero {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    color: var(--laranja);
    background: rgba(255, 255, 255, 0.70);
    border: 1px solid rgba(255, 138, 0, 0.15);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.hero-texto h1 {
    max-width: 720px;
    font-size: clamp(38px, 3.25vw, 54px);
    line-height: 1.045;
    letter-spacing: -1.5px;
    margin-bottom: 16px;
    color: #10151f;
    font-weight: 900;
}

.hero-texto h1 strong {
    display: block;
    color: var(--laranja);
    font-weight: 900;
}

.hero-texto p {
    max-width: 690px;
    color: #2f3742;
    font-size: 16.5px;
    line-height: 1.58;
    margin-bottom: 20px;
    font-weight: 500;
}

.hero-botoes {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.hero-foto-home {
    grid-area: foto;
    min-height: 660px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    position: relative;
    z-index: 8;
    overflow: visible;
}

.hero-foto-home img {
    width: auto;
    height: 650px;
    max-width: none;
    object-fit: contain;
    object-position: bottom center;
    filter: drop-shadow(-22px 28px 34px rgba(0, 0, 0, 0.32));
    transform: translateX(-10px) translateY(calc(10px + var(--hero-y, 0px)));
    transition: transform 0.2s ease-out;
}

.hero-mini-info {
    grid-area: info;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 720px;
    min-height: 92px;
    margin-bottom: 22px;
    background: rgba(2, 11, 20, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    overflow: hidden;
    backdrop-filter: blur(18px);
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.28);
    position: relative;
    z-index: 10;
}

.hero-mini-info div {
    position: relative;
    min-height: 92px;
    padding: 19px 18px 18px 72px;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.hero-mini-info div:last-child {
    border-right: none;
}

.hero-mini-info div::before {
    content: "";
    position: absolute;
    left: 24px;
    top: 50%;
    width: 32px;
    height: 32px;
    transform: translateY(-50%);
    background: var(--laranja);
    border-radius: 50%;
    box-shadow: 0 0 22px rgba(255, 138, 0, 0.28);
}

.hero-mini-info span {
    display: block;
    color: rgba(255, 255, 255, 0.66);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 4px;
}

.hero-mini-info strong {
    display: block;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 900;
}

/* 5. SEÇÕES */

.secao,
.secao-especialidades-home {
    padding: 72px 5.2%;
}

.secao-clara,
.secao-especialidades-home {
    background: #ffffff;
    color: var(--texto-escuro);
}

.titulo-secao {
    max-width: 940px;
    margin-bottom: 38px;
}

.titulo-secao span {
    display: inline-block;
    color: var(--laranja);
    background: rgba(255, 138, 0, 0.08);
    border: 1px solid rgba(255, 138, 0, 0.12);
    border-radius: 999px;
    padding: 7px 11px;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 12px;
}

.titulo-secao h2 {
    font-size: clamp(32px, 3vw, 46px);
    line-height: 1.08;
    letter-spacing: -1.2px;
    margin-bottom: 16px;
    color: #111827;
}

.titulo-secao p {
    color: var(--texto-suave);
    font-size: 18px;
}

.titulo-escuro h2,
.titulo-escuro p {
    color: #ffffff;
}

.titulo-escuro p {
    color: var(--cinza-claro);
}

/* 6. ESPECIALIDADES */

.grade-especialidades-home {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.grade-especialidades-home article {
    background:
        radial-gradient(circle at 15% 0%, rgba(255,138,0,.045), transparent 32%),
        linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 28px 24px;
    box-shadow: var(--sombra-suave);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.grade-especialidades-home article:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 138, 0, 0.28);
    box-shadow: var(--sombra-premium);
}

.grade-especialidades-home article span,
.icone-card {
    font-size: 0;
}

.grade-especialidades-home article span::before,
.icone-card::before {
    content: "";
    display: block;
    width: 36px;
    height: 36px;
    background: var(--laranja);
    border-radius: 50%;
    box-shadow: 0 0 24px rgba(255, 138, 0, 0.20);
}

.grade-especialidades-home article h3 {
    font-size: 20px;
    line-height: 1.2;
    color: #111827;
    margin: 16px 0 10px;
}

.grade-especialidades-home article p {
    color: var(--texto-suave);
    font-size: 15px;
    line-height: 1.55;
}

/* 7. NÚMEROS */

.faixa-numeros {
    background:
        radial-gradient(circle at 12% 0%, rgba(255,138,0,.06), transparent 34%),
        linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    color: #111827;
    padding: 38px 5.2%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.numero-item {
    text-align: center;
    background: rgba(255, 255, 255, 0.80);
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 18px;
    padding: 24px 16px;
    box-shadow: var(--sombra-suave);
}

.numero-item strong {
    display: block;
    font-size: 42px;
    line-height: 1;
    color: var(--laranja);
    margin-bottom: 10px;
}

.numero-item span {
    color: #374151;
    font-size: 14px;
    font-weight: 900;
}

/* 8. SERVIÇOS */

.grade-servicos-premium {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 22px;
}

.card-servico-imagem {
    background: #ffffff;
    border: 1px solid #dfe5ee;
    border-radius: 20px;
    overflow: hidden;
    text-align: center;
    box-shadow: var(--sombra-premium);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.card-servico-imagem:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 138, 0, 0.32);
    box-shadow: 0 28px 62px rgba(15, 23, 42, 0.16);
}

.card-img {
    height: 150px;
    background-size: cover;
    background-position: center;
    background-color: #dbe4ef;
    transition: transform 0.35s ease;
}

.card-servico-imagem:hover .card-img {
    transform: scale(1.04);
}

.card-img-solar { background-image: url("../img/servico-solar.jpg"); }
.card-img-engenharia { background-image: url("../img/servico-engenharia.jpg"); }
.card-img-regularizacao { background-image: url("../img/servico-regularizacao.jpg"); }
.card-img-laudos { background-image: url("../img/servico-laudo.jpg"); }
.card-img-entrada { background-image: url("../img/servico-entrada.jpg"); }

.icone-card {
    width: 58px;
    height: 58px;
    margin: -29px auto 15px;
    background: #ffffff;
    border-radius: 50%;
    border: 1px solid #e6ebf2;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12);
    position: relative;
}

.icone-card::before {
    width: 28px;
    height: 28px;
}

.card-servico-imagem h3 {
    font-size: 19px;
    line-height: 1.2;
    padding: 0 16px;
    margin-bottom: 11px;
    color: #111827;
}

.card-servico-imagem p {
    color: var(--texto-suave);
    font-size: 14px;
    padding: 0 16px 18px;
}

.card-servico-imagem a {
    display: inline-block;
    margin-bottom: 22px;
    color: var(--laranja);
    font-weight: 900;
}

/* 9. CASES */

.cases-reais {
    background:
        radial-gradient(circle at top left, rgba(255, 138, 0, 0.13), transparent 30%),
        linear-gradient(135deg, #07111f 0%, #020b14 100%);
}

.grade-cases {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.case-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.22);
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.case-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 138, 0, 0.34);
}

.case-imagem {
    min-height: 210px;
    background-size: cover;
    background-position: center;
    background-color: #111827;
}

.case-projeto { background-image: url("../img/servico-regularizacao.jpg"); }
.case-multa { background-image: url("../img/servico-entrada.jpg"); }
.case-baixa-geracao { background-image: url("../img/servico-solar.jpg"); }

.case-conteudo {
    padding: 24px;
}

.case-conteudo span {
    color: var(--laranja);
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.case-conteudo h3 {
    margin: 10px 0;
    font-size: 22px;
    line-height: 1.25;
    color: #ffffff;
}

.case-conteudo p {
    color: var(--cinza-claro);
    font-size: 15px;
    margin-bottom: 16px;
}

.case-conteudo a {
    color: var(--laranja);
    font-weight: 900;
}

/* 10. CTA E RODAPÉ */

.cta-premium {
    background: #020b14;
    padding-top: 0;
}

.cta-box {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04)),
        linear-gradient(135deg, rgba(13, 25, 41, 0.98), rgba(7, 17, 31, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 22px;
    padding: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 28px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.26);
}

.cta-box span {
    color: var(--laranja);
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 2px;
    font-size: 12px;
}

.cta-box h2 {
    font-size: 34px;
    line-height: 1.15;
    margin: 8px 0;
    color: #ffffff;
}

.cta-box p {
    color: var(--cinza-claro);
}

.botao-whatsapp-fixo {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1500;
    background: linear-gradient(135deg, #22c55e, #25d366);
    color: var(--branco);
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 16px 36px rgba(37, 211, 102, 0.28);
}

.rodape-site {
    background: #020812;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 46px 5.2%;
    text-align: center;
}

.logo-rodape {
    height: 82px;
    width: auto;
    margin: 0 auto 18px;
}

.rodape-conteudo p {
    color: var(--cinza-medio);
    margin-bottom: 8px;
}

/* 11. ANIMAÇÕES */

.reveal {
    opacity: 0;
    transform: translateY(42px);
    filter: blur(6px);
    transition:
        opacity 0.85s cubic-bezier(.16, 1, .3, 1),
        transform 0.85s cubic-bezier(.16, 1, .3, 1),
        filter 0.85s cubic-bezier(.16, 1, .3, 1);
    will-change: transform, opacity, filter;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.numero-finalizado {
    animation: numeroPulse 0.48s ease both;
}

@keyframes numeroPulse {
    0% { transform: scale(1); }
    55% { transform: scale(1.06); }
    100% { transform: scale(1); }
}

/* 12. PÁGINAS INTERNAS */

.pagina-topo {
    padding: 88px 5.2% 64px;
    background:
        radial-gradient(circle at top left, rgba(255, 138, 0, 0.16), transparent 30%),
        linear-gradient(135deg, #07111f 0%, #020b14 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.pagina-topo h1 {
    font-size: clamp(34px, 4.4vw, 58px);
    line-height: 1.08;
    max-width: 980px;
    margin-bottom: 22px;
    color: #ffffff;
}

.pagina-topo p {
    color: var(--cinza-claro);
    font-size: 20px;
    max-width: 930px;
}

.grade-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.card-servico {
    background: linear-gradient(180deg, #142033, #0d1929);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    padding: 26px;
    min-height: 220px;
}

.card-servico h3 {
    font-size: 23px;
    margin-bottom: 12px;
    color: #ffffff;
}

.card-servico p {
    color: var(--cinza-claro);
    margin-bottom: 18px;
}

.card-servico a {
    color: var(--laranja);
    font-weight: 900;
}

.destaque-escuro {
    background: #07111f;
}

.cta-final {
    text-align: center;
    max-width: 980px;
    margin: 0 auto;
}

.cta-final h2 {
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.15;
    margin-bottom: 16px;
    color: #ffffff;
}

.cta-final p {
    color: var(--cinza-claro);
    font-size: 19px;
    margin-bottom: 24px;
}


/* =========================================================
   13. AJUSTE PREMIUM SOMENTE DESKTOP
   Tudo abaixo fica restrito ao desktop para não alterar mobile.
========================================================= */

@media (min-width: 1021px) {
    .topo-site {
        min-height: 86px;
    }

    .hero-premium {
        min-height: 680px;
    }

    .hero-container {
        min-height: 680px;
        padding-top: 28px;
        grid-template-columns: minmax(0, 52%) minmax(430px, 48%);
        gap: 0 34px;
    }

    .hero-texto {
        padding-bottom: 30px;
    }

    .hero-texto h1 {
        text-wrap: balance;
    }

    .hero-texto p {
        max-width: 665px;
    }

    .hero-foto-home img {
        height: 660px;
        transform: translateX(-18px) translateY(calc(8px + var(--hero-y, 0px)));
        filter:
            drop-shadow(-24px 32px 36px rgba(0, 0, 0, 0.34))
            drop-shadow(0 0 22px rgba(255, 138, 0, 0.08));
    }

    .hero-mini-info {
        max-width: 740px;
        min-height: 102px;
        margin-bottom: 24px;
        border-radius: 18px;
        background:
            radial-gradient(circle at 12% 0%, rgba(255, 138, 0, 0.13), transparent 34%),
            linear-gradient(135deg, rgba(2, 11, 20, 0.91), rgba(7, 19, 34, 0.88));
        border: 1px solid rgba(255, 255, 255, 0.18);
        box-shadow: 0 30px 76px rgba(0, 0, 0, 0.32);
    }

    .hero-mini-info div {
        min-height: 102px;
        padding: 21px 18px 18px 76px;
        transition: background 0.25s ease, transform 0.25s ease;
    }

    .hero-mini-info div:hover {
        background: rgba(255, 255, 255, 0.045);
    }

    .hero-mini-info div::before {
        left: 22px;
        width: 38px;
        height: 38px;
        border-radius: 14px;
        background:
            linear-gradient(135deg, rgba(255, 174, 50, 0.98), rgba(255, 138, 0, 0.98));
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.14) inset,
            0 12px 28px rgba(255, 138, 0, 0.26);
    }

    .hero-mini-info div::after {
        content: "";
        position: absolute;
        left: 31px;
        top: 50%;
        width: 20px;
        height: 20px;
        transform: translateY(-50%);
        background: #ffffff;
        z-index: 2;
        pointer-events: none;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    .hero-mini-info div:nth-child(1)::after {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5.3v5.9c0 5.1 3.4 9.9 8 11 4.6-1.1 8-5.9 8-11V5.3L12 2Zm1 15h-2v-2h2v2Zm0-4h-2V7h2v6Z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5.3v5.9c0 5.1 3.4 9.9 8 11 4.6-1.1 8-5.9 8-11V5.3L12 2Zm1 15h-2v-2h2v2Zm0-4h-2V7h2v6Z'/%3E%3C/svg%3E");
    }

    .hero-mini-info div:nth-child(2)::after {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5Z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5Z'/%3E%3C/svg%3E");
    }

    .hero-mini-info div:nth-child(3)::after {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2 3 14h8l-1 8 11-14h-8l1-6Z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2 3 14h8l-1 8 11-14h-8l1-6Z'/%3E%3C/svg%3E");
    }

    .hero-mini-info span {
        font-size: 12px;
        letter-spacing: 0.2px;
    }

    .hero-mini-info strong {
        font-size: 14.5px;
    }

    .botao-principal,
    .botao-secundario,
    .menu-contato,
    .botao-whatsapp-fixo {
        position: relative;
        overflow: hidden;
    }

    .botao-principal::before,
    .botao-secundario::after,
    .menu-contato::before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: 0;
        background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.38) 42%, transparent 72%);
        transform: translateX(-120%);
        transition: transform 0.48s ease, opacity 0.48s ease;
        pointer-events: none;
    }

    .botao-principal:hover::before,
    .botao-secundario:hover::after,
    .menu-contato:hover::before {
        opacity: 1;
        transform: translateX(120%);
    }

    .botao-principal:hover {
        box-shadow: 0 24px 52px rgba(255, 138, 0, 0.38);
    }

    .botao-secundario {
        background: rgba(255, 255, 255, 0.82);
    }

    .botao-secundario::before {
        content: "";
        width: 17px;
        height: 17px;
        margin-right: 10px;
        background: var(--laranja);
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.5 3.5A11.8 11.8 0 0 0 12.1 0C5.4 0 .1 5.2.1 11.6c0 2 .6 4 1.6 5.8L0 24l6.9-1.8a12.4 12.4 0 0 0 5.2 1.1c6.7 0 12-5.2 12-11.6 0-3.1-1.3-6-3.6-8.2ZM12.1 21.3c-1.7 0-3.3-.4-4.7-1.2l-.3-.2-4.1 1.1 1.1-3.9-.3-.4a9.2 9.2 0 0 1-1.5-5.1c0-5.2 4.4-9.5 9.8-9.5 2.6 0 5.1 1 6.9 2.8a9.2 9.2 0 0 1 2.9 6.7c0 5.3-4.4 9.7-9.8 9.7Zm5.4-7.2c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.7.2-.2.3-.8.9-1 .1-.2.2-.4.2-.7.1-.4-.2-1.4-.5-2.6-1.6-1-.8-1.6-1.9-1.8-2.2-.2-.3 0-.5.1-.6l.5-.6c.2-.2.2-.3.3-.5.1-.2 0-.4 0-.6l-.9-2c-.2-.5-.5-.4-.7-.4h-.6c-.2 0-.6.1-.9.4-.3.3-1.2 1.1-1.2 2.8s1.2 3.2 1.4 3.5c.2.3 2.4 3.7 5.9 5.1.8.3 1.5.5 2 .7.8.3 1.6.2 2.2.1.7-.1 1.7-.7 1.9-1.4.2-.7.2-1.3.2-1.4-.1-.2-.3-.2-.6-.4Z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.5 3.5A11.8 11.8 0 0 0 12.1 0C5.4 0 .1 5.2.1 11.6c0 2 .6 4 1.6 5.8L0 24l6.9-1.8a12.4 12.4 0 0 0 5.2 1.1c6.7 0 12-5.2 12-11.6 0-3.1-1.3-6-3.6-8.2ZM12.1 21.3c-1.7 0-3.3-.4-4.7-1.2l-.3-.2-4.1 1.1 1.1-3.9-.3-.4a9.2 9.2 0 0 1-1.5-5.1c0-5.2 4.4-9.5 9.8-9.5 2.6 0 5.1 1 6.9 2.8a9.2 9.2 0 0 1 2.9 6.7c0 5.3-4.4 9.7-9.8 9.7Zm5.4-7.2c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.7.2-.2.3-.8.9-1 .1-.2.2-.4.2-.7.1-.4-.2-1.4-.5-2.6-1.6-1-.8-1.6-1.9-1.8-2.2-.2-.3 0-.5.1-.6l.5-.6c.2-.2.2-.3.3-.5.1-.2 0-.4 0-.6l-.9-2c-.2-.5-.5-.4-.7-.4h-.6c-.2 0-.6.1-.9.4-.3.3-1.2 1.1-1.2 2.8s1.2 3.2 1.4 3.5c.2.3 2.4 3.7 5.9 5.1.8.3 1.5.5 2 .7.8.3 1.6.2 2.2.1.7-.1 1.7-.7 1.9-1.4.2-.7.2-1.3.2-1.4-.1-.2-.3-.2-.6-.4Z'/%3E%3C/svg%3E");
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
        flex: 0 0 auto;
    }

    .grade-especialidades-home article span,
    .icone-card {
        position: relative;
        font-size: 0;
    }

    .grade-especialidades-home article span::before,
    .icone-card::before {
        border-radius: 16px;
        background:
            linear-gradient(135deg, rgba(255, 174, 50, 0.96), rgba(255, 138, 0, 0.96));
        box-shadow:
            0 12px 28px rgba(255, 138, 0, 0.18),
            0 0 0 1px rgba(255, 255, 255, 0.52) inset;
    }

    .grade-especialidades-home article span::after,
    .icone-card::after {
        content: "";
        position: absolute;
        background: #ffffff;
        pointer-events: none;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    .grade-especialidades-home article span::after {
        left: 8px;
        top: 8px;
        width: 20px;
        height: 20px;
    }

    .icone-card::after {
        left: 50%;
        top: 50%;
        width: 22px;
        height: 22px;
        transform: translate(-50%, -50%);
    }

    .grade-especialidades-home article:nth-child(1) span::after,
    .card-servico-imagem:nth-child(1) .icone-card::after {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 2 7l10 5 10-5-10-5Zm-7 9v5.2c0 1 3.2 3.8 7 3.8s7-2.8 7-3.8V11l-7 3.5L5 11Z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 2 7l10 5 10-5-10-5Zm-7 9v5.2c0 1 3.2 3.8 7 3.8s7-2.8 7-3.8V11l-7 3.5L5 11Z'/%3E%3C/svg%3E");
    }

    .grade-especialidades-home article:nth-child(2) span::after,
    .card-servico-imagem:nth-child(2) .icone-card::after {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 3h16v4H4V3Zm1 6h14v12H5V9Zm3 2v2h8v-2H8Zm0 4v2h5v-2H8Z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 3h16v4H4V3Zm1 6h14v12H5V9Zm3 2v2h8v-2H8Zm0 4v2h5v-2H8Z'/%3E%3C/svg%3E");
    }

    .grade-especialidades-home article:nth-child(3) span::after,
    .card-servico-imagem:nth-child(3) .icone-card::after {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5.3v5.9c0 5.1 3.4 9.9 8 11 4.6-1.1 8-5.9 8-11V5.3L12 2Zm-1 14.5-3.3-3.3 1.4-1.4 1.9 1.9 4.5-4.5 1.4 1.4-5.9 5.9Z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5.3v5.9c0 5.1 3.4 9.9 8 11 4.6-1.1 8-5.9 8-11V5.3L12 2Zm-1 14.5-3.3-3.3 1.4-1.4 1.9 1.9 4.5-4.5 1.4 1.4-5.9 5.9Z'/%3E%3C/svg%3E");
    }

    .grade-especialidades-home article:nth-child(4) span::after,
    .card-servico-imagem:nth-child(4) .icone-card::after {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 1 3 5v6c0 5.6 3.8 10.7 9 12 5.2-1.3 9-6.4 9-12V5l-9-4Zm1 6v5h4l-6 7v-5H7l6-7Z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 1 3 5v6c0 5.6 3.8 10.7 9 12 5.2-1.3 9-6.4 9-12V5l-9-4Zm1 6v5h4l-6 7v-5H7l6-7Z'/%3E%3C/svg%3E");
    }

    .card-servico-imagem:nth-child(5) .icone-card::after {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 4h18v5H3V4Zm2 7h16v9H5v-9Zm2 2v2h5v-2H7Zm8 0v5h4v-5h-4Z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 4h18v5H3V4Zm2 7h16v9H5v-9Zm2 2v2h5v-2H7Zm8 0v5h4v-5h-4Z'/%3E%3C/svg%3E");
    }

    .grade-especialidades-home article,
    .card-servico-imagem,
    .numero-item,
    .case-card {
        will-change: transform;
    }

    .grade-especialidades-home article:hover,
    .card-servico-imagem:hover,
    .numero-item:hover,
    .case-card:hover {
        transform: translateY(-7px);
    }

    .numero-item {
        transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    }

    .numero-item:hover {
        border-color: rgba(255, 138, 0, 0.22);
        box-shadow: 0 24px 56px rgba(15, 23, 42, 0.14);
    }

    .botao-whatsapp-fixo {
        right: 22px;
        bottom: 22px;
        min-height: 46px;
        padding: 0 18px;
        border: 1px solid rgba(255, 255, 255, 0.28);
        background:
            linear-gradient(135deg, rgba(37, 211, 102, 0.96), rgba(20, 168, 83, 0.96));
        box-shadow:
            0 18px 42px rgba(37, 211, 102, 0.26),
            0 0 0 1px rgba(255, 255, 255, 0.18) inset;
        transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
    }

    .botao-whatsapp-fixo:hover {
        transform: translateY(-3px);
        box-shadow:
            0 24px 56px rgba(37, 211, 102, 0.32),
            0 0 0 1px rgba(255, 255, 255, 0.22) inset;
    }
}

/* 13. TABLET */

@media (max-width: 1280px) {
    .grade-servicos-premium {
        grid-template-columns: repeat(3, 1fr);
    }

    .grade-cases {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1020px) {
    .topo-site {
        min-height: 76px;
        padding: 12px 4%;
    }

    .logo-img {
        width: 162px;
    }

    .menu-site {
        display: none;
    }

    .acoes-mobile-site {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .botao-mobile-voltar,
    .botao-mobile-contato {
        min-height: 38px;
        height: 38px;
        padding: 0 14px;
        border-radius: 999px;
        font-size: 13.5px;
        font-weight: 900;
        border: 1px solid rgba(15, 23, 42, 0.10);
        background: rgba(255, 255, 255, 0.86);
        color: #111827;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    }

    .botao-mobile-contato {
        color: #ffffff;
        border-color: rgba(255, 138, 0, 0.55);
        background: linear-gradient(135deg, var(--laranja), var(--laranja-claro));
        box-shadow: 0 10px 26px rgba(255, 138, 0, 0.26);
    }

    .hero-premium {
        min-height: auto;
        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,0.98) 0%,
                rgba(255,255,255,0.94) 38%,
                rgba(255,248,236,0.80) 72%,
                rgba(2,11,20,0.12) 100%
            ),
            url("../img/fundo-solar-home.png");
        background-size: cover;
        background-position: center top;
    }

    .hero-container {
        min-height: auto;
        padding: 28px 5% 0;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
            "texto"
            "foto"
            "info";
        gap: 0;
    }

    .hero-texto {
        padding-bottom: 0;
        max-width: 100%;
    }

    .hero-foto-home {
        min-height: 390px;
        height: 390px;
        justify-content: center;
        align-items: flex-end;
        overflow: visible;
        margin-top: -8px;
    }

    .hero-foto-home img {
        width: 118%;
        height: auto;
        max-width: 520px;
        transform: translateY(8px);
    }

    .hero-mini-info {
        grid-template-columns: 1fr;
        max-width: 100%;
        min-height: auto;
        margin-top: -30px;
        margin-bottom: 0;
    }

    .hero-mini-info div {
        min-height: 62px;
        padding: 11px 14px 11px 56px;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    }

    .hero-mini-info div:last-child {
        border-bottom: none;
    }

    .hero-mini-info div::before {
        left: 17px;
        width: 24px;
        height: 24px;
    }

    .grade-especialidades-home {
        grid-template-columns: repeat(2, 1fr);
    }

    .faixa-numeros {
        grid-template-columns: repeat(2, 1fr);
    }

    .grade-cards {
        grid-template-columns: 1fr;
    }
}

/* 14. MOBILE */

@media (max-width: 768px) {
    .topo-site {
        min-height: 70px;
        padding: 10px 4%;
    }

    .logo-img {
        width: 150px;
    }

    .hero-container {
        padding: 22px 5% 0;
    }

    .tag-hero {
        font-size: 10px;
        letter-spacing: 2.3px;
        min-height: 28px;
        margin-bottom: 10px;
    }

    .hero-texto h1 {
        font-size: clamp(29px, 7.8vw, 34px);
        line-height: 1.06;
        letter-spacing: -1px;
        margin-bottom: 12px;
    }

    .hero-texto p {
        max-width: 98%;
        font-size: 14px;
        line-height: 1.53;
        margin-bottom: 14px;
    }

    .hero-botoes {
        flex-direction: column;
        gap: 9px;
    }

    .botao-principal,
    .botao-secundario {
        width: 100%;
        min-height: 46px;
        padding: 12px 14px;
        font-size: 14px;
    }

    .hero-foto-home {
        height: 318px;
        min-height: 318px;
        margin-top: -4px;
    }

    .hero-foto-home img {
        width: 132%;
        max-width: 520px;
        transform: translateY(8px);
    }

    .hero-mini-info {
        margin-top: -34px;
        border-radius: 18px;
    }

    .hero-mini-info span {
        font-size: 10.5px;
    }

    .hero-mini-info strong {
        font-size: 12.8px;
    }

    .secao,
    .secao-especialidades-home {
        padding: 42px 5%;
    }

    .titulo-secao {
        margin-bottom: 24px;
    }

    .titulo-secao h2 {
        font-size: 26px;
        line-height: 1.12;
        letter-spacing: -0.7px;
    }

    .titulo-secao p {
        font-size: 15.5px;
        line-height: 1.6;
    }

    .grade-especialidades-home,
    .grade-servicos-premium,
    .faixa-numeros {
        grid-template-columns: 1fr;
    }

    .grade-especialidades-home {
        gap: 15px;
    }

    .grade-especialidades-home article {
        padding: 22px 20px;
    }

    .numero-item {
        padding: 20px 14px;
    }

    .card-img {
        height: 175px;
    }

    .case-imagem {
        min-height: 188px;
    }

    .case-conteudo {
        padding: 22px 20px 24px;
    }

    .case-conteudo h3 {
        font-size: 22px;
    }

    .cta-box {
        padding: 28px 22px;
        flex-direction: column;
        align-items: flex-start;
    }

    .cta-box h2 {
        font-size: 29px;
    }

    .cta-box .botao-principal {
        width: 100%;
    }

    .botao-whatsapp-fixo {
        right: 11px;
        bottom: 11px;
        min-height: 40px;
        height: 40px;
        padding: 0 13px;
        font-size: 13px;
        opacity: 0.92;
    }
}

@media (max-width: 420px) {
    .topo-site {
        min-height: 68px;
        padding: 9px 3.8%;
    }

    .logo-img {
        width: 140px;
    }

    .botao-mobile-voltar,
    .botao-mobile-contato {
        height: 36px;
        min-height: 36px;
        padding: 0 11px;
        font-size: 12.5px;
    }

    .hero-texto h1 {
        font-size: clamp(28px, 7.7vw, 31px);
    }

    .hero-texto p {
        font-size: 13.5px;
    }

    .hero-foto-home {
        height: 300px;
        min-height: 300px;
    }

    .hero-foto-home img {
        width: 143%;
        max-width: 520px;
    }

    .hero-mini-info {
        margin-top: -30px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

.toque-ativo {
    transform: scale(0.97) !important;
}

.botao-hover-premium {
    transform: translateY(-2px) scale(1.015) !important;
}/* =========================================================
   AMJ AJUSTE FINAL SEGURO — DESKTOP
========================================================= */

@media (min-width: 1021px) {

    .hero-mini-info {
        margin-bottom: 58px;
        transform: translateY(-18px);
    }

    .botao-whatsapp-fixo {
        position: fixed !important;
        right: 22px !important;
        left: auto !important;
        bottom: 22px !important;
        z-index: 9999 !important;
        min-height: 44px;
        padding: 0 17px;
        border-radius: 999px;
        background: linear-gradient(135deg, #22c55e, #25d366);
        color: #ffffff;
        font-weight: 900;
        box-shadow: 0 14px 32px rgba(37, 211, 102, 0.24);
        opacity: 0.94;
    }

    .botao-whatsapp-fixo:hover {
        opacity: 1;
        transform: translateY(-2px);
    }

    body {
        overflow-x: hidden;
    }
}