/* ==========================================================================
   Página de Programas — Figma 19190:833
   Carrega depois de styles.css, de onde herda tokens, tipografia, botão,
   cabeçalho, rodapé, FAQ e cartão de vídeo.
   ========================================================================== */

:root {
  --p-lilas-claro: #ebeefe;
  --p-campo: #f7f7fa;
  --p-azul: #1f6fb5;
  --p-verde-bg: #e6f6ec;
  --p-verde-txt: #1f6b3e;
  --p-laranja-bg: #fdeee0;
  --p-laranja-txt: #a2561f;
}

/* --------------------------------------------------------------------------
   1. Ritmo das seções
   Uma medida só para todas. No Figma havia vãos muito desiguais entre dobras
   (chegava a sobrar meia tela em branco antes da metodologia).
   -------------------------------------------------------------------------- */
/* Todos os fundos abaixo vieram de amostragem dos pixels do render do Figma,
   não de estimativa. O fundo da página é #fafafc — não branco. */
:root { --p-fundo: #fafafc; }

.secao { padding-block: var(--espaco-dobra); }
.secao--sem-topo { padding-top: 0; }
.secao--clara { background: var(--p-fundo); }

/* Metodologia: diagonal com brilho lilás no topo à direita e pêssego na base
   à esquerda. Era isso que fazia o esmaecimento parecer errado. */
.secao--metodologia {
  background:
    radial-gradient(75% 55% at 92% 2%, rgba(182,193,246,.95) 0%, rgba(182,193,246,0) 62%),
    radial-gradient(75% 55% at 5% 98%, rgba(245,192,163,.95) 0%, rgba(245,192,163,0) 62%),
    var(--c-fundo-lilas);
}

/* Participação: brilho lilás só à esquerda, some antes da metade */
.secao--participacao {
  background:
    radial-gradient(70% 110% at 2% 10%, rgba(191,200,247,.95) 0%, rgba(191,200,247,0) 68%),
    var(--c-fundo-lilas);
}

/* Percurso: diagonal, canto superior esquerdo escuro para o inferior direito */
.secao--percurso {
  color: #fff;
  background: linear-gradient(118deg, #1a2248 0%, #2c397c 42%, #4156bd 100%);
}

/* Registro: base escura com dois clarões, um em cada canto oposto */
.secao--registro {
  color: #fff;
  background:
    radial-gradient(62% 85% at 6% 10%, #2f4194 0%, rgba(47,65,148,0) 62%),
    radial-gradient(62% 85% at 94% 92%, #26347a 0%, rgba(38,52,122,0) 62%),
    var(--c-profundo);
}

.secao__cabecalho { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 40px; }
.secao__cabecalho--centro { align-items: center; text-align: center; }
/* Medido no render do Figma: 52px, entrelinha de 60px (1.154). */
.secao__titulo {
  color: var(--c-tinta);
  font-size: clamp(1.5rem, 3.9vw, 3.25rem);
  font-weight: 700;
  line-height: 1.154;
}
/* O design quebra o título em pontos escolhidos, não onde a linha encheria.
   Só vale onde há largura para a linha mais longa; abaixo disso o texto
   volta a quebrar sozinho. */
/* .quebra-ampla vive em styles.css — a home também precisa dela. */
.secao__titulo span { color: var(--c-violeta); }
.secao__titulo--claro { color: #fff; }
.secao__titulo--claro span { color: var(--c-lilas); }
.secao__apoio { color: var(--c-texto); font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.6; max-width: 72ch; }
.secao__apoio--claro { color: var(--c-lilas-3); }
.secao__nota { margin-top: 24px; color: var(--c-texto); font-size: 15px; line-height: 1.6; }

.rotulo { color: var(--c-violeta); font-size: 14px; font-weight: 700; line-height: 1.3; }
.rotulo--ponto { display: flex; align-items: center; gap: 10px; }
.rotulo--ponto::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-violeta); }

/* Etiquetas reutilizadas em várias dobras */
.etiqueta {
  display: inline-flex;
  padding: 5px 13px;
  border-radius: 60px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .02em;
  white-space: nowrap;
}
/* No design as pílulas são sólidas com texto branco, não tons claros. */
.etiqueta--laranja,
.etiqueta--laranja-solida { background: linear-gradient(90deg, #ee9363, #e97435); color: #fff; }
.etiqueta--roxa,
.etiqueta--roxa-solida    { background: linear-gradient(90deg, #7c8de2, #5f72d0); color: #fff; }
.etiqueta--azul           { background: linear-gradient(90deg, #1f6fb5, #14548d); color: #fff; }
/* Mesma matiz da cor base, um degrau mais profundo, para distinguir da
   etiqueta laranja e sustentar o texto branco. */
.etiqueta--pessego        { background: linear-gradient(90deg, #eb834b, #e6611a); color: #fff; }
.etiqueta--transparente   { background: rgba(255,255,255,.16); color: #fff; }

.estado { display: inline-flex; padding: 7px 16px; border-radius: 60px; font-size: 12px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.estado--cinza { background: #e9ebef; color: #4b5b7a; }
.estado--laranja { background: var(--p-laranja-bg); color: var(--p-laranja-txt); }
.estado--verde { background: var(--p-verde-bg); color: var(--p-verde-txt); }
/* Amarelo claro: etapas cuja data ainda não foi fechada. Fica entre o verde
   do confirmado e o cinza do concluído, sem parecer alerta. */
.estado--amarelo { background: #fdf0cd; color: #7a5a12; }

/* --------------------------------------------------------------------------
   2. Hero
   -------------------------------------------------------------------------- */
.p-hero { padding-block: 0 clamp(48px, 6vw, 80px); background: var(--p-fundo); }

/* As três primeiras dobras andam mais juntas que o resto da página: o vão
   entre elas é 70px, metade dos 140 que duas dobras somam no ritmo padrão.
   Cada uma cede metade — por isso o `/ 2`, e não um valor fixo, que quebraria
   a redução proporcional no celular. */
#hero { padding-bottom: calc(var(--espaco-dobra) / 2); }
#definicao { padding-block: calc(var(--espaco-dobra) / 2); }
#agenda { padding-block: calc(var(--espaco-dobra) / 2); }
#trilhas { padding-top: calc(var(--espaco-dobra) / 2); }

/* --------------------------------------------------------------------------
   O que é a TF-DBT — bloco repetido da página de pré-inscrição

   As regras são cópia de tfdbt.css, com os mesmos nomes de classe: as duas
   páginas nunca carregam a mesma folha, então não há conflito, e a marcação
   fica idêntica à de lá — que é o que a cliente pediu.
   -------------------------------------------------------------------------- */
.tf-tag {
  display: inline-flex;
  align-self: flex-start;
  padding: 8px 22px;
  border-radius: 60px;
  background: var(--g-pessego);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}
.tf-definicao__caixa {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 40px;
  border-radius: 20px;
  /* Figma: lavanda no canto superior esquerdo, rosa no meio, lavanda de novo
     à direita. */
  background: linear-gradient(118deg, #e2e0f7 0%, #f5e3e7 52%, #ece7fa 100%);
}
.tf-definicao__titulo {
  color: var(--c-tinta);
  font-size: clamp(1.5rem, 2.8vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
}
.tf-definicao__texto { display: flex; flex-direction: column; gap: 18px; }
.tf-definicao__texto p {
  color: var(--c-texto);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.5;
}
@media (max-width: 620px) {
  .tf-definicao__caixa { padding: 26px 20px; border-radius: 16px; }
}
.p-hero .container { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }

/* A colagem não tem borda: ela se dissolve no fundo da página pelos lados e
   pela base. Máscara em vez de sobreposição colorida, para funcionar sobre
   qualquer fundo. */
/* A colagem tem margem vazia dentro do próprio arquivo: medindo os pixels do
   prog-hero.webp, o conteúdo começa em 148 e termina em 1436 de 1575 — 81,8%
   da largura. Por isso ela parecia mais estreita que o texto embaixo mesmo com
   a moldura alinhada ao grid. Ampliar 122% (1575 ÷ 1289) leva o conteúdo às
   bordas; o excedente, que é vazio, é cortado pela moldura. */
.p-hero__arte {
  width: 100%;
  max-width: 1575px;
  margin: 0;
  overflow: hidden;
}
.p-hero__arte img {
  /* 122% = 1575 ÷ 1289, o que leva o conteúdo útil do arquivo às bordas. */
  width: 122%;
  max-width: none;
  margin-left: -11%;
  height: auto;
  /* O esmaecimento lateral vai a 4% em vez de 13%: somado à margem vazia do
     arquivo, o antigo recuava a colagem bem para dentro da coluna e ela não
     chegava perto das laterais do texto. O de baixo continua em 58% — é ele
     que cria o fade onde o "TF-DBT" se apoia. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%),
    linear-gradient(to bottom, #000 58%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%),
    linear-gradient(to bottom, #000 58%, transparent 100%);
          mask-composite: intersect;
}

/* o título sobe e encosta na base esmaecida da colagem, como no design */
/* Centrado, não pela linha de base: com o título em duas linhas a sigla ficava
   presa à primeira e parecia solta acima do bloco. */
/* O bloco ocupa a largura do grid, a mesma da arte acima e das dobras abaixo.
   Sem o `width`, ele encolhia até o tamanho do texto e nascia um recuo que não
   existe em nenhuma outra dobra da página. */
/* A margem negativa sobe o bloco até onde a colagem se dissolve. Ela acompanha
   a ampliação da arte: com a imagem 22% mais alta, o mesmo -7% deixaria o
   título abaixo do fade. */
.p-hero__titulo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 24px; width: 100%; margin-top: -8.6%; }
.p-hero__sigla {
  font-size: clamp(2.75rem, 5.5vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  background: var(--g-pessego);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Sem teto de largura: quem limita agora é o grid. A fonte sobe junto, senão a
   linha fica comprida demais para o corpo pequeno de antes. */
.p-hero__titulo h1 {
  color: var(--c-tinta-2);
  font-size: clamp(1.25rem, 2.3vw, 2rem);
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
}
.p-hero__texto {
  width: 100%;
  color: var(--c-texto);
  font-size: clamp(.9375rem, 1.3vw, 1.1875rem);
  line-height: 1.65;
}
.p-hero__aviso { max-width: 70ch; color: var(--c-tinta); font-size: 14px; font-weight: 700; line-height: 1.6; }
.p-hero__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 6px; }

/* --------------------------------------------------------------------------
   3. Agenda
   -------------------------------------------------------------------------- */
/* Mesmo desenho do Save the Dates da home: a data é o elemento alto e colorido,
   o nome do treinamento vem logo abaixo e o detalhe fecha em texto de apoio.
   Antes isto era uma tabela de três colunas com etiquetas. */
#agenda .secao__cabecalho { margin-bottom: 22px; }
.agenda__filete { height: 1px; margin-bottom: 26px; background: #d9ddef; }
.agenda { display: flex; flex-wrap: wrap; gap: 32px; }
.agenda li { flex: 1 1 260px; display: flex; flex-direction: column; gap: 6px; }
.agenda__data {
  font-size: clamp(1.625rem, 3.75vw, 3rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.01em;
}
.agenda__data--laranja { color: var(--c-laranja-2); }
.agenda__data--roxo    { color: var(--c-violeta); }
.agenda__evento { color: var(--c-tinta); font-size: 17px; font-weight: 700; line-height: 1.35; }
.agenda__detalhe { color: var(--c-texto); font-size: 15px; line-height: 1.4; }

/* --------------------------------------------------------------------------
   4. Trilhas
   -------------------------------------------------------------------------- */
.trilha {
  /* 48px no Figma: deixa a área interna em 1184, que é a medida sobre a qual
     as colunas 44 / 564 / 520 das etapas foram desenhadas. */
  padding: clamp(24px, 3.75vw, 48px);
  border-radius: 20px;
  overflow: hidden;
}
.trilha + .trilha { margin-top: 24px; }
/* Amostrado do render: azul no canto superior esquerdo, lilás no inferior
   direito, quase branco no meio. */
.trilha--roxa {
  background:
    radial-gradient(78% 72% at 0% 0%, #c3d1f8 0%, rgba(195,209,248,0) 68%),
    radial-gradient(72% 68% at 100% 100%, #e0e4fa 0%, rgba(224,228,250,0) 70%),
    #fbfbfe;
}
.trilha--laranja {
  background:
    radial-gradient(78% 72% at 0% 0%, #fcdcc9 0%, rgba(252,220,201,0) 68%),
    radial-gradient(72% 68% at 100% 100%, #e6e9fa 0%, rgba(230,233,250,0) 70%),
    #fdfcfb;
}

/* O resumo cai na mesma coluna das fichas das etapas (616 | 48 | 520). */
.trilha__cabecalho { display: grid; grid-template-columns: 616fr 520fr; gap: 48px; align-items: flex-start; margin-bottom: 36px; }
.trilha__cabecalho > div { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.trilha__sigla { color: var(--c-tinta); font-size: clamp(1.625rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: -.01em; line-height: 1; }
.trilha__resumo { padding-top: 18px; color: var(--c-texto); font-size: 17px; line-height: 1.55; }

.etapas { display: flex; flex-direction: column; gap: 32px; }
/* O recuo padrão de 40px do <ol> empurrava a trilha inteira para a direita —
   no celular, onde tudo é centrado, o desalinhamento ficava evidente. */
.etapas { padding-inline-start: 0; list-style: none; }
/* Figma 19802:9 — três colunas: balão 44, descrição 564, cartão 520,
   com 28 de vão. O balão sai de dentro do texto e vira coluna própria. */
.etapa-trilha { position: relative; display: grid; grid-template-columns: 44px 564fr 520fr; gap: 28px; align-items: start; }

/* fio vertical ligando um balão numerado ao seguinte */
.etapa-trilha:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 52px;
  bottom: -32px;
  width: 2px;
  border-radius: 2px;
  background: rgba(111,129,218, .22);
}
.trilha--laranja .etapa-trilha:not(:last-child)::before { background: rgba(231, 131, 59, .25); }

.etapa-trilha__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 4px; }
.etapa-trilha__numero {
  grid-column: 1;
  grid-row: 1;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 60px;
  background: #f9fafb;
  color: var(--c-texto);
  font-size: 15px;
  font-weight: 700;
}
.etapa-trilha__numero--ativo { background: var(--c-violeta); color: #fff; }
.etapa-trilha__numero--laranja { background: var(--g-pessego); color: var(--c-tinta); }
.etapa-trilha__selo {
  padding: 7px 16px;
  border-radius: 60px;
  background: #fff;
  color: var(--c-tinta);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
}
/* `.etapa-trilha__texto p` é mais específico que a classe do selo e roubava a
   cor — por isso os dois seletores abaixo passam pelo contêiner. */
.etapa-trilha__texto .etapa-trilha__selo { color: var(--c-tinta); }
/* A etapa já concluída mantém o selo apagado — as demais são brancas */
.etapa-trilha__texto .etapa-trilha__selo--concluido { background: #e9ebef; color: var(--c-texto); }
.etapa-trilha__texto h3 { color: var(--c-texto); font-size: clamp(1.25rem, 1.9vw, 1.625rem); font-weight: 700; line-height: 1.32; }
.etapa-trilha__texto p { color: var(--c-texto); font-size: 17px; line-height: 1.55; }

/* Ficha de cada etapa · Figma 19802:18 */
.ficha {
  border: 1px solid #d6d9e0;
  border-radius: 18px;
  background: #f9fafb;
  overflow: hidden;
}
.ficha__faixa {
  padding: 14px 24px;
  background: #e9ebef;
  color: #242b58;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  line-height: 1.3;
  text-transform: uppercase;
}
/* as variantes coloridas carregam texto branco */
.ficha__faixa--roxa,
.ficha__faixa--laranja { color: #fff; }
/* Uma única faixa roxa na trilha inteira, como a laranja é única na outra.
   Antes havia três tons (cinza, lilás e roxo) — todos na matiz 230, mas em
   luminosidades diferentes, o que lia como cores diferentes. Aqui os dois
   extremos saem do #6b7fe3: o claro é ele mesmo, o escuro é o mesmo tom
   rebaixado, o suficiente para o texto branco continuar legível. */
.ficha__faixa--roxa    { background: linear-gradient(90deg, #4f67de 0%, #6b7fe3 100%); }
.ficha__faixa--laranja { background: var(--g-pessego); color: var(--c-tinta); }

.ficha__corpo { display: flex; flex-direction: column; gap: 18px; padding: 24px; }
/* O estado ("Concluído", "Data confirmada"…) mora sempre no mesmo canto: em
   cima, à direita do período. Com flex-wrap ele caía para a linha de baixo
   quando o período era longo, e a etiqueta mudava de lugar de ficha para
   ficha. Em grade a coluna do período é que encolhe e quebra. */
.ficha__topo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; }
/* topo fixo, não centrado: centrado ele descia 12px nas fichas cujo período
   ocupa duas linhas, e a etiqueta voltava a dançar entre os cartões */
.ficha__topo .estado { justify-self: end; }
.ficha__rotulo { color: var(--c-texto); font-size: 11px; font-weight: 700; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; }
.ficha__periodo { margin-top: 5px; color: var(--c-texto); font-size: clamp(1.125rem, 1.6vw, 1.4375rem); font-weight: 700; line-height: 1.3; }
.ficha__grade { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-top: 18px; border-top: 1px solid #d9ddef; }
.ficha__valor { margin-top: 5px; color: var(--c-texto); font-size: 16px; font-weight: 700; line-height: 1.4; }
.ficha__conduzido { padding-top: 18px; border-top: 1px solid #d9ddef; color: var(--c-texto); font-size: 14px; line-height: 1.4; }

/* --------------------------------------------------------------------------
   5. Protocolos
   -------------------------------------------------------------------------- */
.protocolo { display: grid; grid-template-columns: minmax(240px, .8fr) 2fr; gap: 24px 40px; padding: clamp(24px, 3vw, 36px); border-radius: 16px; }
.protocolo + .protocolo { margin-top: 20px; }
.protocolo--roxo    { background: linear-gradient(100deg, #c2cef8 0%, #dfe5fb 40%, #f3f1fc 72%, #fbeaea 100%); }
.protocolo--laranja { background: linear-gradient(100deg, #c2cef8 0%, #dfe5fb 40%, #f3f1fc 72%, #fbebe2 100%); }
.protocolo__marca { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.protocolo__sigla { color: var(--c-tinta); font-size: clamp(1.5rem, 2.8vw, 2.25rem); font-weight: 700; letter-spacing: -.01em; }
.protocolo__corpo { display: flex; flex-direction: column; gap: 20px; }
.protocolo__lead { color: var(--c-texto); font-size: 15px; line-height: 1.6; }
.protocolo__campos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; margin: 0; }
.protocolo__campos dt { color: var(--c-tinta); font-size: 14px; font-weight: 700; line-height: 1.4; }
.protocolo__campos dd { margin: 6px 0 0; color: var(--c-texto); font-size: 14px; line-height: 1.55; }

/* --------------------------------------------------------------------------
   6. Percurso científico
   -------------------------------------------------------------------------- */
.percurso { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.percurso__item { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

/* linha com seta ligando um marco ao seguinte, como no design */
.percurso__item::before {
  content: "";
  position: absolute;
  top: 21px; left: 54px; right: -22px;
  height: 1px;
  background: rgba(255, 255, 255, .22);
}
.percurso__item::after {
  content: "";
  position: absolute;
  top: 17px; right: -25px;
  width: 6px; height: 6px;
  border-top: 1px solid rgba(255, 255, 255, .4);
  border-right: 1px solid rgba(255, 255, 255, .4);
  transform: rotate(45deg);
}
.percurso__item:last-child::before,
.percurso__item:last-child::after { display: none; }
.percurso__icone {
  /* `flex: none` é o que impede o esmagamento: no destaque o ícone divide a
     linha com um parágrafo longo e, encolhível, virava um oval cortado. */
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
}
.percurso__chip {
  padding: 5px 12px;
  border-radius: 60px;
  border: 1px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.85);
  font-size: 12px;
  line-height: 1.3;
}
.percurso__item h3, .percurso__destaque h3 { color: #fff; font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.percurso__texto { color: var(--c-lilas-3); font-size: 14px; line-height: 1.6; }

.percurso__destaque {
  display: flex; gap: 20px; align-items: flex-start;
  margin-top: 32px; padding: 24px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;
  background: rgba(255,255,255,.06);
}
.percurso__destaque > div { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

/* --------------------------------------------------------------------------
   7. Metodologia + gaveta
   O texto completo do currículo é longo demais para ficar aberto por padrão.
   Fica numa prévia com esmaecimento e abre por inteiro no clique.
   -------------------------------------------------------------------------- */
.gaveta { position: relative; }
.gaveta__conteudo {
  position: relative;
  max-height: var(--altura-previa, 620px);
  overflow: hidden;
  transition: max-height .7s var(--e-suave);
}
/* O esmaecimento é feito com máscara no próprio conteúdo, que some para
   TRANSPARENTE. Antes era uma faixa de cor chapada por cima — e como o fundo
   desta dobra é um degradê diagonal que vai de lilás a pêssego, a faixa só
   batia num ponto e destoava no resto. */
.gaveta__conteudo {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 260px), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 260px), transparent 100%);
}
.gaveta.is-aberta .gaveta__conteudo {
  max-height: none;
  -webkit-mask-image: none;
          mask-image: none;
}

.gaveta__rodape { display: flex; justify-content: center; margin-top: 24px; }
.gaveta__botao img { transition: transform var(--t-lento) var(--e-suave); transform: rotate(90deg); }
.gaveta.is-aberta .gaveta__botao img { transform: rotate(-90deg); }

.metodologia { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.metodologia__coluna { display: flex; flex-direction: column; gap: 14px; }
.metodologia__titulo { color: var(--c-tinta); font-size: clamp(1.125rem, 1.7vw, 1.375rem); font-weight: 700; line-height: 1.35; }
.metodologia__autor { color: var(--c-texto); font-size: 14px; }
.metodologia__subtitulo { margin-top: 12px; color: var(--c-tinta); font-size: 17px; font-weight: 700; line-height: 1.4; }
.metodologia p { color: var(--c-texto); font-size: 15px; line-height: 1.7; }

.bibliografia { display: flex; flex-direction: column; gap: 12px; }
.bibliografia li { color: var(--c-texto); font-size: 12.5px; line-height: 1.6; }

.modulo { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.modulo__cabecalho { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--c-tinta); font-size: 1.125rem; font-weight: 700; }
.dia { padding-top: 14px; border-top: 1px solid rgba(111,129,218,.2); }
/* O respiro acima vem do padding-top de .dia; a margem que o <h5> trazia do
   navegador somava mais 20px por acidente e o reset agora zera. */
.dia h5 { color: var(--c-tinta); font-size: 15px; font-weight: 700; line-height: 1.4; margin: 0 0 6px; }

.resumo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.resumo__cartao { padding: 18px 20px; border: 1px solid var(--c-borda); border-radius: 14px; background: #fff; }
.resumo__modulo { color: var(--c-texto); font-size: 13px; font-weight: 700; }
.resumo__titulo { margin: 4px 0 10px; color: var(--c-tinta); font-size: 15px; font-weight: 700; line-height: 1.35; }
/* O intervalo de dias cai inteiro na linha de baixo: solto, ele quebrava no
   meio do parêntese ("(Dias" em cima, "1–2)" embaixo). */
.resumo__dias { display: block; white-space: nowrap; }
.resumo__cartao ul { display: flex; flex-direction: column; gap: 4px; }
.resumo__cartao li { color: var(--c-texto); font-size: 13.5px; line-height: 1.5; }

/* --------------------------------------------------------------------------
   8. Trilha de entrada
   -------------------------------------------------------------------------- */
/* A bifurcação "Não / Sim" foi retirada quando a dobra virou "um único
   caminho": as regras dela saíram junto para não virar CSS morto. */


.caminhos { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; width: 100%; margin-top: 28px; }
.caminho {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: clamp(24px, 3vw, 36px);
  border-radius: 18px;
  text-align: center;
}
.caminho--claro  { background: linear-gradient(135deg, #c6d2f8 0%, #e3e7fa 46%, #fbeae6 100%); }
.caminho--escuro { color: #fff; background: radial-gradient(70% 80% at 12% 58%, #3c4a8e 0%, rgba(60,74,142,0) 66%), linear-gradient(120deg, #1a2248 0%, #222c60 55%, #283579 100%); }

.caminho__chip { padding: 7px 16px; border-radius: 60px; background: rgba(255,255,255,.75); color: var(--c-tinta); font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.caminho--escuro .caminho__chip { background: rgba(255,255,255,.14); color: #fff; }
.caminho__titulo { color: var(--c-tinta); font-size: clamp(1.25rem, 1.9vw, 1.5rem); font-weight: 500; line-height: 1.35; }
.caminho--escuro .caminho__titulo { color: #fff; }
.caminho__texto { max-width: 46ch; color: var(--c-texto); font-size: 15px; line-height: 1.6; }
.caminho--escuro .caminho__texto { color: var(--c-lilas-3); }

.caminho__destaque { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 20px; border-radius: 14px; }
.caminho__destaque p:last-child { color: var(--c-tinta); font-size: 14.5px; font-weight: 700; line-height: 1.5; }
.caminho__destaque--laranja { border: 1px solid #f0c9a8; background: rgba(255,255,255,.55); }
.caminho__destaque--escuro { border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); }
.caminho__destaque--escuro p:last-child { color: #fff; }

.caminho__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.caminho__chips li { padding: 6px 14px; border-radius: 60px; background: rgba(255,255,255,.6); color: var(--c-texto); font-size: 12.5px; }
.caminho__chips--escuros li { background: rgba(255,255,255,.1); color: var(--c-lilas-3); }
.caminho .btn { margin-top: auto; }

/* --------------------------------------------------------------------------
   9. Público
   -------------------------------------------------------------------------- */
/* A coluna da esquerda tinha 516px e o título precisa de 589px para fechar
   "Para quem o treinamento" numa linha só — era isso que empurrava o "é" para
   o fim da segunda linha. Cartões centrados contra o texto, não pelo topo. */
.publico { display: grid; grid-template-columns: minmax(280px, 620px) 1fr; gap: 40px 60px; align-items: center; }
.publico__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.publico__cartoes { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.publico__cartao { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.publico__icone {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--c-primaria);
}
.publico__cartao h3 { color: var(--c-tinta); font-size: 1.0625rem; font-weight: 700; line-height: 1.35; }
.publico__cartao p { color: var(--c-texto); font-size: 14.5px; line-height: 1.6; }

/* --------------------------------------------------------------------------
   10. Participação
   -------------------------------------------------------------------------- */
/* Sem o CTA ao lado, o cabeçalho volta a ser uma coluna só e o título ganha
   a largura inteira — é o que o deixa fechar em duas linhas. */
.participacao__cabecalho { flex-direction: column; align-items: flex-start; gap: 14px; }
.participacao__cabecalho > div { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.participacao__cabecalho .secao__apoio { max-width: 62ch; }

.participacao { display: grid; grid-template-columns: minmax(260px, .8fr) 1.2fr; gap: 40px; align-items: start; }
.participacao__foto { margin: 0; border-radius: 16px; overflow: hidden; }
.participacao__foto img { width: 100%; height: 100%; object-fit: cover; }
.participacao__lista { display: flex; flex-direction: column; gap: 20px; }
.participacao__lista ol { display: flex; flex-direction: column; }
.participacao__lista li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid rgba(111,129,218,.18); }
.participacao__lista li:first-child { padding-top: 0; }
.participacao__numero { color: var(--c-violeta); font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.participacao__lista h3 { color: var(--c-tinta); font-size: 1.0625rem; font-weight: 700; line-height: 1.35; margin-bottom: 6px; }
.participacao__lista p { color: var(--c-texto); font-size: 14.5px; line-height: 1.6; }
.participacao__nota { color: var(--c-texto); font-size: 14px; line-height: 1.6; }

/* --------------------------------------------------------------------------
   11. Registro · carrossel
   -------------------------------------------------------------------------- */
.registro__cabecalho { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-bottom: 28px; }
/* Pêssego, não lilás: no fundo escuro o rótulo lilás se confundia com o
   título branco logo abaixo e perdia a função de etiqueta. */
.registro__rotulo { color: var(--c-pessego-2); font-size: 15px; font-weight: 700; }
.registro__titulo { margin-top: 8px; color: #fff; font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 500; line-height: 1.3; }

.carrossel__controles { display: flex; gap: 12px; }
.carrossel__seta {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border: 0; border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: transform var(--t-lento) var(--e-suave), opacity var(--t-lento) var(--e-suave);
}
.carrossel__seta:hover { transform: scale(1.08); }
.carrossel__seta[disabled] { opacity: .35; cursor: default; transform: none; }
.carrossel__seta[data-carrossel="anterior"] img { transform: rotate(180deg); }

.carrossel__trilho {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.carrossel__trilho::-webkit-scrollbar { display: none; }
/* Quatro por vez, como no Figma. Enquanto havia só quatro fotos no total
   isto ficou em 31,5% (três visíveis), porque quatro visíveis não deixavam
   espaço para o carrossel andar; com oito, o espaço existe. */
.carrossel__trilho li { flex: 0 0 auto; width: clamp(200px, 23.2%, 420px); scroll-snap-align: start; }
/* As fotos originais têm proporções diferentes (retrato e paisagem). Todas são
   recortadas na mesma proporção do design, pelo centro — o enquadramento a 28%
   da altura funcionava nos retratos antigos, mas cortava errado as fotos de
   sala cheia e de plateia, onde o assunto está no meio do quadro. */
.carrossel__trilho img {
  width: 100%;
  height: auto;
  aspect-ratio: 311 / 298;
  object-fit: cover;
  object-position: center center;
  border-radius: 12px;
}

.carrossel__pontos { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.carrossel__ponto {
  width: 9px; height: 9px;
  padding: 0; border: 0; border-radius: 60px;
  background: rgba(255,255,255,.35);
  cursor: pointer;
  transition: width var(--t-lento) var(--e-suave), background-color var(--t-lento) var(--e-suave);
}
.carrossel__ponto.is-ativo { width: 26px; background: var(--c-violeta); }

/* --------------------------------------------------------------------------
   12. Depoimentos e chamada final
   -------------------------------------------------------------------------- */
/* A dobra de depoimentos mora em styles.css: ela aparece também na home e as
   duas precisam ficar idênticas. */

.chamada {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: clamp(36px, 5vw, 64px) clamp(24px, 4vw, 48px);
  border-radius: 20px;
  text-align: center;
  background: linear-gradient(102deg, #4a5390 0%, #6d78c8 52%, #7b8eeb 100%);
}
.chamada__titulo { color: #fff; font-size: clamp(1.625rem, 3vw, 2.5rem); font-weight: 700; line-height: 1.2; }
.chamada__titulo span { color: var(--c-lilas-2); }
.chamada__texto { max-width: 60ch; color: var(--c-lilas-3); font-size: 15px; line-height: 1.6; }
.chamada .btn { margin-top: 8px; }

/* FAQ herda de styles.css; só o fundo e o link mudam */
.faq__apoio a { color: var(--c-violeta); text-decoration: underline; }

/* ==========================================================================
   13. Responsivo
   ========================================================================== */
@media (max-width: 1100px) {
  .percurso { grid-template-columns: 1fr 1fr; gap: 32px 28px; }
  /* em duas colunas a linha apontaria para o vazio no fim de cada fileira */
  .percurso__item::before, .percurso__item::after { display: none; }
  .metodologia { grid-template-columns: 1fr; gap: 40px; }
  .publico { grid-template-columns: 1fr; }
  .participacao { grid-template-columns: 1fr; }
  .participacao__foto img { max-height: 420px; }
}

@media (max-width: 860px) {
  /* Empilhado, o recuo de 66px do texto deixava a etapa fora do eixo da
     ficha logo abaixo. Aqui o balão sobe para cima do texto e tudo fica
     no mesmo centro. */
  .etapa-trilha { grid-template-columns: 1fr; gap: 18px; justify-items: center; }
  .etapa-trilha::before { display: none; }
  .etapa-trilha__texto { padding-left: 0; align-items: center; text-align: center; width: 100%; }
  .etapa-trilha__numero { position: static; }
  .etapa-trilha .ficha { width: 100%; }
  .trilha__cabecalho { justify-content: center; text-align: center; }
  .trilha__cabecalho > div { align-items: center; width: 100%; }
  .trilha__resumo { text-align: center; max-width: none; }
  .protocolo { grid-template-columns: 1fr; }
  .caminhos { grid-template-columns: 1fr; }
  .publico__cartoes { grid-template-columns: 1fr 1fr; }
  .resumo { grid-template-columns: 1fr; }
  .agenda { gap: 26px; }
  /* A colagem sangra a tela inteira e é ampliada.

     Ela nasceu num quadro de 1575×538 — deitadíssima. Dentro da coluna, com os
     24px de respiro de cada lado, virava uma tira de 114px de altura: os três
     retratos ficavam do tamanho de uma unha. Aqui ela sai da coluna pelas
     margens negativas e é ampliada a 190%, com o excedente cortado pelas
     bordas. O recorte é central, que é onde está o Prof. Bohus. */
  /* Sangra a tela inteira. O recorte de 122% que leva o conteúdo às bordas já
     vem da regra geral; aqui só se tira o respiro lateral da coluna. */
  .p-hero__arte {
    align-self: stretch;
    width: auto;
    max-width: none;
    margin-inline: calc(-1 * var(--gutter));
  }

  /* A sigla é o elemento de maior peso da dobra: ela ocupa quase a largura da
     frase abaixo. Como fica grande, o bloco desce um pouco em relação à arte —
     senão cobriria o rosto do Prof. Bohus em vez de encostar no fade. */
  .p-hero__titulo {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-top: -9%;
  }
  .p-hero__sigla { font-size: clamp(3.25rem, 17vw, 5rem); }
  .p-hero__titulo h1 { text-align: center; font-size: 1.0625rem; }
  .p-hero__texto { font-size: .9375rem; line-height: 1.6; }

  /* Cabeçalho da trilha: a sigla e o resumo ficavam lado a lado, e o resumo
     espremido na coluna da direita. Empilha, com os dois centrados — o mesmo
     eixo das etapas logo abaixo. */
  .trilha__cabecalho { grid-template-columns: 1fr; gap: 14px; text-align: center; }
  .trilha__cabecalho > div { align-items: center; }
  .trilha__resumo { padding-top: 0; }

  /* Metodologia: o conteúdo abaixo é corrido e alinhado à esquerda; o
     cabeçalho centrado ficava descolado dele. */
  .secao--metodologia .secao__cabecalho--centro { align-items: flex-start; text-align: left; }

  /* Empilhado, o ícone fica solto acima do texto — segue escondido no
     celular, agora por escolha de layout e não por estar deformado. */
  .percurso__destaque > .percurso__icone { display: none; }
  .percurso__destaque { gap: 0; }
}

@media (max-width: 620px) {
  .secao__cabecalho { margin-bottom: 28px; }
  .trilha { padding: 20px 16px; border-radius: 16px; }
  .protocolo__campos { grid-template-columns: 1fr; }
  .percurso { grid-template-columns: 1fr; gap: 26px; }
  .publico__cartoes { grid-template-columns: 1fr; }
  .ficha__grade { grid-template-columns: 1fr; gap: 12px; }
  .participacao__lista li { grid-template-columns: 1fr; gap: 6px; }
  .carrossel__trilho li { width: 72%; }
  .p-hero__arte img { border-radius: 0 0 14px 14px; }

  /* prévia mais curta: no celular o texto completo é impraticável */
  .gaveta__conteudo { --altura-previa: 420px; }
}

@media (prefers-reduced-motion: reduce) {
  .gaveta__conteudo, .carrossel__trilho { transition: none; scroll-behavior: auto; }
}