/* ============================================================
   mdn — sistema visual do tema
   branco + laranja · luz e sombra · tech / neutro-profissional
   Portado do protótipo Astro (src/styles/global.css + Nav + Hero).
   ============================================================ */

/* ---------- Fontes self-hosted ---------- */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url('../fonts/space-grotesk-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  /* Cor: claro dominante */
  --bg: #f7f6f3;
  --bg-elev: #ffffff;
  --fg: #0b0b0d;
  --fg-soft: #55555f;
  --line: #e6e4de;

  /* Cor: bloco escuro (contraste) */
  --bg-dark: #0b0b0d;
  --fg-on-dark: #f4f3ef;
  --fg-on-dark-soft: #a2a2ac;

  /* Acento: laranja (a única estrela) */
  --accent: #ff5a00;
  --accent-hot: #ff7a2f;
  --accent-ink: #b83e00;
  --glow: 255, 90, 0;

  /* Tema ativo (muda no scroll) */
  --theme-bg: var(--bg);
  --theme-fg: var(--fg);
  --theme-fg-soft: var(--fg-soft);
  --theme-line: var(--line);

  /* Tipografia */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  --step-2: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  --step-3: clamp(2.1rem, 1.5rem + 2.8vw, 3.6rem);
  --step-4: clamp(2.8rem, 1.6rem + 5.5vw, 5.5rem);
  --step-5: clamp(3.4rem, 1.4rem + 9vw, 8rem);

  /* Espaçamento (base 8) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --space-7: 9rem;

  /* Raio */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* Sombra */
  --shadow-sm: 0 2px 8px rgba(11, 11, 13, 0.06);
  --shadow-md: 0 18px 40px -18px rgba(11, 11, 13, 0.22);
  --shadow-lg: 0 50px 90px -40px rgba(11, 11, 13, 0.35);
  --shadow-glow: 0 30px 90px -30px rgba(var(--glow), 0.45);

  /* Layout */
  --maxw: 1240px;
  --gutter: clamp(1.25rem, 5vw, 4rem);

  --mx: 50%;
  --my: 50%;
}

/* ---------- Reset enxuto ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--theme-fg);
  background: var(--theme-bg);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.6s ease, color 0.6s ease;
  /* clip, nunca hidden: `hidden` transforma o body em contêiner de rolagem
     e quebra todo `position: sticky` da página (o palco do reconhecimento
     depende disso). A linha `hidden` fica antes como fallback de browser
     antigo, que ignora `clip`. */
  overflow-x: hidden;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.02; letter-spacing: -0.02em; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* acessibilidade: pular pro conteúdo */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #fff; padding: 0.8em 1.2em; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ---------- Utilitários ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(4rem, 10vw, var(--space-7)); position: relative; }
.section__head { max-width: 46ch; margin-bottom: var(--space-5); }
.section__title { font-size: var(--step-3); margin-top: 0.4em; }
.section__sub { color: var(--theme-fg-soft); font-size: var(--step-1); margin-top: 0.8em; }

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.eyebrow::before {
  content: '';
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px 2px rgba(var(--glow), 0.7);
}
.theme-dark .eyebrow, body[data-theme='dark'] .eyebrow { color: var(--accent-hot); }

.pill {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.55em 1.1em;
  border-radius: var(--r-pill);
  border: 1px solid var(--theme-line);
  background: color-mix(in srgb, var(--theme-bg) 70%, transparent);
  backdrop-filter: blur(10px);
  font-size: var(--step--1);
  font-weight: 500;
}

.btn-accent {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.9em 1.5em;
  border-radius: var(--r-pill);
  background-color: var(--accent);
  /* facho de luz varrendo em loop: vivo sem depender de hover */
  background-image: linear-gradient(112deg, transparent 35%, rgba(255, 255, 255, 0.35) 50%, transparent 65%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  background-position: -120% 0;
  animation: mdn-sheen 4.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  box-shadow: var(--shadow-glow);
  transition: transform 0.25s ease, background-color 0.25s ease;
}
.btn-accent:hover { background-color: var(--accent-hot); transform: translateY(-2px); }
.btn-accent svg { width: 1.2em; height: 1.2em; flex: none; } /* ícone nunca explode o botão */
@keyframes mdn-sheen {
  0% { background-position: -120% 0; }
  38% { background-position: 180% 0; }
  100% { background-position: 180% 0; }
}
@media (prefers-reduced-motion: reduce) { .btn-accent { animation: none; } }

.btn-ghost {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step--1);
}
.btn-ghost::after { content: '→'; margin-left: 0.4em; display: inline-block; transition: transform 0.25s ease; }
.btn-ghost:hover::after { transform: translateX(4px); }

/* seção com tema escuro */
.theme-dark {
  --theme-bg: var(--bg-dark);
  --theme-fg: var(--fg-on-dark);
  --theme-fg-soft: var(--fg-on-dark-soft);
  --theme-line: rgba(255, 255, 255, 0.12);
}
body[data-theme='dark'] {
  --theme-bg: var(--bg-dark);
  --theme-fg: var(--fg-on-dark);
  --theme-fg-soft: var(--fg-on-dark-soft);
  --theme-line: rgba(255, 255, 255, 0.12);
}

/* reveal no scroll (JS adiciona .is-in) */
.reveal-up { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal-up.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal-up { opacity: 1; transform: none; } }

/* ============================================================
   DOCK — nav flutuante fixa embaixo, centralizada (skiper43-like).
   É a navegação inteira da tela (sem logo/topbar fixo — o item
   "Início" do dock cumpre esse papel).
   Fica sempre no par escuro (--bg-dark/--fg-on-dark), nos dois temas
   de scroll do site, de propósito: é chrome por cima do conteúdo,
   não uma seção da página — não deve mudar de cor com o scroll.
   ============================================================ */
.dock {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  padding: 0 var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
.dock__list {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  list-style: none;
  margin: 0;
  padding: 0.45rem;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  border-radius: var(--r-pill);
  background: var(--bg-dark);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-lg);
}
.dock__list::-webkit-scrollbar { display: none; }
.dock__item { position: relative; flex: none; }
.dock__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--r-pill);
  color: var(--fg-on-dark-soft);
  transition: color 0.2s ease, background-color 0.2s ease;
}
.dock__link:hover,
.dock__link:focus-visible {
  color: var(--fg-on-dark);
  background: rgba(255, 255, 255, 0.1);
}
/*
 * O "lift" de hover mora no ÍCONE, não no .dock__link. Um transform no
 * .dock__link criaria um containing block novo pra qualquer descendente
 * com position:fixed — inclusive o .dock__label quando vira tooltip (ver
 * seção 8 do main.js), que passaria a se posicionar relativo ao próprio
 * link (torto) em vez do viewport. Ícone e rótulo são IRMÃOS dentro do
 * link, então o transform aqui não entra no caminho do escape do rótulo.
 */
.dock__icon { display: inline-flex; transition: transform 0.2s ease; }
.dock__link:hover .dock__icon,
.dock__link:focus-visible .dock__icon {
  transform: translateY(-3px);
}
.dock__icon svg { width: 20px; height: 20px; }

/*
 * Rótulo: SEMPRE no HTML (acessibilidade + o texto-âncora dos links
 * internos importa pro SEO). No desktop fica só visualmente escondido
 * por clip — nunca display:none/visibility:hidden, que tirariam o
 * texto da árvore de acessibilidade — até hover/focus, quando vira
 * tooltip flutuante acima do ícone.
 */
.dock__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.dock__link:hover .dock__label,
.dock__link:focus-visible .dock__label {
  position: absolute;
  bottom: calc(100% + 0.6rem);
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.35rem 0.7rem;
  overflow: visible;
  clip-path: none;
  background: var(--fg-on-dark);
  color: var(--bg-dark);
  font-size: var(--step--1);
  font-weight: 600;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  pointer-events: none;
}

/* Item ativo: identificável sem depender só de cor. */
.dock__item.is-active > .dock__link {
  color: var(--fg-on-dark);
  background: rgba(255, 255, 255, 0.14);
}

/* "Fale comigo" — último item do dock, sempre em destaque laranja. */
.dock__item--cta {
  margin-left: 0.25rem;
  padding-left: 0.55rem;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.dock__item--cta .dock__link { background: var(--accent); color: #fff; }
.dock__item--cta .dock__link:hover,
.dock__item--cta .dock__link:focus-visible { background: var(--accent-hot); color: #fff; }
.dock__item--cta .dock__link:hover .dock__label,
.dock__item--cta .dock__link:focus-visible .dock__label { background: var(--accent); color: #fff; }

/*
 * Submenu de "Serviços" (único dropdown do site — escopo fica só aqui).
 * Abre pra CIMA (o dock fica embaixo) no :hover (mouse) e no
 * :focus-within (teclado): sem o focus-within quem navega por Tab nunca
 * alcança os 3 links, porque eles ficam com visibility:hidden até o
 * item pai (ou um filho) receber foco. Ancorado à esquerda do item
 * (left:0) — "Serviços" é o 1º ícone do dock, então o submenu nunca
 * estoura a borda esquerda da viewport.
 */
.dock__list .menu-item-has-children { position: relative; }
.dock__list .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0.5rem;
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 0.6rem;
  /* mega-menu: os 5 serviços em 2 colunas */
  min-width: 34rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.15rem 0.5rem;
  background: var(--bg-dark);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
/* Ponte invisível sobre o vão do margin-bottom: sem ela o mouse perde o
   hover ao subir do ícone "Serviços" pro submenu, e o menu fecha na cara. */
.dock__list .sub-menu::before {
  content: '';
  position: absolute;
  bottom: -0.6rem;
  left: 0;
  right: 0;
  height: 0.6rem;
}
.dock__list .menu-item-has-children:hover > .sub-menu,
.dock__list .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
.dock__list .sub-menu a {
  display: block;
  padding: 0.55rem 0.7rem;
  border-radius: var(--r-md);
  white-space: nowrap;
  color: var(--fg-on-dark-soft);
}
.dock__list .sub-menu a:hover,
.dock__list .sub-menu a:focus-visible {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--fg-on-dark);
}
/* .menu__publico por padrão usa --theme-fg-soft (acompanha o tema da
   página) — aqui dentro o fundo do submenu é sempre escuro, então
   precisa do par fixo pra continuar legível nos dois temas. */
.dock__list .sub-menu .menu__publico { color: var(--fg-on-dark-soft); }
@media (max-width: 640px) {
  .dock__list .sub-menu { min-width: min(92vw, 20rem); grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .dock__list .sub-menu { transition: none; }
}

/* Celular: tab bar de app — rótulo SEMPRE visível, pequeno, sob o
   ícone. Sem hover no toque, então a técnica de clip não entra aqui. */
@media (max-width: 720px) {
  .dock { padding-inline: var(--space-2); }
  .dock__list { gap: 0.05rem; padding: 0.35rem; }
  /* família única de raios: contêiner e itens sempre em pílula plena */
  .dock__list { border-radius: var(--r-pill); }
  .dock__link,
  .dock__item.is-active > .dock__link,
  .dock__item--cta .dock__link { border-radius: var(--r-pill); }
  .dock__link {
    width: auto;
    min-width: 2.75rem;
    height: auto;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.4rem 0.5rem;
    border-radius: var(--r-md);
  }
  .dock__icon svg { width: 18px; height: 18px; }
  .dock__label {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip-path: none;
    font-size: 0.62rem;
    font-weight: 600;
  }
  .dock__item--cta { margin-left: 0.1rem; padding-left: 0.3rem; }
}

/* ============================================================
   HERO — foto-reveal + lettering ambiente
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  /* Sem topbar, não sobra mais nada fixo no topo pra limpar — os 6rem
     originais existiam só por causa da pill/topbar. Fica um respiro
     puramente estético, na mesma casa do mínimo que .section já usa
     em todo o resto do site (clamp(4rem, 10vw, ...)). */
  padding-top: var(--space-5);
  padding-bottom: 3rem;
  overflow: hidden;
}
.hero__ambient {
  position: absolute;
  left: 50%; top: 58%;
  transform: translate(-50%, -50%);
  display: flex;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(6rem, 26vw, 22rem);
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
.hero__ambient-ch {
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--theme-fg) 12%, transparent);
  transition: color 0.35s ease, -webkit-text-stroke-color 0.35s ease, text-shadow 0.35s ease;
}
.hero__ambient-ch.is-lit {
  -webkit-text-stroke-color: rgba(var(--glow), 0.85);
  text-shadow: 0 0 34px rgba(var(--glow), 0.35);
}

.hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}
.hero__copy { max-width: 34ch; }
.hero__title { font-size: var(--step-5); margin: 0.5em 0 0.4em; }
.hero__sub { color: var(--theme-fg-soft); font-size: var(--step-1); max-width: 32ch; }
.hero__actions { display: flex; align-items: center; gap: 1.4rem; margin-top: 2rem; flex-wrap: wrap; }

/* foto-reveal */
.reveal {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 460px;
  justify-self: end;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  isolation: isolate;
}
.reveal__layer { position: absolute; inset: 0; }
.reveal__layer img { width: 100%; height: 100%; object-fit: cover; }
/* placeholders enquanto a foto real não entra */
.reveal__layer--base.is-placeholder {
  background: radial-gradient(120% 90% at 70% 20%, #3a3a40 0%, #17171b 55%, #0b0b0d 100%);
}
.reveal__layer--hot.is-placeholder {
  background: radial-gradient(120% 90% at 60% 25%, #ff8a3d 0%, #ff5a00 40%, #7a2a00 100%);
}
.reveal__tag {
  position: absolute; left: 50%; bottom: 1.2rem; transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.35);
  padding: 0.3em 0.7em;
  border-radius: var(--r-pill);
  backdrop-filter: blur(4px);
  white-space: nowrap;
}
.reveal__layer--hot {
  --lx: 50%;
  --ly: 50%;
  --rr: 130px;
  -webkit-mask-image: radial-gradient(circle var(--rr) at var(--lx) var(--ly), #000 55%, transparent 70%);
  mask-image: radial-gradient(circle var(--rr) at var(--lx) var(--ly), #000 55%, transparent 70%);
}
.reveal__ring {
  position: absolute;
  width: 260px; height: 260px;
  left: 0; top: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid var(--accent);
  box-shadow: 0 0 30px -4px rgba(var(--glow), 0.8);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 3;
}
.reveal.is-hover .reveal__ring { opacity: 1; }

/* sem mouse (touch): a camada acesa pulsa sozinha */
@media (hover: none) {
  .reveal__layer--hot { animation: mdn-breathe 4.5s ease-in-out infinite; }
  .reveal__ring { display: none; }
}
@keyframes mdn-breathe {
  0%, 100% {
    -webkit-mask-image: radial-gradient(circle 60px at 50% 40%, #000 50%, transparent 72%);
    mask-image: radial-gradient(circle 60px at 50% 40%, #000 50%, transparent 72%);
  }
  50% {
    -webkit-mask-image: radial-gradient(circle 320px at 50% 55%, #000 60%, transparent 85%);
    mask-image: radial-gradient(circle 320px at 50% 55%, #000 60%, transparent 85%);
  }
}

.hero__scroll {
  position: absolute;
  left: 50%; bottom: 1.6rem;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--theme-fg-soft);
  opacity: 0.7;
}

@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero__copy { max-width: none; order: 2; }
  .reveal { order: 1; justify-self: center; max-width: 320px; }
  .hero__ambient { top: 30%; }
}

/* ============================================================
   PORTAS ("o que faço")
   ============================================================ */
.portas__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-3);
}
.porta {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: var(--space-4) var(--space-3);
  border: 1px solid var(--theme-line);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--bg-elev) 60%, transparent);
  color: inherit;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.porta:hover,
.porta:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.porta__icon { color: var(--accent); }
.porta__icon svg { width: 32px; height: 32px; }
.porta__quem {
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--theme-fg-soft);
}
.porta__title { margin: 0; font-size: var(--step-1); }
.porta__desc { margin: 0; color: var(--theme-fg-soft); font-size: var(--step--1); line-height: 1.65; }
.porta__prova {
  margin-top: auto;
  padding-top: 0.8rem;
  font-size: var(--step--1);
  color: var(--theme-fg-soft);
}
.porta__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 600;
  color: var(--accent);
}
.porta__cta svg { width: 1.1em; height: 1.1em; transition: transform 0.3s ease; }
.porta:hover .porta__cta svg,
.porta:focus-visible .porta__cta svg { transform: translateX(4px); }

/* ============================================================
   TRABALHOS (bloco escuro)
   ============================================================ */
.trabalhos { background: var(--bg-dark); color: var(--fg-on-dark); }
.trabalhos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-3);
}
.trabalho {
  position: relative;
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #17171b;
  isolation: isolate;
  /* start, não stretch: sem isso o grid iguala a altura da linha e o card
     deitado seria esticado até a altura do card em pé, matando a proporção.
     É o que permite os dois formatos conviverem na mesma grade. */
  align-self: start;
}
/* encarte é peça EM PÉ — a classe vem da frente, por mdn_trabalho_formato() */
.trabalho--vertical { aspect-ratio: 3 / 4; }
.trabalho__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.trabalho:hover .trabalho__img { transform: scale(1.06); }
.trabalho__body {
  position: absolute; inset: auto 0 0 0;
  padding: var(--space-3);
  background: linear-gradient(to top, rgba(11,11,13,.97) 0%, rgba(11,11,13,.88) 38%, rgba(11,11,13,.5) 70%, transparent 100%);
  padding-top: var(--space-4);
  z-index: 2;
}
.trabalho__frente {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-hot);
}
.trabalho__title { font-size: var(--step-1); color: var(--fg-on-dark); margin-top: 0.3em; }
.trabalho::after {
  content: '';
  position: absolute; inset: 0;
  border: 2px solid transparent;
  border-radius: var(--r-md);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  z-index: 3;
  pointer-events: none;
}
.trabalho:hover::after { border-color: var(--accent); box-shadow: inset 0 0 40px -10px rgba(var(--glow), 0.6); }
.trabalhos__empty {
  grid-column: 1 / -1;
  padding: var(--space-5);
  text-align: center;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: var(--r-md);
  color: var(--fg-on-dark-soft);
}

