/* A landing do convite (07/11/2026). Só os blocos novos: o resto vem de site.css e cenas.css. */

.lead{font-size:clamp(16px,1.4vw,19px); line-height:1.55; color:var(--grafite); max-width:46ch; margin:-28px 0 clamp(30px,4vw,48px)}
.ilustrativo{text-align:center; font-size:12px; color:var(--pedra); margin:14px 0 0}
.ph{display:block; height:9px; width:var(--w,60%); border-radius:5px; background:linear-gradient(90deg,var(--linho),#F4F1EC,var(--linho)); background-size:200% 100%; animation:ph 2.4s linear infinite}
@keyframes ph{to{background-position:-200% 0}}

/* ---------- a cera: um só desenho, vários tamanhos ---------- */
.cera{position:relative; isolation:isolate; display:inline-flex; align-items:center; justify-content:center; flex:none; width:var(--t,64px); aspect-ratio:1; border-radius:50%; font-family:var(--f-display); font-weight:500; font-style:normal; font-size:calc(var(--t,64px)*.3); letter-spacing:-.04em; color:var(--cera3,#9E7C51); text-shadow:0 1px 0 rgb(255 255 255/.45)}
/* só a borda da cera é irregular: o filtro fica na massa (::before), as letras ficam nítidas */
.cera::before{content:""; position:absolute; inset:0; z-index:-1; border-radius:50%; background:radial-gradient(circle at 34% 30%,var(--cera1,#E9D4B4),var(--cera2,#C9A779) 58%,var(--cera3,#9E7C51)); box-shadow:inset 0 2px 3px rgb(255 255 255/.55),inset 0 -4px 7px rgb(0 0 0/.18),0 6px 12px -4px rgb(80 50 30/.45); filter:url(#cera-borda); transition:background .8s}
.cera::after{content:""; position:absolute; inset:16%; border-radius:50%; box-shadow:inset 0 0 0 1.5px rgb(0 0 0/.12),0 0 0 1.5px rgb(255 255 255/.2)}
.cera em{font-style:italic; font-size:.8em; margin:0 .04em}
.cera-mini{--t:30px; font-size:11px}
.cera-grande{--t:86px}

/* ---------- o celular (mockup em CSS) ---------- */
.cel{position:relative; width:var(--cw,220px); aspect-ratio:9/19; padding:8px; border-radius:calc(var(--cw,220px)*.16); background:linear-gradient(145deg,#2E2B29,#121110); box-shadow:inset 0 0 0 1.5px #4A4642,0 30px 60px -24px rgb(70 40 30/.55),0 0 0 1px rgb(0 0 0/.2)}
.cel-tela{position:relative; height:100%; overflow:hidden; border-radius:calc(var(--cw,220px)*.13); background:var(--ceu)}
.cel-ilha{position:absolute; z-index:3; left:50%; top:9px; width:32%; height:20px; transform:translateX(-50%); border-radius:12px; background:#0D0C0B}

/* ---------- hero: celular + carta + polaroides ---------- */
.hero-palco{position:relative; max-width:1120px; height:clamp(330px,38vw,500px); margin:clamp(30px,4vw,52px) auto 0}
.hero-palco .pol{width:17%}
.hp-cel{position:absolute; left:28%; top:-6px; z-index:3; transform:translateY(var(--py,0)) rotate(-7deg); --cw:clamp(150px,17vw,220px)}
.hp-cel .cel{animation:flutua 6s ease-in-out infinite alternate}
.hp-mini{position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:14px}
.hp-mini small{font-size:11px; font-weight:700; color:var(--rose-profundo); animation:pisca 2.4s ease-in-out infinite}
.hp-env{position:relative; display:grid; place-items:center; width:calc(var(--cw)*.7); aspect-ratio:1.45; background:linear-gradient(170deg,#FFFDF8,#F3E6D6); border-radius:4px; box-shadow:0 10px 18px -8px rgb(110 70 58/.5)}
.hp-aba{position:absolute; inset:0 0 38%; background:linear-gradient(180deg,#F8EEDF,#EADBC6); clip-path:polygon(0 0,100% 0,50% 100%); filter:drop-shadow(0 2px 2px rgb(110 70 58/.2))}
.hp-env .cera{position:absolute; top:46%; animation:pulsa 2.4s ease-in-out infinite}
.hp-carta{position:absolute; left:50%; top:18px; z-index:4; width:22%; transform:translateY(var(--py,0)) rotate(3deg)}
.hp-carta .rasgado{aspect-ratio:4/5; padding:10px; font-size:clamp(8px,1vw,13px); animation:flutua 7s ease-in-out infinite alternate-reverse}
.hp-carta .nomes{font-size:clamp(17px,2.5vw,33px)}
@keyframes flutua{from{translate:0 0} to{translate:0 -12px}}
@keyframes pulsa{0%,100%{scale:1} 50%{scale:1.08}}
@keyframes pisca{0%,100%{opacity:.45} 50%{opacity:1}}

/* ---------- a fita que corre: minimalista (07/11) ---------- */
.faixa{position:relative; z-index:2; padding:clamp(32px,4vw,56px) 0 clamp(16px,2vw,28px); overflow-x:clip}
.fita{position:relative; width:106%; margin-left:-3%; transform:rotate(-1.2deg)}
.fita-cetim{position:relative; overflow:hidden; padding:11px 0; background:var(--blush)}
.fita-cetim::before,.fita-cetim::after{content:""; position:absolute; left:0; right:0; border-top:1px solid rgb(255 255 255/.7)}
.fita-cetim::before{top:4px} .fita-cetim::after{bottom:4px}
.fita-brilho{display:none}
.faixa-trilho{display:flex; align-items:center; width:max-content; margin:0; padding:0; list-style:none; animation:corre 50s linear infinite; -webkit-user-select:none; user-select:none}
.faixa:hover .faixa-trilho{animation-play-state:paused}
.faixa-trilho li{display:flex; align-items:baseline; white-space:nowrap; font-size:14px; line-height:1; letter-spacing:.02em; color:var(--rose-profundo)}
.faixa-trilho b{font-family:var(--f-display); font-style:italic; font-weight:400; font-size:16px; line-height:1; margin-right:6px; color:var(--tinta)}
.faixa-trilho li::after{content:""; align-self:center; width:4px; height:4px; margin:0 28px; border-radius:50%; background:var(--rosa-antigo)}
@keyframes corre{to{transform:translateX(-50%)}}

/* ---------- estilo: o envelope troca de roupa ---------- */
.estilo{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(30px,5vw,80px); align-items:center}
.estilo .titulo-sec{max-width:13ch}
.estilo-botoes{display:flex; flex-wrap:wrap; gap:8px}
.estilo-botoes button{font:600 15px var(--f-ui); padding:10px 16px; border-radius:999px; border:0; cursor:pointer; background:var(--superficie); color:var(--grafite); box-shadow:var(--sombra-borda); transition:background .3s,color .3s,transform .2s var(--ease-mola)}
.estilo-botoes button:hover{transform:translateY(-2px)}
.estilo-botoes button[aria-selected="true"]{background:var(--tinta); color:#FDFDFA}
.estilo-ficha{display:flex; gap:clamp(16px,3vw,36px); margin:26px 0 0}
.estilo-ficha div{display:grid; gap:2px}
.estilo-ficha dt{font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--pedra)}
.estilo-ficha dd{margin:0; font-family:var(--f-display); font-size:19px; transition:opacity .3s}

.estilo-palco{--fundo:linear-gradient(180deg,#FBF3E8,#F1E2CF); --papel:#FFFBF3; --papel2:#F2E7D6; --env:#F7EDE0; --env2:#E6D5BF; --tinta-c:#5B4632; --forro:repeating-conic-gradient(from 45deg,#E9D6B7 0 25%,#F6EBD8 0 50%) 0 0/18px 18px; --cera1:#EBD7B6; --cera2:#C9A779; --cera3:#8F6E44; --f-nome:"Pinyon Script",cursive; --ramo:none; --am1:#EFE3C8; --am2:#C9A779; --am3:#FFFBF3; --am4:#5B4632;
  position:relative; isolation:isolate; display:grid; place-items:center; min-height:clamp(420px,44vw,580px); border-radius:28px; background:var(--fundo); overflow:hidden; transition:background .8s var(--ease-saida)}
.estilo-palco[data-estilo-atual="jardim"]{--fundo:linear-gradient(180deg,#F1F4EA,#DCE6D2); --papel:#FDFCF7; --papel2:#EEF1E6; --env:#E9EFE0; --env2:#C9D6BA; --tinta-c:#3E5236; --forro:radial-gradient(circle at 30% 30%,#E7B9B4 0 14%,transparent 15%),radial-gradient(circle at 70% 70%,#B9CDA4 0 12%,transparent 13%),#F4F0E4; --cera1:#EDC1BC; --cera2:#C98B86; --cera3:#8A4F4A; --f-nome:"Fraunces",serif; --ramo:block; --am1:#B9CDA4; --am2:#E7B9B4; --am3:#FDFCF7; --am4:#3E5236}
.estilo-palco[data-estilo-atual="editorial"]{--fundo:linear-gradient(180deg,#F2F1EE,#DEDCD7); --papel:#FFFFFF; --papel2:#F4F3F0; --env:#26252A; --env2:#141317; --tinta-c:#1D1D1C; --forro:repeating-linear-gradient(90deg,#1D1D1C 0 2px,#F4F3F0 2px 14px); --cera1:#5B5A60; --cera2:#2E2D33; --cera3:#0F0E12; --f-nome:"Fraunces",serif; --ramo:none; --am1:#1D1D1C; --am2:#FFFFFF; --am3:#B8B6B0; --am4:#E2DFD8}
.estilo-palco[data-estilo-atual="praia"]{--fundo:linear-gradient(180deg,#EAF3F4,#F6E7D3); --papel:#FFFCF6; --papel2:#F4EADB; --env:#DDEBEC; --env2:#A9C8CB; --tinta-c:#2F5B60; --forro:repeating-linear-gradient(0deg,#F6E7D3 0 9px,#A9C8CB 9px 12px); --cera1:#B5D3D6; --cera2:#6E9DA2; --cera3:#2F5B60; --f-nome:"Pinyon Script",cursive; --ramo:none; --am1:#A9C8CB; --am2:#F6E7D3; --am3:#E8C9A4; --am4:#2F5B60}
.ep-luz{position:absolute; inset:-20%; z-index:-1; background:radial-gradient(circle at 50% 30%,rgb(255 255 255/.85),transparent 55%); animation:respira 7s ease-in-out infinite alternate}
@keyframes respira{to{transform:translateY(4%) scale(1.05)}}
.ep-env{position:relative; width:min(78%,420px); aspect-ratio:1.42; margin-top:30%; transform:rotate(-3deg); animation:flutua 6s ease-in-out infinite alternate}
.ep-costas{position:absolute; inset:0; border-radius:6px; background:linear-gradient(180deg,var(--env2),var(--env)); transition:background .8s}
.ep-carta{position:absolute; left:7%; right:7%; bottom:42%; height:112%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:16px; text-align:center; color:var(--tinta-c); border-radius:3px; background:radial-gradient(circle at 30% 20%,#fff,var(--papel) 60%,var(--papel2)); box-shadow:0 -4px 18px -8px rgb(0 0 0/.25); transition:color .8s; animation:sobe-carta 6s var(--ease-saida) infinite}
@keyframes sobe-carta{0%,6%{transform:translateY(34%)} 30%,86%{transform:translateY(0)} 100%{transform:translateY(34%)}}
.ep-conv{font-size:clamp(9px,1vw,12px); text-transform:uppercase; letter-spacing:.16em; opacity:.75}
.ep-nomes{display:grid; font-family:var(--f-nome); font-size:clamp(26px,3.6vw,46px); line-height:1.05; transition:font-family .4s}
.ep-nomes em{font-family:var(--f-display); font-style:italic; font-size:.5em}
[data-estilo-atual="editorial"] .ep-nomes{font-weight:300; letter-spacing:-.03em; text-transform:uppercase; font-size:clamp(22px,3vw,38px)}
.ep-data{font-size:clamp(10px,1vw,13px)}
.ep-ramo{display:var(--ramo); width:60%; height:16px; background:radial-gradient(ellipse 8px 4px at 20% 50%,#9DB687 98%,transparent),radial-gradient(ellipse 8px 4px at 40% 40%,#B9CDA4 98%,transparent),radial-gradient(circle 4px at 50% 50%,#E7B9B4 98%,transparent),radial-gradient(ellipse 8px 4px at 60% 40%,#B9CDA4 98%,transparent),radial-gradient(ellipse 8px 4px at 80% 50%,#9DB687 98%,transparent)}
.ep-bolso{position:absolute; inset:0; border-radius:6px; background:linear-gradient(180deg,var(--env),var(--env2)); clip-path:polygon(0 30%,50% 64%,100% 30%,100% 100%,0 100%); box-shadow:0 20px 40px -16px rgb(60 40 30/.45); transition:background .8s}
.ep-aba{position:absolute; z-index:-1; left:0; right:0; bottom:99%; height:58%; clip-path:polygon(0 100%,100% 100%,50% 0); background:var(--env2); overflow:hidden; transition:background .8s}
.ep-forro{position:absolute; inset:10% 6% 0; clip-path:polygon(0 100%,100% 100%,50% 0); background:var(--forro); opacity:.9; transition:background .8s}
.ep-cera{position:absolute; left:50%; top:64%; z-index:3; --t:clamp(56px,6vw,76px); transform:translate(-50%,-50%); transition:background .8s,color .8s}
.ep-amostras{position:absolute; right:20px; top:20px; display:flex; gap:6px}
.ep-amostras i{width:22px; height:22px; border-radius:50%; box-shadow:0 0 0 2px #fff,0 4px 8px -3px rgb(0 0 0/.3); transition:background .8s}
.ep-amostras i:nth-child(1){background:var(--am1)} .ep-amostras i:nth-child(2){background:var(--am2)} .ep-amostras i:nth-child(3){background:var(--am3)} .ep-amostras i:nth-child(4){background:var(--am4)}
.estilo-palco.troca .ep-env{animation:troca .8s var(--ease-saida)}
@keyframes troca{30%{transform:rotate(-3deg) scale(.94) translateY(8px)}}

/* ---------- recursos ---------- */
.rec .caixa{overflow:hidden}
.r-revela{grid-column:span 4; background:var(--nevoa-rosa); min-height:clamp(320px,30vw,400px)}
.revela{display:flex; gap:clamp(8px,1.4vw,18px); margin-top:auto; padding-top:18px}
.rv{position:relative; flex:1; max-width:170px; padding:7px 7px 26px; border:0; background:var(--superficie); border-radius:3px; cursor:pointer; box-shadow:0 18px 30px -14px rgb(110 70 58/.5); transform:rotate(var(--r)); transition:transform .4s var(--ease-mola)}
.rv:hover{transform:rotate(0) translateY(-6px)}
.rv img{display:block; width:100%; aspect-ratio:1; object-fit:cover; filter:sepia(.8) saturate(.5) brightness(.62) contrast(.45) blur(5px); transition:filter 2.6s var(--ease-saida)}
.rv span{position:absolute; left:0; right:0; bottom:5px; font-family:var(--f-display); font-size:14px; color:var(--grafite); opacity:0; transition:opacity 1s 1.2s}
.rv.on img{filter:none}
.rv.on span{opacity:1}
.dica{position:absolute; right:clamp(20px,2.4vw,32px); top:clamp(20px,2.4vw,32px); font-size:12px; font-weight:800; color:var(--rose-profundo); animation:pisca 2s infinite}
.r-revela.feito .dica{opacity:0; animation:none}

.r-rsvp{grid-column:span 2; background:var(--ceu); align-items:flex-start}
.segura{position:relative; display:grid; place-items:center; width:120px; height:120px; margin:auto auto 0; padding:0; border:0; background:none; cursor:pointer; touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none}
.segura svg{position:absolute; inset:0; transform:rotate(-90deg)}
.anel-f{fill:none; stroke:rgb(255 255 255/.55); stroke-width:5}
.anel{fill:none; stroke:var(--rose-profundo); stroke-width:5; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--seg,0))}
.segura .cera{transform:scale(calc(1 - var(--seg,0)*.12)); transition:transform .1s}
.segura.feito .cera{animation:derrete .7s var(--ease-mola)}
@keyframes derrete{40%{transform:scale(1.15) rotate(-8deg)} 100%{transform:scale(1)}}
.segura-t{align-self:center; font-weight:800; font-size:14px; color:var(--rose-profundo)!important; text-align:center}

.r-local{grid-column:span 2; background:var(--superficie)}
.rota-viva{margin-top:auto}
.rota-sombra{stroke:var(--linho); stroke-width:6; stroke-linecap:round}
.rota-linha{stroke:#C99A8C; stroke-width:3.4; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 2.4s var(--ease-saida) .2s}
.rota-pino{transform-origin:284px 36px; transform:scale(0); transition:transform .6s var(--ease-mola) 2.2s}
.r-local.viu .rota-linha{stroke-dashoffset:0}
.r-local.viu .rota-pino{transform:scale(1)}
.chips{display:flex; gap:6px}
.chips span{font-size:12px; font-weight:800; padding:5px 10px; border-radius:999px; background:var(--nevoa-rosa); color:var(--rose-profundo)}

.r-traje{grid-column:span 2; background:var(--champanhe)}
.tecidos{display:flex; margin-top:auto; padding-left:10px}
.tecidos i{width:64px; height:84px; margin-left:-12px; border-radius:4px 4px 2px 2px; background:linear-gradient(100deg,rgb(255 255 255/.25),transparent 40%,rgb(0 0 0/.06)),repeating-linear-gradient(45deg,rgb(255 255 255/.14) 0 2px,transparent 2px 5px),var(--c); box-shadow:0 10px 18px -8px rgb(110 70 58/.45),inset 0 -10px 12px -8px rgb(0 0 0/.15); transform:rotate(calc((var(--n,0) - 1.5)*5deg)); clip-path:polygon(0 0,100% 0,100% 88%,90% 100%,80% 88%,70% 100%,60% 88%,50% 100%,40% 88%,30% 100%,20% 88%,10% 100%,0 88%); transition:transform .4s var(--ease-mola)}
.tecidos i:nth-child(1){--n:0} .tecidos i:nth-child(2){--n:1} .tecidos i:nth-child(3){--n:2} .tecidos i:nth-child(4){--n:3}
.tecidos i:hover{transform:translateY(-12px) rotate(0)}

.r-pix{grid-column:span 2; background:var(--pessego)}
.cotas{display:grid; gap:8px; margin-top:auto}
.cota{display:flex; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:12px; background:rgb(255 255 255/.75); font-size:14px}
.cota i{font-style:normal; font-weight:800; color:var(--rose-profundo)}
.pix-btn{align-self:flex-start}

.r-musica{grid-column:span 2; background:var(--superficie)}
.tocador{display:flex; align-items:center; gap:14px; margin-top:auto}
.tocador .play{display:grid; place-items:center; flex:none; width:44px; height:44px; border-radius:50%; background:var(--tinta); color:#fff; font-size:14px; padding-left:3px}
.tocador .onda{flex:1}

.r-vivo{grid-column:span 4; background:linear-gradient(135deg,#FFF9F0,#F3D5CA); flex-direction:row; align-items:stretch; gap:clamp(16px,2.4vw,32px)}
.vivo-cab{flex:1; display:flex; flex-direction:column; gap:8px}
.vivo{flex:1.1; display:flex; flex-direction:column; gap:12px}
.vivo-abas{display:flex; gap:4px; padding:4px; border-radius:12px; background:rgb(255 255 255/.6)}
.vivo-abas button{flex:1; font:700 13px var(--f-ui); padding:8px 4px; border:0; border-radius:9px; background:none; color:var(--grafite); cursor:pointer; transition:background .3s,color .3s}
.vivo-abas button[aria-selected="true"]{background:var(--tinta); color:#fff}
.vivo-telas{position:relative; flex:1; min-height:140px; border-radius:16px; background:var(--superficie); box-shadow:var(--sombra-borda)}
.vt{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px; padding:16px; text-align:center; opacity:0; transform:translateY(10px); transition:opacity .45s,transform .6s var(--ease-saida)}
.vt.on{opacity:1; transform:none}
.vt-rot{font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--rose-profundo)}
.vt-frase{margin:0; font-family:var(--f-display); font-size:clamp(18px,1.8vw,23px); line-height:1.25; color:var(--tinta)!important; max-width:22ch}
.contagem{display:flex; gap:clamp(10px,2vw,22px)}
.contagem span{display:grid; justify-items:center; font-size:12px; color:var(--pedra)}
.contagem b{font-family:var(--f-display); font-weight:400; font-size:clamp(34px,4vw,50px); line-height:1; color:var(--tinta); font-variant-numeric:tabular-nums}

/* ---------- diferente ---------- */
.dif{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(12px,1.4vw,18px)}
.dif-col{position:relative; isolation:isolate; overflow:hidden; border-radius:24px; padding:clamp(24px,3vw,40px)}
.dif-col h3{font-size:19px; font-weight:800; margin:0 0 18px}
.dif-col ul{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.dif-col li{position:relative; padding-left:30px; font-size:16px; line-height:1.45}
.dif-comum{background:#F1F0ED; color:var(--pedra)}
.dif-comum li{text-decoration:line-through; text-decoration-color:rgb(107 106 101/.45)}
.dif-comum li::before{content:"–"; position:absolute; left:6px}
.dif-nosso{background:var(--ceu); color:var(--tinta)}
.dif-nosso li::before{content:"✓"; position:absolute; left:0; top:1px; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--rose-profundo); color:#fff; font-size:11px; font-weight:800}

/* ---------- convidado ---------- */
.convidado{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:clamp(30px,6vw,96px); align-items:center}
.convidado-cel{display:grid; place-items:center; position:relative}
.convidado-cel::before{content:""; position:absolute; width:110%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,#FDE9D8,transparent 66%); z-index:-1}
.cel-grande{--cw:clamp(250px,26vw,320px)}
.zap{background:#EFE7DD url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><circle cx='6' cy='6' r='1.2' fill='%23d9cfc2'/><circle cx='26' cy='22' r='1' fill='%23d9cfc2'/></svg>"); display:flex; flex-direction:column}
.zap-topo{display:flex; align-items:center; gap:8px; padding:36px 12px 10px; background:#F7F3EE; box-shadow:0 1px 0 rgb(0 0 0/.06)}
.zap-topo span{display:grid; font-size:13px; line-height:1.2}
.zap-topo small{font-size:10px; color:var(--pedra)}
.zap-av{width:30px; height:30px; border-radius:50%; background:url(/atelie/fotos/noiva-veu.jpg) center/cover}
.zap-msgs{display:flex; flex-direction:column; gap:7px; padding:12px 10px}
.zm{margin:0; max-width:82%; padding:7px 9px; border-radius:9px; font-size:12.5px; line-height:1.35; box-shadow:0 1px 1px rgb(0 0 0/.08); opacity:0; transform:translateY(10px) scale(.96); transform-origin:0 100%}
.zm-dela{align-self:flex-start; background:#fff}
.zm-minha{align-self:flex-end; background:#E2F7CB; transform-origin:100% 100%}
.zm-link{display:grid; gap:2px; padding:4px 4px 7px}
.zm-link img{display:block; width:100%; aspect-ratio:1.6; object-fit:cover; border-radius:6px; margin-bottom:4px}
.zm-link b,.zm-link small,.zm-link u{padding-inline:5px}
.zm-link b{font-size:12px}
.zm-link small{font-size:11px; color:var(--pedra)}
.zm-link u{font-size:11px; color:#2a7cc7; text-decoration:none}
.convidado-cel.viu .zm{animation:chega .55s var(--ease-mola) both; animation-delay:calc(var(--i)*700ms + 300ms)}
@keyframes chega{to{opacity:1; transform:none}}
.convidado .titulo-sec{max-width:12ch}
.lista-beneficio{list-style:none; margin:0; padding:0; display:grid; gap:16px}
.lista-beneficio li{position:relative; padding-left:28px; font-size:16px; line-height:1.5; color:var(--grafite)}
.lista-beneficio li::before{content:""; position:absolute; left:0; top:6px; width:14px; height:14px; border-radius:50%; background:radial-gradient(circle at 34% 30%,#E9D4B4,#C9A779 60%,#9E7C51)}
.lista-beneficio b{color:var(--tinta)}

/* ---------- painel ---------- */
.sec-painel{background:linear-gradient(180deg,transparent,var(--nevoa-rosa) 18%,var(--nevoa-rosa) 82%,transparent)}
.painel-palco{position:relative; padding-right:clamp(40px,10vw,150px)}
.nav-mock{border-radius:16px; overflow:hidden; background:var(--superficie); box-shadow:0 40px 80px -40px rgb(110 70 58/.55),0 0 0 1px var(--linho); transform:perspective(1600px) rotateX(calc(var(--inc,1)*8deg)); transform-origin:50% 0; transition:transform 1.2s var(--ease-saida)}
.painel-palco.viu .nav-mock{--inc:0}
.nav-barra{display:flex; align-items:center; gap:6px; padding:10px 14px; background:#F4F1EC; border-bottom:1px solid var(--linho)}
.nav-barra i{width:10px; height:10px; border-radius:50%; background:var(--areia)}
.nav-barra span{margin-left:12px; padding:3px 12px; border-radius:6px; background:#fff; font-size:12px; color:var(--pedra)}
.painel{display:grid; grid-template-columns:180px minmax(0,1fr); min-height:clamp(340px,34vw,440px)}
.pn-lado{display:flex; flex-direction:column; gap:4px; padding:18px 12px; border-right:1px solid var(--linho); background:#FCFAF6}
.pn-marca{font-size:18px; margin:0 0 14px 6px; color:var(--tinta)}
.pn-item{font-size:13px; font-weight:600; padding:8px 10px; border-radius:8px; color:var(--grafite)}
.pn-item.on{background:var(--nevoa-rosa); color:var(--rose-profundo)}
.pn-corpo{padding:clamp(16px,2vw,26px); display:flex; flex-direction:column; gap:16px}
.pn-cab{display:flex; justify-content:space-between; align-items:baseline}
.pn-cab b{font-family:var(--f-display); font-weight:400; font-size:clamp(22px,2.4vw,30px)}
.pn-falta{font-size:13px; color:var(--pedra)}
.pn-falta i{font-style:normal; font-weight:800; color:var(--rose-profundo)}
.pn-stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.pn-stat{display:grid; gap:4px; padding:14px; border-radius:12px; background:#FCFAF6; box-shadow:0 0 0 1px var(--linho)}
.pn-stat small{font-size:12px; color:var(--pedra)}
.pn-stat b{font-family:var(--f-display); font-weight:400; font-size:clamp(26px,3vw,38px); line-height:1; font-variant-numeric:tabular-nums}
.pn-barra{display:block; height:5px; border-radius:3px; background:var(--linho); overflow:hidden; position:relative}
.pn-barra::after{content:""; position:absolute; inset:0; background:var(--rose-profundo); transform-origin:0 50%; transform:scaleX(0); transition:transform 1.6s var(--ease-saida) .4s}
.painel-palco.viu .pn-barra::after{transform:scaleX(var(--v))}
.pn-baixo{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:12px; flex:1}
.pn-lista{display:flex; flex-direction:column; border-radius:12px; box-shadow:0 0 0 1px var(--linho); overflow:hidden}
.pn-lista-cab,.pn-linha{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:9px 14px}
.pn-lista-cab{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--pedra); background:#FCFAF6}
.pn-linha{border-top:1px solid var(--linho)}
.pn-linha .ph{flex:1; max-width:var(--w)}
.st{font-size:11px; font-weight:800; padding:3px 9px; border-radius:999px}
.st-sim{background:#E4F2E5; color:#2E6B3A} .st-abriu{background:#FBF0EA; color:var(--rose-profundo)} .st-nao{background:#F1F0ED; color:var(--pedra)} .st-env{background:#EEF2F8; color:#44608A}
.pn-rosca{display:grid; place-items:center; border-radius:12px; box-shadow:0 0 0 1px var(--linho); padding:12px}
.rosca{--a:0; display:grid; place-content:center; justify-items:center; width:min(150px,100%); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,#fff 56%,transparent 57%),conic-gradient(var(--rose-profundo) calc(var(--a)*1%),var(--linho) 0);}
.rosca b{font-family:var(--f-display); font-weight:400; font-size:30px; line-height:1}
.rosca small{font-size:11px; color:var(--pedra)}
.cel-painel{position:absolute; right:0; bottom:-30px; --cw:clamp(150px,16vw,210px); transform:translateY(var(--py,0)) rotate(4deg)}
.pn-cel{background:linear-gradient(180deg,#FFF9F0,#F3D5CA)}
.toasts{position:absolute; inset:40px 8px 0; display:flex; flex-direction:column; gap:8px}
.toast{display:flex; align-items:center; gap:8px; padding:9px; border-radius:12px; background:rgb(255 255 255/.92); box-shadow:0 6px 14px -8px rgb(110 70 58/.5); opacity:0; transform:translateY(-14px)}
.toast .cera{flex:none; --t:28px; font-size:12px; filter:none}
.toast span{display:grid; gap:5px; flex:1; font-size:11px}
.painel-palco.viu .toast{animation:chega .6s var(--ease-mola) both; animation-delay:calc(var(--i)*900ms + 900ms)}
.pn-recursos{list-style:none; margin:clamp(60px,7vw,90px) 0 0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(12px,1.4vw,18px)}
.pn-recursos li{font-size:15px; line-height:1.5; color:var(--grafite); padding-top:14px; border-top:2px solid var(--rosa-antigo)}
.pn-recursos b{display:block; color:var(--tinta); margin-bottom:4px}

/* ---------- do celular ao papel (cena) ---------- */
.cena-papel{height:300vh}
.cena-papel .cena-fixa{background:linear-gradient(180deg,#F8F2EA,#EADFD2)}
.papel-mesa{position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse at 50% 64%,rgb(255 255 255/.85),transparent 62%)}
.papel-titulo{position:absolute; z-index:4; left:0; right:0; top:clamp(28px,6vh,70px); text-align:center; padding-inline:16px}
.papel-titulo h2{font-size:clamp(32px,4.4vw,60px); line-height:1.06; letter-spacing:-.02em; margin:0}
.papel-palco{position:absolute; left:50%; top:56%; width:min(80vw,560px); aspect-ratio:1; transform:translate(-50%,-50%)}
.cel-papel{position:absolute; left:50%; top:50%; --cw:min(52vw,250px); transform:translate(-50%,-50%) translateX(calc(var(--sai,0)*-58%)) rotate(calc(var(--sai,0)*-10deg)) scale(calc(1 - var(--sai,0)*.12)); opacity:calc(1 - var(--sai,0)*.25)}
.cel-papel .cel-tela{background:var(--ceu)}
.folha{position:absolute; left:50%; top:50%; width:min(42vw,220px); aspect-ratio:105/148; perspective:900px;
  transform:translate(-50%,-50%) translateX(calc(var(--sai,0)*42%)) translateY(calc(var(--sai,0)*-2%)) rotate(calc(var(--sai,0)*6deg)) scale(calc(.92 + var(--sai,0)*.28))}
.folha-face{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:9% 8%; text-align:center; color:#5B4632; border-radius:calc((1 - var(--papel,0))*12px + 2px);
  background:radial-gradient(circle at 25% 15%,#FFFFFF,#FFFBF3 55%,#F5ECDD);
  box-shadow:0 calc(var(--papel,0)*30px) calc(var(--papel,0)*50px) calc(var(--papel,0)*-18px) rgb(80 50 30/.55),0 0 0 calc((1 - var(--papel,0))*1px) rgb(0 0 0/.06);
  transform:rotateX(calc(var(--papel,0)*14deg)) rotateY(calc(var(--papel,0)*-10deg))}
.folha-face::after{content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(115deg,rgb(255 255 255/0) 30%,rgb(255 255 255/.55) 45%,rgb(255 255 255/0) 60%); background-size:250% 100%; background-position:calc(120% - var(--papel,0)*120%) 0; pointer-events:none}
.folha-face small{font-size:clamp(7px,.9vw,10px); text-transform:uppercase; letter-spacing:.16em}
.f-nomes{display:grid; font-family:"Pinyon Script",cursive; font-size:clamp(22px,3vw,34px); line-height:1.05}
.f-nomes em{font-family:var(--f-display); font-size:.5em}
.f-data{font-family:var(--f-display); font-size:clamp(11px,1.2vw,14px)}
.f-local{font-size:clamp(7px,.8vw,9px); opacity:.8}
.f-qr{display:grid; justify-items:center; gap:3px; margin-top:6px; opacity:var(--qr,0); transform:scale(calc(.7 + var(--qr,0)*.3))}
.f-qr i{width:clamp(34px,4vw,46px); aspect-ratio:1; background:conic-gradient(#5B4632 25%,transparent 0 50%,#5B4632 0 75%,transparent 0) 0 0/25% 25%; outline:3px solid #5B4632; outline-offset:2px; border-radius:2px}
.f-qr small{font-size:7px}
.marcas-corte{position:absolute; left:50%; top:50%; width:min(42vw,220px); aspect-ratio:105/148; transform:translate(-50%,-50%) translateX(42%) rotate(6deg) scale(1.26); opacity:calc(var(--qr,0)*.8); pointer-events:none}
.marcas-corte i{position:absolute; width:14px; height:14px; border:0 solid var(--rose-profundo)}
.marcas-corte i:nth-child(1){left:-18px; top:-18px; border-right-width:1px; border-bottom-width:1px}
.marcas-corte i:nth-child(2){right:-18px; top:-18px; border-left-width:1px; border-bottom-width:1px}
.marcas-corte i:nth-child(3){left:-18px; bottom:-18px; border-right-width:1px; border-top-width:1px}
.marcas-corte i:nth-child(4){right:-18px; bottom:-18px; border-left-width:1px; border-top-width:1px}
.cena-papel.plano{--sai:1; --papel:1; --qr:1}

.imp{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.4vw,18px)}
.imp-item{padding:clamp(20px,2.4vw,30px); border-radius:20px; background:var(--superficie); box-shadow:var(--sombra-borda)}
.imp-ic{display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--champanhe); color:var(--rose-profundo); font-size:20px; margin-bottom:16px}
.imp-item h3{font-size:18px; font-weight:800; margin:0 0 6px}
.imp-item p{margin:0; font-size:15px; line-height:1.5; color:var(--grafite)}

/* ---------- para sempre ---------- */
.sempre{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px,5vw,80px); align-items:center}
.sempre .titulo-sec{max-width:12ch}
.sempre-palco{position:relative; min-height:clamp(320px,34vw,440px)}
.sempre-livro{position:absolute; left:50%; top:50%; width:min(78%,380px); margin-left:max(-39%,-190px); transform:translateY(calc(-50% + var(--py,0px))) rotate(-4deg); filter:drop-shadow(0 26px 30px rgb(110 70 58/.35))}
.recado{position:absolute; left:var(--x); top:var(--y); z-index:2; width:min(46%,220px); margin:0; padding:14px 16px 12px; border-radius:4px; background:#FFFBF3; font-family:var(--f-display); font-style:italic; font-size:clamp(14px,1.3vw,17px); line-height:1.35; color:var(--tinta); box-shadow:0 14px 24px -12px rgb(110 70 58/.45); transform:rotate(var(--r)); animation:flutua 5s ease-in-out infinite alternate; animation-delay:calc(var(--i)*-1.6s)}
.recado small{display:block; margin-top:6px; font:600 10px var(--f-ui); font-style:normal; color:var(--pedra)}

/* ---------- fecho ---------- */
.final-env{position:absolute; right:clamp(-40px,4vw,80px); bottom:-30px; width:clamp(160px,22vw,300px); z-index:-1; opacity:.9; transform:translateY(var(--py,0)) rotate(-12deg)}

/* ---------- celular ---------- */
@media (max-width:860px){
  .topo nav{display:none}
  .hero-palco{height:clamp(300px,82vw,400px)}
  .hero-palco .pol{width:30%}
  .hero-palco .pol:nth-of-type(1){--x:-4%!important; --y:80px!important}
  .hero-palco .pol:nth-of-type(2){--x:74%!important; --y:90px!important}
  .hp-cel{left:14%; --cw:clamp(140px,38vw,190px)}
  .hp-carta{left:48%; width:44%; top:30px}
  .hp-carta .nomes{font-size:clamp(16px,4.8vw,26px)}
  .hp-carta .rasgado{font-size:clamp(8px,2.4vw,12px)}
  .hero-palco .leque-obj{--w:46px!important}
  /* no celular nada sobe nos botões: o palco desce e os enfeites ficam dentro dele */
  .hero-palco{margin-top:64px; margin-bottom:clamp(20px,9vw,70px)}
  .hero-palco .leque-obj:nth-of-type(1){--x:4%!important; --y:4px!important}
  .hero-palco .leque-obj:nth-of-type(2){--x:84%!important; --y:10px!important}
  .estilo,.convidado,.sempre{grid-template-columns:minmax(0,1fr)}
  .estilo-palco{min-height:440px}
  /* no celular o envelope respira: menor e mais baixo, a carta não encosta no topo */
  .ep-env{width:70%; margin-top:30%}
  .ep-carta{padding:12px 8px}
  .ep-conv{font-size:8px; letter-spacing:.1em; white-space:nowrap}
  .ep-amostras{top:14px; right:14px; gap:4px}
  .ep-amostras i{width:16px; height:16px}
  .convidado-cel{order:2}
  .rec .caixa,.r-revela,.r-vivo{grid-column:auto}
  .r-vivo{flex-direction:column}
  .dif{grid-template-columns:minmax(0,1fr)}
  .painel-palco{padding-right:0}
  .painel{grid-template-columns:minmax(0,1fr)}
  .pn-lado{display:none}
  .pn-stats{grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px}
  .pn-stat{padding:10px}
  .pn-stat small{font-size:10px}
  .pn-baixo{grid-template-columns:minmax(0,1fr)}
  .pn-rosca{display:none}
  .cel-painel{position:relative; right:auto; bottom:auto; margin:-60px 0 0 auto; --cw:150px}
  .pn-recursos{grid-template-columns:minmax(0,1fr)}
  .imp{grid-template-columns:repeat(2,minmax(0,1fr))}
  .papel-palco{width:94vw}
  .folha,.marcas-corte{width:min(40vw,190px)}
  .cel-papel{--cw:min(44vw,200px)}
  .sempre-palco{min-height:360px}
  .recado{width:56%}
  .lead{margin-top:-18px}
  .dica{position:static; order:3; text-align:center}
}
@media (max-width:520px){
  .imp{grid-template-columns:minmax(0,1fr)}
  .estilo-ficha{flex-wrap:wrap}
  .revela{gap:6px}
  .rv{padding:5px 5px 20px}
}
@media (prefers-reduced-motion:reduce){
  .faixa-trilho,.fita-brilho,.hp-cel .cel,.hp-carta .rasgado,.ep-env,.ep-carta,.recado,.ep-luz,.hp-env .cera,.ph{animation:none}
  .ep-carta{transform:none}
  .zm,.toast{opacity:1; transform:none; animation:none!important}
  .rota-linha{stroke-dashoffset:0} .rota-pino{transform:none}
}

.cel-papel .cel-tela{display:grid; place-items:center}
.cel-papel .cera{--t:54px; opacity:calc(var(--sai,0))}


/* o cenário de cada estilo: troca junto com o envelope */
/* o lugar de cada direção: foto com máscara de opacidade, se dissolve no fundo do palco */
.ep-cena{--m:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-20%' y='-20%' width='140%' height='140%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045' numOctaves='3' seed='7' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='22' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeGaussianBlur stdDeviation='4'/%3E%3C/filter%3E%3Cg filter='url(%23f)'%3E%3Cellipse cx='6' cy='92' rx='34' ry='26' fill='black'/%3E%3Cellipse cx='96' cy='8' rx='26' ry='20' fill='black' fill-opacity='.75'/%3E%3Cellipse cx='98' cy='70' rx='10' ry='16' fill='black' fill-opacity='.35'/%3E%3C/g%3E%3C/svg%3E"); position:absolute; inset:0; z-index:-1; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.06); filter:saturate(.6) brightness(1.08) contrast(.9); pointer-events:none; transition:opacity 1.2s var(--ease-saida),transform 1.6s var(--ease-saida);
  /* máscara orgânica e assimétrica (manchas com borda de aquarela): o lugar só aparece em um ou dois cantos */
  -webkit-mask-image:var(--m); mask-image:var(--m); -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat}
.ep-cena[data-cena="praia"]{--m:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-30%' y='-30%' width='160%' height='160%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045' numOctaves='3' seed='7' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='18' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3C/filter%3E%3Cg filter='url(%23f)'%3E%3Cellipse cx='50' cy='-4' rx='70' ry='26' fill='black'/%3E%3Cellipse cx='20' cy='104' rx='46' ry='20' fill='black' fill-opacity='.7'/%3E%3C/g%3E%3C/svg%3E"); object-position:50% 18%}
.ep-cena[data-cena="classico"]{--m:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-30%' y='-30%' width='160%' height='160%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045' numOctaves='3' seed='7' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='14' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeGaussianBlur stdDeviation='9'/%3E%3C/filter%3E%3Cg filter='url(%23f)'%3E%3Cellipse cx='8' cy='46' rx='26' ry='40' fill='black' fill-opacity='.85'/%3E%3Cellipse cx='90' cy='92' rx='22' ry='14' fill='black' fill-opacity='.35'/%3E%3C/g%3E%3C/svg%3E")}
[data-estilo-atual="classico"] .ep-cena[data-cena="classico"],[data-estilo-atual="jardim"] .ep-cena[data-cena="jardim"],[data-estilo-atual="editorial"] .ep-cena[data-cena="editorial"],[data-estilo-atual="praia"] .ep-cena[data-cena="praia"]{opacity:1; transform:none}
.ep-cena[data-cena="editorial"]{filter:grayscale(1) brightness(1.06)}

.ver-modelos{margin-top:24px}

/* ---------- dúvidas + lista de espera (07/11, doc 51) ---------- */
.wrap-estreito{max-width:820px}
.duvidas{display:grid; gap:10px; margin-top:clamp(22px,3vw,36px)}
.duvida{border-radius:16px; background:var(--superficie); box-shadow:var(--sombra-borda); padding:0 20px}
.duvida summary{cursor:pointer; list-style:none; padding:18px 28px 18px 0; position:relative; font-family:var(--f-display); font-size:clamp(18px,2vw,21px)}
.duvida summary::-webkit-details-marker{display:none}
.duvida summary::after{content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%); font:300 24px var(--f-ui); color:var(--rose-profundo); transition:transform .3s}
.duvida[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.duvida p{margin:0 0 18px; color:var(--grafite); line-height:1.6}
.espera{display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-end; gap:10px; max-width:640px; margin:22px auto 0}
.esp-campo{display:grid; gap:5px; text-align:left; flex:1 1 200px}
.esp-campo span{font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--pedra)}
.esp-campo input,.esp-campo select{height:50px; padding:0 14px; border:0; border-radius:14px; background:#fff; font:600 16px var(--f-ui); color:var(--tinta); box-shadow:inset 0 0 0 1px var(--linho)}
.esp-campo input:focus,.esp-campo select:focus{outline:2px solid var(--rose-profundo); outline-offset:1px}
.espera .btn{height:50px}
.esp-isca{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.esp-aviso{flex-basis:100%; min-height:1.4em; margin:4px 0 0; font-size:14px; color:var(--grafite)}
.esp-feito .esp-campo,.esp-feito .btn{display:none}
.esp-feito .esp-aviso{font-family:var(--f-display); font-size:22px; color:var(--tinta)}
.esp-modelos{margin-top:18px}
@media (max-width:560px){ .espera .btn{flex:1 1 100%} }

/* ---------- faixa de idioma (07/11, js/site/idioma.js) ---------- */
.faixa-lingua{position:fixed; z-index:60; left:50%; bottom:16px; transform:translateX(-50%); display:flex; align-items:center; gap:4px; padding:6px 6px 6px 18px; border-radius:999px; background:var(--tinta,#1D1D1C); color:#FDFDFA; box-shadow:0 18px 40px -16px rgb(0 0 0/.5); font:700 14px var(--f-ui); animation:entra-lingua .5s var(--ease-saida,ease-out) both; max-width:calc(100vw - 32px)}
.faixa-lingua a{color:inherit; text-decoration:none; white-space:nowrap}
.faixa-lingua button{width:32px; height:32px; border:0; border-radius:50%; background:rgb(255 255 255/.12); color:inherit; font-size:18px; line-height:1; cursor:pointer}
@keyframes entra-lingua{from{opacity:0; transform:translate(-50%,16px)}}