/* ============================================================
   INSTITUTO ATHANOR — página de links (bio)
   Herda tudo de tokens.css. Nenhum hex solto aqui.

   A página tem UMA tarefa: quem vem do Instagram chega desorientado,
   num navegador embutido, com o polegar. Ela precisa dizer onde está
   e para onde ir em menos de dois segundos — e continuar sendo o
   Instituto, não um cartão de visita genérico.
   ============================================================ */

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

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

body.links {
  margin: 0;
  min-height: 100svh;
  background: var(--obsidiana);
  color: var(--creme);
  font-family: var(--f-corpo);
  font-size: var(--t-corpo);
  line-height: var(--lh-corpo);
  -webkit-font-smoothing: antialiased;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.75rem, 6vw, 4rem) var(--e-2);
  position: relative;
  overflow-x: hidden;
}

/* --- Fundo -------------------------------------------------------
   A gravura fica quase submersa: 14% de opacidade, dessaturada e
   escurecida por dois véus. Ela dá profundidade sem competir com o
   texto — e o contraste do creme sobre obsidiana continua AA.       */
.links__fundo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.links__fundo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .14;
  filter: sepia(.5) contrast(1.15) brightness(.55) saturate(.7);
}

/* Véu 1: escurece as bordas e afunda o centro do rodapé.
   Véu 2: o radial de ouro a 6% — a assinatura da marca.            */
.links__fundo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% 0%, transparent 0%, var(--obsidiana) 78%),
    radial-gradient(60% 45% at 50% 12%, var(--veu) 0%, transparent 70%);
}

.links__interno {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 30rem;      /* mais estreito que a --medida: é uma coluna de polegar */
}

/* --- Cabeça ------------------------------------------------------ */
.cabeca {
  text-align: center;
  margin-bottom: clamp(2rem, 6vw, 2.75rem);
}

.cabeca__selo {
  width: clamp(52px, 14vw, 66px);
  height: auto;
  color: var(--ouro);
  display: block;
  margin: 0 auto var(--e-2);
}

.cabeca__nome {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 8.5vw, 2.9rem);
  line-height: var(--lh-display);
  letter-spacing: .01em;
  margin: 0 0 .5rem;
  color: var(--creme);
}

.cabeca__divisa {
  font-family: var(--f-display);
  font-style: italic;
  font-size: var(--t-lead);
  color: var(--ouro-claro);
  margin: 0 0 var(--e-2);
}

.cabeca__linha {
  font-family: var(--f-micro);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

.cabeca__linha .sep { opacity: .5; padding: 0 .3em; }

/* --- A lista ----------------------------------------------------- */
.lista {
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

/* Título de seção: separa o Instituto (a casa) da marca-mãe.
   Micro-tipografia em Cinzel, com um fio de ouro de cada lado — a
   mesma gramática das divisórias do site. Serve para que quem chegou
   para se matricular não confunda o canal aberto com a oferta.       */
.secao-elos {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin: clamp(1.4rem, 5vw, 1.9rem) 0 .35rem;
  font-family: var(--f-micro);
  font-size: var(--t-micro);
  font-weight: 400;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.secao-elos::before,
.secao-elos::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--borda);
}

/* O elo: um retângulo quase reto (--raio: 2px). Documento, não app.
   Alvo de toque com 64px de altura mínima — acima dos 44 do WCAG,
   porque quem chega do Instagram está com uma mão só.               */
.elo {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 64px;
  padding: .95rem 1.15rem;
  border: var(--linha);
  border-radius: var(--raio);
  background: var(--obsidiana-alta);
  color: var(--creme);
  text-decoration: none;
  transition: border-color var(--transicao),
              background-color var(--transicao),
              transform var(--transicao);
}

.elo__texto {
  display: flex;
  flex-direction: column;
  gap: .18rem;
  flex: 1;
  min-width: 0;
}

.elo__titulo {
  font-family: var(--f-corpo);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: .005em;
}

.elo__nota {
  font-size: .875rem;
  line-height: 1.4;
  color: var(--creme-leitura);
  opacity: .72;
}

.elo__seta {
  font-size: 1.05rem;
  color: var(--muted);
  flex-shrink: 0;
  transition: transform var(--transicao), color var(--transicao);
}

/* --- O primeiro elo: o único dourado ------------------------------
   Preenchido, não contornado. É a diferença entre "existe um botão"
   e "é por aqui". Os demais são fantasmas de propósito.             */
.elo--primeiro {
  background: linear-gradient(180deg, var(--ouro-claro), var(--ouro));
  border-color: var(--ouro);
  color: var(--obsidiana);
  box-shadow: 0 1px 0 rgba(237, 229, 211, .22) inset,
              0 10px 28px -14px rgba(196, 152, 64, .55);
}

.elo--primeiro .elo__titulo { font-weight: 600; }

.elo--primeiro .elo__nota {
  color: var(--obsidiana);
  opacity: .74;
}

.elo--primeiro .elo__seta { color: var(--obsidiana); opacity: .6; }

/* --- Estados ------------------------------------------------------ */
@media (hover: hover) {
  .elo:hover {
    border-color: var(--borda-forte);
    background: color-mix(in srgb, var(--obsidiana-alta) 82%, var(--ouro) 18%);
  }
  .elo:hover .elo__seta { transform: translateX(3px); color: var(--ouro-claro); }

  .elo--primeiro:hover {
    background: linear-gradient(180deg, var(--ouro-claro), var(--ouro-claro));
    border-color: var(--ouro-claro);
  }
  .elo--primeiro:hover .elo__seta { color: var(--obsidiana); }
}

.elo:active { transform: translateY(1px); }

.elo:focus-visible {
  outline: 2px solid var(--ouro-claro);
  outline-offset: 3px;
}

/* --- Rodapé ------------------------------------------------------- */
.rodape-micro {
  text-align: center;
  margin: clamp(2rem, 7vw, 3rem) 0 0;
}

/* Sem opacidade: --muted sobre obsidiana dá 4.95:1 e passa no AA.
   A 65% caía para 2.69:1 — invisível para quem lê no sol, no celular. */
.rodape-micro__selo {
  font-family: var(--f-micro);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-micro);
  color: var(--muted);
}

/* --- Entrada ------------------------------------------------------ */
@keyframes elo-entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.elo--entra {
  opacity: 0;
  animation: elo-entra 520ms cubic-bezier(.2, .6, .2, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .elo--entra { opacity: 1; animation: none; }
  .elo, .elo__seta { transition: none; }
}