/* =========================================================
   SEÇÕES
   ---------------------------------------------------------
   Layout de cada parte da página, na ordem em que aparecem.
   Pensado primeiro para o celular; os @media (min-width)
   ajustam para telas maiores.
   ========================================================= */

/* =========================================================
   2. HERO
   ========================================================= */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(2rem, 1rem + 4vw, 4.5rem));
  padding-bottom: var(--space-7);
  overflow: hidden;
  isolation: isolate;
}

/* Palco de luz atrás do dossiê: fundo profundo + brilho verde-água fraco */
.hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: min(1100px, 140vw);
  aspect-ratio: 1;
  right: -25%;
  top: -10%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(var(--teal-rgb), calc(0.26 * var(--glow-k))) 0%, rgba(var(--teal-rgb), calc(0.07 * var(--glow-k))) 35%, transparent 62%),
    radial-gradient(circle at 50% 50%, var(--navy) 0%, transparent 70%);
  pointer-events: none;
}

.hero__inner {
  display: grid;
  gap: clamp(3rem, 2rem + 4vw, 4rem);
  align-items: center;
}

.hero__copy {
  display: grid;
  gap: var(--space-5);
  align-content: center;
}

.hero__title {
  font-size: clamp(2.5rem, 1.4rem + 3.1vw, 4rem);
  text-wrap: wrap;             /* deixa as linhas cheias: 3 linhas no desktop */
}

/* Rótulo técnico acima do título (também usado em outras seções: .eyebrow) */
.hero__eyebrow,
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  justify-self: start;
  padding: 0.45rem 0.85rem 0.45rem 0.7rem;
  border: 1px solid var(--hairline-strong);
  border-radius: 6px;
  background: rgba(var(--surface-rgb), 0.5);
}

.hero__eyebrow .mono,
.eyebrow .mono {
  color: var(--text-muted);
  letter-spacing: 0.12em;
}

/* Pontinho verde-água com um "radar" que pulsa devagar */
.hero__eyebrow-dot,
.eyebrow__dot {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-line);
}

.motion-ok .hero__eyebrow-dot::after,
.motion-ok .eyebrow__dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--accent-line);
  animation: radar 2.6s var(--ease-out) infinite;
}

@keyframes radar {
  0% { transform: scale(0.4); opacity: 0.9; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ---------- Pílula do topo ("Investigação digital") com a lupa ----------
   Borda fina, fundo levemente translúcido (vidro) e uma lupa pequena.
   A lupa "procura" (um círculo pequeno e uma leve inclinação) e a lente
   brilha de leve: animado em js/destaques.js, parte 1. */
.hero__pill {
  gap: 0.6rem;
  padding: 0.3rem 0.95rem 0.3rem 0.3rem;
  border: 1px solid rgba(var(--cyan-rgb), 0.22);
  border-radius: var(--radius-pill);
  background:
    linear-gradient(180deg, rgba(var(--ink-rgb), 0.05), rgba(var(--ink-rgb), 0.01)),
    rgba(var(--surface-rgb), 0.38);
  box-shadow: var(--highlight), 0 10px 30px -18px rgba(var(--teal-rgb), calc(0.6 * var(--glow-k)));
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
}

.hero__pill .mono {
  color: var(--text-body);
  letter-spacing: 0.14em;
}

/* Círculo onde a lupa fica */
.lupa {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: rgba(var(--teal-rgb), 0.16);
  box-shadow: inset 0 0 0 1px rgba(var(--cyan-rgb), 0.22);
  color: var(--accent-line);
  flex: none;
}

.lupa__svg {
  width: 0.95rem;
  height: 0.95rem;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-origin: 44% 44%;     /* gira em volta da lente */
}

.lupa__vidro {                    /* o "vidro": um tom ciano bem leve dentro do aro */
  fill: rgba(var(--cyan-rgb), 0.14);
  stroke: none;
}

.lupa__brilho {                   /* reflexo na lente */
  stroke: var(--accent);
  stroke-width: 1.5;
  opacity: 0.55;
}

[data-theme='light'] .lupa__brilho { stroke: #FFFFFF; opacity: 0.9; }

/* "rastro." com um traço de caneta marca-texto embaixo, que se desenha */
.ink--mark {
  position: relative;
  display: inline-block;
}

.mark {
  position: absolute;
  left: 0;
  bottom: -0.1em;
  width: 100%;
  height: 0.28em;
  overflow: visible;
  pointer-events: none;
}

.mark path {
  fill: none;
  stroke: var(--accent-line);
  stroke-width: 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.85;
}

.motion-ok .mark path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: tracar 900ms var(--ease-out) 1.25s forwards;
}

@keyframes tracar {
  to { stroke-dashoffset: 0; }
}

/* A segunda frase do título sempre começa numa linha nova */
.hero__title-line {
  display: block;
  color: var(--text-muted);
}

/* Palavras do título (o JS separa cada palavra para animar) */
.word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.08em;      /* espaço para letras como g, p, ç */
  margin-bottom: -0.08em;
}

.word__inner {
  display: inline-block;
}

.hero__lead {
  font-size: var(--fs-md);
  color: var(--text-body);
  max-width: 34rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

@media (max-width: 479px) {
  .hero__actions .btn {
    flex: 1 1 100%;
    justify-content: space-between;
  }
}

/* Atalhos "O que aconteceu com você?" */
.quick {
  margin-top: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--hairline);
}

.quick__label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-3);
}

.quick__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.hero .seals {
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-pill);
  background: rgba(var(--ink-rgb), 0.03);
  border: 1px solid var(--hairline);
  justify-content: center;
}

@media (max-width: 639px) {
  .hero .seals {
    border-radius: 22px;
    justify-content: flex-start;
    flex-direction: column;
  }
}

@media (min-width: 1024px) {
  .hero {
    min-height: min(100dvh, 62rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--space-6);
  }

  .hero::before {
    right: -18%;
    top: -18%;
  }
}

/* ---------- Dossiê (ilustração do hero) ---------- */
.dossier {
  position: relative;
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
  aspect-ratio: 1 / 1.08;
  perspective: 1200px;
}

.dossier__card {
  position: absolute;
  will-change: transform;
}

/* As duas folhas de trás ficam inclinadas, como papéis sobre a mesa */
.dossier__card--chat {
  top: 2%;
  left: 0;
  width: 58%;
  rotate: -7deg;
}

.dossier__card--pix {
  top: 8%;
  right: 0;
  width: 50%;
  rotate: 6deg;
}

.dossier__card--main {
  left: 8%;
  right: 4%;
  bottom: 0;
}

.paper {
  padding: var(--space-4);
  border-radius: 20px;
  background: var(--paper-bg);
  border: 1px solid var(--hairline-strong);
  box-shadow: var(--highlight), var(--shadow-soft);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.paper__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

.paper__head .icon {
  color: var(--accent-2);
}

.bubble {
  width: fit-content;
  max-width: 92%;
  margin-top: 0.4rem;
  padding: 0.45rem 0.7rem;
  border-radius: 14px 14px 14px 4px;
  background: rgba(var(--ink-rgb), 0.07);
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--text-body);
}

.bubble--out {
  margin-left: auto;
  border-radius: 14px 14px 4px 14px;
  background: var(--accent);
  color: var(--on-accent);
}

.receipt {
  display: grid;
  gap: 0.45rem;
  font-size: 0.75rem;
}

.receipt div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: 0.45rem;
  border-bottom: 1px dashed var(--hairline-strong);
}

.receipt div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.receipt dt { color: var(--text-faint); }
.receipt dd { margin: 0; color: var(--text); font-variant-numeric: tabular-nums; }

