@charset "UTF-8";
/* =========================================================================
   Flor de Juá — farmácia de manipulação · Juazeiro do Norte, CE
   Folha única do site, do catálogo e do painel.

   TIPOGRAFIA
   Fraunces nos títulos, Plus Jakarta Sans no corpo.

   A Fraunces é variável em três eixos e o site usa os três: `opsz`
   acompanha o tamanho real do texto, `SOFT` arredonda a terminação e
   `wght` fica em 300–400, longe do peso de manchete. O eixo WONK foi
   dispensado: custava peso no arquivo da fonte e rendia uma diferença
   que só aparece em lupa.

   A Plus Jakarta Sans substituiu a Manrope. A Manrope tem letra muito
   redonda e `a`/`g` de bastão, o que puxava o texto para um ar de
   aplicativo. A Jakarta tem eixo mais vertical, terminações retas e
   altura-x um pouco menor: segura texto corrido melhor, dá contraste
   real com a serifada dos títulos e mantém a impressão de coisa
   desenhada, não de fonte de sistema.

   Ajustes finos que fazem a diferença de perto: tracking negativo que
   diminui conforme o texto encolhe (título grande pede aperto, corpo
   não), `text-wrap: balance` nos títulos, `pretty` nos parágrafos, e
   algarismo tabular em preço e quantidade — em grade de e-commerce,
   número que dança de largura entrega amadorismo na hora.

   FORMA
   Raio em três degraus — 10 px em campo e etiqueta, 18 px em cartão,
   28 px em painel grande — e botão em cápsula, que é a forma do produto
   que esta casa manipula. Botão leva gradiente de dois tons, um fio de
   luz no topo e sombra colorida do próprio tom; não é retângulo chapado.

   MOVIMENTO
   Tudo o que se mexe passa por `prefers-reduced-motion` no fim do
   arquivo. WebGL, tilt e ímã de botão só entram em ponteiro fino. O
   ponteiro em si é o do navegador — nada de cursor desenhado.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens */
:root{
  /* marca */
  --petroleo:#0B3B45;
  --petroleo-esc:#06272E;
  --petroleo-2:#14535F;
  --turquesa:#3EBAB5;
  --turquesa-esc:#237D79;
  --turquesa-cla:#8FD8D4;
  --areia:#EDE4D8;
  --areia-2:#F4EFE7;
  --osso:#FCFAF7;
  --folha:#2F5D3A;

  /* texto */
  --tinta:#152522;
  --tinta-2:#42514F;
  --tinta-3:#6F7D7B;
  --linha:rgba(11,59,69,.12);
  --linha-forte:rgba(11,59,69,.24);

  /* sinal */
  --ok:#2E8B57;
  --alerta:#B4512F;

  /* famílias */
  --display:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --corpo:"Plus Jakarta Sans","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;

  /* escala tipográfica — razão 1.22, fluida entre 380 px e 1280 px */
  --t--1:clamp(12.5px,.18vw + 11.8px,13.5px);
  --t-0:clamp(14.5px,.26vw + 13.5px,16px);
  --t-1:clamp(16px,.34vw + 14.7px,17.5px);
  --t-2:clamp(18px,.56vw + 15.9px,21px);
  --t-3:clamp(21px,1.05vw + 17px,27px);
  --t-4:clamp(25px,1.9vw + 17.8px,36px);
  --t-5:clamp(30px,3.1vw + 18.2px,50px);
  --t-6:clamp(35px,4.6vw + 17.6px,66px);

  /* ritmo */
  --env:1200px;
  --env-larga:1400px;
  --gutter:clamp(18px,4vw,34px);
  /* Respiro das faixas que atravessam a tela inteira — barra de cima,
     cabeçalho e rodapé. Nunca menor que o respiro do conteúdo (senão a
     barra fica colada no canto enquanto o texto respira), e generoso em
     tela grande, onde 30 px somem. */
  --gutter-faixa:max(var(--gutter), min(4vw, 56px));
  /* O respiro entre seções estava em 64–116 px e deixava buracos de tela
     inteira entre um assunto e o seguinte, principalmente no celular.
     44–76 px separa sem obrigar a rolar no vazio. */
  --secao:clamp(44px,5vw,76px);

  /* forma */
  --r-xs:8px;
  --r-sm:10px;
  --r:18px;
  --r-lg:28px;
  --r-btn:100px;

  /* profundidade */
  --sombra-1:0 1px 2px rgba(11,59,69,.05), 0 8px 22px -12px rgba(11,59,69,.22);
  --sombra-2:0 2px 6px rgba(11,59,69,.05), 0 22px 50px -22px rgba(11,59,69,.34);
  --sombra-3:0 40px 80px -40px rgba(6,39,46,.55);

  --mola:cubic-bezier(.22,1,.36,1);
  --topo-h:70px;
}

/* ------------------------------------------------------------ fundações */
*,*::before,*::after{box-sizing:border-box;min-width:0}
html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--topo-h) + 16px);
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  background:var(--osso);
  color:var(--tinta);
  font-family:var(--corpo);
  font-size:var(--t-1);
  font-weight:400;
  line-height:1.6;
  /* -0.006em em corpo de texto é quase imperceptível isolado e muda a
     mancha inteira: sem isso a Jakarta abre demais em parágrafo longo */
  letter-spacing:-.006em;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1,"ss01" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--turquesa-esc);outline-offset:3px;border-radius:var(--r-xs)}
::selection{background:var(--turquesa-cla);color:var(--petroleo-esc)}

h1,h2,h3,h4,.display{
  font-family:var(--display);
  font-weight:380;
  font-optical-sizing:auto;
  font-variation-settings:"SOFT" 28;
  line-height:1.08;
  letter-spacing:-.018em;
  color:var(--petroleo);
  margin:0;
  text-wrap:balance;
}
/* o aperto acompanha o tamanho: título de 66 px aguenta -0.03em, título
   de cartão a 17 px com o mesmo valor fica ilegível */
h3,h4{letter-spacing:-.008em}
.linha-fina,p{text-wrap:pretty}
p{margin:0;text-wrap:pretty}
h4{font-size:var(--t-2);letter-spacing:-.012em}

.env{width:100%;max-width:var(--env);margin-inline:auto;padding-inline:var(--gutter)}
.env-larga{max-width:var(--env-larga)}
/* A vitrine e o catálogo acompanham a tela em vez de parar nos 1200 px
   do texto corrido. Texto tem largura de leitura — acima de 70 caracteres
   por linha o olho perde a próxima —, mas parede de produto não: ali a
   tela maior vira cartão maior, e foto de produto grande é a diferença
   entre a linha parecer caprichada ou parecer comprimida. O teto de
   1660 px existe para que, num monitor ultralargo, a fileira não vire
   uma esteira sem fim. */
.env-loja{max-width:min(1660px,94vw)}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (max-width:760px){.so-largo{display:none}}

/* --------------------------------------------------------------- ícones */
.ic{width:1.1em;height:1.1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;
    stroke-linecap:round;stroke-linejoin:round}
.ic-g{width:26px;height:26px;stroke-width:1.3}
.ic-m{width:30px;height:30px;stroke-width:1.25}

/* ----------------------------------------------------- blocos de título */
.chapeu{
  display:flex;align-items:center;gap:10px;
  margin:0 0 16px;
  font:600 var(--t--1)/1.2 var(--corpo);
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--turquesa-esc);
}
.chapeu::before{content:"";width:22px;height:1.5px;background:currentColor;flex:none;opacity:.6}
.chapeu-claro{color:var(--turquesa-cla)}
.titulo{font-size:var(--t-5)}
.titulo-md{font-size:var(--t-4)}
.titulo em{font-style:normal;color:var(--turquesa-esc)}
.linha-fina{
  margin:18px 0 0;max-width:60ch;
  color:var(--tinta-2);font-size:var(--t-1);line-height:1.68;
}
.secao-cabeca{max-width:64ch;margin-bottom:clamp(26px,3vw,42px)}
.secao-cabeca-centro{margin-inline:auto;text-align:center}
.secao-cabeca-centro .chapeu{justify-content:center}
.secao-cabeca-centro .linha-fina{margin-inline:auto}

.secao{padding-block:var(--secao)}
.secao-areia{background:var(--areia-2)}

/* Houve aqui um `.secao-menta`, verde-água, para "Do consultório ao
   pote" destoar das outras faixas claras. Foi testado e recusado: a
   seção voltou ao rodízio normal de osso e areia. O desenho ficou
   registrado no histórico, caso um dia a ideia volte. */
.secao-escura{background:var(--petroleo);color:var(--areia)}
.secao-escura .titulo,.secao-escura h3{color:var(--osso)}
.secao-escura .linha-fina{color:#A6BABB}

/* =========================================================================
   BOTÕES — cápsula, com gradiente, fio de luz e sombra do próprio tom
   ========================================================================= */
.btn{
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;
  border:1px solid transparent;border-radius:var(--r-btn);
  font:600 var(--t-0)/1.1 var(--corpo);letter-spacing:.005em;
  cursor:pointer;text-align:center;white-space:nowrap;
  /* 250 ms no movimento e na sombra: rápido o bastante para parecer
     resposta ao ponteiro, lento o bastante para não piscar */
  transition:transform .25s var(--mola), box-shadow .25s var(--mola),
             background .25s ease, color .25s ease, border-color .25s ease;
}
/* o fio de luz: uma linha clara de 1 px no topo, que é o que separa um
   botão desenhado de um retângulo pintado */
.btn::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 46%);
  opacity:.9;pointer-events:none;
}
/* O brilho diagonal que atravessava o botão no hover foi retirado a
   pedido. Era o único movimento da página que chamava atenção para si
   mesmo em vez de para o que o botão faz — e, em botão largo como
   "Enviar para o WhatsApp", a faixa clara levava quase um segundo
   para cruzar, tempo suficiente para o olho seguir o brilho e perder
   a palavra.

   No lugar dele, só o que o dedo espera de um botão: ele sobe um
   pouco e a sombra cresce e desfoca junto, como se tivesse saído do
   papel. Nada acende, nada atravessa. */
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(0) scale(.985);transition-duration:.08s}

.btn-grande{padding:17px 34px;font-size:var(--t-1)}
.btn-peq{padding:9px 16px;font-size:var(--t--1)}
.btn-largo{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}

.btn-turquesa{
  background:linear-gradient(165deg,#14535F,#0B3B45 62%);
  color:var(--osso);border-color:rgba(255,255,255,.1);
  box-shadow:0 1px 2px rgba(6,39,46,.2), 0 12px 26px -14px rgba(11,59,69,.9);
}
/* a sombra do hover é mais funda E mais desfocada que a de repouso: é o
   desfoque, não o tamanho, que dá a impressão de o botão ter descolado
   do papel os 3 px que ele sobe */
.btn-turquesa:hover{box-shadow:0 2px 5px rgba(6,39,46,.18), 0 22px 42px -16px rgba(11,59,69,.95)}

.btn-claro{
  background:linear-gradient(165deg,#5FD3CE,#2FA9A4 68%);
  color:#04322F;border-color:rgba(255,255,255,.28);
  box-shadow:0 1px 2px rgba(4,50,47,.18), 0 14px 30px -14px rgba(62,186,181,.95);
}
.btn-claro:hover{box-shadow:0 2px 6px rgba(4,50,47,.18), 0 24px 48px -16px rgba(62,186,181,1)}

.btn-contorno{
  border-color:var(--linha-forte);color:var(--petroleo);
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.25));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
}
.btn-contorno::before{opacity:0}
.btn-contorno:hover{border-color:var(--petroleo);background:rgba(11,59,69,.05)}

