/* ============================================================
   Interface do Usuário — landing  ·  "Caloroso e acolhedor"
   Fontes auto-hospedadas (LGPD), mobile-first, WCAG AA, dark mode
   ============================================================ */

@font-face { font-family:"Inter"; font-weight:400; font-display:swap; src:url("fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-weight:500; font-display:swap; src:url("fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-weight:600; font-display:swap; src:url("fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-weight:700; font-display:swap; src:url("fonts/inter-700.woff2") format("woff2"); }
@font-face { font-family:"Fraunces"; font-weight:600; font-display:swap; src:url("fonts/fraunces-600.woff2") format("woff2"); }
@font-face { font-family:"Fraunces"; font-weight:700; font-display:swap; src:url("fonts/fraunces-700.woff2") format("woff2"); }

:root {
  --color-accent:#5b51e6; --color-accent-hover:#463cc7; --color-accent-soft:#eceafe; --color-on-accent:#fff;
  --color-bg:#faf7f2; --color-surface:#fff; --color-surface-2:#fbf8f3; --color-border:#ece5db; --color-border-strong:#ddd4c7;
  --color-text:#2c2722; --color-text-muted:#756d63; --color-link:#5b51e6; --color-link-hover:#463cc7;
  --t1-bg:#fdeede; --analogy-bg:#f2eefc;
  --content-max-width:720px;
  --spacing-xs:.375rem; --spacing-sm:.75rem; --spacing-md:1.25rem; --spacing-lg:2.5rem; --spacing-xl:4rem;
  --font-heading:"Fraunces", Georgia, serif;
  --font-body:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-size-sm:.875rem; --font-size-base:1.0625rem; --font-size-lg:1.1875rem;
  --line-height:1.72; --radius:14px; --radius-lg:20px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(44,39,34,.04), 0 2px 8px rgba(44,39,34,.05);
  --shadow-md:0 6px 16px rgba(44,39,34,.08), 0 12px 32px rgba(44,39,34,.07);
}
@media (prefers-color-scheme:dark) {
  :root {
    --color-accent:#a8a1fb; --color-accent-hover:#c4bffd; --color-accent-soft:#27224a; --color-on-accent:#1b1814;
    --color-bg:#1b1815; --color-surface:#262219; --color-surface-2:#231f17; --color-border:#3a342b; --color-border-strong:#4a4337;
    --color-text:#f1ece4; --color-text-muted:#a99f92; --color-link:#a8a1fb; --color-link-hover:#c4bffd;
    --t1-bg:#33271a; --analogy-bg:#2a2440;
    --shadow-sm:0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.25);
    --shadow-md:0 6px 16px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.3);
  }
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:100%; -webkit-text-size-adjust:100%; }
body { font-family:var(--font-body); font-size:var(--font-size-base); line-height:var(--line-height); color:var(--color-text); background:var(--color-bg); -webkit-font-smoothing:antialiased; }
a { color:var(--color-link); text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--color-link) 35%, transparent); text-underline-offset:3px; transition:color .15s, text-decoration-color .15s; }
a:hover { color:var(--color-link-hover); text-decoration-color:currentColor; }
:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; border-radius:3px; }
.skip-link { position:absolute; left:-9999px; top:0; z-index:100; background:var(--color-accent); color:var(--color-on-accent); padding:var(--spacing-sm) var(--spacing-md); border-radius:0 0 10px 0; font-weight:600; }
.skip-link:focus { left:0; }

h1,h2,h3 { font-family:var(--font-heading); font-weight:600; line-height:1.18; letter-spacing:-0.01em; color:var(--color-text); }

.landing { max-width:var(--content-max-width); margin-inline:auto; padding-inline:var(--spacing-md); }

/* Hero */
.hero { position:relative; padding-block:var(--spacing-xl) var(--spacing-lg); overflow-x:clip; }
.hero::before { content:""; position:absolute; z-index:-1; top:-8%; right:-18%; width:60vw; max-width:560px; aspect-ratio:1; background:radial-gradient(circle at 32% 30%, var(--t1-bg), transparent 62%), radial-gradient(circle at 68% 66%, var(--analogy-bg), transparent 60%); filter:blur(10px); opacity:.75; pointer-events:none; }
.hero-label { display:inline-block; font-size:var(--font-size-sm); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--color-accent); margin-bottom:var(--spacing-sm); }
.hero h1 { font-size:clamp(2.5rem, 1.8rem + 3.6vw, 4rem); font-weight:700; margin-bottom:var(--spacing-md); }
.hero-subtitle { font-size:var(--font-size-lg); color:var(--color-text-muted); max-width:48ch; margin-bottom:var(--spacing-md); }
.hero-author { font-size:var(--font-size-sm); color:var(--color-text-muted); }

/* Botão pill */
.btn { display:inline-flex; align-items:center; gap:.5em; font-weight:600; text-decoration:none; cursor:pointer; padding:.85em 1.5em; border-radius:var(--radius-pill); border:1.5px solid transparent; background:var(--color-accent); color:var(--color-on-accent); box-shadow:var(--shadow-sm); transition:transform .15s, box-shadow .15s, background-color .15s; }
.btn:hover { background:var(--color-accent-hover); color:var(--color-on-accent); transform:translateY(-2px); box-shadow:var(--shadow-md); text-decoration:none; }

