/*
Theme Name: Apexio Blog
Theme URI: https://apexio.com.br
Author: Apexio
Description: Tema do blog, no design system Apexio (Sora + Inter + JetBrains Mono).
Version: 1.0
*/
.post-body { max-width: 68ch; margin-inline: auto; color: var(--ink-soft); font: 400 1.0625rem/1.75 var(--font-ui); }
.post-body > * { margin-block: 0 1.5rem; }
.post-body h2, .post-body h3 { color: var(--ink-strong); font-family: var(--font-display); letter-spacing: -0.025em; }
.post-body h2 { font-size: var(--display-lg); line-height: 1.08; margin-top: clamp(2.5rem, 5vw, 4rem); }
.post-body h3 { font-size: var(--display-md); line-height: 1.18; margin-top: 2rem; }
.post-body img, .post-body figure, .post-body .wp-block-image { border-radius: 18px; max-width: 100%; height: auto; }
.post-body figcaption { color: var(--ink-faint); font: 400 .8125rem/1.5 var(--font-mono); text-align: center; }
.post-body blockquote { border-left: 3px solid var(--apex-teal-500); margin-inline: 0; padding: .25rem 0 .25rem 1.25rem; color: var(--ink-strong); font: 500 1.25rem/1.5 var(--font-display); }
.post-body ul, .post-body ol { padding-left: 1.5rem; }
.post-body a { color: var(--apex-navy-500); text-decoration-thickness: 1px; text-underline-offset: .18em; }
.post-body img { display: block; }
button.apx-link { appearance: none; background: none; border: 0; cursor: pointer; padding: 0; }
.apx-pill-row .cat-item { list-style: none; }
.apx-pill-row .cat-item a, .apx-pagination .page-numbers { display: inline-flex; align-items: center; min-height: 38px; padding: 0 .875rem; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink-strong); font: 500 .75rem/1 var(--font-mono); letter-spacing: .06em; text-decoration: none; text-transform: uppercase; }
.apx-pagination .page-numbers.current { background: var(--apex-navy-500); color: var(--apex-white); }
body.admin-bar .apx-header { top: var(--wp-admin--admin-bar--height, 32px); }

/* ═══════════════════════════════════════════════════════════════════
   APEXIO DESIGN SYSTEM v2.1 — CAMADA EDITORIAL, FACETAS & MOTION
   Extensão do DS v1 (tokens/colors, typography, spacing, effects).
   Autocontido: pode ser colado inteiro num <style>.
   Par: ds-apexio-v2.js (observers, parallax, counters, split, cursor).

   FUNDAMENTO: tudo aqui deriva da LOGO — um apex construído por planos
   triangulares que varrem navy → cyan → teal → magenta → coral.
   Daí saem três decisões:
     · tipo geométrico angular (Sora), não humanista, não serif
     · geometria de 26° / 52° em divisores, máscaras e ornamentos
     · varredura de cor SEMPRE na ordem dos planos da marca
   ═══════════════════════════════════════════════════════════════════ */


