/* DF Assistence, MODELO B "executivo": a mesma base azul-marinho do A (style.css), uma só família (sans arredondada de sistema, pesos 400 e 700), mais espaço e menos enfeite.
   Paleta: só azul-escuro, azuis, branco e preto; o verde fica só no botão de WhatsApp. Nenhuma cor quente. Fontes do sistema (CSP font-src 'self').
   Movimento só em transform/opacity; prefers-reduced-motion zera tudo no style.css. Sem luz que segue o mouse. */
:root{
  --tag:#8fb5ff;--tag-dim:#5b95ff;
  --f-mono:var(--f-sans);
  --space-xl:clamp(2.75rem,2.2rem + 2.2vw,4.25rem);
  --r-s:4px;--r-m:6px;--r-l:8px;
  /* legibilidade (08/11, pedido do Bruno: "aumente a letra, não mude a fonte"): mesma família, só o tamanho. Texto corrido 17-19 px (era 16-18); texto pequeno 15-16 px (era 13,4-14,7) */
  --step--1:clamp(.95rem,.92rem + .12vw,1.02rem);
  --step-0:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --step-1:clamp(1.28rem,1.16rem + .5vw,1.55rem);
}
.mb ::selection{background:var(--brand-300);color:var(--ink-950)}

/* tipografia firme: mesma família, branco puro; o destaque do título é peso e azul-claro, sem itálico nem serifa */
.mb h1,.mb h2,.mb h3{color:#fff}
.mb h1{font-weight:700;line-height:1.02;letter-spacing:-.025em}
.mb h2{font-weight:700;line-height:1.06;letter-spacing:-.018em}
.mb h3{font-weight:700}
.mb h1 em{display:block;font-size:.88em;line-height:1.1;margin-top:.12em}
.mb .lead{color:var(--muted);max-width:52ch}
.mb .eyebrow{font:700 .74rem/1.2 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--brand-300)}
.mb .eyebrow:after{content:"";flex:0 0 3rem;height:1px;background:var(--line-strong)}
.mb :focus-visible{outline-color:var(--brand-200)}
.mb .prog{background:var(--brand-300)}

