/**
 * W3 Inova — Design System
 * Estética "High-Tech Human" — futurista mas acessível.
 *
 * @package W3Inova
 * @version 1.0.0
 */

/* ============================================================================
   TOKENS DE DESIGN — CSS CUSTOM PROPERTIES
   ============================================================================ */

:root {
    /* ------------------------------------------------------------------
       Fundação — Backgrounds
    ------------------------------------------------------------------ */
    --color-deep-space:       #050810;   /* Background principal */
    --color-dark-matter:      #0D1117;   /* Cards e superfícies */
    --color-carbon:           #161B22;   /* Borders e separadores */

    /* ------------------------------------------------------------------
       Primárias — Soberania
    ------------------------------------------------------------------ */
    --color-sovereign-blue:   #1E40AF;   /* Azul de autoridade */
    --color-sovereign-blue-l: #3B82F6;   /* Variante clara */

    /* ------------------------------------------------------------------
       Acento — Inteligência
    ------------------------------------------------------------------ */
    --color-ai-cyan:          #00FFCC;   /* Verde-azulado de IA */
    --color-ai-cyan-dim:      rgba(0, 255, 204, 0.15);
    --color-ai-cyan-glow:     rgba(0, 255, 204, 0.08);

    /* ------------------------------------------------------------------
       Texto
    ------------------------------------------------------------------ */
    --color-text-primary:     #F0F6FF;   /* Texto principal */
    --color-text-secondary:   #8B98A8;   /* Texto secundário */
    --color-text-muted:       #4A5568;   /* Texto desativado */

    /* ------------------------------------------------------------------
       Linhas de grade e bordas
    ------------------------------------------------------------------ */
    --color-grid-line:        rgba(30, 64, 175, 0.3);
    --color-border:           rgba(22, 27, 34, 1);
    --color-border-hover:     rgba(0, 255, 204, 0.25);

    /* ------------------------------------------------------------------
       Gradientes
    ------------------------------------------------------------------ */
    --gradient-sovereign:     linear-gradient(135deg, #1E40AF 0%, #00FFCC 100%);
    --gradient-dark:          linear-gradient(180deg, #050810 0%, #0D1117 100%);
    --gradient-glow:          radial-gradient(ellipse at center, rgba(0, 255, 204, 0.1) 0%, transparent 70%);
    --gradient-text:          linear-gradient(135deg, #3B82F6 0%, #00FFCC 100%);

    /* ------------------------------------------------------------------
       Tipografia
    ------------------------------------------------------------------ */
    --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --font-body:    'Inter', system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

    /* ------------------------------------------------------------------
       Escala tipográfica
    ------------------------------------------------------------------ */
    --text-xs:   0.75rem;    /* 12px */
    --text-sm:   0.875rem;   /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg:   1.125rem;   /* 18px */
    --text-xl:   1.25rem;    /* 20px */
    --text-2xl:  1.5rem;     /* 24px */
    --text-3xl:  1.875rem;   /* 30px */
    --text-4xl:  2.25rem;    /* 36px */
    --text-5xl:  clamp(2.5rem, 5vw, 4rem);

    /* ------------------------------------------------------------------
       Espaçamentos
    ------------------------------------------------------------------ */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;

    /* ------------------------------------------------------------------
       Border radius
    ------------------------------------------------------------------ */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;

    /* ------------------------------------------------------------------
       Sombras e glow
    ------------------------------------------------------------------ */
    --shadow-card:  0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.6);
    --glow-cyan:    0 0 20px rgba(0, 255, 204, 0.15), 0 0 40px rgba(0, 255, 204, 0.05);
    --glow-blue:    0 0 20px rgba(30, 64, 175, 0.3);

    /* ------------------------------------------------------------------
       Transições
    ------------------------------------------------------------------ */
    --transition-fast:   150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow:   400ms ease;
}

/* ============================================================================
   RESET E BASE
   ============================================================================ */

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Aplica estilos base apenas nas páginas com templates w3inova */
body.page-template-template-trilho-soberania,
body.page-template-template-trilho-ecossistema,
body.page-template-template-trilho-eficiencia,
body.page-template-template-oracle,
body.page-template-template-hub,
body.page-template-template-new-home,
body.w3inova-hub-single {
    background-color: var(--color-deep-space);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
}

/* ── Reset e tipografia apenas nos templates w3inova ── */

body.page-template-template-trilho-soberania img,
body.page-template-template-trilho-ecossistema img,
body.page-template-template-trilho-eficiencia img,
body.page-template-template-oracle img,
body.page-template-template-hub img,
body.page-template-template-new-home img,
body.w3inova-hub-single img {
    max-width: 100%;
    height: auto;
}

body.page-template-template-trilho-soberania a,
body.page-template-template-trilho-ecossistema a,
body.page-template-template-trilho-eficiencia a,
body.page-template-template-oracle a,
body.page-template-template-hub a,
body.page-template-template-new-home a,
body.w3inova-hub-single a {
    color: var(--color-sovereign-blue-l);
    text-decoration: none;
    transition: color var(--transition-fast);
}

body.page-template-template-trilho-soberania a:hover,
body.page-template-template-trilho-ecossistema a:hover,
body.page-template-template-trilho-eficiencia a:hover,
body.page-template-template-oracle a:hover,
body.page-template-template-hub a:hover,
body.page-template-template-new-home a:hover,
body.w3inova-hub-single a:hover {
    color: var(--color-ai-cyan);
}

/* ============================================================================
   TIPOGRAFIA — apenas templates w3inova
   ============================================================================ */

body.page-template-template-trilho-soberania h1,
body.page-template-template-trilho-soberania h2,
body.page-template-template-trilho-soberania h3,
body.page-template-template-trilho-ecossistema h1,
body.page-template-template-trilho-ecossistema h2,
body.page-template-template-trilho-ecossistema h3,
body.page-template-template-trilho-eficiencia h1,
body.page-template-template-trilho-eficiencia h2,
body.page-template-template-trilho-eficiencia h3,
body.page-template-template-oracle h1,
body.page-template-template-oracle h2,
body.page-template-template-oracle h3,
body.page-template-template-hub h1,
body.page-template-template-hub h2,
body.page-template-template-hub h3,
body.page-template-template-new-home h1,
body.page-template-template-new-home h2,
body.page-template-template-new-home h3,
body.w3inova-hub-single h1,
body.w3inova-hub-single h2,
body.w3inova-hub-single h3 {
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.15;
    color: var(--color-text-primary);
    margin-top: 0;
}

/* ============================================================================
   DIVI OVERRIDE — new-home e templates w3inova
   ============================================================================ */

/* Divi Critical CSS usa hashes nos containers internos — não usar seletores
   de ID/classe do Divi. Usar apenas classes w3inova-* que são estáveis. */

/* Garante que o hero não seja cortado pelo overflow do Divi */
body.page-template-template-new-home .w3inova-hero {
    overflow: visible;
    box-sizing: border-box;
}

.w3inova-gradient-text {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.w3inova-mono {
    font-family: var(--font-mono);
}

/* ============================================================================
   COMPONENTE — SEÇÃO
   ============================================================================ */

.w3inova-section {
    padding: var(--space-24) var(--space-8);
    position: relative;
}

.w3inova-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.w3inova-section--dark {
    background-color: var(--color-dark-matter);
}

/* ============================================================================
   COMPONENTE — CARD
   ============================================================================ */

.w3inova-card {
    background-color: var(--color-dark-matter);
    border: 1px solid var(--color-carbon);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.w3inova-card:hover {
    border-color: var(--color-border-hover);
    box-shadow: var(--glow-cyan);
}

.w3inova-card__icon {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-4);
}

.w3inova-card__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--space-3);
}

.w3inova-card__body {
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    line-height: 1.7;
}

/* ============================================================================
   COMPONENTE — BADGE DE MÉTRICA
   ============================================================================ */

.w3inova-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ai-cyan);
    padding: 0.35rem 0.75rem;
    border: 1px solid rgba(0, 255, 204, 0.25);
    border-radius: var(--radius-sm);
    background: transparent;
    white-space: nowrap;
}

