/* =========================================
   RESET & VARIÁVEIS
========================================= */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --azul-principal: #1155BC;
    --azul-claro: #2B7FFF;
    --azul-escuro: #09204A;
    --verde-destaque: #00C853;
    --fundo-cinza: #F0F2F5;
    --texto-preto: #111111;
    --texto-cinza: #515459;
    --branco: #FFFFFF;
    --fonte-titulos: 'Sora', sans-serif;
    --fonte-textos: 'Inter', sans-serif;
}

html {
    overflow-x: hidden;
    width: 100%;
}

body {
    font-family: var(--fonte-textos);
    background-color: var(--fundo-cinza);
    color: var(--texto-cinza);
    width: 100%;
    overflow-x: hidden;
    position: relative;
}

h1,
h2,
h3,
h4 {
    font-family: var(--fonte-titulos);
    color: var(--texto-preto);
}

img {
    display: block;
}

/* =========================================
   BOTÕES GLOBAIS
========================================= */
/* Regras unificadas de transição e toque para todos os botões */
.btn-primary,
.btn-white,
.btn-outline {
    font-family: var(--fonte-textos);
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    /* Transição suave para todas as animações */
    transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    /* Remove o quadrado azul nativo de toque do Android/iOS */
    -webkit-tap-highlight-color: transparent;
}