/* ============================================================
   SOBRE (Meet the Designer)
   ============================================================ */
.sobre__grid {
  display: grid;
  /* v3 2026-08-10: RETRATO à esquerda (coluna dominante), texto à direita */
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

/* retrato em camadas: fundo fantasma (dissolve LONGE das bordas — nenhuma
   linha de marcação pode aparecer) + recorte nítido por cima */
.sobre__retrato { position: relative; width: 116%; margin-left: -10%; }
.sobre__retrato-fundo img {
  width: 100%; height: auto; display: block;
  opacity: 0.5;
  /* dissolve agressivo: o fantasma vira névoa muito antes de qualquer borda */
  -webkit-mask-image: radial-gradient(88% 80% at 50% 46%, #000 18%, transparent 62%);
          mask-image: radial-gradient(88% 80% at 50% 46%, #000 18%, transparent 62%);
}
.sobre__retrato-recorte { position: absolute; inset: 0; }
.sobre__retrato-recorte img {
  width: 100%; height: auto; display: block;
  -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent 97%);
          mask-image: linear-gradient(180deg, #000 76%, transparent 97%);
  filter: drop-shadow(0 26px 50px rgba(0, 0, 0, 0.45));
}
@media (max-width: 860px) {
  .sobre__retrato { width: 100%; margin-left: 0; }
}
.sobre__foto {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 5;
  background: radial-gradient(120% 90% at 70% 20%, #3a3a40 0%, #17171b 55%, #0b0b0d 100%);
}
.sobre__foto img { width: 100%; height: 100%; object-fit: cover; }
.sobre__texto p { color: var(--theme-fg-soft); margin-top: 1em; max-width: 46ch; }
.sobre__texto p strong { color: var(--theme-fg); font-weight: 600; }

.sobre__link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: var(--space-3);
  color: var(--accent-hot);
  font-family: var(--font-display);
  font-weight: 600;
}
.sobre__link span { transition: transform 0.25s ease; }
.sobre__link:hover span,
.sobre__link:focus-visible span { transform: translateX(4px); }
@media (max-width: 860px) { .sobre__grid { grid-template-columns: 1fr; } }

/* ============================================================
   CTA final
   ============================================================ */
.cta { text-align: center; }
.cta__title { font-size: var(--step-4); max-width: 18ch; margin-inline: auto; }
.cta__sub { color: var(--theme-fg-soft); font-size: var(--step-1); margin-top: 1em; max-width: 44ch; margin-inline: auto; }
.cta__actions { margin-top: var(--space-4); display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top: 1px solid var(--theme-line);
  padding-top: var(--space-4);
  /* espaço extra embaixo pra limpar o dock flutuante fixo */
  padding-bottom: calc(var(--space-4) + var(--space-5));
  font-size: var(--step--1);
  color: var(--theme-fg-soft);
}
.footer__inner { display: grid; gap: var(--space-4); }

/* auto-fit com mínimo: em tela estreita os grupos empilham sozinhos, sem
   media query e sem risco de estouro lateral — o rodapé antigo já mediu
   408px numa tela de 390 e pôs rolagem no SITE INTEIRO */
.footer__grupos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4) var(--space-3);
}
.footer__grupo-titulo {
  margin: 0 0 0.7rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--theme-fg);
  opacity: 0.55;
}
.footer__links { display: grid; gap: 0.45rem; list-style: none; padding: 0; margin: 0; }
.footer__links a:hover { color: var(--accent); }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--theme-line);
}
.footer__marca,
.footer__legal { margin: 0; }
.footer__legal a:hover { color: var(--accent); }

/* ============================================================
   PÁGINAS INTERNAS / conteúdo do editor
   ============================================================ */
/* Sem topbar pra limpar (ver .hero acima). Mantém a mesma proporção que
   já existia entre page-head e hero (9:6 antes do dock) sobre o novo
   valor-base do hero — um título sozinho ainda merece mais ar que um
   hero cheio de elementos visuais, então fica um degrau acima na escala
   de espaçamento (--space-6), não espremido nem com buraco. */
.page-head { padding-top: var(--space-6); padding-bottom: var(--space-4); }
.page-title { font-size: var(--step-4); }
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: var(--step-2); margin-top: 1.8em; }
.prose h3 { font-size: var(--step-1); margin-top: 1.5em; }
.prose a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.prose img { border-radius: var(--r-md); }
.prose blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 1.2em;
  color: var(--theme-fg-soft);
  font-size: var(--step-1);
}
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 0.4em; }

/* ============================================================
   LISTA (fallback de posts — index.php: blog / archive / busca)
   ============================================================ */
.lista__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
}
.lista-item {
  padding: var(--space-4) var(--space-3);
  border: 1px solid var(--theme-line);
  border-radius: var(--r-lg);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.lista-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.lista-item__title { font-size: var(--step-1); margin-bottom: 0.5em; }
.lista-item__desc { color: var(--theme-fg-soft); font-size: var(--step--1); line-height: 1.65; }

/* ============================================================
   /bio — link-in-bio
   ============================================================ */
.bio {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--space-5) var(--gutter);
  text-align: center;
}
.bio__inner { width: 100%; max-width: 420px; }
.bio__foto {
  width: 120px; height: 120px;
  border-radius: 50%;
  margin: 0 auto var(--space-3);
  overflow: hidden;
  box-shadow: var(--shadow-glow);
  background: radial-gradient(120% 90% at 60% 25%, #ff8a3d 0%, #ff5a00 40%, #7a2a00 100%);
}
.bio__foto img { width: 100%; height: 100%; object-fit: cover; }
.bio__nome { font-size: var(--step-2); }
.bio__frase { color: var(--theme-fg-soft); margin-top: 0.6em; }
.bio__links { display: grid; gap: 0.8rem; margin-top: var(--space-4); }
.bio__link {
  display: flex; align-items: center; justify-content: center; gap: 0.6em;
  padding: 1em 1.2em;
  border-radius: var(--r-pill);
  border: 1px solid var(--theme-line);
  background: var(--bg-elev);
  font-family: var(--font-display);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.bio__link:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-md); }
.bio__link svg { width: 20px; height: 20px; }

/* ============================================================
   404
   ============================================================ */
.erro { min-height: 80svh; display: grid; place-items: center; text-align: center; }
.erro__code { font-family: var(--font-display); font-size: var(--step-5); color: var(--accent); line-height: 1; }

/* ============================================================
   Páginas de serviço
   ============================================================ */
.wrap--estreito { max-width: 46rem; }
/* O clamp existia pra dar mais respiro em telas largas, onde a nav
   antiga (e depois o topbar) ocupava mais altura — sem nenhum chrome
   fixo no topo isso deixou de variar por largura de tela; flat, na
   mesma casa do .hero. */
.servico__hero { padding-block: var(--space-5) 2rem; }
.servico__title { font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.05; margin: .4rem 0 1rem; }
.servico__sub { font-size: 1.15rem; opacity: .8; margin-bottom: 2rem; }

/* Conteúdo vindo do editor: o tema manda no ritmo vertical */
.entrada > * + * { margin-top: 1.1em; }
.entrada h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin-top: 2.5em; line-height: 1.15; }
.entrada h3 { font-size: 1.25rem; margin-top: 1.8em; }
.entrada ul, .entrada ol { padding-left: 1.3em; }
.entrada li + li { margin-top: .4em; }
.entrada img { max-width: 100%; height: auto; border-radius: var(--r-md); }

/* ============================================================
   Sistemas — /sistemas (índice) e /sistemas/<slug> (peça)
   ============================================================ */
.sistemas__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-3);
}
.sistema-card {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  color: inherit;
  text-decoration: none;
}
.sistema-card__img {
  overflow: hidden;
  border-radius: var(--r-lg);
  aspect-ratio: 16 / 10;
}
.sistema-card__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.sistema-card:hover .sistema-card__img img { transform: scale(1.04); }
.sistema-card__title { margin: 0; font-size: 1.3rem; }
.sistema-card__desc { margin: 0; opacity: .8; }
.sistema-card__status { font-size: .85rem; color: var(--accent); }

.sistemas__empty {
  grid-column: 1 / -1;
  padding: var(--space-5);
  text-align: center;
  border: 1px dashed var(--theme-line);
  border-radius: var(--r-md);
  color: var(--theme-fg-soft);
}

.sistema__capa img { width: 100%; height: auto; border-radius: var(--r-lg); }
.ficha { display: grid; gap: 1rem; margin: 0; }
.ficha__item dt { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; opacity: .6; }
.ficha__item dd { margin: .2rem 0 0; font-size: 1.05rem; }

@media (prefers-reduced-motion: reduce) {
  .sistema-card__img img { transition: none; }
  .sistema-card:hover .sistema-card__img img { transform: none; }
}

/* ---------- Números ---------- */
.numeros { position: relative; overflow: clip; }
.numeros-fundo {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: clip;
  /* fade LONGO: a textura entra e sai sem marcar faixa (pedido: sutil) */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 32%, #000 68%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 32%, #000 68%, transparent 100%);
}
.numeros-fundo i { position: absolute; display: block; }
.numeros-fundo__tela {
  inset: -30%;
  background: repeating-linear-gradient(115deg, transparent 0 22px, rgba(255, 255, 255, 0.022) 22px 23px);
  animation: mdn-linhas-deriva 70s linear infinite;
}
.numeros-fundo__brilho {
  inset: -20% -50%;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.04) 50%, transparent 60%);
  animation: mdn-linhas-luz 21s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) { .numeros-fundo i { animation: none !important; } }

.numeros__grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0; /* as divisórias fazem o ritmo */
  text-align: center;
}
.numero {
  display: flex; flex-direction: column; gap: .3rem; justify-content: center;
  padding: var(--space-4) var(--space-3);
  border-right: 1px solid var(--theme-line);
  border-bottom: 1px solid var(--theme-line);
}
.numero:nth-child(3n) { border-right: 0; }
.numero:nth-child(n+4) { border-bottom: 0; }
@media (max-width: 680px) {
  .numeros__grid { grid-template-columns: 1fr; }
  .numero,
  .numero:nth-child(3n) { border-right: 0; border-bottom: 1px solid var(--theme-line); }
  .numero:last-child { border-bottom: 0; }
  .numero { padding: var(--space-3) var(--space-2); }
  .numero__valor { font-size: clamp(1.9rem, 9vw, 2.6rem); }
}
.numero__valor {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 7vw, 3.8rem);
  line-height: 1;
  color: var(--accent);
}
/* entrada "girando": flip 3D no momento em que a contagem dispara */
.numero__valor.is-girando { animation: mdn-num-gira .8s cubic-bezier(.2, .7, .3, 1); }
@keyframes mdn-num-gira {
  0% { transform: perspective(420px) rotateX(72deg) scale(.6); opacity: 0; filter: blur(4px); }
  100% { transform: none; opacity: 1; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .numero__valor.is-girando { animation: none; }
}
.numero__rotulo { font-size: .95rem; opacity: .75; }

/* Ferramentas (home) v2: texto CENTRALIZADO + esteira horizontal de
   mockups abaixo, andando com o scroll da página */
.sistemas-home .section__head {
  margin-inline: auto;
  text-align: center;
  max-width: 62ch;
}
.ferr-esteira { overflow: clip; margin-top: var(--space-5); }
.ferr-trilho {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2rem);
  width: max-content;
  will-change: transform;
  padding-inline: 6vw;
}
.ferr-card {
  flex: none;
  width: clamp(280px, 38vw, 560px);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--theme-line);
  background: var(--bg-elev);
  box-shadow: var(--shadow-md);
}
.ferr-card__barra {
  display: flex; gap: 6px; padding: 10px 14px;
  background: color-mix(in srgb, var(--bg-dark) 92%, transparent);
}
.ferr-card__barra i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); }
.ferr-card__barra i:first-child { background: var(--accent); }
.ferr-card img { width: 100%; height: auto; display: block; }
.ferr-card__nome {
  padding: 0.8rem 1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
}

/* botão pro índice de ferramentas: centralizado, no ritmo da esteira */
.sistemas-home__cta { margin-top: var(--space-4); text-align: center; }

.sistemas-home__link { margin-top: var(--space-3); }
.sistemas-home__link a {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; color: var(--accent);
}
.sistemas-home__link svg { width: 1.1em; height: 1.1em; }

/* ---------- FAQ ---------- */
.faq__lista { margin-top: var(--space-3); }
.faq__item { border-bottom: 1px solid var(--theme-line); }
.faq__p {
  cursor: pointer;
  padding: 1.1rem 0;
  font-size: 1.05rem;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.faq__p::-webkit-details-marker { display: none; }
.faq__p::after { content: "+"; color: var(--accent); font-weight: 400; }
.faq__item[open] .faq__p::after { content: "–"; }
.faq__r { padding-bottom: 1.1rem; opacity: .82; }

/* ---------- Como funciona ---------- */
.como__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: passo;
}
.passo { display: flex; flex-direction: column; gap: .5rem; }
.passo__num {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1;
  color: var(--accent);
  opacity: .55;
}
.passo__title { margin: 0; font-size: var(--step-1); }
.passo__desc { margin: 0; color: var(--theme-fg-soft); }

/* Público ao lado do item de menu */
.menu__publico {
  display: block;
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--theme-fg-soft);
}

