/* ============================================================================
   UNIVERSIDADE CRÉDITO 360 · camada Experts
   O sistema desenhado para o Crédito Experts, traduzido para os tokens da
   universidade. É CAMADA ADITIVA: carrega por último e não reescreve seletor
   existente — painel.js e admin.js dependem de classes que continuam intactas.

   Tradução de paleta:
     abismo #0B0A08  →  navy   #001F35
     bronze #C69C6D  →  dourado #B9915B
     Instrument Serif → Libre Baskerville   (a itálica de realce da marca G4)
   ========================================================================== */

:root{
  /* ── marca ─────────────────────────────────────────────────────────────── */
  --ouro:#B9915B;
  --ouro-luz:#D9BC8C;
  --ouro-fundo:#8A6A3E;

  --navy:#001F35;            /* base, equivalente ao abismo do evento */
  --navy-fundo:#00172B;      /* um degrau abaixo, para vinhetas        */
  --breu:#032A45;            /* um tom acima da base: dá cadência      */
  --superficie:#0A3350;      /* cartões e caixas sobre a base          */
  --elevado:#0E3E60;         /* cartão em destaque                     */
  --papel:#F5F4F3;           /* superfície clara pontual               */

  --linha:rgba(185,145,91,.18);
  --linha-forte:rgba(185,145,91,.40);
  --branco:#FFFFFF;
  --texto:rgba(255,255,255,.72);
  --texto-fraco:rgba(255,255,255,.48);

  /* ── tipografia ────────────────────────────────────────────────────────── */
  --display:'Manrope','Avenir Next','Helvetica Neue',sans-serif;
  --corpo:'Manrope','Avenir Next','Helvetica Neue',sans-serif;
  --serif:'Libre Baskerville',Georgia,'Iowan Old Style',serif;

  /* ── forma ─────────────────────────────────────────────────────────────── */
  --r-mini:8px;
  --r:14px;
  --r-ios:18px;
  --gutter:clamp(18px,4.6vw,56px);
  --largura:1240px;

  /* ── movimento: curvas próprias, nunca ease/linear ─────────────────────── */
  --expo:cubic-bezier(.16,1,.3,1);
  --quart:cubic-bezier(.25,1,.5,1);

  /* ── ESCALA DE RESPIRO · fonte única ───────────────────────────────────────
     Não redefinir em media query: o clamp cobre 320px→1920px sozinho.
     Cada valor é ~1,6× o anterior.
       --justo : entre elementos colados (rótulo↔valor, ícone↔texto)
       --peca  : entre irmãos dentro de um bloco (cards, linhas)
       --bloco : entre o título de uma seção e o conteúdo dela
       --secao : entre duas seções                                          */
  --justo:clamp(6px,0.6vw,9px);
  --peca:clamp(10px,1vw,14px);
  --bloco:clamp(18px,1.8vw,26px);
  --secao:clamp(34px,4vw,68px);
}

/* ══════════════════════════════════════════════════════════════════════════
   TIPOGRAFIA FLUIDA
   Cada regra vale o mínimo exato em 375px e o máximo exato em 1280px,
   interpolando continuamente. Sem degrau em breakpoint nenhum.
   ══════════════════════════════════════════════════════════════════════════ */
.ex-h1{font-family:var(--display);font-weight:800;letter-spacing:-.042em;line-height:1.04;
  font-size:clamp(30px,calc(15.1px + 3.972vw),66px)}
.ex-h2{font-family:var(--display);font-weight:800;letter-spacing:-.036em;line-height:1.08;
  font-size:clamp(25px,calc(14.5px + 2.798vw),50px)}
.ex-h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.2;
  font-size:clamp(17px,calc(15.34px + 0.442vw),21px)}
.ex-lead{font-size:clamp(15.5px,calc(14.05px + 0.387vw),19px);line-height:1.6;color:var(--texto)}
.ex-corpo{font-size:clamp(15px,calc(14.17px + 0.221vw),17px);line-height:1.72;color:var(--texto)}
.ex-olho{font-size:clamp(13px,calc(11.96px + 0.276vw),15.5px);letter-spacing:.09em;
  text-transform:uppercase;color:var(--ouro);font-weight:600}

/* o realce do título vira a voz serif itálica — o gesto da marca G4.
   A serif tem altura-x menor que o Manrope, então precisa de corpo maior
   para pesar o mesmo na linha. */
.ex-h1 .destaque,.ex-h2 .destaque,.ex-h3 .destaque,.g4-em{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:1.18em;letter-spacing:-.012em;line-height:.98;
  color:var(--ouro);
}

