/* Live de Biológicos: folha única de pre.html, privacidade.html e pos.html.
   Sem estilo inline: a CSP (style-src 'self') proíbe. Fontes servidas pelo próprio site. */

@font-face { font-family: "Montserrat"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fontes/montserrat-300.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fontes/montserrat-500.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fontes/montserrat-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fontes/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fontes/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Raleway"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fontes/raleway-700.woff2") format("woff2"); }

:root {
  /* Cores */
  --azul-profundo: #102e5d;
  --azul-kynetec: #153e81;
  --azul-claro: #1d68a8;
  --lima: #b5d400; /* uma vez na página: na primeira dobra, o "12h" */
  --papel: #f6f6f6;
  --branco: #ffffff;
  --nevoa: #bcc4d1;
  --fio-claro: #c9d3e1;
  --fio-escuro: rgba(188, 196, 209, 0.35);
  --dado-1: #e3eaf3; /* rampa de dados, degrau 1: fundo dos ícones da pauta */
  --alerta: #a4262c; /* usado só em erro de formulário */
  /* Texto sobre superfície clara: azul-kynetec. O azul-profundo é só fundo. */
  --texto: var(--azul-kynetec);
  --icone-erro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' fill='none' stroke='%23000' stroke-width='16'/%3E%3Cpath d='M128 80v56' stroke='%23000' stroke-width='16' stroke-linecap='round'/%3E%3Ccircle cx='128' cy='172' r='12'/%3E%3C/svg%3E");
  --icone-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6.5h18M3 12h18M3 17.5h18' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --icone-fechar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 5.5l13 13M18.5 5.5l-13 13' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");

  /* Escala tipográfica web, curta e fixa */
  --t-micro: 12px;
  --t-detalhe: 14px;
  --t-corpo: 16px;
  --t-apoio: 17px;
  --t-titulo-2: 20px;
  --t-titulo-1: 30px;
  --t-numero: 96px;
  --t-numero-dado: 96px; /* números de mercado: fixo em todas as larguras (entreletra −4,5%) */

  /* Espaço */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px; --e9: 96px;

  --raio-mascara: 14px;
  --pilula: 999px;
  --alvo: 48px;

  --fonte-titulo: "Montserrat", system-ui, sans-serif;
  --fonte-texto: "Poppins", system-ui, sans-serif;
  --fonte-rotulo: "Raleway", system-ui, sans-serif;
}
@media (min-width: 1024px) {
  :root { --t-apoio: 18px; --t-titulo-2: 22px; --t-titulo-1: 44px; --t-numero: 160px; }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; overflow-x: clip;
  font-family: var(--fonte-texto); font-size: var(--t-corpo); line-height: 1.55;
  color: var(--texto); background: var(--papel);
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, fieldset, figure, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
button, input { font: inherit; color: inherit; }
a { color: inherit; text-underline-offset: 3px; }
[hidden] { display: none !important; }

.moldura { width: min(1280px, 100% - 32px); margin-inline: auto; }
.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; }
.sem-quebra { white-space: nowrap; }

:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 2px; }
.escuro :focus-visible { outline-color: var(--branco); }
[tabindex="-1"]:focus { outline: none; }

