/* ==========================================================
   Conectando Talentos ebrand — landing page
   Design system ebrand: Exo 2 + Lora · azul #2E6FE1 · marinho #0F1729
   ========================================================== */

:root {
  --azul: #2E6FE1;
  --marinho: #0F1729;
  --marinho-profundo: #080D1A;
  --branco: #FFFFFF;
  --cinza-texto: #5A6373;
  --fundo-suave: #F5F7FB;
  --linha-suave: #E2E7F2;

  --exo: 'Exo 2', sans-serif;
  --lora: 'Lora', Georgia, serif;

  --max: 1200px;
  --gutter: 24px;
  --secao: 112px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--branco);
  color: var(--marinho);
  font-family: var(--exo);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
a { color: var(--azul); }
a:hover { color: var(--marinho); }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }

.container { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.secao { padding: var(--secao) 0; }

/* ---------- tipografia ---------- */
.categoria { font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.categoria--cinza { color: var(--cinza-texto); }
.categoria--barra { display: flex; align-items: center; gap: 16px; }
.categoria--barra::before { content: ""; width: 48px; height: 4px; background: var(--azul); flex-shrink: 0; }
.manchete { font-weight: 800; text-transform: uppercase; line-height: 0.98; letter-spacing: -0.01em; font-size: clamp(38px, 4.6vw, 56px); }
.destaque { color: var(--azul); }
.editorial { font-family: var(--lora); font-style: italic; font-weight: 400; text-transform: none; }
.texto-apoio { color: var(--cinza-texto); }

/* ---------- links de ação ---------- */
.link-cta {
  display: inline-flex; align-items: center; min-height: 52px;
  font-size: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: inherit; text-decoration: none; border-bottom: 4px solid var(--azul);
}
.link-cta:hover { color: var(--azul); }
.botao-pilula {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 64px; padding: 0 40px; border-radius: 999px;
  background: var(--azul); color: var(--branco); text-decoration: none;
  font-size: 17px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  transition: background .2s;
}
.botao-pilula:hover { background: #1F5CC9; color: var(--branco); }

/* ==========================================================
   HERO
   ========================================================== */
.hero { position: relative; background: var(--marinho-profundo); color: var(--branco); min-height: 780px; overflow: hidden; }
.hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 45% 50%; }
.topo { position: relative; z-index: 2; }
.topo__barra { height: 88px; display: flex; align-items: center; justify-content: space-between; }
.topo__logo img { height: 28px; width: auto; }
.topo__menu { display: flex; align-items: center; gap: 40px; font-size: 15px; font-weight: 500; }
.topo__menu a { color: var(--branco); text-decoration: none; }
.topo__menu a:hover { color: var(--azul); }
.topo__menu .topo__inscreva { font-weight: 700; letter-spacing: 0.06em; border-bottom: 3px solid var(--azul); padding-bottom: 4px; }
.hero__conteudo { position: relative; z-index: 2; padding-top: 64px; padding-bottom: 80px; }
.hero__texto { max-width: 680px; display: flex; flex-direction: column; gap: 28px; }
.hero__titulo { font-size: clamp(44px, 5vw, 72px); font-weight: 800; line-height: 0.96; letter-spacing: -0.01em; text-transform: uppercase; }
.hero__assinatura { font-family: var(--lora); font-style: italic; font-size: 28px; line-height: 1.3; }
.hero__lead { font-size: 19px; max-width: 500px; }
.hero__acoes { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.hero__prazo { font-size: 15px; }

/* ==========================================================
   FATOS
   ========================================================== */
.fatos { padding: 96px 0; }
.fatos__grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--linha-suave); border-bottom: 1px solid var(--linha-suave); }
.fato { padding: 48px 32px; display: flex; flex-direction: column; gap: 12px; border-right: 1px solid var(--linha-suave); }
.fato:first-child { padding-left: 0; }
.fato:last-child { padding-right: 0; border-right: 0; }
.fato__numero { font-size: 72px; font-weight: 800; line-height: 1; }
.fato__rotulo { font-size: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.fato__texto { font-size: 16px; line-height: 1.5; color: var(--cinza-texto); }

/* ==========================================================
   COMO FUNCIONA (tema azul)
   ========================================================== */
.como { background: var(--azul); color: var(--branco); }
.como__topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; margin-bottom: 64px; }
.como__topo > div { display: flex; flex-direction: column; gap: 24px; }
.como__titulo { font-size: clamp(40px, 4.6vw, 64px); }
.como__titulo span { color: var(--marinho); }
.como__intro { max-width: 400px; }
.fases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 64px; }
.fase { padding: 40px 48px 40px 0; border-top: 4px solid var(--branco); display: flex; flex-direction: column; gap: 16px; }
.fase + .fase { padding: 40px 0 40px 48px; border-top-color: var(--marinho); }
.fase__nome { font-size: 40px; font-weight: 700; line-height: 1.05; }
.ritmo { display: flex; align-items: center; gap: 48px; }
.ritmo__semanas { display: flex; gap: 4px; flex-shrink: 0; }
.ritmo__semanas span { width: 96px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--branco); color: var(--marinho); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; }
.ritmo__semanas span:last-child { background: var(--marinho); color: var(--branco); }

