:root {
  --azul: #243c7f;
  --azul-escuro: #1b2e63;
  --azul-royal: #2f64d6;
  --amarelo: #ffcf33;
  --texto: #1a1a1a;
  --fundo: #ffffff;
  --borda: #d8dce8;
  --fonte-titulo: 'Cabinet Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --fonte-corpo: 'General Sans', 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fonte-corpo);
  font-weight: 400;
  line-height: 1.5;
  background: var(--fundo);
  color: var(--texto);
}

h1, h2 {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin: 0 0 12px;
}

h2 { font-size: 1.35rem; color: var(--azul); margin-bottom: 8px; }

p { margin: 0 0 12px; }

a { color: var(--azul); }

[hidden] { display: none !important; }

/* ---------- Hero: uma cena só ---------- */

.hero {
  position: relative;
  overflow: hidden;
  color: var(--azul-escuro);
  background: linear-gradient(180deg, #f7fbff 0%, #e4eefc 45%, #cddff6 100%);
}

.hero .conteudo {
  position: relative;
  z-index: 2;
  max-width: 1500px;
  margin: 0 auto;
  padding: 16px 20px 0;
}

.hero-grade { display: grid; gap: 18px; }

/* logo e título lado a lado: a marca ganha tamanho sem gastar altura da primeira dobra */
.marca { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }

.logo {
  width: 84px;
  flex: none;
  border-radius: 16px;
  display: block;
  box-shadow: 0 10px 28px rgba(14, 27, 74, 0.28);
}

.hero-texto h1 {
  font-size: clamp(1.15rem, 5vw, 1.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--azul-escuro);
  margin: 0;
}

.hero-texto h1 span { display: block; }
.hero-texto h1 .h1-escola { font-size: 2.2em; line-height: 0.95; letter-spacing: -0.03em; margin-bottom: 6px; }

.hero-sub { font-size: 1rem; max-width: 32rem; color: #2c3f70; margin-bottom: 0; }

.hero-destaque { display: flex; align-items: center; gap: 16px; margin-top: 14px; }

.datas {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.datas li {
  background: #ffffff;
  color: var(--azul-escuro);
  border-radius: 10px;
  padding: 6px 12px;
  font-weight: 500;
  box-shadow: 0 6px 16px rgba(27, 46, 99, 0.12);
}

.datas strong {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 1.3rem;
  margin-right: 6px;
}

/* esferas brilhantes: parentes das letras de balão */

.hero-fundo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.orbe, .orbe-90 { position: relative; border-radius: 50%; }
.hero-fundo .orbe { position: absolute; }

.orbe::after, .orbe-90::after {
  content: "";
  position: absolute;
  top: 12%;
  left: 20%;
  width: 28%;
  height: 15%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.78);
  filter: blur(2px);
  transform: rotate(-30deg);
}

.orbe-amarelo, .orbe-90 {
  background: radial-gradient(circle at 32% 26%, #fff8d6 0, #ffe27a 22%, #ffcf33 54%, #e0a400 100%);
  box-shadow: inset -8px -10px 18px rgba(160, 100, 0, 0.32), 0 18px 28px rgba(27, 46, 99, 0.22);
}

.orbe-azul {
  background: radial-gradient(circle at 32% 26%, #dbe8ff 0, #7aa3f2 24%, var(--azul-royal) 58%, #17338f 100%);
  box-shadow: inset -8px -10px 18px rgba(8, 20, 70, 0.4), 0 18px 28px rgba(27, 46, 99, 0.22);
}

.orbe-vidro {
  background: radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.95) 0, rgba(255, 255, 255, 0.4) 22%, rgba(150, 190, 245, 0.35) 64%, rgba(90, 140, 225, 0.55) 100%);
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 -12px 22px rgba(60, 110, 210, 0.35), inset 0 8px 14px rgba(255, 255, 255, 0.7), 0 14px 28px rgba(27, 46, 99, 0.16);
}

.o1 { width: 34px; height: 34px; top: 14px; right: 18px; }
.o2, .o4, .o5 { display: none; }
.o3 { width: 44px; height: 44px; bottom: 26%; right: 6%; }

.orbe-90 {
  flex: none;
  width: 84px;
  height: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  color: var(--azul-escuro);
}

.orbe-90 strong { font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.7rem; letter-spacing: -0.03em; }
.orbe-90 small { font-size: 0.62rem; font-weight: 500; }

/* ---------- Formulário flutuando sobre a cena ---------- */

.cartao-form {
  background: #ffffff;
  color: var(--texto);
  border: 1px solid #ffffff;
  border-radius: 14px;
  padding: 20px 20px 22px;
  box-shadow: 0 28px 60px rgba(27, 46, 99, 0.22), 0 2px 8px rgba(27, 46, 99, 0.08);
}

.aviso {
  border-left: 4px solid var(--amarelo);
  padding: 7px 11px;
  background: #fffbe8;
  border-radius: 0 8px 8px 0;
  font-size: 0.84rem;
  line-height: 1.4;
  margin: 0;
}

/* ---------- Palco azul onde o trio está em pé ---------- */

.palco { position: relative; margin: 4px -20px 0; }

.palco::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 68%;
  background: linear-gradient(180deg, #2c4a9c 0%, var(--azul-escuro) 100%);
  border-radius: 50% 50% 0 0 / 14% 14% 0 0;
}

.hero-trio {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(14, 28, 70, 0.28));
}

/* ---------- Botões ---------- */

.botao {
  display: inline-block;
  background: var(--amarelo);
  color: var(--azul-escuro);
  font-family: var(--fonte-corpo);
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  border: none;
  border-radius: 6px;
  padding: 12px 24px;
  cursor: pointer;
}

.botao:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 2px;
}

