/* ════════════════════════════════════════════════════════════════════
   DevCode — Folha de estilo principal
   Refatoração de classe mundial · Samuel Soares (DevCode) · 2026

   ARQUITETURA
   ────────────────────────────────────────────────────────────────────
   • @layer  reset, base, layout, componentes, tema, motion, responsivo
     — define a cascata de prioridade explicitamente, evitando guerras
       de especificidade e o uso de !important.
   • Nomenclatura BEM em pt-BR: bloco, bloco__elemento, bloco--modificador.
   • Design tokens semânticos (--cor-fundo, --cor-texto…) com overrides
     completos em [data-tema="claro"] — todo o site responde
     instantaneamente à troca de tema.
   • Logical properties (margin-inline, padding-block) onde aplicável.
   • Unidades fluidas: rem, em, %, vh/vw, clamp(). px restrito a bordas
     e detalhes de 1-2px.
   ════════════════════════════════════════════════════════════════════ */

@layer reset, base, layout, componentes, motion, responsivo;


/* ════════════════════════════════════════════════════════════════════
   01. DESIGN TOKENS
   ════════════════════════════════════════════════════════════════════ */
@layer base {

  :root {
    /* — Tipografia — */
    --fonte-display: 'Syne', system-ui, sans-serif;
    --fonte-corpo:   'DM Sans', system-ui, sans-serif;
    --fonte-mono:    'JetBrains Mono', ui-monospace, monospace;

    /* — Escala fluida — */
    --texto-12: clamp(0.7rem, 0.65rem + 0.2vw, 0.75rem);
    --texto-14: clamp(0.825rem, 0.78rem + 0.22vw, 0.875rem);
    --texto-16: clamp(0.95rem, 0.9rem + 0.25vw, 1rem);
    --texto-18: clamp(1.05rem, 1rem + 0.3vw, 1.125rem);
    --texto-h3: clamp(1.05rem, 0.95rem + 0.6vw, 1.25rem);
    --texto-h2: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem);
    --texto-h1: clamp(2.2rem, 1.5rem + 3.5vw, 4.2rem);

    /* — Espaçamento (escala 4 px) — */
    --esp-1:  0.25rem;   --esp-2:  0.5rem;    --esp-3:  0.75rem;
    --esp-4:  1rem;      --esp-5:  1.25rem;   --esp-6:  1.5rem;
    --esp-8:  2rem;      --esp-10: 2.5rem;    --esp-12: 3rem;
    --esp-16: 4rem;      --esp-20: 5rem;

    /* — Layout — */
    --largura-container: 75rem;
    --secao-padding: clamp(3.5rem, 8vw, 5.625rem);

    /* — Raios — */
    --raio-pp:.5rem;     --raio-p:.75rem;    --raio-m:1.125rem;
    --raio-g:1.75rem;    --raio-gg:2.75rem;  --raio-circulo:999rem;

    /* — Easings — */
    --suaviza:        cubic-bezier(0.16, 1, 0.3, 1);
    --suaviza-mola:   cubic-bezier(0.34, 1.56, 0.64, 1);
    --suaviza-padrao: cubic-bezier(0.4, 0, 0.2, 1);
    --transicao:      0.28s var(--suaviza);

    /* — Brand (constantes) — */
    --marca-azul:    #2563EB;  --marca-azul-clr:#3B82F6;
    --marca-ambar:   #F59E0B;  --marca-ambar-clr:#FBBF24;
    --marca-verde:   #10B981;  --marca-verde-clr:#34D399;
    --marca-vermelho:#EF4444;  --marca-roxo:    #A78BFA;
    --marca-laranja: #F97316;  --marca-amarelo: #EAB308;
    --whats:         #25D366;  --whats-escuro:  #128C7E;

    /* ── Tokens semânticos — TEMA ESCURO (default) ── */
    --cor-fundo:        #080C14;
    --cor-fundo-2:      #0A0F1A;
    --cor-cartao:       rgba(12, 20, 36, 0.78);
    --cor-cartao-solido:#0D1623;
    --cor-divisor:      rgba(255, 255, 255, 0.06);
    --cor-borda:        rgba(255, 255, 255, 0.08);
    --cor-borda-hover:  rgba(255, 255, 255, 0.18);

    --cor-texto:        #F8FAFC;
    --cor-texto-2:      #B8C5D6;
    --cor-texto-3:      #94A3B8;
    --cor-texto-4:      #64748B;

    --cor-acento:       var(--marca-ambar);
    --cor-acento-clr:   var(--marca-ambar-clr);
    --cor-acento-azul:  var(--marca-azul-clr);
    --cor-perigo:       var(--marca-vermelho);
    --cor-sucesso:      var(--marca-verde);

    --tonalidade-azul:    rgba(37, 99, 235, 0.22);
    --tonalidade-ambar:   rgba(245, 158, 11, 0.30);
    --tonalidade-verde:   rgba(16, 185, 129, 0.18);
    --tonalidade-perigo:  rgba(239, 68, 68, 0.10);

    --sombra-sutil:  0 0.5rem 1.25rem -0.5rem rgba(0, 0, 0, 0.4);
    --sombra:        0 1rem 2rem -0.625rem rgba(0, 0, 0, 0.5);
    --sombra-funda:  0 1.875rem 3.75rem -1.25rem rgba(0, 0, 0, 0.7);
    --sombra-azul:   0 1rem 2rem -0.5rem rgba(37, 99, 235, 0.25);
    --sombra-ambar:  0 1rem 2rem -0.5rem rgba(245, 158, 11, 0.30);

    --desfoque-sutil: blur(.5rem);
    --desfoque:       blur(.75rem);
    --desfoque-forte: blur(1.25rem);

    --grad-marca: linear-gradient(135deg, var(--marca-ambar-clr), var(--marca-azul-clr));
  }

  /* ── Tokens semânticos — TEMA CLARO ── */
  [data-tema="claro"] {
    --cor-fundo:        #F5F4F0;
    --cor-fundo-2:      #ECEAE3;
    --cor-cartao:       rgba(255, 255, 255, 0.85);
    --cor-cartao-solido:#FFFFFF;
    --cor-divisor:      rgba(15, 23, 42, 0.08);
    --cor-borda:        rgba(15, 23, 42, 0.10);
    --cor-borda-hover:  rgba(15, 23, 42, 0.22);

    --cor-texto:        #0F172A;
    --cor-texto-2:      #334155;
    --cor-texto-3:      #475569;
    --cor-texto-4:      #64748B;

    --cor-acento:       #B45309;
    --cor-acento-clr:   #D97706;
    --cor-acento-azul:  #1D4ED8;
    --cor-perigo:       #B91C1C;
    --cor-sucesso:      #047857;

    --tonalidade-azul:    rgba(37, 99, 235, 0.10);
    --tonalidade-ambar:   rgba(245, 158, 11, 0.18);
    --tonalidade-verde:   rgba(16, 185, 129, 0.12);
    --tonalidade-perigo:  rgba(239, 68, 68, 0.08);

    --sombra-sutil:  0 0.5rem 1.25rem -0.5rem rgba(15, 23, 42, 0.08);
    --sombra:        0 1rem 2rem -0.625rem rgba(15, 23, 42, 0.12);
    --sombra-funda:  0 1.875rem 3.75rem -1.25rem rgba(15, 23, 42, 0.20);
    --sombra-azul:   0 1rem 2rem -0.5rem rgba(37, 99, 235, 0.18);
    --sombra-ambar:  0 1rem 2rem -0.5rem rgba(245, 158, 11, 0.24);
  }
}


/* ════════════════════════════════════════════════════════════════════
   02. RESET MODERNO  (adaptado do Josh Comeau Reset)
   ════════════════════════════════════════════════════════════════════ */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; padding: 0; }

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

  body {
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  img, picture, video, canvas, svg { display: block; max-inline-size: 100%; }
  img, video { block-size: auto; }

  input, button, textarea, select { font: inherit; color: inherit; }
  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; text-wrap: pretty; }

  ul, ol { list-style: none; }
  a { color: inherit; text-decoration: none; }
}


/* ════════════════════════════════════════════════════════════════════
   03. BASE — html, body, tipografia, foco, scrollbar
   ════════════════════════════════════════════════════════════════════ */
@layer base {
  html {
    scroll-behavior: smooth;
    overflow-x: clip;
    color-scheme: dark;
    scroll-padding-block-start: 5rem;
  }
  [data-tema="claro"] { color-scheme: light; }

  body {
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    font-family: var(--fonte-corpo);
    line-height: 1.65;
    overflow-x: clip;
    min-block-size: 100dvh;
    transition: background-color 0.4s var(--suaviza-padrao), color 0.4s var(--suaviza-padrao);
  }

  /* Grão fino para "alma" analógica */
  body::after {
    content: '';
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.02;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 12.5rem 12.5rem;
  }

  ::-webkit-scrollbar         { inline-size: 0.5rem; }
  ::-webkit-scrollbar-track   { background: var(--cor-fundo); }
  ::-webkit-scrollbar-thumb   { background: var(--grad-marca); border-radius: 0.25rem; }

  h1, h2, h3, h4 {
    font-family: var(--fonte-display);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--cor-texto);
    text-wrap: balance;
  }
  h1 { font-size: var(--texto-h1); font-weight: 800; }
  h2 { font-size: var(--texto-h2); font-weight: 700; margin-block-end: var(--esp-4); }
  h3 { font-size: var(--texto-h3); font-weight: 600; margin-block-end: var(--esp-2); }

  ::selection { background: var(--cor-acento); color: var(--cor-fundo); }

  :focus { outline: none; }
  :focus-visible {
    outline: 0.1875rem solid var(--cor-acento);
    outline-offset: 0.25rem;
    border-radius: 0.25rem;
  }
}


/* ════════════════════════════════════════════════════════════════════
   04. LAYOUT BASE
   ════════════════════════════════════════════════════════════════════ */
@layer layout {
  .container {
    inline-size: min(100% - 2.5rem, var(--largura-container));
    margin-inline: auto;
  }

  .secao {
    padding-block: var(--secao-padding);
    position: relative;
  }

  .secao + .secao::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    inline-size: 3.75rem; block-size: 1px;
    background: linear-gradient(90deg, transparent, var(--cor-acento-azul), transparent);
    opacity: 0.4;
    pointer-events: none;
  }

  .icone {
    inline-size: 1em;
    block-size: 1em;
    flex-shrink: 0;
  }

  .rotulo-secao {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cor-acento-azul);
    margin-block-end: var(--esp-3);
    font-family: var(--fonte-mono);
  }
  .rotulo-secao::before {
    content: '';
    inline-size: 0.375rem; block-size: 0.375rem;
    border-radius: 50%;
    background: var(--cor-acento-azul);
    box-shadow: 0 0 0.625rem color-mix(in srgb, var(--cor-acento-azul) 60%, transparent);
    flex-shrink: 0;
    animation: ponto-pulsa 2s ease-in-out infinite;
  }

  .secao__titulo { color: var(--cor-texto); }
  .secao__subtitulo {
    font-size: var(--texto-16);
    color: var(--cor-texto-2);
    max-inline-size: 37.5rem;
    margin-block: var(--esp-3) var(--esp-10);
    line-height: 1.7;
  }

  .texto-destaque { color: var(--cor-acento); }
  .texto-perigo   { color: var(--cor-perigo); }


  /* — Skip link (sempre primeiro foco) — */
  .link-pular {
    position: absolute;
    inset-block-start: -100%;
    inset-inline-start: 0;
    background: var(--cor-acento);
    color: #000;
    padding: var(--esp-2) var(--esp-4);
    z-index: 1300;
    font-weight: 700;
    border-end-end-radius: var(--raio-pp);
    transition: inset-block-start 0.2s;
  }
  .link-pular:focus { inset-block-start: 0; }
}


