/* ==========================================================================
   DigiNucleo — styles.css
   Cyber-Professional Noir | Carlos Gutierrez Toledo
   v1.0 — June 2026
   ==========================================================================
   ÍNDICE
   1. Variables CSS (Design Tokens)
   2. Reset y Base
   3. Tipografía
   4. Fondo y Partículas
   5. Material Symbols
   6. Animaciones y Keyframes
   7. Header / Navbar
   8. Dropdown de Navegación
   9. Botones
  10. Cards y Glassmorphism
  11. Gradientes y Efectos de Texto
  12. Timeline de Experiencia
  13. Formulario de Contacto
  14. Footer
  15. Utilidades compartidas
  16. Responsive / Mobile
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. VARIABLES CSS (Design Tokens)
   -------------------------------------------------------------------------- */

:root {
    /* Colores base — canales RGB (fuente única; el modo claro solo sobreescribe estos) */
    --rgb-background: 22 17 27;
    --rgb-surface: 21 18 23;
    --rgb-surface-dim: 21 18 23;
    --rgb-surface-bright: 59 56 61;
    --rgb-surface-container-lowest: 16 13 17;
    --rgb-surface-container-low: 29 27 31;
    --rgb-surface-container: 35 30 39;
    --rgb-surface-container-high: 44 41 45;
    --rgb-surface-container-highest: 55 52 56;
    --rgb-on-background: 232 224 231;
    --rgb-on-surface: 232 224 231;
    --rgb-on-surface-variant: 205 195 208;
    --rgb-outline: 150 142 153;
    --rgb-outline-variant: 75 68 79;
    --rgb-primary: 240 218 255;
    --rgb-primary-container: 221 183 255;
    --rgb-primary-fixed: 240 219 255;
    --rgb-primary-fixed-dim: 221 183 255;
    --rgb-on-primary: 64 33 94;
    --rgb-surface-tint: 221 183 255;
    --rgb-inverse-primary: 113 80 144;

    /* Colores derivados — los usan styles.css y (vía var) las utilidades de Tailwind */
    --color-background: rgb(var(--rgb-background));
    --color-surface: rgb(var(--rgb-surface));
    --color-surface-dim: rgb(var(--rgb-surface-dim));
    --color-surface-bright: rgb(var(--rgb-surface-bright));
    --color-surface-container-lowest: rgb(var(--rgb-surface-container-lowest));
    --color-surface-container-low: rgb(var(--rgb-surface-container-low));
    --color-surface-container: rgb(var(--rgb-surface-container));
    --color-surface-container-high: rgb(var(--rgb-surface-container-high));
    --color-surface-container-highest: rgb(var(--rgb-surface-container-highest));
    --color-on-background: rgb(var(--rgb-on-background));
    --color-on-surface: rgb(var(--rgb-on-surface));
    --color-on-surface-variant: rgb(var(--rgb-on-surface-variant));
    --color-outline: rgb(var(--rgb-outline));
    --color-outline-variant: rgb(var(--rgb-outline-variant));
    --color-glass-border: rgba(255, 255, 255, 0.1);
    --color-primary: rgb(var(--rgb-primary));
    --color-primary-container: rgb(var(--rgb-primary-container));
    --color-primary-fixed: rgb(var(--rgb-primary-fixed));
    --color-primary-fixed-dim: rgb(var(--rgb-primary-fixed-dim));
    --color-on-primary: rgb(var(--rgb-on-primary));
    --color-surface-tint: rgb(var(--rgb-surface-tint));
    --color-inverse-primary: rgb(var(--rgb-inverse-primary));

    /* Neones */
    --color-neon-cyan: #06B6D4;
    --color-neon-magenta: #D946EF;
    --color-neon-pink: #ff0080;

    /* Estados */
    --color-success: #10B981;
    --color-error: #ffb4ab;

    /* Tipografía */
    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Hanken Grotesk', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Espaciado */
    --space-base: 8px;
    --space-gutter: 24px;
    --space-margin-mobile: 16px;
    --space-margin-desktop: 64px;
    --container-max: 1200px;

    /* Radios */
    --radius-sm: 0.125rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-full: 9999px;

    /* Transiciones */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Glows */
    --glow-cyan: 0 0 20px rgba(6, 182, 212, 0.20);
    --glow-cyan-strong: 0 0 30px rgba(6, 182, 212, 0.40);
    --glow-magenta: 0 0 20px rgba(217, 70, 239, 0.20);
    --glow-primary: 0 0 20px rgba(221, 183, 255, 0.20);
    --glow-header: 0 0 20px rgba(221, 183, 255, 0.15);

    /* Gradientes reutilizables */
    --gradient-brand: linear-gradient(to right, #ddb7ff, #06B6D4, #D946EF);
    --gradient-surface: linear-gradient(to right, rgba(6, 182, 212, 0.5), rgba(217, 70, 239, 0.5));
    --gradient-primary: linear-gradient(to bottom, #ddb7ff, transparent);
}



/* --------------------------------------------------------------------------
   1b. MODO CLARO  (solo redefine canales/glass/glows; el oscuro queda intacto)
   -------------------------------------------------------------------------- */
html.light-mode {
    --rgb-background: 245 242 250;
    --rgb-surface: 232 225 241;
    --rgb-surface-dim: 239 234 246;
    --rgb-surface-bright: 251 250 254;
    --rgb-surface-container-lowest: 250 248 254;
    --rgb-surface-container-low: 240 236 247;
    --rgb-surface-container: 232 225 241;
    --rgb-surface-container-high: 225 216 238;
    --rgb-surface-container-highest: 218 207 233;
    --rgb-on-background: 29 23 38;
    --rgb-on-surface: 29 23 38;
    --rgb-on-surface-variant: 91 81 104;
    --rgb-outline: 138 127 152;
    --rgb-outline-variant: 201 191 214;
    --rgb-primary: 124 58 237;
    --rgb-primary-container: 201 168 245;
    --rgb-primary-fixed: 124 58 237;
    --rgb-primary-fixed-dim: 109 40 217;
    --rgb-on-primary: 245 242 250;
    --rgb-surface-tint: 124 58 237;
    --rgb-inverse-primary: 183 156 232;
    --color-glass-border: rgba(20, 12, 30, 0.12);
    --glow-cyan: 0 0 14px rgba(6, 182, 212, 0.14);
    --glow-cyan-strong: 0 0 20px rgba(6, 182, 212, 0.22);
    --glow-magenta: 0 0 14px rgba(217, 70, 239, 0.14);
    --glow-primary: 0 0 14px rgba(124, 58, 237, 0.14);
    --glow-header: 0 0 16px rgba(124, 58, 237, 0.10);
    --gradient-brand: linear-gradient(to right, #7C3AED, #0891B2, #C026D3);
    --gradient-primary: linear-gradient(to bottom, #7C3AED, transparent);
}

html.light-mode body {
    background-image: radial-gradient(circle at 2px 2px, rgba(124, 58, 237, 0.05) 1px, transparent 0);
}

/* Transición suave al alternar tema */
body { transition: background-color 0.3s ease, color 0.3s ease; }

/* Botón flotante de cambio de tema (inyectado por JS) */
#theme-toggle {
    position: fixed; bottom: 24px; left: 24px; z-index: 60;
    width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-full);
    background-color: var(--color-surface-container);
    color: var(--color-neon-cyan);
    border: 1px solid var(--color-glass-border);
    box-shadow: var(--glow-cyan);
    cursor: pointer;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-base), color var(--transition-base);
}
#theme-toggle:hover { transform: scale(1.08); box-shadow: var(--glow-cyan-strong); }
#theme-toggle .material-symbols-outlined { font-size: 24px; line-height: 1; }

/* MODO CLARO — superficies de componentes (el vidrio oscuro se volvía plomo sobre claro) */
html.light-mode .glass-card,
html.light-mode .service-card { background: #E8E1F1; }
html.light-mode .skill-pill { background-color: #E0D7EE; color: var(--color-on-surface-variant); }
html.light-mode .btn-download-cv { background-color: #EDE7F4; }
html.light-mode .form-input,
html.light-mode .form-textarea,
html.light-mode .form-select { background-color: #FBFAFE; }
html.light-mode .site-footer { background-color: #EFEAF6; }
html.light-mode .navbar { background: rgba(245, 242, 250, 0.92); box-shadow: 0 0 20px rgba(124, 58, 237, 0.08); }
html.light-mode .navbar--scrolled { background: rgba(240, 236, 247, 0.97) !important; box-shadow: 0 0 24px rgba(124, 58, 237, 0.12), 0 4px 20px rgba(20, 12, 30, 0.08) !important; }
html.light-mode .dropdown-menu { background: rgba(245, 242, 250, 0.98) !important; }

@media (max-width: 991.98px) {
    html.light-mode #navbarMenu { background: rgba(245, 242, 250, 0.98) !important; }
    html.light-mode #navbarMenu.show .dropdown-menu { background: rgba(20, 12, 30, 0.04) !important; }
}

/* --------------------------------------------------------------------------
   2. RESET Y BASE
   -------------------------------------------------------------------------- */

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--color-background);
    background-image: radial-gradient(
            circle at 2px 2px,
            rgba(221, 183, 255, 0.035) 1px,
            transparent 0
    );
    background-size: 28px 28px;
    color: var(--color-on-background);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 24px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Selección de texto */
::selection {
    background-color: rgba(6, 182, 212, 0.30);
    color: var(--color-neon-cyan);
}


/* --------------------------------------------------------------------------
   3. TIPOGRAFÍA
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--color-on-background);
    margin: 0;
}

/* Headline XL — Hero */
.text-headline-xl {
    font-size: 48px;
    line-height: 56px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Headline LG — Títulos de sección */
.text-headline-lg {
    font-size: 32px;
    line-height: 40px;
    font-weight: 600;
}

/* Headline LG Mobile — Subtítulos de tarjetas */
.text-headline-lg-mobile {
    font-size: 28px;
    line-height: 36px;
    font-weight: 600;
}

/* Body LG */
.text-body-lg {
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 28px;
    font-weight: 400;
}

/* Body MD */
.text-body-md {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
}

/* Label Mono — etiquetas, fechas, tags */
.text-label-mono,
.font-label-mono {
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    letter-spacing: 0.05em;
}

/* Colores de texto de acento */
.text-neon-cyan {
    color: var(--color-neon-cyan);
}

.text-neon-magenta {
    color: var(--color-neon-magenta);
}

.text-primary {
    color: var(--color-primary);
}

.text-on-surface-variant {
    color: var(--color-on-surface-variant);
}


/* --------------------------------------------------------------------------
   4. FONDO Y PARTÍCULAS
   -------------------------------------------------------------------------- */

/* Partícula flotante (usada en index.html) */
.particle {
    position: fixed;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.8) 0%, rgba(6, 182, 212, 0) 70%);
    opacity: 0.25;
    pointer-events: none;
    z-index: -1;
    will-change: transform;
}

/* Variante magenta */
.particle-magenta {
    background: radial-gradient(circle, rgba(217, 70, 239, 0.5) 0%, rgba(217, 70, 239, 0) 70%);
}

/* Dot grid alternativo */
.dot-grid {
    background-image: radial-gradient(rgba(221, 183, 255, 0.05) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* Circuit background (usado en subpáginas) */
.circuit-bg {
    background-image: radial-gradient(rgba(221, 183, 255, 0.05) 1px, transparent 0);
    background-size: 32px 32px;
}


/* --------------------------------------------------------------------------
   5. MATERIAL SYMBOLS
   -------------------------------------------------------------------------- */

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    vertical-align: middle;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}


/* --------------------------------------------------------------------------
   6. ANIMACIONES Y KEYFRAMES
   -------------------------------------------------------------------------- */

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

@keyframes slideUp {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: var(--glow-cyan);
    }
    50% {
        box-shadow: var(--glow-cyan-strong);
    }
}

/* Clases de animación */
.animate-float {
    animation: float 10s ease-in-out infinite;
}

.animate-slide-up {
    animation: slideUp 0.8s ease-out forwards;
}

.animate-spin-slow {
    animation: spin-slow 12s linear infinite;
}

/* Reveal on scroll */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays para hijos de grillas */
.animate-on-scroll:nth-child(2) {
    transition-delay: 0.1s;
}

.animate-on-scroll:nth-child(3) {
    transition-delay: 0.2s;
}

.animate-on-scroll:nth-child(4) {
    transition-delay: 0.3s;
}


/* --------------------------------------------------------------------------
   7. HEADER / NAVBAR
   -------------------------------------------------------------------------- */

/* Logo imagen */
.site-header__logo-img {
    height: 40px;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.2);
    transition: opacity var(--transition-fast);
}

.site-header__logo-img:hover {
    opacity: 0.8;
}

/* Botón descarga CV */
.btn-download-cv {
    display: none;
    align-items: center;
    gap: var(--space-base);
    padding: var(--space-base) calc(var(--space-gutter) * 0.85);
    border: 1px solid var(--color-glass-border);
    background-color: rgba(44, 41, 45, 0.50);
    color: var(--color-on-surface);
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 700;
    border-radius: var(--radius-lg);
    text-decoration: none;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.10);
    transition: color var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.btn-download-cv:hover {
    color: var(--color-neon-cyan);
    border-color: rgba(6, 182, 212, 0.50);
    box-shadow: 0 0 18px rgba(6, 182, 212, 0.30);
}

/* Botón hamburguesa móvil → ahora gestionado por .navbar-toggler de Bootstrap */


/* --------------------------------------------------------------------------
   9. BOTONES
   -------------------------------------------------------------------------- */

/* Botón primario — gradiente neon */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-base);
    padding: calc(var(--space-base) * 1.5) calc(var(--space-gutter));
    background: linear-gradient(to right, rgba(6, 182, 212, 0.80), rgba(217, 70, 239, 0.80));
    color: #fff;
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 700;
    border-radius: var(--radius-sm);
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.30);
    transition: background var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.btn-primary:hover {
    background: linear-gradient(to right, var(--color-neon-cyan), var(--color-neon-magenta));
    box-shadow: 0 0 25px rgba(6, 182, 212, 0.50);
    transform: translateY(-2px);
}

/* Botón de formulario — con sweep */
.btn-submit {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: calc(var(--space-base) * 2);
    background: linear-gradient(to right, rgba(6, 182, 212, 0.20), rgba(217, 70, 239, 0.20));
    border: 1px solid var(--color-glass-border);
    color: var(--color-on-background);
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    cursor: pointer;
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.10);
    transition: background var(--transition-slow),
    box-shadow var(--transition-slow),
    color var(--transition-slow);
}

