/* =========================================================
   Super Tudo - Embalagens & Festas
   Sistema visual unico. Nao criar cores fora daqui.

   CORES DA MARCA (tiradas do arquivo da logo)
     preto #040507 · amarelo #EAF910 · vermelho #F00F22
     azul #2926B3 · branco #EFFEFE

   REGRAS DE USO (medidas, nao chutadas)
     amarelo sobre preto ....... 17.5:1  pode ser texto
     amarelo sobre creme ....... 1.05:1  NUNCA como texto claro,
                                          so como fundo com texto preto
     azul sobre preto .......... 1.96:1  NUNCA texto nem traco fino;
                                          so bloco grande com texto branco
     vermelho sobre preto ...... 4.66:1  pode ser texto
     vermelho sobre creme ...... 3.95:1  so titulo grande ou grafismo

   TRAVA DE ACAO
     --acao (verde WhatsApp fechado, 5.4:1 com branco) em TODOS os
     botoes de acao. O verde vivo --zap so aparece como icone sobre preto,
     porque com texto branco ele da 1.98:1 e fica ilegivel.

   TRAVA DE FORMA
     Botoes e chips ....... 999px (pilula)
     Cards e paineis ...... 18px
     Campos ............... 12px

   O site tem tema unico: preto na moldura, creme no conteudo.
   Nao ha alternancia claro/escuro, porque a marca e preta.
   ========================================================= */

:root {
  --preto: #040507;
  --preto-2: #101217;
  --amarelo: #eaf910;
  --vermelho: #f00f22;
  --azul: #2926b3;
  --branco: #effefe;

  --creme: #f6f3ea;
  --creme-2: #eae6da;
  --tinta: #121317;
  --tinta-media: #4e4b45;
  --tinta-fraca: #63605a;
  --borda: #dcd7c9;

  --sobre-preto: #f3f4f6;
  --sobre-preto-media: #a8aab4;

  --acao: #0f7b3d;
  --acao-forte: #0c6532;
  --acao-suave: #e4f2e9;
  --acao-contorno: #b6dcc6;
  --zap: #25d366;
  --aviso: #c0161f;

  --r-botao: 999px;
  --r-card: 18px;
  --r-campo: 12px;

  --sombra: 0 2px 6px rgba(4, 5, 7, .06), 0 14px 34px -18px rgba(4, 5, 7, .3);
  --sombra-alta: 0 4px 10px rgba(4, 5, 7, .18), 0 30px 60px -24px rgba(4, 5, 7, .55);

  --largura: 1320px;
  --curva: cubic-bezier(.16, 1, .3, 1);
  --topo-altura: 78px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--creme);
  color: var(--tinta);
  font-family: Archivo, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.03em; line-height: 1.02; }
h1 { font-size: clamp(2.1rem, 1.2rem + 3.4vw, 4.2rem); text-transform: uppercase; }
h2 { font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.8rem); }
h3 { font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); letter-spacing: -.02em; }
p { margin: 0; }

.env { width: 100%; max-width: var(--largura); margin-inline: auto; padding-inline: 20px; }
.secao { padding-block: clamp(52px, 7vw, 96px); }
.secao--fina { padding-block: clamp(36px, 4.5vw, 60px); }

.faixa-escura { background: var(--preto); color: var(--sobre-preto); }
.faixa-escura h1, .faixa-escura h2, .faixa-escura h3 { color: var(--branco); }

.rotulo {
  font-size: .74rem; font-weight: 800; letter-spacing: .2em;
  text-transform: uppercase; color: var(--tinta-fraca); margin-bottom: 12px;
}
.faixa-escura .rotulo { color: var(--amarelo); }

.texto { color: var(--tinta-media); max-width: 60ch; font-size: 1.04rem; }
.faixa-escura .texto { color: var(--sobre-preto-media); }

/* traco amarelo curto, assinatura da marca */
.risco { display: block; width: 62px; height: 5px; background: var(--amarelo); border-radius: 999px; margin-top: 20px; }