/* ============================================================
   HERO "RECORTE" — nome gigante atravessa a foto (spec 2026-08-09).
   Substitui o foto-reveal; o CSS antigo do hero segue acima até a
   limpeza (as classes não são mais renderizadas).
   ============================================================ */
.hero--recorte {
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding-bottom: 0;
  /* dobra escura: o fundo acompanha a cor da foto (luz da imagem pertence
     ao escuro); o nome fica branco e o acender do cursor segue laranja */
  background: var(--bg-dark);
  color: var(--fg-on-dark);
}
.hero--recorte .eyebrow { color: var(--accent-hot); }
.hero--recorte .hero__sub { color: var(--fg-on-dark-soft); }
.hero__centro {
  /* SEM position e SEM z-index: o recorte (absoluto, dentro do h1) se
     ancora na SEÇÃO, e nada aqui pode criar stacking context — senão a
     intercalação nome/foto quebra */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: var(--gutter);
}
.hero__centro .eyebrow { position: relative; z-index: 4; margin-bottom: 0.6rem; }
/* No modo em camadas o eyebrow sai da frente do rosto: vai pro topo da
   dobra (ancora na SEÇÃO — o centro é estático de propósito). */
.hero--camadas .hero__centro .eyebrow {
  position: absolute;
  top: clamp(1.4rem, 5svh, 3.2rem);
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 0;
  white-space: nowrap;
}

.hero-nome {
  text-transform: uppercase;
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.02em;
  user-select: none;
}
.hero-nome__linha {
  display: block;
  position: relative;
  /* nowrap + escala por vw: cada linha do nome é UMA linha em qualquer tela */
  white-space: nowrap;
  font-size: clamp(1.5rem, 10vw, 9rem);
}
.hero-nome__linha--tras { z-index: 1; }
.hero-nome__linha--frente { z-index: 3; margin-top: -0.06em; }
.hero-nome__ch {
  --lit: 0; /* 0..1 — intensidade do facho, escrita pelo JS por letra */
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(18px);
  transition: opacity 0.55s ease, filter 0.55s ease, transform 0.55s ease, color 0.12s linear;
}
.hero--recorte.is-pronto .hero-nome__ch { opacity: 1; filter: none; transform: none; }
.hero-nome__ch.is-lit { color: var(--accent); } /* fallback binário (modo sem camadas) */

/* lanterna: a cor mistura branco→laranja conforme a proximidade do cursor.
   SEM text-shadow — o brilho externo vazava do glifo e lambia a foto;
   a luz mora exclusivamente no corpo da letra (decisão 2026-08-09) */
.hero--camadas .hero-nome__ch {
  color: color-mix(in srgb, var(--accent) calc(var(--lit) * 100%), var(--fg-on-dark));
}

.hero-foto {
  position: absolute;
  left: 50%;
  bottom: 14%;
  transform: translateX(-50%);
  height: min(58svh, 540px);
  aspect-ratio: 9 / 10; /* proporção do recorte real (778x863) */
  z-index: 2;
  pointer-events: none;
  will-change: transform;
  /* a base do recorte dissolve em transparência — a troca pra próxima
     dobra fica sutil e o corte da pose sentada some no degradê */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 68%, transparent 97%);
          mask-image: linear-gradient(180deg, #000 0%, #000 68%, transparent 97%);
}
.hero-foto img,
.hero-foto svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 30px 60px rgba(11, 11, 13, 0.28));
}

.hero__base { position: relative; z-index: 4; margin-top: 1.4rem; max-width: 44rem; }
.hero--recorte .hero__sub { max-width: 44ch; margin-inline: auto; }
.hero--recorte .hero__actions { justify-content: center; }

/* fita de ferramentas — habilidades são transversais, vivem no hero */
.hero-fita {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 5;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: color-mix(in srgb, var(--bg-dark) 84%, transparent);
  backdrop-filter: blur(8px);
  overflow: clip;
  padding-block: 0.8rem;
}
.hero--recorte .hero-fita__item { color: var(--fg-on-dark-soft); }

/* ---- hero em CAMADAS: foto de fundo inteira + recorte alinhado ----
   As duas imagens têm o MESMO canvas; com o mesmo object-fit/position,
   o alinhamento é automático em qualquer tela. Ordem de empilhamento:
   fundo(0) → "Matheus"(1) → recorte(2) → "do Nascimento"(3) → base(4). */
.hero--camadas .hero-camada {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero--camadas .hero-camada img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 50%: o ROSTO está no centro do arquivo (as duas camadas foram recortadas
     juntas em 10/08 — antes o rosto ficava a 52,6% e o desalinhamento vinha
     do arquivo, não daqui). Não voltar a "corrigir" isso por porcentagem:
     com object-fit:cover o X% é INERTE quando a caixa é mais larga que a foto
     (1584x941 ≈ 1,68), que é o caso de todo monitor 16:9. */
  object-position: 50% 30%;
}
.hero-camada--fundo { z-index: 0; }
.hero-camada--fundo::after {
  content: '';
  position: absolute;
  inset: 0;
  /* véu: contraste pro nome branco + fade escuro na base (troca de dobra sutil) */
  background: linear-gradient(180deg,
    rgba(11, 11, 13, 0.55) 0%,
    rgba(11, 11, 13, 0.25) 35%,
    rgba(11, 11, 13, 0.55) 72%,
    #0b0b0d 98%);
}
.hero-camada--recorte {
  display: block;
  z-index: 2;
  pointer-events: none;
  /* o recorte também dissolve na base, junto com o fundo */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 96%);
          mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 96%);
}
.hero--camadas .hero-fita {
  border-top-color: rgba(255, 255, 255, 0.14);
  background: color-mix(in srgb, #0b0b0d 88%, transparent);
}

/* Mobile: o sanduíche FICA (pedido 2026-08-09), mas a caixa das camadas
   encolhe — foto menor, ancorada acima da fita, surgindo em fade no topo */
@media (max-width: 760px) {
  .hero-camada {
    top: auto;
    height: 52svh; /* menor: o rosto não pode engolir a linha "Matheus" */
    bottom: 15%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 72%, transparent 97%);
            mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 72%, transparent 97%);
  }
  .hero-camada--fundo::after {
    background: linear-gradient(180deg,
      rgba(11, 11, 13, 0.62) 0%,
      rgba(11, 11, 13, 0.38) 40%,
      rgba(11, 11, 13, 0.66) 78%,
      #0b0b0d 100%);
  }
  /* nada de object-position X aqui: o rosto já está no centro do arquivo,
     então 50% (regra base) centraliza em qualquer largura */

  /* O bloco de texto desce: no celular o nome caía em cima das mãos e o
     subtítulo nos dedos. Abaixo das mãos sobra dobra escura de sobra —
     é pra lá que o conjunto (nome → sub → botões) vai. */
  .hero__centro { margin-top: clamp(2rem, 9svh, 5.5rem); }
  /* celular: o nome INTEIRO fica na frente da foto (sanduíche é do desktop) */
  .hero-nome__linha--tras { z-index: 3; }
}
.hero-fita__trilho {
  display: flex;
  width: max-content;
  animation: mdn-fita 28s linear infinite;
  will-change: transform;
}
/* cada metade do trilho é idêntica e carrega o próprio espaçamento:
   o -50% recomeça sem buraco na emenda */
.hero-fita__grupo { display: flex; gap: 2.4rem; padding-right: 2.4rem; }
.hero-fita__item {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--theme-fg-soft);
  white-space: nowrap;
}
.hero-fita__item i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
@keyframes mdn-fita { to { transform: translateX(-50%); } }

@media (max-width: 860px) {
  .hero-foto { height: min(44svh, 400px); bottom: 20%; }
  .hero__base { margin-top: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-fita__trilho { animation: none; }
  .hero--recorte .hero-nome__ch { opacity: 1; filter: none; transform: none; }
}

/* ============================================================
   HOME — reconhecimento (palco), soluções (índice) e fundamentos
   ============================================================ */
.reconhecimento {
  overflow: clip;
  background:
    repeating-linear-gradient(115deg, transparent 0 34px, rgba(11, 11, 13, 0.025) 34px 35px),
    var(--bg);
  color: var(--fg);
}
.reconhecimento__palco { position: relative; }
.reconhecimento__cena { display: flex; align-items: center; }
.reconhecimento__grid { display: grid; gap: var(--space-4); align-items: center; width: 100%; }
.reconhecimento__conteudo { max-width: 720px; position: relative; z-index: 2; }
.reconhecimento__intro,
.solucoes__intro,
.fundamentos__intro,
.servicos__intro {
  margin-top: var(--space-2);
  max-width: 62ch;
  color: var(--theme-fg-soft);
  font-size: var(--step-0);
}
.reconhecimento__intro,
.solucoes__intro { color: var(--fg-soft); }

.reconhecimento__sinais { list-style: none; padding: 0; margin-top: var(--space-4); }
.reconhecimento__sinais li {
  display: grid;
  grid-template-columns: 3px 1fr;
  gap: 1.1rem;
  align-items: stretch;
  padding-block: clamp(0.65rem, 1.5vw, 1.05rem);
  /* --g (0 a 1) e escrito pelo JS quando o palco esta ativo; sem JS o
     fallback do var() ja entrega 1 e a lista aparece inteira. */
  color: color-mix(in srgb, var(--fg) calc(var(--g, 1) * 100%), var(--fg-soft));
  opacity: calc(0.2 + var(--g, 1) * 0.8);
  transform: translateY(calc((1 - var(--g, 1)) * 14px));
  filter: blur(calc((1 - var(--g, 1)) * 3.5px));
}
.reconhecimento__sinais li span { font-size: clamp(1.02rem, 0.9rem + 0.75vw, 1.45rem); line-height: 1.35; }
/* sem palco (celular e janela baixa) quem anima e a transicao, nao o scroll */
.reconhecimento:not(.is-palco) .reconhecimento__sinais li {
  transition: opacity 0.55s ease, transform 0.55s ease, filter 0.55s ease, color 0.55s ease;
}
.reconhecimento:not(.is-palco) .reconhecimento__trilho::after { transition: transform 0.55s ease; }
.reconhecimento__trilho {
  position: relative;
  display: block;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.reconhecimento__trilho::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform-origin: top;
  transform: scaleY(var(--g, 1));
}
.reconhecimento__foto { position: relative; }
.reconhecimento__foto img {
  width: min(100%, 620px);
  margin-inline: auto;
  filter: drop-shadow(0 34px 54px rgba(11, 11, 13, 0.18));
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
}

/* Palco ligado pelo JS: a dobra ganha altura e a cena gruda no topo.
   overflow-x: clip (nunca hidden) no html e o que mantem o sticky vivo. */
.reconhecimento.is-palco { padding-block: 0; }
.reconhecimento.is-palco .reconhecimento__palco { height: 300vh; height: 300svh; }
.reconhecimento.is-palco .reconhecimento__cena {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  /* a folga de baixo existe pro dock flutuante nao cobrir o ultimo sinal */
  padding: var(--space-4) 0 6.5rem;
}
/* Altura e orcamento fechado: tudo precisa caber em uma tela. Dentro do
   palco o titulo e a lista andam um degrau abaixo do tamanho normal. */
.reconhecimento.is-palco .section__title { font-size: clamp(1.5rem, 0.9rem + 2.1vw, 2.7rem); }
.reconhecimento.is-palco .reconhecimento__intro { margin-top: var(--space-1); font-size: var(--step--1); }
.reconhecimento.is-palco .reconhecimento__sinais { margin-top: var(--space-3); }
.reconhecimento.is-palco .reconhecimento__sinais li { padding-block: clamp(0.5rem, 1.1vw, 0.85rem); }
.reconhecimento.is-palco .reconhecimento__sinais li span { font-size: clamp(0.98rem, 0.86rem + 0.6vw, 1.3rem); }
@media (max-height: 820px) {
  .reconhecimento.is-palco .section__title { font-size: clamp(1.35rem, 0.9rem + 1.5vw, 2.05rem); }
  .reconhecimento.is-palco .reconhecimento__sinais li span { font-size: 1rem; }
  .reconhecimento.is-palco .reconhecimento__cena { padding-bottom: 5.5rem; }
}

.solucoes { background: var(--bg-elev); color: var(--fg); overflow: clip; }
.solucoes__head { max-width: 64ch; }
.solucoes__indice {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.solucao { border-bottom: 1px solid var(--line); }
.solucao__linha {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 3vw, 2.4rem);
  align-items: baseline;
  padding-block: clamp(1.4rem, 3vw, 2.3rem);
  color: inherit;
  transition: padding-left 0.3s ease;
}
.solucao__linha::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.solucao__numero {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--fg-soft);
  transition: color 0.3s ease;
}
.solucao--entrada .solucao__numero { color: var(--accent); }
.solucao__titulo {
  margin: 0;
  font-size: clamp(1.35rem, 1rem + 1.7vw, 2.15rem);
  line-height: 1.12;
  transition: color 0.3s ease;
}
.solucao__apoio {
  display: block;
  margin-top: 0.5em;
  max-width: 52ch;
  color: var(--fg-soft);
  font-size: var(--step-0);
}
.solucao__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step--1);
  white-space: nowrap;
}
.solucao__cta-texto { opacity: 0; transform: translateX(6px); transition: opacity 0.3s ease, transform 0.3s ease; }
.solucao__seta { transition: transform 0.3s ease; }
.solucao__linha:hover,
.solucao__linha:focus-visible { padding-left: 0.9rem; }
.solucao__linha:hover::after,
.solucao__linha:focus-visible::after { transform: scaleX(1); }
.solucao__linha:hover .solucao__titulo,
.solucao__linha:focus-visible .solucao__titulo { color: var(--accent-ink); }
.solucao__linha:hover .solucao__numero,
.solucao__linha:focus-visible .solucao__numero { color: var(--accent); }
.solucao__linha:hover .solucao__cta-texto,
.solucao__linha:focus-visible .solucao__cta-texto { opacity: 1; transform: none; }
.solucao__linha:hover .solucao__seta,
.solucao__linha:focus-visible .solucao__seta { transform: translateX(4px); }

.fundamentos { background: var(--bg-dark); color: var(--fg-on-dark); overflow: clip; }
.fundamentos::before {
  content: "";
  position: absolute;
  inset: -30%;
  pointer-events: none;
  background: radial-gradient(circle at 74% 40%, rgba(var(--glow), 0.09), transparent 28%);
}
.fundamentos .wrap { position: relative; z-index: 1; }
.fundamentos__head { max-width: 64ch; }
.fundamentos__intro { color: var(--fg-on-dark-soft); }
.fundamentos__grid { display: grid; gap: 0; border-top: 1px solid rgba(255, 255, 255, 0.13); }
.fundamento {
  position: relative;
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  transition: transform 0.3s ease;
}
/* o fio acende da esquerda pra direita por cima da propria borda de baixo */
.fundamento__fio {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.fundamento:hover { transform: translateY(-4px); }
.fundamento:hover .fundamento__fio { transform: scaleX(1); }
.fundamento:hover .fundamento__titulo { color: #fff; }
.fundamento__titulo { margin: 0; font-size: var(--step-1); color: var(--fg-on-dark); transition: color 0.3s ease; }
.fundamento__descricao { margin-top: var(--space-2); color: var(--fg-on-dark-soft); font-size: var(--step--1); }

@media (min-width: 680px) {
  .fundamentos__grid { grid-template-columns: repeat(2, 1fr); }
  .fundamento { padding: var(--space-4); }
  .fundamento:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, 0.13); }
}
@media (min-width: 860px) {
  .reconhecimento--com-foto .reconhecimento__grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 0.95fr); gap: clamp(2rem, 5vw, 4.5rem); }
  .reconhecimento__foto img { width: 100%; max-width: none; max-height: 76svh; object-fit: contain; object-position: bottom; }
}
@media (min-width: 900px) {
  .solucao__linha { grid-template-columns: auto 1fr auto; align-items: center; }
}
@media (max-width: 899px) {
  .solucao__cta-texto { display: none; }
  .solucao__cta { position: absolute; right: 0; top: clamp(1.4rem, 3vw, 2.3rem); }
}
@media (min-width: 1100px) {
  .fundamentos__grid { grid-template-columns: repeat(4, 1fr); }
  .fundamento,
  .fundamento:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, 0.13); }
  .fundamento:last-child { border-right: 0; }
}
@media (max-width: 700px) {
  .reconhecimento.is-palco .reconhecimento__palco { height: 240vh; height: 240svh; }
}
@media (prefers-reduced-motion: reduce) {
  .solucao__seta,
  .sobre__link span { transition: none; }
  .fundamento:hover { transform: none; }
}