/* ════════════════════════════════════════════════════════════════════
   05. CAMADAS DE FUNDO
   ════════════════════════════════════════════════════════════════════ */
@layer base {
  .fundo-marca, .fundo-brilho, .fundo-grade,
  .fundo-aurora, .fundo-estrelas {
    position: fixed; inset: 0; pointer-events: none; z-index: -1;
  }

  .fundo-marca {
    z-index: -3;
    display: flex; align-items: center; justify-content: center;
    user-select: none; overflow: hidden;
  }
  .fundo-marca img {
    inline-size: 100%; block-size: 100%;
    object-fit: cover;
    opacity: 0.025;
    filter: grayscale(100%);
  }
  [data-tema="claro"] .fundo-marca img { opacity: 0.04; }

  .fundo-brilho {
    z-index: -2;
    background:
      radial-gradient(ellipse 60% 40% at 20% 10%,  rgba(37, 99, 235, 0.15)  0%, transparent 60%),
      radial-gradient(ellipse 40% 25% at 80% 70%,  rgba(37, 99, 235, 0.08)  0%, transparent 50%),
      radial-gradient(ellipse 25% 15% at 50% 100%, rgba(16, 185, 129, 0.05) 0%, transparent 50%),
      radial-gradient(ellipse 45% 20% at 65% 20%,  rgba(245, 158, 11, 0.05) 0%, transparent 55%);
    animation: brilho-pulsa 8s ease-in-out infinite;
  }
  [data-tema="claro"] .fundo-brilho { opacity: 0.6; }

  .fundo-grade {
    background-image:
      linear-gradient(rgba(37, 99, 235, 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(37, 99, 235, 0.04) 1px, transparent 1px);
    background-size: 3.5rem 3.5rem;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 100%);
  }

  .fundo-aurora {
    overflow: hidden;
    filter: blur(5rem);
    opacity: 0.55;
  }
  [data-tema="claro"] .fundo-aurora { opacity: 0.3; }
  .fundo-aurora__no { position: absolute; border-radius: 50%; will-change: transform; }
  .fundo-aurora__no--1 {
    inline-size: 37.5rem; block-size: 37.5rem;
    inset-block-start: -12.5rem; inset-inline-start: -6.25rem;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.5), transparent 70%);
    animation: aurora-flutua-1 22s ease-in-out infinite alternate;
  }
  .fundo-aurora__no--2 {
    inline-size: 31.25rem; block-size: 31.25rem;
    inset-block-end: -9.375rem; inset-inline-end: -6.25rem;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.35), transparent 70%);
    animation: aurora-flutua-2 26s ease-in-out infinite alternate;
  }
  .fundo-aurora__no--3 {
    inline-size: 28.125rem; block-size: 28.125rem;
    inset-block-start: 40%; inset-inline-start: 50%;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.3), transparent 70%);
    animation: aurora-flutua-3 30s ease-in-out infinite alternate;
  }

  .fundo-estrelas {
    display: none;
    overflow: hidden;
    background-image:
      radial-gradient(1px 1px at 20px  30px,  rgba(255, 255, 255, 0.4), transparent),
      radial-gradient(1px 1px at 40px  70px,  rgba(147, 197, 253, 0.5), transparent),
      radial-gradient(1px 1px at 90px  40px,  rgba(255, 255, 255, 0.3), transparent),
      radial-gradient(1px 1px at 130px 80px,  rgba(253, 224, 138, 0.4), transparent),
      radial-gradient(1px 1px at 80px  120px, rgba(255, 255, 255, 0.4), transparent),
      radial-gradient(2px 2px at 160px 30px,  rgba(147, 197, 253, 0.5), transparent),
      radial-gradient(1px 1px at 200px 90px,  rgba(255, 255, 255, 0.3), transparent),
      radial-gradient(2px 2px at 280px 110px, rgba(255, 255, 255, 0.4), transparent),
      radial-gradient(1px 1px at 60px  160px, rgba(147, 197, 253, 0.4), transparent),
      radial-gradient(1px 1px at 270px 220px, rgba(253, 224, 138, 0.5), transparent);
    background-repeat: repeat;
    background-size: 20rem 15rem;
    opacity: 0.6;
  }

  .cursor-brilho {
    position: fixed;
    inset-block-start: -18.75rem; inset-inline-start: -18.75rem;
    inline-size: 37.5rem; block-size: 37.5rem;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(circle,
      rgba(37, 99, 235, 0.07) 0%,
      rgba(245, 158, 11, 0.04) 40%,
      transparent 70%);
    filter: blur(2.5rem);
    will-change: transform;
    mix-blend-mode: screen;
  }
  [data-tema="claro"] .cursor-brilho { mix-blend-mode: multiply; opacity: 0.6; }

  .barra-progresso {
    position: fixed;
    inset-block-start: 0; inset-inline-start: 0;
    block-size: 0.1875rem;
    inline-size: 0;
    background: linear-gradient(90deg, var(--marca-azul), var(--marca-ambar), var(--marca-verde));
    background-size: 200% 100%;
    z-index: 1100;
    border-end-end-radius: 0.125rem;
    transition: inline-size 0.12s linear;
    box-shadow: 0 0 0.75rem rgba(245, 158, 11, 0.5);
    animation: progresso-flui 3s linear infinite;
  }
}


/* ════════════════════════════════════════════════════════════════════
   06. CARREGADOR (LOADER)
   ════════════════════════════════════════════════════════════════════ */