:root {
  /* ── HERANÇA v1 (literais, para uso autocontido) ── */
  --apex-navy-500: #1A2744;
  --apex-navy-600: #16203A;
  --apex-navy-700: #11192E;
  --apex-navy-800: #0D1223;
  --apex-navy-900: #080B17;
  --apex-teal-500: #00C9A7;
  --apex-teal-600: #00A88C;
  --apex-cyan-500: #2EC8E8;
  --apex-lilac-400: #9B4DCA;
  --apex-magenta-400: #C74B8B;
  --apex-coral-400: #E8884A;
  --apex-white: #FFFFFF;

  /* ═══ 1. TIPOGRAFIA ═══
     Sora: geométrica, eixo vertical, terminais retos, ângulos vivos —
     é o parente tipográfico dos planos da logo. Substitui Inter APENAS
     em display/títulos/números. Inter segue dona do corpo e da UI.
     JetBrains Mono carrega numeração, metadado e label técnico. */
  --font-display: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ui:      'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  /* Escala fluida — v1 travava em 72px fixo */
  --display-hero: clamp(2.5rem, 6.6vw, 7.5rem);      /* 40 → 120px  H1 */
  --display-xl:   clamp(2rem, 4.6vw, 4.75rem);       /* 32 → 76px   título de seção */
  --display-lg:   clamp(1.75rem, 3.2vw, 3.125rem);   /* 28 → 50px   H2 */
  --display-md:   clamp(1.375rem, 2.1vw, 2rem);      /* 22 → 32px   H3 / card */
  --lead:         clamp(1.0625rem, 1.3vw, 1.3125rem);/* 17 → 21px   subhead */

  /* Sora é larga: aperta mais que Inter para não abrir buraco */
  --tracking-display: -0.035em;
  --tracking-wordmark: 0.02em;   /* caps largo, como o wordmark */
  --leading-display:  0.94;

  /* ═══ 2. SUPERFÍCIES ═══ */
  --surface-base:     #F7F8FA;   /* herdado do v1 */
  --surface-raised:   #FFFFFF;
  --surface-sunken:   #EEF0F3;
  --surface-ink:      var(--apex-navy-800);
  --surface-ink-deep: var(--apex-navy-900);
  --surface-ink-card: rgba(255, 255, 255, 0.045);

  --ink-strong: var(--apex-navy-500);
  --ink-soft:   #4A5568;
  --ink-faint:  #8A929E;
  --on-ink-strong: #F4F6F8;
  --on-ink-soft:   rgba(244, 246, 248, 0.70);
  --on-ink-faint:  rgba(244, 246, 248, 0.44);

  --rule:            rgba(26, 39, 68, 0.12);
  --rule-soft:       rgba(26, 39, 68, 0.07);
  --rule-ink:        rgba(255, 255, 255, 0.14);
  --rule-ink-soft:   rgba(255, 255, 255, 0.07);

  /* ═══ 3. VARREDURA DA MARCA ═══
     Ordem dos planos da logo. Não reordenar, não substituir cor. */
  --sweep-brand: linear-gradient(100deg,
      var(--apex-navy-500) 0%,
      var(--apex-cyan-500) 26%,
      var(--apex-teal-500) 48%,
      var(--apex-magenta-400) 74%,
      var(--apex-coral-400) 100%);
  --sweep-cool:  linear-gradient(100deg, var(--apex-navy-500) 0%, var(--apex-cyan-500) 55%, var(--apex-teal-500) 100%);
  --sweep-warm:  linear-gradient(100deg, var(--apex-teal-500) 0%, var(--apex-magenta-400) 55%, var(--apex-coral-400) 100%);
  --prism-glow:  radial-gradient(60% 60% at 20% 20%, rgba(46,200,232,0.16), transparent 70%),
                 radial-gradient(50% 50% at 80% 30%, rgba(0,201,167,0.14), transparent 70%),
                 radial-gradient(55% 55% at 65% 85%, rgba(199,75,139,0.10), transparent 70%);

  /* ═══ 4. GEOMETRIA DA MARCA ═══
     Ângulos lidos dos planos do apex. Usar SÓ estes três. */
  --facet-angle:  26deg;
  --facet-angle-2: 52deg;
  --facet-cut:    clamp(28px, 4vw, 72px);  /* profundidade do corte diagonal */

  /* ═══ 5. MOTION ═══
     Quatro durações, três easings, um stagger. Nada além. */
  --dur-micro:  140ms;
  --dur-ui:     280ms;
  --dur-reveal: 900ms;
  --dur-long:  1500ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.30, 1);   /* toda entrada */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);   /* saída/curtain */
  --ease-ui:       cubic-bezier(0.4, 0, 0.2, 1);     /* herdado v1 */
  --stagger:    70ms;
  --shift:      26px;

  /* ═══ 6. GRID ═══ */
  --shell-max: 1360px;
  --shell-pad: clamp(1.25rem, 4vw, 4.5rem);
  --col-gap:   clamp(1rem, 2vw, 2rem);
  --measure:   62ch;
  --band-y:    clamp(4.5rem, 9vw, 9.5rem);
}

/* ═══════════════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-ui); background: var(--surface-base); color: var(--ink-strong); -webkit-font-smoothing: antialiased; }
img, video, canvas { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--apex-teal-500); outline-offset: 3px; }
a { color: var(--apex-teal-600); text-underline-offset: 3px; }
a:hover { color: var(--apex-navy-500); }
.apx-on-ink a { color: var(--apex-teal-500); }
.apx-on-ink a:hover { color: var(--apex-white); }

/* ═══════════════════════════════════════════════════════════════════
   TIPOGRAFIA
   ═══════════════════════════════════════════════════════════════════ */
.apx-display  { font: 700 var(--display-hero)/var(--leading-display) var(--font-display); letter-spacing: var(--tracking-display); margin: 0; text-wrap: balance; }
.apx-title-xl { font: 700 var(--display-xl)/0.98 var(--font-display); letter-spacing: var(--tracking-display); margin: 0; text-wrap: balance; }
.apx-title    { font: 600 var(--display-lg)/1.06 var(--font-display); letter-spacing: -0.03em; margin: 0; text-wrap: balance; }
.apx-title-sm { font: 600 var(--display-md)/1.18 var(--font-display); letter-spacing: -0.025em; margin: 0; }

/* Momento wordmark: caps largo como a logo. Só em frases curtíssimas. */
.apx-wordmark { font: 800 var(--display-xl)/0.96 var(--font-display); letter-spacing: var(--tracking-wordmark); text-transform: uppercase; margin: 0; }

.apx-lead { font: 400 var(--lead)/1.5 var(--font-ui); letter-spacing: -0.008em; color: var(--ink-soft); max-width: var(--measure); margin: 0; text-wrap: pretty; }
.apx-body { font: 400 1rem/1.62 var(--font-ui); color: var(--ink-soft); max-width: var(--measure); margin: 0; text-wrap: pretty; }
.apx-meta { font: 500 0.75rem/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.apx-index { font: 400 0.8125rem/1 var(--font-mono); letter-spacing: 0.04em; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* Eyebrow: régua + faceta + label mono */
.apx-eyebrow { display: inline-flex; align-items: center; gap: 0.75rem; font: 500 0.75rem/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--apex-teal-600); }
.apx-eyebrow::before { content: ""; width: 10px; height: 10px; flex: none; background: var(--sweep-cool); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.apx-eyebrow::after { content: ""; width: clamp(20px, 3.5vw, 48px); height: 1px; flex: none; background: currentColor; opacity: 0.45; }
.apx-on-ink .apx-eyebrow { color: var(--apex-teal-500); }

/* Texto com varredura da marca — só em 1 palavra por página */
.apx-sweep-text { background: var(--sweep-brand); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: apxSweep 9s var(--ease-in-out) infinite; }
@keyframes apxSweep { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.apx-on-ink { background: var(--surface-ink); color: var(--on-ink-strong); }
.apx-on-ink .apx-lead, .apx-on-ink .apx-body { color: var(--on-ink-soft); }
.apx-on-ink .apx-meta, .apx-on-ink .apx-index { color: var(--on-ink-faint); }

/* ═══════════════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════════════ */
.apx-shell { width: 100%; max-width: var(--shell-max); margin-inline: auto; padding-inline: var(--shell-pad); }
.apx-band { padding-block: var(--band-y); }
.apx-grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--col-gap); }
@media (max-width: 860px) { .apx-grid12 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 560px) { .apx-grid12 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.apx-section-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 5rem); align-items: end; }
@media (max-width: 860px) { .apx-section-head { grid-template-columns: 1fr; align-items: start; } }