/* Tipos */
.rotulo { font-family: var(--fonte-rotulo); font-weight: 700; font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.4; }
.prova { font-family: var(--fonte-titulo); font-weight: 500; font-size: var(--t-micro); letter-spacing: 0.09em; text-transform: uppercase; line-height: 1.4; }
.titulo-1 { font-family: var(--fonte-titulo); font-weight: 300; font-size: var(--t-titulo-1); line-height: 1.14; letter-spacing: -0.02em; }
.titulo-2 { font-family: var(--fonte-titulo); font-weight: 500; font-size: var(--t-titulo-2); line-height: 1.25; letter-spacing: -0.01em; }
.titulo-1 strong, .titulo-2 strong { font-weight: 600; }
.apoio { font-size: var(--t-apoio); line-height: 1.5; }
.detalhe { font-size: var(--t-detalhe); line-height: 1.5; }
.numero { font-family: var(--fonte-titulo); font-weight: 600; font-size: var(--t-numero); line-height: 0.86; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
/* Com a entreletra de −4,5%, a barra encosta no "1" seguinte: só esse par ganha folga. */
.numero .folga-barra { letter-spacing: 0.03em; }
.sobretitulo { font-family: var(--fonte-titulo); font-weight: 500; font-size: var(--t-detalhe); color: var(--nevoa); }

/* Faixas escuras: primeira dobra, mercado, fechamento */
.escuro { color: var(--branco); background: var(--azul-profundo); }
.faixa-data, .faixa-fechamento {
  background: radial-gradient(60% 80% at 0% 100%, rgba(29, 104, 168, 0.5), transparent 70%), var(--azul-profundo);
}
.faixa-data { position: relative; isolation: isolate; overflow: clip; padding-bottom: 72px; }
.faixa-data::after, .faixa-fechamento::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}
.sulcos {
  position: absolute; left: 0; right: 0; bottom: 0; height: 160px; z-index: -1; pointer-events: none; opacity: 0.1;
  background: url("../img/sulcos-branco.svg") 50% 100% / 1920px auto no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 60%); mask-image: linear-gradient(to bottom, transparent, #000 60%);
}
.onda { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 48px; }
/* Topo: logo à esquerda, menu da página à direita. O painel do menu abre por cima da primeira dobra. */
.topo { position: relative; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: var(--e4); padding-block: var(--e4); }
.topo img { height: 28px; width: auto; }
/* Privacidade: o logo é link para a LP. O alvo ganha 44 px de altura; a margem negativa devolve o espaço, e o topo não cresce. */
[data-pagina="privacidade"] .topo a { display: inline-flex; align-items: center; min-height: 44px; margin-block: calc(-1 * var(--e2)); }

/* Botão sanduíche: alvo de 44 px; o ícone de 24 px alinha com a borda da moldura. Aberto, vira um X. */
.menu-botao {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; padding: 0;
  border: 0; border-radius: var(--pilula); background: transparent; color: var(--branco); cursor: pointer;
}
.menu-botao::before {
  content: ""; width: 24px; height: 24px; background: currentColor;
  -webkit-mask: var(--icone-menu) center / contain no-repeat; mask: var(--icone-menu) center / contain no-repeat;
}
.menu-botao[aria-expanded="true"]::before { -webkit-mask-image: var(--icone-fechar); mask-image: var(--icone-fechar); }
.menu-botao:hover { background: rgba(255, 255, 255, 0.1); }

/* Painel do menu: papel branco sobre a faixa azul, fio claro e raio dos campos; sem sombra. */
.menu {
  position: absolute; top: calc(100% - var(--e2)); left: 0; right: 0;
  padding: var(--e1) var(--e4); border: 1px solid var(--fio-claro); border-radius: var(--raio-mascara);
  background: var(--branco); color: var(--azul-kynetec);
}
.menu li + li { border-top: 1px solid var(--fio-claro); }
.menu a { display: flex; align-items: center; min-height: 48px; margin-inline: calc(-1 * var(--e2)); padding-inline: var(--e2); font-weight: 500; text-decoration: none; }
.menu a:hover { text-decoration: underline; }
.escuro .menu :focus-visible { outline-color: var(--azul-claro); outline-offset: -2px; } /* anel dentro da linha de 48 px: não encosta no texto nem cruza o fio */
@media (prefers-reduced-motion: no-preference) { .menu:not([hidden]) { animation: menu-entra 200ms ease-out; } }
@keyframes menu-entra { from { opacity: 0; transform: translateY(-8px); } }

/* Primeira dobra (só pre.html): ocupa a altura da tela e leva só título, apoio, data e botão.
   A foto aérea da lavoura é a matéria da dobra e nenhum desenho passa atrás de texto.
   O movimento é discreto e só existe sem prefers-reduced-motion. */
.faixa-heroi { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.heroi { flex: 1 0 auto; display: flex; flex-direction: column; }
.heroi-texto { display: grid; gap: var(--e4); }
.heroi .titulo-1 { max-width: 22em; text-wrap: balance; }
/* Duas frases. A afirmação abre a própria linha; na pergunta, as duas orações quebram inteiras e "a sua" nunca se separa. */
.heroi .titulo-1 .frase { display: inline-block; }
.heroi .titulo-1 .frase-abre { display: block; }
.heroi .titulo-1 strong { white-space: nowrap; }
/* Abaixo de 375 px o título ocupa cinco linhas. Com 28 px, título, apoio, data e botão cabem inteiros na tela de 320 x 640
   e de 360 x 640. De 375 px em diante valem os 30 px. */
@media (max-width: 374.98px) { .heroi .titulo-1 { font-size: 28px; } }
.heroi .apoio { max-width: 46ch; }
.heroi-acao { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e4); }
.quando { font-family: var(--fonte-titulo); font-weight: 500; font-size: var(--t-titulo-2); line-height: 1.3; font-variant-numeric: tabular-nums; }
.quando .hora { color: var(--lima); }
.quando .fuso { font-family: var(--fonte-texto); font-weight: 400; font-size: var(--t-detalhe); color: var(--nevoa); white-space: nowrap; }