/* Card principal: "Análise do caso" */
.dossier__card--main .bezel {
  background: rgba(var(--ink-rgb), 0.05);
  border-color: var(--hairline-strong);
  box-shadow: var(--shadow-float);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.analysis {
  position: relative;
  overflow: hidden;
  padding: var(--space-5);
  background: var(--analysis-bg);
}

.analysis__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.analysis__title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  font-stretch: 106%;
  color: var(--text);
}

.analysis__title .icon {
  color: var(--accent-2);
}

.analysis__rows {
  display: grid;
  gap: 0.375rem;
}

.row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: 0.6rem 0.75rem;
  border-radius: 14px;
  background: rgba(var(--ink-rgb), 0.03);
  border: 1px solid transparent;
  transition: background-color var(--dur-base) ease, border-color var(--dur-base) ease;
}

.row__icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--accent-ink);
}

.row__icon .icon {
  width: 1rem;
  height: 1rem;
}

.row__name {
  font-size: var(--fs-sm);
  color: var(--text-body);
}

/* Estado de cada linha (o JS troca a classe: is-active / is-done) */
.row__state {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-faint);
  white-space: nowrap;
}

.row__state::before {
  content: 'Na fila';
}

.row.is-active {
  background: rgba(var(--teal-rgb), 0.16);
  border-color: rgba(var(--cyan-rgb), 0.224);
}

.row.is-active .row__state { color: var(--accent-ink); }
.row.is-active .row__state::before { content: 'Analisando…'; }

.row.is-done .row__state { color: var(--text); }
.row.is-done .row__state::before { content: 'Vínculo encontrado'; }
.row.is-done:first-child .row__state::before { content: 'Verificado'; }

.analysis__progress {
  height: 4px;
  margin-top: var(--space-4);
  border-radius: 4px;
  background: rgba(var(--ink-rgb), 0.07);
  overflow: hidden;
}

.analysis__progress span {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-line), var(--accent-ink));
  transform: scaleX(var(--progress, 1));
  transform-origin: left;
  transition: transform 900ms var(--ease-fluid);
}

.analysis__report {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: 0.75rem;
  border-radius: 16px;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.analysis__report > [data-icon] {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}

.analysis__report strong {
  display: block;
  color: var(--on-accent);
  font-size: var(--fs-sm);
}

.analysis__report-sub {
  display: block;
  font-size: 0.75rem;
  color: rgba(11, 12, 16, 0.72);
}

/* Antes da análise terminar, o relatório aparece "apagado" (em espera) */
.motion-ok .analysis__report:not(.is-ready) {
  background: rgba(var(--ink-rgb), 0.04);
  color: var(--text-faint);
  box-shadow: none;
}

.motion-ok .analysis__report:not(.is-ready) strong,
.motion-ok .analysis__report:not(.is-ready) .analysis__report-sub {
  color: var(--text-faint);
}

.analysis__report {
  transition: background-color 600ms var(--ease-fluid), color 600ms ease, box-shadow 600ms ease;
}

/* Linha de "leitura" que passa pelo card */
.scanline {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 30%;
  background: linear-gradient(180deg, transparent, rgba(var(--cyan-rgb), 0.072) 70%, rgba(var(--cyan-rgb), 0.28) 100%);
  border-bottom: 1px solid rgba(var(--cyan-rgb), 0.4);
  pointer-events: none;
  opacity: 0;
}

.motion-ok .scanline {
  animation: varredura 4.2s var(--ease-in-out) infinite;
}

@keyframes varredura {
  0% { transform: translateY(-110%); opacity: 0; }
  12% { opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translateY(340%); opacity: 0; }
}

/* As folhas de trás "flutuam" devagar, cada uma no seu ritmo */
.motion-ok .dossier__card--chat .paper {
  animation: flutuar 7s var(--ease-in-out) infinite alternate;
}

.motion-ok .dossier__card--pix .paper {
  animation: flutuar 8.5s var(--ease-in-out) -2s infinite alternate;
}

@keyframes flutuar {
  from { transform: translateY(-6px); }
  to { transform: translateY(8px); }
}

/* Celular: só o card principal */
@media (max-width: 639px) {
  /* no celular fica só o card principal, em tamanho normal */
  .dossier {
    aspect-ratio: auto;
  }

  .dossier__card--chat,
  .dossier__card--pix { display: none; }

  .dossier__card--main { position: relative; left: 0; right: 0; }
  .analysis { padding: var(--space-4); }
}

/* ---------- "Atuamos em": um serviço por vez ----------
   Substitui a antiga faixa que rolava na horizontal.
   O nome e o ícone trocam com desfoque + leve deslocamento, o ícone
   se desenha a cada troca e a linha fina mostra o tempo até o
   próximo (js/destaques.js, parte 3). */
.atuamos {
  position: relative;
  padding-block: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  background:
    linear-gradient(90deg, rgba(var(--teal-rgb), calc(0.10 * var(--glow-k))), transparent 45%),
    var(--navy);
  border-block: 1px solid rgba(var(--cyan-rgb), 0.128);
  overflow: hidden;
}

.atuamos__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: center;
}

.atuamos__rotulo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.atuamos__rotulo .mono { color: var(--accent-ink); letter-spacing: 0.16em; }

.atuamos__traco {               /* tracinho ciano antes de "Atuamos em" */
  width: 1.5rem;
  height: 1px;
  background: var(--accent-line);
  opacity: 0.8;
}

.atuamos__palco {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 3.75rem;          /* reserva espaço: nomes longos não fazem a página "pular" */
  min-width: 0;
}

.atuamos__icone {
  display: grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 14px;
  color: var(--accent-line);
  background: rgba(var(--teal-rgb), 0.12);
  box-shadow: inset 0 0 0 1px rgba(var(--cyan-rgb), 0.2), var(--highlight);
}

.atuamos__icone .icon { width: 1.5rem; height: 1.5rem; stroke-width: 1.4; }

.atuamos__textos {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.atuamos__categoria { color: var(--text-faint); letter-spacing: 0.1em; }

.atuamos__nome {
  color: var(--text);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  font-weight: 600;
  font-stretch: 108%;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.atuamos__textos,
.atuamos__icone { will-change: transform, opacity, filter; }

.atuamos__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.atuamos__contador {
  color: var(--text-muted);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* Linha fina de progresso até o próximo serviço */
.atuamos__barra {
  position: relative;
  flex: 1;
  min-width: 3rem;
  height: 2px;
  border-radius: 2px;
  background: rgba(var(--line-rgb), 0.14);
  overflow: hidden;
}

.atuamos__barra span {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--accent-2), var(--accent-line));
  transform-origin: left center;
  transform: scaleX(0);
}

/* Com "reduzir movimento": a linha de progresso some (a troca é só esmaecida) */
.atuamos.is-calmo .atuamos__barra { visibility: hidden; }

/* Botão de pausa (para quem prefere ler com calma) */
.atuamos__pausa {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  color: var(--text-muted);
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.atuamos__pausa-icone--pausa { display: flex; gap: 3px; }
.atuamos__pausa-icone--pausa i { width: 2px; height: 9px; border-radius: 1px; background: currentColor; }
.atuamos__pausa-icone--play {
  display: none;
  width: 0;
  height: 0;
  margin-left: 2px;
  border-left: 7px solid currentColor;
  border-block: 4.5px solid transparent;
}
.atuamos__pausa[aria-pressed='true'] .atuamos__pausa-icone--pausa { display: none; }
.atuamos__pausa[aria-pressed='true'] .atuamos__pausa-icone--play { display: block; }

.atuamos__todos {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
}

.atuamos__todos .icon { width: 1em; height: 1em; transition: transform var(--dur-fast) var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .atuamos__pausa:hover { color: var(--text); border-color: var(--hairline-accent); }
  .atuamos__todos:hover .icon { transform: translateX(3px); }
}

/* Celular: mais altura para nomes que quebram em duas linhas */
@media (max-width: 767.98px) {
  .atuamos__palco { min-height: 4.5rem; }
  .atuamos__icone { width: 2.6rem; height: 2.6rem; border-radius: 12px; }
}

/* Tablet e computador: tudo numa linha só */
@media (min-width: 768px) {
  .atuamos__inner {
    grid-template-columns: auto minmax(0, 1fr) minmax(13rem, 19rem);
    gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  }

  .atuamos__rotulo {
    align-self: stretch;
    padding-right: clamp(1.5rem, 1rem + 2vw, 3rem);
    border-right: 1px solid var(--hairline-strong);
  }
}

/* =========================================================
   3. O PROBLEMA (grade bento)
   ========================================================= */
.bento {
  display: grid;
  gap: var(--space-4);
}

.tile {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.tile h3 {
  max-width: 22ch;
}

.tile p {
  color: var(--text-muted);
}

.tile__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--navy);
  border: 1px solid rgba(var(--cyan-rgb), 0.176);
  color: var(--accent-ink);
  font-size: 1.35rem;
}

/* Card grande navy, com brilho azul no canto */
.tile--navy {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--navy);
  --text-muted: var(--on-navy-muted);
  --redact-bar: var(--redact-bar-navy);
}