.w3inova-badge--sovereign {
    color: var(--color-sovereign-blue-l);
    border-color: rgba(59, 130, 246, 0.25);
}

/* ============================================================================
   COMPONENTE — BOTÕES CTA
   ============================================================================ */

.w3inova-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-base);
    padding: 0.875rem 1.75rem;
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-normal);
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
}

/* Primário — gradiente sovereign */
.w3inova-btn--primary {
    background: var(--gradient-sovereign);
    color: #ffffff;
    border-color: transparent;
}

.w3inova-btn--primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: var(--glow-cyan);
    color: #ffffff;
}

/* Secundário — outline */
.w3inova-btn--secondary {
    background: transparent;
    color: var(--color-sovereign-blue-l);
    border-color: var(--color-sovereign-blue);
}

.w3inova-btn--secondary:hover {
    background: rgba(30, 64, 175, 0.1);
    border-color: var(--color-ai-cyan);
    color: var(--color-ai-cyan);
}

/* ============================================================================
   COMPONENTE — DECLARAÇÃO DE POSICIONAMENTO
   ============================================================================ */

.w3inova-authority-statement {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-align: center;
    padding: var(--space-6) var(--space-4);
    border-top: 1px solid var(--color-carbon);
    margin-top: var(--space-16);
}

/* ============================================================================
   COMPONENTE — PROVA SOCIAL (MÉTRICAS)
   ============================================================================ */