/* ---------- Botoes ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  white-space: nowrap; padding: 14px 26px;
  border-radius: var(--r-botao); border: 2px solid transparent;
  font: inherit; font-weight: 800; font-size: .97rem; letter-spacing: -.01em;
  cursor: pointer; text-decoration: none;
  transition: background-color .2s var(--curva), border-color .2s var(--curva),
              color .2s var(--curva), transform .12s var(--curva);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 3px; }

.btn--acao { background: var(--acao); color: #fff; }
.btn--acao:hover { background: var(--acao-forte); }

.btn--amarelo { background: var(--amarelo); color: var(--preto); }
.btn--amarelo:hover { background: #d9e70c; }

.btn--contorno { background: transparent; color: var(--tinta); border-color: var(--borda); }
.btn--contorno:hover { border-color: var(--tinta); }

.faixa-escura .btn--contorno, .capa .btn--contorno, .chamada .btn--contorno {
  color: var(--branco); border-color: rgba(243, 244, 246, .35);
}
.faixa-escura .btn--contorno:hover, .capa .btn--contorno:hover, .chamada .btn--contorno:hover {
  border-color: var(--amarelo); color: var(--amarelo);
}

.btn--pequeno { padding: 10px 18px; font-size: .87rem; border-width: 1px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn svg { flex: none; }
.btn[data-escolhido="true"] { background: var(--acao); border-color: var(--acao); color: #fff; }

/* ---------- Topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 40;
  background: var(--preto); color: var(--sobre-preto);
  border-bottom: 1px solid rgba(243, 244, 246, .1);
}
.topo__linha { min-height: var(--topo-altura); display: flex; align-items: center; gap: 22px; }

.marca { display: flex; align-items: center; gap: 13px; text-decoration: none; flex: none; }
.marca img { width: 54px; height: 54px; border-radius: 999px; background: var(--preto); border: 2px solid var(--branco); }
.marca__nome { font-weight: 800; font-size: 1.02rem; line-height: 1.12; letter-spacing: -.02em; color: var(--branco); max-width: 12ch; display: block; }
.marca__slogan { display: block; font-size: .84rem; font-weight: 600; font-style: italic; color: var(--amarelo); margin-top: 2px; }

.menu { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.menu a {
  padding: 8px 14px; border-radius: var(--r-botao); text-decoration: none;
  font-weight: 700; font-size: .96rem; color: var(--sobre-preto-media);
  transition: color .18s var(--curva);
}
.menu a:hover { color: var(--branco); }
.menu a[aria-current="page"] { color: var(--amarelo); }
.menu a[aria-current="page"]::after {
  content: ""; display: block; height: 3px; border-radius: 999px; background: var(--amarelo); margin-top: 4px;
}

.sociais { display: flex; gap: 8px; flex: none; }
.sociais a {
  width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid rgba(243, 244, 246, .2);
  color: var(--branco); transition: all .18s var(--curva);
}
.sociais a:hover { background: var(--branco); color: var(--preto); border-color: var(--branco); }

.menu-btn {
  display: none; margin-left: auto; width: 46px; height: 46px;
  align-items: center; justify-content: center; background: transparent;
  border: 1px solid rgba(243, 244, 246, .25); border-radius: 14px;
  color: var(--branco); cursor: pointer;
}

@media (max-width: 1000px) {
  .menu-btn { display: inline-flex; }
  .topo__linha > .sociais { display: none; }
  .menu {
    position: absolute; top: 100%; left: 0; right: 0;
    display: none; flex-direction: column; align-items: stretch; gap: 2px;
    padding: 10px 20px 22px; background: var(--preto); border-bottom: 3px solid var(--amarelo);
  }
  .menu[data-aberto="true"] { display: flex; }
  .menu a { padding: 14px; font-size: 1.05rem; }
  .menu a[aria-current="page"]::after { display: none; }
}

/* ---------- Capa ---------- */
.capa { background: var(--preto); color: var(--sobre-preto); position: relative; overflow: hidden; }
.capa__grade { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: stretch; min-height: clamp(360px, 46vh, 460px); }
.capa__texto {
  padding: clamp(28px, 3.4vw, 46px) clamp(20px, 3vw, 40px) clamp(28px, 3.4vw, 46px)
           max(20px, calc((100vw - var(--largura)) / 2 + 20px));
  display: flex; flex-direction: column; justify-content: center;
}
.capa__eyebrow {
  font-size: clamp(.9rem, .8rem + .4vw, 1.15rem); font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--amarelo); margin-bottom: 6px;
}
.capa h1 { color: var(--branco); }
.capa h1 em { font-style: normal; color: var(--amarelo); display: block; }
.capa__texto .texto { margin-top: 16px; color: var(--sobre-preto); font-size: 1.1rem; max-width: 26ch; }

