/* ============================================================
   WELVE — link na bio.
   Tokens do Design System AUTOR[IA] (recorte das duas superfícies).
   Nada de cor literal fora deste bloco, salvo o degradê da marca.
   ============================================================ */

:root {
  /* Marca */
  --orange-400: #FF8142;
  --orange-500: #FF5500;
  --orange-600: #DB4900;
  --orange-700: #B33C00;

  /* Rampa neutra */
  --n-1000: #0D0D0D;
  --n-950:  #141414;
  --n-900:  #1B1B1B;
  --n-850:  #222222;
  --n-800:  #2B2B2B;
  --n-700:  #3A3A3A;
  --n-600:  #4F4F4F;
  --n-550:  #5C5C5C;
  --n-400:  #8A8A8A;
  --n-300:  #A8A8A8;
  --n-200:  #C4C4C4;
  --n-150:  #D6D6D6;
  --n-50:   #E7E7E7;
  --n-25:   #F1F1F1;

  /* Tipografia */
  --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-h1:      clamp(2.25rem, 1.55rem + 3vw, 3rem);
  --text-h2:      clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem);
  --text-body:    1.0625rem;
  --text-body-sm: 1rem;
  --text-caption: 0.875rem;
  --text-micro:   0.75rem;

  --tracking-tight: -0.025em;
  --tracking-snug:  -0.015em;
  --tracking-label:  0.14em;

  /* Espaçamento, raio, motion */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;
  --space-16: 64px; --space-20: 80px;

  --radius-pill: 999px;
  --radius-lg: 24px;
  --radius-md: 16px;

  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);

  /* Coluna do link na bio: largura de leitura, não de site. */
  --col: 544px;
  --gutter: var(--space-6);
}

/* Superfície escura — o padrão, e o que vale se o JS não rodar. */
:root,
:root[data-surface="dark"] {
  color-scheme: dark;
  --bg:            var(--n-950);
  --bg-raised:     var(--n-900);
  --bg-raised-2:   var(--n-850);
  --bg-pressed:    var(--n-800);
  --text-primary:   var(--n-50);
  --text-secondary: var(--n-300);
  --text-muted:     var(--n-400);
  --text-accent:    var(--orange-500);
  /* A ênfase muda de passo no claro: #FF5500 ali mede 2,6:1. */
  --text-emphasis:  var(--orange-500);
  --border-subtle: var(--n-800);
  --border-strong: var(--n-700);
  --focus-ring:    var(--orange-400);
  --hairline:      var(--n-50);
  --halo:          26%;
  --shadow-card:   0 18px 40px -12px rgb(0 0 0 / 0.6), 0 2px 6px rgb(0 0 0 / 0.25);
}

:root[data-surface="light"] {
  color-scheme: light;
  --bg:            var(--n-50);
  --bg-raised:     var(--n-25);
  --bg-raised-2:   #FAFAFA;
  --bg-pressed:    var(--n-150);
  --text-primary:   var(--n-950);
  --text-secondary: var(--n-600);
  --text-muted:     var(--n-550);
  --text-accent:    var(--orange-500);
  --text-emphasis:  var(--orange-700);
  --border-subtle: var(--n-150);
  --border-strong: var(--n-200);
  --focus-ring:    var(--orange-700);
  --hairline:      var(--n-950);
  --halo:          16%;
  --shadow-card:   0 18px 34px -16px rgb(20 20 20 / 0.28), 0 2px 6px rgb(20 20 20 / 0.08);
}

@media (min-width: 480px) { :root { --gutter: var(--space-8); } }

/* ---------- base ---------- */

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

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

/* Sem `overflow-x: hidden` no body: ele vira contêiner de rolagem e mata
   qualquer sticky descendente — e o cabeçalho depende de sticky. */
body {
  position: relative;
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.45;
  letter-spacing: -0.008em;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--duration-normal) var(--ease-standard),
    color var(--duration-normal) var(--ease-standard);
}

h1, h2, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

a { color: inherit; }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-md);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- fundos em WebGL (os mesmos da proposta) ---------- */

