@font-face {
  font-family:Fredoka;
  src:url('assets/fredoka.woff2') format('woff2');
  font-weight:300 700;
  font-display:swap
}


@font-face {
  font-family:Chicle;
  src:url('assets/chicle.woff2') format('woff2');
  font-weight:400;
  font-display:block
}


@font-face {
  font-family:Figtree;
  src:url('assets/figtree.woff2') format('woff2');
  font-weight:300 900;
  font-display:swap
}


@font-face {
  font-family:Yellowtail;
  src:url('assets/yellowtail.woff2') format('woff2');
  font-weight:400;
  font-display:swap
}


/* Paleta tirada das peças da loja (tabela de preços, painel e logo). */
:root {
  --choco-deep:#3e170a;
  --choco:#6a2610;
  --brown:#763714;
  --cream:#fcefdf;
  --cream-warm:#f9dfc5;
  --sand:#efd9c2;
  --dough:#e2be80;
  --ink:#3e170a;
  --line:#e2c6a8;
  --line-dark:rgba(252,239,223,.24);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --display:Fredoka,'Arial Rounded MT Bold',sans-serif;
  --body:Figtree,Arial,sans-serif;
  --hh:96px
}


* {
  box-sizing:border-box
}

/* Espaço da barra de rolagem sempre reservado: na abertura a rolagem
   trava (Lenis) e a barra sumia, alargando a página e fazendo o título
   pular duas vezes (deslocamento de layout medido em 0,25 a 0,33). */
html {
  scrollbar-gutter:stable;
  scroll-behavior:smooth;
  scroll-padding-top:30px;
  scrollbar-color:var(--brown) var(--sand);
  -webkit-text-size-adjust:100%
}

body {
  overflow-x:clip;
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.5
}

::selection {
  background:var(--brown);
  color:var(--cream)
}

a {
  color:inherit;
  text-underline-offset:5px
}

a:focus-visible {
  outline:3px solid #d9822b;
  outline-offset:5px
}

img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover
}

figure {
  margin:0
}

h1,h2,h3,p {
  margin:0
}

h1,h2,h3 {
  font-family:var(--display);
  font-weight:600;
  text-wrap:balance
}

h1,h2 {
  letter-spacing:-.02em;
  line-height:1.02
}

em {
  font-family:Yellowtail,cursive;
  font-weight:400;
  font-style:normal;
  letter-spacing:0
}

h2 {
  font-size:clamp(44px,5vw,72px);
  color:var(--brown)
}

b {
  font-weight:600
}

.brand {
  display:block
}

.brand img {
  height:auto;
  object-fit:contain
}

.header {
  position:absolute;
  z-index:6;
  top:0;
  left:0;
  right:0;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  height:var(--hh);
  padding:0 5%;
  color:var(--cream)
}

.header .brand {
  width:76px
}

/* Links do topo em texto simples, maiúsculas e espaçados. */
nav {
  display:flex;
  align-items:center;
  gap:clamp(36px,5vw,72px);
  font-family:var(--body);
  font-size:13px;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase
}

nav a {
  text-decoration:none;
  text-underline-offset:6px
}

.menu-contato a:hover {
  text-decoration:underline
}

.menu-contato {
  display:none
}

.menu-toggle {
  display:none
}

/* Hero: "QUE TAL COOKIES!" em Chicle, letra retrô parecida com o letreiro da
   logo, com as linhas arqueadas formando um círculo como a logo; os itens
   orbitam em volta (orbita.js). Fundo chocolate com luz quente no centro.
   O cabeçalho fica por cima; o hero cabe inteiro na primeira tela. */
.hero {
  --c:min(30vw,47svh);
  position:relative;
  height:100svh;
  min-height:420px;
  background:radial-gradient(ellipse 60% 55% at 50% 47%,#70301a 0%,#55220f 38%,#3e170a 68%,#2a0e04 100%);
  color:var(--cream);
  overflow:hidden;
  --wave:clamp(26px,3.4vw,48px);
  -webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - var(--wave) + 1px) no-repeat,url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201440%2060%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200h1440v34c-60%200-90-22-150-22-70%200-80%2040-130%2040-46%200-52-30-110-30-70%200-90%2026-160%2026-60%200-70-32-150-32-66%200-80%2020-150%2020-60%200-90-24-150-24-70%200-90%2030-160%2030-60%200-80-18-130-18-52%200-84%2010-160%2010z%22/%3E%3C/svg%3E") bottom/100% var(--wave) no-repeat;
  mask:linear-gradient(#000,#000) top/100% calc(100% - var(--wave) + 1px) no-repeat,url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201440%2060%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200h1440v34c-60%200-90-22-150-22-70%200-80%2040-130%2040-46%200-52-30-110-30-70%200-90%2026-160%2026-60%200-70-32-150-32-66%200-80%2020-150%2020-60%200-90-24-150-24-70%200-90%2030-160%2030-60%200-80-18-130-18-52%200-84%2010-160%2010z%22/%3E%3C/svg%3E") bottom/100% var(--wave) no-repeat
}

.hero-heading {
  position:absolute;
  z-index:1;
  left:50%;
  top:49%;
  margin:0;
  --h:min(21vw,30svh);
  display:flex;
  flex-direction:column;
  align-items:center;
  font-family:Chicle,var(--display);
  font-weight:400;
  font-size:var(--h);
  line-height:1;
  letter-spacing:.01em;
  white-space:nowrap;
  translate:-50% -50%;
  rotate:-4deg;
  text-shadow:0 14px 34px rgba(20,5,1,.45)
}

/* Cada letra sobe ou desce um pouco: QUE TAL em arco para cima, COOKIES! em
   arco para baixo, lembrando o círculo da logo. */
.hl {
  display:flex
}

.hl span {
  display:inline-block;
  translate:0 var(--y);
  rotate:var(--r)
}

.hl-space {
  width:.24em
}

.hero-cookie {
  position:absolute;
  z-index:3;
  left:50%;
  top:49%;
  width:var(--c);
  height:auto;
  translate:-50% -50%;
  filter:drop-shadow(0 24px 28px rgba(15,4,1,.5))
}

.floats {
  position:absolute;
  inset:0;
  pointer-events:none
}

.float {
  position:absolute;
  z-index:2;
  left:calc(var(--x) * 1%);
  top:calc(var(--y) * 1%);
  --w:calc(var(--s) * var(--fs,1.3));
  width:var(--w);
  height:auto;
  margin:calc(var(--w) / -2) 0 0 calc(var(--w) / -2);
  filter:drop-shadow(0 12px 14px rgba(15,4,1,.45));
  transform:rotate(var(--r))
}

/* Com orbita.js, a posição vem do JavaScript; os de trás passam atrás do título. */
.orbit .float {
  left:0;
  top:0;
  animation:none;
  transform:scale(0);
  transition:none;
  will-change:transform
}

.orbit .float.is-back {
  z-index:0;
  filter:brightness(.78) drop-shadow(0 10px 12px rgba(15,4,1,.4))
}

.hero-lead {
  position:absolute;
  z-index:4;
  left:5%;
  bottom:calc(var(--wave) + max(14px,2svh));
  max-width:min(440px,40vw);
  font-family:var(--display);
  font-size:min(38px,5.6svh,4.4vw);
  font-weight:600;
  line-height:1.02;
  text-transform:uppercase
}

.hero-scroll {
  position:absolute;
  z-index:4;
  left:50%;
  bottom:calc(var(--wave) + 2px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  translate:-50% 0;
  font-size:11px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--cream-warm)
}

/* Seta fina e discreta, descendo devagar como convite para rolar. */
.hero-scroll svg {
  width:10px;
  height:min(34px,5svh);
  fill:none;
  stroke:currentColor;
  stroke-width:1.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  animation:nudge 2.2s cubic-bezier(.45,0,.55,1) infinite
}

@keyframes nudge {
  0%,100% {
    translate:0 -3px;
    opacity:.55
  }

  50% {
    translate:0 4px;
    opacity:1
  }
}

.button:active {
  transform:scale(.97)
}

/* Abertura: tela de carregamento (hero.js). Sem JS, nada disso aparece. */
.loader {
  display:none
}

.js .loader {
  display:block;
  position:fixed;
  inset:0;
  z-index:50;
  background:var(--choco-deep);
  color:var(--cream)
}

.loader-count {
  position:absolute;
  top:max(28px,7svh);
  left:0;
  right:0;
  text-align:center;
  font-family:var(--display);
  font-weight:600;
  font-size:min(84px,11svh,16vw);
  line-height:1;
  font-variant-numeric:tabular-nums
}

.loader-cookie {
  position:absolute;
  left:50%;
  top:50%;
  width:min(66vw,47svh);
  translate:-50% -50%
}

.loader-cookie img {
  width:100%;
  height:auto
}

.loader-fill,.loader-photo {
  position:absolute;
  inset:0
}

.loader-fill {
  clip-path:inset(100% 0 0 0)
}

.loader-photo {
  opacity:0
}

.js .header .brand img {
  opacity:0
}

.js .pagina-cardapio .header .brand img {
  opacity:1
}

.js .hero-cookie {
  visibility:hidden
}

/* Camada temporária do voo do cookie até a logo. */
.fly {
  position:fixed;
  z-index:60;
  pointer-events:none
}

.fly-y,.fly img {
  width:100%;
  height:100%
}

.fly img {
  object-fit:contain;
  filter:drop-shadow(0 12px 18px rgba(15,4,1,.45))
}

.fly img.bitten {
  -webkit-mask:radial-gradient(circle at 84% 9%,transparent 15%,#000 15.6%),radial-gradient(circle at 97% 27%,transparent 12%,#000 12.6%),radial-gradient(circle at 68% 1%,transparent 11%,#000 11.6%);
  -webkit-mask-composite:source-in;
  mask:radial-gradient(circle at 84% 9%,transparent 15%,#000 15.6%),radial-gradient(circle at 97% 27%,transparent 12%,#000 12.6%),radial-gradient(circle at 68% 1%,transparent 11%,#000 11.6%);
  mask-composite:intersect
}

.crumb {
  position:absolute;
  border-radius:40%;
  background:var(--dough)
}

.crumb:nth-child(odd) {
  background:var(--choco)
}

.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height:52px;
  padding:14px 30px;
  background:var(--brown);
  color:var(--cream);
  text-decoration:none;
  font-family:var(--display);
  font-weight:600;
  font-size:17px;
  border:0;
  border-radius:999px;
  transition:background .18s,color .18s,transform .16s var(--ease-out)
}

.button:hover {
  background:var(--choco)
}

.button-light {
  background:var(--cream);
  color:var(--choco-deep)
}

.button-light:hover {
  background:var(--sand)
}

/* Duas cachoeiras de chocolate cruzadas, com frases correndo como as fitas do
   bar-topas.ch. A de chocolate ao leite passa por cima da de chocolate branco e
   desce em direção à mancha da seção de sabores. Movimento em fitas.js. */
.cachoeira {
  position:relative;
  z-index:2;
  height:clamp(230px,24vw,340px);
  overflow-x:clip;
  overflow-y:visible
}

.fita {
  --g:clamp(18px,2vw,34px);
  position:absolute;
  left:-12%;
  width:124%;
  top:54%;
  height:clamp(54px,5.4vw,80px);
  display:flex;
  align-items:center;
  translate:0 -50%
}

.fita::before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:7px;
  height:3px;
  border-radius:3px;
  background:rgba(255,255,255,.22)
}

.fita::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:calc(100% - 1px);
  height:clamp(28px,2.6vw,40px);
  background-repeat:repeat-x;
  background-size:auto 100%
}

