/* Portfólio Vitor Vaz Liede — v3 "site pessoal": tipografia em escala de tela, hierarquia fixa
   (rótulo → título → texto curto → conteúdo), pouco texto e muito respiro. Só frames reais.
   Mobile-first. Breakpoints: 600px, 900px (grade de 12 colunas), 1100px (linha do tempo horizontal). */

:root {
  /* Cores da marca (PDF) */
  --azul: #3272b4;          /* texto, links, botão, rótulos: 5,00:1 no branco; branco sobre azul 5,00:1 */
  --azul-claro: #6ba6e6;    /* SÓ decorativo no claro (2,55:1). No marinho: decorativo ou texto >= 24px (4,24:1) */
  --azul-palido: #b8d1f6;   /* texto secundário, rótulo e foco no marinho: 6,95:1 */
  --marinho: #003f6f;       /* títulos e superfície escura: 10,82:1 com branco */
  --branco: #ffffff;

  /* Neutros */
  --tinta: #0f2640;         /* texto corrido: 15,31:1 */
  --tinta-2: #4a5f78;       /* texto secundário e rótulos suaves: 6,56:1 no branco, 6,06:1 no papel-2 */
  --papel-2: #f3f6fa;
  --linha: #d5e2f4;         /* fios decorativos no claro */
  --linha-escura: rgb(184 209 246 / .32);
  --realce-escuro: rgb(255 255 255 / .06);
  /* PROIBIDO: azul-claro como texto no branco; azul sobre azul-pálido (3,21:1); azul sobre marinho (2,17:1); opacity em texto. */

  /* Fontes: a condensada fica só no nome e nos títulos de página; o resto é semi condensada e Barlow */
  --fonte-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --fonte-titulo: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --fonte-texto: 'Barlow', 'Helvetica Neue', Arial, sans-serif;

  /* Escala tipográfica para tela (360px → 1440px) */
  --t-nome: clamp(2.75rem, 1.9rem + 3.6vw, 4.5rem);     /* 44 → 72 */
  --t-h1: clamp(2.5rem, 1.8rem + 3vw, 4rem);            /* 40 → 64: Trabalhos, Vamos conversar */
  --t-h2: clamp(1.625rem, 1.3rem + 1.3vw, 2.25rem);     /* 26 → 36 */
  --t-citacao: clamp(1.375rem, 1.15rem + 1vw, 2rem);    /* 22 → 32 */
  --t-promessa: clamp(1.375rem, 1.1rem + 1.1vw, 2rem);  /* 22 → 32: a frase de valor ganha dos títulos de seção */
  --t-h3: clamp(1.125rem, 1.05rem + .3vw, 1.25rem);     /* 18 → 20: cartões, listas, marcos */
  --t-lead: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);  /* 17 → 19 */
  --t-corpo: clamp(1rem, .97rem + .15vw, 1.0625rem);    /* 16 → 17 */
  --t-pequeno: .9375rem;
  --t-rotulo: .8125rem;
  --t-botao: .875rem;

  /* Espaço */
  --margem: clamp(16px, 5vw, 64px);
  --gutter: clamp(16px, 2.2vw, 32px);
  --largura: 1200px;
  --secao: clamp(5rem, 10vw, 9rem);          /* respiro entre seções */
  --cabeca-corpo: clamp(2rem, 4vw, 3rem);     /* do título ao conteúdo */
  --topo-h: 64px;           /* >= 600px: uma linha */
  --topo-marca-h: 44px;     /* < 600px: linha da marca, que rola */
  --topo-nav-h: 48px;       /* < 600px: linha do menu, que fica presa */

  /* Forma */
  --fio: 1px solid var(--linha);
  --fio-escuro: 1px solid var(--linha-escura);
  --tracejado: repeating-linear-gradient(90deg, var(--azul) 0 8px, transparent 8px 14px);
  --tracejado-v: repeating-linear-gradient(180deg, var(--azul) 0 8px, transparent 8px 14px);
  --tracejado-escuro: repeating-linear-gradient(90deg, var(--azul-claro) 0 8px, transparent 8px 14px);
  --canto: 20px;            /* braço da marca de visor */
  --canto-recuo: 12px;
  --play: 56px;

  /* Foco */
  --foco: 3px solid var(--marinho);
  --foco-escuro: 3px solid var(--azul-palido);

  /* Movimento */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-rapida: 150ms;
  --dur-capa: 300ms;
  --dur-media: 420ms;
  --dur-nome: 600ms;
  --dur-linha: 900ms;
  --desloc: 12px;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 56px; }

