/* ===========================================================
   Minha Jornada — Processo Seletivo ESUP
   Tema "Corredor de Luz" (Vestibular 2026.2).
   Consome os tokens de esup-ds.css (carregar ANTES deste arquivo).
   =========================================================== */

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--esup-font-sans);
  color:var(--esup-text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.55;
  min-height:100vh;
}
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,select,textarea{ font-family:inherit; }

h1,h2,h3,h4{ font-family:var(--esup-font-sans); font-weight:900; line-height:1.06; margin:0; color:#fff; letter-spacing:-.02em; }
p{ margin:0; }

.wrap{ width:100%; max-width:1080px; margin:0 auto; padding:0 24px; position:relative; z-index:1; }

/* palavra-chave em itálico magenta (assinatura da campanha) */
.kw{ font-family:var(--esup-font-serif); font-style:italic; font-weight:700; color:var(--esup-magenta-hot); }

/* ---------- Buttons (pílula, padrão DS) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--esup-font-sans); font-weight:700; font-size:13px;
  letter-spacing:.02em; text-transform:uppercase;
  padding:.95rem 1.6rem; border-radius:var(--esup-pill); transition:all .25s ease; white-space:nowrap;
}
.btn--primary,.btn--solid{ background:var(--esup-grad-cta); color:#fff; border:1px solid rgba(30,198,232,.5); box-shadow:var(--esup-shadow-cta); }
.btn--primary:hover,.btn--solid:hover{ transform:translateY(-2px); box-shadow:0 18px 45px -12px rgba(30,198,232,.7); }
.btn--ghost{ background:transparent; color:var(--esup-cyan); border:2px solid var(--esup-turquoise); }
.btn--ghost:hover{ background:rgba(30,198,232,.08); border-color:var(--esup-cyan); }
.btn--block{ width:100%; }
.btn--lg{ font-size:14px; padding:1.1rem 2rem; }
.btn[disabled]{ opacity:.4; cursor:not-allowed; transform:none !important; box-shadow:none; }
.btn .arw{ transition:transform .2s ease; }
.btn:hover .arw{ transform:translateX(3px); }

/* eyebrow (mono ciano com hairline) — reusa do DS, helper local */
.eyebrow-local{
  font-family:var(--esup-font-mono); font-weight:500; font-size:11px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--esup-cyan);
  display:inline-flex; align-items:center; gap:.5rem;
}

/* ---------- Top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; background:rgba(2,12,33,.72); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--esup-line);
}
.topbar__logo{ height:26px; width:auto; }
.topbar__right{ display:flex; align-items:center; gap:16px; }
.topbar__who{ text-align:right; line-height:1.2; }
.topbar__who b{ font-family:var(--esup-font-sans); font-weight:700; font-size:14px; color:#fff; display:block; }
.topbar__who span{ font-family:var(--esup-font-mono); font-size:10.5px; letter-spacing:.06em; color:var(--esup-text-faint); }
.topbar__avatar{
  width:40px; height:40px; border-radius:50%;
  background:var(--esup-grad-cta); color:#fff; font-weight:800; font-size:14px;
  display:flex; align-items:center; justify-content:center;
}

/* ---------- Page shell ---------- */
.page{ padding:34px 0 90px; }