/* ══════════════════════════════════════════════════════════════════════════
   BOTÃO · pílula com a caixa da seta, igual ao evento
   ══════════════════════════════════════════════════════════════════════════ */
.ex-btn{
  --bg:var(--ouro); --fg:#00121F;
  display:inline-flex;align-items:center;gap:14px;
  padding:14px 14px 14px 22px;border-radius:999px;border:0;cursor:pointer;
  background:var(--bg);color:var(--fg);
  font-family:var(--display);font-weight:800;letter-spacing:-.01em;
  font-size:clamp(15px,calc(14.79px + 0.055vw),15.5px);
  min-height:52px;text-decoration:none;
  transition:transform .5s var(--quart),box-shadow .5s var(--quart),background .3s var(--expo);
}
.ex-btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px -18px rgba(185,145,91,.75)}
.ex-btn:active{transform:translateY(0)}
.ex-btn__ico{
  display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:rgba(0,31,53,.16);flex:0 0 26px;
  transition:transform .55s var(--quart),background .3s var(--expo);
}
.ex-btn:hover .ex-btn__ico{transform:translate(3px,-2px);background:rgba(0,31,53,.24)}
.ex-btn__ico svg{width:14px;height:14px}

.ex-btn--fantasma{--bg:transparent;--fg:var(--branco);
  border:1px solid var(--linha-forte)}
.ex-btn--fantasma:hover{background:rgba(255,255,255,.07);box-shadow:none;border-color:var(--ouro)}
.ex-btn--fantasma .ex-btn__ico{background:rgba(255,255,255,.10)}

/* ══════════════════════════════════════════════════════════════════════════
   SUPERFÍCIES
   ══════════════════════════════════════════════════════════════════════════ */
.ex-caixa{
  background:var(--superficie);border:1px solid var(--linha);
  border-radius:var(--r-ios);padding:clamp(20px,2.4vw,32px);
}
.ex-caixa--alta{background:var(--elevado);border-color:var(--linha-forte)}

/* superfície clara pontual: o contraponto que o evento usa como pontuação.
   Redefine os tokens em vez de reescrever cada regra filha. */
.ex-claro{
  --texto:rgba(0,31,53,.70);
  --texto-fraco:rgba(0,31,53,.50);
  --branco:#0A1A26;
  --linha:rgba(0,31,53,.14);
  --linha-forte:rgba(0,31,53,.30);
  --ouro:#7A5A34;                /* 5,4:1 sobre o papel — passa AA */
  background:var(--papel);color:#0A1A26;
}
.ex-claro .ex-btn{--bg:var(--navy);--fg:#fff}
.ex-claro .ex-btn__ico{background:rgba(255,255,255,.18)}

/* ══════════════════════════════════════════════════════════════════════════
   ATMOSFERA · o que dá profundidade sem virar enfeite
   Malha de pontos fixa + grão + brilho radial por seção. Tudo em
   pseudo-elemento com pointer-events:none, nada intercepta clique.
   ══════════════════════════════════════════════════════════════════════════ */
.ex-fundo{position:relative;background:var(--navy);color:var(--branco)}

.ex-fundo::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 30%,#000 20%,transparent 78%);
          mask-image:radial-gradient(120% 80% at 50% 30%,#000 20%,transparent 78%);
}
.ex-fundo::after{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* o conteúdo sobe acima das duas camadas */
.ex-fundo > *{position:relative;z-index:1}

/* brilho dourado no alto da seção: presença sem gradiente chapado */
.ex-secao{position:relative;padding-block:var(--secao) var(--bloco)}
.ex-secao::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 46% at 50% 0%,rgba(185,145,91,.085),transparent 68%);
}

.ex-container{width:min(100% - var(--gutter)*2,var(--largura));margin-inline:auto}

/* ══════════════════════════════════════════════════════════════════════════
   REVELAÇÕES · só opacity e transform, nunca propriedade que force layout
   ══════════════════════════════════════════════════════════════════════════ */
.ex-rv{opacity:0;transform:translateY(18px);
  transition:opacity .85s var(--expo),transform .95s var(--expo)}
.ex-rv--foco{filter:blur(9px);transition:opacity .9s var(--expo),
  filter 1.1s var(--expo),transform .9s var(--expo)}
.ex-rv--escala{transform:scale(.965)}
.ex-rv.dentro{opacity:1;transform:none;filter:none}

