/* ================================
   RESET
================================ */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #07365c;
    color: #fff;
    overflow-x: hidden;
}

a {
    text-decoration: none;
}


/* ================================
   HEADER
================================ */

.header {
    width: 100%;
    height: 180px;

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

    background: #07365c;
}

.logo {
    display: flex;
    justify-content: center;
}

.logo img {
    width: 200px;
    height: auto;
    display: block;
}


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

.hero {
    width: min(1180px, calc(100% - 40px));
    height: 650px;

    margin: 0 auto 45px;

    position: relative;

    display: flex;
    flex-direction: column;

    background:
        linear-gradient(
            90deg,
            rgba(3,42,75,.48) 0%,
            rgba(3,42,75,.15) 50%,
            rgba(3,42,75,.12) 100%
        ),
        url("./fundo-es.jpeg");

    background-size: cover;
    background-position: center;

    border-radius: 38px;

    overflow: hidden;
}


/* PARTE SUPERIOR */

.hero-topo {
    flex: 1;

    position: relative;

    overflow: hidden;
}


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

.hero-textos {
    position: absolute;

    left: 6%;
    top: 13%;

    z-index: 10;
}

.titulo-principal {
    margin: 0;

    color: #fff;

    font-size: 67px;
    font-weight: 900;

    line-height: .79;
    letter-spacing: -3px;

    text-shadow: 0 3px 10px rgba(0,0,0,.2);
}

.titulo-principal span {
    color: #f6a000;
}


/* ================================
   FRASE MANUSCRITA
================================ */

.frase-es {
    width: 270px;

    margin-top: 27px;
    margin-left: 10px;

    transform: rotate(-4deg);
}

.frase-es p {
    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Lucida Handwriting",
        cursive;

    font-size: 22px;
    line-height: 1.1;

    color: #fff;

    text-shadow: 0 2px 5px rgba(0,0,0,.3);
}

.risco-laranja {
    width: 150px;
    height: 4px;

    margin: 8px 0 0 25px;

    background: #f5a000;

    border-radius: 20px;

    transform: rotate(-7deg);
}


/* ================================
   SUBTÍTULO
================================ */

.hero-subtitulo {
    margin-top: 27px;

    color: #fff;

    font-size: 11px;
    font-weight: 900;

    line-height: 1.15;
}


/* ================================
   FOTO CANDIDATO
================================ */

.hero-foto {
    position: absolute;

    right: 5%;
    bottom: -8px;

    height: 100%;

    display: flex;
    align-items: flex-end;

    z-index: 5;
}

.hero-foto img {
    display: block;

    width: auto;
    height: 100%;

    object-fit: contain;
}


/* ================================
   MAPA
================================ */

.mapa-es {
    position: absolute;

    right: 2%;
    top: 6%;

    width: 155px;

    z-index: 4;
}

.mapa-es img {
    width: 100%;
    height: auto;

    display: block;

    opacity: .42;
}

.mapa-frase {
    position: absolute;

    top: 27px;
    right: 3px;

    color: rgba(255,255,255,.82);

    font-family:
        "Segoe Print",
        "Bradley Hand",
        cursive;

    font-size: 14px;
    line-height: 1.1;

    transform: rotate(-7deg);
}

.mapa-frase span {
    display: block;

    width: 60px;
    height: 3px;

    margin-top: 5px;

    background: #f5a000;

    border-radius: 20px;

    transform: rotate(-7deg);
}


/* ================================
   CARD DOS 3 DESTAQUES
================================ */

.hero-destaques {
    width: 100%;
    height: 125px;

    flex-shrink: 0;

    position: relative;
    z-index: 20;

    display: grid;
    grid-template-columns: repeat(3, 1fr);

    align-items: center;

    padding: 15px 30px;

    background: #062f50;

    border-top: 1px solid rgba(255,255,255,.12);
}

.destaque {
    height: 75px;

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

    text-align: center;
}

