/* DZA — bundle de produção (gerado por scripts/build-css.sh). NÃO editar à mão; edite os parciais. */

/* ===== css/fonts.css ===== */
/* DZA — fontes auto-hospedadas (variable, subset latin). Gerado. */
@font-face{font-family:'Jost';font-style:normal;font-weight:400 700;font-display:swap;src:url('../assets/fonts/jost-var.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('../assets/fonts/inter-var.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ===== foundations/tokens.primitives.css ===== */
/* =============================================================================
   DZA Design System — Layer 1: PRIMITIVES
   -----------------------------------------------------------------------------
   Valores brutos, sem decisão de uso. Nenhum componente deve consumir estes
   tokens diretamente — eles alimentam a camada semântica (tokens.semantic.css).

   Cores de marca confirmadas no Manual de Identidade Visual DZA
   (Data Zoom Analytics):
     Azul   #0082C8  ·  R0  G130 B200  ·  CMYK 85/40/0/0   ·  hsl(201 100% 39%)
     Amarelo#FFC828  ·  R255 G200 B40  ·  CMYK 0/20/100/0  ·  hsl(45 100% 58%)
     Preto  #000000  ·  R0  G0   B0    ·  CMYK 75/70/65/90
   As cores de interface (ramps neutras/navy) derivam do modelo Pulsedesk.
   ============================================================================= */

:root {
  /* ---------------------------------------------------------------------------
     COR — ramps em HSL channels (compatível com shadcn/Tailwind).
     Cada ramp expõe `--p-<nome>-<peso>` como triplet "H S% L%".
     Use sempre via hsl(var(--p-...)) ou pela camada semântica.
     --------------------------------------------------------------------------- */

  /* Brand · Blue — 500 = #0082C8 (oficial) */
  --p-blue-50:  201 100% 96%;
  --p-blue-100: 201 100% 90%;
  --p-blue-200: 201 100% 80%;
  --p-blue-300: 201 100% 66%;
  --p-blue-400: 201 100% 52%;
  --p-blue-500: 201 100% 39%; /* #0082C8 */
  --p-blue-600: 201 100% 33%;
  --p-blue-700: 202 100% 27%;
  --p-blue-800: 203 95% 22%;
  --p-blue-900: 204 90% 17%;
  --p-blue-950: 205 90% 11%;

  /* Brand · Yellow — 500 = #FFC828 (oficial) */
  --p-yellow-50:  45 100% 96%;
  --p-yellow-100: 45 100% 88%;
  --p-yellow-200: 45 100% 78%;
  --p-yellow-300: 45 100% 68%;
  --p-yellow-400: 45 100% 62%;
  --p-yellow-500: 45 100% 58%; /* #FFC828 */
  --p-yellow-600: 40 95% 50%;
  --p-yellow-700: 35 92% 44%;
  --p-yellow-800: 32 90% 37%;
  --p-yellow-900: 28 88% 31%;

  /* Neutral · cool slate (harmoniza com o azul; base de superfícies e texto) */
  --p-neutral-0:   0 0% 100%;
  --p-neutral-50:  210 40% 98%;
  --p-neutral-100: 210 40% 96%;
  --p-neutral-200: 214 32% 91%;
  --p-neutral-300: 213 27% 84%;
  --p-neutral-400: 215 20% 65%;
  --p-neutral-500: 215 16% 47%;
  --p-neutral-600: 215 19% 35%;
  --p-neutral-700: 215 25% 27%;
  --p-neutral-800: 217 33% 17%;
  --p-neutral-900: 222 47% 11%;
  --p-neutral-950: 222 47% 6%;
  --p-neutral-1000: 222 60% 3%;

  /* Suporte semântico (status) */
  --p-success-400: 160 72% 45%;
  --p-success-500: 160 84% 39%;
  --p-success-600: 161 88% 30%;
  --p-warning-400: 38 95% 58%;
  --p-warning-500: 38 92% 50%;
  --p-warning-600: 32 90% 44%;
  --p-danger-400:  0 84% 67%;
  --p-danger-500:  0 84% 60%;
  --p-danger-600:  0 74% 50%;
  --p-info-400:    199 89% 55%;
  --p-info-500:    199 89% 48%;
  --p-info-600:    200 90% 40%;

  /* ---------------------------------------------------------------------------
     TIPOGRAFIA
     Web: Jost (substituta geométrica de Century Gothic, fonte oficial de marca).
     Mantenha "Century Gothic" no stack para ambientes que a tenham licenciada.
     --------------------------------------------------------------------------- */
  --p-font-heading: "Jost", "Century Gothic", "Plus Jakarta Sans", system-ui, sans-serif;
  --p-font-body:    "Inter", "Geist", system-ui, -apple-system, sans-serif;
  --p-font-display: "Jost", "Steiner", "Century Gothic", system-ui, sans-serif;
  --p-font-mono:    "Geist Mono", "SFMono-Regular", ui-monospace, Consolas, monospace;

  /* Escala tipográfica fluida (clamp) — modular ~1.2 / 1.25 */
  --p-text-xs:   0.75rem;
  --p-text-sm:   0.875rem;
  --p-text-base: 1rem;
  --p-text-md:   1.0625rem;
  --p-text-lg:   1.25rem;
  --p-text-xl:   1.5rem;
  --p-text-2xl:  clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
  --p-text-3xl:  clamp(2.25rem, 1.7rem + 2.2vw, 3rem);
  --p-text-4xl:  clamp(2.75rem, 1.9rem + 3.4vw, 4rem);
  --p-text-5xl:  clamp(3.25rem, 2rem + 5vw, 5.75rem);

  --p-leading-tight:   1.08;
  --p-leading-snug:    1.25;
  --p-leading-normal:  1.55;
  --p-leading-relaxed: 1.75;

  --p-tracking-tight:  -0.02em;
  --p-tracking-normal: 0;
  --p-tracking-wide:   0.04em;
  --p-tracking-eyebrow: 0.12em;

  --p-weight-light:    300;
  --p-weight-regular:  400;
  --p-weight-medium:   500;
  --p-weight-semibold: 600;
  --p-weight-bold:     700;

  /* ---------------------------------------------------------------------------
     ESPAÇO — escala 4px/8px
     --------------------------------------------------------------------------- */
  --p-space-0:  0;
  --p-space-1:  0.25rem;
  --p-space-2:  0.5rem;
  --p-space-3:  0.75rem;
  --p-space-4:  1rem;
  --p-space-5:  1.25rem;
  --p-space-6:  1.5rem;
  --p-space-8:  2rem;
  --p-space-10: 2.5rem;
  --p-space-12: 3rem;
  --p-space-16: 4rem;
  --p-space-20: 5rem;
  --p-space-24: 6rem;
  --p-space-32: 8rem;

  /* RAIO */
  --p-radius-xs:   0.375rem;
  --p-radius-sm:   0.5rem;
  --p-radius-md:   0.75rem;
  --p-radius-lg:   1rem;
  --p-radius-xl:   1.5rem;
  --p-radius-2xl:  2rem;
  --p-radius-full: 999px;

  /* SOMBRA (neutras; a camada semântica define glow/painel por tema) */
  --p-shadow-xs:   0 1px 2px rgba(2, 8, 20, 0.06);
  --p-shadow-sm:   0 2px 8px rgba(2, 8, 20, 0.08);
  --p-shadow-md:   0 10px 30px rgba(2, 8, 20, 0.10);
  --p-shadow-lg:   0 20px 60px rgba(2, 8, 20, 0.14);
  --p-shadow-xl:   0 28px 90px rgba(2, 8, 20, 0.20);

  /* MOTION */
  --p-motion-fast: 160ms;
  --p-motion-base: 260ms;
  --p-motion-slow: 700ms;
  --p-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --p-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Z-INDEX */
  --p-z-base:    0;
  --p-z-raised:  10;
  --p-z-sticky:  100;
  --p-z-overlay: 800;
  --p-z-modal:   900;
  --p-z-toast:   1000;

  /* LAYOUT */
  --p-container: 1280px;
  --p-frame:     1360px;
  --p-measure:   68ch;
  --p-gutter:    clamp(1.25rem, 4vw, 2.5rem);

  /* BREAKPOINTS (referência; usados em media queries) */
  --p-bp-sm: 480px;
  --p-bp-md: 768px;
  --p-bp-lg: 1024px;
  --p-bp-xl: 1280px;

  /* ---------------------------------------------------------------------------
     ALIASES de compatibilidade (--dza-*) — DS v0.1.
     Mantidos para snippets/HTML existentes. Novos componentes devem usar a
     camada semântica. Cores agora resolvem a partir dos primitives oficiais.
     --------------------------------------------------------------------------- */
  --dza-brand-blue:   hsl(var(--p-blue-500));
  --dza-brand-yellow: hsl(var(--p-yellow-500));
  --dza-brand-black:  #000000;
  --dza-brand-white:  #ffffff;

  --dza-space-1: var(--p-space-1);   --dza-space-2: var(--p-space-2);
  --dza-space-3: var(--p-space-3);   --dza-space-4: var(--p-space-4);
  --dza-space-5: var(--p-space-5);   --dza-space-6: var(--p-space-6);
  --dza-space-8: var(--p-space-8);   --dza-space-10: var(--p-space-10);
  --dza-space-12: var(--p-space-12); --dza-space-16: var(--p-space-16);
  --dza-space-20: var(--p-space-20); --dza-space-24: var(--p-space-24);

  --dza-radius-xs: var(--p-radius-xs);   --dza-radius-sm: var(--p-radius-sm);
  --dza-radius-md: var(--p-radius-md);   --dza-radius-lg: var(--p-radius-lg);
  --dza-radius-xl: var(--p-radius-xl);   --dza-radius-full: var(--p-radius-full);

  --dza-motion-fast: var(--p-motion-fast);
  --dza-motion-base: var(--p-motion-base);
  --dza-motion-slow: var(--p-motion-slow);
  --dza-ease-out:    var(--p-ease-out);

  --dza-font-heading: var(--p-font-heading);
  --dza-font-body:    var(--p-font-body);
  --dza-font-mono:    var(--p-font-mono);

  --dza-container: var(--p-container);
  --dza-frame:     var(--p-frame);
  --dza-gutter:    var(--p-gutter);
}

/* ===== foundations/tokens.semantic.css ===== */
/* =============================================================================
   DZA Design System — Layer 2: SEMANTIC (shadcn/Tailwind-compatible)
   -----------------------------------------------------------------------------
   Decisões de uso por tema. Os nomes seguem a convenção shadcn/ui: copie o bloco
   de channels para o globals.css de um projeto Next/Tailwind e os componentes
   shadcn funcionam com a marca DZA sem reescrever nada.

   Convenção:
     --<token>        → triplet "H S% L%"     (canônico shadcn)
     --color-<token>  → hsl(var(--<token>))   (pronto p/ CSS escrito à mão)

   Tema padrão: LIGHT (:root). Dark via [data-theme="dark"] ou .dark.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   LIGHT (padrão)
   --------------------------------------------------------------------------- */
:root,
[data-theme="light"] {
  color-scheme: light;

  --background:            var(--p-neutral-0);
  --foreground:            var(--p-neutral-900);
  --card:                  var(--p-neutral-0);
  --card-foreground:       var(--p-neutral-900);
  --popover:               var(--p-neutral-0);
  --popover-foreground:    var(--p-neutral-900);

  --primary:               var(--p-blue-500);   /* #0082C8 */
  --primary-foreground:    var(--p-neutral-0);
  --secondary:             var(--p-neutral-100);
  --secondary-foreground:  var(--p-neutral-900);
  --muted:                 var(--p-neutral-100);
  --muted-foreground:      var(--p-neutral-500);
  --accent:                var(--p-neutral-100);
  --accent-foreground:     var(--p-neutral-900);

  /* Amarelo de marca — destaque pontual (não é o "accent" do shadcn) */
  --highlight:             var(--p-yellow-500); /* #FFC828 */
  --highlight-foreground:  var(--p-neutral-900);

  --destructive:           var(--p-danger-500);
  --destructive-foreground: var(--p-neutral-0);
  --success:               var(--p-success-500);
  --success-foreground:    var(--p-neutral-0);
  --warning:               var(--p-warning-500);
  --warning-foreground:    var(--p-neutral-900);
  --info:                  var(--p-info-500);
  --info-foreground:       var(--p-neutral-0);

  --border:                var(--p-neutral-200);
  --input:                 var(--p-neutral-200);
  --ring:                  var(--p-blue-500);

  --radius:                0.75rem;

  /* Texto auxiliar (extensão DZA) */
  --text-strong:           var(--p-neutral-900);
  --text-subtle:           var(--p-neutral-400);

  /* Superfícies translúcidas (extensão DZA — glass) */
  --surface-glass:         rgba(15, 23, 42, 0.04);
  --surface-glass-strong:  rgba(15, 23, 42, 0.07);
  --border-strong:         hsl(var(--p-blue-500) / 0.45);

  /* Fundo de página e brilho/aura por tema */
  --surface-gradient:
    radial-gradient(circle at 50% -10%, hsl(var(--p-blue-500) / 0.06), transparent 38%),
    radial-gradient(circle at 84% 6%, hsl(var(--p-yellow-500) / 0.05), transparent 30%),
    linear-gradient(180deg, hsl(var(--p-neutral-50)) 0%, hsl(var(--background)) 40%);
  --aura-color:            hsl(var(--p-blue-500) / 0.10);
  --grid-line:             hsl(var(--p-neutral-900) / 0.05);
  --noise-opacity:         0.02;

  --shadow-soft:           var(--p-shadow-md);
  --shadow-panel:          var(--p-shadow-xl);
  --shadow-glow:           0 0 44px hsl(var(--p-blue-500) / 0.18);
}

/* ---------------------------------------------------------------------------
   DARK (premium navy)
   --------------------------------------------------------------------------- */
[data-theme="dark"],
.dark {
  color-scheme: dark;

  --background:            var(--p-neutral-950);
  --foreground:            var(--p-neutral-50);
  --card:                  222 40% 9%;
  --card-foreground:       var(--p-neutral-50);
  --popover:               222 44% 8%;
  --popover-foreground:    var(--p-neutral-50);

  --primary:               var(--p-blue-400);   /* brilho extra no escuro */
  --primary-foreground:    var(--p-neutral-950);
  --secondary:             217 33% 14%;
  --secondary-foreground:  var(--p-neutral-50);
  --muted:                 217 33% 14%;
  --muted-foreground:      var(--p-neutral-400);
  --accent:                var(--p-neutral-800);
  --accent-foreground:     var(--p-neutral-50);

  --highlight:             var(--p-yellow-500);
  --highlight-foreground:  var(--p-neutral-950);

  --destructive:           var(--p-danger-400);
  --destructive-foreground: var(--p-neutral-50);
  --success:               var(--p-success-400);
  --success-foreground:    var(--p-neutral-950);
  --warning:               var(--p-warning-400);
  --warning-foreground:    var(--p-neutral-950);
  --info:                  var(--p-info-400);
  --info-foreground:       var(--p-neutral-950);

  --border:                var(--p-neutral-800);
  --input:                 217 33% 20%;
  --ring:                  var(--p-blue-400);

  --text-strong:           var(--p-neutral-50);
  --text-subtle:           var(--p-neutral-500);

  --surface-glass:         rgba(255, 255, 255, 0.045);
  --surface-glass-strong:  rgba(255, 255, 255, 0.075);
  --border-strong:         hsl(var(--p-blue-300) / 0.32);

  --surface-gradient:
    radial-gradient(circle at 50% -10%, hsl(var(--p-blue-400) / 0.16), transparent 36%),
    radial-gradient(circle at 82% 18%, hsl(var(--p-blue-300) / 0.08), transparent 28%),
    linear-gradient(180deg, hsl(222 40% 9%) 0%, hsl(var(--background)) 46%, hsl(var(--p-neutral-1000)) 100%);
  --aura-color:            hsl(var(--p-blue-300) / 0.12);
  --grid-line:             rgba(255, 255, 255, 0.045);
  --noise-opacity:         0.035;

  --shadow-soft:           0 20px 60px rgba(0, 0, 0, 0.28);
  --shadow-panel:          0 28px 90px rgba(0, 0, 0, 0.48), 0 0 42px hsl(var(--p-blue-300) / 0.04);
  --shadow-glow:           0 0 44px hsl(var(--p-blue-300) / 0.22);
}

/* ---------------------------------------------------------------------------
   Resolução pronta para uso (--color-*) — derivada dos channels acima.
   Definida em escopo global; herda o tema ativo automaticamente.
   --------------------------------------------------------------------------- */
:root {
  --color-background:            hsl(var(--background));
  --color-foreground:            hsl(var(--foreground));
  --color-card:                  hsl(var(--card));
  --color-card-foreground:       hsl(var(--card-foreground));
  --color-popover:               hsl(var(--popover));
  --color-popover-foreground:    hsl(var(--popover-foreground));
  --color-primary:               hsl(var(--primary));
  --color-primary-foreground:    hsl(var(--primary-foreground));
  --color-secondary:             hsl(var(--secondary));
  --color-secondary-foreground:  hsl(var(--secondary-foreground));
  --color-muted:                 hsl(var(--muted));
  --color-muted-foreground:      hsl(var(--muted-foreground));
  --color-accent:                hsl(var(--accent));
  --color-accent-foreground:     hsl(var(--accent-foreground));
  --color-highlight:             hsl(var(--highlight));
  --color-highlight-foreground:  hsl(var(--highlight-foreground));
  --color-destructive:           hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-success:               hsl(var(--success));
  --color-warning:               hsl(var(--warning));
  --color-info:                  hsl(var(--info));
  --color-border:                hsl(var(--border));
  --color-input:                 hsl(var(--input));
  --color-ring:                  hsl(var(--ring));
  --color-text-strong:           hsl(var(--text-strong));
  --color-text-subtle:           hsl(var(--text-subtle));

  /* ------------------------------------------------------------------------
     ALIASES de compatibilidade (--dza-*) — DS v0.1.
     Redirecionam para a camada semântica. A antiga acentuação "cyan" foi
     remapeada para o azul oficial (a marca DZA não possui cyan).
     ------------------------------------------------------------------------ */
  --dza-text:                var(--color-foreground);
  --dza-text-strong:         var(--color-text-strong);
  --dza-text-muted:          var(--color-muted-foreground);
  --dza-text-subtle:         var(--color-text-subtle);
  --dza-text-inverse:        var(--color-primary-foreground);

  --dza-surface-page:        var(--color-background);
  --dza-surface-page-alt:    var(--color-background);
  --dza-surface-glass:       var(--surface-glass);
  --dza-surface-glass-strong: var(--surface-glass-strong);
  --dza-surface-panel:       var(--color-card);
  --dza-surface-panel-solid: var(--color-card);

  --dza-border-subtle:       var(--color-border);
  --dza-border:              var(--color-border);
  --dza-border-strong:       var(--border-strong);

  --dza-color-cyan:          var(--color-primary);
  --dza-color-cyan-soft:     hsl(var(--p-blue-300));
  --dza-color-tech-blue:     hsl(var(--p-blue-400));
  --dza-color-emerald:       var(--color-success);

  --dza-success: var(--color-success);
  --dza-warning: var(--color-warning);
  --dza-danger:  var(--color-destructive);
  --dza-info:    var(--color-info);

  --dza-shadow-soft:  var(--shadow-soft);
  --dza-shadow-panel: var(--shadow-panel);
  --dza-shadow-glow:  var(--shadow-glow);
}

/* ===== css/generic/reset.css ===== */
/* =============================================================================
   ITCSS · GENERIC — reset moderno e box model
   ============================================================================= */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  tab-size: 4;
}

body {
  min-height: 100vh;
  line-height: var(--p-leading-normal);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

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

:where(a) {
  color: inherit;
  text-decoration: none;
}

/* Respeito a usuários que reduzem movimento */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== css/elements/elements.css ===== */
/* =============================================================================
   ITCSS · ELEMENTS — estilos base de elementos HTML (sem classes)
   ============================================================================= */


body {
  background: var(--surface-gradient) fixed;
  background-color: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--p-font-body);
  font-size: var(--p-text-base);
  overflow-x: hidden;
}

/* Textura de ruído sutil, intensidade controlada por tema */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: var(--noise-opacity);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--p-font-heading);
  font-weight: var(--p-weight-semibold);
  line-height: var(--p-leading-tight);
  letter-spacing: var(--p-tracking-tight);
  color: var(--color-text-strong);
  text-wrap: balance;
}

