/* ============================================================
   Concursos de Odonto — sistema "Arcada"

   Motivo estrutural: a arcada dentária. O prazo, que é o dado
   mais importante do site, é mostrado num medidor em arco. É o
   único elemento gráfico do layout, e existe por função.

   Regras da direção clínica:
   · seções são faixas separadas, alternando branco e água
   · curva em tudo (canto 16-26px, cápsula, botão redondo)
   · sombra difusa e baixa, nunca contorno duro
   · sem serif, sem monoespaçada, sem fio de jornal
   ============================================================ */

:root{
  --ground:#F4F7F7;
  --white:#FFFFFF;
  --mint:#E9F5F3;
  --ink:#16252B;
  --ink-2:#52666E;
  --mut:#8398A0;
  --line:#E2EBEB;

  --aqua:#0E9C93;
  --aqua-esc:#06736C;
  --aqua-fraco:#DFF3F0;

  --areia:#E0A272;
  --coral:#D2503A;
  --coral-fraco:#FBE6E1;
  --violeta:#7B6BC4;
  --violeta-fraco:#EDEAF9;

  --r-sm:12px;
  --r:16px;
  --r-md:20px;
  --r-lg:26px;
  --sombra:0 1px 2px rgba(22,37,43,.04), 0 10px 26px rgba(22,37,43,.055);
  --sombra-alta:0 2px 5px rgba(22,37,43,.06), 0 18px 44px rgba(22,37,43,.09);
  --largura:1080px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{margin:0; font-weight:700; line-height:1.18; letter-spacing:-.028em; text-wrap:balance}
h1{font-size:clamp(1.8rem,3.8vw,2.4rem)}
h2{font-size:1.4rem}
h3{font-size:1.05rem}
p{margin:0 0 1em}
a{color:inherit; text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--aqua); outline-offset:3px; border-radius:6px;
}
img{max-width:100%; height:auto; display:block}

.env{max-width:var(--largura); margin:0 auto; padding:0 26px}
.num{font-family:"Outfit",system-ui,sans-serif; font-variant-numeric:tabular-nums; font-weight:400}

.rot{
  font-size:10.5px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mut);
}
.eyebrow{
  display:block; font-size:11px; font-weight:800; letter-spacing:.15em;
  text-transform:uppercase; color:var(--aqua); margin-bottom:13px;
}

/* ── Cabeçalho ──────────────────────────────────────── */
.topo{background:var(--white); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40}
.topo-in{display:flex; align-items:center; gap:26px; height:66px}
.marca{display:flex; align-items:center; gap:11px; font-weight:800; font-size:1.02rem; letter-spacing:-.03em}
.marca .selo{
  width:30px; height:30px; border-radius:10px; background:var(--aqua);
  display:grid; place-items:center; flex:none;
}
.nav{display:flex; gap:24px; margin-left:auto; align-items:center}
.nav a{font-size:.9rem; font-weight:600; color:var(--ink-2)}
.nav a:hover,.nav a[aria-current]{color:var(--aqua-esc)}

/* "Cursos" é o único item do menu que leva para fora do portal (funil de
   vendas), por isso ganha cor própria em vez de seguir o cinza dos demais. */
.nav a.nav-destaque{color:var(--aqua-esc)}
.nav a.nav-destaque:hover{color:var(--coral)}

