/* =====================================================================
   STORIES (fase 4) · js/screens/stories.js
   Tela cheia por cima de tudo (nav escondida via .nav.hide). Mobile primeiro:
   360/390/430; alturas de 600 a 932. --k = escala da letra do leitor (A−/A+).
   ===================================================================== */
.st{position:fixed;inset:0;z-index:60;width:100%;max-width:var(--max);margin:0 auto;display:flex;flex-direction:column;
  color:var(--ink);overflow:hidden;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
  background:
    radial-gradient(90% 46% at 50% 30%,var(--accsoft,rgba(245,197,66,.16)),transparent 70%),
    linear-gradient(180deg,#2a1450 0%,#160a2b 52%,#0c0420 100%);--k:1}
.st::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(1.2px 1.2px at 12% 18%,#ffe9a8 50%,transparent 51%),radial-gradient(1px 1px at 78% 9%,#ffe9a8 50%,transparent 51%),
    radial-gradient(1.4px 1.4px at 88% 42%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 22% 63%,#ffe9a8 50%,transparent 51%),
    radial-gradient(1.3px 1.3px at 64% 76%,#ffe9a8 50%,transparent 51%),radial-gradient(1px 1px at 8% 88%,#fff 50%,transparent 51%),
    radial-gradient(1.1px 1.1px at 45% 6%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 93% 92%,#ffe9a8 50%,transparent 51%)}

/* ---------- topo: barras + cabeçalho ---------- */
.st-top{position:relative;z-index:5;flex:none;padding:calc(8px + env(safe-area-inset-top,0px)) 12px 6px}
.st-barras{display:flex;gap:3px}
.st-barras i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.22);overflow:hidden}
.st-barras b{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--gold2),var(--gold));transform:scaleX(0);transform-origin:left}
.st-barras i.ok b{transform:scaleX(1)}
.st-barras i.ag b{transform:scaleX(1);transition:transform .45s ease}
.st-hd{display:flex;align-items:center;gap:6px;margin-top:8px}
.st-x,.st-hb{flex:none;display:grid;place-items:center;min-width:40px;height:40px;border-radius:12px;border:0;background:rgba(255,255,255,.07);color:var(--ink);cursor:pointer}
.st-hb.on{background:var(--gold);color:#1a0e2e}
.st-ler{display:flex;gap:5px;padding:0 10px;font:600 12.5px/1 Poppins,sans-serif}
.st-hd-tx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.st-hd-tx small{font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--gold2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-hd-tx b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- palco + tela ---------- */
.st-palco{position:relative;flex:1;min-height:0}
.st-s{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;justify-content:safe center;gap:clamp(10px,2.2vh,18px);
  padding:6px 22px calc(22px + env(safe-area-inset-bottom,0px));overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.st-s::-webkit-scrollbar{display:none}
.st-s>*{flex-shrink:0}
.st-s>.st-art{flex-shrink:1;min-height:90px}
.st-s[hidden]{display:none}
.st-nav{position:absolute;top:0;bottom:0;width:1px;opacity:0;border:0;padding:0;pointer-events:none}
.st-nav:focus-visible{width:40px;opacity:1;background:rgba(255,224,138,.15);pointer-events:auto}
.st-nav-p{left:0}.st-nav-n{right:0}
.st-load{margin:auto;display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--muted);font-size:14px}
.st-load-o{width:42px;height:42px;border-radius:50%;border:3px solid rgba(255,224,138,.25);border-top-color:var(--gold);animation:stGira 1s linear infinite}
@keyframes stGira{to{transform:rotate(360deg)}}

/* entrada escalonada */
.st-s.in .st-a{animation:stEntra .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--n,0) * 90ms)}
.st-s.in.tras .st-a{animation-name:stVolta}
@keyframes stEntra{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes stVolta{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* ---------- arte ---------- */
.st-art{position:relative;flex:0 1 auto;width:100%;height:clamp(170px,40vh,340px);display:flex;align-items:center;justify-content:center}
.st-art.st-art-sm{height:clamp(110px,24vh,200px)}
.st-s:has(.st-chips)>.st-art{height:clamp(130px,33vh,300px)}
.st-art img{max-width:100%;max-height:100%;object-fit:contain;position:relative;z-index:1}
.st-art-kit::before,.st-art-emo::before{content:"";position:absolute;left:50%;top:50%;height:108%;max-width:100%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(255,224,138,.34) 0%,var(--accsoft,rgba(245,197,66,.16)) 38%,transparent 68%)}
.st-art-kit::after,.st-art-emo::after{content:"";position:absolute;left:50%;top:50%;height:92%;max-width:92%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  border:1px dashed rgba(245,197,66,.35);animation:stGira 60s linear infinite}
.st-art-kit img{width:auto;height:100%;filter:drop-shadow(0 10px 24px rgba(0,0,0,.45))}
.st-art-img img{height:100%;width:auto;border-radius:22px;border:1px solid rgba(255,224,138,.4);box-shadow:0 16px 40px rgba(0,0,0,.5),0 0 0 6px rgba(255,224,138,.06)}
.st-art-ox img{aspect-ratio:4/5;object-fit:cover;object-position:50% 18%}
.st-emo{position:relative;z-index:1;display:none;font-size:clamp(64px,13vh,110px);line-height:1;font-style:normal;color:var(--gold2);filter:drop-shadow(0 6px 18px rgba(0,0,0,.4))}
.st-art-emo .st-emo,.st-art.falhou .st-emo{display:block}
.st-art.falhou::before{content:"";position:absolute;left:50%;top:50%;height:100%;max-width:100%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,224,138,.3),transparent 66%)}

/* ---------- texto ---------- */
.st-tx{width:100%;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.st-t{margin:0;font-family:Poppins,sans-serif;font-weight:600;line-height:1.28;text-align:center;text-wrap:balance;color:#fff;letter-spacing:-.1px}
.st-t.st-g{font-size:calc(var(--k) * clamp(25px,7.4vw,31px))}
.st-t.st-m{font-size:calc(var(--k) * clamp(21px,6.2vw,25px))}
.st-t.st-p{font-size:calc(var(--k) * clamp(17px,4.9vw,20px));font-weight:500;line-height:1.42}
.st-t.st-pp{font-size:calc(var(--k) * clamp(15.5px,4.4vw,17.5px));font-weight:400;line-height:1.5;text-align:left;text-wrap:pretty}
.st-t.st-ouro{background:linear-gradient(180deg,var(--gold2),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;font-family:Cinzel,serif;font-weight:700}
.st-t b{color:var(--gold2)}
.st-topo{margin-bottom:2px}
.st-topo-d{margin-top:-6px;font-size:calc(var(--k) * 14px)}
.st-d{margin:0;font-size:calc(var(--k) * 15.5px);line-height:1.45;color:var(--muted);text-align:center;text-wrap:balance}
.st-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:4px}
.st-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,224,138,.28);font-size:calc(var(--k) * 14px);font-weight:600}
.st-chip i{font-style:normal}
.st-selo{display:inline-flex;align-items:center;gap:6px;align-self:center;padding:5px 12px;border-radius:999px;background:var(--gold);color:#1a0e2e;font-size:11.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase}

/* ---------- capa ---------- */
.st-k-capa{padding:0;justify-content:flex-end}
.st-capa{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end}
.st-capa-bg{position:absolute;inset:0;overflow:hidden}
.st-capa-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;animation:stZoom 14s ease-out both}
.st-capa-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,4,32,.1) 0%,rgba(12,4,32,0) 30%,rgba(12,4,32,.78) 64%,#0c0420 100%)}
.st-capa-bg.falhou{background:radial-gradient(70% 50% at 50% 35%,var(--accsoft,rgba(245,197,66,.2)),transparent)}
@keyframes stZoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.st-capa-kit{justify-content:center;gap:10px;padding:0 22px}
.st-capa-kit .st-art{height:clamp(200px,44vh,360px)}
.st-capa-tx{position:relative;z-index:1;padding:0 24px 8px;text-align:center}
.st-capa-kit .st-capa-tx{padding:0}
.st-eye{font-size:11.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--gold2)}
.st-capa h1{margin:8px 0 6px;font-family:Cinzel,serif;font-weight:700;font-size:calc(var(--k) * clamp(27px,8vw,34px));line-height:1.15;color:#fff;text-wrap:balance}
.st-capa-tx p{margin:0;font-size:calc(var(--k) * 16px);line-height:1.45;color:var(--ink);opacity:.86;text-wrap:balance}
.st-dica{position:relative;z-index:1;align-self:center;display:inline-flex;align-items:center;gap:6px;margin:14px 0 calc(26px + env(safe-area-inset-bottom,0px));
  padding:10px 18px;border-radius:999px;background:rgba(255,224,138,.12);border:1px solid rgba(255,224,138,.35);color:var(--gold2);font-size:14px;font-weight:600}
.st-s.in .st-dica{animation:stEntra .5s both .3s,stPulsa 2.2s ease-in-out 1.2s infinite}
@keyframes stPulsa{50%{transform:translateX(5px)}}

/* ---------- trio ---------- */
.st-trio{width:100%;display:grid;gap:10px}
.st-trio-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.st-trio-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.st-trio-3 .st-tile b{font-size:calc(var(--k) * 13px);hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.st-trio-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.st-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px 12px;border-radius:18px;cursor:pointer;color:var(--ink);
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid rgba(255,224,138,.22);font:inherit;text-align:center;transition:transform .15s,border-color .2s,background .2s}
.st-tile:disabled{cursor:default}
.st-tile b{font-size:calc(var(--k) * 14.5px);font-weight:600;line-height:1.25}
.st-tile.on{border-color:var(--gold);background:linear-gradient(180deg,rgba(245,197,66,.22),rgba(245,197,66,.06));transform:translateY(-2px)}
.st-tile.visto:not(.on) .st-mais{background:var(--ok);color:#0c2a18}
.st-tile.visto:not(.on) .st-mais::before{content:"✓"}
.st-mais{position:absolute;top:7px;right:7px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:#1a0e2e;font-size:14px;font-weight:800;line-height:1}
.st-tile.visto:not(.on) .st-mais{font-size:0}
.st-tile.visto:not(.on) .st-mais::before{font-size:12px}
.st-mi{position:relative;display:grid;place-items:center;width:clamp(58px,17vw,84px);aspect-ratio:1;flex:none}
.st-mi::before{content:"";position:absolute;inset:-6%;border-radius:50%;background:radial-gradient(circle,rgba(255,224,138,.28),transparent 68%)}
.st-mi img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain}
.st-mi-img img{border-radius:50%;object-fit:cover;object-position:50% 20%;border:2px solid rgba(255,224,138,.55)}
.st-mi b{display:none;position:relative;z-index:1;font-size:clamp(30px,8vw,40px);font-weight:400;line-height:1}
.st-mi-emo b,.st-mi.falhou b{display:block}
.st-trio-2 .st-mi,.st-trio-4 .st-mi{width:clamp(72px,22vw,104px)}
.st-trio-3 .st-mi{width:clamp(56px,17vw,80px)}
@media (max-height:700px){.st-trio-2 .st-mi,.st-trio-4 .st-mi{width:clamp(60px,17vw,84px)}}
.st-cap{width:100%;min-height:76px;display:flex;align-items:center;justify-content:center;padding:12px 14px;border-radius:16px;background:rgba(0,0,0,.22);border:1px dashed rgba(255,224,138,.25)}
.st-cap-dica{display:inline-flex;align-items:center;gap:6px;color:var(--gold2);font-size:14px;font-weight:600}
.st-cap-in{margin:0;font-size:calc(var(--k) * 15.5px);line-height:1.45;text-align:center;animation:stEntra .35s both}
.st-cap-in b{color:var(--gold2)}

/* ---------- linha do tempo ---------- */
.st-linha{position:relative;list-style:none;margin:0;padding:0 0 0 6px;width:100%;display:flex;flex-direction:column;gap:clamp(10px,2vh,16px)}
.st-linha::before{content:"";position:absolute;left:14px;top:10px;bottom:10px;width:2px;background:linear-gradient(180deg,var(--gold),rgba(245,197,66,.15));transform-origin:top}
.st-s.in .st-linha::before{animation:stDesce 1.1s ease-out both .1s}
@keyframes stDesce{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.st-linha li{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding-left:34px}
.st-linha li::before{content:"";position:absolute;left:3px;top:6px;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle,var(--gold2) 30%,var(--gold) 31%,var(--gold) 45%,rgba(245,197,66,.25) 46%);box-shadow:0 0 14px rgba(245,197,66,.6)}
.st-pino{display:inline-block;padding:4px 11px;border-radius:999px;background:var(--gold);color:#1a0e2e;font-size:calc(var(--k) * 13px);font-weight:800;letter-spacing:.3px}
.st-lt{font-size:calc(var(--k) * 15.5px);line-height:1.4}

/* ---------- compara ---------- */
.st-comp{position:relative;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.st-lado{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 10px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,224,138,.22);text-align:center}
.st-lado-b{border-color:var(--acc,rgba(66,232,224,.4));background:rgba(255,255,255,.04)}
.st-lado h3{margin:0;font-family:Cinzel,serif;font-size:calc(var(--k) * 17px);color:var(--gold2)}
.st-lado ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.st-lado li{font-size:calc(var(--k) * 14px);line-height:1.35;padding-top:7px;border-top:1px solid rgba(255,255,255,.08)}
.st-vs{position:absolute;left:calc(50% - 17px);top:44px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:#1a0e2e;font-weight:800;z-index:1;box-shadow:0 4px 14px rgba(0,0,0,.4)}

/* ---------- pares ---------- */
.st-pares{width:100%;display:flex;flex-direction:column;gap:10px}
.st-par{display:flex;align-items:center;gap:12px;padding:8px 14px 8px 8px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,224,138,.18)}
.st-par-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.st-par-tx>b{font-size:calc(var(--k) * 12.5px);font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--gold2)}
.st-par-tx>span{font-size:calc(var(--k) * 16px);font-weight:500;line-height:1.3}
.st-par .st-mi{width:54px}
.st-par .st-mi b{font-size:26px}
.st-s.in @keyframes stEstica{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- infográfico ---------- */
.st-info{width:calc(100% + 24px);margin:0 -12px;display:flex;justify-content:center}
.st-info-w{position:relative;max-width:100%;width:min(100%,calc(var(--ih,46vh) * var(--ar,1.5)))}
.st-info-w img{display:block;width:100%;height:100%;object-fit:contain}
.st-info-w.falhou{min-height:200px;border-radius:18px;background:radial-gradient(circle,rgba(255,224,138,.18),transparent 70%)}
.st-pin{position:absolute;margin:-9px 0 0 -9px;display:flex;align-items:center;gap:6px;padding:0;border:0;background:none;color:#fff;cursor:pointer;z-index:2}
.st-pin i{flex:none;width:18px;height:18px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(245,197,66,.3),0 0 16px rgba(245,197,66,.8);animation:stPin 2s ease-in-out infinite}
.st-pin span{position:absolute;left:24px;white-space:nowrap;padding:4px 9px;border-radius:999px;background:rgba(12,4,32,.82);border:1px solid rgba(255,224,138,.4);font-size:12.5px;font-weight:600}
.st-pin.esq span{left:auto;right:24px}
.st-pin.cima span{left:50%;right:auto;bottom:22px;transform:translateX(-50%)}
.st-pin.baixo span{left:50%;right:auto;top:22px;transform:translateX(-50%)}
.st-pin.on i{background:#fff;animation:none;box-shadow:0 0 0 6px rgba(255,255,255,.3),0 0 22px #fff}
.st-pin.on span{background:var(--gold);color:#1a0e2e}
@keyframes stPin{50%{box-shadow:0 0 0 9px rgba(245,197,66,.12),0 0 18px rgba(245,197,66,.9)}}

/* ---------- número ---------- */
.st-num{font-family:Cinzel,serif;font-weight:800;font-size:calc(var(--k) * clamp(64px,22vw,104px));line-height:1;background:linear-gradient(180deg,var(--gold2),var(--gold) 60%,#b8780a);
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 20px rgba(245,197,66,.35))}

/* ---------- revela ---------- */
.st-rev{width:100%;min-height:clamp(170px,30vh,240px);perspective:1000px;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.st-rev-in{position:relative;display:block;width:100%;height:100%;min-height:inherit;transition:transform .6s cubic-bezier(.3,.7,.2,1);transform-style:preserve-3d}
.st-rev.on .st-rev-in{transform:rotateY(180deg)}
.st-rev .f,.st-rev .v{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;border-radius:22px;backface-visibility:hidden;-webkit-backface-visibility:hidden;text-align:center}
.st-rev .f{background:linear-gradient(160deg,rgba(245,197,66,.24),rgba(226,59,208,.12));border:1.5px solid rgba(255,224,138,.55)}
.st-rev .v{transform:rotateY(180deg);background:linear-gradient(160deg,#2c1760,#1a0d38);border:1.5px solid var(--gold)}
.st-rev small{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--gold2)}
.st-rev .f b{font-size:calc(var(--k) * 21px);font-weight:600;line-height:1.3;text-wrap:balance}
.st-rev .v span{font-size:calc(var(--k) * 16.5px);line-height:1.5}

/* ---------- quiz / voce / ordem / marca ---------- */
.st-quiz,.st-voce,.st-ordem,.st-marca{width:100%;display:flex;flex-direction:column;align-items:stretch;gap:12px}
.st-ops,.st-sn{display:flex;flex-direction:column;gap:10px}
.st-ops button,.st-sn button,.st-ordem>button,.st-marca>button{display:flex;align-items:center;gap:12px;min-height:54px;padding:12px 16px;border-radius:16px;cursor:pointer;
  border:1.5px solid rgba(255,224,138,.3);background:rgba(255,255,255,.07);color:var(--ink);font:600 calc(var(--k) * 16px)/1.3 Poppins,sans-serif;text-align:left;transition:background .2s,border-color .2s,transform .12s}
.st-ops button:active,.st-sn button:active,.st-ordem>button:active,.st-marca>button:active{transform:scale(.98)}
.st-ops button.ok,.st-ordem>button.ok{border-color:var(--ok);background:rgba(58,209,122,.18)}
.st-ops button.no{border-color:var(--danger);background:rgba(255,84,112,.16)}
.st-ops button:disabled{cursor:default}
.st-exp{margin:0;padding:12px 14px;border-radius:14px;background:rgba(0,0,0,.25);font-size:calc(var(--k) * 15px);line-height:1.45;animation:stEntra .35s both}
.st-exp b{color:var(--gold2)}
.st-sn{flex-direction:row}
.st-sn button{flex:1;justify-content:center;text-align:center}
.st-sn button.on{border-color:var(--gold);background:rgba(245,197,66,.2)}
.st-pn{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1.5px dashed rgba(255,224,138,.5);color:#1a0e2e;font-weight:800;font-size:14px}
.st-ordem>button.ok .st-pn{background:var(--gold);border-style:solid;border-color:var(--gold)}
.st-ordem>button.erro{animation:stTreme .4s}
@keyframes stTreme{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.cutuca{animation:stTreme .45s}
.st-marca>button.on{border-color:var(--ok);background:rgba(58,209,122,.14)}
.st-marca .bx{flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;border:2px solid rgba(255,224,138,.5);color:transparent}
.st-marca>button.on .bx{background:var(--ok);border-color:var(--ok);color:#0c2a18}
.st-priv{text-align:center;color:var(--muted);font-size:12.5px}

/* ---------- passos ---------- */
.st-passos{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:10px}
.st-passos li{display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,224,138,.18)}
.st-passos .st-pn{width:40px;height:40px;font-size:18px;border:0;background:linear-gradient(180deg,var(--gold2),var(--gold));font-family:Cinzel,serif}
.st-passos .st-mi{width:52px}
.st-passos .st-mi b{font-size:28px}
.st-passos li>div{display:flex;flex-direction:column;gap:2px}
.st-passos b{font-size:calc(var(--k) * 16px);font-weight:600;line-height:1.3}
.st-passos li>div>span{font-size:calc(var(--k) * 14px);color:var(--muted);line-height:1.4}
.st-passos.sem li{padding:12px 14px}
.st-passos.sem .st-pn{width:12px;height:12px;font-size:0}

/* ---------- citação, aviso ---------- */
.st-cit{margin:0;position:relative;padding:26px 22px 20px;border-radius:22px;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(255,224,138,.3);text-align:center}
.st-aspas{position:absolute;top:-24px;left:50%;transform:translateX(-50%);font-family:Cinzel,serif;font-size:76px;line-height:1;color:var(--gold)}
.st-cit blockquote{margin:0;font-family:Cinzel,serif;font-weight:600;font-size:calc(var(--k) * clamp(18px,5.4vw,22px));line-height:1.45;color:#fff;text-wrap:balance}
.st-cit figcaption{margin-top:12px;font-size:14px;font-weight:600;color:var(--gold2)}
.st-cit figcaption::before{content:"· "}
.st-aviso{display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 20px;border-radius:22px;background:rgba(255,255,255,.05);border:1px solid rgba(255,224,138,.3);text-align:center}
.st-aviso-ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(245,197,66,.2);color:var(--gold2);font-weight:800;font-size:22px;font-family:Cinzel,serif}
.st-aviso b{font-family:Cinzel,serif;color:var(--gold2);font-size:16px}
.st-aviso p{margin:0;font-size:calc(var(--k) * 16px);line-height:1.5}

/* ---------- cartão-resumo ---------- */
.st-res{width:100%;display:flex;flex-direction:column;align-items:center;gap:14px}
.st-card{position:relative;width:100%;padding:22px 20px 18px;border-radius:22px;text-align:left;
  background:radial-gradient(90% 60% at 50% 0%,var(--accsoft,rgba(245,197,66,.18)),transparent 70%),linear-gradient(180deg,#2a1450,#160a2b 60%,#0c0420);
  border:1.5px solid rgba(255,224,138,.55);box-shadow:0 18px 40px rgba(0,0,0,.45),inset 0 0 0 6px rgba(255,224,138,.06)}
.st-card-eye{font-size:11.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--gold2);text-align:center}
.st-card h3{margin:6px 0 14px;font-family:Cinzel,serif;font-size:calc(var(--k) * 21px);line-height:1.2;text-align:center;color:#fff}
.st-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.st-card li{display:flex;gap:10px;align-items:flex-start;font-size:calc(var(--k) * 15.5px);line-height:1.38}
.st-card li svg{flex:none;margin-top:1px;padding:3px;border-radius:50%;background:var(--acc,var(--gold));color:#1a0e2e;width:22px;height:22px}
.st-card-pe{margin-top:14px;text-align:center;font-family:Cinzel,serif;font-size:12px;color:var(--gold2);opacity:.85}
.st-salvar{display:inline-flex;align-items:center;gap:8px;justify-content:center;min-height:52px;padding:0 22px}

/* ---------- fim ---------- */
.st-fim{width:100%;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.st-fim-ok{display:flex;flex-direction:column;align-items:center;gap:6px}
.st-fim-ic{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,var(--ok),#1f9a55);color:#0c2a18;box-shadow:0 0 0 8px rgba(58,209,122,.15),0 0 40px rgba(58,209,122,.35)}
.st-fim h2{margin:8px 0 0;font-family:Cinzel,serif;font-size:calc(var(--k) * 26px)}
.st-fim-ok p{margin:0;color:var(--muted);font-size:15px}
.st-prox{width:100%;display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;border-radius:20px;cursor:pointer;color:var(--ink);font:inherit;text-align:left;
  background:linear-gradient(160deg,rgba(245,197,66,.22),rgba(245,197,66,.06));border:1.5px solid var(--gold)}
.st-prox-art{flex:none;width:64px;height:64px;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.08)}
.st-prox-art img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.st-prox-tx{flex:1;display:flex;flex-direction:column;gap:3px}
.st-prox-tx small{font-size:12px;color:var(--gold2);font-weight:700}
.st-prox-tx b{font-size:calc(var(--k) * 16px);line-height:1.3}
.st-prox-fim{width:100%;min-height:52px}
.st-fim-acoes{width:100%;display:flex;flex-direction:column;gap:8px}
.st-fim-acoes button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:14px;border:1px solid rgba(255,224,138,.25);background:rgba(255,255,255,.05);color:var(--ink);font:600 14.5px Poppins,sans-serif;cursor:pointer}

/* ---------- telas baixas (≤ 700px de altura) ---------- */
@media (max-height:700px){
  .st-s{gap:8px;padding-top:0;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .st-capa-kit .st-art{height:clamp(160px,34vh,260px)}
  .st-capa h1{margin:6px 0 4px}
  .st-dica{margin:10px 0 calc(16px + env(safe-area-inset-bottom,0px))}
  .st-info{--ih:36vh}
  .st-pares{gap:7px}
  .st-par{padding:5px 12px 5px 6px;gap:10px}
  .st-par .st-mi{width:42px}
  .st-par .st-mi b{font-size:22px}
  .st-par-tx>span{font-size:calc(var(--k) * 14.5px)}
  .st-linha{gap:8px}
  .st-linha li{gap:3px}
  .st-lt{font-size:calc(var(--k) * 14.5px);line-height:1.35}
  .st-card{padding:16px 16px 14px}
  .st-card h3{margin:4px 0 10px}
  .st-card ul{gap:7px}
  .st-t.st-g{font-size:calc(var(--k) * clamp(23px,6.8vw,28px))}
  .st-s:has(.st-chips) .st-art,.st-s:has(.st-d) .st-art{height:clamp(120px,27vh,200px)}
  .st-chip{padding:6px 11px}
  .st-art{height:clamp(140px,32vh,240px)}
  .st-art.st-art-sm{height:clamp(90px,18vh,150px)}
  .st-cap{min-height:62px}
  .st-ops button,.st-sn button,.st-ordem>button,.st-marca>button{min-height:48px;padding:10px 14px}
}
@media (prefers-reduced-motion:reduce){
  .st-s.in .st-a,.st-s.in .st-dica,.st-capa-bg img,.st-art-kit::after,.st-pin i,.st-s.in .st-linha::before,.st-s.in   .st-rev-in{transition:none}
  .st-s.in .st-a,.st-s.in .st-dica,.st-capa-bg img,.st-art-kit::after,.st-art-emo::after,.st-pin i,.st-s.in .st-linha::before,.st-cap-in,.st-exp{animation:none!important}   /* QA Larissa 25/10: só zerava transition; o movimento aqui é animation */
}
/* "Ver em telas" no leitor de texto */
.lei-vst{display:inline-flex;align-items:center;gap:6px}

/* sem emoji: brilho dourado (svg) e amostras de cor */
.st-orn{width:1em;height:1em;fill:var(--gold2);filter:drop-shadow(0 0 10px rgba(245,197,66,.55))}
.st-emo .st-orn{width:clamp(64px,13vh,110px);height:clamp(64px,13vh,110px)}
.st-mi b .st-orn{width:clamp(28px,8vw,38px);height:clamp(28px,8vw,38px)}
.st-cor{display:block!important;width:clamp(96px,18vh,150px);height:clamp(96px,18vh,150px);border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),transparent 42%),var(--c);border:3px solid rgba(255,224,138,.7);box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 8px rgba(255,224,138,.08)}
.st-mi-cor b{display:block!important;width:62%;height:62%;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),transparent 45%),var(--c);border:2px solid rgba(255,224,138,.7)}
.st-ponto{flex:none;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px rgba(255,224,138,.25)}

/* medalhão (arte da capa) nas telas só de texto, pra não flutuar no roxo vazio */
.st-medalha{flex:none;width:clamp(84px,14vh,120px);aspect-ratio:1;border-radius:50%;overflow:hidden;border:2px solid rgba(255,224,138,.6);box-shadow:0 10px 28px rgba(0,0,0,.45),0 0 0 8px rgba(255,224,138,.07);background:radial-gradient(circle,rgba(255,224,138,.25),transparent 70%)}
.st-medalha img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.st-medalha.kit{border:0;box-shadow:none;overflow:visible}
.st-medalha.kit img{object-fit:contain;filter:drop-shadow(0 8px 18px rgba(0,0,0,.45))}
.st-medalha.falhou{display:none}
.st-k-cit .st-medalha{margin-bottom:14px}
@media (max-height:700px){.st-medalha{width:clamp(64px,11vh,90px)}}

/* QA Larissa 25/10: com áudio tocando, o mini-player (#aplayer, fixo embaixo) cobria opções do quiz, "Sim, sou eu", "Salvar este cartão" e o fim.
   Dentro dos stories o controle é o botão de som do topo (pausa/retoma); o player volta ao fechar. */
body:has(#st) #aplayer{display:none}

/* ---------- fase 4.1 (24/10): "saber mais" + música ambiente ---------- */
.st-mais-b{position:relative;z-index:2;align-self:center;display:inline-flex;align-items:center;gap:8px;max-width:100%;min-height:40px;padding:7px 15px 7px 8px;border-radius:999px;
  border:1px solid rgba(255,224,138,.5);background:rgba(255,224,138,.09);color:var(--gold2);font:600 calc(var(--k) * 14px)/1.25 Poppins,sans-serif;text-align:left;cursor:pointer;
  box-shadow:0 0 0 0 rgba(245,197,66,.4)}
.st-mais-b>span:last-child{overflow:hidden;text-overflow:ellipsis}
.st-mais-ic{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--gold);color:#1a0e2e;font:800 17px/1 Poppins,sans-serif}
.st-s.in .st-mais-b:not(.visto){animation:stEntra .5s cubic-bezier(.2,.8,.2,1) both .36s,stMaisPulsa 2.6s ease-in-out 1.4s 2}
.st-mais-b.visto{opacity:.72}
.st-mais-b.visto .st-mais-ic{background:rgba(255,224,138,.35);color:var(--ink)}
@keyframes stMaisPulsa{0%,100%{box-shadow:0 0 0 0 rgba(245,197,66,0)}50%{box-shadow:0 0 0 7px rgba(245,197,66,.16)}}
.st-veu{position:absolute;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center;padding:0 10px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(8,3,20,.55);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.st-veu[hidden]{display:none}
.st-folha{width:100%;max-height:72%;overflow-y:auto;padding:18px 20px 16px;border-radius:22px;background:linear-gradient(180deg,#311a5c,#1d0f3a);border:1px solid rgba(255,224,138,.4);
  box-shadow:0 -10px 40px rgba(0,0,0,.5);animation:stFolha .32s cubic-bezier(.2,.8,.2,1) both}
.st-folha-eye{display:inline-flex;align-items:center;gap:6px;color:var(--gold2);font-size:11.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase}
.st-folha h3{margin:8px 0 8px;font-family:Cinzel,serif;font-size:calc(var(--k) * 20px);line-height:1.25;color:#fff;text-wrap:balance}
.st-folha p{margin:0 0 16px;font-size:calc(var(--k) * 16px);line-height:1.55;color:var(--ink);text-wrap:pretty}
.st-folha-ok{width:100%;min-height:48px}
@keyframes stFolha{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}

/* botão da música ambiente (topo) + aviso de 1ª vez */
.st-hb[hidden]{display:none}   /* QA Larissa B1: o display:grid do .st-hb vencia o [hidden] e o botão aparecia em aula sem trilha */
.st-mus{position:relative}
.st-mus svg{width:20px;height:20px}
.st-mus.off{color:rgba(244,238,255,.55)}
.st-mus.toca::after{content:"";position:absolute;right:6px;top:6px;width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 6px var(--gold)}
.st-mus-dica{position:absolute;right:12px;top:calc(100% - 2px);z-index:6;max-width:250px;padding:8px 12px;border-radius:12px;background:#2d1855;border:1px solid rgba(255,224,138,.45);
  color:var(--ink);font:500 12.5px/1.35 Poppins,sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.45);animation:stEntra .35s both;pointer-events:none}
.st-mus-dica b{color:var(--gold2)}
@media (prefers-reduced-motion:reduce){
  .st-s.in .st-mais-b:not(.visto),.st-folha,.st-mus-dica{animation:none!important}
}
@media (max-width:374px){   /* 360: cabem fechar, título, música, ouvir e "Ler tudo" */
  .st-hd{gap:4px}
  .st-x,.st-hb{min-width:38px}
  .st-ler{padding:0 8px;gap:4px}
}
/* tela com "saber mais" (ou segunda linha) em celular baixo: a arte e os respiros cedem antes do texto (varredura 360×640/740, 24/10) */
.st-s:has(.st-mais-b){gap:clamp(8px,1.7vh,16px)}
.st-s:has(.st-mais-b)>.st-art.st-art-sm{height:clamp(80px,18vh,180px);min-height:70px}
.st-s:has(.st-mais-b)>.st-art:not(.st-art-sm){height:clamp(130px,32vh,320px)}
.st-s:has(.st-mais-b) .st-info{--ih:38vh}
@media (max-height:760px){
  .st-mais-b{min-height:36px;padding:5px 13px 5px 6px;font-size:calc(var(--k) * 13px)}
  .st-mais-ic{width:22px;height:22px;font-size:16px}
  .st-s:has(.st-mais-b) .st-passos{gap:7px}
  .st-s:has(.st-mais-b) .st-passos li{padding-top:7px;padding-bottom:7px}
  .st-s:has(.st-mais-b) .st-lado{padding:10px 8px;gap:6px}
  .st-s:has(.st-mais-b) .st-info{--ih:32vh}
  .st-s:has(.st-topo-d) .st-info{--ih:34vh}
}
@media (max-height:680px){ .st-s:has(.st-mais-b) .st-lado li{font-size:calc(var(--k) * 13px);padding-top:5px} .st-s:has(.st-mais-b) .st-lado h3{font-size:calc(var(--k) * 16px)} }