/* =========================================================
   Restaurante Sabor de Minas — BIO PRIME
   Direção: a marmita servida em prato esmaltado. Branco de
   esmalte, aro vinho (a cor da casa) e a gema do ovo nos preços.
   A abertura é a tampa da logo sendo levantada.
   ========================================================= */

:root {
  /* Cor — vinho do Saipos (#852727) e da logo, branco do esmalte, gema do ovo */
  --esmalte: #FCFBF8;          /* fundo: prato esmaltado */
  --vinho: #852727;            /* títulos, aro dos pratos, ação principal (8,7:1 no esmalte) */
  --vinho-press: #6E1E1F;
  --vinho-fundo: #5A1719;      /* cenas escuras e rodapé */
  --tinta: #2B1B18;            /* texto */
  --gema: #F2B634;             /* preço e "aberto agora" (só como fundo ou sobre o vinho) */
  --tinta-soft: rgba(43, 27, 24, 0.74);
  --esmalte-soft: rgba(252, 251, 248, 0.84);
  --linha: rgba(133, 39, 39, 0.22);
  --linha-clara: rgba(252, 251, 248, 0.24);

  /* Tipografia — uma serifada caseira e robusta, uma de leitura */
  --display: "Young Serif", Georgia, "Times New Roman", serif;
  --text: "Albert Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Espaço e forma (raio por papel) */
  --gutter: 20px;
  --scene: 60px;
  --r-acao: 14px;
  --r-prato: 26px;
  --r-pill: 999px;

  /* Motion */
  --motion-instant: 80ms;
  --motion-fast: 140ms;
  --motion-standard: 220ms;
  --motion-emphasis: 320ms;
  --motion-scene: 420ms;
  --motion-assinatura: 1800ms;
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-standard: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-servir: cubic-bezier(0.45, 0, 0.15, 1);   /* mão firme: arranca devagar, pousa macio */
  --shift-cta: 14px;
  --press-scale: 0.97;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --shift-cta: 0px;
    --press-scale: 1;
  }
}

/* ---------- Base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--vinho-fundo);
}

body {
  margin: 0;
  background: var(--esmalte);
  color: var(--tinta);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
a { color: inherit; }

.page {
  max-width: 560px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--esmalte);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:focus-visible {
  outline: 3px solid var(--foco, var(--vinho));
  outline-offset: 3px;
  border-radius: 6px;
}

.skip {
  position: absolute;
  left: 12px;
  top: calc(12px + var(--safe-top));
  z-index: 40;
  padding: 12px 18px;
  border-radius: var(--r-acao);
  background: var(--vinho);
  color: var(--esmalte);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* marco invisível: passou dele, a pessoa começou a rolar */
.marco-scroll {
  position: absolute;
  top: 160px;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.titulo {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(30px, 8.6vw, 38px);
  line-height: 1.1;
  color: var(--vinho);
  text-wrap: balance;
}

/* ---------- O prato: aro de esmalte + fio vinho ---------- */

.prato {
  overflow: hidden;
  border-radius: var(--r-prato);
  background: #EDE4DC;
  box-shadow:
    0 0 0 6px var(--esmalte),
    0 0 0 8px var(--vinho);
}
.prato img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Botões ---------- */

.btn,
.cta-flutuante,
.ancora,
.link-acao,
.hero__ig,
.tampa,
.mapa-local__abrir,
.final__contato a {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard);
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 14px 22px;
  border: 2px solid transparent;
  border-radius: var(--r-acao);
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}
.btn i { font-size: 20px; }

