/* =========================================
   VARIÁVEIS E RESET
   ========================================= */
:root {
    --primary-blue: #1155BC;
    --text-white: #FFFFFF;
    --overlay-color: rgba(30, 60, 105, 0.6);
    --font-main: 'Sora', sans-serif;
    --azul-principal: #1155BC;
    --branco: #FFFFFF;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-main);
    color: var(--text-white);
    background-color: #fff;
}

/* =========================================
   ESTRUTURA GERAL
   ========================================= */
.container {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 12px;
    position: relative;
    z-index: 2;
}

/* =========================================
   HEADER
   ========================================= */
.site-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 40px 0;
    z-index: 10;
}

.site-logo {
    height: 48px;
    object-fit: contain;
}

/* =========================================
   HERO SECTION
   ========================================= */
.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    background-image: linear-gradient(var(--overlay-color), var(--overlay-color)), url('images/imagem-sala.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 200px;
    overflow: hidden;
}

@media (min-width: 1200px) {
    .hero-section::before {
        content: "";
        position: absolute;

        /* 1. Posicionamento */
        top: 60%;
        right: -10%;
        transform: translateY(-50%);

        /* 2. Tamanho Responsivo */
        width: 75vw;
        height: 75vw;
        max-width: 1100px;
        max-height: 1100px;

        /* 3. Imagem de Fundo */
        background-image: url('images/Circulo.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center right;

        /* 4. Camadas e Comportamento */
        z-index: 1;
        pointer-events: none;
        opacity: 0.85;
    }
}

.hero-content {
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.hero-badge {
    background-color: var(--primary-blue);
    color: var(--text-white);
    font-size: 20px;
    font-weight: 800;
    line-height: normal;
    padding: 12px 28px;
    border-radius: 999px;
    margin-bottom: 28px;
    display: inline-block;
}

.hero-title {
    color: var(--text-white);
    font-size: 50px;
    font-weight: 800;
    line-height: normal;
    text-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
    margin-bottom: 24px;
}

.hero-subtitle {
    color: var(--text-white);
    font-size: 22px;
    font-weight: 400;
    line-height: normal;
    text-shadow: 0px 4px 20.2px #000;
    max-width: 680px;
}

.btn-saiba-mais {
    background-color: #1155BC;
    /* Cor principal da Zapizi */
    color: var(--branco);
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: 400;
    border: none;
    border-radius: 15px;
    /* Cantos arredondados (estilo pill) combinando com o projeto */
    padding: 14px 28px;
    width: 100%;
    max-width: 320px;
    /* Limita o tamanho para não ficar gigante em celulares */
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 0px 4px 14px rgba(17, 85, 188, 0.25);
    /* Sombra suave de elevação */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

/* Efeito interativo puro em CSS ao passar o mouse */
.btn-saiba-mais:hover {
    background-color: #0a3d8a;
    /* Escurece suavemente */
    transform: translateY(-2px);
    /* Levanta de leve dando sensação de clique */
    box-shadow: 0px 6px 20px rgba(17, 85, 188, 0.35);
}

/* =========================================
   LEAD & FEATURES SECTION
   ========================================= */
.lead-section {
    background-color: var(--primary-blue);
    border-top: 10px solid #FFFFFF;
    border-bottom-left-radius: 64px;
    border-bottom-right-radius: 64px;
    padding: 80px 0;
    position: relative;
    z-index: 5;
}

.lead-title {
    color: var(--text-white);
    font-size: 45px;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 64px;
    width: 100%;
}

.highlight-dark {
    color: #061F46;
}

.lead-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 40px;
    align-items: flex-end;
}

.lead-features {
    display: flex;
    justify-content: flex-start;
    gap: 30px;
    margin-bottom: 48px;
    width: 100%;
}

.feature-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.feature-icon {
    max-width: 190px;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.feature-text {
    color: var(--text-white);
    text-align: center;
    font-size: 24px;
    font-weight: 400;
    line-height: normal;
    white-space: nowrap;
    /* Garante o texto em apenas 1 linha */
}

/* --- FORMULÁRIO --- */
.lead-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 750px;
}

.form-input {
    display: flex;
    padding: 12px 24px;
    /* Mais fino conforme solicitado */
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    border-radius: 32px;
    background: #FFF;
    border: none;
    outline: none;

    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
}

.form-input::placeholder {
    color: #767575;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
}

/* Campo "Tipo de operação" (montado por /js/operation-types.js) */
.lead-form .op-types {
    --op-legend-color: #FFF;
    --op-bg: #FFF;
    --op-border: #FFF;
    --op-color: #022566;
    --op-checked-bg: #022566;
    --op-checked-border: #FFF;
    --op-checked-color: #FFF;
    --op-focus: #FFF;
    font-family: 'Inter', sans-serif;
}

.form-submit {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px 24px;
    border-radius: 32px;
    background: #022566;
    color: #FFF;
    font-size: 18px;
    font-weight: 400;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-top: 8px;
    font-family: Inter, sans-serif;
}

.form-submit:hover {
    background: #01153b;
    transform: translateY(-2px);
}

.lead-image-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.lead-image {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}


/* =========================================
   TARGET / PÚBLICO-ALVO SECTION
   ========================================= */
.target-section {
    background-color: #FFFFFF;
    /* Fundo branco especificado no Figma */
    padding: 100px 0;
    position: relative;
    z-index: 1;
    /* Fica abaixo do border-radius da seção anterior */
}

.target-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Colunas simétricas */
    gap: 80px;
    align-items: center;
}

/* --- COLAGEM DE IMAGENS --- */
.target-collage-wrapper {
    position: relative;
    /* Adicionamos margens internas mais definidas para comportar as formas saltadas */
    padding: 32px;
    /* A largura não pode ultrapassar o máximo estabelecido pelas colunas do grid pai */
    max-width: 100%;
}

/* Formas Geométricas Azuis por trás da colagem */
/* Abordagem Sênior: As formas agora usam o tamanho do grid interno e se projetam levemente para fora dele com posições negativas. */
.collage-bg-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    /* Ocupa até a metade do wrapper */
    height: 50%;
    background-color: #155DFC;
    border-top-left-radius: 64px;
    z-index: 0;
}

