/**
 * Mega Radar de Ofertas Online — estilos da página
 * Story MRO-1 · T5 (@dev) · Spec: docs/design-direction.md §5–§9
 *
 * Importado DEPOIS de tokens.css. Consome só tokens ALIAS/COMPONENTE (--mro-*).
 * Mobile-first. Breakpoints: 37.5em (600px) · 48em (768px) · 60em (960px).
 * Toda animação/transição fica dentro de @media (prefers-reduced-motion: no-preference) — ver fim do arquivo.
 */

/* ===== 1. BASE ===== */

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

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

body {
  margin: 0;
  background: var(--mro-color-bg);
  color: var(--mro-color-text);
  font-family: var(--mro-font-body);
  font-size: var(--mro-fs-body);
  line-height: var(--mro-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
p,
ul,
ol {
  margin: 0;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
}

::selection {
  background: var(--mro-color-selection-bg);
  color: var(--mro-color-selection-fg);
}

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

.hl {
  color: var(--mro-color-highlight);
}

.icon {
  flex: none;
  width: var(--mro-icon-sm);
  height: var(--mro-icon-sm);
}

/* Sprite de ícones: fora do fluxo, mas referenciável por <use> */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Skip-link: invisível até receber foco pelo teclado */
.skip-link {
  position: absolute;
  top: var(--mro-space-2);
  left: var(--mro-space-4);
  z-index: var(--mro-z-sticky);
  display: inline-flex;
  align-items: center;
  min-height: var(--mro-tap-min);
  padding: var(--mro-space-2) var(--mro-space-4);
  border: var(--mro-border-w) solid var(--mro-color-border-accent);
  border-radius: var(--mro-radius-sm);
  background: var(--mro-color-surface);
  color: var(--mro-color-text);
  font-weight: var(--mro-fw-semibold);
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* ===== 2. LAYOUT ===== */

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

.container--narrow {
  width: min(100% - 2 * var(--mro-gutter), var(--mro-container-narrow));
}

.section {
  padding-block: var(--mro-section-y);
}

.section--alt {
  background: var(--mro-color-bg-alt);
}

.section-head {
  margin-bottom: var(--mro-section-head);
  text-align: center;
}

.section-title {
  font-family: var(--mro-font-display);
  font-size: var(--mro-fs-h2);
  font-weight: var(--mro-fw-black);
  line-height: var(--mro-lh-heading);
  letter-spacing: var(--mro-ls-heading);
  text-transform: uppercase;
  text-wrap: balance;
}

.section-title__line {
  display: block;
}

/* ===== 3. BOTÃO CTA WHATSAPP (.btn-whatsapp) — design-direction §5.0 ===== */

.btn-whatsapp {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mro-btn-gap);
  width: 100%;
  max-width: var(--mro-btn-max-w);
  min-height: var(--mro-btn-h);
  padding: 0 var(--mro-btn-px);
  border: var(--mro-border-w-strong) solid transparent; /* fica visível em forced-colors */
  border-radius: var(--mro-btn-radius);
  background: var(--mro-btn-bg);
  color: var(--mro-btn-fg);
  box-shadow: var(--mro-btn-shadow);
  font-family: var(--mro-font-display);
  font-size: var(--mro-fs-btn);
  font-weight: var(--mro-fw-black);
  line-height: var(--mro-lh-snug);
  letter-spacing: var(--mro-ls-btn);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.btn-whatsapp:visited {
  color: var(--mro-btn-fg);
}

.btn-whatsapp .icon {
  width: var(--mro-icon-lg);
  height: var(--mro-icon-lg);
}

.btn-whatsapp--lg {
  min-height: var(--mro-btn-h-lg);
  font-size: var(--mro-fs-btn-lg);
}

/* Anel do pulso (animação no bloco de movimento, no fim do arquivo) */
.btn-whatsapp--pulse::after {
  content: "";
  position: absolute;
  inset: calc(var(--mro-border-w-strong) * -1);
  border: var(--mro-border-w-strong) solid var(--mro-btn-pulse-color);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}

@media (hover: hover) {
  .btn-whatsapp:hover {
    background: var(--mro-btn-bg-hover);
    box-shadow: var(--mro-btn-shadow-hover);
    transform: translateY(var(--mro-hover-lift));
  }
}

.btn-whatsapp:focus-visible {
  outline: var(--mro-focus-ring);
  outline-offset: var(--mro-focus-offset); /* respiro escuro entre volt e verde (regra 5) */
  box-shadow: var(--mro-btn-shadow-hover);
}

.btn-whatsapp:active {
  background: var(--mro-btn-bg-active);
  transform: scale(var(--mro-press-scale));
}

/* Enquanto WHATSAPP_URL for placeholder, o JS marca aria-disabled e bloqueia o clique */
.btn-whatsapp[aria-disabled="true"] {
  cursor: not-allowed;
}

.microcopy {
  display: inline-flex;
  align-items: center;
  gap: var(--mro-space-2);
  margin-top: var(--mro-space-3);
  color: var(--mro-color-text-2);
  font-size: var(--mro-fs-small);
}

.microcopy .icon {
  color: var(--mro-color-highlight);
}

/* ===== 4. HEADER: barra de urgência + wordmark — §5.1 ===== */

.urgency-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mro-space-2);
  min-height: var(--mro-urgency-min-h);
  padding: var(--mro-space-2) var(--mro-gutter);
  background: var(--mro-urgency-bg);
  color: var(--mro-urgency-fg);
  font-family: var(--mro-font-display);
  font-size: var(--mro-urgency-fs);
  font-weight: var(--mro-fw-bold);
  line-height: var(--mro-lh-snug);
  letter-spacing: var(--mro-ls-label);
  text-align: center;
  text-transform: uppercase;
}

.brand-row {
  display: flex;
  justify-content: center;
  padding-top: var(--mro-space-4);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--mro-space-2);
  font-family: var(--mro-font-display);
  font-size: var(--mro-wordmark-fs);
  line-height: 1;
  letter-spacing: var(--mro-ls-heading);
  text-transform: uppercase;
  white-space: nowrap;
}

