/* ══ /links, o hub de links ═══════════════════════════════════════════════════
   Substitui o linktr.ee/evotalks. Prefixo .lk- em tudo, e NENHUMA variável nova
   de marca: cor, tipografia, radius e sombra vêm do :root do site.css.

   O desenho é uma coluna única de 390px. No desktop a mesma coluna só fica
   centralizada, sem virar outro layout: quem abre isso no desktop veio de um
   link de celular, e mudar a página no meio confunde.

   Sobre sombra: card em repouso não leva sombra (é a regra do projeto, sombra
   só em quem sobe). O que existe aqui é a sombra do .btn-primary, que já vem do
   site.css, e a do bloco principal, que levanta no hover.

   Só transform e opacity são animados. Nada de animar height, top ou box-shadow
   em loop: isso força layout/paint a cada frame e derruba os 60fps no celular. */

:root {
  --lk-w: 390px;          /* a largura de projeto; no desktop é o teto da coluna */
  --lk-pad: 20px;
  --lk-gap: 12px;         /* entre cartões do mesmo grupo */
  --lk-gap-bloco: 26px;   /* entre blocos */
  --lk-curva: cubic-bezier(.16, 1, .3, 1);   /* a mesma do .reveal do site.css */

  /* O quadradinho de ícone: um tamanho e um raio pra TODOS (ícone de card,
     botão de IA, tile de rede social).

     O raio não é escolhido a gosto: 16.6px é a curva da própria marca no
     tamanho do tile. Os SVGs de arte (assets/logo-icone.svg e
     assets/canais/whatsapp.svg) são 840x840 com rx=268.085, ou seja 31,9% do
     lado; 52px x 0,319 = 16,6px. Com isso a arte encaixa exatamente no recorte
     do tile, em vez de o desenho ficar mais redondo que o quadrado que o
     contém, que era a diferença que aparecia na tela. */
  --lk-tile: 52px;
  --lk-tile-r: 16.6px;
}

/* ── Página ─────────────────────────────────────────────────────────────────── */

.lk-body {
  background: var(--evo-off-white);
  /* O halo é estático (sem gradiente animado, sem loop): custo zero por frame. */
  background-image: radial-gradient(700px 420px at 50% -10%, rgba(27, 191, 93, 0.10), transparent 62%);
  background-repeat: no-repeat;
  min-height: 100vh;
}

.lk-wrap {
  max-width: var(--lk-w);
  margin: 0 auto;
  /* Respiro grande no topo: a marca é a primeira coisa da página e precisa de
     ar em volta pra parecer assinatura, e não cabeçalho apertado. */
  padding: 58px var(--lk-pad) 44px;
}

/* ── Cabeçalho de identidade ────────────────────────────────────────────────── */

.lk-id { text-align: center; }

/* A marca completa, grande. 260px numa coluna de 350px de conteúdo: sobra
   respiro dos dois lados e o nome ainda lê de longe. O height vem do
   aspect-ratio do arquivo (1417x361), então não distorce em nenhuma largura. */
.lk-id-logo {
  width: 260px;
  max-width: 76%;
  margin: 4px auto 14px;
}
.lk-id-logo img { width: 100%; height: auto; display: block; }

.lk-id-pos {
  font-size: 15px;
  color: var(--evo-text-soft);
  margin: 0 0 18px;
}

/* O selo tem que LER. A primeira versão saiu com a imagem em 16px de altura, e
   num logo de proporção 800x131 isso vira uma linha cinza ilegível no celular.
   Aqui a pílula é dimensionada pela largura útil da coluna: a imagem ocupa até
   210px, o que dá ~34px de altura, e a pílula fica com 56px, bem acima do
   mínimo de 44px de alvo de toque. */
.lk-selo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 22px;
  border-radius: var(--r-pill);
  background: var(--evo-white);
  border: 1px solid var(--evo-border);
}
.lk-selo img {
  width: 210px;
  max-width: 100%;
  height: auto;
  display: block;
}

/* ── Redes sociais ──────────────────────────────────────────────────────────── */