.tile--navy::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 520px;
  height: 520px;
  right: -180px;
  bottom: -240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--teal-rgb), calc(0.85 * var(--glow-k))), transparent 65%);
}

.tile--navy h2 {
  max-width: 16ch;
}

.tile__lead {
  font-size: var(--fs-md);
  max-width: 38rem;
}

/* Fichas dos vestígios: números, contas, horários, padrões */
.traces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.traces li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.5rem 0.9rem 0.5rem 0.6rem;
  border-radius: var(--radius-pill);
  background: rgba(var(--ink-rgb), 0.06);
  border: 1px solid rgba(var(--cyan-rgb), 0.176);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.traces .icon {
  color: var(--accent-2);
}

@media (min-width: 900px) {
  .bento {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .bento__cell--lead {
    grid-column: span 7;
    grid-row: span 2;
  }

  .bento__cell:not(.bento__cell--lead):not(.bento__cell--wide) {
    grid-column: span 5;
  }

  .bento__cell--wide {
    grid-column: 1 / -1;
  }

  /* O texto fica no topo e os vestígios descem para a base do bloco */
  .tile--navy {
    grid-template-rows: auto auto 1fr;
  }

  .tile--navy .traces {
    align-self: end;
  }
}

/* Você → Vestígio → Polícia e Justiça */
.relay__title {
  font-size: var(--fs-lg);
  max-width: 30ch;
}

.relay__lanes {
  position: relative;
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-3);
}

/* Linha pontilhada que liga as três etapas (anda sozinha) */
.relay__lanes::before {
  content: '';
  position: absolute;
  left: 1.5rem;
  top: 1.5rem;
  bottom: 1.5rem;
  width: 2px;
  background-image: linear-gradient(180deg, var(--accent-ink) 50%, transparent 50%);
  background-size: 2px 10px;
  opacity: 0.45;
}

.motion-ok .relay__lanes::before {
  animation: fluxo-v 1.2s linear infinite;
}

@keyframes fluxo-v {
  to { background-position: 0 10px; }
}

@keyframes fluxo-h {
  to { background-position: 10px 0; }
}

.relay__lane {
  position: relative;
  display: grid;
  align-content: start;        /* não estica as linhas: rótulos alinhados */
  grid-template-columns: 3rem 1fr;
  column-gap: var(--space-4);
  row-gap: var(--space-2);
  align-items: start;
}

.relay__node {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  color: var(--text);
  position: relative;
  z-index: 1;
}

.relay__node img {
  width: 1.75rem;
  height: 1.75rem;
}

.relay__lane--us .relay__node {
  background: var(--navy);
  border-color: var(--accent-line);
  box-shadow: 0 0 0 6px rgba(var(--cyan-rgb), 0.08), 0 0 24px -4px var(--glow-accent);
}

.relay__who {
  font-weight: 600;
  font-stretch: 106%;
  color: var(--text);
  align-self: center;
}

.relay__lane p,
.relay__tasks {
  grid-column: 2;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.relay__tasks {
  display: grid;
  gap: var(--space-2);
}

.relay__tasks li {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  color: var(--text-body);
}

.relay__tasks .icon {
  margin-top: 0.15rem;
  color: var(--accent-2);
}

@media (min-width: 900px) {
  .relay__lanes {
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: var(--space-6);
  }

  .relay__lanes::before {
    left: 1.5rem;
    right: 1.5rem;
    top: 1.5rem;
    bottom: auto;
    width: auto;
    height: 2px;
    background-image: linear-gradient(90deg, var(--accent-ink) 50%, transparent 50%);
    background-size: 10px 2px;
  }

  .motion-ok .relay__lanes::before {
    animation-name: fluxo-h;
  }

  .relay__lane {
    grid-template-columns: 1fr;
  }

  .relay__node {
    grid-row: auto;
  }

  .relay__lane p,
  .relay__tasks {
    grid-column: 1;
  }
}

/* =========================================================
   3.5 COMO O GOLPE ACONTECE (demonstração em "celulares")
   ---------------------------------------------------------
   Os celulares são feitos só com CSS (nada de imagem).
   Dentro de cada aparelho, os tamanhos usam "cqi": 1cqi é 1%
   da largura do celular. Assim, se o celular fica maior ou
   menor, tudo dentro dele cresce ou diminui junto.

   Camadas de cada celular (de fora para dentro):
     .demo__phone  posição e inclinação final (CSS)
     .demo__enter  entrada presa à rolagem (JS)
     .demo__tilt   inclinação 3D com o mouse (JS) + "respirar" (CSS)
     .phone        o aparelho (no celular, "vira" ao trocar de etapa)
   ========================================================= */
.demo {
  overflow-x: clip;          /* os celulares inclinados nunca estouram a largura */
}

.demo__inner {
  display: grid;
  gap: clamp(2.5rem, 2rem + 3vw, 4rem);
  align-items: center;
}

.demo__copy {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
  max-width: 34rem;
}

.demo__lead {
  font-size: var(--fs-md);
  color: var(--text-muted);
}

.demo__figure {
  display: grid;
  gap: var(--space-4);
  justify-items: center;
}

/* Legenda pequena embaixo dos celulares */
.demo__note {
  font-size: 0.8125rem;
  color: var(--text-faint);
  text-align: center;
}

/* ---------- Palco: onde os celulares "flutuam" ---------- */
.demo__stage {
  --phone-w: min(17rem, 76vw);
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  width: 100%;
  padding-block: var(--space-5) var(--space-4);
}

/* Textura "mesa de análise" atrás dos celulares, sumindo nas bordas
   (desenho e cores em css/textura-mesa.css) */
.demo__stage::before {
  content: '';
  position: absolute;
  inset: -8% -10%;
  z-index: -1;
  pointer-events: none;
}

.demo__phone {
  position: relative;
  grid-area: 1 / 1;          /* no celular, os dois aparelhos ocupam o mesmo lugar */
}

.demo__enter {
  perspective: 1200px;       /* profundidade para a inclinação 3D */
}

.demo__tilt {
  will-change: transform;
}

/* "Respirar": sobe e desce 2px para cada lado, bem devagar.
   Usa a propriedade "translate" (separada de "transform"),
   para não brigar com a inclinação do mouse. */
.motion-ok .demo__tilt {
  animation: respirar 6s var(--ease-in-out) infinite alternate;
}

.motion-ok .demo__phone--investigacao .demo__tilt {
  animation-delay: -3s;
}

.demo.is-paused .demo__tilt,
.demo.is-paused .msg--typing i {
  animation-play-state: paused;   /* fora da tela, para tudo */
}

@keyframes respirar {
  from { translate: 0 -2px; }
  to { translate: 0 2px; }
}

/* Indicação de etapa ("1/2 O golpe"): só com um aparelho */
.demo__indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  background: rgba(var(--surface-rgb), 0.6);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}