.wordmark .icon {
  width: var(--mro-icon-md);
  height: var(--mro-icon-md);
  color: var(--mro-color-highlight);
}

.wordmark__main {
  font-weight: var(--mro-fw-black);
}

.wordmark__accent {
  color: var(--mro-color-highlight);
  font-weight: var(--mro-fw-bold);
}

/* ===== 5. HERO — §5.2 e §6 ===== */

.hero {
  position: relative;
  overflow: hidden;
  padding-top: var(--mro-space-2); /* 8px no mobile (era 12px): QA REQ-001; desktop sobrescreve para 48px */
  padding-bottom: var(--mro-section-y);
  background: var(--mro-gradient-hero), var(--mro-color-bg);
}

.hero__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mro-hero-gap);
  text-align: center;
}

/* Mídia: disco do radar + foto circular + selo + badge (lado = --mro-hero-media, sem CLS) */
.hero__media {
  position: relative;
  flex: none;
  width: var(--mro-hero-media);
  aspect-ratio: 1;
}

.radar,
.radar__disc,
.radar__sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.radar__disc {
  border: var(--mro-border-w) solid var(--mro-volt-a12);
  background: var(--mro-gradient-radar-rings), var(--mro-gradient-crosshair), var(--mro-color-bg-alt);
}

.radar__sweep {
  background: var(--mro-gradient-sweep);
}

.radar__blip {
  position: absolute;
  width: var(--mro-blip-size);
  height: var(--mro-blip-size);
  margin: calc(var(--mro-blip-size) / -2) 0 0 calc(var(--mro-blip-size) / -2);
  border-radius: 50%;
  background: var(--mro-color-highlight);
  box-shadow: var(--mro-glow-blip);
}

.radar__blip::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--mro-border-w) solid var(--mro-color-highlight);
  border-radius: 50%;
  opacity: 0;
}

