/* ==========================================================================
   Instituto UNA — Home
   Implementado a partir do Figma "Site Instituto UNA" (node 19190:3)
   Stack: HTML + CSS + JS puro, sem build. Ver docs/dobras.md.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Cores */
  --c-tinta:        #241f52;
  /* Escuro único do site. O antigo #242b58 sobrevive apenas na dobra
     "Estrutura oficial" da home, declarado literalmente lá. */
  --c-tinta-2:      #241f52;
  --c-nav:          #242949;
  --c-profundo:     #1a2248;
  --c-primaria:     #6b7fe3;
  /* Cor de origem da família roxa, definida pela cliente. É a mesma do item
     ativo do menu, que serve de referência. Todos os outros tons são ela em
     outra luminosidade — a matiz (230°) não muda, e é isso que tira o site do
     lado "uva" do círculo. */
  --c-violeta:      #6b7fe3;
  --c-violeta-2:    #8696e4;
  --c-lilas:        #aeb8ea;
  --c-lilas-2:      #c3caea;
  --c-lilas-3:      #d1d7f4;
  --c-texto:        #5b6085;
  /* Família laranja ancorada na cor da cliente: #eb834b = hsl(21, 80%, 61%).
     Os tons claro e profundo são a MESMA matiz e saturação, só mudando a
     luminosidade — era a saturação em 100% dos tons antigos (#ffd9b8 /
     #ffb280) que puxava tudo para o salmão. */
  --c-laranja:       #eb834b;   /* base — definida pela cliente */
  --c-laranja-2:     #eb834b;
  --c-laranja-claro: #f1a67f;   /* hsl(21, 80%, 72%) */
  --c-laranja-fundo: #e6611a;   /* hsl(21, 80%, 50%) */
  --c-pessego-1:     #fac9a9;   /* ponta clara do par, remapeada do #ffd9b8 */
  --c-pessego-2:     #eb834b;   /* ponta escura do par, remapeada do #ffb280 */
  --c-areia:         #f4d9b8;
  --c-fundo:        #f6f6f9;
  --c-fundo-lilas:  #f4f5fd;   /* remapeado do #f6f4fd para a matiz 230 */
  --c-fundo-card:   #f6f6ff;
  --c-borda:        #e2e2e2;
  --c-borda-2:      #d7d7d7;

  /* Gradientes */
  /* Amplitude de claro para escuro como no botão original — o que mudou foi
     só a matiz. Com os dois tons muito próximos o botão parecia sólido. */
  --g-pessego: linear-gradient(90deg, #fac9a9 0%, #eb834b 100%);
  --g-lilas:   linear-gradient(142.55deg, #aeb8ea 0%, #7c8ce8 74.07%);
  --g-profundo: linear-gradient(162.9deg, #242b58 0%, #3d4a9f 55%, #465cc8 100%);
  --g-retrato-a: linear-gradient(122.89deg, #7f92ef 0%, #8696e4 71.94%);
  --g-retrato-b: linear-gradient(118.69deg, #aeb8ea 0%, #7c8ce8 74.07%);

  /* Brilhos radiais recorrentes do design (sobre --c-fundo-lilas) */
  --brilho-a: radial-gradient(55% 55% at 80% 20%, rgba(169,182,247,.60) 0%, rgba(169,182,247,.27) 60%, rgba(169,182,247,0) 100%);
  --brilho-b: radial-gradient(55% 55% at 20% 80%, rgba(188,198,245,.80) 0%, rgba(188,198,245,.36) 60%, rgba(188,198,245,0) 100%);

  /* Layout */
  --container: 1280px;
  --gutter: 24px;
  --raio: 12px;
  /* Respiro vertical de toda dobra. A cliente pediu as dobras mais próximas:
     70px no desktop, contra os 100 de antes. Fica como token porque é o
     número que amarra o ritmo do site inteiro — mudar em um lugar só. */
  --espaco-dobra: clamp(40px, 5vw, 70px);

  /* Escala de apresentação — ver o bloco "Escala" logo abaixo. */
  --quadro-design: 2560px;  /* 1920 do Figma ÷ 0,75: o recuo pedido pela cliente */
  --escala-min: .62;        /* piso: abaixo disso o corpo de texto cai de 11px */
  --escala-max: .75;        /* teto: o desenho nunca passa de 75% do tamanho real */
  /* A razão aplicada ao body. Exposta como token porque `vw` NÃO enxerga o
     zoom — quem precisar da largura lógica da página divide 100vw por ela. */
  --escala: clamp(var(--escala-min), calc(100vw / var(--quadro-design)), var(--escala-max));

  /* Movimento — uma curva só para tudo, para o site ter um "peso" coerente */
  --e-suave: cubic-bezier(.22, 1, .36, 1);
  --t-rapido: .28s;
  --t-lento: .5s;
  --t-revelar: .9s;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 110px; }

/* --------------------------------------------------------------------------
   Escala de apresentação
   O desenho de 1920 do Figma não é mostrado em 1:1: a cliente pediu um recuo
   de 25%, equivalente a deixar o navegador em 75%. Por isso o quadro de
   referência é 2560 (= 1920 ÷ 0,75) em vez de 1920 — a conta é a mesma, só
   com o alvo deslocado.

     1280           → 0.62     piso; abaixo disso o corpo de texto fica ilegível
     1600           → 0.63
     1843           → 0.72     a tela da cliente, igual ao print aprovado
     2560 ou mais   → 0.75     teto

   Continua dinâmico entre esses pontos: redimensionar a janela acompanha.
   O corte em 1100px mantém as media queries de tablet e celular valendo sobre
   a mesma largura que elas medem.
   -------------------------------------------------------------------------- */
@media (min-width: 1101px) {
  body { zoom: var(--escala); }
}

body {
  margin: 0;
  background: #fff;
  color: var(--c-tinta);
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* h4/h5/h6 faltavam aqui: herdavam a margem do navegador (1.33em) e
   desciam sozinhos — era o que jogava o nome dos cartões de membro
   45px abaixo da posição do design. */
h1, h2, h3, h4, h5, h6, p, figure, ul, dl { margin: 0; }
/* O <ol> faltava aqui e carregava os 40px de recuo do navegador: empurrava e
   estreitava listas inteiras, desalinhando-as do resto da dobra. Quem precisa
   de recuo e marcador declara por conta própria (ver .intro__passos). */
ul, ol { padding: 0; list-style: none; }

/* Qualquer `display` declarado depois vence o `hidden` do navegador. Como o
   atributo é usado para mostrar e esconder etapas e respostas, ele precisa
   ganhar sempre. */
[hidden] { display: none !important; }

/* Evita a última palavra sozinha na linha. `pretty` só corrige a viúva;
   `balance` reequilibraria TODAS as linhas, quebrando títulos longos em
   várias linhas curtas — que é o oposto do que se quer aqui. */
h1, h2, h3, h4, h5, p, li, dd, figcaption { text-wrap: pretty; }
/* Quebra de linha escolhida, não a que a largura produziria por acaso.
   Só vale onde há espaço; abaixo disso o texto volta a quebrar sozinho. */
.quebra-ampla { display: none; }
@media (min-width: 1000px) { .quebra-ampla { display: inline; } }
/* O oposto: quebra que só existe no celular, para rótulos longos de botão que
   lá partem em lugar ruim e no desktop cabem numa linha. */
.quebra-estreita { display: none; }
@media (max-width: 620px) { .quebra-estreita { display: inline; } }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
hr { border: 0; }

/* O conteúdo útil mede 1280px (igual ao Figma); o gutter é acrescentado por fora
   e só passa a comprimir o conteúdo em telas menores que 1280 + 2·gutter. */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Escondido por recorte, não por deslocamento: `left:-9999px` alarga o
   documento e cria rolagem horizontal fantasma. */
.pular-para-conteudo {
  position: absolute; left: 0; top: 0; z-index: 999;
  width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
  background: var(--c-tinta); color: #fff; padding: 12px 20px; border-radius: 0 0 8px 0;
}
.pular-para-conteudo:focus {
  width: auto; height: auto; overflow: visible; clip-path: none;
}

:focus-visible { outline: 3px solid var(--c-primaria); outline-offset: 3px; border-radius: 4px; }

/* Utilitário: texto com preenchimento em gradiente */
.texto-gradiente {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Surgimento na rolagem.
   A classe `.revelar` é aplicada pelo JS, nunca no HTML: sem JS (ou com
   "reduzir movimento" ligado) o conteúdo nasce visível e nada é escondido. */
.revelar {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  filter: blur(8px);
  transition: opacity var(--t-revelar) var(--e-suave),
              transform var(--t-revelar) var(--e-suave),
              filter var(--t-revelar) var(--e-suave);
  transition-delay: var(--atraso, 0ms);
}
.revelar.is-visivel {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* --------------------------------------------------------------------------
   3. Componentes reutilizáveis
   -------------------------------------------------------------------------- */

/* Botão pêssego (CTA padrão).
   No hover, uma camada de gradiente roxo entra por cima do pêssego — gradiente
   não é animável, então cruzamos a opacidade de um pseudo-elemento. */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 28px 20px 34px;
  border: 0;
  border-radius: 60px;
  background: var(--g-pessego);
  color: var(--c-tinta);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  text-align: left;
  transition: color var(--t-lento) var(--e-suave),
              transform var(--t-lento) var(--e-suave),
              box-shadow var(--t-lento) var(--e-suave),
              border-color var(--t-lento) var(--e-suave);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--g-lilas);
  opacity: 0;
  transition: opacity var(--t-lento) var(--e-suave);
}
.btn img { flex: none; transition: filter var(--t-lento) var(--e-suave); }

.btn:hover,
.btn:focus-visible {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(124, 140, 232, .28);
}
.btn:hover::before,
.btn:focus-visible::before { opacity: 1; }
.btn:hover img,
.btn:focus-visible img { filter: brightness(0) invert(1); }
.btn:active { transform: translateY(0); transition-duration: var(--t-rapido); }

.btn--pequeno {
  padding: 14px 22px 14px 26px;
  font-size: 16px;
  gap: 10px;
}

.btn--contorno {
  background: transparent;
  border: 1px solid var(--c-tinta);
}
.btn--contorno:hover,
.btn--contorno:focus-visible { border-color: transparent; }

/* Selo / pílula */
.selo-pilula {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 30px;
  border-radius: 60px;
  background: var(--c-primaria);
  color: #fff;
  font-size: clamp(1.125rem, 1.7vw, 1.375rem);
  font-weight: 700;
}

.tag {
  display: inline-flex;
  padding: 8px 22px;
  border-radius: 60px;
  background: linear-gradient(90deg, #8696e4 0%, #6f81da 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

/* Logo (máscara alpha exportada do Figma, recolorida por CSS) */
.logo {
  display: block;
  width: 155px;
  height: 38px;
  -webkit-mask: url(../img/logo-una-mask.png) no-repeat center / contain;
          mask: url(../img/logo-una-mask.png) no-repeat center / contain;
}
.logo--claro  { background-color: var(--c-primaria); }
.logo--escuro { background-color: var(--c-tinta); }

/* --------------------------------------------------------------------------
   4. Cabeçalho · Figma 19190:484
   -------------------------------------------------------------------------- */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(246,246,249,.92);
  border-bottom: 2px solid var(--c-borda-2);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}
.cabecalho__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 101px;
  padding: 24px 60px;
}

.menu { display: contents; }
/* Colunas iguais: em grade sob restrição de max-content, trilhas `1fr` ficam
   todas do tamanho da mais larga. Assim os botões têm a mesma medida sem
   número mágico — se um rótulo mudar, todos acompanham. */
/* Largura proporcional à palavra, altura igual para todos. Chegaram a ter
   largura idêntica (grid de colunas 1fr), mas aí "Home" ficava com folga
   enorme ao lado de "Cursos UNA" — o que precisa casar é só a altura. */
.menu__lista {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border-radius: 8px;
}
.menu__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--c-nav);
  color: #fff;
  font-size: 14px;
  white-space: nowrap;
  transition: background .18s ease;
}
.menu__item:hover { background: #343a66; }
/* O item ativo só acende: mesma altura e mesma largura dos demais. */
.menu__item.is-ativo { background: var(--c-primaria); }

.menu__cta-mobile { display: none; }

.hamburguer {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: var(--c-nav);
  cursor: pointer;
}
.hamburguer span {
  display: block;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.hamburguer[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburguer[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguer[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   5. Dobra 01 · Hero · Figma 19190:4
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 653px;
  background: var(--c-fundo);
  overflow: hidden;
}
/* No Figma a arte ocupa a metade direita da tela (960 de 1920) — mantemos a
   proporção em 50% para que a sobreposição com o título seja a mesma do design. */
.hero__arte {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  min-width: 560px;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding-block: 44px;
}
/* A coluna foi de 737 para 840: com a fonte maior, manter a largura antiga
   jogaria a headline para cinco linhas. */
.hero__inner > * { max-width: 840px; }

.hero__selo {
  padding: 4px 30px;
  border-radius: 60px;
  background: linear-gradient(173.29deg, #aeb8ea 0%, #7c8ce8 74.07%);
  color: #fff;
  font-size: clamp(1rem, 1.7vw, 1.375rem);
  font-weight: 700;
}
.hero__titulo {
  /* mínimo preservado: é o H1 da página, 24px o achatava contra o corpo.
     Teto de volta a 4rem a pedido da cliente, agora acompanhado da coluna
     mais larga — foi o estreitamento, não a fonte, que inflava as linhas. */
  font-size: clamp(1.625rem, 5.4vw, 4rem);
  font-weight: 600;
  line-height: 1.12;
  background: var(--g-lilas);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__role {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--c-laranja);
  font-size: 18px;
  font-weight: 600;
}
.icone-chevron {
  width: 20px;
  height: 20px;
  background: linear-gradient(120.47deg, #aeb8ea 0%, #7c8ce8 74.07%);
  -webkit-mask: url(../img/scroll-mask.png) no-repeat center / contain;
          mask: url(../img/scroll-mask.png) no-repeat center / contain;
  animation: flutuar 1.8s ease-in-out infinite;
}
@keyframes flutuar { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* --------------------------------------------------------------------------
   6. Dobra 02 · Siglas · Figma 19190:22
   -------------------------------------------------------------------------- */
.siglas { background: #fff; padding-block: 30px; }
/* A faixa ocupa a largura do grid, a pedido da cliente: três colunas iguais,
   a primeira sigla encostada na margem esquerda e a última na direita. As
   divisórias caem naturalmente em 1/3 e 2/3 porque são a borda das colunas. */
.siglas__lista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
}
.siglas__lista li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 119px;
}
.siglas__lista li:first-child { justify-content: flex-start; }
.siglas__lista li:last-child { justify-content: flex-end; }
.siglas__lista li + li { border-left: 1px solid #d9d9d9; }
.siglas__lista li {
  background: var(--g-pessego);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(2.1875rem, 6.25vw, 5rem);
  font-weight: 700;
  line-height: .86;
  letter-spacing: -.04em;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   7. Dobra 03 · Save the date · Figma 19772:48
   -------------------------------------------------------------------------- */
.save-date {
  padding-block: var(--espaco-dobra);
  background:
    radial-gradient(60% 60% at 15% 25%, rgba(188,198,245,.75) 0%, rgba(188,198,245,.3375) 60%, rgba(188,198,245,0) 100%),
    radial-gradient(45% 45% at 90% 45%, rgba(245,192,163,.55) 0%, rgba(245,192,163,.2475) 60%, rgba(245,192,163,0) 100%),
    var(--c-fundo-lilas);
}
/* Ritmo apertado a pedido da cliente: menos respiro entre o título, o filete e
   as datas, e tudo um ponto menor — o bloco estava espalhado demais. */
.save-date__inner { display: flex; flex-direction: column; gap: 22px; }
.save-date__cabecalho { display: flex; flex-direction: column; gap: 8px; }
.save-date__titulo {
  font-size: clamp(2rem, 5.6vw, 4.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--c-tinta);
}
.save-date__linha-fina { color: var(--c-texto); font-size: clamp(1rem, 1.45vw, 1.125rem); line-height: 1.45; }
.save-date__filete { height: 1px; background: #d9ddef; }
.save-date__datas { display: flex; flex-wrap: wrap; gap: 32px; }
.save-date__datas li { flex: 1 1 260px; display: flex; flex-direction: column; gap: 6px; }
.save-date__data {
  font-size: clamp(1.625rem, 3.75vw, 3rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.01em;
}
.save-date__data--laranja { color: var(--c-laranja-2); }
.save-date__data--roxo { color: var(--c-violeta); }
/* O azul #14548d puxava para o verde ao lado das datas quentes. Aqui a linha
   usa o escuro da fonte: a data colorida continua sendo o elemento alto e o
   nome do treinamento fica logo abaixo dela, sem disputar a atenção. */
.save-date__evento { color: var(--c-tinta); font-size: 17px; font-weight: 700; line-height: 1.35; }
.save-date__detalhe { color: var(--c-texto); font-size: 15px; line-height: 1.4; }

/* --------------------------------------------------------------------------
   8. Bloco estrutura oficial (fundo) · Figma 19195:2
   -------------------------------------------------------------------------- */
.bloco-estrutura {
  background:
    radial-gradient(60% 60% at 35% 45%, rgba(169,189,247,.35) 0%, rgba(169,189,247,.1575) 60%, rgba(169,189,247,0) 100%),
    radial-gradient(50% 50% at 8% 90%, rgba(245,192,163,.50) 0%, rgba(245,192,163,.225) 60%, rgba(245,192,163,0) 100%),
    radial-gradient(55% 55% at 85% 12%, rgba(188,198,245,.85) 0%, rgba(188,198,245,.3825) 60%, rgba(188,198,245,0) 100%),
    var(--c-fundo-lilas);
  padding-block: var(--espaco-dobra);
}

/* Dobra 04 · Intro · Figma 19190:53 */
.estrutura-intro .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.estrutura-intro__titulo {
  font-size: clamp(1.375rem, 3.2vw, 2.5625rem);
  font-weight: 700;
  line-height: 1.25;
  background: var(--g-profundo);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.estrutura-intro__apoio {
  /* Literal, e não o token: esta dobra é a ressalva combinada e mantém o
     #242b58 original, que acompanha o gradiente do título logo acima. */
  color: #242b58;
  font-size: clamp(.9375rem, 1.88vw, 1.5rem);
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   9. Dobra 05 · Bohus + programas · Figma 19190:58
   -------------------------------------------------------------------------- */
.programas { padding-top: clamp(48px, 5.5vw, 89px); }
.programas .container { display: flex; flex-direction: column; gap: 20px; }
/* As linhas têm 20px de recuo interno no Figma (cartões de 340 a 1580). */
.programas__linha { display: flex; gap: 30px; align-items: stretch; padding-inline: 20px; }

/* Cartão de vídeo (placeholder até o arquivo chegar) */
.cartao-video {
  position: relative;
  flex: none;
  width: 520px;
  min-height: 660px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  border: 0;
  border-radius: var(--raio);
  background: linear-gradient(107.65deg, #242b58 0%, #3d4a9f 55%, #465cc8 100%);
  cursor: pointer;
  overflow: hidden;
}
/* Capa do vídeo: preenche o cartão inteiro, com o play por cima. */
.cartao-video__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
/* Véu leve para o play não se perder nos tons claros da foto. */
.cartao-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(38% 28% at 50% 50%, rgba(14,20,48, .34) 0%, rgba(14,20,48, 0) 100%);
  transition: opacity .2s ease;
}
/* Play e legenda formam um grupo só, ancorado a 57% da altura do cartão, que
   é onde o Figma os coloca — não centrado. */
.cartao-video__grupo {
  position: absolute;
  left: 50%;
  top: 57%;
  z-index: 1;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
}
.cartao-video__legenda {
  padding: 10px 14px;
  border-radius: 20px;
  background: linear-gradient(167.4deg, #aeb8ea 0%, #7c8ce8 74.07%);
  color: var(--c-fundo-card);
  font-size: 18px;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
}

/* Botão de play em SVG: o antigo play-72.webp não tinha alpha — era um
   ladrilho azul opaco, que aparecia como um quadrado sobre a foto.
   z-index porque o ::after é o último filho e pintaria por cima dele. */
.cartao-video__play {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border: 1.5px solid rgba(255, 255, 255, .72);
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  color: #fff;
  transition: transform .2s ease, background .2s ease;
}
/* o triângulo parece deslocado quando centrado pela geometria */
.cartao-video__play svg { margin-left: 4px; }
.cartao-video:hover .cartao-video__play { transform: scale(1.08); background: rgba(255, 255, 255, .34); }
/* O vídeo é 16:9 e o cartão é retrato: `contain` preserva o enquadramento
   original em vez de esticar a imagem. */
/* Player em sobreposição ----------------------------------------------------
   O cartão é retrato (520×660) e o vídeo é 16:9 — dentro dele o vídeo ficava
   espremido. O clique abre o vídeo por cima da página, no formato dele. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(11,16,40, .84);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  animation: lightbox-entra .22s ease;
}
@keyframes lightbox-entra { from { opacity: 0; } to { opacity: 1; } }

.lightbox__palco {
  /* trocado em tempo de execução quando o arquivo tem outra proporção */
  --proporcao: 16 / 9;
  position: relative;
  width: min(92vw, calc(84vh * (var(--proporcao))), 1180px);
  aspect-ratio: var(--proporcao);
  overflow: hidden;
  border-radius: 14px;
  background: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.lightbox__palco > video,
.lightbox__palco > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lightbox__palco > video { object-fit: contain; }
.lightbox__erro { display: grid; place-items: center; height: 100%; color: #fff; font-size: 16px; }

/* --------------------------------------------------------------------------
   Controles próprios do player do YouTube

   O embed roda com `controls=0`, porque a barra do YouTube traz junto o título
   do vídeo, o canal de quem subiu, o logo e o compartilhar — coisas que não
   têm o que fazer num site de cliente. Sem ela, estes aqui fazem o trabalho.
   -------------------------------------------------------------------------- */
.tem-yt { position: relative; }
.yt-controles { position: absolute; inset: 0; z-index: 2; }

/* Camada transparente sobre o vídeo: toque em qualquer lugar pausa e retoma.
   Também é ela que impede o clique de chegar ao iframe do YouTube. */
.yt-toque {
  position: absolute;
  inset: 0 0 56px;
  width: 100%;
  border: 0;
  background: none;
  cursor: pointer;
}

.yt-barra {
  position: absolute;
  right: 0; bottom: 0; left: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(to top, rgba(10, 14, 36, .82) 0%, rgba(10, 14, 36, 0) 100%);
}
.yt-play,
.yt-som {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  cursor: pointer;
  transition: background .2s ease;
}
.yt-play:hover,
.yt-som:hover { background: rgba(255, 255, 255, .32); }

/* A faixa visível é fina, mas a área de toque tem 16px: numa barra de 4px o
   dedo erra o alvo no celular. */
.yt-trilha {
  position: relative;
  flex: 1 1 auto;
  height: 16px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.yt-trilha::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 4px;
  margin-top: -2px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .3);
}
.yt-progresso {
  position: relative;
  height: 4px;
  border-radius: 4px;
  background: var(--c-pessego-2, #eb834b);
  width: 0;
}
.yt-tempo {
  flex: none;
  color: #fff;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

@media (max-width: 620px) {
  .yt-barra { gap: 10px; padding: 10px 12px; }
  .yt-tempo { font-size: 12px; }
}

.lightbox__fechar {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.lightbox__fechar::before { content: "\00d7"; font-size: 26px; line-height: 1; }
.lightbox__fechar:hover { background: rgba(255, 255, 255, .28); transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  .lightbox { animation: none; }
  .lightbox__fechar { transition: none; }
  .lightbox__fechar:hover { transform: none; }
}

@media (max-width: 620px) {
  .lightbox { padding: 14px; }
  /* No celular o palco usa toda a largura e ganha um piso de altura.

     Antes ele era só largura × proporção: um vídeo 16:9 virava uma faixa de
     ~200px de altura, e a barra de progresso, os botões de ±10s e o play do
     player do Drive — que têm altura fixa — não cabiam, empilhando em cima do
     vídeo. Com o piso, o player tem onde respirar; sobra tarja preta nas
     bordas do vídeo deitado, que é como todo player se comporta. */
  .lightbox__palco {
    width: 94vw;
    min-height: min(52vh, calc(94vw * 16 / 9));
    max-height: 84vh;
  }
  .lightbox__fechar { top: 10px; right: 10px; width: 38px; height: 38px; }
}

.cartao-bio {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  /* O conteúdo ocupava 441px de um cartão de 620 e sobrava um vão embaixo,
     com a minibio comprimida em cima. O respiro maior usa o espaço que já
     existia em vez de encolher o cartão. */
  padding: 36px 34px;
  border-radius: var(--raio);
  background: var(--c-fundo-card);
}
.cartao-bio__nome { color: var(--c-tinta-2); font-size: clamp(1.5rem, 2.97vw, 2.375rem); font-weight: 700; }
.cartao-bio__papel {
  font-size: clamp(1.125rem, 1.88vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  background: linear-gradient(174.92deg, #aeb8ea 0%, #7c8ce8 74.07%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* entrelinha 1.3 em três parágrafos seguidos lia como um bloco maciço */
.cartao-bio__texto { display: flex; flex-direction: column; gap: 1.15em; color: var(--c-texto); font-size: clamp(1rem, 1.56vw, 1.25rem); line-height: 1.55; }

.programas__linha--2 { align-items: stretch; }

/* Os três boxes agora dividem a linha inteira (Figma 19870:290), no lugar do
   arranjo antigo de imagem à esquerda e caixas empilhadas à direita. */
.programas__caixas {
  flex: 1 1 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
/* Três faixas: título no topo, texto elástico no meio, botão embaixo. Como as
   caixas têm a mesma altura, o botão cai na mesma linha nas três mesmo com
   textos de tamanhos diferentes — com flex centrado ele dançava.
   (subgrid seria o natural, mas container-type aplica contenção de tamanho e
   invalida o subgrid; a sigla depende do container-type, então fica assim.) */
.caixa {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 24px;
  min-height: 388px;
  padding: 24px 30px;
  border-radius: 6px;
  overflow: hidden;
  /* a sigla é dimensionada pela largura do próprio box */
  container-type: inline-size;
}
.caixa__texto { display: flex; flex-direction: column; gap: 8px; }
.caixa h3 { color: var(--c-tinta); font-size: 22px; font-weight: 700; line-height: 1.3; }

/* Sigla em caixa-alta pintada por gradiente. Em cqi ela acompanha a largura
   do box — com medida fixa, o texto que passasse da caixa ficaria sem fundo
   e sumiria, como aconteceu no rótulo da coalizão. */
.caixa .caixa__sigla {
  /* 17.6cqi: cqi mede a caixa de conteúdo (340px num box de 400), então
     17.6% dela dá os 60px do desenho. */
  font-size: clamp(1.75rem, 17.6cqi, 3.75rem);
  font-weight: 700;
  line-height: .86;
  letter-spacing: -.04em;
  white-space: nowrap;
  background: linear-gradient(161.74deg, #aeb8ea 0%, #7c8ce8 74.07%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.caixa .caixa__sigla--laranja {
  background: var(--g-pessego);
  -webkit-background-clip: text;
  background-clip: text;
}
/* Versão em frase da sigla: mesma família de título, corpo menor porque são
   duas linhas de palavras e não uma sigla curta — assim ela fecha na mesma
   altura das siglas e as três faixas do subgrid ficam justas. */
.caixa .caixa__sigla--frase {
  font-size: clamp(1.25rem, 8.5cqi, 1.875rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  white-space: normal;
}
.caixa p { color: var(--c-texto); font-size: 18px; line-height: 1.3; }
.caixa .btn { align-self: flex-start; justify-self: start; }
.caixa--clara { background: var(--c-fundo-card); }
.caixa--branca { background: #fff; border: 1px solid var(--c-borda); }
.caixa--escura {
  gap: 14px;
  padding: 28px;
  border-radius: var(--raio);
  background: linear-gradient(146.07deg, #303d7e 0%, #241f52 74.07%);
}
.caixa--escura h3 { color: #fff; }
/* na caixa escura o título é branco chapado, sem o gradiente das siglas */
.caixa--escura .caixa__sigla--frase { background: none; color: #fff; }
/* no fundo escuro o botão pêssego sumia de contraste: aqui ele é branco */
.caixa--escura .btn { background: #fff; }
.caixa--escura__apoio { color: var(--c-lilas-2) !important; }

/* --------------------------------------------------------------------------
   10. Dobra 06 · Coalizão Acadêmica · Figma 19352:1461
   -------------------------------------------------------------------------- */
.coalizao {
  /* Largura do bloco largo (1610 no Figma), compartilhada pelo cabeçalho e
     pelos grupos. 100vw dividido pela escala dá a largura LÓGICA da página —
     usar 100vw puro aqui limitava o bloco à largura real e o encolhia. */
  --larg-bloco: min(1610px, calc(100vw / var(--escala) - 2 * var(--gutter)));
  padding-block: var(--espaco-dobra);
  color: #fff;
  background:
    radial-gradient(50% 50% at 85% 75%, rgba(51,68,156,.70) 0%, rgba(51,68,156,.315) 60%, rgba(51,68,156,0) 100%),
    radial-gradient(60% 60% at 12% 20%, rgba(47,74,168,.80) 0%, rgba(47,74,168,.36) 60%, rgba(47,74,168,0) 100%),
    var(--c-profundo);
}
/* O cabeçalho acompanha o mesmo bloco largo dos grupos: o lado esquerdo começa
   no eixo de "Coordenação Organizacional" e o direito no de "Trainers
   Oficiais". As trilhas 974/596 reproduzem esses dois eixos — 404 + 40 + 530
   de um lado, 596 do outro. */
.coalizao__cabecalho {
  width: var(--larg-bloco);
  margin-left: calc(50% - var(--larg-bloco) / 2);
  display: grid;
  grid-template-columns: 974fr 596fr;
  align-items: center;
  gap: 40px;
}
.coalizao__cabecalho > div { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
/* container para o título se medir pela própria coluna, não pela janela */
.coalizao__cabecalho > div:first-child { max-width: 605px; container-type: inline-size; }
.coalizao__sobretitulo { color: var(--c-areia); font-size: 22px; font-weight: 700; line-height: 1.3; }
/* 52px em negrito: com 605px de coluna o título fecha nas duas linhas do design. */
/* São 2 linhas por causa da quebra forçada — desde que "A estrutura que
   sustenta" caiba na coluna. Em vw ela media ~590px numa coluna de 605 e
   estourava, virando 4 linhas; em cqi o corpo acompanha a própria coluna.
   Medido: a linha mais longa gasta 11,03px de largura por px de corpo. Em
   7,6cqi ela ocupa 84% da coluna — a folga cobre variação de renderização
   da fonte entre sistemas, que é o que fazia a quebra escapar. */
.coalizao__titulo { font-size: clamp(1.5rem, 7.6cqi, 3rem); font-weight: 700; line-height: 1.3; }
.coalizao__pergunta { font-size: clamp(1.25rem, 1.88vw, 1.5rem); font-weight: 700; line-height: 1.3; }
.coalizao__resposta { color: var(--c-lilas-3); font-size: 18px; line-height: 1.3; max-width: 635px; }

/* Figma 19948:2710 — os três grupos ficam lado a lado, cada um com o rótulo
   centrado acima dos retratos. O bloco mede 1610px, mais largo que o grid de
   1280: ele sangra 165px para cada lado de propósito, como no desenho. A
   largura se limita sozinha à janela, então nunca gera rolagem lateral. */
.coalizao__grupos {
  width: var(--larg-bloco);
  margin-top: 70px;
  margin-left: calc(50% - var(--larg-bloco) / 2);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
}
/* Tudo encostado à esquerda da coluna: o rótulo, as fotos e, no grupo da
   coordenação, também a descrição. Antes era tudo centrado e as bordas
   esquerdas ficavam desencontradas entre o título e as fotos. */
.grupo { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.grupo--coordenacao { width: 404px; }
.grupo--lideranca   { width: 530px; }
.grupo--trainers    { width: 596px; }

.grupo__rotulo {
  /* min-content protege o texto pintado por background-clip: o que passasse da
     caixa ficaria sem fundo e sumiria em vez de vazar à vista. */
  min-width: min-content;
  max-width: 100%;
  /* As duas linhas vêm de um <br> no HTML, não mais de larguras fixas por
     grupo. Com largura fixa, mudar o corpo da fonte desmontava a quebra —
     "Trainers Oficiais" voltava para uma linha só e saía do padrão.
     O teto é ditado pelo grupo mais estreito: a coluna da coordenação tem
     404px e precisa segurar "Idealização e Coordenação" numa linha só. Em
     34px ela media 404 cravados e virava 3 linhas nas telas largas, o que
     empurrava a foto da Mariana para baixo das outras. */
  font-size: clamp(1.25rem, 2.1vw, 2rem);
  /* Duas linhas reservadas sempre: é o que mantém as fotos dos três grupos
     começando na mesma altura, mesmo que um título caiba em uma linha só. */
  min-height: 2.6em;
  font-weight: 400;
  line-height: 1.3;
  text-align: left;
  background: var(--brilho-a), var(--brilho-b), var(--c-fundo-lilas);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.grupo__retratos { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; gap: 10px; }
/* 530px = dois retratos de 260 + 10 de vão: força a grade 2 × 2 */
.grupo--trainers .grupo__retratos { width: 530px; }
.grupo--coordenacao .grupo__retratos { flex-direction: column; align-items: flex-start; gap: 20px; }
/* Alinhada à esquerda com a foto e o rótulo. Era 458px centrados, transbordando
   27px de cada lado; encostada à esquerda esse excedente iria todo para o lado
   direito e encostaria no grupo vizinho, então passa a ocupar a coluna. */
.grupo__descricao { width: 100%; max-width: 458px; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; text-align: left; }
.grupo__descricao-titulo { font-size: 28px; font-weight: 700; letter-spacing: .06em; line-height: 1.3; }
.grupo__descricao-texto { color: var(--c-lilas-3); font-size: 18px; line-height: 1.3; }

/* Cartões de retrato.
   O cartão mede 240 × 258 no Figma. Aqui a largura é flexível e a altura vem do
   aspect-ratio, então o enquadramento de cada foto é descrito em porcentagem do
   cartão — assim os retratos encolhem juntos e cabem lado a lado em qualquer
   largura, sem precisar de rolagem horizontal nem carrossel. */
.retrato {
  position: relative;
  flex: none;
  width: 260px;
  aspect-ratio: 260 / 270;
  overflow: hidden;
}
.retrato img { position: absolute; max-width: none; object-fit: cover; }

/* A foto termina numa borda reta que, no Figma, fica escondida atrás da tarja.
   A tarja tem altura de texto (não escala com o cartão), então em cartões
   maiores que 240px ela encolhia em proporção e deixava esse corte à mostra.
   O `min-height` em porcentagem devolve a proporção do design em qualquer
   largura — a tarja volta a cobrir o fim da foto. */
.retrato__info {
  position: absolute;
  inset: auto 0 0 0;
  box-sizing: border-box;
  min-height: var(--alt-tarja, 28.75%);
  display: flex;
  flex-direction: column;
  gap: 1.5px;
  justify-content: center;
  padding: 10.3px;
  color: var(--c-tinta);
  background: var(--brilho-a), var(--brilho-b), var(--c-fundo-lilas);
}
.retrato__nome { font-size: 14px; font-weight: 700; letter-spacing: .02em; line-height: 1.3; text-transform: uppercase; }
/* A sigla é "PhD", com h minúsculo. Onde o título é maiusculizado pelo CSS ela
   virava "PHD" — este span devolve o h. Vive aqui porque vale em todas as
   páginas; ao escrever um título maiusculizado novo, envolva o PhD com ele. */
.phd { text-transform: none; }
.retrato__papel { font-size: 14px; line-height: 1.3; opacity: .85; }
.retrato__papel--menor { font-size: 12px; }

.retrato--bohus    { background: var(--g-retrato-a); --alt-tarja: 22.55%; }
.retrato--bohus    img { width: 118.75%; height: 78.29%; left: -7.78%; bottom: 21.71%; }
.retrato--eduardo  { background: var(--g-retrato-b); --alt-tarja: 29.52%; }
.retrato--eduardo  img { width: 90.42%;  height: 84.11%; left: 2.99%;  top: -4.26%; }
.retrato--brisa    { background: var(--g-retrato-a); }
.retrato--brisa    img { width: 90%;     height: 83.72%; left: 2.5%;   top: -3.10%; }
.retrato--vinicius { background: var(--g-retrato-b); }
.retrato--vinicius img { width: 94.17%;  height: 87.60%; left: 1.80%;  top: 0; }
.retrato--edela    { background: var(--g-retrato-b); }
.retrato--edela    img { width: 82.92%;  height: 77.13%; left: 7.97%;  top: 0; }
.retrato--erica    { background: var(--g-retrato-b); }
.retrato--erica    img { width: 91.67%;  height: 85.27%; left: 5.39%;  bottom: 14.73%; }
.retrato--mariana  { background: var(--g-pessego); --alt-tarja: 21%; }
.retrato--mariana  img { width: 83.62%;  height: 112.40%; left: 8.19%; top: -10.08%; }

/* Instituições · Figma 19352:1517 */
.instituicoes { display: flex; flex-direction: column; align-items: center; gap: 32px; margin-top: 100px; }
.instituicoes__titulo { color: var(--c-lilas-2); font-size: clamp(1.125rem, 1.88vw, 1.5rem); line-height: 1.3; text-align: center; }
.instituicoes__grade { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px; width: 100%; }
.instituicoes__grupo { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.instituicoes__rotulo { color: rgba(255,255,255,.65); font-size: 16px; font-weight: 700; letter-spacing: .06em; line-height: 1.3; text-align: center; }
.instituicoes__marcas { display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; min-height: 104px; }
.instituicoes__marcas img { object-fit: contain; }
.instituicoes__divisoria { width: 1px; height: 84px; background: rgba(255,255,255,.2); }

/* --------------------------------------------------------------------------
   11. Dobra 07 · Big Numbers · Figma 19190:356
   -------------------------------------------------------------------------- */
.numeros { background: #fff; padding-block: var(--espaco-dobra); }
.numeros__grade { display: flex; gap: 20px; align-items: stretch; min-height: 460px; }
.numeros__coluna { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.numeros__linha { flex: 1 1 0; display: flex; gap: 20px; align-items: stretch; }

.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  padding: 32px;
  border-radius: var(--raio);
  overflow: hidden;
}
.stat__numero {
  position: relative;
  z-index: 1;
  color: var(--c-tinta-2);
  font-size: clamp(2.1875rem, 5vw, 4rem);
  font-weight: 400;
  line-height: 1.3;
  /* dígitos de largura fixa: a contagem não faz o número tremer */
  font-variant-numeric: tabular-nums;
}
.stat__legenda { position: relative; z-index: 1; color: var(--c-texto); font-size: 18px; line-height: 1.3; }

.stat--mapa {
  flex: none;
  width: 630px;
  min-height: 460px;
  justify-content: flex-end;
  padding: 39px;
  border: 1px solid var(--c-lilas-3);
  background: linear-gradient(128.86deg, #aeb8ea 0%, #7c8ce8 74.07%);
}
.stat--mapa .stat__numero { color: #fff; font-size: clamp(3.25rem, 7.5vw, 6rem); font-weight: 700; line-height: 1; }
.stat--mapa .stat__legenda { max-width: 330px; color: rgba(255, 255, 255, .95); }

/* Véu sob o texto. O lilás do cartão só dá 3,1:1 de contraste com o branco —
   reprova para texto corrido. O degradê escurece a base o suficiente para o
   branco passar com folga e ainda ajuda o mapa a recuar para o fundo.
   Como pseudo-elemento `::after`, fica acima do mapa e abaixo do texto. */
.stat--mapa::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(36, 31, 82, .58) 0%,
    rgba(36, 31, 82, .34) 34%,
    rgba(36, 31, 82, 0) 68%);
}

/* O mapa é quadrado e no Figma mede 1,52× a altura do cartão. Ancorar pela
   ALTURA (e não pela largura) mantém o enquadramento estável quando o cartão
   muda de proporção — era isso que quebrava no tablet. */
.mapa { position: absolute; left: 13%; top: -30%; height: 152%; aspect-ratio: 1 / 1; pointer-events: none; }
.mapa__base { width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.ponto {
  position: absolute;
  width: 35px; height: 35px;
  background: url(../icons/ponto-sm.svg) no-repeat center / contain;
  animation: acender-ponto 3.6s var(--e-suave) infinite both;
  animation-delay: calc(var(--i, 0) * 210ms);
}
.ponto--g { width: 38.75px; height: 38.75px; background-image: url(../icons/ponto-lg.svg); }

@keyframes acender-ponto {
  0%, 100% { opacity: .18; transform: translate(-50%, -50%) scale(.78); }
  45%      { opacity: 1;   transform: translate(-50%, -50%) scale(1); }
}

.stat--pessego {
  flex: 1 1 0;
  border: 1px solid #f0dcd0;
  background:
    radial-gradient(50% 50% at 15% 85%, rgba(245,192,163,.45) 0%, rgba(245,192,163,.2025) 60%, rgba(245,192,163,0) 100%),
    radial-gradient(55% 55% at 88% 20%, rgba(245,192,163,.75) 0%, rgba(245,192,163,.3375) 60%, rgba(245,192,163,0) 100%),
    #f7f3fb;
}
.stat--pessego .stat__legenda { max-width: 416px; }

.stat--escuro {
  flex: 1 1 0; min-width: 0;
  background: linear-gradient(144.2deg, #333d74 0%, #242b58 71.43%);
}
.stat--escuro .stat__numero { color: #fff; }
.stat--escuro .stat__legenda { color: #c3c9e6; }
.stat__brilho {
  position: absolute;
  left: 62.95%;
  top: -3.18%;
  width: 318px;
  height: 240px;
  -webkit-mask: url(../icons/stat-mask.svg) no-repeat 0 0 / 100% 240px;
          mask: url(../icons/stat-mask.svg) no-repeat 0 0 / 100% 240px;
}
.stat__brilho::before,
.stat__brilho::after { content: ""; position: absolute; left: 0; top: 0; width: 240px; height: 240px; }
.stat__brilho::before { background: var(--c-tinta-2); }
.stat__brilho::after { border-radius: 120px; background: var(--c-primaria); filter: blur(40px); }

.stat--lilas {
  flex: 1 1 0; min-width: 0;
  gap: 16px;
  padding: 32px 28px;
  border: 1px solid var(--c-borda);
  background: var(--brilho-a), var(--brilho-b), var(--c-fundo-lilas);
}

/* --------------------------------------------------------------------------
   12. Dobra 08 · Projetos e impacto social · Figma 19190:158
   -------------------------------------------------------------------------- */
.projetos { background: #fff; padding-block: var(--espaco-dobra); }
.projetos .container { display: flex; flex-direction: column; gap: 40px; }
.projetos__cabecalho { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.projetos__titulo { color: var(--c-tinta); font-size: clamp(1.75rem, 4.06vw, 3.25rem); font-weight: 700; line-height: 1.18; }
.projetos__titulo span { color: var(--c-violeta); }
.projetos__apoio { color: var(--c-texto); font-size: clamp(1rem, 1.56vw, 1.25rem); line-height: 1.55; }

.projetos__grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.projeto {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 351px;
  padding: 32px 28px;
  border-radius: var(--raio);
  overflow: hidden;
  /* Os quatro cartões são idênticos no Figma: o mesmo par de brilhos lilás
     sobre o fundo claro. Antes cada um tinha um brilho pêssego próprio.
     Sem contorno — o fundo já separa o cartão do branco da seção. */
  background: var(--brilho-a), var(--brilho-b), var(--c-fundo-lilas);
}
.projeto__icone {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 10px;
  background: var(--c-primaria);
}
.projeto__titulo { color: var(--c-tinta-2); font-size: 22px; font-weight: 700; line-height: 1.3; }
.projeto__texto { color: var(--c-texto); font-size: 18px; line-height: 1.3; }

/* --------------------------------------------------------------------------
   12b. Depoimentos e impacto
   Vive aqui, e não em programas.css, porque a dobra agora aparece nas duas
   páginas e precisa ficar idêntica nas duas.
   -------------------------------------------------------------------------- */
.depoimentos-dobra {
  padding-block: var(--espaco-dobra);
  background:
    radial-gradient(60% 60% at 15% 25%, rgba(188,198,245,.75) 0%, rgba(188,198,245,.3375) 60%, rgba(188,198,245,0) 100%),
    radial-gradient(45% 45% at 90% 45%, rgba(245,192,163,.55) 0%, rgba(245,192,163,.2475) 60%, rgba(245,192,163,0) 100%),
    var(--c-fundo-lilas);
}
/* O teto vem do cartão de vídeo do Prof. Bohus, na dobra 05: a cliente pediu
   que os depoimentos não ficassem maiores que ele. Com a proporção 393/560
   destes cartões, 940px de grade dá a cada um a mesma altura daquele. Na
   largura cheia da coluna eles ficavam quase o dobro e dominavam a tela.

   Cabeçalho e grade dividem a medida para o título nascer rente à borda
   esquerda do primeiro vídeo, em vez de ficar solto à esquerda deles. */
.depoimentos__cabecalho,
.depoimentos { width: 100%; max-width: 940px; }
.depoimentos__cabecalho { margin-bottom: 32px; }
.depoimentos__titulo { color: var(--c-tinta); font-size: clamp(1.75rem, 4.06vw, 3.25rem); font-weight: 700; line-height: 1.18; }
.depoimentos__titulo span { color: var(--c-violeta); }

.depoimentos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
/* Contorno: sobre o fundo claro da dobra as thumbs lilás se dissolviam no
   fundo e o cartão parecia solto, sem limite.
   O seletor passa pela grade porque `.cartao-video { width: 42% }` da faixa
   de até 1280px tem o mesmo peso e vinha depois — o cartão encolhia para
   166px nessa faixa. */
.depoimentos .cartao-video--dep {
  width: 100%; min-height: 0;
  aspect-ratio: 393 / 560;
  justify-content: center;
  border: 1px solid rgba(107, 127, 227, .38);
}
.cartao-video--dep:nth-child(1) { background: linear-gradient(180deg, #293574 0%, #42519d 100%); }
.cartao-video--dep:nth-child(2) { background: linear-gradient(180deg, #5665b2 0%, #7a8adc 100%); }
.cartao-video--dep:nth-child(3) { background: linear-gradient(180deg, #7181d2 0%, #8696e4 100%); }
/* `position` + `z-index` é o que faz a legenda aparecer: nestes cartões ela é
   filha direta do botão, sem o `__grupo`, e a capa — que é absoluta — pintava
   por cima do nome. O texto estava lá o tempo todo, escondido atrás da foto. */
.cartao-video--dep .cartao-video__legenda {
  position: relative;
  z-index: 2;
  display: flex; flex-direction: column; gap: 2px;
  align-self: flex-start; max-width: none;
  text-align: left; font-size: 15px;
}
.cartao-video--dep .cartao-video__legenda strong { font-size: 16px; }

/* `display: contents` faz o invólucro sumir do layout: no desktop a capa e o
   play continuam filhos diretos do cartão, exatamente como antes. Ele só passa
   a existir no celular, onde vira a moldura da capa (ver media query). */
.cartao-video__capa { display: contents; }

/* Enquanto toca, o cartão vira a moldura do player — sem sobreposição.
   O vídeo é 9:16 e o cartão é 393/560, um pouco mais largo. Com o iframe
   ocupando o cartão inteiro, quem preenchia as laterais era o próprio player
   do Drive, com o preto dele — fora da paleta e impossível de mudar por CSS.
   Dando ao iframe a proporção do vídeo, as faixas passam a ser deste fundo. */
.cartao-video--dep.esta-tocando { padding: 0; background: var(--c-lilas-3); cursor: default; }
.cartao-video--dep.esta-tocando::after { content: none; }
.cartao-video--dep.esta-tocando > iframe,
.cartao-video--dep.esta-tocando > video {
  display: block;
  height: 100%;
  width: auto;
  aspect-ratio: 9 / 16;
  margin-inline: auto;
  border: 0;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   13. Dobra 10 · FAQ (estrutura preenchível) · Figma 19190:207
   -------------------------------------------------------------------------- */
.faq { background: #fff; padding-block: var(--espaco-dobra); }
.faq__grade { display: flex; flex-wrap: wrap; gap: 80px; align-items: flex-start; }
.faq__cabecalho { flex: 1 1 340px; max-width: 420px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.faq__titulo { color: var(--c-tinta); font-size: clamp(1.75rem, 4.06vw, 3.25rem); font-weight: 700; line-height: 1.18; }
.faq__apoio { color: var(--c-texto); font-size: clamp(1rem, 1.56vw, 1.25rem); line-height: 1.55; }
.faq__convite { margin-top: 24px; color: var(--c-tinta); font-size: 18px; font-weight: 700; }

.faq__lista { flex: 1 1 480px; }
.faq__item { border-bottom: 1px solid var(--c-borda); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  color: var(--c-tinta);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; flex: none; font-size: 26px; font-weight: 400; line-height: 1; }
.faq__item[open] summary::after { content: "–"; }
.faq__item > p { padding-bottom: 24px; color: var(--c-texto); font-size: 18px; line-height: 1.45; }

/* --------------------------------------------------------------------------
   14. Rodapé · Figma 19794:8
   -------------------------------------------------------------------------- */
.rodape {
  padding-top: 80px;
  background: linear-gradient(90deg, #f1f3fd 0%, #d4daf7 55%, #bec8f6 100%);
  color: var(--c-tinta);
}
/* Quatro colunas fixas, como no Figma. Com flex-wrap, bastava uma coluna
   crescer um pouco para a chamada final cair sozinha numa segunda linha. */
.rodape__conteudo {
  display: grid;
  grid-template-columns: 360px 240px 260px 1fr;
  gap: 30px;
  padding-bottom: 64px;
}
/* Sem isto, o mínimo intrínseco do e-mail (que não quebra no meio da palavra)
   segura a trilha aberta e empurra a página para fora da tela no celular. */
.rodape__conteudo > * { min-width: 0; }
.rodape__marca { display: flex; flex-direction: column; gap: 24px; }
.rodape__descricao { color: rgba(36,31,82,.72); font-size: 18px; line-height: 1.3; }
.rodape__redes { display: flex; gap: 12px; }
.rede {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 60px;
  background: var(--c-tinta);
  transition: transform .18s ease;
}
.rede:hover { transform: translateY(-2px); }

.rodape__coluna { display: flex; flex-direction: column; gap: 20px; font-size: 18px; }
.rodape__coluna-titulo { font-weight: 700; color: var(--c-tinta); }
.rodape__coluna a, .rodape__coluna p:not(.rodape__coluna-titulo) { color: rgba(36,31,82,.72); line-height: 1.3; }
.rodape__coluna a:hover { color: var(--c-tinta); text-decoration: underline; }

.rodape__chamada { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.rodape__chamada-titulo { font-size: 18px; font-weight: 700; line-height: 1.3; }
.rodape__chamada-texto { color: rgba(36,31,82,.72); font-size: 16px; line-height: 1.3; }
.rodape__chamada .btn { font-size: 17px; }

.rodape__divisoria { height: 1px; background: rgba(36,31,82,.18); }
.rodape__legal {
  display: flex; flex-wrap: wrap; align-items: center; gap: 32px;
  padding: 28px 0 40px;
  color: rgba(36,31,82,.72);
  font-size: 18px;
  line-height: 1.3;
}
.rodape__legal p:first-child { flex: 1 1 320px; }
.rodape__legal a:hover { color: var(--c-tinta); text-decoration: underline; }

/* ==========================================================================
   15. Responsivo
   ========================================================================== */

/* Notebooks / tablets largos ------------------------------------------------ */
@media (max-width: 1280px) {
  .cabecalho__inner { padding-inline: var(--gutter); }
  .stat--mapa { width: 46%; }
  .cartao-video { width: 42%; }
}

@media (max-width: 1100px) {
  .menu__lista { gap: 4px; }
  .menu__item { padding: 10px 8px; font-size: 13px; }
  .cabecalho__cta { display: none; }

  /* As três primeiras trilhas do rodapé são fixas e somam 950px com os vãos;
     abaixo de ~1240px de container a chamada era empurrada para fora da tela.
     A partir daqui o rodapé passa a duas colunas. */
  .rodape__conteudo { grid-template-columns: 1fr 1fr; gap: 40px 30px; }
  .rodape__marca { grid-column: 1 / -1; }

  /* Depoimentos: os 806px fixos deixam de caber, os cartões passam a dividir
     a largura disponível. Esta regra morava em programas.css e por isso não
     chegava na home. */
  .depoimentos { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  /* Coalizão: sem os 1610px, cada grupo passa a ocupar a largura toda e os
     três se empilham. Os retratos dividem a linha em vez de manter 260px.
     O cabeçalho volta às duas colunas simples do grid. */
  /* Abaixo do corte do zoom não há largura lógica extra: o bloco volta a
     caber no grid. */
  .coalizao { --larg-bloco: 100%; }
  /* Uma coluna só: em duas, a coluna do título ficava com ~460px e a segunda
     metade dele ("os treinamentos no Brasil.") não cabia, quebrando de novo. */
  .coalizao__cabecalho { grid-template-columns: 1fr; gap: 28px; }
  .coalizao__cabecalho > div:first-child { max-width: none; }
  .grupo--coordenacao,
  .grupo--lideranca,
  .grupo--trainers { width: 100%; }
  /* empilhado o rótulo usa a largura toda e quebra sozinho */
  .grupo--coordenacao .grupo__rotulo,
  .grupo--lideranca   .grupo__rotulo,
  .grupo--trainers    .grupo__rotulo { width: auto; }
  /* Largura definida em todos os grupos, não só nos trainers: os retratos são
     medidos em % e, sem uma referência, a porcentagem se resolvia contra um
     contêiner que encolhia até o conteúdo — as fotos da Liderança colapsavam
     para 10px no celular. */
  .grupo__retratos,
  .grupo--trainers .grupo__retratos { width: 100%; }   /* a dos trainers é 530px fixos na base */
  .grupo__descricao { width: min(458px, 100%); }
  /* Empilhados, os quatro trainers já cabem em 2 × 2 desde o tablet — a quatro
     por linha cada retrato caía para ~125px. */
  .retrato { width: calc(50% - 5px); max-width: 330px; }

  /* Números: empilham já no tablet. Lado a lado nessa faixa o cartão do mapa
     ficava estreito e alto, e o mapa aparecia como um fragmento solto. */
  .numeros__grade { flex-direction: column; min-height: 0; }
  /* Só os filhos diretos do que virou coluna. `.stat--escuro` e `.stat--lilas`
     continuam lado a lado nesta faixa e precisam seguir dividindo a linha. */
  .numeros__coluna,
  .numeros__linha,
  .stat--pessego { flex: 0 0 auto; }
  .stat--mapa { width: 100%; min-height: 460px; }
  .mapa { left: 50%; transform: translateX(-50%); }

  /* Projetos: 2 colunas */
  .projetos__grade { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet -------------------------------------------------------------------- */
@media (max-width: 900px) {
  :root { --gutter: 20px; }

  /* Menu vira gaveta */
  .hamburguer { display: flex; }
  .menu {
    display: flex;
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 20px var(--gutter) 28px;
    background: rgba(246,246,249,.98);
    border-bottom: 2px solid var(--c-borda-2);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .menu.is-aberto { transform: translateY(0); opacity: 1; visibility: visible; }
  /* Na gaveta os itens empilham. Antes isto era `grid-auto-flow: row`; com a
     lista em flex aquilo virou letra morta e os quatro itens seguiam em
     linha, estourando a largura da tela em 53px. */
  .menu__lista { flex-direction: column; align-items: stretch; gap: 8px; padding: 0; }
  .menu__item { height: 44px; justify-content: flex-start; padding: 10px 16px; font-size: 15px; }
  .menu__cta-mobile { display: inline-flex; justify-content: center; }
  .cabecalho__inner { min-height: 76px; padding-block: 16px; }
  .cabecalho { position: sticky; }
  .logo { width: 130px; height: 32px; }

  /* Hero: a arte sai de trás do texto e vira uma faixa no topo, com o texto
     logo abaixo — mesma leitura do desktop, só que empilhada. */
  .hero {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }
  .hero__arte {
    position: static;
    width: 100%;
    min-width: 0;
    height: auto;
    max-height: 42vh;
    aspect-ratio: 960 / 653;
    object-position: center;
  }
  .hero__inner { padding-block: 32px 48px; }

  /* Siglas: sem divisórias quando quebra linha */
  .siglas__lista li + li::before { display: none; }

  /* Depoimentos no celular: duas colunas, a pedido da cliente — os cartões
     ficam pequenos, mas ocupam muito menos rolagem, e o toque abre o vídeo em
     tela cheia (ver `main.js`), então o tamanho do cartão não limita a
     leitura. O seletor passa pela grade porque `.cartao-video` desta mesma
     faixa tem o mesmo peso e vinha depois. */
  .depoimentos { grid-template-columns: 1fr 1fr; gap: 12px; }
  /* No celular a legenda sai de dentro da capa e desce para baixo dela: em
     cartão pequeno o balão cobria o rosto da pessoa, que é justamente o que
     faz alguém querer assistir. O cartão vira uma coluna — capa em cima,
     balão embaixo —, e por isso ele perde a proporção fixa e o fundo. */
  .depoimentos .cartao-video--dep {
    display: flex;
    flex-direction: column;
    gap: 10px;
    aspect-ratio: auto;
    padding: 0;
    border: 0;
    background: none;
    overflow: visible;
  }
  /* O véu e o gradiente do cartão não fazem sentido quando ele não é mais a
     moldura — a capa é que recebe os dois. */
  .depoimentos .cartao-video--dep::after { content: none; }

  .depoimentos .cartao-video--dep .cartao-video__capa {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    border: 1px solid rgba(107, 127, 227, .38);
    border-radius: var(--raio);
    overflow: hidden;
  }
  .depoimentos .cartao-video--dep .cartao-video__capa::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(38% 28% at 50% 50%, rgba(14,20,48, .34) 0%, rgba(14,20,48, 0) 100%);
  }
  .depoimentos .cartao-video--dep .cartao-video__play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 54px;
    height: 54px;
  }
  .depoimentos .cartao-video--dep .cartao-video__play svg { width: 22px; height: 22px; }
  .depoimentos .cartao-video--dep:hover .cartao-video__play { transform: translate(-50%, -50%) scale(1.08); }

  .depoimentos .cartao-video--dep .cartao-video__legenda {
    align-self: stretch;
    padding: 10px 14px;
    text-align: center;
    font-size: 13px;
    line-height: 1.3;
    white-space: normal;
  }
  .depoimentos .cartao-video--dep .cartao-video__legenda strong { font-size: 14px; }

  /* Tocando, o player ocupa a capa; a legenda continua embaixo, identificando
     quem está falando. */
  .depoimentos .cartao-video--dep.esta-tocando .cartao-video__capa { display: none; }

  /* Programas: empilha.
     Ao empilhar, os cartões precisam voltar a ter altura de conteúdo: com
     `flex: 1 1 0` + `overflow:hidden` o min-height automático vira 0 e eles
     colapsam dentro de um container de altura indefinida. */
  .programas__linha { flex-direction: column; gap: 20px; padding-inline: 0; }
  .cartao-bio,
  .caixa,
  .stat--escuro, .stat--lilas { flex: 0 0 auto; }
  /* A capa é retrato: 16/10 cortaria a foto numa tira horizontal. */
  .cartao-video { width: 100%; min-height: 0; aspect-ratio: 4 / 5; }
  .cartao-bio { padding: 28px 24px; }
  /* três boxes lado a lado não cabem: passam a dois e depois a um */
  .programas__caixas { grid-template-columns: 1fr 1fr; }
  .caixa { min-height: 0; }

  .coalizao { padding-block: 64px; }
  .coalizao__grupos { margin-top: 48px; }
  .instituicoes { margin-top: 64px; }

  /* Dobra inteira centralizada. Empilhado, rótulo à esquerda com retrato
     centralizado ficava desalinhado; aqui tudo passa a compartilhar o mesmo
     eixo central. */
  .coalizao__cabecalho { grid-template-columns: 1fr; text-align: center; }
  .coalizao__cabecalho > div { align-items: center; }
  .coalizao__resposta { margin-inline: auto; }
  .grupo { align-items: center; text-align: center; }
  /* empilhado tudo é centrado — o alinhamento à esquerda só vale no desktop,
     onde os três grupos ficam lado a lado e as bordas precisam se encontrar */
  .grupo__rotulo { text-align: center; }
  .grupo__retratos { justify-content: center; }
  /* A coluna da Mariana é `flex-direction: column`, então quem centraliza a
     foto é `align-items`, não `justify-content` — com só este último ela
     continuava encostada à esquerda enquanto os outros grupos centravam. */
  .grupo--coordenacao .grupo__retratos { justify-content: center; align-items: center; }
  .grupo__descricao { align-items: center; text-align: center; }
  .retrato__info { align-items: center; text-align: center; }
  .instituicoes__grade { justify-content: center; gap: 32px; }
  .instituicoes__marcas { gap: 20px 24px; }
  .instituicoes__divisoria { display: none; }
  /* 2 × 2 no celular: com flex-wrap cabiam três na primeira linha e o quarto
     ficava sozinho embaixo. Em grade o bloco fecha certinho, na ordem que a
     cliente definiu. */
  .instituicoes__marcas--multiplas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    align-items: center;
    gap: 24px 20px;
  }

  /* Números: o mapa volta a sangrar para fora do cartão, como no desktop —
     centralizado para não perder o desenho do Brasil, mas grande o bastante
     para o recorte aparecer nos quatro lados. */
  .stat--mapa { min-height: 440px; }
  .mapa { height: auto; width: 126%; top: -9%; }
  .numeros__linha { flex-direction: column; }
  .stat { min-height: 0; }

  /* FAQ */
  .faq__grade { gap: 40px; }
  .faq__cabecalho { max-width: none; }

  /* Rodapé */
  .rodape { padding-top: 56px; }
  .rodape__conteudo { grid-template-columns: 1fr 1fr; gap: 40px 30px; }
  .rodape__marca { grid-column: 1 / -1; }
}

/* Celular ------------------------------------------------------------------- */
@media (max-width: 620px) {
  /* O zoom de apresentação não vale aqui (texto corrido ficaria pequeno
     demais); no celular a redução é só nos tamanhos de display e na base. */
  body { font-size: 16px; }

  .btn { padding: 16px 22px 16px 26px; font-size: 16px; }

  .hero { min-height: 480px; }
  /* A pílula esticava na largura toda (herdava o stretch do hero) e o texto
     caía em duas linhas, o que a engordava e arredondava. Agora ela encolhe
     até a palavra e o corpo cabe numa linha: o texto mede 281px em 13px e o
     bloco fica com 309 dos 335 disponíveis. Sem `nowrap` de propósito —
     abaixo de ~360px de tela é melhor quebrar do que estourar a largura. */
  .hero__selo {
    align-self: flex-start;
    width: auto;
    padding: 5px 14px;
    font-size: 13px;
    line-height: 1.35;
  }
  .hero__titulo { line-height: 1.15; }

  .siglas { padding-block: 24px; }
  /* As três siglas continuam numa linha só no celular, com as divisórias em
     1/3 e 2/3 como no desktop. O que muda é o corpo da fonte: ele passa a ser
     calculado pela largura da tela, porque a maior das três (DBT-PTSD) é que
     decide se a faixa cabe. */
  .siglas__lista li {
    min-height: 0;
    font-size: clamp(.9375rem, 5.2vw, 1.75rem);
  }

  .save-date__datas { gap: 28px; }
  .save-date__datas li { flex-basis: 100%; }

  .programas__caixas { grid-template-columns: 1fr; gap: 16px; }
  .caixa { padding: 22px 20px; }
  .cartao-video__legenda { font-size: 15px; white-space: normal; }
  .cartao-video__grupo { gap: 16px; width: 82%; }
  .caixa--escura { padding: 22px 20px; }
  .cartao-bio { padding: 24px 20px; }
  .cartao-bio__texto { font-size: 16px; }

  .coalizao__grupos { gap: 32px; }
  .grupo__descricao-titulo { font-size: 22px; }

  .stat { padding: 24px 22px; }
  .stat--mapa { padding: 24px 22px; min-height: 420px; }
  .mapa { width: 134%; top: -7%; }

  .projetos__grade { grid-template-columns: 1fr; }
  .projeto { min-height: 0; padding: 26px 22px; }

  .faq__item summary { font-size: 17px; }

  /* Numa coluna só o e-mail cabe inteiro, sem precisar quebrar palavra. */
  .rodape__conteudo { grid-template-columns: 1fr; gap: 36px; }
  .rodape__legal { gap: 12px 24px; font-size: 16px; }
  .rodape__legal p:first-child { flex-basis: 100%; }
}

/* Celular estreito ---------------------------------------------------------- */
@media (max-width: 480px) {
  /* Abaixo daqui dois retratos lado a lado ficariam ilegíveis: passam a um por
     linha, centralizados e num tamanho confortável de leitura. */
  .grupo__retratos { justify-content: center; }
  .grupo--lideranca .retrato,
  .grupo--trainers .retrato,
  .grupo--coordenacao .retrato { width: min(100%, 300px); max-width: none; }
}

/* Acessibilidade: respeita redução de movimento ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Estes dois precisam de estado final explícito: zerar a duração deixaria os
     pontos apagados e os blocos borrados. */
  .ponto { animation: none; opacity: 1; transform: translate(-50%, -50%); }
  .revelar { opacity: 1; transform: none; filter: none; }
}

/* ==========================================================================
   Pré-inscrição — pop-up do site inteiro
   Figma 19190:1189. O cartão é montado por main.js e vive em todas as páginas,
   por isso mora aqui e não num CSS de página.
   ========================================================================== */
.pre-fundo {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(26, 34, 72, .55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.pre-fundo.esta-aberto { display: flex; }

.pre-cartao {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: min(100%, 460px);
  margin-block: auto;
  padding: 32px;
  border: 1px solid var(--c-borda);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 56px rgba(36, 41, 87, .28);
}

.pre-topo { display: flex; align-items: center; gap: 16px; }
.pre-tag {
  display: inline-flex;
  padding: 8px 24px;
  border-radius: 60px;
  background: linear-gradient(90deg, #fbcbb2 0%, #eb834b 100%);
  color: var(--c-tinta);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}
.pre-fechar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--t-vermelho, #d63b3b);
  border-radius: 60px;
  background: #fdecec;
  cursor: pointer;
  transition: background var(--t-rapido) var(--e-suave);
}
.pre-fechar:hover { background: #fbdada; }

.pre-cabecalho { display: flex; flex-direction: column; gap: 12px; }
.pre-titulo { color: var(--c-tinta); font-size: 22px; line-height: 1.3; }
.pre-apoio { color: var(--c-texto); font-size: 16px; line-height: 1.3; }

.pre-campos { display: flex; flex-direction: column; gap: 16px; }
.pre-campo { display: flex; flex-direction: column; gap: 6px; }
.pre-campo label { color: var(--c-tinta); font-size: 16px; font-weight: 700; line-height: 1.3; }
.pre-campo input,
.pre-campo select {
  width: 100%;
  padding: 13px 18px;
  border: 1px solid var(--c-borda);
  border-radius: 10px;
  background: #f7f7fa;
  color: var(--c-tinta);
  font: inherit;
  font-size: 16px;
  line-height: 1.3;
}
.pre-campo input::placeholder { color: var(--c-texto); }
/* A seta nativa do <select> muda de desenho em cada sistema; esta é a do
   Figma, e o `appearance: none` é o que tira a outra do caminho. */
.pre-campo select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("../icons/tf-caret.svg");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 10px 7px;
}
.pre-campo select:invalid { color: var(--c-texto); }
.pre-campo input:focus-visible,
.pre-campo select:focus-visible { outline: 2px solid var(--c-primaria); outline-offset: 1px; }

.pre-consentimento {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--c-texto);
  font-size: 16px;
  line-height: 1.3;
  cursor: pointer;
}
.pre-consentimento input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--c-laranja);
  cursor: pointer;
}

.pre-erro { color: var(--t-vermelho, #d63b3b); font-size: 15px; font-weight: 700; line-height: 1.3; }

.pre-enviar {
  justify-content: center;
  width: 100%;
  padding: 20px 28px 20px 34px;
  font-size: 17px;
}
.pre-enviar[disabled] { opacity: .6; cursor: progress; }

/* Depois do envio este bloco é o conteúdo do cartão, não mais um aviso
   embaixo do formulário: por isso ele vem centrado e com folga em volta. */
.pre-sucesso {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* No celular o cartão ocupa a tela toda; com o formulário fora, a margem
     automática centraliza o aviso em vez de deixá-lo colado no topo. No
     desktop o cartão tem altura de conteúdo e isto não muda nada. */
  margin-block: auto;
  gap: 10px;
  padding: 28px 24px 24px;
  border: 1px solid var(--c-primaria);
  border-radius: 16px;
  background: var(--c-fundo-lilas);
  color: var(--c-texto);
  text-align: center;
  font-size: 15px;
  line-height: 1.5;
}
.pre-sucesso__marca {
  width: 44px;
  height: 44px;
  margin-bottom: 2px;
  padding: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(36, 41, 87, .12);
}
.pre-sucesso__titulo { color: var(--c-tinta); font-size: 20px; font-weight: 700; line-height: 1.3; }
.pre-sucesso__texto { max-width: 34ch; }
.pre-consentimento a { color: var(--c-primaria); text-decoration: underline; }

.pre-voltar {
  justify-content: center;
  width: 100%;
  margin-top: 14px;
  padding: 16px 26px 16px 32px;
  font-size: 16px;
}

@media (max-width: 620px) {
  /* No celular o cartão encosta nas bordas e rola junto com o fundo: com 460px
     fixos e o teclado aberto, os últimos campos ficavam inalcançáveis. */
  /* `stretch` fixaria o cartão na altura da tela e o conteúdo sairia do branco
     pela base; `flex-start` deixa ele crescer com o que tem dentro. */
  .pre-fundo { padding: 0; align-items: flex-start; }
  .pre-cartao {
    width: 100%;
    min-height: 100%;
    margin: 0;
    gap: 20px;
    padding: 20px 20px 32px;
    border: 0;
    border-radius: 0;
  }
  .pre-titulo { font-size: 20px; }
  .pre-tag { padding: 8px 18px; font-size: 15px; }
  .pre-enviar { padding: 18px 24px; font-size: 16px; }
}

/* --------------------------------------------------------------------------
   Ficha do treinamento (home, entre a hero e a agenda)
   Layout do rascunho da cliente: faixa de título em cima e quatro células
   embaixo, divididas por filetes.
   -------------------------------------------------------------------------- */
.ficha-treino { padding: var(--espaco-dobra) 0 8px; background: #fff; }
.ficha-treino__caixa {
  border: 1px solid var(--c-borda);
  border-radius: 16px;
  overflow: hidden;
  background: var(--c-fundo-lilas);
}
.ficha-treino__topo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 28px;
  border-bottom: 1px solid var(--c-borda);
  background: #fff;
  color: var(--c-tinta);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.3;
  text-transform: uppercase;
}
.ficha-treino__topo img { flex: none; width: 26px; height: 26px; }

.ficha-treino__grade {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.ficha-treino__grade li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 28px;
}
.ficha-treino__grade li + li { border-left: 1px solid var(--c-borda); }
.ficha-treino__grade img { flex: none; width: 30px; height: 30px; }
.ficha-treino__rotulo {
  color: var(--c-tinta);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.25;
  text-transform: uppercase;
}
.ficha-treino__valor { margin-top: 4px; color: var(--c-texto); font-size: 16px; line-height: 1.3; }

@media (max-width: 1100px) {
  /* Quatro colunas viram duas: a 1/4 da tela os rótulos quebravam em escada. */
  .ficha-treino__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ficha-treino__grade li:nth-child(odd) { border-left: 0; }
  .ficha-treino__grade li:nth-child(n + 3) { border-top: 1px solid var(--c-borda); }
}

@media (max-width: 620px) {
  .ficha-treino { padding-top: 36px; }
  .ficha-treino__topo { padding: 16px 20px; font-size: 15px; }
  .ficha-treino__grade { grid-template-columns: 1fr; }
  .ficha-treino__grade li { padding: 18px 20px; border-left: 0; }
  .ficha-treino__grade li + li { border-top: 1px solid var(--c-borda); }
}

/* --------------------------------------------------------------------------
   Nota com asterisco
   O marcador é o mesmo asterisco laranja da página de pré-inscrição — foi a
   referência que a cliente aprovou.
   -------------------------------------------------------------------------- */
.nota-asterisco {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid rgba(36, 31, 82, .14);
}
.nota-asterisco img { flex: none; width: 22px; height: 22px; margin-top: 2px; }
.nota-asterisco p { color: var(--c-texto); font-size: 16px; line-height: 1.5; }
.nota-asterisco p + p { margin-top: 12px; }

@media (max-width: 620px) {
  .nota-asterisco { margin-top: 28px; padding-top: 22px; gap: 10px; }
  .nota-asterisco img { width: 18px; height: 18px; }
  .nota-asterisco p { font-size: 15px; }
}