/* ═══════════════════════════════════════════════════════════════════
   MOTIVO DE FACETA
   ═══════════════════════════════════════════════════════════════════ */

/* Divisor diagonal no ângulo do apex — troca de superfície entre seções */
.apx-cut-top    { clip-path: polygon(0 var(--facet-cut), 100% 0, 100% 100%, 0 100%); }
.apx-cut-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--facet-cut)), 0 100%); }
.apx-cut-both   { clip-path: polygon(0 var(--facet-cut), 100% 0, 100% calc(100% - var(--facet-cut)), 0 100%); }

/* Régua com varredura da marca */
.apx-rule-brand { height: 2px; background: var(--sweep-brand); border: 0; }

/* Ornamento de faceta — triângulo sólido, nunca SVG desenhado à mão */
.apx-facet { width: 14px; height: 14px; flex: none; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: var(--sweep-cool); }
.apx-facet--warm { background: var(--sweep-warm); }

/* Marca d'água de faceta — fundo de seção grande, atrás do conteúdo */
.apx-facet-mark { position: absolute; pointer-events: none; aspect-ratio: 1; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: var(--sweep-brand); opacity: 0.07; }

/* Brilho prismático — hero e blocos de tinta */
.apx-prism { position: absolute; inset: -20%; pointer-events: none; background: var(--prism-glow); filter: blur(28px); }

/* Grão de superfície */
.apx-grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.45; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.15'/%3E%3C/svg%3E"); }
.apx-on-ink.apx-grain::after { mix-blend-mode: screen; opacity: 0.3; }

/* ═══════════════════════════════════════════════════════════════════
   BIBLIOTECA DE EFEITOS DE SCROLL
   Marque o elemento com [data-anim] e ds-apexio-v2.js adiciona
   .is-in ao entrar na viewport (e remove ao sair, se data-anim-repeat).
   Stagger: --i="0..n" no elemento ou data-anim-stagger no pai.
   ═══════════════════════════════════════════════════════════════════ */

[data-anim] {
  --anim-delay: calc(var(--i, 0) * var(--stagger));
  transition: opacity var(--dur-reveal) var(--ease-out-expo) var(--anim-delay),
              transform var(--dur-reveal) var(--ease-out-expo) var(--anim-delay),
              filter var(--dur-reveal) var(--ease-out-expo) var(--anim-delay),
              clip-path var(--dur-long) var(--ease-out-expo) var(--anim-delay);
  will-change: opacity, transform;
}

[data-anim="fade"]        { opacity: 0; }
[data-anim="fade-up"]     { opacity: 0; transform: translate3d(0, var(--shift), 0); }
[data-anim="fade-down"]   { opacity: 0; transform: translate3d(0, calc(var(--shift) * -1), 0); }
[data-anim="fade-left"]   { opacity: 0; transform: translate3d(calc(var(--shift) * -1.4), 0, 0); }
[data-anim="fade-right"]  { opacity: 0; transform: translate3d(calc(var(--shift) * 1.4), 0, 0); }
[data-anim="scale-in"]    { opacity: 0; transform: scale(0.94); }
[data-anim="blur-in"]     { opacity: 0; filter: blur(14px); transform: translate3d(0, 14px, 0); }
[data-anim="facet-in"]    { opacity: 0; transform: translate3d(0, var(--shift), 0) rotate(-1.5deg); }
[data-anim="wipe-up"]     { clip-path: inset(100% 0 0 0); }
[data-anim="wipe-right"]  { clip-path: inset(0 100% 0 0); }
/* Corte diagonal no ângulo da marca */
[data-anim="wipe-facet"]  { clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%); }
[data-anim="rule-draw"]   { transform: scaleX(0); transform-origin: left; }

[data-anim].is-in {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(0 0 0 0);
}
[data-anim="wipe-facet"].is-in { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }

/* Fade-off: sai de cena ao rolar além (data-anim-out) */
[data-anim-out].is-out { opacity: 0; transform: translate3d(0, -18px, 0); transition: opacity 600ms var(--ease-in-out), transform 600ms var(--ease-in-out); }

/* ── Split de texto: linha, palavra, caractere ──
   O JS embrulha em .apx-line / .apx-word / .apx-char. */
.apx-split { }
.apx-split .apx-line, .apx-split .apx-word { display: inline-block; overflow: hidden; vertical-align: top; }
.apx-split .apx-word { padding-right: 0.26em; margin-right: -0.26em; }
.apx-split .apx-inner { display: inline-block; transform: translate3d(0, 108%, 0); transition: transform 1050ms var(--ease-out-expo); transition-delay: calc(var(--i, 0) * 55ms); }
.apx-split.is-in .apx-inner { transform: none; }
.apx-split[data-split="char"] .apx-inner { transition-duration: 760ms; transition-delay: calc(var(--i, 0) * 22ms); }