.btn-fantasma{
  background:rgba(255,255,255,.06);
  border-color:rgba(143,216,212,.34);color:var(--areia);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.btn-fantasma:hover{border-color:var(--turquesa-cla);background:rgba(143,216,212,.14)}

/* O verde do WhatsApp saiu daqui a pedido. Ele é a única cor do site que
   não vem da marca, e num formulário que já é petróleo e areia o botão
   verde parecia colado de outro lugar. Agora ele usa o mesmo turquesa do
   botão principal do topo, que é o tom de "esta é a ação".

   O ícone do WhatsApp continua dentro do botão, e o botão flutuante do
   canto continua verde: lá a cor É o reconhecimento — a pessoa procura
   a bolinha verde, não lê o que está escrito. */
.btn-zap{
  background:linear-gradient(165deg,#5FD3CE,#2FA9A4 68%);
  color:#04322F;border-color:rgba(255,255,255,.28);
  box-shadow:0 1px 2px rgba(4,50,47,.18), 0 14px 30px -14px rgba(62,186,181,.95);
}
.btn-zap:hover{box-shadow:0 2px 6px rgba(4,50,47,.18), 0 24px 48px -16px rgba(62,186,181,1)}

.link-forte{
  display:inline-flex;align-items:center;gap:8px;
  font:600 var(--t--1)/1 var(--corpo);letter-spacing:.09em;text-transform:uppercase;
  color:var(--turquesa-esc);
  padding-bottom:4px;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1.5px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .4s var(--mola),color .2s;
}
.link-forte:hover{background-size:100% 1.5px;color:var(--petroleo)}
.link-forte .ic{transition:transform .35s var(--mola)}
.link-forte:hover .ic{transform:translateX(3px)}

/* =========================================================================
   BARRA DE PROGRESSO DE LEITURA
   ========================================================================= */
.progresso{
  position:fixed;left:0;top:0;z-index:120;
  height:2.5px;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--turquesa-esc),var(--turquesa),var(--turquesa-cla));
  pointer-events:none;
}

/* O cursor desenhado foi retirado a pedido: vale mais o ponteiro que o
   visitante já conhece — seta no conteúdo, mãozinha no link, barra no
   campo de texto. O que ficou de interação de ponteiro é o ímã dos
   botões, que mora no JavaScript, e a marca "ver" abaixo, que aparece
   sobre a foto do produto no lugar do antigo selo preso ao cursor. */
.produto-foto::after{
  content:"ver";
  position:absolute;left:50%;top:50%;z-index:2;
  transform:translate(-50%,-50%) scale(.8);
  display:grid;place-items:center;
  width:66px;height:66px;border-radius:50%;
  background:rgba(11,59,69,.88);backdrop-filter:blur(4px);
  font:600 11px/1 var(--corpo);letter-spacing:.14em;text-transform:uppercase;
  color:var(--turquesa-cla);
  opacity:0;pointer-events:none;
  transition:opacity .3s ease,transform .4s var(--mola);
}
.produto:hover .produto-foto::after{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media (pointer:coarse){.produto-foto::after{display:none}}

/* =========================================================================
   REVELAÇÃO NO SCROLL
   ========================================================================= */
.rev{opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--mola),transform .8s var(--mola)}
.rev.viu{opacity:1;transform:none}
/* título revelado por máscara: sobe de dentro de uma fresta */
.rev-linha{clip-path:inset(0 0 100% 0);transform:translateY(.22em);
  transition:clip-path 1s var(--mola),transform 1s var(--mola)}
.rev-linha.viu{clip-path:inset(0 0 -10% 0);transform:none}

/* =========================================================================
   BARRA UTILITÁRIA + CABEÇALHO
   ========================================================================= */
/* A barra é petróleo quase preto; o texto tinha ficado cinza-esverdeado e
   sumia. Agora é osso puro, e só o ícone guarda o turquesa. */
/* A faixa tinha texto de 13 px e sobrava ar em volta da frase. Subiu
   para 16 px e passou do ponto: no computador, uma faixa utilitária
   com a mesma altura de letra do corpo do texto compete com o título
   logo abaixo, que é o que a pessoa veio ler. 14 px é o meio-termo —
   maior que era, menor que o corpo. No celular a regra de 620 px deixa
   um pouco maior, porque lá a frase é a única coisa na faixa. */
/* O gradiente escuro desta faixa saiu do `background` e virou uma camada
   ::before atrás do texto. O motivo: as cápsulas sobem por trás dela, e
   um fundo opaco as esconderia. Agora a camada é translúcida — escura o
   bastante para o texto branco ler, clara o bastante para a cápsula
   passar por baixo e aparecer.

   `position:relative` + `z-index:2` põem o texto acima do canvas, que
   está em z-index 1. */
.utilitaria{
  position:relative;z-index:2;
  color:var(--osso);
  font-size:clamp(13px,.14vw + 12.5px,14px);letter-spacing:.01em;
  border-bottom:1px solid rgba(143,216,212,.14);
}
/* Os MESMOS quatro tons do fundo da primeira dobra, na mesma diagonal —
   só que com transparência, para a cápsula continuar aparecendo por
   baixo. A faixa tinha um gradiente próprio, vertical, e ficava de um
   petróleo diferente do que começa logo abaixo do cabeçalho: as duas
   áreas escuras da mesma tela não combinavam. Agora é a mesma cor
   atravessando a faixa branca da logo. */
.utilitaria::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(6,39,46,.88) 0%, rgba(8,47,55,.86) 38%,
    rgba(14,63,73,.82) 72%, rgba(10,52,61,.86) 100%);
}
/* Esta faixa não segue a grade de 1200 px: ocupa a largura toda, com
   respiro nas laterais. Endereço e horário saíram daqui — estão no
   rodapé e na seção de localização, onde alguém de fato procura. Ficou
   uma frase só, trocando sozinha, e os ícones das redes. */
.util-linha{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:18px;
  width:100%;max-width:none;
  padding-block:7px;padding-inline:var(--gutter-faixa);
  min-height:44px;
}

/* O rotativo: as frases ficam empilhadas no mesmo lugar e só uma está
   visível por vez, então a faixa nunca muda de altura. A que sai desliza
   para cima com um leve borrão e a que entra sobe do fundo — é o que faz
   a troca parecer movimento, e não um piscar de texto. */
.util-frases{position:relative;height:1.6em;overflow:hidden}
.util-frases span{
  position:absolute;inset:0;
  display:flex;align-items:center;gap:10px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--osso);font-weight:600;letter-spacing:.005em;
  opacity:0;transform:translateY(110%);filter:blur(3px);
  transition:opacity .45s ease, transform .7s var(--mola), filter .45s ease;
}
.util-frases span.on{opacity:1;transform:none;filter:none}
.util-frases span.saiu{opacity:0;transform:translateY(-110%);filter:blur(3px)}
/* o ponto de luz que antecede a frase pulsa junto com a entrada */
.util-frases span::before{
  content:"";width:7px;height:7px;flex:none;border-radius:50%;
  background:var(--turquesa);
  box-shadow:0 0 0 0 rgba(62,186,181,.6);
}
.util-frases span.on::before{animation:brilhaPonto 2.8s ease-out}
@keyframes brilhaPonto{
  0%{box-shadow:0 0 0 0 rgba(62,186,181,.65)}
  45%{box-shadow:0 0 0 8px rgba(62,186,181,0)}
  100%{box-shadow:0 0 0 0 rgba(62,186,181,0)}
}

.util-redes{display:flex;align-items:center;gap:8px;flex:none}
.util-redes a{
  display:grid;place-items:center;width:32px;height:32px;
  border:1px solid rgba(143,216,212,.22);border-radius:50%;
  color:var(--areia);
  transition:background .25s,color .25s,border-color .25s,transform .35s var(--mola);
}
.util-redes a:hover{
  background:rgba(143,216,212,.18);border-color:var(--turquesa-cla);
  color:var(--turquesa-cla);transform:translateY(-1px);
}
.util-redes .ic{width:18px;height:18px}

/* Esta faixa era translúcida com desfoque. Virou sólida porque as
   cápsulas passam por trás dela: com o desfoque, elas apareciam
   borradas atrás da logo e do menu, que é exatamente o que não se
   quer — a faixa da marca tem de ficar limpa. Sólida, ela é a tampa
   que faz a cápsula sumir de um lado e reaparecer do outro. */
.topo{
  position:sticky;top:0;z-index:70;
  background:var(--osso);
  border-bottom:1px solid transparent;
  transition:box-shadow .35s var(--mola),border-color .35s ease;
}
.topo.colado{
  border-bottom-color:var(--linha);
  box-shadow:0 14px 34px -26px rgba(11,59,69,.7);
}
/* O cabeçalho acompanha a barra de cima e ocupa a largura toda, com o
   mesmo respiro lateral. Preso na grade de 1200 px, o logo ficava
   flutuando no meio da tela em monitor largo, longe da borda, enquanto a
   faixa logo acima ia de ponta a ponta — e as duas não conversavam.
   Gap fixo: com `clamp(...,2.4vw,...)` o espaçamento crescia em tela
   larga e o menu passava a não caber justamente onde havia mais espaço. */
/* Grade de três colunas em vez de flex: as pontas têm a mesma largura
   mínima, então o menu cai no centro de verdade — não "quase no meio",
   que é o que acontece quando a logo e as ações têm larguras
   diferentes e o menu só se espreme entre as duas. */
.topo-linha{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  grid-template-areas:"marca menu acoes";
  align-items:center;gap:16px;
  width:100%;max-width:none;
  padding-inline:var(--gutter-faixa);
  min-height:var(--topo-h);
}

.marca{grid-area:marca;display:inline-flex;align-items:center;justify-self:start}
.marca img{height:clamp(32px,3.1vw,40px);width:auto;transition:height .35s var(--mola)}
.topo.colado .marca img{height:clamp(29px,2.7vw,35px)}

/* sem `margin-inline:auto`: margem automática em container flex que
   transborda vira margem NEGATIVA, e o menu passava por cima do botão do
   carrinho sem aumentar o scrollWidth — ou seja, sem disparar nenhum
   teste de estouro. Quem empurra as ações para a direita é o
   `margin-left:auto` de .topo-acoes. */
/* `flex:none` também no container: sem isso o .menu encolhe, e como os
   links dentro dele não encolhem, eles vazam para fora da própria caixa
   e caem por cima do carrinho — sem estouro e sem margem negativa, então
   nenhum teste de largura pega. */
.menu{grid-area:menu;display:flex;align-items:center;justify-content:center;
  gap:clamp(2px,.7vw,12px)}
.menu a{
  position:relative;
  /* flex:none é obrigatório: o `min-width:0` global permite que item de
     flex encolha abaixo do próprio conteúdo, e com white-space:nowrap o
     texto vazava para cima do link seguinte ("Como funcionaLoja"). */
  flex:none;
  /* corpo miúdo de propósito: seis itens no tamanho do texto normal não
     cabem ao lado do carrinho e do botão de receita em 1200 px de grade */
  font-size:var(--t--1);font-weight:600;color:var(--tinta-2);
  padding:9px 9px;border-radius:var(--r-btn);white-space:nowrap;
  transition:color .2s,background .25s ease;
}
/* pílula de fundo em vez de sublinhado: combina com a forma dos botões */
.menu a:hover{color:var(--petroleo);background:rgba(11,59,69,.06)}
.menu a[aria-current="page"]{color:var(--petroleo);background:rgba(62,186,181,.16)}

.topo-acoes{grid-area:acoes;display:flex;align-items:center;gap:10px;justify-self:end}

/* Carrinho na barra: redondo, só ícone, e **só existe quando tem algo
   dentro**. Carrinho vazio permanente é enfeite que ocupa espaço e não
   diz nada; aparecendo só quando enche, ele vira aviso.
   No computador fica ao lado do botão de receita; no celular, à
   esquerda do hambúrguer. */
.btn-carrinho{
  position:relative;display:none;
  align-items:center;justify-content:center;
  width:46px;height:46px;flex:none;
  border:1px solid var(--linha-forte);border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.3));
  color:var(--petroleo);cursor:pointer;
  transition:border-color .2s,background .2s,transform .3s var(--mola);
  animation:entraCarrinho .45s var(--mola);
}
.btn-carrinho[data-vazio="nao"]{display:inline-flex}
.btn-carrinho:hover{border-color:var(--petroleo);background:rgba(11,59,69,.06);transform:translateY(-1px)}
.btn-carrinho .ic{width:22px;height:22px}

.carrinho-n{
  position:absolute;right:-3px;top:-3px;
  min-width:22px;height:22px;padding-inline:6px;
  display:inline-grid;place-items:center;
  border-radius:var(--r-btn);
  border:2px solid var(--osso);
  background:linear-gradient(165deg,#3EBAB5,#237D79);color:#fff;
  font:700 11.5px/1 var(--corpo);font-variant-numeric:tabular-nums;
  transition:transform .4s var(--mola);
}
.carrinho-n.pulsa{transform:scale(1.35)}
@keyframes entraCarrinho{
  from{opacity:0;transform:scale(.7)}
  to{opacity:1;transform:none}
}

.abre-menu{
  display:none;align-items:center;justify-content:center;
  width:46px;height:46px;flex:none;
  background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.3));
  border:1px solid var(--linha-forte);border-radius:50%;
  cursor:pointer;color:var(--petroleo);
  transition:border-color .2s,background .2s;
}
.abre-menu:hover{border-color:var(--petroleo);background:rgba(11,59,69,.06)}
.abre-menu .ic{width:22px;height:22px}