.demo__indicator .mono {
  color: var(--accent-ink);
}

/* Rótulo de cada aparelho: só no modo sem animação, no celular */
.demo__phone-label {
  display: none;
}

@media (min-width: 640px) and (max-width: 1023px) {
  .demo__stage { --phone-w: 19.5rem; }   /* tablet: aparelho um pouco maior */
}

/* Um aparelho só (celular e tablet): mostra a tela da etapa atual */
@media (max-width: 1023px) {
  .demo__phone { grid-row: 2; }
  .demo__indicator { grid-row: 1; }
  .demo__stage[data-tela='1'] .demo__phone--investigacao,
  .demo__stage[data-tela='2'] .demo__phone--golpe {
    visibility: hidden;
  }

  /* Sem animação: os dois aparelhos, um embaixo do outro */
  .demo--estatico .demo__indicator { display: none; }
  .demo--estatico .demo__stage { gap: var(--space-7); }
  .demo--estatico .demo__phone { grid-row: auto; }
  .demo--estatico .demo__stage .demo__phone { visibility: visible; }
  .demo--estatico .demo__phone-label {
    display: block;
    margin-bottom: var(--space-3);
    text-align: center;
    color: var(--accent-ink);
  }
}

/* Computador: dois celulares inclinados, um um pouco à frente */
@media (min-width: 1024px) {
  .demo__inner {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }

  .demo__indicator { display: none; }

  .demo__stage {
    --phone-w: clamp(15rem, 4rem + 16vw, 21rem);
    display: block;
    height: calc(var(--phone-w) * 2.11 + 5.5rem);
    padding: 0;
  }

  .demo__phone {
    position: absolute;
    left: 50%;
  }

  /* O golpe: atrás, mais alto, inclinado para a direita */
  .demo__phone--golpe {
    top: 0.5rem;
    z-index: 1;
    transform: translateX(-101%) rotate(4deg);
  }

  /* A investigação: na frente, mais baixo, inclinado para a esquerda */
  .demo__phone--investigacao {
    top: 4.5rem;
    z-index: 2;
    transform: translateX(0%) rotate(-3deg);
  }
}

/* ---------- O aparelho ---------- */
.phone {
  position: relative;
  container-type: inline-size;     /* ativa as medidas "cqi" lá dentro */
  width: var(--phone-w);
  aspect-ratio: 9 / 19;
  padding: calc(var(--phone-w) * 0.032);
  border-radius: calc(var(--phone-w) * 0.16);
  background: linear-gradient(160deg, #20262E 0%, #0A0C10 45%, #14191F 100%);
  border: 1px solid rgba(var(--line-rgb), 0.18);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(var(--ink-rgb), 0.12),
    var(--shadow-float);
}

/* Botões laterais (volume e liga/desliga) */
.phone::before,
.phone::after {
  content: '';
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: #1A2028;
}

.phone::before { left: -3px; top: 22%; height: 11%; }
.phone::after { right: -3px; top: 28%; height: 15%; }

.phone__screen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--phone-w) * 0.13);
  background: #0E1217;
  font-size: 4.7cqi;               /* tamanho base do texto dentro da tela */
  line-height: 1.35;
  color: var(--text-body);
}

.phone .icon {
  width: 1.15em;
  height: 1.15em;
}

/* Barra de status: 9:41, ilha dinâmica, sinal e bateria */
.phone__status {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  height: 2.7em;
  padding: 0.35em 1.7em 0;
  font-size: 0.92em;
  font-weight: 600;
  color: var(--text);
}

.phone__time {
  font-variant-numeric: tabular-nums;
}

.phone__island {
  position: absolute;
  left: 50%;
  top: 0.55em;
  width: 31%;
  height: 1.75em;
  transform: translateX(-50%);
  border-radius: 1em;
  background: #000;
}

.phone__icons {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}

.phone__signal {
  display: inline-flex;
  align-items: flex-end;
  gap: 1px;
  height: 0.7em;
}

.phone__signal i {
  width: 0.2em;
  background: var(--text);
  border-radius: 1px;
}

.phone__signal i:nth-child(1) { height: 35%; }
.phone__signal i:nth-child(2) { height: 55%; }
.phone__signal i:nth-child(3) { height: 78%; }
.phone__signal i:nth-child(4) { height: 100%; }

.phone__battery {
  position: relative;
  width: 1.6em;
  height: 0.78em;
  border: 1px solid rgba(237, 238, 239, 0.55);
  border-radius: 0.25em;
}

.phone__battery::after {
  content: '';
  position: absolute;
  inset: 1px 30% 1px 1px;
  border-radius: 0.12em;
  background: var(--text);
}

/* ---------- App de mensagens (genérico, com as cores do site) ---------- */
.chat__head {
  display: flex;
  align-items: center;
  gap: 0.6em;
  flex: none;
  padding: 0.55em 0.9em 0.7em;
  border-bottom: 1px solid var(--hairline);
}

.chat__back {
  display: grid;
  color: var(--accent-2);
  rotate: 90deg;               /* a "seta para baixo" vira "voltar" */
}

.chat__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.3em;
  height: 2.3em;
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-faint);
}

.chat__who {
  display: grid;
  min-width: 0;
  line-height: 1.25;
}

.chat__who strong {
  font-size: 1em;
  color: var(--text);
}

.chat__who span {
  font-size: 0.82em;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.chat__call {
  display: grid;
  margin-left: auto;
  color: var(--accent-2);
}

.chat__body {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0 0.8em;
  /* as mensagens que sobem somem suavemente no topo */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 1.2em);
  mask-image: linear-gradient(180deg, transparent 0, #000 1.2em);
}

.chat__list {
  display: flex;
  flex-direction: column;
  gap: 0.45em;
  padding-block: 0.9em;
}

.chat__day {
  align-self: center;
  padding: 0.15em 0.7em;
  border-radius: var(--radius-pill);
  background: rgba(var(--ink-rgb), 0.05);
  font-size: 0.75em;
  color: var(--text-faint);
}

/* Balões */
.msg {
  max-width: 82%;
  padding: 0.5em 0.75em;
  border-radius: 1.1em;
  font-size: 0.95em;
}

.msg--in {
  align-self: flex-start;
  background: var(--surface);
  color: var(--text-body);
  border-bottom-left-radius: 0.3em;
  transform-origin: bottom left;   /* o balão "nasce" do canto de onde veio */
}

.msg--out {
  align-self: flex-end;
  background: #1C3A3B;             /* verde-água escurecido (mistura de #45A29E com o fundo) */
  color: #E3EFEE;
  border-bottom-right-radius: 0.3em;
  transform-origin: bottom right;
}

/* "Digitando…": três pontinhos que pulam */
.msg--typing {
  display: inline-flex;
  gap: 0.25em;
  padding: 0.75em 0.85em;
}

.msg--typing i {
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background: var(--text-faint);
  animation: pontinho 1.1s var(--ease-in-out) infinite;
}

.msg--typing i:nth-child(2) { animation-delay: 0.15s; }
.msg--typing i:nth-child(3) { animation-delay: 0.3s; }

@keyframes pontinho {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-0.25em); opacity: 1; }
}

