/* ==========================================================================
   Trinity | Página de links
   Depende de /assets/css/tokens.css
   Celular primeiro (bio do Instagram). No PC tudo cabe numa tela, sem rolagem.
   ========================================================================== */

/* ---------- Fundo vivo (tela inteira) ---------- */
.bg {
  position: fixed;
  inset: 0;
  z-index: var(--z-bg);
  pointer-events: none;
  overflow: hidden;
  background: var(--bg);
}

.aura { position: absolute; border-radius: 50%; will-change: transform; }
.aura--a {
  width: 120vmax;
  height: 120vmax;
  top: -72vmax;
  right: -62vmax;
  background: radial-gradient(circle, rgba(245, 130, 32, 0.22), transparent 60%);
}
.aura--b {
  width: 110vmax;
  height: 110vmax;
  bottom: -72vmax;
  left: -62vmax;
  background: radial-gradient(circle, rgba(52, 88, 210, 0.12), transparent 60%);
}

/* Grade de pontos sutil (papel "digital"), mais visível no centro */
.dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(6, 19, 62, 0.10) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 85%);
  mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 85%);
}
/* Rede de conexões desenhada em canvas (links.js) */
.net { position: absolute; inset: 0; width: 100%; height: 100%; }

.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Layout (celular) ---------- */
.page {
  position: relative;
  z-index: var(--z-content);
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: max(var(--space-4), env(safe-area-inset-top)) var(--space-4) max(var(--space-6), env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "hero" "links" "foot" "share";
}

/* Celular: compartilhar fica no fim da página, centralizado e com texto */
.topbar { grid-area: share; justify-self: center; margin-top: var(--space-5); }
.topbar .icon-btn--share { width: auto; gap: 8px; padding: 0 16px 0 14px; display: inline-flex; font-size: var(--text-sm); font-weight: 600; }
.topbar .icon-btn--share .icon-btn-label { display: inline; }

/* Celular: identidade centralizada */
.hero { text-align: center; }
.hero-logo { display: block; width: fit-content; margin: 0 auto; }
.hero .hero-title, .hero .hero-sub { margin-left: auto; margin-right: auto; }
.foot { text-align: center; }
.foot .foot-line { margin-left: auto; margin-right: auto; }
.hero { grid-area: hero; container-type: inline-size; }
.links { grid-area: links; margin-top: var(--space-5); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.foot { grid-area: foot; margin-top: var(--space-6); }

/* ---------- Layout (PC: uma tela, sem rolagem) ---------- */
@media (min-width: 1100px) {
  html, body { height: 100%; }
  .page {
    max-width: 1440px;
    height: 100dvh;
    min-height: 600px;
    padding: clamp(24px, 4.5vh, 48px) clamp(40px, 5vw, 88px);
    grid-template-columns: minmax(0, 1fr) minmax(460px, 540px);
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "hero links"
      "foot links";
    column-gap: clamp(40px, 5vw, 96px);
  }
  .hero { align-self: center; }
  .links { grid-row: 1 / 3; align-self: center; margin: 0; gap: clamp(8px, 1.4vh, 12px); }
  .foot { margin: 0; align-self: end; }
  /* Compartilhar fica no rodapé da coluna esquerda */
  .topbar { position: static; grid-area: foot; justify-self: end; align-self: end; margin: 0; }
  /* PC: duas colunas, texto alinhado à coluna */
  .hero, .foot { text-align: left; }
  .hero-logo { margin: 0; }
  .hero .hero-title, .hero .hero-sub, .foot .foot-line { margin-left: 0; margin-right: 0; }
  .topbar .icon-btn--share { width: auto; gap: 8px; padding: 0 16px 0 14px; display: inline-flex; font-size: var(--text-sm); font-weight: 600; }
  .topbar .icon-btn--share .i { font-size: 17px; }
  .topbar .icon-btn--share .icon-btn-label { display: inline; }
}

/* ---------- Liquid glass ----------
   Aproximação web do material da Apple (não existe CSS oficial):
   preenchimento translúcido + desfoque + brilho especular + borda de luz. */
.card,
.icon-btn {
  background: var(--glass-shine), var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-rim), var(--shadow-md);
}
/* Vidro mais leve em telas de toque: o custo do desfoque cresce com o raio */
@media (pointer: coarse) {
  .card, .icon-btn { -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%); }
}
@media (prefers-reduced-transparency: reduce) {
  .card, .icon-btn { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ---------- Compartilhar ---------- */
.controls { display: flex; gap: var(--space-2); }
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: var(--radius-pill);
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
  box-shadow: var(--glass-rim), var(--shadow-sm);
  transition: transform var(--dur-slow) var(--ease-spring);
}
.icon-btn-label { display: none; }
.icon-btn:active { transform: scale(0.9); transition-duration: var(--dur-fast); }

/* ---------- Hero ---------- */
.hero-logo { display: inline-block; border-radius: var(--radius-block); }
.logo { width: 150px; height: auto; overflow: visible; }
/* O logo mantém sempre as cores originais da IDV */
.logo .ink { fill: var(--brand-navy); }
.logo .acc { fill: var(--brand-orange); }
.logo path { transform-box: fill-box; transform-origin: center; }

.hero-title {
  margin: var(--space-5) 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 0.95rem + 2.6vw, 3rem); /* reserva para navegadores sem container query */
  font-size: clamp(1.5rem, 9cqi, 3.75rem);          /* a linha "feita de conexões." ocupa ~85% da coluna */
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.035em;
  word-spacing: 0;
  text-wrap: balance;
}
.hero-title em { font-style: normal; color: var(--brand-orange); }
/* Sempre duas linhas: "Contabilidade" / "feita de conexões." */
.hero-title .line { display: block; white-space: nowrap; }

