/* O site do Amorama Ateliê (03/11/2026). Só o que é da página: os tokens vêm de css/marca/. */

html{scroll-behavior:smooth}
/* os objetos vazam dos containers, nunca da página: clip só na horizontal, e fora das cenas (por causa do sticky) */
.sec,.hero{overflow-x:clip; overflow-y:visible}
#petalas{position:fixed; inset:0; z-index:30; width:100%; height:100%; pointer-events:none}

/* ---------- topo ---------- */
.topo{position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px clamp(16px,3vw,40px); background:var(--pergaminho); box-shadow:0 1px 0 var(--linho)}
.topo .marca-lock{color:var(--tinta); text-decoration:none}
.topo nav{display:flex; gap:28px; font-size:15px; font-weight:600}
.topo nav a{color:var(--grafite); text-decoration:none; transition:color .2s var(--ease-padrao)}
.topo nav a:hover{color:var(--tinta)}
.topo .btn{text-decoration:none}

/* ---------- hero: as polaroides vazam do céu para a página ---------- */
.hero{overflow:visible; background:none; padding:clamp(34px,5vw,64px) clamp(12px,2vw,20px) 0; margin-top:12px; z-index:1}
.hero-fundo{position:absolute; inset:0 0 clamp(90px,10vw,150px); z-index:-1; isolation:isolate; overflow:hidden; border-radius:24px; background:var(--ceu)}
.hero-corpo{margin-top:0}
.hero h1{font-size:clamp(44px,7.4vw,92px); line-height:1.02}
.leque{position:relative; max-width:1120px; height:clamp(290px,33vw,440px); margin:clamp(30px,4vw,52px) auto 0}
.leque-carta{position:absolute; left:39.5%; top:-14px; width:21%; z-index:3; transform:translateY(var(--py,0))}
.leque-carta .rasgado{aspect-ratio:4/5; padding:10px; font-size:clamp(8px,1vw,13px); transform:rotate(-1.5deg)}
.leque-carta .nomes{font-size:clamp(17px,2.5vw,33px)}
.leque-obj{position:absolute; left:var(--x); top:var(--y); width:var(--w); z-index:4; transform:translateY(var(--py,0))}
.leque-obj img{display:block; width:100%; filter:drop-shadow(0 14px 16px rgb(110 70 58/.28))}
.play .leque-obj img{animation:vr-pendura 1.1s var(--ease-mola) both .5s}