/* 1 · Território: a lavoura aérea recortada pela curva da série (mascara-recorte-serie e linha-serie-branca, caminhos
   copiados nos clipPath e nas linhas de pre.html). A faixa da foto começa atrás do topo e absorve a altura que sobra.
   Abaixo de 768 px vale o trecho final da curva (a subida); a partir de 768, a curva inteira, mais achatada. */
.heroi-territorio { padding-bottom: var(--e2); }
.territorio { position: relative; flex: 1 1 auto; min-height: 160px; margin-top: -76px; }
.recortes { position: absolute; }
.territorio-foto {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 30%; clip-path: url(#recorte-serie-estreito);
}
/* Véu azul no alto da foto: o logo e o menu ficam sobre azul, não sobre a lavoura.
   O véu segura 0,74 até o fim do topo (76 px) e some até 160 px. O logo fica acima de 4,5:1 no pior pixel
   também com a versão de 1200w (DSF 3). */
.territorio::before {
  content: ""; position: absolute; z-index: 1; inset: 0 0 auto; height: 160px; pointer-events: none;
  background: linear-gradient(rgba(16, 46, 93, 0.86), rgba(16, 46, 93, 0.74) 76px, rgba(16, 46, 93, 0));
}
.territorio-linha { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; }
.territorio-linha.largo { display: none; }
.heroi-corpo { display: grid; gap: var(--e6); padding-top: var(--e3); }

/* Movimento: a foto acende e a linha se desenha. */
@media (prefers-reduced-motion: no-preference) {
  .territorio-foto { animation: foto-entra 1600ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .territorio-linha { animation: linha-desenha 1400ms 300ms cubic-bezier(0.45, 0, 0.2, 1) both; }
}
@keyframes foto-entra { from { opacity: 0; scale: 1.04; } }
@keyframes linha-desenha { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* Faixa do formulário (papel) */
.faixa-form { padding-block: var(--e6) var(--e8); scroll-margin-top: var(--e4); }
.faixa-form > header { display: grid; gap: var(--e2); margin-bottom: var(--e5); }
.faixa-form > header .detalhe { max-width: 62ch; }
.campos { display: grid; gap: var(--e4); }
.campo { display: grid; gap: var(--e1); align-content: start; min-width: 0; }
.campo label { font-weight: 500; line-height: 1.4; }
.campo input {
  width: 100%; min-height: var(--alvo); font-size: var(--t-corpo);
  border: 1.5px solid #737474; border-radius: var(--raio-mascara); background: var(--branco); padding: 0 var(--e4);
}
.campo input::placeholder { color: var(--azul-claro); opacity: 1; } /* texto de apoio claro: 5,85:1 sobre branco */
/* Durante o envio os campos travam, mas o que foi digitado continua legível (sem esmaecer). */
form[data-estado="enviando"] .campo input { cursor: progress; }
.escolha input:disabled, .escolha input:disabled + label { cursor: progress; }
.campo input[aria-invalid="true"] { border: 2px solid var(--alerta); }
.ajuda { font-size: var(--t-detalhe); line-height: 1.45; }
.erro-campo {
  display: flex; gap: var(--e2); align-items: flex-start;
  color: var(--alerta); font-size: var(--t-detalhe); font-weight: 500; line-height: 1.45;
}
/* Um ícone só para os três avisos de erro: campo, resumo e aviso do servidor. */
.erro-campo::before, .resumo-erros > p::before, .aviso-form::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; background: currentColor;
  -webkit-mask: var(--icone-erro) center / contain no-repeat; mask: var(--icone-erro) center / contain no-repeat;
}

/* Resumo de erros: recebe o foco no envio e leva a cada campo. */
.resumo-erros {
  display: grid; gap: var(--e1); margin-bottom: var(--e5); padding: var(--e4) var(--e4) var(--e2);
  border-radius: var(--raio-mascara); background: var(--branco); border: 1.5px solid var(--alerta); color: var(--alerta);
  scroll-margin-top: var(--e5);
}
.resumo-erros > p { display: flex; gap: var(--e2); align-items: flex-start; font-weight: 600; line-height: 1.45; }
.resumo-erros ul { display: grid; padding-left: 26px; }
.resumo-erros a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-detalhe); font-weight: 500; color: var(--alerta); }
.resumo-erros:focus-visible, .resumo-erros:focus { outline: 2px solid var(--azul-claro); outline-offset: 4px; } /* anel de foco do sistema, distinto da borda de erro */