.hero-sub {
  margin: var(--space-3) 0 0;
  max-width: 36ch;
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--text-2);
  text-wrap: balance;
}

@media (min-width: 1100px) {
  .logo { width: 220px; }
  .hero-title { margin-top: clamp(24px, 5vh, 48px); font-size: min(3.75rem, 9cqi, 6.8vh); }
  .hero-sub { max-width: 44ch; margin-top: var(--space-5); font-size: var(--text-lg); font-weight: 300; }
}

/* ---------- Cards (base) ---------- */
.card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-surface);
  font: inherit;
  text-align: left;
  color: var(--text);
  transition: transform var(--dur-slow) var(--ease-spring), box-shadow var(--dur-slow) var(--ease-out);
}
/* Luz quente e discreta que acompanha o cursor (sem branco estourado) */
.card[data-spot]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), var(--spot, rgba(245, 130, 32, 0.10)), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
@media (hover: hover) {
  .card[data-spot]:hover { transform: translateY(-2px); box-shadow: var(--glass-rim), var(--shadow-lg); }
  .card[data-spot]:hover::before { opacity: 1; }
}
/* Toque "elástico", como o vidro líquido da Apple */
.card[data-spot]:active { transform: scale(0.97); transition: transform var(--dur-fast) var(--ease-out); }

/* A onda flutua sobre o card e nunca entra no layout */
.card > .ripple, .btn > .ripple, .ripple {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.12;
  pointer-events: none;
  transform: scale(0);
  animation: ripple 700ms var(--ease-out) forwards;
}

/* ---------- Consultoria (vidro navy) ---------- */
.feature {
  display: grid;
  align-content: start;
  padding: var(--space-5);
  background:
    radial-gradient(110% 80% at 100% 110%, rgba(245, 130, 32, 0.32), transparent 55%),
    radial-gradient(120% 70% at 10% 0%, rgba(255, 255, 255, 0.12), transparent 45%),
    var(--feature-bg);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--feature-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), var(--shadow-lg);
  --spot: rgba(245, 130, 32, 0.18);
}
.feature > :not(.feature-sheen):not(.ripple):not(.px-layer) { position: relative; z-index: 1; }

.feature-kicker { font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-orange); }
.feature-title {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.375rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;
  word-spacing: 0;
  text-wrap: balance;
}
.feature-title strong { font-weight: 500; }
.feature-sub { margin-top: 6px; font-size: 0.875rem; font-weight: 300; color: var(--feature-text-2); text-wrap: balance; }