.btn--esmalte {
  background: var(--esmalte);
  color: var(--vinho);
}
.btn--esmalte:active { background: #EFE6DE; }

.btn--linha {
  border-color: var(--linha-clara);
  color: var(--esmalte);
  background: transparent;
}
.btn--linha:active { background: rgba(252, 251, 248, 0.1); }

.btn--linha-vinho {
  border-color: var(--vinho);
  color: var(--vinho);
  background: transparent;
}
.btn--linha-vinho:active { background: rgba(133, 39, 39, 0.08); }

.btn:active,
.cta-flutuante:active,
.ancora:active,
.link-acao:active,
.hero__ig:active,
.mapa-local__abrir:active,
.final__contato a:active {
  transform: scale(var(--press-scale));
}

/* ---------- Cena 1: Hero ---------- */

.hero {
  padding: calc(14px + var(--safe-top)) var(--gutter) var(--scene);
}

.hero__bar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero__logo {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

.hero__ig {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 48px;
  padding: 0 14px;
  border: 1.5px solid var(--linha);
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.hero__ig span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hero__ig i { color: var(--vinho); font-size: 18px; }

/* O nome e a tampa */
.servir {
  position: relative;
  margin-top: 26px;
}

.servir__pre {
  font-size: 17px;
  font-weight: 600;
  color: var(--vinho);
}

.nome {
  width: fit-content;
  margin-top: 2px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(50px, 15.4vw, 70px);
  line-height: 0.98;
  color: var(--vinho);
  letter-spacing: -0.01em;
}

.tampa {
  position: absolute;
  top: -14px;                   /* pousa na linha do "Restaurante", à direita */
  right: 0;
  width: 72px;
  height: 52px;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--vinho);
  cursor: pointer;
  transform-origin: 50% 100%;
  --foco: var(--vinho);
}
.tampa svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.tampa__cupula,
.tampa__pegador,
.tampa__aba { fill: currentColor; }
.tampa__brilho {
  fill: none;
  stroke: var(--esmalte);
  stroke-width: 4;
  stroke-linecap: round;
  opacity: 0.5;
}

.vapor {
  position: absolute;
  left: var(--vx, 50%);
  top: var(--vy, 0);
  width: var(--vw, 120px);
  height: auto;
  translate: -50% -100%;
  overflow: visible;
  pointer-events: none;
  visibility: hidden;
}
.vapor path {
  fill: none;
  stroke: var(--vinho);
  stroke-width: 3.5;
  stroke-linecap: round;
  opacity: 0;
}

/* Abertura. Sem JS: nome e tampa no lugar final.
   Com JS: o nome espera por baixo da tampa; se o script falhar, aparece sozinho em 2,6s. */
.js .nome {
  clip-path: ellipse(0% 0% at 50% 100%);
  animation: revela-seguro 0s linear 2.6s forwards;
}
.js .tampa {
  opacity: 0;
  animation: revela-seguro 0s linear 2.6s forwards;
}

.abertura .nome {
  animation: nome-revela 760ms var(--ease-servir) 380ms forwards;
}
.abertura .tampa {
  opacity: 1;
  animation: tampa-abre var(--motion-assinatura) var(--ease-servir) forwards;
}
.abertura .vapor { visibility: visible; }
.abertura .vapor path { animation: vapor-sobe 1200ms var(--ease-enter) 560ms forwards; }
.abertura .vapor path:nth-child(2) { animation-delay: 680ms; }
.abertura .vapor path:nth-child(3) { animation-delay: 800ms; }

.sem-abertura .nome { animation: nome-revela 420ms var(--ease-enter) forwards; }
.sem-abertura .tampa { animation: tampa-chega 320ms var(--ease-enter) forwards; }

.servido .nome,
.servido .tampa {
  animation: none;
  clip-path: none;
  opacity: 1;
}

@keyframes revela-seguro {
  to { clip-path: none; opacity: 1; }
}

@keyframes nome-revela {
  from { clip-path: ellipse(0% 0% at 50% 100%); }
  to   { clip-path: ellipse(82% 165% at 50% 100%); }
}

/* --lx, --ly, --ls: o caminho da tampa grande (sobre o nome) até o lugar dela, medido no script */
@keyframes tampa-abre {
  0%   { transform: translate(var(--lx), var(--ly)) scale(var(--ls)); }
  9%   { transform: translate(var(--lx), var(--ly)) scale(var(--ls)) rotate(-2.5deg); }
  15%  { transform: translate(var(--lx), var(--ly)) scale(var(--ls)) rotate(1.5deg); }
  21%  { transform: translate(var(--lx), var(--ly)) scale(var(--ls)) rotate(0deg); }
  50%  { transform: translate(calc(var(--lx) + 28px), calc(var(--ly) - 64px)) scale(var(--ls)) rotate(-11deg); }
  100% { transform: none; }
}

@keyframes tampa-chega {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes vapor-sobe {
  0%   { opacity: 0; transform: translateY(14px) scaleY(0.7); }
  35%  { opacity: 0.55; }
  100% { opacity: 0; transform: translateY(-26px) scaleY(1.15); }
}

/* Eco: um toque na tampa levanta de leve e solta um fio de vapor */
.servido .tampa.is-eco { animation: tampa-eco 760ms var(--ease-servir); }
.servir.is-eco .vapor { visibility: visible; }
.servir.is-eco .vapor path { animation: vapor-sobe 900ms var(--ease-enter) 120ms; }
.servir.is-eco .vapor path:nth-child(2) { animation-delay: 200ms; }
.servir.is-eco .vapor path:nth-child(3) { animation-delay: 280ms; }

@keyframes tampa-eco {
  0%, 100% { transform: none; }
  40%      { transform: translate(6px, -14px) rotate(-12deg); }
}

.hero__lead {
  max-width: 30ch;
  margin-top: 14px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
}

.prato--hero {
  margin: 30px 8px 0;
  aspect-ratio: 1;
}

.status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  font-weight: 600;
}
.status__ponto {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--vinho);
  opacity: 0.4;
}
.status.is-aberto .status__ponto {
  background: var(--gema);
  opacity: 1;
  box-shadow: 0 0 0 3px rgba(242, 182, 52, 0.3);
}

.ancora {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin-top: 4px;
  color: var(--vinho);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* ---------- Cena 2: o mapa da marmita ---------- */

.marmita {
  padding: 0 var(--gutter) var(--scene);
}

.marmita__lead {
  max-width: 34ch;
  margin-top: 12px;
}

.tamanhos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 24px;
}
.tamanhos li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px 16px;
  border-radius: var(--r-acao);
  background: var(--vinho);
  color: var(--esmalte);
}
.tamanhos__nome {
  font-family: var(--display);
  font-size: 22px;
  line-height: 1.1;
}

