/* =========================================================
   CEYFORM — Landing page
   Paleta oficial:
   #2A3736 (escuro)  #465251 (cinza-verde)  #32C882 (verde)
   #50F0A0 (verde vivo)  #A0FAD2 (menta)
   ========================================================= */

:root{
  /* Marca (fixas nos dois temas) */
  --green-950:  #2A3736;
  --green-800:  #465251;
  --green:      #32C882;
  --green-bright:#50F0A0;
  --mint:       #A0FAD2;

  /* Tokens que mudam entre claro/escuro — TEMA CLARO (padrão) */
  --ink:        #1c2625;
  --mint-50:    #ECFBF4;
  --chip-text:  #1d5e44;
  --paper:      #ffffff;
  --paper-2:    #f3f8f6;
  --text:       #20302e;
  --text-soft:  #5a6b69;
  --heading:    #2A3736;
  --line:       rgba(42,55,54,.10);
  --header-bg:  rgba(255,255,255,.82);
  --input-bg:   #ffffff;
  --nav-link:   #465251;

  --radius:     18px;
  --radius-sm:  12px;
  --shadow:     0 18px 50px -20px rgba(28,38,37,.28);
  --shadow-sm:  0 8px 24px -12px rgba(28,38,37,.25);

  --maxw: 1160px;
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
}

