/* ==========================================================================
   styles.css — "Os Próximos 4 Anos"
   Todo valor sai dos tokens do design.md (seção 2). Nada solto fora deles.
   Mobile-first. Breakpoints: --bp-sm 600px · --bp-md 900px · --bp-lg 1200px
   (media queries não leem variáveis CSS, então os valores aparecem escritos).
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Cores — só cinzas, nada de #000 ou #FFF como fundo */
  --color-hero: #2A2A2C;
  --color-hero-text: #ECECEA;
  --color-hero-muted: #A3A3A6;
  --color-bg: #EDEDEB;
  --color-bg-alt: #E1E1DE;
  --color-surface: #F6F6F4;
  --color-ink: #1C1C1E;
  --color-ink-hover: #3A3A3D;           /* hover do botão primário em seção clara */
  --color-text: #2B2B2D;
  --color-muted: #5E5E62;
  --color-line: #D2D2CE;
  --color-field: #E6E6E3;
  --color-hero-cta-hover: rgb(255 255 255 / 0.9); /* hover do botão no hero e no rodapé */

  /* Fundo do hero: cor lisa, igual ao componente "ASMR Static Background".
     Quase-preto, não #000 puro. A textura vem só das partículas (main.js). */
  --hero-bg: #0A0A0C;

  /* Botão "Liquid Glass" (21st.dev), variante para fundo escuro, cantos retos.
     Bordas acesas por dentro + leve brilho interno; o vidro distorce o fundo. */
  --shadow-glass:
    0 0 8px rgba(0, 0, 0, 0.03),
    0 2px 6px rgba(0, 0, 0, 0.08),
    inset 3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.09),
    inset -3px -3px 0.5px -3.5px rgba(255, 255, 255, 0.85),
    inset 1px 1px 1px -0.5px rgba(255, 255, 255, 0.6),
    inset -1px -1px 1px -0.5px rgba(255, 255, 255, 0.6),
    inset 0 0 6px 6px rgba(255, 255, 255, 0.12),
    inset 0 0 2px 2px rgba(255, 255, 255, 0.06),
    0 0 12px rgba(0, 0, 0, 0.15);
  --glass-height: 56px;
  --glass-pad: 40px;
  --glass-hover-scale: 1.03;

  /* Tipografia */
  --font-display: "Outfit", system-ui, sans-serif;
  --font-body: "Source Serif 4", Georgia, serif;
  --font-data: "IBM Plex Mono", ui-monospace, monospace;

  /* Escala — valores de celular; desktop sobrescreve a partir de 900px */
  --fs-hero-light: 38px;
  --fs-hero-bold: 56px;
  --fs-h2: 30px;
  --fs-h3: 17px;
  --fs-body: 17px;
  --fs-lead: 18px;
  --fs-stat: 26px;
  --fs-h2-sub: 24px;  /* subtítulo dentro de uma seção (personagens, módulos) */
  --fs-small: 13px;
  --fs-source: 12px;
  --fs-nav: 14px;
  --fw-hero-bold: 500;   /* 2ª linha do título do hero: medium (era 800, depois 600; Lucca pediu mais leve) */

  /* Espaçamento (base 8px) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-12: 96px;
  --space-16: 128px;

  --content-max: 1120px;
  --text-max: 620px;
  --gutter: 24px;
  --section-pad: var(--space-8);   /* era 96px; Lucca pediu seções menos espaçadas */
  --header-h: 72px;

  /* Forma */
  --radius: 0;
  --radius-pill: 999px;   /* só o botão de vidro é redondo; todo o resto continua reto */
  --shadow-card: 0 20px 50px rgba(28, 28, 30, 0.10);
  --border: 1px solid var(--color-line);
  --focus-ring: 2px;

  /* Movimento */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-enter: 400ms;
  --dur-count: 800ms;
  --rise: 16px;
  /* Entrada das seções, medida no vídeo de referência (IMG_9190.MOV) */
  --reveal-word-rise: 0.5em;  /* cada palavra do título sobe meia linha */
  --reveal-stagger: 60ms;     /* intervalo entre uma palavra e a próxima */
  --dur-reveal: 800ms;        /* subida */
  --dur-reveal-fade: 600ms;   /* transparente → nítido */
}

@media (min-width: 900px) {
  :root {
    --fs-hero-light: 64px;
    --fs-hero-bold: 104px;
    --fs-h2: 44px;
    --fs-h3: 18px;
    --fs-body: 18px;
    --fs-lead: 20px;
    --fs-stat: 32px;
    --fs-h2-sub: 30px;
    --gutter: 32px;
    --section-pad: var(--space-12); /* era 128px */
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--color-muted) var(--color-bg);
}

body {
  margin: 0;
  overflow-x: hidden; /* para Safari antigo (iOS < 16), que não conhece clip */
  overflow-x: clip; /* rede de segurança: brilhos e sombras que passam da borda não criam rolagem lateral */
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

::selection { background: var(--color-ink); color: var(--color-surface); }
.hero ::selection,
.site-header ::selection { background: var(--color-hero-text); color: var(--color-hero); }

:focus-visible {
  outline: var(--focus-ring) solid currentColor;
  outline-offset: var(--focus-ring);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: calc(-1 * var(--space-8));
  z-index: 30;
  padding: var(--space-1) var(--space-2);
  background: var(--color-hero-text);
  color: var(--color-hero);
  font: 600 var(--fs-small) / 1.4 var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
}
.skip-link:focus { top: var(--space-2); }

.container {
  width: 100%;
  max-width: calc(var(--content-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Rótulo pequeno (botões, links secundários, tarjas) ---------- */
.label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-small);
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms var(--ease-out);
}
/* Celular estreito: texto do botão pode quebrar em 2 linhas em vez de vazar da tela */
@media (max-width: 399px) {
  .btn { white-space: normal; text-align: center; line-height: 1.3; }
}
.btn--ink { background: var(--color-ink); color: var(--color-surface); }
.btn--ink:hover { background: var(--color-ink-hover); }
.btn--inverse { background: var(--color-hero-text); color: var(--color-hero); }
.btn--inverse:hover { background: var(--color-hero-cta-hover); }
.btn:focus-visible { outline-color: var(--color-hero-text); }
.btn--ink:focus-visible { outline-color: var(--color-ink); }

/* Botão de vidro (hero e rodapé, sobre o carvão) */
.btn--glass {
  position: relative;
  min-height: var(--glass-height);
  padding: 0 var(--glass-pad);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-hero-text);
  font-weight: 500;
  transition: transform 300ms var(--ease-out);
}
.btn--glass::before {
  /* moldura de luz */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--shadow-glass);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .btn--glass:hover { transform: scale(var(--glass-hover-scale)); }
  .btn--glass:active { transform: scale(0.98); }
}

/* Link secundário: caixa-alta pequena, peso leve, sem sublinhado, com seta.
   O hover clareia o texto e empurra a seta. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
  color: var(--color-muted);
  font-weight: 400;
  text-decoration: none;
  transition: color 160ms var(--ease-out);
}
.link-arrow > span { display: inline-block; transition: transform 200ms var(--ease-out); }
.link-arrow:hover { color: var(--color-text); }
@media (prefers-reduced-motion: no-preference) {
  .link-arrow:hover > span { transform: translateX(4px); }
}
.on-dark .link-arrow { color: var(--color-hero-muted); }
.on-dark .link-arrow:hover { color: var(--color-hero-text); }

/* ---------- Logo ---------- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.logo__mark { width: 28px; height: 20px; flex: none; }
.logo__mark path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; }
.logo__four { font-size: 1.18em; }

/* ---------- Header fixo de vidro (ver "Header fixo" no main.js) ----------
   Fica preso no topo durante a rolagem. No alto do hero é transparente; depois
   de rolar, vira vidro (desfoque + leve tinta). O main.js lê a cor da faixa que
   está por baixo e troca data-theme: "dark" = letras claras, "light" = letras
   escuras. Cor das letras e tinta do vidro mudam com fade. */
.site-header {
  --nav-fg: var(--color-hero-text);
  --nav-glass: rgb(10 10 12 / 0.42);
  --nav-line: rgb(236 236 234 / 0.10);
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 25;
  height: var(--header-h);
  color: var(--nav-fg);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    color 0.4s ease,
    background-color 0.4s ease,
    border-color 0.4s ease,
    backdrop-filter 0.4s ease,
    -webkit-backdrop-filter 0.4s ease;
}
.site-header[data-theme="light"] {
  --nav-fg: var(--color-ink);
  --nav-glass: rgb(237 237 235 / 0.55);
  --nav-line: rgb(28 28 30 / 0.08);
}
.site-header.is-scrolled {
  background: var(--nav-glass);
  border-bottom-color: var(--nav-line);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
}
/* Navegador sem desfoque: tinta mais forte, para as letras continuarem legíveis */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.is-scrolled { --nav-glass: rgb(10 10 12 / 0.9); }
  .site-header.is-scrolled[data-theme="light"] { --nav-glass: rgb(237 237 235 / 0.94); }
}
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}
/* Âncoras do menu: o título da seção não fica escondido atrás do header */
main section[id], #fontes { scroll-margin-top: var(--header-h); }
.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
/* Logo solta da coluna, no canto da tela (referência Max Bratsun); o menu fica na coluna */
.site-header .logo {
  position: absolute;
  top: 50%;
  left: var(--gutter);
  transform: translateY(-50%);
}
.site-nav { margin-left: auto; }
.site-nav__list {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-nav);
  text-decoration: none;
  color: inherit; /* segue a cor do header (clara ou escura, com fade) */
}
.site-nav__list a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.site-nav__list .site-nav__cta { font-weight: 600; }