body {
  margin: 0;
  background: var(--branco);
  color: var(--tinta);
  font: 400 var(--t-corpo) / 1.65 var(--fonte-texto);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
p { text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: var(--foco); outline-offset: 3px; }
main:focus { outline: none; }

.container { width: min(100% - 2 * var(--margem), var(--largura)); margin-inline: auto; }
#conteudo { scroll-margin-top: var(--topo-marca-h); }   /* "voltar ao topo" no celular mostra a marca */

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.pular {
  position: absolute;
  left: 16px; top: 8px; z-index: 20;
  padding: 12px 16px;
  background: var(--marinho);
  color: var(--branco);
  font: 600 .875rem / 1.2 var(--fonte-titulo);
  text-decoration: none;
  transform: translateY(-200%);
}
.pular:focus { transform: none; }

/* ---------- Peças recorrentes ---------- */

.rotulo {
  font: 600 var(--t-rotulo) / 1.3 var(--fonte-titulo);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--azul);
}
.rotulo--suave { color: var(--tinta-2); }
.subtitulo { font: 600 var(--t-corpo) / 1.3 var(--fonte-titulo); color: var(--tinta-2); }

.titulo {
  font: 600 var(--t-h2) / 1.12 var(--fonte-titulo);
  letter-spacing: -.01em;
  color: var(--marinho);
  max-width: 34ch;
  text-wrap: balance;
}

.titulo-pagina {
  font: 700 var(--t-h1) / .95 var(--fonte-display);
  text-transform: uppercase;
  color: var(--azul);
  text-wrap: balance;
}

.lead { font-size: var(--t-lead); line-height: 1.55; color: var(--tinta-2); max-width: 52ch; }

.tracejado { display: block; height: 2px; background: var(--tracejado); }

/* Abertura das 3 páginas: rótulo + tracejado (motivo da capa do PDF) */
.linha-rotulo { display: flex; align-items: center; gap: 16px; }
.linha-rotulo .tracejado { flex: 1; }

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  background: var(--azul);
  color: var(--branco);
  font: 600 var(--t-botao) / 1.2 var(--fonte-titulo);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--dur-rapida);
}
.botao:hover { background: var(--marinho); }
.botao:active { background: var(--tinta); }

.link-seta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font: 600 var(--t-botao) / 1.2 var(--fonte-titulo);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--azul);
  text-decoration: underline 1px;
  text-underline-offset: 4px;
  transition: color var(--dur-rapida), text-underline-offset var(--dur-rapida);
}
.link-seta > [aria-hidden] { display: inline-block; transition: transform var(--dur-rapida) var(--ease); }
.link-seta:hover { color: var(--marinho); text-underline-offset: 6px; }
.link-seta:hover > [aria-hidden] { transform: translateX(4px); }
.link-seta--topo:hover > [aria-hidden] { transform: translateY(-3px); }

.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }

/* Seção padrão: fio + rótulo → título → conteúdo */
.secao { margin-top: var(--secao); padding-top: clamp(1.5rem, 3vw, 2rem); border-top: var(--fio); }
.secao .titulo { margin-top: 12px; }
.secao > .titulo:first-child { margin-top: 0; }
.secao__corpo { margin-top: var(--cabeca-corpo); }

/* Cartões */
.cartoes { display: grid; gap: var(--gutter); }
.cartao { padding: clamp(20px, 2.4vw, 28px); border: 1px solid var(--linha); border-top: 2px solid var(--azul); }
.cartao h4 { font: 600 var(--t-h3) / 1.25 var(--fonte-titulo); color: var(--marinho); }
.cartao p { margin-top: 8px; color: var(--tinta-2); }

