/* ============================================================
   MiridanHUB — Design System v10.0  "Midnight Indigo"
   Indigo tech · Cyan produto · Emerald badge · 2026
   ============================================================ */

/* ── Tokens ──────────────────────────────────────────────── */
:root {
    /* Backgrounds — gray neutro: indigo aparece só onde importa
       Alternância: --bg (gray-50) ↔ --bg-surface (branco) */
    --bg:           #F9FAFB;   /* gray-50  — fundo principal, neutro */
    --bg-surface:   #FFFFFF;   /* branco   — seções alternadas       */
    --bg-raised:    #F3F4F6;   /* gray-100 — hover / elementos elevados */
    --bg-card:      #FFFFFF;   /* cards — sempre brancos              */

    /* Borders — base gray, neutros */
    --border:       rgba(17,24,39,0.08);
    --border-hover: rgba(17,24,39,0.16);

    /* Text — família gray: legível, sem cast colorido */
    --text:         #374151;   /* gray-700 — corpo (5.9:1 vs branco)  */
    --text-strong:  #111827;   /* gray-900 — headings                 */
    --text-muted:   #6B7280;   /* gray-500 — 4.6:1 vs branco, WCAG AA */

    /* Accent — Indigo: tech-forward, sem conotação médica */
    --blue:         #4F46E5;   /* indigo-600 — 7.0:1 vs branco */
    --blue-light:   #6366F1;   /* indigo-500 — hover/secundário */
    --blue-dark:    #3730A3;   /* indigo-800 — pressed */
    --blue-bg:      rgba(79,70,229,0.07);
    --blue-glow:    rgba(79,70,229,0.18);

    /* Accent secundário — Violet (Miridan ERP) */
    --purple:       #7C3AED;   /* violet-600 */
    --purple-light: #8B5CF6;   /* violet-500 — hover */
    --purple-dark:  #5B21B6;   /* violet-700 — pressed */
    --purple-bg:    rgba(124,58,237,0.07);
    --purple-glow:  rgba(124,58,237,0.15);

    /* Emerald — serviços
       Emerald-500 (amarelo-verde) é visualmente distinto do cyan (azul-verde)
       — hue claramente diferente, sem confusão entre Produtos × Serviços */
    --emerald:       #059669;  /* emerald-600 — 4.5:1 vs branco */
    --emerald-light: #10B981;  /* emerald-500 — hover */
    --emerald-dark:  #047857;  /* emerald-700 — pressed */
    --emerald-bg:    rgba(5,150,105,0.07);
    --emerald-glow:  rgba(5,150,105,0.15);

    /* Vermelho — segurança / validação */
    --red:       #DC2626;      /* red-600 — 5.9:1 vs branco */
    --red-dark:  #B91C1C;
    --red-bg:    rgba(220,38,38,0.07);

    /* Âmbar — WordPress / atenção */
    --amber:       #B45309;    /* amber-700 — 4.6:1 vs branco */
    --amber-light: #D97706;    /* amber-600 */
    --amber-bg:    rgba(180,83,9,0.07);

    /* Mockup window chrome dots */
    --dot-red:   #EF4444;
    --dot-amber: #F59E0B;
    --dot-green: #10B981;

    /* Texto inverso — sobre fundos coloridos sólidos */
    --text-inverse: #FFFFFF;

    /* Inputs — estados de foco */
    --input-border-focus: rgba(79,70,229,0.40);

    /* Gradients */
    --gradient:      linear-gradient(135deg, var(--blue-dark) 0%, var(--blue-light) 100%);
    --gradient-soft: linear-gradient(135deg, var(--blue-bg) 0%, rgba(79,70,229,0.02) 100%);

    /* Shadows — base gray, sombras discretas */
    --shadow-sm:          0 1px 3px rgba(17,24,39,0.06), 0 1px 6px rgba(17,24,39,0.08);
    --shadow-md:          0 4px 14px rgba(17,24,39,0.09), 0 2px 4px rgba(17,24,39,0.05);
    --shadow-lg:          0 20px 40px rgba(17,24,39,0.11), 0 8px 16px rgba(17,24,39,0.07);
    --shadow-glow-blue:   0 4px 20px rgba(79,70,229,0.28);
    --shadow-glow-purple: 0 4px 20px rgba(124,58,237,0.25);

    /* Radii */
    --r-pill: 9999px;
    --r-xl:   20px;
    --r-lg:   14px;
    --r-md:   10px;
    --r-sm:   6px;

    /* Typography */
    --font: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Legacy compat */
    --color-primary:      var(--blue);
    --color-accent:       var(--blue);
    --color-accent-light: var(--blue-light);
    --color-accent-dark:  var(--blue-dark);
    --color-text-light:   var(--text-muted);
    --color-gray-border:  var(--border);
    --color-gray-light:   var(--bg-surface);
    --color-gray-bg:      var(--bg);
    --color-white:        #FFFFFF;
    --gradient-primary:   var(--gradient);
    --gradient-accent:    var(--gradient);
    --gradient-hero:      var(--gradient);
    --radius-md:          var(--r-sm);
    --radius-lg:          var(--r-md);
}