/* Troca de letras no hover (ver "Troca de letras" no main.js) */
.swap__l {
  display: inline-block;
  overflow: hidden;
  height: 1.3em;
  line-height: 1.3em;
  white-space: pre;
}
.swap__l > span {
  position: relative;
  display: block;
}
.swap__l > span::after {
  content: attr(data-l);
  position: absolute;
  top: 100%;
  left: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .site-nav__list a.swap:hover { text-decoration: none; }
  .swap__l > span {
    transition: transform 0.6s cubic-bezier(0.34, 1.4, 0.64, 1) var(--d, 0s);
  }
  .swap:hover .swap__l > span,
  .swap:focus-visible .swap__l > span { transform: translateY(-100%); }
}

.menu-toggle {
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--space-1);
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
}

/* Menu aberto no celular: o header inteiro fica escuro, com o painel carvão embaixo */
.site-header.is-menu-open {
  --nav-fg: var(--color-hero-text);
  background: var(--hero-bg);
  border-bottom-color: transparent;
}
.site-nav.is-open .site-nav__list {
  display: grid;
  position: absolute;
  top: var(--header-h);
  left: 0;
  right: 0;
  gap: var(--space-1);
  padding: var(--space-2) var(--gutter) var(--space-4);
  background: var(--hero-bg);
}
.site-nav.is-open .site-nav__list a { font-size: var(--fs-lead); }

@media (min-width: 900px) {
  .site-nav { margin-right: auto; } /* com o margin-left: auto, centraliza o menu na tela */
  .menu-toggle { display: none; }
  .site-nav__list,
  .site-nav.is-open .site-nav__list {
    display: flex;
    position: static;
    align-items: center;
    gap: var(--space-4);
    padding: 0;
    background: none;
  }
  .site-nav.is-open .site-nav__list a { font-size: var(--fs-nav); }
}

/* ==========================================================================
   01 — HERO
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--hero-bg);
  color: var(--color-hero-text);
}

/* Fundo liso; as partículas são desenhadas no canvas lá dentro */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background: var(--hero-bg);
}

/* Partículas (canvas desenhado pelo main.js) */
.hero__particles {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* Celular: texto → CTA → celulares → dados.
   .hero__content vira "contents" para os filhos entrarem na mesma fila que os celulares.
   Os dados não são focáveis, então a ordem do teclado não muda. */
.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--header-h) + var(--space-4));
  padding-bottom: var(--space-12);
}
.hero__content { display: contents; }
.hero__actions { order: 1; margin-top: var(--space-4); }
.phones { order: 2; margin-top: var(--space-8); }
.hero__data { order: 3; }

.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  text-wrap: balance;
}
.hero__title-light,
.hero__title-bold { display: block; }
.hero__title-light {
  font-weight: 200;
  /* 38px no celular; encolhe em telas de 360px ou menos para não quebrar em duas linhas */
  font-size: min(var(--fs-hero-light), 9.6vw);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.hero__title-bold {
  font-weight: var(--fw-hero-bold);
  /* 56px no celular, mas encolhe em telas estreitas para "já começaram." caber numa linha */
  font-size: min(var(--fs-hero-bold), 12.4vw);
  line-height: 0.95;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* Rótulo de exclusividade acima do título: cadeado + caixa-alta, com moldura fina */
.hero__eyebrow {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--space-1);
  margin: 0 0 var(--space-3);
  padding: 6px 12px;
  border: 1px solid rgb(236 236 234 / 0.28);
  border-radius: var(--radius-pill);
  color: var(--color-hero-text);
  font-size: 11px;
}
.hero__eyebrow svg,
.exclusive__eyebrow svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.hero__sub {
  max-width: 34ch;
  margin: var(--space-3) 0 0;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--color-hero-text);
}

/* Linha de 3 dados */
.stats {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}
.stat {
  display: grid;
  grid-template-columns: calc(var(--fs-stat) * 4.8) 1fr;
  align-items: baseline;
  gap: var(--space-2);
}
.stat__value {
  font-family: var(--font-data);
  font-weight: 500;
  font-size: var(--fs-stat);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--color-hero-text);
}
.stat__legend {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-nav);
  line-height: 1.4;
  color: var(--color-hero-muted);
}
.hero__source {
  margin: var(--space-2) 0 0;
  font-family: var(--font-data);
  font-size: var(--fs-source);
  line-height: 1.5;
  color: var(--color-hero-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}
/* Garantia embaixo do botão do hero: linha inteira, escudo + texto */
.hero__guarantee {
  flex-basis: 100%;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 460px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-hero-text);
}
.hero__guarantee svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}

@media (min-width: 600px) {
  .stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    max-width: 640px;
  }
  .stat {
    grid-template-columns: none;
    gap: var(--space-1);
  }
}

/* Desktop: texto à esquerda, celulares à direita */
@media (min-width: 900px) {
  .hero {
    min-height: 100svh;
    display: flex;
    align-items: center;
  }
  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    align-items: center;
    gap: var(--space-6);
    padding-top: calc(var(--header-h) + var(--space-4));
    padding-bottom: var(--space-8);
  }
  .hero__content {
    display: flex;
    flex-direction: column;
  }
  .phones { margin-top: 0; }
  .hero__actions { margin-top: var(--space-6); }
  /* Os títulos encolhem um pouco para dividir a largura com os celulares */
  .hero__title-light { font-size: clamp(44px, 4.4vw, var(--fs-hero-light)); }
  .hero__title-bold { font-size: clamp(60px, 6vw, var(--fs-hero-bold)); }
  .hero__sub { max-width: 38ch; margin-top: var(--space-4); }
  .stats { margin-top: var(--space-6); }
}

/* ---------- Carrossel de celulares (hero) ----------
   Versão sem React do componente "phone-mockups-1".
   O celular é exceção ao "tudo reto" do design.md: um celular tem cantos redondos. */
.phones {
  --phone-w: min(280px, 74vw);
  --phone-r: 46px;
  --phone-bezel: 4px;               /* aro de titânio */
  --phone-border: 8px;              /* borda preta em volta da tela */
  position: relative;
  width: 100%;
}
.phones__stage {
  position: relative;
  height: calc(var(--phone-w) * 19.5 / 9 + 40px);   /* + espaço para a sombra no chão */
  perspective: 1400px;
  touch-action: pan-y;               /* rolar a página continua; o arrasto lateral troca a tela */
  user-select: none;
  -webkit-user-select: none;
}
.phone-slide {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--phone-w);
  transform: translateX(-50%);
  transition:
    transform 700ms var(--ease-out),
    opacity 500ms var(--ease-out),
    filter 500ms var(--ease-out);
}
.phone-slide[data-pos="0"]  { z-index: 3; }
.phone-slide[data-pos="-1"],
.phone-slide[data-pos="1"]  { z-index: 2; opacity: 0.45; filter: grayscale(1) brightness(0.8); cursor: pointer; }
.phone-slide[data-pos="-1"] { transform: translateX(-112%) scale(0.82) rotateY(14deg); }
.phone-slide[data-pos="1"]  { transform: translateX(12%) scale(0.82) rotateY(-14deg); }
.phone-slide[data-pos="-1"]:hover,
.phone-slide[data-pos="1"]:hover { opacity: 0.65; }
@media (prefers-reduced-motion: reduce) {
  .phone-slide { transition: none; }
}

/* Corpo do celular: aro de titânio escovado (degradê) + borda preta + tela.
   Botões laterais em ::before/::after; sombra no chão em .phone-slide::after. */
.phone {
  position: relative;
  aspect-ratio: 9 / 19.5;
  padding: var(--phone-bezel);
  border-radius: var(--phone-r);
  background:
    linear-gradient(145deg, #8A8A8E 0%, #3A3A3D 18%, #1E1E20 45%, #4A4A4E 72%, #9A9A9E 100%);
  box-shadow:
    0 50px 80px -20px rgba(0, 0, 0, 0.7),
    0 20px 40px -10px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 1px 1px rgba(255, 255, 255, 0.35);
}
/* botões: ação + volume à esquerda, power à direita */
.phone::before,
.phone::after {
  content: "";
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #2A2A2C, #77777B);
}
.phone::before {
  left: -3px;
  top: 22%;
  height: 13%;
}
.phone::after {
  right: -3px;
  top: 28%;
  height: 16%;
  background: linear-gradient(270deg, #2A2A2C, #77777B);
}
.phone__screen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: var(--phone-border) solid #08080A;
  border-radius: calc(var(--phone-r) - var(--phone-bezel));
  background: var(--color-surface);
  color: var(--color-text);
}
/* Reflexo do vidro: faixa diagonal sutil + ponto de luz que segue o mouse (--tx/--ty, ver initTilt no main.js) */
.phone__glare {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(circle at calc(50% - var(--tx, 0) * 45%) calc(35% - var(--ty, 0) * 45%), rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 45%),
    linear-gradient(115deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0) 68%, rgba(255, 255, 255, 0.06) 100%);
}
.phone { transform-origin: 50% 50%; will-change: transform; }
.phone__island {
  position: absolute;
  top: 8px;
  left: 50%;
  z-index: 4;
  width: 32%;
  height: 24px;
  border-radius: var(--radius-pill);
  background: #08080A;
  transform: translateX(-50%);
}
/* Sombra no chão, embaixo do celular da frente */
.phone-slide::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -26px;
  height: 22px;
  border-radius: 50%;
  /* degradê já é macio: sem filter blur, que pesa quando o celular se move */
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0));
  z-index: -1;
}