/* --- 1. BTN PRIMARY (Azul Gradiente) --- */
.btn-primary {
    color: var(--branco);
    border: none;
    border-radius: 0.875rem;
    background: linear-gradient(90deg, #1155BC 0%, #2B7FFF 100%);
    padding: 16px 24px;
    font-size: 15px;
    box-shadow: 0 4px 10px rgba(17, 85, 188, 0.2);
    /* Sombra base */
}

/* Efeito de Clique: Afunda, diminui a sombra e dá um leve brilho */
.btn-primary:active {
    transform: scale(0.96);
    box-shadow: 0 2px 5px rgba(17, 85, 188, 0.15);
    filter: brightness(1.1);
}

@media (hover: hover) and (pointer: fine) {
    .btn-primary:hover {
        filter: brightness(1.15);
    }
}

/* --- 1.1 BTN SMALL (Apenas variação de tamanho do primary) --- */
.btn-small {
    padding: 12px 20px;
    font-size: 14px;
    width: auto;
}

/* --- 2. BTN WHITE (Fundo Branco) --- */
.btn-white {
    background: var(--branco);
    color: var(--azul-principal);
    border: none;
    border-radius: 8px;
    padding: 14px 24px;
    font-size: 14px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    /* Sombra super leve */
}

/* Efeito de Clique: Afunda e o fundo fica num tom de gelo (cinza bem claro) */
.btn-white:active {
    transform: scale(0.96);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    background: #F8F9FA;
}

@media (hover: hover) and (pointer: fine) {
    .btn-white:hover {
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
        /* Sombra cresce no hover do mouse */
    }
}

/* --- 3. BTN OUTLINE (Transparente com Borda) --- */
.btn-outline {
    background: transparent;
    color: var(--texto-cinza);
    border-radius: 0.875rem;
    border: 1px solid var(--azul-principal);
    padding: 14px 24px;
    font-size: 15px;
}

/* Efeito de Clique: Afunda, o texto fica azul e preenche com um fundo azul quase invisível */
.btn-outline:active {
    transform: scale(0.96);
    background: rgba(17, 85, 188, 0.08);
    color: var(--azul-principal);
    border-color: var(--azul-principal);
}

@media (hover: hover) and (pointer: fine) {
    .btn-outline:hover {
        background: rgba(17, 85, 188, 0.05);
        color: var(--azul-principal);
    }
}

/* Ajuste de cor de destaque para textos */
.highlight-blue {
    color: var(--azul-principal);
}

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

.hero {
    padding: 24px 20px 0px;
    background-position: top center;
}

/* ── CONTAINER: empilha esquerda → direita ── */
.hero-content {
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* ── LADO ESQUERDO ── */
.hero-left {
    width: 100%;
    flex: unset;
    gap: 16px;
}

/* HEADER AZUL */
.header-tela2 {
    width: fit-content;
    padding: 6px 16px;
    border: 2px solid #1155BC;
    border-radius: 999px;
    margin-bottom: 10px;
}

.header-tela2 h2 {
    color: #1155BC;
    font-size: 14px;
}

/* ── TÍTULO PRINCIPAL ── */
.hero h1 {
    font-size: 1.6rem;
    min-width: unset;
    /* remove o min-width fixo de 600px */
    width: 100%;
    line-height: 1.35;
    margin-bottom: 10px;
}

/* ── SUBTÍTULO ── */
.subtitle {
    font-size: 0.95rem;
    margin-bottom: 10px;
}

/* ── FORMULÁRIO ── */


.cadastro-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 450px;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.input-group label {
    font-size: 14px;
    font-weight: 600;
}

.input-group input {
    padding: 14px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 14px;
}

/* BOTÃO */
.btn-form {
    margin-top: 10px;
    padding: 16px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(90deg, #1155BC, #2B7FFF);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.btn-form:active {
    transform: scale(0.96);
    box-shadow: 0 2px 5px rgba(17, 85, 188, 0.15);
    filter: brightness(1.1);
}

/* ── LADO DIREITO: vem abaixo do form ── */
.hero-right {
    width: 100%;
    flex: unset;
    margin-top: 10px;
    flex-direction: column;
    display: flex;
}

/* ── IMAGEM DA MÁQUINA ── */
.hero-image-wrap {
    justify-content: center;
    align-items: center;
}

/* ── WATERMARK "ZAP PRO" ── */
.title-ZAP-PRO {
    color: rgba(153, 161, 175, 0.25);
    text-align: center;
    font-family: var(--fonte-titulos);
    font-size: 48px;
    font-weight: 800;
    top: 5%;
}

/* ===== MENSAGEM DE ERRO DO FORMULÁRIO ===== */
.error-msg {
    display: block;
    color: #ff4d4d;
    /* Um tom de vermelho claro e moderno */
    font-size: 0.875rem;
    /* Um pouco menor que o texto normal */
    margin-top: 12px;
    text-align: center;
    font-weight: 500;
}

.error-msg.hidden {
    display: none;
}


/* =========================================
   2. PRODUTOS
========================================= */
.produtos {
    padding: 15px 0 0px;
    background: var(--fundo-cinza);
    text-align: center;
    overflow: hidden;
}

.produtos-header {
    padding: 0 20px;
    position: relative;
    margin-bottom: 10px;
    margin-top: 15%;
}

.title-watermark {
    background: url;
    font-family: var(--fonte-titulos);
    font-size: 48px;
    font-weight: 800;
    color: rgba(153, 161, 175, 0.25);
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    pointer-events: none;
    white-space: nowrap;
}

.produtos-header .title-main {
    color: var(--azul-principal);
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 6px;
    position: relative;
    z-index: 1;
}

.produtos-header p {
    font-size: 13px;
    color: var(--texto-cinza);
    position: relative;
    z-index: 1;
}

.carrossel-produtos {
    display: flex;
    overflow-x: auto;
    gap: 14px;
    padding: 60px 20px 20px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

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

.card-produto {
    flex: 0 0 130px;
    background: var(--azul-principal);
    border-radius: 14px;
    height: 110px;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 10px;
    scroll-snap-align: start;
}

.card-produto img,
.card-produto svg {
    position: absolute;
    top: -48px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.3));
}

.card-produto span {
    color: var(--branco);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
}

/* Ajuste de snap para a seção de Produtos */
.card-produto {
    scroll-snap-align: center;
    /* Centraliza o card quando o usuário soltar o dedo */
}

/* Estilo específico para as bolinhas no fundo claro da seção PRODUTOS */
.produtos .dots-pagination {
    margin-top: 10px;
    padding-bottom: 20px;
}

.produtos .dot {
    background: rgba(17, 85, 188, 0.3);
    /* Azul translúcido para os inativos */
}

.produtos .dot.active {
    background: var(--azul-principal);
    /* Azul sólido para o ativo */
}



/* =========================================
   3. GESTÃO
========================================= */
.gestao {
    background: var(--azul-principal);
    /* SVG inline para simular as linhas circulares de fundo da imagem */
    background-image: url("data:image/svg+xml,%3Csvg width='800' height='400' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='0' cy='100' r='180' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='4'/%3E%3Ccircle cx='700' cy='300' r='100' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='4'/%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
    color: var(--branco);
    padding: 15px 20px 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 5;
}

.feature-item:first-child .feature-icon img {
    width: 65px;
}

.gestao h2 {
    font-family: var(--fonte-titulos);
    color: var(--branco);
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 8px;
}

.gestao>p {
    font-family: var(--fonte-titulos);
    font-size: 15px;
    opacity: 0.9;
    margin-bottom: 30px;
}

/* Grid Flexível para alinhar os itens lado a lado no Mobile */
.features-grid {
    display: flex;
    flex-wrap: nowrap;
    /* Força a ficar na mesma linha */
    justify-content: space-between;
    /* Distribui o espaço entre eles */
    gap: 10px;
    /* Espaço reduzido para caber no celular */
    margin-bottom: 40px;
    width: 100%;
}

.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    /* Fonte reduzida para não quebrar feio */
    font-weight: 700;
    color: var(--branco);
    flex: 1;
    /* Faz os 3 dividirem a tela igualmente */
    text-align: center;
}

/* O Círculo Vazado Branco (Tamanho adaptado para celular) */
.feature-icon {
    width: 80px;
    height: 80px;
    background: transparent;
    border: 2px solid var(--branco);
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* O pontinho na borda do círculo (Canto inferior direito) */
.feature-icon::after {
    content: "";
    width: 12px;
    height: 12px;
    background: var(--branco);
    border-radius: 50%;
    position: absolute;
    bottom: 2px;
    right: 2px;
    border: 3px solid var(--azul-principal);
    z-index: 3;
}


/* Fazendo as imagens "saltarem" para fora do círculo */
.feature-icon img {
    position: absolute;
    width: 180%;
    /* Mantém a proporção vazando do círculo */
    max-width: 150px;
    height: auto;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.25));
    z-index: 2;
}

/* Botão Azul Claro */
.gestao .btn-primary {
    border-radius: 1rem;
    background: linear-gradient(90deg, #1155BC 0%, #1358C1 7.14%, #155BC5 14.29%, #175ECA 21.43%, #1961CF 28.57%, #1A64D3 35.71%, #1C67D8 42.86%, #1E6ADD 50%, #206DE2 57.14%, #2270E7 64.29%, #2473EB 71.43%, #2576F0 78.57%, #2779F5 85.71%, #297CFA 92.86%, #2B7FFF 100%);
    color: var(--branco);
    width: auto;
    padding: 14px 32px;
    font-size: 14px;
    border: none;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

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


/* Máquina sobrepondo as seções */
.gestao-machine {
    position: absolute;
    bottom: -50px;
    /* Puxa ela para fora da div, invadindo as estatísticas */
    right: -20px;
    width: 260px;
    z-index: 10;
    pointer-events: none;
    filter: drop-shadow(0px 15px 20px rgba(0, 0, 0, 0.25));
}

/* =========================================
   MEDIA QUERY GESTÃO: Volta ao tamanho original no Desktop
========================================= */
@media (min-width: 768px) {
    .features-grid {
        gap: 30px;
        justify-content: center;
    }

    .feature-item {
        font-size: 14px;
        flex: none;
        width: 140px;
    }

    .feature-icon {
        width: 110px;
        height: 110px;
        border-width: 3px;
    }

    .feature-icon::after {
        width: 14px;
        height: 14px;
        bottom: 6px;
        right: 6px;
    }
}

/* =========================================
   4. ESTATÍSTICAS
========================================= */
.estatisticas {
    background: var(--branco);
    padding: 10px 0px 10px;
    /* Padding top maior por causa da máquina vazando */
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 2 colunas no celular */
    gap: 30px 0;
    /* Gap apenas vertical */
    position: relative;
    z-index: 4;
    /* Fica abaixo da Gestão para a máquina ficar por cima */
    border-bottom: 2px solid #EAEAEA;
}

.stat-item {
    text-align: center;
    padding: 0 10px;
    border-right: 1px solid #E0E4E8;
    /* Linha separadora sutil */
}

/* Remove a borda da direita para os itens que encostam na tela no celular */
.stat-item:nth-child(2n) {
    border-right: none;
}

.stat-item h3 {
    color: var(--azul-principal);
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 6px;
}

.stat-item p {
    font-size: 13px;
    color: var(--azul-claro);
    /* Texto agora é azul claro, como no design */
    font-weight: 600;
    line-height: 1.3;
}

/* --- MEDIA QUERY APENAS PARA ESTATÍSTICAS (Tablet/Desktop) --- */
@media (min-width: 768px) {
    .estatisticas {
        grid-template-columns: repeat(4, 1fr);
        /* 4 colunas em telas maiores */
        padding: 60px 40px;
    }

    .stat-item {
        border-right: 1px solid #E0E4E8;
    }

    /* Remove apenas a borda do último item no desktop */
    .stat-item:nth-child(2n) {
        border-right: 1px solid #E0E4E8;
    }

    .stat-item:last-child {
        border-right: none;
    }
}

/* =========================================
   5. TELEMETRIA
========================================= */
.telemetria {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* AQUI ESTÁ A MÁGICA: Centraliza tudo, inclusive a imagem */
    background: var(--azul-principal);
    color: var(--branco);
    padding: 20px 0px 0px;
    /* Coloquei padding nas laterais (20px) pro texto não colar na tela */
    text-align: center;
}

.telemetria h2 {
    font-family: var(--fonte-titulos);
    color: var(--branco);
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.3;
}

.telemetria h2 strong {
    background: linear-gradient(90deg, #FFF 41.83%, #1358C1 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: var(--fonte-titulos);
    font-size: 26px;
    font-weight: 800;
}

.subtitle-telemetria {
    color: #FFF;
    text-align: center;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 30px;
    opacity: 0.9;
}

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

.telemetria-grid {
    display: flex;
    flex-direction: row;
    justify-content: center;
    /* Centraliza a grid inteira */
}

.telemetria-grid p {
    font-family: var(--fonte-titulos);
    color: #FFF;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    opacity: 0.9;
    margin: 0 10px;
    padding: 0px 20px;
}

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

.img-central {
    margin-top: 5%;
    width: 100%;
    max-width: 200px;
    height: auto;
    filter: drop-shadow(0px 15px 20px rgba(0, 0, 0, 0.25));
}

/* =========================================
   6. PROBLEMAS
========================================= */
.problemas {
    padding: 20px 20px;
    background: var(--fundo-cinza);
    text-align: center;
}

.problemas h2 {
    color: #1155BC;
    text-align: center;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #1155BC;
    font-family: var(--fonte-titulos);
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 20px;

}


.problemas-card {
    border-radius: 1.875rem;
    background: #15B;
    padding: 20px 30px 24px;
    text-align: center;
    color: var(--branco);
    position: relative;
    overflow: hidden;
}

.lista-problemas {
    list-style: none;
    margin-bottom: 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 100%;
}

.lista-problemas li {
    font-family: var(--fonte-titulos);
    font-weight: 100;
    font-size: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.4;
}

.lista-problemas li::before {
    content: "";
    width: 7px;
    height: 7px;
    min-width: 7px;
    border-radius: 50%;
    background: var(--branco);
}

.problemas-card .btn-white {
    width: auto;
    padding: 12px 18px;
    font-size: 12px;
    border-radius: 1rem;
}

.problemas-img {
    position: relative;
    right: 0;
    bottom: 0;
    margin: 20px auto 0;
    display: block;
    max-width: 160px;
}

/* =========================================
   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;
}


/* =========================================
   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;
    gap: 12px;
    margin-top: 24px;
    margin-bottom: 24px;
}

.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;
}

/* =========================================
   10. FOOTER
========================================= */
.footer {
    background: var(--azul-escuro);
    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);
}

/* =========================================
   11. ADAPTAÇÕES DESKTOP (Fiel ao Builder)
========================================= */

/* Tablets */
@media ((min-width: 768px) and (max-width: 1024px)) {
    .estatisticas {
        grid-template-columns: repeat(4, 1fr);
    }

    .stat-item {
        border-right: 1px solid #E0E4E8;
    }

    .stat-item:nth-child(2n) {
        border-right: 1px solid #E0E4E8;
    }

    .stat-item:last-child {
        border-right: none;
    }

    .img-central {
        margin-top: -50px;
    }

    .hero-image-wrap img {
        width: 500px;
    }


    /* 6. PROBLEMAS */
    .problemas {
        background: #FFF;
        border-radius: 0 0 66px 66px;
    }

    .problemas h2 {
        font-size: 70px;
        margin-bottom: 10px;
        margin-top: 20px;
    }

    .problemas-card {
        position: relative;
        /* IMPORTANTE */
        background: #1154bb;
        max-width: 1100px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        border-radius: 24px;
        /* opcional (igual design) */
        overflow: visible;
    }

    .lista-problemas {
        max-width: 100%;
        margin-top: 40px;
        gap: 40px;
    }

    .lista-problemas li {
        font-size: 15px;
    }

    .lista-problemas li::before {
        width: 20px;
        height: 20px;
        min-width: 20px;
    }

    .problemas-card .btn-white {
        grid-column: 1;
        width: 308px;
        height: 60px;
        margin-top: 40px;
        font-size: 18px;
    }

    .problemas-img {
        position: absolute;
        max-width: 400px;
        width: 100%;
    }

     /* 5. TELEMETRIA */
    .telemetria {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #1154bb;
        /* Azul do design */
        color: #ffffff;
        text-align: center;
        position: relative;
        overflow: hidden;
    }

    /* Efeito de Círculo ao Fundo (Marca d'água) */
    .telemetria::before {
        content: "";
        position: absolute;
        top: 55%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 800px;
        height: 800px;
        border: 30px solid rgba(255, 255, 255, 0.05);
        border-radius: 50%;
        z-index: 0;
        pointer-events: none;
    }

    /* A "bolinha" no aro do círculo (Detalhe do design original) */
    .telemetria::after {
        content: "";
        position: absolute;
        top: 55%;
        left: calc(50% - 400px);
        /* Posiciona na borda esquerda do círculo maior */
        transform: translate(-50%, -50%);
        width: 35px;
        height: 35px;
        background-color: #1154bb;
        border: 3px solid rgba(255, 255, 255, 0.05);
        border-radius: 50%;
        z-index: 0;
    }

    /* Títulos e Subtítulos */
    .telemetria h2 {
        position: relative;
        z-index: 2;
        font-family: 'Sora', sans-serif;
        font-size: 50px;
        line-height: 1.2;
        font-weight: 600;
        margin-bottom: 20px;
        width: 100%;
        grid-column: unset;
        /* Limpa o grid antigo */
    }

    /* Efeito visual no "SEM MENSALIDADE" */
    .telemetria h2 strong {
        display: block;
        font-size: 60px;
        font-weight: 800;
        color: rgba(255, 255, 255, 0.85);
        /* Tom levemente transparente/cinza do design */
        text-transform: uppercase;
    }

    .telemetria .subtitle-telemetria {
        position: relative;
        z-index: 2;
        font-family: 'Sora', sans-serif;
        font-size: 26px;
        line-height: 1.5;
        font-weight: 400;
        margin-bottom: 150px;
        max-width: 800px;
        grid-column: unset;
    }

    /* Organizando os textos laterais para abraçarem a máquina */
    .telemetria-grid {
        position: relative;
        z-index: 2;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        max-width: 1100px;
        /* Afasta os textos do centro */
        margin: 0 auto;
        padding-bottom: 180px;
        /* Evita que o texto esmague a máquina */
        grid-column: unset;
    }

    .telemetria-grid p {
        width: 340px;
        /* Limita a largura dos textos laterais */
        font-family: 'Sora', sans-serif;
        font-size: 24px;
        line-height: 1.4;
    }

    /* A Máquina Central */
    .img-central {
        position: absolute;
        bottom: 0;
        /* Cola a máquina no fundo da seção */
        left: 50%;
        transform: translateX(-50%);
        /* Centraliza perfeitamente */
        width: 300px;
        /* Largura ideal para o design */
        max-width: 100%;
        z-index: 1;
        margin: 0;
        grid-column: unset;
        /* Limpa o grid antigo */
        grid-row: unset;
    }


    .telemetria-grid {
        display: flex;
        justify-content: center;
        gap: 40px;
        padding-bottom: 40px; /* 👈 reduz espaço exagerado */
    }

    .telemetria-grid p {
        text-align: center;
        width: 45%;
    }

    .img-central {
        position: relative; /* 👈 tira do absoluto */
        left: auto;
        transform: none;
        margin-top: 20px;
        width: 250px;
    }

}

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

/* Telas Grandes (Computador) */
@media (min-width: 1025px) {

    /* 1. HERO - Usando Grid para posicionar sem quebrar o mobile */

    @media (min-width: 1024px) {
        .hero {
            padding: 20px 0px;
            background-image: url('img/fundo.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        /* CONTAINER PRINCIPAL */
        .hero-content {
            display: flex;
            flex-direction: column;
        }

        .hero-content {
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
        }

        /* LADO ESQUERDO */
        .hero-left {
            display: flex;
            flex-direction: column;
            gap: 0px;
            flex: 1.2;
        }

        /* LADO DIREITO */
        .hero-right {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: left;
            flex: 1.3;
        }

        /* TÍTULO PRINCIPAL */
        .hero h1 {
            font-size: 2.0rem;
            min-width: 600px;
            font-weight: 800;
            line-height: 1.3;
            color: #111;
        }

        .subtitle {
            font-size: 1.1rem;
            color: #555;
            margin-bottom: 20px;
        }

        /* HEADER AZUL */
        .header-tela2 {
            width: fit-content;
            padding: 6px 16px;
            border: 2px solid #1155BC;
            border-radius: 999px;
            margin-bottom: -25px;
        }

        .header-tela2 h2 {
            color: #1155BC;
            font-size: 14px;
        }

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

        .input-group {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .input-group label {
            font-size: 14px;
            font-weight: 600;
        }

        .input-group input {
            padding: 14px;
            border: 1px solid #ccc;
            border-radius: 8px;
            font-size: 14px;
        }

        /* BOTÃO */
        .btn-form {
            margin-top: 10px;
            padding: 16px;
            border: none;
            border-radius: 8px;
            background: linear-gradient(90deg, #1155BC, #2B7FFF);
            color: #fff;
            font-weight: 600;
            cursor: pointer;
        }

        .btn-form:active {
            transform: scale(0.96);
            box-shadow: 0 2px 5px rgba(17, 85, 188, 0.15);
            filter: brightness(1.1);
        }

        /* IMAGEM */
        .hero-image-wrap {
            max-width: 450px;
        }


        /* TEXTO DECORATIVO */
        .title-ZAP-PRO {
            white-space: nowrap;
            position: absolute;
            font-size: 80px;
            font-weight: 800;
            color: rgba(153, 161, 175, 0.25);
            top: 10%;
            z-index: 0;
            pointer-events: none;
        }


        /*/**/
        .hero {
            display: flex;
            justify-content: center;
        }

        /* Organizamos os elementos soltos do seu HTML em um Grid */
        .hero-content {
            display: flex;
            align-items: flex-start;
            max-width: 1400px;
            text-align: left;
            align-items: center;
            gap: 0px;
            padding: 0 40px;
            width: 100%;
        }

        /* Atribuindo cada elemento para sua área no grid */
        .hero h1 {
            margin-top: 5%;
            font-size: 50px;
            width: 50%;
            line-height: 74px;
            text-align: left;
            justify-content: center;
            margin-bottom: 1%;
        }

        .hero .subtitle {
            font-size: 18px;
            line-height: 37px;
            max-width: 500px;
            text-align: left;
        }

        .hero .btn-primary {
            width: 271px;
            height: 58px;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: -77%;
            margin-top: -22%;
        }

        /* Lado Direito: A Máquina */
        .hero-image-wrap {
            width: 100%;
        }

        .hero-image-wrap img {
            margin-top: 12%;
            width: 100%;
            /* Deixa a máquina grande como na imagem */
            max-width: 700px;
            height: auto;
            filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.1));
            transform: translateX(30px);
            /* Ajuste fino de posição */
        }

        /* A Marca D'água "ZAP PRO" Vertical */
        .title-ZAP-PRO {
            display: block;
            position: absolute;
            right: -15%;
            top: 50%;
            transform: translateY(-50%);
            font-family: 'Sora', sans-serif;
            font-weight: 800;
            font-size: 130px;
            writing-mode: vertical-rl;
            pointer-events: none;
            z-index: 1;
        }



    }

    /* 2. PRODUTOS */
    .produtos {
        position: relative;
        width: 100%;
        background-color: #f8f9fa;
        overflow: hidden;
        /* Aplicação do SVG enviado no Background */

    }

    /* 1. MARCA D'ÁGUA (Atrás do Título) */
    .title-watermark {
        font-family: "Sora", sans-serif;
        font-size: 120px;
        /* Tamanho do modelo */
        font-weight: 800;
        z-index: 0;
        white-space: nowrap;
        pointer-events: none;
    }

    /* 2. HEADER DA SEÇÃO */
    .produtos-header {
        position: relative;
        z-index: 2;
        text-align: center;
        margin-top: 75px;
    }

    .produtos-header .title-main {
        font-size: 70px;
        /* Conforme o modelo */
        line-height: 74px;
        font-weight: 600;
        color: #1154bb;
        -webkit-text-stroke: 1px #1154bb;
        /* Efeito de borda azul */
        font-family: "Sora", sans-serif;
    }

    .produtos-header p {
        font-size: 25px;
        line-height: 37px;
        color: #515459;
        font-family: "Sora", sans-serif;
        max-width: 1013px;
        margin: 0 auto;
    }

    /* 3. GRID DE PRODUTOS (Transformando o carrossel) */
    .carrossel-produtos {
        display: flex;
        flex-wrap: wrap;
        /* Permite quebrar linha após o 4º item */
        justify-content: center;
        /* Centraliza a segunda linha (os 3 itens restantes) */
        gap: 40px 26px;
        /* Espaçamento vertical e horizontal */
        max-width: 1250px;
        /* Largura controlada para forçar o wrap no 4º card */
        margin: 0 auto;
        overflow: visible;

        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1012' height='879' viewBox='0 0 1012 879' fill='none'%3E%3Cpath d='M924.545 193.095C938.885 178.774 947.571 160.126 947.64 139.61C947.793 94.2686 905.392 57.2207 853.183 57.0757C829.558 57.0101 807.916 64.5413 791.339 76.8053C710.469 28.5715 612.639 0.294445 507.393 0.00226694C228.39 -0.772282 0.815891 195.762 0.00218029 437.961C-0.811876 680.263 225.556 877.955 504.441 878.729C783.443 879.503 1011.02 682.969 1011.83 440.77C1012.14 349.06 979.942 263.724 924.545 193.095ZM853.084 86.6196C886.512 86.7124 913.718 110.485 913.621 139.516C913.585 150.185 909.891 160.022 903.601 168.315C897.313 176.606 888.313 183.248 877.786 187.427C870.099 190.379 861.588 192.1 852.729 192.075C819.301 191.982 792.095 168.211 792.192 139.178C792.218 131.485 794.131 124.208 797.58 117.548C802.335 108.329 810.158 100.657 819.745 95.2467C829.566 89.7344 840.917 86.5858 853.084 86.6196ZM504.54 849.287C244.318 848.565 33.1435 664.149 33.9031 438.055C34.6627 211.962 247.072 28.8238 507.294 29.5462C604.508 29.816 694.784 55.7128 769.88 99.8275C762.518 111.501 758.339 124.826 758.291 139.084C758.139 184.427 800.537 221.475 852.748 221.62C869.168 221.665 884.535 218.014 898.14 211.59C948.83 277.18 978.333 355.942 978.048 440.676C977.17 666.77 764.761 850.01 504.54 849.287Z' fill='%23215FEA' fill-opacity='0.05'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
    }

    /* 4. O CARD (Design do Retângulo + Máquina Flutuante) */
    .card-produto {
        position: relative;
        width: 273px;
        height: 373px;
        /* Altura total do card no modelo */
        background: transparent;
        /* O fundo será o pseudo-elemento */
        border-radius: 0;
        flex: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        /* Texto na parte de baixo */
        padding-bottom: 30px;
        scroll-snap-align: unset;

        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
        z-index: 1;
    }

    /* Criando o Retângulo Azul (Rectangle no seu código) */
    .card-produto::before {
        content: "";
        position: absolute;
        top: 161px;
        /* Onde o retângulo azul começa */
        left: 0;
        width: 271px;
        height: 212px;
        background-color: #1154bb;
        border-radius: 11px;
        z-index: 1;
    }

    /* Ajustando a Imagem para "Flutuar" (top: 0) */
    .card-produto img {
        position: absolute;
        top: 0;
        /* Começa no topo do card */
        left: 50%;
        transform: translateX(-50%);
        width: 174px;
        /* Largura média do modelo */
        height: 316px;
        object-fit: contain;
        z-index: 2;
        /* Fica na frente do retângulo azul */
        filter: drop-shadow(0 15px 15px rgba(0, 0, 0, 0.2));

    }

    #img-sinuca {
        width: 300px;
    }

    #img-sinuca img {
        width: 250px;
        margin-top: 25px;
    }

    /* Título do Produto (Texto no Retângulo) */
    .card-produto span {
        position: relative;
        z-index: 3;
        font-family: "Sora", sans-serif;
        font-weight: 700;
        font-size: 20px;
        color: #ffffff;
        text-align: center;
        width: 100%;
        line-height: 1.2;
    }

    /* Escondendo a paginação mobile */
    .produtos .dots-pagination {
        display: none;
    }

    .card-produto:hover {
        /* Faz o card subir 15px e crescer levemente (apenas 3%) */
        transform: translateY(-15px) scale(1.03);
        z-index: 10;
        cursor: pointer;
    }

    /* Aplicando uma sombra mais forte no retângulo azul quando flutuar */
    .card-produto:hover::before {
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        background-color: #1565e6;
        /* Dá uma leve clareada no azul para destacar */
        transition: all 0.4s ease;
    }

    /* Faz a máquina dar um "salto" extra sutil dentro do card */
    .card-produto:hover img {
        transform: translateX(-50%) translateY(-5px);
        filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.3));
        transition: all 0.4s ease;
    }

    /* 3. GESTÃO */

    .gestao h2 {
        font-size: 60px;
        margin: 0 auto;
    }

    .gestao>p {
        font-size: 36px;
        margin-bottom: 80px;
    }

    .features-grid {
        max-width: 900px;
        margin: 0 auto 60px;
        gap: 150px;
    }

    .feature-item span {
        font-size: 30px;
        font-family: 'Sora', sans-serif;
    }

    .feature-icon {
        width: 160px;
        height: 160px;
    }

    .feature-icon img {
        width: 250px;
        max-width: none;
    }

    .feature-item:first-child .feature-icon img {
        width: 120px;
    }

    .gestao .btn-primary {
        width: 273px;
        height: 60px;
        font-size: 18px;
        border-radius: 16px;
    }

    .gestao-machine {
        width: 450px;
        right: 15%;
        bottom: -90px;
    }

    /* 4. ESTATÍSTICAS */

    .stat-item h3 {
        font-size: 60px;
        line-height: 48px;
    }

    .stat-item p {
        font-size: 25px;
        margin-top: 15px;
    }

    /* 5. TELEMETRIA */
    .telemetria {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #1154bb;
        /* Azul do design */
        color: #ffffff;
        text-align: center;
        position: relative;
        overflow: hidden;
    }

    /* Efeito de Círculo ao Fundo (Marca d'água) */
    .telemetria::before {
        content: "";
        position: absolute;
        top: 55%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 800px;
        height: 800px;
        border: 30px solid rgba(255, 255, 255, 0.05);
        border-radius: 50%;
        z-index: 0;
        pointer-events: none;
    }

    /* A "bolinha" no aro do círculo (Detalhe do design original) */
    .telemetria::after {
        content: "";
        position: absolute;
        top: 55%;
        left: calc(50% - 400px);
        /* Posiciona na borda esquerda do círculo maior */
        transform: translate(-50%, -50%);
        width: 35px;
        height: 35px;
        background-color: #1154bb;
        border: 3px solid rgba(255, 255, 255, 0.05);
        border-radius: 50%;
        z-index: 0;
    }

    /* Títulos e Subtítulos */
    .telemetria h2 {
        position: relative;
        z-index: 2;
        font-family: 'Sora', sans-serif;
        font-size: 50px;
        line-height: 1.2;
        font-weight: 600;
        margin-bottom: 20px;
        width: 100%;
        grid-column: unset;
        /* Limpa o grid antigo */
    }

    /* Efeito visual no "SEM MENSALIDADE" */
    .telemetria h2 strong {
        display: block;
        font-size: 60px;
        font-weight: 800;
        color: rgba(255, 255, 255, 0.85);
        /* Tom levemente transparente/cinza do design */
        text-transform: uppercase;
    }

    .telemetria .subtitle-telemetria {
        position: relative;
        z-index: 2;
        font-family: 'Sora', sans-serif;
        font-size: 26px;
        line-height: 1.5;
        font-weight: 400;
        margin-bottom: 150px;
        max-width: 800px;
        grid-column: unset;
    }

    /* Organizando os textos laterais para abraçarem a máquina */
    .telemetria-grid {
        position: relative;
        z-index: 2;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        max-width: 1100px;
        /* Afasta os textos do centro */
        margin: 0 auto;
        padding-bottom: 180px;
        /* Evita que o texto esmague a máquina */
        grid-column: unset;
    }

    .telemetria-grid p {
        width: 340px;
        /* Limita a largura dos textos laterais */
        font-family: 'Sora', sans-serif;
        font-size: 24px;
        line-height: 1.4;
        margin: 0;
    }

    /* A Máquina Central */
    .img-central {
        position: absolute;
        bottom: 0;
        /* Cola a máquina no fundo da seção */
        left: 50%;
        transform: translateX(-50%);
        /* Centraliza perfeitamente */
        width: 500px;
        /* Largura ideal para o design */
        max-width: 100%;
        z-index: 1;
        margin: 0;
        grid-column: unset;
        /* Limpa o grid antigo */
        grid-row: unset;
    }

    /* 6. PROBLEMAS */
    .problemas {
        background: #FFF;
        border-radius: 0 0 66px 66px;
    }

    .problemas h2 {
        font-size: 70px;
        margin-bottom: 10px;
        margin-top: 20px;
    }

    .problemas-card {
        position: relative;
        /* IMPORTANTE */
        background: #1154bb;
        max-width: 1100px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        border-radius: 24px;
        /* opcional (igual design) */
        overflow: visible;
    }

    .lista-problemas {
        max-width: 100%;
        margin-top: 40px;
        gap: 40px;
    }

    .lista-problemas li {
        font-size: 22px;
    }

    .lista-problemas li::before {
        width: 20px;
        height: 20px;
        min-width: 20px;
    }

    .problemas-card .btn-white {
        grid-column: 1;
        width: 308px;
        height: 60px;
        margin-top: 40px;
        font-size: 18px;
        margin-left: 50px;
    }

    .problemas-img {
        position: absolute;

        right: 50px;
        /* faz sair pra direita */
        bottom: -60px;
        /* faz sair pra baixo */

        max-width: 510px;
        width: 100%;
    }

    /* 7. BENEFÍCIOS (Seu pedido: Carrossel no Computador) */
    /* Substitua pelo código que alinha perfeitamente a grade 4x2 */
    .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;
    }

    /* Tamanho flexível lado a lado */

    /* 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;
    }
}





/* ============================================================
   RESET / BASE
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ============================================================
   DESKTOP — ≥ 1024px
   ============================================================ */
@media (min-width: 1024px) {

    /* ── HERO ── */
    .hero {
        display: flex;
        justify-content: center;
        padding: 20px 0;
        background-image: url('img/fundo.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .hero-content {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        max-width: 1400px;
        width: 100%;
        padding: 0 40px;
        gap: 0;
    }

    .hero-left {
        display: flex;
        flex-direction: column;
        gap: 0;
        flex: 1.2;
    }

    .hero-right {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex: 1.3;
    }

    /* Título — fluido entre 1024px e 1400px */
    .hero h1 {
        font-size: clamp(1.8rem, 3vw, 3.2rem);
        width: 100%;
        min-width: unset;
        font-weight: 800;
        line-height: 1.3;
        color: #111;
        margin-top: 5%;
        margin-bottom: 1%;
    }

    .subtitle {
        font-size: clamp(1rem, 1.3vw, 1.2rem);
        line-height: 1.7;
        color: #555;
        max-width: 500px;
        margin-bottom: 20px;
    }

    .header-tela2 {
        width: fit-content;
        padding: 6px 16px;
        border: 2px solid #1155BC;
        border-radius: 999px;
        margin-bottom: -25px;
    }

    .header-tela2 h2 {
        color: #1155BC;
        font-size: 14px;
    }

    .cadastro-form {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
        max-width: 450px;
    }

    .input-group {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .input-group label {
        font-size: 14px;
        font-weight: 600;
    }

    .input-group input {
        padding: 14px;
        border: 1px solid #ccc;
        border-radius: 8px;
        font-size: 14px;
    }

    .btn-form {
        margin-top: 10px;
        padding: 16px;
        border: none;
        border-radius: 8px;
        background: linear-gradient(90deg, #1155BC, #2B7FFF);
        color: #fff;
        font-weight: 600;
        font-size: 15px;
        cursor: pointer;
    }

    .btn-form:active {
        transform: scale(0.96);
        box-shadow: 0 2px 5px rgba(17, 85, 188, 0.15);
        filter: brightness(1.1);
    }

    /* Imagem — fluida */
    .hero-image-wrap {
        width: 100%;
        max-width: clamp(280px, 35vw, 500px);
        height: auto;
        display: block;
    }

    /* Watermark "ZAP PRO" */
    .title-ZAP-PRO {
        white-space: nowrap;
        font-weight: 800;
        color: rgba(153, 161, 175, 0.25);
        z-index: 0;
        pointer-events: none;
    }
}

/* ============================================================
   TABLET — 600px – 1023px
   ============================================================ */
@media (min-width: 600px) and (max-width: 1023px) {

    /* ── HERO ── */
    .hero {
        display: flex;
        justify-content: center;
        padding: 32px 24px 0;
        background-image: url('img/fundo.png');
        background-size: cover;
        background-position: top center;
    }

    .hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 24px;
    }

    .hero-left {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
    }

    .hero-right {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .header-tela2 {
        width: fit-content;
        padding: 6px 16px;
        border: 2px solid #1155BC;
        border-radius: 999px;
        margin-bottom: 0;
    }

    .header-tela2 h2 {
        color: #1155BC;
        font-size: 13px;
    }

    .hero h1 {
        font-size: clamp(1.5rem, 4vw, 2.2rem);
        min-width: unset;
        font-weight: 800;
        line-height: 1.35;
        color: #111;
    }

    .subtitle {
        font-size: 1rem;
        color: #555;
        margin-bottom: 4px;
    }

    .cadastro-form {
        display: flex;
        flex-direction: column;
        gap: 14px;
        width: 100%;
        max-width: 100%;
    }

    .input-group {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .input-group label {
        font-size: 14px;
        font-weight: 600;
    }

    .input-group input {
        padding: 13px 12px;
        border: 1px solid #ccc;
        border-radius: 8px;
        font-size: 16px;
        /* evita zoom iOS */
    }

    .btn-form {
        padding: 15px;
        border: none;
        border-radius: 8px;
        background: linear-gradient(90deg, #1155BC, #2B7FFF);
        color: #fff;
        font-weight: 600;
        font-size: 15px;
        cursor: pointer;
    }

    .hero-image-wrap {
        max-width: 60%;
        display: block;
        margin: 0 auto;
    }

    .title-ZAP-PRO {
        font-size: 80px;
        font-weight: 800;
        color: rgba(153, 161, 175, 0.25);
        top: 10%;
        z-index: 0;
        pointer-events: none;
    }

}