.feature-cta {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  height: 46px;
  margin-top: var(--space-4);
  padding: 0 6px 0 var(--space-5);
  border-radius: var(--radius-pill);
  background: radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, 0.42), transparent 50%), var(--brand-orange);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 10px 24px -10px rgba(245, 130, 32, 0.8);
  color: var(--brand-navy);
  font-size: var(--text-base);
  font-weight: 600;
  white-space: nowrap;
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0);
  transition: transform var(--dur-slow) var(--ease-spring);
}
.feature-cta-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand-navy);
  color: var(--brand-orange);
  font-size: 17px;
  overflow: hidden;
}
@media (hover: hover) {
  .feature:hover .feature-cta-icon .i { animation: arrow-out 560ms var(--ease-out); }
}
/* Pixels vivos nos cards coloridos (canvas criado pelo links.js) */
.card > .px-layer { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }

.feature-sheen {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.14) 48%, rgba(255, 255, 255, 0.03) 56%, transparent 64%);
  transform: translateX(-110%);
}

/* ---------- WhatsApp + Indique ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: inherit; }
@media (max-width: 359px) { .duo { grid-template-columns: 1fr; } }

.tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 132px;
  padding: var(--space-4);
  cursor: pointer;
}
.tile > :not(.ripple):not(.px-layer) { position: relative; z-index: 1; }
.tile-top { display: flex; align-items: flex-start; justify-content: space-between; }
.tile-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-block);
  background: var(--accent-soft);
  color: var(--brand-orange);
  font-size: 23px;
  transition: transform var(--dur-slow) var(--ease-spring);
}
.tile-arrow { font-size: 17px; color: var(--text-3); transition: transform var(--dur-slow) var(--ease-spring); }
.tile-title { display: block; font-size: var(--text-md); font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.tile-sub { display: block; margin-top: 3px; font-size: var(--text-sm); font-weight: 400; line-height: 1.35; color: var(--text-2); text-wrap: balance; }

/* Selo de atendimento com as cores da marca */
.tile-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: var(--radius-pill);
  background: rgba(6, 19, 62, 0.06);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--text-2);
  white-space: nowrap;
}
.status-dot { position: relative; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
.tile-status[data-state="open"] { background: var(--accent-soft); color: var(--brand-navy); }
.tile-status[data-state="open"] .status-dot { background: var(--brand-orange); }
.tile-status[data-state="open"] .status-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--brand-orange);
  animation: ping 2.2s var(--ease-out) infinite;
}

@media (hover: hover) {
  .tile:hover .tile-icon { transform: rotate(-8deg) scale(1.06); }
  .tile:hover .tile-arrow { transform: translate(3px, -3px); color: var(--text); }
  #open-refer:hover .tile-arrow { transform: translateX(4px); }
}

.tile--accent {
  background: radial-gradient(100% 70% at 0% 0%, rgba(255, 255, 255, 0.4), transparent 55%), var(--brand-orange);
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--brand-navy);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 14px 30px -14px rgba(245, 130, 32, 0.75);
  --spot: rgba(255, 255, 255, 0.22);
}
.tile--accent .tile-icon { background: rgba(6, 19, 62, 0.10); color: var(--brand-navy); }
.tile--accent .tile-sub { color: rgba(6, 19, 62, 0.82); }
.tile--accent .tile-arrow { color: rgba(6, 19, 62, 0.75); }

/* ---------- Parcerias ---------- */
.partner { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 12px var(--space-4); }
.partner > :not(.ripple):not(.px-layer) { position: relative; z-index: 1; }
.partner-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--brand-navy);
  color: var(--brand-orange);
  font-size: 24px;
  transition: transform var(--dur-slow) var(--ease-spring);
}
.partner-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.partner-title { font-size: var(--text-md); font-weight: 700; letter-spacing: -0.01em; }
.partner-sub { margin-top: 1px; font-size: var(--text-sm); line-height: 1.35; color: var(--text-2); text-wrap: balance; }
.partner-go {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--brand-orange);
  font-size: 16px;
  transition: transform var(--dur-slow) var(--ease-spring);
}
@media (hover: hover) {
  .partner:hover .partner-icon { transform: rotate(-8deg) scale(1.05); }
  .partner:hover .partner-go { transform: translate(2px, -2px); }
}