/* ── Máscara de imagem: revela do centro / diagonal ── */
.apx-mask { overflow: hidden; }
.apx-mask > * { transform: scale(1.18); transition: transform var(--dur-long) var(--ease-out-expo); }
.apx-mask.is-in > * { transform: scale(1); }

/* ── Parallax: data-parallax="0.18" (fração do scroll) ── */
[data-parallax] { will-change: transform; }

/* ── Barra de progresso de scroll ── */
.apx-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 100; background: transparent; pointer-events: none; }
.apx-progress__bar { height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: var(--sweep-brand); }

/* ── Header que esconde ao descer e volta ao subir ── */
.apx-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--surface-base) 84%, transparent); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid var(--rule-soft); transition: transform 480ms var(--ease-out-expo), background var(--dur-ui) var(--ease-ui); }
.apx-header[data-hidden="true"] { transform: translate3d(0, -102%, 0); }

/* ── Cursor seguidor (desktop, ponteiro fino) ── */
.apx-cursor { position: fixed; top: 0; left: 0; z-index: 90; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 999px; border: 1px solid var(--apex-teal-500); pointer-events: none; opacity: 0; transition: opacity var(--dur-ui) var(--ease-ui), width var(--dur-ui) var(--ease-out-expo), height var(--dur-ui) var(--ease-out-expo), background var(--dur-ui) var(--ease-ui); }
.apx-cursor[data-active="true"] { opacity: 1; }
.apx-cursor[data-hover="true"] { width: 66px; height: 66px; margin: -33px 0 0 -33px; background: rgba(0, 201, 167, 0.12); }
@media (hover: none), (max-width: 860px) { .apx-cursor { display: none; } }

/* ── Curtain de entrada de página ── */
.apx-curtain { position: fixed; inset: 0; z-index: 200; background: var(--surface-ink-deep); pointer-events: none; transform-origin: top; animation: apxCurtain 1100ms var(--ease-in-out) forwards; }
@keyframes apxCurtain { 0% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 100% 0); } }

/* ── Sticky stack: cards que empilham no scroll ── */
.apx-stack { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.apx-stack__item { position: sticky; top: clamp(5rem, 12vh, 9rem); }

/* ── Sticky pin: coluna fixa + coluna que rola ── */
.apx-pin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.apx-pin__fixed { position: sticky; top: clamp(6rem, 16vh, 11rem); }
@media (max-width: 860px) { .apx-pin { grid-template-columns: 1fr; } .apx-pin__fixed { position: static; } }

/* ═══════════════════════════════════════════════════════════════════
   COMPONENTES
   ═══════════════════════════════════════════════════════════════════ */

/* ── Botão: fill sobe de baixo, seta desliza ── */
.apx-btn {
  --fill: var(--apex-teal-500);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 0.625rem;
  min-height: 54px; padding: 0 1.625rem;
  font: 600 0.9375rem/1 var(--font-display); letter-spacing: -0.01em;
  border: 1px solid var(--apex-navy-500); border-radius: 999px;
  background: var(--apex-navy-500); color: var(--apex-white);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: color var(--dur-ui) var(--ease-ui), border-color var(--dur-ui) var(--ease-ui), transform var(--dur-ui) var(--ease-out-expo);
}
.apx-btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fill); transform: translate3d(0, 101%, 0); transition: transform 520ms var(--ease-out-expo); }
.apx-btn:hover::after, .apx-btn:focus-visible::after { transform: none; }
.apx-btn:hover, .apx-btn:focus-visible { color: var(--apex-navy-500); }
.apx-btn:active { transform: scale(0.98); }
.apx-btn__arrow { display: inline-block; transition: transform 420ms var(--ease-out-expo); }
.apx-btn:hover .apx-btn__arrow { transform: translate3d(4px, 0, 0); }
.apx-btn--brand { border-color: transparent; background: var(--sweep-cool); --fill: var(--apex-navy-500); }
.apx-btn--brand:hover { color: var(--apex-white); }
.apx-btn--ghost { background: transparent; color: var(--ink-strong); border-color: var(--rule); }
.apx-btn--ghost:hover { color: var(--apex-navy-500); border-color: var(--apex-navy-500); }
.apx-on-ink .apx-btn--ghost { color: var(--on-ink-strong); border-color: var(--rule-ink); }
.apx-on-ink .apx-btn--ghost:hover { color: var(--apex-navy-500); border-color: var(--apex-teal-500); }

/* ── Link com régua que cresce ── */
.apx-link { position: relative; color: inherit; text-decoration: none; font: 500 0.9375rem/1 var(--font-ui); }
.apx-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 420ms var(--ease-out-expo); }
.apx-link:hover::after, .apx-link:focus-visible::after { transform: scaleX(1); }

/* ── Nav item com troca vertical de rótulo ── */
.apx-nav-item { position: relative; display: inline-block; overflow: hidden; font: 500 0.875rem/1.4 var(--font-ui); color: var(--ink-soft); text-decoration: none; }
.apx-nav-item span { display: block; transition: transform 420ms var(--ease-out-expo); }
.apx-nav-item span:last-child { position: absolute; top: 100%; left: 0; color: var(--apex-navy-500); }
.apx-nav-item:hover span { transform: translate3d(0, -100%, 0); }