/* ---------- Tela do celular = o app de verdade ----------
   Cópia em miniatura da interface de servidor/publico/app (cores e componentes
   tirados do app.css de lá). A tela tem ~264px; o app foi desenhado para 375px,
   então as medidas aqui são as do app × ~0,72. Se o app mudar, mude aqui. */
.pa {
  --pa-bg: #F3F2EF;
  --pa-surface: #E9E8E4;
  --pa-ink: #161618;
  --pa-text: #2A2A2C;
  --pa-muted: #6A6A6E;
  --pa-line: #D6D5D0;
  --pa-dark: #222224;
  --pa-on-dark: #F3F2EF;
  --pa-on-dark-muted: #B5B5B8;
  --pa-accent: #F2B84B;
  --pa-accent-soft: #F7D48F;
  --pa-accent-ink: #A86B12;
  --pa-g: 14px;                       /* margem lateral */
  background: var(--pa-bg);
  color: var(--pa-text);
}

.phone__status {
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  padding: 0 20px 0 26px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--pa-ink);
}
.phone__icons { display: inline-flex; gap: 5px; align-items: center; }
.phone__icons svg { height: 11px; width: auto; fill: var(--pa-ink); }
.phone__icons .phone__batt { fill: none; stroke: var(--pa-muted); }

/* Conteúdo rolável entre o topo e a barra de abas */
.phone__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.phone__body::-webkit-scrollbar { display: none; }

.pa-ico {
  width: 17px;
  height: 17px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Cabeçalho da marca */
.pa-marca {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 var(--pa-g);
  padding: 2px 0 9px;
  border-bottom: 1px solid var(--pa-line);
}
.pa-marca__avatar {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 18%;
  background: var(--pa-surface);
}
.pa-marca__simbolo { width: 20px; height: 14px; flex: none; color: var(--pa-ink); }
.pa-marca__simbolo path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; stroke-linejoin: miter; }
.pa-marca__texto { flex: 1; min-width: 0; overflow: hidden; padding-left: 7px; border-left: 1px solid var(--pa-line); line-height: 1.1; }
.pa-marca__nome {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: -0.01em;
  color: var(--pa-ink);
  white-space: nowrap;
}
.pa-marca__quatro { font-size: 1.18em; }
.pa-marca__por { display: block; margin-top: 1px; font-size: 8.5px; color: var(--pa-text); white-space: nowrap; }
.pa-marca__acoes { display: flex; align-items: center; gap: 5px; color: var(--pa-ink); }
.pa-marca__acoes .pa-ico { width: 15px; height: 15px; }
.pa-marca__sep { width: 1px; height: 16px; background: var(--pa-line); }

/* Barra de leitura da notícia */
.pa-topo {
  flex: none;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 2px var(--pa-g) 9px;
  border-bottom: 1px solid var(--pa-line);
  font-family: var(--font-display);
  color: var(--pa-ink);
}
.pa-topo__voltar { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 11px; }
.pa-topo__voltar .pa-ico { width: 14px; height: 14px; }
.pa-topo__nome { text-align: center; font-weight: 800; font-size: 10.5px; letter-spacing: -0.01em; white-space: nowrap; }
.pa-topo__acoes { display: inline-flex; align-items: center; gap: 8px; }
.pa-topo__aa { font-weight: 600; font-size: 12px; }
.pa-topo__acoes .pa-ico { width: 14px; height: 14px; }

/* Barra de abas */
.pa-abas {
  flex: none;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 7px 4px 16px;               /* embaixo: espaço da barrinha do iPhone */
  border-top: 1px solid var(--pa-line);
  background: var(--pa-bg);
}
.pa-abas::after {                      /* barrinha de gesto */
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 34%;
  height: 3px;
  border-radius: 3px;
  background: var(--pa-ink);
  transform: translateX(-50%);
}
.pa-abas__item {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  font-family: var(--font-display);
  font-size: 7.5px;
  color: var(--pa-muted);
}
.pa-abas__item .pa-ico { width: 16px; height: 16px; }
.pa-abas__item.is-on { color: var(--pa-ink); font-weight: 700; }
.pa-abas__item.is-on::before {          /* risquinho amarelo em cima da aba ativa */
  content: "";
  position: absolute;
  top: -8px;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--pa-accent);
}
.pa-abas__badge {
  position: absolute;
  top: -4px;
  left: calc(50% + 3px);
  min-width: 12px;
  height: 12px;
  padding: 0 3px;
  border-radius: 6px;
  background: var(--pa-accent);
  color: var(--pa-ink);
  font-size: 7.5px;
  font-weight: 700;
  line-height: 12px;
  text-align: center;
}
.pa-abas__ponto {
  position: absolute;
  top: -1px;
  left: calc(50% + 5px);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pa-accent);
}

/* Texto comum das telas */
.pa-tela { padding: 12px var(--pa-g) 28px; }
.pa-eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pa-muted);
}
.pa-h1 {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 23px;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--pa-ink);
}
.pa-lead { margin: 6px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--pa-text); }
.pa-corpo { margin: 6px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--pa-text); }
.pa-novo {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 7.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pa-accent-ink);
}
.pa-novo::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--pa-accent); }
.pa-novo--chip {
  margin-left: 0;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--pa-accent-soft);
  color: var(--pa-ink);
}
.pa-novo--chip::before { display: none; }
.pa-lida {
  margin-left: 6px;
  font-family: var(--font-display);
  font-size: 8px;
  color: var(--pa-muted);
}

/* Hoje: cartão de progresso */
.pa-progresso {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 11px 12px;
  border-radius: 10px;
  background: var(--pa-dark);
  color: var(--pa-on-dark);
}
.pa-progresso__anel {
  --p: 0;
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, var(--pa-dark) 86%, transparent 88%),
    conic-gradient(var(--pa-accent) calc(var(--p) * 360deg), rgb(242 184 75 / 0.35) 0);
}
.pa-progresso__num { font-family: var(--font-display); font-weight: 800; font-size: 19px; line-height: 1; }
.pa-progresso__num small { font-size: 10px; font-weight: 500; color: var(--pa-on-dark-muted); }
.pa-progresso__txt { display: grid; gap: 7px; min-width: 0; }
.pa-progresso__txt strong { font-family: var(--font-display); font-weight: 700; font-size: 11.5px; line-height: 1.2; }
.pa-progresso__barras { display: flex; gap: 3px; }
.pa-progresso__barras span { flex: 1; height: 3px; border-radius: 2px; background: rgb(243 242 239 / 0.22); }
.pa-progresso__barras .is-on { background: var(--pa-accent); }

/* Hoje: linha do tempo */
.pa-linha { margin: 14px 0 0; padding: 0; list-style: none; }
.pa-linha__item {
  position: relative;
  display: grid;
  grid-template-columns: 30px 14px 1fr;
  gap: 4px;
  align-items: start;
  padding-bottom: 9px;
}
.pa-linha__item::before {               /* fio vertical */
  content: "";
  position: absolute;
  left: 40px;
  top: 14px;
  bottom: 0;
  width: 1.5px;
  background: var(--pa-line);
}
.pa-linha__item:last-child::before { display: none; }
.pa-linha__hora {
  padding-top: 11px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 9px;
  color: var(--pa-text);
}
.pa-linha__no {
  position: relative;
  z-index: 1;
  width: 11px;
  height: 11px;
  margin-top: 11px;
  border: 1.5px solid var(--pa-accent);
  border-radius: 50%;
  background: var(--pa-bg);
}
.pa-linha__no.is-lida { background: var(--pa-accent); }
.pa-card {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 9px;
  border-radius: 9px;
  background: var(--pa-surface);
}
.pa-card--resumo { background: var(--pa-dark); color: var(--pa-on-dark); }
.pa-card--educativo { background: #F6EBD3; box-shadow: inset 0 0 0 1px var(--pa-accent-soft); }
.pa-card__txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pa-card__rotulo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 7.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pa-muted);
}
.pa-card--resumo .pa-card__rotulo { color: var(--pa-on-dark-muted); }
.pa-card__titulo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--pa-ink);
}
.pa-card--resumo .pa-card__titulo { color: var(--pa-on-dark); }
.pa-card__meta { font-family: var(--font-display); font-size: 8.5px; color: var(--pa-muted); }
.pa-card--resumo .pa-card__meta { color: var(--pa-on-dark-muted); }
.pa-card__thumb { flex: none; width: 52px; height: 40px; overflow: hidden; border-radius: 6px; background: var(--pa-line); }
.pa-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pa-card__icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--pa-accent);
  color: var(--pa-ink);
}
.pa-card--educativo .pa-card__icone { background: var(--pa-accent-soft); }