/* ============================================================
   SERVIÇOS — mosaico (24/08/2026)
   A grade de células iguais dizia que os seis pesam o mesmo, o que não é
   verdade. O primeiro bloco ocupa quatro células e declara o carro-chefe.

   O quadrado fecha sem sobra: em três colunas o bloco 1 toma 2x2, os
   blocos 2 e 3 caem na coluna da direita e os blocos 4, 5 e 6 fecham a
   terceira linha. Em duas colunas o primeiro e o último atravessam.
   ============================================================ */
/* A dobra é escura e emenda com Fundamentos, que vem logo acima (24/08).
   Duas dobras da mesma cor coladas somam os dois padding-block e o vão vira
   um bloco de preto vazio, então o topo desta aqui vem reduzido. */
.servicos {
  background: var(--bg-dark);
  color: var(--fg-on-dark);
  padding-top: clamp(2rem, 4vw, 3.5rem);
}

.servicos__lista { display: grid; gap: 0.6rem; }

.servico-bloco {
  position: relative;
  overflow: clip;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.35rem;
  padding: clamp(1rem, 2.2vw, 1.4rem);
  min-height: 132px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--r-md);
  /* vidro escuro: o bloco levanta do fundo sem virar um retângulo cinza */
  background: rgba(255, 255, 255, 0.045);
  color: inherit;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}
/* a luz laranja entra na diagonal, no mesmo ângulo da hachura da dobra */
.servico-bloco::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(var(--glow), 0.2), transparent 46%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.servico-bloco:hover,
.servico-bloco:focus-visible {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  /* no preto a sombra some, então quem dá o relevo é o brilho do acento */
  box-shadow: 0 26px 60px -34px rgba(var(--glow), 0.55);
  background: rgba(255, 255, 255, 0.07);
}
.servico-bloco:hover::after,
.servico-bloco:focus-visible::after { opacity: 1; }

.servico-bloco__miolo { position: relative; z-index: 1; display: block; }
.servico-bloco__title {
  margin: 0;
  font-size: var(--step-1);
  line-height: 1.15;
  color: var(--fg-on-dark);
  transition: color 0.3s ease;
}
/* `--accent-ink` é laranja queimado e some no preto: no escuro quem acende é o quente */
.servico-bloco:hover .servico-bloco__title,
.servico-bloco:focus-visible .servico-bloco__title { color: var(--accent-hot); }
.servico-bloco__desc {
  margin: 0.4em 0 0;
  color: var(--fg-on-dark-soft);
  font-size: var(--step--1);
  max-width: 40ch;
}

/* O bloco grande carrega o carro-chefe. Com o texto colado embaixo sobrava
   um vazio no topo que lia como buraco, então um fio curto ancora o canto
   e a escala do título ocupa o espaço de propósito. */
.servico-bloco--destaque { justify-content: space-between; }
.servico-bloco--destaque::before {
  content: '';
  display: block;
  width: 34px;
  height: 2px;
  background: var(--accent);
  transition: width 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.servico-bloco--destaque:hover::before,
.servico-bloco--destaque:focus-visible::before { width: 78px; }
.servico-bloco--destaque .servico-bloco__title { font-size: clamp(1.8rem, 1.1rem + 2.6vw, 3.2rem); }
.servico-bloco--destaque .servico-bloco__desc { font-size: var(--step-0); max-width: 44ch; }

.servico-bloco__seta {
  position: absolute;
  top: clamp(1rem, 2.2vw, 1.4rem);
  right: clamp(1rem, 2.2vw, 1.4rem);
  z-index: 1;
  color: var(--accent);
  opacity: 0;
  transform: translate(-6px, 4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.servico-bloco__seta svg { width: 1.3em; height: 1.3em; }
.servico-bloco--link:hover .servico-bloco__seta,
.servico-bloco--link:focus-visible .servico-bloco__seta { opacity: 1; transform: none; }

@media (min-width: 620px) {
  .servicos__lista { grid-template-columns: repeat(2, 1fr); }
  /* o primeiro e o último atravessam; os quatro do meio formam dois pares */
  .servico-bloco--destaque,
  .servico-bloco:last-child { grid-column: 1 / -1; }
  .servico-bloco--destaque { min-height: 190px; }
}
@media (min-width: 940px) {
  .servicos__lista { grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(150px, auto); }
  .servico-bloco:last-child { grid-column: auto; }
  .servico-bloco--destaque { grid-column: span 2; grid-row: span 2; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .servico-bloco:hover,
  .servico-bloco:focus-visible { transform: none; }
}

/* ============================================================
   FECHAMENTO — passos dentro do CTA (ex-"Como funciona")
   ============================================================ */
.cta__passos {
  list-style: none;
  margin: var(--space-4) auto 0;
  padding: 0;
  max-width: 30rem;
  display: grid;
  gap: 0.7rem;
  text-align: left;
}
.cta__passo {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
}
.cta__passo-num {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--accent);
  font-size: var(--step--1);
}

/* Sobre sem foto: sem buraco no grid */
.sobre__grid--sem-foto { grid-template-columns: 1fr; }
.sobre__grid--sem-foto .sobre__texto { max-width: 62ch; }

/* scroll-scrub do vídeo no Sobre: fundo preto dos frames some no escuro */
.sobre__scrub { align-self: end; }
.sobre__scrub canvas {
  width: 100%;
  max-width: 430px;
  height: auto;
  display: block;
  margin-inline: auto;
  /* sem blend: os frames fa-*.webp têm canal alpha REAL */
}
@media (max-width: 860px) {
  /* mobile: vídeo ABAIXO dos tiles, sem sobreposição (decisão 2026-08-10),
     ocupando a largura toda */
  .sobre__scrub { margin-top: var(--space-3); }
  .sobre__scrub canvas { max-width: 100%; }
}

/* CTA "espelho do hero" v4: dobra CLARA, sanduíche Vamos/foto/conversar?,
   sub PASSA POR TRÁS da foto; botão fica na frente (clicável) */
.cta--espelho {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  text-align: center;
  overflow: clip;
  min-height: 88svh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cta-fundo {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: clip;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
}
.cta-fundo i { position: absolute; display: block; border-radius: 50%; }
.cta-fundo__sol {
  width: 58vw; height: 58vw; left: -12%; top: -18%;
  background: radial-gradient(circle, #fff, rgba(255, 255, 255, 0.4) 45%, transparent 70%);
  filter: blur(34px);
  animation: mdn-cta-sol 36s ease-in-out infinite alternate;
}
.cta-fundo__sombra {
  width: 50vw; height: 46vw; right: -14%; bottom: -22%;
  background: radial-gradient(circle, rgba(11, 11, 13, 0.16), rgba(11, 11, 13, 0.06) 50%, transparent 72%);
  filter: blur(40px);
  animation: mdn-cta-sombra 44s ease-in-out infinite alternate;
}
@keyframes mdn-cta-sol { 50% { transform: translate(28vw, 12vh) scale(1.12); } 100% { transform: translate(50vw, 3vh) scale(0.95); } }
@keyframes mdn-cta-sombra { to { transform: translate(-32vw, -9vh) scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .cta-fundo i { animation: none !important; } }

.cta__centro { width: 100%; padding-inline: var(--gutter); position: relative; z-index: 1; }
.cta--espelho .eyebrow { position: relative; z-index: 4; }
.cta-nome {
  text-transform: uppercase;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin-top: 0.4em;
  user-select: none;
}
.cta-nome__linha {
  display: block;
  position: relative;
  white-space: nowrap;
  font-size: clamp(2rem, 9vw, 7.5rem);
}
.cta-nome__linha--tras { z-index: 1; }
.cta-nome__linha--frente { z-index: 3; margin-top: -0.05em; }
.cta-foto {
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  height: min(58svh, 540px);
  z-index: 2;
  pointer-events: none;
}
.cta-foto img {
  height: 100%;
  width: auto;
  display: block;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 97%);
          mask-image: linear-gradient(180deg, #000 72%, transparent 97%);
  filter: drop-shadow(0 30px 55px rgba(11, 11, 13, 0.25));
}
/* sub PASSA POR TRÁS da foto (z1 < foto z2); botão segue na frente (z4) */
.cta__base { margin-top: 1.2rem; }
.cta--espelho .cta__sub { color: var(--fg-soft); margin-inline: auto; position: relative; z-index: 1; }
.cta--espelho .cta__actions { justify-content: center; position: relative; z-index: 4; margin-top: var(--space-4); }
@media (max-width: 760px) {
  .cta--espelho { min-height: 80svh; }
  .cta-foto { height: min(44svh, 380px); }
}

/* CTA final v5 — LADO A LADO: dobra clara, convite à esquerda, foto à
   direita com fade na base. Mobile: título → frase → foto → botão. */
.cta--final {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  text-align: left;
  overflow: clip;
}
.cta--final .cta__wrap { position: relative; z-index: 1; }
.cta--com-foto .cta__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
}
.cta--final .cta__title { font-size: var(--step-4); margin: 0.3em 0 0; max-width: none; margin-inline: 0; }
.cta--final .cta__sub { color: var(--fg-soft); margin-inline: 0; margin-top: 0.6em; }
.cta--final .cta__actions { justify-content: flex-start; margin-top: var(--space-4); }
.cta__foto { align-self: end; }
.cta__foto img {
  width: min(100%, 620px);
  display: block;
  margin-inline: auto;
  margin-bottom: calc(-1 * clamp(4rem, 10vw, 9rem));
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 97%);
          mask-image: linear-gradient(180deg, #000 70%, transparent 97%);
  filter: drop-shadow(0 30px 50px rgba(11, 11, 13, 0.18));
}
@media (max-width: 860px) {
  .cta--com-foto .cta__wrap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; }
  /* o contêiner some e os filhos entram na ordem: título, frase, FOTO, botão */
  .cta--com-foto .cta__conteudo { display: contents; }
  .cta--com-foto .cta__conteudo .eyebrow { order: 0; }
  .cta--com-foto .cta__title { order: 1; }
  .cta--com-foto .cta__sub { order: 2; margin-inline: auto; }
  .cta--com-foto .cta__foto { order: 3; margin-top: var(--space-3); }
  .cta--com-foto .cta__actions { order: 4; justify-content: center; margin-top: var(--space-3); position: relative; z-index: 2; }
  .cta__foto img { width: 100%; margin-bottom: calc(-1 * var(--space-3)); }
}

/* ============================================================
   SERVIÇOS — fundo "linhas" + foto grande colada nos itens
   (escolhas do lab 2026-08-09: tons de cinza, movimento próprio)
   ============================================================ */
.servicos{position:relative;overflow:clip}
.servicos-fundo{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:clip;
  /* a luz morre antes da borda da dobra: sem costura com as vizinhas */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
}
.servicos-fundo i{position:absolute;display:block}
/* com a dobra no preto, a hachura inverte: linha clara sobre fundo escuro,
   e o facho de luz cai de .9 pra um valor que não estoura o branco */
.servicos-fundo__tela{
  inset:-30%;
  background:repeating-linear-gradient(115deg,transparent 0 22px,rgba(255,255,255,.05) 22px 23px);
  animation:mdn-linhas-deriva 70s linear infinite;
}
.servicos-fundo__brilho{
  inset:-20% -50%;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.055) 50%,transparent 60%);
  animation:mdn-linhas-luz 21s ease-in-out infinite alternate;
}
@keyframes mdn-linhas-deriva{to{transform:translateX(180px)}}
@keyframes mdn-linhas-luz{0%{transform:translateX(-22%)}100%{transform:translateX(22%)}}

.servicos__grid{position:relative;z-index:2}
.servicos--com-foto .servicos__grid{
  display:grid;
  grid-template-columns:1fr minmax(380px, 34vw);
  gap:clamp(.5rem, 1.5vw, 1.5rem); /* foto COLADA nos itens */
  align-items:end;
}
.servicos__head{grid-column:1 / -1;margin-bottom:var(--space-3)}
/* a lista cola no cabeçalho (topo); só a foto desce até a base da dobra */
.servicos--com-foto .servicos__lista{align-self:start}
.servicos__foto{align-self:end;position:relative}
.servicos__foto img{
  /* maior que a própria coluna: avança no vão e desce até a base da dobra */
  width:132%;max-width:none;margin-left:-22%;margin-bottom:calc(-1 * clamp(4rem, 10vw, 9rem));
  filter:drop-shadow(0 40px 60px rgba(11,11,13,.18));
}
@media (max-width:900px){
  .servicos--com-foto .servicos__grid{grid-template-columns:1fr}
  /* foto em 100% da largura, colada na lista (pedido mobile 2026-08-10) */
  .servicos__foto{max-width:none;width:100%;margin-inline:0;margin-top:-0.5rem}
  .servicos__foto img{width:100%;margin:0 0 calc(-1 * clamp(4rem, 10vw, 9rem))}
}
@media (prefers-reduced-motion: reduce){
  .servicos-fundo i{animation:none !important}
}

/* fita corrida fora do hero (ex.: ferramentas no Sobre) */
.fita-solta {
  border-block: 1px solid var(--theme-line);
  padding-block: 0.8rem;
  overflow: clip;
  margin-top: var(--space-5);
}

/* ============================================================
   RAIOS DO ALTO — luz sobre as primeiras dobras (hero + capas).
   Camada POR CIMA de tudo (pointer-events none); cada feixe balança
   devagar e respira na intensidade. A luz morre antes da base.
   ============================================================ */
.fx-raios {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: clip;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 76%, transparent 98%);
          mask-image: linear-gradient(180deg, #000 0, #000 76%, transparent 98%);
}
.hero--recorte .fx-raios { z-index: 6; }
.capa .fx-raios { z-index: 2; }
.fx-raios i {
  position: absolute;
  display: block;
  top: -30%;
  height: 170%;
  transform-origin: top center;
  rotate: var(--rot); /* inclinação base fixa; o movimento anima translate/opacity */
  filter: blur(12px);
  background: linear-gradient(180deg, rgba(255, 236, 214, 0.22), rgba(255, 236, 214, 0.06) 55%, transparent 80%);
  animation:
    fx-raio-sway ease-in-out infinite alternate,
    fx-raio-breathe ease-in-out infinite alternate;
}
.fx-raios i:nth-child(1) { left: 2%;  width: 6vw;  --rot: 12deg; animation-duration: 22s, 8s;    animation-delay: 0s, -3s; }
.fx-raios i:nth-child(2) { left: 15%; width: 4vw;  --rot: 15deg; animation-duration: 17s, 10s;   animation-delay: -9s, -6s; }
.fx-raios i:nth-child(3) { left: 27%; width: 9vw;  --rot: 11deg; animation-duration: 28s, 7s;    animation-delay: -17s, -1s; }
.fx-raios i:nth-child(4) { left: 41%; width: 5vw;  --rot: 17deg; animation-duration: 19s, 11s;   animation-delay: -5s, -8s; }
.fx-raios i:nth-child(5) { left: 54%; width: 8vw;  --rot: 13deg; animation-duration: 25s, 9s;    animation-delay: -13s, -4s; }
.fx-raios i:nth-child(6) { left: 68%; width: 4vw;  --rot: 19deg; animation-duration: 16s, 6.5s;  animation-delay: -7s, -2s; }
.fx-raios i:nth-child(7) { left: 79%; width: 7vw;  --rot: 15deg; animation-duration: 30s, 10.5s; animation-delay: -21s, -7s; }
.fx-raios i:nth-child(8) { left: 91%; width: 5vw;  --rot: 21deg; animation-duration: 18s, 7.5s;  animation-delay: -11s, -5s; }
@keyframes fx-raio-sway {
  from { translate: -4vw 0; }
  to   { translate: 4vw 0; }
}
@keyframes fx-raio-breathe {
  from { opacity: 0.22; }
  to   { opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-raios i { animation: none; opacity: 0.45; }
}

/* ============================================================
   CAPA — dobra 01 padrão das páginas internas (imagem + chamada)
   ============================================================ */
.capa {
  position: relative;
  overflow: clip;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 36svh;
  padding-block: var(--space-6) var(--space-5);
}
.capa--img { min-height: 62svh; color: var(--fg-on-dark); }
.capa__fundo { position: absolute; inset: 0; z-index: 0; }
.capa__fundo img { width: 100%; height: 100%; object-fit: cover; object-position: center 24%; /* prioriza o rosto em foto retrato */ }
.capa__fundo::after {
  content: '';
  position: absolute;
  inset: 0;
  /* véu pra legibilidade + base PRETA sólida (decisão 2026-08-10:
     o claro só entra quando a dobra acaba no scroll) */
  background: linear-gradient(180deg,
    rgba(11, 11, 13, 0.62) 0%,
    rgba(11, 11, 13, 0.48) 45%,
    rgba(11, 11, 13, 0.78) 80%,
    #0b0b0d 100%);
}
/* Sem foto, o fundo vira preto chapado e o véu do ::after cai por cima dele.
   O resultado é igual ao de uma capa com foto escura, sem caso especial no
   resto do componente (2026-08-18). */
.capa--sem-foto .capa__fundo { background: var(--bg-dark); }
.capa__conteudo { position: relative; z-index: 1; max-width: 52rem; }
.capa--img .eyebrow { color: var(--accent-hot); }
.capa__title { font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.03; margin: 0.35em 0 0; }
.capa__sub { margin-top: 0.8em; font-size: var(--step-1); color: var(--fg-soft); max-width: 44ch; margin-inline: auto; }
.capa--img .capa__sub { color: var(--fg-on-dark-soft); }

/* cards de serviço em 2 colunas (página /servicos) — VIDRO sobre um
   fundo de massas em movimento (2026-08-10) */
.servicos-cards-secao { position: relative; overflow: clip; }
.servicos-cards-fundo {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: clip;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.servicos-cards-fundo i { position: absolute; display: block; filter: blur(44px); }
.servicos-cards-fundo .m1 {
  width: 48vw; height: 38vw; left: -6%; top: -4%;
  border-radius: 58% 42% 55% 45% / 52% 48% 52% 48%;
  background: rgba(11, 11, 13, 0.16);
  animation: mdn-mare-1 23s ease-in-out infinite alternate;
}
.servicos-cards-fundo .m2 {
  width: 40vw; height: 34vw; right: -4%; top: 24%;
  border-radius: 45% 55% 48% 52% / 55% 45% 55% 45%;
  background: #ffffff;
  animation: mdn-mare-2 31s ease-in-out infinite alternate;
}
.servicos-cards-fundo .m3 {
  width: 44vw; height: 32vw; left: 24%; bottom: -12%;
  border-radius: 52% 48% 45% 55% / 48% 52% 48% 52%;
  background: rgba(11, 11, 13, 0.22);
  animation: mdn-mare-3 40s ease-in-out infinite alternate;
}
@keyframes mdn-mare-1 { to { transform: translate(18vw, 12vh) rotate(26deg) scale(1.15); } }
@keyframes mdn-mare-2 { to { transform: translate(-16vw, -10vh) rotate(-18deg) scale(1.2); } }
@keyframes mdn-mare-3 { to { transform: translate(12vw, -10vh) rotate(14deg) scale(0.88); } }
@media (prefers-reduced-motion: reduce) { .servicos-cards-fundo i { animation: none; } }

.servicos-cards {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
.servico-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: var(--space-4) var(--space-3);
  /* vidro de verdade: embaça as massas que passam atrás */
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  box-shadow: 0 24px 50px -30px rgba(11, 11, 13, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.servico-card:hover,
.servico-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.servico-card__title { margin: 0; font-size: var(--step-1); }
.servico-card__desc { margin: 0; color: var(--fg-soft); font-size: var(--step--1); line-height: 1.65; }
.servico-card__cta { margin-top: auto; padding-top: 0.6rem; display: inline-flex; align-items: center; gap: 0.4em; font-weight: 600; color: var(--accent); }
.servico-card__cta svg { width: 1.1em; height: 1.1em; transition: transform 0.3s ease; }
.servico-card:hover .servico-card__cta svg { transform: translateX(4px); }
.servicos-cards .servico-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 720px) { .servicos-cards { grid-template-columns: 1fr; } }

/* ============================================================
   Páginas Contato e Trabalhos (arquivo)
   ============================================================ */
.contato__canais {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  margin-block: var(--space-3);
}
.contato__canal {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-display);
  font-weight: 600;
}
.contato__canal svg { width: 20px; height: 20px; color: var(--accent); }
.contato__canal:hover { color: var(--accent); }
.contato__passos { margin-inline: 0; }
.contato__redes { margin-top: var(--space-4); color: var(--theme-fg-soft); }
.contato__redes a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }

.trabalhos-arquivo__vazio {
  padding: var(--space-5);
  border: 1px dashed var(--theme-line);
  border-radius: var(--r-lg);
  text-align: center;
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  color: var(--theme-fg-soft);
}

/* --- paginação do archive de trabalhos --- */
.trabalhos-arquivo .pagination,
.trabalhos-arquivo .nav-links {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  align-items: center;
  margin-top: var(--space-5);
  flex-wrap: wrap;
}
.trabalhos-arquivo .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border-radius: var(--r-lg);
  border: 1px solid var(--theme-line);
  background: transparent;
  color: var(--theme-fg);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.trabalhos-arquivo .page-numbers:hover {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.trabalhos-arquivo .page-numbers.current {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.trabalhos-arquivo .page-numbers.dots {
  border: none;
  background: transparent;
  pointer-events: none;
}
.trabalhos-arquivo .page-numbers.prev,
.trabalhos-arquivo .page-numbers.next {
  padding: 0 18px;
}

/* --- páginas extras do case (LPs, sub-páginas) --- */
.case-extras {
  background: var(--theme-bg);
}
.case-extras__lista {
  display: grid;
  gap: var(--space-5);
}
.case-extras__item {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
  padding: var(--space-4);
  border: 1px solid var(--theme-line);
  border-radius: var(--r-lg);
  background: var(--theme-bg-soft);
}
.case-extras__item .visor {
  width: 100%;
}
.case-extras__info h3 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  font-weight: 600;
  margin: 0 0 var(--space-2) 0;
  letter-spacing: -0.01em;
}
.case-extras__info p {
  color: var(--theme-fg-soft);
  margin: 0 0 var(--space-3) 0;
}
.case-extras__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.case-extras__link:hover {
  color: var(--accent-ink);
}
@media (max-width: 800px) {
  .case-extras__item {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   PEÇA AVULSA (single-trabalho sem case) — a arte é a página.
   Encarte não tem case pra contar: ele É a entrega. Aqui a
   imagem aparece INTEIRA, sem corte e sem véu, com a ficha ao
   lado. No celular a ficha sobe e a arte ocupa a largura.
   ============================================================ */

.peca { background: var(--bg-dark); padding-block: var(--space-6) var(--space-7); }
.peca__wrap {
  display: grid; gap: var(--space-5);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 62rem) {
  .peca__wrap {
    /* a arte manda no espaço: a ficha vive na coluna estreita */
    grid-template-columns: minmax(14rem, 22rem) minmax(0, 1fr);
    align-items: start; gap: var(--space-6);
  }
  /* a ficha acompanha a rolagem enquanto a arte, que é comprida, passa */
  .peca__info { position: sticky; top: var(--space-5); }
}
.peca__titulo {
  margin: var(--space-2) 0 0;
  font-size: var(--step-4); line-height: 1.05; letter-spacing: -.03em;
  color: var(--fg-on-dark);
}
.peca__linha { margin: var(--space-3) 0 0; color: var(--fg-on-dark-soft); max-width: 34ch; }
.peca__ficha {
  display: flex; flex-wrap: wrap; gap: 1.2rem 2.4rem;
  margin: var(--space-4) 0 0; padding-top: var(--space-3);
  border-top: 1px solid rgba(255,255,255,.16);
}
.peca__ficha div { margin: 0; }
.peca__ficha dt {
  font-family: var(--font-display); font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-on-dark-soft);
}
.peca__ficha dd { margin: .25rem 0 0; font-size: var(--step-1); font-weight: 600; color: var(--fg-on-dark); }
.peca__arte { margin: 0; }
.peca__arte img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-md);
  /* a arte é clara e o fundo é escuro: a borda evita o corte “flutuando” */
  box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08);
}

/* ============================================================
   CASE (single-trabalho) — capa escura, identidade em dobra
   própria e o visor da página em movimento.
   ============================================================ */

/* --- capa: o fundo é o quadro 0 da própria gravação --- */
.case-capa { min-height: 66svh; display: grid; align-items: end; }
.case-capa__fundo img { object-position: center top; filter: saturate(.85) blur(6px); transform: scale(1.06); }
.case-capa__fundo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,11,13,.72) 0%, rgba(11,11,13,.84) 55%, var(--bg-dark) 100%);
}
.case-capa__conteudo { position: relative; z-index: 3; padding-block: var(--space-6) var(--space-5); }
.case-capa__frente { text-decoration: none; }
.case-capa__frente:hover { color: var(--accent); }
.case-capa__titulo {
  font-size: clamp(2.4rem, 6.4vw, 4.6rem); line-height: .98; letter-spacing: -.035em;
  margin: .28em 0 0; max-width: 18ch; text-wrap: balance; color: var(--fg-on-dark);
}
.case-capa__linha { margin-top: .9rem; font-size: var(--step-1); color: var(--fg-on-dark-soft); max-width: 52ch; }
.case-capa__ficha {
  display: flex; flex-wrap: wrap; gap: 1.4rem 2.8rem;
  /* acompanha o eixo do resto da capa, que é centralizado */
  justify-content: center; text-align: center;
  margin: var(--space-4) 0 0; padding-top: var(--space-3);
  border-top: 1px solid rgba(255,255,255,.16);
}
.case-capa__ficha div { margin: 0; }
.case-capa__ficha dt {
  font-family: var(--font-display); font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-on-dark-soft);
}
.case-capa__ficha dd { margin: .25rem 0 0; font-size: var(--step-1); font-weight: 600; color: var(--fg-on-dark); }
.case-capa__ficha .e-metrica dd {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 800; letter-spacing: -.03em;
  color: var(--accent-hot); line-height: 1;
}

