/* =============================================================
   Atacarejo Feira Nova Limoeiro — estilos
   -------------------------------------------------------------
   1. Variáveis (cores da marca)    5. Seções
   2. Base                          6. Lista de compras e flutuantes
   3. Componentes                   7. Animações
   4. Topo e cabeçalho              8. Responsivo, modo leve e acessibilidade
   ============================================================= */

/* ---------- 1. VARIÁVEIS: troque aqui as cores pela paleta do logo ---------- */
:root {
  --verde: #0f7a3d;
  --verde-escuro: #0a5a2c;
  --verde-fundo: #e6f4ea;
  --amarelo: #ffd21f;
  --amarelo-escuro: #e6ae00;
  --amarelo-fundo: #fff4cf;
  --vermelho: #dc2a1e;
  --vermelho-escuro: #a61d13;
  --kraft: #d9a466;
  --creme: #fffaf0;
  --papel: #ffffff;
  --tinta: #17241c;
  --tinta-suave: #4b5b51;
  --linha: #ece3cf;
  --whats: #25d366;
  --whats-escuro: #149c4c;

  --toldo-1: var(--vermelho);
  --toldo-2: #ffffff;

  --f-titulo: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --f-texto: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --f-cartaz: 'Permanent Marker', 'Segoe Print', 'Comic Sans MS', cursive;

  --raio: 22px;
  --raio-p: 14px;
  --sombra: 0 22px 44px -22px rgba(23, 36, 28, .38);
  --sombra-p: 0 8px 20px -10px rgba(23, 36, 28, .3);
  --largura: 1200px;
  --topo: 76px;
  --mola: cubic-bezier(.34, 1.56, .64, 1);
  --suave: cubic-bezier(.22, .61, .36, 1);
  --estrela: polygon(50% 0%, 60.6% 10.4%, 75% 6.7%, 79% 21%, 93.3% 25%, 89.6% 39.4%, 100% 50%, 89.6% 60.6%, 93.3% 75%, 79% 79%, 75% 93.3%, 60.6% 89.6%, 50% 100%, 39.4% 89.6%, 25% 93.3%, 21% 79%, 6.7% 75%, 10.4% 60.6%, 0% 50%, 10.4% 39.4%, 6.7% 25%, 21% 21%, 25% 6.7%, 39.4% 10.4%);
}

/* ---------- 2. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topo) + 24px);
}

body {
  margin: 0;
  font: 400 1rem/1.6 var(--f-texto);
  color: var(--tinta);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}

h1, h2, h3 { font-family: var(--f-titulo); font-weight: 800; line-height: 1.1; margin: 0; }
p { margin: 0 0 1em; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
code { font-size: .9em; background: rgba(0, 0, 0, .06); padding: .1em .35em; border-radius: 6px; }
::selection { background: var(--amarelo); color: var(--tinta); }
:focus-visible { outline: 3px solid var(--amarelo-escuro); outline-offset: 3px; border-radius: 8px; }

.container { width: min(100% - 32px, var(--largura)); margin-inline: auto; }
.container--estreito { --largura: 820px; }
.centro { display: flex; justify-content: center; margin-top: 2.5rem; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }

.pular {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: .7em 1.2em; border-radius: 999px;
  background: var(--tinta); color: #fff; font-weight: 700; text-decoration: none;
}
.pular:focus { top: 12px; }

/* ---------- 3. COMPONENTES ---------- */

/* Botões com "degrau" embaixo, como tecla de caixa registradora */
.btn {
  --degrau: rgba(0, 0, 0, .2);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .85em 1.45em;
  border: 2px solid transparent; border-radius: 999px;
  font: 700 1.02rem/1.1 var(--f-titulo); text-decoration: none; text-align: center;
  box-shadow: 0 4px 0 var(--degrau);
  transition: transform .2s var(--mola), box-shadow .2s, background-color .2s, color .2s;
  cursor: pointer;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--degrau); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--degrau); }
.btn--primario { background: var(--verde); color: #fff; --degrau: var(--verde-escuro); }
.btn--whats { background: var(--whats); color: #05301a; --degrau: var(--whats-escuro); }
.btn--amarelo { background: var(--amarelo); color: var(--tinta); --degrau: var(--amarelo-escuro); }
.btn--branco { background: var(--papel); color: var(--tinta); --degrau: var(--linha); }
.btn--contorno { background: transparent; color: var(--verde); border-color: var(--verde); box-shadow: none; }
.btn--contorno:hover { background: var(--verde-fundo); box-shadow: none; }
.btn--insta {
  color: #fff; --degrau: #8a2a8f;
  background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888);
}
.btn--cheio { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* Plaquinha escrita a mão, como cartaz de preço de feira */
.cartaz {
  display: inline-block;
  margin: 0 0 .8rem;
  font: 400 1.2rem/1.3 var(--f-cartaz);
  color: var(--vermelho);
  transform: rotate(-2deg);
}
.cartaz--amarelo {
  padding: .2em .8em;
  background: var(--amarelo); color: var(--tinta);
  border-radius: 4px 10px 6px 12px;
  box-shadow: 3px 4px 0 rgba(23, 36, 28, .15);
}

/* Marca-texto que "pinta" a palavra quando ela aparece na tela */
.grifo {
  --cor-grifo: var(--amarelo);
  padding-inline: .06em;
  background: linear-gradient(transparent 60%, var(--cor-grifo) 60%, var(--cor-grifo) 90%, transparent 90%) no-repeat 0 0 / 0% 100%;
  transition: background-size .9s var(--suave) .25s;
}
.grifo--verde { --cor-grifo: #a6e3bb; }
.visivel .grifo, .heroi .grifo, html:not(.js) .grifo { background-size: 100% 100%; }

/* Foto com espaço reservado: se o arquivo não existir, aparece a moldura */
.foto {
  position: relative; margin: 0; overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--verde-fundo);
}
.foto::before {
  content: "📷"; position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 2.2rem;
  background: repeating-linear-gradient(45deg, rgba(15, 122, 61, .07) 0 12px, transparent 12px 24px);
}
.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foto--redonda { aspect-ratio: 1; border-radius: 50%; }

/* ---------- Modo rascunho: destaca o que falta preencher ---------- */
.aviso-rascunho { display: none; }
.rascunho .aviso-rascunho {
  display: block; max-width: 680px; margin: 0 auto 1.6rem; padding: .7em 1.1em;
  background: #fff3a8; border: 2px dashed var(--amarelo-escuro); border-radius: 12px;
  font-size: .92rem; text-align: center;
}
.rascunho .pendente {
  color: var(--tinta);
  background: repeating-linear-gradient(-45deg, #fff3a8 0 8px, #ffe782 8px 16px);
  outline: 2px dashed var(--amarelo-escuro); outline-offset: 1px;
  border-radius: 4px; padding: 0 .25em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.rascunho .foto:not(:has(img))::after {
  content: attr(data-foto) "\A" attr(data-arquivo);
  position: absolute; left: 8px; right: 8px; bottom: 8px;
  padding: .45em .6em; border-radius: 8px;
  background: rgba(255, 255, 255, .9); color: var(--verde-escuro);
  font: 600 .72rem/1.35 var(--f-texto); text-align: center; white-space: pre-wrap;
}
.pendente.piscar { animation: piscar 1.2s ease 2; }

/* ---------- 4. TOPO E CABEÇALHO ---------- */
.faixa-topo { background: var(--verde-escuro); color: #dff3e6; font-size: .86rem; }
.faixa-topo__in { display: flex; align-items: center; gap: .5rem 1.5rem; min-height: 38px; }
.faixa-topo p, .faixa-topo__whats { margin: 0; display: flex; align-items: center; gap: .4em; white-space: nowrap; }
.faixa-topo .ic { width: 1.05em; height: 1.05em; }
.faixa-topo__end { margin-left: auto !important; }
.faixa-topo__whats { display: flex; align-items: center; gap: .4em; color: #fff; font-weight: 700; text-decoration: none; }
.faixa-topo__whats:hover { color: var(--amarelo); }

.status { display: inline-flex; align-items: center; gap: .55em; font-weight: 600; }
.status__ponto { position: relative; width: .62em; height: .62em; border-radius: 50%; background: #9fb3a6; flex: none; }
.status.aberto .status__ponto { background: #3ddc75; }
.status.aberto .status__ponto::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: inherit; animation: onda 2s ease-out infinite;
}
.status.fechado .status__ponto { background: #ff6b5b; }

.cabecalho {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 250, 240, .96);
  transition: box-shadow .3s;
}
.cabecalho.rolado { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .45); }
.cabecalho__in { display: flex; align-items: center; gap: 1rem; height: var(--topo); }

/* Toldo listrado de barraca de feira */
.toldo {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 2; height: 8px;
  background: repeating-linear-gradient(90deg, var(--toldo-1) 0 22px, var(--toldo-2) 22px 44px);
  pointer-events: none;
  transform-origin: top;
  animation: desenrolar .9s var(--mola) both;
}
.toldo::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 11px;
  background:
    radial-gradient(circle at 11px 0, var(--toldo-1) 10.5px, transparent 11px) 0 0 / 44px 11px repeat-x,
    radial-gradient(circle at 33px 0, var(--toldo-2) 10.5px, transparent 11px) 0 0 / 44px 11px repeat-x;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .12));
}

.marca { display: flex; align-items: center; flex: none; color: var(--tinta); text-decoration: none; }
.marca__img { height: 58px; width: auto; transition: transform .45s var(--mola); }
.marca:hover .marca__img { transform: rotate(-2deg) scale(1.04); }

.menu { margin-left: auto; }
.menu ul { display: flex; gap: .15rem; margin: 0; padding: 0; list-style: none; }
.menu a {
  position: relative; display: block; padding: .55em .8em; border-radius: 999px;
  font: 700 1rem/1 var(--f-titulo); color: var(--tinta); text-decoration: none; white-space: nowrap;
  transition: background-color .2s, color .2s;
}
.menu a:hover { background: var(--verde-fundo); color: var(--verde); }
.menu a.ativo { color: var(--verde); }
.menu a.ativo::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 6px; height: 6px; margin-left: -3px;
  border-radius: 50%; background: var(--vermelho);
}

.cabecalho__acoes { display: flex; align-items: center; gap: .5rem; }

.btn-lista {
  display: inline-flex; align-items: center; gap: .45rem;
  height: 46px; padding: 0 .55rem 0 1rem;
  border: 0; border-radius: 999px;
  background: var(--verde); color: #fff;
  font: 700 1rem/1 var(--f-titulo); white-space: nowrap;
  box-shadow: 0 4px 0 var(--verde-escuro);
  transition: transform .2s var(--mola), box-shadow .2s;
}
.btn-lista:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--verde-escuro); }
.btn-lista:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--verde-escuro); }
.btn-lista__qtd {
  display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 7px;
  border-radius: 999px; background: var(--amarelo); color: var(--tinta); font-size: .92rem;
}
.btn-lista.pulou { animation: chacoalhar .5s ease; }
.btn-lista.pulou .btn-lista__qtd { animation: pular .5s var(--mola); }

