/* =============================================================
   LUCAS PONTES · LINKS OFICIAIS
   styles.css · layout e componentes

   REGRA DO ARQUIVO: nenhuma cor escrita à mão. Tudo sai de
   var(--*) do tokens.css. A única exceção é o preto puro dentro
   de sombras, que é transparência e não cor de marca.

   IDENTIDADE: a da PRIMEIRA VERSÃO DO TEMPLATE DE PARCEIROS
   (`3-precificacao/site-padrao-afiliado`), que aplica o
   `DS-ltq-sites` literalmente — tema claro, papel branco,
   petróleo e menta como acentos. Ver o cabeçalho do tokens.css.

   O ritmo de superfícies desta página, de cima para baixo:

     hero ....... #EDFCF4 lavado menta, dissolvendo em branco
     destinos ... #FFFFFF papel
     rodapé ..... #F6F9F7 chão claro, com fio #E4EAE7 no topo

   A estrutura veio da referência bio.gesieudo.com — hero →
   cards-banner → rodapé — mas já se afastou dela em quatro
   pontos, todos por decisão e todos comentados onde acontecem:

     · o hero não tem foto de fundo nem altura fixa (21/09);
     · a identidade é avatar + nome + @ numa linha, e subiu do
       rodapé para o hero (21/09);
     · não há barra de privacidade (21/09);
     · a página é CLARA, não escura (21/09).
   ============================================================= */

/* ---------- RESET CURTO ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--page-text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

h1,
h2,
p {
  margin: 0;
}

/* ---------- FOCO E SKIP LINK ---------- */

/* O anel é o verde ESCURO, não a menta: sobre papel branco a
   menta quase não aparece, e um anel de foco que não se vê é o
   mesmo que não ter anel. */
:focus-visible {
  outline: var(--focus-outline-width) solid var(--page-accent-ink);
  outline-offset: var(--focus-outline-offset);
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: var(--space-md);
  top: var(--space-md);
  z-index: 100;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-pill);

  /* Petróleo com texto branco (14,9:1). O CTA da marca é branco
     sobre menta, mas isto não é CTA: é um atalho de teclado, e
     um atalho ilegível não serve a quem depende dele. */
  background: var(--color-brand-dark);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-bold);
  text-decoration: none;

  /* Fora da tela até receber foco pelo teclado. */
  transform: translateY(-200%);
  transition: transform var(--duration-fast) var(--ease-out);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* =============================================================
   1 · HERO
   ============================================================= */

/* O lavado menta do template, dissolvendo em papel branco no pé.
   A emenda é um degradê e não uma linha: no template a dobra
   também termina sem corte, e uma borda dura aqui denunciaria
   duas faixas coladas.

   SEM `min-height`: enquanto havia foto o hero tinha 620px fixos
   para a imagem ter onde existir. Sem ela, altura fixa só
   produziria vazio acima do nome. */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(
    to bottom,
    var(--page-wash) 0%,
    var(--page-wash) 58%,
    var(--page-bg) 100%
  );

  /* `safe-area` para o notch: o viewport é `cover`. */
  padding: var(--space-4xl) var(--gutter) var(--space-2xl);
  padding-top: max(var(--space-4xl), env(safe-area-inset-top) + var(--space-3xl));
  text-align: center;
}

.hero__conteudo {
  width: var(--col);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

/* ---------- Identidade: avatar + nome + @ ----------
   Este bloco nasceu no rodapé e subiu para o hero em 21/09/2026,
   no lugar do H1 solto de 64px. Ficou como componente próprio
   (`.identidade`, não `.hero__algo`) porque já viveu nos dois
   lugares e pode voltar a viver.

   Ele é uma linha horizontal, não uma pilha: com o avatar ao
   lado do nome, a dobra fecha em ~64px de altura em vez dos
   ~160px que o título grande ocupava — e num link na bio, cada
   pixel antes do primeiro card empurra a conversão para baixo. */
.identidade {
  display: flex;
  align-items: center;
  gap: var(--space-md);

  /* O bloco é centrado no hero, mas o texto DENTRO dele alinha à
     esquerda: nome e @ empilhados e centralizados brigariam com
     o avatar, que é uma âncora à esquerda. */
  text-align: left;
}

.identidade__avatar {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  object-fit: cover;

  /* O anel de menta é o único uso do acento na dobra. Ele é
     decoração, não texto, então a menta pode ser ela mesma aqui
     — sobre o lavado ela lê como um realce, não como um rótulo
     que alguém precise conseguir ler. */
  outline: 2px solid var(--page-accent);
  outline-offset: 3px;
}

.identidade__nome {
  /* Não é o `--font-size-h1`: ao lado de um avatar de 64px, um
     título de 64px vira um bloco desengonçado. O h3 do DS é a
     escala que emparelha com a altura do avatar. */
  font-size: var(--font-size-h3);
  line-height: 1.15;
  letter-spacing: var(--letter-spacing-h3);
  font-weight: 800;
}

.identidade__arroba {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--page-text-soft);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.identidade__arroba:hover {
  color: var(--page-accent-ink);
}

/* O cargo é o "eyebrow" do template: 12px, caixa alta, +.14em,
   no verde ESCURO. A menta aqui daria 1,9:1 sobre o lavado e
   viraria decoração ilegível. */
.hero__apoio {
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  font-weight: var(--font-weight-bold);
  color: var(--page-accent-ink);
}

/* ---------- Ícones sociais ---------- */

.redes {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-2xs);
}

