/**
 * Mega Radar de Ofertas Online — Design Tokens
 * Conceito visual: "ALVO TRAVADO" (radar de varredura x energia de academia)
 *
 * Story MRO-1 · Task T3 · Design Squad (Design Chief -> @brad-frost)
 * Spec completa: docs/design-direction.md
 * Prefixo: --mro-  ·  Mobile-first  ·  WCAG 2.1 AA (razões de contraste no doc, §2.3)
 *
 * Camadas (Atomic Design):
 *   1) GLOBAL     valores brutos (hex, escalas)
 *   2) ALIAS      papel semântico (bg, texto, ação, destaque...)
 *   3) COMPONENTE botão, card, chip, hero... (consomem ALIAS)
 * Regra: o CSS da página usa ALIAS/COMPONENTE. Global só dentro deste arquivo.
 *
 * Regras de cor invioláveis:
 *   verde WhatsApp = só o que é clicável (CTA + badge WhatsApp do hero)
 *   volt           = destaque/informação (1 palavra-chave por título, números, ícones, radar, foco)
 *   vermelho       = só a barra de urgência
 *   laranja        = só etiqueta de oferta (selo "OFERTAS" e badge "% OFF"), máx. 1 por viewport
 *
 * Fontes: carregar no <head> do index.html (NÃO via @import aqui):
 *   <link rel="preconnect" href="https://fonts.googleapis.com">
 *   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 *   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800&family=Inter:wght@400..700&display=swap">
 *
 * Keyframes referenciados pelos atalhos --mro-anim-* (definir no CSS da página):
 *   mro-sweep, mro-pulse, mro-blip  (código em docs/design-direction.md §7.2)
 */