h1 { font-size: var(--p-text-4xl); }
h2 { font-size: var(--p-text-3xl); }
h3 { font-size: var(--p-text-2xl); }
h4 { font-size: var(--p-text-xl); }
h5 { font-size: var(--p-text-lg); }

p {
  max-width: var(--p-measure);
  line-height: var(--p-leading-relaxed);
}

a {
  color: var(--color-primary);
  transition: color var(--p-motion-fast) var(--p-ease-out);
}

a:hover {
  color: hsl(var(--p-blue-600));
}

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

small {
  font-size: var(--p-text-sm);
}

code,
kbd,
samp {
  font-family: var(--p-font-mono);
  font-size: 0.9em;
  background: var(--color-muted);
  border-radius: var(--p-radius-xs);
  padding: 0.12em 0.4em;
}

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin-block: var(--p-space-8);
}

::selection {
  background: hsl(var(--primary) / 0.25);
  color: var(--color-text-strong);
}

:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 3px;
  border-radius: var(--p-radius-xs);
}

:where(button) {
  cursor: pointer;
}

/* ===== css/objects/objects.css ===== */
/* =============================================================================
   ITCSS · OBJECTS — estruturas de layout reutilizáveis, sem identidade visual.
   Inspirado em Every Layout (Andy Bell / Heydon Pickering). Prefixo `l-`.
   ============================================================================= */

