/* ════════════════════════════════════════════════
   Fino Sabor — Estilos
   Contraste verificado contra WCAG 2.2 AA (4.5:1 texto normal,
   3:1 texto grande e componentes). Ver README para a tabela.
   ════════════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
  --bg: #FFF5F0;
  --surface: #FFFFFF;
  --text: #2D1B3D;

  /* Texto secundário: 6.69:1 no branco, 6.23:1 no creme.
     O antigo #A890B0 dava 2.88:1 — reprovava em todo o site. */
  --muted: #6B5473;

  --border: rgba(155,107,255,.18);

  /* Cores DECORATIVAS (fundos, bordas, gradientes) — não usar em texto claro */
  --purple: #9B6BFF;
  --pink: #FF8FAB;
  --pink-soft: #FFB5C5;
  --lavender: #D4B8FF;
  --mint: #B5E8D5;
  --gold: #F5D78E;
  --gold-dark: #E8A838;
  --cream: #FFF0E0;

  /* Cores de TEXTO sobre fundo claro — todas ≥ 4.5:1 */
  --purple-text: #6D28D9;   /* 7.10:1 no branco */
  --pink-text: #C2185B;     /* 5.87:1 no branco */
  --gold-text: #8A5A00;     /* 5.93:1 no branco */

  /* Texto claro sobre painéis escuros */
  --on-dark: rgba(255,255,255,.92);
  --on-dark-soft: rgba(255,255,255,.70);   /* 9.43:1 sobre #1E0030 */
  --on-dark-faint: rgba(255,255,255,.60);  /* 7.06:1 sobre #1E0030 */

  --panel: #1E0030;
  --deep: #2D1B3D;

  --shadow-sm: 0 4px 16px rgba(155,107,255,.08);
  --shadow-md: 0 12px 40px rgba(155,107,255,.1);
  --shadow-lg: 0 24px 64px rgba(155,107,255,.12);
  --radius-card: 20px;
  --radius-pill: 100px;

  --focus: #6D28D9;
  --focus-on-dark: #F5D78E;

  /* Verde do WhatsApp em tom legível: branco sobre o #25D366 original dá
     1.98:1. Estes são os verdes escuros da própria marca — 5.12:1 e 7.67:1. */
  --wa: #0B7D5C;
  --wa-dark: #075E54;

  /* Altura reservada para a barra do carrinho fixa */
  --cart-bar-h: 92px;
}

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

html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  position: relative;
  line-height: 1.5;
}

/* Trava o scroll do fundo com modal aberto (o JS preserva a posição) */
body.modal-open {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

/* Espaço para a barra do carrinho não cobrir o último item */
body.has-cart-bar {
  padding-bottom: var(--cart-bar-h);
}

img { max-width: 100%; }

/* ── FOCO VISÍVEL ──
   Antes não havia NENHUMA regra de foco: o anel padrão sumia
   sobre os botões com gradiente.
*/
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}
.hero :focus-visible,
.modal-rec :focus-visible,
.overlay :focus-visible,
.cart-bar :focus-visible,
.footer :focus-visible {
  outline-color: var(--focus-on-dark);
}
.rec-panel:focus, .modal:focus { outline: none; }

/* ── SKIP LINK ── */
.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -200%);
  z-index: 500;
  background: var(--panel);
  color: #fff;
  padding: 14px 24px;
  border-radius: 0 0 12px 12px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: transform .2s;
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* ── ACESSIBILIDADE ── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── NOISE TEXTURE OVERLAY ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ── FLOATING ORBS ── */
.floating-orb {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  filter: blur(100px);
  animation: orbFloat 8s ease-in-out infinite alternate;
}
.floating-orb--1 { width: 500px; height: 500px; background: rgba(212,184,255,.15); top: -5%; left: 0; animation-duration: 12s; }
.floating-orb--2 { width: 450px; height: 450px; background: rgba(255,181,197,.12); bottom: 5%; right: 0; animation-duration: 14s; animation-delay: -4s; }
.floating-orb--3 { width: 350px; height: 350px; background: rgba(181,232,213,.1); top: 40%; left: 20%; animation-duration: 16s; animation-delay: -7s; }
.floating-orb--4 { width: 300px; height: 300px; background: rgba(245,215,142,.12); top: 70%; right: 5%; animation-duration: 18s; animation-delay: -10s; }
.floating-orb--5 { width: 400px; height: 400px; background: rgba(255,143,171,.1); top: 20%; right: 0; animation-duration: 20s; animation-delay: -2s; }
@keyframes orbFloat {
  0% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(15px, -10px) scale(1.05); }
  66% { transform: translate(-10px, 15px) scale(0.97); }
  100% { transform: translate(5px, -5px) scale(1.02); }
}

/* ── GRID PATTERN ── */
.grid-pattern {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  opacity: .07;
  background-image:
    linear-gradient(rgba(155,0,255,.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155,0,255,.2) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

/* ── SCROLL REVEAL ── */
.reveal, .reveal--left, .reveal--scale {
  opacity: 0;
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.reveal { transform: translateY(28px); }
.reveal--left { transform: translateX(-32px); }
.reveal--scale { transform: scale(.92); }
.reveal.revealed, .reveal--left.revealed, .reveal--scale.revealed {
  opacity: 1;
  transform: none;
  /* Libera a camada de composição depois da animação */
  will-change: auto;
}

/* ── PREFERS REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal--left, .reveal--scale {
    opacity: 1 !important;
    transform: none !important;
  }
  .floating-orb, .glow, .orbit-ring, .cta-orbit, .urgency-bar::after,
  .social-strip::after, .hero-badge::after, .cta-ring, .fab-whatsapp::before {
    animation: none !important;
  }
}

/* ── URGENCY TOP BAR ── */
.urgency-bar {
  background: linear-gradient(90deg, #2D1B3D, #4A2D5E, #2D1B3D);
  color: #fff;
  text-align: center;
  padding: 9px 16px;
  padding-top: max(9px, env(safe-area-inset-top));
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  position: relative;
  overflow: hidden;
}
.urgency-bar::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(212,184,255,.12), transparent);
  animation: shimmer 3s infinite;
}
.urgency-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: #4ADE80;
  border-radius: 50%;
  margin-right: 7px;
  animation: pulse-dot 2s infinite;
  vertical-align: middle;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .6; transform: scale(.85); }
}
@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 200%; }
}

