/* Bellis — protótipo do site. Bordô, marsala, rosa e dourado; Fraunces (macia) + Figtree. */
:root {
  --noite: #3A0710;
  --bordo: #6B0F1A;
  --marsala: #8E3B46;
  --rosa: #E7A3B1;
  --blush: #F6DFE1;
  --ouro: #C8A165;
  --creme: #FBF5F0;
  --tinta: #2B0A10;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --margem: clamp(18px, 4.2vw, 64px);
  --curva: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; } /* clip, não hidden: hidden quebra o position: sticky */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  background: var(--creme);
  color: var(--tinta);
  font: 400 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.carregando { overflow: hidden; }
html.travado { overflow: hidden; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
h1, h2, h3, p { margin: 0; }

.rotulo {
  font: 600 12px/1.2 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .78;
  margin-bottom: 18px;
}
.titulo {
  font: 380 clamp(40px, 6.4vw, 96px)/.98 var(--serif);
  letter-spacing: -.015em;
}
.titulo em { font-style: italic; font-weight: 340; color: var(--marsala); }
[data-nav="escuro"] .titulo em, .passo--bordo em { color: var(--rosa); }
.palavra { display: inline-block; overflow: hidden; vertical-align: top; padding: .04em .02em .1em; margin: -.04em -.02em -.1em; }
.palavra > span { display: inline-block; }

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 26px; border: 0; border-radius: 999px;
  background: var(--bordo); color: var(--creme);
  font: 600 14px/1 var(--sans); letter-spacing: .04em; text-decoration: none;
  cursor: pointer; transition: background .3s, color .3s, box-shadow .3s;
  box-shadow: 0 10px 26px -12px rgba(107, 15, 26, .6);
}
.botao:hover { background: var(--marsala); }
.botao--claro { background: var(--creme); color: var(--bordo); box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .45); }
.botao--claro:hover { background: var(--blush); }
.botao--contorno { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
.botao--contorno:hover { background: rgba(255, 255, 255, .1); }
.botao--pequeno { padding: 11px 16px; font-size: 13px; }
.botao:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }

/* ---------- abertura ---------- */
.abertura {
  position: fixed; inset: 0; z-index: 300;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: var(--bordo); color: var(--creme);
}
.abertura__flor { width: min(44vw, 230px); height: min(44vw, 230px); overflow: visible; }
.abertura__flor use { fill: var(--creme); }
.abertura__fala { font: italic 400 clamp(24px, 4vw, 34px)/1 var(--serif); }
.abertura__conta { font: 600 11px/1 var(--sans); letter-spacing: .24em; opacity: .6; }
.js .abertura { display: flex; }
html:not(.js) .abertura { display: none; }

/* ---------- pétalas, cursor, aviso ---------- */
.petalas { position: fixed; inset: 0; pointer-events: none; z-index: 120; overflow: hidden; }
.petala-voa { position: absolute; left: 0; top: 0; width: 15px; height: 34px; fill: currentColor; }

.cursor { display: none; }
.cursor-proprio, .cursor-proprio * { cursor: none !important; }
.cursor-proprio .cursor { display: block; position: fixed; left: 0; top: 0; z-index: 400; pointer-events: none; }
.cursor__ponto, .cursor__anel { position: fixed; left: 0; top: 0; border-radius: 50%; }
.cursor__ponto { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: #fff; mix-blend-mode: difference; }
.cursor__anel {
  width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1px solid #fff; mix-blend-mode: difference;
  display: flex; align-items: center; justify-content: center;
  transition: width .35s var(--curva), height .35s var(--curva), margin .35s var(--curva), background .3s;
}
.cursor__anel em { font: 600 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; font-style: normal; color: var(--bordo); opacity: 0; }
.cursor.sobre .cursor__anel { width: 58px; height: 58px; margin: -29px 0 0 -29px; }
.cursor.grande .cursor__anel { width: 88px; height: 88px; margin: -44px 0 0 -44px; background: var(--creme); border-color: transparent; mix-blend-mode: normal; }
.cursor.grande .cursor__anel em { opacity: 1; }
.cursor.oculto { opacity: 0; }

.aviso {
  position: fixed; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); z-index: 250;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  max-width: min(92vw, 460px); padding: 14px 20px; border-radius: 16px;
  background: var(--tinta); color: var(--creme); font: 500 14px/1.4 var(--sans); text-align: center;
  box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .5);
  transition: opacity .35s, transform .35s var(--curva);
}
.aviso.visivel { opacity: 1; transform: translate(-50%, 0); }
.voadora { position: fixed; left: 0; top: 0; z-index: 260; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--ouro); pointer-events: none; box-shadow: 0 0 0 4px rgba(200, 161, 101, .3); }

