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

   ------------------------------------------------------------------
   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. Ícone acima do texto, alinhado à
                     esquerda — a anatomia da CTG, Enforce, Inpasa e
                     Tereos. Aqui em vidro sobre o azul da campanha
     .req .......... pré-requisitos. Ficha de duas colunas, ícone em
                     selo à esquerda de cada par rótulo/valor
     .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. Cartão com selo de ícone e nome em corpo
                     de display, na grade de dois dos pré-requisitos,
                     com o quinto item na faixa inteira

   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 — o azul do KV e dois degraus mais vivos para o gradiente */
  --kv:  #0F2586;
  --kv2: #1B3FD1;
  --kv3: #2E4BFF;

  /* sistema Samsung */
  --azul:  #1428A0;
  --acao:  #2189FF;
  --preto: #000000;
  --forte: #313131;
  --apoio: #555555;
  --sec:   #757575;
  --fio:   #DDDDDD;
  --cinza: #F7F7F7;
  --gelo:  #EEF3FC;   /* chão claro frio — o azul do KV rebaixado */

  --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-2: 20px;
  --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--gelo  { background: var(--gelo); }

/* A trilha de circuito do KV, discreta, atrás das etapas. Some nas
   bordas para não virar papel de parede. */
/* clip, não hidden: overflow:hidden viraria contexto de rolagem e
   mataria o position:sticky do palco das etapas */
.secao--trilha { position: relative; overflow: clip; }
.secao--trilha::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.6px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  pointer-events: none;
}
.secao--trilha > .wrap { position: relative; }
.secao--azul {
  background:
    radial-gradient(900px 420px at 50% -20%, rgba(33, 137, 255, .35), transparent 55%),
    linear-gradient(160deg, var(--kv), var(--kv2));
  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; }

/* Progresso de leitura — uma linha fina no pé do cabeçalho. É o único
   elemento novo do topo: o resto voltou ao original. */
.progresso {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, .16);
}

.progresso i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--acao), #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;
  gap: .5rem;
  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;
  cursor: pointer;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}

.botao:active { opacity: .7; }
.botao:hover { transform: translateY(-1px); }
.botao--g { padding: 14px 32px 15px; font-size: 16px; line-height: 20px; }