/* ── HERO ── */
.hero {
  background: linear-gradient(160deg, #2D1B3D 0%, #4A2D5E 40%, #6B3F8A 100%);
  padding: 52px 20px 44px;
  text-align: center;
  position: relative;
  overflow: hidden;
  /* dvh: com vh o conteúdo some atrás da barra do navegador no celular.
     82% deixa o cardápio "espiar" acima da dobra. */
  min-height: 82dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(212,184,255,.08) 0%, transparent 70%);
  pointer-events: none;
}

.hero-starfield {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Orbit rings */
.orbit-ring {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  border: 1px solid rgba(212,184,255,.12);
  pointer-events: none;
  animation: orbitSpin 40s linear infinite;
}
.orbit-ring--1 { width: 380px; height: 380px; margin: -190px 0 0 -190px; border-color: rgba(212,184,255,.1); animation-duration: 50s; }
.orbit-ring--2 { width: 520px; height: 520px; margin: -260px 0 0 -260px; border-color: rgba(255,143,171,.08); animation-duration: 70s; animation-direction: reverse; }
@keyframes orbitSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Floating orbit icons */
.orbit-icons { position: absolute; inset: 0; pointer-events: none; }
.orbit-icon {
  position: absolute;
  font-size: 22px;
  animation: iconFloat 6s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 8px rgba(212,184,255,.5));
  /* `translate` é propriedade independente: compõe com o transform do
     keyframe em vez de sobrescrevê-lo (o JS só mexe nas variáveis). */
  translate: var(--par-x, 0) var(--par-y, 0);
  transition: translate .4s ease-out;
}
.oi-1 { top: 12%; left: 22%; animation-duration: 5s; animation-delay: 0s; }
.oi-2 { top: 8%; right: 28%; animation-duration: 6s; animation-delay: -1s; }
.oi-3 { top: 35%; right: 10%; animation-duration: 7s; animation-delay: -2s; }
.oi-4 { bottom: 30%; right: 18%; animation-duration: 5.5s; animation-delay: -3s; }
.oi-5 { bottom: 15%; right: 35%; animation-duration: 6.5s; animation-delay: -1.5s; }
.oi-6 { bottom: 20%; left: 15%; animation-duration: 7.5s; animation-delay: -4s; }
.oi-7 { top: 30%; left: 8%; animation-duration: 5s; animation-delay: -2.5s; }
.oi-8 { bottom: 10%; left: 35%; animation-duration: 6s; animation-delay: -3.5s; }
@keyframes iconFloat {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(8deg); }
  100% { transform: translateY(5px) rotate(-5deg); }
}

.glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  animation: glowPulse 6s ease-in-out infinite alternate;
  translate: 0 var(--par-y, 0);
}
.g1 { width: 450px; height: 450px; background: rgba(212,184,255,.2); top: -120px; right: -40px; animation-delay: 0s; }
.g2 { width: 350px; height: 350px; background: rgba(255,181,197,.15); bottom: -80px; left: -40px; animation-delay: -2s; }
.g3 { width: 250px; height: 250px; background: rgba(181,232,213,.12); top: 50%; left: 50%; animation-delay: -4s; animation-name: glowPulseCenter; }
@keyframes glowPulse {
  0% { opacity: .5; transform: scale(1) translate(0, 0); }
  100% { opacity: .9; transform: scale(1.15) translate(10px, -8px); }
}
@keyframes glowPulseCenter {
  0% { opacity: .4; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: .8; transform: translate(-50%,-50%) scale(1.2); }
}

/* Hero badge */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(212,184,255,.4);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  color: #E4D2FF;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
  animation: fadeUp .5s ease both;
  backdrop-filter: blur(8px);
  letter-spacing: .04em;
  text-transform: uppercase;
  overflow: hidden;
}
.hero-badge:empty { display: none; }
.hero-badge::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 80%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(212,184,255,.12), transparent);
  animation: badgeShimmer 4s 1s infinite;
}
@keyframes badgeShimmer {
  0% { left: -100%; }
  100% { left: 200%; }
}

/* Logo (h1) */
.hero-logo {
  font-family: 'Playfair Display', serif;
  font-size: clamp(62px, 14vw, 96px);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.03em;
  position: relative;
  z-index: 2;
  animation: fadeUp .6s .05s ease both;
}
.lf { display: block; color: #D4B8FF; }
.ls { display: block; color: var(--gold); }

/* Headline — era var(--text) (#2D1B3D) sobre um gradiente que COMEÇA
   em #2D1B3D: contraste 1:1, texto invisível. Agora 13.5:1 no topo. */
.hero-headline {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(18px, 4vw, 26px);
  font-weight: 800;
  color: #F3EAFF;
  margin-top: 18px;
  position: relative;
  z-index: 2;
  animation: fadeUp .6s .12s ease both;
  line-height: 1.3;
  text-shadow: 0 2px 12px rgba(30,0,48,.35);
}
.hero-headline em {
  font-style: normal;
  background: linear-gradient(135deg, #E4D2FF, #FFC2D4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-sub {
  font-size: clamp(15px, 2.5vw, 16px);
  color: rgba(255,255,255,.8);
  margin: 10px auto 0;
  position: relative;
  z-index: 2;
  animation: fadeUp .6s .18s ease both;
  max-width: 46ch;
  line-height: 1.6;
}

/* Rating strip */
.hero-proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 22px;
  position: relative;
  z-index: 2;
  animation: fadeUp .6s .22s ease both;
  flex-wrap: wrap;
}
.proof-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(212,184,255,.3);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.95);
  backdrop-filter: blur(8px);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.proof-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(212,184,255,.25);
  border-color: rgba(212,184,255,.5);
}
.proof-sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.3); }

