/* ============================================================
   Hello Confeitaria — landing page (vem do Google, vira pedido)
   Hero com foto grande colada no título + setas, grid de produtos
   estilo "selo" com carrossel, seção "a decoração é o produto" com
   card flutuante, passos em zigue-zague, CTA final foto+texto, rodapé
   escuro. Cores/fontes = identidade/design-guide.md.
   (os prints de referência que guiaram o layout foram descartados)
   ============================================================ */

body{
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  padding-bottom:0;
  /* fundo liso igual referência — sem o padrão de bolo/laço do site de pedidos */
  background-color:var(--creme);
  background-image:none;
  /* landing é vitrine, não formulário: texto solto, zoom liberado */
  -webkit-user-select:auto;user-select:auto;
  -webkit-touch-callout:default;touch-action:auto;
}

.wrap{max-width:1040px}

.grid-2{
  display:grid;gap:56px;align-items:center;
  position:relative; /* ponto de ancoragem do card flutuante */
}
@media(min-width:860px){
  .grid-2{grid-template-columns:1fr 1fr;gap:40px}
}

/* ---------------- nav ---------------- */
/* sem cartão nem fundo — os itens flutuam direto sobre o hero, igual referência.
   só ganha fundo quando rola, pra continuar legível sobre as outras seções. */
.nav{
  position:sticky;top:0;z-index:30;
  max-width:1100px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:transparent;border-radius:0 0 24px 24px;
  padding:22px 28px;
  box-shadow:none;
  transition:box-shadow .2s ease, padding .2s ease, background .2s ease;
}
.nav.scrolled{
  background:var(--off);box-shadow:0 0 0 2px var(--verde), 0 10px 26px rgba(28,46,35,.14);
  padding-top:12px;padding-bottom:12px;
}
.nav-logo img{width:72px;height:auto;display:block}
.nav-links{display:flex;gap:22px;margin-left:auto;font-weight:700;font-size:14px}
.nav-links a{color:var(--verde);text-decoration:none;opacity:.8;transition:opacity .15s}
.nav-links a:hover{opacity:1;text-decoration:underline}
.nav-cta{
  font-weight:800;font-size:14px;white-space:nowrap;text-decoration:none;
  background:var(--off);color:var(--vermelho);
  padding:10px 20px;border-radius:99px;box-shadow:0 0 0 2px var(--vermelho);
  transition:transform .15s ease, background .15s ease, color .15s ease;
}
.nav-cta:hover{background:var(--vermelho);color:var(--off);transform:translateY(-1px)}
@media(max-width:680px){ .nav-links{display:none} }

/* ---------------- hero ---------------- */
/* cor clara igual referência — era rosa saturado, hoje só o creme */
.hero{
  position:relative;overflow:hidden;
  text-align:center;padding:52px 20px 0;
  background:var(--creme);
}

/* bugigangas espalhadas (dados/PNG) — fundo claro usa versão pink, fundo
   rosa usa versão peach, fundo verde usa a versão "original" colorida
   (já vem com a base verde-escura desenhada pra combinar).
   maiores que antes e visíveis também no mobile, só menores. */
.decor{
  position:absolute;pointer-events:none;z-index:1;
  width:130px;height:auto;opacity:.95;
}
@media(max-width:640px){ .decor{width:76px} }

/* elementos extras atrás dos principais — baixa opacidade, viram textura de fundo.
   1-2 por seção ficam bem grandes (decor-xl) pra dar profundidade. */
.decor-fundo{opacity:.14}
.decor-xl{width:260px}
@media(max-width:640px){ .decor-xl{width:150px} }

.decor-cake{top:10px;left:3%;width:118px;transform:rotate(-8deg);animation-delay:.4s}
.decor-globo-2{top:8%;right:3%;width:72px;transform:rotate(12deg);animation-delay:1.6s}
@media(max-width:640px){ .decor-cake{top:2px;left:2%;width:68px} .decor-globo-2{top:6%;right:2%;width:46px} }


.hero-grid{
  position:relative;z-index:2;
  display:grid;gap:20px;align-items:center;
  padding-bottom:44px;text-align:left;
}
@media(min-width:860px){
  .hero-grid{grid-template-columns:.9fr 1.1fr;gap:24px;padding-bottom:100px}
}