/* ---------- Status header (jhead) ---------- */
.jhead{
  background:linear-gradient(180deg, rgba(4,27,61,.82), rgba(2,12,33,.72));
  border:1px solid rgba(30,198,232,.18); backdrop-filter:blur(6px);
  border-radius:var(--esup-radius-lg); padding:36px 40px;
  position:relative; overflow:hidden;
  box-shadow:0 0 0 1px rgba(30,198,232,.06), 0 30px 70px -40px rgba(30,198,232,.4);
}
/* feixe de luz lateral */
.jhead::before{
  content:""; position:absolute; top:0; left:0; width:90px; height:100%;
  background:linear-gradient(90deg, rgba(30,198,232,.22), transparent); pointer-events:none;
}
.jhead::after{
  content:""; position:absolute; right:-80px; top:-80px; width:320px; height:320px;
  border-radius:50%; background:radial-gradient(circle, rgba(0,137,138,.35), transparent 70%); pointer-events:none;
}
.jhead__eyebrow{ font-family:var(--esup-font-mono); font-weight:500; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--esup-cyan); position:relative; z-index:2; }
.jhead h1{ color:#fff; font-size:clamp(28px,4.2vw,42px); margin:12px 0 0; position:relative; z-index:2; }
.jhead__sub{ margin-top:12px; font-size:15.5px; color:var(--esup-text-muted); max-width:560px; position:relative; z-index:2; line-height:1.65; }
.jhead__progrow{ margin-top:28px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; position:relative; z-index:2; }
.jhead__bar{ flex:1; min-width:220px; height:8px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; border:1px solid var(--esup-line); }
.jhead__bar > i{ display:block; height:100%; border-radius:999px; background:var(--esup-grad-cta); box-shadow:0 0 14px rgba(30,198,232,.6); transition:width .6s cubic-bezier(.16,.8,.3,1); }
.jhead__pct{ font-family:var(--esup-font-sans); font-weight:900; font-size:22px; color:#fff; letter-spacing:-.02em; }
.jhead__next{
  margin-top:22px; display:inline-flex; align-items:center; gap:12px;
  background:rgba(30,198,232,.06); border:1px solid var(--esup-line-cyan);
  border-radius:12px; padding:12px 16px; position:relative; z-index:2;
}
.jhead__next .lab{ font-family:var(--esup-font-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--esup-text-faint); }
.jhead__next b{ color:#fff; font-weight:700; }

/* ---------- Timeline ---------- */
.timeline{ margin-top:30px; position:relative; }

.tstep{ position:relative; display:grid; grid-template-columns:54px 1fr; gap:18px; padding-bottom:14px; }
.tstep__rail{ display:flex; flex-direction:column; align-items:center; }
.tstep__node{
  width:46px; height:46px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--esup-surface); border:2px solid var(--esup-line); color:var(--esup-text-faint);
  font-family:var(--esup-font-sans); font-weight:800; z-index:2; transition:.25s ease;
}
.tstep__line{ flex:1; width:1px; background:linear-gradient(180deg, var(--esup-line), transparent); margin:4px 0; min-height:18px; }
.tstep:last-child .tstep__line{ display:none; }

.tstep--done .tstep__node{ background:rgba(0,155,143,.18); border-color:var(--esup-teal); color:var(--esup-cyan-bright); }
.tstep--done .tstep__line{ background:linear-gradient(180deg, rgba(30,198,232,.5), transparent); }
.tstep--current .tstep__node{ background:var(--esup-grad-cta); border-color:var(--esup-cyan); color:#fff; box-shadow:var(--esup-glow-cyan); }
.tstep--locked{ opacity:.5; }

.tcard{
  background:rgba(6,26,56,.7); border:1px solid var(--esup-line); border-radius:var(--esup-radius);
  overflow:hidden; transition:.25s ease;
}
.tstep--current .tcard{ border-color:var(--esup-line-cyan); box-shadow:0 0 0 1px rgba(30,198,232,.12), 0 24px 55px -30px rgba(30,198,232,.5); }
.tcard:hover{ border-color:var(--esup-line-cyan); }

.tcard__head{ display:flex; align-items:center; gap:14px; padding:18px 22px; cursor:pointer; }
.tcard__head[aria-disabled="true"]{ cursor:default; }
.tcard__ic{ width:40px; height:40px; border-radius:10px; flex:none; display:flex; align-items:center; justify-content:center; background:rgba(30,198,232,.08); color:var(--esup-cyan); border:1px solid var(--esup-line-cyan); }
.tstep--done .tcard__ic{ background:rgba(0,155,143,.14); color:var(--esup-teal); border-color:rgba(0,155,143,.3); }
.tcard__tt{ flex:1; min-width:0; }
.tcard__tt h3{ font-size:17px; color:#fff; }
.tcard__tt p{ font-size:13px; color:var(--esup-text-muted); margin-top:3px; }
.tcard__badge{
  font-family:var(--esup-font-mono); font-weight:500; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  padding:5px 11px; border-radius:var(--esup-pill); white-space:nowrap; border:1px solid transparent;
}
.badge--done{ background:rgba(0,155,143,.12); color:var(--esup-teal); border-color:rgba(0,155,143,.3); }
.badge--current{ background:rgba(30,198,232,.1); color:var(--esup-cyan); border-color:var(--esup-line-cyan); }
.badge--locked{ background:rgba(255,255,255,.04); color:var(--esup-text-faint); border-color:var(--esup-line); }
.tcard__chev{ color:var(--esup-text-faint); transition:transform .2s ease; }
.tcard__chev[data-open="true"]{ transform:rotate(180deg); }

.tcard__body{ padding:4px 22px 24px; border-top:1px solid var(--esup-line); }
.tcard__body-inner{ padding-top:18px; }

/* ---------- Forms (estilo DS) ---------- */
.fieldset-title{ font-family:var(--esup-font-mono); font-weight:500; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--esup-cyan); margin:24px 0 12px; }
.fieldset-title:first-child{ margin-top:4px; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px 16px; }
.col-span{ grid-column:1 / -1; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-family:var(--esup-font-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.field label .req{ color:var(--esup-magenta-hot); }
.field input, .field select, .field textarea{
  width:100%; background:rgba(255,255,255,.04); border:1px solid var(--esup-line); border-radius:var(--esup-radius-lg);
  padding:11px 14px; font-size:14px; color:#fff; transition:.2s ease;
}
.field input::placeholder, .field textarea::placeholder{ color:rgba(255,255,255,.3); }
.field select{ color:#fff; }
.field select option{ background:var(--esup-navy-deep); color:#fff; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:rgba(30,198,232,.6); background:rgba(255,255,255,.06); box-shadow:0 0 0 2px rgba(30,198,232,.2); }
.field .hint{ font-size:12px; color:var(--esup-text-faint); }
.form-actions{ margin-top:24px; display:flex; justify-content:flex-end; gap:12px; }

/* ---------- Doc list ---------- */
.doc{ display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--esup-line); border-radius:10px; background:rgba(255,255,255,.02); margin-bottom:10px; }
.doc__ic{ width:38px; height:38px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:none; }
.doc__tt{ flex:1; }
.doc__tt b{ font-weight:700; font-size:14px; color:#fff; }
.doc__tt span{ display:block; font-size:12.5px; color:var(--esup-text-muted); margin-top:2px; }
.doc--ok .doc__ic{ background:rgba(0,155,143,.14); color:var(--esup-teal); }
.doc--pending .doc__ic{ background:rgba(255,189,47,.12); color:var(--esup-amber); }
.doc__status{ font-size:12px; font-weight:600; font-family:var(--esup-font-mono); letter-spacing:.06em; }

/* ---------- Info / result ---------- */
.note{ background:rgba(30,198,232,.06); border:1px solid var(--esup-line-cyan); border-radius:10px; padding:14px 16px; font-size:14px; color:var(--esup-text); display:flex; gap:10px; align-items:flex-start; }
.note svg{ color:var(--esup-cyan); flex:none; }
.note--gold{ background:rgba(255,189,47,.07); border-color:rgba(255,189,47,.3); }
.note--gold svg{ color:var(--esup-amber); }

.result-card{ text-align:center; padding:30px 20px; }
.result-card .seal{ width:78px; height:78px; border-radius:50%; background:var(--esup-grad-cta); color:#fff; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; box-shadow:var(--esup-glow-cyan); }
.result-card h3{ font-size:24px; color:#fff; }
.result-card p{ color:var(--esup-text-muted); margin-top:8px; }

/* ---------- Login / entrada ---------- */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:40px 20px; position:relative; z-index:1; }
.login-card{
  background:linear-gradient(180deg, rgba(4,27,61,.82), rgba(2,12,33,.72));
  border:1px solid rgba(30,198,232,.18); backdrop-filter:blur(6px);
  border-radius:var(--esup-radius-lg); box-shadow:0 30px 80px -40px rgba(30,198,232,.5);
  padding:40px; max-width:460px; width:100%; position:relative; overflow:hidden;
}
.login-card::before{ content:""; position:absolute; top:0; left:0; width:80px; height:100%; background:linear-gradient(90deg, rgba(30,198,232,.18), transparent); pointer-events:none; }
.login-card__logo{ height:40px; width:auto; margin-bottom:24px; position:relative; }
.login-card h2{ font-size:26px; color:#fff; position:relative; }
.login-card .lede{ color:var(--esup-text-muted); margin-top:10px; font-size:15px; position:relative; }
.login-tabs{ display:flex; gap:6px; margin:22px 0 18px; background:rgba(255,255,255,.04); padding:5px; border-radius:var(--esup-pill); border:1px solid var(--esup-line); position:relative; }
.login-tabs button{ flex:1; padding:10px; border-radius:var(--esup-pill); font-family:var(--esup-font-mono); font-weight:500; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--esup-text-muted); transition:.2s; }
.login-tabs button[data-active="true"]{ background:var(--esup-grad-cta); color:#fff; }

/* ---------- Capa de abertura (hero) ---------- */
.cover-screen{
  position:relative; min-height:100vh; width:100%;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  display:flex; flex-direction:column; padding:28px clamp(24px,6vw,72px) 40px;
  overflow:hidden;
}
.cover-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(900px 500px at 8% 30%, rgba(30,198,232,.16), transparent 60%),
    linear-gradient(90deg, rgba(2,12,33,.93) 0%, rgba(2,12,33,.74) 34%, rgba(2,12,33,.34) 66%, rgba(2,12,33,.62) 100%),
    linear-gradient(0deg, rgba(2,12,33,.9) 0%, rgba(2,12,33,.1) 46%);
}
.cover-top{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.cover-logo{ height:38px; width:auto; }
.cover-pill{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--esup-font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--esup-cyan);
  background:rgba(2,12,33,.5); border:1px solid var(--esup-line-cyan); border-radius:var(--esup-pill); padding:8px 16px; backdrop-filter:blur(6px);
}
.cover-dot{ width:8px; height:8px; border-radius:50%; background:var(--esup-magenta-hot); box-shadow:0 0 10px var(--esup-magenta-hot); animation:cover-pulse 1.8s infinite; }
@keyframes cover-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

.cover-content{ position:relative; z-index:2; flex:1; display:flex; flex-direction:column; justify-content:center; max-width:660px; padding:40px 0; }
.cover-title{ color:#fff; font-size:clamp(44px,7vw,86px); font-weight:900; line-height:.98; letter-spacing:-.03em; margin-top:18px; }
.cover-title .kw{ font-size:.92em; }
.cover-sub{ margin-top:22px; font-size:clamp(15px,2vw,18px); color:var(--esup-text-muted); max-width:48ch; line-height:1.6; }
.cover-hairline{ margin:26px 0; max-width:340px; }
.cover-actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.cover-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:32px; }
.cover-chip{
  font-family:var(--esup-font-sans); font-weight:600; font-size:12.5px;
  color:rgba(255,255,255,.9); border:1px solid var(--esup-line-cyan); background:rgba(2,12,33,.4);
  padding:8px 16px; border-radius:var(--esup-pill); backdrop-filter:blur(4px);
}

/* ---------- Vídeo (embed YouTube responsivo) ---------- */
.video-embed{
  position:relative; width:100%; aspect-ratio:16/9; margin:16px 0 4px;
  border-radius:var(--esup-radius); overflow:hidden; border:1px solid var(--esup-line-cyan);
  background:#000; box-shadow:0 0 0 1px rgba(30,198,232,.08), 0 18px 50px -30px rgba(30,198,232,.5);
}
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---------- "Já estou inscrito" na capa ---------- */
.cover-login{ position:relative; z-index:2; max-width:560px; }
.cover-login__label{
  display:block; font-family:var(--esup-font-mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:10px;
}
.cover-login__row{ display:flex; gap:12px; flex-wrap:wrap; }
.cover-login__input{
  flex:1; min-width:240px; background:rgba(2,12,33,.55); border:1px solid var(--esup-line-cyan);
  border-radius:var(--esup-pill); padding:14px 20px; font-size:15px; color:#fff; backdrop-filter:blur(6px);
}
.cover-login__input::placeholder{ color:rgba(255,255,255,.4); }
.cover-login__input:focus{ outline:none; border-color:var(--esup-cyan); box-shadow:0 0 0 3px rgba(30,198,232,.18); }
.cover-login__erro{ margin-top:12px; font-size:13.5px; color:var(--esup-magenta-hot); background:rgba(190,0,129,.1); border:1px solid rgba(255,58,167,.35); border-radius:10px; padding:10px 14px; max-width:520px; }
.cover-login__back{ margin-top:16px; font-family:var(--esup-font-mono); font-size:12px; letter-spacing:.1em; color:var(--esup-cyan); }
.cover-login__back:hover{ text-decoration:underline; }

/* ---------- Demo banner ---------- */
.demobar{
  display:flex; align-items:center; gap:10px; justify-content:center;
  background:var(--esup-navy-black); color:var(--esup-text-muted);
  font-family:var(--esup-font-mono); font-size:11px; letter-spacing:.04em; padding:8px 14px;
  border-bottom:1px solid var(--esup-line-cyan);
}
.demobar b{ color:var(--esup-cyan); }
.demobar button{ color:#fff; text-decoration:underline; font-size:11px; opacity:.85; font-family:var(--esup-font-mono); }

/* ---------- Responsive ---------- */
@media (max-width: 720px){
  .grid2,.grid3{ grid-template-columns:1fr; }
  .jhead{ padding:26px 22px; }
  .tcard__head{ padding:15px 16px; gap:10px; }
  .tcard__body{ padding:4px 16px 20px; }
  .topbar__who{ display:none; }
  .tstep{ grid-template-columns:38px 1fr; gap:12px; }
  .tstep__node{ width:38px; height:38px; font-size:14px; }
  .tcard__ic{ display:none; }
  .tcard__tt{ min-width:0; }
  .tcard__tt p{ display:none; }
  .tcard__badge{ font-size:9.5px; padding:4px 9px; }
  /* capa no mobile */
  .cover-screen{ padding:22px 22px 32px; }
  .cover-pill{ font-size:10px; padding:7px 12px; }
  .cover-content{ justify-content:flex-end; padding:24px 0 8px; }
  .cover-actions{ gap:12px; }
  .cover-actions .btn{ width:100%; }
  .cover-sub{ font-size:15px; }
}