.preco {
  align-self: flex-start;
  padding: 3px 12px;
  border-radius: var(--r-pill);
  background: var(--gema);
  color: var(--tinta);
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
}

/* vista de cima da marmita: três divisórias, a maior é a dos acompanhamentos */
.mapa {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-areas:
    "acomp carne"
    "acomp salada";
  gap: 6px;
  margin-top: 22px;
  padding: 6px;
  border-radius: 22px;
  background: var(--vinho);
}
.mapa__div {
  padding: 14px 12px 16px;
  background: var(--esmalte);
}
.mapa__div--acomp { grid-area: acomp; border-radius: 17px 6px 6px 17px; }
.mapa__div--carne { grid-area: carne; border-radius: 6px 17px 6px 6px; }
.mapa__div--salada { grid-area: salada; border-radius: 6px 6px 17px 6px; }

.mapa__titulo {
  font-family: var(--display);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.15;
  color: var(--vinho);
  -webkit-hyphens: auto;
  hyphens: auto;
}
.mapa__regra {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tinta-soft);
}
.mapa__itens {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.3;
}
.mapa__itens li {
  padding-left: 12px;
  border-left: 2px solid var(--linha);
}

.mapa__nota {
  margin-top: 12px;
  font-size: 14px;
  color: var(--tinta-soft);
}

.extras {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--linha);
}
.extras__titulo {
  font-family: var(--display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.15;
  color: var(--vinho);
}
.extras__lista {
  display: grid;
  margin-top: 10px;
}
.extras__lista li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--linha);
}
.extras__preco {
  font-weight: 700;
  color: var(--vinho);
  white-space: nowrap;
}
.extras__nota {
  margin-top: 12px;
  font-size: 15px;
  color: var(--tinta-soft);
}

