/* =====================================================================
   FARMÁCIA DO TRABALHADOR FCT — sistema visual
   ---------------------------------------------------------------------
   Direção: varejo popular com disciplina editorial. A referência não é
   landing page de software — é o encarte da rede: vermelho institucional,
   amarelo de preço, preto de grafismo, tipografia pesada, fio fino,
   número tabular. Canto reto em quase tudo. Sem gradiente decorativo.

   1. Tokens
   2. Base e tipografia
   3. Layout e faixas
   4. Componentes (botões, etiqueta, régua, listas)
   5. Cabeçalho e navegação
   6. Rodapé e barra fixa do celular
   7. Blocos da home
   8. Unidades (busca + cards)
   9. Nutrivigor (caixa 3D)
  10. Páginas internas (convênio, RH, contato, institucional)
  11. Movimento e acessibilidade
   ===================================================================== */

/* 1. TOKENS ---------------------------------------------------------- */
:root{
  /* marca */
  --vermelho:      #E30613;
  --vermelho-esc:  #A80410;
  --vermelho-fundo:#C10510;
  --amarelo:       #F5C518;
  --amarelo-esc:   #D9A800;
  --wa:            #128C4A;
  --wa-claro:      #25D366;

  /* neutros com viés quente — cinza puro entrega layout automático */
  --tinta:    #161213;
  --tinta-2:  #3A3133;
  --tinta-3:  #6E6265;
  --tinta-4:  #9C9093;
  --papel:    #FBF9F7;
  --papel-2:  #F3EDEA;
  --linha:    #E4DBD6;
  --linha-f:  #D2C5BF;
  --branco:   #FFFFFF;

  /* tipografia */
  --display: 'Archivo Black', 'Archivo', Arial, sans-serif;
  --texto:   'DM Sans', system-ui, -apple-system, sans-serif;

  --t-hero:  clamp(2.35rem, 6.2vw, 4.15rem);
  --t-h2:    clamp(1.7rem, 3.4vw, 2.5rem);
  --t-h3:    clamp(1.15rem, 1.8vw, 1.35rem);
  --t-lead:  clamp(1rem, 1.5vw, 1.15rem);
  --t-peq:   .875rem;
  --t-micro: .75rem;

  /* espaço */
  --gutter: clamp(20px, 4vw, 40px);
  --max:    1240px;
  --secao:  clamp(58px, 7.5vw, 108px);

  --transicao: 160ms cubic-bezier(.2,.6,.3,1);
}

/* 2. BASE ------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:var(--texto); font-size:1rem; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg,video{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
button svg,.btn svg,.link-seta svg{ pointer-events:none }
ul{ margin:0; padding:0; list-style:none }
p{ margin:0 }

h1,h2,h3,h4{
  font-family:var(--display); font-weight:400; margin:0;
  line-height:1.02; letter-spacing:-.02em; text-wrap:balance;
}
h1{ font-size:var(--t-hero); line-height:.98; letter-spacing:-.035em }
h2{ font-size:var(--t-h2); letter-spacing:-.028em }
h3{ font-size:var(--t-h3); line-height:1.15; letter-spacing:-.015em }
h4{ font-family:var(--texto); font-weight:700; font-size:1rem; letter-spacing:-.005em }

.lead{ font-size:var(--t-lead); line-height:1.55; color:var(--tinta-2) }
.num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1 }

::selection{ background:var(--amarelo); color:var(--tinta) }

/* 3. LAYOUT ---------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter) }
.faixa{ padding-block:var(--secao) }
.faixa--papel{ background:var(--papel) }
.faixa--papel2{ background:var(--papel-2) }
.faixa--branco{ background:var(--branco) }
.faixa--tinta{ background:var(--tinta); color:var(--papel) }
.faixa--vermelho{ background:var(--vermelho-fundo); color:#fff }
.faixa--fina{ padding-block:clamp(36px,4.5vw,60px) }

/* grade editorial: o conteúdo raramente ocupa as 12 colunas */
.grade{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(24px,3vw,48px) }
.col-7{ grid-column:span 7 } .col-5{ grid-column:span 5 }
/* coluna curta ao lado de uma lista longa: acompanha a rolagem em vez de deixar buraco */
@media (min-width:901px){
  .gruda{ position:sticky; top:112px; align-self:start }
}
.col-6{ grid-column:span 6 } .col-8{ grid-column:span 8 } .col-4{ grid-column:span 4 }
@media (max-width:860px){ .grade{ display:block } .grade > * + *{ margin-top:36px } }

/* 4. COMPONENTES ----------------------------------------------------- */

/* rótulo de seção: fio + palavra, no lugar do "eyebrow" solto */
.rotulo{
  display:flex; align-items:center; gap:12px;
  font-family:var(--texto); font-weight:700; font-size:var(--t-micro);
  letter-spacing:.18em; text-transform:uppercase; color:var(--vermelho-esc);
  margin-bottom:18px;
}
.rotulo::before{ content:""; width:28px; height:2px; background:currentColor; flex:none }
.rotulo--claro{ color:var(--amarelo) }
.rotulo--tinta{ color:var(--tinta-3) }

/* etiqueta de preço: forma vinda do próprio encarte */
.etiqueta{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--amarelo); color:var(--tinta);
  font-family:var(--display); font-size:var(--t-micro);
  letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
  padding:8px 14px 8px 12px;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%,10px 50%);
  padding-left:22px;
}
.etiqueta::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--tinta); flex:none;
}

