/* ==========================================================================
   VRA — Landing page Projeto 60D
   Mobile-first. Breakpoints por min-width: 37.5em (600), 48em (768),
   56.25em (900), 64em (1024), 90em (1440).
   Decisões visuais documentadas em CLAUDE.md.
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  /* Cores (aproximações das referências, não cores oficiais medidas) */
  --color-bg: #080808;
  --color-panel: #0c0c0c;
  --color-paper: #f4f3ef;
  --color-orange: #ff5700;
  --color-orange-deep: #d94300;
  --color-text: #fafafa;
  --color-text-soft: #d6d6d6;
  --color-ink: #080808;
  --color-ink-soft: #2b2b2b;
  --color-line: #555555;
  --color-line-soft: #2e2e2e;
  --color-line-paper: #bdbcb7;
  /* CTA de WhatsApp (padrão enviado pelo proprietário, CTAS.png) */
  --color-lime: #c4ff1c;
  --color-lime-light: #dcff63;
  --color-lime-deep: #9fe000;
  --cta-radius: 10px;

  /* Tipografia (sugestões aproximadas; ver CLAUDE.md) */
  --font-display: "Anton", Impact, "Arial Narrow Bold", "Arial Narrow", sans-serif;
  --font-condensed: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  --font-body: Roboto, Arial, "Helvetica Neue", sans-serif;

  --fs-display-xl: clamp(2.5rem, 0.9rem + 5.4vw, 5.5rem);     /* h1 hero: ~40 → ~70 (1024) → 88 */
  --fs-display-l: clamp(2.375rem, 1.1rem + 4.9vw, 5rem);      /* h2 principais: ~38 → ~68 → 80 */
  --fs-display-m: clamp(2rem, 1rem + 3.6vw, 4rem);            /* h2 secundários: 32 → ~53 → 64 */
  --fs-display-s: clamp(1.625rem, 1rem + 2.2vw, 2.75rem);     /* títulos de cards de prova */
  --fs-h3: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem);         /* h3 condensados */
  --fs-lead: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
  --fs-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --fs-small: 0.9375rem;
  --fs-eyebrow: clamp(0.8125rem, 0.75rem + 0.25vw, 0.9375rem);

  --lh-display: 0.94;
  --lh-tight: 1.15;
  --lh-body: 1.45;

  /* Layout: na referência de 1024 px o conteúdo começa a ~48 px das laterais */
  --container-max: 1200px;
  --gutter: clamp(1.25rem, 4.7vw, 3rem);
  --space-section: clamp(3.5rem, 2rem + 5vw, 6rem);
  --space-xs: 0.5rem;
  --space-s: clamp(0.75rem, 0.6rem + 0.5vw, 1rem);
  --space-m: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  --space-l: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  --space-xl: clamp(2rem, 1.2rem + 3.5vw, 4rem);

  --radius: 2px;               /* cantos quase retos */
  --radius-card: 3px;
  --border: 1px solid var(--color-line-soft);
  --edge-h: clamp(14px, 1.6vw, 22px); /* altura das bordas de papel rasgado */

  /* Textura de grão: tile SVG pequeno usado como background (não é filtro sobre a página) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* Grão mais áspero do hero */
  --grain-strong: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55  0 0 0 0 .52  0 0 0 0 .5  0 0 0 1.3 -.88'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --header-h: 68px;

  /* Borda irregular (tile horizontal). Preenchido abaixo da linha rasgada. */
  --torn-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 28' preserveAspectRatio='none'%3E%3Cpath d='M0 28 L0 12.0 L7 6.7 L15 5.5 L21 15.7 L26 3.1 L29 10.2 L39 6.9 L49 11.2 L57 15.0 L63 2.7 L71 17.2 L79 14.0 L83 22.7 L92 7.6 L96 14.2 L102 8.1 L113 8.6 L123 5.5 L131 15.6 L141 12.5 L148 6.7 L157 16.4 L162 10.6 L172 8.2 L176 13.7 L187 23.7 L192 15.7 L199 8.4 L205 14.5 L210 18.3 L214 2.7 L222 9.4 L230 10.6 L240 18.2 L245 9.1 L252 16.7 L258 17.5 L266 4.8 L271 8.7 L278 12.8 L286 18.1 L290 5.0 L295 11.7 L300 19.4 L307 14.9 L316 23.9 L319 2.1 L326 6.5 L336 11.6 L343 7.1 L351 6.2 L355 16.7 L359 4.4 L366 17.2 L370 14.9 L378 19.3 L383 10.2 L391 17.5 L394 14.8 L400 12.0 L400 28 Z'/%3E%3C/svg%3E");
}

/* 2. Reset e base ---------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"], .list-reset { list-style: none; padding: 0; }
img, svg, picture, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
strong, b { font-weight: 700; }

:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--color-orange);
  outline-offset: 3px;
}
.on-orange :focus-visible,
.section--orange :focus-visible { outline-color: var(--color-ink); }

main:focus { outline: none; }

::selection { background: var(--color-orange); color: var(--color-ink); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* 3. Acessibilidade -------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--color-orange);
  color: var(--color-ink);
  font-family: var(--font-condensed);
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; outline-color: var(--color-text); }

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

/* 4. Layout ---------------------------------------------------------------- */
.container {
  width: min(100% - 2 * var(--gutter), var(--container-max));
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: var(--space-section);
}
.section--tight { padding-block: var(--space-xl); }

/* Temas de seção. O grão entra como camada de background, sem overlay. */
.section--dark {
  background-color: var(--color-bg);
  /* grão esparso: o uniforme (--grain) acinzenta o preto */
  background-image: var(--grain-strong);
  background-size: 220px;
  color: var(--color-text);
  --edge-color: var(--color-bg);
}
.section--paper {
  background-color: var(--color-paper);
  background-image: var(--grain);
  background-size: 180px;
  color: var(--color-ink);
  --edge-color: var(--color-paper);
}
.section--orange {
  background-color: var(--color-orange);
  background-image: var(--grain);
  background-size: 180px;
  color: var(--color-ink);
  --edge-color: var(--color-orange);
}

/* Grades: uma coluna no celular, divisão conforme espaço real */
.grid { display: grid; gap: var(--space-l); }
.grid--3 { gap: var(--space-m); }