.redes__item {
  width: var(--tap-target);
  height: var(--tap-target);
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--page-line);
  background: var(--page-bg);
  color: var(--color-brand-dark);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.redes__item svg {
  width: 22px;
  height: 22px;
}

.redes__item:hover {
  border-color: var(--page-accent);
  color: var(--page-accent-ink);
  transform: translateY(-2px);
}

/* ---------- Botão "Nosso site" ---------- */

/* Menta chapada com rótulo branco. Este é o CTA da família: a
   mesma construção está no `site-padrao-afiliado` e em outros
   quatro repos da LTQ.

   ⚠ Ele REPROVA contraste (branco sobre #0ACE97 ≈ 1,9:1). Isso
   é sabido: a decisão foi tomada em 11/09/2026 com o número na
   mesa e reafirmada depois. Está aqui por coerência com as
   páginas irmãs, NÃO por descuido — não reabra sozinho. */
.botao-site {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--tap-target);
  padding: 0 var(--space-lg);
  border-radius: var(--radius-pill);
  background: var(--page-accent);
  color: var(--color-text-inverse);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: var(--shadow-accent-sm);
  transition:
    background var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.botao-site:hover {
  background: var(--page-success);
  transform: translateY(-1px);
}

/* A dica "Role para explorar" (`.hero__rolar`) e a animação
   `respirar` saíram em 06/10/2026 junto com o HTML dela. Com a
   dobra do tamanho da identidade, o primeiro card já aparece sem
   rolar — a dica mandava fazer o que já estava feito.

   Com ela foi embora a única animação em laço da página. O que
   restou de movimento é a revelação ao rolar, que acontece uma
   vez por bloco. */

/* =============================================================
   2 · OS TRÊS DESTINOS
   ============================================================= */

.miolo {
  display: flex;
  justify-content: center;
  padding: var(--section-padding-block) var(--gutter);
}

.destinos {
  width: var(--col);
}

/* Título ladeado por dois fios, como na referência. O grid de
   três colunas faz os fios ocuparem a sobra dos dois lados sem
   nenhum cálculo de largura. */
.destinos__cabecalho {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
  margin-bottom: var(--space-xl);
}

.destinos__fio {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--page-line));
}

.destinos__fio:last-child {
  background: linear-gradient(to left, transparent, var(--page-line));
}

.destinos__rotulo {
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  font-weight: var(--font-weight-bold);
  color: var(--page-accent-ink);
  margin-bottom: var(--space-2xs);
}

.destinos h2 {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  letter-spacing: var(--letter-spacing-h3);
  font-weight: 800;
}

.destinos__lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* ---------- O card-banner ---------- */

/* Cartão de papel sobre papel: o que o separa do fundo é o fio
   e a sombra do DS, não uma cor diferente. As três artes são
   verde-escuras, então o contraste forte da página acontece
   DENTRO do cartão — é por isso que esta página não precisa de
   nenhuma faixa escura em volta. */
.card {
  border-radius: var(--radius-lg);

  /* A arte vai até a borda: o overflow é o que arredonda a
     imagem junto com o cartão. */
  overflow: hidden;
  border: 1px solid var(--page-line);
  background: var(--page-bg);
  box-shadow: var(--shadow-card);
}

.card__link {
  position: relative;
  display: block;

  /* Trava a altura pela proporção da arte ANTES de a imagem
     carregar. Sem isto a página pula três vezes ao carregar. */
  aspect-ratio: var(--card-ratio);
  text-decoration: none;
  color: inherit;
}

.card__arte {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A seta é o único elemento de UI sobre a arte. Disco de papel
   com a seta em petróleo: a arte é escura, então o disco claro
   é o que garante leitura seja qual for o banner. */
.card__seta {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--page-bg);
  color: var(--color-brand-dark);
  font-size: var(--font-size-sm);
  transition: transform var(--duration-fast) var(--ease-out);
}

