@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');

:root {
  --yellow: #f6c700;
  --yellow-strong: #e6b900;
  --ink: #171717;
  --muted: #666b73;
  --paper: #ffffff;
  --surface: #f7f7f4;
  --line: #e7e7e1;
  --success: #176b45;
  --danger: #a32929;
  --radius: 18px;
  --shadow: 0 12px 32px rgba(0,0,0,.07);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Roboto', Arial, sans-serif;
  color: var(--ink);
  background: var(--surface);
  line-height: 1.55;
}
a { color: inherit; }
button, input { font: inherit; }

.skip-link { position:absolute; left:-9999px; top:auto; }
.skip-link:focus { left:16px; top:16px; z-index:9999; background:#fff; padding:10px 14px; border-radius:10px; }

.container { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.site-header { position: sticky; top:0; z-index:1000; background:rgba(255,255,255,.96); backdrop-filter: blur(10px); border-bottom:1px solid var(--line); }
.header-inner { min-height:74px; display:flex; align-items:center; gap:24px; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; min-width:260px; }
.brand-mark { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:var(--yellow); font-weight:900; letter-spacing:-.04em; }
.brand-text strong { display:block; font-size:.96rem; }
.brand-text span { display:block; font-size:.76rem; color:var(--muted); }
.nav { margin-left:auto; display:flex; align-items:center; gap:6px; }
.nav a, .logout-btn { text-decoration:none; border:0; background:transparent; padding:10px 12px; border-radius:10px; font-weight:500; cursor:pointer; }
.nav a:hover, .nav a[aria-current="page"], .logout-btn:hover { background:#f1f1ec; }
.logout-btn { border:1px solid var(--line); }
.menu-toggle { display:none; margin-left:auto; border:1px solid var(--line); border-radius:10px; background:#fff; padding:9px 12px; }
.user-chip { font-size:.78rem; color:var(--muted); max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

main { min-height: calc(100vh - 160px); }
.hero { padding:64px 0 40px; background:linear-gradient(135deg,#fff 0%,#fff8d6 100%); border-bottom:1px solid var(--line); }
.hero-grid { display:grid; grid-template-columns:1.3fr .7fr; gap:38px; align-items:center; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#4b4b44; }
.eyebrow::before { content:""; width:28px; height:4px; border-radius:999px; background:var(--yellow); }
h1 { margin:.35em 0 .3em; font-size:clamp(2.2rem,5vw,4.6rem); line-height:.98; letter-spacing:-.045em; }
.hero p { font-size:1.08rem; color:#4e535a; max-width:720px; }
.hero-panel { background:#171717; color:#fff; border-radius:28px; padding:28px; box-shadow:var(--shadow); }
.hero-panel strong { display:block; font-size:1.15rem; margin-bottom:10px; }
.hero-panel p { color:#d8d8d8; font-size:.95rem; margin:0; }

.section { padding:42px 0; }
.section-title { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:22px; }
.section-title h2 { margin:0; font-size:clamp(1.5rem,3vw,2.2rem); letter-spacing:-.025em; }
.section-title p { margin:0; color:var(--muted); max-width:560px; }
.grid { display:grid; gap:18px; }
.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.card { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:0 4px 14px rgba(0,0,0,.025); }
.card h3 { margin:8px 0 8px; font-size:1.15rem; }
.card p { margin:0; color:var(--muted); }
.card-link { display:block; text-decoration:none; transition:transform .16s ease, box-shadow .16s ease; }
.card-link:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.icon-tile { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:#fff5bf; font-weight:900; }
.badge { display:inline-flex; align-items:center; border-radius:999px; padding:5px 9px; font-size:.72rem; font-weight:700; }
.badge.available { background:#ffe15a; color:#332b00; }
.badge.soon { background:#ecece7; color:#6a6a63; }
.quick-links { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.quick-links a { text-decoration:none; background:#fff; border:1px solid var(--line); border-radius:14px; padding:15px; font-weight:700; text-align:center; }
.quick-links a:hover { border-color:#c8a600; }

.page-head { padding:42px 0 24px; background:#fff; border-bottom:1px solid var(--line); }
.page-head h1 { font-size:clamp(2rem,4vw,3.4rem); margin:.3em 0 .2em; }
.page-head p { max-width:760px; color:var(--muted); }
.content-layout { display:grid; grid-template-columns:260px 1fr; gap:24px; align-items:start; }
.toc { position:sticky; top:96px; }
.toc h3 { margin-top:0; }
.toc a { display:block; padding:7px 0; color:#53585f; text-decoration:none; }
.toc a:hover { color:#000; }
.content-block { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; margin-bottom:18px; }
.content-block h2 { margin-top:0; }
.placeholder { border:1px dashed #bbb9ac; background:#fbfbf7; color:#67675f; border-radius:14px; padding:18px; }

.video-wrapper { aspect-ratio:16/9; width:100%; background:#111; border-radius:14px; overflow:hidden; }
.video-wrapper iframe { width:100%; height:100%; border:0; }

.site-footer { margin-top:44px; border-top:1px solid var(--line); background:#fff; }
.footer-inner { min-height:84px; display:flex; align-items:center; justify-content:space-between; gap:16px; color:var(--muted); font-size:.86rem; }
.version { font-weight:700; color:#333; }

.auth-page { min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr; background:#fff; }
.auth-visual { padding:54px; background:linear-gradient(145deg,#121212 0%,#292929 100%); color:#fff; display:flex; flex-direction:column; justify-content:space-between; }
.auth-visual .brand { color:#fff; }
.auth-visual .brand-text span { color:#cfcfcf; }
.auth-visual h1 { font-size:clamp(2.5rem,5vw,5rem); max-width:760px; }
.auth-visual p { color:#d7d7d7; max-width:640px; font-size:1.05rem; }
.auth-panel { display:grid; place-items:center; padding:32px; }
.login-card { width:min(440px,100%); }
.login-card h2 { font-size:2rem; margin-bottom:8px; }
.login-card > p { color:var(--muted); }
.form-group { margin:18px 0; }
.form-group label { display:block; margin-bottom:7px; font-weight:700; }
.form-group input { width:100%; border:1px solid #cfcfc7; border-radius:12px; padding:13px 14px; outline:none; }
.form-group input:focus { border-color:#8a7400; box-shadow:0 0 0 3px rgba(246,199,0,.2); }
.primary-btn { width:100%; border:0; border-radius:12px; padding:13px 16px; background:var(--yellow); color:#1d1a00; font-weight:900; cursor:pointer; }
.primary-btn:hover { background:var(--yellow-strong); }
.primary-btn:disabled { opacity:.6; cursor:wait; }
.form-message { min-height:24px; margin-top:12px; font-size:.9rem; }
.form-message.error { color:var(--danger); }
.form-message.success { color:var(--success); }
.login-note { margin-top:18px; background:#f8f7ef; border-radius:12px; padding:13px; font-size:.86rem; color:#56564f; }

@media (max-width: 980px) {
  .hero-grid, .content-layout { grid-template-columns:1fr; }
  .toc { position:static; }
  .grid-3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .quick-links { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .menu-toggle { display:block; }
  .nav { display:none; position:absolute; left:16px; right:16px; top:68px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:12px; box-shadow:var(--shadow); flex-direction:column; align-items:stretch; }
  .nav.open { display:flex; }
  .user-chip { max-width:none; padding:8px 12px; }
}
@media (max-width: 720px) {
  .auth-page { grid-template-columns:1fr; }
  .auth-visual { min-height:42vh; padding:30px; }
  .auth-panel { padding:28px 20px; }
  .grid-3, .grid-2 { grid-template-columns:1fr; }
  .quick-links { grid-template-columns:1fr 1fr; }
  .section-title, .footer-inner { align-items:flex-start; flex-direction:column; }
  .brand { min-width:0; }
  .brand-text span { display:none; }
}

/* v1.1.2 — Supabase Auth connected; config validation fixed */
.hero-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:24px; }
.course-pill, .course-context span { display:inline-flex; align-items:center; border:1px solid #d8c56c; background:rgba(255,255,255,.72); border-radius:999px; padding:8px 12px; font-size:.82rem; font-weight:700; }
.panel-kicker { display:block; color:#f6c700; text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; font-weight:900; margin-bottom:10px; }
.section-first { padding-top:48px; }
.alt-section { background:#efefe9; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.highlight-card { border-top:4px solid var(--yellow); }
.card-cta { display:inline-block; margin-top:18px; font-size:.82rem; font-weight:900; }
.roadmap-card { background:#202020; color:#fff; border-color:#202020; }
.roadmap-card p { color:#d2d2ce; }
.empty-state, .feature-strip { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; display:flex; justify-content:space-between; align-items:center; gap:24px; }
.empty-state p, .feature-strip p { margin:.35rem 0 0; color:var(--muted); }
.feature-strip { background:linear-gradient(120deg,#fff7c9,#fff); }
.feature-strip h3 { margin:.5rem 0 0; font-size:1.3rem; }
.secondary-btn { white-space:nowrap; text-decoration:none; border:1px solid #8b7700; border-radius:12px; padding:11px 16px; font-weight:900; background:#fff; }
.quick-section { padding-bottom:56px; }
.enade-head { background:linear-gradient(130deg,#fff,#fff8d8); }
.course-context { display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; }
.content-column { min-width:0; }
.callout { background:#171717; color:#fff; padding:28px; border-radius:var(--radius); margin-bottom:18px; }
.callout h2 { margin:.6rem 0 .45rem; font-size:1.5rem; }
.callout p { margin:0; color:#d7d7d7; }
.section-number { display:inline-grid; place-items:center; min-width:34px; height:26px; border-radius:8px; background:#fff1a7; font-size:.72rem; font-weight:900; margin-bottom:8px; }
.timeline-skeleton { height:54px; margin-top:22px; position:relative; display:flex; justify-content:space-between; align-items:center; padding:0 18px; }
.timeline-skeleton::before { content:""; position:absolute; left:18px; right:18px; top:50%; border-top:2px dashed #bdb8a0; }
.timeline-skeleton span { position:relative; z-index:1; width:16px; height:16px; border-radius:50%; background:var(--yellow); border:3px solid #fff; box-shadow:0 0 0 1px #b5a135; }
.mini-step { background:#f8f8f3; border:1px solid var(--line); border-radius:14px; padding:18px; display:flex; align-items:center; gap:12px; }
.mini-step strong { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--yellow); }
.placeholder.compact { margin-top:16px; }
.course-card { position:relative; overflow:hidden; }
.course-card::after { content:""; position:absolute; width:90px; height:90px; border-radius:50%; background:#fff2a1; right:-36px; bottom:-42px; }
.course-label { display:inline-block; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; font-weight:900; color:#625700; }
.video-placeholder { aspect-ratio:16/7; min-height:230px; border-radius:16px; display:grid; place-items:center; align-content:center; text-align:center; background:#171717; color:#fff; padding:28px; }
.video-placeholder p { color:#c9c9c9; max-width:620px; }
.play-symbol { width:54px; height:54px; border-radius:50%; display:grid; place-items:center; background:var(--yellow); color:#171717; padding-left:3px; margin-bottom:14px; }
.resource-list { display:grid; gap:10px; }
.resource-list > div { display:flex; align-items:center; justify-content:space-between; gap:14px; border:1px solid var(--line); background:#fafaf7; padding:14px 16px; border-radius:12px; }
.back-strip { padding:12px 4px 0; }
.back-strip a { font-weight:900; text-decoration:none; }

@media (max-width: 720px) {
  .empty-state, .feature-strip { align-items:flex-start; flex-direction:column; }
  .secondary-btn { width:100%; text-align:center; }
  .video-placeholder { aspect-ratio:auto; min-height:280px; }
}


/* v1.2.0 — acesso temporariamente aberto, sem senha */
.public-access-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-decoration: none;
  box-sizing: border-box;
}