/* No pé da página, e não no topo. Os ícones de marca do iconixto são badges
   CHEIOS (o desenho é o quadradinho inteiro, não só o glifo), então pintados
   com a cor de texto viravam blocos quase pretos, o item mais escuro da tela.
   Em --evo-text-mute eles recuam pro peso que devem ter aqui, que é de rodapé,
   e ganham o verde da marca no toque.

   O bloco todo é centralizado, título incluído: com o título encostado na
   esquerda e os ícones no meio, as duas coisas pareciam de blocos diferentes. */
.lk-bloco--redes { text-align: center; }
.lk-bloco--redes .lk-titulo { padding-left: 0; }

.lk-redes {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.lk-rede {
  width: var(--lk-tile);
  height: var(--lk-tile);
  border-radius: var(--lk-tile-r);
  background: var(--evo-white);
  border: 1px solid var(--evo-border);
  display: grid;
  place-items: center;
  color: var(--evo-text-mute);
  transition: transform .28s var(--lk-curva), color .2s ease, border-color .2s ease;
}
.lk-rede .ico { font-size: 22px; }
.lk-rede:hover { color: var(--evo-green); border-color: var(--evo-green-soft); transform: translateY(-3px); }

/* ── Rótulo e título de bloco ───────────────────────────────────────────────── */

/* Ritmo vertical: UM espaçamento entre tudo que está empilhado. Antes o espaço
   dependia de o card ser vizinho no mesmo bloco (--lk-gap) ou o primeiro de um
   bloco novo (--lk-gap-bloco), e na tela isso aparecia como distância quebrada:
   26px entre o agendamento e o WhatsApp, 12px entre o Trabalhe e o Site. Com os
   títulos fora não sobrou nada que justificasse a diferença.

   Respiro maior fica em dois lugares só, e nos dois há texto pra separar: logo
   depois do cabeçalho, e antes de um bloco que tem texto acima do card. */
.lk-bloco {
  margin-top: var(--lk-gap);
  /* gap no lugar de margem peça por peça: com margin-top/-bottom espalhado em
     .lk-card, .lk-post, .lk-video, .lk-todos e .lk-titulo, o espaçamento
     dependia de qual combinação de vizinhos caía em cada bloco, e era daí que
     vinha a distância desigual. Aqui existe UM número. */
  display: flex;
  flex-direction: column;
  gap: var(--lk-gap);
}
.lk-id + .lk-bloco { margin-top: 32px; }
.lk-bloco--comtitulo { margin-top: 30px; }

/* Sem rótulo em caixa alta. O título é o único texto do bloco, em caixa
   normal e no tamanho de leitura: quem tem que puxar o olho é o card. */
.lk-titulo {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--evo-text);
  margin: 0;
  padding-left: 2px;
}

/* ── Cartão tocável, a peça base ────────────────────────────────────────────── */