/* =========================================================================
   HERO — vídeo real da loja + camada WebGL + parallax
   ========================================================================= */
/* O fundo do topo deixou de ser vídeo. Antes eram três camadas — mp4 da
   loja, véu escuro por cima para o texto ler, e a aurora em WebGL. Agora
   são duas, e nenhuma baixa arquivo: o gradiente da marca e as cápsulas
   desenhadas no canvas.

   O gradiente é o mesmo véu de antes, só que agora sem nada por baixo:
   a diagonal escura da esquerda (onde mora o título) para o mais aberto
   da direita, e o brilho turquesa no alto à direita que dá o volume. */
.hero{position:relative;background:var(--petroleo-esc);color:var(--areia);overflow:hidden}
.hero-fundo{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(100deg,#06272E 0%,#082F37 38%,#0E3F49 72%,#0A343D 100%),
    radial-gradient(120% 90% at 88% 10%,rgba(62,186,181,.2),transparent 60%);
}
/* a segunda camada de luz vem por cima do gradiente, não dentro dele:
   assim ela some com `prefers-reduced-motion` sem levar o fundo junto */
.hero-fundo::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(90% 70% at 15% 95%,rgba(20,83,95,.55),transparent 62%);
}

/* As cápsulas começam no alto da PÁGINA, não no alto do hero: elas
   sobem por trás da faixa escura de frases e só somem ao entrar na
   faixa branca da logo, que é opaca e fica por cima.

   z-index 1 as põe acima do gradiente do hero (z-index 0) e abaixo do
   texto (z-index 2). A altura vem do JavaScript, em --alto-capsulas.

   `pointer-events:none` é essencial: o canvas cobre os dois botões do
   hero, e sem isso engoliria o clique. O JavaScript escuta o ponteiro
   na janela, não no canvas, justamente por isso. */
#hero-capsulas{
  position:absolute;left:0;top:0;z-index:1;
  width:100%;height:var(--alto-capsulas,640px);
  opacity:0;transition:opacity 1.2s ease;pointer-events:none;
}
#hero-capsulas.on{opacity:1}

.hero-grade{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
  gap:clamp(30px,5vw,72px);align-items:end;
  padding-block:clamp(58px,8vw,104px) clamp(42px,6vw,72px);
}
.hero-txt{max-width:min(100%,620px)}
.hero-chapeu{
  display:inline-flex;align-items:center;gap:9px;
  margin:0 0 22px;padding:7px 15px;
  border:1px solid rgba(143,216,212,.28);border-radius:var(--r-btn);
  background:rgba(6,39,46,.35);backdrop-filter:blur(6px);
  font:600 var(--t--1)/1.3 var(--corpo);letter-spacing:.13em;text-transform:uppercase;
  color:var(--turquesa-cla);
}
.hero h1{
  font-size:var(--t-6);color:var(--osso);
  font-variation-settings:"SOFT" 22;
  letter-spacing:-.028em;line-height:1.02;
}
.hero h1 > span{display:block;overflow:hidden}
.hero h1 em{
  display:block;font-style:italic;font-weight:300;
  color:var(--turquesa-cla);
  font-variation-settings:"SOFT" 60;
  letter-spacing:-.022em;
}
.hero-sub{
  margin:24px 0 0;max-width:46ch;
  color:#C2D2D3;font-size:var(--t-1);line-height:1.66;
}
.hero-acoes{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}

.hero-lado{display:flex;flex-direction:column;gap:22px;padding-bottom:6px}

/* A foto da farmacêutica que ocupava o vão desta coluna saiu a pedido.
   Quem ocupa o vão agora são as cápsulas, que nascem concentradas do
   lado direito — é uma conta no js/capsulas.js, não um elemento aqui. */
.status{
  display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  padding:10px 17px;
  border:1px solid rgba(143,216,212,.3);border-radius:var(--r-btn);
  background:rgba(6,39,46,.5);backdrop-filter:blur(8px);
  font-size:var(--t--1);font-weight:600;color:var(--osso);
}
.status .ponto{width:7px;height:7px;border-radius:50%;background:#8095968a;flex:none}
.status[data-estado="aberto"] .ponto{background:#4ED07E;animation:pulsa 2.8s infinite}
.status[data-estado="fechado"] .ponto{background:var(--turquesa)}
@keyframes pulsa{
  0%{box-shadow:0 0 0 0 rgba(78,208,126,.55)}
  70%{box-shadow:0 0 0 9px rgba(78,208,126,0)}
  100%{box-shadow:0 0 0 0 rgba(78,208,126,0)}
}

.hero-numeros{
  display:grid;grid-template-columns:repeat(3,auto);gap:clamp(18px,3vw,38px);
  justify-content:start;
  margin:0;padding:22px 0 0;list-style:none;
  border-top:1px solid rgba(143,216,212,.22);
}
.hero-numeros li{display:flex;flex-direction:column;gap:2px}
.hero-numeros b{
  font-family:var(--display);font-weight:330;font-size:var(--t-4);
  font-variation-settings:"SOFT" 30;
  color:var(--osso);line-height:1;font-variant-numeric:tabular-nums;
}
.hero-numeros span{font-size:var(--t--1);color:#A7BCBE;line-height:1.35;max-width:14ch}

/* seta que convida a rolar */
/* convite a rolar: um fio de luz que escorre e um chevron. Sem palavra —
   qualquer rótulo aqui vira ruído em cima do título. */
.rolar{
  position:absolute;left:50%;bottom:16px;z-index:3;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:5px;
  color:rgba(143,216,212,.75);
}
.rolar i{display:block;width:1px;height:34px;
  background:linear-gradient(rgba(143,216,212,.05),var(--turquesa-cla));
  animation:desce 2.4s var(--mola) infinite}
.rolar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;opacity:.8}
@keyframes desce{0%{transform:scaleY(.2);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  51%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(.2);transform-origin:bottom}}

/* ------------------------------------------------------------ fita ---- */
.fita{
  background:var(--areia);border-block:1px solid rgba(11,59,69,.1);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.fita-trilho{display:flex;width:max-content;padding-block:12px;animation:corre 38s linear infinite}
.fita-trilho span{
  display:inline-flex;align-items:center;gap:16px;padding-inline:18px;
  font-size:var(--t--1);font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--petroleo);white-space:nowrap;opacity:.7;
}
.fita-trilho span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--turquesa-esc)}
@keyframes corre{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ------------------------------------------------------------- selos -- */
/* Os quatro cartões estavam colados na faixa rolante acima e na seção
   de baixo, sem respiro nenhum — pareciam encaixados à força. Agora têm
   folga em cima e embaixo, e mais ar entre si. */
.selos{
  background:var(--osso);border-bottom:1px solid var(--linha);
  padding-block:clamp(36px,4.4vw,64px);
}
.selos-grade{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,24px)}
.selo{
  display:flex;flex-direction:column;gap:11px;
  padding:clamp(24px,2.6vw,32px);
  background:linear-gradient(170deg,var(--osso),var(--areia-2));
  border:1px solid var(--linha);border-radius:var(--r);
  transition:transform .45s var(--mola),box-shadow .45s var(--mola),border-color .3s;
}
.selo:hover{transform:translateY(-4px);box-shadow:var(--sombra-2);border-color:var(--linha-forte)}
.selo-ico{
  width:46px;height:46px;display:grid;place-items:center;flex:none;
  border-radius:14px;
  background:linear-gradient(165deg,rgba(62,186,181,.2),rgba(62,186,181,.06));
  border:1px solid rgba(62,186,181,.3);
  color:var(--turquesa-esc);
}
/* "Farmacêutica na bancada" quebra em duas linhas e os outros três não;
   sem uma altura mínima, o texto de baixo de cada cartão começa numa
   altura diferente e a fileira perde a linha de base comum. Duas linhas
   reservadas resolvem, e some no celular, onde há um cartão por vez. */
.selo b{font-family:var(--display);font-weight:400;font-size:var(--t-2);
  font-variation-settings:"SOFT" 30;color:var(--petroleo);line-height:1.2;
  min-height:calc(2 * 1.2em)}
@media (max-width:620px){.selo b{min-height:0}}
.selo span{font-size:var(--t-0);color:var(--tinta-3);line-height:1.5}

/* =========================================================================
   PASSOS
   ========================================================================= */
.grade-passos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.passo{
  position:relative;overflow:hidden;
  padding:clamp(26px,3vw,38px) clamp(22px,2.4vw,32px);
  background:var(--osso);border:1px solid var(--linha);border-radius:var(--r);
  transition:transform .45s var(--mola),border-color .3s,box-shadow .45s var(--mola);
}
.passo::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--turquesa),var(--turquesa-cla));
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--mola);
}
.passo:hover{transform:translateY(-4px);border-color:var(--linha-forte);box-shadow:var(--sombra-2)}
.passo:hover::after{transform:scaleX(1)}
.passo-n{
  display:inline-grid;place-items:center;
  width:42px;height:42px;margin-bottom:20px;
  border-radius:var(--r-btn);
  background:linear-gradient(165deg,rgba(62,186,181,.18),rgba(62,186,181,.05));
  border:1px solid rgba(62,186,181,.3);
  font-family:var(--display);font-weight:400;font-size:var(--t-1);
  color:var(--turquesa-esc);font-variant-numeric:tabular-nums;
}
.passo h3{font-size:var(--t-2);margin-bottom:9px}
.passo p{font-size:var(--t-0);color:var(--tinta-3);line-height:1.6}

/* =========================================================================
   PRODUTOS
   ========================================================================= */
/* O botão "Ver a linha completa" ficava colado no parágrafo quando a
   linha era comprida — as duas peças dividem a mesma fileira e o `gap`
   de 24 px era o único ar entre elas. Agora são 40 px no mínimo, e o
   botão ainda respira embaixo, porque a vitrine começa logo em seguida. */
.loja-topo{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(24px,4vw,56px);flex-wrap:wrap;
  margin-bottom:clamp(22px,2.6vw,34px);
}
/* O cabeçalho da loja usa a largura inteira da seção.

   Todo bloco de título do site tem teto de 64 caracteres, e o parágrafo
   de 60: é a largura em que o olho acha a linha seguinte sem se perder.
   Aqui esse teto trabalhava contra — a seção foi alargada para caber a
   vitrine, e o título ficava apertado num canto com meia tela de areia
   sobrando ao lado, como se tivesse sido esquecido ali.

   Vale só para esta seção, onde a frase é curta e funciona como
   chamada. Em texto corrido o teto continua valendo. */
.loja-topo .secao-cabeca{max-width:none;flex:1 1 520px}
.loja-topo .linha-fina{max-width:none}
/* Centralizados, e com um trilho de fundo que junta os botões num
   objeto só. Alinhados à esquerda, as duas ou três fileiras de pílulas
   terminavam em degrau e pareciam sobra de texto; centradas, a quebra
   de linha vira simetria. */
.filtros{
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;
  margin:26px auto clamp(24px,3vw,34px);
  padding:8px;max-width:fit-content;
  background:rgba(11,59,69,.045);border:1px solid var(--linha);
  border-radius:calc(var(--r-btn) / 2);
}

/* ---------------------------------------- os filtros em tela estreita
   Em 390 px, oito categorias embrulhadas viravam quatro fileiras de
   pílulas — um bloco de 180 px de altura antes de aparecer o primeiro
   produto, com a última fileira sempre pela metade.

   Vira trilho de uma linha só, que se arrasta com o dedo. O respiro sai
   da caixa e vai para dentro do trilho (`padding-inline`), senão o
   primeiro e o último botão encostariam na borda ao rolar. As pontas
   esmaecidas avisam que há mais para o lado. */