/* ── Reset / Base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    margin: 0; padding: 0;
    overflow-x: hidden;
    font-weight: 400;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { color: var(--text-strong); }
p { color: var(--text); margin-bottom: 1rem; }
a { transition: all 0.2s ease; }

/* ── Utilities ───────────────────────────────────────────── */
.text-gradient {
    /* teal claro para teal escuro — sutil, não rainbow */
    background: linear-gradient(120deg, var(--blue) 0%, var(--blue-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.text-strong       { color: var(--text-strong) !important; }
.text-muted-hub    { color: var(--text-muted)  !important; }
.text-accent       { color: var(--blue)        !important; }
.text-accent-light { color: var(--blue-light)  !important; }
.text-primary-dark { color: var(--text-strong) !important; }
.bg-primary-dark   { background: var(--bg-raised)  !important; }
.bg-gray-light     { background: var(--bg-surface) !important; }
.bg-white          { background: var(--bg-card)    !important; }

/* Orbs desativados — substituídos por atmosfera no hero */
.hub-orb { display: none !important; }

/* ── Section Labels ──────────────────────────────────────── */
/* Estilo editorial: linha + texto. Sem pill/badge/fundo. */
.section-headline {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 1rem;
}
.section-headline::before {
    content: '';
    display: block;
    width: 24px;
    height: 2px;
    background: var(--blue);
    flex-shrink: 0;
}

.section-title {
    font-weight: 800;
    font-size: 2.25rem;
    line-height: 1.18;
    color: var(--text-strong);
    margin-bottom: 1.25rem;
    letter-spacing: -0.03em;
}
.display-title {
    font-size: clamp(2.4rem, 5vw, 4.5rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.04em;
    color: var(--text-strong);
}

/* ── Hero Section ────────────────────────────────────────── */
.hero-section {
    background: #0A0F1E;   /* navy profundo — hero escuro, restante do site claro */
    min-height: 82vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding-top: 7rem;
    padding-bottom: 6rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
/* Grade arquitetônica + brilho de marca — distinto dos blobs genéricos */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image:
        linear-gradient(rgba(99,102,241,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99,102,241,0.08) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 40%, black 30%, transparent 100%);
    mask-image: radial-gradient(ellipse 90% 90% at 50% 40%, black 30%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}
/* Brilho de marca — único, posicionado, não genérico */
.hero-section::after {
    content: '';
    position: absolute;
    top: -20%; left: -10%;
    width: 55%; height: 70%;
    background: radial-gradient(ellipse at center, rgba(79,70,229,0.18) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Textos do hero: overrides para fundo escuro */
.hero-section .hero-title      { color: #FFFFFF; }
.hero-section .hero-title span { color: #A5B4FC; }  /* indigo-300 — destaque coeso com a marca */
.hero-section .hero-subtitle   { color: rgba(255,255,255,0.65); }
.hero-section .section-headline { color: #A5B4FC; }
.hero-section .section-headline::before { background: #A5B4FC; }
/* btn-corp-outline no hero escuro: comportamento ghost automático em todos os pages */
.hero-section .btn-corp-outline {
    color: rgba(255,255,255,0.82) !important;
    border-color: rgba(255,255,255,0.20) !important;
    background: transparent;
}
.hero-section .btn-corp-outline:hover {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.38) !important;
    color: #FFFFFF !important;
}
/* Mockup: borda discreta + sombra dramática sobre fundo escuro */
.hero-section .mockup-wrapper {
    border-color: rgba(255,255,255,0.10);
    box-shadow: 0 32px 80px rgba(0,0,0,0.55), 0 8px 24px rgba(0,0,0,0.32);
}

.hero-inner {
    min-height: 42vh;
    padding-top: 8rem;
    padding-bottom: 5rem;
}
.hero-title {
    font-size: 3.6rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.04em;
    margin-bottom: 1.5rem;
    color: var(--text-strong);
}
/* Destaque no título — teal sólido, sem gradiente */
.hero-title span { color: var(--blue); }
.hero-subtitle {
    font-size: 1.05rem;
    color: var(--text);
    max-width: 600px;
    line-height: 1.75;
    margin-bottom: 2.5rem;
}

/* ── Trust Bar ───────────────────────────────────────────── */
.trust-bar {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--bg-surface);
    padding: 1.2rem 0;
}
.trust-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--text-muted);
    font-size: 0.855rem;
    font-weight: 500;
}
.trust-item i { color: var(--blue); font-size: 0.95rem; }
.trust-divider { width: 1px; height: 20px; background: var(--border); }

/* ── Cards ───────────────────────────────────────────────── */
.glass-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 2rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    box-shadow: var(--shadow-sm);
}
.glass-card:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-md);
    background: var(--bg-raised);
    transform: translateY(-2px);
}

/* ── Product Cards ───────────────────────────────────────── */
.product-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 2.5rem 2rem;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
    box-shadow: var(--shadow-sm);
}
.product-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-hover);
    background: var(--bg-raised);
}
.product-card-blue::before  { background: var(--blue); }
.product-card-blue:hover    { box-shadow: var(--shadow-glow-blue), var(--shadow-md); border-color: rgba(14,116,144,0.25); }
.product-card-purple::before{ background: var(--purple); }
.product-card-purple:hover  { box-shadow: var(--shadow-glow-purple), var(--shadow-md); border-color: rgba(79,70,229,0.25); }

.product-icon {
    width: 48px; height: 48px;
    display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 1.3rem;
    border-radius: var(--r-md);
    margin-bottom: 1.5rem;
}
.product-icon-blue   { background: var(--blue-bg);   color: var(--blue); }
.product-icon-purple { background: var(--purple-bg); color: var(--purple); }

/* ── Feature Grid ────────────────────────────────────────── */
/* Estilo editorial: acento de borda esquerda no hover */
.feature-item {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid transparent;
    border-radius: var(--r-lg);
    transition: border-color 0.2s ease, border-left-color 0.2s ease, background 0.2s ease;
}
.feature-item:hover {
    border-left-color: var(--blue);
    border-color: var(--border-hover);
    background: var(--bg-raised);
}
.feature-icon {
    width: 40px; height: 40px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--blue-bg);
    color: var(--blue);
    font-size: 1rem;
    border-radius: var(--r-md);
}