.lk-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 20px 18px;
  border-radius: var(--r-xl);
  background: var(--evo-white);
  border: 1px solid var(--evo-border);
  color: var(--evo-text);
  text-align: left;
  transition: transform .3s var(--lk-curva), border-color .2s ease;
}
.lk-card:hover { border-color: #d7dce6; }

.lk-card-ic {
  flex: 0 0 auto;
  width: var(--lk-tile);
  height: var(--lk-tile);
  border-radius: var(--lk-tile-r);
  background: var(--evo-off-white);
  display: grid;
  place-items: center;
  color: var(--evo-text);
}
.lk-card-ic .ico { font-size: 23px; }

/* Quando o quadrado É a arte (o símbolo da Evo, o bloquinho do WhatsApp), o
   fundo do tile sai: manter deixaria um quadrado cinza atrás do quadrado
   colorido.

   O overflow recorta a arte no raio padrão do card, e isso não é detalhe: os
   dois arquivos são 840x840 com rx=268, o que a 52px dá 16,6px de canto, contra
   os 12px de --r-md dos outros quadradinhos. Sem o recorte, esses dois ficavam
   visivelmente mais redondos que os vizinhos. */
.lk-card-ic--marca {
  background: none;
  border-radius: var(--lk-tile-r);
  overflow: hidden;
}
.lk-card-ic--marca img { width: 100%; height: 100%; display: block; }

.lk-card-txt { min-width: 0; flex: 1 1 auto; }
.lk-card-t {
  display: block;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.lk-card-s {
  display: block;
  font-size: 13.5px;
  color: var(--evo-text-soft);
  margin-top: 1px;
}

/* A seta anda 3px no hover. É transform, não margin: não reflui a linha. */
.lk-card-seta {
  flex: 0 0 auto;
  color: var(--evo-text-mute);
  font-size: 16px;
  transition: transform .3s var(--lk-curva), color .2s ease;
}
.lk-card:hover .lk-card-seta { transform: translateX(3px); color: var(--evo-text-soft); }

/* ── Bloco principal, o único em Verde Evo ──────────────────────────────────── */

.lk-primario {
  background: var(--evo-green);
  border-color: var(--evo-green);
  color: #fff;
  padding: 24px 20px;
  /* overflow é o que recorta o brilho do .btn-shine dentro do cartão. No .btn
     do site isso já vem de graça; aqui o cartão não tinha. */
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(27, 191, 93, 0.24);   /* leva sombra porque levanta no hover */
  transition: transform .3s var(--lk-curva), box-shadow .3s ease;
}
.lk-primario:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(27, 191, 93, 0.30); }
.lk-primario .lk-card-ic { background: rgba(255, 255, 255, 0.18); color: #fff; }
.lk-primario .lk-card-s { color: rgba(255, 255, 255, 0.82); }
.lk-primario .lk-card-seta { color: rgba(255, 255, 255, 0.75); }
.lk-primario:hover .lk-card-seta { color: #fff; }

/* O WhatsApp não precisa mais de fundo pintado aqui: quem carrega a cor do
   canal agora é a própria arte de assets/canais/whatsapp.svg. */

/* ── Blog: destaque com capa, e a lista compacta abaixo ─────────────────────
   O destaque é o mesmo cartão da página, com a capa por cima em vez do ícone
   ao lado. Proporção 1080x524 é a da capa dos artigos no blog: usar a mesma
   evita corte. Os três seguintes reusam o .lk-card inteiro, só trocando o
   quadrado do ícone por uma miniatura. */

.lk-post {
  display: block;
  border-radius: var(--r-xl);
  background: var(--evo-white);
  border: 1px solid var(--evo-border);
  overflow: hidden;
  color: var(--evo-text);
  transition: transform .3s var(--lk-curva), border-color .2s ease;
}
.lk-post:hover { border-color: #d7dce6; }

.lk-post-capa {
  display: block;
  aspect-ratio: 1080 / 524;
  background: var(--evo-off-white);
  overflow: hidden;
}
/* A capa cresce 3% no hover. Fica no filho, e não no cartão, senão o cartão
   inteiro cresceria e empurraria o vizinho. */
.lk-post-capa img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .5s var(--lk-curva);
}
.lk-post:hover .lk-post-capa img { transform: scale(1.03); }

.lk-post-txt { display: block; padding: 14px 16px 16px; }
.lk-post-t {
  display: block;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.32;
}
.lk-post-meta {
  display: block;
  font-size: 12.5px;
  color: var(--evo-text-mute);
  margin-top: 6px;
}
.lk-ponto { margin: 0 6px; }

.lk-todos {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 4px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--evo-text-soft);
  transition: transform .25s var(--lk-curva), color .2s ease;
}
.lk-todos .ico { font-size: 14px; transition: transform .3s var(--lk-curva); }
.lk-todos:hover { color: var(--evo-green-deep); }
.lk-todos:hover .ico { transform: translateX(3px); }

/* ── Pergunte a uma IA ──────────────────────────────────────────────────────
   Mesmo desenho do .footer-ai do rodapé (tile na cor da marca + logo branca
   por máscara), num card da página e com o tamanho dos botões alinhado ao
   quadrado de 52px que os outros cards usam. As cores vêm por --ai e a arte por
   --logo, os dois vindos do config: acrescentar uma IA é acrescentar uma linha
   lá, sem tocar aqui. */

/* Coluna: o texto do convite mora DENTRO do card, e os botões vêm embaixo. */
.lk-card--ia {
  display: block;
  text-align: center;
  padding: 18px;
}
/* Mesmo tamanho E mesmo peso do texto das redes, logo abaixo: os dois são
   frases de convite e têm que ler como o mesmo tipo de coisa. */
.lk-ia-texto {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--evo-text-soft);
  margin: 0 0 14px;
}

.lk-ia-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.lk-ia-btn {
  width: var(--lk-tile);
  height: var(--lk-tile);
  border-radius: var(--lk-tile-r);
  background: var(--ai);
  display: grid;
  place-items: center;
  transition: transform .28s var(--lk-curva), box-shadow .25s ease;
}
.lk-ia-ic {
  width: 27px;
  height: 27px;
  background: #fff;
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}
/* Sobe no hover, então pode levar sombra. */
.lk-ia-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(30, 32, 38, 0.18); }