/* Notícia aberta */
.pa-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pa-ink);
}
.pa-artigo__titulo {
  margin: 7px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--pa-ink);
}
.pa-autor {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.pa-autor img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; }
.pa-autor__txt { display: grid; gap: 1px; padding-left: 8px; border-left: 1px solid var(--pa-line); line-height: 1.25; }
.pa-autor__txt strong { font-family: var(--font-display); font-weight: 700; font-size: 10.5px; color: var(--pa-ink); }
.pa-autor__txt span { font-family: var(--font-display); font-size: 8.5px; color: var(--pa-muted); }
.pa-foto { margin-top: 10px; overflow: hidden; border-radius: 9px; aspect-ratio: 16 / 9; background: var(--pa-line); }
.pa-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* profundidade: a foto anda um pouco ao contrário da inclinação (ver initTilt) */
  transform: translate(calc(var(--tx, 0) * -6px), calc(var(--ty, 0) * -6px)) scale(1.06);
}
.pa-secao {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pa-ink);
}
.pa-traduzida {
  margin-top: 12px;
  padding: 2px 10px 10px;
  border-radius: 9px;
  background: var(--pa-surface);
  box-shadow: inset 2px 0 0 var(--pa-ink);
}
.pa-traduzida .pa-secao { margin-top: 8px; }
.pa-traduzida .pa-corpo { color: var(--pa-ink); }
.pa-h2 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--pa-ink);
}
.pa-h2 .pa-ico { width: 18px; height: 18px; }
.pa-pratica {
  margin-top: 9px;
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--pa-surface);
  box-shadow: inset 2px 0 0 var(--pa-accent);
  font-size: 11px;
  line-height: 1.45;
}
.pa-pratica strong { font-family: var(--font-display); font-weight: 700; font-size: 10.5px; color: var(--pa-ink); }
.pa-pratica p { margin: 2px 0 0; }
.pa-observar { margin: 8px 0 0; padding: 0; list-style: none; }
.pa-observar li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--pa-line); }
.pa-observar__n {
  flex: none;
  align-self: start;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--pa-surface);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 8.5px;
  color: var(--pa-ink);
}
.pa-observar__txt { display: grid; gap: 1px; font-size: 11px; line-height: 1.4; }
.pa-observar__txt strong { font-family: var(--font-display); font-weight: 700; font-size: 11px; color: var(--pa-ink); }
.pa-h3 {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -0.01em;
  color: var(--pa-ink);
}
.pa-termos { margin: 4px 0 0; padding: 0; list-style: none; }
.pa-termos li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--pa-line);
}
.pa-termos li > span { flex: 1; display: grid; gap: 1px; font-size: 10.5px; line-height: 1.35; }
.pa-termos strong { font-family: var(--font-display); font-weight: 700; font-size: 11px; color: var(--pa-ink); }
.pa-termos .pa-ico { width: 13px; height: 13px; color: var(--pa-ink); }

/* Resumo */
.pa-dia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--pa-ink);
}
.pa-dia > .pa-ico { width: 15px; height: 15px; }
.pa-dia > .pa-ico.is-off { color: var(--pa-line); }
.pa-dia__txt { display: grid; justify-items: center; gap: 2px; }
.pa-dia__data { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-display); font-weight: 700; font-size: 11.5px; }
.pa-dia__data .pa-ico { width: 13px; height: 13px; }
.pa-dia__rotulo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 7.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pa-muted);
}
.pa-dia + .pa-h1 { margin-top: 14px; }
.pa-faixa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 14px 0 0;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--pa-line);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pa-ink);
}
.pa-faixa .pa-ico { width: 13px; height: 13px; }
.pa-faixa small { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--pa-muted); }
.pa-destaques { margin: 0; padding: 0; list-style: none; }
.pa-destaques li {
  display: grid;
  grid-template-columns: 18px 1fr 52px;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--pa-line);
}
.pa-destaques__n { font-family: var(--font-display); font-size: 9px; color: var(--pa-muted); padding-top: 1px; }
.pa-destaques__txt {
  display: grid;
  gap: 2px;
  padding-left: 7px;
  border-left: 1.5px solid var(--pa-accent);
  font-size: 9.5px;
  line-height: 1.35;
}
.pa-destaques__txt strong { font-family: var(--font-display); font-weight: 800; font-size: 11.5px; line-height: 1.15; color: var(--pa-ink); }
.pa-destaques__thumb { align-self: center; height: 40px; overflow: hidden; border-radius: 6px; background: var(--pa-line); }
.pa-destaques__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pa-prosa strong {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--pa-ink);
  text-decoration: underline;
  text-decoration-color: var(--pa-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
.pa-edu,
.pa-amanha {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  padding: 11px;
  border-radius: 10px;
  background: var(--pa-surface);
  color: var(--pa-ink);
}
.pa-edu > .pa-ico,
.pa-amanha > .pa-ico { width: 18px; height: 18px; margin-top: 2px; }
.pa-edu__txt,
.pa-amanha__txt { display: grid; justify-items: start; gap: 4px; font-size: 10.5px; line-height: 1.4; }
.pa-edu__txt strong,
.pa-amanha__txt strong { font-family: var(--font-display); font-weight: 800; font-size: 13px; line-height: 1.15; }
.pa-amanha { background: var(--pa-dark); color: var(--pa-on-dark); }
.pa-amanha__txt span { color: var(--pa-on-dark-muted); }

/* Controles: ← abas → */
.phones__controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-3);
}
.phones__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.phones__tab,
.phones__arrow {
  min-height: 44px;
  padding: 0 var(--space-2);
  border: 0;
  background: transparent;
  color: var(--color-hero-muted);
  cursor: pointer;
  transition: color 160ms var(--ease-out);
}
.phones__arrow {
  min-width: 44px;
  padding: 0;
  font-family: var(--font-display);
  font-size: 18px;
}
.phones__tab { font-size: 11px; position: relative; }
.phones__tab::after {
  content: "";
  position: absolute;
  left: var(--space-2);
  right: var(--space-2);
  bottom: 10px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform 300ms var(--ease-out);
}
.phones__tab[aria-pressed="true"] { color: var(--color-hero-text); }
.phones__tab[aria-pressed="true"]::after { transform: scaleX(1); }
.phones__tab:hover,
.phones__arrow:hover { color: var(--color-hero-text); }
.phones__caption {
  margin: var(--space-1) 0 0;
  text-align: center;
  font-family: var(--font-data);
  font-size: var(--fs-source);
  color: var(--color-hero-muted);
}

/* Celular estreito: sem setas (o arrasto e as abas fazem o trabalho), abas numa linha só */
@media (max-width: 599px) {
  .phones__arrow { display: none; }
  .phones__tabs { flex-wrap: nowrap; gap: 0; }
  .phones__tab { padding: 0 var(--space-1); }
  .phones__tab::after { left: var(--space-1); right: var(--space-1); }
}

@media (min-width: 900px) {
  .phones { --phone-w: clamp(250px, calc((100svh - 300px) * 9 / 19.5), 310px); }
}

/* ==========================================================================
   Seções claras (a partir do bloco 02, método da referência Authentik)
   ========================================================================== */
.section {
  padding-block: var(--section-pad);
  background: var(--color-bg);
  color: var(--color-text);
}
.section__title {
  margin: 0;
  max-width: 20ch;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.section__lead {
  max-width: var(--text-max);
  margin: var(--space-2) 0 0;
  font-size: var(--fs-lead);
  line-height: 1.55;
}
.section__title + .section__lead { margin-top: var(--space-3); }  /* respiro entre título e texto */
.section__note {
  max-width: var(--text-max);
  margin: var(--space-8) 0 var(--space-2);
  font-family: var(--font-data);
  font-size: var(--fs-source);
  line-height: 1.5;
  color: var(--color-muted);
}

/* CTA da seção: logo abaixo do texto de abertura, alinhado à esquerda */
.section__cta { margin-top: var(--space-4); }

/* ---------- Botão de metal líquido (componente LiquidMetalButton, ver main.js) ----------
   Exceção pedida pelo Lucca: é redondo, animado e usa o preto do componente. */
.metal-btn {
  --metal-h: 44px; /* componente usa 46px; 44px é o mínimo de toque do design.md */
  --metal-face-top: #202020;
  --metal-face-bottom: #000000;
  --metal-label: var(--color-hero-muted); /* o #666 do componente quase sumia no preto */
  --metal-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  --metal-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 36px 14px 0 rgba(0, 0, 0, 0.02), 0 20px 12px 0 rgba(0, 0, 0, 0.08), 0 9px 9px 0 rgba(0, 0, 0, 0.12), 0 2px 5px 0 rgba(0, 0, 0, 0.15);
  --metal-shadow-hover: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 12px 6px 0 rgba(0, 0, 0, 0.05), 0 8px 5px 0 rgba(0, 0, 0, 0.1), 0 4px 4px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --metal-shadow-press: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--metal-h);
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  perspective: 1000px;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.metal-btn:focus-visible { outline-offset: 3px; }

.metal-btn__shadow,
.metal-btn__shader,
.metal-btn__face,
.metal-btn__fx {
  position: absolute;
  border-radius: var(--radius-pill);
}
/* Base: sombra em volta + aro de metal (o shader desenha aqui) */
.metal-btn__shadow {
  inset: 0;
  z-index: 1;
  box-shadow: var(--metal-shadow);
}
.metal-btn__shader {
  inset: 0;
  overflow: hidden;
  /* reserva enquanto o shader carrega, ou se não carregar */
  background: linear-gradient(135deg, #8E8E91 0%, #E4E4E2 30%, #6F6F73 55%, #D6D6D4 80%, #9B9B9E 100%);
}
.metal-btn__shader canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit;
}
/* Miolo preto, 2px para dentro: o metal aparece só como aro */
.metal-btn__face {
  inset: 2px;
  z-index: 2;
  background: linear-gradient(180deg, var(--metal-face-top) 0%, var(--metal-face-bottom) 100%);
  transform: translateZ(10px);
}
.metal-btn__label {
  position: relative;
  z-index: 3;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: var(--metal-label);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  transform: translateZ(20px);
  pointer-events: none;
}
.metal-btn__fx {
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}
.metal-btn__ripple {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 70%);
  transform: translate(-50%, -50%) scale(0);
  animation: metal-ripple 0.6s ease-out forwards;
}

