/* ===========================================================================
   Trufas da Shay — cardápio digital
   Paleta vem de identidade/design-guide.md
   Títulos: Schibsted Grotesk (substituiu a Fredoka)
   =========================================================================== */

:root{
  /* cores */
  --creme:        #FFFDF9;
  --creme-2:      #F6F1EA;
  --lilas:        #F0E6F7;
  --lilas-2:      #F7EDFF;
  --roxo:         #6F00DC;
  --roxo-escuro:  #550872;
  --roxo-profundo:#3D0A52;
  --tinta:        #2A1533;
  --tinta-suave:  #7A6684;
  --verde:        #ABFB95;
  --rosa:         #FF64CD;

  /* pastéis das pílulas de atalho */
  --p1:#EADCF9;  --p2:#FBE3D2;  --p3:#DFF3D6;
  --p4:#FBD9EF;  --p5:#DDE9FA;  --p6:#F8ECC9;
  --p7:#FBD9B8;

  /* formas */
  --r-card: 22px;
  --r-peq: 14px;
  --r-pill: 999px;
  --sombra: 0 18px 40px -24px rgba(42,21,51,.45);
  --sombra-alta: 0 30px 70px -30px rgba(42,21,51,.55);

  /* medidas */
  --largura: 1250px;
  --topo: 96px;
  --margem-tela: clamp(14px,2.4vw,34px);
  --gutter: clamp(20px,2.4vw,34px);
}

*{box-sizing:border-box}

html{
  /* sem scroll-behavior aqui: a Lenis brigaria com ele.
     As âncoras rolam pelo irPara() no app.js. */
  scroll-padding-top:var(--topo);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--creme);
  color:var(--tinta);
  font-family:'DM Sans',system-ui,-apple-system,sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* granulado sutil por cima de tudo, no lugar da textura em imagem */
body::after{
  content:"";
  position:fixed;
  top:0;left:0;
  width:100vw;height:100vh;
  background-image:radial-gradient(at 20% 80%, #fff 1px, transparent 0px);
  background-size:2px 2px;
  pointer-events:none !important;
  z-index:9999;
  opacity:.05;
  mix-blend-mode:plus-lighter;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--roxo);text-decoration:none}
a:hover{color:var(--roxo-escuro)}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
/* gatilhos do popup sao <a> sem href: nao herdam cursor nem foco de link */
[data-contato-popup]{cursor:pointer}

h1,h2,h3,h4{
  font-family:'Schibsted Grotesk',system-ui,sans-serif;
  font-weight:700;
  line-height:1.06;
  margin:0;
  letter-spacing:-.025em;
}

.container{
  width:100%;
  max-width:var(--largura);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.script{font-family:'Dancing Script',cursive;font-weight:700;letter-spacing:0}

/* pré-título em pílula contornada, com respiro até o título */
.rotulo{
  display:inline-block;
  font-family:'DM Mono',ui-monospace,monospace;
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--roxo);
  border:1px solid rgba(111,0,220,.32);
  border-radius:var(--r-pill);
  padding:7px 18px;
  margin:0 0 22px;
}
/* sobre fundo escuro o contorno vira branco */
.festas__cabeca .rotulo,
.bloco__texto .rotulo{
  color:rgba(255,255,255,.92);
  border-color:rgba(255,255,255,.35);
}

/* seções -------------------------------------------------------------- */
.secao{padding:88px 0}
.secao__cabeca{text-align:center;max-width:660px;margin:0 auto 44px}
.secao__cabeca h2{font-size:clamp(32px,4.6vw,50px)}
.secao__cabeca p:not(.rotulo){color:var(--tinta-suave);margin:14px 0 0}

/* botões ---------------------------------------------------------------
   Efeito 3D: uma "base" sólida mais escura embaixo do botão. No hover ele
   sobe e a base cresce; ao apertar, ele afunda e a base quase some.     */
.btn{
  --base:rgba(42,21,51,.3);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 28px;
  border-radius:var(--r-pill);
  font-weight:700;font-size:16px;
  white-space:nowrap;
  box-shadow:0 5px 0 var(--base);
  transition:transform .12s ease, box-shadow .12s ease, background .18s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--base),0 14px 22px -12px rgba(42,21,51,.4)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--base)}

