/* =====================================================================
   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
  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:            #0F7A40;  /* era #128C4A: 4,31:1 no branco, faltava pouco */
  --wa-claro:      #25D366;

  /* neutros com viés quente — cinza puro entrega layout automático */
  --tinta:    #161213;
  --tinta-2:  #3A3133;
  --tinta-3:  #6E6265;
  --tinta-4:  #767174;   /* era #9C9093: 2,93:1 no papel, abaixo do mínimo AA */
  /* o mesmo cinza-4, mas para texto pequeno SOBRE fundo escuro (--tinta):
     ali o claro é que contrasta — #767174 cairia para 3,88:1 */
  --tinta-4-esc: #9C9093;   /* 6,04:1 sobre --tinta */
  --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);

  /* faixa da marca própria: preto de encarte, não cinza de dashboard */
  --nutri-fundo: #0E1014;
  --nutri-card:  #16181E;
  --nutri-palco: #1D212A;
}


/* O atributo hidden só funciona porque o navegador traz [hidden]{display:none}
   na folha padrão — e QUALQUER display vindo de uma classe ganha dele, por
   especificidade. Como .pr-card é display:flex, esconder um card com
   card.hidden = true não surtia efeito nenhum: a conta do filtro batia e os
   produtos continuavam todos na tela. Esta regra devolve ao hidden o poder
   que ele deveria ter, em qualquer componente do site. */
[hidden]{ display:none !important }

/* 2. BASE ------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
/* o cabeçalho é sticky: sem isto, o link #nutrivigor pousa com o título
   escondido atrás dele */
/* O cabeçalho é sticky: sem esta folga, o link de âncora para uma seção
   deixa o começo dela embaixo da barra. A folga é por LARGURA, não por
   altura de tela — quem manda no tamanho do cabeçalho é a largura (105px
   no celular, 115px no tablet, 119px no desktop). Antes era 12vh, que em
   tela baixa dava 96px e escondia uma tira da seção. */
/* Vale para tudo que é alvo de link com âncora: as seções, o seletor de
   cidade (#tele-entrega) e o card de cada unidade (#F007). */
section[id], [id].faixa, .capa-acao[id], .lv-card[id]{ scroll-margin-top:114px }
@media (min-width:601px){
  section[id], [id].faixa, .capa-acao[id], .lv-card[id]{ scroll-margin-top:124px }
}
@media (min-width:981px){
  section[id], [id].faixa, .capa-acao[id], .lv-card[id]{ scroll-margin-top:128px }
}
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) }
/* o amarelo da marca sobre a faixa vermelha dá 3,91:1 — abaixo do mínimo
   para texto pequeno. Só ali ele clareia; sobre a tinta continua o amarelo
   de sempre (11:1). */
.faixa--vermelho .rotulo--claro{ color:#FFE680 }
.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:80px;
  padding-block:6px;
}
/* No topo entra só o símbolo (operários + FCT): a marca completa é vertical e
   ficaria minúscula numa barra horizontal. O nome por extenso aparece no rodapé. */
.marca{ flex:0 0 auto }   /* ver a media query da faixa 981–1120px abaixo */
.marca img{ height:58px; 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) }
/* Faixa estreita do desktop: a partir de 981px a navegação completa volta a
   aparecer, mas ainda não há largura sobrando para ela, o botão e o logo.
   Antes desta regra o logo era o único item que podia encolher — e encolhia
   até zero, sumindo da barra entre 981px e 1100px. */
@media (min-width:981px) and (max-width:1120px){
  .topo-barra .wrap{ gap:12px }
  .nav{ gap:0 }
  .nav > a, .nav-drop > button{ padding:11px 9px; font-size:.9rem }
}

.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-esc) }
.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-esc); 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:70px }
  .marca img{ height:48px }
}

/* 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 } }
/* a marca é vertical e tem texto azul-marinho: no rodapé escuro ela pede
   uma placa branca para continuar legível */
.rodape-marca img{ display:block; height:96px; width:auto; background:#fff; padding:12px 18px; margin-bottom:20px }
.rodape-marca p{ font-size:.92rem; line-height:1.6; max-width:34ch }
.rodape .rodape-titulo{
  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-atendimento{ font-size:var(--t-peq); align-self:end }
.rodape-atendimento a{ border-bottom:1px solid rgba(255,255,255,.35) }
.rodape-atendimento a:hover{ color:var(--amarelo); border-color:var(--amarelo) }
/* linha de copyright: identificação completa da empresa, centralizada,
   igual em todas as páginas */
.rodape-fim{
  border-top:1px solid rgba(255,255,255,.13); padding-block:22px;
  text-align:center; font-size:var(--t-micro); line-height:1.7;
  color:rgba(255,255,255,.6);
}
.rodape-copy{ max-width:108ch; margin-inline:auto; text-wrap:pretty }
/* farmacêutica responsável: exigência de site de farmácia. Fica logo abaixo da
   identificação da empresa, um degrau mais clara que o copyright para se ler
   como informação legal, não como assinatura do site. */
.rodape-resp{ margin-top:8px; color:rgba(255,255,255,.78) }
.rodape-credito{ margin-top:8px; color:rgba(255,255,255,.45) }
.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;
}
/* sobre o vermelho, branco a 70% cai para 3,58:1 */
.hero-dado span{ font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.92) }
@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) }

