/* Equipe ARRAIS OS · redesenho no facelift "vidro" do ARRAIS OS (aprovado em 09/11/2026).
   Régua: candidatos/os-ux-r3-20261101/wt-r167/public/facelift.css (tokens, vidro, lateral fumê, faixa bordô, sol, mola).
   Valores crus só nos blocos de token; componentes consomem var(--…).
   Fonte de título: a interface do OS usa Thunder ExtraBold, cuja licença é só para uso pessoal (pendência de 03/11).
   Aqui vai a Anton (OFL) com o mesmo ajuste de tamanho da landing v2 (81,5%), para que a escala dos títulos siga a do OS.
   Comprada a licença web da Thunder, basta trocar o src do @font-face "Titulo Equipe". */

@font-face{font-family:"Titulo Equipe";src:url("/fonts/Anton-latin.woff2") format("woff2");font-display:swap;size-adjust:81.5%}
@font-face{font-family:"Instrument Serif";font-style:italic;src:url("/fonts/InstrumentSerif-Italic.woff2") format("woff2");font-display:swap}

/* ---------- tokens (claro) ---------- */
:root{
  --vidro:rgba(255,254,250,.73);--vidro-forte:rgba(255,254,250,.8);
  --vidro-luz:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 .5px rgba(255,255,255,.55);
  --vidro-fio:0 0 0 .5px rgba(30,24,12,.09);
  --sombra-1:0 1px 2px rgba(30,24,12,.04),0 10px 24px -14px rgba(30,24,12,.14);
  --sombra-2:0 1px 2px rgba(30,24,12,.04),0 18px 40px -22px rgba(30,24,12,.16),0 44px 80px -48px rgba(30,24,12,.2);
  --blur:blur(36px) saturate(150%);--blur-lat:blur(44px) saturate(160%);
  --rv-1:12px;--rv-2:18px;--rv-3:24px;--rv-4:30px;
  --mola:cubic-bezier(.22,1,.36,1);--pulo:cubic-bezier(.3,1.5,.5,1);
  --v-texto:#0E0E0E;--v-texto-2:#57534A;--v-texto-3:#67635A;--v-acc-texto:#B12B1E;
  --v-lavagem:rgba(14,14,14,.045);--v-fio:rgba(14,14,14,.08);
  --v-cheio:#0E0E0E;--v-sobre-cheio:#F7F4EC;
  --bordo:#6E1811;--bordo-fundo:#3C0D09;--bordo-luz:#A3251A;
  --fundo-body:#F2EFE6;--cena-a:#F4F1E9;--cena-b:#EEEADF;--cena-luz:rgba(255,255,255,.95);--cena-calor:rgba(216,199,170,.3);--cena-ponto:rgba(14,14,14,.17);--cena-grao:.05;
  --sol-a:#EC3F2D;--sol-b:#E63323;--sol-c:#DA2E1F;--sol-sombra:rgba(230,51,35,.16);--sol-ave:#F2EFE6;
  --enviar-bg:#E63323;--enviar-tx:#fff;--enviar-brilho:rgba(230,51,35,.55);
  --nova-bg:#F2EFE6;--nova-tx:#0E0E0E;
  --lat-fundo:rgba(16,16,14,.94);--lat-texto:#F2EFE6;--lat-2:#C2BDB0;--lat-3:#ABA698;--lat-lav:rgba(255,255,255,.075);--lat-lav-2:rgba(255,255,255,.14);
  --lat-selo:#C42A1C;--lat-ativo:rgba(255,255,255,.1);--lat-calor:rgba(230,51,35,.2);--lat-acc-texto:#FF9C8D;
  --lat-w:296px;
  --ok:#1F7A4D;--ok-lav:rgba(31,122,77,.12);
  --f-tit:"Titulo Equipe","EA Thunder","Thunder OS",Impact,sans-serif;
  --f-it:"Instrument Serif",Georgia,serif;
  --f-ui:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --gutter:clamp(16px,4vw,56px);
  color-scheme:light;
}
/* ---------- tokens (escuro): sistema, ou escolha da pessoa ---------- */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --v-texto:#F4F1EA;--v-texto-2:#C9C4B7;--v-texto-3:#B3AE9F;--v-acc-texto:#FF9C8D;
  --v-lavagem:rgba(255,255,255,.06);--v-fio:rgba(255,255,255,.1);
  --v-cheio:#F2EFE6;--v-sobre-cheio:#0E0E0E;
  --vidro:rgba(44,43,39,.62);--vidro-forte:rgba(46,45,41,.78);
  --vidro-luz:inset 0 1px 0 rgba(255,255,255,.11),inset 0 0 0 .5px rgba(255,255,255,.06);
  --vidro-fio:0 0 0 .5px rgba(0,0,0,.5);
  --sombra-1:0 1px 2px rgba(0,0,0,.3),0 14px 30px -16px rgba(0,0,0,.6);
  --sombra-2:0 1px 2px rgba(0,0,0,.3),0 22px 50px -24px rgba(0,0,0,.65),0 50px 90px -50px rgba(0,0,0,.7);
  --lat-fundo:rgba(24,24,22,.82);
  --fundo-body:#0F0F0E;--cena-a:#151513;--cena-b:#0D0D0C;--cena-luz:rgba(230,51,35,.13);--cena-calor:rgba(242,239,230,.05);--cena-ponto:rgba(255,255,255,.14);--cena-grao:.035;
  --ok:#5BD198;--ok-lav:rgba(91,209,152,.14);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --v-texto:#F4F1EA;--v-texto-2:#C9C4B7;--v-texto-3:#B3AE9F;--v-acc-texto:#FF9C8D;
  --v-lavagem:rgba(255,255,255,.06);--v-fio:rgba(255,255,255,.1);
  --v-cheio:#F2EFE6;--v-sobre-cheio:#0E0E0E;
  --vidro:rgba(44,43,39,.62);--vidro-forte:rgba(46,45,41,.78);
  --vidro-luz:inset 0 1px 0 rgba(255,255,255,.11),inset 0 0 0 .5px rgba(255,255,255,.06);
  --vidro-fio:0 0 0 .5px rgba(0,0,0,.5);
  --sombra-1:0 1px 2px rgba(0,0,0,.3),0 14px 30px -16px rgba(0,0,0,.6);
  --sombra-2:0 1px 2px rgba(0,0,0,.3),0 22px 50px -24px rgba(0,0,0,.65),0 50px 90px -50px rgba(0,0,0,.7);
  --lat-fundo:rgba(24,24,22,.82);
  --fundo-body:#0F0F0E;--cena-a:#151513;--cena-b:#0D0D0C;--cena-luz:rgba(230,51,35,.13);--cena-calor:rgba(242,239,230,.05);--cena-ponto:rgba(255,255,255,.14);--cena-grao:.035;
  --ok:#5BD198;--ok-lav:rgba(91,209,152,.14);
  color-scheme:dark;
}
/* base opaca quando não há desfoque ou a pessoa pede menos transparência (mesma regra do OS) */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--vidro:#FCFAF4;--vidro-forte:#FDFBF6;--lat-fundo:#141412}
  :root[data-theme="dark"]{--vidro:#2C2B27;--vidro-forte:#2E2D29;--lat-fundo:#181816}
}
@media (prefers-reduced-transparency:reduce){
  :root{--vidro:#FCFAF4;--vidro-forte:#FDFBF6;--lat-fundo:#141412;--blur:none;--blur-lat:none}
  :root[data-theme="dark"]{--vidro:#2C2B27;--vidro-forte:#2E2D29;--lat-fundo:#181816}
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;min-height:100vh;min-height:100dvh;color:var(--v-texto);font:16px/1.5 var(--f-ui);-webkit-font-smoothing:antialiased;overflow-x:hidden;
  background:
    radial-gradient(1100px 680px at 88% -14%,var(--cena-luz),transparent 64%),
    radial-gradient(900px 620px at 40% 112%,var(--cena-calor),transparent 70%),
    linear-gradient(180deg,var(--cena-a) 0%,var(--cena-b) 100%) var(--fundo-body);
  background-attachment:fixed}
/* pontilhado só no alto à direita e grão, como o fundo da cena do OS */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle,var(--cena-ponto) .75px,transparent 1.15px);background-size:18px 18px;
  -webkit-mask-image:radial-gradient(44% 42% at 74% 8%,#000,transparent);mask-image:radial-gradient(44% 42% at 74% 8%,#000,transparent)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--cena-grao);mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E")}
:root[data-theme="dark"] body::after{mix-blend-mode:screen}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body::after{mix-blend-mode:screen}}
img{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--v-texto);outline-offset:2px;border-radius:8px}
[hidden]{display:none!important}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* faixa bordô no alto (força .6 nas páginas de leitura) */
.faixa-bordo{position:fixed;left:0;right:0;top:0;height:6px;z-index:40;pointer-events:none;
  background:linear-gradient(90deg,var(--bordo-fundo),var(--bordo) 40%,var(--bordo-luz) 78%,var(--bordo));opacity:.9}