@media (min-width: 48em) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 56.25em) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Duas colunas separadas por linha vertical fina */
  .grid--ruled { gap: 0; }
  .grid--ruled > * { padding-inline: var(--space-l); }
  .grid--ruled > :first-child { padding-left: 0; }
  .grid--ruled > :last-child { padding-right: 0; }
  .grid--ruled > * + * { border-left: 1px solid var(--rule-color, var(--color-line)); }
}

/* Separadores finos */
.divider {
  height: 0;
  margin-block: var(--space-l);
  border: 0;
  border-top: 1px solid var(--rule-color, var(--color-line));
}
.section--paper { --rule-color: var(--color-line-paper); }

/* Traço laranja curto (abaixo de citações, cards etc.) */
.accent-rule {
  display: block;
  width: 3.75rem;
  height: 3px;
  background: var(--color-orange);
  border: 0;
  margin: 0;
}

/* 5. Tipografia ------------------------------------------------------------ */
.eyebrow {
  display: block;
  margin-bottom: var(--space-s);
  color: var(--color-orange);
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: 0;
  text-transform: uppercase;
  overflow-wrap: break-word;
  hyphens: manual;
}
.display--xl { font-size: var(--fs-display-xl); }
.display--l  { font-size: var(--fs-display-l); }
.display--m  { font-size: var(--fs-display-m); }
.display--s  { font-size: var(--fs-display-s); }
/* Blocos de linha intencional no desktop; no celular fluem normalmente */
.display .line { display: inline; }
@media (min-width: 64em) {
  .display .line { display: block; }
}

.hl { color: var(--color-orange); }
.section--orange .hl { color: var(--color-ink); }

.subhead {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  letter-spacing: -0.005em;
}

.lead { font-size: var(--fs-lead); line-height: 1.4; }
.small { font-size: var(--fs-small); }
.muted { color: var(--color-text-soft); }
.section--paper .muted { color: var(--color-ink-soft); }

.prose > * + * { margin-top: 0.75em; }
.measure { max-width: 34em; }

/* 6. Ícones ---------------------------------------------------------------- */
.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
}
.icon--orange { color: var(--color-orange); }

/* Quadrado laranja com ícone branco (benefícios, escopo) */
.icon-box {
  display: grid;
  place-items: center;
  width: clamp(3.5rem, 2.8rem + 2.4vw, 4.5rem);
  aspect-ratio: 1;
  flex: none;
  background: var(--color-orange);
  color: var(--color-text);
  border-radius: var(--radius);
}
.icon-box .icon { width: 58%; height: 58%; }

/* 7. Botões ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  min-height: 48px;
  max-width: 100%;
  padding: 0.75rem clamp(1.1rem, 0.8rem + 1.2vw, 1.75rem);
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);
  line-height: 1.1;
  letter-spacing: 0.005em;
  text-align: left;
  text-transform: uppercase;
  text-decoration: none;
  white-space: normal;             /* permite quebra no celular */
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn .icon { width: 1.3em; height: 1.3em; }
.btn__arrow { margin-left: 0.15em; }

.btn--primary {
  background: var(--color-orange);
  color: var(--color-ink);
}
.btn--primary:hover { background: #ff6d1f; }

.btn--dark {
  background: var(--color-ink);
  color: var(--color-text);
}
.btn--dark:hover { background: #1c1c1c; }

.btn--dark:focus-visible { outline-color: var(--color-text); }

/* CTA sem destino configurado (ver js/main.js e PENDENCIAS.md) */
.btn[aria-disabled="true"] { cursor: default; }

.cta-note {
  margin-top: var(--space-s);
  font-size: var(--fs-small);
}

/* CTA de WhatsApp (neon) ---------------------------------------------------
   Padrão único para todos os CTAs comerciais (ver CLAUDE.md). Variantes pelo
   fundo da seção: .cta--dark (brilho neon), .cta--light, .cta--orange. */
.cta { margin-top: var(--space-l); }
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.7rem, 0.5rem + 0.8vw, 1.1rem);
  min-height: 60px;
  max-width: 100%;
  padding: 0.5rem 0.5rem 0.5rem clamp(0.8rem, 0.6rem + 0.8vw, 1.15rem);
  border: 2px solid #0b0b0b;
  border-radius: var(--cta-radius);
  background: linear-gradient(to bottom, var(--color-lime-light) 0%, var(--color-lime) 45%, var(--color-lime-deep) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 0 rgba(0, 0, 0, 0.12);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 0.95rem + 1.2vw, 1.875rem);
  line-height: 1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.18s ease, transform 0.18s ease;
}
.cta-btn__wa { display: grid; flex: none; }
.cta-btn__wa .icon { width: 1.7em; height: 1.7em; stroke: none; }
.cta-btn__sep {
  flex: none;
  align-self: stretch;
  width: 2px;
  margin-block: 0.35rem;
  background: #0b0b0b;
}
.cta-btn__label { flex: 1 1 auto; min-width: 0; padding-block: 0.3rem; }
.cta-btn__go {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.1em;
  height: 2.1em;
  margin-left: 0.2rem;
  border-radius: 8px;
  background: #0b0b0b;
  color: var(--color-lime);
}
.cta-btn__go .icon { width: 58%; height: 58%; }
.cta-btn:hover { filter: brightness(1.06); }
@media (prefers-reduced-motion: no-preference) {
  .cta-btn:hover { transform: translateY(-1px); }
}
.cta-btn[aria-disabled="true"] { cursor: default; }
.cta-btn:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 4px; }

.cta__note {
  margin-top: 0.75rem;
  font-size: var(--fs-lead);
  line-height: 1.35;
}
.cta--dark .cta-btn {
  border-color: #e6ff8a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 0 0 1px rgba(196, 255, 28, 0.9),
    0 0 18px rgba(196, 255, 28, 0.55),
    0 0 44px rgba(196, 255, 28, 0.25);
}
.cta--dark .cta-btn:focus-visible { outline-color: var(--color-text); }
.cta--dark .cta__note { color: var(--color-text); }
.cta--light .cta-btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 4px 0 rgba(11, 11, 11, 0.18), 0 8px 18px rgba(11, 11, 11, 0.14); }
.cta--light .cta__note,
.cta--orange .cta__note { color: var(--color-ink); }
.cta--orange .cta-btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 5px 0 rgba(11, 11, 11, 0.3), 0 10px 22px rgba(11, 11, 11, 0.25); }

