/* ═══════════════════════════════════════════════════════════════
   X-DECODE · página de artigo individual
   
   • Tema: respeita PrefsMenu (light/dark/auto). Usa os mesmos
     tokens que AVATAR — flipam via `.theme-dark` no body.
   • Accent: magenta editorial (override local de --accent).
   • Type pairing: Instrument Serif (display) + Geist (UI/body) +
     Geist Mono (metadata/labels).
   • Escopo: tudo prefixado .decode-page > .dec-*
   ═══════════════════════════════════════════════════════════════ */

/* ───── Tokens locais (override sobre tokens globais) ───── */
/* barra do dono do take (autor vendo o próprio take publicado) */
.dec-ownerbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; max-width: 720px; margin: 12px auto 0; padding: 10px 16px; border-radius: 12px; border: 1px solid color-mix(in oklch, var(--accent) 32%, transparent); background: color-mix(in oklch, var(--accent) 9%, transparent); }
.dec-ownerbar-txt { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-mute); }
.dec-ownerbar-edit { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 999px; background: var(--accent); color: oklch(0.99 0 0); font-size: 13px; font-weight: 600; text-decoration: none; transition: filter .14s; }
.dec-ownerbar-edit:hover { filter: brightness(1.08); }

.decode-page {
  /* Azul cobalto editorial — hue 260, distinto do cyan (200) do HUB,
     do rosa (0) do AVATAR e do laranja (30) do FLOW. */
  --accent: oklch(0.55 0.22 260);
  --accent-strong: oklch(0.45 0.24 260);
  --accent-soft: oklch(0.80 0.10 260);
  --accent-bg: oklch(0.96 0.04 260);

  /* Editorial type tokens */
  --font-serif: "Instrument Serif", "Iowan Old Style", "Charter", Georgia, serif;

  /* Page shell — same shape as profile-page */
  background: var(--bg-base);
  color: var(--text);
  border-radius: var(--radius-xl, 24px);
  /* CLIP-PATH em vez de overflow: hidden — clipa visualmente nas
     bordas arredondadas SEM quebrar position: sticky dos filhos. */
  clip-path: inset(0 round var(--radius-xl, 24px));
  position: relative;
  width: 100%;
  min-height: 100%;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-soft);
}

/* Dark-mode cobalto — mais luminoso pra sustentar contraste sobre fundo escuro */
.theme-dark .decode-page {
  --accent: oklch(0.72 0.20 260);
  --accent-strong: oklch(0.80 0.22 260);
  --accent-soft: oklch(0.45 0.20 260);
  --accent-bg: oklch(0.28 0.14 260);
}


/* ───── Site-header section gradient (DECODE = magenta sweep) ── */
.decode-page .site-header-section {
  background-image: linear-gradient(
    110deg,
    var(--text) 0%,
    var(--text) 40%,
    var(--accent) 50%,
    var(--text) 60%,
    var(--text) 100%
  );
  background-size: 260% 100%;
  background-position: 100% 0;
}
.decode-page .site-header-section:hover { background-position: 0 0; }
.theme-dark .site-header-section:hover { background-position: 0 0; }
.decode-page .section-switcher-item.is-current {
  background: linear-gradient(180deg, oklch(0.97 0.04 260), oklch(0.96 0.03 260));
  border-color: oklch(0.84 0.10 260);
}
.theme-dark .decode-page .section-switcher-item.is-current {
  background: linear-gradient(180deg, oklch(0.30 0.14 260), oklch(0.26 0.12 260));
  border-color: oklch(0.55 0.20 260);
}
.decode-page .section-switcher-here,
.decode-page .mobile-menu-section-item.is-current .mobile-menu-section-here {
  border-color: oklch(0.84 0.10 260);
  color: var(--accent);
}
.theme-dark .decode-page .section-switcher-here {
  border-color: oklch(0.55 0.20 260);
}

/* URL slug accent */
.decode-page .urlbar-slug { color: var(--accent); }


/* ═══════════════════════════════════════════════════════════════
   1 · HERO (full-bleed, otimizado p/ Google Discover)
   ═══════════════════════════════════════════════════════════════ */

.dec-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(32px, 4vw, 64px) clamp(28px, 5vw, 80px) clamp(36px, 4vw, 68px);
  min-height: clamp(300px, 42vh, 480px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: oklch(0.98 0.005 280);
}

/* Cover layers (gradient + mesh + stripes + grain + vignette) */
.dec-hero-cover {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.dec-hero-cover-img,
.dec-hero-cover-grad,
.dec-hero-cover-mesh,
.dec-hero-cover-stripes,
.dec-hero-cover-grain,
.dec-hero-cover-vignette { position: absolute; inset: 0; }
.dec-hero-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

.dec-hero-cover-mesh {
  background:
    radial-gradient(1100px 600px at 88% -10%, oklch(0.55 0.22 260 / 0.32), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, oklch(0.25 0.18 250 / 0.55), transparent 60%);
  mix-blend-mode: screen;
}

.dec-hero-cover-stripes {
  background: repeating-linear-gradient(
    135deg,
    transparent 0 22px,
    oklch(1 0 0 / 0.025) 22px 23px
  );
  mix-blend-mode: overlay;
  opacity: 0.6;
}

.dec-hero-cover-grain {
  opacity: 0.4;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/></filter><rect width='80' height='80' filter='url(%23n)'/></svg>");
}

.dec-hero-cover-vignette {
  /* Wash cobalto reforçado — a foto fica como silhueta sutil atrás,
     foco vai pro texto. Para deixar a foto mais visível, baixar
     os alphas; para mais cobalto, subir. */
  background:
    linear-gradient(180deg, transparent 0%, transparent 25%, oklch(0.08 0.06 260 / 0.75) 100%),
    linear-gradient(90deg, oklch(0.10 0.08 260 / 0.70) 0%, transparent 65%),
    linear-gradient(oklch(0.18 0.15 260 / 0.78), oklch(0.18 0.15 260 / 0.78));
}

.dec-hero-cover-placeholder {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: oklch(1 0 0 / 0.25);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  padding: 8px 14px;
  border: 1px dashed oklch(1 0 0 / 0.18);
  border-radius: 999px;
  pointer-events: none;
  white-space: nowrap;
}

/* Hero content */
.dec-hero-inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

.dec-meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: oklch(1 0 0 / 0.85);
  margin-bottom: clamp(20px, 3vw, 32px);
}
.dec-meta-cat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 9px;
  background: oklch(0.89 0.055 256);
  color: oklch(0.32 0.07 262);
  border-radius: 999px;
  text-decoration: none;
  letter-spacing: 0.14em;
  font-weight: 600;
  transition: transform 0.12s ease, box-shadow 0.18s ease;
  box-shadow: 0 4px 14px -6px oklch(0.20 0.02 260 / 0.45);
}
.dec-meta-cat:hover { transform: translateY(-1px); }
.dec-meta-cat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: oklch(0.98 0 0);
  opacity: 0.7;
}
/* Bolinha "ao vivo" — PADRÃO ÚNICO do site, igual à flow-gallery (gMoreBlue/Red):
   anel que irradia + glow constante. take = cobalto (#2c44d6); video-take =
   vermelho (#e5484d). NÃO é blink de opacidade — é o ring radiante. */