/* ---------- receita de vidro ---------- */
.vidro,.vidro-forte{-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.vidro{background:var(--vidro);box-shadow:var(--vidro-luz),var(--vidro-fio),var(--sombra-1)}
.vidro-forte{background:var(--vidro-forte);box-shadow:var(--vidro-luz),var(--vidro-fio),var(--sombra-2)}

/* ---------- tipografia ---------- */
.sobre{font:700 12px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--v-texto-2)}
.titulo-pg{font:400 clamp(52px,5.6vw,80px)/.95 var(--f-tit);text-transform:uppercase;letter-spacing:.008em;margin:10px 0 0;color:var(--v-texto)}
.titulo-pg em,.it{font-family:var(--f-it);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0}
.titulo-pg em{font-size:.86em;color:var(--v-acc-texto)}
.linha-fina{color:var(--v-texto-2);font-size:15px;margin:12px 0 0}
.linha-fina b{color:var(--v-texto);font-variant-numeric:tabular-nums}

/* ---------- botões ---------- */
.btn{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border-radius:99px;font-weight:700;font-size:14.5px;text-decoration:none;white-space:nowrap;
  transition:transform .3s var(--pulo),background .2s,color .2s,box-shadow .2s}
.btn svg{width:16px;height:16px;flex:none}
.btn:active{transform:translateY(1px) scale(.98)}
.btn-cheio{background:var(--v-cheio);color:var(--v-sobre-cheio);box-shadow:var(--sombra-1)}
.btn-cheio:hover{transform:translateY(-1px)}
.btn-leve{background:var(--v-lavagem);color:var(--v-texto)}
.btn-leve:hover{background:var(--v-fio)}
.btn-sinal{background:var(--enviar-bg);color:var(--enviar-tx);box-shadow:0 8px 20px -8px var(--enviar-brilho),inset 0 1px 0 rgba(255,255,255,.28)}
.btn-sinal:hover{transform:translateY(-2px)}
.btn[disabled]{opacity:.55;cursor:progress;transform:none}
.btn-largo{width:100%;height:50px;font-size:15.5px}
.btn-icone{appearance:none;border:0;cursor:pointer;display:inline-grid;place-items:center;width:40px;height:40px;padding:0;border-radius:12px;background:transparent;color:inherit;transition:background .2s,color .2s}
.btn-icone svg{width:20px;height:20px}
.btn-icone:hover{background:var(--v-lavagem)}