.collage-bg-bottom {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50%;
    /* Ocupa até a metade inferior do wrapper */
    height: 50%;
    background-color: #022566;
    border-bottom-right-radius: 64px;
    z-index: 0;
}

/* Grid das 4 Imagens */
.collage-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    /* O vão branco entre as imagens. Ajuste se precisar de mais ou menos espaço */
}

.collage-grid img {
    width: 100%;
    /* Mantém a altura fixa, mas com object-fit cover para não distorcer */
    height: 260px;
    object-fit: cover;
    border-radius: 12px;
}

/* Arredondamento específico dos cantos externos para formar o bloco */
.collage-grid .img-1 {
    border-top-left-radius: 48px;
}

.collage-grid .img-2 {
    border-top-right-radius: 48px;
}

.collage-grid .img-3 {
    border-bottom-left-radius: 48px;
}

.collage-grid .img-4 {
    border-bottom-right-radius: 48px;
}

/* Badge Central SVG */
.collage-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    background-color: #155DFC;
    border: 8px solid #FFFFFF;
    border-radius: 50%;
    width: 110px;
    height: 110px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- TEXTOS E BOTÕES (DIREITA) --- */
.target-content {
    display: flex;
    flex-direction: column;
}

.target-tag {
    color: #000;
    font-family: var(--font-main);
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 24px;
}

.tag-slashes {
    color: #1155BC;
    margin-right: 8px;
}

.target-title {
    color: #0A0A0A;
    font-family: var(--font-main);
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 48px;
}

.title-highlight {
    color: #155DFC;
    font-weight: 700;
    display: block;
    /* Força a quebra de linha visualmente caso necessário */
}

/* Grid das Pills */
.target-pills-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 24px;
    /* 16px vertical, 24px horizontal */
}

/* Botões Arredondados (Pills) */
.pill-btn {
    background: #1155BC;
    border-radius: 35px;
    width: 100%;
    max-width: 331px;
    height: 50px;
    /* Altura exata do Figma */

    /* Configurações do texto interno */
    color: #FFF;
    font-family: var(--font-main);
    font-size: 20px;
    /* Reduzido levemente de 24px para evitar quebra em telas normais */
    font-weight: 600;
    line-height: normal;

    /* Alinhamento */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 16px;
    white-space: nowrap;
    /* Mantém em uma única linha */
    box-shadow: 0px 4px 10px rgba(17, 85, 188, 0.2);
    /* Sombra sutil opcional */
}

/* =========================================
   RESPONSIVIDADE UNIFICADA
   ========================================= */

/* Tablet (768px - 1199px) */
/* Tablet (768px - 1199px) */
@media screen and (max-width: 1200px) {

    /* Hero */
    .hero-title {
        font-size: 40px;
    }

    .hero-subtitle {
        font-size: 20px;
    }

    .hero-badge {
        font-size: 18px;
        padding: 10px 24px;
    }

    /* Lead Section - Reordenação */
    .lead-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .lead-content {
        /* Permite reordenar os itens internos livremente */
        display: contents;
    }

    .lead-title {
        font-size: 36px;
        text-align: center;
        margin-bottom: 40px;
        white-space: normal;
    }

    .lead-features {
        order: 1;
        /* 1º: As 3 imagens */
        justify-content: center;
        flex-wrap: wrap;
        /* Evita quebrar layout em telas um pouco menores */
    }

    .lead-image-wrapper {
        order: 2;
        /* 2º: A maquininha */
        margin: 40px 0;
        /* Dá um respiro em cima e embaixo */
    }

    .lead-form {
        order: 3;
        /* 3º: O formulário */
        margin: 0 auto;
        /* Centraliza perfeitamente na tela */
    }

    .feature-text {
        font-size: 20px;
        white-space: normal;
    }

    .lead-image {
        max-width: 400px;
    }
}

/* Mobile (<= 767px) */
@media screen and (max-width: 767px) {

    /* Header & Hero */
    .site-header {
        padding: 24px 0;
    }

    .site-logo {
        height: 36px;
    }

    .hero-section {
        min-height: 85vh;
        padding-top: 100px;
        padding-bottom: 60px;
    }

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

    .hero-subtitle {
        font-size: 16px;
        text-shadow: 0px 2px 10px #000;
    }

    .hero-badge {
        font-size: 14px;
        padding: 8px 16px;
        margin-bottom: 20px;
    }

    /* Lead Section */
    .lead-section {
        border-top: 24px solid #FFFFFF;
        border-bottom-left-radius: 32px;
        border-bottom-right-radius: 32px;
        padding: 60px 0;
    }

    .lead-title {
        font-size: 28px;
        text-align: left;
    }

    /* Empilha os blocos um debaixo do outro */
    .lead-features {
        flex-direction: column;
        align-items: flex-start;
        /* Alinha os blocos à esquerda */
        gap: 32px;
        margin-bottom: 40px;
    }

    /* MÁGICA AQUI: Coloca a imagem e o texto lado a lado */
    .feature-card {
        flex-direction: row;
        align-items: center;
        /* Centraliza a imagem e o texto verticalmente */
        justify-content: flex-start;
        text-align: left;
        gap: 20px;
        /* Espaço entre a imagem e o texto */
    }

    .feature-icon {
        max-width: 80px;
        /* Reduzi um pouco para o texto caber bem ao lado */
        flex-shrink: 0;
        /* Impede que a imagem seja espremida pelo texto */
    }

    .feature-text {
        font-size: 18px;
        text-align: left;
        white-space: normal;
        /* Permite que o texto quebre linha se for longo */
    }

    /* Ajuste para a maquininha e botão no celular */
    .lead-image {
        max-width: 280px;
    }

    .form-submit {
        font-size: 16px;
    }
}

