/* Layout: landing de uma coluna para pais; herói com o Tutor endireitando o topete; seções alternando fundo claro e tinta. Visual único (claro), escolhido de propósito. */
:root {
  --bg:#FBFAF7; --paper:#FFFFFF; --ink:#1C1B33; --muted:#5B5A70; --line:#E4E3EA;
  --primary:#C2391B; --brand:#F4502A; --soft:#FFE9E2; --math:#2459E0; --ok:#15803D;
  --display:"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --body:"Lexend", ui-sans-serif, system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing:border-box }
body { background:var(--bg); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.6; margin:0 }
.in { max-width:1120px; margin:0 auto; padding-inline:20px }
a { color:var(--primary) }
.top { position:sticky; top:env(safe-area-inset-top,0px); z-index:10; background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line) }
.top .in { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:68px }
.logo { height:30px; width:auto; color:var(--ink) }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 22px; border-radius:14px; background:var(--primary); color:#FFFFFF; font-family:var(--body); font-weight:600; font-size:16px; text-decoration:none; border:none; cursor:pointer }
.btn.small { min-height:44px; padding:0 16px; font-size:15px }
.btn:focus-visible, input:focus-visible, select:focus-visible { outline:3px solid var(--ink); outline-offset:2px }
h1, h2, h3 { font-family:var(--display); margin:0; text-wrap:balance }
h1 { font-weight:800; font-size:clamp(40px,7vw,76px); line-height:1; letter-spacing:-0.035em }
h2 { font-weight:800; font-size:clamp(30px,4.5vw,46px); line-height:1.05; letter-spacing:-0.025em }
h3 { font-weight:700; font-size:22px; letter-spacing:-0.01em }
p { margin:0; max-width:60ch }
.kicker { font-size:13px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--primary) }
section { padding-block:88px }

.hero { padding-block:56px 72px }
.hero .in { display:flex; flex-wrap:wrap; align-items:center; gap:40px }
.hero .copy { flex:1 1 440px; min-width:0; display:flex; flex-direction:column; gap:24px }
.hero .lead { font-size:20px; color:var(--muted) }
.hero .cta { display:flex; flex-wrap:wrap; gap:14px; align-items:center }
.hero .note { font-size:14px; color:var(--muted) }
.stage { flex:1 1 320px; display:flex; justify-content:center; align-items:flex-end; background:var(--soft); border-radius:32px; min-height:400px; padding:40px 24px 28px; position:relative; overflow:hidden }
.stage svg { width:min(280px,70vw); height:auto; position:relative }
.bubble { position:absolute; top:28px; left:24px; background:var(--paper); border-radius:18px 18px 18px 4px; padding:12px 16px; font-size:15px; font-weight:500; box-shadow:0 6px 20px rgba(28,27,51,.08); max-width:220px }
.bubble b { color:var(--ok) }
.t-q, .t-x { transition:opacity .35s ease }
.t-x { opacity:0 }
.done .t-q { opacity:0 }
.done .t-x { opacity:1 }
.eyes-happy { opacity:0 } .done .eyes-happy { opacity:1 } .done .eyes-open { opacity:0 }
@media (prefers-reduced-motion: no-preference) {
  .done svg { animation: hop .6s ease-out 1 }
  @keyframes hop { 0%{transform:translateY(0)} 40%{transform:translateY(-18px)} 100%{transform:translateY(0)} }
}

.scenes { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); margin-top:36px }
.scene { margin:0; background:var(--paper); border:1px solid var(--line); border-radius:24px 24px 24px 6px; padding:24px }
.scene blockquote { margin:0; font-family:var(--display); font-weight:700; font-size:21px; line-height:1.3; letter-spacing:-0.01em }
.answer { margin-top:28px; background:var(--soft); border-radius:24px; padding:24px 28px }
.answer p { max-width:72ch; font-size:18px }
.steps { display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); margin-top:40px }
.step { background:var(--paper); border:1px solid var(--line); border-radius:24px; padding:28px; display:flex; flex-direction:column; gap:12px }
.step .n { font-family:var(--display); font-weight:800; font-size:44px; line-height:1; color:var(--brand) }
.step p { color:var(--muted) }