.btn-submit::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(-110%);
    transition: transform 0.6s ease;
}

.btn-submit:hover {
    background: linear-gradient(to right, var(--color-neon-cyan), var(--color-neon-magenta));
    color: #fff;
    box-shadow: 0 0 28px rgba(6, 182, 212, 0.40);
}

.btn-submit:hover::after {
    transform: translateX(110%);
}


/* --------------------------------------------------------------------------
  10. CARDS Y GLASSMORPHISM
   -------------------------------------------------------------------------- */

/* Card de vidrio — base */
.glass-card {
    background: rgba(35, 30, 39, 0.45);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--color-glass-border);
    border-radius: var(--radius-xl);
    transition: border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

/* Hover genérico con glow cyan */
.glow-hover:hover {
    box-shadow: 0 0 25px rgba(6, 182, 212, 0.20), 0 0 15px rgba(217, 70, 239, 0.15);
    border-color: rgba(6, 182, 212, 0.40);
    transform: translateY(-5px);
}

/* Hover sólo glow, sin translate (para cards con contenido denso) */
.glow-accent:hover {
    box-shadow: var(--glow-primary);
    border-color: rgba(221, 183, 255, 0.40);
}

/* Card de servicio (subpáginas) */
.service-card {
    position: relative;
    background: rgba(35, 30, 39, 0.40);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--color-glass-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

.service-card:hover {
    box-shadow: 0 0 28px rgba(6, 182, 212, 0.20), 0 0 14px rgba(217, 70, 239, 0.15);
    border-color: rgba(6, 182, 212, 0.40);
    transform: translateY(-5px);
}

/* Imagen dentro de service-card */
.service-card__image {
    height: 192px;
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: var(--color-surface-container-high);
}

.service-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    opacity: 0.60;
    mix-blend-mode: screen;
    transition: opacity var(--transition-base);
}