/* celular: largura total; seta sempre na ponta direita */
@media (max-width: 37.4375em) {
  .cta-btn { display: flex; width: 100%; }
}

/* CTAs em colunas estreitas (depoimento, posicionamento): texto proporcional à coluna */
.depoimento__cta .cta-btn,
.posicionamento__text .cta-btn { font-size: clamp(1.125rem, 0.75rem + 1vw, 1.625rem); }

/* versão compacta do header */
.cta-btn--sm {
  min-height: 44px;
  gap: 0.6rem;
  padding: 0.3rem 0.3rem 0.3rem 0.7rem;
  font-size: 1.0625rem;
  border-width: 1.5px;
  border-color: #e6ff8a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 0 12px rgba(196, 255, 28, 0.35);
}
.cta-btn--sm .cta-btn__wa .icon { width: 1.4em; height: 1.4em; }
.cta-btn--sm .cta-btn__sep { margin-block: 0.3rem; width: 1.5px; }
.cta-btn--sm .cta-btn__go { width: 1.9em; height: 1.9em; border-radius: 6px; }
.cta-btn--sm:focus-visible { outline-color: var(--color-text); }

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

/* 8. Cards ----------------------------------------------------------------- */
.card {
  position: relative;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  background: var(--color-panel);
  border: 1px solid #3a3a3a;
  border-radius: var(--radius-card);
}
.card .accent-rule { width: 2rem; }

/* 9. Texturas e bordas decorativas ---------------------------------------- */
/* Borda de papel rasgado: aplicar na seção que "invade" a anterior.
   A cor vem de --edge-color (definida pelo tema da seção). */
.edge-top::before,
.edge-bottom::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  height: var(--edge-h);
  background-color: var(--edge-color, var(--color-paper));
  -webkit-mask: var(--torn-mask) repeat-x 0 0 / 360px 100%;
  mask: var(--torn-mask) repeat-x 0 0 / 360px 100%;
  pointer-events: none;
}
.edge-top::before { top: calc(var(--edge-h) * -1 + 1px); }
.edge-bottom::after {
  bottom: calc(var(--edge-h) * -1 + 1px);
  transform: scaleY(-1);
  -webkit-mask-position: 140px 0;
  mask-position: 140px 0;
}

/* Filete laranja irregular (faixa de promessa, transições) */
.rip {
  position: relative;
  height: var(--rip-h, 10px);
  color: var(--color-orange);
  pointer-events: none;
}
.rip::before,
.rip::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 60%;
  background: currentColor;
  -webkit-mask: var(--torn-mask) repeat-x 0 0 / 240px 100%;
  mask: var(--torn-mask) repeat-x 0 0 / 240px 100%;
}
.rip::before { top: 0; }
.rip::after {
  bottom: 0;
  transform: scaleY(-1);
  -webkit-mask-position: 90px 0;
  mask-position: 90px 0;
}

/* Brilho de fogo/luz laranja próximo às fotos */
.glow-fire {
  background-image:
    radial-gradient(60% 55% at 70% 45%, rgba(255, 87, 0, 0.38), transparent 70%),
    radial-gradient(40% 40% at 90% 80%, rgba(217, 67, 0, 0.3), transparent 70%);
}

/* Área reservada para foto original ausente: fundo neutro, sem simular pessoas */
.media-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: var(--ratio, 4 / 5);
  background:
    radial-gradient(70% 60% at 60% 40%, rgba(255, 87, 0, 0.18), transparent 70%),
    #121212;
  border: 1px dashed #333;
}

/* Imagens de prova e retratos */
.media { width: 100%; height: auto; }
.media--cover { height: 100%; object-fit: cover; }

/* Variações de tamanho de botão */
.btn--sm {
  min-height: 44px;
  padding: 0.55rem 1rem;
  font-size: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);
}
.btn--lg {
  min-height: 54px;
  font-size: clamp(1.125rem, 0.95rem + 0.7vw, 1.5rem);
}

/* 10. Header --------------------------------------------------------------- */
.site-header {
  /* sobreposto ao hero (não é fixo: rola com a página), fundo integrado à fumaça */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: transparent;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  flex: none;
  padding-block: 0.5rem;
}
.brand img {
  width: clamp(104px, 9vw + 70px, 142px);
}

.nav-toggle {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-right: -0.5rem;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--color-text);
  cursor: pointer;
}
.nav-toggle .icon { width: 28px; height: 28px; }
.nav-toggle__close,
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }
.no-js .nav-toggle { display: none; }

.site-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav__list a {
  display: flex;
  align-items: center;
  min-height: 48px;
  font-size: 1rem;
  text-decoration: none;
  transition: color 0.18s ease;
}
.site-nav__list a:hover { color: var(--color-orange); }

/* Celular: painel simples abaixo do header */
@media (max-width: 56.1875em) {
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 0.5rem var(--gutter) 1.5rem;
    background: var(--color-bg);
    border-top: 1px solid var(--color-line-soft);
    border-bottom: 2px solid var(--color-orange);
  }
  .js .site-nav { display: none; }
  .js .site-nav.is-open { display: block; }
  .site-nav__list li + li { border-top: 1px solid var(--color-line-soft); }
  .site-nav__cta { width: 100%; margin-top: 1rem; }
  /* sem JS, a navegação fica visível em fluxo normal */
  .no-js .site-nav { position: static; padding-inline: 0; border: 0; }
  .no-js .site-header { position: relative; background: var(--color-bg); }
  .no-js .hero__inner { padding-top: clamp(1.75rem, 1rem + 3vw, 2.75rem); }
  .no-js .site-header__inner { flex-wrap: wrap; }
}

@media (min-width: 56.25em) {
  :root { --header-h: 72px; }
  .nav-toggle { display: none; }
  .site-nav {
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--space-m);
  }
  .site-nav__list {
    display: flex;
    gap: clamp(1.5rem, 3.2vw, 2.5rem);
    margin-inline: auto;
  }
  .site-nav__list a { font-size: 0.9375rem; }
}