/* duas camadas: o palco amarelo atras e a tela branca na frente.
   A diferenca entre os dois recortes vira a cunha amarela da diagonal. */
.capa__palco { position: relative; background: var(--amarelo); overflow: hidden; }
.capa__tela { position: absolute; inset: 0; background: var(--branco); }
@media (min-width: 881px) {
  /* Quina em V apontando para a esquerda, com o vertice na metade da altura.
     As duas formas tem inclinacoes diferentes de proposito: por isso a faixa
     amarela nasce larga em cima e embaixo e afina ate o encontro no meio. */
  /* medidas em px, nao em %: assim a quina mantem o mesmo angulo e a
     mesma espessura em qualquer largura de tela. Com % a forma abria
     demais em monitor grande. */
  .capa__palco { clip-path: polygon(118px 0, 100% 0, 100% 100%, 118px 100%, 0 50%); }
  .capa__tela  { clip-path: polygon(168px 0, 100% 0, 100% 100%, 168px 100%, 25px 50%); }
}
.capa__slide {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 0; opacity: 0; transition: opacity .7s var(--curva);
}
.capa__slide[data-ativo="true"] { opacity: 1; }
/* foto de ambiente preenche a area toda; o assunto fica no centro,
   que e o que sobra quando a tela e estreita */
.capa__slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
@media (prefers-reduced-motion: reduce) { .capa__slide { transition: none; } }

.capa__pontos { display: flex; gap: 10px; margin-top: 20px; }
.capa__pontos button {
  width: 13px; height: 13px; border-radius: 999px; padding: 0; cursor: pointer;
  border: 0; background: rgba(243, 244, 246, .32); transition: background-color .2s var(--curva);
}
.capa__pontos button[aria-current="true"] { background: var(--amarelo); }
.capa__pontos button:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 3px; }

@media (max-width: 880px) {
  .capa__grade { grid-template-columns: 1fr; min-height: 0; }
  .capa__palco { order: -1; aspect-ratio: 5 / 4; max-height: 44vh; }
  .capa__texto { padding: 30px 20px 38px; }
  .capa__texto .texto { max-width: 34ch; }
}

/* ---------- Atalhos ---------- */
.atalhos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.atalho {
  position: relative; display: grid; grid-template-columns: 38% 1fr;
  background: var(--preto-2); color: var(--sobre-preto);
  border-radius: var(--r-card); overflow: hidden; text-decoration: none;
  min-height: 232px; box-shadow: var(--sombra);
}
.atalho__foto { position: relative; overflow: hidden; background: var(--preto); }
/* --foco desloca o corte na horizontal. O arco colorido cobre a direita
   da foto, entao cada cartao escolhe onde o assunto deve ficar. */
.atalho__foto img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--foco, 50%) center;
  transition: transform .5s var(--curva);
}
.atalho:hover .atalho__foto img { transform: scale(1.06); }
/* o arco colorido que separa a foto do texto */
.atalho__foto::after {
  content: ""; position: absolute; top: -14%; right: -24px; bottom: -14%; width: 48px;
  background: var(--cor-arco, var(--amarelo)); border-radius: 50%;
}
.atalho__corpo { padding: 26px 24px; display: flex; flex-direction: column; justify-content: center; }
.atalho__corpo .icone { color: var(--branco); margin-bottom: 12px; }
.atalho h3 { color: var(--branco); margin-bottom: 8px; }
.atalho p { font-size: .94rem; color: var(--sobre-preto-media); max-width: 30ch; }
.atalho__seta {
  /* preto sobre o azul da marca da 1.96:1 e some, entao cada cartao
     diz qual cor a seta usa por dentro do circulo */
  margin-top: 18px; width: 46px; height: 46px; border-radius: 999px;
  background: var(--cor-arco, var(--amarelo)); color: var(--cor-seta, var(--preto));
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .25s var(--curva);
}
.atalho:hover .atalho__seta { transform: translateX(5px); }
.atalho:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 4px; }