.link-acao {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin-top: 16px;
  color: var(--vinho);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* ---------- Cena 3: do balcão ---------- */

.balcao {
  padding: 0 0 calc(var(--scene) + 4px);
}
.balcao__head {
  padding: 0 var(--gutter);
}
.balcao__head p {
  max-width: 36ch;
  margin-top: 10px;
}

.trilho {
  margin-top: 22px;
  padding: 10px 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--gutter);
  scrollbar-width: none;
}
.trilho::-webkit-scrollbar { display: none; }

.trilho__lista {
  display: flex;
  gap: 22px;
  width: max-content;
  padding: 0 calc(var(--gutter) + 8px);
}
.trilho__lista li {
  flex: none;
  width: min(62vw, 250px);
  aspect-ratio: 4 / 5;
  scroll-snap-align: start;
}

/* ---------- Cena 4: como pedir (vinho) ---------- */

.cena-vinho {
  background: var(--vinho-fundo);
  color: var(--esmalte);
  --foco: var(--gema);
}
.cena-vinho .titulo { color: var(--esmalte); }

.pedir {
  padding: var(--scene) var(--gutter);
  border-radius: 32px 32px 0 0;
}

.jeitos {
  display: grid;
  gap: 20px;
  margin-top: 24px;
}
.jeitos li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: start;
}
.jeitos i {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(252, 251, 248, 0.1);
  color: var(--gema);
  font-size: 20px;
}
.jeitos h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}
.jeitos p {
  margin-top: 2px;
  color: var(--esmalte-soft);
}

.pagamento {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--linha-clara);
}
.pagamento__titulo {
  font-family: var(--display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.15;
}
.pagamento__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.pagamento__lista li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--linha-clara);
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 600;
}
.pagamento__lista li:nth-child(-n+2) {
  border-color: var(--gema);
  background: var(--gema);
  color: var(--tinta);
}
.pagamento__lista i { font-size: 14px; opacity: 0.85; }

/* ---------- Cena 5: horário e endereço ---------- */

.onde {
  display: grid;
  gap: 18px;
  padding: var(--scene) var(--gutter);
}

.horario {
  width: 100%;
  border-collapse: collapse;
  font-size: 17px;
}
.horario th,
.horario td {
  padding: 12px 0;
  border-bottom: 1px solid var(--linha);
  text-align: left;
}
.horario th { font-weight: 600; }
.horario td {
  text-align: right;
  font-weight: 700;
  color: var(--vinho);
}
.horario tr.is-hoje th::after {
  content: "hoje";
  margin-left: 10px;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: var(--gema);
  color: var(--tinta);
  font-size: 13px;
  font-weight: 700;
  vertical-align: 2px;
}

.endereco {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  font-size: 17px;
  line-height: 1.45;
}
.endereco i {
  margin-top: 4px;
  color: var(--vinho);
}