@layer componentes {
  .carregador {
    position: fixed; inset: 0;
    z-index: 99999;
    background: var(--cor-fundo);
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.6s var(--suaviza-padrao), visibility 0.6s;
  }
  .carregador--escondido { opacity: 0; visibility: hidden; pointer-events: none; }
  .carregador__marca { display: flex; flex-direction: column; align-items: center; gap: 1.125rem; }
  .carregador__texto {
    font-family: var(--fonte-display);
    font-size: clamp(2rem, 6vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    opacity: 0;
    animation: carregador-aparece 0.8s var(--suaviza) forwards;
  }
  .carregador__texto em {
    font-style: normal;
    background: linear-gradient(135deg, var(--marca-ambar-clr), var(--marca-azul-clr));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .carregador__barra {
    display: block;
    inline-size: 0; block-size: 2px;
    background: linear-gradient(90deg, var(--marca-azul-clr), var(--marca-ambar), var(--marca-verde));
    border-radius: 0.125rem;
    animation: carregador-barra 1.4s 0.3s var(--suaviza) forwards;
    box-shadow: 0 0 0.75rem rgba(245, 158, 11, 0.5);
  }
}


/* ════════════════════════════════════════════════════════════════════
   07. CABEÇALHO E NAVEGAÇÃO — Premium Redesign
   ════════════════════════════════════════════════════════════════════ */
@layer componentes {

  /* ── Wrapper fixo ── */
  .cabecalho {
    position: fixed;
    inset-block-start: 0; inset-inline: 0;
    z-index: 1001;
    padding-block: var(--esp-3);
    padding-inline: var(--esp-6);
  }

  /* Barra de progresso de leitura */
  .cabecalho::after {
    content: '';
    position: absolute;
    inset-block-start: 0; inset-inline-start: 0;
    block-size: 2px;
    inline-size: var(--scroll-pct, 0%);
    background: linear-gradient(90deg, var(--marca-azul-clr) 0%, var(--marca-ambar) 100%);
    z-index: 2;
    transition: inline-size 0.08s linear;
  }

  /* ── Barra de navegação principal ── */
  .navegacao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-4);
    padding: var(--esp-3) var(--esp-5);
    max-width: var(--largura-container);
    margin-inline: auto;
    border-radius: 1rem;
    border: 1px solid transparent;
    transition:
      background 0.5s var(--suaviza-padrao),
      box-shadow 0.5s var(--suaviza-padrao),
      border-color 0.5s var(--suaviza-padrao),
      padding 0.4s var(--suaviza-padrao);
  }

  /* Estado: rolado — pill glassmorphism */
  .cabecalho--rolado .navegacao {
    background: color-mix(in srgb, var(--cor-fundo) 80%, transparent);
    backdrop-filter: blur(1.5rem) saturate(160%);
    -webkit-backdrop-filter: blur(1.5rem) saturate(160%);
    border-color: rgba(255, 255, 255, 0.07);
    box-shadow:
      0 0.5rem 2rem -0.25rem rgba(0, 0, 0, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 0 0 1px rgba(255, 255, 255, 0.025);
    padding-block: var(--esp-2);
  }

  /* ── Logo ── */
  .navegacao__logo {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: var(--fonte-display); font-weight: 700; font-size: 1.1rem;
    letter-spacing: -0.02em;
    transition: transform 0.35s var(--suaviza-mola);
    flex-shrink: 0;
  }
  .navegacao__logo:hover { transform: scale(1.04); }
  .navegacao__logo-img {
    inline-size: 2rem; block-size: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 0.25rem 0.75rem rgba(37,99,235,0.25);
  }
  .navegacao__logo-texto span {
    background: linear-gradient(135deg, var(--marca-azul-clr), var(--marca-ambar));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 300;
  }

  /* ── Links desktop ── */
  .navegacao__lista { display: flex; gap: var(--esp-1); list-style: none; }
  .navegacao__link {
    color: var(--cor-texto-3);
    font-weight: 500;
    font-size: 0.875rem;
    letter-spacing: 0.01em;
    position: relative;
    padding: var(--esp-2) var(--esp-3);
    border-radius: var(--raio-p);
    transition: color 0.25s, background 0.25s;
  }
  /* Hover pill */
  .navegacao__link::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.05);
    opacity: 0;
    transition: opacity 0.25s;
  }
  /* Gradient underline */
  .navegacao__link::after {
    content: '';
    position: absolute;
    inset-block-end: 0.2rem; inset-inline: var(--esp-3);
    block-size: 1.5px;
    background: linear-gradient(90deg, var(--marca-azul-clr), var(--marca-ambar));
    border-radius: 1px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--suaviza);
  }
  .navegacao__link:hover,
  .navegacao__link:focus-visible { color: var(--cor-texto); }
  .navegacao__link:hover::before,
  .navegacao__link:focus-visible::before,
  .navegacao__link.is-ativo::before { opacity: 1; }
  .navegacao__link:hover::after,
  .navegacao__link:focus-visible::after,
  .navegacao__link.is-ativo::after { transform: scaleX(1); }
  .navegacao__link.is-ativo { color: var(--cor-texto); }

  /* ── Ações (tema + CTA + hamburger) ── */
  .navegacao__acoes { display: inline-flex; align-items: center; gap: var(--esp-2); }

  /* ── CTA WhatsApp ── */
  .navegacao__cta {
    background: linear-gradient(135deg, var(--whats) 0%, var(--whats-escuro) 100%);
    padding: var(--esp-2) var(--esp-4);
    border-radius: var(--raio-circulo);
    color: #fff;
    font-weight: 600;
    font-size: 0.825rem;
    letter-spacing: 0.01em;
    display: inline-flex; align-items: center; gap: var(--esp-2);
    transition: transform 0.3s var(--suaviza-mola), box-shadow 0.3s, filter 0.25s;
    box-shadow: 0 0.25rem 1rem rgba(37, 211, 102, 0.28), inset 0 1px 0 rgba(255,255,255,0.18);
    will-change: transform;
    position: relative; overflow: hidden;
  }
  .navegacao__cta::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,0.1), transparent);
    pointer-events: none;
  }
  .navegacao__cta:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 0.5rem 1.5rem rgba(37, 211, 102, 0.42);
    filter: brightness(1.05);
  }
  .navegacao__cta .icone { inline-size: 1.1em; block-size: 1.1em; }


  /* ══════════════════════════════════════
     HAMBÚRGUER — barra assimétrica → X
     ══════════════════════════════════════ */
  .hamburguer {
    display: none;
    position: relative;
    inline-size: 44px;
    block-size: 44px;
    padding: 0;
    background: var(--cor-cartao);
    border: 1px solid var(--cor-borda-hover);
    border-radius: 13px;
    color: var(--cor-texto);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1002;
    overflow: hidden;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.3s ease;
  }
  .hamburguer::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: radial-gradient(circle, color-mix(in oklab, var(--cor-acento) 35%, transparent) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.32s ease;
    z-index: -1;
  }
  .hamburguer:is(:hover, :focus-visible) {
    border-color: var(--cor-acento);
    box-shadow: 0 0 24px -8px color-mix(in oklab, var(--cor-acento) 50%, transparent);
  }
  .hamburguer:is(:hover, :focus-visible)::before { opacity: 0.55; }
  .hamburguer:active { transform: scale(0.95); }

  body.menu-aberto .hamburguer {
    border-color: var(--cor-acento);
    background: color-mix(in oklab, var(--cor-acento) 12%, var(--cor-cartao));
    box-shadow: 0 0 26px -6px color-mix(in oklab, var(--cor-acento) 45%, transparent);
  }

  .hamburguer__barras {
    position: relative;
    inline-size: 20px;
    block-size: 14px;
    display: block;
  }
  .hamburguer__barras::before,
  .hamburguer__barras::after,
  .hamburguer__barras span {
    content: "";
    position: absolute;
    inset-inline: 0;
    block-size: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.42s cubic-bezier(0.65, 0, 0.35, 1),
                opacity 0.22s ease,
                inline-size 0.32s ease,
                inset-inline-start 0.32s ease;
    transform-origin: center;
  }
  .hamburguer__barras::before { inset-block-start: 0; }
  .hamburguer__barras span {
    inset-block-start: 6px;
    inline-size: 75%;
    inset-inline-start: 25%;
    display: block;
  }
  .hamburguer__barras::after { inset-block-end: 0; inline-size: 60%; }

  .hamburguer:is(:hover, :focus-visible) .hamburguer__barras span,
  .hamburguer:is(:hover, :focus-visible) .hamburguer__barras::after {
    inline-size: 100%;
    inset-inline-start: 0;
  }

  body.menu-aberto .hamburguer__barras::before {
    transform: translateY(6px) rotate(45deg);
    inline-size: 100%;
    inset-inline-start: 0;
  }
  body.menu-aberto .hamburguer__barras span {
    opacity: 0;
    transform: translateX(-10px);
  }
  body.menu-aberto .hamburguer__barras::after {
    transform: translateY(-6px) rotate(-45deg);
    inline-size: 100%;
    inset-inline-start: 0;
  }


  /* ══════════════════════════════════════
     MENU MOBILE — full-screen editorial
     ══════════════════════════════════════ */
  .menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: color-mix(in oklab, var(--cor-fundo) 75%, transparent);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.32s ease;
  }
  body.menu-aberto .menu-overlay { display: block; opacity: 1; }

  .menu-mobile {
    position: fixed;
    inset: 0;
    inline-size: 100%;
    block-size: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    gap: 0;
    padding: clamp(5.5rem, 16vw, 7rem) clamp(1.5rem, 8vw, 3rem) clamp(1.5rem, 5vw, 3rem);
    background: var(--cor-fundo);
    background-image:
      radial-gradient(ellipse 100% 80% at 100% 0%,
        color-mix(in oklab, var(--cor-acento) 26%, transparent), transparent 70%),
      radial-gradient(ellipse 80% 70% at 0% 100%,
        color-mix(in oklab, var(--cor-acento-azul) 22%, transparent), transparent 70%),
      radial-gradient(ellipse 50% 40% at 50% 50%,
        color-mix(in oklab, var(--cor-acento) 12%, transparent), transparent 80%);
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 1000;
    clip-path: circle(0% at calc(100% - 44px) 44px);
    transition: clip-path 0.64s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0ms linear 0.64s;
    visibility: hidden;
    -webkit-overflow-scrolling: touch;
    isolation: isolate;
  }
  .menu-mobile.is-aberto {
    clip-path: circle(150% at calc(100% - 44px) 44px);
    visibility: visible;
    transition: clip-path 0.74s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0ms linear 0ms;
  }

  /* Cortina âmbar varrendo */
  .menu-mobile::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
      transparent 0%,
      var(--marca-ambar) 30%,
      var(--marca-ambar-clr) 50%,
      var(--marca-amarelo) 60%,
      var(--marca-ambar) 70%,
      transparent 100%);
    transform: translateX(-110%);
    pointer-events: none;
    z-index: 2;
  }
  body.menu-aberto .menu-mobile::before {
    animation: menu-cortina-in 0.8s cubic-bezier(0.65, 0, 0.35, 1) forwards;
  }
  body.menu-fechando .menu-mobile::before {
    animation: menu-cortina-out 0.5s cubic-bezier(0.65, 0, 0.35, 1) forwards;
  }
  @keyframes menu-cortina-in {
    0%   { transform: translateX(-110%); }
    55%  { transform: translateX(0); }
    100% { transform: translateX(110%); }
  }
  @keyframes menu-cortina-out {
    0%   { transform: translateX(110%); }
    45%  { transform: translateX(0); }
    100% { transform: translateX(-110%); }
  }

  /* Linha de marca correndo no topo */
  .menu-mobile::after {
    content: "";
    position: absolute;
    inset-block-start: clamp(5.5rem, 16vw, 7rem);
    inset-inline: clamp(1.5rem, 8vw, 3rem);
    block-size: 2px;
    background: linear-gradient(90deg,
      var(--marca-ambar) 0%, var(--marca-amarelo) 50%, transparent 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease 0.28s;
    z-index: 1;
  }
  .menu-mobile.is-aberto::after { transform: scaleX(1); }

  /* Grid decorativo */
  .menu-mobile__grid {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(to right, color-mix(in oklab, var(--cor-texto) 5%, transparent) 1px, transparent 1px),
      linear-gradient(to bottom, color-mix(in oklab, var(--cor-texto) 5%, transparent) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 80%);
    opacity: 0;
    transition: opacity 0.4s ease 0.3s;
    pointer-events: none;
    z-index: 0;
  }
  .menu-mobile.is-aberto .menu-mobile__grid { opacity: 0.55; }

  /* Eyebrow */
  .menu-mobile__cabecalho-painel {
    position: relative;
    z-index: 3;
    padding-block-end: 1.5rem;
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity 0.4s ease 0.34s, transform 0.4s ease 0.34s;
  }
  .menu-mobile.is-aberto .menu-mobile__cabecalho-painel {
    opacity: 1;
    transform: translateY(0);
  }
  .menu-mobile__eyebrow {
    display: inline-block;
    font-size: var(--texto-12);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--cor-acento);
    font-weight: 600;
    padding-inline-start: 18px;
    position: relative;
  }
  .menu-mobile__eyebrow::before {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0;
    inline-size: 8px;
    block-size: 8px;
    background: var(--marca-amarelo);
    border-radius: 50%;
    transform: translateY(-50%);
    box-shadow: 0 0 12px var(--marca-amarelo);
    animation: menu-dot-pulse 2s ease-in-out infinite;
  }
  @keyframes menu-dot-pulse {
    0%, 100% { transform: translateY(-50%) scale(1);   opacity: 1; }
    50%      { transform: translateY(-50%) scale(1.4); opacity: 0.6; }
  }

  /* Lista editorial */
  .menu-mobile__lista {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: menu-counter;
  }
  .menu-mobile__lista > li {
    counter-increment: menu-counter;
    border-block-end: 1px solid color-mix(in oklab, var(--cor-texto) 7%, transparent);
    opacity: 0;
    transform: translateX(48px);
    filter: blur(8px);
    transition: opacity 0.6s ease, transform 0.6s ease, filter 0.6s ease;
  }
  .menu-mobile__lista > li:last-child { border-block-end: none; }
  .menu-mobile.is-aberto .menu-mobile__lista > li {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
  .menu-mobile.is-aberto .menu-mobile__lista > li:nth-child(1) { transition-delay: 0.38s; }
  .menu-mobile.is-aberto .menu-mobile__lista > li:nth-child(2) { transition-delay: 0.44s; }
  .menu-mobile.is-aberto .menu-mobile__lista > li:nth-child(3) { transition-delay: 0.50s; }
  .menu-mobile.is-aberto .menu-mobile__lista > li:nth-child(4) { transition-delay: 0.56s; }
  body:not(.menu-aberto) .menu-mobile__lista > li {
    transition-duration: 0.26s;
    transition-delay: 0s;
  }

  .menu-mobile__link {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.5rem;
    padding-block: clamp(1rem, 2.8vw, 1.5rem);
    font-family: var(--fonte-titulo, inherit);
    font-size: clamp(1.5rem, 6vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--cor-texto);
    text-decoration: none;
    transition: color 0.3s ease, padding-inline-start 0.3s ease, letter-spacing 0.3s ease;
  }
  .menu-mobile__link::before {
    content: attr(data-num);
    font-size: var(--texto-12);
    font-weight: 500;
    letter-spacing: 0.2em;
    color: var(--cor-texto-4);
    transition: color 0.3s ease;
    align-self: start;
    margin-block-start: 0.85em;
  }
  .menu-mobile__link::after {
    content: "";
    inline-size: 28px;
    block-size: 2px;
    background: var(--cor-acento);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.32s ease;
  }
  .menu-mobile__link:hover,
  .menu-mobile__link:focus-visible {
    color: var(--cor-acento);
    padding-inline-start: 1rem;
    letter-spacing: 0;
  }
  .menu-mobile__link:hover::before,
  .menu-mobile__link:focus-visible::before { color: var(--cor-acento); }
  .menu-mobile__link:hover::after,
  .menu-mobile__link:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  /* CTA */
  .menu-mobile__cta-wrap {
    position: relative;
    z-index: 3;
    margin-block-start: 2rem;
    opacity: 0;
    transform: translateY(20px);
    filter: blur(8px);
    transition: opacity 0.5s ease 0.76s, transform 0.5s ease 0.76s, filter 0.5s ease 0.76s;
  }
  .menu-mobile.is-aberto .menu-mobile__cta-wrap {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
  body:not(.menu-aberto) .menu-mobile__cta-wrap {
    transition-duration: 0.22s;
    transition-delay: 0s;
  }
  .menu-mobile__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    inline-size: 100%;
    padding-block: 1.1rem;
    background: var(--grad-marca, var(--cor-acento));
    color: #0B0B0F;
    font-weight: 700;
    font-size: var(--texto-16);
    border-radius: 14px;
    text-decoration: none;
    box-shadow: 0 14px 40px -14px color-mix(in oklab, var(--cor-acento) 80%, transparent);
    transition: transform 0.2s ease;
  }
  .menu-mobile__cta:hover { transform: translateY(-2px); }
  .menu-mobile__cta .icone { inline-size: 1.25em; block-size: 1.25em; }

  /* Rodapé */
  .menu-mobile__rodape {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    margin-block-start: 2rem;
    padding-block-start: 1.5rem;
    border-block-start: 1px solid color-mix(in oklab, var(--cor-texto) 7%, transparent);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease 0.84s, transform 0.5s ease 0.84s;
  }
  .menu-mobile.is-aberto .menu-mobile__rodape {
    opacity: 1;
    transform: translateY(0);
  }
  body:not(.menu-aberto) .menu-mobile__rodape {
    transition-duration: 0.22s;
    transition-delay: 0s;
  }
  .menu-mobile__rodape-tag {
    font-size: var(--texto-12);
    color: var(--cor-texto-4);
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .menu-mobile__rodape-tag strong {
    display: block;
    color: var(--cor-texto);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    font-size: var(--texto-14);
    margin-block-start: 4px;
  }
  .menu-mobile__rodape-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--texto-12);
    color: var(--cor-texto-3);
  }
  .menu-mobile__rodape-dot {
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--cor-sucesso);
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--cor-sucesso) 40%, transparent);
    animation: menu-status-pulse 2.4s ease-in-out infinite;
  }
  @keyframes menu-status-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--cor-sucesso) 40%, transparent); }
    50%      { box-shadow: 0 0 0 6px color-mix(in oklab, var(--cor-sucesso) 4%, transparent); }
  }

  body.menu-aberto { overflow: hidden; touch-action: none; }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .menu-mobile {
      clip-path: none !important;
      opacity: 0;
      transition: opacity 0.2s linear, visibility 0ms linear 0.2s;
    }
    .menu-mobile.is-aberto {
      opacity: 1;
      transition: opacity 0.2s linear, visibility 0ms linear 0ms;
    }
    .menu-mobile::before,
    .menu-mobile__grid,
    .menu-mobile__cabecalho-painel,
    .menu-mobile__lista > li,
    .menu-mobile__cta-wrap,
    .menu-mobile__rodape {
      opacity: 1 !important;
      transform: none !important;
      filter: none !important;
      transition: none !important;
      animation: none !important;
    }
    .menu-mobile::after { transform: scaleX(1) !important; transition: none !important; }
    .menu-mobile__eyebrow::before,
    .menu-mobile__rodape-dot { animation: none !important; }
  }

}