/* ==========================================================
   ONDE VOCÊ VAI ESTAR
   ========================================================== */
.onde__grade { display: grid; grid-template-columns: 480px minmax(0, 1fr); gap: 96px; }
.onde__texto { display: flex; flex-direction: column; gap: 24px; }
.areas { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--linha-suave); }
.areas li { padding: 14px 0; border-bottom: 1px solid var(--linha-suave); font-size: 17px; font-weight: 600; }
.parceiros { display: flex; flex-direction: column; justify-content: center; gap: 40px; }
.parceiros__grupo { display: flex; flex-direction: column; gap: 16px; }
.parceiros__titulo { font-size: 13px; }
.logos { display: grid; gap: 1px; background: var(--linha-suave); border: 1px solid var(--linha-suave); list-style: none; margin: 0; padding: 0; }
.logos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.logos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.logos li { height: 112px; background: var(--branco); display: flex; align-items: center; justify-content: center; padding: 0 12px; }
.logos img { height: var(--h, 36px); width: auto; max-width: 100%; object-fit: contain; }

/* ==========================================================
   DEPOIMENTOS
   ========================================================== */
.depoimentos { background: var(--fundo-suave); }
.destaque-depo { display: grid; grid-template-columns: 480px minmax(0, 1fr); gap: 96px; margin-bottom: 72px; }
.destaque-depo__cabeca { display: flex; flex-direction: column; gap: 24px; }
.destaque-depo__corpo { display: flex; gap: 40px; align-items: flex-start; }
.destaque-depo__foto { width: 220px; height: 330px; object-fit: cover; object-position: 50% 30%; flex-shrink: 0; }
.destaque-depo__texto { display: flex; flex-direction: column; gap: 20px; }
.selo { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--azul); text-transform: uppercase; }
.selo::before { content: ""; width: 32px; height: 4px; background: var(--azul); flex-shrink: 0; }
.citacao { font-family: var(--lora); font-style: italic; font-size: 28px; line-height: 1.35; }
.autor { display: flex; flex-direction: column; gap: 4px; }
.autor strong { font-size: 16px; }
.autor span { font-size: 15px; color: var(--cinza-texto); }

.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.card { background: var(--branco); display: flex; flex-direction: column; }
.card__foto { width: 100%; height: 280px; object-fit: cover; object-position: 50% 25%; }
.card__corpo { padding: 28px 24px; display: flex; flex-direction: column; gap: 18px; flex-grow: 1; }
.card__quando { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: var(--azul); text-transform: uppercase; }
.card__cargo { font-size: 22px; font-weight: 700; line-height: 1.2; margin-top: 6px; }
.card__fala { font-size: 17px; color: var(--cinza-texto); }
.card__autor { font-size: 15px; font-weight: 600; margin-top: auto; }
.card--escuro { background: var(--marinho); color: var(--branco); }
.card--escuro .card__quando { color: var(--branco); }
.card--escuro .card__fala { font-family: var(--lora); font-style: italic; font-size: 18px; color: var(--branco); }
.arraste { display: none; }

/* ==========================================================
   SELEÇÃO
   ========================================================== */
.selecao__grade { display: grid; grid-template-columns: 480px minmax(0, 1fr); gap: 96px; }
.selecao__texto { display: flex; flex-direction: column; gap: 24px; }
.etapas { list-style: none; margin: 0; padding: 0; }
.etapas__titulo { padding-bottom: 24px; }
.etapa { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 20px 0; border-top: 1px solid var(--linha-suave); }
.etapa:last-child { border-bottom: 1px solid var(--linha-suave); }
.etapa__num { font-size: 28px; font-weight: 800; color: var(--azul); }
.etapa__nome { font-size: 20px; font-weight: 600; }
.etapa__data { font-size: 15px; color: var(--cinza-texto); text-align: right; white-space: nowrap; }