.dec-meta-cat-net { margin-left: 5px; font-weight: 600; opacity: 0.9; font-size: 0.8em; letter-spacing: 0.08em; }
.dec-meta-cat.is-online .dec-meta-cat-dot { background: #2c44d6; box-shadow: 0 0 7px #2c44d6; opacity: 1; animation: dec-dot-pulse-blue 1.8s ease-out infinite; }
.dec-meta-cat.is-online.is-videotake .dec-meta-cat-dot { background: #e5484d; box-shadow: 0 0 7px #e5484d; animation: dec-dot-pulse-red 1.8s ease-out infinite; }
.dec-meta-cat.is-offline .dec-meta-cat-dot { background: oklch(0.68 0.008 260); box-shadow: none; opacity: 1; animation: none; }
.dec-meta-cat.is-offline .dec-meta-cat-net { opacity: 0.72; }
@keyframes dec-dot-pulse-blue { 0% { box-shadow: 0 0 0 0 rgba(44,68,214,.6), 0 0 7px #2c44d6; } 70% { box-shadow: 0 0 0 6px rgba(44,68,214,0), 0 0 7px #2c44d6; } 100% { box-shadow: 0 0 0 0 rgba(44,68,214,0), 0 0 7px #2c44d6; } }
@keyframes dec-dot-pulse-red { 0% { box-shadow: 0 0 0 0 rgba(229,72,77,.6), 0 0 7px #e5484d; } 70% { box-shadow: 0 0 0 6px rgba(229,72,77,0), 0 0 7px #e5484d; } 100% { box-shadow: 0 0 0 0 rgba(229,72,77,0), 0 0 7px #e5484d; } }
@media (prefers-reduced-motion: reduce) { .dec-meta-cat.is-online .dec-meta-cat-dot { animation: none; } }
.dec-meta-sep { opacity: 0.4; }
.dec-meta-time,
.dec-meta-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Marcador de sincronização (decode-sync-badge.jsx) — status de dados, page-chrome.
   online = verde "atualizado"; offline = âmbar "lendo a versão salva". */
.dec-sync {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.dec-sync-sep { opacity: 0.4; }
.dec-sync-meta { font-size: 0.82em; opacity: 0.55; letter-spacing: 0.01em; }
.dec-sync-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
  background: oklch(0.62 0.16 150);
  box-shadow: 0 0 0 3px oklch(0.62 0.16 150 / 0.18);
}
.dec-sync.is-online .dec-sync-dot {
  background: oklch(0.66 0.17 150);
  box-shadow: 0 0 0 3px oklch(0.66 0.17 150 / 0.18);
  animation: dec-sync-pulse 2.4s ease-in-out infinite;
}
.dec-sync.is-offline .dec-sync-dot {
  background: oklch(0.72 0.15 70);
  box-shadow: 0 0 0 3px oklch(0.72 0.15 70 / 0.2);
}
.dec-sync.is-offline { color: oklch(0.62 0.13 70); }
@keyframes dec-sync-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .dec-sync.is-online .dec-sync-dot { animation: none; } }

.dec-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(38px, 6.2vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.018em;
  margin: 0 0 clamp(20px, 2.5vw, 32px);
  color: oklch(1 0 0);
  text-wrap: balance;
  max-width: 32ch;
  text-shadow: 0 2px 30px oklch(0 0 0 / 0.35);
}

.dec-dek {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: oklch(1 0 0 / 0.88);
  margin: 0 0 clamp(28px, 3.5vw, 44px);
  max-width: 56ch;
  text-wrap: pretty;
}

.dec-hero-byline {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.dec-hero-byline-sep { color: oklch(1 0 0 / 0.35); }
.dec-hero-stats {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: oklch(1 0 0 / 0.75);
}
.dec-hero-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dec-hero-stat svg { opacity: 0.7; }

.dec-hero-scroll {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: oklch(1 0 0 / 0.5);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  pointer-events: none;
}
.dec-hero-scroll-line {
  width: 1px;
  height: 28px;
  background: linear-gradient(180deg, oklch(1 0 0 / 0.5), transparent);
  animation: decScrollHint 2.4s ease-in-out infinite;
}
@keyframes decScrollHint {
  0%, 100% { transform: scaleY(1); opacity: 0.5; }
  50% { transform: scaleY(0.4) translateY(8px); opacity: 0.15; }
}


/* ───── AuthorChip ───── */
.dec-author-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  padding: 4px 10px 4px 4px;
  margin: -4px -10px -4px -4px;
  border-radius: 999px;
  transition: background 0.15s ease;
}
.dec-hero .dec-author-chip {
  color: oklch(1 0 0);
}
.dec-author-chip:hover { background: oklch(1 0 0 / 0.08); }

.dec-author-face {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: oklch(1 0 0);
  text-shadow: 0 1px 1px oklch(0 0 0 / 0.2);
  border: 1.5px solid oklch(1 0 0 / 0.25);
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.dec-author-chip-md .dec-author-face { width: 36px; height: 36px; font-size: 12px; }
.dec-author-chip-lg .dec-author-face { width: 48px; height: 48px; font-size: 16px; }

.dec-author-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.dec-author-name {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.dec-author-ping {
  font-size: 10.5px;
  margin-top: 2px;
  color: var(--accent);
  letter-spacing: 0.02em;
}
.dec-hero .dec-author-ping { color: oklch(1 0 0 / 0.65); }


/* ═══════════════════════════════════════════════════════════════
   2 · CONTAINER + VOICE + SHARE ROW (above the split)
   ═══════════════════════════════════════════════════════════════ */

.dec-container {
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px) clamp(40px, 5vw, 64px);
}

.dec-voice-wrap {
  /* Vive DENTRO de .dec-main, entre a capa e o body. Cria um "preview
     da voz" antes do leitor mergulhar no texto. No mobile pega o
     padding lateral do body pra alinhar com o resto da coluna. */
  margin: 4px 0 28px;
}
.dec-voice-wrap .voice-player {
  background: var(--bg-elev);
  border-color: var(--border-soft);
}
.dec-voice-hint {
  display: block;
  line-height: 1.55;
  font-size: 10.5px;
  color: var(--text-dim);
  margin-top: 10px;
  padding-left: 8px;
  letter-spacing: 0.05em;
  text-transform: lowercase;
}
.dec-voice-hint > svg {
  display: inline;
  vertical-align: -2px;
  margin-right: 5px;
  flex: none;
}
.dec-voice-hint a.dec-voice-link {
  display: inline;
  white-space: nowrap;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-left: 4px;
  transition: opacity 0.15s ease;
}
.dec-voice-hint a.dec-voice-link:hover { opacity: 0.75; }

/* Voice player como showcase do X-AVATAR: nome da narradora vira link */
.dec-voice-narrator {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.15s ease;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.dec-voice-narrator:hover { opacity: 0.75; }
.dec-voice-arrow {
  color: var(--accent);
  font-weight: 700;
  font-size: 1.1em;
  margin: 0 2px;
}

/* Mobile: padding lateral pra não colar nas bordas (.dec-main é full-bleed) */
.mobile-frame .dec-voice-wrap {
  padding: 0 22px;
}

/* ShareRow do topo: visível APENAS no mobile (sticky). No desktop
   o rail vertical + ShareRow do fim do corpo cobrem a função.
   .mobile-frame override traz de volta. */
.dec-container > .share-row {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════
   2.5 · ARTICLE COVER (capa-âncora, dentro de .dec-main)
   • Manchete (hero) usa a foto como bg + texto sobreposto.
   • Capa (este bloco) é a foto LIMPA, sem texto sobreposto, sem
     legenda obrigatória. Largura = coluna do corpo (não invade
     rail nem aside). Dimensão natural da imagem preservada
     (width 100%, height auto). Top arredondado + bottom reto →
     sensação editorial de corte / sangria.
   • Ilustração (block.type "figure") é foto inline com legenda
     explicativa no meio do corpo — pegada distinta.
   ═══════════════════════════════════════════════════════════════ */

.dec-cover {
  grid-area: cover;
  margin: 0;
  padding: 0;
  display: block;
}
.dec-cover-img {
  display: block;
  width: 100%;
  height: auto;
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: oklch(0.10 0.05 260);
}
.dec-cover-subhead {
  margin: 14px 2px 0;
  font-family: var(--font-display);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-mute);
  font-style: italic;
  letter-spacing: -0.005em;
  text-wrap: pretty;
  max-width: 60ch;
}

.mobile-frame .dec-cover { margin: 0 0 24px; }

/* Mobile precisa de overflow: visible no wrapper pro position:sticky
   funcionar (overflow:hidden no ancestor quebra sticky em alguns browsers).
   O frame do iPhone já clipa o conteúdo, então não perdemos nada. */
.mobile-frame .decode-page {
  clip-path: none;
  border-radius: 0;
  border: 0;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE STICKY · ShareRow > Cover > Body (3 camadas)
   • ShareRow fixa no topo SEMPRE (z 30)
   • Cover sticky abaixo do share row (z 10) — sticky em ~52px
   • Body opaco com z 20 → cobre só a capa quando rola, share fica
   • Tudo full-bleed (sem desnível de cor lateral)
   ═══════════════════════════════════════════════════════════════ */

/* Altura aproximada da share row mobile: 10 + 32 + 10 + bordas = ~54px */
.mobile-frame { --dec-sharerow-h: 54px; }

.mobile-frame .dec-container > .share-row {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 30;
  margin: 0 -18px 16px;
  padding: 12px 18px;
  background: var(--bg-base);
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-bottom: 1px solid var(--border-soft);
  border-radius: 0;
  /* CRITICAL: force single row. O .share-row global usa flex-wrap: wrap,
     o que fazia o ".share-more" (margin-left: auto) quebrar pra linha de
     cima, criando a faixa esquisita que parecia "texto vazando". */
  flex-wrap: nowrap !important;
  gap: 6px;
  /* overflow VISIBLE pro popup do "..." conseguir aparecer abaixo */
  overflow: visible;
}
/* Esconde o divider "|" — fica mais limpo, redundante com o gap visual */
.mobile-frame .dec-container > .share-row .share-divider {
  display: none;
}
/* Telegram fica acessível pelo menu "..." (share sheet nativo do iOS/Android,
   ou popup customizado). Liberar largura crítica pro layout 1-linha. */
.mobile-frame .dec-container > .share-row .share-icon.share-telegram {
  display: none;
}
.mobile-frame .dec-container > .share-row .share-icons { gap: 4px; }
.mobile-frame .dec-container > .share-row .share-icon { width: 30px; height: 30px; }
.mobile-frame .dec-container > .share-row .share-icon svg { width: 14px; height: 14px; }
.mobile-frame .dec-container > .share-row .share-btn { width: 30px; height: 30px; }
.mobile-frame .dec-container > .share-row .share-btn svg { width: 14px; height: 14px; }
/* O botão "..." (more) precisa aparecer — vai abrir um menu com Telegram
   + outras opções (email, Pinterest, Reddit, etc) ou disparar a Web Share
   API nativa do mobile. */
.mobile-frame .dec-container > .share-row .share-more {
  display: inline-flex;
  width: 30px;
  height: 30px;
  margin-left: auto;
}
.mobile-frame .dec-container > .share-row .share-more svg {
  width: 14px;
  height: 14px;
}
/* Mostra o CTA "Compartilhe" no topo do DECODE mobile (override do hide global) */
.mobile-frame .dec-container > .share-row .share-label {
  display: inline;
  font-size: 0;       /* esconde texto original "Compartilhar" */
}
.mobile-frame .dec-container > .share-row .share-label::before {
  content: "Compartilhe:";
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text);
  text-transform: none;
}
.mobile-frame .dec-container > .share-row .share-divider {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 4px 0 2px;
}

.mobile-frame .dec-cover {
  margin: 0 -18px;
  position: sticky;
  top: var(--dec-sharerow-h);
  z-index: 10;
}
.mobile-frame .dec-cover-img {
  width: 100%;
  border-radius: 0;
}
.mobile-frame .dec-main {
  position: relative;
  z-index: 20;
  background: var(--bg-base);
  margin: -18px -18px 0;
  padding-top: 24px;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}
.mobile-frame .dec-aside {
  position: relative;
  z-index: 20;
  background: var(--bg-base);
  margin: 0 -18px;
  padding: 0 18px;
}

/* ShareRow do fim do artigo (dentro de .dec-main) — redundante no mobile,
   já que o ShareRow do topo fica sticky e sempre visível. Mantém só no
   desktop, onde o usuário lê de cima a baixo e quer compartilhar no fim. */
.mobile-frame .dec-main > .share-row {
  display: none;
}


/* ═══════════════════════════════════════════════════════════════
   3 · SPLIT (rail · main · aside)
   ═══════════════════════════════════════════════════════════════ */

.dec-split {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 300px;
  grid-template-areas:
    "cover cover aside"
    "rail  main  aside";
  gap: 40px;
  column-gap: 40px;
  row-gap: 24px;
  align-items: start;
  /* Espaço entre a manchete (hero) e a capa do artigo. */
  margin-top: clamp(20px, 2.5vw, 36px);
}
.mobile-frame .dec-split { margin-top: 0; }

.dec-rail {
  grid-area: rail;
  position: sticky;
  top: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}
.dec-rail-label {
  /* Label vertical na BASE do rail, lido de baixo pra cima quando a
     cabeça é inclinada à esquerda (caracteres ficam upright nesse ângulo).
     writing-mode: vertical-rl define fluxo vertical com chars rotated 90°
     clockwise. transform: rotate(180deg) inverte tudo, resultando em
     leitura ascendente (C na base, R perto dos ícones). */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-top: 12px;
  margin-bottom: 0;
}
.dec-rail-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  color: var(--text-mute);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
}
.dec-rail-btn:hover {
  color: oklch(1 0 0);
  transform: translateY(-1px);
  border-color: transparent;
}

/* ── Save (bookmark) — destaque cobalto no topo do rail ──────── */
.dec-rail-divider {
  width: 22px;
  height: 1px;
  background: var(--border);
  margin: 2px 0 4px;
  flex-shrink: 0;
}
.dec-rail-save:hover {
  background: var(--accent) !important;
  color: oklch(0.99 0 0) !important;
}
.theme-dark .dec-rail-save:hover { color: oklch(0.06 0 0) !important; }
/* Estado salvo: preenchido cobalto SATURADO e inconfundível (valor fixo,
   não o --accent que no dark fica pálido/acinzentado). Ícone branco. */
.dec-rail-save.is-saved {
  background: oklch(0.55 0.22 260);
  border-color: oklch(0.55 0.22 260);
  color: oklch(0.99 0 0);
}
.theme-dark .dec-rail-save.is-saved {
  background: oklch(0.62 0.23 260);
  border-color: oklch(0.62 0.23 260);
  color: oklch(0.99 0 0);
}
.dec-rail-save.is-saved:hover {
  transform: translateY(-1px);
  background: oklch(0.48 0.24 260) !important;
  border-color: oklch(0.48 0.24 260);
  color: oklch(0.99 0 0) !important;
}
.theme-dark .dec-rail-save.is-saved:hover {
  background: oklch(0.70 0.23 260) !important;
  border-color: oklch(0.70 0.23 260);
  color: oklch(0.99 0 0) !important;
}
/* Toast do save reaproveita o estilo do copy; só garante z acima */
.dec-rail-toast-save { white-space: nowrap; }

/* ── Save PILL (mobile) — rótulo + ícone, alvo ≥44px ─────────── */
/* Escondido no desktop (lá o save vive no topo do rail vertical).
   Aparece só dentro de .mobile-frame, logo abaixo da ShareRow. */
.dec-mobile-save { display: none; }
.mobile-frame .dec-mobile-save {
  display: flex;
  margin: 14px 0 4px;
}
.dec-save-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.dec-save-pill .dec-save-pill-label { line-height: 1; }
.dec-save-pill:active { transform: scale(0.99); }
/* Estado salvo: cobalto saturado, ícone + texto branco */
.dec-save-pill.is-saved {
  background: oklch(0.55 0.22 260);
  border-color: oklch(0.55 0.22 260);
  color: oklch(0.99 0 0);
}
.theme-dark .dec-save-pill.is-saved {
  background: oklch(0.62 0.23 260);
  border-color: oklch(0.62 0.23 260);
  color: oklch(0.99 0 0);
}

.dec-rail-btn:hover.dec-rail-whatsapp { background: #25d366; }
.dec-rail-btn:hover.dec-rail-x        { background: #000; }
.dec-rail-btn:hover.dec-rail-linkedin { background: #0a66c2; }
.dec-rail-btn:hover.dec-rail-telegram { background: #229ed9; }
.dec-rail-btn:hover.dec-rail-facebook { background: #1877f2; }
.dec-rail-btn.dec-rail-copy:hover { background: var(--accent); color: oklch(0.06 0 0); }
.dec-rail-btn.is-copied {
  background: var(--accent);
  color: oklch(0.06 0 0);
  border-color: var(--accent);
}

/* Toast "Link copiado!" — aparece à direita do botão de copy quando
   o feedback de cópia engata. Auto-some após 1.8s via o state. */
.dec-rail-toast {
  position: absolute;
  top: 50%;
  left: calc(100% + 10px);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 10px;
  background: oklch(0.20 0.02 275);
  color: oklch(0.99 0 0);
  font-size: 11px;
  letter-spacing: 0.02em;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 10px 28px -8px oklch(0.2 0.02 275 / 0.35);
  animation: decRailToastIn 0.18s cubic-bezier(0.2, 0.8, 0.3, 1.2);
  z-index: 50;
}
.dec-rail-toast::before {
  /* setinha apontando pra esquerda (em direção ao botão) */
  content: "";
  position: absolute;
  left: -4px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: oklch(0.20 0.02 275);
  border-radius: 1px;
}
.dec-rail-toast svg { color: var(--accent); }
.theme-dark .dec-rail-toast {
  background: oklch(0.95 0 0);
  color: oklch(0.15 0.01 275);
}
.theme-dark .dec-rail-toast::before { background: oklch(0.95 0 0); }
.theme-dark .dec-rail-toast svg { color: oklch(0.45 0.20 260); }

@keyframes decRailToastIn {
  0%   { opacity: 0; transform: translate(-6px, -50%) scale(0.92); }
  100% { opacity: 1; transform: translate(0, -50%)    scale(1); }
}

/* O .dec-rail-btn precisa de position relative pra ancorar o toast,
   e overflow: visible pro toast não ser clipado pelo box do button. */
.dec-rail-btn {
  position: relative;
  overflow: visible;
}

/* ───── Rail "more" popup — abre à direita do rail vertical ───── */
.dec-rail-more-wrap {
  position: relative;
  display: inline-flex;
}
.dec-rail-more.is-open {
  background: var(--text);
  color: var(--bg-base);
  border-color: var(--text);
}

.dec-rail-more-menu {
  position: absolute;
  /* Abre lateralmente à direita do botão "..." (rail está na coluna
     mais à esquerda da página). Top alinhado com o topo do botão. */
  top: 0;
  left: calc(100% + 12px);
  z-index: 60;
  min-width: 230px;
  padding: 8px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow:
    0 24px 48px -12px oklch(0.2 0.02 275 / 0.18),
    0 4px 12px -4px oklch(0.2 0.02 275 / 0.08);
  animation: decRailMoreIn 0.16s cubic-bezier(0.2, 0.8, 0.3, 1.2);
}
@keyframes decRailMoreIn {
  from { opacity: 0; transform: translateX(-6px) scale(0.96); }
  to   { opacity: 1; transform: translateX(0)    scale(1); }
}

.dec-rail-more-eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 6px 10px 8px;
}

.dec-rail-more-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dec-rail-more-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-align: left;
  text-decoration: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.dec-rail-more-item:hover,
.dec-rail-more-item:focus-visible {
  background: var(--bg-elev);
  outline: none;
}

.dec-rail-more-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-mute);
  flex-shrink: 0;
  transition: all 0.12s ease;
}
.dec-rail-more-item:hover .dec-rail-more-icon {
  border-color: transparent;
  color: oklch(1 0 0);
}
.dec-rail-more-threads:hover .dec-rail-more-icon { background: #000; }
.dec-rail-more-reddit:hover  .dec-rail-more-icon { background: #ff4500; }
.dec-rail-more-email:hover   .dec-rail-more-icon { background: var(--text); }

.dec-rail-more-label { flex: 1; }
.dec-rail-more-arrow {
  color: var(--text-dim);
  display: inline-flex;
  transition: transform 0.12s ease;
}
.dec-rail-more-item:hover .dec-rail-more-arrow {
  transform: translate(2px, -2px);
  color: var(--text);
}

.dec-rail-more-sep {
  height: 1px;
  background: var(--border-soft);
  margin: 6px 4px;
}

.dec-rail-more-quote.is-copied {
  background: oklch(0.96 0.04 155);
  color: oklch(0.30 0.15 155);
}
.theme-dark .dec-rail-more-quote.is-copied {
  background: oklch(0.30 0.12 155);
  color: oklch(0.92 0.10 155);
}
.dec-rail-more-quote.is-copied .dec-rail-more-icon {
  background: oklch(0.62 0.15 155);
  color: oklch(1 0 0);
  border-color: transparent;
}

.dec-main { grid-area: main; min-width: 0; }
.dec-aside {
  grid-area: aside;
  position: sticky;
  top: 64px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}


/* ═══════════════════════════════════════════════════════════════
   4 · ARTICLE BODY (prose)
   ═══════════════════════════════════════════════════════════════ */

/* Corpo do take — TIPOGRAFIA mora em take-prose.css (.dec-body.take-prose,
   fonte única). Aqui fica só o que é específico da PÁGINA: gutter
   direito, âncoras §, figura, callout com ícone e bloco de código. */
.dec-body {
  /* gutter editorial — alinha a borda direita com a capa acima */
  padding-right: 40px;
}

/* Títulos: só a ancoragem do § fica aqui (serif/tamanho em take-prose) */
.dec-body h2,
.dec-body h3 {
  position: relative;
  scroll-margin-top: 80px;
}
.dec-anchor {
  position: absolute;
  left: -28px;
  top: 6px;
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--accent);
  opacity: 0;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.dec-body h2:hover .dec-anchor,
.dec-body h3:hover .dec-anchor,
.dec-anchor:focus { opacity: 1; }

/* Pull-quote, citação-card e listas (nº mono + chevron X-ID):
   TIPOGRAFIA em take-prose.css — fonte única compartilhada com a
   Forja e o Publicar. Não reintroduzir aqui. */

/* Figure
   DIVERGÊNCIA INTENCIONAL do estúdio: a página renderiza a imagem
   publicada (com placeholder gradiente quando vazia); o estúdio
   renderiza um SLOT TOCÁVEL editável (.fg-slot em take-prose.css).
   Não unificar — a figura da página não pode ser um slot, e a do
   estúdio não pode ter placeholder publicado. */
.dec-figure {
  margin: 40px 0;
  max-width: 100%;
}
.dec-figure-frame {
  position: relative;
  width: 100%;
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
}
.dec-figure-frame.has-image {
  background: oklch(0.10 0.04 260);
  border-color: var(--border);
}
.dec-figure-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.dec-figure-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, oklch(0.45 0.20 260) 0%, oklch(0.25 0.16 250) 60%, oklch(0.12 0.06 250) 100%);
  opacity: 0.55;
}
.dec-figure-stripes {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent 0 28px,
    oklch(1 0 0 / 0.04) 28px 29px
  );
}
.dec-figure-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text-dim);
}
.dec-figure-cap {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  line-height: 1.5;
  text-wrap: pretty;
}
.dec-figure-cap-mark {
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* Callout (info / warning / aside)
   DIVERGÊNCIA INTENCIONAL do estúdio: a página tem ícone + variantes
   info/aviso (artefato publicado, mais rico); o estúdio usa um callout
   simples (.co/.co-t/.co-b) em take-prose.css. Não unificar — são
   coisas diferentes de propósito. */
.dec-callout {
  margin: 30px 0;
  padding: 18px 22px 18px 18px;
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  align-items: flex-start;
}
.dec-callout-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--accent-bg);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dec-callout-title {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-bottom: 6px;
  color: var(--text);
}
.dec-callout-text {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-mute);
  text-wrap: pretty;
}
.dec-callout-warning {
  border-left-color: oklch(0.65 0.18 60);
}
.dec-callout-warning .dec-callout-icon {
  background: oklch(0.96 0.06 60);
  color: oklch(0.45 0.16 60);
}
.theme-dark .dec-callout-warning .dec-callout-icon {
  background: oklch(0.30 0.10 60);
  color: oklch(0.85 0.16 60);
}

/* Code — chrome (caixa, botão copiar) mora em take-prose.css, fonte
   única compartilhada com o estúdio. Aqui ficam só os overrides de
   TEMA ESCURO da página: a caixa de código fica PRETA no dark. */
.theme-dark .dec-code {
  background: oklch(0.10 0.005 270);
  border-color: oklch(0.24 0.01 270);
}
.theme-dark .dec-code-copy { background: oklch(0.22 0.01 270); }


/* ═══════════════════════════════════════════════════════════════
   5 · VERIFIED CARD (autor humano · biografia)
   ═══════════════════════════════════════════════════════════════ */

.dec-verified {
  margin: 56px 0 48px;
  padding: 28px 28px 24px;
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  max-width: 100%;
  position: relative;
  overflow: hidden;
}
.dec-verified::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--accent-bg) 0%, transparent 45%);
  pointer-events: none;
  opacity: 0.5;
}
.dec-verified > * { position: relative; }

.dec-verified-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.dec-verified-label {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.dec-verified-stamp {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.dec-verified-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.dec-verified-face-wrap { position: relative; }
.dec-verified-face {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
  color: oklch(1 0 0);
  text-shadow: 0 1px 2px oklch(0 0 0 / 0.2);
  border: 2px solid var(--bg-elev);
  box-shadow: 0 0 0 2px var(--border-soft);
}
.dec-verified-check {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 22px;
  height: 22px;
  background: var(--accent);
  color: oklch(0.06 0 0);
  border: 2px solid var(--bg-elev);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dec-verified-id { flex: 1; min-width: 0; }
.dec-verified-name {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1.2;
}
.dec-verified-role {
  font-size: 11.5px;
  color: var(--text-mute);
  margin-top: 4px;
  letter-spacing: 0.04em;
}
.dec-verified-ping {
  font-size: 10.5px;
  color: var(--accent);
  margin-top: 3px;
  letter-spacing: 0.02em;
}

.dec-verified-bio {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-mute);
  margin: 0 0 22px;
  text-wrap: pretty;
}

.dec-verified-stats {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
  flex-wrap: wrap;
}
.dec-verified-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dec-verified-stat-num {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.dec-verified-stat-lbl {
  font-size: 10.5px;
  color: var(--text-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--font-mono);
}
.dec-verified-stat-sep {
  width: 1px;
  height: 28px;
  background: var(--border-soft);
}

/* Links pro perfil do autor (avatar + nome) no cartão do artigo */
.dec-verified-face-link { text-decoration: none; cursor: pointer; }
.dec-verified-name-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: color 0.14s ease;
}
.dec-verified-name-link:hover { color: var(--accent); }

/* Redes do autor — logos discretas em cinza, SEM caixa. Cor sutil
   no hover (não a cor cheia da marca, pra não poluir). */
.dec-verified-socials {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: 18px;
}
.dec-verified-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.14s ease, transform 0.14s ease;
}
.dec-verified-social:hover {
  color: var(--text);
  transform: translateY(-1px);
}

/* ── Verified card · CTA "Seguir" (usado em todas as páginas de artigo) ── */
.dec-verified-cta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--text);
  color: var(--bg-base);
  border: 1px solid var(--text);
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 6px 16px -6px oklch(0.2 0.02 275 / 0.4);
}
.dec-verified-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -8px oklch(0.2 0.02 275 / 0.5);
}
.dec-verified-cta.is-following {
  background: var(--accent);
  color: oklch(0.06 0 0);
  border-color: var(--accent);
}
.dec-verified-cta-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: oklch(1 0 0 / 0.18);
  font-size: 14px;
  line-height: 1;
}