.fita-chocolate {
  z-index:2;
  rotate:6deg;
  background:linear-gradient(180deg,#8a3d1a 0%,#6a2610 24%,#58200d 70%,#4a1a0a 100%);
  color:var(--cream);
  filter:drop-shadow(0 16px 22px rgba(62,23,10,.28))
}

.fita-chocolate::after {
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20160%2040%22%3E%3Cpath%20fill%3D%22%234a1a0a%22%20d%3D%22M0%200h160v9c-9%200-12%203-13%209-1%208-4%2010-7%204-2-6-6-11-16-11-12%200-16%203-18%2015-2%2013-8%2014-10%203-2-12-8-17-22-17-10%200-12%203-13%207-1%204-5%205-6%200-1-5-5-7-15-7-10%200-14%204-16%2016-2%2013-8%2014-10%203C11%2015%207%209%200%209z%22/%3E%3C/svg%3E")
}

.fita-branca {
  z-index:1;
  rotate:-5deg;
  background:linear-gradient(180deg,#fffaf1 0%,#f4e6cf 30%,#e9d4b4 100%);
  color:var(--choco)
}

.fita-branca::after {
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20160%2040%22%3E%3Cpath%20fill%3D%22%23e9d4b4%22%20d%3D%22M0%200h160v9c-9%200-12%203-13%209-1%208-4%2010-7%204-2-6-6-11-16-11-12%200-16%203-18%2015-2%2013-8%2014-10%203-2-12-8-17-22-17-10%200-12%203-13%207-1%204-5%205-6%200-1-5-5-7-15-7-10%200-14%204-16%2016-2%2013-8%2014-10%203C11%2015%207%209%200%209z%22/%3E%3C/svg%3E")
}

.fita-track {
  display:flex;
  align-items:center;
  white-space:nowrap;
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(18px,2.1vw,30px);
  text-transform:uppercase;
  animation:fita 46s linear infinite;
  will-change:transform
}

.fita-track>* {
  flex:none;
  margin-right:var(--g)
}

.fita-track img {
  width:.8em;
  height:.8em
}

/* Chocolate ao leite corre para a direita, ladeira abaixo; o branco, para a esquerda. */
.fita-chocolate .fita-track {
  animation-direction:reverse
}

@keyframes fita {
  to {
    transform:translateX(-50%)
  }
}

.fita-gotas i {
  position:absolute;
  top:calc(100% + clamp(18px,1.8vw,28px));
  width:9px;
  height:12px;
  border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:#4a1a0a;
  opacity:0;
  animation:pinga 3.2s cubic-bezier(.55,0,.9,.5) infinite
}

.fita-branca .fita-gotas i {
  background:#e9d4b4
}

.fita-gotas i:nth-child(1) {
  left:14%;
  animation-delay:-.4s
}

.fita-gotas i:nth-child(2) {
  left:33%;
  animation-delay:-1.9s
}

.fita-gotas i:nth-child(3) {
  left:52%;
  animation-delay:-1.1s
}

.fita-gotas i:nth-child(4) {
  left:70%;
  animation-delay:-2.6s
}

.fita-gotas i:nth-child(5) {
  left:87%;
  animation-delay:-.2s
}

@keyframes pinga {
  0% {
    opacity:0;
    transform:translateY(-8px) scale(.3)
  }

  18% {
    opacity:1;
    transform:translateY(0) scale(1)
  }

  100% {
    opacity:0;
    transform:translateY(110px) scale(.75)
  }
}


/* Cada seção cabe numa tela; passagens sem corte reto nem linha. */
.section {
  position:relative;
  padding:0 5%
}

.blob {
  position:absolute;
  width:clamp(110px,13vw,200px);
  fill:var(--choco);
  pointer-events:none
}

/* O contato termina nas ondas que abrem o rodapé; a mancha saiu. */
.blob-contact {
  display:none;
  bottom:0;
  right:0;
  transform:scaleX(-1)
}

/* Sabores (sabores.js): o cookie que desce do hero (viajante) pousa no
   palco e troca junto com o sabor da vez. */
.sabores {
  position:relative;
  overflow-x:clip;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  align-items:center;
  gap:6%;
  height:100svh;
  min-height:0;
  padding:clamp(40px,8svh,90px) 6% clamp(40px,8svh,90px) 5%
}

.sabor-palco {
  position:relative;
  justify-self:start;
  display:grid;
  place-items:center;
  width:min(50vw,94svh);
  aspect-ratio:1;
  margin-left:-17vw
}

.sabor-palco::before {
  content:"";
  position:absolute;
  inset:4%;
  border-radius:50%;
  background:radial-gradient(circle at 50% 55%,rgba(118,55,20,.16),transparent 68%)
}

.sabor-cookie {
  position:relative;
  width:88%;
  height:auto;
  aspect-ratio:1;
  object-fit:contain;
  filter:drop-shadow(0 28px 34px rgba(62,23,10,.35))
}

.js .sabor-cookie {
  visibility:hidden
}

/* Troca no palco (sabores.js): a cópia mordida fica por cima do cookie novo,
   no mesmo lugar, e as migalhas caem de cada mordida. Sem sombra própria:
   a máscara cortaria a sombra num quadrado; a do cookie de trás basta. */
.sabor-palco>img {
  grid-area:1/1
}

.sabor-mordida {
  position:relative;
  width:88%;
  height:auto;
  aspect-ratio:1;
  object-fit:contain;
  pointer-events:none
}

.migalha {
  position:absolute;
  z-index:2;
  border-radius:42% 58% 50% 46%;
  background:#c98c4f;
  box-shadow:inset -1px -1px 0 rgba(62,23,10,.25);
  pointer-events:none
}

.sabores-info h2 {
  margin-bottom:min(26px,3.6svh)
}

h3 {
  color:var(--brown);
  line-height:1.15
}

/* Carrossel: um sabor por vez, com setas e troca automática (sabores.js). */
.sabores-lista {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px 32px
}

.sabor h3 {
  font-family:Chicle,var(--display);
  font-weight:400;
  font-size:clamp(34px,4vw,48px);
  line-height:1
}

.sabor p {
  margin:8px 0 14px;
  font-size:15px
}

.sabor-acoes {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px
}

.sabor-acoes b {
  padding:8px 16px;
  border-radius:999px;
  background:var(--brown);
  color:var(--cream);
  font-family:var(--display);
  font-size:18px;
  font-variant-numeric:tabular-nums
}

.sabores-nav {
  display:none
}

.js .sabores-lista {
  grid-template-columns:1fr
}

/* Troca de lado conforme a seta (--dir em sabores.js): o sabor que sai vai
   para o lado oposto e o que entra vem do lado da seta. */
.js .sabor {
  grid-area:1/1;
  opacity:0;
  visibility:hidden;
  transform:translateX(calc(var(--dir,1) * -56px));
  transition:opacity .4s var(--ease-out),transform .5s var(--ease-out),visibility 0s .4s
}

.js .sabor.is-active {
  opacity:1;
  visibility:visible;
  transform:none;
  transition:opacity .45s var(--ease-out) .12s,transform .55s var(--ease-out) .12s
}

.js .sabor h3 {
  font-size:clamp(56px,7.6vw,min(118px,17svh))
}

.js .sabor p {
  max-width:380px;
  margin:14px 0 26px;
  font-size:18px
}

.js .sabores-nav {
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:clamp(22px,6svh,56px)
}

.sabor-seta {
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  padding:0;
  border:1.5px solid var(--brown);
  border-radius:50%;
  background:none;
  color:var(--brown);
  cursor:pointer;
  transition:background .18s,color .18s,transform .16s var(--ease-out);
  -webkit-tap-highlight-color:transparent
}

.sabor-seta:hover {
  background:var(--brown);
  color:var(--cream)
}

.sabor-seta:active {
  transform:scale(.94)
}

.sabor-seta:focus-visible {
  outline:3px solid #d9822b;
  outline-offset:4px
}

.sabor-seta svg {
  width:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round
}

.sabor-seta-voltar svg {
  rotate:180deg
}

/* Relógio da troca automática (sabores.js): um anel mais grosso por cima
   da borda da seta da direita, que se fecha em 5 s. */
.sabor-seta {
  position:relative
}

.sabor-seta .sabor-timer {
  position:absolute;
  inset:-1.5px;
  width:calc(100% + 3px);
  height:calc(100% + 3px);
  rotate:-90deg;
  fill:none;
  stroke:var(--brown);
  stroke-width:2.6;
  stroke-dasharray:100;
  stroke-dashoffset:100;
  pointer-events:none
}

.sabor-conta {
  min-width:52px;
  text-align:center;
  font-size:14px;
  letter-spacing:.06em;
  font-variant-numeric:tabular-nums
}

/* Cookie viajante: gira no alto do hero e, com a rolagem, desce e pousa
   no palco dos sabores (sabores.js). Fica na página (absoluto), não na
   tela, para andar junto com a rolagem do aparelho sem tremer. A cópia
   mordida (troca de sabor ainda voando) fica por cima, sem sombra. */
.viajante-mordida {
  filter:none !important
}

.viajante,.viajante-inicio {
  display:none
}

.js .viajante {
  display:block;
  position:absolute;
  z-index:5;
  left:0;
  top:0;
  height:auto;
  aspect-ratio:1;
  object-fit:contain;
  opacity:0;
  pointer-events:none;
  transform-origin:50% 50%;
  will-change:transform;
  filter:drop-shadow(0 22px 26px rgba(30,8,2,.35))
}

.js .viajante-inicio {
  display:block;
  position:absolute;
  right:8%;
  /* Abaixo do carrinho e do menu fixos, para o selo não encostar neles. */
  top:calc(var(--hh) + 4%);
  width:min(11vw,19svh);
  aspect-ratio:1
}

/* Selo: frase girando em volta do cookie do alto, como o selo do
   bar-topas.ch, para mostrar que esse cookie é diferente dos que orbitam. */
.selo {
  position:absolute;
  inset:-40%;
  width:180%;
  height:180%;
  overflow:visible;
  opacity:0;
  fill:var(--cream);
  font-family:var(--display);
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
  animation:selo 22s linear infinite
}

@keyframes selo {
  to {
    rotate:360deg
  }
}

.combo {
  --wave:clamp(26px,3.4vw,48px);
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  height:100svh;
  min-height:0;
  background:var(--choco);
  color:var(--cream);
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201440%2060%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2060h1440V26c-70%200-96-16-150-16-62%200-86%2034-150%2034-58%200-74-28-140-28-64%200-80%2022-150%2022-62%200-84-30-160-30-70%200-84%2024-150%2024-56%200-86-20-140-20-70%200-90%2028-160%2028C80%2040%2058%2022%200%2022z%22/%3E%3C/svg%3E") top/100% var(--wave) no-repeat,linear-gradient(#000,#000) center/100% calc(100% - 2 * var(--wave) + 2px) no-repeat,url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201440%2060%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200h1440v34c-60%200-90-22-150-22-70%200-80%2040-130%2040-46%200-52-30-110-30-70%200-90%2026-160%2026-60%200-70-32-150-32-66%200-80%2020-150%2020-60%200-90-24-150-24-70%200-90%2030-160%2030-60%200-80-18-130-18-52%200-84%2010-160%2010z%22/%3E%3C/svg%3E") bottom/100% var(--wave) no-repeat;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201440%2060%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2060h1440V26c-70%200-96-16-150-16-62%200-86%2034-150%2034-58%200-74-28-140-28-64%200-80%2022-150%2022-62%200-84-30-160-30-70%200-84%2024-150%2024-56%200-86-20-140-20-70%200-90%2028-160%2028C80%2040%2058%2022%200%2022z%22/%3E%3C/svg%3E") top/100% var(--wave) no-repeat,linear-gradient(#000,#000) center/100% calc(100% - 2 * var(--wave) + 2px) no-repeat,url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201440%2060%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200h1440v34c-60%200-90-22-150-22-70%200-80%2040-130%2040-46%200-52-30-110-30-70%200-90%2026-160%2026-60%200-70-32-150-32-66%200-80%2020-150%2020-60%200-90-24-150-24-70%200-90%2030-160%2030-60%200-80-18-130-18-52%200-84%2010-160%2010z%22/%3E%3C/svg%3E") bottom/100% var(--wave) no-repeat
}

.combo h2 {
  position:relative;
  width:fit-content;
  max-width:100%;
  margin-bottom:12px;
  color:var(--cream);
  font-size:min(clamp(38px,4.1vw,62px),8.6svh)
}

.combo-copy {
  align-self:center;
  padding:var(--wave) clamp(150px,20vw,300px) var(--wave) 8%
}

.combo-copy>p {
  margin:min(22px,3svh) 0;
  max-width:400px;
  font-size:16px;
  line-height:1.6
}

.combo-foto {
  position:relative;
  min-height:0
}

/* Título do combo: letras que rolam, efeito Text Roll (titulo.js). */
.rw {
  display:inline-block;
  white-space:nowrap
}

.rl {
  --rx:.06em;
  --ry:.14em;
  position:relative;
  display:inline-block;
  overflow:hidden;
  vertical-align:bottom;
  padding:var(--ry) var(--rx);
  margin:calc(var(--ry) * -1) calc(var(--rx) * -1)
}