.w3inova-metrics-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
}

.w3inova-metric-item {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-ai-cyan);
    padding: var(--space-2) var(--space-3);
    border: 1px solid rgba(0, 255, 204, 0.2);
    border-radius: var(--radius-sm);
}

/* ============================================================================
   COMPONENTE — ANIMAÇÃO DE ENTRADA (scroll-animations.js)
   ============================================================================ */

.w3inova-animate {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.w3inova-animate.w3inova-visible {
    opacity: 1;
    transform: translateY(0);
}

.w3inova-animate--delay-1 { transition-delay: 100ms; }
.w3inova-animate--delay-2 { transition-delay: 200ms; }
.w3inova-animate--delay-3 { transition-delay: 300ms; }

/* ============================================================================
   GRID — LAYOUT
   ============================================================================ */

.w3inova-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.w3inova-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}

/* ============================================================================
   BREAKPOINTS DIVI (obrigatório manter consistência)
   ============================================================================ */

/* Tablet */
@media (max-width: 980px) {
    .w3inova-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .w3inova-section { padding: var(--space-16) var(--space-6); }
}

/* Mobile grande */
@media (max-width: 767px) {
    .w3inova-grid-3,
    .w3inova-grid-2 { grid-template-columns: 1fr; }
    .w3inova-metrics-row { flex-direction: column; align-items: flex-start; }
    .w3inova-section { padding: var(--space-12) var(--space-4); }
}

/* Mobile pequeno */
@media (max-width: 479px) {
    .w3inova-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================================
   ARTIGO — CONTEÚDO EDITORIAL (single-w3inova_hub.php)
   ============================================================================ */

.w3inova-article-content {
    color: var(--color-text-secondary);
    font-size: 1.0625rem;
    line-height: 1.8;
}

.w3inova-article-content h2 {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.5vw, 1.625rem);
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 2.5rem 0 1rem;
    line-height: 1.3;
}

.w3inova-article-content h3 {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 2rem 0 0.75rem;
}

.w3inova-article-content p {
    margin-bottom: 1.25rem;
}

.w3inova-article-content strong {
    color: var(--color-text-primary);
    font-weight: 600;
}

.w3inova-article-content em {
    font-style: normal;
    background: linear-gradient(135deg, var(--color-sovereign-blue-l), var(--color-ai-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.w3inova-article-content a {
    color: var(--color-ai-cyan);
    text-decoration: none;
    border-bottom: 1px solid rgba(0,255,204,0.3);
    transition: border-color var(--transition-fast);
}

.w3inova-article-content a:hover {
    border-color: var(--color-ai-cyan);
}

.w3inova-article-content ul,
.w3inova-article-content ol {
    margin: 0 0 1.25rem 1.5rem;
    color: var(--color-text-secondary);
}

.w3inova-article-content li {
    margin-bottom: 0.5rem;
}

/* ============================================================================
   DIVI OVERRIDE — Páginas com templates w3inova (new-home, trilhos, hub)
   Expande os containers Divi para 100% de largura, permitindo hero full-bleed.
   O padding interno das seções é controlado pelas classes w3inova-*.
   IDs estruturais do Divi (#main-content, #content-area, #left-area) são
   estáveis — apenas o CSS atômico gerado pelo Divi usa hashes.
   ============================================================================ */

body.page-template-template-new-home #page-container,
body.page-template-template-new-home #et-main-area,
body.page-template-template-new-home #main-content,
body.page-template-template-new-home #main-content > .container,
body.page-template-template-new-home #content-area,
body.page-template-template-new-home #left-area {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
    float: none !important;
}

body.page-template-template-new-home .w3inova-hero {
    overflow: hidden; /* mantém overflow do hero para canvas de partículas */
    width: 100%;
}