/* ==================================================================
   LP Programa de Estágio Samsung 2027 — v4

   ------------------------------------------------------------------
   DE ONDE VEM CADA COISA
   ------------------------------------------------------------------
   ESTRUTURA — o padrão das outras LPs da casa. Os quatro componentes
   canônicos foram copiados de lá, com os mesmos papéis:

     .card ......... benefícios. Card branco, ícone acima do texto,
                     alinhado à esquerda. É a anatomia da CTG, Enforce,
                     Inpasa e Tereos, com nomes de classe equivalentes
     .req .......... pré-requisitos. Lista com fio de 1px e ícone à
                     esquerda, como na CTG, Enforce e AXIA
     .timeline ..... etapas. Trilho horizontal atrás dos nós, nó
                     circular de 84px e selo numerado no canto. É o
                     componente da Super Gasbrás / CTG / Enforce
     .area ......... áreas. Lista editorial de duas colunas com fio,
                     como na AXIA e na Iguatemi

   TOKENS — o design system levantado do site da Samsung, em
   _pesquisa/DESIGN-SYSTEM-SAMSUNG.md:

     container 1440px .......... .container-width--1440
     faixa alternada #F7F7F7 ... 28 ocorrências no CSS de produção
     fio #DDDDDD ............... a borda mais usada do sistema (83x)
     botão 9/23/10/23, raio 20 . o .cta deles, medida única
     azul como pontuação ....... #1428A0 aparece 9x em 466 KB
     entrelinha 1.33 ........... o valor do sistema para quase tudo
     sem sombra pesada ......... a hierarquia vem do tipo e do espaço

   COR DA CAMPANHA — #0F2586, amostrado da moldura de Hero-SAMSUNG.png.
   É o azul do KV: abre a página, marca o meio e fecha.
   ================================================================== */

:root {
  /* campanha */
  --kv: #0F2586;

  /* sistema Samsung */
  --azul:  #1428A0;
  --acao:  #2189FF;
  --preto: #000000;
  --forte: #313131;
  --apoio: #555555;
  --sec:   #757575;
  --fio:   #DDDDDD;
  --cinza: #F7F7F7;

  --fio-claro: rgba(255, 255, 255, .22);

  /* PENDÊNCIA 08 — as proprietárias não vieram. As duas substitutas
     abaixo são as que o levantamento do design system indica. Quando
     os arquivos chegarem, troca-se só estas duas linhas:
       --display: 'SamsungSharpSans', Arial, sans-serif;
       --corpo:   'SamsungOne', Arial, sans-serif;              */
  --display: 'Outfit', Arial, sans-serif;
  --corpo:   'Inter', Arial, sans-serif;

  --ease: cubic-bezier(.35, 0, .36, 1);   /* a curva da Samsung */

  --topo-h: 64px;
  --raio: 16px;
  --raio-foto: 24px;

  /* medidas internas, como nas outras LPs (container / grid / texto) */
  --grade: 1100px;
  --leitura: 46rem;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topo-h) + 8px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--corpo);
  font-size: 17px;
  line-height: 1.6;
  color: var(--forte);
  background: #fff;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, dl, dd, dt, ul, ol, figure { margin: 0; }