/* Moldura central do site (linhas verticais discretas opcionais) */
.l-frame {
  width: min(100%, var(--p-frame));
  min-height: 100vh;
  margin-inline: auto;
  border-inline: 1px solid var(--color-border);
}

/* Largura de conteúdo com gutter responsivo */
.l-container {
  width: min(100% - (var(--p-gutter) * 2), var(--p-container));
  margin-inline: auto;
}

.l-container--narrow { --p-container: 880px; }
.l-container--wide   { --p-container: 1440px; }

/* Bloco vertical (seção) com ritmo consistente */
.l-section {
  padding-block: clamp(3.5rem, 8vw, 7rem);
}

.l-section--tight { padding-block: clamp(2rem, 5vw, 4rem); }

/* Stack — espaço vertical entre filhos */
.l-stack {
  display: flex;
  flex-direction: column;
  gap: var(--l-stack-gap, var(--p-space-4));
}
.l-stack--sm { --l-stack-gap: var(--p-space-2); }
.l-stack--lg { --l-stack-gap: var(--p-space-8); }

/* Cluster — agrupa itens com wrap (tags, botões, metadados) */
.l-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--l-cluster-gap, var(--p-space-3));
}

/* Switcher — colunas que viram empilhadas abaixo de um limiar */
.l-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--p-space-6);
}
.l-switcher > * {
  flex: 1 1 var(--l-switcher-min, 22rem);
}

/* Center — centraliza um bloco com largura máxima de leitura */
.l-center {
  box-sizing: content-box;
  max-width: var(--l-center-max, var(--p-measure));
  margin-inline: auto;
}

/* Grid auto-fit — cards responsivos sem media query */
.l-grid {
  display: grid;
  gap: var(--l-grid-gap, var(--p-space-6));
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, var(--l-grid-min, 16rem)), 1fr)
  );
}

/* Grid 2 colunas assimétrico (hero split) */
.l-grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: center;
}

@media (min-width: 900px) {
  .l-grid-2 {
    grid-template-columns: var(--l-grid-2-cols, 1fr 1fr);
  }
  .l-grid-2--hero { --l-grid-2-cols: 0.95fr 1.05fr; }
}

/* Sidebar — coluna lateral fixa + conteúdo fluido */
.l-sidebar {
  display: grid;
  gap: var(--p-space-8);
}
@media (min-width: 900px) {
  .l-sidebar {
    grid-template-columns: var(--l-sidebar-width, 16rem) minmax(0, 1fr);
  }
}

/* Linhas de grade verticais decorativas */
.l-grid-lines {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  width: min(100%, var(--p-frame));
  margin-inline: auto;
  display: none;
  grid-template-columns: repeat(4, 1fr);
}
.l-grid-lines > * { border-right: 1px solid var(--grid-line); }

@media (min-width: 768px) {
  .l-grid-lines { display: grid; }
}

/* ===== css/components/base.css ===== */
/* =============================================================================
   COMPONENTS · BASE — átomos e moléculas: button, badge, status, tag, avatar,
   icon-box. Prefixo `c-`.
   ============================================================================= */