/* A letra cursiva (Yellowtail) passa bem da própria caixa: mais folga
   para o "?" e os acentos não serem cortados. */
em .rl {
  --rx:.3em;
  --ry:.3em
}

.rl-a,.rl-b {
  display:block
}

.rl-b {
  position:absolute;
  left:var(--rx);
  top:var(--ry);
  transform:translateY(115%)
}

.titulo-roll.pre .rl-a {
  transform:translateY(115%)
}

.combo-pilha {
  height:100%;
  object-position:center 57%
}

.combo-sabores {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  max-width:420px;
  margin:0 0 4px;
  padding:0;
  list-style:none
}

.combo-sabores li {
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 14px 4px 4px;
  border-radius:999px;
  background:rgba(252,239,223,.12);
  font-size:14px;
  font-weight:500
}

.combo-sabores img {
  width:30px;
  height:30px;
  border-radius:50%;
  object-fit:cover
}

.combo-price {
  display:flex;
  flex-direction:column;
  gap:4px;
  margin:min(26px,3.6svh) 0
}

.combo-price>span {
  font-size:14px
}

.combo-price strong {
  font-family:var(--display);
  font-size:min(68px,10svh);
  font-weight:600;
  line-height:1.1
}

.combo-price strong span {
  font-size:.47em
}

/* Encomenda (refeita em 31/10/2026, pedido de Miguel: a anterior parecia
   formulário e a foto da grade destoava). Título grande na letra do hero,
   um botão cheio e um de contorno, as informações em pílulas como as do
   combo e a foto real do prato com as caixas, recortada sem IA de
   fotos/combo/14.47.54 (2), sobre um círculo de massa. Tudo numa tela. */
.contact {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  gap:4%;
  height:100svh;
  min-height:0
}

.contact-copy {
  display:grid;
  justify-items:start;
  gap:min(22px,3svh)
}

.contact-titulo {
  margin:0;
  color:var(--brown);
  font-family:Chicle,var(--display);
  font-weight:400;
  font-size:clamp(54px,7.4vw,min(124px,17svh));
  line-height:.86;
  text-transform:uppercase
}

.contact-titulo span {
  display:block
}

.contact .contact-texto {
  max-width:30ch;
  margin:0;
  font-size:clamp(15px,1.35vw,19px);
  line-height:1.5
}

.contact-acoes {
  display:flex;
  flex-wrap:wrap;
  gap:12px
}

.button-contorno {
  background:transparent;
  color:var(--brown);
  box-shadow:inset 0 0 0 2px var(--brown)
}

.button-contorno.flow {
  --flow-tinta:var(--brown);
  --flow-texto:var(--cream)
}

.contact-info {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  max-width:520px;
  margin:0;
  padding:0;
  list-style:none
}

.contact-info li {
  padding:7px 14px;
  border-radius:999px;
  background:var(--sand);
  color:var(--choco-deep);
  font-size:14px;
  font-weight:500
}

.contact-info a {
  color:inherit;
  text-decoration:underline;
  text-underline-offset:3px
}

.contact-photo {
  position:relative;
  display:grid;
  place-items:center;
  height:min(72svh,600px);
  margin:0
}

/* O círculo de massa atrás da foto. */
.contact-photo::before {
  content:"";
  position:absolute;
  height:92%;
  max-width:100%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#f3d7a8,var(--dough))
}

.contact-photo img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:0;
  rotate:-3deg;
  filter:drop-shadow(0 22px 26px rgba(62,23,10,.28))
}

/* Rodapé no estilo do palmo.co.in (pedido de Miguel em 30/10/2026): ele
   fica preso no pé da tela, por baixo da página, e aparece conforme a
   página sobe e sai da frente; a beirada de baixo da página é uma fileira
   de ondas creme (main::after). Dentro, o conteúdo entra aos poucos, a
   palavra "Cookies!" ocupa o meio e a fornada (os quatro sabores) nasce
   da borda de baixo em volta dela e fica balançando, como os coqueiros do
   Palmo. --sol vai de 0 a 1 conforme o rodapé aparece (rodape.js). */
:root {
  --onda-r:clamp(34px,8vw,120px)
}

main {
  position:relative;
  z-index:1;
  background:var(--cream)
}

main::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:calc(100% - 1px);
  height:var(--onda-r);
  background:radial-gradient(circle at 50% 0,var(--cream) calc(var(--onda-r) - 1px),transparent var(--onda-r)) 50% 0/calc(var(--onda-r) * 2) var(--onda-r) repeat-x;
  pointer-events:none
}

.rodape {
  --sol:1;
  position:sticky;
  bottom:0;
  z-index:0;
  display:flex;
  flex-direction:column;
  height:100svh;
  min-height:520px;
  overflow:hidden;
  padding:calc(var(--onda-r) + clamp(18px,4svh,48px)) 5% clamp(14px,2.4svh,26px);
  background:var(--choco-deep);
  color:var(--cream)
}

.rodape-conteudo {
  position:relative;
  z-index:3;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:28px 60px;
  opacity:clamp(0,calc(var(--sol) * 2.2 - .5),1);
  translate:0 calc((1 - var(--sol)) * -40px)
}

.rodape-marca {
  max-width:340px
}

.rodape .brand {
  width:84px
}

.rodape-marca p {
  margin-top:14px;
  color:var(--cream-warm);
  font-size:clamp(15px,1.5vw,20px);
  line-height:1.35
}

.rodape-links {
  display:flex;
  gap:clamp(40px,7vw,96px)
}

.rodape-links h2 {
  margin-bottom:12px;
  color:var(--dough);
  font-family:var(--body);
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase
}

.rodape-links ul {
  display:grid;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none
}

.rodape-links a {
  color:var(--cream);
  font-family:var(--display);
  font-size:18px;
  text-decoration:none;
  text-underline-offset:5px
}

.rodape-links a:hover {
  text-decoration:underline
}

.rodape a:focus-visible {
  outline:3px solid #d9822b;
  outline-offset:4px
}

/* O palco ocupa o resto da altura: a palavra no meio, embaixo, e os
   cookies nascendo da borda em volta dela. */
.rodape-palco {
  position:relative;
  flex:1;
  display:grid;
  place-items:end center;
  min-height:0;
  margin:0 -5.3%;
  pointer-events:none
}

.rodape-palavra {
  position:relative;
  z-index:1;
  margin:0 0 clamp(40px,8svh,90px);
  color:var(--dough);
  font-family:Chicle,var(--display);
  font-size:min(21vw,30svh);
  line-height:.8;
  text-transform:uppercase;
  opacity:clamp(0,calc(var(--sol) * 1.6 - .3),1);
  translate:0 calc((1 - var(--sol)) * 30%)
}

/* A fornada: cada cookie tem lugar e tamanho próprios (--x, --s, --b) e
   nasce da borda de baixo, um depois do outro conforme --sol (rodape.js),
   girando até parar. Os de fora ficam atrás da palavra, como os coqueiros
   do Palmo; os do meio, na frente. Depois de nascer, balançam devagar. A
   luz é suave e fica só atrás deles, sem tingir o texto. */
.rodape-forno {
  position:absolute;
  inset:0
}

.rodape-brilho {
  position:absolute;
  left:50%;
  bottom:0;
  width:110%;
  height:60%;
  background:radial-gradient(ellipse 50% 100% at 50% 100%,rgba(232,184,108,.42) 0%,rgba(184,106,44,.22) 45%,transparent 75%);
  filter:blur(24px);
  opacity:var(--sol);
  transform:translateX(-50%)
}

.rodape-cookie {
  --k:clamp(0,calc((var(--sol) - var(--i) * .1) / .6),1);
  position:absolute;
  left:var(--x);
  bottom:var(--b);
  width:var(--s);
  height:auto;
  aspect-ratio:1;
  filter:drop-shadow(0 -6px 18px rgba(30,8,2,.45));
  transform:translateY(calc((1 - var(--k)) * 110%)) rotate(calc((1 - var(--k)) * 120deg + var(--gira)));
  animation:balanca 5.5s ease-in-out infinite alternate;
  animation-delay:calc(var(--i) * -1.4s);
  pointer-events:auto;
  -webkit-tap-highlight-color:transparent
}

.rodape-cookie:nth-of-type(even) {
  transform:translateY(calc((1 - var(--k)) * 110%)) rotate(calc((var(--k) - 1) * 120deg + var(--gira)))
}

.rodape-cookie:nth-of-type(1) {
  --x:-7%;
  --b:-14%;
  --s:min(30vw,48svh)
}

.rodape-cookie:nth-of-type(2) {
  --x:27%;
  --b:-22%;
  --s:min(16vw,26svh);
  z-index:2
}

.rodape-cookie:nth-of-type(3) {
  --x:58%;
  --b:-20%;
  --s:min(14vw,23svh);
  z-index:2
}

.rodape-cookie:nth-of-type(4) {
  --x:auto;
  right:-7%;
  --b:-12%;
  --s:min(28vw,45svh)
}

@keyframes balanca {
  from {
    rotate:-5deg
  }

  to {
    rotate:5deg
  }
}

/* Linha de baixo numa pílula, como a do Palmo. */
.rodape-base {
  position:relative;
  z-index:3;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:6px 40px;
  width:min(100%,640px);
  margin:0 auto;
  padding:12px 26px;
  border-radius:999px;
  background:var(--sand);
  color:var(--choco-deep);
  font-size:13px;
  font-weight:500;
  letter-spacing:.04em;
  opacity:clamp(0,calc(var(--sol) * 2 - 1),1);
  translate:0 calc((1 - var(--sol)) * 24px)
}

/* Giro de uma volta no próprio eixo (rodape.js), somado à rotação. */
@property --gira {
  syntax:"<angle>";
  inherits:false;
  initial-value:0deg
}

/* Lenis: rolagem suave (rolagem.js). */
html.lenis,html.lenis body {
  height:auto
}

html.lenis {
  scroll-behavior:auto
}

.lenis.lenis-stopped {
  overflow:clip
}

.skip {
  position:fixed;
  top:-100px;
  left:15px;
  background:var(--cream);
  padding:12px;
  z-index:70
}

.skip:focus {
  top:15px
}


@media(min-width:1400px) {
  .hero {
  --fs:1.55
}


}


@media(min-width:1600px) {
  .header,.hero,.section,.rodape {
  padding-left:max(5%,calc((100vw - 1440px)/2));
  padding-right:max(5%,calc((100vw - 1440px)/2))
}


}


@media(max-width:800px) {
  :root {
  --hh:72px
}

.header .brand {
  width:56px
}

.header {
  grid-template-columns:auto 1fr
}


}

/* Três tracinhos, no celular e no computador, abrem o menu em tela cheia
   (menu.js). Ficam fixos no canto, num quadrado de chocolate como o
   carrinho, para o menu estar à mão em qualquer ponto da página. */
.menu-toggle {
  position:fixed;
  z-index:8;
  top:calc(var(--hh) / 2 - 21px);
  right:5%;
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  padding:0;
  border:1px solid rgba(252,239,223,.22);
  border-radius:10px;
  background:var(--choco-deep);
  box-shadow:0 6px 16px rgba(30,8,2,.22);
  color:var(--cream);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent
}

.header .brand {
  position:relative;
  z-index:8
}

.menu-toggle span {
  position:absolute;
  width:20px;
  height:2px;
  border-radius:2px;
  background:currentColor;
  transition:transform .32s var(--ease-out),opacity .2s
}

.menu-toggle span:nth-child(1) {
  transform:translateY(-6px)
}

.menu-toggle span:nth-child(3) {
  transform:translateY(6px)
}

.menu-open .menu-toggle span:nth-child(1) {
  transform:rotate(45deg)
}

.menu-open .menu-toggle span:nth-child(2) {
  opacity:0
}

.menu-open .menu-toggle span:nth-child(3) {
  transform:rotate(-45deg)
}

/* Menu no estilo do palmo.co.in: uma cortina de chocolate desce de cima com
   a borda curva, um cookie gigante e apagado aparece ao fundo e os links
   sobem um a um, revelados por baixo de uma máscara. */
nav {
  position:fixed;
  inset:0;
  z-index:7;
  flex-direction:column;
  justify-content:center;
  gap:min(18px,2.6svh);
  font-family:Chicle,var(--display);
  font-size:min(15vw,8.4svh);
  font-weight:400;
  letter-spacing:.01em;
  text-transform:none;
  visibility:hidden;
  transition:visibility 0s .8s
}