/* Só o card que É link reage ao mouse. O `:not(.card--em-breve)`
   é o que impede o cartão pendente de parecer clicável. */
.card:not(.card--em-breve):hover {
  border-color: var(--page-accent);
  transform: translateY(-3px);
}

.card:not(.card--em-breve):hover .card__seta {
  transform: translate(2px, -2px);
}

.card:not(.card--em-breve) {
  transition:
    transform var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}

/* ---------- O card pendente ----------
   Destino ainda não existe. Ele aparece, porque faz parte da
   promessa da página, mas não finge ser clicável: sem cursor de
   link, sem o `:hover` do cartão vivo, e um selo que diz o
   porquê. Quando o destino existir, basta trocar a <div> por um
   <a href> e tirar a classe — o CSS todo volta sozinho.

   NO TEMA CLARO O APAGAMENTO MUDOU DE DIREÇÃO. No escuro a arte
   era escurecida (`brightness`); aqui ela é dessaturada e fica
   TRANSPARENTE, deixando o papel branco do cartão atravessar.
   Apagar para o claro é o que lê como "ainda não" numa página
   clara — escurecer, aqui, leria como ênfase. */
.card--em-breve .card__arte {
  filter: saturate(0.65);
  opacity: 0.62;
}

.card__selo {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  padding: 6px var(--space-sm);
  border-radius: var(--radius-pill);
  background: var(--page-bg);
  border: 1px solid var(--page-line);
  color: var(--page-text-soft);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}

/* =============================================================
   3 · RODAPÉ
   ============================================================= */

/* O chão claro do template, separado do papel por um fio. É a
   única faixa tingida da página. */
.rodape {
  display: flex;
  justify-content: center;
  padding: var(--section-padding-block) var(--gutter) var(--space-3xl);
  border-top: 1px solid var(--page-line);
  background: var(--page-floor);
}

.rodape__interno {
  width: var(--col);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  text-align: center;
}

.rodape__redes {
  display: flex;
  gap: var(--space-xs);
}

.rodape__redes a {
  width: var(--tap-target);
  height: var(--tap-target);
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--page-line);
  background: var(--page-bg);
  color: var(--page-text-soft);
  transition:
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.rodape__redes svg {
  width: 18px;
  height: 18px;
}

.rodape__redes a:hover {
  color: var(--page-accent-ink);
  border-color: var(--page-accent);
}

.rodape__copy {
  font-size: var(--font-size-xs);
  color: var(--page-text-soft);
}

/* =============================================================
   A BARRA DE PRIVACIDADE (LGPD) saiu em 21/09/2026, a pedido,
   e o CSS dela saiu junto — numa página sem build, regra morta
   viaja para todo visitante. Está no histórico do git.
   ============================================================= */

/* =============================================================
   4 · REVELAÇÃO AO ROLAR
   ============================================================= */

/* Só liga quando o JS confirmou que está vivo. Sem `.js` no
   <html>, nada aqui se aplica e a página nasce visível. */
.js .hero__conteudo,
.js .destinos__cabecalho,
.js .card,
.js .rodape__interno {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}

/* O escalonamento dos cards: 0ms, 90ms, 180ms, como na
   referência. O --i vem do style inline de cada <article>. */
.js .card {
  transition-delay: calc(var(--i, 0) * var(--card-stagger));
}

.js .visivel,
.js.revelar-tudo .hero__conteudo,
.js.revelar-tudo .destinos__cabecalho,
.js.revelar-tudo .card,
.js.revelar-tudo .rodape__interno {
  opacity: 1;
  transform: none;
}

/* =============================================================
   5 · TELAS ESTREITAS
   ============================================================= */

/* Único media query de layout. Não existe breakpoint que abra a
   página em grade: isto é um link na bio, e no desktop ela
   continua com cara de celular, centrada. */
@media (max-width: 360px) {
  .hero {
    padding-inline: var(--space-md);
  }

  .destinos__cabecalho {
    /* Nos 320px os dois fios roubam largura demais do título. */
    grid-template-columns: 1fr;
  }

  .destinos__fio {
    display: none;
  }
}

/* =============================================================
   6 · MOVIMENTO REDUZIDO
   ============================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Zerar a transição não bastaria: quem entra com movimento
     reduzido veria os blocos parados em opacity 0 até o
     observer disparar. Aqui eles já nascem visíveis. */
  .js .hero__conteudo,
  .js .destinos__cabecalho,
  .js .card,
  .js .rodape__interno {
    opacity: 1;
    transform: none;
  }
}