h1{
  font-weight:800;line-height:.98;
  font-size:clamp(40px,9vw,72px);
  letter-spacing:-.01em;text-align:center;
}
@media(min-width:860px){ h1{text-align:left} }
/* fundo claro agora — título sólido verde/vermelho, regra do manual de marca */
h1 .linha{display:block;color:var(--verde)}

/* palavra que gira no título: bolo → cupcake → brigadeiro.
   largura vai a 0 e volta (o px é escrito pelo js, que mede o texto),
   cor troca dentro da paleta do manual. */
/* palavra e cursor no mesmo token: o gsap do banner quebra o h1 em palavras
   e um <i> solto viraria uma "palavra" separada, com espaço antes */
.gira-wrap{display:inline-block;white-space:nowrap}
.gira{
  display:inline-block;overflow:hidden;white-space:nowrap;
  vertical-align:bottom;
  /* a Pacifico desce e sobe fora da caixa da linha; o overflow:hidden que faz
     a cortina horizontal cortava perna de 'p' e 'g'. o respiro vertical
     devolve espaço e a margem negativa tira ele do fluxo, pra não empurrar
     a linha de baixo. content-box porque o js escreve só a largura do texto. */
  box-sizing:content-box;
  padding:.16em .1em .3em 0;
  margin:-.16em 0 -.3em 0;
  transition:width .4s ease,opacity .4s ease;
}
.gira-txt{
  display:inline-block;color:var(--vermelho);
  /* Pacifico é o cursivo de acento da marca, usado nas seções de sabor */
  font-family:'Pacifico',cursive;font-weight:400;
  font-size:.86em;padding-right:.06em; /* o cursivo desenha maior e vaza à direita */
}
.gira-cursor{
  display:inline-block;width:.06em;height:.78em;margin-left:.06em;
  background:var(--vermelho);vertical-align:baseline;
  animation:pisca .8s steps(1) infinite alternate;
}
@keyframes pisca{from{opacity:1}to{opacity:.2}}
@media(prefers-reduced-motion:reduce){
  .gira{transition:none}
  .gira-cursor{animation:none}
}

/* tag + descrição, empilhado à esquerda */
.hero-tag{
  display:flex;align-items:center;gap:12px;margin-top:22px;
  justify-content:center;
}
@media(min-width:860px){ .hero-tag{justify-content:flex-start} }
.risco{width:24px;height:2px;background:var(--verde);flex:none}
.hero-tag b{display:block;font-size:14.5px;font-weight:800}
.preco-tag{
  display:inline-block;margin-top:4px;font-weight:900;font-size:13px;
  background:var(--off);color:var(--vermelho);padding:3px 10px;border-radius:8px;
  box-shadow:0 0 0 1.5px var(--verde);
}
.hero h1 .palavra,.magia h2 .palavra{display:inline-block}

.hero-ctas{margin-top:70px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
/* no mobile a foto do bolo é a próxima linha do grid e sobe flutuando
   (animação sobe-desce, até -14px): folga embaixo pra ela não encostar */
@media(max-width:859px){ .hero-ctas{margin-top:54px;margin-bottom:26px} }
@media(min-width:860px){ .hero-ctas{justify-content:flex-start} }

/* ---------------- foto grande do banner, à direita ---------------- */
.hero-foto-col{
  position:relative;display:flex;align-items:center;justify-content:center;gap:10px;
}
/* foto (com as setas e as estrelinhas junto) um pouco mais pra direita,
   pra abrir respiro entre ela e o título. translate em vez de margem: não
   mexe na largura da coluna nem reflui o grid do hero. */
@media(min-width:860px){ .hero-foto-col{transform:translateX(34px)} }
.hero-foto-wrap{
  position:relative;width:min(420px,78vw);z-index:3;
}
@media(min-width:860px){ .hero-foto-wrap{width:min(520px,42vw)} }
.hero-foto{
  display:block;width:100%;height:auto;
  filter:drop-shadow(0 14px 22px rgba(28,46,35,.22));
  animation:sobe-desce 5s ease-in-out infinite;
  transition:opacity .16s ease;
}
@keyframes sobe-desce{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-14px) rotate(1deg)}
}
.crumb{position:absolute;width:26px;fill:var(--vermelho);animation:float 5s ease-in-out infinite, twinkle 2.4s ease-in-out infinite}
.crumb{top:2%;left:-2%}
.crumb.c2{top:60%;right:0;left:auto;width:18px;animation-delay:1.2s,.6s}
.crumb.c3{bottom:4%;left:6%;top:auto;width:15px;fill:var(--verde);animation-delay:2s,1.1s}
@keyframes float{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-14px) rotate(6deg)}
}
@keyframes twinkle{
  0%,100%{opacity:.4;transform:scale(.85)}
  50%{opacity:1;transform:scale(1.1)}
}