.escolhas { display: grid; gap: var(--e1); margin-inline-start: -11px; } /* a caixa de 22 px alinha com a borda dos campos; o alvo segue com 44 px */
.escolha { display: grid; grid-template-columns: 44px 1fr; column-gap: var(--e2); align-items: start; }
.escolha input {
  appearance: none; -webkit-appearance: none; margin: 0; width: 44px; height: 44px; border: 0; border-radius: 10px; cursor: pointer;
  background: center / 44px 44px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Crect x='11' y='11' width='22' height='22' rx='5' fill='white' stroke='%23737474' stroke-width='2'/%3E%3C/svg%3E");
}
.escolha input:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Crect x='10' y='10' width='24' height='24' rx='6' fill='%23153e81'/%3E%3Cpath d='M16 22.5l4.2 4.2L28.5 18' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.escolha input[aria-invalid="true"]:not(:checked) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Crect x='11' y='11' width='22' height='22' rx='5' fill='white' stroke='%23a4262c' stroke-width='2.5'/%3E%3C/svg%3E"); }
.escolha label { font-size: var(--t-detalhe); line-height: 1.5; padding-top: 11px; cursor: pointer; }
.escolha label a { font-weight: 500; }
.escolha .erro-campo { grid-column: 2; margin-top: var(--e1); }

.base-form { display: grid; gap: var(--e5); margin-top: var(--e5); }
.envio { display: grid; gap: var(--e4); align-content: start; }
.envio .botao { width: 100%; }

/* Espaço do Cloudflare Turnstile: 300 x 65 no tamanho normal e 150 x 140 no compacto, que o /js/turnstile-tamanho.js liga
   (data-size="compact") abaixo de 332 px de tela, onde o normal passaria do cartão. */
.cf-turnstile { width: 300px; max-width: 100%; min-height: 65px; }
.cf-turnstile[data-size="compact"] { width: 150px; min-height: 140px; }

/* Isca contra robôs: fora da tela, nunca visível */
.isca { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Aviso do formulário (região de status) */
.aviso-form:empty { display: none; }
.aviso-form {
  display: flex; gap: var(--e2); align-items: flex-start;
  border-radius: var(--raio-mascara); padding: var(--e4); background: var(--branco);
  border: 1.5px solid var(--alerta); color: var(--alerta); font-size: var(--t-detalhe); font-weight: 500; line-height: 1.5;
}
.aviso-form a { font-weight: 600; }

/* Botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e3);
  min-height: 52px; padding: 0 var(--e6); border: 0; border-radius: var(--pilula);
  background: var(--azul-kynetec); color: var(--branco);
  font-family: var(--fonte-texto); font-weight: 500; font-size: var(--t-corpo); text-decoration: none; cursor: pointer;
}
.botao:hover { background: var(--azul-profundo); }
.botao.claro { background: var(--branco); color: var(--azul-kynetec); }
.botao.claro:hover { background: var(--papel); }
.botao.secundario { background: transparent; color: var(--azul-kynetec); box-shadow: inset 0 0 0 1.5px var(--azul-kynetec); }
.botao.secundario:hover { background: var(--branco); }
.botao[aria-disabled="true"] { cursor: progress; }
.botao .giro { width: 18px; height: 18px; display: none; }
.botao[aria-busy="true"] .giro { display: block; }
@media (prefers-reduced-motion: no-preference) { .botao[aria-busy="true"] .giro { animation: giro 0.9s linear infinite; } }
@keyframes giro { to { transform: rotate(360deg); } }

.link-texto {
  display: inline-flex; align-items: center; min-height: 44px; font-weight: 500;
  text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; cursor: pointer;
}

/* Link que é a única ação do bloco: alvo de 44 px garantido pela caixa, não pelas métricas da fonte.
   A margem negativa devolve à linha a entrelinha do parágrafo: a caixa avança sobre as linhas vizinhas,
   como fazia o padding, sem abrir espaço só na linha do link (sem a unidade lh, a margem cai e só a linha cresce).
   position: relative pinta a caixa depois do texto do parágrafo, e os 44 px inteiros recebem o toque. */
.link-alvo { position: relative; display: inline-flex; align-items: center; min-height: 44px; margin-block: calc((1lh - 44px) / 2); font-weight: 500; }

/* Confirmação e estados terminais (inscrições encerradas, código expirado) */
.sucesso, .terminal { display: grid; gap: var(--e4); max-width: 720px; }
.sucesso h2, .terminal h2 { scroll-margin-top: var(--e6); }
.acoes { display: flex; flex-wrap: wrap; gap: var(--e4) var(--e5); align-items: center; }
.sucesso .copiar { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--e3); }
.sucesso [data-copiado] { font-size: var(--t-detalhe); color: var(--azul-kynetec); }
.copia-manual input {
  width: 100%; max-width: 480px; min-height: var(--alvo); padding: 0 var(--e4); font-size: var(--t-corpo);
  border: 1.5px solid #737474; border-radius: var(--raio-mascara); background: var(--branco);
}
[data-sucesso-email] { overflow-wrap: anywhere; }
html[data-encerrada] [data-oculto-inscrito] { display: none !important; }