/* --------------------------------------------------------------- BUTTON ----- */
.c-button {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: var(--p-space-2);
  border: 1px solid transparent;
  border-radius: var(--p-radius-full);
  padding: 0.7rem 1.25rem;
  font-family: var(--p-font-heading);
  font-weight: var(--p-weight-medium);
  font-size: var(--p-text-sm);
  line-height: 1;
  white-space: nowrap;
  transition:
    transform var(--p-motion-base) var(--p-ease-out),
    border-color var(--p-motion-base) var(--p-ease-out),
    background var(--p-motion-base) var(--p-ease-out),
    box-shadow var(--p-motion-base) var(--p-ease-out),
    color var(--p-motion-base) var(--p-ease-out);
}
.c-button:hover { transform: translateY(-1px) scale(1.015); }
.c-button:active { transform: translateY(0) scale(0.99); }
.c-button:disabled,
.c-button.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.c-button--primary {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  box-shadow: 0 14px 36px hsl(var(--primary) / 0.28);
}
.c-button--primary:hover {
  background: hsl(var(--p-blue-600));
  color: #fff;
  box-shadow: 0 20px 48px hsl(var(--primary) / 0.36);
}

.c-button--highlight {
  background: var(--color-highlight);
  color: var(--color-highlight-foreground);
  box-shadow: 0 14px 36px hsl(var(--highlight) / 0.32);
}
.c-button--highlight:hover { background: hsl(var(--p-yellow-400)); }

.c-button--ghost {
  border-color: var(--color-border);
  background: var(--surface-glass);
  color: var(--color-foreground);
  backdrop-filter: blur(18px);
}
.c-button--ghost:hover {
  border-color: var(--border-strong);
  background: var(--surface-glass-strong);
}

.c-button--outline {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: transparent;
}
.c-button--outline:hover { background: hsl(var(--primary) / 0.08); }

.c-button--subtle {
  background: var(--color-muted);
  color: var(--color-foreground);
}
.c-button--subtle:hover { background: var(--color-accent); }

.c-button--danger {
  background: var(--color-destructive);
  color: var(--color-destructive-foreground);
}

.c-button--sm { min-height: 2.25rem; padding: 0.5rem 0.9rem; font-size: var(--p-text-xs); }
.c-button--lg { min-height: 3.25rem; padding: 0.9rem 1.75rem; font-size: var(--p-text-md); }
.c-button--block { width: 100%; }
.c-button--icon { padding: 0; width: 2.75rem; aspect-ratio: 1; }

/* ---------------------------------------------------------------- BADGE ----- */
.c-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--p-space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--p-radius-full);
  padding: 0.2rem 0.6rem;
  font-size: var(--p-text-xs);
  font-weight: var(--p-weight-medium);
  line-height: 1.4;
  background: var(--color-muted);
  color: var(--color-muted-foreground);
}
.c-badge--primary { background: hsl(var(--primary) / 0.12); color: var(--color-primary); border-color: hsl(var(--primary) / 0.3); }
.c-badge--highlight { background: hsl(var(--highlight) / 0.16); color: hsl(var(--p-yellow-700)); border-color: hsl(var(--highlight) / 0.4); }
.c-badge--success { background: hsl(var(--success) / 0.14); color: var(--color-success); border-color: hsl(var(--success) / 0.3); }
.c-badge--warning { background: hsl(var(--warning) / 0.16); color: hsl(var(--p-warning-600)); border-color: hsl(var(--warning) / 0.35); }
.c-badge--danger { background: hsl(var(--destructive) / 0.14); color: var(--color-destructive); border-color: hsl(var(--destructive) / 0.3); }

/* --------------------------------------------------------------- STATUS ----- */
.c-status {
  display: inline-flex;
  align-items: center;
  gap: var(--p-space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--p-radius-full);
  background: var(--surface-glass);
  padding: 0.35rem 0.7rem;
  color: var(--color-muted-foreground);
  font-size: var(--p-text-xs);
}

/* ------------------------------------------------------------------ TAG ----- */
.c-tag {
  display: inline-flex;
  align-items: center;
  border-radius: var(--p-radius-sm);
  padding: 0.25rem 0.55rem;
  font-size: var(--p-text-xs);
  font-family: var(--p-font-mono);
  background: var(--color-muted);
  color: var(--color-muted-foreground);
}

/* --------------------------------------------------------------- AVATAR ----- */
.c-avatar {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-muted);
  color: var(--color-foreground);
  font-weight: var(--p-weight-semibold);
  font-size: var(--p-text-sm);
  border: 1px solid var(--color-border);
}
.c-avatar img { width: 100%; height: 100%; object-fit: cover; }
.c-avatar--sm { width: 2rem; font-size: var(--p-text-xs); }
.c-avatar--lg { width: 3.5rem; font-size: var(--p-text-lg); }

.c-avatar-stack { display: inline-flex; }
.c-avatar-stack > .c-avatar:not(:first-child) { margin-left: -0.6rem; }

/* ----------------------------------------------------------------- ICON ----- */
/* Regra DZA: ícones são SEMPRE monocromáticos e herdam a cor (currentColor).
   Nunca use ícones coloridos/emoji. A cor vem do contexto (marca ou neutro). */
.c-icon {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--color-foreground); /* default; sobrescrito pelo container */
}
.c-icon--sm { width: 1.15rem; height: 1.15rem; }
.c-icon--lg { width: 2rem; height: 2rem; }
.c-icon--primary { color: var(--color-primary); }
.c-icon--highlight { color: hsl(var(--p-yellow-700)); }
.c-icon--muted { color: var(--color-muted-foreground); }
/* Qualquer SVG decorativo herda a cor; garante monocromia mesmo sem .c-icon */
svg[data-icon] { fill: none; stroke: currentColor; }

/* -------------------------------------------------------------- ICON-BOX ---- */
.c-icon-box {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  aspect-ratio: 1;
  border-radius: var(--p-radius-md);
  background: hsl(var(--primary) / 0.12);
  color: var(--color-primary);
  border: 1px solid hsl(var(--primary) / 0.2);
}
.c-icon-box--highlight { background: hsl(var(--highlight) / 0.16); color: hsl(var(--p-yellow-700)); border-color: hsl(var(--highlight) / 0.35); }
.c-icon-box svg,
.c-icon-box .c-icon { width: 1.5rem; height: 1.5rem; stroke: currentColor; fill: none; }

/* ===== css/components/forms.css ===== */
/* =============================================================================
   COMPONENTS · FORMS — field, label, input, textarea, select, checkbox, radio,
   switch, help/erro. Prefixo `c-`.
   ============================================================================= */

.c-field {
  display: flex;
  flex-direction: column;
  gap: var(--p-space-2);
}

.c-label {
  font-size: var(--p-text-sm);
  font-weight: var(--p-weight-medium);
  color: var(--color-text-strong);
}
.c-label__req { color: var(--color-destructive); }

.c-input,
.c-textarea,
.c-select {
  width: 100%;
  min-height: 2.75rem;
  border: 1px solid var(--color-input);
  border-radius: var(--p-radius-md);
  background: var(--color-card);
  color: var(--color-foreground);
  padding: 0.65rem 0.85rem;
  font-size: var(--p-text-sm);
  transition:
    border-color var(--p-motion-fast) var(--p-ease-out),
    box-shadow var(--p-motion-fast) var(--p-ease-out);
}
.c-textarea { min-height: 7rem; resize: vertical; line-height: var(--p-leading-normal); }

.c-input::placeholder,
.c-textarea::placeholder { color: var(--color-text-subtle); }

.c-input:focus,
.c-textarea:focus,
.c-select:focus {
  outline: none;
  border-color: var(--color-ring);
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.25);
}

.c-input:disabled,
.c-textarea:disabled,
.c-select:disabled { opacity: 0.55; cursor: not-allowed; }

.c-input.is-invalid,
.c-textarea.is-invalid {
  border-color: var(--color-destructive);
  box-shadow: 0 0 0 3px hsl(var(--destructive) / 0.2);
}

.c-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.5rem;
}

/* Input com ícone/addon */
.c-input-group {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--color-input);
  border-radius: var(--p-radius-md);
  background: var(--color-card);
  overflow: hidden;
}
.c-input-group:focus-within { border-color: var(--color-ring); box-shadow: 0 0 0 3px hsl(var(--ring) / 0.25); }
.c-input-group .c-input { border: none; box-shadow: none; }
.c-input-group__addon {
  display: grid;
  place-items: center;
  padding-inline: 0.85rem;
  color: var(--color-muted-foreground);
  background: var(--color-muted);
}

/* Mensagens */
.c-field__help { font-size: var(--p-text-xs); color: var(--color-muted-foreground); }
.c-field__error { font-size: var(--p-text-xs); color: var(--color-destructive); }