/* quando nao ha foto da loja, o lado da imagem vira bloco de cor da marca */
.atalho__foto--cor { background: var(--cor-arco, var(--amarelo)); display: flex; align-items: center; justify-content: center; }
.atalho__foto--cor svg { color: var(--cor-seta, var(--preto)); opacity: .92; }
.atalho__foto--cor::after { display: none; }

@media (max-width: 980px) { .atalhos { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .atalho { grid-template-columns: 42% 1fr; min-height: 168px; }
  .atalho__corpo { padding: 18px 16px; }
  .atalho p { display: none; }
  .atalho__seta { width: 40px; height: 40px; margin-top: 12px; }
}

/* ---------- Faixa "E muito mais" ---------- */
.faixa-mais {
  display: grid; grid-template-columns: 1fr 1fr auto; align-items: center;
  background: var(--creme-2); border-radius: var(--r-card); overflow: hidden;
}
.faixa-mais__item { display: flex; align-items: center; gap: 16px; padding: 24px 28px; }
.faixa-mais__item svg { flex: none; color: var(--preto); }
.faixa-mais__item strong { display: block; font-size: 1.02rem; font-weight: 800; }
.faixa-mais__item span { font-size: .95rem; color: var(--tinta-media); }
.faixa-mais__selo {
  align-self: stretch; display: flex; align-items: center; gap: 12px;
  padding: 24px 40px 24px 52px; background: var(--amarelo); color: var(--preto);
  font-weight: 800; font-size: 1.12rem; white-space: nowrap; position: relative;
}
.faixa-mais__selo::before {
  content: ""; position: absolute; left: -30px; top: 0; bottom: 0; width: 64px;
  background: var(--amarelo); transform: skewX(-14deg);
}
.faixa-mais__selo > * { position: relative; }
@media (max-width: 880px) {
  .faixa-mais { grid-template-columns: 1fr; }
  .faixa-mais__item { border-bottom: 1px solid var(--borda); }
  .faixa-mais__selo { padding: 20px 28px; justify-content: center; }
  .faixa-mais__selo::before { display: none; }
}

/* ---------- Passos ---------- */
.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: rgba(243, 244, 246, .14); border-radius: var(--r-card); overflow: hidden; }
.passo { background: var(--preto); padding: 30px 26px 34px; }
.passo b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 999px;
  background: var(--amarelo); color: var(--preto); font-size: 1rem; margin-bottom: 16px;
}
.passo h3 { color: var(--branco); margin-bottom: 7px; }
.passo p { font-size: .95rem; color: var(--sobre-preto-media); }
@media (max-width: 760px) { .passos { grid-template-columns: 1fr; } }

/* ---------- Busca e filtros ---------- */
.catalogo__topo { display: grid; gap: 16px; margin-bottom: 24px; }
.busca { position: relative; }
.busca input {
  width: 100%; padding: 15px 18px 15px 48px; border-radius: var(--r-campo);
  border: 1px solid var(--borda); background: #fff; color: var(--tinta);
  font: inherit; font-size: 1rem;
}
.busca input::placeholder { color: var(--tinta-fraca); }
.busca input:focus-visible { outline: 3px solid var(--acao); outline-offset: 1px; border-color: var(--acao); }
.busca svg { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); color: var(--tinta-fraca); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 9px 17px; border-radius: var(--r-botao); border: 1px solid var(--borda);
  background: #fff; color: var(--tinta-media); font: inherit; font-weight: 700;
  font-size: .9rem; cursor: pointer; transition: all .18s var(--curva);
}
.chip:hover { color: var(--tinta); border-color: var(--tinta-fraca); }
.chip[aria-pressed="true"] { background: var(--preto); border-color: var(--preto); color: var(--amarelo); }
.chip:focus-visible { outline: 3px solid var(--acao); outline-offset: 2px; }
.contagem { font-size: .9rem; color: var(--tinta-media); font-weight: 600; }