/* Seções de leitura */
.secao { padding-block: var(--e8); }

/* Mercado: dois números sobre azul, com a ilustração de microbiologia */
.faixa-mercado { position: relative; isolation: isolate; overflow: clip; display: flex; flex-direction: column; }
.faixa-mercado .ilustracao {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 72% 50%;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.mercado { display: grid; gap: var(--e6); padding-bottom: var(--e8); margin-top: calc(-1 * var(--e5)); }
.numeros { display: grid; gap: var(--e6); }
.dado { display: grid; gap: var(--e3); padding-top: var(--e4); border-top: 1px solid var(--fio-escuro); }
.numero-dado {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--e2); row-gap: var(--e1);
  font-family: var(--fonte-titulo); font-weight: 600; font-size: var(--t-numero-dado);
  line-height: 0.9; letter-spacing: -0.045em; font-variant-numeric: tabular-nums;
}
/* "ao ano" fica inteiro: ao lado do número quando cabe, logo abaixo quando não cabe. */
.numero-dado .unidade { font-size: var(--t-titulo-2); font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; white-space: nowrap; }
.dado .prova { color: var(--nevoa); }
.mercado .apoio { max-width: 60ch; }

/* Pauta e apresentadora */
.programa { display: grid; gap: var(--e7); }
.programa-conteudo { display: grid; gap: var(--e5); align-content: start; }
.pauta { display: grid; }
.pauta li { display: grid; grid-template-columns: 40px 1fr; gap: var(--e4); align-items: center; padding-block: var(--e4); border-top: 1px solid var(--fio-claro); }
.pauta li:last-child { border-bottom: 1px solid var(--fio-claro); }
.pauta img { width: 40px; height: 40px; }
.pauta span { font-size: var(--t-apoio); line-height: 1.45; }
.apresentadora { display: grid; gap: var(--e2); align-content: start; padding-top: var(--e4); border-top: 2px solid var(--azul-kynetec); }
.apresentadora-rotulo { font-size: var(--t-detalhe); font-weight: 500; }
/* Cada pessoa é uma linha, separada da outra pelo fio claro, o mesmo da pauta ao lado. */
.pessoa { display: grid; row-gap: var(--e1); align-content: start; padding-block: var(--e4); }
.pessoa:first-child { padding-top: var(--e2); }
.pessoa + .pessoa { border-top: 1px solid var(--fio-claro); }
/* Sem a foto, a linha fica só com texto e nada sobra. */
.pessoa:has(.pessoa-foto) { grid-template-columns: 64px 1fr; column-gap: var(--e4); align-items: center; }
.pessoa-foto { grid-row: span 2; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }

/* Como assistir: faixa branca. A régua é o único desenho da faixa */
.faixa-assistir { background: var(--branco); }
.assistir { display: grid; gap: var(--e6); }
.assistir .nota { max-width: 62ch; }

/* Régua do tempo: um fio limpo com quatro pontos, que termina na data.
   Cada momento desenha o fio do seu ponto até o ponto do seguinte; o último não tem fio depois.
   Celular: fio vertical à esquerda. A partir de 1024: fio horizontal, quatro momentos lado a lado. */