/* Checkbox & Radio nativos estilizados */
.c-check {
  display: inline-flex;
  align-items: center;
  gap: var(--p-space-2);
  font-size: var(--p-text-sm);
  cursor: pointer;
}
.c-check input[type="checkbox"],
.c-check input[type="radio"] {
  appearance: none;
  width: 1.15rem;
  height: 1.15rem;
  border: 1px solid var(--color-input);
  background: var(--color-card);
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: background var(--p-motion-fast), border-color var(--p-motion-fast);
}
.c-check input[type="checkbox"] { border-radius: var(--p-radius-xs); }
.c-check input[type="radio"] { border-radius: 50%; }
.c-check input:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.c-check input[type="checkbox"]:checked::after {
  content: "";
  width: 0.32rem; height: 0.6rem;
  border: solid var(--color-primary-foreground);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.c-check input[type="radio"]:checked::after {
  content: "";
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--color-primary-foreground);
}
.c-check input:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }

/* Switch */
.c-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--p-space-3);
  cursor: pointer;
  font-size: var(--p-text-sm);
}
.c-switch input { position: absolute; opacity: 0; }
.c-switch__track {
  width: 2.6rem;
  height: 1.5rem;
  border-radius: var(--p-radius-full);
  background: var(--color-muted);
  border: 1px solid var(--color-border);
  position: relative;
  transition: background var(--p-motion-base) var(--p-ease-out);
}
.c-switch__track::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.18rem;
  width: 1.1rem; height: 1.1rem;
  border-radius: 50%;
  background: var(--color-card);
  box-shadow: var(--p-shadow-sm);
  transform: translateY(-50%);
  transition: left var(--p-motion-base) var(--p-ease-out);
}
.c-switch input:checked + .c-switch__track { background: var(--color-primary); border-color: var(--color-primary); }
.c-switch input:checked + .c-switch__track::after { left: calc(100% - 1.28rem); }
.c-switch input:focus-visible + .c-switch__track { outline: 2px solid var(--color-ring); outline-offset: 2px; }

/* ===== css/components/navigation.css ===== */
/* =============================================================================
   COMPONENTS · NAVIGATION — header, nav, menu mobile, breadcrumb, tabs,
   pagination, footer. Prefixo `c-`.
   ============================================================================= */

/* -------------------------------------------------------------- HEADER ----- */
.c-header {
  position: sticky;
  top: 0;
  z-index: var(--p-z-sticky);
  border-bottom: 1px solid var(--color-border);
  background: hsl(var(--background) / 0.72);
  backdrop-filter: blur(24px);
}

.c-nav {
  min-height: 4.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--p-space-6);
}

.c-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--p-space-3);
  font-family: var(--p-font-heading);
  font-weight: var(--p-weight-bold);
  color: var(--color-text-strong);
}
.c-brand__logo { width: clamp(6.5rem, 11vw, 9.5rem); height: auto; }

.c-nav__links {
  display: none;
  align-items: center;
  gap: var(--p-space-8);
  color: var(--color-muted-foreground);
  font-size: var(--p-text-sm);
}
.c-nav__links a { position: relative; transition: color var(--p-motion-base) var(--p-ease-out); }
.c-nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -0.45rem;
  height: 2px;
  border-radius: 2px;
  background: var(--color-primary);
  transition: right var(--p-motion-base) var(--p-ease-out);
}
.c-nav__links a:hover { color: var(--color-text-strong); }
.c-nav__links a:hover::after,
.c-nav__links a[aria-current]::after { right: 0; }

.c-nav__actions { display: none; align-items: center; gap: var(--p-space-3); }

@media (min-width: 880px) {
  .c-nav__links,
  .c-nav__actions { display: flex; }
}

/* Menu mobile — toggle por checkbox (sem JS) */
.c-nav__toggle {
  display: inline-grid;
  place-items: center;
  width: 2.75rem; aspect-ratio: 1;
  border: 1px solid var(--color-border);
  border-radius: var(--p-radius-md);
  background: var(--surface-glass);
}
.c-nav__menu-input { display: none; }
.c-nav__drawer {
  display: none;
  flex-direction: column;
  gap: var(--p-space-2);
  padding: var(--p-space-4);
  border-top: 1px solid var(--color-border);
}
.c-nav__drawer a {
  padding: var(--p-space-3);
  border-radius: var(--p-radius-md);
  color: var(--color-foreground);
}
.c-nav__drawer a:hover { background: var(--color-muted); }
.c-nav__menu-input:checked ~ .c-nav__drawer { display: flex; }

@media (min-width: 880px) {
  .c-nav__toggle { display: none; }
  .c-nav__drawer { display: none !important; }
}

/* ---------------------------------------------------------- BREADCRUMB ----- */
.c-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--p-space-2);
  font-size: var(--p-text-sm);
  color: var(--color-muted-foreground);
}
.c-breadcrumb a:hover { color: var(--color-foreground); }
.c-breadcrumb li { display: inline-flex; align-items: center; gap: var(--p-space-2); }
.c-breadcrumb li:not(:last-child)::after { content: "/"; color: var(--color-text-subtle); }
.c-breadcrumb [aria-current] { color: var(--color-text-strong); }

/* --------------------------------------------------------------- TABS ----- */
.c-tabs__list {
  display: inline-flex;
  gap: var(--p-space-1);
  padding: var(--p-space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--p-radius-full);
  background: var(--color-muted);
}
.c-tabs__tab {
  border: none;
  background: transparent;
  border-radius: var(--p-radius-full);
  padding: 0.5rem 1rem;
  font-size: var(--p-text-sm);
  font-weight: var(--p-weight-medium);
  color: var(--color-muted-foreground);
  transition: background var(--p-motion-fast), color var(--p-motion-fast);
}
.c-tabs__tab:hover { color: var(--color-foreground); }
.c-tabs__tab.is-active,
.c-tabs__tab[aria-selected="true"] {
  background: var(--color-card);
  color: var(--color-text-strong);
  box-shadow: var(--p-shadow-xs);
}

/* --------------------------------------------------------- PAGINATION ----- */
.c-pagination { display: inline-flex; align-items: center; gap: var(--p-space-1); }
.c-pagination__item {
  display: grid;
  place-items: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--p-radius-md);
  background: var(--color-card);
  color: var(--color-foreground);
  font-size: var(--p-text-sm);
}
.c-pagination__item:hover { background: var(--color-muted); }
.c-pagination__item.is-active { background: var(--color-primary); color: var(--color-primary-foreground); border-color: var(--color-primary); }

/* ------------------------------------------------------------- FOOTER ----- */
.c-footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--p-space-16) var(--p-space-8);
  color: var(--color-muted-foreground);
  font-size: var(--p-text-sm);
}
.c-footer__grid {
  display: grid;
  gap: var(--p-space-10);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.c-footer__title {
  font-family: var(--p-font-heading);
  font-size: var(--p-text-sm);
  font-weight: var(--p-weight-semibold);
  color: var(--color-text-strong);
  margin-bottom: var(--p-space-4);
}
.c-footer__links { display: flex; flex-direction: column; gap: var(--p-space-2); }
.c-footer__links a:hover { color: var(--color-foreground); }
.c-footer__bottom {
  margin-top: var(--p-space-12);
  padding-top: var(--p-space-6);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--p-space-4);
  justify-content: space-between;
  align-items: center;
  color: var(--color-text-subtle);
  font-size: var(--p-text-xs);
}

/* ===== css/components/surfaces.css ===== */
/* =============================================================================
   COMPONENTS · SURFACES — card, panel, dashboard mock, stat, feature, pricing,
   testimonial, logo-cloud, alert, table, accordion, dialog, tooltip.
   Prefixo `c-`.
   ============================================================================= */

/* ---------------------------------------------------------------- CARD ----- */
.c-card {
  border: 1px solid var(--color-border);
  border-radius: var(--p-radius-lg);
  background: var(--color-card);
  padding: var(--p-space-6);
  box-shadow: var(--shadow-soft);
  transition: border-color var(--p-motion-base) var(--p-ease-out),
              transform var(--p-motion-base) var(--p-ease-out),
              box-shadow var(--p-motion-base) var(--p-ease-out);
}
.c-card--glass { background: var(--surface-glass); backdrop-filter: blur(20px); }
.c-card--interactive:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-panel);
}
.c-card__title { font-family: var(--p-font-heading); font-size: var(--p-text-lg); color: var(--color-text-strong); }
.c-card__body { margin-top: var(--p-space-2); color: var(--color-muted-foreground); font-size: var(--p-text-sm); }

/* --------------------------------------------------------------- PANEL ----- */
.c-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--p-radius-xl);
  background: var(--surface-glass-strong);
  box-shadow: var(--shadow-panel);
  backdrop-filter: blur(28px);
}
.c-panel--hero {
  position: relative;
  min-height: 28rem;
  padding: var(--p-space-3);
  transform: perspective(1200px) rotateX(2deg) rotateY(-3deg);
}
.c-panel__inner {
  min-height: 100%;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 1.1rem;
  background: var(--color-card);
}
.c-panel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--p-space-4);
  border-bottom: 1px solid var(--color-border);
  padding: var(--p-space-4) var(--p-space-5);
  background: var(--surface-glass);
}