/* ═══════════════════════════════════════════════════════════════
   5.5 · ARTICLE VIDEO (YouTube companion, fim do artigo)
   ═══════════════════════════════════════════════════════════════ */

.dec-video {
  margin: 48px 0 12px;
  padding: 0;
}
.dec-video-head {
  margin: 0 0 16px;
}
.dec-video-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.dec-video-eyebrow svg { color: var(--accent); }
.dec-video-title {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0;
  text-wrap: balance;
}
/* O .dec-video-title é um <h2>, herdaria estilos do .dec-body h2 (com
   âncora § e margem grande). Aqui está fora de .dec-body, mas reseta
   margin pra alinhar com o eyebrow acima e o player abaixo. */
.dec-video h2 { margin: 0; }

/* O <YouTubePlayer> tem suas próprias cores via coverGradient prop —
   aqui só ajusto contexto: borda + sombra cobalto. */
.dec-video .yt-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  box-shadow: 0 18px 36px -16px oklch(0.45 0.22 260 / 0.18);
}
.theme-dark .dec-video .yt-card {
  box-shadow: 0 20px 40px -16px oklch(0.30 0.18 260 / 0.45);
  border-color: var(--border-soft);
}

.mobile-frame .dec-video {
  margin: 36px 0 8px;
}
.mobile-frame .dec-video-title { font-size: 21px; }
.mobile-frame .dec-video-head { padding: 0 22px; }