nav::before {
  content:"";
  position:absolute;
  left:-30%;
  right:-30%;
  top:-14%;
  height:128%;
  z-index:-2;
  border-radius:0 0 50% 50%/0 0 22% 22%;
  background:radial-gradient(ellipse 60% 50% at 50% 45%,#70301a 0%,#3e170a 70%,#2a0e04 100%);
  transform:translateY(-104%);
  transition:transform .75s cubic-bezier(.76,0,.24,1) .12s
}

nav::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:url('assets/cookie-cheio.webp') 50% 46%/min(118vw,70svh) no-repeat;
  opacity:0;
  transform:rotate(-20deg) scale(.9);
  transition:opacity .4s,transform .9s var(--ease-out)
}

nav>a {
  position:relative;
  clip-path:inset(-10% -10% 100% -10%);
  transform:translateY(70%);
  transition:transform .3s var(--ease-out),clip-path .3s var(--ease-out),scale .35s var(--ease-out)
}

/* Sublinhado "Comes In Goes Out" (Underline Animation, danielpetho/21st.dev):
   com o mouse em cima, a linha entra da esquerda e a palavra cresce um
   pouquinho; ao sair, a linha continua e sai pela direita. */
nav>a::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:.04em;
  height:.07em;
  border-radius:.07em;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .45s var(--ease-out)
}

nav>a:focus-visible {
  outline:none;
  scale:1.04
}

nav>a:focus-visible::after {
  transform:scaleX(1);
  transform-origin:left
}

@media(hover:hover) {
  nav>a:hover {
  scale:1.04
}

nav>a:hover::after {
  transform:scaleX(1);
  transform-origin:left
}


}

.menu-contato {
  display:block;
  position:absolute;
  left:0;
  right:0;
  bottom:max(40px,7svh);
  margin:0;
  text-align:center;
  font-family:var(--body);
  font-size:13px;
  letter-spacing:.04em;
  color:var(--cream-warm);
  opacity:0;
  transition:opacity .3s
}

.menu-contato a {
  display:inline-block;
  margin-top:4px;
  font-family:var(--display);
  font-size:17px;
  font-weight:600;
  color:var(--cream);
  text-decoration:none
}

.menu-open nav {
  visibility:visible;
  transition:none
}

.menu-open nav::before {
  transform:none;
  transition-delay:0s
}

.menu-open nav::after {
  opacity:.09;
  transform:rotate(0) scale(1);
  transition:opacity .6s .35s,transform 1.4s var(--ease-out) .35s
}

.menu-open nav>a {
  clip-path:inset(-10% -10% -10% -10%);
  transform:none;
  transition:transform .7s var(--ease-out),clip-path .7s var(--ease-out),scale .35s var(--ease-out)
}

.menu-open nav>a:nth-child(1) {
  transition-delay:.38s,.38s,0s
}

.menu-open nav>a:nth-child(2) {
  transition-delay:.45s,.45s,0s
}

.menu-open nav>a:nth-child(3) {
  transition-delay:.52s,.52s,0s
}

.menu-open nav>a:nth-child(4) {
  transition-delay:.59s,.59s,0s
}

.menu-open .menu-contato {
  opacity:1;
  transition:opacity .5s .7s
}

@media(max-width:800px) {
  /* Celular: menos cookies, menores; título e cantos empilhados. */
.hero {
  --c:min(66vw,32svh);
  min-height:560px
}

/* Celular: título com respiro nas laterais e frase menor e centralizada,
   para o título ser o mais chamativo. */
.hero-heading {
  top:39%;
  --h:min(29vw,16svh);
  rotate:-2deg
}

/* Cada linha com o próprio tamanho para as duas ocuparem quase toda a
   largura, como um cartaz ("QUE TAL" é mais curta que "COOKIES!"). */
.hl:first-child {
  font-size:1.12em
}

.hero-cookie {
  top:39%
}

.hero {
  --fs:.8
}

.float {
  top:calc(39% + (var(--y) - 50) * .62%)
}

.hero-lead {
  left:8%;
  right:8%;
  bottom:calc(var(--wave) + min(78px,10svh));
  max-width:none;
  text-align:center;
  font-size:min(20px,2.8svh,5.2vw);
  line-height:1.15
}

.hero-scroll {
  white-space:nowrap;
  font-size:10px
}



.cachoeira {
  height:230px
}

.fita {
  height:48px
}

.fita-track {
  font-size:16px
}

.fita-chocolate {
  rotate:12deg
}

.fita-branca {
  rotate:-10deg
}

.sabores {
  grid-template-columns:1fr;
  grid-template-rows:auto auto;
  align-content:center;
  gap:min(16px,2svh);
  padding:max(72px,9svh) 6% max(24px,4svh)
}

.sabor-palco {
  justify-self:center;
  width:min(64vw,34svh);
  margin-left:0
}

.sabor-palco {
  width:min(80vw,35svh)
}

.sabores-info {
  text-align:center
}

.sabores-info h2 {
  font-size:min(46px,6svh);
  margin-bottom:min(10px,1.4svh)
}

.sabores-lista {
  grid-template-columns:1fr
}

.js .sabor h3 {
  font-size:min(16vw,9svh)
}

.js .sabor p {
  margin:min(10px,1.4svh) auto min(18px,2.4svh);
  font-size:17px
}

.sabor-acoes {
  justify-content:center
}

.js .sabores-nav {
  justify-content:center;
  margin-top:min(26px,3.4svh)
}

.sabor-seta {
  width:54px;
  height:54px
}


/* Celular: o selo com o cookie fica no meio do hero, no vazio entre o
   título e a frase, centralizado como o resto da composição. */
.js .viajante-inicio {
  right:auto;
  left:50%;
  top:68%;
  translate:-50% -50%;
  width:min(28vw,11.5svh)
}

.selo {
  font-size:14px
}

.blob {
  width:80px
}

.combo {
  grid-template-columns:1fr;
  grid-template-rows:auto minmax(0,1fr)
}

.combo-copy {
  padding:max(56px,8svh) 6% 18px
}

.combo h2 {
  font-size:min(40px,5.4svh)
}

.combo-copy>p {
  margin:10px 0;
  font-size:14px;
  line-height:1.55
}

.combo-price {
  margin:10px 0 14px
}

.combo-price strong {
  font-size:min(50px,6.6svh)
}

.combo-pilha {
  object-position:center 66%
}

.combo-copy>p {
  margin:8px 0
}

.combo-sabores {
  gap:6px;
  margin:4px 0 0
}

.combo-sabores li {
  padding:3px 11px 3px 3px;
  font-size:12px
}

.combo-sabores img {
  width:22px;
  height:22px
}


.contact {
  grid-template-columns:1fr;
  align-content:center;
  gap:min(14px,1.8svh);
  padding-block:max(70px,9svh) max(24px,3svh)
}

.contact-copy {
  display:contents
}

.contact-titulo {
  font-size:min(15vw,8.6svh);
  text-align:center
}

.contact-photo {
  order:1;
  height:min(34svh,340px)
}

.contact-texto,.contact-acoes,.contact-info {
  order:2
}

.contact .contact-texto {
  max-width:none;
  font-size:min(15px,2.1svh);
  text-align:center
}

.contact-acoes {
  justify-content:center;
  gap:8px
}

.contact-acoes .button {
  min-height:min(48px,6.4svh);
  padding-block:10px;
  font-size:15px
}

.contact-info {
  justify-content:center;
  gap:6px;
  margin-inline:auto
}

.contact-info li {
  padding:5px 11px;
  font-size:min(12.5px,1.8svh)
}

.rodape-conteudo {
  gap:22px
}

.rodape-links {
  gap:48px
}

.rodape-links a {
  font-size:17px
}

.rodape-base {
  justify-content:center;
  gap:2px 16px;
  padding:10px 18px;
  font-size:11.5px;
  border-radius:22px
}

/* Celular: o rodapé não ocupa a tela inteira, só uma brecha embaixo da
   página (pedido de Miguel em 31/10/2026): o palco tem altura própria,
   sem a folga entre os links e a palavra. */
.rodape {
  height:auto;
  min-height:0
}

.rodape-palco {
  flex:none;
  height:min(44vw,28svh);
  margin-top:clamp(4px,1svh,10px)
}

/* Celular: palavra e cookies maiores, quase encostados na palavra. */
.rodape-palavra {
  font-size:min(25vw,15svh)
}

.rodape-cookie:nth-of-type(1) {
  --x:-14%;
  --b:-10%;
  --s:46vw
}

.rodape-cookie:nth-of-type(2) {
  --x:24%;
  --b:-16%;
  --s:28vw
}

.rodape-cookie:nth-of-type(3) {
  --x:50%;
  --b:-15%;
  --s:25vw
}

.rodape-cookie:nth-of-type(4) {
  right:-14%;
  --b:-9%;
  --s:42vw
}

}


/* Combo no celular: texto grande no alto (Miguel achou pequeno demais para
   ler no próprio celular), preço e botão lado a lado. A foto começa logo
   abaixo do botão, para os pacotes aparecerem inteiros. */
@media(max-width:800px) {
  .combo-copy {
  padding:max(var(--wave),44px) 6% max(18px,2.5svh)
}

.combo h2 {
  font-size:min(48px,6.4svh);
  margin-bottom:min(14px,1.8svh)
}

.combo-copy>p {
  margin:0 0 min(16px,2svh);
  font-size:min(17px,2.4svh);
  line-height:1.45
}

.combo-sabores {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  max-width:none;
  margin:0
}

.combo-sabores li {
  gap:8px;
  padding:5px 10px 5px 5px;
  font-size:min(14.5px,2svh);
  line-height:1.2
}

.combo-sabores img {
  width:min(30px,4svh);
  height:min(30px,4svh)
}

.combo-compra {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:min(18px,2.4svh)
}

.combo-price {
  margin:0;
  gap:2px
}

.combo-price>span {
  font-size:13.5px;
  white-space:nowrap
}

.combo-price strong {
  font-size:min(50px,6.6svh);
  white-space:nowrap
}

.combo .button {
  min-height:52px;
  padding:12px 20px;
  font-size:15px;
  white-space:nowrap
}

.combo-pilha {
  object-position:center 58%
}

}


@media(max-width:340px) {
  .combo-sabores li {
  gap:5px;
  padding-right:6px;
  font-size:11px
}


}


/* Cena sabores → combo (combo.js): a dupla fica presa na tela enquanto se
   rola. O painel de chocolate do combo entra da direita para a esquerda
   cobrindo os sabores, depois a foto se abre também da direita para a
   esquerda e, por fim, entram as legendas e a caixa. Sem JavaScript ou com
   movimento reduzido, as duas seções ficam uma embaixo da outra. */
.cena-ativa .cena {
  position:relative;
  height:300svh
}

.cena-ativa .cena-pin {
  --painel:0;
  --onda:clamp(70px,9vw,150px);
  position:sticky;
  top:0;
  height:100svh;
  overflow:hidden
}

.cena-ativa .sabores {
  translate:calc(var(--painel) * -12%) 0;
  filter:brightness(calc(1 - var(--painel) * .18))
}

.cena-ativa .combo {
  --foto:0;
  position:absolute;
  inset:0;
  z-index:4;
  translate:calc((1 - var(--painel)) * (100% + var(--onda))) 0;
  -webkit-mask:none;
  mask:none
}

/* Frente do chocolate: a borda do painel escorre para a esquerda enquanto
   ele cobre os sabores, com ondas e pingos à frente. Fica fora da tela
   antes e depois da passagem. */
.cena-frente {
  display:none
}

.cena-ativa .cena-frente {
  display:block;
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  translate:calc((1 - var(--painel)) * (100% + var(--onda))) 0
}

.cena-frente svg {
  position:absolute;
  right:calc(100% - 2px);
  top:0;
  width:var(--onda);
  height:100%;
  overflow:visible
}

.cena-ativa .combo-pilha {
  clip-path:inset(0 0 0 calc((1 - var(--foto)) * 100%));
  transform:translateX(calc((1 - var(--foto)) * 18%)) scale(calc(1.12 - var(--foto) * .12))
}


.cena-ativa .combo-copy>:not(h2) {
  opacity:0;
  transform:translateX(48px);
  transition:opacity .45s var(--ease-out),transform .6s var(--ease-out)
}