/* 11. Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  background-color: #040404;
  background-image:
    radial-gradient(40% 28% at 0% 100%, rgba(255, 87, 0, 0.16), transparent 70%),
    var(--grain-strong),
    var(--grain);
  background-size: auto, 220px, 180px;
}
/* Brilho laranja suave. O fogo "real" vem da própria foto; aqui só
   uma luz difusa que liga o retrato ao preto, sem manchas. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  /* celular: luz atrás do retrato, longe da copy */
  background: radial-gradient(70% 30% at 60% 78%, rgba(255, 87, 0, 0.22), transparent 70%);
  pointer-events: none;
}
@media (min-width: 56.25em) {
  .hero::before {
    background:
      radial-gradient(22% 55% at 54% 40%, rgba(255, 87, 0, 0.14), transparent 70%),
      radial-gradient(30% 30% at 88% 0%, rgba(255, 87, 0, 0.2), transparent 70%);
  }
}
.hero__inner {
  position: relative;
  z-index: 2;
  padding-top: calc(var(--header-h) + clamp(1rem, 0.6rem + 2vw, 1.75rem));
}
.hero__title { margin-bottom: var(--space-m); }
.hero__text { max-width: 30em; }


/* Celular: retrato abaixo da copy, largura total, fundido ao preto */
.hero__media {
  position: relative;
  z-index: 1;
  margin-top: var(--space-l);
  overflow: hidden;
}
.hero__media img {
  width: 100%;
  max-height: 32rem;
  object-fit: cover;
  object-position: 50% 0%;
}
.hero__media img {
  /* máscara de transparência: a fumaça do fundo aparece nas bordas do retrato */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 16%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 16%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 80%, transparent 100%);
  mask-composite: intersect;
}

@media (min-width: 37.5em) and (max-width: 56.1875em) {
  /* retrato alinhado à direita, sem ampliar demais o recorte provisório */
  .hero__media {
    width: min(100%, 34rem);
    margin: calc(var(--space-l) * -1) 0 0 auto;
  }
}

/* Desktop: copy à esquerda, retrato ocupando a metade direita até a base */
@media (min-width: 56.25em) {
  .hero__inner {
    min-height: calc(var(--header-h) + clamp(28rem, 44vw, 36rem));
    padding-top: calc(var(--header-h) + clamp(1.5rem, 3.5vw, 2.75rem));
    padding-bottom: clamp(1.25rem, 2vw, 2rem);
    display: flex;
    align-items: flex-start;
  }
  .hero__copy { max-width: min(60%, 46rem); }
  .hero__text { max-width: 26em; }
  /* O retrato começa na metade do container (onde a copy termina) e
     sangra até a borda direita da tela — o vão entre texto e foto
     fica constante em qualquer monitor. */
  .hero__media {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(max(var(--gutter), (100% - var(--container-max)) / 2)
          + min(100% - 2 * var(--gutter), var(--container-max)) / 2);
    right: 0;
    width: auto;
    margin: 0;
  }
  .hero__media img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-position: 25% 0%;
  }
  /* máscara larga e suave à esquerda: a foto se dissolve no preto, sem emenda */
  .hero__media img {
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.35) 8%, rgba(0, 0, 0, 0.8) 16%, #000 24%),
      linear-gradient(to bottom, #000 0%, #000 90%, transparent 100%);
    mask-image:
      linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.35) 8%, rgba(0, 0, 0, 0.8) 16%, #000 24%),
      linear-gradient(to bottom, #000 0%, #000 90%, transparent 100%);
  }
}

/* Monitores muito largos: a foto para de crescer e também se dissolve à direita */
@media (min-width: 120em) {
  .hero__media { right: max(0px, (100% - 1920px) / 2); }
  .hero__media img {
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.35) 8%, rgba(0, 0, 0, 0.8) 16%, #000 24%, #000 72%, rgba(0, 0, 0, 0.4) 88%, transparent 100%),
      linear-gradient(to bottom, #000 0%, #000 90%, transparent 100%);
    mask-image:
      linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.35) 8%, rgba(0, 0, 0, 0.8) 16%, #000 24%, #000 72%, rgba(0, 0, 0, 0.4) 88%, transparent 100%),
      linear-gradient(to bottom, #000 0%, #000 90%, transparent 100%);
  }
}

/* 12. Faixa de promessa ---------------------------------------------------- */
.promessa {
  --rip-h: 12px;
  background: var(--color-bg);
}
.promessa__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding-block: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}
.promessa__icon {
  width: clamp(2.75rem, 2.2rem + 2vw, 3.75rem);
  height: clamp(2.75rem, 2.2rem + 2vw, 3.75rem);
  flex: none;
  color: var(--color-orange);
}
.promessa__text {
  font-weight: 700;
  font-size: clamp(1.0625rem, 0.95rem + 0.55vw, 1.3125rem);
  line-height: 1.35;
}
@media (min-width: 37.5em) {
  .promessa__inner {
    flex-direction: row;
    align-items: center;
    gap: 0;
  }
  .promessa__icon {
    box-sizing: content-box;
    padding-right: clamp(1.25rem, 3vw, 2.25rem);
    margin-right: clamp(1.25rem, 3vw, 2.25rem);
    border-right: 1px solid var(--color-line);
  }
}

/* 13. Depoimento inicial --------------------------------------------------- */
.depoimento { padding-block: clamp(2rem, 1.2rem + 3vw, 3rem); }
.depoimento__grid {
  display: grid;
  gap: var(--space-l);
  align-items: center;
}
.depoimento__media img {
  width: 100%;
  border-radius: 8px;
}
.depoimento__quote { max-width: 26rem; }
.depoimento__text {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 1.3rem + 2vw, 2.75rem);
  line-height: 1.08;
}
.depoimento__mark {
  display: block;
  color: var(--color-orange);
  font-size: 2.2em;
  line-height: 0.6;
  height: 0.45em;
  margin-bottom: 0.25em;
}
.depoimento__mark--close {
  display: inline-block;
  height: auto;
  margin: 0 0 0 0.12em;
  font-size: 1.8em;
  line-height: 0;
  vertical-align: -0.42em;
}
.depoimento__quote .accent-rule { margin-block: var(--space-m) var(--space-s); }
.depoimento__caption {
  font-size: var(--fs-lead);
  line-height: 1.35;
  color: var(--color-text-soft);
}

@media (min-width: 56.25em) {
  .depoimento__cta { grid-column: 2; margin-top: 0; }
  .depoimento__grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: clamp(2rem, 5vw, 4rem);
  }
}