/* ---------- Cartao de produto ---------- */
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px; }
@media (max-width: 460px) { .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .produto__pe { padding: 12px 13px 14px; }
  .produto h3 { font-size: .88rem; } }
.produto {
  background: #fff; border: 1px solid var(--borda); border-radius: var(--r-card);
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .2s var(--curva), box-shadow .2s var(--curva);
}
.produto__foto {
  position: relative; background: #fff; aspect-ratio: 4 / 3;
  overflow: hidden; border-bottom: 1px solid var(--borda);
}
.produto__foto img {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: auto; height: auto; max-width: calc(100% - 18px); max-height: calc(100% - 18px);
  object-fit: contain;
}
.produto__semfoto {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--creme); color: var(--tinta-fraca);
}
.produto__pe { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.produto:hover { border-color: var(--preto); box-shadow: var(--sombra); }
.produto[data-escolhido="true"] { border-color: var(--acao); }
.produto[data-escolhido="true"] .produto__pe { background: var(--acao-suave); }
.produto__sub { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-fraca); }
.produto h3 { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.28; }
.produto__uni { font-size: .88rem; color: var(--tinta-media); }
.produto__aviso { font-size: .74rem; font-weight: 700; color: var(--aviso); margin-top: 2px; }
.produto__acao { margin-top: auto; padding-top: 10px; }
.produto .btn { width: 100%; }