/* ════════════════════════════════════════════════════════════════════
   08. BOTÃO DE TEMA  (sun ⇄ moon)
   ════════════════════════════════════════════════════════════════════ */
@layer componentes {
  .botao-tema {
    inline-size: 2.5rem; block-size: 2.5rem;
    border-radius: 50%;
    border: 1px solid var(--cor-borda);
    background: color-mix(in srgb, var(--cor-cartao-solido) 60%, transparent);
    backdrop-filter: blur(0.5rem);
    color: var(--cor-texto);
    cursor: pointer;
    display: inline-grid;
    place-items: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s var(--suaviza-mola), border-color 0.3s, background 0.3s;
  }
  .botao-tema:hover  { transform: rotate(15deg) scale(1.06); border-color: var(--cor-acento); }
  .botao-tema:active { transform: scale(0.94); }

  .botao-tema__icone {
    grid-column: 1; grid-row: 1;
    inline-size: 1.125rem; block-size: 1.125rem;
    transition: opacity 0.4s var(--suaviza), transform 0.6s var(--suaviza-mola);
  }
  .botao-tema__icone--lua { opacity: 1; transform: scale(1) rotate(0); }
  .botao-tema__icone--sol { opacity: 0; transform: scale(0.4) rotate(-90deg); }
  [data-tema="claro"] .botao-tema__icone--lua { opacity: 0; transform: scale(0.4) rotate(90deg); }
  [data-tema="claro"] .botao-tema__icone--sol { opacity: 1; transform: scale(1) rotate(0); color: var(--cor-acento); }
}


/* ════════════════════════════════════════════════════════════════════
   09. HERO
   ════════════════════════════════════════════════════════════════════ */
@layer componentes {
  .hero {
    min-block-size: 90dvh;
    display: flex; flex-direction: column;
    align-items: center;
    padding-block: 7.5rem 3.75rem;
    position: relative;
  }
  .hero__layout {
    display: flex;
    gap: var(--esp-12);
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: center;
    inline-size: 100%;
  }
  .hero__conteudo { flex: 1 1 28rem; max-inline-size: 40.625rem; }

  .hero__titulo {
    font-size: clamp(2rem, 7vw, 4rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin-block-end: var(--esp-6);
    text-wrap: pretty;
  }
  .hero__linha { display: block; overflow: hidden; }
  .hero__linha > * {
    display: inline-block;
    transform: translateY(110%);
    opacity: 0;
    will-change: transform, opacity;
  }
  .hero__titulo.is-revelado .hero__linha > * { animation: linha-revela 0.85s var(--suaviza) both; }
  .hero__titulo.is-revelado .hero__linha:nth-child(1) > * { animation-delay: 0.10s; }
  .hero__titulo.is-revelado .hero__linha:nth-child(2) > * { animation-delay: 0.22s; }
  .hero__titulo.is-revelado .hero__linha:nth-child(3) > * { animation-delay: 0.34s; }
  .hero__titulo.is-revelado .hero__linha:nth-child(4) > * { animation-delay: 0.46s; }
  .hero__titulo.is-revelado .hero__linha:nth-child(5) > * { animation-delay: 0.58s; }
  .hero__titulo em { font-style: normal; color: var(--cor-texto-3); font-weight: 600; }

  .hero__titulo--destaque {
    background: linear-gradient(135deg, var(--marca-ambar-clr), var(--marca-ambar), #FDE68A);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    font-weight: 800;
    animation: destaque-brilha 3s ease-in-out infinite, destaque-desliza 5s ease infinite alternate;
  }
  [data-tema="claro"] .hero__titulo--destaque {
    background: linear-gradient(135deg, var(--cor-acento), var(--cor-acento-clr));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .hero__titulo--apagado { color: var(--cor-texto-3); font-size: 0.7em; font-weight: 500; }

  .hero__subtitulo {
    font-size: var(--texto-18);
    color: var(--cor-texto-2);
    max-inline-size: 32.5rem;
    margin-block-end: var(--esp-8);
    line-height: 1.65;
  }

  .hero__acoes {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--esp-3);
    margin-block-end: var(--esp-8);
  }

  .hero__estatisticas {
    display: flex; flex-direction: column;
    gap: var(--esp-4);
    flex-shrink: 0;
    min-inline-size: 10rem;
  }


  /* — Marquee — */
  .marquee {
    inline-size: 100%;
    overflow: hidden;
    margin-block-start: var(--esp-16);
    padding-block: var(--esp-4);
    border-block: 1px solid var(--cor-divisor);
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cor-texto) 1%, transparent), transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  }
  .marquee__trilha {
    display: flex;
    gap: var(--esp-4);
    inline-size: max-content;
    animation: marquee-rola 38s linear infinite;
  }
  .marquee__pilula {
    display: inline-flex; align-items: center;
    padding: var(--esp-2) var(--esp-5);
    background: color-mix(in srgb, var(--cor-texto) 3%, transparent);
    border: 1px solid var(--cor-divisor);
    border-radius: var(--raio-circulo);
    font-family: var(--fonte-mono);
    font-size: 0.75rem; font-weight: 500;
    color: var(--cor-texto-3);
    letter-spacing: 0.02em;
    white-space: nowrap;
    transition: color 0.3s, border-color 0.3s, background 0.3s;
  }
  .marquee:hover .marquee__trilha { animation-play-state: paused; }
  .marquee__pilula:hover {
    color: var(--cor-acento);
    border-color: color-mix(in srgb, var(--cor-acento) 30%, transparent);
    background: color-mix(in srgb, var(--cor-acento) 5%, transparent);
  }


  /* Entrada orquestrada via JS */
  .hero-entra {
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity 0.85s var(--suaviza), transform 0.85s var(--suaviza);
    will-change: opacity, transform;
  }
  .hero-entra.is-visivel { opacity: 1; transform: translateY(0); }
}


/* ════════════════════════════════════════════════════════════════════
   10. SELOS, BOTÕES, ELEMENTOS COMPARTILHADOS
   ════════════════════════════════════════════════════════════════════ */