/* Cartão com a chave Pix */
.msg--pix {
  display: grid;
  gap: 0.15em;
  min-width: 62%;
  border: 1px solid var(--hairline-strong);
}

.pix__label {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: 0.8em;
  font-weight: 600;
  color: var(--accent-2);
}

.msg--pix strong {
  font-size: 1.05em;
  letter-spacing: 0.02em;
}

.pix__key {
  font-family: var(--font-mono);
  font-size: 0.72em;
  color: var(--text-faint);
}

/* Campo de mensagem (só enfeite) */
.chat__input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  margin: 0.4em 0.8em 1.1em;
  padding: 0.35em 0.35em 0.35em 0.9em;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  font-size: 0.9em;
  color: var(--text-faint);
}

.chat__send {
  display: grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  background: var(--accent-2);
  color: var(--on-accent);
}

/* Notificação que desce do topo da tela */
.notif {
  position: absolute;
  left: 0.6em;
  right: 0.6em;
  top: 0.5em;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.65em 0.75em;
  border-radius: 1.2em;
  background: rgba(38, 48, 60, 0.97);
  border: 1px solid var(--hairline-strong);
  box-shadow: 0 0.8em 1.6em -0.6em rgba(0, 0, 0, 0.7);
  opacity: 0;
  transform: translateY(-140%);
  transition: transform 520ms var(--ease-elastic), opacity 240ms ease;
}

.notif.is-on {
  opacity: 1;
  transform: translateY(0);
}

.notif__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.2em;
  height: 2.2em;
  border-radius: 0.6em;
  background: var(--accent-2);
  color: var(--on-accent);
}

.notif__text {
  display: grid;
  min-width: 0;
  line-height: 1.3;
}

.notif__app {
  font-size: 0.72em;
  color: var(--text-muted);
}

.notif__text strong {
  font-size: 0.95em;
  color: var(--text);
}

.notif__text span:last-child {
  font-size: 0.82em;
  color: var(--text-muted);
}

/* ---------- App da Vestígio: análise do caso ---------- */
.case {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 0.7em;
  padding: 0.5em 0.9em 1.1em;
}

.case__head {
  display: grid;
  gap: 0.2em;
  justify-items: start;
}

.case__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-family: var(--font-mono);
  font-size: 0.68em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.case__brand img {
  width: 1.3em;
  height: 1.3em;
}

.case__title {
  font-size: 1.12em;
  font-stretch: 106%;
  color: var(--text);
}

/* Etiquetas de status (mesmo visual do dossiê do hero) */
.case-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.12em 0.55em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline-strong);
  font-size: 0.74em;
  font-weight: 600;
  color: var(--text-faint);
  white-space: nowrap;
  transition: color var(--dur-base) ease, background-color var(--dur-base) ease, border-color var(--dur-base) ease;
}

.case-tag::before {
  content: '';
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: currentColor;
}

.case-tag--status.is-active,
.case-tag--status.is-done,
.case-row.is-active .case-tag,
.case-row.is-done .case-tag {
  background: rgba(var(--teal-rgb), 0.25);
  border-color: rgba(var(--cyan-rgb), 0.28);
  color: var(--accent-ink);
}

/* Mapa de vínculos */
.case__map {
  flex: none;
}

.case-map {
  width: 100%;
  height: auto;
  overflow: visible;
}

.case-map__base {
  fill: none;
  stroke: rgba(var(--line-rgb), 0.16);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

/* A linha que "se desenha": começa escondida (dashoffset 1) */
.case-map__line {
  fill: none;
  stroke: var(--accent-2);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 700ms var(--ease-in-out);
}

.case-map__line.is-on {
  stroke-dashoffset: 0;
}

.case-map__node circle,
.case-map__center circle {
  fill: #141A21;
  stroke: rgba(var(--line-rgb), 0.28);
  stroke-width: 1;
  transition: stroke var(--dur-base) ease, fill var(--dur-base) ease;
}

.case-map svg svg {
  fill: none;
  stroke: var(--text-faint);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--dur-base) ease;
}

.case-map__node.is-on circle {
  stroke: var(--accent-2);
  fill: #15282B;
}

.case-map__node.is-on svg,
.case-map__center.is-on svg {
  stroke: var(--accent-line);
}

.case-map__center circle {
  stroke: var(--accent-2);
  stroke-dasharray: 3 2;
}

.case-map__center.is-on circle {
  stroke: var(--accent-line);
  stroke-dasharray: none;
}

/* Itens da análise */
.case__rows {
  display: grid;
  gap: 0.4em;
  padding: 0;
  list-style: none;
}

.case-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  padding: 0.5em 0.6em;
  border-radius: 0.8em;
  background: rgba(var(--ink-rgb), 0.03);
  border: 1px solid transparent;
  transition: background-color var(--dur-base) ease, border-color var(--dur-base) ease;
}

.case-row.is-active {
  background: rgba(var(--teal-rgb), 0.14);
  border-color: rgba(var(--cyan-rgb), 0.22);
}

.case-row__text {
  display: grid;
  gap: 0.25em;
  justify-items: start;
  min-width: 0;
}

.case-row__name {
  font-size: 0.92em;
  color: var(--text);
}

/* Caixinha de marcar: o "certo" se desenha quando o item é concluído */
.case-row__check {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.15em;
  height: 1.15em;
  margin-top: 0.1em;
  border-radius: 0.3em;
  border: 1.5px solid rgba(var(--line-rgb), 0.35);
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.case-row__check svg {
  width: 100%;
  height: 100%;
}

.case-row__check path {
  fill: none;
  stroke: var(--on-accent);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 300ms var(--ease-out) 80ms;
}

.case-row.is-done .case-row__check {
  background: var(--accent-2);
  border-color: var(--accent-2);
}

.case-row.is-done .case-row__check path {
  stroke-dashoffset: 0;
}

/* Barra de progresso */
.case__progress {
  flex: none;
  height: 0.3em;
  margin-top: auto;
  border-radius: 1em;
  background: rgba(var(--ink-rgb), 0.07);
  overflow: hidden;
}

.case__progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-2), var(--accent-line));
  transform: scaleX(var(--progresso, 0));
  transform-origin: left;
  transition: transform 700ms var(--ease-fluid);
}

/* Cartão final: "Relatório técnico pronto".
   Ao ficar pronto, acende (o ÚNICO brilho suave desta seção). */
.case__report {
  display: flex;
  align-items: center;
  gap: 0.6em;
  flex: none;
  padding: 0.65em 0.75em;
  border-radius: 1em;
  background: rgba(var(--ink-rgb), 0.04);
  color: var(--text-faint);
  line-height: 1.3;
  transition: background-color 600ms var(--ease-fluid), color 600ms ease, box-shadow 600ms ease;
}

.case__report strong {
  display: block;
  font-size: 0.95em;
  color: inherit;
}

.case__report span span {
  display: block;
  font-size: 0.78em;
}

.case__report-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  background: rgba(var(--ink-rgb), 0.06);
}

.case__report.is-ready {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 0.9em 2em -0.9em rgba(var(--cyan-rgb), 0.55);
}

.case__report.is-ready .case__report-icon {
  background: rgba(11, 12, 16, 0.1);
}

.case__report.is-ready span span {
  color: rgba(11, 12, 16, 0.78);
}

/* Movimento reduzido: celulares parados, sem "respirar"
   (só vale com a classe respeitar-movimento: veja base.css) */