.metal-btn:hover .metal-btn__shadow { box-shadow: var(--metal-shadow-hover); }
.metal-btn.is-pressed .metal-btn__shadow {
  box-shadow: var(--metal-shadow-press);
  transform: translateY(1px) scale(0.98);
}
.metal-btn.is-pressed .metal-btn__face {
  transform: translateZ(10px) translateY(1px) scale(0.98);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

@media (prefers-reduced-motion: no-preference) {
  .metal-btn__shadow,
  .metal-btn__face {
    transition: transform 0.8s var(--metal-ease), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  }
}
@keyframes metal-ripple {
  from { transform: translate(-50%, -50%) scale(0); opacity: 0.6; }
  to { transform: translate(-50%, -50%) scale(4); opacity: 0; }
}

/* Grade de 3 colunas: ícone de traço, título com ponto, texto em serifa */
.grid-3 {
  display: grid;
  gap: var(--space-8);
  margin: var(--space-6) 0 0; /* era 96px entre o CTA e as colunas */
  padding: 0;
  list-style: none;
}
.icon {
  display: block;
  width: 40px;
  height: 40px;
  fill: none;
  stroke: var(--color-ink);
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.grid-3__title {
  margin: var(--space-3) 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--color-ink);
}
.grid-3__stat {
  margin: var(--space-1) 0 0;
  font-family: var(--font-data);
  font-weight: 500;
  font-size: var(--fs-stat);
  line-height: 1.1;
  color: var(--color-ink);
}
.grid-3__text {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-body);
  line-height: 1.65;
}
.grid-3__text--muted { color: var(--color-muted); }
.source {
  margin: var(--space-2) 0 0;
  font-family: var(--font-data);
  font-size: var(--fs-source);
  line-height: 1.5;
  color: var(--color-muted);
}

@media (min-width: 900px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
}
/* Grade sem ícone: o título abre o item */
.grid-3--plain .grid-3__title { margin-top: 0; }

/* ==========================================================================
   03 — COMO FUNCIONA
   ========================================================================== */
.section--alt { background: var(--color-bg-alt); }

/* A seção 03 é feita de faixas: cada uma tem o próprio fundo e o próprio respiro */
.como { padding-block: 0; }
.como__band {
  padding-block: var(--section-pad);
  background: var(--color-bg-alt);
}
.como__band .section__subtitle { margin-top: 0; }

/* Faixa preta dos personagens (pedido do Lucca): o mesmo quase-preto do hero, não #000 */
.como__band--dark {
  background: var(--hero-bg);
  color: var(--color-hero-text);
}
.como__band--dark .section__subtitle,
.como__band--dark .grid-3__title { color: var(--color-hero-text); }
.como__band--dark .source { color: var(--color-hero-muted); }
.como__band--dark ::selection { background: var(--color-hero-text); color: var(--hero-bg); }

/* Rótulo pequeno acima do título */
.section__eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--color-muted);
}

/* Subtítulo dentro da seção (personagens, módulos) */
.section__subtitle {
  margin: var(--space-12) 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h2-sub);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.section__subtitle + .grid-3,
.section__subtitle + .modules { margin-top: var(--space-4); }

/* Contagem: 4 rodadas · 3 cenários · 7 módulos */
.count {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-8);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}
.count__item { display: grid; gap: 2px; }
.count__n {
  font-family: var(--font-data);
  font-weight: 500;
  font-size: var(--fs-stat);
  line-height: 1.1;
  color: var(--color-ink);
}
.count__label {
  font-family: var(--font-display);
  font-size: var(--fs-nav);
  color: var(--color-muted);
}

/* Ciclo de uma rodada (esquerda) + tela do jogo (direita) */
.como__cycle {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-8);
}
.steps {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.steps__item {
  display: grid;
  grid-template-columns: 3ch 1fr;
  gap: var(--space-2);
}
.steps__n {
  padding-top: 3px;
  font-family: var(--font-data);
  font-size: var(--fs-source);
  color: var(--color-muted);
}
.steps__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--color-ink);
}
.steps__text {
  max-width: 46ch;
  margin: var(--space-1) 0 0;
  font-size: var(--fs-body);
  line-height: 1.6;
}

/* Tela ilustrativa do jogo: card claro com borda, tarja escura no canto (como a legenda do Authentik) */
.mockup {
  position: relative;
  margin: 0;
  align-self: start;
}
.mockup__screen {
  padding: var(--space-4);
  background: var(--color-surface);
  border: var(--border);
}
.mockup__bar {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: var(--border);
  font-family: var(--font-data);
  font-size: var(--fs-source);
  color: var(--color-muted);
}
.mockup__who { color: var(--color-ink); }
.mockup__headline {
  margin: var(--space-3) 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h3);
  line-height: 1.25;
  color: var(--color-ink);
}
/* As 4 partes: número igual ao da lista ao lado, rótulo em caixa-alta, texto em serifa */
.mockup__parts { margin: var(--space-2) 0 0; }
.mockup__part {
  padding: var(--space-2) 0;
  border-top: var(--border);
}
.mockup__part:last-child { padding-bottom: 0; }
.mockup__part-label {
  display: flex;
  gap: var(--space-1);
  align-items: baseline;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink);
}
.mockup__part-n {
  font-family: var(--font-data);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-muted);
}
.mockup__part-text {
  margin: 4px 0 0;
  font-size: var(--fs-nav);
  line-height: 1.5;
}

/* Título pequeno acima das 4 partes */
.steps__head {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h3);
  color: var(--color-ink);
}
.mockup__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin-top: var(--space-1);
}
.mockup__tag {
  padding: 4px var(--space-1);
  background: var(--color-ink);
  color: var(--color-surface);
  font-size: 11px;
}
.mockup__note {
  font-family: var(--font-data);
  font-size: var(--fs-source);
  color: var(--color-muted);
}

/* Módulos: lista com divisórias, número à esquerda, quando à direita */
.modules {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: var(--border);
}
.modules__item {
  display: grid;
  grid-template-columns: 3ch 1fr;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-2) 0;
  border-top: var(--border);
}
.modules__n {
  font-family: var(--font-data);
  font-size: var(--fs-source);
  line-height: 1.9;
  color: var(--color-muted);
}
.modules__title {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--color-ink);
}
.modules__when {
  grid-column: 2;
  font-family: var(--font-data);
  font-size: var(--fs-source);
  color: var(--color-muted);
}

@media (min-width: 900px) {
  .como__cycle {
    grid-template-columns: 1fr minmax(320px, 420px);
    gap: var(--space-12);
  }
  .modules__item { grid-template-columns: 3ch 1fr auto; align-items: baseline; }
  .modules__when { grid-column: 3; text-align: right; }
}

.section__note--tight { margin-top: var(--space-4); }

/* ==========================================================================
   02 — A DOR: texto + cartão "Talvez você…"
   ========================================================================== */
.pain {
  display: grid;
  gap: var(--space-6);
}
.pain .section__title { max-width: 18ch; }
.pain__card {
  align-self: start;
  padding: var(--space-4);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}
.pain__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h2-sub);
  line-height: 1.1;
  color: var(--color-ink);
}
.checklist { margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.checklist__item {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--space-2);
  padding: 12px 0;
  border-top: var(--border);
  font-size: var(--fs-body);
  line-height: 1.5;
}
.checklist__item:first-child { border-top: 0; }
.checklist__box {
  width: 20px;
  height: 20px;
  margin-top: 0.2em;
  fill: none;
  stroke: var(--color-ink);
  stroke-width: 1.5;
}
.pain__closing {
  margin: var(--space-2) 0 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.35;
  color: var(--color-ink);
}
.risco__actions {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}
@media (min-width: 900px) {
  .pain {
    grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
    gap: var(--space-12);
    align-items: center;
  }
}

/* ==========================================================================
   03 — QUEM ESCREVE: retrato grande + texto, faixa escura
   ========================================================================== */
.author {
  position: relative;
  overflow: clip; /* recorta como hidden, mas deixa a foto ficar fixa (sticky) na rolagem */
  padding-bottom: 0;
  background: var(--hero-bg);
  color: var(--color-hero-text);
}
.author .section__title { max-width: 16ch; color: var(--color-hero-text); }
.author .section__eyebrow { color: var(--color-hero-muted); }
.author ::selection { background: var(--color-hero-text); color: var(--hero-bg); }
.author__inner {
  display: grid;
  gap: var(--space-4);
}
.author__portrait {
  margin: calc(-1 * var(--space-4)) calc(-1 * var(--gutter)) 0;   /* celular: o rosto abre a seção */
}
.author__portrait img {
  width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(to top, transparent 0%, black 30%);
  mask-image: linear-gradient(to top, transparent 0%, black 30%);
}
/* Celular: retrato grande, recortado em pé (ele ocupa quase a largura toda);
   o texto sobe por cima da parte de baixo, onde a foto já sumiu no preto. */
