/* =========================================================
   WP Brasil Academy — style.css
   Linguagem visual: pill geometry, tipografia leve,
   alternância claro/escuro, superfícies planas.
   Tipografia: Barlow Condensed (títulos) + Satoshi (texto).
   ========================================================= */

/* ---------- Fontes locais ---------- */
/* Satoshi — texto corrido */
@font-face{
  font-family:'Satoshi';
  src:url('assets/fonts/fonte-texto-corrido/satoshi/satoshi-light.otf') format('opentype');
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Satoshi';
  src:url('assets/fonts/fonte-texto-corrido/satoshi/satoshi-light-italic.otf') format('opentype');
  font-weight:300; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Satoshi';
  src:url('assets/fonts/fonte-texto-corrido/satoshi/satoshi-regular.otf') format('opentype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Satoshi';
  src:url('assets/fonts/fonte-texto-corrido/satoshi/satoshi-italic.otf') format('opentype');
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Satoshi';
  src:url('assets/fonts/fonte-texto-corrido/satoshi/satoshi-medium.otf') format('opentype');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Satoshi';
  src:url('assets/fonts/fonte-texto-corrido/satoshi/satoshi-bold.otf') format('opentype');
  font-weight:700; font-style:normal; font-display:swap;
}

/* Barlow Condensed — títulos */
@font-face{
  font-family:'Barlow Condensed';
  src:url('assets/fonts/barlow-condensed/barlow-condensed-regular.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Barlow Condensed';
  src:url('assets/fonts/barlow-condensed/barlow-condensed-medium.ttf') format('truetype');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Barlow Condensed';
  src:url('assets/fonts/barlow-condensed/barlow-condensed-semibold.ttf') format('truetype');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Barlow Condensed';
  src:url('assets/fonts/barlow-condensed/barlow-condensed-bold.ttf') format('truetype');
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  /* --- Cores da marca --- */
  --wp-blue:        #005aff;  /* AZUL OFICIAL — H219 · R0 G90 B255 */
  --wp-blue-ink:    #0033a3;  /* azul profundo — títulos e navegação */
  --wp-blue-deep:   #001f5c;  /* azul-marinho — seções escuras */
  --wp-blue-soft:   #e5efff;  /* azul claro — superfícies de destaque */
  --wp-blue-mist:   #f1f6ff;  /* azul quase branco — painéis suaves */
  --wp-yellow:      #fffc00;  /* AMARELO OFICIAL */
  --wp-lavender:    #e2e6fb;  /* complementar discreta */
  --wp-periwinkle:  #98a6f2;  /* complementar discreta */

  /* --- Neutros --- */
  --paper:  #fdfdfe;
  --bone:   #f4f5f9;
  --ash:    #e4e7ef;
  --fog:    #66708a;
  --ink:    #101216;  /* preto/grafite da logo */

  /* --- Tipografia --- */
  --font:        'Satoshi', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-titulo: 'Barlow Condensed', 'Barlow', ui-sans-serif, system-ui, sans-serif;
  --tracking:      -0.02em;  /* texto corrido */
  --tracking-tit:   0.01em;  /* títulos em caixa alta pedem tracking positivo */

  /* --- Espaçamento --- */
  --s-4:4px; --s-8:8px; --s-12:12px; --s-16:16px; --s-20:20px;
  --s-24:24px; --s-32:32px; --s-48:48px; --s-64:64px; --s-96:96px; --s-128:128px;

  /* --- Formas --- */
  --r-pill: 100px;
  --r-card: 24px;
  --r-lg:   32px;
  --max:    1200px;

  --glow: 0 0 4px 0 rgba(0,90,255,.30);
  --ease: cubic-bezier(.2,.7,.3,1);
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:120px; }
body{
  margin:0;
  font-family:var(--font);
  font-weight:400;
  font-size:16px;
  line-height:1.4;
  letter-spacing:var(--tracking);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{
  font-family:var(--font-titulo);
  font-weight:500;
  letter-spacing:var(--tracking-tit);
  text-transform:uppercase;
  margin:0;
}
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--s-24); }
.wrap--narrow{ max-width:820px; }
.center{ text-align:center; }

/* ---------- Tipografia utilitária ---------- */
/* A condensada ocupa menos largura por caractere: os tamanhos
   sobem e o tracking negativo cede lugar ao desenho da fonte. */
.display{
  font-family:var(--font-titulo);
  font-size:clamp(40px, 6.8vw, 86px);
  line-height:1.05;
  font-weight:500;
  letter-spacing:var(--tracking-tit);
  text-transform:uppercase;
  color:var(--wp-blue-ink);
  margin:0 auto var(--s-24);
  max-width:15ch;
  text-wrap:balance;
}
.h-lg{
  font-family:var(--font-titulo);
  font-size:clamp(32px, 4.4vw, 58px);
  line-height:1.08;
  font-weight:500;
  letter-spacing:var(--tracking-tit);
  text-transform:uppercase;
  color:var(--wp-blue-ink);
  text-wrap:balance;
}
.eyebrow{
  font-family:var(--font-titulo);
  font-weight:500;
  font-size:15px;
  line-height:1.35;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--fog);
  margin-bottom:var(--s-24);
  display:inline-flex; align-items:center; gap:10px;
}
/* ponto amarelo da logo como único acento do eyebrow */
.eyebrow::before{
  content:""; flex:none;
  width:6px; height:6px; border-radius:50%;
  background:var(--wp-yellow);
}
.lede{
  font-size:17px;
  line-height:1.55;
  color:var(--fog);
  max-width:60ch;
  margin:0 auto var(--s-32);
}
.prose{ color:var(--fog); font-size:16px; line-height:1.6; max-width:62ch; }
.prose p + p{ margin-top:var(--s-16); }

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; gap:var(--s-8);
  padding:16px 32px;
  border:1px solid transparent;
  border-radius:var(--r-pill);
  font-size:15px; font-weight:400; line-height:1;
  letter-spacing:var(--tracking);
  cursor:pointer;
  transition:transform .35s var(--ease), background-color .35s var(--ease),
             color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.btn--sm{ padding:12px 24px; font-size:14px; }