/* CTA hero */
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #7C3AED 0%, #DB2777 100%);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  padding: 16px 32px;
  min-height: 52px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  position: relative;
  z-index: 2;
  box-shadow: 0 8px 28px rgba(124,58,237,.45);
  transition: transform .18s, box-shadow .18s;
  font-family: inherit;
  letter-spacing: .01em;
  touch-action: manipulation;
}
.hero-cta:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 14px 40px rgba(124,58,237,.55);
}
.hero-cta:active { transform: scale(.97); }

.cta-ring {
  position: absolute;
  inset: -4px;
  border-radius: var(--radius-pill);
  border: 2px solid rgba(212,184,255,.55);
  animation: ring-pulse 2s infinite;
  pointer-events: none;
}
@keyframes ring-pulse {
  0% { transform: scale(1); opacity: .7; }
  100% { transform: scale(1.08); opacity: 0; }
}

.cta-wrapper {
  position: relative;
  display: inline-block;
  margin-top: 28px;
  z-index: 2;
  animation: fadeUp .6s .28s ease both;
}
.cta-orbit {
  position: absolute;
  inset: -28px;
  animation: ctaOrbitSpin 8s linear infinite;
  pointer-events: none;
}
.cta-orb { position: absolute; font-size: 18px; filter: drop-shadow(0 0 6px rgba(212,184,255,.5)); }
.cta-orb-1 { top: 0; left: 50%; transform: translateX(-50%); }
.cta-orb-2 { bottom: 0; left: 50%; transform: translateX(-50%); }
.cta-orb-3 { top: 50%; left: 0; transform: translateY(-50%); }
.cta-orb-4 { top: 50%; right: 0; transform: translateY(-50%); }
@keyframes ctaOrbitSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.arc {
  width: 64px; height: 3px;
  border-radius: 3px;
  margin: 24px auto 0;
  background: linear-gradient(90deg, rgba(212,184,255,.9), rgba(255,143,171,.9));
  position: relative;
  z-index: 2;
  animation: fadeUp .6s .32s ease both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── SOCIAL PROOF STRIP ── */
.social-strip {
  background: #FFFFFF;
  border-bottom: 1px solid var(--border);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  overflow: hidden;
  position: relative;
}
.social-strip::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(212,184,255,.06), transparent);
  animation: stripShimmer 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes stripShimmer {
  0%, 100% { opacity: 0; transform: translateX(-100%); }
  50% { opacity: 1; transform: translateX(100%); }
}
.sp-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}
.sp-item strong { color: var(--text); font-weight: 700; }
.sp-sep { width: 1px; height: 22px; background: var(--border); }

/* ── STICKY NAV ── */
.cat-nav {
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 4px 24px rgba(155,107,255,.08);
}
.cat-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 12px 0;
}
.cat-row::-webkit-scrollbar { display: none; }
.cat-btn {
  flex-shrink: 0;
  padding: 11px 20px;
  min-height: 44px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
  font-family: inherit;
  white-space: nowrap;
  touch-action: manipulation;
}
.cat-btn:hover { background: rgba(109,40,217,.07); border-color: var(--purple-text); color: var(--text); }
.cat-btn:active { transform: scale(.97); }
.cat-btn.active {
  background: linear-gradient(135deg, #7C3AED, #DB2777);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(124,58,237,.35);
}

/* ── SECTIONS ── */
.section { padding: 36px 16px 12px; max-width: 1200px; margin: 0 auto; }
.sec-head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.sec-icon {
  width: 44px; height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.sec-title {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}
.sec-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; font-weight: 500; }
.sec-line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(109,40,217,.25), transparent); }

.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }

/* ── IMAGENS ── */
.acai-img {
  width: 100%; height: 180px;
  aspect-ratio: 300 / 180;
  object-fit: cover;
  object-position: center;
  display: block;
  background: rgba(155,107,255,.06);
}
.card-img {
  width: 96px; height: 96px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 14px;
  flex-shrink: 0;
  background: rgba(155,107,255,.06);
}

/* ── ACAI CARDS ── */
.acai-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.acai-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform .32s cubic-bezier(.16,1,.3,1), box-shadow .32s cubic-bezier(.16,1,.3,1), border-color .32s;
  animation: cardFadeUp .4s ease both;
  position: relative;
}
.acai-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
  opacity: 0;
  transition: opacity .32s;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(155,107,255,.06), rgba(255,143,171,.04));
}
.acai-card:hover {
  transform: translateY(-7px) scale(1.01);
  box-shadow: 0 20px 60px rgba(155,107,255,.15), 0 8px 24px rgba(255,143,171,.1);
  border-color: rgba(155,107,255,.35);
}
.acai-card:hover::after { opacity: 1; }