/* 14. Dor ------------------------------------------------------------------ */
.dor { padding-block: clamp(3rem, 2rem + 3.5vw, 4.5rem) clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.dor__title { margin-bottom: var(--space-m); }
.dor__title-a,
.dor__title-b { display: block; }
.dor__title-a { font-size: var(--fs-display-l); }
.dor__title-b { font-size: clamp(1.75rem, 0.6rem + 3vw, 3.125rem); }
.dor__lead { max-width: 24em; }

.dor__list {
  display: grid;
  gap: 1rem;
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.35;
}
.dor__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}
.dor__x {
  width: 1.5rem;
  height: 1.5rem;
  margin-top: -0.05rem;
  color: var(--color-orange);
}

.dor__top { gap: var(--space-l); }
.dor__bottom { gap: var(--space-m); font-size: var(--fs-lead); line-height: 1.4; }
.dor__bottom strong { font-weight: 700; }

/* Celular: divisória vertical vira separação horizontal */
@media (max-width: 56.1875em) {
  .dor__list {
    padding-top: var(--space-l);
    border-top: 1px solid var(--rule-color);
  }
  .dor__bottom > * + * {
    padding-top: var(--space-m);
    border-top: 1px solid var(--rule-color);
  }
}
@media (min-width: 56.25em) {
  .dor__top { align-items: center; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
  .dor__top > :first-child { padding-right: clamp(1.5rem, 1rem + 1.5vw, 2rem); }
  .dor__list { padding-left: clamp(1.5rem, 1rem + 1.5vw, 2rem); }
  .dor__divider { margin-block: var(--space-l); }
}

/* Faixa laranja irregular entre a dor (ref 01) e a solução (ref 02) */
.band-orange {
  position: relative;
  height: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem);
  background-color: var(--color-orange);
  background-image:
    radial-gradient(35% 120% at 20% 60%, rgba(160, 40, 0, 0.35), transparent 70%),
    radial-gradient(30% 140% at 75% 40%, rgba(255, 140, 40, 0.35), transparent 70%),
    var(--grain);
  background-size: auto, auto, 180px;
  --edge-color: var(--color-orange);
  pointer-events: none;
}
.band-orange::before,
.band-orange::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  height: var(--edge-h);
  -webkit-mask: var(--torn-mask) repeat-x 0 0 / 360px 100%;
  mask: var(--torn-mask) repeat-x 0 0 / 360px 100%;
}
/* borda superior: o papel da seção anterior "rasga" sobre o laranja */
.band-orange::before {
  top: -1px;
  background: var(--color-paper);
  transform: scaleY(-1);
}
/* borda inferior: o preto da próxima seção "rasga" sobre o laranja */
.band-orange::after {
  bottom: -1px;
  background: var(--color-bg);
  -webkit-mask-position: 170px 0;
  mask-position: 170px 0;
}

/* Filete laranja rasgado entre papel (acima) e preto (abaixo) */
.rip--paper-dark {
  --rip-h: 14px;
  background: linear-gradient(to bottom, var(--color-paper) 50%, var(--color-bg) 50%);
}

/* 15. Solução / Projeto 60D ------------------------------------------------ */
.solucao { padding-block: clamp(2rem, 1.4rem + 2vw, 2.75rem) clamp(2.25rem, 1.6rem + 2vw, 3rem); }
.solucao__title {
  /* a 3ª linha mede 15,15em em Anton: ~60 px em 1024 e 78 px em 1440 cabem no container */
  font-size: clamp(2.25rem, 0.2rem + 5.55vw, 4.875rem);
  margin-bottom: var(--space-m);
}
.solucao__intro { color: var(--color-text); }
.solucao__intro > * { max-width: 27em; }

.como-funciona { margin-top: var(--space-m); }
.passos {
  display: grid;
  gap: var(--space-s);
  margin: 0;
  padding: 0;
  list-style: none;
}
.passo {
  border-color: #474747;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}
.passo__num {
  display: block;
  margin-bottom: 0.9rem;
  color: var(--color-orange);
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 2.8rem + 2vw, 4.75rem);
  line-height: 0.85;
}
.passo__title {
  margin-bottom: 1.1rem;
  font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem);
}
.passo .accent-rule { margin-bottom: 1.1rem; }
.passo p {
  font-size: 1rem;
  line-height: 1.45;
  color: var(--color-text-soft);
}
/* tablet: número à esquerda, conteúdo à direita (evita cards largos e vazios) */
@media (min-width: 37.5em) and (max-width: 56.1875em) {
  .passo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
  }
  .passo__num { margin-bottom: 0; min-width: 2.2ch; }
}
@media (min-width: 56.25em) {
  .passos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-s); }
}

/* 16. Benefícios ----------------------------------------------------------- */
.beneficios { padding-block: clamp(1.5rem, 1rem + 1.2vw, 1.875rem) clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.beneficios__title {
  font-size: var(--fs-display-l);
  margin-bottom: var(--space-m);
}
.beneficios__grid {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.beneficio {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: clamp(1rem, 0.8rem + 1vw, 1.75rem);
  padding-block: 1.1rem;
}
.beneficio + .beneficio { border-top: 1px solid var(--rule-color); }
.beneficio__title {
  margin-bottom: 0.3rem;
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.3125rem);
}
.beneficio p {
  font-size: 1rem;
  line-height: 1.4;
  color: var(--color-ink-soft);
}

@media (min-width: 56.25em) {
  .beneficios__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 3rem;
  }
  /* linhas horizontais separadas por coluna: só a partir da 2ª linha */
  .beneficio + .beneficio { border-top: 0; }
  .beneficio:nth-child(n + 3) { border-top: 1px solid var(--rule-color); }
  /* linha vertical curta entre as colunas, com folga em cima e embaixo */
  .beneficio:nth-child(even)::before {
    content: "";
    position: absolute;
    top: 1rem;
    bottom: 1rem;
    left: -1.5rem;
    border-left: 1px solid var(--rule-color);
  }
}