@media (prefers-reduced-motion:reduce){
  .ex-rv{opacity:1;transform:none;filter:none;transition:none}
  .ex-btn,.ex-btn__ico{transition:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   TOQUE · alvo mínimo de 44px onde não há cursor
   ══════════════════════════════════════════════════════════════════════════ */
@media (hover:none){
  .ex-btn{min-height:54px}
  .ex-btn:hover{transform:none;box-shadow:none}
  .ex-btn:hover .ex-btn__ico{transform:none}
  a.ex-link,button.ex-link{display:inline-flex;align-items:center;min-height:44px}
}

/* ══════════════════════════════════════════════════════════════════════════
   PONTE DE COMPONENTES
   O portal inteiro usa raio 10px e botões retangulares. O evento usa
   superfície em 18px e botão em pílula. Aqui os componentes que já existem
   recebem o vocabulário novo — só propriedades visuais, nunca as que o JS
   mede (largura, posição, display). painel.js e admin.js seguem intactos.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── superfícies: cartão do evento ───────────────────────────────────────── */
.pn-card,.pn-stat-card,.pn-continue-card,
.caixa,.tabela-wrap,.aviso,.video-embed,.lesson-video,
.grade2 > *,.duas-colunas > *{
  border-radius:var(--r-ios)!important;
}
.pn-card,.pn-stat-card,.pn-continue-card,.caixa{
  border:1px solid var(--linha);
  transition:transform .5s var(--quart),border-color .4s var(--expo),
             background .4s var(--expo);
}
.pn-card:hover,.pn-continue-card:hover{
  transform:translateY(-3px);border-color:var(--linha-forte);
}

/* ── botão: pílula dourada com alvo de toque de verdade ──────────────────── */
.btn,.pn-continue-card .pn-seta,
button.primario,.linha-acoes button{
  border-radius:999px!important;
  font-family:var(--display);font-weight:800;letter-spacing:-.01em;
  transition:transform .5s var(--quart),box-shadow .5s var(--quart),
             background .3s var(--expo);
}
.btn{min-height:48px;padding-inline:22px}
.btn:hover{transform:translateY(-2px);
  box-shadow:0 16px 34px -18px rgba(185,145,91,.7)}
.btn:active{transform:translateY(0)}

/* ── selo "em breve": vira etiqueta discreta em vez de fita ──────────────── */
.pn-badge,.em-breve,.pn-em-breve,.mini,.check{
  border-radius:999px!important;
  font-family:var(--display);font-weight:700;letter-spacing:.06em;
}

/* ── círculos continuam círculos ─────────────────────────────────────────── */
.pn-dot,.trail-dot,.pn-card-icon,.pn-continue-icon,
.pn-icon-navy,.pn-icon-gold,.pn-icon-teal{border-radius:50%!important}

/* ── campos: 16px trava o zoom automático do iOS ao focar ────────────────── */
input,select,textarea{
  font-size:max(16px,1rem);
  border-radius:var(--r-mini)!important;
  transition:border-color .3s var(--expo),background .3s var(--expo);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ouro)}

/* ── foco visível pelo teclado: acessibilidade que o portal não tinha ────── */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--ouro);outline-offset:3px;border-radius:var(--r-mini);
}

/* ── títulos com a palavra-chave em serif itálica (gesto da marca) ───────── */
h1 .g4-em,h2 .g4-em,h3 .g4-em{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:1.18em;letter-spacing:-.012em;color:var(--ouro);
}

/* ── alvo de toque no celular ────────────────────────────────────────────── */
@media (hover:none){
  .btn,button,.pn-card,.pn-continue-card{min-height:44px}
  .pn-card:hover,.pn-continue-card:hover{transform:none}
  .btn:hover{transform:none;box-shadow:none}
}