.destaque + .destaque {
    border-left: 1px solid rgba(255,255,255,.25);
}

.destaque .icone {
    margin-bottom: 5px;
}

.destaque .icone svg {
    width: 27px;
    height: 27px;

    display: block;

    fill: none;
    stroke: #fff;

    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.destaque strong {
    display: block;

    color: #fff;

    font-size: 10px;
    font-weight: 900;

    line-height: 1.05;
}

.destaque small {
    display: block;

    margin-top: 5px;

    color: rgba(255,255,255,.60);

    font-size: 6px;

    line-height: 1.1;
}


/* ================================
   GRUPO VIP
================================ */

.card-grupo {
    width: min(380px, calc(100% - 36px));

    margin: 0 auto 50px;

    padding: 28px 25px 20px;

    background: #062f50;
    color: #fff;

    border-radius: 24px;

    box-shadow: 0 18px 45px rgba(0,0,0,.3);
}

.card-titulo {
    display: flex;
    align-items: center;

    gap: 13px;

    margin-bottom: 14px;
}

.whatsapp-icone {
    width: 58px;
    height: 58px;

    flex-shrink: 0;

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

    border: 4px solid #25d366;
    border-radius: 50%;

    color: #25d366;
}

.whatsapp-icone svg {
    width: 30px;
    height: 30px;
}

.card-titulo span {
    display: block;

    margin-bottom: 3px;

    font-size: 14px;
    font-weight: 800;
}

.card-titulo h2 {
    color: #37e66f;

    font-size: 34px;
    font-weight: 900;

    line-height: .95;
}

.card-descricao {
    margin-bottom: 17px;

    color: rgba(255,255,255,.9);

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

.card-grupo input {
    width: 100%;
    height: 46px;

    display: block;

    margin-bottom: 9px;
    padding: 0 15px;

    border: 0;
    border-radius: 8px;

    background: #fff;
    color: #07365c;

    outline: 0;
}

.card-botao-whatsapp {
    width: 100%;
    min-height: 58px;

    margin-top: 3px;

    border: 0;
    border-radius: 10px;

    background: #25d366;
    color: #fff;

    font-weight: 900;

    cursor: pointer;
}

.card-grupo small {
    display: block;

    margin-top: 11px;

    text-align: center;

    color: rgba(255,255,255,.65);

    font-size: 8px;
}


/* ================================
   CELULAR — REFERÊNCIA
================================ */

@media (max-width: 750px) {

    .header {
        height: 145px;
    }

    .logo img {
        width: 175px;
    }

    /* HERO MOBILE */

        .hero {
    width: 100%;
    max-width: none;
        height: 530px;
        margin: 0 auto 35px;
        position: relative;
        display: block;
        padding: 0;

        background:
            linear-gradient(
                to bottom,
                rgba(4, 48, 82, .05) 0%,
                rgba(4, 48, 82, .02) 65%,
                rgba(4, 48, 82, .18) 100%
            ),
            url("./fundo-es.jpeg");

        background-size: auto 100%;
        background-position: center bottom;
        background-repeat: no-repeat;

border-radius: 0;
overflow: hidden;
    }

    .hero-topo {
        width: 100%;
        height: 430px;
        position: relative;
        overflow: hidden;
    }

    .hero-textos {
        position: absolute;
        top: 65px;
        left: 16px;
        width: 48%;
        z-index: 10;
    }

    .titulo-principal {
        margin: 0;
        font-size: 31px;
        font-weight: 900;
        line-height: .78;
        letter-spacing: -1.6px;
        white-space: nowrap;
        color: #fff;
        text-shadow: 0 2px 5px rgba(0,0,0,.18);
    }

    .titulo-principal span {
        color: #f5a000;
    }

    .frase-es {
        width: 145px;
        margin: 22px 0 0 5px;
        position: relative;
        z-index: 12;
        transform: rotate(-5deg);
    }

    .frase-es p {
        margin: 0;
        font-family: "Segoe Print", "Bradley Hand", cursive;
        font-size: 13px;
        line-height: 1.03;
        color: #fff;
        text-shadow: 0 2px 4px rgba(0,0,0,.30);
    }

    .risco-laranja {
        width: 95px;
        height: 3px;
        margin: 5px 0 0 18px;
        background: #f5a000;
        border-radius: 10px;
        transform: rotate(-7deg);
    }

    .hero-subtitulo {
        width: 115px;
        margin-top: 18px;
        color: #fff;
        font-size: 7px;
        font-weight: 900;
        line-height: 1.05;
    }

    .hero-foto {
        position: absolute;
        top: 13px;
right: -55px;
bottom: auto;
        width: auto;
        height: 417px;
        display: block;
        z-index: 6;
        transform: none;
    }

    .hero-foto img {
        display: block;
        width: auto;
        height: 100%;
        max-width: none;
        object-fit: contain;
        transform: none !important;
    }

    .hero-foto::before,
    .hero-foto::after {
        display: none !important;
        content: none !important;
    }

    .mapa-es {
        display: block !important;
        position: absolute;
        top: 21px;
        right: 4px;
        width: 84px;
        z-index: 4;
        opacity: 1;
    }

    .mapa-es img {
        width: 100%;
        height: auto;
        display: block;
        opacity: .45;
    }

    .mapa-frase {
        position: absolute;
        top: 18px;
        right: 2px;
        font-family: "Segoe Print", "Bradley Hand", cursive;
        font-size: 8px;
        line-height: 1.05;
        color: rgba(255,255,255,.85);
        transform: rotate(-7deg);
    }

    .mapa-frase span {
        display: block;
        width: 40px;
        height: 2px;
        margin-top: 4px;
        background: #f5a000;
        transform: rotate(-8deg);
    }

    .hero-destaques {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100px;
        margin: 0;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        align-items: center;
        padding: 12px 4px;
        background: #052f50;
        border: 0;
        border-top: 1px solid rgba(255,255,255,.15);
        border-radius: 0 0 29px 29px;
        box-shadow: none;
        z-index: 20;
    }

    .destaque {
        width: 100%;
        height: 76px;
        min-width: 0;
        padding: 0 5px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .destaque + .destaque {
        padding-left: 5px;
        border-left: 1px solid rgba(255,255,255,.28);
    }

    .destaque .icone {
        margin-bottom: 5px;
    }

    .destaque .icone svg {
        width: 22px;
        height: 22px;
        display: block;
        fill: none;
        stroke: #fff;
        stroke-width: 1.7;
    }

    .destaque strong {
        display: block;
        color: #fff;
        font-size: 7.5px;
        font-weight: 900;
        line-height: 1.08;
    }

    .destaque small {
        display: block;
        margin-top: 5px;
        color: rgba(255,255,255,.58);
        font-size: 4.8px;
        line-height: 1.1;
    }

    .card-grupo {
        width: calc(100% - 32px);
        max-width: 430px;
        padding: 24px 18px 18px;
        margin-bottom: 38px;
    }
    .rodape-eleitoral {
    margin-top: 8px;
    padding-top: 8px;

    font-size: 7px;
    line-height: 1.3;

    text-align: center;
}
}

/* ================================
   RESTANTE DO SITE
================================ */

.beneficios {
    width: 100%;
    padding: 35px 55px 45px;
    background: #fff;
    color: #07365c;
}

.beneficios-titulo {
    margin-bottom: 30px;
    text-align: center;
}

.beneficios-titulo h2 {
    font-size: 28px;
    font-weight: 900;
}

.titulo-linha {
    width: 42px;
    height: 3px;
    margin: 9px auto 0;
    background: #f5a000;
}

.beneficios-grid {
    max-width: 1200px;
    margin: auto;

    display: grid;
    grid-template-columns: repeat(6,1fr);
}

.beneficio {
    padding: 0 16px;
    text-align: center;
    border-right: 1px solid #e5e7e9;
}

.beneficio:last-child {
    border: 0;
}

.beneficio-icone {
    width: 52px;
    height: 52px;

    margin: 0 auto 10px;

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

    background: #07365c;
    color: #fff;

    border-radius: 50%;
}

.beneficio-icone.destaque-laranja {
    background: #f59a00;
}

.beneficio-icone svg {
    width: 23px;
    height: 23px;
}

.beneficio h3 {
    font-size: 12px;
}

.beneficio p {
    margin-top: 4px;

    color: #4c5861;

    font-size: 10px;
}


/* PILARES */

.pilares {
    display: grid;
    grid-template-columns: repeat(3,1fr);

    padding: 28px 60px;

    background: #07365c;
}

.pilar {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 18px;

    padding: 5px 40px;

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

.pilar:last-child {
    border: 0;
}

.pilar-icone svg {
    width: 36px;
    height: 36px;

    fill: none;
    stroke: #fff;
}

.pilar h3 {
    font-size: 13px;
}

.pilar p {
    margin-top: 4px;

    color: rgba(255,255,255,.78);

    font-size: 10px;
}


/* CTA */

.cta-final {
    padding: 28px 55px;

    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    align-items: center;

    background: #fff;
    color: #07365c;
}

.cta-conteudo {
    text-align: center;
}

.cta-mini {
    color: #6d7780;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 2.5px;
}

.cta-conteudo h2 {
    margin: 5px 0 14px;

    font-size: 34px;
}

.cta-botao {
    display: inline-flex;

    padding: 14px 26px;

    background: #25d366;
    color: #fff;

    border-radius: 30px;

    font-size: 11px;
    font-weight: 900;
}

.cta-whatsapp {
    width: 18px;
    margin-right: 8px;
    fill: #fff;
}

.cta-lateral-direita {
    justify-self: end;
}

.cta-lateral-direita p {
    font-family: "Segoe Print", cursive;
}
/* =========================================
   DETALHES CTA FINAL
========================================= */

/* TRABALHO QUE TRANSFORMA */

.cta-lateral-esquerda {
    position: relative;
    min-width: 190px;
    padding: 16px 10px;
}

.cta-lateral-esquerda strong {
    position: relative;
    z-index: 3;

    display: block;

    color: #07365c;

    font-size: 14px;
    font-weight: 900;
    line-height: 1.05;
}

.pincel {
    position: absolute;
    left: 0;

    height: 17px;

    border-radius: 50% 15px 50% 12px;

    z-index: 1;
}

.pincel-azul {
    top: 12px;
    width: 125px;

    background: rgba(75, 181, 230, .48);

    transform: rotate(-3deg);
}

.pincel-rosa {
    top: 29px;
    left: 14px;

    width: 145px;

    background: rgba(238, 143, 198, .48);

    transform: rotate(2deg);
}


/* JUNTOS POR UM ES MELHOR */

.cta-lateral-direita {
    position: relative;
    justify-self: end;

    text-align: center;
}

.cta-lateral-direita p {
    font-family: "Segoe Print", "Bradley Hand", cursive;

    line-height: 1.25;

    color: #07365c;

    transform: rotate(-4deg);
}

.cta-risco {
    width: 82px;
    height: 3px;

    margin: 7px auto 0;

    background: #f5a000;

    border-radius: 20px;

    transform: rotate(-6deg);
}

/* FOOTER */

.rodape {
    padding: 18px 55px;

    display: grid;
    grid-template-columns: 1.2fr 2fr auto 1px 1fr;
    align-items: center;

    gap: 22px;

    background: #032542;
}

.rodape-logo img {
    width: 110px;
}

.rodape-legais {
    display: flex;
    gap: 8px;
}

.rodape-legais a,
.rodape-legais span {
    color: rgba(255,255,255,.7);
    font-size: 8px;
}

.rodape-divisor {
    width: 1px;
    height: 32px;

    background: rgba(255,255,255,.35);
}

.rodape-slogan {
    font-size: 8px;
    font-weight: 800;
}


/* RESTANTE MOBILE */

@media (max-width: 750px) {

    /* BENEFÍCIOS — mantém a grade, só melhora o respiro */
    .beneficios {
        padding: 34px 16px 30px;
    }

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

    .beneficios-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 0;
    }

    .beneficio {
        padding: 0 10px;
        border: 0;
    }


    /* PILARES — DIÁLOGO / TRABALHO / COMPROMISSO */
    .pilares {
        grid-template-columns: 1fr;
        padding: 18px 28px;
        background: #07365c;
    }

    .pilar {
        min-height: 116px;

        justify-content: flex-start;
        gap: 22px;

        padding: 22px 14px;

        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.18);
    }

    .pilar:last-child {
        border-bottom: 0;
    }

    .pilar-icone {
        width: 46px;
        flex: 0 0 46px;

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

    .pilar-icone svg {
        width: 38px;
        height: 38px;
    }

    .pilar h3 {
        font-size: 15px;
        line-height: 1.05;
    }

    .pilar p {
        margin-top: 7px;

        font-size: 11px;
        line-height: 1.35;

        color: rgba(255,255,255,.75);
    }


    /* CTA FINAL — mais compacto e proporcional */
    .cta-final {
        grid-template-columns: 1fr;
        gap: 10px;

        padding: 38px 22px 34px;

        text-align: center;
    }

    .cta-lateral-esquerda {
        margin-bottom: 2px;
    }

    .cta-conteudo {
        text-align: center;
    }

    .cta-mini {
        font-size: 9px;
        letter-spacing: 2.2px;
    }

    .cta-conteudo h2 {
        margin: 7px 0 18px;

        font-size: 32px;
        line-height: .95;
    }

    .cta-botao {
        min-width: 0;

        padding: 15px 24px;

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

        border-radius: 30px;

        font-size: 11px;
    }

    .cta-lateral-direita {
        justify-self: center;

        margin-top: 18px;
    }

    .cta-lateral-direita p {
        font-size: 18px;
        line-height: 1.35;
    }
/* DETALHES CTA MOBILE */

.cta-lateral-esquerda {
    position: relative;

    width: 185px;
    min-width: 0;

    margin: 0 auto 8px;

    padding: 15px 8px;
}

.cta-lateral-esquerda strong {
    font-size: 13px;
}

.pincel-azul {
    top: 11px;
    width: 112px;
}

.pincel-rosa {
    top: 27px;
    left: 14px;
    width: 132px;
}

.cta-lateral-direita {
    justify-self: center;
    margin-top: 18px;
}

.cta-lateral-direita p {
    font-size: 18px;
    line-height: 1.3;
}

.cta-risco {
    width: 75px;
    height: 3px;
    margin-top: 7px;
}

    /* RODAPÉ — menor e mais organizado */
    .rodape {
        grid-template-columns: 1fr;

        gap: 12px;

        padding: 24px 18px 20px;

        text-align: center;
    }

    .rodape-logo,
    .rodape-legais,
    .rodape-redes {
        justify-self: center;
    }

    .rodape-logo img {
        width: 125px;
    }

    .rodape-legais {
        justify-content: center;
        flex-wrap: wrap;

        gap: 6px 10px;
    }

    .rodape-legais a,
    .rodape-legais span {
        font-size: 7px;
    }

    .rodape-redes {
        justify-content: center;
    }

    .rodape-divisor {
        display: none;
    }

    .rodape-slogan {
        font-size: 7px;
    }
}
/* =========================================
   RÓTULO ELEITORAL — SOMENTE COMPUTADOR
========================================= */

@media (min-width: 751px) {
 /* HERO — SOMENTE COMPUTADOR */
.hero {
    width: 100%;
    max-width: none;

    margin-left: 0;
    margin-right: 0;

    border-radius: 0;
}


/* FOTO — SOMENTE COMPUTADOR */
.hero-foto {
    right: 31%;
}


.card-grupo {
    position: absolute;

    top: 265px;
    right: 10.5%;

    width: 320px;

    margin: 0;

    z-index: 50;
}
/* DESTAQUES VÃO PARA A PRÓXIMA SEÇÃO — SOMENTE PC */

.hero {
    height: 650px;

    /* abre espaço abaixo para a faixa dos destaques */
    margin-bottom: 125px;

    /* permite que a faixa fique fora do hero */
    overflow: visible;
}

.hero-topo {
    height: 100%;
    overflow: hidden;
}

.hero-destaques {
    position: absolute;

    top: 100%;
    left: 0;

    width: 100%;
    height: 125px;

    margin: 0;

    z-index: 20;

    background: #062f50;

    border-top: 1px solid rgba(255,255,255,.12);
}
    .rodape-eleitoral {
        grid-column: 1 / -1;

        width: 100%;

        margin-top: 14px;
        padding: 10px 20px 0;

        border-top: 1px solid rgba(255, 255, 255, .15);

        color: rgba(255, 255, 255, .72);

font-size: 11px;
font-weight: 600;
        line-height: 1.3;
        letter-spacing: .15px;

        text-align: center;
    }
}
/* =========================================
   ÍCONES DAS REDES SOCIAIS — PC + CELULAR
   ÚNICA ALTERAÇÃO GLOBAL
========================================= */

/* Instagram: contorno branco */
.rodape-redes a[aria-label="Instagram"] svg {
    fill: none;
    stroke: #ffffff;
}

.rodape-redes a[aria-label="Instagram"] svg path,
.rodape-redes a[aria-label="Instagram"] svg rect,
.rodape-redes a[aria-label="Instagram"] svg circle {
    fill: none;
    stroke: #ffffff;
}

/* Facebook: preenchimento branco */
.rodape-redes a[aria-label="Facebook"] svg,
.rodape-redes a[aria-label="Facebook"] svg path {
    fill: #ffffff;
    stroke: none;
}

/* YouTube: contorno branco + play branco */
.rodape-redes a[aria-label="YouTube"] svg {
    fill: none;
    stroke: none;
}

.rodape-redes a[aria-label="YouTube"] svg rect {
    fill: none;
    stroke: #ffffff;
}

.rodape-redes a[aria-label="YouTube"] svg polygon,
.rodape-redes a[aria-label="YouTube"] svg path {
    fill: #ffffff;
    stroke: none;
}
/* REDES SOCIAIS — HORIZONTAL */
.rodape-redes {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.rodape-redes a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
}

.rodape-redes a svg {
    display: block !important;
    width: 18px;
    height: 18px;
}
/* CORES ESPÍRITO SANTO — PC + CELULAR */
.titulo-principal .titulo-espirito {
    color: #00AEEF;
}

.titulo-principal .titulo-santo {
    color: #FF7D86;
}
/* SUBTÍTULO DO HERO — PC */
.hero-subtitulo {
    font-size: 18px;
    line-height: 1.15;
}

/* TEXTOS DO HERO — SOMENTE CELULAR */
@media (max-width: 750px) {

    /* O Espírito Santo que eu acredito... */
    .frase-es p {
        font-size: 17px;
        line-height: 1.08;
    }

    /* Trabalho, diálogo e resultados... */
    .hero-subtitulo {
        font-size: 11px;
        line-height: 1.15;
    }
}
.card-grupo button {
    width: 100%;
    white-space: normal;
    font-size: 13px;
    line-height: 1.1;
    padding: 12px 8px;
    text-align: center;
}