ul, ol { list-style: none; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

:focus-visible { outline: 2px solid var(--acao); outline-offset: 3px; }
.topo :focus-visible,
.abertura :focus-visible,
.secao--azul :focus-visible,
.fechamento :focus-visible { outline-color: #fff; }

::selection { background: var(--azul); color: #fff; }

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

.pula {
  position: fixed; left: 12px; top: -60px;
  z-index: 100;
  background: #fff; color: var(--kv);
  padding: .7rem 1.2rem; border-radius: 999px;
  font-size: .875rem; font-weight: 600;
  transition: top .2s var(--ease);
}
.pula:focus { top: 12px; }


/* ============================ MEDIDA ============================
   1440px é o container do sistema Samsung (.container-width--1440).
   ================================================================ */

.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

@media (min-width: 768px)  { .wrap { padding-left: 40px; padding-right: 40px; } }
@media (min-width: 1280px) { .wrap { padding-left: 64px; padding-right: 64px; } }

.secao { padding: 4.5rem 0; }
@media (min-width: 1024px) { .secao { padding: 7rem 0; } }

.secao--cinza { background: var(--cinza); }
.secao--azul  { background: var(--kv); color: #fff; }


/* ============================ O TOPO ============================ */

.topo { position: sticky; top: 0; z-index: 60; background: var(--kv); }

.topo-barra {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
  height: var(--topo-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

@media (min-width: 768px)  { .topo-barra { padding: 0 40px; } }
@media (min-width: 1280px) { .topo-barra { padding: 0 64px; } }

/* Logotipo oficial, vetor do kit da Samsung. 106px é a largura exata
   do logotipo no cabeçalho da samsung.com (.nv00-gnb-v4__logo). */
.marca { display: inline-flex; align-items: center; }
.marca-logo { width: 106px; height: auto; display: block; }
@media (max-width: 767px) { .marca-logo { width: 92px; } }
.marca-logo--rodape { width: 150px; }

.topo-nav { display: none; align-items: center; gap: 1.75rem; margin-left: auto; }
@media (min-width: 1024px) { .topo-nav { display: flex; } }

.topo-link {
  font-size: .9375rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .78);
  padding: .35rem 0;
  border-bottom: 1.5px solid transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}

.topo-link:hover { color: #fff; }
.topo-link.ativo { color: #fff; border-color: #fff; }

.topo-fim { display: flex; align-items: center; gap: .9rem; }

.menu-btn {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 34px; height: 34px;
  padding: 0; background: none; border: 0; cursor: pointer;
}

@media (min-width: 1024px) { .menu-btn { display: none; } }

.menu-btn span {
  display: block;
  width: 20px; height: 1.5px;
  background: #fff;
  transition: transform .3s var(--ease);
}

.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }

.menu[hidden] { display: none; }

.menu {
  border-top: 1px solid var(--fio-claro);
  padding: 1.25rem 24px 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--kv);
}

.menu-link { font-family: var(--display); font-size: 1.35rem; font-weight: 600; color: #fff; }


/* ============================ BOTÕES ============================
   O .cta do sistema Samsung: padding 9px 23px 10px 23px, raio 20px,
   que numa altura de ~40px já é pílula completa.
   ================================================================ */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 9px 23px 10px;
  font-family: var(--corpo);
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
  white-space: nowrap;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}

.botao:active { opacity: .7; }
.botao--g { padding: 14px 32px 15px; font-size: 16px; line-height: 20px; }

.botao--branco { background: #fff; border-color: #fff; color: var(--kv); }
.botao--branco:hover { background: var(--acao); border-color: var(--acao); color: #fff; }


/* ========================== A ABERTURA ==========================
   TELA CHEIA: cabeçalho + abertura somam 100svh.

   SÓ A ARTE, sangrando de ponta a ponta. É como todas as LPs da casa
   abrem — Camil, Allied, Banco Sofisa, Omni, Tereos e AXIA: o KV
   preenche a primeira tela e não há nada por cima nem por baixo dele
   dentro do hero.

   A largura segue o padrão Hager, a mesma linha da LP da AXIA: base
   de 1140px, acompanhando a tela a partir daí e travando em 2000px, o
   tamanho nativo do arquivo.
   ================================================================ */

.abertura {
  position: relative;
  background: var(--kv);
  display: flex;
  justify-content: center;
  overflow: hidden;
}

/* Do tablet para baixo a arte deitada não vira tela cheia sem virar
   tarja: entra inteira, na largura da tela. PENDÊNCIA 15: a saída
   definitiva é o KV em versão vertical. */
.kv { display: block; width: 100%; }
.kv-arte { width: 100%; height: auto; }

@media (min-width: 1024px) {
  /* TELA CHEIA: cabeçalho + abertura somam 100svh. */
  .abertura { height: calc(100svh - var(--topo-h)); }

  /* Largura do padrão Hager, a mesma linha da LP da AXIA: base de
     1140px, acompanhando a tela a partir daí e travando em 2000px, o
     tamanho nativo da arte. */
  .kv {
    width: clamp(1140px, 100vw, 2000px);
    max-width: none;
    height: 100%;
    flex: 0 0 auto;
  }

  /* O corte sai pela ESQUERDA, não pelo centro.
     Nesta arte o conteúdo está todo à direita — o lettering, as três
     pessoas e os selos de produto. À esquerda sobra campo azul com a
     trilha de circuito. Cortando em 65% o grupo fica inteiro em toda
     largura, e o que se perde é a área vazia. Com `center` a terceira
     pessoa ficava partida na borda. */
  .kv-arte { height: 100%; object-fit: cover; object-position: 65% center; }
}

/* Acima de 2000px a caixa da arte trava no nativo e sobra campo dos
   dois lados. A borda dela é um pouco mais clara que o campo, o que
   deixaria uma emenda vertical à vista: os últimos 3% de cada lado
   dissolvem no azul. */
@media (min-width: 2001px) {
  .kv-arte {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
  }
}


/* ======================== CABEÇA DE SEÇÃO ========================
   Centrada, como em todas as LPs da casa. A escala é a do sistema
   Samsung: o título de bloco deles é 28px e a headline de destaque
   56px — aqui fica entre os dois. Sem rótulo em caixa alta.
   ================================================================ */

.cabeca { text-align: center; max-width: var(--leitura); margin: 0 auto 3rem; }
@media (min-width: 1024px) { .cabeca { margin-bottom: 3.5rem; } }

.titulo {
  font-family: var(--display);
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--preto);
}

.titulo--claro { color: #fff; }

.lead { margin-top: .9rem; font-size: 1.0625rem; line-height: 1.6; color: var(--apoio); }
.lead--claro { color: rgba(255, 255, 255, .78); }


/* ============================ TEXTO ============================ */

.duas { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .duas { grid-template-columns: 1fr 1fr; gap: 3.5rem; } }

.texto { font-size: 1.0625rem; line-height: 1.6; color: var(--apoio); }


/* ========================= 70 : 20 : 10 ========================= */

.metodo { margin-top: 3.5rem; display: grid; gap: 1rem; }
@media (min-width: 700px) { .metodo { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }

.metodo-card {
  border: 1px solid var(--fio);
  border-radius: var(--raio);
  padding: 1.75rem 1.5rem;
  background: #fff;
}

.metodo-num {
  display: block;
  font-family: var(--display);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--kv);
}

.metodo-num i { font-style: normal; font-size: .5em; margin-left: .05em; }

.metodo-desc { display: block; margin-top: .75rem; font-size: .9375rem; line-height: 1.33; color: var(--apoio); }


/* ============================ LADRILHOS ============================ */

.ladrilhos { margin-top: 3.5rem; display: grid; gap: 1rem; }
@media (min-width: 600px) { .ladrilhos { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }

.ladrilho { border-radius: var(--raio-foto); overflow: hidden; background: var(--cinza); }
.ladrilho img { width: 100%; height: 100%; object-fit: cover; }

.ladrilho--54 { aspect-ratio: 5 / 4; }
.ladrilho--54 img { object-position: center 40%; }

/* Altura fixa, não aspect-ratio + max-height: aquele par encolhia a
   largura junto e a foto parava de ocupar a faixa. */
.ladrilho--largo { margin-top: 3.5rem; height: min(52vw, 520px); }
.ladrilho--largo img { object-position: center 40%; }
@media (min-width: 768px) { .ladrilho--largo { height: min(38vw, 520px); } }


/* ========================== OS REQUISITOS ==========================
   Lista com fio e ícone à esquerda — o `.req` da CTG, da Enforce e da
   AXIA. Sem card e sem caixa: o que separa é 1px.

   Os cinco pares rótulo/valor do escopo mantêm a divisão dos
   dois-pontos; os dois itens sem rótulo trazem só o valor.
   ================================================================== */

.reqs { max-width: var(--grade); margin: 0 auto; }

.req {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.5rem .25rem;
  border-top: 1px solid var(--fio);
}

.req:last-child { border-bottom: 1px solid var(--fio); }

@media (min-width: 768px) { .req { gap: 1.75rem; padding: 1.6rem .5rem; } }

.req-icone { flex: 0 0 auto; color: var(--azul); margin-top: .1rem; }

.req-icone svg {
  width: 28px; height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.req-corpo { min-width: 0; }

@media (min-width: 900px) {
  .req-corpo { display: grid; grid-template-columns: 15rem 1fr; gap: 2rem; align-items: baseline; }
  .req-corpo:has(dt) dd { grid-column: 2; }
  .req-corpo dd:only-child { grid-column: 1 / -1; }
}

.req dt { font-size: 1rem; font-weight: 600; color: var(--preto); line-height: 1.4; }
.req dd { font-size: 1.0625rem; line-height: 1.55; color: var(--apoio); }
.req dt + dd { margin-top: .25rem; }
@media (min-width: 900px) { .req dt + dd { margin-top: 0; } }


/* ============================ OS CARDS ============================
   Benefícios. Card branco, ícone de 36px ACIMA do texto e alinhado à
   esquerda — a anatomia `.card / .card-icon / .card-text` que se
   repete nas LPs da CTG, Enforce, Inpasa e Tereos.

   Sobre a faixa azul o card branco já se destaca sozinho: não leva
   fio nem sombra, o que também respeita o sistema Samsung.
   ================================================================== */

.cards { display: grid; gap: 1rem; }
@media (min-width: 560px)  { .cards { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(4, 1fr); } }

.card {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  background: #fff;
  border-radius: var(--raio);
  padding: 1.9rem 1.6rem;
  transition: transform .3s var(--ease);
}

.card:hover { transform: translateY(-4px); }

.card-icone { display: block; color: var(--azul); }

.card-icone svg {
  width: 36px; height: 36px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card-texto {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--preto);
  margin-top: auto;
}

.chamada-nota {
  color: var(--acao);
  font-weight: 700;
  vertical-align: super;
  font-size: .72em;
  margin-left: .1rem;
}

.nota {
  margin: 2.5rem auto 0;
  max-width: 66ch;
  display: flex;
  gap: .5rem;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--sec);
}

.nota > span { color: var(--azul); font-weight: 700; }
.nota--claro { color: rgba(255, 255, 255, .66); }
.nota--claro > span { color: #fff; }


/* ============================ AS ÁREAS ============================
   Lista editorial de duas colunas com fio, como na LP da AXIA. Não é
   botão, e por isso não tem forma de botão. Sem numeração: áreas são
   um conjunto, não uma sequência.
   ================================================================== */

.areas { max-width: var(--grade); margin: 0 auto; display: grid; }

@media (min-width: 820px) {
  .areas {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    column-gap: 3.5rem;
  }
  /* a segunda coluna começa com o fio de cima, como a primeira */
  .area:nth-child(4) { border-top: 1px solid var(--fio); }
}

.area {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.15rem;
  padding: 1.25rem .5rem;
  border-bottom: 1px solid var(--fio);
  overflow: hidden;
}

.area:first-child { border-top: 1px solid var(--fio); }

/* a varredura de cor no hover — o gesto da lista da AXIA */
.area::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--kv);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}

.area:hover::before { transform: scaleX(1); }

.area-seta,
.area-nome { position: relative; transition: color .3s var(--ease), transform .3s var(--ease); }

.area-seta {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  color: var(--azul);
}

.area-seta svg {
  width: 18px; height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.area-nome {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--preto);
}

.area:hover .area-seta,
.area:hover .area-nome { color: #fff; }
.area:hover .area-nome { transform: translateX(6px); }


/* ============================ A TIMELINE ============================
   Etapas. Trilho horizontal atrás dos nós, nó circular de 84px com o
   ícone dentro e o selo numerado no canto — o componente das LPs da
   Super Gasbrás, CTG e Enforce.

   Em tela estreita vira coluna: o trilho some e o nome fica ao lado
   do nó, que é o que se lê melhor no toque.
   ==================================================================== */

.timeline { position: relative; max-width: var(--grade); margin: 0 auto; }

.timeline-trilho { display: none; }

.timeline-passos { display: grid; gap: 1.25rem; }

.passo { position: relative; display: flex; align-items: center; gap: 1.25rem; }

.passo-no {
  position: relative;
  flex: 0 0 auto;
  width: 64px; height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--azul);
  background: #fff;
  color: var(--azul);
}

.passo-icone {
  width: 28px; height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.passo-num {
  position: absolute;
  top: -9px; right: -8px;
  min-width: 28px; height: 24px;
  padding: 0 .4rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--acao);
  border: 2px solid var(--cinza);
  color: #fff;
  font-family: var(--display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.passo-nome {
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--preto);
}

@media (min-width: 900px) {
  /* o trilho: começa no centro do primeiro nó e termina no do último.
     Com cinco colunas iguais, isso é exatamente 10% de cada lado. */
  .timeline-trilho {
    display: block;
    position: absolute;
    left: 10%; right: 10%;
    top: 41px;
    height: 3px;
    border-radius: 999px;
    background: var(--fio);
    overflow: hidden;
  }

  .timeline-trilho::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--azul);
    transform-origin: left;
    transition: transform 1.2s var(--ease);
  }

  .timeline-passos { grid-template-columns: repeat(5, 1fr); gap: 1.5rem; }

  .passo { flex-direction: column; text-align: center; gap: 1.5rem; }

  .passo-no { width: 84px; height: 84px; border-width: 3px; }
  .passo-icone { width: 34px; height: 34px; }
  .passo-num { top: -10px; right: -6px; min-width: 32px; height: 26px; font-size: .76rem; }

  .passo-nome { font-size: .9375rem; max-width: 15ch; }
}


/* ============================ OS NÚMEROS ============================ */

.numeros { margin-top: 3rem; display: grid; gap: 1rem; }
@media (min-width: 700px) { .numeros { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }

.numero {
  display: flex;
  flex-direction: column-reverse;
  gap: .5rem;
  border: 1px solid var(--fio);
  border-radius: var(--raio);
  padding: 1.75rem 1.5rem;
}

.numero dd {
  font-family: var(--display);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--kv);
}

.numero dt { font-size: .9375rem; line-height: 1.33; color: var(--apoio); }


/* ========================= O FECHAMENTO ========================= */

.fechamento { background: var(--kv); color: #fff; padding-top: 5rem; }
@media (min-width: 1024px) { .fechamento { padding-top: 7rem; } }

.fechamento-miolo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  text-align: center;
}

.fechamento-titulo {
  font-family: var(--display);
  font-size: clamp(1.75rem, 3.6vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: #fff;
  max-width: 22ch;
}

.rodape { margin-top: 5rem; padding-bottom: 2.5rem; }
@media (min-width: 1024px) { .rodape { margin-top: 7rem; } }

.rodape-topo {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--fio-claro);
}

.rodape-across { height: 1.6rem; width: auto; filter: brightness(0) invert(1); }

.rodape-meio {
  display: grid;
  gap: 1.75rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--fio-claro);
}

@media (min-width: 900px) {
  .rodape-meio { grid-template-columns: minmax(0, 36ch) 1fr; align-items: start; gap: 4rem; }
}

.rodape-suporte { font-size: .9375rem; line-height: 1.6; color: rgba(255, 255, 255, .7); }

.rodape-suporte a {
  color: #fff;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, .45);
  transition: border-color .25s var(--ease);
}

.rodape-suporte a:hover { border-color: #fff; }

.rodape-redes { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; }
@media (min-width: 900px) { .rodape-redes { justify-content: flex-end; } }

.rodape-redes a {
  font-size: .9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .7);
  padding: 2px 0;
  border-bottom: 1px solid transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}

.rodape-redes a:hover { color: #fff; border-color: #fff; }

.rodape-copy { padding-top: 2rem; font-size: .8125rem; color: rgba(255, 255, 255, .5); }


/* ============================ O MOVIMENTO ============================
   O `.reveal` da casa: as grades entram em cascata quando aparecem, e
   o trilho das etapas se preenche junto. Só existe quando <html> tem
   .js — posto pelo <head> antes da primeira pintura, e só se o
   visitante não pediu menos movimento. Sem script, a página nasce
   inteira e parada.
   ==================================================================== */

html.js .js-revela > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}

html.js .js-revela.visto > * { opacity: 1; transform: none; }

html.js .js-revela > *:nth-child(2) { transition-delay: .08s; }
html.js .js-revela > *:nth-child(3) { transition-delay: .16s; }
html.js .js-revela > *:nth-child(4) { transition-delay: .24s; }
html.js .js-revela > *:nth-child(5) { transition-delay: .32s; }
html.js .js-revela > *:nth-child(6) { transition-delay: .40s; }
html.js .js-revela > *:nth-child(7) { transition-delay: .48s; }
html.js .js-revela > *:nth-child(8) { transition-delay: .56s; }

/* O preenchimento do trilho parte de zero só enquanto os passos ainda
   não entraram. Navegador sem :has() ignora a regra e o trilho já
   nasce cheio — nada some. */
html.js .timeline:has(.timeline-passos:not(.visto)) .timeline-trilho::after { transform: scaleX(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}