/* setas do carrossel do hero, uma de cada lado da foto */
.seta{
  position:relative;flex:none;z-index:4;
  width:44px;height:44px;border-radius:50%;
  background:var(--off);border:none;box-shadow:var(--sombra);
  font-size:22px;font-weight:900;color:var(--verde);line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s ease, background .15s ease;
}
.seta:hover{background:var(--creme);transform:translateY(-2px)}
.seta:active{transform:scale(.94)}
.seta[hidden]{display:none}
@media(max-width:640px){ .seta{width:36px;height:36px;font-size:18px} }
.cta-grande{
  display:inline-block;text-decoration:none;font-weight:800;font-size:16px;
  background:var(--vermelho);color:var(--off);
  padding:15px 26px;border-radius:99px;box-shadow:0 0 0 2px var(--verde);
  transition:transform .18s ease, background .18s ease;
}
@media(hover:hover){ .cta-grande:hover{transform:translateY(-3px) rotate(-1deg);background:var(--rosa-forte)} }
.cta-grande:active{transform:scale(.96)}
.cta-fantasma{
  display:inline-block;text-decoration:none;font-weight:800;font-size:16px;
  background:transparent;color:var(--verde);
  padding:15px 24px;border-radius:99px;box-shadow:0 0 0 2px var(--verde);
  transition:transform .18s ease, background .18s ease;
}
@media(hover:hover){ .cta-fantasma:hover{background:var(--off);transform:translateY(-3px)} }

/* ---------------- seções gerais ---------------- */
.secao{padding:140px 0}
@media(max-width:640px){ .secao{padding:96px 0} }
.kicker{
  display:block;font-size:12px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rosa-forte);margin-bottom:8px;text-align:center;
}
.kicker.claro{color:var(--off)}
.kicker.esq{text-align:left}
.secao h2{
  text-align:center;font-size:clamp(28px,6vw,44px);font-weight:800;
  color:var(--vermelho);
  /* styles.css força minúsculas no h2 (regra do site de pedidos). aqui a caixa
     do título é a que está escrita no HTML. */
  text-transform:none;
}
.secao h2.claro{color:var(--off)}
.secao h2.esq{text-align:left}
.lead{
  text-align:center;max-width:52ch;margin:14px auto 0;
  font-size:15.5px;color:var(--verde);
}
.lead.esq{text-align:left;margin:14px 0 0}

.reveal{opacity:0}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none} .timeline-progresso{transform:none !important} }

/* ---------------- carrossel de bolos (marquee infinito, moldura tipo selo) ---------------- */
.sem-padding-baixo{padding-bottom:0}
/* ancoragem dos adesivos absolutos; o fundo é o creme do body */
#produtos{position:relative;overflow:hidden}
.decor-wine{top:8px;right:4%;width:110px;transform:rotate(8deg);animation-delay:1.4s}
@media(max-width:640px){ .decor-wine{top:2px;right:2%;width:60px} }
/* padding-top generoso de propósito: a cereja do selo fica em top:-16px e a
   animação float ainda leva ela mais 14px pra cima (mais o hover, que sobe 8px
   e escala). como o marquee corta o que sai da caixa, padding menor cortava a
   cereja pela metade. */
/* o trenzinho anda por scrollLeft (js/landing.js), não por transform: assim o
   arrasto do usuário e o passeio automático vivem na mesma coordenada e não
   brigam. barra de rolagem escondida, o arrasto é a interface. */
