/* ═══════════════════════════════════════════════════════════════════
   INTRALAB TECNOLOGIA — Design System CSS
   Tokens extraídos de www.intralab.com.br · Versão 1.0
   Fontes: Plus Jakarta Sans (display) + DM Sans (corpo)
   Neste site as fontes são hospedadas localmente (/fonts/fontes.css, gerado por
   scripts/fontes.mjs) — não use o link do Google Fonts abaixo, mantido só como
   referência de quais famílias e pesos compõem a marca:
   <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* ── Brand Blues (navy profundo → céu) ── */
    --blue-900: #0a1628;   /* hero/fundo escuro, texto máximo contraste */
    --blue-800: #0f2240;
    --blue-700: #143260;   /* títulos sobre claro */
    --blue-600: #1a4a8a;   /* primária da marca */
    --blue-500: #2068b8;   /* botões, links, interface */
    --blue-400: #3a8dd9;   /* hover, destaques */
    --blue-300: #5faee8;
    --blue-200: #8ecaf0;
    --blue-100: #c5e3f8;
    --blue-50:  #eaf4fd;   /* fundos suaves */

    /* ── Accent ── */
    --accent:      #00d4ff;            /* cyan vibrante — detalhes tech, glow */
    --accent-dim:  rgba(0,212,255,0.15);

    /* ── Neutros (slate) ── */
    --gray-50:  #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;   /* corpo de texto */
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --white:    #ffffff;

    /* ── Semânticas ── */
    --whatsapp:  #25d366;
    --success:   #16a34a;
    --warning:   #d97706;
    --error:     #dc2626;

    /* ── Tipografia ── */
    --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-body:    'DM Sans', system-ui, sans-serif;

    --text-xs:  0.75rem;  --text-sm: 0.875rem; --text-base: 1rem;
    --text-md:  1.125rem; --text-lg: 1.25rem;  --text-xl: 1.5rem;
    --text-2xl: 2rem;     --text-3xl: 2.5rem;
    --text-4xl: clamp(2.4rem, 5vw, 3.75rem);

    /* ── Layout / forma ── */
    --max-width: 1200px;
    --radius-sm: 8px;  --radius: 12px;  --radius-lg: 20px;  --radius-full: 9999px;

    /* ── Sombras (base navy) ── */
    --shadow-sm: 0 1px 3px rgba(10,22,40,0.08);
    --shadow:    0 8px 30px rgba(10,22,40,0.10);
    --shadow-lg: 0 20px 50px rgba(10,22,40,0.16);
    --glow:      0 0 40px rgba(0,212,255,0.35);

    /* ── Gradientes assinatura ── */
    --grad-hero:    linear-gradient(135deg, #0a1628 0%, #143260 40%, #1a4a8a 100%);
    --grad-accent:  linear-gradient(135deg, #00d4ff, #5faee8);
    --grad-line:    linear-gradient(90deg, #2068b8, #00d4ff);

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --transition: 0.3s var(--ease);
}

/* ─── Reset & base ─── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--gray-600);
    background: var(--white);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}
img, svg, video { display:block; max-width:100%; }
a { color: var(--blue-500); text-decoration:none; transition: color var(--transition); }
a:hover { color: var(--blue-700); }

h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); color: var(--blue-700); line-height:1.12; font-weight:800; letter-spacing:-1px; }
h1 { font-size: var(--text-4xl); letter-spacing:-1.5px; }
h2 { font-size: clamp(var(--text-2xl), 3.5vw, 2.75rem); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-lg); font-weight:700; }
p  { color: var(--gray-500); line-height:1.8; }
strong { color: var(--blue-700); font-weight:700; }

.text-gradient { background: var(--grad-accent); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.text-label { font-family: var(--font-display); font-size: var(--text-xs); font-weight:700; color: var(--blue-500); text-transform:uppercase; letter-spacing:2px; }

/* ─── Layout ─── */
.container { max-width: var(--max-width); margin:0 auto; padding:0 2rem; }
.section { padding: 100px 0; }
.section-dark { background: var(--grad-hero); color: var(--white); position:relative; }
.section-dark h1,.section-dark h2,.section-dark h3 { color: var(--white); }
.section-dark p { color: rgba(255,255,255,0.72); }
/* Grade técnica decorativa para fundos escuros (hero) */
.tech-grid::before {
    content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
    background-image:
      linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* ─── Botões ─── */
.btn { display:inline-flex; align-items:center; gap:.5rem; padding:14px 30px;
    font-family: var(--font-display); font-weight:600; font-size:var(--text-base);
    border:none; border-radius: var(--radius); cursor:pointer; transition: all var(--transition); }
.btn-primary { background: var(--blue-500); color:#fff; }
.btn-primary:hover { background: var(--blue-600); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-accent { background: var(--accent); color: var(--blue-900); font-weight:700; }
.btn-accent:hover { transform: translateY(-2px); box-shadow: var(--glow); }
.btn-outline { background:transparent; color:#fff; border:2px solid rgba(255,255,255,.3); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-whatsapp { background: var(--whatsapp); color:#fff; }

/* ─── Cards ─── */
.card { background:#fff; border:1px solid var(--gray-200); border-radius: var(--radius-lg);
    padding:2.5rem; transition: all var(--transition); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--blue-200); }
.card-dark { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); backdrop-filter: blur(8px); }

/* ─── Badge / tag ─── */
.badge { display:inline-flex; align-items:center; gap:.5rem; padding:6px 16px;
    border-radius: var(--radius-full); background: var(--blue-50); color: var(--blue-600);
    font-size: var(--text-sm); font-weight:600; }
.badge-accent { background: var(--accent-dim); color: var(--blue-700); }
.badge .dot { width:7px; height:7px; border-radius:50%; background: var(--accent); }

@media (max-width:768px){ :root{ --max-width:100%; } .section{ padding:64px 0; } .container{ padding:0 1.25rem; } }