.service-card:hover .service-card__image img {
    opacity: 1;
}

/* Tags de tecnología */
.tech-tag {
    display: inline-block;
    padding: 2px var(--space-base);
    background-color: var(--color-surface-bright);
    border: 1px solid rgba(6, 182, 212, 0.30);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--color-neon-cyan);
    box-shadow: 0 0 5px rgba(6, 182, 212, 0.10);
}

.tech-tag--magenta {
    border-color: rgba(217, 70, 239, 0.30);
    color: var(--color-neon-magenta);
    box-shadow: 0 0 5px rgba(217, 70, 239, 0.10);
}

.tech-tag--primary {
    border-color: rgba(221, 183, 255, 0.30);
    color: var(--color-primary);
    box-shadow: 0 0 5px rgba(221, 183, 255, 0.10);
}

/* Pill de habilidades blandas */
.skill-pill {
    display: inline-block;
    padding: 4px calc(var(--space-base) * 1.5);
    background-color: rgba(44, 41, 45, 0.50);
    border: 1px solid var(--color-glass-border);
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--color-on-surface-variant);
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.skill-pill:hover {
    border-color: rgba(6, 182, 212, 0.40);
    color: var(--color-neon-cyan);
}


/* --------------------------------------------------------------------------
  11. GRADIENTES Y EFECTOS DE TEXTO
   -------------------------------------------------------------------------- */

