/* Portal de Vídeos Interplus. Folha única do site e das maquetes.
   Tokens de cor, fonte, canto e grade lidos em comercial.interplusfibra.com.br em 12/11/2026
   (ver site/REFERENCIAS-MEDIDAS.md). Tamanhos em rem: a TV só troca o tamanho da raiz. */

@font-face{font-family:'Sora';font-weight:400;font-style:normal;font-display:swap;src:url('../fontes/sora-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Sora';font-weight:600;font-style:normal;font-display:swap;src:url('../fontes/sora-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Sora';font-weight:700;font-style:normal;font-display:swap;src:url('../fontes/sora-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Sora';font-weight:800;font-style:normal;font-display:swap;src:url('../fontes/sora-latin-800-normal.woff2') format('woff2')}

/* ---------- temas ---------- */
:root{
  --fonte:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  --marca:#C8102E;--marca-forte:#A50D26;
  --raio:.5625rem;--raio-g:.875rem;--gap:.75rem;--gutter:1rem;--lado-l:15rem;--topo-a:3.5rem;--abas-a:4rem;
  /* claro (padrão) */
  --fundo:#f4f5f7;--cartao:#fff;--cartao-2:#f8f9fb;--borda:#e1e5eb;--linha:#e9ecf1;
  --tinta:#20252d;--tinta-2:#596472;--tinta-3:#5f6976; /* no comercial tinta-3 é #6b7582: mede 4,29:1 no fundo, abaixo do AA; aqui escurecida */
  --acento:#c8102e;--acento-fraco:#fbe7ea;--ok:#1f7446;--ok-fraco:#e3f2ea;--aviso:#8a5a00;--aviso-fraco:#fdf1d6;
  --lado:#171c24;--lado-2:#10141b;--lado-txt:#c8cfd8;--lado-fio:rgba(255,255,255,.1);
  --foco:#1d5bd8;
  --sombra:0 1px 2px rgba(20,21,23,.06),0 1px 1px rgba(20,21,23,.04);
  --sombra-alta:0 1px 2px rgba(20,21,23,.06),0 12px 28px -12px rgba(20,21,23,.22);
  color-scheme:light;
}
:root[data-tema="interplus"]{
  --fundo:#f7f5f6;--cartao-2:#fbf8f9;--borda:#e8e1e4;--linha:#efe9eb;
  --lado:#291b22;--lado-2:#1f1419;
}
:root[data-tema="escuro"]{
  --fundo:#10151d;--cartao:#1c222c;--cartao-2:#141b25;--borda:#303a49;--linha:#2b3441;
  --tinta:#edf1f7;--tinta-2:#bac3d1;--tinta-3:#9ba7b8;
  --acento:#ef6377;--acento-fraco:#3a1d26;--ok:#4fd1a1;--ok-fraco:#143328;--aviso:#f2c76b;--aviso-fraco:#3a2f14;
  --lado:#272e34;--lado-2:#1c2024;--lado-txt:#d6dde2;
  --foco:#8ab4ff;
  --sombra:0 1px 2px rgba(0,0,0,.3);--sombra-alta:0 1px 2px rgba(0,0,0,.3),0 14px 30px -14px rgba(0,0,0,.6);
  color-scheme:dark;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{font-size:100%;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--topo-a) + 1rem)}
body{font-family:var(--fonte);background:var(--fundo);color:var(--tinta);font-size:.9375rem;line-height:1.5;min-height:100vh;min-height:100dvh;overflow-wrap:anywhere}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
img,svg,video{display:block;max-width:100%}
ul,ol{list-style:none;padding:0}
[hidden]{display:none!important}
:focus{outline:0}
:focus-visible{outline:.1875rem solid var(--foco);outline-offset:.125rem;border-radius:.5rem}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pular{position:absolute;left:.5rem;top:-4rem;z-index:100;background:var(--cartao);color:var(--tinta);padding:.75rem 1rem;border-radius:.5rem;border:1px solid var(--borda);font-weight:700}
.pular:focus{top:.5rem}
.ico{width:1.25rem;height:1.25rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ico.cheio{fill:currentColor;stroke:none}

/* ---------- tipografia ---------- */
h1{font-size:clamp(1.375rem,1.1rem + 1.4vw,1.75rem);line-height:1.2;font-weight:700;letter-spacing:-.02em;text-wrap:balance}
h2{font-size:clamp(1.0625rem,1rem + .5vw,1.25rem);line-height:1.25;font-weight:700;letter-spacing:-.01em;text-wrap:balance}
h3{font-size:.9375rem;line-height:1.35;font-weight:700}
.rotulo{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-3);font-weight:700}
.sub{color:var(--tinta-2)}
.miudo{font-size:.8125rem;color:var(--tinta-2)}
.num{font-variant-numeric:tabular-nums}

/* ---------- casca: lateral, topo, miolo ---------- */
.lado{display:none}
.pag{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding-bottom:calc(var(--abas-a) + env(safe-area-inset-bottom))}
.topo{position:sticky;top:0;z-index:30;height:var(--topo-a);display:flex;align-items:center;gap:.75rem;padding:0 var(--gutter);background:var(--lado);color:#fff}
.topo .marca{display:flex;align-items:center;gap:.625rem;min-height:2.75rem;font-weight:700;letter-spacing:-.01em}
.topo .marca img{height:1.875rem;width:auto}
.topo .marca span{font-size:1rem;border-left:1px solid var(--lado-fio);padding-left:.625rem;white-space:nowrap}
.topo .busca{display:none}
.topo .esp{flex:1}
.topo .caminho{display:none}
.bt-ico{width:2.75rem;height:2.75rem;display:grid;place-items:center;border-radius:.625rem;color:inherit}
.bt-ico:hover{background:rgba(255,255,255,.1)}
.topo :focus-visible,.lado :focus-visible{outline-color:#8ab4ff}
.inicial{width:2.25rem;height:2.25rem;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.9375rem;background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.2)}
main{flex:1;width:100%;max-width:75rem;margin:0 auto;padding:1.25rem var(--gutter) 2.5rem}
main:focus,h1[tabindex="-1"]:focus{outline:0}
.pe{padding:1rem var(--gutter);color:var(--tinta-3);font-size:.8125rem;display:flex;gap:.5rem 1rem;flex-wrap:wrap;justify-content:space-between;border-top:1px solid var(--linha);max-width:75rem;width:100%;margin:0 auto}

/* abas de baixo (celular e tablet) */
.abas-baixo{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--cartao);border-top:1px solid var(--borda);padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -6px 18px -12px rgba(20,21,23,.25)}
.abas-baixo a{min-height:var(--abas-a);display:grid;place-items:center;align-content:center;gap:.125rem;font-size:.75rem;font-weight:700;color:var(--tinta-2);position:relative}
.abas-baixo a .ico{width:1.5rem;height:1.5rem}
.abas-baixo a[aria-current="page"]{color:var(--acento)}
.abas-baixo a[aria-current="page"]::before{content:"";position:absolute;top:0;left:25%;right:25%;height:.1875rem;border-radius:0 0 .1875rem .1875rem;background:var(--marca)}

/* painel da conta (tema e sair), abre pelo botão do topo no celular */
.conta-painel{position:fixed;z-index:60;top:calc(var(--topo-a) + .5rem);right:.5rem;width:min(20rem,calc(100vw - 1rem));background:var(--cartao);color:var(--tinta);border:1px solid var(--borda);border-radius:var(--raio-g);box-shadow:var(--sombra-alta);padding:1rem;display:grid;gap:.875rem}
.conta-painel .quem{display:grid;gap:.125rem}
.conta-painel .quem b{font-size:1rem}

/* seletor de tema */
.temas{display:grid;grid-template-columns:repeat(3,1fr);gap:.25rem;padding:.25rem;border-radius:.625rem;background:var(--cartao-2);border:1px solid var(--borda)}
.temas button{min-height:2.75rem;border-radius:.4375rem;font-size:.8125rem;font-weight:700;color:var(--tinta-2);padding:0 .125rem;white-space:nowrap}
.temas button[aria-pressed="true"]{background:var(--cartao);color:var(--tinta);box-shadow:0 0 0 1px var(--borda),var(--sombra)}
.lado .temas{background:rgba(0,0,0,.22);border-color:var(--lado-fio)}
.lado .temas button{color:var(--lado-txt);font-size:.75rem;letter-spacing:-.01em}
.lado .temas button[aria-pressed="true"]{background:rgba(255,255,255,.14);color:#fff;box-shadow:none}

/* ---------- botões, selos, cartões ---------- */
.btn{min-height:2.75rem;padding:0 1.125rem;border-radius:.625rem;border:1px solid var(--borda);background:var(--cartao);color:var(--tinta);font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;text-align:center;line-height:1.2}
.btn:hover{border-color:var(--tinta-3)}
.btn.pri{background:var(--marca);border-color:var(--marca);color:#fff;box-shadow:0 .375rem 1rem -.5rem rgba(200,16,46,.7)}
.btn.pri:hover{background:var(--marca-forte);border-color:var(--marca-forte)}
.btn.leve{background:none;border-color:transparent;color:var(--acento);padding:0 .5rem}
.btn.leve:hover{background:var(--acento-fraco)}
.btn[aria-disabled="true"],.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.g{min-height:3.25rem;font-size:1rem;padding:0 1.5rem}
.cartao{background:var(--cartao);border:1px solid var(--borda);border-radius:var(--raio);box-shadow:var(--sombra)}
.cartao.fio{box-shadow:inset 0 .125rem 0 0 var(--marca),var(--sombra)}
.selo{display:inline-flex;align-items:center;gap:.375rem;font-size:.75rem;font-weight:700;line-height:1;padding:.375rem .625rem;border-radius:62rem;background:var(--cartao-2);border:1px solid var(--borda);color:var(--tinta-2);white-space:nowrap}
.selo .ico{width:.875rem;height:.875rem;stroke-width:2.25}
.selo.ok{background:var(--ok-fraco);color:var(--ok);border-color:transparent}
.selo.at{background:var(--acento-fraco);color:var(--acento);border-color:transparent}
.prog{height:.5rem;border-radius:62rem;background:var(--linha);overflow:hidden}
.prog b{display:block;height:100%;background:var(--marca);border-radius:62rem;transition:width .4s ease}
.prog.cheia b{background:var(--ok)}
.aviso{display:flex;gap:.75rem;align-items:flex-start;padding:.875rem 1rem;border-radius:var(--raio);background:var(--aviso-fraco);color:var(--aviso);font-weight:700}
.aviso.erro{background:var(--acento-fraco);color:var(--acento)}
.vazio{display:grid;gap:.75rem;justify-items:start;padding:1.5rem;border:1px dashed var(--borda);border-radius:var(--raio);color:var(--tinta-2)}

/* seções que abrem e fecham (fechadas por padrão) */
details.abre{border:1px solid var(--borda);border-radius:var(--raio);background:var(--cartao)}
details.abre summary{list-style:none;cursor:pointer;min-height:3rem;padding:.625rem 1rem;display:flex;align-items:center;gap:.625rem;font-weight:700;border-radius:var(--raio)}
details.abre summary::-webkit-details-marker{display:none}
details.abre summary::after{content:"";margin-left:auto;width:.625rem;height:.625rem;border-right:.125rem solid var(--tinta-3);border-bottom:.125rem solid var(--tinta-3);transform:rotate(45deg) translate(-.125rem,-.125rem);transition:transform .2s ease}
details.abre[open] summary::after{transform:rotate(-135deg) translate(-.125rem,-.125rem)}
details.abre .corpo{padding:0 1rem 1rem;color:var(--tinta-2);display:grid;gap:.5rem}

/* ---------- capa do vídeo (arte própria em CSS, texto nativo) ---------- */
.capa{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--raio);overflow:hidden;color:#fff;isolation:isolate;background:linear-gradient(135deg,var(--c1,#1b2028) 0%,var(--c2,#C8102E) 100%)}
.capa::before{content:"";position:absolute;inset:0;z-index:-1;background:
  repeating-radial-gradient(circle at 104% -8%,transparent 0 1.75rem,rgba(255,255,255,.085) 1.75rem 1.8125rem),
  radial-gradient(circle at 0% 100%,rgba(0,0,0,.42),transparent 58%)}
.capa .n{position:absolute;left:7%;top:50%;transform:translateY(-54%);font-size:clamp(2.25rem,26cqw,6rem);font-weight:800;line-height:.9;letter-spacing:-.04em;text-shadow:0 .125rem .75rem rgba(0,0,0,.28)}
.capa .tipo{position:absolute;left:7%;right:6%;top:9%;font-size:clamp(.5625rem,4cqw,.75rem);font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.92;white-space:nowrap}
.capa .tempo{position:absolute;left:7%;bottom:11%;background:rgba(10,12,16,.62);padding:.1875rem .5rem;border-radius:62rem;font-size:clamp(.625rem,4.2cqw,.75rem);font-weight:700}
.capa .toca{position:absolute;right:6%;bottom:11%;width:clamp(1.75rem,15cqw,3rem);aspect-ratio:1;border-radius:50%;background:#fff;color:var(--marca);display:grid;place-items:center;box-shadow:0 .25rem .875rem rgba(0,0,0,.3)}
.capa .toca .ico{width:42%;height:42%;margin-left:8%}
.capa .feito{position:absolute;right:6%;bottom:11%;width:clamp(1.25rem,10cqw,1.75rem);aspect-ratio:1;border-radius:50%;background:#fff;color:#1f7446;display:grid;place-items:center}
.capa .feito .ico{width:62%;height:62%;stroke-width:3}
.capa .barra{position:absolute;left:0;right:0;bottom:0;height:.3125rem;background:rgba(255,255,255,.28)}
.capa .barra b{display:block;height:100%;background:#fff}
.capa-caixa{container-type:inline-size;display:block}
/* Capa estreita (até 12rem): a duração sai da capa, porque já está na linha de texto do cartão, e o número deixa de encostar nela. */
@container (max-width:12rem){.capa .tempo{display:none}}
@container (max-width:8.75rem){.capa .tipo,.capa .tempo{display:none}.capa .n{left:50%;transform:translate(-50%,-52%);font-size:34cqw}.capa .feito{right:7%;bottom:10%;width:22cqw}}
.k-aula{--c1:#1b2028;--c2:#C8102E}
.k-aula.alt1{--c1:#3d1620;--c2:#e23a4f}
.k-aula.alt2{--c1:#111419;--c2:#a50d26}
.k-podcast{--c1:#16233d;--c2:#3f78b8}
.k-podcast.alt1{--c1:#0f1a2e;--c2:#4b8fd6}

/* ---------- início: continuar ---------- */
.saud{display:grid;gap:.25rem;margin-bottom:1rem}
.aviso-reg{display:flex;gap:.5rem;align-items:flex-start;margin-top:.375rem;max-width:46rem;font-size:.8125rem;line-height:1.45;color:var(--tinta-2)}
.aviso-reg .ico{flex:none;width:1.125rem;height:1.125rem;margin-top:.0625rem;color:var(--tinta-3)}
.continuar{display:grid;gap:1rem;padding:.875rem;grid-template-columns:1fr}
.continuar .txt{display:grid;gap:.625rem;align-content:center;justify-items:start;padding:0 .25rem .25rem}
.continuar .acoes{display:flex;gap:.5rem;flex-wrap:wrap;width:100%}
.continuar .acoes .btn.pri{flex:1 1 14rem}

/* ---------- trilha: caminho com paradas ---------- */
.trilha-cab{display:grid;gap:.5rem;margin:1.5rem 0 1rem}
.trilha-cab .linha1{display:flex;gap:.5rem 1rem;align-items:baseline;justify-content:space-between;flex-wrap:wrap}
.trilha-cab .conta{display:flex;gap:.75rem;align-items:center}
.trilha-cab .conta .prog{flex:1}
.caminho-t{position:relative;display:grid;gap:.75rem}
.parada{position:relative;display:grid;grid-template-columns:2.75rem 1fr;gap:.75rem;align-items:stretch}
.parada .marco{position:relative;display:grid;justify-items:center}
.parada .bola{position:relative;z-index:1;width:2.75rem;height:2.75rem;border-radius:50%;display:grid;place-items:center;font-weight:800;background:var(--cartao);border:.1875rem solid var(--borda);color:var(--tinta-2);margin-top:.875rem}
.parada .bola .ico{stroke-width:3}
.parada .marco::before,.parada .marco::after{content:"";position:absolute;left:50%;width:0;border-left:.1875rem dotted var(--borda);transform:translateX(-50%)}
.parada .marco::before{top:-.75rem;height:1.625rem}
.parada .marco::after{top:3.625rem;bottom:0}
.parada:first-child .marco::before,.parada:last-child .marco::after{display:none}
.parada.feito .bola{background:var(--ok);border-color:var(--ok);color:#fff}
:root[data-tema="escuro"] .parada.feito .bola{color:#0c1a14}
.parada.feito .marco::after,.parada.feito + .parada .marco::before{border-left-style:solid;border-left-color:var(--ok)}
.parada.atual .bola{border-color:var(--marca);color:var(--acento);box-shadow:0 0 0 .375rem var(--acento-fraco)}
.parada .cartao{display:grid;grid-template-columns:6.5rem 1fr;gap:.75rem;padding:.625rem;align-items:center;min-height:5.5rem;transition:border-color .15s ease,transform .15s ease}
.parada .cartao:hover{border-color:var(--tinta-3)}
.parada.atual .cartao{box-shadow:inset 0 .125rem 0 0 var(--marca),var(--sombra-alta)}
.parada .info{display:grid;gap:.375rem;align-content:center;min-width:0}
.parada .meta{display:flex;flex-wrap:wrap;gap:.375rem .625rem;align-items:center}
.aqui{display:inline-flex;align-items:center;gap:.25rem;font-size:.75rem;font-weight:700;color:var(--acento)}
.aqui .ico{width:.875rem;height:.875rem}

/* ---------- biblioteca ---------- */
.filtros{display:flex;gap:.5rem;overflow-x:auto;padding:.125rem;margin:0 -.125rem;scrollbar-width:none}
.filtros::-webkit-scrollbar{display:none}
.filtros button{flex:none;min-height:2.75rem;padding:0 1rem;border-radius:62rem;border:1px solid var(--borda);background:var(--cartao);font-weight:700;font-size:.875rem;color:var(--tinta-2);white-space:nowrap}
.filtros button[aria-pressed="true"]{background:var(--tinta);border-color:var(--tinta);color:var(--fundo)}
.busca{display:flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:0 .875rem;border:1px solid var(--borda);border-radius:.625rem;background:var(--cartao);color:var(--tinta-3)}
.busca:focus-within{outline:.1875rem solid var(--foco);outline-offset:.125rem}
.busca input{border:0;background:none;color:var(--tinta);width:100%;min-width:0;min-height:2.625rem;outline:0}
.busca input::placeholder{color:var(--tinta-3);opacity:1}
.busca.g{min-height:3.25rem;font-size:1rem}
.grade{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fill,minmax(min(100%,9.5rem),1fr))}
.vid{display:grid;gap:.625rem;padding:.625rem;align-content:start;transition:border-color .15s ease,transform .15s ease}
.vid:hover{border-color:var(--tinta-3)}
.vid .info{display:grid;gap:.375rem;padding:0 .25rem .25rem}
.vid .meta{display:flex;flex-wrap:wrap;gap:.375rem .625rem;align-items:center}
.estante{display:grid;gap:.875rem;margin-top:1.5rem}
.estante > header{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.faixa-trilha{display:grid;gap:.75rem;padding:1.125rem;border-radius:var(--raio);color:#fff;background:linear-gradient(120deg,#1b2028 0%,#3d1620 55%,#C8102E 130%);position:relative;overflow:hidden;isolation:isolate}
.faixa-trilha::before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-radial-gradient(circle at 102% -20%,transparent 0 2.25rem,rgba(255,255,255,.07) 2.25rem 2.3125rem)}
.faixa-trilha .rotulo{color:#ffc9d1}
.faixa-trilha .sub,.faixa-trilha .miudo{color:#e9e2e4}
.faixa-trilha .prog{background:rgba(255,255,255,.25)}
.faixa-trilha .prog b{background:#fff}
.faixa-trilha .btn{background:#fff;border-color:#fff;color:#A50D26;justify-self:start}
.faixa-trilha :focus-visible{outline-color:#fff}
.onde{display:grid;grid-template-columns:5.5rem 1fr;gap:.75rem;align-items:center;padding:.625rem;margin-bottom:1.25rem}
.onde .txt{display:grid;gap:.375rem;min-width:0}
.onde h2{font-size:.9375rem}
.onde .btn{grid-column:1/-1}

/* ---------- página do vídeo ---------- */
.volta{display:inline-flex;align-items:center;gap:.375rem;min-height:2.75rem;font-weight:700;color:var(--tinta-2)}
.volta:hover{color:var(--tinta)}
.sala{display:grid;gap:1.25rem;grid-template-columns:1fr}
.tela{position:relative;background:#06080c;border-radius:var(--raio);overflow:hidden;aspect-ratio:16/9;box-shadow:var(--sombra-alta)}
.tela video{width:100%;height:100%;object-fit:contain;background:#06080c}
.tela .demo{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:.75rem;color:#fff;text-align:center;padding:1rem}
.tela .demo .capa{position:absolute;inset:0;border-radius:0;opacity:.5;aspect-ratio:auto}
.tela .demo > *:not(.capa){position:relative}
.retoma{position:absolute;z-index:2;left:.5rem;right:.5rem;bottom:3.5rem;display:flex;gap:.5rem .75rem;align-items:center;justify-content:space-between;flex-wrap:wrap;background:rgba(12,15,20,.92);color:#fff;padding:.5rem .5rem .5rem .875rem;border-radius:.625rem;font-weight:700;font-size:.875rem}
.retoma .btn{min-height:2.75rem;background:rgba(255,255,255,.14);border-color:transparent;color:#fff}
.aseguir{position:absolute;inset:0;z-index:3;display:grid;place-items:center;align-content:center;gap:.375rem;background:rgba(8,10,14,.9);color:#fff;text-align:center;padding:1rem}
.aseguir .rotulo{color:#ffc9d1}
.aseguir .acoes{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-top:.375rem}
.aseguir h2{font-size:1rem}
.aseguir .miudo{display:none}
.aseguir .btn:not(.pri){background:rgba(255,255,255,.12);border-color:transparent;color:#fff}
.sobre{display:grid;gap:.75rem}
.sobre .linha-a{display:flex;gap:.5rem 1rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.salvo{display:inline-flex;align-items:center;gap:.375rem;font-size:.8125rem;font-weight:700;color:var(--tinta-3);min-height:1.5rem}
.salvo.pend{color:var(--aviso)}
.salvo .ico{width:1rem;height:1rem}
.passos-v{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.veloc{display:flex;gap:.25rem;flex-wrap:wrap}
.veloc button{min-width:3.25rem;min-height:2.75rem;padding:0 .5rem;border-radius:.5rem;border:1px solid var(--borda);background:var(--cartao);font-weight:700;font-size:.875rem;color:var(--tinta-2)}
.veloc button[aria-pressed="true"]{background:var(--tinta);border-color:var(--tinta);color:var(--fundo)}
.atalhos{display:grid;grid-template-columns:auto 1fr;gap:.375rem .75rem;align-items:center}
.atalhos kbd{font:inherit;font-weight:700;font-size:.8125rem;min-width:1.75rem;text-align:center;padding:.125rem .375rem;border-radius:.375rem;border:1px solid var(--borda);background:var(--cartao-2);color:var(--tinta)}
.fila{display:grid;gap:.25rem;padding:.5rem;align-content:start}
.fila .tit{padding:.5rem .5rem .375rem;display:grid;gap:.375rem}
.fila a{display:grid;grid-template-columns:2rem 1fr auto;gap:.625rem;align-items:center;min-height:3.375rem;padding:.375rem .625rem;border-radius:.5rem}
.fila a:hover{background:var(--cartao-2)}
.fila a[aria-current="true"]{background:var(--marca);color:#fff;box-shadow:0 .375rem 1rem -.5rem rgba(200,16,46,.7)}
.fila a[aria-current="true"] .miudo{color:#ffe1e6}
.fila .pt{width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.8125rem;border:.125rem solid var(--borda);color:var(--tinta-2)}
.fila .pt .ico{width:1rem;height:1rem;stroke-width:3}
.fila .pt.ok{background:var(--ok);border-color:var(--ok);color:#fff}
:root[data-tema="escuro"] .fila .pt.ok{color:#0c1a14}
.fila a[aria-current="true"] .pt{border-color:#fff;color:#fff;background:none}
.fila .nome{font-weight:700;line-height:1.3;min-width:0;display:grid;gap:.125rem}
.fila .tipo-f{font-weight:400}

/* ---------- entrar ---------- */
body.so-entrar .topo,body.so-entrar .abas-baixo,body.so-entrar .lado,body.so-entrar .pe{display:none}
body.so-entrar .pag{padding:0;margin:0;background:linear-gradient(150deg,#14181f 0%,#291b22 48%,#8f0f25 120%)}
body.so-entrar main{display:grid;place-items:center;max-width:none;padding:1.5rem var(--gutter)}
.entrar{width:min(100%,26rem);display:grid;gap:1.25rem;padding:1.75rem 1.5rem;border-radius:var(--raio-g);background:var(--cartao);border:1px solid var(--borda);box-shadow:0 2rem 4rem -2rem rgba(0,0,0,.6)}
.entrar .selo-marca{justify-self:start;background:#171c24;border-radius:.75rem;padding:.75rem 1rem}
.entrar .selo-marca img{height:2.5rem;width:auto}
.entrar form{display:grid;gap:.875rem}
.ajuda-senha{display:grid;gap:.25rem;justify-items:start;border-top:1px solid var(--linha);padding-top:.75rem}
.ajuda-t{font-size:.875rem;font-weight:600;color:var(--tinta)}
.ajuda-links{display:flex;flex-wrap:wrap;gap:0 .75rem;margin-left:-.5rem}
.campo{display:grid;gap:.375rem}
.campo label{font-weight:700;font-size:.875rem}
.campo .cx{display:flex;align-items:center;border:1px solid var(--tinta-3);border-radius:.625rem;background:var(--cartao)}
.campo .cx:focus-within{outline:.1875rem solid var(--foco);outline-offset:.125rem}
.campo input{flex:1;min-width:0;min-height:3rem;padding:0 .875rem;border:0;background:none;outline:0;font-size:1rem;border-radius:.625rem}
.campo .cx button{min-width:3rem;min-height:3rem;display:grid;place-items:center;color:var(--tinta-2);border-radius:.625rem}

/* recado que não some sozinho (ex.: a saída falhou) */
.recado{position:fixed;z-index:70;left:.75rem;right:.75rem;bottom:calc(var(--abas-a) + env(safe-area-inset-bottom) + .75rem);max-width:34rem;margin:0 auto;display:flex;gap:.625rem;align-items:center;padding:.5rem .5rem .5rem .875rem;border-radius:var(--raio);background:#20252d;color:#fff;font-weight:700;box-shadow:var(--sombra-alta);border:1px solid rgba(255,255,255,.18)}
.recado span{flex:1}
.recado :focus-visible{outline-color:#8ab4ff}

/* ---------- carregando ---------- */
.osso{border-radius:var(--raio);background:linear-gradient(90deg,var(--linha) 25%,var(--cartao-2) 37%,var(--linha) 63%);background-size:400% 100%}
.carrega{display:grid;gap:1rem}
.carrega .osso:nth-child(1){height:2rem;width:60%}
.carrega .osso:nth-child(2){height:12rem}
.carrega .osso:nth-child(3){height:6rem}
.aviso-maquete{background:#111419;color:#fff;font-size:.8125rem;padding:.5rem var(--gutter);text-align:center;position:relative;z-index:50}
.aviso-maquete b{color:#ffb4c0}
.aviso-maquete a{text-decoration:underline;font-weight:700}

/* ---------- tablet ---------- */
@media (min-width:48rem){
  :root{--gutter:1.75rem}
  main{padding-top:1.75rem}
  .continuar{grid-template-columns:minmax(14rem,22rem) 1fr;padding:1rem;gap:1.5rem}
  .grade{grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr))}
  .continuar .acoes .btn.pri{flex:0 1 auto}
  .parada .cartao{grid-template-columns:10rem 1fr auto;padding:.75rem;gap:1rem}
  .aseguir{gap:.75rem}
  .aseguir h2{font-size:1.25rem}
  .aseguir .miudo{display:block}
  .aseguir .btn{min-height:3.25rem;font-size:1rem;padding:0 1.5rem}
  .onde{grid-template-columns:8.5rem 1fr auto}
  .onde .btn{grid-column:auto}
  .passos-v{display:flex;justify-content:flex-start}
  .faixa-trilha{grid-template-columns:1fr auto;align-items:center;padding:1.25rem 1.5rem}
  .faixa-trilha .larga{grid-column:1/-1}
}

/* ---------- notebook e monitor: lateral fixa, como no comercial ---------- */
@media (min-width:68.75rem){
  .lado{display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;width:var(--lado-l);z-index:35;background:var(--lado);color:var(--lado-txt);overflow-y:auto}
  .lado .conta{display:grid;grid-template-columns:auto 1fr auto;gap:.625rem;align-items:center;padding:1rem .875rem;background:var(--lado-2);border-bottom:1px solid var(--lado-fio)}
  .lado .conta .quem{display:grid;min-width:0;line-height:1.25}
  .lado .conta .quem b{color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lado .conta .quem span{font-size:.8125rem}
  .lado nav{padding:.75rem .5rem;display:grid;gap:.125rem;align-content:start;flex:1}
  .lado .grupo{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#9aa5b1;padding:.875rem .875rem .375rem;display:flex;align-items:center;gap:.5rem}
  .lado .grupo::after{content:"";flex:1;height:1px;background:var(--lado-fio)}
  .lado nav a{min-height:2.75rem;display:flex;align-items:center;gap:.625rem;padding:.375rem .875rem;line-height:1.3;border-radius:.5rem;font-weight:700;color:#fff}
  .lado nav a:hover{background:rgba(255,255,255,.08)}
  .lado nav a[aria-current="page"]{background:var(--marca);box-shadow:0 .375rem 1rem -.5rem rgba(200,16,46,.7)}
  .lado nav a .cnt{margin-left:auto;white-space:nowrap;font-size:.75rem;font-weight:700;color:var(--lado-txt)}
  .lado nav a[aria-current="page"] .cnt{color:#fff}
  .lado .pe-lado{padding:.875rem;display:grid;gap:.75rem;border-top:1px solid var(--lado-fio)}
  .lado .pe-lado img{width:9.375rem;height:auto;justify-self:center}
  .pag{margin-left:var(--lado-l);padding-bottom:0}
  .abas-baixo{display:none}
  .topo{background:var(--fundo);color:var(--tinta);height:auto;min-height:3.5rem;padding:.75rem 1.75rem 0;position:static;max-width:75rem;width:100%;margin:0 auto}
  .topo .marca,.topo .so-cel{display:none}
  .topo .caminho{display:block;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--tinta-3)}
  .topo .busca{display:flex;flex:0 1 20rem}
  .topo :focus-visible{outline-color:var(--foco)}
  main{padding-top:1rem}
  .sala{grid-template-columns:minmax(0,1fr) 19.25rem;align-items:start}
  .sala .fila{position:sticky;top:1rem}
  .tela{max-height:calc(100vh - 11rem)}
  .caminho-t.deitado{grid-template-columns:repeat(var(--n,5),1fr);gap:var(--gap);align-items:stretch}
  .caminho-t.deitado .parada{grid-template-columns:1fr;gap:.5rem}
  .caminho-t.deitado .marco{justify-items:start;height:3.25rem}
  .caminho-t.deitado .bola{margin-top:0;margin-left:.75rem}
  .caminho-t.deitado .marco::before,.caminho-t.deitado .marco::after{left:auto;top:1.375rem;height:0;width:auto;border-left:0;border-top:.1875rem dotted var(--borda);transform:translateY(-50%);bottom:auto}
  .caminho-t.deitado .marco::before{left:0;right:auto;width:.75rem}
  .caminho-t.deitado .marco::after{left:3.5rem;right:calc(-1 * var(--gap))}
  .caminho-t.deitado .parada.feito .marco::after,.caminho-t.deitado .parada.feito + .parada .marco::before{border-top-style:solid;border-top-color:var(--ok)}
  .caminho-t.deitado .parada .cartao{grid-template-columns:1fr;align-content:start;padding:.625rem;height:100%}
  .caminho-t.deitado .parada{grid-template-rows:auto 1fr}
  .caminho-t.deitado .aqui{position:absolute;left:4rem;top:-.125rem;background:var(--fundo);padding:0 .375rem;z-index:2}
}
@media (min-width:68.75rem) and (max-width:84.99rem){.sala{grid-template-columns:minmax(0,1fr) 17rem}}

/* ---------- telas grandes e TV: só a raiz cresce ---------- */
@media (min-width:112.5rem){html{font-size:112.5%}main,.pe,.topo{max-width:82rem}}
@media (min-width:160rem){html{font-size:150%}}
@media (min-width:240rem){html{font-size:225%}}

@media (prefers-reduced-motion:no-preference){
  .osso{animation:osso 1.4s ease infinite}
  @keyframes osso{0%{background-position:100% 50%}100%{background-position:0 50%}}
  .parada .cartao:hover,.vid:hover{transform:translateY(-.125rem)}
  .parada.atual .bola{animation:pulso 2.4s ease-in-out infinite}
  @keyframes pulso{50%{box-shadow:0 0 0 .625rem transparent}}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
/* ---------- acompanhamento (só o papel dono vê) ---------- */
.ac-nota{display:flex;gap:.625rem;align-items:flex-start;padding:.75rem 1rem;border-radius:var(--raio);background:var(--cartao-2);border:1px solid var(--borda);color:var(--tinta-2);margin-bottom:1rem}
.ac-nota .ico{margin-top:.125rem;color:var(--tinta-3)}
#ac-recado{margin-bottom:.75rem}
#ac-recado:empty{display:none}
#ac-recado:focus{outline:0}
/* resumo no topo: mesmos cartões (canto, borda, sombra, fio vermelho no destaque) e a mesma grade de 12 px da tela Início */
.ac-resumo{display:grid;gap:var(--gap);grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:.25rem}
.ac-kpi{display:grid;gap:.5rem;padding:.875rem 1rem;align-content:start}
.ac-kpi:first-child,.ac-kpi:last-child{grid-column:1/-1}
.ac-num{font-size:1rem;color:var(--tinta-2);line-height:1.1}
.ac-num b{font-size:1.75rem;font-weight:700;color:var(--tinta);letter-spacing:-.02em;margin-right:.125rem}
/* pessoa: mesmo cartão que abre e fecha das outras telas, com a sombra de cartão e o caminho da trilha dentro */
.ac-pessoas{display:grid;gap:var(--gap)}
.ac-pessoa{box-shadow:var(--sombra)}
.ac-pessoa summary{gap:.75rem;padding:.75rem 1rem}
.ac-av{width:2.5rem;height:2.5rem;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:700;background:var(--acento-fraco);color:var(--acento)}
.ac-quem{display:grid;gap:.25rem;min-width:0;flex:1;font-weight:400}
.ac-quem b{font-weight:600;font-size:1rem;line-height:1.25}
#ac-recado .aviso span{min-width:0}
.ac-confirma .btn{max-width:100%;padding-top:.5rem;padding-bottom:.5rem}
.ac-uuid{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.8125rem}
.ac-alerta{display:flex;gap:.5rem;align-items:flex-start;font-weight:700}
.ac-alerta .ico{flex:none;margin-top:.125rem}
/* No cartão aberto do Acompanhamento, no celular, a coluna de texto de cada parada tinha cerca de 100 px em 360 px:
   o selo "Em andamento, 48%" (147 px) saía do cartão e a página ganhava rolagem lateral. Aqui o cartão aberto
   gasta menos espaço com margens, bolinha e capa, e a coluna de texto passa de 150 px. */
@media (max-width:30rem){
.ac-pessoa .corpo{padding-left:.5rem;padding-right:.5rem}
.ac-pessoa .parada{grid-template-columns:2.25rem 1fr;gap:.5rem}
.ac-pessoa .parada .bola{width:2.25rem;height:2.25rem;font-size:.875rem}
.ac-pessoa .parada .marco::after{top:3.125rem}
.ac-pessoa .parada .cartao{grid-template-columns:5.5rem 1fr;gap:.625rem;padding:.5rem}
}
/* Rede de segurança: se ainda assim não couber, o selo quebra entre palavras em vez de sair do cartão. */
.ac-pessoa .parada .meta .selo{white-space:normal;overflow-wrap:normal;line-height:1.2;border-radius:.875rem;text-align:left}
.ac-pontos{display:flex;gap:.3125rem;align-items:center;margin-top:.125rem}
.ac-pontos i{width:.75rem;height:.75rem;border-radius:50%;border:.125rem solid var(--borda);background:var(--cartao)}
.ac-pontos i.ok{background:var(--ok);border-color:var(--ok)}
.ac-pontos i.at{border-color:var(--marca);background:var(--acento-fraco)}
.ac-estado{display:none}
.ac-pessoa .corpo{gap:1rem;padding-top:.25rem}
.ac-pessoa .corpo h3{color:var(--tinta)}
.parada.fixa .cartao:hover{border-color:var(--borda);transform:none}
.parada.fixa.atual .bola{animation:none}
.ac-rodape{display:flex;justify-content:flex-start;border-top:1px solid var(--linha);padding-top:.875rem}
.ac-confirma{display:grid;gap:.5rem;padding:1rem;border-radius:var(--raio);border:.125rem solid var(--marca);background:var(--acento-fraco);color:var(--tinta)}
.ac-confirma p{color:var(--tinta)}
.ac-botoes{display:flex;gap:.5rem;flex-wrap:wrap}
.estante + .ac-nota,.vazio + .ac-nota{margin-top:1.5rem}
@media (min-width:48rem){
  .ac-resumo{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr))}
  .ac-kpi:first-child,.ac-kpi:last-child{grid-column:auto}
  .ac-estado{display:inline-flex}
}

/* Peso 600 em títulos, itens de menu e botões, igual ao comercial (Sora 600 autorizada no Adendo 02). Fica no fim para valer sobre as regras de cima. */
h1,h2,h3,.btn,.lado nav a,.abas-baixo a,.fila .nome,details.abre summary,.volta,.topo .marca,.campo label{font-weight:600}

@media print{.lado,.topo,.abas-baixo,.tela{display:none}.pag{margin:0}}