/* Viviane Bastos · página de links · v2 (15/10/2026)
   Uma coluna de 480px no celular; no desktop vira duas colunas, com o retrato
   fixo à esquerda e a lista à direita. Mesma paleta das outras páginas:
   marfim, blush, ameixa e rose gold, com o lilás da mesa radiônica em detalhes. */
:root{
  --marfim:#FAF7F2;--blush:#F6EBEE;--rosa-cha:#EEDDE2;
  --ameixa:#523641;--ameixa-escura:#3C2630;--ameixa-noite:#2E1C25;
  --ametista:#3E2545;--ametista-noite:#2A1730;--ametista-fundo:#1E1023;
  --lilas:#C6A9CC;--lilas-luz:#E2CBE8;
  /* ornamento: 3,1:1 sobre marfim, só em borda e filete, nunca em texto pequeno */
  --rose-gold:#B58072;--rose-gold-claro:#E0BCB0;
  /* o mesmo rose, fechado até passar em contraste de texto (5,8:1) */
  --rose-texto:#8A5346;
  --tinta:#3C2630;--tinta-2:#6B4C57;--tinta-3:#8A7079;
  --creme:#FBF4F8;--creme-2:#E6D6DA;
  --superficie:rgba(255,255,255,.66);--borda:rgba(181,128,114,.28);
  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease-out:cubic-bezier(.16,.84,.32,1);--ease-io:cubic-bezier(.65,.05,.36,1);
  --raio:22px;--lado:18px;
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100svh;overflow-x:hidden;overflow-x:clip;background:var(--marfim);color:var(--tinta-2);
  font-family:var(--sans);font-weight:400;font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--rose-texto);outline-offset:3px;border-radius:12px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- fundo: bruma que deriva + grão de papel ---------- */
.fundo{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;background:var(--marfim)}
.fundo i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.42;animation:deriva 90s ease-in-out infinite alternate}
.fundo i:nth-child(1){width:56vmax;height:56vmax;left:-18vmax;top:-22vmax;background:#F2DCE2;animation-delay:-18s}
.fundo i:nth-child(2){width:46vmax;height:46vmax;right:-18vmax;top:22vh;background:#E9DAEE;opacity:.4;animation-delay:-50s}
.fundo i:nth-child(3){width:40vmax;height:40vmax;left:26vw;bottom:-24vmax;background:#F6E4DA;opacity:.38}
@keyframes deriva{0%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,4vh) scale(1.12)}100%{transform:translate(-4vw,-3vh) scale(.94)}}
.fundo::after{content:"";position:absolute;inset:0;opacity:.055;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- estrutura ---------- */
.pagina{width:min(100%,480px);margin-inline:auto;
  padding:calc(20px + env(safe-area-inset-top)) var(--lado) calc(36px + env(safe-area-inset-bottom))}
.miolo{display:flex;flex-direction:column;gap:30px;margin-top:30px}

/* reveal na rolagem */
.rv{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);transition-delay:var(--d,0ms)}
.rv.in{opacity:1;transform:none}
/* entrada do topo, sem esperar rolagem */
.surge{opacity:0;transform:translateY(14px);animation:surgir .8s var(--ease-out) forwards;animation-delay:var(--a,0s)}
@keyframes surgir{to{opacity:1;transform:none}}

/* ---------- topo ---------- */
.topo{display:flex;flex-direction:column;gap:18px}
.retrato{position:relative;margin:0;aspect-ratio:4/5;border-radius:28px;overflow:hidden;background:var(--rosa-cha);
  box-shadow:0 36px 70px -40px rgba(60,38,48,.7),0 0 0 1px rgba(181,128,114,.24);isolation:isolate}
.retrato img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.retrato::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.retrato::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(42,23,48,.14) 0%,transparent 22%,transparent 72%,rgba(42,23,48,.4) 100%)}
.etiqueta{position:absolute;left:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:8px;
  padding:8px 13px 8px 10px;border-radius:100px;font:600 10.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--creme);
  background:rgba(42,23,48,.55);box-shadow:inset 0 0 0 1px rgba(226,203,232,.3)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .etiqueta{background:rgba(42,23,48,.42);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}
