/* ============================================================
   VagaTrans — home (landing)
   Carregada só nesta página.

   Cor: a paleta base do Bloco 5 é sóbria de propósito (roxo profundo,
   acentos contidos). Aqui ela ganha um **espectro** ancorado na bandeira
   trans: o azul e o rosa continuam sendo as bordas do gradiente, e as cores
   entre eles são a ponte. É a assinatura do projeto levada ao extremo, não
   uma bandeira diferente.

   Movimento: rolagem animada por **CSS scroll-driven animations**, sem uma
   linha de JavaScript e sem biblioteca externa. Onde o navegador não
   suportar, o conteúdo simplesmente aparece pronto — nunca some. Tudo
   colapsa sob `prefers-reduced-motion: reduce`.
   ============================================================ */

:root {
  /* Espectro: bordas na bandeira trans (#5BCEFA azul, #F5A9B8 rosa), com o
     violeta da marca fazendo a travessia entre elas. */
  --espectro: linear-gradient(90deg,
    #5BCEFA 0%, #63B3F5 18%, #8B7BE8 38%,
    #A855C9 55%, #E879A8 75%, #F5A9B8 90%, #FDBA74 100%);
  --espectro-suave: linear-gradient(120deg,
    rgba(91,206,250,.16), rgba(168,85,201,.14), rgba(245,169,184,.18));
  --violeta-noite: #2B0E3D;
}

/* --- barra de progresso de rolagem -------------------------------------
   Fica no topo e cresce conforme a página desce. É decorativa e por isso
   `aria-hidden`, mas cumpre uma função real: dizer o quanto falta. */

.progresso-rolagem {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  height: 4px; z-index: 90;
  background: var(--espectro);
  transform-origin: 0 50%;
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .progresso-rolagem {
      transform: scaleX(0);
      animation: progredir linear both;
      animation-timeline: scroll(root block);
    }
  }
}
@keyframes progredir { to { transform: scaleX(1); } }

/* --- revelação na rolagem ----------------------------------------------
   Padrão: visível. A animação é enriquecimento, nunca requisito — se o
   navegador não suportar `view()`, ninguém fica com página em branco. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .revela {
      animation: revelar linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 28%;
    }
    .revela-lento { animation-range: entry 0% cover 40%; }
  }
}

@keyframes revelar {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

/* --- 1. hero imersivo ---------------------------------------------------
   Único bloco escuro da página (fora a faixa final). É deliberado: a troca
   de tema acontece uma vez, na abertura, e não fica alternando a cada
   seção. */

.hero-x {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--violeta-noite);
  color: #fff;
  padding-block: var(--space-16) var(--space-16);
}

.hero-x-fundo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .55;
}

/* Véu que garante contraste do texto sobre a imagem. Sem ele o branco
   flutuaria sobre áreas claras da arte e falharia em AA. */
.hero-x::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, var(--violeta-noite) 18%, rgba(43,14,61,.88) 52%, rgba(43,14,61,.74) 100%);
}

.hero-x-grade { display: grid; gap: var(--space-12); position: relative; }

@media (min-width: 940px) {
  .hero-x-grade { grid-template-columns: 6.5fr 5fr; gap: var(--space-16); align-items: center; }
  .hero-x { padding-block: calc(var(--space-16) + var(--space-8)); }
}

.hero-x h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1.02;
  letter-spacing: -.025em;
  color: #fff;
  margin-bottom: var(--space-6);
  text-wrap: balance;
}

/* A palavra que carrega o espectro. `background-clip` no texto exige
   fallback: se não pintar, a cor sólida clara continua legível. */
.gradiente-texto {
  color: var(--accent-sky);
  background: var(--espectro);
  -webkit-background-clip: text;
  background-clip: text;
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .gradiente-texto { color: transparent; }
}

.hero-x-lead {
  font-size: clamp(1.0625rem, 1.7vw, 1.3125rem);
  color: rgba(255,255,255,.88);
  max-width: 46ch;
  margin-bottom: var(--space-8);
}