.fx {
  position: absolute;
  left: 0; right: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Véu: a luz fica viva no meio e morre na cor da página nas pontas —
   é o que mantém o texto legível por cima. */
.fx::after {
  content: "";
  position: absolute;
  inset: 0;
}
.fx--topo { top: 0; height: clamp(520px, 86vh, 900px); }
.fx--topo::after {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg) 72%, transparent) 0%,
    color-mix(in srgb, var(--bg) 46%, transparent) 34%,
    color-mix(in srgb, var(--bg) 86%, transparent) 72%,
    var(--bg) 100%
  );
}
.fx--fim { bottom: 0; height: clamp(360px, 52vh, 620px); }
.fx--fim::after {
  background: linear-gradient(
    180deg,
    var(--bg) 0%,
    color-mix(in srgb, var(--bg) 88%, transparent) 34%,
    color-mix(in srgb, var(--bg) 62%, transparent) 64%,
    color-mix(in srgb, var(--bg) 30%, transparent) 100%
  );
}

/* ---------- cabeçalho ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
}
/* Barra translúcida só depois que a página anda: no topo ela some no fundo. */
.topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-subtle);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-standard);
}
.topbar.is-stuck::before { opacity: 1; }

.topbar__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  max-width: calc(var(--col) + var(--gutter) * 2);
  margin-inline: auto;
  padding: var(--space-4) var(--gutter);
}

.topbar__brand { display: flex; color: var(--text-primary); text-decoration: none; }
.topbar__logo { height: 20px; width: auto; }
.topbar__brand:hover .topbar__logo { opacity: 0.8; }

.topbar__tools { display: flex; align-items: center; gap: var(--space-2); }

.lang {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--bg-raised) 82%, transparent);
}
.lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 7px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}
.lang__btn:hover { color: var(--text-primary); }
.lang__btn[aria-pressed="true"] { background: var(--bg-pressed); color: var(--text-primary); }
.flag { display: flex; }
.flag svg {
  width: 17px; height: 12px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--hairline) 22%, transparent);
}

.tema {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--bg-raised) 82%, transparent);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}
.tema:hover { color: var(--text-primary); border-color: var(--border-strong); }
.tema svg { width: 18px; height: 18px; }
/* No escuro o botão oferece o sol; no claro, a lua. */
:root[data-surface="dark"] .tema__lua,
:root[data-surface="light"] .tema__sol { display: none; }

/* ---------- página ---------- */

.page {
  position: relative;
  z-index: 20;
  width: 100%;
  max-width: calc(var(--col) + var(--gutter) * 2);
  margin-inline: auto;
  padding: var(--space-8) var(--gutter) var(--space-10);
}

@media (min-width: 480px) { .page { padding-top: var(--space-12); } }

/* ---------- perfil ---------- */

.profile { text-align: center; }

.avatar {
  position: relative;
  width: 112px;
  height: 112px;
  margin-inline: auto;
  border-radius: var(--radius-pill);
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  display: grid;
  place-items: center;
}
/* O halo laranja é a única luz própria acima da dobra — o resto vem do fundo. */
.avatar::after {
  content: "";
  position: absolute;
  inset: -36px;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--orange-500) var(--halo), transparent), transparent 62%);
  z-index: -1;
  pointer-events: none;
}
.avatar__img { width: 100%; height: 100%; object-fit: cover; }
.avatar__img[hidden] { display: none; }
.avatar__fallback { display: block; width: 44%; }
.avatar__fallback svg { width: 100%; height: auto; }
.avatar:has(.avatar__img:not([hidden])) .avatar__fallback { display: none; }

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  padding: 7px var(--space-4) 7px var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--bg-raised) 86%, transparent);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--text-secondary);
  /* Caixa alta pelo CSS, não no texto: o leitor de tela continua lendo a
     frase, não as letras soltas. */
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
}
.status__dot {
  width: 7px; height: 7px;
  border-radius: var(--radius-pill);
  background: var(--orange-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange-500) 22%, transparent);
}

.profile__name {
  margin-top: var(--space-6);
  font-size: var(--text-h1);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: var(--tracking-tight);
}