/* ----------------------------------------------------- DASHBOARD MOCK ----- */
.c-dashboard { display: grid; grid-template-columns: 0.32fr 1fr; min-height: 22rem; }
.c-dashboard__side { border-right: 1px solid var(--color-border); padding: var(--p-space-4); }
.c-dashboard__main { padding: var(--p-space-5); }
.c-menu-list { display: grid; gap: var(--p-space-2); }
.c-menu-item {
  display: flex; align-items: center; gap: var(--p-space-2);
  border-radius: var(--p-radius-md);
  padding: 0.7rem 0.8rem;
  color: var(--color-muted-foreground);
  font-size: var(--p-text-sm);
}
.c-menu-item.is-active { background: hsl(var(--primary) / 0.12); color: var(--color-primary); }

@media (max-width: 720px) {
  .c-panel--hero { min-height: 22rem; transform: none; }
  .c-dashboard { grid-template-columns: 1fr; }
  .c-dashboard__side { display: none; }
}

/* ---------------------------------------------------------------- STAT ----- */
.c-stat {
  display: flex;
  flex-direction: column;
  gap: var(--p-space-1);
}
.c-stat__value {
  font-family: var(--p-font-heading);
  font-size: var(--p-text-3xl);
  font-weight: var(--p-weight-bold);
  color: var(--color-text-strong);
  line-height: 1;
}
.c-stat__value .u-gradient-text { font: inherit; }
.c-stat__label { font-size: var(--p-text-sm); color: var(--color-muted-foreground); }

/* ------------------------------------------------------------- FEATURE ----- */
.c-feature { display: flex; flex-direction: column; gap: var(--p-space-4); }
.c-feature__title { font-family: var(--p-font-heading); font-size: var(--p-text-lg); color: var(--color-text-strong); }
.c-feature__text { color: var(--color-muted-foreground); font-size: var(--p-text-sm); }

/* ------------------------------------------------------------- PRICING ----- */
.c-pricing {
  display: flex;
  flex-direction: column;
  gap: var(--p-space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--p-radius-xl);
  background: var(--color-card);
  padding: var(--p-space-8);
  box-shadow: var(--shadow-soft);
}
.c-pricing--featured {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-panel);
  position: relative;
}
.c-pricing__name { font-family: var(--p-font-heading); font-size: var(--p-text-lg); color: var(--color-text-strong); }
.c-pricing__price { font-family: var(--p-font-heading); font-size: var(--p-text-4xl); font-weight: var(--p-weight-bold); color: var(--color-text-strong); }
.c-pricing__price small { font-size: var(--p-text-sm); font-weight: var(--p-weight-regular); color: var(--color-muted-foreground); }
.c-pricing__list { display: flex; flex-direction: column; gap: var(--p-space-3); font-size: var(--p-text-sm); }
.c-pricing__list li { display: flex; align-items: center; gap: var(--p-space-2); color: var(--color-muted-foreground); }
.c-pricing__list li::before {
  content: "";
  width: 1.1rem; height: 1.1rem; flex: none;
  border-radius: 50%;
  background:
    hsl(var(--primary) / 0.15)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%230082c8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 6 2.5 2.5L9 3.5'/%3E%3C/svg%3E") center / 0.7rem no-repeat;
}

/* --------------------------------------------------------- TESTIMONIAL ----- */
.c-testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--p-space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--p-radius-lg);
  background: var(--color-card);
  padding: var(--p-space-6);
}
.c-testimonial__quote { color: var(--color-foreground); font-size: var(--p-text-md); line-height: var(--p-leading-relaxed); }
.c-testimonial__author { display: flex; align-items: center; gap: var(--p-space-3); }
.c-testimonial__name { font-weight: var(--p-weight-semibold); color: var(--color-text-strong); font-size: var(--p-text-sm); }
.c-testimonial__role { color: var(--color-muted-foreground); font-size: var(--p-text-xs); }

/* --------------------------------------------------------- LOGO CLOUD ----- */
.c-logo-cloud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 5vw, 3.5rem);
  opacity: 0.7;
}
.c-logo-cloud img { height: 1.75rem; width: auto; filter: grayscale(1); }

/* --------------------------------------------------------------- ALERT ----- */
.c-alert {
  display: flex;
  gap: var(--p-space-3);
  border: 1px solid var(--color-border);
  border-left-width: 3px;
  border-radius: var(--p-radius-md);
  padding: var(--p-space-4);
  background: var(--color-card);
  font-size: var(--p-text-sm);
}
.c-alert__title { font-weight: var(--p-weight-semibold); color: var(--color-text-strong); }
.c-alert__body { color: var(--color-muted-foreground); }
.c-alert--info { border-left-color: var(--color-info); background: hsl(var(--info) / 0.06); }
.c-alert--success { border-left-color: var(--color-success); background: hsl(var(--success) / 0.06); }
.c-alert--warning { border-left-color: var(--color-warning); background: hsl(var(--warning) / 0.06); }
.c-alert--danger { border-left-color: var(--color-destructive); background: hsl(var(--destructive) / 0.06); }

/* --------------------------------------------------------------- TABLE ----- */
.c-table-wrap {
  border: 1px solid var(--color-border);
  border-radius: var(--p-radius-lg);
  overflow: hidden;
  overflow-x: auto;
}
.c-table { width: 100%; border-collapse: collapse; font-size: var(--p-text-sm); }
.c-table thead th {
  text-align: left;
  padding: var(--p-space-3) var(--p-space-4);
  background: var(--color-muted);
  color: var(--color-muted-foreground);
  font-weight: var(--p-weight-semibold);
  white-space: nowrap;
}
.c-table tbody td {
  padding: var(--p-space-3) var(--p-space-4);
  border-top: 1px solid var(--color-border);
  color: var(--color-foreground);
}
.c-table tbody tr:hover { background: var(--surface-glass); }

/* ----------------------------------------------------------- ACCORDION ----- */
.c-accordion { border: 1px solid var(--color-border); border-radius: var(--p-radius-lg); overflow: hidden; }
.c-accordion__item { border-bottom: 1px solid var(--color-border); }
.c-accordion__item:last-child { border-bottom: none; }
.c-accordion__item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--p-space-4);
  padding: var(--p-space-4) var(--p-space-5);
  cursor: pointer;
  font-weight: var(--p-weight-medium);
  color: var(--color-text-strong);
  list-style: none;
}
.c-accordion__item summary::-webkit-details-marker { display: none; }
.c-accordion__item summary::after {
  content: "+";
  font-size: var(--p-text-xl);
  color: var(--color-muted-foreground);
  transition: transform var(--p-motion-base) var(--p-ease-out);
}
.c-accordion__item[open] summary::after { transform: rotate(45deg); }
.c-accordion__panel {
  padding: 0 var(--p-space-5) var(--p-space-5);
  color: var(--color-muted-foreground);
  font-size: var(--p-text-sm);
}

/* -------------------------------------------------------------- DIALOG ----- */
.c-dialog {
  border: 1px solid var(--color-border);
  border-radius: var(--p-radius-xl);
  background: var(--color-popover);
  color: var(--color-popover-foreground);
  box-shadow: var(--shadow-panel);
  padding: var(--p-space-8);
  max-width: 32rem;
  width: calc(100% - 2rem);
}
.c-dialog::backdrop { background: rgba(2, 8, 20, 0.6); backdrop-filter: blur(4px); }
.c-dialog__title { font-family: var(--p-font-heading); font-size: var(--p-text-xl); color: var(--color-text-strong); }
.c-dialog__body { margin-top: var(--p-space-3); color: var(--color-muted-foreground); font-size: var(--p-text-sm); }
.c-dialog__actions { margin-top: var(--p-space-6); display: flex; gap: var(--p-space-3); justify-content: flex-end; }