@media (max-width: 899px) {
  .author__portrait {
    position: relative;
    z-index: 0;
    aspect-ratio: 4 / 5;
    max-height: 600px;
    overflow: hidden;
  }
  .author__portrait picture { display: block; height: 100%; }
  .author__portrait img {
    height: 100%;
    object-fit: cover;
    object-position: 50% 0%;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, rgb(0 0 0 / 0.35) 22%, black 52%);
    mask-image: linear-gradient(to top, transparent 0%, rgb(0 0 0 / 0.35) 22%, black 52%);
  }
  .author__text {
    position: relative;
    z-index: 1;
    margin-top: clamp(-190px, -38vw, -120px); /* entra na parte apagada da foto */
  }
  .author .section__title { text-shadow: 0 2px 24px rgb(10 10 12 / 0.85); }
}
.author__body p {
  max-width: var(--text-max);
  margin: var(--space-2) 0 0;
  font-size: var(--fs-lead);
  line-height: 1.6;
}
.author__body p:first-child { margin-top: var(--space-3); }
.author__quote {
  margin: var(--space-6) 0 0;
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-hero-text);
}
.author__quote p {
  margin: 0;
  font-style: italic;
  font-size: calc(var(--fs-lead) + 2px);
  line-height: 1.5;
}
.author__quote footer {
  display: grid;
  margin-top: var(--space-2);
}
.author__sign {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-body);
}
.author__role {
  font-family: var(--font-display);
  font-size: var(--fs-nav);
  color: var(--color-hero-muted);
}
.proofs {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
  padding: var(--space-4) 0 0;
  list-style: none;
  border-top: 1px solid rgb(236 236 234 / 0.16);
}
.proofs__item { display: grid; gap: 4px; }
.proofs__n {
  font-family: var(--font-data);
  font-weight: 500;
  font-size: var(--fs-stat);
  line-height: 1.1;
}
.proofs__text {
  font-family: var(--font-display);
  font-size: var(--fs-nav);
  line-height: 1.45;
  color: var(--color-hero-muted);
}
.author__review {
  margin: var(--space-3) 0 var(--space-8);
  font-family: var(--font-data);
  font-size: var(--fs-source);
  color: var(--color-hero-muted);
}
.author__review:empty { display: none; }
@media (max-width: 899px) {
  .author { padding-bottom: var(--section-pad); }
}
@media (min-width: 600px) {
  .proofs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  /* Coluna da foto mais larga: o Henrique aparece inteiro, com os ombros */
  .author__inner {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
  }
  .author__portrait {
    /* quanto a foto avança para a esquerda, até quase a borda da tela */
    --bleed: calc(max(var(--gutter), (100vw - var(--content-max)) / 2) - 8px);
    position: relative;
    align-self: stretch;
    margin: 0;
  }
  /* A foto acompanha a leitura: começa na altura do título e fica parada
     enquanto a pessoa rola pelo texto. */
  .author__portrait picture {
    position: sticky;
    top: calc(var(--header-h) + var(--space-3));
    display: block;
    width: min(calc(100% + var(--bleed) + 24px), (100svh - var(--header-h) - 48px) * 1448 / 1086);
    margin-left: calc(var(--bleed) * -1);
  }
  .author__portrait img {
    display: block;
    width: 100%;
    height: auto;
    /* só a base some no preto; os lados já vêm suaves na própria foto */
    -webkit-mask-image: linear-gradient(to top, transparent 0%, black 24%);
    mask-image: linear-gradient(to top, transparent 0%, black 24%);
  }
  .author__text { padding-bottom: var(--space-12); }
  .author__review { margin-bottom: 0; }
}

/* ==========================================================================
   SEM ECONOMÊS — clareza: TV × jornal, benefícios e mini-dicionário
   ========================================================================== */
.clarity__top {
  display: grid;
  gap: var(--space-6);
}
.clarity__gains-title {
  margin: var(--space-6) 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h3);
  color: var(--color-ink);
}
.gains { margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.gains__item {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--space-2);
  padding: 10px 0;
  border-top: var(--border);
  font-size: var(--fs-body);
  line-height: 1.5;
}
.gains__item:first-child { border-top: 0; }
.gains__icon {
  width: 16px;
  height: 16px;
  margin-top: 0.3em;
  fill: none;
  stroke: var(--color-ink);
  stroke-width: 1.8;
}

/* A mesma notícia: na TV (apagada, em itálico) → no jornal (cartão claro em destaque) */
.translate { display: grid; }
.translate__label { margin: 0; font-size: 11px; color: var(--color-muted); }
.translate__tv {
  padding: var(--space-3) var(--space-3) var(--space-4);
  border: 1px dashed var(--color-muted);
}
.translate__tv-text {
  margin: var(--space-1) 0 0;
  font-style: italic;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--color-muted);
}
.translate__arrow {
  justify-self: center;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: -20px 0;
  position: relative;
  z-index: 1;
  border-radius: 50%;
  background: var(--color-ink);
  color: var(--color-surface);
  font-family: var(--font-display);
  font-size: 18px;
}
.translate__jn {
  padding: var(--space-4) var(--space-3) var(--space-3);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}
.translate__jn .translate__label { color: var(--color-ink); }
.translate__jn-text {
  margin: var(--space-1) 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(var(--fs-body) + 1px);
  line-height: 1.5;
  color: var(--color-ink);
}

/* Dicionário: termo em mono, explicação em serifa, grade de cartões */
.glossary {
  display: grid;
  gap: 1px;
  margin: var(--space-4) 0 0;
  background: var(--color-line);     /* a cor de fundo vira as divisórias entre os cartões */
  border: var(--border);
}
.glossary__item {
  padding: var(--space-3);
  background: var(--color-bg);
}
.glossary__term {
  font-family: var(--font-data);
  font-weight: 500;
  font-size: calc(var(--fs-body) + 1px);
  color: var(--color-ink);
}
.glossary__def {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-nav);
  line-height: 1.55;
}
@media (min-width: 600px) {
  .glossary { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .clarity__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
    gap: var(--space-12);
    align-items: center;
  }
  .glossary { grid-template-columns: repeat(4, 1fr); }
}

.trilha__lead { margin-top: var(--space-2); margin-bottom: var(--space-4); }

/* Como funciona: duas faixas da mesma cor seguidas viram uma só */
.como__band + .como__band { padding-top: 0; }

/* ==========================================================================
   06 — EXCLUSIVIDADE: jornal fechado
   ========================================================================== */
.exclusive {
  background: var(--hero-bg);
  color: var(--color-hero-text);
}
.exclusive .section__title { color: var(--color-hero-text); }
.exclusive ::selection { background: var(--color-hero-text); color: var(--hero-bg); }
.exclusive__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-hero-text);
}
.fit {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}
.fit__col { padding: var(--space-4); border-radius: 20px; } /* os únicos cards arredondados da página */
.fit__col--yes {
  background: var(--color-surface);
  color: var(--color-text);
}
.fit__col--no {
  border: 1px solid rgb(236 236 234 / 0.16);
  color: var(--color-hero-muted);
}
.fit__label { margin: 0; font-size: 11px; }
.fit__col--yes .fit__label { color: var(--color-ink); }
.fit__items { margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.fit__items li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--space-2);
  padding: 10px 0;
  border-top: 1px solid currentColor;
  border-top-color: rgb(128 128 132 / 0.25);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  line-height: 1.45;
}
.fit__items li:first-child { border-top: 0; }
.fit__col--yes .fit__items li { color: var(--color-ink); }
.fit__icon {
  width: 16px;
  height: 16px;
  margin-top: 0.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
@media (min-width: 900px) {
  .fit { grid-template-columns: 1.15fr 1fr; gap: var(--space-4); }
  .fit__col { padding: var(--space-6) var(--space-4); border-radius: 28px; }
}

/* ==========================================================================
   04 — EDIÇÃO DE EXEMPLO: cara de primeira página, régua grossa no topo
   ========================================================================== */
.edition {
  margin-top: var(--space-6);
  border-top: 3px solid var(--color-ink);
}
.edition__head {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--color-ink);
  font-family: var(--font-data);
  font-size: var(--fs-source);
  color: var(--color-ink);
}
.edition__count { color: var(--color-muted); }
.edition__list { margin: 0; padding: 0; list-style: none; }
.edition__item {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  border-bottom: var(--border);
}
.edition__mark { display: flex; gap: var(--space-2); align-items: baseline; }
.edition__time {
  font-family: var(--font-data);
  font-weight: 500;
  font-size: var(--fs-body);
  color: var(--color-ink);
}
.edition__type { font-size: 11px; color: var(--color-muted); }
.edition__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: calc(var(--fs-h3) + 4px);
  line-height: 1.2;
  color: var(--color-ink);
}
.edition__text { margin: var(--space-1) 0 0; max-width: 52ch; }
.edition__pocket {
  align-self: start;
  padding: var(--space-2);
  background: var(--color-bg-alt);
  border-left: 2px solid var(--color-ink);
}
.edition__pocket-label { margin: 0; font-size: 11px; color: var(--color-ink); }
.edition__pocket-text { margin: 4px 0 0; font-size: var(--fs-nav); line-height: 1.55; }

/* Foto da notícia com a hora em tarja no canto (como a legenda do Authentik) */
.edition__media {
  position: relative;
  align-self: start;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-ink);
}
.edition__media img { width: 100%; height: 100%; object-fit: cover; }
.edition__media .edition__mark {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 6px 10px;
  background: var(--color-surface);
}

@media (min-width: 900px) {
  .edition__item {
    grid-template-columns: 220px minmax(0, 1fr) minmax(0, 280px);
    gap: var(--space-4);
  }
}