.marquee{
  margin-top:24px;overflow-x:auto;overflow-y:hidden;padding:56px 0 56px;
  scrollbar-width:none;-ms-overflow-style:none;
  cursor:grab;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee::-webkit-scrollbar{display:none}
.marquee.arrastando{cursor:grabbing}
/* arrastando, a seleção de texto e o fantasma de drag da imagem atrapalham */
.marquee.arrastando,.marquee.arrastando *{user-select:none}
.marquee-trilho{
  display:flex;gap:22px;width:max-content;
}

.selo{
  position:relative;flex:0 0 auto;width:280px;
  background:var(--off);border-radius:24px;padding:13px 13px 20px;
  box-shadow:0 0 0 2.5px var(--verde);
  transition:transform .25s ease;
}
.selo:nth-child(4n+1){transform:rotate(-2.5deg)}
.selo:nth-child(4n+2){transform:rotate(2deg)}
.selo:nth-child(4n+3){transform:rotate(-1.5deg)}
.selo:nth-child(4n+4){transform:rotate(2.5deg)}
@media(hover:hover){
  .selo:hover{transform:rotate(0) translateY(-8px) scale(1.04);z-index:5}
}
/* fita adesiva no topo, tipo scrapbook — mesmo espírito da referência */
.selo::before{
  content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:74px;height:22px;background:var(--rosa);opacity:.9;
  box-shadow:0 0 0 1.5px var(--verde);
}
.selo img{
  display:block;width:100%;aspect-ratio:4/5;object-fit:cover;
  -webkit-user-drag:none;user-drag:none;
  border-radius:14px;box-shadow:0 0 0 2px var(--verde);
}
.selo .cereja{
  position:absolute;top:-16px;right:-12px;width:40px;z-index:2;
  animation:float 4.5s ease-in-out infinite;
}
.selo:nth-child(even) .cereja{animation-delay:.8s}
/* selo grande é pra desktop — no celular ele passaria da largura da tela */
@media(max-width:640px){ .selo{width:200px} }

.link-seta{
  display:block;text-align:center;margin-top:36px;font-weight:800;
  color:var(--vermelho);text-decoration:none;
}
.link-seta:hover{text-decoration:underline}

/* ---------------- sobre nós ---------------- */

#sobre{position:relative;overflow:hidden;background:var(--rosa)}
.decor-globo{top:16px;right:4%;width:96px;transform:rotate(10deg);animation-delay:.9s}
.decor-vinho-2{bottom:20px;left:3%;width:80px;transform:rotate(-6deg);animation-delay:2.1s}
@media(max-width:640px){ .decor-globo{top:6px;right:2%;width:54px} .decor-vinho-2{bottom:10px;left:2%;width:46px} }
/* foto do sobre nós. Moldura igual à dos selos do carrossel de bolos:
   passe-partout creme com contorno verde, flat, sem sombra difusa. */
.sobre-media-col{width:100%;max-width:440px;margin:0 auto}
/* a coluna da colagem puxa bem mais largura que a do texto: sem as pílulas o
   texto sobra espaço, e a foto é o que essa seção tem pra mostrar */
@media(min-width:860px){
  #sobre .grid-2{grid-template-columns:1.12fr 0.88fr}
  /* o texto começa mais pra dentro que o resto do site: a colagem manda na
     esquerda e a folga separa os dois blocos */
  #sobre .sobre-txt{padding-left:34px}
}
.sobre-colagem{position:relative;width:100%}
.sc-item{
  position:relative;box-sizing:border-box;
  background:var(--off);box-shadow:0 0 0 2.5px var(--verde);
}
.sc-item img,.sc-item video{
  display:block;width:100%;height:100%;object-fit:cover;
}
/* bloco grande, o retrato em evidência — mesma moldura do .selo, com o
   rodapé um pouco mais alto que as outras margens */
.sc-grande{
  width:100%;aspect-ratio:4/5;
  padding:13px 13px 20px;border-radius:28px;
  /* inclinação na propriedade `rotate`: o GSAP escreve transform aqui no reveal
     e apagaria a inclinação se ela morasse junto */
  rotate:-1.5deg;
}
.sc-grande img,.sc-grande video{border-radius:16px}
/* mesma fita adesiva dos selos do carrossel, pra foto em evidência ler como
   recorte colado no álbum e não como imagem solta */
.sc-grande::before{
  content:"";position:absolute;z-index:3;top:-11px;left:50%;
  transform:translateX(-50%) rotate(-3deg);
  width:96px;height:26px;opacity:.9;
  /* creme, não o rosa do carrossel: lá o card senta num fundo creme e o rosa
     aparece, aqui a seção inteira é rosa e a fita sumia dentro dela */
  background:var(--creme);
  box-shadow:0 0 0 1.5px var(--verde);
}
@media(max-width:640px){
  .sobre-media-col{max-width:360px;margin:0 auto}
  .sobre-colagem{margin-top:26px}
  .sc-grande{padding:9px 9px 14px;border-radius:22px}
  .sc-grande::before{width:68px;height:19px;top:-8px}
}

#sobre .kicker{font-size:14px;letter-spacing:.16em;margin-bottom:10px}
#sobre .lead{font-size:18px;line-height:1.5}
.sobre-txt .sobre-p{
  margin-top:16px;font-size:17px;line-height:1.65;
  color:var(--verde);opacity:.9;
}

/* prova social, encaixada logo abaixo da foto grande */
.card-flutuante{
  position:relative;z-index:3;width:48%;min-width:230px;margin:-8px 0 0;
  background:var(--off);border-radius:18px;padding:13px 15px;
  /* só contorno, sem sombra difusa: agora que a colagem toda é flat com
     traço, a sombra do card era o único ponto fora do manual */
  box-shadow:0 0 0 2.5px var(--verde);
  text-align:center;
}
.card-flutuante b{display:block;font-size:17px;color:var(--vermelho)}
.card-flutuante span{display:block;margin-top:2px;font-size:12px;color:var(--verde)}
.card-flutuante a{display:inline-block;margin-top:7px;font-size:12px;font-weight:800;color:var(--vermelho);text-decoration:none}
.card-flutuante a:hover{text-decoration:underline}
/* no celular o card ocupa a largura toda */
@media(max-width:640px){ .card-flutuante{width:100%;min-width:0;margin-top:16px} }

/* ---------------- como pedir (zigue-zague) ---------------- */
.onda-rosa{
  position:relative;overflow:hidden;
  background-color:var(--rosa);
}
.decor-globo-peach{top:28px;left:4%;width:92px;transform:rotate(-12deg);animation-delay:.2s}
.decor-cake-2{bottom:30px;right:3%;width:100px;transform:rotate(9deg);animation-delay:1.1s}
@media(max-width:640px){ .decor-globo-peach{top:8px;left:2%;width:52px} .decor-cake-2{bottom:16px;right:2%;width:58px} }
/* calda creme → verde, antes do CTA final "pronta pra provar a mágica" */
.onda-verde{position:relative;overflow:hidden}
.decor-vinho{top:16px;right:4%;width:88px;transform:rotate(8deg);animation-delay:1.7s}
.decor-globo-3{top:40px;left:3%;width:74px;transform:rotate(-8deg);animation-delay:.5s}
@media(max-width:640px){ .decor-vinho{top:6px;right:2%;width:50px} .decor-globo-3{top:6px;left:2%;width:44px} }

/* ---------------- calda entre seções ----------------
   calda de confeiteiro pingando da seção de cima por cima da de baixo.
   a cor é sempre a da seção que está acima (--calda-cor), então a virada
   de cor continua a mesma de antes, só o recorte que ficou mais detalhado.
   é um desenho único (não é padrão repetido): traço contínuo de bézier no
   viewBox 1440x170, esticado na largura da tela — nunca menos que 1440px de
   largura, centralizado, senão os pingos achatam. usa mask pra colorir por
   variável. desenho vem do componente DripEdge do Framer. */
.calda{position:relative;z-index:3;--calda-cor:var(--rosa)}
.calda-creme{--calda-cor:var(--creme)}
/* a calda da fita é verde escuro pra destacar os nomes rolando */
.calda-verde{--calda-cor:var(--verde)}
.calda-verde .calda-trilho span{color:var(--off)}
.calda-verde .calda-trilho i{color:var(--rosa)}
.calda::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:110px;
  background-color:var(--calda-cor);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 170' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L0,42 C30,42 38,78 70,78 C102,78 112,40 150,40 C190,40 210,102 255,102 C300,102 310,36 350,36 C382,36 390,148 440,148 C490,148 498,38 530,38 C562,38 572,72 610,72 C648,72 654,46 688,46 C728,46 736,112 782,112 C828,112 836,34 872,34 C898,34 902,66 926,66 C950,66 956,42 980,42 C1009,42 1018,138 1064,138 C1110,138 1119,40 1148,40 C1188,40 1198,96 1242,96 C1286,96 1296,44 1332,44 C1356,44 1362,70 1390,70 C1414,70 1420,42 1440,42 L1440,0 Z'/%3E%3C/svg%3E") no-repeat center top;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 170' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L0,42 C30,42 38,78 70,78 C102,78 112,40 150,40 C190,40 210,102 255,102 C300,102 310,36 350,36 C382,36 390,148 440,148 C490,148 498,38 530,38 C562,38 572,72 610,72 C648,72 654,46 688,46 C728,46 736,112 782,112 C828,112 836,34 872,34 C898,34 902,66 926,66 C950,66 956,42 980,42 C1009,42 1018,138 1064,138 C1110,138 1119,40 1148,40 C1188,40 1198,96 1242,96 C1286,96 1296,44 1332,44 C1356,44 1362,70 1390,70 C1414,70 1420,42 1440,42 L1440,0 Z'/%3E%3C/svg%3E") no-repeat center top;
  -webkit-mask-size:max(100%,1440px) 100%;mask-size:max(100%,1440px) 100%;
}
@media(max-width:640px){ .calda::after{height:64px} }

