/* acabamento.css - camada de acabamento do Mais Acai, carregada por ultimo.
   Feita por Claude em 2026-10-02 a pedido do Criador. Cada bloco diz o que resolve.
   Nao apagar sem conferir: o index.html e o acabamento.js dependem destas classes. */

/* 1. Faixa de informacoes: no celular os 4 itens viram uma coluna com os icones alinhados */
@media (max-width: 799px) {
  .trust-strip { display: grid; justify-content: center; justify-items: start; gap: 12px; }
}

/* 2. Troca de secao com calda escorrendo: o roxo escorre sobre a faixa amarela (fim da hero)
      e sobre a secao creme (fim do cardapio). As outras trocas continuam com a folha arredondada. */
.trust-strip, .howto { margin-top: 0; border-radius: 0; }
.trust-strip { padding-top: 80px; }
.howto { padding-top: 136px; }
@media (min-width: 900px) { .howto { padding-top: 176px; } }
.trust-strip::before, .howto::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 62px; pointer-events: none;
  background-repeat: repeat-x; background-position: 50% 0; background-size: 360px 62px;
}
.trust-strip::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 62' preserveAspectRatio='none'%3E%3Cpath fill='%23130125' d='M0 0V10H21C29 10 33 14 33 22V29A17 17 0 0 0 67 29V22C67 14 71 10 79 10H103C111 10 115 14 115 22V37A23 23 0 0 0 161 37V22C161 14 165 10 173 10H198C206 10 210 14 210 22V24A14 14 0 0 0 238 24V22C238 14 242 10 250 10H273C281 10 285 14 285 22V33A19 19 0 0 0 323 33V22C323 14 327 10 335 10H360V0Z'/%3E%3C/svg%3E"); }
.howto::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 62' preserveAspectRatio='none'%3E%3Cpath fill='%234B0F5F' d='M0 0V10H21C29 10 33 14 33 22V29A17 17 0 0 0 67 29V22C67 14 71 10 79 10H103C111 10 115 14 115 22V37A23 23 0 0 0 161 37V22C161 14 165 10 173 10H198C206 10 210 14 210 22V24A14 14 0 0 0 238 24V22C238 14 242 10 250 10H273C281 10 285 14 285 22V33A19 19 0 0 0 323 33V22C323 14 327 10 335 10H360V0Z'/%3E%3C/svg%3E"); }