.cena-ativa .legendas-on .combo-copy>:not(h2) {
  opacity:1;
  transform:none
}

.cena-ativa .legendas-on .combo-copy>:nth-child(2) {
  transition-delay:.25s
}

.cena-ativa .legendas-on .combo-copy>:nth-child(3) {
  transition-delay:.35s
}

.cena-ativa .legendas-on .combo-copy>:nth-child(4) {
  transition-delay:.45s
}

.cena-ativa .cena+.caixa-abre::before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-1px;
  height:clamp(26px,3.4vw,48px);
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201440%2060%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%236a2610%22%20d%3D%22M0%200h1440v34c-60%200-90-22-150-22-70%200-80%2040-130%2040-46%200-52-30-110-30-70%200-90%2026-160%2026-60%200-70-32-150-32-66%200-80%2020-150%2020-60%200-90-24-150-24-70%200-90%2030-160%2030-60%200-80-18-130-18-52%200-84%2010-160%2010z%22/%3E%3C/svg%3E") top/100% 100% no-repeat;
  pointer-events:none
}

.cena-ancora {
  position:absolute;
  left:0;
  top:180svh;
  width:1px;
  height:1px
}


/* Cardápio no estilo da página de sabores do palmo.co.in (cardapio.js): com
   o mouse em cima, o fundo do card vira chocolate, o cookie dá uma volta e
   rabiscos aparecem nos cantos. O "+" abre o painel de quantidade. */
.cardapio {
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:min(30px,4svh);
  height:100svh;
  padding:clamp(40px,7svh,80px) 5% clamp(28px,5svh,60px)
}

.cardapio-topo {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:30px
}

.cardapio-topo h2 {
  font-size:min(clamp(40px,4.6vw,68px),9svh)
}

.cardapio-topo p {
  max-width:330px;
  margin:0 0 6px;
  font-size:15px
}

.cardapio-grade {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(10px,1.4vw,20px);
  width:100%;
  max-width:calc(5 * 52svh);
  margin:0 auto
}

.item {
  position:relative
}

.item-foto {
  position:relative;
  display:grid;
  place-items:center;
  aspect-ratio:1;
  border-radius:20px;
  background:var(--sand);
  overflow:hidden;
  transition:background .45s var(--ease-out)
}

.item-foto img {
  width:74%;
  height:auto;
  aspect-ratio:1;
  object-fit:contain;
  filter:drop-shadow(0 14px 16px rgba(62,23,10,.28));
  transition:transform .8s cubic-bezier(.34,1.3,.64,1)
}

.item-combo .item-foto img {
  width:90%;
  rotate:-6deg
}

.item-rabisco {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  fill:none;
  stroke:var(--dough);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:0;
  transform:scale(.9);
  transition:opacity .35s,transform .5s var(--ease-out)
}

@media(hover:hover) {
  .item:hover .item-foto {
  background:var(--choco)
}

.item:hover .item-foto img {
  transform:rotate(360deg) scale(1.06)
}

.item:hover .item-rabisco {
  opacity:1;
  transform:none
}


}

/* Sem cursor (celular): o mesmo efeito vale para o card em foco na rolagem
   (classe posta pelo cardapio.js). */
.item.em-foco .item-foto {
  background:var(--choco)
}

.item.em-foco .item-foto img {
  transform:rotate(360deg) scale(1.06)
}

.item.em-foco .item-rabisco {
  opacity:1;
  transform:none
}

.item-rodape {
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 2px 0
}

.item-rodape h3 {
  flex:1;
  min-width:0;
  margin:0;
  font-family:var(--display);
  font-size:min(17px,3.2svh);
  font-weight:600;
  line-height:1.1
}

.item-preco {
  font-size:14px;
  font-weight:500;
  white-space:nowrap;
  font-variant-numeric:tabular-nums
}

.item-mais {
  flex:none;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  padding:0;
  border:1.5px solid var(--brown);
  border-radius:50%;
  background:none;
  color:var(--brown);
  cursor:pointer;
  transition:background .2s,color .2s,transform .35s var(--ease-out);
  -webkit-tap-highlight-color:transparent
}

.item-mais svg {
  width:14px;
  fill:none;
  stroke:currentColor;
  stroke-linejoin:round;
  stroke-width:2;
  stroke-linecap:round
}

.item-mais:hover {
  background:var(--brown);
  color:var(--cream)
}

.item-mais:active {
  transform:scale(.9)
}

/* Depois de adicionar, o "+" vira um visto por um instante (cardapio.js). */
.item-mais .item-ok {
  display:none
}

.item-mais.ok {
  background:var(--brown);
  color:var(--cream)
}

.item-mais.ok .item-soma {
  display:none
}

.item-mais.ok .item-ok {
  display:block
}

.item-mais:focus-visible,.carrinho:focus-visible,.sacola-painel button:focus-visible {
  outline:3px solid #d9822b;
  outline-offset:3px
}

.qtd {
  display:flex;
  align-items:center;
  gap:6px
}

.qtd button {
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  padding:0;
  border:1.5px solid currentColor;
  border-radius:50%;
  background:none;
  color:inherit;
  font-size:18px;
  line-height:1;
  cursor:pointer
}

.qtd output {
  min-width:24px;
  text-align:center;
  font-family:var(--display);
  font-weight:600;
  font-size:17px;
  font-variant-numeric:tabular-nums
}

/* Carrinho no topo, ao lado do menu, como o do Palmo: fica fixo, mostra
   quantos cookies há no pedido e abre a sacola (no cardápio) ou leva até
   ela (na página inicial). Com o menu aberto, some. */
.carrinho {
  position:fixed;
  z-index:6;
  top:calc(var(--hh) / 2 - 21px);
  right:calc(5% + 52px);
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1px solid rgba(252,239,223,.22);
  border-radius:10px;
  background:var(--choco-deep);
  color:var(--cream);
  box-shadow:0 6px 16px rgba(30,8,2,.22);
  transition:opacity .3s,transform .16s var(--ease-out)
}

.carrinho:active {
  transform:scale(.92)
}

.carrinho svg {
  width:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}

.carrinho-qtd {
  position:absolute;
  top:-7px;
  right:-7px;
  display:grid;
  place-items:center;
  min-width:20px;
  height:20px;
  padding:0 5px;
  border-radius:999px;
  background:var(--dough);
  color:var(--choco-deep);
  font-family:var(--display);
  font-weight:700;
  font-size:12px;
  font-variant-numeric:tabular-nums
}

.carrinho-qtd:empty {
  display:none
}

.aviso {
  position:fixed;
  z-index:6;
  top:calc(var(--hh) / 2 + 30px);
  right:calc(5% + 52px);
  max-width:min(280px,80vw);
  margin:0;
  padding:7px 14px;
  border-radius:999px;
  background:var(--choco-deep);
  color:var(--cream);
  font-family:var(--display);
  font-weight:600;
  font-size:13px;
  pointer-events:none;
  opacity:0;
  transform:translateY(-6px);
  transition:opacity .25s,transform .35s var(--ease-out)
}

.aviso.on {
  opacity:1;
  transform:none
}

.aviso:empty {
  display:none
}

.menu-open .carrinho {
  opacity:0;
  pointer-events:none
}

/* "Ver no cardápio": link escrito à mão com um risco embaixo, como o
   "Explore Flavors" do Palmo. */
.link-cardapio {
  position:relative;
  display:inline-block;
  padding:4px 2px 10px;
  color:var(--brown);
  font-family:Chicle,var(--display);
  font-size:20px;
  text-decoration:none
}

.link-cardapio svg {
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:10px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:130
}

@media(hover:hover) {
  .link-cardapio:hover svg {
  animation:risco .7s var(--ease-out)
}


}

@keyframes risco {
  from {
  stroke-dashoffset:130
}

to {
  stroke-dashoffset:0
}


}

.link-cardapio:focus-visible {
  outline:3px solid #d9822b;
  outline-offset:4px
}

.contato-cardapio {
  margin:14px 0 0
}

.sacola-painel {
  position:fixed;
  inset:0;
  z-index:80;
  background:rgba(30,8,2,0);
  transition:background .4s
}

.sacola-painel[hidden] {
  display:none
}

.sacola-painel.aberto {
  background:rgba(30,8,2,.45)
}

.sacola-caixa {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  display:flex;
  flex-direction:column;
  width:min(440px,100%);
  padding:28px 26px calc(24px + env(safe-area-inset-bottom));
  background:var(--cream);
  transform:translateX(100%);
  transition:transform .45s cubic-bezier(.76,0,.24,1)
}

.sacola-painel.aberto .sacola-caixa {
  transform:none
}

.sacola-cabeca {
  display:flex;
  align-items:center;
  justify-content:space-between
}

.sacola-cabeca h2 {
  font-family:Chicle,var(--display);
  font-weight:400;
  font-size:44px;
  letter-spacing:0
}

.sacola-fechar {
  width:44px;
  height:44px;
  border:0;
  background:none;
  color:var(--brown);
  font-size:30px;
  line-height:1;
  cursor:pointer
}

.sacola-lista {
  flex:1;
  margin:18px 0;
  padding:0;
  list-style:none;
  overflow-y:auto
}

.sacola-lista li {
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:12px;
  padding:14px 0;
  border-bottom:1px solid var(--line)
}

.sacola-nome {
  font-family:var(--display);
  font-weight:600
}

.sacola-lista .qtd button {
  width:28px;
  height:28px;
  color:var(--brown)
}

.sacola-lista b {
  min-width:76px;
  text-align:right;
  font-variant-numeric:tabular-nums
}

.sacola-soma {
  display:flex;
  justify-content:space-between;
  margin:0 0 14px;
  font-family:var(--display);
  font-size:20px
}

.sacola-continuar {
  width:100%
}

.sacola-sub {
  margin:2px 0 0;
  color:var(--brown);
  font-family:var(--display);
  font-size:14px
}

.sacola-painel.vazia .sacola-continuar,.sacola-painel.vazia .sacola-limpar,.sacola-painel.vazia .sacola-lista,.sacola-painel.vazia .sacola-modo,.sacola-painel.vazia .sacola-dados {
  display:none
}

/* Sacola vazia, como a do Palmo: um cookie mordido desenhado a traço se
   desenha quando a sacola abre, depois balança devagar e solta migalhas da
   mordida. Dois cookies iguais, grandes e apagados, flutuam nos cantos com a
   sacola cheia ou vazia. */
.sacola-caixa {
  overflow:clip
}

.sacola-vazio {
  display:none
}

.sacola-painel.vazia .sacola-vazio {
  position:relative;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-align:center;
  color:var(--brown)
}

.sacola-vazio svg,.vazio-fundo {
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round
}

.vazio-fundo {
  position:absolute;
  width:62%;
  opacity:.09;
  pointer-events:none;
  animation:fundo-flutua 9s ease-in-out infinite alternate
}

.vazio-fundo-1 {
  top:-6%;
  right:-26%;
  rotate:24deg
}

.vazio-fundo-2 {
  bottom:-4%;
  left:-28%;
  rotate:-36deg;
  animation-duration:11s;
  animation-direction:alternate-reverse
}

.sacola-caixa>:not(.vazio-fundo) {
  position:relative;
  z-index:1
}

@keyframes fundo-flutua {
  from {
  transform:translate(0,0) rotate(0)
}

to {
  transform:translate(-14px,22px) rotate(14deg)
}


}

/* Sacola cheia: os itens entram em cascata quando ela abre. */
.sacola-painel.entrando .sacola-lista li {
  animation:item-entra .55s cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(.22s + var(--i,0) * .07s)
}

.sacola-painel.entrando .sacola-fim>* {
  animation:item-entra .55s cubic-bezier(.22,1,.36,1) both;
  animation-delay:.4s
}

.sacola-painel.entrando .sacola-fim>:nth-child(2) {
  animation-delay:.47s
}

.sacola-painel.entrando .sacola-fim>:nth-child(3) {
  animation-delay:.54s
}

.sacola-painel.entrando .sacola-fim>:nth-child(4) {
  animation-delay:.61s
}

@keyframes item-entra {
  from {
  opacity:0;
  transform:translateX(36px)
}


}

.sacola-lista output,.sacola-soma b {
  display:inline-block
}

.vazio-cookie {
  position:relative;
  width:132px;
  margin-bottom:10px;
  animation:vazio-balanco 3.2s ease-in-out 1.4s infinite
}

.vazio-cookie svg path {
  stroke-dasharray:300;
  stroke-dashoffset:300
}