/* só a primeira calda leva a fita com os nomes rolando */
.calda-faixa{background:var(--calda-cor);overflow:hidden;padding:13px 0}
.calda-trilho{
  display:flex;align-items:center;width:max-content;
  animation:calda-rola 90s linear infinite;
}
.calda-trilho span,.calda-trilho i{
  font-weight:900;font-size:15px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--verde);white-space:nowrap;
}
.calda-trilho span{padding:0 18px}
.calda-trilho i{font-style:normal;color:var(--vermelho);font-size:11px}
@media(max-width:640px){ .calda-trilho span,.calda-trilho i{font-size:12px} }
@keyframes calda-rola{ to{ transform:translateX(-50%) } }
@media(prefers-reduced-motion:reduce){ .calda-trilho{animation:none} }

.passos{
  position:relative;
  display:grid;gap:34px 18px;margin-top:56px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
/* linha do tempo ligando os passos — só desktop (grid vira 1 linha só) */
.passos::before{
  display:none;
  content:"";position:absolute;left:0;right:0;top:50%;height:2px;z-index:0;
  background:repeating-linear-gradient(90deg,var(--off) 0 10px,transparent 10px 20px);
  opacity:.55;
}
.timeline-progresso{
  display:none;
  position:absolute;left:0;top:50%;height:3px;width:100%;z-index:0;
  background:var(--vermelho);border-radius:99px;
  transform:scaleX(0);transform-origin:left center;
}
@media(min-width:640px){
  .passos::before,.timeline-progresso{display:block}
}
.passo-item{
  display:flex;flex-direction:column;align-items:center;
  gap:0;text-align:center;
}
.passo-item.baixo{flex-direction:column-reverse}
@media(min-width:640px){
  .passo-item{margin-top:0}
  .passo-item.baixo{margin-top:56px}
}

/* cápsula/pílula, igual "How to Order" da referência */
.capsula{
  position:relative;width:100%;max-width:160px;min-height:190px;
  background:var(--off);border-radius:999px;
  box-shadow:0 0 0 2.5px var(--verde);
  display:flex;align-items:center;justify-content:center;padding:30px 14px;
}
.passo-item:not(.baixo) .capsula{padding-top:44px}
.passo-item.baixo .capsula{padding-bottom:44px}

.passo-bola{
  width:52px;height:52px;border-radius:50%;flex:none;
  background:var(--verde);color:var(--off);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:900;box-shadow:0 0 0 5px var(--off);
  animation:bounceIn .5s ease both;
  position:relative;z-index:2;
}
/* a bolinha afunda um pouco na cápsula pra ler como conectada, sem linha solta */
.passo-item:not(.baixo) .passo-bola{margin-bottom:-26px}
.passo-item.baixo .passo-bola{margin-top:-26px}
.passo-txt b{display:block;font-size:15.5px;font-weight:800;color:var(--verde)}
.passo-txt span{font-size:12.5px;color:var(--verde);opacity:.75}
@keyframes bounceIn{
  0%{transform:scale(.4);opacity:0}
  70%{transform:scale(1.12);opacity:1}
  100%{transform:scale(1)}
}
@media(hover:hover){
  .passo-bola{transition:transform .2s ease}
  .passo-item:hover .passo-bola{transform:scale(1.12) rotate(-6deg)}
}
.claro-cta{display:block;width:fit-content;margin:56px auto 0}

/* ---------------- avaliações (carrossel de prints do instagram) ---------------- */
.estrelas{display:flex;gap:6px;justify-content:center;margin-top:22px}
.estrela{width:26px;height:26px;fill:var(--vermelho)}

/* palco em leque: os cards ficam empilhados no centro e abrem pros lados.
   posição/rotação de cada card é transform inline vindo do JS (av-palco em
   landing.js) — aqui só mora o visual. */
.avaliacoes{position:relative;margin:28px auto 0}
/* o leque ocupa a tela inteira: sai do .wrap com margem negativa. o
   body já tem overflow-x:hidden, então o 100vw não cria rolagem lateral. */
.av-palco{
  /* altura só pro primeiro quadro: o JS sobrescreve com a do card + folga,
     pra o palco acompanhar o tamanho da tela */
  position:relative;height:560px;overflow:hidden;
  width:100vw;margin-left:calc(50% - 50vw);
}
/* no mobile o card fica mais quadrado e o corte pelo topo comia o bolo desse
   print (a cliente segura o bolo na altura da cintura). ancora embaixo só nele. */
@media(max-width:640px){ .av-print img[src$="avaliacao-09.webp"]{object-position:bottom} }

.av-card{
  position:absolute;left:50%;top:50%;cursor:pointer;
  background:var(--off);border-radius:22px;padding:14px 14px 16px;
  box-shadow:0 0 0 2.5px var(--verde);
  display:flex;flex-direction:column;
  /* background fora da transição de propósito: com fade de cor o card que
     sai do centro ainda aparece rosa a meio caminho e confunde qual é o foco. */
  transition:transform .42s ease, box-shadow .42s ease, opacity .32s ease;

  will-change:transform;
}
@media(prefers-reduced-motion:reduce){ .av-card{transition:none} }
.av-card.av-fora{opacity:0;pointer-events:none}
.av-card.av-centro{background:var(--rosa);box-shadow:0 0 0 2.5px var(--verde),0 10px 0 -2px var(--vermelho)}

/* o print entra aqui. sem imagem, fica a moldura listrada de placeholder. */
.av-print{
  flex:1;border-radius:14px;overflow:hidden;background:var(--creme);
  box-shadow:0 0 0 1.5px var(--verde);
  display:flex;align-items:center;justify-content:center;
}
.av-print img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.av-print.vazio{
  background:repeating-linear-gradient(45deg,var(--creme) 0 10px,var(--off) 10px 20px);
  font-size:11px;color:var(--verde);opacity:.75;text-align:center;padding:0 10px;
}
/* o comentário do cliente entra embaixo da foto no formato do Instagram:
   etiqueta levemente torta, avatar redondo, @ em negrito e o texto na
   sequência. card sem comentário fica só com a foto. */
.av-comentario{
  display:flex;align-items:flex-start;gap:10px;
  margin:14px 2px 0;padding:13px 14px;text-align:left;
  background:var(--off);border-radius:12px;
  box-shadow:0 0 0 2px var(--verde), 3px 3px 0 -1px var(--verde);
  transform:rotate(-1.4deg);
}
.av-card.av-centro .av-comentario{transform:rotate(1.2deg)}
.av-avatar{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  object-fit:cover;box-shadow:0 0 0 2px var(--verde);
}
.av-avatar-letra{
  display:flex;align-items:center;justify-content:center;
  background:var(--rosa);color:var(--verde);font-size:17px;font-weight:800;
}
.av-comentario p{flex:1;font-size:15px;color:var(--verde);line-height:1.4}
.av-comentario b{color:var(--vermelho);font-weight:700}
.av-coracao{flex:0 0 auto;font-size:15px;color:var(--vermelho);line-height:1.4}
.av-selo{
  width:14px;height:14px;margin-left:4px;vertical-align:-2px;
  fill:#3897F0;
}
.av-selo-check{fill:var(--off)}

.av-setas{display:flex;justify-content:center;gap:14px;margin-top:18px}

/* ---------------- CTA final "pronta pra provar a mágica" ---------------- */
.magia{background:var(--verde);color:var(--off);overflow:hidden;position:relative;padding-bottom:80px}
/* vídeo no lugar da foto, sem moldura: entra como camada fantasma
   sobre o verde. o arquivo já vem cortado em 608x1080, então a caixa só
   espelha a proporção dele.
   a opacidade fica no vídeo e não na caixa de propósito: o GSAP anima
   autoAlpha da caixa no reveal e sobrescreveria qualquer opacity ali. */
.magia-video-moldura{
  position:relative;z-index:1;
  width:min(520px,100%);margin:0 auto;aspect-ratio:608/1080;
  /* a máscara mora aqui, não no <video>: vídeo acelerado vira camada
     própria de composição e o Chromium ignora mask aplicada nele. */
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 42%,transparent 100%);
  mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 42%,transparent 100%);
}
.magia-video{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center;
  opacity:var(--video-opacidade,.30);
  pointer-events:none;user-select:none;
}
.decor-cake-verde{top:24px;right:4%;width:120px;transform:rotate(7deg);animation-delay:.6s}
@media(max-width:640px){ .decor-cake-verde{top:8px;right:2%;width:60px} }
.magia-txt .script{font-size:1.3em;color:var(--rosa)}
.magia-txt h2{color:var(--off)}
.magia-txt .lead{color:var(--off);opacity:.85}
/* o fantasma é verde com anel verde: no fundo verde da seção final ele
   sumia por completo. aqui inverte pro creme; no hero, que é claro,
   continua verde. */