/* Frame real, com marcas de canto de visor */
.frame { position: relative; overflow: hidden; background: var(--papel-2); aspect-ratio: 16 / 9; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame::after {
  content: "";
  position: absolute;
  inset: var(--canto-recuo);
  pointer-events: none;
  --c: linear-gradient(var(--azul-claro), var(--azul-claro));
  background:
    var(--c) top left / var(--canto) 2px no-repeat,
    var(--c) top left / 2px var(--canto) no-repeat,
    var(--c) top right / var(--canto) 2px no-repeat,
    var(--c) top right / 2px var(--canto) no-repeat,
    var(--c) bottom left / var(--canto) 2px no-repeat,
    var(--c) bottom left / 2px var(--canto) no-repeat,
    var(--c) bottom right / var(--canto) 2px no-repeat,
    var(--c) bottom right / 2px var(--canto) no-repeat;
}

/* Superfície escura (faixa da home e miolo do Contato) */
.faixa-escura { background: var(--marinho); color: var(--branco); }
.faixa-escura .rotulo { color: var(--azul-palido); }
.faixa-escura .tracejado { background: var(--tracejado-escuro); }
.faixa-escura :focus-visible { outline: var(--foco-escuro); }

/* ---------- Cabeçalho ---------- */

.topo {
  position: sticky;
  top: calc(-1 * var(--topo-marca-h));   /* no celular, a linha da marca rola e o menu fica preso */
  z-index: 10;
  background: var(--branco);
  border-bottom: var(--fio);
}
.topo__conteudo { display: flex; flex-wrap: wrap; align-items: center; }
.topo__marca {
  flex: 1 0 100%;
  display: flex;
  align-items: center;
  height: var(--topo-marca-h);
  font: 700 15px / 1 var(--fonte-display);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--azul);
  text-decoration: none;
}
.topo__nav { flex: 1 0 100%; border-top: var(--fio); }
.topo__menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 4px 8px;
  min-height: var(--topo-nav-h);
}
.topo__menu a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 4px;
  border-bottom: 2px solid transparent;
  font: 600 .8125rem / 1.2 var(--fonte-titulo);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--azul);
  text-decoration: none;
  transition: border-color var(--dur-rapida), background-color var(--dur-rapida), color var(--dur-rapida);
}
.topo__menu a:hover { border-bottom-color: var(--azul-claro); }
.topo__menu a[aria-current="page"] { border-bottom-color: var(--azul); color: var(--marinho); }
.topo__menu .topo__contato { min-height: 36px; padding-inline: 14px; border: 2px solid var(--azul); color: var(--azul); }
.topo__menu .topo__contato:hover,
.topo__menu .topo__contato[aria-current="page"] { background: var(--azul); border-color: var(--azul); color: var(--branco); }

/* ---------- Home: capa ---------- */

.hero { display: grid; gap: clamp(2.5rem, 5vw, 4rem); padding-top: clamp(2.5rem, 7vw, 6rem); }
.hero__nome {
  margin-top: 20px;
  font: 700 var(--t-nome) / .95 var(--fonte-display);
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: var(--azul);
  overflow-wrap: normal;   /* nunca partir o nome */
  text-wrap: balance;
}
.hero__promessa {
  margin-top: 20px;
  max-width: 24ch;
  font: 600 var(--t-promessa) / 1.2 var(--fonte-titulo);
  color: var(--marinho);
  text-wrap: balance;
}
.hero__apoio { margin-top: 16px; max-width: 52ch; color: var(--tinta-2); }
.hero .linha-rotulo .rotulo { font-size: 1rem; letter-spacing: .08em; }   /* o cargo precisa ser lido na primeira tela */
.hero .acoes { margin-top: 32px; }
.hero__midia figcaption { margin-top: 12px; }
.frame--hero img { object-position: 65% 50%; }