/* Catálogo / course card */
.catalog { margin-block:var(--spacing-xl); }
.catalog > h2 { font-size:clamp(1.5rem,1.25rem+1.1vw,1.875rem); margin-bottom:var(--spacing-md); }
.course-list { list-style:none; margin:0; padding:0; display:grid; gap:var(--spacing-md); }
.course-item { position:relative; }
.course-item > a { display:block; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--spacing-lg); box-shadow:var(--shadow-sm); text-decoration:none; color:var(--color-text); transition:transform .18s, box-shadow .18s, border-color .18s; }
.course-item > a::before { content:""; display:block; height:6px; border-radius:var(--radius-pill); background:linear-gradient(90deg, var(--t1-bg), var(--analogy-bg), var(--color-accent-soft)); margin-bottom:var(--spacing-md); }
.course-item > a:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--color-border-strong); }
.course-item h3 { font-size:clamp(1.375rem,1.2rem+.8vw,1.75rem); margin-bottom:var(--spacing-sm); }
.course-item:hover h3 { color:var(--color-accent); }
.course-item p { color:var(--color-text-muted); margin-bottom:var(--spacing-md); }
.course-cta { display:inline-flex; align-items:center; gap:.4em; font-weight:600; color:var(--color-accent); }

/* Sobre (card) */
.about { background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius); padding:var(--spacing-lg); margin-block:var(--spacing-lg); }
.about h2 { font-size:var(--font-size-lg); margin-bottom:var(--spacing-sm); }
.about p { color:var(--color-text-muted); margin-bottom:var(--spacing-sm); }
.about p:last-child { margin-bottom:0; }

/* Footer */
.site-footer { max-width:var(--content-max-width); margin:var(--spacing-xl) auto 0; padding:var(--spacing-lg) var(--spacing-md); border-top:1px solid var(--color-border); text-align:center; color:var(--color-text-muted); font-size:var(--font-size-sm); }
.site-footer p { margin-bottom:var(--spacing-xs); }

/* Página de texto longo (política de privacidade) */
.legal { max-width:680px; margin-inline:auto; padding-block:var(--spacing-xl) var(--spacing-lg); }
.legal .back { font-size:var(--font-size-sm); margin-bottom:var(--spacing-lg); }
.legal h1 { font-size:clamp(2rem,1.6rem+1.8vw,2.75rem); margin-bottom:var(--spacing-sm); }
.legal .updated { color:var(--color-text-muted); font-size:var(--font-size-sm); margin-bottom:var(--spacing-lg); }
.legal h2 { font-size:var(--font-size-lg); margin-top:var(--spacing-xl); margin-bottom:var(--spacing-sm); }
.legal p { margin-bottom:var(--spacing-md); }
.legal ul { margin:0 0 var(--spacing-md) 1.25rem; }
.legal li { margin-bottom:var(--spacing-xs); }

/* Cookie banner (LGPD) */
.cookie-banner {
  position:fixed; z-index:90; left:var(--spacing-md); right:var(--spacing-md); bottom:var(--spacing-md);
  max-width:640px; margin-inline:auto;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--spacing-md);
  background:var(--color-surface); border:1px solid var(--color-border-strong);
  border-radius:var(--radius); box-shadow:var(--shadow-md);
  padding:var(--spacing-md) var(--spacing-lg);
  transition:opacity .2s, transform .2s;
}
.cookie-banner__text { flex:1 1 260px; }
.cookie-banner__text p { margin:0; font-size:var(--font-size-sm); color:var(--color-text-muted); }
.cookie-banner__actions { display:flex; gap:var(--spacing-sm); flex-shrink:0; }
.cookie-banner__btn {
  font:inherit; font-weight:600; font-size:var(--font-size-sm); line-height:1; cursor:pointer;
  padding:.65em 1.2em; border-radius:var(--radius-pill); border:1.5px solid transparent;
  transition:background-color .15s, border-color .15s, color .15s, transform .15s;
}
.cookie-banner__btn--accept { background:var(--color-accent); color:var(--color-on-accent); }
.cookie-banner__btn--accept:hover { background:var(--color-accent-hover); transform:translateY(-1px); }
.cookie-banner__btn--reject { background:transparent; color:var(--color-text); border-color:var(--color-border-strong); }
.cookie-banner__btn--reject:hover { border-color:var(--color-accent); color:var(--color-accent); }
.cookie-banner__btn:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; }
.cookie-banner--hidden { opacity:0; transform:translateY(1rem); pointer-events:none; }
.cookie-toggle {
  position:fixed; z-index:80; bottom:var(--spacing-md); left:var(--spacing-md);
  font:inherit; font-size:var(--font-size-sm); font-weight:600; cursor:pointer;
  padding:.5em 1em; border-radius:var(--radius-pill);
  background:var(--color-surface); color:var(--color-text-muted);
  border:1px solid var(--color-border); box-shadow:var(--shadow-sm);
  transition:color .15s, border-color .15s;
}
.cookie-toggle:hover { color:var(--color-accent); border-color:var(--color-accent); }
@media (max-width:520px) { .cookie-banner { flex-direction:column; align-items:stretch; } }

@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; } }