/* ======================================================================
   CASCA: lateral fumê + conteúdo
   ====================================================================== */
.casca{display:grid;grid-template-columns:var(--lat-w) minmax(0,1fr);min-height:100dvh}
.lateral{position:sticky;top:12px;margin:12px 0 12px 12px;height:calc(100dvh - 24px);padding:20px 12px 12px;border-radius:var(--rv-3);
  background:var(--lat-fundo);-webkit-backdrop-filter:var(--blur-lat);backdrop-filter:var(--blur-lat);color:var(--lat-texto);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 .5px rgba(255,255,255,.06),0 0 0 .5px rgba(0,0,0,.4),0 34px 70px -34px rgba(24,18,8,.5);
  display:flex;flex-direction:column;gap:4px;isolation:isolate;overflow:hidden auto;z-index:30}
.lateral::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:radial-gradient(130% 34% at 22% 106%,var(--lat-calor),transparent 72%),linear-gradient(180deg,rgba(255,255,255,.05),transparent 16%)}
.lat-marca{display:flex;align-items:center;gap:12px;padding:0 8px 18px;text-decoration:none}
.lat-marca img{width:38px;height:auto}
.lat-marca b{display:block;font:400 22px/1 var(--f-tit);text-transform:uppercase;letter-spacing:.01em}
.lat-marca small{display:block;color:var(--lat-3);font-size:12px;margin-top:3px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav-it{display:flex;align-items:center;gap:13px;min-height:40px;padding:0 10px;border-radius:11px;color:var(--lat-2);font-size:15px;text-decoration:none;cursor:pointer;
  transition:background .22s,color .22s}
.nav-it svg{width:18px;height:18px;flex:none}
.nav-it:hover{background:var(--lat-lav);color:var(--lat-texto)}
.nav-it[aria-current="page"]{background:var(--lat-ativo);color:var(--lat-texto);font-weight:700}
.nav-it .n{margin-left:auto;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--lat-2);padding:2px 8px;border-radius:99px;background:var(--lat-lav)}
.nav-it .n:empty{display:none}
.nav-it[aria-current="page"] .n{background:var(--lat-selo);color:#fff}
.lat-breve{margin-top:18px;padding:0 10px}
.lat-breve h3{margin:0 0 6px;font-size:12px;font-weight:500;color:var(--lat-3)}
.lat-breve ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.lat-breve li{display:flex;align-items:center;gap:13px;min-height:32px;font-size:14px;color:var(--lat-3);opacity:.7}
.lat-breve li svg{width:16px;height:16px;flex:none;opacity:.8}
.lat-pe{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 4px 2px 6px;border-top:.5px solid rgba(255,255,255,.08)}
.avatar{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:700;font-size:13px;background:var(--lat-selo);color:#fff}
.lat-pe .quem{flex:1;min-width:0;line-height:1.25}
.lat-pe .quem b{display:block;font-size:14px}
.lat-pe .quem small{display:block;font-size:12px;color:var(--lat-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lat-pe .btn-icone{width:34px;height:34px;border-radius:10px;color:var(--lat-2)}
.lat-pe .btn-icone:hover{background:var(--lat-lav);color:var(--lat-texto)}
.lat-pe .btn-icone svg{width:17px;height:17px}
.lateral :focus-visible{outline-color:var(--lat-texto)}

.palco{min-width:0;padding:46px var(--gutter) 96px}
.vista{max-width:1180px;margin:0 auto}
.vista.entra{animation:entra .55s var(--mola) both}
@keyframes entra{from{opacity:0;transform:translateY(14px)}}

/* topo do celular e gaveta */
.topo-cel{display:none}
.veu{position:fixed;inset:0;z-index:29;background:rgba(14,14,14,.32);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .3s}

/* ======================================================================
   TREINAMENTO
   ====================================================================== */
.pg-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.recado{margin-top:22px;max-width:820px;display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:var(--rv-2)}
.recado img{width:30px;height:auto;flex:none;margin-top:2px}
.recado .rotulo{display:block;font-size:12.5px;font-weight:700;color:var(--v-texto-2);margin-bottom:4px}
.recado p{margin:0;font-size:15.5px;line-height:1.6;color:var(--v-texto);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.recado.aberto p{-webkit-line-clamp:unset;display:block}
.recado .mais{appearance:none;border:0;background:none;padding:6px 0 0;cursor:pointer;font-weight:700;font-size:14px;color:var(--v-texto);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--v-fio)}

/* destaque: próximo vídeo + progresso */
.destaque{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(300px,1fr);gap:20px;margin-top:56px;align-items:stretch}
.sol-palco{position:relative;isolation:isolate;display:grid}
.continuar{position:relative;z-index:1;border-radius:var(--rv-4);padding:14px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;align-items:center}
/* sol do facelift: disco vermelho com o Pica-pau em papel, um terço atrás do cartão */
.com-sol{position:relative}
.com-sol::before{content:"";position:absolute;right:46px;top:-52px;z-index:0;width:132px;height:132px;border-radius:50%;
  background:radial-gradient(circle at 40% 26%,var(--sol-a),var(--sol-b) 60%,var(--sol-c));box-shadow:0 0 70px var(--sol-sombra),inset 0 1px 0 rgba(255,255,255,.2);pointer-events:none}
.com-sol::after{content:"";position:absolute;right:76px;top:-30px;z-index:0;width:72px;aspect-ratio:700/590;background:var(--sol-ave);
  -webkit-mask:url("/img/picapau-tinta.png") center/contain no-repeat;mask:url("/img/picapau-tinta.png") center/contain no-repeat;pointer-events:none}
.continuar{transition:opacity .2s ease}
.continuar.troca{opacity:0}
.continuar .thumb{border-radius:var(--rv-2)}
.continuar .info{padding:6px 10px 6px 0;min-width:0}
.continuar .sobre{color:var(--v-acc-texto)}
.continuar .bloco-de{margin-top:12px;font-size:13px;color:var(--v-texto-2)}
.continuar h2{margin:4px 0 6px;font-size:21px;line-height:1.22;font-weight:800;letter-spacing:-.01em}
.continuar .canal{font-size:14px;color:var(--v-texto-2)}
.continuar .acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.continuar.acabou{grid-template-columns:1fr;text-align:center;padding:40px 24px}

.progresso{border-radius:var(--rv-4);padding:22px 22px 18px;display:flex;flex-direction:column;gap:16px}
.prog-topo{display:flex;align-items:center;gap:18px}
.anel{width:96px;height:96px;flex:none;transform:rotate(-90deg)}
.anel circle{fill:none;stroke-width:9}
.anel .trilha{stroke:var(--v-lavagem)}
.anel .feito{stroke:var(--enviar-bg);stroke-linecap:round;transition:stroke-dashoffset 1s var(--mola)}
.pct{font:400 54px/.9 var(--f-tit);font-variant-numeric:tabular-nums}
.pct small{font-size:.5em;margin-left:2px}
.prog-topo p{margin:6px 0 0;font-size:14px;color:var(--v-texto-2)}
.numeros{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--v-fio);padding-top:14px}
.numeros div+div{border-left:1px solid var(--v-fio);padding-left:16px}
.numeros span{display:block;font-size:12.5px;color:var(--v-texto-2)}
.numeros b{display:block;font-size:20px;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums;margin-top:2px}
.ritmo{font-size:14px;color:var(--v-texto-2)}
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:99px;background:var(--v-lavagem)}
.seg button{appearance:none;border:0;cursor:pointer;height:32px;padding:0 13px;border-radius:99px;background:none;font-weight:700;font-size:13px;color:var(--v-texto-2);transition:background .25s var(--mola),color .2s}
.seg button[aria-pressed="true"]{background:var(--v-cheio);color:var(--v-sobre-cheio);box-shadow:var(--sombra-1)}
.ritmo .linha{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ritmo p{margin:10px 0 0}
.ritmo strong{color:var(--v-texto)}

/* equipe (só para quem administra) */
.equipe{margin-top:20px;border-radius:var(--rv-3);padding:18px 22px}
.equipe-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.equipe-cab h2{margin:0;font-size:15px;font-weight:800}
.equipe-cab a{font-size:13.5px;font-weight:700;color:var(--v-texto-2);text-decoration:none}
.equipe-cab a:hover{color:var(--v-texto)}
.membro{display:grid;grid-template-columns:minmax(180px,240px) minmax(0,1fr) auto;gap:20px;align-items:center;padding:10px 0}
.membro+.membro{border-top:1px solid var(--v-fio)}
.membro .pessoa{display:flex;align-items:center;gap:12px;min-width:0}
.membro .pessoa .avatar{width:36px;height:36px;background:var(--v-cheio);color:var(--v-sobre-cheio)}
.membro .pessoa b{display:block;font-size:15px}
.membro .pessoa small{display:block;font-size:12.5px;color:var(--v-texto-2)}
.trechos{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px}
.trechos i{height:8px;border-radius:9px;background:var(--v-lavagem);overflow:hidden;position:relative}
.trechos i::after{content:"";position:absolute;inset:0;width:var(--p,0%);background:var(--enviar-bg);border-radius:inherit;transition:width .9s var(--mola)}
.trechos-leg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;text-align:center;margin-top:5px;font-size:11px;font-weight:700;color:var(--v-texto-3);font-variant-numeric:tabular-nums}
.membro .conta{text-align:right;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.membro .conta small{display:block;font-weight:500;font-size:12.5px;color:var(--v-texto-2)}

/* barra de filtro e índice dos blocos (gruda no alto) */
.barra{position:sticky;top:18px;z-index:20;margin:34px 0 8px;display:flex;align-items:center;gap:12px;padding:6px;border-radius:99px}
.barra .seg{background:var(--v-lavagem)}
.barra .seg button{height:36px;padding:0 14px}
.barra .seg button span{font-weight:500;opacity:.7;margin-left:4px;font-variant-numeric:tabular-nums}
.indice{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;padding:0 2px}
.indice::-webkit-scrollbar{display:none}
.indice a{flex:none;height:36px;min-width:40px;padding:0 11px;border-radius:99px;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;
  font:400 17px/1 var(--f-tit);letter-spacing:.02em;color:var(--v-texto-2);transition:background .2s,color .2s}
.indice a:hover{background:var(--v-lavagem);color:var(--v-texto)}
.indice a[aria-current="true"]{background:var(--v-lavagem);color:var(--v-texto)}
.indice a.completo::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok)}
.barra .geral{display:flex;align-items:center;gap:10px;flex:none;padding-right:12px;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.trilho{height:6px;width:120px;border-radius:9px;background:var(--v-lavagem);overflow:hidden}
.trilho i{display:block;height:100%;width:0;background:var(--enviar-bg);border-radius:inherit;transition:width 1s var(--mola)}

/* blocos */
.grupo{margin:72px 0 -8px;display:flex;align-items:center;gap:16px}
.grupo span{font:italic 400 clamp(26px,3vw,34px)/1.1 var(--f-it);color:var(--v-texto)}
.grupo::after{content:"";flex:1;height:1px;background:var(--v-fio)}
.bloco{margin-top:52px;scroll-margin-top:96px}
.bloco-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}
.bloco-cab .sobre{color:var(--v-texto-3)}
.bloco-cab h2{margin:8px 0 0;font:400 clamp(30px,3.2vw,42px)/1 var(--f-tit);text-transform:uppercase;letter-spacing:.008em}
.bloco-cab .meta{font-size:14px;color:var(--v-texto-2);margin-top:8px}
.bloco-prog{flex:none;text-align:right;font-size:13px;font-weight:700;color:var(--v-texto-2);font-variant-numeric:tabular-nums}
.bloco-prog .trilho{margin:8px 0 0 auto;width:160px}
.bloco.completo .bloco-prog{color:var(--ok)}
.bloco.completo .bloco-prog .trilho i{background:var(--ok)}
.nota{display:flex;gap:14px;align-items:flex-start;padding:16px 20px;border-radius:var(--rv-2);margin:0 0 18px;max-width:780px}
.nota img{width:26px;height:auto;flex:none;margin-top:4px}
.nota small{display:block;font-size:12.5px;font-weight:700;color:var(--v-texto-2);margin-bottom:2px}
.nota p{margin:0;font:italic 400 21px/1.32 var(--f-it)}

.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.video{border-radius:var(--rv-3);padding:8px;display:flex;flex-direction:column;transition:transform .35s var(--pulo),box-shadow .35s var(--mola);animation:entra .6s var(--mola) both;animation-delay:calc(var(--i,0) * 45ms)}
.video:hover{transform:translateY(-3px);box-shadow:var(--vidro-luz),var(--vidro-fio),var(--sombra-2)}
.thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:var(--rv-2);background:var(--v-lavagem);isolation:isolate}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--mola),filter .5s var(--mola)}
.video:hover .thumb img,.continuar:hover .thumb img{transform:scale(1.04)}
.dur{position:absolute;right:8px;bottom:8px;padding:3px 8px;border-radius:8px;background:rgba(14,14,14,.72);color:#fff;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.play{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .3s}
.play i{width:56px;height:56px;border-radius:50%;background:var(--enviar-bg);display:grid;place-items:center;box-shadow:0 12px 30px -8px var(--enviar-brilho),inset 0 1px 0 rgba(255,255,255,.28);transform:scale(.8);transition:transform .45s var(--pulo)}
.play svg{width:20px;height:20px;margin-left:3px;color:#fff}
.video:hover .play,.continuar:hover .play,.thumb:focus-visible .play{opacity:1}
.video:hover .play i,.continuar:hover .play i,.thumb:focus-visible .play i{transform:none}
.selo-visto{position:absolute;left:8px;top:8px;display:inline-flex;align-items:center;gap:5px;padding:4px 10px 4px 6px;border-radius:99px;background:var(--v-cheio);color:var(--v-sobre-cheio);font-size:12px;font-weight:700;
  opacity:0;transform:translateY(-6px) scale(.9);transition:opacity .3s,transform .45s var(--pulo)}
.selo-visto svg{width:14px;height:14px}
.video.feito .thumb img{filter:saturate(.25) brightness(.8)}
.video.feito .selo-visto{opacity:1;transform:none}
.corpo{padding:12px 8px 6px;display:flex;flex-direction:column;flex:1;min-width:0}
.corpo .canal{font-size:13px;color:var(--v-texto-2)}
.corpo .titulo{margin-top:3px;font-size:15.5px;line-height:1.32;font-weight:700;letter-spacing:-.005em;text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.corpo .titulo:hover{text-decoration:underline;text-decoration-color:var(--v-fio);text-underline-offset:3px}
.corpo .pe{margin-top:auto;padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.quando{font-size:12.5px;color:var(--v-texto-3);font-variant-numeric:tabular-nums}

/* marcar como visto: resposta na hora, o visto se desenha */
.marcar{appearance:none;border:0;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 15px 0 7px;border-radius:99px;background:var(--v-lavagem);color:var(--v-texto);font-weight:700;font-size:13.5px;
  transition:background .3s var(--mola),color .3s,transform .3s var(--pulo)}
.marcar:hover{background:var(--v-fio)}
.marcar .caixa{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--v-texto-3);transition:background .3s var(--mola),box-shadow .3s}
.marcar .caixa svg{width:15px;height:15px}
.marcar .caixa path{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .38s var(--mola) .05s}
.marcar[aria-pressed="true"]{background:var(--v-cheio);color:var(--v-sobre-cheio)}
.marcar[aria-pressed="true"] .caixa{background:var(--v-sobre-cheio);box-shadow:none;color:var(--v-cheio)}
.marcar[aria-pressed="true"] .caixa path{stroke-dashoffset:0}
.marcar.pulo{animation:pulo .45s var(--pulo)}
@keyframes pulo{40%{transform:scale(1.07)}}
.marcar.salvando .caixa{animation:respira 1s ease-in-out infinite}
@keyframes respira{50%{opacity:.55}}

.vazio{text-align:center;padding:72px 20px;border-radius:var(--rv-3);margin-top:30px}
.vazio .t{font:400 40px/1 var(--f-tit);text-transform:uppercase}
.vazio p{color:var(--v-texto-2);margin:10px 0 18px}

/* carregando: esqueleto com brilho, na forma do que vem */
.esq{background:var(--v-lavagem);border-radius:var(--rv-2);position:relative;overflow:hidden}
.esq::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:brilho 1.4s infinite}
:root[data-theme="dark"] .esq::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent)}
@keyframes brilho{to{transform:translateX(100%)}}
.esq-linha{height:14px;border-radius:7px;margin-top:10px}
.erro-carga{margin-top:40px;border-radius:var(--rv-3);padding:36px;text-align:center}
.erro-carga p{color:var(--v-texto-2);margin:8px 0 18px}