/* Ângulos 35°, 160° e 290° no anel externo (§6.1) */
.radar__blip--1 { top: 11.9%; left: 76.7%; }
.radar__blip--2 { top: 93.7%; left: 65.9%; }
.radar__blip--3 { top: 34.1%; left: 6.3%; }

.hero__photo {
  position: absolute;
  inset: calc((100% - var(--mro-hero-photo-scale)) / 2);
  z-index: var(--mro-z-raised);
  overflow: hidden;
  border: var(--mro-ring-w) solid var(--mro-color-highlight);
  border-radius: 50%;
  background: var(--mro-color-bg-alt);
  box-shadow: var(--mro-glow-hero-ring);
}

.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__seal {
  position: absolute;
  top: 6%;
  left: 2%;
  z-index: var(--mro-z-badge);
  padding: calc(var(--mro-space-1) * 1.5) var(--mro-space-3);
  border-radius: var(--mro-radius-xs);
  background: var(--mro-seal-bg);
  color: var(--mro-seal-fg);
  box-shadow: var(--mro-shadow-badge);
  font-family: var(--mro-font-display);
  font-size: var(--mro-seal-fs);
  font-weight: var(--mro-fw-black);
  line-height: 1;
  letter-spacing: var(--mro-ls-label);
  transform: rotate(var(--mro-seal-rotate));
}

.hero__wa-badge {
  position: absolute;
  right: 4%;
  bottom: 6%;
  z-index: var(--mro-z-badge);
  display: grid;
  place-items: center;
  width: var(--mro-wa-badge);
  height: var(--mro-wa-badge);
  border-radius: 50%;
  background: var(--mro-color-action);
  color: var(--mro-color-on-action);
  box-shadow: var(--mro-glow-wa-badge); /* anel escuro separa o verde do anel volt */
}

.hero__wa-badge .icon {
  width: var(--mro-wa-badge-glyph);
  height: var(--mro-wa-badge-glyph);
}

/* Conteúdo */
.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--mro-container-narrow);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--mro-space-2);
  min-height: var(--mro-pill-min-h);
  padding: var(--mro-space-1) var(--mro-pill-px);
  border: var(--mro-border-w) solid var(--mro-pill-border);
  border-radius: var(--mro-radius-full);
  background: var(--mro-pill-bg);
  color: var(--mro-pill-fg);
  font-size: var(--mro-fs-small);
  line-height: var(--mro-lh-snug);
  text-wrap: balance;
}

.pill .icon {
  color: var(--mro-color-highlight);
}

/* Valor de placeholder renderizado pelo JS (<span data-ph="MEMBROS">) */
.pill [data-ph] {
  color: var(--mro-pill-number);
  font-weight: var(--mro-fw-bold);
  font-variant-numeric: tabular-nums;
}

.hero__title {
  margin-top: var(--mro-space-3);
  font-family: var(--mro-font-display);
  font-size: var(--mro-fs-h1);
  font-weight: var(--mro-fw-black);
  line-height: var(--mro-lh-display);
  letter-spacing: var(--mro-ls-display);
  text-transform: uppercase;
  text-wrap: balance;
}

.hero__title-line {
  display: block;
}

.hero__title .hl {
  text-shadow: var(--mro-glow-text);
}

.hero__lead {
  max-width: var(--mro-measure-lead);
  margin-top: var(--mro-space-3);
  color: var(--mro-color-text-2);
  font-size: var(--mro-fs-lead);
  line-height: var(--mro-lh-body);
  text-wrap: pretty;
}

.hero__content .btn-whatsapp {
  margin-top: var(--mro-space-5);
}

/* ===== 6. FAIXA DE PROVA SOCIAL — §5.3 ===== */

.proof {
  position: relative;
  padding-block: var(--mro-space-8);
  background: var(--mro-color-bg-alt);
  text-align: center;
}

.proof::before,
.proof::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--mro-border-w);
  background: var(--mro-gradient-hairline);
}

.proof::before { top: 0; }
.proof::after { bottom: 0; }

.proof__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mro-space-3);
}