/* =========================================
   ATUALIZAÇÕES DE RESPONSIVIDADE
   ========================================= */

/* Tablet (768px - 1200px) */
@media screen and (max-width: 1200px) {

    /* Adicione isto dentro do @media max-width: 1200px existente */
    .target-container {
        grid-template-columns: 1fr;
        gap: 60px;
        text-align: center;
    }

    .target-content {
        align-items: center;
        /* Centraliza tudo no tablet */
    }

    .collage-grid img {
        height: 300px;
        /* Aumenta a imagem no tablet pois há mais espaço horizontal */
    }
}

/* Mobile (<= 767px) */
@media screen and (max-width: 767px) {

    /* Adicione isto dentro do @media max-width: 767px existente */
    .target-section {
        padding: 60px 0;
    }

    .target-collage-wrapper {
        padding: 8px;
        /* Reduz margens vazadas */
    }

    .collage-grid img {
        height: 160px;
        /* Reduz altura das imagens no celular */
    }

    .collage-badge {
        width: 80px;
        height: 80px;
        border-width: 4px;
    }

    .collage-badge svg {
        width: 40px;
        height: 40px;
    }

    .target-tag {
        font-size: 18px;
        text-align: left;
    }

    .target-title {
        font-size: 28px;
        text-align: left;
    }

    .title-highlight {
        font-size: 28px;
    }

    .target-pills-grid {
        grid-template-columns: 1fr;
        /* 1 coluna de botões no mobile */
        width: 100%;
    }

    .pill-btn {
        max-width: 100%;
        /* Botões ocupam 100% da largura */
        font-size: 18px;
    }
}

/* =========================================
   IMPORTAÇÃO DE FONTES ADICIONAIS
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');

/* =========================================
   STATS SECTION (DESKTOP >= 1200px)
   ========================================= */
.stats-section {
    background-color: var(--primary-blue);
    padding: 80px 0;
    width: 100%;
}

.stats-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    align-items: flex-start;
}

.stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
}

.stat-number {
    color: #FFF;
    text-align: center;
    font-family: 'Sora', sans-serif;
    font-size: 60px;
    font-style: normal;
    font-weight: 800;
    line-height: 48px;
    align-self: stretch;
}

.stat-label {
    color: #FFF;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 25px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    align-self: stretch;
}

/* =========================================
   RESPONSIVIDADE (TABLET 768px - 1199px)
   ========================================= */
@media screen and (max-width: 1200px) {
    .stats-container {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 56px;
    }

    .stat-number {
        font-size: 48px;
        line-height: 40px;
    }

    .stat-label {
        font-size: 20px;
        line-height: 24px;
    }
}

/* =========================================
   RESPONSIVIDADE (MOBILE <= 767px)
   ========================================= */
@media screen and (max-width: 767px) {
    .stats-section {
        padding: 60px 0;
    }

    .stats-container {
        grid-template-columns: 1fr;
        row-gap: 48px;
    }

    .stat-number {
        font-size: 40px;
        line-height: 32px;
    }

    .stat-label {
        font-size: 18px;
        line-height: 22px;
    }
}

.telemetria {
    position: relative;
    padding: 30px 20px 60px;
    overflow: hidden;
    background: #fff;
}