.btn--primary{ background:var(--wp-blue); color:var(--paper); }
.btn--primary:hover{ background:var(--wp-blue-ink); box-shadow:var(--glow); transform:translateY(-1px); }
.btn--ghost{ background:transparent; color:var(--wp-blue-ink); border-color:var(--ash); }
.btn--ghost:hover{ border-color:var(--wp-blue-ink); transform:translateY(-1px); }
.btn--soft{ background:var(--wp-blue-soft); color:var(--wp-blue-ink); }
.btn--soft:hover{ background:var(--wp-lavender); transform:translateY(-1px); }
.section--dark .btn--primary{ background:var(--paper); color:var(--wp-blue-ink); }
.section--dark .btn--primary:hover{ background:var(--wp-blue-soft); box-shadow:none; }
.arrow{ font-size:.9em; transition:transform .35s var(--ease); }
.btn:hover .arrow, .path:hover .arrow{ transform:translate(2px,-2px); }
.btn-row{ display:flex; flex-wrap:wrap; gap:var(--s-12); justify-content:center; }

/* ---------- Header ---------- */
.header{
  position:fixed; inset:16px 0 auto; z-index:50;
  padding-inline:var(--s-24);
  transition:transform .4s var(--ease);
}
.header__inner{
  max-width:var(--max); margin-inline:auto;
  display:flex; align-items:center; gap:var(--s-24);
  padding:10px 12px 10px 24px;
  background:var(--paper);
  border:1px solid var(--ash);
  border-radius:var(--r-pill);
  box-shadow:0 6px 24px rgba(16,18,22,.08);
}
.logo img{ height:24px; width:auto; display:block; }
.nav{ display:flex; gap:var(--s-24); margin-inline:auto; }
.nav a{
  font-size:15px; color:var(--wp-blue-ink); opacity:.85;
  padding-bottom:2px; border-bottom:1px solid transparent;
  transition:opacity .3s var(--ease), border-color .3s var(--ease);
}
.nav a:hover{ opacity:1; border-color:var(--wp-yellow); }
.header__actions{ display:flex; align-items:center; gap:var(--s-8); }

.burger{
  display:none; width:44px; height:44px;
  border:1px solid var(--ash); border-radius:var(--r-pill);
  background:transparent; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.burger span{ width:16px; height:1px; background:var(--wp-blue-ink); transition:transform .3s var(--ease), opacity .3s var(--ease); }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3px) rotate(-45deg); }