/* O que eu faço */
.frentes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.frentes li { padding: 8px 14px; border: 1px solid var(--linha); font: 600 var(--t-pequeno) / 1.2 var(--fonte-titulo); color: var(--marinho); }
.publico { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.publico .cartoes { margin-top: 14px; }

/* Como eu trabalho */
.pilar { font: 600 var(--t-h3) / 1.3 var(--fonte-titulo); color: var(--marinho); }
.resultado { margin-top: 32px; max-width: 48ch; font: 600 var(--t-h3) / 1.4 var(--fonte-titulo); color: var(--marinho); }
.resultado .rotulo { display: block; margin-bottom: 8px; }

/* Faixa-citação */
.faixa--citacao { margin-top: var(--secao); padding-block: clamp(4.5rem, 9vw, 7.5rem); }
.faixa--citacao .tracejado { width: 64px; }
.citacao { margin-top: 24px; max-width: 34ch; font: 600 var(--t-citacao) / 1.25 var(--fonte-titulo); text-wrap: balance; }
.citacao__fecho { color: var(--azul-palido); }

/* De onde eu venho */
.meta { margin-top: 12px; font-size: var(--t-pequeno); color: var(--tinta-2); }

.fase + .fase { margin-top: 32px; }
.fase__rotulo { position: relative; padding-bottom: 10px; }
.fase__rotulo::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 48px; height: 2px;
  background: var(--azul-palido);
}
.fase--coordenacao .fase__rotulo::after { background: var(--azul); }
.marcos { margin-top: 24px; }
.marco { position: relative; padding: 0 0 24px 32px; }
.marco::before {                       /* trilho */
  content: "";
  position: absolute;
  left: 6px; top: 0; bottom: 0;
  width: 2px;
  background: var(--tracejado-v) no-repeat;
  background-size: 100% 100%;
}
.marco:first-child::before { top: 11px; }   /* o trilho começa no primeiro nó */
.marco:last-child { padding-bottom: 0; }
.marco:last-child::before { bottom: auto; height: 11px; }
.marco::after {                        /* nó */
  content: "";
  position: absolute;
  left: 0; top: 4px;
  width: 14px; height: 14px;
  border: 2px solid var(--azul);
  border-radius: 50%;
  background: var(--branco);
}
.marco--hoje::after { left: -2px; top: 2px; width: 18px; height: 18px; background: var(--azul); }
.marco h4 { font: 600 var(--t-h3) / 1.25 var(--fonte-titulo); color: var(--marinho); }
.marco--hoje h4 { color: var(--azul); }
.marco p { margin-top: 4px; font-size: var(--t-pequeno); line-height: 1.5; color: var(--tinta-2); }

.futuro {                              /* tracejado em cima: trecho que ainda vem */
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 20px;
  background: var(--tracejado) top left / 100% 2px no-repeat;
  font: 600 var(--t-h3) / 1.4 var(--fonte-titulo);
  color: var(--marinho);
}
.futuro .rotulo { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.futuro .rotulo::before { content: ""; width: 12px; height: 12px; border: 2px solid var(--azul); border-radius: 50%; }

/* Competências */
.competencias { display: grid; column-gap: var(--gutter); }
.competencias li { padding: 16px 0; border-top: var(--fio); font: 600 var(--t-h3) / 1.3 var(--fonte-titulo); color: var(--marinho); }

/* Chamada (CTA) */
.chamada { margin-top: var(--secao); padding-top: clamp(1.75rem, 3vw, 2.25rem); background: var(--tracejado) top left / 100% 2px no-repeat; }
.chamada .titulo { margin-top: 12px; }
.chamada .lead { margin-top: 16px; }
.chamada .acoes { margin-top: 32px; }

/* Mosaico de frames: peças 16:9 e variações grande (2×2), larga (2×1) e alta (1×2) */
.mosaico {
  --mosaico-gap: clamp(8px, 1.2vw, 16px);
  --mosaico-cols: 2;
  display: grid;
  grid-template-columns: repeat(var(--mosaico-cols), minmax(0, 1fr));
  grid-auto-rows: calc((min(100vw - 2 * var(--margem), var(--largura)) - (var(--mosaico-cols) - 1) * var(--mosaico-gap)) / var(--mosaico-cols) * 9 / 16);
  grid-auto-flow: dense;
  gap: var(--mosaico-gap);
}
.mosaico > * { position: relative; overflow: hidden; background: var(--papel-2); }
.mosaico img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mosaico .grande, .mosaico .largo { grid-column: span 2; }
.mosaico .alto { grid-row: span 2; }
@media (max-width: 899px) { .mosaico .largo-celular { grid-column: span 2; } }   /* fecha a última linha em 2 colunas */

/* Faixa de frames na home */
.galeria { margin-top: var(--secao); }
.galeria__cabeca { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 24px; margin-bottom: 16px; }

/* ---------- Rodapé ---------- */

.rodape { margin-top: var(--secao); }
main:has(> .contato) + .rodape { margin-top: clamp(2rem, 4vw, 3rem); }
.rodape__conteudo { display: grid; gap: 16px; padding-top: 40px; border-top: var(--fio); }
.rodape__nome { font: 700 1.25rem / 1 var(--fonte-display); text-transform: uppercase; color: var(--azul); }
.rodape__marca .rotulo { margin-top: 8px; }
.rodape__nav ul { display: flex; flex-wrap: wrap; gap: 0 24px; }
.rodape__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 600 1rem / 1.2 var(--fonte-titulo);
  color: var(--azul);
  text-decoration: none;
}
.rodape__nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.rodape__nav a[aria-current="page"] { color: var(--marinho); }
.rodape__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 24px;
  margin-top: 32px;
  padding: 16px 0 24px;
  border-top: var(--fio);
  font-size: var(--t-pequeno);
  color: var(--tinta-2);
}