/* O texto das redes é uma frase de convite, não um rótulo de seção: mesmo
   tamanho e mesmo peso do texto que está dentro do card de IA, pra os dois
   lerem como o mesmo tipo de coisa. */
.lk-bloco--redes .lk-titulo {
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--evo-text-soft);
}

/* ── Vídeo, fachada com capa e play ─────────────────────────────────────────── */

.lk-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--evo-border);
  background: var(--evo-dark);
  display: block;
}
.lk-video img,
.lk-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
}
.lk-video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.94);
  color: var(--evo-dark);
  display: grid;
  place-items: center;
  transition: transform .3s var(--lk-curva);
}
.lk-video-play .ico { font-size: 24px; margin-left: 2px; }
.lk-video:hover .lk-video-play { transform: scale(1.07); }

/* ── Rodapé ─────────────────────────────────────────────────────────────────── */

.lk-rodape {
  margin-top: 34px;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--evo-text-mute);
}
.lk-rodape a { color: var(--evo-text-soft); }

/* ══ Motion ═══════════════════════════════════════════════════════════════════
   Três camadas, e nenhuma delas anima nada além de transform e opacity:
     1. entrada em cascata do que já está na tela (--lk-i é o índice do bloco)
     2. reveal ao rolar, reusando .reveal/.in do site.css e do site.js
     3. press feedback, que responde ao toque em 90ms
   O corpo começa com .lk-anima; se o JS não rodar, nada fica invisível.      */