/* ---------- Redes sociais ---------- */
.social { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: inherit; }
.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  padding: 0 var(--space-2);
  border-radius: 16px;
  font-size: var(--text-sm);
  font-weight: 500;
}
.social-link > :not(.ripple):not(.px-layer) { position: relative; z-index: 1; }
.social-link .i { font-size: 22px; color: var(--brand-orange); transition: transform var(--dur-slow) var(--ease-spring); }
@media (hover: hover) {
  .social-link:hover .i { transform: scale(1.15) rotate(-6deg); }
}

/* ---------- Salvar contato / site ---------- */
.utility { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: inherit; }
.mini { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 8px 12px; border-radius: 16px; cursor: pointer; }
.mini > :not(.ripple):not(.px-layer) { position: relative; z-index: 1; }
.mini-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--brand-orange);
  font-size: 19px;
}
.mini-text { display: flex; flex-direction: column; min-width: 0; }
.mini-title { font-size: 0.875rem; font-weight: 700; line-height: 1.25; }
.mini-sub { overflow: hidden; font-size: 12px; color: var(--text-2); white-space: nowrap; text-overflow: ellipsis; }
.mini--soon { cursor: default; }
.mini--soon .mini-icon { background: var(--surface-2); color: var(--text-3); }
.mini--soon .mini-sub {
  align-self: flex-start;
  margin-top: 2px;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--brand-orange);
  color: var(--brand-navy);
  font-size: 11px;
  font-weight: 600;
}

/* ---------- Rodapé ---------- */
.foot-line { margin: 0; max-width: 30ch; text-wrap: balance; font-size: var(--text-base); font-weight: 300; line-height: 1.35; letter-spacing: -0.01em; color: var(--text-2); }
.foot-meta { margin: 6px 0 0; font-size: var(--text-xs); line-height: 1.5; color: var(--text-3); }

/* ---------- Altura curta no PC (notebooks 1366x768, 1280x720) ---------- */
@media (min-width: 1100px) and (max-height: 760px) {
  .logo { width: 180px; }
  .hero-title { font-size: min(3.25rem, 9cqi, 6.2vh); }
  .feature { padding: var(--space-4) var(--space-5); }
  .feature-cta { margin-top: var(--space-3); }
  .tile { min-height: 112px; gap: var(--space-2); padding: 12px var(--space-4); }
  .partner { min-height: 64px; padding-block: 8px; }
  .social-link { min-height: 48px; }
  .mini { min-height: 52px; }
}

/* ---------- Botões ---------- */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 52px;
  padding: 0 var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: var(--text-base);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn .i { font-size: 18px; transition: transform var(--dur-slow) var(--ease-spring); }
.btn:active { transform: scale(0.97); }
.btn[disabled] { opacity: 0.7; cursor: progress; }
.btn--primary {
  background: radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, 0.4), transparent 50%), var(--brand-orange);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  color: var(--brand-navy);
}
.btn--ghost { background: var(--surface-2); color: var(--text); border-color: var(--line); }
@media (hover: hover) {
  .btn--primary:hover .i { transform: translateX(3px); }
  .btn--ghost:hover { border-color: var(--line-strong); }
}
.text-btn {
  display: block;
  margin: var(--space-4) auto 0;
  padding: var(--space-2) var(--space-3);
  border: 0;
  background: none;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---------- Sheet (indicação) ---------- */
.sheet {
  width: 100%;
  max-width: 520px;
  max-height: min(92dvh, 900px);
  margin: auto auto 0;
  padding: 0;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 28px 28px 0 0;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  overscroll-behavior: contain;
}
.sheet[open] { display: flex; flex-direction: column; }
.sheet::backdrop { background: rgba(6, 19, 62, 0.3); -webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%); }
@media (min-width: 640px) { .sheet { margin: auto; border-bottom: 1px solid var(--line); border-radius: 28px; } }

.sheet-head { position: relative; flex-shrink: 0; display: flex; justify-content: center; height: 56px; padding-top: 10px; touch-action: none; cursor: grab; }
.sheet-grip { width: 40px; height: 5px; border-radius: var(--radius-pill); background: var(--line-strong); }
.sheet-close { position: absolute; top: 10px; right: 12px; }
@media (min-width: 640px) { .sheet-grip { visibility: hidden; } .sheet-head { cursor: default; } }