/* O fio que separa as unidades é o vermelho da marca. Ele não é desenhado card
   a card: o gap de 1px deixa o fundo da grade aparecer, então cada célula fica
   contornada sem dobrar a espessura no encontro de duas — e os cantos ficam
   retos, como no resto do site. */
.lojas-grade{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));
  gap:1px; background:var(--vermelho); border:1px solid var(--vermelho);
}
@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 }
/* fachada vinda do Street View: a imagem é servida pelo Google e traz o
   crédito impresso no canto de baixo. NÃO cubra essa faixa com tarja, texto
   ou gradiente — a atribuição é condição de uso da API.
   O 16/10 do quadro é a mesma proporção pedida à API (640x400), então a
   imagem entra sem corte nem distorção. */
.lv-foto--sv img{ object-fit:cover; background:var(--papel-2) }
/* espaço reservado da unidade sem fachada cadastrada: placa da marca em cima
   do papel, discreta. Não é foto e não finge ser — só impede que o card fique
   com um vazio branco do lado de vizinhos que já têm imagem. */
.lv-foto--vazia{
  display:grid; place-items:center;
  background:var(--papel-2);
  border-bottom:1px solid var(--linha);
}
.lv-foto--vazia img{
  width:38%; height:auto; opacity:.22;
  filter:grayscale(1) contrast(.8);
}
.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) }
.faixa--tinta .legenda b,
.faixa--vermelho .legenda b{ color:#fff }

/* nota de rodapé de bloco: uma frase, não uma linha de legendas.
   .legenda é flex e centralizada — serve para itens lado a lado, não para texto. */
.nota{
  margin-top:28px; padding-top:20px; border-top:1px solid var(--linha);
  font-size:var(--t-peq); line-height:1.6; color:var(--tinta-3); max-width:62ch;
}
.nota b{ color:var(--tinta) }
.nota--clara{ border-color:rgba(255,255,255,.2); color:rgba(255,255,255,.68) }
.nota--clara b{ color:#fff }

/* 9. NUTRIVIGOR ------------------------------------------------------ */
/* A linha própria não divide a faixa de papel com o resto da home: ela tem
   fundo preto, o amarelo da casa nos fios e nos rótulos, e as embalagens
   iluminadas por cima. É a seção que deve parar a rolagem. */
.faixa--nutri{
  position:relative; overflow:hidden;
  background:var(--nutri-fundo); color:#fff;
  padding-block:clamp(64px,8vw,120px);
}
/* mesma banda listrada da capa: a marca própria entra com o grafismo da casa,
   não com um enfeite novo */
.faixa--nutri::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){ .faixa--nutri::after{ width:12px } }
.faixa--nutri .wrap{ position:relative; z-index:1 }

.nv4-topo{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:22px clamp(24px,4vw,60px);
  padding-bottom:26px; border-bottom:2px solid var(--amarelo); margin-bottom:clamp(30px,4vw,46px);
}
.nv4-intro{ flex:1 1 340px }
.nv4-marca{
  font-size:clamp(2.9rem,7.2vw,5.1rem); line-height:.9; letter-spacing:-.045em; color:#fff;
}
.nv4-lead{ color:rgba(255,255,255,.78); max-width:46ch; margin-top:16px; font-size:var(--t-lead) }
.nv4-intro .nv4-selo{ display:inline-block; margin-top:24px }
.nv4-selo{
  font-family:var(--display); font-size:var(--t-micro); letter-spacing:.12em;
  text-transform:uppercase; border:2px solid var(--amarelo); color:var(--amarelo);
  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(--nutri-card); border:1px solid rgba(255,255,255,.10);
  transition:border-color var(--transicao), background var(--transicao);
}
.nv4-prod:hover{ border-color:rgba(245,197,24,.55); background:#1A1D24 }

/* Palco da embalagem: a frente da caixa é uma arte chapada, sem fundo próprio.
   Sobre o preto ela precisa de luz — um foco atrás e sombra embaixo — senão
   some. A sombra é drop-shadow: acompanha o recorte real da caixa. */
.nv4-foto{
  position:relative; aspect-ratio:5/4; display:grid; place-items:center;
  overflow:hidden; padding:5% 6%;
  background:
    radial-gradient(72% 58% at 50% 40%, rgba(255,246,226,.26) 0%, rgba(255,246,226,0) 74%),
    var(--nutri-palco);
}
.nv4-foto img{
  width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 16px 20px rgba(0,0,0,.62));
  transition:transform var(--transicao);
}
@media (hover:hover){
  .nv4-prod:hover .nv4-foto img,
  .nv4-prod:focus-visible .nv4-foto img{ transform:scale(.84) }
}

.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(--amarelo); min-height:2.4em }
.nv4-corpo h3{ color:#fff }
.nv4-sub{ font-size:.87rem; color:rgba(255,255,255,.72); line-height:1.45 }
.nv4-zero{ margin-top:auto; padding-top:14px; font-size:var(--t-micro); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.58); border-top:1px solid rgba(255,255,255,.14) }