/* a polaroide: a mesma do varal da montagem */
.pol{position:absolute; left:var(--x); top:var(--y); width:18.5%; margin:0; z-index:var(--z,1); padding:7px 7px 0; background:var(--superficie); border-radius:3px; box-shadow:0 18px 30px -14px rgb(110 70 58/.5),0 0 0 1px rgb(29 29 28/.04); transform:translateY(var(--py,0)) rotate(var(--r,0deg)); transform-origin:50% 0}
.pol img{display:block; width:100%; aspect-ratio:1; object-fit:cover; border-radius:1.5px}
.pol figcaption{font-family:var(--f-display); font-variation-settings:"SOFT" 100; font-size:clamp(11px,1.1vw,15px); line-height:1.15; text-align:center; padding:7px 2px 9px; color:var(--grafite); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pregador{position:absolute; z-index:2; left:50%; top:-13px; width:12px; height:27px; margin-left:-6px; border-radius:3px 3px 4px 4px; background:linear-gradient(90deg,var(--blush-forte) 0 44%,rgb(29 29 28/.14) 44% 56%,var(--blush-forte) 56%); filter:drop-shadow(0 1.5px 0 #FDFDFA) drop-shadow(0 -1.5px 0 #FDFDFA) drop-shadow(1.5px 0 0 #FDFDFA) drop-shadow(-1.5px 0 0 #FDFDFA) drop-shadow(0 3px 3px rgb(110 70 58/.3))}
.pregador::after{content:""; position:absolute; left:2px; right:2px; top:11px; height:3px; border-radius:2px; background:rgb(29 29 28/.2)}
.pol-solta{position:absolute; left:auto; top:auto; width:clamp(112px,12vw,158px)}
.leque .pol{animation:balanca-pol 4.4s ease-in-out infinite alternate; animation-delay:calc(var(--i)*-.8s)}
.play .leque .pol{animation:vr-pendura-pol 1s var(--ease-mola) both calc(var(--i)*90ms + 300ms),balanca-pol 4.4s ease-in-out infinite alternate 1.4s}
@keyframes balanca-pol{from{rotate:0deg} to{rotate:1.6deg}}
@keyframes vr-pendura-pol{from{opacity:0; translate:0 -46px; rotate:calc(var(--r)*.8)} to{opacity:1; translate:0 0; rotate:0deg}}
@keyframes vr-pendura{from{opacity:0; transform:translateY(-30px) rotate(-14deg)}}
.legenda-ia{text-align:center; font-size:12px; color:var(--pedra); margin:6px 0 0}

/* ---------- seções ---------- */
.sec{padding-block:clamp(72px,10vw,140px); position:relative}
.eyebrow-simples{font-size:14px; font-weight:800; color:var(--rose-profundo); margin:0 0 10px}
.titulo-sec{font-size:clamp(34px,5vw,64px); line-height:1.08; letter-spacing:-.02em; max-width:18ch; margin:0 0 clamp(36px,5vw,64px)}
/* os blocos sobem ao entrar e voltam ao sair */
.sobe-rola{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease-saida),transform .9s var(--ease-saida); transition-delay:var(--d,0ms)}
.sobe-rola.viu{opacity:1; transform:none}

/* ---------- os dois produtos: containers com objetos vazando ---------- */
.dois{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2vw,28px); margin-top:clamp(70px,8vw,110px)}
.produto{position:relative; isolation:isolate; display:flex; align-items:flex-end; min-height:clamp(420px,42vw,600px); padding:clamp(22px,3vw,40px); color:var(--tinta); text-decoration:none; --rx:0; --ry:0}
.produto-fundo{position:absolute; inset:0; z-index:-1; border-radius:24px; overflow:hidden; isolation:isolate; transition:transform .5s var(--ease-saida)}
.produto-convite .produto-fundo{background:var(--ceu)}
.produto-livro .produto-fundo{background:linear-gradient(180deg,#F5F2F2,#E7E3E4)}
.produto:hover .produto-fundo{transform:scale(1.012)}
.produto-texto{position:relative; z-index:3; display:grid; gap:8px; max-width:30em}
.produto h3{font-size:clamp(38px,4.6vw,62px); line-height:1.02; letter-spacing:-.02em}
.produto p{font-size:clamp(15px,1.2vw,17px); line-height:1.5; color:var(--grafite); margin:0}
.tag-prod{justify-self:start; font-size:13px; font-weight:800; padding:4px 11px; border-radius:999px; background:#fff}
.produto-link{font-weight:800; font-size:15px; margin-top:6px}
.produto-link span{display:inline-block; transition:transform .25s var(--ease-mola)}
.produto:hover .produto-link span{transform:translateY(4px)}
/* os objetos saem do container e seguem o mouse */
.produto-obj{position:absolute; z-index:1; filter:drop-shadow(0 22px 26px rgb(110 70 58/.3)); transform:translate3d(calc(var(--rx)*14px),calc(var(--py,0px) + var(--ry)*14px),0) rotate(var(--r,0deg)); transition:filter .4s}
.o-env{width:clamp(220px,25vw,350px); top:clamp(-70px,-4.4vw,-34px); left:50%; margin-left:clamp(-175px,-12.5vw,-110px); --r:-6deg}
.o-tacas{width:clamp(74px,8vw,110px); top:12%; right:-18px; --r:8deg; transform:translate3d(calc(var(--rx)*-22px),calc(var(--py,0px) + var(--ry)*-22px),0) rotate(var(--r))}
.o-livro{width:clamp(220px,25vw,350px); top:clamp(-70px,-4.4vw,-34px); left:8%; --r:-4deg}
.produto-livro .pol-solta{top:13%; right:-16px; z-index:2; transform:translate3d(calc(var(--rx)*-20px),calc(var(--py,0px) + var(--ry)*-20px),0) rotate(var(--r))}

/* ---------- o que vem no convite ---------- */
.mosaico{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(12px,1.4vw,18px)}
.caixa{position:relative; isolation:isolate; border-radius:24px; padding:clamp(20px,2.4vw,32px); display:flex; flex-direction:column; gap:8px; min-height:clamp(240px,23vw,330px); background:var(--superficie); box-shadow:var(--sombra-borda)}
.caixa h3{font-size:clamp(25px,2.6vw,36px); line-height:1.12; letter-spacing:-.015em}
.caixa p{margin:0; font-size:15px; line-height:1.5; color:var(--grafite); max-width:32ch}
.caixa-obj{position:absolute; z-index:2; width:var(--w); filter:drop-shadow(0 14px 16px rgb(110 70 58/.28)); transform:translateY(var(--py,0))}
.c-conf{grid-column:span 4; background:var(--ceu); overflow:visible}
.c-conf h3{font-size:clamp(34px,4.4vw,58px)}
.conf-acao{margin-top:auto; display:flex; align-items:center; flex-wrap:wrap; gap:14px}
.conf-conta{font-size:15px; color:var(--grafite)}
.conf-conta b{font-size:18px; font-variant-numeric:tabular-nums; color:var(--tinta)}
#vou[aria-pressed="true"]{background:var(--rose-profundo)}
.c-local{grid-column:span 2; background:var(--nevoa-rosa)}
.rota{margin-top:auto; width:100%; height:auto}
.c-traje,.c-hist,.c-pres{min-height:clamp(210px,18vw,250px)}
.c-traje{grid-column:span 2; background:var(--champanhe)}
.paleta{display:flex; gap:8px; margin-top:auto}
.paleta i{width:38px; height:38px; border-radius:50%; box-shadow:0 0 0 3px #fff,0 6px 10px -4px rgb(110 70 58/.4)}
.c-hist{grid-column:span 2; background:#F1EEEE; padding-right:34%}
.c-pres{grid-column:span 2; background:var(--pessego)}
.c-hist .pol-solta{width:clamp(90px,9vw,128px); transform:translateY(var(--py,0)) rotate(var(--r))}

/* ---------- a ponte: as palavras acendem com o scroll ---------- */
.ponte{min-height:70vh; display:grid; place-items:center; padding:clamp(40px,8vw,100px) 16px; text-align:center}
.ponte-frase{font-size:clamp(38px,6.6vw,88px); line-height:1.1; letter-spacing:-.022em; max-width:15ch; margin:0}
.ponte-frase span{opacity:calc(.14 + var(--a,0)*.86)}

/* ---------- o livro por dentro ---------- */
.c-cap{grid-column:span 3; background:var(--nevoa-rosa); overflow:hidden}
.capitulos{margin-top:auto; display:flex; flex-wrap:wrap; gap:7px}
.capitulos span{font-size:13px; font-weight:700; padding:6px 12px; border-radius:9px 9px 0 0; box-shadow:0 3px 0 rgb(110 70 58/.14); transition:transform .25s var(--ease-mola)}
.capitulos span:hover{transform:translateY(-4px)}
.c-voz{grid-column:span 3; background:var(--champanhe)}
.onda{margin-top:auto; display:flex; align-items:center; gap:4px; height:58px}
.onda i{flex:1; max-width:6px; border-radius:3px; background:var(--rose-profundo); height:calc(var(--h)*1%); transform-origin:50% 50%; animation:onda 1.5s ease-in-out infinite alternate; animation-delay:calc(var(--i)*-.13s)}
@keyframes onda{to{transform:scaleY(.42)}}
.c-quadro{grid-column:span 6; background:var(--ceu); min-height:clamp(240px,20vw,290px); padding-right:42%}
.quadrinho{position:absolute; right:clamp(20px,8vw,120px); top:-46px; width:clamp(150px,18vw,240px); padding:10px 10px 14px; background:#2A2622; border-radius:3px; box-shadow:0 26px 40px -18px rgb(70 48 26/.65); transform:translateY(var(--py,0)) rotate(2deg); text-align:center}
.foto-q{padding:9px 9px 0; background:#FDFDFA}
.foto-q img{display:block; width:100%; aspect-ratio:4/5; object-fit:cover}
.quadrinho b{display:block; background:#FDFDFA; font-family:var(--f-display); font-weight:400; font-variation-settings:"SOFT" 100; font-size:clamp(15px,1.5vw,20px); padding:7px 0 9px}

/* ---------- como funciona ---------- */
.sec-como{padding-top:0}
.passos{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.4vw,18px)}
.passo{border-radius:24px; background:var(--c); padding:clamp(22px,2.4vw,32px); min-height:250px; display:flex; flex-direction:column; gap:6px}
.passo b{font-weight:400; font-size:clamp(56px,6vw,84px); line-height:1; margin-bottom:auto}
.passo h3{font-size:19px; font-weight:800; margin:0}
.passo p{margin:0; font-size:15px; color:var(--grafite); line-height:1.5}

/* ---------- fecho ---------- */
.final{margin:0 clamp(12px,2vw,20px); border-radius:24px}
.final .hero-botoes{margin-top:22px}
.final .btn{text-decoration:none}
.rodape{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-block:22px; font-size:13px; color:var(--pedra)}
.rodape .marca-lock{color:var(--tinta)}

@media (max-width:860px){
  .topo nav{display:none}
  .dois{grid-template-columns:minmax(0,1fr); gap:clamp(70px,16vw,110px)}
  .mosaico{grid-template-columns:minmax(0,1fr)}
  .mosaico .caixa{grid-column:auto}
  .passos{grid-template-columns:minmax(0,1fr)}
  .passo{min-height:190px}
  .c-quadro{padding-right:clamp(20px,2.4vw,32px); padding-top:clamp(260px,62vw,330px)}
  .quadrinho{right:50%; margin-right:clamp(-120px,-18vw,-75px)}
  .c-hist{padding-top:140px; padding-right:clamp(20px,2.4vw,32px)}
  .c-pres{padding-right:30%}
  .leque .pol{width:30%}
  .leque .pol:nth-of-type(1){--x:-2%!important; --y:56px!important}
  .leque .pol:nth-of-type(2){--x:6%!important; --y:-2px!important}
  .leque .pol:nth-of-type(3){--x:66%!important; --y:-2px!important}
  .leque .pol:nth-of-type(4){--x:72%!important; --y:60px!important}
  .leque-carta{left:29%; width:42%; top:20px}
  .leque-carta .rasgado{font-size:clamp(8px,2.4vw,12px)}
  .leque-carta .nomes{font-size:clamp(16px,4.8vw,26px)}
  .leque-obj{--w:50px!important}
  .leque-obj:nth-of-type(1){--x:30%!important; --y:-46px!important}
  .leque-obj:nth-of-type(2){--x:64%!important; --y:-40px!important}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sobe-rola{opacity:1; transform:none; transition:none}
  .leque .pol,.play .leque .pol,.onda i{animation:none}
  .ponte-frase span{opacity:1}
}