.passador { display: flex; align-items: center; gap: 10px; }
.passador button {
  width: 38px; height: 38px; flex: none; border-radius: 999px;
  border: 1px solid var(--acao-contorno); background: #fff; color: var(--acao);
  font: inherit; font-size: 1.15rem; font-weight: 800; line-height: 1; cursor: pointer;
}
.passador button:hover { background: var(--acao-suave); }
.passador button:focus-visible { outline: 3px solid var(--acao); outline-offset: 2px; }
.passador span { flex: 1; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- Cartao com foto (paineis e extras) ---------- */
.grade-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.cartao {
  background: #fff; border: 1px solid var(--borda); border-radius: var(--r-card);
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .2s var(--curva), box-shadow .2s var(--curva);
}
.cartao:hover { border-color: var(--preto); box-shadow: var(--sombra); }
.cartao[data-escolhido="true"] { border-color: var(--acao); }
.cartao__foto {
  position: relative; background: #fff; aspect-ratio: 1 / 1;
  overflow: hidden; border-bottom: 1px solid var(--borda);
}
.cartao__foto img {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: auto; height: auto; max-width: calc(100% - 20px); max-height: calc(100% - 20px);
  object-fit: contain;
}
.cartao__pe { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.cartao__pe h3 { font-size: .97rem; font-weight: 700; line-height: 1.25; }
.cartao__nota { font-size: .82rem; color: var(--tinta-media); margin-top: 3px; line-height: 1.35; }
.cartao[data-escolhido="true"] .cartao__pe { background: var(--acao-suave); }
.cartao__acao { margin-top: auto; padding-top: 12px; }
.cartao__acao .btn { width: 100%; }
.cartao__acao .passador { margin-top: 0; }
.cartao__acao .passador button { width: 34px; height: 34px; }
@media (max-width: 420px) {
  .grade-fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cartao__pe { padding: 11px 12px 13px; }
  .cartao__pe h3 { font-size: .87rem; }
}

/* ---------- Estados ---------- */
.vazio { text-align: center; padding: 68px 24px; border: 1px dashed var(--borda); border-radius: var(--r-card); color: var(--tinta-media); }
.vazio h3 { margin-bottom: 8px; color: var(--tinta); }
.esqueleto { background: #fff; border: 1px solid var(--borda); border-radius: var(--r-card); padding: 18px; min-height: 176px; }
.esqueleto i { display: block; height: 13px; border-radius: 6px; background: var(--creme-2); margin-bottom: 10px; }
.esqueleto i:nth-child(1) { width: 45%; }
.esqueleto i:nth-child(2) { width: 92%; height: 18px; }
.esqueleto i:nth-child(3) { width: 65%; height: 18px; }
.esqueleto i:nth-child(4) { width: 40%; margin-top: 18px; }
@media (prefers-reduced-motion: no-preference) {
  .esqueleto i { animation: pulsa 1.4s ease-in-out infinite; }
  @keyframes pulsa { 50% { opacity: .5; } }
}
.erro { border: 2px solid var(--vermelho); background: #fff; border-radius: var(--r-card); padding: 24px; }
.erro h3 { margin-bottom: 6px; }
.erro p { color: var(--tinta-media); font-size: .95rem; }

/* ---------- Barra fixa do WhatsApp (celular) ---------- */
.zap-barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  background: var(--preto); padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(243, 244, 246, .12);
  transition: transform .35s var(--curva);
}
.zap-barra .btn { width: 100%; max-width: 460px; margin-inline: auto; display: flex; }
.zap-barra[data-escondida="true"] { transform: translateY(105%); }
@media (prefers-reduced-motion: reduce) { .zap-barra { transition: none; } }
@media (min-width: 881px) { .zap-barra { display: none; } }

/* ---------- Barra e gaveta de orcamento ---------- */
.barra {
  position: fixed; left: 50%; bottom: 18px; z-index: 50;
  transform: translateX(-50%) translateY(150%);
  width: min(560px, calc(100% - 28px));
  display: flex; align-items: center; gap: 14px;
  padding: 11px 11px 11px 22px; border-radius: var(--r-botao);
  background: var(--preto); color: var(--sobre-preto);
  border: 1px solid rgba(243, 244, 246, .18); box-shadow: var(--sombra-alta);
  transition: transform .4s var(--curva);
}
.barra[data-visivel="true"] { transform: translateX(-50%) translateY(0); }
.barra strong { font-size: .97rem; color: var(--branco); }
.barra small { display: block; color: var(--sobre-preto-media); font-size: .8rem; }
.barra .btn { margin-left: auto; }
@media (prefers-reduced-motion: reduce) { .barra { transition: none; } }

.tampa { position: fixed; inset: 0; z-index: 60; background: rgba(4, 5, 7, .62); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .3s var(--curva); }
.tampa[data-aberto="true"] { opacity: 1; pointer-events: auto; }

.gaveta {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  width: min(460px, 100%); background: var(--creme);
  display: flex; flex-direction: column; transform: translateX(100%);
  transition: transform .38s var(--curva); box-shadow: var(--sombra-alta);
}
.gaveta[data-aberto="true"] { transform: none; }
@media (prefers-reduced-motion: reduce) { .tampa, .gaveta { transition: none; } }
.gaveta__topo { display: flex; align-items: center; gap: 12px; padding: 20px 20px 16px; background: var(--preto); color: var(--branco); }
.gaveta__topo h2 { font-size: 1.28rem; color: var(--branco); }
.gaveta__fechar {
  margin-left: auto; width: 42px; height: 42px; border-radius: 999px;
  border: 1px solid rgba(243, 244, 246, .3); background: transparent;
  color: var(--branco); cursor: pointer; font-size: 1.1rem; line-height: 1;
}
.gaveta__fechar:hover { background: rgba(243, 244, 246, .12); }
.gaveta__corpo { flex: 1; overflow-y: auto; padding: 16px 20px 20px; }
.gaveta__rodape { border-top: 1px solid var(--borda); padding: 16px 20px calc(20px + env(safe-area-inset-bottom)); background: #fff; }
.gaveta__rodape .btn { width: 100%; }
.gaveta__nota { font-size: .82rem; color: var(--tinta-media); margin-top: 11px; text-align: center; }

.linha { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--borda); }
.linha:last-child { border-bottom: 0; }
.linha__txt { flex: 1; min-width: 0; }
.linha__txt strong { display: block; font-size: .95rem; font-weight: 700; line-height: 1.3; }
.linha__txt span { font-size: .84rem; color: var(--tinta-media); }
.linha__qtd { display: flex; align-items: center; gap: 8px; flex: none; }
.linha__qtd button { width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--borda); background: #fff; color: var(--tinta); font: inherit; font-weight: 800; line-height: 1; cursor: pointer; }
.linha__qtd button:hover { border-color: var(--tinta); }
.linha__qtd span { min-width: 22px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.linha__tira { flex: none; background: none; border: 0; padding: 4px; color: var(--tinta-fraca); cursor: pointer; }
.linha__tira:hover { color: var(--vermelho); }

.campo { display: grid; gap: 7px; margin-top: 18px; }
.campo label { font-size: .88rem; font-weight: 800; }
.campo input, .campo textarea {
  padding: 12px 14px; border-radius: var(--r-campo); border: 1px solid var(--borda);
  background: #fff; color: var(--tinta); font: inherit; font-size: .96rem;
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--tinta-fraca); }
.campo input:focus-visible, .campo textarea:focus-visible { outline: 3px solid var(--acao); outline-offset: 1px; border-color: var(--acao); }
.campo small { font-size: .8rem; color: var(--tinta-media); }
.campo textarea { resize: vertical; min-height: 78px; }

/* ---------- Servicos em destaque ---------- */
.servico {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(24px, 4vw, 52px); align-items: center;
  padding-block: clamp(36px, 4.5vw, 60px); border-top: 1px solid var(--borda);
}
.servico:first-of-type { border-top: 0; padding-top: 0; }
.servico--invertido .servico__foto { order: 2; }
.servico__foto {
  border-radius: var(--r-card); overflow: hidden; background: #fff;
  border: 1px solid var(--borda); display: flex; align-items: center; justify-content: center; padding: 10px;
}
.servico__foto img { width: auto; max-width: 100%; max-height: 440px; object-fit: contain; }
.servico h3 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); margin-bottom: 10px; }
.servico__lista { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 9px; }
.servico__lista li { display: flex; gap: 10px; align-items: flex-start; font-size: .96rem; color: var(--tinta-media); }
.servico__lista svg { flex: none; margin-top: 3px; color: var(--acao); }
.servico .btn { margin-top: 24px; }
@media (max-width: 880px) {
  .servico { grid-template-columns: 1fr; }
  .servico--invertido .servico__foto { order: 0; }
}

/* ---------- Regras ---------- */
.regras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.regra { background: #fff; border: 1px solid var(--borda); border-top: 5px solid var(--amarelo); border-radius: var(--r-card); padding: 24px; }
.regra h3 { font-size: 1.02rem; margin-bottom: 8px; }
.regra p { font-size: .93rem; color: var(--tinta-media); }
@media (max-width: 880px) { .regras { grid-template-columns: 1fr; } }

/* ---------- Contato ---------- */
.contato { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.dados { display: grid; gap: 1px; background: var(--borda); border: 1px solid var(--borda); border-radius: var(--r-card); overflow: hidden; }
.dado { background: #fff; padding: 22px 24px; }
.dado dt { font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-fraca); margin-bottom: 6px; }
.dado dd { margin: 0; font-size: 1.04rem; font-weight: 600; line-height: 1.45; }
.dado dd a { color: var(--acao); font-weight: 800; text-decoration: none; }
.dado dd a:hover { text-decoration: underline; }
.mapa { border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--borda); background: var(--creme-2); min-height: 420px; }
.mapa iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; }
@media (max-width: 880px) { .contato { grid-template-columns: 1fr; } }

.horario { border-collapse: collapse; width: 100%; max-width: 300px; }
.horario th, .horario td { text-align: left; padding: 5px 0; font-size: .96rem; font-weight: 600; vertical-align: top; }
.horario th { color: var(--tinta-media); padding-right: 18px; }
.horario td { color: var(--tinta); text-align: right; font-variant-numeric: tabular-nums; }

.selo-aberto { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px 5px 10px; border-radius: var(--r-botao); font-size: .82rem; font-weight: 800; margin-bottom: 12px; border: 1px solid transparent; }
.selo-aberto::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: currentColor; flex: none; }
.selo-aberto[data-estado="aberto"] { background: var(--acao-suave); border-color: var(--acao-contorno); color: var(--acao); }
.selo-aberto[data-estado="fechado"] { background: var(--creme-2); border-color: var(--borda); color: var(--tinta-media); }