.magia .cta-fantasma{color:var(--off);box-shadow:0 0 0 2px var(--off)}
@media(hover:hover){ .magia .cta-fantasma:hover{background:var(--off);color:var(--verde)} }

/* ---------------- rodapé ---------------- */
/* footer.css original centraliza (era pensado pra 1 coluna só) — aqui
   são 3 colunas, cada uma alinhada à esquerda, texto sob a logo */
.rodape{background:var(--verde);color:var(--off);padding:36px 20px 24px;text-align:left;position:relative;overflow:hidden}
.decor-vinho-verde{bottom:10px;left:4%;width:100px;transform:rotate(-6deg);animation-delay:1.3s;opacity:.5}
@media(max-width:640px){ .decor-vinho-verde{width:56px;left:2%} }
.rodape-grid{display:grid;gap:36px}
@media(min-width:720px){ .rodape-grid{grid-template-columns:1.4fr 1fr 1fr} }
.rodape-col{display:flex;flex-direction:column;gap:10px}
.rodape-col b{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--rosa);margin-bottom:4px}
.rodape-col a{color:var(--off);text-decoration:none;font-weight:600;font-size:14px;opacity:.85}
.rodape-col a:hover{opacity:1;text-decoration:underline}
.logo-rodape{width:110px;height:auto;filter:brightness(0) saturate(100%) invert(94%) sepia(8%) saturate(547%) hue-rotate(314deg) brightness(103%) contrast(96%)}
.rodape .script{font-size:1.15em;color:var(--rosa)}
/* o pill do WhatsApp (fundo creme, herdado de styles.css) precisa de texto
   escuro — sem isso herda o var(--off) do .rodape-col a e some no creme */