.proof__title {
  max-width: 22ch;
  font-family: var(--mro-font-display);
  font-size: var(--mro-fs-band);
  font-weight: var(--mro-fw-black);
  font-variant-numeric: tabular-nums;
  line-height: var(--mro-lh-heading);
  letter-spacing: var(--mro-ls-heading);
  text-transform: uppercase;
  text-wrap: balance;
}

.proof__title [data-ph] {
  color: var(--mro-color-highlight);
}

/* Badge "% OFF": contorno laranja (o laranja sólido fica só no selo do hero) */
.offer-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--mro-space-2);
  padding: calc(var(--mro-space-1) * 1.5) var(--mro-space-3);
  border: calc(var(--mro-border-w) * 1.5) solid var(--mro-color-offer);
  border-radius: var(--mro-radius-xs);
  background: rgb(var(--mro-orange-rgb) / 0.08);
  color: var(--mro-color-offer);
  font-family: var(--mro-font-display);
  font-size: var(--mro-fs-h3);
  font-weight: var(--mro-fw-black);
  line-height: var(--mro-lh-snug);
  letter-spacing: var(--mro-ls-heading);
  text-transform: uppercase;
}

.offer-badge .icon {
  width: var(--mro-icon-md);
  height: var(--mro-icon-md);
}

/* ===== 7. O QUE CAI NO RADAR: chips + faixa de produtos — §5.4 ===== */

.chip-group + .chip-group {
  margin-top: var(--mro-space-8);
}

.chip-group__label {
  margin-bottom: var(--mro-space-3);
  color: var(--mro-color-text-3);
  font-family: var(--mro-font-display);
  font-size: var(--mro-fs-micro);
  font-weight: var(--mro-fw-bold);
  line-height: var(--mro-lh-snug);
  letter-spacing: var(--mro-ls-micro);
  text-align: center;
  text-transform: uppercase;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--mro-chip-gap);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--mro-space-2);
  min-height: var(--mro-chip-h);
  padding: var(--mro-space-1) var(--mro-chip-px);
  border: var(--mro-border-w) solid var(--mro-chip-primary-border);
  border-radius: var(--mro-radius-full);
  background: var(--mro-chip-primary-bg);
  color: var(--mro-chip-primary-fg);
  font-family: var(--mro-font-display);
  font-size: var(--mro-chip-fs);
  font-weight: var(--mro-fw-bold);
  line-height: 1;
  letter-spacing: var(--mro-ls-label);
  text-transform: uppercase;
}

/* Blip estático antes do texto (sinal detectado) */
.chip::before {
  content: "";
  flex: none;
  width: calc(var(--mro-blip-size) * 0.75);
  height: calc(var(--mro-blip-size) * 0.75);
  border-radius: 50%;
  background: var(--mro-color-highlight);
  box-shadow: var(--mro-glow-blip);
}

/* Marcas (Growth, Dark Lab): só texto, contorno volt, sem blip */
.chip--brand {
  background: transparent;
  color: var(--mro-color-highlight);
}

.chip--brand::before {
  content: none;
}

/* Miscelânea: contorno neutro, ponto cinza sem glow */
.chip--secondary {
  border-color: var(--mro-chip-secondary-border);
  background: var(--mro-chip-secondary-bg);
  color: var(--mro-chip-secondary-fg);
}

.chip--secondary::before {
  background: var(--mro-color-text-3);
  box-shadow: none;
}

.products-strip {
  overflow: hidden;
  margin-top: var(--mro-space-10);
  border: var(--mro-border-w) solid var(--mro-color-border);
  border-radius: var(--mro-radius-lg);
  background: var(--mro-color-bg-alt);
}

.products-strip img {
  width: 100%;
}

/* ===== 8. BENEFÍCIOS: 6 cards — §5.5 ===== */

.cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mro-grid-gap);
}

.cards > li {
  display: flex;
}