/* ── Service Cards ───────────────────────────────────────── */
.service-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: 2px solid transparent;
    border-radius: var(--r-lg);
    padding: 2.5rem 2rem;
    height: 100%;
    transition: border-top-color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    box-shadow: var(--shadow-sm);
}
.service-card:hover {
    border-top-color: var(--blue);
    border-color: var(--border-hover);
    background: var(--bg-raised);
}
.service-icon {
    font-size: 1.4rem;
    color: var(--blue);
    margin-bottom: 1.5rem;
    background: var(--blue-bg);
    width: 52px; height: 52px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r-md);
}

/* ── Mockup ──────────────────────────────────────────────── */
.mockup-wrapper {
    position: relative; z-index: 20;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
}
.mockup-header {
    height: 34px;
    background: var(--bg-raised);
    display: flex; align-items: center;
    padding: 0 16px; gap: 8px;
    border-bottom: 1px solid var(--border);
}
.mockup-dot { width: 10px; height: 10px; border-radius: 50%; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn-corp {
    background: var(--blue);
    color: var(--text-inverse) !important;
    border: none;
    padding: 11px 26px;
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none !important;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    cursor: pointer;
    border-radius: var(--r-pill);
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.btn-corp:hover {
    background: var(--blue-dark);
    color: var(--text-inverse) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-glow-blue);
}
.btn-corp-outline {
    background: transparent;
    color: var(--text-strong) !important;
    border: 1px solid var(--border-hover);
    padding: 11px 26px;
    font-weight: 500;
    font-size: 0.92rem;
    text-decoration: none !important;
    display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer;
    border-radius: var(--r-pill);
    transition: all 0.2s ease;
}
.btn-corp-outline:hover {
    background: var(--bg-surface);
    border-color: var(--text-muted);
    color: var(--text-strong) !important;
}
/* Variante ghost — para uso sobre fundos escuros (hero dark) */
.btn-corp-ghost {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.88) !important;
    border: 1px solid rgba(255,255,255,0.22);
    padding: 11px 26px;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none !important;
    display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer;
    border-radius: var(--r-pill);
    transition: all 0.2s ease;
}
.btn-corp-ghost:hover {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.40);
    color: #FFFFFF !important;
    transform: translateY(-1px);
}
.btn-corp-dark {
    background: var(--bg-raised);
    color: var(--text-strong) !important;
    border: 1px solid var(--border-hover);
    padding: 11px 26px;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none !important;
    display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer;
    border-radius: var(--r-pill);
    transition: all 0.2s ease;
}
.btn-corp-dark:hover {
    background: var(--bg-card);
    border-color: var(--text-muted);
    color: var(--text-strong) !important;
}