/* ── Pílula ── */
.apx-pill { display: inline-flex; align-items: center; min-height: 34px; padding: 0 0.875rem; font: 400 0.8125rem/1 var(--font-mono); border: 1px solid var(--rule); border-radius: 999px; color: var(--ink-soft); white-space: nowrap; transition: border-color var(--dur-ui) var(--ease-ui), color var(--dur-ui) var(--ease-ui); }
.apx-pill:hover { border-color: var(--apex-teal-500); color: var(--apex-navy-500); }
.apx-on-ink .apx-pill { border-color: var(--rule-ink); color: var(--on-ink-soft); }
.apx-pill-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ── Marquee (duplique o grupo duas vezes) ── */
.apx-marquee { position: relative; overflow: hidden; --speed: 42s; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.apx-marquee__track { display: flex; width: max-content; animation: apxMarquee var(--speed) linear infinite; }
.apx-marquee--reverse .apx-marquee__track { animation-direction: reverse; }
.apx-marquee:hover .apx-marquee__track { animation-play-state: paused; }
.apx-marquee__group { display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 4rem); padding-right: clamp(1.5rem, 4vw, 4rem); flex: none; white-space: nowrap; }
@keyframes apxMarquee { to { transform: translate3d(-50%, 0, 0); } }

/* ── Accordion numerado ── */
.apx-acc { border-top: 1px solid var(--rule); }
.apx-acc__item { border-bottom: 1px solid var(--rule); }
.apx-acc__head { width: 100%; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 2.5rem; gap: var(--col-gap); align-items: baseline; text-align: left; padding: clamp(1.25rem, 2.6vw, 2rem) 0; background: none; border: 0; cursor: pointer; color: inherit; transition: opacity var(--dur-ui) var(--ease-ui); }
.apx-acc__head:hover { opacity: 0.6; }
.apx-acc__sign { justify-self: end; width: 1.25rem; height: 1.25rem; position: relative; }
.apx-acc__sign::before, .apx-acc__sign::after { content: ""; position: absolute; inset: 50% 0 auto; height: 1px; background: currentColor; }
.apx-acc__sign::after { transform: rotate(90deg); transition: transform 420ms var(--ease-out-expo); }
.apx-acc__item[data-open="true"] .apx-acc__sign::after { transform: rotate(0deg); }
.apx-acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 480ms var(--ease-out-expo); }
.apx-acc__item[data-open="true"] .apx-acc__panel { grid-template-rows: 1fr; }
.apx-acc__panel > div { overflow: hidden; }
@media (max-width: 640px) { .apx-acc__head { grid-template-columns: 2.75rem minmax(0, 1fr) 1.5rem; } }

/* ── Card com tilt e borda que acende ── */
.apx-card { position: relative; border: 1px solid var(--rule); border-radius: 20px; background: var(--surface-raised); padding: clamp(1.25rem, 2.4vw, 2rem); transition: transform 420ms var(--ease-out-expo), border-color var(--dur-ui) var(--ease-ui), box-shadow 420ms var(--ease-out-expo); transform-style: preserve-3d; }
.apx-card:hover { border-color: var(--apex-teal-500); box-shadow: 0 18px 48px rgba(26, 39, 68, 0.09); }
.apx-on-ink .apx-card { background: var(--surface-ink-card); border-color: var(--rule-ink); }

/* ── Project card ── */
.apx-project { display: grid; gap: 1.25rem; text-decoration: none; color: inherit; }
.apx-project__frame { position: relative; overflow: hidden; border-radius: 20px; background: var(--surface-sunken); aspect-ratio: 4 / 3; }
.apx-project__frame > * { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out-expo); }
.apx-project:hover .apx-project__frame > * { transform: scale(1.04); }

