:root {
         --primary: #6C63FF;
         --secondary: #4A44C6;
         --dark: #1A1A2E;
         --darker: #0F0F1B;
         --light: #F5F5F7;
         --terminal: #00FF9D;
         --mobile: #FF6B9D;
         --android: #3DDC84;
         --ios: #007AFF;
         --backend: #36D1DC;
         --kotlin: #7F52FF;
         --swift: #F05138;
     }

     body {
         font-family: 'Space Grotesk', sans-serif;
         background-color: var(--darker);
         color: var(--light);
         overflow-x: hidden;
     }

     .text-muted {
         color: rgba(255, 255, 255, 0.6) !important;
     }

     .code-font {
         font-family: 'Source Code Pro', monospace;
     }

     .navbar {
         background-color: rgba(26, 26, 46, 0.9);
         backdrop-filter: blur(10px);
         padding: 1rem 0;
         transition: all 0.3s ease;
     }

     .navbar-brand {
         font-weight: 700;
         color: var(--light) !important;
     }

     .nav-link {
         color: var(--light) !important;
         font-weight: 500;
         margin: 0 0.5rem;
         transition: color 0.3s;
     }

     .nav-link:hover {
         color: var(--primary) !important;
     }

     .hero {
         min-height: 100vh;
         background: linear-gradient(135deg, var(--darker) 0%, var(--dark) 100%);
         display: flex;
         align-items: center;
         position: relative;
         overflow: hidden;
     }

     .hero::before {
         content: '';
         position: absolute;
         width: 200%;
         height: 200%;
         background: radial-gradient(circle, rgba(108, 99, 255, 0.1) 0%, transparent 70%);
         animation: pulse 15s infinite linear;
     }



     .code-font {
         font-family: 'Source Code Pro', monospace;
     }

     .navbar {
         background-color: rgba(26, 26, 46, 0.9);
         backdrop-filter: blur(10px);
         padding: 1rem 0;
         transition: all 0.3s ease;
     }

     .navbar-brand {
         font-weight: 700;
         color: var(--light) !important;
     }

     .nav-link {
         color: var(--light) !important;
         font-weight: 500;
         margin: 0 0.5rem;
         margin-right: 10px;
         transition: color 0.3s;
     }

     .nav-link:hover {
         color: var(--primary) !important;
     }

     .language-selector {
         background: transparent;
         border: 1px solid rgba(255, 255, 255, 0.2);
         color: var(--light);
         border-radius: 20px;
         padding: 5px 15px;
         margin-left: 5px;
         cursor: pointer;
         transition: all 0.3s;
     }

     .language-selector:hover {
         border-color: var(--primary);
         background: rgba(108, 99, 255, 0.1);
     }

     .language-selector option {
         background: var(--dark);
         color: var(--light);
     }




     @keyframes pulse {
         0% {
             transform: translate(-50%, -50%) scale(1);
         }

         50% {
             transform: translate(-50%, -50%) scale(1.1);
         }

         100% {
             transform: translate(-50%, -50%) scale(1);
         }
     }

     .terminal {
         background-color: rgba(26, 26, 46, 0.7);
         border-radius: 10px;
         border: 1px solid rgba(255, 255, 255, 0.1);
         overflow: hidden;
         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
     }

     .terminal-header {
         background-color: rgba(26, 26, 46, 0.9);
         padding: 10px 15px;
         border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     }

     .terminal-buttons {
         display: flex;
         gap: 8px;
     }

     .terminal-button {
         width: 12px;
         height: 12px;
         border-radius: 50%;
     }

     .terminal-button.close {
         background-color: #FF5F57;
     }

     .terminal-button.minimize {
         background-color: #FFBD2E;
     }

     .terminal-button.maximize {
         background-color: #28CA42;
     }

     .terminal-content {
         padding: 30px;
     }

     .prompt {
         color: var(--terminal);
     }

     .typing-text {
         border-right: 2px solid var(--terminal);
         animation: blink 1s infinite;
     }

     @keyframes blink {

         0%,
         100% {
             border-color: var(--terminal);
         }

         50% {
             border-color: transparent;
         }
     }

     .section-title {
         position: relative;
         margin-bottom: 3rem;
     }

     .section-title::after {
         content: '';
         position: absolute;
         bottom: -10px;
         left: 0;
         width: 60px;
         height: 3px;
         background: linear-gradient(90deg, var(--primary), var(--backend));
         border-radius: 3px;
     }

     .skill-card {
         background: rgba(26, 26, 46, 0.7);
         border-radius: 10px;
         padding: 1.5rem;
         height: 100%;
         transition: transform 0.3s, box-shadow 0.3s;
         border: 1px solid rgba(255, 255, 255, 0.05);
     }

     .skill-card:hover {
         transform: translateY(-5px);
         box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
     }

     .mobile-card {
         border-top: 3px solid var(--mobile);
     }

     .backend-card {
         border-top: 3px solid var(--backend);
     }

     .project-card {
         background: rgba(26, 26, 46, 0.7);
         border-radius: 10px;
         overflow: hidden;
         transition: transform 0.3s, box-shadow 0.3s;
         border: 1px solid rgba(255, 255, 255, 0.05);
     }

     .project-card:hover {
         transform: translateY(-5px);
         box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
     }

     .project-image {
         height: 200px;
         background: linear-gradient(135deg, var(--primary), var(--secondary));
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
         font-size: 3rem;
     }

     .mobile-project .project-image {
         background: linear-gradient(135deg, var(--mobile), #FF8EAD);
     }

     .backend-project .project-image {
         background: linear-gradient(135deg, var(--backend), #5B86E5);
     }

     .tech-badge {
         background: rgba(108, 99, 255, 0.2);
         color: var(--primary);
         padding: 5px 10px;
         border-radius: 20px;
         font-size: 0.8rem;
         margin-right: 5px;
         margin-bottom: 5px;
         display: inline-block;
     }

     .mobile-badge {
         background: rgba(255, 107, 157, 0.2);
         color: var(--mobile);
     }

     .android-badge {
         background: rgba(61, 220, 132, 0.2);
         color: var(--android);
     }

     .ios-badge {
         background: rgba(0, 122, 255, 0.2);
         color: var(--ios);
     }

     .kotlin-badge {
         background: rgba(127, 82, 255, 0.2);
         color: var(--kotlin);
     }

     .swift-badge {
         background: rgba(240, 81, 56, 0.2);
         color: var(--swift);
     }

     .backend-badge {
         background: rgba(54, 209, 220, 0.2);
         color: var(--backend);
     }

     .timeline {
         position: relative;
         padding-left: 30px;
     }

     .timeline::before {
         content: '';
         position: absolute;
         left: 0;
         top: 0;
         bottom: 0;
         width: 2px;
         background: linear-gradient(to bottom, var(--primary), var(--backend));
     }

     .timeline-item {
         position: relative;
         margin-bottom: 30px;
     }

     .timeline-item::before {
         content: '';
         position: absolute;
         left: -38px;
         top: 5px;
         width: 12px;
         height: 12px;
         border-radius: 50%;
         background: var(--primary);
     }

     .contact-form {
         background: rgba(26, 26, 46, 0.7);
         border-radius: 10px;
         padding: 2rem;
         border: 1px solid rgba(255, 255, 255, 0.05);
     }

     .form-control {
         background: rgba(15, 15, 27, 0.7);
         border: 1px solid rgba(255, 255, 255, 0.1);
         color: var(--light);
         padding: 12px 15px;
     }

     .form-control:focus {
         background: rgba(15, 15, 27, 0.9);
         border-color: var(--primary);
         color: var(--light);
         box-shadow: 0 0 0 0.25rem rgba(108, 99, 255, 0.25);
     }

     .btn-primary {
         background: linear-gradient(135deg, var(--primary), var(--secondary));
         border: none;
         padding: 12px 30px;
         font-weight: 600;
         transition: all 0.3s;
     }

     .btn-primary:hover {
         transform: translateY(-2px);
         box-shadow: 0 5px 15px rgba(108, 99, 255, 0.4);
     }

     .floating-elements {
         position: absolute;
         width: 100%;
         height: 100%;
         top: 0;
         left: 0;
         pointer-events: none;
         z-index: 0;
     }

     .floating-element {
         position: absolute;
         border-radius: 50%;
         opacity: 0.1;
         animation: float 15s infinite linear;
     }

     @keyframes float {
         0% {
             transform: translateY(0) rotate(0deg);
         }

         50% {
             transform: translateY(-20px) rotate(180deg);
         }

         100% {
             transform: translateY(0) rotate(360deg);
         }
     }

     footer {
         background-color: var(--dark);
         padding: 3rem 0;
         border-top: 1px solid rgba(255, 255, 255, 0.05);
     }

     .social-icon {
         display: inline-flex;
         align-items: center;
         justify-content: center;
         width: 40px;
         height: 40px;
         background: rgba(108, 99, 255, 0.1);
         border-radius: 50%;
         color: var(--light);
         margin-right: 10px;
         transition: all 0.3s;
     }

     .social-icon:hover {
         background: var(--primary);
         transform: translateY(-3px);
     }

     /* About Section Improvements */
     .specialty-grid {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
         gap: 20px;
         margin-top: 30px;
     }

     .specialty-card {
         background: rgba(26, 26, 46, 0.7);
         border-radius: 10px;
         padding: 20px;
         border-left: 4px solid var(--primary);
         transition: transform 0.3s;
     }

     .specialty-card:hover {
         transform: translateX(5px);
     }

     .specialty-card.android {
         border-left-color: var(--android);
     }

     .specialty-card.ios {
         border-left-color: var(--ios);
     }

     .specialty-card.kotlin-multiplatform {
         border-left-color: var(--kotlin);
     }

     .specialty-card.backend {
         border-left-color: var(--backend);
     }

     .tech-stack {
         display: flex;
         flex-wrap: wrap;
         gap: 10px;
         margin-top: 15px;
     }

     .tech-item {
         background: rgba(255, 255, 255, 0.1);
         padding: 5px 10px;
         border-radius: 20px;
         font-size: 0.8rem;
     }

     .stats-container {
         display: flex;
         justify-content: space-around;
         margin-top: 40px;
         text-align: center;
     }

     .stat-item {
         padding: 20px;
     }

     .stat-number {
         font-size: 2.5rem;
         font-weight: 700;
         background: linear-gradient(135deg, var(--primary), var(--backend));
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         display: block;
     }

     .stat-label {
         font-size: 0.9rem;
         color: rgba(255, 255, 255, 0.7);
         margin-top: 5px;
     }

     /* Responsive adjustments */
     @media (max-width: 768px) {
         .hero {
             padding: 100px 0 50px;
             min-height: auto;
         }

         .terminal-content {
             padding: 20px;
         }

         .display-4 {
             font-size: 2.5rem;
         }

         .stats-container {
             flex-direction: column;
             gap: 20px;
         }
     }

     /* Responsive adjustments */
     @media (max-width: 768px) {
         .hero {
             padding: 100px 0 50px;
             min-height: auto;
         }

         .terminal-content {
             padding: 20px;
         }

         .display-4 {
             font-size: 2.5rem;
         }

         .stats-container {
             flex-direction: column;
             gap: 20px;
         }

         .language-selector {
             margin-top: 10px;
             margin-left: 0;
         }
     }

     .hero-with-profile {
         display: flex;
         align-items: center;
         gap: 3rem;
     }

     .hero-profile {
         flex: 0 0 300px;
     }

     .hero-content {
         flex: 1;
     }

     .profile-section {
         display: flex;
         align-items: center;
         justify-content: center;
         margin-bottom: 2rem;
     }

     .profile-image-container {
         position: relative;
         width: 200px;
         height: 200px;
         margin: 0 auto;
     }

     .profile-image {
         width: 100%;
         height: 100%;
         border-radius: 50%;
         object-fit: cover;
         border: 4px solid var(--primary);
         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
         transition: all 0.3s ease;
     }

     .profile-image:hover {
         transform: scale(1.05);
         box-shadow: 0 15px 40px rgba(108, 99, 255, 0.4);
     }

     .profile-glow {
         position: absolute;
         top: -5px;
         left: -5px;
         right: -5px;
         bottom: -5px;
         border-radius: 50%;
         background: linear-gradient(45deg, var(--primary), var(--backend), var(--mobile));
         z-index: -1;
         animation: rotate 3s linear infinite;
         opacity: 0.7;
     }

     @keyframes rotate {
         0% {
             transform: rotate(0deg);
         }

         100% {
             transform: rotate(360deg);
         }
     }

     @media (max-height: 600px) and (orientation: landscape) {
         .hero {
             min-height: auto;
             padding: 4rem 0;
         }

         .hero-with-profile {
             flex-direction: row;
             min-height: auto;
         }

         .profile-image-container {
             width: 120px;
             height: 120px;
         }
     }

     .profile-glow {
         position: absolute;
         top: -8px;
         left: -8px;
         right: -8px;
         bottom: -8px;
         border-radius: 50%;
         background: linear-gradient(45deg, var(--primary), var(--backend), var(--mobile));
         z-index: -1;
         animation: rotate 6s linear infinite;
         opacity: 0.6;
         filter: blur(12px);
     }

     @keyframes rotate {
         0% {
             transform: rotate(0deg);
         }

         100% {
             transform: rotate(360deg);
         }
     }

     /* RESPONSIVE BREAKPOINTS */

     /* Desktop grande */
     @media (min-width: 1400px) {
         .profile-image-container {
             width: 320px;
             height: 320px;
         }

         .hero-with-profile {
             gap: 4rem;
         }
     }

     /* Desktop standard */
     @media (min-width: 1200px) and (max-width: 1399px) {
         .profile-image-container {
             width: 280px;
             height: 280px;
         }
     }

     /* Tablet landscape */
     @media (min-width: 992px) and (max-width: 1199px) {
         .profile-image-container {
             width: 240px;
             height: 240px;
         }

         .hero-with-profile {
             gap: 2rem;
         }
     }

     /* Tablet portrait */
     @media (min-width: 768px) and (max-width: 991px) {
         .hero-with-profile {
             flex-direction: column;
             text-align: center;
             gap: 2rem;
             padding: 2rem 0;
         }

         .profile-image-container {
             width: 200px;
             height: 200px;
             margin-bottom: 1rem;
         }

         .hero-profile {
             order: -1;
             /* Mover la foto arriba */
         }
     }

     /* Mobile grande */
     @media (min-width: 576px) and (max-width: 767px) {
         .hero-with-profile {
             flex-direction: column;
             text-align: center;
             gap: 1.5rem;
             padding: 1.5rem 0;
         }

         .profile-image-container {
             width: 180px;
             height: 180px;
             margin-bottom: 1rem;
         }

         .hero-profile {
             order: -1;
         }

         .terminal-content {
             padding: 1.5rem;
         }
     }

     /* Mobile pequeño */
     @media (max-width: 575px) {
         .hero-with-profile {
             flex-direction: column;
             text-align: center;
             gap: 1rem;
             padding: 1rem 0;
         }

         .profile-image-container {
             width: 150px;
             height: 150px;
             margin-bottom: 1rem;
         }

         .hero-profile {
             order: -1;
         }

         .terminal {
             margin: 0 -15px;
         }

         .terminal-content {
             padding: 1rem;
         }

         .display-4 {
             font-size: 2rem;
         }

         .btn {
             padding: 0.5rem 1rem;
             font-size: 0.9rem;
         }
     }


     @media (max-width: 380px) {
         .profile-image-container {
             width: 130px;
             height: 130px;
         }

         .display-4 {
             font-size: 1.8rem;
         }

         .btn {
             display: block;
             width: 100%;
             margin-bottom: 0.5rem;
         }

         .btn+.btn {
             margin-left: 0;
         }
     }