@media (max-width:900px){
  .filtros{
    display:block;white-space:nowrap;
    max-width:none;margin-inline:calc(var(--gutter) * -1);
    padding:8px var(--gutter);
    overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    background:transparent;border:0;border-radius:0;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  }
  .filtros::-webkit-scrollbar{display:none}
  .filtro{display:inline-flex;margin-right:8px}
  /* o dedo precisa de alvo maior do que o ponteiro */
  .filtro{padding:11px 18px;font-size:var(--t-0)}
}
.filtro{
  padding:9px 18px;border-radius:var(--r-btn);cursor:pointer;
  border:1px solid var(--linha-forte);
  background:linear-gradient(180deg,rgba(255,255,255,.66),rgba(255,255,255,.2));
  color:var(--tinta-2);
  font:600 var(--t--1)/1.2 var(--corpo);white-space:nowrap;
  transition:all .25s var(--mola);
}
.filtro:hover{border-color:var(--petroleo);color:var(--petroleo);transform:translateY(-1px)}
.filtro.on{
  background:linear-gradient(165deg,#14535F,#0B3B45 62%);
  border-color:var(--petroleo);color:var(--osso);
  box-shadow:0 10px 22px -12px rgba(11,59,69,.9);
}

.grade-produtos{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(186px,1fr));
  gap:clamp(12px,1.4vw,20px);
}
/* =========================================================================
   VITRINE DA PÁGINA INICIAL — uma fileira que anda sozinha

   O palco sangra da grade até a borda da tela e esmaece as duas pontas,
   para o cartão entrar e sair de cena em vez de aparecer cortado numa
   linha reta. O trilho é o que se move.

   `width:max-content` é o que faz a conta fechar: o trilho fica do
   tamanho exato dos cartões, então -50% é sempre a metade certa,
   qualquer que seja a quantidade.
   ========================================================================= */
