/* Therapy Neuro — Landing MASTER 2027
   Layout: coluna única no celular; blocos alternam branco / gelo / marinho,
   com o laranja reservado para ações e números da carga horária.
   Cores amostradas dos arquivos oficiais da logo (ver docs/PENDENCIAS-E-REVISAO.md). */
:root {
  --marinho: #04214B;        /* "Therapy" na logo clara */
  --marinho-fundo: #012043;  /* fundo da logo escura */
  --laranja: #FA740E;        /* rede neural e "Neuro" */
  --laranja-texto: #B54C00;  /* laranja escurecido para texto pequeno sobre branco (contraste AA) */
  --gelo: #EEF4FA;           /* azul muito claro de apoio */
  --branco: #FFFFFF;
  --tinta: #0D1C33;
  --suave: #4A5B73;
  --linha: #CFDCEA;
  --claro-sobre-marinho: #C9D7E8;
  --erro: #B3261E;
  --erro-fundo: #FDECEA;
  --ok: #1E6B3A;

  --f-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --f-texto: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --t-xs: 0.8125rem; --t-s: 0.9375rem; --t-m: 1.0625rem; --t-l: 1.25rem;
  --t-xl: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
  --t-xxl: clamp(2rem, 1.3rem + 3.2vw, 3.4rem);

  --raio: 10px;
  --gutter: 16px;
  --largura: 1120px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--branco); color: var(--tinta); font-family: var(--f-texto); font-size: var(--t-m); line-height: 1.6; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--f-display); color: var(--marinho); line-height: 1.15; margin: 0 0 0.6em; text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: var(--t-xxl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); }
h4 { font-size: var(--t-m); font-family: var(--f-texto); font-weight: 700; margin-top: 1.2em; }
p { margin: 0 0 1em; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.laranja { color: var(--laranja); }
.branco { color: var(--branco); }
.claro { color: var(--claro-sobre-marinho); }
.claro strong { color: var(--branco); }
.pequeno { font-size: var(--t-s); color: var(--suave); }
.grande { font-size: var(--t-l); }
:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; border-radius: 4px; }

.pular { position: absolute; left: -9999px; top: 0; background: var(--marinho); color: var(--branco); padding: 10px 14px; z-index: 100; }
.pular:focus { left: 8px; top: 8px; }

.cont { width: 100%; max-width: var(--largura); margin: 0 auto; padding-inline: var(--gutter); }
.cont--estreito { max-width: 780px; }
.cont--form { max-width: 760px; }
.secao { padding-block: clamp(48px, 7vw, 88px); }
.secao--gelo { background: var(--gelo); }
.secao--marinho { background: var(--marinho-fundo); color: var(--claro-sobre-marinho); }
.grade-2 { display: grid; gap: 32px; }
.grade-2 > * { min-width: 0; }
@media (min-width: 900px) { .grade-2 { grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: start; } }
.pilha { display: grid; gap: 10px; }
.pilha--larga { margin-top: 28px; }
.intro { max-width: 62ch; color: var(--suave); }

.sobretitulo { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--laranja); margin-bottom: 0.8em; }
.sobretitulo--escuro { color: var(--laranja-texto); }
.rotulo { font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--suave); margin: 0 0 4px; }