.sheet-body { overflow-y: auto; padding: 0 var(--space-6) max(var(--space-8), env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.sheet-kicker { margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.sheet-kicker::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 2px; background: var(--brand-orange); vertical-align: 0; }
.sheet-title {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.15rem + 1vw, 1.75rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.035em;
  word-spacing: 0;
  text-wrap: balance;
  outline: none;
}
.sheet-title em { font-style: normal; color: var(--brand-orange); }
.sheet-lead { margin: var(--space-3) 0 0; color: var(--text-2); text-wrap: balance; }

.steps { display: grid; gap: var(--space-4); margin: var(--space-6) 0; padding: 0; list-style: none; }
.step { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: center; }
.step strong { display: block; font-size: 0.875rem; font-weight: 500; }
.step span > span { display: block; font-size: var(--text-sm); color: var(--text-2); }
.step-icon { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-block); background: var(--accent-soft); color: var(--brand-orange); font-size: 20px; }
.step:not(:last-child) .step-icon::after {
  content: "";
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  width: 2px;
  height: calc(var(--space-4) - 6px);
  margin-left: -1px;
  border-radius: 2px;
  background: var(--brand-orange);
  opacity: 0.5;
}

/* ---------- Formulário ---------- */
.form { display: grid; gap: var(--space-4); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.field { display: grid; gap: 6px; align-content: start; }
.field label { font-size: var(--text-sm); font-weight: 500; }
.opt { font-weight: 400; color: var(--text-3); }
.field-row { display: grid; gap: var(--space-4); }
@media (min-width: 420px) { .field-row { grid-template-columns: 1fr 1fr; gap: var(--space-3); } }
.field input {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-block);
  background: var(--surface-2);
  color: var(--text);
  font-size: 16px; /* evita zoom no iOS */
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.field input::placeholder { color: var(--text-3); }
.field input:focus { outline: none; border-color: var(--brand-orange); box-shadow: 0 0 0 4px var(--accent-soft); }
.field input[aria-invalid="true"] { border-color: var(--danger); }
.field input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 18%, transparent); }
.field-error, .form-error { margin: 0; font-size: 12.5px; font-weight: 500; color: var(--danger); }
.field-error:empty, .form-error:empty { display: none; }
.form-note { margin: calc(var(--space-1) * -1) 0 0; font-size: 12.5px; color: var(--text-3); }