.mobile-menu{
  position:fixed; z-index:49; top:84px; left:16px; right:16px;
  display:flex; flex-direction:column; gap:var(--s-4);
  padding:var(--s-16);
  background:var(--paper); border:1px solid var(--ash);
  border-radius:var(--r-card);
}
.mobile-menu[hidden]{ display:none; }
.mobile-menu a{ padding:12px 16px; border-radius:var(--r-pill); color:var(--wp-blue-ink); font-size:16px; }
.mobile-menu a:hover{ background:var(--bone); }
.mobile-menu .btn{ justify-content:center; margin-top:var(--s-8); color:var(--paper); }

/* ---------- Hero ---------- */
/* O hero é a própria arte: a headline e o texto já vêm na imagem.
   O container abraça o arquivo (sem corte) e só sobrepõe os CTAs. */
.hero{
  position:relative;
  background:var(--wp-blue);   /* mesmo azul do topo da arte */
  overflow:hidden;
}
.hero__media{ display:block; }
.hero__media img{
  display:block;
  width:100%; height:auto;
  aspect-ratio:2560 / 1080;
  object-fit:cover; object-position:center;
}
/* Os CTAs caem logo abaixo do bloco de texto impresso na arte. */
.hero__inner{
  position:absolute; inset:0;
  pointer-events:none;
}
.hero__cta{
  position:absolute;
  left:15.5%; top:76%;
  pointer-events:auto;
}
.hero__cta .btn--primary{ background:var(--wp-yellow); color:var(--ink); }
.hero__cta .btn--primary:hover{ background:var(--paper); color:var(--wp-blue-ink); }
.hero__cta .btn--ghost{ color:var(--paper); border-color:rgba(255,255,255,.55); }
.hero__cta .btn--ghost:hover{ border-color:var(--paper); background:rgba(255,255,255,.12); }

/* Conteúdo textual mantido para leitores de tela e busca. */
.visually-hidden{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  overflow:hidden; white-space:nowrap;
}

/* ---------- Faixa animada (marquee) entre o hero e a 1ª seção ----------
   Duas faixas: a de trás em amarelo e levemente inclinada; a da
   frente branca e reta. Rolam em sentidos opostos. */
.marquee{
  position:relative;
  z-index:4;
  overflow:hidden;
  isolation:isolate;
  /* a tira sobe pra dentro do hero (fundo transparente, então a foto
     aparece); a faixa amarela cruza a divisa — metade sobre o hero,
     metade sobre a seção — e a faixa branca fica exatamente na divisa */
  margin-top:-56px;
  padding-bottom:64px;
  background:transparent;
}
/* Faixa branca reta — mesmo tamanho de antes — exatamente na divisa. */
.marquee__band--front{
  position:relative; z-index:1;
  margin-top:56px;
  padding-block:13px;
  background:var(--paper);
  border-bottom:1px solid var(--ash);
}
/* Faixa amarela atrás, cruzando a divisa em diagonal (inteira). */
.marquee__band--back{
  position:absolute; left:-6%; right:-6%; top:82px; z-index:0;
  padding-block:11px;
  transform:translateY(-50%) rotate(-2.2deg);
  background:var(--wp-yellow);
}
.marquee__track{
  display:flex; width:max-content;
  animation:marquee-scroll 42s linear infinite;
}
.marquee__band--back .marquee__track{ animation-duration:56s; animation-direction:reverse; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__item{
  display:inline-flex; align-items:center; gap:var(--s-16);
  padding:0 var(--s-24);
  font-family:var(--font-titulo);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:17px;
  line-height:1;
  color:var(--wp-blue-ink);
  white-space:nowrap;
}
.marquee__band--back .marquee__item{
  color:var(--ink);
  font-size:26px;
  font-weight:700;
  letter-spacing:.06em;
}
.marquee__band--back .marquee__mark{ height:22px; }
.marquee__mark{ height:15px; width:auto; opacity:.9; }

/* Variante para transição entre duas seções de conteúdo (ex.: nas LPs,
   entre a timeline clara e a seção azul). Herda tudo do .marquee — sobe
   pra dentro da seção de cima com fundo transparente, então a faixa
   branca fica exatamente na divisa de cores. A única diferença: puxa a
   seção azul de baixo pra cima, para o azul aparecer sob a metade
   inferior da tira (em vez do branco da página). */
.marquee--mid{ margin-bottom:-64px; }
@keyframes marquee-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion:reduce){
  .marquee__track{ animation:none; transform:none; }
}
@media (max-width:720px){
  .marquee{ margin-top:-48px; padding-bottom:56px; }
  .marquee__band--front{ margin-top:48px; }
  .marquee__band--back{ top:48px; }
  .marquee__item{ font-size:14px; gap:var(--s-12); padding:0 14px; }
  .marquee__band--back .marquee__item{ font-size:21px; }
}