/* ---------- Trabalhos ---------- */

.abertura { padding-top: clamp(2.5rem, 7vw, 6rem); }
.abertura .titulo-pagina { margin-top: 20px; }
.abertura .lead { margin-top: 16px; }
.abertura + .mosaico { margin-top: clamp(2.5rem, 5vw, 3.5rem); }


.nota { max-width: 52ch; padding: 14px 18px; border-left: 3px solid var(--azul); background: var(--papel-2); }
main:has(.video, .video-link) .nota { display: none; }   /* sem JS: some quando já existe vídeo */
.indice + .nota { margin-top: 24px; }
.indice__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-height: 56px;
  padding: max(12px, calc((56px - var(--t-h3) * 1.3) / 2)) 0;
  border-top: var(--fio);
  color: var(--marinho);
  text-decoration: none;
}
.indice li:last-child .indice__item { border-bottom: var(--fio); }
.indice__no { flex: none; width: 12px; height: 12px; margin-top: calc((var(--t-h3) * 1.3 - 12px) / 2); border: 2px solid var(--azul); border-radius: 50%; }
.indice:not(:has(.indice__item--com-video)) .indice__no { display: none; }   /* sem nenhum vídeo: lista limpa */
.indice__nome { flex: 1; font: 600 var(--t-h3) / 1.3 var(--fonte-titulo); }
.indice__qtd {
  align-self: center;
  font: 600 .8125rem / 1.2 var(--fonte-titulo);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-2);
  white-space: nowrap;
}
.indice__seta { display: none; align-self: center; color: var(--azul); transition: transform var(--dur-rapida) var(--ease); }
.indice__item--com-video .indice__no { background: var(--azul); }
.indice__item--com-video .indice__nome { color: var(--azul); }
.indice__item--com-video .indice__seta { display: inline-block; }
.indice__item--com-video:hover { background: var(--papel-2); }
.indice__item--com-video:hover .indice__nome { color: var(--marinho); }
.indice__item--com-video:hover .indice__seta { transform: translateY(3px); }