/* ------------------------------------------------------------- TOOLTIP ----- */
.c-tooltip { position: relative; display: inline-flex; }
.c-tooltip__bubble {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  background: var(--color-popover);
  color: var(--color-popover-foreground);
  border: 1px solid var(--color-border);
  border-radius: var(--p-radius-sm);
  padding: 0.35rem 0.6rem;
  font-size: var(--p-text-xs);
  box-shadow: var(--p-shadow-md);
  transition: opacity var(--p-motion-fast) var(--p-ease-out), transform var(--p-motion-fast) var(--p-ease-out);
}
.c-tooltip:hover .c-tooltip__bubble,
.c-tooltip:focus-within .c-tooltip__bubble {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ===== css/components/sections.css ===== */
/* =============================================================================
   COMPONENTS · SECTIONS — hero, section-head, cta, actions. Prefixo `c-`.
   ============================================================================= */

/* ------------------------------------------------------------ SECTION HEAD -- */
.c-section-head {
  display: flex;
  flex-direction: column;
  gap: var(--p-space-4);
  max-width: 46rem;
}
.c-section-head--center { margin-inline: auto; align-items: center; text-align: center; }
.c-section-head__title {
  font-family: var(--p-font-heading);
  font-size: var(--p-text-3xl);
  color: var(--color-text-strong);
}
.c-section-head__lead {
  color: var(--color-muted-foreground);
  font-size: var(--p-text-md);
  line-height: var(--p-leading-relaxed);
}

/* --------------------------------------------------------------- ACTIONS ---- */
.c-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--p-space-3);
  margin-top: var(--p-space-8);
}

/* ------------------------------------------------------------------ HERO ---- */
.c-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4rem, 9vw, 7rem);
}
.c-hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 5rem;
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
  background: var(--aura-color);
  filter: blur(64px);
  transform: translateX(-50%);
  pointer-events: none;
}
.c-hero__title {
  margin-top: var(--p-space-6);
  max-width: 14ch;
  color: var(--color-text-strong);
  font-family: var(--p-font-heading);
  font-size: var(--p-text-5xl);
  font-weight: var(--p-weight-semibold);
  line-height: var(--p-leading-tight);
}
.c-hero__copy {
  max-width: 42rem;
  margin-top: var(--p-space-6);
  color: var(--color-muted-foreground);
  font-size: var(--p-text-md);
  line-height: var(--p-leading-relaxed);
}

/* ------------------------------------------------------------------- CTA ---- */
.c-cta {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--p-radius-2xl);
  padding: clamp(2.5rem, 6vw, 4.5rem);
  background:
    radial-gradient(circle at 0% 0%, hsl(var(--primary) / 0.14), transparent 55%),
    radial-gradient(circle at 100% 100%, hsl(var(--highlight) / 0.10), transparent 50%),
    var(--color-card);
  text-align: center;
}
.c-cta__title {
  font-family: var(--p-font-heading);
  font-size: var(--p-text-3xl);
  color: var(--color-text-strong);
  max-width: 22ch;
  margin-inline: auto;
}
.c-cta__copy {
  margin: var(--p-space-4) auto 0;
  color: var(--color-muted-foreground);
  max-width: 44ch;
}
.c-cta .c-actions { justify-content: center; }

/* ===== css/utilities/utilities.css ===== */
/* =============================================================================
   ITCSS · UTILITIES — ajustes pontuais de alta especificidade. Prefixo `u-`.
   ============================================================================= */

/* Texto */
.u-text-center { text-align: center; }
.u-text-balance { text-wrap: balance; }
.u-muted { color: var(--color-muted-foreground); }
.u-strong { color: var(--color-text-strong); }
.u-gradient-text {
  background: linear-gradient(120deg, var(--color-primary), hsl(var(--p-blue-300)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.u-highlight { color: var(--color-highlight); }

/* Eyebrow — etiqueta pequena com ponto luminoso */
.u-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--p-space-2);
  width: fit-content;
  border: 1px solid var(--color-border);
  border-radius: var(--p-radius-full);
  background: var(--surface-glass);
  padding: 0.4rem 0.8rem;
  color: var(--color-muted-foreground);
  font-size: var(--p-text-xs);
  font-weight: var(--p-weight-medium);
  letter-spacing: var(--p-tracking-eyebrow);
  text-transform: uppercase;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px);
}

/* Ponto de status luminoso */
.u-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 12px hsl(var(--primary) / 0.6);
}
.u-dot--success { background: var(--color-success); box-shadow: 0 0 12px hsl(var(--success) / 0.6); }
.u-dot--warning { background: var(--color-warning); box-shadow: 0 0 12px hsl(var(--warning) / 0.6); }
.u-dot--danger  { background: var(--color-destructive); box-shadow: 0 0 12px hsl(var(--destructive) / 0.6); }

/* Visibilidade / acessibilidade */
.u-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.u-hide-mobile { display: none; }
@media (min-width: 780px) { .u-hide-mobile { display: revert; } }
@media (min-width: 780px) { .u-show-mobile { display: none; } }

/* Espaçamento pontual */
.u-mt-0 { margin-top: 0; }
.u-mt-2 { margin-top: var(--p-space-2); }
.u-mt-4 { margin-top: var(--p-space-4); }
.u-mt-6 { margin-top: var(--p-space-6); }
.u-mt-8 { margin-top: var(--p-space-8); }

/* Animação de entrada (respeita prefers-reduced-motion via reset) */
.u-reveal {
  animation: dza-reveal 0.8s var(--p-ease-out) both;
}
@keyframes dza-reveal {
  from { opacity: 0; transform: translateY(24px); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ===== css/utilities/animations.css ===== */
/* =============================================================================
   UTILITIES · ANIMATIONS — camada de movimento do DS.
   -----------------------------------------------------------------------------
   Scroll-reveal (via js/dza-motion.js), stagger, micro-interações e ambientes.
   Tudo desligado sob `prefers-reduced-motion: reduce`.
   Para o scroll-reveal funcionar, inclua o script:
       <script src="js/dza-motion.js" defer></script>
   ============================================================================= */

@property --dza-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* ---------------------------------------------------------------------------
   KEYFRAMES
   --------------------------------------------------------------------------- */
@keyframes dza-fade-up   { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes dza-shimmer   { to { background-position: 200% center; } }
@keyframes dza-float     { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes dza-pulse     { 0% { box-shadow: 0 0 0 0 hsl(var(--primary) / 0.5); } 70%, 100% { box-shadow: 0 0 0 7px hsl(var(--primary) / 0); } }
@keyframes dza-rotate    { to { --dza-angle: 360deg; } }
@keyframes dza-marquee   { to { transform: translateX(-50%); } }
@keyframes dza-panel-float {
  0%, 100% { transform: perspective(1200px) rotateX(2deg) rotateY(-3deg) translateY(0); }
  50%      { transform: perspective(1200px) rotateX(2deg) rotateY(-3deg) translateY(-12px); }
}

/* ---------------------------------------------------------------------------
   SCROLL REVEAL — estado inicial só quando há JS (html.js). Sem JS, o conteúdo
   aparece normalmente. `data-animate` define a direção/efeito.
   --------------------------------------------------------------------------- */
.js [data-animate] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.7s var(--p-ease-out),
    transform 0.7s var(--p-ease-out),
    filter 0.7s var(--p-ease-out);
  transition-delay: var(--delay, 0ms);
  will-change: opacity, transform;
}
.js [data-animate="fade"]  { transform: none; }
.js [data-animate="scale"] { transform: scale(0.94); }
.js [data-animate="left"]  { transform: translateX(-34px); }
.js [data-animate="right"] { transform: translateX(34px); }
.js [data-animate="blur"]  { transform: translateY(20px); filter: blur(10px); }

.js [data-animate].is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Reveal de carga (acima da dobra) */
.u-reveal { animation: dza-fade-up 0.8s var(--p-ease-out) both; }

/* ---------------------------------------------------------------------------
   MICRO-INTERAÇÕES
   --------------------------------------------------------------------------- */

/* Sheen — varredura de brilho ao passar o mouse em botões primários */
.c-button--primary,
.c-button--shiny {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.c-button--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform 0.6s var(--p-ease-out);
  pointer-events: none;
}
.c-button--primary:hover::after { transform: translateX(130%); }

/* Shiny CTA — glow rotativo contínuo (inspirado no modelo) */
.c-button--shiny {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  box-shadow: 0 0 0 1px hsl(var(--primary) / 0.5), 0 12px 32px hsl(var(--primary) / 0.35);
}
.c-button--shiny::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from var(--dza-angle), transparent 0%, hsl(var(--p-blue-300)) 18%, transparent 38%);
  animation: dza-rotate 4s linear infinite;
}

/* Shimmer — texto em gradiente animado */
.u-gradient-text { background-size: 200% auto; }
.u-shimmer {
  background-image: linear-gradient(120deg, var(--color-primary), hsl(var(--p-blue-300)) 45%, var(--color-primary));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: dza-shimmer 4s linear infinite;
}

/* Float — flutuação suave de painéis/elementos */
.u-float { animation: dza-float 6s var(--p-ease-in-out) infinite; }
.c-panel--hero { animation: dza-panel-float 7s var(--p-ease-in-out) infinite; }

/* Pulse — anel pulsante em pontos de status */
.u-dot--pulse { animation: dza-pulse 2.2s var(--p-ease-out) infinite; }

/* Hover lift em cards (reforço do --interactive) */
.c-card--interactive { will-change: transform; }

/* ---------------------------------------------------------------------------
   MARQUEE — esteira infinita (logo cloud / provas).
   Duplique o conteúdo do track para loop sem emenda.
   --------------------------------------------------------------------------- */
.c-marquee {
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.c-marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 5vw, 3.5rem);
  width: max-content;
  animation: dza-marquee 26s linear infinite;
}
.c-marquee:hover .c-marquee__track { animation-play-state: paused; }