/* Mobile: o vídeo ocupa 100% da largura da tela (edge-to-edge), como o
   video-take. O .dec-main JÁ é full-bleed (margin -18px), então o vídeo
   não precisa de negative-margin — basta ocupar a largura total do main.
   (Antes usávamos margin -18px, que puxava o vídeo 18px PRA FORA da tela
   e fazia o conteúdo interno colar na borda.) */
.mobile-frame .dec-video {
  margin-left: 0;
  margin-right: 0;
  width: auto;
}
.mobile-frame .dec-video .yt-card {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  box-shadow: none;
}
.mobile-frame .dec-video .yt-frame { border-radius: 0; }
.mobile-frame .dec-video .nyt,
.mobile-frame .dec-video .nyt-round { border-radius: 0; }
/* o head (se existir) volta a respeitar o padding do corpo */
.mobile-frame .dec-video-head { padding: 0 18px; }

/* Full-bleed no mobile: como o vídeo vai de ponta a ponta, dá um respiro
   lateral ao conteúdo interno do player (vinheta de marca + barra de controles)
   pra nada ficar colado nas bordas da tela. */
.mobile-frame .dec-video .nyt-intro { padding-left: 18px; padding-right: 18px; }
.mobile-frame .dec-video .nyt-bar { padding-left: 16px; padding-right: 16px; }

/* ── Tags-liga da publicação (take & vídeo-take) ─────────────────────
   Fileira de #tags após o corpo — cada uma é LINK pra busca unificada
   (flow-search.html?q=#Tag) com a contagem de publicações da liga.
   Render: DecodeTakeTags (decode-article.jsx). Token-driven. */
.dec-take-tags { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 26px 0 6px; padding-top: 18px; border-top: 1px solid var(--border-soft); }
.dec-take-tag { font-size: 13px; font-weight: 500; color: var(--accent); text-decoration: none; }
.dec-take-tag:hover { text-decoration: underline; }
.dec-take-tag i { font-style: normal; font-size: 10.5px; opacity: 0.62; margin-left: 1px; }


/* ═══════════════════════════════════════════════════════════════
   6 · DISCOVER LIST (aside variant)
   ═══════════════════════════════════════════════════════════════ */

.dec-discover-aside {
  padding: 18px 18px 8px;
  background: var(--bg-base);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
}
.dec-discover-aside-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.dec-discover-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.dec-discover-aside-count {
  font-size: 10px;
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  padding: 2px 7px;
  border-radius: 6px;
  color: var(--text-mute);
}
.dec-discover-aside-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dec-discover-aside-row {
  display: flex;
  gap: 12px;
  padding: 10px 8px;
  margin: 0 -8px;
  text-decoration: none;
  color: inherit;
  border-radius: 10px;
  transition: background 0.15s ease;
  align-items: flex-start;
}
.dec-discover-aside-row:hover { background: var(--bg-elev); }
.dec-discover-aside-cover {
  /* Paisagem 3:2 — mesma proporção do SeeAlso inline + cards do rodapé.
     Quando tem cover_image_url renderiza <img>; sem foto, fallback pro
     bloco colorido com glyph. */
  width: 84px;
  height: 56px;
  border-radius: 8px;
  flex-shrink: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.dec-discover-aside-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.dec-discover-aside-cover:not(.has-image)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, oklch(0 0 0 / 0.4) 100%);
}
.dec-discover-aside-cat-glyph {
  font-size: 22px;
  font-weight: 600;
  color: oklch(1 0 0 / 0.65);
  font-family: var(--font-serif);
  position: relative;
  z-index: 1;
}
.dec-discover-aside-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.dec-discover-aside-cat {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.dec-discover-aside-title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text);
  letter-spacing: -0.005em;
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Min 2 linhas, cap 3 — uniformiza cards curtos sem permitir
     blow-up em manchetes muito longas. */
  min-height: calc(1.35em * 2);
}
.dec-discover-aside-foot {
  font-size: 10.5px;
  color: var(--text-dim);
  margin-top: 2px;
  letter-spacing: 0.02em;
}


/* ═══════════════════════════════════════════════════════════════
   7 · NEWSLETTER INLINE
   ═══════════════════════════════════════════════════════════════ */