/* --- prosa: página larga, medida de leitura curta --- */
/* a prosa deixa de ser coluna estreita: cada parágrafo vira uma LINHA com o
   texto de um lado e um pedaço real da página do outro. O texto diz o que foi
   feito, a imagem mostra. */
.case-prosa__col { max-width: none; }
.prosa-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.2rem, 4vw, 3.2rem);
  align-items: center;
  margin-bottom: var(--space-5);
}
.prosa-linha--so-texto { grid-template-columns: minmax(0, 62ch); }
/* alterna o lado: sem isso a leitura vira coluna dupla previsível */
.prosa-linha:nth-of-type(even) .prosa-linha__texto { order: 2; }
.prosa-linha__texto { max-width: 56ch; }
.prosa-linha__img { margin: 0; }
.prosa-linha__img img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-lg);
  border: 1px solid var(--theme-line);
  box-shadow: 0 30px 60px -34px rgba(11, 11, 13, .45);
  /* flutuação lenta e dessincronizada: dá vida sem virar carrossel.
     Ciclos primos entre si (7,3 / 9,1 / 11,4s) pra nunca baterem juntos. */
  animation: mdn-flutua 7.3s ease-in-out infinite alternate;
  will-change: transform;
  transition: transform .5s cubic-bezier(.22,.68,.16,1), box-shadow .5s ease;
}
.prosa-linha:nth-of-type(2) .prosa-linha__img img { animation-duration: 9.1s; animation-delay: -3.4s; }
.prosa-linha:nth-of-type(3) .prosa-linha__img img { animation-duration: 11.4s; animation-delay: -1.7s; }
.prosa-linha:nth-of-type(4) .prosa-linha__img img { animation-duration: 8.2s; animation-delay: -5.2s; }
.prosa-linha:nth-of-type(5) .prosa-linha__img img { animation-duration: 10.3s; animation-delay: -2.6s; }
@keyframes mdn-flutua {
  from { transform: translate3d(0, 9px, 0) scale(1); }
  to   { transform: translate3d(0, -11px, 0) scale(1.012); }
}
.prosa-linha__img:hover img {
  transform: translate3d(0, -14px, 0) scale(1.03);
  box-shadow: 0 44px 80px -34px rgba(11, 11, 13, .55);
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .prosa-linha__img img { animation: none; }
}
@media (max-width: 820px) {
  .prosa-linha,
  .prosa-linha--so-texto { grid-template-columns: 1fr; gap: 1.1rem; }
  .prosa-linha:nth-of-type(even) .prosa-linha__texto { order: 0; }
}

/* cada bloco começa com um traço: separa sem precisar de linha cheia */
.case-prosa__col h2 {
  font-size: var(--step-3);
  margin: var(--space-5) 0 .5em;
  padding-top: 1.1rem;
  position: relative;
}
.case-prosa__col h2::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 2.2rem; height: 2px;
  background: var(--accent);
}
.case-prosa__col h2:first-child { margin-top: 0; }

.case-prosa__col p { font-size: var(--step-1); line-height: 1.7; margin: 0 0 1.25em; }
.prosa-linha__texto p:last-child { margin-bottom: 0; }
.case-prosa__col p:last-child { margin-bottom: 0; }

/* o primeiro parágrafo de cada bloco entra maior: dá porta de entrada
   ao texto e quebra o bloco corrido sem precisar de subtítulo */
/* o parágrafo de entrada NÃO pode competir com o título: ele ganha peso
   pela cor, não pelo corpo. Antes estava em step-2, igual ao h2, e como o
   corpo é fonte de texto e o título é display, o parágrafo lia MAIOR. */
.case-prosa__col h2 + p {
  font-size: var(--step-1);
  color: var(--theme-fg);
}

/* escalonamento sem style inline (o wp_kses_post derruba transition-delay).
   Só pesa quando vários blocos entram na mesma rolagem. */
.case-prosa__col > .reveal-up:nth-child(2) { transition-delay: 70ms; }
.case-prosa__col > .reveal-up:nth-child(3) { transition-delay: 140ms; }
.case-prosa__col > .reveal-up:nth-child(4) { transition-delay: 190ms; }
.case-prosa__col > .reveal-up:nth-child(n+5) { transition-delay: 230ms; }


