@import url(./preloarder.css);
   @import url(./navbar.css);
   @import url(./button.css);
   @import url(./footer.css);
   @import url(./skills.css);
   @import url(./assets.css);
   @import url(./jobs.css);
   @import url(./contact.css);

   :root {
       --primary-text-color: #ccd6f6;
       --secondary-text-color: #8892b0;
       --background: #24283b;
       --white: #e6f1ff;
       --lila: #7aa2f7;
       --font-sans: 'Inter', 'San Francisco', 'SF Pro Text', -apple-system, system-ui, sans-serif;
       --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
       --transition: all 0.35s cubic-bezier(0.645, 0.045, 0.355, 1);
   }

   html {
       scroll-behavior: smooth;
   }

   body {
       font-family: var(--font-sans);
       background-color: var(--background);
       color: var(--secondary-text-color);
       overflow-x: hidden;
       overflow-y: hidden;
   }

   /* --- Hero Section & Visual Element --- */

   #header-hero-section {
       background-image:
           linear-gradient(rgba(36, 40, 59, 0.95), rgba(36, 40, 59, 0.95)),
           repeating-linear-gradient(45deg, #373c50 0, #373c50 1px, transparent 1px, transparent 50px),
           repeating-linear-gradient(-45deg, #373c50 0, #373c50 1px, transparent 1px, transparent 50px);
       background-size: 100% 100%, 100px 100px, 100px 100px;
       animation: none;
   }

   .hero-title {
       color: var(--primary-text-color);
       font-weight: 900;
       opacity: 0;
       transform: translateY(20px);
       animation: fadeInTranslate 0.8s forwards ease-out;
   }

   .hero-title:nth-child(1) {
       animation-delay: 0.3s;
   }

   .hero-title:nth-child(2) {
       animation-delay: 0.6s;
   }

   .hero-title:nth-child(3) {
       animation-delay: 0.9s;
   }

   @keyframes fadeInTranslate {
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }


   ::-webkit-scrollbar {
       width: 8px;
       background-color: var(--background);
   }

   ::-webkit-scrollbar-thumb {
       background-color: var(--lila);
       border-radius: 4px;
       border: 2px solid var(--background);
   }

   /* Ajuste para pantallas más pequeñas para la línea del heading */
   @media (max-width: 768px) {
       .section-heading::after {
           width: 100px;
           margin-left: 10px;
       }
   }

   @media (max-width: 640px) {
       .section-heading::after {
           width: 70px;
       }
   }

   .hero-name-gradient {
       background: linear-gradient(135deg, #ffffff 40%, var(--lila) 100%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       display: inline-block;
   }