/* Mobile: media object (ícone à esquerda) */
.card {
  position: relative;
  display: grid;
  flex: 1;
  grid-template-columns: var(--mro-icon-tile) minmax(0, 1fr);
  align-items: start;
  gap: var(--mro-space-4);
  padding: var(--mro-card-pad);
  border: var(--mro-border-w) solid var(--mro-card-border);
  border-radius: var(--mro-card-radius);
  background: var(--mro-card-bg);
  box-shadow: var(--mro-card-shadow);
}

/* Cantoneiras de mira (superior esquerda e inferior direita) */
.card::before,
.card::after {
  content: "";
  position: absolute;
  width: var(--mro-card-bracket);
  height: var(--mro-card-bracket);
  border: 0 solid var(--mro-card-bracket-color);
  opacity: 0.7;
  pointer-events: none;
}

.card::before {
  top: var(--mro-space-2);
  left: var(--mro-space-2);
  border-top-width: var(--mro-card-bracket-w);
  border-left-width: var(--mro-card-bracket-w);
  transform-origin: top left;
}

.card::after {
  right: var(--mro-space-2);
  bottom: var(--mro-space-2);
  border-right-width: var(--mro-card-bracket-w);
  border-bottom-width: var(--mro-card-bracket-w);
  transform-origin: bottom right;
}

@media (hover: hover) {
  .card:hover {
    border-color: var(--mro-card-border-hover);
    background: var(--mro-card-bg-hover);
    box-shadow: var(--mro-card-shadow-hover);
    transform: translateY(var(--mro-hover-lift));
  }

  /* "Alvo travado": cantoneira cresce de --mro-card-bracket (12px) para --mro-card-bracket-hover (18px) = 1.5x via transform */
  .card:hover::before,
  .card:hover::after {
    opacity: 1;
    transform: scale(1.5);
  }
}

.card__icon {
  display: grid;
  place-items: center;
  width: var(--mro-icon-tile);
  height: var(--mro-icon-tile);
  border: var(--mro-border-w) solid var(--mro-icon-tile-border);
  border-radius: var(--mro-icon-tile-radius);
  background: var(--mro-icon-tile-bg);
  color: var(--mro-icon-tile-fg);
  box-shadow: var(--mro-glow-icon-tile);
}

.card__icon .icon {
  width: var(--mro-icon-md);
  height: var(--mro-icon-md);
}

.card__title {
  font-family: var(--mro-font-display);
  font-size: var(--mro-fs-h3);
  font-weight: var(--mro-fw-bold);
  line-height: var(--mro-lh-snug);
  letter-spacing: var(--mro-ls-heading);
  text-transform: uppercase;
}

.card__text {
  margin-top: var(--mro-space-2);
  color: var(--mro-color-text-2);
  font-size: var(--mro-fs-card);
  line-height: var(--mro-lh-body);
  text-wrap: pretty;
}

/* Stagger do reveal (lido no bloco de movimento) */
.cards > li:nth-child(2),
.steps__list > li:nth-child(2) { --i: 1; }
.cards > li:nth-child(3),
.steps__list > li:nth-child(3) { --i: 2; }
.cards > li:nth-child(4) { --i: 3; }
.cards > li:nth-child(5) { --i: 4; }
.cards > li:nth-child(6) { --i: 5; }

/* ===== 9. COMO FUNCIONA: 3 passos — §5.6 ===== */

.steps__list {
  display: grid;
  gap: var(--mro-space-6);
  max-width: var(--mro-container-narrow);
  margin-inline: auto;
}

/* Mobile: timeline vertical (numeral à esquerda, texto à direita) */
.step {
  position: relative;
  display: grid;
  grid-template-columns: var(--mro-step-size) minmax(0, 1fr);
  align-items: start;
  gap: var(--mro-space-4);
}

.step__num {
  position: relative;
  z-index: var(--mro-z-raised);
  display: grid;
  place-items: center;
  width: var(--mro-step-size);
  height: var(--mro-step-size);
  border: var(--mro-step-border);
  border-radius: 50%;
  background: var(--mro-color-bg-alt);
  color: var(--mro-color-highlight);
  font-family: var(--mro-font-display);
  font-size: var(--mro-step-fs);
  font-variant-numeric: tabular-nums;
  font-weight: var(--mro-fw-black);
  line-height: 1;
}