.vitrine-palco{
  position:relative;
  margin-inline:calc(var(--gutter) * -1);
  padding-block:6px;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
/* Quem move o trilho é o JavaScript (ver `ligaTrilho` em home.js), não
   uma animação daqui: com `animation` não há como o dedo arrastar nem o
   ponteiro mudar o rumo. O CSS só prepara o terreno. */
.vitrine-trilho{
  display:flex;gap:clamp(12px,1.2vw,20px);
  width:max-content;
  padding-inline:var(--gutter);
  will-change:transform;
  /* o gesto é horizontal e é nosso; a rolagem vertical continua do
     navegador, senão a página travaria ao arrastar em diagonal */
  touch-action:pan-y;
}
.vitrine-palco{cursor:grab}
.vitrine-palco.arrastando{cursor:grabbing}
/* enquanto arrasta, nada de selecionar texto nem de arrastar a imagem do
   produto para fora do navegador */
.vitrine-palco.arrastando,
.vitrine-palco.arrastando *{user-select:none;-webkit-user-select:none}
.vitrine-palco img{-webkit-user-drag:none;user-select:none}
/* Cartão pequeno, de volta ao tamanho que a grade tinha. Em 250 px cada
   frasco virava um pôster e cabiam seis na tela — a vitrine da home é
   amostra, não catálogo, e o que se quer dali é a impressão de "tem
   muita coisa", que vem da quantidade passando, não do tamanho. */
.vitrine-trilho .produto{width:clamp(152px,13vw,186px);flex:none}

/* Com o movimento desligado, o trilho vira uma lista comum, que se
   arrasta com o dedo pela rolagem do navegador. A segunda cópia continua
   lá e não atrapalha — é só mais catálogo.

   A regra deixou de ser `@media (prefers-reduced-motion)` e passou a
   depender da classe que o fj.js escreve no <html>. O motivo está na
   chave `RESPEITAR_MENOS_MOVIMENTO`, lá: quem manda hoje é a decisão do
   site, não a preferência do sistema, e CSS não tem como perguntar ao
   JavaScript de outro jeito. Voltar a respeitar o sistema é trocar um
   `false` por `true` num lugar só. */
.sem-movimento .vitrine-palco{overflow-x:auto;scroll-snap-type:x proximity;cursor:auto}
.sem-movimento .vitrine-trilho{transform:none!important;touch-action:auto}
.sem-movimento .vitrine-trilho .produto{scroll-snap-align:center}

/* O arranjo de "cinco cartões, com o quinto deitado" saiu junto com a
   grade da vitrine: agora é uma fileira só, andando, em toda largura. */

.produto{
  position:relative;display:flex;flex-direction:column;
  background:var(--osso);
  border:1px solid var(--linha);border-radius:var(--r);
  overflow:hidden;
  transform-style:preserve-3d;
  transition:border-color .3s ease,box-shadow .45s var(--mola),transform .45s var(--mola);
}
.produto:hover{border-color:var(--linha-forte);box-shadow:var(--sombra-2)}
.produto-foto{
  position:relative;display:block;width:100%;padding:0;border:0;
  aspect-ratio:4/5;background:var(--areia-2);overflow:hidden;
  border-bottom:1px solid var(--linha);cursor:pointer;
}
.produto-foto img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--mola),filter .5s ease}
.produto:hover .produto-foto img{transform:scale(1.06)}
.produto-tag{
  position:absolute;left:10px;top:10px;z-index:2;
  padding:5px 11px;border-radius:var(--r-btn);
  background:rgba(252,250,247,.94);backdrop-filter:blur(6px);
  font:700 10px/1.1 var(--corpo);letter-spacing:.1em;text-transform:uppercase;
  color:var(--turquesa-esc);
  box-shadow:0 4px 12px -6px rgba(11,59,69,.5);
}
.produto-tag.destaque{background:linear-gradient(165deg,#14535F,#0B3B45);color:var(--turquesa-cla)}
.produto-corpo{display:flex;flex-direction:column;gap:6px;padding:14px 15px 15px;flex:1}
.produto h3{
  font-size:var(--t-0);font-weight:400;line-height:1.28;
  font-variation-settings:"SOFT" 35;letter-spacing:-.008em;
  color:var(--petroleo);
  /* três linhas: nome de manipulado é comprido e cortar em duas deixa
     cartões indistinguíveis. O min-height alinha preço e botão. */
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(3 * 1.28em);
}
.produto-rodape{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:auto;padding-top:10px}
.preco{
  margin:0;font:700 var(--t-1)/1 var(--corpo);
  font-variant-numeric:tabular-nums;letter-spacing:-.012em;
  color:var(--petroleo);
}
.preco small{font-size:.7em;font-weight:600;color:var(--tinta-3);margin-right:3px}
.preco-consulta{font-size:var(--t-0);font-weight:600;color:var(--tinta-3);letter-spacing:0}

.add{
  display:inline-grid;place-items:center;
  width:38px;height:38px;flex:none;
  border:1px solid var(--linha-forte);border-radius:var(--r-btn);
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.2));
  color:var(--petroleo);cursor:pointer;
  transition:all .3s var(--mola);
}
.add:hover{background:linear-gradient(165deg,#14535F,#0B3B45);border-color:var(--petroleo);
  color:var(--osso);transform:scale(1.08)}
.add .ic{width:17px;height:17px;stroke-width:2}
.add.feito{background:linear-gradient(165deg,#3EBAB5,#237D79);border-color:var(--turquesa-esc);color:#fff}

.loja-nota{margin:28px 0 0;font-size:var(--t--1);color:var(--tinta-3)}
.loja-nota strong{color:var(--petroleo);font-weight:700;font-variant-numeric:tabular-nums}
.vazio{grid-column:1/-1;padding:56px 0;text-align:center;color:var(--tinta-3)}

.busca{position:relative;flex:1;min-width:210px;max-width:340px}
.busca input{
  width:100%;padding:13px 16px 13px 42px;
  border:1px solid var(--linha-forte);border-radius:var(--r-btn);
  background:var(--osso);font-size:var(--t-0);
  transition:border-color .2s,box-shadow .2s;
}
.busca .ic{position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--tinta-3);pointer-events:none}
.busca input:focus{outline:none;border-color:var(--turquesa-esc);
  box-shadow:0 0 0 4px rgba(62,186,181,.16)}
.ordenar{
  padding:13px 18px;border:1px solid var(--linha-forte);border-radius:var(--r-btn);
  background:var(--osso);font-size:var(--t-0);font-weight:500;color:var(--tinta-2);cursor:pointer;
}

/* =========================================================================
   FICHA DO PRODUTO
   ========================================================================= */
.veu{
  position:fixed;inset:0;z-index:100;
  background:rgba(6,39,46,.6);backdrop-filter:blur(6px);
  display:grid;place-items:center;padding:var(--gutter);
  animation:surge .25s ease;
}
@keyframes surge{from{opacity:0}to{opacity:1}}
.ficha-caixa{
  position:relative;
  width:min(880px,100%);max-height:88vh;overflow:auto;overscroll-behavior:contain;
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  background:var(--osso);border-radius:var(--r-lg);box-shadow:var(--sombra-3);
  animation:sobe .4s var(--mola);
}
@keyframes sobe{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}
.ficha-foto{background:var(--areia-2);aspect-ratio:4/5;overflow:hidden}
.ficha-foto img{width:100%;height:100%;object-fit:cover}
.ficha-txt{padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:14px}
.ficha-cat{font:600 var(--t--1)/1 var(--corpo);letter-spacing:.14em;text-transform:uppercase;
  color:var(--turquesa-esc)}
.ficha-txt h3{font-size:var(--t-3)}
.ficha-txt .preco{font-size:var(--t-3)}
.ficha-resumo{color:var(--tinta-2);font-size:var(--t-0);line-height:1.65}
.ficha-acoes{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:10px}
.ficha-nota{font-size:var(--t--1);color:var(--tinta-3);border-top:1px solid var(--linha);padding-top:14px}
.fecha{
  position:absolute;right:14px;top:14px;z-index:3;
  width:38px;height:38px;display:grid;place-items:center;
  border:1px solid var(--linha);border-radius:var(--r-btn);
  background:rgba(252,250,247,.94);backdrop-filter:blur(6px);
  color:var(--petroleo);cursor:pointer;
  transition:all .3s var(--mola);
}
.fecha:hover{background:var(--petroleo);color:var(--osso);border-color:var(--petroleo);transform:rotate(90deg)}

.qtd{display:inline-flex;align-items:center;
  border:1px solid var(--linha-forte);border-radius:var(--r-btn);overflow:hidden}
.qtd button{
  width:36px;height:38px;display:grid;place-items:center;
  background:transparent;border:0;cursor:pointer;color:var(--petroleo);
  transition:background .2s;
}
.qtd button:hover{background:rgba(11,59,69,.08)}
.qtd span{min-width:30px;text-align:center;
  font:600 var(--t-0)/1 var(--corpo);font-variant-numeric:tabular-nums}

/* =========================================================================
   GAVETA DO CARRINHO
   ========================================================================= */
.gaveta[hidden],.ficha[hidden]{display:none}
.gaveta{position:fixed;inset:0;z-index:110;display:flex;justify-content:flex-end}
.gaveta-veu{position:absolute;inset:0;background:rgba(6,39,46,.55);
  backdrop-filter:blur(4px);animation:surge .25s ease}
.gaveta-painel{
  position:relative;
  width:min(430px,100%);height:100%;
  display:flex;flex-direction:column;
  background:var(--osso);box-shadow:-30px 0 80px -40px rgba(6,39,46,.8);
  animation:entra .45s var(--mola);
}
@keyframes entra{from{transform:translateX(40px);opacity:.3}to{transform:none;opacity:1}}
.gaveta-topo{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:22px var(--gutter);border-bottom:1px solid var(--linha);
}
.gaveta-topo h2{font-size:var(--t-2)}
.gaveta-itens{flex:1;overflow:auto;overscroll-behavior:contain;padding:8px var(--gutter)}
.item{display:grid;grid-template-columns:66px 1fr auto;gap:14px;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--linha)}
.item:last-child{border-bottom:0}
.item-foto{width:66px;aspect-ratio:4/5;border-radius:var(--r-sm);overflow:hidden;background:var(--areia-2)}
.item-foto img{width:100%;height:100%;object-fit:cover}
.item-txt{display:flex;flex-direction:column;gap:5px;min-width:0}
.item-txt b{font:400 var(--t-0)/1.3 var(--display);font-variation-settings:"SOFT" 35;color:var(--petroleo)}
.item-txt .preco{font-size:var(--t-0)}
.item-tira{background:transparent;border:0;cursor:pointer;color:var(--tinta-3);
  font-size:var(--t--1);text-decoration:underline;text-underline-offset:3px;padding:0;align-self:flex-start}
.item-tira:hover{color:var(--alerta)}
.gaveta-vazia{padding:60px 20px;text-align:center;color:var(--tinta-3);font-size:var(--t-0)}
.gaveta-fim{padding:20px var(--gutter) calc(20px + env(safe-area-inset-bottom));
  border-top:1px solid var(--linha);background:var(--areia-2);display:grid;gap:14px}
.soma{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.soma span{font-size:var(--t-0);color:var(--tinta-2)}
.soma b{font:700 var(--t-3)/1 var(--corpo);font-variant-numeric:tabular-nums;color:var(--petroleo)}
.gaveta-modo{display:flex;gap:9px}
.gaveta-modo label{
  flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:11px;border:1px solid var(--linha-forte);border-radius:var(--r-btn);
  font-size:var(--t--1);font-weight:600;cursor:pointer;background:var(--osso);
  transition:all .25s var(--mola);
}
.gaveta-modo input{position:absolute;opacity:0;pointer-events:none}
.gaveta-modo label:has(input:checked){
  border-color:var(--petroleo);color:var(--osso);
  background:linear-gradient(165deg,#14535F,#0B3B45 62%);
}
.gaveta-nota{font-size:var(--t--1);color:var(--tinta-3);line-height:1.5}

.recado{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);z-index:130;
  display:flex;align-items:center;gap:10px;
  padding:14px 22px;border-radius:var(--r-btn);
  background:linear-gradient(165deg,#14535F,#0B3B45);color:var(--osso);
  box-shadow:var(--sombra-3);
  font-size:var(--t-0);font-weight:500;opacity:0;pointer-events:none;
  transition:opacity .3s ease,transform .4s var(--mola);
}
.recado.on{opacity:1;transform:translate(-50%,0)}
.recado .ic{color:var(--turquesa-cla)}

/* =========================================================================
   VÍDEOS — "Por dentro da Flor de Juá"

   Os três arquivos são Reels verticais e continuam aparecendo inteiros,
   em 9/16, sem corte e sem tarja nas laterais. O que mudou foi o resto.

   1. CONTROLE PRÓPRIO. Antes, ao tocar, o vídeo ganhava a barra nativa
      do navegador: cinza, quadrada, diferente em cada sistema, colada
      por dentro de um cartão arredondado e escuro. Era o que destoava.
      Agora o que toca é um fio de 2,5 px na cor da marca, e som e tela
      cheia viram dois botões discretos que só existem com o vídeo
      rodando.
   2. CARROSSEL NO CELULAR. Empilhados, três 9/16 de largura inteira
      somavam 2.260 px — três telas de rolagem para ver três capas.
      Abaixo de 880 px a grade vira trilho com encaixe, um cartão por
      vez e um pedaço do seguinte à mostra. A seção cabe numa tela e o
      gesto passa a ser o mesmo do Instagram, que é de onde vieram os
      vídeos.
   3. MOLDURA. Fio de luz interno, sombra funda e um número de ordem no
      alto — o suficiente para o bloco ler como peça montada e não como
      três <video> soltos lado a lado.
   ========================================================================= */
/* Três colunas com teto de largura, centradas — não `1fr` cada.
   Esticado até o fim de um monitor de 1440 px, cada 9/16 passava de
   630 px de altura e a legenda caía para fora da tela junto com o fim do
   cartão. Em 300 px o cartão tem a proporção de um celular, que é a
   forma do material: três telefones lado a lado embaixo do título,
   composição fechada, em vez de três retângulos esticados até caber. */
.grade-videos{
  display:grid;grid-template-columns:repeat(3,minmax(0,300px));
  justify-content:center;gap:clamp(16px,2.2vw,30px);
}
.cartao-video{
  position:relative;display:block;margin:0;
  border-radius:var(--r);overflow:hidden;background:var(--petroleo-esc);
  border:1px solid rgba(143,216,212,.18);
  box-shadow:0 22px 50px -34px rgba(0,0,0,.85);
  transition:border-color .5s var(--mola),box-shadow .5s var(--mola);
}
/* o cartão não sobe: ver nota em .play — junto com o botão no meio, os
   dois movimentos faziam o alvo parecer escapar do ponteiro */
.cartao-video:hover{box-shadow:var(--sombra-3);border-color:rgba(143,216,212,.42)}
/* fio de luz por dentro da borda: é o que separa um cartão desenhado de
   um retângulo com vídeo dentro. Fica acima de tudo, sem pegar clique. */
.cartao-video::after{
  content:"";position:absolute;inset:0;z-index:7;pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.04);
}
.cartao-video video{
  width:100%;aspect-ratio:9/16;object-fit:cover;
  background:var(--petroleo-esc);cursor:pointer;
}

/* --------------------------------------------------- número de ordem */
.video-num{
  position:absolute;left:15px;top:15px;z-index:3;
  padding:5px 11px;border-radius:var(--r-btn);
  background:rgba(6,39,46,.45);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(143,216,212,.28);
  font:600 11px/1.4 var(--corpo);letter-spacing:.16em;
  color:var(--turquesa-cla);
  transition:opacity .3s ease;
}

.cartao-video figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:58px 20px 20px;
  /* três paradas em vez de duas: a passagem do transparente para o
     escuro deixa de ter aquela linha horizontal visível no meio da capa */
  background:linear-gradient(transparent,rgba(6,39,46,.5) 40%,rgba(6,39,46,.94));
  pointer-events:none;
  transition:opacity .35s ease,transform .45s var(--mola);
}
.cartao-video b{
  display:block;font:400 var(--t-2)/1.2 var(--display);
  font-variation-settings:"SOFT" 35;color:var(--osso);margin-bottom:5px;
}
.cartao-video span{display:block;font-size:var(--t--1);color:#A6BABB;line-height:1.45;max-width:30ch}

.play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;
  width:66px;height:66px;display:grid;place-items:center;
  border:1px solid rgba(252,250,247,.42);border-radius:50%;
  background:rgba(6,39,46,.36);
  backdrop-filter:blur(10px) saturate(1.3);-webkit-backdrop-filter:blur(10px) saturate(1.3);
  color:var(--osso);cursor:pointer;
  box-shadow:0 12px 32px -14px rgba(0,0,0,.75);
  transition:background .3s ease,border-color .3s ease,color .3s ease,opacity .3s ease;
}
/* O botão fica PARADO: nem anel pulsando, nem crescer no hover.
   Ele mora no meio de um cartão que já reage ao ponteiro — os dois
   movimentos juntos davam a impressão de que o alvo fugia na hora de
   clicar. O que muda no hover é só a cor. */
.play:hover{background:rgba(62,186,181,.85);border-color:rgba(252,250,247,.75);color:#04322F}
.play svg{width:21px;height:21px;fill:currentColor;stroke:none;margin-left:3px}

/* ------------------------------------------------ barra de progresso */
.video-barra{
  position:absolute;left:0;right:0;bottom:0;z-index:5;
  height:2.5px;background:rgba(252,250,247,.18);
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.video-barra i{
  display:block;height:100%;width:var(--andado,0%);
  background:linear-gradient(90deg,var(--turquesa),var(--turquesa-cla));
  /* linear, não mola: barra de tempo que acelera e freia mente sobre
     onde o vídeo está */
  transition:width .2s linear;
}

/* ------------------------------------------------- som e tela cheia */
.video-ctrl{
  position:absolute;right:13px;bottom:14px;z-index:6;
  display:flex;gap:8px;
  opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .3s ease,transform .35s var(--mola);
}
.video-ctrl button{
  width:38px;height:38px;display:grid;place-items:center;padding:0;
  border:1px solid rgba(252,250,247,.28);border-radius:50%;
  background:rgba(6,39,46,.55);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:var(--osso);cursor:pointer;
  transition:background .25s ease,border-color .25s ease;
}
.video-ctrl button:hover{background:rgba(6,39,46,.88);border-color:var(--turquesa-cla)}
.video-ctrl .ic{width:17px;height:17px}

.cartao-video.tocando .play,
.cartao-video.tocando .video-num,
.cartao-video.tocando figcaption{opacity:0}
.cartao-video.tocando .play{pointer-events:none}
.cartao-video.tocando figcaption{transform:translateY(10px)}
.cartao-video.tocando .video-barra{opacity:1}
.cartao-video.tocando .video-ctrl{opacity:1;transform:none;pointer-events:auto}

/* -------------------------------------------------- pontos do trilho
   Só existem no celular, onde a grade vira carrossel. No computador os
   três cartões estão à vista e um marcador de posição não diria nada. */
.videos-pontos{display:none}

/* =========================================================================
   ENTREGA
   ========================================================================= */
.entrega-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);
  gap:clamp(30px,5vw,64px);align-items:center}
.grade-modos{display:grid;gap:14px;margin-top:34px}
.modo{
  display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;
  padding:24px 26px;border-radius:var(--r);
  background:rgba(255,255,255,.05);border:1px solid rgba(143,216,212,.22);
  transition:background .3s,border-color .3s,transform .45s var(--mola);
}
.modo:hover{background:rgba(255,255,255,.08);border-color:rgba(143,216,212,.4);transform:translateX(4px)}
.modo .ic-m{color:var(--turquesa-cla);margin-top:3px}
.modo h3{font-size:var(--t-2);margin-bottom:7px}
.modo p{margin:0 0 5px;font-size:var(--t-0);color:var(--turquesa-cla);font-weight:600}
.modo .modo-nota{color:#9BB0B2;font-weight:400;font-size:var(--t--1);line-height:1.55;margin:0}
.entrega-foto{
  margin:0;overflow:hidden;border-radius:var(--r-lg);
  border:1px solid rgba(143,216,212,.26);
  aspect-ratio:4/5;
}
.entrega-foto img{width:100%;height:100%;object-fit:cover}
/* a foto anda mais devagar que a página. A imagem nasce 16% mais alta que
   a moldura e sobe 8%, para que o deslocamento nunca descubra as bordas. */
.foto-move{overflow:hidden}
.foto-move img{height:116%;margin-top:-8%;will-change:transform}

/* =========================================================================
   FORMULÁRIO
   ========================================================================= */
.form-orcamento{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;
  max-width:840px;margin-inline:auto;
  padding:clamp(26px,3.4vw,46px);
  background:linear-gradient(170deg,var(--osso),var(--areia-2));
  border:1px solid var(--linha);border-radius:var(--r-lg);
  box-shadow:var(--sombra-2);
}
.campo{display:flex;flex-direction:column;gap:8px}
.campo-inteiro{grid-column:1/-1}
.campo label,.campo legend{
  font:600 var(--t--1)/1.3 var(--corpo);letter-spacing:.015em;color:var(--petroleo);
}
.campo label .obr{color:var(--alerta)}
.rotulo-leve{font-weight:400;color:var(--tinta-3)}
.campo input[type=text],.campo input[type=tel],.campo input[type=password],
.campo select,.campo textarea{
  width:100%;padding:14px 18px;
  border:1px solid var(--linha-forte);border-radius:var(--r-btn);
  background:var(--osso);
  font:400 var(--t-0)/1.5 var(--corpo);
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.campo textarea{border-radius:var(--r);resize:vertical;min-height:92px}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--turquesa-esc);
  box-shadow:0 0 0 4px rgba(62,186,181,.16);
}
.campo.erro input,.campo.erro select{border-color:var(--alerta);box-shadow:0 0 0 4px rgba(180,81,47,.13)}
.campo-radio{border:0;margin:0;padding:0}
.campo-radio legend{margin-bottom:10px}
.opcoes{display:flex;gap:10px;flex-wrap:wrap}
.opcao{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 18px;border:1px solid var(--linha-forte);border-radius:var(--r-btn);
  font-size:var(--t-0);font-weight:500;cursor:pointer;background:var(--osso);
  transition:all .25s var(--mola);
}
.opcao:hover{border-color:var(--petroleo)}
.opcao input{position:absolute;opacity:0;pointer-events:none}
.opcao:has(input:checked){
  border-color:var(--petroleo);color:var(--osso);
  background:linear-gradient(165deg,#14535F,#0B3B45 62%);
  box-shadow:0 10px 22px -14px rgba(11,59,69,.9);
}

.anexo{
  display:flex;align-items:center;gap:14px;cursor:pointer;
  padding:20px;border-radius:var(--r);
  border:1.5px dashed rgba(35,125,121,.45);background:rgba(62,186,181,.055);
  font-size:var(--t-0);color:var(--petroleo);font-weight:600;
  transition:background .25s,border-color .25s,transform .35s var(--mola);
}
.anexo:hover{background:rgba(62,186,181,.12);border-color:var(--turquesa-esc);transform:translateY(-2px)}
.anexo .ic{width:24px;height:24px;color:var(--turquesa-esc)}
.anexo.cheio{border-style:solid;border-color:var(--turquesa-esc);background:rgba(62,186,181,.13)}
.ajuda{margin:0;font-size:var(--t--1);color:var(--tinta-3);line-height:1.55}
.form-fim{display:flex;flex-direction:column;align-items:center;gap:12px;
  padding-top:24px;border-top:1px solid var(--linha)}
.ajuda-centro{text-align:center;max-width:46ch}
.retorno{
  grid-column:1/-1;padding:22px 24px;border-radius:var(--r);
  background:linear-gradient(165deg,#14535F,#0B3B45);color:var(--areia);
  font-size:var(--t-0);line-height:1.6;
}
.retorno b{color:var(--turquesa-cla);font-weight:700}
.retorno ol{margin:12px 0 0;padding-left:19px}
.retorno li{margin-bottom:5px}
.retorno .btn{margin-top:16px}
.retorno a{color:var(--turquesa-cla);text-decoration:underline;text-underline-offset:3px}

/* =========================================================================
   A CASA
   ========================================================================= */
.casa-grade{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);
  gap:clamp(30px,5vw,64px);align-items:center}
.casa-foto{margin:0;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--linha);
  aspect-ratio:4/5}
.casa-foto img{width:100%;height:100%;object-fit:cover}
/* O título desta seção não está dentro de um `.secao-cabeca`, então não
   herdava a margem que separa título de texto: "Nossa história, feita de
   cuidado e dedicação" encostava na primeira linha do parágrafo. */
.casa-txt{margin-top:clamp(16px,1.8vw,22px)}
.casa-txt p{margin:0 0 16px;color:var(--tinta-2);font-size:var(--t-1);line-height:1.68}
.casa-txt strong{color:var(--petroleo);font-weight:700}
.assinatura{
  display:flex;align-items:center;gap:16px;
  margin-top:30px;padding:20px 22px;
  border:1px solid var(--linha);border-radius:var(--r);
  background:linear-gradient(170deg,var(--osso),var(--areia-2));
}
.assinatura img{width:46px;height:46px;flex:none;opacity:.9}
.assinatura div{font-size:var(--t--1);color:var(--tinta-3);line-height:1.5}
.assinatura b{display:block;font:400 var(--t-1)/1.3 var(--display);
  font-variation-settings:"SOFT" 35;color:var(--petroleo);margin-bottom:2px}

/* =========================================================================
   LOCALIZAÇÃO — mapa grande, cartões de contato e atalhos de rota
   ========================================================================= */
.local{background:var(--petroleo-esc);color:var(--areia);position:relative;overflow:hidden}
.local::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 85% 0%,rgba(62,186,181,.16),transparent 65%);
}
/* A coluna da direita é a fachada em cima — o que a pessoa procura ao
   chegar de carro — e o mapa embaixo. As duas peças usam a mesma moldura
   dos cartões de endereço e entrega ao lado: mesmo fundo, mesma linha,
   mesmo raio, com a imagem embutida dentro dela. Assim a seção lê como
   um conjunto só, e não como texto de um lado e mídia do outro.

   Cada peça guarda a própria proporção em vez de esticar até a altura da
   coluna do lado: esticada, a fachada virava um retrato de dois metros e
   o mapa, um paredão — que era justamente o defeito de antes. */