/* botões: retos e sóbrios; WhatsApp mantém o verde */
.mb .btn{font-weight:700;letter-spacing:.01em;border-radius:var(--r-m);background-color:var(--b1)}
.mb .btn:before{border-radius:var(--r-m)}
.mb .btn.blue,.mb .btn.avalia{--b1:#1f5fe0;--bh:#2f73f0}
.mb .btn.link{color:var(--brand-300);background:none}
.mb .btn.sec{--bd:rgba(195,216,255,.55)}

/* cabeçalho: altura fixa (não encolhe ao rolar) */
.mb .top{background:rgba(5,13,31,.97);border-bottom:1px solid var(--line)}
.mb .brand b{font-weight:800;letter-spacing:.05em;color:#fff}
.mb .brand b:after{display:none}
.mb .brand b span{font:700 .56em/1.2 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--brand-300);margin-top:.5em}
.mb .menu a{font:700 .72rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--brand-200)}
.mb .menu a:hover{color:#fff}
.mb .menu a:after{background:var(--brand-300)}

/* topo: azul-marinho liso, sem marca-d'água nem malha */
.mb .hero{background:radial-gradient(60% 90% at 82% 40%,rgba(47,115,240,.26),transparent 70%),var(--ink-900)}
.mb .hero .lead{max-width:44ch}
@media(min-width:760px){.mb .hero .grid{grid-template-columns:.95fr 1.05fr}}
.mb .esteira .brilho{display:none}
.mb .s::before{display:none}

/* faixa de confiança: azul-escuro, letras brancas, ícones azul-claro */
.mb .trust{background:var(--ink-850)}
.mb .trust div{font-family:var(--f-body);font-weight:700;color:#fff}
.mb .trust svg{stroke:var(--brand-300)}

/* cenas: mais respiro, cartões planos */
.mb .s.alt{background:var(--ink-900)}
.mb .s.deep{background:var(--ink-850)}
.mb .card,.mb .box,.mb .sint article,.mb .bk,.mb .lin,.mb .av{border-radius:var(--r-s);background-color:var(--ink-850)}
.mb .card:hover,.mb .box:hover,.mb .sint article:hover,.mb .bk:hover,.mb .lin:hover{background-color:var(--ink-800);border-color:var(--brand-400)}
.mb .sint article{border-top:2px solid var(--brand-400)}
.mb .sint h3{font:700 .72rem/1.2 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--brand-300)}
.mb .sint a.nome{color:var(--brand-200)}
.mb .sint p strong{font-size:1.35rem;color:#fff}
.mb .bk h3{font-size:1.25rem}
.mb .bk .ico svg{stroke:var(--brand-300)}
.mb .bk .seta{color:var(--brand-200)}
.mb .bk.big,.mb .bk.big:hover{background-color:#1648b8;background-image:none;border-color:transparent}
.mb .bk.big h3,.mb .bk.big p,.mb .bk.big .seta{color:#fff}
.mb .bk.big .ico svg{stroke:#fff}
.mb .marquee{border-color:var(--line-strong)}
.mb .marquee .trk{font:400 clamp(1.2rem,1rem + 1vw,1.7rem)/1 var(--f-sans);color:var(--brand-200)}
.mb .list li:before{background:var(--brand-300);border-radius:50%}
.mb .tag{color:#fff}
.mb a.tag:hover{background:rgba(91,149,255,.2);border-color:var(--brand-300);color:#fff}
.mb summary{font-size:1.2rem}
.mb summary:after{color:var(--brand-300)}
.mb details{border-color:var(--line-strong)}
.mb .lado{opacity:.4}

/* mapa: nomes fora do desenho; pino numerado igual à lista; contorno da região ativa em azul-claro */
.mb .mapa svg.dfmapa{border-radius:var(--r-s);border-color:var(--line-strong);background:var(--ink-900)}
.mb .dfmapa .rota{display:none}
.mb .pl .pin{fill:#1f5fe0;stroke:#fff}
.mb .pl.on .pin{fill:var(--brand-300);stroke:#fff}
.mb .pl .onda{stroke:var(--brand-200)}
.mb .pl .num{font:700 19px/1 var(--f-body);fill:var(--ink-950);text-anchor:middle;pointer-events:none}
.mb .pl .area{fill:rgba(143,181,255,.14);stroke:var(--brand-200);stroke-width:3;opacity:0;transition:opacity var(--dur-ui) var(--ease-out)}
.mb .pl.on .area{opacity:1}
.mb .mapa-leg{margin-top:.6rem;color:var(--muted);font-size:.9rem}
.mb .reg{border-radius:var(--r-m);color:#fff;display:inline-flex;align-items:center;gap:.5rem}
.mb .reg i{font:700 .78rem/1 var(--f-mono);font-style:normal;color:var(--brand-300)}
.mb .reg:hover,.mb .reg.on{background:var(--brand-300);border-color:var(--brand-300);color:var(--ink-950)}
.mb .reg:hover i,.mb .reg.on i{color:var(--ink-950)}
/* celular: o mapa fica na escala natural (960 px) numa janela que rola de lado, para cada alvo de toque medir 44 px sem sobrepor outro */
@media(max-width:759px){
  .mb .mapa-fig{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;border-radius:var(--r-s)}
  .mb .mapa-box{min-width:640px} /* 08/11: era 960px para o DF inteiro; com o recorte aproximado, 640px já deixa os pinos legíveis sem ficar alto demais */
}
.so-cel{display:none}
@media(max-width:759px){.so-cel{display:inline}}

/* pedido guiado */
.mb .pedido{border-radius:var(--r-l);background:var(--ink-850)}
.mb .tab[aria-selected="true"]{background:var(--ink-700);box-shadow:inset 3px 0 0 var(--brand-300)}
.mb .tab{color:#fff}
.mb .tab:hover{background:rgba(143,181,255,.1)}
.mb .campos select:focus,.mb .campos input:focus{border-color:var(--brand-300)}
.mb .campos label{color:#fff}
.mb .ck-row input{accent-color:#2f73f0}

/* rodapé, pontos e extras */
.mb .prefoot{background:var(--ink-900)}
.mb footer.site h2{font:700 .74rem/1.2 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--brand-300)}
.mb footer.site,.mb footer.site ul a,.mb footer.site p{color:#d4e0f7}
.mb .selo small,.mb .legal{color:#b8c8e6}
.mb .dots a[aria-current="true"]{background:var(--brand-300);border-color:var(--brand-300)}
.mb .dots a span{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.mb .cs{border-left-color:var(--brand-300);border-radius:var(--r-m)}
/* balões de marca (03/11): texto nítido (sem imagem, não pixeliza), sem flutuação contínua; descem com a rolagem no mesmo ritmo do aparelho (--par do .render) */
.mb .cs.cm{font:800 .95rem/1 var(--f-display);letter-spacing:.02em;background:rgba(5,13,31,.88);-webkit-font-smoothing:antialiased;pointer-events:none}
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){
  @keyframes desceMarca{to{translate:0 14px}}
  .mb .arte-box .cs.cm{animation:desceMarca linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
}}
.mb .art .b{fill:rgba(234,241,255,.96);stroke:rgba(143,181,255,.85)}
.mb .art .p{fill:rgba(47,115,240,.4);stroke:rgba(91,149,255,.75)}
.mb .art .l{stroke:rgba(5,13,31,.75)}
.mb .av .ini{background:#1f5fe0}
@media(prefers-contrast:more){.mb .card,.mb .box,.mb .sint article,.mb .bk,.mb .lin{border-color:rgba(230,239,255,.85)}}

/* celular: a serifa em caixa alta é mais larga; o nome encolhe junto da largura e não passa por baixo do botão (auditor F5) */
@media(max-width:439px){
  .mb .brand{gap:.55rem}
  .mb .brand b{font-size:clamp(.7rem,3.3vw,.95rem);letter-spacing:.015em}
  .mb .brand b span{font-size:.5em;letter-spacing:.08em}
  .mb .bar{gap:.5rem}
  .mb .top .btn{padding:.55rem .85rem;font-size:.88rem}
}
@media(max-width:359px){
  .mb .brand .mark{width:44px;height:44px}
  .mb .top .btn{padding:.5rem .65rem;font-size:.8rem;gap:.3rem}
  .mb .top .btn svg{width:18px;height:18px}
}

/* 02/11 (Bruno): "espaço na parte de cima de toda página, deixe mais fit". Antes cada cena tinha a altura da tela e o conteúdo centrado (sobrava faixa vazia em cima);
   agora a cena tem a altura do conteúdo, começa do topo e o encaixe ao rolar sai (com cenas de alturas diferentes ele dava trancos). */
@media(min-width:900px) and (min-height:720px){
  html:has(body.mb){scroll-snap-type:none}
  .mb .s{min-height:0;justify-content:flex-start}
}
.mb .hero .grid{padding-block:clamp(2rem,1.4rem + 2.4vw,3.75rem)}
.mb .head{margin-bottom:var(--space-s)}

/* problemas: nome do problema numa linha, a causa embaixo em azul-claro; a foto de fundo fica atrás do texto, sem cobrir */
.mb .sint p strong{display:block;margin-bottom:.4rem;line-height:1.15}
.mb .sint p .causa{display:block;color:var(--brand-100);font-size:.95rem;line-height:1.45}
.mb .sint article.c-img > :not(.fund){position:relative;z-index:1}

/* mapa: pino sem número (miolo branco); zoom só por transform, suave, preso às bordas */
.mb .pl .miolo{fill:var(--ink-950)}
.mb .pl.on .miolo{fill:#1f5fe0}
.mb .mapa-fig{position:relative;overflow:hidden;border-radius:var(--r-s)}
.mb .mapa-box{transform-origin:0 0;transform:var(--zt,none);transition:transform .85s cubic-bezier(.22,1,.36,1);will-change:transform}
.mb .mapa-fig.zoom .pl .pi{transform:scale(.55)}
.mb .mapa-fig.zoom .pl.on .pi{transform:translateY(-3px) scale(.62)}
.mb .mapa-fig.zoom .pl .area{opacity:0}
.mb .mapa-volta{position:absolute;right:.6rem;top:.6rem;z-index:3;min-height:44px;padding:.5rem .9rem;border-radius:var(--r-m);border:1px solid var(--line-strong);background:rgba(5,13,31,.88);color:#fff;font:700 .88rem/1 var(--f-body);cursor:pointer}
.mb .mapa-volta:hover{border-color:var(--brand-300)}
.mb .mapa-volta:focus-visible{outline:3px solid var(--brand-200);outline-offset:2px}
@media(max-width:759px){.mb .mapa-fig{overflow-x:auto}.mb .mapa-volta{display:none}}

/* 02/11 bug da hero: o texto e os botões apagavam para 40% logo no início da rolagem (no celular, ainda em cima da tela, pareciam desligados).
   Agora: no celular não apaga; no computador só começa quando metade do bloco já saiu da tela e para em 70%. */
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){
  .mb .hero .grid > div:first-child{animation-name:heroSaiB;animation-range:exit 45% exit 100%}
  @media(max-width:759px){.mb .hero .grid > div:first-child{animation:none}}
}}
@keyframes heroSaiB{to{opacity:.7;transform:translateY(-18px)}}

/* Cena 4 (Bruno, 02/11): Aparelhos + Regiões lado a lado, colunas 5/7. No computador, 2 linhas compartilhadas (subgrid):
   os títulos alinham embaixo, os blocos de aparelhos e o mapa começam na mesma altura; embaixo do mapa, cidade e lista dividem a largura. */
.mb .duo{display:grid;gap:var(--space-l);align-items:start}
.mb .duo .head h2{font-size:clamp(1.75rem,1.3rem + 1.6vw,2.5rem)}
.mb .bento.mini{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.mb .bento.mini .bk{min-height:0;display:flex;align-items:center;gap:.75rem;padding:.8rem .95rem}
.mb .bento.mini .bk .ico svg{width:26px;height:26px}
.mb .bento.mini .bk h3{font-size:1rem;line-height:1.2}
.mb .duo .marq-t{margin-top:.9rem;color:var(--muted);font-size:.92rem}
.mb .duo .mapa{grid-template-columns:1fr;gap:var(--space-s)}
.mb .duo .mapa-desc{min-height:0;margin-top:0}
.mb .duo .mapa-desc h3{font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem)}
.mb .duo .mapa-desc p{font-size:.95rem;line-height:1.5}
.mb .duo .reg-lista{gap:.4rem}
.mb .duo .reg{min-height:40px;padding:.25rem .8rem;font-size:.88rem}
@media(pointer:coarse){.mb .duo .reg{min-height:44px}}
@media(min-width:1000px){
  .mb .duo{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0 clamp(2rem,1rem + 3vw,4rem)}
  .mb .duo .bento.mini{grid-auto-rows:66px}
  .mb .duo .mapa-info{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:.4rem 1.5rem;align-items:start}
  .mb .duo .mapa-info .reg-lista{margin-top:0}
  .mb .duo .mapa-info .nota{grid-column:1 / -1;margin-top:.4rem}
  @supports (grid-template-rows:subgrid){
    .mb .duo{grid-template-rows:auto auto}
    .mb .duo-ap,.mb .duo-mapa{display:grid;grid-row:span 2;grid-template-rows:subgrid}
    .mb .duo .head{align-self:end}
  }
}

/* legibilidade (08/11): rótulos e notas pequenas sobem; mesma fonte e peso, só o tamanho (vem por último para valer sobre as regras acima) */
.mb .eyebrow,.mb footer.site h2{font-size:.84rem}
.mb .sint h3,.mb .dots a span{font-size:.82rem}
.mb .menu a{font-size:.78rem;letter-spacing:.06em} /* o menu do topo divide a linha com a logo maior: sobe menos e aperta o espaçamento (auditor F5 1280/1440) */
.mb .reg i{font-size:.86rem}
.mb .nota,.mb .legal,.mb .selo small,.mb .fone small,.mb .ck-row em,.mb .ck-row small,.mb .av .meta,.mb .final .depois,.mb .av figcaption,.mb .mapa-leg{font-size:.95rem}
.mb .sint p .causa,.mb .duo .mapa-desc p,.mb .duo .marq-t{font-size:1.02rem}
.mb .duo .reg{font-size:.95rem}
.mb .bento.mini .bk h3{font-size:1.08rem}
.mb .cs{font-size:.95rem}

/* caixas de preencher (08/11, pedido do Bruno: "melhore as letras, tamanho e fonte dentro dos boxes"): mesma família do site; o texto digitado
   acompanha o corpo (17-19 px, era fixo em 16) e nunca fica abaixo de 16 px (abaixo disso o iPhone dá zoom ao tocar); rótulo de 14,9 para 16-17 px;
   exemplo (placeholder) mais escuro para ler melhor sobre o branco */
.mb .campos label{font-size:clamp(1rem,.97rem + .12vw,1.06rem);gap:.45rem}
.mb .campos select,.mb .campos input{font-size:max(16px,var(--step-0));line-height:1.35;padding:.9rem 1rem;min-height:54px}
.mb .campos input::placeholder{color:#55657f;opacity:1}

/* logo maior (08/11, pedido do Bruno: "coloque a logo da df assistence maior"): ~30% no computador (era 48-64 px), +8 px no celular; o arquivo tem 520 px, continua nítido */
.mb .mark img{width:clamp(60px,3vw + 38px,80px)}
@media(max-width:439px){.mb .mark img{width:56px}}
@media(max-width:359px){.mb .brand .mark{width:48px;height:48px}.mb .brand .mark img{width:100%}}
/* legibilidade e espaco (08/11, medido no celular de verdade por emulacao, 390 px): mesma fonte, mesmo design */
/* palavra inteira: a hifenizacao automatica partia "pro-blema" e "lava-/loucas" em 53 blocos */
.mb p,.mb li,.mb blockquote,.mb summary,.mb figcaption{hyphens:manual;overflow-wrap:break-word}
/* "ASSISTENCIA TECNICA" ao lado da logo saia com 6,4 px no celular */
@media(max-width:600px){.mb .brand b span{font-size:max(.56em,.62rem);letter-spacing:.03em}}
@media(max-width:900px){.mb .eyebrow,.mb .sint a.nome{font-size:max(.84rem,14px)}}
@media(max-width:359px){.mb .top .btn{font-size:.85rem}}
/* o botao flutuante do WhatsApp cobria "Preferencias" e o fim do rodape: o rodape ganha o espaco dele */
.mb footer .legal{padding-bottom:5.5rem}
.mb.rodape-visivel .float{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,visibility 0s .25s}

/* gerado por gerar.mjs (recorte do mapa): centro de clique sobre a cabeça de cada pino */
.mb .pt[data-i="0"]{left:18.82%;top:43.75%}
.mb .pt[data-i="1"]{left:27.65%;top:45.25%}
.mb .pt[data-i="2"]{left:22.94%;top:55.10%}
.mb .pt[data-i="3"]{left:35.29%;top:49.10%}
.mb .pt[data-i="4"]{left:42.35%;top:44.82%}
.mb .pt[data-i="5"]{left:59.41%;top:38.18%}
.mb .pt[data-i="6"]{left:65.49%;top:26.19%}
.mb .pt[data-i="7"]{left:61.57%;top:48.89%}
.mb .pt[data-i="8"]{left:76.08%;top:9.27%}
.mb .pt[data-i="9"]{left:27.06%;top:84.43%}