.mapa-local {
  display: none;
}
.js .mapa-local {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-prato);
  background:
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(133, 39, 39, 0.07) 46px 48px),
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(133, 39, 39, 0.07) 46px 48px),
    #F3EEE8;
  box-shadow: 0 0 0 1px var(--linha);
}
.mapa-local__abrir {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  border: 0;
  background: none;
  color: var(--vinho);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.mapa-local__abrir i { font-size: 28px; }
.mapa-local iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Cena 6: CTA final ---------- */

.final {
  display: grid;
  gap: 14px;
  padding: var(--scene) var(--gutter) 48px;
}
.final__titulo { font-size: clamp(38px, 11.4vw, 48px); }
.final > p {
  margin-bottom: 10px;
  color: var(--esmalte-soft);
  font-size: 18px;
}

.final__contato {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin-top: 6px;
}
.final__contato a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.final__contato i { color: var(--gema); }

/* ---------- Rodapé ---------- */

.rodape {
  padding: 26px var(--gutter) calc(28px + var(--safe-bottom));
  border-top: 1px solid var(--linha-clara);
  background: var(--vinho-fundo);
  color: var(--esmalte);
  text-align: center;
  --foco: var(--gema);
}
.rodape__copy {
  font-size: 14px;
  color: var(--esmalte-soft);
}

.credito {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  margin: 18px auto 0;
  text-align: left;
  font-size: 13px;
  line-height: 1.35;
  color: var(--esmalte);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.credito-txt strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.selo-b2 {
  --seal-ink: currentColor;
  --seal-accent: var(--gema);
  --seal-ring: 0;                /* fio liso: o aro do prato esmaltado */
  --seal-font: var(--text);
  flex: none;
  width: 72px;
  height: 72px;
  overflow: visible;
  transition: rotate 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.selo-borda,
.selo-anel { fill: none; stroke: var(--seal-ink); }
.selo-borda { stroke-width: 1; }
.selo-anel { stroke-width: 0.7; stroke-dasharray: var(--seal-ring); opacity: 0.75; }
.selo-texto {
  fill: var(--seal-ink);
  font-family: var(--seal-font);
  font-size: 6.3px;
  font-weight: 600;
  letter-spacing: 0.8px;
}
.selo-b { fill: var(--seal-ink); }
.selo-acento { fill: var(--seal-accent); }

.credito:active .selo-b2 { rotate: -10deg; }

.selo-giro {
  transform-box: view-box;
  transform-origin: 50px 50px;
}
@keyframes selo-gira { to { transform: rotate(360deg); } }
@keyframes selo-flutua {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -3px; }
}
@media (prefers-reduced-motion: no-preference) {
  .selo-giro { animation: selo-gira 24s linear infinite; }
  .selo-b2 { animation: selo-flutua 4.8s ease-in-out infinite; }
  .selo-b2.is-still,
  .selo-b2.is-still .selo-giro,
  .is-page-hidden .selo-b2,
  .is-page-hidden .selo-giro { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .credito:active .selo-b2 { rotate: none; }
}

/* ---------- CTA flutuante (Regra do CTA) ---------- */

.cta-flutuante {
  position: fixed;
  left: 50%;
  bottom: calc(16px + var(--safe-bottom));
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 26px;
  border-radius: var(--r-pill);
  background: var(--vinho);
  color: var(--esmalte);
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 0 0 4px var(--esmalte), 0 14px 30px -10px rgba(90, 23, 25, 0.6);
  --foco: var(--tinta);
  translate: -50% var(--shift-cta);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--motion-standard) var(--ease-exit),
    translate var(--motion-standard) var(--ease-exit),
    visibility 0s linear var(--motion-standard),
    transform var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard);
}
.cta-flutuante i { font-size: 22px; }
.cta-flutuante:active { background: var(--vinho-press); }

.cta-flutuante.is-visivel {
  translate: -50% 0;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 280ms var(--ease-enter),
    translate 280ms var(--ease-enter),
    visibility 0s,
    transform var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard);
}

/* ---------- Telas maiores ---------- */

@media (min-width: 560px) {
  :root { --gutter: 28px; }
  .page { box-shadow: 0 0 0 1px rgba(90, 23, 25, 0.12); }
}

@media (max-width: 350px) {
  .tampa { width: 60px; height: 48px; }
  .mapa { grid-template-columns: 1fr 1fr; }
  .mapa__itens { font-size: 14px; }
}

@media (hover: hover) and (pointer: fine) {
  .cta-flutuante:hover { background: var(--vinho-press); }
  .btn--esmalte:hover { background: #F2EAE3; }
}

/* ---------- Reduced motion: a tampa já pousada, o nome aparece num fade curto ---------- */

@media (prefers-reduced-motion: reduce) {
  .js .nome,
  .abertura .nome,
  .sem-abertura .nome {
    clip-path: none;
    animation: fade-in 200ms linear both;
  }
  .js .tampa,
  .abertura .tampa,
  .sem-abertura .tampa,
  .servido .tampa.is-eco {
    opacity: 1;
    animation: none;
  }
  .vapor { display: none; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}