/* aviso no pé da tela, com desfazer */
.aviso{position:fixed;left:50%;bottom:24px;z-index:50;display:flex;align-items:center;gap:12px;padding:8px 8px 8px 18px;border-radius:99px;font-weight:700;font-size:14px;white-space:nowrap;
  transform:translate(-50%,24px) scale(.96);opacity:0;pointer-events:none;transition:transform .45s var(--pulo),opacity .3s}
.aviso.on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.aviso .ok{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--v-cheio);color:var(--v-sobre-cheio)}
.aviso .ok svg{width:13px;height:13px}
.aviso .btn{height:34px;padding:0 14px;font-size:13.5px}
.aviso:not(:has(.btn)){padding-right:18px}

/* ======================================================================
   PESSOAS (gerar convite e link de nova senha)
   ====================================================================== */
.pessoas-lista{margin-top:30px;border-radius:var(--rv-3);padding:6px}
.p-linha{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 16px;align-items:center;padding:16px 16px}
.p-linha+.p-linha{border-top:1px solid var(--v-fio)}
.p-linha .avatar{width:40px;height:40px;background:var(--v-cheio);color:var(--v-sobre-cheio);font-size:15px}
.p-linha b{font-size:16px}
.p-linha .det{display:block;font-size:13.5px;color:var(--v-texto-2);overflow-wrap:anywhere}
.selo{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:3px 9px;border-radius:99px;margin-left:8px;vertical-align:2px}
.selo.ativa{background:var(--ok-lav);color:var(--ok)}
.selo.espera{background:var(--v-lavagem);color:var(--v-texto-2)}
.gerado{grid-column:2/-1;display:flex;gap:8px;align-items:center;padding:6px 6px 6px 14px;border-radius:14px;background:var(--v-lavagem);animation:entra .45s var(--mola) both}
.gerado code{flex:1;min-width:0;font:13px/1.3 ui-monospace,Menlo,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--v-texto)}
.gerado .btn{height:36px;font-size:13.5px}
.gerado-info{grid-column:2/-1;font-size:13px;color:var(--v-texto-2)}
.convidar{margin-top:20px;border-radius:var(--rv-3);padding:22px}
.convidar h2{margin:0;font-size:16px;font-weight:800}
.convidar p{margin:4px 0 14px;color:var(--v-texto-2);font-size:14px}
.convidar form{display:flex;gap:8px;flex-wrap:wrap}
.campo-txt{flex:1 1 240px;height:48px;border-radius:14px;border:0;padding:0 16px;background:var(--vidro-forte);box-shadow:var(--vidro-fio),inset 0 1px 2px rgba(0,0,0,.05);font-size:16px;color:var(--v-texto);transition:box-shadow .2s}
.campo-txt:focus{outline:none;box-shadow:0 0 0 2px var(--v-texto)}
.campo-txt[aria-invalid="true"]{box-shadow:0 0 0 2px var(--v-acc-texto)}
.msg-erro{min-height:20px;margin-top:8px;color:var(--v-acc-texto);font-size:14px;font-weight:600}