/* Texto con gradiente de marca */
.gradient-text {
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Variante cyan→primary */
.gradient-text-cyan {
    background: linear-gradient(90deg, var(--color-neon-cyan), var(--color-primary-fixed-dim));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Glow de texto */
.glow-text-cyan {
    text-shadow: 0 0 10px rgba(6, 182, 212, 0.50);
}

/* Línea de timeline */
.timeline-line {
    background: linear-gradient(to bottom, var(--color-neon-cyan) 0%, var(--color-neon-magenta) 50%, rgba(221, 183, 255, 0.10) 100%);
}

/* Línea decorativa de circuito (subpáginas) */
.circuit-line,
.cyber-circuit-line,
.cyber-line {
    background: var(--gradient-primary);
    width: 2px;
}


/* --------------------------------------------------------------------------
  12. TIMELINE DE EXPERIENCIA
   -------------------------------------------------------------------------- */

.timeline {
    position: relative;
    padding-left: 32px;
    margin-top: 32px;
}

/* Línea vertical */
.timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-glass-border);
}

.timeline::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 33%;
    background: linear-gradient(to bottom, var(--color-neon-cyan), var(--color-neon-magenta));
    box-shadow: 0 0 10px var(--color-neon-cyan);
}

/* Nodo del timeline */
.timeline-dot {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    z-index: 10;
    left: -8px;
    top: 0;
}

