/* ============================================================
   SRC SOLUÇÕES EDUCACIONAIS — design system
   Onyx & Champagne · Fraunces + Inter + JetBrains Mono
   Contraste auditado WCAG AA/AAA.
   ============================================================ */
:root{
  --paper:#FAF7F2; --paper-2:#F2EDE5; --paper-3:#E8E2D6;
  --ink:#0E0E10; --ink2:#2A2A2D; --ink3:#5F5F65;
  --dark:#0E0E10;
  --accent:#6B5525;        /* dourado escuro — 6.7:1 no claro */
  --accent-big:#8F7238;    /* dourado de números grandes */
  --accent-light:#C9A961;  /* dourado sobre fundo escuro — 8.6:1 */
  --accent-soft:rgba(201,169,97,.12);
  --wa:#25D366; --wa-dark:#1EBE5D;
  --rule:rgba(14,14,16,.12); --rule-dark:rgba(250,247,242,.16);
  --wrap:1080px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',system-ui,sans-serif;
  font-size:19px;line-height:1.65;
  color:var(--ink2);background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 22px}
section{padding:60px 0}
.dark{background:var(--dark);color:rgba(250,247,242,.84)}
.tint{background:var(--paper-2)}

h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:500;color:var(--ink);line-height:1.14;letter-spacing:-.02em}
.dark h1,.dark h2,.dark h3{color:var(--paper)}
h1{font-size:clamp(34px,7vw,56px);line-height:1.06}
h2{font-size:clamp(28px,5.5vw,40px);margin-bottom:14px}
h3{font-size:clamp(21px,3.6vw,26px);margin-bottom:10px}
em.s{font-family:'Fraunces',Georgia,serif;font-style:italic}
p{margin-bottom:18px}
p:last-child{margin-bottom:0}
strong{color:var(--ink);font-weight:600}
.dark strong{color:var(--paper)}
a:not([class]){color:var(--accent)}
.dark a:not([class]){color:var(--accent-light)}
/* :not([class]) evita que a cor de link sobrescreva botoes dentro de .dark */

.eyebrow{font-size:14.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--accent);margin-bottom:16px}
.dark .eyebrow{color:var(--accent-light)}
.lead{font-size:clamp(20px,3.3vw,23px);line-height:1.55;color:var(--ink2)}
.dark .lead{color:rgba(250,247,242,.86)}
.small{font-size:17px;color:var(--ink3)}
.dark .small{color:rgba(250,247,242,.66)}
.bar{width:52px;height:3px;background:var(--accent);margin:22px 0}
.dark .bar{background:var(--accent-light)}
.center{text-align:center}
.mt{margin-top:28px}.mt-lg{margin-top:42px}

/* ---------- BOTÕES ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:62px;padding:16px 30px;
  background:var(--wa);color:#08130D;text-decoration:none;
  font-size:19.5px;font-weight:700;border-radius:10px;
  box-shadow:0 4px 16px rgba(37,211,102,.28);
  transition:background .2s,transform .2s;text-align:center;border:none;cursor:pointer;
  font-family:inherit;
}
.btn,.dark .btn{color:#08130D}
.btn-dark,.dark .btn-dark{color:var(--paper)}
.btn-gold,.dark .btn-gold{color:#fff}
.btn:hover,.btn:focus{background:var(--wa-dark);transform:translateY(-2px)}
.btn.block{display:flex;width:100%;max-width:440px}
.btn-dark{background:var(--ink);color:var(--paper);box-shadow:0 4px 16px rgba(14,14,16,.25)}
.btn-dark:hover{background:#26262A}
.btn-gold{background:var(--accent);color:#fff;box-shadow:0 4px 16px rgba(107,85,37,.25)}
.btn-gold:hover{background:#54421C}
.btn-ghost{background:transparent;color:var(--accent);border:2px solid var(--accent);box-shadow:none}
.dark .btn-ghost{color:var(--accent-light);border-color:var(--accent-light)}
.btn-ghost:hover{background:var(--accent);color:#fff}
.dark .btn-ghost:hover{background:var(--accent-light);color:var(--ink)}

/* ---------- CARDS ---------- */
.grid{display:grid;gap:20px}
@media(min-width:760px){
  .grid.g2{grid-template-columns:1fr 1fr}
  .grid.g3{grid-template-columns:repeat(3,1fr)}
}
.card{background:var(--paper);border:1px solid var(--rule);border-radius:12px;padding:28px}
.dark .card{background:rgba(255,255,255,.05);border-color:var(--rule-dark)}
.card p{font-size:18px}

