/* Vert Analytics — combined CSS · build 0c51ee5954 */

/* === tokens.css === */
/* =============================================================
   VERT ANALYTICS — DESIGN SYSTEM TOKENS
   Identidade visual aprovada em 2024. Alterações aqui propagam
   para todo o tema. Sem hex codes soltos em componentes.
   ============================================================= */

/* =============================================================
   BREAKPOINTS CANÔNICOS — Vert Analytics (briefing seção 10)
   Mobile-first OBRIGATÓRIO. CSS puro não suporta @custom-media;
   os valores abaixo são USADOS COMO LITERAIS em media queries.

     --bp-sm:  375px   → mobile padrão (iPhone 12/13/14, Android)
     --bp-md:  768px   → tablet retrato
     --bp-lg:  1280px  → laptop / desktop
     --bp-2xl: 1440px  → desktop largo

   Banir: 360, 420, 479, 480, 560, 640, 900, 1023, 1024
   Mobile-first: @media (min-width: 768px) { ... }
   Override sub-bp: @media (max-width: 374px), (max-width: 767px),
                    (max-width: 1279px)

   Nota: 1024px NÃO é breakpoint próprio. Telas tipo Nest Hub
   (1024×600) e iPad landscape ficam no bucket "tablet" (768-1279),
   mantendo layout simplificado. Desktop só ativa em ≥ 1280px.
   ============================================================= */

:root {
  /* ---------- CORES ----------------------------------------- */
  /* Primárias */
  --color-navy:         #101A3B;   /* fundo principal */
  --color-green:        #00DE97;   /* CTAs, acentos, métricas */
  --color-white:        #FFFFFF;   /* texto principal sobre navy */

  /* Secundárias (uso pontual) — Manual da Marca 2024 (8 cores) */
  --color-blue:         #0096DE;  /* azul claro */
  --color-teal:         #00DDDE;  /* ciano */
  --color-green-turq:   #00DE93;  /* verde-turquesa */
  --color-green-vivid:  #00DE49;  /* verde-vivo */
  --color-royal:        #1F50E0;  /* azul vivo — "o mais usado hoje" */
  --color-blue-mid:     #1751A5;  /* azul médio */
  --color-navy-mid:     #1A3663;  /* navy secundário */
  --color-navy-ink:     #041023;  /* navy quase-preto (áreas profundas) */

  /* Navy em tons derivados (fundos escalonados do mockup) */
  --color-navy-deep:    #080F22;   /* footer / áreas mais escuras */
  --color-navy-card:    #0D1530;   /* cards, partners bar */
  --color-navy-soft:    #0F1C3A;   /* hover sutil em cards */
  --color-navy-alt:     #0D2040;   /* hero gradient mid-stop */
  --color-navy-wash:    #0A2A3A;   /* hero gradient end */
  --color-navy-card-alt:#1a2847;   /* gradient endpoint em cards escuros */

  /* Cores de estado — gauge, alertas */
  --color-green-hover:  #14e9a1;   /* verde ~5% mais claro para hovers */
  --color-amber:        #ffc107;   /* gauge nível médio */
  --color-orange:       #ff9800;   /* gauge nível avançado */

  /* Variantes acessíveis (WCAG AA) das cores de marca — para TEXTO:
     as originais falham como texto pequeno (royal 2.6:1 sobre navy;
     verde 1.8:1 sobre branco). Usar ESTAS quando a cor de marca for
     texto informativo; as puras seguem valendo para fundos/acentos. */
  --color-royal-soft:   #8AA6FF;   /* royal clareado — texto sobre navy (≥4.8:1 no pior fundo) */
  --color-green-ink:    #007D57;   /* verde escurecido — texto/link sobre branco (5.2:1) */
  /* onda 2b — variantes de produto p/ TEXTO/traço fino sobre fundo de baixo
     contraste. Regra: teal puro falha como texto no claro (1.4:1) e violeta puro
     falha no escuro (2.7:1) → usar ink (escurecido, p/ fundo CLARO) ou soft
     (clareado, p/ fundo ESCURO) quando a cor de produto virar texto/traço. */
  --color-teal-ink:     #08696B;   /* teal escurecido — texto/traço sobre claro #E8E9EC (5.33:1) */
  --color-violet-soft:  #B283F8;   /* violeta clareado — texto/traço sobre navy (6.08:1) */

  /* Alphas brancos — usados para borders, divisores, textos
     secundários sobre fundo navy. Substituem "cinzas". */
  --alpha-wht-90:       rgba(255,255,255,.90);
  --alpha-wht-70:       rgba(255,255,255,.70);
  --alpha-wht-60:       rgba(255,255,255,.60);
  --alpha-wht-50:       rgba(255,255,255,.50);
  --alpha-wht-42:       rgba(255,255,255,.42);
  --alpha-wht-38:       rgba(255,255,255,.38);
  --alpha-wht-28:       rgba(255,255,255,.28);
  --alpha-wht-22:       rgba(255,255,255,.22);
  --alpha-wht-10:       rgba(255,255,255,.10);
  --alpha-wht-08:       rgba(255,255,255,.08);
  --alpha-wht-06:       rgba(255,255,255,.06);
  --alpha-wht-04:       rgba(255,255,255,.04);
  --alpha-wht-03:       rgba(255,255,255,.03);
  --alpha-wht-12:       rgba(255,255,255,.12);
  --alpha-wht-15:       rgba(255,255,255,.15);

  /* Alphas verdes — badges, halos, shadows coloridas */
  --alpha-grn-40:       rgba(0,222,151,.40);
  --alpha-grn-30:       rgba(0,222,151,.30);
  --alpha-grn-25:       rgba(0,222,151,.25);
  --alpha-grn-20:       rgba(0,222,151,.20);
  --alpha-grn-15:       rgba(0,222,151,.15);
  --alpha-grn-12:       rgba(0,222,151,.12);
  --alpha-grn-10:       rgba(0,222,151,.10);
  --alpha-grn-08:       rgba(0,222,151,.08);
  --alpha-grn-05:       rgba(0,222,151,.05);
  --alpha-grn-02:       rgba(0,222,151,.02);
  --alpha-grn-015:      rgba(0,222,151,.015);

  /* Alphas azul vivo (royal) — hover/active states, detalhes interativos */
  --alpha-roy-40:       rgba(31,80,224,.40);
  --alpha-roy-30:       rgba(31,80,224,.30);
  --alpha-roy-20:       rgba(31,80,224,.20);
  --alpha-roy-15:       rgba(31,80,224,.15);
  --alpha-roy-10:       rgba(31,80,224,.10);
  --alpha-roy-08:       rgba(31,80,224,.08);

  /* Semânticas — sempre referenciar estas nos componentes */
  --bg-page:            var(--color-navy);
  --bg-surface:         var(--color-navy);       /* unificado: uma cor de fundo pra página toda */
  --bg-surface-hover:   var(--color-navy-soft);
  --bg-deep:            var(--color-navy-deep);  /* footer mantém mais escuro */
  --bg-card:            var(--color-navy-card);  /* cards mantêm contraste sutil */

  /* ---------- SUPERFÍCIES DE SEÇÃO (ritmo claro↔escuro da home) -----
     Pedido MKT 2026-05-26: contraste/pausa pela alternância navy ↔ claro,
     usando só as cores base (navy/branco/verde). Verde/azul como acento. */
  --surface-light:      #E8E9EC;   /* seções claras (cinza oficial da marca) */
  --text-on-light:      #101A3B;            /* títulos/navy sobre claro */
  --text-on-light-muted: rgba(16,26,59,.66); /* labels/secundário sobre claro */

  --text-primary:       var(--color-white);
  --text-secondary:     var(--alpha-wht-70);  /* WCAG AA sobre navy: ~9.4:1 */
  --text-muted:         var(--alpha-wht-60);  /* WCAG AA sobre navy: ~6.8:1 */
  --text-faint:         var(--alpha-wht-22);  /* decorativo apenas — não usar em texto informativo */
  --text-accent:        var(--color-green);

  --border-subtle:      var(--alpha-wht-06);
  --border-default:     var(--alpha-wht-08);
  --border-strong:      var(--alpha-wht-10);
  --border-accent:      var(--alpha-grn-40);

  /* ---------- CORES DE IDENTIDADE POR PRODUTO (fundação — onda 1) ----
     Base para dar a cada página de produto seu acento de marca. NESTA
     onda apenas DEFINIMOS e EXPOMOS os tokens; NENHUM componente os
     consome ainda (steps, ícones, hovers, eyebrows seguem como estão),
     logo NÃO há mudança visual agora. Ondas seguintes trocam os valores
     hardcoded dos componentes por var(--product-accent).

     Identidade por produto (decidida com o Gabriel):
       Analytics → verde (primário) + royal (secundário) — paleta Vert
       CyndIA    → royal
       ONDA      → teal/ciano (primário) + violeta (secundário)
       MAIN      → verde
     O violeta do ONDA foi EXTRAÍDO do logo vetorial oficial: fill do
     ONDA_Logo_Mono-Roxo.svg e stop final do gradiente de ONDA_Logo.svg
     (vert-mkt/referencias/logos/SVG/ONDA/). */
  --color-onda-violet:       #8306F3;   /* violeta oficial do ONDA (extraído do logo) */

  --prod-analytics-accent:   var(--color-green);        /* #00DE97 */
  --prod-analytics-accent-2: var(--color-royal);        /* #1F50E0 */
  --prod-cyndia-accent:      var(--color-royal);        /* #1F50E0 */
  --prod-onda-accent:        var(--color-teal);         /* #00DDDE */
  --prod-onda-accent-2:      var(--color-onda-violet);  /* #8306F3 */
  --prod-main-accent:        var(--color-green);        /* #00DE97 */

  /* Tinta do dígito SOBRE o acento (contraste por luminância): navy sobre
     acentos claros (verde/teal), branco sobre o royal escuro. Usado no
     círculo aceso do "Como funciona" (onda 2a). */
  --prod-analytics-ink:      var(--color-navy);
  --prod-cyndia-ink:         var(--color-white);
  --prod-onda-ink:           var(--color-navy);
  --prod-main-ink:           var(--color-navy);

  /* Genéricos consumidos pelos componentes (onda 2a em diante: "Como
     funciona" e o grid de features). O valor real é atribuído por página
     no bloco body.* logo após o :root; fora das páginas de produto ficam
     nestes defaults seguros. */
  --product-accent:          var(--color-green);
  --product-accent-2:        var(--color-royal);
  --product-accent-ink:      var(--color-navy);

  /* ---------- GRADIENTES ----------------------------------- */
  /* Oficial (Manual 2024 + ata 17-abr): azul vivo → verde Vert.
     Usado em destaques tipográficos (CTA final, frases rotativas do hero)
     via background-clip:text, e em barras/linhas decorativas. */
  --gradient-brand:        linear-gradient(135deg, #1F50E0 0%, #00DE97 100%);
  --gradient-hero:         linear-gradient(135deg, #101A3B 0%, #0D2040 50%, #0A2A3A 100%);
  --gradient-divider:      linear-gradient(90deg, transparent 0%, var(--alpha-grn-30) 50%, transparent 100%);
  /* Divisor em gradiente da marca (royal→verde) — mais colorido que o
     --gradient-divider (só verde). Usado no topo das seções da home. */
  --gradient-divider-brand: linear-gradient(90deg, transparent 0%, var(--color-royal) 30%, var(--color-green) 70%, transparent 100%);
  --gradient-case-thumb:   linear-gradient(135deg, #0A1428 0%, #0D1E38 100%);
  --gradient-cta-orb:      radial-gradient(circle, var(--alpha-grn-08) 0%, transparent 70%);

  /* Padrão geométrico de V/triângulos — opacidade baixa, textura */
  --pattern-triangles:     repeating-linear-gradient(60deg, var(--color-green) 0, var(--color-green) 1px, transparent 0, transparent 50%),
                           repeating-linear-gradient(-60deg, var(--color-green) 0, var(--color-green) 1px, transparent 0, transparent 50%);
  --pattern-triangles-size: 28px 28px;

  /* ---------- TIPOGRAFIA ----------------------------------- */
  /* Fontes oficiais da marca, carregadas via Adobe Fonts (kit amg1qsl).
     Os slugs ('all-round-gothic', 'mundial') seguem o padrão Adobe; se
     o painel do kit usar outro nome, ajustar aqui. Fallbacks no mesmo
     espírito geométrico/legível enquanto o kit não termina de carregar. */
  --font-display:       'all-round-gothic', 'Exo 2', system-ui, sans-serif;
  --font-body:          'mundial', 'Nunito', system-ui, sans-serif;
  --font-mono:          'Courier New', 'Menlo', monospace;

  /* Pesos */
  --fw-light:           300;
  --fw-regular:         400;
  --fw-semibold:        600;
  --fw-bold:            700;
  --fw-black:           800;

  /* Escala fluida — clamp(min, preferida, max). Mobile-first. */
  --fs-12:              0.75rem;
  --fs-13:              0.813rem;
  --fs-14:              0.875rem;
  --fs-15:              0.938rem;
  --fs-16:              1rem;
  --fs-18:              1.125rem;
  --fs-20:              1.25rem;

  /* Títulos em clamp — escalam entre mobile (375px) e desktop (1440px) */
  --fs-h4:              clamp(1rem,    0.95rem + 0.25vw, 1.125rem);
  --fs-h3:              clamp(1.125rem, 1.05rem + 0.5vw,  1.375rem);
  --fs-h2:              clamp(1.5rem,   1.3rem  + 1vw,    2.25rem);
  --fs-h1:              clamp(2.1rem,   1.6rem  + 2.5vw,  3.75rem);
  --fs-display:         clamp(2.5rem,   1.8rem  + 3.5vw,  4.75rem);

  /* Line-height */
  --lh-tight:           1.08;  /* H1 display */
  --lh-snug:            1.2;   /* H2, H3 */
  --lh-normal:          1.5;   /* UI */
  --lh-relaxed:         1.75;  /* corpo longo */

  /* Letter-spacing — títulos da Vert têm tracking NEGATIVO
     (característica da Exo 2 em peso bold). Eyebrows/labels
     recebem tracking POSITIVO wide. */
  --ls-tight:           -0.04em;
  --ls-snug:            -0.025em;
  --ls-crisp:           -0.01em;
  --ls-normal:          0;
  --ls-wide:            0.08em;
  --ls-wider:           0.12em;
  --ls-widest:          0.2em;

  /* ---------- ESPAÇAMENTO ---------------------------------- */
  /* Escala base 4px. Use sempre estas vars — nunca px solto. */
  --space-0:            0;
  --space-1:            0.25rem;   /* 4px  */
  --space-2:            0.5rem;    /* 8px  */
  --space-3:            0.75rem;   /* 12px */
  --space-4:            1rem;      /* 16px */
  --space-5:            1.25rem;   /* 20px */
  --space-6:            1.5rem;    /* 24px */
  --space-7:            1.75rem;   /* 28px */
  --space-8:            2rem;      /* 32px */
  --space-10:           2.5rem;    /* 40px */
  --space-12:           3rem;      /* 48px */
  --space-14:           3.5rem;    /* 56px */
  --space-16:           4rem;      /* 64px */
  --space-20:           5rem;      /* 80px */
  --space-24:           6rem;      /* 96px */
  --space-32:           8rem;      /* 128px */

  /* Padding de seção — fluido.
     Reduzido para ritmo consistente entre seções (~72px max por lado,
     ~144px total entre duas seções adjacentes no desktop). */
  --section-px:         clamp(1.25rem, 0.8rem + 2vw, 4rem);
  /* Padding vertical de seção — escala fluida 48px (mobile) → 96px (≥1920).
     Faixas-alvo: 375→48px, 768→64px, 1280→80px, 1440→88px, 1920→96px.
     Calibrado em 2026-05-25 (iteração 2): primeiro bump foi exagerado e o
     MKT achou "espaço demais". Range mais moderado pra balancear respiro
     vs densidade. */
  --section-py:         clamp(3rem, 1.75rem + 2.5vw, 6rem);

  /* Largura máxima de conteúdo */
  --container-max:      1280px;
  --content-narrow:     720px;   /* textos longos, forms */
  --content-prose:      640px;   /* artigos do blog */

  /* ---------- RAIOS ---------------------------------------- */
  /* Variados de propósito — nada de "tudo rounded-xl". */
  --radius-xs:          2px;   /* badges, tags */
  --radius-sm:          3px;   /* pill interno de case */
  --radius-md:          3px;   /* botões, inputs — cantos retos alinhados ao manual da marca atual */
  --radius-lg:          8px;   /* cards pequenos */
  --radius-xl:          10px;  /* cards grandes, containers */
  --radius-2xl:         12px;  /* hero wrappers */
  --radius-pill:        999px; /* chips, nav cta */

  /* ---------- ELEVAÇÃO / SOMBRAS --------------------------- */
  /* Shadows com TINT colorido — evita cinza genérico. */
  --shadow-card:        0 1px 2px rgba(8,15,34,.4),
                        0 8px 24px rgba(8,15,34,.3);
  --shadow-lift:        0 4px 12px rgba(8,15,34,.5),
                        0 16px 40px rgba(8,15,34,.4);
  --shadow-green-halo:  0 0 0 1px var(--alpha-grn-25),
                        0 8px 24px var(--alpha-grn-15);
  --shadow-green-press: 0 2px 8px var(--alpha-grn-30);
  --shadow-inset-top:   inset 0 1px 0 var(--alpha-wht-06);

  /* ---------- MOTION --------------------------------------- */
  /* Easings com caráter — standard ease fica com cara de IA. */
  --ease-out-expo:      cubic-bezier(.16,1,.3,1);       /* reveals, entries */
  --ease-out-quart:     cubic-bezier(.25,1,.5,1);       /* hover states */
  --ease-in-out:        cubic-bezier(.65,0,.35,1);      /* bidirecionais */
  --ease-snap:          cubic-bezier(.5,-0.3,.5,1.3);   /* micro-interações */

  --dur-fast:           150ms;
  --dur-base:           240ms;
  --dur-slow:           380ms;
  --dur-slower:         560ms;

  /* ---------- Z-INDEX LAYERS ------------------------------- */
  --z-base:             0;
  --z-raised:           10;
  --z-sticky:           100;  /* nav fixa */
  --z-overlay:          500;  /* modal backdrop */
  --z-modal:            600;  /* modal content */
  --z-toast:            800;
  --z-tooltip:          900;

  /* ---------- BREAKPOINTS (referência — usar em @media) ---- */
  /* --bp-sm:   375px  → mobile padrão */
  /* --bp-md:   768px  → tablet retrato */
  /* --bp-lg:   1280px → laptop / desktop */
  /* --bp-2xl:  1440px → desktop largo */

  /* ---------- LAYOUT --------------------------------------- */
  --header-height:      72px;
  --header-height-lg:   96px;
  --focus-ring:         0 0 0 3px var(--alpha-grn-40);
}

/* =============================================================
   ACENTO DE PRODUTO POR PÁGINA (fundação onda 1; consumido na onda 2a)
   Expõe --product-accent / --product-accent-2 / --product-accent-ink por
   template, usando as body-class nativas do WordPress (body_class()).
   Consumido pelo "Como funciona" (círculos/linhas) e pelo grid de features.
   CyndIA e MAIN definem só o acento primário (paleta enxuta).
   ============================================================= */
body.page-template-page-solucoes-analytics {
  --product-accent:     var(--prod-analytics-accent);
  --product-accent-2:   var(--prod-analytics-accent-2);
  --product-accent-ink: var(--prod-analytics-ink);
}
body.page-template-page-solucoes-cyndia {
  --product-accent:     var(--prod-cyndia-accent);
  --product-accent-2:   var(--prod-cyndia-accent);   /* paleta enxuta: 2ª cor = a própria (royal) */
  --product-accent-ink: var(--prod-cyndia-ink);
}
body.page-template-page-solucoes-onda {
  --product-accent:     var(--prod-onda-accent);
  --product-accent-2:   var(--prod-onda-accent-2);
  --product-accent-ink: var(--prod-onda-ink);
}
body.page-template-page-solucoes-main {
  --product-accent:     var(--prod-main-accent);
  --product-accent-2:   var(--prod-main-accent);   /* paleta enxuta: 2ª cor = a própria (verde) */
  --product-accent-ink: var(--prod-main-ink);
}

/* Respeita prefers-reduced-motion — obrigatório por acessibilidade */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:   0ms;
    --dur-base:   0ms;
    --dur-slow:   0ms;
    --dur-slower: 0ms;
  }
}

/* === base.css === */
/* =============================================================
   VERT ANALYTICS — BASE
   Reset moderno + tipografia global + utilitários mínimos.
   Nada de componente específico aqui.
   ============================================================= */

/* Fontes da marca (All Round Gothic + Mundial) são carregadas via Adobe Fonts —
   enqueue em inc/enqueue.php. NÃO importar Google Fonts aqui. */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  scroll-behavior: smooth;
  /* Compensa topbar + header fixos em anchor scrolls */
  scroll-padding-top: calc(var(--topbar-height, 0px) + var(--header-height) + 1rem);
}

body {
  min-height: 100vh;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-14);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
  padding: 0;
}

/* ----- Tipografia global ------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--text-primary);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-snug);
}

h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); letter-spacing: var(--ls-crisp); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-bold); letter-spacing: var(--ls-crisp); }

p {
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
  font-weight: var(--fw-light);
  text-wrap: pretty;
}

strong, b { font-weight: var(--fw-semibold); color: var(--text-primary); }

em { font-style: normal; color: var(--text-accent); }

::selection {
  background: var(--color-green);
  color: var(--color-navy);
}

/* ----- Foco acessível --------------------------------------- */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ----- Container / Layout ----------------------------------- */
.v-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--section-px);
}

.v-section {
  padding-block: var(--section-py);
}

/* ----- Utilitários ------------------------------------------ */
.v-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--text-accent);
}
.v-eyebrow::before {
  content: '';
  width: 22px;
  height: 1.5px;
  background: currentColor;
}

.v-divider {
  height: 1px;
  border: 0;
  background: var(--gradient-divider);
}

/* Texto com degradê oficial da marca (royal → verde). Aplica via
   background-clip. Fallback (cor sólida verde) garante legibilidade em
   browsers antigos que não suportam -webkit-background-clip: text. */
.v-text-gradient {
  color: var(--color-green);
  background: var(--gradient-brand);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

.v-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Skip-link para acessibilidade (primeira coisa no <body>).
   Escondido fora da tela (top:-100px) e revelado SOMENTE no foco por teclado
   (:focus-visible) — não aparece em clique de mouse. O alvo #v-main tem
   tabindex="-1" (header.php) p/ receber o foco ao ativar. */
.v-skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: var(--z-tooltip);
  padding: var(--space-3) var(--space-5);
  background: var(--color-green);
  color: var(--color-navy);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  border-radius: var(--radius-md);
  transition: top var(--dur-base) var(--ease-out-quart);
}
.v-skip-link:focus-visible {
  top: var(--space-4);
}

/* === reveal.css === */
/* =============================================================
   SCROLL REVEAL — Vert Analytics
   Sistema de animação de entrada no scroll. Usa IntersectionObserver
   (scroll-reveal.js) para adicionar .is-visible quando o elemento
   entra no viewport. Stagger via --reveal-i setada pelo JS.

   Uso no HTML:
     <div data-reveal>               → anima ao entrar no viewport
     <div data-reveal-stagger>       → container: anima filhos [data-reveal]
       <div data-reveal>item 1</div>    com delay escalonado automático
       <div data-reveal>item 2</div>
     </div>
   ============================================================= */

/* Estado inicial — escondido, deslocado pra baixo */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  will-change: opacity, transform;
}

/* Variante: entrada da esquerda */
[data-reveal="left"] {
  transform: translateX(-28px);
}

/* Variante: scale up sutil (bom para cards) */
[data-reveal="scale"] {
  transform: scale(0.96) translateY(12px);
}

/* Estado revelado — animado com easing custom e stagger delay */
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
  transition:
    opacity   var(--dur-slower) var(--ease-out-expo),
    transform var(--dur-slower) var(--ease-out-expo);
  transition-delay: calc(var(--reveal-i, 0) * 100ms);
}

/* Para containers stagger, o próprio container não anima — só os filhos */
[data-reveal-stagger] {
  /* noop — apenas marker para o JS */
}

/* prefers-reduced-motion: elementos aparecem imediatamente */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* === buttons.css === */
/* =============================================================
   BOTÕES — Vert Analytics
   3 variantes: primary (verde sólido), ghost (outline verde),
   link (apenas texto com underline animado). Todas com a mesma
   base (.v-btn) pra manter tipografia/altura consistentes.
   ============================================================= */

.v-btn {
  --btn-py: 0.625rem;
  --btn-px: 1.375rem;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: var(--btn-py) var(--btn-px);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: var(--fw-bold);
  /* Uppercase pedido pelo MKT 2026-05-25. Letter-spacing bump pra não
     ficar apertado — texto em caixa alta precisa de mais respiro entre
     letras pra leitura confortável. */
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  border-radius: var(--radius-md);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition:
    background var(--dur-base) var(--ease-out-quart),
    color      var(--dur-base) var(--ease-out-quart),
    border     var(--dur-base) var(--ease-out-quart),
    box-shadow var(--dur-base) var(--ease-out-quart),
    transform  var(--dur-base) var(--ease-out-quart);
}

.v-btn:disabled,
.v-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Seta decorativa — aparece em todo .v-btn que tiver .has-arrow.
   Usamos ::after para animar o deslocamento sem re-render de texto. */
.v-btn.has-arrow::after {
  content: '→';
  display: inline-block;
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  line-height: 1;
  /* A seta (→) do font body assenta um pouco abaixo do centro óptico do
     texto. Onda 3: nudge calibrado de -0.06em → -0.12em (zoom 3× mostrou a
     haste ainda abaixo do centro em todos os botões/links com seta). */
  transform: translateY(-0.12em);
  transition: transform 0.3s ease;
}
.v-btn.has-arrow:hover::after,
.v-btn.has-arrow:focus-visible::after {
  transform: translate(5px, -0.12em);
}

/* ----- Primary (verde sólido) ------------------------------- */
.v-btn--primary {
  background: var(--color-green);
  color: var(--color-navy);
  /* Sheen sutil — uma shadow verde abaixo + inset branco acima.
     Dá a sensação de "elevação iluminada" sem parecer plástico. */
  box-shadow:
    var(--shadow-inset-top),
    0 1px 2px rgba(0,222,151,.15);
}
.v-btn--primary:hover {
  background: var(--color-green-hover);             /* verde ~5% mais claro */
  transform: translateY(-1px);
  box-shadow:
    var(--shadow-inset-top),
    var(--shadow-green-press),
    0 10px 24px rgba(0,222,151,.18);
}
.v-btn--primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-green-press);
}

/* ----- Ghost (outline verde) -------------------------------- */
.v-btn--ghost {
  background: transparent;
  color: var(--color-green);
  border: 1.5px solid var(--alpha-grn-40);
}
.v-btn--ghost:hover {
  border-color: var(--color-green);
  background: var(--alpha-grn-08);
  box-shadow: 0 0 0 4px var(--alpha-grn-05);
}
.v-btn--ghost:active {
  background: var(--alpha-grn-12);
}

/* ----- Link (texto + underline animado) --------------------- */
.v-btn--link {
  padding: 0.25rem 0;
  background: transparent;
  color: var(--color-green);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-14);
  border-radius: 0;
  letter-spacing: normal;
  text-transform: none; /* link-style mantém case normal, só botões pill/sólidos em caixa alta */
}
.v-btn--link::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: currentColor;
  transform-origin: left;
  transition: width var(--dur-base) var(--ease-out-quart);
}
.v-btn--link:hover::before,
.v-btn--link:focus-visible::before {
  width: 100%;
}

/* ----- Tamanhos --------------------------------------------- */
.v-btn--sm {
  --btn-py: 0.375rem;
  --btn-px: 0.875rem;
  font-size: 0.72rem;
}
.v-btn--lg {
  --btn-py: 0.875rem;
  --btn-px: 1.75rem;
  font-size: 0.9rem;
}

/* ----- Pill (variação para CTA da nav, chips) --------------- */
.v-btn--pill {
  border-radius: var(--radius-pill);
}

/* ----- Bloco / full-width ----------------------------------- */
.v-btn--block {
  display: flex;
  width: 100%;
}

/* === top-bar.css === */
/* =============================================================
   TOP-BAR — Vert Analytics
   Faixa fina fixa acima do site-header com mensagem única
   impactante (credencial SAS). Estilo Enter.ai mas com conteúdo
   estático — sem marquee, sem rotação.
   ============================================================= */

:root {
  --topbar-height: 36px;
}

/* A top-bar mostra títulos de post, que ficaram fora da tradução — então ela
   não é renderizada fora do português (template-parts/header/top-bar.php).
   Sem zerar a variável aqui, o header continuaria posicionado a 36px do topo
   e sobraria um vão em toda página em inglês. A classe vem do body_class de
   inc/i18n.php. */
body:not(.vert-lang-pt) {
  --topbar-height: 0px;
}

.v-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: calc(var(--z-sticky) + 1);
  height: var(--topbar-height);
  background: var(--color-navy-ink);
  border-bottom: 1px solid var(--alpha-grn-15);
  display: flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--fs-12);
  color: var(--alpha-wht-70);
  overflow: hidden;
}

/* Subtle animated gradient wash — textura sutil, não distrai */
.v-topbar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--alpha-grn-05) 35%,
    var(--alpha-roy-08) 65%,
    transparent 100%);
  opacity: 0.6;
  pointer-events: none;
}

.v-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  position: relative;
  z-index: 1;
  text-align: center;
}

/* ---------- Badge de ícone ------------------------------- */

.v-topbar__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--alpha-grn-15);
  color: var(--color-green);
  flex-shrink: 0;
  animation: v-topbar-pulse 2.4s ease-in-out infinite;
}

@keyframes v-topbar-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 var(--alpha-grn-30);
  }
  50% {
    box-shadow: 0 0 0 4px transparent;
  }
}

/* ---------- Mensagem ------------------------------------- */

.v-topbar__message {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  letter-spacing: var(--ls-crisp);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* O overflow:hidden acima já zera o tamanho mínimo automático deste flex
     item, então o encolhimento chega ao .v-topbar__item e o título longo sai
     com "…" (verificado em 375px: caixa 271px, texto 364px). */
  max-width: 100%;
}

.v-topbar__message strong {
  color: var(--color-green);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-crisp);
}

/* ---------- Rotação dos artigos do blog (2026-07-24) ------ */

/* Os títulos ficam empilhados no mesmo espaço: só o .is-active aparece
   (topbar-rotate.js alterna). O overflow:hidden mantém o corte dentro da
   faixa quando o título é longo. */
.v-topbar__slides {
  position: relative;
  display: block;
  flex: 0 1 auto;
  overflow: hidden;
}

.v-topbar__label {
  flex: 0 0 auto;
}

.v-topbar__item {
  display: block;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out-quart);
}

.v-topbar__item.is-active {
  opacity: 1;
}

/* Sem JS (ou com reduced-motion), o item que veio visível do PHP fica
   legível mesmo sem a classe — [hidden] cuida de esconder os demais. */
.v-topbar__item:not([hidden]) {
  opacity: 1;
}

.v-topbar__item[hidden] {
  display: none;
}

.v-topbar__item:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.v-topbar__item:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

@media (prefers-reduced-motion: reduce) {
  .v-topbar__item {
    transition: none;
  }
}

.v-topbar__years {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--space-2);
  background: var(--alpha-grn-10);
  border: 1px solid var(--alpha-grn-25);
  border-radius: var(--radius-xs);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  color: var(--color-green);
  line-height: 1;
}

/* ---------- Reduced motion ------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .v-topbar__badge {
    animation: none;
  }
}

/* ---------- Mobile: encolhe os "years" e reduz gaps ------ */

@media (max-width: 767px) {
  .v-topbar__inner {
    gap: var(--space-2);
    padding-inline: var(--space-3);
  }
  .v-topbar__message {
    font-size: 11px;
    gap: var(--space-2);
  }
  .v-topbar__years {
    display: none; /* em mobile prioriza só a frase principal */
  }
}

@media (max-width: 374px) {
  /* Encolhe drasticamente em celular pequeno — só o troféu + "SAS 3×" */
  .v-topbar__message {
    font-size: 10.5px;
  }
}

/* === header.css === */
/* =============================================================
   HEADER — Vert Analytics
   Nav fixa. Comportamento:
     - No topo da página: fundo semi-transparente com blur,
       sem border (parece flutuar sobre o hero).
     - Ao rolar (.is-scrolled via JS): navy sólido, border
       bottom em gradiente verde sutil.
   ============================================================= */

.v-site-header {
  position: fixed;
  top: var(--topbar-height, 0px);
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  height: var(--header-height);
  /* Liquid glass: fundo bem transparente + blur forte.
     O conteúdo da página passa por trás visível. */
  background: rgba(16,26,59,0.35);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition:
    background     var(--dur-slow) var(--ease-out-quart),
    border-color   var(--dur-slow) var(--ease-out-quart),
    box-shadow     var(--dur-slow) var(--ease-out-quart);
}

/* Scrolled: fica um pouco mais opaco mas ainda translúcido */
.v-site-header.is-scrolled {
  background: rgba(16,26,59,0.55);
  border-bottom-color: rgba(255,255,255,0.08);
  box-shadow: 0 4px 30px rgba(8,15,34,.25);
}

/* Borda inferior com gradiente — aparece só quando scrolled */
.v-site-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--gradient-divider);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out-expo);
}
.v-site-header.is-scrolled::after { opacity: 1; }

/* Inner — flex container */
.v-site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

/* ----- Logo (SVG verde da marca) --------------------------- */
.v-site-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.v-site-logo__img {
  display: block;
  height: 36px;
  width: auto;
  /* mix-blend-mode removido em 2026-05: era hack para a PNG antiga com
     fundo. A logo atual é SVG com fill verde sólido (#00d081), portanto
     o blend mode só distorcia a cor sobre o navy. */
  transition: opacity var(--dur-base) var(--ease-out-quart);
}
.v-site-logo:hover .v-site-logo__img {
  opacity: 0.85;
}

@media (min-width: 768px) {
  .v-site-logo__img {
    /* Cresce suavemente entre 36px (mobile) e 44px (desktop largo) */
    height: clamp(38px, 2.5vw + 1.5rem, 44px);
  }
}

/* ----- Nav principal ---------------------------------------- */
.v-site-nav {
  display: none;  /* escondida no mobile real; reativada a partir de 768px */
}

/* A nav passa a aparecer já em tablets (≥ 768px). Os gaps usam clamp pra
   comprimir suavemente em viewports apertados sem precisar esconder itens. */
@media (min-width: 768px) {
  .v-site-nav {
    display: flex;
    align-items: center;
    gap: clamp(var(--space-4), 2vw, var(--space-7));
  }
}

.v-site-nav__list {
  display: flex;
  align-items: center;
  /* Gap fluido entre itens: aperta em tablet, abre no desktop */
  gap: clamp(var(--space-4), 1.5vw + 0.5rem, var(--space-8));
}

.v-site-nav__link {
  position: relative;
  display: inline-block;
  padding: var(--space-2) 0;
  font-family: var(--font-body);
  /* Caixa alta + tracking sutil — pedido MKT (doc ajustes site). */
  font-size: 0.82rem;
  font-weight: var(--fw-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--alpha-wht-50);
  transition: color var(--dur-base) var(--ease-out-quart);
}
.v-site-nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 0;
  height: 1px;
  background: var(--color-green);
  transition: width var(--dur-slow) var(--ease-out-expo);
}
.v-site-nav__link:hover,
.v-site-nav__link:focus-visible,
.v-site-nav__link.is-active {
  color: var(--color-white);
}
.v-site-nav__link:hover::after,
.v-site-nav__link:focus-visible::after,
.v-site-nav__link.is-active::after {
  width: 100%;
}

/* Dropdown "Soluções" — host + panel */
.v-site-nav__item--has-dropdown {
  position: relative;
}
.v-site-nav__dropdown {
  position: absolute;
  top: calc(100% + var(--space-3));
  left: -var(--space-4);
  min-width: 260px;
  max-width: min(320px, calc(100vw - 40px)); /* nunca estoura a viewport */
  padding: var(--space-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition:
    opacity    var(--dur-base) var(--ease-out-quart),
    transform  var(--dur-base) var(--ease-out-quart),
    visibility 0s linear var(--dur-base);
}

/* Em viewports até bp-lg (< 1280px), ancorar dropdown pelo lado direito do item
   para evitar que transborde o viewport. */
@media (max-width: 1279px) {
  .v-site-nav__dropdown {
    left: auto;
    right: 0;
  }
}
.v-site-nav__item--has-dropdown:hover .v-site-nav__dropdown,
.v-site-nav__item--has-dropdown:focus-within .v-site-nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.v-site-nav__dropdown-link {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-14);
  color: var(--text-secondary);
  transition: background var(--dur-fast) var(--ease-out-quart),
              color      var(--dur-fast) var(--ease-out-quart);
}
.v-site-nav__dropdown-link:hover,
.v-site-nav__dropdown-link:focus-visible {
  background: var(--alpha-grn-08);
  color: var(--color-white);
}
.v-site-nav__dropdown-link strong {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  margin-bottom: 2px;
}
.v-site-nav__dropdown-link span {
  font-size: var(--fs-12);
  color: var(--text-muted);
}

/* ----- CTA no header --------------------------------------- */
.v-site-header__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}

/* ----- Seletor de idioma (PT/EN) ---------------------------
   Dropdown com fallback CSS-only: :hover e :focus-within abrem sem JS
   nenhum, e o nav.js acrescenta .is-open para o toque — no Safari do iOS
   um <button> NÃO recebe foco ao ser tocado, então :focus-within pode nunca
   disparar. As três condições convivem de propósito.

   VISÍVEL EM QUALQUER LARGURA (corrigido em 2026-09-10). Antes era
   display:none abaixo de 1280px, apostando que "o drawer mobile assume" —
   mas o hambúrguer some a partir de 768px (.v-nav-toggle, adiante), então
   entre 768 e 1279px o drawer nem abria e NÃO HAVIA seletor algum. iPad
   inteiro, janela não-maximizada e Windows com escala de 125/150% caem
   nessa faixa. */
.v-lang {
  position: relative;
  display: block;
}

.v-lang__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.7rem;
  background: transparent;
  border: 1px solid var(--alpha-wht-12);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  color: var(--color-white);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out-quart),
              border-color var(--dur-fast) var(--ease-out-quart);
}
.v-lang:hover .v-lang__trigger,
.v-lang:focus-within .v-lang__trigger,
.v-lang.is-open .v-lang__trigger {
  background: var(--alpha-wht-06);
  border-color: var(--alpha-grn-40);
}

/* Chevron em CSS puro: um SVG só com viewBox dentro de flex colapsa pra 0×0
   (caso sas.svg). Duas bordas rotacionadas não têm esse risco. */
.v-lang__caret {
  width: 0.42rem;
  height: 0.42rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.12em) rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-out-quart);
}
.v-lang:hover .v-lang__caret,
.v-lang:focus-within .v-lang__caret,
.v-lang.is-open .v-lang__caret {
  transform: translateY(0.05em) rotate(225deg);
}

.v-lang__menu {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  min-width: 11rem;
  padding: var(--space-2);
  background: var(--color-navy-mid);
  border: 1px solid var(--alpha-wht-12);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  z-index: 40;
  transition:
    opacity    var(--dur-base) var(--ease-out-quart),
    transform  var(--dur-base) var(--ease-out-quart),
    visibility 0s linear var(--dur-base);
}
.v-lang:hover .v-lang__menu,
.v-lang:focus-within .v-lang__menu,
.v-lang.is-open .v-lang__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.v-lang__opt {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out-quart);
}
.v-lang__opt:hover,
.v-lang__opt:focus-visible {
  background: var(--alpha-grn-08);
}
.v-lang__opt-short {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-12);
  letter-spacing: 0.06em;
  color: var(--color-green);
  min-width: 1.6rem;
}
.v-lang__opt-label {
  font-size: var(--fs-14);
  color: var(--text-secondary);
}
.v-lang__opt.is-current .v-lang__opt-label {
  color: var(--color-white);
  font-weight: var(--fw-semibold);
}

/* ----- Menu mobile toggle ---------------------------------- */
.v-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: -8px;
  border-radius: var(--radius-md);
  color: var(--color-white);
  transition: background var(--dur-fast) var(--ease-out-quart);
}
.v-nav-toggle:hover { background: var(--alpha-wht-06); }
@media (min-width: 768px) {
  .v-nav-toggle { display: none; }
}

.v-nav-toggle__bars {
  display: block;
  width: 18px;
  height: 12px;
  position: relative;
}
.v-nav-toggle__bars::before,
.v-nav-toggle__bars::after,
.v-nav-toggle__bars span {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease-in-out),
              opacity   var(--dur-fast) var(--ease-out-quart);
}
.v-nav-toggle__bars::before { top: 0; }
.v-nav-toggle__bars span   { top: 50%; transform: translateY(-50%); }
.v-nav-toggle__bars::after { bottom: 0; }

.v-nav-toggle[aria-expanded="true"] .v-nav-toggle__bars::before {
  transform: translateY(5px) rotate(45deg);
}
.v-nav-toggle[aria-expanded="true"] .v-nav-toggle__bars span {
  opacity: 0;
}
.v-nav-toggle[aria-expanded="true"] .v-nav-toggle__bars::after {
  transform: translateY(-5px) rotate(-45deg);
}

/* ----- Drawer mobile --------------------------------------- */
.v-mobile-nav {
  position: fixed;
  inset: var(--header-height) 0 0 0;
  z-index: calc(var(--z-sticky) - 1);
  background: var(--bg-page);
  border-top: 1px solid var(--border-default);
  padding: var(--space-6) var(--section-px) var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  overflow-y: auto;                /* permite scroll quando itens excedem a viewport */
  -webkit-overflow-scrolling: touch;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity    var(--dur-base) var(--ease-out-quart),
    transform  var(--dur-base) var(--ease-out-quart),
    visibility 0s linear var(--dur-base);
}

/* Trava o body quando o menu está aberto (evita scroll do fundo) */
body.v-menu-open {
  overflow: hidden;
}
.v-mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.v-mobile-nav__link {
  display: block;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  /* Caixa alta — match com a navbar desktop (pedido MKT). */
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.v-mobile-nav__cta {
  margin-top: var(--space-6);
}
@media (min-width: 1280px) {
  .v-mobile-nav { display: none; }
}

/* ----- Spacer para compensar topbar + header fixos --------- */
.v-site-main {
  padding-top: calc(var(--topbar-height, 0px) + var(--header-height));
}
@media (min-width: 1280px) {
  .v-site-header { height: var(--header-height-lg); }
  .v-site-main   { padding-top: calc(var(--topbar-height, 0px) + var(--header-height-lg)); }
}

/* === footer.css === */
/* =============================================================
   FOOTER — Vert Analytics
   Fundo navy mais profundo (#080F22). Grid de 4 colunas:
     [Brand (1.4fr)] [Soluções (1fr)] [Empresa (1fr)] [Contato (1.5fr)]
   Linha superior com gradiente verde sutil — separador decorativo.
   Bottom bar tripartido: [Copyright]  [CNPJ]  [Parceiros].
   ============================================================= */

.v-site-footer {
  position: relative;
  background: var(--bg-deep);
  color: var(--text-secondary);
  padding-block: var(--space-14) var(--space-8);
  /* FAIXA CTA→RODAPÉ REMOVIDA (decisão de design — onda 1 fundação).
     O CTA final deve encostar direto no rodapé em TODAS as páginas.
     Antes: margin-top: var(--space-16) — nas páginas de corpo claro isso
     era sobrescrito por um border-top claro da mesma altura (8 overrides
     espalhados por 5 arquivos, agora removidos). Comportamento único e
     global aqui: sem faixa. Mantém-se só o hairline de 1px de definição
     (padding-block interno do footer preserva o respiro). */
  margin-top: 0;
  border-top: 1px solid var(--border-subtle);
}

/* Divisor decorativo ::before (linha em gradiente verde) REMOVIDO junto
   com a faixa: ele existia só para "emendar" duas seções navy adjacentes
   (o margin-top navy do footer). Sem a faixa, não há emenda a decorar. */

/* ----- Top — grid de colunas ------------------------------- */
.v-site-footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  margin-bottom: var(--space-12);
}

/* Tablet (768-1279px): 3 colunas (5 blocos fluem em 2 linhas) */
@media (min-width: 768px) and (max-width: 1279px) {
  .v-site-footer__top {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
  }
}

/* Desktop (1280px+): grid completo 5 colunas
   [brand] [Soluções] [Empresa] [Onde estamos] [Privacidade] */
@media (min-width: 1280px) {
  .v-site-footer__top {
    grid-template-columns: 1.3fr 0.9fr 0.9fr 1.25fr 1.05fr;
    gap: var(--space-8);
  }
}

/* Coluna de marca */
.v-site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 340px;
}
.v-site-footer__tagline {
  font-size: var(--fs-14);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-light);
}

/* ----- Colunas de links ------------------------------------ */
.v-site-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.v-site-footer__heading {
  font-family: var(--font-display);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

/* "Cases" como cabeçalho-link: mesmo visual de Soluções/Empresa (maiúsculo),
   mas clicável. Separado dos links de Soluções acima. */
.v-site-footer__heading--link {
  display: inline-block;
  margin-top: var(--space-3);
  margin-bottom: 0;
  transition: color var(--dur-fast) var(--ease-out-quart);
}
.v-site-footer__heading--link:hover,
.v-site-footer__heading--link:focus-visible {
  color: var(--color-green);
}

.v-site-footer__link {
  display: inline-block;
  padding: var(--space-1) 0;
  font-size: var(--fs-14);
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease-out-quart),
              transform var(--dur-base) var(--ease-out-quart);
}
.v-site-footer__link:hover,
.v-site-footer__link:focus-visible {
  color: var(--color-green);
  transform: translateX(2px);
}

/* ----- Coluna Contato (endereços) -------------------------- */

.v-site-footer__col--contact {
  gap: var(--space-3);
}

/* E-mail em destaque — um pouco maior e com cor levemente mais
   clara que os links normais, pra chamar atenção. */
.v-site-footer__email {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-14);
  color: var(--color-white);
  word-break: break-word;
}
.v-site-footer__email:hover,
.v-site-footer__email:focus-visible {
  color: var(--color-green);
}

/* Cada bloco de escritório (BSB, Vitória, RJ, SP). Com 4 endereços
   (2026-10-07) o bloco ficou mais compacto: 12px e entrelinha menor. */
.v-site-footer__office {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.v-site-footer__office-heading {
  font-family: var(--font-display);
  font-size: var(--fs-11, 0.7rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-green);
  margin: 0;
}

.v-site-footer__address {
  font-style: normal;           /* remove itálico do <address> */
  font-size: var(--fs-12);
  color: var(--text-muted);
  line-height: 1.45;
  font-weight: var(--fw-light);
}

/* Endereço clicável → Google Maps (herda a cor do address, verde no hover) */
.v-site-footer__address-link {
  color: inherit;
  transition: color var(--dur-fast) var(--ease-out-quart);
}
.v-site-footer__address-link:hover,
.v-site-footer__address-link:focus-visible {
  color: var(--color-green);
}

/* ----- Social icons ---------------------------------------- */
.v-site-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.v-site-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  transition:
    border-color var(--dur-base) var(--ease-out-quart),
    background   var(--dur-base) var(--ease-out-quart),
    transform    var(--dur-base) var(--ease-out-quart);
}
/* Hover neutro: lift + clareia moldura e ícone (currentColor) para
   branco pleno. SEM cor de marca, SEM verde (decisão 2026-07-15). */
.v-site-footer__social-link:hover,
.v-site-footer__social-link:focus-visible {
  color: var(--color-white);
  border-color: var(--alpha-wht-15);
  background: var(--alpha-wht-06);
  transform: translateY(-2px);
}
/* Ícones MONOCROMÁTICOS (decisão 2026-07-15): SVGs inline desenhados em
   currentColor — herdam o color neutro do link acima (--text-secondary)
   e clareiam junto no hover. Nada de tiles/cores de marca. */
.v-site-footer__social-link svg {
  width: 20px;
  height: 20px;
}

/* ----- Bottom bar (tripartido) ----------------------------- */
/* Layout:  [© Copyright]   [CNPJ]   [SAS · Cloudera · IBM]    */

.v-site-footer__bottom {
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  font-size: var(--fs-12);
  color: var(--text-faint);
  text-align: center;
}

@media (min-width: 768px) {
  .v-site-footer__bottom {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-6);
    text-align: left;
  }
}

.v-site-footer__copyright {
  color: var(--text-muted);
}

.v-site-footer__cnpj {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  color: var(--text-muted);
  text-align: center;
}

.v-site-footer__partners {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  color: var(--text-muted);
}

@media (min-width: 768px) {
  .v-site-footer__partners {
    text-align: right;
  }
}

/* ----- Linha de links legais (privacidade + gerenciar cookies) ----- */
.v-site-footer__legal {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-12);
  color: var(--text-faint);
}

.v-site-footer__legal-link {
  background: none;
  border: none;
  padding: var(--space-1) 0;
  font: inherit;
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out-quart);
}
.v-site-footer__legal-link:hover,
.v-site-footer__legal-link:focus-visible {
  color: var(--color-green);
  text-decoration: underline;
}

/* === hero.css === */
/* =============================================================
   HERO — Vert Analytics
   Seção de abertura: navy com padrão de triângulos, eyebrow,
   H1 impactante, CTAs, métricas. Background estende sob o header
   fixo (que é semi-transparente no topo).
   ============================================================= */

/* Em páginas de home, o main perde o padding-top pra que o hero
   ocupe a área atrás do header transparente. */
body.home .v-site-main,
body.page-template-front-page .v-site-main {
  padding-top: 0;
}

/* ---------- Fold wrapper (hero + parceiros = 100vh) -------- */
/* Juntos preenchem a viewport inteira. O carrossel de parceiros
   fica ancorado no bottom, como o Enter.ai faz.              */

.v-hero-fold {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  /* min-height (não height) — quando o viewport for mais baixo que o conteúdo
     precisa, o fold cresce naturalmente em vez de clipar o hero. Evita o bug
     onde os CTAs ficavam escondidos atrás do awards bar em telas curtas
     (ex: 1366×720, laptops com chrome de browser/taskbar reduzindo a altura).
     Vale a partir de 1024px (junto com o layout lado a lado — ver nota sobre o
     breakpoint 1024 vs 1280 no bloco do fim do arquivo). */
  .v-hero-fold {
    min-height: 78vh;
  }
}

.v-hero {
  position: relative;
  overflow: hidden;
  /* flex: 1 0 auto — cresce pra ocupar espaço sobrando, mas nunca encolhe
     abaixo do seu próprio conteúdo (basis: auto). Combinado com min-height
     no .v-hero-fold, isso garante que CTAs nunca fiquem clipados. */
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  /* Padding-top = altura do header fixo + buffer fluido (32-72px) entre o
     header e o eyebrow. Padding-bottom = mesmo buffer fluido entre os CTAs
     e a awards bar abaixo. Antes o padding-bottom era 0 e o top só compensava
     o header — sem respiro real. Calibrado em 2026-05-26 a pedido do MKT que
     achou o hero "apertado, muita informação em pouco espaço". */
  padding-top: calc(
    var(--topbar-height, 0px) +
    var(--header-height) +
    clamp(2rem, 1rem + 2vw, 4.5rem)
  );
  /* Mobile-first = layout EMPILHADO: o padding lateral fica no .v-hero__content
     (texto) e o .v-hero__visual (imagem) vai full-bleed. padding-bottom 0 pro
     visual recortado encostar na base do hero (como no modelo). No ≥1024 o
     padding (lateral e inferior) volta pro .v-hero — ver override no fim. */
  padding-inline: 0;
  padding-bottom: 0;
  border-bottom: 1px solid var(--border-subtle);
}

/* ---------- Camadas de fundo (z-order: bg → pattern → triangle → content) */

.v-hero__bg {
  position: absolute;
  inset: 0;
  /* Briefing MKT 2026-05: fundo do hero totalmente flat (sem o gradient
     antigo que criava sutil "vapor" diagonal). Cor sólida navy alinhada
     ao restante da página. */
  background: var(--color-navy);
  z-index: 0;
}

/* Briefing MKT 2026-05: fundo do hero passa a ser totalmente limpo, sem
   ornamentos gráficos (padrão de triângulos, grade de dados, SVG decorativo,
   accent overlays animados, glows radiais nos cantos). Apenas a cor sólida
   navy do .v-hero__bg permanece. Elementos preservados no template para
   permitir reativação futura — basta remover este bloco. */
.v-hero__pattern,
.v-hero__triangle,
.v-hero__datagrid,
.v-hero__accent {
  display: none;
}

.v-hero::before,
.v-hero::after {
  content: none;
}

/* ---------- Accent overlays por produto (sincronizados com a rotação) ---
   4 overlays absolutos, cada um com cor da paleta secundária oficial.
   Cycle de 16s (4s por frase, casando com keyframe v-rotate-text).
   Cada overlay aparece durante sua janela de 4s e some entre transições.
   Defasagem via animation-delay (0s, 4s, 8s, 12s).
   ----------------------------------------------------------------- */
.v-hero__accent {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  background: radial-gradient(
    ellipse 65% 55% at 75% 45%,
    var(--accent-c, transparent) 0%,
    transparent 70%
  );
  mix-blend-mode: screen;
  animation: v-hero-accent-cycle 16s ease-in-out infinite;
}

/* Cores oficiais (Manual da Marca 2024, pág. 4 — paleta secundária):
   verde, royal, ciano, verde-turquesa. Casadas com data-product das frases. */
.v-hero__accent--vert   { --accent-c: #00DE97; animation-delay:  0s; }
.v-hero__accent--cyndia { --accent-c: #1F50E0; animation-delay:  4s; }
.v-hero__accent--main   { --accent-c: #00DDDE; animation-delay:  8s; }
.v-hero__accent--onda   { --accent-c: #00DE93; animation-delay: 12s; }

@keyframes v-hero-accent-cycle {
  0%       { opacity: 0;    }
  4%       { opacity: 0.22; }   /* fade-in suave no início da janela */
  22%      { opacity: 0.22; }   /* hold durante a frase ativa */
  25%      { opacity: 0;    }   /* fade-out antes da próxima janela */
  100%     { opacity: 0;    }
}

/* Reduced motion: mostra só o overlay verde (Vert/principal) estático
   e desabilita o cycle pra evitar pulse. */
@media (prefers-reduced-motion: reduce) {
  .v-hero__accent { animation: none; }
  .v-hero__accent--vert { opacity: 0.18; }
}

/* Padrão de triângulos — 55% direita, opacidade baixa.
   Dá textura sem competir com o conteúdo. */
.v-hero__pattern {
  position: absolute;
  right: 0;
  top: 0;
  width: 55%;
  height: 100%;
  opacity: 0.10;
  background-image: var(--pattern-triangles);
  background-size: var(--pattern-triangles-size);
  pointer-events: none;
  z-index: 1;
}

/* Triângulo V decorativo grande — identidade visual */
.v-hero__triangle {
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(240px, 25vw, 500px);
  height: auto;
  opacity: 0.12;
  pointer-events: none;
  z-index: 1;
}

/* ---------- Dots grid (lado direito) ---------------------- */
/* Grade 8×6 de pontos sutis + linhas finas de conexão + alguns
   dots pulsando em sequência. Textura de "dados processando"
   que preenche o lado direito sem competir com o texto. */

.v-hero__datagrid {
  position: absolute;
  right: 3%;
  top: 50%;
  transform: translateY(-50%);
  width: 45%;
  height: 80%;
  max-width: 620px;
  pointer-events: none;
  z-index: 1;

  /* Grid estático de pontos (radial-gradient tile).
     Cada célula = 12.5% (8 cols) × 16.666% (6 rows).
     Opacidade elevada (0.22) pra grid ficar claramente visível. */
  background-image: radial-gradient(
    circle,
    rgba(0,222,151,0.22) 1.6px,
    transparent 2.2px
  );
  background-size: 12.5% 16.666%;
  background-position: 6.25% 8.333%;   /* centraliza na célula */
}

/* Linhas de conexão (rede/grafo) — preenchem o mesmo espaço */
.v-hero__datagrid-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  stroke: rgba(0,222,151,0.12);     /* elevado de 0.1 → 0.12 na base */
  stroke-width: 1;
  stroke-linecap: round;
}
.v-hero__datagrid-lines line {
  animation: v-hero-line-breathe 9s ease-in-out infinite;
}
.v-hero__datagrid-lines line:nth-child(2) { animation-delay: 1.5s; }
.v-hero__datagrid-lines line:nth-child(3) { animation-delay: 3s;   }
.v-hero__datagrid-lines line:nth-child(4) { animation-delay: 4.5s; }
.v-hero__datagrid-lines line:nth-child(5) { animation-delay: 6s;   }
.v-hero__datagrid-lines line:nth-child(6) { animation-delay: 7.5s; }

/* Breathe: opacidade oscila de 0.5→1 em cima do stroke base (0.12) */
@keyframes v-hero-line-breathe {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1;   }
}

/* Dots pulsantes — over a grid, simulando "dados processando".
   Posições via --x / --y (inline style), delays via --delay.
   Ciclo de 6s com dots a cada 0.7s → 3-4 visíveis simultaneamente. */
.v-hero__datagrid-pulse {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-green);
  transform: translate(-50%, -50%) scale(0.3);
  opacity: 0;
  animation: v-hero-dot-pulse 6s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  box-shadow: 0 0 8px rgba(0,222,151,.3);
}

/* Cada dot fica visível por ~50% do ciclo (3s em 6s). Com 9 dots e
   delays de 0.7s, temos ~4 dots visíveis ao mesmo tempo. */
@keyframes v-hero-dot-pulse {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }
  10% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1.4);
  }
  20%, 45% {
    opacity: 0.55;
    transform: translate(-50%, -50%) scale(1);
  }
  60% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }
}

/* Esconder no mobile (< 768px) — mantém hero limpo e legível */
@media (max-width: 767px) {
  .v-hero__datagrid { display: none; }
}

/* Reduced motion: mostra grid estático sem pulsos/breathing */
@media (prefers-reduced-motion: reduce) {
  .v-hero__datagrid-pulse,
  .v-hero__datagrid-lines line {
    animation: none;
  }
  .v-hero__datagrid-pulse { opacity: 0.25; transform: translate(-50%, -50%); }
}

/* Glows radiais verdes (.v-hero::before / ::after) removidos no
   briefing MKT 2026-05 — fundo do hero passa a ser totalmente chapado.
   Manter este comentário evita que alguém adicione um glow aqui de novo
   sem revisão do MKT. */

/* ---------- Conteúdo --------------------------------------- */

.v-hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  margin-inline: auto;
  width: 100%;
  padding-inline: var(--section-px);
  /* Mobile/<1280 = OVERLAY COESO (como o modelo): texto ancorado no topo,
     CENTRALIZADO, sobre o banner (que é fundo). flex:0 0 auto = altura natural
     do texto (fica no topo via justify do .v-hero). No ≥1280 vira flex:1 +
     center vertical + text-align:left (lado a lado). */
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;       /* centraliza os blocos filhos horizontalmente */
  text-align: center;
}

/* Eyebrow — escala fluida (sem degrau): ~11.5px → 14.4px conforme a largura. */
.v-hero__eyebrow {
  margin-bottom: clamp(1rem, 0.75rem + 0.5vw, 1.75rem);
  font-size: clamp(0.72rem, 0.66rem + 0.3vw, 0.9rem);
}

.v-hero__title {
  /* H1 fixo ("Inteligência Analítica onde erro não é opção." — troca do
     MKT 2026-10-07; antes "IA onde erro não é opção."). Escala 100% fluida
     via clamp (cobre de ~320px a telas largas sem tweaks por breakpoint).
     Com o texto ~2× mais longo o tamanho caiu: a linha mais longa
     ("INTELIGÊNCIA ANALÍTICA", ~12em) fica na largura que "IA ONDE ERRO"
     ocupava, sem invadir o banner à direita (~460px em 1280). */
  font-family: var(--font-body);  /* mundial — pedido MKT 2026-05-25 */
  /* Caixa alta + peso menos grosso (Mundial Regular 400), pedido
     MKT 2026-05-28. Default H1 do browser é 700 (Bold) — explícito
     em 400 pra ficar mais leve e elegante na caixa alta. */
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 0.125rem + 2.73vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: var(--ls-snug);
  margin-bottom: clamp(1rem, 0.5rem + 1vw, 2rem);  /* 16-32px fluido */
  /* text-wrap: balance — reparte as linhas de forma equilibrada em QUALQUER
     largura, sem depender de <br> manual nem de breakpoint. É a técnica
     fluida moderna pra título (substitui o toggle do <br> por media query). */
  text-wrap: balance;
}

/* O <br> do markup é o hint de quebra preferida. Ele é exibido a partir de
   1024px — MESMO ponto em que o hero vira lado-a-lado (texto à esquerda sobre
   o banner ao fundo). Antes ficava em 1280px, desalinhado do layout: na faixa
   1024-1279 o texto já era lado-a-lado mas o <br> sumia → o título virava uma
   linha só e invadia o banner. Abaixo de 1024px (layout empilhado, texto
   centralizado sobre navy) o <br> some e o text-wrap:balance reequilibra. */
.v-hero__title br {
  display: none;
}
@media (min-width: 1024px) {
  .v-hero__title br {
    display: inline;
  }
}

/* ---------- Texto rotativo (sub-elemento abaixo do H1) --------------- */
/* 4 frases relacionadas aos produtos da Vert (vert, cyndia, main, onda).
   Cada frase fica visível por ~6s (ciclo de 24s); sincronizada com o
   crossfade dos 2 banners do hero (.v-hero__visual-img, ciclo de 12s).  */

.v-hero__rotate {
  display: block;
  height: 1.6em;
  overflow: clip;
  position: relative;
  margin-bottom: clamp(1.5rem, 0.75rem + 1.5vw, 3rem);  /* 24-48px fluido */
  /* Tamanho intermediário entre H1 e subtítulo — claramente
     subordinado mas com peso visual suficiente. */
  font-size: clamp(1.05rem, 0.55rem + 1.7vw, 1.75rem);
  font-weight: var(--fw-semibold, 600);
  letter-spacing: var(--ls-snug);
}

/* Tablet/laptop pequeno: altura generosa caso a frase quebre em 2 linhas */
@media (min-width: 768px) and (max-width: 1279px) {
  .v-hero__rotate {
    height: 1.7em;
  }
  .v-hero__rotate-track em {
    white-space: nowrap;
  }
}

.v-hero__rotate-track {
  display: flex;
  flex-direction: column;
  /* 36s (9s por frase) — pedido MKT 2026-05-27 (mais tempo pra absorver
     cada frase + banner). As % do keyframe v-rotate-text mantêm as 4 janelas
     iguais; o ciclo dos banners (.v-hero__visual-pic) usa a mesma duração e
     transiciona nos mesmos pontos (22-25% / 97-100%) → troca sincronizada. */
  animation: v-rotate-text 36s cubic-bezier(.16,1,.3,1) infinite;
}

.v-hero__rotate-track em {
  display: block;
  flex-shrink: 0;
  height: 1.55em;
  line-height: 1.55;
  font-style: normal;
  font-family: var(--font-display);  /* all-round-gothic — pedido MKT 2026-05-25 (rotação = "subtítulo") */
}

/* Todas as frases recebem o degradê de marca (verde→azul) via
   background-clip:text. Substitui o esquema anterior de cor sólida por
   produto, conforme briefing do MKT: o degradê passa a ser elemento
   identitário compartilhado pelas 4 frases. O overlay de fundo
   (.v-hero__accent) continua tingindo a cena com a cor do produto ativo,
   preservando a leitura sutil de produto↔frase. */
.v-hero__rotate-track em {
  color: var(--color-green); /* fallback sólido em browsers sem background-clip:text */
  /* Mesmo gradient oficial da marca usado no CTA final ("especialista Vert"),
     mantendo coerência visual entre destaques tipográficos do site. */
  background: var(--gradient-brand);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-transform: uppercase;
  letter-spacing: var(--ls-snug);
}

/* 4 frases + 1 duplicata = 5 itens, cada um a 20% do track.
   Cada janela: ~22% hold (~5.3s) + ~3% slide (~0.7s) por ciclo de 24s.
   5º item = duplicata da 1ª → loop seamless ao resetar 100%→0%. */
@keyframes v-rotate-text {
  0%,    22%   { transform: translateY(0);     }
  25%,   47%   { transform: translateY(-20%);  }
  50%,   72%   { transform: translateY(-40%);  }
  75%,   97%   { transform: translateY(-60%);  }
  100%         { transform: translateY(-80%);  }
}

/* Mobile: rotação ativa, frases podem quebrar em 2 linhas. */
@media (max-width: 767px) {
  .v-hero__rotate {
    height: 2.8em;
    line-height: 1.3;
  }
  .v-hero__rotate-track em {
    height: 2.8em;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: break-word;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* Reduced-motion: mostra só a primeira frase, sem rotação */
@media (prefers-reduced-motion: reduce) {
  .v-hero__rotate-track {
    animation: none;
  }
  .v-hero__rotate-track em:not(:first-child) {
    display: none;
  }
}

.v-hero__subtitle {
  /* Herda --font-body (mundial) do body. */
  /* Tamanho 100% fluido (16→20px) e medida de linha em ch (comprimento de
     leitura ideal em qualquer viewport) — substitui os degraus @768/@1280 e
     os max-width fixos (560/580/620px). */
  font-size: clamp(1rem, 0.93rem + 0.5vw, 1.25rem);
  color: var(--text-secondary);
  max-width: clamp(34ch, 60vw, 52ch);
  line-height: var(--lh-relaxed);
  margin-bottom: clamp(2rem, 1rem + 2vw, 4rem);  /* 32-64px fluido */
  font-weight: var(--fw-light);
  /* text-wrap: pretty — evita linhas órfãs/"viúvas" no fim do parágrafo,
     em qualquer largura, sem ajuste manual. */
  text-wrap: pretty;
}

.v-hero__actions {
  /* Mobile (<768px) = CTAs EMPILHADOS full-width (como o modelo
     referencias/banners/banners-mobile/modelo_banner_mobile.png). A partir do
     bp-md (768px) volta a flex-row, e ≥1280 alinha à esquerda. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  width: 100%;
}
.v-hero__actions .v-btn {
  font-size: 0.9rem;
  padding: 0.75rem 1.5rem;
  width: 100%;
  justify-content: center;
}
@media (min-width: 768px) {
  .v-hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;   /* tablet/laptop overlay: CTAs centralizados */
    width: auto;
  }
  .v-hero__actions .v-btn {
    width: auto;
  }
}

/* ---------- Responsive ------------------------------------- */

/* Tablet (768-1023): banner mobile portrait (800×1200) tem o
   SUBJECT (mulher/homem + devices) nos últimos ~30% da altura;
   o topo da arte é navy vazio (palco pro overlay de texto no
   modelo desktop). Em tablet com layout empilhado precisamos:
     (1) limitar a altura do visual pra mostrar SÓ a faixa do
         subject (cropando o navy vazio acima) — flex 0 0 auto
         pra não crescer além do necessário;
     (2) texto/CTAs menores pra liberar espaço.
   object-position fica center bottom: bottom-anchor corta o
   topo navy e preserva o subject na faixa visível. */
@media (min-width: 768px) and (max-width: 1023px) {
  /* BANNER no tablet — IGUAL ao 375 (corrige "colado nos CTAs" + "gradiente
     azul"). Os antigos overrides do visual (flex:0 0 auto / height fixa /
     mask-image:none) e do .v-hero (min-height:auto) foram REMOVIDOS: o
     min-height:auto encurtava o hero → o visual ficava baixo → a máscara alpha
     dissolvia SOBRE o subject (a tal "sombra/gradiente azul" logo abaixo dos
     CTAs) e o banner colava no texto. Sem eles, o tablet volta a herdar o
     mobile-first (100svh + visual flex:1 1 auto que cresce + máscara dissolvendo
     o topo NO NAVY), então o subject desce e sobra respiro navy idêntico ao 375.
     (Obs.: o .v-hero__visual do tablet já era dead code — perdia em source-order
     pra regra base logo abaixo, então a mask:none nunca chegou a valer.)
     Mantidas apenas as reduções tipográficas abaixo. */

  /* Texto: tamanhos reduzidos */
  .v-hero__eyebrow {
    margin-bottom: clamp(0.5rem, 0.25rem + 0.5vw, 1rem);
  }
  .v-hero__title {
    font-size: clamp(1.5rem, 0.6rem + 2.2vw, 2rem);
    margin-bottom: clamp(0.5rem, 0.25rem + 0.5vw, 1rem);
  }
  .v-hero__rotate {
    font-size: clamp(0.95rem, 0.5rem + 1vw, 1.2rem);
    margin-bottom: clamp(1rem, 0.5rem + 1vw, 2rem);
  }
  .v-hero__subtitle {
    font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.1rem);
    max-width: 42ch;                       /* aperta pra quebrar em 2 linhas */
    margin-bottom: clamp(1rem, 0.5rem + 1vw, 2rem);
  }

  /* CTAs: padding + fonte menores */
  .v-hero__actions .v-btn {
    font-size: 0.82rem;
    padding: 0.55rem 1.1rem;
  }
}

@media (min-width: 1280px) {
  .v-hero {
    /* Desktop usa --header-height-lg em vez de --header-height (header maior
       a partir de 1280). Mantém o mesmo buffer fluido top/bottom da regra
       base, só troca a altura do header. */
    padding-top: calc(
      var(--topbar-height, 0px) +
      var(--header-height-lg) +
      clamp(2rem, 1rem + 2vw, 4.5rem)
    );
  }
}

/* ---------- Banner do hero — DOIS modos de layout ----------------------
   MOBILE-FIRST (< 1280px) = DUAS ZONAS EMPILHADAS (como o modelo): o texto fica
   numa zona de altura natural no topo (sobre navy sólido) e o banner ocupa
   uma ZONA PRÓPRIA logo abaixo, preenchendo o espaço que sobrar. Assim a CENA
   NUNCA invade o texto (não é mais fundo atrás do texto) — corrige o caso em
   que a imagem "subia" por trás dos CTAs em telas baixas. O topo da zona da
   imagem é DISSOLVIDO no navy via máscara alpha → fusão sem emenda. ≥ 1280px =
   LADO A LADO: o banner volta a ser fundo absoluto e o texto vai à esquerda
   (override no fim do arquivo). */
.v-hero__visual {
  display: block;
  /* Mobile-first: ZONA em fluxo, abaixo do texto, preenchendo o resto do hero.
     flex:1 1 auto cresce pra ocupar o espaço livre; o min-height garante que a
     cena apareça mesmo quando o texto é alto — aí o hero cresce e rola, mas o
     banner nunca some nem colide com o texto. */
  position: relative;
  flex: 1 1 auto;
  /* CLIP RÍGIDO da zona (faixa-fix 7). Os 4 banners são position:absolute
     inset:0 DESTA zona (que é o containing block, position:relative). No
     Chrome desktop a máscara alpha já confina a imagem à zona via
     mask-clip:border-box (por isso o vazamento não reproduz no Blink), MAS
     no Chrome iOS a máscara deixa de confinar ao rolar em PAISAGEM e a
     imagem "vaza" pra cima, sobre os CTAs (bug reportado; Safari iOS ok).
     overflow:hidden é um clip independente da máscara — recorta a imagem aos
     limites da zona em QUALQUER motor/orientação. Provado por injeção
     (hero-fix7-forceleak2.js: com overflow a imagem forçada a vazar é
     recortada; sem, invade os CTAs). Nada legítimo passa da zona (probe
     hero-fix7-probe.js: pic/img == zona), então não regride nada. */
  overflow: hidden;
  /* ETAPA 8 (a+b): o overflow:hidden acima passou em TODA simulação mas o
     Chrome iOS REAL continuou vazando (print do Gabriel — a foto cobre os
     CTAs em paisagem). Assinatura de dessincronia de compositing no scroll:
     as pics têm animação infinita de opacity (viram camadas compostas
     próprias) e o recorte de um pai NÃO-composto se perde ao rolar. Reforço
     duplo, aplicado JUNTO porque só o aparelho real discrimina entre os dois
     (no Blink tudo passa): clip-path:inset(0) = recorte geométrico da caixa
     aplicado em nível de camada (respeitado onde overflow falha);
     translateZ(0) = promove a PRÓPRIA zona a camada composta, pro recorte
     viajar com a árvore do compositor durante o scroll. Plano C, só se o
     print real ainda falhar: desligar o crossfade (animação de opacity) em
     paisagem baixa — sem animação as pics não viram camadas e não há o que
     dessincronizar. */
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
  transform: translateZ(0);
  /* ETAPA 8 (rede de segurança, sugestão do Gabriel): respiro FIXO entre o
     fim dos CTAs e o início da CAIXA da imagem. Mesmo que um motor pinte a
     imagem alguns px acima da zona, ela morre no respiro navy antes de
     alcançar os CTAs. SEM regressão visual: o gap é DESCONTADO da altura da
     zona (piso abaixo + teto do bloco <1024 + trava do tablet), então a
     caixa total (margem+altura) fica idêntica, o bottom da zona não se move
     e — como a arte ancora no bottom (object-position:center bottom) — a
     cena fica EXATAMENTE onde estava (bandas inalteradas, medido). O fade
     da máscara também desconta o gap: o fim ABSOLUTO do fade não muda (só
     começa 32px mais baixo, junto com a imagem). Pra recalibrar, mudar SÓ
     --zone-gap (os 4 usos derivam dele). */
  --zone-gap: 32px;
  margin-top: var(--zone-gap);
  /* Piso da zona. CAUSA RAIZ da "ilustração ausente" no Safari iOS
     (faixa-fix 6, diagnóstico por overlay no iPhone real do Gabriel): era
     clamp(200px, 36vh, 460px). No iOS o `vh` resolve contra a altura GRANDE
     (barra recolhida, ex.: 844), não contra a visível no load (~745) — então
     36vh dava ~303px, MAIOR que o teto max-height calc(42vw+110px)=~274px.
     Com min-height > max-height o MIN vence (spec CSS) → a zona ficava alta e
     empurrava a cena pra baixo do fold visível (parecia sumir). Os "gates"
     das etapas 4/5 não salvavam porque a media query de altura TAMBÉM lê a
     visível no iOS e quase nunca disparava no load.
     Correção em duas partes: (1) `svh` no lugar de `vh` — o piso reflete a
     altura REALMENTE visível (svh é fixo = viewport pequeno, não oscila com
     a barra ao rolar); (2) o teto do clamp deixa de ser 460px e passa a ser
     o PRÓPRIO teto calc(42vw+110px) → piso ≤ teto em QUALQUER altura, o
     conflito min>max não pode mais existir. Medição iOS-fiel: hero-fix6-sim.js.
     (Etapa 8: o desconto de --zone-gap compensa o margin-top — caixa total
     margem+altura idêntica à aprovada; ver comentário do gap acima.) */
  min-height: calc(clamp(200px, 36svh, calc(42vw + 110px)) - var(--zone-gap));
  z-index: 1;          /* acima do bg (0), abaixo do conteúdo (2) */
  pointer-events: none;
  /* COESÃO SEM EMENDA: o topo da zona dissolve no navy sólido do .v-hero__bg
     (cor idêntica, atrás de tudo) via máscara alpha. -webkit-mask é obrigatório
     no iOS Safari. Fade em comprimento fixo (clamp), não em % da zona. Também
     em `svh` (não `vh`, mesma razão do piso): no iOS o `vh` inflava o fade
     contra a altura grande (~101px), invadindo a cena; `svh` o mantém coerente
     com o visível (~72-96px), sempre ≥72px (piso do clamp) pra dissolver sem
     emenda. (Etapa 8: o desconto de --zone-gap mantém o FIM absoluto do fade
     onde estava — a imagem começa 32px mais baixo e o fade encurta junto, de
     modo que a dissolução termina no mesmo y e a sobreposição do fade com a
     cena NÃO cresce. Piso efetivo do fade: 72−32=40px, suficiente porque o
     topo da arte é navy quase idêntico ao bg.) */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 calc(clamp(72px, 12svh, 120px) - var(--zone-gap)), #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 calc(clamp(72px, 12svh, 120px) - var(--zone-gap)), #000 100%);
}

/* CELULAR (< 768): hero preenche a tela (texto no topo + zona do banner
   embaixo), como sempre. TABLET (768-1023) deixou de receber o 100svh na
   etapa 3 do faixa-fix — ver bloco próprio abaixo.
   Histórico: um "min-height:auto" antigo no tablet causava crop apertado +
   máscara dissolvendo sobre o subject (por isso se voltou ao 100svh na
   época). O cenário MUDOU — máscara em clamp fixo (etapa 1) + zona com
   altura pela fórmula (etapas 2/3) — e a remoção foi REVALIDADA por medição
   (bandas 69-152px, fade sobre a cena igual à etapa 2). A variante "ingênua"
   (só remover o 100svh, sem fixar a zona na fórmula) REINTRODUZ os 2 bugs
   (banda vert 33-44px + fade 76-87px sobre a cena): a zona colapsa pro piso
   (clamp com 36svh). Não usar. */
@media (max-width: 767px) {
  .v-hero {
    min-height: 100svh;
  }
}

@media (max-width: 1023px) {
  /* Faixa-fix etapa 2 (proposta C da AUDITORIA-HERO-MOBILE-FAIXA): TETO na
     zona da imagem. Sem teto, o flex:1 1 auto entregava toda a sobra do
     100svh à zona e — como as artes têm ~2/3 superiores escuros (cena começa
     em 68-75% da altura) — telas altas mostravam cada vez mais "céu navy"
     da própria arte (395px no iPad Air). O teto segue a fórmula
     banda ≈ zona − (1−sceneFrac) × 1,5 × largura: com 42vw+110px a banda
     fica ~69-91px (vert) e ~131-151px (CyndIA, pior arte) em qualquer
     tela. No iPhone SE o espaço disponível (~240px) é MENOR que o teto —
     nada muda lá. (Etapa 8: −--zone-gap compensa o margin-top da zona; a
     caixa total continua 42vw+110px.) */
  .v-hero__visual {
    max-height: calc(42vw + 110px - var(--zone-gap));
  }
  /* No celular (100svh) a sobra vai pra CIMA do texto (margin-top:auto):
     o bloco de texto fica ancorado junto à imagem e o "ar" vira respiro de
     borda entre o header e o eyebrow — não um vão morto entre CTAs e arte.
     (Centralização 50/50 — margin-block:auto — foi avaliada e descartada:
     metade da sobra voltaria pro meio, banda mínima ~240px no iPad Air.)
     No tablet (hero natural, etapa 3) não há sobra: resolve pra 0. */
  .v-hero__content {
    margin-top: auto;
  }
}

/* Faixa-fix etapa 3: no TABLET o hero encolhe pro conteúdo real (sem
   100svh) e a próxima seção sobe — elimina o vão de topo que a etapa 2
   criava ao empurrar a sobra pra cima do texto. A zona da imagem é FIXADA
   na fórmula do teto (min == max): sem isso o flex-basis auto (pictures
   absolutas = 0) cairia no piso (clamp com 36svh) e recolaria o banner nos CTAs.
   (Etapa 8: −--zone-gap compensa o margin-top; caixa total = 42vw+110px.) */
@media (min-width: 768px) and (max-width: 1023px) {
  .v-hero__visual {
    min-height: calc(42vw + 110px - var(--zone-gap));
  }
}

/* Faixa-fix etapa 9: PAISAGEM de celular (largura ≤767 deitado — SE 667,
   8 Plus 736, Chrome iOS ~750). Nesses viewports o svh é baixo (~370-450),
   o 36svh cai abaixo do piso fixo de 200px do clamp e a zona ficava em
   200 − gap = 168px — só 43-55% da cena visível (corte feio, prints do
   Gabriel). As paisagens ≥768 (X 812, XR 896, 14PM 932) já caíam na trava
   do tablet e ficavam BOAS (94-100% da cena) — o print aprovado do XR é
   exatamente o look da fórmula. A calibração então é estender a MESMA
   trava (min == max == fórmula do teto) ao landscape ≤767: cena 100%
   visível + banda calibrada (~65-90px) em qualquer largura (medido em
   hero-fix9-survey.js: 43-55% → 100% na matriz 600-767 × 370-450).
   O hero fica mais alto que a tela nesses casos (~2.5 telas de rolagem) —
   aceito, como nos demais devices desde a etapa 3. RETRATO não é afetado
   (orientation:landscape só vale com largura > altura): o piso 36svh do
   retrato — incl. iPhone SE em pé — segue intacto. */
@media (max-width: 767px) and (orientation: landscape) {
  .v-hero__visual {
    min-height: calc(42vw + 110px - var(--zone-gap));
  }
}

/* Faixa-fix etapa 6: os "gates" por altura das etapas 4/5
   (@media ... and (min-height: Npx)) foram REMOVIDOS. Eles tentavam
   encolher a zona nos celulares altos, mas dependiam de uma media query
   de ALTURA — que no Safari iOS lê a altura VISÍVEL (com a barra de
   endereço), quase sempre menor que N no load, então NUNCA disparavam no
   aparelho real (só na emulação do Chrome, onde svh==vh). Eram sintoma, não
   causa. A causa raiz era o piso em `vh` estourar o teto no iOS (ver
   .v-hero__visual, bloco do piso). Com o piso agora em `svh` e limitado ao
   teto (clamp com max = calc(42vw+110px)), o CSS nativo (100svh + min/max +
   flex) resolve a altura da zona sozinho em qualquer viewport, sem depender
   de limiares de altura frágeis. Validado iOS-fiel em hero-fix6-sim.js:
   subject visível e banda em meta em toda a faixa de altura (645→844) dos
   celulares altos. */

/* 4 banners empilhados (1 por produto/frase), cada um num <picture> absoluto
   cobrindo 100% do hero. O crossfade é 1:1 com a rotação de texto (36s):
   cada banner ocupa a janela de 9s da sua frase. A SINCRONIA EXATA vem de:
   (1) mesma duração (36s) do keyframe das frases; (2) o banner faz fade-out
   em 22-25% (exatamente quando a frase desliza) e fade-in em 97-100% (quando
   a próxima frase assenta) — ou seja, está 100% visível em 0-22%, junto com
   a frase "parada". Os delays NEGATIVOS (0/-27/-18/-9s) põem a animação em
   regime já no load (sem período de delay mostrando o estado base), evitando
   corte seco na 1ª aparição de cyndia/main/onda. */
.v-hero__visual-pic {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  animation: v-hero-banner-cycle 36s linear infinite;
}
.v-hero__visual-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Empilhado: ancora o visual na base (recorta o topo navy do banner retrato).
     No desktop ≥1280 vira "right center" (banner paisagem, visual à direita). */
  object-position: center bottom;
  display: block;
}

/* vert visível em t=0; cada frase 9s depois. -27/-18/-9 = 9/18/27 deslocados
   um ciclo (36s) pra trás → mesma fase, sem delay inicial positivo. */
.v-hero__visual--vert   { animation-delay:   0s; }
.v-hero__visual--cyndia { animation-delay: -27s; }
.v-hero__visual--main   { animation-delay: -18s; }
.v-hero__visual--onda   { animation-delay:  -9s; }

/* Cheio em 0-22% (frase assentada), fade-out 22-25% (slide da frase),
   oculto até 97%, fade-in 97-100% (próxima frase). 100%==0% (ambos opacity 1)
   → loop contínuo; vizinhos cruzam exatamente em 22-25% / 97-100%. */
@keyframes v-hero-banner-cycle {
  0%   { opacity: 1; }
  22%  { opacity: 1; }   /* hold (~7,9s) durante a janela da frase */
  25%  { opacity: 0; }   /* fade-out junto com o slide da frase */
  97%  { opacity: 0; }   /* oculto durante as outras 3 frases */
  100% { opacity: 1; }   /* fade-in junto com a próxima frase (seam) */
}

/* Reduced motion: sem crossfade — mostra só o banner vert estático. */
@media (prefers-reduced-motion: reduce) {
  .v-hero__visual-pic {
    animation: none;
    opacity: 0;
  }
  .v-hero__visual--vert {
    opacity: 1;
  }
}

/* <1280 não usa scrim ::after — a coesão vem da MÁSCARA alpha (acima), que
   dissolve o topo da imagem no navy sem emenda. O scrim ::after existe APENAS
   no ≥1280 (horizontal, override no fim do arquivo). */

/* ---------- ≥1024px: LADO A LADO (layout aprovado — Nest Hub Max perfeito) --
   Texto à esquerda, centralizado verticalmente e alinhado à esquerda, sobre a
   parte limpa do banner paisagem. Desfaz a centralização e o scrim vertical do
   modo mobile.

   BREAKPOINT 1024 (e não 1280): o design system usa --bp-lg 1280px, mas uma
   JANELA de 1280px tem viewport real ~1264px (a barra de rolagem clássica do
   desktop come ~16px). Com o corte em 1280, um navegador a 1280px caía no modo
   mobile e servia o banner RETRATO (bug "1280 mostrando mobile"). Cortar em
   1024px é o ponto seguro: garante DESKTOP em qualquer janela ≥1280 (mesmo com
   scrollbar ou zoom) e mantém 768px no bucket MOBILE (768 < 1024). Casa também
   com a faixa de redução tipográfica do tablet (768-1023). O <source> do
   <picture> em front-page.php usa o complementar (max-width:1023px) pra casar a
   troca de arte retrato↔paisagem no mesmo ponto. */
@media (min-width: 1024px) {
  /* paddings (lateral + inferior) voltam pro hero; o texto perde o seu */
  .v-hero {
    padding-inline: var(--section-px);
    padding-bottom: clamp(2rem, 1rem + 2vw, 4.5rem);
  }
  .v-hero__content {
    padding-inline: 0;
    flex: 1;                    /* preenche e centraliza verticalmente */
    justify-content: center;
    align-items: flex-start;    /* desfaz a centralização horizontal do mobile */
    text-align: left;
  }
  .v-hero__actions {
    justify-content: flex-start;
  }
  /* ≥1280 = banner volta a ser FUNDO absoluto cobrindo o hero inteiro (texto
     à esquerda por cima); desfaz a zona em fluxo e a máscara vertical do mobile.
     margin-top: 0 desfaz o respiro da etapa 8 (com inset:0, a margem
     deslocaria o topo do fundo). clip-path/translateZ da etapa 8 ficam —
     inócuos aqui (a imagem preenche a própria caixa) e mantêm o clip
     consistente entre os modos. */
  .v-hero__visual {
    position: absolute;
    inset: 0;
    flex: none;
    margin-top: 0;
    min-height: 0;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .v-hero__visual-img {
    object-position: right center;
  }
  /* scrim HORIZONTAL sutil esquerda→direita (texto à esquerda sobre o banner) */
  .v-hero__visual::after {
    content: '';
    position: absolute;
    inset: 0;
    display: block;
    background: linear-gradient(
      to right,
      rgba(16, 26, 59, 0.70) 0%,
      rgba(16, 26, 59, 0.30) 35%,
      transparent 65%
    );
  }
}

/* ---------- Banner em vídeo (CyndIA) — 1º do ciclo (MKT 2026-10-07) -------
   Ciclo: vídeo 14s → Vert → CyndIA → MAIN → ONDA (36s, keyframes acima) → vídeo.
   .is-video (posta por script inline antes da 1ª pintura e controlada pelo
   hero-video.js) mostra o vídeo, esconde o conteúdo/banners e PAUSA todas as
   animações do hero; ao sair, o ciclo CSS retoma exatamente de onde parou
   (início do Vert). A camada começa ABAIXO do header (que é semi-transparente
   sobre o hero) e usa object-fit:contain: o texto do vídeo encosta nas bordas
   (legendas a ~2% no retrato), cover cortaria. As sobras do contain somem
   porque o fundo da camada é o mesmo navy do vídeo (#060B33). */
.v-hero__video {
  position: absolute;
  top: calc(var(--topbar-height, 0px) + var(--header-height));
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;                 /* acima do conteúdo (2) */
  background: #060B33;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
@media (min-width: 1280px) {
  .v-hero__video {
    top: calc(var(--topbar-height, 0px) + var(--header-height-lg));
  }
}
.v-hero__video-el {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Empilhado (<1024): o hero é mais alto que a tela em celulares baixos
   (375×667: vídeo centralizado ia até 734px) → ancora no topo, logo abaixo do
   header, pra o vídeo inteiro caber na dobra. */
@media (max-width: 1023px) {
  .v-hero__video-el {
    object-position: 50% 0;
  }
}

.v-hero__content,
.v-hero__visual {
  transition: opacity 0.6s ease;
}
.v-hero.is-video .v-hero__video {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease, visibility 0s;
}
.v-hero.is-video .v-hero__content,
.v-hero.is-video .v-hero__visual {
  opacity: 0;
}
.v-hero.is-video .v-hero__rotate-track,
.v-hero.is-video .v-hero__visual-pic,
.v-hero.is-video .v-hero__accent {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .v-hero__video { display: none; }
}

/* === awards.css === */
/* =============================================================
   RECONHECIMENTO DE MERCADO — Vert Analytics
   Faixa horizontal ancorada no bottom do hero-fold. Substitui o
   antigo carrossel de logos de parceiros. Faixa em azul royal com
   label e chips brancos (pedido MKT 2026-08).
   ============================================================= */

.v-awards {
  flex-shrink: 0;
  background: var(--color-royal);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  /* Padding vertical fluido — escala 20px (mobile) → 32px (≥1440).
     Aumentado em 2026-05-25 a pedido do MKT que queria mais respiro
     entre os CTAs do hero e a faixa de chips. */
  padding-block: clamp(1.25rem, 0.75rem + 1vw, 2rem);
  position: relative;
  overflow: hidden;
}

/* (O wash em gradiente verde/royal do ::before foi removido junto com a
   troca pro fundo royal sólido: sobre o navy ele dava profundidade, sobre
   o royal lia como mancha.) */

.v-awards__inner {
  display: flex;
  align-items: center;
  /* Gap reduzido (12px ao redor do divisor) e padding-inline próprio
     mais enxuto pra economizar largura no threshold 1280, onde o
     conteúdo natural (~1216px) ficava no limite do espaço usável. */
  gap: var(--space-3);
  position: relative;
  z-index: 1;
  /* Conjunto label+divisor+chips centralizado horizontalmente como
     grupo único. Em viewports largos (1440, 1920) o max-width segura
     o bloco e margin-inline:auto + justify-content:center deixam o
     conjunto simétrico em qualquer resolução desktop. */
  justify-content: center;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 0.5rem + 1.5vw, 3rem);
}

/* ---------- Label "RECONHECIMENTO DE MERCADO" ------------- */

.v-awards__label {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--alpha-wht-90);
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}

/* ---------- Divisor vertical entre label e chips ---------- */

.v-awards__divider {
  width: 1px;
  height: 22px;
  background: var(--alpha-wht-15);
  flex-shrink: 0;
}

/* ---------- Lista de chips -------------------------------- */
/* Desktop: nowrap para manter os 4 chips na mesma linha.
   Mobile (≤900px): permite quebra para múltiplas linhas. */

.v-awards__list {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  /* Largura natural (soma dos chips + gaps internos) — o centering
     do conjunto todo é responsabilidade do .v-awards__inner via
     justify-content:center. */
}

.v-awards__chip {
  display: inline-flex;
  align-items: center;
  padding: 4px var(--space-3);
  background: transparent;
  border: 1px solid var(--alpha-wht-28);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-crisp);
  color: var(--color-white);
  line-height: 1.3;
  white-space: nowrap;
  transition:
    border-color var(--dur-base, .25s) var(--ease-out-quart, ease),
    background    var(--dur-base, .25s) var(--ease-out-quart, ease);
}

.v-awards__chip:hover {
  border-color: var(--color-white);
  background: var(--alpha-wht-08);
}

/* ---------- Responsive ----------------------------------- */
/* Sub-desktop (< 1440px): label empilhada acima dos chips, chips em
   scroll horizontal numa única linha (estilo Material chips). Mantém
   altura constante da faixa em qualquer viewport e fade lateral
   sinaliza que há mais conteúdo pra ver.
   Breakpoint em 1439px: com o 4º chip (Cloudera Brazil ISV 2026) o
   layout de 1 linha passou de ~1300px de conteúdo e estourava em
   1280, então só ativa a partir de 1440. Entre 1024 e 1439 os chips
   cabem centralizados abaixo da label; abaixo disso, scroll. */

@media (max-width: 1439px) {
  /* padding-block agora é fluido via clamp() no .v-awards base — não precisa
     override aqui. Removido pra eliminar valor fixo. */

  .v-awards__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    max-width: none;
  }

  .v-awards__label {
    align-self: center;
  }

  .v-awards__divider {
    display: none;
  }

  .v-awards__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-block: 2px; /* espaço pro outline do chip não cortar no overflow */
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Chips centralizados quando cabem no container (ex: 1024-1279);
       em telas estreitas onde estouram (ex: 480, 768), o `safe` faz
       fallback automático pra start-aligned — assim o scroll começa
       na primeira chip e não no meio. */
    justify-content: safe center;
    /* fade nas bordas — sinaliza "tem mais pra ver" */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  }
  .v-awards__list::-webkit-scrollbar { display: none; }

  .v-awards__chip {
    scroll-snap-align: start;
    flex-shrink: 0;       /* impede que o chip colapse em coluna */
    white-space: nowrap;  /* texto sempre em linha */
  }
}

/* Sub-mobile (< bp-sm = 375px): label e chips ainda mais compactos */
@media (max-width: 374px) {
  .v-awards__chip {
    font-size: 11px;
    padding: 4px 10px;
  }
  .v-awards__label {
    font-size: 11px;
  }
}

/* === products.css === */
/* =============================================================
   PRODUTOS — Vert Analytics
   Layout editorial: rows zigzag. Animações fluidas, ciclos
   longos (15-18s) com overlap orgânico entre fases.
   ============================================================= */

.v-products {
  background: var(--bg-page);
  overflow: hidden;
  /* Padding vertical fluido — escala 32px (mobile) → 72px (≥1920).
     Antes era --space-14 (56px fixo) que parecia esparramado em mobile
     e ok em desktop. Agora escala com o viewport. */
  padding-block: clamp(2rem, 1rem + 2vw, 4.5rem);
}

/* Header — alinhado à esquerda (visual editorial) */
.v-products__header {
  max-width: var(--container-max);
  margin: 0 auto var(--space-4);      /* 16px — era --space-10 (40px); evita buraco antes do Main */
  text-align: left;
}
.v-products__header .v-eyebrow {
  margin-bottom: var(--space-3);
  justify-content: flex-start;
}
.v-products__header h2 {
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  max-width: 640px;
}

/* ---------- Row base -------------------------------------- */

.v-product-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
  /* Compacto: dentro do carrossel o respiro vem do slide, não da row.
     Antes tinha min-height 60vh + centralização, que jogava o conteúdo
     pro meio e abria um vazio enorme sob o título (feedback MKT). */
  padding-block: 0;
  position: relative;
}

@media (min-width: 1280px) {
  .v-product-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-14);
  }
  .v-product-row--reverse .v-product-row__visual { order: 2; }
}

.v-product-row__content {
  max-width: 520px;
}

/* Tablet/mobile: centraliza o bloco de conteúdo dentro da row 1-col.
   Sem isso, o content de 520px fica left-aligned e sobra um vazio à
   direita que parece "descentralizado". A partir de 1280px (grid 2-col)
   o content volta a ser left-aligned dentro da sua coluna. */
@media (max-width: 1279px) {
  .v-product-row__content {
    margin-inline: auto;
  }
}

.v-product-row__title {
  font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: var(--ls-snug);
  color: var(--color-white);
  margin-bottom: var(--space-2);
}

/* Sub-título opcional sob o H3 — usado em produtos com nome de marca
   próprio (ex: CyndIA) onde a categoria precisa ficar visível abaixo. */
.v-product-row__sub {
  font-size: clamp(0.85rem, 0.75rem + 0.3vw, 0.95rem);
  font-weight: var(--fw-regular);
  color: var(--alpha-wht-50);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.v-product-row__lead {
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
  font-weight: var(--fw-semibold);
  color: var(--color-green);
  line-height: 1.4;
  margin-bottom: var(--space-5);
  letter-spacing: -0.01em;
}

.v-product-row__desc {
  font-size: var(--fs-16);
  color: var(--text-secondary);
  line-height: 1.7;
  font-weight: var(--fw-light);
  margin-bottom: var(--space-5);
}

/* ---------- Badge colorido por produto ---------------------- */
/* Cada produto usa a cor da própria ferramenta (decisão Gabriel
   2026-08): Analytics verde Vert, CyndIA royal, ONDA roxo da logo,
   MAIN verde. Classes com nomes LEGADOS: `--main` = Analytics,
   `--grj` = CyndIA, `--agentes` = MAIN. */

.v-product-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
  border: 1px solid;
}

.v-product-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

.v-product-badge--main {
  color: var(--color-green);
  background: var(--alpha-grn-10);
  border-color: var(--alpha-grn-30);
}

.v-product-badge--grj {
  /* Royal PURO da logo (decisão Gabriel 2026-08, igual ao hero da CyndIA):
     o contraste 2.6:1 sobre navy foi apresentado e aceito conscientemente —
     fidelidade à cor da logo > AA aqui. */
  color: var(--color-royal);
  background: var(--alpha-roy-10);
  border-color: var(--alpha-roy-30);
  text-transform: none; /* preserva "CyndIA" — marca registrada com casing próprio */
}

.v-product-badge--onda {
  /* violet-soft, não o roxo puro da logo: #8306F3 é ~2.7:1 sobre navy —
     texto fs-12 exige AA 4.5:1 (mesma lógica do royal-soft acima). */
  color: var(--color-violet-soft);
  background: rgba(131, 6, 243, 0.10);
  border-color: rgba(131, 6, 243, 0.30);
}

/* ---------- Lista de features --------------------------- */
/* 4 bullets com check verde — formato denso, 2 colunas no
   desktop para aproveitar espaço lateral. */

.v-product-row__features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-7) 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2) var(--space-5);
}

/* Features em 2 colunas a partir do bp-sm (375px) — economiza altura mesmo
   em mobiles padrão. Em < 375 fica 1 coluna (default da escala mobile-first). */
@media (min-width: 375px) {
  .v-product-row__features {
    grid-template-columns: 1fr 1fr;
  }
}

.v-product-row__features li {
  position: relative;
  padding-left: calc(var(--space-7) + 4px);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  line-height: 1.45;
  transition: transform var(--dur-base) var(--ease-out-quart);
}

/* Check-dot: círculo 20px com ícone V real (SVG data URI) perfeitamente
   centralizado. Pulse contínuo sutil + scale no hover do <li> pai. */
.v-product-row__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--alpha-grn-15);
  border: 1.5px solid var(--alpha-grn-40);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300DE97' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='5,12.5 10,17 19,7.5'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  transition:
    background-color var(--dur-base) var(--ease-out-quart),
    border-color     var(--dur-base) var(--ease-out-quart),
    transform        var(--dur-base) var(--ease-out-quart),
    box-shadow       var(--dur-base) var(--ease-out-quart);
  animation: v-check-pulse 3s ease-in-out infinite;
}

@keyframes v-check-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 var(--alpha-grn-20);
  }
  50% {
    box-shadow: 0 0 0 4px transparent;
  }
}

/* Hover no item: check cresce e fica mais vibrante */
.v-product-row__features li:hover {
  transform: translateX(2px);
}
.v-product-row__features li:hover::before {
  background-color: var(--alpha-grn-30);
  border-color: var(--color-green);
  transform: scale(1.12);
  box-shadow: 0 0 12px var(--alpha-grn-40);
}

/* CyndIA usa royal (azul vivo) — classe `v-product-badge--grj` é id interno */
.v-product-row:has(.v-product-badge--grj) .v-product-row__features li::before {
  background-color: var(--alpha-roy-10);
  border-color: var(--alpha-roy-30);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F50E0' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='5,12.5 10,17 19,7.5'/></svg>");
  animation-name: v-check-pulse-royal;
}
.v-product-row:has(.v-product-badge--grj) .v-product-row__features li:hover::before {
  background-color: var(--alpha-roy-20);
  border-color: var(--color-royal);
  box-shadow: 0 0 12px var(--alpha-roy-40);
}
@keyframes v-check-pulse-royal {
  0%, 100% {
    box-shadow: 0 0 0 0 var(--alpha-roy-20);
  }
  50% {
    box-shadow: 0 0 0 4px transparent;
  }
}

/* ONDA usa teal */
.v-product-row:has(.v-product-badge--onda) .v-product-row__features li::before {
  background-color: rgba(0, 221, 222, 0.10);
  border-color: rgba(0, 221, 222, 0.30);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300DDDE' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='5,12.5 10,17 19,7.5'/></svg>");
  animation-name: v-check-pulse-teal;
}
.v-product-row:has(.v-product-badge--onda) .v-product-row__features li:hover::before {
  background-color: rgba(0, 221, 222, 0.20);
  border-color: var(--color-teal);
  box-shadow: 0 0 12px rgba(0, 221, 222, 0.40);
}
@keyframes v-check-pulse-teal {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(0, 221, 222, 0.20);
  }
  50% {
    box-shadow: 0 0 0 4px transparent;
  }
}

/* MAIN em destaque usa badge --agentes (azul) — checks azuis no row,
   espelhando o card. Sem isso o row cairia no verde default.
   RC-18 (--rc18) compartilha o azul #0096DE — mesmas regras. */
.v-product-row:has(.v-product-badge--agentes) .v-product-row__features li::before,
.v-product-row:has(.v-product-badge--rc18) .v-product-row__features li::before {
  background-color: rgba(0, 150, 222, 0.10);
  border-color: rgba(0, 150, 222, 0.30);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230096DE' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='5,12.5 10,17 19,7.5'/></svg>");
  animation-name: v-check-pulse-blue;
}
.v-product-row:has(.v-product-badge--agentes) .v-product-row__features li:hover::before,
.v-product-row:has(.v-product-badge--rc18) .v-product-row__features li:hover::before {
  background-color: rgba(0, 150, 222, 0.20);
  border-color: var(--color-blue);
  box-shadow: 0 0 12px rgba(0, 150, 222, 0.40);
}

@media (prefers-reduced-motion: reduce) {
  .v-product-row__features li::before {
    animation: none;
  }
}

.v-product-row__link {
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
}

.v-product-row__visual {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   PRODUTO 1 — DASHBOARD (MAIN) — ciclo 15s
   0-2s    → 3 barras crescem (1.2s cada, 400ms stagger, bounce)
   2-4.5s  → curva fina se desenha (stroke-dashoffset)
   4.5-6s  → terminal linha 1 typing
   6-8s    → hold linha 1, depois fade+linha 2 overlap
   8-10s   → linha 2 hold, fade
   10-12s  → linha 3 typing + check, longo hold
   12-15s  → pausa + fade suave + reset
   ============================================================ */

.v-visual-dashboard { padding: 0 var(--space-4); }

.v-dash-panel {
  width: 100%;
  max-width: 480px;
  background: linear-gradient(145deg, var(--color-navy-card-alt) 0%, var(--color-navy-card) 100%);
  border: 1px solid rgba(0,222,151,.15);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,.3),
              0 0 0 1px rgba(255,255,255,.03);
}

.v-dash-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: rgba(0,0,0,.15);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.v-dash-trafficlight {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
}
.v-dash-tab {
  margin-left: var(--space-3);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: var(--fw-regular);
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.v-dash-body {
  padding: var(--space-6) var(--space-5) var(--space-5);
}

/* Chart area */
.v-dash-chart {
  position: relative;
  height: 150px;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4) var(--space-1);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.v-dash-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(0deg, transparent 24.5%, rgba(255,255,255,.04) 25%, transparent 25.5%),
    linear-gradient(0deg, transparent 49.5%, rgba(255,255,255,.04) 50%, transparent 50.5%),
    linear-gradient(0deg, transparent 74.5%, rgba(255,255,255,.04) 75%, transparent 75.5%);
  pointer-events: none;
}

/* Eixo X: labels Q1-Q4 abaixo das barras */
.v-dash-axis {
  display: flex;
  justify-content: space-around;
  gap: var(--space-4);
  padding: 0 var(--space-4);
  margin-top: -8px;
  margin-bottom: var(--space-4);
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,.15);
  text-transform: uppercase;
}
.v-dash-axis span {
  flex: 1;
  max-width: 54px;
  text-align: center;
}

/* Barras com bounce sutil (cubic-bezier .34, 1.56, .64, 1) */
.v-dash-bar {
  flex: 1;
  max-width: 54px;
  height: var(--h);
  background: linear-gradient(180deg, var(--color-green) 0%, rgba(0,222,151,.3) 100%);
  border-radius: 4px 4px 0 0;
  transform-origin: bottom;
  transform: scaleY(0);
  position: relative;
  z-index: 1;
  box-shadow: 0 0 20px rgba(0,222,151,.3);
}
.v-dash-bar--1 { animation: v-bar-1 15s cubic-bezier(.34,1.56,.64,1) infinite; }
.v-dash-bar--2 { animation: v-bar-2 15s cubic-bezier(.34,1.56,.64,1) infinite; }
.v-dash-bar--3 { animation: v-bar-3 15s cubic-bezier(.34,1.56,.64,1) infinite; }
.v-dash-bar--4 { animation: v-bar-4 15s cubic-bezier(.34,1.56,.64,1) infinite; }

/* Bar 1: grow 0-1.2s (0-8%) */
@keyframes v-bar-1 {
  0%        { transform: scaleY(0); }
  8%        { transform: scaleY(1); }
  87%       { transform: scaleY(1); }
  93%, 100% { transform: scaleY(0); }
}
/* Bar 2: delay 400ms (2.7%) */
@keyframes v-bar-2 {
  0%, 2.7%  { transform: scaleY(0); }
  10.7%     { transform: scaleY(1); }
  87%       { transform: scaleY(1); }
  93%, 100% { transform: scaleY(0); }
}
/* Bar 3: delay 800ms (5.3%) */
@keyframes v-bar-3 {
  0%, 5.3%  { transform: scaleY(0); }
  13.3%     { transform: scaleY(1); }
  87%       { transform: scaleY(1); }
  93%, 100% { transform: scaleY(0); }
}
/* Bar 4: delay 1200ms (8%) — cresce por último */
@keyframes v-bar-4 {
  0%, 8%    { transform: scaleY(0); }
  16%       { transform: scaleY(1); }
  87%       { transform: scaleY(1); }
  93%, 100% { transform: scaleY(0); }
}

/* Curva fina desenhando com stroke-dasharray */
.v-dash-curve {
  position: absolute;
  inset: var(--space-2) var(--space-4) var(--space-1);
  width: calc(100% - var(--space-8));
  height: calc(100% - var(--space-3));
  z-index: 2;
  pointer-events: none;
}
.v-dash-curve path {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: v-curve 15s ease-in-out infinite;
}
/* Curva: começa a desenhar aos 2s (13.3%), termina aos 4.5s (30%), hold, fade */
@keyframes v-curve {
  0%, 13%   { stroke-dashoffset: 320; opacity: 0; }
  15%       { opacity: 1; }
  30%       { stroke-dashoffset: 0; opacity: 1; }
  87%       { stroke-dashoffset: 0; opacity: 1; }
  93%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Terminal */
.v-dash-terminal {
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--alpha-wht-70);
  min-height: 1.6em;
}

.v-dash-line {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
}

/* Prompt '>' piscando como cursor de terminal */
.v-dash-prompt {
  color: var(--color-green);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
  animation: v-prompt-blink 1.2s ease-in-out infinite;
}
@keyframes v-prompt-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* Stack: 3 linhas empilhadas no mesmo espaço, uma visível por vez */
.v-dash-stack {
  position: relative;
  display: block;
  flex: 1;
  min-height: 1.6em;
}

.v-dash-typing {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  max-width: 0;
  opacity: 0;
}

/* Cada linha: entrada com typing (steps), hold, fade.
   Timing:
   Linha 1: type 30-36.7% (4.5-5.5s), hold→fade 50% (7.5s)
   Linha 2: type 50-56.7% (7.5-8.5s), hold→fade 70% (10.5s)
   Linha 3: type 70-77% (10.5-11.5s), hold longo até 90% (13.5s) */

.v-dash-typing--1 { animation: v-type-1 15s linear infinite; }
.v-dash-typing--2 { animation: v-type-2 15s linear infinite; }
.v-dash-typing--3 { animation: v-type-3 15s linear infinite; }

@keyframes v-type-1 {
  0%, 29%   { opacity: 0; max-width: 0; }
  30%       { opacity: 1; max-width: 0; animation-timing-function: steps(26, end); }
  36.7%     { opacity: 1; max-width: 26ch; animation-timing-function: ease-out; }
  48%       { opacity: 1; max-width: 26ch; }
  51%       { opacity: 0; max-width: 26ch; }
  100%      { opacity: 0; max-width: 0; }
}

@keyframes v-type-2 {
  0%, 49%   { opacity: 0; max-width: 0; }
  50%       { opacity: 1; max-width: 0; animation-timing-function: steps(25, end); }
  56.7%     { opacity: 1; max-width: 25ch; animation-timing-function: ease-out; }
  68%       { opacity: 1; max-width: 25ch; }
  71%       { opacity: 0; max-width: 25ch; }
  100%      { opacity: 0; max-width: 0; }
}

@keyframes v-type-3 {
  0%, 69%   { opacity: 0; max-width: 0; }
  70%       { opacity: 1; max-width: 0; animation-timing-function: steps(27, end); }
  77%       { opacity: 1; max-width: 28ch; animation-timing-function: ease-out; }
  90%       { opacity: 1; max-width: 28ch; }
  93%       { opacity: 0; max-width: 28ch; }
  100%      { opacity: 0; max-width: 0; }
}

.v-dash-check {
  color: var(--color-green);
  font-weight: var(--fw-bold);
  margin-left: 0.3em;
}

/* Reduced motion: painel de dashboard ESTÁTICO no estado final (mesmo
   padrão dos steps do "Como funciona" em page-internal.css). Barras na
   altura certa (o estado base é scaleY(0) — sem isso elas sumiriam),
   curva completa, prompt sem piscar e terminal com as 3 linhas
   desempilhadas e completas (o stack animado mostra 1 por vez; estático,
   viram uma lista com todo o texto visível). Vale nos dois consumidores
   do partial (home + página interna do Analytics). */
@media (prefers-reduced-motion: reduce) {
  .v-dash-bar {
    animation: none;
    transform: scaleY(1);
  }
  .v-dash-curve path {
    animation: none;
    stroke-dashoffset: 0;
  }
  .v-dash-prompt { animation: none; }
  .v-dash-stack { min-height: 0; }
  .v-dash-typing {
    animation: none;
    position: static;
    display: block;
    max-width: none;
    opacity: 1;
  }
}

/* =============================================================
   CARDS MENORES — CyndIA · ONDA · Agentes de IA
   Grid abaixo do Analytics row. Sem mockup visual: só texto,
   badge colorido por produto, check animado e border-radius
   assimétrico para fugir do "rounded-xl uniforme" genérico.
   ============================================================= */

/* Badge: MAIN — verde da ferramenta (espelha o --main/Analytics acima;
   era azul claro até a padronização de cores de 2026-08). */
.v-product-badge--agentes {
  color: var(--color-green);
  background: var(--alpha-grn-10);
  border-color: var(--alpha-grn-30);
}

/* Badge: RC-18 — azul claro #0096DE (decisão Gabriel 2026-08: cor livre da
   paleta; o royal da landing /rc-18 colidiria com a pill da CyndIA).
   Sobre navy dá ~5.2:1 (AA ok p/ fs-12). */
.v-product-badge--rc18 {
  color: var(--color-blue);
  background: rgba(0, 150, 222, 0.10);
  border-color: rgba(0, 150, 222, 0.30);
}

/* Wrapper grid — a fila logo abaixo do destaque. Espaçamento enxuto:
   os 3 cards ficam PRÓXIMOS do card de cima (feedback MKT). */
.v-products__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  position: relative;
}

/* Separador gradiente — mesmo padrão do .v-product-row + ::before */
.v-products__cards::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, var(--alpha-grn-15) 50%, transparent 100%);
}

@media (min-width: 768px) {
  .v-products__cards { grid-template-columns: 1fr 1fr; }

  /* Quando há 3 cards em 2 colunas, o 3º (último) fica órfão sozinho
     na 2ª linha encostado à esquerda. Faz ele atravessar as 2 colunas
     mas limita a largura ao tamanho de uma coluna e centraliza.
     ESCOPADO ao wrapper antigo .v-products__cards: dentro do carrossel
     (.v-solcar__q-layer) todo card é first+last child do próprio slot e
     era pego sem querer — encolhia pra ~160px no tablet (QA 2026-07). */
  .v-products__cards .v-product-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc((100% - var(--space-6)) / 2);
    justify-self: center;
  }
}
@media (min-width: 1280px) {
  .v-products__cards {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
  }
  /* No layout 3-col não há órfão — desabilita o override do tablet.
     Escopado ao wrapper antigo como a regra base (simetria; ver QA 2026-07). */
  .v-products__cards .v-product-card:last-child:nth-child(odd) {
    grid-column: auto;
    max-width: none;
    justify-self: stretch;
  }
}

/* Card base — fundo navy-card, border-radius assimétrico, hover lift */
.v-product-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-7) var(--space-6);
  background: linear-gradient(160deg, var(--color-navy-card) 0%, var(--color-navy-card-alt) 100%);
  border: 1px solid var(--alpha-wht-08);
  border-radius: 4px 24px 4px 24px;
  position: relative;
  transition:
    transform   var(--dur-base) var(--ease-out-quart),
    border-color var(--dur-base) var(--ease-out-quart),
    box-shadow  var(--dur-base) var(--ease-out-quart);
}

.v-product-card:hover {
  transform: translateY(-3px);
  border-color: var(--alpha-wht-15);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

/* Borda colorida no hover, por produto */
.v-product-card--analytics:hover { border-color: var(--alpha-grn-30); box-shadow: 0 12px 28px var(--alpha-grn-15); }
.v-product-card--cyndia:hover  { border-color: var(--alpha-roy-30); box-shadow: 0 12px 28px var(--alpha-roy-15); }
.v-product-card--onda:hover    { border-color: rgba(0, 221, 222, 0.30); box-shadow: 0 12px 28px rgba(0, 221, 222, 0.15); }
.v-product-card--agentes:hover { border-color: rgba(0, 150, 222, 0.30); box-shadow: 0 12px 28px rgba(0, 150, 222, 0.15); }
.v-product-card--rc18:hover    { border-color: rgba(0, 150, 222, 0.30); box-shadow: 0 12px 28px rgba(0, 150, 222, 0.15); }

.v-product-card__title {
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.5rem);
  line-height: 1.2;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-snug);
  color: var(--color-white);
  margin: 0 0 var(--space-3) 0;
}

.v-product-card__desc {
  font-size: var(--fs-14);
  color: var(--text-secondary);
  line-height: 1.65;
  font-weight: var(--fw-light);
  margin: 0 0 var(--space-5) 0;
}

/* Lista de bullets — 1 coluna (card é estreito) */
.v-product-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6) 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

.v-product-card__features li {
  position: relative;
  padding-left: calc(var(--space-7) + 4px);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  line-height: 1.45;
  transition: transform var(--dur-base) var(--ease-out-quart);
}

/* Check default (verde) — para o card de Agentes de IA */
.v-product-card__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--alpha-grn-15);
  border: 1.5px solid var(--alpha-grn-40);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300DE97' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='5,12.5 10,17 19,7.5'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  transition:
    background-color var(--dur-base) var(--ease-out-quart),
    border-color     var(--dur-base) var(--ease-out-quart),
    transform        var(--dur-base) var(--ease-out-quart),
    box-shadow       var(--dur-base) var(--ease-out-quart);
  animation: v-check-pulse 3s ease-in-out infinite;
}

.v-product-card__features li:hover { transform: translateX(2px); }
.v-product-card__features li:hover::before {
  background-color: var(--alpha-grn-30);
  border-color: var(--color-green);
  transform: scale(1.12);
  box-shadow: 0 0 12px var(--alpha-grn-40);
}

/* Check royal — card CyndIA */
.v-product-card:has(.v-product-badge--grj) .v-product-card__features li::before {
  background-color: var(--alpha-roy-10);
  border-color: var(--alpha-roy-30);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F50E0' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='5,12.5 10,17 19,7.5'/></svg>");
  animation-name: v-check-pulse-royal;
}
.v-product-card:has(.v-product-badge--grj) .v-product-card__features li:hover::before {
  background-color: var(--alpha-roy-20);
  border-color: var(--color-royal);
  box-shadow: 0 0 12px var(--alpha-roy-40);
}

/* Check teal — card ONDA */
.v-product-card:has(.v-product-badge--onda) .v-product-card__features li::before {
  background-color: rgba(0, 221, 222, 0.10);
  border-color: rgba(0, 221, 222, 0.30);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300DDDE' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='5,12.5 10,17 19,7.5'/></svg>");
  animation-name: v-check-pulse-teal;
}
.v-product-card:has(.v-product-badge--onda) .v-product-card__features li:hover::before {
  background-color: rgba(0, 221, 222, 0.20);
  border-color: var(--color-teal);
  box-shadow: 0 0 12px rgba(0, 221, 222, 0.40);
}

/* Check azul — cards Agentes de IA e RC-18 (compartilham o #0096DE) */
.v-product-card:has(.v-product-badge--agentes) .v-product-card__features li::before,
.v-product-card:has(.v-product-badge--rc18) .v-product-card__features li::before {
  background-color: rgba(0, 150, 222, 0.10);
  border-color: rgba(0, 150, 222, 0.30);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230096DE' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='5,12.5 10,17 19,7.5'/></svg>");
  animation-name: v-check-pulse-blue;
}
.v-product-card:has(.v-product-badge--agentes) .v-product-card__features li:hover::before,
.v-product-card:has(.v-product-badge--rc18) .v-product-card__features li:hover::before {
  background-color: rgba(0, 150, 222, 0.20);
  border-color: var(--color-blue);
  box-shadow: 0 0 12px rgba(0, 150, 222, 0.40);
}

@keyframes v-check-pulse-blue {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 150, 222, 0.20); }
  50%      { box-shadow: 0 0 0 4px transparent; }
}

.v-product-card__link {
  align-self: flex-start;
  margin-top: auto;
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
}

@media (prefers-reduced-motion: reduce) {
  .v-product-card__features li::before { animation: none; }
  .v-product-card { transition: none; }
}

/* =============================================================
   CARROSSEL "NOSSAS SOLUÇÕES" — troca ESTACIONÁRIA (scale + fade)
   JS: products-carousel.js.

   Modelo: cada SLOT (o destaque + cada posição da fila) empilha as
   4 soluções como "layers" no mesmo lugar (grid 1/1); o JS só ativa
   a layer certa de cada slot. Na rotação, o 1º da fila (ordem
   lógica) assume o destaque e o destaque desce pro slot vago — e a
   ANIMAÇÃO acontece no próprio lugar: a layer que sai encolhe e
   esmaece onde está; a que entra nasce pequena/transparente e
   cresce até o tamanho final no slot de destino. Sem translação
   pela tela (o voo FLIP foi abandonado — feedback MKT: sensação de
   trânsito). Os outros 2 cards não se movem.
   ============================================================= */

.v-solcar { position: relative; }

/* Slots empilhados: todas as layers na MESMA célula de grid (1/1) —
   o container assume a altura da maior layer (sem salto na troca). */
.v-solcar__featured,
.v-solcar__qpos {
  display: grid;
}
.v-solcar__layer {
  grid-area: 1 / 1;
  min-width: 0;
}

/* Card da fila preenche o slot inteiro → os 3 cards da fila ficam
   sempre com a MESMA altura (a do maior conteúdo empilhado),
   independente da quantidade de itens do checklist (pedido MKT). */
.v-solcar__q-layer { display: grid; }

/* Troca estacionária: scale + opacity no PRÓPRIO slot. A layer que
   sai encolhe e esmaece; a que entra cresce e aparece — as duas
   simultâneas, empilhadas no mesmo lugar. 400ms com ease-in-out do
   tema (era ~800ms; MKT pediu troca mais ágil em 2026-08).
   O visibility com delay tira a layer inativa do fluxo de foco e de
   leitura só DEPOIS que a animação termina. */
.v-solcar { --swap-dur: 400ms; }

.v-solcar__layer {
  opacity: 0;
  visibility: hidden;
  transform: scale(.86);
  transform-origin: center;
  transition:
    opacity    var(--swap-dur) var(--ease-in-out),
    transform  var(--swap-dur) var(--ease-in-out),
    visibility 0s linear var(--swap-dur);
}
.v-solcar__layer.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition:
    opacity   var(--swap-dur) var(--ease-in-out),
    transform var(--swap-dur) var(--ease-in-out);
}

/* Affordance: em ≥768px o clique num card da FILA promove a solução
   pro destaque (products-carousel.js); abaixo disso o tap navega
   direto pra página (link-through) — clicável nos dois casos. */
.v-solcar__q-layer.is-active .v-product-card {
  cursor: pointer;
}

/* Fila: posições fixas lado a lado (mesma grade dos cards de antes) */
.v-solcar__queue {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  position: relative;
}
/* separador em gradiente (padrão do design anterior) */
.v-solcar__queue::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, var(--alpha-grn-15) 50%, transparent 100%);
}
@media (min-width: 768px) {
  .v-solcar__queue { grid-template-columns: 1fr 1fr; }
  /* 3 posições em 2 colunas: a última (ímpar) centraliza em vez de
     ficar órfã encostada à esquerda. */
  .v-solcar__qpos:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc((100% - var(--space-6)) / 2);
    justify-self: center;
  }
}
@media (min-width: 1280px) {
  /* 4 posições (5 soluções − destaque) numa linha só; gap menor que o
     antigo 3-col (space-8) pra dar largura útil aos cards. */
  .v-solcar__queue { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
  .v-solcar__qpos:last-child:nth-child(odd) {
    grid-column: auto;
    max-width: none;
    justify-self: stretch;
  }
}

/* ---------- Visual clean: sem elevação (só borda) ----------
   Remove qualquer sombra dos cards e dos painéis de visual dentro do
   carrossel — em repouso E no hover, desktop e mobile (pedido MKT). */
.v-solcar .v-product-card,
.v-solcar .v-product-card:hover {
  box-shadow: none;
  transform: none;
}
.v-solcar .v-dash-panel,
.v-solcar .v-sol-art {
  box-shadow: none;
}

/* Controles — escondidos como fallback sem JS; o JS revela (.is-ready) */
.v-solcar__controls { display: none; }
.v-solcar.is-ready .v-solcar__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

/* Setas */
.v-solcar__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--alpha-wht-15);
  background: var(--alpha-wht-04);
  color: var(--color-white);
  cursor: pointer;
  transition:
    border-color var(--dur-base) var(--ease-out-quart),
    background   var(--dur-base) var(--ease-out-quart),
    color        var(--dur-base) var(--ease-out-quart),
    transform    var(--dur-base) var(--ease-out-quart);
}
.v-solcar__nav:hover {
  border-color: var(--alpha-grn-40);
  background: var(--alpha-grn-10);
  color: var(--color-green);
}
.v-solcar__nav:active { transform: scale(0.94); }
.v-solcar__nav:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.v-solcar__nav svg { width: 20px; height: 20px; }

/* Dots */
.v-solcar__dots {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.v-solcar__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--alpha-wht-22);
  cursor: pointer;
  transition:
    background var(--dur-base) var(--ease-out-quart),
    transform  var(--dur-base) var(--ease-out-quart);
}
.v-solcar__dot:hover { background: var(--alpha-wht-50); }
.v-solcar__dot.is-active {
  background: var(--color-green);
  transform: scale(1.35);
  box-shadow: 0 0 8px var(--alpha-grn-40);
}
.v-solcar__dot:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* (Onda 3: botão pausar/retomar removido — controles ficam setas + dots,
   centralizados pelo flex do .v-solcar__controls.) */

/* ---------- Mobile: single-item (só o destaque) ------------ */
@media (max-width: 767px) {
  /* esconde a fila — navega-se 1 por vez (estilo Instagram/TikTok) */
  .v-solcar__queue { display: none; }

  /* destaque empilhado: TEXTO no topo, visual abaixo (pedido) */
  .v-solcar .v-product-row__content { order: 1; }
  .v-solcar .v-product-row__visual  { order: 2; }

  /* setas menores/discretas */
  .v-solcar__nav { width: 34px; height: 34px; }
  .v-solcar__nav svg { width: 16px; height: 16px; }
  .v-solcar.is-ready .v-solcar__controls { gap: var(--space-3); }
}

/* ---------- Reduced motion: troca instantânea (corte seco) -- */
/* A rotação (auto + manual) continua; sai só a animação de
   scale + fade das layers. */
@media (prefers-reduced-motion: reduce) {
  .v-solcar__layer,
  .v-solcar__layer.is-active { transition: none; }
}


/* === solutions-hub.css === */
/* =============================================================
   HUB /SOLUCOES (v-sol-hub) — page-solucoes.php
   Seção clara no cinza oficial da marca (--surface-light) com
   intro central (adaptação do v-page-hero para fundo claro) e
   grade 2-col dos cards de produto (5 cards: o último, ímpar,
   centraliza na própria linha).

   Reuso deliberado:
   - .v-product-badge + modificadores (products.css) — aqui sobre
     chip navy sólido: as cores dos 5 produtos passam AA sobre navy;
     sobre branco, teal/azul reprovariam.
   - .v-product-card--{analytics,cyndia,onda,agentes,rc18}:hover
     (products.css) — borda/sombra colorida por produto, sem
     depender da base .v-product-card (que é dark).
   - Links no claro em --color-green-ink (padrão page-internal.css).
   ============================================================= */

/* Sem faixa escura intermediária: atrás do header de vidro fica o
   background navy do BODY (base.css), e o .v-site-main já tem um spacer
   global de exatamente topbar + header (header.css) — a seção clara
   começa colada na borda inferior do header. São 3 blocos: header,
   seção clara, rodapé. */
.v-sol-hub {
  background: var(--surface-light);
  padding-block-end: clamp(4rem, 3rem + 3vw, 7rem);
}

/* Faixa CTA→rodapé removida globalmente em footer.css (onda 1 fundação):
   sem override por página — o CTA encosta direto no rodapé navy. */

/* ---------- Intro clara (padrão v-page-hero adaptado) ------- */

.v-sol-hub__intro {
  text-align: center;
  padding-block: clamp(3rem, 2.25rem + 2.5vw, 5rem) clamp(2.5rem, 2rem + 2vw, 4rem);
  max-width: 46rem;
  margin-inline: auto;
}

.v-sol-hub__intro .v-eyebrow {
  justify-content: center;
  margin-bottom: var(--space-4);
  /* Acento verde legível sobre claro — mesmo padrão dos links do
     corpo claro (green-ink, 5.2:1). */
  color: var(--color-green-ink);
}

.v-sol-hub__title {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(2rem, 1.5rem + 2vw, 3.2rem);
  letter-spacing: var(--ls-snug);
  line-height: 1.12;
  color: var(--text-on-light);
  margin: 0 0 var(--space-4) 0;
  text-wrap: balance;
}

.v-sol-hub__subtitle {
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.15rem);
  line-height: 1.65;
  font-weight: var(--fw-light);
  color: var(--text-on-light-muted);
  margin: 0;
}

/* ---------- Grade 2-col ------------------------------------- */

.v-sol-hub__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .v-sol-hub__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
  /* 5 cards em 2 colunas: o último (ímpar) centraliza na própria
     linha, com a mesma largura dos demais, em vez de ficar órfão
     encostado à esquerda (mesmo padrão da fila do carrossel da home
     no tablet, products.css). Escopado a ≥768px: no mobile 1-col a
     regra não pode valer. */
  .v-sol-hub__grid > .v-sol-hub__card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc((100% - var(--space-6)) / 2);
    justify-self: center;
  }
}

@media (min-width: 1280px) {
  .v-sol-hub__grid { gap: var(--space-8); }
  .v-sol-hub__grid > .v-sol-hub__card:last-child:nth-child(odd) {
    width: calc((100% - var(--space-8)) / 2);
  }
}

/* ---------- Card claro -------------------------------------- */
/* Mesma geometria do v-product-card da home (radius assimétrico
   4/24, hover lift) na variante clara: fundo branco, texto navy,
   sombra com tint navy (nunca gray neutro). A borda/sombra colorida
   por produto no hover vem de products.css via v-product-card--*. */

.v-sol-hub__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-7) var(--space-6);
  background: var(--color-white);
  border: 1px solid rgba(16, 26, 59, 0.10);
  border-radius: 4px 24px 4px 24px;
  box-shadow: 0 2px 12px rgba(16, 26, 59, 0.05);
  transition:
    transform    var(--dur-base) var(--ease-out-quart),
    border-color var(--dur-base) var(--ease-out-quart),
    box-shadow   var(--dur-base) var(--ease-out-quart);
}

.v-sol-hub__card:hover {
  transform: translateY(-3px);
}

/* Badge sobre chip navy — cores originais dos produtos ficam AA */
.v-sol-hub__card .v-product-badge {
  background: var(--color-navy);
}

.v-sol-hub__card-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.5rem);
  line-height: 1.2;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-snug);
  color: var(--text-on-light);
  margin: 0 0 var(--space-3) 0;
}

.v-sol-hub__card-desc {
  font-size: var(--fs-15);
  color: var(--text-on-light-muted);
  line-height: 1.65;
  font-weight: var(--fw-light);
  margin: 0 0 var(--space-6) 0;
}

.v-sol-hub__card-link {
  margin-top: auto;
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  color: var(--color-green-ink);
}

@media (prefers-reduced-motion: reduce) {
  .v-sol-hub__card { transition: none; }
  .v-sol-hub__card:hover { transform: none; }
}

/* === solution-art.css === */
/* =============================================================
   SOLUTION ART — ilustrações das páginas de solução
   Pedido MKT 2026-06 (rodada 2): uma ilustração DISTINTA por
   solução, em traços finos e geométricos, tom da marca
   (royal #1F50E0 → verde #00DE97 → teal #00DDDE), moderna, com
   animação ambiente sutil. Substitui o console/grid repetidos.

   Painel escuro comum (coesão) + arte interna única (distinção):
     analytics → curva preditiva
     main      → orquestração de agentes
     cyndia    → constelação de jurimetria (96 tribunais → centro)
     onda      → varredura em ondas (radar)
     rc18      → relatório auditável + selo de conformidade (azul)
   ============================================================= */

.v-sol-art {
  width: 100%;
  max-width: 440px;
  aspect-ratio: 5 / 4;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid var(--alpha-grn-15);
  background:
    radial-gradient(115% 85% at 78% 4%, rgba(31,80,224,.16) 0%, transparent 56%),
    linear-gradient(155deg, var(--color-navy-ink) 0%, var(--color-navy-deep) 100%);
  box-shadow:
    0 24px 60px rgba(8,15,34,.5),
    inset 0 1px 0 var(--alpha-wht-06);
}

/* Malha de pontos sutil — atmosfera; máscara radial some nas bordas */
.v-sol-art::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--alpha-wht-04) 1px, transparent 1px),
    linear-gradient(90deg, var(--alpha-wht-04) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 45%, #000 28%, transparent 80%);
          mask-image: radial-gradient(ellipse 80% 80% at 50% 45%, #000 28%, transparent 80%);
}

/* Linha superior no gradiente oficial da marca */
.v-sol-art::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gradient-brand);
  opacity: .75;
  z-index: 4;
}

.v-sol-art__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 2;
}

/* Etiqueta mono no rodapé do painel */
.v-sol-art__tag {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-3);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--alpha-wht-38);
}
.v-sol-art__tag::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-green);
  box-shadow: 0 0 6px var(--alpha-grn-40);
  margin-right: 7px;
  animation: v-sol-breathe 1.8s ease-in-out infinite;
}
.v-sol-art__tag b { color: var(--alpha-wht-70); font-weight: var(--fw-bold); }

/* (Chip de métrica .v-sol-art__metric removido na onda 2b fechamento —
   só o painel do Analytics o usava e a nova arte de curva não tem badge.) */

/* onda 2b — acentos do painel seguem a IDENTIDADE da arte. O corpo escuro,
   a malha de pontos, a forma e a sombra continuam COMUNS (coesão); só o
   traço-topo, o dot da tag e a cor da borda mudam. Analytics mantém a base
   (dot verde + traço royal→verde = paleta Analytics). */
.v-sol-art--cyndia { border-color: color-mix(in srgb, var(--color-royal) 22%, transparent); }
.v-sol-art--cyndia::after { background: linear-gradient(135deg, #6D8DEB, #1F50E0); }
.v-sol-art--cyndia .v-sol-art__tag::before {
  background: #6D8DEB;
  box-shadow: 0 0 6px color-mix(in srgb, var(--color-royal) 55%, transparent);
}

.v-sol-art--onda { border-color: color-mix(in srgb, var(--color-teal) 22%, transparent); }
.v-sol-art--onda::after { background: linear-gradient(135deg, #00DDDE, #B283F8); }
.v-sol-art--onda .v-sol-art__tag::before {
  background: #00DDDE;
  box-shadow: 0 0 6px color-mix(in srgb, var(--color-teal) 55%, transparent);
}

/* MAIN é verde (= base do dot/borda); só afina o traço-topo p/ verde puro. */
.v-sol-art--main::after { background: linear-gradient(135deg, #59EABB, #00DE97); }

.v-sol-art--rc18 { border-color: color-mix(in srgb, var(--color-blue) 22%, transparent); }
.v-sol-art--rc18::after { background: linear-gradient(135deg, #4DBAEA, #0096DE); }
.v-sol-art--rc18 .v-sol-art__tag::before {
  background: #4DBAEA;
  box-shadow: 0 0 6px color-mix(in srgb, var(--color-blue) 55%, transparent);
}

/* ---------- Keyframes compartilhados ------------------------ */
@keyframes v-sol-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}
/* Desenho de traço (path com pathLength="1") */
@keyframes v-sol-draw {
  0%        { stroke-dashoffset: 1; opacity: 0; }
  8%        { opacity: 1; }
  40%       { stroke-dashoffset: 0; opacity: 1; }
  88%       { stroke-dashoffset: 0; opacity: 1; }
  97%       { stroke-dashoffset: 0; opacity: 0; }
  100%      { stroke-dashoffset: 1; opacity: 0; }
}
/* Pop de nó/ponto */
@keyframes v-sol-pop {
  0%, 6%    { opacity: 0; transform: scale(0); }
  14%       { opacity: 1; transform: scale(1.25); }
  22%       { transform: scale(1); }
  88%       { opacity: 1; }
  97%, 100% { opacity: 0; transform: scale(1); }
}

/* (A arte do Analytics saiu deste sistema: a curva da onda 2b fechamento
   foi descartada e o Analytics passou a usar o painel de dashboard
   compartilhado v-dash-* — estilos em products.css, markup no branch
   'analytics' do sol-art.php, renderizado na home E na página interna.) */

@keyframes v-sol-dashmarch { to { stroke-dashoffset: -160; } }

/* Keyframes compartilhados extras */
@keyframes v-sol-spin  { to { transform: rotate(360deg); } }
@keyframes v-sol-pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* =============================================================
   MAIN — orquestração de agentes (hub hexagonal + ramos)
   ============================================================= */
.v-sol-art--main .v-mn-link {
  stroke-dasharray: 2 7;
  animation: v-sol-dashmarch 4s linear infinite;
}
.v-sol-art--main .v-mn-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: v-sol-spin 16s linear infinite;
}
.v-sol-art--main .v-mn-core { animation: v-sol-breathe 2.4s ease-in-out infinite; }
.v-sol-art--main .v-mn-in   { animation: v-sol-pulse 3s ease-in-out infinite; }
.v-sol-art--main .v-mn-out {
  transform-box: fill-box;
  transform-origin: center;
  animation: v-mn-out 3.2s ease-in-out infinite;
}
.v-sol-art--main .v-mn-out--2 { animation-delay: .5s; }
.v-sol-art--main .v-mn-out--3 { animation-delay: 1s; }
@keyframes v-mn-out {
  0%, 100% { opacity: .35; transform: scale(.82); }
  50%      { opacity: 1;   transform: scale(1); }
}

/* =============================================================
   CYNDIA — labirinto do contencioso (rota resolvida)
   ============================================================= */
/* O traço (rota) percorre o labirinto em loop. Origem e destino são
   marcadores ESTÁTICos (terminais fixos — não "soltos"); o destino verde
   tem um halo pulsante = "resolvido". Sem nós intermediários (eram eles
   que apareciam à frente da linha → "pontos soltos"). */
.v-sol-art--cyndia .v-cy-path {
  stroke-dasharray: 1;
  animation: v-sol-draw 9s linear infinite;
}
.v-sol-art--cyndia .v-cy-glow {
  transform-box: fill-box;
  transform-origin: center;
  animation: v-cy-glow 2.6s ease-in-out infinite;
}
@keyframes v-cy-glow {
  0%, 100% { opacity: .5;  transform: scale(.9); }
  50%      { opacity: .18; transform: scale(1.35); }
}

/* =============================================================
   ONDA — varredura em ondas (radar / sonar)
   ============================================================= */
.v-sol-art--onda .v-on-sweep {
  transform-box: view-box;
  transform-origin: 200px 162px;
  animation: v-sol-spin 4.5s linear infinite;
}
.v-sol-art--onda .v-on-wave {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: v-on-wave 4.2s ease-out infinite;
}
.v-sol-art--onda .v-on-wave--2 { animation-delay: 1.4s; }
.v-sol-art--onda .v-on-wave--3 { animation-delay: 2.8s; }
@keyframes v-on-wave {
  0%   { transform: scale(.1); opacity: 0; }
  14%  { opacity: .7; }
  100% { transform: scale(1); opacity: 0; }
}
.v-sol-art--onda .v-on-blip {
  transform-box: fill-box;
  transform-origin: center;
  animation: v-sol-pulse 2.6s ease-in-out infinite;
}
.v-sol-art--onda .v-on-blip--2 { animation-delay: .6s; }
.v-sol-art--onda .v-on-blip--3 { animation-delay: 1.2s; }
.v-sol-art--onda .v-on-blip--4 { animation-delay: 1.8s; }
.v-sol-art--onda .v-on-core { animation: v-sol-breathe 2s ease-in-out infinite; }

/* =============================================================
   RC-18 — relatório auditável (checklist com pops sequenciais)
   + selo de conformidade (anel tracejado girando + halo)
   ============================================================= */
.v-sol-art--rc18 .v-rc18-check {
  transform-box: fill-box;
  transform-origin: center;
  animation: v-sol-pop 8s ease-in-out infinite;
}
.v-sol-art--rc18 .v-rc18-check--2 { animation-delay: .7s; }
.v-sol-art--rc18 .v-rc18-check--3 { animation-delay: 1.4s; }
.v-sol-art--rc18 .v-rc18-check--4 { animation-delay: 2.1s; }
.v-sol-art--rc18 .v-rc18-seal-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: v-sol-spin 18s linear infinite;
}
.v-sol-art--rc18 .v-rc18-seal-glow { animation: v-sol-breathe 2.6s ease-in-out infinite; }

/* Acessibilidade — sem movimento, tudo em estado final visível */
@media (prefers-reduced-motion: reduce) {
  .v-sol-art *               { animation: none !important; }
  .v-sol-art [class] {
    opacity: 1 !important;
    stroke-dashoffset: 0 !important;
    transform: none !important;
  }
}

/* === cases.css === */
/* =============================================================
   CASES PREVIEW — Vert Analytics
   Motor de leads. Cards com faixa de cor por setor, resultado
   em destaque (counter-up), filtros maiores, botão ghost→fill.
   ============================================================= */

.v-cases {
  background: var(--bg-page);
  overflow: hidden;
  padding-block: clamp(3rem, 2rem + 2vw, 5rem) var(--space-6);
}

/* ---------- Header (alinhado à esquerda) ------------------- */

.v-cases__header {
  margin-bottom: var(--space-6);
  max-width: var(--container-max);
}
.v-cases__header .v-eyebrow {
  margin-bottom: var(--space-3);
}

/* Filtros removidos da home (pedido MKT 2026-05-26) — ficam só na
   página /cases (.v-cases-filter em cases-page.css). O header agora
   tem respiro maior abaixo já que não há mais a faixa de chips. */
.v-cases__header {
  margin-bottom: var(--space-8);
}

/* ---------- Grid ------------------------------------------ */
/* 3 cards em linha a partir de 768px (pedido MKT 2026-05-26).
   Mobile: 1 coluna empilhada. Os cards agora são <a> que levam pra
   /cases#case-{id}. Sem mais card "featured" full-width.            */

.v-cases__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .v-cases__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }
}

@media (min-width: 1280px) {
  .v-cases__grid {
    gap: var(--space-6);
  }
}

/* Card vira link — herda cor/sem sublinhado, layout idêntico ao article */
.v-case-card-link {
  text-decoration: none;
  color: inherit;
}

/* ---------- Case card -------------------------------------- */

/* Card claro sobre a seção azul (navy-mid): corpo branco, header
   (visual) escuro. Estilo explícito aqui (não depende mais do
   .v-case-card da página de detalhe — esse foi renomeado p/ .v-cd-card,
   fim da colisão de classe). Sem sombra decorativa (repouso e hover) —
   o contraste do corpo branco com a seção já desenha o card; o hover
   fica com borda royal + zoom da foto + título em royal. */
/* Onda 3: sem a borda de 1px — sobre a seção navy ela renderizava como um
   filete branco ao redor da foto (o bg branco do card se estendia por baixo
   da borda translúcida). O card fecha direto na foto/área branca. */
.v-case-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius-xl);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(.16,1,.3,1);
}

.v-case-card[hidden] { display: none; }

/* Anel de foco (a11y teclado) — NÃO remover junto com as sombras
   decorativas: é o indicador de foco dos cards-link. */
.v-case-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,222,151,.5);
}

/* (hover de borda removido junto com a borda — o realce fica no título,
   que vira royal no hover, e no zoom sutil da foto.) */

/* ---------- Visual area ------------------------------------ */
/* __bg: layer translável para parallax (extende inset -20px
   pra não mostrar bordas ao translatar). Pattern e conteúdo
   ficam em camadas fixas acima. */

.v-case-card__visual {
  position: relative;
  min-height: 220px;
  overflow: hidden;
  isolation: isolate;
}

.v-case-card__bg {
  position: absolute;
  inset: -20px;
  z-index: 0;
  transform: translate(var(--px, 0), var(--py, 0));
  transition: transform 0.4s cubic-bezier(.16,1,.3,1), filter 0.4s ease;
}

/* Gradientes por setor — padronizados com as cores dos chips */
.v-case-card--financeiro .v-case-card__bg {
  background: linear-gradient(135deg, var(--color-navy-alt) 0%, var(--color-navy-wash) 50%, var(--alpha-grn-30) 100%);
}
.v-case-card--juridico .v-case-card__bg {
  background: linear-gradient(135deg, var(--color-navy-card) 0%, var(--color-navy-card-alt) 50%, rgba(31,80,224,.3) 100%);
}
.v-case-card--publico .v-case-card__bg {
  background: linear-gradient(135deg, var(--color-navy-card) 0%, var(--color-navy-wash) 50%, rgba(0,221,222,.3) 100%);
}
.v-case-card--industria .v-case-card__bg {
  background: linear-gradient(135deg, var(--color-navy-card) 0%, var(--color-navy-mid) 50%, rgba(0,150,222,.3) 100%);
}

/* Hover: gradiente mais vivo via filter saturate + brightness */
.v-case-card:hover .v-case-card__bg {
  filter: saturate(1.4) brightness(1.1);
}

/* Foto do cliente (banco de imagem) — fica ATRÁS do __bg. Quando há foto,
   o __bg deixa de ser o gradiente do setor e vira um scrim escuro, pra
   manter legíveis o nome (marca d'água) e a métrica. Sem foto, o card
   continua com o gradiente do setor (fallback). */
.v-case-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 0.6s cubic-bezier(.16,1,.3,1);
}
.v-case-card:hover .v-case-card__photo { transform: scale(1.06); }
.v-case-card__visual:has(.v-case-card__photo) .v-case-card__bg,
.v-case-card:hover .v-case-card__visual:has(.v-case-card__photo) .v-case-card__bg {
  background: linear-gradient(157deg, rgba(8,15,34,.9) 0%, rgba(8,15,34,.52) 50%, rgba(8,15,34,.34) 100%);
  filter: none;
}

/* Nome do cliente — onda 3: saiu de cima da foto (era marca d'água grande
   que truncava em ellipsis) e virou o título do bloco de texto BRANCO,
   acima das tags. Fontes do projeto (display), sem truncamento. */
.v-case-card__client {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-15);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-on-light);
  margin-bottom: var(--space-2);
}

/* Tablet (768-1279): cards em 3 colunas ficam estreitos (~240px). Segura
   a métrica dentro da foto. */
@media (min-width: 768px) and (max-width: 1279px) {
  .v-case-card__metric-value {
    font-size: clamp(1.6rem, 0.9rem + 2vw, 2.2rem);
  }
  .v-case-card__metric {
    left: var(--space-3);
    bottom: var(--space-3);
    padding: var(--space-2) var(--space-3);
  }
}

/* ---------- Overlay de métrica (bottom-left, backdrop-filter) --- */

.v-case-card__metric {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: rgba(8,15,34,.55);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-md);
  z-index: 3;
}

.v-case-card__metric-label {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-bottom: 4px;
  white-space: nowrap;
}

/* Onda 3: número em TRANSPARÊNCIA + GRADIENTE da marca (decisão travada —
   efeito exclusivo da Home; o markup adiciona .v-text-gradient, a classe
   global de base.css que faz o clip do gradiente royal→verde no texto).
   A opacity dá a camada de transparência sobre a foto; o color branco fica
   como fallback para browsers sem background-clip:text. */
.v-case-card__metric-value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.6rem + 1.5vw, 3rem);
  font-weight: var(--fw-black);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--color-white);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: 0.9;
}

/* ---------- Download indicator (bottom-right, discreto) --- */

.v-case-card__dl-btn {
  position: absolute;
  bottom: var(--space-4);
  right: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  background: rgba(8,15,34,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  color: rgba(255,255,255,.8);
  z-index: 3;
  transition: all 0.25s cubic-bezier(.4,0,.2,1);
}

.v-case-card:hover .v-case-card__dl-btn {
  background: var(--color-green);
  color: var(--color-navy);
  border-color: var(--color-green);
}

/* ---------- Body (tags + título abaixo do visual) --------- */

.v-case-card__body {
  padding: var(--space-5) var(--space-5) var(--space-4);
  flex: 1;
}

.v-case-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.v-case-card__tag {
  font-family: var(--font-body);
  font-size: 0.6875rem;            /* 11px — antes mono 10px, difícil de ler */
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-royal);
}

.v-case-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: 0.95rem;
  line-height: 1.6;
  letter-spacing: -0.005em;
  color: var(--text-on-light);
  transition: color 0.3s cubic-bezier(.16,1,.3,1);
}

/* Hover: realce sutil em royal (antes virava branco — sumia no card branco) */
.v-case-card:hover .v-case-card__title {
  color: var(--color-royal);
}

/* ---------- Stagger 200ms entre cards ---------------------- */

.v-cases [data-reveal].is-visible {
  transition-delay: calc(var(--reveal-i, 0) * 200ms);
}

/* ---------- Botão "Ver todos os cases" --------------------- */
/* Ghost → fill da esquerda para direita via background-position.
   Centralizado dentro do container principal. */

.v-cases__all {
  display: flex;
  justify-content: center;
  margin: 20px auto 32px;
  max-width: var(--container-max);
}

.v-cases__all-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  border: 1.5px solid var(--color-green);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: var(--fw-bold);
  color: var(--color-green);
  text-decoration: none;
  cursor: pointer;
  /* Gradient dobrado: verde à esquerda, transparente à direita.
     Initially positioned right → só mostra transparente.
     Hover: posição left → verde preenche de esquerda pra direita. */
  background:
    linear-gradient(90deg, var(--color-green) 50%, transparent 50%)
    right / 200% 100%;
  transition:
    background-position 0.4s cubic-bezier(.4,0,.2,1),
    color               0.3s ease,
    box-shadow          0.3s ease;
}
.v-cases__all-btn:hover,
.v-cases__all-btn:focus-visible {
  background-position: left;
  color: var(--color-navy);
  box-shadow: 0 8px 20px rgba(0,222,151,.2);
}
.v-cases__all-btn.has-arrow::after {
  content: '→';
  display: inline-block;
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  line-height: 1;
  /* Onda 3 (alinhamento site-wide): a seta (→) da Mundial assenta abaixo do
     centro óptico do texto — mesmo nudge do .v-btn.has-arrow (buttons.css). */
  transform: translateY(-0.12em);
  transition: transform 0.3s ease;
}
.v-cases__all-btn.has-arrow:hover::after,
.v-cases__all-btn.has-arrow:focus-visible::after {
  transform: translate(5px, -0.12em);
}

/* =============================================================
   GATE MODAL — formulário de captura de leads para download
   ============================================================= */

.v-gate-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--section-px);
  background: rgba(8,15,34,.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity    var(--dur-base) var(--ease-out-quart),
    visibility 0s linear var(--dur-base);
}
.v-gate-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.v-gate-modal {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-2xl);
  padding: var(--space-10) var(--space-8) var(--space-8);
  box-shadow: var(--shadow-lift);
  transform: translateY(12px) scale(0.97);
  transition: transform var(--dur-slow) var(--ease-out-expo);
}
.v-gate-overlay.is-open .v-gate-modal {
  transform: translateY(0) scale(1);
}

.v-gate-modal__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  transition:
    background var(--dur-fast) var(--ease-out-quart),
    color      var(--dur-fast) var(--ease-out-quart);
}
.v-gate-modal__close:hover {
  background: var(--alpha-wht-06);
  color: var(--text-primary);
}

.v-gate-modal__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  margin-bottom: var(--space-4);
  background: var(--alpha-grn-10);
  border: 1px solid var(--alpha-grn-20);
  border-radius: var(--radius-xs);
  font-size: 0.6rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-green);
}

.v-gate-modal__title {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-snug);
  margin-bottom: var(--space-2);
}

.v-gate-modal__subtitle {
  font-size: var(--fs-14);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-light);
  margin-bottom: var(--space-6);
}

/* Inputs do modal — compartilhados com CTA final */
.v-gate-modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Campos empilhados com respiro confortável. Antes este wrapper não tinha
   gap, então inputs/checkbox/botão ficavam colados (visual apertado). */
.v-gate-modal__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.v-input {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--alpha-wht-04);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--fs-14);
  font-family: var(--font-body);
  transition:
    border-color var(--dur-fast) var(--ease-out-quart),
    box-shadow   var(--dur-fast) var(--ease-out-quart);
}
.v-input::placeholder {
  /* --text-muted, não --text-faint: placeholder é texto informativo e
     precisa de AA (wht-60 ≈ 7:1 sobre navy; wht-22 dava 1.99:1). */
  color: var(--text-muted);
}
.v-input:focus {
  outline: none;
  border-color: var(--alpha-grn-40);
  box-shadow: 0 0 0 3px var(--alpha-grn-10);
}

/* Checkbox LGPD */
.v-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
}
.v-checkbox__input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--alpha-wht-04);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition:
    background   var(--dur-fast) var(--ease-out-quart),
    border-color var(--dur-fast) var(--ease-out-quart);
}
.v-checkbox__input:checked {
  background: var(--color-green);
  border-color: var(--color-green);
  /* Checkmark via background-image */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 8.5L6.5 11.5L12.5 4.5' stroke='%23101A3B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
}
.v-checkbox__input:focus-visible {
  box-shadow: var(--focus-ring);
}
.v-checkbox__label {
  font-size: var(--fs-12);
  color: var(--text-muted);
  line-height: 1.5;
}
.v-checkbox__label a {
  color: var(--color-green);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Success state — shown after form submit */
.v-gate-modal__success {
  display: none;
  text-align: center;
  padding: var(--space-6) 0;
}
.v-gate-modal__success.is-visible {
  display: block;
}
.v-gate-modal__success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-4);
  background: var(--alpha-grn-10);
  border-radius: 50%;
  color: var(--color-green);
}

/* === calculator.css === */
/* =============================================================
   CALCULADORA DE LEADS — Vert Analytics
   Multi-step quiz (5 etapas) → resultado com gauge semicircular +
   recomendação de produto + gate de captura de lead.
   ============================================================= */

/* ---------- Seção ----------------------------------------- */

.v-calc {
  background:
    linear-gradient(
      180deg,
      rgba(0,222,151,.02) 0%,
      var(--bg-page) 40%,
      rgba(0,222,151,.015) 100%
    );
  overflow: hidden;
  padding-block: clamp(3rem, 2rem + 2vw, 5rem);
}

/* ---------- Card principal -------------------------------- */

.v-calc__card {
  max-width: 780px;
  margin-inline: auto;
  background: linear-gradient(145deg, var(--color-navy-card) 0%, var(--color-navy-card-alt) 100%);
  border: 1px solid rgba(0,222,151,.1);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
}

/* ---------- Barra de progresso (topo do card) ------------- */

.v-calc__progress {
  position: relative;
  padding: var(--space-5) var(--space-8) 0;
}

/* Trilha de fundo */
.v-calc__progress::before {
  content: '';
  position: absolute;
  top: calc(var(--space-5) + 12px);
  left: var(--space-8);
  right: var(--space-8);
  height: 2px;
  background: rgba(255,255,255,.06);
  border-radius: 2px;
}

/* Barra que preenche (controlada por --progress via JS) */
.v-calc__progress-fill {
  position: absolute;
  top: calc(var(--space-5) + 12px);
  left: var(--space-8);
  right: var(--space-8);
  height: 2px;
  background: var(--color-green);
  border-radius: 2px;
  transform-origin: left;
  transform: scaleX(var(--progress, 0.2));
  /* Ease-in-out (não mais expo-out): o expo despejava ~80% do movimento no
     1º terço do tempo → parecia "salto". Curva simétrica + 0.6s = varredura
     suave e perceptível. Mesma curva nas bolinhas (avançam junto da linha). */
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
  box-shadow: 0 0 8px rgba(0,222,151,.3);
}

/* Dots numerados */
.v-calc__progress-steps {
  position: relative;
  display: flex;
  justify-content: space-between;
}

.v-calc__progress-dot {
  position: relative;
  z-index: 2;                        /* fica acima da barra de progresso */
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: var(--fw-bold);
  background: var(--color-navy-card); /* opaco — nao deixa a linha passar */
  border: 1.5px solid rgba(255,255,255,.1);
  color: var(--text-muted);
  /* Mesma curva ease-in-out da barra (--progress) pra dot e linha avançarem
     juntos e suaves (ver .v-calc__progress-fill). */
  transition:
    background   0.45s cubic-bezier(0.65, 0, 0.35, 1),
    border-color 0.45s cubic-bezier(0.65, 0, 0.35, 1),
    color        0.45s cubic-bezier(0.65, 0, 0.35, 1),
    box-shadow   0.45s cubic-bezier(0.65, 0, 0.35, 1),
    transform    0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Sub-mobile (< bp-sm = 375px): dots ainda menores para caber sem overlap */
@media (max-width: 374px) {
  .v-calc__progress-dot {
    width: 22px;
    height: 22px;
    font-size: 0.65rem;
  }
  .v-calc__progress-dot.is-active {
    box-shadow: 0 0 0 2px rgba(0,222,151,.2);
  }
}

.v-calc__progress-dot.is-done {
  background: var(--color-green);
  border-color: var(--color-green);
  color: var(--color-navy);
}

.v-calc__progress-dot.is-active {
  /* Preenchimento SÓLIDO verde (não só contorno) — número em navy pra
     legibilidade. O halo + o scale distinguem o "atual" do "concluído"
     (que é verde sólido sem halo/scale). */
  background: var(--color-green);
  border-color: var(--color-green);
  color: var(--color-navy);
  box-shadow: 0 0 0 3px rgba(0,222,151,.2);
  transform: scale(1.12); /* pulso sutil no step atual — anima junto da barra */
}

/* ---------- Body (container de steps) --------------------- */

.v-calc__body {
  position: relative;
  min-height: 340px;
  padding: var(--space-8);
}

@media (min-width: 768px) {
  .v-calc__body {
    padding: var(--space-10);
    min-height: 360px;
  }
}

/* ---------- Steps (empilhados, apenas o ativo visível) ----- */

.v-calc__step {
  position: absolute;
  inset: 0;
  padding: var(--space-8);
  opacity: 0;
  /* Transição = ENCOLHER + SUMIR (rodada 4): sem deslize horizontal. O step
     que sai encolhe e some; o que entra cresce sutilmente e aparece. */
  transform: scale(0.98);
  pointer-events: none;
  transition:
    opacity   0.4s ease-out,
    transform 0.4s ease-out;
}

@media (min-width: 768px) {
  .v-calc__step {
    padding: var(--space-10);
  }
}

.v-calc__step.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  position: relative;
  z-index: 2;
}

/* Saindo (avançar E voltar usam o mesmo efeito: encolhe + some, sem direção) */
.v-calc__step.is-leaving,
.v-calc__step.is-leaving-right {
  opacity: 0;
  transform: scale(0.92);
  z-index: 1;
}

.v-calc__step-title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.5rem);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  margin-bottom: var(--space-6);
  letter-spacing: var(--ls-snug);
}

.v-calc__step-hint {
  font-size: var(--fs-13);
  color: var(--text-muted);
  margin-top: calc(-1 * var(--space-4));
  margin-bottom: var(--space-5);
}

/* ---------- Options (cards clicáveis) --------------------- */

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

.v-calc__options--2col {
  grid-template-columns: 1fr;
}
.v-calc__options--3col {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .v-calc__options--2col { grid-template-columns: 1fr 1fr; }
  .v-calc__options--3col { grid-template-columns: 1fr 1fr 1fr; }
}

.v-calc__option {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: rgba(8,15,34,.6);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--fs-14);
  font-weight: var(--fw-regular);
  cursor: pointer;
  text-align: left;
  transition:
    border-color 0.25s ease,
    background   0.25s ease,
    transform    0.2s ease,
    box-shadow   0.25s ease,
    color        0.25s ease;
}

.v-calc__option:hover {
  border-color: rgba(0,222,151,.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,222,151,.08);
  color: var(--color-white);
}

/* Check circle */
.v-calc__option-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color 0.25s ease,
    background   0.25s ease;
}
.v-calc__option-check::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  transition: background 0.25s ease, transform 0.25s ease;
  transform: scale(0);
}

/* Selected state */
.v-calc__option.is-selected {
  border-color: var(--color-green);
  background: rgba(0,222,151,.05);
  color: var(--color-white);
}
.v-calc__option.is-selected .v-calc__option-check {
  border-color: var(--color-green);
  background: rgba(0,222,151,.15);
}
.v-calc__option.is-selected .v-calc__option-check::after {
  background: var(--color-green);
  transform: scale(1);
}

/* Stagger entrance (via --i custom prop set by JS) */
.v-calc__option {
  animation: v-calc-option-in 0.35s ease-out both;
  animation-delay: calc(var(--i, 0) * 50ms);
}

@keyframes v-calc-option-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Navegação (Voltar / Próximo) ------------------ */

.v-calc__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-8) var(--space-6);
  border-top: 1px solid rgba(255,255,255,.04);
}

@media (min-width: 768px) {
  .v-calc__nav {
    padding: var(--space-4) var(--space-10) var(--space-8);
  }
}

.v-calc__back,
.v-calc__next {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  padding: var(--space-2) var(--space-4);
  transition:
    background 0.25s ease,
    color      0.25s ease,
    opacity    0.25s ease,
    transform  0.2s ease;
}

/* "Voltar" agora é retângulo verde igual ao "Próximo" (pedido rodada 4). */
.v-calc__back {
  background: var(--color-green);
  color: var(--color-navy);
}
.v-calc__back:hover:not(:disabled) {
  background: var(--color-green-hover);
  transform: translateY(-1px);
}

.v-calc__next {
  background: var(--color-green);
  color: var(--color-navy);
}
.v-calc__next:hover:not(:disabled) {
  background: var(--color-green-hover);
  transform: translateY(-1px);
}

.v-calc__back:disabled,
.v-calc__next:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------- RESULTADO (página persistente do token) -------- */

.v-calc__result-top {
  margin-bottom: var(--space-8);
  /* Redesign 2026-07: o resultado agora vive na página standalone
     (diagnostico-resultado.php) — centraliza por conta própria (antes
     herdava o alinhamento do step do quiz, que não existe mais). */
  text-align: center;
}

/* Gauge semicircular (CSS puro — conic-gradient + overflow) */
.v-calc__gauge {
  --pct: 0;
  --gauge-color: var(--color-green);
  position: relative;
  width: 220px;
  height: 110px;
  margin: 0 auto var(--space-4);
  overflow: hidden;
}

@media (max-width: 374px) {
  .v-calc__gauge {
    width: 180px;
    height: 90px;
  }
}

.v-calc__gauge-ring {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    from 0.75turn,
    var(--gauge-color) calc(var(--pct) * 1.8deg),
    rgba(255,255,255,.06) calc(var(--pct) * 1.8deg)
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 18px), #000 calc(100% - 17px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 18px), #000 calc(100% - 17px));
  /* Preenchimento animado na ENTRADA: --pct anima de 0 até o valor herdado
     (o inline --pct vive no .v-calc__gauge pai; o @property abaixo é
     inherits:true justamente pra chegar até aqui). O `to` do keyframe é
     omitido de propósito → resolve pro valor herdado (o score), então o
     arco varre 0→score. Antes havia `transition: --pct` aqui, mas transição
     não dispara no 1º paint (valor já nasce definido) → arco ficava estático
     em 0 = anel cinza. Mesmo easing das bolinhas do quiz. */
  animation: v-gauge-fill 1.4s cubic-bezier(.16,1,.3,1) both;
}

@keyframes v-gauge-fill {
  from { --pct: 0; }
}

/* @property: registra --pct como <number> interpolável (necessário pra
   animar o arco). inherits:true é ESSENCIAL — o inline fica no .v-calc__gauge
   (pai) e o arco é desenhado no .v-calc__gauge-ring (filho); com inherits:false
   o filho caía no initial-value 0 e o gauge nunca saía do cinza. */
@property --pct {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.v-calc__gauge-center {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  line-height: 1;
}

.v-calc__gauge-score {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  font-weight: var(--fw-black);
  color: var(--color-white);
}

.v-calc__gauge-max {
  font-family: var(--font-display);
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  color: var(--text-muted);
}

.v-calc__level-label {
  font-family: var(--font-display);
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
  display: inline-block;
}
/* Redesign 2026-07 — score = MATURIDADE (0-100 normalizado):
   inicial=laranja · desenvolvimento=âmbar · avançado=verde ·
   referência=verde PROFUNDO (--color-green-ink, token existente da onda
   do tema claro). Contraste AA verificado sobre o card navy: laranja
   8.1:1, âmbar 10.7:1, verde 9.9:1. O green-ink como TEXTO daria só
   ~3.4:1 → na referência o pill inverte (fundo sólido green-ink + texto
   branco, 5.1:1 ✓) — o que também o torna visualmente distinto do
   "Avançado", como o redesign exige. */
.v-calc__level-label[data-level="inicial"] {
  background: rgba(255,152,0,.12);
  color: var(--color-orange);
}
.v-calc__level-label[data-level="desenvolvimento"] {
  background: rgba(255,193,7,.12);
  color: var(--color-amber);
}
.v-calc__level-label[data-level="avancado"] {
  background: rgba(0,222,151,.1);
  color: var(--color-green);
}
.v-calc__level-label[data-level="referencia"] {
  background: var(--color-green-ink);
  color: var(--color-white);
}

.v-calc__diagnosis {
  font-size: var(--fs-15);
  color: var(--text-secondary);
  max-width: 520px;
  margin-inline: auto;
  line-height: 1.65;
  font-weight: var(--fw-light);
}

/* ---------- Produtos recomendados ------------------------- */

.v-calc__rec-title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-16);
  color: var(--text-secondary);
  letter-spacing: var(--ls-snug);
  margin-bottom: var(--space-5);
  text-align: center; /* centralizado sobre a grade de produtos (a grade não herda) */
}

.v-calc__products {
  display: grid;
  grid-template-columns: 1fr;
  /* Gap generoso: os 3 cards estavam quase encostados com --space-3 (12px) */
  gap: var(--space-5);
  margin-bottom: var(--space-10);
}

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

.v-calc__product {
  position: relative;
  padding: var(--space-5);
  background: rgba(8,15,34,.5);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-lg);
  text-align: left;
  overflow: hidden;
  transition:
    border-color 0.35s ease,
    background   0.35s ease,
    transform    0.35s ease,
    box-shadow   0.35s ease;
}

/* Linha superior em gradiente oficial — padrão dos cards do site */
.v-calc__product::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-brand);
  opacity: 0.35;
  transition: opacity 0.35s ease;
}

/* Redesign 2026-07: o RECOMENDADO usa a identidade COMPLETA do produto
   (tokens --prod-* das ondas anteriores — nada de cor nova); os outros 2
   cards ficam neutros/discretos (linha superior quase apagada + leve
   recuo de opacidade) pro destaque ser inequívoco. */
.v-calc__products .v-calc__product:not(.is-recommended) {
  opacity: 0.78;
}
.v-calc__products .v-calc__product:not(.is-recommended)::before {
  opacity: 0.15;
}

.v-calc__product.is-recommended::before {
  opacity: 1;
}

/* Main/Analytics — verde da identidade (--prod-main-accent) */
/* Glow CONTIDO: blur 24→12 e offset 8→4 pra o halo da cor colar no próprio
   card em vez de "vazar" e tingir o fundo navy do card externo. A cor de
   identidade permanece (borda + bg + linha superior + nome). Mesma redução
   nas 3 variantes abaixo. */
.v-calc__product.is-recommended {
  border-color: var(--prod-main-accent);
  background: var(--alpha-grn-08);
  transform: translateY(-4px);
  box-shadow: 0 4px 12px var(--alpha-grn-15);
}
.v-calc__product[data-product="main"].is-recommended::before {
  background: var(--prod-main-accent);
}

/* CyndIA (data-product="grj" como id interno) — royal da identidade jurídica */
.v-calc__product[data-product="grj"].is-recommended {
  border-color: var(--prod-cyndia-accent);
  background: var(--alpha-roy-08);
  box-shadow: 0 4px 12px var(--alpha-roy-15);
}
.v-calc__product[data-product="grj"].is-recommended::before {
  background: var(--prod-cyndia-accent);
}

/* ONDA — identidade dupla teal+violeta (accent + accent-2) */
.v-calc__product[data-product="onda"].is-recommended {
  border-color: var(--prod-onda-accent);
  background: rgba(0, 221, 222, 0.08);
  box-shadow: 0 4px 12px rgba(0, 221, 222, 0.15);
}
.v-calc__product[data-product="onda"].is-recommended::before {
  background: linear-gradient(90deg, var(--prod-onda-accent), var(--prod-onda-accent-2));
}

.v-calc__product-name {
  font-family: var(--font-display);
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  margin-bottom: var(--space-2);
}
.v-calc__product.is-recommended .v-calc__product-name {
  color: var(--prod-main-accent);
}
.v-calc__product[data-product="grj"].is-recommended .v-calc__product-name {
  color: var(--prod-cyndia-accent);
}
.v-calc__product[data-product="onda"].is-recommended .v-calc__product-name {
  color: var(--prod-onda-accent);
}

.v-calc__product-desc {
  font-size: var(--fs-13);
  color: var(--text-muted);
  line-height: 1.55;
  font-weight: var(--fw-light);
}

/* ---------- Gate de captura ------------------------------- */

.v-calc__gate {
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: var(--space-8);
  text-align: center;
}

.v-calc__gate-title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  color: var(--color-white);
  margin-bottom: var(--space-6);
}

.v-calc__gate-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

@media (min-width: 768px) {
  .v-calc__gate-fields {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.v-calc__gate .v-checkbox {
  margin-bottom: var(--space-4);
  justify-content: center;
}

.v-calc__gate-submit {
  max-width: 320px;
  margin-inline: auto;
}

/* Success state */
.v-calc__gate-success {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6);
  color: var(--color-green);
}
.v-calc__gate-success svg {
  width: 40px;
  height: 40px;
}
.v-calc__gate-success p {
  font-size: var(--fs-15);
  color: var(--text-secondary);
}

.v-calc__gate.is-submitted .v-calc__gate-form { display: none; }
.v-calc__gate.is-submitted .v-calc__gate-success { display: flex; }

/* Gate RÍGIDO (redesign 2026-07): agora é um STEP próprio do quiz (vem
   depois das 5 perguntas, antes do resultado — que só existe na página
   persistente). Sem o divisor superior de quando era apêndice do
   resultado. */
.v-calc__gate--strict {
  border-top: 0;
  padding-top: 0;
}
.v-calc__gate-sub {
  font-size: var(--fs-15);
  color: var(--text-secondary);
  max-width: 480px;
  margin: 0 auto var(--space-6);
  line-height: 1.6;
  font-weight: var(--fw-light);
}

/* ---------- Páginas cheias do Diagnóstico (quiz + resultado) -------- */

/* Corpo CLARO espelhando Cases/Contato (hero dark + body claro): a seção
   .v-calc é navy por padrão (--bg-page). Nas DUAS páginas cheias — /diagnostico
   (quiz) e /diagnostico/resultado (resultado), ambas com .v-calc--page — o
   fundo vira o cinza claro oficial da marca. O CARD segue navy (painel escuro
   de destaque sobre o claro), então os internos (steps, gauge, cards de
   produto, CTAs, textos brancos) ficam intactos, sem reescrever contraste.
   O modal NÃO usa .v-calc--page (tem tratamento claro próprio, abaixo). */
.v-calc--page {
  background: var(--surface-light);
}

/* Respiro interno do card de resultado: o componente renderiza direto no
   .v-calc__card (sem o .v-calc__body do quiz), então o card nascia com
   padding 0 — gauge colado no topo e CTAs colados na base. Mesmo padding
   interno do card do quiz (space-8 / space-10). */
.v-diag-result .v-calc__card {
  padding: var(--space-8);
}
@media (min-width: 768px) {
  .v-diag-result .v-calc__card {
    padding: var(--space-10);
  }
}

.v-diag-result__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  border-top: 1px solid rgba(255,255,255,.06);
  /* margin-top extra além do padding-top pra separar bem os CTAs dos cards
     de produto (o padding-bottom do card agora garante o respiro na base). */
  margin-top: var(--space-2);
  padding-top: var(--space-8);
}

.v-diag-result__notfound {
  text-align: center;
}
.v-diag-result__notfound p {
  font-size: var(--fs-15);
  color: var(--text-secondary);
  max-width: 480px;
  margin: 0 auto var(--space-6);
  line-height: 1.6;
}
.v-diag-result__notfound .v-diag-result__actions {
  border-top: 0;
  padding-top: 0;
}

/* ---------- Modal do Diagnóstico (Home) -------------------- */

.v-diag-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(4, 16, 35, 0.78);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.v-diag-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* Painel: rola por dentro (max-height em svh — lição do hero: vh mente no
   iOS; svh é a altura visível real). O card do quiz preenche o painel.
   Largura = max-width do card (780px): o X é ancorado no PAINEL, então
   painel mais largo que o card deixava o botão flutuando fora do card
   visível no desktop. */
.v-diag-modal {
  position: relative;
  width: min(780px, 100%);
  max-height: min(92svh, 100%);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-xl);
  transform: translateY(16px);
  transition: transform 0.25s ease;
}
.v-diag-modal-overlay.is-open .v-diag-modal {
  transform: none;
}

.v-diag-modal .v-calc__card {
  width: 100%;
  max-width: none; /* card = painel, sempre (o 780px vem do painel acima) */
  margin: 0;
  /* Faixa reservada pro X: 48px = altura do X (40) + 4px de respiro em cima
     e embaixo (o X centraliza dentro dela via top:4). Empurra progresso E
     gate — sem ela o X cobriria a bolinha "5" no mobile. */
  padding-top: 48px;
  /* Card do modal CLARO por padrão (rodada 4 — variante aprovada). Superfície
     clara oficial da marca; borda/sombra neutras. Difere do card NAVY das
     páginas cheias (/diagnostico e resultado) de propósito: o modal é a
     variante clara aprovada. Os overrides de texto/opções/dots/nav/X ficam
     logo abaixo, escopados a .v-diag-modal. */
  background: var(--surface-light);
  border-color: rgba(16, 26, 59, 0.12);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}

.v-diag-modal__close {
  position: absolute;
  /* Centralizado na faixa de 48px: top 4 + altura 40 + 4 embaixo = 48 (o
     centro do X coincide com o centro da faixa). Antes top:12 numa faixa de
     44 deixava o X descentrado e vazando 8px abaixo dela. */
  top: 4px;
  /* Botão no CENTRO HORIZONTAL do topo do card (pedido rodada 3): left 50%
     do painel (= largura do card) + translateX(-50%). A faixa de 48px o
     mantém acima da barra de progresso (que começa ~20px abaixo dela). */
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;   /* área de toque ≥ 40px (antes 36px) */
  height: 40px;
  /* Card do modal é claro → X claro com ícone navy (círculo branco translúcido). */
  border: 1px solid rgba(16, 26, 59, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: var(--text-on-light);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.v-diag-modal__close:hover,
.v-diag-modal__close:focus-visible {
  color: var(--color-navy);
  border-color: rgba(16, 26, 59, 0.4);
  background: #fff;
}

/* Trava o scroll da página enquanto o modal está aberto */
html.v-diag-modal-open,
html.v-diag-modal-open body {
  overflow: hidden;
}

/* =============================================================
   MODAL CLARO (rodada 4 — variante aprovada, agora PADRÃO).
   Overrides de legibilidade escopados a .v-diag-modal (o card ficou claro
   acima). Tokens de superfície clara já existentes (--surface-light,
   --text-on-light*), sem cor nova. NÃO afeta as páginas cheias (card navy).
   ============================================================= */
/* Títulos e textos → navy sobre claro */
.v-diag-modal .v-calc__step-title,
.v-diag-modal .v-calc__gate-title { color: var(--text-on-light); }
.v-diag-modal .v-calc__step-hint,
.v-diag-modal .v-calc__gate-sub { color: var(--text-on-light-muted); }
/* Opções → card branco, texto navy, borda sutil */
.v-diag-modal .v-calc__option {
  background: #fff;
  border-color: rgba(16, 26, 59, 0.14);
  color: var(--text-on-light);
}
.v-diag-modal .v-calc__option:hover { color: var(--text-on-light); }
.v-diag-modal .v-calc__option.is-selected {
  background: var(--alpha-grn-08);
  border-color: var(--color-green);
  color: var(--text-on-light);
}
.v-diag-modal .v-calc__option-check { border-color: rgba(16, 26, 59, 0.28); }
/* Barra de progresso: trilha escura sobre claro; dots futuros claros */
.v-diag-modal .v-calc__progress::before { background: rgba(16, 26, 59, 0.12); }
.v-diag-modal .v-calc__progress-dot {
  background: #fff;
  border-color: rgba(16, 26, 59, 0.2);
  color: var(--text-on-light-muted);
}
/* ativo/concluído seguem verde sólido (número navy já legível) */
.v-diag-modal .v-calc__progress-dot.is-active,
.v-diag-modal .v-calc__progress-dot.is-done {
  background: var(--color-green);
  border-color: var(--color-green);
  color: var(--color-navy);
}
/* Divisor do nav sobre o claro (os botões Voltar/Próximo já são verdes). */
.v-diag-modal .v-calc__nav { border-top-color: rgba(16, 26, 59, 0.1); }
/* Gate (último step): os inputs base são texto BRANCO sobre campo quase
   transparente — ilegíveis no card claro. Aqui viram campo branco + texto
   navy. Só no modal (as páginas cheias seguem navy). */
.v-diag-modal .v-input {
  background: #fff;
  border-color: rgba(16, 26, 59, 0.18);
  color: var(--text-on-light);
}
.v-diag-modal .v-input::placeholder { color: var(--text-on-light-muted); }
.v-diag-modal .v-input:focus {
  border-color: var(--color-green);
  box-shadow: 0 0 0 3px var(--alpha-grn-10);
}
.v-diag-modal .v-checkbox__input {
  /* background-COLOR (não shorthand): não apaga o background-image do
     checkmark herdado de cases.css no estado :checked. */
  background-color: #fff;
  border-color: rgba(16, 26, 59, 0.28);
}
/* Estado marcado sobre o card claro — mesma especificidade+ordem que o
   override branco acima venceria o :checked base (concatenado antes, em
   cases.css); reafirma o verde + borda verde. O checkmark navy do
   cases.css:515 fica legível sobre o verde. Espelha /contato
   (page-internal.css). */
.v-diag-modal .v-checkbox__input:checked {
  background-color: var(--color-green);
  border-color: var(--color-green);
}
.v-diag-modal .v-checkbox__label { color: var(--text-on-light-muted); }

/* ---------- Reduced motion -------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .v-calc__step {
    transition: opacity 0.15s ease;
    transform: none !important;
  }
  .v-calc__option {
    animation: none;
  }
  /* Barra de progresso: estado muda sem animar (nem barra, nem dots) */
  .v-calc__progress-fill,
  .v-calc__progress-dot {
    transition: none;
  }
  .v-calc__progress-dot.is-active {
    transform: none;
  }
  /* Gauge: sem varredura de entrada — nasce preenchido no score (o --pct
     herdado já vale; sem animação, sem transição). Mesmo princípio das
     bolinhas acima. */
  .v-calc__gauge-ring {
    animation: none;
  }
  /* Modal abre/fecha instantâneo */
  .v-diag-modal-overlay,
  .v-diag-modal {
    transition: none;
  }
  .v-diag-modal {
    transform: none;
  }
}

/* === diag-teaser.css === */
/* =============================================================
   DIAGNÓSTICO TEASER — Card que substitui a calculadora inline
   na home. Convida o visitante a ir para /diagnostico sem tomar
   espaço vertical da home.

   Layout 2026-07 (gauge): mobile-first empilhado e centralizado
   (gauge no topo, generoso; texto + botão abaixo). No desktop
   (≥1280, breakpoint canônico) vira 2 colunas: gauge à esquerda
   (240px) + bloco único de conteúdo (eyebrow/título/desc/botão) à
   direita. O antigo badge-ícone 56×56 e o grid auto 1fr auto foram
   removidos junto com o markup.
   ============================================================= */

.v-diag-teaser {
  padding-block: var(--space-16);
}

.v-diag-teaser__card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  padding: var(--space-8);
  text-align: center;
  background:
    linear-gradient(135deg, var(--color-navy-card) 0%, var(--color-navy-card-alt) 100%);
  border: 1px solid var(--alpha-grn-15);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

/* (O "orb de luz verde" no canto (::before) foi removido no ajuste
   pós-onda 3: era um craft detail pensado p/ quando o card escuro
   flutuava sobre a seção CLARA — com a seção agora navy (mesmo tom do
   hero), o radial verde lia como mancha/sombra indesejada dentro do
   card. O acento verde segue na borda e na linha-topo gradiente.) */

/* Linha sutil no topo com gradient oficial — royal → verde */
.v-diag-teaser__card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-brand);
  opacity: 0.6;
}

/* ---------- Gauge (mostrador + ponteiro animado) ---------- */
/* A arte 3D vive em DUAS camadas geradas do gauge.png original (guardado em
   vert-mkt/referencias/diagnostico/), no mesmo
   enquadramento 640×447: mostrador (sem ponteiro) + ponteiro isolado.
   Sobrepostas com o ponteiro em rotate(0) o desenho é pixel-idêntico à
   arte estática antiga — o rotate só entra na varredura de entrada. */

.v-diag-teaser__visual {
  position: relative;
  z-index: 1;
}

.v-diag-teaser__gauge {
  position: relative;   /* contexto pro ponteiro absoluto */
  /* Empilhado (<1280): tamanho generoso, centralizado. */
  width: clamp(200px, 55vw, 280px);
  margin-inline: auto;
}

.v-diag-teaser__gauge picture {
  display: block;
}

.v-diag-teaser__gauge img {
  display: block;
  width: 100%;
  height: auto;
}

/* Sombra projetada sutil ancora o objeto 3D no card escuro. Só no
   mostrador: no ponteiro ela giraria junto e carimbaria sombra torta. */
.v-diag-teaser__dial {
  filter: drop-shadow(0 12px 28px rgba(4, 16, 35, 0.55));
}

/* Ponteiro empilhado sobre o mostrador, girando em torno da esfera —
   pivô medido na arte: (308, 373) de 640×447. */
.v-diag-teaser__needle {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 48.1% 83.4%;
}

/* Camadas "acesas": versão viva de cada segmento (gauge-seg-*), opacity 0
   por padrão. Cada uma pisca quando o ponteiro passa por cima. */
.v-diag-teaser__seg {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  will-change: opacity;
}

/* Varredura "painel de carro" ao entrar em viewport (o card tem data-reveal;
   o scroll-reveal.js aplica .is-visible): o ponteiro arranca do fundo do
   vermelho, vai até o teal e volta assentando no repouso — rotate(0) =
   posição exata da arte original. Ângulos medidos na arte (rel. repouso):
   vermelho −56..−16, azul −15..+22, verde +22..+68, teal +68..+124. */
.v-diag-teaser__card.is-visible .v-diag-teaser__needle {
  animation: v-diag-needle-sweep 2.6s var(--ease-in-out) both;
}

@keyframes v-diag-needle-sweep {
  0%   { transform: rotate(-35deg); }  /* fundo do vermelho */
  12%  { transform: rotate(-30deg); }  /* respiro antes de arrancar */
  52%  { transform: rotate(96deg); }   /* ponta no centro do teal */
  100% { transform: rotate(0deg); }    /* assenta no azul (arte original) */
}

/* Rastro PERSISTENTE sincronizado com a IDA do ponteiro (cruzamentos
   estimados já descontando o ease-in-out do trecho 12→52%): sai do vermelho
   ~23%, centro do azul ~27%, verde ~34%, teal no pico 52%. Cada segmento
   acende a 100% sob o ponteiro, decai pra 50% quando ele segue adiante e
   PERMANECE nesse brilho ("mais destacado que o normal", pedido do Gabriel).
   Final: tudo em brilho médio, azul (onde o ponteiro para) mais forte. */
.v-diag-teaser__card.is-visible .v-diag-teaser__seg--red   { animation: v-seg-red   2.6s linear both; }
.v-diag-teaser__card.is-visible .v-diag-teaser__seg--blue  { animation: v-seg-blue  2.6s linear both; }
.v-diag-teaser__card.is-visible .v-diag-teaser__seg--green { animation: v-seg-green 2.6s linear both; }
.v-diag-teaser__card.is-visible .v-diag-teaser__seg--teal  { animation: v-seg-teal  2.6s linear both; }

@keyframes v-seg-red   { 0% { opacity: 1; } 23% { opacity: 1; } 32% { opacity: 0.5; } 100% { opacity: 0.5; } }
@keyframes v-seg-blue  { 0% { opacity: 0; } 20% { opacity: 0; } 26% { opacity: 1; }   34% { opacity: 0.5; } 88% { opacity: 0.5; } 100% { opacity: 0.75; } }
@keyframes v-seg-green { 0% { opacity: 0; } 28% { opacity: 0; } 35% { opacity: 1; }   44% { opacity: 0.5; } 100% { opacity: 0.5; } }
@keyframes v-seg-teal  { 0% { opacity: 0; } 42% { opacity: 0; } 52% { opacity: 1; }   62% { opacity: 0.5; } 100% { opacity: 0.5; } }

/* Sem movimento: nada anima — ponteiro na posição da arte, segmentos apagados
   (arte estática normal). */
@media (prefers-reduced-motion: reduce) {
  .v-diag-teaser__card.is-visible .v-diag-teaser__needle,
  .v-diag-teaser__card.is-visible .v-diag-teaser__seg {
    animation: none;
  }
}

/* ---------- Body (eyebrow + título + desc + botão) -------- */

.v-diag-teaser__body {
  min-width: 0;
  position: relative;
  z-index: 1;
}

.v-diag-teaser__body .v-eyebrow {
  margin-bottom: var(--space-2);
}

.v-diag-teaser__title {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.65rem);
  line-height: 1.15;
  letter-spacing: var(--ls-snug);
  color: var(--color-white);
  margin-bottom: var(--space-3);
  text-wrap: balance;
}

.v-diag-teaser__desc {
  font-size: var(--fs-15);
  color: var(--text-secondary);
  line-height: 1.6;
  font-weight: var(--fw-light);
  max-width: 540px;
  margin-inline: auto;
}

/* Empilhado (<1280): a action é mais uma linha do grid, centralizada.
   No desktop ela vira a 3ª coluna do card (regra no media abaixo). */
.v-diag-teaser__action {
  position: relative;
  z-index: 1;
}

/* ---------- Desktop (≥1280): gauge | conteúdo | botão ------------- */

@media (min-width: 1280px) {
  .v-diag-teaser__card {
    grid-template-columns: 240px 1fr auto;
    align-items: center;
    gap: var(--space-10);
    padding: var(--space-8) var(--space-10);
    text-align: left;
  }
  .v-diag-teaser__gauge {
    width: 100%;
    margin-inline: 0;
  }
  .v-diag-teaser__desc {
    margin-inline: 0;
  }
  /* Botão à direita, centrado na altura do card — preenche o vão que
     ficava vazio ao lado do texto. */
  .v-diag-teaser__action {
    grid-column: 3;
    white-space: nowrap;
  }
}

/* === privacy.css === */
/* =============================================================
   PRIVACY — Política de Privacidade.
   Hero dark interativo (varredura de segurança) + corpo CLARO,
   espelhando o tema atual do site (Cases / contato). Documento
   legal longo: prioriza legibilidade — tipografia generosa,
   espaçamento amplo, seções numeradas.
   ============================================================= */

/* =============================================================
   HERO interativo (canvas de varredura — scan-hero.js, variante cadeado)
   ============================================================= */

.v-privacy-hero { min-height: 52vh; }
@media (min-width: 768px) { .v-privacy-hero { min-height: 56vh; } }

.v-privacy-hero__scan {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;            /* acima do bg, abaixo do conteúdo (z:2) */
  pointer-events: none;  /* mousemove capturado no .v-page-hero */
}

/* =============================================================
   CORPO CLARO — documento
   ============================================================= */

body.page-template-page-privacidade .v-privacy-doc {
  background: var(--surface-light);
}

/* Faixa CTA→rodapé removida globalmente em footer.css (onda 1 fundação):
   sem override por página — o CTA encosta direto no rodapé navy. */

.v-privacy {
  max-width: var(--content-narrow);
  margin-inline: auto;
}

/* ---------- Intro ---------------------------------------- */

/* Linha divisória em GRADIENTE via ::after (border-bottom não aceita gradiente). */
.v-privacy__intro {
  position: relative;
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-10);
}

.v-privacy__intro::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--gradient-brand);
}

.v-privacy__intro p {
  font-size: var(--fs-15);
  color: var(--text-on-light-muted);
  line-height: 1.75;
  margin-bottom: var(--space-4);
  font-weight: var(--fw-light);
}

.v-privacy__intro p:last-child {
  margin-bottom: 0;
}

/* Card do DPO com distância igual do texto (acima) e da linha (abaixo). */
.v-privacy__intro .v-privacy__callout--dpo {
  margin: var(--space-6) 0 0;
}

/* ---------- Faixa do PDF oficial ------------------------------------
   Par Visualizar/Baixar do documento assinado, no preâmbulo das duas
   páginas de política (template-parts/legal/doc-download.php).
   Mobile-first, padrão do arquivo: empilhado; a partir de 600px vira
   linha com as ações à direita. */
.v-privacy__doc {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding: var(--space-5);
  /* Branco, como os itens do accordion abaixo: o corpo da página é cinza
     claro, e um tint de 3% sobre ele não chegava a ler como card. */
  background: #fff;
  border: 1px solid rgba(16, 26, 59, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 18px rgba(16, 26, 59, 0.05);
}

@media (min-width: 600px) {
  .v-privacy__doc {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* O .v-privacy__intro p acima já define fs-15/light pro corpo do preâmbulo;
   estes dois são rótulos, então saem daquela régua explicitamente. */
.v-privacy__doc .v-privacy__doc-label {
  font-family: var(--font-display);
  font-size: var(--fs-15);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  color: var(--text-on-light);
  margin-bottom: var(--space-1);
}

.v-privacy__doc .v-privacy__doc-meta {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-on-light-muted);
  margin-bottom: 0;
}

/* As duas regras acima são escopadas por .v-privacy__doc de propósito:
   `.v-privacy__intro p` (0,1,1) tem especificidade MAIOR que uma classe
   sozinha (0,1,0) e sobrescrevia cor e font-weight destes dois rótulos —
   o título saía cinza-claro e leve em vez de navy e bold. */
.v-privacy__doc p {
  margin-bottom: 0;
}

.v-privacy__doc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* ATENÇÃO — estas páginas estilizam TODO <a> do corpo como link de texto:
   `.v-privacy a, .v-privacy__section a { color: royal; border-bottom: 1px
   dashed }` (linha ~226). Especificidade 0,1,1 — vence .v-btn--primary e
   .v-btn--ghost, que são 0,1,0. Sem desfazer isso aqui, o "Baixar PDF" saía
   com texto azul-royal sobre o verde (1.75:1) e o "Visualizar PDF" ficava com
   3 lados de borda sólida 1.5px e o de baixo tracejado 1px.
   Por isso os seletores abaixo são escopados pelo pai (0,2,0) e reescrevem a
   borda INTEIRA, não só a cor. */
.v-privacy__doc-actions .v-btn {
  text-decoration: none;
}
.v-privacy__doc-actions .v-btn--primary {
  color: var(--color-navy);
  border: 0;
}
/* O ghost base é o verde #00DE97, pensado pro fundo navy — sobre o branco
   desta faixa daria ~1.7:1. Vai o verde escurecido (5.2:1). */
.v-privacy__doc-actions .v-btn--ghost {
  color: var(--color-green-ink);
  border: 1.5px solid rgba(0, 125, 87, 0.35);
}
.v-privacy__doc-actions .v-btn--ghost:hover,
.v-privacy__doc-actions .v-btn--ghost:focus-visible {
  border-color: var(--color-green-ink);
  background: rgba(0, 125, 87, 0.07);
}

/* ---------- Seções numeradas ---------------------------- */

.v-privacy__section {
  margin-bottom: var(--space-12);
}

.v-privacy__section:last-child {
  margin-bottom: 0;
}

.v-privacy__section h2 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 0.7vw, 1.65rem);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-snug);
  color: var(--text-on-light);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(16, 26, 59, 0.12);
  position: relative;
}

/* Marker em gradiente da marca à esquerda do título */
.v-privacy__section h2::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 1em;
  background: var(--gradient-brand);
  border-radius: 2px;
  margin-right: var(--space-3);
  vertical-align: -2px;
}

.v-privacy__section h3 {
  font-family: var(--font-display);
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  color: var(--color-royal);
  letter-spacing: var(--ls-crisp);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.v-privacy__section p {
  font-size: var(--fs-15);
  color: var(--text-on-light-muted);
  line-height: 1.75;
  margin-bottom: var(--space-4);
  font-weight: var(--fw-light);
}

/* Termos em destaque (empresa, leis, numeros) em Gradient+ — substitui o
   branco herdado do base.css; melhora a leitura no claro e reforca a marca. */
.v-privacy strong,
.v-privacy__intro p strong,
.v-privacy__section p strong,
.v-privacy__section ul li strong {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-weight: var(--fw-semibold);
}

.v-privacy__section p em {
  color: var(--color-royal);
  font-style: normal;
  font-family: var(--font-body);
  font-size: 0.95em;
}

/* Links dentro de texto legal (royal — bom contraste no claro) */
.v-privacy a,
.v-privacy__section a {
  color: var(--color-royal);
  text-decoration: none;
  border-bottom: 1px dashed rgba(31, 80, 224, 0.4);
  transition:
    color        var(--dur-base) var(--ease-out-quart),
    border-color var(--dur-base) var(--ease-out-quart);
  /* Não quebrar e-mails/links no meio: o link inteiro desce para a próxima
     linha se não couber (facilita ler e copiar). */
  overflow-wrap: normal;
  word-break: normal;
  white-space: nowrap;
}

.v-privacy a:hover,
.v-privacy__section a:hover {
  color: var(--color-royal);
  border-bottom-color: var(--color-royal);
}

/* ---------- Listas ------------------------------------- */

.v-privacy__section ul {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 var(--space-4);
}

.v-privacy__section ul li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--fs-15);
  color: var(--text-on-light-muted);
  line-height: 1.7;
  font-weight: var(--fw-light);
  margin-bottom: var(--space-3);
}

.v-privacy__section ul li::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--gradient-brand);
  transform: rotate(45deg);
}

/* (o destaque dos <strong> em lista usa o Gradient+ definido acima) */

/* ---------- Rodapé da política ------------------------ */

.v-privacy__footer {
  position: relative;
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  text-align: center;
}

/* Reta em gradiente (igual à do preâmbulo), com margem em cima
   (margin-top do bloco) e embaixo (padding-top até o texto). */
.v-privacy__footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--gradient-brand);
}

.v-privacy__meta {
  font-size: var(--fs-13);
  color: var(--text-on-light-muted);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-crisp);
  margin-bottom: var(--space-2);
}

.v-privacy__meta:last-child {
  margin-bottom: 0;
}

/* =============================================================
   ACCORDION — seções recolhíveis (POL-002)
   Padrão WAI-ARIA APG: botão dentro de <h2>, painel role=region.
   Todos fechados no load (painel [hidden]). Comportamento em
   assets/js/privacy-accordion.js.
   ============================================================= */

.v-privacy__accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Coluna única em todas as larguras (feedback MKT 2026-07-24): a lista de
   seções desce uma abaixo da outra, na medida de leitura do container
   (--content-narrow). O layout de 2 colunas do desktop foi removido. */

/* O item do accordion reusa .v-privacy__section, mas sem a margem
   inferior padrão (o gap do container já espaça os itens). */
.v-accordion__item {
  margin-bottom: 0;
  border: 1px solid rgba(16, 26, 59, 0.12);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.v-accordion__item:hover {
  border-color: rgba(31, 80, 224, 0.28);
}

/* ---------- Heading + trigger (cabeçalho clicável) ---------- */

/* Zera o estilo herdado de .v-privacy__section h2 (borda/marker/margem):
   o cabeçalho do accordion é o próprio <button>. Especificidade elevada
   (h2.classe = 0,2,x) para vencer as regras legadas `.v-privacy__section h2`. */
.v-privacy__section h2.v-accordion__heading {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: inherit;
}

/* Remove o marcador em gradiente herdado no canto superior esquerdo do item. */
.v-privacy__section h2.v-accordion__heading::before {
  content: none;
}

.v-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  margin: 0;
  padding: var(--space-5) var(--space-5);
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--text-on-light);
  font-family: var(--font-display);
  /* Peso reduzido de black → bold (feedback MKT 2026-07-24). */
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  transition: background var(--dur-base) var(--ease-out-quart);
}

.v-accordion__trigger:hover {
  background: rgba(31, 80, 224, 0.04);
}

.v-accordion__trigger:focus-visible {
  outline: 2px solid var(--color-royal);
  outline-offset: -2px;
}

/* Título do accordion (sem marcador — removido a pedido) */
.v-accordion__title {
  display: inline-flex;
  align-items: baseline;
  font-size: clamp(1.05rem, 0.9rem + 0.55vw, 1.4rem);
  line-height: 1.35;
}

/* ---------- Ícone chevron (rotaciona ao abrir) ---------- */

/* Sinal "–/+": barra horizontal sempre visível (o "–" = recolher);
   barra vertical some quando aberto. */
.v-accordion__icon {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.v-accordion__icon::before,
.v-accordion__icon::after {
  content: '';
  position: absolute;
  background: var(--color-royal);
  border-radius: 1px;
  transition:
    opacity   var(--dur-base) var(--ease-out-quart),
    transform var(--dur-base) var(--ease-out-quart);
}

/* barra horizontal — o "–" (sempre presente) */
.v-accordion__icon::before {
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  margin-top: -1px;
}

/* barra vertical — completa o "+" (fechado) */
.v-accordion__icon::after {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
}

/* Aberto: esconde a barra vertical → resta só o "–" (clique para recolher) */
.v-accordion__trigger[aria-expanded="true"] .v-accordion__icon::after {
  opacity: 0;
  transform: scaleY(0);
}

/* ---------- Painel + animação de altura ---------- */

/* Técnica grid-template-rows 0fr→1fr: anima a altura sem medir em JS.
   O JS gerencia o atributo [hidden] (a11y / ordem de tabulação). */
.v-accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out-quart);
}

.v-accordion__panel.is-open {
  grid-template-rows: 1fr;
}

/* [hidden] precisa vencer o display:grid acima quando o painel está fechado. */
.v-accordion__panel[hidden] {
  display: none;
}

.v-accordion__panel-inner {
  min-height: 0;
  overflow: hidden;
}

/* Espaçamento interno do conteúdo. Sem linha entre título e corpo — a única
   separação é o padding-bottom do trigger (uma margem só). */
.v-accordion__panel-inner > :first-child {
  margin-top: 0;
}

.v-accordion__panel-inner {
  padding: 0 var(--space-5) var(--space-5);
}

/* Último elemento do painel sem margem sobrando */
.v-accordion__panel-inner > :last-child {
  margin-bottom: 0;
}

/* ---------- Callouts (tabelas de destaque de célula única) ---------- */

.v-privacy__callout {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  background: rgba(31, 80, 224, 0.05);
  border-left: 3px solid var(--color-royal);
  border-radius: 8px;
}

.v-privacy__callout p {
  margin-bottom: var(--space-2);
}

.v-privacy__callout p:last-child {
  margin-bottom: 0;
}

/* Título do callout no padrão de títulos (escuro/forte). Seletor com 2 classes
   para vencer a especificidade de `.v-privacy__callout p` (cor muted), que antes
   deixava o título apagado. */
.v-privacy__callout .v-privacy__callout-title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--text-on-light);
  letter-spacing: var(--ls-crisp);
  font-size: var(--fs-16);
}

/* Box do DPO — título com marcador em gradiente e peso bold, igual aos
   títulos das seções do documento (reduzido de black em 2026-07-24). */
.v-privacy__callout--dpo .v-privacy__callout-title {
  display: flex;
  align-items: center;
  font-weight: var(--fw-bold);
}

.v-privacy__callout--dpo .v-privacy__callout-title::before {
  content: '';
  flex: 0 0 auto;
  width: 4px;
  height: 1em;
  margin-right: var(--space-3);
  border-radius: 2px;
  background: var(--gradient-brand);
}

/* Box do DPO — destaque um pouco mais forte */
.v-privacy__callout--dpo {
  background: rgba(31, 80, 224, 0.06);
  border-left-width: 4px;
}

/* ---------- Tabelas do documento legal ---------- */

/* Wrapper com rolagem horizontal — tabelas largas (bases legais,
   matrizes dos anexos) não podem estourar o layout em 375px. */
.v-privacy__table-wrap {
  margin: var(--space-4) 0;
  overflow-x: auto;
  border: 1px solid rgba(16, 26, 59, 0.10);
  border-radius: 8px;
}

.v-privacy__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-15);
  color: var(--text-on-light-muted);
  font-weight: var(--fw-light);
  line-height: 1.6;
}

.v-privacy__table th,
.v-privacy__table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(16, 26, 59, 0.08);
}

.v-privacy__table tr:last-child th,
.v-privacy__table tr:last-child td {
  border-bottom: 0;
}

.v-privacy__table thead th {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--text-on-light);
  letter-spacing: var(--ls-crisp);
  white-space: nowrap;
  background: rgba(16, 26, 59, 0.03);
}

/* Célula-rótulo (chave) nas tabelas key/value */
.v-privacy__table tbody th[scope="row"] {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  color: var(--text-on-light);
  min-width: 12ch;
}

/* ---------- Movimento reduzido ---------- */

@media (prefers-reduced-motion: reduce) {
  .v-accordion__panel,
  .v-accordion__icon,
  .v-accordion__trigger {
    transition: none;
  }
}

/* === seguranca.css === */
/* =============================================================
   SEGURANÇA DA INFORMAÇÃO — Política POL-001 (ISO/IEC 27001:2022).
   Reaproveita TODO o corpo/accordion da Política de Privacidade
   (.v-privacy* / .v-accordion* em privacy.css). Aqui ficam apenas:
     1) hero dark interativo (canvas — scan-hero.js, variante hexágono);
     2) escopo do corpo claro para a body-class desta página;
     3) helpers de conteúdo exclusivos (cards da seção 10 e os
        subtítulos <h3> de cada controle nas seções 11–14).
   ============================================================= */

/* =============================================================
   HERO interativo (canvas de varredura — scan-hero.js, variante hexágono)
   ============================================================= */

.v-seguranca-hero { min-height: 52vh; }
@media (min-width: 768px) { .v-seguranca-hero { min-height: 56vh; } }

.v-seguranca-hero__grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;            /* acima do bg, abaixo do conteúdo (z:2) */
  pointer-events: none;  /* mousemove capturado no .v-page-hero */
}

/* O scrim radial atrás do título saiu em 2026-07-29: existia porque o motor
   antigo (anéis concêntricos com centro em 85% da largura) passava atrás do
   texto. Com a varredura diagonal do scan-hero.js — o mesmo de /privacidade e
   /conformidade, que vivem sem scrim — o contraste do título se sustenta. */

/* =============================================================
   CORPO CLARO — mesmo tratamento da Política de Privacidade,
   escopado pela body-class desta página.
   ============================================================= */

body.page-template-page-seguranca-da-informacao .v-privacy-doc {
  background: var(--surface-light);
}

/* =============================================================
   Seção 10 — cards das quatro famílias de controles
   ============================================================= */

/* Seletores prefixados com .v-privacy__section para vencer a especificidade
   das regras de lista do documento (.v-privacy__section ul li…), que senão
   injetam recuo e o marcador losango nos cards. */
.v-privacy__section .v-doc-cards {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .v-privacy__section .v-doc-cards { grid-template-columns: repeat(4, 1fr); }
}

.v-privacy__section .v-doc-cards .v-doc-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  margin: 0;
  font-size: var(--fs-14, 0.875rem);
  background: rgba(31, 80, 224, 0.05);
  border: 1px solid rgba(16, 26, 59, 0.10);
  border-radius: 10px;
}

/* Remove o marcador losango herdado das listas do documento. */
.v-privacy__section .v-doc-cards .v-doc-card::before {
  content: none;
}

.v-doc-card__num {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-28, 1.75rem);
  line-height: 1;
  color: var(--color-royal);
}

.v-doc-card__label {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-crisp);
  color: var(--text-on-light);
}

.v-doc-card__desc {
  font-size: var(--fs-14, 0.875rem);
  color: var(--text-on-light-muted);
  line-height: 1.5;
}

/* =============================================================
   Seções 11–14 — subtítulos de cada controle (11.1, 11.2, …)
   ============================================================= */

/* Nota introdutória de família (subtítulo do documento). */
.v-accordion__panel-inner .v-doc-intro {
  color: var(--text-on-light-muted);
  font-style: italic;
  margin-bottom: var(--space-5);
}

/* Cabeçalho de controle: nº em destaque + título. */
.v-accordion__panel-inner h3.v-doc-ctrl {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-crisp);
  color: var(--text-on-light);
  font-size: var(--fs-16, 1rem);
  margin: var(--space-6) 0 var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(16, 26, 59, 0.10);
}

/* Primeiro controle da família (após a nota intro, ou abrindo o painel)
   não repete o traço separador. */
.v-accordion__panel-inner .v-doc-intro + h3.v-doc-ctrl,
.v-accordion__panel-inner h3.v-doc-ctrl:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.v-accordion__panel-inner h3.v-doc-ctrl span {
  display: inline;
  color: var(--text-on-light);
}

/* Número do controle destacado em royal. */
.v-accordion__panel-inner h3.v-doc-ctrl {
  color: var(--color-royal);
}

/* === page-internal.css === */
/* =============================================================
   PÁGINAS INTERNAS — Vert Analytics
   Estilos compartilhados para páginas internas: solutions, cases,
   about, partners, contact, blog. Componentes reutilizáveis com
   design tokens do tema (--color-*, --space-*, --fs-*, etc.).
   ============================================================= */


/* =============================================================
   1. PAGE HERO — Cabeçalho de páginas internas
   Mais simples que o hero da home. Fundo navy gradient, conteúdo
   centralizado ou alinhado à esquerda.
   ============================================================= */

.v-page-hero {
  position: relative;
  overflow: hidden;
  padding-top: var(--header-height);
  min-height: 40vh;
  display: flex;
  align-items: center;
}

/* Variante compacta pra páginas utilitárias (ex.: Canal de Conformidade),
   onde o conteúdo abaixo do hero é o destino principal do visitante. */
.v-page-hero--compact {
  min-height: 34vh;
}

@media (min-width: 768px) {
  .v-page-hero {
    min-height: 50vh;
  }
  .v-page-hero--compact {
    min-height: 40vh;
  }
}

/* ---------- Camada de fundo -------------------------------- */

.v-page-hero__bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      170deg,
      var(--color-navy-deep) 0%,
      var(--color-navy) 50%,
      var(--color-navy-card) 100%
    );
  z-index: 0;
}

/* ---------- Padrão de triângulos (decorativo, lado direito) */

.v-page-hero__pattern {
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  height: 100%;
  opacity: 0.06;
  background-image: var(--pattern-triangles);
  background-size: var(--pattern-triangles-size);
  pointer-events: none;
  z-index: 1;
}

/* ---------- Canvas de partículas (rede de dados) ----------- */

.v-page-hero__particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;          /* acima do bg, abaixo do conteúdo (z-index: 2) */
  pointer-events: none;
  opacity: 0.6;
}

/* ---------- Conteúdo --------------------------------------- */

.v-page-hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  width: 100%;
  margin-inline: auto;
  padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) var(--section-px);
  text-align: center;
}

.v-page-hero .v-eyebrow {
  justify-content: center;
  margin-bottom: var(--space-4);
}

.v-page-hero__title {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(2rem, 1.5rem + 2vw, 3.2rem);
  letter-spacing: var(--ls-snug);
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}

.v-page-hero__subtitle {
  font-size: var(--fs-16);
  color: var(--text-secondary);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  max-width: 600px;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

.v-page-hero__cta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}


/* =============================================================
   2. PAGE SECTIONS — Seções genéricas de conteúdo
   ============================================================= */

.v-page-section {
  padding-block: clamp(3rem, 2rem + 2vw, 5rem);
  background: var(--bg-page);
  overflow: hidden;
}

/* Variante alternada — leve tint verde, estilo calculadora */
.v-page-section--alt {
  background:
    linear-gradient(
      180deg,
      rgba(0,222,151,.02) 0%,
      var(--bg-page) 40%,
      rgba(0,222,151,.015) 100%
    );
}

/* Cabeçalho de seção */
.v-page-section__header {
  text-align: center;
  max-width: var(--content-narrow);
  margin: 0 auto var(--space-10);
}

.v-page-section__header--left {
  text-align: left;
  margin-left: 0;
  margin-right: auto;
}

.v-page-section__header .v-eyebrow {
  margin-bottom: var(--space-3);
}

.v-page-section__header h2 {
  font-size: var(--fs-h2);
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-snug);
  margin-bottom: var(--space-3);
}

.v-page-section__header p {
  font-size: var(--fs-16);
  color: var(--text-secondary);
  font-weight: var(--fw-light);
}

/* Container interno padrão */
.v-page-section__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--section-px);
}


/* =============================================================
   3. PROBLEM SECTION — Layout 2 colunas (título + texto)
   ============================================================= */

/* Seção "PROBLEM" — bloco simples com padding padrão. A largura
   do conteúdo vem do .v-container filho (max 1280px, centrado),
   alinhado à mesma margem do header (logo ← → CTA). */
.v-page-problem {
  padding-block: var(--section-py);
}

.v-page-problem__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.4rem);
  letter-spacing: var(--ls-snug);
  color: var(--text-primary);
  line-height: 1.2;
}

.v-page-problem__text {
  color: var(--text-secondary);
  font-weight: var(--fw-light);
  font-size: var(--fs-16);
  line-height: 1.7;
  max-width: 560px;
}

/* ---------- Variante com ilustração ao lado (pedido MKT 2026-06) -----
   Texto à esquerda, ilustração/console à direita — padrão em todas as
   páginas de solução. Mobile: empilha (texto em cima, ilustração embaixo).
   A ilustração (.v-sol-art, em solution-art.css) já tem max-width
   próprio (~440px) e fundo escuro que "salta" no claro. */
.v-page-problem--media .v-container {
  display: grid;
  gap: var(--space-10);
  align-items: center;
}
.v-page-problem__copy { min-width: 0; }
.v-page-problem__media {
  min-width: 0;
  display: flex;
  justify-content: center;
}
@media (min-width: 768px) {
  .v-page-problem--media .v-container {
    grid-template-columns: 1fr minmax(0, 440px);
    gap: var(--space-12);
  }
  .v-page-problem__media { justify-content: flex-end; }
}


/* =============================================================
   4. FEATURES — Carrossel contínuo + grid fallback
   ============================================================= */

/* Título "O que entregamos" — gap generoso antes dos cards */
.v-page-section__heading {
  margin-bottom: var(--space-12);           /* ~48px */
}

/* ---------- Grid estático (fallback / páginas sem carrossel) */

.v-page-features__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .v-page-features__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1280px) {
  .v-page-features__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Grid FLOW — páginas de solução (onda 2a → flex na 2b) --------
   Modificador do grid base para os features das 4 páginas de produto
   (renderizado pelo partial features-carousel). onda 2b: virou FLEX-WRAP
   centralizado p/ que a ÚLTIMA LINHA INCOMPLETA fique CENTRALIZADA (padrão
   do site) em vez de alinhada à esquerda — ex.: ONDA (8) = 3+3+[2 no centro];
   CyndIA (9) = 3+3+3; Analytics (6) = 3+3; MAIN (3) = 3. Responsivo
   espelhando o grid base: 1 col (mobile) → 2 (≥768) → 3 (≥1280). flex-grow:0
   impede a última linha de "esticar"; flex-shrink:1 evita quebra por
   arredondamento; a base (calc) faz caber exatamente N por linha dentro do
   .v-container (~1152px no desktop). NÃO afeta o grid base do /sobre — só
   este modificador --flow. */
.v-page-features__grid--flow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* gap herdado do grid base (var(--space-5) = 20px) */
}
.v-page-features__grid--flow .v-page-feature {
  flex: 0 1 100%;          /* mobile: 1 por linha */
  min-width: 0;            /* evita overflow do flex item em telas estreitas */
}
@media (min-width: 768px) {
  .v-page-features__grid--flow .v-page-feature {
    flex-basis: calc((100% - var(--space-5)) / 2);        /* 2 por linha */
  }
}
@media (min-width: 1280px) {
  .v-page-features__grid--flow .v-page-feature {
    flex-basis: calc((100% - 2 * var(--space-5)) / 3);    /* 3 por linha */
  }
}

/* ---------- Feature card ----------------------------------- */

.v-page-feature {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  overflow: hidden;
  transition:
    border-color var(--dur-base) var(--ease-out-quart),
    transform    var(--dur-base) var(--ease-out-quart),
    box-shadow   var(--dur-base) var(--ease-out-quart);
}

/* Linha superior no gradiente da IDENTIDADE da página (accent-2 → accent).
   Fora das páginas de produto os tokens caem no default royal→verde
   (= gradiente oficial da marca, comportamento anterior). Por página:
   Analytics royal→verde · CyndIA royal→royal · ONDA violeta→teal · MAIN
   verde→verde. onda 2b. */
.v-page-feature::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(135deg, var(--product-accent-2), var(--product-accent));
  opacity: 0.35;
  transition: opacity var(--dur-base) var(--ease-out-quart);
}

.v-page-feature:hover {
  border-color: color-mix(in srgb, var(--product-accent) 30%, transparent);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--product-accent) 10%, transparent);
}

.v-page-feature:hover::before {
  opacity: 1;
}

/* Ícone circular na cor da IDENTIDADE da página (chip translúcido + glifo
   currentColor, que herda o `color` abaixo). Fora das páginas de produto cai
   no default verde. Por página: Analytics/MAIN verde · CyndIA royal · ONDA
   teal. onda 2b. */
.v-page-feature__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--product-accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--product-accent) 20%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  color: var(--product-accent);
}

.v-page-feature__icon svg {
  display: block;
  flex-shrink: 0;
}

.v-page-feature__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-16);                  /* era fs-15, +1 step pra legibilidade */
  color: var(--color-white);                /* branco puro, máximo contraste */
  margin-bottom: var(--space-2);
}

.v-page-feature__desc {
  font-size: var(--fs-14);                  /* era fs-13, +1 step pra legibilidade */
  color: var(--text-secondary);             /* era text-muted (.38) → secondary (.50) */
  font-weight: var(--fw-light);
  line-height: 1.65;
}

/* (Carrossel removido na onda 2a — features agora são grid responsivo;
   sem estado de reduced-motion de carrossel a tratar.) */


/* =============================================================
   4b. SOURCES — "Fonte de Dados" (página ONDA · onda 2c)
   Grid de cards por categoria de fonte, título no padrão dos demais
   headings de seção (.v-page-section__heading — h2 base + respiro).
   (O "número de fontes como h2 gigante" da onda 2c foi revertido:
   regras .v-sources__stat/__num/__label removidas junto com o markup.)
   Vive no CORPO CLARO do ONDA (tema 20): cards ROXOS (#8306F3, roxo
   da logo — decisão Gabriel 2026-08) com textos brancos, chip e
   linha-topo brancos; hover lift + glow roxo (nada contínuo/
   pulsante). Desktop ≥1280px: os 5 cards em UMA linha (padding
   reduzido p/ caber); tablet 2+2+[1] centralizado, pilha no mobile.
   ============================================================= */

/* --- Grid de categorias (flex-wrap, última linha centralizada) --- */
.v-sources__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5);
}

.v-src-card {
  flex: 0 1 100%;                 /* mobile: 1 por linha */
  min-width: 0;
  position: relative;
  background: var(--color-onda-violet);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: var(--radius-lg);
  padding: var(--space-4);        /* enxuto: 5 cards numa linha no desktop */
  overflow: hidden;
  /* card roxo sobre o corpo claro — mesma sombra dos features (tema 20) */
  box-shadow: 0 10px 30px rgba(16, 26, 59, 0.10);
  transition:
    border-color var(--dur-base) var(--ease-out-quart),
    transform    var(--dur-base) var(--ease-out-quart),
    box-shadow   var(--dur-base) var(--ease-out-quart);
}

@media (min-width: 768px) {
  .v-src-card { flex-basis: calc((100% - var(--space-5)) / 2); }        /* 2 por linha */
}
@media (min-width: 1280px) {
  .v-src-card { flex-basis: calc((100% - 4 * var(--space-5)) / 5); }    /* 5 numa linha */
}

/* Linha-topo branca (o gradiente violeta→teal sumiria sobre o roxo) */
.v-src-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.85);
  opacity: 0.35;
  transition: opacity var(--dur-base) var(--ease-out-quart);
}

/* Micro-interação: elevação leve + glow roxo — sem animação contínua */
.v-src-card:hover {
  border-color: rgba(255, 255, 255, 0.45);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(131, 6, 243, 0.35);
}
.v-src-card:hover::before { opacity: 1; }

.v-src-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.30);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
  color: var(--color-white);
}

.v-src-card__icon svg {
  display: block;
  flex-shrink: 0;
}

.v-src-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-15);
  color: var(--color-white);
  margin-bottom: var(--space-1);
}

.v-src-card__desc {
  font-size: var(--fs-14);
  color: rgba(255, 255, 255, 0.85);   /* +contraste sobre o roxo (text-secondary .70 ficava justo) */
  font-weight: var(--fw-light);
  line-height: 1.6;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .v-src-card,
  .v-src-card::before { transition: none; }
  .v-src-card:hover { transform: none; }
}


/* =============================================================
   5. HOW IT WORKS / STEPS — Passos com conectores
   ============================================================= */

/* Título "Como funciona" → gap generoso antes dos steps */
.v-page-section--alt .v-page-section__heading,
.v-page-section--alt > .v-container > h2 {
  margin-bottom: var(--space-12);           /* ~48px */
}

.v-page-steps__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .v-page-steps__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
  }
}

/* ---------- Step individual -------------------------------- */
/* Estado padrão: inativo (opacidade baixa, escala sutil).
   JS adiciona .is-active sequencialmente no scroll. */

.v-page-step {
  text-align: center;
  position: relative;
  opacity: 0.35;
  transform: translateY(8px);
  transition:
    opacity   0.5s cubic-bezier(.16,1,.3,1),
    transform 0.5s cubic-bezier(.16,1,.3,1);
}

.v-page-step.is-active {
  opacity: 1;
  transform: translateY(0);
}

.v-page-step__num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(255,255,255,.1);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-16);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
  transition:
    background   0.5s ease,
    border-color 0.5s ease,
    color        0.5s ease,
    box-shadow   0.5s ease;
}

/* Número ativo: círculo PREENCHIDO na cor do produto (var(--product-accent),
   atribuído por body-class em tokens.css) + dígito com contraste por
   luminância (--product-accent-ink: navy sobre verde/teal, branco sobre royal).
   onda 2b: SEM pulso. O movimento é o LOOP CONTEMPLATIVO conduzido pelo JS
   (revela 1→2→3→4 preenchendo as linhas, pausa e recomeça); o círculo aceso
   fica estático. */
.v-page-step.is-active .v-page-step__num {
  background: var(--product-accent);
  border-color: var(--product-accent);
  color: var(--product-accent-ink);
}

.v-page-step__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-15);                  /* era fs-14, +1 step */
  color: var(--color-white);                /* branco puro, máximo contraste */
  margin-bottom: var(--space-2);
}

.v-page-step__desc {
  font-size: var(--fs-14);                  /* era fs-13, +1 step */
  color: var(--text-secondary);             /* era text-muted (.38) → secondary (.50) */
  font-weight: var(--fw-light);
  line-height: 1.6;
}

/* Conector entre steps — linha sólida fina que "preenche" via scaleX */
@media (min-width: 768px) {
  .v-page-step::after {
    content: "";
    position: absolute;
    top: 24px;
    left: calc(50% + 30px);
    width: calc(100% - 60px);
    height: 2px;
    background: rgba(255,255,255,.06);
    pointer-events: none;
  }

  /* Overlay verde que preenche quando o step seguinte ativa */
  .v-page-step::before {
    content: "";
    position: absolute;
    top: 24px;
    left: calc(50% + 30px);
    width: calc(100% - 60px);
    height: 2px;
    background: var(--product-accent);
    pointer-events: none;
    z-index: 1;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s cubic-bezier(.16,1,.3,1);
  }

  .v-page-step.is-line-filled::before {
    transform: scaleX(1);
  }

  /* Pulso de "dados fluindo" — gradiente brilhante que percorre
     a linha preenchida em loop contínuo (4s por ciclo). */
  .v-page-step.is-line-filled::after {
    background:
      linear-gradient(90deg,
        color-mix(in srgb, var(--product-accent) 8%, transparent) 0%,
        color-mix(in srgb, var(--product-accent) 45%, transparent) 40%,
        var(--product-accent) 50%,
        color-mix(in srgb, var(--product-accent) 45%, transparent) 60%,
        color-mix(in srgb, var(--product-accent) 8%, transparent) 100%
      );
    background-size: 200% 100%;
    animation: v-step-flow 3s linear infinite;
  }

  .v-page-step:last-child::after,
  .v-page-step:last-child::before {
    display: none;
  }
}

@keyframes v-step-flow {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* onda 2b: o "Como funciona" é um LOOP CONTEMPLATIVO conduzido pelo JS
   (solutions.js): revela os passos em sequência, pausa, reseta e recomeça
   enquanto a seção está no viewport (pausa quando sai da tela). Sem pulso de
   círculo (removido) — o movimento vem da revelação sequencial + do shimmer
   "v-step-flow" que percorre a linha preenchida. */

@media (prefers-reduced-motion: reduce) {
  .v-page-step {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .v-page-step__num { transition: none; }
  .v-page-step::before { transition: none; }
  /* Estado estático gracioso: tudo aceso na cor do produto, SEM loop nem
     shimmer — o JS adiciona is-active + is-line-filled a todos os steps e
     não agenda nenhum timer. */
  .v-page-step.is-line-filled::after { animation: none; }
}


/* =============================================================
   6. METRICS ROW — Linha de métricas numéricas
   ============================================================= */

.v-page-metrics__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  text-align: center;
}

@media (min-width: 768px) {
  .v-page-metrics__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-10);
  }
}

.v-page-metric {
  text-align: center;
}

.v-page-metric__value {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  color: var(--color-green);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.v-page-metric__label {
  font-size: var(--fs-13);
  color: var(--text-muted);
  font-weight: var(--fw-light);
  margin-top: var(--space-1);
}

/* Mobile: 2 colunas de largura IGUAL — 1fr sozinho é minmax(auto,1fr) e
   deixa a coluna esticar pelo conteúdo — e células alinhadas à ESQUERDA,
   pra os números baterem na mesma vertical nas duas linhas (centrado,
   cada item "flutuava" conforme o nº de caracteres: 25/+100/96/3 ficavam
   tortos entre si). Desktop (≥768px) segue no flex centrado em 1 linha
   — intocado. */
@media (max-width: 767px) {
  .v-page-metrics__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    text-align: left;
  }
  .v-page-metric {
    text-align: left;
  }
}


/* =============================================================
   7. PAGE CTA — Chamada final de conversão
   ============================================================= */

.v-page-cta {
  background: var(--bg-deep);
  /* BUG removido (2026-07-15): havia `border-top: 1px solid
     var(--gradient-divider)` — gradiente não é <color> válido para
     border, o parser descartava a declaração inteira e a borda nunca
     renderizou. Removida em vez de "consertada" para não introduzir
     uma linha nova que nunca existiu visualmente. */
  padding-block: clamp(3rem, 2rem + 2vw, 5rem);
  text-align: center;
}

/* Faixa CTA→rodapé removida globalmente em footer.css (onda 1 fundação):
   sem override por página (antes: 4 páginas de solução). */

.v-page-cta__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--section-px);
}

.v-page-cta__title {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-snug);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.v-page-cta__subtitle {
  font-size: var(--fs-16);
  color: var(--text-secondary);
  font-weight: var(--fw-light);
  margin-bottom: var(--space-7);
  max-width: 540px;
  margin-inline: auto;
}

.v-page-cta__form {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  max-width: 460px;
  margin-inline: auto;
  flex-wrap: wrap;
}

/* Em mobile, empilha verticalmente */
@media (max-width: 374px) {
  .v-page-cta__form {
    flex-direction: column;
  }

  .v-page-cta__form .v-input {
    width: 100%;
  }
}

/* ---------- Variante VERDE (padrão do site) ------------------
   Fonte única (2026-07-29): esta receita estava copiada em 7 lugares
   (4 páginas de solução, Sobre, Case e RC-18), sempre igual. Agora é um
   modificador: `.v-page-cta--green`, aplicado via arg 'variant' => 'green'
   do template-parts/components/page-cta.php (ou direto na section, nas
   páginas com markup próprio — Case e RC-18).
   Contraste: subtítulo em rgba(16,26,59,.72) dá 5.1:1 sobre o verde (AA), e
   o anel de foco é NAVY porque o --focus-ring global é verde-alpha, que
   desaparece sobre este fundo.
   ------------------------------------------------------------- */

.v-page-cta--green {
  background: var(--color-green);
  border-top: 1px solid rgba(16, 26, 59, 0.12);
}

.v-page-cta--green .v-page-cta__title {
  color: var(--color-navy);
}

.v-page-cta--green .v-page-cta__subtitle {
  color: rgba(16, 26, 59, 0.72);
}

.v-page-cta--green .v-page-cta__form .v-input {
  background: #fff;
  color: var(--color-navy);
  border-color: rgba(16, 26, 59, 0.18);
}

.v-page-cta--green .v-page-cta__form .v-input::placeholder {
  color: rgba(16, 26, 59, 0.5);
}

.v-page-cta--green .v-btn--primary {
  background: var(--color-navy);
  color: #fff;
  border-color: var(--color-navy);
}

.v-page-cta--green :is(a, button):focus-visible {
  box-shadow: 0 0 0 3px rgba(16, 26, 59, 0.45);
}


/* =============================================================
   8. CASES PAGE — Filtros e grid de cases dedicados
   ============================================================= */

.v-page-cases__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
  align-items: center;
}

.v-page-cases__search {
  max-width: 240px;
}

.v-page-cases__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .v-page-cases__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1280px) {
  .v-page-cases__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* =============================================================
   9. CONTACT PAGE — Hero interativo + formulário claro centrado
   A sidebar de endereços/redes saiu (já vive no footer). O corpo é
   claro, espelhando o tema atual (Cases / soluções), com o form como
   foco único num card centrado.
   ============================================================= */

/* ---------- Hero interativo (rede de dados que reage ao cursor) ----
   Canvas controlado por assets/js/contact-hero.js. */

.v-contact-hero { min-height: 56vh; }
@media (min-width: 768px) { .v-contact-hero { min-height: 60vh; } }

.v-contact-hero__net {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;            /* acima do bg, abaixo do conteúdo (z:2) */
  pointer-events: none;  /* o mousemove é capturado no .v-page-hero */
}

/* ---------- Corpo claro + card -------------------------------------- */

body.page-template-page-contato .v-contact {
  background: var(--surface-light);
}

.v-contact__inner {
  max-width: 660px;
  margin-inline: auto;
}

.v-contact__card {
  position: relative;
  padding: clamp(1.75rem, 1.2rem + 2.5vw, 3rem);
  background: #fff;
  border: 1px solid rgba(16, 26, 59, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px rgba(16, 26, 59, 0.08);
  overflow: hidden;
}
/* Fio superior em gradiente da marca — único detalhe cromático do card. */
.v-contact__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-brand);
}

/* ---------- Formulário (tema claro) --------------------------------- */

.v-page-contact__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

body.page-template-page-contato .v-input {
  background: #fff;
  border: 1px solid rgba(16, 26, 59, 0.16);
  color: var(--text-on-light);
}
body.page-template-page-contato .v-input::placeholder {
  color: var(--text-on-light-muted);
}
body.page-template-page-contato .v-input:focus {
  border-color: var(--alpha-grn-40);
  box-shadow: 0 0 0 3px var(--alpha-grn-10);
}
body.page-template-page-contato .v-input--textarea,
.v-page-contact__form textarea {
  min-height: 150px;
  resize: vertical;
}

/* Checkbox sobre o card claro (background-color só, pra preservar o
   check SVG do estado :checked definido em cases.css). */
body.page-template-page-contato .v-checkbox__input {
  background-color: #fff;
  border-color: rgba(16, 26, 59, 0.28);
}
body.page-template-page-contato .v-checkbox__input:checked {
  background-color: var(--color-green);
  border-color: var(--color-green);
}
body.page-template-page-contato .v-checkbox__label {
  color: var(--text-on-light-muted);
}
/* Link da Política sobre o card BRANCO: o verde de marca puro é 1.8:1 —
   green-ink mantém a família cromática e passa AA (5.2:1). */
body.page-template-page-contato .v-checkbox__label a {
  color: var(--color-green-ink);
}

.v-page-contact__form .v-btn--block {
  margin-top: var(--space-2);
}

/* Faixa CTA→rodapé removida globalmente em footer.css (onda 1 fundação):
   sem override por página (antes: /contato). */


/* =============================================================
   10. BLOG GRID — Cards de artigos
   ============================================================= */

/* Grid com o dobro de colunas (card ocupa 2): permite ao blog-grid.js
   centralizar a linha incompleta deslocando o grid-column-start — regra
   do MKT (2026-07-29): a linha curta fica ANTES e a última fecha cheia
   (ex.: 8 posts → 3+2+3; 7 posts → 3+1+3). */
.v-page-blog__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .v-page-blog__grid {
    grid-template-columns: repeat(4, 1fr);   /* 2 por linha */
  }

  .v-page-blog__grid > .v-blog-card {
    grid-column: span 2;
  }
}

@media (min-width: 1280px) {
  .v-page-blog__grid {
    grid-template-columns: repeat(6, 1fr);   /* 3 por linha */
  }
}

/* ---------- Blog card -------------------------------------- */

.v-blog-card {
  position: relative;
  /* Coluna flex: o corpo estica e o "Ler mais" fica cravado no rodapé,
     independente do tamanho do resumo (mesmo padrão do .v-cases-card). */
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    border-color var(--dur-base) var(--ease-out-quart),
    transform var(--dur-base) var(--ease-out-quart),
    box-shadow var(--dur-base) var(--ease-out-quart);
}

.v-blog-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-brand);
  opacity: 0.35;
  z-index: 2;
  transition: opacity var(--dur-base) var(--ease-out-quart);
}

.v-blog-card:hover {
  border-color: var(--alpha-grn-30);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px var(--alpha-grn-10);
}

.v-blog-card:hover::before {
  opacity: 1;
}

/* Filtragem: fade out/in suave */
.v-blog-card.is-hidden {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
  position: absolute;
  visibility: hidden;
}

/* Thumbnail — aspect-ratio 16/9 mantem proporcao consistente em qualquer grid */
.v-blog-card__thumb {
  aspect-ratio: 16 / 9;
  min-height: 160px;
  background:
    linear-gradient(135deg, var(--color-navy-deep) 0%, var(--color-navy-card-alt) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.v-blog-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Poster retrato (ex.: GPTW 1080×1350): enquadra no topo para mostrar o
   selo GPTW + logo Vert + a chamada, em vez de cortar só o miolo. */
.v-blog-card__img--poster {
  object-position: center 26%;
}

/* Categoria no corpo do card — texto puro royal, mesma receita da tag do
   /cases (.v-cases-card__tag). Saiu de cima do thumb a pedido do MKT
   (2026-07-29): a imagem fica limpa e a categoria acompanha o texto. */
.v-blog-card__cat {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6875rem;            /* 11px — mesmo do /cases e da home */
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-royal);
  margin-bottom: var(--space-2);
}

/* Corpo do card */
.v-blog-card__body {
  padding: var(--space-5);
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* "Ler mais" alinhado no rodapé de todos os cards da linha. */
.v-blog-card__body .v-btn--link {
  margin-top: auto;
  align-self: flex-start;
}

.v-blog-card__date {
  font-size: var(--fs-12);
  /* --text-muted, não --text-faint: a data é texto informativo e precisa
     de AA (mesmo ajuste dos placeholders — wht-22 dava 1,99:1 no card). */
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.v-blog-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-15);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
  line-height: 1.35;
}

.v-blog-card__excerpt {
  font-size: var(--fs-13);
  color: var(--text-muted);
  font-weight: var(--fw-light);
  line-height: 1.6;
  margin-bottom: var(--space-4);

  /* 2-line clamp */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.v-blog-card__link {
  /* Reutiliza .v-btn--link.has-arrow do tema */
}


/* =============================================================
   11. AWARDS + CLIENTS — grid de prêmios e strip de clientes
   (.v-page-partner-card removido em 2026-07-09 junto com as páginas
   /parceiros e /reconhecimentos; o grid de awards segue em uso na
   /solucoes/analytics — seção "Prêmios que comprovam a entrega".)
   ============================================================= */

/* ---------- Awards grid ------------------------------------ */

.v-page-awards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .v-page-awards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .v-page-awards {
    grid-template-columns: repeat(4, 1fr);
  }
}

.v-page-award {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  overflow: hidden;
  transition:
    border-color var(--dur-base) var(--ease-out-quart),
    transform    var(--dur-base) var(--ease-out-quart),
    box-shadow   var(--dur-base) var(--ease-out-quart);
}

.v-page-award::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-brand);
  opacity: 0.35;
  transition: opacity var(--dur-base) var(--ease-out-quart);
}

.v-page-award:hover {
  border-color: var(--alpha-grn-30);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px var(--alpha-grn-10);
}

.v-page-award:hover::before {
  opacity: 1;
}

.v-page-award__year {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  color: var(--color-green);
  margin-bottom: var(--space-2);
}

.v-page-award__title {
  font-size: var(--fs-14);
  color: var(--text-primary);
}


/* ---------- Clients strip (Main page) ----------------------- */

.v-page-clients {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .v-page-clients {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1280px) {
  .v-page-clients {
    grid-template-columns: repeat(5, 1fr);
  }
}

.v-page-client {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  overflow: hidden;
  transition:
    border-color var(--dur-base) var(--ease-out-quart),
    transform    var(--dur-base) var(--ease-out-quart),
    box-shadow   var(--dur-base) var(--ease-out-quart);
}

.v-page-client::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-brand);
  opacity: 0.35;
  transition: opacity var(--dur-base) var(--ease-out-quart);
}

.v-page-client:hover {
  border-color: var(--alpha-grn-30);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px var(--alpha-grn-10);
}

.v-page-client:hover::before {
  opacity: 1;
}

.v-page-client__name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-15);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
  letter-spacing: var(--ls-crisp);
}

.v-page-client__desc {
  font-size: var(--fs-13);
  color: var(--text-secondary);
  font-weight: var(--fw-light);
  line-height: 1.5;
}


/* =============================================================
   12. ABOUT PAGE — Escritórios
   ============================================================= */

.v-page-offices {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .v-page-offices {
    grid-template-columns: repeat(2, 1fr);
  }
}

.v-page-office {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  overflow: hidden;
  transition:
    border-color var(--dur-base) var(--ease-out-quart),
    transform    var(--dur-base) var(--ease-out-quart),
    box-shadow   var(--dur-base) var(--ease-out-quart);
}

.v-page-office::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-brand);
  opacity: 0.35;
  transition: opacity var(--dur-base) var(--ease-out-quart);
}

.v-page-office:hover {
  border-color: var(--alpha-grn-30);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px var(--alpha-grn-10);
}

.v-page-office:hover::before {
  opacity: 1;
}

.v-page-office__city {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--color-green);
  margin-bottom: var(--space-3);
}

.v-page-office__address {
  font-style: normal;
  font-size: var(--fs-14);
  color: var(--text-secondary);
  font-weight: var(--fw-light);
  line-height: 1.6;
}


/* =============================================================
   13. FILTER CHIPS — Filtros reutilizáveis (cases + blog)
   ============================================================= */

.v-filter-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-4);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-pill);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  transition:
    border-color var(--dur-base) var(--ease-out-quart),
    color var(--dur-base) var(--ease-out-quart),
    background-color var(--dur-base) var(--ease-out-quart);
}

.v-filter-chip:hover {
  border-color: rgba(0,222,151,.3);
  color: var(--text-primary);
}

.v-filter-chip.is-active {
  border-color: rgba(0,222,151,.4);
  color: var(--color-green);
  background: rgba(0,222,151,.07);
}


/* =============================================================
   RESPONSIVE — Ajustes finos por breakpoint
   ============================================================= */

/* ---------- 480px (small mobile) --------------------------- */

@media (max-width: 374px) {
  .v-page-hero__content {
    padding-block: 2rem;
  }

  .v-page-hero__title {
    font-size: 1.75rem;
  }

  .v-page-metrics__grid {
    gap: var(--space-4);
  }

  .v-page-steps__grid {
    gap: var(--space-8);
  }
}

/* ---------- 640px ------------------------------------------ */

/* Intervalo 640-767 removido na consolidação de breakpoints (375/768/1280/1440).
   O subtitle já é fluido via clamp/ch acima — não precisa de max-width fixo nesse range. */

/* ---------- 1024px+ (large) -------------------------------- */

@media (min-width: 1280px) {
  .v-page-feature {
    padding: var(--space-8);
  }

}


/* =============================================================
   REDUCED MOTION — Desabilita animações e transições
   ============================================================= */

@media (prefers-reduced-motion: reduce) {
  .v-page-feature,
  .v-blog-card,
  .v-page-award {
    transition: none;
  }

  .v-page-feature:hover,
  .v-blog-card:hover {
    transform: none;
  }
}


/* =============================================================
   14. CANAIS OFICIAIS (/conformidade) — hub de 3 canais
   Reforma 2026-08-04: a página deixou de ser só o form de denúncia
   e virou hub — 01 Integridade · 02 Privacidade · 03 Conformidade —
   com cards numerados que expandem painéis (canal-hub.js). Os
   blocos .v-canal__* (intro/form) seguem em uso DENTRO do painel 03;
   .v-integridade* e .v-dpo* vieram da /sobre antiga (reforma
   2026-08-04 moveu o conteúdo para cá).
   ============================================================= */

/* Hero interativo (canvas de varredura — scan-hero.js, variante escudo),
   no mesmo padrão do hero da Privacidade: canvas absoluto entre o
   bg (z:0) e o conteúdo (z:2), mousemove capturado no .v-page-hero. */
/* Mesma altura das outras duas institucionais (2026-07-29). */
.v-canal-hero { min-height: 52vh; }
@media (min-width: 768px) { .v-canal-hero { min-height: 56vh; } }

.v-canal-hero__flux {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.v-canal {
  max-width: var(--content-narrow);
  margin-inline: auto;
}

.v-canal__intro {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
}
.v-canal__intro p {
  font-size: var(--fs-15);
  color: var(--text-secondary);
  font-weight: var(--fw-light);
  line-height: 1.7;
  margin-bottom: var(--space-3);
}
.v-canal__intro ul {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.v-canal__intro li {
  font-size: var(--fs-14);
  color: var(--text-secondary);
  font-weight: var(--fw-light);
  line-height: 1.6;
  list-style: none;
  position: relative;
  padding-left: var(--space-4);
}
.v-canal__intro li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  background: var(--color-green);
  transform: rotate(45deg);
}

/* ---------- Form ---------- */
.v-canal__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.v-canal__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.v-canal__field > label {
  font-family: var(--font-display);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  color: var(--text-primary);
}

/* Select com seta custom (reseta a aparência nativa) */
.v-canal__select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2300DE97' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-8);
  cursor: pointer;
}
.v-canal__select option {
  /* alguns browsers herdam a cor do controle; força legível no dropdown */
  color: var(--color-navy);
  background: #fff;
}

.v-canal__textarea {
  resize: vertical;
  min-height: 160px;
  line-height: 1.6;
}

/* Turnstile (anti-bot): o iframe do widget tem 300px fixos — só respiro. */
.v-canal__turnstile {
  margin-top: var(--space-2);
}

/* Status (sucesso/erro) */
.v-canal__status {
  min-height: 1.2em;
  font-size: var(--fs-14);
  color: var(--text-secondary);
}
.v-canal__status.is-success {
  color: var(--color-green);
  font-weight: var(--fw-semibold);
}
.v-canal__status.is-error {
  color: #ff6b6b;
  font-weight: var(--fw-semibold);
}

.v-canal__note {
  font-size: var(--fs-13);
  color: var(--text-muted);
  line-height: 1.6;
}
.v-canal__note a {
  color: var(--color-green);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Corpo CLARO — página Canal de Conformidade --------------
   Hero dark limpo + body claro, espelhando /diagnostico, Contato e as
   páginas de solução. Tudo escopado pela body-class do template; as
   regras base de .v-canal* (tema escuro) ficam intactas. */

body.page-template-page-canal-conformidade .v-page-section {
  background: var(--surface-light);
}

body.page-template-page-canal-conformidade .v-canal__intro {
  border-bottom-color: rgba(16, 26, 59, 0.12);
}
body.page-template-page-canal-conformidade .v-canal__intro p,
body.page-template-page-canal-conformidade .v-canal__intro li {
  color: var(--text-on-light-muted);
}

body.page-template-page-canal-conformidade .v-canal__field > label {
  color: var(--text-on-light);
}

/* Form num card branco centrado (receita do .v-contact__card); a intro
   fica fora, como texto editorial sobre o cinza. */
body.page-template-page-canal-conformidade .v-canal__form {
  position: relative;
  padding: clamp(1.75rem, 1.2rem + 2.5vw, 3rem);
  background: #fff;
  border: 1px solid rgba(16, 26, 59, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px rgba(16, 26, 59, 0.08);
  overflow: hidden;
}
/* Fio superior em gradiente da marca — único detalhe cromático do card. */
body.page-template-page-canal-conformidade .v-canal__form::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-brand);
}

/* Inputs em tema claro (receita do Contato) */
body.page-template-page-canal-conformidade .v-input {
  background: #fff;
  border: 1px solid rgba(16, 26, 59, 0.16);
  color: var(--text-on-light);
}
body.page-template-page-canal-conformidade .v-input::placeholder {
  color: var(--text-on-light-muted);
}
body.page-template-page-canal-conformidade .v-input:focus {
  border-color: var(--alpha-grn-40);
  box-shadow: 0 0 0 3px var(--alpha-grn-10);
}

body.page-template-page-canal-conformidade .v-canal__status {
  color: var(--text-on-light-muted);
}
/* Verde puro sobre claro é 1.8:1 — green-ink mantém a família cromática
   e passa AA (mesmo racional do link do Contato). */
body.page-template-page-canal-conformidade .v-canal__status.is-success {
  color: var(--color-green-ink);
}
body.page-template-page-canal-conformidade .v-canal__status.is-error {
  color: #c0392b;
}

body.page-template-page-canal-conformidade .v-canal__note {
  color: var(--text-on-light-muted);
}
body.page-template-page-canal-conformidade .v-canal__note a {
  color: var(--color-green-ink);
}

/* ---------- HUB — intro + 3 cards numerados (01/02/03) em ABAS -------
   Rodada 2 (esboço MKT 2026-08-04): fileira de 3 cards lado a lado no
   desktop (empilhados no mobile) e os PAINÉIS como irmãos da fileira,
   abrindo em largura total abaixo dela — um por vez (canal-hub.js).
   Cards brancos na linguagem do accordion da Privacidade, numeração em
   --font-mono (1º uso do token) e acento cromático por canal ecoando os
   3 cards da /sobre (--canal-accent). Técnica de altura do painel =
   grid-template-rows 0fr↔1fr (mesma do .v-accordion__panel — classes
   próprias para NÃO herdar o visual da /privacidade no bundle único).
   O componente só existe nesta página (corpo claro), então estiliza
   direto na base — sem par dark/override. */

.v-canal-hub {
  /* Largo o bastante para os 3 cards-gatilho respirarem na fileira
     (rodada 2; antes 62rem). O CONTEÚDO dos painéis é mais estreito:
     01/03 em --content-narrow, os blocos do 02 em 62rem. */
  max-width: 75rem;
  margin-inline: auto;
}

.v-canal-hub__intro {
  max-width: var(--content-narrow);
  margin: 0 auto var(--space-7);
  text-align: center;
}
.v-canal-hub__intro p {
  font-size: var(--fs-16);
  color: var(--text-on-light-muted);
  font-weight: var(--fw-light);
  line-height: 1.75;
  margin-bottom: var(--space-3);
}
.v-canal-hub__intro p:last-child { margin-bottom: 0; }

/* Fileira: 1 coluna no mobile, 3 lado a lado no desktop. */
.v-canal-hub__tabs {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 900px) {
  .v-canal-hub__tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }
}

.v-canal-hub__item {
  --canal-accent: var(--color-green-ink);
  background: #fff;
  border: 1px solid rgba(16, 26, 59, 0.12);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    border-color var(--dur-base) var(--ease-out-quart),
    box-shadow   var(--dur-base) var(--ease-out-quart);
}
.v-canal-hub__item--green { --canal-accent: var(--color-green-ink); }
.v-canal-hub__item--navy  { --canal-accent: var(--color-navy); }
.v-canal-hub__item--royal { --canal-accent: var(--color-royal); }
.v-canal-hub__item:hover {
  border-color: rgba(31, 80, 224, 0.28);
}
/* Card do painel aberto: acento do canal (classe togglada pelo JS). */
.v-canal-hub__item.is-active {
  border-color: var(--canal-accent);
  box-shadow: inset 0 3px 0 var(--canal-accent);
}
/* O card é só o cabeçalho; o heading precisa ocupar a altura toda para o
   trigger esticar na fileira (align-items: stretch). */
.v-canal-hub__item { display: flex; flex-direction: column; }
.v-canal-hub__heading { flex: 1 1 auto; display: flex; }

/* O cabeçalho do card é o próprio <button> — zera o h2 wrapper. */
h2.v-canal-hub__heading {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: inherit;
}

.v-canal-hub__trigger {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: clamp(1rem, 0.75rem + 1.2vw, 2rem);
  width: 100%;
  margin: 0;
  padding: var(--space-5) clamp(1.25rem, 1rem + 1.2vw, 2rem);
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out-quart);
}
.v-canal-hub__trigger:hover {
  background: rgba(31, 80, 224, 0.04);
}
.v-canal-hub__trigger:focus-visible {
  outline: 2px solid var(--color-royal);
  outline-offset: -2px;
}

/* Desktop (fileira): o card estreitou para ~1/3 — o layout horizontal
   (num | texto | ícone) não cabe. Vira grade 2×2: número e ícone na
   linha de cima (topo, sempre na MESMA altura nos 3 cards), texto na
   de baixo com o badge do canal ancorado no pé. Assim uma frase de 3
   linhas não desloca mais nada.
   Feito com grid de propósito: a versão anterior ancorava o ícone com
   position:absolute daqui, mas a regra base de .v-canal-hub__icon
   (position:relative, mais abaixo no arquivo) vencia por ordem —
   media query não soma especificidade — e os top/right órfãos
   empurravam o ícone na diagonal. */
@media (min-width: 900px) {
  .v-canal-hub__trigger {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr;
    align-items: start;
    row-gap: var(--space-4);
    height: 100%;
  }
  .v-canal-hub__num  { grid-area: 1 / 1; }
  .v-canal-hub__icon { grid-area: 1 / 2; justify-self: end; }
  .v-canal-hub__text {
    grid-area: 2 / 1 / 3 / -1;
    height: 100%;
  }
  .v-canal-hub__channel { margin-top: auto; }
}

/* Numeração 01/02/03 na fonte da marca (o briefing pedia "mono", mas
   o Courier do --font-mono destoava do site — decisão do Gabriel
   2026-08-04). tabular-nums garante largura idêntica nos 3 números.
   Cor do canal via --canal-accent (definida no item e modificadores). */
.v-canal-hub__num {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1;
  color: var(--canal-accent);
}

.v-canal-hub__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.v-canal-hub__phrase {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  /* Teto contido para as 3 frases caberem em 2 linhas na coluna de ~1/3. */
  font-size: clamp(1.05rem, 0.9rem + 0.35vw, 1.2rem);
  letter-spacing: var(--ls-snug);
  color: var(--text-on-light);
  line-height: 1.35;
  text-wrap: balance;
}
.v-canal-hub__channel {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--canal-accent);
}

/* Sinal "+/−" (receita do .v-accordion__icon da /privacidade, com
   currentColor no lugar do royal fixo): barra horizontal fixa, a
   vertical some quando aberto. */
.v-canal-hub__icon {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--canal-accent);
}
.v-canal-hub__icon::before,
.v-canal-hub__icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  border-radius: 1px;
  transition:
    opacity   var(--dur-base) var(--ease-out-quart),
    transform var(--dur-base) var(--ease-out-quart);
}
.v-canal-hub__icon::before {
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  margin-top: -1px;
}
.v-canal-hub__icon::after {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
}
.v-canal-hub__trigger[aria-expanded="true"] .v-canal-hub__icon::after {
  opacity: 0;
  transform: scaleY(0);
}

/* ---------- Painel expansível ----------------------------------------
   Painéis são IRMÃOS da fileira (rodada 2) e abrem em largura total
   abaixo dela. Animação de altura 100% CSS (grid-template-rows
   0fr↔1fr); o JS só gerencia classes/[hidden]. O miolo é um "poço" em
   --surface-light com moldura própria (o cartão não vem mais do item). */
.v-canal-hub__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out-quart);
}
/* Respiro entre a fileira e o painel aberto. [hidden] é display:none,
   então a margem só existe junto com o painel — sem salto de layout. */
.v-canal-hub__panel:not([hidden]) {
  margin-top: var(--space-4);
}
.v-canal-hub__panel.is-open {
  grid-template-rows: 1fr;
}
.v-canal-hub__panel[hidden] {
  display: none;
}
.v-canal-hub__panel-inner {
  min-height: 0;
  overflow: hidden;
  background: var(--surface-light);
  border: 1px solid rgba(16, 26, 59, 0.12);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem) clamp(1.25rem, 1rem + 1.2vw, 2rem);
}
.v-canal-hub__panel-inner > :last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .v-canal-hub__panel { transition: none; }
  .v-canal-hub__icon::before,
  .v-canal-hub__icon::after { transition: none; }
}

/* Título dos painéis 02/03 (o 01 já tem o título dentro do card verde). */
.v-canal-hub__panel-title {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-snug);
  color: var(--text-on-light);
  text-align: center;
  text-wrap: balance;
  margin: 0 0 var(--space-6);
}

/* Painel 03: intro + form do canal de denúncia voltam à medida de
   leitura (o hub é mais largo por causa do painel 02). */
.v-canal-hub__panel-inner .v-canal__intro,
.v-canal-hub__panel-inner .v-canal__form {
  max-width: var(--content-narrow);
  margin-inline: auto;
}
.v-canal-hub__panel-inner .v-canal__intro {
  margin-bottom: var(--space-6);
}

/* ---------- Documentos do painel 02 (políticas) -----------------------
   Rodada 3: os documentos NÃO são embutidos aqui (pedido do Gabriel —
   a leitura integral fica nas páginas /privacidade e
   /seguranca-da-informacao). Cada política é um card branco na receita
   do .v-dpo, com meta + título + resumo + botão VERDE. Os dois cards
   têm tamanho idêntico: o grid estica (sem align-items:start) e o CTA
   é ancorado no pé com margin-top:auto. */
.v-canal-docs {
  display: grid;
  gap: var(--space-5);
  /* MESMA medida do .v-dpo-grid e da régua .v-dpo-pillars (rodada 4): sem
     isso os 2 cards eram o único bloco do painel a ocupar os ~75rem
     inteiros e estouravam a margem dos vizinhos. */
  max-width: 62rem;
  margin: var(--space-6) auto 0;
}
@media (min-width: 900px) {
  .v-canal-docs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.v-canal-docs__col {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
  background: #fff;
  border: 1px solid rgba(16, 26, 59, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(16, 26, 59, 0.06);
  overflow: hidden;
}
/* Fio superior em gradiente da marca (mesmo detalhe do .v-dpo). */
.v-canal-docs__col::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-brand);
  opacity: 0.6;
}
.v-canal-docs__meta {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-green-ink);
  margin-bottom: var(--space-2);
}
.v-canal-docs__title {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-snug);
  color: var(--text-on-light);
  line-height: 1.3;
  text-wrap: balance;
  margin: 0 0 var(--space-3);
}
/* Só na fileira de 2 colunas: reserva 2 linhas para o título curto
   (Privacidade) e o longo (Segurança da Informação) começarem o resumo
   na MESMA altura. Empilhado (mobile) isso só abriria um vazio. */
@media (min-width: 900px) {
  .v-canal-docs__title { min-height: calc(2 * 1.3em); }
}
.v-canal-docs__text {
  font-size: var(--fs-15);
  font-weight: var(--fw-light);
  line-height: 1.7;
  color: var(--text-on-light-muted);
  margin: 0 0 var(--space-6);
}
.v-canal-docs__cta {
  margin-top: auto; /* alinha os botões dos 2 cards no pé */
}
.v-canal-docs__cta .v-btn {
  white-space: normal; /* texto longo não vaza a 375px */
  line-height: 1.5;
  text-align: center;
}
/* O primary "Acessar página completa" ocupa a largura do card: é a ação
   principal e os 2 cards precisam do mesmo peso visual. */
.v-canal-docs__cta > .v-btn--primary {
  display: flex;
  width: 100%;
}

/* ---------- Par secundário: o PDF oficial ----------------------------
   Identificação do documento (POL-00X · vX · data) + Visualizar/Baixar.
   Hierarquia deliberada: a PÁGINA é a leitura confortável (accordion,
   busca do browser, âncora por seção) e fica em primary; o PDF é a versão
   oficial e vem como par --sm logo abaixo. */
.v-canal-docs__docmeta {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-on-light-muted);
}
.v-canal-docs__pdf {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
/* O .v-btn--ghost base é verde #00DE97 sobre transparente — pensado para o
   fundo navy. Sobre o card BRANCO daria ~1.7:1. Aqui vai o verde escurecido
   (--color-green-ink, 5.2:1 sobre branco), mesmo tratamento do
   .v-canal-docs__meta acima. */
.v-canal-docs__pdf .v-btn--ghost {
  flex: 1 1 auto;
  color: var(--color-green-ink);
  border-color: rgba(0, 125, 87, 0.35);
}
.v-canal-docs__pdf .v-btn--ghost:hover,
.v-canal-docs__pdf .v-btn--ghost:focus-visible {
  border-color: var(--color-green-ink);
  background: rgba(0, 125, 87, 0.07);
}

/* =============================================================
   14a. CARD DO ENCARREGADO / DPO (LGPD) — painel 02 do hub
   Restaurado da /sobre (reforma 2026-08-04 moveu o conteúdo para cá;
   original em git show 2a3858a). Card branco centrado + grid de 2
   cards + régua de 4 pilares. Já foi desenhado p/ corpo claro.
   ============================================================= */
.v-dpo {
  position: relative;
  max-width: var(--content-narrow);
  margin-inline: auto;
  padding: clamp(1.75rem, 1.2rem + 2.5vw, 2.75rem);
  background: #fff;
  border: 1px solid rgba(16, 26, 59, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(16, 26, 59, 0.06);
  text-align: center;
  overflow: hidden;
}
/* Linha-topo em gradiente da marca (mesmo detalhe dos cards office/feature). */
.v-dpo::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-brand);
  opacity: 0.6;
}
.v-dpo__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: var(--alpha-grn-10);
  border: 1px solid var(--alpha-grn-30);
  color: var(--color-green-ink);
}
.v-dpo__icon svg { display: block; }

.v-dpo__title {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-snug);
  color: var(--text-on-light);
  margin-bottom: var(--space-3);
  text-wrap: balance;
}
.v-dpo__text {
  font-size: var(--fs-16);
  color: var(--text-on-light-muted);
  font-weight: var(--fw-light);
  line-height: 1.7;
  max-width: 56ch;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

/* Contato: rótulo pequeno + dado, empilhado no mobile, 2 colunas no desktop. */
.v-dpo__contact {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  text-align: left;
  max-width: 34rem;
  margin-inline: auto;
}
@media (min-width: 560px) {
  .v-dpo__contact {
    grid-template-columns: 1fr 1fr;
  }
}
.v-dpo__row {
  padding: var(--space-3) var(--space-4);
  background: var(--surface-light);
  border-radius: var(--radius-md);
}
.v-dpo__label {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-on-light-muted);
  margin-bottom: 2px;
}
.v-dpo__data {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-15);
  color: var(--text-on-light);
}
.v-dpo__mail {
  color: var(--color-royal);
  text-decoration: none;
  word-break: break-word;
}
.v-dpo__mail:hover { text-decoration: underline; }

/* ---------- Grid Encarregado + Requisição de Direitos ---------------
   Empilha no mobile, 2 colunas no desktop; cards viram coluna flex
   pra ancorar o CTA/contato no pé. */
.v-dpo-grid {
  display: grid;
  gap: var(--space-5);
  max-width: 62rem;
  margin-inline: auto;
  align-items: stretch;
}
@media (min-width: 900px) {
  .v-dpo-grid {
    grid-template-columns: 1fr 1fr;
  }
}
/* Dentro do grid os cards ocupam a célula (o max-width/centro do .v-dpo
   solo deixa de valer) e viram coluna flex pra ancorar o CTA no pé. */
.v-dpo-grid .v-dpo {
  max-width: none;
  margin-inline: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.v-dpo-grid .v-dpo__contact {
  width: 100%;
  margin-top: auto;            /* alinha o pé dos 2 cards no desktop */
  /* na célula do grid (card mais estreito que o .v-dpo solo) as 2
     colunas espremem o e-mail até quebrar no meio — empilha as linhas */
  grid-template-columns: 1fr;
}

/* Lista dos 5 direitos do titular (check verde + texto, à esquerda) */
.v-dpo__rights {
  list-style: none;
  display: grid;
  gap: var(--space-2);
  width: 100%;
  max-width: 30rem;
  margin: 0 auto var(--space-6);
  padding: 0;
  text-align: left;
}
.v-dpo__rights li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--fs-15);
  font-weight: var(--fw-light);
  color: var(--text-on-light-muted);
  line-height: 1.55;
}
.v-dpo__rights svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--color-green-ink);
}

/* CTA do formulário: botão DESABILITADO (fase futura) + badge "Em breve".
   O .v-btn já rebaixa disabled (opacity .5 + not-allowed); o badge diz
   o porquê. */
.v-dpo__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;            /* ancora no pé do card (flex column) */
}
.v-dpo__cta .v-btn {
  max-width: 100%;
  white-space: normal;         /* texto longo não vaza a 375px */
  line-height: 1.5;
  text-align: center;
}
.v-dpo__soon {
  display: inline-block;
  padding: 2px 10px;
  font-family: var(--font-display);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-royal);
  background: rgba(31, 80, 224, 0.08);
  border: 1px solid rgba(31, 80, 224, 0.25);
  border-radius: var(--radius-pill);
}

/* Régua dos 4 pilares: um card branco só, com divisórias internas —
   1 coluna no phone, 2×2 no tablet, 4 no desktop. */
.v-dpo-pillars {
  list-style: none;
  display: grid;
  gap: var(--space-5) var(--space-6);
  max-width: 62rem;
  margin: var(--space-5) auto 0;
  padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
  background: #fff;
  border: 1px solid rgba(16, 26, 59, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(16, 26, 59, 0.06);
}
@media (min-width: 560px) {
  .v-dpo-pillars { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .v-dpo-pillars { grid-template-columns: repeat(4, 1fr); }
  /* divisória vertical sutil entre os pilares (detalhe do mockup) */
  .v-dpo-pillar + .v-dpo-pillar {
    border-left: 1px solid rgba(16, 26, 59, 0.08);
    padding-left: var(--space-6);
  }
}
.v-dpo-pillar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-3);
  border-radius: 50%;
  background: var(--alpha-grn-10);
  border: 1px solid var(--alpha-grn-30);
  color: var(--color-green-ink);
}
.v-dpo-pillar__icon svg { display: block; }
.v-dpo-pillar__title {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-16);
  letter-spacing: var(--ls-snug);
  color: var(--text-on-light);
  margin-bottom: var(--space-1);
}
.v-dpo-pillar__text {
  margin: 0;
  font-size: var(--fs-14);
  font-weight: var(--fw-light);
  color: var(--text-on-light-muted);
  line-height: 1.6;
}

/* =============================================================
   14b. CANAL DE INTEGRIDADE — painel 01 do hub
   Restaurado da /sobre (reforma 2026-08-04 moveu o conteúdo para cá;
   original em git show 2a3858a). Card verde sólido + botões navy.
   "Visualizar" abre o PDF: modal com iframe no desktop, nova aba no
   mobile (pdf-lightbox.js). "Baixar" força download.
   ============================================================= */
.v-integridade {
  position: relative;
  max-width: var(--content-narrow);
  margin-inline: auto;
  padding: clamp(1.75rem, 1.2rem + 2.5vw, 3rem);
  background: var(--color-green-hover);
  border: 1px solid rgba(16, 26, 59, 0.12);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 34px rgba(16, 26, 59, 0.10);
  overflow: hidden;
  text-align: center;
}

/* Ícone: escudo navy em círculo navy translúcido — contraste forte
   sobre o verde (verde sobre verde sumiria). */
.v-integridade__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: rgba(16, 26, 59, 0.10);
  border: 1px solid rgba(16, 26, 59, 0.22);
  color: var(--color-navy);
}
.v-integridade__icon svg { display: block; }

/* Título/texto navy sobre verde — mesma lógica de contraste do CTA
   (título --color-navy; texto no rgba .72 do subtitle do CTA). */
.v-integridade__title {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-snug);
  color: var(--color-navy);
  margin-bottom: var(--space-3);
}

.v-integridade__text {
  font-size: var(--fs-16);
  color: rgba(16, 26, 59, 0.72);
  font-weight: var(--fw-light);
  line-height: 1.7;
  max-width: 54ch;
  margin-inline: auto;
  margin-bottom: var(--space-7);
}

/* Botões em NAVY (verde sobre verde não contrasta). Sólido = mesma
   receita do botão do CTA verde; ghost = contorno navy. Empatam em
   especificidade com buttons.css mas vencem por ordem (este arquivo
   vem depois na cascata do combiner). Só cor/estilo — o comportamento
   (modal/nova aba/download) fica intacto no pdf-lightbox.js. */
.v-integridade .v-btn--primary {
  background: var(--color-navy);
  color: #fff;
  box-shadow: none;
}
.v-integridade .v-btn--primary:hover {
  background: var(--color-navy-mid);
  box-shadow: 0 10px 24px rgba(16, 26, 59, 0.28);
}
.v-integridade .v-btn--ghost {
  color: var(--color-navy);
  border-color: rgba(16, 26, 59, 0.45);
}
.v-integridade .v-btn--ghost:hover {
  border-color: var(--color-navy);
  background: rgba(16, 26, 59, 0.08);
}

/* Foco visível: o --focus-ring global é verde-alpha — sobre o card verde
   sumiria (e nos sólidos o box-shadow base já vence o ring por cascata).
   Anel duplo: gap na cor do card + anel navy, visível pros dois botões. */
.v-integridade .v-btn:focus-visible {
  box-shadow:
    0 0 0 2px var(--color-green-hover),
    0 0 0 4.5px var(--color-navy);
}

/* ---------- Ações -----------------------------------------------------
   Mobile-first (padrão do arquivo): base = empilhado + full-width (toque
   fácil). Desktop (≥768px): lado a lado, largura automática, centrado. */
.v-integridade__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.v-integridade__actions .v-btn {
  width: 100%;
  /* O .v-btn base é white-space:nowrap — com o texto longo ("Visualizar
     Código de Ética e Conduta") o botão vazava do card a 375px. Aqui o
     texto quebra e fica contido; line-height sobe do 1 do .v-btn pra
     não colar as linhas quando quebra. Em desktop nada muda (cabe em
     1 linha). */
  white-space: normal;
  line-height: 1.5;
  text-align: center;
}

@media (min-width: 768px) {
  .v-integridade__actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .v-integridade__actions .v-btn {
    width: auto;
  }
}

/* =============================================================
   14c. LIGHTBOX DE PDF (desktop) — genérico
   Ex-.v-integridade-overlay da /sobre (git show 2a3858a), renomeado:
   agora serve QUALQUER documento da página (Código de Ética +
   políticas do painel 02) via [data-pdf-view] (pdf-lightbox.js).
   Mesma linguagem do gate modal (.v-gate-overlay em cases.css):
   backdrop navy translúcido + blur, painel card (tokens dark — é
   overlay, independe do corpo claro), fecha com transição.
   ============================================================= */
.v-pdf-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--section-px);
  background: rgba(8,15,34,.8);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity    var(--dur-base) var(--ease-out-quart),
    visibility 0s linear var(--dur-base);
}
.v-pdf-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.v-pdf-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 920px;
  height: min(88vh, 1100px);
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  transform: translateY(12px) scale(0.98);
  transition: transform var(--dur-slow) var(--ease-out-expo);
}
.v-pdf-overlay.is-open .v-pdf-modal {
  transform: translateY(0) scale(1);
}

.v-pdf-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-shrink: 0;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}
.v-pdf-modal__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-16);
  color: var(--text-primary);
  margin: 0;
}
.v-pdf-modal__close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out-quart),
    color      var(--dur-fast) var(--ease-out-quart);
}
.v-pdf-modal__close:hover {
  background: var(--alpha-wht-06);
  color: var(--text-primary);
}
.v-pdf-modal__close:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Corpo: o iframe do PDF ocupa todo o espaço restante. Fundo branco
   atrás dele para o "flash" de carregamento não piscar navy. */
.v-pdf-modal__body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: #fff;
}
.v-pdf-modal__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.v-pdf-modal__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  flex-shrink: 0;
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-subtle);
}


/* =============================================================
   15. ANALYTICS HERO — exclusivo da página /solucoes/analytics
   Mesma arquitetura do /cases (banner como BG + texto sobreposto
   em mobile/tablet, layout split em desktop), porém com banner
   DARK (navy com homem + gráficos) — texto precisa ser CLARO.
   ============================================================= */

.v-analytics-hero {
  position: relative;
  overflow: hidden;
  /* SEM padding-top extra: o .v-site-main já reservou o espaço do
     header+topbar (calc(topbar + header)). O banner cola direto
     debaixo do header. Diferente do hero da home, que zera o
     padding do main via body.home override. */
  padding-top: 0;
  padding-bottom: 0;
  min-height: auto;
  background: var(--color-navy-deep);
  isolation: isolate;
}

/* ---------- Banner em background (desktop) ------------------
   Em ≥1024px o banner cobre o hero inteiro como bg, texto à
   esquerda sobre o palco navy. */
.v-analytics-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  z-index: 0;
  user-select: none;
  pointer-events: none;
}

/* ---------- Layout interno: content à esquerda --------------- */
.v-analytics-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  min-height: clamp(260px, 25vw, 480px);
  padding-block: 0;
}

@media (min-width: 768px) {
  .v-analytics-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* ---------- Texto ------------------------------------------- */
.v-analytics-hero__content {
  position: relative;
  z-index: 2;
  text-align: left;
}

/* Eyebrow: identidade Analytics = VERDE Vert (decisão Gabriel 2026-08 —
   tags seguem a cor da ferramenta; reverte o royal da onda 2b). Verde puro
   sobre navy passa AA folgado (9.65:1), mesmo par do MAIN. */
.v-page-hero.v-analytics-hero .v-eyebrow {
  color: var(--color-green);
  justify-content: flex-start;
  font-size: var(--fs-14);
  gap: var(--space-3);
  letter-spacing: 0.18em;
}
.v-page-hero.v-analytics-hero .v-eyebrow::before {
  background: var(--color-green);
  width: 28px;
  height: 2px;
}

/* Título: All Round Gothic Regular (400), CAIXA ALTA, branco.
   Espelha o /cases (que usa 400); cor clara por ser hero dark.
   Kit Adobe disponível: 200, 400, 500, 600, 700, 900 (sem 300). */
.v-analytics-hero__title {
  font-family: var(--font-display);
  font-weight: 400;                        /* All Round Gothic Regular (igual /cases) */
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--color-white);
  margin-block: var(--space-3) var(--space-4);
}

/* Subtítulo: Mundial Regular (400), branco/light.
   Espelha o /cases (que usa 400); cor clara por ser hero dark.
   Kit Adobe Mundial: 100, 200, 300, 400, 600, 700, 900 (sem 500). */
.v-analytics-hero__subtitle {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.0625rem);
  color: var(--color-white);
  line-height: 1.5;
  font-weight: 400;                        /* Mundial Regular (igual /cases) */
  letter-spacing: 0;
  max-width: 38ch;                         /* igual /cases */
  margin: 0;
}

/* ---------- Stack enterprise (label + chips) ----------------
   Linha "Stack enterprise:" seguida de chips SAS / Cloudera / IBM.
   Visual: chips com borda sutil branca + bg translúcido (alpha
   wht), padding compacto, consistente com .v-cases-card__tag mas
   adaptado pra dark theme. */
.v-analytics-hero__stack {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.v-analytics-hero__stack-label {
  font-family: var(--font-body);
  font-size: var(--fs-13);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  margin-right: var(--space-1);
}

.v-analytics-hero__chip {
  position: relative;                  /* ancora a borda em gradiente (::before) */
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
  background: transparent;             /* deixa o banner aparecer (era rgba branco 0.06) */
  font-family: var(--font-display);
  font-size: var(--fs-12);
  font-weight: var(--fw-regular);      /* mais fina, igual ao título (era 600/semibold) */
  color: var(--color-white);
  letter-spacing: 0.04em;
  line-height: 1;
}

/* Contorno em gradiente da marca (Gradient+ azul→verde) com miolo
   transparente: o gradiente preenche o ::before e a máscara recorta o
   centro, sobrando só o anel de 1px. Respeita o radius da pílula —
   por isso usamos máscara em vez de border-image. */
.v-analytics-hero__chip::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;                        /* espessura da borda */
  background: var(--gradient-brand);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* ---------- Mobile + tablet (≤1023px): padrão do /cases ------
   Seção inteira ganha aspect-ratio do banner mobile (800×900 = 8/9).
   Banner cobre 100% como BG absoluto, texto sobreposto centrado
   no palco navy superior do banner — composição única igual ao
   Preview MKT. */
@media (max-width: 1023px) {
  .v-analytics-hero {
    display: block;
    position: relative;
    padding-top: 0;
    padding-bottom: 0;
    min-height: auto;
    /* 800/900 = 0.889 — em 375 vira ~422px; em 768 vira ~864px */
    aspect-ratio: 8 / 9;
  }

  .v-analytics-hero__pic {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  .v-analytics-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    object-fit: cover;
    object-position: center;
  }

  /* Divisor brand escondido em mobile (transição é pela arte) */
  .v-analytics-hero__divider { display: none; }

  /* Texto OVERLAID sobre o palco navy do topo do banner.
     padding-top é só o buffer (32-72px) — o .v-site-main já
     reservou o header. NÃO somar header+topbar de novo. */
  .v-analytics-hero__inner {
    position: relative;
    z-index: 1;
    display: block;
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: clamp(2rem, 1rem + 2vw, 4.5rem);
    padding-bottom: 0;
    text-align: center;
  }

  .v-analytics-hero__content {
    text-align: center;
  }

  .v-analytics-hero__subtitle {
    margin-inline: auto;
    /* 28ch: fica confortável em 375 (~196px de texto cabe no
       container - section-px) e ainda quebra natural em 3 linhas. */
    max-width: 28ch;
    font-size: clamp(0.85rem, 0.75rem + 0.6vw, 1rem);
  }

  /* Eyebrow centralizado + dimensões reduzidas pro mobile */
  .v-page-hero.v-analytics-hero .v-eyebrow {
    justify-content: center;
    font-size: var(--fs-12);
    letter-spacing: 0.14em;
    gap: var(--space-2);
  }
  .v-page-hero.v-analytics-hero .v-eyebrow::before {
    width: 22px;
  }

  /* Título em mobile: força tamanho menor que o clamp do desktop */
  .v-analytics-hero__title {
    font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2rem);
    letter-spacing: 0;
  }

  /* Stack centralizado em mobile + label/chips compactos pra caber
     em 375px sem overflow (Stack enterprise: SAS Cloudera IBM). */
  .v-analytics-hero__stack {
    justify-content: center;
    gap: var(--space-1);
  }
  .v-analytics-hero__stack-label {
    font-size: var(--fs-12);
    width: 100%;
    text-align: center;
    margin-right: 0;
    margin-bottom: var(--space-1);
  }
  .v-analytics-hero__chip {
    padding: 0.25rem 0.6rem;
    font-size: 0.7rem;
  }
}

/* ---------- Tablet específico (768-1023) --------------------
   Mesma cicatriz do /cases: o banner em aspect 8/9 a 768 wide
   gera ~864px de altura — o texto com padding 32 fica encostado
   no topo. Fórmula linear calibrada: centraliza o texto no palco
   navy do topo. Override IMPORTANTE: mask-image:none (não fazer
   gradient mask que cria sombra azul) e a zona empilhada faz com
   que o split (texto sobre o palco superior do banner) funcione. */
@media (min-width: 768px) and (max-width: 1023px) {
  .v-analytics-hero__inner {
    padding-top: clamp(8rem, calc(31vw - 75px), 16rem);
  }

  /* IMPORTANTE: nenhuma mask-image — banner sem gradient mask. */
  .v-analytics-hero__pic,
  .v-analytics-hero__img {
    -webkit-mask-image: none;
            mask-image: none;
  }

  /* object-position: center bottom — subject (homem + gráficos)
     está na metade inferior do banner. */
  .v-analytics-hero__img {
    object-position: center bottom;
  }
}

/* ---------- Celular (≤767px): OVERLAY igual ao /cases ----------
   Abandona o empilhado (flex+order). O banner cobre a seção como BG
   absoluto (aspect 8/9 = 800×900) e o texto fica SOBREPOSTO no palco
   navy do topo do banner — composição única, ZERO gap (o "vazio
   escuro" era o topo navy da arte aparecendo abaixo do texto no
   empilhado). Nada acima de 768px é afetado. */
@media (max-width: 767px) {
  .v-analytics-hero {
    display: block;
    position: relative;
    aspect-ratio: 8 / 9;      /* banner mobile 800×900 — full sem corte */
    min-height: auto;
    height: auto;
    padding: 0;
  }

  .v-analytics-hero__pic {
    position: absolute;       /* banner = BG da seção */
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .v-analytics-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;  /* igual ao /cases (aspect 8/9 = imagem, sem corte) */
  }

  /* OVERLAP FIX (todo ≤767px) — chips não podem cair sobre a foto.
     O bloco (eyebrow + título + descrição 4ln + chips SAS/Cloudera/IBM)
     tem altura ~fixa em px; a foto começa SEMPRE em ~58% da altura do
     hero (imagem 8/9 + object-fit:cover, sem corte), então em telas
     estreitas o navy encolhe e os chips invadiam a foto. Recupera ~40px
     tirando SÓ whitespace (sem encolher texto): sobe o bloco (padding-top
     32→16), enxuga as margens do título (12/16→8/8) e aproxima o stack
     (margin-top 20→8). Medido: @375 chips 339.6 vs foto 351.8 (+12px).
     Cobre 360→767 e elimina o "penhasco" de 400px (a compressão antiga
     desligava em 399px e o range 400–429 sobrepunha). Nada ≥768px. */
  .v-analytics-hero__inner {
    position: relative;       /* texto sobreposto ao banner */
    z-index: 1;
    padding-top: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);   /* @375 → 16px (era 32) */
  }
  /* Eyebrow mais colado ao título SÓ no mobile: em vez de puxar o título
     (e subtítulo/chips) pra cima, descemos o eyebrow até ele. O margin-top
     compensa exatamente o margin-bottom removido, então título, subtítulo e
     chips ficam na MESMA posição de antes (bloco centralizado, não puxado). */
  .v-page-hero.v-analytics-hero .v-eyebrow {
    margin-top: var(--space-4);     /* desce o eyebrow ~16px rumo ao título */
    margin-bottom: 0;               /* fecha o gap (era 16px) → ~8px final */
  }
  .v-analytics-hero__title {
    margin-block: var(--space-2) var(--space-2);          /* original 8/8 */
  }
  .v-analytics-hero__stack {
    margin-top: var(--space-2);                           /* 8px (era 20) */
  }

  /* subtítulo: max-width 28ch + fonte 1 passo menor que o /cases.
     O /cases usa 32ch + clamp(0.95…1.0625rem), mas a Mundial tem o
     "0" largo → 32ch ≈ 352px corta em 375px. 28ch é o que CABE
     (REGRA CRÍTICA: zero overflow > paridade exata). Vem do ≤1023;
     re-afirmado aqui p/ clareza. */
  .v-analytics-hero__subtitle {
    max-width: 28ch;
    font-size: clamp(0.85rem, 0.75rem + 0.6vw, 1rem);
  }
}

/* ---------- Telas estreitas (≤399px) — encaixe HORIZONTAL ----------
   A compressão de ALTURA (overlap fix) já vem do bloco ≤767px acima.
   Aqui só o que telas muito estreitas precisam a mais: caber os chips
   "Stack enterprise: SAS Cloudera IBM" na largura sem overflow (fonte/
   padding/gap menores) + 4px extra de aperto no stack (vs os 8px do
   ≤767) para garantir folga sobre a foto onde o navy é mínimo. */
@media (max-width: 399px) {
  .v-analytics-hero__stack {
    margin-top: var(--space-1);                           /* 4px (≤767 usa 8) */
    gap: var(--space-1);
  }
  .v-analytics-hero__stack-label {
    font-size: 0.7rem;
  }
  .v-analytics-hero__chip {
    padding: 0.2rem 0.5rem;
    font-size: 0.66rem;
  }
}

/* ---------- Divisor brand (transição banner→seção) ----------- */
.v-analytics-hero__divider {
  position: relative;
  z-index: 2;
  height: 2px;
  background: var(--gradient-divider-brand);
  box-shadow: 0 0 24px rgba(31, 80, 224, 0.25),
              0 0 12px rgba(0, 222, 151, 0.2);
}


/* =============================================================
   16. CYNDIA HERO — exclusivo da página /solucoes/cyndia
   Espelho ponto a ponto do ANALYTICS HERO (banner DARK + texto
   sobreposto à esquerda em ≥1024px, empilhado em ≤767px), com 2
   diferenças: (a) SEM linha de chips; (b) o título é a LOGO CyndIA
   (img), não fonte. Eyebrow/escala/breakpoints idênticos.
   ============================================================= */

.v-cyndia-hero {
  position: relative;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  min-height: auto;
  background: var(--color-navy-deep);
  isolation: isolate;
}

/* ---------- Banner em background (desktop ≥1024) ------------- */
.v-cyndia-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  z-index: 0;
  user-select: none;
  pointer-events: none;
}

/* ---------- Layout interno: content à esquerda --------------- */
.v-cyndia-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  min-height: clamp(260px, 25vw, 480px);
  padding-block: 0;
}

@media (min-width: 768px) {
  .v-cyndia-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* ---------- Texto ------------------------------------------- */
.v-cyndia-hero__content {
  position: relative;
  z-index: 2;
  text-align: left;
}

/* Eyebrow: identidade CyndIA = ROYAL PURO da logo (#1F50E0 — decisão
   Gabriel 2026-08: fidelidade à cor da logo; o contraste 2.66:1 sobre o
   navy foi apresentado e aceito conscientemente. Reverte o royal-soft
   da onda 2b, que lia como azul lavado). */
.v-page-hero.v-cyndia-hero .v-eyebrow {
  color: var(--color-royal);
  justify-content: flex-start;
  font-size: var(--fs-14);
  gap: var(--space-3);
  letter-spacing: 0.18em;
}
.v-page-hero.v-cyndia-hero .v-eyebrow::before {
  background: var(--color-royal);
  width: 28px;
  height: 2px;
}

/* Título = LOGO CyndIA (img). Reset das margens do <h1> + sizing
   fluido da logo (arte 2000×594, escala p/ baixo). */
.v-cyndia-hero__title {
  margin-block: var(--space-3) var(--space-4);
  line-height: 1;
}
.v-cyndia-hero__logo {
  display: block;
  width: clamp(190px, 22vw, 300px);
  height: auto;
  user-select: none;
  pointer-events: none;
}

/* Subtítulo: Mundial Regular (400), branco — igual ao Analytics */
.v-cyndia-hero__subtitle {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.0625rem);
  color: var(--color-white);
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
  max-width: 38ch;
  margin: 0;
}

/* ---------- Mobile + tablet (≤1023px): overlay retrato 8/9 ---- */
@media (max-width: 1023px) {
  .v-cyndia-hero {
    display: block;
    position: relative;
    padding-top: 0;
    padding-bottom: 0;
    min-height: auto;
    aspect-ratio: 8 / 9;
  }

  .v-cyndia-hero__pic {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  .v-cyndia-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    object-fit: cover;
    object-position: center;
  }

  .v-cyndia-hero__divider { display: none; }

  .v-cyndia-hero__inner {
    position: relative;
    z-index: 1;
    display: block;
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: clamp(2rem, 1rem + 2vw, 4.5rem);
    padding-bottom: 0;
    text-align: center;
  }

  .v-cyndia-hero__content {
    text-align: center;
  }

  .v-cyndia-hero__subtitle {
    margin-inline: auto;
    max-width: 28ch;
    font-size: clamp(0.85rem, 0.75rem + 0.6vw, 1rem);
  }

  .v-page-hero.v-cyndia-hero .v-eyebrow {
    justify-content: center;
    font-size: var(--fs-12);
    letter-spacing: 0.14em;
    gap: var(--space-2);
  }
  .v-page-hero.v-cyndia-hero .v-eyebrow::before {
    width: 22px;
  }

  /* logo centralizada e um pouco maior em relação à viewport */
  .v-cyndia-hero__logo {
    margin-inline: auto;
    width: clamp(170px, 52vw, 240px);
  }
}

/* ---------- Tablet específico (768-1023) --------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .v-cyndia-hero__inner {
    padding-top: clamp(8rem, calc(31vw - 75px), 16rem);
  }

  .v-cyndia-hero__pic,
  .v-cyndia-hero__img {
    -webkit-mask-image: none;
            mask-image: none;
  }

  .v-cyndia-hero__img {
    object-position: center bottom;
  }
}

/* ---------- Celular (≤767px): OVERLAY igual ao /cases ----------
   Banner cobre a seção (aspect 8/9), texto sobreposto no palco navy
   do topo. Substitui o empilhado — ZERO gap. */
@media (max-width: 767px) {
  .v-cyndia-hero {
    display: block;
    position: relative;
    aspect-ratio: 8 / 9;
    min-height: auto;
    height: auto;
    padding: 0;
  }

  .v-cyndia-hero__pic {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .v-cyndia-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;  /* igual ao /cases */
  }

  .v-cyndia-hero__inner {
    position: relative;
    z-index: 1;
    /* CTA caía sobre a foto: o bloco (eyebrow+logo+subtítulo+CTA)
       passava dos ~55% navy do topo do banner. Comprime padding-top
       + gaps + margin-top do CTA p/ o bloco inteiro caber no palco
       navy. Escopo ≤767px — nada acima de 768px muda. */
    padding-top: clamp(1rem, 0.5rem + 1.5vw, 2rem);   /* era ~32px (vinha do bloco ≤1023) */
  }

  /* gaps eyebrow→logo→subtítulo menores p/ subir o bloco */
  .v-cyndia-hero__title {
    margin-block: var(--space-2) var(--space-2);      /* era space-3/space-4 = 12/16 */
  }

  /* subtítulo: 28ch (cabe) — 32ch do /cases corta com a Mundial em 375px.
     line-height 1.45 (de 1.5) tira ~1 linha de altura no pior caso.
     Fonte volta ao padrão: o corte dos vãos já dá a folga, sem
     precisar encolher o corpo do texto (fonte = último recurso). */
  .v-cyndia-hero__subtitle {
    max-width: 28ch;
    font-size: clamp(0.85rem, 0.75rem + 0.6vw, 1rem);
    line-height: 1.45;
  }
}

/* ---------- Divisor brand (transição banner→seção) ----------- */
.v-cyndia-hero__divider {
  position: relative;
  z-index: 2;
  height: 2px;
  background: var(--gradient-divider-brand);
  box-shadow: 0 0 24px rgba(31, 80, 224, 0.25),
              0 0 12px rgba(0, 222, 151, 0.2);
}


/* =============================================================
   17. TEMA CLARO — /solucoes/cyndia (espelho Cases)
   Escopado em body.page-template-page-solucoes-cyndia → não vaza
   p/ ONDA/Main/Cases. Heróis e a ilustração (.v-sol-art, em
   solution-art.css) ficam DARK; cards de conteúdo ficam DARK (saltam
   no claro); CTA final vira faixa verde. Tokens/base intactos.
   ============================================================= */
body.page-template-page-solucoes-cyndia .v-page-section {
  background: var(--surface-light);
}
body.page-template-page-solucoes-cyndia .v-page-problem {
  background: var(--surface-light);
}
/* --alt depois de .v-page-section (mesma especificidade) p/ vencer.
   Feedback MKT 2026-06: degradê removido — chapado no cinza claro. */
body.page-template-page-solucoes-cyndia .v-page-section--alt {
  background: var(--surface-light);
}

/* texto de NÍVEL DE SEÇÃO (sobre o fundo claro) → navy.
   h2 = headings de seção (cards usam h3, não afetados). */
body.page-template-page-solucoes-cyndia .v-page-section h2,
body.page-template-page-solucoes-cyndia .v-page-problem__title,
body.page-template-page-solucoes-cyndia .v-page-step__title {
  color: var(--text-on-light);
}
body.page-template-page-solucoes-cyndia .v-page-section__header p,
body.page-template-page-solucoes-cyndia .v-page-problem__text,
body.page-template-page-solucoes-cyndia .v-page-step__desc {
  color: var(--text-on-light-muted);
}
/* eyebrows de seção (fora do hero) → royal p/ contraste no claro */
body.page-template-page-solucoes-cyndia .v-page-section .v-eyebrow {
  color: var(--color-royal);
}

/* steps (sobre o fundo claro, não são cards). .is-active fica verde. */
body.page-template-page-solucoes-cyndia .v-page-step__num {
  background: rgba(16,26,59,.04);
  border-color: rgba(16,26,59,.12);
  color: var(--text-on-light-muted);
}
body.page-template-page-solucoes-cyndia .v-page-step::after {
  background: rgba(16,26,59,.08);
}

/* cards com sombra p/ separar do fundo claro */
body.page-template-page-solucoes-cyndia .v-page-feature {
  box-shadow: 0 10px 30px rgba(16,26,59,.10);
}

/* Cards "O que entregamos" na COR DA FERRAMENTA — royal, textos brancos
   (decisão Gabriel 2026-08). Escopado no #v-grj-features. Título já é
   branco na base; ícone/linha-topo viram brancos (royal sobre royal
   sumiria). Hover com borda branca (o accent royal da base sumiria). */
body.page-template-page-solucoes-cyndia #v-grj-features .v-page-feature {
  background: var(--color-royal);
  border-color: rgba(255,255,255,.20);
}
body.page-template-page-solucoes-cyndia #v-grj-features .v-page-feature::before {
  background: rgba(255,255,255,.85);
}
body.page-template-page-solucoes-cyndia #v-grj-features .v-page-feature:hover {
  border-color: rgba(255,255,255,.45);
  box-shadow: 0 12px 32px rgba(31,80,224,.35);
}
body.page-template-page-solucoes-cyndia #v-grj-features .v-page-feature__desc {
  color: rgba(255,255,255,.85);
}
body.page-template-page-solucoes-cyndia #v-grj-features .v-page-feature__icon {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.30);
  color: var(--color-white);
}

/* CTA final: faixa verde pelo modificador .v-page-cta--green (seção 7),
   aplicado via arg 'variant' => 'green' do partial page-cta.php. */


/* =============================================================
   18. TEMA CLARO — /solucoes/analytics (espelho Cases)
   Mesmo recipe da CyndIA, escopado nesta página. Hero (já dark)
   intacto; cards (features/clientes/prêmios) DARK; CTA verde.
   ============================================================= */
body.page-template-page-solucoes-analytics .v-page-section {
  background: var(--surface-light);
}
body.page-template-page-solucoes-analytics .v-page-problem {
  background: var(--surface-light);
}
/* Feedback MKT 2026-06: degradê removido (Como Funciona + Reconhecimento). */
body.page-template-page-solucoes-analytics .v-page-section--alt {
  background: var(--surface-light);
}

body.page-template-page-solucoes-analytics .v-page-section h2,
body.page-template-page-solucoes-analytics .v-page-problem__title,
body.page-template-page-solucoes-analytics .v-page-step__title {
  color: var(--text-on-light);
}
body.page-template-page-solucoes-analytics .v-page-section__header p,
body.page-template-page-solucoes-analytics .v-page-problem__text,
body.page-template-page-solucoes-analytics .v-page-step__desc {
  color: var(--text-on-light-muted);
}
/* Eyebrow das seções claras: green-ink (verde puro falha AA no #E8E9EC),
   mesmo padrão do MAIN (seção 22). */
body.page-template-page-solucoes-analytics .v-page-section .v-eyebrow {
  color: var(--color-green-ink);
}

body.page-template-page-solucoes-analytics .v-page-step__num {
  background: rgba(16,26,59,.04);
  border-color: rgba(16,26,59,.12);
  color: var(--text-on-light-muted);
}
body.page-template-page-solucoes-analytics .v-page-step::after {
  background: rgba(16,26,59,.08);
}

/* cards ESCUROS mantidos (features + clientes + prêmios) — sombra no claro.
   ano do prêmio (.v-page-award__year) permanece verde (não sobrescrito). */
body.page-template-page-solucoes-analytics .v-page-feature,
body.page-template-page-solucoes-analytics .v-page-client,
body.page-template-page-solucoes-analytics .v-page-award {
  box-shadow: 0 10px 30px rgba(16,26,59,.10);
}

/* CTA final: faixa verde pelo modificador .v-page-cta--green (seção 7). */


/* =============================================================
   19. ONDA HERO — exclusivo da página /solucoes/onda
   Espelho ponto a ponto do CYNDIA/ANALYTICS HERO (banner DARK +
   texto sobreposto à esquerda em ≥1024px, empilhado em ≤767px).
   Título = LOGO ONDA (img colorida cyan/roxo). Hero permanece DARK
   (o banner tem fundo navy/roxo próprio).
   ============================================================= */

.v-onda-hero {
  position: relative;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  min-height: auto;
  background: var(--color-navy-deep);
  isolation: isolate;
}

.v-onda-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  z-index: 0;
  user-select: none;
  pointer-events: none;
}

.v-onda-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  min-height: clamp(260px, 25vw, 480px);
  padding-block: 0;
}

@media (min-width: 768px) {
  .v-onda-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.v-onda-hero__content {
  position: relative;
  z-index: 2;
  text-align: left;
}

/* Eyebrow: identidade ONDA = VIOLETA. Sobre o hero navy usa violet-soft p/ AA
   (6.08:1; violeta puro daria 2.66:1). onda 2b. */
.v-page-hero.v-onda-hero .v-eyebrow {
  color: var(--color-violet-soft);
  justify-content: flex-start;
  font-size: var(--fs-14);
  gap: var(--space-3);
  letter-spacing: 0.18em;
}
.v-page-hero.v-onda-hero .v-eyebrow::before {
  background: var(--color-violet-soft);
  width: 28px;
  height: 2px;
}

/* Título = LOGO ONDA (img). Reset das margens do <h1> + sizing fluido
   (arte 2000×488, escala p/ baixo). */
.v-onda-hero__title {
  margin-block: var(--space-3) var(--space-4);
  line-height: 1;
}
.v-onda-hero__logo {
  display: block;
  width: clamp(190px, 22vw, 300px);
  height: auto;
  user-select: none;
  pointer-events: none;
}

.v-onda-hero__subtitle {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.0625rem);
  color: var(--color-white);
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
  max-width: 38ch;
  margin: 0;
}

/* ---------- Mobile + tablet (≤1023px): overlay retrato 8/9 ---- */
@media (max-width: 1023px) {
  .v-onda-hero {
    display: block;
    position: relative;
    padding-top: 0;
    padding-bottom: 0;
    min-height: auto;
    aspect-ratio: 8 / 9;
  }

  .v-onda-hero__pic {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  .v-onda-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    object-fit: cover;
    object-position: center;
  }

  .v-onda-hero__divider { display: none; }

  .v-onda-hero__inner {
    position: relative;
    z-index: 1;
    display: block;
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: clamp(2rem, 1rem + 2vw, 4.5rem);
    padding-bottom: 0;
    text-align: center;
  }

  .v-onda-hero__content {
    text-align: center;
  }

  .v-onda-hero__subtitle {
    margin-inline: auto;
    max-width: 28ch;
    font-size: clamp(0.85rem, 0.75rem + 0.6vw, 1rem);
  }

  .v-page-hero.v-onda-hero .v-eyebrow {
    justify-content: center;
    font-size: var(--fs-12);
    letter-spacing: 0.14em;
    gap: var(--space-2);
  }
  .v-page-hero.v-onda-hero .v-eyebrow::before {
    width: 22px;
  }

  .v-onda-hero__logo {
    margin-inline: auto;
    width: clamp(170px, 52vw, 240px);
  }
}

/* ---------- Tablet específico (768-1023) --------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .v-onda-hero__inner {
    padding-top: clamp(8rem, calc(31vw - 75px), 16rem);
  }

  .v-onda-hero__pic,
  .v-onda-hero__img {
    -webkit-mask-image: none;
            mask-image: none;
  }

  .v-onda-hero__img {
    object-position: center bottom;
  }
}

/* ---------- Celular (≤767px): OVERLAY igual ao /cases ----------
   Banner cobre a seção (aspect 8/9), texto sobreposto no palco navy
   do topo. Substitui o empilhado — ZERO gap. */
@media (max-width: 767px) {
  .v-onda-hero {
    display: block;
    position: relative;
    aspect-ratio: 8 / 9;
    min-height: auto;
    height: auto;
    padding: 0;
  }

  .v-onda-hero__pic {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .v-onda-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;  /* igual ao /cases */
  }

  .v-onda-hero__inner {
    position: relative;
    z-index: 1;
    /* CTA caía sobre a foto: o bloco (eyebrow+logo+subtítulo+CTA)
       passava dos ~55% navy do topo do banner. Comprime padding-top
       + gaps + margin-top do CTA p/ o bloco inteiro caber no palco
       navy. Escopo ≤767px — nada acima de 768px muda. */
    padding-top: clamp(1rem, 0.5rem + 1.5vw, 2rem);   /* era ~32px (vinha do bloco ≤1023) */
  }

  /* gaps eyebrow→logo→subtítulo menores p/ subir o bloco */
  .v-onda-hero__title {
    margin-block: var(--space-2) var(--space-2);      /* era space-3/space-4 = 12/16 */
  }

  /* subtítulo: 28ch (cabe) — 32ch do /cases corta com a Mundial em 375px.
     line-height 1.45 (de 1.5) tira ~1 linha de altura no pior caso. */
  .v-onda-hero__subtitle {
    max-width: 28ch;
    font-size: clamp(0.85rem, 0.75rem + 0.6vw, 1rem);
    line-height: 1.45;
  }
}

/* ---------- Divisor brand (transição banner→seção) ----------- */
.v-onda-hero__divider {
  position: relative;
  z-index: 2;
  height: 2px;
  background: var(--gradient-divider-brand);
  box-shadow: 0 0 24px rgba(31, 80, 224, 0.25),
              0 0 12px rgba(0, 222, 151, 0.2);
}


/* =============================================================
   20. TEMA CLARO — /solucoes/onda (espelho Cases/CyndIA/Analytics)
   Escopado em body.page-template-page-solucoes-onda → não vaza.
   Hero DARK; cards (.v-page-feature) DARK; o widget decorativo
   .v-val-* (grade de validação) é PRESERVADO (acento de produto);
   CTA final vira faixa verde. Tokens/base intactos.
   ============================================================= */
body.page-template-page-solucoes-onda .v-page-section {
  background: var(--surface-light);
}
body.page-template-page-solucoes-onda .v-page-problem {
  background: var(--surface-light);
}
/* Feedback MKT 2026-06: degradê removido (Como Funciona). */
body.page-template-page-solucoes-onda .v-page-section--alt {
  background: var(--surface-light);
}

/* texto de NÍVEL DE SEÇÃO → navy (h2 de seção; cards usam h3, intactos).
   .v-page-section > .v-container > p cobre os parágrafos "soltos" da
   seção de fontes (linha 214) — não atinge descrições de card. */
body.page-template-page-solucoes-onda .v-page-section h2,
body.page-template-page-solucoes-onda .v-page-problem__title,
body.page-template-page-solucoes-onda .v-page-step__title {
  color: var(--text-on-light);
}
body.page-template-page-solucoes-onda .v-page-section__header p,
body.page-template-page-solucoes-onda .v-page-section > .v-container > p,
body.page-template-page-solucoes-onda .v-page-problem__text,
body.page-template-page-solucoes-onda .v-page-step__desc {
  color: var(--text-on-light-muted);
}
body.page-template-page-solucoes-onda .v-page-section .v-eyebrow {
  color: var(--color-onda-violet);   /* identidade ONDA no claro (5.27:1 sobre #E8E9EC) */
}

/* steps (sobre o fundo claro). .is-active fica verde. */
body.page-template-page-solucoes-onda .v-page-step__num {
  background: rgba(16,26,59,.04);
  border-color: rgba(16,26,59,.12);
  color: var(--text-on-light-muted);
}
body.page-template-page-solucoes-onda .v-page-step::after {
  background: rgba(16,26,59,.08);
}

/* cards com sombra p/ separar do fundo claro */
body.page-template-page-solucoes-onda .v-page-feature {
  box-shadow: 0 10px 30px rgba(16,26,59,.10);
}

/* Cards "O que entregamos" na COR DA FERRAMENTA — azul claro da logo
   (teal), textos navy (decisão Gabriel 2026-08). Escopado no
   #v-onda-features. Ícone/linha-topo navy (teal sobre teal sumiria). */
body.page-template-page-solucoes-onda #v-onda-features .v-page-feature {
  background: var(--color-teal);
  border-color: rgba(16,26,59,.15);
}
body.page-template-page-solucoes-onda #v-onda-features .v-page-feature::before {
  background: var(--color-navy);
}
body.page-template-page-solucoes-onda #v-onda-features .v-page-feature:hover {
  border-color: rgba(16,26,59,.40);
  box-shadow: 0 12px 32px rgba(0,221,222,.30);
}
body.page-template-page-solucoes-onda #v-onda-features .v-page-feature__title {
  color: var(--color-navy);
}
body.page-template-page-solucoes-onda #v-onda-features .v-page-feature__desc {
  color: rgba(16,26,59,.78);
}
body.page-template-page-solucoes-onda #v-onda-features .v-page-feature__icon {
  background: rgba(16,26,59,.08);
  border-color: rgba(16,26,59,.25);
  color: var(--color-navy);
}

/* CTA final: faixa verde pelo modificador .v-page-cta--green (seção 7). */


/* =============================================================
   21. MAIN HERO — exclusivo da página /solucoes/main
   Espelho ponto a ponto do ONDA/CYNDIA HERO (banner DARK + texto
   sobreposto à esquerda em ≥1024px, empilhado em ≤767px).
   Título = LOGO MAIN (img V02: letras brancas + chip verde). Hero
   permanece DARK. Assets na nova convenção assets/images/heroes/main/.
   ============================================================= */

.v-main-hero {
  position: relative;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  min-height: auto;
  background: var(--color-navy-deep);
  isolation: isolate;
}

.v-main-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  z-index: 0;
  user-select: none;
  pointer-events: none;
}

.v-main-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  min-height: clamp(260px, 25vw, 480px);
  padding-block: 0;
}

@media (min-width: 768px) {
  .v-main-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.v-main-hero__content {
  position: relative;
  z-index: 2;
  text-align: left;
}

/* Eyebrow "AGENTES DE IA": identidade MAIN = VERDE (--product-accent do MAIN).
   Verde sobre o hero navy = 9.65:1 (AA forte, não precisa de variante). Item 7b
   da onda 2b — só o TEXTO fica verde; a logo "MAIN" (img) não é tocada. */
.v-page-hero.v-main-hero .v-eyebrow {
  color: var(--color-green);
  justify-content: flex-start;
  font-size: var(--fs-14);
  gap: var(--space-3);
  letter-spacing: 0.18em;
}
.v-page-hero.v-main-hero .v-eyebrow::before {
  background: var(--color-green);
  width: 28px;
  height: 2px;
}

/* Título = LOGO MAIN (img). Reset das margens do <h1> + sizing fluido
   (arte 2000×694, escala p/ baixo). */
.v-main-hero__title {
  margin-block: var(--space-3) var(--space-4);
  line-height: 1;
}
.v-main-hero__logo {
  display: block;
  width: clamp(190px, 22vw, 300px);
  height: auto;
  user-select: none;
  pointer-events: none;
}

.v-main-hero__subtitle {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.0625rem);
  color: var(--color-white);
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
  max-width: 38ch;
  margin: 0;
}

/* ---------- Mobile + tablet (≤1023px): overlay retrato 8/9 ---- */
@media (max-width: 1023px) {
  .v-main-hero {
    display: block;
    position: relative;
    padding-top: 0;
    padding-bottom: 0;
    min-height: auto;
    aspect-ratio: 8 / 9;
  }

  .v-main-hero__pic {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  .v-main-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    object-fit: cover;
    object-position: center;
  }

  .v-main-hero__divider { display: none; }

  .v-main-hero__inner {
    position: relative;
    z-index: 1;
    display: block;
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: clamp(2rem, 1rem + 2vw, 4.5rem);
    padding-bottom: 0;
    text-align: center;
  }

  .v-main-hero__content {
    text-align: center;
  }

  .v-main-hero__subtitle {
    margin-inline: auto;
    max-width: 28ch;
    font-size: clamp(0.85rem, 0.75rem + 0.6vw, 1rem);
  }

  .v-page-hero.v-main-hero .v-eyebrow {
    justify-content: center;
    font-size: var(--fs-12);
    letter-spacing: 0.14em;
    gap: var(--space-2);
  }
  .v-page-hero.v-main-hero .v-eyebrow::before {
    width: 22px;
  }

  .v-main-hero__logo {
    margin-inline: auto;
    width: clamp(170px, 52vw, 240px);
  }
}

/* ---------- Tablet específico (768-1023) --------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .v-main-hero__inner {
    padding-top: clamp(8rem, calc(31vw - 75px), 16rem);
  }

  .v-main-hero__pic,
  .v-main-hero__img {
    -webkit-mask-image: none;
            mask-image: none;
  }

  .v-main-hero__img {
    object-position: center bottom;
  }
}

/* ---------- Celular (≤767px): OVERLAY igual ao /cases ----------
   Banner cobre a seção (aspect 8/9), texto sobreposto no palco navy
   do topo. Substitui o empilhado — ZERO gap. */
@media (max-width: 767px) {
  .v-main-hero {
    display: block;
    position: relative;
    aspect-ratio: 8 / 9;
    min-height: auto;
    height: auto;
    padding: 0;
  }

  .v-main-hero__pic {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .v-main-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;  /* igual ao /cases */
  }

  .v-main-hero__inner {
    position: relative;
    z-index: 1;
    /* CTA caía sobre a foto: o bloco (eyebrow+logo+subtítulo+CTA)
       passava dos ~55% navy do topo do banner. Comprime padding-top
       + gaps + margin-top do CTA p/ o bloco inteiro caber no palco
       navy. Escopo ≤767px — nada acima de 768px muda. */
    padding-top: clamp(1rem, 0.5rem + 1.5vw, 2rem);   /* era ~32px (vinha do bloco ≤1023) */
  }

  /* gaps eyebrow→logo→subtítulo menores p/ subir o bloco */
  .v-main-hero__title {
    margin-block: var(--space-2) var(--space-2);      /* era space-3/space-4 = 12/16 */
  }

  /* subtítulo: 28ch (cabe) — 32ch do /cases corta com a Mundial em 375px.
     line-height 1.45 (de 1.5) tira ~1 linha de altura no pior caso. */
  .v-main-hero__subtitle {
    max-width: 28ch;
    font-size: clamp(0.85rem, 0.75rem + 0.6vw, 1rem);
    line-height: 1.45;
  }
}

/* ---------- Divisor brand (transição banner→seção) ----------- */
.v-main-hero__divider {
  position: relative;
  z-index: 2;
  height: 2px;
  background: var(--gradient-divider-brand);
  box-shadow: 0 0 24px rgba(31, 80, 224, 0.25),
              0 0 12px rgba(0, 222, 151, 0.2);
}


/* =============================================================
   22. TEMA CLARO — /solucoes/main (espelho Cases/CyndIA/Analytics/ONDA)
   Escopado em body.page-template-page-solucoes-main → não vaza.
   Hero DARK; cards (.v-page-feature) DARK; CTA final vira faixa
   verde. Tokens/base intactos.
   ============================================================= */
body.page-template-page-solucoes-main .v-page-section {
  background: var(--surface-light);
}
body.page-template-page-solucoes-main .v-page-problem {
  background: var(--surface-light);
}
/* Feedback MKT 2026-06: degradê removido (Como Funciona). */
body.page-template-page-solucoes-main .v-page-section--alt {
  background: var(--surface-light);
}

body.page-template-page-solucoes-main .v-page-section h2,
body.page-template-page-solucoes-main .v-page-problem__title,
body.page-template-page-solucoes-main .v-page-step__title {
  color: var(--text-on-light);
}
body.page-template-page-solucoes-main .v-page-section__header p,
body.page-template-page-solucoes-main .v-page-problem__text,
body.page-template-page-solucoes-main .v-page-step__desc {
  color: var(--text-on-light-muted);
}
body.page-template-page-solucoes-main .v-page-section .v-eyebrow {
  color: var(--color-green-ink);   /* identidade MAIN no claro (verde escurecido; ~4.25:1 sobre #E8E9EC) */
}

/* Respiro vertical MENOR nas 5 páginas internas de Soluções
   (analytics/cyndia/onda/main/rc-18 — feedback MKT 2026-08): o padding
   padrão (~61-64px/lado em 1440) somava ~130px de vazio entre seções e,
   com o reveal ainda não disparado, parecia fim de página. ~46px/lado
   em 1440. Só aqui — Cases/políticas mantêm o padrão. */
body.page-template-page-solucoes-analytics .v-page-section,
body.page-template-page-solucoes-analytics .v-page-problem,
body.page-template-page-solucoes-cyndia .v-page-section,
body.page-template-page-solucoes-cyndia .v-page-problem,
body.page-template-page-solucoes-onda .v-page-section,
body.page-template-page-solucoes-onda .v-page-problem,
body.page-template-page-solucoes-main .v-page-section,
body.page-template-page-solucoes-main .v-page-problem,
body.page-template-page-rc18 .v-page-section,
body.page-template-page-rc18 .v-page-problem {
  padding-block: clamp(2.5rem, 1.5rem + 1.5vw, 4rem);
}

body.page-template-page-solucoes-main .v-page-step__num {
  background: rgba(16,26,59,.04);
  border-color: rgba(16,26,59,.12);
  color: var(--text-on-light-muted);
}
body.page-template-page-solucoes-main .v-page-step::after {
  background: rgba(16,26,59,.08);
}

/* cards com sombra p/ separar do fundo claro */
body.page-template-page-solucoes-main .v-page-feature {
  box-shadow: 0 10px 30px rgba(16,26,59,.10);
}

/* Cards "O que entregamos" na COR DA FERRAMENTA — verde da logo,
   textos navy (decisão Gabriel 2026-08). Escopado no
   #v-agentes-features. Ícone/linha-topo navy (verde sobre verde
   sumiria). */
body.page-template-page-solucoes-main #v-agentes-features .v-page-feature {
  background: var(--color-green);
  border-color: rgba(16,26,59,.15);
}
body.page-template-page-solucoes-main #v-agentes-features .v-page-feature::before {
  background: var(--color-navy);
}
body.page-template-page-solucoes-main #v-agentes-features .v-page-feature:hover {
  border-color: rgba(16,26,59,.40);
  box-shadow: 0 12px 32px rgba(0,222,151,.35);
}
body.page-template-page-solucoes-main #v-agentes-features .v-page-feature__title {
  color: var(--color-navy);
}
body.page-template-page-solucoes-main #v-agentes-features .v-page-feature__desc {
  color: rgba(16,26,59,.78);
}
body.page-template-page-solucoes-main #v-agentes-features .v-page-feature__icon {
  background: rgba(16,26,59,.08);
  border-color: rgba(16,26,59,.25);
  color: var(--color-navy);
}

/* CTA final: faixa verde pelo modificador .v-page-cta--green (seção 7). */


/* =============================================================
   /SOBRE — modelo atual: hero interativo + corpo claro. (feedback MKT)
   ============================================================= */

/* Hero clean: apenas o fundo navy + texto centralizado (sem canvas, sem CTA).
   Herda min-height/centralização de .v-page-hero. (feedback MKT) */

/* Emblema institucional da história: o "V" da Vert em painel navy que
   "salta" sobre o fundo claro. Sem gráficos — só a identidade da marca. */
.v-about-emblem {
  position: relative;
  width: 100%;
  max-width: 380px;
  padding: var(--space-7) var(--space-7) var(--space-10);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  background: linear-gradient(160deg, var(--color-navy-card), var(--color-navy-deep));
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 60px rgba(16, 26, 59, 0.18);
}
.v-about-emblem__svg { display: block; width: 100%; height: auto; }

/* anéis e nós giram devagar; o "V" fica fixo (é a identidade) */
.v-about-emblem__orbit {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: v-emb-spin 32s linear infinite;
}
.v-about-emblem__ring {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: v-emb-spin 64s linear infinite reverse;
}
@keyframes v-emb-spin { to { transform: rotate(360deg); } }
.v-about-emblem__pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: v-emb-pulse 2.8s ease-in-out infinite;
}
@keyframes v-emb-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.6); opacity: 0.5; }
}
.v-about-emblem__label {
  font-family: var(--font-display);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .v-about-emblem__orbit,
  .v-about-emblem__ring,
  .v-about-emblem__pulse { animation: none; }
}

/* Corpo claro */
body.page-template-page-sobre .v-page-problem,
body.page-template-page-sobre .v-page-section {
  background: var(--surface-light);
}

/* Títulos padronizados: mesmo peso (black), tamanho e gap título->conteúdo
   em todas as seções (antes a história era fw-bold com gap menor). */
body.page-template-page-sobre .v-page-problem__title,
body.page-template-page-sobre .v-page-section__heading {
  color: var(--text-on-light);
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
  letter-spacing: var(--ls-snug);
  line-height: 1.15;
  margin-bottom: var(--space-8);
}

body.page-template-page-sobre .v-page-problem__text,
body.page-template-page-sobre .v-page-section__header p {
  color: var(--text-on-light-muted);
}

/* O reset global zera a margem de <p>; a história tem 2 parágrafos
   (briefing MKT) que ficavam colados sem esta regra. */
body.page-template-page-sobre .v-page-problem__text + .v-page-problem__text {
  margin-top: var(--space-4);
}

/* História: desktop fica no padrão da base (título e parágrafo à
   esquerda, max-width 560px) — a centralização de desktop da rodada
   anterior saiu: com a linha do título ocupando quase toda a coluna
   (~35px simétricos de sobra), era um no-op visual. Centralização SÓ
   no mobile (≤767px, coluna única): título E texto do parágrafo
   centralizados. O guard do responsive-fixes.css já põe o parágrafo
   em largura total no mobile, então só o text-align resolve. */
@media (max-width: 767px) {
  body.page-template-page-sobre .v-page-problem__title,
  body.page-template-page-sobre .v-page-problem__text {
    text-align: center;
  }
}

/* Cards de MVV (missão/visão/valores) + escritórios em branco sobre o cinza claro. */
body.page-template-page-sobre .v-page-feature,
body.page-template-page-sobre .v-page-office {
  background: #fff;
  border-color: rgba(16, 26, 59, 0.08);
  box-shadow: 0 6px 20px rgba(16, 26, 59, 0.05);
}
body.page-template-page-sobre .v-page-feature:hover,
body.page-template-page-sobre .v-page-office:hover {
  border-color: rgba(0, 222, 151, 0.4);
  box-shadow: 0 14px 34px rgba(16, 26, 59, 0.1);
}
body.page-template-page-sobre .v-page-feature__title {
  color: var(--text-on-light);
}
body.page-template-page-sobre .v-page-feature__desc,
body.page-template-page-sobre .v-page-office__address {
  color: var(--text-on-light-muted);
}
/* O ícone verde dos cards e a cidade (verde) do escritório seguem. */

/* Lista de valores dentro do card "Nossos Valores" (MVV) — marcador
   quadrado girado em verde-ink (AA sobre o card branco). */
body.page-template-page-sobre .v-page-feature__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
body.page-template-page-sobre .v-page-feature__list li {
  position: relative;
  padding-left: var(--space-5);
  color: var(--text-on-light-muted);
  font-size: var(--fs-15);
  line-height: var(--lh-relaxed);
}
body.page-template-page-sobre .v-page-feature__list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: var(--color-green-ink);
}

/* CTA final: faixa verde pelo modificador .v-page-cta--green (seção 7) —
   esta página era a fonte da receita (única com ::placeholder). */

/* =============================================================
   SOBRE — PRESENÇA NACIONAL (mapa do Brasil + escritórios) · onda Sobre
   Silhueta mapsicon (domínio público) recolorida nos tokens do tema.
   Layout: mapa + coluna de escritórios lado a lado no desktop; empilha
   no mobile. Pins em 2 cores (navy=escritório, royal=atuação) com a marca
   "V" branca. Entrada dos pins escalonada; desligada em reduced-motion.
   ============================================================= */
.v-about-presence {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: center;
}
@media (min-width: 900px) {
  .v-about-presence {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--space-12);
  }
}

.v-about-presence__map {
  margin: 0;
}

/* Stage: wrapper posicionado do svg + tooltip + controles (onda Mapa
   Interativo). overflow hidden segura o conteúdo quando ampliado. */
.v-about-map__stage {
  position: relative;
  max-width: 520px;
  margin-inline: auto;
}

.v-about-map {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  /* rolagem vertical da página continua livre sobre o mapa em zoom 1;
     quando ampliado (is-zoomed) o JS pan/pinch assume os gestos. */
  touch-action: pan-y;
}
.v-about-map__stage.is-zoomed .v-about-map {
  touch-action: none;
  cursor: grab;
}
.v-about-map__stage.is-zoomed .v-about-map:active {
  cursor: grabbing;
}

/* 27 UFs: verde institucional com divisas na cor do fundo claro —
   visíveis mas discretas (não competem com os pins). */
.v-about-map__land path {
  fill: var(--color-green);
  stroke: var(--surface-light);
  stroke-width: 1.4;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;   /* divisa não engrossa no zoom */
}

/* ---------- Controles de zoom ---------- */
.v-about-map__controls {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  z-index: 3;
}
.v-about-map__ctrl {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(16, 26, 59, 0.15);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--color-navy);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(16, 26, 59, 0.10);
  transition: background var(--dur-base) var(--ease-out-quart),
              border-color var(--dur-base) var(--ease-out-quart);
}
.v-about-map__ctrl:hover:not(:disabled) {
  border-color: var(--alpha-grn-30);
  background: #f4fdf9;
}
.v-about-map__ctrl:disabled {
  opacity: 0.35;
  cursor: default;
}
/* display:flex acima venceria o atributo [hidden] (reset só aparece
   ampliado) — reafirma o none. */
.v-about-map__ctrl[hidden] { display: none; }
.v-about-map__ctrl:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 222, 151, 0.5);
}

/* ---------- Tooltip dos pins ---------- */
.v-about-map__tip {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, calc(-100% - 8px));
  padding: var(--space-1) var(--space-3);
  background: var(--color-navy);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--fs-13);
  font-weight: var(--fw-regular);
  line-height: 1.4;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 20px rgba(16, 26, 59, 0.30);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  z-index: 4;
  transition: opacity 0.15s ease;
}
.v-about-map__tip.is-open { opacity: 1; }
/* setinha */
.v-about-map__tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--color-navy);
}

/* ---------- Dica do zoom por scroll (Ctrl/⌘ + wheel, desktop) ------
   Bolha discreta no pé do mapa; o JS injeta o texto conforme a
   plataforma, mostra UMA vez no primeiro scroll simples sobre o mapa
   e esconde sozinho (4s) ou na primeira interação com o atalho. */
.v-about-map__hint {
  position: absolute;
  left: 50%;
  bottom: var(--space-3);
  transform: translateX(-50%);
  z-index: 5;
  max-width: calc(100% - var(--space-4));
  padding: var(--space-1) var(--space-3);
  background: rgba(16, 26, 59, 0.85);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--fs-12);
  line-height: 1.4;
  text-align: center;
  border-radius: var(--radius-md);
  pointer-events: none;
  white-space: nowrap;
}
.v-about-map__hint[hidden] { display: none; }

/* Pin focável: anel de foco de teclado */
.v-about-map__pin:focus {
  outline: none;
}
.v-about-map__pin:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 2px;
}
.v-about-map__pin { cursor: pointer; }

/* Pins: cor via currentColor no <use> (a marca V herda #fff no símbolo). */
.v-about-map__pin {
  filter: drop-shadow(0 3px 5px rgba(16, 26, 59, 0.28));
  transform-box: fill-box;
  transform-origin: 50% 100%;        /* cresce a partir da ponta */
}
.v-about-map__pin--atuacao { color: var(--color-royal); }

/* Entrada escalonada (pop-in). Só anima quando o bloco entra no viewport. */
.v-about-map__pin {
  opacity: 0;
  transform: scale(0.4);
  transition:
    opacity 0.45s var(--ease-out-quart),
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: calc(var(--pin-i, 0) * 80ms);
}
.v-about-presence.is-visible .v-about-map__pin {
  opacity: 1;
  transform: scale(1);
}

/* Legenda (só atuação — os pins navy de escritório saíram, briefing
   MKT 2026-08-04). */
.v-about-map__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-6);
}
.v-about-map__legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-13);
  color: var(--text-on-light-muted);
}
.v-about-map__key {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.v-about-map__key--atuacao { background: var(--color-royal); }

/* Coluna de escritórios ao lado do mapa (reusa .v-page-office branco). */
.v-about-presence__offices {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}
/* 4 escritórios (BSB, Vitória, RJ, SP — 2026-10-07): 2×2 a partir de
   560px para a coluna não ficar muito mais alta que o mapa. Cards da
   mesma linha com a mesma altura; "Como chegar" alinhado no rodapé. */
@media (min-width: 560px) {
  .v-about-presence__offices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }
  .v-about-presence__offices-title {
    grid-column: 1 / -1;
  }
  .v-about-presence__offices .v-office {
    display: flex;
  }
  .v-about-presence__offices .v-office__card {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--space-5);
  }
  .v-about-presence__offices .v-office__hint {
    margin-top: auto;
    padding-top: var(--space-3);
  }
}

/* Label pequeno acima dos cards de endereço (feedback MKT 2026-08-04). */
.v-about-presence__offices-title {
  margin: 0 0 calc(-1 * var(--space-2));
  font-family: var(--font-display);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--text-on-light-muted);
}

/* ---------- Card de escritório CLICÁVEL + menu de apps de mapa ------
   (onda Mapa Interativo) O card vira gatilho (role=button) que abre um
   popover com Google Maps / Apple Maps / Waze; foco gerenciado no JS. */
.v-office {
  position: relative;
}
.v-office__card {
  cursor: pointer;
}
.v-office__card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 222, 151, 0.5);
}
/* dica "Como chegar →" no rodapé do card */
.v-office__hint {
  display: inline-block;
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-royal);
}

/* FIX menu cortado (2 causas raiz, diagnóstico 2026-07-20):
   1. .v-page-section é overflow:hidden — CLIPAVA o popover na borda da
      seção. Liberado só nesta seção (o popover pode vazar visualmente).
   2. .v-about-presence é stacking context permanente (o reveal mantém
      transform:translateY(0) + will-change) — o card do Integridade
      ([data-reveal] posterior, fundo opaco) pintava POR CIMA do menu.
      Com menu aberto o JS aplica .v-menu-layer, que eleva o CONTEXTO
      inteiro acima dos reveals seguintes. (position:fixed não serviria:
      com ancestral transformado, fixed ancora no ancestral.) */
#v-sobre-escritorios.v-page-section { overflow: visible; }
.v-about-presence.v-menu-layer {
  position: relative;
  z-index: 30;
}

.v-office__menu {
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  top: calc(100% - var(--space-2));
  z-index: 6;
  display: flex;
  flex-direction: column;
  padding: var(--space-2);
  background: #fff;
  border: 1px solid rgba(16, 26, 59, 0.12);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 40px rgba(16, 26, 59, 0.18);
}
/* display:flex acima venceria o [hidden] do estado fechado — reafirma. */
.v-office__menu[hidden] { display: none; }
/* Card com menu aberto sobe o stacking — o popover nunca fica atrás
   de irmãos/seções seguintes. */
.v-office--open { z-index: 20; }
/* Colisão com a viewport (JS): sem espaço abaixo, o menu abre pra CIMA
   do card (caso do card do ES, último da coluna, no mobile). */
.v-office__menu--up {
  top: auto;
  bottom: calc(100% - var(--space-2));
}
/* Último recurso (tela muito baixa: não cabe nem pra baixo nem pra
   cima): altura limitada pelo JS + scroll interno. */
.v-office__menu--scroll {
  overflow-y: auto;
}
.v-office__menu a {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--fs-14);
  color: var(--text-on-light);
  text-decoration: none;
}
.v-office__menu a:hover {
  background: var(--alpha-grn-10);
  color: var(--color-green-ink);
}
.v-office__menu a:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-green);
}

@media (prefers-reduced-motion: reduce) {
  .v-about-map__pin {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .v-about-map__tip { transition: none; }
}


/* Faixa CTA→rodapé removida globalmente em footer.css (onda 1 fundação):
   sem override por página (antes: /sobre). */


/* =============================================================
   SOBRE HERO — banner <picture> + texto sobreposto (v-about-hero)
   (2026-07-15) Substitui o page-hero navy limpo. Mesmo padrão dos
   heroes de produto (solution-hero): banner full-bleed como fundo +
   texto à esquerda no desktop; empilhado com texto no topo em mobile.
   Desktop 1900×485 (navy à esq. / arte à dir.); mobile 800×900
   (navy topo / arte base). Breakpoint 768px (pedido do briefing).
   ============================================================= */
.v-about-hero {
  padding-top: 0;              /* .v-site-main já reserva header+topbar */
  padding-bottom: 0;
  min-height: auto;
  /* overflow visível: a seção CRESCE para caber o texto em telas estreitas
     em vez de cortá-lo (o .v-page-hero genérico é overflow:hidden). */
  overflow: visible;
  /* aspect-ratio do banner: em telas largas a altura acompanha o 1900×485
     e o object-fit:cover NÃO corta na horizontal (navy à esq. e arte à
     dir. ficam onde foram desenhados). No tablet (768–1023) o banner é
     baixo — mantemos o texto compacto (abaixo) p/ caber sem cortar o
     banner, preservando o navy à esquerda. */
  aspect-ratio: 1900 / 485;
  background: var(--color-navy-deep);
  isolation: isolate;
}
.v-about-hero__pic {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.v-about-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;   /* mantém a arte + selo GPTW à direita */
  user-select: none;
  pointer-events: none;
}
.v-about-hero__inner {
  position: relative;
  z-index: 2;                      /* acima do banner (0) e do scrim (1) */
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
}
.v-about-hero__content {
  position: relative;
  text-align: left;
}
.v-page-hero.v-about-hero .v-eyebrow {
  color: var(--color-green);
  justify-content: flex-start;
  font-size: var(--fs-14);
  letter-spacing: 0.18em;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.v-page-hero.v-about-hero .v-eyebrow::before {
  background: var(--color-green);
  width: 28px;
  height: 2px;
}
.v-about-hero__title {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: var(--ls-snug);
  color: var(--color-white);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
/* CTA "Trabalhe conosco" no lugar do antigo subtitle (briefing MKT
   2026-08-04): ghost verde sobre o navy do banner. */
.v-about-hero__cta {
  margin-top: var(--space-2);
}
.v-about-hero__divider {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  z-index: 3;
  background: var(--gradient-divider-brand);
}

/* Desktop (≥768): texto ~42% à esquerda, arte à direita */
@media (min-width: 768px) {
  .v-about-hero__inner {
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  }
}

/* Tablet (768–1023): o banner paisagem é baixo aqui (~196px @768). Em vez
   de esticar a seção e cortar o banner (cover corta o navy-esq. e a arte
   encosta no texto), mantém-se o TEXTO COMPACTO para caber na altura do
   próprio banner — o navy à esquerda continua inteiro e o texto nunca
   colide com a arte. Título grande volta nos ≥1024 (base). */
@media (min-width: 768px) and (max-width: 1023px) {
  .v-about-hero__title {
    font-size: clamp(1.5rem, 0.5rem + 2vw, 1.9rem);
    margin-bottom: var(--space-2);
  }
  .v-page-hero.v-about-hero .v-eyebrow {
    margin-bottom: var(--space-2);
    font-size: var(--fs-13);
  }
  /* Botão compacto: a faixa tem ~196px @768 — o CTA no lugar do antigo
     subtitle não pode estourar a altura do banner. */
  .v-about-hero__cta {
    --btn-py: 0.45rem;
    --btn-px: 1rem;
    font-size: var(--fs-12);
    margin-top: var(--space-1);
  }
}

/* Mobile (≤767): banner retrato 800×900, texto no topo (centralizado) */
@media (max-width: 767px) {
  .v-about-hero {
    display: block;
    aspect-ratio: 8 / 9;
    min-height: auto;
  }
  .v-about-hero__img {
    object-position: center;       /* 8/9 = imagem inteira: navy topo + arte base */
  }
  .v-about-hero__inner {
    display: block;
    padding-top: clamp(2rem, 1rem + 3vw, 3.5rem);
    text-align: center;
  }
  .v-about-hero__content {
    text-align: center;
  }
  .v-page-hero.v-about-hero .v-eyebrow {
    justify-content: center;
    font-size: var(--fs-12);
    letter-spacing: 0.14em;
  }
  .v-about-hero__title {
    font-size: clamp(1.6rem, 1.2rem + 2vw, 2.1rem);
  }
  .v-about-hero__divider { display: none; }
}


/* =============================================================
   /BLOG — corpo claro (modelo atual). Filtros + cards em tema claro.
   (feedback MKT)
   ============================================================= */

/* Hero "capas em parallax" (canvas blog-hero.js) — banner próprio do blog. */
.v-blog-hero__cards {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;            /* acima do bg, abaixo do conteúdo (z:2) */
  pointer-events: none;  /* mousemove capturado no .v-page-hero */
}

body.page-template-page-blog .v-page-section {
  background: var(--surface-light);
}

/* Filtros adaptados ao claro (mesmo tratamento de /cases). */
body.page-template-page-blog .v-cases-filter__chip {
  border-color: rgba(16, 26, 59, 0.12);
  color: var(--text-on-light-muted);
  background: rgba(255, 255, 255, 0.5);
}
body.page-template-page-blog .v-cases-filter__chip:hover {
  border-color: rgba(0, 222, 151, 0.4);
  color: var(--text-on-light);
  background: rgba(0, 222, 151, 0.08);
}
body.page-template-page-blog .v-cases-filter__chip.is-active {
  background: var(--text-on-light);
  border-color: var(--text-on-light);
  color: var(--color-green);
  box-shadow: 0 4px 12px rgba(16, 26, 59, 0.18);
}
body.page-template-page-blog .v-cases-filter__search-input {
  background: #fff;
  border-color: rgba(16, 26, 59, 0.1);
  color: var(--text-on-light);
}
body.page-template-page-blog .v-cases-filter__search-input::placeholder {
  color: var(--text-on-light-muted);
}
body.page-template-page-blog .v-cases-filter__search-icon {
  color: var(--text-on-light-muted);
}
body.page-template-page-blog .v-cases-filter__search-input:focus {
  border-color: var(--color-green);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 222, 151, 0.18);
}

/* Cards do blog em branco: as regras vivem em components/blog-post.css
   (2026-07-29), escopadas para a listagem E para os relacionados do artigo —
   fonte única do "card em fundo claro". */

/* Faixa CTA→rodapé removida globalmente em footer.css (onda 1 fundação):
   sem override por página (antes: /blog). */


/* =============================================================
   16. PREMIAÇÕES INTERNACIONAIS — Sobre
   Tiles brancos com logo + selo "Partner of the Year" + anos —
   recriação do visual que existia em /cases (removido de lá em
   2a3858a). Classes próprias (.v-sobre-awards__*): o id/classes
   v-cases-partners seguem VIVOS na /cases com outro layout.
   À direita, os selos oficiais GPTW (briefing MKT 2026-08-04:
   prêmios à esquerda, GPTW à direita).
   ============================================================= */

/* Header da seção: só o h2 geral ("Reconhecimentos da nossa Excelência");
   o respiro até as colunas vem do margin do próprio __header. */
#v-sobre-premiacoes .v-page-section__heading {
  margin-bottom: 0;
}

/* Título de cada coluna (Premiações Internacionais / Selos GPTW). */
.v-sobre-awards__group-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-18);
  letter-spacing: var(--ls-snug);
  color: var(--text-on-light);
  text-align: center;
}

.v-sobre-awards__lede {
  margin: 0 0 var(--space-6);
  max-width: 48ch;
  font-size: var(--fs-15);
  line-height: var(--lh-relaxed);
  color: var(--text-on-light-muted);
  text-align: center;
}

/* Grade: coluna de prêmios à esquerda, coluna GPTW à direita (≥900px);
   empilha centrado no mobile. start: os títulos das colunas alinham
   no topo. */
.v-sobre-awards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: start;
  justify-items: center;
}
@media (min-width: 900px) {
  .v-sobre-awards {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(var(--space-8), 2vw + 1rem, var(--space-16));
  }
}

/* Coluna (título + conteúdo) — centraliza tudo. */
.v-sobre-awards__group {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.v-sobre-awards__logos {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 560px) {
  .v-sobre-awards__logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.v-sobre-awards__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-5);
  background: #fff;
  border: 1px solid rgba(16, 26, 59, 0.10);
  border-radius: var(--radius-lg);
  transition:
    box-shadow var(--dur-base) var(--ease-out-quart),
    transform  var(--dur-base) var(--ease-out-quart);
}
.v-sobre-awards__item:hover {
  box-shadow: 0 8px 24px rgba(16, 26, 59, 0.08);
  transform: translateY(-2px);
}

.v-sobre-awards__logo {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.v-sobre-awards__logo img {
  /* height DEFINIDA (não max-height): sas.svg não tem width/height
     intrínsecos (só viewBox) e, como flex item com só max-*, o Chrome
     resolve o tamanho pra 0×0 — o logo some. Altura fixa + width:auto
     resolvem pela razão do viewBox; max-width em px (percentual aqui
     cai no mesmo ciclo de shrink-to-fit). */
  height: 44px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  filter: saturate(0.92);
}

/* Selo de nível — label neutro com borda cinza sutil (receita herdada
   dos selos de /cases; fonte Mundial no corpo, fundo transparente).
   13px (não os 11px de /cases): pedido de fonte maior nos tiles,
   feedback MKT 2026-08-04. */
.v-sobre-awards__level {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  background: transparent;
  border: 1px solid rgba(16, 26, 59, 0.14);
  border-radius: var(--radius-xs);
  font-family: var(--font-body);
  font-size: 0.8125rem; /* 13px */
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--text-on-light);
  line-height: 1.25;
  text-align: center;
}

/* Anos de premiação — separados por · ; períodos em royal. */
.v-sobre-awards__years {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  font-family: var(--font-body);
  font-size: var(--fs-14);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-wide);
  color: var(--text-on-light-muted);
  text-align: center;
}
.v-sobre-awards__years > span:not([aria-hidden]) {
  color: var(--color-royal);
  font-weight: var(--fw-semibold);
}
.v-sobre-awards__years > span[aria-hidden] {
  color: rgba(16, 26, 59, 0.3);
}
/* Nos tiles estreitos do desktop os 2 períodos do SAS não cabem lado a
   lado — empilha como unidades inteiras e esconde o separador · . */
@media (min-width: 900px) {
  .v-sobre-awards__years {
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
  }
  .v-sobre-awards__years > span:not([aria-hidden]) {
    white-space: nowrap;
  }
  .v-sobre-awards__years > span[aria-hidden] {
    display: none;
  }
}

/* Selos GPTW — flâmulas com transparência; sombra leve pra destacar
   do cinza claro. A fileira fica em __badges (o __gptw virou coluna
   titulada, via __group). */
.v-sobre-awards__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  margin-top: var(--space-4);
}
.v-sobre-awards__badge {
  display: block;
}
.v-sobre-awards__badge img {
  display: block;
  width: clamp(130px, 9vw + 70px, 180px);
  height: auto;
  filter: drop-shadow(0 12px 26px rgba(16, 26, 59, 0.16));
}
.v-sobre-awards__gptw-caption {
  margin-top: var(--space-4);
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-on-light-muted);
}

@media (prefers-reduced-motion: reduce) {
  .v-sobre-awards__item { transition: none; }
  .v-sobre-awards__item:hover { transform: none; }
}


/* =============================================================
   17. CANAIS — Sobre (integridade · privacidade · conformidade)
   3 caixas coloridas lado a lado (briefing MKT 2026-08-04), todas
   linkando p/ /conformidade. O card inteiro é o <a>; cores chapadas
   dos tokens: verde (texto navy), navy e royal (texto branco).
   ============================================================= */
.v-sobre-canais__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 900px) {
  .v-sobre-canais__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.v-sobre-canal {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-7) var(--space-6);
  border-radius: var(--radius-xl);
  text-decoration: none;
  transition:
    transform  var(--dur-base) var(--ease-out-quart),
    box-shadow var(--dur-base) var(--ease-out-quart);
}
.v-sobre-canal:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(16, 26, 59, 0.18);
}

.v-sobre-canal__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-18);
  letter-spacing: var(--ls-snug);
  color: inherit;
}
.v-sobre-canal__sub {
  margin: 0;
  font-size: var(--fs-14);
  color: inherit;
  opacity: 0.82;
}
.v-sobre-canal__cta {
  margin-top: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  font-family: var(--font-display);
  font-size: var(--fs-13);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: inherit;
}
.v-sobre-canal__cta span[aria-hidden] {
  transition: transform var(--dur-base) var(--ease-out-quart);
}
.v-sobre-canal:hover .v-sobre-canal__cta span[aria-hidden] {
  transform: translateX(4px);
}

.v-sobre-canal--green { background: var(--color-green); color: var(--color-navy); }
.v-sobre-canal--navy  { background: var(--color-navy);  color: #fff; }
.v-sobre-canal--royal { background: var(--color-royal); color: #fff; }

/* Foco visível por cor de fundo: anel verde nos cards escuros, navy no
   card verde (padrão de contraste do .v-page-cta--green). */
.v-sobre-canal:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--surface-light), 0 0 0 6px var(--color-green);
}
.v-sobre-canal--green:focus-visible {
  box-shadow: 0 0 0 3px var(--surface-light), 0 0 0 6px var(--color-navy);
}

@media (prefers-reduced-motion: reduce) {
  .v-sobre-canal,
  .v-sobre-canal__cta span[aria-hidden] { transition: none; }
  .v-sobre-canal:hover { transform: none; }
}


/* =============================================================
   18. MODAL FALE CONOSCO — Sobre
   Mecânica do .v-gate-overlay (cases.css) com painel BRANCO no
   padrão do card de /contato: inputs claros, erro #dc2626 e
   painel de sucesso com check em verde-ink.
   ============================================================= */
.v-fale-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--section-px);
  background: rgba(8, 15, 34, 0.8);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity    var(--dur-base) var(--ease-out-quart),
    visibility 0s linear var(--dur-base);
}
.v-fale-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.v-fale-modal {
  position: relative;
  width: 100%;
  max-width: 560px;
  /* svh: no iOS o vh clássico resolve contra a viewport GRANDE e o modal
     estoura embaixo — svh segura; a linha vh acima fica de fallback p/
     browsers antigos. */
  max-height: calc(100vh - 2 * var(--space-6));
  max-height: calc(100svh - 2 * var(--space-6));
  overflow-y: auto;
  background: #fff;
  color: var(--text-on-light);
  border: 1px solid rgba(16, 26, 59, 0.08);
  border-radius: var(--radius-2xl);
  padding: var(--space-10) var(--space-8) var(--space-8);
  box-shadow: 0 30px 80px rgba(4, 16, 35, 0.4);
  transform: translateY(12px) scale(0.97);
  transition: transform var(--dur-slow) var(--ease-out-expo);
}
.v-fale-overlay.is-open .v-fale-modal {
  transform: translateY(0) scale(1);
}

.v-fale-modal__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--text-on-light-muted);
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out-quart),
    color      var(--dur-fast) var(--ease-out-quart);
}
.v-fale-modal__close:hover {
  background: rgba(16, 26, 59, 0.06);
  color: var(--text-on-light);
}
.v-fale-modal__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--alpha-grn-40);
}

.v-fale-modal__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem);
  letter-spacing: var(--ls-snug);
  color: var(--text-on-light);
}
.v-fale-modal__subtitle {
  margin: 0 0 var(--space-6);
  font-size: var(--fs-15);
  line-height: var(--lh-relaxed);
  color: var(--text-on-light-muted);
}

.v-fale-modal__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Inputs claros — receita do card branco de /contato (seção 9). */
.v-fale-modal .v-input {
  background: #fff;
  border: 1px solid rgba(16, 26, 59, 0.16);
  color: var(--text-on-light);
}
.v-fale-modal .v-input::placeholder {
  color: var(--text-on-light-muted);
}
.v-fale-modal .v-input:focus {
  border-color: var(--alpha-grn-40);
  box-shadow: 0 0 0 3px var(--alpha-grn-10);
}
.v-fale-modal .v-input--textarea {
  min-height: 110px;
  resize: vertical;
}
.v-fale-modal .v-checkbox__input {
  background-color: #fff;
  border-color: rgba(16, 26, 59, 0.28);
}
.v-fale-modal .v-checkbox__input:checked {
  background-color: var(--color-green);
  border-color: var(--color-green);
}
.v-fale-modal .v-checkbox__label {
  color: var(--text-on-light-muted);
}
.v-fale-modal .v-checkbox__label a {
  color: var(--color-green-ink);
}

.v-fale-modal__fields .v-btn--block {
  margin-top: var(--space-2);
}

/* Painel de sucesso — escondido até o submit (fale-conosco.js). */
.v-fale-modal__success {
  display: none;
  text-align: center;
  padding: var(--space-8) 0 var(--space-4);
}
.v-fale-modal__success.is-visible {
  display: block;
}
.v-fale-modal__success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: var(--alpha-grn-10);
  color: var(--color-green-ink);
}
.v-fale-modal__success h4 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  color: var(--text-on-light);
}
.v-fale-modal__success p {
  margin: 0;
  font-size: var(--fs-15);
  color: var(--text-on-light-muted);
}

/* Mobile: painel com respiro menor (o campo extra de assunto alonga o
   form — o scroll interno do painel resolve o restante). */
@media (max-width: 767px) {
  .v-fale-overlay {
    padding: var(--space-3);
  }
  .v-fale-modal {
    padding: var(--space-8) var(--space-5) var(--space-6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .v-fale-overlay,
  .v-fale-modal { transition: none; }
}


/* =============================================================
   19. MODAL REQUISIÇÃO DE TITULARES (LGPD) — Canais Oficiais
   Mesma receita do modal Fale Conosco (seção 18), painel mais
   LARGO (860px) para os campos e checkboxes em 2 colunas do
   esboço do MKT (2026-08-04). Abre pelo botão do card Requisição
   de Direitos no painel 02 (titular-form.js).
   ============================================================= */
.v-titular-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--section-px);
  background: rgba(8, 15, 34, 0.8);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity    var(--dur-base) var(--ease-out-quart),
    visibility 0s linear var(--dur-base);
}
.v-titular-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.v-titular-modal {
  position: relative;
  width: 100%;
  max-width: 860px;
  /* svh: no iOS o vh clássico resolve contra a viewport GRANDE e o modal
     estoura embaixo — svh segura; a linha vh acima fica de fallback p/
     browsers antigos. */
  max-height: calc(100vh - 2 * var(--space-6));
  max-height: calc(100svh - 2 * var(--space-6));
  overflow-y: auto;
  background: #fff;
  color: var(--text-on-light);
  border: 1px solid rgba(16, 26, 59, 0.08);
  border-radius: var(--radius-2xl);
  padding: var(--space-10) var(--space-8) var(--space-8);
  box-shadow: 0 30px 80px rgba(4, 16, 35, 0.4);
  transform: translateY(12px) scale(0.97);
  transition: transform var(--dur-slow) var(--ease-out-expo);
}
.v-titular-overlay.is-open .v-titular-modal {
  transform: translateY(0) scale(1);
}

.v-titular-modal__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--text-on-light-muted);
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out-quart),
    color      var(--dur-fast) var(--ease-out-quart);
}
.v-titular-modal__close:hover {
  background: rgba(16, 26, 59, 0.06);
  color: var(--text-on-light);
}
.v-titular-modal__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--alpha-grn-40);
}

.v-titular-modal__title {
  margin: 0 0 var(--space-2);
  padding-right: var(--space-8); /* não passar por baixo do X */
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem);
  letter-spacing: var(--ls-snug);
  color: var(--text-on-light);
}
.v-titular-modal__subtitle {
  margin: 0 0 var(--space-6);
  font-size: var(--fs-15);
  line-height: var(--lh-relaxed);
  color: var(--text-on-light-muted);
}

.v-titular-modal__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Nome/CPF/E-mail/Telefone em 2 colunas no desktop (esboço MKT). O corte
   720px é interno ao modal: abaixo disso o painel de 860px já encolheu
   com a viewport e as colunas espremeriam os placeholders. */
.v-titular-modal__grid {
  display: grid;
  gap: var(--space-3);
}
@media (min-width: 720px) {
  .v-titular-modal__grid {
    grid-template-columns: 1fr 1fr;
  }
}
.v-titular-modal__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
/* Label visível acima do campo (rodada 3) — mesma receita das labels do
   form de denúncia (.v-canal__field > label) e do legend abaixo. */
.v-titular-modal__field > label {
  font-family: var(--font-display);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  color: var(--text-on-light);
}

/* Grupo dos 6 tipos de solicitação — fieldset zerado + legend no padrão
   das labels do form de denúncia. */
.v-titular-modal__tipos {
  margin: var(--space-2) 0 0;
  padding: 0;
  border: 0;
}
.v-titular-modal__tipos legend {
  margin-bottom: var(--space-3);
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  color: var(--text-on-light);
}
.v-titular-modal__tipos-grid {
  display: grid;
  gap: var(--space-2) var(--space-5);
}
@media (min-width: 720px) {
  .v-titular-modal__tipos-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Inputs/checkboxes claros — receita do card branco de /contato. */
.v-titular-modal .v-input {
  background: #fff;
  border: 1px solid rgba(16, 26, 59, 0.16);
  color: var(--text-on-light);
}
.v-titular-modal .v-input::placeholder {
  color: var(--text-on-light-muted);
}
.v-titular-modal .v-input:focus {
  border-color: var(--alpha-grn-40);
  box-shadow: 0 0 0 3px var(--alpha-grn-10);
}
.v-titular-modal .v-input--textarea {
  min-height: 120px;
  resize: vertical;
}
.v-titular-modal .v-checkbox__input {
  background-color: #fff;
  border-color: rgba(16, 26, 59, 0.28);
}
.v-titular-modal .v-checkbox__input:checked {
  background-color: var(--color-green);
  border-color: var(--color-green);
}
.v-titular-modal .v-checkbox__label {
  color: var(--text-on-light-muted);
  font-size: var(--fs-14);
}

/* Nota de consentimento (texto com link, não checkbox — esboço MKT). */
.v-titular-modal__note {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-12);
  line-height: 1.6;
  color: var(--text-on-light-muted);
}
.v-titular-modal__note a {
  color: var(--color-green-ink);
}

.v-titular-modal__fields .v-btn--block {
  margin-top: var(--space-2);
}

/* Painel de sucesso — escondido até o submit (titular-form.js). */
.v-titular-modal__success {
  display: none;
  text-align: center;
  padding: var(--space-8) 0 var(--space-4);
}
.v-titular-modal__success.is-visible {
  display: block;
}
.v-titular-modal__success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: var(--alpha-grn-10);
  color: var(--color-green-ink);
}
.v-titular-modal__success h4 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  color: var(--text-on-light);
}
.v-titular-modal__success p {
  margin: 0;
  font-size: var(--fs-15);
  color: var(--text-on-light-muted);
}

@media (max-width: 767px) {
  .v-titular-overlay {
    padding: var(--space-3);
  }
  .v-titular-modal {
    padding: var(--space-8) var(--space-5) var(--space-6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .v-titular-overlay,
  .v-titular-modal { transition: none; }
}


/* === blog-post.css === */
/* =============================================================
   BLOG POST — single.php + complementos da listagem dinâmica
   Tipografia de leitura longa para conteúdo Gutenberg (o MKT
   publica pelo wp-admin), paginação da listagem e ajustes do
   card dinâmico. Espelho manual p/ o editor: editor-style.css
   (mudou aqui, mude lá).
   ============================================================= */

/* ---------- Hero do artigo --------------------------------- */

.v-single-hero { min-height: 40vh; }

.v-single-hero__meta {
  margin-top: var(--space-4);
  font-size: var(--fs-14);
  color: var(--text-muted);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-crisp);
}

.v-single-hero__meta-sep {
  margin-inline: var(--space-2);
  color: var(--text-faint);
}

/* ---------- Corpo do artigo (seção clara) ------------------- */

/* O artigo E os relacionados ficam no MESMO fundo claro (pedido MKT
   2026-07-29): antes a seção "Continue lendo" herdava o navy de
   .v-page-section e criava um salto de cor no meio da leitura. */
.v-single,
.v-single-related {
  background: var(--surface-light);
}

/* Divisão entre o fim do artigo e os relacionados: régua fina centralizada,
   no mesmo padrão de .v-cases-partners::before (cases-page.css). */
.v-single-related {
  position: relative;
  /* a régua ocupa o lugar do padding-top da seção */
  padding-top: clamp(2.5rem, 1.8rem + 1.6vw, 4rem);
}

.v-single-related::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, 60%);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(16, 26, 59, 0.12) 30%,
    rgba(16, 26, 59, 0.12) 70%,
    transparent 100%
  );
}

/* Título "Continue lendo": centralizado e legível no claro (a classe
   .v-page-section__heading da base só define espaçamento). */
body.single-post .v-page-section__heading {
  text-align: center;
  color: var(--text-on-light);
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  letter-spacing: var(--ls-snug);
  line-height: 1.15;
  margin-bottom: var(--space-8);
}

/* Imagem destacada emoldurada acima da coluna de leitura. */
.v-single__figure {
  max-width: 920px;
  margin: 0 auto var(--space-10);
}

.v-single__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  box-shadow: 0 10px 30px rgba(16, 26, 59, 0.10);
}

/* Coluna de leitura: medida confortável, tipografia generosa. */
.v-single .entry-content {
  max-width: 720px;
  margin-inline: auto;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: var(--fw-light);
  line-height: 1.75;
  color: var(--text-on-light-muted);
}

/* ---------- Tipografia do conteúdo -------------------------- */

.v-single .entry-content h2,
.v-single .entry-content h3,
.v-single .entry-content h4 {
  font-family: var(--font-display);
  color: var(--text-on-light);
  letter-spacing: var(--ls-snug);
  line-height: 1.25;
  margin: var(--space-10) 0 var(--space-4);
}

.v-single .entry-content h2 {
  font-weight: var(--fw-black);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem);
}

.v-single .entry-content h3 {
  font-weight: var(--fw-bold);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
}

.v-single .entry-content h4 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-16);
}

/* Cor explícita em p/li: o base.css pinta p com --text-secondary (cor de
   fundo ESCURO) e a regra de elemento vence a herança do container. */
.v-single .entry-content p,
.v-single .entry-content li {
  color: var(--text-on-light-muted);
}

.v-single .entry-content p {
  margin: 0 0 var(--space-5);
}

.v-single .entry-content a {
  color: var(--color-green-ink);   /* verde puro falha AA sobre claro */
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color var(--dur-base) var(--ease-out-quart);
}

.v-single .entry-content a:hover {
  color: var(--color-royal);
}

.v-single .entry-content strong {
  color: var(--text-on-light);
  font-weight: var(--fw-semibold);
}

.v-single .entry-content ul,
.v-single .entry-content ol {
  margin: 0 0 var(--space-5);
  padding-left: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.v-single .entry-content li::marker {
  color: var(--color-green-ink);
}

.v-single .entry-content hr,
.v-single .entry-content .wp-block-separator {
  border: 0;
  height: 1px;
  background: rgba(16, 26, 59, 0.12);
  margin: var(--space-10) auto;
}

/* Citação — fio verde à esquerda, no padrão dos destaques do site. */
.v-single .entry-content blockquote,
.v-single .entry-content .wp-block-quote {
  margin: var(--space-8) 0;
  padding: var(--space-4) var(--space-6);
  border-left: 3px solid var(--color-green);
  background: rgba(16, 26, 59, 0.04);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.v-single .entry-content blockquote p {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--text-on-light);
  font-size: var(--fs-16);
}

.v-single .entry-content blockquote p:last-child { margin-bottom: 0; }

.v-single .entry-content blockquote cite {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-style: normal;
  font-weight: var(--fw-light);
  font-size: var(--fs-13);
  color: var(--text-on-light-muted);
}

/* Imagens e legendas dentro do conteúdo */
.v-single .entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.v-single .entry-content figure {
  margin: var(--space-8) 0;
}

.v-single .entry-content figcaption,
.v-single .entry-content .wp-element-caption {
  margin-top: var(--space-2);
  font-size: var(--fs-13);
  color: var(--text-on-light-muted);
  font-weight: var(--fw-light);
  text-align: center;
}

/* Tabelas */
.v-single .entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-14);
  margin: var(--space-8) 0;
}

.v-single .entry-content th,
.v-single .entry-content td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid rgba(16, 26, 59, 0.12);
  text-align: left;
  vertical-align: top;
}

.v-single .entry-content thead th {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--text-on-light);
  background: rgba(16, 26, 59, 0.03);
  white-space: nowrap;
}

/* A tabela rola dentro do próprio wrapper em telas estreitas. */
.v-single .entry-content .wp-block-table {
  overflow-x: auto;
}

/* Código */
.v-single .entry-content code {
  font-size: 0.9em;
  background: rgba(16, 26, 59, 0.07);
  padding: 0.12em 0.4em;
  border-radius: var(--radius-xs);
}

.v-single .entry-content pre,
.v-single .entry-content .wp-block-code {
  background: var(--color-navy);
  color: #fff;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  margin: var(--space-8) 0;
  font-size: var(--fs-14);
  line-height: 1.6;
}

.v-single .entry-content pre code {
  background: none;
  padding: 0;
}

/* Embeds (YouTube etc.) — responsive-embeds cuida do aspect-ratio. */
.v-single .entry-content .wp-block-embed {
  margin: var(--space-8) 0;
}

.v-single .entry-content .wp-block-embed iframe {
  border-radius: var(--radius-lg);
}

/* Botão Gutenberg mapeado ao visual do .v-btn primário */
.v-single .entry-content .wp-block-button__link {
  background: var(--color-green);
  color: var(--color-navy);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  border-radius: var(--radius-md);
  padding: 0.8em 1.6em;
  text-decoration: none;
}

/* Larguras wide/full escapando da coluna de 720px */
.v-single .entry-content .alignwide {
  max-width: 920px;
  margin-inline: calc((920px - 720px) / -2);
}

.v-single .entry-content .alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
}

@media (max-width: 1023px) {
  .v-single .entry-content .alignwide {
    max-width: 100%;
    margin-inline: 0;
  }
}

/* Paleta do editor (has-*-color geradas pelo Gutenberg) */
.has-vert-navy-color      { color: #101A3B; }
.has-vert-green-color     { color: #00DE97; }
.has-vert-green-ink-color { color: #007D57; }
.has-vert-royal-color     { color: #1F50E0; }
.has-vert-white-color     { color: #FFFFFF; }
.has-vert-surface-color   { color: #E8E9EC; }
.has-vert-navy-background-color      { background-color: #101A3B; }
.has-vert-green-background-color     { background-color: #00DE97; }
.has-vert-green-ink-background-color { background-color: #007D57; }
.has-vert-royal-background-color     { background-color: #1F50E0; }
.has-vert-white-background-color     { background-color: #FFFFFF; }
.has-vert-surface-background-color   { background-color: #E8E9EC; }

/* ---------- Tags do artigo (fim do corpo) ------------------- */

.v-single__tags {
  max-width: 720px;
  margin: var(--space-10) auto 0;
  padding-top: var(--space-6);
  border-top: 1px solid rgba(16, 26, 59, 0.12);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.v-single__tags-label {
  font-family: var(--font-display);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--text-on-light-muted);
}

.v-single__tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Tipografia explícita e ereta (font-style/weight declarados): sem isso o
   chip herdava a fonte do body e renderizava com aparência inclinada
   (report do MKT 2026-07-29). Mesma receita dos chips de filtro do site. */
.v-single__tag {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(16, 26, 59, 0.16);
  background: #fff;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: var(--fw-bold);
  font-size: 0.69rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--text-on-light-muted);
  text-decoration: none;
  transition: border-color var(--dur-base) var(--ease-out-quart),
              color var(--dur-base) var(--ease-out-quart);
}

.v-single__tag:hover {
  border-color: var(--color-green-ink);
  color: var(--color-green-ink);
}


/* ---------- Archive (tag / categoria / data) ----------------
   Página de listagem por termo (archive.php), no padrão do /blog:
   hero navy + corpo claro. */

.v-archive-hero { min-height: 34vh; }

.v-archive {
  background: var(--surface-light);
}

.v-archive__back {
  margin-top: var(--space-8);
  text-align: center;
}


/* ---------- Card do blog em fundo claro ---------------------
   Fonte única (movido de page-internal.css em 2026-07-29): vale para a
   listagem /blog, para os relacionados do artigo e para os archives —
   todos em fundo claro. O thumb (gradiente navy) e o badge verde
   seguem como estão — viram um "cover" com bom contraste no card claro.
   ------------------------------------------------------------ */

body.page-template-page-blog .v-blog-card,
body.single-post .v-blog-card,
body.archive .v-blog-card {
  background: #fff;
  border-color: rgba(16, 26, 59, 0.08);
  box-shadow: 0 6px 20px rgba(16, 26, 59, 0.05);
}

body.page-template-page-blog .v-blog-card:hover,
body.single-post .v-blog-card:hover,
body.archive .v-blog-card:hover {
  border-color: rgba(0, 222, 151, 0.4);
  box-shadow: 0 14px 34px rgba(16, 26, 59, 0.1);
}

body.page-template-page-blog .v-blog-card__title,
body.single-post .v-blog-card__title,
body.archive .v-blog-card__title { color: var(--text-on-light); }

body.page-template-page-blog .v-blog-card__excerpt,
body.single-post .v-blog-card__excerpt,
body.archive .v-blog-card__excerpt { color: var(--text-on-light-muted); }

body.page-template-page-blog .v-blog-card__date,
body.single-post .v-blog-card__date,
body.archive .v-blog-card__date { color: var(--text-on-light-muted); }

body.page-template-page-blog .v-blog-card .v-btn--link,
body.single-post .v-blog-card .v-btn--link,
body.archive .v-blog-card .v-btn--link { color: var(--color-royal); }


/* ---------- Complementos da listagem dinâmica --------------- */

/* Título do card agora é link (post real) — herda o visual do h3. */
.v-blog-card__title a {
  color: inherit;
  text-decoration: none;
}

.v-blog-card__title a:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Estado vazio (nenhum post publicado ainda). */
.v-page-blog__empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-12) 0;
  font-size: var(--fs-15);
  font-weight: var(--fw-light);
  color: var(--text-muted);
}

body.page-template-page-blog .v-page-blog__empty,
body.archive .v-page-blog__empty {
  color: var(--text-on-light-muted);
}

/* Paginação (paginate_links) — chips no padrão do filtro. */
.v-pagination {
  margin-top: var(--space-10);
  display: flex;
  justify-content: center;
}

.v-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  height: 2.4rem;
  margin: 0 var(--space-1);
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid rgba(16, 26, 59, 0.16);
  font-family: var(--font-display);
  font-size: var(--fs-13);
  font-weight: var(--fw-bold);
  color: var(--text-on-light-muted);
  text-decoration: none;
  transition: border-color var(--dur-base) var(--ease-out-quart),
              color var(--dur-base) var(--ease-out-quart);
}

.v-pagination a.page-numbers:hover {
  border-color: var(--color-green-ink);
  color: var(--color-green-ink);
}

.v-pagination .page-numbers.current {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: #fff;
}

.v-pagination .page-numbers.dots {
  border: 0;
}

/* === cases-page.css === */
/* =============================================================
   CASES PAGE — Vert Analytics
   Grid de cases com filtros funcionais, busca, e cards
   modernizados. Animações de entrada, hover com borda accent,
   transições suaves de filtragem.
   ============================================================= */

/* ---------- Filtros ---------------------------------------- */

.v-cases-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}

@media (min-width: 768px) {
  .v-cases-filter {
    justify-content: space-between;
  }
}

/* Chips de filtro */
.v-cases-filter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.v-cases-filter__chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-pill);
  background: transparent;
  font-family: var(--font-display);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  cursor: pointer;
  transition:
    background   0.3s cubic-bezier(.16,1,.3,1),
    border-color 0.3s cubic-bezier(.16,1,.3,1),
    color        0.3s cubic-bezier(.16,1,.3,1),
    box-shadow   0.3s cubic-bezier(.16,1,.3,1);
}

.v-cases-filter__chip:hover {
  border-color: rgba(0,222,151,.25);
  color: var(--color-white);
  background: rgba(0,222,151,.04);
}

.v-cases-filter__chip.is-active {
  background: rgba(0,222,151,.12);
  border-color: var(--color-green);
  color: var(--color-green);
  box-shadow: 0 0 12px rgba(0,222,151,.15);
}

/* Campo de busca */
.v-cases-filter__search {
  position: relative;
  flex: 0 1 260px;
}

.v-cases-filter__search-icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.v-cases-filter__search-input {
  width: 100%;
  padding: var(--space-2) var(--space-4) var(--space-2) calc(var(--space-3) + 24px);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-14);
  color: var(--color-white);
  transition:
    border-color 0.3s ease,
    background   0.3s ease,
    box-shadow   0.3s ease;
}

.v-cases-filter__search-input::placeholder {
  color: var(--text-muted);
}

.v-cases-filter__search-input:focus {
  outline: none;
  border-color: rgba(0,222,151,.4);
  background: rgba(0,222,151,.04);
  box-shadow: 0 0 0 3px rgba(0,222,151,.1);
}

/* ---------- Grid ------------------------------------------- */

/* Flex (não grid) pra que a última linha incompleta fique CENTRALIZADA
   em vez de deixar espaço vazio à direita. */
.v-cases-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6);
}

/* Mobile: 1 card por linha */
.v-cases-grid > .v-cases-card {
  flex: 1 1 100%;
}

@media (min-width: 768px) {
  /* 2 por linha; sobra centralizada */
  .v-cases-grid > .v-cases-card {
    flex: 0 1 calc(50% - (var(--space-6) / 2));
  }
}

@media (min-width: 1280px) {
  /* 3 por linha; sobra (ex.: os 2 últimos) centralizada */
  .v-cases-grid > .v-cases-card {
    flex: 0 1 calc(33.333% - (2 * var(--space-6) / 3));
  }
}

/* ---------- Card ------------------------------------------- */

.v-cases-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
  /* Card é um <a> que linka pra página de detalhe — sem cara de link */
  text-decoration: none;
  color: inherit;
  transition:
    transform    0.4s cubic-bezier(.16,1,.3,1),
    border-color 0.4s cubic-bezier(.16,1,.3,1),
    box-shadow   0.4s cubic-bezier(.16,1,.3,1),
    opacity      0.35s ease;
}

.v-cases-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0,222,151,.25);
  box-shadow: 0 16px 40px rgba(0,0,0,.25), 0 0 20px rgba(0,222,151,.06);
}

/* Fade out/in durante filtragem */
.v-cases-card.is-hidden {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
  position: absolute;
  visibility: hidden;
}

/* ---------- Visual area (topo do card) --------------------- */

.v-cases-card__visual {
  position: relative;
  overflow: hidden;
  padding: var(--space-6) var(--space-5) var(--space-5);
  min-height: 180px;
  display: flex;
  flex-direction: column;
  /* (A métrica virou overlay absolute bottom-left — clone da home — então
     o visual não precisa mais de justify-content pra ancorá-la.) */
  background:
    linear-gradient(
      135deg,
      var(--color-navy-card) 0%,
      var(--color-navy-card-alt) 60%,
      rgba(0,222,151,.08) 100%
    );
  /* (border-bottom clara sob a foto removida — mesmo ajuste da home:
     nenhuma linha ao redor da foto.) */
}

/* Foto do cliente (banco de imagem) atrás do conteúdo + scrim escuro p/
   legibilidade do nome e da métrica. Sem foto, mantém o gradiente acima. */
.v-cases-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 0.6s cubic-bezier(.16,1,.3,1);
}
.v-cases-card:hover .v-cases-card__photo { transform: scale(1.05); }
.v-cases-card__visual:has(.v-cases-card__photo)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(157deg, rgba(8,15,34,.92) 0%, rgba(8,15,34,.6) 48%, rgba(8,15,34,.4) 100%);
}
/* Caixa de transparência atrás da métrica — RÉPLICA EXATA da home
   (.v-case-card__metric, cases.css): mesmo navy translúcido, mesmo blur,
   mesma borda alpha e mesmo arredondamento, ancorada bottom-left na foto. */
.v-cases-card__metric {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: rgba(8,15,34,.55);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-md);
  z-index: 3;
}

/* Nome do cliente — na ÁREA DE TEXTO do card (era marca d'água sobre a
   foto; migrado pro body no mesmo tratamento da home, onda 3). Exibido
   COMPLETO, sem truncamento; navy sobre o corpo BRANCO (100% espelho do
   .v-case-card__client da home desde a onda "corpo claro"). */
.v-cases-card__client {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-15);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-on-light);
  margin-bottom: var(--space-2);
  /* Sem nowrap/ellipsis — nome completo */
  line-height: 1.3;
}

/* Métrica de destaque — rótulo ACIMA, número ABAIXO (empilhados, mesma
   ordem da home; era value+label lado a lado em flex baseline). */
.v-cases-card__metric-value {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--color-green);
  /* Camada de TRANSPARÊNCIA — mesmo mecanismo da home (onda 3). O
     GRADIENTE de texto é exclusivo da home (decisão travada): aqui o
     número fica verde sólido + opacity, única diferença entre os dois. */
  opacity: 0.9;
}

/* Label — clone do .v-case-card__metric-label da home (10px, tracking
   .1em, branco 60%, nowrap, respiro de 4px até o número). */
.v-cases-card__metric-label {
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-bottom: 4px;
  white-space: nowrap;
}

/* ---------- Body (tags + título + download) -----------------
   Corpo CLARO, 100% espelho do card da home ("Provas que falam por
   si", .v-case-card__body em cases.css): mesmo fundo branco, mesmo
   padding, tags em royal sem chip, descrição display navy com hover
   royal. A borda gradient+ do CARD (contorno externo, double-bg no
   escopo da página) fica intocada — só o miolo do corpo clareia. */

.v-cases-card__body {
  padding: var(--space-5) var(--space-5) var(--space-4);
  background: #fff;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.v-cases-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

/* Tag = texto puro royal (espelho da home; era chip verde sobre navy) */
.v-cases-card__tag {
  font-family: var(--font-body);
  font-size: 0.6875rem;            /* 11px — mesmo da home */
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-royal);
}

.v-cases-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: 0.95rem;
  line-height: 1.6;
  letter-spacing: -0.005em;
  color: var(--text-on-light);
  margin-bottom: var(--space-4);
  flex: 1;
}

/* Hover: realce royal (espelho da home; era branco — sumiria no corpo claro) */
.v-cases-card:hover .v-cases-card__title {
  color: var(--color-royal);
}

/* Download / "Em breve" */
.v-cases-card__dl {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  padding: var(--space-1) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  /* Contorno em Gradient+ (double-background), miolo na cor do corpo —
     acompanhou o corpo claro (era --bg-card navy) pra manter o ar de
     pílula em contorno, não um bloco escuro solto no branco. */
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--gradient-brand) border-box;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: var(--fw-regular);   /* menos grosso — tira o ar pesado */
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-on-light-muted);
  text-decoration: none;
  transition: all 0.25s ease;
}

.v-cases-card__dl.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* O card inteiro é o link: a "pílula" Ver case preenche com o Gradient+ no hover */
.v-cases-card:hover .v-cases-card__dl {
  background:
    var(--gradient-brand) padding-box,
    var(--gradient-brand) border-box;
  color: var(--color-navy);
  border-color: transparent;
}
/* Seta centralizada no eixo ÓPTICO do texto: o box da linha inclui o
   espaço de descender (texto é uppercase, glifos "sobem" no box) e o
   flex center deixava o SVG ~1px abaixo do centro visual — medido em
   zoom 3×, mesmo fenômeno corrigido site-wide na onda 3 (lá com
   translateY em em; aqui o ícone é SVG, nudge de -1px). */
.v-cases-card__dl svg { flex-shrink: 0; transform: translateY(-1px); }

/* ---------- Reduced motion --------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .v-cases-card {
    transition: opacity 0.15s ease;
  }
  .v-cases-card:hover {
    transform: none;
  }
}

/* ---------- Destaque do card via âncora (#case-{id}) -------- */
/* Adicionado por cases-download.js ao chegar via /cases#case-{id}.
   Borda verde + halo que some sozinho (a classe é removida em 2s). */
.v-cases-card.is-target {
  border-color: var(--color-green);
  box-shadow: 0 0 0 3px rgba(0,222,151,.35), 0 16px 40px rgba(0,0,0,.25);
  animation: v-case-target-pulse 2s ease-out;
}
@keyframes v-case-target-pulse {
  0%   { box-shadow: 0 0 0 6px rgba(0,222,151,.5), 0 16px 40px rgba(0,0,0,.25); }
  100% { box-shadow: 0 0 0 3px rgba(0,222,151,.15), 0 16px 40px rgba(0,0,0,.25); }
}
@media (prefers-reduced-motion: reduce) {
  .v-cases-card.is-target { animation: none; }
}

/* ============================================================
   DOWNLOAD FORM — faixa de captura de lead (acessar case completo)
   Faixa escura horizontal: campos lado a lado em desktop, empilhados
   em mobile. Lead vai pro RD Station via /wp-json/vert/v1/lead.
   ============================================================ */

.v-case-download {
  padding-block: clamp(2.5rem, 1.5rem + 2vw, 4.5rem);
  background: var(--color-navy);
}

.v-case-download__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  background:
    linear-gradient(135deg, var(--color-navy-card) 0%, var(--color-navy-card-alt) 100%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl);
}

.v-case-download__header {
  margin-bottom: var(--space-6);
}

.v-case-download__title {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem);
  letter-spacing: var(--ls-snug);
  color: var(--color-white);
  margin-bottom: var(--space-2);
}

.v-case-download__subtitle {
  font-size: var(--fs-15);
  color: var(--text-secondary);
  font-weight: var(--fw-light);
}

.v-case-download__selected {
  margin-top: var(--space-3);
  font-size: var(--fs-14);
  color: var(--text-secondary);
}
.v-case-download__selected strong {
  color: var(--color-green);
  font-weight: var(--fw-bold);
}

/* Form: grid fluido. Mobile = 1 coluna; ≥768 = campos lado a lado. */
.v-case-download__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
}

.v-case-download__field {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
}

.v-case-download__field input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--alpha-wht-04);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--fs-15);
  font-family: var(--font-body);
  transition:
    border-color var(--dur-fast) var(--ease-out-quart),
    box-shadow   var(--dur-fast) var(--ease-out-quart);
}
.v-case-download__field input::placeholder {
  /* --text-muted, não --text-faint: mesmo ajuste AA do .v-input (cases.css). */
  color: var(--text-muted);
}
.v-case-download__field input:focus {
  outline: none;
  border-color: var(--alpha-grn-40);
  box-shadow: 0 0 0 3px var(--alpha-grn-10);
}

/* Consent + botão ocupam a linha inteira */
.v-case-download__consent {
  flex: 1 1 100%;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  font-size: var(--fs-13);
  color: var(--text-muted);
  line-height: 1.5;
}
.v-case-download__consent input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--color-green);
  cursor: pointer;
}
.v-case-download__consent a {
  color: var(--color-green);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.v-case-download__form .v-btn {
  flex: 1 1 100%;
}

/* ≥768: campos em linha, botão auto-width */
@media (min-width: 768px) {
  .v-case-download__field {
    flex: 1 1 180px;
  }
  .v-case-download__form .v-btn {
    flex: 0 0 auto;
  }
}

/* Status (sucesso/erro) inline abaixo do form */
.v-case-download__status {
  margin-top: var(--space-4);
  font-size: var(--fs-14);
  min-height: 1.2em;
  color: var(--text-secondary);
}
.v-case-download__status.is-success {
  color: var(--color-green);
  font-weight: var(--fw-semibold);
}
.v-case-download__status.is-error {
  color: #ff6b6b;
  font-weight: var(--fw-semibold);
}


/* =============================================================
   HERO CLARO — exclusivo da página /cases.
   Quebra de paradigma proposital: o restante do site é dark; o
   hero da página de cases é claro pra respirar e dar palco à foto
   do banner aprovado pelo MKT. Termina em divisor brand
   (royal→verde) que faz a transição pro grid escuro logo abaixo.
   ============================================================= */

.v-cases-hero {
  position: relative;
  overflow: hidden;
  /* SEM padding-top: o banner cola direto no header. O espaço
     antes ocupado pela "almofada" interna some, e a imagem (com
     top:0) preenche o topo da seção encostada no header navy. */
  padding-top: 0;
  padding-bottom: 0;
  min-height: auto;
  background: var(--surface-light);
  isolation: isolate;
}

/* ---------- Banner em background (100% original) -----------
   O banner aprovado pelo MKT (1310×328) tem TUDO embutido: fundo
   cinza claro à esquerda (palco), linhas diagonais azuis decorativas
   e foto da mulher+pasta à direita.
   Estratégia: ancoramos a imagem só na metade direita do hero
   (inset:0 0 0 38%) com object-fit:contain. Isso garante que:
     (1) o banner aparece 100% — sem corte, sem overlay, sem perda
         de cor (briefcase mantém o teal vibrante);
     (2) as linhas diagonais azuis da arte ficam confinadas ao lado
         direito do hero, NUNCA cruzando o texto à esquerda;
     (3) o fundo --surface-light do hero conversa visualmente com
         o palco claro embutido no próprio banner, criando a
         sensação de uma única superfície contínua. */
.v-cases-hero__img {
  position: absolute;
  /* inset:0 — cobre a seção inteira agora que o padding-top foi
     removido. Banner cola no header e desce até o divisor brand
     no fim do hero. */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  z-index: 0;
  user-select: none;
  pointer-events: none;
}

/* ---------- Layout interno: content à esquerda --------------
   Hero ganha proporção ≈4:1 (mesma do banner aprovado pelo MKT:
   1310×328). Com isso o object-fit:cover não precisa zoom-in
   exagerado e as linhas diagonais da arte renderizam no tamanho
   natural, exatamente como aparecem no Preview do MKT. */
.v-cases-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  /* 25vw mantém aspect ≈4:1 com a largura do viewport. Capamos em
     480px pra não esticar demais em telas largas. */
  min-height: clamp(260px, 25vw, 480px);
  padding-block: 0;
}

@media (min-width: 768px) {
  .v-cases-hero__inner {
    /* 50/50 — texto na metade esquerda do hero (sobre o palco claro
       do banner), foto na metade direita (mulher + pasta). */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* ---------- Texto -------------------------------------------- */
.v-cases-hero__content {
  position: relative;
  z-index: 2;
  text-align: left;
}

/* Eyebrow: royal blue + ligeiramente maior pra bater com modelo
   MKT. O base.css usa fs-12 + semibold; aqui subimos pra ~14px
   e mantemos o semibold pra ficar com mais presença visual. */
.v-page-hero.v-cases-hero .v-eyebrow {
  color: var(--color-royal);
  justify-content: flex-start;
  font-size: var(--fs-14);                 /* era fs-12 */
  gap: var(--space-3);                     /* mais respiro entre traço e texto */
  letter-spacing: 0.18em;                  /* tracking um pouco mais aberto */
}
.v-page-hero.v-cases-hero .v-eyebrow::before {
  background: var(--color-royal);
  width: 28px;                             /* traço um pouco maior também */
  height: 2px;
}

/* Título: All Round Gothic Regular (400), CAIXA ALTA.
   Iteração anterior tinha Thin (200), achatado demais comparado
   com o modelo do MKT — o Regular trouxe os traços de volta a um
   peso visualmente equivalente ao Preview. Kit Adobe disponível:
   200, 400, 500, 600, 700, 900 (sem 300). */
.v-cases-hero__title {
  font-family: var(--font-display);
  font-weight: 400;                        /* All Round Gothic Regular */
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text-on-light);
  margin-block: var(--space-3) var(--space-4);
}

/* Segunda linha do título — mesma família/peso, só quebra de linha. */
.v-cases-hero__title-em {
  display: block;
  color: var(--text-on-light);
  font-weight: 400;
}

/* Subtítulo: Mundial Regular (400). Voltei do Semibold (600)
   porque o modelo MKT tem traços mais finos do que 600 sugere.
   Kit Adobe Mundial disponível: 100, 200, 300, 400, 600, 700, 900
   (sem 500). */
.v-cases-hero__subtitle {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.0625rem);
  color: var(--text-on-light);
  line-height: 1.5;
  font-weight: 400;                        /* Mundial Regular */
  letter-spacing: 0;
  max-width: 38ch;
  margin: 0;
}

/* ---------- Mobile + tablet (≤1023px): padrão HOME -----------
   Mesma arquitetura do hero da home: DUAS ZONAS EMPILHADAS.
     - Zona TEXTO no topo (cinza claro = --surface-light)
     - Zona BANNER embaixo (banner mobile portrait, em flow)
   O palco claro do topo do banner se funde com o fundo cinza
   claro da zona de texto via máscara alpha — a transição fica
   invisível e a composição parece UMA arte só, igual ao Preview
   MKT (Site-Vert-Banner-páginas.png). */
@media (max-width: 1023px) {
  /* OVERLAY: a seção inteira ganha a proporção do banner mobile
     (800×900 = aspect 8/9). O banner cobre 100% da seção como
     bg absoluto, e o texto fica sobreposto no PALCO (a metade
     superior cinza claro do banner). Sem zonas separadas, sem
     gap intermediário — composição única igual ao mockup MKT. */
  .v-cases-hero {
    display: block;
    position: relative;
    padding-top: 0;
    padding-bottom: 0;
    min-height: auto;
    /* aspect-ratio igual ao banner: 800/900 = 8/9 ≈ 0.889
       Em 375 vira ~422px de altura (banner full sem corte).
       Em 768 vira ~864px de altura. */
    aspect-ratio: 8 / 9;
  }

  /* Banner é o BG absoluto da seção (volta a ser igual desktop,
     só que com aspect-ratio matching pra não cropar). */
  .v-cases-hero__pic {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  .v-cases-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    object-fit: cover;
    object-position: center;
  }

  /* Divisor brand escondido no mobile (transição é feita pela foto) */
  .v-cases-hero__divider { display: none; }

  /* Texto OVERLAID sobre o palco do banner (metade superior).
     z-index acima do pic. text-align center. padding-top é só o
     buffer (32-72px) — o header já tá reservado pelo main. */
  .v-cases-hero__inner {
    position: relative;
    z-index: 1;
    display: block;
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: clamp(2rem, 1rem + 2vw, 4.5rem);
    padding-bottom: 0;
    text-align: center;
  }

  /* Sobrescreve text-align:left do desktop em .v-cases-hero__content
     (o data-reveal wrapper) — sem essa override o título ficava
     puxado pra esquerda mesmo com inner centrado. */
  .v-cases-hero__content {
    text-align: center;
  }

  /* Subtítulo centralizado (margin auto + max-width apertada) */
  .v-cases-hero__subtitle {
    margin-inline: auto;
    max-width: 32ch;
  }

  /* Eyebrow centralizado + dimensões reduzidas pro mobile
     ("RESULTADOS COMPROVADOS" + letter-spacing 0.18em estourava
     a viewport 375 — aperta letter-spacing e desce fs). */
  .v-page-hero.v-cases-hero .v-eyebrow {
    justify-content: center;
    font-size: var(--fs-12);
    letter-spacing: 0.14em;
    gap: var(--space-2);
  }
  .v-page-hero.v-cases-hero .v-eyebrow::before {
    width: 22px;
  }

  /* Título no mobile: força tamanho menor que o clamp do desktop
     (clamp(1.9rem,...) tava clampando em 1.9rem = 30.4px, largo
     demais pra "CASES QUE FALAM" em 375). */
  .v-cases-hero__title {
    font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2rem);
    letter-spacing: 0;
  }
}

/* ---------- Tablet específico (768-1023) ---------------------
   No mobile puro (<768) o palco do banner é pequeno e o texto
   com padding-top 32-72px naturalmente fica centralizado nele.
   No tablet o banner cresce muito (aspect 8/9 a 768 wide = 864
   tall) e o palco vira ~475px — o texto com padding 32 fica
   ENCOSTADO no topo, deixando a metade do palco vazia abaixo.
   Aumentamos o padding-top pra centralizar o texto verticalmente
   na zona do palco. Fórmula linear calibrada: 31vw - 75px coloca
   o centro do texto no centro do palco em 768 (163px) e em 1023
   (242px), escalando linearmente. */
@media (min-width: 768px) and (max-width: 1023px) {
  .v-cases-hero__inner {
    padding-top: clamp(8rem, calc(31vw - 75px), 16rem);
  }
}

/* ---------- Divisor brand (transição light→dark) ------------ */
.v-cases-hero__divider {
  position: relative;
  z-index: 2;
  height: 2px;
  background: var(--gradient-divider-brand);
  /* Pequeno halo abaixo da linha pra a transição não ser dura
     quando entra na seção escura. */
  box-shadow: 0 0 24px rgba(31, 80, 224, 0.25),
              0 0 12px rgba(0, 222, 151, 0.2);
}


/* (O bloco "MÉTRICAS DOS CARDS — gradient+" foi removido nesta onda:
   decisão travada na onda 3 — o gradiente de texto nos números é
   EXCLUSIVO da home; aqui o valor fica verde sólido com a mesma camada
   de transparência (opacity .9, na regra base do __metric-value). */


/* =============================================================
   SEÇÃO DE CARDS — fundo claro (mesmo padrão da "Por que a Vert?"
   na home). Os cards dark com gradient+ na borda sobre o cinza
   claro criam contraste forte, e o CTA logo abaixo entra em verde
   pra "fechar" a leitura visual da página.
   Escopo: só dentro de body.page-template-page-cases pra não
   afetar outras páginas que reutilizem .v-page-section.
   ============================================================= */

body.page-template-page-cases #v-cases-section {
  background: var(--surface-light);
}

/* Chips de filtro adaptados pro fundo claro */
body.page-template-page-cases .v-cases-filter__chip {
  border-color: rgba(16, 26, 59, 0.12);
  color: var(--text-on-light-muted);
  background: rgba(255, 255, 255, 0.5);
}
body.page-template-page-cases .v-cases-filter__chip:hover {
  border-color: rgba(0, 222, 151, 0.4);
  color: var(--text-on-light);
  background: rgba(0, 222, 151, 0.08);
}
body.page-template-page-cases .v-cases-filter__chip.is-active {
  background: var(--text-on-light);   /* navy sólido */
  border-color: var(--text-on-light);
  color: var(--color-green);
  box-shadow: 0 4px 12px rgba(16, 26, 59, 0.18);
}

/* Search input adaptado pro claro */
body.page-template-page-cases .v-cases-filter__search-input {
  background: #fff;
  border-color: rgba(16, 26, 59, 0.1);
  color: var(--text-on-light);
}
body.page-template-page-cases .v-cases-filter__search-input::placeholder {
  color: var(--text-on-light-muted);
}
body.page-template-page-cases .v-cases-filter__search-icon {
  color: var(--text-on-light-muted);
}
body.page-template-page-cases .v-cases-filter__search-input:focus {
  border-color: var(--color-green);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 222, 151, 0.18);
}


/* =============================================================
   BORDA GRADIENT+ NOS CARDS — truque do "double background":
   2 camadas via background-clip — uma padding-box (cor do card)
   e outra border-box (gradiente). A borda transparente revela o
   gradiente nas bordas; o fundo sólido cobre o miolo. Funciona
   com qualquer border-radius, sem precisar de pseudo-elemento.
   ============================================================= */

body.page-template-page-cases .v-cases-card {
  border-color: transparent;
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    var(--gradient-brand) border-box;
  border: 1.5px solid transparent;
}

/* Hover: intensifica a borda + sombra colorida */
body.page-template-page-cases .v-cases-card:hover {
  border-color: transparent;
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    var(--gradient-brand) border-box;
  box-shadow:
    0 18px 44px rgba(16, 26, 59, 0.18),
    0 0 0 1px rgba(31, 80, 224, 0.15),
    0 0 24px rgba(0, 222, 151, 0.12);
}

/* Destaque via âncora (#case-{id}) — mantém comportamento atual
   mas usa o gradient+ no halo em vez de só verde. */
body.page-template-page-cases .v-cases-card.is-target {
  box-shadow:
    0 0 0 3px rgba(31, 80, 224, 0.35),
    0 0 0 6px rgba(0, 222, 151, 0.25),
    0 16px 40px rgba(0, 0, 0, 0.25);
}


/* =============================================================
   CTA "ACESSE O CASE COMPLETO" — fundo verde (palco).
   O card interno (form) permanece navy, criando contraste forte
   verde→navy. Padrão idêntico ao da home "Pronto para começar?".
   ============================================================= */

body.page-template-page-cases .v-case-download {
  background: var(--color-green);
  position: relative;
}

/* Linha divisória superior em navy translúcido — corta o verde
   do cinza-claro acima sem criar transição "chapada". */
body.page-template-page-cases .v-case-download::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(16, 26, 59, 0.12);
}

/* Card interno: força o fundo navy contra o verde (override do
   linear-gradient com transparência sutil que existia originalmente) */
body.page-template-page-cases .v-case-download__inner {
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-card-alt) 100%);
  border-color: rgba(16, 26, 59, 0.25);
  box-shadow: 0 20px 50px rgba(16, 26, 59, 0.25);
}


/* =============================================================
   PARCEIROS — bloco discreto entre o grid de cases e o CTA verde.
   Migrado de /parceiros em 2026-05-29 (pedido do MKT). Continuidade
   cromática com a faixa de cards (--surface-light). Desde 2026-08-04
   a composição é empilhada e centralizada (pedido do MKT): texto em
   cima, fileira única com os 7 tiles de logo embaixo (4 produtos +
   3 vendors, sem lede e sem selos de premiação). Abaixo de 1024px a
   fileira quebra em 2 por linha, última centralizada.

   Escopo: só na page-cases — desde 2026-07-09 é a única seção de
   parceiros do site (as páginas /parceiros e /reconhecimentos foram
   removidas). O id="v-cases-partners" é âncora de links externos.
   Prefixo: .v-cases-partners
   ============================================================= */

.v-cases-partners {
  background: var(--surface-light);
  padding-block: var(--section-py);
  color: var(--text-on-light);
  position: relative;
}

/* Linha divisória superior — separa do fim do grid de cards sem criar
   "corte chapado". Mesmo tratamento usado entre seções na home. */
.v-cases-partners::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, 60%);
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(16, 26, 59, 0.12) 30%,
    rgba(16, 26, 59, 0.12) 70%,
    transparent 100%);
}

/* Empilhado e centralizado: texto em cima, fileira de logos embaixo. */
.v-cases-partners__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  justify-items: center;
}

/* ---------- Introdução (centralizada) ---------- */

.v-cases-partners__intro {
  text-align: center;
  max-width: 46rem;
}

.v-cases-partners__title {
  margin: var(--space-3) 0 0; /* sem margem embaixo — o lede saiu, o título fecha a coluna */
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--text-on-light);
  text-wrap: balance;
}

/* "com as melhores tecnologias…" — quebra de linha forçada
   no desktop pra dar respiro tipográfico (não jogar tudo numa
   linha esticada). */
.v-cases-partners__title-em {
  display: block;
  color: var(--color-royal);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-snug);
}

/* (A régua em gradiente entre texto e logos — .v-cases-partners__rule —
   foi removida nesta onda, markup + coluna 1px do grid: a separação fica
   só pelo espaçamento, no espírito das remoções de divisor das ondas
   anteriores.) */

/* ---------- Coluna 2: lista de parceiros ---------- */

/* Flex: desktop (≥1024px) é fileira única com os 7 tiles; abaixo disso
   quebra em 2 por fileira, última centralizada (2+2+2+1). */
.v-cases-partners__logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
}

@media (min-width: 1024px) {
  .v-cases-partners__logos {
    flex-wrap: nowrap;
  }
}

.v-cases-partners__item {
  flex: 0 1 calc(50% - (var(--space-3) / 2));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  /* Quadrados brancos e neutros (feedback MKT 2026-06): sem contorno em
     gradiente, sem barra/realce — só uma borda cinza sutil. */
  border: 1px solid rgba(16, 26, 59, 0.10);
  background: #fff;
  border-radius: var(--radius-lg);
  position: relative;
  transition:
    box-shadow var(--dur-base) var(--ease-out-quart),
    transform var(--dur-base) var(--ease-out-quart);
}

@media (min-width: 1024px) {
  .v-cases-partners__item {
    flex: 1 1 0;
    min-width: 0;
  }
}

.v-cases-partners__item:hover {
  box-shadow: 0 8px 24px rgba(16, 26, 59, 0.08);
  transform: translateY(-2px);
}

.v-cases-partners__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  width: 100%;
}

.v-cases-partners__logo img {
  max-height: 44px;
  max-width: 70%;
  width: auto;
  height: auto;
  filter: saturate(0.92);
  transition: filter var(--dur-base) var(--ease-out-quart);
}

.v-cases-partners__item:hover .v-cases-partners__logo img {
  filter: saturate(1.05);
}

/* Badge OpenAI: retângulo largo com borda e texto próprios — no limite de
   70% da coluna o texto fica ilegível na régua de 8 cards. Só no desktop;
   no grid de 2 colunas (mobile/tablet) o tamanho padrão já funciona. */
@media (min-width: 1024px) {
  .v-cases-partners__item--badge {
    padding-inline: var(--space-2);
  }
  .v-cases-partners__item--badge .v-cases-partners__logo img {
    max-width: 100%;
    max-height: 56px;
  }
}

/* ---------- Acessibilidade / motion ---------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .v-cases-partners__item,
  .v-cases-partners__logo img {
    transition: none;
  }
  .v-cases-partners__item:hover {
    transform: none;
  }
}

/* Faixa CTA→rodapé removida globalmente em footer.css (onda 1 fundação):
   sem override por página — o CTA encosta direto no rodapé navy. */

/* === case-page.css === */
/* =============================================================
   CASE (detalhe) — páginas internas /cases/<slug>
   Hero escuro (navy) + corpo claro, espelhando as páginas de
   solução. Conteúdo vem de inc/cases-data.php via page-case.php.
   Prefixo: .v-case-*
   ============================================================= */

/* Acento das palavras em <em> nos títulos → gradiente da marca */
.v-case-hero__title em,
.v-case-results__title em,
.v-case-section__title em,
.v-case-cta .v-page-cta__title em {
  font-style: normal;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------- HERO (dark) ------------------------------------- */
.v-case-hero {
  position: relative;
  overflow: hidden;
  background: var(--bg-page);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}

.v-case-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}
@media (min-width: 900px) {
  .v-case-hero__inner {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr);
  }
}

.v-case-hero__title {
  font-family: var(--font-display);
  font-weight: 400;                 /* All Round Gothic Regular (igual aos heroes) */
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.25rem);
  line-height: 1.12;
  letter-spacing: 0.005em;
  color: var(--color-white);
  text-wrap: balance;
  margin: var(--space-3) 0 var(--space-4);
}

.v-case-hero__lead {
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 56ch;
  margin: 0 0 var(--space-6);
}

.v-case-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.v-case-hero__chip {
  font-family: var(--font-body);
  font-size: var(--fs-13);
  color: var(--text-secondary);
  padding: 0.3rem 0.75rem;
  /* Contorno em gradiente da marca (Gradient+) sobre o hero escuro:
     miolo na cor do hero (padding-box) + gradiente na borda (border-box). */
  border: 1px solid transparent;
  background:
    linear-gradient(var(--bg-page), var(--bg-page)) padding-box,
    var(--gradient-brand) border-box;
  border-radius: var(--radius-pill);
}
.v-case-hero__chip strong {
  color: var(--color-white);
  font-weight: var(--fw-semibold);
}

/* Número de destaque grande (coluna direita no desktop) */
.v-case-hero__highlight {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
@media (min-width: 900px) {
  .v-case-hero__highlight { align-items: flex-end; text-align: right; }
}
.v-case-hero__highlight-value {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(3rem, 2rem + 5vw, 5.5rem);
  line-height: 1;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.v-case-hero__highlight-label {
  font-family: var(--font-body);
  font-size: var(--fs-13);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: var(--space-2);
}

.v-case-hero__divider {
  height: 1px;
  background: var(--gradient-divider-brand);
  margin-top: clamp(2rem, 1rem + 3vw, 3.5rem);
}

/* ---------- VÍDEO (embed YouTube, claro) -------------------- */
.v-case-video { background: var(--surface-light); }

.v-case-video__frame {
  position: relative;
  width: 100%;
  max-width: 56rem;          /* ~900px, centralizado */
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* Contorno em gradiente da marca (double-background) */
  border: 1px solid transparent;
  background:
    linear-gradient(#000, #000) padding-box,
    var(--gradient-brand) border-box;
  box-shadow: 0 18px 44px rgba(16, 26, 59, 0.18);
}
.v-case-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Facade (capa + play) e player ocupam o mesmo box do frame — o iframe entra
   só no clique (video-facade.js). Mesma receita visual da Home (why.css). */
.v-case-video__facade,
.v-case-video__player {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
}

.v-case-video__facade {
  padding: 0;
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.v-case-video__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.v-case-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: rgba(16, 26, 59, 0.72);
  box-shadow: 0 8px 24px rgba(16, 26, 59, 0.35);
}

.v-case-video__play svg {
  width: 1.9rem;
  height: 1.9rem;
  margin-left: 3px;              /* acerta o centro óptico do triângulo */
  fill: #fff;
}

@media (prefers-reduced-motion: no-preference) {
  .v-case-video__play {
    transition: transform 0.2s ease, background-color 0.2s ease;
  }
  .v-case-video__facade:hover .v-case-video__play,
  .v-case-video__facade:focus-visible .v-case-video__play {
    transform: translate(-50%, -50%) scale(1.08);
    background: var(--color-royal);
  }
}

.v-case-video__facade:focus-visible {
  outline: 3px solid var(--color-royal);
  outline-offset: 3px;
}

/* Sem JS: link para o YouTube em vez de uma capa que não abre nada. */
.v-case-video__fallback {
  position: absolute;
  inset: auto 0 0 0;
  margin: 0;
  padding: var(--space-3);
  text-align: center;
  background: rgba(16, 26, 59, 0.72);
}

.v-case-video__fallback a { color: #fff; }

/* ---------- RESULTADOS (stats, claro) ----------------------- */
.v-case-results { background: var(--surface-light); }

.v-case-results__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--text-on-light);
  text-wrap: balance;
  max-width: 26ch;
  margin: 0 0 var(--space-8);
}

.v-case-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .v-case-stats { grid-template-columns: repeat(4, 1fr); }
}

/* Tile com contorno em gradiente da marca (igual aos cards de parceiros) */
.v-case-stat {
  padding: var(--space-6) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--gradient-brand) border-box;
}
.v-case-stat__value {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  line-height: 1;
  margin-bottom: var(--space-2);
  background: var(--gradient-brand);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.v-case-stat__label {
  font-family: var(--font-body);
  font-size: var(--fs-13);
  line-height: 1.4;
  color: var(--text-on-light-muted);
}

/* ---------- SEÇÕES NUMERADAS (claro) ------------------------ */
.v-case-section { background: var(--surface-light); }
/* Feedback MKT 2026-06: removido o degradê (bordas verdes translúcidas
   deixavam o navy da página vazar no topo/base). Seção alternada agora é
   chapada no mesmo cinza claro das demais. */
.v-case-section--alt {
  background: var(--surface-light);
}

/* Eyebrow (kicker) das seções claras → royal (verde teria pouco contraste) */
.v-case-section .v-eyebrow { color: var(--color-royal); }

/* Duas colunas no desktop (feedback MKT 2026-06): cabeçalho (número + título)
   à esquerda e o conteúdo à direita. Aplicado só a LISTA e PROSE — seções de
   CARDS usam largura total abaixo do cabeçalho (mais adiante), pois com muitos
   cards o split deixava um vazio grande à esquerda. Empilha no mobile. */
.v-case-section__body { min-width: 0; }
@media (min-width: 980px) {
  .v-case-section--list .v-container,
  .v-case-section--prose .v-container {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr);
    column-gap: var(--space-12);
    align-items: start;
  }
  .v-case-section--list .v-case-section__head,
  .v-case-section--prose .v-case-section__head {
    max-width: none;
    margin-bottom: 0;
  }
  .v-case-section--list .v-case-section__body .v-case-section__lead,
  .v-case-section--list .v-case-section__body .v-case-list,
  .v-case-section--prose .v-case-section__body .v-case-section__lead {
    max-width: none;
  }
  /* Prose: alinha o parágrafo da direita com o TÍTULO (e não com o eyebrow,
     que fica acima) — empurra o corpo p/ baixo pela altura do eyebrow. */
  .v-case-section--prose .v-case-section__body {
    padding-top: 2.1rem;
  }
}

.v-case-section__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: start;
  max-width: 62ch;
  margin-bottom: var(--space-8);
}
.v-case-section__num {
  font-family: var(--font-body);
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-green);
}
.v-case-section__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--text-on-light);
  text-wrap: balance;
  margin: var(--space-2) 0 0;
}

/* Parágrafo de apoio (seções 'prose' ou intro antes de lista/cards) */
.v-case-section__lead {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: 1.7;
  color: var(--text-on-light-muted);
  max-width: 62ch;
  margin: 0 0 var(--space-6);
  text-wrap: pretty;
}
/* Sem itens depois (prose), o lead fecha a seção: remove a margem inferior */
.v-case-section__lead:last-child { margin-bottom: 0; }

/* Lista numerada */
.v-case-list {
  list-style: none;
  counter-reset: vcase;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  max-width: 62ch;
}
.v-case-list__item {
  counter-increment: vcase;
  position: relative;
  padding-left: var(--space-8);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: 1.6;
  color: var(--text-on-light-muted);
}
.v-case-list__item::before {
  content: counter(vcase, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.15em;
  font-family: var(--font-body);
  font-size: var(--fs-13);
  font-weight: var(--fw-bold);
  color: var(--color-royal);
}
.v-case-list__strong {
  color: var(--text-on-light);
  font-weight: var(--fw-semibold);
}

/* Cards (2 colunas) — prefixo .v-cd-* (case-detail). Renomeado de
   .v-case-card para não colidir com o card de preview da home (cases.css),
   que usava o mesmo nome e vazava o fundo branco daqui pra lá. */
/* Cards em flex centrado e largura total (feedback MKT 2026-06): 1 / 2 / 3 por
   linha conforme a tela. justify-content:center faz a última linha incompleta
   (ex.: 3, 7 ou 9 cards) ficar CENTRALIZADA em vez de deixar um card isolado
   na esquerda. Cabeçalho fica em cima (seção de cards não usa o split). */
.v-cd-cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  max-width: none;
}
.v-cd-card {
  flex: 0 1 100%;
  min-width: 0;
  padding: var(--space-6);
  background: #fff;
  border: 1px solid rgba(16, 26, 59, 0.14);
  border-radius: var(--radius-lg);
  /* --dur-base zera sob prefers-reduced-motion (tokens.css) */
  transition:
    transform    var(--dur-base) ease,
    border-color var(--dur-base) ease,
    box-shadow   var(--dur-base) ease;
}
.v-cd-card:hover {
  transform: translateY(-2px);
  border-color: rgba(16, 26, 59, 0.22);
  box-shadow: 0 10px 24px rgba(16, 26, 59, 0.1);
}
@media (min-width: 768px) {
  .v-cd-card { flex-basis: calc((100% - var(--space-4)) / 2); }
}
@media (min-width: 1100px) {
  .v-cd-card { flex-basis: calc((100% - 2 * var(--space-4)) / 3); }
}
/* Exatamente 4 cards: 2x2 equilibrado em vez de "3 em cima + 1 sozinho
   embaixo" (ex.: FRENTES de /cases/caixa). Bloco centrado e contido. */
@media (min-width: 768px) {
  .v-cd-cards:has(.v-cd-card:nth-child(4):last-child) {
    max-width: 880px;
    margin-inline: auto;
  }
  .v-cd-cards:has(.v-cd-card:nth-child(4):last-child) .v-cd-card {
    flex-basis: calc((100% - var(--space-4)) / 2);
  }
}
.v-cd-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-16);
  color: var(--text-on-light);
  margin: 0 0 var(--space-2);
}
.v-cd-card__text {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  line-height: 1.6;
  color: var(--text-on-light-muted);
  margin: 0;
}

/* ---------- CTA --------------------------------------------- */
.v-case-cta .v-container { text-align: center; }
.v-case-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-6);
}

/* Botão "Baixar PDF" — destaque com Gradient+ na borda (double-background
   sobre o fundo escuro do CTA). Abre o gate de lead. */
.v-case-cta__pdf {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--bg-deep), var(--bg-deep)) padding-box,
    var(--gradient-brand) border-box;
  color: var(--color-white);
}
.v-case-cta__pdf svg { flex-shrink: 0; }

/* Hover/foco: preenche com o Gradient+ (texto navy), como a pílula "Ver case" */
.v-case-cta__pdf:hover,
.v-case-cta__pdf:focus-visible {
  background:
    var(--gradient-brand) padding-box,
    var(--gradient-brand) border-box;
  color: var(--color-navy);
  border-color: transparent;
}

/* ---------- CTA VERDE — extras do case ----------------------
   Decisão 2026-07-15: o CTA final do case adota o VERDE padrão (navy
   fundia com o rodapé navy). A receita base (fundo, título, subtítulo,
   input, botão primário e anel de foco navy) vive no modificador
   .v-page-cta--green (page-internal.css, seção 7), aplicado na section
   deste template. Aqui ficam só os dois extras próprios do case. */

/* O <em> do título usa clip-text no gradiente da marca (royal→verde,
   regra no topo deste arquivo) — a metade verde sumiria sobre o fundo
   verde. No CTA vira navy sólido. */
body.page-template-page-case .v-case-cta .v-page-cta__title em {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--color-navy);
}

/* Ghosts ("Baixar PDF do case" e "Ver todos os cases"): verde-sobre-verde
   e o double-background dark do __pdf são ilegíveis aqui — viram texto
   navy (9.6:1, AA) com outline navy a 55% (≥3:1 como componente de UI). */
body.page-template-page-case .v-page-cta .v-btn--ghost {
  background: transparent;
  color: var(--color-navy);
  border: 1.5px solid rgba(16, 26, 59, 0.55);
}
body.page-template-page-case .v-page-cta .v-btn--ghost:hover,
body.page-template-page-case .v-page-cta .v-btn--ghost:focus-visible {
  color: var(--color-navy);
  border-color: var(--color-navy);
  background: rgba(16, 26, 59, 0.08);
  box-shadow: none;
}

/* Faixa CTA→rodapé removida globalmente em footer.css (onda 1 fundação):
   sem override por página — o CTA encosta direto no rodapé navy. */

/* === rc18.css === */
/* =============================================================
   RC-18 — Landing de campanha (/rc-18)
   Resolução BCB nº 18 · governança de dados regulatória.
   Autocontida: hero dark + corpo claro + faixa de alerta escura,
   no design system da casa (tokens + gradient da marca).
   Prefixo: .v-rc-*
   ============================================================= */

/* Acento em <em> → gradiente da marca (títulos) */
.v-rc-hero__title em,
.v-rc-section__title em,
.v-rc-alert__value em {
  font-style: normal;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------- HERO (dark) ------------------------------------- */
.v-rc-hero {
  position: relative;
  overflow: hidden;
  background: var(--bg-page);
  /* Era clamp(3rem, 2rem+4vw, 6rem) (~90px/lado em 1440) — padronização
     de respiro das páginas internas de Soluções (feedback MKT 2026-08). */
  padding-block: clamp(2.5rem, 1.75rem + 2.5vw, 4.5rem);
}
.v-rc-hero__inner { max-width: 62rem; }

.v-rc-hero__title {
  font-family: var(--font-display);
  font-weight: 400;                 /* All Round Gothic Regular */
  font-size: clamp(2rem, 1.3rem + 3vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: 0.005em;
  color: var(--color-white);
  text-wrap: balance;
  margin: var(--space-3) 0 var(--space-4);
}
.v-rc-hero__subtitle {
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 58ch;
  margin: 0 0 var(--space-5);
}
.v-rc-hero__quote {
  margin: var(--space-6) 0 0;
  padding-left: var(--space-5);
  border-left: 2px solid;
  border-image: var(--gradient-brand) 1;
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 52ch;
}

/* ---------- SEÇÕES ------------------------------------------ */
.v-rc-section { background: var(--surface-light); }
/* Feedback MKT 2026-06: degradê removido (Exigências, Entregáveis e ROI).
   Seção alternada agora chapada no mesmo cinza claro das demais. */
.v-rc-section--alt {
  background: var(--surface-light);
}
/* Faixa "Custo da não-conformidade": navy mais profundo do RODAPÉ
   (--bg-deep, #080F22) em vez do navy da página (--bg-page, #101A3B),
   para o vermelho do valor ganhar destaque. */
.v-rc-section--dark { background: var(--bg-deep); }

.v-rc-section__head {
  max-width: 62ch;
  margin: 0 0 var(--space-8);
}
.v-rc-section__head--center {
  margin-inline: auto;
  text-align: center;
}
.v-rc-section .v-eyebrow { color: var(--color-royal); }
.v-rc-section--dark .v-eyebrow { color: var(--color-green); }

.v-rc-section__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--text-on-light);
  text-wrap: balance;
  margin: var(--space-2) 0 0;
}
.v-rc-section--dark .v-rc-section__title { color: var(--color-white); }

.v-rc-section__lead {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: 1.7;
  color: var(--text-on-light-muted);
  max-width: 60ch;
  margin: var(--space-3) 0 0;
  text-wrap: pretty;
}
.v-rc-section__head--center .v-rc-section__lead { margin-inline: auto; }
.v-rc-section--dark .v-rc-section__lead { color: var(--text-secondary); }

/* ---------- STATS (urgência + ROI) -------------------------- */
.v-rc-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .v-rc-stats { grid-template-columns: repeat(3, 1fr); }
}
.v-rc-stat {
  padding: var(--space-6) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--gradient-brand) border-box;
  text-align: center;
}
.v-rc-stat__value {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  line-height: 1;
  margin-bottom: var(--space-2);
  background: var(--gradient-brand);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.v-rc-stat__label {
  font-family: var(--font-body);
  font-size: var(--fs-13);
  line-height: 1.4;
  color: var(--text-on-light-muted);
}

/* ---------- CARDS (exigências / como resolvemos) ------------ */
.v-rc-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .v-rc-cards { grid-template-columns: repeat(2, 1fr); }
}
.v-rc-card {
  padding: var(--space-6);
  background: #fff;
  border: 1px solid rgba(16, 26, 59, 0.08);
  border-radius: var(--radius-lg);
}
.v-rc-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-16);
  color: var(--text-on-light);
  margin: 0 0 var(--space-2);
}
.v-rc-card__text {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  line-height: 1.6;
  color: var(--text-on-light-muted);
  margin: 0;
}

/* ---------- ENTREGÁVEIS (o que você recebe) ----------------- */
.v-rc-deliverables {
  display: grid;
  gap: var(--space-2);
  max-width: 52rem;
  margin-inline: auto;
}
.v-rc-deliverable {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: #fff;
  border: 1px solid rgba(16, 26, 59, 0.08);
  border-radius: var(--radius-lg);
}
.v-rc-deliverable__name {
  font-family: var(--font-body);
  font-size: var(--fs-15);
  color: var(--text-on-light);
}
.v-rc-cadence {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: var(--fs-12);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-royal);
  padding: 0.3rem 0.7rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--gradient-brand) border-box;
  white-space: nowrap;
}

/* ---------- CRONOGRAMA (3 fases) ---------------------------- */
.v-rc-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 900px) {
  .v-rc-steps { grid-template-columns: repeat(3, 1fr); }
}
.v-rc-step {
  padding: var(--space-6);
  background: #fff;
  border: 1px solid rgba(16, 26, 59, 0.08);
  border-radius: var(--radius-lg);
}
.v-rc-step__phase {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.v-rc-step__num {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-13);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-royal);
}
.v-rc-step__time {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  color: var(--text-on-light-muted);
}
.v-rc-step__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-16);
  color: var(--text-on-light);
  margin: 0 0 var(--space-3);
}
.v-rc-step__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.v-rc-step__list li {
  position: relative;
  padding-left: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--fs-14);
  color: var(--text-on-light-muted);
}
.v-rc-step__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gradient-brand);
}

/* ---------- ALERTA (custo da não-conformidade, dark) -------- */
.v-rc-alert {
  max-width: 56rem;
  margin-inline: auto;
  padding: var(--space-7) var(--space-6);
  border-radius: var(--radius-lg);
  /* Vermelho SÓLIDO (feedback MKT): o card precisa saltar do navy profundo
     da seção. Halo vermelho dá o "lift". Reds hardcoded como já era neste
     componente (o tema não tem token de vermelho). */
  background: #dc2626;
  border: none;
  box-shadow: 0 18px 50px rgba(220, 38, 38, 0.35);
  text-align: center;
}
.v-rc-alert__label {
  font-family: var(--font-body);
  font-size: var(--fs-13);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 var(--space-3);
}
.v-rc-alert__value {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  line-height: 1.15;
  color: #fff;
  margin: 0;
}
.v-rc-alert__value strong {
  color: #fff;
  font-weight: inherit;
}
.v-rc-alert__note {
  margin: var(--space-4) 0 0;
  font-family: var(--font-body);
  font-size: var(--fs-15);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
}

/* ---------- QR (faixa do CTA) ------------------------------- */
.v-rc-qr {
  display: inline-flex;            /* centralizado pelo text-align do CTA */
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding: var(--space-4);
  background: #fff;
  border-radius: var(--radius-lg);
  text-align: left;
}
.v-rc-qr__img {
  display: block;
  width: 120px;
  height: 120px;
  border-radius: var(--radius-sm);
}
.v-rc-qr__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 18ch;
}
.v-rc-qr__text strong {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-15);
  color: var(--text-on-light);
}
.v-rc-qr__text span {
  font-family: var(--font-body);
  font-size: var(--fs-13);
  line-height: 1.4;
  color: var(--text-on-light-muted);
}
@media (max-width: 480px) {
  .v-rc-qr { flex-direction: column; text-align: center; }
  .v-rc-qr__text { max-width: none; align-items: center; }
}

/* ---------- CTA FINAL --------------------------------------- */
/* Fundo verde da casa com botões navy: a receita vive no modificador
   .v-page-cta--green (page-internal.css, seção 7), aplicado direto na
   <section> deste template — que tem markup próprio (2 botões). */

/* === lang-notice.css === */
/* =============================================================
   AVISO DE IDIOMA — "este conteúdo só existe em português"
   Renderizado por template-parts/components/lang-notice.php, e SÓ quando a
   página está sendo servida em /en/. Aparece no topo do blog, dos posts e das
   três páginas jurídicas — o conteúdo que ficou fora da tradução.

   Tom deliberadamente DISCRETO: é uma nota de rodapé no topo, não um alerta.
   Quem chegou ali quer ler o conteúdo; o aviso explica e sai da frente.
   ============================================================= */

.v-lang-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
  padding: var(--space-3) var(--space-4);
  background: rgba(31, 80, 224, 0.06);
  border-left: 3px solid var(--color-royal);
  border-radius: var(--radius-md);
}

/* Ponto de atenção em CSS puro — um SVG só com viewBox dentro de flex
   colapsa para 0×0 (caso sas.svg). Um pseudo-círculo não tem esse risco. */
.v-lang-notice__icon {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.55em;
  border-radius: 50%;
  background: var(--color-royal);
}

.v-lang-notice__text {
  margin: 0;
  font-size: var(--fs-14);
  line-height: 1.6;
  color: var(--text-on-light-muted);
}

/* As páginas legais estilizam TODO <a> do corpo como link de texto
   (.v-privacy a → royal + border-bottom tracejado, especificidade 0,1,1).
   Aqui o link já é royal; só a borda tracejada precisa virar sublinhado
   normal para não destoar da faixa. */
.v-lang-notice .v-lang-notice__link {
  color: var(--color-royal);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  border-bottom: 0;
}
.v-lang-notice .v-lang-notice__link:hover,
.v-lang-notice .v-lang-notice__link:focus-visible {
  text-decoration: none;
}

/* Sobre fundo navy (o blog e o hub de canais têm corpo escuro em alguns
   pontos), o texto muted sobre claro sumiria. */
.v-page-section--dark .v-lang-notice,
.v-canal-hub .v-lang-notice {
  background: rgba(255, 255, 255, 0.06);
  border-left-color: var(--color-green);
}
.v-page-section--dark .v-lang-notice__text,
.v-canal-hub .v-lang-notice__text {
  color: var(--text-secondary);
}
.v-page-section--dark .v-lang-notice__icon,
.v-canal-hub .v-lang-notice__icon {
  background: var(--color-green);
}
.v-page-section--dark .v-lang-notice .v-lang-notice__link,
.v-canal-hub .v-lang-notice .v-lang-notice__link {
  color: var(--color-green);
}

/* === cookie-consent.css === */
/* =============================================================
   COOKIE CONSENT BANNER — Vert Analytics
   Barra fixa no bottom com glassmorphism sutil, slide-up.
   JS adiciona .is-visible para exibir.
   ============================================================= */

.v-cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  background: rgba(10, 15, 30, 0.92);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-top: 1px solid rgba(0, 222, 151, 0.1);
  padding: var(--space-5) var(--space-6);
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.v-cookie-banner.is-visible {
  transform: translateY(0);
}

/* Esconde WhatsApp quando banner ativo */
.v-cookie-banner.is-visible ~ .v-whatsapp {
  opacity: 0;
  pointer-events: none;
}

/* ---------- Layout interno -------------------------------- */

.v-cookie-banner__inner {
  max-width: 1200px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .v-cookie-banner__inner {
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
  }
}

/* ---------- Texto ----------------------------------------- */

.v-cookie-banner__text {
  font-size: var(--fs-14);
  color: var(--text-secondary);
  line-height: 1.5;
}

.v-cookie-banner__text p {
  margin: 0;
}

@media (min-width: 768px) {
  .v-cookie-banner__text {
    max-width: 340px;
    flex-shrink: 0;
  }
}

/* ---------- Toggles --------------------------------------- */

.v-cookie-banner__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
}

/* Toggle individual */
.v-cookie-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--fs-13);
  color: var(--text-secondary);
  user-select: none;
}

/* Esconde checkbox nativo */
.v-cookie-toggle__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Pill track */
.v-cookie-toggle__track {
  position: relative;
  width: 36px;
  height: 18px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
  transition: background 0.25s ease;
}

/* Bolinha */
.v-cookie-toggle__track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-white);
  transition: transform 0.25s ease;
}

/* Checked */
.v-cookie-toggle__input:checked + .v-cookie-toggle__track {
  background: var(--color-green);
}
.v-cookie-toggle__input:checked + .v-cookie-toggle__track::after {
  transform: translateX(18px);
}

/* Disabled (essenciais — sempre verde) */
.v-cookie-toggle__input:disabled + .v-cookie-toggle__track {
  background: var(--color-green);
  opacity: 0.65;
}
.v-cookie-toggle__input:disabled + .v-cookie-toggle__track::after {
  transform: translateX(18px);
}
.v-cookie-toggle__input:disabled ~ .v-cookie-toggle__label {
  opacity: 0.65;
}

/* Label text */
.v-cookie-toggle__label {
  line-height: 1.2;
  font-weight: var(--fw-regular);
}
.v-cookie-toggle__label small {
  font-size: var(--fs-12);
  color: var(--text-muted);
}

/* ---------- Botoes ---------------------------------------- */

.v-cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Rejeitar — link sutil */
.v-cookie-banner__reject {
  background: none;
  border: none;
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-13);
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s ease;
}
.v-cookie-banner__reject:hover {
  color: var(--text-secondary);
  text-decoration: underline;
}

/* ---------- Link de privacidade --------------------------- */

.v-cookie-banner__privacy {
  font-size: var(--fs-12);
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}
.v-cookie-banner__privacy:hover {
  color: var(--color-green);
  text-decoration: underline;
}

@media (min-width: 768px) {
  .v-cookie-banner__privacy {
    margin-left: auto;
    flex-shrink: 0;
  }
}

/* ---------- Mobile: empilhar tudo verticalmente ----------- */

@media (max-width: 767px) {
  .v-cookie-banner {
    padding: var(--space-4);
  }
  .v-cookie-banner__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .v-cookie-banner__actions .v-btn {
    width: 100%;
    justify-content: center;
  }
  .v-cookie-banner__reject {
    text-align: center;
    padding: var(--space-2);
  }
}

/* ---------- Reduced motion -------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .v-cookie-banner {
    transform: none;
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .v-cookie-banner.is-visible {
    opacity: 1;
  }
  .v-cookie-toggle__track::after {
    transition: none;
  }
}

/* =============================================================
   TEMA AZUL (ROYAL) TRANSLÚCIDO (feedback MKT)
   Liquid glass com o azul da marca no espírito do header (fundo
   translúcido + blur forte), letras claras. Botões e toggles ajustados
   p/ contraste sobre o azul.
   ============================================================= */

.v-cookie-banner {
  /* Liquid glass azul royal: fundo bem translúcido + blur forte (mesmo espírito
     do header). A base azul-escura a ~42% segura a leitura; o brilho royal por
     cima dá a identidade e a vibração de vidro (saturate alto). */
  background:
    linear-gradient(125deg, rgba(31, 80, 224, 0.34), rgba(43, 108, 255, 0.20)),
    rgba(8, 16, 48, 0.42);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

/* Texto claro — sombra leve garante leitura sobre o vidro translúcido,
   independente do que estiver passando atrás. */
.v-cookie-banner__text,
.v-cookie-toggle,
.v-cookie-banner__reject,
.v-cookie-banner__privacy {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
}
.v-cookie-banner__text       { color: rgba(255, 255, 255, 0.94); }
.v-cookie-toggle             { color: rgba(255, 255, 255, 0.94); }
.v-cookie-toggle__label small { color: rgba(255, 255, 255, 0.66); }
.v-cookie-banner__reject     { color: rgba(255, 255, 255, 0.82); }
.v-cookie-banner__reject:hover { color: #fff; }
.v-cookie-banner__privacy    { color: rgba(255, 255, 255, 0.76); }
.v-cookie-banner__privacy:hover { color: #fff; }

/* Toggles legíveis sobre o verde:
   off = pill translúcido claro + knob branco; on = pill branco + knob navy. */
.v-cookie-toggle__track { background: rgba(255, 255, 255, 0.25); }
.v-cookie-toggle__input:checked + .v-cookie-toggle__track,
.v-cookie-toggle__input:disabled + .v-cookie-toggle__track {
  background: #fff;
}
.v-cookie-toggle__input:checked + .v-cookie-toggle__track::after,
.v-cookie-toggle__input:disabled + .v-cookie-toggle__track::after {
  background: var(--color-navy);
}
.v-cookie-toggle__input:disabled + .v-cookie-toggle__track { opacity: 0.7; }

/* Botão primário: sólido branco (destaca o CTA no verde); ghost claro. */
.v-cookie-banner .v-btn--primary {
  background: #fff;
  color: var(--color-navy);
  box-shadow: none;
}
.v-cookie-banner .v-btn--primary:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(8, 15, 34, 0.25);
}
.v-cookie-banner .v-btn--ghost {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  background: transparent;
}
.v-cookie-banner .v-btn--ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* === whatsapp.css === */
/* =============================================================
   Botão flutuante do WhatsApp
   Fixo no canto inferior direito com pulse periódico.
   ============================================================= */

/* --- Botão principal --- */
.v-whatsapp {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 9990;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: #25d366;
  border-radius: 50%;
  color: white;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    opacity 0.3s ease;
  text-decoration: none;
  animation: v-whatsapp-pulse 20s ease-in-out infinite;
  animation-delay: 10s;
}

/* Mobile: botão maior, posição ajustada */
@media (max-width: 767px) {
  .v-whatsapp {
    width: 56px;
    height: 56px;
    bottom: var(--space-4);
    right: var(--space-4);
  }
}

/* Hover */
.v-whatsapp:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.5);
}

/* Active */
.v-whatsapp:active {
  transform: scale(0.95);
}

/* --- Ícone SVG --- */
.v-whatsapp__icon {
  width: 24px;
  height: 24px;
  display: block;
  fill: currentColor;
}

/* --- Tooltip --- */
.v-whatsapp__tooltip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 6px 12px;
  font-size: 0.75rem;
  white-space: nowrap;
  color: var(--text-secondary);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) ease;
}

.v-whatsapp:hover .v-whatsapp__tooltip {
  opacity: 1;
}

/* Mobile: tooltip aparece brevemente via JS (.is-showing) e depois faz fade-out */
@media (max-width: 767px) {
  .v-whatsapp__tooltip {
    /* Posicionar acima do botão no mobile (em vez de ao lado) */
    right: auto;
    left: 50%;
    top: auto;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
  }
  .v-whatsapp:hover .v-whatsapp__tooltip {
    opacity: 0;   /* desativar hover no mobile — controlado por JS */
  }
  .v-whatsapp__tooltip.is-showing {
    opacity: 1;
  }
}

/* --- Animação de pulse --- */
@keyframes v-whatsapp-pulse {
  /* Fica parado a maior parte do ciclo, pulsa 2x perto do meio */
  0%,
  45% {
    transform: scale(1);
  }
  48% {
    transform: scale(1.15);
  }
  52% {
    transform: scale(1);
  }
  55% {
    transform: scale(1.15);
  }
  59%,
  100% {
    transform: scale(1);
  }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .v-whatsapp {
    animation: none;
  }

  .v-whatsapp:hover {
    transform: none;
  }

  .v-whatsapp:active {
    transform: none;
  }
}

/* === why.css === */
/* =============================================================
   POR QUE EXISTIMOS — manifesto + vídeo institucional (home)
   Substitui a antiga seção de diferenciais (4 cards). Seção CLARA:
   body.home .v-section--light já dá fundo cinza, h2 navy e eyebrow
   royal. Layout: texto (eyebrow + título + subtítulo) à esquerda,
   vídeo horizontal menor à direita; empilha no mobile (vídeo
   abaixo). Prefixo: .v-why
   ============================================================= */

.v-why {
  overflow: hidden;
  padding-block: var(--section-py);
}

/* ---------- Citação / manifesto ---------------------------- */

.v-why__header {
  max-width: 62ch;
  margin-bottom: var(--space-10);
}
.v-why__header .v-eyebrow {
  margin-bottom: var(--space-4);
}
.v-why__statement {
  /* Mundial (corpo) em peso leve — alivia o bloco, que ficava pesado
     na display bold (feedback MKT 2026-06). */
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
  line-height: 1.3;
  letter-spacing: var(--ls-snug);
  text-wrap: balance;
  margin: 0;
}

/* ---------- Subtítulo ---------------------------------------- */

.v-why__subtitle {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--text-on-light-muted);
  margin: var(--space-5) 0 0;
  max-width: 56ch;
}

/* ---------- Vídeo institucional ---------------------------- */

/* Moldura com borda em gradiente da marca (padding-box/border-box) +
   sombra suave. overflow:hidden recorta o vídeo ao radius. */
.v-why__video {
  margin: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface-light), var(--surface-light)) padding-box,
    var(--gradient-brand) border-box;
  box-shadow: 0 20px 50px rgba(16, 26, 59, 0.18);
}

/* Facade (capa + play) e player (iframe injetado no clique) dividem o mesmo
   box para não haver salto de layout ao trocar um pelo outro. A proporção
   (16:9 landscape / 9:16 portrait) vem dos modificadores mais abaixo. */
.v-why__facade,
.v-why__player {
  position: relative;
  display: block;
  width: 100%;
  background: #000;
  overflow: hidden;
}
.v-why__facade {
  padding: 0;
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.v-why__facade-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Botão de play centralizado, disco com o triângulo da marca. */
.v-why__facade-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: rgba(16, 26, 59, 0.72);
  box-shadow: 0 8px 24px rgba(16, 26, 59, 0.35);
}
.v-why__facade-play svg {
  width: 1.9rem;
  height: 1.9rem;
  margin-left: 3px;              /* acerta o centro óptico do triângulo */
  fill: #fff;
}

/* Realce ao interagir (só onde movimento é bem-vindo). */
@media (prefers-reduced-motion: no-preference) {
  .v-why__facade-play {
    transition: transform 0.2s ease, background-color 0.2s ease;
  }
  .v-why__facade:hover .v-why__facade-play,
  .v-why__facade:focus-visible .v-why__facade-play {
    transform: translate(-50%, -50%) scale(1.08);
    background: var(--color-royal);
  }
}
.v-why__facade:focus-visible {
  outline: 3px solid var(--color-royal);
  outline-offset: 3px;
}

/* Iframe do YouTube preenche o box do player. */
.v-why__player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Vídeo horizontal (16:9) em todos os breakpoints — a variante
   vertical/portrait foi removida junto com o placeholder do Short. */
.v-why__facade--landscape,
.v-why__player--landscape { aspect-ratio: 16 / 9; }

.v-why__video-fallback {
  margin: 0;
  padding: var(--space-6);
  color: var(--text-on-light-muted);
  text-align: center;
}

/* Mobile (≤767): texto centralizado no topo, vídeo horizontal
   contido e centralizado abaixo. */
@media (max-width: 767px) {
  .v-why__header {
    max-width: none;
    text-align: center;              /* centra eyebrow + título */
    margin-bottom: var(--space-8);
  }
  .v-why__subtitle {
    margin-inline: auto;             /* centra o bloco (max-width 56ch) */
  }
  .v-why__video {
    max-width: 540px;
    margin-inline: auto;
  }
}

/* Tablet + desktop (≥768): texto à esquerda, vídeo horizontal menor
   à direita, centralizado vertical na altura do texto. */
@media (min-width: 768px) {
  .v-why .v-container {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    column-gap: var(--space-12);
    align-items: center;
  }
  .v-why__header {
    grid-column: 1;
    grid-row: 1;
    max-width: none;
    margin-bottom: 0;
  }
  .v-why__video {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    max-width: 680px;
    justify-self: end;
  }
}

@media (min-width: 1280px) {
  .v-why .v-container {
    column-gap: var(--space-16);
  }
}

/* === cta-final.css === */
/* =============================================================
   CTA FINAL — Vert Analytics (redesign)
   Card grande com gradient oficial (royal→verde), highlight no
   título, input integrado e botão com gradient + shimmer.
   Sem telefone, sem "resposta em 1 dia" (removidos a pedido).
   ============================================================= */

.v-cta-final {
  position: relative;
  background: var(--bg-page);
  overflow: hidden;
  /* Simétrico desde a fusão com o gancho (2026-07) — o padding-top
     assimétrico existia só por causa do card que "subia" por margin
     negativo sobre a seção anterior. */
  padding-block: var(--section-py);
}

/* Pattern de triângulos removido (MKT 2026-05) — fundo do CTA fica
   totalmente flat igual ao restante do site. Elemento PHP preservado
   no template para reativação futura. */
.v-cta-final__pattern {
  display: none;
}

/* Orbs de fundo removidos a pedido — versão clean.
   O gradient oficial aparece só nos elementos do card
   (linha superior, highlight do título, botão). */

/* ---------- Content wrapper (grid da faixa fundida) ---- */
/* Empilhado por padrão (intro em cima, card embaixo); 2 colunas só no
   desktop canônico (≥1280) — intro flexível à esquerda + card fixo à
   direita. O form pill interno mantém seu próprio breakpoint de 767px,
   independente deste grid. */

.v-cta-final__content {
  position: relative;
  z-index: 1;
  display: grid;
  /* minmax(0,1fr), não 1fr: o min-content do card (iframe do Turnstile,
     300px fixos, + padding) é maior que o container no mobile e faria o
     track estourar a viewport. Com min 0 o track trava no container e o
     widget segue contido pelo overflow do próprio card (comportamento
     que a seção sempre teve). */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10);
}

/* ---------- Intro (ex-gancho "Missão crítica") --------- */
/* Texto direto sobre a faixa verde — variante navy-sobre-verde, mesma
   receita do CTA verde das páginas de solução/Canal de Integridade
   (page-internal.css): título navy, apoio rgba(16,26,59,.72). Este
   componente só renderiza na home, onde o fundo é o verde da marca
   (override body.home em sections.css). */

.v-cta-final__intro {
  max-width: var(--content-narrow);
  margin-inline: auto;
  text-align: center;
}

.v-cta-final__intro-eyebrow {
  color: var(--color-navy);
}

.v-cta-final__intro-title {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--color-navy);
  margin: var(--space-3) 0 var(--space-4);
  text-wrap: balance;
}

.v-cta-final__intro-subtitle {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: rgba(16, 26, 59, 0.72);
  margin: 0 auto;
  max-width: 52ch;
}

/* Desktop: intro à esquerda (alinhado à esquerda) + card à direita */
@media (min-width: 1280px) {
  .v-cta-final__content {
    grid-template-columns: minmax(0, 1fr) 480px;
    gap: var(--space-16);
    align-items: center;
  }
  .v-cta-final__intro {
    max-width: none;
    margin-inline: 0;
    text-align: left;
  }
  .v-cta-final__intro-subtitle {
    margin-inline: 0;
  }
}

.v-cta-final__inner {
  position: relative;
  width: 100%;                   /* margens auto desligam o stretch do grid;
                                    100% devolve a largura cheia do track */
  max-width: 820px;              /* empilhado (<1280): card centrado */
  margin-inline: auto;
  padding: clamp(2.5rem, 2rem + 2vw, 4rem);
  text-align: center;
  background:
    linear-gradient(135deg,
      rgba(13,21,48,0.6) 0%,
      rgba(26,40,71,0.4) 100%);
  border-radius: var(--radius-2xl);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 24px 60px rgba(8,15,34,.4),
    inset 0 1px 0 var(--alpha-wht-06);
  overflow: hidden;
}

/* Contorno completo em gradiente da marca (Gradient+) ao redor do card.
   Máscara recorta o miolo (mantém o fundo translúcido + blur), sobrando
   só o anel de 1px no contorno — respeita o radius. */
.v-cta-final__inner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--gradient-brand);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* Desktop (≥1280): o card vira a coluna direita fixa (480px) do grid da
   faixa fundida — solta o max-width e estreita o padding horizontal pro
   pill input+botão não espremer. (Depois da regra base de propósito:
   mesma especificidade, a ordem decide.) */
@media (min-width: 1280px) {
  .v-cta-final__inner {
    max-width: none;
    padding: var(--space-10) var(--space-8);
  }
}

.v-cta-final__eyebrow {
  justify-content: center;
  margin-bottom: var(--space-4);
}

.v-cta-final__title {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-4);
  color: var(--color-white);
  text-wrap: balance;
}

/* Highlight com gradient oficial (royal → verde) */
.v-cta-final__highlight {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding: 0 0.06em;
  position: relative;
  display: inline-block;
}

.v-cta-final__highlight::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.04em;
  height: 2px;
  background: var(--gradient-brand);
  opacity: 0.4;
  border-radius: 2px;
}

.v-cta-final__subtitle {
  font-size: clamp(var(--fs-15), 0.95rem + 0.3vw, 1.08rem);
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
  font-weight: var(--fw-light);
  max-width: 540px;
  margin-inline: auto;
  line-height: 1.6;
}

/* ---------- Form --------------------------------------- */

.v-cta-final__form {
  max-width: 520px;
  margin-inline: auto;
}

/* Field wrapper — input + button em um único container pill */
.v-cta-final__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 6px;
  background: var(--color-navy-ink);
  border: 1px solid var(--alpha-wht-10);
  border-radius: var(--radius-pill);
  transition:
    border-color var(--dur-base) var(--ease-out-quart),
    box-shadow   var(--dur-base) var(--ease-out-quart);
}

.v-cta-final__field:focus-within {
  border-color: var(--alpha-grn-40);
  box-shadow:
    0 0 0 3px var(--alpha-grn-12),
    0 0 32px var(--alpha-grn-20);
}

/* Mobile (<768): quebra o wrapper pill em dois elementos independentes.
   Sem isso, o input + botão dividem o mesmo container e parecem "uma
   coisa só". Aqui o wrapper perde o estilo e o input ganha seu próprio
   pill — o botão (que já é pill) fica solto abaixo, com gap visível. */
@media (max-width: 767px) {
  .v-cta-final__field {
    background: transparent;
    border: 0;
    padding: 0;
    border-radius: 0;
    gap: var(--space-3);
  }
  .v-cta-final__field:focus-within {
    box-shadow: none;
  }
  .v-cta-final__input,
  .v-cta-final__input:focus,
  .v-cta-final__input:hover {
    background: var(--color-navy-ink);
    border: 1px solid var(--alpha-wht-10);
    border-radius: var(--radius-pill);
    padding: var(--space-3) var(--space-5);
    transition:
      border-color var(--dur-base) var(--ease-out-quart),
      box-shadow   var(--dur-base) var(--ease-out-quart);
  }
  .v-cta-final__input:focus {
    border-color: var(--alpha-grn-40);
    box-shadow:
      0 0 0 3px var(--alpha-grn-12),
      0 0 24px var(--alpha-grn-20);
  }
  .v-cta-final__submit {
    width: 100%;
    justify-content: center;
  }

  /* Eyebrow do intro é o único da home longo o bastante pra quebrar em
     2 linhas no mobile — o align-items:center do .v-eyebrow centraliza o
     traço (::before) na altura do bloco inteiro, descolando da 1ª linha.
     Alinha no topo e desce o traço até o meio da 1ª linha. */
  .v-cta-final__intro-eyebrow {
    align-items: flex-start;
  }
  .v-cta-final__intro-eyebrow::before {
    margin-top: 0.5em;
  }
}

/* Tablet+ (≥768): layout horizontal pill integrado (input + botão dentro
   do mesmo wrapper visual). Padrão moderno de newsletter inline. */
@media (min-width: 768px) {
  .v-cta-final__field {
    flex-direction: row;
    align-items: center;
  }
}

/* Input precisa zerar o visual padrão do .v-input (border, background,
   radius, shadow) pra não criar retângulo interno dentro do wrapper pill. */
.v-cta-final__input,
.v-cta-final__input:focus,
.v-cta-final__input:hover {
  flex: 1;
  border: 0;
  background: transparent;
  padding: var(--space-3) var(--space-5);
  color: var(--color-white);
  font-size: var(--fs-15);
  min-width: 0;
  border-radius: 0;
  box-shadow: none;
  outline: none;
}

.v-cta-final__input::placeholder {
  color: var(--text-muted);
}

.v-cta-final__input:-webkit-autofill,
.v-cta-final__input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--color-navy-ink) inset;
  -webkit-text-fill-color: var(--color-white);
  caret-color: var(--color-white);
  border-radius: 0;
}

/* ---------- Botão com gradient oficial + shimmer ------- */

.v-cta-final__submit {
  position: relative;
  overflow: hidden;
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-pill);
  background: var(--gradient-brand);
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-14);
  letter-spacing: var(--ls-crisp);
  white-space: nowrap;
  box-shadow:
    0 4px 16px var(--alpha-grn-25),
    0 0 0 1px var(--alpha-wht-08) inset;
  transition:
    transform  var(--dur-base) var(--ease-out-quart),
    box-shadow var(--dur-base) var(--ease-out-quart);
}

.v-cta-final__submit:hover {
  transform: translateY(-1px);
  box-shadow:
    0 6px 24px var(--alpha-grn-40),
    0 0 0 1px var(--alpha-wht-15) inset;
}

.v-cta-final__submit:active {
  transform: translateY(0);
}

/* Shimmer que atravessa no hover */
.v-cta-final__submit::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.35) 50%,
    transparent 100%);
  transform: skewX(-20deg);
  transition: left 0.7s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}

.v-cta-final__submit:hover::before,
.v-cta-final__submit:focus-visible::before {
  left: 120%;
}

/* ---------- Consent LGPD ------------------------------- */
.v-cta-final__consent {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  justify-content: center;
  margin-top: var(--space-4);
  font-size: var(--fs-13);
  color: var(--text-muted);
  text-align: left;
  max-width: 480px;
  margin-inline: auto;
}

.v-cta-final__consent .v-checkbox__label a {
  color: var(--color-green);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.v-cta-final__consent .v-checkbox__label a:hover {
  color: var(--color-white);
}

/* ---------- Reduced motion ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  .v-cta-final__submit::before { display: none; }
}

/* === error-404.css === */
/* =============================================================
   ERROR 404 — Vert Analytics
   Padrão atual do site (2026-08): seção CLARA (--surface-light)
   colada no header, como o hub /solucoes — o spacer global do
   .v-site-main (header.css) já compensa topbar + header, então
   a seção NÃO tem padding-top próprio. Dígitos com gradient
   brand, microanimação no load em CSS puro (não depende do
   reveal JS) — conteúdo aparece mesmo sem JS.
   ============================================================= */


/* =============================================================
   1. CONTAINER
   ============================================================= */

.v-error-404 {
  background: var(--surface-light);
  /* Preenche a viewport pra não pendurar o rodapé em telas altas.
     svh, não vh: no iOS o vh resolve contra a altura grande
     (padrão já documentado no projeto). */
  min-height: calc(100svh - var(--topbar-height, 0px) - var(--header-height));
  display: flex;
  align-items: center;
  color: var(--text-on-light);
}

@media (min-width: 1280px) {
  .v-error-404 {
    min-height: calc(100svh - var(--topbar-height, 0px) - var(--header-height-lg));
  }
}


/* =============================================================
   2. CONTEÚDO
   ============================================================= */

.v-error-404__content {
  text-align: center;
  padding-block: clamp(3rem, 2rem + 4vw, 5rem);
  max-width: 880px;
  margin-inline: auto;
}

.v-error-404__eyebrow {
  display: inline-flex;
  /* Acento verde legível sobre claro — mesmo padrão dos eyebrows
     de seção clara (green-ink, 5.2:1). */
  color: var(--color-green-ink);
  margin-bottom: var(--space-6);
  opacity: 0;
  animation: errorFadeUp var(--dur-slower) var(--ease-out-expo) 80ms forwards;
}


/* =============================================================
   3. DISPLAY DOS DÍGITOS — peça central da identidade
   ============================================================= */

.v-error-404__display {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: clamp(0.25rem, 0.5vw, 0.75rem);
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(7rem, 5rem + 14vw, 14rem);
  line-height: 0.9;
  letter-spacing: var(--ls-tight);
  margin-block: var(--space-2);
}

.v-error-404__digit {
  display: inline-block;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Fallback para navegadores que não suportam background-clip:text */
  -webkit-text-fill-color: transparent;
  opacity: 0;
  transform: scale(0.85) translateY(20px);
  animation: errorDigitIn 720ms var(--ease-out-expo) forwards;
}

/* Stagger entre os 3 dígitos — entra 4 → 0 → 4 com 100ms entre eles. */
.v-error-404__digit:nth-child(1) { animation-delay: 200ms; }
.v-error-404__digit:nth-child(2) { animation-delay: 320ms; }
.v-error-404__digit:nth-child(3) { animation-delay: 440ms; }


/* =============================================================
   4. LINHA DECORATIVA — "underline" da marca
   ============================================================= */

.v-error-404__line {
  width: clamp(80px, 12vw, 140px);
  height: 2px;
  margin: var(--space-5) auto var(--space-7);
  background: var(--gradient-brand);
  border-radius: 2px;
  transform-origin: left center;
  transform: scaleX(0);
  animation: errorLineExpand 600ms var(--ease-out-expo) 600ms forwards;
}


/* =============================================================
   5. TEXTO
   ============================================================= */

.v-error-404__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-snug);
  color: var(--text-on-light);
  margin: 0 0 var(--space-4);
  opacity: 0;
  animation: errorFadeUp var(--dur-slower) var(--ease-out-expo) 720ms forwards;
}

.v-error-404__subtitle {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: var(--lh-relaxed);
  color: var(--text-on-light-muted);
  max-width: 540px;
  margin: 0 auto var(--space-8);
  opacity: 0;
  animation: errorFadeUp var(--dur-slower) var(--ease-out-expo) 800ms forwards;
}


/* =============================================================
   6. AÇÕES PRINCIPAIS
   ============================================================= */

.v-error-404__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-12);
  opacity: 0;
  animation: errorFadeUp var(--dur-slower) var(--ease-out-expo) 880ms forwards;
}

/* Ghost no claro: a classe global (buttons.css) usa verde puro, que
   reprova sobre --surface-light — override escopado pra green-ink,
   sem tocar na classe global (que segue certa nos fundos escuros). */
.v-error-404 .v-btn--ghost {
  color: var(--color-green-ink);
  border-color: color-mix(in srgb, var(--color-green-ink) 45%, transparent);
}
.v-error-404 .v-btn--ghost:hover {
  color: var(--color-green-ink);
  border-color: var(--color-green-ink);
  background: var(--alpha-grn-08);
}


/* =============================================================
   7. CAMINHOS SUGERIDOS — cards brancos (padrão hub /solucoes)
   ============================================================= */

.v-error-404__suggestions {
  margin-top: var(--space-4);
}

.v-error-404__suggestions-label {
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--text-on-light-muted);
  margin: 0 0 var(--space-5);
  opacity: 0;
  animation: errorFadeUp var(--dur-slower) var(--ease-out-expo) 960ms forwards;
}

.v-error-404__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  text-align: left;
}

@media (min-width: 768px) {
  .v-error-404__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Fundo branco + borda/sombra com tint navy (nunca gray neutro) —
   mesmos valores dos cards claros do hub (solutions-hub.css). */
.v-error-404__card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-white);
  border: 1px solid rgba(16, 26, 59, 0.10);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 12px rgba(16, 26, 59, 0.05);
  text-decoration: none;
  color: var(--text-on-light);
  transition:
    transform var(--dur-base) var(--ease-out-quart),
    border-color var(--dur-base) var(--ease-out-quart),
    box-shadow var(--dur-base) var(--ease-out-quart);
  opacity: 0;
  animation: errorFadeUp var(--dur-slower) var(--ease-out-expo) forwards;
}

/* Stagger dos 4 cards. */
.v-error-404__card:nth-child(1) { animation-delay: 1040ms; }
.v-error-404__card:nth-child(2) { animation-delay: 1120ms; }
.v-error-404__card:nth-child(3) { animation-delay: 1200ms; }
.v-error-404__card:nth-child(4) { animation-delay: 1280ms; }

.v-error-404__card:hover {
  transform: translateY(-2px);
  border-color: var(--alpha-grn-30);
  box-shadow: 0 12px 28px rgba(16, 26, 59, 0.10);
}

.v-error-404__card:focus-visible {
  outline: none;
  border-color: var(--color-green);
  box-shadow: var(--focus-ring);
}

.v-error-404__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--gradient-brand);
  color: var(--color-white);
  flex-shrink: 0;
  box-shadow: 0 2px 8px var(--alpha-roy-15);
  transition:
    transform var(--dur-base) var(--ease-out-quart),
    box-shadow var(--dur-base) var(--ease-out-quart);
}

.v-error-404__card:hover .v-error-404__card-icon {
  transform: scale(1.06);
  box-shadow: 0 4px 14px var(--alpha-grn-30);
}

.v-error-404__card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.v-error-404__card-title {
  /* Display, não corpo: título de card segue o padrão do hub /solucoes.
     Mundial 600 aqui destoava (terminais angulosos no C/ç — feedback
     MKT 2026-08). */
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-15);
  line-height: var(--lh-snug);
  color: var(--text-on-light);
}

.v-error-404__card-desc {
  font-size: var(--fs-13);
  color: var(--text-on-light-muted);
  line-height: var(--lh-snug);
}

.v-error-404__card-arrow {
  font-family: var(--font-display);
  font-size: var(--fs-18);
  color: var(--text-on-light-muted);
  transition:
    color var(--dur-base) var(--ease-out-quart),
    transform var(--dur-base) var(--ease-out-quart);
}

.v-error-404__card:hover .v-error-404__card-arrow {
  color: var(--color-green-ink);
  transform: translateX(3px);
}


/* =============================================================
   8. KEYFRAMES
   ============================================================= */

@keyframes errorFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes errorDigitIn {
  from { opacity: 0; transform: scale(0.85) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes errorLineExpand {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}


/* =============================================================
   9. REDUCED MOTION — animações desligam, conteúdo visível
   ============================================================= */

@media (prefers-reduced-motion: reduce) {
  .v-error-404__eyebrow,
  .v-error-404__digit,
  .v-error-404__title,
  .v-error-404__subtitle,
  .v-error-404__actions,
  .v-error-404__suggestions-label,
  .v-error-404__card {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .v-error-404__line {
    transform: scaleX(1);
    animation: none;
  }
}

/* === sections.css === */
/* =============================================================
   SECTIONS — Ritmo visual da home (pedido MKT 2026-05-26, rodada 2;
   remapeado em 2026-07-13: seção Stats removida, Produtos virou
   CLARA, Cases virou AZUL e Diagnóstico virou CLARO).
   Contraste FORTE alternando seções CLARAS (cinza claro, texto
   escuro) com seções ESCURAS coloridas da identidade. Divisor em
   gradiente da marca no topo de cada seção. Tudo escopado em
   body.home (especificidade 0,2,x) pra sobrescrever os fundos dos
   componentes sem editá-los.

   Ritmo (top→bottom):
     Hero/Awards .. escuro (banner)
     Produtos ..... CLARO (cards escuros autocontidos por cima)
     Cases ........ AZUL da marca (navy-mid #1A3663)
     Diag ......... CLARO (card navy flutuando por cima)
     Why .......... CLARO
     CTA .......... verde (faixa fundida: intro navy-sobre-verde à
                    esquerda + card escuro do form à direita; o antigo
                    gancho navy foi absorvido aqui em 2026-07)
   ============================================================= */

/* ---------- Seções ESCURAS (navy base) --------------------- */
/* Cores base apenas (navy). O contraste/pausa vem da alternância com
   as seções CLARAS; verde/azul ficam só como acento (números, eyebrow,
   divisor). CTA mantém um navy mais profundo como âncora final. */
/* Cases: azul da marca em vez do navy chapado — o mesmo --color-navy-mid
   (#1A3663) que vestia Produtos até 2026-07, claramente mais azul que o
   --bg-page (#101A3B), mantendo texto branco legível. Os case cards
   (corpo branco + visual com foto/scrim) são autocontidos e não mudam.
   Alternativa mais vibrante: --color-blue-mid (#1751A5). */
body.home .v-cases {
  background: var(--color-navy-mid);
}
/* Diagnóstico: fundo CLARO com o card interno (gradiente navy próprio em
   diag-teaser.css) flutuando por cima — mesmo princípio do CTA final
   (card escuro sobre fundo colorido). De propósito SEM a classe
   .v-section--light no markup: o h2 vive DENTRO do card navy e precisa
   continuar branco (a regra de h2 claro pegaria ele). */
body.home .v-diag-teaser {
  /* Onda 3: fundo no MESMO azul do hero da home (o .v-hero__bg usa
     var(--color-navy) sólido — reutilizado aqui, sem azul novo). A
     distinção p/ o "Por que existimos" (claro) vem só da cor de fundo,
     sem linha divisória entre as duas seções. */
  background: var(--color-navy);
}
/* CTA final — faixa verde fundida (2026-07): o antigo gancho navy foi
   absorvido como bloco __intro (texto navy sobre verde, estilizado em
   cta-final.css) e o card do formulário segue escuro e opaco por cima,
   framado pelo verde. O divisor royal→verde volta a valer no topo (marca
   a ENTRADA da faixa — sobre o verde aparece o trecho royal). */
body.home .v-cta-final {
  background: var(--color-green);
}
body.home .v-cta-final .v-cta-final__inner {
  background: linear-gradient(135deg, var(--color-navy-card) 0%, var(--color-navy-card-alt) 100%);
}

/* ---------- Seções CLARAS (texto escuro) ------------------- */
body.home .v-section--light {
  background: var(--surface-light);
}
/* Títulos → navy (reseta qualquer text-fill herdado) */
body.home .v-section--light h2 {
  color: var(--text-on-light);
  -webkit-text-fill-color: var(--text-on-light);
}
/* Eyebrow verde → azul royal (contraste sobre o claro) */
body.home .v-section--light .v-eyebrow {
  color: var(--color-royal);
}

/* ---------- Produtos sobre fundo claro ---------------------- */
/* O conteúdo do DESTAQUE (.v-product-row__content) fica direto sobre a
   seção — texto sai do branco pro navy. Os cards da fila
   (.v-product-card) e os painéis de visual (dash/sol-art) são escuros
   autocontidos: não mudam. Badges e check-dots mantêm as cores de
   produto (acento decorativo; o texto do item é quem carrega o AA). */
body.home .v-products .v-product-row__title {
  color: var(--text-on-light);
}
body.home .v-products .v-product-row__desc {
  color: var(--text-on-light-muted);
}
body.home .v-products .v-product-row__features li {
  color: var(--text-on-light);
}
/* "Saiba mais" do destaque: verde puro dá 1.8:1 sobre o claro → royal
   (5.2:1), o mesmo acento das seções claras (eyebrow). green-ink foi
   testado e fica em ~4.2:1 sobre #E8E9EC (foi calibrado pra branco).
   O link dos cards da fila segue verde (o fundo do card é navy). */
body.home .v-products .v-product-row__link {
  color: var(--color-royal);
}
/* Controles do carrossel (setas/dots/pause) ficam direto no claro:
   os alphas BRANCOS do estilo base somem — viram alphas navy (mesma
   família rgba(16,26,59,…) das seções claras) + royal como acento. */
body.home .v-products .v-solcar__nav {
  border-color: rgba(16, 26, 59, 0.25);
  background: rgba(16, 26, 59, 0.04);
  color: var(--text-on-light);
}
body.home .v-products .v-solcar__nav:hover {
  border-color: var(--alpha-roy-40);
  background: var(--alpha-roy-10);
  color: var(--color-royal);
}
body.home .v-products .v-solcar__dot {
  background: rgba(16, 26, 59, 0.25);
}
body.home .v-products .v-solcar__dot:hover {
  background: rgba(16, 26, 59, 0.5);
}
body.home .v-products .v-solcar__dot.is-active {
  background: var(--color-royal);
  box-shadow: 0 0 8px var(--alpha-roy-40);
}
/* Separador da fila: o gradiente verde-alpha do estilo base não
   aparece sobre o claro — vira alpha navy. */
body.home .v-products .v-solcar__queue::before {
  background: linear-gradient(90deg,
    transparent 0%, rgba(16, 26, 59, 0.15) 50%, transparent 100%);
}

/* ---------- Divisor em gradiente no topo das seções --------
   Onda 3: o .v-why saiu da lista — a fronteira Diagnóstico ↔ "Por que
   existimos" flui SEM linha (a separação vem do contraste navy ↔ claro).
   Ajuste pós-onda 3: o .v-diag-teaser também saiu — a fronteira
   "Provas" ↔ "Diagnóstico" flui sem linha (ambas em navy; o card
   escuro destacado marca a seção). */
body.home .v-products,
body.home .v-cases,
body.home .v-cta-final {
  position: relative;
}
body.home .v-products::before,
body.home .v-cases::before,
body.home .v-cta-final::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gradient-divider-brand);
  z-index: 5;
  pointer-events: none;
}

/* (O antigo "encaixe gancho ↔ CTA final" por margin negativo foi removido
   em 2026-07: com a fusão das duas seções numa única faixa verde, o
   alinhamento passou a ser grid normal dentro de .v-cta-final__content —
   ver cta-final.css.) */

/* === responsive-fixes.css === */
/* =============================================================
   RESPONSIVE FIXES — Vert Analytics
   Correções de responsividade para mobile (375px) e tablet (768px).
   Importar DEPOIS de todos os componentes em main.css.
   ============================================================= */

/* =============================================================
   1. TOUCH TARGETS — mínimo 44px em mobile
   ============================================================= */

@media (max-width: 767px) {
  /* Checkbox: área de toque aumentada sem alterar visual */
  .v-checkbox {
    min-height: 44px;
    padding: var(--space-2) 0;
  }
  .v-checkbox__input {
    width: 22px;
    height: 22px;
    margin-top: 0;
  }
  .v-checkbox__label {
    font-size: var(--fs-13);    /* era fs-12, pouco legível no mobile */
  }

  /* Modal close: área maior */
  .v-gate-modal__close {
    width: 44px;
    height: 44px;
    top: var(--space-3);
    right: var(--space-3);
  }

  /* Footer social icons: 44px */
  .v-site-footer__social-link {
    width: 44px;
    height: 44px;
  }
  /* (.v-diff__nav removido na onda 2a — órfão de carrossel já retirado.) */
}

/* =============================================================
   2. MODAL — scroll no mobile
   ============================================================= */

@media (max-width: 767px) {
  .v-gate-modal {
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--space-6) var(--space-5);
    border-radius: var(--radius-xl);
  }

  .v-gate-overlay {
    padding: var(--space-3);
    align-items: flex-end;    /* modal sobe do bottom no mobile */
  }
}

/* =============================================================
   3. FONT SIZES — mínimo legível no mobile
   ============================================================= */

@media (max-width: 767px) {
  /* Dashboard labels do produto Main — era 9px/10px */
  .v-dash-axis {
    font-size: 11px;
  }
  .v-dash-metric-label {
    font-size: 11px;
  }

  /* Case card metric label e tags — era 10px */
  .v-case-card__metric-label {
    font-size: 11px;
  }
  .v-case-card__tag {
    font-size: 11px;
  }
}

/* =============================================================
   4. HERO — títulos e botões no mobile
   ============================================================= */

@media (max-width: 767px) {
  .v-page-hero__title {
    font-size: clamp(1.6rem, 1.2rem + 2vw, 2.2rem);
    word-break: break-word;
  }

  .v-page-hero__subtitle {
    font-size: var(--fs-14);
  }

  .v-page-hero__cta {
    width: 100%;
    justify-content: center;
  }

  /* Hero fold: auto height no mobile (não forçar 78vh) */
  .v-hero-fold {
    height: auto;
  }

  /* Partículas: simplificar no mobile (reduz nodes) */
  .v-page-hero__particles {
    opacity: 0.3;
  }
}

/* =============================================================
   5. SOLUÇÕES — carrossel e timeline no mobile
   ============================================================= */

@media (max-width: 767px) {
  /* (Carrossel de features removido na onda 2a — grid = 1 coluna no
     mobile, sem largura fixa de card.) */

  /* Timeline: vertical no mobile */
  .v-page-steps__grid {
    gap: var(--space-4);
  }

  .v-page-step {
    display: grid;
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto;
    text-align: left;
    gap: 0 var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
  }

  .v-page-step:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .v-page-step__num {
    grid-row: 1 / 3;
    margin: 0;
    align-self: center;
  }

  .v-page-step__title {
    align-self: end;
    margin-bottom: var(--space-1);
  }

  .v-page-step__desc {
    grid-column: 2;
  }
}

/* =============================================================
   6. CASES PAGE — filtros e grid no mobile
   ============================================================= */

@media (max-width: 767px) {
  /* Filtros: scroll horizontal */
  .v-cases-filter__chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--space-2);
  }
  .v-cases-filter__chips::-webkit-scrollbar {
    display: none;
  }

  .v-cases-filter__search {
    flex: 1 1 100%;
  }

  /* Grid: 1 coluna */
  .v-cases-grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================================
   7. CONTATO — form claro centrado (sidebar removida; vive no footer)
   ============================================================= */

@media (max-width: 767px) {
  .v-page-contact__form .v-input,
  .v-page-contact__form .v-input--textarea {
    width: 100%;
  }
}

/* =============================================================
   8. FOOTER — empilhado no mobile
   ============================================================= */

@media (max-width: 767px) {
  .v-site-footer__top {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    text-align: center;
  }

  .v-site-footer__brand {
    align-items: center;
    max-width: none;
  }

  .v-site-footer__social {
    justify-content: center;
  }

  .v-site-footer__col {
    align-items: center;
  }

  .v-site-footer__bottom {
    text-align: center;
  }
}

/* =============================================================
   9. BLOG — cards e filtros no mobile
   ============================================================= */

@media (max-width: 767px) {
  .v-page-blog__grid {
    grid-template-columns: 1fr;
  }

  /* Filtros do blog: scroll horizontal */
  .v-cases-filter__chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* =============================================================
   10. CALCULADORA — mobile
   ============================================================= */

@media (max-width: 374px) {
  .v-calc__body {
    padding: var(--space-5);
  }

  .v-calc__step {
    padding: var(--space-5);
  }

  .v-calc__gauge {
    width: 160px;
    height: 80px;
  }

  .v-calc__gate-fields {
    grid-template-columns: 1fr;
  }
}

/* =============================================================
   11. HEADER — CTA e menu no mobile
   ============================================================= */

/* A regra que escondia o CTA no mobile vivia DUPLICADA aqui e na seção 15.
   Consolidada na 15 em 2026-09-10, e mirando o botão em vez do grupo — o
   seletor de idioma também mora dentro do .v-site-header__cta, e escondia
   junto. Ver a seção 15. */

/* =============================================================
   12. GENERAL — safety nets
   ============================================================= */

/* Imagens nunca excedem container */
img {
  max-width: 100%;
  height: auto;
}

/* Botões nunca excedem viewport */
.v-btn {
  max-width: 100%;
}

/* Prevent text from creating horizontal scroll */
@media (max-width: 767px) {
  h1, h2, h3, h4, p, li, span, address {
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

/* =============================================================
   13. TEXTOS E CONTAINERS — anti-truncamento global
   ============================================================= */

/* Nenhum texto dentro de containers deve ter nowrap por padrao no mobile */
@media (max-width: 767px) {
  .v-page-hero__title,
  .v-page-hero__subtitle,
  .v-page-step__title,
  .v-page-step__desc,
  .v-page-feature__title,
  .v-page-feature__desc,
  .v-page-problem__title,
  .v-page-problem__text {
    white-space: normal !important;
    text-overflow: clip !important;
    overflow: visible !important;
    max-width: 100% !important;
  }

  /* Subtitulo do hero: remover qualquer max-width que force truncamento */
  .v-page-hero__subtitle {
    max-width: none;
  }

  /* Container padding: respeita --section-px do tokens (clamp ja garante 24px no mobile) */
}

/* =============================================================
   14. CASES PAGE — card layout mobile (anti-overlap)
   ============================================================= */

@media (max-width: 767px) {
  /* Cards dos cases: layout vertical sem sobreposicao */
  .v-cases-card__visual {
    min-height: 140px;
    padding: var(--space-4);
  }

  .v-cases-card__metric {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }

  .v-cases-card__metric-value {
    font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  }

  /* Botao "Em breve" / "PDF": posicao estatica, nao absolute */
  .v-cases-card__dl {
    margin-top: auto;
  }

  /* Case cards antigos (home page) — download btn sem absolute */
  .v-case-card__dl-btn {
    position: static;
    margin-top: var(--space-3);
    display: inline-flex;
  }

  .v-case-card__visual {
    min-height: 180px;
  }
  /* (Onda 3: o nome do cliente saiu da foto — regra de truncamento da
     marca d'água removida; o estilo novo vive em cases.css.) */
}

/* =============================================================
   15. HEADER CTA — esconder somente no mobile real (< 768px)
   ============================================================= */

/* Atualizado em 2026-05: a nav desktop agora aparece já em ≥ 768px
   (header fluido), então o CTA acompanha. Esconder só no mobile real.

   2026-09-10: mira o BOTÃO, não o grupo. O .v-site-header__cta é o wrapper
   que carrega o CTA E o seletor de idioma (PT/EN); esconder o wrapper
   levava o seletor embora e deixava o visitante de celular sem forma de
   trocar de idioma. O botão continua indo pro drawer no mobile. */
@media (max-width: 767px) {
  .v-site-header__cta .v-btn {
    display: none !important;
  }
}

/* Em tablet/laptop pequeno (768-1279px) a barra fica apertada com 5 itens + CTA.
   Compactar levemente o botão para tudo caber sem quebrar linha. Cobre toda a
   faixa "tablet bucket" do design system (bp-md..<bp-lg). */
@media (min-width: 768px) and (max-width: 1279px) {
  .v-site-header__cta .v-btn {
    --btn-py: 0.5rem;
    --btn-px: 0.875rem;
    font-size: 0.72rem;
  }
}

/* =============================================================
   16. PAGE INTERNAL — hero content no mobile
   ============================================================= */

@media (max-width: 767px) {
  /* Conteudo do hero: texto centrado, padding adequado */
  .v-page-hero__content {
    text-align: center;
    padding-inline: var(--space-2);
  }

  .v-page-hero__content .v-eyebrow {
    justify-content: center;
  }
  /* (.v-features-carousel padding removido na onda 2a — agora é grid.) */
}

/* =============================================================
   17. FILTER CHIPS — scroll horizontal forcado no mobile
   (fix: parent wrapper estava com wrap, bloqueando scroll)
   ============================================================= */

@media (max-width: 767px) {
  /* Chips + busca em LINHAS SEPARADAS no mobile.
     Chips: linha 1 (scroll horizontal full-width).
     Busca: linha 2 (full-width abaixo). */
  .v-cases-filter {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }
  .v-cases-filter__chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100%;
    /* Espaço extra à direita do último chip pra indicar que rolou até o fim */
    padding-right: var(--space-8);
    padding-bottom: var(--space-2);
    /* Fade mais agressivo (75%→100%) pra ser perceptível sobre navy escuro */
    -webkit-mask-image: linear-gradient(90deg, black 0%, black 75%, transparent 100%);
    mask-image: linear-gradient(90deg, black 0%, black 75%, transparent 100%);
    /* Scroll-snap pra UX táctil (snapa no início de cada chip) */
    scroll-snap-type: x proximity;
    scroll-padding-left: var(--space-1);
  }
  .v-cases-filter__chips::-webkit-scrollbar {
    display: none;
  }
  .v-cases-filter__chip {
    flex-shrink: 0;
    scroll-snap-align: start;
  }
  .v-cases-filter__search {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
  }
}

/* =============================================================
   18. GATE MODAL — inputs full width e close button realocado
   ============================================================= */

@media (max-width: 767px) {
  .v-gate-modal .v-input,
  .v-gate-modal .v-checkbox {
    width: 100%;
  }
  .v-gate-modal__close {
    top: var(--space-4);
    right: var(--space-4);
    z-index: 2;
  }
}

/* =============================================================
   19. CASE CARD DOWNLOAD BUTTON — sem overlap no mobile (CRITICAL)
   Visual area muda para flex column, todos os children estaticos,
   ordem natural no DOM define a pilha.
   ============================================================= */

@media (max-width: 767px) {
  .v-case-card__visual {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--space-4);
    min-height: 160px;
    gap: var(--space-3);
  }
  .v-case-card__metric,
  .v-case-card__dl-btn {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
  }
  .v-case-card__metric {
    align-self: stretch;
  }
  .v-case-card__dl-btn {
    align-self: flex-end;
    margin-top: auto;
  }
}

/* =============================================================
   20. CONTACT FORM — width 100% no wrapper
   ============================================================= */

@media (max-width: 767px) {
  .v-page-contact__form {
    width: 100%;
  }
  .v-page-contact__form .v-input,
  .v-page-contact__form textarea {
    width: 100%;
    max-width: 100%;
  }
}

/* (Seção 21 DIFFERENTIALS removida na onda 2a — .v-diff-slide__num era
   sobra de um carrossel de diferenciais já retirado; 0 uso no tema.) */

/* =============================================================
   22. WHATSAPP — transicao sincronizada com cookie banner
   Esconder IMEDIATAMENTE quando banner abre (sem overlap de 0.5s)
   ============================================================= */

.v-whatsapp {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    opacity 0.1s ease;      /* opacity mais rapida que cookie banner transform */
}

/* =============================================================
   23. CALCULATOR OPTIONS — min-height consistente (sem altura variavel)
   ============================================================= */

.v-calc__option {
  min-height: 60px;
}

/* =============================================================
   24. GAUGE — edge case < 375px (sub-bp-sm)
   ============================================================= */

@media (max-width: 374px) {
  .v-calc__gauge {
    width: 140px;
    height: 70px;
  }
  .v-calc__gauge-score {
    font-size: var(--fs-18);
  }
}

/* =============================================================
   25. (removido) STATS GRID — a seção Stats saiu da home em 2026-07
   junto com stats.css; o override de grid 2-col não tem mais alvo.
   ============================================================= */

/* =============================================================
   26. CONTAINER PADDING — unificar com tokens (sem override conflitante)
   Remove override manual para respeitar --section-px
   ============================================================= */

/* Sobrescrita anterior em .v-container removida
   (o clamp em --section-px ja cobre 24px no mobile). */