html.respeitar-movimento .demo__tilt { animation: none; }

/* =========================================================
   4. SERVIÇOS
   ========================================================= */
.services {
  isolation: isolate;
}

/* Brilho azul atrás da grade de serviços */
.services::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 20% 0 auto;
  height: 70%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(var(--teal-rgb), calc(0.08 * var(--glow-k))), transparent 70%);
  pointer-events: none;
}

.services__grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .services__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
}

/* Celular: cada serviço vira uma linha compacta (ícone, nome, seta).
   O resumo some aqui porque o painel de detalhe já explica tudo:
   assim os 18 serviços cabem em pouco mais de uma tela e meia. */
@media (max-width: 639px) {
  .services__grid {
    gap: var(--space-2);
  }

  .service-card {
    --bezel: 4px;
    --radius-shell: 22px;
  }

  .service-card .bezel__core {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-3);
    padding: 0.75rem 0.75rem 0.75rem 0.875rem;
  }

  .service-card .service-card__top .mono,
  .service-card p {
    display: none;
  }

  .service-card h3 {
    margin: 0;
    font-size: var(--fs-base);
    line-height: 1.25;
  }

  .service-card__icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  .service-card__more {
    margin: 0;
    padding: 0;
    font-size: 0;              /* esconde o texto "Ver detalhes", fica só a seta */
  }
}

.services__noscript {
  padding: var(--space-5);
  border: 1px dashed var(--hairline-strong);
  border-radius: 22px;
}

/* =========================================================
   5. COMO FUNCIONA (etapas que acendem ao rolar)
   ========================================================= */
.process__inner {
  display: grid;
  gap: var(--space-7);
}

.process__aside {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
  align-content: start;
}

.process__aside p {
  font-size: var(--fs-md);
  color: var(--text-muted);
  max-width: 28rem;
}

.steps {
  position: relative;
  display: grid;
  gap: var(--space-4);
  padding-left: 4rem;
}

/* Trilho vertical + parte preenchida pela rolagem */
.steps__track {
  position: absolute;
  left: 1.5rem;
  top: 1.5rem;
  bottom: 1.5rem;
  width: 2px;
  border-radius: 2px;
  background: var(--hairline-strong);
}

.steps__progress {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--accent-ink), var(--accent-line));
  transform-origin: top;
}

.step {
  position: relative;
  padding: var(--space-5);
  border-radius: 22px;
  background: rgba(var(--surface-rgb), 0.4);
  border: 1px solid var(--hairline);
  transition:
    background-color var(--dur-slow) var(--ease-fluid),
    border-color var(--dur-slow) var(--ease-fluid),
    transform var(--dur-slow) var(--ease-fluid);
}

.step__num {
  position: absolute;
  left: -4rem;
  top: var(--space-5);
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--hairline-strong);
  transition: background-color var(--dur-slow) var(--ease-fluid), border-color var(--dur-slow) ease, box-shadow var(--dur-slow) ease;
}

.step__num .mono {
  color: var(--text-muted);
  transition: color var(--dur-slow) ease;
}

.step h3 {
  font-size: 1.1875rem;
  margin-bottom: var(--space-2);
}

.step p {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  max-width: 34rem;
}

/* Etapa alcançada pela rolagem (o JS adiciona .is-lit) */
.step.is-lit {
  background: var(--surface);
  border-color: rgba(var(--cyan-rgb), 0.224);
}

.step.is-lit .step__num {
  background: var(--accent);
  border-color: rgba(var(--cyan-rgb), 0.44);
  box-shadow: 0 0 0 6px rgba(var(--teal-rgb), 0.16);
}

.step.is-lit .step__num .mono {
  color: var(--on-accent);
}

/* Sem animação: todas as etapas já aparecem acesas */
html:not(.motion-ok) .step {
  background: var(--surface);
  border-color: rgba(var(--cyan-rgb), 0.16);
}

@media (min-width: 1024px) {
  .process__inner {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-9);
  }

  .process__aside {
    position: sticky;
    top: calc(var(--header-h) + var(--space-7));
    align-self: start;
  }

  .step {
    padding: var(--space-6);
  }

  .step__num {
    top: var(--space-6);
  }
}

/* =========================================================
   6. SOBRE (bloco navy institucional)
   ========================================================= */
.about {
  background: var(--navy);
  isolation: isolate;
  overflow: hidden;
  /* Sobre o azul, os cinzas viram tons azulados (texto cinza em fundo
     colorido parece "lavado"). Os nomes das variáveis continuam os mesmos. */
  --text-body: var(--on-navy-body);
  --text-muted: var(--on-navy-muted);
  --text-faint: var(--on-navy-faint);
  --redact-bar: var(--redact-bar-navy);
  color: var(--text-body);
  border-radius: clamp(28px, 4vw, 48px);
  margin-inline: clamp(0.5rem, 1.5vw, 1.5rem);
}

/* Brilhos azuis dentro do bloco navy */
.about::before,
.about::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

.about::before {
  width: 900px;
  height: 900px;
  left: -300px;
  top: -420px;
  background: radial-gradient(circle, rgba(var(--teal-rgb), calc(0.22 * var(--glow-k))), transparent 62%);
}

/* TEXTURA 3: "mesa de análise" no fundo do "Sobre" (css/textura-mesa.css) */
.about::after {
  inset: 0;
  border-radius: 0;
}

.about__intro {
  max-width: 48rem;
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.about__intro p {
  margin-top: var(--space-5);
  font-size: var(--fs-md);
  max-width: 38rem;
}

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

.principle {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: 24px;
  background: rgba(var(--ink-rgb), 0.045);
  border: 1px solid rgba(var(--cyan-rgb), 0.128);
  box-shadow: var(--highlight);
  transition: background-color var(--dur-base) ease, transform var(--dur-base) var(--ease-fluid);
}

@media (hover: hover) and (pointer: fine) {
  .principle:hover {
    background: rgba(var(--ink-rgb), 0.075);
    transform: translateY(-3px);
  }
}

.principle__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgba(var(--teal-rgb), 0.14);
  border: 1px solid rgba(var(--teal-rgb), 0.4);
  color: var(--accent-line);
  font-size: 1.25rem;
}

.principle h3 {
  font-size: 1.1875rem;
}

.principle p {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* Destaque: o primeiro princípio (Sigilo) ocupa mais espaço */
.principle--feature {
  background:
    linear-gradient(160deg, rgba(var(--teal-rgb), 0.22) 0%, rgba(var(--teal-rgb), 0.04) 60%),
    var(--surface);
  border-color: var(--hairline-accent);
  --text-muted: var(--on-feature-muted);
}

.principle--feature .principle__icon {
  background: var(--accent);
  border-color: transparent;
  color: var(--on-accent);
}

@media (min-width: 640px) {
  .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .principle--feature { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  .principles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(10rem, auto);
    gap: var(--space-4);
  }

  .principle--feature {
    grid-column: span 1;
    grid-row: span 2;
    align-content: end;
    padding: var(--space-6);
  }

  .principle--feature h3 {
    font-size: var(--fs-xl);
  }
}

/* Espaço reservado para a equipe (placeholder) */
.team {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-4);
  padding: var(--space-5);
  border: 1px dashed rgba(var(--cyan-rgb), 0.256);
  border-radius: 24px;
  background: var(--team-bg);
}

.team h3 {
  font-size: var(--fs-lg);
  margin-bottom: var(--space-3);
}

.placeholder-text {
  color: var(--text-muted);
  font-style: italic;
  max-width: 44rem;
}

.team__list {
  display: grid;
  gap: var(--space-4);
}