.sacola-painel.aberto .vazio-cookie svg path {
  animation:vazio-traco 1.1s cubic-bezier(.65,0,.35,1) .35s forwards
}

.sacola-painel.aberto .vazio-cookie .vazio-gota {
  animation-delay:.9s
}

.sacola-painel.aberto .vazio-cookie .vazio-risco {
  animation-delay:1.1s
}

.vazio-migalha {
  position:absolute;
  top:30%;
  left:71%;
  width:5px;
  height:5px;
  border:1.6px solid currentColor;
  border-radius:40%;
  opacity:0;
  animation:vazio-migalha 3.2s ease-in 1.6s infinite
}

.vazio-migalha:nth-of-type(2) {
  left:76%;
  width:4px;
  height:4px;
  animation-delay:1.9s
}

.vazio-migalha:nth-of-type(3) {
  left:68%;
  width:3px;
  height:3px;
  animation-delay:2.2s
}

.sacola-vazio p {
  margin:0;
  font-family:var(--display);
  font-size:19px
}

.vazio-link {
  padding:4px 2px;
  border:0;
  border-bottom:1.5px solid currentColor;
  background:none;
  color:var(--brown);
  font-family:Chicle,var(--display);
  font-size:19px;
  cursor:pointer
}

@keyframes vazio-traco {
  to {
  stroke-dashoffset:0
}


}

@keyframes vazio-balanco {
  0%,100% {
  transform:rotate(-5deg) translateY(0)
}

50% {
  transform:rotate(5deg) translateY(-6px)
}


}

@keyframes vazio-migalha {
  0% {
  opacity:0;
  transform:translate(0,0) rotate(0)
}

10% {
  opacity:1
}

45% {
  opacity:0;
  transform:translate(10px,70px) rotate(180deg)
}

100% {
  opacity:0;
  transform:translate(10px,70px) rotate(180deg)
}


}

/* Entrega ou retirada: duas opções numa pílula, com um fundo de chocolate
   que desliza até a escolhida; o endereço fica na segunda etapa. */
.sacola-modo {
  margin:0 0 16px;
  padding:0;
  border:0;
  min-width:0
}

.sacola-modo legend {
  margin-bottom:8px;
  padding:0;
  color:var(--brown);
  font-family:var(--display);
  font-weight:600;
  font-size:15px
}

.modo-opcoes {
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  padding:4px;
  border:1.5px solid var(--brown);
  border-radius:999px
}

.modo-opcoes::before {
  content:"";
  position:absolute;
  top:4px;
  bottom:4px;
  left:4px;
  width:calc(50% - 4px);
  border-radius:999px;
  background:var(--brown);
  opacity:0;
  scale:.6 1;
  transition:translate .45s cubic-bezier(.34,1.3,.64,1),opacity .25s,scale .35s cubic-bezier(.34,1.3,.64,1)
}

.modo-opcoes:has(input:checked)::before {
  opacity:1;
  scale:1
}

.modo-opcoes:has(input[value="retirada"]:checked)::before {
  translate:100% 0
}

.modo-opcoes label {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 10px;
  border-radius:999px;
  color:var(--brown);
  font-family:var(--display);
  font-weight:600;
  font-size:15px;
  text-align:center;
  cursor:pointer;
  transition:color .3s
}

.modo-opcoes input {
  position:absolute;
  opacity:0;
  pointer-events:none
}

.modo-opcoes label:has(input:checked) {
  color:var(--cream)
}

.modo-opcoes label:has(input:focus-visible) {
  outline:2px solid var(--brown);
  outline-offset:3px
}

/* Segunda etapa da sacola (01/11/2026): os dados do cliente e o endereço
   detalhado que a dona pediu, com o botão de pagar. Os campos rolam por
   dentro; o botão fica sempre à vista embaixo. */
.sacola-dados {
  display:none;
  flex:1;
  flex-direction:column;
  min-height:0;
  margin-top:14px
}

.etapa-dados .sacola-dados {
  display:flex
}

.etapa-dados .sacola-lista,.etapa-dados .sacola-fim {
  display:none
}

.etapa-dados .sacola-dados>* {
  animation:item-entra .45s cubic-bezier(.22,1,.36,1) both
}

.dados-voltar {
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  gap:4px;
  min-height:36px;
  padding:0 8px 0 0;
  border:0;
  background:none;
  color:var(--brown);
  font:inherit;
  font-family:var(--display);
  font-weight:600;
  font-size:14px;
  cursor:pointer
}

.dados-voltar svg {
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:translate .25s
}

.dados-voltar:hover svg {
  translate:-3px 0
}

.dados-campos {
  flex:1;
  min-height:0;
  margin:0 -6px;
  padding:0 6px 6px;
  overflow-y:auto;
  overscroll-behavior:contain
}

.dados-titulo {
  margin:14px 0 2px;
  color:var(--brown);
  font-family:var(--display);
  font-weight:600;
  font-size:17px
}

.dados-linha {
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:10px
}

.sacola-campo label {
  display:block;
  margin:10px 0 5px;
  color:var(--brown);
  font-size:13px
}

.sacola-campo label i {
  opacity:.7
}

.sacola-campo input {
  width:100%;
  min-height:46px;
  padding:0 14px;
  border:1.5px solid rgba(106,38,16,.35);
  border-radius:14px;
  background:#fffdf9;
  color:var(--brown);
  font:inherit;
  font-size:16px
}

.sacola-campo input::placeholder {
  color:rgba(118,55,20,.45)
}

.sacola-campo input:focus {
  border-color:var(--brown);
  outline:none
}

.sacola-campo.falta input {
  border-color:#b3261e
}

.campo-cep input {
  width:min(100%,170px)
}

.cep-aviso {
  display:block;
  margin-top:5px;
  color:var(--brown);
  font-size:13px
}

.cep-aviso:empty {
  display:none
}

.dados-erro {
  margin:8px 0 0;
  color:#b3261e;
  font-size:14px
}

.dados-erro:empty {
  display:none
}

.sacola-pagar {
  width:100%;
  margin-top:12px
}

.sacola-pagar b {
  margin-left:.3em;
  font-variant-numeric:tabular-nums
}

.sacola-pagar.carregando {
  opacity:.7;
  cursor:progress
}

.dados-nota {
  margin:8px 0 0;
  color:var(--brown);
  font-size:13px;
  text-align:center
}

.so-whats .dados-nota,.so-whats .dados-whats,.so-whats .sacola-pagar b {
  display:none
}

.dados-whats {
  align-self:center;
  margin-top:6px;
  padding:4px;
  color:var(--brown);
  font-size:14px
}

.sacola-modo.falta {
  animation:modo-falta .45s
}

.sacola-modo.falta .modo-opcoes {
  border-color:#b3261e
}

@keyframes modo-falta {
  20%,60% {
  transform:translateX(-7px)
}

40%,80% {
  transform:translateX(7px)
}


}

/* Limpar pedido: botão de contorno, à vista, com uma lixeira que se inclina
   no hover. */
.sacola-limpar {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  min-height:48px;
  margin-top:10px;
  padding:0 20px;
  border:1.5px solid var(--brown);
  border-radius:999px;
  background:transparent;
  color:var(--brown);
  font-family:var(--display);
  font-weight:600;
  font-size:15px;
  cursor:pointer;
  transition:background .25s,color .25s
}

.sacola-limpar svg {
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:rotate .3s cubic-bezier(.34,1.56,.64,1)
}

@media(hover:hover) {
  .sacola-limpar:hover {
  background:var(--brown);
  color:var(--cream)
}

.sacola-limpar:hover svg {
  rotate:-14deg
}


}

@media(max-width:800px) {
  .cardapio {
  padding:max(56px,8svh) 0 max(24px,4svh)
}

.cardapio-topo {
  display:block;
  padding:0 6%
}

.cardapio-topo h2 {
  font-size:min(38px,5svh)
}

.cardapio-topo p {
  margin-top:8px;
  font-size:14px
}

/* Celular: um card por linha; os outros aparecem descendo. */
.cardapio-grade {
  grid-template-columns:1fr;
  gap:30px;
  max-width:none;
  padding:0 6%
}

.item-rodape h3 {
  font-size:16px
}


}


/* Telas baixas de computador (notebook com barras do navegador): o painel do
   combo encolhe para todas as informações caberem numa tela. */
@media(min-width:801px) and (max-height:700px) {
  .combo h2 {
  font-size:min(clamp(34px,3.6vw,56px),7.8svh);
  margin-bottom:12px
}

.combo-copy>p {
  margin:min(14px,2.4svh) 0;
  font-size:min(16px,3svh)
}

.combo-sabores {
  gap:6px
}

.combo-sabores li {
  padding:3px 11px 3px 3px;
  font-size:12.5px
}

.combo-sabores img {
  width:24px;
  height:24px
}

.combo-price {
  margin:min(16px,2.8svh) 0
}

.combo-price>span {
  font-size:13px
}

.combo-price strong {
  font-size:min(68px,8.2svh)
}

.combo .button {
  min-height:44px;
  padding:10px 24px
}


}


/* Passagem entre páginas no estilo do palmo.co.in (transicao.js): a faixa
   de massa vai na frente e a de chocolate cobre a tela atrás dela; na
   página nova, o chocolate sai primeiro pela direita e a massa vai junto. */
.saindo body::before,.saindo body::after,.chegando body::before,.chegando body::after {
  content:"";
  position:fixed;
  z-index:100;
  top:-10vh;
  bottom:-10vh;
  left:-40vw;
  width:180vw;
  transform:skewX(-14deg);
  pointer-events:none
}

.saindo body::before,.chegando body::before {
  background:var(--dough)
}

.saindo body::after,.chegando body::after {
  background:var(--choco-deep)
}

.saindo body::before,.saindo body::after {
  pointer-events:auto;
  animation:faixa-entra .62s cubic-bezier(.65,0,.35,1) both
}

.saindo body::after {
  animation-delay:.12s
}

.chegando body::before,.chegando body::after {
  animation:faixa-sai .7s cubic-bezier(.65,0,.35,1) .18s both
}

.chegando body::before {
  animation-delay:.3s
}

.chegando .loader {
  display:none
}

@keyframes faixa-entra {
  from {
  translate:-110% 0
}

to {
  translate:0 0
}


}

@keyframes faixa-sai {
  from {
  translate:0 0
}

to {
  translate:110% 0
}


}

/* Página do cardápio (cardapio.html): o topo é de chocolate, com a onda
   escorrendo para o creme dos cards, e o pedido vai pela sacola. */
.cardapio-capa {
  padding:calc(var(--hh) + clamp(20px,5svh,56px)) 5% clamp(36px,7svh,80px);
  background:var(--choco);
  color:var(--cream)
}

.cardapio-capa h1 {
  margin:0;
  color:var(--cream);
  font-family:Chicle,var(--display);
  font-weight:400;
  font-size:clamp(56px,9vw,128px);
  line-height:.95;
  letter-spacing:0
}

/* Letras que sobem de baixo de uma máscara (letras.js), como o título da
   página de sabores do Palmo. A máscara tem folga embaixo para não cortar
   o "p" já no lugar. */
.palavra {
  display:inline-block;
  white-space:nowrap
}

.letra-mascara {
  display:inline-block;
  overflow:hidden;
  padding-bottom:.16em;
  margin-bottom:-.16em;
  vertical-align:top
}

.letra {
  display:inline-block
}

/* Topo entrando (letras.js e hero.js põem .topo-pronto): logo, carrinho e
   três tracinhos descem para o lugar, um depois do outro. A animação só
   preenche o começo, para o menu aberto ainda poder esconder o carrinho. */
.js:not(.topo-pronto) .carrinho,.js:not(.topo-pronto) .menu-toggle,.js:not(.topo-pronto) .pagina-cardapio .header .brand {
  opacity:0
}

.topo-pronto .pagina-cardapio .header .brand {
  animation:topo-entra .8s cubic-bezier(.22,1,.36,1) backwards
}

.topo-pronto .carrinho {
  animation:topo-entra .8s cubic-bezier(.22,1,.36,1) .1s backwards
}

.topo-pronto .menu-toggle {
  animation:topo-entra .8s cubic-bezier(.22,1,.36,1) .2s backwards
}

@keyframes topo-entra {
  from {
  opacity:0;
  translate:0 -28px
}

to {
  opacity:1;
  translate:0 0
}


}

