/* ============================================================
   SAÚDE EM SÉRIE — versão INSTAGRAM (player vertical 9:16, stories)
   Episódios completos no Instagram com capa nativa e navegação por setas.
   ============================================================ */
:root{
  --void:#080d1c;--ink:#f4f7fc;--muted:#9aa6c4;
  --accent:#ff4719;--orange:#ff4304;--yellow:#ffc400;--blue:#0a63c9;--blue-deep:#063f93;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:#05080f;color:var(--ink);font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden;
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:inherit;text-decoration:none}

.viewer{position:fixed;inset:0;display:grid;place-items:center;overflow:hidden}
.backdrop{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;filter:blur(46px) brightness(.35);transform:scale(1.25);transition:background-image .25s}

/* palco 9:16 */
.stage{position:relative;z-index:2;aspect-ratio:9/16;height:min(96vh,880px);background:#0a0f1e;overflow:hidden;border-radius:20px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8);outline:1px solid rgba(255,255,255,.06)}
.frame{position:absolute;inset:0;background:#0a0f1e;pointer-events:none}
.frame-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:1;transition:opacity .25s}
.frame::before{content:"";position:absolute;inset:0;z-index:2;background:
  linear-gradient(180deg,rgba(5,8,15,.75) 0%,transparent 18%,transparent 62%,rgba(5,8,15,.92) 100%);pointer-events:none}

/* barras de progresso segmentadas */
.segs{position:absolute;top:10px;left:10px;right:10px;z-index:6;display:flex;gap:5px}
.seg{flex:1;height:3px;border-radius:99px;background:rgba(255,255,255,.3);overflow:hidden}
.seg i{display:block;height:100%;width:0;background:#fff;border-radius:99px}

/* header */
.head{position:absolute;top:26px;left:14px;right:14px;z-index:6;display:flex;align-items:center;gap:11px}
.av{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;font-family:'Archivo';font-weight:800;font-size:.85rem;
  background:linear-gradient(135deg,var(--orange),var(--yellow));color:#1a0702;
  box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 0 4px rgba(255,67,4,.5)}
.who{flex:1;min-width:0;line-height:1.2}
.who b{font-family:'Archivo';font-weight:800;font-size:.9rem;display:block}
.who span{font-size:.74rem;color:rgba(255,255,255,.75)}
.who span em{font-style:normal;color:var(--yellow);font-weight:600}
.x{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;background:rgba(0,0,0,.3);color:#fff}
.x:hover{background:rgba(0,0,0,.5)}

/* zonas de toque + setas */
.nav-arrow{position:absolute;top:50%;z-index:7;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.22);color:#fff;
  backdrop-filter:blur(6px);transition:background .18s, transform .12s}
.nav-arrow:hover{background:rgba(0,0,0,.58)}
.nav-arrow:active{transform:translateY(-50%) scale(.94)}
.nav-arrow:disabled{opacity:.28;pointer-events:none}
.nav-prev{left:12px}
.nav-next{right:12px}
.tap{position:absolute;top:0;bottom:0;z-index:4;width:35%}
.tap.left{left:0}.tap.right{right:0;width:65%}

/* botão play central → abre no Instagram */
.center-play{position:absolute;left:50%;top:50%;z-index:5;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;
  display:grid;place-items:center;background:rgba(0,0,0,.48);border:1px solid rgba(255,255,255,.28);color:#fff;
  backdrop-filter:blur(6px);cursor:pointer;transition:transform .12s, background .18s}
.center-play:hover{background:rgba(0,0,0,.62)}
.center-play:active{transform:translate(-50%,-50%) scale(.94)}
.center-play svg{width:32px;height:32px;fill:currentColor;margin-left:3px}
.stage.is-paused .center-play{box-shadow:0 0 0 6px rgba(255,255,255,.12)}

/* legenda + ações */
.caption{position:absolute;left:18px;right:18px;bottom:104px;z-index:6}
.tagline{display:inline-flex;align-items:center;gap:7px;padding:4px 11px;border-radius:99px;margin-bottom:11px;
  background:rgba(255,67,4,.9);font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.caption h2{font-family:'Archivo';font-weight:900;font-size:1.45rem;line-height:1.12;letter-spacing:-.01em;margin:0 0 7px;
  text-shadow:0 2px 18px rgba(0,0,0,.6);text-wrap:balance}
.caption p{margin:0;font-size:.92rem;color:rgba(255,255,255,.85);line-height:1.45;text-shadow:0 1px 10px rgba(0,0,0,.5)}

.actions{position:absolute;left:18px;right:18px;bottom:22px;z-index:6;display:flex;gap:10px;align-items:center}
.cta{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px;border-radius:14px;font-weight:700;font-size:.95rem;
  background:#fff;color:#0a0f1e;box-shadow:0 12px 30px -10px rgba(0,0,0,.6);transition:transform .12s}
.cta:active{transform:scale(.97)}
.cta svg{width:18px;height:18px}
.icon-btn{width:50px;height:50px;border-radius:14px;flex:none;display:grid;place-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(6px)}
.icon-btn:active{transform:scale(.95)}
.icon-btn svg{width:22px;height:22px}

/* card final */
.endcard{position:absolute;inset:0;z-index:8;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:34px;
  background:radial-gradient(120% 80% at 50% 20%,rgba(255,67,4,.25),transparent 60%),linear-gradient(180deg,#0a0f1e,#05080f)}
.endcard.show{display:flex}
.endcard .ring{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;margin-bottom:8px;
  background:rgba(255,67,4,.14);border:1px solid rgba(255,67,4,.4);color:var(--accent)}
.endcard h3{font-family:'Archivo';font-weight:900;font-size:1.5rem;margin:0;letter-spacing:-.01em}
.endcard p{margin:2px 0 18px;color:var(--muted);font-size:.92rem;max-width:280px}
.endcard .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 22px;border-radius:13px;font-weight:700;width:100%;max-width:280px}
.endcard .btn.primary{background:linear-gradient(135deg,var(--orange),#ff6a1f);color:#fff;margin-bottom:10px}
.endcard .btn.ghost{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:var(--ink)}
.endcard .btn svg{width:18px;height:18px}
.endcard .replay{margin-top:14px;color:var(--muted);font-size:.85rem;display:inline-flex;align-items:center;gap:7px}

/* dica desktop */
.hint{position:fixed;left:0;right:0;bottom:18px;z-index:3;text-align:center;color:rgba(255,255,255,.4);font-size:.78rem}
@media (max-width:560px){
  .stage{height:100%;width:100%;max-height:none;border-radius:0;outline:none}
  .nav-arrow{width:40px;height:40px}
  .nav-prev{left:8px}
  .nav-next{right:8px}
  .hint{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}