/* ---------- Formulário ---------- */

form { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }

.campos { display: flex; flex-direction: column; gap: 12px; }

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }

legend {
  padding: 0;
  margin-bottom: 6px;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--azul);
}

.envio { display: flex; flex-direction: column; gap: 10px; }

.opcional { font-weight: 400; color: #5b6890; }

.cep-resultado { margin: 0; font-size: 0.82rem; line-height: 1.35; color: #2c3f70; }
.cep-resultado:empty { display: none; }
.cep-resultado.ok { color: #1e6b3a; }
.cep-resultado.erro { color: #b3261e; }

.linha-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

@media (max-width: 440px) {
  .empilha-estreito { grid-template-columns: 1fr; }
}

label { display: block; font-weight: 500; font-size: 0.84rem; margin-bottom: 3px; }

input[type="text"], input[type="tel"], input[type="email"], select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  background: #ffffff;
  color: var(--texto);
}

input:focus, select:focus { border-color: var(--azul); }

.consentimento {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-weight: 400;
  font-size: 0.78rem;
  line-height: 1.4;
}

.consentimento input { margin-top: 2px; flex-shrink: 0; width: 18px; height: 18px; }

.acoes { display: flex; gap: 10px; margin-top: 2px; }
.acoes .botao { text-align: center; }

#btn-enviar { flex: 1; background: var(--azul); color: #ffffff; }
#btn-enviar:disabled { opacity: 0.55; cursor: default; }

.botao-secundario {
  background: transparent;
  color: var(--azul);
  border: 2px solid var(--azul);
  padding: 10px 18px;
}

.mensagem { min-height: 1.2em; text-align: center; font-weight: 500; font-size: 0.9rem; }
.mensagem.erro { color: #b3261e; }

.tela-sucesso { text-align: center; padding: 12px 0; }
.botao-whatsapp { background: #25d366; color: #ffffff; margin-top: 12px; }

.rodape { background: var(--azul-escuro); color: #ffffff; text-align: center; padding: 22px 20px; font-size: 0.9rem; }
.rodape p { margin: 0 0 6px; }
.rodape a { color: var(--amarelo); }

/* ---------- Desktop: tudo na primeira dobra ---------- */

@media (min-width: 900px) {
  .hero {
    min-height: 100svh;
    --col-form: 500px;
    --gap-col: clamp(28px, 3.5vw, 56px);
    --col-esq: calc(min(100vw, 1500px) - 64px - var(--col-form) - var(--gap-col));
    /* altura do trio: o que sobra da tela depois do texto, limitada pela largura da coluna */
    --palco-h: min(clamp(300px, calc(60svh - 84px), 700px), calc(var(--col-esq) / 1.55));
    --pad-topo: clamp(16px, 3svh, 34px);
    --logo: clamp(88px, 15svh, 140px);
    --marca-mb: clamp(10px, 2svh, 22px);
  }

  .hero .conteudo.hero-grade {
    min-height: 100svh;
    padding: var(--pad-topo) 32px 0;
    grid-template-columns: minmax(0, 1fr) var(--col-form);
    grid-template-rows: auto 1fr;
    column-gap: var(--gap-col);
    row-gap: 0;
    align-items: start;
  }

  .hero-texto { grid-column: 1; grid-row: 1; }

  .marca { gap: clamp(16px, 2vw, 26px); margin-bottom: var(--marca-mb); }
  .logo { width: var(--logo); border-radius: clamp(16px, 2.6svh, 24px); }

  .hero-texto h1 { font-size: clamp(1.3rem, min(2.2vw, 3.6svh), 2rem); }
  .hero-sub { font-size: clamp(1rem, 2.2svh, 1.15rem); }

  .hero-destaque { margin-top: clamp(12px, 2.4svh, 24px); gap: 18px; }
  .orbe-90 { width: clamp(88px, 13svh, 128px); height: clamp(88px, 13svh, 128px); }
  .orbe-90 strong { font-size: clamp(1.7rem, 4svh, 2.4rem); }
  .orbe-90 small { font-size: clamp(0.62rem, 1.4svh, 0.78rem); }

  .cartao-form {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    margin-bottom: clamp(12px, 2.5svh, 32px);
    padding: 18px 22px 20px;
    /* cartão nunca passa da tela: se faltar altura, só a lista de campos rola e o botão fica sempre à vista */
    display: flex;
    flex-direction: column;
    max-height: calc(100svh - 56px);
  }

  #tela-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  #form-concurso { flex: 1 1 auto; min-height: 0; }

  .campos {
    overflow-y: auto;
    min-height: 120px;
    margin-right: -10px;
    padding-right: 10px;
    scrollbar-width: thin;
    scrollbar-color: #b9c6e6 transparent;
  }

  /* o palco azul passa a ser da largura da tela, acompanhando a altura do trio */
  .hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--palco-h) * 0.68);
    z-index: 1;
    background: linear-gradient(180deg, #2c4a9c 0%, var(--azul-escuro) 100%);
    border-radius: 50% 50% 0 0 / 14% 14% 0 0;
  }

  .palco {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    justify-self: start;
    height: var(--palco-h);
    aspect-ratio: 2000 / 1292;
    margin: 0;
  }

  .palco::before { display: none; }

  .hero-trio { width: 100%; height: 100%; object-fit: contain; object-position: left bottom; }

  .o1 { width: 40px; height: 40px; top: 5%; left: 44%; right: auto; }
  .o3 { width: 60px; height: 60px; top: 9%; bottom: auto; right: 38%; }
}

/* telas altas: o topo do formulário alinha com a base do bloco logo + título, e o cartão fica mais compacto */
@media (min-width: 900px) and (min-height: 860px) {
  .cartao-form {
    align-self: start;
    margin-top: calc(var(--logo) + var(--marca-mb));
    margin-bottom: 0;
    padding: 14px 22px 16px;
    max-height: calc(100svh - var(--pad-topo) - var(--logo) - var(--marca-mb) - 20px);
  }

  .cartao-form h2 { margin-bottom: 6px; }
  .aviso { padding: 5px 11px; font-size: 0.8rem; line-height: 1.35; }
  form { gap: 8px; margin-top: 8px; }
  .campos { gap: 8px; }
  fieldset { gap: 4px; }
  legend { margin-bottom: 2px; }
  label { margin-bottom: 2px; }
  input[type="text"], input[type="tel"], input[type="email"], select { padding: 7px 12px; }
  .mensagem { min-height: 0; }
}

/* altura entre 860 e 960: aperta mais um pouco pra nenhum campo ficar escondido na rolagem interna */
@media (min-width: 900px) and (min-height: 860px) and (max-height: 960px) {
  .cartao-form { padding: 12px 22px 14px; }
  .aviso { padding: 4px 10px; font-size: 0.76rem; line-height: 1.3; }
  form, .campos { gap: 6px; }
  form { margin-top: 6px; }
  fieldset { gap: 3px; }
  label { margin-bottom: 1px; font-size: 0.8rem; }
  input[type="text"], input[type="tel"], input[type="email"], select { padding: 5px 12px; }
  .acoes .botao { padding-top: 9px; padding-bottom: 9px; }
}

@media (min-width: 1500px) {
  .o2 { display: block; width: 96px; height: 96px; top: 38%; left: 2%; }
  .o4 { display: block; width: 44px; height: 44px; top: 30%; left: 47%; }
  .o5 { display: block; width: 90px; height: 90px; top: 8%; right: 2%; }
}

/* ---------- Uma entrada só: os orbes sobem como balões ---------- */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .orbe, .orbe-90 { animation: subir 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .o1 { animation-delay: 0.1s; }
  .o2 { animation-delay: 0.2s; }
  .o3 { animation-delay: 0.3s; }
  .o4 { animation-delay: 0.4s; }
  .o5 { animation-delay: 0.15s; }
  .orbe-90 { animation-delay: 0.05s; }
}

@keyframes subir {
  from { opacity: 0; transform: translateY(40px) scale(0.92); }
  to { opacity: 1; transform: none; }
}