.btn--roxo{--base:#48008F;background:var(--roxo);color:#fff}
.btn--roxo:hover{background:var(--roxo-escuro);color:#fff}

.btn--escuro{--base:#30064A;background:var(--roxo-escuro);color:#fff}
.btn--escuro:hover{background:var(--roxo-profundo);color:#fff}

.btn--zap{--base:#48008F;background:var(--roxo);color:#fff}
.btn--zap:hover{background:var(--roxo-escuro);color:#fff}

.btn--wpp{--base:#7CD565;background:var(--verde);color:#123d1f}
.btn--wpp:hover{background:#9df283;color:#123d1f}
/* só um dos dois aparece: o do cabeçalho no desktop, o do menu no celular */
.nav__zap{display:none}
.header__zap{flex:0 0 auto}
/* o do menu fica sem o relevo 3D: só sombra suave */
.header__zap,.nav__zap{box-shadow:0 12px 26px -16px rgba(31,122,61,.85)}
.header__zap:hover,.nav__zap:hover{transform:translateY(-2px);box-shadow:0 15px 28px -16px rgba(31,122,61,.85)}
.header__zap:active,.nav__zap:active{transform:translateY(1px);box-shadow:0 10px 22px -16px rgba(31,122,61,.85)}

.btn--linha{--base:rgba(111,0,220,.22);background:transparent;color:var(--roxo);border:2px solid rgba(111,0,220,.25)}
.btn--linha:hover{border-color:var(--roxo);background:rgba(111,0,220,.06)}

.btn--branco{--base:#D5C3E6;background:#fff;color:var(--roxo)}
.btn--branco:hover{background:var(--lilas);color:var(--roxo-escuro)}

.ico{width:19px;height:19px;flex:0 0 auto;display:block}
.btn .ico{width:18px;height:18px}
.btn .ico--zap{width:19px;height:19px}


/* ======================= TELA DE CARREGAMENTO =======================
   Cobre a tela enquanto o hero e as fontes carregam. Sai sozinha, e
   tem rede de segurança no JS pra nunca prender o visitante.         */
.carregando{
  position:fixed;inset:0;z-index:10000;
  background:var(--creme);
  display:grid;place-items:center;
  transition:opacity .55s ease, visibility .55s ease;
}
.carregando--fim{opacity:0;visibility:hidden}
.carregando__miolo{display:grid;justify-items:center;gap:18px}
.carregando__trufa{
  width:112px;height:112px;
  animation:trufaPulsa 1.5s ease-in-out infinite;
}
.carregando__nome{
  font-family:'Schibsted Grotesk',sans-serif;
  font-weight:700;font-size:23px;letter-spacing:-.02em;
  color:var(--tinta);
}
.carregando__nome .script{color:var(--rosa);font-size:1.2em;margin-left:.05em}
.carregando__barra{
  width:170px;height:4px;border-radius:999px;
  background:rgba(111,0,220,.14);
  overflow:hidden;
}
.carregando__barra i{
  display:block;height:100%;width:40%;border-radius:999px;
  background:var(--roxo);
  animation:barraCorre 1.15s ease-in-out infinite;
}
@keyframes trufaPulsa{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-9px) scale(1.05)}
}
@keyframes barraCorre{
  0%{transform:translateX(-110%)}
  100%{transform:translateX(320%)}
}

/* ===================== ENTRADA E REVELAÇÃO ==========================
   Só escondem conteúdo quando o JS está vivo (html.js), senão um erro
   de script deixaria a página em branco.                             */
html.js [data-entra]{opacity:0;transform:translateY(20px)}
html.js body.pronto [data-entra]{
  animation:entraSubindo .75s cubic-bezier(.2,.8,.3,1) forwards;
  animation-delay:calc(var(--d, 0) * 90ms);
}
@keyframes entraSubindo{to{opacity:1;transform:none}}

html.js [data-anima]{
  opacity:0;transform:translateY(26px);
  transition:opacity .65s ease, transform .65s cubic-bezier(.2,.8,.3,1);
}
html.js [data-anima].revelado{opacity:1;transform:none}

/* o carrinho dá um pulinho quando entra item novo */
@keyframes badgePulo{
  0%{transform:scale(1)}
  40%{transform:scale(1.45)}
  100%{transform:scale(1)}
}
.carrinho-topo__n.pulsa{animation:badgePulo .42s cubic-bezier(.2,.9,.3,1)}
@keyframes carrinhoBalanca{
  0%,100%{transform:rotate(0)}
  25%{transform:rotate(-11deg)}
  60%{transform:rotate(8deg)}
}
.carrinho-topo.pulsa .ico{animation:carrinhoBalanca .5s ease}

/* quem prefere menos movimento não vê nada disso */
@media (prefers-reduced-motion:reduce){
  .carregando__trufa,.carregando__barra i{animation:none}
  html.js [data-entra],html.js [data-anima]{opacity:1;transform:none;animation:none;transition:none}
  .carrinho-topo__n.pulsa,.carrinho-topo.pulsa .ico{animation:none}
}

/* =========================== CABEÇALHO ===============================
   Sem fundo no topo da página; o fundo entra quando rola.              */
.header{
  position:fixed;top:16px;left:0;right:0;z-index:1000;
  padding-inline:var(--margem-tela);
}
.header__barra{
  max-width:var(--largura);margin-inline:auto;
  display:flex;align-items:center;gap:20px;
  border-radius:var(--r-pill);
  padding:11px 12px 11px 24px;
  background:rgba(255,253,249,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(111,0,220,.08);
  box-shadow:none;
  transition:background .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.header--solido .header__barra{
  background:rgba(255,253,249,.94);
  border-color:rgba(111,0,220,.12);
  box-shadow:var(--sombra);
}
.header__logo{display:flex;align-items:center;flex:0 0 auto}
.header__logo img{height:48px;width:auto}   /* mesma altura do botão do zap: preenche a barra sem crescê-la */

.nav{display:flex;align-items:center;gap:30px;margin-left:auto}
.nav a{
  color:var(--tinta);font-weight:500;font-size:16px;
  position:relative;padding:4px 0;
}
/* o sublinhado animado é só dos links de texto — nunca do botão do zap */
.nav a:not(.btn)::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--roxo);border-radius:2px;transition:right .22s ease;
}
.nav a:not(.btn):hover{color:var(--roxo)}
.nav a:not(.btn):hover::after{right:0}
.header .btn{padding:12px 22px;font-size:15px}

/* menu mobile */
.hamburguer{
  display:none;margin-left:auto;
  width:46px;height:46px;border-radius:var(--r-pill);
  background:var(--lilas);
  align-items:center;justify-content:center;
}
.hamburguer span{
  display:block;width:19px;height:2px;background:var(--roxo);border-radius:2px;
  position:relative;transition:transform .22s ease, background .22s ease;
}
.hamburguer span::before,.hamburguer span::after{
  content:"";position:absolute;left:0;width:19px;height:2px;
  background:var(--roxo);border-radius:2px;transition:transform .22s ease, top .22s ease;
}
.hamburguer span::before{top:-6px}
.hamburguer span::after{top:6px}
.menu-aberto .hamburguer span{background:transparent}
.menu-aberto .hamburguer span::before{top:0;transform:rotate(45deg)}
.menu-aberto .hamburguer span::after{top:0;transform:rotate(-45deg)}

/* =============================== HERO ================================
   Largura total da tela, só com respiro nas laterais.                  */
.hero{padding:0}
.hero__caixa{
  position:relative;
  border-radius:0;
  overflow:hidden;
  /* ocupa a altura inteira da tela do usuário.
     svh = altura visível real no celular (desconta a barra do navegador);
     o vh acima fica de reserva pra navegador antigo. */
  height:100vh;
  height:100svh;
  display:flex;align-items:center;
  background:#F27DCB url('../img/hero.webp?v=20260825y') center center / cover no-repeat;
  box-shadow:none;
}
.hero__caixa::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg, rgba(255,120,230,.55) 0%, rgba(255,120,230,.22) 40%, transparent 60%);
  pointer-events:none;
}
.hero__texto{
  position:relative;z-index:2;
  width:100%;
  max-width:var(--largura);
  margin-inline:auto;
  padding:24px clamp(20px,2.4vw,34px) 0;
}
.hero__selo{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--roxo-escuro);color:#fff;
  padding:9px 20px;border-radius:var(--r-pill);
  font-size:14px;font-weight:600;
  margin-bottom:22px;
}
.hero h1{
  font-size:clamp(31px,5.2vw,72px);
  color:var(--roxo-escuro);
  margin-bottom:20px;
  white-space:nowrap;
}
.hero h1 .script{color:var(--roxo-escuro);font-size:1.12em;margin-left:.1em;opacity:.94}
.hero__sub{
  font-size:clamp(16.5px,1.5vw,18px);
  color:var(--roxo-profundo);
  max-width:470px;margin:0 0 14px;
  font-weight:500;
}
.hero__sub:last-of-type{margin-bottom:30px;font-weight:600}

.hero__acoes{display:flex;flex-wrap:wrap;gap:14px}

/* em tela baixa o bloco centralizado encostaria no menu fixo:
   ali ele passa a alinhar pelo topo, com folga garantida */
@media (min-width:821px) and (max-height:800px){
  .hero__caixa{
    height:auto;min-height:100svh;   /* cresce se o conteúdo não couber */
    align-items:flex-start;
  }
  .hero__texto{padding-top:calc(var(--topo) + 24px);padding-bottom:40px}
}

/* ==================== ATALHOS (compre por) ==========================
   Faixa de pílulas coloridas, no espírito do "compre por materiais".  */
.atalhos{padding:44px 0 4px}
.atalhos__linha{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.atalhos__rot{
  font-family:'Schibsted Grotesk',sans-serif;
  font-weight:700;font-size:clamp(19px,2vw,24px);
  letter-spacing:-.02em;
  flex:0 0 auto;
}
.atalhos__pills{display:flex;gap:10px;flex-wrap:wrap}
.pilula{
  padding:10px 22px;border-radius:var(--r-pill);
  font-size:15px;font-weight:500;color:var(--tinta);
  transition:transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.pilula:hover{transform:translateY(-2px);filter:brightness(.96)}
.pilula[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--roxo);font-weight:700}
.pilula--1{background:var(--p1)} .pilula--2{background:var(--p2)}
.pilula--3{background:var(--p3)} .pilula--4{background:var(--p4)}
.pilula--5{background:var(--p5)} .pilula--6{background:var(--p6)}
.pilula--7{background:var(--p7)}

/* ============================= MARQUEE =============================== */
.marquee{
  background:var(--roxo);
  color:#fff;
  padding:15px 0;
  overflow:hidden;
  margin-top:0;            /* cola no fim do hero */
}
.marquee__trilho{display:flex;width:max-content;animation:desliza 34s linear infinite}
.marquee__item{
  display:flex;align-items:center;gap:26px;
  padding-right:26px;
  font-family:'Schibsted Grotesk',sans-serif;font-weight:500;font-size:19px;
  letter-spacing:-.01em;
  white-space:nowrap;
}
.marquee__frase{display:inline-flex;align-items:baseline;white-space:nowrap}
.marquee__item .script{font-size:1.28em;line-height:1;margin-left:.16em}
/* travessão com o mesmo respiro dos dois lados */
.marquee__traco{margin:0 .5em}
.marquee__sep{display:grid;place-items:center;flex:0 0 auto}
.marquee__ico{width:22px;height:22px;display:block}
.marquee__sep--rosa{color:var(--rosa)}
.marquee__sep--verde{color:var(--verde)}
@keyframes desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__trilho{animation:none}}

/* ============================= CARDÁPIO ============================== */
#cardapio{background:var(--creme)}
.filtros{
  display:flex;align-items:center;gap:12px;
  margin-bottom:38px;flex-wrap:wrap;
}
.filtros__botoes{display:flex;flex-wrap:wrap;gap:10px;flex:0 0 auto}

/* a busca toma todo o espaço que sobra na linha */
.busca{
  position:relative;flex:1 1 260px;min-width:240px;
  display:flex;align-items:center;gap:10px;
  background:#fff;
  border:1px solid rgba(111,0,220,.16);
  border-radius:var(--r-pill);
  padding:0 14px 0 16px;
  height:50px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.busca:focus-within{border-color:var(--roxo);box-shadow:0 0 0 3px rgba(111,0,220,.12)}
.busca__lupa{color:var(--tinta-suave);flex:0 0 auto;width:18px;height:18px}
.busca input{
  flex:1;min-width:0;height:100%;
  border:0;outline:none;background:none;
  font-family:'DM Sans',sans-serif;font-size:15px;color:var(--tinta);
}
.busca input::placeholder{color:var(--tinta-suave);opacity:.85}
.busca input::-webkit-search-cancel-button{display:none}
.busca__limpar{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  background:var(--lilas);color:var(--tinta);
  display:grid;place-items:center;font-size:17px;line-height:1;
}
.busca__limpar[hidden]{display:none}   /* idem: display:grid vencia o hidden */
.busca__limpar:hover{background:var(--roxo);color:#fff}

.busca__sugestoes{
  position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:40;
  margin:0;padding:6px;list-style:none;
  background:#fff;
  border:1px solid rgba(111,0,220,.14);
  border-radius:16px;
  box-shadow:var(--sombra);
  max-height:280px;overflow-y:auto;
}
.busca__sugestoes li{
  padding:10px 14px;border-radius:10px;cursor:pointer;
  font-size:15px;
}
.busca__sugestoes li:hover,
.busca__sugestoes li.marcado{background:var(--lilas);color:var(--roxo)}
.filtro{
  background:#fff;color:var(--tinta);
  height:50px;padding:0 24px;border-radius:var(--r-pill);
  font-weight:600;font-size:15px;
  display:inline-flex;align-items:center;
  border:1px solid rgba(111,0,220,.14);
  transition:all .18s ease;
}
.filtro:hover{border-color:var(--roxo);color:var(--roxo)}
.filtro[aria-pressed="true"]{background:var(--roxo);color:#fff;border-color:var(--roxo)}

.grupo{margin-bottom:64px}
.grupo:last-child{margin-bottom:0}
.grupo__cabeca{
  display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  margin-bottom:26px;padding-bottom:16px;
  border-bottom:1px solid rgba(111,0,220,.14);
}
.grupo__cabeca h3{font-size:clamp(25px,3vw,34px)}
.grupo__cabeca p{
  margin:0;color:var(--tinta-suave);font-size:15px;
  margin-left:auto;text-align:right;   /* encosta na direita do cabeçalho */
}
@media (max-width:820px){
  /* quebrou a linha: volta a alinhar pela esquerda */
  .grupo__cabeca p{margin-left:0;text-align:left}
}

.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px}

/* --------------------------- card do item ---------------------------- */
.card{
  position:relative;
  background:#fff;
  border-radius:15px;
  overflow:hidden;
  display:flex;flex-direction:column;
  border:1px solid rgba(111,0,220,.07);
  box-shadow:0 10px 30px -22px rgba(42,21,51,.5);
  transition:transform .22s ease, box-shadow .22s ease;
}
.card[hidden]{display:none}
.card:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
.card__foto{position:relative;aspect-ratio:1/1;background:var(--lilas);overflow:hidden}
/* ------------------------- galeria de fotos -------------------------- */
.gal{position:relative;width:100%;height:100%;overflow:hidden}
.gal__trilho{
  display:flex;width:100%;height:100%;
  transition:transform .35s cubic-bezier(.3,.8,.35,1);
}
.gal__slide{
  flex:0 0 100%;width:100%;height:100%;
  overflow:hidden;   /* prende o zoom dentro da própria foto */
}
.gal__slide img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease;
}
.card:hover .gal__slide img{transform:scale(1.05)}

.gal__seta{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:3;
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,253,249,.92);color:var(--tinta);
  display:grid;place-items:center;
  box-shadow:0 6px 16px -8px rgba(42,21,51,.7);
  opacity:0;pointer-events:none;
  transition:opacity .2s ease, background .2s ease;
}
.gal__seta--ant{left:8px}
.gal__seta--prox{right:8px}
.gal__seta:hover{background:#fff;color:var(--roxo)}
/* as setas aparecem ao passar o mouse na foto */
.card__foto:hover .gal--multi .gal__seta,
.gal--multi .gal__seta:focus-visible{opacity:1;pointer-events:auto}

.gal__pontos{
  position:absolute;left:0;right:0;bottom:8px;z-index:3;
  display:flex;justify-content:center;gap:5px;
}
.gal__pontos span{
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,253,249,.6);
  box-shadow:0 1px 3px rgba(42,21,51,.5);
  transition:background .2s ease,width .2s ease;
}
.gal__pontos span.ativo{background:#fff;width:16px;border-radius:999px}

/* no popup as setas ficam sempre visíveis e maiores */
.modal__foto .gal--multi .gal__seta{opacity:1;pointer-events:auto;width:40px;height:40px}
.modal__foto .gal__pontos{bottom:12px}
.card__selo{
  position:absolute;top:12px;left:12px;z-index:2;
  background:var(--roxo);color:#fff;
  padding:6px 14px;border-radius:var(--r-pill);
  font-size:12px;font-weight:700;
  /* fio branco translúcido + sombra: separa o selo da foto */
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 4px 12px -3px rgba(42,21,51,.5);
}
.card__selo--novo{background:var(--rosa);color:#4a0033}
.card__corpo{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.card__corpo h4{font-size:19px;margin-bottom:6px}
.card__desc{color:var(--tinta-suave);font-size:14.5px;line-height:1.5;margin:0 0 16px;flex:1}
.card__preco{
  font-family:'Schibsted Grotesk',sans-serif;font-weight:700;font-size:22px;
  color:var(--roxo);letter-spacing:-.02em;
  display:flex;align-items:baseline;gap:6px;
  margin-bottom:14px;
}
.card__preco small{font-size:12.5px;font-weight:400;color:var(--tinta-suave);letter-spacing:0}

/* uma altura só para os dois botões do card: o + acompanha o Carrinho */
.card__acoes{--alt-acao:46px;display:flex;align-items:stretch;gap:8px}
.btn--pedir{
  --base:#48008F;
  flex:1;
  height:var(--alt-acao);
  border-radius:15px;
  background:var(--roxo);color:#fff;
  padding:0 14px;font-size:15px;gap:7px;
}
.btn--pedir:hover{background:var(--roxo-escuro);color:#fff}
.btn--off{--base:rgba(42,21,51,.12);background:rgba(42,21,51,.08);color:var(--tinta-suave);cursor:default}
.btn--off:hover{background:rgba(42,21,51,.08);transform:none;box-shadow:0 5px 0 var(--base)}
.card__mais{
  width:var(--alt-acao);height:var(--alt-acao);flex:0 0 auto;
  border-radius:15px;
  background:var(--roxo);color:#fff;
  display:grid;place-items:center;   /* o ícone é SVG: centraliza exato */
  box-shadow:0 5px 0 #48008F;
  transition:transform .12s ease, box-shadow .12s ease, background .18s ease;
}
.card__mais .ico{width:20px;height:20px}
.card__mais:hover{background:var(--roxo-escuro);transform:translateY(-2px);box-shadow:0 7px 0 #48008F}
.card__mais:active{transform:translateY(3px);box-shadow:0 1px 0 #48008F}
.card__mais:focus-visible{outline:3px solid var(--rosa);outline-offset:3px}
.card--esgotado .card__foto img{filter:grayscale(1);opacity:.55}
.card__esgotado{
  position:absolute;inset:auto 0 0 0;
  background:var(--tinta);color:#fff;
  text-align:center;padding:8px;font-size:13px;font-weight:700;
}
.grupo__mais{display:flex;justify-content:center;margin-top:26px}
.grupo__mais[hidden]{display:none}   /* o display:flex vence o atributo hidden */
.grupo__mais .btn{border-radius:15px;padding:13px 30px}
.vazio{text-align:center;color:var(--tinta-suave);padding:30px 0}


/* ============================= CARRINHO ==============================
   Botão no cabeçalho com contador + painel que entra pela direita.    */
.carrinho-topo{
  position:relative;flex:0 0 auto;
  width:46px;height:46px;border-radius:15px;
  background:var(--lilas);color:var(--roxo);
  display:grid;place-items:center;
  transition:background .18s ease,transform .18s ease;
}
.carrinho-topo:hover{background:var(--roxo);color:#fff;transform:translateY(-1px)}
.carrinho-topo .ico{width:22px;height:22px}
.carrinho-topo__n{
  position:absolute;top:-5px;right:-5px;
  min-width:22px;height:22px;padding:1px 5px 0;  /* corrige o meio pixel da fonte */
  border-radius:999px;
  background:var(--rosa);color:#4a0033;
  font-family:'Schibsted Grotesk',sans-serif;font-weight:700;font-size:12px;
  line-height:1;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--creme);
}
.carrinho-topo__n[hidden]{display:none}

.carrinho{position:fixed;inset:0;z-index:2500;display:none}
.carrinho.aberto{display:block}
.carrinho__fundo{
  position:absolute;inset:0;
  background:rgba(42,21,51,.55);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  animation:aparece .2s ease;
}
.carrinho__painel{
  position:absolute;top:0;right:0;bottom:0;
  width:min(420px,100%);
  background:var(--creme);
  display:flex;flex-direction:column;
  box-shadow:-24px 0 60px -30px rgba(42,21,51,.7);
  animation:entra-lado .28s cubic-bezier(.2,.8,.3,1);
  outline:none;
}
@keyframes entra-lado{from{transform:translateX(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){
  .carrinho__painel,.carrinho__fundo{animation:none}
}
.carrinho__topo{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 22px 16px;
  border-bottom:1px solid rgba(111,0,220,.12);
}
.carrinho__topo h3{font-size:23px}
.carrinho__fechar{
  width:38px;height:38px;border-radius:12px;
  background:var(--lilas);color:var(--tinta);
  display:grid;place-items:center;font-size:22px;line-height:1;
  transition:background .18s ease}
.carrinho__fechar:hover{background:var(--roxo);color:#fff}

.carrinho__lista{flex:1;overflow-y:auto;padding:16px 22px}
.carrinho__vazio{color:var(--tinta-suave);text-align:center;padding:46px 10px;margin:0;line-height:1.7}

.linha{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 0;
  border-bottom:1px solid rgba(111,0,220,.09);
}
.linha:last-child{border-bottom:0}
.linha__foto{width:64px;height:64px;border-radius:12px;object-fit:cover;flex:0 0 auto}
.linha__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.linha__info strong{font-family:'Schibsted Grotesk',sans-serif;font-size:15.5px;line-height:1.25}
.linha__unit{font-size:12.5px;color:var(--tinta-suave)}
.linha__lado{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:0 0 auto}
.linha__total{font-family:'Schibsted Grotesk',sans-serif;font-weight:700;color:var(--roxo);font-size:15.5px}
.linha__tirar{
  width:30px;height:30px;border-radius:9px;
  color:var(--tinta-suave);display:grid;place-items:center;
  transition:background .18s ease,color .18s ease}
.linha__tirar:hover{background:rgba(255,100,205,.14);color:#c2185b}
.linha__tirar .ico{width:16px;height:16px}

.passo{
  display:inline-flex;align-items:center;gap:2px;margin-top:4px;
  border:1px solid rgba(111,0,220,.18);border-radius:999px;
  padding:2px;width:max-content;
}
.passo button{
  width:28px;height:28px;border-radius:50%;
  color:var(--roxo);display:grid;place-items:center;
  transition:background .16s ease}
.passo button:hover{background:var(--lilas)}
.passo button .ico{width:15px;height:15px}
.passo span{
  min-width:26px;text-align:center;
  font-family:'Schibsted Grotesk',sans-serif;font-weight:700;font-size:15px}

.carrinho__dados{
  padding:20px 22px 0;
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
  border-top:1px solid rgba(111,0,220,.12);
  background:var(--lilas-2);
}
.carrinho__dados[hidden]{display:none}
.carrinho__dados .campo > span{font-size:12px}
.carrinho__alerta{
  margin:0;font-size:13px;color:#a3124f;
  background:rgba(255,100,205,.16);border-radius:12px;padding:9px 12px;
}
.carrinho__alerta[hidden]{display:none}

.carrinho__base{
  padding:16px 22px 22px;
  background:var(--lilas-2);
  display:flex;flex-direction:column;gap:12px;
}
/* sem itens não existe bloco de baixo, então a linha some junto */
.carrinho__dados[hidden] + .carrinho__base{border-top:1px solid rgba(111,0,220,.12)}
.carrinho__base:empty{display:none}
.carrinho__aviso{
  margin:0;font-size:13.5px;color:var(--roxo-escuro);
  background:rgba(255,100,205,.14);
  border-radius:12px;padding:10px 14px;
}
.carrinho__total{
  display:flex;align-items:baseline;justify-content:space-between;
  font-size:16px;
}
.carrinho__total strong{
  font-family:'Schibsted Grotesk',sans-serif;font-size:27px;color:var(--roxo);
  letter-spacing:-.02em}
.carrinho__base .btn{width:100%;border-radius:15px}
.carrinho__limpar{
  font-size:13.5px;color:var(--tinta-suave);text-decoration:underline;
  align-self:center}
.carrinho__limpar:hover{color:var(--roxo)}
.carrinho__obs{margin:0;font-size:12.5px;color:var(--tinta-suave);text-align:center;line-height:1.5}

/* ============================== POPUP ================================ */
.modal{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;padding:20px}
.modal.aberto{display:flex}

/* popup que carrega um formulário: uma coluna só */
.modal--form .modal__caixa{
  grid-template-columns:1fr;
  width:min(600px,100%);
  max-height:min(92vh,860px);
  overflow-y:auto;
  background:var(--creme);
}
.modal--form .form{
  box-shadow:none;border-radius:0;
  padding:30px 30px 26px;
}
.modal--form .modal__fechar{position:sticky;float:right;top:14px;right:14px;margin-left:auto}
@media (max-width:520px){
  .modal--form .form{padding:24px 18px 20px}
}
.modal__fundo{
  position:absolute;inset:0;
  background:rgba(42,21,51,.62);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  animation:aparece .2s ease;
}
.modal__caixa{
  position:relative;
  width:min(880px,100%);
  max-height:min(88vh,760px);
  background:var(--creme);
  border-radius:28px;
  overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;
  box-shadow:var(--sombra-alta);
  animation:sobe .28s cubic-bezier(.2,.8,.3,1);
}
.modal__caixa:focus{outline:none}
@keyframes aparece{from{opacity:0}to{opacity:1}}
@keyframes sobe{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.modal__caixa,.modal__fundo{animation:none}}
.modal__foto{position:relative;background:var(--lilas);min-height:280px}
.modal__foto img{width:100%;height:100%;object-fit:cover}
.modal__conteudo{padding:36px 34px;overflow-y:auto}
.modal__selo{
  display:inline-block;background:var(--roxo);color:#fff;
  padding:6px 14px;border-radius:var(--r-pill);
  font-size:12px;font-weight:700;
}
.modal__tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.modal__selo--novo{background:var(--rosa);color:#4a0033}
.modal__selo--mao{background:var(--lilas);color:var(--roxo)}
.modal__conteudo h3{font-size:clamp(27px,3vw,36px);margin-bottom:10px}
.modal__desc{color:var(--tinta-suave);margin:0 0 22px;font-size:16.5px}
.modal__preco{
  font-family:'Schibsted Grotesk',sans-serif;font-weight:700;font-size:40px;
  color:var(--roxo);line-height:1;letter-spacing:-.03em;margin-bottom:24px;
  display:flex;align-items:baseline;gap:8px;
}
.modal__preco small{font-family:'DM Sans',sans-serif;font-size:14px;font-weight:400;color:var(--tinta-suave);letter-spacing:0}
.modal__preco-obs{font-size:13px;color:var(--tinta-suave);margin:0 0 24px}
.ficha{
  list-style:none;margin:0 0 26px;padding:20px;
  background:var(--lilas-2);border-radius:var(--r-peq);
  display:grid;gap:12px;
}
.ficha li{display:flex;justify-content:space-between;gap:16px;font-size:14.5px}
.ficha .rot{color:var(--tinta-suave);flex:0 0 auto}
.ficha .val{font-weight:600;text-align:right}
.modal__acoes{display:flex;flex-direction:column;gap:10px}
.modal__fechar{
  position:absolute;top:14px;right:14px;z-index:3;
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,253,249,.94);color:var(--tinta);
  display:grid;place-items:center;font-size:22px;line-height:1;
  box-shadow:0 6px 18px -8px rgba(42,21,51,.6);
  transition:transform .2s ease,background .2s ease;
}
.modal__fechar:hover{background:#fff;transform:rotate(90deg)}


/* ======================= ENCOMENDAS PARA FESTAS =====================
   Mosaico de duas colunas: cards de alturas diferentes se encaixam.  */
.festas{
  background:linear-gradient(160deg,var(--tinta) 0%,#3A0F4E 55%,var(--roxo-profundo) 100%);
  padding:84px 0 120px;
  position:relative;overflow:hidden;
}
.festas::before,.festas::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;
  background:rgba(255,100,205,.14);
}
.festas::before{right:-140px;top:-140px;width:420px;height:420px}
.festas::after{left:-160px;bottom:-180px;width:460px;height:460px}

.festas .container{position:relative;z-index:2}
.festas__cabeca{text-align:center;max-width:680px;margin:0 auto 42px}
.festas__cabeca h2{color:#fff;font-size:clamp(30px,4.2vw,46px)}
.festas__cabeca p:not(.rotulo){color:rgba(255,255,255,.86);margin:16px 0 0;font-size:17px}

.mosaico{column-count:3;column-gap:20px}

.fcard{
  break-inside:avoid;
  display:inline-block;width:100%;
  margin-bottom:22px;
  background:var(--creme);
  border-radius:15px;
  overflow:hidden;      /* o recorte do card arredonda os cantos da foto */
  box-shadow:0 20px 44px -28px rgba(0,0,0,.6);
}
.fcard img{
  width:100%;display:block;
  /* altura controlada: sem isso o card fica gigante numa coluna larga */
  aspect-ratio:4/3;object-fit:cover;
}
.fcard--retrato img{aspect-ratio:3/4}
.fcard--quadrado img{aspect-ratio:1/1}
.fcard--cta img{aspect-ratio:16/10}
.fcard__texto{padding:18px 20px 20px}
.fcard__texto h3{
  font-size:19px;color:var(--roxo);
  margin-bottom:7px;
}
.fcard__texto p{
  margin:0;font-size:14.5px;line-height:1.55;color:var(--tinta-suave);
}
.fcard--cta .fcard__texto .btn{width:100%;margin-top:16px;border-radius:15px}
.fcard__prazo{
  display:block;margin-top:10px;
  font-size:12.5px;color:var(--tinta-suave);text-align:center;
}

.festas__acao{
  position:relative;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  margin-top:12px;
}
/* no desktop o botão sobe para o vão que a coluna do meio deixa e o
   aviso desce 18px, alinhando com a base do card mais baixo */
@media (min-width:1100px){
  .festas__acao{margin-top:-140px}
}
.festas__acao .btn{padding:16px 40px;border-radius:15px}
.festas__prazo{margin:0;font-size:14px;color:rgba(255,255,255,.72)}
/* desce o aviso para a linha onde termina o card mais baixo */
@media (min-width:1100px){
  .festas__prazo{margin-top:24px}
}

@media (max-width:1024px){
  .mosaico{column-count:2}
}
@media (max-width:820px){
  .festas{padding:64px 0}
  .mosaico{column-count:1}
}

/* ============================= REVENDA ============================== */
.bloco{
  border-radius:36px;
  padding:clamp(36px,5vw,64px);
  color:#fff;
  display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;
  box-shadow:var(--sombra-alta);
  position:relative;overflow:hidden;
}
.bloco--revenda{background:linear-gradient(135deg,var(--roxo-profundo),#7A1BB8)}
.bloco--revenda::after{
  content:"";position:absolute;left:-110px;bottom:-120px;
  width:340px;height:340px;border-radius:50%;
  background:rgba(255,100,205,.16);
  pointer-events:none;
}
.bloco::before{
  content:"";position:absolute;right:-90px;top:-90px;
  width:320px;height:320px;border-radius:50%;
  background:rgba(255,100,205,.2);
}
.bloco__texto{position:relative;z-index:2}
.bloco h2{font-size:clamp(32px,4.2vw,48px);margin-bottom:18px}
.bloco__titulo{line-height:1.02}
.bloco__marca .script{
  color:var(--rosa);
  font-size:1.16em;
  margin-left:.06em;
}
.bloco__texto > p:not(.rotulo){color:rgba(255,255,255,.9);margin:0 0 26px;font-size:17px;max-width:540px}
.bloco__lista{list-style:none;padding:0;margin:0 0 32px;display:flex;flex-wrap:wrap;gap:10px}
.bloco__lista li{
  background:rgba(255,255,255,.16);
  padding:10px 20px;border-radius:var(--r-pill);
  font-size:15px;font-weight:600;
}
.bloco__foto{position:relative;z-index:2}
.bloco__foto img{
  border-radius:var(--r-card);box-shadow:var(--sombra-alta);
  width:100%;aspect-ratio:1/1;object-fit:cover;
}


/* ====================== FORMULÁRIO DE REVENDA ======================= */
.bloco--revenda{grid-template-columns:.92fr 1.08fr;align-items:start}
.bloco__texto > p.bloco__nota{margin:0;font-size:15px;color:rgba(255,255,255,.9)}
.bloco__nota a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.bloco__nota a:hover{color:var(--verde)}

.form{
  position:relative;z-index:2;
  background:var(--creme);
  border-radius:22px;
  padding:26px 24px;
  display:flex;flex-direction:column;gap:14px;
  box-shadow:var(--sombra-alta);
  color:var(--tinta);
}
.form__titulo{font-size:24px}
.form__sub{margin:-8px 0 4px;font-size:14.5px;color:var(--tinta-suave)}
.form__linha{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.campo > span,.campo legend{
  font-size:13px;font-weight:600;color:var(--tinta-suave);
  letter-spacing:.01em;
}
.campo input,.campo select,.campo textarea{
  width:100%;
  font-family:'DM Sans',sans-serif;font-size:15px;color:var(--tinta);
  background:#fff;
  border:1px solid rgba(111,0,220,.18);
  border-radius:12px;
  padding:11px 13px;
  outline:none;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.campo textarea{resize:vertical;min-height:60px}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  border-color:var(--roxo);box-shadow:0 0 0 3px rgba(111,0,220,.12);
}
.campo input.erro,.campo select.erro,.campo textarea.erro{
  border-color:#d3306f;box-shadow:0 0 0 3px rgba(211,48,111,.14);
}
.campo--grupo{border:0;padding:0;margin:0}
.opcoes{display:flex;flex-wrap:wrap;gap:8px}
.opcoes label{
  display:inline-flex;align-items:center;gap:7px;
  background:#fff;
  border:1px solid rgba(111,0,220,.18);
  border-radius:999px;
  padding:8px 14px;font-size:14px;cursor:pointer;
  transition:border-color .16s ease,background .16s ease;
}
.opcoes label:hover{border-color:var(--roxo)}
.opcoes input{accent-color:var(--roxo);width:15px;height:15px}
.opcoes label:has(input:checked){background:var(--lilas);border-color:var(--roxo)}


/* --------------------- seletor (dropdown próprio) -------------------
   Substitui o <select> nativo, que não aceita estilo na lista aberta. */
.seletor{position:relative}
.seletor__botao{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-family:'DM Sans',sans-serif;font-size:15px;color:var(--tinta);
  text-align:left;
  background:#fff;
  border:1px solid rgba(111,0,220,.18);
  border-radius:12px;
  padding:11px 13px;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.seletor__botao:hover{border-color:rgba(111,0,220,.4)}
.seletor__botao:focus-visible{border-color:var(--roxo);box-shadow:0 0 0 3px rgba(111,0,220,.12);outline:none}
.seletor.aberto .seletor__botao{border-color:var(--roxo);box-shadow:0 0 0 3px rgba(111,0,220,.12)}
.seletor__valor[data-vazio]{color:var(--tinta-suave)}
.seletor__seta{width:18px;height:18px;flex:0 0 auto;color:var(--tinta-suave);transition:transform .2s ease}
.seletor.aberto .seletor__seta{transform:rotate(180deg);color:var(--roxo)}

.seletor__lista{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;
  margin:0;padding:6px;list-style:none;
  background:#fff;
  border:1px solid rgba(111,0,220,.16);
  border-radius:14px;
  box-shadow:0 18px 40px -22px rgba(42,21,51,.7);
  max-height:250px;overflow-y:auto;
}
.seletor__lista li{
  padding:10px 12px;border-radius:9px;cursor:pointer;
  font-size:14.5px;
}
.seletor__lista li:hover,
.seletor__lista li.marcado{background:var(--lilas);color:var(--roxo)}
.seletor__lista li[aria-selected="true"]{font-weight:700;color:var(--roxo)}

/* ======================== CALENDARIO ================================
   Substitui o <input type="date">. O calendario nativo e desenhado pelo
   sistema, nao aceita estilo, e mostra a data no formato do idioma do
   navegador (mm/dd/aaaa em ingles). O campo original continua no
   formulario, escondido, guardando o valor em aaaa-mm-dd.
   =================================================================== */
.datap{position:relative;display:block}
.datap__campo{
  display:flex;align-items:center;gap:8px;width:100%;
  background:#fff;border:1px solid rgba(111,0,220,.18);
  border-radius:12px;padding:0 8px 0 14px;height:50px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.datap__campo:focus-within{
  border-color:var(--roxo);box-shadow:0 0 0 3px rgba(111,0,220,.12);
}
.campo .datap__campo input.datap__texto{
  flex:1;min-width:0;width:auto;height:100%;
  border:0;background:none;padding:0;border-radius:0;box-shadow:none;
  font-family:'DM Sans',sans-serif;font-size:15px;color:var(--tinta);
}
.campo .datap__campo input.datap__texto:focus{outline:none;border:0;box-shadow:none}
.datap__texto::placeholder{color:var(--tinta-suave)}
.datap__abrir{
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  color:var(--tinta-suave);flex:0 0 auto;
}
.datap__abrir:hover{background:var(--lilas);color:var(--roxo)}
.datap__abrir svg{width:19px;height:19px}

.datap__caixa{
  position:fixed;z-index:2200;width:300px;padding:14px;
  background:#fff;border:1px solid rgba(111,0,220,.16);border-radius:16px;
  box-shadow:0 22px 46px -22px rgba(42,21,51,.6);
}
.datap__caixa[hidden]{display:none}
.datap__topo{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.datap__mes{flex:1;text-align:center;font-weight:700;font-size:15px;text-transform:capitalize}
.datap__nav{
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  color:var(--tinta-suave);flex:0 0 auto;
}
.datap__nav:hover{background:var(--lilas);color:var(--roxo)}
.datap__nav svg{width:17px;height:17px}
.datap__semana,.datap__grade{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.datap__semana span{
  text-align:center;font-size:11px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;color:var(--tinta-suave);padding:4px 0 6px;
}
.datap__dia{
  height:36px;border-radius:10px;font-size:14px;color:var(--tinta);
  display:grid;place-items:center;
}
.datap__dia:hover{background:var(--lilas);color:var(--roxo)}
.datap__dia--fora{color:var(--tinta-suave);opacity:.45}
.datap__dia--hoje{box-shadow:inset 0 0 0 1px rgba(111,0,220,.35);font-weight:700}
.datap__dia--escolhido{background:var(--roxo);color:#fff;font-weight:700;box-shadow:none}
.datap__dia--escolhido:hover{background:var(--roxo-escuro);color:#fff}
.datap__dia[disabled]{opacity:.28;cursor:default}
.datap__dia[disabled]:hover{background:none;color:var(--tinta)}
.datap__pe{
  display:flex;justify-content:space-between;gap:10px;
  margin-top:10px;padding-top:10px;border-top:1px solid rgba(111,0,220,.12);
}
.datap__pe button{font-size:13.5px;font-weight:700;color:var(--tinta-suave)}
.datap__pe button:hover{color:var(--roxo)}
.datap__aviso{
  margin-top:8px;font-size:12.5px;color:var(--tinta-suave);line-height:1.45;
}

.form__enviar{width:100%;border-radius:15px;margin-top:4px}
.form__aviso{
  margin:0;font-size:13.5px;color:#a3124f;
  background:rgba(255,100,205,.16);border-radius:12px;padding:10px 13px;
}
.form__obs{margin:0;font-size:12px;color:var(--tinta-suave);text-align:center;line-height:1.5}
.form__obs a{color:var(--roxo);text-decoration:underline;text-underline-offset:2px}
.form__obs a:hover{color:var(--roxo-escuro)}

@media (max-width:1024px){
  .bloco--revenda{grid-template-columns:1fr}
  .bloco--revenda .form{order:2}
  .bloco--revenda .bloco__texto{order:1}
}
@media (max-width:520px){
  .form__linha{grid-template-columns:1fr}
  .form{padding:22px 18px}
}

/* ============================ SOBRE SHAY =============================
   Foto com cantos alternados (só superior direito e inferior esquerdo)
   e um bloco deslocado atrás fazendo as vezes de sombra.             */
.sobre{
  position:relative;overflow:hidden;
  background:var(--creme);
  padding:96px 0;
}
/* marca d'água atrás de tudo */
.sobre__marca{
  /* ancorada na própria grade: a esquerda bate com o texto da seção
     e a base bate com o fim da foto, que é o item mais alto da linha */
  position:absolute;left:0;bottom:-27px;
  z-index:2;pointer-events:none;user-select:none;
  font-family:'Schibsted Grotesk',sans-serif;
  font-weight:800;letter-spacing:-.04em;
  font-size:clamp(72px,12.5vw,185px);
  line-height:.8;
  color:#ff64cd80;
  white-space:nowrap;
}
.sobre .container{position:relative;z-index:1}

.sobre__grade{
  position:relative;
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,72px);align-items:start;
}

.sobre__texto{position:relative;z-index:3}   /* texto sempre por cima da marca d'água */

.sobre__selo{
  display:inline-block;
  border:1px solid rgba(111,0,220,.32);
  color:var(--roxo);
  border-radius:var(--r-pill);
  padding:7px 18px;
  font-family:'DM Mono',ui-monospace,monospace;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:22px;
}
.sobre__texto h2{font-size:clamp(34px,4.6vw,52px);margin-bottom:10px}
.sobre__texto h2 .script{color:var(--rosa);font-size:1.14em;margin-left:.06em}
.sobre__linha{
  font-family:'Schibsted Grotesk',sans-serif;
  font-size:clamp(17px,1.7vw,21px);font-weight:500;
  color:var(--tinta-suave);letter-spacing:-.01em;
  margin:0 0 24px;
}
.sobre__texto p{font-size:16.5px;color:var(--tinta);margin:0 0 16px;line-height:1.65}
.sobre__texto strong{color:var(--roxo);font-weight:700}
.sobre__texto .assinatura{
  font-family:'Dancing Script',cursive;font-weight:700;
  font-size:34px;color:var(--roxo);margin:22px 0 0;
}

.sobre__marca .script{color:#ff64cdd1;font-size:1.12em;margin-left:.05em}

.sobre__foto{position:relative}
.sobre__foto::before{
  content:"";position:absolute;inset:0;
  transform:translate(20px,20px);
  background:var(--roxo-escuro);
  border-radius:0 200px 0 200px;
  z-index:0;
}
.sobre__foto img{
  position:relative;z-index:1;
  width:100%;aspect-ratio:1/1;object-fit:cover;
  border-radius:0 330px 0 330px;
}

@media (max-width:900px){
  .sobre{padding:72px 0}
  .sobre__grade{grid-template-columns:1fr;gap:36px}
  .sobre__foto{order:-1;max-width:460px;margin-inline:auto;width:100%}
  .sobre__foto::before{transform:translate(14px,14px)}
  .sobre__foto img{border-radius:0 150px 0 150px}
  .sobre__foto::before{border-radius:0 92px 0 92px}
  .sobre__marca{font-size:clamp(60px,17vw,130px);bottom:auto;top:-2%}
}

/* =========================== DEPOIMENTOS =============================
   Aspas no topo, linha divisória, iniciais + nome embaixo.
   Rola pro lado sem barra de rolagem visível.                          */
#depoimentos{background:var(--lilas-2);padding:72px 0}
.depo__topo{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  margin-bottom:30px;
}
.depo__topo h2{font-size:clamp(30px,4vw,44px);margin-bottom:10px}
.depo__topo .depo__sub{margin:0;color:var(--tinta-suave);font-size:15.5px;max-width:560px}
.depo__setas{display:flex;gap:10px;flex:0 0 auto}
.seta{
  width:46px;height:46px;border-radius:12px;
  background:transparent;color:var(--tinta);
  display:grid;place-items:center;
  border:1px solid rgba(42,21,51,.22);
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.seta:hover{background:rgba(111,0,220,.08);border-color:var(--roxo);color:var(--roxo)}
.seta .ico{width:19px;height:19px}
.seta--cheia{background:var(--roxo);border-color:var(--roxo);color:#fff}
.seta--cheia:hover{background:var(--roxo-escuro);border-color:var(--roxo-escuro);color:#fff}
.seta[disabled]{opacity:.3;cursor:default}
.seta[disabled]:hover{background:transparent;border-color:rgba(42,21,51,.22);color:var(--tinta)}
.seta--cheia[disabled]:hover{background:var(--roxo);border-color:var(--roxo);color:#fff}

.depo__faixa{
  padding-left:max(var(--gutter), calc((100% - var(--largura)) / 2 + var(--gutter)));
  padding-right:0;          /* os cards encostam na borda da tela */
}
.depo__trilho{
  display:flex;gap:18px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding-bottom:2px;
  /* sem barra de rolagem visível */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.depo__trilho::-webkit-scrollbar{display:none}

.depo{
  flex:0 0 min(322px,78vw);
  scroll-snap-align:start;
  margin:0;                      /* <figure> vem com margem lateral do navegador */
  background:#fff;
  border:1px solid rgba(111,0,220,.07);
  border-radius:18px;
  padding:24px 24px 20px;
  display:flex;flex-direction:column;gap:14px;
}
.depo__aspas{
  font-family:Georgia,'Times New Roman',serif;
  font-size:46px;line-height:.72;height:26px;
  color:rgba(42,21,51,.16);
}
.depo blockquote{margin:0;flex:1}
.depo p{margin:0;font-size:15.5px;line-height:1.55}
.depo__estrelas{
  position:relative;
  display:inline-block;
  align-self:flex-start;   /* sem isso o item flex estica e o recorte % erra */
  font-size:15px;line-height:1;letter-spacing:3px;
  white-space:nowrap;
}
.depo__estrelas-base{color:rgba(42,21,51,.18)}
.depo__estrelas-luz{
  position:absolute;left:0;top:0;
  overflow:hidden;white-space:nowrap;
  color:var(--rosa);
}
.depo--destaque .depo__estrelas-base{color:rgba(255,255,255,.3)}
.depo--destaque .depo__estrelas-luz{color:#fff}

/* slot vago (usado quando um item tiver `vago: true`) */
.depo--vago{
  background:transparent;
  border:1px dashed rgba(111,0,220,.32);
  box-shadow:none;
}
.depo--vago p{color:var(--tinta-suave);font-style:italic}
.depo--vago .depo__inicial{background:transparent;border:1px dashed rgba(111,0,220,.32);color:var(--tinta-suave)}

.depo__autor{
  display:flex;align-items:center;gap:12px;
  border-top:1px solid rgba(42,21,51,.1);
  padding-top:16px;margin-top:2px;
}
.depo__inicial{
  width:40px;height:40px;flex:0 0 auto;
  border-radius:10px;
  background:var(--lilas);color:var(--roxo);
  display:grid;place-items:center;
  font-family:'Schibsted Grotesk',sans-serif;font-weight:700;font-size:14px;
}
.depo__nome{display:flex;flex-direction:column;font-weight:700;font-size:15px;line-height:1.25}
.depo__nome small{font-weight:400;font-size:12.5px;color:var(--tinta-suave);margin-top:3px}

/* primeiro card destacado na cor da marca */
.depo--destaque{background:var(--roxo);border-color:var(--roxo);color:#fff}
.depo--destaque .depo__aspas{color:rgba(255,255,255,.5)}
.depo--destaque .depo__autor{border-top-color:rgba(255,255,255,.28)}
.depo--destaque .depo__inicial{background:#fff;color:var(--roxo)}
.depo--destaque .depo__nome small{color:rgba(255,255,255,.78)}

/* ============================== DÚVIDAS ============================== */
.duvidas__lista{max-width:820px;margin-inline:auto;display:grid;gap:12px}
.duvida{background:#fff;border-radius:var(--r-peq);border:1px solid rgba(111,0,220,.12);overflow:hidden}
.duvida summary{
  cursor:pointer;list-style:none;
  padding:22px 26px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  font-family:'Schibsted Grotesk',sans-serif;font-weight:600;font-size:18px;
  letter-spacing:-.015em;
}
.duvida summary::-webkit-details-marker{display:none}
.duvida summary:hover{color:var(--roxo)}
.duvida__sinal{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  background:var(--lilas);color:var(--roxo);
  display:grid;place-items:center;
  transition:transform .22s ease;
}
.duvida__sinal .ico{width:16px;height:16px}
.duvida[open] .duvida__sinal{transform:rotate(45deg)}
.duvida__resposta{padding:0 26px 24px;color:var(--tinta-suave);margin:0}

/* ============================== RODAPÉ =============================== */
.rodape{background:var(--roxo-profundo);color:rgba(255,255,255,.78);padding:64px 0 28px}
.rodape a{color:#fff}
.rodape a:hover{color:var(--verde)}
.rodape__grade{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:44px;margin-bottom:44px}
.rodape__logo{background:var(--creme);border-radius:var(--r-peq);padding:14px 18px;display:inline-block;margin-bottom:18px}
.rodape__logo img{height:40px;width:auto}
.rodape h4{color:#fff;font-size:17px;margin-bottom:16px}
.rodape ul{list-style:none;padding:0;margin:0;display:grid;gap:12px;font-size:15.5px}
.rodape li{display:flex;align-items:flex-start;gap:11px}
.rodape__ico{
  width:18px;height:18px;flex:0 0 auto;margin-top:2px;
  color:rgba(255,255,255,.5);
  transition:color .18s ease;
}
.rodape li:hover .rodape__ico{color:var(--verde)}
.rodape__base{
  border-top:1px solid rgba(255,255,255,.14);
  padding-top:22px;
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  font-size:14px;
}

/* ========================= BOTÃO FLUTUANTE =========================== */
.zap{
  position:fixed;right:22px;bottom:22px;z-index:1500;
  display:flex;align-items:center;gap:11px;
  background:#25D366;color:#fff;
  padding:14px 22px 14px 16px;
  border-radius:var(--r-pill);
  font-weight:700;font-size:15px;
  box-shadow:0 5px 0 #1AA851, 0 16px 30px -14px rgba(18,61,31,.7);
  transition:transform .12s ease, box-shadow .12s ease;
}
.zap:hover{transform:translateY(-2px);color:#fff;box-shadow:0 7px 0 #1AA851, 0 20px 34px -14px rgba(18,61,31,.7)}
.zap:active{transform:translateY(4px);box-shadow:0 1px 0 #1AA851}
.zap svg{width:24px;height:24px}

.rodape__politica{
  display:inline-block;margin-left:14px;
  color:rgba(255,255,255,.62);text-decoration:underline;
}
.rodape__politica:hover{color:#fff}

/* ====================== PRIVACIDADE E COOKIES ========================
   O botao fica na esquerda, na mesma altura do WhatsApp da direita.
   Retirar consentimento precisa ser tao facil quanto dar: por isso ele
   nao some depois da escolha.                                          */
.privacidade-bt{
  position:fixed;left:22px;bottom:22px;z-index:1500;
  display:flex;align-items:center;gap:8px;
  padding:11px 16px 11px 13px;
  border-radius:var(--r-pill);
  background:#fff;color:var(--tinta-suave);
  border:1px solid rgba(111,0,220,.16);
  font-weight:600;font-size:13.5px;
  box-shadow:0 4px 0 rgba(111,0,220,.10), 0 14px 26px -16px rgba(42,21,51,.4);
  transition:transform .12s ease, box-shadow .12s ease, color .18s ease;
}
.privacidade-bt:hover{
  transform:translateY(-2px);color:var(--roxo);
  box-shadow:0 6px 0 rgba(111,0,220,.12), 0 18px 30px -16px rgba(42,21,51,.45);
}
.privacidade-bt:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(111,0,220,.12)}
.privacidade-bt svg{width:17px;height:17px;color:var(--roxo)}

.cookie{
  position:fixed;left:22px;right:22px;bottom:22px;z-index:1600;
  max-width:470px;
  /* botoes embaixo do texto: linha unica apertava o recado e deixava
     as duas escolhas com peso visual parecido demais.
     A largura menor tambem encurta o vao entre o link e os botoes,
     sem precisar desalinhar ninguem das bordas. */
  display:flex;flex-direction:column;align-items:stretch;gap:22px;
  padding:20px 22px;
  background:#fff;border:1px solid rgba(111,0,220,.14);
  border-radius:18px;
  box-shadow:0 24px 50px -22px rgba(42,21,51,.5);
  opacity:0;transform:translateY(14px);
  transition:opacity .26s ease, transform .26s ease;
}
.cookie.aberta{opacity:1;transform:none}
.cookie__txt{flex:1;min-width:230px}
.cookie__txt strong{display:block;font-size:15.5px;margin-bottom:5px}
.cookie__txt p{font-size:13.5px;color:var(--tinta-suave);line-height:1.5;margin:0}
.cookie__txt a{color:var(--roxo);text-decoration:underline}
.cookie__acoes{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
/* empurra so o link para a esquerda; os botoes seguem juntos na direita */
.cookie__politica{
  margin-right:auto;font-size:13.5px;font-weight:600;
  color:var(--roxo);text-decoration:underline;text-underline-offset:3px;
}
.cookie__politica:hover{color:var(--roxo-escuro)}
.cookie__acoes .btn{height:44px;padding:0 20px;font-size:14px}
/* recusar fica cinza, nao branco: as duas opcoes precisam ser faceis de
   achar, mas so uma e a acao principal */
.cookie__acoes .btn--vazio{
  background:#EFEAF3;border-color:rgba(42,21,51,.12);color:var(--tinta-suave);
  box-shadow:0 4px 0 rgba(42,21,51,.09);
}
.cookie__acoes .btn--vazio:hover{background:#E5DDEB;color:var(--tinta)}

/* ========================= PAGINA DE TEXTO ==========================
   Politica de privacidade e afins: coluna estreita, leitura confortavel. */
.doc{padding:60px 22px 90px;background:var(--creme);min-height:100vh}
.doc__caixa{max-width:760px;margin:0 auto}
.doc__voltar{
  display:inline-block;font-size:14px;font-weight:600;color:var(--roxo);
  margin-bottom:34px;
}
.doc__voltar:hover{text-decoration:underline}
.doc__rotulo{
  font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--rosa);margin-bottom:10px;
}
.doc h1{font-size:clamp(30px,5vw,44px);letter-spacing:-1px;line-height:1.1;margin-bottom:10px}
.doc__data{font-size:13.5px;color:var(--tinta-suave);margin-bottom:28px}
.doc__abre{
  font-size:17px;line-height:1.65;padding:20px 22px;
  background:var(--lilas-2);border-radius:14px;margin-bottom:34px;
}
.doc h2{font-size:21px;letter-spacing:-.4px;margin:34px 0 12px}
.doc p{font-size:16px;line-height:1.68;margin-bottom:14px;color:var(--tinta-suave)}
.doc p strong{color:var(--tinta)}
.doc a{color:var(--roxo);text-decoration:underline}
.doc ul{margin:0 0 16px 20px}
.doc li{font-size:16px;line-height:1.65;color:var(--tinta-suave);margin-bottom:7px}
.doc__tabela{width:100%;border-collapse:collapse;margin:6px 0 20px;font-size:14.5px}
.doc__tabela th{
  text-align:left;padding:10px 12px;border-bottom:2px solid rgba(111,0,220,.14);
  font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:var(--tinta-suave);
}
.doc__tabela td{padding:11px 12px;border-bottom:1px solid rgba(111,0,220,.09);color:var(--tinta-suave);vertical-align:top}
.doc__fecha{
  margin-top:38px;padding-top:24px;border-top:1px solid rgba(111,0,220,.12);
  font-size:16px;
}

@media (max-width:640px){
  .privacidade-bt span{display:none}
  .privacidade-bt{padding:13px;left:14px;bottom:14px}
  .cookie{left:14px;right:14px;bottom:14px;padding:18px}
  /* no celular o link vai para cima, sozinho, e os botoes dividem a linha */
  .cookie__politica{flex:0 0 100%;margin:0 0 4px}
  .cookie__acoes .btn{flex:1}
  .doc__tabela{display:block;overflow-x:auto}
}

/* ============================ RESPONSIVO ============================= */
@media (max-width:1024px){
  .bloco,.quemfaz__grade{grid-template-columns:1fr;gap:36px}
  .bloco__foto{order:-1}
  .bloco__foto img{aspect-ratio:16/10}
  .rodape__grade{grid-template-columns:1fr 1fr}
}

@media (max-width:860px){
  .modal__caixa{grid-template-columns:1fr;max-height:90vh}
  .modal__foto{min-height:0;aspect-ratio:16/10}
  .modal__conteudo{padding:28px 24px}
}

@media (max-width:820px){
  :root{--topo:84px}
  .secao{padding:64px 0}
  .hamburguer{display:flex}
  .header--solido .header__barra,.menu-aberto .header__barra{
    background:rgba(255,253,249,.92);
    border-color:rgba(111,0,220,.1);
    box-shadow:var(--sombra);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }
  .nav{
    position:absolute;top:calc(100% + 10px);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--creme);
    border:1px solid rgba(111,0,220,.12);
    border-radius:26px;
    padding:12px;
    box-shadow:var(--sombra);
    display:none;
  }
  .menu-aberto .nav{display:flex}
  .nav a{padding:14px 16px;border-radius:var(--r-peq);font-size:17px}
  .nav a:not(.btn):hover{background:var(--lilas)}
  .nav a:not(.btn)::after{display:none}
  .header__barra{position:relative;padding:10px 10px 10px 18px;gap:10px}
  .header__logo img{height:40px}
  .carrinho-topo{order:2;margin-left:auto}
  .hamburguer{order:3;margin-left:0}
  .header__barra > .btn{order:4}
  .header__zap{display:none}
  .nav__zap{display:inline-flex;margin-top:6px}

  .hero__caixa{
    height:auto;
    min-height:100svh;
    /* a foto entra inteira embaixo (56vw = altura real do banner 2048x1143) */
    background-size:100% auto;
    background-position:center bottom;
    padding-bottom:56vw;
    align-items:center;
  }
  .hero__caixa::after{display:none}
  .hero__texto{padding:calc(var(--topo) + 14px) 24px 26px;max-width:none}
  .hero__acoes .btn{flex:1 1 auto}

  .atalhos__linha{gap:12px}
  .atalhos__pills{gap:8px}
  .pilula{padding:9px 18px;font-size:14px}

  .depo__topo{align-items:center}
  .rodape__grade{grid-template-columns:1fr;gap:34px}
  .zap{right:14px;bottom:14px;padding:13px 18px 13px 14px;font-size:14px}
}

@media (max-width:520px){
  .carrinho__dados{grid-template-columns:1fr}
  body{font-size:16px}
  .grade{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
  .card__corpo{padding:14px 14px 16px}
  .card__corpo h4{font-size:16.5px}
  .card__desc{font-size:13.5px;margin-bottom:12px}
  .card__preco{font-size:20px}
  .card__acoes{--alt-acao:44px}
  .btn--pedir{font-size:14px;padding:0 10px}
  .card__mais .ico{width:18px;height:18px}
  .bloco__lista li{font-size:14px;padding:9px 16px}
  .depo__setas{display:none}
  .zap span{display:none}
  .zap{padding:15px;border-radius:50%}
}

/* acessibilidade */
:focus-visible{outline:3px solid var(--roxo);outline-offset:2px;border-radius:4px}
.pula-para{
  position:absolute;left:-9999px;top:0;
  background:var(--roxo);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-peq) 0;
  z-index:3000;
}
.pula-para:focus{left:0;color:#fff}
body.travado{overflow:hidden}