.timeline-dot--cyan {
    background-color: var(--color-neon-cyan);
    box-shadow: 0 0 15px var(--color-neon-cyan);
}

.timeline-dot--magenta {
    background-color: var(--color-surface-container);
    border: 2px solid var(--color-neon-magenta);
    box-shadow: 0 0 10px rgba(217, 70, 239, 0.50);
}

.timeline-dot--primary {
    background-color: var(--color-surface-container);
    border: 2px solid var(--color-primary);
    box-shadow: 0 0 10px rgba(221, 183, 255, 0.50);
}


/* --------------------------------------------------------------------------
  13. FORMULARIO DE CONTACTO
   -------------------------------------------------------------------------- */

.form-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: var(--space-base);
}

.form-label--cyan {
    color: var(--color-neon-cyan);
}

.form-label--magenta {
    color: var(--color-neon-magenta);
}

.form-label--primary {
    color: var(--color-primary);
}

.form-label--muted {
    color: var(--color-on-surface-variant);
}

.form-input,
.form-textarea,
.form-select {
    width: 100%;
    background-color: rgba(44, 41, 45, 0.50);
    border: 1px solid var(--color-glass-border);
    border-radius: var(--radius-sm);
    padding: calc(var(--space-base) * 1.5);
    color: var(--color-on-background);
    font-family: var(--font-body);
    font-size: 16px;
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    -webkit-appearance: none;
    appearance: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
    opacity: 0.35;
    color: var(--color-on-surface-variant);
}

.form-input:focus,
.form-textarea:focus {
    border-color: var(--color-neon-cyan);
    box-shadow: 0 0 0 1px var(--color-neon-cyan);
}

.form-textarea {
    resize: none;
}

.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
}


/* --------------------------------------------------------------------------
  14. FOOTER
   -------------------------------------------------------------------------- */

.site-footer {
    background-color: rgba(16, 13, 17, 0.80);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--color-glass-border);
    width: 100%;
    margin-top: 80px;
}

/* --------------------------------------------------------------------------
  15. UTILIDADES COMPARTIDAS
   -------------------------------------------------------------------------- */

/* Contenedor de sección */
.section-wrapper {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-margin-mobile);
    padding-block: 80px;
}

/* Cabecera numerada de sección */
.section-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 40px;
}

.section-header__number {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.05em;
}

.section-header__title {
    font-family: var(--font-display);
    font-size: 32px;
    line-height: 40px;
    font-weight: 600;
    color: var(--color-on-background);
    white-space: nowrap;
}

.section-header__line {
    height: 1px;
    flex: 1;
    background: var(--gradient-surface);
    position: relative;
}

.section-header__line::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.section-header__line--cyan::after {
    background-color: var(--color-neon-cyan);
    box-shadow: 0 0 8px var(--color-neon-cyan);
}

.section-header__line--magenta::after {
    background-color: var(--color-neon-magenta);
    box-shadow: 0 0 8px var(--color-neon-magenta);
}

.section-header__line--primary::after {
    background-color: var(--color-primary-fixed-dim);
    box-shadow: 0 0 8px var(--color-primary-fixed-dim);
}

/* Badge de estado ("AI powered" etc.) */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-base);
    padding: 4px calc(var(--space-base) * 1.5);
    background-color: var(--color-surface-container-high);
    border: 1px solid var(--color-glass-border);
    border-radius: var(--radius-full);
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.10);
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--color-on-surface-variant);
}

/* Lista estilo "bullet neon" */
.neon-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.neon-list__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-base);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 24px;
    color: var(--color-on-surface-variant);
}