.dark { background:var(--ink); color:#F3F2F8 }
.dark .kicker { color:#FF7A57 }
.dark p { color:#D9D8E3 }
.compare { margin-top:40px; display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)) }
.col { border-radius:24px; padding:28px; display:flex; flex-direction:column; gap:14px }
.col.them { border:1px solid #34334A }
.col.us { background:#F3F2F8; color:var(--ink) }
.col.us p, .col.us li { color:var(--ink) }
.col ul { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:8px }
.col.them li { color:#A9A8BC }

.parents .in { display:flex; flex-wrap:wrap; gap:40px; align-items:center }
.parents .copy { flex:1 1 400px; min-width:0; display:flex; flex-direction:column; gap:20px }
.mock { flex:1 1 360px; min-width:0; background:var(--paper); border:1px solid var(--line); border-radius:28px; padding:24px; display:flex; flex-direction:column; gap:12px; box-shadow:0 20px 50px rgba(28,27,51,.08) }
.mock .row { display:flex; justify-content:space-between; gap:12px; align-items:center }
.mock .card { border:1px solid var(--line); border-radius:16px; padding:14px 16px; display:flex; flex-direction:column; gap:6px }
.mock small { color:var(--muted); font-size:14px; line-height:1.45 }
.tag { font-size:12px; font-weight:600; color:#FFFFFF; padding:4px 10px; border-radius:999px; white-space:nowrap }
.together { background:var(--ink); color:#FFFFFF; border-radius:18px; padding:16px; display:flex; flex-direction:column; gap:6px }
.together small { color:#D9D8E3 }

.cast { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); margin-top:40px }
.ch { background:var(--paper); border:1px solid var(--line); border-radius:24px; padding:20px; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center }
.ch svg { width:130px; height:auto }
.ch q { font-style:italic; color:var(--muted); font-size:15px }

.signup .box { background:var(--paper); border:1px solid var(--line); border-radius:32px; padding:clamp(24px,5vw,48px); display:flex; flex-wrap:wrap; gap:40px }
.signup .copy { flex:1 1 320px; min-width:0; display:flex; flex-direction:column; gap:16px }
form { flex:1 1 360px; min-width:0; display:flex; flex-direction:column; gap:16px }
label { font-size:15px; font-weight:600; display:flex; flex-direction:column; gap:6px }
input[type=text], input[type=email], select { font-family:var(--body); font-size:16px; padding:13px 14px; border-radius:12px; border:1.5px solid #B9B7C6; background:var(--bg); color:var(--ink); min-height:50px }
.consent { flex-direction:row; align-items:flex-start; gap:10px; font-weight:400; font-size:14px; color:var(--muted) }
.consent input { width:22px; height:22px; margin-top:2px; flex:none; accent-color:var(--primary) }
.ok { border-radius:14px; background:#E8F5EC; color:var(--ok); padding:14px 16px; font-weight:500 }

.faq { display:flex; flex-direction:column; gap:12px; margin-top:32px; max-width:760px }
details { background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:18px 20px }
summary { cursor:pointer; font-weight:600; font-size:17px }
details p { margin-top:10px; color:var(--muted) }

footer { border-top:1px solid var(--line); padding-block:32px }
footer .in { display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center; font-size:14px; color:var(--muted) }

.logo-link { display:inline-flex; align-items:center }
.err { border-radius:14px; background:#FDECEC; color:#9F1F1F; padding:14px 16px; font-weight:500 }
.field-error { color:#B42318; font-size:14px; font-weight:500 }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color:#B42318 }
.hp { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden }
button[disabled] { opacity:.7; cursor:progress }
footer a { color:var(--muted) }