/* ======================================================================
   ENTRADA E CONVITE
   ====================================================================== */
.porta{min-height:100dvh;display:grid;place-items:center;padding:72px var(--gutter) 40px}
.porta-sol{position:relative;isolation:isolate;width:min(440px,100%)}
.porta-cartao{position:relative;z-index:1;width:100%;border-radius:var(--rv-4);padding:34px 30px 26px;animation:sobe .7s var(--mola) both}
@keyframes sobe{from{opacity:0;transform:translateY(18px) scale(.98)}}
.porta-sol.com-sol::before{right:-78px;top:-84px;width:176px;height:176px}
.porta-sol.com-sol::after{right:-34px;top:-48px;width:94px}
.porta .sobre{display:block}
.porta h1{font:400 clamp(48px,11vw,64px)/.95 var(--f-tit);text-transform:uppercase;letter-spacing:.008em;margin:12px 0 0}
.porta h1 em{font-family:var(--f-it);font-style:italic;text-transform:none;letter-spacing:0;font-size:.86em;color:var(--v-acc-texto)}
.porta .sub{color:var(--v-texto-2);margin:10px 0 26px;font-size:15px;max-width:34ch}
.campo{display:block;margin-bottom:14px}
.campo>span,.campo-rot{display:block;font-size:13px;font-weight:700;margin:0 0 6px 2px}
.caixa{position:relative}
.caixa input{width:100%;height:52px;border-radius:14px;border:0;padding:0 16px;background:var(--vidro-forte);box-shadow:var(--vidro-fio),inset 0 1px 2px rgba(0,0,0,.05);font-size:16px;transition:box-shadow .2s}
.caixa input::placeholder{color:var(--v-texto-3)}
.caixa input:focus{outline:none;box-shadow:0 0 0 2px var(--v-texto)}
.caixa input[aria-invalid="true"]{box-shadow:0 0 0 2px var(--v-acc-texto)}
.caixa.com-olho input{padding-right:56px}
.olho{position:absolute;right:4px;top:4px;width:44px;height:44px;border:0;border-radius:11px;background:none;cursor:pointer;display:grid;place-items:center;color:var(--v-texto-2);transition:background .2s,color .2s}
.olho:hover{background:var(--v-lavagem);color:var(--v-texto)}
.olho svg{width:21px;height:21px}
.olho .fechado{display:none}
.olho[aria-pressed="true"] .aberto{display:none}
.olho[aria-pressed="true"] .fechado{display:block}
.porta .linha{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 18px;flex-wrap:wrap}
.manter{display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;font-size:14.5px;font-weight:600;user-select:none;-webkit-user-select:none}
.manter input{position:absolute;opacity:0;width:1px;height:1px}
.manter i{width:22px;height:22px;border-radius:7px;background:var(--vidro-forte);box-shadow:var(--vidro-fio),inset 0 0 0 1.5px var(--v-texto-3);display:grid;place-items:center;flex:none;transition:background .2s,box-shadow .2s}
.manter i svg{width:14px;height:14px;color:var(--v-sobre-cheio)}
.manter i path{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .3s var(--mola)}
.manter input:checked+i{background:var(--v-cheio);box-shadow:none}
.manter input:checked+i path{stroke-dashoffset:0}
.manter input:focus-visible+i{outline:2px solid var(--v-texto);outline-offset:3px}
.link{appearance:none;border:0;background:none;cursor:pointer;color:var(--v-texto-2);font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--v-fio);min-height:44px;padding:0 2px}
.link:hover{color:var(--v-texto)}
.porta .nota-curta{font-size:14px;color:var(--v-texto-2);background:var(--v-lavagem);border-radius:12px;padding:12px 14px;margin:-6px 0 16px;animation:entra .35s var(--mola) both}
.porta .msg-erro{text-align:center;margin-top:12px}
.porta-rodape{margin-top:18px;padding-top:12px;border-top:1px solid var(--v-fio);text-align:center}
.quem-entra{display:flex;gap:8px;justify-content:center;margin:6px 0 12px;flex-wrap:wrap}
.quem-entra button{appearance:none;cursor:pointer;border:0;border-radius:99px;height:40px;padding:0 18px;background:var(--v-lavagem);font-weight:700}
.quem-entra button[aria-pressed="true"]{background:var(--v-cheio);color:var(--v-sobre-cheio)}
.porta .esq-linha{height:12px}