.dec-newsletter {
  padding: 18px;
  background: linear-gradient(180deg, var(--accent-bg) 0%, var(--bg-elev) 100%);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dec-newsletter-eyebrow {
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.dec-newsletter-title {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: 4px;
  text-wrap: balance;
}
.dec-newsletter-sub {
  font-size: 12.5px;
  color: var(--text-mute);
  line-height: 1.45;
}
.dec-newsletter-form {
  display: flex;
  gap: 6px;
}
.dec-newsletter-input {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text);
  font-size: 12.5px;
  outline: none;
  transition: border-color 0.15s ease;
}
.dec-newsletter-input:focus { border-color: var(--accent); }
.dec-newsletter-input::placeholder { color: var(--text-dim); }
.dec-newsletter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  background: var(--text);
  color: var(--bg-base);
  border: 1px solid var(--text);
  border-radius: 9px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.12s ease;
}
.dec-newsletter-btn:hover { transform: translateY(-1px); }

/* Variante WhatsApp — verde, full-width no inline aside */
.dec-newsletter-btn-wa {
  width: 100%;
  justify-content: center;
  height: 42px;
  background: #25d366;
  color: oklch(1 0 0);
  border-color: #25d366;
  font-size: 13px;
  font-weight: 600;
  gap: 8px;
  box-shadow: 0 10px 20px -8px #25d36670;
}
.dec-newsletter-btn-wa:hover {
  background: #1eba59;
  border-color: #1eba59;
  transform: translateY(-1px);
  box-shadow: 0 14px 24px -8px #25d36685;
}
.theme-dark .dec-newsletter-btn-wa { background: #25d366; border-color: #25d366; color: oklch(1 0 0); }
.dec-newsletter-sent {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--accent);
  padding: 10px 12px;
  background: var(--bg-base);
  border: 1px dashed var(--accent);
  border-radius: 9px;
}


/* ═══════════════════════════════════════════════════════════════
   8 · DISCOVER LIST (grid variant — full-width footer)
   ═══════════════════════════════════════════════════════════════ */

.dec-discover-grid {
  margin-top: clamp(56px, 6vw, 88px);
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--border-soft);
}
.dec-discover-grid-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 16px;
  flex-wrap: wrap;
}
.dec-discover-eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 8px;
}
.dec-discover-h2 {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: var(--text);
  margin: 0;
}
.dec-discover-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-mute);
  text-decoration: none;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-soft);
  transition: all 0.15s ease;
}
.dec-discover-all:hover {
  background: var(--text);
  color: var(--bg-base);
  border-color: var(--text);
}

.dec-discover-grid-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.dec-related-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-base);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.dec-related-card:hover {
  transform: translateY(-3px);
  border-color: var(--border);
  box-shadow: 0 18px 36px -16px oklch(0.45 0.22 260 / 0.30);
}

.dec-related-cover {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  isolation: isolate;
}
.dec-related-cover-img {
  /* Render real cover (16:9 source ↦ 16:10 frame). object-position
     center 30% favorece o terço superior (mesmo padrão do hero). */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.dec-related-cover.has-image .dec-related-cat {
  /* Sobre foto real precisa de mais blur + sombra pra leitura */
  background: oklch(0 0 0 / 0.62);
}
.dec-related-cover-grad,
.dec-related-cover-stripes {
  position: absolute;
  inset: 0;
}
.dec-related-cover-stripes {
  background: repeating-linear-gradient(
    135deg,
    transparent 0 14px,
    oklch(1 0 0 / 0.04) 14px 15px
  );
}
.dec-related-cat {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  background: oklch(0 0 0 / 0.55);
  backdrop-filter: blur(10px);
  color: oklch(1 0 0);
  border-radius: 999px;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid oklch(1 0 0 / 0.15);
}
.dec-related-meta {
  padding: 16px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.dec-related-title {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0;
  font-weight: 400;
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dec-related-foot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  margin-top: auto;
}
.dec-related-foot-author { color: var(--text-mute); }
.dec-related-foot-sep { opacity: 0.4; }


/* ═══════════════════════════════════════════════════════════════
   10 · MOBILE
   ═══════════════════════════════════════════════════════════════ */

.mobile-frame .decode-page .dec-hero {
  /* Era: min-height 460 + padding 56/32 + justify flex-end → conteúdo
     colava na base e todo o sobra virava buraco em cima. Trocado pra
     justify-content: center + min-height menor + padding simétrico →
     o título senta no meio do hero, com foto visível em cima E embaixo
     em proporções equilibradas. */
  min-height: 420px;
  padding: 36px 22px 40px;
  justify-content: center;
}
.mobile-frame .dec-title { font-size: 34px; line-height: 1.02; }
.mobile-frame .dec-dek { font-size: 15.5px; line-height: 1.5; }
.mobile-frame .dec-meta { font-size: 10px; gap: 8px; }
.mobile-frame .dec-meta-cat { padding: 4px 8px 4px 7px; }
.mobile-frame .dec-hero-scroll { display: none; }
.mobile-frame .dec-container { padding: 0 18px 36px; }

.mobile-frame .dec-split {
  grid-template-columns: 1fr;
  grid-template-areas:
    "cover"
    "main"
    "aside";
  gap: 24px;
  row-gap: 24px;
}
.mobile-frame .dec-rail { display: none; }
.mobile-frame .dec-aside {
  position: static;
  margin-top: 0;
  gap: 12px;
}

.mobile-frame .dec-body {
  font-size: 16.5px;
  line-height: 1.7;
  /* Respiro lateral simétrico — capa continua full-width (vive em .dec-main,
     sem padding), texto recua 22px de cada lado pra não colar nas bordas. */
  padding-left: 22px;
  padding-right: 22px;
}
.mobile-frame .dec-body > p:first-of-type::first-letter {
  font-size: 64px;
  margin: 4px 10px -2px 0;
}
.mobile-frame .dec-body h2 { font-size: 26px; margin: 36px 0 12px; }
.mobile-frame .dec-body h3 { font-size: 20px; margin: 28px 0 10px; }
.mobile-frame .dec-anchor { display: none; }
.mobile-frame .dec-pullquote {
  margin: 30px 0 30px -4px;
  padding-left: 22px;
}
.mobile-frame .dec-pullquote-text { font-size: 21px; }
.mobile-frame .dec-pullquote-mark { font-size: 50px; left: 12px; }

.mobile-frame .dec-verified {
  padding: 22px 20px 20px;
  margin: 40px 22px 32px;
}
.mobile-frame .dec-verified-stats {
  gap: 14px;
}
.mobile-frame .dec-verified-socials {
  margin-left: 0;
}
.mobile-frame .dec-verified-cta {
  width: 100%;
  margin-left: 0;
  margin-top: 12px;
  justify-content: center;
}

.mobile-frame .dec-discover-grid-cards {
  grid-template-columns: 1fr;
  gap: 14px;
}
.mobile-frame .dec-related-title { font-size: 18px; }
.mobile-frame .dec-related-cover { aspect-ratio: 16 / 9; }


/* ═══════════════════════════════════════════════════════════════
   12 · AD SLOTS (Google Ads / AdSense placeholders)
   • Quatro placements: top leaderboard (728×90), in-article fluid,
     sidebar rectangle (300×250), pre-footer billboard (970×250).
   • Estilo de placeholder editorial — claramente NÃO é conteúdo:
     tag "Anúncio" + stripes + monospace meta com tamanho IAB.
   • Quando trocar pelo <ins class="adsbygoogle">, manter as classes
     do wrapper (.dec-ad + .dec-ad-{size}) e remover só o .dec-ad-frame.
   ═══════════════════════════════════════════════════════════════ */

.dec-ad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  /* Reset de aside — pra não herdar nada do .dec-aside ou .dec-pullquote */
  background: transparent;
  border: 0;
}

/* Tag "Anúncio" — alinhada à esquerda do frame */
.dec-ad-label {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding-left: 2px;
}
.dec-ad-label-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: oklch(0.75 0.15 80);   /* amarelo Google AdSense */
  box-shadow: 0 0 0 2px oklch(0.75 0.15 80 / 0.18);
}

/* Frame — o "slot" propriamente dito. CSS vars setadas pelo JSX
   controlam largura máxima (--ad-w) e altura fixa (--ad-h). */
.dec-ad-frame {
  position: relative;
  width: 100%;
  max-width: var(--ad-w, 100%);
  height: var(--ad-h, 250px);
  background: var(--bg-elev);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dec-ad-stripes {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    135deg,
    transparent 0 22px,
    oklch(0.50 0.02 280 / 0.05) 22px 23px
  );
  pointer-events: none;
}
.theme-dark .dec-ad-stripes {
  background: repeating-linear-gradient(
    135deg,
    transparent 0 22px,
    oklch(1 0 0 / 0.04) 22px 23px
  );
}