.categoria { margin-top: clamp(3rem, 6vw, 5rem); }
.categoria:not(:has(.video, .video-link)) { display: none; }   /* categoria vazia não aparece */
.categoria__titulo { padding-top: 20px; font: 600 clamp(1.5rem, 1.3rem + .8vw, 2rem) / 1.15 var(--fonte-titulo); color: var(--marinho); }
.videos { margin-top: 24px; }
.video-link { display: flex; align-items: center; min-height: 44px; color: var(--azul); }  /* sem JS: link de texto */
.videos__grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 32px var(--gutter); }
.videos__grade--unico { grid-template-columns: minmax(0, 760px); }   /* vídeo único ganha destaque */
.videos__grade--vertical { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.videos__grade + .videos__grade { margin-top: 32px; }

.video__tela { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--papel-2); }
.video[data-formato="vertical"] .video__tela { aspect-ratio: 9 / 16; }
.video__tela iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__play { all: unset; position: absolute; inset: 0; display: block; cursor: pointer; }
.video__play img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-capa) var(--ease); }
.video__play:focus-visible { outline: var(--foco); outline-offset: -3px; }   /* reserva p/ navegador sem :has */
.video__tela:has(.video__play:focus-visible) { outline: var(--foco); outline-offset: 3px; }
@supports selector(:has(a)) { .video__play:focus-visible { outline: none; } }
.video__icone {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--play); height: var(--play);
  transform: translate(-50%, -50%);
  background: var(--azul);
  transition: background-color var(--dur-rapida);
}
.video__icone::after {                 /* triângulo do play; clip-path funciona também em alto contraste */
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 16px; height: 20px;
  transform: translate(calc(-50% + 2px), -50%);
  background: var(--branco);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.video__play:hover img { transform: scale(1.02); }
.video__play:hover .video__icone,
.video__play:focus-visible .video__icone { background: var(--marinho); }
.video__titulo { margin-top: 12px; font: 600 1.0625rem / 1.3 var(--fonte-titulo); color: var(--tinta); }

/* ---------- Contato ---------- */

.contato { padding-block: clamp(2.5rem, 7vw, 6rem) clamp(4.5rem, 9vw, 7.5rem); }
.contato .titulo-pagina { margin-top: 20px; color: var(--branco); }
.contato__grade { display: grid; gap: var(--cabeca-corpo); }
.contato__midia .frame { aspect-ratio: 16 / 9; }

.canais { display: grid; gap: var(--gutter); margin-top: var(--cabeca-corpo); }
.canal {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  min-height: 140px;
  padding: 24px;
  border: var(--fio-escuro);
  color: var(--branco);
  text-decoration: none;
  transition: background-color var(--dur-rapida);
}
.canal__nome { font: 600 clamp(1.375rem, 1.2rem + .8vw, 1.75rem) / 1.1 var(--fonte-titulo); }
.canal__acao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 .8125rem / 1.3 var(--fonte-titulo);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--azul-palido);
}
.canal__acao > [aria-hidden] { display: inline-block; transition: transform var(--dur-rapida) var(--ease); }
.canal[href]:hover { background: var(--realce-escuro); }
.canal[href]:hover .canal__acao > [aria-hidden] { transform: translateX(4px); }
.canal:focus-visible { outline-offset: -3px; }

.redes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; margin-top: 40px; }
.redes__lista { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.rede {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font: 600 var(--t-h3) / 1.2 var(--fonte-titulo);
  color: var(--branco);
  text-decoration: none;
}
.rede[href]:hover { text-decoration: underline; text-underline-offset: 4px; }
.rede:not([href]) { color: var(--azul-palido); }
.rede:not([href]) .rede__externo { display: none; }

/* Estado "Em breve": canal ou rede ainda sem link (sem href, não é focável) */
.estado {
  display: none;
  padding: 4px 8px;
  border: 1px dashed var(--azul-palido);
  font: 600 .75rem / 1.3 var(--fonte-titulo);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--azul-palido);
}
.canal:not([href]) .canal__acao { display: none; }
.canal:not([href]) .estado { display: inline-block; align-self: flex-start; }
.rede:not([href]) .estado { display: inline-block; }

