/* =========================================================
   Aula ao vivo Estruturas (11/11) — Instituto FSC
   Layout do Design (Estruturas-v2) com as cores e o vídeo de fundo da página da Pós em Estruturas.
   ========================================================= */
/* Letras provisórias com a mesma medida das fontes da página (calculado a partir
   dos arquivos): enquanto Anton / Work Sans / IBM Plex Mono carregam, o texto já
   ocupa o mesmo espaço e a página não "pula". As fontes em si: fontes.css. */
@font-face {
  font-family: 'Anton Reserva';
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Helvetica'), local('Roboto');
  size-adjust: 70.17%; ascent-override: 167.64%; descent-override: 46.9%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Work Sans Reserva';
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Helvetica'), local('Roboto');
  size-adjust: 110.33%; ascent-override: 84.29%; descent-override: 22.03%; line-gap-override: 0%;
}
@font-face {
  font-family: 'IBM Plex Mono Reserva';
  src: local('Courier New'), local('CourierNewPSMT'), local('Liberation Mono'), local('Menlo'), local('Roboto Mono');
  size-adjust: 99.98%; ascent-override: 102.52%; descent-override: 27.5%; line-gap-override: 0%;
}

:root {
  /* Cores da página da Pós em Estruturas (pos.estruturas.fundacoessemcomplicacoes.com.br) */
  --bg: #6E1612;            /* bg-base */
  --bg-2: #5E120F;          /* ink-1 */
  --bg-rodape: #4A0D0A;     /* ink-deep */
  --card: #4A0D0A;
  --card-2: #4A0D0A;
  --vinho: #5E120F;
  --vinho-barra: #4A0D0A;
  --linha: #5A2622;         /* line-strong */
  --linha-2: #7A3A33;
  --laranja: #E8722A;       /* gold-400 */
  --laranja-claro: #F7A368; /* gold-300 */
  --verde: #15803D;         /* verde da Pós um tom mais escuro: texto branco com contraste 5:1 */
  --verde-hover: #166534;
  --texto: #FFFFFF;
  --texto-2: #ECD9D5;       /* text-300 */
  --texto-3: #D3B3AD;       /* text-500 */
  --texto-4: #D3B3AD;
  --texto-fraco: #C09A94;

  --display: 'Anton', 'Anton Reserva', Impact, sans-serif;
  --corpo: 'Work Sans', 'Work Sans Reserva', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', 'IBM Plex Mono Reserva', ui-monospace, Menlo, monospace;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--texto); font-family: var(--corpo); line-height: 1.65; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--laranja-claro); }
a:hover { color: #FFFFFF; }
h1, h2, p { margin: 0; }
/* Evita palavra sozinha na última linha dos textos (navegadores atuais). */
p, li { text-wrap: pretty; }
strong { color: #FFFFFF; font-weight: 700; }
[hidden] { display: none !important; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.display { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; }
.mono { font-family: var(--mono); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.container { max-width: 1200px; margin: 0 auto; }
.destaque { color: var(--laranja-claro); }

/* ---------- Botão ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 60px; padding: 0 28px; border: 0; border-radius: 10px;
  background: var(--verde); color: #FFFFFF; font-family: var(--display); font-size: 19px;
  text-transform: uppercase; letter-spacing: .01em; text-decoration: none; text-align: center; line-height: 1.2;
  cursor: pointer; box-shadow: 0 14px 34px rgba(22, 163, 74, .30);
  transition: background .15s ease;
}
.btn:hover { background: var(--verde-hover); color: #FFFFFF; }
.btn:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
.btn:disabled { opacity: .75; cursor: progress; }

/* ---------- Barra do topo: vagas + contagem ---------- */
.barra {
  background: var(--vinho-barra); border-bottom: 1px solid var(--linha-2);
  padding: 10px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 26px;
}
.barra-aviso { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; color: #FFFFFF; }
.ponto { flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--laranja); }
.barra-vagas { display: flex; align-items: center; gap: 10px; }
.barra-trilho { width: 96px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.barra-trilho i { display: block; height: 100%; width: var(--vagas, 72%); border-radius: 999px; background: #FFFFFF; }
.barra-vagas .mono, .barra-contagem .mono { font-size: 11px; color: #FFFFFF; }
.barra-contagem { display: flex; align-items: center; gap: 12px; }
.barra-contagem .rotulo { color: var(--texto-2); }
.contador { display: flex; gap: 8px; }
.contador span { font-family: var(--display); font-size: 1.15rem; line-height: 1; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.contador small { font-family: var(--corpo); font-size: 11px; color: var(--texto-2); margin-left: 1px; }

/* ---------- Dobra 1 ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: 36px 24px 72px; background: var(--bg); }
.hero-fundo { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hero-poster, .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; transition: opacity .7s ease; }
.hero-video { opacity: 0; }
/* Mesmo véu da página da Pós: o vídeo fica atrás, tingido de vinho. */
.hero-veu {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 70% 50%, rgba(110, 22, 18, .45) 0%, rgba(110, 22, 18, .85) 100%),
    linear-gradient(180deg, rgba(110, 22, 18, .55) 0%, rgba(110, 22, 18, .35) 40%, rgba(110, 22, 18, .92) 100%);
}
.hero > .container { display: flex; flex-direction: column; gap: 32px; }
.logo { width: 180px; height: auto; }
.hero-grade { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }

.hero-copy { flex: 1 1 540px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.selos { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.pilula { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid var(--linha-2); border-radius: 999px; font-size: 11px; color: #ECD9D5; }
.pilula .ponto { width: 7px; height: 7px; }
.data-sublinhada { font-size: 21px; line-height: 1.1; color: #FFFFFF; border-bottom: 3px solid var(--laranja); padding-bottom: 3px; }
.hero h1 { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.14; color: #FFFFFF; max-width: 648px; }
.hero-sub { font-size: 1rem; line-height: 1.8; color: var(--texto-2); max-width: 600px; }

.beneficios { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.beneficios-titulo { font-size: 11px; color: var(--texto-2); }
.beneficios li { display: flex; align-items: flex-start; gap: 12px; font-size: .95rem; line-height: 1.65; color: var(--texto-2); }
.beneficios svg { flex: none; margin-top: 2px; }

.aviso { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; background: var(--vinho); border: 1px solid var(--linha-2); border-radius: 12px; max-width: 600px; }
.aviso .etiqueta { flex: none; padding: 4px 8px; border-radius: 6px; background: var(--laranja); font-size: 11px; color: #3A0A08; }
.aviso p { font-size: 14px; line-height: 1.7; color: var(--texto-2); }

/* Cartão da direita: vagas + formulário */
.cadastro {
  flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column;
  border-radius: 20px; overflow: hidden; border: 1px solid var(--linha); background: var(--card);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45); scroll-margin-top: 16px;
}

/* Objetivo de carreira: campo do formulário (opções de escolha única) */
.objetivo { margin: 2px 0 0; padding: 0; border: 0; min-width: 0; }
.objetivo legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 700; line-height: 1.4; color: #FFFFFF; }
.objetivo-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.objetivo label {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px;
  border: 1.5px solid var(--linha); border-radius: 10px; background: var(--card); cursor: pointer;
  font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--texto-2);
  transition: border-color .15s ease, background .15s ease;
}
.objetivo input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.objetivo label span { display: flex; align-items: center; }
.objetivo label span::before {
  content: ""; flex: none; width: 16px; height: 16px; margin-right: 10px; box-sizing: border-box;
  border-radius: 999px; border: 2px solid var(--texto-fraco); background: transparent;
}
.objetivo label:hover { border-color: var(--linha-2); }
.objetivo label:has(input:checked) { border-color: var(--laranja); background: rgba(232, 114, 42, .14); color: #FFFFFF; }
.objetivo input:checked + span::before { border: 5px solid var(--laranja); background: #FFFFFF; }
.objetivo label:has(input:focus-visible) { outline: 3px solid var(--laranja); outline-offset: 1px; }
.objetivo.invalido label { border-color: var(--laranja-claro); }
.objetivo .campo-erro { margin-top: 6px; }

.cadastro-corpo { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 12px; }
.vagas-caixa { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: var(--vinho); border: 1px solid var(--linha-2); border-radius: 12px; }
.vagas-numero { display: flex; align-items: baseline; gap: 10px; }
.vagas-numero .display { font-size: 32px; line-height: 1; color: #FFFFFF; }
.vagas-numero > span:last-child { font-size: 13.5px; font-weight: 700; color: #FFFFFF; }
.vagas-trilho { width: 100%; height: 12px; border-radius: 4px; background: #3A0A08; overflow: hidden; }
.vagas-trilho i { display: block; height: 100%; width: var(--vagas, 72%); background: repeating-linear-gradient(135deg, var(--laranja) 0, var(--laranja) 10px, var(--laranja-claro) 10px, var(--laranja-claro) 16px); }
.vagas-rodape { display: flex; justify-content: space-between; gap: 8px; }
.vagas-rodape .mono { font-size: 10px; color: var(--texto-4); }
.vagas-rodape .mono:last-child { color: #FFFFFF; }

.form-titulo { font-size: 25px; line-height: 1.1; color: #FFFFFF; }
.form { display: flex; flex-direction: column; gap: 12px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo input {
  width: 100%; height: 52px; padding: 0 14px; border: 1.5px solid var(--linha); border-radius: 10px;
  background: var(--card); color: var(--texto); font: 500 16px var(--corpo);
}
.campo input::placeholder { color: var(--texto-fraco); opacity: 1; }
.campo input:focus { outline: 3px solid var(--laranja); outline-offset: 1px; border-color: var(--laranja); }
.campo.invalido input { border-color: var(--laranja-claro); }
.campo-erro, .form-erro { font-size: 13px; font-weight: 700; color: var(--laranja-claro); }
.form .btn { width: 100%; }
.form-nota { font-size: 12px; color: var(--texto-fraco); text-align: center; }
.form-nota a { color: var(--texto-4); }


/* ---------- Dobra 2: programa ---------- */
.programa { padding: 88px 24px; background: var(--bg-2); border-top: 1px solid #5A2622; }
.programa > .container { display: flex; flex-direction: column; gap: 36px; }
.programa-topo { display: flex; flex-direction: column; gap: 16px; }
.programa-topo .data-sublinhada { font-size: 20px; }
.programa h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.15; color: #FFFFFF; }
.programa-topo p { max-width: 960px; font-size: 1rem; line-height: 1.8; color: var(--texto-3); }
.partes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.parte { display: flex; flex-direction: column; background: var(--card-2); border: 1px solid var(--linha); border-radius: 16px; overflow: hidden; }
.parte-arte {
  height: 200px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--linha);
  background-color: #4A0D0A; background-size: 20px 20px;
  background-image: linear-gradient(rgba(247, 163, 104, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(247, 163, 104, .07) 1px, transparent 1px);
}
.parte-arte svg { width: 100%; max-width: 300px; height: auto; }
.parte-texto { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 26px; }
.parte-texto .mono { font-size: 11px; color: var(--laranja-claro); }
.parte-texto h3 { margin: 0; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 21px; line-height: 1.2; color: #FFFFFF; }
.parte-texto p { font-size: 14px; line-height: 1.75; color: var(--texto-3); }
.parte-destaque { background: #7C1D16; border-color: rgba(232, 114, 42, .55); }
.parte-destaque .parte-arte {
  background-color: #5E120F; border-bottom-color: rgba(232, 114, 42, .55);
  background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
}
.parte-destaque .parte-texto .mono { color: #ECD9D5; }
.parte-destaque .parte-texto p { color: #F7E3D8; }
.programa-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.programa-cta .btn { min-height: 56px; font-size: 18px; }
.programa-cta p { font-size: 13px; color: var(--texto-4); }

/* ---------- Dobra 3: quem conduz ---------- */
.professor { padding: 88px 24px; background: var(--bg); }
.professor > .container { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.professor-foto { flex: 1 1 380px; min-width: 0; position: relative; height: 560px; border-radius: 20px; overflow: hidden; border: 1px solid var(--linha); background: var(--vinho); }
.professor-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.professor-foto::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: repeating-linear-gradient(135deg, var(--laranja) 0, var(--laranja) 14px, var(--bg) 14px, var(--bg) 22px); }
.professor-texto { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.professor-texto > .mono { font-size: 12px; color: var(--laranja-claro); }
.professor h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.1; color: #FFFFFF; }
.credenciais { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.credenciais li { padding: 8px 14px; border: 1px solid var(--linha); border-radius: 999px; background: var(--card-2); font-size: 13px; font-weight: 600; color: var(--texto); }
.professor-texto p { font-size: .97rem; line-height: 1.85; color: var(--texto-3); }
.professor-texto .lema { padding-left: 16px; border-left: 5px solid var(--laranja); font-size: 24px; line-height: 1.2; color: #FFFFFF; }

/* ---------- CTA final ---------- */
.cta-final { padding: 0 24px 88px; background: var(--bg); }
.cta-final > .container { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding: 28px; background: var(--vinho); border: 1px solid var(--linha-2); border-radius: 18px; }
.cta-final-texto { flex: 1 1 420px; display: flex; flex-direction: column; gap: 6px; }
.cta-final-texto .display { font-size: 24px; line-height: 1.15; color: #FFFFFF; }
.cta-final-texto p { font-size: 14px; line-height: 1.7; color: var(--texto-3); }

/* ---------- Dobras claras (programa, professor e CTA final) ----------
   O topo (vídeo + formulário) segue vinho; daqui pra baixo fundo branco, mais limpo. */
.programa, .professor, .cta-final {
  --claro-titulo: #2B0D0A;
  --claro-texto: #5A3B36;
  --claro-fraco: #7A5A54;
  --claro-acento: #B4470F;   /* laranja escurecido: legível em letra pequena no branco */
  --claro-linha: #EADCD7;
}
.programa { background: #FFFFFF; border-top: 0; }
.professor, .cta-final { background: #FAF7F5; }
.professor { border-top: 1px solid var(--claro-linha); }
.cta-final { margin-top: -1px; position: relative; }   /* evita a emenda de meio pixel entre as duas faixas claras */

.programa .pilula { border-color: var(--claro-linha); color: var(--claro-texto); }
.programa .data-sublinhada { color: var(--claro-titulo); }
.programa h2, .professor h2 { color: var(--claro-titulo); }
.programa .destaque, .professor .destaque { color: var(--claro-acento); }
.programa-topo p { color: var(--claro-texto); }

.parte { background: #FFFFFF; border-color: var(--claro-linha); box-shadow: 0 10px 30px rgba(74, 13, 10, .06); }
.parte-arte {
  background-color: #FBF6F3; border-bottom-color: var(--claro-linha);
  background-image: linear-gradient(rgba(110, 22, 18, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(110, 22, 18, .06) 1px, transparent 1px);
}
.parte-texto .mono { color: var(--claro-acento); }
.parte-texto h3 { color: var(--claro-titulo); }
.parte-texto p { color: var(--claro-texto); }
/* A parte 3 (reabertura da Pós) continua vinho: é o destaque da dobra. */
.parte-destaque { background: var(--bg); border-color: var(--bg); box-shadow: 0 14px 34px rgba(110, 22, 18, .25); }
.parte-destaque .parte-texto h3 { color: #FFFFFF; }
.programa-cta p { color: var(--claro-fraco); }
.programa-cta p strong { color: var(--claro-titulo); }

.professor-foto { border-color: var(--claro-linha); }
.professor-foto::after { background: repeating-linear-gradient(135deg, var(--laranja) 0, var(--laranja) 14px, #FAF7F5 14px, #FAF7F5 22px); }
.professor-texto > .mono { color: var(--claro-acento); }
.credenciais li { background: #FFFFFF; border-color: var(--claro-linha); color: var(--claro-titulo); }
.professor-texto p { color: var(--claro-texto); }
.professor-texto p strong { color: var(--claro-titulo); }
.professor-texto .lema { color: var(--claro-titulo); }

/* CTA final: faixa vinho sobre o fundo claro */
.cta-final > .container { background: var(--bg); border-color: var(--bg); box-shadow: 0 18px 40px rgba(110, 22, 18, .22); }
.cta-final-texto p { color: var(--texto-2); }

/* ---------- Rodapé ---------- */
.rodape { background: var(--bg-rodape); border-top: 1px solid var(--vinho); padding: 28px 24px; color: #C09A94; }
.rodape > .container { display: flex; flex-direction: column; gap: 8px; font-size: 12px; line-height: 1.75; }
.rodape-linha { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.rodape a { color: var(--texto-4); }

/* ---------- Celular ---------- */
@media (max-width: 760px) {
  /* Barra do topo enxuta: aviso + contagem (o % de vagas já aparece no cartão). */
  .barra { gap: 4px 14px; padding: 8px 12px; }
  .barra-aviso { font-size: 11px; letter-spacing: .04em; text-align: center; }
  .barra-vagas { display: none; }
  .contador span { font-size: 1rem; }

  /* Celular: data -> título -> FORMULÁRIO na primeira dobra; o resto do texto vem depois. */
  .hero { padding: 16px 16px 48px; }
  .hero > .container { gap: 14px; }
  .logo { width: 130px; }
  .hero-grade { flex-direction: column; align-items: stretch; gap: 14px; }
  .hero-grade > *, .hero-copy > * { flex: none; }
  .hero-copy { display: contents; }
  .hero-copy .selos { order: 1; }
  .hero h1 { order: 2; font-size: 1.6rem; line-height: 1.15; }
  .cadastro { order: 3; margin-top: 4px; }
  .hero-sub { order: 4; margin-top: 18px; font-size: .97rem; }
  .hero-beneficios { order: 5; }
  .hero-copy .aviso { order: 6; }
  .hero-copy .pilula { display: none; }   /* a barra do topo já diz "aula ao vivo e gratuita" */
  .data-sublinhada { font-size: 18px; }

  /* Cartão compacto: vagas numa faixa só */
  .cadastro-corpo { padding: 14px 14px 18px; gap: 10px; }
  .vagas-caixa { padding: 10px 12px; gap: 7px; }
  .vagas-numero .display { font-size: 26px; }
  .vagas-numero > span:last-child { font-size: 12.5px; }
  .vagas-trilho { height: 9px; }
  .form-titulo { font-size: 21px; }
  .form { gap: 10px; }
  .campo input { height: 50px; }
  .objetivo-lista { grid-template-columns: 1fr 1fr; gap: 6px; }
  .objetivo legend { font-size: 12.5px; margin-bottom: 6px; }
  .objetivo label { min-height: 46px; padding: 6px 9px; font-size: 12.5px; }
  .objetivo label span::before { width: 14px; height: 14px; margin-right: 7px; }
  .btn { font-size: 18px; padding: 0 18px; }
  .programa, .professor { padding: 64px 16px; }
  .partes { grid-template-columns: 1fr; }
  .professor-foto { flex-basis: 100%; height: 440px; }
  .professor-texto .lema { font-size: 21px; }
  .cta-final { padding: 0 16px 64px; }
  .cta-final > .container { padding: 22px 18px; }
  .cta-final .btn { width: 100%; }
  .rodape { padding: 24px 16px; }
}