.team__slot {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.team__slot > span:last-child {
  display: grid;
  gap: 0.15rem;
}

.team__slot strong {
  font-size: var(--fs-sm);
}

.team__role {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.team__avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1px dashed rgba(var(--cyan-rgb), 0.32);
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .team__list { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .team {
    grid-template-columns: 1fr 1.4fr;
    align-items: center;
    padding: var(--space-6);
  }
}

/* =========================================================
   7. CAÍ EM UM GOLPE, E AGORA?
   ========================================================= */
/* Título como fala do cliente: aspas tipográficas na cor de destaque,
   um pouco mais leves que o texto. (Sem "pendurar" a aspa para fora:
   a animação de entrada do título usa clip-path e cortaria ela.) */
.guide__fala .aspas {
  color: var(--accent-ink);
  font-weight: 400;
  opacity: 0.85;
}

.guide__grid {
  display: grid;
  gap: var(--space-4);
}

.guide__core {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

/* "Faça agora" ganha um brilho azul no topo */
.guide__card--do .guide__core {
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(var(--teal-rgb), calc(0.35 * var(--glow-k))), transparent 60%),
    linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
}

.guide__card--dont .guide__core {
  background: var(--dont-bg);
}

.guide__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-lg);
  margin-bottom: var(--space-6);
}

.guide__badge {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 1.1rem;
}

.guide__card--dont .guide__badge {
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
  border: 1px solid var(--hairline-strong);
}

.guide__list {
  display: grid;
  gap: var(--space-5);
  counter-reset: item;
}

.guide__list li {
  position: relative;
  display: grid;
  gap: var(--space-1);
  padding-left: 3rem;
  color: var(--text-muted);
  counter-increment: item;
}

.guide__list li strong {
  display: block;
  color: var(--text);
}

/* Números dos passos em círculos navy */
.guide__list li::before {
  content: counter(item);
  position: absolute;
  left: 0;
  top: -0.1rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--navy);
  border: 1px solid rgba(var(--cyan-rgb), 0.24);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--accent-ink);
}

/* Na lista do "não faça", a ordem não importa: usa um X */
.guide__list--dont li::before {
  content: '';
  /* um "X" desenhado com dois traços finos */
  background:
    linear-gradient(45deg, transparent 46%, var(--text-muted) 46%, var(--text-muted) 54%, transparent 54%) center / 0.75rem 0.75rem no-repeat,
    linear-gradient(-45deg, transparent 46%, var(--text-muted) 46%, var(--text-muted) 54%, transparent 54%) center / 0.75rem 0.75rem no-repeat,
    rgba(var(--ink-rgb), 0.05);
  border-color: var(--hairline-strong);
  color: var(--text-muted);
}

@media (min-width: 900px) {
  .guide__grid {
    grid-template-columns: 1.12fr 1fr;
    align-items: stretch;
  }
}

/* =========================================================
   8. DÚVIDAS
   ========================================================= */
.faq__head p {
  margin-top: var(--space-4);
  font-size: var(--fs-md);
  color: var(--text-muted);
}

.faq__head {
  margin-bottom: var(--space-7);
}

@media (min-width: 1024px) {
  .faq__inner {
    display: grid;
    grid-template-columns: 4fr 7fr;
    gap: var(--space-8);
  }

  .faq__head {
    position: sticky;
    top: calc(var(--header-h) + var(--space-7));
    align-self: start;
    margin-bottom: 0;
  }
}

/* =========================================================
   9. CHAMADA FINAL + CONTATO (bloco azul de ação)
   ========================================================= */
.cta {
  --bezel: 8px;
  --radius-shell: clamp(28px, 4vw, 44px);
  background: rgba(var(--teal-rgb), 0.06);
  border-color: var(--hairline-accent);
}

.cta__core {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  gap: var(--space-6);
  justify-items: start;
  padding: clamp(2rem, 1rem + 5vw, 5.5rem);
  /* Bloco final: fundo profundo + textura "mesa de análise" (css/textura-mesa.css) */
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(var(--teal-rgb), calc(0.28 * var(--glow-k))), transparent 60%),
    var(--navy);
  box-shadow: inset 0 1px 0 rgba(var(--ink-rgb), 0.06);
  --redact-bar: var(--redact-bar-cta);
}

/* Brilhos navy dentro do bloco azul */
.cta__core::before,
.cta__core::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

.cta__core::before {
  inset: 0;
  border-radius: 0;
  /* textura "mesa de análise" no canto direito, sumindo suavemente (css/textura-mesa.css) */
}

.cta__core::after {
  width: 520px;
  height: 520px;
  left: -220px;
  bottom: -320px;
  display: none;   /* sem segundo brilho: o bloco fica mais limpo */
}

.cta__core h2 {
  color: var(--text);
  font-size: clamp(2rem, 1.2rem + 3.4vw, 4.25rem);
  max-width: 18ch;
}

.contact__list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.contact__item {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-5);
  border-radius: 22px;
  background: rgba(var(--surface-rgb), 0.45);
  border: 1px solid var(--hairline);
}

.contact__item dt {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
}

.contact__item dt .icon {
  color: var(--accent-2);
}

.contact__item dd {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-md);
  overflow-wrap: break-word;   /* quebra em pontos naturais (o e-mail quebra depois do @) */
}

.contact__item dd a {
  color: var(--text);
  text-decoration-color: var(--hairline-strong);
}

@media (hover: hover) and (pointer: fine) {
  .contact__item dd a:hover { text-decoration-color: currentColor; }
}

@media (min-width: 640px) {
  .contact__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .contact__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* =========================================================
   10. RODAPÉ
   ---------------------------------------------------------
   Topo: logo, frase "Toda ação deixa um rastro." e botão.
   Colunas: navegação, serviços, contato (com o aviso de
   urgência) e redes sociais. Base: aviso legal, © e
   Política de Privacidade.
   A entrada animada fica em js/destaques.js, parte 4.
   ========================================================= */
.site-footer {
  position: relative;
  padding: clamp(3.5rem, 2.5rem + 4vw, 6rem) 0 calc(var(--space-6) + 4.5rem);  /* espaço para o botão flutuante */
  font-size: var(--fs-sm);
  color: var(--text-muted);
  background:
    radial-gradient(60rem 22rem at 12% 0%, rgba(var(--teal-rgb), calc(0.10 * var(--glow-k))), transparent 70%),
    linear-gradient(180deg, transparent, rgba(var(--navy-rgb), 0.55) 40%, rgba(var(--navy-rgb), 0.9));
  overflow: hidden;
}

/* Linha fina do topo: some nas pontas e tem um trecho ciano */
.site-footer__linha {
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-line) 18%, rgba(var(--cyan-rgb), 0.25) 42%, var(--hairline-strong) 60%, transparent);
  transform-origin: left center;
  opacity: 0.8;
}

/* ---------- Topo ---------- */
.site-footer__topo {
  display: grid;
  gap: var(--space-6);
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  border-bottom: 1px solid var(--hairline);
}

.site-footer__marca {
  display: grid;
  gap: var(--space-4);
  max-width: 34rem;
}

.site-footer__logo {
  justify-self: start;
  color: var(--logo-color);     /* o logo usa currentColor: muda com o tema */
  border-radius: 8px;
}

.site-footer__logo .logo {
  height: 2.125rem;
  width: auto;
}

/* Os 3 pontos do símbolo surgem em sequência (cada um cresce do próprio centro) */
.site-footer__logo circle {
  transform-box: fill-box;
  transform-origin: center;
}