/* ---------- Chamada final ---------- */
.chamada { background: var(--preto); border-radius: var(--r-card); padding: clamp(40px, 5vw, 64px) clamp(24px, 5vw, 64px); color: var(--sobre-preto); position: relative; overflow: hidden; text-align: center; }
.chamada::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: linear-gradient(90deg, var(--amarelo) 0 33.3%, var(--vermelho) 33.3% 66.6%, var(--azul) 66.6% 100%);
}
.chamada h2 { color: var(--branco); margin-bottom: 14px; }
.chamada p { color: var(--sobre-preto-media); max-width: 46ch; margin-inline: auto; }
.chamada .btn { margin-top: 26px; }

/* ---------- Rodape ---------- */
.rodape { background: var(--preto); color: var(--sobre-preto-media); padding-block: 52px 34px; }
.rodape__grade { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 34px; }
.rodape p { color: var(--sobre-preto-media); font-size: .93rem; margin-top: 16px; max-width: 34ch; }
.rodape h4 { margin: 0 0 12px; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--amarelo); }
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.rodape ul a { text-decoration: none; font-size: .95rem; color: var(--sobre-preto-media); }
.rodape ul a:hover { color: var(--branco); }
.rodape__fim {
  margin-top: 38px; padding-top: 22px; border-top: 1px solid rgba(243, 244, 246, .14);
  font-size: .85rem; color: var(--sobre-preto-media);
  display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between;
}
@media (max-width: 760px) { .rodape__grade { grid-template-columns: 1fr; gap: 28px; } }

