/* Video Lab: ilha de edição e folha de contato. Tinta quase preta sobre cinza
   quente, um vermelho de gravação como sinal, numerais de timecode em mono e a
   marca do lápis dermatográfico circulando o quadro que importa. Cor chapada. */
:root {
  --fundo: #e6e3dc; --sup: #f4f2ec; --sup2: #d9d5cb; --tinta: #141412; --tinta2: #3b3a36; --fraco: #6f6c64;
  --linha: rgba(20, 20, 18, .22); --cor: #e0301e; --cor-t: #fffdf8; --cor2: #ffd23f;
  --esc: #141412; --esc-t: #ece9e1; --esc-f: rgba(236, 233, 225, .72);
  --raio: 3px; --raio-p: 3px; --sombra: 0 0 0 transparent;
  --f-tit: 'Barlow Condensed', 'Arial Narrow', sans-serif; --f-txt: 'Archivo', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --tit-peso: 600; --tit-esp: -.012em;
  --dito: #2f5fd0; --feito: #e0301e; --lapis: #ffd23f;
  --furos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='18'%3E%3Crect x='7' y='5' width='10' height='8' rx='2' fill='%23e6e3dc'/%3E%3C/svg%3E");
  --furos-e: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='18'%3E%3Crect x='7' y='5' width='10' height='8' rx='2' fill='%23141412'/%3E%3C/svg%3E");
}
body { background: var(--fundo); }
h1 { font-size: clamp(2.7rem, 5vw, 4.6rem); line-height: .98; text-transform: none; }
h2 { font-size: clamp(2.1rem, 4vw, 3.5rem); line-height: 1; }
h3 { font-family: var(--f-tit); font-size: 1.42rem; line-height: 1.08; letter-spacing: 0; }
.heroi { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); }

/* A palavra que importa: vermelho de gravação e uma barra chapada por baixo, sem rabisco */
h1 em { font-style: normal; color: var(--cor); text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .1em; text-decoration-skip-ink: none; }

.topo { background: var(--fundo); backdrop-filter: none; border-bottom: 2px solid var(--tinta); }
.cassi { font-family: var(--f-txt); font-weight: 600; letter-spacing: -.02em; }
.prod { font: 700 1.25rem var(--f-tit); letter-spacing: .04em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; }
.rec { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--cor); animation: vl-rec 1.6s steps(2) infinite; }
.links a { font: 500 .78rem var(--f-mono); text-transform: uppercase; letter-spacing: .06em; }
.idiomas { border: 1.5px solid var(--tinta); background: none; }
.idiomas a[aria-current] { background: var(--tinta); color: var(--fundo); }
.sobre { font: 600 .74rem var(--f-mono); letter-spacing: .08em; color: var(--tinta); display: inline-block; background: var(--tinta); color: var(--fundo); padding: 4px 9px 4px 22px; position: relative; }
.sobre::before { content: ""; position: absolute; left: 8px; top: 13px; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--cor); }
.sec-esc .sobre { background: var(--cor2); color: var(--tinta); }
.lede { font-size: 1.1rem; }
.btn { border: 2px solid var(--tinta); background: none; font: 600 1.06rem var(--f-tit); letter-spacing: .06em; text-transform: uppercase; padding: 11px 20px; }
.btn:hover { transform: none; background: var(--tinta); color: var(--fundo); box-shadow: none; }
.btn-p { background: var(--cor); border-color: var(--cor); color: var(--cor-t); }
.btn-p::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--cor-t); }
.btn-p:hover { background: var(--tinta); border-color: var(--tinta); }
.btn-demo { border-style: dashed; }
.btn-demo::after { content: "↗"; font-family: var(--f-mono); font-size: .9em; }
.topo .btn { font-size: .95rem; padding: 7px 14px; }
.ilus { font-size: .68rem; letter-spacing: .04em; }