/* --- identidade: era um cartãozinho, virou dobra --- */
.paleta {
  list-style: none; padding: 0; margin: 0 0 var(--space-5);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem;
}
.paleta__cor {
  background: var(--cor); border-radius: var(--r-md);
  min-height: clamp(120px, 16vw, 190px);
  display: flex; align-items: flex-end; padding: .9rem;
  border: 1px solid var(--theme-line);
  transition: transform .35s cubic-bezier(.22,.68,.16,1);
}
.paleta__cor:hover { transform: translateY(-6px); }
.paleta__hex {
  font-family: var(--font-display); font-size: .68rem; letter-spacing: .1em;
  background: rgba(0,0,0,.42); color: #fff; padding: .2rem .5rem; border-radius: var(--r-sm);
  backdrop-filter: blur(4px);
}
.tipografia { display: flex; flex-direction: column; gap: var(--space-5); }
.tipo { display: grid; gap: .9rem; }
.tipo__papel {
  display: block; font-family: var(--font-display); font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--theme-fg-soft);
}
.tipo__nome { display: block; letter-spacing: -.03em; line-height: 1; margin-top: .18rem; }
.tipo__nota { display: block; margin-top: .3rem; color: var(--theme-fg-soft); font-size: var(--step--1); }

/* o alfabeto na PRÓPRIA fonte do projeto (fonte-N.woff2, recortada) */
.tipo__abc { line-height: 1.18; }
.tipo__linha { margin: 0 0 .1em; word-spacing: .12em; }
.tipo__linha--num { color: var(--accent-hot); }

/* título grande e primeiro; corpo menor logo abaixo */
.tipo--titulo .tipo__nome { font-size: clamp(2.4rem, 6vw, 4.2rem); }
.tipo--titulo .tipo__linha--abc { font-size: clamp(1.5rem, 3.6vw, 2.6rem); }
.tipo--titulo .tipo__linha--num { font-size: clamp(1.2rem, 2.8vw, 2rem); }

.tipo--corpo .tipo__nome { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
.tipo--corpo .tipo__linha--abc { font-size: clamp(1.05rem, 2.2vw, 1.5rem); }
.tipo--corpo .tipo__linha--num { font-size: clamp(.95rem, 2vw, 1.3rem); }

/* --- visor --- */
.visor__topo { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-bottom: .6rem; }
.visor__abas { display: inline-flex; gap: 2px; background: var(--theme-line); border-radius: var(--r-pill); padding: 2px; }
.visor__abas button {
  border: 0; background: transparent; color: var(--theme-fg-soft);
  font-family: var(--font-display); font-weight: 600; font-size: .78rem;
  padding: .32rem .95rem; border-radius: var(--r-pill); cursor: pointer;
}
.visor__abas button[aria-selected="true"] { background: var(--bg-elev); color: var(--fg); box-shadow: var(--shadow-sm); }
.visor__dica { display: inline-flex; align-items: center; gap: .55rem; font-size: .72rem; color: var(--theme-fg-soft); }
/* rótulo do visor das páginas irmãs: ali não há abas, então o nome ocupa o lugar delas */
.visor__rotulo {
  font-family: var(--font-display); font-weight: 600; font-size: .78rem;
  color: var(--theme-fg-soft); letter-spacing: .01em;
}
.visor__tocar {
  font-family: var(--font-display); font-size: .72rem;
  border: 1px solid var(--theme-line); background: var(--bg-elev); color: var(--fg);
  border-radius: var(--r-pill); padding: .26rem .85rem; cursor: pointer;
}
.visor__tocar:hover { border-color: var(--accent); color: var(--accent-ink); }
.visor__palco { background: var(--bg-dark); border-radius: var(--r-lg); padding: clamp(12px, 2vw, 22px); display: grid; place-items: center; }
.visor__moldura {
  width: 100%; max-width: 940px; border-radius: var(--r-md); overflow: hidden;
  border: 1px solid rgba(255,255,255,.12); background: #000;
  transition: max-width .35s cubic-bezier(.22,.68,.16,1);
}
.visor__moldura.is-fone { max-width: 320px; border-radius: 28px; border-width: 8px; }
.visor__barra { display: flex; gap: 5px; align-items: center; padding: 9px 12px; background: rgba(255,255,255,.06); }
.visor__barra i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.2); }
.visor__barra i:first-child { background: var(--accent); }
.visor__scrub {
  position: relative; aspect-ratio: 1440 / 900; max-height: 76vh;
  overflow-y: auto; overscroll-behavior: contain; background: #000; scrollbar-width: thin;
}
.visor__moldura.is-fone .visor__scrub { aspect-ratio: 390 / 844; }
.visor__tela { position: sticky; top: 0; height: 0; z-index: 2; }
.visor__tela img { display: block; width: 100%; height: auto; }
/* trilho FIXO: dobrar os quadros afina o movimento sem dobrar o gesto */
.visor__trilho { height: 11700px; }
.visor__prog { position: sticky; bottom: 0; height: 3px; background: rgba(255,255,255,.14); z-index: 3; }
.visor__prog i { display: block; height: 100%; width: 0; background: var(--accent); }

/* --- decisões: cartões, não lista apertada --- */
.case-decisoes .section__head { position: relative; z-index: 1; }
.decisoes {
  position: relative; z-index: 1;
  list-style: none; counter-reset: dec; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem;
}
/* vidro de verdade sobre as massas em movimento (mesma receita da /servicos).
   Alfa puro no fundo, sem blend: blend mata o backdrop-filter. */
.decisao {
  counter-increment: dec;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: var(--r-lg);
  padding: 1.4rem 1.5rem;
  background: rgba(255, 255, 255, .32);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  box-shadow: 0 24px 50px -30px rgba(11, 11, 13, .25);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.decisao:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.decisao::before {
  content: counter(dec, decimal-leading-zero);
  font-family: var(--font-display); font-size: .7rem; font-weight: 700;
  letter-spacing: .06em; color: var(--accent-ink);
}
.decisao h3 { font-size: var(--step-1); margin: .3rem 0 .35rem; letter-spacing: -.01em; }
.decisao p { margin: 0; color: var(--theme-fg-soft); font-size: var(--step--1); }

/* --- filtro por frente no arquivo de trabalhos --- */
.filtro-frentes { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--space-4); padding: 0; list-style: none; }
/* duas barras empilhadas (tipo de trabalho e segmento): a de cima cola na de
   baixo, senão parecem uma linha só que quebrou */
.filtro-frentes + .filtro-frentes { margin-top: calc(var(--space-4) * -1 + .5rem); }
.filtro-frentes a {
  display: inline-block; font-family: var(--font-display); font-weight: 600; font-size: .82rem;
  padding: .42rem 1rem; border-radius: var(--r-pill); border: 1px solid var(--theme-line);
  color: var(--theme-fg-soft); text-decoration: none;
}
.filtro-frentes a:hover { border-color: var(--accent); color: var(--accent-ink); }
.filtro-frentes .is-atual a { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ============================================================
   ARTIGOS — a listagem, a página do artigo e os blocos que os
   textos usam. Na ordem das dobras do spec do blog.
   ============================================================ */

/* --- listagem --- */
.artigos__lista { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }
.artigo-card {
  border: 1px solid var(--theme-line); border-radius: var(--r-lg); background: var(--bg-elev);
  overflow: hidden; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.artigo-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.artigo-card__link { display: flex; flex-direction: column; height: 100%; }
.artigo-card__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.artigo-card__body { padding: var(--space-3); display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.artigo-card__title { font-size: var(--step-1); line-height: 1.12; }
.artigo-card__resumo { color: var(--theme-fg-soft); font-size: var(--step--1); line-height: 1.65; }
.artigo-card__meta {
  margin-top: auto; padding-top: .6rem; display: flex; flex-wrap: wrap; gap: .45rem;
  font-family: var(--font-display); font-size: .78rem; color: var(--theme-fg-soft);
}

/* O primeiro da lista completa ocupa a linha inteira e deita. Listagem sem
   hierarquia lê como catálogo, e o mais recente é o que tem mais chance de
   ser o certo pra quem acabou de chegar. */
@media (min-width: 48rem) {
  .artigo-card--destaque { grid-column: 1 / -1; }
  .artigo-card--destaque .artigo-card__link { flex-direction: row; }
  /* A imagem sai do fluxo (absoluta) de propósito. Com ela no fluxo pedindo
     height:100% dentro de uma coluna sem altura definida, e a linha flex se
     esticando pelo item mais alto, a conta vira circular e o cartão dispara
     pra mais de mil pixels. Fora do fluxo, quem manda na altura é só o texto,
     e o min-height garante área de imagem quando o texto é curto. */
  .artigo-card--destaque .artigo-card__capa {
    flex: 0 0 46%; position: relative; overflow: hidden; min-height: 17rem;
  }
  .artigo-card--destaque .artigo-card__img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; aspect-ratio: auto;
  }
  .artigo-card--destaque .artigo-card__body { justify-content: center; padding: var(--space-4); }
  .artigo-card--destaque .artigo-card__title { font-size: var(--step-2); }
}

.artigos-arquivo__vazio { text-align: center; max-width: 40ch; margin-inline: auto; display: grid; gap: var(--space-3); justify-items: center; }

/* --- página do artigo --- */
.artigo__grade { display: grid; gap: var(--space-4); }
.artigo__texto { min-width: 0; }
.artigo__resumo { font-size: var(--step-1); line-height: 1.45; max-width: 60ch; }
.artigo__ficha {
  display: flex; flex-wrap: wrap; gap: .45rem; margin-top: var(--space-2); padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--theme-line);
  font-family: var(--font-display); font-size: .8rem; color: var(--theme-fg-soft);
}
.artigo__ficha-atualizado { color: var(--accent-ink); font-weight: 600; }
.artigo__texto .prose { margin-top: var(--space-4); }

/* O índice é um <details open>, um markup só: no celular ele é o sanfonado
   que está no HTML, e a partir de 1080px vira coluna presa na lateral. Nada
   de duplicar a lista pra dois tamanhos de tela — id repetido quebraria os
   âncoras e a leitura por leitor de tela. */
.indice {
  border: 1px solid var(--theme-line); border-radius: var(--r-md); background: var(--bg-elev);
  padding: var(--space-2) var(--space-3);
}
.indice__titulo {
  font-family: var(--font-display); font-weight: 600; font-size: .82rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--theme-fg-soft); cursor: pointer;
}
.indice__lista { margin: .9rem 0 0; padding-left: 1.15rem; display: grid; gap: .5rem; font-size: var(--step--1); }
.indice__lista a { color: var(--theme-fg-soft); line-height: 1.4; }
.indice__lista a:hover { color: var(--accent-ink); }
.indice__lista li.is-atual > a { color: var(--accent-ink); font-weight: 600; }

@media (min-width: 1080px) {
  .artigo__grade {
    grid-template-columns: 15rem minmax(0, 68ch);
    justify-content: center; align-items: start; gap: var(--space-5);
  }
  /* 6rem tira o índice de baixo do dock flutuante quando ele gruda */
  .indice { position: sticky; top: 6rem; max-height: calc(100vh - 8rem); overflow-y: auto; }
}

/* --- leitura longa --- */
.prose { font-size: 1.075rem; line-height: 1.72; }
.prose > * + * { margin-top: 1.2em; }
.prose h2, .prose h3 { scroll-margin-top: 6rem; }
.prose figure { margin: 0; }
/* Tabela larga rola dentro da própria caixa. Sem isso ela empurra a página
   inteira no celular, e o texto do artigo passa a rolar de lado junto. */
.prose .wp-block-table { overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.prose th, .prose td { padding: .7rem .9rem; border: 1px solid var(--theme-line); text-align: left; vertical-align: top; }
.prose thead th { background: color-mix(in srgb, var(--theme-fg) 5%, transparent); font-family: var(--font-display); }
.prose figcaption { margin-top: .6rem; font-size: .82rem; color: var(--theme-fg-soft); line-height: 1.5; }

/* --- vídeo: a fachada que só carrega o player no clique --- */
.video { margin-block: var(--space-4); }
.video__botao {
  position: relative; display: block; width: 100%; padding: 0;
  border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-md);
}
.video__thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .5s ease; }
.video__botao:hover .video__thumb { transform: scale(1.03); }
.video__play {
  position: absolute; inset: 0; margin: auto; width: 4.4rem; height: 4.4rem;
  display: grid; place-items: center; border-radius: var(--r-pill);
  background: var(--accent); color: #fff; box-shadow: var(--shadow-glow);
  transition: transform .3s ease;
}
.video__botao:hover .video__play { transform: scale(1.08); }
.video__play svg { width: 1.9rem; height: 1.9rem; margin-left: .12rem; }
.video__rotulo {
  position: absolute; inset: auto 0 0 0; padding: 3rem 1rem .9rem; text-align: left;
  font-family: var(--font-display); font-weight: 600; font-size: .9rem; color: #fff;
  background: linear-gradient(to top, rgba(11, 11, 13, .82), transparent);
}
.video__link { color: var(--accent-ink); text-decoration: underline; }
.video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-md); display: block; }

/* --- FAQ --- */
.faq-artigo { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--theme-line); }
.faq-artigo__titulo { font-size: var(--step-2); }
.faq-artigo__lista { margin-top: var(--space-3); display: grid; gap: var(--space-2); }
.faq-artigo__item { border: 1px solid var(--theme-line); border-radius: var(--r-md); padding: var(--space-2) var(--space-3); background: var(--bg-elev); }
.faq-artigo__item dt { font-family: var(--font-display); font-weight: 600; font-size: var(--step-0); }
.faq-artigo__item dd { margin: .5rem 0 0; color: var(--theme-fg-soft); line-height: 1.65; }

/* --- o trabalho que prova o artigo --- */
.artigo-ligado { margin-top: var(--space-5); }
.artigo-ligado__card {
  display: flex; align-items: center; gap: var(--space-3); margin-top: .8rem;
  border: 1px solid var(--theme-line); border-radius: var(--r-lg); background: var(--bg-elev);
  overflow: hidden; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.artigo-ligado__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.artigo-ligado__img { width: 9rem; aspect-ratio: 4 / 3; object-fit: cover; flex: none; }
.artigo-ligado__body { display: grid; gap: .25rem; padding: var(--space-2) var(--space-3) var(--space-2) 0; }
.artigo-ligado__frente { font-family: var(--font-display); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); }
.artigo-ligado__title { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); line-height: 1.15; }

/* --- quem escreveu --- */
.autor { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--theme-line); }
.autor__caixa { display: flex; gap: var(--space-3); align-items: flex-start; }
/* O retrato é de estúdio, com fundo claro quase da cor do papel do site: sem
   um aro, a cabeça flutuaria sem borda nenhuma. O anel de 1px resolve isso sem
   pesar, e o fundo elevado segura o lugar enquanto a imagem carrega. */
.autor__foto {
  flex: none; width: 7.5rem; aspect-ratio: 1; border-radius: var(--r-pill); overflow: hidden;
  background: var(--bg-elev);
  box-shadow: 0 0 0 1px var(--theme-line), var(--shadow-sm);
}
.autor__foto img { width: 100%; height: 100%; object-fit: cover; }
.autor__texto { min-width: 0; }
.autor__nome { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); margin-top: .35rem; line-height: 1.1; }
.autor__bio { color: var(--theme-fg-soft); font-size: var(--step--1); line-height: 1.65; margin-top: .5rem; }
.autor__link {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: .8rem;
  font-family: var(--font-display); font-weight: 600; font-size: .85rem; color: var(--accent-ink);
}
.autor__link svg { width: 1em; height: 1em; transition: transform .25s ease; }
.autor__link:hover svg { transform: translateX(3px); }

@media (max-width: 34rem) {
  .autor__caixa { flex-direction: column; }
  .autor__foto { width: 5.5rem; }
}

/* --- para ler depois --- */
.artigo-proximos__titulo { font-size: var(--step-2); margin-bottom: var(--space-3); }
.artigos__lista--compacta { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }

/* --- a dobra de artigos na home --- */
.artigos-home__todos {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: var(--space-3);
  font-family: var(--font-display); font-weight: 600; font-size: .9rem; color: var(--accent-ink);
}
.artigos-home__todos svg { width: 1em; height: 1em; transition: transform .25s ease; }
.artigos-home__todos:hover svg { transform: translateX(3px); }

/* ============================================================
   BLOCOS DE CONTEÚDO — as variações registradas em inc/blocos.php.
   Ficam FORA de .prose de propósito: o editor de blocos carrega este mesmo
   arquivo (add_editor_style) e lá não existe o wrapper .prose. Aninhar aqui
   faria o bloco parecer certo no site e cru no editor.
   ============================================================ */

/* Destaque — o ponto que não pode passar batido */
.is-style-mdn-destaque {
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  padding: var(--space-3);
}
.is-style-mdn-destaque > * + * { margin-top: .7em; }

/* Comparativa — os artigos de preço vivem disso */
.is-style-mdn-comparativa table { border-collapse: collapse; width: 100%; min-width: 32rem; }
.is-style-mdn-comparativa thead th {
  background: var(--bg-dark); color: var(--fg-on-dark);
  font-family: var(--font-display); font-weight: 600; border-color: var(--bg-dark);
}
.is-style-mdn-comparativa tbody tr:nth-child(even) { background: color-mix(in srgb, var(--theme-fg) 3.5%, transparent); }
.is-style-mdn-comparativa tbody td:first-child { font-weight: 600; }

/* Checagem — o que precisa ter na página */
.is-style-mdn-checagem { list-style: none; padding-left: 0; display: grid; gap: .6rem; }
.is-style-mdn-checagem li {
  padding-left: 1.9rem; line-height: 1.6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff5a00' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5 5L20 6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 0 .28em; background-size: 1.15rem 1.15rem;
}

/* Norma — o artigo da OAB, a resolução do CFM, com a fonte à vista */
.is-style-mdn-norma {
  border: 1px solid var(--theme-line); border-left: 3px solid var(--theme-fg);
  border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--bg-elev);
  padding: var(--space-3); font-style: normal;
}
.is-style-mdn-norma p { font-size: var(--step--1); line-height: 1.7; }
.is-style-mdn-norma cite {
  display: block; margin-top: .9rem; font-style: normal;
  font-family: var(--font-display); font-size: .78rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--theme-fg-soft);
}

/* Print de tela — moldura, pra não se confundir com foto */
.is-style-mdn-print img { border: 1px solid var(--theme-line); border-radius: var(--r-md); box-shadow: var(--shadow-md); }
.is-style-mdn-print figcaption { text-align: center; }

/* Antes e depois de frase (padrão mdn/antes-depois) */
.antes-depois { gap: var(--space-2); }
.antes-depois__lado { border-radius: var(--r-md); padding: var(--space-3); height: 100%; border: 1px solid var(--theme-line); }
.antes-depois__lado--errado { background: color-mix(in srgb, #c0392b 6%, transparent); border-color: color-mix(in srgb, #c0392b 25%, transparent); }
.antes-depois__lado--certo { background: color-mix(in srgb, var(--accent) 7%, transparent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.antes-depois__rotulo {
  font-family: var(--font-display); font-weight: 600; font-size: .74rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--theme-fg-soft); margin-bottom: .5rem;
}
.antes-depois__nota { font-size: .85rem; color: var(--theme-fg-soft); line-height: 1.55; margin-top: .7rem; }

/* ==========================================================================
   LP — landing pages de aquisição (page-lp.php)
   Voz e ritmo próprios. Não reaproveitar estas classes no site institucional.

   .lp-topo e .lp-rodape são CHROME, não seção da página — por isso usam
   --bg/--line/--fg (estáticos) e não --theme-bg/--theme-line/--theme-fg
   (reativos ao scroll via [data-theme-section], ver main.js). Mesma regra
   que o .dock já segue: chrome não muda de cor com o scroll. Um
   `color: inherit` aqui puxaria a cor de texto do tema ATIVO no momento
   (ex.: branco, quando uma seção dark como o hero está em foco) sobre um
   fundo sempre claro — ficaria ilegível.
   ========================================================================== */

.lp-topo { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--line); color: var(--fg); }
.lp-topo__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; }
.lp-topo__marca { font-weight: 700; text-decoration: none; color: inherit; }

.lp-hero { padding-block: clamp(48px, 10vw, 112px); }
.lp-hero__titulo { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.1; margin: 0 0 20px; }
.lp-hero__sub { font-size: clamp(1rem, 2vw, 1.25rem); max-width: 56ch; margin: 0 0 32px; color: var(--theme-fg-soft); }

.lp-rodape { padding-block: 40px; border-top: 1px solid var(--line); background: var(--bg); color: var(--fg); }
.lp-rodape__inner { display: flex; flex-direction: column; gap: 8px; }
.lp-rodape__marca { font-weight: 700; }
.lp-rodape__nota { font-size: .8rem; opacity: .7; max-width: 60ch; }

.lp-badges__grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); list-style: none; padding: 0; margin: 0; }
.lp-badge__titulo { font-size: 1.05rem; margin: 0 0 6px; }
.lp-badge__texto { font-size: .92rem; opacity: .85; margin: 0; }

.lp-prosa__p { max-width: 62ch; }

.lp-personas__grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.lp-persona { padding: 24px; border: 1px solid var(--line); border-radius: 14px; }
.lp-persona__titulo { font-size: 1.15rem; margin: 0 0 10px; }

.lp-comparativo__rolagem { overflow-x: auto; }
.lp-comparativo__tabela { width: 100%; border-collapse: collapse; min-width: 480px; }
.lp-comparativo__tabela th, .lp-comparativo__tabela td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.lp-comparativo__tabela .lp-comparativo__melhor { font-weight: 600; }

.lp-passos__lista { list-style: none; padding: 0; display: grid; gap: 28px; }
.lp-passo__num { display: block; font-variant-numeric: tabular-nums; opacity: .5; font-size: .85rem; }
.lp-passo__titulo { margin: 4px 0 6px; font-size: 1.1rem; }
.lp-passo__texto { margin: 0; max-width: 60ch; }

.lp-prova .trabalhos__grid { margin-top: 28px; }
.trabalho--ancora { outline: 2px solid var(--accent); outline-offset: 4px; }
.trabalho__nota { font-size: .82rem; opacity: .8; margin: 4px 0 0; }

.lp-depoimentos__grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.lp-depoimento { margin: 0; padding: 22px; border: 1px solid var(--line); border-radius: 14px; }
.lp-depoimento__texto { margin: 0 0 14px; font-style: normal; }
.lp-depoimento__autor { font-size: .88rem; display: grid; gap: 2px; }

.lp-form { display: grid; gap: 16px; max-width: 520px; margin-top: 24px; }
.lp-form__campo { display: grid; gap: 6px; margin: 0; }
.lp-form__campo label { font-size: .88rem; }
.lp-form__campo input, .lp-form__campo select, .lp-form__campo textarea {
	width: 100%; padding: 11px 13px; border-radius: 10px;
	border: 1px solid var(--line); background: transparent; color: inherit; font: inherit;
}
.lp-form__armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lp-contato__erro { padding: 12px 14px; border-radius: 10px; border: 1px solid currentColor; }
.lp-contato__ou { margin-top: 26px; opacity: .8; }

.lp-fechamento { text-align: center; }
.lp-fechamento__texto { color: var(--theme-fg-soft); font-size: var(--step-1); max-width: 44ch; margin: 1em auto 0; }
.lp-fechamento__cta { margin-top: var(--space-4); }

/* ============================================================
   ANALISAR MINHA PRESENÇA — página e formulário em passos
   O CTA geral do site. O motor mora no plugin; aqui é só a aparência.
   ============================================================ */

/* --- Dobra 01: retrato em camadas ---------------------------------------
   O texto atravessa o corpo e o rosto passa na frente. Quem recorta a foto
   é o `mix-blend-mode: lighten`: onde o estúdio é preto, vence o texto
   branco; onde tem pele, cabelo ou mão, vence a foto. Por isso a dobra
   PRECISA de fundo escuro chapado e de `isolation` — sem isolar, o blend
   procura o que pintar lá fora e clareia o resto da página.

   Camadas, de trás pra frente: linha de trás (1) → retrato (2) → véu da
   base (3) → linha da frente (4) → eyebrow e sub (5). */
.analise-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bg-dark);
  color: var(--fg-on-dark);
  display: grid;
  /* ancorado no PÉ, não no centro: assim o rosto fica limpo na metade de cima
     e quem cruza o título são as mãos, que é onde o recorte fica bonito. O
     eyebrow e a sub caem sobre a camiseta preta, e aí leem. */
  align-items: end;
  min-height: min(94vh, 860px);
  padding: calc(var(--space-6) + 3.5rem) 0 calc(var(--space-6) + 2rem);
  text-align: center;
}

/* estático de propósito: o retrato se posiciona pela SEÇÃO, não pelo wrap */
.analise-hero__wrap { position: static; }

/* o eyebrow saiu da dobra: em qualquer altura ele caia sobre o rosto e não lia */
.analise-hero__sub { position: relative; z-index: 5; text-shadow: 0 2px 22px rgba(0, 0, 0, 0.85); }

.analise-hero__titulo {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 0.9rem + 8.4vw, 7rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.analise-hero__linha { display: block; position: relative; }
.analise-hero__linha--tras { z-index: 1; }
.analise-hero__linha--frente { z-index: 4; }

/* A foto não cobre a dobra: ela ocupa uma caixa própria, ancorada no topo,
   e o resto vira preto. Dá pra fazer isso sem costura porque o blend é
   `lighten` sobre preto — a borda da imagem some no fundo da seção, e a
   área que sobra embaixo e nas laterais é respiro de verdade pro texto. */
.analise-hero__retrato {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 218%;
  z-index: 2;
  display: block;
  mix-blend-mode: lighten;
  pointer-events: none;
}
.analise-hero__retrato img {
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 720px) { .analise-hero__retrato { width: min(96%, 880px); } }
@media (min-width: 1200px) { .analise-hero__retrato { width: min(74%, 940px); } }

/* fade pro pé da dobra, pra foto não terminar em corte reto */
.analise-hero__base {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: 46%;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--bg-dark) 82%, transparent) 46%, var(--bg-dark) 86%);
  pointer-events: none;
}

.analise-hero__sub {
  margin: var(--space-4) auto 0;
  max-width: 44ch;
  color: var(--fg-on-dark-soft);
  font-size: var(--step-1);
}

/* Sem foto a dobra continua de pé: só encolhe e centraliza. */
.analise-hero:not(.analise-hero--com-foto) { min-height: min(62vh, 560px); }
.analise-olhadas__intro { margin-top: var(--space-2); max-width: 58ch; color: var(--fg-soft); }
/* quatro leituras, e a grade é 2×2 de propósito: em três colunas o quarto card
   fica sozinho na segunda linha e a dobra parece inacabada */
.analise-olhadas__grade { display: grid; gap: 0.6rem; margin-top: var(--space-5); }
@media (min-width: 640px) { .analise-olhadas__grade { grid-template-columns: repeat(2, 1fr); } }

.analise-olhada {
  position: relative;
  padding: clamp(1rem, 2.2vw, 1.4rem);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--bg-elev) 70%, transparent);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), border-color 0.35s ease;
}
.analise-olhada__fio {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--accent);
  margin-bottom: 0.85rem;
  transition: width 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.analise-olhada:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.analise-olhada:hover .analise-olhada__fio { width: 58px; }
.analise-olhada__titulo { margin: 0; font-size: var(--step-1); }
.analise-olhada__texto { margin: 0.4em 0 0; color: var(--fg-soft); font-size: var(--step--1); }

.analise-como { background: var(--bg-dark); color: var(--fg-on-dark); }

/* --- Dobra 03: linha do tempo presa ao scroll ---------------------------
   Padrão "dobra presa" (webdesigner/padroes-landing-avancada §2 e §3): a
   rolagem alimenta um progresso 0→1, o JS só escreve `--g` por marco e o
   CSS desenha tudo a partir dele. O eixo aqui é TEMPO, não sequência: por
   isso o rótulo temporal ocupa o lugar que seria do número.

   Sem JS, com movimento reduzido ou sem `position: sticky`, a classe
   `is-palco` não entra: a dobra volta a ser uma lista em fluxo normal com
   `--g: 1` em todo mundo. Esse é o estado padrão do CSS, de propósito. */
.analise-como__palco { position: relative; }

.analise-como.is-palco { padding: 0; height: 260vh; }
.analise-como.is-palco .analise-como__palco {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  align-content: center;
  /* o dock flutuante come o pé da tela no celular */
  padding: var(--space-5) 0 calc(var(--space-5) + 3.5rem);
}

.analise-linha {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  position: relative;
  display: grid;
  gap: clamp(1.6rem, 4.5vh, 3rem);
}

/* trilho e fio: o fio sobe até `--p`, que é a média dos `--g` dos marcos */
.analise-linha::before,
.analise-linha::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 0.55em;
  bottom: 0.55em;
  width: 1px;
}
.analise-linha::before { background: rgba(255, 255, 255, 0.14); }
.analise-linha::after {
  bottom: auto;
  height: calc(var(--p, 1) * (100% - 1.1em));
  background: linear-gradient(to bottom, var(--accent), var(--accent-hot));
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent);
}

.analise-linha__item {
  --g: 1;
  position: relative;
  padding-left: clamp(1.6rem, 3.4vw, 2.4rem);
  display: grid;
  gap: 0.25rem;
}

.analise-linha__marca {
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) calc(var(--g) * 100%), rgba(255, 255, 255, 0.22));
  transform: scale(calc(0.62 + var(--g) * 0.48));
  box-shadow: 0 0 0 calc(var(--g) * 6px) color-mix(in srgb, var(--accent) 13%, transparent);
}

.analise-linha__quando {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: calc(var(--g) * 1.7 - 0.15);
}

.analise-linha__texto {
  margin: 0;
  max-width: 46ch;
  font-size: var(--step-1);
  line-height: 1.34;
  color: var(--fg-on-dark);
  opacity: calc((var(--g) - 0.24) * 1.9);
  filter: blur(calc((1 - var(--g)) * 5px));
  transform: translateY(calc((1 - var(--g)) * 13px));
}

@media (prefers-reduced-motion: reduce) {
  .analise-linha__texto { filter: none; transform: none; }
}

/* ---------- o formulário ---------- */
.analise-form__intro { margin-top: var(--space-2); max-width: 56ch; color: var(--fg-soft); }

.analise-form__barra {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin: var(--space-4) 0 var(--space-3);
}
.analise-form__contagem {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-soft);
}
.analise-form__trilho {
  flex: 1 1 140px;
  height: 2px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.analise-form__trilho i { display: block; height: 100%; background: var(--accent); transition: width 0.5s cubic-bezier(0.2, 0.7, 0.3, 1); }
.analise-form__salvo {
  font-size: var(--step--1);
  color: var(--accent-ink);
  font-weight: 600;
}
.analise-form__salvo::before { content: '✓ '; }

.analise-form__erro {
  margin-bottom: var(--space-3);
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  font-size: var(--step--1);
}

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

/* A armadilha sai da tela em vez de usar display:none. Robô que lê o CSS
   ignora o que está escondido; fora da viewport ele preenche. */
.analise-form__armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.campo { display: grid; gap: 0.4rem; }
.campo fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.campo__rotulo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-0);
  color: var(--fg);
}
.campo__opcional {
  margin-left: 0.5em;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--fg-soft);
  text-transform: lowercase;
  letter-spacing: 0;
}
.campo input[type='text'],
.campo input[type='email'],
.campo input[type='tel'],
.campo input[type='url'],
.campo textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-elev);
  color: var(--fg);
  font: inherit;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.campo input:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.campo textarea { resize: vertical; min-height: 5.5rem; }