@media (prefers-reduced-motion:reduce){
  .pn-card,.pn-stat-card,.pn-continue-card,.caixa,.btn{transition:none}
  .pn-card:hover,.pn-continue-card:hover,.btn:hover{transform:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   CMS · barra de ações do editor de conteúdo
   ══════════════════════════════════════════════════════════════════════════ */
.cms-topo{padding:10px 12px;border-bottom:1px solid var(--linha);margin-bottom:6px}
.cms-acoes{
  display:flex;flex-wrap:wrap;gap:var(--justo);
  padding-bottom:var(--peca);margin-bottom:var(--peca);
  border-bottom:1px solid var(--linha);
}
.cms-acoes .btn{min-height:38px;padding:0 14px;font-size:13px}
.cms-acoes .btn--ok{background:var(--ouro);color:#00121F;border:0}
.cms-acoes .btn--perigo{background:transparent;color:#E8A08A;
  border:1px solid rgba(232,160,138,.42)}
.cms-acoes .btn--perigo:hover{background:rgba(232,160,138,.12)}
.no[data-addcurso]{font-weight:700}
@media (max-width:620px){
  .cms-acoes{gap:6px}
  .cms-acoes .btn{min-height:44px;flex:1 1 auto}
}

/* ══════════════════════════════════════════════════════════════════════════
   EDITOR DE AULA · listas repetíveis
   Substitui o textarea de JSON. Cada item é uma linha com seus campos e as
   ações de subir, descer e remover — nada de contar colchete.
   ══════════════════════════════════════════════════════════════════════════ */
.aula-form{display:block}
.aula-form > label{margin-top:var(--peca)}

.rep{margin-top:var(--bloco);padding-top:var(--peca);border-top:1px solid var(--linha)}
.rep-cab h4{margin:0 0 2px;font-family:var(--display);font-weight:800;
  font-size:clamp(14.5px,calc(13.67px + 0.221vw),16.5px);letter-spacing:-.01em}
.rep-cab .mini{margin:0 0 var(--peca)}
.rep-itens{display:flex;flex-direction:column;gap:var(--peca)}
.rep-vazio{opacity:.6;padding:var(--peca) 0}

.rep-item{border:1px solid var(--linha);border-radius:var(--r);
  padding:var(--peca) clamp(12px,1.6vw,18px);background:rgba(0,23,43,.34)}
.rep-item-cab{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--justo)}
.rep-n{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:rgba(185,145,91,.16);color:var(--ouro);
  font-family:var(--display);font-weight:800;font-size:12px}
.rep-item-acoes{display:flex;gap:4px}
.rep-mini{width:34px;height:34px;border-radius:var(--r-mini);cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid var(--linha);color:var(--texto);
  font-size:13px;line-height:1;transition:background .3s var(--expo),color .3s var(--expo)}
.rep-mini:hover{background:rgba(255,255,255,.12);color:var(--branco)}
.rep-del:hover{background:rgba(232,160,138,.16);color:#E8A08A;
  border-color:rgba(232,160,138,.4)}

.rep-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--peca)}
.rep-campo label{margin:0 0 4px;font-size:11.5px}
.rep-campo input,.rep-campo textarea{width:100%}

.rep-ops{grid-column:1/-1;margin-top:var(--justo);padding-top:var(--peca);
  border-top:1px dashed var(--linha)}
.rep-op{display:flex;align-items:center;gap:var(--justo);margin-top:6px}
.rep-op input[type=radio]{width:20px;height:20px;flex:0 0 20px;accent-color:var(--ouro);cursor:pointer}
.rep-op-txt{flex:1 1 auto}
.rep-op-add{margin-top:var(--peca)}
.rep-add{margin-top:var(--peca)}

.aula-json{margin-top:var(--bloco);padding-top:var(--peca);border-top:1px solid var(--linha)}
.aula-json summary{cursor:pointer;font-family:var(--display);font-weight:700;
  font-size:14px;padding:var(--justo) 0;min-height:44px;display:flex;align-items:center}
.aula-json textarea{width:100%;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12.5px}

@media (max-width:760px){
  .rep-grade{grid-template-columns:1fr}
  .rep-campo[style*="span"]{grid-column:1/-1!important}
  .rep-mini{width:44px;height:44px}
}

/* ══════════════════════════════════════════════════════════════════════════
   AJUSTE: bloco "Explore outras formações" — cards 100% responsivos
   Menos arredondamento, sem fita diagonal cobrindo conteúdo, grid fluido.
   ══════════════════════════════════════════════════════════════════════════ */
.pn-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));
  gap:18px;
  align-items:stretch;
}
.pn-card{
  border-radius:14px!important;
  min-width:0; overflow:hidden;
}
/* a fita diagonal "EM BREVE" cobria número/ícone e vazava na borda: removida.
   O selo do rodapé ("Disponível em breve") já comunica o estado. */
.pn-card.em-breve::after{ content:none!important; display:none!important; }
.pn-card-top{ padding:20px 20px 14px; min-width:0; }
.pn-card h3,
.pn-card p{ min-width:0; overflow-wrap:anywhere; hyphens:auto; }
.pn-card h3{ font-size:clamp(16px,1.15vw + 12px,18.5px); line-height:1.3; }
.pn-card p{ font-size:13.5px; }
.pn-card-foot{
  padding:12px 20px; gap:10px; flex-wrap:wrap;
  align-items:center; justify-content:space-between;
}
.pn-badge.pn-em-breve{ white-space:nowrap; }

@media (max-width:900px){
  .pn-grid{ grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr)); gap:16px; }
}
@media (max-width:640px){
  .pn-grid{ grid-template-columns:1fr; gap:14px; }
  .pn-card{ border-radius:12px!important; }
  .pn-card-top{ padding:18px 16px 12px; }
  .pn-card-foot{ padding:12px 16px; }
  .pn-card h3{ font-size:17px; }
  .pn-card p{ font-size:13px; line-height:1.5; }
}