/* O palco é um monitor de ilha de edição entre duas fileiras de perfuração */
.palco { aspect-ratio: 4 / 3; background: #141412; border: 0; border-radius: 4px; box-shadow: none; }
.palco::before, .palco::after { content: ""; position: absolute; left: 0; right: 0; height: 18px; background: #141412 var(--furos) repeat-x left center; z-index: 5; }
.palco::before { top: 0; }
.palco::after { bottom: 0; }
.pc { inset: 18px 0; color: #ece9e1; }
.pc-abas { background: #141412; border-bottom: 1px solid #34332f; padding: 6px 10px; }
.pc-aba { border-radius: 2px; color: #96938a; border: 1px solid #34332f; }
.pc-aba i { color: var(--lapis); opacity: 1; }
.pc-aba b { font-family: var(--f-tit); font-weight: 600; font-size: .92rem; letter-spacing: .04em; text-transform: uppercase; }
.pc-aba small { font-size: .56rem; }
.pc-aba[aria-selected="true"] { background: #ece9e1; color: #141412; border-color: #ece9e1; }
.pc-aba[aria-selected="true"] i { color: var(--cor); }
.pc-prog { top: 0; background: var(--cor); height: 3px; z-index: 6; }
.cena { padding: 12px; font-family: var(--f-mono); background: #1c1b19; }

/* Peças comuns do palco */
.vl-t { font: 600 .58rem var(--f-mono); letter-spacing: .1em; color: #96938a; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.vl-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.vl-tc { font: 600 .74rem var(--f-mono); color: var(--lapis); letter-spacing: .04em; white-space: nowrap; }
.vl-rec { font: 700 .56rem var(--f-mono); color: #ff5a48; letter-spacing: .1em; display: inline-flex; align-items: center; gap: 5px; }
.vl-rec::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff5a48; animation: vl-rec 1.2s steps(2) infinite; }
.vl-mom { font: 400 .54rem var(--f-mono); color: #96938a; white-space: nowrap; }
.vl-toast { position: absolute; left: 50%; bottom: 14px; transform: translate(-50%, 16px); background: var(--lapis); color: #141412; font: 600 .62rem var(--f-mono); padding: 7px 11px; border-radius: 2px; white-space: nowrap; opacity: 0; transition: opacity .25s, transform .25s; z-index: 4; max-width: 94%; overflow: hidden; text-overflow: ellipsis; }
.vl-toast.on { opacity: 1; transform: translate(-50%, 0); }
.vl-toast.alto { bottom: auto; top: 6px; transform: translate(-50%, -16px); }
.vl-toast.alto.on { transform: translate(-50%, 0); }
.vl-lapis { position: absolute; inset: -5% -4%; border: 2.5px solid var(--lapis); border-radius: 50%; transform: rotate(-4deg); border-left-width: 1.5px; border-bottom-width: 3.5px; pointer-events: none; z-index: 2; }

/* Cena 1: entrada, a folha de contato enchendo */
.vl-in { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 9px; height: 100%; }
.vl-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.vl-stat { border: 1px solid #34332f; padding: 6px 9px; background: #141412; min-width: 0; }
.vl-stat b { display: block; font: 600 1.5rem/1 var(--f-tit); color: #ece9e1; letter-spacing: .02em; }
.vl-stat span { font-size: .52rem; color: #96938a; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vl-stat.al b { color: var(--lapis); }
.vl-folha { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 7px; min-height: 0; }
.vl-th { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 3px; min-height: 0; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; }
.vl-th.on { opacity: 1; transform: none; }
.vl-fr { position: relative; min-height: 0; border: 2px solid #ece9e1; background: #2a2926; }
.vl-fr svg { display: block; width: 100%; height: 100%; max-width: none; }
.vl-n, .vl-d { position: absolute; font: 600 .5rem var(--f-mono); background: #141412; color: #ece9e1; padding: 1px 4px; }
.vl-n { left: 0; top: 0; color: var(--lapis); }
.vl-d { right: 0; bottom: 0; }
.vl-meta { display: flex; justify-content: space-between; gap: 6px; font-size: .52rem; min-width: 0; }
.vl-meta b { font-weight: 500; color: #ece9e1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vl-meta code { font: 400 .5rem var(--f-mono); color: #96938a; }
.vl-chips { display: flex; gap: 3px; }
.vl-chips i { flex: 1; font: 600 .42rem var(--f-mono); font-style: normal; text-align: center; padding: 2px 0; border: 1px solid #34332f; color: #5d5b55; letter-spacing: .04em; transition: all .25s; white-space: nowrap; overflow: hidden; }
.vl-chips i.on { background: #ece9e1; border-color: #ece9e1; color: #141412; }
.vl-th.ok .vl-chips i.on { background: #6fd6a0; border-color: #6fd6a0; }
.vl-th.dup .vl-fr { border-color: var(--lapis); border-style: dashed; }
.vl-th.dup .vl-fr svg { opacity: .28; }
.vl-th.dup .vl-n { background: var(--lapis); color: #141412; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-6deg); font-size: .56rem; padding: 2px 6px; }
.vl-th.dup .vl-chips i { border-style: dashed; }
.vl-ch { position: absolute; left: 50%; bottom: -2px; transform: translate(-50%, 50%) rotate(-3deg); background: var(--lapis); color: #141412; font: 600 .5rem var(--f-mono); padding: 1px 6px; white-space: nowrap; z-index: 3; }
.vl-pe { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.vl-prog { height: 5px; background: #34332f; }
.vl-prog i { display: block; height: 100%; width: 0; background: var(--cor); transition: width 6.5s linear; }

/* Cena 2: o tocador, a transcrição e a ficha de KPI */
.vl-dec { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 9px 11px; height: 100%; }
.vl-player { grid-column: 1; grid-row: 1; display: grid; gap: 6px; min-width: 0; }
.vl-tela { position: relative; aspect-ratio: 16 / 9; border: 2px solid #ece9e1; background: #2a2926; overflow: hidden; }
.vl-tela svg { display: block; width: 100%; height: 100%; max-width: none; }
.vl-box { position: absolute; border: 2px solid #ff5a48; opacity: 0; transform: scale(1.12); transition: opacity .3s, transform .3s; }
.vl-box.on { opacity: 1; transform: none; }
.vl-box.sai { opacity: 0; }
.vl-box.r { border-color: var(--lapis); border-style: dashed; }
.vl-box span { position: absolute; left: -2px; bottom: 100%; background: #ff5a48; color: #141412; font: 600 .5rem var(--f-mono); padding: 1px 5px; white-space: nowrap; }
.vl-box.r span { background: var(--lapis); bottom: auto; top: 2px; left: 100%; }
.vl-box:nth-of-type(2) span { bottom: auto; top: 100%; }
.vl-box:nth-of-type(3) span { bottom: auto; top: -2px; left: 100%; }
.vl-tl { position: relative; height: 14px; display: grid; grid-template-columns: 1.2fr .8fr 1.4fr .9fr; gap: 2px; }
.vl-seg { background: #34332f; }
.vl-seg:nth-child(2) { background: #4a4843; }
.vl-tl u { position: absolute; top: -3px; bottom: -3px; left: 0; width: 2px; background: var(--cor); transition: left .43s linear; }
.vl-tl u::before { content: ""; position: absolute; top: -3px; left: -4px; border: 5px solid transparent; border-top-color: var(--cor); }
.vl-gap { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; border: 1px solid #34332f; background: #141412; align-self: start; opacity: .25; transition: opacity .4s; }
.vl-gap.on { opacity: 1; }
.vl-gap > div { padding: 7px 10px; min-width: 0; }
.vl-gap small { display: block; font: 600 .5rem var(--f-mono); letter-spacing: .1em; }
.vl-gap b { font: 600 1.35rem/1.05 var(--f-tit); color: #ece9e1; white-space: nowrap; }
.vl-gs small { color: #8fb0ff; }
.vl-gd { text-align: right; }
.vl-gd small { color: #ff8a7c; }
.vl-gap strong { align-self: center; font: 700 .58rem var(--f-mono); background: var(--lapis); color: #141412; padding: 4px 8px; transform: rotate(-3deg) scale(.6); opacity: 0; transition: all .35s; white-space: nowrap; }
.vl-gap.on strong { transform: rotate(-3deg); opacity: 1; }
.vl-trans { grid-column: 2; grid-row: 1; align-self: start; display: flex; flex-direction: column; gap: 6px; min-height: 0; border-left: 3px solid var(--dito); padding-left: 10px; }
.vl-falas { display: grid; gap: 7px; align-content: start; }
.vl-fl { font: 400 .68rem/1.35 var(--f-txt); color: #ece9e1; opacity: 0; transform: translateX(8px); transition: opacity .3s, transform .3s; }
.vl-fl.on { opacity: 1; transform: none; }
.vl-fl code { display: block; font: 600 .52rem var(--f-mono); color: #8fb0ff; }
.vl-kpi { grid-column: 2; grid-row: 1 / 3; align-self: end; background: #f4f2ec; color: #141412; padding: 9px 10px; display: flex; flex-direction: column; gap: 0; min-height: 0; border-radius: 2px; }
.vl-kh { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.vl-kh .vl-t { color: #6f6c64; }
.vl-cf { font: 600 .54rem var(--f-mono); color: #141412; white-space: nowrap; }
.vl-cp { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid rgba(20, 20, 18, .14); font: 400 .6rem var(--f-txt); min-width: 0; }
.vl-cp span { color: #3b3a36; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.vl-cp b { font: 600 .56rem var(--f-mono); padding: 2px 6px; border-radius: 2px; white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; }
.vl-cp.on b { opacity: 1; transform: none; }
.vl-cp.s b { background: #dbe5fb; color: #1d3f96; }
.vl-cp.d b { background: #fbdcd7; color: #a01f12; }
.vl-cp.u b { background: none; border: 1px dashed #6f6c64; color: #3b3a36; }
.vl-cp.r b { background: #ffe9a6; color: #6b4d00; }
.vl-fila { margin-top: 5px; font: 600 .52rem var(--f-mono); color: #6b4d00; opacity: 0; transition: opacity .3s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vl-fila.on { opacity: 1; }

/* Cena 3: matriz de fricção */
.vl-mx { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 9px; height: 100%; }
.vl-lg { font: 400 .54rem var(--f-mono); color: #96938a; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.vl-lg i { width: 9px; height: 9px; display: inline-block; margin-left: 6px; }
.vl-lg i.s, .vl-b.s i, .vl-ot i.s, .vl-cols i.s { background: #5b86ee; }
.vl-lg i.d, .vl-b.d i, .vl-ot i.d, .vl-cols i.d { background: #ff5a48; }
.vl-tb { display: grid; grid-auto-rows: minmax(0, 1fr); grid-template-rows: auto; min-height: 0; background: #141412; border: 1px solid #34332f; }
.vl-ln { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.3fr) 62px minmax(0, .95fr); gap: 10px; align-items: center; padding: 4px 10px; border-top: 1px solid #34332f; opacity: 0; transition: opacity .35s, background .3s; min-height: 0; }
.vl-ln.cab { opacity: 1; border-top: 0; padding: 5px 10px; }
.vl-ln.cab span { font: 600 .5rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #96938a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vl-ln.on { opacity: 1; }
.vl-ln.foco { background: #2a2926; box-shadow: inset 3px 0 0 var(--lapis); }
.vl-nm { font: 500 .66rem/1.25 var(--f-txt); color: #ece9e1; }
.vl-nm small { display: none; font: 400 .5rem var(--f-mono); color: var(--lapis); }
.vl-bs { display: grid; gap: 3px; }
.vl-b { display: grid; grid-template-columns: minmax(0, 1fr) 30px; gap: 6px; align-items: center; }
.vl-b i { display: block; height: 9px; width: 0; transition: width .7s cubic-bezier(.2, .7, .2, 1); }
.vl-b em { font: 500 .54rem var(--f-mono); font-style: normal; color: #ece9e1; text-align: right; }
.vl-dv { font: 600 .58rem var(--f-mono); text-align: center; padding: 3px 0; border: 1px solid #4a4843; color: #ece9e1; opacity: 0; transform: scale(.8); transition: opacity .3s, transform .3s; white-space: nowrap; }
.vl-ln.dv .vl-dv { opacity: 1; transform: none; }
.vl-dv.alto { background: var(--lapis); border-color: var(--lapis); color: #141412; }
.vl-ev { display: flex; align-items: center; gap: 6px; min-width: 0; }
.vl-ev i { width: 34px; height: 20px; border: 1.5px solid #ece9e1; flex: none; display: block; }
.vl-ev svg { display: block; width: 100%; height: 100%; max-width: none; }
.vl-ev code { font: 500 .52rem var(--f-mono); color: var(--lapis); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vl-rod { display: grid; grid-template-columns: .7fr 1.2fr 1.2fr; gap: 7px; }
.vl-q { border: 1px solid #34332f; background: #141412; padding: 6px 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 8px; align-items: center; min-width: 0; }
.vl-q span { font: 400 .54rem var(--f-mono); color: #96938a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vl-q b { font: 600 1.3rem/1 var(--f-tit); color: #ece9e1; grid-row: span 2; white-space: nowrap; }
.vl-q:first-child b { color: var(--lapis); }
.vl-q small { font: 400 .5rem var(--f-mono); color: #6fd6a0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vl-tr { height: 4px; background: #34332f; }
.vl-tr i { display: block; height: 100%; width: 0; background: #6fd6a0; transition: width 2.7s linear; }
.va.on b { color: #6fd6a0; }

/* Cena 4: entregas */
.vl-out { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 9px; height: 100%; }
.vl-out .vl-bar { justify-content: flex-start; }
.vl-out .vl-mom { margin-left: auto; }
.vl-ents { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8px; min-height: 0; }
.vl-en { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 10px; padding: 9px; border: 1px solid #34332f; background: #141412; min-height: 0; opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .35s, border-color .3s; }
.vl-en.on { opacity: 1; transform: none; }
.vl-en.ok { border-color: #6fd6a0; }
.vl-ex2 { display: flex; flex-direction: column; min-width: 0; }
.vl-ex2 h4 { font: 600 1.12rem/1.05 var(--f-tit); letter-spacing: .02em; text-transform: uppercase; color: #ece9e1; }
.vl-ex2 small { font: 400 .54rem/1.35 var(--f-mono); color: #96938a; margin-top: 4px; }
.vl-est { margin-top: auto; font: 600 .54rem var(--f-mono); color: var(--lapis); }
.vl-en.ok .vl-est { color: #6fd6a0; }
.vl-o { min-height: 0; min-width: 0; background: #f4f2ec; color: #141412; padding: 7px; display: grid; gap: 6px; overflow: hidden; border-radius: 2px; }
.vl-of { position: relative; min-height: 0; border: 1.5px solid #141412; }
.vl-of svg { display: block; width: 100%; height: 100%; max-width: none; }
.vl-of code { position: absolute; left: 0; bottom: 0; background: #141412; color: var(--lapis); font: 600 .46rem var(--f-mono); padding: 1px 4px; }
.vl-of .vl-lapis { inset: 12% 30% 40% 42%; border-color: var(--cor); border-width: 2px; }
.deck { grid-template-rows: minmax(0, 1fr) auto; }
.vl-ot { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vl-ot b { font: 600 .8rem/1.02 var(--f-tit); }
.vl-ot i { display: block; height: 6px; }
.vl-ot q { font: italic 400 .52rem/1.25 var(--f-txt); color: #3b3a36; margin-top: auto; quotes: none; }
.dash { grid-template-rows: auto minmax(0, 1fr); }
.vl-fs { display: flex; flex-wrap: wrap; gap: 3px; }
.vl-fs span { font: 500 .46rem var(--f-mono); padding: 2px 5px; border: 1px solid rgba(20, 20, 18, .3); border-radius: 99px; color: #6f6c64; transition: all .25s; white-space: nowrap; }
.vl-fs span.on { background: #141412; border-color: #141412; color: #f4f2ec; }
.vl-cols { display: flex; align-items: flex-end; gap: 4px; min-height: 0; border-bottom: 1.5px solid #141412; }
.vl-cols i { flex: 1; height: 0; transition: height .8s cubic-bezier(.2, .7, .2, 1); }
.base { grid-template-rows: minmax(0, 1fr) auto; }
.vl-cel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: rgba(20, 20, 18, .2); border: 1px solid rgba(20, 20, 18, .3); min-height: 0; overflow: hidden; align-content: start; }
.vl-cel span { background: #f4f2ec; font: 400 .48rem var(--f-mono); padding: 2px 4px; white-space: nowrap; overflow: hidden; }
.vl-cel span.h { background: #141412; color: #f4f2ec; font-weight: 600; }
.vl-cel span.u { color: #6f6c64; font-style: italic; }
.vl-ex { display: flex; gap: 4px; }
.vl-ex span { flex: 1; text-align: center; font: 600 .5rem var(--f-mono); padding: 3px 0; border: 1.5px solid #141412; transition: all .25s; }
.vl-ex span.on { background: var(--cor); border-color: var(--cor); color: #fffdf8; }
.clip { grid-template-rows: minmax(0, 1fr) auto; background: #2a2926; }
.clip .vl-of { border-color: #ece9e1; }
.clip .vl-tl { height: 5px; display: block; background: #4a4843; }
.clip .vl-tl u { transition: left 6s linear; top: -2px; bottom: -2px; }
.clip .vl-tl u::before { content: none; }
.vl-pro { position: absolute; left: 0; top: 0; background: var(--lapis); color: #141412; font: 700 .44rem var(--f-mono); padding: 2px 5px; letter-spacing: .04em; }
.vl-play { position: absolute; right: 6px; bottom: 6px; width: 0; height: 0; border: 6px solid transparent; border-left: 10px solid #fffdf8; border-right: 0; }

/* Balão de fala da participante: o que ela diz, ao lado da caixa do que ela faz */
.vl-balao { position: absolute; left: 3%; top: 5%; max-width: 38%; background: #fffdf8; color: #141412; border: 2px solid #141412; padding: 6px 9px 7px; font: 500 .66rem/1.3 var(--f-txt); opacity: 0; transform: translateY(6px) scale(.96); transition: opacity .3s, transform .3s; z-index: 3; border-radius: 3px; }
.vl-balao.on { opacity: 1; transform: none; }
.vl-balao::before { content: ""; position: absolute; right: -12px; top: 38%; border: 9px solid transparent; border-left: 14px solid #141412; border-right: 0; }
.vl-balao::after { content: ""; position: absolute; right: -7px; top: calc(38% + 2px); border: 7px solid transparent; border-left: 10px solid #fffdf8; border-right: 0; }
.vl-balao small { display: block; font: 700 .48rem var(--f-mono); letter-spacing: .1em; color: var(--dito); margin-bottom: 2px; }
.vl-box span[data-faz]::before { content: attr(data-faz) " · "; opacity: .75; }

/* Uma entrega real: o deck de resultados embutido, dentro do mesmo monitor perfurado */
#entrega-real .duas { align-items: end; }
.vl-real { position: relative; background: #141412; border-radius: 4px; padding: 18px 0; }
.vl-real::before, .vl-real::after { content: ""; position: absolute; left: 0; right: 0; height: 18px; background: var(--furos) repeat-x left center; }
.vl-real::before { top: 0; }
.vl-real::after { bottom: 0; }
.vl-real-tela { position: relative; aspect-ratio: 16 / 9; background: #1c1b19; border-top: 1px solid #34332f; border-bottom: 1px solid #34332f; overflow: hidden; }
.vl-real-tela iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #1c1b19; }
.vl-real-esp { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; color: #96938a; font: 600 .7rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; pointer-events: none; }
.vl-real-esp::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--cor); animation: vl-rec 1.2s steps(2) infinite; }
.vl-real-tela.ok .vl-real-esp { display: none; }
.vl-real-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px 6px; color: #96938a; }
.vl-real-bar .vl-t { color: #ece9e1; }
.vl-real-bar .vl-tc { color: var(--lapis); }
#entrega-real .cta { margin-top: 26px; }

/* A página: quatro quadros de uma folha de contato */
.tcs { counter-reset: qd; border: 0; background: var(--tinta); gap: 3px; padding: 22px 3px; border-radius: 3px; position: relative; overflow: visible; }
.tcs::before, .tcs::after { content: ""; position: absolute; left: 0; right: 0; height: 18px; background: var(--furos) repeat-x left center; }
.tcs::before { top: 2px; }
.tcs::after { bottom: 2px; }
.tc { counter-increment: qd; background: var(--sup); border: 0 !important; padding-top: 44px; position: relative; }
.tc::before { content: "0" counter(qd) "A"; position: absolute; left: 0; top: 0; background: var(--tinta); color: var(--cor2); font: 600 .66rem var(--f-mono); padding: 3px 8px; }
.tc .tag { border: 0; padding: 0; font-size: .66rem; color: var(--fraco); margin-bottom: 10px; display: block; }
.tc-cassi { background: var(--sup); }
.tc-cassi h3 { color: var(--tinta); }
.tc-cassi .tag { color: var(--cor); }
.tc-cassi::after { content: ""; position: absolute; left: -12px; top: -10px; width: 72px; height: 42px; border: 3px solid var(--cor); border-radius: 50%; transform: rotate(-6deg); border-left-width: 2px; border-bottom-width: 4.5px; pointer-events: none; }
.tc-cassi h3 { text-decoration: underline; text-decoration-color: var(--cor); text-decoration-thickness: 3px; text-underline-offset: 5px; }
blockquote { border-left: 0; padding-left: 0; font: 500 clamp(1.5rem, 2.7vw, 2.3rem)/1.12 var(--f-tit); font-style: normal; max-width: 30em; margin-top: 46px; }
blockquote::before { content: "“"; display: block; font: 700 3rem/.6 var(--f-tit); color: var(--cor); margin-bottom: 4px; }

.rl, .rl:last-child { border-color: var(--tinta); }
.rl h3 { font-size: clamp(1.4rem, 2.1vw, 1.85rem); }
.et b { color: var(--tinta); font-size: .72rem; }
.et b::before { content: "● "; color: var(--cor); }

/* Método: seis quadros numerados em timecode */
.pss { gap: 3px; background: none; }
.ps { border: 0; border-top: 3px solid var(--cor2); background: #1f1e1b; border-radius: 0; flex-direction: column; gap: 12px; padding: 22px 24px 26px; }
.ps .n { font: 600 .8rem var(--f-mono); color: var(--cor2); padding: 0; letter-spacing: .06em; }
.ps .n::before { content: "00:00:"; opacity: .45; }
.ps h3 { font-size: 1.6rem; }
.ps .gt { color: var(--cor2) !important; border-top: 1px dashed rgba(236, 233, 225, .25); padding-top: 10px; }
.sec-esc { position: relative; padding-top: clamp(72px, 9vw, 128px); padding-bottom: clamp(72px, 9vw, 128px); }
.sec-esc::before, .sec-esc::after { content: ""; position: absolute; left: 0; right: 0; height: 18px; max-width: none; background: var(--furos) repeat-x left center; margin: 0; }
.sec-esc::before { top: 14px; }
.sec-esc::after { bottom: 14px; }

.pv { background: none; border: 0; border-top: 3px solid var(--tinta); border-radius: 0; padding: 16px 0 0; }
.pv b { font: 600 clamp(2.8rem, 5vw, 4.6rem)/.95 var(--f-tit); color: var(--tinta); letter-spacing: -.01em; white-space: nowrap; }
.pv:nth-child(3) b { color: var(--cor); }
.pv span { display: block; line-height: 1.45; }
.pvs { gap: 28px; margin-bottom: 44px; }
.cx { background: var(--sup); border: 2px solid var(--tinta); }
.cx h3 { font-size: 1.9rem; }
.nao li::before { content: "✕"; color: var(--cor); }
.sim li::before { color: var(--tinta); }
.fqs, .fq { border-color: var(--tinta); }
.fq summary h3 { font-size: 1.45rem; }
.fq summary::after { color: var(--tinta); }
.fim { background: var(--tinta); color: var(--fundo); max-width: none; position: relative; }
.fim > p { color: var(--esc-f); }
.fim .btn { border-color: var(--fundo); color: var(--fundo); }
.fim .btn:hover { background: var(--fundo); color: var(--tinta); }
.fim .btn-p { border-color: var(--cor); }
.fim .mail a { color: var(--cor2); }
.rodape { border-top: 0; }

@keyframes vl-rec { 50% { opacity: .2; } }

@media (max-width: 1080px) { .heroi { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  h1 { line-height: 1 !important; font-size: clamp(2.5rem, 11.5vw, 3.2rem) !important; }
  h2 { font-size: clamp(1.9rem, 8.4vw, 2.5rem) !important; }
  .cassi { font-size: .95rem; }
  .palco { aspect-ratio: auto; height: min(140vw, 580px); }
  .pc-abas { padding: 5px 6px; }
  .pc-aba { padding: 5px 4px; }
  .pc-aba b { font-size: .74rem; line-height: 1.02; letter-spacing: .02em; }
  .pc-aba small { display: none; }
  .tcs { padding: 20px 3px; }
  .tc { border-bottom: 0 !important; }
  .pvs { gap: 22px 14px; }
  .pv b { font-size: 2.5rem; }

  .vl-in { gap: 7px; }
  .vl-stats { gap: 4px; }
  .vl-stat { padding: 5px 6px; }
  .vl-stat b { font-size: 1.2rem; }
  .vl-stat span { font-size: .46rem; }
  .vl-folha { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .vl-th:nth-child(n+10) { display: none; }
  .vl-meta code { display: none; }
  .vl-mom { display: none; }
  .vl-pe { grid-template-columns: auto minmax(0, 1fr); }
  .vl-toast { font-size: .56rem; white-space: normal; text-align: center; width: 90%; }

  .vl-dec { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); gap: 7px; }
  .vl-player, .vl-gap, .vl-kpi { grid-column: 1; grid-row: auto; }
  .vl-trans { display: none; }
  .vl-gap > div { padding: 4px 9px; }
  .vl-gap b { font-size: 1.1rem; }
  .vl-kpi { padding: 7px 9px; grid-row: auto; align-self: start; }
  .vl-cp { padding: 3px 0; }
  .vl-ln.cab span { letter-spacing: .02em; font-size: .46rem; }
  .vl-box span { font-size: .46rem; }
  .vl-balao { font-size: .56rem; max-width: 52%; padding: 4px 7px 5px; }
  .vl-balao small { font-size: .42rem; }
  .vl-real { padding: 16px 0; }
  .vl-real-bar { padding: 6px 10px 4px; }
  .vl-real-bar .vl-mom { display: none; }

  .vl-ln { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 54px; gap: 7px; padding: 4px 7px; }
  .vl-ev, .vl-ln.cab span:last-child { display: none; }
  .vl-nm { font-size: .62rem; }
  .vl-nm small { display: block; margin-top: 2px; }
  .vl-b { grid-template-columns: minmax(0, 1fr) 26px; gap: 4px; }
  .vl-dv { font-size: .52rem; }
  .vl-lg { font-size: .48rem; }
  .vl-rod { grid-template-columns: 1fr 1fr; gap: 5px; }
  .vl-q.rv2 { display: none; }
  .vl-q { padding: 5px 7px; }
  .vl-q b { font-size: 1.05rem; }

  .vl-ents { gap: 6px; }
  .vl-en { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 6px; padding: 6px; }
  .vl-ex2 h4 { font-size: .92rem; }
  .vl-ex2 small { display: none; }
  .vl-est { margin-top: 2px; }
  .vl-ot i { display: none; }
  .vl-ot b { font-size: .7rem; }
}
@media (prefers-reduced-motion: reduce) { .rec, .vl-rec::before { animation: none; } }