.rodape .contato{margin-top:14px}
.rodape .contato a{
  opacity:1;font-weight:700;color:var(--verde);margin-left:0;
}
.rodape .contato-horario{font-size:12.5px;opacity:.7}

/* ============================================================
   MOBILE
   ============================================================ */
@media(max-width:600px){
  .nav{top:8px;padding:6px 8px 6px 16px;gap:10px}
  .nav-logo img{width:64px}
  .nav-cta{padding:9px 14px;font-size:13px}
  .secao{padding:68px 0}
}

/* Lenis (scroll suave) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* fita do @ no fim da seção de stories — mesma fita da calda, só que
   apagadinha e correndo pro outro lado */
.arroba-faixa{overflow:hidden;padding:0;margin:70px 0 -104px}
@media(max-width:640px){ .arroba-faixa{margin:44px 0 -66px} }
.arroba-trilho{
  display:flex;align-items:center;width:max-content;opacity:.24;
  animation:calda-rola 90s linear infinite reverse;
}
.arroba-trilho span{
  font-weight:900;font-size:15px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--verde);white-space:nowrap;padding:0 26px;
}
@media(max-width:640px){ .arroba-trilho span{font-size:12px} }
@media(prefers-reduced-motion:reduce){ .arroba-trilho{animation:none} }