/* Conector tracejado entre os numerais */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--mro-step-size) + var(--mro-space-2));
  bottom: calc(var(--mro-space-6) * -1 + var(--mro-space-2));
  left: calc(var(--mro-step-size) / 2 - var(--mro-border-w));
  border-left: var(--mro-step-connector);
}

.step__body {
  padding-top: var(--mro-space-3);
}

.step__title {
  font-family: var(--mro-font-display);
  font-size: var(--mro-fs-h3);
  font-weight: var(--mro-fw-bold);
  line-height: var(--mro-lh-snug);
  letter-spacing: var(--mro-ls-heading);
  text-transform: uppercase;
}

.step__text {
  margin-top: var(--mro-space-1);
  color: var(--mro-color-text-2);
  font-size: var(--mro-fs-card);
  text-wrap: pretty;
}

/* ===== 10. BLOCO DE CONFIANÇA — §5.7 ===== */

.trust__card {
  display: grid;
  justify-items: center;
  gap: var(--mro-space-4);
  padding: var(--mro-space-6);
  border: var(--mro-border-w) solid transparent;
  border-radius: var(--mro-trust-radius);
  background:
    linear-gradient(var(--mro-color-surface), var(--mro-color-surface)) padding-box,
    var(--mro-trust-border) border-box;
  text-align: center;
}

.trust__shield {
  width: calc(var(--mro-trust-icon) * 1.4); /* o WebP tem glow transparente: o escudo visível fica ~64px */
}

.trust__title {
  font-family: var(--mro-font-display);
  font-size: var(--mro-fs-band);
  font-weight: var(--mro-fw-black);
  line-height: var(--mro-lh-heading);
  letter-spacing: var(--mro-ls-heading);
  text-transform: uppercase;
  text-wrap: balance;
}

.trust__text {
  margin-top: var(--mro-space-3);
  color: var(--mro-color-text-2);
  text-wrap: pretty;
}

.trust__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--mro-space-8);
}

/* ===== 11. FAQ — §5.8 ===== */

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

.faq__item {
  border: var(--mro-border-w) solid var(--mro-color-border);
  border-radius: var(--mro-faq-radius);
  background: var(--mro-color-surface);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mro-space-3);
  min-height: var(--mro-faq-min-h);
  padding: var(--mro-space-3) var(--mro-faq-px);
  border-radius: var(--mro-faq-radius);
  font-weight: var(--mro-fw-semibold);
  line-height: var(--mro-lh-snug);
  list-style: none;
  cursor: pointer;
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q:focus-visible {
  outline-offset: 2px;
}

.faq__q .icon {
  width: var(--mro-faq-chevron);
  height: var(--mro-faq-chevron);
  color: var(--mro-color-text-2);
}

@media (hover: hover) {
  .faq__item:hover {
    border-color: var(--mro-color-border-strong);
  }
}

.faq__item[open] {
  border-color: var(--mro-faq-border-open);
}

.faq__item[open] .faq__q .icon {
  color: var(--mro-color-highlight);
  transform: rotate(180deg);
}

.faq__a {
  padding: 0 var(--mro-faq-px) var(--mro-faq-px);
  color: var(--mro-color-text-2);
  line-height: var(--mro-lh-relaxed);
}

/* ===== 12. CTA FINAL — §5.9 ===== */

.final-cta {
  position: relative;
  overflow: hidden;
  background: var(--mro-gradient-cta-final), var(--mro-color-bg);
  text-align: center;
}

/* Disco de radar estático e decorativo atrás do título */
.final-cta__rings {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(90vw, 35rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--mro-gradient-radar-rings), var(--mro-gradient-crosshair);
  opacity: 0.6;
  pointer-events: none;
  transform: translate(-50%, -50%);
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent);
  mask-image: radial-gradient(closest-side, #000 40%, transparent);
}