/* ---------- Resultado da indicação ---------- */
.done-badge { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--space-5); border-radius: 18px; background: var(--brand-orange); color: var(--brand-navy); font-size: 28px; }
.linkbox { display: flex; align-items: center; gap: 10px; margin-top: var(--space-6); padding: 6px 6px 6px 14px; border: 1px dashed var(--line-strong); border-radius: 16px; background: var(--surface-2); color: var(--text-2); font-size: 18px; }
.linkbox-url { flex: 1; min-width: 0; overflow: hidden; font-size: 0.875rem; font-weight: 500; color: var(--text); white-space: nowrap; text-overflow: ellipsis; }
.linkbox-copy {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: var(--brand-navy);
  color: #FCFCFD;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
}
.linkbox-copy .i { font-size: 16px; }
.linkbox-copy:active { transform: scale(0.95); }
.callout { display: grid; gap: var(--space-3); margin: var(--space-4) 0 var(--space-3); padding: var(--space-4); border-radius: 18px; background: var(--accent-soft); }
.callout p { margin: 0; font-size: 0.875rem; color: var(--text); }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: max(var(--space-6), env(safe-area-inset-bottom));
  z-index: var(--z-toast);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 32px);
  padding: 12px 18px 12px 14px;
  border-radius: var(--radius-pill);
  background: rgba(6, 19, 62, 0.88);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  color: #FCFCFD;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), var(--shadow-lg);
  font-size: 0.875rem;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 16px) scale(0.96);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-spring);
}
.toast .i { font-size: 18px; color: var(--brand-orange); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* Ordem da entrada (atributos em vez de style inline, para a CSP não precisar de 'unsafe-inline') */
.sprite { display: none; }
[data-d="0"] { --d: 0; } [data-d="1"] { --d: 1; } [data-d="2"] { --d: 2; }
[data-d="3"] { --d: 3; } [data-d="4"] { --d: 4; } [data-d="5"] { --d: 5; }
[data-d="6"] { --d: 6; } [data-d="7"] { --d: 7; } [data-d="8"] { --d: 8; }
[data-d="9"] { --d: 9; } [data-d="10"] { --d: 10; }
[data-i="0"] { --i: 0; } [data-i="1"] { --i: 1; } [data-i="2"] { --i: 2; }
[data-i="3"] { --i: 3; } [data-i="4"] { --i: 4; } [data-i="5"] { --i: 5; }
[data-i="6"] { --i: 6; }

/* ==========================================================================
   Movimento
   ========================================================================== */
@keyframes ping { 0% { transform: scale(1); opacity: 0.6; } 80%, 100% { transform: scale(2.8); opacity: 0; } }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }
@keyframes arrow-out {
  0% { transform: translate(0, 0); }
  45% { transform: translate(140%, -140%); }
  46% { transform: translate(-140%, 140%); }
  100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Fundo: luzes respirando (a rede se move via canvas) */
  .aura--a { animation: aura-a 20s var(--ease-in-out) infinite alternate; }
  .aura--b { animation: aura-b 24s var(--ease-in-out) infinite alternate; }
  @keyframes aura-a { to { transform: translate(-16vmax, 12vmax) scale(1.12); } }
  @keyframes aura-b { to { transform: translate(14vmax, -14vmax) scale(1.15); } }

  /* Entrada: montagem da marca */
  .js .lg-mark-n,
  .js .lg-mark-o,
  .js .lg-l,
  .js .lg-sub,
  .js .reveal { opacity: 0; }

  .js.is-in .lg-mark-n { animation: piece-n 900ms var(--ease-spring) 80ms both; }
  .js.is-in .lg-mark-o { animation: piece-o 900ms var(--ease-spring) 180ms both; }
  .js.is-in .lg-l { animation: letter 720ms var(--ease-out) both; animation-delay: calc(320ms + var(--i) * 55ms); }
  .js.is-in .lg-sub { animation: fade 700ms var(--ease-out) 760ms both; }
  .js.is-in .reveal { animation: rise 820ms var(--ease-out) both; animation-delay: calc(380ms + var(--d, 0) * 60ms); }
  .js.is-in .feature-sheen { animation: sheen 1400ms var(--ease-in-out) 1400ms both; }

  @keyframes piece-n { from { opacity: 0; transform: translate(-60%, -90%) rotate(-14deg); } to { opacity: 1; transform: none; } }
  @keyframes piece-o { from { opacity: 0; transform: translate(70%, -60%) rotate(16deg); } to { opacity: 1; transform: none; } }
  @keyframes letter { from { opacity: 0; transform: translateY(55%); } to { opacity: 1; transform: none; } }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes rise { from { opacity: 0; transform: translateY(16px) scale(0.985); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
  @keyframes sheen { from { transform: translateX(-110%); } to { transform: translateX(110%); } }

  /* Sheet */
  .sheet[open] { animation: sheet-up 560ms var(--ease-out); }
  .sheet[open]::backdrop { animation: fade 320ms var(--ease-out); }
  .sheet.is-closing { animation: sheet-down 320ms var(--ease-in-out) forwards; }
  .sheet.is-closing::backdrop { animation: fade 320ms var(--ease-out) reverse forwards; }
  .sheet[open] .view:not([hidden]) > * { animation: rise 640ms var(--ease-out) both; }
  .sheet[open] .view:not([hidden]) > :nth-child(2) { animation-delay: 50ms; }
  .sheet[open] .view:not([hidden]) > :nth-child(3) { animation-delay: 100ms; }
  .sheet[open] .view:not([hidden]) > :nth-child(4) { animation-delay: 150ms; }
  .sheet[open] .view:not([hidden]) > :nth-child(n+5) { animation-delay: 200ms; }
  .done-badge { animation: pop 700ms var(--ease-spring) both !important; }

  @keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
  @keyframes sheet-down { to { transform: translateY(100%); } }
  @keyframes pop { from { transform: scale(0.3) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }

  @media (min-width: 640px) {
    @keyframes sheet-up { from { opacity: 0; transform: translateY(28px) scale(0.97); } to { opacity: 1; transform: none; } }
    @keyframes sheet-down { to { opacity: 0; transform: translateY(20px) scale(0.98); } }
  }
}

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