/* ==========================================================================
   Instituto UNA — Coalizão Acadêmica
   Implementado a partir do Figma "Coalizão · Instituto UNA" (node 19870:1490).
   Depende de styles.css (tokens, cabeçalho, botões, FAQ, rodapé) e de
   programas.css (.secao, .secao__cabecalho, .secao__titulo, .secao__apoio).
   Os fundos foram amostrados pixel a pixel no render em resolução plena.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fundos das dobras
   -------------------------------------------------------------------------- */

/* Compromisso: base azul-noite com um clarão índigo no topo à direita e
   outro na base à esquerda — é a faixa diagonal que aparece no render. */
.secao--compromisso {
  color: #fff;
  background:
    radial-gradient(58% 62% at 80% 6%, #2c3b86 0%, rgba(44,59,134,0) 66%),
    radial-gradient(58% 62% at 6% 96%, #27347e 0%, rgba(39,52,126,0) 66%),
    var(--c-profundo);
}

/* Composição institucional.
   No Figma esta dobra tem texto branco e destaque em #c3caea sobre o lilás
   claro #aeb8ea — ou seja, o destaque é praticamente a própria cor do fundo,
   e some. O render do Figma tem o mesmo apagado. Aqui o lilás foi aprofundado
   mantendo a matiz, que é o que devolve legibilidade sem trocar a identidade
   da dobra. */
.secao--composicao {
  color: #fff;
  background: linear-gradient(142.55deg, #5f71cc 0%, #4659b8 74.07%);
}
.secao--composicao .secao__titulo--claro span { color: #d8ddf8; }
.secao--composicao .secao__apoio--claro { color: #e5e9fa; }
.secao--composicao .instituicoes__rotulo { color: rgba(255,255,255,.92); }

/* Membros: lavagem muito suave e bem alta — lilás no topo à direita,
   pêssego na base à esquerda, sobre o quase-branco da página. */
.secao--membros {
  background:
    radial-gradient(46% 24% at 88% 6%, rgba(186,196,244,.62) 0%, rgba(186,196,244,0) 70%),
    radial-gradient(52% 26% at 6% 96%, rgba(245,192,163,.70) 0%, rgba(245,192,163,0) 70%),
    var(--p-fundo);
}

/* Entrada na trilha: clarão azul só à esquerda, some antes da metade. */
.secao--entrada {
  background:
    radial-gradient(64% 116% at 4% 46%, rgba(178,199,250,.92) 0%, rgba(178,199,250,0) 66%),
    var(--p-fundo);
}

/* --------------------------------------------------------------------------
   2. Auxiliares
   -------------------------------------------------------------------------- */
.c-centro { display: flex; justify-content: center; }
.c-centro--acao { margin-top: 56px; }
.c-apoio--estreito { max-width: 62ch; margin-inline: auto; }

/* --------------------------------------------------------------------------
   3. Dobra 01 · Hero · Figma 19870:1511
   -------------------------------------------------------------------------- */
.c-hero { padding-top: clamp(120px, 12vw, 180px); }
/* colunas centradas uma contra a outra, não presas pelo topo */
.c-hero__topo { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; justify-content: space-between; }
.inteiro { white-space: nowrap; }
.c-hero__titulo { flex: 1 1 520px; max-width: 738px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.c-hero__h1 {
  color: var(--c-tinta-2);
  font-size: clamp(1.75rem, 3.4vw, 2.8125rem);   /* 45px no design */
  font-weight: 400;
  line-height: 1.3;
}
.c-hero__apoio { flex: 1 1 420px; max-width: 521px; display: flex; flex-direction: column; gap: 28px; }
/* Os dois rótulos ficam cada um numa linha só. Para caber nos 521px da coluna,
   o corpo e o respiro lateral cedem um pouco — é o que tira o aspecto "gordo"
   do primeiro botão, que antes quebrava em duas linhas e crescia em altura. */
.c-hero__acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.c-hero__acoes .btn {
  flex: none;
  padding: 16px 24px 16px 28px;
  font-size: 16px;
  white-space: nowrap;
}
/* Secundário do hero: contorno e texto em pêssego, como no Figma. */
.btn--pessego { border-color: var(--c-pessego-2); color: var(--c-pessego-2); }
.btn--pessego:hover, .btn--pessego:focus-visible { color: #fff; }
.btn__seta { flex: none; }
.c-hero__texto { color: var(--c-texto); font-size: 18px; line-height: 1.3; }

/* --------------------------------------------------------------------------
   4. Dobra 02 · Pilares · Figma 19870:1560
   -------------------------------------------------------------------------- */
/* Minibio: a janela reusa o fundo e o botão de fechar do lightbox; só o
   painel é próprio, porque aqui o conteúdo é texto e não vídeo. */
.minibio__painel {
  width: min(92vw, 720px);
  max-height: 82vh;
  overflow-y: auto;
  padding: clamp(24px, 4vw, 40px);
  border-radius: 20px;
  background: #fff;
}
.minibio__painel .membro__minibio-papel { color: var(--c-pessego-2); font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.minibio__painel .membro__minibio-nome { margin-top: 6px; color: var(--c-tinta); font-size: clamp(1.25rem, 2.6vw, 1.75rem); font-weight: 700; line-height: 1.25; }
.minibio__painel .membro__minibio-texto { margin-top: 16px; color: var(--c-texto); font-size: 16px; line-height: 1.7; }
.membro__lattes { display: inline-block; margin-top: 18px; color: var(--c-violeta); font-size: 15px; font-weight: 700; }
.membro__lattes:hover { text-decoration: underline; }

.c-abertura { display: flex; flex-wrap: wrap; gap: 60px; margin-top: 56px; }
.c-abertura > * { flex: 1 1 380px; }
.c-abertura .secao__apoio { max-width: none; }

.pilares { display: flex; flex-wrap: wrap; gap: 40px; margin-top: 56px; }
.pilar {
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.pilar__intro { color: #c3c9e6; font-size: 16px; line-height: 1.3; }
.pilar__anel { flex: none; width: 120px; height: 120px; }
.pilar__titulo { color: #fff; font-size: 22px; font-weight: 700; line-height: 1.3; }
.pilar__texto { color: #c3c9e6; font-size: 18px; line-height: 1.3; }

/* --------------------------------------------------------------------------
   5. Dobra 03 · Composição institucional
   -------------------------------------------------------------------------- */
.secao--composicao .secao__cabecalho { margin-bottom: 48px; }
.instituicoes--claro { margin-top: 0; }
.instituicoes--claro .instituicoes__rotulo { color: rgba(255,255,255,.86); }
.instituicoes--claro .instituicoes__divisoria { background: rgba(255,255,255,.34); }

/* --------------------------------------------------------------------------
   6. Membros · Figma 19870:1746
   -------------------------------------------------------------------------- */

/* Cabeçalho de duas colunas, centradas uma contra a outra — mesmo arranjo da
   home, mas aqui sobre fundo claro. */
.c-intro { display: flex; flex-wrap: wrap; align-items: center; gap: 35px; justify-content: space-between; }
.c-intro > div { display: flex; flex-direction: column; gap: 20px; }
/* container para o título se medir pela própria coluna, não pela janela */
.c-intro > div:first-child { flex: 1 1 480px; max-width: 560px; container-type: inline-size; }
.c-intro > div:last-child { flex: 1 1 480px; max-width: 665px; }
.c-intro__sobretitulo { color: var(--c-pessego-2); font-size: 22px; font-weight: 700; line-height: 1.3; }
/* O título traz duas quebras forçadas, então são exatamente 3 linhas — desde
   que a mais longa ("A estrutura que sustenta") caiba na coluna. Em vw ela não
   cabia e virava 4 linhas; em cqi o corpo acompanha a largura da própria
   coluna e a maior linha sempre entra. */
.c-intro__titulo { color: var(--c-tinta); font-size: clamp(1.625rem, 7.8cqi, 3.375rem); font-weight: 400; line-height: 1.3; }
.c-intro__pergunta { color: var(--c-tinta); font-size: clamp(1.25rem, 1.88vw, 1.5rem); font-weight: 700; line-height: 1.3; }
.c-intro__resposta { color: var(--c-texto); font-size: 20px; line-height: 1.3; }

.c-grupo__cabecalho { margin-top: 72px; margin-bottom: 32px; }
.c-grupo__titulo {
  color: var(--c-tinta-2);
  font-size: clamp(1.75rem, 4.53vw, 3.625rem);   /* 58px no design */
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
}
.c-grupo__titulo--solto { margin: 72px 0 32px; }

.membros { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.membros--unico { grid-template-columns: 1fr; max-width: 630px; margin-inline: auto; }

/* --- Cartão de membro ---------------------------------------------------- */
/* As posições da foto vêm do Figma em porcentagem da caixa de 630×420, para
   acompanharem o cartão em qualquer largura. */
.membro {
  position: relative;
  display: block;
  aspect-ratio: 630 / 420;
  overflow: hidden;
  border-radius: 16px;
  container-type: inline-size;
}
.membro--violeta      { background: linear-gradient(131.42deg, #6f81da 0%, #7c8ce8 74.07%); }
.membro--azul         { background: linear-gradient(131.42deg, #7c8ce8 0%, #6f81da 74.07%); }
.membro--lilas        { background: linear-gradient(131.42deg, #aeb8ea 0%, #7c8ce8 74.07%); }
.membro--lilas-claro  { background: linear-gradient(131.42deg, #aeb8ea 0%, #a8b6f0 74.07%); }
.membro--pessego      { background: linear-gradient(131.42deg, #fac9a9 0%, #eb834b 74.07%); }

.membro__foto {
  position: absolute;
  left: var(--f-l);
  top: var(--f-t);
  width: var(--f-w);
  height: var(--f-h);
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
}

.membro__topo {
  position: absolute;
  left: 4.44%;
  top: 6.19%;
  display: flex;
  align-items: center;
  gap: 12px;
}
.membro__papel {
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .48px;
  line-height: 1.15;
  text-transform: uppercase;
  white-space: nowrap;
}
.membro__selo {
  display: inline-flex;
  padding: 6px 14px;
  border-radius: 60px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .48px;
  line-height: 1.15;
  text-transform: uppercase;
  white-space: nowrap;
}
.membro__selo--contorno { border: 1px solid #fff; }
.membro__selo--escuro { background: var(--c-tinta); }
/* O Figma usa duas alturas para este selo: 186px quando o nome ocupa duas
   linhas e 225px quando ocupa três. Sem isso ele invade o nome mais longo. */
.membro__selo--abaixo { position: absolute; left: 4.44%; top: var(--selo-t, 53.57%); }

.membro__nome {
  position: absolute;
  left: 4.44%;
  top: 21.43%;
  width: 50.79%;
  color: #fff;
  font-size: clamp(1.125rem, 5.4cqi, 2.125rem);  /* 34px a 630px de cartão */
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.15;
  text-transform: uppercase;
}

/* Faixa: o texto vem repetido do design e é recortado nas bordas — só faz
   sentido em movimento, então corre devagar e para sob prefers-reduced-motion. */
.membro__faixa {
  position: absolute;
  left: 0;
  top: 71.43%;
  width: 100%;
  height: 8.1%;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* O recuo fica no contêiner: no <p> ele desequilibraria as duas metades e
     o laço daria um salto de 12px a cada volta. */
  padding-left: 12px;
  background: rgba(255,255,255,.12);
}
.membro__faixa p {
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .72px;
  line-height: 1.15;
  opacity: .8;
  text-transform: uppercase;
  white-space: nowrap;
  animation: faixa-corre 28s linear infinite;
}
@keyframes faixa-corre {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.membro__barra {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 20.48%;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 20px 18px 28px;
  background: var(--c-tinta);
}
.membro__bio { flex: 1 1 auto; color: var(--c-lilas-2); font-size: 14px; line-height: 1.3; }

.btn--saiba { flex: none; padding: 16px 24px 16px 28px; font-size: 15px; letter-spacing: .03em; text-transform: uppercase; }
.btn--saiba-azul { background: #a8b6f0; }

/* Cartão pêssego: fundo claro, então a tipografia e os selos invertem. */
.membro--pessego .membro__papel,
.membro--pessego .membro__nome { color: var(--c-tinta); }
.membro--pessego .membro__selo--contorno { border-color: var(--c-tinta); background: #fff; color: var(--c-tinta); }
.membro--pessego .membro__selo--escuro { background: #fff; color: var(--c-tinta); }
.membro--pessego .membro__faixa { background: rgba(36,31,82,.10); }
.membro--pessego .membro__faixa p { color: var(--c-tinta); }

/* --------------------------------------------------------------------------
   7. Dobra 04 · O que diz a liderança
   -------------------------------------------------------------------------- */
.c-depo__cabecalho { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 40px; }
.c-depo__link { color: var(--c-violeta); font-size: 18px; font-weight: 700; }
.c-depo__link:hover { text-decoration: underline; }

.c-depo__grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 20px; }
.c-depo__grade li { display: flex; flex-direction: column; gap: 6px; }
.cartao-video--depo {
  width: 100%;
  min-height: 0;
  aspect-ratio: 393 / 480;
  margin-bottom: 10px;
  border-radius: var(--raio);
}
.c-depo__nome { color: var(--c-tinta); font-size: 18px; font-weight: 700; line-height: 1.3; padding-inline: 28px; }
.c-depo__papel { color: var(--c-texto); font-size: 16px; line-height: 1.3; padding-inline: 28px; }

/* --------------------------------------------------------------------------
   8. Dobra 05 · Formação conduzida e ciclos
   -------------------------------------------------------------------------- */
.c-formacao { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.c-formacao__texto { flex: 1 1 460px; max-width: 630px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
/* Os dois parágrafos de abertura são um texto de introdução só: mesmo corpo,
   mesma cor e mesmo peso. O `margin-top` extra saiu para o vão entre eles
   ficar em uma linha, e não em duas. */
.c-formacao__destaque,
.c-formacao__corpo { color: var(--c-texto); font-size: 18px; font-weight: 700; line-height: 1.3; }

/* Gaveta de texto longo, em dobra clara.
   O estado fechado usa :not() em vez de uma segunda regra com max-height
   maior: com duas declarações disputando a cascata, a gaveta ficava travada
   na altura da prévia mesmo com a classe de aberta aplicada. */
.gaveta-texto { width: 100%; }
.gaveta-texto__conteudo { position: relative; }
.gaveta-texto__conteudo:not(.esta-aberta) { max-height: 190px; overflow: hidden; }
.gaveta-texto__conteudo:not(.esta-aberta)::after {
  content: "";
  position: absolute; inset-inline: 0; bottom: 0; height: 90px;
  /* mesma cor do fundo de `.secao--clara`; o fallback cobre o caso de esta
     página deixar de carregar programas.css, onde --p-fundo é declarada */
  background: linear-gradient(to bottom, rgba(250,250,252,0), var(--p-fundo, #fafafc));
}
.gaveta-texto__conteudo p { color: var(--c-texto); font-size: 16px; line-height: 1.7; }
.gaveta-texto__conteudo p + p { margin-top: 14px; }
.gaveta-texto__assinatura {
  margin-top: 24px !important;
  color: var(--c-pessego-2) !important;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.gaveta-texto__botao {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px;
  padding: 11px 24px;
  border: 1px solid var(--c-borda-2);
  border-radius: 60px;
  background: #fff;
  color: var(--c-tinta);
  font-size: 15px; font-weight: 700;
  cursor: pointer;
  transition: background-color var(--t-lento) var(--e-suave), border-color var(--t-lento) var(--e-suave);
}
.gaveta-texto__botao:hover { border-color: var(--c-violeta); background: var(--c-fundo-lilas); }
.c-formacao__ciclos { flex: 1 1 460px; max-width: 630px; display: flex; flex-direction: column; gap: 20px; }

.ciclo {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 32px;
  border: 1px solid var(--c-borda);
  border-radius: 24px;
  background: #fff;
}
.ciclo__cabecalho { display: flex; align-items: center; gap: 14px; }
.ciclo__selo {
  flex: none;
  padding: 6px 16px;
  border-radius: 60px;
  background: var(--c-violeta);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
.ciclo__sigla { color: var(--c-tinta-2); font-size: 26px; font-weight: 700; line-height: 1.3; }

.ciclo__fases { display: flex; flex-direction: column; gap: 16px; }
.ciclo__fases .fase { display: flex; gap: 16px; align-items: flex-start; padding-top: 17px; border-top: 1px solid var(--c-borda); }
.fase__rotulo { flex: none; width: 72px; color: var(--c-violeta); font-size: 18px; font-weight: 700; line-height: 1.45; }
.fase__corpo { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; }
.fase__texto { flex: 1 1 auto; color: var(--c-tinta-2); font-size: 19px; line-height: 1.45; }
.fase__modulos { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.fase__modulos li {
  position: relative;
  padding-left: 16px;
  color: var(--c-texto);
  font-size: 17px;
  line-height: 1.5;
}
.fase__modulos li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-violeta);
}

/* --------------------------------------------------------------------------
   9. Dobra 06 · Entrada na trilha
   -------------------------------------------------------------------------- */
.c-entrada__acao { display: flex; flex-direction: column; align-items: center; gap: 24px; padding-top: 16px; }
.c-entrada__nota { display: flex; flex-direction: column; gap: 6px; max-width: 902px; text-align: center; }
.c-entrada__nota-forte { color: var(--c-tinta-2); font-size: 20px; font-weight: 700; line-height: 1.45; }
.c-entrada__nota-fraca { color: var(--c-texto); font-size: 18px; line-height: 1.5; }

/* ==========================================================================
   10. Responsivo
   ========================================================================== */
@media (max-width: 1100px) {
  .c-depo__grade { grid-template-columns: repeat(2, 1fr); }
  .membro__barra { gap: 14px; padding: 14px 16px; }
  .membro__bio { font-size: 13px; }
  .btn--saiba { padding: 12px 18px 12px 22px; font-size: 13px; }
}

@media (max-width: 900px) {
  /* Dois cartões lado a lado ficariam pequenos demais para o nome e a barra. */
  .membros { grid-template-columns: 1fr; }
  .membros--unico { max-width: none; }
  .c-abertura { gap: 24px; }
  .c-abertura > * { flex-basis: 100%; }
  /* Empilhado, o título e o apoio ficavam à esquerda enquanto os pilares logo
     abaixo são centrados — passam a dividir o mesmo eixo. */
  .c-abertura { text-align: center; }
  .c-abertura .secao__apoio { margin-inline: auto; }
}

@media (max-width: 760px) {
  .c-depo__grade { grid-template-columns: 1fr; gap: 32px; }

  /* Abaixo desta largura o arranjo absoluto do cartão não cabe: o conteúdo
     passa a fluir e a foto vira uma faixa no topo. */
  .membro { aspect-ratio: auto; display: flex; flex-direction: column; }
  .membro__foto { position: relative; left: auto; top: auto; width: 100%; height: 210px; object-position: center 18%; }
  /* O papel é nowrap no desktop; num cartão de 335px "— COORDENAÇÃO TÉCNICA
     E CIENTÍFICA" passaria da borda. Aqui ele pode quebrar. */
  .membro__topo { position: static; flex-wrap: wrap; padding: 20px 20px 0; }
  .membro__papel { white-space: normal; }
  .membro__selo { white-space: normal; }
  .membro__nome { position: static; width: auto; padding: 14px 20px 0; font-size: 1.5rem; }
  .membro__selo--abaixo { position: static; align-self: flex-start; margin: 14px 20px 20px; }
  .membro__faixa { position: static; height: 34px; flex: none; }
  .membro__barra { position: static; height: auto; flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px; }
  .btn--saiba { align-self: stretch; justify-content: center; }
}

@media (max-width: 620px) {
  .c-hero { padding-top: 110px; }
  /* no celular cada botão ocupa a linha inteira */
  .c-hero__acoes .btn { flex: 1 1 100%; justify-content: center; white-space: normal; }
  /* numa coluna estreita o nome inteiro estouraria a tela */
  .inteiro { white-space: normal; }
  .ciclo { padding: 22px 18px; }
  .fase__rotulo { width: 60px; font-size: 16px; }
  .fase__texto { font-size: 17px; }
  .ciclo__fases .fase { gap: 12px; }
  .pilares { gap: 44px; }
  .c-entrada__acao .btn { align-self: stretch; justify-content: center; }
  .c-depo__nome, .c-depo__papel { padding-inline: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .membro__faixa p { animation: none; }
}