/* =========================================
   1. FONTES E VARIÁVEIS (DESIGN 2026)
   ========================================= */
@font-face {
    font-family: 'Zabal';
    src: url('./assets/fonts/Zabal-Regular.woff2') format('woff2'),
         url('./assets/fonts/Zabal-Regular.ttf') format('truetype');
    font-weight: normal;
}
@font-face {
    font-family: 'Zabal';
    src: url('./assets/fonts/Zabal-Bold.woff2') format('woff2'),
         url('./assets/fonts/Zabal-Bold.ttf') format('truetype');
    font-weight: bold;
}

:root {
    /* Cores da Identidade Visual */
    --bright-indigo: #003BF9;
    --fresh-sky: #00ACFF;
    --black: #000000;
    --azure-blue: #007AFF;
    
    /* Cores de Apoio e Modo Dark */
    --bg-light: #F8FAFC;
    --text-gray: #475569;
    --text-dark: #1e293b;
    --dark-blue: #0A0F1C;
}

/* =========================================
   2. RESET E BASE
   ========================================= */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Zabal', sans-serif; }
html { scroll-behavior: smooth; }
body { color: var(--text-dark); overflow-x: hidden; background-color: #ffffff; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* =========================================
   3. CLASSES UTILITÁRIAS E SEÇÕES
   ========================================= */
.section-white { background-color: #ffffff; padding: 100px 0; }
.section-light { background-color: var(--bg-light); padding: 100px 0; }
.section-dark { background-color: var(--dark-blue); padding: 120px 0; color: #cbd5e1; }
.section-gradient { 
    background: linear-gradient(135deg, var(--bright-indigo) 0%, var(--fresh-sky) 100%); 
    padding: 100px 0; 
    position: relative; 
    overflow: hidden; 
}
/* Efeito de luz no gradiente */
.section-gradient::before {
    content: ''; position: absolute; top: -50%; right: -20%; width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
}

.content-center { text-align: center; }
.max-800 { max-width: 800px; margin: 0 auto; }
.section-header { text-align: center; margin-bottom: 50px; }
.text-white { color: #ffffff !important; }
.opacity-80 { opacity: 0.8; }
.font-bold { font-weight: bold; }

/* =========================================
   4. TIPOGRAFIA
   ========================================= */
h2 { font-size: 2.8rem; line-height: 1.2; margin-bottom: 20px; color: var(--black); }
.section-dark h2 { color: #ffffff; }
p { font-size: 1.15rem; line-height: 1.6; color: var(--text-gray); margin-bottom: 15px; }
.section-dark p { color: #94a3b8; }

.highlight { color: var(--bright-indigo); }
.highlight-text { color: var(--bright-indigo); font-size: 1.5rem; font-weight: bold; }
.lead-text { font-size: 1.3rem; color: var(--black); }
.nota-rodape { font-size: 0.85rem; color: #94a3b8; }
.microcopy { font-size: 0.95rem; margin-top: 10px; }
.mb-30 { margin-bottom: 30px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }
.my-30 { margin: 30px 0; }
.my-40 { margin: 40px 0; }

.big-quote { font-size: 1.8rem; font-weight: bold; color: var(--bright-indigo); line-height: 1.4; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; padding: 30px 0; }
.dark-quote { color: var(--fresh-sky); border-color: rgba(255, 255, 255, 0.1); }

/* =========================================
   5. BOTÕES
   ========================================= */
.btn-primary { background: var(--bright-indigo); color: #fff; padding: 14px 28px; border-radius: 8px; text-decoration: none; font-weight: bold; display: inline-block; transition: all 0.3s ease; border: none; cursor: pointer; box-shadow: 0 4px 10px rgba(0, 59, 249, 0.2); }
.btn-primary:hover { background: var(--fresh-sky); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 172, 255, 0.3); }

.btn-outline { background: transparent; color: var(--bright-indigo); padding: 14px 28px; border-radius: 8px; text-decoration: none; font-weight: bold; display: inline-block; border: 2px solid var(--bright-indigo); transition: 0.3s; }
.btn-outline:hover { background: var(--bright-indigo); color: #fff; }

.btn-light { background: #ffffff; color: var(--bright-indigo); padding: 14px 28px; border-radius: 8px; text-decoration: none; font-weight: bold; display: inline-block; transition: all 0.3s ease; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); }
.btn-light:hover { background: var(--bg-light); transform: translateY(-3px); box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2); }

.large { padding: 16px 36px; font-size: 1.15rem; }

/* =========================================
   6. HEADER & MENU
   ========================================= */
.header { position: fixed; top: 0; width: 100%; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(0,0,0,0.05); z-index: 1000; padding: 15px 0; }
.header-container { display: flex; justify-content: space-between; align-items: center; }
.logo img { height: 45px; }
.nav-menu { display: flex; align-items: center; gap: 30px; }
.nav-link { text-decoration: none; color: var(--text-dark); font-weight: bold; transition: 0.3s; }
.nav-link:hover { color: var(--bright-indigo); }
.menu-toggle { display: none; background: none; border: none; font-size: 28px; color: var(--bright-indigo); cursor: pointer; }

/* =========================================
   7. LAYOUTS, GRIDS E CARDS
   ========================================= */
.flex-container { display: flex; align-items: center; gap: 50px; }
.flex-reverse { flex-direction: row-reverse; }
.flex-text, .flex-image { flex: 1; }
.flex-image img { max-width: 100%; border-radius: 20px; }

.passos-grid, .cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
.benef-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

.alert-box { background: rgba(0, 172, 255, 0.1); border-left: 4px solid var(--fresh-sky); padding: 20px; border-radius: 0 8px 8px 0; color: var(--text-dark); }
.passo-card { background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); border: 1px solid #f1f5f9;}
.passo-icon { font-size: 2rem; font-weight: bold; color: var(--bright-indigo); margin-bottom: 15px; }

/* Cards Efeito 2026 */
.info-card { background: #ffffff; padding: 25px; border-radius: 16px; border: 1px solid #f1f5f9; box-shadow: 0 4px 6px rgba(0,0,0,0.02); transition: all 0.3s ease; position: relative; z-index: 1; }
.info-card:hover { transform: translateY(-8px); border-color: var(--fresh-sky); box-shadow: 0 20px 40px rgba(0, 172, 255, 0.1); }
.info-card h4 { color: var(--bright-indigo); margin-bottom: 10px; font-size: 1.2rem; }

.highlight-card { background: linear-gradient(135deg, var(--bright-indigo), var(--azure-blue)); border: none; box-shadow: 0 10px 30px rgba(0, 59, 249, 0.2); }
.highlight-card h4, .highlight-card p { color: #fff; }

.lista-simples { list-style: none; }
.lista-simples li { padding: 12px 0; border-bottom: 1px solid #e2e8f0; font-weight: bold; }
.lista-white li { border-bottom: 1px solid rgba(255, 255, 255, 0.2); color: #ffffff; }

.tags-container { display: flex; flex-wrap: wrap; gap: 10px; }
.tag { background: var(--bg-light); color: var(--bright-indigo); padding: 8px 15px; border-radius: 20px; font-size: 0.9rem; font-weight: bold; border: 1px solid #e2e8f0;}

/* =========================================
   8. HERO SECTION
   ========================================= */
.hero { 
    padding: 180px 0 60px 0; /* Diminuí o padding inferior para colar mais no banner */
    background: linear-gradient(135deg, #ffffff 0%, var(--bg-light) 100%); 
}

/* Forçando a estrutura de colunas exatas para o texto não invadir a imagem */
.hero-container { 
    display: flex; 
    align-items: center; 
    justify-content: space-between;
    gap: 40px; 
}

.hero-text { 
    flex: 0 0 55%; /* Trava o texto em exatamente 55% da largura da tela */
    max-width: 55%; 
}

.hero-image { 
    flex: 0 0 45%; /* Trava a imagem nos 45% restantes */
    max-width: 45%; 
    display: flex;
    justify-content: flex-end; /* Alinha a imagem do Dr. Jorge à direita */
}

/* Ajustes finos do texto da Hero */
.badge { background: rgba(0, 172, 255, 0.1); color: var(--bright-indigo); padding: 8px 16px; border-radius: 20px; font-weight: bold; font-size: 0.9rem; display: inline-block; margin-bottom: 20px; }
.hero-text h1 { font-size: 3.5rem; margin-bottom: 20px; line-height: 1.1; word-wrap: break-word;}
.hero-bullets { list-style: none; margin-bottom: 30px; }
.hero-bullets li { margin-bottom: 10px; font-weight: bold; color: var(--text-dark); font-size: 1.1rem;}
.hero-actions { display: flex; gap: 15px; flex-wrap: wrap; }
.hero-image img { max-width: 100%; height: auto; border-radius: 20px; }

/* --- BANNER DE NOTÍCIAS (SLIDE INFINITO) --- */
.news-banner {
    width: 100%;
    background-color: var(--bright-indigo); /* Fundo Azul Forte */
    color: #ffffff;
    padding: 15px 0;
    overflow: hidden; /* Esconde o que sai da tela */
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 4px solid var(--fresh-sky); /* Detalhe azul claro na borda inferior */
}

.news-track {
    display: flex;
    gap: 50px;
    white-space: nowrap; /* Impede o texto de quebrar linha */
    /* Animação que faz o banner correr para a esquerda infinitamente */
    animation: scrollNews 35s linear infinite; 
}

.news-item {
    font-size: 1.1rem;
    font-weight: 500;
}

/* Pausa a animação se o usuário passar o mouse por cima para ler */
.news-banner:hover .news-track {
    animation-play-state: paused;
}

@keyframes scrollNews {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Vai até a metade (onde os itens duplicados começam) e reseta */
}

/* Ajuste Responsivo para Celular */
@media (max-width: 992px) {
    .hero-text, .hero-image {
        flex: 0 0 100%; /* No celular, cada um ocupa 100% (um embaixo do outro) */
        max-width: 100%;
    }
    .hero-image {
        justify-content: center;
        margin-top: 40px;
    }
    .news-item { font-size: 1rem; }
}

/* =========================================
   9. ANIMAÇÕES (CSS)
   ========================================= */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}
.floating-img { animation: float 4s ease-in-out infinite; filter: drop-shadow(0 30px 40px rgba(0,0,0,0.3)); }

/* =========================================
   10. PLANOS E PREÇOS (TOGGLE)
   ========================================= */
.toggle-container { display: flex; justify-content: center; align-items: center; gap: 15px; margin-bottom: 40px; }
.toggle-label { font-weight: bold; color: var(--text-gray); font-size: 1.1rem;}
.toggle-label.destaque { color: var(--bright-indigo); }
.switch { position: relative; display: inline-block; width: 64px; height: 36px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #cbd5e1; transition: .4s; border-radius: 36px; }
.slider:before { position: absolute; content: ""; height: 28px; width: 28px; left: 4px; bottom: 4px; background: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background: var(--bright-indigo); }
input:checked + .slider:before { transform: translateX(28px); }

.planos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; align-items: center; }
.plano-card { background: #fff; padding: 40px 30px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); text-align: center; position: relative; border: 1px solid #e2e8f0; transition: 0.3s; }
.plano-card:hover { border-color: var(--fresh-sky); }
.plano-card.destaque { border: 2px solid var(--bright-indigo); transform: scale(1.05); box-shadow: 0 20px 40px rgba(0, 59, 249, 0.1); }
.tag-recomendado { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--bright-indigo); color: white; padding: 6px 18px; border-radius: 20px; font-size: 0.85rem; font-weight: bold; }
.preco-box { margin: 25px 0; color: var(--black); }
.moeda { font-size: 1.5rem; font-weight: bold; vertical-align: top; }
.valor { font-size: 3.5rem; font-weight: bold; }
.periodo { color: var(--text-gray); }
.btn-plano { width: 100%; display: block; }

/* =========================================
   11. FAQ (SANFONA)
   ========================================= */
.faq-container { max-width: 800px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid #e2e8f0; margin-bottom: 10px; }
.faq-pergunta { width: 100%; background: none; border: none; text-align: left; padding: 20px 0; font-size: 1.15rem; font-weight: bold; color: var(--text-dark); cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: 0.3s;}
.faq-pergunta:hover { color: var(--bright-indigo); }
.faq-resposta { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
.faq-resposta p { padding-bottom: 20px; color: var(--text-gray);}

/* =========================================
   12. FOOTER
   ========================================= */
.footer { background: #0A0F1C; color: #94a3b8; padding: 80px 0 30px 0; border-top: 5px solid var(--bright-indigo);}
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; margin-bottom: 50px; }
.footer-logo { filter: brightness(0) invert(1); height: 50px; }
.footer h4 { color: #fff; margin-bottom: 20px; font-size: 1.2rem;}
.footer-col a { display: block; color: #94a3b8; text-decoration: none; margin-bottom: 12px; transition: 0.3s; }
.footer-col a:hover { color: var(--fresh-sky); padding-left: 5px;}
.footer-legal { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 30px; text-align: center; font-size: 0.85rem; line-height: 1.6;}

/* =========================================
   13. RESPONSIVIDADE (MOBILE & TABLET)
   ========================================= */
@media (max-width: 992px) {
    h2 { font-size: 2.4rem; }
    .flex-container { flex-direction: column; text-align: center; }
    .hero-container { flex-direction: column; text-align: center; }
    .hero-actions { justify-content: center; }
    .hero-text h1 { font-size: 2.8rem; }
    .plano-card.destaque { transform: scale(1); }
    .tags-container { justify-content: center; }
    .section-gradient::before { display: none; }
}

@media (max-width: 768px) {
    .nav-menu { display: none; flex-direction: column; position: absolute; top: 75px; left: 0; width: 100%; background: #fff; padding: 20px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
    .nav-menu.active { display: flex; }
    .nav-link { padding: 10px 0; border-bottom: 1px solid #f1f5f9; width: 100%; text-align: center;}
    .menu-toggle { display: block; }
    .hero { padding-top: 130px; }
}