/* =========================================================
   Simulações — telas navegáveis dos produtos propostos
   Protótipos: dados fictícios, desenho na paleta da EJUD-PR
   ========================================================= */

.sim-wrap{
  border:1px solid var(--rule); border-radius:6px; overflow:hidden;
  background:var(--white); box-shadow:var(--shadow);
}
.sim-chrome{
  display:flex; align-items:center; gap:10px;
  padding:10px 16px; background:var(--paper); border-bottom:1px solid var(--rule);
}
.sim-chrome i{ width:9px; height:9px; border-radius:50%; background:#D5DEE3; display:block; }
.sim-chrome__u{
  margin-left:8px; font-size:.73rem; color:var(--text-2);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---------- Aplicação: barra superior ---------- */

.app{ background:#04202C; color:#DDE9ED; }
.app__bar{
  display:flex; align-items:center; gap:clamp(12px,2.4vw,28px);
  padding:12px clamp(14px,2.4vw,26px);
  border-bottom:1px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.22);
}
.app__mark{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.app__mark svg{ width:17px; height:21px; }
.app__mark b{ font-size:.86rem; letter-spacing:.06em; color:#fff; font-weight:900; }
.app__nav{ display:flex; gap:clamp(10px,1.8vw,20px); overflow-x:auto; scrollbar-width:none; }
.app__nav::-webkit-scrollbar{ display:none; }
.app__nav span{
  font-size:.76rem; font-weight:700; color:#8FAFB9; white-space:nowrap;
  padding-bottom:3px; border-bottom:2px solid transparent;
}
.app__nav span.on{ color:#fff; border-bottom-color:#49C5B1; }
.app__right{ margin-left:auto; display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.app__search{
  display:flex; align-items:center; gap:7px; font-size:.74rem; color:#8FAFB9;
  border:1px solid rgba(255,255,255,.16); border-radius:3px; padding:5px 10px;
}
.app__avatar{
  width:26px; height:26px; border-radius:50%; background:#1B4A5A;
  display:grid; place-items:center; font-size:.66rem; font-weight:700; color:#70C3B4;
}
@media (max-width:700px){ .app__search{ display:none; } }

/* ---------- Filtros ---------- */

.app__chips{ display:flex; gap:7px; padding:12px clamp(14px,2.4vw,26px) 0; flex-wrap:wrap; }
.pchip{
  font-size:.7rem; font-weight:700; letter-spacing:.03em;
  padding:.36em .8em; border-radius:99px;
  border:1px solid rgba(255,255,255,.18); color:#8FAFB9; background:transparent;
}
.pchip.on{ background:#49C5B1; border-color:#49C5B1; color:#04202C; }

/* ---------- Destaque ---------- */

.phero{ position:relative; min-height:clamp(230px,30vw,340px); display:flex; align-items:flex-end; overflow:hidden; }
.phero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.phero__scrim{ position:absolute; inset:0; background:
  linear-gradient(to top, #04202C 4%, rgba(4,32,44,.72) 38%, rgba(4,32,44,.15) 74%),
  linear-gradient(to right, rgba(4,32,44,.9) 0%, rgba(4,32,44,.1) 62%); }
.phero__in{ position:relative; padding:clamp(18px,3vw,32px); max-width:min(560px,88%); }
.phero__k{ font-size:.66rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#49C5B1; margin:0 0 .7em; }
.phero__t{ font-size:clamp(1.3rem,1rem + 1.5vw,2rem); font-weight:900; letter-spacing:-.03em; color:#fff; margin:0 0 .4em; line-height:1.12; }
.phero__d{ font-size:.86rem; line-height:1.5; color:#C3D6DC; margin:0 0 1em; max-width:46ch; }
.phero__meta{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:1.1em; }
.pmeta{
  font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:.34em .62em; border-radius:2px;
  background:rgba(255,255,255,.1); color:#C3D6DC; border:1px solid rgba(255,255,255,.14);
}
.pmeta--enfam{ background:rgba(73,197,177,.18); color:#8FE3D3; border-color:rgba(73,197,177,.42); }
.pmeta--ob{ background:rgba(238,177,52,.18); color:#F2CE7E; border-color:rgba(238,177,52,.42); }
.phero__acts{ display:flex; gap:9px; flex-wrap:wrap; }
.pbtn{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.78rem; font-weight:700; padding:.6em 1.1em; border-radius:3px;
  border:1px solid transparent; background:#49C5B1; color:#04202C;
}
.pbtn--ghost{ background:transparent; border-color:rgba(255,255,255,.26); color:#DDE9ED; }
.pbtn svg{ width:15px; height:15px; }

/* ---------- Fileiras de curso ---------- */

.prow{ padding:clamp(16px,2.4vw,26px) 0 0; }
.prow__h{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:0 clamp(14px,2.4vw,26px) 11px;
}
.prow__t{ font-size:.94rem; font-weight:700; color:#fff; margin:0; letter-spacing:-.01em; }
.prow__all{ font-size:.7rem; font-weight:700; color:#8FAFB9; letter-spacing:.04em; }
.ptrack{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(178px,1fr);
  gap:11px; overflow-x:auto; padding:0 clamp(14px,2.4vw,26px) 4px;
  scrollbar-width:none; scroll-snap-type:x proximity;
}
.ptrack::-webkit-scrollbar{ display:none; }
@media (min-width:900px){ .ptrack{ grid-auto-columns:minmax(206px,1fr); } }

.pcard{ scroll-snap-align:start; display:flex; flex-direction:column; }
.pcard__thumb{
  position:relative; aspect-ratio:16/10; border-radius:4px; overflow:hidden;
  background:#0B3A4A; border:1px solid rgba(255,255,255,.1);
}
.pcard__thumb img{ width:100%; height:100%; object-fit:cover; }
.pcard__art{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between;
  padding:11px 12px;
}
.pcard__code{ font-size:.6rem; font-weight:700; letter-spacing:.16em; color:#70C3B4; }
.pcard__art b{ font-size:.86rem; font-weight:900; line-height:1.2; color:#fff; letter-spacing:-.015em; }
.pcard__thumb::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(4,32,44,.85), rgba(4,32,44,.1) 62%);
}
.pcard__art{ z-index:2; }
.pcard__dur{
  position:absolute; right:8px; top:8px; z-index:3;
  font-size:.6rem; font-weight:700; color:#DDE9ED;
  background:rgba(2,20,28,.72); padding:.24em .48em; border-radius:2px;
}
.pcard__bar{ position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.2); z-index:3; }
.pcard__bar i{ display:block; height:100%; background:#49C5B1; }
.pcard__t{ font-size:.82rem; font-weight:700; color:#DDE9ED; margin:9px 0 .2em; line-height:1.3; }
.pcard__m{ font-size:.7rem; color:#8FAFB9; margin:0; }

/* padrões gráficos das capas, por eixo */
.g1{ background:linear-gradient(140deg,#0B3A4A,#12586A); }
.g2{ background:linear-gradient(140deg,#123B49,#1E7F70); }
.g3{ background:linear-gradient(140deg,#1A3340,#7A3A28); }
.g4{ background:linear-gradient(140deg,#12303C,#7A5B18); }
.g5{ background:linear-gradient(140deg,#0E2F3C,#2F6C7A); }
.gpat{ position:absolute; inset:0; opacity:.5; }

/* ---------- Aula: player e barra lateral ---------- */

.lesson{ display:grid; gap:0; background:#04202C; }
@media (min-width:980px){ .lesson{ grid-template-columns:minmax(0,1fr) 306px; } }
.lesson__main{ min-width:0; }
.lesson__side{ border-left:1px solid rgba(255,255,255,.1); background:rgba(0,0,0,.18); }
@media (max-width:979px){ .lesson__side{ border-left:0; border-top:1px solid rgba(255,255,255,.1); } }

.vp{ position:relative; aspect-ratio:16/9; background:#04202C; overflow:hidden; }
.vp__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.16); transform-origin:center 42%; }
.vp__scrim{ position:absolute; inset:0; background:linear-gradient(to top, rgba(2,20,28,.85) 0%, rgba(2,20,28,.1) 40%, transparent 62%); }
.vp__mark{
  position:absolute; left:3.2%; top:6%; z-index:4;
  display:flex; align-items:center; gap:8px;
}
.vp__mark svg.mk{ width:19px; height:24px; }
.vp__mark b{ font-size:.86rem; font-weight:900; letter-spacing:.05em; color:#fff; line-height:1; }
.vp__mark i{ display:block; font-style:normal; font-size:.5rem; letter-spacing:.14em;
  text-transform:uppercase; color:#8FE3D3; margin-top:2px; }
.vp__cc{
  position:absolute; left:50%; transform:translateX(-50%); bottom:12%;
  width:58%; text-align:center; font-size:clamp(.62rem,1.1vw,.86rem); color:#fff;
  background:rgba(0,0,0,.62); padding:.42em .7em; border-radius:2px; line-height:1.35; z-index:3;
}
.vp__libras{
  position:absolute; right:2.2%; bottom:14%; width:20%; aspect-ratio:3/4; z-index:3;
}
@media (max-width:620px){ .vp__libras{ display:none; } }
.vp__ctrl{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  padding:0 14px 11px; display:flex; flex-direction:column; gap:8px;
}
.vp__scrub{ height:4px; background:rgba(255,255,255,.24); border-radius:2px; position:relative; }
.vp__scrub i{ display:block; height:100%; background:#49C5B1; border-radius:2px; }
.vp__scrub b{
  position:absolute; top:50%; width:11px; height:11px; border-radius:50%;
  background:#49C5B1; transform:translate(-50%,-50%);
}
.vp__marks{ position:absolute; inset:0; }
.vp__marks u{ position:absolute; top:0; bottom:0; width:2px; background:rgba(255,255,255,.5); }
.vp__row{ display:flex; align-items:center; gap:13px; color:#DDE9ED; }
.vp__row svg{ width:16px; height:16px; }
.vp__time{ font-size:.7rem; font-variant-numeric:tabular-nums; color:#B7CDD4; }
.vp__row .sp{ margin-left:auto; display:flex; gap:11px; align-items:center; }
.vp__tag{ font-size:.62rem; font-weight:700; letter-spacing:.08em; border:1px solid rgba(255,255,255,.28); padding:.2em .42em; border-radius:2px; color:#B7CDD4; }
.vp__tag.on{ color:#04202C; background:#49C5B1; border-color:#49C5B1; }

.lhead{ padding:18px clamp(14px,2.4vw,24px) 0; }
.lhead__bc{ font-size:.68rem; color:#8FAFB9; margin:0 0 .6em; }
.lhead__t{ font-size:clamp(1.06rem,.95rem + .6vw,1.34rem); font-weight:900; color:#fff; margin:0 0 .35em; letter-spacing:-.022em; }
.lhead__m{ font-size:.76rem; color:#8FAFB9; margin:0; }

.ltabs{ display:flex; gap:18px; padding:14px clamp(14px,2.4vw,24px) 0; border-bottom:1px solid rgba(255,255,255,.1); overflow-x:auto; scrollbar-width:none; }
.ltabs::-webkit-scrollbar{ display:none; }
.ltab{ font-size:.78rem; font-weight:700; color:#8FAFB9; padding-bottom:9px; border-bottom:2px solid transparent; white-space:nowrap; }
.ltab.on{ color:#fff; border-bottom-color:#49C5B1; }
.lbody{ padding:18px clamp(14px,2.4vw,24px) 22px; }
.lbody p{ font-size:.86rem; color:#C3D6DC; max-width:64ch; }
.lfiles{ list-style:none; margin:0; padding:0; }
.lfiles li{
  display:grid; grid-template-columns:20px minmax(0,1fr) auto; gap:11px; align-items:center;
  padding:11px 0; border-bottom:1px solid rgba(255,255,255,.1); font-size:.83rem; color:#DDE9ED;
}
.lfiles li:last-child{ border-bottom:0; }
.lfiles small{ color:#8FAFB9; font-size:.7rem; }
.lfiles .ico{ color:#70C3B4; }

.lprog{ padding:16px clamp(14px,2.4vw,20px); border-bottom:1px solid rgba(255,255,255,.1); }
.lprog__t{ display:flex; justify-content:space-between; font-size:.72rem; color:#8FAFB9; margin-bottom:8px; }
.lprog__t b{ color:#fff; }
.lprog__bar{ height:5px; background:rgba(255,255,255,.16); border-radius:3px; }
.lprog__bar i{ display:block; height:100%; background:#49C5B1; border-radius:3px; }

.lmod{ padding:14px clamp(14px,2.4vw,20px) 6px; }
.lmod__t{ font-size:.68rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:#8FAFB9; margin:0 0 8px; }
.llist{ list-style:none; margin:0 0 14px; padding:0; }
.llist li{
  display:grid; grid-template-columns:18px minmax(0,1fr) auto; gap:10px; align-items:center;
  padding:9px 0; font-size:.8rem; color:#B7CDD4; border-bottom:1px solid rgba(255,255,255,.07);
}
.llist li:last-child{ border-bottom:0; }
.llist li.done{ color:#8FAFB9; }
.llist li.on{ color:#fff; font-weight:700; }
.llist li.on::before{ content:""; position:absolute; }
.llist .ico{ color:#49C5B1; }
.llist small{ font-size:.68rem; color:#8FAFB9; font-variant-numeric:tabular-nums; }

/* ---------- Roleplay ---------- */

.rp{ background:var(--white); }
.rp__steps{ display:flex; border-bottom:1px solid var(--rule); }
.rp__step{
  flex:1; padding:13px 14px; text-align:left; background:transparent; border:0; cursor:pointer;
  border-bottom:2px solid transparent; font-family:inherit;
  border-right:1px solid var(--rule); transition:background .16s ease;
}
.rp__step:last-child{ border-right:0; }
.rp__step:hover{ background:var(--paper); }
.rp__step b{ display:block; font-size:.64rem; font-weight:700; letter-spacing:.14em; color:var(--text-2); margin-bottom:3px; }
.rp__step span{ display:block; font-size:.83rem; font-weight:700; color:var(--text-2); }
.rp__step[aria-selected="true"]{ background:var(--paper-2); border-bottom-color:var(--teal); }
.rp__step[aria-selected="true"] b{ color:var(--teal); }
.rp__step[aria-selected="true"] span{ color:var(--ink); }
.rp__panel{ padding:clamp(18px,3vw,30px); }
.rp__panel[hidden]{ display:none; }

.brief{ display:grid; gap:16px; }
@media (min-width:820px){ .brief{ grid-template-columns:1fr 1fr; } }
.brief__b{ border:1px solid var(--rule); border-radius:var(--r); padding:18px 20px; background:var(--paper); }
.brief__k{ font-size:.66rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--teal); margin:0 0 .7em; display:flex; align-items:center; gap:.5em; }
.brief__b p{ font-size:.88rem; margin:0 0 .6em; color:var(--text-2); }
.brief__b p:last-child{ margin-bottom:0; }
.brief__b strong{ color:var(--ink); }

.opts{ display:grid; gap:9px; margin-top:18px; }
.opt{
  display:grid; grid-template-columns:26px minmax(0,1fr); gap:12px; align-items:start;
  text-align:left; padding:14px 16px; border:1px solid var(--rule); border-radius:var(--r);
  background:var(--white); cursor:pointer; font-family:inherit; font-size:.88rem; color:var(--text);
  transition:border-color .16s ease, background .16s ease;
}
.opt:hover{ border-color:var(--teal); background:var(--paper-2); }
.opt b{ font-size:.72rem; font-weight:700; color:var(--mint-2); padding-top:.1em; }
.opt[aria-pressed="true"]{ border-color:var(--teal); background:var(--paper-2); }
.opt[aria-pressed="true"] b{ color:var(--teal); }
.optnote{
  margin-top:12px; font-size:.84rem; padding:14px 16px; border-radius:var(--r);
  border:1px solid rgba(73,197,177,.34); background:rgba(73,197,177,.08); color:var(--text);
}
.optnote[hidden]{ display:none; }
.optnote b{ color:#1E7F70; }

/* relatório */
.rings{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); }
.ring{ text-align:center; }
.ring svg{ width:96px; height:96px; margin:0 auto 8px; display:block; }
.ring__v{ font-size:1.02rem; font-weight:900; fill:var(--ink); }
.ring__l{ font-size:.74rem; color:var(--text-2); margin:0; line-height:1.4; }

.badges{ display:grid; gap:11px; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); margin-top:22px; }
.badge{
  border:1px solid var(--rule); border-radius:var(--r); padding:15px 16px;
  display:flex; flex-direction:column; gap:8px; background:var(--white);
}
.badge.got{ border-color:rgba(73,197,177,.42); background:rgba(73,197,177,.07); }
.badge.locked{ opacity:.5; }
.badge__t{ font-size:.82rem; font-weight:700; color:var(--ink); margin:0; }
.badge__d{ font-size:.72rem; color:var(--text-2); margin:0; }
.badge .icobox{ width:36px; height:36px; }

/* ---------- Painel ---------- */

.dash{ background:var(--white); }
.dash__bar{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  padding:13px clamp(14px,2.4vw,24px); border-bottom:1px solid var(--rule); background:var(--paper);
}
.dchip{
  font-size:.72rem; font-weight:700; color:var(--text-2);
  border:1px solid var(--rule); background:var(--white); border-radius:3px; padding:.4em .7em;
}
.dchip.on{ background:var(--ink); border-color:var(--ink); color:#fff; }
.dash__body{ padding:clamp(16px,2.6vw,26px); display:grid; gap:20px; }
.dgrid{ display:grid; gap:16px; }
@media (min-width:900px){ .dgrid--2{ grid-template-columns:1.45fr 1fr; } }
.dpanel{ border:1px solid var(--rule); border-radius:var(--r); padding:18px 20px; background:var(--white); }
.dpanel__t{ font-size:.8rem; font-weight:700; color:var(--ink); margin:0 0 2px; }
.dpanel__s{ font-size:.72rem; color:var(--text-2); margin:0 0 16px; }
.legend{ display:flex; flex-wrap:wrap; gap:14px; margin-top:12px; font-size:.72rem; color:var(--text-2); }
.legend span{ display:flex; align-items:center; gap:6px; }
.legend i{ width:10px; height:3px; border-radius:2px; display:block; }

.funnel{ display:grid; gap:7px; }
.fn{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; }
.fn__b{ height:32px; border-radius:2px; background:var(--paper-2); position:relative; overflow:hidden; }
.fn__b i{ position:absolute; inset:0 auto 0 0; background:linear-gradient(90deg,#008196,#49C5B1); }
.fn__b span{ position:absolute; left:12px; top:50%; transform:translateY(-50%); font-size:.76rem; font-weight:700; color:#fff; z-index:2; }
.fn__v{ font-size:.78rem; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; min-width:5ch; text-align:right; }

.dtable{ width:100%; border-collapse:collapse; font-size:.82rem; }
.dtable th{
  text-align:left; font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-2); padding:0 12px 9px 0; border-bottom:1px solid var(--rule);
}
.dtable td{ padding:11px 12px 11px 0; border-bottom:1px solid var(--rule); color:var(--text); }
.dtable tr:last-child td{ border-bottom:0; }
.dtable td:last-child,.dtable th:last-child{ text-align:right; padding-right:0; }
.dtable .num{ font-variant-numeric:tabular-nums; font-weight:700; }
.pill{
  display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.05em;
  padding:.26em .6em; border-radius:2px;
}
.pill--ok{ background:rgba(73,197,177,.15); color:#1E7F70; }
.pill--warn{ background:rgba(238,177,52,.18); color:#8A6410; }
.pill--bad{ background:rgba(235,85,59,.13); color:#B93A24; }

/* ---------- Carteira ---------- */

.wallet__h{ display:flex; align-items:center; gap:16px; padding-bottom:18px; border-bottom:1px solid var(--rule); flex-wrap:wrap; }
.wallet__av{ width:52px; height:52px; border-radius:50%; background:var(--paper-2); border:1px solid rgba(0,129,150,.22);
  display:grid; place-items:center; font-weight:900; color:var(--teal); font-size:1rem; }
.wallet__n{ font-size:1.02rem; font-weight:700; color:var(--ink); margin:0; }
.wallet__r{ font-size:.76rem; color:var(--text-2); margin:0; }
.wallet__xp{ margin-left:auto; text-align:right; }
.wallet__xp b{ display:block; font-size:1.3rem; font-weight:900; color:var(--ink); letter-spacing:-.02em; }
.wallet__xp span{ font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-2); }
.comps{ display:grid; gap:12px; margin-top:20px; }
.comp{ display:grid; grid-template-columns:minmax(0,180px) 1fr auto; gap:14px; align-items:center; }
.comp__l{ font-size:.83rem; color:var(--text); }
.comp__b{ height:7px; background:var(--rule-2); border-radius:4px; overflow:hidden; }
.comp__b i{ display:block; height:100%; background:linear-gradient(90deg,#008196,#49C5B1); border-radius:4px; }
.comp__v{ font-size:.74rem; font-weight:700; color:var(--text-2); font-variant-numeric:tabular-nums; }
@media (max-width:620px){ .comp{ grid-template-columns:1fr auto; } .comp__b{ grid-column:1/-1; } }

/* ---------- Legenda de protótipo ---------- */

.simnote{
  display:flex; align-items:flex-start; gap:12px; margin-top:16px;
  font-size:.8rem; color:var(--text-2); max-width:74ch;
}
.simnote .ico{ color:var(--gold); flex:0 0 auto; margin-top:1px; }

/* ---------- Grade do canal ---------- */

.epg{ border:1px solid var(--rule); border-radius:var(--r); overflow:hidden; background:var(--white); }
.epg__h{ display:grid; grid-template-columns:88px repeat(5,1fr); background:var(--paper); border-bottom:1px solid var(--rule); }
.epg__h div{ padding:9px 10px; font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-2); border-right:1px solid var(--rule); }
.epg__h div:last-child{ border-right:0; }
.epg__r{ display:grid; grid-template-columns:88px repeat(5,1fr); border-bottom:1px solid var(--rule); }
.epg__r:last-child{ border-bottom:0; }
.epg__t{ padding:12px 10px; font-size:.72rem; font-weight:700; color:var(--teal); border-right:1px solid var(--rule); font-variant-numeric:tabular-nums; }
.epg__c{ padding:10px; border-right:1px solid var(--rule); font-size:.75rem; line-height:1.35; color:var(--text); }
.epg__c:last-child{ border-right:0; }
.epg__c b{ display:block; font-weight:700; color:var(--ink); font-size:.78rem; }
.epg__c small{ color:var(--text-2); font-size:.68rem; }
.epg__c.live{ background:rgba(235,85,59,.07); }
.epg__c.rep{ background:var(--paper); color:var(--text-2); }
.epg__c.rep b{ color:var(--text-2); font-weight:400; }
@media (max-width:820px){
  .epg{ overflow-x:auto; }
  .epg__h,.epg__r{ min-width:640px; }
}

/* =========================================================
   Janela de Libras com intérprete recortado
   ========================================================= */

.libras{
  display:grid; place-items:end center;
  background:none; border:0; border-radius:0; overflow:visible;
}
.libras img{
  width:100%; height:100%; object-fit:contain; object-position:bottom center;
  display:block;
  filter:drop-shadow(0 0 1px rgba(0,0,0,.55)) drop-shadow(0 6px 16px rgba(0,0,0,.45));
}

/* =========================================================
   EJUD Play navegável
   ========================================================= */

.app__nav button{
  font-family:inherit; background:none; border:0; cursor:pointer;
  font-size:.76rem; font-weight:700; color:#8FAFB9; white-space:nowrap;
  padding:0 0 3px; border-bottom:2px solid transparent; transition:color .16s ease, border-color .16s ease;
}
.app__nav button:hover{ color:#DDE9ED; }
.app__nav button[aria-selected="true"]{ color:#fff; border-bottom-color:#49C5B1; }

button.pchip{ font-family:inherit; cursor:pointer; transition:background .16s ease, color .16s ease, border-color .16s ease; }
button.pchip:hover{ color:#DDE9ED; border-color:rgba(255,255,255,.4); }
button.pchip.on:hover{ color:#04202C; }

.view[hidden]{ display:none; }
.prow[hidden]{ display:none; }
.pcard[hidden]{ display:none; }

.prow__h{ position:relative; }
.prow__nav{ display:flex; gap:6px; }
.prow__nav button{
  width:26px; height:26px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  color:#DDE9ED; display:grid; place-items:center; font-family:inherit;
  transition:background .16s ease, border-color .16s ease, opacity .16s ease;
}
.prow__nav button:hover{ background:rgba(73,197,177,.22); border-color:#49C5B1; }
.prow__nav button:disabled{ opacity:.3; cursor:default; }
.prow__nav svg{ width:13px; height:13px; }
@media (max-width:760px){ .prow__nav{ display:none; } }

a.pcard{ text-decoration:none; color:inherit; }
a.pcard:hover{ text-decoration:none; }
a.pcard:hover .pcard__thumb{ border-color:rgba(73,197,177,.7); }
a.pcard:hover .pcard__t{ color:#fff; }
.pcard__thumb{ transition:border-color .18s ease, transform .18s ease; }
a.pcard:hover .pcard__thumb{ transform:translateY(-2px); }
.pcard__play{
  position:absolute; inset:0; display:grid; place-items:center; z-index:4;
  opacity:0; transition:opacity .18s ease;
}
.pcard__play span{
  width:40px; height:40px; border-radius:50%; background:rgba(73,197,177,.92);
  display:grid; place-items:center;
}
.pcard__play svg{ width:16px; height:16px; fill:#04202C; margin-left:2px; }
a.pcard:hover .pcard__play{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  a.pcard:hover .pcard__thumb{ transform:none; }
}

/* vazio de filtro */
.pempty{
  padding:34px clamp(14px,2.4vw,26px) 10px; color:#8FAFB9; font-size:.86rem;
}
.pempty[hidden]{ display:none; }

/* ---- Trilhas ---- */
.trilhas{ display:grid; gap:12px; padding:20px clamp(14px,2.4vw,26px) 6px; }
@media (min-width:720px){ .trilhas{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1060px){ .trilhas{ grid-template-columns:repeat(3,1fr); } }
.trilha{
  border:1px solid rgba(255,255,255,.12); border-radius:5px; padding:18px 20px;
  background:rgba(255,255,255,.04); display:flex; flex-direction:column; gap:10px;
  text-decoration:none; color:inherit; transition:border-color .18s ease, background .18s ease;
}
a.trilha:hover{ text-decoration:none; border-color:rgba(73,197,177,.55); background:rgba(73,197,177,.07); }
.trilha__k{ font-size:.63rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:#70C3B4; }
.trilha__t{ font-size:1rem; font-weight:700; color:#fff; margin:0; letter-spacing:-.015em; }
.trilha__d{ font-size:.79rem; color:#8FAFB9; margin:0; }
.trilha__bar{ height:5px; background:rgba(255,255,255,.14); border-radius:3px; margin-top:auto; }
.trilha__bar i{ display:block; height:100%; background:#49C5B1; border-radius:3px; }
.trilha__f{ display:flex; justify-content:space-between; font-size:.72rem; color:#8FAFB9; }
.trilha__f b{ color:#DDE9ED; }

/* ---- Meus cursos e certificados ---- */
.mine{ padding:16px clamp(14px,2.4vw,26px) 8px; }
.mine__r{
  display:grid; gap:6px 16px; padding:15px 0;
  border-bottom:1px solid rgba(255,255,255,.1); align-items:center;
  grid-template-columns:minmax(0,1fr) auto;
}
@media (min-width:820px){ .mine__r{ grid-template-columns:minmax(0,1fr) 200px 120px auto; } }
.mine__r:last-child{ border-bottom:0; }
.mine__t{ font-size:.9rem; font-weight:700; color:#fff; margin:0; }
.mine__m{ font-size:.74rem; color:#8FAFB9; margin:0; }
.mine__bar{ height:5px; background:rgba(255,255,255,.14); border-radius:3px; }
.mine__bar i{ display:block; height:100%; background:#49C5B1; border-radius:3px; }
.mine__a{
  font-size:.72rem; font-weight:700; letter-spacing:.04em; color:#04202C;
  background:#49C5B1; padding:.45em .85em; border-radius:3px; text-decoration:none; white-space:nowrap;
}
.mine__a:hover{ text-decoration:none; background:#fff; }
.mine__a--ghost{ background:transparent; color:#DDE9ED; border:1px solid rgba(255,255,255,.26); }
.mine__a--ghost:hover{ background:transparent; border-color:#49C5B1; color:#49C5B1; }
.spill{
  display:inline-block; font-size:.64rem; font-weight:700; letter-spacing:.06em;
  padding:.28em .6em; border-radius:2px;
}
.spill--ok{ background:rgba(73,197,177,.18); color:#8FE3D3; }
.spill--go{ background:rgba(238,177,52,.2); color:#F2CE7E; }
.spill--late{ background:rgba(235,85,59,.2); color:#F5A08D; }

/* =========================================================
   EJUD Play — página de curso e de trilha dentro do protótipo
   ========================================================= */

.pbread{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:14px clamp(14px,2.4vw,26px) 0; font-size:.76rem; color:#8FAFB9;
}
.pbread button{
  font-family:inherit; background:none; border:0; cursor:pointer; padding:0;
  color:#70C3B4; font-size:.76rem; font-weight:700;
}
.pbread button:hover{ color:#fff; text-decoration:underline; }
.pbread span{ opacity:.6; }
.pbread b{ color:#DDE9ED; font-weight:700; }

.cpage{ padding-bottom:24px; }
.chero{ position:relative; min-height:clamp(200px,26vw,300px); display:flex; align-items:flex-end; overflow:hidden; }
.chero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.chero__scrim{ position:absolute; inset:0; background:
  linear-gradient(to top,#04202C 6%,rgba(4,32,44,.75) 42%,rgba(4,32,44,.2) 78%),
  linear-gradient(to right,rgba(4,32,44,.88) 0%,rgba(4,32,44,.1) 66%); }
.chero__in{ position:relative; padding:clamp(18px,3vw,30px); max-width:min(620px,92%); }
.chero__k{ font-size:.64rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#49C5B1; margin:0 0 .6em; }
.chero__t{ font-size:clamp(1.2rem,1rem + 1.3vw,1.85rem); font-weight:900; letter-spacing:-.03em; color:#fff; margin:0 0 .5em; line-height:1.14; }
.chero__meta{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:1em; }

.cbody{ display:grid; gap:0; }
@media (min-width:940px){ .cbody{ grid-template-columns:minmax(0,1fr) 300px; } }
.cmain{ padding:clamp(18px,2.6vw,26px); min-width:0; }
.cside{ padding:clamp(18px,2.6vw,26px); border-left:1px solid rgba(255,255,255,.1); background:rgba(0,0,0,.16); }
@media (max-width:939px){ .cside{ border-left:0; border-top:1px solid rgba(255,255,255,.1); } }

.cmain h4, .cside h4{
  font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#8FAFB9; margin:0 0 12px;
}
.cmain p{ font-size:.88rem; line-height:1.62; color:#C3D6DC; max-width:64ch; margin:0 0 1em; }
.cobj{ list-style:none; margin:0 0 24px; padding:0; }
.cobj li{
  position:relative; padding-left:26px; margin-bottom:9px;
  font-size:.86rem; color:#C3D6DC; line-height:1.5;
}
.cobj li::before{
  content:""; position:absolute; left:2px; top:.55em;
  width:7px; height:7px; border-radius:50%; background:#49C5B1;
}

.cmod{ border-top:1px solid rgba(255,255,255,.1); }
.cmod__h{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:14px 0 10px;
}
.cmod__t{ font-size:.88rem; font-weight:700; color:#fff; margin:0; }
.cmod__c{ font-size:.72rem; color:#8FAFB9; }
.cmod__l{ list-style:none; margin:0 0 6px; padding:0; }
.cmod__l li{
  display:grid; grid-template-columns:18px minmax(0,1fr) auto; gap:11px; align-items:center;
  padding:9px 0; font-size:.83rem; color:#B7CDD4; border-bottom:1px solid rgba(255,255,255,.07);
}
.cmod__l li:last-child{ border-bottom:0; }
.cmod__l a{ color:inherit; text-decoration:none; display:contents; }
.cmod__l li:hover{ color:#fff; }
.cmod__l small{ font-size:.7rem; color:#8FAFB9; font-variant-numeric:tabular-nums; }
.cmod__l .ico{ color:#49C5B1; }

.cficha{ list-style:none; margin:0; padding:0; }
.cficha li{
  display:grid; grid-template-columns:minmax(0,96px) minmax(0,1fr); gap:12px;
  padding:9px 0; border-bottom:1px solid rgba(255,255,255,.1); font-size:.8rem;
}
.cficha li:last-child{ border-bottom:0; }
.cficha dt, .cficha b{ color:#8FAFB9; font-weight:700; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; padding-top:.15em; }
.cficha span{ color:#DDE9ED; }

.cprog{ margin-bottom:20px; }
.cprog__t{ display:flex; justify-content:space-between; font-size:.74rem; color:#8FAFB9; margin-bottom:8px; }
.cprog__t b{ color:#fff; }
.cprog__bar{ height:6px; background:rgba(255,255,255,.16); border-radius:3px; }
.cprog__bar i{ display:block; height:100%; background:#49C5B1; border-radius:3px; }

.cnext{
  display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  padding:0 clamp(14px,2.4vw,26px);
}

/* estado vazio da busca */
.psearch{ padding:26px clamp(14px,2.4vw,26px); }
.psearch input{
  width:100%; max-width:520px; font-family:inherit; font-size:.9rem;
  padding:.7em .9em; border-radius:3px; color:#DDE9ED;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.2);
}
.psearch input::placeholder{ color:#7C9AA5; }
.psearch input:focus{ outline:2px solid #49C5B1; outline-offset:2px; }
.presults{ margin-top:18px; }

/* =========================================================
   Assessor acadêmico — o copiloto dentro da aula
   ========================================================= */

.copilot{
  border-top:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg, rgba(73,197,177,.07), rgba(73,197,177,0));
  padding:18px clamp(14px,2.4vw,24px) 22px;
}
.cop__h{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.cop__av{
  width:38px; height:38px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; color:#04202C; background:#49C5B1;
}
.cop__av .ico{ width:22px; height:22px; stroke-width:1.5; }
.cop__n{ font-size:.92rem; font-weight:700; color:#fff; margin:0; }
.cop__s{ font-size:.72rem; color:#8FAFB9; margin:0; }

.cop__acts{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px; }
.cop__act{
  display:inline-flex; align-items:center; gap:.5em; cursor:pointer; font-family:inherit;
  font-size:.74rem; font-weight:700; color:#DDE9ED;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18);
  padding:.5em .8em; border-radius:99px;
  transition:background .16s ease, border-color .16s ease, color .16s ease;
}
.cop__act .ico{ width:14px; height:14px; color:#70C3B4; }
.cop__act:hover{ border-color:#49C5B1; background:rgba(73,197,177,.14); }
.cop__act[aria-pressed="true"]{ background:#49C5B1; border-color:#49C5B1; color:#04202C; }
.cop__act[aria-pressed="true"] .ico{ color:#04202C; }

.cop__thread{ display:grid; gap:10px; margin-bottom:14px; }
.cop__msg{
  padding:12px 15px; border-radius:10px; font-size:.85rem; line-height:1.55; max-width:88%;
}
.cop__msg > b{ display:flex; align-items:center; gap:.5em; font-size:.63rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; margin-bottom:.5em; opacity:.75; }
.cop__msg > b .ico{
  width:19px; height:19px; padding:2.5px; border-radius:50%; flex:0 0 auto;
  background:rgba(255,255,255,.12); box-sizing:border-box;
}
.cop__msg--me > b{ flex-direction:row-reverse; }
.cop__msg--ia > b .ico{ background:#49C5B1; color:#04202C; }
.cop__msg--me{ background:rgba(255,255,255,.08); color:#DDE9ED; margin-left:auto; border-bottom-right-radius:2px; }
.cop__msg--ia{ background:rgba(73,197,177,.13); border:1px solid rgba(73,197,177,.3); color:#DDE9ED; border-bottom-left-radius:2px; }
.cop__msg--ia b{ color:#8FE3D3; opacity:1; }
.cop__msg ul{ margin:.6em 0 0; padding-left:1.1em; }
.cop__msg li{ margin-bottom:.35em; }
.cop__cite{
  display:inline-flex; align-items:center; gap:.4em; margin-top:.7em;
  font-size:.7rem; color:#8FE3D3; border:1px solid rgba(73,197,177,.35);
  padding:.28em .6em; border-radius:2px;
}

.cop__box{
  display:flex; align-items:flex-end; gap:9px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.2);
  border-radius:8px; padding:9px 9px 9px 14px;
}
.cop__box textarea{
  flex:1; background:none; border:0; resize:none; color:#DDE9ED; font-family:inherit;
  font-size:.86rem; line-height:1.5; min-height:44px; max-height:120px; padding:4px 0;
}
.cop__box textarea::placeholder{ color:#7C9AA5; }
.cop__box textarea:focus{ outline:none; }
.cop__box:focus-within{ border-color:#49C5B1; }
.cop__send{
  width:36px; height:36px; border-radius:6px; cursor:pointer; flex:0 0 auto;
  background:#49C5B1; border:0; color:#04202C; display:grid; place-items:center; font-family:inherit;
}
.cop__send:hover{ background:#fff; }
.cop__send .ico{ width:17px; height:17px; }
.cop__foot{ font-size:.7rem; color:#8FAFB9; margin:10px 0 0; display:flex; align-items:flex-start; gap:.5em; }
.cop__foot .ico{ width:13px; height:13px; color:#70C3B4; flex:0 0 auto; margin-top:1px; }

/* =========================================================
   Certificado — peça com mais elementos gráficos
   ========================================================= */

.dip{
  position:relative; background:#fff; overflow:hidden;
  border:1px solid var(--rule); border-radius:3px;
  padding:clamp(26px,4vw,44px) clamp(22px,4vw,48px) clamp(22px,3vw,36px);
  text-align:center;
}
.dip::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(45deg, rgba(0,129,150,.055) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(-45deg, rgba(0,129,150,.055) 0 2px, transparent 2px 7px);
  mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  mask-composite:exclude; -webkit-mask-composite:xor;
  padding:11px;
}
.dip::after{
  content:""; position:absolute; inset:11px; pointer-events:none;
  border:1px solid rgba(0,129,150,.28); border-radius:2px;
}
.dip__top{ position:absolute; left:0; right:0; top:0; height:5px;
  background:linear-gradient(90deg,#002A3A 0%,#008196 42%,#49C5B1 72%,#EEB134 100%); }
.dip__in{ position:relative; z-index:2; }

.dip__crest{ display:flex; align-items:center; justify-content:center; gap:11px; margin-bottom:18px; }
.dip__crest svg{ width:30px; height:38px; }
.dip__crest b{ font-size:1.02rem; font-weight:900; letter-spacing:.05em; color:var(--ink); display:block; line-height:1; }
.dip__crest i{ font-style:normal; font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); display:block; margin-top:4px; }

.dip__k{ font-size:.65rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--teal); margin:0 0 1.4em; }
.dip__k::before, .dip__k::after{ content:"·"; margin:0 .8em; opacity:.5; }
.dip__pre{ font-size:.82rem; color:var(--text-2); margin:0 0 .5em; }
.dip__name{
  font-size:clamp(1.3rem,1.05rem + 1.2vw,1.9rem); font-weight:900; letter-spacing:-.025em;
  color:var(--ink); margin:0 0 .5em; line-height:1.15;
}
.dip__rule{ width:64px; height:2px; background:var(--grad-line); margin:0 auto 1.1em; }
.dip__course{ font-size:.92rem; color:var(--text-2); margin:0 auto 1.6em; max-width:48ch; line-height:1.6; }
.dip__course b{ color:var(--ink); font-weight:700; }

.dip__facts{
  display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule);
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); margin-bottom:26px; text-align:left;
}
.dip__f{ background:#fff; padding:12px 14px; display:flex; align-items:center; gap:10px; }
.dip__f .ico{ color:var(--teal); width:18px; height:18px; flex:0 0 auto; }
.dip__f b{ display:block; font-size:.62rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--text-2); }
.dip__f span{ display:block; font-size:.86rem; font-weight:700; color:var(--ink); }

.dip__sign{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); margin-bottom:24px; }
.dip__sg{ text-align:center; }
.dip__sg u{ display:block; height:1px; background:var(--rule); margin-bottom:9px; text-decoration:none; }
.dip__sg b{ display:block; font-size:.78rem; color:var(--ink); }
.dip__sg span{ display:block; font-size:.68rem; color:var(--text-2); margin-top:2px; }

.dip__foot{
  display:flex; align-items:center; justify-content:center; gap:clamp(14px,3vw,30px);
  flex-wrap:wrap; padding-top:20px; border-top:1px solid var(--rule);
}
.dip__seal{ width:74px; height:74px; flex:0 0 auto; opacity:.92; }
.dip__qr{ display:flex; align-items:center; gap:13px; }
.dip__code{ text-align:left; font-size:.72rem; color:var(--text-2); line-height:1.55; }
.dip__code b{ display:block; font-size:.84rem; color:var(--ink); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.02em; }

/* verificação com mais informação */
.vfy__hero{ padding:24px 24px 20px; text-align:center; border-bottom:1px solid var(--rule); background:var(--paper-2); }
.vfy__badge{
  width:56px; height:56px; border-radius:50%; margin:0 auto 12px;
  background:rgba(73,197,177,.16); border:1px solid rgba(73,197,177,.42);
  display:grid; place-items:center; color:#1E7F70;
}
.vfy__badge .ico{ width:28px; height:28px; }
.vfy__t{ font-size:1rem; font-weight:900; color:var(--ink); margin:0 0 .3em; letter-spacing:-.02em; }
.vfy__s{ font-size:.78rem; color:var(--text-2); margin:0; }
.vfy__steps{ display:grid; gap:0; padding:6px 22px 18px; }
.vfy__st{
  display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:11px; align-items:center;
  padding:11px 0; border-bottom:1px solid var(--rule); font-size:.82rem; color:var(--text);
}
.vfy__st:last-child{ border-bottom:0; }
.vfy__st .ico{ color:#1E7F70; }
.vfy__st small{ font-size:.72rem; color:var(--text-2); }

.vfy__share{
  margin:0 22px 18px; padding:16px 18px; border-radius:8px;
  border:1px solid var(--rule); background:var(--paper-2); text-align:center;
}
.btn--li{
  display:inline-flex; align-items:center; gap:.55em;
  background:#0A66C2; border:1px solid #0A66C2; color:#fff;
  font-size:.8rem; font-weight:700; padding:.62em 1.05em; border-radius:99px;
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.btn--li:hover{ background:#08529B; border-color:#08529B; transform:translateY(-1px); }
.btn--li .ico{ color:#fff; }
.vfy__share-n{ margin:11px 0 0; font-size:.75rem; line-height:1.5; color:var(--text-2); }