:root {
 /* Modo oscuro (default) */
 --primary-blue: #0a192f;
 --secondary-blue: #112240;
 --accent-blue: #64ffda;
 --text-primary: #ccd6f6;
 --text-secondary: #8892b0;
 --grid-color: rgba(100, 255, 218, 0.1);
 --card-bg: rgba(17, 34, 64, 0.8);
 --border-radius: 12px;
 --transition: all 0.3s ease;
 }
 .light-mode {
 /* Modo claro */
 --primary-blue: #f8f9fa;
 --secondary-blue: #e9ecef;
 --accent-blue: #007bff;
 --text-primary: #212529 !important;
 --text-secondary: #6c757d !important;
 --grid-color: rgba(0, 123, 255, 0.1);
 --card-bg: rgba(255, 255, 255, 0.9);
 }
 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 }
 html {
 scroll-behavior: smooth;
 }
 body {
 font-family: 'Inter', sans-serif;
 background-color: var(--primary-blue);
  color: var(--text-primary);
 overflow-x: hidden;
 position: relative;
 line-height: 1.6;
 transition: background-color 0.5s ease, color 0.5s ease;
 }
 /* Preloader - Cambia según el tema */
 .preloader {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: var(--primary-blue);
 display: flex;
 justify-content: center;
 align-items: center;
 z-index: 9999;
 transition: opacity 0.5s ease, visibility 0.5s ease, background-color 0.5s ease;
 }
 .preloader.hidden {
 opacity: 0;
 visibility: hidden;
 }
 .logo-loader {
 font-family: 'Space Grotesk', sans-serif;
 font-weight: 700;
 font-size: 48px;
 color: var(--accent-blue);
 position: relative;
 display: flex;
 align-items: center;
 }
 .logo-loader i {
 margin-right: 15px;
 font-size: 44px;
 }
 .logo-loader::after {
 content: '';
 position: absolute;
 width: 100%;
 height: 4px;
 bottom: -10px;
 left: 0;
 background-color: var(--accent-blue);
 transform: scaleX(0);
 animation: loading 2s ease-in-out infinite;
 }
 @keyframes loading {
 0% { transform: scaleX(0); }
 50% { transform: scaleX(1); }
 100% { transform: scaleX(0); }
 }
 /* Fondo cuadriculado */
 .grid-bg {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-image:
 linear-gradient(var(--grid-color) 1px, transparent 1px),
 linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
 background-size: 50px 50px;
 z-index: -1;
 opacity: 0.3;
 transition: opacity 0.5s ease;
 }
 /* Contenedor principal */
 .container {
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 20px;
 }
 /* Navegación */
 .navbar {
 position: fixed;
 top: 0;
 width: 100%;
 padding: 20px 0;
 background-color: rgba(10, 25, 47, 0.95); /*samillan*/
 /*background-color: #140d22;*/
 backdrop-filter: blur(10px);
 z-index: 1000;
 border-bottom: 1px solid rgba(100, 255, 218, 0.1);
 transition: background-color 0.5s ease, border-color 0.5s ease;
 }
 .light-mode .navbar {
 background-color: rgba(248, 249, 250, 0.95);
 border-bottom: 1px solid rgba(0, 123, 255, 0.1);
 }
 .nav-container {
 display: flex;
 justify-content: space-between;
 align-items: center;
 }
 .logo {
 font-family: 'Space Grotesk', sans-serif;
 font-weight: 700;
 font-size: 24px;
 color: var(--accent-blue);
 text-decoration: none;
 display: flex;
 align-items: center;
 transition: color 0.5s ease;
 }
 .logo i {
 margin-right: 10px;
 font-size: 22px;
 }
 .nav-links {
 display: flex;
 gap: 40px;
 }
 .nav-link {
 color: var(--text-primary) !important;
 text-decoration: none;
 font-weight: 500;
 font-size: 15px;
 transition: var(--transition);
 position: relative;
 }
 .nav-link:hover {
 color: var(--accent-blue) !important;
 }
 .nav-link::after {
 content: '';
 position: absolute;
 width: 0;
 height: 2px;
 bottom: -5px;
 left: 0;
 background-color: var(--accent-blue);
 transition: width 0.3s ease;
 }
 .nav-link:hover::after {
 width: 100%;
 }
 /* Contenedor para botones de navegación */
 .nav-buttons {
 display: flex;
 align-items: center;
 gap: 15px;
 }
 /* Toggle tema */
 .theme-toggle {
 background: transparent;
 border: 1px solid rgba(100, 255, 218, 0.3);
 border-radius: 50%;
 width: 40px;
 height: 40px;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 transition: var(--transition);
 color: var(--text-primary);
 }
 .light-mode .theme-toggle {
 border: 1px solid rgba(0, 123, 255, 0.3);
 }
 .theme-toggle:hover {
 background-color: rgba(100, 255, 218, 0.1);
 border-color: var(--accent-blue);
 color: var(--accent-blue);
 }
 .light-mode .theme-toggle:hover {
 background-color: rgba(0, 123, 255, 0.1);
 }
 /* Menú hamburguesa */
 .menu-toggle {
 display: none;
 flex-direction: column;
 justify-content: space-between;
 width: 30px;
 height: 21px;
 background: transparent;
 border: none;
 cursor: pointer;
 padding: 0;
 z-index: 1001;
 }
 .menu-toggle span {
 width: 100%;
 height: 3px;
 background-color: var(--accent-blue);
 border-radius: 3px;
 transition: var(--transition);
 transform-origin: left center;
 }
 .menu-toggle.active span:nth-child(1) {
 transform: rotate(45deg) translateY(-2px);
 }
 .menu-toggle.active span:nth-child(2) {
 opacity: 0;
 transform: translateX(-20px);
 }
 .menu-toggle.active span:nth-child(3) {
 transform: rotate(-45deg) translateY(2px);
 }
 /* Menú móvil overlay - CON ANIMACIÓN FADE - MÁS MINIMALISTA */
 .mobile-menu-overlay {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(10, 25, 47, 0.98);
 backdrop-filter: blur(15px);
 z-index: 999;
 display: flex;
 justify-content: center;
 align-items: center;
 opacity: 0;
 visibility: hidden;
 transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 }
 .light-mode .mobile-menu-overlay {
 background-color: rgba(248, 249, 250, 0.98);
 }
 .mobile-menu-overlay.active {
 opacity: 1;
 visibility: visible;
 }
 .mobile-menu-content {
 text-align: center;
 padding: 30px; /* Reducido de 40px */
 max-width: 500px;
 width: 90%;
 opacity: 0;
 transform: translateY(20px);
 transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s;
 }
 .mobile-menu-overlay.active .mobile-menu-content {
 opacity: 1;
 transform: translateY(0);
 }
 .mobile-nav-links {
 display: flex;
 flex-direction: column;
 gap: 20px; /* Reducido de 30px */
 margin-bottom: 30px; /* Reducido de 50px */
 }
 .mobile-nav-link {
 color: var(--text-primary) !important;
 text-decoration: none;
 font-size: 26px; /* Reducido de 32px */
 font-weight: 600;
 font-family: 'Space Grotesk', sans-serif;
 transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 padding: 12px; /* Reducido de 15px */
 position: relative;
 opacity: 0;
 transform: translateY(20px);
 transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }
 /* Animación escalonada para los enlaces del menú */
 .mobile-menu-overlay.active .mobile-nav-link:nth-child(1) {
 opacity: 1;
 transform: translateY(0);
 transition-delay: 0.3s;
 }
 .mobile-menu-overlay.active .mobile-nav-link:nth-child(2) {
 opacity: 1;
 transform: translateY(0);
 transition-delay: 0.4s;
 }
 .mobile-menu-overlay.active .mobile-nav-link:nth-child(3) {
 opacity: 1;
 transform: translateY(0);
 transition-delay: 0.5s;
 }
 .mobile-menu-overlay.active .mobile-nav-link:nth-child(4) {
 opacity: 1;
 transform: translateY(0);
 transition-delay: 0.6s;
 }
 .mobile-nav-link:hover {
 color: var(--accent-blue) !important;
 transform: translateY(-5px);
 }
 .mobile-nav-link::after {
 content: '';
 position: absolute;
 width: 0;
 height: 3px;
 bottom: 0;
 left: 50%;
 transform: translateX(-50%);
 background-color: var(--accent-blue);
 transition: width 0.3s ease;
 }
 .mobile-nav-link:hover::after {
 width: 80%;
 }
 .mobile-contact-info {
 border-top: 1px solid rgba(100, 255, 218, 0.1);
 padding-top: 25px; /* Reducido de 30px */
 color: var(--text-secondary) !important;
 opacity: 0;
 transform: translateY(20px);
 transition: all 0.5s ease 0.7s;
 }
 .mobile-menu-overlay.active .mobile-contact-info {
 opacity: 1;
 transform: translateY(0);
 }
 .light-mode .mobile-contact-info {
 border-top: 1px solid rgba(0, 123, 255, 0.1);
 }
 .mobile-contact-info h3 {
 font-family: 'Space Grotesk', sans-serif;
 margin-bottom: 15px;
 font-size: 20px; /* Reducido */
 color: var(--accent-blue);
 }
 /* Barra de navegación inferior para móviles */
 .mobile-bottom-nav {
 position: fixed;
 bottom: 0;
 left: 0;
 width: 100%;
 background-color: var(--secondary-blue);
 border-top: 1px solid rgba(100, 255, 218, 0.1);
 display: none;
 z-index: 1000;
 padding: 10px 0;
 backdrop-filter: blur(10px);
 transition: background-color 0.5s ease, border-color 0.5s ease;
 }
 .light-mode .mobile-bottom-nav {
 border-top: 1px solid rgba(0, 123, 255, 0.1);
 }
 .mobile-nav-items {
 display: flex;
 justify-content: space-around;
 align-items: center;
 }
 .mobile-nav-item {
 display: flex;
 flex-direction: column;
 align-items: center;
 text-decoration: none;
 color: var(--text-secondary) !important;
 transition: var(--transition);
 padding: 8px;
 border-radius: 8px;
 flex: 1;
 max-width: 80px;
 }
 .mobile-nav-item.active,
 .mobile-nav-item:hover {
 color: var(--accent-blue) !important;
 background-color: rgba(100, 255, 218, 0.1);
 }
 .light-mode .mobile-nav-item.active,
 .light-mode .mobile-nav-item:hover {
 background-color: rgba(0, 123, 255, 0.1);
 }
 .mobile-nav-icon {
 font-size: 18px;
 margin-bottom: 4px;
 }
 .mobile-nav-label {
 font-size: 11px;
 font-weight: 500;
 }
 /* Barra de progreso del scroll */
 .scroll-progress {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 3px;
 background: transparent;
 z-index: 1001;
 }
 .scroll-progress-bar {
 height: 100%;
 background: linear-gradient(90deg, var(--accent-blue), var(--accent-blue));
 width: 0%;
 transition: width 0.1s ease;
 opacity: 0.8;
 }
 /* Botón para volver arriba */
 .back-to-top {
 position: fixed;
 bottom: 100px;
 right: 30px;
 width: 50px;
 height: 50px;
 background-color: var(--card-bg);
 border: 1px solid rgba(100, 255, 218, 0.2);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--accent-blue);
 font-size: 20px;
 cursor: pointer;
 transition: var(--transition);
 opacity: 0;
 visibility: hidden;
 z-index: 998;
 backdrop-filter: blur(10px);
 }
 .light-mode .back-to-top {
 border: 1px solid rgba(0, 123, 255, 0.2);
 }
 .back-to-top.visible {
 opacity: 1;
 visibility: visible;
 }
 .back-to-top:hover {
 background-color: rgba(100, 255, 218, 0.1);
 transform: translateY(-5px);
 }
 .light-mode .back-to-top:hover {
 background-color: rgba(0, 123, 255, 0.1);
 }
 /* Hero section */
 .hero {
 min-height: 100vh;
 display: flex;
 align-items: center;
 padding-top: 80px;
 position: relative;
 overflow: hidden;
 }
 .hero-content {
 max-width: 800px;
 position: relative;
 z-index: 2;
 width: 100%;
 }
 .hero-subtitle {
 color: var(--accent-blue);
 font-family: 'Space Grotesk', sans-serif;
 font-size: clamp(16px, 2vw, 18px);
 margin-bottom: 15px;
 display: flex;
 align-items: center;
 opacity: 0;
 transform: translateY(20px);
 animation: fadeInUp 0.8s ease forwards 0.3s;
 }
 .hero-title {
 font-family: 'Space Grotesk', sans-serif;
 font-size: clamp(38px, 7vw, 65px);
 font-weight: 700;
 line-height: 1.1;
 margin-bottom: 15px;
 opacity: 0;
 transform: translateY(20px);
 animation: fadeInUp 0.8s ease forwards 0.5s;
 color: var(--text-primary) !important;
 }
 .hero-title span {
 color: var(--accent-blue);
 }
 .hero-description {
 font-size: clamp(16px, 2vw, 18px);
 color: var(--text-secondary) !important;
 max-width: 600px;
 margin-bottom: 30px;
 opacity: 0;
 transform: translateY(20px);
 animation: fadeInUp 0.8s ease forwards 0.7s;
 }
 .hero-cta {
 display: flex;
 gap: 15px;
 margin-top: 30px;
 opacity: 0;
 transform: translateY(20px);
 animation: fadeInUp 0.8s ease forwards 0.9s;
 flex-wrap: wrap;
 }
 @keyframes fadeInUp {
 to {
 opacity: 1;
 transform: translateY(0);
 }
 }
 .btn {
 padding: 14px 28px;
 border-radius: var(--border-radius);
 font-weight: 600;
 font-size: 15px;
 cursor: pointer;
 transition: var(--transition);
 border: none;
 font-family: 'Inter', sans-serif;
 white-space: nowrap;
 }
 .btn-primary {
 background-color: var(--accent-blue);
 color: #0a192f;
 }
 .light-mode .btn-primary {
 color: white;
 }
 .btn-primary:hover {
 transform: translateY(-3px);
 box-shadow: 0 10px 20px rgba(100, 255, 218, 0.2);
 }
 .light-mode .btn-primary:hover {
 box-shadow: 0 10px 20px rgba(0, 123, 255, 0.2);
 }
 .btn-secondary {
 background-color: transparent;
 color: var(--accent-blue);
 border: 1px solid var(--accent-blue);
 }
 .btn-secondary:hover {
 background-color: rgba(100, 255, 218, 0.1);
 transform: translateY(-3px);
 }
 .light-mode .btn-secondary:hover {
 background-color: rgba(0, 123, 255, 0.1);
 }
 /* Botones de contacto personalizados - NUEVO DISEÑO */
 .contact-btn {
 display: flex;
 align-items: center;
 justify-content: flex-start;
 gap: 15px;
 padding: 16px 20px; /* Más compacto */
 border-radius: var(--border-radius);
 font-weight: 600;
 font-size: 16px;
 cursor: pointer;
 transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
 border: none;
 font-family: 'Inter', sans-serif;
 width: 100%;
 text-decoration: none;
 text-align: left;
 position: relative;
 overflow: hidden;
 }
 .contact-btn i {
 font-size: 20px; /* Más pequeño */
 transition: transform 0.3s ease;
 }
 .contact-btn:hover i {
 transform: scale(1.1);
 }
 .whatsapp-btn {
 background: linear-gradient(135deg, #25D366, #1DA851);
 color: white;
 border: none;
 box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
 }
 .whatsapp-btn:hover {
 transform: translateY(-5px) scale(1.02);
 box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4);
 }
 .email-btn {
 background: linear-gradient(135deg, var(--accent-blue), #1e90ff);
 color: #0a192f !important; /* Fuerza color oscuro para texto */
 border: none;
 box-shadow: 0 4px 15px rgba(100, 255, 218, 0.3);
 }
 .email-btn:hover {
 transform: translateY(-5px) scale(1.02);
 box-shadow: 0 10px 25px rgba(100, 255, 218, 0.4);
 }
 .btn-content {
 display: flex;
 flex-direction: column;
 gap: 4px; /* Más compacto */
 flex: 1;
 }
 .btn-main-text {
 font-size: 17px; /* Un poco más pequeño */
 font-weight: 700;
 font-family: 'Space Grotesk', sans-serif;
 }
 .btn-sub-text {
 font-size: 12px; /* Más pequeño */
 opacity: 0.9;
 font-weight: 400;
 }
 /* ============================================== */
 /* ESPECIFICIDAD MÁXIMA CORREGIDA PARA LOS BOTONES */
 /* ============================================== */
 /* WHATSAPP - SIEMPRE BLANCO EN CUALQUIER MODO */
 html body .whatsapp-btn,
 html body .whatsapp-btn *,
 html body .whatsapp-btn .btn-main-text,
 html body .whatsapp-btn .btn-sub-text,
 html body .whatsapp-btn i,
 body .whatsapp-btn,
 body .whatsapp-btn *,
 body .whatsapp-btn .btn-main-text,
 body .whatsapp-btn .btn-sub-text,
 body .whatsapp-btn i,
 body.dark-mode .whatsapp-btn,
 body.dark-mode .whatsapp-btn *,
 body.dark-mode .whatsapp-btn .btn-main-text,
 body.dark-mode .whatsapp-btn .btn-sub-text,
 body.dark-mode .whatsapp-btn i,
 body.light-mode .whatsapp-btn,
 body.light-mode .whatsapp-btn *,
 body.light-mode .whatsapp-btn .btn-main-text,
 body.light-mode .whatsapp-btn .btn-sub-text,
 body.light-mode .whatsapp-btn i,
 .whatsapp-btn,
 .whatsapp-btn *,
 .whatsapp-btn .btn-main-text,
 .whatsapp-btn .btn-sub-text,
 .whatsapp-btn i {
 color: white !important;
 fill: white !important;
 stroke: white !important;
 -webkit-text-fill-color: white !important;
 text-fill-color: white !important;
 }
 /* EMAIL - COLORES ESPECÍFICOS PARA CADA MODO */
 /* En modo oscuro: texto oscuro */
 body.dark-mode .email-btn,
 body.dark-mode .email-btn *,
 body.dark-mode .email-btn .btn-main-text,
 body.dark-mode .email-btn .btn-sub-text,
 body.dark-mode .email-btn i,
 html body.dark-mode .email-btn,
 html body.dark-mode .email-btn *,
 html body.dark-mode .email-btn .btn-main-text,
 html body.dark-mode .email-btn .btn-sub-text,
 html body.dark-mode .email-btn i {
 color: #0a192f !important;
 fill: #0a192f !important;
 stroke: #0a192f !important;
 -webkit-text-fill-color: #0a192f !important;
 text-fill-color: #0a192f !important;
 }
 /* En modo claro: texto blanco */
 body.light-mode .email-btn,
 body.light-mode .email-btn *,
 body.light-mode .email-btn .btn-main-text,
 body.light-mode .email-btn .btn-sub-text,
 body.light-mode .email-btn i,
 html body.light-mode .email-btn,
 html body.light-mode .email-btn *,
 html body.light-mode .email-btn .btn-main-text,
 html body.light-mode .email-btn .btn-sub-text,
 html body.light-mode .email-btn i {
 color: white !important;
 fill: white !important;
 stroke: white !important;
 -webkit-text-fill-color: white !important;
 text-fill-color: white !important;
 }
 /* Botón de WhatsApp en el hero (es un btn-primary, no un contact-btn) */
 body .hero-cta .btn-primary,
 body .hero-cta .btn-primary i {
 color: #0a192f !important;
 }
 body.light-mode .hero-cta .btn-primary,
 body.light-mode .hero-cta .btn-primary i {
 color: white !important;
 }
 /* Botones en menú móvil - especificidad extra */
 html body .mobile-menu-overlay .whatsapp-btn,
 html body .mobile-menu-overlay .whatsapp-btn *,
 html body .mobile-menu-overlay .email-btn,
 html body .mobile-menu-overlay .email-btn *,
 body .mobile-menu-overlay .whatsapp-btn,
 body .mobile-menu-overlay .whatsapp-btn *,
 body .mobile-menu-overlay .email-btn,
 body .mobile-menu-overlay .email-btn * {
 color: inherit !important;
 }
 /* Tecnologías slider INFINITO */
 .tech-container {
 margin-top: 60px;
 position: relative;
 z-index: 2;
 overflow: hidden;
 width: 100%;
 }
 .tech-slider-wrapper {
 position: relative;
 overflow: hidden;
 width: 100%;
 }
 .tech-slider {
 display: flex;
 width: max-content;
 }
 .tech-slider:hover {
 animation-play-state: paused;
 }
 .tech-item {
 background-color: var(--card-bg);
 padding: 16px 24px;
 border-radius: var(--border-radius);
 margin-right: 20px;
 display: flex;
 align-items: center;
 min-width: 160px;
 border: 1px solid rgba(100, 255, 218, 0.1);
 transition: var(--transition);
 flex-shrink: 0;
 }
 .light-mode .tech-item {
 border: 1px solid rgba(0, 123, 255, 0.1);
 }
 .tech-item:hover {
 transform: translateY(-5px);
 border-color: var(--accent-blue);
 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }
 .tech-icon {
 font-size: 26px;
 margin-right: 12px;
 }
 /* Colores oficiales de tecnologías */
 .netcore-color { color: #4479A1; }
 .java-color { color: #f89820; }
 .postgres-color { color: #0064a5; }
 .angular-color { color: #E34F26; }
 .python-color { color: #4B8BBE; }
 .react-color { color: #333 }
 .vue-color { color: #34495E }
 .html-color { color: #E34F26; }
 .laravel-color { color: #E34F26; }
 .css-color { color: #1572B6; }
 .js-color { color: #F7DF1E; }
 .node-color { color: #F7DF1E; }
 .wordpress-color { color: #21759B; }
 .shopify-color { color: #7AB55C; }
 .react-color { color: #61DAFB; }
 .figma-color { color: #F24E1E; }
 .vue-color { color: #4FC08D; }
 .sass-color { color: #CC6699; }
 .github-color { color: #333; }
 .php-color { color: #777BB4; }
 .mysql-color { color: #4479A1; }
 /* GitHub cambia según el tema */
 .dark-mode .github-color { color: #ffffff !important; }
 .light-mode .github-color { color: #333 !important; }
 .tech-name {
 font-weight: 600;
 font-size: 16px;
 color: var(--text-primary) !important;
 }
 @keyframes slideInfinite {
 0% {
 transform: translateX(0);
 }
 100% {
 transform: translateX(-50%);
 }
 }
 /* Secciones generales con animaciones de scroll */
 .section {
 padding: 100px 0;
 position: relative;
 }
 .section-title {
 font-family: 'Space Grotesk', sans-serif;
 font-size: clamp(32px, 4vw, 40px);
 font-weight: 700;
 margin-bottom: 50px;
 position: relative;
 display: inline-block;
 opacity: 0;
 transform: translateY(30px);
 transition: opacity 0.8s ease, transform 0.8s ease;
 color: var(--text-primary) !important;
 }
 .section-title.in-view {
 opacity: 1;
 transform: translateY(0);
 }
 .section-title::after {
 content: '';
 position: absolute;
 width: 100%;
 height: 4px;
 bottom: -10px;
 left: 0;
 background-color: var(--accent-blue);
 }
 /* Sobre mí */
 .about-content {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 60px;
 align-items: center;
 }
 .about-text {
 font-size: clamp(16px, 1.8vw, 18px);
 color: var(--text-secondary) !important;
 margin-bottom: 25px;
 opacity: 0;
 transform: translateY(30px);
 transition: opacity 0.8s ease, transform 0.8s ease;
 }
 .about-text.in-view {
 opacity: 1;
 transform: translateY(0);
 }
 .about-stats {
 display: flex;
 gap: 30px;
 margin-top: 40px;
 flex-wrap: wrap;
 opacity: 0;
 transform: translateY(30px);
 transition: opacity 0.8s ease, transform 0.8s ease;
 }
 .about-stats.in-view {
 opacity: 1;
 transform: translateY(0);
 }
 .stat-item {
 text-align: center;
 flex: 1;
 min-width: 120px;
 }
 .stat-number {
 font-family: 'Space Grotesk', sans-serif;
 font-size: clamp(32px, 3vw, 40px);
 font-weight: 700;
 color: var(--accent-blue);
 }
 .stat-label {
 font-size: 14px;
 color: var(--text-secondary) !important;
 margin-top: 5px;
 }
 .about-image {
 position: relative;
 border-radius: var(--border-radius);
 overflow: hidden;
 height: 400px;
 background: linear-gradient(135deg, var(--secondary-blue), var(--primary-blue));
 display: flex;
 align-items: center;
 justify-content: center;
 border: 2px solid var(--accent-blue);
 opacity: 0;
 transform: translateY(30px);
 transition: opacity 0.8s ease, transform 0.8s ease;
 }
 .about-image.in-view {
 opacity: 1;
 transform: translateY(0);
 }
 /* Centrar imagen en "Sobre mí" */
 .about-image img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center;
 }
 .about-image i {
 display: none; /* Ocultar el icono si hay imagen */
 }
 /* Proyectos - Slider en cards */
 .projects-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
 gap: 30px;
 margin-top: 40px;
 }
 .project-card {
 background-color: var(--card-bg);
 border-radius: var(--border-radius);
 overflow: hidden;
 transition: var(--transition);
 border: 1px solid rgba(100, 255, 218, 0.1);
 height: 100%;
 display: flex;
 flex-direction: column;
 opacity: 0;
 transform: translateY(30px);
 transition: opacity 0.8s ease, transform 0.8s ease, border-color 0.3s ease, box-shadow 0.3s ease;
 }
 .light-mode .project-card {
 border: 1px solid rgba(0, 123, 255, 0.1);
 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
 }
 .project-card.in-view {
 opacity: 1;
 transform: translateY(0);
 }
 .project-card:hover {
 transform: translateY(-10px);
 border-color: var(--accent-blue);
 box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
 }
 .light-mode .project-card:hover {
 box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
 }
 /* Slider de imágenes del proyecto - MEJOR CALIDAD */
 .project-slider {
 position: relative;
 height: 220px;
 overflow: hidden;
 }
 .project-slides {
 display: flex;
 transition: transform 0.5s ease;
 height: 100%;
 }
 .project-slide {
 min-width: 100%;
 height: 100%;
 position: relative;
 }
 .project-slide img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center;
 /* Mejorar calidad de imagen */
 image-rendering: -webkit-optimize-contrast;
 image-rendering: crisp-edges;
 -ms-interpolation-mode: bicubic;
 }
 /* Ajustar calidad específica para imágenes de proyectos */
 .project-slide img[src*="portafoliojoelox.site"] {
 image-rendering: auto;
 -webkit-font-smoothing: antialiased;
 }
 .project-slide-placeholder {
 width: 100%;
 height: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
 background: linear-gradient(135deg, var(--secondary-blue), var(--primary-blue));
 color: var(--accent-blue);
 font-size: 60px;
 }
 /* Controles del slider - AHORA SIEMPRE VISIBLES */
 .slider-controls {
 position: absolute;
 top: 50%;
 width: 100%;
 display: flex;
 justify-content: space-between;
 padding: 0 15px;
 transform: translateY(-50%);
 opacity: 1; /* Cambiado de 0 a 1 para que sean siempre visibles */
 transition: opacity 0.3s ease;
 z-index: 2;
 }
 .slider-btn {
 background-color: rgba(10, 25, 47, 0.7);
 border: none;
 width: 36px;
 height: 36px;
 border-radius: 50%;
 color: white;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 transition: var(--transition);
 backdrop-filter: blur(5px);
 }
 .light-mode .slider-btn {
 background-color: rgba(248, 249, 250, 0.7);
 color: #212529;
 }
 .slider-btn:hover {
 background-color: var(--accent-blue);
 color: #0a192f;
 transform: scale(1.1);
 }
 .light-mode .slider-btn:hover {
 color: white;
 }
 /* Indicadores del slider */
 .slider-indicators {
 position: absolute;
 bottom: 15px;
 left: 0;
 width: 100%;
 display: flex;
 justify-content: center;
 gap: 8px;
 z-index: 2;
 }
 .slider-indicator {
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background-color: rgba(255, 255, 255, 0.5);
 cursor: pointer;
 transition: var(--transition);
 }
 .slider-indicator.active {
 background-color: var(--accent-blue);
 transform: scale(1.2);
 }
 .slider-counter {
 position: absolute;
 bottom: 15px;
 right: 15px;
 background-color: rgba(10, 25, 47, 0.7);
 color: white;
 padding: 3px 10px;
 border-radius: 20px;
 font-size: 12px;
 backdrop-filter: blur(5px);
 z-index: 2;
 }
 .light-mode .slider-counter {
 background-color: rgba(248, 249, 250, 0.7);
 color: #212529;
 }
 .project-content {
 padding: 30px;
 flex-grow: 1;
 display: flex;
 flex-direction: column;
 }
 .project-title {
 font-family: 'Space Grotesk', sans-serif;
 font-size: 22px;
 font-weight: 600;
 margin-bottom: 15px;
 color: var(--text-primary) !important;
 }
 .project-description {
 color: var(--text-secondary) !important;
 margin-bottom: 20px;
 font-size: 15px;
 flex-grow: 1;
 }
 .project-tech {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 margin-bottom: 25px;
 }
 .tech-tag {
 background-color: rgba(100, 255, 218, 0.1);
 color: var(--accent-blue);
 padding: 5px 12px;
 border-radius: 20px;
 font-size: 13px;
 font-weight: 500;
 }
 .light-mode .tech-tag {
 background-color: rgba(0, 123, 255, 0.1);
 }
 .project-links {
 display: flex;
 gap: 15px;
 }
 .project-link {
 color: var(--text-primary) !important;
 text-decoration: none;
 font-size: 14px;
 font-weight: 500;
 display: flex;
 align-items: center;
 transition: var(--transition);
 }
 .project-link:hover {
 color: var(--accent-blue) !important;
 }
 .project-link i {
 margin-right: 8px;
 }
 /* ========================= */
 /* SECCIÓN DE CONTACTO - NUEVA ESTRUCTURA */
 /* ========================= */
 .contact-intro {
 font-size: clamp(16px, 1.8vw, 18px);
 color: var(--text-secondary) !important;
 margin-bottom: 10px;
 max-width: 600px;
 opacity: 0;
 transform: translateY(30px);
 transition: opacity 0.8s ease, transform 0.8s ease;
 }
 .contact-intro.in-view {
 opacity: 1;
 transform: translateY(0);
 }
 .contact-container {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 40px;
 align-items: start;
 }
 .contact-info {
 display: flex;
 flex-direction: column;
 }
 .contact-header {
 margin-bottom: 15px;
 }
 .contact-title {
 font-size: clamp(20px, 2.2vw, 24px);
 color: var(--text-primary) !important;
 font-weight: 600;
 line-height: 1.4;
 margin-bottom: 5px;
 }
 .contact-description {
 font-size: clamp(16px, 1.8vw, 18px);
 color: var(--text-secondary) !important;
 line-height: 1.5;
 }
 /* Botones de contacto - ESTRUCTURA SIMPLIFICADA */
 .contact-actions {
 margin: 15px 0;
 }
 .contact-buttons-grid {
 display: flex;
 flex-direction: column;
 gap: 12px;
 }
 /* Info de contacto compacta */
 .contact-details {
 margin-top: 5px;
 }
 .contact-detail-item {
 display: flex;
 align-items: center;
 gap: 12px;
 margin-bottom: 8px;
 padding: 8px 0;
 }
 .contact-detail-icon {
 width: 42px;
 height: 42px;
 background-color: rgba(100, 255, 218, 0.1);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--accent-blue);
 font-size: 18px;
 flex-shrink: 0;
 }
 .light-mode .contact-detail-icon {
 background-color: rgba(0, 123, 255, 0.1);
 }
 .contact-detail-text h4 {
 font-family: 'Space Grotesk', sans-serif;
 font-size: 16px;
 margin-bottom: 3px;
 color: var(--text-primary) !important;
 }
 .contact-detail-text p {
 color: var(--text-secondary) !important;
 font-size: 14px;
 line-height: 1.4;
 }
 /* Formulario */
 .contact-form-container {
 background-color: var(--card-bg);
 padding: 35px;
 border-radius: var(--border-radius);
 border: 1px solid rgba(100, 255, 218, 0.1);
 opacity: 0;
 transform: translateY(30px);
 transition: opacity 0.8s ease, transform 0.8s ease;
 min-height: 400px;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 }
 .light-mode .contact-form-container {
 border: 1px solid rgba(0, 123, 255, 0.1);
 }
 .contact-form-container.in-view {
 opacity: 1;
 transform: translateY(0);
 }
 .form-placeholder {
 text-align: center;
 color: var(--text-secondary) !important;
 font-size: 16px;
 }
 .form-placeholder i {
 font-size: 50px;
 color: var(--accent-blue);
 margin-bottom: 15px;
 opacity: 0.7;
 }
 /* Footer */
 .footer {
 background-color: var(--secondary-blue);
 padding: 60px 0 30px;
 border-top: 1px solid rgba(100, 255, 218, 0.1);
 transition: background-color 0.5s ease, border-color 0.5s ease;
 }
 .light-mode .footer {
 border-top: 1px solid rgba(0, 123, 255, 0.1);
 }
 .footer-content {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 40px;
 }
 .footer-links {
 display: flex;
 gap: 30px;
 }
 .footer-link {
 color: var(--text-secondary) !important;
 text-decoration: none;
 font-size: 14px;
 transition: var(--transition);
 }
 .footer-link:hover {
 color: var(--accent-blue) !important;
 }
 .social-links {
 display: flex;
 gap: 20px;
 }
 .social-link {
 width: 40px;
 height: 40px;
 background-color: rgba(255, 255, 255, 0.05);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--text-primary) !important;
 text-decoration: none;
 transition: var(--transition);
 }
 .light-mode .social-link {
 background-color: rgba(0, 0, 0, 0.05);
 }
 .social-link:hover {
 background-color: var(--accent-blue);
 color: white !important;
 transform: translateY(-3px);
 }
 .copyright {
 text-align: center;
 color: var(--text-secondary) !important;
 font-size: 14px;
 padding-top: 30px;
 border-top: 1px solid rgba(255, 255, 255, 0.05);
 }
 .light-mode .copyright {
 border-top: 1px solid rgba(0, 0, 0, 0.05);
 }
 /* Responsive */
 @media (max-width: 1200px) {
 .container {
 max-width: 100%;
 padding: 0 30px;
 }
 }
 @media (max-width: 992px) {
 .about-content, .contact-container {
 grid-template-columns: 1fr;
 }
 .about-image {
 height: 350px;
 order: -1;
 }
 .about-image i {
 font-size: 120px;
 }
 .contact-container {
 gap: 30px;
 }
 .contact-actions {
 margin: 12px 0;
 }
 .contact-buttons-grid {
 gap: 10px;
 }
 .contact-form-container {
 order: 2;
 margin-top: 0;
 }
 }
 @media (max-width:690px) {
 .nav-links {
 display: none;
 }
 .menu-toggle {
 display: flex;
 order: 1;
 }
 .mobile-bottom-nav {
 display: block;
 }
 .back-to-top {
 bottom: 80px;
 right: 20px;
 width: 45px;
 height: 45px;
 }
 .hero {
 padding-top: 100px;
 padding-bottom: 100px;
 min-height: auto;
 }
 .hero-cta {
 flex-direction: row;
 justify-content: flex-start;
 }
 .btn, .contact-btn {
 padding: 12px 24px;
 font-size: 14px;
 }
 .projects-grid {
 grid-template-columns: 1fr;
 gap: 25px;
 }
 .footer-content {
 flex-direction: column;
 gap: 30px;
 }
 .footer-links {
 flex-direction: column;
 gap: 15px;
 text-align: center;
 }
 .tech-item {
 min-width: 140px;
 }
 .mobile-nav-link {
 font-size: 24px;
 }
 .contact-container {
 gap: 25px;
 }
 .contact-info {
 text-align: center;
 align-items: center;
 }
 .contact-detail-item {
 flex-direction: column;
 text-align: center;
 gap: 8px;
 }
 .contact-btn {
 justify-content: center;
 text-align: center;
 padding: 14px 18px;
 }
 .btn-content {
 align-items: center;
 text-align: center;
 }
 .contact-form-container {
 padding: 25px 20px;
 }
 .contact-buttons-grid {
 gap: 8px;
 }
 }
 @media (max-width: 576px) {
 .container {
 padding: 0 20px;
 }
 .hero-title {
 font-size: 36px;
 }
 .hero-description {
 font-size: 16px;
 }
 .hero-cta {
 flex-direction: column;
 align-items: flex-start;
 }
 .btn, .contact-btn {
 width: 100%;
 justify-content: center;
 display: flex;
 align-items: center;
 }
 .section {
 padding: 70px 0;
 }
 .section-title {
 font-size: 28px;
 margin-bottom: 40px;
 }
 .about-stats {
 flex-direction: column;
 gap: 25px;
 }
 .stat-item {
 min-width: 100%;
 }
 .contact-form-container {
 padding: 20px 15px;
 }
 .tech-item {
 min-width: 130px;
 padding: 12px 18px;
 }
 .mobile-nav-item {
 padding: 6px;
 }
 .mobile-nav-icon {
 font-size: 16px;
 }
 .mobile-nav-label {
 font-size: 10px;
 }
 .mobile-nav-link {
 font-size: 22px;
 padding: 10px;
 }
 .mobile-contact-info h3 {
 font-size: 18px;
 }
 .contact-buttons-grid {
 gap: 6px;
 }
 .contact-title {
 margin-bottom: 3px;
 }
 .contact-description {
 margin-bottom: 0;
 }
 }
 /* Ajustes específicos para pantallas muy pequeñas */
 @media (max-width: 400px) {
 .contact-btn {
 padding: 12px 16px;
 }
 .btn-main-text {
 font-size: 16px;
 }
 .btn-sub-text {
 font-size: 11px;
 }
 .contact-form-container {
 padding: 15px 12px;
 }
 }