/* ---- selos em volta da embalagem -------------------------------------
   Para que serve cada suplemento fica junto do produto, não numa lista solta
   embaixo. No mouse aparece ao passar por cima ou ao focar pelo teclado; em
   tela de toque, onde não existe "passar por cima", fica sempre visível.
   O texto está no HTML nos dois casos — só a opacidade muda. */
.nv4-halo{ position:absolute; inset:0; pointer-events:none }
.nv4-halo::before{
  content:""; position:absolute; inset:0; opacity:0;
  background:rgba(8,10,14,.34); transition:opacity 220ms ease;
}
.nv4-halo span{
  position:absolute; max-width:46%;
  font-size:.64rem; font-weight:700; letter-spacing:.01em; line-height:1.25;
  padding:4px 8px; color:#101216;
  opacity:0; transform:translateY(8px) scale(.96);
  transition:opacity 220ms ease, transform 260ms cubic-bezier(.2,.7,.3,1);
}
/* cantos: a embalagem encolhe no centro e os selos ocupam as quinas */
.nv4-halo span:nth-child(1){ top:5%;    left:4% }
.nv4-halo span:nth-child(2){ bottom:6%; right:4% }
.nv4-halo span:nth-child(3){ bottom:6%; left:4% }

@media (hover:hover){
  .nv4-prod:hover .nv4-halo::before,
  .nv4-prod:focus-visible .nv4-halo::before{ opacity:1 }
  .nv4-prod:hover .nv4-halo span,
  .nv4-prod:focus-visible .nv4-halo span{ opacity:1; transform:none }
  .nv4-halo span:nth-child(2){ transition-delay:70ms }
  .nv4-halo span:nth-child(3){ transition-delay:140ms }
}
/* sem cursor não há "passar por cima": os selos ficam à mostra, e a embalagem
   já entra recuada para caber todo mundo */
@media (hover:none){
  .nv4-halo span{ opacity:1; transform:none }
  .nv4-foto img{ transform:scale(.86) }
}
.nv4-prod:focus-visible{ outline:3px solid var(--amarelo); outline-offset:2px }

/* Alinhamento entre os cinco cards.
   As faixas (apresentação, nome, descrição, selos, rodapé) têm alturas
   diferentes porque o texto de cada produto quebra em um número diferente de
   linhas. Com `subgrid`, os cinco cards passam a dividir as MESMAS linhas da
   grade: cada faixa fica na altura do card mais alto e tudo alinha na
   horizontal. Sem altura fixa — se um texto mudar, a linha se ajusta sozinha.
   Navegador sem subgrid continua com o layout em coluna de antes. */
@supports (grid-template-rows: subgrid){
  @media (min-width:1001px){
    .nv4-grade{
      /* cena · apresentação · nome · descrição · rodapé */
      grid-template-rows:auto auto auto auto auto;
      column-gap:14px; row-gap:10px;
    }
    .nv4-prod{ display:grid; grid-row:span 5; grid-template-rows:subgrid }
    .nv4-corpo{
      grid-row:span 4; display:grid; grid-template-rows:subgrid;
      padding:0 18px;          /* só na horizontal: padding vertical desalinharia as faixas */
    }
    .nv4-apres{ padding-top:8px; min-height:0 }
    .nv4-zero{ margin-top:0; padding-bottom:18px }
  }
}
@media (max-width:560px){
  .nv4-corpo{ padding:13px }
  .nv4-sub{ display:none }   /* no celular o card vive da caixa, do nome e dos selos */
}


/* ---- lista de marcadores ---------------------------------------------
   As perguntas frequentes reaproveitam o componente .faq que já existe na
   página do convênio — nenhum estilo novo foi criado para elas. */
.marcadores{ display:grid; gap:12px }
.marcadores li{
  position:relative; padding-left:26px; line-height:1.5;
  color:rgba(255,255,255,.88);
}
.marcadores li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:10px; height:10px; background:var(--amarelo);
}
.faixa--papel .marcadores li,
.faixa--papel2 .marcadores li{ color:var(--tinta-2) }

/* 10. PÁGINAS INTERNAS ----------------------------------------------- */
.capa{
  --capa-baixo:clamp(44px,6vw,76px);
  position:relative; overflow:hidden;
  background:var(--vermelho-fundo); color:#fff; border-bottom:6px solid var(--amarelo);
  padding-block:clamp(40px,5vw,68px) var(--capa-baixo);
}
/* 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{ display:inline-block; padding-block:3px }  /* alvo de toque */
.migalhas a:hover{ color:var(--amarelo) }
.capa h1{ max-width:16ch; font-size:clamp(2rem,4.6vw,3.2rem) }
/* cuidado: pega QUALQUER <p> dentro da capa, inclusive os que ficam em
   caixas de fundo claro. Quem precisa de tinta escura ali tem de subir a
   especificidade (ver .seletor-nota e .camp-validade). */
.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) }

/* números: as cores saem da faixa onde o bloco está. O padrão é faixa clara;
   em faixa escura, o amarelo e o branco entram por herança da própria seção. */