/* ==========================================================
   CTA FINAL (tema escuro)
   ========================================================== */
.chamada { background: var(--marinho); color: var(--branco); }
.chamada__grade { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; }
.chamada__texto { display: flex; flex-direction: column; gap: 28px; }
.chamada__titulo { font-size: clamp(48px, 6.2vw, 88px); font-weight: 800; line-height: 0.95; text-transform: uppercase; }
.chamada__frase { font-family: var(--lora); font-style: italic; font-size: 26px; line-height: 1.35; }
.chamada__acao { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; font-size: 15px; }

/* ==========================================================
   RODAPÉ
   ========================================================== */
.rodape { background: var(--marinho-profundo); color: var(--branco); padding: 64px 0; }
.rodape__grade { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.rodape__marca { display: flex; flex-direction: column; gap: 16px; font-size: 14px; }
.rodape__marca img { height: 28px; width: auto; }
.redes { display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; font-size: 14px; font-weight: 600; letter-spacing: 0.08em; }
.redes a { color: var(--branco); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.redes a:hover { color: var(--azul); }

/* ==========================================================
   RESPONSIVO
   ========================================================== */
@media (max-width: 1100px) {
  .onde__grade, .destaque-depo, .selecao__grade { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fatos__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fato { padding: 36px 24px; border-bottom: 1px solid var(--linha-suave); }
  .fato:nth-child(2n) { border-right: 0; padding-right: 0; }
  .fato:nth-child(2n+1) { padding-left: 0; }
  .fato:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (max-width: 900px) {
  :root { --secao: 72px; }
  body { font-size: 16px; }
  .topo__menu a:not(.topo__inscreva) { display: none; }
  .topo__barra { height: 64px; }
  .topo__logo img { height: 22px; }
  .topo__menu .topo__inscreva { font-size: 13px; border-bottom: 0; padding: 0; min-height: 44px; display: inline-flex; align-items: center; }

  .hero { min-height: 0; }
  .hero__foto { height: 460px; object-position: 63% 50%; }
  .hero__conteudo { padding-top: 360px; padding-bottom: 72px; }
  .hero__texto { gap: 24px; }
  .hero__titulo { font-size: 38px; line-height: 1; }
  .hero__assinatura { font-size: 22px; }
  .hero__lead { font-size: 17px; }
  .categoria { font-size: 12px; letter-spacing: 0.12em; }
  .categoria--barra::before { width: 32px; }

  .fatos { padding: 24px 0 56px; }
  .fato__numero { font-size: 52px; }
  .fato__rotulo { font-size: 13px; }
  .fato__texto { font-size: 14px; }

  .como__topo { flex-direction: column; align-items: flex-start; margin-bottom: 40px; }
  .fases { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-bottom: 40px; }
  .fase, .fase + .fase { padding: 24px 0 0; }
  .fase__nome { font-size: 30px; }
  .ritmo { flex-direction: column; align-items: stretch; gap: 16px; }
  .ritmo__semanas span { width: auto; flex: 1; height: 36px; font-size: 11px; }

  .logos li { height: 72px; padding: 0 8px; }
  .logos img { height: calc(var(--h, 36px) * 0.64); }

  .destaque-depo { margin-bottom: 40px; }
  .destaque-depo__corpo { flex-direction: column; gap: 20px; }
  .destaque-depo__foto { width: 100%; height: 420px; }
  .citacao { font-size: 22px; line-height: 1.4; }
  .cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); }
  .card { width: 300px; flex-shrink: 0; scroll-snap-align: start; }
  .card__foto { height: 240px; }
  .card__corpo { padding: 24px; gap: 12px; }
  .card__cargo { font-size: 20px; }
  .card__fala { font-size: 15px; }
  .card--escuro .card__fala { font-size: 17px; }
  .arraste { display: block; margin-top: 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--cinza-texto); }

  .etapa { grid-template-columns: 40px minmax(0, 1fr); row-gap: 2px; padding: 16px 0; }
  .etapa__num { font-size: 22px; grid-row: span 2; align-self: start; }
  .etapa__nome { font-size: 17px; }
  .etapa__data { grid-column: 2; text-align: left; font-size: 14px; }

  .chamada__grade { flex-direction: column; align-items: stretch; }
  .chamada__frase { font-size: 20px; }
  .chamada__acao .botao-pilula { width: 100%; min-height: 56px; font-size: 15px; }

  .rodape { padding: 48px 0; }
  .rodape__grade { flex-direction: column; align-items: flex-start; }
  .redes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }