/* =====================================================================
     Hub TECSA — Sistema Precision Craft (Swiss + minimalismo japonês)
     Tokens consomem tecsa-brand + ui-tokens-only (gold + border)
     ===================================================================== */

  :root {
    /* Cores oficiais TECSA (tecsa-brand) */
    --tecsa-blue:        #003C82;
    --tecsa-gray:        #8A8C8E;
    --tecsa-black:       #231F20;
    --tecsa-blue-light:  #E6EDF5;
    --tecsa-blue-medium: #1A5A9E;
    --tecsa-gray-light:  #F5F5F5;
    --tecsa-gray-medium: #D0D0D0;
    --tecsa-white:       #FFFFFF;

    /* UI-only (precision-craft) — NÃO usar em material institucional */
    --tecsa-gold:        #C5A55A;
    --tecsa-gold-light:  #F5EFE0;
    --tecsa-border:      #E8E8E8;

    /* ===== Paleta semântica por categoria de produto =====
       Aplicação RESTRITA ao glyph do ícone + fundo soft (12% alpha).
       Não usar em CTAs, type, ou superfícies de card. Mantém regra
       "3 cores por tela" porque o card continua branco/cinza/azul. */
    --c-blue:    #3B82F6;  --c-blue-soft:    rgba(59, 130, 246, 0.12);
    --c-emerald: #10B981;  --c-emerald-soft: rgba(16, 185, 129, 0.12);
    --c-amber:   #F59E0B;  --c-amber-soft:   rgba(245, 158, 11, 0.12);
    --c-violet:  #8B5CF6;  --c-violet-soft:  rgba(139, 92, 246, 0.12);
    --c-pink:    #EC4899;  --c-pink-soft:    rgba(236, 72, 153, 0.12);
    --c-sky:     #0EA5E9;  --c-sky-soft:     rgba(14, 165, 233, 0.12);
    --c-cyan:    #06B6D4;  --c-cyan-soft:    rgba(6, 182, 212, 0.12);
    --c-slate:   #475569;  --c-slate-soft:   rgba(71, 85, 105, 0.10);
    --c-red:     #EF4444;  --c-red-soft:     rgba(239, 68, 68, 0.12);
    --c-gray:    #94A3B8;  --c-gray-soft:    rgba(148, 163, 184, 0.12);

    /* Fonte */
    --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

    /* Espaçamento — grid 8px */
    --space-xs:  4px;
    --space-sm:  8px;
    --space-md:  16px;
    --space-lg:  24px;
    --space-xl:  32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-section: clamp(48px, 6vw, 96px);

    /* Radius — cantos quase retos */
    --r-sm:   2px;
    --r-md:   3px;
    --r-lg:   4px;
    --r-pill: 999px;

    /* Motion — sutil sempre */
    --d-fast:   150ms;
    --d-normal: 300ms;
    --d-slow:   500ms;
    --ease-precision: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-smooth:    cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* =====================================================================
     RESET & base
     ===================================================================== */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html { scroll-behavior: smooth; }
  body {
    background: var(--tecsa-white);
    color: var(--tecsa-black);
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; cursor: pointer; border: 0; background: 0; color: inherit; }
  svg { display: block; }

  ::selection { background: var(--tecsa-blue); color: var(--tecsa-white); }

  /* =====================================================================
     TIPOGRAFIA — Precision Craft scale
     ===================================================================== */
  .kicker {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tecsa-gold);
    display: inline-block;
  }
  .h-hero {
    font-size: clamp(2rem, 1.5rem + 2vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--tecsa-blue);
  }
  .h-section {
    font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--tecsa-blue);
  }
  .h-card {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--tecsa-black);
  }
  .body {
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.7;
    color: var(--tecsa-black);
  }
  .meta {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tecsa-gray);
  }
  .small {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--tecsa-gray);
  }

  /* =====================================================================
     LAYOUT
     ===================================================================== */
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
  }

  /* =====================================================================
     DIVIDER — separador Swiss (anima scaleX da esquerda)
     ===================================================================== */
  .divider {
    height: 1px;
    background: var(--tecsa-border);
    transform-origin: left center;
    width: 100%;
    margin: var(--space-md) 0;
  }
  .divider.strong { background: var(--tecsa-gray-medium); }
  .divider.gold   { background: var(--tecsa-gold); height: 2px; max-width: 48px; margin-top: var(--space-md); }

  /* =====================================================================
     TOP NAV — branco com hairline em baixo
     ===================================================================== */
  .top-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--tecsa-white);
    border-bottom: 1px solid var(--tecsa-border);
    height: 64px;
    display: flex;
    align-items: center;
    transition: box-shadow var(--d-normal) var(--ease-precision);
  }
  .top-nav.scrolled { box-shadow: 0 1px 0 var(--tecsa-border); }

  .top-nav .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    width: 100%;
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
  }
  .brand-mark {
    width: 28px; height: 28px;
    background: var(--tecsa-blue);
    color: var(--tecsa-white);
    border-radius: var(--r-sm);
    display: grid; place-items: center;
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: -0.02em;
  }
  .brand-text {
    font-size: 1rem;
    font-weight: 700;
    color: var(--tecsa-blue);
    letter-spacing: -0.01em;
  }
  .brand-text .sep { color: var(--tecsa-gray); margin: 0 4px; font-weight: 400; }

  /* Nav-pill-group — pílula compacta Swiss */
  .nav-pill-group {
    display: inline-flex;
    background: var(--tecsa-gray-light);
    border: 1px solid var(--tecsa-border);
    border-radius: var(--r-pill);
    padding: 3px;
  }
  .pill-tab {
    padding: 6px 14px;
    border-radius: var(--r-pill);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--tecsa-gray);
    transition: color var(--d-fast) var(--ease-precision),
                background-color var(--d-fast) var(--ease-precision);
  }
  .pill-tab.is-active {
    background: var(--tecsa-white);
    color: var(--tecsa-blue);
    box-shadow: 0 1px 2px rgba(0, 60, 130, 0.08);
  }

  .nav-right { display: flex; align-items: center; gap: var(--space-md); }

  .nav-link {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--tecsa-gray);
    transition: color var(--d-fast) var(--ease-precision);
  }
  .nav-link:hover { color: var(--tecsa-blue); }

  /* User chip — Swiss square */
  .user-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 4px 4px 4px var(--space-sm);
    background: var(--tecsa-white);
    border: 1px solid var(--tecsa-border);
    border-radius: var(--r-md);
    transition: border-color var(--d-fast) var(--ease-precision);
  }
  .user-chip:hover { border-color: var(--tecsa-gray-medium); }
  .user-avatar {
    width: 28px; height: 28px;
    border-radius: var(--r-sm);
    background: var(--tecsa-blue);
    color: var(--tecsa-white);
    display: grid; place-items: center;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    flex-shrink: 0;
  }
  .user-meta { display: flex; flex-direction: column; line-height: 1.2; }
  .user-name { font-size: 0.75rem; font-weight: 600; color: var(--tecsa-black); }
  .user-email { font-size: 0.6875rem; color: var(--tecsa-gray); font-weight: 400; }
  .user-logout {
    width: 28px; height: 28px;
    background: var(--tecsa-gray-light);
    border-radius: var(--r-sm);
    display: grid; place-items: center;
    color: var(--tecsa-gray);
    margin-left: 4px;
    transition: background-color var(--d-fast) var(--ease-precision),
                color var(--d-fast) var(--ease-precision);
  }
  .user-logout:hover { background: var(--tecsa-blue); color: var(--tecsa-white); }
  .user-logout svg { width: 13px; height: 13px; }

  /* =====================================================================
     BUTTONS — Precision Craft
     ===================================================================== */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    height: 40px;
    padding: 0 var(--space-lg);
    border-radius: var(--r-md);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: background-color var(--d-normal) var(--ease-precision),
                border-color var(--d-normal) var(--ease-precision),
                color var(--d-normal) var(--ease-precision);
    white-space: nowrap;
  }
  .btn-primary {
    background: var(--tecsa-blue);
    color: var(--tecsa-white);
  }
  .btn-primary:hover { background: var(--tecsa-blue-medium); }
  .btn-secondary {
    background: transparent;
    color: var(--tecsa-blue);
    border: 1px solid var(--tecsa-blue);
  }
  .btn-secondary:hover { background: var(--tecsa-blue-light); }

  /* =====================================================================
     HERO BAND
     ===================================================================== */
  .hero {
    padding-top: var(--space-section);
    padding-bottom: var(--space-2xl);
  }
  .hero-grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: var(--space-3xl);
    align-items: center;
  }
  .hero-left { max-width: 540px; }
  .hero-kicker-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
  }
  .hero-status-dot {
    width: 8px; height: 8px;
    background: #10b981;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .hero-h1 { margin-bottom: var(--space-lg); }
  .hero-h1 .word { display: inline-block; }
  .hero-sub {
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.65;
    color: var(--tecsa-black);
    margin-bottom: var(--space-xl);
    max-width: 460px;
  }
  .hero-cta-row { display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; }

  /* Hero mockup card — bordas finas, sem shadow chamativa */
  .hero-mockup {
    border: 1px solid var(--tecsa-border);
    border-radius: var(--r-md);
    background: var(--tecsa-white);
    overflow: hidden;
  }
  .mockup-head {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--tecsa-border);
    background: var(--tecsa-gray-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
  }
  .mockup-dots { display: flex; gap: 5px; }
  .mockup-dots span {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--tecsa-gray-medium);
  }
  .mockup-url {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    font-size: 0.6875rem;
    color: var(--tecsa-gray);
    background: var(--tecsa-white);
    border: 1px solid var(--tecsa-border);
    padding: 3px 10px;
    border-radius: var(--r-sm);
  }
  .mockup-body {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }
  .mockup-row {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--tecsa-white);
    border: 1px solid var(--tecsa-border);
    border-radius: var(--r-md);
    transition: border-color var(--d-normal) var(--ease-precision);
  }
  .mockup-row:hover { border-color: var(--tecsa-gray-medium); }
  .mockup-icon {
    width: 32px; height: 32px;
    background: var(--tecsa-blue-light);
    color: var(--tecsa-blue);
    border-radius: var(--r-sm);
    display: grid; place-items: center;
  }
  .mockup-icon svg { width: 16px; height: 16px; stroke-width: 1.5; }
  .mockup-text { display: flex; flex-direction: column; gap: 2px; }
  .mockup-name { font-size: 0.8125rem; font-weight: 600; color: var(--tecsa-black); }
  .mockup-url-row { font-size: 0.6875rem; color: var(--tecsa-gray); }
  .mockup-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    background: var(--tecsa-gold-light);
    color: var(--tecsa-gold);
    border-radius: var(--r-pill);
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .mockup-status .dot {
    width: 5px; height: 5px;
    background: var(--tecsa-gold);
    border-radius: 50%;
  }

  /* =====================================================================
     SECTION (genérica)
     ===================================================================== */
  .section {
    padding-top: var(--space-section);
    padding-bottom: var(--space-section);
    border-top: 1px solid var(--tecsa-border);
  }
  .section-header { max-width: 720px; margin-bottom: var(--space-2xl); }
  .section-header .kicker { margin-bottom: var(--space-sm); }
  .section-header .h-section { margin-bottom: var(--space-md); }
  .section-header .body { color: var(--tecsa-gray); font-size: 1rem; }

  /* =====================================================================
     PRODUCT CARDS — bordas finas · cantos quase retos
     ===================================================================== */
  .grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
  }

  .product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--space-lg);
    background: var(--tecsa-white);
    border: 1px solid var(--tecsa-border);
    border-radius: var(--r-md);
    transition: border-color var(--d-normal) var(--ease-precision),
                background-color var(--d-normal) var(--ease-precision);
    overflow: hidden;
  }
  .product-card::before {
    /* Linha gold subtle no topo · scaleX 0 → 1 ao hover */
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--tecsa-gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--d-slow) var(--ease-precision);
  }
  .product-card:hover {
    border-color: var(--tecsa-gray-medium);
    background: var(--tecsa-gray-light);
  }
  .product-card:hover::before { transform: scaleX(1); }
  .product-card.backup::before { background: var(--tecsa-gray); }

  /* ===== Cores por produto — só no ícone (precision-craft conforme) ===== */
  .product-card.c-blue    .product-icon { background: var(--c-blue-soft);    color: var(--c-blue); }
  .product-card.c-emerald .product-icon { background: var(--c-emerald-soft); color: var(--c-emerald); }
  .product-card.c-amber   .product-icon { background: var(--c-amber-soft);   color: var(--c-amber); }
  .product-card.c-violet  .product-icon { background: var(--c-violet-soft);  color: var(--c-violet); }
  .product-card.c-pink    .product-icon { background: var(--c-pink-soft);    color: var(--c-pink); }
  .product-card.c-sky     .product-icon { background: var(--c-sky-soft);     color: var(--c-sky); }
  .product-card.c-cyan    .product-icon { background: var(--c-cyan-soft);    color: var(--c-cyan); }
  .product-card.c-slate   .product-icon { background: var(--c-slate-soft);   color: var(--c-slate); }
  .product-card.c-red     .product-icon { background: var(--c-red-soft);     color: var(--c-red); }
  .product-card.c-gray    .product-icon { background: var(--c-gray-soft);    color: var(--c-gray); }

  /* Hover: ícone fica sólido na cor (ainda Precision Craft — só o ícone muda) */
  .product-card.c-blue:hover    .product-icon { background: var(--c-blue);    color: var(--tecsa-white); }
  .product-card.c-emerald:hover .product-icon { background: var(--c-emerald); color: var(--tecsa-white); }
  .product-card.c-amber:hover   .product-icon { background: var(--c-amber);   color: var(--tecsa-white); }
  .product-card.c-violet:hover  .product-icon { background: var(--c-violet);  color: var(--tecsa-white); }
  .product-card.c-pink:hover    .product-icon { background: var(--c-pink);    color: var(--tecsa-white); }
  .product-card.c-sky:hover     .product-icon { background: var(--c-sky);     color: var(--tecsa-white); }
  .product-card.c-cyan:hover    .product-icon { background: var(--c-cyan);    color: var(--tecsa-white); }
  .product-card.c-slate:hover   .product-icon { background: var(--c-slate);   color: var(--tecsa-white); }
  .product-card.c-red:hover     .product-icon { background: var(--c-red);     color: var(--tecsa-white); }
  .product-card.c-gray:hover    .product-icon { background: var(--c-gray);    color: var(--tecsa-white); }

  /* Hover: linha gold-top vira a cor do produto (rítmo individual) */
  .product-card.c-blue:hover::before    { background: var(--c-blue); }
  .product-card.c-emerald:hover::before { background: var(--c-emerald); }
  .product-card.c-amber:hover::before   { background: var(--c-amber); }
  .product-card.c-violet:hover::before  { background: var(--c-violet); }
  .product-card.c-pink:hover::before    { background: var(--c-pink); }
  .product-card.c-sky:hover::before     { background: var(--c-sky); }
  .product-card.c-cyan:hover::before    { background: var(--c-cyan); }
  .product-card.c-slate:hover::before   { background: var(--c-slate); }
  .product-card.c-red:hover::before     { background: var(--c-red); }

  /* Mockup icons coloridos */
  .mockup-icon.c-blue    { background: var(--c-blue-soft);    color: var(--c-blue); }
  .mockup-icon.c-pink    { background: var(--c-pink-soft);    color: var(--c-pink); }
  .mockup-icon.c-cyan    { background: var(--c-cyan-soft);    color: var(--c-cyan); }
  .mockup-icon.c-sky     { background: var(--c-sky-soft);     color: var(--c-sky); }
  .mockup-icon.c-violet  { background: var(--c-violet-soft);  color: var(--c-violet); }
  .mockup-icon.c-emerald { background: var(--c-emerald-soft); color: var(--c-emerald); }

  /* Status pill no mockup vira colorida (suave) */
  .mockup-status.c-emerald { background: var(--c-emerald-soft); color: var(--c-emerald); }
  .mockup-status.c-emerald .dot { background: var(--c-emerald); }

  /* Floating decorative dots no hero (sutis · só decoração spacial) */
  .hero-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
  }
  .hero-particles .p {
    position: absolute;
    width: 6px; height: 6px;
    border-radius: 50%;
    opacity: 0.35;
    filter: blur(0.5px);
  }
  .hero-particles .p1 { top: 14%; left: 8%;  background: var(--c-violet); }
  .hero-particles .p2 { top: 28%; right: 12%; background: var(--c-amber); }
  .hero-particles .p3 { bottom: 30%; left: 18%; background: var(--c-cyan); }
  .hero-particles .p4 { bottom: 12%; right: 8%; background: var(--c-pink); }
  .hero-particles .p5 { top: 52%; left: 38%; background: var(--c-emerald); }
  .hero-particles .p6 { bottom: 42%; right: 32%; background: var(--c-blue); }
  .hero { position: relative; }
  .hero > .container { position: relative; z-index: 1; }

  .product-card-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    margin-bottom: var(--space-md);
  }
  .product-icon {
    width: 40px; height: 40px;
    background: var(--tecsa-blue-light);
    color: var(--tecsa-blue);
    border-radius: var(--r-sm);
    display: grid; place-items: center;
    transition: background-color var(--d-normal) var(--ease-precision),
                color var(--d-normal) var(--ease-precision);
  }
  .product-icon svg { width: 20px; height: 20px; stroke-width: 1.5; }
  .product-card.backup .product-icon {
    background: var(--tecsa-gray-light);
    color: var(--tecsa-gray);
  }
  .product-card:hover .product-icon {
    background: var(--tecsa-blue);
    color: var(--tecsa-white);
  }
  .product-card.backup:hover .product-icon {
    background: var(--tecsa-gray);
    color: var(--tecsa-white);
  }

  .badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--r-pill);
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--tecsa-gold-light);
    color: var(--tecsa-gold);
    line-height: 1;
  }
  .badge .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--tecsa-gold); }
  .badge.gray { background: var(--tecsa-gray-light); color: var(--tecsa-gray); }
  .badge.gray .dot { background: var(--tecsa-gray); }

  .product-name { margin-bottom: var(--space-xs); color: var(--tecsa-black); }
  .product-desc {
    color: var(--tecsa-gray);
    font-size: 0.875rem;
    line-height: 1.6;
    flex: 1;
    margin-bottom: var(--space-md);
  }
  .product-foot {
    padding-top: var(--space-sm);
    border-top: 1px solid var(--tecsa-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
  }
  .product-url {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.6875rem;
    color: var(--tecsa-gray);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
  }
  .product-arrow {
    width: 24px; height: 24px;
    background: var(--tecsa-white);
    border: 1px solid var(--tecsa-border);
    border-radius: var(--r-sm);
    display: grid; place-items: center;
    color: var(--tecsa-gray);
    flex-shrink: 0;
    transition: background-color var(--d-normal) var(--ease-precision),
                border-color var(--d-normal) var(--ease-precision),
                color var(--d-normal) var(--ease-precision),
                transform var(--d-normal) var(--ease-precision);
  }
  .product-arrow svg { width: 12px; height: 12px; stroke-width: 2; }
  .product-card:hover .product-arrow {
    background: var(--tecsa-blue);
    border-color: var(--tecsa-blue);
    color: var(--tecsa-white);
    transform: translate(2px, -2px);
  }
  .product-card.backup:hover .product-arrow {
    background: var(--tecsa-gray);
    border-color: var(--tecsa-gray);
  }

  /* =====================================================================
     CTA BAND — info box Precision Craft (border-left blue)
     ===================================================================== */
  .cta-band {
    background: var(--tecsa-gray-light);
    border-left: 3px solid var(--tecsa-blue);
    padding: var(--space-2xl);
    border-radius: var(--r-md);
    margin-top: var(--space-2xl);
  }
  .cta-band-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-xl);
    align-items: center;
  }
  .cta-band .kicker { margin-bottom: var(--space-sm); }
  .cta-band .h-section { margin-bottom: var(--space-xs); }
  .cta-band p { color: var(--tecsa-gray); font-size: 0.9375rem; }

  /* =====================================================================
     FOOTER — branco com hairline (NÃO dark · Precision Craft é light)
     ===================================================================== */
  footer {
    background: var(--tecsa-white);
    border-top: 1px solid var(--tecsa-border);
    padding: var(--space-3xl) 0 var(--space-lg);
    margin-top: auto;
  }
  .footer-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-2xl);
  }
  .footer-tag {
    font-size: 0.875rem;
    color: var(--tecsa-gray);
    max-width: 380px;
    line-height: 1.6;
  }

  /* Footer minimal v6 — só copy + version + sair */
  .footer-minimal {
    border-top: 1px solid var(--tecsa-border);
    padding: var(--space-xl) 0;
    background: var(--tecsa-white);
    margin-top: var(--space-2xl);
  }
  .footer-minimal .footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md);
  }
  .footer-meta {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    font-size: 0.75rem;
    color: var(--tecsa-gray);
    flex-wrap: wrap;
  }
  .footer-version { font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem; }
  .footer-logout {
    color: var(--tecsa-gray);
    transition: color var(--d-fast) var(--ease-precision);
  }
  .footer-logout:hover { color: var(--tecsa-blue); }

  .footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
  }
  .footer-col h4 {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--tecsa-black);
    margin-bottom: var(--space-md);
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
  .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-sm); }
  .footer-col a {
    font-size: 0.8125rem;
    color: var(--tecsa-gray);
    transition: color var(--d-fast) var(--ease-precision);
  }
  .footer-col a:hover { color: var(--tecsa-blue); }

  .footer-bottom {
    margin-top: var(--space-2xl);
    padding-top: var(--space-md);
    border-top: 1px solid var(--tecsa-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    font-size: 0.6875rem;
    color: var(--tecsa-gray);
    flex-wrap: wrap;
  }

  /* =====================================================================
     FILTER STATE
     ===================================================================== */
  body[data-filter="prod"]   .product-card.backup { display: none; }
  body[data-filter="backup"] .product-card.prod   { display: none; }
  body[data-filter="prod"]   #section-backup { display: none; }
  body[data-filter="backup"] #section-prod   { display: none; }

  /* =====================================================================
     RESPONSIVE
     ===================================================================== */
  @media (max-width: 1024px) {
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 768px) {
    .hero-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
    .grid-3 { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .nav-pill-group { display: none; }
    .cta-band-grid { grid-template-columns: 1fr; gap: var(--space-md); }
    .user-meta { display: none; }
  }
  @media (max-width: 480px) {
    .footer-grid { grid-template-columns: 1fr; }
    .nav-link { display: none; }
  }

  /* =====================================================================
     MOTION CONTROL — GSAP wins. CSS só transitions de hover.
     ===================================================================== */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
    }
  }