/* ── Stat row (contador em data-count) ── */
.apx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); border-top: 1px solid var(--rule); }
.apx-stat { padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 2rem) clamp(1.5rem, 3vw, 2.5rem) 0; border-bottom: 1px solid var(--rule); }
.apx-stat__num { font: 700 clamp(2.25rem, 4vw, 3.5rem)/0.95 var(--font-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.apx-stat__label { margin-top: 0.5rem; font: 400 0.875rem/1.4 var(--font-ui); color: var(--ink-faint); }
.apx-on-ink .apx-stats, .apx-on-ink .apx-stat { border-color: var(--rule-ink); }

/* ── Placeholder marcado: onde não há prova real ── */
.apx-placeholder { display: grid; place-content: center; gap: 0.5rem; text-align: center; min-height: 180px; padding: 1.5rem; border-radius: 20px; border: 1px dashed var(--rule); background: repeating-linear-gradient(var(--facet-angle-2), transparent 0 10px, rgba(26,39,68,0.03) 10px 20px); font: 400 0.8125rem/1.5 var(--font-mono); color: var(--ink-faint); }
.apx-on-ink .apx-placeholder { border-color: var(--rule-ink); color: var(--on-ink-faint); background: repeating-linear-gradient(var(--facet-angle-2), transparent 0 10px, rgba(255,255,255,0.035) 10px 20px); }

/* ── Footer ── */
.apx-footer { position: relative; background: var(--surface-ink-deep); color: var(--on-ink-strong); overflow: hidden; }
.apx-footer__glow { position: absolute; inset: -30%; pointer-events: none; filter: blur(40px); background: radial-gradient(40% 40% at 85% 18%, rgba(0,201,167,0.14), transparent 70%), radial-gradient(40% 40% at 15% 70%, rgba(46,200,232,0.10), transparent 70%); }
.apx-footer__divider { height: 2px; width: 120px; background: linear-gradient(100deg, #1A2744 0%, #2EC8E8 26%, #00C9A7 48%, #C74B8B 74%, #E8884A 100%); }
.apx-footer__social { display: inline-flex; align-items: center; gap: 0.5rem; font: 400 0.875rem/1.4 var(--font-ui); color: var(--on-ink-strong); text-decoration: none; }
.apx-footer__social:hover { color: var(--apex-teal-400, #2EC8E8); }
.apx-footer__bottom { position: relative; border-top: 1px solid rgba(255,255,255,0.14); }
.apx-footer__bottom-inner { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; padding: 1.25rem clamp(1.25rem, 4vw, 4.5rem); font: 400 0.75rem/1.4 var(--font-mono); color: rgba(244,246,248,0.44); }
.apx-footer__cols { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 4rem); }
@media (max-width: 860px) { .apx-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.apx-footer__wordmark { font: 800 clamp(3.5rem, 15vw, 14rem)/0.78 var(--font-display); letter-spacing: -0.05em; text-transform: uppercase; color: rgba(255,255,255,0.07); user-select: none; margin: 0; }

/* ═══════════════════════════════════════════════════════════════════
   REDUCED MOTION — desliga tudo, mantém conteúdo legível
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-anim], [data-anim] *, .apx-split .apx-inner, .apx-mask > * {
    transition: none !important; animation: none !important;
    opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important;
  }
  .apx-marquee__track, .apx-sweep-text, .apx-curtain { animation: none !important; }
  .apx-curtain { display: none; }
  .apx-sweep-text { -webkit-text-fill-color: currentColor; color: var(--apex-navy-500); background: none; }
  [data-parallax] { transform: none !important; }
}


/* ═══════════════ CAMADA DO SITE (Versão A — Papel de Estúdio) ═══════════════ */
:root { --facet-cut: clamp(24px, 3.4vw, 56px); }
body { overflow-x: hidden; }
.site-band-paper { background: var(--surface-base); }
.site-band-white { position: relative; background: var(--surface-raised); }
.site-skip { position: absolute; left: -9999px; top: 0; z-index: 300; padding: 0.875rem 1.25rem; background: var(--apex-navy-500); color: #fff; font: 600 0.875rem/1 var(--font-ui); border-radius: 0 0 10px 0; }
.site-skip:focus { left: 0; color: #fff; }

/* ── Header ── */
.site-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.875rem; }
.site-logo { display: inline-flex; align-items: center; }
.site-logo img { height: 28px; width: auto; }
.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.25rem); }
.site-nav__links { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); }
.site-burger { display: none; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid var(--rule); border-radius: 999px; background: none; cursor: pointer; }
.site-burger span { display: block; width: 18px; height: 1px; background: var(--ink-strong); position: relative; }
.site-burger span::before, .site-burger span::after { content: ""; position: absolute; left: 0; width: 18px; height: 1px; background: var(--ink-strong); transition: transform var(--dur-ui) var(--ease-ui); }
.site-burger span::before { top: -5px; }
.site-burger span::after { top: 5px; }
.site-burger[aria-expanded="true"] span { background: transparent; }
.site-burger[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.site-burger[aria-expanded="true"] span::after { transform: translateY(-5px) rotate(-45deg); }
@media (max-width: 900px) {
  .site-burger { display: inline-flex; }
  .site-nav { position: absolute; left: var(--shell-pad); right: var(--shell-pad); top: calc(100% + 8px); display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem 1.25rem 1.5rem; border: 1px solid var(--rule); border-radius: 24px; background: rgba(255,255,255,0.96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 18px 40px rgba(26,39,68,0.1); }
  .site-nav[data-open="true"] { display: flex; }
  .site-nav__links { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__links a { padding-block: 0.9rem; border-bottom: 1px solid var(--rule-soft); font-size: 1rem; }
  .site-nav .apx-btn { margin-top: 1.25rem; justify-content: center; }
}

/* ── Hero ── */
.site-hero { position: relative; overflow: hidden; padding-block: clamp(7.5rem, 14vw, 12rem) clamp(3rem, 6vw, 5rem); }
.site-hero__center { position: relative; display: grid; justify-items: center; text-align: center; gap: clamp(1.25rem, 2.4vw, 2rem); }
.site-hero__center .apx-lead { max-width: 58ch; }
.site-hero__after { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (max-width: 900px) { .site-hero__after { grid-template-columns: 1fr; } }
.site-hero__after .site-frame { height: 100%; min-height: clamp(240px, 34vw, 400px); }
.site-h1 { font: 800 var(--display-hero)/var(--leading-display) var(--font-display); letter-spacing: var(--tracking-display); margin: 0; max-width: 22ch; text-wrap: balance; }
.site-cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 0; }
.site-proof { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; max-width: 78ch; gap: 0.625rem 1rem; margin: clamp(0.5rem, 1.5vw, 1rem) 0 0; padding-top: 1.25rem; border-top: 1px solid var(--rule); font: 400 0.8125rem/1.5 var(--font-mono); color: var(--ink-soft); }
.site-proof strong { font-weight: 500; color: var(--ink-strong); }

/* Cartão do fundador */
.site-founder { display: grid; gap: 1rem; padding: clamp(1.25rem, 2.4vw, 1.75rem); border: 1px solid var(--rule); border-radius: 20px; background: var(--surface-raised); }
.site-avatar { display: grid; place-content: center; width: 64px; height: 64px; border-radius: 999px; background: repeating-linear-gradient(var(--facet-angle-2), transparent 0 8px, rgba(26,39,68,0.05) 8px 16px), var(--surface-sunken); border: 1px dashed var(--rule); font: 600 1.125rem/1 var(--font-display); letter-spacing: 0.04em; color: var(--ink-soft); }

/* ── Régua de seção ── */
.site-sec-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 5rem); align-items: end; }
@media (max-width: 900px) { .site-sec-head { grid-template-columns: 1fr; align-items: start; } }
.site-num { font: 300 clamp(3rem, 7vw, 5.5rem)/0.8 var(--font-display); letter-spacing: -0.04em; color: rgba(26,39,68,0.13); user-select: none; }

/* ── Dores ── */
.site-pain { display: grid; gap: 0.875rem; padding-top: 1.5rem; border-top: 2px solid var(--apex-navy-500); }
.site-pain p { font: 500 clamp(1.0625rem, 1.5vw, 1.375rem)/1.42 var(--font-ui); letter-spacing: -0.012em; color: var(--ink-strong); margin: 0; text-wrap: pretty; }

/* ── Método: índice numerado com hairlines ── */
.site-method { border-top: 1px solid var(--rule); margin-top: clamp(2rem, 4vw, 3rem); }
.site-step { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.15fr) auto; gap: var(--col-gap); align-items: baseline; padding-block: clamp(1.5rem, 2.8vw, 2.25rem); border-bottom: 1px solid var(--rule); transition: padding var(--dur-ui) var(--ease-out-expo), background var(--dur-ui) var(--ease-ui); }
.site-step:hover { background: var(--surface-raised); }
.site-step__price { font: 500 0.8125rem/1.4 var(--font-mono); color: var(--apex-teal-600); white-space: nowrap; }
@media (max-width: 900px) {
  .site-step { grid-template-columns: 3rem minmax(0, 1fr); gap: 0.5rem 1rem; }
  .site-step__price { grid-column: 2; }
}

/* ── Fichas de projeto ── */
.site-ficha { display: grid; gap: 0.875rem; padding-top: 1.25rem; border-top: 2px solid var(--apex-navy-500); }
.site-quote { margin: 0; }
.site-quote p { font: 500 clamp(1.375rem, 2.6vw, 2.25rem)/1.24 var(--font-display); letter-spacing: -0.028em; margin: 0; text-wrap: pretty; }
.site-quote footer { margin-top: 1.25rem; font: 500 0.8125rem/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }

/* ── Formulário ── */
.site-form { display: grid; gap: 1rem; }
.site-field { display: grid; gap: 0.5rem; }
.site-field label { font: 500 0.75rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-ink-soft); }
.site-field input, .site-field textarea { width: 100%; min-height: 54px; padding: 0.9rem 1.125rem; font: 400 1rem/1.5 var(--font-ui); color: var(--on-ink-strong); background: rgba(255,255,255,0.05); border: 1px solid var(--rule-ink); border-radius: 14px; transition: border-color var(--dur-ui) var(--ease-ui), background var(--dur-ui) var(--ease-ui); }
.site-field textarea { min-height: 104px; resize: vertical; }
.site-field input::placeholder, .site-field textarea::placeholder { color: rgba(244,246,248,0.45); }
.site-field input:focus, .site-field textarea:focus { border-color: var(--apex-teal-500); background: rgba(255,255,255,0.08); outline: none; }
.site-field input:focus-visible, .site-field textarea:focus-visible { outline: 2px solid var(--apex-teal-500); outline-offset: 2px; }
.site-field select { appearance: none; cursor: pointer; color: var(--on-ink-strong); background-color: rgba(255,255,255,0.05); background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23F4F6F8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), none; background-repeat: no-repeat; background-position: right 1.125rem center; padding-right: 2.75rem; }
.site-field select:invalid { color: rgba(244,246,248,0.45); }
.site-field select option { color: var(--apex-navy-500); background: var(--apex-white); }
.site-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 640px) { .site-form__grid { grid-template-columns: 1fr; } }
.site-btn-light { border-color: var(--apex-teal-500); background: var(--apex-teal-500); color: var(--apex-navy-800); --fill: var(--apex-white); }
.site-btn-light:hover, .site-btn-light:focus-visible { color: var(--apex-navy-800); }
.site-note { font: 400 0.8125rem/1.6 var(--font-mono); color: var(--on-ink-soft); margin: 0; }
.site-status { margin: 0; font: 400 0.875rem/1.6 var(--font-ui); color: var(--apex-teal-500); }

/* ── Footer ── */
.site-footer-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.site-footer-nav a { font: 500 0.875rem/1.4 var(--font-ui); color: var(--on-ink-soft); text-decoration: none; }
.site-footer-nav a:hover { color: var(--apex-white); }
/* ── Header como pílula flutuante sobre a hero ── */
html { scroll-padding-top: clamp(6rem, 12vw, 7.5rem); }
.apx-header { position: fixed; top: 0; left: 0; right: 0; background: transparent; border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.apx-header[data-hidden="true"] { transform: none; }
.site-head { width: min(var(--shell-max), 100% - 2 * var(--shell-pad)); margin: clamp(0.625rem, 1.4vw, 1rem) auto 0; padding: 0.625rem 0.75rem 0.625rem 1.25rem; border: 1px solid var(--rule); border-radius: 999px; background: rgba(255,255,255,0.72); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 10px 30px rgba(26,39,68,0.06); }

/* ══ Ritmo de referência: molduras, cards, faixa pílula, nav flutuante ══ */
@media (min-width: 901px) {
  .site-nav__links .apx-nav-item { white-space: nowrap; }
}
/* Textura pontilhada nas faixas claras */
.site-band-white { background-color: var(--surface-raised); background-image: radial-gradient(rgba(26,39,68,0.07) 1px, transparent 1px); background-size: 22px 22px; }

/* Moldura de imagem — placeholder marcado sobre fundo escuro texturizado */
.site-frame { position: relative; overflow: hidden; display: grid; place-content: center; gap: 0.5rem; text-align: center; padding: clamp(1.25rem, 3vw, 2rem); border-radius: 18px; background: var(--apex-navy-800); }
.site-frame::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(var(--facet-angle-2), transparent 0 12px, rgba(255,255,255,0.04) 12px 24px); }
.site-frame::after { content: ""; position: absolute; inset: -30%; background: var(--prism-glow); filter: blur(30px); opacity: 0.55; pointer-events: none; }
.site-frame__label { position: relative; z-index: 1; margin: 0; font: 400 0.8125rem/1.55 var(--font-mono); color: rgba(244,246,248,0.66); max-width: 42ch; }
.site-frame--wide { aspect-ratio: 21 / 9; }
.site-frame--43 { aspect-ratio: 4 / 3; }
.site-frame--tall { min-height: clamp(220px, 34vw, 380px); }
@media (max-width: 640px) { .site-frame--wide { aspect-ratio: 4 / 3; } }

/* Card de trabalho — moldura branca, imagem no topo, texto compacto */
.site-work { display: grid; gap: 1.25rem; padding: 10px 10px clamp(1.25rem, 2.4vw, 1.75rem); border: 1px solid var(--rule); border-radius: 24px; background: var(--surface-raised); transition: transform 420ms var(--ease-out-expo), border-color var(--dur-ui) var(--ease-ui), box-shadow 420ms var(--ease-out-expo); }
.site-work:hover { transform: translateY(-4px); border-color: var(--apex-teal-500); box-shadow: 0 18px 48px rgba(26,39,68,0.09); }
.site-work__body { display: grid; gap: 0.75rem; padding-inline: clamp(0.5rem, 1.4vw, 1rem); }

/* Faixa pílula de CTA intermediária */
.site-pillband { display: flex; align-items: center; justify-content: space-between; gap: clamp(1.25rem, 3vw, 2.5rem); padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 4vw, 3rem); border-radius: 999px; background: var(--apex-teal-500); color: var(--apex-navy-800); }
.site-pillband p { margin: 0; }
.site-round { flex: none; display: grid; place-content: center; width: 64px; height: 64px; border-radius: 999px; background: var(--apex-navy-500); color: var(--apex-white); text-decoration: none; font-size: 1.25rem; transition: transform 420ms var(--ease-out-expo); }
.site-round:hover { transform: translateX(4px); color: var(--apex-white); }
@media (max-width: 760px) { .site-pillband { flex-direction: column; align-items: flex-start; border-radius: 28px; text-align: left; } }