.final-cta__inner {
  position: relative;
  z-index: var(--mro-z-raised);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.final-cta__title {
  font-family: var(--mro-font-display);
  font-size: var(--mro-fs-h2);
  font-weight: var(--mro-fw-black);
  line-height: var(--mro-lh-heading);
  letter-spacing: var(--mro-ls-heading);
  text-transform: uppercase;
  text-wrap: balance;
}

.final-cta__line {
  display: block;
}

.final-cta__lead {
  max-width: 40ch;
  margin-top: var(--mro-space-3);
  color: var(--mro-color-text-2);
  font-size: var(--mro-fs-lead);
  text-wrap: pretty;
}

.final-cta__inner .btn-whatsapp {
  margin-top: var(--mro-space-6);
}

.reassure {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--mro-space-2) var(--mro-space-4);
  margin-top: var(--mro-space-4);
  color: var(--mro-color-text-2);
  font-size: var(--mro-fs-small);
}

.reassure li {
  display: inline-flex;
  align-items: center;
  gap: var(--mro-space-1);
}

.reassure .icon {
  color: var(--mro-color-highlight);
}

/* ===== 13. FOOTER — §5.10 ===== */

.site-footer {
  padding-block: var(--mro-space-10);
  border-top: var(--mro-border-w) solid var(--mro-color-border);
  background: var(--mro-footer-bg);
  text-align: center;
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mro-space-3);
}

.footer__inner .wordmark {
  margin-bottom: var(--mro-space-2);
}

.footer__legal {
  max-width: var(--mro-measure-body);
  color: var(--mro-footer-fg);
  font-size: var(--mro-fs-small);
  line-height: var(--mro-lh-relaxed);
}

.footer__copy {
  color: var(--mro-color-text-3);
  font-size: var(--mro-fs-micro);
}

/* ===== 14. BREAKPOINTS (mobile-first) ===== */

/* sm ≥ 600px: cards em 2 colunas, ícone em cima */
@media (min-width: 37.5em) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .card {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
  }
}

/* md ≥ 768px: faixa em linha; confiança em 2 colunas */
@media (min-width: 48em) {
  .proof {
    padding-block: var(--mro-space-10);
  }

  .proof__inner {
    flex-direction: row;
    justify-content: center;
    gap: var(--mro-space-8);
    text-align: left;
  }

  .trust__card {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    gap: var(--mro-space-6);
    padding: var(--mro-space-10);
    text-align: left;
  }
}

/* lg ≥ 960px: hero em 2 colunas, cards em 3, passos horizontais, botão com largura automática */
@media (min-width: 60em) {
  .brand-row {
    justify-content: flex-start;
  }

  .hero {
    padding-top: var(--mro-space-12);
    background: radial-gradient(45% 60% at 72% 45%, rgb(var(--mro-wa-rgb) / 0.14), transparent 70%), var(--mro-color-bg);
  }

  .hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: var(--mro-space-16);
    text-align: left;
  }

  .hero__media {
    order: 2;
    justify-self: center;
  }

  .hero__content {
    order: 1;
    align-items: flex-start;
  }

  .btn-whatsapp {
    width: auto;
    min-width: var(--mro-btn-min-w);
  }

  .cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .steps__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--mro-space-8);
    max-width: none;
  }

  .step {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .step__body {
    padding-top: 0;
  }

  /* Conector horizontal: da borda deste numeral até a borda do próximo */
  .step:not(:last-child)::after {
    top: calc(var(--mro-step-size) / 2 - var(--mro-border-w));
    bottom: auto;
    left: calc(50% + var(--mro-step-size) / 2 + var(--mro-space-2));
    right: calc(var(--mro-step-size) / 2 + var(--mro-space-2) - var(--mro-space-8) - 50%);
    border-left: 0;
    border-top: var(--mro-step-connector);
  }
}

/* ===== 15. MOVIMENTO — só quando o visitante não pediu movimento reduzido ===== */
/* (tokens.css já zera --mro-anim-* em "reduce"; aqui é a 2ª trava) */