.numeros{ display:flex; flex-wrap:wrap; border-top:1px solid var(--linha-f) }
.numeros div{ padding:26px 36px 0 0; margin-right:36px; border-right:1px solid var(--linha-f) }
.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(--vermelho-esc) }
.numeros span{ font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-3) }
.faixa--tinta .numeros,
.faixa--vermelho .numeros,
.faixa--nutri .numeros{ border-top-color:rgba(255,255,255,.24) }
.faixa--tinta .numeros div,
.faixa--vermelho .numeros div,
.faixa--nutri .numeros div{ border-right-color:rgba(255,255,255,.24) }
.faixa--tinta .numeros b,
.faixa--vermelho .numeros b,
.faixa--nutri .numeros b{ color:var(--amarelo) }
.faixa--tinta .numeros span,
.faixa--vermelho .numeros span,
.faixa--nutri .numeros span{ 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 } }
/* endereço de e-mail é uma palavra longa: sem quebrar, ele empurra a página
   inteira a 320px. Vale para todo mailto, em qualquer bloco. */
a[href^="mailto:"],
.canal-email,
.canal p{ overflow-wrap:anywhere }
.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) }
/* definições da política: termo e significado, um par por linha */
.defs{ margin:22px 0 8px; border-top:1px solid var(--linha) }
.defs > div{
  display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr); gap:6px 28px;
  padding:16px 0; border-bottom:1px solid var(--linha);
}
.defs dt{ font-weight:700; color:var(--tinta) }
.defs dd{ margin:0; color:var(--tinta-3); line-height:1.6 }
@media (max-width:640px){ .defs > div{ grid-template-columns:1fr; gap:4px } }

.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-email{ font-size:var(--t-peq); color:var(--tinta-3); margin-bottom:14px }
.canal-email a{ text-decoration:underline; display:inline-block; padding-block:3px }
.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:stretch;
}
/* o título não é arrastado quando o seletor abre */
.capa--acao .capa-texto{ padding-top:4px; display:flex; flex-direction:column }
.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) }
/* linha para quem não achou a própria cidade na lista: Içara e Seara ainda
   não têm rota com número próprio */
/* ".capa p" (0,1,1) vence ".seletor-nota" (0,1,0) e pintaria este texto de
   branco sobre o papel — 1,14:1. Seletor composto para a tinta ganhar. É a
   segunda vez que essa regra da capa pega um texto de fundo claro; a outra
   foi a validade da campanha. */
.capa .seletor-nota, .seletor-nota{
  margin:0; padding:12px 22px 14px; font-size:var(--t-peq); line-height:1.5;
  color:var(--tinta-2); background:var(--papel-2); border-top:1px solid var(--linha);
}
.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){
  }

/* ---- Dona Cecília, personagem da marca ---------------------------------
   A arte vem recortada, com fundo transparente. A placa é desenhada aqui
   em CSS: o texto continua sendo texto — indexável, legível por leitor de
   tela e editável sem refazer a ilustração. */
/* cartaz: arte fechada, com o texto já desenhado. Entra como imagem, sem placa
   de CSS por cima — o que chega pronto da agência não é redesenhado aqui.
   O recorte tem fundo transparente, então a arte pousa na cor da faixa. */
.cartaz{ margin:26px 0 0 }
.cartaz img{ width:100%; height:auto; display:block }
@media (max-width:860px){ .cartaz{ margin-top:26px } }

.mascote{
  position:relative; display:flex; align-items:flex-end;
  gap:0; margin-bottom:-24px;      /* encosta no fio que fecha o cabeçalho */
  flex:0 1 auto;
}
.mascote-arte{
  width:clamp(132px,17vw,208px); height:auto; flex:none;
  filter:drop-shadow(0 14px 16px rgba(30,20,14,.2));
}
/* na capa de /unidades ela ocupa o vazio embaixo do título, entrando na cena
   pela esquerda. A capa tem overflow:hidden, então a roda encosta no fio
   amarelo que fecha a faixa. */
.mascote--capa{
  /* margin-top:auto empurra a Dona Cecília para o rodapé da faixa: abrindo ou
     fechando o seletor ao lado, a roda continua pousada no fio amarelo. */
  margin:auto auto calc(var(--capa-baixo) * -1) 0;
  padding-top:clamp(10px,2vw,20px);
}
/* a moto é vermelha sobre fundo vermelho: o contorno vem do próprio recorte
   (cabelo, jaleco e bolsa amarela) e de uma sombra baixa, sem cartão nem
   clarão artificial atrás dela. */
.mascote--capa .mascote-arte{
  width:clamp(150px,16vw,212px);
  filter:drop-shadow(0 18px 20px rgba(60,0,4,.38));
}
@media (max-width:760px){
  .mascote--capa{ margin:14px 0 calc(var(--capa-baixo) * -1); justify-content:flex-start }
  .mascote--capa .mascote-arte{ width:min(50%,178px) }
}

/* cena do RH: arte recortada, com fundo transparente. Pousa direto na faixa,
   sem placa nem moldura. */
.mascote--quadro{ display:block; margin:0 }
.mascote--quadro .mascote-arte{ width:100%; filter:none }
.rh-envio{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(28px,4vw,60px); align-items:center;
}
.rh-envio-texto h2{ margin-bottom:20px }
.rh-envio-texto > p + p{ margin-top:14px }
.rh-envio-texto > p:not(.rotulo){ color:var(--tinta-2); max-width:46ch }
.rh-envio-btn{ margin-top:28px }
@media (min-width:861px){
  .rh-envio .mascote--quadro{ grid-column:1; grid-row:1 }   /* ela olha para o texto */
  .rh-envio-texto{ grid-column:2; grid-row:1 }
}
@media (max-width:860px){
  .rh-envio{ grid-template-columns:1fr; gap:30px }
}


