/* Tipografia e reset básico */
:root {
--bg: #ffffff;
--surface: #ffffff;
--surface-2: #f7f9fb;
--border: #e6eaf0;
--brand-blue: #09295a;
--brand-gold: #f6dfb4;
--brand-gold-dark: #987946;
--brand-beige: #c8c2b6;
--primary: var(--brand-blue);
--primary-600: #072349;
--primary-50: #e7eef7;
--text: #0b1220;
--muted: #5a6573;
--accent: var(--brand-gold);
--maxw: 1200px;
--shadow-sm: 0 1px 2px rgba(16,24,40,0.06);
--shadow-md: 0 4px 12px rgba(16,24,40,0.08);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.7;
text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
/* Ritmo de layout e containers */
.container { padding-left: 24px; padding-right: 24px; }
@media (min-width: 1280px) { :root { --maxw: 1280px; } }
/* Alternância de fundo para seções longas */
.section-alt { background: linear-gradient(180deg, #fafbfe, #f6f8fc); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
/* Header refinado */
.site-header { box-shadow: 0 2px 10px rgba(9,41,90,0.08); }
.site-header .container { height: 88px; }
.brand { gap: 14px; }
/* Navegação mobile - versão ultra-visível */
.site-nav { display: flex; gap: 8px; align-items: center; }
.site-header .btn { display: inline-flex; }
.nav-toggle {
display: block !important;
background: linear-gradient(135deg, #f6dfb4, #987946) !important;
color: #2b2109 !important;
border: 3px solid #e8cf95 !important;
padding: 15px !important;
border-radius: 10px !important;
font-size: 24px !important;
width: 60px !important;
height: 60px !important;
cursor: pointer !important;
position: absolute !important;
top: 20px !important;
right: 20px !important;
z-index: 9999 !important;
box-shadow: 0 4px 12px rgba(152,121,70,0.3) !important;
}
/* Estilos para navegação em todas as telas */
.site-nav a {
color: #ffffff;
text-decoration: none;
font-weight: 600;
background: rgba(255,255,255,0.08);
border-radius: 12px;
padding: 12px 18px;
transition: all 0.3s ease;
font-size: 14px;
}
.site-nav a:hover {
background: rgba(255,255,255,0.15);
color: #ffffff;
}
/* Desktop */
@media (min-width: 900px) {
.nav-toggle { display: none !important; }
}
/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 22px; border-radius: 14px; border: 1px solid transparent; text-decoration: none; font-weight: 600; transition: transform .1s ease, box-shadow .2s ease, background .2s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: linear-gradient(135deg, var(--brand-blue), #0e3b7a); color: #ffffff; box-shadow: var(--shadow-md); border-color: transparent; }
.btn-primary:hover { box-shadow: 0 8px 20px rgba(9,41,90,0.25); }
.btn-outline { color: var(--brand-blue); border-color: #d6d1c9; background: #ffffff; }
.btn-outline:hover { background: #faf8f5; }
.hero-actions .btn-outline { border-color: #d6d1c9; }
/* Hero refinado (microajustes) */
.hero h1 { line-height: 1.06; margin-bottom: 18px; }
.hero p { color: #445066; }
.hero-media img { border: 1px solid #e8ecf3; }
/* Hero refinado */
.hero { padding: 140px 0 96px; }
.hero-content { max-width: 900px; }
.hero h1 { font-size: 64px; line-height: 1.08; letter-spacing: -0.8px; margin: 0 0 16px; }
.hero p { font-size: 20px; margin-bottom: 28px; }
.hero-actions { gap: 14px; }
/* CTA dourado no hero */
.hero .btn-primary { background: linear-gradient(135deg, var(--brand-gold), #e8cf95); color: #2b2109; border-color: #e6d7b3; }
.hero .btn-primary:hover { box-shadow: 0 10px 24px rgba(232,207,149,0.35); }
@media (min-width: 900px) {
.hero { padding: 120px 0 80px; }
.hero h1 { font-size: 64px; }
.hero p { font-size: 20px; }
}
/* Seções genéricas */
section { padding: 80px 0; }
section h2 { font-size: 32px; margin: 0 0 12px; letter-spacing: -0.3px; }
section p { color: var(--muted); }
/* Features */
.feature-list { display: grid; gap: 10px; padding-left: 0; list-style: none; }
.feature-list li { display: grid; grid-template-columns: 24px 1fr; align-items: start; gap: 10px; }
.feature-list li::before { content: ""; width: 24px; height: 24px; border-radius: 999px; background: url('data:image/svg+xml;utf8,') center/24px 24px no-repeat; }
/* Badges e bullets já atualizados acima */
/* Separadores dourados sutis em títulos de seção */
section h2 { position: relative; padding-bottom: 8px; }
section h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; background: linear-gradient(90deg, var(--brand-gold), var(--brand-gold-dark)); border-radius: 3px; }
/* Seções alternadas e divisores sutis */
.features { background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.team .container, .legal .container, .commitment .container { background: #ffffff; }
/* Títulos com separador dourado já aplicados */
section h2 { margin-top: 0; }
/* Cards flutuantes para seções */
.features, .team, .legal, .commitment, .about, .testimonials, .faq {
background: transparent;
border: none;
padding: 0;
}
.features .container, .team .container, .legal .container, .commitment .container,
.about .container, .testimonials .container, .faq .container {
background: #ffffff;
border-radius: 24px;
padding: 48px 40px;
margin: 32px 0;
box-shadow: 0 20px 60px rgba(9,41,90,0.08);
border: 1px solid rgba(255,255,255,0.8);
backdrop-filter: blur(10px);
}
/* Serviços em cards modernos */
.services .groups-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.services .service-card {
background: linear-gradient(145deg, #ffffff, #f8fafc);
border: 1px solid rgba(9,41,90,0.08);
border-radius: 20px;
padding: 32px 28px;
box-shadow: 0 16px 40px rgba(9,41,90,0.06);
transition: all 0.4s ease;
}
.services .service-card:hover {
transform: translateY(-8px);
box-shadow: 0 24px 60px rgba(9,41,90,0.12);
border-color: var(--brand-gold);
}
.services h3 { margin: 0 0 10px; font-size: 18px; color: var(--text); display: flex; align-items: center; gap: 10px; letter-spacing: -0.2px; }
.services h3 .badge { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: linear-gradient(180deg, var(--brand-gold), #efd79e); color: #3a2b0a; border: 1px solid #e8cf95; font-weight: 700; font-size: 14px; }
.services h3 .title { font-size: 18px; font-weight: 700; }
.services ul { padding-left: 0; display: grid; gap: 10px; margin: 10px 0 0; list-style: none; }
.services li { color: var(--muted); display: grid; grid-template-columns: 22px 1fr; align-items: start; column-gap: 10px; }
.services li::before { content: ""; width: 22px; height: 22px; border-radius: 999px; background: url('data:image/svg+xml;utf8,') center/22px 22px no-repeat; }
@media (min-width: 800px) {
.services .groups-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
.services .groups-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Features e serviços com mais profundidade */
.services .service-card { border-radius: 18px; padding: 24px; box-shadow: 0 10px 24px rgba(16,24,40,0.06); }
.services .service-card:hover { box-shadow: 0 18px 40px rgba(16,24,40,0.10); transform: translateY(-3px); }
.services h3 { font-size: 20px; }
.services ul { gap: 10px; }
/* CTAs */
.ctas { background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.ctas .cta-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.card {
background: #ffffff;
border: 1px solid #e3e0da;
border-radius: 14px;
padding: 18px;
text-decoration: none;
color: var(--text);
transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
box-shadow: var(--shadow-sm);
}
.card:hover { transform: translateY(-2px); border-color: #d6d1c9; box-shadow: var(--shadow-md); }
@media (min-width: 700px) {
.ctas .cta-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
.ctas .cta-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Footer */
.site-footer { border-top: 1px solid var(--border); background: linear-gradient(180deg, #ffffff, #f8fafc); border-top: 3px solid var(--brand-blue); }
.footer-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer-links a { color: var(--muted); text-decoration: none; }
.footer-links a:hover { color: var(--brand-blue); }
@media (min-width: 800px) {
.footer-grid { grid-template-columns: 1.5fr 1fr; }
}
/* Utilitários */
.hidden { display: none !important; }
/* Ajustes adicionais de espaçamento e features */
.features { padding-top: 24px; }
.features h2 { margin-bottom: 8px; }
.feature-list { margin-top: 12px; }
@media (min-width: 900px) {
section { padding: 96px 0; }
}
/* Tipografia */
body { font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.h-display, .hero h1 { font-family: 'Cormorant', serif; font-weight: 700; letter-spacing: 0; color: var(--primary); }
.hero h1 { color: var(--primary); }
.brand-name { font-family: 'NasalizationRG', 'Inter', sans-serif; }
/* @font-face placeholder para NasalizationRG (substituir arquivo quando disponível) */
@font-face {
font-family: 'NasalizationRG';
src: local('Nasalization'), local('NasalizationRg');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* Navegação moderna */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(9,41,90,0.95);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(255,255,255,0.1);
box-shadow: 0 2px 12px rgba(9,41,90,0.16);
}
.site-header .container { height: 100px; }
.brand { display: flex; align-items: center; gap: 12px; }
.logo { width: auto; height: 58px; max-width: 360px; object-fit: contain; filter: drop-shadow(0 1px 0 rgba(0,0,0,0.05)); }
@media (min-width: 900px) { .site-header .container { height: 112px; } .logo { height: 72px; max-width: 420px; } }
@media (max-width: 480px) { .logo { height: 56px; max-width: 300px; } .site-header .container { height: 104px; } }
/* Logo como background para maior controle de tamanho */
.logo-bg { width: 220px; height: 60px; background: url('/assets/img/logo-header.png') left center/contain no-repeat; image-rendering: -webkit-optimize-contrast; }
@media (min-width: 900px) { .logo-bg { width: 320px; height: 84px; } }
@media (max-width: 480px) { .logo-bg { width: 260px; height: 72px; } }
/* Remove estilos antigos de .logo img se existirem */
.logo { display: none; }
/* Ajuste do início do conteúdo para não parecer colado ao header */
.hero { padding-top: 188px; }
@media (min-width: 900px) { .hero { padding-top: 204px; } }
/* Header layout fix: alinhamento horizontal e sem quebra */
.site-header .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
height: 80px;
flex-wrap: nowrap;
}
.brand { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.site-nav { flex: 0 0 auto; }
.nav-toggle { flex: 0 0 auto; }
/* Regras duplicadas removidas - usando navegação simplificada acima */
/* CTA do header sempre à direita da nav */
.site-header .btn { margin-left: 12px; }
/* Menu mobile dropdown - apenas quando ativo */
@media (max-width: 899px) {
.site-nav.mobile-active {
position: fixed;
top: 100px;
left: 0;
right: 0;
background: rgba(9,41,90,0.95);
flex-direction: column;
padding: 20px;
gap: 10px;
display: flex !important;
z-index: 1000;
}
.site-nav.mobile-active a {
background: rgba(255,255,255,0.1);
border-radius: 8px;
padding: 15px;
color: #ffffff;
text-decoration: none;
font-weight: 600;
text-align: center;
border: 1px solid rgba(255,255,255,0.2);
}
}
/* Botão flutuante WhatsApp */
.whatsapp-fab {
position: fixed;
right: 18px;
bottom: 18px;
width: 56px;
height: 56px;
border-radius: 999px;
background: #25d366;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 24px rgba(0,0,0,0.25);
border: 2px solid #ffffff;
z-index: 60;
text-decoration: none;
}
.whatsapp-fab:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(0,0,0,0.3); }
@media (max-width: 420px) { .whatsapp-fab { width: 50px; height: 50px; right: 14px; bottom: 14px; } }
/* Overrides: ampliar logomarca e ajustar alturas */
.logo-bg { width: 300px; height: 90px; background-size: contain; }
@media (min-width: 900px) { .logo-bg { width: 420px; height: 110px; } }
@media (max-width: 480px) { .logo-bg { width: 320px; height: 96px; } }
.site-header .container { height: 110px; }
@media (min-width: 900px) { .site-header .container { height: 128px; } }
@media (max-width: 480px) { .site-header .container { height: 116px; } }
.hero { padding-top: 200px; }
@media (min-width: 900px) { .hero { padding-top: 228px; } }
@media (max-width: 480px) { .hero { padding-top: 200px; } }
/* Layout moderno - Hero com imagem de cidade */
.hero {
padding: 160px 0 120px;
background: url('https://images.unsplash.com/photo-1449824913935-59a10b8d2000?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') center center/cover no-repeat;
color: #ffffff;
position: relative;
overflow: hidden;
min-height: 100vh;
display: flex;
align-items: center;
}
.hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.2);
pointer-events: none;
}
.hero .container {
position: relative;
z-index: 2;
width: 100%;
}
.hero h1 {
color: #ffffff;
text-shadow: 0 4px 16px rgba(0,0,0,0.7), 0 2px 8px rgba(0,0,0,0.5);
font-size: 64px;
line-height: 1.08;
letter-spacing: -0.8px;
margin: 0 0 16px;
font-weight: 700;
}
.hero p {
color: #f8fbff;
text-shadow: 0 2px 12px rgba(0,0,0,0.6), 0 1px 4px rgba(0,0,0,0.4);
font-size: 20px;
margin-bottom: 28px;
max-width: 56ch;
font-weight: 500;
}
.hero-actions .btn-outline {
background: rgba(255,255,255,0.2);
color: #ffffff;
border-color: rgba(255,255,255,0.4);
backdrop-filter: blur(15px);
box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.hero-actions .btn-outline:hover {
background: rgba(255,255,255,0.3);
border-color: rgba(255,255,255,0.6);
box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
/* Hero em duas colunas com mídia à direita */
.hero .hero-grid {
display: grid;
grid-template-columns: 1fr;
align-items: center;
gap: 24px;
width: 100%;
}
.hero-media img {
width: 100%;
height: auto;
border-radius: 16px;
box-shadow: 0 16px 40px rgba(16,24,40,0.12);
border: 2px solid rgba(255,255,255,0.2);
backdrop-filter: blur(10px);
}
@media (min-width: 980px) {
.hero .hero-grid {
grid-template-columns: 1.1fr 0.9fr;
gap: 40px;
}
.hero h1 { font-size: 72px; }
.hero p { font-size: 22px; }
}
@media (max-width: 768px) {
.hero {
padding: 120px 0 80px;
min-height: 80vh;
}
.hero h1 { font-size: 48px; }
.hero p { font-size: 18px; }
}
/* Faixa de benefícios */
.benefits { background: linear-gradient(180deg, #fafbfe, #f6f8fc); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.benefits-grid { list-style: none; margin: 0; padding: 18px 0; display: grid; grid-template-columns: 1fr; gap: 14px; }
.benefits-grid li { display: grid; gap: 4px; padding: 10px 0; }
.benefits-grid strong { font-weight: 700; color: var(--brand-blue); }
.benefits-grid span { color: var(--muted); }
@media (min-width: 700px) { .benefits-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
/* Benefit band com divisores verticais sutis */
.benefits-grid { position: relative; }
@media (min-width: 700px) {
.benefits-grid li { position: relative; padding-left: 0; }
.benefits-grid li + li { border-left: 1px solid #e6eaf0; padding-left: 20px; }
}
/* Regras conflitantes removidas */
/* Footer profissional */
.site-footer { background: #0e1d3d; color: #e9eef6; border-top: 0; }
.site-footer .container { padding-top: 36px; padding-bottom: 36px; }
.footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
.site-footer h4 { margin: 0 0 10px; color: #ffffff; }
.site-footer p, .site-footer a { color: #cdd6e5; }
.site-footer a:hover { color: #ffffff; }
/* Headings inspirados (peso e tamanho) */
h1, .h1 { font-weight: 700; letter-spacing: -0.6px; }
h2 { font-size: 34px; font-weight: 700; letter-spacing: -0.3px; }
@media (min-width: 980px) { h2 { font-size: 38px; } }
.hero p { max-width: 56ch; }
/* CTA final */
.final-cta { background: #0e1d3d; color: #ffffff; padding: 48px 0; margin-top: 24px; }
.final-cta .cta-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: center; }
.final-cta h3 { margin: 0; font-size: 26px; letter-spacing: -0.2px; }
@media (min-width: 900px) { .final-cta .cta-grid { grid-template-columns: 1.4fr auto; } .final-cta h3 { font-size: 30px; } }
.final-cta .btn-primary { background: linear-gradient(135deg, var(--brand-gold), #e8cf95); color: #2b2109; border-color: #e6d7b3; }
/* CTA header polido */
.site-header .btn.btn-primary { background: #173b7a; color: #fff; border-color: rgba(255,255,255,0.18); }
.site-header .btn.btn-primary:hover { background: #1e4b9c; }
/* Melhor tipografia para listas */
ul, li { line-height: 1.7; }
/* Paleta refinada conforme identidade */
:root {
--brand-blue: #09295a;
--brand-gold: #f6dfb4;
--brand-gold-dark: #987946;
--brand-beige: #c8c2b6;
--primary: var(--brand-blue);
--primary-600: #072349;
--primary-50: #e7eef7;
}
/* Links e estados com a paleta */
a { color: var(--primary); }
a:hover { color: var(--brand-gold-dark); }
/* Botões com paleta */
.btn-primary { background: linear-gradient(135deg, var(--primary), #154380); }
.hero .btn-primary { background: linear-gradient(135deg, var(--brand-gold), var(--brand-gold-dark)); color: #2b2109; border-color: #e6d7b3; }
.btn-outline { border-color: var(--brand-beige); color: var(--primary); }
/* Títulos com traço dourado */
section h2::after { background: linear-gradient(90deg, var(--brand-gold), var(--brand-gold-dark)); }
/* Cartões e bordas usando bege/dourado */
.card, .services .service-card { border-color: color-mix(in srgb, var(--brand-beige) 85%, #ffffff 15%); }
.services .service-card:hover { border-color: var(--brand-beige); }
/* Lista de serviços - bullets dourados já aplicados; reforçar cor do check */
.services li::before { filter: saturate(1.15); }
/* Footer: linha superior dourada sutil */
.site-footer { border-top: 3px solid var(--brand-gold-dark); }
/* Benefit band separadores em bege */
@media (min-width: 700px) { .benefits-grid li + li { border-left: 1px solid var(--brand-beige); } }
/* About */
.about-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; }
.about-media img { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 16px 40px rgba(16,24,40,0.12); border: 1px solid #e8ecf3; }
.about-content .check-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.about-content .check-list li { display: grid; grid-template-columns: 22px 1fr; align-items: start; gap: 10px; }
.about-content .check-list li::before { content: ""; width: 22px; height: 22px; border-radius: 999px; background: url('data:image/svg+xml;utf8,') center/22px 22px no-repeat; }
@media (min-width: 980px) { .about-grid { grid-template-columns: 1.1fr 0.9fr; gap: 40px; } }
/* Métricas com estilo premium */
.metrics {
background: linear-gradient(135deg, #f8fafc, #ffffff);
padding: 80px 0;
}
.metrics-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.metric {
background: linear-gradient(145deg, #ffffff, #f8fafc);
border: 1px solid rgba(9,41,90,0.08);
border-radius: 20px;
padding: 32px 24px;
text-align: center;
box-shadow: 0 12px 32px rgba(9,41,90,0.06);
transition: all 0.3s ease;
}
.metric:hover {
transform: translateY(-4px);
box-shadow: 0 20px 48px rgba(9,41,90,0.1);
}
.metric strong {
font-size: 36px;
color: var(--brand-blue);
font-weight: 800;
}
.metric span { color: var(--muted); }
@media (min-width: 900px) { .metrics-grid { grid-template-columns: repeat(4, 1fr); } .metric strong { font-size: 42px; } }
/* Depoimentos */
.testimonial-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.testimonial { background: #ffffff; border: 1px solid #e6eaf0; border-radius: 16px; padding: 18px; box-shadow: 0 8px 18px rgba(16,24,40,0.06); }
.testimonial blockquote { margin: 0 0 10px; color: #1c2740; font-style: italic; }
.testimonial figcaption { color: var(--muted); font-size: 14px; }
@media (min-width: 900px) { .testimonial-grid { grid-template-columns: repeat(3, 1fr); } }
/* FAQ */
.accordion { display: grid; gap: 10px; }
.accordion .item { border: 1px solid #e6eaf0; border-radius: 14px; background: #ffffff; overflow: hidden; }
.accordion .head { width: 100%; text-align: left; background: #ffffff; padding: 14px 16px; border: none; font-weight: 600; color: #12233d; cursor: pointer; }
.accordion .panel { display: none; padding: 0 16px 14px; color: var(--muted); }
.accordion .head[aria-expanded="true"] + .panel { display: block; }
/* Polimentos finais */
section { scroll-margin-top: 120px; }
.about p, .legal p, .commitment p { color: #445066; }
.metrics { padding: 48px 0; }
.testimonials { padding: 64px 0; }
.faq { padding: 64px 0; }
/* Aumento da logomarca no header */
.logo-bg { width: 360px; height: 108px; background: url('/assets/img/logo-header.png') left center/contain no-repeat; image-rendering: -webkit-optimize-contrast; }
@media (min-width: 900px) { .logo-bg { width: 480px; height: 136px; } }
@media (max-width: 480px) { .logo-bg { width: 340px; height: 104px; } }
/* Ajuste do header para comportar logo maior */
.site-header .container { height: 132px; }
@media (min-width: 900px) { .site-header .container { height: 148px; } }
@media (max-width: 480px) { .site-header .container { height: 128px; } }
/* Ajuste do topo do menu mobile para diferentes alturas de header */
@media (max-width: 480px) {
.site-nav { top: 128px; }
}
/* Espaçamento do hero considerando header maior */
.hero { padding-top: 220px; }
@media (min-width: 900px) { .hero { padding-top: 240px; } }
@media (max-width: 480px) { .hero { padding-top: 220px; } }