.acai-bar { height: 5px; }
.bar-purple { background: linear-gradient(90deg, var(--purple), #CE93D8); }
.bar-pink { background: linear-gradient(90deg, var(--pink), #F48FB1); }
.bar-gold { background: linear-gradient(90deg, #F9A825, var(--gold)); }

.acai-top { padding: 16px 16px 12px; display: flex; align-items: center; gap: 12px; }
.acai-ico { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0; }
.icon-purple { background: rgba(109,40,217,.12); }
.icon-pink { background: rgba(255,64,129,.12); }
.icon-gold { background: rgba(232,168,56,.18); }
.acai-info { flex: 1; }
.acai-name { font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.acai-ml { font-size: 12px; color: var(--muted); font-weight: 500; }

/* Preço: gradiente entre duas cores que passam AA (7.1:1 e 7.6:1).
   O gradiente antigo (#9B6BFF→#FF8FAB) dava 3.5:1 e 2.2:1. */
.acai-price {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--purple-text), var(--pink-text));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 3px;
}

.acai-recheios {
  background: rgba(109,40,217,.045);
  border-top: 1px solid var(--border);
  padding: 11px 16px;
}
.acai-r-title {
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--purple-text);
  margin-bottom: 8px;
}
.recheios-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rtag {
  font-size: 11.5px;
  background: rgba(109,40,217,.07);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  color: var(--muted);
  font-weight: 500;
}
.rtag.more {
  background: rgba(194,24,91,.09);
  border-color: rgba(194,24,91,.28);
  color: var(--pink-text);
  cursor: pointer;
  font-weight: 700;
  font-family: inherit;
  min-height: 44px;
  padding: 4px 14px;
  transition: background .16s;
  touch-action: manipulation;
}
.rtag.more:hover { background: rgba(194,24,91,.16); }
.rtag.more:active { transform: scale(.96); }

.acai-caldas {
  background: rgba(232,168,56,.08);
  border-top: 1px solid rgba(232,168,56,.25);
  padding: 10px 16px;
}
.acai-c-title {
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.calda-preco-badge {
  background: rgba(232,168,56,.2);
  border: 1px solid rgba(232,168,56,.45);
  border-radius: var(--radius-pill);
  padding: 2px 9px;
  font-size: 10.5px;
  color: var(--gold-text);
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0;
}
.calda-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.ctag {
  font-size: 11px;
  background: rgba(232,168,56,.1);
  border: 1px solid rgba(232,168,56,.3);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  color: var(--gold-text);
  font-weight: 600;
}

.acai-foot {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  gap: 8px;
}

.bdg { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; padding: 4px 10px; border-radius: var(--radius-pill); text-transform: uppercase; }
.bpop { background: rgba(232,168,56,.16); color: var(--gold-text); border: 1px solid rgba(232,168,56,.4); }
.bnew { background: rgba(194,24,91,.1); color: var(--pink-text); border: 1px solid rgba(194,24,91,.3); }
.bart { background: rgba(109,40,217,.1); color: var(--purple-text); border: 1px solid rgba(109,40,217,.3); }

/* ADD BUTTON — acai */
.add-btn-big {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, #7C3AED, #DB2777);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  padding: 12px 20px;
  min-height: 48px;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: transform .16s, box-shadow .16s;
  box-shadow: 0 4px 14px rgba(124,58,237,.3);
  position: relative;
  overflow: hidden;
  touch-action: manipulation;
}
.add-btn-big:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(124,58,237,.45); }
.add-btn-big:active { transform: scale(.96); }

/* Ripple */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  transform: scale(0);
  animation: ripple-anim .5s linear;
  pointer-events: none;
}
@keyframes ripple-anim {
  to { transform: scale(4); opacity: 0; }
}

/* ── QUANTIDADE (cards claros) ──
   Era color:#fff sobre card branco: número e sinais invisíveis (1:1).
*/
.add-wrap { display: flex; align-items: center; }
.add-btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7C3AED, #DB2777);
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .14s, box-shadow .14s;
  box-shadow: 0 3px 10px rgba(124,58,237,.3);
  line-height: 1;
  touch-action: manipulation;
}
.add-btn:hover { transform: scale(1.1); box-shadow: 0 5px 16px rgba(124,58,237,.45); }
.add-btn:active { transform: scale(.94); }
.add-btn.h { display: none; }

.qc { display: none; align-items: center; gap: 8px; }
.qc.s { display: flex; }
.qb {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(109,40,217,.35);
  background: rgba(109,40,217,.05);
  color: var(--purple-text);
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .14s, transform .14s;
  font-family: inherit;
  touch-action: manipulation;
}
.qb:hover { background: rgba(109,40,217,.15); }
.qb:active { transform: scale(.92); }
.qn {
  font-size: 16px;
  font-weight: 800;
  min-width: 22px;
  text-align: center;
  color: var(--text);
}

/* ── SIMPLE CARDS ── */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.card {
  width: 100%;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform .32s cubic-bezier(.16,1,.3,1), box-shadow .32s cubic-bezier(.16,1,.3,1), border-color .32s;
  animation: cardFadeUp .4s ease both;
  position: relative;
}
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
  opacity: 0;
  transition: opacity .32s;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(155,107,255,.06), rgba(245,215,142,.04));
}
.card:hover {
  transform: translateY(-7px) scale(1.01);
  box-shadow: 0 20px 60px rgba(155,107,255,.15), 0 8px 24px rgba(255,143,171,.1);
  border-color: rgba(155,107,255,.35);
}
.card:hover::after { opacity: 1; }

@keyframes cardFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.acai-card:nth-child(1), .card:nth-child(1) { animation-delay: 0ms; }
.acai-card:nth-child(2), .card:nth-child(2) { animation-delay: 60ms; }
.acai-card:nth-child(3), .card:nth-child(3) { animation-delay: 120ms; }
.acai-card:nth-child(4), .card:nth-child(4) { animation-delay: 180ms; }
.acai-card:nth-child(5), .card:nth-child(5) { animation-delay: 240ms; }

.card-bar { height: 5px; }
.card-inner { padding: 16px; display: flex; align-items: flex-start; gap: 14px; }
.card-ico { width: 60px; height: 60px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 30px; flex-shrink: 0; }
.card-info { flex: 1; min-width: 0; }
.card-name { font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.card-desc { font-size: 12.5px; color: var(--muted); line-height: 1.6; margin-bottom: 10px; }
.flavor-note { font-size: 12px; color: var(--muted); margin-bottom: 10px; font-weight: 600; }

.flavor-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.flavor-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  padding: 10px 14px;
  min-height: 44px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  background: rgba(109,40,217,.05);
  color: var(--text);
  cursor: pointer;
  transition: background .16s, border-color .16s, transform .16s, box-shadow .16s;
  font-weight: 600;
  font-family: inherit;
  touch-action: manipulation;
}
.flavor-tag:hover {
  background: rgba(109,40,217,.13);
  border-color: var(--purple-text);
  transform: scale(1.04);
  box-shadow: 0 3px 12px rgba(109,40,217,.18);
}
/* Feedback de toque: no celular não existe hover */
.flavor-tag:active { transform: scale(.94); background: rgba(109,40,217,.2); }
.flavor-tag.has-qty {
  border-color: var(--purple-text);
  background: rgba(109,40,217,.12);
}
.flavor-qty:not(:empty) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--purple-text);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
.flavor-count { font-size: 12px; color: var(--purple-text); font-weight: 700; }
.flavor-count:empty { display: none; }