/* ---- capa de /unidades: a Dona Cecília aponta para a busca -------------
   Mesma faixa vermelha do resto do site, mesma etiqueta amarela, mesmo canto
   reto. O que entra de novo é a personagem debruçada sobre a borda de baixo e
   a assinatura à mão — nada de cápsula arredondada nem sombra colorida. */
/* a arte dela já vem apoiada numa placa branca. Em vez de recortar a placa —
   o que deixaria um buraco no lugar do tronco — a faixa deixa a personagem
   transbordar para a seção branca de baixo: a placa vira a borda da busca,
   exatamente como ela se apoiaria numa bancada. */
.capa--unid{ --capa-baixo:0px; padding-bottom:0; overflow:visible; z-index:2 }
.capa--unid .wrap{ padding-bottom:0 }
.capa--unid .capa-acao{ padding-bottom:clamp(26px,4vw,52px) }
.capa--unid .etiqueta{ align-self:flex-start; margin-bottom:18px }
.capa--unid h1{ max-width:14ch }
.destaque{ color:var(--amarelo) }
.capa--unid .capa-texto > p{ max-width:42ch }
.capa-dados{ margin-top:10px; color:rgba(255,255,255,.72); font-size:var(--t-peq) }

/* ela encosta no fio amarelo que fecha a faixa e aponta para os campos de
   busca, que vêm logo abaixo */
.mascote--aponta{
  --cec:clamp(250px,31vw,400px);
  margin:0 auto calc(var(--cec) * -0.168) 0;   /* a placa branca cruza a borda */
  padding-top:clamp(8px,1.4vw,18px);
  position:relative; z-index:3;
}
.mascote--aponta .mascote-arte{
  width:var(--cec);
  filter:drop-shadow(0 12px 14px rgba(60,0,4,.26));
}
/* riscos do encarte: o mesmo amarelo, desenhados em CSS */
.mascote--aponta::before,
.mascote--aponta::after{
  content:""; position:absolute; z-index:-1; background:var(--amarelo);
  height:5px; border-radius:2px;
}
.mascote--aponta::before{ width:38px; top:22%; left:-6px; transform:rotate(-24deg) }
.mascote--aponta::after{ width:26px; top:34%; left:-14px; transform:rotate(-8deg) }

/* assinatura à mão: acompanha a coluna da tele entrega e desce junto quando o
   seletor de cidade abre */
.capa--unid .wrap{ grid-template-rows:auto 1fr }
.capa--unid .capa-texto{ grid-column:1; grid-row:1 }
.capa--unid .capa-acao{ grid-column:2; grid-row:1 }
.capa--unid .mascote--aponta{ grid-column:1; grid-row:2; align-self:end }
.frase-mao{
  grid-column:2; grid-row:2; align-self:start;
  margin:clamp(26px,3.5vw,48px) auto clamp(18px,2.5vw,34px); width:min(30vw,240px); text-align:center;
  font-family:'Caveat', 'Segoe Script', cursive;
  font-size:clamp(1.35rem,2.5vw,2.05rem); line-height:1.05; color:#fff;
  transform:rotate(-5deg); pointer-events:none;
}
.frase-mao::after{
  content:""; display:block; height:3px; width:62%; margin:8px auto 0;
  background:var(--amarelo); border-radius:2px;
}
@media (max-width:1100px){ .frase-mao{ display:none } }
@media (max-width:900px){
  /* uma coluna só: desfaz a grade de duas colunas da capa */
  .capa--unid .wrap{ grid-template-rows:auto }
  .capa--unid .capa-texto,
  .capa--unid .capa-acao,
  .capa--unid .frase-mao,
  .capa--unid .mascote--aponta{ grid-column:auto; grid-row:auto }
  .capa--unid .frase-mao{ margin:22px auto 4px; width:min(70vw,260px) }
  .capa--unid h1{ max-width:none }
  .mascote--aponta{ --cec:min(74%,280px); margin:18px auto calc(min(74%,280px) * -0.168); justify-content:center }
  .mascote--aponta::before,.mascote--aponta::after{ display:none }
}


/* ---- capa do convênio do colaborador ---------------------------------
   Ela mostra o cartão à esquerda do leitor; o texto ocupa a outra metade.
   A arte é recortada no quadril, então ela fica ancorada no fio que fecha a
   faixa — solta no meio do vermelho, parecia flutuando. */
.capa--cartao{ padding-bottom:0 }
.capa--cartao .wrap{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,clamp(280px,38vw,460px));
  gap:clamp(24px,4vw,56px); align-items:end; padding-bottom:0;
}
.capa--cartao .capa-texto{ padding-bottom:clamp(30px,5vw,64px) }
.capa--cartao .etiqueta{ align-self:flex-start; margin-bottom:16px }
.capa--cartao .capa-texto{ display:flex; flex-direction:column }
.capa--cartao .capa-texto > p:last-child{ max-width:44ch }
.mascote--cartao{ margin:0; justify-content:flex-end; align-self:end }
.mascote--cartao .mascote-arte{
  width:100%; filter:drop-shadow(0 16px 22px rgba(60,0,4,.4));
}
@media (max-width:900px){
  .capa--cartao .wrap{ grid-template-columns:1fr; gap:22px }
  .capa--cartao .capa-texto{ padding-bottom:0 }
  .mascote--cartao{ justify-content:center }
  .mascote--cartao .mascote-arte{ width:min(84%,340px) }
}