/* Acento facetado atrás do cartão do fundador */
.site-founder { position: relative; isolation: isolate; }
.site-founder::before { content: ""; position: absolute; right: -18px; bottom: -18px; width: 130px; height: 130px; z-index: -1; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: var(--sweep-cool); opacity: 0.18; }

/* WhatsApp flutuante */
.site-wa { position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 80; display: grid; place-content: center; width: 58px; height: 58px; border-radius: 999px; background: var(--apex-navy-500); color: var(--apex-white); text-decoration: none; box-shadow: 0 14px 34px rgba(26,39,68,0.3); transition: transform var(--dur-ui) var(--ease-out-expo), background var(--dur-ui) var(--ease-ui); }
.site-wa:hover { transform: scale(1.06); background: var(--apex-teal-600); color: var(--apex-white); }
.site-wa svg { width: 26px; height: 26px; fill: currentColor; }

/* ── Preço velado: desperta curiosidade, revela "Consulte-nos" ── */
.site-price { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.site-price__v { font: 500 0.8125rem/1.4 var(--font-mono); color: #007A66; filter: blur(5px); user-select: none; }
.site-price__out { display: none; font: 500 0.8125rem/1.4 var(--font-mono); color: #007A66; white-space: nowrap; }
.site-price[data-revealed="true"] .site-price__v { display: none; }
.site-price[data-revealed="true"] .site-price__out { display: block; }
.site-price[data-revealed="true"] .site-price__btn { display: none; }
.site-price__btn { display: inline-flex; align-items: center; min-height: 34px; padding: 0 0.875rem; font: 500 0.75rem/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-strong); background: none; border: 1px solid var(--rule); border-radius: 999px; cursor: pointer; white-space: nowrap; transition: border-color var(--dur-ui) var(--ease-ui), color var(--dur-ui) var(--ease-ui); }
.site-price__btn:hover { border-color: var(--apex-teal-500); color: #007A66; }

/* ── Contraste AA na camada do site (não altera tokens do DS) ── */
.apx-eyebrow { color: #007A66; }
.site-step__price { color: #007A66; }
.apx-index, .apx-meta { color: var(--ink-soft); line-height: 1.5; }
.site-num, .apx-footer__wordmark { color: rgba(26,39,68,0.13); }
.apx-footer__wordmark { color: rgba(255,255,255,0.07); }
.apx-on-ink .apx-index, .apx-on-ink .apx-meta { color: var(--on-ink-soft); }