/* preta — o botão principal do sistema Samsung */
.botao--preto { background: var(--preto); border-color: var(--preto); color: #fff; }
.botao--preto:hover { background: var(--azul); border-color: var(--azul); }

/* azul de ênfase */
.botao--azul { background: var(--acao); border-color: var(--acao); color: #fff; }
.botao--azul:hover { background: var(--azul); border-color: var(--azul); }

/* branca — sobre fundo azul */
.botao--branco { background: #fff; border-color: #fff; color: var(--kv); }
.botao--branco:hover { background: var(--acao); border-color: var(--acao); color: #fff; }

/* contornada branca — sobre fundo azul */
.botao--fantasma { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.botao--fantasma:hover { background: #fff; border-color: #fff; color: var(--kv); }



/* ========================== 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%; animation: heroEntra 1.1s var(--ease) both; }
.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);
  }
}


/* ============================ O TICKER ============================
   Fita infinita com as categorias de produto citadas no escopo (seção
   "Sobre a empresa"). Encosta no pé da arte e continua o campo azul
   dela: é a ponte entre a abertura e o miolo branco. */
.ticker {
  overflow: hidden;
  background: var(--kv);
  border-bottom: 1px solid var(--fio-claro);
  padding: .9rem 0;
}
.ticker-faixa { display: flex; gap: 2.5rem; width: max-content; animation: fita 34s linear infinite; }
.ticker-faixa:hover { animation-play-state: paused; }
.ticker span { font-family: var(--display); font-size: .9375rem; font-weight: 600; letter-spacing: .04em; color: rgba(255, 255, 255, .82); white-space: nowrap; }
.ticker i { font-style: normal; color: var(--acao); }


/* ======================== CABEÇA DE SEÇÃO ========================
   Estrutura editorial: fio de abertura, título à esquerda em 5/12 e a
   frase de apoio à direita em 7/12. É a estrutura das páginas de
   especificação da Samsung — e o que faz o miolo "parecer desenhado"
   em vez de uma pilha de faixas centralizadas.
   ================================================================== */

.cabeca {
  max-width: var(--grade);
  margin: 0 auto 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--fio);
  display: grid;
  gap: 1rem;
}

@media (min-width: 900px) {
  .cabeca {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 3.5rem;
    align-items: start;
    margin-bottom: 4rem;
  }
}

/* seção que só tem título (Sobre a empresa): ele fica com a linha */
.cabeca > .titulo:only-child { grid-column: 1 / -1; }

.secao--azul .cabeca { border-top-color: var(--fio-claro); }

.titulo {
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.03em;
  color: var(--preto);
}

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

.lead {
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  line-height: 1.55;
  color: var(--apoio);
  max-width: 48ch;
}
@media (min-width: 900px) { .lead { padding-top: .5rem; } }

.lead--claro { color: rgba(255, 255, 255, .8); }

/* lead com selo: o alfinete de local à esquerda da frase de São Paulo */
.lead--selo { display: flex; align-items: flex-start; gap: .8rem; }

.lead-selo {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  margin-top: .1rem;
  border-radius: 11px;
  background: var(--gelo);
  color: var(--azul);
}

.lead-selo svg {
  width: 18px; height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}


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

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

/* PROSA — bloco de leitura contínua na coluna da direita da cabeça.
   É o que "os textos juntos" (retorno 10/09) pede: a fala de abertura
   e os parágrafos que a seguem num fio só, sem vão entre eles. O lead
   continua um grau maior, então o bloco tem entrada e corpo sem
   precisar de régua nenhuma. */
.prosa { display: grid; gap: 1.1rem; }
.prosa .lead,
.prosa .texto { max-width: 60ch; }

/* O primeiro parágrafo tinha o corpo do lead, um grau acima dos outros
   dois — o cliente estranhou duas vezes (10/09). Dentro da prosa ele
   passa a ter exatamente o corpo do texto: os três parágrafos ficam
   iguais, que é onde "os textos juntos" termina. Fora da prosa o .lead
   segue como era, porque nas outras seções ele é linha de apoio do
   título, não primeiro parágrafo. */
.prosa .lead { font-size: 1.0625rem; line-height: 1.6; }

/* SOBRE O PROGRAMA, COM RETRATO — retorno 10/09: com o texto todo na
   coluna da direita, sobrava um vão grande embaixo do título. O texto
   desceu para debaixo do título, na esquerda, e o retrato ocupa a
   direita. Por isso os pesos das colunas invertem: a fala fica com 7 e
   a foto com 5 (a cabeça padrão é 5/7).

   A foto usa .ladrilho, o mesmo tratamento das outras da página: raio
   de 24px, fio de 1px e proporção nativa — o corte 2:3 já vem feito no
   arquivo, que é a régra de "fotos sem corte" desta LP.

   Em tela estreita a cabeça empilha sozinha e a ordem fica natural:
   título, texto, foto. */
.cabeca-fala { display: grid; gap: 1.5rem; }

.cabeca-retrato { margin: 0; }

@media (min-width: 900px) {
  .cabeca--foto {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }
}

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


/* ========================= 70 : 20 : 10 =========================
   A proporção do escopo lida COMO proporção. Três cartões de numeral
   gigante era o tratamento padrão de "número grande + rótulo pequeno";
   a barra diz a mesma coisa e mostra a diferença entre as três fatias.
   Ela se preenche quando entra na tela — movimento que é informação.
   ================================================================== */

.metodo { max-width: var(--grade); margin: 3.5rem auto 0; }

.metodo-barra {
  display: flex;
  height: 18px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--cinza);
}

/* A borda branca faz as vezes de respiro entre as fatias sem somar
   largura: com box-sizing: border-box os 70/20/10 continuam fechando
   exatamente 100%. */
.metodo-fatia {
  width: var(--w);
  height: 100%;
  border-right: 3px solid #fff;
  transition: width 1.2s var(--ease);
}
.metodo-fatia:last-child { border-right: 0; }

.metodo-fatia--a { background: linear-gradient(90deg, var(--kv), var(--azul)); }
.metodo-fatia--b { background: var(--acao); }
.metodo-fatia--c { background: #9FC2FF; }

/* parte de zero só enquanto a barra ainda não entrou */
html.js .metodo:not(.visto) .metodo-fatia { width: 0; }

.metodo-legenda { margin-top: 1.9rem; display: grid; gap: 1.6rem; }
@media (min-width: 720px) { .metodo-legenda { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }

.metodo-item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .7rem;
  row-gap: .5rem;
  align-items: center;
}

.metodo-marca { width: 10px; height: 10px; border-radius: 3px; }
.metodo-marca--a { background: var(--azul); }
.metodo-marca--b { background: var(--acao); }
.metodo-marca--c { background: #9FC2FF; }

.metodo-num {
  font-family: var(--display);
  font-size: clamp(1.75rem, 3vw, 2.375rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--preto);
  font-variant-numeric: tabular-nums;
}
.metodo-num i { font-style: normal; font-size: .5em; margin-left: .06em; color: var(--sec); }

.metodo-desc { grid-column: 1 / -1; font-size: .9375rem; line-height: 1.45; color: var(--apoio); }


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

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

/* inverte só a ordem VISUAL (ver o comentário no HTML): mantém a
   sequência do documento para quem empilha e para leitor de tela */
@media (min-width: 640px) {
  .ladrilhos--troca > :first-child { order: 2; }
}

/* Fotos SEM CORTE (retorno 09/09): cada imagem renderiza na própria
   proporção — nada de object-fit: cover nem aspect-ratio forçado. */
.ladrilho {
  border-radius: var(--raio-foto);
  overflow: hidden;
  background: var(--cinza);
  border: 1px solid var(--fio);
}
.ladrilho img { width: 100%; height: auto; display: block; }

/* o time — banda larga que ABRE a seção (subiu no layout). O arquivo
   foi reenquadrado (09/09, retorno): a foto subiu dentro do corte e o
   grupo aparece da cabeça até a altura do quadril, sem cortar corpo.
   Proporção ~1.85:1 — renderiza inteira, sem cover, em toda largura. */
.ladrilho--largo { margin: 0 0 3.5rem; }
@media (max-width: 767px) { .ladrilho--largo { margin-bottom: 3rem; } }


/* ========================== OS REQUISITOS ==========================
   Ficha de especificação, em duas colunas. Cada par rótulo/valor do
   escopo é um cartão branco sobre o chão gelo, com o ícone num selo
   arredondado. Os três itens de texto longo — Formação, Cursos e Local
   — ocupam a linha inteira, o que mantém a grade fechada sem hifenizar
   a lista de cursos.

   A divisão dos dois-pontos (D12) continua: dt é o rótulo, dd é o
   valor. Os dois itens sem rótulo têm só o valor, e os ";" ficam (C3).
   ==================================================================== */

.reqs { max-width: var(--grade); margin: 0 auto; display: grid; gap: 1rem; }
@media (min-width: 820px) { .reqs { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }

.req {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  background: #fff;
  border: 1px solid var(--fio);
  border-radius: var(--raio-2);
  padding: 1.5rem 1.6rem 1.65rem;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}

@media (min-width: 820px) { .req--largo { grid-column: 1 / -1; } }

.req:hover {
  transform: translateY(-3px);
  border-color: rgba(33, 137, 255, .55);
  box-shadow: 0 26px 46px -34px rgba(15, 37, 134, .6);
}

.req-icone {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: var(--gelo);
  color: var(--azul);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}

.req:hover .req-icone { background: var(--azul); color: #fff; }

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

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

.req dt { font-size: .9375rem; font-weight: 700; color: var(--azul); line-height: 1.4; }
.req dd { font-size: 1.0625rem; line-height: 1.55; color: var(--forte); }
.req dt + dd { margin-top: .3rem; }


/* ============================ OS CARDS ============================
   Benefícios, no campo azul da campanha. O cartão deixou de ser um
   retângulo branco chapado: agora é vidro sobre o azul — fundo de 7%
   de branco, fio de 16% e desfoque —, com o ícone num selo em gradiente
   e o texto em branco. É o mesmo esqueleto (.card / .card-icone /
   .card-texto) das outras LPs da casa, na cor da campanha.
   ==================================================================== */

.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.25rem;
  padding: 1.8rem 1.5rem 1.9rem;
  border-radius: var(--raio-2);
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .07);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  transition: transform .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease);
}

.card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, .13);
  border-color: rgba(255, 255, 255, .34);
}

/* o ícone num selo arredondado em gradiente — o "app icon" da Samsung */
.card-icone {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(150deg, var(--acao), var(--azul));
  box-shadow: 0 14px 26px -16px rgba(0, 0, 0, .7);
}

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

.card-texto {
  margin-top: auto;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: #fff;
}

/* o asterisco fica pendurado à esquerda da observação */
.chamada-nota {
  color: var(--acao);
  font-weight: 700;
  vertical-align: super;
  font-size: .72em;
  margin-left: .1rem;
}

.nota {
  margin: 2.5rem 0 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; }


/* ========================== A CHAMADA NO PÉ ==========================
   O Inscreva-se repetido no fim de duas seções (retorno 10/09: "pelo
   menos mais 2 botões"). Ficaram nos dois pontos em que a decisão de
   se inscrever amadurece — depois dos pré-requisitos e depois das
   áreas —, e não em toda seção: botão que aparece sempre para de ser
   chamada e vira mobília.

   Centralizado, porque as duas grades acima dele são centradas na
   mesma medida. Nas seções claras o botão é preto, que é o CTA
   primário do sistema da Samsung; o branco continua sendo o das
   seções azuis (cabeçalho e fechamento).
   ==================================================================== */

.chamada {
  max-width: var(--grade);
  margin: 3rem auto 0;
  display: flex;
  justify-content: center;
}

@media (min-width: 1024px) { .chamada { margin-top: 3.5rem; } }


/* ============================ AS ÁREAS ============================
   Cartões — a lista de fios saiu (retorno 09/09: "está muito simples").
   Dentro de cada um, a anatomia do card de benefícios: selo do ícone no
   alto, nome embaixo em corpo de display.

   São OITO áreas desde o retorno de 09/09/2026 do cliente, o que fecha
   a grade de quatro em duas linhas exatas. A faixa larga que existia
   para o escritório da América Latina saiu junto com ele.

   O gesto da lista antiga não se perdeu: o azul da campanha continua
   varrendo o item no hover, agora subindo pelo cartão, com o nome em
   branco e o selo em vidro.

   Nenhum cartão tem descrição. A lista dá os oito nomes e mais nada, e
   inventar linha de apoio para cada área não dá — mesma régua dos dois
   itens sem rótulo na ficha.
   ==================================================================== */

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

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

.area {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  padding: 1.6rem 1.7rem 1.75rem;
  background: #fff;
  border: 1px solid var(--fio);
  border-radius: var(--raio-2);
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}

/* a varredura de cor, agora subindo pelo cartão */
.area::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, var(--kv2), var(--kv));
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .45s var(--ease);
}

.area:hover {
  transform: translateY(-4px);
  border-color: var(--kv);
  box-shadow: 0 30px 52px -34px rgba(15, 37, 134, .55);
}

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

/* o selo do ícone — o mesmo de .req-icone, um grau maior */
.area-selo {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 16px;
  background: var(--gelo);
  color: var(--azul);
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  border: 1px solid transparent;
}

.area-selo svg {
  width: 27px; height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.area-nome {
  position: relative;
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--preto);
  transition: color .3s var(--ease);
}

.area:hover .area-selo {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .34);
  color: #fff;
}

