/* Página pública do método (/metodo) — animação para o juízo (05/10/2026).
   Identidade da landing (public/inicio.css): navy #1A2B4A, ouro #C9A227, Libre
   Franklin hospedada. A CSP só aceita estilo do próprio domínio: nada inline. */
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/fontes/libre-franklin-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/fontes/libre-franklin-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --navy:#1A2B4A; --navy-escuro:#0F1622; --acao:#35507A; --aco:#868D99; --aco-claro:#D0D5DE;
  --tinta:#1C2430; --cinza:#5C6675; --fundo:#F4F6F8; --superficie:#FFFFFF; --borda:#D3D9E0; --ouro:#C9A227;
  --ui:"Libre Franklin",system-ui,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--fundo)}
body{margin:0;font-family:var(--ui);color:var(--tinta);background:var(--fundo);font-size:16.5px;line-height:1.6}
a{color:var(--acao)}
p{margin:0 0 14px}

.mt-topo{background:var(--navy);padding:12px max(16px,calc(50% - 520px))}
.mt-marca{display:inline-flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
.mt-marca img{display:block}
.mt-marca b{display:block;font-size:21px;font-weight:800;line-height:1.1}
.mt-marca b span{font-weight:400}
.mt-marca small{display:block;color:#c5cdda;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}

main{max-width:1040px;margin:0 auto;padding:0 16px}
.mt-intro{padding:28px 0 8px;max-width:760px}
.mt-sobrelinha{color:var(--cinza);font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
h1{font-size:clamp(26px,4.2vw,38px);line-height:1.15;color:var(--navy);margin:0 0 12px}
.mt-h1-sub{display:block;font-size:.55em;font-weight:700;color:var(--acao);margin-top:6px}
h2{font-size:22px;color:var(--navy);margin:32px 0 10px}

/* palco: 16:9, a cena é SVG e a legenda é HTML por cima (entra no MP4 junto) */
.mt-player{margin:12px 0 0}
.mt-palco{position:relative;width:100%;aspect-ratio:16/9;background:#fff;border:1px solid var(--borda);border-radius:10px;overflow:hidden}
.mt-palco svg{display:block;width:100%;height:100%}
.mt-legenda{position:absolute;left:5%;right:5%;bottom:3.2%;text-align:center;pointer-events:none}
.mt-legenda span{display:inline;background:rgba(15,22,34,.86);color:#fff;font-size:clamp(12px,2.05vw,24px);line-height:1.5;padding:.12em .45em;border-radius:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.mt-legenda.oculta{display:none}
.mt-assistir{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--navy);color:#fff;border:0;border-radius:10px;font:700 clamp(15px,2.4vw,22px) var(--ui);padding:.7em 1.4em;cursor:pointer;box-shadow:0 6px 24px rgba(15,22,34,.25)}
.mt-assistir:hover{background:var(--acao)}
.mt-assistir[hidden]{display:none}

.mt-controles{display:flex;align-items:center;gap:12px;margin-top:10px}
.mt-controles button{min-width:44px;min-height:44px;border:1px solid var(--borda);background:#fff;color:var(--navy);border-radius:8px;font:600 15px var(--ui);cursor:pointer;padding:0 12px}
.mt-controles button[aria-pressed="false"]{color:var(--aco)}
.mt-barra{flex:1;height:10px;background:var(--aco-claro);border-radius:5px;position:relative;cursor:pointer}
.mt-barra-cheia{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--navy);border-radius:5px}
.mt-barra i{position:absolute;top:-3px;bottom:-3px;width:2px;background:#fff}
.mt-tempo{font-variant-numeric:tabular-nums;color:var(--cinza);font-size:14px;min-width:84px;text-align:right}

.mt-capitulos{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mt-capitulos button{width:100%;min-height:44px;text-align:left;background:#fff;border:1px solid var(--borda);border-radius:8px;padding:8px 12px;font:500 14.5px var(--ui);color:var(--tinta);cursor:pointer}
.mt-capitulos button b{color:var(--navy);margin-right:6px}
.mt-capitulos button.ativo{border-color:var(--navy);box-shadow:inset 3px 0 0 var(--ouro)}
.mt-links{margin:14px 0 0;font-size:15px}

.mt-texto{max-width:780px;padding-bottom:24px}
.mt-texto h3{font-size:17px;color:var(--navy);margin:20px 0 6px}
.mt-tabela-rolagem{overflow-x:auto}
.mt-tabela{border-collapse:collapse;width:100%;font-size:14.5px;background:#fff}
.mt-tabela th,.mt-tabela td{border:1px solid var(--borda);padding:7px 10px;text-align:left;vertical-align:top}
.mt-tabela th{background:#EBEEF2;color:var(--navy)}
.mt-tabela td:nth-child(2){white-space:nowrap;font-variant-numeric:tabular-nums}
.mt-classe{font-size:12px;font-weight:700;letter-spacing:.05em}

.mt-rodape{background:var(--navy);color:#c5cdda;font-size:14px;padding:18px max(16px,calc(50% - 520px));margin-top:24px}
.mt-rodape p{margin:0}
.mt-rodape a{color:#fff}

@media (max-width:640px){
  .mt-capitulos{grid-template-columns:1fr 1fr}
  .mt-tempo{min-width:0}
}

/* Gravação do MP4 (scripts/metodo-gravar.mjs, ?gravar=1): só o palco, 1280×720 */
body.gravando{background:#fff}
body.gravando .mt-topo,body.gravando .mt-intro,body.gravando .mt-controles,body.gravando .mt-capitulos,
body.gravando .mt-links,body.gravando .mt-texto,body.gravando .mt-rodape,body.gravando .mt-assistir{display:none}
body.gravando main{max-width:none;padding:0}
body.gravando .mt-player{margin:0}
body.gravando .mt-palco{width:1280px;height:720px;border:0;border-radius:0}
body.gravando .mt-legenda span{font-size:27px}