.neon-list__bullet {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-top: 9px;
    background-color: var(--color-neon-cyan);
    box-shadow: 0 0 5px var(--color-neon-cyan);
}

/* Decorador de esquina de formulario */
.form-corner-cyan {
    position: absolute;
    top: -1px;
    left: -1px;
    width: 80px;
    height: 1px;
    background-color: var(--color-neon-cyan);
    box-shadow: 0 0 10px var(--color-neon-cyan);
}

.form-corner-magenta {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 80px;
    height: 1px;
    background-color: var(--color-neon-magenta);
    box-shadow: 0 0 10px var(--color-neon-magenta);
}

/* Punto de glow pulsante (indicadores de "online") */
.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-success);
    box-shadow: 0 0 6px var(--color-success);
    animation: pulse-glow 2s ease-in-out infinite;
}


/* --------------------------------------------------------------------------
  16. RESPONSIVE / MOBILE
   -------------------------------------------------------------------------- */

/* Tablet y superior (≥768px) */
@media (min-width: 768px) {
    .section-wrapper {
        padding-inline: var(--space-margin-desktop);
    }

    .btn-download-cv {
        display: flex;
    }
}

/* Desktop (≥1024px) */
@media (min-width: 1024px) {
    .timeline {
        padding-left: 0;
    }
}

/* Contenedor centrado con max-width */
@media (min-width: 1264px) {
    .section-wrapper {
        padding-inline: var(--space-margin-desktop);
    }
}

/* ============================================================
   BOOTSTRAP × TAILWIND — FIX DEFINITIVO (RESTAURACIÓN TOTAL)
   ============================================================ */

/* 0. Restauración Forense de Restricciones Geométricas */
.navbar-brand img {
    max-width: none !important;
    width: auto !important;
    height: 40px !important;
    object-fit: contain !important;
}

body > main {
    padding-top: 64px; /* !important eliminado para no bloquear clases pt-* de Tailwind */
}

/* 1. Anular colisión de visibilidad de Tailwind */
.navbar-collapse.collapse,
.navbar-collapse.collapsing {
    visibility: visible !important;
}

/* 2. DOMINIO ESCRITORIO (Restauración de Flexbox y Dropdown Absoluto) */
@media (min-width: 992px) {
    #navbarMenu {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex: 1;
    }

    .navbar-nav {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 auto !important; /* Mantiene los links al centro */
    }

    .navbar .dropdown-menu {
        position: absolute !important;
        top: 100% !important;
        left: 50% !important;
        transform: translateX(-50%) !important; /* Centrado perfecto bajo la palabra Servicios */
        font-size: 13px;
        min-width: 200px;
        padding: 8px;
        display: none; /* Oculto por defecto, el hover lo activa */
    }

    /* Vector de Optimización: Dropdown por Hover */
    .nav-item.dropdown:hover .dropdown-menu {
        display: block !important;
        opacity: 1;
        visibility: visible;
        margin-top: 0;
    }

    .navbar-toggler {
        display: none !important;
    }
}

/* 3. DOMINIO MÓVIL (El parche táctico) */
@media (max-width: 991.98px) {
    #navbarMenu {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 100% !important;
        overflow: hidden !important;
        background: rgba(21, 17, 27, 0.98);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        border-bottom: 1px solid rgba(0, 243, 255, 0.2);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6);
        opacity: 0;
        visibility: hidden !important;
        transition: opacity 0.3s ease, visibility 0.3s ease !important;
    }

    #navbarMenu.show {
        display: block !important;
        opacity: 1;
        visibility: visible !important;
        height: auto !important;
        padding-bottom: 16px;
    }

    #navbarMenu.collapsing {
        height: auto !important;
        transition: none !important;
    }

    .navbar-collapse .nav-link {
        padding: 16px 24px !important;
        color: #cfc2d6 !important;
        border-left: 2px solid transparent;
        transition: all 0.2s ease;
    }

    .navbar-collapse .nav-link:hover {
        background: rgba(0, 243, 255, 0.05);
        border-left: 2px solid #00f3ff;
    }

    #navbarMenu.show .dropdown-menu {
        display: block !important;
        position: static !important;
        float: none !important;
        box-shadow: none !important;
        background: rgba(0, 0, 0, 0.2) !important;
        border: none !important;
        border-left: 2px solid rgba(217, 70, 239, 0.4) !important;
        margin: 4px 24px 12px 24px !important;
        padding: 8px 0 !important;
        border-radius: 0 8px 8px 0;
    }

    #navbarMenu.show .dropdown-menu .dropdown-item {
        color: #cfc2d6 !important;
        font-size: 13px;
        padding: 10px 16px !important;
    }
}