.regua-tempo { display: grid; gap: var(--e5); padding-left: 40px; }
.momento { position: relative; display: grid; gap: var(--e1); align-content: start; }
.momento::before {
  content: ""; position: absolute; left: -35px; top: 11px; width: 2px; height: calc(100% + var(--e5));
  background: var(--azul-kynetec);
}
.momento::after {
  content: ""; position: absolute; left: -40px; top: 5px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--branco); box-shadow: inset 0 0 0 2px var(--azul-kynetec);
}
.momento-quando { font-family: var(--fonte-titulo); font-weight: 600; font-size: var(--t-corpo); line-height: 1.4; }
.momento-texto { font-size: var(--t-apoio); line-height: 1.45; max-width: 34ch; }
.momento-final .momento-quando { font-size: var(--t-titulo-2); line-height: 1.25; }
.momento-final::before { content: none; }
.momento-final::after { left: -42px; top: 4px; width: 16px; height: 16px; background: var(--azul-kynetec); box-shadow: none; }

/* Perguntas frequentes */
.faq { display: grid; gap: var(--e6); }
.perguntas { border-bottom: 1px solid var(--fio-claro); }
.perguntas details { border-top: 1px solid var(--fio-claro); }
.perguntas summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--e4);
  min-height: 56px; padding-block: var(--e3); cursor: pointer; list-style: none;
  font-weight: 500; font-size: var(--t-corpo); line-height: 1.4;
}
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after {
  content: ""; flex: none; width: 20px; height: 20px; background: var(--azul-kynetec);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h12M10 4v12' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h12M10 4v12' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.perguntas details[open] summary::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h12' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h12' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.perguntas details p { padding-bottom: var(--e4); max-width: 62ch; }

/* Fechamento e rodapé */
.faixa-fechamento { position: relative; isolation: isolate; overflow: clip; padding-top: 72px; }
.onda-topo { position: absolute; left: 0; right: 0; top: -1px; width: 100%; height: 48px; }
.fechamento { display: grid; gap: var(--e5); justify-items: start; padding-block: var(--e7) var(--e7); }
.fechamento .titulo-1 { max-width: 20ch; }
.rodape {
  display: flex; flex-wrap: wrap; column-gap: var(--e5); align-items: center;
  padding-block: var(--e4) 104px; border-top: 1px solid var(--fio-escuro); font-size: var(--t-detalhe); color: var(--nevoa);
}
.rodape > * { display: inline-flex; align-items: center; min-height: 44px; }
.rodape a { color: var(--branco); }

/* Barra fixa do celular: a data sempre à vista até o formulário aparecer */
.barra-data {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  padding: var(--e3) var(--e4) calc(var(--e3) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--fio-escuro); transition: transform 200ms ease-out;
}
.barra-data p { font-size: var(--t-detalhe); line-height: 1.3; }
.barra-data strong { display: block; font-family: var(--fonte-titulo); font-weight: 600; font-size: var(--t-corpo); }
.barra-data .botao { padding: 0 var(--e4); min-height: 48px; white-space: nowrap; }
.barra-data[data-oculta] { transform: translateY(110%); visibility: hidden; transition: transform 200ms ease-out, visibility 0s 200ms; }
/* Foco do teclado acima da barra: a rolagem por foco para a 8 px da barra. --altura-barra vem de js/inscricao.js;
   sem script, a barra fica oculta e não há o que compensar. Só no celular: a partir de 768 a barra não existe. */
@media (max-width: 767px) { html { scroll-padding-bottom: calc(var(--altura-barra, 0px) + var(--e2)); } }
html[data-inscrito] [data-oculto-inscrito] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .barra-data, .barra-data[data-oculta] { transition: none; } }

/* Página do estudo, depois da live */
.faixa-estudo .estudo { position: relative; display: grid; gap: var(--e4); justify-items: start; padding-bottom: var(--e4); }
.faixa-estudo .estudo > * { max-width: 40rem; }
.faixa-estudo .titulo-1 { margin-top: var(--e2); }
.faixa-estudo .prazo { font-size: var(--t-detalhe); font-weight: 500; color: var(--branco); }
.faixa-estudo .botao { margin-top: var(--e3); }
.faixa-estudo .apoio a { color: var(--branco); }
.faixa-estudo .ilustracao { display: none; }
.codigo-campos { display: grid; gap: var(--e4); }
.sem-codigo { display: grid; gap: var(--e7); padding-bottom: var(--e8); }
.sem-codigo > div { display: grid; gap: var(--e3); justify-items: start; align-content: start; padding-top: var(--e4); border-top: 1px solid var(--fio-claro); }
.sem-codigo .detalhe { max-width: 52ch; }
/* Código encerrado: o servidor já tirou o formulário, o apoio e a seção 2.5 do HTML. Sem eles, a primeira dobra e o rodapé
   viram um bloco azul só, da altura da tela. */