/* ---------- Seções ---------- */
.section{ padding:var(--s-128) 0; }
.section--soft{ background:var(--wp-blue-mist); }

/* Scroll reverso: a seção institucional (#a-wp) fica presa no topo
   e TODAS as seções seguintes sobem por cima dela ao rolar.
   Só #oportunidades ganha o tratamento visual de "cartão subindo"
   (cantos arredondados + sombra); as demais cobrem no scroll normal. */
#a-wp{
  position:sticky;
  top:0;
  z-index:0;
  background:var(--paper);
}
/* toda seção depois de #a-wp passa por cima dela ao rolar */
#a-wp ~ *{
  position:relative;
  z-index:1;
}
/* #para-quem não tinha fundo próprio — precisa ser opaco */
#para-quem{ background:var(--paper); }
/* só a seção de oportunidades tem o visual de "cartão subindo" */
#oportunidades{
  border-top-left-radius:var(--r-lg);
  border-top-right-radius:var(--r-lg);
  box-shadow:0 -32px 60px -24px rgba(16,18,22,.28);
}

@media (prefers-reduced-motion:reduce){
  #a-wp{ position:static; }
  #oportunidades{
    box-shadow:none;
    border-top-left-radius:0;
    border-top-right-radius:0;
  }
}

/* Seção em amarelo pleno — o cinza do texto some sobre o
   amarelo, então o corpo vai para grafite e as bordas escurecem. */
.section--amarelo{ background:var(--wp-yellow); }
.section--amarelo .prose{ color:var(--ink); }

/* Cards em azul pleno sobre o amarelo: tudo dentro deles inverte. */
.section--amarelo .card{
  background:#0046cc;  /* azul da marca um passo mais escuro */
  border-color:transparent;
}
.section--amarelo .card:hover{ border-color:var(--ink); }
.section--amarelo .card h3{ color:var(--paper); }
.section--amarelo .card p{ color:rgba(255,255,255,.82); }
.section--amarelo .card__media{ background:rgba(255,255,255,.14); }
.section--amarelo .btn--soft{ background:var(--paper); color:var(--wp-blue); }
.section--amarelo .btn--soft:hover{ background:var(--wp-yellow); color:var(--ink); }
.section--dark{ background:var(--wp-blue-deep); color:var(--paper); }
.section--dark .h-lg{ color:var(--paper); }
.section--dark .prose{ color:rgba(253,253,254,.72); }
.section--blue{ background:var(--wp-blue); color:var(--paper); }
.section--blue .h-lg{ color:var(--paper); }
.section--blue .prose{ color:rgba(253,253,254,.82); }
.section--cta{ text-align:center; }
.section--cta .prose{ margin:var(--s-24) auto var(--s-32); }

/* Bloco de texto centralizado com CTA (ex.: seção institucional) */
.section .center .prose{ margin:var(--s-20) auto 0; }
.section .center .btn-row{ margin-top:var(--s-24); }
.section__head{ max-width:760px; margin-bottom:var(--s-64); }
.section__head .prose{ margin-top:var(--s-20); }
.section__head--center{ margin-inline:auto; text-align:center; }
.section__head--center .prose{ margin-inline:auto; }

/* ---------- Cards ---------- */
.cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-24); }
.card{
  background:var(--paper);
  border:1px solid var(--ash);
  border-radius:var(--r-card);
  padding:var(--s-48);
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-16);
  transition:transform .4s var(--ease), border-color .4s var(--ease);
}
.card:hover{ transform:translateY(-3px); border-color:var(--wp-periwinkle); }
.card h3{ font-size:29px; line-height:1.2; color:var(--wp-blue-ink); }
.card p{ color:var(--fog); line-height:1.6; }
.card .btn{ margin-top:auto; }