/* ===== TEMA ESCURO ===== */
[data-theme="dark"]{
  --ink:        #0f1716;
  --mint-50:    rgba(50,200,130,.16);
  --chip-text:  #8ff3c4;
  --paper:      #16201e;
  --paper-2:    #111a18;
  --text:       #e4efeb;
  --text-soft:  #9fb3ad;
  --heading:    #f1f7f4;
  --line:       rgba(255,255,255,.10);
  --header-bg:  rgba(18,27,25,.85);
  --input-bg:   #1c2826;
  --nav-link:   #c4d4cf;
  --shadow:     0 18px 50px -20px rgba(0,0,0,.6);
  --shadow-sm:  0 8px 24px -12px rgba(0,0,0,.55);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  color:var(--text);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
h1,h2,h3,h4{ font-family:var(--font-display); line-height:1.05; letter-spacing:-.02em; color:var(--heading); }

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--font-body); font-weight:600; font-size:.95rem;
  padding:.72em 1.3em; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s;
  white-space:nowrap;
}
.btn-lg{ padding:.92em 1.7em; font-size:1.02rem; }
.btn-block{ width:100%; }
.btn-solid{ background:var(--green); color:#08221a; box-shadow:0 10px 24px -10px rgba(50,200,130,.7); }
.btn-solid:hover{ background:var(--green-bright); transform:translateY(-2px); }
.btn-ghost{ color:var(--heading); }
.btn-ghost:hover{ color:var(--green); }
.btn-line{ border-color:rgba(255,255,255,.4); color:#fff; }
.btn-line:hover{ border-color:var(--mint); color:var(--mint); transform:translateY(-2px); }
.section .btn-line, .cert-card .btn-line{ border-color:var(--green); color:var(--green-950); }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--header-bg);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
}
.header-inner{ display:flex; align-items:center; gap:24px; height:74px; }
.brand-logo{ height:38px; width:auto; }
.nav{ display:flex; gap:30px; margin-left:14px; }
.nav a{ font-weight:600; font-size:.95rem; color:var(--nav-link); position:relative; padding:4px 0; }
.nav a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--green); transition:width .22s ease; }
.nav a:hover{ color:var(--heading); }
.nav a:hover::after{ width:100%; }
.header-actions{ display:flex; gap:12px; align-items:center; }
.nav-toggle{ display:none; background:none; border:0; flex-direction:column; gap:5px; cursor:pointer; padding:8px; }
.nav-toggle span{ width:24px; height:2px; background:var(--heading); border-radius:2px; transition:.25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{ position:relative; background:
    radial-gradient(120% 120% at 85% -10%, rgba(80,240,160,.18), transparent 55%),
    linear-gradient(160deg, #233130 0%, var(--green-950) 60%, #1a2423 100%);
  color:#eaf4f1; overflow:hidden; }
.hero-glow{ position:absolute; inset:0;
  background:radial-gradient(40% 50% at 78% 30%, rgba(160,250,210,.16), transparent 70%);
  pointer-events:none; }
.hero-inner{ display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center;
  padding:96px 24px 104px; position:relative; }
.eyebrow{ display:inline-block; font-size:.82rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mint); padding:7px 14px; border:1px solid rgba(160,250,210,.32); border-radius:999px; }
.hero h1{ color:#fff; font-size:clamp(2.5rem, 5.4vw, 4.2rem); font-weight:700; margin:22px 0 0; }
.grad{ background:linear-gradient(100deg, var(--green-bright), var(--mint)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lead{ font-size:clamp(1.05rem,1.5vw,1.22rem); color:#c8d8d4; margin:22px 0 0; max-width:42ch; }
.hero-cta{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
.hero-note{ margin-top:18px; font-size:.9rem; color:#9fb3ae; }

.hero-art{ position:relative; height:420px; }
.hero-ring{ position:absolute; right:-30px; top:50%; transform:translateY(-50%); width:360px; height:360px;
  border-radius:50%; border:1px dashed rgba(160,250,210,.3);
  box-shadow:inset 0 0 80px rgba(80,240,160,.12); }
.card-float{ position:absolute; background:rgba(255,255,255,.06); border:1px solid rgba(160,250,210,.22);
  border-radius:var(--radius); padding:20px 22px; backdrop-filter:blur(8px); box-shadow:var(--shadow); }
.card-cert{ top:40px; left:0; width:270px; }
.cf-top{ display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--mint); font-weight:600; }
.cf-dot{ width:8px; height:8px; border-radius:50%; background:var(--green-bright); box-shadow:0 0 10px var(--green-bright); }
.cf-title{ font-family:var(--font-display); font-size:1.25rem; color:#fff; margin:12px 0 6px; }
.cf-meta{ font-size:.85rem; color:#b6c8c4; }
.cf-seal{ margin-top:16px; display:inline-flex; align-items:center; gap:8px;
  font-size:.82rem; font-weight:600; color:var(--mint);
  background:rgba(50,200,130,.14); border:1px solid rgba(160,250,210,.25);
  padding:7px 12px; border-radius:999px; }
.cf-check{ display:inline-grid; place-items:center; width:18px; height:18px;
  border-radius:50%; background:var(--green-bright); color:#08221a; font-size:.7rem; font-weight:800; }
.card-stat{ bottom:30px; right:0; width:230px; text-align:left; }
.card-stat p{ font-size:.92rem; color:#c8d8d4; margin-top:10px; line-height:1.45; }

/* ---------- Números ---------- */
.stats{ background:var(--green-950); color:#fff; }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:40px 24px;
  border-top:1px solid rgba(255,255,255,.07); }
.stat{ text-align:center; }
.stat-num{ font-family:var(--font-display); font-size:clamp(2rem,3.6vw,2.8rem); font-weight:700; color:var(--green-bright); display:block; }
.stat p{ color:#aebfbb; font-size:.92rem; margin-top:4px; }

/* ---------- Seções genéricas ---------- */
.section{ padding:96px 0; }
.section-alt{ background:var(--paper-2); }
.section-head{ max-width:620px; margin:0 auto 56px; text-align:center; }
.kicker{ font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--green); }
.section-head h2{ font-size:clamp(2rem,3.6vw,2.9rem); margin:12px 0 14px; }
.section-head p{ color:var(--text-soft); font-size:1.08rem; }

/* ---------- Funcionalidades ---------- */
.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.feature{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 28px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s; }
.feature:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:rgba(50,200,130,.4); }
.feat-ico{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  font-family:var(--font-display); font-size:1.3rem; color:#08221a;
  background:linear-gradient(135deg, var(--green-bright), var(--mint)); margin-bottom:18px; }
.feature h3{ font-size:1.22rem; margin-bottom:8px; }
.feature p{ color:var(--text-soft); font-size:.98rem; }

/* ---------- Catálogo de cursos ---------- */
.courses-bar{ display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:30px; flex-wrap:wrap; }
.search-wrap{ position:relative; flex:1; max-width:420px; }
.search-ico{ position:absolute; left:16px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--text-soft); }
#courseSearch{ width:100%; padding:13px 16px 13px 44px; border:1px solid var(--line); border-radius:999px;
  font-family:var(--font-body); font-size:.98rem; background:var(--input-bg); color:var(--text); transition:border-color .2s, box-shadow .2s; }
#courseSearch:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 4px rgba(50,200,130,.15); }
.courses-count{ color:var(--text-soft); font-size:.92rem; font-weight:600; }

.courses-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.courses-loading, .courses-empty{ grid-column:1/-1; text-align:center; color:var(--text-soft); padding:40px 0; }

.course-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease; }
.course-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.cc-cover{ aspect-ratio:16/9; background:linear-gradient(135deg, var(--green-950), var(--green-800)); position:relative; overflow:hidden; }
.cc-cover img{ width:100%; height:100%; object-fit:cover; }
.cc-cover .cc-fallback{ position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--font-display); font-size:2.4rem; color:rgba(160,250,210,.5); }
.cc-badge{ position:absolute; top:12px; left:12px; background:rgba(8,34,26,.7); color:var(--mint);
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:5px 10px; border-radius:999px; }
.cc-body{ padding:20px 22px 24px; display:flex; flex-direction:column; flex:1; }
.cc-name{ font-family:var(--font-display); font-size:1.16rem; line-height:1.15; color:var(--heading); margin-bottom:8px; }
.cc-desc{ color:var(--text-soft); font-size:.92rem; margin-bottom:16px; flex:1;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.cc-meta{ display:flex; gap:14px; flex-wrap:wrap; font-size:.84rem; color:var(--text-soft); font-weight:600; padding-top:14px; border-top:1px solid var(--line); }
.cc-meta span{ display:inline-flex; align-items:center; gap:5px; }

/* ---------- CTA ---------- */
.cta{ background:
    radial-gradient(80% 120% at 50% 0%, rgba(80,240,160,.2), transparent 60%),
    linear-gradient(160deg, var(--green-950), #1a2423); color:#fff; padding:90px 0; text-align:center; }
.cta h2{ color:#fff; font-size:clamp(2.1rem,4vw,3rem); }
.cta p{ color:#c8d8d4; max-width:50ch; margin:16px auto 30px; font-size:1.08rem; }
.cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---------- Rodapé ---------- */
.site-footer{ background:var(--ink); color:#b9c9c5; }
.footer-inner{ display:grid; grid-template-columns:2fr 1fr 1fr 1.3fr; gap:36px; padding:64px 24px 40px; }
.footer-logo{ height:34px; margin-bottom:16px; filter:none; }
.footer-brand p{ font-size:.92rem; max-width:34ch; color:#8ea29d; }
.footer-col h4{ font-family:var(--font-body); font-size:.82rem; text-transform:uppercase; letter-spacing:.1em; color:var(--mint); margin-bottom:16px; }
.footer-col a{ display:block; font-size:.94rem; margin-bottom:10px; color:#b9c9c5; transition:color .18s; }
.footer-col a:hover{ color:#fff; }
.footer-base{ border-top:1px solid rgba(255,255,255,.08); padding:22px 24px; font-size:.86rem; color:#7d908c; }

/* ---------- Animação reveal ----------
   Só esconde se o JS estiver ativo (classe .js no <html>); assim,
   sem JavaScript, todo o conteúdo continua visível. */
.reveal{ transition:opacity .7s ease, transform .7s ease; }
.js .reveal{ opacity:0; transform:translateY(24px); }
.js .reveal.in{ opacity:1; transform:none; }

/* ---------- Responsivo ---------- */
@media (max-width:980px){
  .hero-inner{ grid-template-columns:1fr; padding:72px 24px 84px; }
  .hero-art{ display:none; }
  .feature-grid, .courses-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .nav, .header-actions{ display:none; }
  .nav-toggle{ display:flex; }
  .site-header.open .nav{ display:flex; position:absolute; top:74px; left:0; right:0; flex-direction:column;
    background:var(--paper); padding:18px 24px; gap:6px; border-bottom:1px solid var(--line); box-shadow:var(--shadow-sm); }
  .site-header.open .nav a{ padding:10px 0; }
  .site-header.open .header-actions{ display:flex; position:absolute; top:auto; margin-top:0; }
  .stats-grid{ grid-template-columns:repeat(2,1fr); gap:28px 16px; }
  .feature-grid, .courses-grid{ grid-template-columns:1fr; }
  .footer-inner{ grid-template-columns:1fr 1fr; gap:28px; }
  .section{ padding:72px 0; }
}
@media (max-width:460px){
  .footer-inner{ grid-template-columns:1fr; }
  .hero-cta .btn, .cta-actions .btn{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* =========================================================
   NOVAS SEÇÕES (white-label, criadores) e MODAL de curso
   ========================================================= */

/* Card de curso clicável */
.course-card{ cursor:pointer; }
.course-card .cc-more{ margin-top:14px; font-size:.85rem; font-weight:700; color:var(--green); }
.course-card:hover .cc-more{ color:var(--heading); }

/* ---------- White label ---------- */
.wl-section{ background:var(--paper); }
.wl-layout{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.wl-copy .kicker{ display:block; }
.wl-copy h2{ font-size:clamp(2rem,3.4vw,2.8rem); margin:12px 0 16px; }
.wl-copy p{ color:var(--text-soft); font-size:1.06rem; margin-bottom:14px; }
.wl-points{ list-style:none; display:flex; flex-direction:column; gap:12px; margin:22px 0 28px; }
.wl-points li{ position:relative; padding-left:30px; color:var(--text); }
.wl-points li::before{ content:"✓"; position:absolute; left:0; top:2px; width:20px; height:20px; border-radius:50%;
  background:var(--green); color:#08221a; font-size:.72rem; font-weight:800; display:grid; place-items:center; }

.wl-art{ display:flex; justify-content:center; }
.wl-browser{ width:100%; max-width:420px; border-radius:16px; overflow:hidden; box-shadow:var(--shadow);
  border:1px solid var(--line); background:var(--paper); }
.wl-bar{ display:flex; gap:7px; padding:13px 16px; background:var(--green-950); }
.wl-bar span{ width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,.35); }
.wl-screen{ padding:26px 24px 30px; background:linear-gradient(180deg, var(--mint-50), var(--paper)); }
.wl-logo{ font-family:var(--font-display); font-weight:800; letter-spacing:.04em; color:var(--green-950);
  background:linear-gradient(135deg, var(--green-bright), var(--mint)); display:inline-block;
  padding:8px 16px; border-radius:10px; margin-bottom:20px; }
.wl-line{ height:12px; border-radius:7px; background:rgba(42,55,54,.10); margin-bottom:12px; }
.wl-line.w90{ width:90%; } .wl-line.w70{ width:70%; } .wl-line.w50{ width:50%; }
.wl-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:18px 0; }
.wl-cards i{ height:64px; border-radius:10px; background:linear-gradient(135deg, var(--green), var(--green-bright)); opacity:.85; }

/* ---------- Criadores ---------- */
.creator-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.creator-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:30px 28px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s; }
.creator-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:rgba(50,200,130,.4); }
.creator-card h3{ font-size:1.18rem; margin-bottom:8px; }
.creator-card p{ color:var(--text-soft); font-size:.97rem; }
.creator-cta{ text-align:center; margin-top:40px; }
.creator-cta p{ color:var(--text-soft); margin-bottom:18px; font-size:1.04rem; }

/* ---------- Modal de curso ---------- */
.modal{ position:fixed; inset:0; z-index:100; display:none; }
.modal.open{ display:block; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(20,28,27,.62); backdrop-filter:blur(2px); }
.modal-box{ position:relative; max-width:680px; margin:6vh auto; background:var(--paper); border-radius:var(--radius);
  box-shadow:var(--shadow); max-height:88vh; overflow:auto; animation:modalIn .25s ease; }
@keyframes modalIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
.modal-close{ position:absolute; top:14px; right:16px; z-index:2; width:38px; height:38px; border:0; border-radius:50%;
  background:rgba(255,255,255,.9); color:var(--green-950); font-size:1.6rem; line-height:1; cursor:pointer; box-shadow:var(--shadow-sm); }
.modal-close:hover{ background:var(--mint); }

.mc-cover{ height:180px; background:linear-gradient(135deg, var(--green-950), var(--green-800)); position:relative; }
.mc-cover img{ width:100%; height:100%; object-fit:cover; }
.mc-cover .cc-fallback{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--font-display); font-size:3rem; color:rgba(160,250,210,.5); }
.mc-body{ padding:26px 30px 32px; }
.mc-body h3{ font-size:1.6rem; margin-bottom:8px; }
.mc-desc{ color:var(--text-soft); margin-bottom:16px; }
.mc-meta{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px; }
.mc-meta span{ font-size:.82rem; font-weight:600; color:var(--chip-text); background:var(--mint-50); padding:6px 12px; border-radius:999px; }
.mc-modules{ display:flex; flex-direction:column; gap:12px; }
.mc-module{ border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; }
.mc-mod-head{ background:var(--paper-2); padding:13px 16px; font-family:var(--font-display); font-weight:700; color:var(--heading); display:flex; justify-content:space-between; gap:10px; }
.mc-mod-head small{ font-family:var(--font-body); font-weight:600; color:var(--text-soft); }
.mc-class{ display:flex; align-items:center; gap:10px; padding:11px 16px; border-top:1px solid var(--line); font-size:.95rem; }
.mc-class .ico{ width:22px; height:22px; border-radius:6px; background:var(--mint-50); color:var(--green); display:grid; place-items:center; font-size:.7rem; font-weight:800; flex-shrink:0; }
.mc-class .tag{ margin-left:auto; font-size:.74rem; color:var(--text-soft); }
.mc-loading, .mc-empty{ padding:30px; text-align:center; color:var(--text-soft); }

/* ---------- Responsivo (novas seções) ---------- */
@media (max-width:980px){
  .wl-layout{ grid-template-columns:1fr; gap:36px; }
  .creator-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .creator-grid{ grid-template-columns:1fr; }
  .modal-box{ margin:0; min-height:100vh; border-radius:0; max-height:100vh; }
}

/* =========================================================
   BOTÃO DE TEMA (claro/escuro) e troca de logo
   ========================================================= */
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; flex-shrink:0; margin-left:auto;
  border:1.5px solid var(--line); border-radius:50%;
  background:transparent; color:var(--heading); cursor:pointer;
  transition:border-color .2s, color .2s, transform .2s;
}
.theme-toggle:hover{ border-color:var(--green); color:var(--green); transform:translateY(-1px); }
.theme-toggle svg{ width:20px; height:20px; }
.theme-toggle .icon-sun{ display:none; }
[data-theme="dark"] .theme-toggle .icon-moon{ display:none; }
[data-theme="dark"] .theme-toggle .icon-sun{ display:inline; }

/* Logo do cabeçalho: escura no tema claro, branca no tema escuro */
.brand-on-dark{ display:none; }
[data-theme="dark"] .brand-on-light{ display:none; }
[data-theme="dark"] .brand-on-dark{ display:block; }

/* No mobile, o botão de tema fica do lado do menu hambúrguer */
@media (max-width:760px){
  .nav-toggle{ margin-left:12px; }
}