/* botões — no máximo um primário por bloco */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--texto); font-weight:700; font-size:.95rem; line-height:1;
  padding:16px 24px; border:2px solid transparent; border-radius:2px;
  transition:background var(--transicao), color var(--transicao), border-color var(--transicao);
  cursor:pointer; text-align:center;
}
.btn svg{ width:19px; height:19px; flex:none }
.btn--wa{ background:var(--wa-claro); color:#04331A }
.btn--wa:hover{ background:#1FBF5C }
.btn--tinta{ background:var(--tinta); color:#fff }
.btn--tinta:hover{ background:var(--tinta-2) }
.btn--amarelo{ background:var(--amarelo); color:var(--tinta) }
.btn--amarelo:hover{ background:var(--amarelo-esc) }
.btn--linha{ border-color:var(--tinta); color:var(--tinta) }
.btn--linha:hover{ background:var(--tinta); color:#fff }
.btn--linha-clara{ border-color:rgba(255,255,255,.55); color:#fff }
.btn--linha-clara:hover{ background:#fff; color:var(--vermelho-esc) }
.btn--bloco{ width:100% }

/* link de texto com seta — alternativa ao segundo botão */
.link-seta{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.95rem;
  border-bottom:2px solid currentColor; padding-bottom:3px; color:var(--vermelho-esc);
  transition:gap var(--transicao);
}
.link-seta:hover{ gap:13px }
.link-seta--claro{ color:var(--amarelo) }
.link-seta--branco{ color:#fff }

/* lista de fios — substitui o card quando a informação é textual */
.linhas{ border-top:1px solid var(--linha) }
.linhas > li,
.linhas > .linha{
  display:grid; grid-template-columns:26px 1fr; gap:4px 16px;
  padding:20px 0; border-bottom:1px solid var(--linha);
}
.linhas svg{ width:22px; height:22px; color:var(--vermelho-esc); margin-top:2px; grid-row:span 2 }
.linhas strong{ font-weight:700; align-self:center }
.linhas p{ grid-column:2; color:var(--tinta-3); font-size:.92rem; line-height:1.5 }

/* 5. CABEÇALHO ------------------------------------------------------- */
.pular{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--tinta); color:#fff; padding:12px 18px; font-weight:700;
}
.pular:focus{ left:12px; top:12px }

.topo{ position:sticky; top:0; z-index:100; background:var(--branco) }
.topo-aviso{
  background:var(--vermelho-esc); color:#fff; font-size:var(--t-peq);
}
.topo-aviso .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:38px; flex-wrap:wrap;
}
.topo-aviso a{ display:inline-flex; align-items:center; gap:7px }
.topo-aviso a:hover{ color:var(--amarelo) }
.topo-aviso svg{ width:15px; height:15px; flex:none }
.topo-aviso-horario{ color:rgba(255,255,255,.78) }

.topo-barra{ border-bottom:1px solid var(--linha) }
.topo-barra .wrap{
  display:flex; align-items:center; gap:clamp(16px,3vw,40px);
  min-height:76px;
}
.marca img{ height:50px; width:auto }
.nav{ display:flex; align-items:center; gap:2px; margin-left:auto }
.nav > a,
.nav-drop > button{
  display:inline-flex; align-items:center; gap:6px;
  padding:11px 14px; font-weight:500; font-size:.95rem; color:var(--tinta-2);
  border-bottom:2px solid transparent; transition:color var(--transicao);
  white-space:nowrap;
}
.nav > a:hover, .nav-drop > button:hover{ color:var(--vermelho) }
.nav > a[aria-current="page"]{ color:var(--vermelho); border-bottom-color:var(--vermelho) }
.nav-drop{ position:relative }
.nav-drop > button::after{
  content:""; width:7px; height:7px; margin-left:2px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
}
.nav-drop-menu{
  position:absolute; top:100%; left:0; min-width:290px; background:var(--branco);
  border:1px solid var(--linha); box-shadow:0 20px 40px -20px rgba(22,18,19,.3);
  padding:6px; opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
}
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu{ opacity:1; visibility:visible; transform:none }
.nav-drop-menu a{ display:block; padding:13px 14px }
.nav-drop-menu a:hover{ background:var(--papel-2) }
.nav-drop-menu strong{ display:block; font-size:.95rem }
.nav-drop-menu span{ font-size:var(--t-peq); color:var(--tinta-3) }

.topo-acao{ display:flex; align-items:center; gap:10px; margin-left:auto }
.topo-acao .btn{ padding:13px 20px; font-size:.9rem }
.abrir-menu{ display:none; padding:10px; margin-right:-10px }
.abrir-menu svg{ width:28px; height:28px }

/* menu do celular: painel inteiro, alvo grande, não é o desktop encolhido */
.menu-cel{
  position:fixed; inset:0; z-index:150; background:var(--tinta); color:#fff;
  display:flex; flex-direction:column;
  /* fechado: invisível e sem deslocamento — deslocar 100% cria barra
     de rolagem lateral no celular, porque elemento fixo não é cortado
     pelo overflow do body */
  opacity:0; visibility:hidden; transform:translateX(14px);
  transition:opacity 200ms ease, transform 220ms cubic-bezier(.3,.7,.3,1), visibility 220ms;
}
.menu-cel[data-aberto="true"]{ opacity:1; visibility:visible; transform:none }
.menu-cel-topo{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--gutter); border-bottom:1px solid rgba(255,255,255,.16);
}
.menu-cel-topo span{ font-family:var(--display); font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-4) }
.menu-cel-topo button{ padding:10px; margin-right:-10px; position:relative; z-index:1 }
.menu-cel-topo svg{ width:28px; height:28px }
.menu-cel nav{ flex:1; overflow-y:auto; padding:8px var(--gutter) 24px }
.menu-cel nav a{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 0; font-family:var(--display); font-size:1.35rem;
  border-bottom:1px solid rgba(255,255,255,.13);
}
.menu-cel nav a span{ font-family:var(--texto); font-size:.8rem; color:var(--tinta-4); font-weight:500 }
.menu-cel-pe{ padding:20px var(--gutter) calc(20px + env(safe-area-inset-bottom)); border-top:1px solid rgba(255,255,255,.16) }
@media (max-width:980px){
  .nav{ display:none }
  .abrir-menu{ display:block }
  .topo-aviso{ font-size:.8rem }
  .topo-aviso .wrap{ flex-wrap:nowrap; min-height:34px; gap:10px }
  .topo-aviso a{ white-space:nowrap }
  .topo-aviso-horario{ white-space:nowrap }
}
@media (max-width:780px){ .topo-acao .btn{ display:none } }
@media (max-width:600px){
  .so-desk{ display:none }
  .topo-aviso{ font-size:.78rem }
  .topo-barra .wrap{ min-height:66px }
  .marca img{ height:42px }
}

/* 6. RODAPÉ E BARRA DO CELULAR --------------------------------------- */
.rodape{ background:var(--tinta); color:rgba(255,255,255,.68); padding-block:clamp(48px,6vw,80px) 0 }
.rodape-grade{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(28px,4vw,56px);
  padding-bottom:44px;
}
@media (max-width:900px){ .rodape-grade{ grid-template-columns:1fr 1fr } }
@media (max-width:540px){ .rodape-grade{ grid-template-columns:1fr; gap:32px } }
.rodape-marca img{ display:block; height:62px; width:auto; background:#fff; padding:10px 16px; margin-bottom:20px }
.rodape-marca p{ font-size:.92rem; line-height:1.6; max-width:34ch }
.rodape h5{
  font-family:var(--texto); font-weight:700; font-size:var(--t-micro); color:#fff;
  letter-spacing:.18em; text-transform:uppercase; margin:0 0 16px;
}
.rodape li{ margin-bottom:11px }
.rodape a{ font-size:.92rem; transition:color var(--transicao) }
.rodape a:hover{ color:var(--amarelo) }
.rodape-canal{ display:flex; flex-direction:column; gap:2px; margin-bottom:15px }
.rodape-canal b{ font-size:var(--t-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--amarelo); font-weight:700 }
.rodape-canal span{ color:#fff; font-size:.94rem }
.rodape-social{ display:flex; gap:8px; margin-top:20px }
.rodape-social a{
  width:42px; height:42px; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.22); transition:background var(--transicao), border-color var(--transicao);
}
.rodape-social a:hover{ background:var(--vermelho); border-color:var(--vermelho); color:#fff }
.rodape-social svg{ width:19px; height:19px }

/* faixa de identificação da empresa: exigência do jurídico, discreta.
   Fica entre a grade de links e a linha de copyright. */
.rodape-legal{
  display:flex; flex-wrap:wrap; gap:28px 56px; justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.13); padding-block:26px;
}
.rodape-empresa{ font-size:var(--t-peq); line-height:1.65; color:rgba(255,255,255,.6); max-width:46ch }
.rodape-empresa .rodape-razao{ color:#fff; font-weight:700; letter-spacing:.01em }
.rodape-canais-min{
  display:grid; grid-template-columns:repeat(2,auto); gap:4px 32px; align-content:start;
}
.rodape-canais-min .rodape-canal{ margin-bottom:8px }
@media (max-width:540px){ .rodape-canais-min{ grid-template-columns:1fr 1fr; gap:4px 20px } }

.rodape-fim a{ border-bottom:1px solid rgba(255,255,255,.35) }
.rodape-fim a:hover{ color:var(--amarelo); border-color:var(--amarelo) }
.rodape-fim{
  border-top:1px solid rgba(255,255,255,.13); padding-block:22px;
  display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between;
  font-size:var(--t-peq);
}
.rodape-aviso{
  border-top:1px solid rgba(255,255,255,.13); padding-block:20px 90px;
  font-size:var(--t-micro); color:rgba(255,255,255,.45); line-height:1.6;
}
@media (min-width:781px){ .rodape-aviso{ padding-bottom:34px } }

/* barra fixa só no celular: uma ação principal sempre à mão,
   no lugar do botão flutuante que cobria conteúdo */
.barra-cel{
  position:fixed; left:0; right:0; bottom:0; z-index:90; display:none;
  background:var(--branco); border-top:1px solid var(--linha);
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  gap:10px; box-shadow:0 -8px 24px -18px rgba(22,18,19,.5);
}
.barra-cel .btn{ flex:1 1 0; min-width:0; padding:15px 8px; font-size:.9rem; white-space:nowrap }
@media (max-width:359px){
  .barra-cel{ gap:8px; padding-inline:12px }
  .barra-cel .btn{ padding:14px 6px; font-size:.82rem; gap:6px }
  .barra-cel .btn svg{ width:15px; height:15px }
}
.barra-cel .btn svg{ width:17px; height:17px }
@media (max-width:780px){ .barra-cel{ display:flex } }

/* 7. BLOCOS DA HOME -------------------------------------------------- */

/* hero: tipográfico. Sem cartão falso, sem gradiente, sem ilustração de banco. */
.hero{
  position:relative; background:var(--vermelho-fundo); color:#fff;
  padding-block:clamp(56px,8vw,104px) clamp(48px,6vw,80px);
  border-bottom:6px solid var(--amarelo); overflow:hidden;
}
.hero::after{  /* banda listrada na borda: grafismo da marca, não enfeite genérico */
  content:""; position:absolute; top:0; right:0; bottom:0; width:22px;
  background:repeating-linear-gradient(-45deg,var(--amarelo) 0 14px,rgba(0,0,0,.35) 14px 28px);
}
@media (max-width:860px){ .hero::after{ width:12px } }
.hero .wrap{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(32px,5vw,80px); align-items:end;
}
.hero-texto{ grid-column:1 }
.hero h1{ margin:22px 0 24px; max-width:13ch }
.hero h1 em{ font-style:normal; color:var(--amarelo); display:block }
.hero p{ max-width:46ch; font-size:var(--t-lead); color:rgba(255,255,255,.9); line-height:1.55 }
.hero-acoes{ display:flex; flex-wrap:wrap; align-items:center; gap:18px 26px; margin-top:34px; grid-column:1 }
.hero-dados{ grid-column:2; grid-row:1/span 2; align-self:stretch;
  display:flex; flex-direction:column; justify-content:space-between;
  border-left:1px solid rgba(255,255,255,.28); padding-left:clamp(24px,3vw,44px) }
.hero-dado{ padding:16px 0 }
.hero-dado:first-child{ padding-top:0 }
.hero-dado:last-child{ padding-bottom:0 }
.hero-dado + .hero-dado{ border-top:1px solid rgba(255,255,255,.28) }
.hero-dado b{
  display:block; font-family:var(--display); font-size:clamp(1.9rem,3.4vw,2.7rem);
  line-height:1; letter-spacing:-.04em;
}
.hero-dado span{ font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.7) }
@media (max-width:900px){
  .hero .wrap{ grid-template-columns:1fr; gap:0 }
  .hero-acoes{ margin-top:30px }
  .hero-dados{
    grid-column:1; grid-row:auto; flex-direction:row; border-left:0; padding-left:0;
    border-top:1px solid rgba(255,255,255,.28); margin-top:8px;
  }
  .hero-dado{ padding:18px 26px 0 0; margin-right:26px; border-right:1px solid rgba(255,255,255,.28) }
  .hero-dado + .hero-dado{ border-top:0 }
  .hero-dado:last-child{ border-right:0; margin-right:0; padding-right:0 }
  .hero h1{ max-width:none }
}

/* como comprar: sequência, não três cartões iguais */
.passos{ counter-reset:passo; border-top:2px solid var(--tinta); margin-top:8px }
.passo{
  display:grid; grid-template-columns:auto 1fr; gap:6px 22px;
  padding:26px 0; border-bottom:1px solid var(--linha);
}
.passo::before{
  counter-increment:passo; content:counter(passo,decimal-leading-zero);
  font-family:var(--display); font-size:.92rem; color:var(--vermelho-esc);
  grid-row:span 2; padding-top:3px;
}
.passo h3{ align-self:center }
.passo p{ color:var(--tinta-3); font-size:.95rem; max-width:52ch }
.televendas-caixa{
  background:var(--tinta); color:#fff; padding:clamp(28px,3.5vw,40px);
  display:flex; flex-direction:column; gap:16px; align-self:start;
}
.televendas-caixa .fone{
  font-family:var(--display); font-size:clamp(1.5rem,2.6vw,2rem); letter-spacing:-.03em;
}
.televendas-caixa .horario{
  display:inline-flex; align-items:center; gap:9px; font-size:.9rem; color:rgba(255,255,255,.75);
}
.ponto-online{
  width:9px; height:9px; border-radius:50%; background:var(--wa-claro); flex:none;
  box-shadow:0 0 0 4px rgba(37,211,102,.2);
}

/* tele entrega: artes reais da rede sobre fundo escuro */
/* cidades: tabela de fios, não grade de cartões */
.cidades{ border-top:2px solid var(--tinta) }
.cidades a{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:17px 4px; border-bottom:1px solid var(--linha);
  transition:background var(--transicao), padding-inline var(--transicao);
}
.cidades a:hover{ background:var(--papel-2); padding-inline:12px 4px }
.cidades b{ font-family:var(--display); font-size:1.05rem; letter-spacing:-.015em }
.cidades span{ font-size:.9rem; color:var(--tinta-3) }
.cidades i{ font-style:normal; font-weight:700; color:var(--vermelho-esc) }

/* 8. UNIDADES -------------------------------------------------------- */
.busca{
  display:flex; flex-wrap:wrap; gap:12px; align-items:stretch;
  padding-bottom:18px; border-bottom:1px solid var(--linha);
}
.campo{
  display:flex; align-items:center; gap:10px; background:var(--branco);
  border:1px solid var(--linha-f); padding:0 14px; min-height:52px; flex:1 1 240px;
  min-width:0;                       /* sem isso o campo não encolhe abaixo de 320px */
  transition:border-color var(--transicao);
}
.campo--largo{ flex:2 1 260px }
.campo:focus-within{ border-color:var(--tinta) }
.campo label{
  font-size:var(--t-micro); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tinta-4); white-space:nowrap;
}
.campo select,.campo input{
  flex:1; min-width:0; border:0; background:none; outline:none;
  font-family:var(--texto); font-size:1rem; color:var(--tinta); min-height:50px;
}
.campo select{ cursor:pointer }
.chips{ display:flex; gap:8px; padding:16px 0 0; overflow-x:auto; scrollbar-width:none }
.chips::-webkit-scrollbar{ display:none }
.chip{
  flex:none; padding:9px 15px; border:1px solid var(--linha-f); background:var(--branco);
  font-size:.88rem; color:var(--tinta-2); white-space:nowrap;
  transition:background var(--transicao), color var(--transicao), border-color var(--transicao);
}
.chip:hover{ border-color:var(--tinta-3) }
.chip[aria-pressed="true"]{ background:var(--tinta); border-color:var(--tinta); color:#fff }
.contador{ padding:22px 0 26px; font-size:.9rem; color:var(--tinta-3) }

.lojas-grade{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr)); gap:1px; background:var(--linha); border:1px solid var(--linha) }
@media (max-width:700px){ .lojas-grade{ grid-template-columns:1fr } }
.lv-card{ display:flex; flex-direction:column; background:var(--branco); padding:20px 18px 18px }
/* com foto real da fachada, a imagem sangra até a borda do card */
.lv-card--foto{ padding-top:0 }
.lv-foto{ margin:0 -18px 18px; aspect-ratio:16/10; background:var(--papel-2); overflow:hidden }
.lv-foto img{ width:100%; height:100%; object-fit:cover }
.lv-card:hover{ background:var(--papel) }
/* cabeçalho do card: código da loja como referência interna e nome em destaque */
.lv-cab{ display:grid; grid-template-columns:auto 1fr; gap:2px 10px; align-items:baseline }
.lv-cod{
  grid-row:span 2; align-self:start; margin-top:3px;
  font-family:var(--display); font-size:.7rem; letter-spacing:.06em;
  color:var(--tinta-4); border:1px solid var(--linha-f); padding:3px 6px;
}
.lv-cab h3{ font-size:1.08rem; color:var(--vermelho-esc); line-height:1.12 }
.lv-local{ grid-column:2; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; color:var(--tinta-4); font-weight:700 }
.lv-badges{ display:flex; flex-wrap:wrap; gap:6px; padding:0 0 14px }
.lv-badge{ font-size:var(--t-micro); font-weight:700; padding:5px 10px; background:var(--tinta); color:#fff }
.lv-badge.wa{ background:var(--wa) }
.lv-badge.red{ background:var(--vermelho-esc) }
.lv-badge.gold{ background:var(--amarelo); color:var(--tinta) }
.lv-badge.ghost{ background:none; color:var(--tinta-4); border:1px dashed var(--linha-f) }
.lv-info{ padding:16px 0 18px; display:flex; flex-direction:column; gap:9px; flex:1 }
.lv-linha{ display:flex; gap:9px; font-size:.89rem; color:var(--tinta-2); line-height:1.45 }
.lv-linha svg{ width:16px; height:16px; flex:none; margin-top:3px; color:var(--tinta-4) }
/* ações do card: dois links de texto. Noventa botões pretos empilhados
   viravam textura — aqui a informação continua sendo o endereço. */
.lv-acoes{ display:flex; gap:20px; margin-top:auto; padding-top:14px; border-top:1px solid var(--linha); flex-wrap:wrap }
.lv-btn{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.85rem; font-weight:700; letter-spacing:.01em;
  border-bottom:2px solid transparent; padding-bottom:2px;
  transition:border-color var(--transicao), color var(--transicao);
}
.lv-btn svg{ width:15px; height:15px; flex:none }
.lv-btn-maps{ color:var(--tinta) }
.lv-btn-maps:hover{ border-bottom-color:var(--tinta) }
.lv-btn-wa{ color:var(--wa) }
.lv-btn-wa:hover{ border-bottom-color:var(--wa) }
.legenda{
  display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:center;
  margin-top:30px; padding-top:22px; border-top:1px solid var(--linha);
  font-size:var(--t-peq); color:var(--tinta-4);
}
.legenda b{ color:var(--tinta-2) }

/* 9. NUTRIVIGOR ------------------------------------------------------ */
.nv4-topo{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:22px; padding-bottom:24px; border-bottom:2px solid var(--tinta); margin-bottom:34px;
}
.nv4-selo{
  font-family:var(--display); font-size:var(--t-micro); letter-spacing:.12em;
  text-transform:uppercase; border:2px solid var(--tinta); padding:9px 15px;
}
/* Cinco produtos: ou cabem os cinco lado a lado, ou viram uma tira que se arrasta.
   Nada de grade com buraco na última linha. */
.nv4-grade{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px }
@media (max-width:1000px){
  .nv4-grade{
    display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding-bottom:14px; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter);
    scrollbar-width:thin;
  }
  .nv4-grade > *{ flex:0 0 clamp(216px,44vw,300px); scroll-snap-align:start }
}
@media (max-width:620px){ .nv4-grade > *{ flex:0 0 min(74vw,280px) } }
.nv4-prod{ display:flex; flex-direction:column; background:var(--papel); border:1px solid var(--linha) }

.cena{
  position:relative; aspect-ratio:5/4; display:grid; place-items:center;
  background:var(--papel-2); perspective:1300px; cursor:grab;
  touch-action:auto; overflow:hidden; container-type:inline-size;
}
.cena:active{ cursor:grabbing }
.cena::after{
  content:""; position:absolute; bottom:14%; left:50%; transform:translateX(-50%);
  width:62%; height:14px; border-radius:50%; filter:blur(6px);
  background:radial-gradient(ellipse at center,rgba(22,18,19,.3),rgba(22,18,19,0) 70%);
}
.caixa{
  /* a caixa acompanha a coluna: nada de largura fixa que estoura no celular */
  --w: clamp(122px, 17vw, 262px);
  --w: 76cqw;                    /* a caixa mede a própria coluna, não a janela */
  --h: calc(var(--w) * .773);
  --d: calc(var(--w) * var(--prof) / 100);
  position:relative; width:var(--w); height:var(--h); transform-style:preserve-3d;
  transform:rotateX(var(--rx)) rotateY(var(--ry)); z-index:1;
}
@supports not (width:1cqw){
  @media (max-width:1100px){ .caixa{ --w: clamp(122px, 22vw, 262px) } }
  @media (max-width:560px){ .caixa{ --w: clamp(118px, 34vw, 180px) } }
}
.face{ position:absolute; left:50%; top:50%; backface-visibility:hidden; overflow:hidden }
.face img{ width:100%; height:100%; object-fit:cover }
.f-frente{ width:var(--w); height:var(--h); transform:translate(-50%,-50%) translateZ(calc(var(--d)/2)) }
.f-verso { width:var(--w); height:var(--h); transform:translate(-50%,-50%) rotateY(180deg) translateZ(calc(var(--d)/2)) }
.f-dir{ width:var(--d); height:var(--h); transform:translate(-50%,-50%) rotateY(90deg) translateZ(calc(var(--w)/2)) }
.f-esq{ width:var(--d); height:var(--h); transform:translate(-50%,-50%) rotateY(-90deg) translateZ(calc(var(--w)/2)) }
.f-topo{ width:var(--w); height:var(--d); transform:translate(-50%,-50%) rotateX(90deg) translateZ(calc(var(--h)/2)) }
.f-base{ width:var(--w); height:var(--d); transform:translate(-50%,-50%) rotateX(-90deg) translateZ(calc(var(--h)/2)) }
.f-dir,.f-esq{
  display:grid; place-items:center;
  background:
    linear-gradient(90deg,rgba(0,0,0,.42),rgba(0,0,0,0) 34%,rgba(0,0,0,0) 66%,rgba(0,0,0,.42)),
    linear-gradient(180deg,var(--ouro) 0 3%,var(--marca) 9%,var(--marca) 91%,var(--ouro) 97% 100%);
}
.lombada{
  font-family:var(--display); color:var(--ouro); font-size:calc(var(--d)*.3);
  letter-spacing:.2em; white-space:nowrap; transform:rotate(-90deg); opacity:.92;
}
.f-topo{ background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,0)),
  linear-gradient(90deg,var(--ouro) 0 2.5%,var(--marca) 8%,var(--marca) 92%,var(--ouro) 97.5% 100%) }