/* ==========================================================================
   COMUNIDADE GRÁTIS — faixa escura
   ========================================================================== */
.community {
  background: var(--hero-bg);
  color: var(--color-hero-text);
}
.community .section__title { color: var(--color-hero-text); }
.community .section__eyebrow { color: var(--color-hero-muted); }
.community ::selection { background: var(--color-hero-text); color: var(--hero-bg); }
.community__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* um botão largo não estica a coluna além da tela */
  gap: var(--space-8);
}
.compare {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  align-self: center;
}
.compare__col {
  padding: var(--space-3);
  border: 1px solid rgb(236 236 234 / 0.16);
  border-radius: 20px;
}
.compare__col--key { border-color: var(--color-hero-text); }
.compare__label { margin: 0; color: var(--color-hero-muted); }
.compare__col--key .compare__label { color: var(--color-hero-text); }
.compare__items {
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--fs-body);
}
.compare__items li {
  display: grid;
  grid-template-columns: 1.4em 1fr;   /* travessão pendurado: a 2ª linha alinha com o texto */
  padding: 4px 0;
  line-height: 1.4;
}
.compare__items li::before { content: "—"; color: var(--color-hero-muted); }

@media (min-width: 900px) {
  .community__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    gap: var(--space-12);
  }
  .compare { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   05 — OFERTA: 2×2 à esquerda, card à direita
   ========================================================================== */
.offer {
  display: grid;
  gap: var(--space-8);
}
.pillars {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}
.pillars__title {
  margin: 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  color: var(--color-ink);
}
.pillars__text { margin: var(--space-1) 0 0; font-size: var(--fs-body); line-height: 1.6; }

/* O card do jornal pago é escuro: é o único objeto preto da seção, e a luz
   da borda (glow-card, abaixo) só aparece sobre fundo escuro. */
.offer-card {
  align-self: start;
  padding: var(--space-4);
  color: var(--color-hero-muted);
  box-shadow: 0 30px 60px -20px rgb(10 10 12 / 0.55);
}
.offer-card__seal {
  display: inline-block;
  margin: 0;
  padding: 4px var(--space-1);
  background: var(--color-hero-text);
  color: var(--hero-bg);
  font-size: 11px;
}
.offer-card__product {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h2-sub);
  line-height: 1.1;
  color: var(--color-hero-text);
}
.offer-card__plan { margin: 4px 0 0; color: var(--color-hero-muted); }
.offer-card__list {
  margin: var(--space-3) 0 0;
  padding: var(--space-2) 0 0;
  list-style: none;
  border-top: 1px solid rgb(236 236 234 / 0.14);
}
.offer-card__list li { color: var(--color-hero-text); }
.offer-card .source { color: var(--color-hero-muted); }
.offer-card__list li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: var(--space-1);
  padding: 6px 0;
  font-size: var(--fs-body);
  line-height: 1.45;
}
.offer-card__list svg {
  width: 16px;
  height: 16px;
  margin-top: 0.25em;
  fill: none;
  stroke: var(--color-hero-text);
  stroke-width: 1.6;
}
.offer-card__price {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid rgb(236 236 234 / 0.14);
}
.offer-card__price-label { margin: 0; font-size: 11px; color: var(--color-hero-muted); }
.offer-card__price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px var(--space-1);
  margin: 4px 0 0;
}
.offer-card__amount {
  font-family: var(--font-data);
  font-weight: 500;
  font-size: calc(var(--fs-stat) * 1.4);
  line-height: 1;
  color: var(--color-hero-text);
}
.offer-card__per { font-size: var(--fs-nav); color: var(--color-hero-muted); }
.offer-card__cta {
  display: flex;
  width: 100%;
  margin-top: var(--space-3);
}
/* Garantia em destaque no card: selo redondo "7 dias" à esquerda, texto à direita */
.guarantee {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--space-2);
  align-items: start;
  margin: var(--space-3) 0 var(--space-2);
  padding: var(--space-2);
  border: 1px solid rgb(236 236 234 / 0.22);
  background: rgb(236 236 234 / 0.04);
}
.guarantee__seal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 64px;
  height: 64px;
  border: 1px solid var(--color-hero-text);
  border-radius: 50%;
  color: var(--color-hero-text);
}
.guarantee__icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.guarantee__days {
  font: 500 11px / 1 var(--font-data);
  white-space: nowrap;
}
.guarantee__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.25;
  color: var(--color-hero-text);
}
.guarantee__text {
  margin: 6px 0 0;
  font-size: var(--fs-nav);
  line-height: 1.55;
  color: var(--color-hero-muted);
}
.offer-card__alt { margin-top: var(--space-1); }

/* --------------------------------------------------------------------------
   Card com luz na borda (recriação do GlowCard / spotlight-card)
   main.js cria dentro do card um .glow-fx com 3 camadas, cada uma com uma
   "mancha" de luz pronta (degradê redondo) que só desliza via transform:
     __blob--halo  brilho suave por fora do card (fica atrás do fundo)
     __bg          fundo do card + brilho fraco por dentro
     __edge        a faixa da borda, que acende onde a mancha passa
   Nada é redesenhado a cada quadro: leve até em celular fraco.
   Cores em cinza/prata para seguir a paleta da página.
   -------------------------------------------------------------------------- */
.glow-card {
  --glow-size: 240px;
  --glow-border: 3px;
  --glow-backdrop: #0E0E10;
  --glow-line: rgb(236 236 234 / 0.10);
  --glow-spot: 214 214 220;   /* cor da luz (R G B) */
  position: relative;
  border: var(--glow-border) solid transparent;
  background: none;
}
.glow-fx,
.glow-fx__bg,
.glow-fx__edge {
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}
.glow-fx { inset: calc(var(--glow-border) * -1); }
.glow-fx__bg,
.glow-fx__edge { inset: 0; border: var(--glow-border) solid transparent; }
.glow-fx__bg {
  overflow: hidden;
  border-color: var(--glow-line);
  background: var(--glow-backdrop);
  background-clip: padding-box;
}
.glow-fx__edge {
  /* só a faixa da borda aparece */
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
}
.glow-fx__blob {
  --r: 120px;
  position: absolute;
  left: calc(var(--r) * -1);
  top: calc(var(--r) * -1);
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  border-radius: 50%;
  will-change: transform;
}
/* as manchas dentro de __bg/__edge descontam a borda (contam a partir do canto de dentro) */
.glow-fx__bg > .glow-fx__blob,
.glow-fx__edge > .glow-fx__blob {
  left: calc(var(--r) * -1 - var(--glow-border));
  top: calc(var(--r) * -1 - var(--glow-border));
}
.glow-fx__blob--halo {
  --r: 110px;
  background: radial-gradient(circle closest-side,
    rgb(255 255 255 / 0.42), rgb(var(--glow-spot) / 0.18) 30%, rgb(var(--glow-spot) / 0.06) 55%, rgb(var(--glow-spot) / 0) 78%);
}
/* o card vizinho fica por cima do brilho que vaza (a luz passa por trás dele) */
.fit__col, .compare__col { position: relative; }
.glow-fx__blob--fill {
  --r: var(--glow-size);
  background: radial-gradient(circle closest-side, rgb(var(--glow-spot) / 0.13), rgb(var(--glow-spot) / 0));
}
.glow-fx__blob--edge {
  --r: calc(var(--glow-size) * 0.75);
  background: radial-gradient(circle closest-side,
    #fff 0%, rgb(var(--glow-spot) / 0.9) 35%, rgb(var(--glow-spot) / 0.35) 66%, rgb(var(--glow-spot) / 0) 100%);
}
.glow-card > :not(.glow-fx) { position: relative; } /* conteúdo por cima do brilho */
/* Cards do "jornal fechado": o "É para você" continua claro; a luz fica na borda */
.fit__col--yes.glow-card { --glow-backdrop: var(--color-surface); }

/* --------------------------------------------------------------------------
   Botão brilhante do checkout (recriação do ShinyButton)
   Pílula preta; uma faixa de luz gira na borda o tempo todo; no hover a faixa
   abre, os pontinhos e o brilho interno aparecem. Prata no lugar do azul.
   -------------------------------------------------------------------------- */
@property --gradient-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --gradient-angle-offset { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --gradient-percent { syntax: "<percentage>"; initial-value: 5%; inherits: false; }
@property --gradient-shine { syntax: "<color>"; initial-value: white; inherits: false; }

.shiny-cta {
  --shiny-cta-bg: #000000;
  --shiny-cta-bg-subtle: #1f1f22;
  --shiny-cta-fg: #ffffff;
  --shiny-cta-highlight: #8E8E96;
  --shiny-cta-highlight-subtle: #E4E4E8;
  --animation: shiny-gradient-angle linear infinite;
  --duration: 3s;
  --shadow-size: 2px;
  --transition: 800ms cubic-bezier(0.25, 1, 0.5, 1);

  isolation: isolate;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 1.1rem 2rem;
  outline-offset: 4px;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.2;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 360px;
  color: var(--shiny-cta-fg);
  background:
    linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg)) padding-box,
    conic-gradient(
      from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
      transparent,
      var(--shiny-cta-highlight) var(--gradient-percent),
      var(--gradient-shine) calc(var(--gradient-percent) * 2),
      var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3),
      transparent calc(var(--gradient-percent) * 4)
    ) border-box;
  box-shadow: inset 0 0 0 1px var(--shiny-cta-bg-subtle);
  transition: var(--transition);
  transition-property: --gradient-angle-offset, --gradient-percent, --gradient-shine;
}
.shiny-cta:focus-visible { outline: 2px solid var(--color-hero-text); }
.shiny-cta::before,
.shiny-cta::after,
.shiny-cta__label::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  translate: -50% -50%;
  z-index: -1;
}
.shiny-cta:active { translate: 0 1px; }