@keyframes lkEntra {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

.lk-anima .lk-sobe {
  opacity: 0;
  animation: lkEntra .62s var(--lk-curva) both;
  animation-delay: calc(var(--lk-i, 0) * 55ms);
}

/* ── A marca surgindo ────────────────────────────────────────────────────────
   O nome está desenhado dentro do SVG, então não dá pra animar símbolo e nome
   como dois elementos. A varredura de clip-path resolve: a máscara abre da
   esquerda pra direita, o símbolo aparece primeiro e o nome vai surgindo atrás
   dele. É a mesma técnica do preenchimento do /agendar, e é clip-path e não
   scaleX de propósito: scaleX esticaria o desenho.

   Depois da marca vêm a frase e o selo, em degrau. O cabeçalho inteiro está
   dentro de um .lk-sobe, e é ele que faz o conjunto subir; estes três só
   cuidam da ordem em que aparecem. */
@keyframes lkVarre {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* Tempos do cabeçalho, e eles são a referência do ESPERA_CABECALHO do
   assets/js/links.js: marca 80+500=580ms, frase 240+420=660ms, selo
   340+420=760ms. Mexeu aqui, mexe lá.

   A conta foi encurtada porque o primeiro card entrava em 1000ms e a página
   parecia travada nesse intervalo. Agora o card do agendamento entra em 560ms,
   ou seja um instante ANTES de o selo terminar: as duas coisas se sobrepõem de
   leve e o movimento lê como um só, em vez de cabeçalho, pausa, cards. */
.lk-anima .lk-id-logo img { animation: lkVarre .5s cubic-bezier(.22, 1, .28, 1) .08s both; }
.lk-anima .lk-id-pos      { animation: lkEntra .42s var(--lk-curva) .24s both; }
.lk-anima .lk-selo        { animation: lkEntra .42s var(--lk-curva) .34s both; }

/* ── O chamariz do cartão principal ─────────────────────────────────────────
   Dois movimentos, e nenhum dos dois é invenção nova:

     - o brilho que atravessa é o .btn-shine do site.css (a classe está no HTML,
       com o ::before e o @keyframes btnShine já escritos lá). Aqui só se alarga
       o intervalo: 3,6s numa página inteira de cartões viraria pisca-pisca.
     - a balançada reusa o @keyframes evoWlBalanco, o mesmo do botão flutuante
       do WhatsApp, com ângulos menores e uma pausa longa entre uma e outra.

   Os dois ciclos têm a MESMA duração de propósito, e as fases não se cruzam: o
   brilho passa entre 62% e 86% do ciclo, a balançada acontece de 88% a 98%.
   Primeiro o brilho, depois o tremidinho, e sete segundos de sossego.

   A balançada vai no ÍCONE, e não no cartão. No cartão ela anularia o levantar
   do hover e o afundar do toque, que também são transform: animação infinita
   ganha de transição, então o cartão ficaria imóvel nos dois. */
.lk-primario.btn-shine::before { animation-duration: 7s; }

@keyframes lkChama {
  0%, 88%, 100% { transform: rotate(0deg); }
  90%           { transform: rotate(-7deg); }
  93%           { transform: rotate(5deg); }
  96%           { transform: rotate(-3deg); }
  98%           { transform: rotate(1.5deg); }
}
.lk-chama {
  animation: lkChama 7s ease-in-out infinite;
  transform-origin: 50% 60%;
}

/* O título surge um instante antes dos cards, pra ler como "chega o título,
   chegam os cards". Nos blocos de baixo o gatilho é o .in que o site.js põe na
   entrada em tela, e não um atraso contado do load: com atraso fixo o título
   animaria fora da tela e a pessoa chegaria nele já parado. */
/* O título entra pelo próprio .reveal, junto da pilha de cards, então não
   precisa mais de regra separada aqui. */

/* ── A fila de aparição ─────────────────────────────────────────────────────
   Cada card entra de baixo pra cima, um depois do outro. O atraso de cada um
   (--lk-atraso) é escrito pelo assets/js/links.js no instante em que o card
   entra na tela, porque atraso fixo no HTML deixaria um card no fim da página
   esperando a fila inteira depois de já estar visível.

   A regra de esconder mora em .js-pilha, e não direto no .lk-pilha, de
   propósito: a classe é posta por um script síncrono no <head>, então sem JS
   ela nunca entra e a página aparece completa em vez de ficar em branco. */
.js-pilha .lk-pilha { opacity: 0; }
.js-pilha .lk-pilha.is-in {
  animation: lkEntra .58s var(--lk-curva) both;
  animation-delay: var(--lk-atraso, 0ms);
}

/* Press feedback: vale pro dedo (:active) e pro teclado (:focus-visible).
   90ms na ida pra parecer instantâneo, 260ms na volta pra não parecer seco. */
.lk-tap { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.lk-tap:active { transform: scale(.972); transition-duration: .09s; }
.lk-primario.lk-tap:active { transform: scale(.978); }
.lk-rede.lk-tap:active { transform: scale(.9); }
.lk-tap:focus-visible { outline: 2px solid var(--evo-green); outline-offset: 3px; }

/* Micro loop dos ícones principais: flutuação de 2px, 4,2s, sem escala e sem
   brilho. É deliberadamente quase imperceptível, e não é anel pulsando, que
   este projeto não usa. */
@keyframes lkFlutua {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -2px, 0); }
}
.lk-loop { animation: lkFlutua 4.2s ease-in-out infinite; }
.lk-loop--atraso { animation-delay: 1.4s; }

/* ── Desktop: a MESMA coluna, só centralizada ───────────────────────────────── */

@media (min-width: 760px) {
  .lk-wrap { padding-top: 54px; padding-bottom: 60px; }
}

/* ── Quem pediu menos movimento ─────────────────────────────────────────────
   Desliga animação E transição. Só uma das duas deixaria metade do movimento
   de pé, que é o erro clássico aqui.                                        */
@media (prefers-reduced-motion: reduce) {
  .lk-anima .lk-sobe,
  .lk-anima .lk-id-pos,
  .lk-anima .lk-selo,
  .lk-chama,
  .lk-loop,
  .js-pilha .lk-pilha,
  .js-pilha .lk-pilha.is-in {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  /* clip-path junto, senão a marca fica cortada pela metade pra sempre. */
  .lk-anima .lk-id-logo img {
    animation: none !important;
    clip-path: none !important;
    opacity: 1 !important;
  }
  .lk-card,
  .lk-card-seta,
  .lk-rede,
  .lk-primario,
  .lk-video-play,
  .lk-ia-btn,
  .lk-post-capa img {
    transition: none !important;
  }
  .lk-tap:active { transform: none; }
}