body:has([data-codigo-encerrado]) { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
body:has([data-codigo-encerrado]) main { flex: 1 0 auto; display: flex; flex-direction: column; }
body:has([data-codigo-encerrado]) .faixa-estudo { flex: 1 0 auto; }
body:has([data-codigo-encerrado]) .onda,
body:has([data-codigo-encerrado]) .onda-topo { display: none; }
body:has([data-codigo-encerrado]) .faixa-fechamento { padding-top: 0; }
/* Rodapé sem a barra fixa do celular embaixo: na página do estudo e depois da inscrição. */
.so-rodape .rodape, html[data-inscrito] .rodape { padding-bottom: var(--e6); }

/* Aviso de privacidade (privacidade.html): texto corrido sobre o papel, numa coluna de leitura. O logo do topo leva à página da live. */
.aviso-pagina { padding-block: var(--e7) var(--e8); }
#aviso { display: grid; gap: var(--e4); max-width: 46rem; }
#aviso h2 { margin-top: var(--e5); }
#aviso strong { font-weight: 600; }

/* Seções de pre.html. Classes só desta página: pos.html usa .faixa-form e .faixa-fechamento sem estes complementos. */

/* Inscrição: campo de grãos com o formulário num cartão branco. */
.campo-graos { padding-block: var(--e7); background: var(--papel) url("../img/graos-claro.svg") 50% 0 / 480px auto repeat; }
.campo-graos > .faixa-form { width: 100%; padding: var(--e6) var(--e4) var(--e7); background: var(--branco); }

/* Pauta: os ícones do sistema num círculo dado-1. */
.pauta li { grid-template-columns: 56px 1fr; }
.pauta img { width: 56px; height: 56px; padding: var(--e3); border-radius: 50%; background: var(--dado-1); }

/* Perguntas: faixas de colheita atrás do título. No celular, uma faixa no alto da seção que some antes da primeira pergunta. */
.faq { position: relative; isolation: isolate; }
.faq::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: calc((100% - 100vw) / 2); right: calc((100% - 100vw) / 2); top: 0; height: calc(var(--e8) + var(--t-titulo-1) * 1.14 + var(--e5));
  background: url("../img/faixas-colheita-claro.svg") 0 0 / 480px auto repeat-x;
  -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent); mask-image: linear-gradient(to bottom, #000 35%, transparent);
}

/* Fechamento: o relevo do Brasil à direita, esmaecendo antes do rodapé. Abaixo de 768 px não há lugar sem texto: fica fora. */
.com-mapa .mapa-relevo { display: none; }

