/* ============================================================= * Responsive Fluid * ------------------------------------------------------------- * Substitui microbreakpoints e !important por tipografia e * espacamento fluidos com clamp(). Funciona continuamente * de ~320px ate ~1600px. * * Carregar por ultimo no para ganhar na cascata. * * Formula clamp(min, preferencial, max): * min = tamanho no menor mobile (~320px) * preferencial= escala linear por viewport (ex: 4vw) * max = teto em desktop grande * ============================================================= */ /* -- Container (fonte de verdade unica) ---------------------- */ .container { width: min(1180px, 100% - clamp(24px, 4vw, 48px)) !important; margin-inline: auto !important; /* só lateral: padding: 0 zerava o respiro vertical da navbar (.nav__inner também é .container) e o botão do header ficava colado nas bordas */ padding-inline: 0 !important; } /* -- Hero base ----------------------------------------------- */ .hero { padding-block: clamp(72px, 10vw + 24px, 120px) !important; min-height: clamp(360px, 55vh, 650px) !important; } /* Preserva o recuo lateral do container dentro do hero. * Nao redefinir width aqui — herda da regra .container acima. */ .hero__grid { width: 100% !important; } /* -- Bloco de texto do hero (toda pagina) -------------------- */ .hero__text, .page-home .hero__text, .page-sobre .hero__text, .page-banking .hero__text, .page-seguros .hero__text, .page-empresas .hero__text, .page-investimentos .hero__text { width: 100% !important; max-width: 800px !important; margin-inline: 0 !important; } /* -- Tipografia fluida do hero ------------------------------- */ .hero__text h1, .page-home .hero__text h1, .page-sobre .hero__text h1, .page-banking .hero__text h1, .page-seguros .hero__text h1, .page-empresas .hero__text h1, .page-investimentos .hero__text h1 { font-size: clamp(1.75rem, 3.8vw + 0.9rem, 3.2rem) !important; line-height: 1.12 !important; max-width: none !important; /* Portugues nao lida bem com hyphens:auto — deixar o browser decidir */ hyphens: manual !important; -webkit-hyphens: manual !important; overflow-wrap: normal !important; word-break: keep-all !important; transform: none !important; /* remove translates que deslocam offscreen */ } .hero__text p, .page-home .hero__text p, .page-sobre .hero__text p, .page-banking .hero__text p, .page-seguros .hero__text p, .page-empresas .hero__text p, .page-investimentos .hero__text p { font-size: clamp(0.95rem, 0.6vw + 0.85rem, 1.2rem) !important; line-height: 1.55 !important; max-width: 62ch !important; /* segue o alinhamento do bloco: esquerda no desktop, centro no mobile */ text-align: inherit !important; transform: none !important; } .hero__note, .page-home .hero__note, .page-sobre .hero__note, .page-banking .hero__note, .page-seguros .hero__note, .page-empresas .hero__note, .page-investimentos .hero__note { font-size: clamp(0.78rem, 0.3vw + 0.72rem, 1rem) !important; transform: none !important; } /* -- Acoes do hero ------------------------------------------- */ .hero__actions, .page-home .hero__actions, .page-sobre .hero__actions, .page-banking .hero__actions, .page-seguros .hero__actions, .page-empresas .hero__actions, .page-investimentos .hero__actions { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; margin: 1.25rem 0 !important; transform: none !important; } /* -- Botoes grandes (hero e CTA) ----------------------------- */ .btn--xl, .btn--cta { font-size: clamp(1rem, 1.2vw + 0.7rem, 1.4rem) !important; padding: clamp(0.7rem, 0.6vw + 0.5rem, 1.05rem) clamp(1rem, 3vw + 0.2rem, 2.4rem) !important; min-width: 0 !important; max-width: 100% !important; border-radius: clamp(8px, 1vw, 12px) !important; transform: none !important; } /* -- Titulos gerais das secoes ------------------------------- */ h1 { font-size: clamp(1.8rem, 2.2vw + 1.1rem, 3rem) !important; } h2 { font-size: clamp(1.35rem, 1.5vw + 0.9rem, 2.2rem) !important; } h3 { font-size: clamp(1.05rem, 0.5vw + 0.9rem, 1.3rem) !important; } /* -- Hero empilhado (<=820px): tudo centralizado ------------- */ /* As paginas centralizavam titulo e nota so ate 768px e deixavam * paragrafo/botao a esquerda; entre 769 e 820 ficava misturado. */ @media (max-width: 820px) { .hero__text { text-align: center; } .hero__text p { margin-inline: auto !important; } .hero__actions { justify-content: center !important; } } /* -- Menu mobile: hambuerguer nao pode ser empurrado --------- */ @media (max-width: 940px) { .nav__inner { padding-inline: clamp(12px, 3vw, 24px) !important; } } /* -- Seguranca anti-overflow horizontal ---------------------- */ /* Só no body: no html, o clip impede o overflow do body de propagar para a janela e o body vira uma caixa de rolagem própria (quebrava /abrir-conta). */ body { overflow-x: clip; } /* Qualquer imagem/video sempre respeita o container */ img, picture, video, svg { max-width: 100%; height: auto; } /* -- Quebras "de autor" so valem no desktop ------------------ */ /* Use
para quebras que precisam sumir * em mobile (ex: quebras esteticas do hero). */ @media (max-width: 1100px) { br.br-desktop { display: none; } } /* -- Disclaimer do footer: justify so em telas largas -------- */ @media (max-width: 640px) { .footer-disclaimer, .footer-disclaimer p, .footer-disclaimer small { text-align: left !important; } }