/* arte que já traz a placa: entra maior e sem placa de CSS */
.mascote--larga{ margin-bottom:-24px }
.mascote--larga .mascote-arte{ width:clamp(260px,30vw,420px) }
@media (max-width:760px){
  .mascote--larga{ margin:10px auto -24px }
  .mascote--larga .mascote-arte{ width:min(88%,360px) }
}
@media (max-width:760px){
  /* no celular a personagem vem centralizada, abaixo do bloco, e a arte
     cresce um pouco: é o tamanho em que o rosto ainda se lê */
  .mascote{ margin:26px auto 0; justify-content:center }
  .mascote-arte{ width:min(46%,190px) }
}

/* 13. CAMPANHAS E ENCARTES -------------------------------------------
   Nada aqui inventa um segundo sistema visual: os cards reaproveitam a
   mesma lógica do resto do site — canto reto, fio fino, amarelo de preço,
   tipografia pesada no número. O que muda é o peso dado ao preço, que num
   encarte é a informação principal. */

.camp-grade{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));
  gap:clamp(18px,2.5vw,28px);
}
.camp-card{
  display:flex; flex-direction:column; background:var(--branco);
  border:1px solid var(--linha); transition:border-color var(--transicao);
}
.camp-card:hover{ border-color:var(--vermelho) }
.camp-card--encerrada{ background:var(--papel-2) }
.camp-capa{ aspect-ratio:16/9; overflow:hidden; background:var(--papel-2) }
/* a arte da campanha chega no formato que o marketing mandar: object-fit
   cover recorta, nunca distorce */
.camp-capa img{ width:100%; height:100%; object-fit:cover; display:block }
.camp-card--encerrada .camp-capa img{ filter:grayscale(.75); opacity:.7 }
.camp-corpo{ padding:clamp(18px,2.2vw,24px); display:flex; flex-direction:column; gap:10px; flex:1 }
.camp-corpo h3{ font-size:clamp(1.15rem,2vw,1.45rem) }
.camp-desc{ color:var(--tinta-3); font-size:.94rem; line-height:1.55 }
.camp-periodo{ font-size:var(--t-peq); color:var(--tinta-2); font-weight:700 }
.camp-corpo .btn{ margin-top:auto; align-self:flex-start }

.camp-selo{
  align-self:flex-start; font-family:var(--display); font-size:var(--t-micro);
  letter-spacing:.12em; text-transform:uppercase; padding:6px 11px;
}
.camp-selo--ativa{ background:var(--vermelho); color:#fff }
.camp-selo--futura{ background:var(--tinta); color:var(--amarelo) }
/* o card encerrado tem fundo mais escuro que o papel: com --tinta-4
   o selo cai para 4,13:1 ali dentro */
.camp-selo--encerrada{ background:none; color:var(--tinta-3); border:1px solid var(--linha-f) }

/* faixa da home: mesma grade, cards mais baixos, sem descrição */
.camp-grade--home .camp-corpo{ padding:16px 18px; gap:8px }
.camp-grade--home .camp-capa{ aspect-ratio:16/10 }
.camp-vazio{ color:var(--tinta-3); padding:14px 0 }

/* --- encarte ------------------------------------------------------- */
.capa--campanha h1{ max-width:20ch }
.camp-voltar{
  display:inline-block; margin-bottom:14px; font-size:var(--t-peq); font-weight:700;
  color:rgba(255,255,255,.85); border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:2px;
}
.camp-voltar:hover{ color:var(--amarelo); border-color:var(--amarelo) }
/* ".capa p" tem especificidade maior que ".camp-validade" e estava pintando
   este texto de branco sobre o amarelo (1,63:1, ilegível). Daí o seletor
   composto: aqui a tinta tem de ganhar. */
.capa .camp-validade, .camp-validade{
  display:inline-block; margin-top:18px !important; background:var(--amarelo);
  color:var(--tinta); font-weight:700; font-size:.95rem; padding:9px 16px;
}
.camp-encerrada{
  margin-top:18px !important; border-left:4px solid var(--amarelo);
  background:rgba(0,0,0,.22); padding:13px 18px; font-size:.95rem;
}
.camp-banner img{ width:100%; height:auto; display:block }
.camp-breve{ text-align:center; padding:clamp(30px,6vw,64px) 0 }
.camp-breve h2{ margin-bottom:12px }
.camp-breve p{ color:var(--tinta-3); max-width:46ch; margin-inline:auto }

.camp-ferramentas{ margin:22px 0 26px; display:flex; flex-direction:column; gap:14px }
.camp-ferramentas .chips{ padding-top:0 }
.camp-contador{ margin-top:18px; font-size:var(--t-peq); color:var(--tinta-3) }
.camp-sem{ margin-top:22px; color:var(--tinta-3) }
.camp-aviso{
  margin-top:34px; padding-top:20px; border-top:1px solid var(--linha);
  font-size:var(--t-micro); line-height:1.65; color:var(--tinta-4); max-width:74ch;
}
.camp-cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 28px }
.camp-cta p{ color:rgba(255,255,255,.75); margin-top:8px }
.camp-nada{ text-align:center; padding:clamp(50px,10vw,110px) 0 }
.camp-nada p{ color:var(--tinta-3); margin:14px 0 26px }