/* Meta — empilhado no centro do frame */
.dec-ad-meta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  text-align: center;
  padding: 12px 16px;
  line-height: 1.4;
}
.dec-ad-meta-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px 3px 8px;
  background: var(--bg-base);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.dec-ad-meta-name {
  font-size: 11.5px;
  color: var(--text-mute);
  letter-spacing: 0.06em;
  text-transform: lowercase;
}
.dec-ad-meta-size {
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.dec-ad-meta-pos {
  font-size: 9px;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: lowercase;
  opacity: 0.8;
}

/* ───── Placement: TOP LEADERBOARD (728×90) ─────────────────── */
/* Entre o ShareRow e o split. Espaçamento generoso pro hero respirar. */
.dec-container > .dec-ad-leaderboard {
  margin: clamp(20px, 2.5vw, 36px) auto 0;
}

/* ───── Placement: IN-ARTICLE (fluid) ────────────────────────── */
/* Dentro do .dec-body, entre seções. Respeita o padding-right do body. */
.dec-body .dec-ad-inarticle {
  margin: 44px 0 44px;
  max-width: 100%;
}
.dec-body .dec-ad-inarticle .dec-ad-frame {
  max-width: 100%;
}

/* ───── Placement: SIDEBAR rectangle (300×250) ──────────────── */
/* No .dec-aside, entre relacionados e newsletter. Já vive em coluna
   estreita (300px) — frame respeita a coluna. */
.dec-aside .dec-ad-rectangle {
  margin: 0;
}
.dec-aside .dec-ad-rectangle .dec-ad-frame {
  max-width: 100%;   /* aside é só 300px, não precisa cap */
}
.dec-ad.is-sticky {
  /* Reserva pro caso de marcar sticky via prop. O aside já é sticky
     no agregado — usar só se quiser independência do bloco. */
  position: sticky;
  top: 80px;
}

/* ───── Placement: PRE-FOOTER billboard (970×250) ───────────── */
.dec-container > .dec-ad-billboard {
  margin: clamp(40px, 5vw, 64px) auto clamp(16px, 2vw, 24px);
}

/* ───── Mobile overrides ────────────────────────────────────── */
.mobile-frame .dec-ad-label { font-size: 9px; }

/* Leaderboard 728×90 → vira mobile banner 320×100 (~98% width) */
.mobile-frame .dec-ad-leaderboard {
  margin: 16px 0;
}
.mobile-frame .dec-ad-leaderboard .dec-ad-frame {
  max-width: 100%;
  height: 100px;
}

/* Billboard 970×250 → vira large mobile banner (~320×180) */
.mobile-frame .dec-ad-billboard {
  margin: 32px 0 8px;
}
.mobile-frame .dec-ad-billboard .dec-ad-frame {
  max-width: 100%;
  height: 180px;
}

/* In-article — respeita o padding lateral do body mobile */
.mobile-frame .dec-body .dec-ad-inarticle {
  margin: 32px 0 32px;
}
.mobile-frame .dec-body .dec-ad-inarticle .dec-ad-frame {
  height: 250px;     /* MPU clássico em mobile */
}

/* Sidebar rectangle no aside — quando aside vira coluna empilhada
   abaixo do main, centraliza */
.mobile-frame .dec-aside .dec-ad-rectangle .dec-ad-frame {
  max-width: 300px;
  margin: 0 auto;
}
.mobile-frame .dec-ad.is-sticky { position: static; }


/* ═══════════════════════════════════════════════════════════════
   13 · NOTIFICATION PROMPT (soft-ask de push notifications)
   • Card fixo bottom-left (~340px), slide-up entry, cooldown via
     localStorage, dispara o prompt nativo só no click "Permitir".
   • Mobile: bottom-center, ~16px gutters.
   • Em design-canvas (com clip-path no .decode-page), o card fica
     visualmente clipado pelo artboard — feature, não bug.
   ═══════════════════════════════════════════════════════════════ */

.dec-notif {
  position: fixed;
  bottom: 22px;
  left: 22px;
  z-index: 9000;
  width: 340px;
  max-width: calc(100vw - 32px);
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  padding: 16px 18px 16px 16px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow:
    0 24px 56px -16px oklch(0.20 0.04 280 / 0.30),
    0 8px 20px -8px oklch(0.20 0.04 280 / 0.18);
  font-family: var(--font-display);
}
.theme-dark .dec-notif {
  box-shadow:
    0 30px 60px -20px oklch(0 0 0 / 0.55),
    0 0 0 1px oklch(1 0 0 / 0.04);
}

/* Entry/exit animations */
.dec-notif.is-entering {
  animation: decNotifIn 0.32s cubic-bezier(0.22, 0.92, 0.34, 1.04) both;
}
.dec-notif.is-exiting {
  animation: decNotifOut 0.22s cubic-bezier(0.4, 0, 0.7, 0.2) both;
  pointer-events: none;
}
@keyframes decNotifIn {
  0%   { opacity: 0; transform: translate(0, 24px) scale(0.96); }
  100% { opacity: 1; transform: translate(0, 0)    scale(1); }
}
@keyframes decNotifOut {
  0%   { opacity: 1; transform: translate(0, 0)     scale(1); }
  100% { opacity: 0; transform: translate(0, 12px)  scale(0.97); }
}

/* Close (X) */
.dec-notif-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.dec-notif-close:hover {
  background: var(--bg-elev);
  color: var(--text);
}

/* Icon + halo (sino com pulso sutil cobalto) */
.dec-notif-icon {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-bg);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dec-notif-icon-halo {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.5px solid var(--accent);
  opacity: 0;
  animation: decNotifHalo 2.4s ease-out infinite;
}
@keyframes decNotifHalo {
  0%   { opacity: 0.45; transform: scale(1); }
  70%  { opacity: 0;    transform: scale(1.32); }
  100% { opacity: 0;    transform: scale(1.32); }
}

/* Estado granted — verde editorial, sem halo */
.dec-notif.is-granted .dec-notif-icon {
  background: oklch(0.96 0.06 155);
  color: oklch(0.35 0.16 155);
}
.theme-dark .dec-notif.is-granted .dec-notif-icon {
  background: oklch(0.30 0.12 155);
  color: oklch(0.92 0.10 155);
}
.dec-notif.is-granted .dec-notif-icon-halo { animation: none; opacity: 0; }

/* Content */
.dec-notif-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dec-notif-eyebrow {
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2px;
}
.dec-notif-title {
  font-family: var(--font-serif);
  font-size: 16.5px;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--text);
  text-wrap: balance;
  margin-right: 14px;     /* respeita o X de fechar */
}
.dec-notif-sub {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-mute);
  margin-top: 2px;
  text-wrap: pretty;
}

/* Actions */
.dec-notif-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.dec-notif-btn {
  flex: 1;
  height: 36px;
  padding: 0 14px;
  border-radius: 9px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease, box-shadow 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.dec-notif-btn:disabled {
  opacity: 0.6;
  cursor: progress;
}
.dec-notif-btn-primary {
  background: var(--accent);
  color: oklch(0.99 0 0);
  border: 1px solid var(--accent);
  box-shadow: 0 8px 18px -8px oklch(0.45 0.22 260 / 0.55);
}
.theme-dark .dec-notif-btn-primary {
  color: oklch(0.06 0 0);
}
.dec-notif-btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}
.dec-notif-btn-ghost {
  background: transparent;
  color: var(--text-mute);
  border: 1px solid var(--border);
}
.dec-notif-btn-ghost:hover:not(:disabled) {
  background: var(--bg-elev);
  color: var(--text);
  border-color: var(--border);
}

/* Mobile — bottom-center, full-width minus gutters */
.mobile-frame .dec-notif {
  left: 12px;
  right: 12px;
  bottom: 12px;
  width: auto;
  max-width: none;
  padding: 14px 16px 14px 14px;
}
.mobile-frame .dec-notif-title { font-size: 15.5px; }
.mobile-frame .dec-notif-sub { font-size: 12px; }

/* Reduced motion — corta animações */
@media (prefers-reduced-motion: reduce) {
  .dec-notif.is-entering,
  .dec-notif.is-exiting,
  .dec-notif-icon-halo { animation: none; }
  .dec-notif.is-exiting { opacity: 0; }
}


/* ═══════════════════════════════════════════════════════════════
   14 · SEE ALSO (inset "Veja Também" mid-article)
   • Inset horizontal único — não confundir com a lista de
     relacionados (aside / grid rodapé).
   • Hairlines top + bottom + thumbnail + título serif. Estilo
     NYT / Folha "Related Article" inset.
   • Injetado antes do 2º h2 do corpo (separado do AdSlot do 3º h2).
   ═══════════════════════════════════════════════════════════════ */

.dec-see-also {
  margin: 44px 0;
  padding: 0;
  /* Hairlines top + bottom = identidade editorial. Sem fundo cheio
     pra não competir visualmente com callout / pullquote. */
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.dec-see-also-card {
  display: grid;
  /* Paisagem 108×72 (3:2) preserva melhor a composição 16:9 da capa
     com menos corte do que um quadrado. Se cover_image_url existir,
     vira <img object-fit:cover>; senão, fallback pro bloco listrado. */
  grid-template-columns: 108px 1fr;
  gap: 18px;
  padding: 18px 4px 18px 4px;
  text-decoration: none;
  color: inherit;
  align-items: center;
  position: relative;
  transition: padding-left 0.18s ease;
}
.dec-see-also-card::before {
  /* Barra cobalto fininha à esquerda no hover — sinaliza interatividade
     sem precisar de border-left fixa (que pesaria visualmente). */
  content: "";
  position: absolute;
  left: -4px;
  top: 50%;
  width: 2px;
  height: 0;
  background: var(--accent);
  transform: translateY(-50%);
  transition: height 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.dec-see-also-card:hover {
  padding-left: 14px;
}
.dec-see-also-card:hover::before {
  height: 70%;
}

/* Cover thumbnail — paisagem 108×72 (3:2), formato "mini-hero".
   Quando tem cover_image_url renderiza <img>; sem imagem, mostra
   o bloco listrado com glyph da categoria. */
.dec-see-also-cover {
  position: relative;
  width: 108px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dec-see-also-cover-img {
  width: 100%;
  height: 100%;
  /* object-position: center 30% — mesmo padrão do hero, favorece o
     terço superior onde geralmente está o foco editorial. */
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.dec-see-also-cover-stripes {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    135deg,
    transparent 0 10px,
    oklch(1 0 0 / 0.06) 10px 11px
  );
}
.dec-see-also-cover:not(.has-image)::after {
  /* Vinheta diagonal só no fallback colorido — na foto a própria
     imagem traz contraste, vinheta extra escureceria demais. */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, transparent 40%, oklch(0 0 0 / 0.35) 100%);
}
.dec-see-also-cover-glyph {
  font-family: var(--font-serif);
  font-size: 30px;
  color: oklch(1 0 0 / 0.72);
  position: relative;
  z-index: 1;
  font-weight: 400;
  line-height: 1;
}

/* Body — eyebrow + título + meta */
.dec-see-also-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.dec-see-also-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.dec-see-also-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent-bg);
  color: var(--accent);
  transition: transform 0.18s ease;
}
.dec-see-also-card:hover .dec-see-also-arrow {
  transform: translate(2px, -2px);
}