.profile__role {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--text-muted);
}

.profile__bio {
  max-width: 34ch;
  margin: var(--space-6) auto 0;
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
}
.t-emph { font-weight: 700; color: var(--text-emphasis); }

.socials {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-8);
}
.socials__link {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--bg-raised) 86%, transparent);
  color: var(--text-secondary);
  text-decoration: none;
  transition:
    color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard);
}
.socials__link:hover { color: var(--text-primary); border-color: var(--border-strong); background: var(--bg-raised-2); }
.socials__link svg { width: 19px; height: 19px; }

/* ---------- CTA principal ---------- */

.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-10);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: linear-gradient(100deg, #FF8100, var(--orange-500));
  color: var(--n-950);
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-normal) var(--ease-standard);
}
.cta:hover { box-shadow: 0 16px 40px -18px color-mix(in srgb, var(--orange-500) 80%, transparent); }
.cta:active { transform: translateY(1px); }

/* O brilho segue o ponteiro: `--mx`/`--my` vêm do JS, em pixels. */
.cta__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    300px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, #FFFFFF 66%, transparent),
    transparent 64%
  );
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-standard);
}
.cta:hover .cta__glow,
.cta:focus-visible .cta__glow { opacity: 1; }

.cta__symbol {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--n-950) 14%, transparent);
}
.cta__symbol svg { width: 24px; height: 24px; }

.cta__text { display: block; min-width: 0; }
.cta__label {
  display: block;
  font-weight: 500;
  font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-snug);
}
.cta__sub {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--n-950) 78%, transparent);
}

.cta__arrow {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--n-950) 14%, transparent);
}
.cta__arrow svg { width: 17px; height: 17px; }

/* A lista de serviços não cabe ao lado do símbolo e da seta sem virar linhas
   estreitas: ela desce para uma faixa própria, de ponta a ponta, em qualquer
   largura. */
.cta { row-gap: var(--space-3); }
/* `display: contents` dissolve a caixa do texto, então rótulo e lista viram
   células da grade do próprio CTA. */
.cta__text { display: contents; }
/* Com a caixa dissolvida, a colocação automática empurraria a seta para
   depois da lista: as quatro peças ganham linha e coluna fixas. */
.cta__symbol { grid-area: 1 / 1; }
.cta__label { grid-area: 1 / 2; align-self: center; }
.cta__arrow { grid-area: 1 / 3; }
.cta__sub { grid-area: 2 / 1 / 3 / 4; margin-top: 0; }

/* ---------- seções ---------- */

.section { margin-top: var(--space-16); }

.section__head { margin-bottom: var(--space-6); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
}

.section__title {
  margin-top: var(--space-2);
  font-size: var(--text-h2);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
}

/* ---------- leque de portfólio ---------- */

/* O palco sangra até as bordas da janela (o JS mede e escreve `--bleed` e
   `--arc-w`): o arco só se lê inteiro quando as pontas saem da coluna.
   `clip` corta na horizontal sem virar contêiner de rolagem e sem cortar
   em cima e embaixo — era o que decepava os cartões do leque. */
.arc__stage {
  position: relative;
  width: var(--arc-w, 100%);
  margin-left: calc(var(--bleed, 0px) * -1);
  overflow-x: clip;
  overflow-y: visible;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  outline-offset: -4px;
}
.arc__stage:active { cursor: grabbing; }