@layer componentes {
  .selo {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
    background: color-mix(in srgb, var(--cor-acento) 12%, transparent);
    backdrop-filter: blur(0.25rem);
    padding: 0.3125rem var(--esp-4);
    border-radius: var(--raio-circulo);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--cor-acento);
    margin-block-end: var(--esp-6);
    border: 1px solid color-mix(in srgb, var(--cor-acento) 30%, transparent);
    position: relative;
    overflow: hidden;
  }
  .selo::after {
    content: '';
    position: absolute;
    inset-block-start: 0; inset-inline-start: -100%;
    inline-size: 40%; block-size: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: selo-brilha 3s ease-in-out infinite 1s;
  }
  .selo--informativo {
    background: color-mix(in srgb, var(--marca-azul) 10%, transparent);
    border-color: color-mix(in srgb, var(--marca-azul) 30%, transparent);
    color: var(--cor-acento-azul);
  }
  .selo__ponto {
    inline-size: 0.5rem; block-size: 0.5rem;
    border-radius: 50%;
    background: var(--cor-acento);
    box-shadow: 0 0 0.5rem var(--cor-acento);
    flex-shrink: 0;
    animation: ponto-pulsa 1.8s ease-in-out infinite;
  }


  /* Botão primário */
  .botao {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--esp-3);
    padding: var(--esp-3) var(--esp-8);
    border-radius: var(--raio-circulo);
    border: 0;
    cursor: pointer;
    font-family: var(--fonte-display);
    font-weight: 600;
    font-size: var(--texto-16);
    letter-spacing: 0.01em;
    min-block-size: 3.125rem;  /* WCAG 2.2 — alvo de toque */
    isolation: isolate;
    overflow: hidden;
    transition: transform 0.3s var(--suaviza-mola), box-shadow 0.3s;
    will-change: transform;
  }
  .botao--primario {
    background: linear-gradient(105deg, var(--whats) 0%, var(--whats-escuro) 100%);
    color: #fff;
    box-shadow: 0 0.375rem 1rem rgba(37, 211, 102, 0.3);
  }
  .botao--primario::before {
    content: '';
    position: absolute;
    inset-block-start: 50%; inset-inline-start: 50%;
    inline-size: 0; block-size: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: inline-size 0.5s, block-size 0.5s;
  }
  .botao--primario:hover::before { inline-size: 18.75rem; block-size: 18.75rem; }
  .botao--primario:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 0.625rem 1.5rem rgba(37, 211, 102, 0.4);
  }
  .botao--primario:active { transform: translateY(0) scale(0.98); }

  .botao__seta { transition: transform 0.3s var(--suaviza-mola); }
  .botao:hover .botao__seta { transform: translateX(0.3125rem); }
  .botao .icone { inline-size: 1.1em; block-size: 1.1em; }

  .botao--cta {
    padding: 1.125rem 3.125rem;
    margin: var(--esp-6) auto 0;
    display: flex;
    inline-size: fit-content;
  }

  .botao-pulsa { animation: pulso-suave 2.2s infinite ease-in-out; }


  /* Ripple */
  .ripple {
    position: absolute;
    inline-size: 0.625rem; block-size: 0.625rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    transform: translate(-50%, -50%) scale(0);
    animation: ripple-expande 0.55s var(--suaviza) forwards;
    pointer-events: none;
  }


  /* Confiança */
  .confianca {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
    color: var(--cor-texto-2);
    font-size: 0.8rem;
    background: color-mix(in srgb, var(--cor-texto) 3%, transparent);
    padding: 0.3125rem var(--esp-3);
    border-radius: var(--raio-circulo);
    border: 1px solid var(--cor-divisor);
  }
  .confianca .icone { color: var(--whats); inline-size: 1rem; block-size: 1rem; }


  /* Escassez */
  .escassez {
    display: flex;
    align-items: center;
    gap: var(--esp-4);
    background: linear-gradient(120deg, color-mix(in srgb, var(--cor-acento) 6%, transparent), color-mix(in srgb, var(--cor-fundo) 50%, transparent));
    border-inline-start: 3px solid var(--cor-acento);
    border-radius: var(--raio-m);
    padding: var(--esp-3) var(--esp-5);
    margin-block-end: 1.75rem;
    max-inline-size: 28.125rem;
    backdrop-filter: var(--desfoque-sutil);
  }
  .escassez__pontos { display: flex; gap: 0.375rem; }
  .escassez__ponto  { inline-size: 0.625rem; block-size: 0.625rem; border-radius: 50%; display: inline-block; }
  .escassez__ponto--preenchido { background: var(--cor-sucesso); box-shadow: 0 0 0.25rem var(--marca-verde-clr); }
  .escassez__ponto--disponivel { background: var(--cor-acento); animation: ponto-pulsa-suave 1.6s infinite; }
  .escassez__texto strong { color: var(--marca-ambar-clr); font-weight: 700; font-size: 0.85rem; }
  [data-tema="claro"] .escassez__texto strong { color: var(--cor-acento); }
  .escassez__texto span { color: var(--cor-texto-3); font-size: 0.75rem; display: block; margin-block-start: 0.125rem; }


  /* Assinatura */
  .assinatura { display: flex; align-items: center; gap: var(--esp-3); margin-block-start: var(--esp-3); }
  .assinatura__linha { inline-size: 2.25rem; block-size: 2px; background: linear-gradient(90deg, var(--marca-azul-clr), transparent); }
  .assinatura__info strong {
    font-family: var(--fonte-display);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 700;
  }
  .assinatura__info span { font-size: 0.7rem; color: var(--cor-texto-4); display: block; }
}


/* ════════════════════════════════════════════════════════════════════
   11. CARTÕES E GRADES
   ════════════════════════════════════════════════════════════════════ */