.btn-menu {
  display: none; position: relative; width: 46px; height: 46px; padding: 0;
  border: 0; border-radius: 14px; background: var(--verde-fundo);
}
.btn-menu span, .btn-menu span::before, .btn-menu span::after {
  position: absolute; left: 13px; width: 20px; height: 2.5px; border-radius: 2px;
  background: var(--verde); transition: transform .35s var(--mola), background-color .2s;
}
.btn-menu span { top: 22px; }
.btn-menu span::before, .btn-menu span::after { content: ""; left: 0; }
.btn-menu span::before { top: -7px; }
.btn-menu span::after { top: 7px; }
.menu-aberto .btn-menu span { background: transparent; }
.menu-aberto .btn-menu span::before { transform: translateY(7px) rotate(45deg); }
.menu-aberto .btn-menu span::after { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 5. SEÇÕES ---------- */
.secao { position: relative; padding: clamp(4rem, 8vw, 7rem) 0; }
.secao__topo { max-width: 760px; margin: 0 auto clamp(2rem, 4vw, 3.2rem); text-align: center; }
.secao__titulo { font-size: clamp(2rem, 3vw + 1rem, 3.2rem); margin-bottom: .45em; letter-spacing: -.015em; }
.secao__lead { margin: 0; font-size: 1.12rem; color: var(--tinta-suave); }

/* Seções fora da tela não são desenhadas até chegar perto (economiza CPU) */
.como, .departamentos, .historia, .gondola, .insta, .depoimentos, .faq, .visite {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

/* ===== Herói ===== */
.heroi {
  position: relative; overflow: hidden;
  padding: clamp(3.2rem, 6vw, 5.5rem) 0 clamp(3rem, 5vw, 4.5rem);
  background:
    radial-gradient(900px 480px at 88% 8%, #fff0bd 0, transparent 62%),
    radial-gradient(700px 420px at 0% 100%, #e1f3e6 0, transparent 60%),
    var(--creme);
}
.heroi__in { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 2rem; }
.heroi__titulo { margin: .15em 0 .4em; font-size: clamp(2.7rem, 5vw + .6rem, 4.9rem); line-height: 1; letter-spacing: -.025em; }
.heroi__sub { max-width: 34em; margin-bottom: 1.9rem; font-size: clamp(1.05rem, .4vw + 1rem, 1.22rem); color: var(--tinta-suave); }
.heroi__ctas { display: flex; flex-wrap: wrap; gap: .8rem; }
.heroi__selos { display: flex; flex-wrap: wrap; gap: .55rem 1.3rem; margin: 1.9rem 0 0; padding: 0; list-style: none; font-size: .95rem; font-weight: 600; color: var(--tinta-suave); }
.heroi__selos li { display: flex; align-items: center; gap: .45em; }
.heroi__selos .ic { width: 1.45em; height: 1.45em; padding: 4px; border-radius: 50%; background: var(--verde-fundo); color: var(--verde); }
.heroi__texto > * { animation: subir .8s var(--suave) both; }
.heroi__texto > :nth-child(2) { animation-delay: .08s; }
.heroi__texto > :nth-child(3) { animation-delay: .16s; }
.heroi__texto > :nth-child(4) { animation-delay: .24s; }
.heroi__texto > :nth-child(5) { animation-delay: .32s; }
.heroi .grifo { animation: grifar 1s var(--suave) .7s both; }

.heroi__arte { position: relative; width: 100%; max-width: 540px; margin-inline: auto; aspect-ratio: 1; }
.heroi__sol {
  position: absolute; inset: 7%; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 38% 32%, #ffe783, var(--amarelo) 58%, #ffb703);
  box-shadow: inset -18px -26px 50px rgba(227, 140, 0, .35);
  animation: aparecer .9s var(--mola) both;
}
.heroi__sol::before {
  content: ""; position: absolute; inset: -20%;
  background: repeating-conic-gradient(rgba(255, 255, 255, .22) 0 9deg, transparent 9deg 18deg);
  animation: girar 70s linear infinite;
}
.flutua {
  position: absolute; left: var(--x); top: var(--y); z-index: 1;
  font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1;
  animation: boiar 3.4s ease-in-out var(--d) infinite;
}
/* Logo oficial no centro do sol, flutuando de leve */
.heroi__logo {
  position: absolute; inset: 0; z-index: 2; width: 92%; height: auto; margin: auto;
  filter: drop-shadow(0 16px 18px rgba(130, 70, 0, .25));
  animation: logo-entra .9s var(--mola) .15s both, flutuar 5s ease-in-out 1.1s infinite;
}
.preco--texto { font: 800 1.7rem/1 var(--f-titulo); color: var(--vermelho); }

/* Etiqueta de preço pendurada que balança */
.etiqueta {
  position: absolute; z-index: 4; isolation: isolate;
  display: flex; flex-direction: column; align-items: center;
  padding: 1.9rem 1.1rem .9rem;
  font-family: var(--f-titulo); text-align: center; color: var(--tinta);
  filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .2));
}
.etiqueta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--papel);
  clip-path: polygon(24% 0, 76% 0, 100% 16%, 100% 100%, 0 100%, 0 16%);
}
.etiqueta::after {
  content: ""; position: absolute; left: 50%; top: -46px; z-index: -1;
  width: 2px; height: 62px; margin-left: -1px;
  background: linear-gradient(#8a6a3a, #c29b62);
}
.etiqueta__furo {
  position: absolute; top: 12px; left: 50%; width: 12px; height: 12px; margin-left: -6px;
  border-radius: 50%; background: var(--creme); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .3);
}
.etiqueta small { max-width: 9.5rem; font: 700 .72rem/1.2 var(--f-texto); text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-suave); }
.etiqueta .preco { margin: .15rem 0; color: var(--vermelho); }
.etiqueta--balanca { top: -4%; right: -1%; transform-origin: 50% -46px; animation: balancar 3.6s ease-in-out infinite; }

/* Preço no estilo encarte: R$ pequeno, centavos sobrescritos */
.preco { display: inline-flex; align-items: flex-start; font: 800 1rem/1 var(--f-titulo); white-space: nowrap; }
.preco__rs { margin: .5em .12em 0 0; font-size: .85em; }
.preco__int { font-size: 2.6em; line-height: .88; letter-spacing: -.03em; }
.preco__cent { margin-top: .18em; font-size: 1.1em; }

/* Estrela de oferta (selo de encarte) */
.estouro {
  position: absolute; left: 0; bottom: 9%; z-index: 4; isolation: isolate;
  display: grid; place-items: center;
  width: clamp(112px, 13vw, 152px); aspect-ratio: 1;
  font: 700 clamp(.78rem, 1vw, .95rem)/1.1 var(--f-titulo); text-align: center; color: #fff;
  animation: aparecer .8s var(--mola) .9s both;
}
.estouro::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--vermelho); clip-path: var(--estrela);
  animation: girar 24s linear infinite;
}
.estouro span { transform: rotate(-10deg); }
.estouro b { display: block; font-size: 1.3em; color: var(--amarelo); }