/* ---------- botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border-radius: 999px; font: 600 var(--t-m)/1.2 var(--f-texto); text-decoration: none; border: 2px solid transparent; cursor: pointer; text-align: center; transition: transform .15s ease, background-color .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn--laranja { background: var(--laranja); color: var(--marinho-fundo); }
.btn--laranja:hover { background: #FF8628; }
.btn--marinho { background: var(--marinho); color: var(--branco); }
.btn--contorno { border-color: var(--marinho); color: var(--marinho); background: transparent; }
.btn--contorno-claro { border-color: var(--claro-sobre-marinho); color: var(--branco); background: transparent; }
.btn--peq { min-height: 40px; padding: 8px 16px; font-size: var(--t-s); }
.btn--largo { width: 100%; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.link { color: var(--marinho); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--laranja); font-weight: 600; }
.link--claro { color: var(--branco); }

/* ---------- faixa de prévia ---------- */
.faixa-previa { background: #FFF3C4; color: #4A3700; font-size: var(--t-s); border-bottom: 1px solid #E8D38A; }
.faixa-previa__in { max-width: var(--largura); margin: 0 auto; padding: 10px var(--gutter); display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.faixa-previa details { width: 100%; }
.faixa-previa summary { cursor: pointer; font-weight: 600; }
.faixa-previa ul { margin: 6px 0 0; padding-left: 20px; }

/* ---------- topo ---------- */
.topo { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--marinho-fundo); border-bottom: 1px solid rgba(255,255,255,.08); }
.topo__in { max-width: var(--largura); margin: 0 auto; padding: 8px var(--gutter); display: flex; align-items: center; gap: 16px; }
.topo__marca img { height: 58px; width: auto; }
.topo__nav { display: none; gap: 22px; margin-left: auto; }
.topo__nav a { color: var(--claro-sobre-marinho); text-decoration: none; font-size: var(--t-s); font-weight: 500; }
.topo__nav a:hover { color: var(--branco); }
.topo .btn { margin-left: auto; }
@media (min-width: 900px) { .topo__nav { display: flex; } .topo .btn { margin-left: 0; } }

/* ---------- hero ---------- */
.hero { background: var(--marinho-fundo); color: var(--claro-sobre-marinho); overflow: hidden; }
.hero__in { max-width: var(--largura); margin: 0 auto; padding: 32px var(--gutter) 48px; display: grid; gap: 28px; }
.hero__in > * { min-width: 0; }
.hero h1 { color: var(--branco); }
.hero__sub { font-size: var(--t-l); color: var(--branco); max-width: 34ch; }
.hero__prof { font-family: var(--f-mono); font-size: var(--t-s); letter-spacing: .04em; color: var(--laranja); }
.hero__img { margin: 0; border-radius: 14px; overflow: hidden; max-width: 420px; justify-self: center; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.hero__turmas { margin-top: 14px; font-size: var(--t-s); }
@media (min-width: 900px) {
  .hero__in { grid-template-columns: 1.25fr 0.75fr; align-items: center; padding-block: 56px 72px; gap: 56px; }
  .hero__img { max-width: none; }
}

.horas { margin-top: 24px; max-width: 520px; }
.horas__total { font-family: var(--f-display); font-size: var(--t-xl); color: var(--branco); margin-bottom: 8px; }
.horas__total .mono { font-size: 1.4em; color: var(--laranja); font-family: var(--f-mono); }
.horas__barra { display: flex; height: 34px; border-radius: 6px; overflow: hidden; font: 500 var(--t-xs)/34px var(--f-mono); text-align: center; }
.horas__barra span { min-width: 0; white-space: nowrap; }
.horas__barra .h12 { flex: 12; } .horas__barra .h18 { flex: 18; } .horas__barra .h6 { flex: 6; }
.horas__barra span:nth-child(1) { background: var(--claro-sobre-marinho); color: var(--marinho-fundo); }
.horas__barra span:nth-child(2) { background: var(--laranja); color: var(--marinho-fundo); }
.horas__barra span:nth-child(3) { background: var(--branco); color: var(--marinho-fundo); }
.horas__legenda { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 4px; font-size: var(--t-s); }
.horas__legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; vertical-align: 0; }
.horas__legenda .c1 { background: var(--claro-sobre-marinho); } .horas__legenda .c2 { background: var(--laranja); } .horas__legenda .c3 { background: var(--branco); }

/* ---------- expansíveis ---------- */
.exp { border: 1px solid var(--linha); border-radius: var(--raio); background: var(--branco); }
.exp > summary { list-style: none; cursor: pointer; padding: 14px 48px 14px 16px; font-weight: 600; color: var(--marinho); position: relative; min-height: 48px; }
.exp > summary::-webkit-details-marker { display: none; }
.exp > summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--laranja-texto); border-bottom: 2px solid var(--laranja-texto); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.exp[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.exp__corpo { padding: 0 16px 16px; }
.exp__corpo > :last-child { margin-bottom: 0; }

.lista { padding-left: 1.2em; margin: 0 0 1em; }
.lista li { margin-bottom: 4px; }
.lista li::marker { color: var(--laranja-texto); }
.lista--check { list-style: none; padding-left: 0; }
.lista--check li { padding-left: 28px; position: relative; }
.lista--check li::before { content: ""; position: absolute; left: 4px; top: .45em; width: 7px; height: 12px; border-right: 2.5px solid var(--laranja-texto); border-bottom: 2.5px solid var(--laranja-texto); transform: rotate(45deg); }
@media (min-width: 700px) { .lista--colunas { columns: 2; column-gap: 32px; } }
.nota { background: var(--gelo); border-radius: var(--raio); padding: 12px 14px; }
.areas { display: grid; gap: 4px 24px; }
@media (min-width: 700px) { .areas { grid-template-columns: 1fr 1fr; } }
.areas h4 { margin-top: .6em; }

/* ---------- cadeia de raciocínio ---------- */
.cadeia { list-style: none; counter-reset: passo; padding: 0; margin: 20px 0 28px; display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .cadeia { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cadeia li { counter-increment: passo; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 8px; padding: 12px 14px; color: var(--branco); font-weight: 600; }
.cadeia li::before { content: counter(passo); display: block; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--laranja); margin-bottom: 2px; }

/* ---------- público ---------- */
.caixa-publico, .caixa-presenca { background: var(--gelo); border-radius: 14px; padding: 24px; }
.profissoes { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.profissoes li { background: var(--branco); border: 1px solid var(--linha); border-radius: 999px; padding: 6px 14px; font-weight: 600; color: var(--marinho); font-size: var(--t-s); }
.alerta-texto { color: var(--erro); margin: 0; }

/* ---------- etapas ---------- */
.etapas { display: grid; gap: 16px; margin-top: 8px; }
@media (min-width: 900px) { .etapas { grid-template-columns: repeat(3, 1fr); } }
.etapa { background: var(--branco); border-radius: 14px; padding: 22px; border: 1px solid var(--linha); min-width: 0; }
.etapa header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.etapa header h3 { margin: 0; }
.etapa__h { font-size: 1.6rem; color: var(--laranja-texto); font-weight: 500; flex: none; }
.exp--claro { background: var(--branco); }
.aulas { display: grid; gap: 8px 28px; }
@media (min-width: 700px) { .aulas { grid-template-columns: 1fr 1fr; } }
.aulas h4 { margin-top: 0; }
.eixos { display: grid; gap: 12px; margin: 0; }
@media (min-width: 700px) { .eixos { grid-template-columns: 1fr 1fr; } }
.eixos dt { font-weight: 700; color: var(--marinho); }
.eixos dd { margin: 0; }

/* ---------- plataforma ---------- */
.destaque { color: var(--laranja-texto); }
.numero-grande { font-family: var(--f-display); font-size: var(--t-xl); color: var(--marinho); }
.numero-grande .mono { color: var(--laranja-texto); }

/* ---------- certificação ---------- */
.certificado { border: 2px solid var(--marinho); border-radius: 4px; padding: 22px; background: var(--branco); margin-bottom: 16px; outline: 1px solid var(--linha); outline-offset: -8px; }
.certificado__titulo { font-family: var(--f-display); font-size: var(--t-l); color: var(--marinho); margin: 0; }

/* ---------- vagas ---------- */
.vagas { border-left: 4px solid var(--laranja); padding: 4px 0 4px 16px; max-width: 62ch; }
.vagas h3 { margin-bottom: .3em; }

/* ---------- preços ---------- */
.precos { display: grid; gap: 14px; margin-top: 8px; }
@media (min-width: 760px) { .precos { grid-template-columns: repeat(3, 1fr); } }
.preco { border: 1px solid rgba(255,255,255,.18); border-radius: 14px; padding: 22px; background: rgba(255,255,255,.04); }
.preco--destaque { border-color: var(--laranja); }
.preco__forma { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--laranja); margin-bottom: 6px; }
.preco__valor { font-family: var(--f-display); font-size: var(--t-xl); color: var(--branco); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.preco__det { margin: 0; }
.preco__det strong { color: var(--branco); }
.preco__nota { margin-top: 20px; max-width: 62ch; }
.banco { margin-top: 18px; border: 1px solid rgba(255,255,255,.18); border-radius: 14px; padding: 20px 22px; }
.banco__dados { display: grid; gap: 8px 24px; margin: 0; }
@media (min-width: 760px) { .banco__dados { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.banco__dados div { min-width: 0; }
.banco__dados dt { font-size: var(--t-xs); color: var(--claro-sobre-marinho); text-transform: uppercase; letter-spacing: .06em; }
.banco__dados dd { margin: 0; color: var(--branco); font-weight: 600; overflow-wrap: anywhere; user-select: all; }


/* ---------- apoio ---------- */
.cupom { background: var(--branco); border: 2px dashed var(--laranja); border-radius: 14px; padding: 20px; margin-bottom: 16px; }
.cupom__codigo { font-size: 1.6rem; color: var(--marinho); letter-spacing: .08em; margin: 4px 0 8px; user-select: all; }
.declaracao-interesse h3 { font-size: var(--t-m); font-family: var(--f-texto); }

/* ---------- fechamento ---------- */
.secao--fecho .lema { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 4px; }
.lema li { font-family: var(--f-display); font-size: var(--t-xl); color: var(--branco); }
.lema li:nth-child(2) { color: var(--laranja); }

/* ---------- professor ---------- */
.professor { display: grid; gap: 28px; }
.professor > * { min-width: 0; }
.professor__foto { margin: 0; max-width: 280px; border-radius: 14px; overflow: hidden; }
@media (min-width: 800px) { .professor { grid-template-columns: 280px 1fr; gap: 48px; align-items: start; } }
.professor__cargo { font-weight: 700; color: var(--marinho); }
.titulos { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 6px; }
.titulos li { border-left: 3px solid var(--laranja); padding-left: 12px; }

/* ---------- formulário ---------- */
.modo-demo { background: #FFF3C4; color: #4A3700; border: 1px solid #E8D38A; border-radius: var(--raio); padding: 14px 16px; margin-bottom: 20px; }
.form { display: grid; gap: 20px; }
.form fieldset { border: 0; padding: 20px; margin: 0; background: var(--branco); border-radius: 14px; display: grid; gap: 14px; min-width: 0; }
.form legend { font-family: var(--f-display); font-weight: 700; color: var(--marinho); font-size: var(--t-l); padding: 0; float: left; width: 100%; margin-bottom: 4px; }
.form legend + * { clear: both; }
.linha { display: grid; gap: 14px; }
@media (min-width: 600px) { .linha { grid-template-columns: 1fr 1fr; } }
.campo { display: grid; gap: 4px; min-width: 0; }
.campo label { font-weight: 600; color: var(--tinta); }
.campo input[type="text"], .campo input[type="email"], .campo input[type="tel"], .campo input[type="date"], .campo select {
  width: 100%; min-height: 48px; padding: 10px 12px; font: 400 16px/1.3 var(--f-texto); color: var(--tinta);
  background: var(--branco); border: 1.5px solid #6F8199; border-radius: 8px; -webkit-appearance: none; appearance: none;
}
.campo select { background-image: linear-gradient(45deg, transparent 50%, var(--marinho) 50%), linear-gradient(135deg, var(--marinho) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
.campo input[type="date"] { min-height: 48px; }
.campo input:focus, .campo select:focus { border-color: var(--marinho); outline: 3px solid rgba(250,116,14,.45); outline-offset: 0; }
.campo [aria-invalid="true"] { border-color: var(--erro); background: #FFFBFA; }
#nome { letter-spacing: .02em; }
.ajuda { font-size: var(--t-s); color: var(--suave); margin: 0; }
.ajuda--link { color: var(--marinho); background: var(--gelo); padding: 8px 10px; border-radius: 6px; }
.erro { color: var(--erro); font-size: var(--t-s); font-weight: 600; margin: 0; min-height: 0; }
.erro:empty { display: none; }
.campo--check { display: flex; gap: 12px; align-items: flex-start; }
.campo--check input { width: 24px; height: 24px; margin: 2px 0 0; flex: none; accent-color: var(--marinho); }
.campo--check label { font-weight: 700; }
.declaracao__texto { background: var(--gelo); padding: 14px; border-radius: 8px; margin: 0; }
.atalhos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: var(--t-s); color: var(--suave); }
.chip { border: 1.5px solid var(--linha); background: var(--gelo); color: var(--marinho); border-radius: 999px; padding: 6px 14px; min-height: 36px; font: 600 var(--t-s) var(--f-texto); cursor: pointer; }
.chip:hover { border-color: var(--marinho); }
.armadilha { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.form__acoes .btn { flex: 1 1 220px; }
.resumo-erros { background: var(--erro-fundo); border: 1px solid #F2B8B5; color: var(--erro); padding: 14px 16px; border-radius: var(--raio); }
.resumo-erros ul { margin: 0; padding-left: 20px; }
.resumo-erros a { color: var(--erro); }

.revisao, .sucesso { background: var(--branco); border-radius: 14px; padding: 22px; display: grid; gap: 4px; }
.revisao__destaque { display: grid; gap: 12px; background: var(--gelo); border-radius: 10px; padding: 16px; margin: 8px 0 12px; }
.revisao__curso { font-weight: 700; color: var(--marinho); margin: 0; }
.revisao__nome { font-family: var(--f-display); font-size: var(--t-xl); color: var(--marinho); margin: 0; overflow-wrap: anywhere; }
.revisao__lista { display: grid; gap: 0; margin: 0 0 16px; }
.revisao__lista div { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--linha); }
.revisao__lista dt { color: var(--suave); font-size: var(--t-s); }
.revisao__lista dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.aviso-abrev { background: #FFF3C4; color: #4A3700; border-radius: 8px; padding: 10px 12px; }
.erro-envio { background: var(--erro-fundo); color: var(--erro); padding: 12px 14px; border-radius: 8px; margin-bottom: 12px; font-weight: 600; }
.sucesso h3 { color: var(--ok); }
.sucesso #btn-outra { margin-top: 16px; justify-self: start; }
.protocolo { font-size: 1.8rem; color: var(--marinho); letter-spacing: .06em; user-select: all; margin: 0 0 12px; }

/* ---------- privacidade ---------- */
.privacidade-dados { display: grid; gap: 10px; margin: 20px 0 0; }
.privacidade-dados div { display: grid; gap: 2px; border-bottom: 1px solid var(--linha); padding-bottom: 8px; }
.privacidade-dados dt { font-size: var(--t-s); color: var(--suave); }
.privacidade-dados dd { margin: 0; font-weight: 600; }

/* ---------- vídeo ---------- */
.video { position: relative; aspect-ratio: 16 / 9; max-width: 100%; background: var(--marinho-fundo); border-radius: 14px; overflow: hidden; display: grid; place-items: center; background-size: cover; background-position: center; }
.video iframe, .video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__play { display: inline-flex; align-items: center; gap: 12px; background: var(--laranja); color: var(--marinho-fundo); border: 0; border-radius: 999px; padding: 12px 22px; min-height: 48px; font: 700 var(--t-m) var(--f-texto); cursor: pointer; }
.video__icone { width: 0; height: 0; border-left: 14px solid var(--marinho-fundo); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }

/* ---------- rodapé e barra fixa ---------- */
.rodape { background: var(--marinho-fundo); color: var(--claro-sobre-marinho); padding-block: 40px 110px; text-align: center; }
.rodape__in { display: grid; justify-items: center; gap: 4px; }
.rodape__logo { width: 120px; }
.rodape__manual { margin-top: 12px; max-width: 34rem; }
.assinatura { font-family: var(--f-mono); letter-spacing: .1em; white-space: nowrap; font-size: clamp(0.78rem, 3.4vw, 1rem); color: var(--laranja); margin-top: 12px; }
.barra-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; gap: 10px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(1,32,67,.96); border-top: 1px solid rgba(255,255,255,.1); transform: translateY(110%); transition: transform .25s ease; }
.barra-cta.visivel { transform: none; }
.barra-cta .btn { flex: 1; min-height: 46px; padding: 10px 12px; font-size: var(--t-s); }
.barra-cta .btn--laranja { flex: 1.6; }
@media (min-width: 900px) { .barra-cta { display: none; } .rodape { padding-bottom: 40px; } }