.site-footer__frase {
  color: var(--text);
  font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
  font-weight: 600;
  font-stretch: 112%;
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.site-footer__desc {
  max-width: 30rem;
  color: var(--text-muted);
  font-size: var(--fs-base);
}

.site-footer__cta { justify-self: start; }

/* ---------- Colunas ---------- */
.site-footer__colunas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7) var(--space-5);
  padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}

.site-footer__titulo {
  margin-bottom: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  font-stretch: 100%;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.site-footer__links {
  display: grid;
  gap: 0.7rem;
}

.site-footer__links a,
.site-footer__contato a {
  position: relative;
  color: var(--text-body);
  text-decoration: none;
  transition: color var(--dur-fast) ease;
}

/* Sublinhado que "corre" da esquerda para a direita no hover */
.site-footer__links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--accent-line);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur-base) var(--ease-out);
}

.site-footer__links .site-footer__mais {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--accent-ink);
}

.site-footer__mais .icon { width: 1em; height: 1em; }

@media (hover: hover) and (pointer: fine) {
  .site-footer__links a:hover,
  .site-footer__contato a:hover { color: var(--text); }
  .site-footer__links a:hover::after { transform: scaleX(1); transform-origin: left center; }
}

.site-footer__contato {
  display: grid;
  gap: 0.85rem;
  margin-bottom: var(--space-5);
}

.site-footer__contato li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  min-width: 0;
}

.site-footer__contato li > :last-child {
  min-width: 0;
  overflow-wrap: break-word;   /* o e-mail quebra depois do @ (js/components.js) */
}

.site-footer__ico {
  flex: none;
  margin-top: 0.15em;
  color: var(--accent-2);
}

.site-footer__ico .icon { width: 1.05em; height: 1.05em; }

/* No celular, contato e redes ocupam a linha inteira */
.site-footer__col--contato,
.site-footer__col--redes { grid-column: 1 / -1; }

/* Cartão do Instagram */
.site-footer__social {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 20rem;
  padding: 0.7rem 0.9rem 0.7rem 0.7rem;
  border: 1px solid var(--hairline-strong);
  border-radius: 16px;
  background: rgba(var(--surface-rgb), 0.35);
  color: var(--text-body);
  text-decoration: none;
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}

.site-footer__social-icone {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  color: var(--accent-line);
  background: rgba(var(--teal-rgb), 0.14);
}

.site-footer__social-icone .icon { width: 1.25rem; height: 1.25rem; }

.site-footer__social-texto { display: grid; line-height: 1.3; min-width: 0; }
.site-footer__social-texto strong { font-size: var(--fs-sm); }
.site-footer__social-texto span { color: var(--text-muted); }

.site-footer__social-seta {
  margin-left: auto;
  color: var(--text-faint);
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
  .site-footer__social:hover {
    border-color: var(--hairline-accent);
    background: rgba(var(--surface-rgb), 0.6);
    color: var(--text-body);
  }
  .site-footer__social:hover .site-footer__social-seta { color: var(--accent-ink); transform: translate(2px, -2px); }
}

.site-footer__nota {
  margin-top: var(--space-3);
  color: var(--text-faint);
  font-size: 0.8125rem;
}

/* ---------- Base: aviso legal, © e privacidade ---------- */
.site-footer__base {
  display: grid;
  gap: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--hairline);
  color: var(--text-faint);
  font-size: 0.8125rem;
}

.site-footer__aviso { max-width: 62rem; }

.site-footer__fim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
}

.site-footer__fim a {
  color: var(--text-muted);
  text-decoration: underline;
  text-decoration-color: var(--hairline-strong);
}

@media (hover: hover) and (pointer: fine) {
  .site-footer__fim a:hover { color: var(--text); text-decoration-color: currentColor; }
}

@media (min-width: 768px) {
  .site-footer__topo {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
  .site-footer__col--contato,
  .site-footer__col--redes { grid-column: auto; }
}

@media (min-width: 1024px) {
  .site-footer { padding-bottom: var(--space-6); }
  .site-footer__colunas {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--space-6);
  }
}

/* =========================================================
   TARJA QUE REVELA FRASES-CHAVE
   A frase começa coberta e é revelada ao entrar na tela.
   Só acontece com a animação ligada (.motion-ok no <html>).
   ========================================================= */
.redact__text {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.motion-ok .redact__text {
  color: transparent;
  background-image: linear-gradient(var(--redact-bar, var(--surface-hover)), var(--redact-bar, var(--surface-hover)));
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 100% 92%;
  border-radius: 4px;
  transition:
    background-size 800ms var(--ease-in-out),
    color 300ms ease 420ms;
}

.motion-ok .redact.is-revealed .redact__text {
  color: inherit;
  background-size: 0% 92%;
}

/* =========================================================
   ESTADO INICIAL DAS ANIMAÇÕES DE ENTRADA
   Só ficam escondidos se o JavaScript de animação rodou
   (classe .motion-ok). Sem JS, tudo aparece normalmente.
   ========================================================= */
.motion-ok [data-reveal],
.motion-ok [data-reveal-item],
.motion-ok [data-hero-item],
.motion-ok .dossier__card,
.motion-ok .word__inner {
  opacity: 0;
}

/* Movimento reduzido: folhas do dossiê retas
   (só vale com a classe respeitar-movimento: veja base.css) */
html.respeitar-movimento .dossier__card--chat,
html.respeitar-movimento .dossier__card--pix { rotate: 0deg; }

/* =========================================================
   TELAS LARGAS (1600px ou mais)
   Distribui melhor o hero: título maior, mais espaço entre o
   texto e o dossiê, e o dossiê um pouco maior.
   ========================================================= */
@media (min-width: 1600px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(4rem, 6vw, 8rem);
  }

  .hero__title {
    font-size: clamp(4rem, 2rem + 2.3vw, 5.25rem);
  }

  .hero__lead {
    max-width: 38rem;
  }

  .dossier {
    max-width: 40rem;
    margin-right: 0;
    aspect-ratio: 1 / 0.92;   /* mais "deitado": os papéis ficam encostados no card */
  }

  /* selos de confiança alinhados à esquerda, como o texto */
  .hero .seals {
    justify-content: space-between;
    padding-inline: var(--space-7);
  }
}

/* =========================================================
   NOTEBOOKS (1280px a 1919px de largura)
   O título do hero cresce mais devagar nessa faixa (antes ele
   já batia 64px em 1366px). Em 1920px fica igual ao de antes.
   As variáveis gerais desta faixa ficam em css/variables.css.
   ========================================================= */
@media (min-width: 1280px) and (max-width: 1919.98px) {
  .hero__title {
    font-size: clamp(3rem, -0.5rem + 4.25vw, 4.75rem);  /* 1366: ~51px · 1536: ~57px */
  }
}

/* =========================================================
   TELAS BAIXAS (computador com até 820px de altura)
   Hero mais compacto: menos espaço em cima, selos mais perto e
   o dossiê limitado pela ALTURA da tela (não só pela largura).
   ========================================================= */
@media (min-width: 1024px) and (max-height: 820px) {
  .hero {
    padding-top: calc(var(--header-h) + clamp(1rem, 2.5vh, 2rem));
    padding-bottom: var(--space-5);
  }

  .hero__copy {
    gap: var(--space-4);
  }

  .hero .seals {
    margin-top: var(--space-5);
    padding-block: var(--space-3);
  }

  /* o dossiê tem proporção ~1:1, então a largura máxima segue a altura útil */
  .dossier {
    max-width: min(34rem, calc((100dvh - var(--header-h)) * 0.8));
  }

  .section-head {
    margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  }
}

@media (min-width: 1600px) and (max-height: 820px) {
  .dossier {
    max-width: min(40rem, calc((100dvh - var(--header-h)) * 0.95));
  }
}