.card-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.card-price {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 900;
  color: var(--gold-text);
}
.punit { font-size: 11.5px; color: var(--muted); font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; }

/* ── PESO CARD ── */
.peso-card {
  border: 1.5px solid rgba(232,168,56,.35);
  border-radius: var(--radius-card);
  padding: 22px 20px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: rgba(255,251,240,.85);
  transition: transform .32s cubic-bezier(.16,1,.3,1), box-shadow .32s, border-color .32s;
}
.peso-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 60px rgba(232,168,56,.2), 0 8px 24px rgba(255,160,0,.12);
  border-color: rgba(232,168,56,.6);
}
.peso-card::before {
  content: '';
  display: block;
  height: 5px;
  background: linear-gradient(90deg, #F9A825, var(--gold));
  position: absolute;
  top: 0; left: 0; right: 0;
}
.pey { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.pt { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.2; margin-bottom: 5px; }
.pt em { font-style: italic; color: var(--gold-text); }
.ps { font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.peso-caldas { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.peso-calda-lbl { font-size: 11px; color: var(--muted); margin-right: 4px; font-weight: 700; }
.peso-calda-tag { font-size: 11px; background: rgba(232,168,56,.14); border: 1px solid rgba(232,168,56,.3); border-radius: var(--radius-pill); padding: 3px 10px; color: var(--gold-text); font-weight: 600; }
.peso-calda-preco { font-size: 11px; background: rgba(232,168,56,.26); border: 1px solid rgba(232,168,56,.5); border-radius: var(--radius-pill); padding: 3px 10px; color: var(--gold-text); font-weight: 800; }
.pfrom { font-size: 11px; color: var(--muted); margin-top: 14px; font-weight: 500; }
.pval {
  font-family: 'Playfair Display', serif;
  font-size: 34px;
  font-weight: 900;
  color: var(--gold-text);
  line-height: 1;
}
.punit2 { font-size: 11.5px; color: var(--muted); font-weight: 600; }

/* CTA do peso — antes era um beco sem saída (preço sem ação) */
.peso-btn {
  margin-top: 14px;
  width: 100%;
  min-height: 48px;
  padding: 13px 20px;
  border-radius: var(--radius-pill);
  border: none;
  background: linear-gradient(135deg, var(--wa), var(--wa-dark));
  color: #fff;
  font-size: 14.5px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  transition: transform .16s, box-shadow .16s;
  box-shadow: 0 4px 16px rgba(18,140,126,.3);
  touch-action: manipulation;
}
.peso-btn:hover { transform: scale(1.03); box-shadow: 0 6px 22px rgba(18,140,126,.45); }
.peso-btn:active { transform: scale(.97); }
.peso-hint { font-size: 11.5px; color: var(--muted); margin-top: 8px; text-align: center; }

.divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(109,40,217,.2), transparent); margin: 20px 16px 0; }

/* ── CART BAR ── */
.cart-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(135deg, #2D1B3D, #4A2D5E);
  border-top: 1px solid rgba(212,184,255,.2);
  padding: 14px 18px;
  /* Sem isto o botão fica atrás da barra de gestos do iPhone */
  padding-bottom: max(14px, env(safe-area-inset-bottom));
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  z-index: 100;
  box-shadow: 0 -8px 32px rgba(45,27,61,.35);
}
.cart-bar.show { display: flex; animation: slideUp .25s ease; }
@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.cart-info { display: flex; flex-direction: column; }
.cart-label { font-size: 12px; color: rgba(255,255,255,.75); font-weight: 500; }
.cart-value { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: #fff; }
.cart-button {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: #2D1B3D;
  border: none;
  padding: 14px 24px;
  min-height: 50px;
  border-radius: var(--radius-pill);
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: transform .14s, box-shadow .14s;
  box-shadow: 0 4px 16px rgba(245,215,142,.35);
  touch-action: manipulation;
}
.cart-button:hover { transform: scale(1.05); box-shadow: 0 6px 22px rgba(245,215,142,.5); }
.cart-button:active { transform: scale(.97); }

.cart-resumo {
  font-size: 11px;
  color: rgba(255,255,255,.7);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: none;
}
@media (min-width: 520px) { .cart-resumo { display: block; } }

@keyframes cartPulse {
  0% { transform: scale(1); }
  30% { transform: scale(1.12); }
  60% { transform: scale(0.95); }
  100% { transform: scale(1); }
}
.cart-button.cart-pulse { animation: cartPulse .5s cubic-bezier(.34,1.56,.64,1); }

/* ── FOOTER ── */
.footer {
  background: #2D1B3D;
  border-top: 1px solid var(--border);
  padding: 40px 20px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,184,255,.3), rgba(255,143,171,.2), transparent);
}
.footer-brand {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  font-weight: 900;
  background: linear-gradient(135deg, #D4B8FF, #FFB5C5, #F5D78E);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 4px;
}
.footer-subtitle { font-size: 12.5px; color: rgba(255,255,255,.65); margin-bottom: 18px; font-weight: 500; }
.footer-info { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.fit { font-size: 12.5px; color: rgba(255,255,255,.75); font-weight: 500; }
.fit-link {
  color: rgba(255,255,255,.9);
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
}
.fit-link:hover { color: var(--gold); }
.footer-copyright { font-size: 11.5px; color: rgba(255,255,255,.6); margin-top: 20px; }

/* ── MODAIS (comuns) ── */
.modal-close {
  position: absolute;
  top: 10px; right: 10px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.9);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .16s, transform .14s;
  z-index: 3;
  font-family: inherit;
  touch-action: manipulation;
}
.modal-close:hover { background: rgba(255,255,255,.18); }
.modal-close:active { transform: scale(.92); }

.modal-rec, .overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.82);
  z-index: 300;
  align-items: flex-end;
  justify-content: center;
}
.overlay { z-index: 200; background: rgba(0,0,0,.8); }
.modal-rec.show, .overlay.show { display: flex; }