.arc__viewport {
  position: absolute;
  inset: 0;
  /* O aro é um círculo de quase 2000px: sem corte aqui ele escapa para baixo
     do palco e vira rolagem sobrando no fim da página (faixa vazia no desktop,
     onde o arco é maior que o conteúdo que vem depois). A margem de corte
     deixa passar só a sombra dos cartões. */
  overflow: clip;
  overflow-clip-margin: 40px;
  /* A borda do leque some aos poucos nas laterais, nunca na base. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.arc__ring {
  position: absolute;
  transform: translateX(-50%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  pointer-events: none;
}

.arc__card {
  position: absolute;
  left: 0; top: 0;
  visibility: hidden;
  will-change: transform;
}
.arc__card-inner {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-raised);
  box-shadow: var(--shadow-card);
}
.arc__card-inner img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top;
  pointer-events: none;
  user-select: none;
}

.arc__controls {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.arc__counter {
  flex: none;
  font-family: var(--font-mono);
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.25rem);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}
.arc__counter-total { color: var(--text-muted); }

.arc__caption { flex: 1; min-width: 0; padding-bottom: 3px; }
.arc__caption-title { font-size: var(--text-body-sm); font-weight: 500; line-height: 1.2; }
.arc__caption-sub {
  font-size: var(--text-caption);
  color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.arc__buttons { display: flex; flex: none; gap: var(--space-2); }
.arc__btn {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--bg-raised);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.arc__btn:hover { background: var(--bg-raised-2); border-color: var(--border-strong); }
.arc__btn svg { width: 19px; height: 19px; }
.arc__btn--primary {
  background: var(--orange-500);
  border-color: var(--orange-500);
  color: var(--n-950);
}
.arc__btn--primary:hover { background: var(--orange-400); border-color: var(--orange-400); }

/* ---------- cartão da formação ---------- */

.feature {
  display: block;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  overflow: hidden;
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}
.feature:hover { border-color: var(--border-strong); background: var(--bg-raised-2); }

.feature__cover { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-pressed); }
.feature__cover img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

.feature__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6) var(--space-6);
}
.feature__text { display: block; min-width: 0; }
.feature__title { display: block; font-size: var(--text-body-sm); font-weight: 500; letter-spacing: var(--tracking-snug); }
.feature__sub { display: block; margin-top: 2px; font-size: var(--text-caption); color: var(--text-secondary); }

.feature__action {
  flex: none;
  padding: 10px var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--orange-500);
  color: var(--n-950);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  text-indent: 0.09em;
}
.feature:hover .feature__action { background: var(--orange-400); }

/* No celular o selo empurra o título para quatro linhas estreitas: o cartão
   empilha. */
@media (max-width: 460px) {
  .feature__body {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
}

/* ---------- lista de links ---------- */

.links { display: grid; gap: var(--space-3); }

.links__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}
.links__row:hover { border-color: var(--border-strong); background: var(--bg-raised-2); }

.links__icon { display: grid; place-items: center; width: 22px; color: var(--text-muted); }
.links__icon svg { width: 20px; height: 20px; }
.links__row:hover .links__icon { color: var(--text-accent); }

.links__text { min-width: 0; }
.links__title { display: block; font-size: var(--text-body-sm); font-weight: 500; letter-spacing: var(--tracking-snug); }
.links__sub { display: block; margin-top: 1px; font-size: var(--text-caption); color: var(--text-secondary); }

.links__arrow { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-pill); background: var(--bg-raised-2); color: var(--text-secondary); }
.links__row:hover .links__arrow { background: var(--bg-pressed); color: var(--text-primary); }
.links__arrow svg { width: 16px; height: 16px; }

/* Pendência: link que o Luis ainda não passou. Fica visível e honesto —
   nunca inventar URL. */
.is-pendente { opacity: 0.58; cursor: not-allowed; }
.is-pendente:hover { border-color: var(--border-subtle); background: var(--bg-raised); }
.is-pendente .links__arrow,
.is-pendente .feature__action { background: var(--bg-pressed); color: var(--text-muted); }
.pendente-tag {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* ---------- rodapé ---------- */

.footer {
  margin-top: var(--space-20);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border-subtle);
  text-align: center;
}
.footer__brand { display: inline-block; color: var(--text-primary); text-decoration: none; }
.footer__logo { height: 30px; width: auto; }
.footer__brand:hover .footer__logo { opacity: 0.82; }

.footer__line { margin-top: var(--space-4); font-size: var(--text-caption); color: var(--text-secondary); }

.footer__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--text-muted);
}
.footer__mail { text-decoration: none; }
.footer__mail:hover { color: var(--text-accent); }

/* ---------- entrada ---------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); }
  .reveal.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 520ms var(--ease-standard), transform 520ms var(--ease-standard);
  }
}