/* Amorama Ateliê: o que muda em cima do sistema do Amorama.
   Mesma regra da Pet: os neutros, a tipografia, a malha, os raios e as curvas NÃO mudam aqui.
   É isso que faz as marcas serem da mesma família. Muda a hora do dia. */
:root{
  --perola:#FFF9F0; --marfim-rosa:#FBEBDD; --blush:#F3D5CA; --pessego-claro:#F6DFC6;
  --rosa-antigo:#C99A8C; --rose-profundo:#8E4F45; --champanhe:#EFE3C8; --cinza-perola:#E7E3E4; --blush-forte:#F3CFC4; --pessego:#F9DDC6;
  --nevoa-rosa:#FBF0EA;
  --ceu:linear-gradient(180deg,#FFF9F0 0%,#FBEBDD 38%,#F3D5CA 68%,#F6DFC6 100%);
  --ceu-amorama:linear-gradient(180deg,#1A1024 0%,#3B2150 34%,#8E5C88 56%,#F2735F 72%,#FFB070 86%,#FFD89A 100%);
  --ceu-pet:linear-gradient(180deg,#22305A 0%,#4A6FB0 30%,#A6C6EC 55%,#FFBE98 74%,#FFE08A 88%,#FFF3CF 100%);
  --sombra-foto:0 16px 40px -14px rgb(110 70 58/.42);
  --sombra-foto-hover:0 24px 56px -16px rgb(110 70 58/.5);
  --sombra-ceu:0 0 0 1px rgb(255 255 255/.7),0 10px 26px -12px rgb(110 70 58/.5);
  --adesivo:drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 12px 22px rgb(110 70 58/.24));
}
.regras li::before{background:var(--rosa-antigo)}
.ceu :focus-visible,.painel-noite :focus-visible{outline-color:var(--tinta)}

/* ---------- hero: a mesma cena do Amorama, às 16h30. O sol sobe atrás do véu ---------- */
.hero{position:relative; isolation:isolate; overflow:hidden; margin-inline:clamp(8px,1.4vw,20px); border-radius:24px; background:var(--ceu); color:var(--tinta); padding:14px clamp(12px,2vw,20px) 0}
.nevoa{position:absolute; z-index:-2; border-radius:50%; filter:blur(46px); animation:deriva 52s ease-in-out infinite alternate}
.nv1{width:52%; height:150px; left:-10%; top:46%; background:rgb(255 255 255/.6)}
.nv2{width:44%; height:140px; right:-10%; top:52%; background:rgb(243 207 196/.55); animation-duration:60s; animation-direction:alternate-reverse}
.nv3{width:40%; height:130px; left:30%; top:30%; background:rgb(231 227 228/.5); animation-duration:66s}
.sol-hero{position:absolute; z-index:-2; left:50%; bottom:4%; width:clamp(260px,34vw,460px); aspect-ratio:1; border-radius:50%; transform:translate(-50%,0);
  background:radial-gradient(circle at 50% 50%,#FFFFFB 0%,#FFF8EA 34%,#FDE9D8 52%,rgb(247 214 198/.5) 62%,rgb(247 214 198/0) 71%)}
.play .sol-hero{animation:nasce 2.2s var(--ease-saida) both .1s}
/* o véu: a forma na frente do sol, como a colina na Pet. Tem a cor do papel, e o céu vira página */
.veu{position:absolute; z-index:-1; left:0; right:0; bottom:0; width:100%; height:clamp(150px,20vw,240px); display:block}
.veu .v-fundo{fill:#FFF6EE; opacity:.72}
.veu .v-luz{fill:#FFFFFF; opacity:.6}
.veu .v-frente{fill:var(--pergaminho)}
.malha-ceu{position:absolute; inset:0; z-index:-1; background-image:linear-gradient(rgb(142 79 69/.055) 1px,transparent 1px),linear-gradient(90deg,rgb(142 79 69/.055) 1px,transparent 1px); background-size:24px 24px; -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 36%,transparent 70%); mask-image:linear-gradient(180deg,#000 0%,#000 36%,transparent 70%)}
/* as pétalas: ambiente, não coreografia. Com movimento reduzido ficam paradas */
.petala{position:absolute; z-index:4; top:var(--y,-6%); left:var(--x); width:var(--w,26px); pointer-events:none; animation:cai var(--t,22s) linear infinite; animation-delay:var(--d,0s); filter:drop-shadow(0 6px 8px rgb(110 70 58/.2))}
.petala img{display:block; width:100%; animation:balanca 3.4s ease-in-out infinite alternate}
@keyframes cai{
  0%{transform:translate(0,-60px) rotate(0deg); opacity:0}
  6%{opacity:1}
  90%{opacity:1}
  100%{transform:translate(var(--dx,60px),calc(var(--altura,620px))) rotate(var(--giro,220deg)); opacity:0}
}
@keyframes balanca{from{transform:translateX(-10px) rotate(-14deg)} to{transform:translateX(10px) rotate(14deg)}}
.nav{display:flex; align-items:center; justify-content:space-between; gap:12px; max-width:1120px; margin-inline:auto; padding:6px 4px 10px 8px}
.nav-links{display:flex; gap:28px; font-size:15px; font-weight:600; color:var(--grafite)}
.hero-corpo{max-width:820px; margin:clamp(48px,7vw,84px) auto 0; text-align:center; display:grid; justify-items:center; gap:20px; padding-inline:8px}
.selo-papel{display:inline-flex; align-items:center; gap:8px; padding:6px 14px 6px 8px; border-radius:999px; font-size:14px; font-weight:700; color:var(--tinta); background:var(--pergaminho); filter:var(--adesivo); transform:rotate(-2deg)}
.selo-papel svg{width:20px; height:20px}
.hero h1{font-size:clamp(40px,6.2vw,72px); line-height:1.1; letter-spacing:-.023em}
.hero-sub{font-size:clamp(16px,1.6vw,19px); line-height:1.55; color:var(--grafite); max-width:580px}
.hero-botoes{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:6px}
.espalhadas{position:relative; max-width:1040px; height:clamp(250px,31vw,400px); margin:clamp(40px,5vw,64px) auto 0}
.espalhadas .print{position:absolute; width:19%; left:var(--x); bottom:var(--b); z-index:var(--z,1)}
.espalhadas .ad-pos{position:absolute; left:var(--x); top:var(--y); z-index:6}
.rever{position:absolute; right:14px; bottom:14px; z-index:8}
.mapa-legenda{max-width:1200px; margin:10px auto 0; padding-inline:clamp(16px,4vw,32px); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:13px; color:var(--pedra)}

/* adesivos */
.adesivo.blush{background:var(--blush-forte)}
.adesivo.pessego{background:var(--pessego)}
.adesivo.champanhe{background:var(--champanhe)}
.adesivo.cinza{background:var(--cinza-perola)}
.adesivo.objeto{padding:0; background:transparent; filter:none}
.adesivo.objeto img{display:block; width:var(--w,64px); height:auto}
.cola:has(> .objeto)::after{display:none}
.foto img{inset:0; width:100%; height:100%; object-fit:cover; z-index:1!important}
.foto.real::before{display:none}
.rotulo-ia{position:absolute; left:8px; bottom:8px; z-index:4; padding:2px 7px; border-radius:999px; background:rgb(29 29 28/.62); color:#FDFDFA; font-size:10px; font-weight:700; letter-spacing:.01em}

/* assinatura: o sol + amorama + a tira de papel rasgado */
.mast .marca-lock{color:var(--tinta)}
.simbolos .lock-grande{font-size:clamp(20px,2vw,27px); flex-wrap:wrap; justify-content:center}
.marca-lock{display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:17px; letter-spacing:-.02em; color:inherit}
.tag-casamento{position:relative; isolation:isolate; display:inline-grid; place-items:center; height:22px; padding:0 10px; margin-left:3px; color:var(--tinta); font-size:12px; font-weight:800; letter-spacing:0; transform:rotate(-3deg); transform-origin:left center}
.tag-casamento::before{content:""; position:absolute; z-index:-1; inset:0; background:var(--blush-forte); filter:url(#rasgo-fino)}
.hero .tag-casamento::before{background:#fff}
.lock-grande .tag-casamento{height:.86em; font-size:.42em; padding:0 .55em}
.marca-lock:hover .tag-casamento,.simb:hover .tag-casamento{animation:abana .9s var(--ease-padrao)}
@keyframes abana{0%,100%{transform:rotate(-3deg)} 20%{transform:rotate(2deg)} 45%{transform:rotate(-5deg)} 70%{transform:rotate(-1.5deg)}}

/* a peça principal: papel com borda rasgada (o que ficou da rodada anterior) */
.rasgado{position:relative; isolation:isolate; display:grid; align-content:center; justify-items:center; text-align:center; gap:4px; color:var(--tinta)}
.rasgado::before{content:""; position:absolute; z-index:-1; inset:0; background:#FFFDF9; filter:url(#rasgo) drop-shadow(0 12px 18px rgb(110 70 58/.26))}
.rasgado .nomes{font-family:var(--f-display); font-weight:400; font-variation-settings:"SOFT" 100; line-height:1.04; letter-spacing:-.015em}
.rasgado .nomes em{font-style:normal; color:var(--rose-profundo)}
.rasgado small{font-size:.62em; font-weight:700; color:var(--pedra)}
.rasgado .data{font-weight:800; font-variant-numeric:tabular-nums; font-size:.8em}
/* o Sol de ouro: asset de fundo, nunca a marca */
.sol-fundo{position:absolute; z-index:-1; left:50%; width:var(--tam,78%); aspect-ratio:64/44; transform:translateX(-50%); background:var(--c-sol,#CFAF7C); opacity:var(--op,.28); -webkit-mask:url(/atelie/assets/sol-de-ouro.svg) center/contain no-repeat; mask:url(/atelie/assets/sol-de-ouro.svg) center/contain no-repeat; pointer-events:none}

/* ---------- arquitetura: as três marcas ---------- */
.tres-marcas{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.marca-card{border-radius:24px; overflow:hidden; background:var(--superficie); box-shadow:var(--sombra-borda); display:grid; grid-template-rows:auto 1fr}
.marca-ceu{position:relative; height:200px; display:grid; place-items:start center; padding-top:58px; color:#FDFDFA; overflow:hidden}
.marca-ceu .lock-grande{display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:clamp(22px,2.3vw,30px); letter-spacing:-.03em; position:relative; z-index:1}
.marca-ceu .lock-grande svg{width:1.4em; height:1.4em}
.marca-ceu .hora{position:absolute; left:16px; top:14px; font-size:12px; font-weight:800; opacity:.85}
.marca-ceu .sol-mini{position:absolute; left:50%; bottom:-70px; width:180px; aspect-ratio:1; border-radius:50%; transform:translateX(-50%); z-index:0}
.marca-ceu .grama-mini{position:absolute; left:-10%; right:-10%; bottom:-40px; height:80px; border-radius:50% 50% 0 0; background:#8DBF63; z-index:0}
.marca-ceu .veu-mini{position:absolute; left:-10%; right:-10%; bottom:-40px; height:80px; border-radius:50% 50% 0 0; background:#FFFBF5; z-index:0}
.marca-corpo{padding:22px 24px 24px; display:grid; gap:14px; align-content:start}
.marca-corpo .frase{font-size:clamp(22px,2.2vw,28px); line-height:1.2; letter-spacing:-.012em}
.marca-corpo dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:8px 14px; font-size:14px}
.marca-corpo dt{font-size:13px; font-weight:700; color:var(--pedra); padding-top:1px}
.marca-corpo dd{margin:0; color:var(--grafite)}
.regra-mae{display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center; margin-top:16px; padding:22px 24px; border-radius:16px; background:var(--tinta); color:#FDFDFA}
.regra-mae .sol-svg{width:48px; height:48px}
.regra-mae b{font-family:var(--f-display); font-weight:400; font-variation-settings:"SOFT" 100; font-size:clamp(22px,2.4vw,28px); line-height:1.25; letter-spacing:-.01em; display:block}
.regra-mae p{font-size:15px; color:rgb(253 253 250/.75); margin-top:4px}
.horas{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:16px}
.hora-card{border-radius:16px; padding:16px; min-height:150px; display:grid; align-content:space-between; gap:12px; color:#FDFDFA; position:relative; overflow:hidden}
.hora-card b{font-size:15px}
.hora-card span{font-size:13px; line-height:1.4}
.hora-card small{position:absolute; right:12px; top:12px; font-size:11px; font-weight:800; padding:2px 8px; border-radius:999px; background:rgb(255 255 255/.85); color:var(--tinta)}
.hora-card.claro{color:var(--tinta)}
.hora-card.claro-baixo span{color:var(--tinta)}
.tres-regras{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:16px}
.tres-regras .cartao h3{font-size:22px; line-height:1.3; margin-bottom:6px}
.tres-regras .cartao p{font-size:15px; color:var(--grafite)}

/* ---------- símbolo ---------- */
.sois{display:flex; justify-content:center; align-items:flex-end; gap:clamp(14px,3vw,36px)}
.sois figure{margin:0; display:grid; justify-items:center; gap:8px; font-size:13px; color:inherit}
.sois svg{width:72px; height:72px}
.simb.tres-sois{background:#3E2C2B!important; color:#FDFDFA}
.simb.tres-sois figcaption{color:rgb(253 253 250/.8)}
.painel-sol{position:relative; isolation:isolate; overflow:hidden; background:var(--ceu)!important}

/* ---------- imagem ---------- */
.mesa{position:relative; height:clamp(340px,38vw,460px); border-radius:24px; overflow:hidden; background:var(--linho)}
.mesa .print{position:absolute; width:28%; left:var(--x); top:var(--y); z-index:var(--z,1)}
.mesa .ad-pos{position:absolute; left:var(--x); top:var(--y); z-index:6}
.direcao{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.direcao li{display:grid; grid-template-columns:28px 1fr; gap:10px; font-size:15px; color:var(--grafite)}
.direcao li b{color:var(--tinta)}
.direcao i{width:22px; height:22px; border-radius:7px; margin-top:1px; font-style:normal; display:grid; place-items:center; font-size:12px; font-weight:800; color:var(--tinta)}
.direcao .sim i{background:var(--blush-forte)}
.direcao .nao i{background:var(--linho)}

/* ---------- os dois materiais que ficaram ---------- */
.materiais{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:16px}
.material{position:relative; isolation:isolate; overflow:hidden; border-radius:24px; min-height:clamp(440px,38vw,500px); display:grid; align-content:end; padding:22px 24px}
.material h3{font-size:24px; line-height:1.25}
.material p{font-size:15px; color:var(--grafite); max-width:44ch}
.material-rasgado{background:var(--blush)}
.material-sol{background:var(--ceu)}
.material .peca{position:absolute; left:50%; top:28px; width:min(52%,216px); aspect-ratio:4/5; transform:translateX(-50%) rotate(-2deg); font-size:15px; padding:10px}
.material .peca .nomes{font-size:26px}

/* ---------- motion ---------- */
.painel-noite{background:radial-gradient(90% 60% at 80% 110%,rgb(243 207 196/.2),transparent 60%),radial-gradient(70% 50% at 10% -10%,rgb(231 227 228/.14),transparent 60%),#3E2C2B}
.palco-perola{background:var(--ceu)}
.palco-nevoa{background:var(--nevoa-rosa); color:var(--tinta)}
.palco-petalas{background:var(--ceu)}
.palco-petalas .petala{--altura:280px; top:-30px}
.palco-sol .sol-hero{width:190px; bottom:6%}
.palco-sol .veu{height:90px}
/* o selo: cede, racha e cai. O envelope abre e a carta sobe */
.env{position:relative; width:170px; height:112px}
.env-corpo,.env-bolso,.env-aba{position:absolute; inset:0}
.env-corpo{background:#EFE0D2; border-radius:4px; box-shadow:0 14px 22px -12px rgb(110 70 58/.5)}
.env-bolso{background:#FFFBF5; clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%); z-index:3; border-radius:4px}
.env-aba{height:66%; background:#F8EFE6; clip-path:polygon(0 0,100% 0,50% 100%); transform-origin:50% 0; z-index:4; filter:drop-shadow(0 1px 1px rgb(110 70 58/.2))}
.env-carta{position:absolute; left:10px; right:10px; bottom:6px; height:100px; z-index:2; font-size:12px}
.env-carta .nomes{font-size:18px}
.env-selo{position:absolute; left:50%; top:66%; width:40px; height:40px; margin:-20px 0 0 -20px; z-index:5; border-radius:50%; background:radial-gradient(circle at 34% 28%,#F8DDD3,#E2B3A5 60%,#B98172); box-shadow:inset 0 1px 2px #fff8,0 4px 8px -2px rgb(110 70 58/.5); display:grid; place-items:center}
.env-selo svg{width:26px; height:26px}
.play .env-selo{animation:selo-rompe 2.8s var(--ease-padrao) both .3s}
.play .env-aba{animation:aba-abre 2.8s var(--ease-padrao) both .3s}
.play .env-carta{animation:carta-sobe 2.8s var(--ease-saida) both .3s}
@keyframes selo-rompe{0%{transform:none; opacity:1} 10%{transform:scale(.88)} 22%{transform:translateY(90px) rotate(18deg) scale(1.1); opacity:0} 100%{transform:translateY(90px); opacity:0}}
@keyframes aba-abre{0%,14%{transform:perspective(500px) rotateX(0); z-index:4} 40%,100%{transform:perspective(500px) rotateX(-178deg); z-index:1}}
@keyframes carta-sobe{0%,34%{transform:translateY(0)} 100%{transform:translateY(-74px)}}
.palco-carta{align-content:end; padding-bottom:6px}
.guardas{margin-top:clamp(28px,4vw,40px)}

/* ---------- telas ---------- */
.telas-casamento{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,3vw,32px); align-items:start}
.tela-fig{margin:0; display:grid; gap:12px}
.tela-fig figcaption{font-size:14px; color:var(--grafite); line-height:1.45}
.tela-fig figcaption b{color:var(--tinta); display:block; font-size:15px}
.celular{position:relative; width:100%; max-width:300px; margin-inline:auto; aspect-ratio:9/18.5; border-radius:36px; padding:10px; background:#141414; box-shadow:0 30px 60px -30px rgb(110 70 58/.6)}
.celular-tela{position:relative; height:100%; border-radius:28px; overflow:hidden; background:var(--pergaminho); background-image:linear-gradient(rgb(29 29 28/.045) 1px,transparent 1px),linear-gradient(90deg,rgb(29 29 28/.045) 1px,transparent 1px); background-size:12px 12px}
.celular-tela.ceu-tela{background:var(--ceu)}
.t-capa{position:absolute; inset:0; isolation:isolate; display:grid; align-content:start; justify-items:center; padding:42px 16px 16px; text-align:center; gap:10px}
.t-capa .peca{width:88%; aspect-ratio:4/5; font-size:13px; padding:12px; margin-top:12px; transform:rotate(-1.5deg)}
.t-capa .peca .nomes{font-size:31px}
.t-capa .t-abrir{position:absolute; z-index:1; bottom:22px; left:18px; right:18px; height:42px; border-radius:12px; background:var(--tinta); color:#FDFDFA; display:grid; place-items:center; font-size:14px; font-weight:700}
.t-marco{position:absolute; inset:0; padding:30px 16px 16px; display:grid; align-content:start; gap:10px}
.t-marco .aba-mini{justify-self:start; height:24px; padding:0 12px; border-radius:8px 8px 0 0; background:var(--blush-forte); font-size:11px; font-weight:800; display:inline-flex; align-items:center; box-shadow:0 3px 0 var(--blush-forte)}
.t-marco h4{font-family:var(--f-display); font-weight:400; font-variation-settings:"SOFT" 100; font-size:26px; line-height:1.1; letter-spacing:-.012em}
.t-marco .data{font-size:12px; font-weight:700; color:var(--pedra)}
.t-marco .t-foto{padding:5px; background:#fff; border-radius:12px; box-shadow:var(--sombra-borda-forte); transform:rotate(1.5deg)}
.t-marco .t-foto .foto{border-radius:8px; aspect-ratio:1}
.t-marco .frase{font-size:15px; line-height:1.45; color:var(--grafite); padding:10px 12px; border-radius:12px; background:var(--superficie); box-shadow:var(--sombra-borda)}
.t-marco .t-ad{position:absolute; right:10px; top:150px}
.t-marco .paginacao{display:flex; justify-content:center; gap:5px; margin-top:4px}
.t-marco .paginacao i{width:6px; height:6px; border-radius:50%; background:var(--areia)}
.t-marco .paginacao i.on{width:18px; border-radius:3px; background:var(--tinta)}
.t-conf{position:absolute; inset:0; isolation:isolate; display:grid; align-content:center; justify-items:center; gap:12px; padding:20px; text-align:center}
.t-conf h4{font-family:var(--f-display); font-weight:400; font-variation-settings:"SOFT" 100; font-size:34px; line-height:1.05; letter-spacing:-.015em}
.t-conf p{font-size:14px; color:var(--grafite)}
.t-conf .sim{height:44px; width:100%; border-radius:12px; background:var(--tinta); color:#fff; display:grid; place-items:center; font-weight:700; font-size:14px}
.t-conf .talvez{height:44px; width:100%; border-radius:12px; background:#fff; display:grid; place-items:center; font-weight:700; font-size:14px; box-shadow:var(--sombra-borda-forte)}
.livro-cena{display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,4vw,48px); align-items:center; margin-top:clamp(32px,4vw,48px); padding:clamp(20px,3vw,32px); border-radius:24px; background:var(--nevoa-rosa)}
.capa-livro{position:relative; isolation:isolate; width:200px; aspect-ratio:4/5; padding:16px; display:grid; align-content:end; gap:4px; color:var(--tinta); border-radius:6px 14px 14px 6px; overflow:hidden; background:var(--ceu); box-shadow:var(--sombra-foto),inset 7px 0 0 rgb(110 70 58/.1),inset 8px 0 0 rgb(255 255 255/.4); transform:rotate(-2deg)}
.capa-livro .capa-foto{position:absolute; top:10%; left:50%; width:62%; transform:translateX(-50%) rotate(-3deg); padding:4px; background:#fff; border-radius:8px; box-shadow:0 10px 20px -10px rgb(110 70 58/.6)}
.capa-livro .capa-foto .foto{border-radius:5px; aspect-ratio:1}
.capa-titulo{font-size:24px; line-height:1.05; letter-spacing:-.015em; position:relative}
.capa-sub{font-size:12px; font-weight:800; color:var(--grafite); position:relative}

/* ---------- decisões abertas ---------- */
.abertas{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.abertas h3{font-size:22px; line-height:1.3; margin-bottom:6px}
.abertas p{font-size:15px; color:var(--grafite)}
.selo-hipotese{display:inline-block; margin-bottom:10px; padding:3px 10px; border-radius:999px; background:var(--blush-forte); font-size:12px; font-weight:800}

/* ---------- final ---------- */
.final{position:relative; isolation:isolate; overflow:hidden; background:var(--ceu); color:var(--tinta); text-align:center; padding:clamp(72px,10vw,140px) 20px clamp(100px,12vw,170px)}
.final h2{font-size:clamp(36px,5vw,60px); line-height:1.1; letter-spacing:-.02em}
.final p{max-width:62ch; margin:18px auto 0; font-size:14px; color:var(--grafite)}

@media (max-width:960px){
  .tres-marcas,.materiais,.abertas{grid-template-columns:1fr}
  .horas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tres-regras,.telas-casamento{grid-template-columns:1fr}
  .livro-cena{grid-template-columns:1fr; justify-items:center; text-align:center}
}
@media (max-width:760px){
  .nav-links{display:none}
  .espalhadas .print{width:36%}
  .espalhadas .p1,.espalhadas .p5{display:none}
  .espalhadas .p2{--x:4%!important} .espalhadas .p3{--x:32%!important} .espalhadas .p4{--x:60%!important}
  .espalhadas .ad-pos{transform:scale(.85)}
  .espalhadas .a1{--x:56%!important} .espalhadas .a3{--x:64%!important; --y:74%!important}
  .petala.p-4,.petala.p-5{display:none}
}
@media (max-width:560px){
  .cartela{grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 12px; padding:28px 12px}
  .ceu-legenda{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (prefers-reduced-motion:reduce){
  .petala,.petala img,.nevoa{animation:none}
}

/* a tira balança quando a cena toca */
.play .abana-play{animation:abana .9s var(--ease-padrao) .4s}