@layer componentes {
  .grade-cartoes        { display: grid; gap: var(--esp-5); margin-block-start: var(--esp-2); }
  .grade-cartoes--3     { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.625rem), 1fr)); }
  .grade-cartoes--auto  { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.625rem), 1fr)); }
  .grade-cartoes--auto-w{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.25rem), 1fr)); }


  .cartao {
    --shimmer-x: 50%; --shimmer-y: 50%;
    background: var(--cor-cartao);
    backdrop-filter: var(--desfoque);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-g);
    padding: var(--esp-8) var(--esp-6);
    box-shadow: var(--sombra);
    position: relative;
    overflow: hidden;
    transition: transform 0.35s var(--suaviza-mola), border-color 0.3s, box-shadow 0.3s;
  }
  .cartao--brilho::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(circle 12.5rem at var(--shimmer-x) var(--shimmer-y),
      rgba(255, 255, 255, 0.07) 0%, transparent 70%);
    z-index: 1;
  }
  [data-tema="claro"] .cartao--brilho::before {
    background: radial-gradient(circle 12.5rem at var(--shimmer-x) var(--shimmer-y),
      rgba(15, 23, 42, 0.05) 0%, transparent 70%);
  }

  .cartao__titulo { color: var(--cor-texto); }
  .cartao__titulo--menor { font-size: 1rem; font-weight: 700; }
  .cartao__texto {
    color: var(--cor-texto-2);
    line-height: 1.65;
    margin-block-start: 0.375rem;
    font-size: var(--texto-14);
  }
  .cartao__corpo { display: flex; flex-direction: column; gap: var(--esp-1); }


  /* Cartão dor (vermelho sutil) */
  .cartao--dor {
    background: color-mix(in srgb, var(--cor-perigo) 4%, var(--cor-cartao));
    border-color: color-mix(in srgb, var(--cor-perigo) 12%, transparent);
  }
  .cartao--dor::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    opacity: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, color-mix(in srgb, var(--cor-perigo) 8%, transparent), transparent 70%);
    transition: opacity 0.3s;
  }
  .cartao--dor:hover {
    border-color: color-mix(in srgb, var(--cor-perigo) 30%, transparent);
    transform: translateY(-0.375rem);
    box-shadow: 0 1.25rem 2.5rem -0.75rem color-mix(in srgb, var(--cor-perigo) 12%, transparent);
  }
  .cartao--dor:hover::after { opacity: 1; }


  /* Cartão check (verde) */
  .cartao--check {
    display: flex;
    align-items: flex-start;
    gap: var(--esp-4);
    padding: var(--esp-5) var(--esp-4);
    border-radius: var(--raio-m);
  }
  .cartao--check:hover {
    border-color: color-mix(in srgb, var(--cor-sucesso) 25%, transparent);
    transform: translateY(-0.25rem);
    box-shadow: 0 0.75rem 1.75rem -0.5rem rgba(0, 0, 0, 0.3),
                0 0 1.25rem -0.625rem color-mix(in srgb, var(--cor-sucesso) 20%, transparent);
  }


  /* Cartão diferencial (azul) */
  .cartao--diferencial::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    opacity: 0;
    background: radial-gradient(ellipse 80% 50% at 50% 0%, color-mix(in srgb, var(--marca-azul) 8%, transparent), transparent 70%);
    transition: opacity 0.3s;
  }
  .cartao--diferencial:hover {
    transform: translateY(-0.5rem);
    border-color: var(--tonalidade-azul);
    box-shadow: var(--sombra), var(--sombra-azul);
  }
  .cartao--diferencial:hover::after { opacity: 1; }


  /* Ícone "molhado" */
  .cartao__icone-mol {
    inline-size: 2.75rem; block-size: 2.75rem;
    border-radius: var(--raio-pp);
    display: inline-flex; align-items: center; justify-content: center;
    margin-block-end: var(--esp-4);
    transition: transform 0.3s var(--suaviza-mola);
  }
  .cartao__icone-mol .icone { inline-size: 1.2rem; block-size: 1.2rem; }
  .cartao__icone-mol--dor   { background: var(--tonalidade-perigo); color: var(--cor-perigo); }
  .cartao__icone-mol--ok    {
    inline-size: 2.375rem; block-size: 2.375rem; min-inline-size: 2.375rem;
    margin-block-end: 0;
    background: var(--tonalidade-verde);
    border: 1px solid color-mix(in srgb, var(--cor-sucesso) 20%, transparent);
    color: var(--cor-sucesso);
  }
  .cartao__icone-mol--azul  {
    inline-size: 3rem; block-size: 3rem;
    background: color-mix(in srgb, var(--marca-azul) 10%, transparent);
    border: 1px solid var(--tonalidade-azul);
    color: var(--cor-acento-azul);
  }
  .cartao__icone-mol--azul .icone { inline-size: 1.3rem; block-size: 1.3rem; }
  .cartao--dor:hover         .cartao__icone-mol { transform: scale(1.08) rotate(-3deg); }
  .cartao--check:hover       .cartao__icone-mol { transform: scale(1.1); }
  .cartao--diferencial:hover .cartao__icone-mol {
    transform: scale(1.1) rotate(-5deg);
    background: color-mix(in srgb, var(--marca-azul) 15%, transparent);
    box-shadow: 0 0 1.25rem rgba(37, 99, 235, 0.2);
  }


  /* Solução */
  .solucao__envolve {
    display: flex;
    gap: var(--esp-12);
    align-items: center;
    flex-wrap: wrap;
  }
  .solucao__texto { flex: 2 1 18.75rem; }

  .secao__paragrafo {
    font-size: var(--texto-16);
    color: var(--cor-texto-2);
    margin: var(--esp-4) 0 var(--esp-8);
    max-inline-size: 31.25rem;
    line-height: 1.7;
  }

  .lista-marcadores { display: flex; flex-direction: column; gap: 0.875rem; }
  .lista-marcadores li {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    font-size: var(--texto-14);
    font-weight: 500;
    color: var(--cor-texto);
    transition: transform 0.2s;
  }
  .lista-marcadores li:hover { transform: translateX(0.3125rem); }
  .lista-marcadores .icone   { inline-size: 1rem; block-size: 1rem; color: var(--cor-sucesso); }
  .lista-marcadores--ambar .icone { color: var(--cor-acento); }


  .cartao-conversao {
    flex: 1 1 15rem;
    background: var(--cor-cartao);
    backdrop-filter: var(--desfoque);
    border: 1px solid var(--tonalidade-azul);
    border-radius: var(--raio-g);
    padding: var(--esp-8) var(--esp-6);
    text-align: center;
    box-shadow: var(--sombra);
    transition: transform 0.3s var(--suaviza-mola), box-shadow 0.3s;
  }
  .cartao-conversao:hover {
    transform: translateY(-0.375rem);
    box-shadow: var(--sombra), 0 0 3.75rem -0.9375rem color-mix(in srgb, var(--marca-azul) 30%, transparent);
  }
  .cartao-conversao__rotulo {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cor-acento-azul);
    margin-block-end: var(--esp-4);
    display: block;
  }
  .cartao-conversao__icone {
    inline-size: 2.8rem; block-size: 2.8rem;
    color: var(--cor-acento);
    margin: 0 auto var(--esp-4);
    filter: drop-shadow(0 0 0.875rem rgba(245, 158, 11, 0.4));
    animation: icone-flutua 3s ease-in-out infinite;
  }
  .cartao-conversao__texto {
    color: var(--cor-texto-2);
    line-height: 1.65;
    margin-block-end: var(--esp-5);
    font-size: var(--texto-14);
  }
  .cartao-conversao__selo {
    background: var(--tonalidade-verde);
    border: 1px solid color-mix(in srgb, var(--cor-sucesso) 25%, transparent);
    color: var(--marca-verde-clr);
    padding: 0.375rem 0.875rem;
    border-radius: var(--raio-circulo);
    font-size: 0.75rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
  }
  [data-tema="claro"] .cartao-conversao__selo { color: var(--cor-sucesso); }


  /* Estatísticas */
  .estatistica {
    background: color-mix(in srgb, var(--cor-cartao-solido) 65%, transparent);
    backdrop-filter: var(--desfoque-sutil);
    border: 1px solid color-mix(in srgb, var(--cor-texto) 12%, transparent);
    border-radius: 1.375rem;
    padding: var(--esp-4) var(--esp-5);
    text-align: center;
    transition: transform 0.3s var(--suaviza-mola), box-shadow 0.3s, border-color 0.3s;
    position: relative;
    overflow: hidden;
  }
  .estatistica:hover {
    transform: translateY(-0.25rem);
    border-color: color-mix(in srgb, var(--cor-acento-azul) 50%, transparent);
    box-shadow: 0 0.625rem 1.5rem -0.5rem var(--tonalidade-azul);
  }
  .estatistica__numero {
    font-family: var(--fonte-display);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--cor-texto);
    line-height: 1.2;
    display: inline-block;
  }
  .estatistica__sufixo { color: var(--cor-acento); font-size: 0.85em; }
  .estatistica__rotulo {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cor-texto-3);
    font-weight: 500;
  }


  /* Portfólio */
  .portfolio__cabecalho {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--esp-4);
    margin-block-end: var(--esp-10);
  }
  .portfolio__cabecalho .selo { margin-block-end: 0; }

  .cartao-projeto {
    background: var(--cor-cartao);
    backdrop-filter: var(--desfoque);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-g);
    display: flex;
    flex-direction: column;
    box-shadow: var(--sombra);
    overflow: hidden;
    transition: transform 0.4s var(--suaviza-mola), box-shadow 0.4s, border-color 0.4s;
  }
  .cartao-projeto:hover {
    transform: translateY(-0.5rem);
    box-shadow: 0 1.75rem 3.5rem -1rem rgba(0, 0, 0, 0.4),
                0 0 2.5rem -0.9375rem color-mix(in srgb, var(--marca-azul) 25%, transparent);
    border-color: color-mix(in srgb, var(--marca-azul-clr) 25%, transparent);
  }
  .cartao-projeto__cabecalho {
    padding: var(--esp-5);
    border-block-end: 1px solid var(--cor-divisor);
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    position: relative;
  }
  .cartao-projeto__cabecalho--laranja { border-block-start: 3px solid var(--marca-laranja); }
  .cartao-projeto__cabecalho--amarelo { border-block-start: 3px solid var(--marca-amarelo); }
  .cartao-projeto__cabecalho--verde   { border-block-start: 3px solid var(--marca-verde); }
  .cartao-projeto__cabecalho--roxo    { border-block-start: 3px solid var(--marca-roxo); }
  .cartao-projeto__cabecalho--azul    { border-block-start: 3px solid var(--marca-azul-clr); }

  .cartao-projeto__icone {
    inline-size: 1.6rem; block-size: 1.6rem;
    margin-block-end: var(--esp-1);
    color: var(--cor-texto-2);
    transition: transform 0.4s var(--suaviza-mola);
  }
  .cartao-projeto:hover .cartao-projeto__icone { animation: icone-saltita 0.6s var(--suaviza-mola); }

  .cartao-projeto__meta { display: flex; flex-direction: column; gap: 0.125rem; }
  .cartao-projeto__nicho { font-size: 0.75rem; color: var(--cor-texto-4); }

  .cartao-projeto__tags {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
    margin-block-start: var(--esp-1);
  }
  .tag {
    padding: 0.1875rem 0.625rem;
    border-radius: 0.9375rem;
    font-size: 0.68rem;
    font-weight: 500;
    display: inline-block;
  }
  .tag--azul    { background: color-mix(in srgb, var(--marca-azul-clr)  15%, transparent); color: #93C5FD; }
  .tag--laranja { background: color-mix(in srgb, var(--marca-laranja)   15%, transparent); color: #FDBA74; }
  .tag--amarelo { background: color-mix(in srgb, var(--marca-amarelo)   15%, transparent); color: #FDE047; }
  .tag--verde   { background: color-mix(in srgb, var(--marca-verde)     15%, transparent); color: #6EE7B7; }
  .tag--roxo    { background: color-mix(in srgb, var(--marca-roxo)      15%, transparent); color: #C4B5FD; }
  [data-tema="claro"] .tag--azul    { color: #1E40AF; }
  [data-tema="claro"] .tag--laranja { color: #C2410C; }
  [data-tema="claro"] .tag--amarelo { color: #854D0E; }
  [data-tema="claro"] .tag--verde   { color: #047857; }
  [data-tema="claro"] .tag--roxo    { color: #6D28D9; }

  .cartao-projeto__corpo {
    padding: var(--esp-5);
    display: flex; flex-direction: column;
    gap: var(--esp-3);
    flex: 1;
  }
  .cartao-projeto__bolha {
    background: color-mix(in srgb, var(--cor-sucesso) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--cor-sucesso) 20%, transparent);
    border-radius: var(--raio-pp);
    padding: var(--esp-2) var(--esp-3);
    font-size: 0.8rem;
    color: #86EFAC;
    font-weight: 500;
    font-style: italic;
  }
  [data-tema="claro"] .cartao-projeto__bolha { color: var(--cor-sucesso); }

  .cartao-projeto__link {
    color: var(--cor-acento-azul);
    font-weight: 600;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-block-start: auto;
    transition: gap 0.25s, color 0.25s;
  }
  .cartao-projeto__link:hover { gap: 0.75rem; color: #BFDBFE; }
  [data-tema="claro"] .cartao-projeto__link:hover { color: var(--marca-azul); }
  .cartao-projeto__link .icone { inline-size: 0.9rem; block-size: 0.9rem; }
}


/* ════════════════════════════════════════════════════════════════════
   12. COMPARATIVO (vs)
   ════════════════════════════════════════════════════════════════════ */
@layer componentes {
  .secao--comparativo { padding-block: var(--esp-12); }

  .comparativo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--esp-5);
    flex-wrap: wrap;
    max-inline-size: 50rem;
    margin-inline: auto;
  }

  .cartao--comparativo {
    flex: 1 1 15.625rem;
    text-align: center;
    padding: var(--esp-8) var(--esp-6);
    transition: transform 0.3s var(--suaviza-mola), box-shadow 0.3s;
  }
  .cartao--comparativo-ruim {
    background: color-mix(in srgb, var(--cor-perigo) 4%, transparent);
    border-color: color-mix(in srgb, var(--cor-perigo) 12%, transparent);
  }
  .cartao--comparativo-bom {
    background: color-mix(in srgb, var(--cor-sucesso) 4%, transparent);
    border-color: color-mix(in srgb, var(--cor-sucesso) 18%, transparent);
  }
  .cartao--comparativo-ruim:hover { transform: translateY(-0.25rem); box-shadow: 0 1.25rem 2.5rem -0.75rem color-mix(in srgb, var(--cor-perigo) 15%, transparent); }
  .cartao--comparativo-bom:hover  { transform: translateY(-0.25rem); box-shadow: 0 1.25rem 2.75rem -0.75rem color-mix(in srgb, var(--cor-sucesso) 20%, transparent); }

  .cartao--comparativo__icone {
    inline-size: 2.2rem; block-size: 2.2rem;
    margin: 0 auto var(--esp-3);
    transition: transform 0.3s var(--suaviza-mola);
  }
  .cartao--comparativo__icone--ruim { color: var(--cor-perigo); }
  .cartao--comparativo__icone--bom  { color: var(--cor-sucesso); }
  .cartao--comparativo:hover .cartao--comparativo__icone { transform: scale(1.1); }

  .cartao--comparativo__resultado {
    padding: var(--esp-2) var(--esp-4);
    border-radius: var(--raio-circulo);
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-block-start: var(--esp-4);
  }
  .cartao--comparativo__resultado--ruim { background: var(--tonalidade-perigo); color: #FCA5A5; }
  .cartao--comparativo__resultado--bom  { background: var(--tonalidade-verde);  color: #6EE7B7; }
  [data-tema="claro"] .cartao--comparativo__resultado--ruim { color: var(--cor-perigo); }
  [data-tema="claro"] .cartao--comparativo__resultado--bom  { color: var(--cor-sucesso); }

  .comparativo__vs {
    font-family: var(--fonte-display);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--cor-texto-4);
    flex-shrink: 0;
  }
}


/* ════════════════════════════════════════════════════════════════════
   13. PROCESSO (TRILHA DE PASSOS)
   ════════════════════════════════════════════════════════════════════ */
@layer componentes {
  .trilha-passos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
    gap: var(--esp-4);
    margin-block-start: var(--esp-12);
  }
  .passo {
    padding: var(--esp-6) var(--esp-5);
    background: var(--cor-cartao);
    backdrop-filter: var(--desfoque);
    border: 1px solid var(--cor-divisor);
    border-radius: var(--raio-g);
    box-shadow: var(--sombra);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s var(--suaviza-mola), border-color 0.3s, box-shadow 0.3s;
  }
  .passo:hover {
    transform: translateY(-0.375rem);
    border-color: var(--tonalidade-azul);
    box-shadow: var(--sombra), 0 0 1.875rem -0.625rem color-mix(in srgb, var(--marca-azul) 25%, transparent);
  }
  .passo__numero {
    font-family: var(--fonte-display);
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    font-weight: 800;
    line-height: 1;
    margin-block-end: var(--esp-3);
    background: linear-gradient(145deg, color-mix(in srgb, var(--cor-texto-3) 40%, transparent), color-mix(in srgb, var(--cor-texto-2) 15%, transparent));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    transition: background 0.4s, filter 0.4s;
    display: block;
  }
  .passo:hover .passo__numero {
    background: linear-gradient(145deg, var(--marca-azul-clr), var(--marca-ambar));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 0.5rem rgba(59, 130, 246, 0.4));
  }
}


/* ════════════════════════════════════════════════════════════════════
   14. VÍDEO
   ════════════════════════════════════════════════════════════════════ */
@layer componentes {
  .secao--video { padding-block: clamp(4rem, 9vw, 6.25rem); }

  .video__envolve {
    display: flex; align-items: center;
    gap: var(--esp-12);
    flex-wrap: wrap;
  }
  .video__texto  { flex: 1 1 18.75rem; }
  .video__player { flex: 1 1 25rem; display: flex; flex-direction: column; align-items: center; }

  .video__moldura {
    position: relative;
    inline-size: 100%;
    max-inline-size: 35rem;
    background: var(--cor-cartao);
    backdrop-filter: blur(1rem);
    border-radius: var(--raio-g);
    padding: var(--esp-2);
    box-shadow: 0 1.25rem 2.5rem -0.625rem rgba(0, 0, 0, 0.4);
    transition: transform 0.4s var(--suaviza), box-shadow 0.4s;
  }
  .video__moldura::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: calc(var(--raio-g) + 1px);
    background: linear-gradient(135deg,
      color-mix(in srgb, var(--marca-azul) 40%, transparent),
      color-mix(in srgb, var(--marca-ambar) 30%, transparent),
      color-mix(in srgb, var(--marca-verde) 20%, transparent));
    z-index: -1;
    opacity: 0.6;
    transition: opacity 0.3s;
  }
  .video__moldura:hover {
    transform: translateY(-0.3125rem);
    box-shadow: 0 1.5rem 3rem -0.75rem rgba(0, 0, 0, 0.5),
                0 0 3.75rem -0.9375rem color-mix(in srgb, var(--marca-azul) 30%, transparent);
  }
  .video__moldura:hover::before { opacity: 1; }

  .video__duracao {
    position: absolute;
    inset-block-start: var(--esp-4); inset-inline-end: var(--esp-4);
    z-index: 2;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(0.5rem);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--marca-ambar-clr);
    font-family: var(--fonte-display);
    font-weight: 700;
    font-size: 0.7rem;
    padding: 0.25rem 0.75rem;
    border-radius: 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
  }
  .video__duracao .icone { inline-size: 0.8rem; block-size: 0.8rem; }

  .video__elemento {
    inline-size: 100%;
    border-radius: calc(var(--raio-g) - 0.25rem);
    background: #000;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
  .video__legenda {
    font-size: 0.8rem;
    color: var(--cor-texto-4);
    text-align: center;
    margin-block-start: 0.875rem;
  }
}


/* ════════════════════════════════════════════════════════════════════
   15. CTA FINAL + CRÉDITO DEV
   ════════════════════════════════════════════════════════════════════ */
@layer componentes {
  .secao--cta { padding-block-end: var(--esp-12); }

  .cta {
    position: relative;
    background: var(--cor-cartao);
    backdrop-filter: blur(1.25rem);
    border-radius: var(--raio-gg);
    padding: 3.75rem 3rem;
    text-align: center;
    isolation: isolate;
    box-shadow: 0 1.875rem 3.125rem -0.9375rem rgba(0, 0, 0, 0.5);
  }
  .cta::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: calc(var(--raio-gg) + 1px);
    background: linear-gradient(135deg,
      color-mix(in srgb, var(--marca-azul)  50%, transparent),
      color-mix(in srgb, var(--marca-ambar) 40%, transparent),
      color-mix(in srgb, var(--marca-verde) 30%, transparent),
      color-mix(in srgb, var(--marca-azul)  50%, transparent));
    background-size: 300% 300%;
    z-index: -1;
    opacity: 0.7;
    animation: cta-borda-flui 8s ease-in-out infinite;
  }
  .cta::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: calc(var(--raio-gg) - 1px);
    background: color-mix(in srgb, var(--cor-fundo) 96%, transparent);
    backdrop-filter: blur(1.25rem);
    z-index: -1;
  }

  .cta__rotulo {
    display: inline-block;
    background: color-mix(in srgb, var(--marca-azul) 10%, transparent);
    border: 1px solid var(--tonalidade-azul);
    color: var(--cor-acento-azul);
    padding: 0.375rem 1.25rem;
    border-radius: var(--raio-circulo);
    font-size: 0.8rem;
    font-weight: 500;
    margin-block-end: var(--esp-6);
  }
  .cta__paragrafo {
    font-size: var(--texto-16);
    color: var(--cor-texto-2);
    max-inline-size: 31.25rem;
    margin: 0 auto var(--esp-4);
    line-height: 1.7;
  }
  .cta__escassez {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-3);
    font-size: 0.85rem;
    color: var(--cor-texto-2);
    margin-block-end: var(--esp-2);
  }
  .cta__escassez strong { color: var(--cor-texto); }
  .cta__nota {
    margin-block-start: var(--esp-5);
    font-size: 0.8rem;
    color: var(--cor-texto-4);
  }


  /* Crédito do desenvolvedor */
  .credito-dev {
    margin-block-start: var(--esp-12);
    display: flex;
    justify-content: center;
  }
  .credito-dev__link {
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 2rem;
    background: color-mix(in srgb, var(--cor-cartao-solido) 70%, transparent);
    backdrop-filter: blur(1rem);
    border: 1.5px solid color-mix(in srgb, var(--marca-azul-clr) 45%, transparent);
    border-radius: 3.75rem;
    color: var(--cor-texto-2);
    font-size: 1rem;
    font-weight: 500;
    transition: transform 0.4s var(--suaviza-mola), border-color 0.4s, color 0.4s, box-shadow 0.4s;
    box-shadow: 0 0.625rem 1.75rem -0.5rem rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  .credito-dev__link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent, color-mix(in srgb, var(--marca-azul-clr) 18%, transparent) 40%, color-mix(in srgb, var(--marca-ambar) 18%, transparent) 60%, transparent);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s;
  }
  .credito-dev__link:hover::before { opacity: 1; }
  .credito-dev__link:hover {
    border-color: var(--cor-acento);
    color: var(--cor-texto);
    transform: translateY(-0.375rem) scale(1.03);
    box-shadow: 0 1.375rem 2.75rem -0.75rem color-mix(in srgb, var(--marca-azul) 45%, transparent),
                0 0 0 2px color-mix(in srgb, var(--marca-ambar) 20%, transparent);
  }
  .credito-dev__icone {
    inline-size: 2.25rem; block-size: 2.25rem;
    background: color-mix(in srgb, var(--marca-azul) 20%, transparent);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform 0.4s, background 0.4s, color 0.4s, box-shadow 0.4s;
  }
  .credito-dev__icone .icone { inline-size: 1.1em; block-size: 1.1em; }
  .credito-dev__link:hover .credito-dev__icone {
    background: color-mix(in srgb, var(--cor-acento) 25%, transparent);
    color: var(--cor-acento);
    transform: rotate(6deg) scale(1.1);
    box-shadow: 0 0 1.25rem color-mix(in srgb, var(--cor-acento) 40%, transparent);
  }
  .credito-dev__nome {
    font-weight: 800;
    font-size: 1.15rem;
    background: linear-gradient(135deg, #FDE68A, var(--marca-ambar-clr), #60A5FA);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: nome-brilha 3s ease-in-out infinite, destaque-desliza 5s ease infinite alternate;
  }
  [data-tema="claro"] .credito-dev__nome {
    background: linear-gradient(135deg, var(--cor-acento-clr), var(--marca-azul));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .credito-dev__selo {
    background: linear-gradient(145deg, #1A3458, #0A1628);
    padding: 0.3125rem 0.875rem;
    border-radius: 2.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--marca-azul-clr);
    border: 1px solid color-mix(in srgb, var(--marca-azul) 40%, transparent);
    transition: all 0.4s;
  }
  [data-tema="claro"] .credito-dev__selo {
    background: linear-gradient(145deg, #DBEAFE, #BFDBFE);
    color: var(--marca-azul);
  }
  .credito-dev__link:hover .credito-dev__selo {
    background: linear-gradient(145deg, var(--marca-ambar-clr), var(--marca-ambar));
    color: #0A0A0A;
    border-color: var(--cor-acento);
    box-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--cor-acento) 30%, transparent);
  }
}


/* ════════════════════════════════════════════════════════════════════
   16. RODAPÉ
   ════════════════════════════════════════════════════════════════════ */
@layer componentes {
  .rodape {
    border-block-start: 1px solid var(--cor-divisor);
    background: linear-gradient(180deg, color-mix(in srgb, var(--cor-fundo) 50%, transparent), color-mix(in srgb, var(--cor-fundo) 95%, transparent));
    backdrop-filter: blur(0.625rem);
    padding-block: var(--esp-10);
    margin-block-start: var(--esp-5);
    position: relative;
  }
  .rodape::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline: 20%;
    block-size: 1px;
    background: linear-gradient(90deg, transparent, var(--cor-acento), transparent);
    opacity: 0.4;
  }

  .rodape__topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--esp-6);
  }

  .rodape__marca {
    display: flex;
    align-items: center;
    gap: var(--esp-2);
    font-family: var(--fonte-display);
    font-size: 1rem;
  }
  .rodape__logo { inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%; }
  .rodape__marca strong { font-weight: 700; }
  .rodape__marca span { color: var(--cor-texto-4); font-weight: 400; }

  .rodape__links {
    display: flex;
    gap: var(--esp-7, 1.75rem);
    flex-wrap: wrap;
    align-items: center;
  }
  .rodape__links a {
    color: var(--cor-texto-2);
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
    padding-block: var(--esp-1);
    transition: color 0.3s, transform 0.3s;
  }
  .rodape__links a .icone { inline-size: 1.1em; block-size: 1.1em; }
  .rodape__links a:hover  { color: var(--cor-acento); transform: translateY(-2px); }


  .rodape__copy {
    text-align: center;
    padding-block-start: var(--esp-5);
    margin-block-start: var(--esp-3);
    font-size: 0.82rem;
    color: var(--cor-texto-4);
    border-block-start: 1px dashed var(--cor-divisor);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .rodape__copy-bolha {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
    background: color-mix(in srgb, var(--cor-fundo-2) 30%, transparent);
    padding: var(--esp-2) 1.375rem;
    border-radius: 2.5rem;
    backdrop-filter: blur(0.5rem);
    border: 1px solid var(--cor-divisor);
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
  }
  .rodape__copy-bolha:hover {
    background: color-mix(in srgb, var(--cor-fundo-2) 50%, transparent);
    border-color: var(--tonalidade-azul);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.2);
  }
  .rodape__copy-bolha .icone { color: var(--cor-acento); inline-size: 0.85rem; block-size: 0.85rem; animation: pen-fade 3s ease-in-out infinite; }

  .rodape__link-dev {
    font-family: var(--fonte-display);
    font-weight: 700;
    background: linear-gradient(135deg, #FDE68A, var(--marca-ambar-clr), #60A5FA);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    position: relative;
    transition: text-shadow 0.25s;
  }
  [data-tema="claro"] .rodape__link-dev {
    background: linear-gradient(135deg, var(--cor-acento-clr), var(--marca-azul));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .rodape__link-dev::after {
    content: '';
    position: absolute;
    inset-inline-start: 0; inset-block-end: -2px;
    inline-size: 100%; block-size: 1px;
    background: linear-gradient(90deg, transparent, var(--cor-acento), transparent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s;
  }
  .rodape__link-dev:hover { text-shadow: 0 0 0.625rem color-mix(in srgb, var(--cor-acento) 60%, transparent); }
  .rodape__link-dev:hover::after { transform: scaleX(1); }

  .rodape__visitas {
    text-align: center;
    margin-block-start: var(--esp-3);
    font-size: 0.78rem;
    color: var(--cor-texto-4);
    opacity: 0.85;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.375rem;
  }
  .rodape__visitas .icone { color: var(--cor-acento); inline-size: 0.85rem; block-size: 0.85rem; }
}


/* ════════════════════════════════════════════════════════════════════
   17. WHATSAPP FLUTUANTE + VOLTAR-AO-TOPO
   ════════════════════════════════════════════════════════════════════ */
@layer componentes {
  .whats-flutuante {
    display: none;
    position: fixed;
    inset-block-end: 1.25rem;
    inset-inline-start: 50%;
    transform: translateX(-50%) translateY(6.25rem);
    z-index: 60;
    background: linear-gradient(135deg, #22C55E, #15803D);
    color: #fff;
    font-family: var(--fonte-display);
    font-weight: 700;
    font-size: 0.9rem;
    padding: var(--esp-3) 1.75rem;
    border-radius: var(--raio-circulo);
    gap: var(--esp-2);
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.5rem 1.5rem rgba(34, 197, 94, 0.4), 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3);
    min-block-size: 3rem;
    white-space: nowrap;
    animation: flutua-entra 0.5s 1.2s var(--suaviza-mola) forwards;
    transition: transform 0.3s var(--suaviza-mola), box-shadow 0.3s;
  }
  .whats-flutuante:hover  { transform: translateX(-50%) translateY(-2px); box-shadow: 0 0.75rem 2rem rgba(34, 197, 94, 0.5); }
  .whats-flutuante:active { transform: translateX(-50%) scale(0.96); }
  .whats-flutuante .icone { inline-size: 1.1em; block-size: 1.1em; }


  .voltar-topo {
    position: fixed;
    inset-block-end: 1.5rem;
    inset-inline-end: 1.5rem;
    inline-size: 3rem; block-size: 3rem;
    border-radius: 50%;
    background: linear-gradient(145deg, color-mix(in srgb, var(--marca-azul) 90%, transparent), color-mix(in srgb, var(--cor-fundo-2) 95%, transparent));
    border: 1px solid color-mix(in srgb, var(--marca-azul-clr) 40%, transparent);
    color: var(--cor-texto);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    cursor: pointer;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.4);
    opacity: 0; visibility: hidden;
    transform: translateY(1.25rem) scale(0.8);
    transition: opacity 0.4s var(--suaviza-mola),
                transform 0.4s var(--suaviza-mola),
                visibility 0.4s,
                box-shadow 0.3s,
                background 0.3s;
    backdrop-filter: blur(0.625rem);
  }
  .voltar-topo.is-visivel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); animation: voltar-pulsa 2.5s ease-in-out infinite; }
  .voltar-topo:hover {
    background: linear-gradient(145deg, var(--cor-acento), var(--cor-acento-clr));
    border-color: var(--cor-acento);
    box-shadow: 0 0.75rem 2rem color-mix(in srgb, var(--cor-acento) 40%, transparent), 0 0 0 4px color-mix(in srgb, var(--cor-acento) 15%, transparent);
    transform: translateY(-3px) scale(1.05);
  }
  .voltar-topo:active { transform: translateY(0) scale(0.95); }
  .voltar-topo .icone { inline-size: 1.1rem; block-size: 1.1rem; transition: transform 0.3s var(--suaviza-mola); }
  .voltar-topo:hover .icone { transform: translateY(-2px); }
}