/* Pontinhos que acompanham a faixa de luz */
.shiny-cta::before {
  --size: calc(100% - var(--shadow-size) * 3);
  --position: 2px;
  --space: calc(var(--position) * 2);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(
    circle at var(--position) var(--position),
    white calc(var(--position) / 4),
    transparent 0
  ) padding-box;
  background-size: var(--space) var(--space);
  background-repeat: space;
  -webkit-mask-image: conic-gradient(from calc(var(--gradient-angle) + 45deg), black, transparent 10% 90%, black);
  mask-image: conic-gradient(from calc(var(--gradient-angle) + 45deg), black, transparent 10% 90%, black);
  border-radius: inherit;
  opacity: 0.4;
}
/* Brilho interno que gira */
.shiny-cta::after {
  --animation: shiny-shimmer linear infinite;
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(-50deg, transparent, var(--shiny-cta-highlight), transparent);
  -webkit-mask-image: radial-gradient(circle at bottom, transparent 40%, black);
  mask-image: radial-gradient(circle at bottom, transparent 40%, black);
  opacity: 0.6;
}
.shiny-cta__label { position: relative; z-index: 1; }
.shiny-cta__label::before {
  --size: calc(100% + 1rem);
  width: var(--size);
  height: var(--size);
  box-shadow: inset 0 -1ex 2rem 4px var(--shiny-cta-highlight);
  opacity: 0;
  transition: opacity var(--transition);
  animation: calc(var(--duration) * 1.5) shiny-breathe linear infinite;
}
.shiny-cta,
.shiny-cta::before,
.shiny-cta::after {
  animation:
    var(--animation) var(--duration),
    var(--animation) calc(var(--duration) / 0.4) reverse paused;
  animation-composition: add;
}
.shiny-cta:is(:hover, :focus-visible) {
  --gradient-percent: 20%;
  --gradient-angle-offset: 95deg;
  --gradient-shine: var(--shiny-cta-highlight-subtle);
}
.shiny-cta:is(:hover, :focus-visible),
.shiny-cta:is(:hover, :focus-visible)::before,
.shiny-cta:is(:hover, :focus-visible)::after { animation-play-state: running; }
.shiny-cta:is(:hover, :focus-visible) .shiny-cta__label::before { opacity: 1; }

@keyframes shiny-gradient-angle { to { --gradient-angle: 360deg; } }
@keyframes shiny-shimmer { to { rotate: 360deg; } }
@keyframes shiny-breathe { from, to { scale: 1; } 50% { scale: 1.2; } }

/* fora da tela: animação parada (main.js liga/desliga is-paused) */
.shiny-cta.is-paused,
.shiny-cta.is-paused::before,
.shiny-cta.is-paused::after,
.shiny-cta.is-paused .shiny-cta__label::before { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .shiny-cta,
  .shiny-cta::before,
  .shiny-cta::after,
  .shiny-cta__label::before { animation: none; }
}

@media (min-width: 600px) {
  .pillars { grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-4); }
}
@media (min-width: 900px) {
  .offer {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
    gap: var(--space-12);
    align-items: center;
  }
  .offer-card { padding: var(--space-6) var(--space-4); }
}

/* ==========================================================================
   06 — FAQ: <details> com divisórias e "+" que vira "−"
   ========================================================================== */
.faq__inner { display: grid; gap: var(--space-4); }
.faq__list { border-bottom: var(--border); }
.faq__item { border-top: var(--border); }
.faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  min-height: 56px;
  padding: var(--space-2) 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.35;
  color: var(--color-ink);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__plus {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
}
.faq__plus::before,
.faq__plus::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform 300ms var(--ease-out);
}
.faq__plus::after { transform: rotate(90deg); }
.faq__item[open] .faq__plus::after { transform: rotate(0deg); }
.faq__a {
  max-width: var(--text-max);
  margin: 0;
  padding: 0 0 var(--space-3);
}
@media (min-width: 900px) {
  .faq__inner { grid-template-columns: 1fr 2fr; gap: var(--space-12); }
}

/* ==========================================================================
   07 — FECHAMENTO
   ========================================================================== */
.closing__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-4);
}

/* ==========================================================================
   RODAPÉ — carvão
   ========================================================================== */
.site-footer {
  padding: var(--space-12) 0 var(--space-4);
  background: var(--color-hero);
  color: var(--color-hero-text);
}
.site-footer ::selection { background: var(--color-hero-text); color: var(--color-hero); }
.site-footer__top { display: grid; gap: var(--space-8); }
.site-footer__tagline { margin: var(--space-2) 0 0; color: var(--color-hero-text); letter-spacing: 0.16em; }
.site-footer__line-label { margin: var(--space-6) 0 0; font-size: 11px; color: var(--color-hero-muted); }
.site-footer__quote {
  max-width: 40ch;
  margin: var(--space-1) 0 0;
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: 1.5;
}
.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-4);
}
.site-footer__col-title { margin: 0 0 var(--space-1); font-size: 11px; color: var(--color-hero-muted); }
.site-footer__col ul { margin: 0; padding: 0; list-style: none; }
.site-footer__col a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-family: var(--font-display);
  font-size: var(--fs-nav);
  text-decoration: none;
}
.site-footer__col a:hover { text-decoration: underline; text-underline-offset: 5px; }
.site-footer__sources {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid rgb(236 236 234 / 0.16);
}
.site-footer__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
}
.sources-list {
  display: grid;
  gap: 6px;
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-data);
  font-size: var(--fs-source);
  color: var(--color-hero-muted);
}
.sources-list__item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--space-2); }
.site-footer__legal {
  display: grid;
  gap: 4px;
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid rgb(236 236 234 / 0.16);
  font-family: var(--font-data);
  font-size: var(--fs-source);
  color: var(--color-hero-muted);
}
.site-footer__legal p { margin: 0; }
@media (min-width: 900px) {
  .site-footer__top { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
}

/* ---------- Entrada das seções (ver "Entrada das seções" no main.js) ----------
   As classes só existem quando o main.js as coloca, e ele não coloca com
   prefers-reduced-motion: reduce. Sem elas, tudo aparece direto. */
.reveal-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(var(--reveal-word-rise));
  transition:
    opacity var(--dur-reveal-fade) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--reveal-stagger));
}
.reveal-words.is-in .reveal-word {
  opacity: 1;
  transform: none;
}
.reveal-block {
  opacity: 0;
  transform: translateY(var(--rise));
  transition:
    opacity var(--dur-reveal-fade) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-block.is-in {
  opacity: 1;
  transform: none;
}

/* ---------- Movimento (só com prefers-reduced-motion: no-preference) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero [data-enter] {
    animation: rise var(--dur-enter) var(--ease-out) both;
    animation-delay: calc(var(--enter-i, 0) * 90ms);
  }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(var(--rise)); }
  to { opacity: 1; transform: none; }
}

/* ---------- Modo rascunho ---------- */
.ph {
  background: transparent;
  color: inherit;
  outline: 1px dashed currentColor;
  outline-offset: 2px;
}
.draft-badge {
  position: fixed;
  right: var(--space-2);
  bottom: var(--space-2);
  z-index: 40;
  max-width: calc(100vw - 2 * var(--space-2));
  padding: var(--space-1) var(--space-2);
  background: var(--color-surface);
  color: var(--color-ink);
  border: var(--border);
  box-shadow: var(--shadow-card);
  font-size: 11px;
}
.draft-badge[hidden] { display: none; }

/* ---------- CTA flutuante (só no celular; ver "CTA flutuante" no main.js) ----------
   Botão pequeno de vidro escuro, só com uma seta, no canto de baixo. Mesmo
   vidro do header flutuante. Aparece quando o botão do hero sai da tela; some
   só enquanto um botão de compra está à vista e volta depois.
   Escondido = visibility: hidden (sai do Tab e do leitor de tela). */
.float-cta {
  position: fixed;
  right: var(--space-2);
  bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  z-index: 35;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgb(236 236 234 / 0.18);
  background: rgb(14 14 16 / 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  color: var(--color-hero-text);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.10),
    0 8px 22px -8px rgb(0 0 0 / 0.5);
  -webkit-tap-highlight-color: transparent;
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px) scale(0.85);
  transition:
    opacity 0.25s ease,
    transform 0.35s var(--ease-out),
    visibility 0s linear 0.35s;
}
.float-cta.is-shown {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}
.float-cta:active { transform: scale(0.92); }
.float-cta:focus-visible { outline: var(--focus-ring) solid var(--color-hero-text); outline-offset: 3px; }
.float-cta__ico {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (prefers-reduced-motion: reduce) {
  .float-cta { transform: none; transition: opacity 0.2s ease, visibility 0s linear 0.2s; }
  .float-cta:active { transform: none; }
}
/* No celular, o aviso de rascunho vai para a esquerda e não fica embaixo do botão */
@media (max-width: 899px) {
  .draft-badge { right: auto; left: var(--space-2); max-width: calc(100vw - 76px - 4 * var(--space-2)); }
}
@media (min-width: 900px) {
  .float-cta { display: none; }
}