/* ==========================================================================
   ADICIONES v2.0 — Soporte para script.js y mejoras visuales
   ==========================================================================
   17. Navbar — scrolled state
   18. Typed text cursor
   19. Glitch effect (H1 hero)
   20. Scan line (hero image)
   21. Dropdown items coloreados
   22. Navbar brand text
   23. Navbar icon (hamburguesa)
   24. Tech tag variantes faltantes
   25. Back-to-top (inyectado por JS)
   26. Toast de bienvenida
   27. Nav link active state
   28. Formulario — mejoras
   ========================================================================== */


/* ── 17. NAVBAR scrolled ─────────────────────────── */
.navbar {
    background: rgba(21, 17, 27, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--color-glass-border);
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.1);
    z-index: 1030;
    transition: background var(--transition-base),
    box-shadow var(--transition-base),
    padding var(--transition-base);
    padding-top: 10px;
    padding-bottom: 10px;
}

.navbar--scrolled {
    background: rgba(16, 12, 21, 0.97) !important;
    box-shadow: 0 0 30px rgba(6, 182, 212, 0.15), 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    padding-top: 6px;
    padding-bottom: 6px;
}

/* Brand text degradado */
.navbar-brand-text {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 600;
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.01em;
}

/* Navbar icon Material Symbol */
.navbar-icon {
    font-family: 'Material Symbols Outlined';
    font-size: 28px;
    color: var(--color-neon-cyan);
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Nav links — base desde Bootstrap */
.navbar-nav .nav-link {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-on-surface-variant) !important;
    padding: 8px 12px !important;
    border-radius: var(--radius-lg);
    transition: color var(--transition-fast), background-color var(--transition-fast) !important;
    letter-spacing: 0.02em;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: var(--color-neon-cyan) !important;
    background-color: rgba(6, 182, 212, 0.08) !important;
}

.navbar-nav .nav-link--active,
.navbar-nav .nav-link.nav-link--active {
    color: var(--color-neon-cyan) !important;
    border-bottom: 2px solid var(--color-neon-cyan);
}

/* Dropdown menu */
.dropdown-menu {
    background: rgba(35, 30, 39, 0.97) !important;
    border: 1px solid var(--color-glass-border) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.15) !important;
    padding: 8px !important;
    min-width: 200px !important;
}

.dropdown-item {
    font-family: var(--font-mono) !important;
    font-size: 13px !important;
    color: var(--color-on-surface-variant) !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    transition: color var(--transition-fast), background var(--transition-fast) !important;
}

.dropdown-item--cyan:hover   { color: var(--color-neon-cyan)    !important; background: rgba(6, 182, 212, 0.08)  !important; }
.dropdown-item--green:hover  { color: #39FF14                   !important; background: rgba(57, 255, 20, 0.08)  !important; }
.dropdown-item--magenta:hover{ color: var(--color-neon-magenta) !important; background: rgba(217, 70, 239, 0.08) !important; }
.dropdown-item--gold:hover   { color: #FFD700                   !important; background: rgba(255, 215, 0, 0.08)  !important; }


/* ── 18. TYPED CURSOR ───────────────────────────── */
.typed-cursor {
    display: inline-block;
    color: var(--color-neon-cyan);
    font-weight: 300;
    animation: blink-cursor 0.7s step-end infinite;
    margin-left: 2px;
    vertical-align: middle;
}

@keyframes blink-cursor {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}


/* ── 19. GLITCH H1 ──────────────────────────────── */
@keyframes glitch-clip-1 {
    0%   { clip-path: inset(40% 0 61% 0); transform: translate(-4px, 0); }
    20%  { clip-path: inset(92% 0 1%  0); transform: translate(4px,  0); }
    40%  { clip-path: inset(43% 0 1%  0); transform: translate(-4px, 0); }
    60%  { clip-path: inset(25% 0 58% 0); transform: translate(4px,  0); }
    80%  { clip-path: inset(54% 0 7%  0); transform: translate(-4px, 0); }
    100% { clip-path: inset(58% 0 43% 0); transform: translate(0,    0); }
}

@keyframes glitch-clip-2 {
    0%   { clip-path: inset(25% 0 58% 0); transform: translate(4px,  0); }
    20%  { clip-path: inset(54% 0 7%  0); transform: translate(-4px, 0); }
    40%  { clip-path: inset(58% 0 43% 0); transform: translate(4px,  0); }
    60%  { clip-path: inset(40% 0 61% 0); transform: translate(-4px, 0); }
    80%  { clip-path: inset(92% 0 1%  0); transform: translate(4px,  0); }
    100% { clip-path: inset(43% 0 1%  0); transform: translate(0,    0); }
}

#inicio h1.glitch-active {
    position: relative;
}

#inicio h1.glitch-active::before,
#inicio h1.glitch-active::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    pointer-events: none;
}