/* ---------------------------------------------------------------------------
   ACESSIBILIDADE — sob redução de movimento, tudo visível e estático.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-animate] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .c-panel--hero,
  .u-float,
  .u-shimmer,
  .u-dot--pulse,
  .c-button--shiny::before,
  .c-marquee__track { animation: none !important; }
  .c-panel--hero { transform: perspective(1200px) rotateX(2deg) rotateY(-3deg); }
}

@media (max-width: 720px) {
  .c-panel--hero { animation: none; transform: none; }
}

/* ===== css/site.css ===== */
/* =============================================================================
   Site DZA — estilos específicos de página (complementa o DS).
   Carregar DEPOIS de css/main.css.
   ============================================================================= */

/* Skip link acessível */
.skip-link {
  position: absolute;
  left: var(--p-space-4);
  top: -3rem;
  z-index: var(--p-z-toast);
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  padding: 0.6rem 1rem;
  border-radius: var(--p-radius-md);
  transition: top var(--p-motion-fast) var(--p-ease-out);
}
.skip-link:focus { top: var(--p-space-4); }

/* Troca de logo por tema */
.brand-logo--dark { display: none; }
[data-theme="dark"] .brand-logo--light { display: none; }
[data-theme="dark"] .brand-logo--dark { display: block; }

/* Hero do site: badge de prova + métrica inline */
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--p-space-6);
  margin-top: var(--p-space-8);
  color: var(--color-muted-foreground);
  font-size: var(--p-text-sm);
}
.hero-proof strong { color: var(--color-text-strong); font-family: var(--p-font-heading); }

/* Lista de checks com ícone */
.check-list { display: grid; gap: var(--p-space-3); }
.check-list li { display: flex; gap: var(--p-space-3); align-items: flex-start; color: var(--color-muted-foreground); }
.check-list .c-icon { color: var(--color-primary); margin-top: 0.1rem; }

/* Passos numerados (como funciona) */
.step__num {
  display: grid; place-items: center;
  width: 2.5rem; aspect-ratio: 1;
  border-radius: var(--p-radius-full);
  background: hsl(var(--primary) / 0.12);
  color: var(--color-primary);
  font-family: var(--p-font-heading);
  font-weight: var(--p-weight-bold);
  border: 1px solid hsl(var(--primary) / 0.25);
}

/* Bloco de contato (info) */
.contact-line { display: flex; align-items: center; gap: var(--p-space-3); color: var(--color-muted-foreground); }
.contact-line .c-icon { color: var(--color-primary); }

/* Página: hero compacto interno */
.page-hero { padding-block: clamp(3rem, 7vw, 5rem); position: relative; overflow: hidden; }
.page-hero::before {
  content: ""; position: absolute; left: 50%; top: 2rem;
  width: 20rem; height: 20rem; border-radius: 50%;
  background: var(--aura-color); filter: blur(64px);
  transform: translateX(-50%); pointer-events: none;
}

/* Equipe / valores cards já cobertos pelo DS (c-card) */

/* Footer brand logo sizing */
.c-footer .c-brand__logo { width: clamp(7rem, 12vw, 9rem); }

/* =============================================================================
   INTEGRAÇÕES — grade de ferramentas (logos monocromáticos, cores DZA)
   ============================================================================= */
.tool-grid {
  display: grid;
  gap: var(--p-space-4);
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  margin-top: var(--p-space-10);
}
.tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--p-space-3);
  padding: var(--p-space-6) var(--p-space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--p-radius-lg);
  background: var(--color-card);
  color: var(--color-muted-foreground);
  transition:
    color var(--p-motion-base) var(--p-ease-out),
    border-color var(--p-motion-base) var(--p-ease-out),
    transform var(--p-motion-base) var(--p-ease-out);
}
.tool:hover {
  color: var(--color-primary);
  border-color: var(--border-strong);
  transform: translateY(-3px);
}
.tool__logo svg { width: 2.4rem; height: 2.4rem; color: inherit; }
.tool__name { font-size: var(--p-text-sm); font-weight: var(--p-weight-medium); color: var(--color-foreground); }

/* =============================================================================
   HERO VISUAL — "Orquestração de agentes": agentes processando + resultados.
   Monocromático (azul DZA + amarelo de destaque + verde de conclusão).
   ============================================================================= */
.hero-agents {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--p-space-4);
  padding: var(--p-space-5);
  min-height: 26rem;
  background:
    radial-gradient(circle at 82% 0%, hsl(var(--p-blue-500) / 0.08), transparent 55%),
    var(--color-card);
}

.hero-agents__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--p-space-4);
}
.hero-agents__bar strong { font-family: var(--p-font-heading); color: var(--color-text-strong); }

/* Lista de agentes */
.hero-agents__list { display: flex; flex-direction: column; gap: var(--p-space-3); }
.hero-agent {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--p-space-3);
  border: 1px solid var(--color-border); border-radius: var(--p-radius-lg);
  background: var(--surface-glass); padding: var(--p-space-3) var(--p-space-4);
}
.hero-agent .c-icon-box { width: 2.4rem; }
.hero-agent__name { font-weight: var(--p-weight-semibold); color: var(--color-text-strong); font-size: var(--p-text-sm); }
.hero-agent__task { font-size: var(--p-text-xs); margin-top: 1px; }
.hero-agent__check {
  display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: hsl(var(--success) / 0.16); color: var(--color-success);
}
.hero-agent__check .c-icon { width: 1rem; height: 1rem; }

/* Barra de processamento (indeterminada = "trabalhando") */
.hero-bar { height: 0.35rem; border-radius: 999px; background: var(--color-muted); overflow: hidden; margin-top: 0.5rem; }
.hero-bar__fill {
  display: block; height: 100%; width: 42%; border-radius: inherit;
  background: linear-gradient(90deg, hsl(var(--p-blue-500)), hsl(var(--p-blue-300)));
  animation: hero-progress 1.9s var(--p-ease-in-out) infinite;
}
.hero-bar__fill--done {
  width: 100%; animation: none;
  background: linear-gradient(90deg, hsl(var(--success)), hsl(var(--p-success-400)));
}
@keyframes hero-progress { 0% { transform: translateX(-120%); } 100% { transform: translateX(300%); } }

/* Resultados alcançados */
.hero-agents__results {
  margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--p-space-3);
  border-top: 1px solid var(--color-border); padding-top: var(--p-space-4);
}
.hero-result { display: flex; flex-direction: column; gap: 2px; }
.hero-result__v {
  font-family: var(--p-font-heading); font-weight: var(--p-weight-bold);
  font-size: var(--p-text-xl); color: var(--color-text-strong); line-height: 1;
}
.hero-result__l { font-size: var(--p-text-xs); }

@media (prefers-reduced-motion: reduce) {
  .hero-bar__fill { animation: none; transform: none; width: 80%; }
}

/* =============================================================================
   WHATSAPP FLOAT — botão fixo (FAB) em todas as páginas
   ============================================================================= */
.wa-float {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: var(--p-z-toast);
  width: 3.5rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 12px 30px hsl(var(--primary) / 0.4);
  transition: transform var(--p-motion-base) var(--p-ease-out);
  animation: wa-pulse 2.6s var(--p-ease-out) infinite;
}
.wa-float:hover { transform: translateY(-2px) scale(1.06); }
.wa-float svg { width: 1.9rem; height: 1.9rem; fill: currentColor; }
@keyframes wa-pulse {
  0%   { box-shadow: 0 12px 30px hsl(var(--primary) / 0.4), 0 0 0 0 hsl(var(--primary) / 0.45); }
  70%, 100% { box-shadow: 0 12px 30px hsl(var(--primary) / 0.4), 0 0 0 16px hsl(var(--primary) / 0); }
}
@media (prefers-reduced-motion: reduce) {
  .wa-float { animation: none; }
}