.f-base{ background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.62)),
  linear-gradient(90deg,var(--ouro) 0 2.5%,var(--marca) 8%,var(--marca) 92%,var(--ouro) 97.5% 100%) }
.f-verso{
  background:linear-gradient(115deg,rgba(255,255,255,.1) 0 18%,rgba(255,255,255,0) 42%),
             linear-gradient(160deg,var(--marca),#05070C 145%);
  border-left:calc(var(--w)*.022) solid var(--ouro);
}
.painel{
  width:100%; height:100%; padding:5.6% 6.2% 4.6%; color:#fff;
  display:flex; flex-direction:column; gap:.34em;
  font-family:var(--texto); font-size:calc(var(--w)*.0355); line-height:1.26;
}
.painel .marca-nv{ font-family:var(--display); letter-spacing:.2em; font-size:.78em; color:var(--ouro); text-transform:uppercase }
.painel .tit{ font-family:var(--display); font-size:.92em; letter-spacing:.04em; text-transform:uppercase }
.painel .porcao{ flex:none; font-size:.74em; opacity:.82 }
.tabela{ flex:none; background:#fff; color:var(--tinta); font-size:.8em; font-variant-numeric:tabular-nums }
.tabela .lin{ display:flex; justify-content:space-between; gap:.6em; padding:.22em .5em }
.tabela .lin + .lin{ border-top:1px solid #DDD8D2 }
.tabela .lin.cab{ background:var(--tinta); color:#fff; font-weight:700; font-size:.9em; letter-spacing:.04em }
.tabela .vd{ opacity:.68; min-width:3.2em; text-align:right }
.pendente{ flex:none; border:1px dashed rgba(255,255,255,.5); padding:.6em .7em; font-size:.78em; opacity:.85 }
.painel .aviso{ flex:none; font-size:.68em; opacity:.8; line-height:1.35 }
.painel .rodape-nv{ flex:none; margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between; gap:.8em }
.barras{ background:#fff; padding:.25em .3em .15em; display:flex; flex-direction:column; align-items:center }
.barras i{
  display:block; height:calc(var(--w)*.045); width:calc(var(--w)*.19);
  background-image:repeating-linear-gradient(90deg,#111 0 1px,#fff 1px 2px,#111 2px 3.5px,#fff 3.5px 5px,#111 5px 5.7px,#fff 5.7px 7px);
}
.barras small{ color:#111; font-size:.5em; letter-spacing:.06em; line-height:1.6 }
.painel .sac{ font-size:.66em; opacity:.72; text-align:right; line-height:1.4 }
.dica{
  position:absolute; left:10px; bottom:10px; z-index:2; pointer-events:none;
  font-size:var(--t-micro); font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta-4); background:rgba(255,255,255,.92); padding:4px 8px;
  opacity:0; transition:opacity var(--transicao);
}
.cena:hover .dica{ opacity:1 }
.nv4-corpo{ padding:18px; display:flex; flex-direction:column; gap:10px; flex:1 }
.nv4-apres{ font-size:var(--t-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-4); min-height:2.4em }
.nv4-sub{ font-size:.87rem; color:var(--tinta-3); line-height:1.45 }
.nv4-benef{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; margin-top:auto; padding-top:8px }
.nv4-benef span{ font-size:.68rem; font-weight:700; letter-spacing:.01em; padding:4px 9px; color:#fff; line-height:1.35 }
.nv4-zero{ margin-top:14px; font-size:var(--t-micro); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-4); border-top:1px solid var(--linha); padding-top:11px }
@media (max-width:560px){
  .nv4-corpo{ padding:13px }
  .nv4-sub, .nv4-benef{ display:none }   /* no celular o card vive da caixa e do nome */
}

/* 10. PÁGINAS INTERNAS ----------------------------------------------- */
.capa{
  position:relative; overflow:hidden;
  background:var(--vermelho-fundo); color:#fff; border-bottom:6px solid var(--amarelo);
  padding-block:clamp(40px,5vw,68px) clamp(44px,6vw,76px);
}
/* mesma faixa listrada do hero: liga as internas à home sem inventar ilustração */
.capa::after{
  content:""; position:absolute; top:0; right:0; bottom:0; width:22px;
  background:repeating-linear-gradient(-45deg,var(--amarelo) 0 14px,rgba(0,0,0,.35) 14px 28px);
}
@media (max-width:860px){ .capa::after{ width:12px } }
.capa .wrap{ position:relative; z-index:1 }
.migalhas{ font-size:var(--t-peq); color:rgba(255,255,255,.66); margin-bottom:20px }
.migalhas a:hover{ color:var(--amarelo) }
.capa h1{ max-width:16ch; font-size:clamp(2rem,4.6vw,3.2rem) }
.capa p{ max-width:56ch; margin-top:20px; font-size:var(--t-lead); color:rgba(255,255,255,.88) }
.capa .btn{ margin-top:30px }

.texto-2col{ display:grid; grid-template-columns:1fr 1.6fr; gap:clamp(28px,5vw,80px); align-items:start }
@media (max-width:860px){ .texto-2col{ grid-template-columns:1fr; gap:24px } }
.corpo-texto p + p{ margin-top:18px }
.corpo-texto p{ color:var(--tinta-2); line-height:1.72 }
.corpo-texto p:first-child{ font-size:var(--t-lead); color:var(--tinta) }

.numeros{ display:flex; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.24) }
.numeros div{ padding:26px 36px 0 0; margin-right:36px; border-right:1px solid rgba(255,255,255,.24) }
.numeros div:last-child{ border-right:0; margin-right:0 }
.numeros b{ display:block; font-family:var(--display); font-size:clamp(2rem,4vw,3rem); line-height:1; letter-spacing:-.04em; color:var(--amarelo) }
.numeros span{ font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.7) }
@media (max-width:520px){ .numeros div{ padding-right:22px; margin-right:22px } }

.etapas{ counter-reset:etapa; border-top:2px solid var(--tinta) }
.etapa{
  display:grid; grid-template-columns:auto 1fr; gap:4px 22px;
  padding:24px 0; border-bottom:1px solid var(--linha);
}
.etapa::before{
  counter-increment:etapa; content:counter(etapa,decimal-leading-zero);
  font-family:var(--display); font-size:.9rem; color:var(--vermelho-esc); grid-row:span 2; padding-top:4px;
}
.etapa p{ color:var(--tinta-3); font-size:.94rem; max-width:60ch }

.datas{ display:flex; flex-wrap:wrap; gap:18px 28px; align-items:center; justify-content:space-between;
  background:var(--tinta); color:#fff; padding:clamp(24px,3vw,34px) }
.datas-pills{ display:flex; flex-wrap:wrap; gap:8px }
.data-pill{ border:1px solid rgba(255,255,255,.3); padding:8px 15px; font-family:var(--display); font-size:.95rem }
.exemplo{ border-left:4px solid var(--amarelo); background:var(--papel-2); padding:22px 26px; margin-top:26px }
.exemplo b{ display:block; font-size:var(--t-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--vermelho-esc); margin-bottom:7px }

.parceiras{ display:flex; flex-wrap:wrap; gap:10px 12px; margin-top:24px }
.parceiras span{ border:1px solid var(--linha-f); padding:10px 16px; font-weight:700; font-size:.92rem; color:var(--tinta-2) }

.faq{ max-width:820px }
.faq details{ border-bottom:1px solid var(--linha) }
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 0; font-weight:700; font-size:1.02rem; cursor:pointer; list-style:none;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:""; width:11px; height:11px; flex:none;
  border-right:2px solid var(--vermelho); border-bottom:2px solid var(--vermelho);
  transform:rotate(45deg) translateY(-3px); transition:transform var(--transicao);
}
.faq details[open] summary::after{ transform:rotate(-135deg) translateY(-3px) }
.faq p{ padding:0 0 22px; color:var(--tinta-3); line-height:1.7; max-width:70ch }

.formulario{ background:var(--branco); border:1px solid var(--linha); padding:clamp(24px,4vw,46px); max-width:780px }
.form-linha{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px }
@media (max-width:620px){ .form-linha{ grid-template-columns:1fr } }
.form-campo{ display:flex; flex-direction:column; gap:6px }
.form-campo.cheio{ grid-column:1/-1 }
.form-campo label{ font-size:var(--t-peq); font-weight:700; color:var(--tinta-2) }
.form-campo label i{ color:var(--vermelho); font-style:normal }
.form-campo input,.form-campo select,.form-campo textarea{
  font-family:var(--texto); font-size:1rem; color:var(--tinta); background:var(--branco);
  border:1px solid var(--linha-f); padding:13px 14px; min-height:50px;
  transition:border-color var(--transicao), box-shadow var(--transicao);
}
.form-campo textarea{ min-height:118px; resize:vertical }
.form-campo :is(input,select,textarea):focus{
  outline:none; border-color:var(--tinta); box-shadow:0 0 0 3px rgba(22,18,19,.09);
}
.form-aceite{ display:flex; gap:11px; align-items:flex-start; font-size:var(--t-peq); color:var(--tinta-3); margin:8px 0 22px }
.form-aceite input{ margin-top:3px; width:18px; height:18px; flex:none }
.form-aceite a{ text-decoration:underline }

.canais{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--linha); border:1px solid var(--linha) }
@media (max-width:760px){ .canais{ grid-template-columns:1fr } }
.canal{ background:var(--branco); padding:clamp(24px,3vw,34px); display:flex; flex-direction:column; gap:12px }
.canal-tag{ font-size:var(--t-micro); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--vermelho-esc) }
.canal p{ color:var(--tinta-3); font-size:.94rem; line-height:1.6 }
.canal .fone{ font-family:var(--display); font-size:1.35rem; letter-spacing:-.02em }
.canal .link-seta{ margin-top:auto; align-self:flex-start; color:var(--wa) }

.cta-final{ background:var(--vermelho-fundo); color:#fff; text-align:center; border-top:6px solid var(--amarelo) }
.cta-final h2{ max-width:22ch; margin-inline:auto }
.cta-final p{ max-width:56ch; margin:18px auto 30px; color:rgba(255,255,255,.88); font-size:var(--t-lead) }

/* 11. MOVIMENTO E ACESSIBILIDADE ------------------------------------- */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--amarelo); outline-offset:3px;
}
.faixa--tinta :focus-visible,.hero :focus-visible,.capa :focus-visible,.cta-final :focus-visible{ outline-color:#fff }

/* entrada discreta: só com JS, só quando o usuário não pediu menos movimento.
   Sem JS ou com "reduzir movimento", tudo nasce visível. */
@media (prefers-reduced-motion: no-preference){
  .js .surge{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s cubic-bezier(.2,.6,.3,1) }
  .js .surge.visivel{ opacity:1; transform:none }
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important }
}

@media print{
  .topo,.barra-cel,.rodape,.dica{ display:none }
  body{ background:#fff }
}

/* lista em duas colunas — usada em "o que você encontra" */
.linhas--2{ display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(28px,5vw,72px) }
@media (max-width:760px){ .linhas--2{ grid-template-columns:1fr } }

/* 12. PÁGINAS LEGAIS ------------------------------------------------- */
/* Texto corrido, coluna estreita para leitura. Mesma tipografia do site. */
.texto-legal{ max-width:74ch }   /* coluna de leitura, alinhada à esquerda do wrap */
.texto-legal h2{
  font-size:clamp(1.15rem,2vw,1.4rem); margin:38px 0 12px;
  padding-top:22px; border-top:1px solid var(--linha);
}
.texto-legal h2:first-of-type{ margin-top:6px }
.texto-legal p{ color:var(--tinta-2); line-height:1.7; margin-bottom:12px }
.texto-legal a{ color:var(--vermelho-esc); border-bottom:1px solid currentColor }
.texto-legal a:hover{ color:var(--tinta) }
.lista-legal{ margin:0 0 14px; padding-left:20px; list-style:disc }
.lista-legal li{ color:var(--tinta-2); line-height:1.7; margin-bottom:6px }
/* aviso de documento em validação: informação honesta, não decoração */
.aviso-rascunho{
  border-left:4px solid var(--amarelo); background:var(--papel-2);
  padding:16px 20px; font-size:.94rem; line-height:1.6; color:var(--tinta-2);
  margin-bottom:34px;
}
.aviso-rascunho strong{ color:var(--tinta) }
/* trecho que ainda espera o texto aprovado pela empresa */
.pendente-legal{
  border:1px dashed var(--linha-f); padding:14px 18px;
  font-size:.92rem; color:var(--tinta-3) !important; font-style:italic;
}
.data-legal{ margin-top:36px; padding-top:20px; border-top:1px solid var(--linha);
  font-size:var(--t-peq); color:var(--tinta-3) }
.canal-horario{ font-size:var(--t-peq) !important; color:var(--tinta-4) !important }
/* mensagem de "nenhum resultado" na página de unidades */
.lv-vazio{ padding:34px 0; color:var(--tinta-3); font-size:.95rem }

/* capa de /unidades: a busca de loja à esquerda, o pedido pela tele entrega
   à direita. Uma faixa vermelha só — antes eram duas, coladas, separadas por
   um fio amarelo que não criava hierarquia nenhuma. */
.capa--acao .wrap{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,clamp(300px,33vw,400px));
  gap:clamp(30px,4vw,64px); align-items:start;
}
/* o título não é arrastado quando o seletor abre */
.capa--acao .capa-texto{ padding-top:4px }
.capa--acao h1{ max-width:17ch }
.capa--acao .capa-texto > p:last-child{ max-width:44ch }
.capa-acao{ padding-left:clamp(24px,2.5vw,38px); border-left:1px solid rgba(255,255,255,.3) }
.capa-acao .rotulo{ margin-bottom:12px }
.capa-acao-tit{
  font-family:var(--display); font-size:1.12rem; line-height:1.18; letter-spacing:-.025em;
  color:#fff; margin-bottom:18px;
}
@media (max-width:900px){
  .capa--acao .wrap{ grid-template-columns:1fr; gap:32px }
  .capa--acao h1{ max-width:none }
  .capa-acao{
    padding-left:0; padding-top:28px;
    border-left:0; border-top:1px solid rgba(255,255,255,.3);
  }
}

.seletor-cidade{ background:var(--branco); border:2px solid var(--tinta) }
.seletor-cidade > summary{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 22px; cursor:pointer; list-style:none;
  font-family:var(--display); font-size:1.05rem; letter-spacing:-.02em;
  color:var(--tinta); background:var(--amarelo);
}
.seletor-cidade > summary::-webkit-details-marker{ display:none }
.seletor-cidade > summary::after{
  content:""; width:9px; height:9px; flex:none;
  border-right:2.5px solid currentColor; border-bottom:2.5px solid currentColor;
  transform:translateY(-3px) rotate(45deg); transition:transform var(--transicao);
}
.seletor-cidade[open] > summary::after{ transform:translateY(1px) rotate(-135deg) }
.seletor-cidade > summary:focus-visible{ outline:3px solid var(--tinta); outline-offset:-3px }
.seletor-cidade ul{ border-top:2px solid var(--tinta) }
.seletor-cidade li + li{ border-top:1px solid var(--linha) }
.seletor-cidade a{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:15px 22px; color:var(--tinta); transition:background var(--transicao), padding var(--transicao);
}
.seletor-cidade a:hover{ background:var(--papel-2); padding-left:28px }
.seletor-cidade b{ font-weight:700 }
.seletor-cidade span{ color:var(--wa); font-weight:700; font-size:.92rem; white-space:nowrap }
@media (max-width:860px){
  }