/* ===== Letreiro de LED ===== */
.letreiro {
  position: relative; overflow: hidden;
  padding: .75rem 0;
  background: #101712;
  border-block: 4px solid #26342b;
}
.letreiro::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle, transparent 1.1px, rgba(16, 23, 18, .6) 1.7px) 0 0 / 4px 4px;
}
.letreiro__trilho { display: flex; width: max-content; animation: rolar 45s linear infinite; }
.letreiro:hover .letreiro__trilho { animation-play-state: paused; }
.letreiro__trilho span {
  padding-right: 2.4rem; white-space: nowrap;
  font: 700 1.15rem/1.4 var(--f-titulo); letter-spacing: .05em; text-transform: uppercase;
  color: #ffd23f; text-shadow: 0 0 10px rgba(255, 190, 40, .6);
}
.letreiro__trilho span::after { content: "✦"; margin-left: 2.4rem; color: #ff6a4d; text-shadow: 0 0 10px rgba(255, 90, 60, .7); }

/* ===== Ofertas ===== */
.ofertas {
  background:
    radial-gradient(rgba(227, 166, 0, .16) 1.2px, transparent 1.5px) 0 0 / 22px 22px,
    var(--amarelo-fundo);
}
.ofertas__barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.contagem {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem;
  padding: .55rem .7rem .55rem 1rem; border-radius: 22px;
  background: var(--tinta); color: #fff; font-size: .95rem; font-weight: 600;
}
.contagem > .ic { color: var(--amarelo); }
.contagem__relogio { display: flex; gap: .3rem; }
.contagem__relogio:empty { display: none; }
.contagem__relogio span {
  min-width: 2.7em; padding: .2em .4em; border-radius: 8px;
  background: rgba(255, 255, 255, .12); color: var(--amarelo);
  font: 700 1rem/1.2 var(--f-titulo); text-align: center; font-variant-numeric: tabular-nums;
}
.contagem__relogio small { margin-left: 1px; font-size: .7em; color: #cfd8d2; }
.ofertas__nota { margin: 1.4rem 0 0; font-size: .82rem; text-align: center; color: var(--tinta-suave); }

/* Vitrine: as artes das promoções, no formato do story do Instagram (9:16) */
.vitrine { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.1rem; }
.oferta {
  --fundo-oferta: linear-gradient(150deg, #ff6a3d, var(--vermelho));
  display: flex; flex-direction: column; gap: .6rem; padding: .6rem;
  border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel);
  text-align: left; cursor: zoom-in;
  transition: transform .35s var(--mola), box-shadow .35s;
}
.oferta:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: var(--sombra); }
.oferta--verde { --fundo-oferta: linear-gradient(150deg, #34b36b, var(--verde)); }
.oferta--amarelo { --fundo-oferta: linear-gradient(150deg, #ffe26a, var(--amarelo-escuro)); }
.oferta--azul { --fundo-oferta: linear-gradient(150deg, #3fa9f5, #1565c0); }
.oferta--roxo { --fundo-oferta: linear-gradient(150deg, #b06ad8, #6a2c91); }
.oferta__arte { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 14px; background: var(--fundo-oferta, linear-gradient(150deg, #ff6a3d, var(--vermelho))); }
.oferta__arte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--suave); }
.oferta:hover .oferta__arte img { transform: scale(1.05); }
.oferta__vazia {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  padding: 1rem; color: #fff; text-align: center;
  background: repeating-conic-gradient(from 0deg at 50% 42%, rgba(255, 255, 255, .13) 0 10deg, transparent 10deg 20deg);
}
.oferta__emoji { font-size: 4rem; line-height: 1; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .25)); transition: transform .45s var(--mola); }
.oferta:hover .oferta__emoji { transform: scale(1.12) rotate(-8deg); }
.oferta__cartaz { font: 400 1.35rem/1.15 var(--f-cartaz); text-shadow: 0 2px 0 rgba(0, 0, 0, .2); }
.oferta--amarelo .oferta__cartaz { color: var(--tinta); text-shadow: none; }
.oferta__legenda { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .1rem .35rem .2rem; font: 700 1.05rem/1.2 var(--f-titulo); color: var(--tinta); }
.oferta__legenda .ic { color: var(--tinta-suave); }
.rascunho .oferta__arte:not(:has(img))::after, .rascunho .ilustra[data-arquivo]:not(:has(img))::after, .rascunho .receita__midia:not(:has(img))::after {
  content: attr(data-arquivo); position: absolute; left: 8px; right: 8px; bottom: 8px;
  padding: .35em .5em; border-radius: 8px; background: rgba(255, 255, 255, .9);
  color: var(--verde-escuro); font: 600 .68rem/1.3 var(--f-texto); text-align: center; word-break: break-all;
}

/* Oferta ampliada */
.zoom {
  width: min(540px, calc(100% - 24px)); max-height: calc(100% - 24px); padding: 0; overflow: visible;
  border: 0; border-radius: 22px; background: var(--papel); color: var(--tinta);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6);
}
.zoom[open] { animation: zoom-entra .35s var(--mola); }
.zoom.fechando { animation: zoom-sai .25s ease forwards; }
.zoom::backdrop { background: rgba(10, 20, 14, .78); animation: fundo-entra .3s ease; }
.zoom.fechando::backdrop { animation: fundo-sai .3s ease forwards; }
.zoom__quadro { margin: 0; padding: .7rem; }
.zoom__quadro .oferta__arte { width: min(100%, calc((100dvh - 150px) * .5625)); margin-inline: auto; cursor: default; }
.zoom__quadro .oferta__emoji { font-size: 6rem; }
.zoom__quadro .oferta__cartaz { font-size: 2rem; }
.zoom figcaption { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem .3rem .2rem; }
.zoom figcaption b { font: 800 1.25rem/1.2 var(--f-titulo); }
.zoom__fechar, .zoom__seta {
  position: absolute; z-index: 2; display: grid; place-items: center;
  border: 0; border-radius: 50%; box-shadow: var(--sombra-p);
  transition: transform .25s var(--mola);
}
.zoom__fechar { top: -14px; right: -14px; width: 44px; height: 44px; background: var(--amarelo); color: var(--tinta); }
.zoom__seta { top: 42%; right: -22px; width: 46px; height: 46px; background: var(--papel); color: var(--tinta); }
.zoom__seta--ant { right: auto; left: -22px; }
.zoom__seta--ant .ic { transform: rotate(180deg); }
.zoom__fechar:hover, .zoom__seta:hover { transform: scale(1.1); }

/* ===== Cestas básicas ===== */
.cestas {
  background:
    radial-gradient(rgba(15, 122, 61, .08) 1.2px, transparent 1.5px) 0 0 / 22px 22px,
    var(--verde-fundo);
}
.no-pedido { margin: .8rem 0 0; padding: .45em .8em; border-radius: 10px; background: var(--verde-fundo); color: var(--verde-escuro); font-size: .88rem; font-weight: 700; text-align: center; }
.btn--grande { padding: 1em 1.6em; font-size: 1.15rem; }
.btn--icone { flex: none; width: 46px; height: 46px; padding: 0; }

/* Ilustração de cesta: produtos saindo de um cesto de palha (até chegar a foto real) */
.ilustra {
  --fundo-ilustra: var(--verde-fundo);
  position: relative; display: grid; place-items: end center; aspect-ratio: 5 / 4; overflow: hidden;
  border-radius: 18px; background: radial-gradient(circle at 50% 38%, #fff 0, var(--fundo-ilustra) 72%);
}
.ilustra--amarelo { --fundo-ilustra: var(--amarelo-fundo); }
.ilustra--vermelho { --fundo-ilustra: #fde6e2; }
.ilustra--grande { background: transparent; overflow: visible; }
.ilustra__cesto { position: relative; z-index: 2; width: 78%; margin-bottom: 7%; filter: drop-shadow(0 12px 12px rgba(90, 50, 10, .25)); }
.ilustra__itens { position: absolute; z-index: 1; left: 13%; right: 13%; bottom: 54%; height: 34%; }
.ilustra__itens span {
  position: absolute; bottom: 0; left: calc(var(--i) * (100% / var(--n)));
  font-size: clamp(1.8rem, 3.6vw, 2.7rem); line-height: 1;
  transform: rotate(calc((var(--i) - 2) * 8deg));
}
.ilustra--grande .ilustra__itens span, .ficha .ilustra__itens span { font-size: clamp(2.4rem, 5.5vw, 4.2rem); animation: boiar 3.4s ease-in-out calc(var(--i) * -.6s) infinite; }
.degrau:hover .ilustra__itens span { animation: boiar 3.4s ease-in-out calc(var(--i) * -.6s) infinite; }
.ilustra__rotulo {
  position: absolute; z-index: 3; bottom: 24%; left: 50%;
  padding: .3em .8em; border-radius: 8px; background: var(--creme); color: var(--verde-escuro);
  font: 800 clamp(.85rem, 1.5vw, 1.1rem)/1 var(--f-titulo); white-space: nowrap;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .1); transform: translateX(-50%) rotate(-3deg);
}
.ilustra img { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; object-fit: cover; }
.ilustra--kit { place-items: center; aspect-ratio: auto; background: transparent; }
.ilustra__kit { font-size: 5rem; line-height: 1; }

/* Destaque: a Cesta Básica, produto principal */
.destaque {
  position: relative; display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; gap: clamp(1.5rem, 4vw, 3rem);
  margin-bottom: 2.4rem; padding: clamp(1.4rem, 4vw, 2.6rem); overflow: hidden;
  border: 3px solid #fff; border-radius: 28px;
  background: radial-gradient(circle at 22% 35%, #fff6cf, var(--amarelo) 72%);
  box-shadow: 0 30px 60px -30px rgba(160, 110, 0, .55);
}
.destaque::before {
  content: ""; position: absolute; left: -25%; top: -55%; width: 85%; aspect-ratio: 1; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 255, 255, .25) 0 10deg, transparent 10deg 20deg);
  animation: girar 80s linear infinite;
}
.destaque__arte, .destaque__texto { position: relative; }
.destaque__ver, .degrau__arte { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.destaque__frete {
  position: absolute; top: 2%; left: 2%; z-index: 5; padding: .45em .9em; border-radius: 999px;
  background: var(--verde); color: #fff; font: 800 1rem/1 var(--f-titulo);
  box-shadow: 0 4px 0 var(--verde-escuro); transform: rotate(-6deg);
}
.destaque__selo {
  display: inline-block; padding: .38em .95em; border-radius: 999px;
  background: var(--vermelho); color: #fff; font: 800 .85rem/1 var(--f-titulo); letter-spacing: .05em; text-transform: uppercase;
  box-shadow: 0 3px 0 var(--vermelho-escuro);
}
.destaque h3 { margin: .55rem 0 .3rem; font-size: clamp(2rem, 3vw + 1rem, 3.1rem); }
.destaque__slogan { font-size: 1.15rem; font-weight: 600; }
.destaque__chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 1.4rem; padding: 0; list-style: none; }
.destaque__chips li { padding: .3em .75em; border-radius: 999px; background: rgba(255, 255, 255, .78); font-size: .85rem; font-weight: 600; }
.destaque__chips .destaque__chips-mais { background: var(--tinta); color: #fff; }
.destaque__compra { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; }
.destaque__preco { display: flex; align-items: center; gap: .8rem; }
.destaque__preco .preco { font-size: 1.7rem; color: var(--vermelho); }
.destaque__preco small { font-size: .82rem; font-weight: 700; line-height: 1.35; }
.destaque .btn--grande { animation: chamar 3s ease-in-out 2s infinite; }
.destaque__link {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.1rem; padding: 0;
  border: 0; background: none; color: var(--verde-escuro); font-weight: 800;
  text-decoration: underline; text-underline-offset: 3px;
}
.destaque__receitas { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin: .8rem 0 0; font-size: .9rem; font-weight: 600; }
.destaque__receitas span { white-space: nowrap; }
@keyframes chamar { 0%, 84%, 100% { transform: none; } 88% { transform: scale(1.06); } 92% { transform: scale(.98); } 96% { transform: scale(1.03); } }

/* Benefícios */
.beneficios { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin: 0 0 3.2rem; padding: 0; list-style: none; }
.beneficios li { display: flex; align-items: flex-start; gap: .8rem; padding: 1rem; border: 1px solid var(--linha); border-radius: 16px; background: var(--papel); font-size: .9rem; line-height: 1.4; color: var(--tinta-suave); }
.beneficios span { font-size: 1.7rem; line-height: 1; }
.beneficios b { display: block; margin-bottom: .15rem; font: 700 1.05rem/1.25 var(--f-titulo); color: var(--tinta); }

.cestas__subtitulo { margin: 0 0 1.5rem; font-size: clamp(1.5rem, 2vw + 1rem, 2.1rem); text-align: center; }
.cestas__subtitulo span { display: block; margin-top: .3rem; font: 400 1.1rem/1.3 var(--f-cartaz); color: var(--vermelho); }

/* Escada de tamanhos */
.escada { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem 1.1rem; margin-bottom: 3.5rem; }
.degrau {
  position: relative; display: flex; flex-direction: column; padding: 1rem 1rem 1.2rem;
  border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel); box-shadow: var(--sombra-p);
  transition: transform .35s var(--mola), box-shadow .35s;
}
.degrau:hover { transform: translateY(-6px); box-shadow: var(--sombra); }
.degrau--destaque { border: 3px solid var(--amarelo); }
.degrau__selo {
  position: absolute; top: -14px; left: 50%; z-index: 5; padding: .35em 1em; border-radius: 999px;
  background: var(--vermelho); color: #fff; white-space: nowrap;
  font: 800 .8rem/1 var(--f-titulo); text-transform: uppercase;
  box-shadow: 0 3px 0 var(--vermelho-escuro); transform: translateX(-50%) rotate(-2deg);
}
.degrau__arte { margin-bottom: .9rem; }
.degrau h4 { font: 800 1.35rem/1.15 var(--f-titulo); }
.nivel { display: flex; gap: 3px; margin: .45rem 0 .55rem; }
.nivel i { width: 18px; height: 6px; border-radius: 3px; background: var(--linha); }
.nivel i.cheio { background: var(--verde); }
.degrau__para { flex: 1; margin: 0 0 .5rem; font-size: .9rem; line-height: 1.4; color: var(--tinta-suave); }
.degrau__info { margin: 0 0 .7rem; font-size: .82rem; font-weight: 700; color: var(--tinta-suave); }
.degrau__preco { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .9rem; padding-top: .8rem; border-top: 2px dashed var(--linha); }
.degrau__preco .preco { font-size: .95rem; color: var(--vermelho); }
.degrau__preco small { font-size: .78rem; font-weight: 700; text-align: right; color: var(--verde-escuro); }
.degrau__acoes { display: flex; gap: .5rem; }
.degrau__acoes .btn--branco { flex: 1; padding: .7em 1em; border: 2px solid var(--linha); font-size: .95rem; }

/* Kits e combo */
.cestas__kits { margin-bottom: 3rem; }
.combo-faixa { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.4rem; padding: 1rem 1.3rem; border-radius: 16px; background: var(--tinta); color: #e3ebe5; }
.combo-faixa p { margin: 0; }
.combo-faixa b { color: var(--amarelo); }
.combo-faixa__emoji { font-size: 1.6rem; white-space: nowrap; }
.grade-kits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.kit { display: flex; flex-direction: column; padding: 1.2rem; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel); transition: transform .35s var(--mola), box-shadow .35s; }
.kit:hover { transform: translateY(-4px); box-shadow: var(--sombra-p); }
.kit__emoji { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: .7rem; border-radius: 16px; background: #e5ecfd; font-size: 1.9rem; }
.kit h4 { font: 800 1.25rem/1.15 var(--f-titulo); }
.kit__slogan { flex: 1; margin: .25rem 0 .5rem; font-size: .92rem; color: var(--tinta-suave); }
.kit__rodape .degrau__preco { margin-bottom: .7rem; }

.cestas__empresa {
  display: flex; align-items: center; gap: 1.3rem;
  padding: 1.4rem 1.6rem; border-radius: var(--raio); background: var(--tinta); color: #fff;
}
.cestas__empresa-emoji { font-size: 2.6rem; line-height: 1; }
.cestas__empresa h3 { margin-bottom: .25rem; font-size: 1.3rem; }
.cestas__empresa p { margin: 0; color: #cfd8d2; }
.cestas__empresa .btn { flex: none; margin-left: auto; }
.cestas__avisos { margin: 1.4rem 0 0; font-size: .8rem; text-align: center; color: var(--tinta-suave); }

/* ===== Ficha da cesta ===== */
.ficha {
  width: min(840px, 100%); max-width: 100%; height: min(92vh, 100%); max-height: 100%;
  margin: auto; padding: 0; overflow: hidden;
  border: 0; border-radius: 24px; background: var(--creme); color: var(--tinta);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .6);
}
.ficha[open] { display: flex; flex-direction: column; animation: zoom-entra .35s var(--mola); }
.ficha.fechando { animation: zoom-sai .25s ease forwards; }
.ficha::backdrop { background: rgba(10, 20, 14, .72); animation: fundo-entra .3s ease; }
.ficha.fechando::backdrop { animation: fundo-sai .3s ease forwards; }
.ficha__fechar {
  position: absolute; top: 12px; right: 12px; z-index: 5; display: grid; place-items: center;
  width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--papel); color: var(--tinta); box-shadow: var(--sombra-p);
}
.ficha__rolagem { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.ficha__topo { display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; gap: 1.4rem; padding: 1.6rem 1.6rem 1.4rem; background: var(--verde-fundo); }
.ficha__topo--amarelo { background: var(--amarelo-fundo); }
.ficha__topo--vermelho { background: #fde6e2; }
.ficha__topo .ilustra { background: transparent; }
.ficha__titulo h2 { margin: .5rem 0 .3rem; font-size: clamp(1.8rem, 3vw + .8rem, 2.6rem); }
.ficha__slogan { margin-bottom: .8rem; font-size: 1.1rem; font-weight: 600; }
.ficha__chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.ficha__chips li { padding: .35em .8em; border-radius: 999px; background: rgba(255, 255, 255, .8); font-size: .88rem; font-weight: 700; }
.ficha__bloco { padding: 1.4rem 1.6rem 0; }
.ficha__bloco h3 { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .5rem; font-size: 1.45rem; }
.ficha__bloco h3 small { font-size: .9rem; color: var(--tinta-suave); }
.ficha__para { padding: .8rem 1rem; border-left: 4px solid var(--amarelo); border-radius: 12px; background: var(--papel); }
.ficha__dica { margin-bottom: .8rem; color: var(--tinta-suave); }

.receitas {
  display: grid; grid-auto-flow: column; grid-auto-columns: max(220px, 42%); gap: .9rem;
  margin: 0 -1.6rem; padding: 0 1.6rem .6rem; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory;
}
.receita { scroll-snap-align: start; }
.receita__midia {
  position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; margin-bottom: .5rem;
  border-radius: 16px; background: linear-gradient(150deg, #ffe7a8, #ffb35c);
}
.receita:nth-child(3n+2) .receita__midia { background: linear-gradient(150deg, #dcf2d3, #8fd18a); }
.receita:nth-child(3n) .receita__midia { background: linear-gradient(150deg, #ffe0d6, #ff8f70); }
.receita__emoji { font-size: 3.4rem; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .2)); }
.receita__midia img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.receita b { display: block; font: 700 1rem/1.2 var(--f-titulo); }
.receita small { font-size: .82rem; color: var(--tinta-suave); }

.itens-colunas { columns: 2 300px; column-gap: 2rem; }
.itens-grupo { margin-bottom: 1rem; break-inside: avoid; }
.itens-grupo h4 { margin: .4rem 0; font: 700 1rem/1.2 var(--f-titulo); color: var(--verde-escuro); }
.itens-grupo ul { margin: 0; padding: 0; list-style: none; }
.itens-grupo li { display: flex; align-items: baseline; gap: .6rem; padding: .4rem 0; border-bottom: 1px dashed var(--linha); font-weight: 600; }
.itens-grupo li small { display: block; font-size: .8rem; font-weight: 500; color: var(--tinta-suave); }
.itens-grupo__qtd { flex: none; min-width: 2.3em; padding: .1em .4em; border-radius: 6px; background: var(--amarelo); font: 800 .85rem/1.4 var(--f-titulo); text-align: center; }

.ficha__sugestao, .ficha__combo { margin: 1.2rem 1.6rem 0; padding: 1rem 1.2rem; border-radius: 16px; }
.ficha__sugestao { display: flex; align-items: center; gap: .9rem; border: 2px dashed var(--verde); background: var(--papel); }
.ficha__sugestao > span { font-size: 1.6rem; }
.ficha__sugestao p { flex: 1; margin: 0; }
.ficha__combo { background: var(--tinta); color: #e3ebe5; }
.ficha__combo p { margin: 0; }
.ficha__combo b { color: var(--amarelo); }
.ficha__combo > div { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.combo-opcao {
  display: flex; align-items: center; gap: .5rem; padding: .55rem .9rem;
  border: 2px solid rgba(255, 255, 255, .25); border-radius: 12px; background: rgba(255, 255, 255, .08);
  color: #fff; font-weight: 700; text-align: left; transition: border-color .2s;
}
.combo-opcao small { display: block; margin-left: .3rem; font-weight: 700; color: var(--amarelo); }
.combo-opcao:hover, .combo-opcao.feito { border-color: var(--amarelo); }
.ficha__avisos { margin: 1.2rem 1.6rem 1.6rem; padding-left: 1.1rem; font-size: .82rem; color: var(--tinta-suave); }

.ficha__rodape {
  display: flex; align-items: center; gap: .6rem;
  padding: .8rem 1.2rem calc(.8rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linha); background: var(--papel); box-shadow: 0 -10px 24px -18px rgba(0, 0, 0, .3);
}
.ficha__preco { display: flex; flex-direction: column; margin-right: auto; }
.ficha__preco .preco { font-size: 1.05rem; color: var(--vermelho); }
.ficha__preco small { font-size: .75rem; font-weight: 600; color: var(--tinta-suave); }
.ficha__compartilhar { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border: 2px solid var(--linha); border-radius: 50%; background: var(--papel); color: var(--tinta); }
.ficha__add.feito { background: var(--verde-escuro); }

/* Resumo do pedido */
.lista-resumo p { display: flex; justify-content: space-between; margin: 0 0 .3rem; font-size: .92rem; color: var(--tinta-suave); }
.lista-resumo .lista-resumo__desconto { font-weight: 700; color: var(--verde-escuro); }
.lista-resumo__gratis { color: var(--verde); }
.lista-dica {
  display: flex; justify-content: space-between; gap: .5rem; width: 100%; margin: .4rem 0 .6rem; padding: .55rem .8rem;
  border: 2px dashed var(--amarelo-escuro); border-radius: 12px; background: var(--amarelo-fundo);
  color: var(--tinta); font-size: .85rem; font-weight: 600; text-align: left; text-decoration: none;
}
.lista-dica b { white-space: nowrap; color: var(--verde-escuro); }

/* ===== Como ler a etiqueta ===== */
.leitura { padding: clamp(1.4rem, 3vw, 2.1rem); border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel); box-shadow: var(--sombra); }
.leitura__topo { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.leitura__topo h3 { font-size: 1.5rem; }
.leitura__topo p { margin: 0; color: var(--tinta-suave); }
.leitura__icone { display: grid; place-items: center; flex: none; width: 58px; height: 58px; border-radius: 18px; background: var(--amarelo-fundo); font-size: 1.9rem; }
.etiqueta-gondola {
  overflow: hidden; border: 3px solid var(--tinta); border-radius: 10px; background: #fff;
  box-shadow: 0 6px 0 rgba(23, 36, 28, .12);
  transform: rotate(-1deg); transition: transform .45s var(--mola);
}
.leitura:hover .etiqueta-gondola { transform: rotate(1deg) scale(1.02); }
.etiqueta-gondola__nome { margin: 0; padding: .55rem .9rem; background: var(--tinta); color: #fff; font-size: .95rem; font-weight: 700; }
.etiqueta-gondola__precos { display: grid; grid-template-columns: 1fr 1.25fr; }
.etiqueta-gondola__precos > div { position: relative; display: flex; flex-direction: column; padding: .8rem .9rem 1rem; }
.etiqueta-gondola__atacado { background: var(--amarelo); }
.etiqueta-gondola small { font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-suave); }
.etiqueta-gondola__atacado small { color: var(--tinta); }
.etiqueta-gondola b { margin: .1rem 0; font: 800 clamp(1.6rem, 3vw, 2.2rem)/1.1 var(--f-titulo); }
.etiqueta-gondola__varejo b { color: var(--tinta-suave); }
.etiqueta-gondola__atacado b { color: var(--vermelho); }
.etiqueta-gondola .etiqueta-gondola__min { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; letter-spacing: 0; text-transform: none; }
.marcador { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--vermelho); color: #fff; font: 800 .8rem/1 var(--f-titulo); }
.etiqueta-gondola__precos > div > .marcador { position: absolute; top: .5rem; right: .5rem; }
.leitura__legenda { display: grid; gap: .55rem; margin: 1.4rem 0; padding: 0; list-style: none; }
.leitura__legenda li { display: flex; align-items: center; gap: .6rem; font-size: .97rem; }
.leitura__conta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; margin: 0; padding: .8rem 1rem; border-radius: 14px; background: var(--verde-fundo); }
.leitura__conta span { padding: .25em .75em; border-radius: 999px; background: var(--verde); color: #fff; font-size: .88rem; font-weight: 700; }
.leitura__nota { margin: .6rem 0 0; font-size: .8rem; text-align: right; color: var(--tinta-suave); }


/* ===== Como funciona ===== */
.passos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin: 0 0 clamp(2.5rem, 5vw, 4rem); padding: 0; list-style: none; }
.passo { position: relative; padding: 1.6rem 1.3rem 1.4rem; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel); }
.passo:not(:last-child)::after {
  content: ""; position: absolute; top: 3.1rem; right: -1.2rem; width: 1.2rem;
  border-top: 3px dashed var(--kraft);
}
.passo__num {
  position: relative; display: grid; place-items: center;
  width: 54px; height: 64px; margin-bottom: 1rem; padding-top: 12px;
  background: var(--amarelo); color: var(--tinta);
  font: 800 1.7rem/1 var(--f-titulo);
  clip-path: polygon(24% 0, 76% 0, 100% 18%, 100% 100%, 0 100%, 0 18%);
  transform: rotate(-6deg);
  transition: transform .45s var(--mola);
}
.passo__num::before {
  content: ""; position: absolute; top: 8px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px;
  border-radius: 50%; background: var(--papel);
}
.passo:hover .passo__num { transform: rotate(8deg) scale(1.05); }
.passo h3 { margin-bottom: .45rem; font-size: 1.25rem; }
.passo p { margin: 0; font-size: .97rem; color: var(--tinta-suave); }

.como__grade { display: grid; grid-template-columns: 1.1fr .9fr; align-items: start; gap: 1.5rem; }

.lista-dados input, .lista-dados textarea {
  width: 100%; border: 2px solid var(--linha); border-radius: 14px; background: var(--papel);
  outline: none; transition: border-color .2s, box-shadow .2s;
}
.lista-dados input:focus, .lista-dados textarea:focus { border-color: var(--verde); box-shadow: 0 0 0 4px rgba(15, 122, 61, .15); }

.publico { padding: clamp(1.4rem, 3vw, 2.1rem); border-radius: var(--raio); background: var(--verde); color: #fff; }
.publico h3 { margin-bottom: .5rem; font-size: 1.6rem; }
.publico > p { color: #d3eedc; }
.publico__lista { display: grid; gap: .7rem; margin: 1.2rem 0 1.6rem; padding: 0; list-style: none; }
.publico__lista li {
  display: flex; align-items: center; gap: .9rem; padding: .8rem 1rem;
  border-radius: 16px; background: rgba(255, 255, 255, .08);
  transition: background-color .2s, transform .35s var(--mola);
}
.publico__lista li:hover { background: rgba(255, 255, 255, .14); transform: translateX(6px); }
.publico__lista span { font-size: 1.9rem; line-height: 1; }
.publico__lista div { font-size: .92rem; line-height: 1.35; color: #d3eedc; }
.publico__lista b { display: block; font: 700 1.1rem/1.3 var(--f-titulo); color: #fff; }
.publico .btn--contorno { color: #fff; border-color: rgba(255, 255, 255, .55); }
.publico .btn--contorno:hover { background: rgba(255, 255, 255, .1); }

/* ===== Departamentos ===== */
.departamentos { background: var(--papel); }
.grade-deptos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.depto {
  position: relative; display: block; padding: 1.5rem 1.3rem 1.3rem;
  border-radius: var(--raio); background: var(--cor, var(--verde-fundo));
  color: var(--tinta); text-decoration: none;
  transition: transform .35s var(--mola), box-shadow .35s;
}
.depto:hover { transform: translateY(-6px) rotate(-.8deg); box-shadow: var(--sombra); }
.depto__emoji {
  display: inline-grid; place-items: center; width: 68px; height: 68px; margin-bottom: .9rem;
  border-radius: 50%; background: rgba(255, 255, 255, .75); font-size: 2.3rem;
}
.depto:hover .depto__emoji { animation: sacudir .7s ease; }
.depto h3 { margin-bottom: .3rem; font-size: 1.3rem; }
.depto p { margin: 0; font-size: .93rem; color: var(--tinta-suave); }
.depto::after {
  content: "Ver ofertas →"; display: block; margin-top: .9rem;
  font: 700 .92rem/1 var(--f-titulo); color: var(--verde);
  opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .3s var(--mola);
}
.depto:hover::after, .depto:focus-visible::after { opacity: 1; transform: none; }

/* Fotos dos corredores, de pé como quem anda pela loja */
.corredores { margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.corredores__titulo { margin-bottom: 1.2rem; font-size: clamp(1.3rem, 2.6vw, 1.7rem); text-align: center; }
.corredores__fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; max-width: 900px; margin-inline: auto; }
.corredor { aspect-ratio: 3 / 4; border-radius: var(--raio); box-shadow: var(--sombra-p); }
.corredor img { transition: transform .6s var(--suave); }
.corredor:hover img { transform: scale(1.04); }
.corredor figcaption {
  position: absolute; left: .9rem; bottom: .9rem; z-index: 1; padding: .3em .9em; border-radius: 999px;
  background: var(--amarelo); color: var(--tinta); font: 700 1rem/1.2 var(--f-titulo); box-shadow: var(--sombra-p);
}

/* ===== Nossa história ===== */
.historia { background: var(--creme); }
.historia__intro { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2rem, 5vw, 4rem); margin-bottom: clamp(3rem, 6vw, 5rem); }
.historia__texto .secao__titulo { text-align: left; }
.historia__texto p { font-size: 1.08rem; color: var(--tinta-suave); }

.mural { position: relative; width: 100%; max-width: 580px; margin-inline: auto; aspect-ratio: 1 / .98; }
.polaroid {
  position: absolute; width: 54%; aspect-ratio: 1 / .88; padding: 10px 10px 46px;
  overflow: visible; background: #fff; box-shadow: var(--sombra);
  transform: rotate(var(--r, 0deg));
  transition: transform .45s var(--mola);
}
.polaroid:nth-child(1) { top: 0; left: 0; }
.polaroid:nth-child(2) { top: 4%; right: 0; }
.polaroid:nth-child(3) { bottom: 0; left: 24%; }
.polaroid:hover { z-index: 3; transform: rotate(0deg) scale(1.05); }
.polaroid::before { inset: 10px 10px 46px; }
.polaroid img { inset: 10px 10px 46px; width: calc(100% - 20px); height: calc(100% - 56px); }
.rascunho .polaroid:not(:has(img))::after { left: 18px; right: 18px; bottom: 54px; }
.polaroid .ilustra { position: absolute; inset: 10px 10px 46px; aspect-ratio: auto; border-radius: 0; container-type: inline-size; }
.polaroid .ilustra__cesto { width: 62%; }
.polaroid .ilustra__itens { left: 24%; right: 24%; bottom: 38cqw; height: auto; }
.polaroid .ilustra__itens span { font-size: 12cqw; }
.polaroid figcaption {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12px;
  font: 400 1.02rem/1.2 var(--f-cartaz); color: var(--tinta);
}
/* As fotos de trás têm a legenda no lado que a foto da frente não cobre */
.polaroid:nth-child(1) figcaption { justify-content: flex-start; padding-left: 14px; }
.polaroid:nth-child(2) figcaption { justify-content: flex-end; padding-right: 14px; }
.polaroid figcaption::before {
  content: ""; position: absolute; top: -12px; left: 50%; width: 92px; height: 26px; margin-left: -46px;
  background: rgba(255, 226, 130, .78); transform: rotate(-4deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

.linha-tempo { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin: 0 0 clamp(3rem, 6vw, 5rem); padding: 0; list-style: none; }
.linha-tempo::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: 26px; height: 4px;
  background: repeating-linear-gradient(90deg, var(--kraft) 0 14px, transparent 14px 24px);
}
.marco { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.marco__ano {
  position: relative; z-index: 1; display: grid; place-items: center;
  min-width: 96px; height: 56px; padding: 0 1rem; border-radius: 999px;
  background: var(--verde); color: #fff; font: 800 1.35rem/1 var(--f-titulo);
  box-shadow: 0 0 0 6px var(--creme);
}
.marco--futuro .marco__ano { background: var(--amarelo); color: var(--tinta); }
.marco__ano--texto { font-size: 1.1rem; white-space: nowrap; }

/* Selo comemorativo de 10 anos, como um carimbo */
.selo-10anos {
  position: absolute; top: -18px; right: -6px; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 118px; aspect-ratio: 1; border-radius: 50%;
  background: var(--vermelho); color: #fff; text-align: center;
  box-shadow: 0 0 0 5px var(--creme), 0 0 0 8px var(--vermelho), var(--sombra);
  transform: rotate(12deg); animation: carimbar .7s var(--mola) .3s both;
}
.selo-10anos b { font: 800 2.8rem/.8 var(--f-titulo); color: var(--amarelo); }
.selo-10anos span { font: 800 1rem/1 var(--f-titulo); text-transform: uppercase; letter-spacing: .08em; }
.selo-10anos small { margin-top: 3px; font-size: .68rem; font-weight: 700; opacity: .85; }
@keyframes carimbar { from { opacity: 0; transform: rotate(-20deg) scale(2); } }
.marco__card { margin-top: 1rem; padding: 1.2rem; border: 1px solid var(--linha); border-radius: var(--raio-p); background: var(--papel); }
.marco__card h3 { margin-bottom: .35rem; font-size: 1.15rem; }
.marco__card p { margin: 0; font-size: .93rem; color: var(--tinta-suave); }

.fundadores { max-width: 820px; margin: 0 auto clamp(3rem, 6vw, 5rem); }
.fundador { display: flex; align-items: center; gap: 1.4rem; padding: 1.8rem; box-shadow: var(--sombra-p); border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel); }
.fundador .foto { flex: none; width: 128px; box-shadow: 0 0 0 6px #fff, 0 0 0 9px var(--amarelo); }
.fundador .foto::before { font-size: 1.8rem; }
.fundador h3 { font-size: 1.35rem; }
.fundador__cargo { margin: .2rem 0 .6rem; font: 400 1rem/1.2 var(--f-cartaz); color: var(--vermelho); }
.fundador__texto p:last-child { margin: 0; color: var(--tinta-suave); }

.pilares { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.pilar { padding: 1.8rem 1.5rem; border-radius: var(--raio); background: var(--verde-fundo); text-align: center; transition: transform .35s var(--mola); }
.pilar:nth-child(2) { background: var(--amarelo-fundo); }
.pilar:nth-child(3) { background: #fde6e2; }
.pilar:hover { transform: translateY(-6px); }
.pilar__emoji { display: block; margin-bottom: .6rem; font-size: 2.6rem; line-height: 1; }
.pilar h3 { margin-bottom: .45rem; font-size: 1.45rem; }
.pilar p { margin: 0; color: var(--tinta-suave); }

.numeros {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  margin: 0; padding: clamp(1.6rem, 4vw, 2.4rem); list-style: none;
  border-radius: var(--raio); background: var(--tinta); color: #fff;
}
.numero { text-align: center; }
.numero strong { display: inline-block; margin-bottom: .2rem; font: 800 clamp(2.2rem, 4vw, 3.2rem)/1 var(--f-titulo); color: var(--amarelo); font-variant-numeric: tabular-nums; }
.numero > span { display: block; font-weight: 600; color: #cfd8d2; }
.rascunho .numero .pendente { color: var(--tinta); }

/* ===== Gôndola ===== */
.gondola {
  overflow: hidden; color: #fff;
  background:
    radial-gradient(640px 420px at 82% 40%, rgba(255, 201, 40, .2), transparent 62%),
    linear-gradient(160deg, var(--verde-escuro), #06361b);
}
.gondola__in { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 3rem; }
.gondola .secao__titulo { text-align: left; }
.gondola .secao__lead { margin-bottom: 1.5rem; color: #cfe9d8; }
.gondola__lista { display: grid; gap: .65rem; margin: 0 0 2rem; padding: 0; list-style: none; font-weight: 600; }
.gondola__lista li { display: flex; align-items: center; gap: .65rem; }
.gondola__lista .ic { width: 1.55em; height: 1.55em; padding: 4px; border-radius: 50%; background: var(--amarelo); color: var(--verde-escuro); }

.celular {
  position: relative; width: min(300px, 82%); aspect-ratio: 9 / 18.5; margin-inline: auto; padding: 12px;
  border-radius: 44px; background: #0b0f0d;
  box-shadow: 0 0 0 2px #2c3c32, 0 40px 70px -28px rgba(0, 0, 0, .75);
  transform: rotate(4deg);
}
.celular::before {
  content: ""; position: absolute; top: 20px; left: 50%; z-index: 2;
  width: 84px; height: 22px; margin-left: -42px; border-radius: 999px; background: #0b0f0d;
}
.celular__tela {
  display: flex; flex-direction: column; gap: .55rem; height: 100%; overflow: hidden;
  padding: 50px 14px 14px; border-radius: 33px; background: #f6f4ee; color: var(--tinta);
}
.app__topo { display: flex; align-items: center; justify-content: space-between; }
.app__logo { font: 800 1.3rem/1 var(--f-titulo); letter-spacing: -.02em; color: var(--verde); }
.app__loja { padding: .3em .75em; border-radius: 999px; background: var(--verde-fundo); color: var(--verde); font-size: .7rem; font-weight: 700; }
.app__busca { display: flex; align-items: center; gap: .45rem; padding: .6rem .8rem; border-radius: 12px; background: #fff; color: #8a958e; font-size: .78rem; box-shadow: 0 1px 0 var(--linha); }
.app__rotulo { margin: .35rem 0 0; font: 800 .95rem/1 var(--f-titulo); }
.app__item {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: .5rem;
  padding: .55rem .6rem; border-radius: 14px; background: #fff; box-shadow: 0 1px 0 var(--linha);
  font-size: .8rem;
  animation: app-item 7s var(--suave) infinite both;
  animation-delay: calc(var(--i) * .3s);
}
.app__item > span { font-size: 1.5rem; line-height: 1; }
.app__item p { margin: 0; font-weight: 700; line-height: 1.2; }
.app__item small { display: block; font-size: .64rem; font-weight: 500; color: var(--tinta-suave); }
.app__item b { font: 800 .95rem/1 var(--f-titulo); color: var(--vermelho); }
.app__item i {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--verde); color: #fff; font-style: normal; font-weight: 800;
  animation: app-toque 7s ease infinite;
  animation-delay: calc(1.4s + var(--i) * .8s);
}
.app__carrinho {
  display: flex; align-items: center; gap: .5rem; margin-top: auto; padding: .8rem 1rem;
  border-radius: 16px; background: var(--verde); color: #fff; font-size: .85rem; font-weight: 700;
  animation: app-carrinho 7s var(--mola) infinite;
}
.app__carrinho b { margin-left: auto; }
.app__qtd { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--amarelo); color: var(--tinta); font-size: .75rem; }

/* ===== Instagram ===== */
.insta { background: var(--papel); }
.grade-insta { display: grid; grid-template-columns: repeat(6, 1fr); gap: .8rem; }
.insta-post {
  position: relative; display: block; aspect-ratio: 1; overflow: hidden;
  border-radius: 18px; background: linear-gradient(135deg, #fff0d2, #ffd6e4);
}
.insta-post:nth-child(even) { background: linear-gradient(135deg, #e3f5e8, #fff1c9); }
.insta-post__emoji { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.6rem; transition: transform .45s var(--mola); }
.insta-post:has(.insta-post__rotulo) .insta-post__emoji { bottom: 22%; }
.insta-post__rotulo {
  position: absolute; left: 8px; right: 8px; bottom: 14%;
  font: 800 clamp(.72rem, 1.2vw, .95rem)/1.15 var(--f-titulo); color: var(--verde-escuro); text-align: center;
}
.insta-post img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--suave); }
.insta-post::after {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: rgba(23, 36, 28, .45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E") center / 34px no-repeat;
  transition: opacity .3s;
}
.insta-post:hover::after, .insta-post:focus-visible::after { opacity: 1; }
.insta-post:hover img { transform: scale(1.08); }
.insta-post:hover .insta-post__emoji { transform: scale(1.2) rotate(-8deg); }
.rascunho .insta-post:not(:has(img))::before {
  content: attr(data-arquivo); position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 1;
  padding: .3em; border-radius: 6px; background: rgba(255, 255, 255, .88);
  font: 600 .6rem/1.3 var(--f-texto); color: var(--verde-escuro); text-align: center; word-break: break-all;
}

/* ===== Depoimentos ===== */
.depoimentos { background: var(--creme); }
.grade-depo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.depo {
  position: relative; margin: 0; padding: 1.8rem 1.5rem 1.5rem;
  border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel);
  transition: transform .35s var(--mola), box-shadow .35s;
}
.depo:hover { transform: translateY(-5px) rotate(.5deg); box-shadow: var(--sombra); }
.depo::before { content: "\201C"; position: absolute; top: 0; right: 1.2rem; font: 800 5rem/1 var(--f-titulo); color: var(--amarelo); }
.depo__estrelas { display: flex; gap: 2px; margin-bottom: .8rem; color: #f5b301; }
.depo__estrelas .apagada { color: var(--linha); }
.nota-google {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .25rem .5rem; width: fit-content;
  margin: -.6rem auto 1.8rem; padding: .5rem 1.1rem; border-radius: 999px; background: var(--papel); box-shadow: var(--sombra-p);
  color: var(--tinta); text-decoration: none;
}
.nota-google b { font: 800 1.35rem/1 var(--f-titulo); }
.nota-google .ic { color: #f5b301; }
.nota-google span { font-size: .92rem; color: var(--tinta-suave); text-decoration: underline; text-underline-offset: 3px; }
.depo blockquote { margin: 0 0 1.2rem; font-size: 1.02rem; }
.depo figcaption { display: flex; align-items: center; gap: .75rem; }
.depo__avatar { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--verde-fundo); color: var(--verde); font: 800 1.15rem/1 var(--f-titulo); }
.depo figcaption b { display: block; font: 700 1.05rem/1.2 var(--f-titulo); }
.depo figcaption small { color: var(--tinta-suave); }

/* ===== Trabalhe conosco ===== */
.faixa-cta { padding: 0 0 clamp(4rem, 8vw, 6rem); background: var(--creme); }
.faixa-cta__in {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 1.5rem;
  padding: clamp(1.5rem, 4vw, 2.4rem) clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--raio); background: var(--vermelho); color: #fff;
}
.faixa-cta__in::before { content: ""; position: absolute; top: -70px; right: -50px; width: 240px; height: 240px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.faixa-cta__emoji { font-size: 3rem; line-height: 1; }
.faixa-cta h2 { margin-bottom: .3rem; font-size: clamp(1.4rem, 2vw + .8rem, 2rem); }
.faixa-cta p { margin: 0; color: #ffe1db; }
.faixa-cta .btn { position: relative; flex: none; margin-left: auto; }

/* ===== Perguntas frequentes ===== */
.faq { background: var(--papel); }
.faq__lista { display: grid; gap: .8rem; }
.faq details { border: 1px solid var(--linha); border-radius: 18px; background: var(--creme); transition: background-color .25s, border-color .25s, box-shadow .25s; }
.faq details[open] { border-color: var(--verde); background: var(--papel); box-shadow: var(--sombra-p); }
.faq summary {
  position: relative; padding: 1.15rem 3.6rem 1.15rem 1.3rem;
  font: 700 1.12rem/1.35 var(--f-titulo); list-style: none; cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; top: 50%; right: 1.2rem; width: 32px; height: 32px; margin-top: -16px;
  border-radius: 50%;
  background: var(--verde-fundo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%230f7a3d' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 15px no-repeat;
  transition: transform .4s var(--mola), background-color .25s;
}
.faq details[open] summary::after { transform: rotate(135deg); background-color: var(--amarelo); }
.faq details p { margin: 0; padding: 0 1.3rem 1.2rem; color: var(--tinta-suave); }
.faq details[open] p { animation: subir .45s var(--suave); }

/* ===== Visite / contato ===== */
.visite { background: var(--creme); }
.visite__grade { display: grid; grid-template-columns: .95fr 1.05fr; gap: 1.5rem; }
.info { padding: clamp(1.4rem, 3vw, 2.2rem); border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel); }
.status--grande { margin-bottom: 1.5rem; padding: .55em 1.1em; border-radius: 999px; background: #eef1ee; color: var(--tinta-suave); }
.status--grande.aberto { background: var(--verde-fundo); color: var(--verde-escuro); }
.status--grande.fechado { background: #fde6e2; color: var(--vermelho-escuro); }
.info__lista { display: grid; gap: 1rem; margin: 0 0 1.8rem; padding: 0; list-style: none; }
.info__lista li { display: flex; align-items: flex-start; gap: .9rem; }
.info__lista .ic { width: 44px; height: 44px; padding: 11px; border-radius: 14px; background: var(--verde-fundo); color: var(--verde); }
.info__lista b { display: block; font: 700 1.05rem/1.3 var(--f-titulo); }
.info__lista a { color: var(--verde); font-weight: 600; text-decoration: none; }
.info__lista a:hover { text-decoration: underline; }
.info__sub { display: flex; align-items: center; gap: .5rem; margin-bottom: .7rem; font-size: 1.15rem; }
.info__sub .ic { color: var(--verde); }
.horarios { width: 100%; margin-bottom: 1.8rem; border-collapse: collapse; font-size: .97rem; }
.horarios th, .horarios td { padding: .5rem .7rem; border-bottom: 1px dashed var(--linha); text-align: left; }
.horarios th { font-weight: 600; }
.horarios td { text-align: right; font-variant-numeric: tabular-nums; }
.horarios .fechado-dia { color: var(--vermelho); font-weight: 600; }
.horarios tr.hoje { background: var(--amarelo-fundo); }
.horarios tr.hoje th { font-weight: 800; }
.horarios tr.hoje th::after { content: " · hoje"; font-size: .85em; color: var(--vermelho); }
.pagamentos { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.pagamentos + .info__sub { margin-top: 1.4rem; }
.pagamentos li { padding: .4em .95em; border: 1px solid var(--linha); border-radius: 999px; background: var(--creme); font-size: .9rem; font-weight: 600; }

.mapa { display: flex; flex-direction: column; min-height: 440px; overflow: hidden; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel); }
.mapa__arte {
  position: relative; flex: 1; min-height: 280px; overflow: hidden;
  background:
    radial-gradient(circle at 18% 78%, #cfe6b7 0 46px, transparent 47px),
    radial-gradient(circle at 84% 18%, #cfe6b7 0 34px, transparent 35px),
    radial-gradient(#dbe5cc 1px, transparent 1.4px) 0 0 / 16px 16px,
    #eef3e4;
}
.mapa__rua { position: absolute; background: #fff; box-shadow: 0 0 0 2px #d6dfc6; }
.mapa__rua--h { left: -10%; right: -10%; top: var(--p); height: 14px; transform: rotate(-6deg); }
.mapa__rua--v { top: -10%; bottom: -10%; left: var(--p); width: 14px; transform: rotate(9deg); }
.mapa__rio {
  position: absolute; right: -25%; bottom: -45%; width: 80%; height: 90%;
  border: 20px solid transparent; border-top-color: #bfe0f2; border-radius: 50%;
  transform: rotate(-24deg);
}
.mapa__pino { position: absolute; left: 47%; top: 38%; z-index: 1; display: grid; place-items: center; width: 62px; height: 62px; animation: quicar 1.8s var(--suave) infinite; }
.mapa__pino::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: 50% 50% 50% 0; background: var(--vermelho);
  transform: rotate(-45deg); box-shadow: -4px 6px 12px rgba(0, 0, 0, .25);
}
.mapa__pino img { width: 38px; height: 38px; border-radius: 50%; background: #fff; }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mapa__acoes { display: grid; gap: .8rem; padding: 1.2rem; border-top: 1px solid var(--linha); }
.mapa__links { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }

/* ===== Rodapé ===== */
.rodape { position: relative; padding: clamp(3.5rem, 7vw, 5rem) 0 1.5rem; background: var(--tinta); color: #c9d3cc; }
.rodape::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 12px;
  background: radial-gradient(circle at 11px 12px, var(--tinta) 10.5px, transparent 11px) 0 0 / 22px 12px repeat-x;
}
.rodape__grade { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.rodape h2 { margin-bottom: 1rem; font-size: 1.1rem; color: #fff; }
.rodape ul { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; font-size: .95rem; }
.rodape a { color: #c9d3cc; text-decoration: none; transition: color .2s; }
.rodape a:hover { color: var(--amarelo); }
.rodape__logo { margin: 0 0 1rem; }
.rodape__logo img { height: 70px; width: auto; }
.sociais { display: flex; gap: .6rem; margin-top: 1.2rem; }
.sociais a { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: rgba(255, 255, 255, .08); color: #fff; transition: background-color .2s, transform .35s var(--mola); }
.sociais a:hover { background: var(--verde); color: #fff; transform: translateY(-3px); }
.rodape__base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 3rem; padding: 1.5rem 76px 0 0; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .85rem;
}
.rodape__base p { margin: 0; }
.rodape__topo { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; }

/* ---------- 6. LISTA DE COMPRAS E ELEMENTOS FLUTUANTES ---------- */
[hidden] { display: none !important; }

.gaveta {
  width: min(440px, 100%); max-width: 100%; height: 100%; max-height: 100%;
  margin: 0 0 0 auto; padding: 0; border: 0;
  background: var(--creme); color: var(--tinta);
  box-shadow: -20px 0 60px -20px rgba(0, 0, 0, .45);
}
.gaveta[open] { animation: gaveta-entra .45s var(--suave); }
.gaveta.fechando { animation: gaveta-sai .3s var(--suave) forwards; }
.gaveta::backdrop { background: rgba(10, 20, 14, .55); animation: fundo-entra .3s ease; }
.gaveta.fechando::backdrop { animation: fundo-sai .3s ease forwards; }
.gaveta__corpo { display: flex; flex-direction: column; height: 100%; }
.gaveta__topo { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.2rem; background: var(--verde); color: #fff; }
.gaveta__topo h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.45rem; }
.gaveta__fechar {
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 0; border-radius: 12px; background: rgba(255, 255, 255, .15); color: #fff;
  transition: background-color .2s, transform .35s var(--mola);
}
.gaveta__fechar:hover { background: rgba(255, 255, 255, .25); transform: rotate(90deg); }
.gaveta__rolagem { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 1rem 1.2rem; }

.lista-vazia { padding: 1.4rem 1rem 1rem; text-align: center; color: var(--tinta-suave); }
.lista-vazia span { display: block; margin-bottom: .4rem; font-size: 3.4rem; line-height: 1; animation: boiar 3s ease-in-out infinite; }
.lista-vazia p { margin: 0 0 .3rem; }
.lista-itens { display: grid; gap: .6rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.item {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .35rem .7rem;
  padding: .75rem; border: 1px solid var(--linha); border-radius: 16px; background: var(--papel);
}
.item--novo { animation: entrar-item .35s var(--mola); }
.item__emoji { grid-row: span 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--amarelo-fundo); font-size: 1.8rem; }
.item__nome { font-weight: 700; line-height: 1.25; }
.item__nome small { display: block; font-size: .8rem; font-weight: 500; color: var(--tinta-suave); }
.item__preco { font: 800 1.05rem/1.1 var(--f-titulo); text-align: right; white-space: nowrap; }
.item__preco small { display: block; font: 600 .7rem/1.2 var(--f-texto); color: var(--verde); }
.item__controles { grid-column: 2 / 4; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.qtd { display: flex; align-items: center; overflow: hidden; border: 2px solid var(--linha); border-radius: 999px; background: var(--creme); }
.qtd button { display: grid; place-items: center; width: 36px; height: 32px; border: 0; background: transparent; color: var(--verde); }
.qtd button:hover { background: var(--verde-fundo); }
.qtd output { min-width: 2.2em; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.item__remover { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--tinta-suave); }
.item__remover:hover { background: #fde6e2; color: var(--vermelho); }
.lista-dados { display: grid; gap: .6rem; margin: 0; padding: 1rem; border: 1px dashed #d9cfb5; border-radius: 16px; }
.lista-dados legend { padding: 0 .4rem; font-size: .9rem; font-weight: 700; color: var(--tinta-suave); }
.lista-dados input, .lista-dados textarea { padding: .7rem .9rem; }
.lista-dados textarea { min-height: 64px; resize: vertical; }
.opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.opcoes label { position: relative; cursor: pointer; }
.opcoes input { position: absolute; opacity: 0; pointer-events: none; }
.opcoes span {
  display: block; padding: .65rem .5rem; border: 2px solid var(--linha); border-radius: 12px;
  background: var(--papel); font-size: .9rem; font-weight: 700; text-align: center;
  transition: border-color .2s, background-color .2s;
}
.opcoes input:checked + span { border-color: var(--verde); background: var(--verde-fundo); color: var(--verde-escuro); }
.opcoes input:focus-visible + span { outline: 3px solid var(--amarelo-escuro); outline-offset: 2px; }

.gaveta__rodape {
  padding: 1rem 1.2rem calc(1rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linha); background: var(--papel);
  box-shadow: 0 -10px 24px -18px rgba(0, 0, 0, .3);
}
.lista-total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .8rem; }
.lista-total span { font-weight: 600; color: var(--tinta-suave); }
.lista-total strong { font: 800 1.6rem/1 var(--f-titulo); }
.link-limpar { display: block; margin: .7rem auto 0; border: 0; background: transparent; color: var(--tinta-suave); font-size: .85rem; text-decoration: underline; }
.link-limpar:hover { color: var(--vermelho); }

/* Botão flutuante do WhatsApp */
.fab-whats {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40;
  display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%;
  background: var(--whats); color: #fff;
  box-shadow: 0 10px 24px -6px rgba(18, 140, 74, .65);
  transition: transform .35s var(--mola);
  animation: aparecer .6s var(--mola) 1.2s both;
}
.fab-whats::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--whats); animation: onda 2.6s ease-out 2s infinite; }
.fab-whats .ic { width: 34px; height: 34px; }
.fab-whats:hover { transform: scale(1.08) rotate(-6deg); }
.fab-whats__balao {
  position: absolute; top: 50%; right: calc(100% + 12px);
  padding: .6em 1em; border-radius: 14px 14px 4px 14px;
  background: var(--papel); color: var(--tinta); white-space: nowrap;
  font: 700 .95rem/1 var(--f-titulo); box-shadow: var(--sombra-p);
  opacity: 0; transform: translateY(-50%) scale(.6); transform-origin: right center;
  transition: opacity .3s, transform .45s var(--mola); pointer-events: none;
}
.fab-whats.falar .fab-whats__balao, .fab-whats:hover .fab-whats__balao { opacity: 1; transform: translateY(-50%) scale(1); }

.aviso {
  position: fixed; left: 50%; bottom: 24px; z-index: 60; max-width: calc(100% - 32px);
  padding: .8em 1.25em; border-radius: 999px;
  background: var(--tinta); color: #fff; font-weight: 600; text-align: center;
  box-shadow: var(--sombra); pointer-events: none;
  opacity: 0; visibility: hidden; transform: translate(-50%, 24px);
  transition: opacity .25s, transform .45s var(--mola), visibility 0s .45s;
}
.aviso.mostrar { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }

.selo-rascunho {
  position: fixed; left: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 45;
  display: flex; align-items: center; gap: .4rem; padding: .65em 1em;
  border: 2px dashed var(--amarelo-escuro); border-radius: 999px;
  background: #fff3a8; color: var(--tinta); font: 700 .92rem/1 var(--f-titulo);
  box-shadow: var(--sombra-p);
}
.selo-rascunho:hover { background: var(--amarelo); }

/* Emoji que "voa" até o botão do pedido quando a cesta é adicionada */
.voo { position: fixed; left: 0; top: 0; z-index: 70; font-size: 2.4rem; line-height: 1; pointer-events: none; }

/* ---------- 7. ANIMAÇÕES ---------- */
.js .revelar { opacity: 0; transform: translateY(26px); transition: opacity .6s var(--suave), transform .7s var(--suave); transition-delay: var(--atraso, 0s); }
.js .revelar.visivel { opacity: 1; transform: none; }

/* Animações contínuas ficam pausadas quando estão fora da tela */
.pausado, .pausado *, .pausado::before, .pausado::after, .pausado *::before, .pausado *::after { animation-play-state: paused !important; }

@keyframes subir { from { opacity: 0; transform: translateY(18px); } }
@keyframes aparecer { from { opacity: 0; transform: scale(.6); } }
@keyframes cair { from { opacity: 0; transform: translateY(-50px); } }
@keyframes desenrolar { from { transform: scaleY(0); } }
@keyframes grifar { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
@keyframes boiar { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-12px) rotate(4deg); } }
@keyframes flutuar { 50% { transform: translateY(-10px) rotate(-1deg); } }
@keyframes logo-entra { from { opacity: 0; transform: scale(.7) rotate(-6deg); } }
@keyframes zoom-entra { from { opacity: 0; transform: scale(.85); } }
@keyframes zoom-sai { to { opacity: 0; transform: scale(.9); } }
@keyframes balancar { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes balancar-selo { 0%, 100% { transform: rotate(-12deg); } 25% { transform: rotate(4deg) scale(1.1); } 50% { transform: rotate(-20deg); } 75% { transform: rotate(-6deg); } }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes rolar { to { transform: translateX(-50%); } }
@keyframes onda { from { transform: scale(1); opacity: .55; } to { transform: scale(2); opacity: 0; } }
@keyframes pular { 40% { transform: scale(1.5); } }
@keyframes chacoalhar { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@keyframes sacudir { 20% { transform: rotate(-14deg) scale(1.1); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(3deg); } }
@keyframes entrar-item { from { opacity: 0; transform: translateX(24px); } }
@keyframes pulsar-num { 50% { transform: scale(1.15); } }
@keyframes piscar { 50% { box-shadow: 0 0 0 8px rgba(255, 201, 40, .85); } }
@keyframes quicar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes gaveta-entra { from { transform: translateX(100%); } }
@keyframes gaveta-sai { to { transform: translateX(100%); } }
@keyframes fundo-entra { from { opacity: 0; } }
@keyframes fundo-sai { to { opacity: 0; } }
@keyframes app-item { 0% { opacity: 0; transform: translateY(12px); } 8%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes app-toque { 0%, 20% { transform: scale(1); } 24% { transform: scale(.7); background: var(--amarelo); } 30% { transform: scale(1.15); background: var(--amarelo); } 36%, 100% { transform: scale(1); } }
@keyframes app-carrinho { 0%, 55% { transform: scale(1); } 60% { transform: scale(1.06); } 66%, 100% { transform: scale(1); } }

/* ---------- 8. RESPONSIVO ---------- */
@media (max-width: 1080px) {
  .passos { grid-template-columns: repeat(2, 1fr); }
  .passo::after { display: none; }
  .grade-deptos { grid-template-columns: repeat(3, 1fr); }
  .grade-insta { grid-template-columns: repeat(3, 1fr); }
  .rodape__grade { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1100px) {
  .btn-menu { display: block; }
  .cabecalho__acoes { margin-left: auto; }
  .menu {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 1; margin: 0;
    padding: 1.6rem 16px 1.2rem; background: var(--creme);
    box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .45);
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .25s, transform .3s var(--suave), visibility 0s .3s;
  }
  .menu-aberto .menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .menu ul { flex-direction: column; }
  .menu a { padding: .85em 1rem; border-radius: 14px; font-size: 1.2rem; }
  .menu a.ativo { background: var(--verde-fundo); }
  .menu a.ativo::after { top: 50%; bottom: auto; left: auto; right: 1rem; margin: -3px 0 0; }
}

@media (max-width: 960px) {
  :root { --topo: 68px; }

  .heroi__in { grid-template-columns: 1fr; gap: 1rem; }
  .heroi__texto { text-align: center; }
  .heroi__sub { margin-inline: auto; }
  .heroi__ctas, .heroi__selos { justify-content: center; }
  .heroi__arte { max-width: 430px; margin-top: 2.5rem; }

  .como__grade, .historia__intro, .gondola__in, .visite__grade { grid-template-columns: 1fr; }
  .destaque { grid-template-columns: 1fr; }
  .destaque__arte { max-width: 420px; margin-inline: auto; }
  .escada, .beneficios { grid-template-columns: repeat(2, 1fr); }
  .gondola__texto, .gondola .secao__titulo { text-align: center; }
  .gondola__lista { justify-content: center; justify-items: start; width: fit-content; margin-inline: auto; }
  .historia__texto .secao__titulo { text-align: center; }
  .historia__texto .cartaz { display: table; margin-inline: auto; }
  .linha-tempo { grid-template-columns: 1fr 1fr; row-gap: 2rem; }
  .linha-tempo::before { display: none; }
  .numeros { grid-template-columns: 1fr 1fr; gap: 1.6rem 1rem; }
  .grade-depo {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(85%, 380px);
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .8rem; scrollbar-width: thin;
  }
  .depo { scroll-snap-align: center; }
  .mapa { min-height: 380px; }
}

@media (max-width: 640px) {
  .marca__img { height: 46px; }
  .vitrine { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .oferta { padding: .45rem; border-radius: 16px; }
  .oferta__emoji { font-size: 3rem; }
  .oferta__cartaz { font-size: 1.05rem; }
  .oferta__legenda { font-size: .92rem; }
  .cestas__empresa { flex-direction: column; text-align: center; }
  .escada { grid-template-columns: 1fr 1fr; gap: 1.2rem .7rem; }
  .degrau { padding: .7rem .7rem .9rem; }
  .degrau h4 { font-size: 1.1rem; }
  .degrau__para { display: none; }
  .degrau__preco { flex-direction: column; align-items: flex-start; }
  .degrau__preco small { text-align: left; }
  .degrau__acoes .btn--branco { padding: .6em .4em; font-size: .82rem; }
  .degrau__acoes .btn--icone { width: 40px; height: 40px; }
  .nivel i { width: 12px; }
  .beneficios, .grade-kits { grid-template-columns: 1fr; }
  .combo-faixa { flex-direction: column; text-align: center; }
  .destaque { border-radius: 22px; }
  .destaque__compra .btn { width: 100%; }
  .ficha { height: 100%; border-radius: 0; }
  .ficha__topo { grid-template-columns: 1fr; padding-top: 3.2rem; }
  .ficha__arte { width: min(100%, 280px); margin: 0 auto; }
  .ficha__bloco { padding-inline: 1rem; }
  .receitas { grid-auto-columns: 80%; margin: 0 -1rem; padding: 0 1rem .6rem; }
  .ficha__sugestao, .ficha__combo, .ficha__avisos { margin-inline: 1rem; }
  .ficha__sugestao { flex-wrap: wrap; }
  .ficha__whats span { display: none; }
  .ficha__whats { padding: .85em; }
  .ficha__add { flex: 1; padding: .85em .6em; font-size: .9rem; white-space: nowrap; }
  .ficha__add .ic, .ficha__add-extra { display: none; }
  .ficha__preco .preco { font-size: .9rem; }
  .cestas__empresa .btn { margin: 0; }
  .zoom__seta { right: 6px; }
  .zoom__seta--ant { left: 6px; }
  .zoom__fechar { top: 6px; right: 6px; }
  .zoom figcaption { flex-direction: column; align-items: stretch; text-align: center; }
  .faixa-topo .faixa-topo__end { display: none; }
  .faixa-topo__in { justify-content: space-between; font-size: .8rem; }
  .btn-lista__txt { display: none; }
  .btn-lista { padding: 0 .5rem 0 .75rem; }
  .passos, .pilares { grid-template-columns: 1fr; }
  .grade-deptos { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .depto { padding: 1.1rem 1rem 1rem; }
  .corredores__fotos {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; gap: .8rem;
    margin-inline: -16px; padding: 0 16px .5rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .corredor { scroll-snap-align: center; }
  .depto__emoji { width: 56px; height: 56px; font-size: 1.9rem; }
  .depto h3 { font-size: 1.12rem; }
  .depto p { font-size: .85rem; }
  .polaroid figcaption { font-size: .86rem; }
  .polaroid:nth-child(1) figcaption { padding-left: 12px; }
  .linha-tempo { grid-template-columns: 1fr; gap: 1rem; }
  .linha-tempo::before {
    display: block; top: 0; bottom: 0; left: 46px; right: auto; width: 4px; height: auto;
    background: repeating-linear-gradient(180deg, var(--kraft) 0 14px, transparent 14px 24px);
  }
  .marco { flex-direction: row; align-items: flex-start; gap: 1rem; text-align: left; }
  .marco__card { flex: 1; margin-top: 0; }
  .fundador { flex-direction: column; text-align: center; }
  .grade-insta { gap: .5rem; }
  .faixa-cta__in { flex-direction: column; text-align: center; }
  .faixa-cta .btn { margin: 0; }
  .rodape__grade { grid-template-columns: 1fr; }
  .selo-rascunho span { display: none; }
}

@media (max-width: 560px) {
  .etiqueta { padding: 1.5rem .75rem .7rem; }
  .etiqueta small { font-size: .62rem; }
  .etiqueta .preco { font-size: .85rem; }
  .etiqueta--balanca { top: -5%; right: -2%; }
  .ofertas__barra { flex-direction: column; align-items: stretch; }
  .contagem { justify-content: center; }
}

@media (max-width: 400px) {
  .heroi__ctas .btn { width: 100%; }
}

@media (hover: none) {
  .depto::after { opacity: 1; transform: none; }
}

/* ---------- MODO LEVE (aparelhos simples) E MOVIMENTO REDUZIDO ---------- */
.lite .flutua, .lite .heroi__logo, .lite .ilustra__itens span, .lite .destaque::before, .lite .destaque .btn--grande, .lite .heroi__sol::before, .lite .estouro::before, .lite .etiqueta--balanca,
.lite .fab-whats::before, .lite .mapa__pino, .lite .app__item, .lite .app__item i, .lite .app__carrinho,
.lite .lista-vazia span, .lite .status__ponto::after { animation: none !important; }
.lite .toldo::after, .lite .etiqueta { filter: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0s !important;
  }
  .app__item, .letreiro__trilho { animation: none !important; }
  .letreiro__trilho { flex-wrap: wrap; justify-content: center; width: auto; row-gap: .3rem; }
  .js .revelar { opacity: 1; transform: none; }
}