.telemetria .container {
    max-width: 1800px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.telemetria-outline {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1049px;
    max-width: 100%;
    opacity: .25;
    pointer-events: none;
}

/* TAG */

.telemetria-tag {
    margin: 0 0 30px;
    font-family: "Sora", sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: normal;
    color: #000;
}

.telemetria-tag span {
    color: #1155BC;
}

/* TÍTULO */

.telemetria-title {
    margin: 0;
    text-align: center;
    color: #061F46;
    font-family: "Sora", sans-serif;
    font-size: 60px;
    font-weight: 800;
    line-height: 74px;
}

.telemetria-title span {
    color: #1155BC;
}

/* DESCRIÇÃO */

.telemetria-description {
    margin-top: 20px;
    text-align: center;
    color: #515459;
    font-family: "Sora", sans-serif;
    font-size: 30px;
    font-weight: 400;
    line-height: 37px;
}

.telemetria-description strong {
    font-weight: 700;
}

/* SUBTÍTULO */

.telemetria-subtitle {
    margin-top: 45px;
    text-align: center;
    color: #515459;
    font-family: "Sora", sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 37px;
}

/* ETAPAS */

.telemetria-steps {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 25px;
}

/* CÍRCULO */

.step-circle {
    width: 215px;
    height: 184px;
    background: #1155BB;
    border-radius: 50%;
    position: relative;

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

.step-circle img {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

/* NÚMERO */

.step-number {
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);

    width: 74px;
    height: 63px;

    background: #061F46;
    border: 4px solid #fff;
    border-radius: 999px;

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

    color: #FFF;
    text-align: center;
    font-family: "Sora", sans-serif;
    font-size: 30px;
    font-weight: 600;
    line-height: 37px;
}

/* LINHA */

.step-line {
    width: 151px;
    height: 3px;
    background: #061F46;
    border-radius: 999px;
    margin-top: 92px;
}

/* TEXTOS */

.step-text,
.telemetria-footer {
    text-align: center;
    color: #515459;
    font-family: "Sora", sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 37px;
}

.step-text {
    margin-top: 18px;
}

.telemetria-footer {
    margin-top: 25px;
}

.titulo-svg {
    width: 100%;
    height: auto;
    display: block;
}

/* RESPONSIVO */

@media (max-width: 992px) {

    .telemetria-title {
        font-size: 42px;
        line-height: 52px;
    }

    .telemetria-description {
        font-size: 22px;
        line-height: 30px;
    }

    .telemetria-steps {
        flex-direction: column;
        align-items: center;
    }

    .step-line {
        width: 3px;
        height: 60px;
        margin: 0;
    }
}

@media (max-width: 768px) {

    .telemetria-title {
        font-size: 34px;
        line-height: 42px;
    }

    .telemetria-description {
        font-size: 18px;
        line-height: 28px;
    }

    .telemetria-tag,
    .telemetria-subtitle,
    .step-text,
    .telemetria-footer {
        font-size: 18px;
    }
}


/* =========================================
   7. BENEFÍCIOS
========================================= */
.background-blue {
    background-color: var(--azul-principal);

    /* Novo SVG com a "caixa" invisível maior (viewBox='0 0 140 140') para gerar espaçamento */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140' fill='none'%3E%3Cpath d='M54.6412 42C53.1448 42 51.5872 42.2984 50.0221 42.9487C48.4416 43.6065 46.2047 45.3737 43.3033 48.2577C37.2183 54.3011 31.1636 60.3905 25.1321 66.5334C24.9183 66.7476 24.964 66.8546 25.2695 66.8623C34.4926 66.9541 41.7382 67 46.9986 67C50.6252 67 53.3128 66.9771 55.0536 66.9311C59.7337 66.8088 63.2001 64.7127 65.4524 60.6277C70.1785 52.0215 63.368 42 54.6412 42ZM61.8487 58.631C60.2987 61.4385 58.1686 62.7238 54.9466 62.8078C53.2441 62.8538 50.5718 62.8691 46.9986 62.8691C43.6774 62.8691 39.5164 62.8538 34.5765 62.8155C38.4475 58.9064 42.3413 55.0126 46.2047 51.18C49.709 47.6993 51.2208 46.9113 51.6025 46.7506C52.6104 46.3299 53.6335 46.1158 54.6489 46.1158C57.4356 46.1158 60.1309 47.7528 61.6807 50.3843C63.2229 53.0083 63.284 56.0148 61.8487 58.631Z' fill='%2399A1AF' fill-opacity='0.1'/%3E%3Cpath d='M8.80279 24.4796C10.0881 24.8314 11.3355 25 12.5372 25C15.7012 25 18.5611 23.7908 21.1242 21.3725C28.0912 14.821 34.9973 8.17427 41.8503 1.45433C42.0936 1.21242 42.0404 1.08786 41.6905 1.08051C35.8036 1.0219 29.9091 1 24.0221 1C20.0975 1 16.1729 1.01456 12.2406 1.03659C-2.0432 1.12456 -4.64434 20.8522 8.80279 24.4796ZM4.18597 11.9557C4.63477 8.7605 7.01544 5.00854 12.2711 4.97918C16.188 4.95715 20.1051 4.94259 24.0221 4.94259C26.8363 4.94259 29.6656 4.94981 32.4951 4.9645C27.7718 9.53737 23.0105 14.0882 18.2645 18.5584C16.477 20.244 14.606 21.0574 12.5372 21.0574C11.7158 21.0574 10.8336 20.9327 9.91324 20.6836C4.96941 19.3425 3.73729 15.1508 4.18597 11.9557Z' fill='%2399A1AF' fill-opacity='0.1'/%3E%3Cpath d='M63.4598 20.9714C68.1801 16.2515 68.1801 8.60153 63.4598 3.88156L63.12 3.54174C60.7636 1.18554 57.6672 0 54.5784 0C51.482 0 48.3931 1.1781 46.0368 3.54174L3.54008 46.0285C-1.18003 50.7483 -1.18003 58.3983 3.54008 63.1183L3.87992 63.4581C6.23625 65.8143 9.33267 67 12.4215 67C15.5181 67 18.6069 65.8219 20.9633 63.4581L63.4598 20.9714ZM60.5824 18.0942L18.0933 60.5809C16.5829 62.0913 14.5664 62.9295 12.4215 62.9295C10.2768 62.9295 8.26787 62.0988 6.74986 60.5809L6.41002 60.2411C3.28333 57.1146 3.28333 52.0322 6.41002 48.9057L48.899 6.41909C50.4095 4.9086 52.4259 4.07045 54.5708 4.07045C56.7157 4.07045 58.7246 4.90116 60.2426 6.41909L60.5824 6.75891C62.0929 8.26927 62.9312 10.2855 62.9312 12.4303C62.9312 14.5674 62.0929 16.5762 60.5824 18.0942Z' fill='%2399A1AF' fill-opacity='0.1'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 140px 140px;
    /* Altere esse valor se quiser deixar mais junto ou mais separado */

    color: var(--branco);
    padding: 60px 0;
    text-align: center;
    overflow: hidden;
}

.beneficios-header {
    padding: 0 20px;
    margin-bottom: 40px;
}

.beneficios-header h2 {
    color: var(--branco);
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 12px;
}

.beneficios-header p {
    font-size: 16px;
    opacity: 0.9;
}

/* Container do Carrossel */
.carrossel-container {
    position: relative;
    width: 100%;
}

.carrossel-beneficios {
    display: flex;
    overflow-x: auto;
    gap: 16px;
    padding: 20px 20px 40px;
    /* Padding bottom para a sombra não cortar */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.carrossel-beneficios::-webkit-scrollbar {
    display: none;
}

/* Cards fiéis ao Dev Mode */
.card-beneficio {
    background: var(--branco);
    border-radius: 16px;
    padding: 24px;
    flex: 0 0 280px;
    /* Largura padrão no mobile */
    text-align: left;
    scroll-snap-align: center;
    box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.10), 0px 10px 15px -3px rgba(0, 0, 0, 0.10);
    outline: 1px solid #F3F4F6;
    outline-offset: -1px;
    display: flex;
    flex-direction: column;
}

.icon-box {
    width: 56px;
    height: 56px;
    background: #DBEAFE;
    /* Azul clarinho do Figma */
    color: #155DFC;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 24px;
}

.icon-box img {
    width: 28px;
    height: 28px;
}

.card-beneficio h4 {
    color: #0A0A0A;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
    line-height: 1.3;
}

.card-beneficio p {
    color: #4A5565;
    font-size: 14px;
    line-height: 1.5;
}

/* Paginação Interativa */
.dots-pagination {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
}

.dot.active {
    background: var(--branco);
    transform: scale(1.2);
    /* Fica um pouquinho maior pra destacar */
}

/* =========================================
   8. DEPOIMENTOS
========================================= */
.depoimentos {
    background: var(--azul-principal);
    color: var(--branco);
    padding: 60px 20px 80px;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140' fill='none'%3E%3Cpath d='M54.6412 42C53.1448 42 51.5872 42.2984 50.0221 42.9487C48.4416 43.6065 46.2047 45.3737 43.3033 48.2577C37.2183 54.3011 31.1636 60.3905 25.1321 66.5334C24.9183 66.7476 24.964 66.8546 25.2695 66.8623C34.4926 66.9541 41.7382 67 46.9986 67C50.6252 67 53.3128 66.9771 55.0536 66.9311C59.7337 66.8088 63.2001 64.7127 65.4524 60.6277C70.1785 52.0215 63.368 42 54.6412 42ZM61.8487 58.631C60.2987 61.4385 58.1686 62.7238 54.9466 62.8078C53.2441 62.8538 50.5718 62.8691 46.9986 62.8691C43.6774 62.8691 39.5164 62.8538 34.5765 62.8155C38.4475 58.9064 42.3413 55.0126 46.2047 51.18C49.709 47.6993 51.2208 46.9113 51.6025 46.7506C52.6104 46.3299 53.6335 46.1158 54.6489 46.1158C57.4356 46.1158 60.1309 47.7528 61.6807 50.3843C63.2229 53.0083 63.284 56.0148 61.8487 58.631Z' fill='%2399A1AF' fill-opacity='0.1'/%3E%3Cpath d='M8.80279 24.4796C10.0881 24.8314 11.3355 25 12.5372 25C15.7012 25 18.5611 23.7908 21.1242 21.3725C28.0912 14.821 34.9973 8.17427 41.8503 1.45433C42.0936 1.21242 42.0404 1.08786 41.6905 1.08051C35.8036 1.0219 29.9091 1 24.0221 1C20.0975 1 16.1729 1.01456 12.2406 1.03659C-2.0432 1.12456 -4.64434 20.8522 8.80279 24.4796ZM4.18597 11.9557C4.63477 8.7605 7.01544 5.00854 12.2711 4.97918C16.188 4.95715 20.1051 4.94259 24.0221 4.94259C26.8363 4.94259 29.6656 4.94981 32.4951 4.9645C27.7718 9.53737 23.0105 14.0882 18.2645 18.5584C16.477 20.244 14.606 21.0574 12.5372 21.0574C11.7158 21.0574 10.8336 20.9327 9.91324 20.6836C4.96941 19.3425 3.73729 15.1508 4.18597 11.9557Z' fill='%2399A1AF' fill-opacity='0.1'/%3E%3Cpath d='M63.4598 20.9714C68.1801 16.2515 68.1801 8.60153 63.4598 3.88156L63.12 3.54174C60.7636 1.18554 57.6672 0 54.5784 0C51.482 0 48.3931 1.1781 46.0368 3.54174L3.54008 46.0285C-1.18003 50.7483 -1.18003 58.3983 3.54008 63.1183L3.87992 63.4581C6.23625 65.8143 9.33267 67 12.4215 67C15.5181 67 18.6069 65.8219 20.9633 63.4581L63.4598 20.9714ZM60.5824 18.0942L18.0933 60.5809C16.5829 62.0913 14.5664 62.9295 12.4215 62.9295C10.2768 62.9295 8.26787 62.0988 6.74986 60.5809L6.41002 60.2411C3.28333 57.1146 3.28333 52.0322 6.41002 48.9057L48.899 6.41909C50.4095 4.9086 52.4259 4.07045 54.5708 4.07045C56.7157 4.07045 58.7246 4.90116 60.2426 6.41909L60.5824 6.75891C62.0929 8.26927 62.9312 10.2855 62.9312 12.4303C62.9312 14.5674 62.0929 16.5762 60.5824 18.0942Z' fill='%2399A1AF' fill-opacity='0.1'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 140px 140px;
}

.depoimentos h2 {
    color: var(--branco);
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 40px;
    text-align: center;
}

.depoimentos h2 u {
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
}

.depoimentos-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.depoimento-texto {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.stars {
    color: #FDC700;
    font-size: 20px;
    letter-spacing: 2px;
}

.depoimento-texto p {
    font-size: 22px;
    font-style: normal;
    line-height: 1.6;
    font-weight: 400;
}

.autor-mobile {
    font-size: 16px;
    font-weight: 600;
}

/* Lista de Usuários Lateral */
.lista-usuarios {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.user-item {
    padding: 16px 24px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease;
}

/* Card Ativo Branco (Carlos Mendes) */
.user-item.active {
    background: var(--branco);
    color: #101828;
    box-shadow: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.user-item.active .avatar {
    width: 48px;
    height: 48px;
    background: var(--azul-principal);
    color: var(--branco);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
}

/* Cards Inativos Translúcidos */
.user-item:not(.active) {
    background: rgba(255, 255, 255, 0.10);
    /* Ajustado para melhor contraste */
    color: var(--branco);
    outline: 1px solid rgba(255, 255, 255, 0.15);
}

.user-item:not(.active) .avatar.inativo {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
}

.avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;

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

    font-weight: 600;
}

@media (min-width: 1025px) {

    /* 7. BENEFÍCIOS (Seu pedido: Carrossel no Computador) */
    .carrossel-container {
        position: relative;
        max-width: 1400px;
        margin: 0 auto;
        overflow: visible;
    }

    .carrossel-beneficios {
        display: flex;
        flex-wrap: nowrap;
        /* IMPORTANTE: vira carrossel */
        gap: 24px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        padding: 20px;
    }

    .carrossel-beneficios::-webkit-scrollbar {
        display: none;
    }

    .card-beneficio {
        flex: 0 0 300px;
        scroll-snap-align: center;
    }



    .carousel-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: white;
        border: none;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        cursor: pointer;
        z-index: 10;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    }

    .carousel-btn.prev {
        color: white;
        background-color: #155DFC;
        left: -20px;
    }

    .carousel-btn.next {
        color: white;
        background-color: #155DFC;
        right: -20px;
    }

    /* 8. DEPOIMENTOS (Seu pedido: Botões Lado a Lado) */
    .depoimentos h2 {
        font-size: 60px;
    }

    .depoimentos-container {
        flex-direction: row;
        align-items: center;
        gap: 80px;
    }

    .depoimento-texto {
        flex: 1;
    }

    .depoimento-texto p {
        font-size: 30px;
        line-height: 1.6;
    }

    .autor-mobile {
        display: block;
        font-size: 20px;
        font-weight: 600;
        color: var(--branco);
        margin-top: 10px;

        /* Novas regras para alinhar junto com o "P" */
        text-align: left;
        width: 100%;
    }

    .lista-usuarios {
        flex: 1;
        flex-direction: column;
        justify-content: center;
        gap: 16px;
    }

    .user-item {
        flex: 0 0 calc(50% - 10px);
        min-width: 200px;
    }
}

@media (max-width: 1024px) {
    .carousel-btn {
        display: none !important;
    }
}

/* =========================================
   SEÇÃO: POR QUE OS OPERADORES ESCOLHEM
   ========================================= */
.operators-section {
    padding: 50px 0;
    position: relative;
    /* Essencial para os vetores se posicionarem em relação à seção */
    overflow: hidden;
}

/* vetor decorativo 1 (Ajuste top/left se precisar mudar a posição dele na tela) */
.decor-vector-1 {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 400px;
    /* Altere o tamanho se achar necessário */
    height: 250px;
    background-image: url('images/Vector.png');
    /* Verifique o caminho da sua pasta de imagens */
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
    /* Não bloqueia cliques */
    opacity: 0.9;
}

/* vetor decorativo 2 (Ajuste bottom/right conforme o layout do seu Figma) */
.decor-vector-2 {
    position: absolute;
    bottom: 15%;
    right: 0%;
    width: 400px;
    /* Altere o tamanho se achar necessário */
    height: 300px;
    background-image: url('images/Vector (1).png');
    /* Verifique o caminho da sua pasta de imagens */
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
    opacity: 0.9;
}

.operators-section .container {
    position: relative;
    z-index: 2;
    /* Garante que textos, imagens e o card fiquem NA FRENTE dos vetores */
}

.operators-header {
    width: 100%;
    margin-bottom: 40px;
}

/* Apenas a Tag na esquerda */
.operators-tag {
    font-family: var(--font-main);
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: #061F46;
    text-align: left;
    margin-bottom: 24px;
}

.operators-tag .tag-blue {
    color: var(--primary-blue);
}

/* Título centralizado (62px) */
.operators-title {
    width: 100%;
    max-width: 1000px;
    color: var(--primary-blue);
    text-align: center;
    margin: 0 auto 24px auto;
    font-family: var(--font-main);
    font-size: 62px;
    font-style: normal;
    font-weight: 600;
    line-height: 68px;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #1155BC;
}

/* Subtítulo centralizado (30px) */
.operators-subtitle {
    width: 100%;
    max-width: 1000px;
    color: #515459;
    text-align: center;
    margin: 0 auto;
    font-family: var(--font-main);
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: 38px;
}


/* Grid com alinhamento 'stretch' */
.operators-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 60px;
    align-items: stretch;
}

.operators-image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.operators-image {
    max-width: 100%;
    max-height: 500px;
    height: auto;
    object-fit: contain;
}

/* Itens distribuídos para igualar a altura da imagem */
.operators-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 100%;
    padding: 10px 0;
}

.operator-item {
    display: flex;
    align-items: center;
    gap: 32px;
    /* Espaço perfeito mantido */
}

/* Círculo do Bullet Point */
.operator-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(90deg, #1155BC 0%, #1358C1 7.69%, #155BC6 15.38%, #175ECB 23.08%, #1962D0 30.77%, #1B65D5 38.46%, #1D68DA 46.15%, #1F6BE0 53.85%, #216FE5 61.54%, #2372EA 69.23%, #2575EF 76.92%, #2778F4 84.62%, #297CFA 92.31%, #2B7FFF 100%);
    flex-shrink: 0;
}

/* Texto 28px em linha única */
.operator-text {
    color: var(--primary-blue);
    font-family: var(--font-main);
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    white-space: nowrap;
}

/* =========================================
   RESPONSIVIDADE (Ajuste Mobile)
   ========================================= */
@media (max-width: 1024px) {
    .operators-section {
        padding: 60px 0;
    }

    /* Esconde os vetores decorativos no mobile para não poluir telas pequenas */
    .decor-vector-1,
    .decor-vector-2 {
        display: none;
    }

    .operators-card-wrapper {
        padding: 30px 20px;
        margin-top: 30px;
    }

    .operators-header {
        text-align: center;
    }

    .operators-tag {
        text-align: center;
        font-size: 18px;
    }

    .operators-title {
        font-size: 32px;
        line-height: 42px;
    }

    .operators-subtitle {
        font-size: 18px;
        line-height: 28px;
    }

    .operators-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .operators-list {
        gap: 24px;
        justify-content: center;
    }

    .operator-text {
        white-space: normal;
        font-size: 20px;
    }
}

/* =========================================
   SEÇÃO: QUEM SOMOS / CONHEÇA A ZAPIZI
   ========================================= */
.about-section {
    padding: 100px 0;
    background-color: var(--primary-blue);
    position: relative;
    overflow: hidden;
}

/* Texto de marca d'água */
.about-watermark {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1528px;
    height: 81px;
    text-align: center;
    font-family: var(--font-main);
    font-size: 64px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: rgba(255, 255, 255, 0.30);
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
}

.about-section .container {
    position: relative;
    z-index: 2;
}

/* Título centralizado */
.about-title {
    width: 100%;
    max-width: 1000px;
    color: #FFFFFF;
    text-align: center;
    margin: 0 auto 60px auto;
    font-family: var(--font-main);
    font-size: 45px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.about-title .title-dark {
    color: #061F46;
}

.about-title .title-brand {
    font-weight: 800;
}

/* Layout da Grid */
.about-grid {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 0px;
    align-items: center;
    margin-bottom: 20px;
}

/* Coluna de Textos */
.about-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.about-text {
    max-width: 500px;
    color: #FFFFFF;
    font-family: var(--font-main);
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 38px;
    margin-bottom: 40px;
}

.about-text .highlight {
    font-weight: 700;
}

/* Badge de Satisfação */
.about-badge {
    width: 100%;
    max-width: 579px;
    height: 75px;
    flex-shrink: 0;
    border-radius: 14px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    padding: 0 28px;
    gap: 16px;
    box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.1);
}

.badge-icon {
    height: 24px;
    object-fit: contain;
}

.badge-text {
    color: #061F46;
    font-family: var(--font-main);
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.badge-text .badge-bold {
    font-weight: 700;
}

/* CORREÇÃO: Container para isolar e garantir a centralização perfeita do Link */
.about-footer-wrapper {
    width: 100%;
    text-align: center;
    margin-top: 70px;
}

/* Estilos refinados do Link */
.about-footer-link {
    display: inline-block;
    max-width: 679px;
    color: #FFFFFF;
    font-family: var(--font-main);
    font-size: 32px;
    /* Retornado para os seus 32px originais */
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 5%;
    text-underline-offset: 8px;
    text-decoration-skip-ink: none;
    transition: opacity 0.2s ease;
}

.about-footer-link:hover {
    opacity: 0.85;
}

/* Moldura e Foto posicionadas na esquerda */
.about-image-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 40px;
    /* Dá espaço de segurança para a foto que passa da borda inferior */
    padding-right: 30px;
    /* Dá espaço de segurança para a foto que passa da borda direita */
}

.about-image-frame {
    width: 480px;
    height: 440px;
    border-radius: 21px;
    background: #022566;
    /* Cor da moldura escura */
    position: relative;
}

.about-team-photo {
    position: absolute;
    /* CORREÇÃO VISUAL: Posições positivas jogam a foto para baixo/direita, mantendo a moldura no topo/esquerda */
    top: 40px;
    left: 30px;
    width: 500px;
    height: 450px;
    aspect-ratio: 146/123;
    border-radius: 23px;
    object-fit: cover;
    box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.25);
}