/* ---------- Seção escura ---------- */
.dark-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:var(--s-64); align-items:start; }
.pill-list{ display:flex; flex-wrap:wrap; gap:var(--s-12); }
.pill-list li{
  padding:14px 24px;
  border:1px solid rgba(253,253,254,.18);
  border-radius:var(--r-pill);
  font-size:15px; color:rgba(253,253,254,.9);
  transition:border-color .35s var(--ease), background-color .35s var(--ease);
}
.pill-list li:hover{ border-color:var(--wp-yellow); background:rgba(253,253,254,.05); }

/* ---------- Para quem é ---------- */
/* ---------- Para quem é ---------- */
/* Lista de perfis à esquerda, painel de imagem à direita.
   A linha ativa (e a que recebe o mouse) inverte para o grafite. */
/* Malha discreta ao fundo — some nas bordas para não virar moldura. */
#para-quem{ position:relative; overflow:hidden; }
#para-quem::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background-image:
    repeating-linear-gradient(to right,  var(--ash) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(to bottom, var(--ash) 0 1px, transparent 1px 88px);
  background-position:center;
  opacity:.6;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 45%, #000 40%, transparent 100%);
  mask-image:radial-gradient(120% 90% at 50% 45%, #000 40%, transparent 100%);
  pointer-events:none;
}
#para-quem .wrap{ position:relative; z-index:1; }
#para-quem .section__head{
  max-width:none;
  display:grid; grid-template-columns:1.1fr 1fr;
  gap:var(--s-48); align-items:end;
}
#para-quem .section__head .prose{ margin-top:0; }

.audience{
  display:grid; grid-template-columns:1.05fr 1fr;
  gap:var(--s-48); align-items:stretch;
}
/* A lista é uma caixa fechada; a imagem acompanha a mesma altura. */
.audience__list{
  background:var(--paper);   /* a malha do fundo não atravessa a lista */
  border:1px solid var(--ash);
  border-radius:var(--r-card);
  overflow:hidden;
}
.audience__list li:last-child .arow{ border-bottom:0; }
.arow{
  display:flex; align-items:center; gap:var(--s-20);
  padding:14px var(--s-24);
  border-bottom:1px solid var(--ash);
  color:var(--ink);
  transition:background-color .35s var(--ease), color .35s var(--ease);
}
.arow__icon{
  flex:none;
  width:48px; height:48px;
  display:grid; place-items:center;
  border-radius:14px;
  background:var(--wp-blue-soft);
  transition:background-color .35s var(--ease);
}
.arow__icon svg{ width:22px; height:22px; fill:var(--wp-blue); transition:fill .35s var(--ease); }
.arow__text{ font-size:17px; line-height:1.35; }
.arow__text b{ font-weight:700; }
.arow__arrow{
  margin-left:auto; color:var(--fog);
  transition:transform .35s var(--ease), color .35s var(--ease);
}
.arow:hover, .arow.is-active{ background:var(--ink); color:var(--paper); }
.arow:hover .arow__icon, .arow.is-active .arow__icon{ background:rgba(255,255,255,.12); }
.arow:hover .arow__icon svg, .arow.is-active .arow__icon svg{ fill:var(--wp-yellow); }
.arow:hover .arow__arrow, .arow.is-active .arow__arrow{ color:var(--wp-yellow); transform:translateX(4px); }

.audience__media{ position:relative; margin:0; display:flex; }
.audience__media > img{
  width:100%; height:100%;
  min-height:100%;
  object-fit:cover;
  border:1px solid var(--ash);
  border-radius:var(--r-card);
  background:var(--wp-blue-soft);
}
.audience__caption{
  position:absolute; left:var(--s-24); right:var(--s-24); bottom:var(--s-24);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-16);
  padding:18px var(--s-24);
  border-radius:var(--r-card);
  background:var(--ink); color:var(--paper);
  font-size:15px; line-height:1.4;
}
.audience__caption b{ font-weight:700; }
.audience__mark{ flex:none; height:16px; width:auto; }

/* ---------- Como funciona ---------- */
/* Timeline vertical: a linha azul acompanha a posição real do scroll
   (altura escrita pelo JS) e cada etapa acende ao cruzar o meio da tela. */
