/* Celular · Parte A · só dentro de @media (max-width:720px) */
@media (max-width:720px){

/* 2 · Cabeçalho de uma linha (64px): marca à esquerda, pílula de ação e ícone de menu que abre as seções */
header.site-header{position:relative;z-index:30;min-height:64px;padding:10px 20px;gap:0;flex-wrap:nowrap;justify-content:flex-start;background:#FFFFFF}
header.site-header .brand{gap:8px;flex:0 0 auto;min-width:0}
header.site-header .brand img{width:28px;height:24px}
header.site-header .brand>span{font-size:14px;letter-spacing:.14em;line-height:1}
header.site-header nav{flex:0 0 auto;gap:0;margin-left:auto}
header.site-header .nav-contact,header.site-header .nav-contact:hover{white-space:nowrap;min-height:44px;padding:0 14px;font-size:13px;line-height:1}
/* ícone de menu: alvo de 44px; o traço do ícone termina na margem de 20px */
html.has-menu header.site-header .menu-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;margin:0 -10px 0 2px;padding:0;border:0;border-radius:999px;background:transparent;color:#120B16;cursor:pointer;-webkit-tap-highlight-color:transparent}
html.has-menu header.site-header .menu-toggle:focus-visible{outline:3px solid #F7F5F8;outline-offset:0}
header.site-header .menu-toggle .menu-icon-close{display:none}
header.site-header .menu-toggle[aria-expanded="true"] .menu-icon-open{display:none}
header.site-header .menu-toggle[aria-expanded="true"] .menu-icon-close{display:block}
@media (max-width:380px){
header.site-header .brand{gap:6px}
header.site-header .brand>span{font-size:13px;letter-spacing:.14em}
header.site-header .nav-contact,header.site-header .nav-contact:hover{padding:0 12px;font-size:12px}
}

/* Seções: sem JS, faixa simples que rola com a página; com JS, painel que abre sob o cabeçalho (sem segunda faixa) */
nav.mobile-shortcuts{position:static;display:flex;justify-content:flex-start;align-items:center;gap:24px;padding:0 20px;background:#FFFFFF;border-top:1px solid #DED6E0;border-bottom:1px solid #DED6E0;overflow-x:auto;scrollbar-width:none}
nav.mobile-shortcuts::-webkit-scrollbar{display:none}
nav.mobile-shortcuts a{flex:0 0 auto;display:flex;align-items:center;min-height:44px;font-size:14px;font-weight:500;line-height:1;white-space:nowrap;text-decoration:none;color:#5C1041}
html.has-menu nav.mobile-shortcuts{display:none;position:absolute;z-index:29;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 20px;overflow:visible;border-top:1px solid #DED6E0;border-bottom:1px solid #DED6E0}
html.has-menu nav.mobile-shortcuts.is-open{display:flex}
html.has-menu nav.mobile-shortcuts a{min-height:52px;font-size:17px;font-weight:500;color:#120B16;border-bottom:1px solid #DED6E0}
html.has-menu nav.mobile-shortcuts a:last-child{border-bottom:0}
html.has-menu nav.mobile-shortcuts a:focus-visible{outline:3px solid #F7F5F8;outline-offset:-3px}

/* 1 · Hero alinhado à esquerda; o cérebro segue centralizado na faixa acima do texto */
.hero{padding:320px 20px 0;align-items:flex-start;text-align:left;overflow-x:clip;overflow-y:visible}
.hero .hero-copy{align-items:flex-start;text-align:left;margin:0}
.hero .hero-tag{align-self:flex-start;min-height:36px;padding:0 14px;font-size:14px;margin-bottom:20px}
/* 4 · Escala: h1 36 a 46px, entrelinha 1,08; leitura 16px */
.hero .hero-copy>h1{text-align:left;font-size:clamp(38px,11.2vw,44px);line-height:1.08;letter-spacing:-.04em;margin:0 0 20px;max-width:none}
.hero .hero-copy>p:not(.hero-actions){text-align:left;margin:0 0 28px;max-width:none;font-size:16px;line-height:1.6}
.hero .hero-actions,.hero .hero-copy>p.hero-actions{justify-content:flex-start;width:100%}

/* 3 · Mockup legível: 1,6x a largura útil, começando na margem e sangrando pela borda direita (cortado pelo .hero) */
.hero{--mock-w:calc((100vw - 40px)*1.6);--mock-overlap:calc(var(--mock-w)*.1 + 24px)}
#resultado{--mock-w:calc((100vw - 40px)*1.6);--mock-overlap:calc(var(--mock-w)*.1 + 24px)}
.hero .hero-mock{align-self:flex-start;flex:0 0 auto;width:var(--mock-w);max-width:none;margin:40px 0 calc(-1*var(--mock-overlap));border-radius:18px}
.hero .hero-mock-label{font-size:13px}

/* Faixa de números: alinhada à esquerda, mesmo ritmo de 72px depois do mockup e no fim da faixa */
#resultado.content-section{padding-top:calc(var(--mock-overlap) + 72px);padding-left:20px;padding-right:20px}
#resultado .section-heading{align-items:flex-start;text-align:left;margin-bottom:48px}
#resultado .section-heading .eyebrow{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;font-size:14px;margin:0 0 20px}
#resultado .section-heading h2{text-align:left;font-size:32px;line-height:1.15;margin:0 0 16px}
#resultado .section-heading>p{text-align:left;margin:0;font-size:16px;line-height:1.6;max-width:none}
#resultado .numbers-grid{gap:48px}
#resultado .numbers-item{align-items:flex-start;text-align:left}
#resultado .numbers-item+.numbers-item::before{top:-24px}
#resultado .numbers-value{font-size:80px}
#resultado .numbers-label{margin:12px 0 0;text-align:left;font-size:16px}
#resultado .section-body>.numbers-note{text-align:left;margin:48px 0 0;max-width:none;font-size:15px;line-height:1.6}
}

/* O cabeçalho mantém marca, ação e alvo de menu de 44px em telas estreitas. */
@media(max-width:360px){header.site-header{padding-left:12px;padding-right:12px}header.site-header .brand{gap:4px}header.site-header .brand>span{font-size:12px}header.site-header nav{flex-shrink:1;min-width:0}header.site-header .nav-contact,header.site-header .nav-contact:hover{padding-left:8px;padding-right:8px;white-space:normal;line-height:1.15;text-align:center}}