.cardapio-capa p {
  max-width:420px;
  margin:14px 0 0;
  color:var(--cream-warm);
  font-size:16px
}

.pagina-cardapio .cardapio {
  height:auto;
  min-height:0;
  justify-content:flex-start;
  padding-top:clamp(56px,10svh,110px)
}

.pagina-cardapio .cardapio::before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-1px;
  height:clamp(26px,3.4vw,48px);
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201440%2060%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%236a2610%22%20d%3D%22M0%200h1440v34c-60%200-90-22-150-22-70%200-80%2040-130%2040-46%200-52-30-110-30-70%200-90%2026-160%2026-60%200-70-32-150-32-66%200-80%2020-150%2020-60%200-90-24-150-24-70%200-90%2030-160%2030-60%200-80-18-130-18-52%200-84%2010-160%2010z%22/%3E%3C/svg%3E") top/100% 100% no-repeat;
  pointer-events:none
}

/* Na página do cardápio: dois cards por linha no computador, grandes. O
   cookie de cada card chega rolando de trás da borda direita do card, da
   direita para a esquerda, conforme a rolagem (cardapio.js); o card corta a
   foto. */
.pagina-cardapio .cardapio {
  overflow-x:clip
}

.pagina-cardapio .cardapio-grade {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,4vw,56px) clamp(20px,3vw,40px);
  max-width:min(1100px,150svh)
}

.pagina-cardapio .item-foto {
  border-radius:clamp(20px,2.4vw,32px)
}

.pagina-cardapio .item-foto img {
  position:relative;
  z-index:1;
  will-change:translate,rotate
}

.pagina-cardapio .item-rodape {
  padding-top:6px
}

.pagina-cardapio .item-rodape h3 {
  font-size:clamp(18px,1.8vw,24px)
}

.pagina-cardapio .item-preco {
  font-size:clamp(15px,1.3vw,18px)
}

.pagina-cardapio .item-mais {
  width:40px;
  height:40px
}

.cardapio-volta {
  display:inline-block;
  margin-top:clamp(28px,5svh,48px);
  color:var(--brown);
  font-family:var(--display);
  font-weight:600
}

@media(max-width:800px) {
  .cardapio-capa {
  padding:calc(var(--hh) + 16px) 6% 40px
}

.cardapio-capa h1 {
  font-size:min(17vw,10svh)
}

.cardapio-capa p {
  font-size:14px
}

.pagina-cardapio .cardapio {
  padding-top:52px;
  padding-bottom:48px
}

.cardapio-volta {
  margin-left:6%
}

.pagina-cardapio .cardapio-grade {
  grid-template-columns:1fr
}


}


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

* {
  transition:none!important
}

.float,.hero-scroll svg,.fita-track,.selo {
  animation:none
}

.fita-gotas {
  display:none
}

.saindo body::before,.saindo body::after,.chegando body::before,.chegando body::after {
  display:none
}

.vazio-cookie,.vazio-migalha,.vazio-fundo,.sacola-painel.entrando .sacola-lista li,.sacola-painel.entrando .sacola-fim>*,.sacola-modo.falta,.sacola-painel.aberto .vazio-cookie svg path,.topo-pronto .carrinho,.topo-pronto .menu-toggle,.topo-pronto .pagina-cardapio .header .brand {
  animation:none
}

.vazio-cookie svg path {
  stroke-dashoffset:0
}


}

/* Como nasce um cookie (construcao.js), inspirado no pincho do
   bar-topas.ch: a lista das etapas à esquerda e o cookie se montando à
   direita, preso na tela enquanto a rolagem avança os quadros. O fundo dos
   quadros foi acertado para o creme do site e a borda do palco se dissolve
   nele. O texto sobe um pouco acima do centro, alinhado com o topo do
   cookie. Sem JavaScript ou com movimento reduzido, a seção ocupa uma tela
   com o cookie pronto e a lista inteira. */
.construcao {
  position:relative
}

.construcao-pin {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  align-items:center;
  column-gap:4%;
  height:100svh;
  padding:max(84px,9svh) 6% clamp(24px,5svh,56px);
  overflow:hidden
}

.construcao-texto {
  align-self:center;
  translate:0 -6svh
}

.construcao-texto h2 {
  font-size:min(clamp(44px,5vw,72px),10svh);
  margin-bottom:min(30px,3.4svh)
}

.construcao-etapas {
  display:grid;
  gap:min(10px,1.6svh);
  margin:0;
  padding:0;
  list-style:none
}

.construcao-etapas li {
  display:flex;
  align-items:baseline;
  gap:16px;
  color:var(--brown);
  font-family:Chicle,var(--display);
  font-size:clamp(28px,4.4vw,min(64px,7.4svh));
  line-height:1
}

.construcao-etapas span {
  min-width:2.4ch;
  font-family:var(--display);
  font-size:max(14px,.32em);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--choco)
}

.construcao-palco {
  position:relative;
  justify-self:center;
  width:min(115%,96svh);
  aspect-ratio:1;
  -webkit-mask:radial-gradient(closest-side,#000 80%,transparent);
  mask:radial-gradient(closest-side,#000 80%,transparent)
}

.construcao-quadro,.construcao-canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%
}

.construcao-canvas {
  display:none
}

.construcao-barra {
  display:none
}

/* Com a rolagem ligada: a seção ocupa quatro telas e o conteúdo fica preso. */
.construcao-ativa .construcao {
  height:400svh
}

.construcao-ativa .construcao-pin {
  position:sticky;
  top:0
}

/* Seções presas no celular: quando a barra do navegador some, a tela cresce
   (de 100svh para 100lvh) e aparecia uma faixa branca embaixo delas. As
   partes presas passam a ter a altura da tela maior; o conteúdo continua
   arrumado na menor, com a sobra embaixo como borda transparente (que
   mostra o fundo). No computador as duas medidas são iguais. */
.construcao-ativa .construcao-pin,.caixa-ativa .caixa-pin {
  height:100lvh;
  border-bottom:calc(100lvh - 100svh) solid transparent
}

.cena-ativa .cena-pin {
  height:100lvh;
  background:var(--cream)
}

.cena-ativa .combo {
  height:auto
}

.caixa-ativa .caixa-luz {
  bottom:calc(100svh - 100lvh)
}

.construcao-ativa .construcao-canvas {
  display:block
}

.construcao-desenhada .construcao-quadro {
  visibility:hidden
}

.construcao-ativa .construcao-etapas li {
  opacity:.28;
  transform:translateX(0);
  transition:opacity .35s var(--ease-out),transform .45s var(--ease-out)
}

.construcao-ativa .construcao-etapas li.is-feita {
  opacity:.5
}

.construcao-ativa .construcao-etapas li.is-active {
  opacity:1;
  transform:translateX(14px)
}

.construcao-ativa .construcao-barra {
  display:block;
  position:absolute;
  left:6%;
  right:6%;
  bottom:clamp(14px,3svh,32px);
  height:3px;
  border-radius:3px;
  background:rgba(118,55,20,.16)
}

.construcao-barra span {
  display:block;
  height:100%;
  border-radius:inherit;
  background:var(--brown);
  transform-origin:left;
  scale:0 1
}

@media(max-width:800px) {
  .construcao-pin {
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr) auto;
    justify-items:center;
    row-gap:min(10px,1.4svh);
    padding:max(76px,11svh) 6% max(28px,5svh);
    text-align:center
  }

  .construcao-texto {
    display:contents;
    translate:none
  }

  .construcao-texto h2 {
    font-size:min(40px,5.4svh);
    margin-bottom:0
  }

  .construcao-palco {
    grid-row:2;
    width:min(120vw,60svh);
    margin:-4svh calc((88vw - min(120vw,60svh)) / 2);
    align-self:center
  }

  .construcao-etapas {
    grid-row:3;
    margin-bottom:14px;
    grid-template-columns:repeat(2,auto);
    gap:min(8px,1.2svh) 26px
  }

  .construcao-etapas li {
    gap:8px;
    font-size:min(30px,4.4svh)
  }

  .construcao-etapas span {
    min-width:0;
    font-size:12px
  }

  .construcao-ativa .construcao-etapas li.is-active {
    transform:none
  }
}

/* Divisa entre o painel do combo e a foto: em vez de uma linha reta, a
   mesma borda de chocolate escorrendo da entrada do painel (.cena-frente),
   espelhada, com pingos sobre a foto. Acompanha a foto enquanto ela se
   abre (--foto, combo.js). */
.combo-borda {
  position:absolute;
  z-index:1;
  top:0;
  left:calc((1 - var(--foto,1)) * 100%);
  width:clamp(44px,5vw,84px);
  height:100%;
  overflow:visible;
  scale:-1 1;
  pointer-events:none
}

/* No celular o painel fica em cima da foto: a mesma borda, deitada,
   escorre do painel para baixo sobre a foto. */
.combo-borda-h {
  display:none
}

@media(max-width:800px) {
  .combo-borda {
    display:none
  }

  .combo-borda-h {
    display:block;
    position:absolute;
    z-index:1;
    top:calc((1 - var(--foto,1)) * 100% - 1px);
    left:0;
    width:100%;
    height:clamp(30px,9vw,52px);
    overflow:visible;
    scale:1 -1;
    pointer-events:none
  }
}

/* Botões animados (botoes.js), a partir de componentes do 21st.dev.
   FlowButton nos botões cheios: a bola do centro cresce e pinta o botão,
   o texto anda, uma seta entra pela esquerda e a outra sai pela direita. */
.button.flow {
  --flow-tinta:var(--choco-deep);
  --flow-texto:var(--cream);
  position:relative;
  isolation:isolate;
  overflow:hidden;
  gap:4px;
  padding-inline:36px 40px;
  transition:border-radius .6s var(--ease-out),color .6s var(--ease-out),transform .16s var(--ease-out)
}

.button-light.flow {
  --flow-tinta:var(--dough);
  --flow-texto:var(--choco-deep)
}

.flow-texto {
  position:relative;
  z-index:1;
  transition:translate .8s var(--ease-out)
}

.flow-seta {
  position:absolute;
  z-index:2;
  top:50%;
  display:grid;
  width:18px;
  translate:0 -50%;
  transition:left .8s var(--ease-out),right .8s var(--ease-out)
}

.flow-seta svg {
  width:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round
}

.flow-entra {
  left:-25%
}

.flow-sai {
  right:16px
}

.flow-bola {
  position:absolute;
  z-index:0;
  top:50%;
  left:50%;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--flow-tinta);
  opacity:0;
  translate:-50% -50%;
  transition:scale .8s var(--ease-out),opacity .6s var(--ease-out)
}

.button.flow:active {
  transform:scale(.95)
}

@media(hover:hover) {
  .button.flow:hover,.button.flow:focus-visible {
    border-radius:16px;
    color:var(--flow-texto)
  }

  .button.flow:hover,.button-light.flow:hover {
    background:var(--brown)
  }

  .button-light.flow:hover {
    background:var(--cream)
  }

  .button.flow:hover .flow-texto,.button.flow:focus-visible .flow-texto {
    translate:12px 0
  }

  .button.flow:hover .flow-entra,.button.flow:focus-visible .flow-entra {
    left:16px
  }

  .button.flow:hover .flow-sai,.button.flow:focus-visible .flow-sai {
    right:-25%
  }

  .button.flow:hover .flow-bola,.button.flow:focus-visible .flow-bola {
    opacity:1;
    scale:28
  }
}

/* Interactive Hover Button no "Escolher um cookie" da sacola vazia e no
   "Voltar ao início" do cardápio: o ponto cresce e pinta o botão, o texto
   sai e volta com uma seta (para a esquerda no "Voltar"). */
.ihb {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 24px;
  border:1.5px solid var(--brown);
  border-radius:999px
}

.ihb-ponto {
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--brown);
  transition:scale .5s var(--ease-out)
}

.ihb-texto {
  display:inline-block;
  transition:translate .5s var(--ease-out),opacity .5s var(--ease-out)
}

.ihb-novo {
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:var(--cream);
  opacity:0;
  translate:48px 0;
  transition:translate .5s var(--ease-out),opacity .5s var(--ease-out)
}

.ihb-novo svg {
  width:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round
}

@media(hover:hover) {
  .ihb:hover .ihb-ponto,.ihb:focus-visible .ihb-ponto {
    scale:60
  }

  .ihb:hover .ihb-texto,.ihb:focus-visible .ihb-texto {
    translate:48px 0;
    opacity:0
  }

  .ihb:hover .ihb-novo,.ihb:focus-visible .ihb-novo {
    translate:0 0;
    opacity:1
  }
}