.area:hover .area-nome { color: #fff; }

/* ============================ A TIMELINE ============================
   Etapas — o único momento de ousadia da página, e a única seção
   numerada (aqui a numeração é sequência de verdade).

   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, agora sobre o campo azul da campanha. O nó
   virou vidro e o trilho se desenha da esquerda para a direita quando
   a seção entra — movimento que é informação, não enfeite.

   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.5rem; }

.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: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .09);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  color: #fff;
}

.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: #fff;
  color: var(--kv);
  font-family: var(--display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .8);
}

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

/* 900 a 1023px: a timeline horizontal de sempre, sem palco e sem 3D */
@media (min-width: 900px) and (max-width: 1023.98px) {
  /* 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: rgba(255, 255, 255, .22);
    overflow: hidden;
  }

  .timeline-trilho::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--acao), #fff);
    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; }
  .passo-icone { width: 34px; height: 34px; }
  .passo-num { top: -8px; right: -4px; min-width: 32px; height: 26px; font-size: .76rem; }

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


/* ===================== O PALCO DAS ETAPAS (>=1024px) =====================
   A seção fica alta (o palco), o miolo gruda na tela e a rolagem dentro
   dela vira o roteiro: de um lado a timeline em coluna, com uma etapa
   acesa por vez; do outro, o aparelho girando. O trilho, aqui, é
   vertical, e o avanço vem do JS na variável --avanco.

   Abaixo de 1024px nada disso existe: .palco e .palco-fixo voltam a ser
   caixas comuns e a timeline é a de sempre.
   ======================================================================== */

.palco-3d { display: none; }

@media (min-width: 1024px) {

  /* três telas de rolagem para cinco etapas: cada uma ganha ~60% de
     tela, que é tempo de ler o nome sem a seção virar túnel.

     A altura e o grude dependem de .js — sem JS (ou com menos
     movimento) não haveria nada acontecendo nessas três telas, então
     a seção volta a ter altura natural e as duas colunas ficam
     paradas, lado a lado. */
  html.js .palco:not(.palco--parado) { height: 340vh; }

  html.js .palco:not(.palco--parado) .palco-fixo {
    position: sticky;
    top: calc(var(--topo-h) + 2rem);
    height: calc(100vh - var(--topo-h) - 4rem);
  }

  .palco-fixo {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: auto 1fr;
    column-gap: 3.5rem;
    align-content: center;
  }

  /* a cabeça: coluna da esquerda, primeira linha. Empilhada e um grau
     menor que a das outras seções — aqui ela divide a tela com a
     timeline e com o aparelho. */
  .cabeca--palco {
    grid-area: 1 / 1;
    max-width: none;
    margin: 0 0 2.25rem;
    grid-template-columns: none;
    gap: .6rem;
    align-self: end;
  }

  .cabeca--palco .titulo { font-size: clamp(1.875rem, 2.8vw, 2.75rem); }
  .cabeca--palco .lead { max-width: 34ch; }

  .timeline { grid-area: 2 / 1; max-width: none; margin: 0; align-self: start; }

  /* o aparelho ocupa a coluna da direita inteira, as duas linhas */
  .palco-3d { grid-area: 1 / 2 / -1 / -1; }

  /* o trilho vertical: do centro do primeiro nó ao do último */
  .timeline-trilho {
    display: block;
    position: absolute;
    left: 41px;
    top: 42px; bottom: 42px;
    width: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .2);
    overflow: hidden;
  }

  .timeline-trilho::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--acao), #fff);
    transform: scaleY(var(--avanco, 0));
    transform-origin: top;
    transition: transform .25s linear;
  }

  /* enquanto a lista não entrou, o trilho fica zerado — mesma regra do
     reveal, reescrita no eixo certo */
  html.js .timeline:has(.timeline-passos:not(.visto)) .timeline-trilho::after { transform: scaleY(0); }

  .timeline-passos { grid-template-columns: none; gap: clamp(.9rem, 1.6vh, 1.6rem); }

  .passo { flex-direction: row; text-align: left; gap: 1.5rem; }

  /* apaga as que não são a da vez — só com .js, que é quem acende de
     volta. Sem JS (ou com menos movimento) as cinco ficam legíveis. */
  html.js .passo {
    opacity: .42;
    transform: translateX(-6px);
    transition: opacity .45s var(--ease), transform .45s var(--ease);
  }

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

  .passo-nome {
    font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
    max-width: 24ch;
    transition: color .45s var(--ease);
  }

  /* a etapa da vez */
  html.js .passo--viva { opacity: 1; transform: none; }

  .passo--viva .passo-no {
    background: rgba(255, 255, 255, .2);
    border-color: rgba(255, 255, 255, .75);
    box-shadow: 0 0 0 6px rgba(33, 137, 255, .18), 0 24px 44px -26px rgba(0, 0, 0, .8);
  }

  /* as que já passaram não voltam ao apagado total: ficam a meio caminho */
  html.js .passo--feita { opacity: .7; }

  /* ------------------------- o aparelho ------------------------- */

  /* a linha da grade precisa ser DEFINIDA (1fr, não auto): com linha
     automática a altura natural da foto (800x1000) manda no tamanho e
     o <model-viewer>, que pede 100%, vaza para fora da tela. */
  .palco-3d {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    place-items: stretch;
    position: relative;
    height: 100%;
    min-height: 0;
  }

  /* o brilho que descola o aparelho do campo azul */
  .palco-3d::before {
    content: '';
    position: absolute;
    inset: 8% 2%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(33, 137, 255, .5), transparent);
    filter: blur(26px);
    pointer-events: none;
  }

  /* os dois na MESMA célula da grade, um por cima do outro */
  .palco-3d model-viewer,
  .palco-poster {
    grid-area: 1 / 1;
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .palco-3d model-viewer {
    --poster-color: transparent;
    background: transparent;
    opacity: 0;
    transition: opacity .6s var(--ease);
  }

  /* o 3D só aparece depois de pronto, e é aí que a foto sai */
  .palco-3d--pronto model-viewer { opacity: 1; }
  .palco-3d--pronto .palco-poster { opacity: 0; }

  .palco-poster { transition: opacity .6s var(--ease); }

  /* SEÇÃO PARADA — dois caminhos chegam aqui: sem .js (JS desligado ou
     menos movimento) e .palco--parado, que o JS põe quando o 3D não
     tem como entrar (file://, sem WebGL, arquivo que não chegou). Nos
     dois casos a foto manda na altura, com teto para não virar pôster
     de duas telas, e as cinco etapas ficam legíveis de uma vez. */
  html:not(.js) .palco-3d,
  .palco--parado .palco-3d { height: auto; }

  html:not(.js) .palco-poster,
  .palco--parado .palco-poster { height: auto; max-height: 62vh; }

  html.js .palco--parado .palco-fixo { position: static; height: auto; }

  html.js .palco--parado .passo { opacity: 1; transform: none; }

  /* o recado de file:// — o JS só cria este parágrafo quando a página
     foi aberta como arquivo, então ele não existe no site publicado */
  .palco-aviso {
    grid-area: 1 / 1;
    align-self: end;
    margin: 0;
    padding: .9rem 1rem;
    border-radius: var(--raio);
    border: 1px dashed rgba(255, 255, 255, .45);
    background: rgba(0, 0, 0, .25);
    font-size: .8125rem;
    line-height: 1.5;
    color: #fff;
    text-align: center;
  }
}