/* 3. Filtro de categorias grudado embaixo do cabecalho enquanto o cliente percorre o cardapio (celular e tablet) */
@media (max-width: 899px) {
  .filter-wrap {
    position: sticky; top: calc(var(--header-height) + env(safe-area-inset-top, 0px)); z-index: 5;
    margin-inline: -18px; padding: 8px 18px 0;
    background: rgba(75, 15, 95, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    transition: box-shadow .2s;
  }
  .filter-wrap.is-stuck { box-shadow: 0 12px 24px rgba(16, 5, 25, .38); }
  .category-filters { scrollbar-width: none; margin-inline: -18px; padding: 7px 18px 10px; }
  .category-filters::-webkit-scrollbar { display: none; }
}
@media (min-width: 560px) and (max-width: 899px) { .filter-wrap { margin-inline: -28px; padding-inline: 28px; } .category-filters { margin-inline: -28px; padding-inline: 28px; } }

/* 4. Barra "Ver pedido" fixa no rodape da tela do celular quando ha itens no carrinho (criada pelo acabamento.js) */
.floating-cart {
  position: fixed; left: 14px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  display: none; align-items: center; gap: 12px; min-height: 58px; padding: 10px 18px 10px 12px;
  border-radius: 18px; background: var(--lime); color: var(--deep); font-weight: 800; font-size: 1rem;
  box-shadow: 0 14px 34px rgba(16, 5, 25, .45), 0 0 0 1px rgba(75, 15, 95, .14);
  transform: translateY(150%); transition: transform .35s cubic-bezier(.2, .8, .2, 1), scale .16s ease;
}
.floating-cart.is-on { transform: translateY(0); }
.floating-cart-count { min-width: 34px; height: 34px; padding-inline: 8px; display: grid; place-items: center; border-radius: 12px; background: var(--deep); color: var(--lime); font-size: .95rem; }
.floating-cart-label { flex: 1; text-align: left; }
.floating-cart-total { font-family: var(--heading); font-size: 1.1rem; letter-spacing: -.01em; }
.floating-cart .icon { width: 20px; height: 20px; }
.floating-cart.bump .floating-cart-count { animation: count-bump .35s ease; }
@media (max-width: 799px) {
  .floating-cart { display: flex; }
  body.has-floating-cart .toast { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  body.has-floating-cart .site-foot { padding-bottom: 86px; }
}

/* 5. Restos da paleta do molde (verde-limao e violeta) trocados pelas cores do Mais Acai */
.hc-bgword { -webkit-text-stroke-color: rgba(120, 212, 73, .08); }
.hc-step-n { border-color: rgba(120, 212, 73, .4); }
.hc-step.is-done .hc-step-n { background: rgba(120, 212, 73, .16); }
.site-foot-logo { box-shadow: 0 0 0 6px rgba(120, 212, 73, .18); }
.site-foot-logo:active { box-shadow: 0 0 0 3px rgba(120, 212, 73, .18); }
.order-step:hover { border-color: rgba(137, 48, 166, .35); }
.order-step:not(:last-child)::after { border-left-color: rgba(137, 48, 166, .3); }

/* 6. Vida nos botoes: a seta do botao principal da hero da um toque de tempos em tempos; o "+" responde ao toque */
@keyframes seta-chama { 0%, 68%, 100% { transform: translateX(0); } 80% { transform: translateX(6px); } 90% { transform: translateX(-1px); } }
.hc-actions .action-button .icon { animation: seta-chama 2.8s ease-in-out 1.6s infinite; }
.menu-row:active .menu-row-add { transform: scale(.88) rotate(90deg); }

/* 7. Tela que nao pula: nos navegadores de dentro de apps (Telegram, Instagram) a barra some e aparece ao
      inverter a rolagem e a altura da tela muda. A hero era medida em vh/svh, entao a pagina inteira mudava
      de tamanho e dava um tranco. Aqui a hero passa a usar --tela (altura em px congelada no carregamento,
      definida por um script no <head>; so muda se a largura mudar, ex.: girar o aparelho). */
.hc { --hc-distance: calc(var(--tela, 100vh) * 1.65); }
@media (min-width: 900px) { .hc { --hc-distance: calc(var(--tela, 100vh) * 1.8); } }
.hc-sticky { min-height: var(--tela, 100vh); }
.hc--live .hc-sticky { height: var(--tela, 100vh); }
.hc--live { height: calc(var(--tela, 100vh) + var(--hc-distance) + var(--sec-r, 28px)); }

/* 8. Troca entre as secoes, versao "enterprise" (pedido do Criador: menos artificial, mais real).
      Sai a faixa pastel e os degrades lineares de duas cores. Entra: (a) a faixa de informacoes escura, como
      continuacao da hero, com uma unica troca escuro -> claro; (b) calda com volume (brilho e sombra) em vez
      de recorte chapado; (c) luz em vez de faixa de cor: brilhos radiais suaves, so nos tons da logo;
      (d) grao fino por cima do fundo, que tira a cara de degrade de computador. */
.trust-strip { background: #130125; color: rgba(250, 245, 252, .82); padding: 4px 18px 44px; }
.trust-strip::before { display: none; }
.trust-strip strong { color: #fff; }
.trust-strip .icon { color: var(--lime); }
@media (max-width: 799px) {
  .trust-strip { justify-content: stretch; justify-items: stretch; gap: 0; padding-inline: 24px; }
  .trust-strip > div { padding: 15px 2px; border-top: 1px solid rgba(255, 255, 255, .09); }
  .trust-strip > div:last-child { border-bottom: 1px solid rgba(255, 255, 255, .09); }
}
.about { margin-top: 0; border-radius: 0; padding-top: 142px;
  background:
    linear-gradient(180deg, rgba(19, 1, 37, .13) 0, rgba(19, 1, 37, .04) 70px, transparent 150px),
    radial-gradient(130% 520px at 50% 100%, rgba(137, 48, 166, .20) 0, rgba(137, 48, 166, .09) 38%, rgba(137, 48, 166, .02) 62%, transparent 76%),
    radial-gradient(80% 300px at 0 150px, rgba(120, 212, 73, .07), transparent 72%),
    var(--cream); }
.about::before, .howto::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 62px; pointer-events: none;
  background-repeat: repeat-x; background-position: 50% 0; background-size: 360px 62px;
  filter: drop-shadow(0 7px 9px rgba(19, 1, 37, .26));
}
.about::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 62' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='.15' stop-color='%23130125'/%3E%3Cstop offset='1' stop-color='%23301050'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M0 0V10H21C29 10 33 14 33 22V29A17 17 0 0 0 67 29V22C67 14 71 10 79 10H103C111 10 115 14 115 22V37A23 23 0 0 0 161 37V22C161 14 165 10 173 10H198C206 10 210 14 210 22V24A14 14 0 0 0 238 24V22C238 14 242 10 250 10H273C281 10 285 14 285 22V33A19 19 0 0 0 323 33V22C323 14 327 10 335 10H360V0Z'/%3E%3Cg fill='%23fff' opacity='.16'%3E%3Cellipse cx='42' cy='31' rx='2.6' ry='8'/%3E%3Cellipse cx='127' cy='38' rx='3.2' ry='11'/%3E%3Cellipse cx='218' cy='25' rx='2.2' ry='6'/%3E%3Cellipse cx='295' cy='34' rx='2.8' ry='9'/%3E%3C/g%3E%3C/svg%3E"); }
.howto { padding-top: 142px;
  background:
    linear-gradient(180deg, rgba(75, 15, 95, .13) 0, rgba(75, 15, 95, .04) 70px, transparent 150px),
    radial-gradient(130% 380px at 50% 0, rgba(137, 48, 166, .13), rgba(137, 48, 166, .04) 52%, transparent 76%),
    var(--cream); }
.howto::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 62' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='.15' stop-color='%234B0F5F'/%3E%3Cstop offset='1' stop-color='%23641B80'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M0 0V10H21C29 10 33 14 33 22V29A17 17 0 0 0 67 29V22C67 14 71 10 79 10H103C111 10 115 14 115 22V37A23 23 0 0 0 161 37V22C161 14 165 10 173 10H198C206 10 210 14 210 22V24A14 14 0 0 0 238 24V22C238 14 242 10 250 10H273C281 10 285 14 285 22V33A19 19 0 0 0 323 33V22C323 14 327 10 335 10H360V0Z'/%3E%3Cg fill='%23fff' opacity='.18'%3E%3Cellipse cx='42' cy='31' rx='2.6' ry='8'/%3E%3Cellipse cx='127' cy='38' rx='3.2' ry='11'/%3E%3Cellipse cx='218' cy='25' rx='2.2' ry='6'/%3E%3Cellipse cx='295' cy='34' rx='2.8' ry='9'/%3E%3C/g%3E%3C/svg%3E"); }
.menu-section { background:
    radial-gradient(110% 460px at 50% 0, rgba(196, 128, 230, .30) 0, rgba(150, 70, 190, .13) 46%, transparent 78%),
    radial-gradient(70% 340px at 100% 420px, rgba(120, 212, 73, .05), transparent 70%),
    linear-gradient(180deg, #54126B 0, var(--deep) 360px); }
.cta { position: relative; isolation: isolate; background:
    radial-gradient(130% 420px at 50% 100%, rgba(75, 15, 95, .17), rgba(75, 15, 95, .06) 46%, transparent 76%),
    var(--cream); }
.site-foot { background:
    radial-gradient(100% 320px at 50% 0, rgba(150, 70, 190, .26), rgba(137, 48, 166, .08) 55%, transparent 80%),
    linear-gradient(180deg, #30113D 0, var(--deeper) 280px); }
@media (min-width: 900px) { .about, .howto { padding-top: 176px; } }
/* grao fino sobre o fundo de cada secao (fica atras do conteudo) */
.trust-strip::after, .about::after, .menu-section::after, .howto::after, .cta::after, .site-foot::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* 9. Hero so com o produto (pedido do Criador): os quadros sao recortados pelo hero_recorte.py (sem mesa, sem
      objetos de cena, sem contorno de quadro). O canvas e mais alto que a caixa do copo: a faixa de cima do
      quadro, onde so passa ingrediente caindo, sobe por tras do titulo e aparece aos poucos. Assim a caixa
      inteira fica para o copo, que cresce. --hc-prop e --hc-sobra saem de hero-frames/recorte.json. */
.hc { --hc-prop: 0.5678; --hc-sobra: 0.038; }
.hc-cup { aspect-ratio: calc(var(--hc-prop) / (1 - var(--hc-sobra))); }
.hc-poster, .hc-canvas {
  inset: auto auto 0 50%; width: auto; max-width: none; height: calc(100% / (1 - var(--hc-sobra))); aspect-ratio: var(--hc-prop);
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 calc(var(--hc-sobra) * 90%));
  -webkit-mask-composite: source-over;
  mask-image: linear-gradient(to bottom, transparent 0, #000 calc(var(--hc-sobra) * 90%));
  mask-composite: add;
}
.hc-veil { display: none; }
/* luz atras do copo e sombra de apoio, no lugar do veu */
.hc-cup::before { content: ""; position: absolute; inset: -8% -34%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 50% 48% at 50% 52%, rgba(137, 48, 166, .46), rgba(137, 48, 166, .16) 52%, transparent 72%); }
.hc-cup::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: -2.5%; height: 8%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(8, 0, 16, .7), transparent 68%); }
/* no celular a linha "Entrega em..." sai da hero (a faixa logo abaixo ja diz o prazo) e o espaco vai para o copo */
@media (max-width: 559px) {
  .hc .hero-delivery > :not(.open-status) { display: none; }
  .hc-inner { gap: 6px; padding-bottom: 14px; }
}

/* 10. Ajustes do Criador (2026-10-04): foto do bloco "Pronto para pedir?" aparece inteira no celular
   e o letreiro "Mais Acai" atras do copo fica visivel. */
@media (max-width: 799px) { .cta-visual { height: auto; aspect-ratio: 3 / 2; } }
.hc-bgword { -webkit-text-stroke: 2px rgba(120, 212, 73, .30); }