.tl{ position:relative; max-width:960px; margin:0 auto; padding:var(--s-32) 0; }
.tl__track{
  position:absolute; top:0; bottom:0; left:50%;
  width:2px; transform:translateX(-1px);
  background:var(--ash);
}
.tl__fill{
  display:block; width:100%; height:0;
  background:var(--wp-blue);
}
.tl__row{
  position:relative;
  min-height:clamp(240px, 32vh, 360px);
  display:grid; grid-template-columns:1fr 1fr;
  align-items:center;
}
.tl__dot{
  position:absolute; left:50%; top:50%;
  width:18px; height:18px; margin:-9px 0 0 -9px;
  border-radius:50%;
  background:var(--wp-blue-mist);
  border:2px solid var(--ash);
  transition:transform .5s var(--ease), background-color .5s var(--ease),
             border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.tl__row.is-active .tl__dot{
  background:var(--wp-blue);
  border-color:var(--wp-blue);
  transform:scale(1.15);
  box-shadow:0 0 0 6px rgba(0,90,255,.10);
}
.tl__content{
  max-width:380px;
  opacity:.25;
  transform:translateY(40px) scale(.98);
  filter:blur(1px);
  transition:opacity .75s cubic-bezier(.2,.8,.2,1),
             transform .75s cubic-bezier(.2,.8,.2,1),
             filter .75s ease;
}
.tl__row.is-active .tl__content{
  opacity:1; transform:translateY(0) scale(1); filter:blur(0);
}
.tl__row--left .tl__content{
  grid-column:1; justify-self:end; text-align:right; padding-right:var(--s-64);
}
.tl__row--right .tl__content{
  grid-column:2; justify-self:start; text-align:left; padding-left:var(--s-64);
}
.tl__num{
  display:block;
  font-family:var(--font-titulo); font-weight:500;
  font-size:14px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--wp-blue);
  margin-bottom:var(--s-12);
}
.tl__content h3{ font-size:clamp(28px, 3.2vw, 40px); color:var(--wp-blue-ink); margin-bottom:var(--s-12); }
.tl__content p{ color:var(--fog); line-height:1.65; font-size:16px; }

@media (prefers-reduced-motion:reduce){
  .tl__content{ opacity:1; transform:none; filter:none; transition:none; }
}

/* ---------- Direcionamento ---------- */
.paths{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-12); }
.path{
  display:flex; align-items:center; gap:var(--s-16);
  text-align:left;
  padding:20px 28px;
  font-family:inherit; font-size:16px; letter-spacing:var(--tracking);
  color:var(--wp-blue-ink);
  background:var(--paper);
  border:1px solid var(--ash);
  border-radius:var(--r-lg);
  cursor:pointer;
  transition:transform .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease);
}
.path .arrow{ margin-left:auto; }
.path__icon{
  flex:none;
  width:44px; height:44px;
  display:grid; place-items:center;
  border-radius:12px;
  background:var(--wp-blue-soft);
  transition:background-color .35s var(--ease), transform .35s var(--ease);
}
.path__icon svg{
  width:22px; height:22px;
  fill:none; stroke:var(--wp-blue); stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
.path:hover{ transform:translateY(-2px); border-color:var(--wp-blue-ink); background:var(--wp-blue-soft); }
.path:hover .path__icon{ background:var(--paper); transform:translateY(-1px); }

.section--dark .path,
.section--blue .path{
  color:var(--paper);
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.22);
}
.section--dark .path .arrow,
.section--blue .path .arrow{ color:var(--wp-yellow); }
.section--dark .path__icon,
.section--blue .path__icon{ background:rgba(255,255,255,.12); }
.section--dark .path__icon svg,
.section--blue .path__icon svg{ stroke:var(--wp-yellow); }
.section--dark .path:hover,
.section--blue .path:hover{
  border-color:var(--paper);
  background:rgba(255,255,255,.16);
}
.section--dark .path:hover .path__icon,
.section--blue .path:hover .path__icon{ background:var(--wp-yellow); }
.section--dark .path:hover .path__icon svg,
.section--blue .path:hover .path__icon svg{ stroke:var(--wp-blue-ink); }