.hero-x .hero-acoes { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Aviso de cadastro fechado: informa sem gritar. Fica abaixo dos botões
   porque explica por que um deles mudou, e não substitui a chamada. */
.hero-x-aviso {
  margin-top: var(--space-5);
  max-width: 46ch;
  font-size: .9375rem;
  line-height: 1.55;
  color: rgba(255,255,255,.82);
  border-inline-start: 3px solid rgba(255,255,255,.35);
  padding-inline-start: var(--space-4);
}

.btn-grande { padding: var(--space-4) var(--space-6); font-size: 1.0625rem; white-space: nowrap; }

/* Botão claro sobre fundo escuro: contraste conferido nos dois sentidos. */
.btn-claro {
  background: #fff; color: var(--violeta-noite);
  border: 2px solid #fff; font-weight: 700;
}
.btn-claro:hover { background: var(--brand-violet-soft); color: var(--violeta-noite); }

.btn-contorno {
  background: transparent; color: #fff;
  border: 2px solid rgba(255,255,255,.55); font-weight: 700;
}
.btn-contorno:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

/* --- painel de vagas reais (sobre o hero escuro) --- */

/* O fundo é violeta escuro translúcido, e não branco translúcido: o painel
   fica sobre a parte **clara** da arte, e uma base clara faria o texto branco
   cair abaixo de AA justamente onde estão as vagas. O vidro continua sendo
   vidro, mas com piso de contraste garantido. */
.painel-x {
  background: rgba(35,10,52,.72);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}

/* Onde a transparência é reduzida por preferência do sistema, vira sólido. */
@media (prefers-reduced-transparency: reduce) {
  .painel-x { background: rgba(43,14,61,.96); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.painel-x-topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.painel-x-topo h2 { font-size: 1.0625rem; margin: 0; color: #fff; }
.painel-x-topo p { margin: 0; color: rgba(255,255,255,.72); }

.lista-x { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.lista-x li + li { border-top: 1px solid rgba(255,255,255,.14); }

.vaga-x {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-3);
  margin-inline: calc(var(--space-3) * -1);
  border-radius: var(--radius-sm);
  color: #fff; text-decoration: none;
  transition: background-color .18s ease, transform .18s ease;
}
.vaga-x:hover { background: rgba(255,255,255,.1); color: #fff; transform: translateX(4px); }
.vaga-x:active { transform: translateX(4px) translateY(1px); }

.vaga-x-titulo { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; line-height: 1.3; display: block; margin-bottom: 2px; }
.vaga-x-meta { display: block; font-size: .875rem; color: rgba(255,255,255,.72); }

/* Seta que avança no hover. Comunica direção; não é enfeite. */
.vaga-x-seta { font-size: 1.25rem; color: rgba(255,255,255,.5); transition: transform .18s ease, color .18s ease; }
.vaga-x:hover .vaga-x-seta { transform: translateX(3px); color: #fff; }

.painel-x-todas { display: inline-block; color: #fff; font-weight: 700; text-decoration-color: rgba(255,255,255,.5); }
.painel-x-todas:hover { color: #fff; text-decoration-color: #fff; }
.painel-x-vazio { color: rgba(255,255,255,.8); margin-bottom: var(--space-4); }

/* --- 2. faixa institucional --------------------------------------------- */

.faixa-inst { background: var(--surface); border-bottom: 1px solid var(--line); padding-block: var(--space-6); }
.faixa-inst p { margin: 0; max-width: none; font-size: .9375rem; color: var(--muted); }

/* --- 3. passos, com a linha do espectro ligando-os --------------------- */

.secao-clara { padding-block: var(--space-16); }
.titulo-secao { font-size: clamp(1.75rem, 3.4vw, 2.5rem); margin-bottom: var(--space-4); text-wrap: balance; }
.subtitulo-secao { color: var(--muted); font-size: 1.0625rem; margin-bottom: var(--space-12); max-width: 58ch; }

.passos-x { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-8); position: relative; }

@media (min-width: 940px) {
  .passos-x { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
  /* A "ponte" atravessando os três passos: o gradiente é literalmente o que
     liga uma etapa à seguinte. */
  .passos-x::before {
    content: ""; position: absolute;
    inset-inline: 12%; inset-block-start: 26px; height: 3px;
    background: var(--espectro); border-radius: 2px; opacity: .5;
  }
}

.passo-x { position: relative; }

.passo-x-numero {
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
  color: #fff; background: var(--brand-violet);
  margin-bottom: var(--space-5);
  position: relative; z-index: 1;
  box-shadow: 0 0 0 6px var(--bg);
}
.passo-x:nth-child(1) .passo-x-numero { background: linear-gradient(135deg, #2E9BD6, #5BCEFA); }
.passo-x:nth-child(2) .passo-x-numero { background: linear-gradient(135deg, #6A2C91, #A855C9); }
.passo-x:nth-child(3) .passo-x-numero { background: linear-gradient(135deg, #B23A57, #E879A8); }

.passo-x h3 { margin-bottom: var(--space-2); }
.passo-x p { color: var(--muted); margin-bottom: 0; }

/* --- 4. proteção: bloco com imagem e itens --------------------------- */

.secao-protecao { background: var(--surface); border-block: 1px solid var(--line); padding-block: var(--space-16); }

.protecao-grade { display: grid; gap: var(--space-12); align-items: center; }
@media (min-width: 940px) {
  .protecao-grade { grid-template-columns: 5fr 6fr; gap: var(--space-16); }
}

.protecao-figura { margin: 0; }
.protecao-figura img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}

.olho {
  font-size: .8125rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; margin-bottom: var(--space-3);
  background: var(--espectro); -webkit-background-clip: text; background-clip: text;
  color: var(--brand-violet-deep);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .olho { color: transparent; }
}

.secao-protecao h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); max-width: 24ch; text-wrap: balance; }

.protecao-itens-x { display: grid; gap: var(--space-6); margin-top: var(--space-8); }
@media (min-width: 620px) { .protecao-itens-x { grid-template-columns: repeat(2, 1fr); } }

.protecao-item-x { padding-top: var(--space-4); border-top: 3px solid; border-image: var(--espectro) 1; }
.protecao-item-x h3 { font-size: 1rem; margin-bottom: var(--space-2); }
.protecao-item-x p { font-size: .9375rem; color: var(--muted); margin-bottom: 0; }

/* --- 5. formação ------------------------------------------------------
   Seção curta de propósito: fecha a promessa do hero ("vagas, formação e
   acompanhamento") e leva ao catálogo, sem competir com as seções longas
   que vêm antes e depois. O número é grande porque é a única prova concreta
   que a seção tem para oferecer. */

.secao-formacao {
  padding-block: var(--space-16);
  background: var(--bg);
  border-block-start: 1px solid var(--line);
}

.formacao-grade { display: grid; gap: var(--space-12); align-items: center; }

@media (min-width: 940px) {
  .formacao-grade { grid-template-columns: 1.5fr 1fr; gap: var(--space-16); }
}

.formacao-grade h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  max-width: 20ch;
  text-wrap: balance;
}
.formacao-grade p { color: var(--muted); max-width: 56ch; }
.formacao-grade .btn { margin-top: var(--space-4); }

.formacao-contagem {
  margin-top: var(--space-5);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--brand-violet-deep);
}

.formacao-figura { margin: 0; }
.formacao-figura img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}

/* --- 6. instituições -------------------------------------------------
   Antes: grade de 2 colunas com texto, três cartões e botão disputando o
   mesmo espaço. O resultado era apertado em qualquer largura. Agora a
   abertura (texto + foto) ocupa a linha inteira, e os cartões têm a sua. */

.secao-inst { padding-block: var(--space-16); background: var(--bg); }

.inst-abertura { display: grid; gap: var(--space-12); align-items: center; }

@media (min-width: 940px) {
  .inst-abertura { grid-template-columns: 1fr 1fr; gap: calc(var(--space-16) + var(--space-4)); }
  .secao-inst { padding-block: calc(var(--space-16) + var(--space-12)); }
}

.inst-texto h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); text-wrap: balance; margin-bottom: var(--space-5); }
.inst-texto p { color: var(--muted); font-size: 1.0625rem; margin-bottom: var(--space-5); }
.inst-texto .btn { margin-top: var(--space-3); }

.inst-figura { margin: 0; }
.inst-figura img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}

.beneficios-x {
  list-style: none; margin: var(--space-16) 0 0; padding: 0;
  display: grid; gap: var(--space-6);
}
@media (min-width: 760px) { .beneficios-x { grid-template-columns: repeat(3, 1fr); } }

.beneficio {
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--brand-violet);
  border-radius: var(--radius-md);
  padding: var(--space-8) var(--space-6);
  transition: transform .18s ease, box-shadow .18s ease;
}
.beneficios-x li:nth-child(1) .beneficio { border-top-color: #2E9BD6; }
.beneficios-x li:nth-child(2) .beneficio { border-top-color: #A855C9; }
.beneficios-x li:nth-child(3) .beneficio { border-top-color: #E879A8; }
.beneficio:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }

.beneficio h3 { margin-bottom: var(--space-3); font-size: 1.0625rem; }
.beneficio p { margin-bottom: 0; color: var(--muted); font-size: .9375rem; }

/* --- 5b. o selo ------------------------------------------------------ */

.secao-selo {
  padding-block: var(--space-16);
  background:
    radial-gradient(900px 300px at 50% 0%, var(--brand-violet-soft), transparent 70%),
    var(--surface);
  border-block: 1px solid var(--line);
}

.selo-abertura { text-align: center; max-width: 62ch; margin-inline: auto; margin-bottom: var(--space-16); }
.selo-abertura h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); margin-bottom: var(--space-4); }
.selo-abertura p { color: var(--muted); font-size: 1.0625rem; margin-inline: auto; }

.selos-grade { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-12); }
@media (min-width: 760px) { .selos-grade { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); } }

.selo-card { text-align: center; }

.selo-arte {
  width: 168px; margin: 0 auto var(--space-6);
  transition: transform .25s ease;
}
.selo-arte svg { width: 100%; height: auto; display: block; }
.selo-card:hover .selo-arte { transform: translateY(-6px) rotate(-2deg); }

.selo-card h3 { font-size: 1.125rem; margin-bottom: var(--space-3); }
.selo-card p { color: var(--muted); font-size: .9375rem; margin-inline: auto; max-width: 34ch; margin-bottom: 0; }

/* --- 6. perguntas: interação real, sem JavaScript --------------------- */

.secao-perguntas { padding-block: var(--space-16); }

/* O título acompanha os cartões. Centralizar só o bloco deixaria a chamada
   encostada à esquerda e os cartões no meio, que é pior do que os dois à
   esquerda. O texto **dentro** de cada pergunta continua alinhado à esquerda:
   resposta centralizada é mais bonita e menos legível. */
.secao-perguntas .titulo-secao {
  text-align: center;
  max-width: 24ch;
  margin-inline: auto;
  margin-bottom: var(--space-12);
}

/* Centralizada como as demais seções da página. O bloco tem largura máxima
   em `ch` (medida de leitura, não de tela) e `margin-inline: auto` para não
   ficar encostado à esquerda enquanto o resto do site respira no centro. */
.perguntas {
  display: grid;
  gap: var(--space-4);
  max-width: 76ch;
  margin-inline: auto;
}

/* Cada pergunta é um cartão com respiro. O `+` não é um caractere solto no
   canto: é um botão circular com massa visual própria, que gira e vira `×`
   ao abrir. O alvo de toque é o cabeçalho inteiro, não só o círculo. */
.pergunta {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.pergunta:hover { border-color: #CFC3E4; box-shadow: var(--shadow-2); }
.pergunta[open] {
  border-color: var(--brand-violet);
  box-shadow: 0 10px 30px rgba(69, 24, 95, .10);
}

.pergunta summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-6);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--ink);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5);
  min-height: 44px;   /* alvo de toque */
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta[open] summary { color: var(--brand-violet-deep); }

/* O foco precisa aparecer no cartão, não num retângulo colado ao texto:
   quem navega por teclado tem de enxergar onde está sem procurar. */
.pergunta summary:focus-visible {
  outline: 3px solid var(--brand-violet);
  outline-offset: -3px;
  border-radius: var(--radius-lg);
}

/* O sinal é desenhado com dois gradientes sobre o círculo, em vez de um
   glifo: assim ele não depende da fonte, fica alinhado ao pixel e o giro de
   135° transforma o `+` em `×` sem trocar o conteúdo. */
.pergunta summary::after {
  content: "";
  flex: none;
  inline-size: 2.5rem; block-size: 2.5rem;
  border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) center / 0.875rem 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 0.875rem no-repeat,
    var(--brand-violet-soft);
  color: var(--brand-violet);
  transition: transform .28s cubic-bezier(.2, .7, .3, 1),
              background-color .2s ease, color .2s ease;
}
.pergunta summary:hover::after { background-color: #E2D6F1; }
.pergunta[open] summary::after {
  transform: rotate(135deg);
  background-color: var(--brand-violet);
  color: #FFFFFF;
}

.pergunta-corpo {
  padding: 0 var(--space-6) var(--space-6);
  /* Alinha a resposta com a pergunta, descontando o círculo à direita. */
  padding-inline-end: calc(var(--space-6) + 2.5rem + var(--space-5));
}
.pergunta-corpo p { color: var(--muted); margin-bottom: 0; line-height: 1.65; }

@media (max-width: 560px) {
  .pergunta summary { padding: var(--space-5); gap: var(--space-4); }
  .pergunta summary::after { inline-size: 2.25rem; block-size: 2.25rem; }
  .pergunta-corpo { padding: 0 var(--space-5) var(--space-5); }
}

/* Abertura: o conteúdo desliza em vez de saltar. `::details-content` anima a
   altura de verdade onde houver suporte; onde não houver, o keyframe entrega
   o mesmo efeito sem animar altura. Nos dois casos, nada some sem suporte. */
@media (prefers-reduced-motion: no-preference) {
  .pergunta[open] .pergunta-corpo { animation: abrir-pergunta .28s ease both; }

  @supports (interpolate-size: allow-keywords) {
    /* Sem isto, `block-size: auto` não é interpolável e a transição não sai. */
    :root { interpolate-size: allow-keywords; }

    .pergunta::details-content {
      block-size: 0;
      overflow: hidden;
      transition: block-size .28s cubic-bezier(.2, .7, .3, 1), content-visibility .28s allow-discrete;
    }
    .pergunta[open]::details-content { block-size: auto; }
    .pergunta[open] .pergunta-corpo { animation: none; }
  }
}

@keyframes abrir-pergunta {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* --- 7. fechamento em espectro --------------------------------------- */

.cta-x {
  position: relative;
  background: var(--violeta-noite);
  color: #fff;
  padding-block: var(--space-16);
  text-align: center;
  overflow: hidden;
}

/* Brilho de espectro atrás do texto. Puramente decorativo, atrás do
   conteúdo, sem custo de repaint em rolagem (não é fixed). */
.cta-x::before {
  content: ""; position: absolute; inset: -40% -10% auto; height: 120%;
  background: var(--espectro-suave);
  filter: blur(60px);
  z-index: 0;
}
.cta-x .container { position: relative; z-index: 1; }

.cta-x h2 { color: #fff; font-size: clamp(1.75rem, 3.6vw, 2.75rem); text-wrap: balance; margin-bottom: var(--space-3); }
.cta-x p { color: rgba(255,255,255,.85); margin-inline: auto; }
.cta-x .btn { margin-top: var(--space-5); }
.cta-x-nota { margin-top: var(--space-6); margin-bottom: 0; font-size: .875rem; }
.cta-x-nota a { color: #fff; }

/* --- marca com o espectro no cabeçalho -------------------------------- */

.marca-trans {
  background: var(--espectro);
  -webkit-background-clip: text; background-clip: text;
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .marca-trans { color: transparent; }
}