/* ═══════════════════════════════════════════════════════════ ALLEGRO MUSIC — FOLHA DE ESTILOS Arquivo: allegro-music.css Vinculado a: allegro-music.html ÍNDICE: 1. Variáveis globais (cores, fontes, bordas) — TEMA ESCURO 2. Variáveis do tema claro 3. Reset e base 4. Barra de navegação (nav) 5. Hero (seção principal) 6. Botões reutilizáveis 7. Padrões comuns das seções 8. Seção de cursos 9. Seção de diferenciais 10. Seção de depoimentos 11. Faixa CTA (chamada para ação) 12. Seção de matrícula (formulário) 13. Rodapé (footer) 14. Responsividade (media queries) ═══════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════ 1. VARIÁVEIS GLOBAIS — TEMA ESCURO (padrão) Mexa aqui para mudar as cores do site inteiro de uma vez. Todas as seções e componentes referenciam essas variáveis. ═══════════════════════════════════════════════════════════ */ :root { /* ── Fundos (do mais escuro ao mais claro) ── */ --bg: #03080f; /* fundo principal da página */ --bg2: #060d18; /* fundo de seções alternadas (diferenciais, matrícula) */ --bg3: #0a1628; /* fundo dos campos de formulário */ --surface: #0d1e35; /* fundo dos cards (cursos, depoimentos) */ --surface2: #102440; /* fundo de cards em hover / destaque */ /* ── Bordas ── */ --border: rgba(59,130,246,0.15); /* borda padrão dos cards (sutil) */ --border2: rgba(59,130,246,0.3); /* borda em hover e destaque */ /* ── Cores de destaque ── */ --blue: #3b82f6; /* azul principal — botões, links, ícones */ --blue-light: #60a5fa; /* azul claro — palavras em destaque no título, hover */ --blue-dim: rgba(59,130,246,0.12); /* azul suavíssimo — fundo de ícones e badges */ --red: #ef4444; /* vermelho — badge "Exclusivo" e ponto piscante */ /* ── Cores de texto ── */ --text: #e8f0fe; /* texto principal (títulos, parágrafos) */ --text2: #8ba8c9; /* texto secundário (descrições, subtítulos) */ --text3: #4d6a8a; /* texto terciário (placeholders, rodapé, notas) */ /* ── Fontes ── Para trocar: altere os nomes aqui E no do Google Fonts no HTML */ --font-display: 'Outfit', sans-serif; /* títulos h1, h2, nomes de cursos */ --font-body: 'Manrope', sans-serif; /* parágrafos, labels, botões */ /* ── Bordas arredondadas ── */ --radius: 12px; /* padrão */ --radius-sm: 8px; /* pequeno — inputs, ícones quadrados */ --radius-xl: 20px; /* grande — cards de cursos e diferenciais */ /* ── Animações de transição ── Aumentar o valor (ex: 0.5s) deixa as transições mais lentas */ --t: 0.3s cubic-bezier(0.4,0,0.2,1); } /* ═══════════════════════════════════════════════════════════ 2. VARIÁVEIS DO TEMA CLARO Sobrescreve apenas as cores quando data-theme="light" está no . O JS no final do HTML faz essa troca. ═══════════════════════════════════════════════════════════ */ [data-theme="light"] { --bg: #f4f7fb; --bg2: #edf1f8; --bg3: #e3eaf5; --surface: #ffffff; --surface2: #f0f4fb; --border: rgba(37,99,235,0.14); --border2: rgba(37,99,235,0.35); --blue: #2563eb; --blue-light: #1d4ed8; --blue-dim: rgba(37,99,235,0.08); --red: #dc2626; --text: #0c1828; --text2: #3a5a82; --text3: #7a9cbf; } /* ═══════════════════════════════════════════════════════════ 3. RESET E BASE ═══════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; /* scroll suave nativo (reforçado pelo JS) */ } body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.6; transition: background var(--t), color var(--t); /* transição ao trocar o tema */ overflow-x: hidden; /* evita scroll horizontal indesejado */ } /* ═══════════════════════════════════════════════════════════ 4. BARRA DE NAVEGAÇÃO Fixa no topo. Fundo semitransparente com efeito de vidro. Para mudar a cor de fundo: ajuste os rgba() abaixo. ═══════════════════════════════════════════════════════════ */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; /* fica na frente de tudo */ display: flex; align-items: center; justify-content: space-between; padding: 1rem 2.5rem; background: rgba(3,8,15,0.88); /* escuro semitransparente no tema dark */ backdrop-filter: blur(20px); /* efeito de vidro fosco atrás da nav */ border-bottom: 1px solid var(--border); transition: background var(--t); } [data-theme="light"] nav { background: rgba(244,247,251,0.92); /* claro semitransparente no tema light */ } /* Logo "AllegroMusic" no canto esquerdo */ .nav-logo { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--blue-light); /* "Allegro" em azul */ letter-spacing: -0.03em; text-decoration: none; } .nav-logo span { color: var(--text); /* "Music" em cor neutra */ } /* Grupo de links do menu */ .nav-links { display: flex; align-items: center; gap: 2rem; } .nav-links a { font-size: 0.875rem; font-weight: 500; color: var(--text2); text-decoration: none; transition: color var(--t); } .nav-links a:hover { color: var(--blue-light); } /* Botão "Matricule-se" na nav (pill azul) */ .nav-cta { background: var(--blue) !important; color: #fff !important; padding: 0.5rem 1.25rem !important; border-radius: 100px; transition: opacity var(--t) !important; } .nav-cta:hover { opacity: 0.85 !important; } /* Botão ☀️/🌙 de alternar tema */ .theme-btn { background: var(--surface); border: 1px solid var(--border2); border-radius: 100px; padding: 0.4rem 0.8rem; cursor: pointer; font-size: 0.95rem; transition: background var(--t); display: flex; align-items: center; gap: 5px; color: var(--text2); font-family: var(--font-body); } .theme-btn:hover { background: var(--surface2); } /* ═══════════════════════════════════════════════════════════ 5. HERO — SEÇÃO PRINCIPAL Ocupa 100% da altura da tela. FOTO DE FUNDO: troque a URL em .hero-bg-img OVERLAY: ajuste o gradiente em .hero-bg-img::after → Aumente a opacidade (ex: 0.97 → 0.99) para escurecer mais → Mova a porcentagem do gradiente para revelar mais/menos a foto ═══════════════════════════════════════════════════════════ */ .hero { min-height: 100vh; display: flex; align-items: center; padding: 8rem 2.5rem 5rem; position: relative; overflow: hidden; } /* Container das camadas de fundo */ .hero-bg { position: absolute; inset: 0; /* ocupa tudo: top/right/bottom/left = 0 */ z-index: 0; } /* ↓ TROQUE A URL AQUI PARA MUDAR A FOTO DE FUNDO DO HERO ↓ */ .hero-bg-img { position: absolute; inset: 0; z-index: 0; background: url('./ChatGPT\ Image\ 3\ de\ jun.\ de\ 2026\,\ 13_26_48.png') center / cover no-repeat; } /* Overlay escuro sobre a foto — garante que o texto seja legível Gradiente da esquerda (escuro) para a direita (mais transparente) */ .hero-bg-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(3,8,15,0.97) 0%, /* lado esquerdo: quase opaco */ rgba(3,8,15,0.88) 45%, /* centro: semitransparente */ rgba(3,8,15,0.55) 100% /* lado direito: mais transparente (foto aparece) */ ); } /* Versão do overlay para o tema claro */ [data-theme="light"] .hero-bg-img::after { background: linear-gradient( 90deg, rgba(244,247,251,0.97) 0%, rgba(244,247,251,0.88) 45%, rgba(244,247,251,0.5) 100% ); } /* Conteúdo textual (fica na frente das camadas de fundo) */ .hero-content { position: relative; z-index: 1; max-width: 680px; } /* Badge "Vagas abertas · Santa Luzia/MG" */ .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--blue-dim); border: 1px solid var(--border2); padding: 0.375rem 1rem; border-radius: 100px; font-size: 0.78rem; font-weight: 600; color: var(--blue-light); margin-bottom: 1.5rem; text-transform: uppercase; letter-spacing: 0.07em; animation: fadeUp 0.6s ease both; } /* Ponto vermelho piscante dentro do badge */ .hero-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); animation: pulse 2s ease infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(1.5); } } /* Título principal h1 clamp(mínimo, preferido, máximo) — responsivo sem media query */ h1 { font-family: var(--font-display); font-size: clamp(2.8rem, 6vw, 5rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.045em; color: var(--text); margin-bottom: 1.25rem; animation: fadeUp 0.6s 0.1s ease both; } h1 em { font-style: normal; color: var(--blue-light); /* palavra em azul dentro do título */ } /* Subtítulo do hero */ .hero-sub { font-size: 1.1rem; color: var(--text2); max-width: 500px; margin-bottom: 2rem; font-weight: 300; line-height: 1.75; animation: fadeUp 0.6s 0.2s ease both; } /* Grupo de botões */ .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; animation: fadeUp 0.6s 0.3s ease both; } /* Animação de entrada usada em vários elementos do hero */ @keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } /* ═══════════════════════════════════════════════════════════ 6. BOTÕES REUTILIZÁVEIS Três variações usadas em todo o site. ═══════════════════════════════════════════════════════════ */ /* Azul sólido — CTA principal */ .btn-primary { background: var(--blue); color: #fff; padding: 0.9rem 2rem; border-radius: 100px; font-weight: 600; font-size: 0.95rem; text-decoration: none; border: none; cursor: pointer; transition: opacity var(--t), transform var(--t); display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); } .btn-primary:hover { opacity: 0.86; transform: translateY(-2px); } /* Transparente com borda — ação secundária */ .btn-ghost { background: transparent; color: var(--text2); padding: 0.9rem 2rem; border-radius: 100px; border: 1px solid var(--border2); font-weight: 500; font-size: 0.95rem; text-decoration: none; cursor: pointer; transition: all var(--t); font-family: var(--font-body); } .btn-ghost:hover { color: var(--text); border-color: var(--blue); } /* Branco sólido — usado na faixa CTA (fundo azul/escuro) */ .btn-white { background: #fff; color: var(--blue); padding: 0.9rem 2.25rem; border-radius: 100px; font-weight: 700; font-size: 0.95rem; text-decoration: none; display: inline-block; transition: opacity var(--t), transform var(--t); font-family: var(--font-body); } .btn-white:hover { opacity: 0.9; transform: translateY(-2px); } /* ═══════════════════════════════════════════════════════════ 7. PADRÕES COMUNS DAS SEÇÕES ═══════════════════════════════════════════════════════════ */ section { padding: 5.5rem 2.5rem; } /* Centraliza e limita a largura do conteúdo */ .container { max-width: 1100px; margin: 0 auto; } /* Label pequeno azul acima dos títulos (ex: "Instrumentos disponíveis") */ .section-label { font-size: 0.72rem; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 0.75rem; } /* Títulos h2 das seções */ h2 { font-family: var(--font-display); font-size: clamp(1.9rem, 3.5vw, 2.9rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1.08; margin-bottom: 1rem; color: var(--text); } h2 em { font-style: normal; color: var(--blue-light); /* palavra em destaque azul */ } /* Subtítulo descritivo abaixo do h2 */ .section-sub { color: var(--text2); font-size: 1rem; font-weight: 300; max-width: 500px; line-height: 1.75; } /* ═══════════════════════════════════════════════════════════ 8. SEÇÃO DE CURSOS Grade responsiva de cards. Para adicionar/remover cursos: edite os blocos .course-card no HTML. ═══════════════════════════════════════════════════════════ */ /* Grade de cards — se encaixa automaticamente na largura disponível */ .courses-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.25rem; margin-top: 3rem; } /* Card individual de cada curso */ .course-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 1.75rem 1.5rem 1.5rem; transition: border-color var(--t), transform var(--t); position: relative; overflow: hidden; cursor: default; } .course-card:hover { border-color: var(--blue); transform: translateY(-5px); /* sobe levemente no hover */ } .course-icon { font-size: 2.2rem; margin-bottom: 1rem; } /* emoji */ .course-name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.5rem; } .course-desc { font-size: 0.875rem; color: var(--text2); line-height: 1.65; margin-bottom: 1.25rem; } .course-cta { display: inline-block; font-size: 0.82rem; font-weight: 600; color: var(--blue-light); text-decoration: none; } /* Brilho decorativo no canto inferior direito do card */ .course-glow { position: absolute; bottom: -30px; right: -20px; width: 90px; height: 90px; border-radius: 50%; background: var(--blue-dim); filter: blur(22px); pointer-events: none; } /* ═══════════════════════════════════════════════════════════ 9. SEÇÃO DE DIFERENCIAIS ═══════════════════════════════════════════════════════════ */ #diferenciais { background: var(--bg2); } /* fundo levemente diferente */ .diff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; margin-top: 3rem; } .diff-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 2rem; transition: border-color var(--t); } .diff-card:hover { border-color: var(--border2); } /* Card em destaque — borda azul visível */ .diff-card.featured { border-color: var(--blue); } /* Badge vermelho "Exclusivo" */ .featured-badge { display: inline-block; background: var(--red); color: #fff; font-size: 0.68rem; font-weight: 700; padding: 3px 10px; border-radius: 100px; text-transform: uppercase; letter-spacing: 0.09em; margin-bottom: 0.9rem; } /* Quadrado com emoji de ícone */ .diff-icon { width: 46px; height: 46px; border-radius: var(--radius-sm); background: var(--blue-dim); border: 1px solid var(--border2); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 1.1rem; } .diff-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; margin-bottom: 0.5rem; } .diff-desc { font-size: 0.875rem; color: var(--text2); line-height: 1.7; } /* ═══════════════════════════════════════════════════════════ 10. SEÇÃO DE DEPOIMENTOS ═══════════════════════════════════════════════════════════ */ .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; margin-top: 3rem; } .testi-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 1.75rem; } /* Texto do depoimento com aspas decorativas */ .testi-text { font-size: 0.9rem; color: var(--text2); line-height: 1.75; margin-bottom: 1.25rem; font-style: italic; } .testi-text::before { content: '"'; /* aspas de abertura */ color: var(--blue); font-size: 1.5rem; line-height: 0; vertical-align: -0.4rem; margin-right: 2px; font-style: normal; } /* Rodapé do card: avatar + nome + papel */ .testi-author { display: flex; align-items: center; gap: 10px; } .testi-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--blue-dim); border: 1px solid var(--border2); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; color: var(--blue-light); flex-shrink: 0; } .testi-name { font-size: 0.82rem; font-weight: 600; } .testi-role { font-size: 0.75rem; color: var(--text3); } /* ═══════════════════════════════════════════════════════════ 11. FAIXA CTA (chamada para ação com foto de fundo) FOTO DE FUNDO: troque a URL em .cta-band-bg COR DO OVERLAY: ajuste rgba() em .cta-band-bg::after → Aumente 0.82 para deixar mais escuro (ex: 0.9) → Mude a cor de rgba(30,64,175,...) para outra se quiser ═══════════════════════════════════════════════════════════ */ .cta-section { padding: 2rem 2.5rem 5rem; } /* seção wrapper com padding reduzido no topo */ .cta-band { border-radius: var(--radius-xl); padding: 3.5rem 3rem; text-align: center; position: relative; overflow: hidden; } /* ↓ TROQUE A URL AQUI PARA MUDAR A FOTO DE FUNDO DA FAIXA CTA ↓ */ .cta-band-bg { position: absolute; inset: 0; z-index: 0; background: url('https://images.pexels.com/photos/18940651/pexels-photo-18940651.jpeg') center / cover no-repeat; } /* Overlay azul sobre a foto Ajuste o último valor (0.82 = 82% de opacidade) para mais/menos transparente */ .cta-band-bg::after { content: ''; position: absolute; inset: 0; background: rgba(30, 64, 175, 0.82); } /* Conteúdo na frente do overlay */ .cta-band-inner { position: relative; z-index: 1; } .cta-band h2 { color: #fff; margin-bottom: 0.75rem; } .cta-band p { color: rgba(255,255,255,0.85); margin-bottom: 2rem; max-width: 480px; margin-left: auto; margin-right: auto; font-size: 1rem; } /* ═══════════════════════════════════════════════════════════ 12. SEÇÃO DE MATRÍCULA (formulário) ═══════════════════════════════════════════════════════════ */ #matricula { background: var(--bg2); } /* Grade de 2 colunas: info (esq) + formulário (dir) */ .form-wrap { display: grid; grid-template-columns: 1fr 1.3fr; /* coluna do form levemente mais larga */ gap: 3.5rem; margin-top: 3rem; align-items: start; } /* ── Coluna esquerda: textos e contatos ── */ .form-info-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.04em; margin-bottom: 1rem; } .form-info-text { color: var(--text2); font-size: 0.9rem; line-height: 1.8; margin-bottom: 1.75rem; } /* Lista de benefícios */ .form-perks { list-style: none; display: flex; flex-direction: column; gap: 0.8rem; } .form-perks li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.875rem; color: var(--text2); line-height: 1.5; } .perk-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--blue); margin-top: 0.5rem; flex-shrink: 0; } /* Links de contato */ .contact-links { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.6rem; } .contact-link { display: flex; align-items: center; gap: 0.6rem; font-size: 0.82rem; color: var(--text3); text-decoration: none; transition: color var(--t); } .contact-link:hover { color: var(--blue-light); } .contact-link span { font-size: 1rem; } /* ── Coluna direita: card do formulário ── */ .enrollment-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 2.5rem; } .form-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; margin-bottom: 0.2rem; } .form-subtitle { font-size: 0.8rem; color: var(--text3); margin-bottom: 2rem; } /* Subtítulo interno com divisória (ex: "Dados pessoais") */ .form-section-title { font-size: 0.72rem; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: 0.1em; margin: 1.5rem 0 1rem; border-top: 1px solid var(--border); padding-top: 1.25rem; } .form-section-title:first-of-type { margin-top: 0; border-top: none; padding-top: 0; } /* Campos individuais */ .form-group { margin-bottom: 1.1rem; } .form-group label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--text2); margin-bottom: 0.4rem; } .form-group input, .form-group select { width: 100%; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font-body); font-size: 0.9rem; padding: 0.72rem 0.9rem; outline: none; transition: border-color var(--t); -webkit-appearance: none; /* remove estilo nativo do browser */ } .form-group input::placeholder { color: var(--text3); } .form-group input:focus, .form-group select:focus { border-color: var(--blue); } /* azul ao focar */ /* Seta personalizada nos selects (substitui a seta padrão do browser) */ .form-group select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%238ba8c9'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 15px; padding-right: 2.25rem; } /* Dois campos lado a lado */ .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } /* Botão de envio */ .form-submit { width: 100%; background: var(--blue); color: #fff; border: none; border-radius: 100px; padding: 1rem; font-family: var(--font-display); font-size: 1rem; font-weight: 700; cursor: pointer; transition: opacity var(--t), transform var(--t); margin-top: 0.75rem; letter-spacing: 0.01em; } .form-submit:hover { opacity: 0.86; transform: translateY(-1px); } .form-submit:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } /* Nota de privacidade abaixo do botão */ .form-note { font-size: 0.72rem; color: var(--text3); text-align: center; margin-top: 0.75rem; } /* Mensagem de sucesso (oculta por padrão, aparece via JS após envio) */ .form-success { display: none; text-align: center; padding: 2.5rem 1rem; } .form-success .s-icon { font-size: 3rem; margin-bottom: 1rem; } .form-success h3 { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 0.5rem; } .form-success p { color: var(--text2); font-size: 0.875rem; line-height: 1.7; } /* ═══════════════════════════════════════════════════════════ 13. RODAPÉ (FOOTER) ═══════════════════════════════════════════════════════════ */ footer { background: var(--bg); border-top: 1px solid var(--border); padding: 3rem 2.5rem 2rem; } /* Grade de 3 colunas */ .footer-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr; /* col 1 um pouco maior */ gap: 3rem; } .footer-logo { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; color: var(--blue-light); letter-spacing: -0.03em; margin-bottom: 0.5rem; } .footer-tagline { font-size: 0.82rem; color: var(--text3); line-height: 1.7; max-width: 240px; } .footer-col-title { font-size: 0.72rem; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem; } .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; } .footer-col ul li a, .footer-col ul li { font-size: 0.82rem; color: var(--text3); text-decoration: none; transition: color var(--t); line-height: 1.6; } .footer-col ul li a:hover { color: var(--blue-light); } /* Barra inferior com copyright e link do contrato */ .footer-bottom { max-width: 1100px; margin: 2rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .footer-bottom p { font-size: 0.75rem; color: var(--text3); } .footer-bottom a { font-size: 0.75rem; color: var(--text3); text-decoration: none; } .footer-bottom a:hover { color: var(--blue-light); } /* ═══════════════════════════════════════════════════════════ 14. RESPONSIVIDADE Ajustes para telas menores que 900px e 640px. ═══════════════════════════════════════════════════════════ */ /* Tablet / telas médias */ @media (max-width: 900px) { .form-wrap { grid-template-columns: 1fr; } /* formulário ocupa largura total */ .form-info { display: none; } /* oculta coluna de info (aparece no rodapé) */ .footer-inner { grid-template-columns: 1fr 1fr; } } /* Mobile */ @media (max-width: 640px) { nav { padding: 1rem 1.25rem; } /* Oculta links do menu em mobile (mantém apenas o botão CTA) */ .nav-links a:not(.nav-cta):not([data-theme-btn]) { display: none; } h1 { font-size: 2.6rem; } .hero { padding: 7rem 1.25rem 4rem; } section { padding: 4rem 1.25rem; } .cta-section { padding: 1.5rem 1.25rem 4rem; } .cta-band { padding: 2.5rem 1.5rem; } .footer-inner { grid-template-columns: 1fr; gap: 2rem; } /* Campos lado a lado viram coluna única no mobile */ .form-row { grid-template-columns: 1fr; } .enrollment-form { padding: 1.75rem 1.25rem; } }