@media (min-width: 768px) {
  .campos { grid-template-columns: 1fr 1fr; }
  .envio { grid-template-columns: 1fr; }
  .barra-data { display: none; }
  .rodape { padding-bottom: var(--e6); }
  /* Os dois números dividem as mesmas linhas: legendas e fontes alinhadas entre si. */
  /* Colunas iguais, mas nunca mais estreitas que o número: em 1024 o "+281%" pede 263 px e a metade dá 255. */
  .numeros { grid-template-columns: repeat(2, minmax(min-content, 1fr)); grid-template-rows: repeat(3, auto); column-gap: var(--e6); row-gap: 0; }
  .dado { grid-row: span 3; grid-template-rows: subgrid; }
  .codigo-campos { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .codigo-campos > .campo { grid-column: span 6; }

  .territorio-foto { clip-path: url(#recorte-serie-largo); }
  .territorio-linha.largo { display: block; }
  .territorio-linha.estreito { display: none; }

  .campo-graos { padding-block: var(--e8); }
  /* Laterais de 32 px até 1023: em 768 cada coluna fica com 312 px, e o e-mail de exemplo cabe inteiro. */
  .campo-graos > .faixa-form { width: min(1280px, 100% - 64px); padding: var(--e7) var(--e6); border-radius: var(--raio-mascara); }
  .com-mapa .mapa-relevo {
    display: block; position: absolute; z-index: -1; pointer-events: none; top: 40px; right: -40px; width: 360px; height: auto; max-width: none; opacity: 0.4;
    -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 85%); mask-image: linear-gradient(to bottom, #000 45%, transparent 85%);
  }
}

@media (min-width: 1024px) {
  .faixa-data { padding-bottom: var(--e9); }
  .onda, .onda-topo { height: 72px; }
  .topo { padding-block: var(--e5); }
  .topo img { height: 32px; }
  .menu { left: auto; width: 320px; }
  .secao { padding-block: var(--e9); }

  .heroi-texto { gap: var(--e5); }
  .territorio { min-height: 300px; margin-top: -92px; }
  /* Topo de 92 px: o véu desce e escurece um pouco mais, para o logo ficar acima de 4,5:1 na faixa clara da lavoura. */
  .territorio::before { height: 240px; background: linear-gradient(rgba(16, 46, 93, 0.86), rgba(16, 46, 93, 0)); }
  .heroi-corpo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: var(--e8); padding-top: var(--e4); }
  /* O título passa sobre as duas colunas (até 22em) e a afirmação fica numa linha própria. Apoio à esquerda e data com botão
     à direita, alinhados pelo pé. O título fica em três linhas. O bloco do texto não tem movimento, então display: contents
     não tira nada. */
  .heroi-territorio .heroi-corpo { row-gap: var(--e5); }
  .heroi-territorio .heroi-texto { display: contents; }
  .heroi-territorio .titulo-1 { grid-column: 1 / -1; }
  .heroi-territorio .apoio { grid-column: 1; }
  .heroi-territorio .heroi-acao { grid-column: 2; grid-row: 2; }

  /* Duas linhas, como na página do estudo: o e-mail aparece inteiro antes do envio. */
  .campos { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e4); }
  .campos > .campo { grid-column: span 4; }
  .campos > .campo:nth-child(1) { grid-column: span 5; }
  .campos > .campo:nth-child(2) { grid-column: span 7; }
  .base-form { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--e7); align-items: start; }

  .faixa-mercado { display: block; }
  .faixa-mercado .ilustracao {
    position: absolute; top: 0; right: 0; z-index: -1; width: 50%; height: 100%; aspect-ratio: auto; object-position: 30% 50%;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 45%); mask-image: linear-gradient(to right, transparent, #000 45%);
  }
  .mercado { margin-top: 0; padding-block: var(--e9); grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--e8); }
  .mercado > * { grid-column: 1; }

  .programa { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--e8); }

  /* Régua horizontal: a última coluna se ajusta ao rótulo da data, que não quebra.
     Os momentos dividem as duas linhas (subgrid): rótulos na mesma linha, textos alinhados pelo topo. */
  .regua-tempo { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; grid-template-rows: auto auto; column-gap: var(--e6); row-gap: 0; padding-left: 0; padding-top: 40px; }
  .momento { grid-row: span 2; grid-template-rows: subgrid; row-gap: var(--e1); }
  .momento-quando { align-self: end; }
  .momento-final .momento-quando { white-space: nowrap; }
  .momento::before { left: 6px; top: -29px; width: calc(100% + var(--e6)); height: 2px; }
  .momento::after { left: 0; top: -34px; }
  .momento-final::after { left: -2px; top: -36px; }
  .apresentadora { margin-top: calc(var(--t-titulo-1) * 1.14 + var(--e5)); }
  .faq { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--e8); align-items: start; }
  /* A textura vira a coluna do título: da borda esquerda até perto das perguntas, na altura da seção, esmaecendo para a direita. */
  .faq::before {
    right: auto; width: calc((100vw - 100%) / 2 + (100% - var(--e8)) * 5 / 12 + var(--e5)); height: auto; bottom: 0;
    background-size: 560px auto; background-repeat: repeat;
    -webkit-mask-image: linear-gradient(to right, #000 35%, transparent), linear-gradient(to bottom, #000 60%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, #000 35%, transparent), linear-gradient(to bottom, #000 60%, transparent);
    mask-composite: intersect;
  }
  .fechamento { grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding-block: var(--e8) var(--e7); }
  .campo-graos { padding-block: var(--e9); }
  .campo-graos > .faixa-form { padding: var(--e8); }
  /* Com o mapa à direita, título e botão ficam empilhados à esquerda. */
  .com-mapa .fechamento { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .com-mapa .mapa-relevo { right: max(0px, (100% - 1280px) / 2); width: 420px; opacity: 0.45; }

  .codigo-campos > .campo { grid-column: span 3; }
  .codigo-campos > .campo:nth-child(1) { grid-column: span 5; }
  .codigo-campos > .campo:nth-child(2) { grid-column: span 7; }
  .faixa-estudo .ilustracao {
    display: block; position: absolute; top: 0; right: 0; z-index: -1; width: 48%; height: 100%; object-fit: cover; object-position: 30% 50%;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 50%); mask-image: linear-gradient(to right, transparent, #000 50%);
  }
  .faixa-estudo .estudo { padding-block: var(--e7) var(--e8); }
  .faixa-estudo .estudo > * { max-width: 44rem; }
  .sem-codigo { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e8); }
}