/* --- produto do encarte --------------------------------------------- */
.pr-grade{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,215px),1fr));
  gap:1px; background:var(--linha); border:1px solid var(--linha);
}
.pr-card{ position:relative; background:var(--branco); display:flex; flex-direction:column }
.pr-foto{ aspect-ratio:1/1; background:var(--branco); padding:14px }
/* contain: embalagem de produto não pode ser cortada nem esticada */
.pr-foto img{ width:100%; height:100%; object-fit:contain; display:block }
.pr-selo{
  position:absolute; top:0; left:0; z-index:1;
  background:var(--vermelho); color:#fff; font-family:var(--display);
  font-size:var(--t-micro); letter-spacing:.1em; text-transform:uppercase; padding:6px 10px;
}
.pr-corpo{ padding:14px 16px 18px; display:flex; flex-direction:column; gap:5px; flex:1 }
.pr-marca{ font-size:var(--t-micro); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--vermelho-esc) }
.pr-nome{ font-family:var(--texto); font-weight:700; font-size:.98rem; line-height:1.3; letter-spacing:0 }
.pr-desc{ font-size:.85rem; color:var(--tinta-3); line-height:1.4 }
.pr-precos{ margin-top:auto; padding-top:12px; display:flex; flex-direction:column }
.pr-de{ font-size:.8rem; color:var(--tinta-4) }
.pr-por{ font-size:var(--t-micro); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-3) }
.pr-valor{
  font-family:var(--display); font-size:clamp(1.5rem,4.4vw,1.85rem); line-height:1.05;
  letter-spacing:-.03em; color:var(--vermelho-esc);
}
.pr-wa{
  margin-top:12px; display:inline-flex; align-items:center; gap:7px;
  font-size:.85rem; font-weight:700; color:var(--wa);
  border-bottom:2px solid transparent; padding-bottom:2px; align-self:flex-start;
}
.pr-wa:hover{ border-bottom-color:var(--wa) }