/* 17. Faixa de estratégia e posicionamento -------------------------------- */
.posicionamento {
  position: relative;
  background-color: var(--color-bg);
  background-image:
    linear-gradient(to bottom, rgba(255, 87, 0, 0.18), transparent 3.5rem),
    radial-gradient(35% 90% at 100% 0%, rgba(255, 87, 0, 0.22), transparent 70%),
    var(--grain-strong);
  background-size: auto, auto, 220px;
  color: var(--color-text);
}
/* fogo real recortado da foto oficial, só no extremo direito */
.posicionamento__fire {
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(130px, 24vw, 380px);
  height: 100%;
  background: url("../assets/images/fogo-borda.jpg") right top / cover no-repeat;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 60%),
    linear-gradient(to bottom, #000 70%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 60%),
    linear-gradient(to bottom, #000 70%, transparent 100%);
  mask-composite: intersect;
  opacity: 0.55;
  pointer-events: none;
}
.posicionamento__inner {
  position: relative;
  z-index: 1;
  gap: var(--space-m);
  padding-block: clamp(1.75rem, 1.2rem + 2vw, 2.5rem) clamp(2.5rem, 1.5rem + 3vw, 3.75rem);
}
.posicionamento__title {
  /* "CONDUZEM A EXECUÇÃO." (9,81em) em uma linha na coluna esquerda */
  font-size: clamp(2rem, 0.1rem + 4.2vw, 3.625rem);
}
.posicionamento__title > span { display: block; }
.posicionamento__text {
  font-size: 1rem;
  line-height: 1.4;
  color: var(--color-text-soft);
  max-width: 32em;
}
@media (min-width: 56.25em) {
  .posicionamento__fire { opacity: 1; }
  .posicionamento__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
  }
  /* o texto não invade a área do fogo */
  .posicionamento__text { padding-right: clamp(1rem, 4vw, 4rem); }
}

/* 18. Primeiro passo / #escopo -------------------------------------------- */
.escopo { padding-block: clamp(2.5rem, 1.8rem + 2.5vw, 3.5rem) 0; }
.escopo__title {
  /* "ENTENDER O SEU CENÁRIO." = 9,42em em Anton: ~87 px em 1024 */
  font-size: clamp(2.5rem, 0.6rem + 7.6vw, 5.5rem);
  margin-bottom: var(--space-m);
}
.escopo__intro {
  max-width: 38em;
  font-size: var(--fs-lead);
  line-height: 1.4;
}

/* 19. Núcleo do Projeto 60D ------------------------------------------------ */
.nucleo {
  /* position + padding-top: o acento de "NÚCLEO" ultrapassa a caixa do título e
     ficava escondido sob o fundo da seção anterior (posicionada) */
  position: relative;
  padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.25rem) clamp(3rem, 2rem + 3vw, 4.5rem);
}
.nucleo__title {
  /* "O NÚCLEO DO PROJETO 60D" = 9,82em: ~60 px em 1024 */
  font-size: clamp(2rem, 0.4rem + 5.2vw, 4.25rem);
  margin-bottom: var(--space-m);
}
.nucleo__grid {
  display: grid;
  gap: var(--space-s);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 48em) {
  .nucleo__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.nucleo-card {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  column-gap: clamp(0.9rem, 0.7rem + 0.8vw, 1.4rem);
  padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem);
  border-color: #474747;
}
.nucleo-card__icon {
  grid-column: 1;
  grid-row: 1;
  width: 3rem;
  height: 3rem;
  color: var(--color-orange);
}
.nucleo-card__body {
  grid-column: 2;
  grid-row: 1 / 3;
}
.nucleo-card__title {
  margin-bottom: 0.45rem;
  font-size: clamp(1.1875rem, 1rem + 0.6vw, 1.5rem);
}
.nucleo-card p {
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  line-height: 1.45;
  color: var(--color-text-soft);
}
/* traço laranja no canto inferior esquerdo, sob o ícone */
.nucleo-card__rule {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  width: 1.75rem;
  margin-top: 1.25rem;
}

/* 20. Conforme a solução contratada --------------------------------------- */
.contratada { padding-block: clamp(2.25rem, 1.6rem + 2vw, 3rem) clamp(2.5rem, 1.8rem + 2.5vw, 3.5rem); }
.contratada__heading {
  /* "CONFORME A SOLUÇÃO CONTRATADA." = 13,31em: ~60 px em 1024 */
  font-size: clamp(2rem, 0.4rem + 5.2vw, 4.25rem);
  margin-bottom: var(--space-m);
}
.contratada__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}
.contratada__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 0.6rem + 1.5vw, 2rem);
  padding-block: 1.1rem;
}
.contratada__item + .contratada__item { border-top: 1px solid var(--rule-color); }
/* divisor vertical fino entre o ícone e o texto */
.contratada__body {
  padding-left: clamp(1rem, 0.6rem + 1.5vw, 2rem);
  border-left: 1px solid var(--rule-color);
}
.contratada__title {
  margin-bottom: 0.25rem;
  font-size: clamp(1.3125rem, 1.05rem + 0.9vw, 1.75rem);
}
.contratada__body p {
  max-width: 34em;
  font-size: var(--fs-lead);
  line-height: 1.4;
  color: var(--color-ink-soft);
}
.contratada__aviso {
  max-width: 26em;
  margin-top: var(--space-m);
  font-weight: 700;
  font-size: clamp(1.3rem, 0.9rem + 1.4vw, 1.875rem);
  line-height: 1.25;
  color: var(--color-ink);
}
.contratada__rule {
  width: clamp(6rem, 4rem + 6vw, 9.5rem);
  height: 4px;
  margin-top: var(--space-s);
}

/* 21. Faixa laranja de CTA ------------------------------------------------- */
.cta-faixa {
  position: relative;
  padding-block: clamp(2rem, 1.5rem + 2vw, 2.75rem);
}

/* 22. Resultados ---------------------------------------------------------- */
.resultados {
  padding-block: clamp(2rem, 1.4rem + 2vw, 2.75rem) calc(var(--edge-h) + clamp(1.25rem, 1rem + 1vw, 1.75rem));
}
.resultados__head {
  display: grid;
  gap: var(--space-s);
  margin-bottom: var(--space-m);
}
.resultados__title {
  /* "PERCEBERAM NA PRÁTICA." = 9,53em: ~68 px em 1024 cabe em ~75% do container */
  font-size: clamp(2.25rem, 0.3rem + 6.2vw, 5.25rem);
}
.resultados__apoio p {
  font-size: var(--fs-lead);
  line-height: 1.35;
  max-width: 22em;
}
.resultados__apoio .accent-rule { margin-top: var(--space-s); }
@media (min-width: 56.25em) {
  .resultados__head {
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    align-items: end;
    column-gap: 2rem;
  }
  .resultados__apoio { padding-bottom: 0.4rem; }
}