/* ---------- topo ---------- */
.topo {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 16px var(--margem); transition: color .4s, background-color .4s;
  color: var(--creme);
}
.topo[data-tema="claro"] { color: var(--tinta); }
/* depois da vitrine o topo ganha fundo, senão o logo briga com os títulos */
.topo.solido { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); background: rgba(58, 7, 16, .5); }
.topo.solido[data-tema="claro"] { background: rgba(251, 245, 240, .8); }
.logo { display: inline-flex; flex-direction: column; align-items: center; font: 560 30px/.9 var(--serif); letter-spacing: -.01em; text-decoration: none; }
.logo small { font: 600 8.5px/1 var(--sans); letter-spacing: .5em; text-transform: uppercase; margin: 6px -.5em 0 0; opacity: .85; }
.logo svg { display: block; height: 48px; width: auto; overflow: visible; } /* o SVG da marca entra pelo main.js */
.logo--pequeno svg { height: 40px; }
.topo__marca { text-decoration: none; }
.topo__menu { display: flex; gap: 30px; }
.topo__menu a { font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; opacity: .85; }
.topo__menu a:hover { opacity: 1; }
.topo__sacola {
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 10px 9px 18px;
  border-radius: 999px; border: 1px solid currentColor; background: transparent; cursor: pointer;
  font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
}
.sacola__qtd { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: var(--ouro); color: var(--tinta); font-size: 12px; letter-spacing: 0; }