@media (max-width:620px){
  /* duas colunas no celular: é como se lê um encarte. Abaixo de 360px uma
     coluna, senão o preço encolhe demais para ser lido de relance. */
  .pr-grade{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .pr-corpo{ padding:12px 13px 16px }
  .pr-foto{ padding:10px }
}
@media (max-width:359px){ .pr-grade{ grid-template-columns:1fr } }

/* topo da faixa de campanhas na home: título à esquerda, atalho à direita */
.camp-home-topo{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:16px 32px; margin-bottom:clamp(22px,3vw,32px);
}
.camp-home-topo .lead{ margin-top:10px; max-width:44ch }
/* o .campo nasceu dentro de uma barra horizontal (busca de unidades), onde
   "flex:1 1 240px" cresce na largura. Aqui a barra é vertical, e o mesmo
   flex-basis viraria 240px de ALTURA. Reancorado: */
.camp-ferramentas .campo{ flex:0 0 auto; max-width:420px }
/* páginas do encarte em imagem: uma embaixo da outra, largura de leitura */
.camp-paginas{ display:grid; gap:clamp(14px,2vw,22px); max-width:860px; margin-top:22px }
.camp-paginas img{ width:100%; height:auto; display:block; border:1px solid var(--linha) }
/* condição de oferta que não é valor ("10% de desconto"): não pode ter o
   corpo de um preço, senão compete com os preços de verdade ao lado */
.pr-valor--texto{ font-size:clamp(1rem,2.6vw,1.15rem); line-height:1.25; letter-spacing:-.01em }

/* capa de /campanhas: o texto à esquerda, a Dona Cecília apontando para os
   cards que vêm logo abaixo. Mesmo princípio da capa de /unidades — ela pousa
   no fio amarelo que fecha a faixa, transbordando a borda de baixo. */
.capa--cesta .wrap{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(16px,3vw,48px); align-items:end;
}
.capa--cesta .capa-texto{ padding-bottom:clamp(6px,1.5vw,18px) }
.capa--cesta h1{ max-width:14ch }
.mascote--cesta{
  margin:0 0 calc(var(--capa-baixo) * -1); align-self:end; justify-self:end;
}
.mascote--cesta .mascote-arte{
  width:clamp(180px,24vw,320px);
  filter:drop-shadow(0 18px 22px rgba(60,0,4,.34));
}
@media (max-width:820px){
  /* no celular ela desce para baixo do texto, encostada à direita, pequena o
     bastante para não empurrar a primeira tela inteira */
  .capa--cesta .wrap{ grid-template-columns:1fr; gap:0 }
  .capa--cesta .capa-texto{ padding-bottom:0 }
  .capa--cesta h1{ max-width:none }
  .mascote--cesta{ margin:10px 0 calc(var(--capa-baixo) * -1); justify-self:end }
  .mascote--cesta .mascote-arte{ width:min(46%,190px); margin-left:auto }
}

/* produto sem foto: o selo é posicionado sobre a imagem. Sem imagem, ele caía
   em cima do nome do produto — aqui ele volta para o fluxo, acima do nome. */
.pr-card--sem-foto .pr-selo{ position:static; align-self:flex-start }

/* a Dona Cecília fecha a grade do encarte, ocupando o espaço que sobra na
   última linha. O "span" vem do JS, que sabe quantas colunas a tela tem. */
.pr-cecilia{
  position:relative; overflow:hidden; min-height:190px;
  background:var(--vermelho-fundo); color:#fff;
  /* .pr-card é uma coluna; aqui o texto fica ao lado dela, não em cima —
     por isso a direção precisa ser redefinida, não só o display */
  display:flex; flex-direction:row;
  align-items:flex-end; justify-content:space-between; gap:12px;
  padding:20px 0 0 20px;
}
.pr-cecilia-texto{ padding:0 0 20px; max-width:26ch; flex:1 1 auto }
.pr-cecilia-texto p{
  font-family:var(--display); font-size:clamp(1rem,1.6vw,1.3rem);
  line-height:1.15; letter-spacing:-.02em; margin-bottom:14px;
}
.pr-cecilia img{
  width:clamp(120px,40%,230px); height:auto; align-self:flex-end;
  flex:0 0 auto; margin-bottom:-2px;
  filter:drop-shadow(0 12px 16px rgba(60,0,4,.3));
}
@media (max-width:620px){
  /* numa coluna estreita ela vira só a arte, sem o texto competindo */
  .pr-cecilia{ padding:14px 0 0 14px; min-height:150px }
  .pr-cecilia-texto{ padding-bottom:14px }
  .pr-cecilia-texto p{ font-size:.95rem; margin-bottom:8px }
  .pr-cecilia img{ width:46% }
}
/* o título das ofertas responde ao filtro: é o retorno imediato de que o
   clique funcionou, no lugar onde a pessoa já está olhando */
.camp-titulo{ transition:color var(--transicao) }
.camp-limpar{
  align-self:flex-start; font-size:.88rem; font-weight:700; color:var(--vermelho-esc);
  border-bottom:2px solid currentColor; padding-bottom:2px;
}
.camp-limpar:hover{ color:var(--tinta) }
/* dois botões no card da campanha: "Ver campanha" e "Pedir pelo WhatsApp".
   Empilham sozinhos quando a coluna é estreita. */
.camp-acoes{ margin-top:auto; padding-top:4px; display:flex; flex-wrap:wrap; gap:10px }
.camp-acoes .btn{ padding:13px 18px; font-size:.9rem }
.camp-grade--home .camp-acoes .btn{ padding:12px 16px; font-size:.87rem }
@media (max-width:420px){ .camp-acoes .btn{ width:100% } }

/* título só para leitor de tela: dá nome à seção sem mudar o desenho.
   Usado onde a hierarquia de headings pedia um H2 que visualmente não cabe. */
.so-leitor{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; margin:-1px; padding:0; border:0;
}

/* ---- contraste (WCAG AA) -------------------------------------------
   O amarelo da marca sobre o vermelho da marca dá 3,91:1 — passa em texto
   grande, não em texto pequeno. Onde o link amarelo é pequeno, ele clareia
   um tom; o amarelo institucional continua intacto em fundo, etiqueta e
   botão, que é onde ele aparece de verdade. */
.link-seta--claro{ color:#FFD84D }

/* ---- alvos de toque -------------------------------------------------
   Link de rodapé tinha 20px de altura; o mínimo recomendado é 24. O texto
   não mudou de tamanho — o que cresceu foi a área de clique. */
.rodape a:not(.btn):not(.rodape-social a){ display:inline-block; padding-block:3px }
.rodape li{ margin-bottom:7px }
.topo-aviso a{ padding-block:4px }
.form-aceite input{ width:24px; height:24px }

/* =====================================================================
   14. DONA CECÍLIA NA CAPA DA HOME
   Fica no fim do arquivo de propósito: as regras genéricas de .mascote
   e de .hero-dados aparecem antes e, com a mesma especificidade, quem
   vem depois é que manda.
   ===================================================================== */
/* Ela só entra quando há largura de sobra para ela E para os números.
   Abaixo disso a capa já está cheia de título, texto, botão e contagem:
   espremida ali, ela empurraria o título. */
@media (min-width:1080px){
  .hero .wrap{ grid-template-columns:minmax(0,1fr) auto auto; gap:clamp(26px,3vw,52px) }
  .hero .mascote--hero{
    grid-column:2; grid-row:1 / span 3;
    align-self:end; justify-self:center;
    /* desce até o fio amarelo, mas sem encostar: 6px de folga para o sapato
       não ficar cortado pelo overflow:hidden da capa */
    margin:0 0 calc(clamp(48px,6vw,80px) * -1 + 6px);
  }
  .hero .mascote--hero .mascote-arte{
    width:clamp(230px,21vw,330px);
    filter:drop-shadow(0 20px 26px rgba(60,0,4,.34));
  }
  .hero .hero-dados{ grid-column:3 }
}
@media (max-width:1079px){ .hero .mascote--hero{ display:none } }