:root {
  color-scheme: dark; /* scrollbars e controles nativos escuros */

  /* ═════════════════════════════════════════
     1. COLOR — GLOBAL (valores brutos)
  ═════════════════════════════════════════ */

  /* Ink — preto grafite com viés verde (tela de radar) */
  --mro-ink-950: #050706;   /* footer */
  --mro-ink-900: #080B09;   /* fundo base */
  --mro-ink-850: #0C110E;   /* seção alternada, faixa, disco do radar */
  --mro-ink-800: #111814;   /* cards, FAQ */
  --mro-ink-750: #16201A;   /* card hover / elevado 2 */
  --mro-ink-700: #1E2A23;   /* borda sutil */
  --mro-ink-600: #2A3A30;   /* borda forte / hover */

  /* Fog — textos (neutro levemente esverdeado) */
  --mro-fog-50:  #F4F8F5;   /* texto primário */
  --mro-fog-300: #AEBAB2;   /* texto secundário */
  --mro-fog-500: #8A978F;   /* texto terciário / legal — mínimo permitido para texto */
  --mro-white:   #FFFFFF;   /* só texto da barra de urgência */

  /* WhatsApp — AÇÃO (mantido exato para reconhecimento instantâneo) */
  --mro-wa-400: #3FE07F;    /* hover */
  --mro-wa-500: #25D366;    /* base da ação */
  --mro-wa-600: #1EB857;    /* pressed */
  --mro-wa-ink: #04140A;    /* texto/ícone SOBRE verde, volt e laranja (nunca branco) */

  /* Volt — neon fósforo de radar / cor de energia esportiva */
  --mro-volt-500: #A8FF3E;

  /* Urgência — só a barra do topo */
  --mro-red-500: #D7262C;
  --mro-red-700: #B01E23;

  /* Oferta — etiqueta de preço */
  --mro-orange-400: #FFA24D;
  --mro-orange-500: #FF8A1F;

  /* Canais RGB para transparências: rgb(var(--mro-volt-rgb) / .3) */
  --mro-volt-rgb:   168 255 62;
  --mro-wa-rgb:     37 211 102;
  --mro-orange-rgb: 255 138 31;
  --mro-shadow-rgb: 0 0 0;

  /* Variações de transparência mais usadas */
  --mro-volt-a06: rgb(var(--mro-volt-rgb) / 0.06);
  --mro-volt-a08: rgb(var(--mro-volt-rgb) / 0.08);
  --mro-volt-a12: rgb(var(--mro-volt-rgb) / 0.12);
  --mro-volt-a25: rgb(var(--mro-volt-rgb) / 0.25);
  --mro-volt-a35: rgb(var(--mro-volt-rgb) / 0.35);
  --mro-volt-a50: rgb(var(--mro-volt-rgb) / 0.50);
  --mro-wa-a18:   rgb(var(--mro-wa-rgb) / 0.18);
  --mro-wa-a35:   rgb(var(--mro-wa-rgb) / 0.35);
  --mro-wa-a55:   rgb(var(--mro-wa-rgb) / 0.55);


  /* ═════════════════════════════════════════
     2. COLOR — ALIAS (semântico)
  ═════════════════════════════════════════ */

  --mro-color-bg:              var(--mro-ink-900);
  --mro-color-bg-alt:          var(--mro-ink-850);
  --mro-color-bg-deep:         var(--mro-ink-950);
  --mro-color-surface:         var(--mro-ink-800);
  --mro-color-surface-hover:   var(--mro-ink-750);

  --mro-color-border:          var(--mro-ink-700);
  --mro-color-border-strong:   var(--mro-ink-600);
  --mro-color-border-accent:   var(--mro-volt-a35);

  --mro-color-text:            var(--mro-fog-50);    /* 18.45:1 no bg */
  --mro-color-text-2:          var(--mro-fog-300);   /*  9.85:1 no bg / 8.99:1 no card */
  --mro-color-text-3:          var(--mro-fog-500);   /*  6.50:1 no bg / 5.93:1 no card */

  --mro-color-action:          var(--mro-wa-500);
  --mro-color-action-hover:    var(--mro-wa-400);
  --mro-color-action-active:   var(--mro-wa-600);
  --mro-color-on-action:       var(--mro-wa-ink);    /* 9.54:1 sobre #25D366 */

  --mro-color-highlight:       var(--mro-volt-500);  /* 16.04:1 no bg */
  --mro-color-highlight-soft:  var(--mro-volt-a08);

  --mro-color-urgency:         var(--mro-red-500);
  --mro-color-on-urgency:      var(--mro-white);     /* 5.00:1 sobre #D7262C */

  --mro-color-offer:           var(--mro-orange-500);
  --mro-color-on-offer:        var(--mro-wa-ink);    /* 8.03:1 sobre #FF8A1F */

  --mro-color-focus:           var(--mro-volt-500);
  --mro-color-selection-bg:    var(--mro-volt-500);
  --mro-color-selection-fg:    var(--mro-wa-ink);

  --mro-theme-color: #080B09; /* espelhar em <meta name="theme-color"> e site.webmanifest */


  /* ═════════════════════════════════════════
     3. TYPOGRAPHY
  ═════════════════════════════════════════ */

  /* Famílias */
  --mro-font-display: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif-condensed, sans-serif;
  --mro-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mro-font-mono:    ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Roboto Mono', monospace; /* opcional: micro-rótulos HUD, sem download */

  /* Pesos (carregados: display 700/800 · body 400–700 variável) */
  --mro-fw-regular:  400;
  --mro-fw-medium:   500;
  --mro-fw-semibold: 600;
  --mro-fw-bold:     700;
  --mro-fw-black:    800;   /* display H1/H2/botão */

  /* Escala fluida — clamp(min @360px, ..., max @1280px) */
  --mro-fs-h1:     clamp(2.5rem, 1.7174rem + 3.4783vw, 4.5rem);       /* 40 → 72 */
  --mro-fs-h2:     clamp(1.875rem, 1.4348rem + 1.9565vw, 3rem);       /* 30 → 48 */
  --mro-fs-band:   clamp(1.5rem, 1.2065rem + 1.3043vw, 2.25rem);      /* 24 → 36  faixa prova social */
  --mro-fs-h3:     clamp(1.25rem, 1.1522rem + 0.4348vw, 1.5rem);      /* 20 → 24 */
  --mro-fs-lead:   clamp(1.0625rem, 0.9891rem + 0.3261vw, 1.25rem);   /* 17 → 20  sub do hero */
  --mro-fs-body:   clamp(1rem, 0.9755rem + 0.1087vw, 1.0625rem);      /* 16 → 17 */
  --mro-fs-card:   clamp(0.9375rem, 0.913rem + 0.1087vw, 1rem);       /* 15 → 16  texto de card */
  --mro-fs-small:  0.875rem;                                          /* 14 */
  --mro-fs-micro:  clamp(0.75rem, 0.7255rem + 0.1087vw, 0.8125rem);   /* 12 → 13  eyebrow, rótulos */
  --mro-fs-btn:    clamp(1.125rem, 1.0272rem + 0.4348vw, 1.375rem);   /* 18 → 22 */
  --mro-fs-btn-lg: clamp(1.25rem, 1.1522rem + 0.4348vw, 1.5rem);      /* 20 → 24  CTA final */

  /* Altura de linha */
  --mro-lh-display: 0.95;   /* H1 */
  --mro-lh-heading: 1.05;   /* H2, faixa */
  --mro-lh-snug:    1.25;   /* H3, botões, FAQ summary */
  --mro-lh-body:    1.55;
  --mro-lh-relaxed: 1.65;   /* respostas do FAQ, texto legal */

  /* Tracking */
  --mro-ls-display: 0.005em;
  --mro-ls-heading: 0.01em;
  --mro-ls-btn:     0.04em;
  --mro-ls-label:   0.08em;  /* barra de urgência, chips */
  --mro-ls-micro:   0.14em;  /* eyebrow HUD */

  /* Medidas de leitura */
  --mro-measure-lead: 34ch;
  --mro-measure-body: 60ch;


  /* ═════════════════════════════════════════
     4. SPACING — base 4px
  ═════════════════════════════════════════ */

  --mro-space-0:  0;
  --mro-space-1:  0.25rem;   /*  4px */
  --mro-space-2:  0.5rem;    /*  8px */
  --mro-space-3:  0.75rem;   /* 12px */
  --mro-space-4:  1rem;      /* 16px */
  --mro-space-5:  1.25rem;   /* 20px */
  --mro-space-6:  1.5rem;    /* 24px */
  --mro-space-8:  2rem;      /* 32px */
  --mro-space-10: 2.5rem;    /* 40px */
  --mro-space-12: 3rem;      /* 48px */
  --mro-space-16: 4rem;      /* 64px */
  --mro-space-20: 5rem;      /* 80px */
  --mro-space-24: 6rem;      /* 96px */

  /* Ritmo fluido */
  --mro-section-y:    clamp(3.5rem, 2.5217rem + 4.3478vw, 6rem);     /* 56 → 96  padding vertical de seção */
  --mro-section-head: clamp(2rem, 1.6087rem + 1.7391vw, 3rem);       /* 32 → 48  título → conteúdo */
  --mro-stack:        var(--mro-space-4);                            /* gap padrão entre blocos internos */
  --mro-grid-gap:     clamp(0.75rem, 0.5543rem + 0.8696vw, 1.25rem); /* 12 → 20  gap dos grids de cards */


  /* ═════════════════════════════════════════
     5. LAYOUT
  ═════════════════════════════════════════ */

  --mro-container:        67.5rem;   /* 1080px — seções com grid */
  --mro-container-narrow: 40rem;     /*  640px — hero mobile, confiança, FAQ, CTA final */
  --mro-gutter: clamp(1rem, 0.8043rem + 0.8696vw, 1.5rem);   /* 16 → 24 */

  /* Breakpoints (referência — custom properties não funcionam em @media):
     sm 37.5em (600px) cards 2 col · md 48em (768px) · lg 60em (960px) hero 2 col, cards 3 col · xl 80em (1280px) */

  /* Hero: tamanho do disco do radar (fallback sem svh; overrides no fim do arquivo) */
  --mro-hero-media: max(11rem, min(76vw, 21.25rem));          /* ≤ 340px no mobile */
  --mro-hero-photo-scale: 86%;                                /* diâmetro da foto dentro do disco */
  --mro-hero-gap: clamp(1.5rem, 0.913rem + 2.6087vw, 3rem);   /* 24 → 48 entre colunas/blocos */


  /* ═════════════════════════════════════════
     6. RADIUS
  ═════════════════════════════════════════ */

  --mro-radius-xs:   0.25rem;   /*  4px  selo, badge */
  --mro-radius-sm:   0.5rem;    /*  8px */
  --mro-radius-md:   0.75rem;   /* 12px  icon tile, FAQ */
  --mro-radius-lg:   1rem;      /* 16px  cards */
  --mro-radius-xl:   1.5rem;    /* 24px  bloco CTA final, confiança */
  --mro-radius-full: 9999px;    /* botão, pill, chips, círculos */


  /* ═════════════════════════════════════════
     7. BORDERS
  ═════════════════════════════════════════ */

  --mro-border-w:        1px;
  --mro-border-w-strong: 2px;
  --mro-ring-w:          3px;   /* anel neon da foto do hero */


  /* ═════════════════════════════════════════
     8. SHADOWS & GLOWS
  ═════════════════════════════════════════ */

  --mro-shadow-card:       inset 0 1px 0 rgb(255 255 255 / 0.03), 0 10px 30px -12px rgb(var(--mro-shadow-rgb) / 0.6);
  --mro-shadow-card-hover: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 16px 40px -12px rgb(var(--mro-shadow-rgb) / 0.7), 0 0 0 1px var(--mro-volt-a12);
  --mro-shadow-badge:      0 6px 16px -4px rgb(var(--mro-shadow-rgb) / 0.6);

  /* Glow verde — CTA */
  --mro-glow-cta:       0 0 0 1px var(--mro-wa-a55), 0 10px 30px -6px rgb(var(--mro-wa-rgb) / 0.45), 0 0 48px -8px var(--mro-wa-a35);
  --mro-glow-cta-hover: 0 0 0 1px rgb(63 224 127 / 0.8), 0 14px 40px -6px rgb(var(--mro-wa-rgb) / 0.6), 0 0 72px -8px rgb(var(--mro-wa-rgb) / 0.45);

  /* Glow do anel da foto do hero (volt + halo verde) */
  --mro-glow-hero-ring: 0 0 24px var(--mro-volt-a50), 0 0 80px rgb(var(--mro-volt-rgb) / 0.18), 0 0 160px rgb(var(--mro-wa-rgb) / 0.12);

  /* Outros glows */
  --mro-glow-text:      0 0 24px var(--mro-volt-a35);           /* text-shadow da palavra volt do H1 */
  --mro-glow-blip:      0 0 8px 2px rgb(var(--mro-volt-rgb) / 0.7);
  --mro-glow-icon-tile: 0 0 20px -4px var(--mro-volt-a35);
  --mro-glow-wa-badge:  0 0 0 4px var(--mro-ink-900), 0 0 24px var(--mro-wa-a55);  /* anel escuro separa o badge da foto */


  /* ═════════════════════════════════════════
     9. GRADIENTS — motivos de radar
  ═════════════════════════════════════════ */

  /* Halo atrás do hero */
  --mro-gradient-hero: radial-gradient(60% 50% at 50% 30%, rgb(var(--mro-wa-rgb) / 0.14), transparent 70%);

  /* Anéis concêntricos (4 anéis) — elemento quadrado com border-radius 50% */
  --mro-gradient-radar-rings: repeating-radial-gradient(circle closest-side, transparent 0 calc(25% - 1px), var(--mro-volt-a12) calc(25% - 1px) 25%);

  /* Mira (cruz central) */
  --mro-gradient-crosshair:
    linear-gradient(transparent calc(50% - 0.5px), rgb(var(--mro-volt-rgb) / 0.10) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(90deg, transparent calc(50% - 0.5px), rgb(var(--mro-volt-rgb) / 0.10) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px));

  /* Varredura — cauda transparente, borda de ataque brilhante (gira no sentido horário) */
  --mro-gradient-sweep: conic-gradient(from 0deg, transparent 0deg 270deg, rgb(var(--mro-volt-rgb) / 0.04) 290deg, rgb(var(--mro-volt-rgb) / 0.22) 345deg, rgb(var(--mro-volt-rgb) / 0.55) 359deg, transparent 360deg);

  /* Filetes e bordas */
  --mro-gradient-hairline:     linear-gradient(90deg, transparent, var(--mro-volt-a50), transparent);
  --mro-gradient-trust-border: linear-gradient(135deg, var(--mro-volt-a50), rgb(var(--mro-wa-rgb) / 0.15) 50%, var(--mro-volt-a35));
  --mro-gradient-urgency:      linear-gradient(90deg, var(--mro-red-700), var(--mro-red-500) 50%, var(--mro-red-700)); /* branco: 5.00–6.87:1 */
  --mro-gradient-cta-final:    radial-gradient(ellipse 70% 60% at 50% 100%, rgb(var(--mro-wa-rgb) / 0.18), transparent 70%);


  /* ═════════════════════════════════════════
     10. MOTION
  ═════════════════════════════════════════ */

  --mro-dur-fast:   120ms;    /* cor, borda */
  --mro-dur-base:   200ms;    /* hover, chevron FAQ */
  --mro-dur-slow:   320ms;    /* cantoneiras dos cards */
  --mro-dur-reveal: 560ms;    /* aparecer-ao-rolar */
  --mro-dur-pulse:  1600ms;   /* pulso do CTA: 3 ciclos x 1,6 s = 4,8 s (WCAG 2.2.2, QA REQ-002) */
  --mro-dur-blip:   1800ms;   /* blips do radar */
  --mro-dur-sweep:  4000ms;   /* 1 volta da varredura */
  --mro-stagger:    70ms;     /* atraso entre cards no reveal */

  --mro-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --mro-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --mro-ease-press:  cubic-bezier(0.2, 0, 0, 1);

  --mro-reveal-distance: 16px;   /* translateY inicial do reveal */
  --mro-hover-lift:      -2px;   /* translateY no hover de card/botão */
  --mro-press-scale:     0.98;   /* :active do botão */

  /* Atalhos de animação (keyframes no CSS da página) — viram "none" em reduced-motion */
  --mro-anim-sweep: mro-sweep var(--mro-dur-sweep) linear infinite;
  --mro-anim-pulse: mro-pulse var(--mro-dur-pulse) var(--mro-ease-out) 3;   /* termina em < 5 s */
  --mro-anim-blip:  mro-blip var(--mro-dur-blip) var(--mro-ease-out) infinite;


  /* ═════════════════════════════════════════
     11. Z-INDEX
  ═════════════════════════════════════════ */

  --mro-z-base:   0;
  --mro-z-raised: 1;    /* foto sobre o disco */
  --mro-z-badge:  2;    /* selo OFERTAS, badge WhatsApp */
  --mro-z-sticky: 50;   /* reservado (não há header fixo) */


  /* ═════════════════════════════════════════
     12. ACCESSIBILITY
  ═════════════════════════════════════════ */

  --mro-tap-min:      2.75rem;   /* 44px — alvo mínimo de toque */
  --mro-focus-w:      3px;
  --mro-focus-offset: 3px;       /* respiro escuro entre o anel volt e o verde do botão */
  --mro-focus-ring:   var(--mro-focus-w) solid var(--mro-color-focus);  /* usar em outline */


  /* ═════════════════════════════════════════
     13. ICONS (SVG inline, estilo Lucide)
  ═════════════════════════════════════════ */

  --mro-icon-stroke: 2;
  --mro-icon-sm: 1rem;       /* 16 — urgência, pill, checks */
  --mro-icon-md: 1.375rem;   /* 22 — dentro do icon tile */
  --mro-icon-lg: 1.5rem;     /* 24 — botão */
  --mro-icon-xl: 1.75rem;    /* 28 — escudo do bloco confiança */


  /* ═════════════════════════════════════════
     14. COMPONENT TOKENS
  ═════════════════════════════════════════ */

  /* Barra de urgência */
  --mro-urgency-bg:    var(--mro-gradient-urgency);
  --mro-urgency-fg:    var(--mro-color-on-urgency);
  --mro-urgency-min-h: 2.5rem;
  --mro-urgency-fs:    clamp(0.8125rem, 0.788rem + 0.1087vw, 0.875rem);  /* 13 → 14 */

  /* Wordmark provisório */
  --mro-wordmark-fs:   clamp(1.125rem, 1.0272rem + 0.4348vw, 1.375rem); /* 18 → 22 */

  /* Pill de prova social */
  --mro-pill-min-h:  2.25rem;
  --mro-pill-px:     0.875rem;
  --mro-pill-bg:     var(--mro-volt-a08);
  --mro-pill-border: var(--mro-volt-a25);
  --mro-pill-fg:     var(--mro-color-text-2);      /* 8.48:1 */
  --mro-pill-number: var(--mro-color-highlight);   /* 13.81:1 */

  /* Botão CTA (WhatsApp) */
  --mro-btn-h:            3.5rem;    /* 56px */
  --mro-btn-h-lg:         4rem;      /* 64px — CTA final */
  --mro-btn-px:           1.75rem;
  --mro-btn-gap:          0.625rem;
  --mro-btn-max-w:        26.25rem;  /* 420px — largura total no mobile até aqui */
  --mro-btn-min-w:        20rem;     /* 320px — desktop */
  --mro-btn-radius:       var(--mro-radius-full);
  --mro-btn-bg:           var(--mro-color-action);
  --mro-btn-bg-hover:     var(--mro-color-action-hover);
  --mro-btn-bg-active:    var(--mro-color-action-active);
  --mro-btn-fg:           var(--mro-color-on-action);
  --mro-btn-shadow:       var(--mro-glow-cta);
  --mro-btn-shadow-hover: var(--mro-glow-cta-hover);
  --mro-btn-pulse-color:  var(--mro-wa-a55);

  /* Selo "OFERTAS" (hero) */
  --mro-seal-bg:     var(--mro-color-offer);
  --mro-seal-fg:     var(--mro-color-on-offer);
  --mro-seal-fs:     clamp(0.875rem, 0.8261rem + 0.2174vw, 1rem);   /* 14 → 16 */
  --mro-seal-rotate: -8deg;

  /* Badge WhatsApp (hero, decorativo) */
  --mro-wa-badge:       clamp(2.75rem, 2.4565rem + 1.3043vw, 3.5rem);  /* 44 → 56 */
  --mro-wa-badge-glyph: 55%;

  /* Blip (ponto de radar) */
  --mro-blip-size: 0.5rem;

  /* Eyebrow (rótulo HUD acima dos H2) */
  --mro-eyebrow-fg: var(--mro-color-highlight);

  /* Chips de categoria (não interativos) */
  --mro-chip-h:                2.25rem;
  --mro-chip-px:               0.875rem;
  --mro-chip-fs:               0.9375rem;   /* 15px display 700 uppercase */
  --mro-chip-gap:              var(--mro-space-2);
  --mro-chip-primary-bg:       var(--mro-volt-a06);
  --mro-chip-primary-border:   var(--mro-volt-a35);
  --mro-chip-primary-fg:       var(--mro-color-text);    /* 15.85:1 */
  --mro-chip-secondary-bg:     transparent;
  --mro-chip-secondary-border: var(--mro-color-border-strong);
  --mro-chip-secondary-fg:     var(--mro-color-text-2);  /* 9.50:1 */

  /* Card de benefício */
  --mro-card-bg:            var(--mro-color-surface);
  --mro-card-bg-hover:      var(--mro-color-surface-hover);
  --mro-card-border:        var(--mro-color-border);
  --mro-card-border-hover:  var(--mro-color-border-accent);
  --mro-card-radius:        var(--mro-radius-lg);
  --mro-card-pad:           clamp(1.25rem, 1.1522rem + 0.4348vw, 1.5rem);  /* 20 → 24 */
  --mro-card-shadow:        var(--mro-shadow-card);
  --mro-card-shadow-hover:  var(--mro-shadow-card-hover);
  --mro-card-bracket:       0.75rem;    /* cantoneira de mira */
  --mro-card-bracket-hover: 1.125rem;
  --mro-card-bracket-w:     2px;
  --mro-card-bracket-color: var(--mro-volt-a50);

  /* Icon tile (ícone dos cards) */
  --mro-icon-tile:        2.75rem;   /* 44px */
  --mro-icon-tile-radius: var(--mro-radius-md);
  --mro-icon-tile-bg:     var(--mro-volt-a08);
  --mro-icon-tile-border: var(--mro-volt-a25);
  --mro-icon-tile-fg:     var(--mro-color-highlight);   /* 12.21:1 */

  /* 3 passos */
  --mro-step-size:      3.5rem;    /* círculo do numeral */
  --mro-step-fs:        1.5rem;    /* numeral display 800 */
  --mro-step-border:    var(--mro-border-w-strong) solid var(--mro-color-highlight);
  --mro-step-connector: var(--mro-border-w-strong) dashed var(--mro-volt-a35);

  /* Bloco de confiança */
  --mro-trust-icon:   3.5rem;     /* círculo do escudo */
  --mro-trust-radius: var(--mro-radius-xl);
  --mro-trust-border: var(--mro-gradient-trust-border);

  /* FAQ (details/summary) */
  --mro-faq-min-h:       3.5rem;   /* 56px — summary */
  --mro-faq-px:          var(--mro-space-5);
  --mro-faq-radius:      var(--mro-radius-md);
  --mro-faq-border-open: var(--mro-color-border-accent);
  --mro-faq-chevron:     1.25rem;

  /* Footer */
  --mro-footer-bg: var(--mro-color-bg-deep);
  --mro-footer-fg: var(--mro-color-text-3);   /* 6.64:1 */
}

/* Hero no mobile: limita o disco também pela altura visível para o CTA caber na 1ª dobra */
@supports (height: 1svh) {
  :root {
    --mro-hero-media: max(11rem, min(76vw, 21.25rem, 34svh));   /* 34svh (era 36svh): CTA inteiro em 360x640, QA REQ-001 */
  }
}

/* Desktop (lg ≥ 960px): hero em 2 colunas, disco fixo */
@media (min-width: 60em) {
  :root {
    --mro-hero-media: 27.5rem;   /* 440px */
  }
}

/* Movimento reduzido: sem loops, sem deslocamento; mudanças de cor continuam */
@media (prefers-reduced-motion: reduce) {
  :root {
    --mro-anim-sweep: none;
    --mro-anim-pulse: none;
    --mro-anim-blip:  none;
    --mro-dur-reveal: 0ms;
    --mro-dur-slow:   0ms;
    --mro-stagger:    0ms;
    --mro-reveal-distance: 0px;
    --mro-hover-lift: 0px;
    --mro-press-scale: 1;
  }
}