/* espaco para a barra fixa nao tapar o rodape no celular */
@media (max-width: 880px) { body { padding-bottom: 86px; } }

/* ---------- Revelacao no scroll ----------
   O conteudo so fica escondido quando o JS confirma que consegue
   revelar de novo (classe .anima no <html>). Sem isso, o texto
   aparece normalmente: nenhuma secao pode depender de JavaScript
   para existir na tela. */
@media (prefers-reduced-motion: no-preference) {
  .anima .revela { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--curva), transform .6s var(--curva); }
  .anima .revela[data-visivel="true"] { opacity: 1; transform: none; }
}

/* ---------- Utilidades ---------- */
.oculto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pular { position: absolute; left: -9999px; background: var(--amarelo); color: var(--preto); padding: 12px 20px; border-radius: var(--r-botao); font-weight: 800; z-index: 100; }
.pular:focus { left: 20px; top: 12px; }

.tema { padding: 7px 14px; border-radius: var(--r-botao); border: 1px solid var(--borda); background: #fff; color: var(--tinta); font: inherit; font-weight: 700; font-size: .86rem; cursor: pointer; transition: all .18s var(--curva); }
.tema:hover { border-color: var(--acao); color: var(--acao); }
.tema[data-escolhido="true"] { background: var(--acao); border-color: var(--acao); color: #fff; }


/* ---------- Vitrine de temas (home) ---------- */
.vitrine__topo {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 24px;
}
.vitrine {
  display: flex; gap: 14px; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
  padding: 4px max(20px, calc((100vw - var(--largura)) / 2 + 20px)) 18px;
}
.vitrine__card {
  scroll-snap-align: start; flex: 0 0 172px;
  background: var(--preto-2); border: 1px solid rgba(243, 244, 246, .14);
  border-radius: var(--r-card); overflow: hidden; text-decoration: none;
  display: flex; flex-direction: column;
  transition: border-color .2s var(--curva), transform .2s var(--curva);
}
.vitrine__card:hover { border-color: var(--amarelo); transform: translateY(-3px); }
.vitrine__card:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 3px; }
.vitrine__foto {
  position: relative; display: block; background: #fff;
  aspect-ratio: 1 / 1; overflow: hidden;
}
.vitrine__foto img {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: auto; height: auto; max-width: calc(100% - 16px); max-height: calc(100% - 16px);
  object-fit: contain;
}
.vitrine__nome {
  display: block; padding: 12px 14px 14px;
  font-size: .92rem; font-weight: 700; color: var(--branco); line-height: 1.25;
}
.vitrine__dica { font-size: .92rem; color: var(--sobre-preto-media); margin-top: 6px; }
@media (max-width: 520px) { .vitrine__card { flex-basis: 148px; } }

.rodape__cnpj { line-height: 1.5; }