.provas {
  display: grid;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* desktop: 2 cards · 1 largura total · 2 cards (inferior esquerdo mais largo) */
@media (min-width: 56.25em) {
  .provas { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .prova--citacao,
  .prova--seguidores { grid-column: span 6; }
  .prova--largo { grid-column: 1 / -1; }
  .prova--alcance { grid-column: span 7; }
  .prova--registro { grid-column: span 5; }
}
.prova {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(0.9rem, 0.7rem + 0.7vw, 1.25rem);
  border-color: #474747;
  border-radius: 4px;
}
.prova > * + * { margin-top: 0.85rem; }
.prova__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1rem + 1.4vw, 2.125rem);
  line-height: 0.98;
  text-transform: uppercase;
}
.prova__title .line { display: block; }
.prova .accent-rule { width: 2.25rem; }
.prova__legenda,
.prova__nota {
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--color-text-soft);
}
.prova__destaque {
  font-weight: 700;
  font-size: clamp(0.9375rem, 0.85rem + 0.35vw, 1.125rem);
  line-height: 1.35;
}
.prova__destaque strong { font-weight: 700; }
.prova--registro .prova__destaque { font-weight: 400; }
.prova .accent-rule + p { margin-top: 0.6rem; }
@media (min-width: 56.25em) {
  .quebra { display: block; }
}

/* Card 1: aspas grandes e citação */
.prova__citacao {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
  margin-top: 1.25rem;
}
.prova__aspas {
  color: var(--color-orange);
  font-family: var(--font-display);
  /* a aspa da Anton é pequena em relação ao corpo: tamanho maior para chegar ao peso do mockup */
  font-size: clamp(6.5rem, 5rem + 4vw, 9.5rem);
  line-height: 0.78;
  height: 0.5em;
}
.prova__quote p {
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem);
  line-height: 1.25;
}
.prova__citacao .accent-rule { display: block; margin-block: 1.1rem 0.75rem; }

/* Capturas: imagem real, sem cortar dados; nunca maior que o tamanho do recorte */
.prova__zoom {
  position: relative;
  display: block;
  width: 100%;
  border-radius: 4px;
  line-height: 0;
}
.prova__zoom img { width: 100%; height: auto; border-radius: 4px; }
.prova--seguidores .prova__zoom { max-width: 438px; }
.prova--largo .prova__zoom { max-width: 575px; }
.prova--alcance .prova__zoom { max-width: 480px; }
.prova--registro .prova__zoom { max-width: 390px; }
.prova__ampliar {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(8, 8, 8, 0.72);
  color: var(--color-text);
  transition: background-color 0.18s ease;
}
.prova__ampliar .icon { width: 1.1rem; height: 1.1rem; }
.prova__zoom:hover .prova__ampliar,
.prova__zoom:focus-visible .prova__ampliar { background: var(--color-orange); color: var(--color-ink); }

/* Card 3: captura larga | texto explicativo */
.prova--largo { align-items: stretch; }
.prova__split {
  display: grid;
  gap: 0.85rem;
}
.prova__lateral .accent-rule { display: block; margin-bottom: 0.6rem; }
@media (min-width: 48em) {
  .prova__split {
    grid-template-columns: minmax(0, 575px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  }
  .prova__lateral { max-width: 20rem; }
}

/* Diálogo de ampliação */
.prova-dialog {
  width: min(94vw, 62rem);
  max-width: none;
  max-height: 90vh;
  padding: 0;
  border: 1px solid #474747;
  border-radius: 4px;
  background: var(--color-panel);
  color: var(--color-text);
}
.prova-dialog::backdrop { background: rgba(0, 0, 0, 0.82); }
.prova-dialog__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.75rem 0.5rem 1rem;
  border-bottom: 1px solid var(--color-line-soft);
}
.prova-dialog__titulo {
  font-family: var(--font-condensed);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.prova-dialog__fechar {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0 0.9rem;
  background: transparent;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  font-family: var(--font-condensed);
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}
.prova-dialog__fechar:hover { border-color: var(--color-orange); color: var(--color-orange); }
.prova-dialog__body {
  max-height: calc(90vh - 4rem);
  padding: 1rem;
  overflow: auto;
}
/* tamanho natural do recorte; se for maior que a tela, rola dentro do diálogo */
.prova-dialog__img {
  width: auto;
  max-width: none;
  height: auto;
  margin-inline: auto;
}

/* 23. Faixa laranja de aviso ---------------------------------------------- */
.aviso-faixa {
  position: relative;
  z-index: 1;
  padding-block: clamp(0.75rem, 0.6rem + 0.6vw, 1rem);
}
.aviso-faixa__texto {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  line-height: 1.3;
  color: var(--color-ink);
}

/* 24. Quem está por trás / #sobre ----------------------------------------- */
.sobre {
  position: relative;
  padding-block: calc(var(--edge-h) + clamp(1rem, 0.8rem + 1vw, 1.5rem)) 0;
  overflow: clip;
}
.sobre__copy { position: relative; z-index: 1; }
.sobre__title {
  /* "QUEM ESTÁ POR TRÁS" = 7,82em: ~58 px em 1024 */
  font-size: clamp(2.25rem, 0.3rem + 5.2vw, 4.5rem);
  margin-bottom: var(--space-s);
}
.sobre__title-text { display: block; }
.sobre__logo {
  width: clamp(110px, 8vw + 70px, 150px);
  margin-top: 0.35em;
}
.sobre__text {
  max-width: 30em;
  line-height: 1.35;
  color: var(--color-ink);
}
.sobre__text > * + * { margin-top: 0.6em; }

/* celular: retrato abaixo do texto e do CTA, fundido ao papel no topo */
.sobre__media { margin-top: var(--space-l); }
.sobre__media img {
  width: 100%;
  max-height: 30rem;
  object-fit: cover;
  object-position: 50% 12%;
  /* esmaece em cima e embaixo: a ref 05 (FAQ) continua em papel */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 80%, transparent 100%);
}