.campo__escolha {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-elev);
  cursor: pointer;
  transition: border-color 0.25s ease;
}
.campo__escolha:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.campo__escolha input { margin-top: 0.25em; accent-color: var(--accent); }
.campo__escolha:has(input:checked) { border-color: var(--accent); }
.campo--aceite .campo__escolha { font-size: var(--step--1); color: var(--fg-soft); }

.campo__ajuda { margin: 0; font-size: 0.82rem; color: var(--fg-soft); }

.analise-form__envio { margin-top: var(--space-2); color: var(--fg-soft); font-size: var(--step--1); max-width: 56ch; }
.analise-form__acoes { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; margin-top: var(--space-2); }
.analise-form__lgpd { margin-top: var(--space-2); font-size: 0.8rem; color: var(--fg-soft); max-width: 62ch; }

@media (prefers-reduced-motion: reduce) {
  .analise-olhada:hover { transform: none; }
}

/* ============================================================
   OBRIGADO (site) — uma dobra só
   Texto à esquerda, retrato à direita, fundo escuro. A foto é de estúdio
   com fundo preto, então ela não é recortada: uma máscara em gradiente
   apaga as bordas e o retrato nasce do próprio fundo da dobra.
   ============================================================ */
.obrigado-cena {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bg-dark);
  color: var(--fg-on-dark);
  display: grid;
  align-items: center;
  min-height: min(92vh, 900px);
  padding: calc(var(--space-6) + 3rem) 0 calc(var(--space-5) + 3.5rem);
}

/* halo quente atrás do retrato: dá profundidade sem clarear o texto */
.obrigado-cena__brilho {
  position: absolute;
  top: 50%;
  right: -6%;
  width: min(78vw, 900px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--accent) 17%, transparent),
    transparent 62%
  );
  filter: blur(38px);
  pointer-events: none;
}

/*
 * Sem `z-index` de propósito. Um valor aqui cria contexto de empilhamento, e
 * aí o `lighten` da foto passa a misturar com o nada dentro do wrap em vez do
 * fundo da dobra — o retrato volta a virar retângulo. A ordem do DOM já
 * garante que o wrap fique na frente do brilho.
 */
.obrigado-cena__wrap {
  position: relative;
  display: grid;
  gap: var(--space-4);
  align-items: center;
}

@media (min-width: 900px) {
  .obrigado-cena--com-foto .obrigado-cena__wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: clamp(2rem, 5vw, 4.5rem);
  }
}

.obrigado-cena__titulo {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 1.4rem + 7vw, 6.4rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
}

.obrigado-cena__sub {
  margin: var(--space-3) 0 0;
  max-width: 34ch;
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--fg-on-dark-soft);
}

.obrigado-cena__cta { margin-top: var(--space-4); }

.obrigado-cena__foto { position: relative; }

/*
 * Mesmo recorte do hero da análise: `lighten` sobre fundo escuro. O estudio
 * da foto é mais escuro que a dobra, então sem isso ela aparecia como um
 * retângulo preto colado na cena — máscara em gradiente sozinha não resolvia,
 * porque o problema não era a borda, era a diferença de preto.
 *
 * A máscara continua, mas só pra apagar o chão do estúdio na base, que é
 * claro o bastante pra sobreviver ao blend e vira uma faixa cinza reta.
 */
.obrigado-cena__foto img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: lighten;
  -webkit-mask-image: linear-gradient(to bottom, #000 66%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 66%, transparent 96%);
}

/* No celular o retrato entra abaixo do texto e menor: a foto é vertical e
   em pé inteira empurraria o botão pra fora da primeira tela. */
@media (max-width: 899px) {
  .obrigado-cena { min-height: 0; text-align: center; }
  .obrigado-cena__sub { margin-left: auto; margin-right: auto; }
  .obrigado-cena__foto { max-width: 380px; margin: 0 auto; }
  .obrigado-cena__brilho { right: auto; left: 50%; top: 62%; transform: translate(-50%, -50%); }
}

/* ============================================================
   TEXTO LEGAL — política de privacidade e afins
   Coluna única, medida de leitura curta. Nada de card nem caixa: é texto
   pra ser lido, e enfeite aqui só atrapalha quem veio conferir uma coisa.
   ============================================================ */
/* a medida de leitura quem dá é o wrap--estreito; um max-width aqui
   empurrava o texto pra esquerda e deixava um vão à direita */
.texto-legal p,
.texto-legal ul { color: var(--fg-soft); line-height: 1.65; }
.texto-legal p { margin: 0 0 1.1em; }
.texto-legal h2 {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--step-1);
}
.texto-legal h2:first-of-type { margin-top: var(--space-4); }
.texto-legal ul { margin: 0 0 1.1em; padding-left: 1.1rem; display: grid; gap: 0.7rem; }
.texto-legal strong { color: var(--fg); }
.texto-legal code {
  padding: 0.1em 0.4em;
  border-radius: 5px;
  background: color-mix(in srgb, var(--fg) 7%, transparent);
  font-size: 0.92em;
}
.privacidade__data {
  font-size: var(--step--1);
  color: var(--fg-soft);
  opacity: 0.8;
}

/* ============================================================
   PÁGINA DE SERVIÇO — formato de 24/08/2026
   A página é porta de entrada de busca: alterna claro e escuro pra dar
   ritmo numa página longa, e o texto corrido tem medida de leitura curta
   porque metade dela é para ser LIDA, não escaneada.
   ============================================================ */

.servico-cena__texto p,
.servico-fundo__bloco p {
  margin: 0 0 1.05em;
  color: var(--theme-fg-soft, var(--fg-soft));
  font-size: var(--step-0);
  line-height: 1.62;
}
.servico-cena__texto { margin-top: var(--space-3); }
.servico-cena__texto p:last-child,
.servico-fundo__bloco p:last-child { margin-bottom: 0; }

/* a dobra escura do custo: frases curtas, uma por linha, com fio de acento */
.servico-jogo { background: var(--bg-dark); color: var(--fg-on-dark); }
.servico-jogo__lista {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.servico-jogo__lista li {
  position: relative;
  padding-left: 1.6rem;
  font-size: var(--step-1);
  line-height: 1.4;
  color: var(--fg-on-dark);
}
.servico-jogo__lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 12px;
  height: 1px;
  background: var(--accent);
}

/* escopo: grade de itens, mesmo cartão dos fundamentos da home */
.servico-entrego__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.6rem;
  margin-top: var(--space-5);
}
.servico-item {
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--bg-elev) 70%, transparent);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), border-color 0.35s ease;
}
.servico-item:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.servico-item__fio {
  display: block;
  width: 26px;
  height: 2px;
  margin-bottom: 0.9rem;
  background: var(--accent);
  transition: width 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.servico-item:hover .servico-item__fio { width: 58px; }
.servico-item__titulo { margin: 0; font-size: var(--step-0); }
.servico-item__texto { margin: 0.4em 0 0; color: var(--fg-soft); font-size: var(--step--1); }

/* processo: o PRAZO é a informação, então ele vem antes do título da etapa */
.servico-processo { background: var(--bg-dark); color: var(--fg-on-dark); }
.servico-etapas {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  position: relative;
}
.servico-etapa { position: relative; padding-left: clamp(1.6rem, 3.5vw, 2.6rem); }
.servico-etapa::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.6em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}
.servico-etapa::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 1.6em;
  bottom: calc(var(--space-4) * -1);
  width: 1px;
  background: rgba(255, 255, 255, 0.14);
}
.servico-etapa:last-child::after { display: none; }
.servico-etapa__quando {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.servico-etapa__titulo { margin: 0.25rem 0 0; font-size: var(--step-1); }
.servico-etapa__texto {
  margin: 0.4em 0 0;
  max-width: 56ch;
  color: var(--fg-on-dark-soft);
  line-height: 1.55;
}
.servico-processo__nota {
  margin-top: var(--space-4);
  font-size: var(--step--1);
  color: var(--fg-on-dark-soft);
  opacity: 0.85;
}

/* recusa: a dobra que nenhuma concorrente tem. Fica sóbria de propósito */
.servico-recusa__lista {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}
.servico-recusa__lista li {
  padding-left: 1.5rem;
  position: relative;
  color: var(--fg-soft);
  line-height: 1.55;
  max-width: 62ch;
}
.servico-recusa__lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 10px;
  height: 10px;
  border: 1px solid color-mix(in srgb, var(--fg) 32%, transparent);
  border-radius: 50%;
}

.servico-prova__mais { margin-top: var(--space-4); }

/* a ponte pras Soluções: numerada porque AQUI a ordem é informação (é uma
   escada de três degraus, não uma lista de opções) */
.servico-solucoes__chamada { margin-top: var(--space-2); max-width: 56ch; color: var(--fg-soft); }
.servico-solucoes__lista {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.servico-solucao {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
}
.servico-solucao:last-child { border-bottom: 1px solid var(--line); }
.servico-solucao__num {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--accent);
  padding-top: 0.25em;
}
.servico-solucao__titulo { margin: 0; font-size: var(--step-1); }
.servico-solucao__texto { margin: 0.3em 0 0; color: var(--fg-soft); font-size: var(--step--1); }

/* aprofundamento: é o peso de SEO. Texto corrido, medida curta, nada de card */
.servico-fundo__bloco + .servico-fundo__bloco { margin-top: var(--space-5); }
.servico-fundo__titulo {
  margin: 0 0 var(--space-2);
  font-size: var(--step-1);
}

/* ============================================================
   SOLUÇÕES — a escada e as páginas de degrau
   Escada, e não tabela de pacotes: os três não são intercambiáveis, são
   momentos diferentes do mesmo caminho. Por isso nada aqui é card lado a
   lado — é lista vertical, na ordem, com o número visível.
   ============================================================ */

/* --- a escada, na página-mãe --- */
.escada__intro { margin-top: var(--space-2); max-width: 62ch; color: var(--fg-soft); }
.escada__lista { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: 0.6rem; }

.degrau {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(0.9rem, 2.4vw, 1.8rem);
  align-items: center;
  padding: clamp(1.1rem, 2.6vw, 1.8rem);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--bg-elev) 70%, transparent);
  text-decoration: none;
  color: inherit;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), border-color 0.35s ease;
}
.degrau:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.degrau__num {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  color: color-mix(in srgb, var(--accent) 85%, transparent);
  line-height: 1;
}
.degrau__titulo { margin: 0; font-size: var(--step-1); }
.degrau__resumo { margin: 0.3em 0 0; color: var(--fg-soft); font-size: var(--step--1); }

/* preço e prazo lado a lado: são as duas coisas que a pessoa procura antes
   de clicar, e esconder as duas é o erro mais comum das concorrentes */
.degrau__marcas { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-top: 0.7rem; }
.degrau__marcas em {
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-soft);
}
.degrau__preco { color: var(--accent) !important; font-weight: 700; }
.degrau__seta { color: var(--accent); opacity: 0; transform: translateX(-6px); transition: opacity 0.3s ease, transform 0.3s ease; }
.degrau__seta svg { width: 1.3em; height: 1.3em; }
.degrau:hover .degrau__seta,
.degrau:focus-visible .degrau__seta { opacity: 1; transform: none; }

/* --- "qual é o seu": um sinal por degrau, e o destino ao lado --- */
.escada-qual { background: var(--bg-dark); color: var(--fg-on-dark); }
.escada-qual__linhas { margin-top: var(--space-4); display: grid; gap: 0; }
.escada-qual__linha {
  display: grid;
  gap: 0.5rem 1.5rem;
  padding: var(--space-3) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.escada-qual__linha:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
@media (min-width: 760px) {
  .escada-qual__linha { grid-template-columns: 1fr auto; align-items: center; }
}
.escada-qual__sinal { margin: 0; max-width: 54ch; font-size: var(--step-0); line-height: 1.5; }
.escada-qual__destino {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent);
  font-size: var(--step--1);
  font-weight: 600;
  white-space: nowrap;
}
.escada-qual__destino svg { width: 1.1em; height: 1.1em; }
.escada-qual__nota {
  margin-top: var(--space-4);
  max-width: 62ch;
  color: var(--fg-on-dark-soft);
  font-size: var(--step--1);
}

/* --- página de um degrau --- */
.solucao-sinais__lista,
.solucao-fora__lista {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.solucao-sinais__lista li {
  position: relative;
  padding-left: 1.8rem;
  font-size: var(--step-0);
  line-height: 1.5;
  max-width: 64ch;
}
/* marca de reconhecimento, não de checklist: quem lê está se identificando */
.solucao-sinais__lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}

.solucao-muda { background: var(--bg-dark); color: var(--fg-on-dark); }
.solucao-muda__texto { margin-top: var(--space-3); }
.solucao-muda__texto p {
  margin: 0 0 1.05em;
  max-width: 62ch;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--fg-on-dark);
}
.solucao-muda__texto p:last-child { margin-bottom: 0; color: var(--fg-on-dark-soft); }

.solucao-grupos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.6rem;
  margin-top: var(--space-5);
}
.solucao-grupo {
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--bg-elev) 70%, transparent);
}
.solucao-grupo__titulo {
  margin: 0 0 0.9rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--step-0);
}
.solucao-grupo__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.solucao-grupo__lista li {
  position: relative;
  padding-left: 1.1rem;
  color: var(--fg-soft);
  font-size: var(--step--1);
  line-height: 1.5;
}
.solucao-grupo__lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 1px;
  background: var(--accent);
}

/* o que fica de fora: sóbrio, sem vermelho e sem alarme. É escopo, não aviso */
.solucao-fora__lista li {
  padding-left: 1.5rem;
  position: relative;
  color: var(--fg-soft);
  line-height: 1.55;
  max-width: 62ch;
}
.solucao-fora__lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 11px;
  height: 1px;
  background: color-mix(in srgb, var(--fg) 35%, transparent);
}

.solucao-entrada { background: var(--bg-dark); color: var(--fg-on-dark); }
.solucao-entrada__chamada { margin-top: var(--space-2); max-width: 60ch; color: var(--fg-on-dark-soft); }
.solucao-casos { margin-top: var(--space-4); display: grid; gap: 0; }
.solucao-caso { padding: var(--space-3) 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.solucao-caso:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.solucao-caso__titulo { margin: 0; font-size: var(--step-0); }
.solucao-caso__texto { margin: 0.35em 0 0; max-width: 62ch; color: var(--fg-on-dark-soft); font-size: var(--step--1); }

/* preço do degrau padronizado: número grande e sozinho, porque ele é a
   informação. Nos outros dois este bloco nem existe */
.solucao-preco__cartao {
  padding: var(--space-5) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  text-align: center;
}
.solucao-preco__valor {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 1.6rem + 5vw, 5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
}
.solucao-preco__nota { margin: var(--space-2) 0 0; color: var(--fg-soft); font-size: var(--step--1); }

.solucao-variaveis__chamada { margin-top: var(--space-2); max-width: 60ch; color: var(--fg-soft); }

/* a ponte pro degrau seguinte */
.solucao-depois__cartao {
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--bg-elev) 70%, transparent);
}
.solucao-depois__texto { margin: var(--space-2) 0 var(--space-3); max-width: 62ch; color: var(--fg-soft); }
.solucao-depois__link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.solucao-depois__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  color: var(--accent);
}
.solucao-depois__link strong { display: block; font-family: var(--font-display); font-size: var(--step-0); }
.solucao-depois__link em { display: block; margin-top: 0.15em; font-style: normal; font-size: var(--step--1); color: var(--fg-soft); }
.solucao-depois__link svg { width: 1.2em; height: 1.2em; color: var(--accent); transition: transform 0.3s ease; }
.solucao-depois__link:hover svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .degrau:hover { transform: none; }
  .solucao-depois__link:hover svg { transform: none; }
}