/* ── Botões ─────────────────────────────────────────── */
.btn{
  display:inline-block; background:var(--ink); color:#fff; border:1px solid var(--ink);
  border-radius:999px; padding:12px 26px; font-family:inherit; font-size:.88rem;
  font-weight:700; line-height:1.4; cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.btn:hover{background:var(--aqua-esc); border-color:var(--aqua-esc)}
.btn-aqua{background:var(--aqua); border-color:var(--aqua)}
.btn-aqua:hover{background:var(--aqua-esc); border-color:var(--aqua-esc)}
.btn-linha{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-linha:hover{background:var(--white); border-color:var(--aqua); color:var(--aqua-esc)}
.btn-perigo{background:var(--coral); border-color:var(--coral)}
.btn-perigo:hover{background:#B03E2B; border-color:#B03E2B}
.btn-sm{padding:9px 18px; font-size:.8rem}

/* ── Etiquetas ──────────────────────────────────────── */
.tag{
  display:inline-block; border-radius:999px; padding:4px 12px;
  font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
}
.t-aberto{background:var(--aqua-fraco);    color:var(--aqua-esc)}
.t-previsto{background:var(--violeta-fraco); color:var(--violeta)}
.t-urgente{background:var(--coral-fraco);  color:var(--coral)}
.t-breve{background:#EAF1F5;               color:#3D6C86}
.t-neutro{background:#EDF2F2;              color:var(--mut)}

/* ── Faixa de números ───────────────────────────────── */
/* ── Topo da home: H1 fixo do site, não do edital em destaque ────── */
.topo-home{background:var(--white); padding:34px 0 6px}
.selo-tempo{
  display:inline-flex; align-items:center; gap:8px; font-size:.78rem; font-weight:600;
  color:var(--ink-2); background:var(--mint); border:1px solid var(--line);
  padding:5px 13px; border-radius:999px; margin-bottom:14px;
}
.pisca{width:7px; height:7px; border-radius:50%; background:var(--aqua); box-shadow:0 0 0 0 var(--aqua); animation:pulso 2.4s infinite}
@keyframes pulso{
  0%{box-shadow:0 0 0 0 rgba(14,156,147,.5)}
  70%{box-shadow:0 0 0 7px rgba(14,156,147,0)}
  100%{box-shadow:0 0 0 0 rgba(14,156,147,0)}
}
.topo-home h1{margin-bottom:12px}
.chamada{color:var(--ink-2); font-size:1.02rem; max-width:70ch; margin:0}

.tira{background:var(--white); border-bottom:1px solid var(--line); padding:18px 0 30px}
.tira-in{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.stat{background:var(--mint); border-radius:var(--r); padding:12px 20px; min-width:120px}
.stat .v{font-family:"Outfit",sans-serif; font-size:1.6rem; font-weight:400; color:var(--aqua-esc); line-height:1.1; font-variant-numeric:tabular-nums}
.stat .l{font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--mut); margin-top:2px}
.tira .quando{margin-left:auto; font-size:.8rem; color:var(--mut); font-weight:600}

/* ── Manchete ───────────────────────────────────────── */
.hero{background:var(--white); padding:36px 0 46px}
.painel{
  background:var(--mint); border-radius:var(--r-lg); padding:36px 38px;
  display:grid; grid-template-columns:1fr 178px; gap:36px; align-items:center;
  position:relative; overflow:hidden;
}
/* Preparado para receber foto de fundo depois: basta preencher --capa.
   Sem imagem, o painel fica no verde-água e nada quebra. */
.painel[style*="--capa"]::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:var(--capa); background-size:cover; background-position:center;
  opacity:.22;
}
.painel > *{position:relative; z-index:1}
.painel h2{font-size:clamp(1.5rem,3.2vw,2rem); margin:12px 0 8px}
.painel .org{color:var(--ink-2); font-size:.94rem; margin:0 0 22px}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px}
.chip{background:var(--white); border-radius:999px; padding:8px 16px; font-size:.83rem; font-weight:600}
.chip b{font-family:"Outfit",sans-serif; font-weight:500; font-variant-numeric:tabular-nums}

/* ── O arco: assinatura do projeto ──────────────────── */
.arco{text-align:center}
.arco svg{display:block; margin:0 auto}
.arco .dias{
  font-family:"Outfit",sans-serif; font-weight:300; line-height:1;
  color:var(--aqua-esc); font-variant-numeric:tabular-nums;
  font-size:2.9rem; margin-top:-32px;
}
.arco .rot{margin-top:8px; display:block}
.arco.u-atencao .dias{color:var(--areia)}
.arco.u-urgente .dias{color:var(--coral)}
.arco.u-neutro .dias{font-size:1.6rem; color:var(--mut)}

/* ── Seções ─────────────────────────────────────────── */
.secao{padding:52px 0}
.secao-mint{background:var(--mint)}
.secao-branca{background:var(--white)}
.secao-topo{display:flex; align-items:baseline; justify-content:space-between; gap:18px; margin-bottom:24px}
.secao-topo h2{margin:0}
.secao-topo .ver{font-size:.86rem; font-weight:700; color:var(--aqua-esc); white-space:nowrap}
.secao-nota{color:var(--mut); font-size:.9rem; max-width:60ch; margin:-16px 0 22px}

/* ── Cartões de edital ──────────────────────────────── */
.grade{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.grade-mini{grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}

.cartao{
  background:var(--white); border-radius:var(--r-md); padding:22px 24px;
  box-shadow:var(--sombra); display:grid; gap:9px; align-content:start;
  transition:box-shadow .18s ease, transform .18s ease;
}
.cartao:hover{box-shadow:var(--sombra-alta); transform:translateY(-2px)}
.secao-branca .cartao{background:var(--ground)}
.cartao .tag{justify-self:start}
.cartao h3{font-size:.99rem; line-height:1.32}
.cartao .onde{font-size:.79rem; color:var(--mut); font-weight:700}
.cartao .dados{display:flex; flex-wrap:wrap; gap:4px 18px; font-size:.85rem; color:var(--ink-2)}
.cartao .dados b{font-family:"Outfit",sans-serif; font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums}
.cartao .pe{display:flex; align-items:center; gap:12px; margin-top:4px; padding-top:14px; border-top:1px solid var(--line)}
.secao-branca .cartao .pe{border-top-color:#E5ECEC}
.cartao .pe .d{font-family:"Outfit",sans-serif; font-size:1.5rem; font-weight:300; color:var(--aqua-esc); line-height:1; font-variant-numeric:tabular-nums}
.cartao .pe .t{font-size:.77rem; color:var(--mut); font-weight:600; line-height:1.32}
.cartao.u-atencao .pe .d{color:var(--areia)}
.cartao.u-urgente .pe .d{color:var(--coral)}

.cartao-mini{padding:16px 19px; gap:6px}
.cartao-mini h3{font-size:.9rem}

/* ── Leituras ───────────────────────────────────────── */
.posts{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(272px,1fr))}
.post{
  background:var(--ground); border-radius:var(--r-md); overflow:hidden;
  box-shadow:var(--sombra); transition:box-shadow .18s ease, transform .18s ease;
}
.secao-mint .post{background:var(--white)}
.post:hover{box-shadow:var(--sombra-alta); transform:translateY(-2px)}
.post .capa{height:104px; background-size:cover; background-position:center}
.capa-1{background-image:linear-gradient(135deg,#0E9C93,#5CC9BC)}
.capa-2{background-image:linear-gradient(135deg,#7B6BC4,#0E9C93)}
.capa-3{background-image:linear-gradient(135deg,#E0A272,#0E9C93)}
.capa-4{background-image:linear-gradient(135deg,#06736C,#7B6BC4)}
.post .corpo{padding:16px 19px 20px}
.post .cat{font-size:10px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--aqua-esc)}
.post h3{font-size:.96rem; margin:7px 0 7px; line-height:1.33}
.post p{font-size:.84rem; color:var(--ink-2); margin:0}

.artigo{max-width:66ch; margin:0 auto; padding:48px 0 76px}
.artigo h1{font-size:clamp(1.8rem,4vw,2.5rem); margin-bottom:12px}
.artigo .meta-post{font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--aqua-esc); margin-bottom:32px}
.artigo p{font-size:1.04rem; line-height:1.75; color:var(--ink-2)}
.artigo h2{font-size:1.35rem; margin:1.9em 0 .5em; color:var(--ink)}
.artigo ul,.artigo ol{padding-left:1.2em; color:var(--ink-2); font-size:1.02rem; line-height:1.72}
.artigo li{margin-bottom:.45em}
.artigo strong{color:var(--ink); font-weight:700}
.artigo blockquote{
  margin:1.8em 0; background:var(--mint); border-radius:var(--r);
  padding:20px 24px; font-size:1.04rem; color:var(--ink);
}
.artigo blockquote p:last-child{margin:0}
.artigo code{background:var(--mint); border-radius:6px; padding:.1em .4em; font-size:.9em}
.voltar{display:inline-block; font-size:.83rem; font-weight:700; color:var(--mut); margin-bottom:24px}
.voltar:hover{color:var(--aqua-esc)}

/* ── Estados ────────────────────────────────────────── */
.ufs{display:flex; flex-wrap:wrap; gap:9px}
.ufs a{
  background:var(--white); border-radius:999px; padding:10px 19px;
  display:inline-flex; align-items:baseline; gap:9px;
  transition:background .15s ease, color .15s ease;
}
.secao-branca .ufs a{background:var(--ground)}
.ufs a:hover{background:var(--aqua); color:#fff}
.ufs .sigla{font-weight:800; font-size:.86rem}
.ufs .qtd{font-family:"Outfit",sans-serif; font-size:.8rem; color:var(--mut); font-variant-numeric:tabular-nums}
.ufs a:hover .qtd{color:#CFEDE9}

/* ── Captação ───────────────────────────────────────── */
.capta{
  background:var(--ink); color:#fff; border-radius:var(--r-lg); padding:38px 40px;
  display:flex; flex-wrap:wrap; gap:26px; align-items:center; justify-content:space-between;
}
.capta h2{margin-bottom:7px}
.capta p{color:#A9BEC2; font-size:.92rem; max-width:46ch; margin:0}

/* ── Formulários ────────────────────────────────────── */
.campo{display:grid; gap:7px}
.campo label{font-size:10.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--mut)}
.campo input,.campo select,.campo textarea{
  font-family:inherit; font-size:.93rem; padding:12px 16px; width:100%;
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--white); color:var(--ink);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:0; border-color:var(--aqua)}
.campo textarea{min-height:96px; resize:vertical}
.painel-form{background:var(--white); border-radius:var(--r-md); padding:28px 30px; box-shadow:var(--sombra)}
.filtros{
  background:var(--white); border-radius:var(--r-md); padding:22px 24px; box-shadow:var(--sombra);
  display:grid; gap:16px 20px; grid-template-columns:repeat(auto-fit,minmax(164px,1fr)); align-items:end;
  margin-bottom:26px;
}
.form-alerta{display:grid; gap:18px 22px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); align-items:end}

/* ── Detalhe ────────────────────────────────────────── */
.detalhe{display:grid; grid-template-columns:1fr 300px; gap:32px; align-items:start; padding:38px 0 72px}
.bloco{background:var(--white); border-radius:var(--r-md); padding:26px 28px; box-shadow:var(--sombra)}
.bloco + .bloco{margin-top:14px}
.bloco h2{font-size:1.05rem; margin-bottom:16px}
.tabela{width:100%; border-collapse:collapse; font-size:.9rem}
.tabela th{
  text-align:left; padding:0 14px 10px 0; border-bottom:1px solid var(--line);
  font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--mut); font-weight:800;
}
.tabela td{padding:13px 14px 13px 0; border-bottom:1px solid var(--line); vertical-align:top}
.tabela tr:last-child td{border-bottom:0}
.tabela .n{font-family:"Outfit",sans-serif; font-variant-numeric:tabular-nums}
.wrap-tabela{overflow-x:auto}
.ficha{margin:0}
.ficha div{display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--line); font-size:.88rem}
.ficha div:last-child{border-bottom:0}
.ficha dt{color:var(--mut); font-weight:600}
.ficha dd{margin:0; font-weight:700; text-align:right}
.trecho{
  background:var(--mint); border-radius:var(--r); padding:18px 20px;
  font-size:.92rem; color:var(--ink-2); margin:0;
}

/* ── Avisos ─────────────────────────────────────────── */
.flash{
  background:var(--aqua-fraco); color:var(--aqua-esc); border-radius:var(--r);
  padding:14px 20px; margin:22px 0; font-size:.92rem; font-weight:600;
}
.flash-erro{background:var(--coral-fraco); color:var(--coral)}
.vazio{
  background:var(--white); border-radius:var(--r-md); padding:56px 24px;
  text-align:center; color:var(--mut); box-shadow:var(--sombra);
}
.secao-branca .vazio{background:var(--ground); box-shadow:none}

/* ── Paginação ──────────────────────────────────────── */
.paginacao{display:flex; gap:7px; justify-content:center; margin-top:32px; flex-wrap:wrap}
.paginacao a,.paginacao span{
  min-width:40px; text-align:center; padding:10px 14px; border-radius:999px;
  background:var(--white); font-size:.85rem; font-weight:700; color:var(--ink-2);
}
.paginacao a:hover{background:var(--aqua-fraco); color:var(--aqua-esc)}
.paginacao .atual{background:var(--ink); color:#fff}

/* ── Rodapé ─────────────────────────────────────────── */
.rodape{background:var(--white); border-top:1px solid var(--line); padding:34px 0 44px; color:var(--mut); font-size:.86rem}
.rodape-links{display:flex; flex-wrap:wrap; gap:22px; margin-bottom:16px}
.rodape-links a{font-size:.86rem; font-weight:700; color:var(--ink-2)}
.rodape-links a:hover{color:var(--aqua-esc)}
.rodape p{max-width:62ch; margin:0}

/* ============================================================
   Admin — mesma linguagem, densidade maior.
   ============================================================ */
.admin-topo{background:var(--ink); border-bottom:0}
.admin-topo .marca{color:#fff}
.admin-topo .marca .selo{background:var(--aqua)}
.admin-topo .nav a{color:#A9BEC2}
.admin-topo .nav a:hover,.admin-topo .nav a[aria-current]{color:#fff}
.admin-corpo{padding:34px 0 76px}
.badge-fila{
  background:var(--aqua); color:#fff; border-radius:999px; padding:2px 9px;
  font-size:.72rem; font-weight:800; margin-left:6px;
}
.cartoes{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(172px,1fr)); margin:22px 0 32px}
.contador{background:var(--white); border-radius:var(--r); padding:16px 20px; box-shadow:var(--sombra)}
.contador .n{font-family:"Outfit",sans-serif; font-size:1.7rem; font-weight:400; color:var(--aqua-esc); line-height:1.1; font-variant-numeric:tabular-nums}
.contador .r{font-size:10px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--mut); margin-top:3px}
.fila-item{
  display:block; background:var(--white); border-radius:var(--r-md); padding:20px 22px;
  box-shadow:var(--sombra); margin-bottom:12px; transition:box-shadow .18s ease;
}
.fila-item:hover{box-shadow:var(--sombra-alta)}
.fila-topo{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:9px}
.confianca{font-family:"Outfit",sans-serif; font-size:1.15rem; font-weight:500; font-variant-numeric:tabular-nums}
.conf-alta{color:var(--aqua-esc)} .conf-media{color:var(--areia)} .conf-baixa{color:var(--coral)}
.fila-item h3{font-size:1rem; margin-bottom:8px}
.fila-item .meta{display:flex; flex-wrap:wrap; gap:4px 18px; font-size:.84rem; color:var(--ink-2)}
.fila-item .onde{font-size:.78rem; color:var(--mut); font-weight:700}
.form-grid{display:grid; gap:18px 22px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.form-acoes{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; padding-top:22px; border-top:1px solid var(--line)}
.cargo-linha{display:grid; gap:16px 18px; grid-template-columns:2fr 1.4fr .7fr 1fr .8fr; align-items:end; padding:18px 0; border-bottom:1px solid var(--line)}
.login-caixa{
  max-width:400px; margin:11vh auto; background:var(--white); border-radius:var(--r-lg);
  padding:38px 36px; box-shadow:var(--sombra-alta);
}
.login-caixa .marca{margin-bottom:28px}

/* ── Responsivo ─────────────────────────────────────── */
@media (max-width:900px){
  .painel{grid-template-columns:1fr; gap:26px}
  .arco{justify-self:start}
  .detalhe{grid-template-columns:1fr; gap:22px}
  .cargo-linha{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .env{padding:0 18px}
  .topo-in{height:60px; gap:16px}
  .nav{gap:16px}
  .nav a:not(.btn){display:none}
  .tira .quando{margin-left:0; width:100%}
  .painel{padding:26px 22px}
  .secao{padding:38px 0}
  .grade,.posts{grid-template-columns:1fr}
  .capta{padding:28px 24px}
  .filtros{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}

/* ============================================================
   Página de edital, versão longa (v2, em teste)
   Mesma linguagem Arcada: curva, respiro e faixas alternadas.
   ============================================================ */

/* Hero escuro: título, salário e ficha do edital numa dobra só. É a única
   seção escura da página — quebra o branco do resto do site e dá peso ao
   número que mais importa. Textura de fundo pelo mesmo mecanismo de --capa
   que .painel já usa: um degradê por padrão, substituível por foto depois. */
.v2-hero{
  --capa: linear-gradient(160deg, #0B1A1F 0%, #16252B 55%, #0E2624 100%);
  background:var(--ink); background-image:var(--capa); background-size:cover; background-position:center;
  color:#fff; padding:44px 0 50px; position:relative; overflow:hidden;
}
.v2-hero::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:radial-gradient(circle at 15% 20%, rgba(14,156,147,.22), transparent 55%);
}
.v2-hero .env{position:relative; z-index:1}
.v2-hero .voltar{color:#A9BEC2}
.v2-hero .voltar:hover{color:#fff}
.v2-etiquetas{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px}
.v2-hero .tag.t-neutro{background:rgba(255,255,255,.12); color:#fff}
.v2-hero h1{font-size:clamp(1.6rem,3.6vw,2.3rem); margin-bottom:12px; color:#fff}
.v2-resumo{color:#A9BEC2; font-size:1.02rem; max-width:64ch; margin-bottom:8px}

.v2-ficha{
  display:grid; gap:1px; grid-template-columns:repeat(6,1fr);
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-md); overflow:hidden;
  margin-top:26px;
}
/* Número de colunas casado com a quantidade de itens (que varia por edital,
   já que célula sem dado some), para nunca sobrar um item sozinho na
   última linha. Cada .qtd-N cabe inteiro numa linha só no desktop. */
.v2-ficha.qtd-1{grid-template-columns:1fr}
.v2-ficha.qtd-2{grid-template-columns:repeat(2,1fr)}
.v2-ficha.qtd-3{grid-template-columns:repeat(3,1fr)}
.v2-ficha.qtd-4{grid-template-columns:repeat(4,1fr)}
.v2-ficha.qtd-5{grid-template-columns:repeat(5,1fr)}
.v2-ficha div{background:rgba(22,37,43,.55); padding:15px 18px; display:grid; gap:3px}
.v2-ficha .r{font-size:10px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:#A9BEC2}
.v2-ficha .d{font-family:"Outfit",sans-serif; font-size:1.02rem; font-weight:500; color:#fff; font-variant-numeric:tabular-nums}
.v2-acoes{display:flex; flex-wrap:wrap; gap:12px; margin-top:22px}
.v2-hero .btn-linha{color:#fff; border-color:rgba(255,255,255,.3)}
.v2-hero .btn-linha:hover{background:rgba(255,255,255,.08); border-color:#fff; color:#fff}

/* O salário, tratado como manchete e não como campo de tabela. */
.v2-salario{padding:8px 0 4px}
.v2-salario-linha{font-size:1.05rem; color:#A9BEC2; margin:0}
.v2-salario-valor{
  font-family:"Outfit",sans-serif; font-weight:200; line-height:1;
  font-size:clamp(2.8rem,9vw,5.2rem); color:#fff;
  letter-spacing:-.03em; margin:6px 0; font-variant-numeric:tabular-nums;
}
.v2-salario-texto{max-width:56ch; margin:22px auto 0; color:#A9BEC2; font-size:.98rem}

/* Relógio */
.relogio{display:flex; flex-wrap:wrap; gap:12px; margin:6px 0 0}
.relogio > div{
  background:var(--white); border-radius:var(--r); padding:16px 22px;
  min-width:92px; text-align:center; box-shadow:var(--sombra);
}
.secao-branca .relogio > div{background:var(--ground); box-shadow:none}
.relogio .n{
  display:block; font-family:"Outfit",sans-serif; font-weight:300; font-size:2rem;
  line-height:1; color:var(--aqua-esc); font-variant-numeric:tabular-nums;
}
.relogio .r{display:block; margin-top:6px; font-size:10px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--mut)}
.relogio.u-atencao .n{color:var(--areia)}
.relogio.u-urgente .n{color:var(--coral)}
.relogio.encerrado{opacity:.5}
.v2-cta-linha{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px}

/* Comparativo. A coluna A é o método solto, a B é o método pelo edital.
   Regra de copy: nenhuma célula da coluna A tem sujeito humano. */
.comparativo{
  background:var(--white); border-radius:var(--r-md); overflow:hidden;
  box-shadow:var(--sombra); margin-top:8px;
}
.secao-branca .comparativo{background:var(--ground); box-shadow:none}
.comp-cab,.comp-linha{display:grid; grid-template-columns:150px 1fr 1fr; gap:0}
.comp-cab{border-bottom:1px solid var(--line)}
.comp-cab span{padding:14px 18px; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase}
.comp-cab .lado-a{color:var(--coral); background:var(--coral-fraco)}
.comp-cab .lado-b{color:var(--aqua-esc); background:var(--aqua-fraco)}
.comp-linha{border-bottom:1px solid var(--line)}
.comp-linha:last-child{border-bottom:0}
.comp-linha .eixo{padding:16px 18px; font-size:.82rem; font-weight:700; color:var(--mut)}
.comp-linha .cel{padding:16px 18px; font-size:.88rem; color:var(--ink-2)}
.comp-linha .cel-a{background:rgba(210,80,58,.045)}
.comp-linha .cel-b{background:rgba(14,156,147,.05); color:var(--ink)}
.comp-fecho{margin-top:22px; color:var(--ink-2); max-width:66ch}

/* Oferta */
.oferta{background:var(--ink); color:#fff; border-radius:var(--r-lg); padding:40px 42px}
.oferta h2{color:#fff}
.oferta p{color:#A9BEC2; max-width:60ch}
.oferta .tag{background:rgba(14,156,147,.22); color:#7FD8CF}
/* Preço numa linha só: a parcela é o número que decide, "12x de" e "à vista"
   são só contexto — por isso ficam menores e mais apagados que o valor. */
.oferta-preco{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:8px;
  margin:24px 0 26px; max-width:none;
}
.oferta-parcelas{font-size:1rem; color:#A9BEC2}
.oferta-preco b{
  font-family:"Outfit",sans-serif; font-weight:400; font-size:2.6rem; color:#fff;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.oferta-vista{font-size:.88rem; color:#A9BEC2; width:100%}

/* CTA principal sozinho e centralizado; o WhatsApp vem depois, menor e
   secundário — não compete em peso com o botão de conversão. */
.oferta-acoes{display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:4px}
.oferta-acoes .btn-linha{font-size:.85rem; padding:9px 20px}

.oferta-garantia{font-size:.88rem; margin-top:18px}
.oferta-social{margin-top:20px; font-size:.85rem; padding-top:18px; border-top:1px solid rgba(255,255,255,.12)}
.oferta .btn-linha{color:#fff; border-color:rgba(255,255,255,.3)}
.oferta .btn-linha:hover{background:transparent; border-color:#fff; color:#fff}

.objecoes{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.objecoes > div{background:var(--ground); border-radius:var(--r-md); padding:22px 24px}
.objecoes h3{margin-bottom:8px; font-size:1rem}
.objecoes p{margin:0; font-size:.89rem; color:var(--ink-2)}

/* FAQ */
.faq{background:var(--white); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--sombra)}
.secao-branca .faq{background:var(--ground); box-shadow:none}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{
  cursor:pointer; padding:18px 24px; font-weight:700; font-size:.96rem;
  list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--aqua); font-size:1.3rem; line-height:1; font-weight:400}
.faq details[open] summary::after{content:"\2013"}
.faq details p{margin:0; padding:0 24px 20px; color:var(--ink-2); font-size:.92rem; max-width:70ch}

.v2-assinatura{font-size:.85rem; color:var(--mut); max-width:70ch; margin:0}
.v2-assinatura a{color:var(--aqua-esc); font-weight:600}

@media (max-width:760px){
  .comp-cab,.comp-linha{grid-template-columns:1fr}
  .comp-cab span:first-child{display:none}
  .comp-linha .eixo{padding-bottom:4px; background:var(--white)}
  .secao-branca .comp-linha .eixo{background:var(--ground)}
  .oferta{padding:28px 24px}
}

/* ── v2: alinhamento e telas do produto ─────────────── */
/* A página inteira fica centrada, sem a quebra de alinhamento que aparecia
   no meio do documento original. O texto corrido dentro de cartão e de
   célula continua alinhado à esquerda de propósito: parágrafo centrado
   com mais de duas linhas custa legibilidade. */
.v2 .secao{text-align:center}
.v2 .secao > .env > h2{margin-left:auto; margin-right:auto; margin-bottom:14px}
.v2 .secao > .env > .secao-nota,
.v2 .comp-fecho{margin-left:auto; margin-right:auto}
.v2 .secao-nota{max-width:66ch; margin-top:0}
.v2 .v2-cta-linha{justify-content:center; align-items:center}
.v2 .relogio{justify-content:center}
.v2 .secao-topo{justify-content:center; gap:14px}
.v2 .cartao,
.v2 .objecoes > div,
.v2 .comp-linha,
.v2 .faq{text-align:left}
.v2 .oferta{text-align:center}
.v2 .oferta p{margin-left:auto; margin-right:auto}
.v2 .oferta .v2-cta-linha{justify-content:center}
.v2-hero{text-align:center}
.v2-hero .voltar{display:inline-block}
.v2-etiquetas{justify-content:center}
.v2-resumo{margin-left:auto; margin-right:auto}
.v2-ficha{margin-left:auto; margin-right:auto; max-width:640px}
.v2-acoes{justify-content:center}
.v2-salario-texto{margin-left:auto; margin-right:auto}
.v2-assinatura{margin-left:auto; margin-right:auto; text-align:center}

/* As três telas do produto: uma sequência empilhada e centralizada, não um
   grid lado a lado — cada imagem ocupa a largura toda antes da próxima. */
.telas{
  display:grid; gap:28px; grid-template-columns:1fr;
  max-width:640px; margin:8px auto 0; text-align:left;
}
.tela{
  margin:0; background:var(--white); border-radius:var(--r-md); overflow:hidden;
  box-shadow:var(--sombra); display:grid; align-content:start;
}
.secao-branca .tela{background:var(--ground)}
.tela img{width:100%; height:auto; background:var(--mint)}
.tela figcaption{padding:18px 22px 22px}
.tela h3{margin-bottom:7px; font-size:1rem}
.tela p{margin:0; font-size:.88rem; color:var(--ink-2)}

@media (max-width:620px){
  .v2 .secao-topo{flex-direction:column}

  /* Hero mais compacto no celular: é a primeira coisa que a pessoa vê antes
     de saber se vale rolar a página, então não pode gastar duas telas só
     com título e ficha. */
  .v2-hero{padding:32px 0 36px}
  .v2-hero h1{font-size:1.35rem}
  .v2-resumo{font-size:.9rem}
  .v2-salario-valor{font-size:2.5rem}
  .v2-salario-linha{font-size:.92rem}
  .v2-salario-texto{font-size:.88rem; margin-top:16px}
  .v2-etiquetas .tag{font-size:9.5px; padding:3px 10px}

  .v2-ficha{grid-template-columns:1fr 1fr; margin-top:18px; font-size:.9rem}
  .v2-ficha.qtd-1{grid-template-columns:1fr}
  .v2-ficha div{padding:11px 12px}
  .v2-ficha .r{font-size:9px}
  .v2-ficha .d{font-size:.88rem}
  /* Contagem ímpar no celular: o último item vira manchete da própria
     linha, em vez de ficar sozinho ocupando só metade da grade. */
  .v2-ficha.qtd-3 div:last-child,
  .v2-ficha.qtd-5 div:last-child{grid-column:1 / -1}

  .relogio{gap:8px}
  .relogio > div{min-width:0; flex:1 1 68px; padding:12px 8px}
  .relogio .n{font-size:1.5rem}
}

/* ============================================================
   Listagem de editais: tabela (desktop) + cartões (mobile),
   filtro e ordenação no cliente (public/assets/js/editais.js).
   ============================================================ */

/* Container mais largo que o --largura padrão (1080px), só para a tabela ter
   espaço para as colunas extras (Carga, Banca) sem espremer o Órgão. */
.env-larga{max-width:1520px; margin:0 auto; padding:0 26px}

.tabela-editais{margin-bottom:26px}
.cartoes-editais{display:none}

.tabela th[data-ordena]{cursor:pointer; user-select:none}
.tabela th[data-ordena]:hover{color:var(--aqua-esc)}
.tabela th[data-ordena] .seta{display:inline-block; width:1em; margin-left:3px; font-size:.75em; color:var(--mut)}
.tabela th.ordenado-asc,.tabela th.ordenado-desc{color:var(--aqua-esc)}
.tabela th.ordenado-asc .seta,.tabela th.ordenado-desc .seta{color:var(--aqua-esc)}
.tabela th.ordenado-asc .seta::after{content:"▲"}
.tabela th.ordenado-desc .seta::after{content:"▼"}

/* O salário é o dado que mais pesa na decisão de quem olha a tabela: precisa
   se destacar de longe, não competir em peso com as outras colunas. */
.tabela td.dinheiro{
  font-family:"Outfit",sans-serif; font-weight:600; font-size:1.05rem;
  color:var(--aqua-esc); white-space:nowrap;
}

/* Barrinha do Índice de Oportunidade: a nota em número e, ao lado, um trilho
   que enche proporcional a ela — mesma leitura rápida do medidor de prazo. */
.indice{display:inline-flex; align-items:center; gap:8px; font-family:"Outfit",sans-serif}
.indice b{font-weight:500; font-variant-numeric:tabular-nums; min-width:1.6em; text-align:right; color:var(--ink)}
.indice .barra{display:inline-block; width:54px; height:6px; border-radius:999px; background:var(--line); overflow:hidden}
.indice .barra i{display:block; height:100%; border-radius:999px; background:var(--mut)}
.indice-maxima .barra i{background:var(--aqua-esc)}
.indice-maxima b{color:var(--aqua-esc)}
.indice-alta .barra i{background:var(--aqua)}
.indice-media .barra i{background:var(--areia)}
.indice-baixa .barra i{background:var(--coral-fraco)}
.indice-baixa b{color:var(--mut)}

@media (max-width:760px){
  .tabela-editais{display:none}
  .cartoes-editais{display:grid}
  .env-larga{padding:0 18px}
}

/* ============================================================
   A demonstração do método, com ponteiro do mouse
   Substitui a primeira das três telas em "Como o seu plano é montado".
   O motor está em js/demo-metodo.js. Sem JavaScript, ou com
   prefers-reduced-motion ligado, a imagem estática continua no lugar.
   ============================================================ */
.dm{
  position:relative; background:var(--white); border-radius:var(--r-md);
  overflow:hidden; box-shadow:var(--sombra);
}
.dm[hidden]{display:none}

/* trilha das quatro etapas */
.dm-passos{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border-bottom:1px solid var(--line);
}
.dm-passo{
  position:relative; overflow:hidden; border:0; cursor:pointer;
  background:var(--white); font-family:inherit; color:var(--mut);
  display:flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 6px; font-size:.72rem; font-weight:600;
  transition:color .3s ease, background .3s ease;
}
.dm-passo-n{
  width:17px; height:17px; flex:none; border-radius:50%;
  background:var(--line); color:var(--ink-2);
  font-family:"Outfit",sans-serif; font-size:.66rem; font-weight:500;
  display:grid; place-items:center; transition:all .3s ease;
}
.dm-passo.dm-feito{color:var(--ink-2)}
.dm-passo.dm-feito .dm-passo-n{background:var(--aqua-fraco); color:var(--aqua-esc)}
.dm-passo.dm-atual{color:var(--aqua-esc); background:var(--aqua-fraco)}
.dm-passo.dm-atual .dm-passo-n{background:var(--aqua); color:#fff}
.dm-passo-barra{position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--aqua)}
.dm-passo.dm-atual .dm-passo-barra{width:100%; transition:width .5s ease}

/* palco onde as cenas trocam */
.dm-tela{
  position:relative; aspect-ratio:16/10; background:var(--ground);
  overflow:hidden;
}
.dm-cena{
  position:absolute; inset:0; padding:14px 16px;
  display:flex; flex-direction:column; gap:9px;
  opacity:0; visibility:hidden; transform:translateY(9px);
  transition:opacity .34s ease, transform .4s ease, visibility .34s;
}
.dm-cena.dm-on{opacity:1; visibility:visible; transform:none}
.dm-cab{
  font-size:.74rem; font-weight:700; color:var(--ink); flex:none;
  display:flex; align-items:center; gap:7px;
}
.dm-tags{margin-left:auto; display:flex; gap:5px}
.dm-tag{
  font-size:.55rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  border-radius:99px; padding:3px 9px; white-space:nowrap;
}
.dm-tag-carga{background:var(--violeta-fraco); color:var(--violeta)}
.dm-tag-sal{background:var(--aqua-fraco); color:var(--aqua-esc)}
/* as colunas da lista repetem a cor do badge, senao a legenda nao liga em nada */
.dm-linha-carga{color:var(--violeta); font-weight:700}

.dm-cab small{
  font-weight:600; font-size:.6rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-2); background:var(--line); border-radius:99px; padding:2px 7px;
}

/* 1. mapa */
.dm-rolagem{flex:0 1 auto; max-height:196px; overflow:hidden; border-radius:var(--r-sm); background:var(--white); border:1px solid var(--line)}
.dm-lista{padding:5px}
.dm-linha{
  display:grid; grid-template-columns:1fr auto auto 0; align-items:center; gap:9px;
  padding:8px 10px; border-radius:9px; font-size:.72rem;
  border:1.5px solid transparent; transition:all .35s ease;
}
.dm-linha + .dm-linha{margin-top:3px}
.dm-linha-cid{font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dm-linha-carga{font-size:.66rem}
.dm-linha-sal{font-family:"Outfit",sans-serif; font-weight:500; color:var(--aqua-esc); font-variant-numeric:tabular-nums}
.dm-linha-ok{opacity:0; color:var(--aqua); font-weight:700; transition:opacity .3s ease}
.dm-linha.dm-escolhida{
  border-color:var(--aqua); background:var(--aqua-fraco);
  grid-template-columns:1fr auto auto 16px;
}
.dm-linha.dm-escolhida .dm-linha-ok{opacity:1}

/* 2. incidência */
/* Um azul que a paleta do site não tinha. As três faixas precisam de três
   cores que ninguém confunda, e violeta já é a revisão nova no calendário. */
.dm{--dm-azul:#3E7BC4; --dm-verde:#2E9E5B}
.dm-carregando{
  flex:1; display:none; flex-direction:column; align-items:center; justify-content:center; gap:11px;
}
.dm-carregando.dm-on{display:flex}
.dm-carregando em{font-style:normal; font-size:.7rem; color:var(--ink-2); font-weight:600}
.dm-spin{
  width:30px; height:30px; border-radius:50%;
  border:3px solid var(--line); border-top-color:var(--aqua);
  animation:dmGira .85s linear infinite;
}
@keyframes dmGira{to{transform:rotate(360deg)}}

.dm-barras{
  flex:1; display:none; flex-direction:column; justify-content:center; gap:9px;
}
.dm-barras.dm-on{display:flex}
.dm-barra{
  display:grid; grid-template-columns:minmax(78px,1.1fr) 2.6fr 32px 44px;
  align-items:center; gap:9px;
  opacity:0; transform:translateX(-8px); transition:opacity .3s ease, transform .3s ease;
}
.dm-barra.dm-on{opacity:1; transform:none}
.dm-barra-m{font-size:.66rem; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dm-barra-t{height:9px; background:var(--line); border-radius:99px; overflow:hidden}
.dm-barra-t i{display:block; height:100%; width:0; border-radius:99px; transition:width .6s cubic-bezier(.2,.7,.2,1)}
.dm-barra-p{
  font-family:"Outfit",sans-serif; font-weight:500; font-size:.72rem;
  color:var(--ink); text-align:right; font-variant-numeric:tabular-nums;
}
/* uma cor por matéria */
.dm-c0 .dm-barra-t i{background:var(--coral)}
.dm-c1 .dm-barra-t i{background:var(--areia)}
.dm-c2 .dm-barra-t i{background:var(--violeta)}
.dm-c3 .dm-barra-t i{background:var(--aqua)}
.dm-c4 .dm-barra-t i{background:var(--dm-azul)}
/* a faixa, que é a leitura pronta do número */
.dm-barra-n{
  font-size:.55rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  border-radius:99px; padding:3px 0; text-align:center;
}
.dm-n-alta{background:var(--coral-fraco); color:var(--coral)}
.dm-n-media{background:#FBEEE2; color:#B06A28}
.dm-n-baixa{background:#E4EDF9; color:var(--dm-azul)}
.dm-barra.dm-topo .dm-barra-m,.dm-barra.dm-topo .dm-barra-p{color:var(--coral)}
.dm-nota{flex:none; font-size:.63rem; color:var(--mut)}

/* 3. rotina */
.dm-semana{flex:1; display:grid; grid-template-columns:repeat(5,1fr); gap:5px; min-height:0}
.dm-dia{display:flex; flex-direction:column; gap:4px; min-height:0}
.dm-dia > b{
  font-size:.58rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mut); text-align:center; font-weight:700;
}
.dm-blocos{flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:3px; overflow:hidden}
.dm-bloco{
  flex:none;
  border-radius:5px; padding:4px 5px; color:#fff; font-size:.53rem;
  font-weight:600; line-height:1.22; display:flex; flex-direction:column; gap:1px;
  opacity:0; transform:translateY(7px) scale(.96);
  transition:opacity .3s ease, transform .3s ease;
}
.dm-bloco.dm-entrou{opacity:1; transform:none}
.dm-bloco-tag{font-size:.48rem; letter-spacing:.06em; text-transform:uppercase; opacity:.8}
.dm-bloco.dm-aula{background:var(--ink)}
.dm-bloco.dm-rev{background:var(--aqua)}
.dm-bloco.dm-rev2{background:var(--violeta)}
.dm-bloco.dm-sim{background:var(--areia)}
.dm-bloco.dm-quest,.dm-mini-bloco.dm-quest{background:var(--coral)}
.dm-bloco.dm-rev3{background:var(--aqua-esc)}
.dm-bloco.dm-lei{background:var(--ink-2)}
.dm-mini-bloco.dm-aula{background:var(--ink)}
.dm-mini-bloco.dm-rev{background:var(--aqua)}
.dm-mini-bloco.dm-sim{background:var(--areia)}
.dm-mini-bloco.dm-rev2{background:var(--violeta)}
/* a revisão avaliada, no momento em que ela fecha */
.dm-mini-bloco .dm-mini-txt{position:relative; display:inline-block}
.dm-mini-bloco .dm-mini-txt::after{
  content:""; position:absolute; left:0; top:52%; height:1.5px; width:0;
  background:currentColor; border-radius:2px;
}
.dm-mini-bloco.dm-feito{background:var(--dm-verde)}
.dm-mini-bloco.dm-feito .dm-mini-txt::after{width:100%; transition:width .5s ease .15s}
.dm-mini-bloco.dm-feito{transition:background .45s ease}

/* hoje é o único dia do calendário com contorno cheio */
.dm-mini-dia.dm-hoje{border-color:var(--mut)}
.dm-mini-dia.dm-hoje > b{color:var(--ink)}
.dm-mini-bloco.dm-lei{background:var(--ink-2)}

/* 4. ajuste */
.dm-ajuste{flex:1; display:flex; flex-direction:column; gap:10px; min-height:0}
.dm-fichas{display:flex; flex-direction:column; gap:5px}
.dm-ficha{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 11px; border-radius:var(--r-sm); background:var(--white);
  border:1px solid var(--line); min-height:36px;
  opacity:0; transform:translateY(7px); transition:opacity .34s ease, transform .34s ease;
}
.dm-ficha.dm-on{opacity:1; transform:none}
.dm-ficha-r{font-size:.66rem; color:var(--ink-2); font-weight:600}
.dm-ficha-v{
  font-family:"Outfit",sans-serif; font-weight:500; font-size:.88rem; color:var(--ink);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.dm-ficha-v.dm-erro{color:var(--coral)}

/* a quarta ficha calcula antes de responder */
.dm-ficha-calc .dm-prox{display:none}
.dm-ficha-calc.dm-calculado .dm-prox{display:block; animation:dmSurge .4s ease}
.dm-ficha-calc.dm-calculado .dm-calc{display:none}
.dm-calc{display:flex; align-items:center; gap:8px}
.dm-calc em{font-style:normal; font-size:.62rem; color:var(--mut); font-weight:600}
.dm-calc-t{
  display:block; width:58px; height:5px; border-radius:99px;
  background:var(--line); overflow:hidden;
}
.dm-calc-t i{display:block; height:100%; width:40%; border-radius:99px; background:var(--aqua)}
.dm-ficha-calc.dm-on .dm-calc-t i{animation:dmCarrega 1.5s ease-in-out infinite}
.dm-ficha-calc.dm-calculado{border-color:var(--violeta); background:var(--violeta-fraco)}
.dm-ficha-calc.dm-calculado .dm-ficha-v{color:var(--violeta)}
@keyframes dmCarrega{
  0%{transform:translateX(-100%)}
  60%{transform:translateX(150%)}
  100%{transform:translateX(150%)}
}
@keyframes dmSurge{from{opacity:0; transform:scale(.9)} to{opacity:1; transform:none}}

/* o calendário que já estava cheio antes de a revisão nova cair nele */
.dm-mini{flex:1; min-height:0; display:flex; flex-direction:column; opacity:0; transition:opacity .4s ease}
.dm-mini.dm-on{opacity:1}
.dm-mini-titulo{
  font-size:.58rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mut); font-weight:700; margin-bottom:5px;
}
.dm-mini-sem{flex:1; min-height:0; display:grid; grid-template-columns:repeat(5,1fr); gap:5px}
.dm-mini-dia{
  border:1px solid var(--line); border-radius:8px; padding:5px 4px; background:var(--white);
  display:flex; flex-direction:column; gap:2px; min-height:44px; overflow:hidden;
  transition:border-color .35s ease, background .35s ease;
}
.dm-mini-dia > b{
  font-size:.55rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--mut); text-align:center; font-variant-numeric:tabular-nums;
}
.dm-mini-dia.dm-alvo{border-color:var(--violeta); background:var(--violeta-fraco)}
.dm-mini-dia.dm-alvo > b{color:var(--violeta)}
.dm-mini-bloco{
  flex:none; border-radius:4px; padding:2px 4px; color:#fff; font-size:.46rem;
  font-weight:600; line-height:1.2; display:flex; flex-direction:column; gap:1px;
}
.dm-card-volta{
  flex:none; border-radius:4px; padding:2px 4px; background:var(--violeta); color:#fff;
  font-size:.46rem; font-weight:600; line-height:1.2;
  display:flex; flex-direction:column; gap:1px;
  opacity:0; transform:translateY(-34px) scale(.85);
  transition:opacity .45s ease, transform .6s cubic-bezier(.34,1.3,.5,1);
}
.dm-card-volta.dm-pousou{opacity:1; transform:none}

/* o ponteiro */
.dm-cursor{
  position:absolute; left:0; top:0; z-index:5; pointer-events:none;
  transform:translate(86%,92%); transition:transform 600ms cubic-bezier(.33,.1,.25,1);
  filter:drop-shadow(0 2px 4px rgba(22,37,43,.35));
}
.dm-cursor svg{display:block}
.dm-cursor svg path{fill:#fff; stroke:var(--ink); stroke-width:1.3px; stroke-linejoin:round}
.dm-cursor::after{
  content:""; position:absolute; left:-9px; top:-9px; width:30px; height:30px;
  border-radius:50%; border:2px solid var(--aqua); opacity:0; transform:scale(.3);
}
.dm-cursor.dm-clique svg{animation:dmAperta .3s ease}
.dm-cursor.dm-clique::after{animation:dmOnda .42s ease-out}
@keyframes dmAperta{50%{transform:scale(.82)}}
@keyframes dmOnda{0%{opacity:.9; transform:scale(.3)} 100%{opacity:0; transform:scale(1.5)}}

/* Modo parado: quem pediu menos animação no sistema recebe a mesma tela
   montada e completa, sem ponteiro e sem loop. A trilha do topo continua
   clicável, então dá para percorrer as etapas no ritmo de cada um. */
.dm-parado .dm-cursor{display:none}
.dm-parado .dm-cena{transition:none}
.dm-parado .dm-carregando{display:none !important}

/* rodapé: legenda do passo e o botão de pausa */
.dm-rodape{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 16px; border-top:1px solid var(--line); background:var(--white);
}
.dm-legenda{font-size:.74rem; color:var(--ink-2); font-weight:600}
.dm-play{
  width:26px; height:26px; flex:none; border-radius:50%; cursor:pointer;
  border:1px solid var(--line); background:var(--white);
  display:grid; place-items:center; transition:all .25s ease;
}
.dm-play:hover{border-color:var(--aqua); background:var(--aqua-fraco)}
.dm-play-i{width:8px; height:9px; border-left:3px solid var(--ink-2); border-right:3px solid var(--ink-2)}
.dm-play.dm-pausado .dm-play-i{
  width:0; height:0; border:0;
  border-left:9px solid var(--ink-2); border-top:5.5px solid transparent;
  border-bottom:5.5px solid transparent; margin-left:2px;
}

@media (max-width:520px){
  .dm-passo{flex-direction:column; gap:3px; font-size:.6rem; padding:8px 3px}
  .dm-tela{aspect-ratio:5/4}
  /* No celular a cena do ajuste tem quatro fichas mais o calendário na mesma
     tela. Tudo abaixo existe para as duas coisas caberem juntas: sem isto o
     calendário corta justamente no dia em que a revisão nova cai. */
  .dm-ficha{min-height:23px; padding:3px 8px}
  .dm-ficha-r{font-size:.56rem}
  .dm-ficha-v{font-size:.72rem}
  .dm-fichas{gap:3px}
  .dm-calc em{font-size:.55rem}
  .dm-calc-t{width:40px}
  .dm-ajuste{gap:7px}
  .dm-mini-titulo{font-size:.52rem; margin-bottom:3px}
  .dm-mini-dia{min-height:32px; padding:3px; gap:2px}
  .dm-mini-dia > b{font-size:.5rem}
  .dm-mini-sem{gap:4px}
  .dm-mini-bloco,.dm-card-volta{font-size:.42rem; padding:1px 3px; border-radius:3px}
  .dm-mini-bloco.dm-extra{display:none}
  .dm-cena{gap:7px}
  .dm-cena{padding:11px 12px}
  .dm-barra{grid-template-columns:minmax(66px,1.5fr) 1fr 26px 34px; gap:5px}
  .dm-barra-n{font-size:.48rem; padding:2px 0}
  .dm-tag{font-size:.48rem; padding:2px 6px}
  .dm-mini-bloco,.dm-card-volta{font-size:.42rem}
  .dm-barra-m{font-size:.58rem}
  .dm-bloco{font-size:.48rem}
  .dm-legenda{font-size:.68rem}
}

/* ============================================================
   Demonstração 2: o que você abre todo dia
   Divide o palco, o ponteiro e a trilha com a demonstração 1 (prefixo .dm-).
   Só o que é próprio destas quatro cenas leva o prefixo .da-.
   ============================================================ */

/* 1. o plano do dia */
.da-dia-nota{margin-left:auto; font-size:.6rem; font-weight:600; color:var(--mut)}
/* Os cards ficam no meio da tela, e não esticados de cima a baixo: o cartão
   alto vira um painel, e o que precisa passar aqui é um dia curto e fechado. */
.da-hoje{
  flex:1; min-height:0; display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  align-content:center; align-items:stretch;
}
.da-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:8px 9px; display:flex; flex-direction:column; gap:1px;
  opacity:0; transform:translateY(9px); transition:opacity .34s ease, transform .34s ease, border-color .3s ease;
}
.da-card.dm-on{opacity:1; transform:none}
.da-card.da-aberto{border-color:var(--aqua); box-shadow:0 0 0 2px var(--aqua-fraco)}
.da-etq{
  align-self:flex-start; font-size:.46rem; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; border-radius:99px; padding:2px 6px; color:#fff; margin-bottom:2px;
}
.da-etq.da-sim{background:var(--areia)}
.da-etq.da-aula{background:var(--ink)}
.da-etq.da-rev{background:var(--aqua)}
.da-etq.da-rev2{background:var(--violeta)}
.da-card-t{font-size:.63rem; font-weight:700; color:var(--ink); line-height:1.22}
.da-card-l{font-size:.5rem; color:var(--mut); margin-top:1px}
.da-card-v{font-size:.56rem; color:var(--ink-2); font-weight:600}
.da-btn{
  margin-top:7px; text-align:center; background:var(--ink); color:#fff;
  border-radius:6px; padding:5px 4px; font-size:.48rem; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; transition:background .25s ease;
}
.da-card.da-aberto .da-btn{background:var(--aqua)}

/* 2. a questão comentada */
.da-questao{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:10px 12px; display:flex; flex-direction:column; gap:8px;
}
.da-enunciado{
  margin:0; font-size:.63rem; line-height:1.45; color:var(--ink-2);
  opacity:0; transition:opacity .4s ease;
}
.da-enunciado.dm-on{opacity:1}
.da-alts{display:flex; flex-direction:column; gap:5px}
.da-alt{
  display:grid; grid-template-columns:18px 1fr auto; align-items:center; gap:8px;
  border:1.5px solid var(--line); border-radius:8px; padding:6px 9px;
  opacity:0; transform:translateY(5px);
  transition:opacity .28s ease, transform .28s ease, border-color .35s ease, background .35s ease;
}
.da-alt.dm-on{opacity:1; transform:none}
.da-alt-l{
  width:18px; height:18px; border-radius:5px; background:var(--line); color:var(--ink-2);
  display:grid; place-items:center; font-size:.55rem; font-weight:800;
  transition:background .35s ease, color .35s ease;
}
.da-alt-t{font-size:.66rem; font-weight:600; color:var(--ink)}
.da-alt-s{font-size:.55rem; font-weight:700; white-space:nowrap}
.da-alt.da-marcada{border-color:var(--mut)}
.da-alt.da-certa{border-color:var(--dm-verde); background:rgba(46,158,91,.07)}
.da-alt.da-certa .da-alt-l{background:var(--dm-verde); color:#fff}
.da-alt.da-certa .da-alt-s{color:var(--dm-verde)}
.da-alt.da-errada{border-color:var(--coral); background:var(--coral-fraco)}
.da-alt.da-errada .da-alt-l{background:var(--coral); color:#fff}
.da-alt.da-errada .da-alt-s{color:var(--coral)}
.da-comentario{
  flex:1; min-height:0; margin-top:9px; padding-left:11px;
  border-left:3px solid var(--aqua); display:flex; flex-direction:column; gap:3px;
  opacity:0; transform:translateX(10px); transition:opacity .45s ease, transform .45s ease;
}
.da-comentario.dm-on{opacity:1; transform:none}
.da-com-r{
  font-size:.5rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--mut);
}
.da-comentario b{font-size:.68rem; color:var(--ink)}
.da-comentario span:last-child{font-size:.6rem; line-height:1.45; color:var(--ink-2)}

/* 3. o plano se ajusta */
.da-aviso{
  display:flex; align-items:center; gap:8px; border-radius:var(--r-sm);
  background:#FEF8E3; border:1px solid #F2E3A8; color:#8A6D1F;
  padding:8px 11px; font-size:.63rem; font-weight:700;
  opacity:0; transform:translateY(-6px); transition:opacity .4s ease, transform .4s ease;
}
.da-aviso.dm-on{opacity:1; transform:none}
.da-ponto{
  width:7px; height:7px; flex:none; border-radius:50%; background:#D9A520;
}
.da-aviso.dm-on .da-ponto{animation:daPisca 1.6s ease-in-out infinite}
@keyframes daPisca{0%,100%{opacity:1} 50%{opacity:.25}}
.da-ajustes{flex:1; min-height:0; display:flex; flex-direction:column; justify-content:center; gap:3px}
.da-linha{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:5px 9px; border-radius:7px; background:var(--white); border:1px solid var(--line);
  opacity:0; transform:translateX(-8px); transition:opacity .32s ease, transform .32s ease;
}
.da-linha.dm-on{opacity:1; transform:none}
.da-linha-m{font-size:.61rem; font-weight:600; color:var(--ink)}
.da-selo{
  font-size:.51rem; font-weight:800; border-radius:99px; padding:2px 8px; white-space:nowrap;
}
.da-s-sobre,.da-s-sobe{background:rgba(46,158,91,.12); color:var(--dm-verde)}
.da-s-entra{background:var(--aqua-fraco); color:var(--aqua-esc)}
.da-s-sai{background:var(--line); color:var(--mut); text-decoration:line-through}
.da-s-igual{background:var(--mint); color:var(--ink-2)}

/* 4. o que a banca cobra sempre */
.da-pesos{
  flex:1 1 auto; min-height:0; display:none; flex-direction:column;
  justify-content:center; gap:6px; margin-top:1px;
}
.da-pesos.dm-on{display:flex}
.da-peso{
  display:grid; grid-template-columns:minmax(84px,1.2fr) 2.6fr 32px; align-items:center; gap:9px;
  opacity:0; transition:opacity .3s ease;
}
.da-peso.dm-on{opacity:1}
.da-peso-m{font-size:.63rem; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.da-peso-t{height:8px; background:var(--line); border-radius:99px; overflow:hidden}
.da-peso-t i{display:block; height:100%; width:0; border-radius:99px; transition:width .6s cubic-bezier(.2,.7,.2,1)}
/* uma cor por matéria, igual ao raio-x da outra demonstração */
.da-c0 .da-peso-t i{background:var(--coral)}
.da-c1 .da-peso-t i{background:var(--areia)}
.da-c2 .da-peso-t i{background:var(--violeta)}
.da-c3 .da-peso-t i{background:var(--dm-azul)}
.da-c0 .da-peso-m,.da-c0 .da-peso-p{color:var(--coral)}
.da-peso-p{
  font-family:"Outfit",sans-serif; font-weight:500; font-size:.68rem; color:var(--ink-2);
  text-align:right; font-variant-numeric:tabular-nums;
}
.da-achado{
  margin-top:6px; font-size:.62rem; color:var(--ink-2); line-height:1.4;
  opacity:0; transition:opacity .4s ease;
}
.da-achado.dm-on{opacity:1}
.da-achado b{color:var(--ink)}
.da-base{
  flex:none; display:flex; align-items:center; gap:11px;
  border-radius:var(--r-sm); background:var(--ink); color:#fff; padding:8px 12px;
  opacity:0; transform:translateY(8px); transition:opacity .45s ease, transform .45s ease;
}
.da-base.dm-on{opacity:1; transform:none}
.da-contador{
  font-family:"Outfit",sans-serif; font-weight:400; font-size:1.35rem; line-height:1;
  color:var(--amarelo,#F5C518); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.da-base span{font-size:.6rem; line-height:1.35; color:rgba(255,255,255,.78)}

@media (max-width:520px){
  .da-hoje{grid-template-columns:1fr; gap:5px}
  .da-card{padding:6px 8px; gap:1px}
  .da-card-t{font-size:.6rem}
  .da-card-l{display:none}
  .da-card-v{font-size:.53rem}
  .da-btn{padding:4px; font-size:.46rem}
  .da-etq{font-size:.44rem; padding:1px 6px; margin-bottom:1px}
  .da-alt.da-extra,.da-linha.da-extra{display:none}
  .da-enunciado{font-size:.53rem; line-height:1.3}
  .da-questao{padding:8px 9px; gap:6px}
  .da-alt{padding:4px 7px; gap:6px; grid-template-columns:15px 1fr auto}
  .da-alt-l{width:15px; height:15px; font-size:.48rem}
  .da-alt-t{font-size:.58rem}
  .da-alt-s{font-size:.46rem}
  .da-comentario{margin-top:6px; padding-left:8px; gap:2px}
  .da-comentario b{font-size:.6rem}
  .da-comentario span:last-child{font-size:.52rem; line-height:1.35}
  .da-aviso{font-size:.55rem; padding:6px 9px}
  .da-linha{padding:4px 8px}
  .da-linha-m{font-size:.58rem}
  .da-selo{font-size:.48rem; padding:2px 7px}
  .da-peso{grid-template-columns:minmax(66px,1.4fr) 1.4fr 28px; gap:6px}
  .da-peso-m{font-size:.56rem}
  .da-achado{font-size:.54rem; margin-top:6px}
  .da-base{padding:5px 9px; gap:7px}
  .da-contador{font-size:1rem}
  .da-base span{font-size:.52rem}
  .da-dia-nota{font-size:.5rem}
}