/* ════════════════════════════════════════════════════════════════════
   18. KEYFRAMES
   ════════════════════════════════════════════════════════════════════ */
@layer motion {
  @keyframes carregador-aparece { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: translateY(0); } }
  @keyframes carregador-barra   { 0% { inline-size: 0; opacity: 0.6; } 100% { inline-size: 12.5rem; opacity: 1; } }

  @keyframes brilho-pulsa  { 0%, 100% { opacity: 0.9; } 50% { opacity: 1; } }
  @keyframes ponto-pulsa   { 0%, 100% { box-shadow: 0 0 0.375rem currentColor; } 50% { box-shadow: 0 0 0.875rem currentColor; } }
  @keyframes ponto-pulsa-suave {
    0%, 100% { opacity: 0.9; box-shadow: 0 0 0 0 rgba(245,158,11,0.4); }
    50%      { opacity: 1;   box-shadow: 0 0 0 0.375rem rgba(245,158,11,0); }
  }

  @keyframes aurora-flutua-1 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(12.5rem, 6.25rem) scale(1.2); } }
  @keyframes aurora-flutua-2 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-11.25rem, -7.5rem) scale(1.15); } }
  @keyframes aurora-flutua-3 {
    0%   { transform: translate(-50%, -50%) scale(1); }
    100% { transform: translate(calc(-50% + 6.25rem), calc(-50% - 5rem)) scale(1.1); }
  }

  @keyframes progresso-flui { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

  @keyframes linha-revela    { from { transform: translateY(110%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

  @keyframes destaque-brilha {
    0%, 100% { filter: drop-shadow(0 0 0.3125rem rgba(245,158,11,0.4)); }
    50%      { filter: drop-shadow(0 0 0.75rem  rgba(245,158,11,0.6)); }
  }
  @keyframes destaque-desliza { 0% { background-position: 0% center; } 100% { background-position: 100% center; } }

  @keyframes marquee-rola { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  @keyframes selo-brilha     { 0% { inset-inline-start: -100%; } 50%, 100% { inset-inline-start: 160%; } }

  @keyframes pulso-suave {
    0%, 100% { box-shadow: 0 0.375rem 1rem rgba(37,211,102,0.3); }
    50%      { box-shadow: 0 0.375rem 1.75rem rgba(37,211,102,0.55); }
  }
  @keyframes ripple-expande  { to { transform: translate(-50%, -50%) scale(40); opacity: 0; } }

  @keyframes icone-flutua    { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.375rem); } }
  @keyframes icone-saltita {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.25) rotate(-5deg); }
    70%  { transform: scale(0.95) rotate(3deg); }
    100% { transform: scale(1.08); }
  }

  @keyframes cta-borda-flui  { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
  @keyframes nome-brilha {
    0%, 100% { filter: drop-shadow(0 0 0.375rem rgba(251,191,36,0.5)); }
    50%      { filter: drop-shadow(0 0 0.875rem rgba(59,130,246,0.8)); }
  }
  @keyframes pen-fade { 0%, 100% { opacity: 0.6; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-0.1875rem); } }

  @keyframes flutua-entra { to { transform: translateX(-50%) translateY(0); } }
  @keyframes voltar-pulsa {
    0%, 100% { box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.4), 0 0 0 0   rgba(59, 130, 246, 0.3); }
    50%      { box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.4), 0 0 0 0.5rem rgba(59, 130, 246, 0); }
  }
}