/* btn-vs / btn-vs-outline — Planos */
.btn-vs {
    background: var(--blue);
    color: var(--text-inverse) !important;
    border: none;
    padding: 13px 28px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none !important;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    cursor: pointer;
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-glow-blue);
    transition: background 0.2s ease, transform 0.15s ease;
}
.btn-vs:hover { background: var(--blue-dark); transform: translateY(-1px); color: var(--text-inverse) !important; }
.btn-vs-outline {
    background: transparent;
    color: var(--text-strong) !important;
    border: 1px solid var(--border-hover);
    padding: 13px 28px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none !important;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    cursor: pointer;
    border-radius: var(--r-pill);
    transition: all 0.2s ease;
}
.btn-vs-outline:hover { background: var(--bg-surface); color: var(--text-strong) !important; }

/* ── CTA Section ─────────────────────────────────────────── */
/* Escuro: simetria visual com o hero — abre e fecha em navy */
.cta-section {
    position: relative;
    overflow: hidden;
    background: #0A0F1E;
    border-top: none;
}
/* Grade discreta igual ao hero */
.cta-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image:
        linear-gradient(rgba(99,102,241,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99,102,241,0.07) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, black 20%, transparent 100%);
    mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, black 20%, transparent 100%);
    pointer-events: none;
}
.cta-section::after { content: none; }
/* Overrides de texto para fundo escuro */
.cta-section .section-headline         { color: #A5B4FC; }
.cta-section .section-headline::before { background: #A5B4FC; }
.cta-section .section-title            { color: #FFFFFF; }
/* !important necessário: outros pages usam color:var(--text-muted/text) inline nos parágrafos */
.cta-section p                         { color: rgba(255,255,255,0.72) !important; }
.cta-section .btn-corp-outline {
    color: rgba(255,255,255,0.82) !important;
    border-color: rgba(255,255,255,0.18) !important;
}
.cta-section .btn-corp-outline:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.32) !important;
    color: #FFFFFF !important;
}

/* ── Badges ──────────────────────────────────────────────── */
/* Pill simples, sem fundo elaborado */
.hub-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--blue-bg);
    border: 1px solid rgba(14,116,144,0.22);
    color: var(--blue-light);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: var(--r-pill);
    margin-bottom: 1.5rem;
}
.hub-badge-purple {
    background: var(--purple-bg);
    border-color: rgba(139,92,246,0.22);
    color: var(--purple-light);
}
.hub-badge-soon {
    background: var(--amber-bg);
    border-color: rgba(245,158,11,0.22);
    color: var(--amber-light);
}
.hub-badge-emerald {
    background: var(--emerald-bg);
    border-color: rgba(16,185,129,0.22);
    color: var(--emerald-light);
}
.hub-badge-red {
    background: var(--red-bg);
    border-color: rgba(239,68,68,0.22);
    color: var(--red);
}

/* ── Check list ──────────────────────────────────────────── */
.check-list li {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
    align-items: flex-start;
    color: var(--text);
    font-size: 0.95rem;
}
.check-list li i { color: var(--blue); margin-top: 3px; flex-shrink: 0; }
.check-list-purple li i { color: var(--purple); }

/* ── Divider ─────────────────────────────────────────────── */
.hub-divider { border: none; height: 1px; background: var(--border); margin: 0; }

/* ── Dropdown Navigation ─────────────────────────────────── */
.nav-dropdown { position: relative; }