@media (prefers-reduced-motion: no-preference) {
  @keyframes mro-sweep {
    to { transform: rotate(1turn); }
  }

  /* ::after do botão; escala maior no eixo Y deixa o anel uniforme numa pílula larga */
  @keyframes mro-pulse {
    0%       { transform: scale(1, 1);      opacity: 0.55; }
    70%,
    100%     { transform: scale(1.06, 1.4); opacity: 0; }
  }

  /* ::after do blip */
  @keyframes mro-blip {
    0%       { transform: scale(0.5); opacity: 0.9; }
    80%,
    100%     { transform: scale(2.6); opacity: 0; }
  }

  /* Radar do hero */
  .radar__sweep {
    animation: var(--mro-anim-sweep);
    will-change: transform;
  }

  .radar__blip::after {
    animation: var(--mro-anim-blip);
  }

  .radar__blip--2::after {
    animation-delay: calc(var(--mro-dur-blip) / 3);
  }

  .radar__blip--3::after {
    animation-delay: calc(var(--mro-dur-blip) * 2 / 3);
  }

  /* WCAG 2.2.2 (QA REQ-002): o JS pausa o radar fora da tela (.radar--offscreen) e de vez após 10 s (.radar--idle) */
  .radar--offscreen .radar__sweep,
  .radar--offscreen .radar__blip::after,
  .radar--idle .radar__sweep,
  .radar--idle .radar__blip::after {
    animation-play-state: paused;
  }

  .radar--idle .radar__sweep {
    will-change: auto;
  }

  /* Botão */
  .btn-whatsapp {
    transition:
      background-color var(--mro-dur-base) var(--mro-ease-out),
      box-shadow var(--mro-dur-base) var(--mro-ease-out),
      transform var(--mro-dur-base) var(--mro-ease-out);
  }

  .btn-whatsapp:active {
    transition-duration: var(--mro-dur-fast);
    transition-timing-function: var(--mro-ease-press);
  }

  /* Pulso: 3 ciclos x 1,6 s = 4,8 s, termina antes de 5 s (WCAG 2.2.2, QA REQ-002) */
  .btn-whatsapp--pulse::after {
    animation: var(--mro-anim-pulse);
    animation-iteration-count: 3;
  }

  /* CTA final: o pulso só começa quando a seção aparece (senão terminaria antes de o visitante chegar) */
  .js-reveal .reveal:not(.is-visible) .btn-whatsapp--pulse::after {
    animation: none;
  }

  /* Hover/foco esconde o anel sem reiniciar a animação (animation: none reiniciaria o pulso ao sair) */
  .btn-whatsapp:is(:hover, :focus-visible)::after {
    animation-play-state: paused;
    visibility: hidden;
  }

  /* Cards */
  .card {
    transition:
      background-color var(--mro-dur-base) var(--mro-ease-out),
      border-color var(--mro-dur-base) var(--mro-ease-out),
      box-shadow var(--mro-dur-base) var(--mro-ease-out),
      transform var(--mro-dur-base) var(--mro-ease-out);
  }

  .card::before,
  .card::after {
    transition:
      opacity var(--mro-dur-slow) var(--mro-ease-out),
      transform var(--mro-dur-slow) var(--mro-ease-out);
  }

  /* FAQ */
  .faq__item {
    transition: border-color var(--mro-dur-base) var(--mro-ease-out);
  }

  .faq__q .icon {
    transition:
      transform var(--mro-dur-base) var(--mro-ease-out),
      color var(--mro-dur-base) var(--mro-ease-out);
  }

  /* Reveal-on-scroll: .js-reveal é posto no <html> pelo script do <head> */
  .js-reveal .reveal {
    opacity: 0;
    transform: translateY(var(--mro-reveal-distance));
    transition:
      opacity var(--mro-dur-reveal) var(--mro-ease-out),
      transform var(--mro-dur-reveal) var(--mro-ease-out);
    transition-delay: calc(var(--i, 0) * var(--mro-stagger));
  }

  .js-reveal .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}