/* Tela larga mas BAIXA (notebook de 13", janela pela metade): o palco
   inteiro encolhe um grau para as cinco etapas e a cabeça caberem sem
   estourar a altura grudada. */
@media (min-width: 1024px) and (max-height: 780px) {
  html.js .palco:not(.palco--parado) .palco-fixo {
    top: calc(var(--topo-h) + 1rem);
    height: calc(100vh - var(--topo-h) - 2rem);
  }

  .cabeca--palco { margin-bottom: 1.25rem; padding-top: 1.1rem; }
  .cabeca--palco .titulo { font-size: 1.75rem; }

  .timeline-passos { gap: .7rem; }
  .passo-no { width: 64px; height: 64px; }
  .passo-icone { width: 26px; height: 26px; }
  .passo-num { top: -9px; right: -8px; min-width: 28px; height: 24px; font-size: .72rem; }
  .passo-nome { font-size: 1rem; }
  .timeline-trilho { left: 31px; top: 32px; bottom: 32px; }
}


/* ============================ OS NÚMEROS ============================
   Os dois únicos números que o texto da empresa oferece, em painel
   gelo. Nenhum dos dois conta ao entrar: 1969 é data e "Top 10" é
   posição — contar de zero até eles leria como defeito, não como
   movimento. PENDÊNCIA 09: big numbers não vieram.
   ==================================================================== */