.dropdown-hub {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    background: var(--bg-raised);
    border: 1px solid var(--border-hover);
    box-shadow: var(--shadow-lg);
    border-radius: var(--r-md);
    /* padding-top cria ponte invisível — hover não quebra no gap */
    padding: 0.5rem;
    padding-top: 14px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
    z-index: 9999;
    pointer-events: none;
}
.nav-dropdown:hover .dropdown-hub,
.nav-dropdown:focus-within .dropdown-hub {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.dropdown-hub-wide   { min-width: 480px; }
.dropdown-hub-narrow { min-width: 300px; left: 0; transform: translateY(-6px); }

.nav-dropdown:hover .dropdown-hub-narrow,
.nav-dropdown:focus-within .dropdown-hub-narrow { transform: translateY(0); }

.dropdown-hub::before {
    content: '';
    position: absolute;
    top: 9px; left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 9px; height: 9px;
    background: var(--bg-raised);
    border-left: 1px solid var(--border-hover);
    border-top: 1px solid var(--border-hover);
    border-radius: 2px;
}
.dropdown-hub-narrow::before { left: 28px; }

.dropdown-item-hub {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.6rem 0.875rem;
    border-radius: var(--r-sm);
    text-decoration: none !important;
    transition: background 0.12s ease;
    cursor: pointer;
}
.dropdown-item-hub:hover { background: var(--bg-surface); }

.dropdown-item-hub-icon {
    width: 36px; height: 36px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-sm);
    font-size: 0.95rem;
}
.dropdown-item-hub-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-strong);
    margin-bottom: 1px;
    line-height: 1.3;
}
.dropdown-item-hub-desc {
    font-size: 0.775rem;
    color: var(--text-muted);
    line-height: 1.35;
}
.dropdown-divider-hub {
    height: 1px;
    background: var(--border);
    margin: 0.375rem 0.5rem;
}

/* ── Screenshot Vitrine ──────────────────────────────────── */
.ss-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    color: var(--text-muted);
    font-size: 0.85rem; font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}
.ss-pill:hover { border-color: var(--blue); color: var(--blue); }
.ss-pill.active {
    background: var(--blue-bg);
    border-color: rgba(14,116,144,0.35);
    color: var(--blue);
    font-weight: 700;
}
.ss-pill-count {
    font-size: 0.75em;
    opacity: 0.55;
    font-weight: 400;
}