/* ---------- Movimento (só com movimento permitido) ---------- */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .js [data-revelar] { transition: opacity var(--dur-media) var(--ease), transform var(--dur-media) var(--ease); }
  .js [data-revelar]:not(.visivel) { opacity: 0; transform: translateY(var(--desloc)); }

  .hero__texto > * { animation: sobe var(--dur-nome) var(--ease) both; }
  .hero__texto > :nth-child(2) { animation-delay: 60ms; }
  .hero__texto > :nth-child(3) { animation-delay: 120ms; }
  .hero__texto > :nth-child(n+4) { animation-delay: 180ms; }
  .hero__midia { animation: aparece 800ms var(--ease) 200ms both; }

  .js .linha-tempo .marco::before { transition: background-size var(--dur-linha) var(--ease); }
  .js .linha-tempo .fase--coordenacao .marco::before { transition-delay: 300ms; }
  .js .linha-tempo:not(.visivel) .marco::before { background-size: 100% 0; }
}

@keyframes sobe { from { opacity: 0; transform: translateY(.5rem); } }
@keyframes aparece { from { opacity: 0; } }

/* ---------- A partir de 600px ---------- */

@media (min-width: 600px) {
  html { scroll-padding-top: 72px; }

  .topo { top: 0; }
  .topo__conteudo { flex-wrap: nowrap; justify-content: space-between; gap: 24px; height: var(--topo-h); }
  .topo__marca { flex: none; height: auto; }
  .topo__nav { flex: none; border-top: 0; }
  .topo__menu { justify-content: flex-end; gap: 24px; min-height: 0; }
  .topo__menu a { font-size: .875rem; }

  .cartoes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .competencias { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .videos__grade--vertical { grid-template-columns: repeat(auto-fill, minmax(150px, 220px)); gap: 16px; }

  .canais { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .rodape__conteudo { grid-template-columns: 1fr auto; align-items: center; }
}

/* Celular: nas chamadas, botão em largura total e link embaixo */
@media (max-width: 599px) {
  .chamada .acoes { flex-direction: column; align-items: stretch; }
  .chamada .botao { width: 100%; }
  .chamada .link-seta { align-self: flex-start; }
}

/* ---------- A partir de 900px: grade de 12 colunas ---------- */

@media (min-width: 900px) {
  :root { --canto-recuo: 16px; }

  .hero { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
  .hero__texto { grid-column: 1 / 7; }
  .hero__midia { grid-column: 7 / 13; }
  .frame--hero { aspect-ratio: 4 / 3; }

  .cartoes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .competencias { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .mosaico { --mosaico-cols: 3; }
  .mosaico .grande { grid-row: span 2; }

  .contato__grade { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
  .contato__texto { grid-column: 1 / 8; }
  .contato__midia { grid-column: 9 / 13; }
  .contato__midia .frame { aspect-ratio: 4 / 5; }

  .linha-tempo { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); }   /* fases lado a lado */
  .fase + .fase { margin-top: 0; }

  .canais { max-width: 820px; }
}

/* ---------- A partir de 1100px: linha do tempo horizontal ---------- */

@media (min-width: 1100px) {
  .linha-tempo { grid-template-columns: 4fr 2fr; column-gap: 0; }   /* trilho contínuo entre as fases */
  .fase__rotulo::after { width: 100%; }
  .marcos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fase--coordenacao .marcos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marco,
  .marco:last-child { padding: 36px 24px 0 0; }
  .marco::before,
  .marco:first-child::before,
  .marco:last-child::before {
    left: 0; right: 0; top: 6px; bottom: auto;
    width: auto; height: 2px;
    background-image: var(--tracejado);
  }
  .fase:last-child .marco:last-child::before { display: none; }
  .marco::after { top: 0; }
  .marco--hoje::after { top: -2px; }
  .marco p { max-width: 24ch; }
}

@media (min-width: 1100px) and (prefers-reduced-motion: no-preference) {
  .js .linha-tempo:not(.visivel) .marco::before { background-size: 0 100%; }
}

/* ---------- Impressão / Salvar como PDF ---------- */

@media print {
  .js [data-revelar] { opacity: 1 !important; transform: none !important; }
  .js .linha-tempo .marco::before { background-size: 100% 100% !important; }
  .faixa-escura { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .topo { position: static; }
  .pular { display: none; }
}

/* ---------- Alto contraste (forced-colors) ---------- */

@media (forced-colors: active) {
  .video__icone { border: 2px solid CanvasText; }
  .video__icone::after { background: CanvasText; }
}