/* ======================================================================
   CELULAR E TABLET
   ====================================================================== */
@media (max-width:1100px){
  .destaque{grid-template-columns:1fr}
  .continuar{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:860px){
  .casca{grid-template-columns:minmax(0,1fr)}
  .lateral{position:fixed;left:0;top:0;bottom:0;margin:8px;height:auto;width:min(300px,calc(100vw - 56px));transform:translateX(calc(-100% - 16px));transition:transform .38s var(--mola);visibility:hidden}
  body.gaveta .lateral{transform:none;visibility:visible}
  body.gaveta .veu{opacity:1;pointer-events:auto}
  .topo-cel{position:sticky;top:0;z-index:25;display:flex;align-items:center;gap:6px;height:60px;padding:6px 10px 0;
    background:color-mix(in srgb,var(--fundo-body) 72%,transparent);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:0 .5px 0 var(--v-fio)}
  .topo-cel .btn-icone{width:44px;height:44px}
  .topo-cel .btn-icone svg{width:22px;height:22px}
  .topo-cel img{width:30px;height:auto}
  .topo-cel .onde{font-weight:800;font-size:16px;margin-left:4px;flex:1;min-width:0}
  .topo-cel .contador{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;padding:6px 11px;border-radius:99px;background:var(--v-lavagem)}
  .faixa-bordo{height:5px}
  .palco{padding:20px 16px 110px}
  .titulo-pg{font-size:clamp(44px,13vw,60px)}
  .titulo-pg em{display:block}
  .recado{margin-top:18px;padding:14px 16px}
  .recado img{display:none}
  .recado p{-webkit-line-clamp:2}
  .destaque{margin-top:44px;gap:14px}
  .continuar{grid-template-columns:1fr;gap:14px;padding:10px 10px 16px}
  .continuar .info{padding:0 6px}
  .continuar .acoes{flex-wrap:nowrap}
  .continuar .acoes>*{flex:1;justify-content:center}
  .com-sol::before{right:20px;top:-40px;width:96px;height:96px}
  .com-sol::after{right:42px;top:-24px;width:52px}
  .progresso{padding:18px 16px 16px;gap:14px}
  .anel{width:72px;height:72px}
  .pct{font-size:44px}
  .equipe{padding:16px}
  .membro{grid-template-columns:minmax(0,1fr) auto;gap:10px}
  .membro .trechos-wrap{grid-column:1/-1;grid-row:2}
  .barra{top:66px;margin:26px 0 0;border-radius:99px;padding:5px}
  .barra .indice{display:none}
  .barra .seg{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}
  .barra .seg button{height:40px;padding:0 6px}
  .barra .geral{display:none}
  .indice{order:2}
  .bloco{margin-top:40px;scroll-margin-top:170px}
  .grupo{margin-top:56px}
  .bloco-cab{flex-direction:column;align-items:stretch;gap:10px;margin-bottom:12px}
  .bloco-prog{text-align:left;display:flex;align-items:center;gap:10px}
  .bloco-prog .trilho{margin:0;flex:1;width:auto}
  /* lista no celular: uma superfície de vidro por bloco, linhas compactas */
  .grade{display:block;border-radius:var(--rv-3);padding:4px;background:var(--vidro);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--vidro-luz),var(--vidro-fio),var(--sombra-1)}
  .video{display:grid;grid-template-columns:132px minmax(0,1fr);gap:12px;align-items:start;padding:10px;border-radius:18px;background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .video+.video{border-top:1px solid var(--v-fio);border-radius:0}
  .video:hover{transform:none}
  .video .thumb{border-radius:12px}
  .video .dur{font-size:11.5px;padding:2px 6px;right:5px;bottom:5px}
  .video .play{display:none}
  .video .selo-visto{left:5px;top:5px;padding:3px 5px;font-size:0;gap:0}
  .corpo{padding:0}
  .corpo .canal{font-size:12.5px}
  .corpo .titulo{font-size:14.5px;margin-top:1px}
  .corpo .pe{padding-top:8px}
  .marcar{height:36px;font-size:13px;padding:0 12px 0 5px}
  .marcar .caixa{width:24px;height:24px}
  .quando{display:none}
  .nota p{font-size:19px}
  .aviso{bottom:calc(16px + env(safe-area-inset-bottom))}
  .p-linha{grid-template-columns:auto minmax(0,1fr);padding:14px 12px}
  .p-linha>.btn{grid-column:1/-1;width:100%}
  .gerado,.gerado-info{grid-column:1/-1}
  .convidar .btn{width:100%}
}
@media (max-width:480px){
  .porta{padding-top:84px;place-items:start center}
  .porta-cartao{padding:30px 20px 22px}
  .porta-sol.com-sol::before{right:-4px;top:-62px;width:116px;height:116px}
  .porta-sol.com-sol::after{right:22px;top:-40px;width:62px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}