@media (min-width: 56.25em) {
  .sobre {
    min-height: clamp(24rem, 36vw, 32rem);
    padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
  }
  .sobre__copy { max-width: 52%; }
  /* mesma técnica do hero: começa na metade do container e sangra até a borda */
  .sobre__media {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(max(var(--gutter), (100% - var(--container-max)) / 2)
          + min(100% - 2 * var(--gutter), var(--container-max)) / 2);
    right: 0;
    margin: 0;
  }
  .sobre__media img {
    height: 100%;
    max-height: none;
    object-position: 30% 14%;
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.5) 12%, #000 28%),
      linear-gradient(to bottom, transparent 0%, #000 14%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.5) 12%, #000 28%),
      linear-gradient(to bottom, transparent 0%, #000 14%);
    mask-composite: intersect;
  }
}

/* 25. FAQ / #duvidas ------------------------------------------------------- */
.duvidas {
  position: relative;
  padding-block: clamp(1.25rem, 1rem + 1vw, 1.75rem) calc(var(--edge-h) + clamp(1.25rem, 1rem + 1vw, 1.75rem));
}
.duvidas__title {
  /* "DÚVIDAS? VAMOS CONVERSAR." = 11,16em: ~81 px em 1024 */
  font-size: clamp(2.25rem, 0.2rem + 7.7vw, 6.25rem);
  margin-bottom: var(--space-s);
}
.faq__item { border-bottom: 1px solid var(--rule-color); }
.faq__item:last-child { border-bottom: 0; }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 44px;
  padding-block: 0.9rem 0.3rem;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: clamp(1.125rem, 0.9rem + 0.8vw, 1.5rem);
  line-height: 1.2;
  color: var(--color-ink);
  list-style: none;
  cursor: pointer;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__q:hover .faq__q-text { text-decoration: underline; text-decoration-color: var(--color-orange); text-underline-offset: 0.2em; }
/* sinal: "−" aberto, "+" fechado (decorativo) */
.faq__sinal {
  position: relative;
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
}
.faq__sinal::before,
.faq__sinal::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  background: var(--color-orange);
}
.faq__sinal::after { transform: rotate(90deg); transition: transform 0.18s ease; }
.faq__item[open] .faq__sinal::after { transform: rotate(0deg); }
.faq__a {
  max-width: 47em;
  padding-bottom: 1.1rem;
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--color-ink);
}

/* 26. CTA final / #contato ------------------------------------------------- */
.cta-final {
  position: relative;
  z-index: 1;
  padding-block: clamp(1.75rem, 1.2rem + 2vw, 2.75rem) clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
}
.cta-final__title {
  /* "COM ESTRATÉGIA E POSICIONAMENTO." = 13,63em: ~66 px em 1024 (928 px de container) */
  font-size: clamp(2.125rem, 0.2rem + 6.15vw, 5.25rem);
  color: var(--color-ink);
}
.cta-final__sub {
  margin-top: 0.4em;
  font-size: clamp(1.1875rem, 0.9rem + 1.2vw, 1.875rem);
  line-height: 1.3;
  color: var(--color-ink);
}

/* 27. Rodapé --------------------------------------------------------------- */
.site-footer {
  background-color: var(--color-bg);
  background-image: var(--grain-strong);
  background-size: 220px;
  color: var(--color-text);
  padding-block: calc(var(--edge-h) + clamp(1.25rem, 1rem + 1vw, 1.75rem)) clamp(1.5rem, 1rem + 1.5vw, 2rem);
}
.site-footer__top {
  display: grid;
  gap: var(--space-l);
  padding-bottom: var(--space-m);
}
.site-footer__logo { width: clamp(140px, 10vw + 75px, 190px); }
.site-footer__name {
  margin-top: 0.75rem;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
}
.site-footer__info {
  margin-top: 0.6rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--color-text-soft);
}
@media (min-width: 48em) {
  .site-footer__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 22.5rem);
    align-items: start;
  }
}

.local-card {
  padding: 1rem 1.5rem 1.25rem;
  border: 1px solid #5a5a5a;
  border-radius: 4px;
  background: var(--color-panel);
}
.local-card__title {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.2;
}
.local-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 0.4rem;
}
.local-card__pin { width: 3.25rem; height: 3.25rem; color: var(--color-orange); }
.local-card__city {
  margin-top: 0.4rem;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 1.125rem;
}
.local-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  color: var(--color-orange);
  font-size: 1rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.local-card__link .icon { width: 1.1em; height: 1.1em; }
/* inativo enquanto não houver mapsUrl: mantém o visual da referência, sem parecer clicável */
.local-card__link[aria-disabled="true"] { cursor: default; }

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: var(--space-s);
  border-top: 1px solid var(--color-line);
  font-size: 0.875rem;
  color: var(--color-text-soft);
}
.site-footer__privacy {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-text-soft);
  text-decoration: none;
}
a.site-footer__privacy[href]:hover { color: var(--color-orange); text-decoration: underline; }
.site-footer__privacy[aria-disabled="true"] { cursor: default; }
@media (min-width: 37.5em) {
  .site-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .site-footer__privacy {
    position: relative;
    padding-left: clamp(1.5rem, 1rem + 3vw, 2.25rem);
  }
  /* divisor vertical curto antes da política */
  .site-footer__privacy::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    height: 1.5rem;
    margin-top: -0.75rem;
    border-left: 1px solid var(--color-line);
  }
}

/* 28. Página legal (privacidade.html) -------------------------------------- */
.legal-header {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line-soft);
}
.legal-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: var(--header-h);
}
.legal-header__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text);
}
.legal-header__back:hover { color: var(--color-orange); }
.legal {
  padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
}
.legal__inner { max-width: 46rem; }
.legal__title {
  font-size: var(--fs-display-m);
  margin-bottom: var(--space-m);
}
.legal__subtitle {
  margin-top: var(--space-l);
  margin-bottom: 0.5rem;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem);
  line-height: 1.2;
}
.legal p,
.legal li {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-ink);
}
.legal p + p,
.legal p + ul,
.legal ul + p { margin-top: 1em; }
.legal ul {
  margin-block: 1em 0;
  padding-left: 1.25rem;
}
.legal li + li { margin-top: 0.6em; }
.legal li::marker { color: var(--color-orange); }
.legal a {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
.legal a:hover { color: var(--color-orange-deep); }
.site-footer--legal { padding-top: var(--space-m); }
.site-footer--legal .site-footer__bottom { margin-top: 0; }