.ss-viewer {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.ss-sidebar {
    border-right: 1px solid var(--border);
    height: 100%;
    padding: 0.5rem 0;
}
.ss-sidebar-group {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 1rem 1.25rem 0.4rem;
    margin-top: 0.25rem;
}
.ss-nav-item {
    padding: 0.75rem 1.25rem;
    border-left: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}
.ss-nav-item:hover { background: var(--bg-surface); border-left-color: var(--border-hover); }
.ss-nav-item.active { background: var(--blue-bg); border-left-color: var(--blue); }
.ss-nav-badge {
    font-size: 0.68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.6px;
    color: var(--text-muted);
    margin-bottom: 1px;
}
.ss-nav-item.active .ss-nav-badge { color: var(--blue); }
.ss-nav-title { font-size: 0.875rem; font-weight: 600; color: var(--text-strong); }

.ss-content { padding: 2rem; }

.ss-caption { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.ss-caption-title { font-weight: 800; font-size: 1.15rem; margin-bottom: 0.4rem; color: var(--text-strong); }
.ss-caption-desc { color: var(--text-muted); font-size: 0.9rem; margin: 0; max-width: 680px; line-height: 1.65; }

.ss-theme-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.75rem; font-weight: 600;
    color: var(--blue);
    background: var(--blue-bg);
    border: 1px solid rgba(14,116,144,0.2);
    border-radius: var(--r-sm);
    padding: 6px 12px;
    white-space: nowrap;
    flex-shrink: 0;
}

.ss-footer-note {
    margin-top: 3rem;
    padding: 1.75rem 2rem;
    background: var(--blue-bg);
    border: 1px solid rgba(14,116,144,0.18);
    border-radius: var(--r-md);
}

/* ── Mockup — window chrome dots ────────────────────────── */
/* Colore automaticamente os 3 dots sem inline style nos razors */
.mockup-header .mockup-dot:nth-child(1) { background: var(--dot-red); }
.mockup-header .mockup-dot:nth-child(2) { background: var(--dot-amber); }
.mockup-header .mockup-dot:nth-child(3) { background: var(--dot-green); }

/* ── Input — formulários ─────────────────────────────────── */
.hub-input {
    width: 100%;
    background: var(--bg-raised);
    border: 1px solid var(--border-hover);
    color: var(--text-strong);
    padding: 11px 14px;
    font-size: 0.92rem;
    font-family: var(--font);
    border-radius: var(--r-md);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    appearance: none;
}
.hub-input::placeholder { color: var(--text-muted); }
.hub-input:focus {
    border-color: var(--input-border-focus);
    box-shadow: 0 0 0 3px rgba(14,116,144,0.08);
}
.hub-input:hover:not(:focus) { border-color: var(--border-hover); }

/* ── Gradient emerald — serviços ─────────────────────────── */
.text-gradient-emerald {
    background: linear-gradient(120deg, var(--emerald) 0%, var(--emerald-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Placeholder de Imagem ───────────────────────────────── */
/* Usado onde imagens ainda não foram fornecidas */
.img-placeholder {
    aspect-ratio: 16 / 10;
    background: var(--bg-raised);
    border: 2px dashed var(--border-hover);
    border-radius: var(--r-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    color: var(--text-muted);
}
.img-placeholder i    { font-size: 2.5rem; opacity: 0.35; }
.img-placeholder span { font-size: 0.78rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; opacity: 0.5; }

/* ── Social Proof ────────────────────────────────────────── */
.social-proof-section {
    background: #0E1629;
    padding: 4.5rem 0;
    border-top: 1px solid rgba(255,255,255,0.07);
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.proof-stat-number {
    font-size: 2.4rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #FFFFFF;
    line-height: 1.1;
    margin-bottom: 0.25rem;
}
.proof-stat-label {
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(255,255,255,0.50);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ── Testimonial Cards ──────────────────────────────────── */
.testimonial-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--r-lg);
    padding: 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.testimonial-quote-icon {
    color: rgba(165,180,252,0.30);
    font-size: 1.4rem;
    margin-bottom: 1rem;
}
.testimonial-text {
    font-size: 0.92rem;
    color: rgba(255,255,255,0.72);
    line-height: 1.75;
    flex: 1;
    margin-bottom: 1.5rem;
}
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.testimonial-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    font-weight: 800;
    font-size: 0.78rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    letter-spacing: -0.5px;
}
.testimonial-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(255,255,255,0.88);
}
.testimonial-role {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.42);
}

/* ── Scroll Animations ──────────────────────────────────── */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Screenshot Viewer — smooth transitions ─────────────── */
.ss-panel {
    transition: opacity 0.3s ease;
}

/* ── Section Dark ────────────────────────────────────────── */
.section-dark {
    background: #0E1629;
    color: #fff;
}

/* ── Feature Card Illustrated (iClinic pattern) ─────────── */
.feature-card-illustrated {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 2rem;
    height: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.feature-card-illustrated:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-md);
}
.feature-card-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: var(--blue-bg);
    color: var(--blue);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
    margin-bottom: 1.25rem;
}
.feature-card-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-strong);
    margin-bottom: 0.5rem;
}
.feature-card-desc {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0;
}

/* ── Show Don't Tell — Benefit List (dark bg) ───────────── */
.show-benefit-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.show-benefit-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.92rem;
    color: rgba(255,255,255,0.82);
    font-weight: 500;
}
.show-benefit-item i {
    color: rgba(165,180,252,0.7);
    font-size: 0.85rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

/* ── Security Pill (compact banner) ─────────────────────── */
.security-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--r-md);
    padding: 0.7rem 1rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255,255,255,0.72);
}
.security-pill i {
    color: rgba(165,180,252,0.6);
    font-size: 0.85rem;
}

/* ── Blazor Error ────────────────────────────────────────── */
.blazor-error-boundary {
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.25);
    border-radius: var(--r-md);
    color: #FCA5A5;
    padding: 1rem;
}

/* ── CTA Section — padding explícito ─────────────────────── */
.cta-section { padding: 5rem 0; }

/* ── Utility Classes — elimina inline styles repetidos ──── */
/* Tipografia de rótulo (label de seção, produto, categoria) */
.text-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--blue);
}
/* Tamanhos de corpo padronizados */
.text-muted-xs  { font-size: 0.78rem; color: var(--text-muted); line-height: 1.6; }
.text-muted-sm  { font-size: 0.82rem; color: var(--text-muted); line-height: 1.65; }
.text-body-sm   { font-size: 0.875rem; color: var(--text); line-height: 1.75; }
.text-body-md   { font-size: 0.95rem; color: var(--text); line-height: 1.8; }
.text-strong-sm { font-size: 0.875rem; font-weight: 700; color: var(--text-strong); }