.etiqueta svg{width:14px;height:14px;color:var(--lilas-luz)}
.etiqueta b{font-weight:700;color:#fff}

.identidade{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding-inline:4px}
.kicker{margin:0;font:600 10.5px/1.4 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--rose-texto)}
.nome{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(46px,13vw,60px);line-height:.98;letter-spacing:-.012em;color:var(--tinta)}
.nome em{font-style:italic;font-weight:600;
  background:linear-gradient(110deg,#8A5346 0%,#A8646B 28%,#7E4B5E 54%,#A8646B 76%,#8A5346 100%);background-size:240% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:brilho 9s linear infinite}
@keyframes brilho{to{background-position:240% 50%}}
.frase{margin:2px 0 0;max-width:34ch;font-size:15px;line-height:1.6;color:var(--tinta-2)}
.chip{display:inline-flex;align-items:center;gap:9px;margin-top:4px;padding:8px 15px 8px 12px;border-radius:100px;
  font:600 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--rose-texto);
  background:linear-gradient(135deg,rgba(238,221,226,.8),rgba(255,255,255,.92));
  box-shadow:inset 0 0 0 1px rgba(181,128,114,.42),0 10px 22px -18px rgba(60,38,48,.8)}
.chip .ponto{position:relative;width:7px;height:7px;border-radius:50%;background:var(--rose-texto);flex-shrink:0}
.chip .ponto::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--rose-texto);animation:pulso 2.6s var(--ease-io) infinite}
@keyframes pulso{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.5);opacity:0}}

/* botão principal: ameixa com o lustro percorrendo, igual às outras páginas */
.btn{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;
  min-height:58px;padding:0 24px;border-radius:100px;overflow:hidden;cursor:pointer;border:0;
  font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#FFF9F6;
  background:linear-gradient(135deg,#6B4553 0%,var(--ameixa) 46%,var(--ameixa-escura) 100%);
  box-shadow:0 18px 36px -16px rgba(60,38,48,.75),inset 0 1px 0 rgba(255,255,255,.2),0 0 0 1px rgba(181,128,114,.3);
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 38%,rgba(255,236,230,.42) 50%,transparent 62%);
  transform:translateX(-120%);animation:varredura 6s var(--ease-io) infinite;animation-delay:-1.6s}
@keyframes varredura{0%,76%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.btn:hover{transform:translateY(-2px);box-shadow:0 26px 46px -18px rgba(60,38,48,.85),inset 0 1px 0 rgba(255,255,255,.28),0 0 0 1px rgba(181,128,114,.56)}
.btn:active{transform:translateY(0) scale(.985)}
.btn svg{width:20px;height:20px;flex-shrink:0}
.btn .seta{margin-left:auto;transition:transform .45s var(--ease-out)}
.btn:hover .seta{transform:translateX(4px)}
.btn-fantasma{color:var(--ameixa);background:transparent;box-shadow:inset 0 0 0 1px rgba(181,128,114,.6)}
.btn-fantasma::after{display:none}
.btn-fantasma:hover{background:rgba(181,128,114,.08);box-shadow:inset 0 0 0 1px var(--rose-gold)}

.redes-topo{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.redes-topo a{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px 0 12px;border-radius:100px;
  font:600 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-2);
  background:var(--superficie);box-shadow:inset 0 0 0 1px var(--borda);transition:background-color .35s,color .35s,transform .45s var(--ease-out),box-shadow .35s}
.redes-topo a:hover{background:var(--ameixa);color:#FFF9F6;transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--ameixa)}
.redes-topo svg{width:18px;height:18px}

/* ---------- grupos e rótulos ---------- */
.grupo{display:flex;flex-direction:column;gap:10px}
.rotulo{display:flex;align-items:center;gap:12px;margin:0 0 4px;padding-inline:4px;
  font:600 10.5px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--rose-texto)}
.rotulo::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--rose-gold-claro),transparent)}

/* cartão em destaque: a Semente, com a foto da mesa dela */
.destaque{position:relative;display:block;overflow:hidden;aspect-ratio:16/11;border-radius:var(--raio);background:var(--ametista);
  box-shadow:0 30px 56px -34px rgba(42,23,48,.9),0 0 0 1px rgba(226,203,232,.22);
  transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out)}