/* card de produto (home) */
.prod{
  display:flex;flex-direction:column;gap:14px;
  background:var(--paper);border:1px solid var(--rule);border-radius:12px;
  padding:30px;text-decoration:none;color:inherit;
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.prod:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 10px 30px rgba(14,14,16,.09)}
.dark .prod{background:rgba(255,255,255,.05);border-color:var(--rule-dark)}
.dark .prod:hover{border-color:var(--accent-light)}
.prod .tag{
  font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  color:var(--accent);align-self:flex-start;
  background:var(--accent-soft);padding:6px 12px;border-radius:100px
}
.dark .prod .tag{color:var(--accent-light)}
.prod h3{margin-bottom:0}
.prod p{font-size:17.5px;margin-bottom:0;flex:1}
.prod .go{font-weight:700;color:var(--accent);font-size:17px}
.dark .prod .go{color:var(--accent-light)}
.prod .go::after{content:' →'}

/* ---------- PORTAS (home) ---------- */
.doors{display:grid;gap:18px;margin-top:34px}
@media(min-width:700px){.doors{grid-template-columns:1fr 1fr}}
.door{
  display:flex;flex-direction:column;gap:8px;
  padding:30px 28px;border-radius:12px;text-decoration:none;
  border:1px solid var(--rule-dark);background:rgba(255,255,255,.05);
  transition:background .2s,border-color .2s,transform .2s;
}
.door:hover{background:rgba(201,169,97,.12);border-color:var(--accent-light);transform:translateY(-3px)}
.door .ic{font-size:32px;line-height:1}
.door .t{font-family:'Fraunces',Georgia,serif;font-size:27px;color:var(--paper);line-height:1.15}
.door .d{font-size:17px;color:rgba(250,247,242,.72)}

/* ---------- LISTAS ---------- */
.check{list-style:none}
.check li{font-size:18px;padding:9px 0 9px 32px;position:relative;line-height:1.45}
.check li::before{content:'✓';position:absolute;left:0;color:var(--accent);font-weight:700;font-size:19px}
.dark .check li::before{color:var(--accent-light)}
.dash{list-style:none}
.dash li{font-size:17.5px;padding:6px 0 6px 22px;position:relative;line-height:1.45}
.dash li::before{content:'—';position:absolute;left:0;color:var(--accent)}
.dark .dash li::before{color:var(--accent-light)}

/* ---------- FAQ ---------- */
details{border-bottom:1px solid var(--rule);padding:6px 0}
.dark details{border-bottom-color:var(--rule-dark)}
details summary{
  font-family:'Fraunces',Georgia,serif;font-size:22px;color:var(--ink);
  padding:18px 36px 18px 0;cursor:pointer;list-style:none;position:relative;line-height:1.3
}
.dark details summary{color:var(--paper)}
details summary::-webkit-details-marker{display:none}
details summary::after{content:'+';position:absolute;right:4px;top:16px;font-family:'Inter',sans-serif;font-size:28px;color:var(--accent);font-weight:400}
.dark details summary::after{color:var(--accent-light)}
details[open] summary::after{content:'–'}
details p{font-size:18px;padding:0 0 22px}

/* ---------- FORMULÁRIO ---------- */
.form{display:flex;flex-direction:column;gap:24px}
.field{display:flex;flex-direction:column;gap:9px}
.field label{font-size:17.5px;font-weight:600;color:var(--ink);line-height:1.4}
.field .hint{font-size:15.5px;color:var(--ink3);font-weight:400;margin-top:-4px}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:18px;color:var(--ink);
  background:var(--paper);border:1.5px solid var(--rule);border-radius:9px;
  padding:14px 16px;width:100%;min-height:56px;line-height:1.4;
}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)
}
.field select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' stroke='%235F5F65' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 16px center;padding-right:46px}

