/*
 * @package DigiLab_Creativo_Theme
 * @author Leidy Jaimes
 * @version 1.0.0
 *
 * Theme Name: DigiLab Creativo Core Engine
 * Theme URI: https://digilabcreativo.com
 * Author: Leidy Jaimes
 * Author URI: https://digilabcreativo.com
 * Description: Ecosistema digital nativo de alto rendimiento para DigiLab Creativo — Agencia de Marketing Influencer.
 * Version: 1.0.0
 * License: Proprietary
 * Text Domain: digilab-creativo
 * Requires at least: 5.8
 * Requires PHP: 7.4
 */

/* ==========================================================================
   DESIGN SYSTEM — DigiLab Creativo Core Engine v1.0
   Developed by Leidy Jaimes
   ========================================================================== */

:root {
    /* — Brand Colors: Clean Luminous Agency (Azul, Turquesa y Gris) — */
    --dl-primary: #FAFBFC;           /* Lienzo principal blanco perla luminoso */
    --dl-primary-light: #F1F5F9;     /* Superficies gris suave */
    --dl-primary-surface: #FFFFFF;   /* Tarjetas blanco puro */
    --dl-brand-blue: #0F2A4A;        /* Azul corporativo elegante */
    --dl-accent: #00B8C8;            /* Turquesa DigiLab vibrante */
    --dl-accent-alt: #5FD2DC;        /* Turquesa suave */
    --dl-accent-glow: rgba(0, 184, 200, 0.16);
    --dl-accent-alt-glow: rgba(95, 210, 220, 0.14);

    /* — Neutrals & Text — High Contrast Luminous */
    --dl-gray-100: #F8FAFC;
    --dl-gray-200: #F1F5F9;
    --dl-gray-300: #E2E8F0;
    --dl-gray-400: #64748B;          /* Gris intermedio legible */
    --dl-gray-500: #475569;          /* Gris oscuro slate */
    --dl-gray-600: #334155;          /* Grafito pizarra oscuro */
    --dl-heading: #0F172A;           /* Texto grafito oscuro de máxima legibilidad */
    --dl-text-body: #334155;         /* Texto de cuerpo gris pizarra elegante */
    --dl-white: #FFFFFF;
    --dl-black: #0F172A;

    /* — Gradients — */
    --dl-gradient-hero: linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 100%);
    --dl-gradient-accent: linear-gradient(135deg, #0F2A4A 0%, #00B8C8 100%);
    --dl-gradient-card: #FFFFFF;
    --dl-gradient-mesh: radial-gradient(ellipse at 15% 25%, rgba(0, 184, 200, 0.05) 0%, transparent 60%),
                        radial-gradient(ellipse at 85% 65%, rgba(15, 42, 74, 0.04) 0%, transparent 60%);

    /* — Typography — */
    --dl-font-heading: 'Space Grotesk', system-ui, sans-serif;
    --dl-font-body: 'Inter', system-ui, sans-serif;

    --dl-text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
    --dl-text-sm: clamp(0.8rem, 0.75rem + 0.3vw, 0.9rem);
    --dl-text-base: clamp(0.95rem, 0.85rem + 0.4vw, 1.05rem);
    --dl-text-lg: clamp(1.1rem, 1rem + 0.5vw, 1.25rem);
    --dl-text-xl: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem);
    --dl-text-2xl: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
    --dl-text-3xl: clamp(2rem, 1.5rem + 2vw, 3rem);
    --dl-text-4xl: clamp(2.5rem, 1.8rem + 3vw, 4rem);
    --dl-text-hero: clamp(2.8rem, 2rem + 4vw, 5rem);

    /* — Spacing — */
    --dl-space-xs: 0.5rem;
    --dl-space-sm: 0.75rem;
    --dl-space-md: 1rem;
    --dl-space-lg: 1.5rem;
    --dl-space-xl: 2rem;
    --dl-space-2xl: 3rem;
    --dl-space-3xl: 4rem;
    --dl-space-4xl: 6rem;
    --dl-space-section: clamp(4rem, 3rem + 4vw, 8rem);

    /* — Layout — */
    --dl-container: min(90%, 1280px);
    --dl-container-narrow: min(90%, 960px);
    --dl-radius-sm: 8px;
    --dl-radius-md: 16px;
    --dl-radius-lg: 24px;
    --dl-radius-full: 9999px;

    /* — Shadows — */
    --dl-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02);
    --dl-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.06);
    --dl-shadow-lg: 0 12px 36px rgba(15, 23, 42, 0.08);
    --dl-shadow-glow: 0 8px 24px rgba(0, 184, 200, 0.18);

    /* — Glassmorphism — */
    --dl-glass-bg: rgba(255, 255, 255, 0.9);
    --dl-glass-border: rgba(226, 232, 240, 0.85);
    --dl-glass-blur: blur(20px);

    /* — Transitions — */
    --dl-transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --dl-transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --dl-transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --dl-transition-spring: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    font-size: 16px;
}

body {
    font-family: var(--dl-font-body);
    font-size: var(--dl-text-base);
    line-height: 1.7;
    color: var(--dl-text-body);
    background-color: var(--dl-primary);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--dl-transition-fast);
}

ul, ol {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--dl-font-heading);
    font-weight: 700;
    line-height: 1.2;
    color: var(--dl-heading);
}

h1 { font-size: var(--dl-text-hero); }
h2 { font-size: var(--dl-text-3xl); }
h3 { font-size: var(--dl-text-2xl); }
h4 { font-size: var(--dl-text-xl); }

p { margin-bottom: var(--dl-space-md); }

::selection {
    background: var(--dl-accent);
    color: var(--dl-primary);
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

.dl-container {
    width: var(--dl-container);
    margin-inline: auto;
}

.dl-container--narrow {
    width: var(--dl-container-narrow);
    margin-inline: auto;
}

.dl-section {
    padding-block: var(--dl-space-section);
    position: relative;
}

.dl-section__header {
    text-align: center;
    margin-bottom: var(--dl-space-3xl);
}

.dl-section__label {
    display: inline-flex;
    align-items: center;
    gap: var(--dl-space-xs);
    font-size: var(--dl-text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--dl-accent);
    margin-bottom: var(--dl-space-md);
}

.dl-section__label::before {
    content: '';
    width: 24px;
    height: 2px;
    background: var(--dl-gradient-accent);
    border-radius: var(--dl-radius-full);
}

.dl-section__title {
    margin-bottom: var(--dl-space-lg);
}

.dl-section__subtitle {
    font-size: var(--dl-text-lg);
    color: #334155;
    font-weight: 400;
    line-height: 1.6;
    max-width: 640px;
    margin-inline: auto;
}

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

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}