* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', 'Segoe UI', Arial, sans-serif; } :root { --header-bg: #c4c8cc; --header-border-top: #2a2438; --logo-color: #16336b; --link-color: #1c1c1c; --link-active: #ffffff; --cta-bg: #16336b; --cta-text: #ffffff; /* hero */ --hero-text-color: #16336b; --hero-subtext-color: #2c2c2c; /* seção de planos */ --section-bg: #ffffff; --card-bg: #ffffff; --card-border: #e2e2e2; --card-shadow: rgba(0, 0, 0, 0.06); --title-color: #16336b; --text-muted: #444; --list-color: #555; } html.dark { --header-bg: #1b1e24; --header-border-top: #000000; --logo-color: #6ea8ff; --link-color: #e4e6eb; --link-active: #ffffff; --cta-bg: #6ea8ff; --cta-text: #0d1117; /* hero */ --hero-text-color: #ffffff; --hero-subtext-color: #d8dade; /* seção de planos */ --section-bg: #14161b; --card-bg: #1e2128; --card-border: #2c2f36; --card-shadow: rgba(0, 0, 0, 0.4); --title-color: #6ea8ff; --text-muted: #b8bcc4; --list-color: #9aa0a8; } html { scroll-behavior: smooth; } body { background-color: var(--header-bg); transition: background-color 0.25s ease; } ::selection { background-color: var(--cta-bg); color: var(--cta-text); } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--cta-bg); outline-offset: 3px; } /* ===== ANIMAÇÕES DE ENTRADA (scroll reveal) ===== Elementos com a classe .reveal começam levemente deslocados, menores e transparentes (dá uma sensação de "volume" crescendo até o tamanho normal) e o script.js adiciona .in-view via IntersectionObserver quando entram na tela. Quem tem JS desativado simplesmente vê tudo já visível, porque o estado inicial só é aplicado a partir de .js-ready (classe que o script.js coloca no assim que carrega). */ .reveal { opacity: 0; transform: translateY(28px) scale(0.95); } .js-ready .reveal { transition: opacity 0.7s ease, transform 0.7s ease; } .js-ready .reveal.in-view { opacity: 1; transform: translateY(0) scale(1); } .js-ready .reveal.reveal-1.in-view { transition-delay: 0.08s; } .js-ready .reveal.reveal-2.in-view { transition-delay: 0.16s; } .js-ready .reveal.reveal-3.in-view { transition-delay: 0.24s; } .js-ready .reveal.reveal-4.in-view { transition-delay: 0.32s; } /* ===== EFEITO "VOLUME" AO PASSAR O MOUSE NAS IMAGENS ===== Zoom sutil em imagens de conteúdo/fotos ao passar o mouse, dando sensação de profundidade. Fica de fora da logo e dos ícones pequenos (.logo-image / .step-icon), que já têm sua própria animação ou não fazem sentido "ganhando volume". Cada imagem precisa estar dentro de um contêiner com "overflow: hidden" pra não vazar do recorte/arredondado ao aumentar — os cartões e galerias do site já garantem isso. */ img:not(:where(.logo-image, .step-icon)) { transition: transform 0.35s ease; } img:not(:where(.logo-image, .step-icon)):hover { transform: scale(1.05); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal, .js-ready .reveal { opacity: 1; transform: none; transition: none; } img:not(:where(.logo-image, .step-icon)) { transition: none; } img:not(:where(.logo-image, .step-icon)):hover { transform: none; } } /* ===== HEADER ===== */ .header { display: flex; align-items: center; justify-content: space-between; padding: 18px 40px; background-color: var(--header-bg); border-top: 4px solid var(--header-border-top); position: sticky; top: 0; z-index: 100; box-shadow: 0 0 0 rgba(0, 0, 0, 0); transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .header.scrolled { box-shadow: 0 6px 20px var(--card-shadow); } .logo-image { height: 40px; width: auto; display: block; } .logo { font-size: 34px; font-weight: 700; color: var(--logo-color); letter-spacing: -1px; line-height: 1; transition: color 0.25s ease; } .nav { display: flex; align-items: center; gap: 32px; list-style: none; } .nav a { position: relative; color: var(--link-color); text-decoration: none; font-size: 15px; padding-bottom: 4px; transition: color 0.25s ease; } .nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background-color: var(--link-active); transition: right 0.25s ease; } .nav a:hover::after { right: 0; } .nav a.active { color: var(--link-active); } .nav a.active::after { right: 0; } .nav-cta-mobile { display: none; } .right-group { display: flex; align-items: center; gap: 18px; } /* botão hamburguer — some no desktop, aparece no breakpoint mobile lá embaixo */ .nav-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 34px; height: 34px; background: none; border: none; cursor: pointer; padding: 0; flex-shrink: 0; } .nav-toggle span { display: block; width: 22px; height: 2px; border-radius: 2px; background-color: var(--link-color); transition: transform 0.3s ease, opacity 0.2s ease, background-color 0.25s ease; } .nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.active span:nth-child(2) { opacity: 0; } .nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .cta { display: flex; align-items: center; gap: 6px; padding: 10px 22px; background-color: var(--cta-bg); color: var(--cta-text); border: none; border-radius: 20px; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; } .cta:hover { transform: translateY(-2px); box-shadow: 0 8px 18px var(--card-shadow); filter: brightness(1.08); } .cta:active { transform: translateY(0); filter: brightness(0.96); } .theme-toggle { background: none; border: none; border-radius: 50%; cursor: pointer; font-size: 20px; line-height: 1; padding: 4px; color: var(--link-color); transition: color 0.25s ease, transform 0.35s ease, background-color 0.25s ease; } .theme-toggle:hover { transform: rotate(18deg) scale(1.1); background-color: var(--card-shadow); } /* ===== HERO ===== */ .hero { display: flex; align-items: center; justify-content: space-between; gap: 40px; min-height: 70vh; padding: 0 60px; } .hero-text { flex: 1; max-width: 550px; } .hero-text h1 { font-size: 42px; font-weight: 700; color: var(--hero-text-color); margin-bottom: 12px; transition: color 0.25s ease; } .hero-text h2 { font-size: 20px; font-weight: 500; color: var(--hero-subtext-color); margin-bottom: 8px; transition: color 0.25s ease; } .hero-text h3 { font-size: 16px; font-weight: 400; color: var(--hero-subtext-color); margin-bottom: 24px; transition: color 0.25s ease; } .whatsapp-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; margin-top: 16px; background-color: #25D366; color: #ffffff; text-decoration: none; font-weight: 600; border-radius: 24px; transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; } .whatsapp-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(37, 211, 102, 0.35); filter: brightness(1.05); } .whatsapp-btn:active { transform: translateY(0); filter: brightness(0.96); } .hero-video { flex: 1; max-width: 620px; border-radius: 12px; } .hero-video video, .hero-video iframe { width: 100%; height: auto; object-fit: contain; border-radius: 12px; animation: heroFloat 5s ease-in-out infinite; } @keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @media (prefers-reduced-motion: reduce) { .hero-video video, .hero-video iframe { animation: none; } } /* ===== CARROSSEL DO HERO ===== */ .hero-carousel { position: relative; overflow: hidden; border-radius: 12px; } .hero-carousel-track { position: relative; width: 100%; aspect-ratio: 4 / 3; /* fallback até o JS aplicar a proporção real da imagem ativa */ } .hero-carousel-slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.4s ease; } .hero-carousel-slide.is-active { opacity: 1; visibility: visible; animation: heroFloat 5s ease-in-out infinite; } .hero-carousel-slide .hero-img { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; } .hero-carousel-slide.is-dark-bg { background-color: #0f1a2e; } @media (prefers-reduced-motion: reduce) { .hero-carousel-slide.is-active { animation: none; } } .hero-carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; border-radius: 50%; background-color: var(--card-bg); color: var(--title-color); box-shadow: 0 4px 14px var(--card-shadow); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.25s ease; z-index: 2; } .hero-carousel-arrow svg { width: 20px; height: 20px; } .hero-carousel-arrow:hover { transform: translateY(-50%) scale(1.08); box-shadow: 0 6px 18px var(--card-shadow); } .hero-carousel-arrow:active { transform: translateY(-50%) scale(0.96); } .hero-carousel-prev { left: 12px; } .hero-carousel-next { right: 12px; } .hero-carousel-dots { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 8px; z-index: 2; } .hero-carousel-dot { width: 9px; height: 9px; border: none; border-radius: 50%; background-color: var(--card-bg); opacity: 0.6; cursor: pointer; padding: 0; transition: opacity 0.2s ease, transform 0.2s ease; } .hero-carousel-dot.is-active { opacity: 1; transform: scale(1.2); } /* ===== SEÇÃO SEGURANÇA / PLANOS ===== */ .container { padding: 80px 60px; background-color: var(--section-bg); transition: background-color 0.25s ease; } .content h1 { font-size: 32px; margin-bottom: 16px; color: var(--title-color); transition: color 0.25s ease; } .content p { font-size: 16px; line-height: 1.6; color: var(--text-muted); margin-bottom: 12px; transition: color 0.25s ease; } .section-title { text-align: center; margin-bottom: 48px; } .section-title h1 { font-size: 40px; font-weight: 700; color: var(--title-color); margin-bottom: 12px; transition: color 0.25s ease; } .section-title p { font-size: 18px; color: var(--text-muted); transition: color 0.25s ease; } .plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .plan-card { background-color: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; box-shadow: 0 8px 24px var(--card-shadow); padding: 32px 24px; display: flex; flex-direction: column; text-align: center; transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; } .plan-card:hover { transform: translateY(-8px); border-color: var(--cta-bg); box-shadow: 0 16px 34px var(--card-shadow); } .plan-card h3 { font-size: 20px; font-weight: 700; color: var(--link-color); margin-bottom: 16px; transition: color 0.25s ease; } .plan-subtitle { font-size: 16px; font-weight: 600; color: var(--title-color); margin-bottom: 20px; line-height: 1.4; transition: color 0.25s ease; } .plan-card ul { list-style: disc; text-align: left; padding-left: 20px; margin-bottom: 24px; color: var(--list-color); font-size: 14px; line-height: 1.8; transition: color 0.25s ease; } .simular-btn { margin-top: auto; background-color: var(--cta-bg); color: var(--cta-text); text-decoration: none; font-weight: 600; font-size: 15px; padding: 12px 0; border-radius: 24px; text-align: center; transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease, filter 0.2s ease; } .simular-btn:hover { transform: translateY(-2px); filter: brightness(1.08); } .simular-btn:active { transform: translateY(0); filter: brightness(0.96); } @media (max-width: 1024px) { .plans { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .plans { grid-template-columns: 1fr; } } /* ===== SEÇÃO EMPRÉSTIMOS / COMO FUNCIONA ===== */ .emprestimos { padding: 80px 60px; background-color: var(--section-bg); text-align: center; transition: background-color 0.25s ease; } .emprestimos .section-title h1 { font-size: 40px; font-weight: 700; color: var(--title-color); margin-bottom: 12px; transition: color 0.25s ease; } .emprestimos .section-title h3 { font-size: 20px; font-weight: 500; color: var(--link-color); margin-bottom: 8px; transition: color 0.25s ease; } .emprestimos .section-title p { font-size: 16px; color: var(--text-muted); transition: color 0.25s ease; } .steps-label { font-size: 16px; font-weight: 600; color: var(--link-color); margin: 32px 0 24px; transition: color 0.25s ease; } .steps-bar { display: flex; align-items: center; justify-content: center; max-width: 700px; margin: 0 auto 48px; } .step-number { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background-color: var(--cta-bg); color: var(--cta-text); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; transition: background-color 0.25s ease, color 0.25s ease; } .step-line { flex: 1; height: 3px; background-color: var(--cta-bg); transition: background-color 0.25s ease; } .steps-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1000px; margin: 0 auto 48px; } .step-card { background-color: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; box-shadow: 0 8px 24px var(--card-shadow); padding: 28px 24px; text-align: left; transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; } .step-card:hover { transform: translateY(-6px); border-color: var(--cta-bg); box-shadow: 0 14px 30px var(--card-shadow); } .step-card:hover .step-icon { transform: scale(1.08); } /* essa regra estava faltando — sem ela, o navegador exibe o ícone no tamanho original do arquivo (por isso ficou gigante) */ .step-icon { width: 40px; height: 40px; object-fit: contain; margin-bottom: 16px; display: block; transition: transform 0.25s ease; } .step-card h4 { font-size: 22px; font-weight: 700; color: var(--link-color); margin-bottom: 10px; transition: color 0.25s ease; } .step-card p { font-size: 14px; color: var(--list-color); line-height: 1.5; transition: color 0.25s ease; } /* botão "SIMULAR" grande — usado em .emprestimos, .dados e .parceiros. também estava faltando: por isso os links viravam texto roxo sublinhado padrão do navegador */ .simular-btn-large { display: inline-block; background-color: var(--cta-bg); color: var(--cta-text); text-decoration: none; font-weight: 700; font-size: 15px; letter-spacing: 0.5px; padding: 16px 60px; border-radius: 30px; transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; } .simular-btn-large:hover { transform: translateY(-2px); box-shadow: 0 12px 26px var(--card-shadow); filter: brightness(1.08); } .simular-btn-large:active { transform: translateY(0); filter: brightness(0.96); } @media (max-width: 900px) { .steps-cards { grid-template-columns: 1fr; } .steps-bar { max-width: 300px; } } /* ===== SEÇÃO DADOS / GRÁFICO ===== */ .dados { display: flex; align-items: center; justify-content: center; gap: 60px; padding: 80px 60px; background-color: var(--section-bg); transition: background-color 0.25s ease; } .dados-img { max-width: 420px; width: 100%; height: auto; border-radius: 24px; flex-shrink: 0; } .dados h3 { font-size: 36px; font-weight: 700; color: var(--link-color); line-height: 1.25; margin-bottom: 16px; transition: color 0.25s ease; } .dados p { font-size: 17px; color: var(--text-muted); margin-bottom: 28px; transition: color 0.25s ease; } .dados-text { max-width: 480px; } @media (max-width: 900px) { .dados { flex-direction: column; text-align: center; } .dados-text { max-width: 100%; } } /* ===== SEÇÃO PARCEIROS ===== */ .parceiros-topo { text-align: center; padding: 60px 40px 40px; background-color: var(--header-bg); transition: background-color 0.25s ease; } .parceiros-topo h2 { font-size: 32px; font-weight: 700; color: var(--link-color); max-width: 800px; margin: 0 auto 16px; line-height: 1.3; transition: color 0.25s ease; } .parceiros-topo p { font-size: 17px; color: var(--text-muted); max-width: 600px; margin: 0 auto 28px; transition: color 0.25s ease; } .parceiros-topo .simular-btn-large { display: inline-block; margin-bottom: 32px; } .parceiros-label { display: block; font-size: 15px; font-weight: 700; color: var(--link-color); transition: color 0.25s ease; } .parceiros-carrossel { position: relative; display: flex; align-items: center; background-color: var(--section-bg); padding: 40px 60px; transition: background-color 0.25s ease; } .carrossel-logos { display: flex; align-items: center; justify-content: center; gap: 32px; overflow-x: auto; scroll-behavior: smooth; flex: 1; scrollbar-width: none; } .carrossel-logos::-webkit-scrollbar { display: none; } /* cada logo ganha um "chip" branco fixo, em vez de ficar solto com tamanho variável — é isso que estava deixando tudo torto e espremido na versão anterior */ .logo-chip { flex-shrink: 0; width: 130px; height: 70px; background-color: #ffffff; border-radius: 12px; display: flex; align-items: center; justify-content: center; padding: 12px 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); transition: transform 0.25s ease, box-shadow 0.25s ease; } .logo-chip:hover { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14); } .logo-chip img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .carrossel-seta { background: none; border: none; border-radius: 50%; font-size: 28px; color: var(--text-muted); cursor: pointer; padding: 0 12px; flex-shrink: 0; transition: color 0.2s ease, transform 0.2s ease, background-color 0.2s ease; } .carrossel-seta:hover { color: var(--cta-bg); transform: scale(1.15); } .carrossel-seta:active { transform: scale(0.95); } @media (max-width: 700px) { .carrossel-logos { justify-content: flex-start; } } /* ===== SEÇÃO FAQ ===== */ .faq-section { padding: 80px 60px; background-color: var(--section-bg); transition: background-color 0.25s ease; } .faq-title { text-align: center; font-size: 32px; font-weight: 700; color: var(--title-color); margin-bottom: 40px; transition: color 0.25s ease; } .faq-list { max-width: 850px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; } .faq-item { background-color: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; overflow: hidden; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .faq-item:hover { border-color: var(--cta-bg); transform: translateY(-2px); } .faq-item.active { border-color: var(--cta-bg); box-shadow: 0 8px 20px var(--card-shadow); } .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; background: none; border: none; cursor: pointer; text-align: left; font-family: inherit; font-size: 16px; font-weight: 600; color: var(--link-color); transition: color 0.2s ease; } .faq-icon { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background-color: var(--cta-bg); color: var(--cta-text); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; line-height: 1; transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease; } .faq-item.active .faq-icon { transform: rotate(180deg); } .faq-answer { max-height: 0; overflow: hidden; padding: 0 24px; transition: max-height 0.3s ease, padding 0.3s ease; } .faq-item.active .faq-answer { padding: 0 24px 22px; } .faq-answer p { font-size: 15px; line-height: 1.6; color: var(--text-muted); transition: color 0.25s ease; } @media (max-width: 600px) { .faq-section { padding: 60px 20px; } .faq-question { font-size: 15px; padding: 16px 18px; } } .footer { background-color: var(--header-bg); border-top: 4px solid var(--header-border-top); padding: 32px 60px; transition: background-color 0.25s ease, border-color 0.25s ease; } .footer-content { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1200px; margin: 0 auto; flex-wrap: wrap; } .footer-logo { font-size: 28px; font-weight: 700; color: var(--logo-color); letter-spacing: -1px; line-height: 1; transition: color 0.25s ease; } .footer-content p { font-size: 14px; color: var(--text-muted); transition: color 0.25s ease; } .footer-nav { display: flex; align-items: center; gap: 28px; list-style: none; } .footer-nav a { color: var(--link-color); text-decoration: none; font-size: 14px; transition: color 0.25s ease; } .footer-nav a:hover { color: var(--cta-bg); } .footer-social { display: flex; align-items: center; gap: 12px; list-style: none; } .footer-social a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background-color: var(--cta-bg); color: var(--cta-text); transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease; } .footer-social a:hover { transform: translateY(-3px); box-shadow: 0 8px 16px var(--card-shadow); } .footer-social svg { width: 18px; height: 18px; } @media (max-width: 700px) { .footer-content { flex-direction: column; text-align: center; } } .footer-legal { max-width: 1200px; margin: 20px auto 0; padding-top: 20px; border-top: 1px solid var(--header-border-top); } .footer-legal p { font-size: 11px; line-height: 1.6; color: var(--text-muted); text-align: justify; } .footer-legal p + p { margin-top: 10px; } .footer-bottom { max-width: 1200px; margin: 16px auto 0; } .footer-legal-links { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; row-gap: 8px; list-style: none; } .footer-legal-links li:not(:last-child)::after { content: "|"; margin: 0 12px; color: var(--text-muted); } .footer-legal-links a { color: var(--text-muted); text-decoration: none; font-size: 12px; transition: color 0.25s ease; } .footer-legal-links a:hover { color: var(--cta-bg); } .footer-legal-toggle { display: none; } @media (max-width: 700px) { .footer-legal p { text-align: left; } .footer-legal.legal-collapsed p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .footer-legal-toggle { display: inline-block; margin-top: 8px; padding: 0; background: none; border: none; font-size: 12px; font-weight: 600; color: var(--cta-bg); text-decoration: underline; cursor: pointer; } } /* =================================================================== RESPONSIVIDADE GERAL — celular e tablet Os breakpoints acima já ajustam grids específicos (planos, steps, carrossel, footer etc). Os blocos abaixo cobrem o que faltava: cabeçalho/menu, hero e o espaçamento generoso (60/80px) das seções, que ficava grande demais em telas pequenas. =================================================================== */ /* ----- Tablet: reduz respiro lateral das seções grandes ----- */ @media (max-width: 1024px) { .hero { padding: 0 40px; } .container, .emprestimos, .dados, .faq-section { padding: 64px 40px; } .parceiros-carrossel { padding: 32px 40px; } } /* ----- Menu hamburguer + hero empilhado ----- */ @media (max-width: 900px) { .header { flex-wrap: wrap; padding: 16px 24px; } .nav-toggle { display: flex; } /* CTA "SOU + BLU" sai da barra do header no mobile — ela reaparece dentro do próprio menu (via .nav-cta-mobile), então a barra fica só com logo, tema e hamburguer. */ .right-group .cta { display: none; } .nav { order: 3; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.35s ease, opacity 0.25s ease, margin-top 0.35s ease; } .nav.open { max-height: 500px; opacity: 1; margin-top: 18px; } .nav li { width: 100%; } .nav a { display: block; padding: 14px 4px; border-bottom: 1px solid var(--card-border); } .nav a::after { display: none; } .nav-cta-mobile { display: block; padding-top: 16px; } .nav-cta-mobile a { display: inline-flex; align-items: center; gap: 6px; padding: 12px 24px; background-color: var(--cta-bg); color: var(--cta-text); border-radius: 20px; font-size: 14px; font-weight: 600; text-decoration: none; transition: filter 0.2s ease; } .nav-cta-mobile a:hover { filter: brightness(1.08); } .hero { flex-direction: column; text-align: center; min-height: auto; padding: 48px 24px; gap: 32px; } .hero-text { max-width: 100%; } .hero-text .whatsapp-btn { margin-left: auto; margin-right: auto; } .hero-video { max-width: 380px; width: 100%; margin: 0 auto; } } /* ----- Celular: espaçamento e tipografia compactos ----- */ @media (max-width: 600px) { .header { padding: 14px 20px; } .container, .emprestimos, .dados, .faq-section { padding: 48px 20px; } .parceiros-topo { padding: 48px 20px 32px; } .parceiros-carrossel { padding: 24px 20px; } .footer { padding: 28px 20px; } .hero { padding: 40px 20px; } .hero-text h1 { font-size: 30px; } .hero-text h2 { font-size: 17px; } .hero-text h3 { font-size: 15px; } .section-title h1, .emprestimos .section-title h1 { font-size: 28px; } .section-title p, .emprestimos .section-title p { font-size: 15px; } .faq-title { font-size: 26px; } .dados h3 { font-size: 26px; } .dados p { font-size: 15px; } .parceiros-topo h2 { font-size: 23px; } .parceiros-topo p { font-size: 15px; } .whatsapp-btn { width: 100%; justify-content: center; text-align: center; } .simular-btn-large { width: 100%; text-align: center; padding: 14px 0; } .parceiros-topo .simular-btn-large { display: block; } } @media (max-width: 400px) { .logo-image { height: 32px; } .step-number { width: 30px; height: 30px; font-size: 13px; } }