/* ---------- TOPO / RODAPÉ ---------- */
.topbar{background:var(--dark);padding:16px 0}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.topbar a.home{
  font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--accent-light);text-decoration:none
}
.topbar a.home:hover{text-decoration:underline}
.topbar-wa{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:100px;text-decoration:none;
  background:rgba(37,211,102,.14);border:1px solid rgba(37,211,102,.45);
  color:#7BE8A6;font-size:14.5px;font-weight:600;letter-spacing:.02em;
  transition:background .2s,color .2s;
}
.topbar-wa:hover{background:var(--wa);color:#08130D;border-color:var(--wa)}
.topbar-wa svg{width:18px;height:18px;fill:currentColor;flex:none}

footer{background:var(--dark);color:rgba(250,247,242,.72);padding:48px 0 40px;text-align:center;font-size:16.5px}
footer a,footer a:not([class]){color:var(--accent-light);text-decoration:none}  /* (0,1,2) p/ vencer a:not([class]) */
footer a:hover{text-decoration:underline}
footer .tag{font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:21px;color:var(--accent-light);margin-bottom:18px}
footer nav{margin:20px 0 24px;display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;font-size:16px}

/* ============================================================
   HERO DE PÁGINA INTERNA
   ============================================================ */
.hero{background:var(--dark);color:var(--paper);padding:48px 0 60px;position:relative;overflow:hidden}
.hero::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 26%,rgba(201,169,97,.14),transparent 62%);pointer-events:none}
.hero .wrap{position:relative;z-index:1}
.hero h1{color:var(--paper);margin-bottom:20px}
.hero h1 em{color:var(--accent-light)}
.brand{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-light);font-weight:700;margin-bottom:28px}
.facts{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 30px}
.facts span{
  font-size:15px;letter-spacing:.05em;font-weight:600;
  padding:10px 16px;border:1px solid var(--rule-dark);border-radius:100px;
  color:rgba(250,247,242,.88)
}

/* ============================================================
   BORDA QUE ACENDE EM GIRO (cards da Porta 2)
   Técnica: gradiente cônico girando por transform, recortado
   pela forma do card. Funciona em qualquer navegador — não
   depende de @property, que não anima de forma confiável.
   ============================================================ */
.prod.prod-glow{
  position:relative;background:#16161A;
  isolation:isolate;overflow:hidden;
}
.prod-glow::before{
  content:'';position:absolute;z-index:-2;
  top:50%;left:50%;width:190%;aspect-ratio:1;
  background:conic-gradient(
    rgba(201,169,97,0) 0deg, rgba(201,169,97,0) 200deg,
    rgba(201,169,97,.60) 265deg, #F6E9C6 300deg, rgba(201,169,97,.60) 335deg,
    rgba(201,169,97,0) 360deg);
  animation:glowSpin 6s linear infinite;
  animation-delay:var(--gd,0s);
}
.prod-glow::after{
  content:'';position:absolute;z-index:-1;
  inset:1.5px;border-radius:inherit;background:#16161A;
}
.prod-glow:hover::before{animation-duration:2.4s}
@keyframes glowSpin{
  from{transform:translate(-50%,-50%) rotate(0deg)}
  to{transform:translate(-50%,-50%) rotate(360deg)}
}
@media(prefers-reduced-motion:reduce){
  .prod-glow::before{animation:none;transform:translate(-50%,-50%) rotate(215deg)}
}

/* ============================================================
   BOTÕES DUPLOS DENTRO DO CARD
   ============================================================ */