/* Setas dos sabores no estilo do Button 7 (ui-layouts): o chocolate entra
   da esquerda e pinta o círculo, e a seta atravessa: sai por um lado e
   volta pelo outro. */
.sabor-seta {
  --lado:1;
  isolation:isolate;
  overflow:visible
}

.sabor-seta-voltar {
  --lado:-1
}

.sabor-seta::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  border-radius:50%;
  background:linear-gradient(90deg,var(--brown),var(--choco));
  clip-path:inset(0 calc(100% - var(--tinta,0%)) 0 0 round 999px);
  transition:clip-path .45s var(--ease-out)
}

.sabor-seta-voltar::before {
  clip-path:inset(0 0 0 calc(100% - var(--tinta,0%)) round 999px)
}

@media(hover:hover) {
  .sabor-seta:hover {
    --tinta:100%;
    background:none
  }

  .sabor-seta:hover>svg:first-child {
    animation:seta-atravessa .5s var(--ease-out)
  }
}

@keyframes seta-atravessa {
  45% {
    translate:calc(var(--lado) * 22px) 0;
    opacity:0
  }

  46% {
    translate:calc(var(--lado) * -22px) 0;
    opacity:0
  }

  100% {
    translate:0 0;
    opacity:1
  }
}

/* Dock (anurag-mishra22) no carrinho e nos três tracinhos: sobem e crescem
   com o mouse em cima, e a legenda aparece embaixo. A logo dá um giro curto,
   como um cookie virando. */
.carrinho::after,.menu-toggle::after {
  content:attr(data-legenda);
  position:absolute;
  top:calc(100% + 10px);
  left:50%;
  padding:3px 9px;
  border-radius:999px;
  background:var(--choco-deep);
  color:var(--cream);
  font-family:var(--display);
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
  opacity:0;
  translate:-50% -4px;
  pointer-events:none;
  transition:opacity .2s,translate .3s var(--ease-out)
}

.carrinho,.menu-toggle {
  transition:opacity .3s,transform .16s var(--ease-out),translate .35s cubic-bezier(.34,1.56,.64,1),scale .35s cubic-bezier(.34,1.56,.64,1)
}

.carrinho svg {
  transition:rotate .4s cubic-bezier(.34,1.56,.64,1)
}

.header .brand img {
  transition:rotate .5s cubic-bezier(.34,1.56,.64,1),scale .5s cubic-bezier(.34,1.56,.64,1)
}

@media(hover:hover) {
  .carrinho:hover,.menu-toggle:hover {
    translate:0 -3px;
    scale:1.1
  }

  .carrinho:hover::after,.menu-toggle:hover::after {
    opacity:1;
    translate:-50% 0
  }

  .menu-open .menu-toggle::after {
    display:none
  }

  .carrinho:hover svg {
    rotate:-10deg
  }

  .menu-toggle:hover span:nth-child(1) {
    transform:translateY(-7px)
  }

  .menu-toggle:hover span:nth-child(3) {
    transform:translateY(7px)
  }

  .menu-open .menu-toggle:hover span:nth-child(1) {
    transform:rotate(45deg)
  }

  .menu-open .menu-toggle:hover span:nth-child(3) {
    transform:rotate(-45deg)
  }

  .header .brand:hover img {
    rotate:-14deg;
    scale:1.08
  }
}

@media(prefers-reduced-motion:reduce) {
  .flow-bola,.flow-texto,.flow-seta,.ihb-ponto,.ihb-texto,.ihb-novo,.sabor-seta::before,.carrinho,.menu-toggle,.header .brand img {
    transition:none
  }

  .sabor-seta:hover>svg:first-child {
    animation:none
  }
}

/* "Voltar ao início": o mesmo botão, andando para a esquerda. */
.cardapio-volta.ihb {
  width:fit-content;
  justify-self:start;
  align-self:flex-start;
  color:var(--brown);
  text-decoration:none
}

.ihb-volta .ihb-novo {
  translate:-48px 0
}

.ihb-volta .ihb-novo svg {
  rotate:180deg
}

@media(hover:hover) {
  .ihb-volta:hover .ihb-texto,.ihb-volta:focus-visible .ihb-texto {
    translate:-48px 0
  }
}

/* Rodapé: a logo gira como a do topo, e os links ganham o sublinhado
   "Comes In Goes Out" do menu no lugar do sublinhado comum. */
.rodape .brand img {
  transition:rotate .5s cubic-bezier(.34,1.56,.64,1),scale .5s cubic-bezier(.34,1.56,.64,1)
}

.rodape-links a {
  position:relative;
  display:inline-block;
  transition:translate .35s var(--ease-out),color .2s
}

.rodape-links a::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  height:1.5px;
  border-radius:2px;
  background:var(--dough);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .45s var(--ease-out)
}

.rodape-links a:hover {
  text-decoration:none
}

.rodape-links a:focus-visible::after {
  transform:scaleX(1);
  transform-origin:left
}

@media(hover:hover) {
  .rodape .brand:hover img {
    rotate:-14deg;
    scale:1.08
  }

  .rodape-links a:hover {
    translate:4px 0;
    color:var(--dough)
  }

  .rodape-links a:hover::after {
    transform:scaleX(1);
    transform-origin:left
  }
}

@media(prefers-reduced-motion:reduce) {
  .rodape .brand img,.rodape-links a,.rodape-links a::after {
    transition:none
  }

  .rodape-cookie {
    animation:none
  }
}

/* Sem JavaScript o rodapé aparece pronto; com ele, nasce com a rolagem. */
.js .rodape {
  --sol:0
}

/* Caixa abrindo (caixa.js), no estilo do Scroll Expansion Hero: depois do
   combo, a caixa da casa cresce até a frente branca cobrir a tela e tudo vira
   branco, como se a gente entrasse nela. Sem JavaScript ou com movimento
   reduzido, ocupa uma tela com a caixa parada. O escorrido de chocolate do
   combo passa para o topo desta seção. */
.caixa-abre {
  --g:0;
  --s:1;
  --luz:0;
  position:relative;
  background:var(--cream)
}

.caixa-pin {
  position:relative;
  display:grid;
  place-items:center;
  height:100svh;
  overflow:hidden
}

/* Desde 31/10/2026 a tampa abre num vídeo em quadros (caixa.js). O quadro
   tem o fundo creme do clipe, quase igual ao do site; as bordas somem num
   degradê para não aparecer emenda. O zoom final mira o branco da tampa
   (transform-origin). Sem JavaScript, fica a caixa aberta parada. */
.caixa-midia {
  grid-area:1/1;
  z-index:1;
  position:relative;
  width:min(56vw,760px,90svh);
  aspect-ratio:600/520;
  transform-origin:50% 26%;
  scale:var(--s);
  filter:blur(calc(var(--g) * var(--g) * 14px));
  -webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(transparent,#000 7%,#000 86%,transparent);
  -webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(transparent,#000 7%,#000 86%,transparent);
  mask-composite:intersect
}

.caixa-quadro,.caixa-canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%
}

.caixa-canvas {
  display:none
}

.caixa-ativa .caixa-canvas {
  display:block
}

.caixa-desenhada .caixa-quadro {
  visibility:hidden
}

.caixa-titulo {
  grid-area:1/1;
  z-index:2;
  display:flex;
  justify-content:space-between;
  width:100%;
  padding:0 5%;
  color:var(--brown);
  font-size:clamp(46px,7vw,min(120px,17svh));
  pointer-events:none
}

.caixa-palavra {
  display:inline-block;
  opacity:calc(1 - var(--g) * 1.4)
}

.caixa-esq {
  translate:calc(var(--g) * -40vw) 0
}

.caixa-dir {
  translate:calc(var(--g) * 40vw) 0
}

.caixa-luz {
  position:absolute;
  inset:0;
  z-index:3;
  background:#fffdf9;
  opacity:var(--luz);
  pointer-events:none
}

.caixa-ativa .caixa-abre {
  height:300svh
}

.caixa-ativa .caixa-pin {
  position:sticky;
  top:0
}

/* A encomenda entra assim que o zoom da caixa termina. A sobreposição
   evita uma tela vazia; o degradê une o branco da tampa ao creme do contato. */
.caixa-ativa .caixa-abre + .contact {
  z-index:4;
  margin-top:-35svh;
  background:linear-gradient(#fffdf9,var(--cream) 35svh)
}

@media(max-width:800px) {
  .caixa-midia {
    width:min(104vw,58svh)
  }

  /* No celular, "Abra a caixa" fica junto, numa linha logo acima da tampa
     aberta (pedido de Miguel em 31/10/2026: as palavras soltas no alto e no
     pé da tela pareciam avulsas). No zoom, a frase sobe inteira e some. */
  .caixa-titulo {
    align-self:start;
    justify-content:center;
    gap:.28em;
    padding:max(96px,21svh) 6% 0;
    font-size:min(52px,7svh)
  }

  .caixa-esq,.caixa-dir {
    translate:0 calc(var(--g) * -30svh)
  }
}

/* No celular a foto da pilha sobe de baixo para cima, e a borda de
   chocolate desce junto com a beirada dela (--foto, combo.js). */
@media(max-width:800px) {
  .cena-ativa .combo-pilha {
    clip-path:inset(calc((1 - var(--foto)) * 100%) 0 0 0);
    transform:none
  }
}

/* O filete claro da borda só aparece quando a foto já começou a abrir;
   antes ele ficaria solto sobre o chocolate. */
.combo-borda path[fill="none"],.combo-borda-h path[fill="none"] {
  opacity:clamp(0,calc(var(--foto,1) * 12),1)
}

/* Volta do Mercado Pago (pedido.html, 01/11/2026): um cartão creme sobre o
   chocolate, com o estado do pagamento, o resumo e o botão do WhatsApp. */
.pagina-pedido {
  background:var(--choco)
}

.pedido {
  display:grid;
  place-items:center;
  min-height:100svh;
  background:var(--choco);
  padding:calc(var(--hh) + 16px) 5% 40px
}

.pedido-cartao {
  display:flex;
  flex-direction:column;
  align-items:center;
  width:min(520px,100%);
  padding:clamp(28px,5svh,44px) clamp(22px,5vw,40px);
  border-radius:28px;
  background:var(--cream);
  color:var(--ink);
  text-align:center
}

.pedido-selo {
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  margin:0 0 14px;
  border-radius:50%;
  background:var(--sand);
  color:var(--brown);
  font-family:var(--display);
  font-weight:700;
  font-size:30px
}

.pedido-selo::before {
  content:"…"
}

[data-estado="pago"] .pedido-selo {
  background:var(--brown);
  color:var(--cream)
}

[data-estado="pago"] .pedido-selo::before {
  content:"✓"
}

[data-estado="falhou"] .pedido-selo::before,[data-estado="erro"] .pedido-selo::before {
  content:"!"
}

[data-estado="carregando"] .pedido-selo,[data-estado="aguardando"] .pedido-selo {
  animation:pedido-pulsa 1.4s ease-in-out infinite
}

@keyframes pedido-pulsa {
  50% {
  scale:.9;
  opacity:.6
}

}

.pedido-titulo {
  margin:0;
  color:var(--brown);
  font-family:Chicle,var(--display);
  font-weight:400;
  font-size:clamp(34px,6vw,48px);
  line-height:1.05
}

.pedido-texto {
  margin:10px 0 0;
  max-width:36ch
}

.pedido-resumo {
  width:100%;
  margin:22px 0 0;
  text-align:left
}

.pedido-resumo>div {
  display:grid;
  grid-template-columns:76px 1fr;
  gap:12px;
  padding:10px 0;
  border-top:1px solid var(--line)
}

.pedido-resumo dt {
  color:var(--brown);
  font-family:var(--display);
  font-weight:600
}

.pedido-resumo dd {
  margin:0;
  overflow-wrap:anywhere
}

.pedido-itens span {
  display:block
}

.pedido-resumo dd,.pedido-itens span {
  text-wrap:pretty
}

.pedido-whats {
  width:100%;
  margin-top:22px
}

.pedido-voltar {
  margin-top:14px;
  padding:4px;
  color:var(--brown);
  font-size:15px
}

@media(prefers-reduced-motion:reduce) {
  .pedido-selo {
    animation:none!important
  }
}