.dec-see-also-title {
  font-family: var(--font-serif);
  font-size: 25px;
  line-height: 1.18;
  letter-spacing: -0.018em;
  color: var(--text);
  font-weight: 400;
  text-wrap: pretty;
  /* Mín. 2 linhas reservadas — manchete tem peso editorial e o card
     não "encolhe" com títulos curtos. Cap em 2 pra não estourar o
     ritmo do corpo. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.18em * 2);
}
.dec-see-also-card:hover .dec-see-also-title {
  color: var(--accent);
}

.dec-see-also-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 10.5px;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  margin-top: 2px;
}
.dec-see-also-meta-sep { opacity: 0.4; }

/* Mobile — thumbnail menor mantendo proporção paisagem 3:2 */
.mobile-frame .dec-see-also {
  margin: 32px 0;
}
.mobile-frame .dec-see-also-card {
  grid-template-columns: 84px 1fr;
  gap: 14px;
  padding: 14px 4px;
}
.mobile-frame .dec-see-also-card:hover { padding-left: 4px; }
.mobile-frame .dec-see-also-card::before { display: none; }
.mobile-frame .dec-see-also-cover {
  width: 84px;
  height: 56px;
  border-radius: 6px;
}
.mobile-frame .dec-see-also-cover-glyph { font-size: 22px; }
.mobile-frame .dec-see-also-title { font-size: 19px; }
.mobile-frame .dec-see-also-meta { font-size: 10px; }


/* ═══════════════════════════════════════════════════════════════
   15 · COOKIE CONSENT (LGPD) — modelo Globo.com
   • Scrim escurece e BLOQUEIA a navegação até o "Continuar".
   • Card no rodapé: título + texto + 1 botão. Sem toggles.
   ═══════════════════════════════════════════════════════════════ */

.dec-cookie-scrim {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* Sem cookie wall: fundo livre, navegável. O banner só ocupa a base
     e o usuário pode rolar/clicar atrás (modelo Globo, conforme LGPD). */
  background: transparent;
  pointer-events: none;
  padding: 0;
  animation: decScrimIn 0.3s ease both;
}
.dec-cookie-scrim.is-exiting { animation: decScrimOut 0.28s ease both; pointer-events: none; }
@keyframes decScrimIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes decScrimOut { from { opacity: 1; } to { opacity: 0; } }

.dec-cookie {
  --accent: oklch(0.55 0.22 260);
  --accent-strong: oklch(0.45 0.24 260);
  --accent-bg: oklch(0.95 0.04 260);
  width: 100%;
  max-width: 880px;
  margin: clamp(12px, 3vw, 28px);
  pointer-events: auto;
  background: var(--bg-base);
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  box-shadow: 0 24px 60px -18px oklch(0.1 0.03 275 / 0.5);
  padding: clamp(20px, 3vw, 28px);
  font-family: var(--font-display);
}
.theme-dark .dec-cookie {
  --accent: oklch(0.72 0.20 260);
  --accent-bg: oklch(0.30 0.10 260);
  background: oklch(0.18 0.02 275);
  border-color: oklch(1 0 0 / 0.08);
}
.dec-cookie.is-entering { animation: decCookieIn 0.4s cubic-bezier(0.22, 0.92, 0.34, 1.04) both; }
.dec-cookie.is-exiting { animation: decCookieOut 0.26s cubic-bezier(0.4, 0, 0.7, 0.2) both; }
@keyframes decCookieIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes decCookieOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(16px); } }

.dec-cookie-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-serif, "Instrument Serif", serif);
  font-weight: 400;
  font-size: clamp(20px, 2.6vw, 24px);
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 10px;
}
.dec-cookie-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--accent-bg);
  color: var(--accent);
  flex-shrink: 0;
}
.dec-cookie-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-mute);
  margin: 0 0 20px;
  max-width: 70ch;
}
.dec-cookie-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid color-mix(in oklch, var(--accent) 35%, transparent);
  transition: opacity 0.15s ease;
}
.dec-cookie-link:hover { opacity: 0.72; }

.dec-cookie-btn-primary {
  width: 100%;
  height: 50px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: oklch(0.99 0 0);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.12s ease;
}
.theme-dark .dec-cookie-btn-primary { color: oklch(0.06 0 0); }
.dec-cookie-btn-primary:hover { filter: brightness(1.06); }
.dec-cookie-btn-primary:active { transform: translateY(1px); }

@media (min-width: 560px) {
  .dec-cookie-btn-primary { width: auto; min-width: 220px; padding: 0 32px; }
}

/* Mobile: card cola na base, cantos inferiores retos */
.mobile-frame .dec-cookie {
  margin: 0;
  border-radius: 18px 18px 0 0;
  border-bottom: 0;
}
@media (max-width: 559px) {
  .dec-cookie {
    margin: 0;
    border-radius: 18px 18px 0 0;
    border-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dec-cookie-scrim, .dec-cookie.is-entering, .dec-cookie.is-exiting { animation: none; }
  .dec-cookie-scrim.is-exiting, .dec-cookie.is-exiting { opacity: 0; }
}


/* ═══════════════════════════════════════════════════════════════
   16 · DARK-MODE FINE TUNING
   (token flip handles most; just a few cobalt nuances)
   ═══════════════════════════════════════════════════════════════ */

.theme-dark .dec-meta-cat {
  background: oklch(0.89 0.055 256);
  color: oklch(0.32 0.07 262);
  box-shadow: 0 4px 16px -6px oklch(0.10 0.02 260 / 0.6);
}
.theme-dark .dec-related-card:hover {
  box-shadow: 0 20px 40px -16px oklch(0.30 0.18 260 / 0.65);
}
.theme-dark .dec-newsletter {
  background: linear-gradient(180deg, var(--accent-bg) 0%, var(--bg-elev) 100%);
}
.theme-dark .dec-newsletter-input {
  background: var(--bg-base);
  border-color: var(--border);
  color: var(--text);
}
.theme-dark .dec-newsletter-btn {
  background: var(--accent);
  color: oklch(0.06 0 0);
  border-color: var(--accent);
}
.theme-dark .dec-verified-cta {
  background: var(--accent);
  color: oklch(0.06 0 0);
  border-color: var(--accent);
}
.theme-dark .dec-verified-check {
  border-color: var(--bg-elev);
}
.theme-dark .dec-callout {
  background: var(--bg-elev);
}
.theme-dark .dec-blockquote {
  background: var(--bg-elev);
  color: var(--text-mute);
}


/* ═══════════════════════════════════════════════════════════════════
   DECODE HYPE · gesto de energia na página publicada  (decode-hype.jsx)

   Chrome EXCLUSIVO do host publicado — não vai para take-prose.css, que
   governa só o corpo do take (prosa + chrome de prosa). Aqui é ação de
   página, como o rail e o card do autor.

   Cor: âmbar do PING, distinto do cobalto editorial do DECODE. A energia
   tem cor própria em todo o ecossistema e não herda o accent da camada —
   é o que faz o gesto ser reconhecível do Flow ao Decode.
   ═══════════════════════════════════════════════════════════════════ */
.decode-page{ --dh-ping:oklch(0.66 0.15 80); --dh-ping-bright:oklch(0.84 0.17 88); --dh-ping-bg:oklch(0.97 0.035 88); }
.theme-dark .decode-page{ --dh-ping:oklch(0.84 0.17 88); --dh-ping-bright:oklch(0.88 0.18 92); --dh-ping-bg:oklch(0.28 0.055 84); }

/* ── anel de carga · mesma mecânica do raio do Flow e do comentário:
   ~1s de trânsito, commit no FIM. O anel existe para o gesto parecer o
   que é — uma transação —, não um toggle de UI. ── */
.dh-ic{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; flex:0 0 auto; }
.dh-ic-lg{ width:30px; height:30px; }
.dh-ring{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); pointer-events:none; }
.dh-ring circle{ fill:none; stroke-width:1.6; }
.dh-track{ stroke:transparent; }
.dh-prog{ stroke:var(--dh-ping); stroke-linecap:round; stroke-dasharray:66; stroke-dashoffset:66; opacity:0; }
.is-charging .dh-prog{ opacity:1; animation:dhFill 1s linear forwards; }
.is-discharging .dh-prog{ opacity:1; animation:dhDrain 1s linear forwards; }
@keyframes dhFill{ from{ stroke-dashoffset:66 } to{ stroke-dashoffset:0 } }
@keyframes dhDrain{ from{ stroke-dashoffset:0 } to{ stroke-dashoffset:66 } }
.dh-bolt{ display:inline-flex; color:var(--text-dim); transition:color .18s, transform .18s; }
.is-on .dh-bolt{ color:var(--dh-ping); }
.is-charging .dh-bolt{ transform:scale(1.14); color:var(--dh-ping); }

/* ── variante RAIL (desktop, ícone-só) ── */
.dh-rail{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; padding:0; border:1px solid var(--border-soft); border-radius:11px; background:var(--bg-elev); cursor:pointer; transition:border-color .16s, background .16s, transform .12s; }
.dh-rail:hover{ border-color:var(--dh-ping); background:var(--dh-ping-bg); transform:translateY(-1px); }
.dh-rail.is-on{ border-color:var(--dh-ping); background:var(--dh-ping-bg); }

/* ── variante PILL (mobile, ao lado do "Salvar take") ── */
.dh-pill{ display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 15px 0 9px; border:1px solid var(--border-soft); border-radius:999px; background:var(--bg-elev); color:var(--text); font-size:13.5px; font-weight:550; cursor:pointer; transition:border-color .16s, background .16s; }
.dh-pill:hover{ border-color:var(--dh-ping); }
.dh-pill.is-on{ border-color:var(--dh-ping); background:var(--dh-ping-bg); color:var(--dh-ping); }

/* ── CTA de fechamento · o lugar PRIMÁRIO ──
   Filete âmbar à esquerda em vez de card cheio: o bloco fecha a leitura,
   não compete com ela. Sobe de tom só quando hypado. ── */