/* ── Info Card — ícone + título + descrição ─────────────── */
/* Padrão repetido em Home, Sobre, Planos — substitui cada bloco inline */
.info-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}
.info-card-icon {
    width: 40px; height: 40px;
    background: var(--blue-bg);
    border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    color: var(--blue);
    flex-shrink: 0;
}

/* ── WhatsApp Float Button ───────────────────────────────── */
.wa-float {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 9000;
    width: 52px; height: 52px;
    background: #25D366;
    color: #fff !important;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    text-decoration: none !important;
    box-shadow: 0 4px 20px rgba(37,211,102,0.40), 0 2px 8px rgba(0,0,0,0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wa-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 28px rgba(37,211,102,0.55), 0 2px 10px rgba(0,0,0,0.18);
    color: #fff !important;
}

/* ── Diferencial Strip ────────────────────────────────────── */
/* Faixa fina entre hero e corpo principal — 4 pilares */
.diferencial-strip {
    padding: 2.25rem 0;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
}
.diferencial-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    text-align: center;
    padding: 0.5rem 1rem;
}
.diferencial-item i {
    color: var(--blue);
    font-size: 1.05rem;
    margin-bottom: 0.2rem;
}

/* ── Responsive — Hero e Section Title ───────────────────── */
@media (max-width: 991.98px) {
    .hero-title {
        font-size: clamp(2rem, 8vw, 3.6rem);
    }
    .section-title {
        font-size: clamp(1.5rem, 5vw, 2.25rem);
    }
}
@media (max-width: 575.98px) {
    .hero-section {
        padding-top: 4.5rem;
        padding-bottom: 4rem;
        min-height: auto;
    }
    .cta-section { padding: 3.5rem 0; }
    .wa-float {
        bottom: 20px;
        right: 20px;
        width: 48px; height: 48px;
        font-size: 1.25rem;
    }
}

/* ── Utilitário: padding de seção responsivo ─────────────── */
/* Usar em seções que precisam de padding controlado */
.hub-section { padding: 7rem 0; }

/* ── Responsive Mobile ───────────────────────────────────── */

/* ── 992px — tablet landscape ───────────────────────────── */
@media (max-width: 992px) {
    /* Tipografia */
    .hero-title    { font-size: 2.4rem; }
    .display-title { font-size: 2.2rem; }
    .section-title { font-size: 1.75rem; }

    /* Hero */
    .hero-section, .hero-inner {
        padding-top: 7rem;
        padding-bottom: 3rem;
    }
    .hero-subtitle { margin-left: auto; margin-right: auto; }

    /* Seções com padding inline — reduzir para tablet */
    section[style*="padding"] {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }
    .hub-section  { padding: 5rem 0; }
    .cta-section  { padding: 4rem 0; }

    /* SS Vitrine: sidebar vira barra superior */
    .ss-sidebar { border-right: none; border-bottom: 1px solid var(--border); }
    .ss-content { padding: 1.5rem; }
}

/* ── Footer escuro — scoped tokens, sem tocar nos inline styles ─ */
/* CSS variables são cascateadas: os inline styles resolvem para os
   valores override definidos aqui, resultando em fundo escuro coeso */
footer {
    --bg:           #060C18;
    --bg-surface:   #060C18;
    --bg-raised:    #0A0F1E;
    --bg-card:      #0A0F1E;
    --border:       rgba(255,255,255,0.07);
    --border-hover: rgba(255,255,255,0.13);
    --text:         rgba(255,255,255,0.58);
    --text-strong:  #FFFFFF;
    --text-muted:   rgba(255,255,255,0.38);
    --blue:         #A5B4FC;   /* indigo-300 — legível sobre escuro */
}
footer .footer-heading  { color: rgba(255,255,255,0.28); }
footer .footer-link     { color: rgba(255,255,255,0.50); }
footer .footer-link:hover { color: rgba(255,255,255,0.88); }

/* ── Footer — padding responsivo ────────────────────────── */
@media (max-width: 768px) {
    footer[style*="padding"] {
        padding-top: 3.5rem !important;
        padding-bottom: 2rem !important;
    }
}
@media (max-width: 576px) {
    footer[style*="padding"] {
        padding-top: 3rem !important;
        padding-bottom: 1.5rem !important;
    }
    /* Links do footer: fonte ligeiramente maior para touch */
    .footer-link { font-size: 0.9rem; }
    .footer-social { width: 44px; height: 44px; }
}