#inicio h1.glitch-active::before {
    color: var(--color-neon-cyan);
    animation: glitch-clip-1 0.3s steps(1) forwards;
    opacity: 0.7;
}

#inicio h1.glitch-active::after {
    color: var(--color-neon-magenta);
    animation: glitch-clip-2 0.3s steps(1) forwards;
    opacity: 0.7;
}


/* ── 20. SCAN LINE en hero image ────────────────── */
.hero-image-wrapper {
    position: relative;
}

.scan-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(6, 182, 212, 0.6), transparent);
    box-shadow: 0 0 8px rgba(6, 182, 212, 0.4);
    animation: scan-move 4s linear infinite;
    z-index: 20;
    pointer-events: none;
}

@keyframes scan-move {
    0%   { top: 0%;   opacity: 0; }
    5%   { opacity: 1; }
    95%  { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}


/* ── 21. Tech tag variantes faltantes ───────────── */
.tech-tag--pink {
    border-color: rgba(255, 0, 128, 0.30);
    color: var(--color-neon-pink);
    box-shadow: 0 0 5px rgba(255, 0, 128, 0.10);
}


/* ── 22. Form — border-red para validación ──────── */
.border-red-500 {
    border-color: #ef4444 !important;
}


/* ── 23. Nav link active en subpáginas ──────────── */
.nav-link--active {
    color: var(--color-neon-cyan) !important;
}


/* ── 24. Mejora hover de skill pills ────────────── */
.skill-pill {
    cursor: default;
    transition: border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.skill-pill:hover {
    border-color: rgba(6, 182, 212, 0.5);
    color: var(--color-neon-cyan);
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.25);
}


/* ── 25. Partículas dinámica (reemplazan inline) ── */
#particles-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}


/* ── 26. Formulario success overlay ─────────────── */
.form-success-message {
    animation: fadeIn 0.4s ease forwards;
}


/* ── 28. Mejora padding-top body por navbar fija ── */
body > main {
    padding-top: 64px;
}

@media (max-width: 767px) {
    section .inline-flex.rounded-full,
    section [class*="rounded-full"].inline-flex {
        font-size: 11px !important;
        padding: 4px 10px !important;
        letter-spacing: 0.04em !important;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.navbar-brand {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
}

/* ============================================================
   OVERRIDE: PROTECCIÓN DE EJE X (KILL-SWITCH MÓVIL)
   ============================================================ */
/* 1. Candado absoluto al Viewport. Ningún nodo fantasma podrá expandir la pantalla */
html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    width: 100% !important;
}

/* 2. Destrucción del centrado Flexbox anómalo que empujaba el contenido a coordenadas X negativas */
body > main {
    display: block !important; /* Anula el flex flex-col items-center problemático */
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* 3. Re-calibración Geométrica Estricta para Teléfonos */
@media (max-width: 767.98px) {
    /* Restauración de márgenes laterales obligatorios */
    .section-wrapper,
    section#inicio {
        padding-left: 20px !important;
        padding-right: 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Reducción de la tipografía H1 para que no perfore los bordes físicos */
    .text-headline-xl,
    #inicio h1 {
        font-size: 34px !important;
        line-height: 40px !important;
        word-wrap: break-word !important;
    }

    /* Corrección del Typewriter Effect para permitir saltos de línea naturales */
    #typed-role {
        white-space: normal !important;
        word-break: break-word !important;
        font-size: 22px !important;
    }

    /* Contenedores de tarjetas a prueba de desbordamiento (Atrapa brillos e iconos) */
    .glass-card, .service-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
}

/* ============================================================
   FIX FORENSE: RESPONSIVE Y FOOTER
   ============================================================ */

/* 1. Muro de contención móvil para evitar que los textos toquen los bordes */
@media (max-width: 767px) {
    #inicio, .section-wrapper, .site-footer > div {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .text-headline-xl { font-size: 32px !important; line-height: 1.2 !important; }
    .section-header__title { white-space: normal !important; word-break: break-word !important; }
}

/* 2. Blindaje Footer: Grid 2x2 en móvil, Línea recta en PC (evade botón) */
footer.site-footer > div {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding-bottom: 40px !important;
}

@media (min-width: 1024px) {
    footer.site-footer > div {
        grid-template-columns: 1fr auto 1fr !important;
        padding-right: 96px !important; /* Margen para botón flotante */
    }
}


/* Fix doble scrollbar */
body > main {
    overflow: visible !important;
    height: auto !important;
}