/* O quadro vertical de prévia. Espelha o que o render queima: fontes, medidas
   e caixas vêm de lib/tipografia.py e lib/ritmo.py, em unidades do próprio
   quadro (1cqw = 10,8 px de um vídeo de 1080). Mudar aqui sem mudar lá faz a
   prévia mentir. */

@font-face{font-family:KortezTipo-montserrat;src:url("/fontes-estilos/montserrat/Montserrat-ExtraBold.otf");font-weight:800;font-display:swap}
@font-face{font-family:KortezTipo-inter;src:url("/fontes-estilos/inter/Inter-Regular.otf");font-weight:400;font-display:swap}
@font-face{font-family:KortezTipo-instrument;src:url("/fontes-estilos/instrumentserif/InstrumentSerif-Regular.ttf");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:KortezTipo-instrument-italic;src:url("/fontes-estilos/instrumentserif/InstrumentSerif-Italic.ttf");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:KortezTipo-revista;src:url("/fontes-estilos/dmserifdisplay/DMSerifDisplay-Regular.ttf");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:KortezTipo-sans500;src:url("/fontes-estilos/sans/KortezSans500.ttf");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:KortezTipo-sans650;src:url("/fontes-estilos/sans/KortezSans650.ttf");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:KortezTipo-sans750;src:url("/fontes-estilos/sans/KortezSans750.ttf");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:KortezTipo-documental;src:url("/fontes-estilos/documental/KortezDocumental.ttf");font-weight:400;font-style:normal;font-display:swap}

.quadro{container-type:inline-size;aspect-ratio:9/16;border-radius:10px;overflow:hidden;position:relative;
  background:linear-gradient(165deg,#1a1d20,#08090c);width:100%;max-width:14rem;margin-inline:auto;border:1px solid var(--linha)}
.q-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.quadro>*:not(.q-frame){z-index:1}
.quadro>.q-tipografico,.quadro>.q-legenda,.quadro>.q-gancho{position:absolute}

.q-gancho{left:0;right:0;display:flex;justify-content:center;transform:translateY(-50%)}
.q-gancho .txt{font-family:KortezTipo-montserrat,sans-serif;font-weight:800;color:#FFF;text-align:center;line-height:1.24;
  letter-spacing:.185cqw;padding:2.78cqw 4.17cqw;position:relative;white-space:pre-line;text-shadow:0 .28cqw 0 rgba(0,0,0,.5)}
.q-gancho[data-layout="painel"] .txt{background:rgba(11,17,16,.84);border-radius:.6cqw}
.q-gancho[data-layout="painel"] .txt::before{content:"";position:absolute;left:4.17cqw;top:-1.3cqw;width:8.89cqw;height:.74cqw;background:var(--acento-q);border-radius:.2cqw}
.q-gancho[data-layout="faixa"]{padding:0}
.q-gancho[data-layout="faixa"] .txt{background:var(--acento-q);color:#08110F;width:100%;border-radius:0;text-shadow:none}
.q-gancho[data-layout="solto"] .txt{background:none;-webkit-text-stroke:.55cqw rgba(8,14,13,.9);paint-order:stroke fill;text-shadow:0 .4cqw .6cqw rgba(0,0,0,.55)}
.q-gancho[data-layout="marcador"] .txt{background:none;padding:0;display:flex;flex-direction:column;gap:.5cqw;align-items:center}
.q-gancho[data-layout="marcador"] .txt i{font-style:normal;background:var(--acento-q);color:#08110F;padding:.35cqw 1.1cqw;border-radius:.5cqw;text-shadow:none}

.q-legenda{left:6%;right:6%;text-align:center;color:#FFF;font-family:KortezTipo-montserrat,sans-serif;font-weight:800;line-height:1.2;
  text-shadow:0 .3cqw 0 rgba(0,0,0,.55),0 0 1.2cqw rgba(0,0,0,.5)}
.q-legenda em{font-style:normal}
.q-legenda[data-estilo="podcast"],.q-legenda[data-estilo="hormozi"],.q-legenda[data-estilo="gobbi"]{line-height:1.379;text-shadow:0 .278cqw 0 #0008;transform:translateY(.68cqw)}
.q-legenda[data-estilo="lofi"]{font-weight:400;color:#F2EFE9}
.q-legenda[data-estilo="discreta"],.q-legenda[data-estilo="palavra-foco"],.q-legenda[data-estilo="tarja-leve"],.q-legenda[data-estilo="serifada"]{left:8.333%;right:8.333%;font-weight:400;line-height:1.32;text-shadow:0 .185cqw .3cqw #0008;color:#F8F7F2}
/* Contorno escuro da legenda (lib/styles.py, 23/09/2026): branco sem contorno
   sumia em camiseta branca e mesa clara. Metade do traço fica sob o
   preenchimento, por isso a largura aqui é o dobro da do ASS. */
.q-legenda[data-estilo="podcast"],.q-legenda[data-estilo="hormozi"],.q-legenda[data-estilo="gobbi"]{-webkit-text-stroke:.37cqw rgba(0,0,0,.62);paint-order:stroke fill}
.q-legenda[data-estilo="lofi"],.q-legenda[data-estilo="discreta"],.q-legenda[data-estilo="palavra-foco"],.q-legenda[data-estilo="serifada"]{-webkit-text-stroke:.185cqw rgba(0,0,0,.75);paint-order:stroke fill}
.q-legenda[data-estilo="tarja-leve"] .leg-texto{background:#161B1ACF;padding:.37cqw;box-decoration-break:clone;-webkit-box-decoration-break:clone;text-shadow:none}
.q-legenda[data-estilo="serifada"]{color:#FFF4D9}

.quadro[data-fundo="escuro"] .q-legenda,.quadro[data-fundo="escuro"] .q-gancho .txt{background:rgba(0,0,0,.72);color:#fff;text-shadow:none;padding:.4cqw 1cqw;border-radius:.5cqw;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.quadro[data-fundo="claro"] .q-legenda,.quadro[data-fundo="claro"] .q-gancho .txt{background:rgba(255,255,255,.9);color:#0D0E12;text-shadow:none;padding:.4cqw 1cqw;border-radius:.5cqw;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.q-barra-cine{position:absolute;left:0;right:0;height:7.8%;background:#000}
.q-tc{position:absolute;top:1.2cqw;right:1.6cqw;font:500 3.2cqw/1 var(--ui);color:rgba(255,255,255,.7);font-variant-numeric:tabular-nums;text-shadow:0 1px 2px #000}

.q-tipografico{left:10%;right:10%;font-weight:400;letter-spacing:0;font-kerning:none;font-variant-ligatures:none;text-shadow:0 .185cqw .3cqw #0008}
.q-tipografico .tipo-linha{display:block;white-space:nowrap}
.q-tipografico .tipo-texto{display:inline-block}
.q-tipografico[data-title-style="marcador-suave"],.q-tipografico[data-title-style="marcador"]{text-shadow:none}
.q-tipografico[data-title-style="documental"]:before{content:'';position:absolute;bottom:calc(100% + .22em);left:0;right:0;height:.185cqw;background:var(--tipo-cor)}