.prod-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.btn-sm{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:12px 20px;border-radius:9px;
  font-size:17px;font-weight:700;text-decoration:none;
  transition:background .2s,color .2s,border-color .2s,transform .15s;
  flex:1 1 auto;text-align:center;white-space:nowrap;
}
.btn-sm:hover{transform:translateY(-2px)}
.btn-sm.wa{background:var(--wa);color:#08130D}
.btn-sm.wa:hover{background:var(--wa-dark)}
.btn-sm.out{background:transparent;color:var(--accent);border:2px solid var(--accent)}
.btn-sm.out:hover{background:var(--accent);color:#fff}
.dark .btn-sm.out{color:var(--accent-light);border-color:rgba(201,169,97,.55)}
.dark .btn-sm.out:hover{background:var(--accent-light);color:var(--ink)}

/* ============================================================
   BOTÃO FLUTUANTE DE WHATSAPP
   ============================================================ */
.fab{
  position:fixed;right:20px;bottom:20px;z-index:70;
  width:64px;height:64px;border-radius:50%;
  background:var(--wa);display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 24px rgba(0,0,0,.30);
  transition:transform .2s,background .2s;
}
.fab:hover,.fab:focus{transform:scale(1.08);background:var(--wa-dark)}
.fab svg{width:34px;height:34px;fill:#08130D;display:block}

/* ============================================================
   LINHA DO TEMPO DA AULA
   ============================================================ */
.tl{border-left:2px solid var(--rule-dark);padding-left:24px;margin-top:8px}
.tl-item{padding:14px 0;border-bottom:1px dashed var(--rule-dark);position:relative}
.tl-item:last-child{border-bottom:none;padding-bottom:0}
.tl-item::before{content:'';position:absolute;left:-30px;top:22px;width:9px;height:9px;border-radius:50%;background:var(--accent-light)}
.tl-time{font-family:'JetBrains Mono',monospace;font-size:16px;color:var(--accent-light);margin-bottom:4px}
.tl-title{font-family:'Fraunces',Georgia,serif;font-size:21px;color:var(--paper);margin-bottom:4px}
.tl-desc{font-size:17.5px;color:rgba(250,247,242,.80);margin:0}

/* ============================================================
   MÓDULOS DO PERCURSO
   ============================================================ */
.term{background:var(--paper);border:1px solid var(--rule);border-radius:10px;padding:24px}
.term .wk{font-family:'JetBrains Mono',monospace;font-size:13.5px;letter-spacing:.08em;color:var(--accent);margin-bottom:8px}
.term h3{margin-bottom:12px}
.term ul{list-style:none}
.term li{font-size:17.5px;padding:5px 0 5px 22px;position:relative;line-height:1.45}
.term li::before{content:'—';position:absolute;left:0;color:var(--accent)}

/* ============================================================
   PREÇO
   ============================================================ */
.price-box{background:var(--paper);border:2px solid var(--accent);border-radius:12px;padding:32px 28px;text-align:center;box-shadow:0 6px 30px rgba(143,114,56,.10)}
.price-cap{font-size:14px;color:var(--ink3);letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.price-num{font-family:'JetBrains Mono',monospace;font-size:clamp(38px,8vw,54px);font-weight:400;color:var(--accent-big);line-height:1;letter-spacing:-.03em;margin:8px 0}
.price-sub{font-size:17.5px;color:var(--ink3);margin-bottom:22px}
.price-hl{display:inline-block;background:var(--accent-soft);border-radius:8px;padding:14px 20px;font-size:18.5px;color:var(--ink);margin-bottom:24px}

/* ============================================================
   PROFESSORA
   ============================================================ */
.prof{display:grid;gap:28px;align-items:center}
@media(min-width:760px){.prof{grid-template-columns:280px 1fr;gap:44px}}
.prof-photo{
  width:100%;max-width:280px;aspect-ratio:1;
  height:auto;              /* sem isto o atributo height="642" do HTML vence o aspect-ratio */
  border-radius:12px;
  background:var(--paper-3);border:1px solid var(--rule);
  object-fit:cover;object-position:center 22%;display:block
}

/* ============================================================
   LOGO
   ============================================================ */
.logo-top{height:32px;width:auto;display:block}
.hero .logo-top{height:54px;width:auto;margin-bottom:26px}
.logo-foot{height:46px;width:auto;margin:0 auto}
.topbar a.home{display:inline-flex;align-items:center}
@media(max-width:520px){
  .logo-top{height:26px}
  .hero .logo-top{height:42px}
  .logo-foot{height:38px}
}

/* ============================================================
   CARTÕES CLAROS DENTRO DE SEÇÃO ESCURA
   .plan e .price-box têm fundo claro; sem cor própria o texto
   herda a da seção escura e fica branco no branco.
   ============================================================ */
.plan,.price-box,.dark .plan,.dark .price-box{color:var(--ink2)}
.plan p,.price-box p,.dark .plan p,.dark .price-box p{color:var(--ink2)}
.plan strong,.price-box strong,.dark .plan strong,.dark .price-box strong{color:var(--ink)}
.plan .small,.price-box .small,.dark .plan .small,.dark .price-box .small{color:var(--ink3)}
.plan .check li,.price-box .check li,.dark .plan .check li,.dark .price-box .check li{color:var(--ink2)}
.plan .check li::before,.price-box .check li::before,.dark .plan .check li::before,.dark .price-box .check li::before{color:var(--accent)}
.plan a:not([class]),.price-box a:not([class]){color:var(--accent)}

/* ============================================================
   CREDENCIAIS (abaixo da foto)
   ============================================================ */
.creds{margin-top:24px;padding-top:20px;border-top:1px solid var(--rule);max-width:280px}
.creds h4{font-size:12.5px;letter-spacing:.12em;color:var(--accent);margin-bottom:10px}
.creds .dash li{font-size:15.5px;padding:4px 0 4px 18px;line-height:1.4}
.creds .dash li::before{font-size:14px}
.logo-foot-link{display:inline-block;line-height:0}

/* ============================================================
   CELULAR — alvos de toque
   Diretriz: mínimo 44px de altura para qualquer coisa clicável.
   ============================================================ */
footer nav{gap:2px 18px}
footer nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
.topbar-wa{min-height:46px}
.topbar a.home,.hero a:has(>.logo-top){display:inline-flex;align-items:center;min-height:44px}
.topbar a.home{padding:0 8px 0 0}
.logo-foot-link{padding:8px 0}

@media(max-width:620px){
  /* rodapé em coluna: cada link vira uma linha inteira, fácil de acertar */
  footer nav{flex-direction:column;gap:0;margin:16px 0 20px}
  footer nav a{min-height:48px;justify-content:center;border-bottom:1px solid rgba(250,247,242,.10);width:100%}
  footer nav a:last-child{border-bottom:none}
  /* botão flutuante não pode cobrir o conteúdo do fim da página */
  body{padding-bottom:84px}
  .fab{right:16px;bottom:16px}
}

/* fallback p/ navegadores sem :has() */
.logo-link{display:inline-flex;align-items:center;min-height:44px}

/* ============================================================
   BOTÃO "LER A HISTÓRIA COMPLETA"
   ============================================================ */
.ler-mais{margin:4px 0 26px;flex:0 0 auto;cursor:pointer;font-family:inherit}

/* Recolhido: mostra o comeco do proximo paragrafo dissolvendo em
   transparencia. Uso mask-image em vez de um degrade sobreposto
   porque a mascara apaga o proprio texto — nao precisa casar com a
   cor do fundo, e continua certo se a secao mudar de cor. */
#hist-mais{transition:max-height .35s ease}
#hist-mais.recolhido{
  max-height:128px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 22%,rgba(0,0,0,.35) 68%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0,#000 22%,rgba(0,0,0,.35) 68%,transparent 100%);
}
/* respiro em volta do botao, pra ele ficar dentro do degrade */
#hist-mais.recolhido + .ler-mais{margin-top:-6px}
/* Sem JS o botão não serve pra nada: fica escondido e o texto
   aparece inteiro. Progressive enhancement de verdade. */
.ler-mais{display:none}

/* ============================================================
   CELULAR — seção "quem vai te ensinar" mais curta
   No celular a biografia fica entre o hero e as ofertas; quanto
   menor ela for, menos rolagem até o que a pessoa veio comprar.
   ============================================================ */
.creds-resumo{display:none}
@media(max-width:759px){
  #sobre .prof-photo{max-width:150px}
  #sobre .creds{display:none}          /* lista completa só no desktop */
  .creds-resumo{
    display:block;margin:16px 0 0;font-size:15.5px;line-height:1.55;
    color:var(--ink3);max-width:none
  }
  .creds-resumo strong{color:var(--accent)}
  #sobre .prof{gap:18px}
}