/* ════════════════════════════════════════════════════════════════════
   19. REVEAL ON-SCROLL
   ════════════════════════════════════════════════════════════════════ */
@layer componentes {
  .revela {
    opacity: 0;
    transform: translateY(1.75rem);
    transition: opacity 0.7s var(--suaviza), transform 0.7s var(--suaviza);
  }
  .revela.is-visivel { opacity: 1; transform: translateY(0); }
}


/* ════════════════════════════════════════════════════════════════════
   20. RESPONSIVIDADE  (mobile-first com adições por breakpoint)
   ════════════════════════════════════════════════════════════════════ */
@layer responsivo {

  /* Tablets em retrato em diante */
  @media (min-width: 30em) {           /* 480 px */
    /* Nada por enquanto — base já cobre */
  }

  /* Tablets em paisagem */
  @media (min-width: 48em) {           /* 768 px */
    /* Nada por enquanto */
  }

  /* Esconde hamburger / mostra nav inline */
  @media (min-width: 56.25em) {        /* 900 px */
    .navegacao__lista { display: flex; }
    .hamburguer       { display: none; }
    .whats-flutuante  { display: none; }
  }

  @media (min-width: 64em) {           /* 1024 px */
    /* Tunings visuais para desktop maior */
  }

  /* ── Override mobile (até 56.25em) ── */
  @media (max-width: 56.1875em) {      /* < 900 px */
    .navegacao__lista { display: none; }
    .hamburguer       { display: inline-flex; }
    .navegacao__cta span { display: none; }
    .navegacao__cta      { padding: var(--esp-2); inline-size: 2.5rem; block-size: 2.5rem; }
    .whats-flutuante  { display: inline-flex; }

    .video__envolve   { flex-direction: column; }
    .trilha-passos    { grid-template-columns: 1fr; }
  }

  /* ── Mobile médio ── */
  @media (max-width: 48em) {           /* < 768 px */
    .secao { padding-block: clamp(3rem, 8vw, 4.375rem); }
    .pain-grid, .grade-cartoes--3, .grade-cartoes--auto, .grade-cartoes--auto-w { grid-template-columns: 1fr; }
    .comparativo      { gap: var(--esp-3); }
    .cartao--comparativo { flex: 1 1 100%; }
    .comparativo__vs  { inline-size: 100%; text-align: center; }
    .portfolio__cabecalho { flex-direction: column; align-items: flex-start; }
    .cta              { padding: var(--esp-12) var(--esp-8); border-radius: var(--raio-g); }
    .cta::before      { border-radius: calc(var(--raio-g) + 1px); }
    .cta::after       { border-radius: calc(var(--raio-g) - 1px); }

    .escassez         { flex-direction: column; align-items: flex-start; }
    .hero__acoes      { inline-size: 100%; }
  }

  /* ── Mobile pequeno ── */
  @media (max-width: 40em) {           /* < 640 px */
    .hero { min-block-size: auto; padding-block: 6.25rem 2.5rem; }
    .hero__layout { gap: var(--esp-8); }
    .hero__estatisticas {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      gap: var(--esp-3);
      inline-size: 100%;
    }
    .estatistica       { flex: 1 1 6.25rem; min-inline-size: 6.25rem; padding: 0.875rem 0.75rem; border-radius: 1.125rem; }
    .estatistica__numero { font-size: 1.8rem; }

    .marquee           { margin-block-start: var(--esp-10); padding-block: var(--esp-3); }
    .marquee__pilula   { font-size: 0.7rem; padding: 0.375rem 0.875rem; }

    .botao             { inline-size: 100%; padding: var(--esp-3) var(--esp-5); font-size: 0.9rem; }

    .voltar-topo       { inset-block-end: 5rem; inset-inline-end: 1rem; inline-size: 2.75rem; block-size: 2.75rem; }
  }

  /* ── Mobile mínimo ── */
  @media (max-width: 22.5em) {         /* < 360 px */
    .container         { inline-size: min(100% - 1.5rem, var(--largura-container)); }
    .menu-mobile__link { font-size: 1.5rem; }
  }

  /* ── Background overhaul mobile ── */
  @media (max-width: 48em) {
    .fundo-aurora { opacity: 0.7; filter: blur(4.375rem); }
    .fundo-aurora__no--1 { inline-size: 75vw; block-size: 75vw; inset-block-start: -20vw; inset-inline-start: -15vw; }
    .fundo-aurora__no--2 { inline-size: 65vw; block-size: 65vw; inset-block-end: -15vw; inset-inline-end: -15vw; }
    .fundo-aurora__no--3 { inline-size: 60vw; block-size: 60vw; }

    .fundo-marca         { display: none; }
    .fundo-estrelas      { display: block; }
  }
}


/* ════════════════════════════════════════════════════════════════════
   21. TOUCH FEEDBACK (sem hover) — substitui hover no mobile
   ════════════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  .cartao:active,
  .cartao-projeto:active,
  .cartao-conversao:active,
  .estatistica:active,
  .passo:active {
    transform: scale(0.98);
    transition: transform 0.12s ease;
  }
  .cartao-projeto__link:active { color: var(--cor-acento); }
  a, button { -webkit-tap-highlight-color: transparent; }
  .cursor-brilho { display: none; }
}


/* ════════════════════════════════════════════════════════════════════
   22. SAFE AREA — iPhones com notch
   ════════════════════════════════════════════════════════════════════ */
@supports (padding: max(0px)) {
  .navegacao {
    padding-inline-start: max(var(--esp-6), env(safe-area-inset-left));
    padding-inline-end:   max(var(--esp-6), env(safe-area-inset-right));
  }
  .whats-flutuante { inset-block-end: max(1rem, env(safe-area-inset-bottom)); }
  .voltar-topo {
    inset-block-end: max(1.5rem, env(safe-area-inset-bottom));
    inset-inline-end: max(1.5rem, env(safe-area-inset-right));
  }
  @media (max-width: 48em) {
    .voltar-topo {
      inset-block-end: max(5rem, calc(env(safe-area-inset-bottom) + 4rem));
      inset-inline-end: max(1rem, env(safe-area-inset-right));
    }
  }
}


/* ════════════════════════════════════════════════════════════════════
   23. ACESSIBILIDADE — prefers-reduced-motion (sempre por último)
   ════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .revela, .hero-entra { opacity: 1; transform: none; }
  .hero__linha > * { opacity: 1; transform: none; animation: none; }
  .cursor-brilho, .ripple { display: none; }
  .marquee__trilha { animation: none; }
  .fundo-aurora { display: none; }
  .carregador { display: none; }
}