.rec-panel, .modal {
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 26px 26px 0 0;
  padding: 24px 20px 32px;
  /* Respira a safe-area do iPhone em modo standalone */
  padding-bottom: max(32px, calc(env(safe-area-inset-bottom) + 24px));
  width: 100%;
  max-width: 520px;
  animation: sheetUp .24s cubic-bezier(.34,1.56,.64,1);
  /* dvh: com vh o rodapé de ação some atrás da barra do navegador */
  max-height: 90dvh;
  overflow-y: auto;
  position: relative;
  overscroll-behavior: contain;
}
.modal { max-height: 88dvh; }
@keyframes sheetUp {
  from { transform: translateY(48px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.rec-handle, .modal-handle { width: 36px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.2); margin: 0 auto 20px; }
.rec-title { font-family: 'Playfair Display', serif; font-size: 21px; font-weight: 700; margin-bottom: 4px; color: #fff; padding-right: 44px; }
.rec-sub { font-size: 12.5px; color: var(--on-dark-soft); margin-bottom: 20px; }

.modal-block-title {
  font-size: 11px; font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 18px 0 9px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mt-roxo { color: #DDB8F0; }
.mt-amar { color: var(--gold); }
.modal-hint { font-size: 12.5px; color: var(--on-dark-soft); margin-bottom: 10px; }

.calda-adicional-hint {
  background: rgba(255,160,0,.1);
  border: 1px solid rgba(255,160,0,.25);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 12.5px;
  color: rgba(255,225,160,.95);
  display: flex;
  align-items: center;
  gap: 7px;
}
.calda-preco-pill {
  background: rgba(255,160,0,.28);
  border: 1px solid rgba(255,160,0,.5);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 800;
  color: var(--gold);
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
}

/* ── CHIPS DO MODAL ──
   Eram <span onclick>: invisíveis para teclado e leitor de tela.
   Agora <button aria-pressed>, navegáveis por Tab e acionáveis por Enter/Espaço.
*/
.rec-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.rec-item, .calda-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  min-height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.07);
  font-size: 13.5px;
  color: var(--on-dark);
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s, transform .14s;
  user-select: none;
  font-family: inherit;
  font-weight: 600;
  touch-action: manipulation;
}
.rec-item:hover { border-color: rgba(155,107,255,.7); background: rgba(124,58,237,.28); color: #fff; }
.rec-item:active, .calda-item:active { transform: scale(.95); }
.rec-item.sel {
  background: linear-gradient(135deg, rgba(124,58,237,.55), rgba(219,39,119,.35));
  border-color: rgba(196,140,255,.8);
  color: #fff;
}
/* Selecionado não depende só de cor: ganha o "✓" */
.rec-item.sel::before, .calda-item.sel::before { content: '✓'; font-weight: 900; }

.calda-item { border-color: rgba(255,160,0,.35); background: rgba(255,160,0,.1); }
.calda-item:hover { border-color: rgba(255,160,0,.65); background: rgba(255,160,0,.22); color: #fff; }
.calda-item.sel {
  background: linear-gradient(135deg, rgba(255,160,0,.4), rgba(255,100,0,.22));
  border-color: rgba(255,190,80,.85);
  color: #FFE9B8;
}
.calda-item-preco {
  font-size: 10.5px;
  background: rgba(255,160,0,.28);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  color: #FFDE9E;
  font-weight: 800;
}

.rec-counter {
  background: rgba(255,215,0,.09);
  border: 1px solid rgba(255,215,0,.2);
  border-radius: 12px;
  padding: 11px 15px;
  margin: 14px 0 0;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rec-counter-top { display: flex; align-items: center; gap: 9px; }
.rec-counter-num { font-family: 'Playfair Display', serif; font-size: 21px; font-weight: 700; color: var(--gold); }
.rec-counter-txt { color: var(--on-dark-soft); }

.rec-progress-bar { width: 100%; height: 5px; background: rgba(255,255,255,.14); border-radius: 4px; overflow: hidden; }
.rec-progress-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--gold), var(--pink));
  transition: width .3s cubic-bezier(.34,1.56,.64,1);
  width: 0%;
}

/* Aviso: cor + ícone + texto (nunca só cor) */
.rec-warning { font-size: 12.5px; color: #FFB3C6; margin-top: 9px; display: none; font-weight: 600; }
.rec-warning.show { display: flex; align-items: flex-start; gap: 6px; }
.rec-warning.show::before { content: '⚠️'; }

.rec-total-box {
  background: rgba(255,215,0,.08);
  border: 1px solid rgba(255,215,0,.2);
  border-radius: 14px;
  padding: 12px 16px;
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.rec-total-lbl { font-size: 12.5px; color: var(--on-dark-soft); font-weight: 500; white-space: nowrap; }
.rec-total-val { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: var(--gold); white-space: nowrap; flex-shrink: 0; }

/* ── STEPPER ── */
.stepper-indicator { display: flex; align-items: center; justify-content: center; margin: 16px 0 8px; }
.stepper-dot {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: 2px solid rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--on-dark-soft);
  transition: background .25s, border-color .25s, color .25s;
}
.stepper-dot.active { background: rgba(124,58,237,.35); border-color: rgba(155,107,255,.7); color: #fff; }
.stepper-dot.current {
  background: linear-gradient(135deg, #7C3AED, #DB2777);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 10px rgba(124,58,237,.5);
}
.stepper-line { width: 32px; height: 2px; background: rgba(255,255,255,.18); margin: 0 4px; }
.stepper-label {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--on-dark-soft);
  margin-bottom: 16px;
  letter-spacing: .03em;
}
.step-content { animation: stepFadeIn .25s ease; }
@keyframes stepFadeIn {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

.stepper-nav { display: flex; gap: 10px; margin-top: 18px; }
.stepper-btn-back, .modal-back {
  flex: 1;
  padding: 14px;
  min-height: 50px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.25);
  background: transparent;
  color: rgba(255,255,255,.9);
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  transition: background .16s, transform .14s;
  touch-action: manipulation;
}
.stepper-btn-back:hover, .modal-back:hover { background: rgba(255,255,255,.12); }
.stepper-btn-back:active, .modal-back:active { transform: scale(.97); }

.stepper-btn-next {
  flex: 2;
  padding: 14px 18px;
  min-height: 50px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #7C3AED, #DB2777);
  border: none;
  color: #fff;
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  transition: transform .16s, box-shadow .16s;
  box-shadow: 0 4px 16px rgba(124,58,237,.35);
  touch-action: manipulation;
}
.stepper-btn-next:hover { transform: scale(1.03); box-shadow: 0 6px 22px rgba(124,58,237,.5); }
.stepper-btn-next:active { transform: scale(.97); }
.stepper-btn-confirm {
  background: linear-gradient(135deg, var(--wa), var(--wa-dark));
  box-shadow: 0 4px 16px rgba(18,140,126,.35);
}
.stepper-btn-confirm:hover { box-shadow: 0 6px 22px rgba(18,140,126,.5); }

/* ── MODAL PEDIDO ── */
.modal-title { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; margin-bottom: 18px; color: #fff; padding-right: 44px; }
.modal-item { display: flex; flex-direction: column; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 13px; gap: 4px; }
.mi-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.mil { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.95); font-weight: 600; }
.mi-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.mi-qty { display: flex; align-items: center; gap: 4px; }
.qb-sm { width: 36px; height: 36px; font-size: 17px; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.08); color: #fff; }
.qb-sm:hover { background: rgba(255,255,255,.2); }
.qn-sm { min-width: 20px; font-size: 14px; color: #fff; }
.mip { color: var(--gold); font-weight: 700; white-space: nowrap; font-size: 14px; }
.mi-remove {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,120,120,.5);
  background: rgba(255,60,60,.18);
  color: #FF9C9C;
  font-size: 19px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .16s, transform .14s;
  flex-shrink: 0;
  font-family: inherit;
  touch-action: manipulation;
}
.mi-remove:hover { background: rgba(255,60,60,.35); }
.mi-remove:active { transform: scale(.92); }
.mi-extras { font-size: 12px; color: var(--on-dark-soft); padding-left: 26px; line-height: 1.6; }

.modal-total-row { display: flex; justify-content: space-between; align-items: center; padding: 16px 0 0; gap: 10px; }
.modal-total-label { font-size: 13.5px; color: var(--on-dark-soft); font-weight: 500; }
.modal-total-value { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 700; color: var(--gold); white-space: nowrap; flex-shrink: 0; }

.modal-buttons { display: flex; gap: 10px; margin-top: 18px; }
.modal-whatsapp {
  flex: 2;
  padding: 14px 18px;
  min-height: 52px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--wa), var(--wa-dark));
  border: none;
  color: #fff;
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  box-shadow: 0 4px 16px rgba(18,140,126,.3);
  transition: transform .16s, box-shadow .16s;
  touch-action: manipulation;
}
.modal-whatsapp:hover { transform: scale(1.03); box-shadow: 0 6px 22px rgba(18,140,126,.45); }
.modal-whatsapp:active { transform: scale(.97); }

/* Redutor de risco colado no CTA */
.modal-reassurance {
  margin-top: 12px;
  font-size: 11.5px;
  color: var(--on-dark-faint);
  text-align: center;
  line-height: 1.5;
}

/* ── UPSELL ── */
.upsell-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(255,215,0,.1);
  border: 1px solid rgba(255,215,0,.28);
  border-radius: 14px;
  padding: 12px 16px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.upsell-box[hidden] { display: none; }
.upsell-text { font-size: 13px; color: rgba(255,255,255,.9); font-weight: 500; }
.upsell-btn {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: #2D1B3D;
  border: none;
  border-radius: var(--radius-pill);
  padding: 11px 18px;
  min-height: 44px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: transform .14s;
  touch-action: manipulation;
}
.upsell-btn:hover { transform: scale(1.05); }
.upsell-btn:active { transform: scale(.96); }

/* ── CHECKOUT ── */
.checkout {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.checkout-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}
.field { display: flex; flex-direction: column; gap: 7px; border: 0; }
.field[hidden] { display: none; }
.field-label {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.95);
  padding: 0;
}
.field-optional { font-weight: 500; color: var(--on-dark-faint); }
.field-input {
  width: 100%;
  padding: 13px 15px;
  min-height: 48px;
  border-radius: 12px;
  border: 1.5px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.07);
  color: #fff;
  /* 16px evita o zoom automático do Safari no iOS ao focar o campo */
  font-size: 16px;
  font-family: inherit;
  transition: border-color .16s, background .16s;
}
.field-input::placeholder { color: rgba(255,255,255,.5); }
.field-input:hover { background: rgba(255,255,255,.11); }
.field-input:focus { border-color: var(--gold); background: rgba(255,255,255,.13); outline: none; }
.field-input:focus-visible { outline: 3px solid var(--focus-on-dark); outline-offset: 2px; }
.field-input.is-invalid { border-color: #FF8A8A; background: rgba(255,60,60,.12); }

.field-error { font-size: 12.5px; color: #FFB3C6; font-weight: 600; display: none; }
.field-error.show { display: flex; align-items: flex-start; gap: 6px; }
.field-error.show::before { content: '⚠️'; }

.segmented { display: flex; gap: 8px; }
.segmented--3 .segmented-opt { flex: 1; }
.segmented-opt { flex: 1; position: relative; cursor: pointer; }
.segmented-opt input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}
.segmented-opt span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 10px;
  min-height: 48px;
  border-radius: 12px;
  border: 1.5px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.9);
  font-size: 13.5px;
  font-weight: 700;
  text-align: center;
  transition: background .16s, border-color .16s, color .16s;
}
.segmented-opt:hover span { background: rgba(255,255,255,.13); }
/* Selecionado: cor + borda + marca "✓" (nunca só cor) */
.segmented-opt input:checked + span {
  background: linear-gradient(135deg, rgba(124,58,237,.5), rgba(219,39,119,.32));
  border-color: rgba(196,140,255,.85);
  color: #fff;
}
.segmented-opt input:checked + span::before { content: '✓'; font-weight: 900; }
.segmented-opt input:focus-visible + span { outline: 3px solid var(--focus-on-dark); outline-offset: 2px; }