/* ---------- Rodapé ---------- */
.footer{ background:var(--paper); border-top:1px solid var(--ash); padding:var(--s-64) 0 var(--s-32); }
.footer__inner{ display:flex; justify-content:space-between; gap:var(--s-32); flex-wrap:wrap; }
.footer__logo{ height:26px; width:auto; margin-bottom:var(--s-16); }
.footer__tagline{ color:var(--fog); font-size:15px; max-width:38ch; }
.footer__links{ display:flex; flex-wrap:wrap; gap:var(--s-8); align-items:flex-start; }
.footer__links a{
  padding:10px 20px; border:1px solid var(--ash); border-radius:var(--r-pill);
  font-size:14px; color:var(--wp-blue-ink);
  transition:border-color .3s var(--ease), background-color .3s var(--ease);
}
.footer__links a:hover{ border-color:var(--wp-blue-ink); background:var(--bone); }
.footer__base{ margin-top:var(--s-48); padding-top:var(--s-24); border-top:1px solid var(--ash); font-size:13px; color:var(--fog); }

/* ---------- Animações de entrada ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ---------- Responsivo ---------- */
@media (max-width:1000px){
  .nav{ display:none; }
  .burger{ display:flex; }
  .header__actions{ margin-left:auto; }
  .header__actions .btn{ display:none; }
  .dark-grid{ grid-template-columns:1fr; gap:var(--s-32); }
  .audience, #para-quem .section__head{ grid-template-columns:1fr; gap:var(--s-32); }
  #para-quem .section__head{ align-items:start; }
  /* Empilhado, a imagem volta a ter proporção própria. */
  .audience__media > img{ height:auto; min-height:0; aspect-ratio:4 / 3; }
}
@media (max-width:720px){
  .section{ padding:var(--s-96) 0; }
  /* No mobile a arte é vertical: o header flutuante ganha uma faixa
     azul acima e os CTAs saem de cima da foto, para o fim da seção. */
  .hero{ padding-top:72px; }
  .hero__media img{ aspect-ratio:1080 / 1920; }
  /* Os CTAs flutuam sobre a base da arte vertical. */
  .hero__cta{
    left:var(--s-16); right:var(--s-16); top:auto;
    bottom:6%;
    flex-wrap:nowrap;
  }
  .hero__cta .btn{ flex:1 1 0; justify-content:center; padding:16px 20px; }
  .hero__cta .btn--ghost{
    background:var(--paper); color:var(--wp-blue-ink);
    border-color:var(--paper);
  }
  .hero__cta .btn--ghost:hover{ background:var(--wp-blue-soft); }
  .cards, .paths{ grid-template-columns:1fr; }
  /* Timeline no mobile: eixo à esquerda, conteúdo sempre à direita. */
  .tl__track{ left:9px; transform:none; }
  .tl__row{ grid-template-columns:1fr; min-height:clamp(240px, 34vh, 360px); }
  .tl__dot{ left:10px; }
  .tl__row--left .tl__content,
  .tl__row--right .tl__content{
    grid-column:1; justify-self:start; text-align:left;
    padding:0 0 0 var(--s-48);
  }
  .tl__content h3{ font-size:30px; }
  .arow{ padding:12px var(--s-16); gap:var(--s-16); }
  .arow__icon{ width:42px; height:42px; }
  .arow__text{ font-size:16px; }
  .audience__caption{
    left:var(--s-16); right:var(--s-16); bottom:var(--s-16);
    padding:14px var(--s-16); font-size:14px;
  }
  .card{ padding:var(--s-32); }
  .section__head{ margin-bottom:var(--s-48); }
  .footer__inner{ flex-direction:column; }
}

/* O menu mobile nunca aparece no desktop, mesmo com estado antigo */
@media (min-width:1001px){
  .mobile-menu{ display:none !important; }
}

/* ---------- Slot de imagem nos cards ---------- */
.card__media{
  margin:0 0 var(--s-8);
  width:100%;
  aspect-ratio:8 / 5;
  overflow:hidden;
  border-radius:var(--r-card);
  background:var(--wp-blue-soft);
}
.card__media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease);
}
/* foto em retrato: o grupo está na base — ancora o corte embaixo */
.card__media img[src*="experiencias-internacionais"]{ object-position:center bottom; }
.card:hover .card__media img{ transform:scale(1.03); }