/* ========= Base / Tokens ========= */
:root{
  --bg:#fff; --panel:#111827; --card:#0b1220; --muted:#a5b0bf; --text:#e6e7eb;
  --brand:#46a2da; --brand-2:#6fc09e; --border:#1f2937; --shadow:0 8px 30px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Inter,Arial;background:var(--bg);color:var(--text);line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 20px}

/* ========= Themes (visual breaks) ========= */
.theme-dark,[data-theme="dark"]{background:#0f172a;color:var(--text)}
.theme-light,[data-theme="light"]{background:#f7fafc;color:#0f172a}
.theme-light h1,.theme-light h2,.theme-light h3{color:#0f172a}
.theme-light .lead{color:#4b5563}
.theme-light .card,.theme-light details{background:#fff;border-color:#e5e7eb}
.theme-light .feature{background:#fff;border-color:#e5e7eb}

/* ========= Header ========= */
/* ========= Header ========= */
.site-header{
  position: sticky; top: 0; z-index: 30;
  /* agora pegamos valores de variáveis, com fallback para o estilo antigo */
  backdrop-filter: var(--header-blur, saturate(150%) blur(8px));
  background:       var(--header-bg,   rgba(15,23,42,.7));
  border-bottom: 1px solid var(--header-border, var(--border));
  color: var(--header-fg, var(--text));
}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;gap:.8rem;align-items:center;font-weight:800}
.brand img{height:38px}
.nav-actions a{margin-left:.6rem}


/* ========= Buttons ========= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.9rem 1.1rem;border-radius:12px;border:1px solid var(--border);background:#0b1323;font-weight:700;transition:transform .2s ease,filter .2s ease}
.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.btn.primary{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#04131b;border-color:transparent}
.btn.btn-header{
        padding: 0.5rem 1rem !important;
}
.btn.ghost{background:#0b1323;color:var(--text)}
.btn.whiteghost{background:#ffffff;color:#0f172a;border-color:#e5e7eb;margin-right:.6rem;}
.btn.block{width:100%}
.badge{display:inline-block;padding:.25rem .6rem;border-radius:999px;font-size:.78rem;font-weight:700;background:rgba(70,162,218,.15);color:#cfe9f8;border:1px solid rgba(70,162,218,.35)}

/* ========= Sections ========= */
.section{padding:54px 0}
h1{font-size:clamp(28px,4.4vw,48px);line-height:1.1;margin:10px 0}
h2{font-size:clamp(22px,3.2vw,34px);margin:0 0 8px}
.lead{color:var(--muted);margin:0 0 18px}

/* ========= Hero ========= */
.hero{position:relative;overflow:hidden}
.hero--text-only{
  background-image:none !important;
}
.hero-inner{display:grid;gap:28px;grid-template-columns:1.2fr .9fr;align-items:center}
.hero-inner_2{display:grid;gap:28px;grid-template-columns:1fr;align-items:center}
.hero-inner--course{grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr)}
.hero-inner--solo{grid-template-columns:minmax(0,1fr)}
.hero-copy--solo{max-width:860px}
.hero-list{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr));padding:0;margin:10px 0 0}
.hero-list li{list-style:none;background:var(--card);border:1px solid var(--border);padding:10px 12px;border-radius:10px;color:#cfd6df}
.video{aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow);background:#000}
.hero-course-visual{
  position:relative;
  max-width:560px;
  margin-left:auto;
}
.hero-course-visual::before{
  content:"";
  position:absolute;
  inset:auto -18px -18px auto;
  width:180px;
  height:180px;
  border-radius:28px;
  background:linear-gradient(135deg, rgba(70,162,218,.28), rgba(111,192,158,.32));
  filter:blur(8px);
  opacity:.9;
  z-index:0;
}
.hero-course-photo{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  aspect-ratio:5/4;
  object-fit:cover;
  border-radius:24px;
  border:1px solid rgba(207,214,223,.22);
  box-shadow:0 24px 54px rgba(8,15,32,.35);
}
.gradients{position:absolute;inset:-30% -10% auto -10%;height:80%;pointer-events:none;background:
  radial-gradient(800px 400px at 15% -20%, rgba(70,162,218,.35), transparent),
  radial-gradient(900px 360px at 95% -10%, rgba(111,192,158,.22), transparent);
}

/* ========= Cards / Features ========= */
.cards{display:grid;gap:16px;grid-template-columns:repeat(12,1fr)}
.card{grid-column:span 12;background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:18px}
.card h3{margin:0 0 6px}
.card p{margin:0;color:#cfd6df}
@media(min-width:780px){.card{grid-column:span 6}}
.features{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:8px}
.feature{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px}

/* ========= Oferta ========= */
.offer{display:grid;gap:18px;grid-template-columns:1fr 1fr}
.offer_2{display:grid;gap:18px;grid-template-columns:1fr}
.pricebox{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:18px}
.price{font-size:32px;font-weight:900}
.note{color:#cfe9f8}
.stack{padding-left:16px}
@media(min-width:780px){.offer{grid-template-columns:2fr 1fr}}

/* ========= Prova social ========= */
.testimonials{display:grid;gap:16px;grid-template-columns:repeat(12,1fr)}
.testimonial{grid-column:span 12;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;display:grid;grid-template-columns:56px 1fr;gap:12px}
.avatar{width:56px;height:56px;border-radius:999px;background:#223}
.stars{color:#ffd86b}
@media(min-width:860px){.testimonial{grid-column:span 6}}

/* ========= FAQ ========= */
.faq details{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:12px}
.faq details+details{margin-top:10px}
.faq summary{cursor:pointer;font-weight:700}

/* ========= Footer ========= */
.site-footer{border-top:1px solid var(--border);padding:24px 0;color:var(--muted)}


/* ========= Reveal baseline (for GSAP) ========= */
.reveal-up{opacity:0;transform:translateY(24px)}
.reveal-card{opacity:0;transform:translateY(24px)}
.reveal-stagger > *{opacity:0;transform:translateY(18px)}
.parallax-wrap{transform:translateY(0)}
/* Fix hero title contrast */
.hero-title{color:#ffffff}

/* Cards icons */
.card{position:relative;padding-left:64px}
.card .icon{position:absolute;left:18px;top:18px;width:32px;height:32px;opacity:.9}
.card .icon svg{width:32px;height:32px;fill:var(--brand)}

/* Two columns grid for professor section */
.grid.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.prof-photo img{width:100%;max-width:520px;border-radius:16px;border:1px solid var(--border);box-shadow:var(--shadow)}
.teacher-section .container{
  max-width:980px;
}
.teacher-layout{
  display:grid;
  grid-template-columns:300px minmax(0, 560px);
  gap:32px;
  align-items:center;
  justify-content:center;
}
.teacher-photo img{
  width:300px;
  max-width:300px;
  height:300px;
  max-height:300px;
  object-fit:cover;
  display:block;
}
.teacher-copy{
  max-width:560px;
}
.teacher-copy h2{
  max-width:24ch;
  line-height:1.12;
  text-wrap:balance;
}
.teacher-copy .lead:last-child{
  margin-bottom:0;
}
@media(max-width:900px){.grid.two-cols{grid-template-columns:1fr}}
@media(max-width:900px){
  .teacher-layout{
    grid-template-columns:1fr;
    gap:22px;
  }
  .teacher-photo{
    margin:0 auto;
  }
  .teacher-copy{
    max-width:100%;
  }
  .teacher-copy h2{
    max-width:none;
  }
}

/* Light theme contrast fixes */
.theme-light .pricebox{background:#ffffff;color:#0f172a;border-color:#e5e7eb}
.theme-light .pricebox .note{color:#374151}
.theme-light .price{color:#0f172a}
.theme-light .faq details{color:#0f172a}
.theme-light .faq summary{color:#0f172a}
.theme-light .faq p{color:#374151}

/* ===== Scroll progress bar ===== */
.scroll-progress{position:fixed;top:0;left:0;width:100%;height:4px;background:transparent;z-index:60}
.scroll-progress__bar{width:0;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-2));box-shadow:var(--shadow)}

/* ===== Sticky top bar ===== */
.sticky-top{position:fixed;top:-80px;left:0;width:100%;background:rgba(15,23,42,.92);backdrop-filter:saturate(150%) blur(8px);border-bottom:1px solid var(--border);z-index:55;transition:transform .35s ease, top .35s ease}
.sticky-top.show{top:0}

.sticky-top .btn{padding:.6rem .9rem;border-radius:10px}

/* ===== Dynamic headline ===== */
#dyn-headline{display:inline-block;position:relative}
.type-caret{display:inline-block;width:2px;height:1em;background:#fff;margin-left:4px;vertical-align:baseline;animation:blink 1s steps(1,end) infinite}
@keyframes blink{50%{opacity:0}}

/* ===== Section separator (wave) ===== */
.section-sep{display:block;width:100%;height:auto;fill:rgba(70,162,218,.18)}

/* ===== Microinteractions ===== */
.btn{transition:transform .2s ease, filter .2s ease, box-shadow .2s ease}
.btn.primary:hover{box-shadow:0 8px 20px rgba(70,162,218,.35)}
.card:hover{transform:translateY(-2px)}

/* tilt effect baseline */
.card{transition:transform .15s ease}
.card:active{transform:translateY(0)}

/* Light theme link colors */
.theme-light a{color:#0f172a}
.theme-light a.wa{color:#1d4ed8}
.muted-small{color:#a5b0bf;font-size:.92rem}

/* FAQ color fixes for both themes */
.faq summary{color:inherit}
.faq p{color:inherit}
.theme-dark .faq details{background:#111827;color:#e6e7eb;border-color:#1f2937}
.theme-light .faq details{background:#ffffff;color:#0f172a;border-color:#e5e7eb}
.theme-light .faq p{color:#374151}

/* Typewriter container (height-stable) */
#tw-wrap{display:inline-block; position:relative}
/* Reserve height by measuring via JS and setting --tw-h; fallback to line-height * 2 */
.hero-title{display:block}
/* --- Typewriter: altura fixa + respiro --- */
.hero-title #tw-wrap{
  display:inline-flex;
  position:relative;
  align-items:flex-start;
  height: var(--tw-h, calc(1.1em * 13.5)); /* reserva fixa (fallback ≈ 2.6 linhas) */
  min-height: 0;            /* override do min-height antigo */
  padding-top: 8px;         /* respiro acima do texto digitado */
  overflow: hidden;         /* evita “sangrar” durante digitação */
}
#tw-cursor{ height: 1em; }

#tw-cursor{display:inline-block; width:1px; height:1.1em; background:#cfe9f8; margin-left:2px; vertical-align:baseline; animation:blink 1s steps(2,start) infinite}
@keyframes blink{50%{opacity:0}}

/* Scroll progress bar */
#scroll-progress{position:fixed; top:0; left:0; right:0; height:4px; background:transparent; z-index:60}
#scroll-progress > span{display:block; height:100%; width:0%; background:linear-gradient(90deg, var(--brand), var(--brand-2)); box-shadow:0 0 0 0 rgba(0,0,0,0)}

/* ===== Scroll progress bar ===== */
#progress-bar{position:fixed;left:0;top:0;width:100%;height:4px;background:transparent;z-index:60}
#progress-bar .bar{width:0%;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-2))}

/* ===== Typewriter (no layout shift) ===== */
.hero-title{position:relative}
#typewriter{display:inline-block; vertical-align:top; border-right:2px solid rgba(255,255,255,.7); padding-right:2px; white-space:normal}
/* Fallback min-height to avoid shift if JS off (approx 2 lines) */
/* Cancela fallback antigo no H1 — a reserva agora fica no #tw-wrap */
.hero-title{ min-height: 0 !important; }

/* Reduced gap between hero title and subtitle */
.hero-title{margin-bottom:0.4em}
.hero p{margin-top:0.4em}

/* General text contrast adjustments */
body{color:var(--text)}
.theme-dark body, .theme-dark{color:#e5e7eb}
.theme-light body, .theme-light{color:#0f172a}
/* Novo: headings seguem o tema da própria seção */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3 { color: var(--text); }

[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3 { color: #0f172a; }

/* Tighten hero title/subtitle spacing */
.hero-title{margin:0 0 8px !important}
.hero .lead{margin-top:4px !important; margin-bottom:14px !important}

/* Global color safety */
[data-theme="dark"] { color: var(--text); }
[data-theme="light"] { color: #0f172a; }
[data-theme="light"] .lead { color: #4b5563; }
[data-theme="light"] a { color: #0f172a; }
[data-theme="dark"] .lead { color: var(--muted); }

/* Ensure testimonial text readable on dark */
[data-theme="dark"] .testimonial p { color: #d6dde7; }
[data-theme="light"] .testimonial p { color: #a5b0bf; }

/* Ensure cards text readable in both themes */
[data-theme="light"] .card p { color: #374151; }
[data-theme="dark"] .card p { color: #cfd6df; }


/* Fallback: ensure a theme is always visible */
body:not(.theme-light):not(.theme-dark){ background: var(--bg); color: var(--text); }

/* Timeline visuals */
.timeline{position:relative}
.timeline:before{content:""; position:absolute; left:34px; top:0; bottom:0; width:2px; background:linear-gradient(180deg, rgba(70,162,218,.5), rgba(111,192,158,.4));}
.timeline .card{padding-left:72px}
.timeline .card .icon{left:24px; top:18px; width:38px; height:38px}
.timeline .card .icon svg{width:38px; height:38px}
.program-cta{margin-top:28px}

.card{transition:transform .25s ease, box-shadow .25s ease}
.card:hover{transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,.25)}
.card .icon svg{transition:transform .25s ease, filter .25s ease}
.card:hover .icon svg{transform:scale(1.05); filter:drop-shadow(0 2px 6px rgba(70,162,218,.35))}

#scene-overlay{position:fixed; inset:0; pointer-events:none; opacity:0; background:radial-gradient(1200px 600px at 50% 10%, rgba(70,162,218,.14), transparent 60%), radial-gradient(900px 480px at 70% 0%, rgba(111,192,158,.12), transparent 60%); z-index:20; transition:opacity .5s ease}

.faq details.opened summary::after{content:" ✓"; color:var(--brand); font-weight:800}

.benefits .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:10px}
.benefits .kpi{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px;text-align:center}
.benefits .kpi strong{font-size:34px;display:block}
.benefits .kpi span{color:#cfd6df}
@media(max-width:900px){.benefits .kpis{grid-template-columns:1fr;}}

.story .milestones{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:10px;position:relative}
.story .ms{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:14px}
.story .ms .year{font-weight:800;color:#0f172a}
.story .ms p{color:#374151;margin:.4rem 0 0}
@media(max-width:900px){.story .milestones{grid-template-columns:1fr}}


/* --- Mobile fixes (hero) --- */
@media (max-width: 900px) {
  .hero-inner { 
    grid-template-columns: 1fr; 
    gap: 20px;
  }
  .hero-inner--course{
    grid-template-columns:1fr;
  }
  .hero-course-visual{
    margin:8px auto 0;
    width:100%;
    max-width:100%;
  }
}

/* Deixa a lista da hero em 1 coluna em telas pequenas */
@media (max-width: 560px) {
  .hero-list { grid-template-columns: 1fr; }
}

/* Torna o iframe realmente responsivo dentro do .video */
.video iframe {
  width: 100%;
  height: 100%;
  display: block;
}

/* --- Mobile fixes (bloco de investimento) --- */
@media (max-width: 780px) {
  .offer { grid-template-columns: 1fr; }
  .pricebox + .pricebox { margin-top: 12px; }
}

/* Header: evita aperto extremo em telas muito pequenas */
@media (max-width: 420px) {
  .nav-actions .ghost { display: none; } /* some 'Programa' e 'Avaliações' para caber o CTA */
  .nav { height: 62px; }
  .brand img { height: 32px; }
}

.hero-title{ margin: 0 0 14px !important; }
.hero .lead{  margin-top: 8px !important; }


/* --- Hero background video (camadas e transição) --- */
.hero { 
  position: relative;
  /* fallback sólido + (opcional) imagem estática */
  background: #0d1226 url("/assets/hero-fallback.jpg") center / cover no-repeat;
}

/* camada do vídeo, atrás de tudo */
.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

/* vídeo cobrindo 100% */
.hero-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;                   /* começa invisível */
  transition: opacity .6s ease; /* fade-in quando carregar */
  pointer-events: none;         /* vídeo não captura cliques */
}

/* overlay para legibilidade do texto */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* ajuste o gradiente conforme sua identidade */
  background: linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.65));
}

/* garante que o conteúdo fique acima do vídeo e overlay */
.hero > *:not(.hero-bg) { position: relative; z-index: 2; }

/* quando o vídeo estiver pronto, faz o fade-in */
.hero.is-playing .hero-bg-video { opacity: 1; }

/* --- Hero CTA: evita quebras feias e cria rótulo curto no mobile --- */
.hero-cta{
  display: inline-flex;                 /* garante flexbox no botão */
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;                  /* não deixa quebrar “no meio” */
  max-width: 100%;
}

.hero-cta .cta-sm{ display: none; }     /* desktop: mostra label longo */
.hero-cta .cta-lg{ display: inline; }

@media (max-width: 480px){
  .hero-cta{
    width: 100%;                        /* botão cheio para caber melhor */
    white-space: normal;                /* permite 1 linha, mas como o label é curto, não vai estourar */
    font-size: 15px;                    /* ligeiro ajuste */
    padding: 10px 14px;
    gap: 6px;
  }
  .hero-cta .cta-lg{ display: none; }   /* mobile: esconde label longo */
  .hero-cta .cta-sm{ display: inline; } /* mobile: mostra label curto */
}



/* ===== Seção: Sugestões de cursos ===== */
.ideas { padding-top: 40px; padding-bottom: 40px; }
.ideas .lead { margin-top: 6px; margin-bottom: 16px; }

.ideas-form { margin-top: 10px; }
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 720px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .field-full { grid-column: 1 / -1; }
}

.field { display: flex; flex-direction: column; gap: 6px; }
.field span { font-weight: 600; }
.field input,
.field textarea {
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: #000;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--muted); }
.field input:focus,
.field textarea:focus { outline: 2px solid var(--primary); outline-offset: 2px; }



/* garante que nada do form fique centralizado por herança */
.ideas-form { text-align: left; }

/* checkbox + texto lado a lado, colados e à esquerda */
.chk{
  display: flex;              /* ou inline-flex */
  align-items: center;
  justify-content: flex-start;
  gap: 4px;                   /* 0 se quiser totalmente colado */
  width: 100%;                /* ocupa a linha e ancora à esquerda */
  margin: 8px 0;
}
.chk input{ margin:0; transform:none; }

.field .chk { display:flex; align-items:center; gap:10px; line-height:1.4; }
.field .chk input[type="checkbox"] { width:18px; height:18px; margin:0; accent-color:#1377bb; }
.field .error { display:block; margin-top:6px; color:#f87171; font-size:12px; }



.actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.form-feedback { font-size: 14px; color: var(--muted); }

.error { min-height: 16px; color: #ffb3b3; } /* mensagens de erro de validação */



/* ====== Home: catálogo de cursos ====== */
.catalog .card { display:flex; flex-direction:column; gap:10px; }
.catalog .thumb { border-radius:12px; overflow:hidden; border:1px solid var(--border); background:#000; aspect-ratio:16/9; }
.catalog .thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.catalog .thumb.placeholder { display:flex; align-items:center; justify-content:center; color:#cfe9f8; background:linear-gradient(135deg, rgba(70,162,218,.15), rgba(111,192,158,.15)); font-weight:800; border:1px dashed rgba(255,255,255,.25); }
.catalog h3 { margin:6px 0 4px; }
.catalog .catalog-list { margin:6px 0 0; padding-left:18px; color:#cfd6df; }
.catalog .catalog-list li { margin:.2rem 0; }

/* Em telas largas, 3 cards ficam bons com o grid existente (12 col). */
@media (min-width: 860px){
  .catalog .card { grid-column: span 4; } /* 3 colunas (4+4+4 = 12) */
}

/* =========================
   CONTEXTO: HOME vs COURSE
   ========================= */

/* HOME (data-page="home"): header claro institucional */
body[data-page="home"] .site-header{
  background:#ffffff;           /* fundo claro */
  border-bottom:1px solid #e5e7eb;
  backdrop-filter: var(--header-blur, saturate(150%) blur(8px))!important;
  color:#0f172a;
}

/* botões no header claro */
body[data-page="home"] .site-header .btn.ghost{
  background:#ffffff;
  color:#0f172a;
  border-color:#e5e7eb;
}
body[data-page="home"] .site-header .btn.ghost:hover{
  transform:translateY(-1px);
  filter:none;
  background:#f8fafc;
}

/* (opcional) sombra discreta ao rolar */
body[data-page="home"] .site-header.is-scrolled{
  box-shadow:0 6px 20px rgba(0,0,0,.06);
}

/* COURSE (data-page="course"): mantém estilo translúcido padrão .site-header
   definido anteriormente no arquivo (nada a fazer aqui) */




/* =========================
   CONTEXTO: HOME vs COURSE
   ========================= */

/* HOME (data-page="home"): header claro institucional */
body[data-page="home"] .site-header{
  background: rgb(255 255 255 / 70%);          /* fundo claro */
  border-bottom:1px solid #e5e7eb;
  backdrop-filter:none;         /* sem blur em fundo sólido */
  color:#0f172a;
}

/* botões no header claro */
body[data-page="home"] .site-header .btn.ghost{
  background:#ffffff;
  color:#0f172a;
  border-color:#e5e7eb;
}
body[data-page="home"] .site-header .btn.ghost:hover{
  transform:translateY(-1px);
  filter:none;
  background:#f8fafc;
}

/* (opcional) sombra discreta ao rolar */
body[data-page="home"] .site-header.is-scrolled{
  box-shadow:0 6px 20px rgba(0,0,0,.06);
}

/* COURSE (data-page="course"): mantém estilo translúcido padrão .site-header
   definido anteriormente no arquivo (nada a fazer aqui) */


/* =========================
   UCT — Flip de cards (desktop)
   ========================= */

/* Reset do .card apenas no catálogo de cursos para evitar conflito com hover/tilt global */
.catalog .uc-card3d{
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  position: relative;
}

/* Desktop: ativa 3D */
@media (min-width: 860px){
  .catalog .uc-card3d{ perspective: 1000px; }

  /* elemento que gira */
  .catalog .uc-card3d__inner{
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 300px;
    transform-style: preserve-3d;
    transition: transform .6s cubic-bezier(.2,.6,.2,1);
    will-change: transform;
  }

  /* faces */
  .catalog .uc-card3d__face{
    position: absolute; inset: 0;
    display: flex; flex-direction: column; gap: 10px;
    padding: 18px;
    border-radius: 16px;
    overflow: hidden;

    /* evita “rasgo” durante o giro */
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    outline: 1px solid transparent;

    /* aparência de card vai nas faces (frente/verso iguais) */
    background: var(--panel);
    border: 1px solid var(--border);
  }

  /* tema claro da seção de cursos */
  [data-theme="light"] .catalog .uc-card3d__face{
    background: #fff;
    border-color: #e5e7eb;
  }

  .catalog .uc-card3d__back{ transform: rotateY(180deg) translateZ(0.1px); }

  /* aciona flip (hover e teclado) */
  .catalog .uc-card3d:hover .uc-card3d__inner,
  .catalog .uc-card3d:focus-within .uc-card3d__inner{
    transform: rotateY(180deg);
  }

  /* neutraliza “elevadinha” padrão de .card só aqui */
  .catalog .uc-card3d:hover{
    transform: none !important;
    box-shadow: none !important;
  }
}

/* Mobile: sem 3D, mantém layout tradicional */
@media (max-width: 859px){
  .catalog .uc-card3d__inner,
  .catalog .uc-card3d__face{
    position: static; transform: none;
  }
  .catalog .uc-card3d__face{
    padding: 0; border: none; background: transparent;
  }
  .catalog .uc-card3d__back{ margin-top: 8px; }
}

/* Ajustes visuais menores */
.catalog .uc-card3d .thumb{ border-radius:12px; overflow:hidden; border:1px solid var(--border); background:#000; aspect-ratio:16/9; }
[data-theme="light"] .catalog .uc-card3d .thumb{ border-color:#e5e7eb; }
.catalog .uc-card3d h3{ margin:8px 0 0; }
.catalog .uc-card3d .catalog-list{ margin:8px 0 0; padding-left:18px; }



/* === HERO: carousel full-bleed com parallax === */
.uc-hero-carousel{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.uc-hero-track{ position:absolute; inset:0; }

.uc-hero-carousel .uc-slide{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  opacity:0; transform:translate3d(0,0,0) scale(1.03);
  transition: opacity .8s ease;
  will-change: opacity, transform;
}
.uc-hero-carousel .uc-slide.is-active{ opacity:1; }

/* respeita redução de movimento */
@media (prefers-reduced-motion: reduce){
  .uc-hero-carousel .uc-slide{ transition:none; transform:none; }
}

/* O overlay não deve bloquear eventos do mouse */
.hero::before{ pointer-events: none; }

/* FAQ - fundo escuro */
.section.faq {
  background-color: #0d1117; /* fundo escuro */
  color: #f1f1f1;           /* texto claro */
  padding: 60px 0;
}

/* título da seção */
.section.faq h2,
.section.faq p.lead {
  color: #f1f1f1; /* força o contraste */
}

/* sobrescrevendo o fundo dos summaries */
.section.faq details summary {
  background-color: #1c2128;  /* caixas um pouco mais claras que o fundo */
  color: #f1f1f1;
}

/* quando aberto, mantém contraste */
.section.faq details[open] summary {
  background-color: #22272e;
  color: #ffffff;
}

/* corpo do conteúdo dentro do details */
.section.faq details .faq-content {
  background-color: #161b22; 
  color: #f1f1f1;
  padding: 15px 20px;
  border-radius: 0 0 8px 8px;
}

.dots-loading {
    position: absolute;
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
}

.dots-loading span {
    width: 8px;
    height: 8px;
    background: #242c5a;
    border-radius: 50%;
    opacity: 0.3;
    animation: dotPulse 1.3s infinite ease-in-out;
}

.btn-pea {
    width: 100%;
}

.dots-loading span:nth-child(2) { animation-delay: 0.2s; }
.dots-loading span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dotPulse {
    0%, 80%, 100% {
        transform: scale(1);
        opacity: 0.3;
    }
    40% {
        transform: scale(1.6);
        opacity: 1;
    }
}


.no-scroll {
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
}

/* Tela de carregamento */
#loader {
    position: fixed;
    inset: 0;
    background: #ffffff; /* fundo minimalista */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    transition: opacity 0.6s ease, visibility 0.6s;
}

/* Estilo do círculo */
.progress-ring__circle {
    stroke-linecap: round;
    transform-origin: center;
    transform: rotate(-90deg);
    transition: stroke-dashoffset 0.15s ease-out;
}

/* Esconder depois do carregamento */
#loader.hide {
    opacity: 0;
    visibility: hidden;
}

/*Campo de seleção no formulário ebook e formulários*/
/* === Ajustes adicionais para o formulário do eBook === */

/* Harmoniza inputs e selects com o estilo institucional */
.field input,
.field select {
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.03);
    color: var(--text);
    font-size: 1rem;
}

/* Placeholder mais suave */
.field input::placeholder {
    color: var(--muted);
    opacity: .8;
}

/* Estados de foco mais visíveis */
.field input:focus,
.field select:focus {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    background: rgba(255,255,255,.06);
}

/* Select estilizado */
.field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                      linear-gradient(135deg, var(--muted) 50%, transparent 50%),
                      linear-gradient(to right, rgba(255,255,255,.03), rgba(255,255,255,.03));
    background-position: calc(100% - 18px) calc(50% - 3px),
                         calc(100% - 12px) calc(50% - 3px),
                         0 0;
    background-size: 6px 6px,
                     6px 6px,
                     100%;
    background-repeat: no-repeat;
    cursor: pointer;
}

.field select option {
    color: #0f172a;
}

/* Checkbox mais alinhado visualmente */
.chk input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--brand);
}

/* Botão principal ocupa largura total e mantém estabilidade */
.btn-pea {
    width: 100%;
    padding: 1rem 1.2rem;
    font-size: 1.1rem;
}

/* A seção inteira ganha um leve destaque */
#download.section {
    padding-top: 60px;
    padding-bottom: 60px;
}

/* Melhor espaçamento interno entre campos */
.form-grid .field {
    margin-bottom: 6px;
}