/* =========================================
   RESPONSIVIDADE (Ajuste Mobile/Tablet)
   ========================================= */
@media (max-width: 1024px) {
    .about-watermark {
        font-size: 40px;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .about-content {
        align-items: center;
        text-align: center;
    }

    .about-text,
    .about-badge {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .about-image-container {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 20px;
    }

    .about-footer-link {
        font-size: 24px;
    }
}

@media (max-width: 600px) {
    .about-section {
        padding: 60px 0;
    }

    .about-watermark {
        display: none;
    }

    .about-title {
        font-size: 32px;
    }

    .about-text {
        font-size: 18px;
        line-height: 28px;
    }

    .about-badge {
        flex-direction: column;
        height: auto;
        padding: 20px;
        gap: 12px;
    }

    .about-footer-wrapper {
        margin-top: 40px;
    }

    .about-footer-link {
        font-size: 20px;
    }

    .about-image-frame {
        width: 280px;
        height: 250px;
    }

    .about-team-photo {
        width: 290px;
        height: 260px;
        top: 20px;
        left: 15px;
    }
}


/* =========================================
   9. CTA FINAL
========================================= */
.cta-final {
    background: var(--branco);
    padding: 60px 20px;
    text-align: center;
}

.cta-final h2 {
    color: var(--azul-principal);
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 12px;
    line-height: 1.2;
}

.cta-final>p {
    font-size: 14px;
    line-height: 1.6;
    color: #15B;
}

.cta-botoes {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    margin-bottom: 24px;
}

.btn-primary {
    background-color: #1155BC;
    /* Cor principal da Zapizi */
    color: var(--branco);
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: 400;
    border: none;
    border-radius: 15px;
    /* Cantos arredondados (estilo pill) combinando com o projeto */
    padding: 14px 28px;
    width: 100%;
    max-width: 320px;
    /* Limita o tamanho para não ficar gigante em celulares */
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 0px 4px 14px rgba(17, 85, 188, 0.25);
    /* Sombra suave de elevação */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

/* Efeito interativo puro em CSS ao passar o mouse */
.btn-primary:hover {
    background-color: #0a3d8a;
    /* Escurece suavemente */
    transform: translateY(-2px);
    /* Levanta de leve dando sensação de clique */
    box-shadow: 0px 6px 20px rgba(17, 85, 188, 0.35);
}

.checkmarks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    font-size: 12px;
    color: var(--azul-principal);
    font-weight: 600;
}

.checkmarks span::before {
    content: "✓ ";
}

.legal-text {
    font-size: 10px;
    color: #aaa;
    margin-top: 20px;
}

.cta-legal {
    font-weight: 700;
}

/* =========================================
   10. FOOTER
========================================= */
.footer {
    background: #05103D;
    color: var(--branco);
    padding: 40px 20px 0;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* NOVA CLASSE: Coloca as informações e os links lado a lado */
.footer-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* Joga a logo pra esquerda e os links pra direita */
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    /* Permite quebrar linha caso a tela do celular seja muito pequena */
}

/* Estilo garantido para a logo */
.footer-logo {
    max-width: 120px;
    margin-bottom: 16px;
}

.footer-logo-text {
    font-family: var(--fonte-titulos);
    font-size: 22px;
    font-weight: 800;
    color: var(--branco);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.footer-logo-text .zap {
    color: var(--azul-claro);
}

.footer-info p {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    max-width: 300px;
}

.footer-links h4 {
    color: var(--branco);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 14px;
}

.footer-links ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-links li a {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    cursor: pointer;
    transition: color 0.2s;
}

.footer-links li:hover {
    color: var(--branco);
}

.footer-copy {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px 0;
    font-size: 11px;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
}

@media (min-width: 600px) {

    /* 9. CTA FINAL */
    .cta-final h2 {
        font-size: 60px;
    }

    .cta-final p {
        font-size: 25px;
    }

    .cta-botoes {
        flex-direction: row;
        justify-content: center;
        gap: 20px;
    }

    .cta-botoes button {
        width: auto;
        min-width: 280px;
        height: 60px;
        font-size: 18px;
    }

    /* 10. FOOTER */
    .footer-top {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 100px;
        flex-wrap: wrap;
    }


    .footer-copy {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding: 20px 0;
        font-size: 11px;
        color: rgba(255, 255, 255, 0.4);
        text-align: center;
    }
}


/* =========================================
   11. EFEITOS DINÂMICOS (JS INJECTED)
   ========================================= */

/* Efeito de vidro no Header quando rolar a página */
.site-header {
    transition: background 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease;
    z-index: 1000;
    position: fixed;
    /* Muda para fixed para acompanhar a tela */
    width: 100%;
}

.site-header.scrolled {
    background: rgba(6, 31, 70, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
    padding-top: 5px;
    padding-bottom: 5px;
}

/* Oculta os elementos inicialmente para o Scroll Reveal */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.5, 0, 0, 1), transform 0.8s cubic-bezier(0.5, 0, 0, 1);
    will-change: opacity, transform;
}

/* Classe adicionada pelo JS quando o elemento entra na tela */
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Delays para elementos em sequência (Ex: Cards, Bullets) */
.reveal-delay-1 {
    transition-delay: 0.1s;
}

.reveal-delay-2 {
    transition-delay: 0.2s;
}

.reveal-delay-3 {
    transition-delay: 0.3s;
}

.reveal-delay-4 {
    transition-delay: 0.4s;
}

/* Efeito 3D para os Cards */
.tilt-card {
    transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
    transform-style: preserve-3d;
}

.tilt-card:hover {
    z-index: 10;
}

/* Ajuste na Imagem Flutuante Principal */
.lead-image,
.operators-image {
    transition: transform 0.5s ease-out;
}

/* =========================================
   12. NOVOS AJUSTES (INTERAÇÕES E CURSORES)
   ========================================= */

/* Coloca a 'mãozinha' nos itens de depoimento */
.user-item {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.user-item:hover {
    transform: scale(1.05);
    /* Dá um leve zoom ao passar o mouse para incentivar o clique */
}

/* Prepara a seção Target para o efeito Parallax do Mouse */
.target-section {
    perspective: 1000px;
    overflow: hidden;
    /* Evita barras de rolagem se a imagem mover muito */
}

.target-section img {
    transition: transform 0.1s ease-out;
    /* Transição rápida para acompanhar o mouse */
    will-change: transform;
}

/* Classe para dar destaque ao formulário quando o botão clica nele */
.form-highlight {
    animation: pulseForm 0.6s ease-out;
}

@keyframes pulseForm {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(17, 85, 188, 0);
    }

    50% {
        transform: scale(1.02);
        box-shadow: 0 10px 40px rgba(17, 85, 188, 0.4);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }
}