/* ── BOTÃO FLUTUANTE WHATSAPP ── */
.fab-whatsapp {
  position: fixed;
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 12px));
  right: 20px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--wa), var(--wa-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(18,140,126,.45);
  z-index: 35;
  transition: transform .2s, box-shadow .2s, opacity .3s;
  text-decoration: none;
  touch-action: manipulation;
}
.fab-whatsapp::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(11,125,92,.55);
  animation: fabPing 2.5s infinite;
  pointer-events: none;
}
@keyframes fabPing {
  0% { transform: scale(1); opacity: .6; }
  100% { transform: scale(1.6); opacity: 0; }
}
.fab-whatsapp:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(18,140,126,.6); }
.fab-whatsapp:active { transform: scale(0.95); }
.fab-whatsapp.hidden { opacity: 0; pointer-events: none; transform: scale(0.8); }

/* ── TOAST ── */
.toast {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%) translateY(-140px);
  background: linear-gradient(135deg, #7C3AED, #DB2777);
  color: #fff;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  font-size: 13.5px;
  font-weight: 700;
  z-index: 400;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1);
  max-width: calc(100vw - 32px);
  text-align: center;
  box-shadow: 0 6px 22px rgba(124,58,237,.5);
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* ── NOSCRIPT ── */
.noscript-menu {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 20px 48px;
  color: var(--text);
}
.noscript-menu h2 { font-family: 'Playfair Display', serif; font-size: 26px; margin-bottom: 10px; }
.noscript-menu h3 { font-family: 'Playfair Display', serif; font-size: 19px; margin: 22px 0 8px; }
.noscript-menu p { margin-bottom: 12px; line-height: 1.6; }
.noscript-menu ul { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.noscript-menu a { color: var(--purple-text); font-weight: 700; }

/* ── RESPONSIVE ── */
@media (max-width: 520px) {
  .acai-grid, .cards-grid { grid-template-columns: 1fr; }
  .hero { padding: 40px 16px 36px; }
  .social-strip { gap: 12px; }
  .sp-sep { display: none; }
  .cart-bar { flex-wrap: wrap; }
  .hero-proof { gap: 8px; }

  .rec-panel { max-height: 92dvh; padding: 20px 14px 28px; padding-bottom: max(28px, calc(env(safe-area-inset-bottom) + 20px)); border-radius: 20px 20px 0 0; }
  .modal { max-height: 90dvh; padding: 20px 14px 24px; padding-bottom: max(24px, calc(env(safe-area-inset-bottom) + 18px)); border-radius: 20px 20px 0 0; }
  .modal-title { font-size: 19px; margin-bottom: 12px; }
  .rec-title { font-size: 18px; }
  .rec-sub { font-size: 12px; margin-bottom: 12px; }
  .stepper-indicator { margin: 10px 0 6px; }
  .stepper-label { margin-bottom: 10px; }
  .stepper-nav { gap: 8px; margin-top: 14px; }
  .modal-buttons { gap: 8px; }
  .rec-total-box { padding: 10px 12px; margin-top: 12px; }
  .rec-total-val { font-size: 18px; }
  .rec-counter { padding: 9px 12px; margin-top: 10px; }
  .rec-counter-num { font-size: 18px; }
  .orbit-ring { display: none; }
  .orbit-icon { font-size: 16px; }
  .mi-actions { gap: 6px; }
}

@media (min-width: 768px) {
  .acai-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Telas estreitas de verdade (320px) */
@media (max-width: 360px) {
  .segmented--3 { flex-wrap: wrap; }
  .segmented--3 .segmented-opt { flex: 1 1 30%; }
  .card-inner { flex-direction: column; }
  .card-img { width: 100%; height: 140px; aspect-ratio: auto; }
}

/* ── DISPOSITIVOS DE TOQUE ──
   Alvo de 48px onde o dedo é o ponteiro; no mouse 44px já basta.
*/
@media (pointer: coarse) {
  .qb, .flavor-tag, .rec-item, .calda-item, .rtag.more,
  .mi-remove, .upsell-btn, .cat-btn, .modal-close {
    min-height: 48px;
  }
  .qb, .mi-remove, .modal-close { min-width: 48px; }
  .qb-sm { width: 48px; height: 48px; }
  /* No toque, hover "gruda": remove os efeitos de escala */
  .acai-card:hover, .card:hover, .peso-card:hover { transform: none; }
  .flavor-tag:hover, .add-btn-big:hover, .add-btn:hover,
  .cart-button:hover, .hero-cta:hover { transform: none; }
}

/* ── IMPRESSÃO ── */
@media print {
  .cart-bar, .fab-whatsapp, .toast, .modal-rec, .overlay,
  .floating-orb, .grid-pattern, .hero-starfield, .orbit-icons,
  .orbit-ring, .glow, .cta-wrapper, .skip-link { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; }
  .hero { min-height: auto; background: #fff; color: #000; }
  .hero-logo .lf, .hero-logo .ls, .hero-headline { color: #000; }
  .card, .acai-card, .peso-card { break-inside: avoid; box-shadow: none; }
}