/* ---------- 1. vitrine ---------- */
.hero {
  position: relative; height: 100svh; min-height: 560px; overflow: hidden;
  color: var(--creme);
  background: radial-gradient(120% 80% at 50% 55%, #84182a 0%, #5a0c18 45%, #2b050b 100%);
  touch-action: pan-y;
}
.hero__titulo {
  position: absolute; left: 0; right: 0; top: 12vh; z-index: 0;
  text-align: center; pointer-events: none;
  font: 360 clamp(56px, 10.5vw, 176px)/.86 var(--serif); letter-spacing: -.02em;
}
.hero__titulo .linha { display: inline-block; }
.hero__titulo em { font-style: italic; color: var(--rosa); }
.hero__palco { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.hero__sub { position: absolute; left: var(--margem); bottom: 7vh; z-index: 2; max-width: 22ch; font: italic 400 20px/1.3 var(--serif); opacity: .85; }
.hero__legenda { position: absolute; right: var(--margem); bottom: 6vh; z-index: 2; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.hero__nome { font: 420 clamp(24px, 2.6vw, 36px)/1.05 var(--serif); }
.hero__info { font: 500 14px/1.2 var(--sans); opacity: .85; }
.hero__info b { font-weight: 700; color: var(--ouro); }
.hero__add { margin-top: 8px; }
.hero__pontos { display: flex; gap: 8px; margin-bottom: 6px; }
.hero__pontos button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 1px solid var(--creme); background: transparent; cursor: pointer; transition: background .3s, transform .3s; }
.hero__pontos button.ativo { background: var(--creme); transform: scale(1.25); }
.hero__dica {
  position: absolute; left: 50%; bottom: 2.4vh; transform: translateX(-50%); z-index: 2; display: flex; align-items: center; gap: 8px;
  padding: 9px 4px; border-radius: 999px; font: 600 10px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; white-space: nowrap;
  color: rgba(251, 245, 240, .7); transition: background .4s, color .4s, padding .4s;
}
.hero__dica-cel, .hero__dica-fim { display: none; }
.hero__dica.fim { padding: 9px 16px; background: var(--creme); color: var(--bordo); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5); }
.hero__dica.fim .hero__dica-girar { display: none; }
.hero__dica.fim .hero__dica-fim { display: inline; }
.hero__seta { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; animation: seta 1.4s var(--curva) infinite; }
@keyframes seta { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
.hero__reserva { display: none; }
.sem-3d .hero__reserva { position: absolute; inset: 28vh 6vw 22vh; z-index: 1; display: flex; align-items: flex-end; justify-content: center; gap: 2vw; }
.sem-3d .hero__reserva svg { height: 100%; width: auto; max-width: 18vw; }

/* ---------- 2. ritual ---------- */
.ritual { background: var(--creme); }
.ritual__cabeca { padding: 140px var(--margem) 70px; text-align: center; }
.passo { position: sticky; top: 0; height: 100svh; overflow: hidden; }
/* folga entre um cartão e o próximo: cada passo fica parado inteiro um pouco antes de ser coberto */
.passo:not(:last-child) { margin-bottom: 55svh; }
.passo--creme { background: var(--creme); }
.passo--blush { background: var(--blush); }
.passo--bordo { background: var(--bordo); color: var(--creme); }
.passo--rosa { background: var(--rosa); }
.passo__dentro {
  height: 100%; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 4vw;
  padding: 92px var(--margem) 48px; transform-origin: 50% 0;
}
.passo__num { display: block; font: 400 20px/1 var(--serif); margin-bottom: 10px; }
.passo__num small { font-size: 13px; opacity: .55; margin-left: 6px; }
.passo__verbo { font: 360 clamp(72px, 11.5vw, 200px)/.86 var(--serif); letter-spacing: -.03em; }
.passo__verbo em { color: var(--ouro); font-style: normal; }
.passo__produto { margin-top: 26px; font: 600 12px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; opacity: .8; }
.passo__frase { margin-top: 12px; max-width: 30ch; font: 400 clamp(17px, 1.5vw, 21px)/1.45 var(--sans); }
.passo__compra { margin-top: 26px; display: flex; align-items: center; gap: 20px; }
.passo__compra b { font: 500 30px/1 var(--serif); }
.passo--bordo .botao { background: var(--creme); color: var(--bordo); }
.passo__foto { margin: 0; justify-self: center; }
.passo__arco {
  position: relative; height: min(72svh, 660px); aspect-ratio: 2 / 3; overflow: hidden;
  border-radius: 999px 999px 26px 26px;
  background: radial-gradient(90% 70% at 50% 35%, #fff 0%, var(--blush) 60%, #efc6cd 100%);
  box-shadow: 0 30px 60px -30px rgba(43, 10, 16, .45);
}
.passo--bordo .passo__arco { background: radial-gradient(90% 70% at 50% 35%, #a33447 0%, #5a0c18 70%, #3a0710 100%); }
.passo--rosa .passo__arco { background: radial-gradient(90% 70% at 50% 35%, #fff4f6 0%, #f3c8d1 70%, #d98a9a 100%); }

/* fotos do GPT e o desenho de reserva */
.foto { position: relative; }
.foto .reserva { position: absolute; left: 50%; top: 52%; height: 74%; width: auto; transform: translate(-50%, -50%); filter: drop-shadow(0 18px 22px rgba(43, 10, 16, .28)); }
.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s; }
.foto.tem-foto img { opacity: 1; }
.foto.tem-foto .reserva { display: none; }
.foto.sem-foto img { display: none; }
.passo__efeito { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; }

/* ---------- 3. passe o dedo ---------- */
.dedo {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 6vw;
  padding: 140px var(--margem); background: var(--creme);
}
.dedo__titulo { display: grid; }
.dedo__titulo > span { grid-area: 1 / 1; transition: opacity .6s, transform .8s var(--curva); }
.dedo__depois { opacity: 0; transform: translateY(30px); }
.hidratado .dedo__antes { opacity: 0; transform: translateY(-30px); }
.hidratado .dedo__depois { opacity: 1; transform: none; }
.dedo__historia { margin-top: 28px; max-width: 42ch; font-size: 18px; }
.dedo__historia p + p { margin-top: 14px; }
.dedo__assina { margin-top: 12px; font: italic 400 20px/1 var(--serif); color: var(--marsala); }
.dedo__palco { position: relative; width: min(100%, 540px); justify-self: center; }
.dedo__tela {
  display: block; width: 100%; aspect-ratio: 1; border-radius: 32px; touch-action: none; cursor: crosshair;
  box-shadow: 0 40px 70px -40px rgba(43, 10, 16, .55);
}
.dedo__barra { margin: 22px auto 0; width: 70%; height: 4px; border-radius: 4px; background: rgba(107, 15, 26, .14); overflow: hidden; }
.dedo__barra i { display: block; height: 100%; background: var(--bordo); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.dedo__dica {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 10px;
  padding: 10px 20px 10px 14px; border-radius: 999px; background: rgba(251, 245, 240, .92); color: var(--bordo); white-space: nowrap;
  font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; pointer-events: none;
  animation: pulsar 1.8s var(--curva) infinite; transition: opacity .4s;
}
/* o dedinho vai e volta, mostrando o gesto */
.dedo__mao { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; animation: passar 1.3s ease-in-out infinite alternate; }
@keyframes passar { from { transform: translateX(-5px) rotate(-12deg); } to { transform: translateX(5px) rotate(10deg); } }
.mexeu .dedo__dica { opacity: 0; animation: none; }
@keyframes pulsar { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.07); } }

/* ---------- 4. a flor ---------- */
.flor {
  position: relative; min-height: 100svh; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4vw;
  padding: 120px var(--margem); color: var(--creme);
  background: radial-gradient(90% 90% at 70% 50%, #8b1a2c 0%, var(--bordo) 45%, var(--noite) 100%);
}
.flor__fundo { position: absolute; inset: 0; }
.flor__fundo img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s; }
.flor__fundo.tem-foto img { opacity: .32; }
.flor__texto, .flor__palco { position: relative; }
.flor__texto p:not(.rotulo) { margin-top: 24px; max-width: 38ch; font-size: 18px; opacity: .9; }
.flor__palco { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.flor__botao { width: min(64vw, 420px); aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.flor__desenho { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .3)); }
.flor__desenho g { transition: transform .3s var(--curva); }
.flor__botao:hover .flor__desenho { transform: rotate(4deg); transition: transform .6s var(--curva); }
.flor__fala { font: italic 400 clamp(26px, 3vw, 38px)/1 var(--serif); min-height: 1.2em; }
.flor__de-novo { opacity: 0; pointer-events: none; padding: 10px 18px; border-radius: 999px; border: 1px solid currentColor; background: transparent; cursor: pointer; font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; transition: opacity .4s; }
.acabou .flor__de-novo { opacity: 1; pointer-events: auto; }

/* ---------- 5. lançamento ---------- */
.lanca {
  position: relative; overflow: hidden; min-height: 100svh;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4vw;
  padding: 120px var(--margem); color: var(--creme);
  background: var(--lanca-fundo, var(--marsala)); transition: background-color .9s var(--curva);
}
.lanca__relogio { display: flex; gap: clamp(14px, 2.4vw, 34px); margin: 34px 0 30px; }
.lanca__relogio div { display: flex; flex-direction: column; gap: 6px; }
.lanca__relogio b { font: 400 clamp(40px, 5vw, 72px)/1 var(--serif); font-variant-numeric: tabular-nums; }
.lanca__relogio span { font: 600 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.lanca__sabores { display: flex; flex-wrap: wrap; gap: 10px; }
.lanca__sabores button {
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px 11px 12px; border-radius: 999px;
  border: 1px solid rgba(251, 245, 240, .4); background: transparent; cursor: pointer; font: 600 14px/1 var(--sans);
  transition: background .3s, border-color .3s, color .3s;
}
.lanca__sabores button i { width: 18px; height: 18px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); }
.lanca__sabores button[aria-selected="true"] { background: var(--creme); color: var(--bordo); border-color: var(--creme); }
.lanca__status { margin: 18px 0 26px; font: italic 400 22px/1.2 var(--serif); }
.lanca { isolation: isolate; } /* as frutas (z-index -1) ficam atrás do produto, não atrás do fundo */
.lanca__fundo { position: absolute; inset: 0; z-index: -2; }
.lanca__fundo img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s; }
.lanca__fundo.tem-foto img { opacity: .2; }
.falas__foto { display: none; margin: 0; aspect-ratio: 3 / 2; border-radius: 26px; overflow: hidden; box-shadow: 0 30px 50px -30px rgba(107, 15, 26, .5); }
.falas__foto.tem-foto { display: block; }
.falas__foto img { width: 100%; height: 100%; object-fit: cover; }
.lanca__palco { position: relative; height: min(76svh, 680px); }
.lanca__produto { position: absolute; inset: 0; }
.lanca__item { position: absolute; inset: 0; opacity: 0; transform: scale(.88) rotate(-7deg); transition: opacity .6s, transform .9s var(--curva); }
.lanca__item.ativo { opacity: 1; transform: none; }
.lanca__item .reserva { height: 82%; }
.lanca__item img { border-radius: 30px; object-fit: cover; }
.lanca__frutas { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.lanca__frutas i {
  position: absolute; left: var(--x); top: var(--y); width: calc(70px * var(--t)); aspect-ratio: 1; border-radius: 50%;
  opacity: .5; animation: boiar 6s ease-in-out var(--d) infinite alternate;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .55), transparent 40%), var(--fruta, #c4243f);
  transition: background-color .9s;
}
.lanca[data-fruta="morango"] { --fruta: #c4243f; }
.lanca[data-fruta="uva"] { --fruta: #6d2a5c; }
.lanca[data-fruta="pessego"] { --fruta: #f0a99c; }
@keyframes boiar { to { transform: translate(14px, -26px) rotate(18deg); } }

/* ---------- 6. kit ---------- */
.kit { background: var(--blush); }
.kit__fixo { height: 100svh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4vw; padding: 90px var(--margem) 40px; }
.kit__itens { list-style: none; padding: 0; margin: 30px 0 0; max-width: 420px; }
.kit__itens li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(107, 15, 26, .16); opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .6s var(--curva); }
.kit__itens li.visivel { opacity: 1; transform: none; }
.kit__itens span { font: 500 16px/1.3 var(--sans); }
.kit__itens em { font: italic 400 17px/1.3 var(--serif); color: var(--marsala); }
.kit__extra em { color: var(--ouro); }
.kit__conta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 24px 0; opacity: 0; transform: translateY(16px); transition: opacity .6s, transform .7s var(--curva); }
.kit__conta.visivel { opacity: 1; transform: none; }
.kit__separado { text-decoration: line-through; opacity: .6; }
.kit__preco { font: 500 clamp(40px, 4.4vw, 64px)/1 var(--serif); color: var(--bordo); }
.kit__economia { flex-basis: 100%; font: 600 13px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--marsala); }
.kit__caixa { position: relative; width: min(100%, 580px); aspect-ratio: 1; justify-self: center; }
.kit__desenho, .kit__fotos { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kit__fotos { display: none; }
.kit--fotos .kit__fotos { display: block; }
.kit--fotos .kit__desenho { display: none; }
.kit__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 28px; }
.kit__foto--aberto { opacity: 0; }
.kit__tampa, .kit__dentro > g { transform-box: fill-box; transform-origin: 50% 50%; }
.kit__dentro > g { opacity: 0; }

/* ---------- 7. loja ---------- */
.loja { padding: 130px var(--margem) 120px; background: var(--creme); }
.loja__cabeca { text-align: center; margin-bottom: 60px; }
.selos { max-width: 1280px; margin: 80px auto 0; text-align: center; }
.selos__lista { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 18px 34px; }
.selos__lista img { display: block; width: 104px; height: 104px; }
.selos__nota { max-width: 56ch; margin: 22px auto 0; font-size: 15px; opacity: .75; }
.loja__grade { list-style: none; padding: 0; margin: 0 auto; max-width: 1280px; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 26px; }
.prod { display: flex; flex-direction: column; }
.prod__foto {
  aspect-ratio: 1; border-radius: 26px; overflow: hidden;
  background: radial-gradient(80% 80% at 50% 40%, #fff 0%, var(--blush) 70%, #f0cdd3 100%);
  transition: transform .6s var(--curva), box-shadow .6s var(--curva);
}
.prod:hover .prod__foto { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 24px 40px -24px rgba(107, 15, 26, .45); }
.prod__foto .reserva { height: 72%; transition: transform .6s var(--curva); }
.prod:hover .prod__foto .reserva { transform: translate(-50%, -50%) rotate(-5deg) scale(1.05); }
.prod__selo { position: absolute; left: 14px; top: 14px; padding: 7px 12px; border-radius: 999px; background: var(--bordo); color: var(--creme); font: 600 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.prod__nome { margin-top: 18px; font: 450 22px/1.15 var(--serif); }
.prod__sabor { margin-top: 4px; font: 600 12px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--marsala); }
.prod__nota { margin-top: 8px; font-size: 15px; opacity: .8; }
.prod__pe { margin-top: auto; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.prod__pe b { font: 500 22px/1 var(--serif); }

/* ---------- 8. depoimentos: cada cliente num chat próprio (WhatsApp ou Instagram) ---------- */
.falas { padding: 130px var(--margem); background: var(--blush); }
.falas__cabeca { display: grid; grid-template-columns: 1fr minmax(0, 460px); gap: 6vw; align-items: end; }
.falas__nota { margin-top: 20px; max-width: 34ch; font-size: 17px; opacity: .75; }
.falas__chats { display: flex; gap: 22px; align-items: flex-start; margin-top: 80px; }

/* cada chat parece um print de celular, meio torto, como se estivesse jogado na mesa */
.chat { flex: 1 1 0; min-width: 0; margin: var(--desce, 0px) 0 0; rotate: var(--giro, 0deg); transition: rotate .5s var(--curva), translate .5s var(--curva); }
.chat:nth-child(1) { --giro: -2deg; }
.chat:nth-child(2) { --giro: 1.6deg; --desce: 46px; }
.chat:nth-child(3) { --giro: -1deg; --desce: 12px; }
.chat:nth-child(4) { --giro: 2deg; --desce: 58px; }
.chat:nth-child(5) { --giro: -1.4deg; --desce: 22px; }
@media (hover: hover) { .chat:hover { rotate: 0deg; translate: 0 -8px; } }
.chat__tela {
  display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: var(--fundo); color: var(--letra);
  font: 400 13.5px/1.35 -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  box-shadow: 0 30px 50px -28px rgba(58, 7, 16, .55), 0 0 0 1px rgba(58, 7, 16, .08);
}
.chat__app { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--marsala); }
.chat__app::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--marca-app); }

.chat--zap { --marca-app: #25d366; }
.chat--zap.chat--claro { --topo: #fff; --fundo: #efeae2; --balao: #fff; --letra: #111b21; --cinza: #667781; --pontos: rgba(17, 27, 33, .07); --campo: #fff; --acao: #1daa61; --av-fundo: #dfe5e7; --av-pessoa: #fff; }
.chat--zap.chat--escuro, .chat--zap.chat--verde { --topo: #1f2c34; --fundo: #0b141a; --balao: #202c33; --letra: #e9edef; --cinza: #8696a0; --pontos: rgba(255, 255, 255, .05); --campo: #1f2c34; --acao: #00a884; --av-fundo: #6a7175; --av-pessoa: #cfd4d6; }
.chat--insta { --marca-app: linear-gradient(45deg, #feda75, #d62976 55%, #4f5bd5); }
.chat--insta.chat--claro { --topo: #fff; --fundo: #fff; --letra: #000; --cinza: #737373; --linha: #efefef; --campo: #fff; --acao: #3797f0; }
.chat--insta.chat--escuro { --topo: #000; --fundo: #000; --letra: #f5f5f5; --cinza: #a8a8a8; --linha: #262626; --campo: #000; --acao: #3797f0; }

.chat__topo { display: flex; align-items: center; gap: 9px; padding: 11px 12px; background: var(--topo); border-bottom: 1px solid var(--linha, transparent); }
.chat__icone { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chat__avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; object-fit: cover; }
svg.chat__avatar circle:first-child { fill: var(--av-fundo); }
svg.chat__avatar .p { fill: var(--av-pessoa); }
.chat__quem { flex: 1; min-width: 0; display: grid; gap: 3px; }
.chat__quem b { overflow: hidden; font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.chat__borrado { display: block; width: var(--w, 60%); height: 12px; border-radius: 6px; background: currentColor; opacity: .45; filter: blur(3px); }
.chat__quem small { font-size: 11.5px; color: var(--cinza); }
.chat__icones { display: flex; gap: 15px; }

.chat__fundo { display: flex; flex-direction: column; flex: 1; }
.chat--zap .chat__fundo {
  background-image: radial-gradient(var(--pontos) 1.4px, transparent 1.7px), radial-gradient(var(--pontos) 1.4px, transparent 1.7px);
  background-size: 22px 22px; background-position: 0 0, 11px 11px;
}
.chat--zap.chat--verde .chat__fundo { background: radial-gradient(120% 80% at 90% 30%, #1b5e47, transparent 62%), #0e1a16; }
.chat__corpo { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-height: 150px; padding: 16px 10px 8px 14px; }

.msg { position: relative; align-self: flex-start; max-width: 90%; padding: 6px 9px 7px; border-radius: 8px; background: var(--balao); box-shadow: 0 1px .5px rgba(11, 20, 26, .13); overflow-wrap: anywhere; }
.msg--primeira { border-top-left-radius: 0; }
.msg--primeira::before { content: ''; position: absolute; left: -7px; top: 0; width: 8px; height: 10px; background: var(--balao); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.msg p::after { content: ''; display: inline-block; width: 40px; } /* guarda o lugar da hora no fim da última linha */
.msg time { position: absolute; right: 8px; bottom: 4px; font-size: 10.5px; color: var(--cinza); }
.msg--foto { width: 88%; padding: 3px 3px 7px; }
.msg--foto img { display: block; width: 100%; aspect-ratio: 424 / 230; border-radius: 6px; object-fit: cover; }
.msg--foto p { padding: 5px 6px 0; }
.msg--digitando { position: absolute; left: 14px; display: flex; gap: 4px; padding: 11px 12px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.msg--digitando.visivel { opacity: 1; }
.msg--digitando i { width: 7px; height: 7px; border-radius: 50%; background: var(--cinza); animation: digita 1.1s infinite; }
.msg--digitando i:nth-child(2) { animation-delay: .15s; }
.msg--digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes digita { 0%, 60%, 100% { transform: none; opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }

.ig__aviso { margin-left: 38px; font-size: 11.5px; color: var(--cinza); }
.ig__linha { display: flex; align-items: flex-end; gap: 8px; }
.ig__linha .chat__avatar { width: 28px; height: 28px; }
.ig__story { position: relative; width: 76%; aspect-ratio: 9 / 16; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: #222; cursor: zoom-in; }
.ig__story img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--curva); }
.ig__story:hover img { transform: scale(1.04); }
.ig__story::after {
  content: 'Ver story'; position: absolute; left: 50%; bottom: 10px; translate: -50% 0; padding: 5px 10px; border-radius: 20px;
  background: rgba(0, 0, 0, .55); color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap; backdrop-filter: blur(4px);
}

.chat__barra { display: flex; align-items: center; gap: 7px; padding: 6px 9px 10px; }
.chat__campo { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; padding: 9px 13px; border-radius: 22px; background: var(--campo); color: var(--cinza); font-size: 13px; }
.chat--insta .chat__campo { padding: 5px 13px 5px 5px; border: 1px solid var(--linha); }
.chat__acao { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--acao); color: #fff; }
.chat__camera { width: 28px; height: 28px; flex: none; padding: 5px; border-radius: 50%; background: var(--acao); fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; }

/* antes de aparecer na tela, a mensagem ainda não chegou */
[data-chega] { transform-origin: left bottom; transition: opacity .35s, transform .5s var(--curva); }
.falas__chats.espera [data-chega]:not(.chegou) { opacity: 0; transform: translateY(10px) scale(.95); }

/* o story aberto em tela cheia, com a barrinha do tempo */
.story { width: min(92vw, calc(88svh * 9 / 16)); max-width: none; max-height: none; aspect-ratio: 9 / 16; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: #111; }
.story::backdrop { background: rgba(20, 3, 7, .86); backdrop-filter: blur(6px); }
.story__foto { display: block; width: 100%; height: 100%; object-fit: cover; }
.story__barra { position: absolute; z-index: 1; top: 10px; left: 10px; right: 10px; height: 3px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, .35); }
.story__barra i { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
.story[open] .story__barra i { animation: tempo-story 6s linear forwards; }
@keyframes tempo-story { to { transform: scaleX(1); } }

/* sem espaço para os cinco lado a lado: vira carrossel de arrastar */
@media (max-width: 1180px) {
  .falas__chats { margin: 56px calc(var(--margem) * -1) 0; padding: 10px var(--margem) 30px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--margem); scrollbar-width: none; overscroll-behavior-x: contain; }
  .falas__chats::-webkit-scrollbar { display: none; }
  .chat:nth-child(n) { flex: 0 0 min(300px, 78vw); scroll-snap-align: start; --desce: 0px; --giro: 0deg; }
}

/* ---------- 9. final ---------- */
.final {
  position: relative; min-height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 120px var(--margem) 140px; color: var(--creme);
  background: radial-gradient(90% 80% at 50% 40%, #85172a 0%, var(--bordo) 45%, var(--noite) 100%);
}
.final__flores { position: absolute; inset: 0; pointer-events: none; }
.flor-final { position: absolute; left: 0; top: 0; overflow: visible; --miolo: var(--ouro); filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .25)); }
.final__texto { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; pointer-events: none; }
.final__texto a { pointer-events: auto; }
.final__titulo { font: 360 clamp(46px, 8vw, 128px)/.92 var(--serif); letter-spacing: -.02em; }
.final__titulo em { font-style: italic; color: var(--rosa); }
.final__contador { font: 600 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; opacity: .75; }
.final__botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; }
.rodape { position: absolute; left: var(--margem); right: var(--margem); bottom: 26px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; font: 500 13px/1.2 var(--sans); opacity: .8; }
.rodape a { text-decoration: none; }
.rodape__hh { opacity: .6; letter-spacing: .1em; text-transform: uppercase; font-size: 11px; }

/* ---------- sacola ---------- */
.sacola { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.sacola__fundo { position: absolute; inset: 0; background: rgba(30, 4, 10, .5); opacity: 0; transition: opacity .4s; }
.sacola__painel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(430px, 94vw);
  display: flex; flex-direction: column; background: var(--creme); color: var(--tinta);
  transform: translateX(102%); transition: transform .55s var(--curva); overflow-y: auto; overscroll-behavior: contain;
}
.sacola.aberta { pointer-events: auto; }
.sacola.aberta .sacola__fundo { opacity: 1; }
.sacola.aberta .sacola__painel { transform: none; }
.sacola header, .sacola footer { padding: 22px 24px; }
.sacola header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(107, 15, 26, .12); }
.sacola h2 { font: 450 28px/1 var(--serif); }
.sacola__fechar { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(107, 15, 26, .25); background: transparent; cursor: pointer; font-size: 16px; }
.sacola__frete { padding: 16px 24px; background: var(--blush); }
.sacola__frete p { font-size: 14px; }
.sacola__trilho { margin-top: 10px; height: 4px; border-radius: 4px; background: rgba(107, 15, 26, .15); overflow: hidden; }
.sacola__trilho i { display: block; height: 100%; background: var(--bordo); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--curva); }
.sacola__lista { list-style: none; margin: 0; padding: 8px 24px; flex: 1; }
.sacola__lista li { display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(107, 15, 26, .1); }
.sacola__lista svg { width: 52px; height: 72px; }
.sacola__lista b { display: block; font: 500 17px/1.2 var(--serif); }
.sacola__lista span { display: block; font-size: 13px; opacity: .7; }
.sacola__lista em { display: block; font-style: normal; font-weight: 600; font-size: 14px; margin-top: 4px; }
.sacola__conta { display: flex; align-items: center; gap: 8px; }
.sacola__conta button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(107, 15, 26, .25); background: transparent; cursor: pointer; }
.sacola__vazia { padding: 30px 24px; text-align: center; font: italic 400 18px/1.4 var(--serif); opacity: .7; }
.sacola footer { border-top: 1px solid rgba(107, 15, 26, .12); display: flex; flex-direction: column; gap: 14px; }
.sacola__total { display: flex; justify-content: space-between; align-items: baseline; }
.sacola__total b { font: 500 26px/1 var(--serif); }
.sacola__nota { text-align: center; font-size: 12px; opacity: .6; }

/* ---------- celular ---------- */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .topo { padding: 12px var(--margem); }
  .topo__menu { display: none; }
  .logo { font-size: 26px; }
  .logo svg { height: 40px; }
  .topo__sacola span { display: none; }
  .topo__sacola { padding: 7px; }

  .hero__titulo { top: 11vh; font-size: 17vw; }
  .hero__sub { display: none; }
  .hero__legenda { left: var(--margem); right: var(--margem); bottom: calc(5.5svh + 16px); align-items: center; text-align: center; gap: 6px; }
  .hero__nome { font-size: 26px; }
  .hero__dica { bottom: 1.2svh; letter-spacing: .2em; color: rgba(251, 245, 240, .85); }
  .hero__dica-pc { display: none; }
  .hero__dica-cel { display: inline; }

  .ritual__cabeca { padding: 110px var(--margem) 50px; }
  .passo__dentro { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: start; gap: 18px; padding: 76px var(--margem) 26px; }
  .passo__foto { order: -1; }
  .passo__arco { height: 38svh; }
  .passo__verbo { font-size: 17vw; }
  .passo__produto { margin-top: 12px; }
  .passo__frase { font-size: 16px; }
  .passo__compra { margin-top: 16px; }

  .dedo, .flor, .lanca, .falas { grid-template-columns: 1fr; padding-top: 100px; padding-bottom: 100px; }
  .dedo__palco { order: 2; }
  .flor__palco { order: 2; }
  .lanca__palco { height: 52svh; }

  .kit__fixo { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: center; gap: 0; padding: 70px var(--margem) 24px; }
  .kit__caixa { order: -1; width: min(86vw, 46svh); }
  .kit__itens { margin-top: 12px; }
  .kit__itens li { padding: 7px 0; }
  .kit__itens span, .kit__itens em { font-size: 14px; }
  .kit__fixo .titulo { font-size: 36px; }
  .kit__fixo .rotulo { margin-bottom: 8px; }
  .kit__conta { margin: 12px 0; }
  .kit__preco { font-size: 34px; }

  .loja { padding: 100px 14px; }
  .loja__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .selos { margin-top: 56px; }
  .selos__lista { gap: 14px 18px; }
  .selos__lista img { width: 80px; height: 80px; }
  .prod__foto { border-radius: 18px; }
  .prod__nome { font-size: 18px; margin-top: 12px; }
  .prod__nota { display: none; }
  .prod__pe { flex-direction: column; align-items: stretch; gap: 10px; }
  .prod__pe .botao { width: 100%; }
  .prod__selo { left: 8px; top: 8px; padding: 6px 9px; font-size: 9.5px; }

  .falas__cabeca { grid-template-columns: 1fr; gap: 30px; }
  .rodape { justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}