.numeros { max-width: var(--grade); margin: 3rem auto 0; 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: .6rem;
  border-radius: var(--raio-2);
  padding: 2rem 1.75rem 2.1rem;
  background: var(--gelo);
}

.numero dd {
  font-family: var(--display);
  font-size: clamp(2.75rem, 6vw, 4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--kv);
  font-variant-numeric: tabular-nums;
}

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


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

.fechamento {
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(33, 137, 255, .4), transparent 55%),
    linear-gradient(160deg, var(--kv), var(--kv2));
  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;
}

/* ============================= O RODAPÉ =============================
   Padrão da casa, medido na LP da Camil: tudo centralizado numa coluna
   estreita — marcas, fio divisor curto, linha de contato, redes em
   ícone e o copyright fechando sobre um fio.

   As redes viraram selos de 40px: quadrado arredondado com 10% de
   branco, que acende no azul de ação no hover. Glifo de marca é sólido
   (fill), globo e câmera são de traço (stroke) — a mesma mistura que a
   Camil faz, porque marca é forma cheia e ícone de sistema é linha.
   ==================================================================== */

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

.rodape-miolo {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 1.75rem;
}

/* as duas marcas, com um "+" discreto no meio */
.rodape-marcas { display: flex; align-items: center; gap: 1.75rem; }

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

.rodape-mais {
  width: 1px; height: 1.5rem;
  background: var(--fio-claro);
}

/* o fio curto do divisor — o mesmo gesto da Camil */
.rodape-fio {
  width: 64px; height: 1px;
  background: rgba(255, 255, 255, .22);
}

.rodape-suporte {
  max-width: 46ch;
  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; }

/* ---- as redes, em selo ---- */
.rodape-redes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .625rem;
}

.rede {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}

.rede:hover { background: var(--acao); transform: translateY(-2px); }

.rede svg { width: 20px; height: 20px; }

/* glifo de marca: forma cheia */
.rede--cheia svg { fill: currentColor; stroke: none; }

/* ícone de sistema: traço */
.rede--linha svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- o pé ---- */
.rodape-pe {
  width: 100%;
  max-width: var(--grade);
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.rodape-copy { 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); }


/* ========================= AS ANIMAÇÕES ==========================
   Só uma: a fita do ticker. O bloco de prefers-reduced-motion abaixo
   zera a duração dela e a de qualquer transição.
   ================================================================== */

@keyframes fita { to { transform: translateX(-50%); } }

@keyframes heroEntra {
  from { opacity: 0; transform: scale(1.045); }
  to   { opacity: 1; transform: scale(1); }
}

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