/* ── 768px — tablet portrait / mobile grande ─────────────── */
@media (max-width: 768px) {
    /* Tipografia */
    .hero-title    { font-size: 2.1rem; }
    .display-title { font-size: 1.9rem; }
    .section-title { font-size: 1.55rem; }
    .hero-subtitle { font-size: 0.97rem; }

    /* Hero: altura automática no mobile */
    .hero-section {
        min-height: auto;
        padding-top: 5.5rem;
        padding-bottom: 3rem;
    }
    .hero-inner {
        min-height: auto;
        padding-top: 5.5rem;
        padding-bottom: 2.5rem;
    }

    /* Seções com padding inline */
    section[style*="padding"] {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
    .hub-section { padding: 4rem 0; }
    .cta-section { padding: 3.5rem 0; }

    /* Cards: sem transform em telas touch (evita flicker) */
    .glass-card:hover,
    .product-card:hover,
    .service-card:hover { transform: none; }

    /* Cards: padding reduzido */
    .glass-card   { padding: 1.5rem; }
    .product-card { padding: 2rem 1.5rem; }
    .service-card { padding: 2rem 1.5rem; }
    .feature-item { padding: 1.25rem; }

    /* Botões: touch target mínimo de 44px (WCAG) */
    .btn-corp,
    .btn-corp-outline,
    .btn-corp-dark,
    .btn-vs,
    .btn-vs-outline { min-height: 44px; }

    /* Navbar: toggle touch-friendly */
    .navbar-hub-toggle      { width: 44px; height: 44px; }
    .navbar-hub-mobile-link { padding: 0.65rem 0.875rem; }

    /* Trust bar: mais compacto */
    .trust-bar  { padding: 1rem 0; }
    .trust-item { font-size: 0.8rem; gap: 0.4rem; }

    /* SS Vitrine */
    .ss-content     { padding: 1rem; }
    .ss-footer-note { padding: 1.25rem; margin-top: 1.5rem; }
    .ss-caption     { margin-top: 1rem; padding-top: 1rem; }
}

/* ── 576px — mobile padrão ───────────────────────────────── */
@media (max-width: 576px) {
    /* Tipografia */
    .hero-title    { font-size: 1.85rem; }
    .display-title { font-size: 1.65rem; }
    .section-title { font-size: 1.35rem; }
    .hero-subtitle { font-size: 0.93rem; }

    /* Hero */
    .hero-section { padding-top: 5rem; padding-bottom: 2.5rem; }
    .hero-inner   { padding-top: 5rem; padding-bottom: 2rem; }

    /* Seções com padding inline */
    section[style*="padding"] {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    .hub-section { padding: 3rem 0; }
    .cta-section { padding: 3rem 0; }

    /* Trust dividers: ocultar no mobile */
    .trust-divider { display: none; }

    /* Badges: margem menor */
    .hub-badge { margin-bottom: 1rem; }

    /* Cards */
    .glass-card { padding: 1.25rem 1rem; }

    /* Tabela comparativa: scroll horizontal */
    .table-responsive-hub {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: var(--r-lg);
    }
    .table-responsive-hub table { min-width: 540px; }

    /* Plano cards */
    .plan-card { padding: 1.5rem 1.25rem; }
}

/* ── 400px — mobile pequeno ──────────────────────────────── */
@media (max-width: 400px) {
    .hero-title    { font-size: 1.6rem; }
    .display-title { font-size: 1.45rem; }
    .section-title { font-size: 1.2rem; }
    .product-card  { padding: 1.5rem 1rem; }
    .glass-card    { padding: 1rem; }

    section[style*="padding"] {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
}

/* ── Social Proof — responsive ──────────────────────────── */
@media (max-width: 768px) {
    .social-proof-section { padding: 3rem 0; }
    .proof-stat-number { font-size: 1.8rem; }
    .proof-stat-label { font-size: 0.72rem; }
    .testimonial-card { padding: 1.5rem; }
}
@media (max-width: 576px) {
    .social-proof-section { padding: 2.5rem 0; }
    .proof-stat-number { font-size: 1.5rem; }
}

/* ── Phase 3: Remove hover lift from non-clickable cards ── */
/* Only cards wrapping links or clickable elements should lift */
.feature-item:hover { transform: none; }