.dh-cta{ margin:44px 0 8px; padding:26px 28px; border:1px solid var(--border-soft); border-left:3px solid var(--dh-ping); border-radius:4px 14px 14px 4px; background:var(--bg-elev); transition:background .3s, border-color .3s; }
.dh-cta.is-on{ background:var(--dh-ping-bg); border-color:color-mix(in oklch, var(--dh-ping) 34%, var(--border-soft)); }
.dh-cta-eyebrow{ display:block; font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--dh-ping); margin-bottom:7px; }
.dh-cta-title{ margin:0 0 9px; font-family:var(--font-display, inherit); font-size:clamp(19px,2.2vw,23px); line-height:1.22; letter-spacing:-.02em; font-weight:600; color:var(--text); }
.dh-cta-body{ margin:0; font-size:14.5px; line-height:1.62; color:var(--text-muted, var(--text-dim)); max-width:64ch; text-wrap:pretty; }
.dh-cta-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:20px; }
.dh-cta-hype{ display:inline-flex; align-items:center; gap:9px; height:46px; padding:0 22px 0 12px; border:0; border-radius:999px; background:var(--text); color:var(--bg-base, #fff); font-size:15px; font-weight:600; letter-spacing:-.01em; cursor:pointer; transition:transform .12s, background .2s; }
.dh-cta-hype:hover{ transform:translateY(-1px); }
.dh-cta-hype .dh-bolt{ color:var(--dh-ping-bright); }
.dh-cta-hype.is-on{ background:var(--dh-ping); color:oklch(0.22 0.03 80); }
.dh-cta-hype.is-on .dh-bolt{ color:oklch(0.22 0.03 80); }
.dh-cta-hype .dh-prog{ stroke:var(--dh-ping-bright); }
/* o Salvar vira PAR do Hypar aqui: mesma altura, mesmo raio, largura de conteúdo */
.dh-cta .dec-save-pill{ width:auto; min-height:46px; padding:0 22px; border-radius:999px; font-size:15px; font-weight:600; letter-spacing:-.01em; }
.dh-cta-hype.is-on .dh-prog{ stroke:oklch(0.22 0.03 80); }
/* Os DOIS números, lado a lado — e eles NÃO se somam:
     resultante  = PING depositado, move a FILA (queima 1:1, sem multiplicador)
     Índice Hype = o que a atenção credita na CASA (aí o fator da liga entra)
   Um número só confundiria posição com placar. */
.dh-cta-score{ display:flex; align-items:baseline; gap:26px; flex-wrap:wrap; margin-top:20px; padding-top:16px; border-top:1px solid color-mix(in oklch, var(--dh-ping) 22%, var(--border-soft)); }
.dh-cta-num{ display:flex; flex-direction:column; gap:2px; }
/* alcance: mesmo peso dos outros, mas em tom neutro — não é energia paga */
.dh-cta-num.is-reach .dh-cta-res-n{ color:var(--text); }
.dh-cta-num.is-reach .dh-reach-eye{ width:14px; height:14px; color:var(--text-dim); }
.dh-cta-num.is-idx{ margin-left:auto; align-items:flex-end; text-align:right; }
/* a REGRA da liga, em prosa: a aritmética fica implícita e o [i] guarda o resto */
.dh-cta-rule{ margin:12px 0 0; font-size:12.5px; line-height:1.5; color:var(--text-dim); }
.dh-cta-rule .dh-reach-liga{ color:var(--text); font-weight:650; }
.dh-cta-res{ margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:1px; }
.dh-cta-res-n{ display:inline-flex; align-items:center; gap:4px; font-size:21px; font-weight:600; letter-spacing:-.02em; color:var(--dh-ping); font-variant-numeric:tabular-nums; }
.dh-cta-res-l{ font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim); }
.dh-cta-delta{ font-style:normal; font-size:12px; font-weight:600; margin-left:5px; padding:1px 5px; border-radius:5px; background:color-mix(in oklch, var(--dh-ping) 20%, transparent); animation:dhPop .34s ease-out; }
@keyframes dhPop{ from{ opacity:0; transform:translateY(4px) scale(.9) } to{ opacity:1; transform:none } }
.dh-cta-thanks{ margin:14px 0 0; font-size:12px; color:var(--dh-ping); }
.dh-cta-method{ display:inline-block; margin-top:14px; font-size:11.5px; color:var(--text-dim); text-decoration:none; border-bottom:1px solid var(--border-soft); }
.dh-cta-method:hover{ color:var(--dh-ping); border-bottom-color:var(--dh-ping); }
@media(max-width:620px){
  .dh-cta{ padding:22px 20px; }
  .dh-cta-actions{ gap:10px; }
  .dh-cta-res{ margin-left:0; align-items:flex-start; width:100%; }
  .dh-cta-score{ gap:14px; }
}
/* no mobile o Hypar entra ao lado do "Salvar take" que já existia */
.mobile-frame .dec-mobile-save{ gap:9px; flex-wrap:wrap; }


/* ── liga no breadcrumb do hero · a ARENA onde o take compete ──
   `category` é o FORMATO (Take, Clip, Foto); `liga` é a fila. O ponto usa a
   cor da liga no registro do Grão, e o ×N é o fator vivo — mesma fonte da
   cotação publicada na §6 do Índice Hype. Sem registro, degrada para o chip
   sem número: melhor nenhum número que um número errado. */
.dec-meta-liga{ text-decoration:none; color:inherit; transition:opacity .16s; }
.dec-meta-liga:hover{ opacity:.7; }
.dec-meta-liga-dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); flex:0 0 auto; }
.dec-meta-liga-x{ font-size:.86em; font-weight:600; padding:1px 5px; border-radius:5px; background:color-mix(in oklch, var(--dh-ping, oklch(0.66 0.15 80)) 17%, transparent); color:color-mix(in oklch, var(--dh-ping, oklch(0.66 0.15 80)) 72%, var(--text)); font-variant-numeric:tabular-nums; }
.dec-meta-sep{ opacity:.4; }


/* ── chrome do alcance · vive DENTRO do CTA (decode-hype.jsx) ──
   Eram duas molduras — a do alcance e a do gesto — e viraram uma só. O que
   sobra aqui é o chip da liga, o [i] e o link da placa, reusados na regra e
   no par de números do rodapé do CTA. */
.dh-reach-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--accent); margin-right:6px; vertical-align:1px; }
.dh-reach-liga{ font-weight:650; color:var(--text); }
/* a placa leva ao gráfico da casa — o curioso sai daqui para o índice dela */
.dh-reach-casa{ color:var(--text); font-weight:650; text-decoration:none; border-bottom:1px solid color-mix(in oklch, var(--dh-ping, oklch(0.66 0.15 80)) 45%, transparent); }
.dh-reach-casa:hover{ color:var(--dh-ping, oklch(0.66 0.15 80)); border-bottom-color:var(--dh-ping, oklch(0.66 0.15 80)); }
/* [i] · o detalhe sob demanda. Focável, para chegar sem mouse. */
.dh-reach-i{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; margin-left:5px; border:1px solid var(--border-soft); border-radius:50%; font-size:9.5px; font-weight:700; font-style:italic; color:var(--text-dim); cursor:help; vertical-align:1px; }
.dh-reach-i:hover, .dh-reach-i:focus-visible{ border-color:var(--dh-ping, oklch(0.66 0.15 80)); color:var(--dh-ping, oklch(0.66 0.15 80)); outline:none; }
.dh-reach-tip{ position:absolute; bottom:calc(100% + 9px); left:50%; transform:translateX(-50%) translateY(4px); width:min(340px,78vw); padding:13px 15px; border:1px solid var(--border-soft); border-radius:11px; background:var(--bg-base,var(--bg-elev)); box-shadow:0 18px 40px -14px rgba(20,18,15,.3); font-size:11.5px; font-style:normal; font-weight:400; line-height:1.55; letter-spacing:0; text-transform:none; color:var(--text-muted,var(--text-dim)); text-align:left; opacity:0; visibility:hidden; transition:opacity .16s, transform .16s, visibility .16s; z-index:40; }
.dh-reach-i:hover .dh-reach-tip, .dh-reach-i:focus-visible .dh-reach-tip{ opacity:1; visibility:visible; transform:translateX(-50%); }
.dh-reach-tip a{ display:block; margin-top:9px; font-size:11px; color:var(--dh-ping, oklch(0.66 0.15 80)); text-decoration:none; }
.dh-reach-tip a:hover{ text-decoration:underline; }
@media(max-width:680px){
  /* o tooltip não pode vazar a viewport: ancora à direita no mobile */
  .dh-reach-tip{ left:auto; right:-8px; transform:translateY(4px); }
  .dh-reach-i:hover .dh-reach-tip, .dh-reach-i:focus-visible .dh-reach-tip{ transform:none; }
}


/* ── pulso central de PING · portado do X-Flow (decode-hype.jsx) ──
   Cartão ESCURO fixo no centro da viewport — contraste garantido sobre a
   página clara do take. 0–1s: "0 PING" (anel carregando); 1s: valor + verbo,
   saldo rola e a assinatura sonora toca. Camada inset:0 com grid centraliza
   simétrico; overflow:hidden evita que caixa larga empurre o eixo. */
.dh-pulse-layer{ position:fixed; inset:0; z-index:80; pointer-events:none; display:grid; place-items:center; padding:0 16px 9vh; overflow:hidden; }
.dh-pulse{ pointer-events:none; max-width:100%; display:flex; flex-direction:column; align-items:center; gap:5px; padding:15px 26px 13px; border-radius:16px; background:oklch(0.23 0.012 75 / 0.94); border:1px solid oklch(0.66 0.15 80 / 0.5); box-shadow:0 0 48px oklch(0.66 0.15 80 / 0.26), 0 22px 54px -14px oklch(0 0 0 / 0.55); backdrop-filter:blur(6px); animation:dhPulseIn 3s cubic-bezier(0.2,0.8,0.2,1) forwards; }
.dh-pulse-amt{ display:inline-flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; max-width:100%; text-align:center; font-family:var(--font-mono); font-size:24px; font-weight:650; letter-spacing:-.02em; color:oklch(0.94 0.01 90); transition:color .25s ease; font-variant-numeric:tabular-nums; }
.dh-pulse-amt.is-sent{ color:oklch(0.84 0.16 86); animation:dhAmtPop .36s cubic-bezier(0.2,0.9,0.3,1.45); }
.dh-pulse-verb{ font-size:.56em; font-weight:500; opacity:.82; letter-spacing:.02em; }
.dh-pulse-bal{ font-size:12.5px; color:oklch(0.88 0.008 90); letter-spacing:.01em; }
/* resgate: a devolução fala ciano, como no Flow */
.dh-pulse.is-credit{ border-color:oklch(0.72 0.15 210 / 0.55); box-shadow:0 0 48px oklch(0.72 0.15 210 / 0.32), 0 22px 54px -14px oklch(0 0 0 / 0.55); }
.dh-pulse.is-credit .dh-pulse-amt.is-sent{ color:oklch(0.78 0.13 210); }
@keyframes dhAmtPop{ 0%{ transform:scale(0.84); } 55%{ transform:scale(1.06); } 100%{ transform:scale(1); } }
@keyframes dhPulseIn{ 0%{ opacity:0; transform:translateY(6px) scale(0.82); } 7%{ opacity:1; transform:translateY(0) scale(1); } 82%{ opacity:1; } 100%{ opacity:0; transform:translateY(-8px) scale(0.96); } }
@media (prefers-reduced-motion: reduce){ .dh-pulse{ animation-duration:2.2s; } .dh-pulse-amt.is-sent{ animation:none; } }