/* O cabeçalho desta seção atravessa a largura inteira, acima da grade.
   O título tem três linhas curtas e, espremido numa coluna ao lado do
   mapa, virava uma escada estreita com meia tela vazia à direita. */
.local-cabeca{max-width:none;margin-bottom:clamp(30px,3.4vw,44px)}
.local-cabeca .linha-fina{max-width:72ch}

/* `align-items:stretch`: o mapa não tem altura própria: ele copia a
   altura da pilha de cartões ao lado. É isso que faz os dois terminarem
   na mesma linha, sem o mapa virar um painel alto de um lado só. */
.local-grade{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,52px);align-items:stretch;
}
.local-visual{display:grid}
.local-mapa{
  margin:0;padding:9px;min-height:0;
  border-radius:var(--r);
  background:rgba(255,255,255,.045);
  border:1px solid rgba(143,216,212,.2);
  transition:background .3s,border-color .3s;
}
.local-mapa:hover{
  background:rgba(255,255,255,.075);border-color:rgba(143,216,212,.4);
}
.local-info{display:flex;flex-direction:column}
.local .titulo{color:var(--osso)}
.local .linha-fina{color:#A6BABB}

/* o `margin-top` saiu junto com o cabeçalho: ele existia para separar os
   cartões do título, e o título já não está nesta coluna */
.local-lista{display:grid;gap:12px}
/* o contêiner dos modos some da caixa e entrega os filhos direto para a
   grade, senão eles virariam um bloco só e perderiam o espaçamento */
#local-modos{display:contents}
.local-item{
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  padding:18px 20px;border-radius:var(--r);
  background:rgba(255,255,255,.045);border:1px solid rgba(143,216,212,.2);
  transition:background .3s,border-color .3s;
}
.local-item:hover{background:rgba(255,255,255,.075);border-color:rgba(143,216,212,.4)}
.local-ico{
  width:42px;height:42px;display:grid;place-items:center;flex:none;
  border-radius:13px;
  background:linear-gradient(165deg,rgba(62,186,181,.26),rgba(62,186,181,.08));
  border:1px solid rgba(143,216,212,.3);
  color:var(--turquesa-cla);
}
.local-item h3{font-size:var(--t-1);color:var(--osso);margin-bottom:4px}
.local-item p{font-size:var(--t-0);color:#B4C7C9;line-height:1.55;margin:0}
.local-item .destaque-claro{color:var(--turquesa-cla);font-weight:600}

/* o mapa mora na mesma moldura da fachada (declarada acima, junto com
   ela); aqui fica só o que é dele: a posição para o selo e o desenho do
   iframe, que nasce em tons de cinza para não brigar com a paleta e
   volta ao normal quando o ponteiro chega perto */
.local-mapa{position:relative}
.local-mapa iframe{
  display:block;width:100%;height:100%;border:0;
  border-radius:calc(var(--r) - 8px);
  filter:grayscale(.55) contrast(1.05) brightness(.92);
  transition:filter .6s ease;
  /* o iframe do Google é lazy e só carrega quando chega perto da tela;
     esta malha fica embaixo para que o espaço nunca pareça um buraco */
  background:
    radial-gradient(60% 50% at 50% 40%,rgba(62,186,181,.14),transparent 70%),
    repeating-linear-gradient(0deg,transparent 0 39px,rgba(143,216,212,.07) 39px 40px),
    repeating-linear-gradient(90deg,transparent 0 39px,rgba(143,216,212,.07) 39px 40px),
    #0A343D;
}
.local-mapa:hover iframe{filter:none}
.local-selo{
  position:absolute;left:20px;bottom:20px;z-index:2;
  display:flex;align-items:center;gap:11px;
  padding:12px 18px;border-radius:var(--r-btn);
  background:rgba(6,39,46,.86);backdrop-filter:blur(10px);
  border:1px solid rgba(143,216,212,.28);
  font-size:var(--t--1);font-weight:600;color:var(--osso);
  pointer-events:none;
}
.local-selo .ic{color:var(--turquesa)}

/* =========================================================================
   AVALIAÇÕES
   ========================================================================= */
.grade-avaliacoes{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(14px,1.8vw,22px);
}
.avaliacao{
  /* `margin:0` não é enfeite: o cartão é um <figure>, e o navegador dá
     40 px de margem lateral a todo <figure> que não diga o contrário.
     Dentro da grade, isso tirava 80 px da largura de cada cartão e
     somava 80 px ao vão entre eles — quatro colunas de 266 px viravam
     quatro de 186 px separadas por 100 px de vazio, com o depoimento
     quebrando a cada quatro palavras e "Maria Auxiliadora" em duas
     linhas. Os outros <figure> do site já zeravam; este tinha escapado. */
  margin:0;
  display:flex;flex-direction:column;gap:14px;
  padding:clamp(22px,2.6vw,30px);
  background:var(--osso);border:1px solid var(--linha);border-radius:var(--r);
  transition:transform .45s var(--mola),box-shadow .45s var(--mola),border-color .3s;
}
.avaliacao:hover{transform:translateY(-3px);box-shadow:var(--sombra-2);border-color:var(--linha-forte)}
.estrelas{display:flex;gap:3px;color:#E0A32E}
.estrelas svg{width:16px;height:16px;fill:currentColor;stroke:none}
.avaliacao blockquote{
  margin:0;font-size:var(--t-0);line-height:1.62;color:var(--tinta-2);
  /* aspas de verdade, não aspas de máquina de escrever */
  quotes:"“" "”";
}
.avaliacao blockquote::before{content:open-quote;color:var(--turquesa);font-weight:700}
.avaliacao blockquote::after{content:close-quote;color:var(--turquesa);font-weight:700}
.avaliacao figcaption{
  display:flex;align-items:center;gap:11px;margin-top:auto;padding-top:14px;
  border-top:1px solid var(--linha);
}
.avaliacao-inicial{
  width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(165deg,rgba(62,186,181,.22),rgba(62,186,181,.07));
  border:1px solid rgba(62,186,181,.3);
  font:600 var(--t-0)/1 var(--corpo);color:var(--turquesa-esc);
}
.avaliacao figcaption b{display:block;font:400 var(--t-0)/1.3 var(--display);
  font-variation-settings:"SOFT" 35;color:var(--petroleo)}
.avaliacao figcaption span{font-size:var(--t--1);color:var(--tinta-3)}

/* =========================================================================
   PERGUNTAS FREQUENTES
   ========================================================================= */
.faq{display:grid;gap:10px;max-width:820px;margin-inline:auto}
.faq details{
  background:var(--osso);border:1px solid var(--linha);border-radius:var(--r);
  overflow:hidden;transition:border-color .3s,box-shadow .3s;
}
.faq details[open]{border-color:var(--linha-forte);box-shadow:var(--sombra-1)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:clamp(16px,2vw,22px) clamp(18px,2.2vw,26px);
  cursor:pointer;list-style:none;
  font:400 var(--t-2)/1.35 var(--display);
  font-variation-settings:"SOFT" 32;letter-spacing:-.01em;color:var(--petroleo);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:rgba(11,59,69,.03)}
.faq-sinal{
  position:relative;width:22px;height:22px;flex:none;
  transition:transform .35s var(--mola);
}
.faq-sinal::before,.faq-sinal::after{
  content:"";position:absolute;left:50%;top:50%;
  background:var(--turquesa-esc);border-radius:2px;
  transform:translate(-50%,-50%);
}
.faq-sinal::before{width:14px;height:1.8px}
.faq-sinal::after{width:1.8px;height:14px;transition:opacity .3s ease}
.faq details[open] .faq-sinal{transform:rotate(180deg)}
.faq details[open] .faq-sinal::after{opacity:0}
.faq-resposta{
  padding:0 clamp(18px,2.2vw,26px) clamp(18px,2.2vw,24px);
  font-size:var(--t-0);line-height:1.68;color:var(--tinta-2);
}
.faq-resposta strong{color:var(--petroleo);font-weight:700}

/* =========================================================================
   AVISO DE COOKIES — DESLIGADO

   A tarja saiu do HTML das três páginas e o código que a mostrava saiu
   do fj.js. O motivo está escrito lá: o site não tem cookie de
   propaganda nem de medição, então não havia consentimento a colher —
   só uma pergunta sem consequência ocupando a primeira tela.

   O desenho fica aqui de propósito, sem custo nenhum (regra CSS que não
   casa com nada não pesa na página). Se um dia entrar alguma medição, a
   tarja precisa voltar antes do script, e aí é só remontar o bloco no
   HTML — o visual já existe, pronto.
   ========================================================================= */
.cookies{
  position:fixed;left:0;right:0;bottom:0;z-index:140;
  padding:16px var(--gutter-faixa) calc(16px + env(safe-area-inset-bottom));
  background:rgba(6,39,46,.97);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid rgba(143,216,212,.24);
  color:var(--areia);
  transform:translateY(110%);
  transition:transform .55s var(--mola);
}
.cookies.on{transform:none}
.cookies[hidden]{display:none}
.cookies-caixa{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  max-width:var(--env-larga);margin-inline:auto;flex-wrap:wrap;
}
.cookies b{display:block;font:400 var(--t-1)/1.3 var(--display);
  font-variation-settings:"SOFT" 32;color:var(--osso);margin-bottom:4px}
.cookies p{font-size:var(--t--1);color:#A6BABB;line-height:1.55;max-width:70ch;margin:0}
.cookies p a{color:var(--turquesa-cla);text-decoration:underline;text-underline-offset:3px}
.cookies-acoes{display:flex;gap:9px;flex-wrap:wrap;flex:none}

/* =========================================================================
   RODAPÉ
   ========================================================================= */
.rodape{background:var(--petroleo-esc);color:#A3B8BA;padding-block:clamp(48px,6vw,76px) 22px;
  border-top:1px solid rgba(143,216,212,.14)}
.rodape-grade{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(24px,3vw,40px)}
.rodape img.logo{height:38px;width:auto;margin-bottom:18px}
/* O espaçamento de .16em somado ao caixa-alta fazia
   "SEGURANÇA E PRIVACIDADE" quebrar em duas linhas desalinhadas das
   outras colunas. Menos espaçamento e entrelinha declarada resolvem
   sem encolher a letra. */
.rodape h4{margin:0 0 15px;font:700 var(--t--1)/1.35 var(--corpo);
  letter-spacing:.09em;text-transform:uppercase;color:var(--turquesa-cla);
  text-wrap:balance}
.rodape a:not(.marca){display:block;margin-bottom:10px;font-size:var(--t-0);
  color:#A3B8BA;transition:color .2s,transform .3s var(--mola)}
.rodape a:not(.marca):hover{color:var(--osso);transform:translateX(3px)}
.rodape p{margin:0 0 10px;font-size:var(--t-0)}
.rodape-frase{max-width:38ch;line-height:1.6}
.rodape-fim{
  display:flex;justify-content:space-between;align-items:center;
  gap:18px;flex-wrap:wrap;
  margin-top:clamp(28px,3.4vw,44px);padding-top:22px;
  border-top:1px solid rgba(163,184,186,.18);
  font-size:var(--t--1);color:#7E9395;
}

/* ---------------------------------------------------- redes no rodapé -- */
.rodape-redes{display:flex;gap:10px;margin-top:20px}
.rodape-redes a{
  display:grid!important;place-items:center;
  width:42px;height:42px;margin:0!important;
  border:1px solid rgba(143,216,212,.26);border-radius:50%;
  color:var(--areia);
  transition:background .25s,border-color .25s,color .25s,transform .35s var(--mola);
}
.rodape-redes a:hover{
  background:rgba(143,216,212,.14);border-color:var(--turquesa-cla);
  color:var(--osso);transform:translateY(-2px)!important;
}
.rodape-redes .ic{width:19px;height:19px}

/* ------------------------------------------- assinatura de quem fez ---- */
/* O crédito fica na mesma linha de base do texto do rodapé, sem caixa
   nem fundo: o site é da farmácia, não da agência. Só a logo pequena e
   o nome, na mesma altura de letra do CNPJ ao lado. */
/* O seletor precisa ser tão específico quanto `.rodape a:not(.marca)`,
   que transforma todo link do rodapé em bloco com margem embaixo. Sem
   isso, o selo e a frase de quem fez o site caem em duas linhas
   desencontradas em vez de ficarem lado a lado, na mesma linha do
   aviso de direitos — que é o lugar combinado para eles. */
.rodape a.credito,.credito{
  display:inline-flex;align-items:center;gap:8px;
  margin:0;font-size:inherit;color:inherit;line-height:1;
  transition:color .25s,opacity .25s;
  opacity:.85;
}
.rodape a.credito:hover{opacity:1;color:var(--turquesa-cla);transform:none}
.credito img{height:15px;width:auto;flex:none;opacity:.9;transition:opacity .25s}
a.credito:hover img{opacity:1}
.credito span{white-space:nowrap}
.credito b{font-weight:700;letter-spacing:.02em}
/* o aviso de direitos pode quebrar; o selo, não */
#credito{flex:none}
.rodape-direitos{flex:1 1 320px;min-width:0}

/* =========================================================================
   BOTÕES FLUTUANTES — canto de baixo à esquerda

   Ficam à esquerda porque o polegar direito de quem rola a página no
   celular passa o tempo todo do outro lado: botão flutuante à direita é
   o que mais tapa preço e botão de comprar sem querer.

   São dois, empilhados: o WhatsApp embaixo, sempre; o carrinho em cima,
   só quando tem alguma coisa dentro. Carrinho vazio não é botão, é
   ruído — e some de novo se a pessoa esvaziar.
   ========================================================================= */
/* Estes botões ficavam deslocados para cima pela altura da tarja de
   cookies, que era fixa no rodapé da tela e os tapava na primeira
   visita. Com a tarja fora, o deslocamento acabou e eles voltaram para
   o canto. */
.flutuantes{
  position:fixed;left:20px;bottom:20px;z-index:90;
  display:flex;flex-direction:column-reverse;align-items:flex-start;gap:12px;
}

/* O botão é UMA cápsula só. Antes a legenda tinha fundo próprio e, ao
   abrir, parecia um segundo botão colado no primeiro. Agora o fundo
   verde é do botão inteiro e o que cresce é a largura dele — o ícone
   fica no lugar e o texto aparece dentro da mesma peça. */
.zap-flutua{
  position:relative;
  display:inline-flex;align-items:center;
  height:64px;padding:0 20px;gap:0;
  border-radius:var(--r-btn);
  background:linear-gradient(165deg,#31C464,#16A34A 70%);color:#fff;
  font:700 var(--t-0)/1 var(--corpo);
  box-shadow:0 16px 38px -14px rgba(22,163,74,.95);
  transition:transform .4s var(--mola),box-shadow .4s var(--mola),
             padding .5s var(--mola);
}
.zap-flutua:hover{transform:translateY(-3px);
  box-shadow:0 22px 48px -14px rgba(22,163,74,1)}
.zap-flutua .ic{width:28px;height:28px;flex:none;stroke-width:1.8}

/* a legenda só existe onde existe ponteiro: no toque não há "passar por
   cima", e uma tarja permanente ao lado do botão comeria meia tela */
.zap-fala{
  display:block;max-width:0;overflow:hidden;white-space:nowrap;
  opacity:0;
  transition:max-width .5s var(--mola),opacity .35s ease,margin .5s var(--mola);
}
@media (pointer:fine){
  .zap-flutua:hover .zap-fala,.zap-flutua:focus-visible .zap-fala{
    max-width:18rem;opacity:1;margin-left:12px;
  }
}

/* --------------------------------------------------- voltar ao topo --- */
/* À direita, do lado oposto ao WhatsApp: os dois no mesmo canto
   disputariam o polegar. Só aparece depois de uma tela e meia. */
.ao-topo{
  position:fixed;right:20px;bottom:20px;z-index:90;
  width:52px;height:52px;display:grid;place-items:center;
  border:1px solid var(--linha-forte);border-radius:50%;
  background:rgba(252,250,247,.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:var(--petroleo);cursor:pointer;
  box-shadow:0 12px 30px -14px rgba(11,59,69,.7);
  opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;
  transition:opacity .4s ease,transform .5s var(--mola),
             background .25s,border-color .25s;
}
.ao-topo.on{opacity:1;transform:none;pointer-events:auto}
.ao-topo:hover{background:var(--petroleo);border-color:var(--petroleo);color:var(--osso)}
.ao-topo .ic{width:22px;height:22px;stroke-width:2}

/* =========================================================================
   PÁGINA DO CATÁLOGO
   ========================================================================= */
.capa-loja{
  position:relative;overflow:hidden;
  background:linear-gradient(170deg,var(--areia-2),var(--areia));
  border-bottom:1px solid var(--linha);
  padding-block:clamp(38px,5vw,66px) clamp(28px,3.4vw,44px);
}
.capa-loja::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 80% at 88% 10%,rgba(62,186,181,.16),transparent 62%);
}
.capa-loja > .env{position:relative;z-index:2}
.migalha{display:flex;align-items:center;gap:8px;margin-bottom:16px;
  font-size:var(--t--1);color:var(--tinta-3)}
.migalha a:hover{color:var(--petroleo)}
.capa-loja h1{font-size:var(--t-5);max-width:18ch}
.loja-ferramentas{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:28px}

/* =========================================================================
   PÁGINA DE TEXTO — privacidade e segurança
   ========================================================================= */
.texto-legal{max-width:760px}
.texto-legal h2{
  font-size:var(--t-3);margin:clamp(34px,4vw,52px) 0 14px;
  padding-top:clamp(20px,2.4vw,28px);border-top:1px solid var(--linha);
  scroll-margin-top:calc(var(--topo-h) + 24px);
}
.texto-legal h2:first-of-type{border-top:0;padding-top:0}
.texto-legal p{margin:0 0 16px;color:var(--tinta-2);font-size:var(--t-1);line-height:1.72}
.texto-legal strong,.texto-legal b{color:var(--petroleo);font-weight:700}
.texto-legal ul{margin:0 0 18px;padding-left:22px;color:var(--tinta-2);font-size:var(--t-1)}
.texto-legal li{margin-bottom:10px;line-height:1.7}
.texto-legal li::marker{color:var(--turquesa-esc)}

.destaque-legal{
  display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;
  padding:clamp(22px,2.6vw,30px);margin-bottom:8px;
  border:1px solid rgba(62,186,181,.32);border-radius:var(--r);
  background:linear-gradient(165deg,rgba(62,186,181,.1),rgba(62,186,181,.03));
  font-size:var(--t-1);line-height:1.7;color:var(--tinta-2);
}
.destaque-legal .ic-m{color:var(--turquesa-esc);margin-top:2px}
.destaque-legal b{display:block;font:400 var(--t-2)/1.3 var(--display);
  font-variation-settings:"SOFT" 32;color:var(--petroleo);margin-bottom:6px}

.acoes-legal{display:flex;gap:11px;flex-wrap:wrap;
  margin-top:clamp(34px,4vw,50px);padding-top:clamp(24px,3vw,34px);
  border-top:1px solid var(--linha)}

/* =========================================================================
   PAINEL DO ADMINISTRADOR
   ========================================================================= */
.admin{background:var(--areia-2);min-height:100vh}
.admin-topo{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:14px var(--gutter);
  background:linear-gradient(165deg,#14535F,#0B3B45);color:var(--areia);
}
/* `width:auto` não é enfeite: o <img> carrega width="720" no HTML para
   reservar o espaço certo enquanto carrega, e sem isto o atributo vence
   e o logotipo sai esticado em 720 px de largura por 30 de altura. */
.admin-topo img{height:30px;width:auto}
.admin-topo h1{font-size:var(--t-1);color:var(--osso);font-weight:400}
.admin-corpo{max-width:980px;margin-inline:auto;padding:clamp(24px,4vw,46px) var(--gutter) 130px}
.admin-abas{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:28px;
  border-bottom:1px solid var(--linha);padding-bottom:14px}
.admin-aba{
  padding:10px 18px;border:1px solid transparent;border-radius:var(--r-btn);
  background:transparent;color:var(--tinta-2);cursor:pointer;
  font:600 var(--t-0)/1 var(--corpo);transition:all .25s var(--mola);
}
.admin-aba:hover{background:rgba(11,59,69,.06);color:var(--petroleo)}
.admin-aba.on{background:linear-gradient(165deg,#14535F,#0B3B45);color:var(--osso);
  box-shadow:0 10px 22px -12px rgba(11,59,69,.9)}
.painel[hidden]{display:none}
.bloco{
  background:var(--osso);border:1px solid var(--linha);border-radius:var(--r);
  padding:clamp(20px,2.6vw,32px);margin-bottom:18px;
}
.bloco > h2{font-size:var(--t-2);margin-bottom:6px}
.bloco > p.ajuda{margin-bottom:20px}
.campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.campos .campo-inteiro{grid-column:1/-1}
.lista-edit{display:grid;gap:14px}
.fileira{
  display:grid;grid-template-columns:1fr auto;gap:14px;align-items:start;
  padding:18px;border:1px solid var(--linha);border-radius:var(--r);background:var(--areia-2);
}
.fileira .campos{gap:12px}
.mini{
  padding:8px 14px;border:1px solid var(--linha-forte);border-radius:var(--r-btn);
  background:var(--osso);cursor:pointer;font:600 var(--t--1)/1 var(--corpo);color:var(--tinta-2);
  transition:all .25s var(--mola);
}
.mini:hover{border-color:var(--petroleo);color:var(--petroleo)}
.mini.perigo:hover{border-color:var(--alerta);color:var(--alerta)}
.mini[disabled]{opacity:.4;pointer-events:none}
.admin-barra{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:14px var(--gutter) calc(14px + env(safe-area-inset-bottom));
  background:var(--osso);border-top:1px solid var(--linha-forte);
  box-shadow:0 -16px 40px -30px rgba(11,59,69,.7);
}
.admin-estado{font-size:var(--t--1);color:var(--tinta-3)}
.admin-estado.ok{color:var(--ok)}
.admin-estado.erro{color:var(--alerta)}
.entrar{
  max-width:420px;margin:12vh auto;padding:38px;
  background:var(--osso);border:1px solid var(--linha);border-radius:var(--r-lg);
  box-shadow:var(--sombra-3);display:grid;gap:16px;
}
.entrar img{height:42px;width:auto;margin-inline:auto}
/* a mesma prévia serve para foto de produto (retrato) e para logotipo
   (faixa larga), então é contain */
.previa-img{
  width:72px;aspect-ratio:4/5;object-fit:contain;flex:none;padding:5px;
  border:1px solid var(--linha);border-radius:var(--r-sm);background:var(--areia-2);
}
.fileira-topo{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.fileira-topo b{font:400 var(--t-1)/1.2 var(--display);font-variation-settings:"SOFT" 35;color:var(--petroleo)}

/* =========================================================================
   RESPONSIVO
   ========================================================================= */
@media (max-width:1080px){
  .hero-grade{grid-template-columns:1fr;align-items:start;gap:34px}
  /* Empilhado, esta coluna deixa de ter uma vizinha à esquerda para se
     alinhar: o aviso de aberto/fechado ficava encostado na margem, e
     sozinho numa linha larga parecia esquecido ali. Centrado, ele lê
     como selo — que é o que ele é. */
  .hero-lado{flex-direction:column-reverse;gap:26px;align-items:center}
  .status{align-self:center}
  .hero-numeros{justify-content:center;width:100%}
  .entrega-grade,.casa-grade,.local-grade{grid-template-columns:1fr}
  /* 16/11 deitado com foto de pessoa em pé dava o corte que aparecia no
     "Não achou aqui?": a farmacêutica entrava pela cintura e saía pela
     testa. 4/5 é a proporção da própria foto, então nada é cortado; as
     duas ficam centradas, com teto de largura para não virarem um
     pôster no tablet. */
  .entrega-foto,.casa-foto{max-width:min(100%,420px);margin-inline:auto;aspect-ratio:4/5}
  /* empilhado não há coluna vizinha para acompanhar, então o mapa volta
     a ter proporção própria em vez de esticar para uma altura que já
     não existe */
  .local-mapa{aspect-ratio:16/11;min-height:0}
  .selos-grade{grid-template-columns:repeat(2,1fr)}
  .rodape-grade{grid-template-columns:1fr 1fr}
  .ficha-caixa{grid-template-columns:1fr;max-height:92vh}
  .ficha-foto{aspect-ratio:16/10}
  .rolar{display:none}

  /* ---------------------------------------- arrumação em tela estreita
     Empilhado, o cabeçalho de seção e o botão de ação deixam de dividir
     a fileira e passam a ser duas peças soltas, uma sobre a outra. Sem
     estes ajustes o botão herdava o alinhamento da fileira larga e
     ficava encostado à esquerda com meia tela sobrando ao lado, e o
     parágrafo mantinha o teto de 60 caracteres que só faz sentido numa
     coluna larga. */
  .loja-topo{align-items:stretch;gap:clamp(18px,3vw,26px)}
  .loja-topo > .btn{align-self:flex-start}
  .secao-cabeca .linha-fina,.loja-topo .linha-fina{max-width:none}
  /* o respiro entre título e texto encolhe junto com a tela, senão o
     bloco de abertura de cada seção come meia dobra antes do conteúdo */
  .secao-cabeca{margin-bottom:clamp(20px,3.2vw,30px)}
  .linha-fina{margin-top:14px}
}

/* Abaixo de 1180 px o menu de seis itens deixa de caber ao lado do botão
   de receita. Vira lista sob o hambúrguer bem antes de a sobreposição
   acontecer — e, junto, a barra troca de arranjo: a logo vai para o
   centro e sobra só o hambúrguer ao lado dela. Menos peças, mais ar, e
   a marca no lugar onde o olho vai primeiro numa tela estreita. */
@media (max-width:1180px){
  .topo-linha{grid-template-areas:"vazio marca acoes"}
  .marca{justify-self:center}
  .topo-acoes .btn{display:none}
  .menu{display:none}
  .menu.aberto{
    display:flex;flex-direction:column;align-items:stretch;gap:4px;
    position:absolute;left:0;right:0;top:100%;
    padding:12px var(--gutter) 20px;margin:0;
    background:var(--osso);border-bottom:1px solid var(--linha);
    box-shadow:var(--sombra-2);
  }
  .menu.aberto a{padding:14px 16px;font-size:var(--t-1);border-radius:var(--r-sm)}
  .abre-menu{display:grid;place-items:center;order:3}
  .topo-linha{position:relative}

  /* O carrinho troca de lado: hambúrguer à direita, carrinho à esquerda,
     logo inteira no meio. Ele sai do fluxo em vez de mudar de coluna
     porque mora dentro de .topo-acoes, e só um filho direto da grade
     poderia ocupar outra área. Posicionado assim, a coluna da esquerda
     continua vazia e a logo segue centrada na tela — não no espaço que
     sobra —, apareça o carrinho ou não. */
  .btn-carrinho[data-vazio="nao"]{
    position:absolute;left:var(--gutter-faixa);top:50%;
    transform:translateY(-50%);margin:0;
  }
  .btn-carrinho:hover{transform:translateY(-50%)}
}

/* Os vídeos viram carrossel antes de o resto do layout quebrar: em 880 px
   três colunas de 9/16 já estão estreitas demais para o rosto de quem
   fala caber com folga, e empilhá-los custaria três telas de rolagem. */
@media (max-width:880px){
  .grade-videos{
    display:flex;gap:14px;
    /* desfaz o `center` da grade de três colunas: num trilho que
       transborda, centralizar empurra o primeiro cartão para antes do
       início e o começo da lista fica inalcançável */
    justify-content:flex-start;
    /* sangra até a borda da tela: o cartão que espia do lado é o que
       avisa que há mais para o lado. Com o respiro da seção de fora, o
       trilho parecia terminar antes do fim da tela. */
    margin-inline:calc(var(--gutter) * -1);
    padding:6px var(--gutter);
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--gutter);
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .grade-videos::-webkit-scrollbar{display:none}
  .cartao-video{flex:0 0 min(76%,300px);scroll-snap-align:start}

  .videos-pontos{
    display:flex;align-items:center;justify-content:center;gap:8px;
    margin-top:22px;
  }
  .videos-pontos b{
    width:7px;height:7px;border-radius:50%;
    background:rgba(143,216,212,.28);
    transition:width .4s var(--mola),background .3s ease;
  }
  .videos-pontos b.on{width:24px;border-radius:4px;background:var(--turquesa-cla)}
}

@media (max-width:860px){
  .grade-passos{grid-template-columns:1fr}
  .util-esq .util-item:nth-child(n+2){display:none}
}

/* -------------------------------------- a última linha do rodapé ------
   Os dois botões flutuantes — WhatsApp à esquerda, voltar ao topo à
   direita — são fixos no canto de baixo da tela, e é exatamente ali que
   termina o rodapé. A linha de direitos ficava por baixo do WhatsApp e a
   assinatura de quem fez o site por baixo do botão de subir.

   Isto era tratado só abaixo de 620 px. No tablet a linha ainda cabia em
   duas colunas, então a regra não pegava — e as duas pontas ficavam
   escondidas justamente onde a página acaba, que é a última coisa que a
   pessoa lê. Agora vale até 1024 px: a linha vira duas, centrada, e o
   rodapé ganha chão suficiente para terminar acima dos botões. */
@media (max-width:1024px){
  .rodape{padding-bottom:calc(14px + 60px + 20px)}
  .rodape-fim{flex-direction:column;align-items:center;text-align:center;gap:12px}
  .rodape-direitos{flex:none}
  #credito{display:flex;justify-content:center}
}

@media (max-width:620px){
  :root{--topo-h:60px}
  /* No celular a faixa é só a frase, centrada. Os ícones das redes
     saem: com eles, sobravam ~280 px para o texto e a frase terminava
     em reticências. As redes continuam no rodapé, onde cabem inteiras. */
  /* no celular a frase é a única coisa na faixa, então ela pode ficar no
     tamanho do corpo em vez de encolher para 12 px */
  .utilitaria{font-size:var(--t-0)}
  .util-linha{grid-template-columns:1fr;gap:0;min-height:48px}
  .util-redes{display:none}
  .util-frases span{justify-content:center}
  /* empilhado, não lado a lado: "Enviar minha receita" não cabe em meia
     tela de 390 px sem quebrar em três linhas */
  .hero-acoes{flex-direction:column;align-items:stretch}
  .hero-acoes .btn{width:100%}
  .hero-numeros{grid-template-columns:repeat(3,1fr);gap:14px}
  .hero-numeros span{font-size:11.5px}
  .form-orcamento{grid-template-columns:1fr}
  .grade-produtos{grid-template-columns:repeat(2,1fr);gap:10px}
  .selos-grade{grid-template-columns:1fr}
  .rodape-grade{grid-template-columns:1fr}
  .flutuantes{left:14px;bottom:14px;gap:10px}
  .zap-flutua{height:58px;padding:0 17px}
  .zap-flutua .ic{width:26px;height:26px}
  .ao-topo{right:14px;bottom:14px;width:48px;height:48px}
  /* no celular o botão vira alvo de dedo: largura inteira, centrado */
  .loja-topo > .btn{align-self:stretch;width:100%}

  .loja-ferramentas{flex-direction:column;align-items:stretch}
  .busca{max-width:none}
  .fileira{grid-template-columns:1fr}
  .local-item{grid-template-columns:1fr;gap:12px}

  /* Em 390 px o cabeçalho tem quatro peças — logo, carrinho, receita e o
     botão do menu. Com os espaçamentos do desktop a soma passa da largura
     da tela e o menu sai de cena, o que deixa as seções sem navegação no
     celular. Tudo abaixo existe para caber. */
  .topo-linha{gap:8px;flex-wrap:nowrap}
  .topo-acoes{gap:6px}
  .marca{min-width:0}
  /* a logo cresce sem crescer a barra: 32 px de imagem dentro de 60 px
     de altura ainda deixam 14 px de respiro em cima e embaixo */
  .marca img{height:32px}
  .btn-carrinho,.abre-menu{width:42px;height:42px}
  .btn-carrinho .ic,.abre-menu .ic{width:20px;height:20px}
  /* a bolinha do número encolhe junto: no tamanho do computador ela
     cobria a alça da sacola e o ícone virava um quadrado sem sentido */
  .carrinho-n{min-width:18px;height:18px;padding-inline:4px;
    border-width:1.5px;font-size:10px;right:-2px;top:-2px}
  .topo-acoes .btn{padding:12px 15px;gap:7px}
}

/* telas de 320–375 px ainda existem no Cariri; aí o rótulo do botão
   de receita sai e fica só o ícone, que já é um bloco de receituário */
@media (max-width:400px){
  .topo-linha{gap:6px}
  .marca img{height:28px}
  .topo-acoes .btn .rotulo-btn{display:none}
  .topo-acoes .btn{padding:12px}
}

/* ------------------------------------------------------- sem movimento
   Este bloco era `@media (prefers-reduced-motion:reduce)` e valia
   sozinho, direto da preferência do sistema. Agora ele depende da classe
   que o fj.js escreve no <html>, porque quem decide passou a ser a chave
   `RESPEITAR_MENOS_MOVIMENTO` daquele arquivo — e hoje ela está em
   `false`, ou seja, o site anima para todos.

   O bloco continua aqui inteiro, e funcionando, esperando a chave voltar
   para `true`. Não foi apagado de propósito: desfazer a decisão tem de
   ser uma linha, não uma reescrita. */
.sem-movimento{scroll-behavior:auto}
.sem-movimento *,
.sem-movimento *::before,
.sem-movimento *::after{
  animation-duration:.001ms!important;animation-iteration-count:1!important;
  transition-duration:.001ms!important;
}
/* ficam o gradiente e o texto. As cápsulas nem chegam a ser desenhadas
   (o capsulas.js desiste antes), mas a regra fica como segunda tranca. */
.sem-movimento #hero-capsulas,
.sem-movimento .rolar{display:none!important}
.sem-movimento .hero-fundo::after{display:none!important}
.sem-movimento .rev,
.sem-movimento .rev-linha{opacity:1!important;transform:none!important;clip-path:none!important}
.sem-movimento .produto-foto::after{display:none!important}

/* --------------------------------------------------------- impressão -- */
@media print{
  .topo,.utilitaria,.zap-flutua,.gaveta,.veu,.fita,
  #hero-capsulas,.progresso,.rolar{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .secao{padding-block:18pt}
  .rev,.rev-linha{opacity:1!important;transform:none!important;clip-path:none!important}
}