.destaque img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;transition:transform 1.4s var(--ease-out)}
.destaque::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(42,23,48,.06) 0%,rgba(42,23,48,.1) 42%,rgba(30,16,35,.9) 100%)}
.destaque:hover{transform:translateY(-3px);box-shadow:0 38px 64px -34px rgba(42,23,48,.95),0 0 0 1px rgba(226,203,232,.4)}
.destaque:hover img{transform:scale(1.04)}
.destaque:active{transform:scale(.99)}
.destaque .tags{position:absolute;top:14px;left:14px;right:14px;z-index:2;display:flex;justify-content:space-between;gap:8px}
.tag{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:100px;white-space:nowrap;
  font:700 10px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ameixa-escura);
  background:rgba(255,255,255,.9);box-shadow:0 8px 18px -10px rgba(42,23,48,.8)}
.tag.escura{color:var(--creme);background:rgba(42,23,48,.55);box-shadow:inset 0 0 0 1px rgba(226,203,232,.3)}
.tag .ponto{width:5px;height:5px;border-radius:50%;background:var(--rose-texto)}
.destaque-txt{position:absolute;left:18px;right:70px;bottom:18px;z-index:2;color:var(--creme)}
.destaque-txt b{display:block;font-family:var(--display);font-weight:600;font-size:31px;line-height:1.02;letter-spacing:-.01em;color:#fff}
.destaque-txt span{display:block;margin-top:7px;font-size:12.5px;line-height:1.45;color:rgba(246,237,242,.82)}
.destaque .bolha{position:absolute;right:16px;bottom:16px;z-index:2;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  color:var(--ameixa-escura);background:linear-gradient(135deg,#F2DCE6,#E0BCB0 60%,#C9A0B4);box-shadow:0 12px 24px -10px rgba(0,0,0,.7);
  transition:transform .45s var(--ease-out)}
.destaque .bolha svg{width:18px;height:18px}
.destaque:hover .bolha{transform:translateX(3px)}

/* linhas: miniatura, texto e seta */
.linha{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:14px;padding:10px 14px 10px 10px;border-radius:20px;
  background:var(--superficie);box-shadow:inset 0 0 0 1px var(--borda),0 16px 30px -26px rgba(60,38,48,.7);
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),background-color .45s}
.linha:hover{transform:translateY(-2px);background:rgba(255,255,255,.86);
  box-shadow:inset 0 0 0 1px rgba(181,128,114,.55),0 22px 36px -24px rgba(60,38,48,.65)}
.linha:active{transform:scale(.985)}
.miniatura{display:grid;place-items:center;width:56px;height:56px;border-radius:15px;overflow:hidden;color:var(--rose-texto);
  background:linear-gradient(155deg,#FDF6F7,#EEDDE2);box-shadow:inset 0 0 0 1px rgba(181,128,114,.2)}
.miniatura img{width:100%;height:100%;object-fit:cover}
.miniatura svg{width:24px;height:24px}
.miniatura.lilas{background:linear-gradient(150deg,#5A3F63,#3E2545 60%,#2A1730);color:var(--lilas-luz);box-shadow:inset 0 0 0 1px rgba(226,203,232,.3)}
.miniatura.ameixa{background:linear-gradient(150deg,#6B4553,#523641 60%,#3C2630);color:var(--rose-gold-claro);box-shadow:inset 0 0 0 1px rgba(224,188,176,.3)}
.miniatura.nude{background:linear-gradient(155deg,#FAEFE9,#E6C9BC)}
.linha-txt{min-width:0}
.linha-txt b{display:block;font:600 15px/1.3 var(--sans);color:var(--tinta)}
.linha-txt small{display:block;margin-top:3px;font-size:12.5px;line-height:1.4;color:var(--tinta-3)}
.linha-fim{display:flex;align-items:center;gap:10px}
.linha .tag{padding:6px 10px;font-size:9.5px;color:var(--rose-texto);background:linear-gradient(135deg,#F7E7E0,#EFD3C8);box-shadow:none}
.seta-mini{width:22px;height:22px;color:var(--rose-texto);transition:transform .4s var(--ease-out)}
.linha:hover .seta-mini{transform:translateX(3px)}
@media (max-width:479px){.linha .tag{display:none}}

/* ---------- depoimentos: trilho com encaixe ---------- */
.depo-cab{padding-inline:4px}
.depo-cab h2,.escala h2{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(28px,7.4vw,34px);line-height:1.08;letter-spacing:-.01em;color:var(--tinta)}
.depo-cab h2 em,.escala h2 em{font-style:italic;font-weight:600;color:var(--rose-texto)}
.depo-cab p{margin:8px 0 0;font-size:14px;color:var(--tinta-3)}
.trilho{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  padding:6px var(--lado) 16px;margin:0 calc(var(--lado) * -1);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.trilho::-webkit-scrollbar{display:none}
.depo{position:relative;flex:0 0 min(306px,84vw);display:flex;flex-direction:column;gap:12px;scroll-snap-align:start;scroll-snap-stop:always;
  padding:22px 22px 18px;border-radius:var(--raio);
  background:linear-gradient(170deg,#FFFFFF,#F8EEF1);box-shadow:inset 0 0 0 1px var(--borda),0 18px 36px -30px rgba(60,38,48,.8)}
.depo .aspas{height:20px;font-family:var(--display);font-size:60px;line-height:.55;color:var(--rose-gold);user-select:none}
.depo blockquote{margin:0;font-family:var(--display);font-style:italic;font-weight:500;font-size:19px;line-height:1.38;color:var(--tinta);text-wrap:pretty}
.depo footer{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:auto;padding-top:14px;border-top:1px solid rgba(181,128,114,.22)}
.depo cite{font-style:normal;font:600 10.5px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--rose-texto)}
.depo cite small{display:block;margin-top:2px;font-weight:400;font-size:11.5px;letter-spacing:.02em;text-transform:none;color:var(--tinta-3)}
.ver-print{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;padding:8px 11px;border:0;border-radius:100px;cursor:pointer;
  font:600 10px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ameixa);
  background:rgba(238,221,226,.7);box-shadow:inset 0 0 0 1px rgba(181,128,114,.3);transition:background-color .3s,color .3s}
.ver-print svg{width:14px;height:14px}
.ver-print:hover{background:var(--ameixa);color:#FFF9F6}
.pontos{display:flex;justify-content:center;gap:6px}
.pontos i{width:6px;height:6px;border-radius:3px;background:var(--rose-gold-claro);transition:width .4s var(--ease-out),background-color .4s}
.pontos i.on{width:20px;background:var(--rose-texto)}

/* ---------- escala de ágatha: cartão ametista ---------- */
.escala{position:relative;overflow:hidden;padding:26px 22px 22px;border-radius:var(--raio);color:var(--creme-2);
  background:
    radial-gradient(ellipse 60% 50% at 80% 10%,rgba(154,104,164,.5),transparent 68%),
    radial-gradient(ellipse 50% 50% at 0% 100%,rgba(181,128,114,.26),transparent 66%),
    linear-gradient(165deg,#44294C 0%,#2A1730 54%,#1E1023 100%);
  box-shadow:0 34px 60px -36px rgba(30,16,35,.9),0 0 0 1px rgba(226,203,232,.2)}
.escala .rotulo{color:var(--lilas-luz);padding-inline:0}
.escala .rotulo::after{background:linear-gradient(90deg,rgba(226,203,232,.5),transparent)}
.escala h2{color:#FBF4F8}
.escala h2 em{color:transparent;background:linear-gradient(110deg,#E8C3B8 0%,#F0D9E4 28%,#D9B6E4 54%,#F0D9E4 78%,#E8C3B8 100%);
  background-size:240% 100%;-webkit-background-clip:text;background-clip:text;animation:brilho 9s linear infinite}
.escala p{margin:10px 0 0;font-size:14px;line-height:1.6;color:rgba(246,237,242,.78)}
.regua{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:18px 0 0;padding:0;list-style:none}
.regua li{padding:12px 12px 11px;border-radius:14px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(226,203,232,.16)}
.regua i{display:block;height:4px;border-radius:2px;margin-bottom:10px}
.regua b{display:block;font-family:var(--display);font-weight:600;font-size:21px;line-height:1;color:#FBF4F8}
.regua span{display:block;margin-top:5px;font:600 9.5px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--lilas-luz)}
.regua .terror i{background:linear-gradient(90deg,#1B1B1F,#4A4650)}
.regua .ilusao i{background:linear-gradient(90deg,#B8364A,#E08A3C)}
.regua .evolucao i{background:linear-gradient(90deg,#5BA36B,#3B6FB0)}
.regua .expansao i{background:linear-gradient(90deg,#8C62B8,#E2CBE8)}
.escala-acoes{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.escala .btn{color:var(--ametista-noite);background:linear-gradient(135deg,#F2DCE6,#E0BCB0 52%,#C9A0B4);
  box-shadow:0 18px 38px -18px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.4)}
.escala .btn::after{background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.72) 50%,transparent 62%)}
.escala .btn-fantasma{color:#FBF4F8;background:transparent;box-shadow:inset 0 0 0 1px rgba(226,203,232,.44)}
.escala .btn-fantasma:hover{background:rgba(226,203,232,.1);box-shadow:inset 0 0 0 1px var(--lilas-luz)}
.escala .nota{margin:14px 0 0;font-size:11.5px;color:rgba(246,237,242,.5)}

/* ---------- rodapé ---------- */
.rodape{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:8px;padding:10px 6px 0;text-align:center}
.risco{width:min(280px,70vw);height:20px;color:var(--rose-gold)}
.rodape .aviso{margin:0;max-width:40ch;font-size:11.5px;line-height:1.55;color:var(--tinta-3)}
.rodape .copy{margin:0;font-size:11.5px;letter-spacing:.06em;color:var(--tinta-3)}

/* ---------- visor (prints e escala) ---------- */
.visor{width:min(92vw,520px);max-width:none;max-height:none;margin:auto;padding:0;border:0;background:transparent;overflow:visible}
.visor::backdrop{background:rgba(30,16,35,.7)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .visor::backdrop{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}
.visor-caixa{position:relative;display:flex;flex-direction:column;max-height:88svh;border-radius:24px;overflow:hidden;background:#1B0F20;
  box-shadow:0 50px 100px -40px rgba(0,0,0,.9),0 0 0 1px rgba(226,203,232,.2)}
.visor-rolagem{overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(226,203,232,.4) transparent}
.visor-rolagem img{width:100%;height:auto}
.visor-legenda{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;
  font-size:12px;line-height:1.4;color:var(--lilas-luz);background:#1B0F20;border-top:1px solid rgba(226,203,232,.14)}
.fechar{position:absolute;top:10px;right:10px;z-index:2;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;
  color:var(--ameixa-escura);background:rgba(255,255,255,.92);box-shadow:0 10px 20px -8px rgba(0,0,0,.6)}
.fechar svg{width:16px;height:16px}
.visor[open]{animation:abrir .4s var(--ease-out)}
@keyframes abrir{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- desktop: duas colunas ---------- */
@media (min-width:960px){
  .pagina{width:min(100%,1080px);display:grid;grid-template-columns:400px minmax(0,1fr);gap:0 80px;align-items:start;padding-top:60px;padding-bottom:80px}
  /* o retrato encolhe em telas baixas para a coluna inteira (foto, nome e botão) caber na janela */
  .retrato{height:min(500px,50vh);aspect-ratio:auto}
  .retrato img{object-position:50% 38%}
  .miolo{margin-top:0;gap:34px}
  .nome{font-size:58px}
  .retrato{border-radius:32px}
  .depo{flex-basis:320px}
  .regua{grid-template-columns:repeat(4,1fr)}
  .escala-acoes{flex-direction:row}
  .escala-acoes .btn{width:auto;padding-inline:28px}
}
@media (min-width:1200px){.pagina{gap:0 96px}}
/* a coluna só gruda quando cabe inteira na janela; em janela baixa ela rola junto */
@media (min-width:960px) and (min-height:720px){.topo{position:sticky;top:40px}}

body.pausado *,body.pausado *::before,body.pausado *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .rv,.surge{opacity:1!important;transform:none!important}
}