/* ========================================================================= ** ** PROYECTO: Portafolio de Vanessa Larrosa Vilar ** ARCHIVO: styles.css ** ** Estilos CSS para todo el sitio web ** ** ========================================================================= */ /* =========== ** Importación de Fuentes y Variables ============== */ /* Importa la fuente principal "Space Grotesk" de Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); /* Define variables personalizadas (custom properties) para la paleta de colores y transiciones */ :root { /* Variables personalizadas para los colores del tema */ --color-primary: #BB7EFB; /* Color principal violeta */ --color-secondary: #E8D9FB; /* Color secundario lavanda claro */ --color-background: #000; /* Fondo principal negro */ --color-text-light: #fff; /* Texto blanco */ --color-text-faded: rgba(255, 255, 255, .8); /* Texto atenuado */ --color-text-subtle: rgba(255, 255, 255, .6); /* Texto muy sutil */ --color-card-background: rgba(40, 40, 40, .9); /* Fondo de tarjetas */ --color-card-border: rgba(80, 80, 80, .5); /* Borde de tarjetas */ --color-card-text: rgba(255, 255, 255, .9); /* Texto de tarjetas */ --backdrop-blur-base: 20px; /* Blur por defecto para header/footer */ --backdrop-blur-scrolled: 25px; /* Blur aumentado cuando se hace scroll */ --transition-speed: 0.3s; /* Velocidad estándar para transiciones */ --cubic-bezier: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Curva de transición personalizada */ } /* =========== ** Reset y Estilos Base ============== */ /* Aplica un reset básico: elimina padding y margen de todos los elementos y usa `box-sizing: border-box` para un modelo de caja predecible */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Estilo base del */ body { font-family: "Space Grotesk", sans-serif; /* Aplica la fuente principal a todo el body */ background-color: var(--color-background); /* Usa el color de fondo definido en las variables */ color: var(--color-text-light); /* Usa el color de texto claro definido en las variables */ line-height: 1.6; /* Establece una altura de línea cómoda para la lectura */ overflow-x: hidden; /* Evita el scroll horizontal */ } /* =========== ** HEADER y NAVEGACIÓN ============== */ /* Estilos para el header fijo (barra superior) */ header { background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente para permitir ver el contenido debajo */ backdrop-filter: blur(var(--backdrop-blur-base)); /* Aplica un efecto de desenfoque al fondo */ -webkit-backdrop-filter: blur(var(--backdrop-blur-base)); /* Compatibilidad con navegadores WebKit (Safari, etc.) */ padding: 15px 20px; /* Relleno interno */ position: fixed; /* Fija el header en la parte superior */ width: 100%; /* Ocupa todo el ancho */ top: 0; /* Lo ancla a la parte superior */ z-index: 1000; /* Lo coloca por encima de la mayoría de los demás elementos */ border-bottom: 1px solid transparent; /* Borde inferior transparente por defecto */ transition: all var(--transition-speed) ease; /* Transición suave para todos los cambios de estilo */ } /* Estilos adicionales para el header cuando el usuario hace scroll */ header.scrolled { -webkit-backdrop-filter: blur(var(--backdrop-blur-scrolled)); /* Compatibilidad */ backdrop-filter: blur(var(--backdrop-blur-scrolled)); /* Estándar */ border-bottom: 1px solid rgba(187, 126, 251, 0.4); /* Añade un borde inferior sutil con el color primario */ } /* Contenedor principal para el header, usado para centrar y distribuir elementos */ .container { display: flex; /* Usa Flexbox para alinear el logo y los controles de navegación */ justify-content: space-between; /* Distribuye el espacio entre los elementos */ align-items: center; /* Centra los elementos verticalmente */ max-width: 100%; } /* Estilos para el contenedor del logo (imagen + texto) */ .logo { display: flex; /* Usa Flexbox para alinear la imagen y el texto del logo */ align-items: center; /* Centra los elementos verticalmente */ gap: 12px; /* Espacio entre la imagen y el texto */ } /* Estilos para la imagen del logo */ .logo-img { width: 45px; height: 45px; background: var(--color-text-light); /* Fondo blanco */ border-radius: 8px; /* Bordes redondeados */ display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; color: #000; /* Texto en negro para contraste */ } /* Estilos para el texto del logo */ .logo-text { font-size: 18px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; } /* Contenedor para los controles de navegación (selector de idioma y menú) */ .nav-controls { display: flex; align-items: center; gap: 30px; } /* ========== ** Selector de idioma ============ */ .language-selector { display: flex; align-items: center; gap: 8px; font-family: "Space Grotesk", sans-serif; } /* Estilos para los botones de idioma */ .lang-btn { background: none; border: none; color: var(--color-text-light); font-size: 14px; font-weight: 400; font-family: "Space Grotesk", sans-serif; cursor: pointer; /* Cambia el cursor a una mano al pasar por encima */ transition: all var(--transition-speed) ease; padding: 4px 2px; } /* Estilo para el botón de idioma activo */ .lang-btn.active { color: var(--color-primary); /* El color primario indica que está seleccionado */ font-weight: 700; } /* Efecto hover para los botones de idioma no activos */ .lang-btn:hover:not(.active) { color: var(--color-text-faded); /* Atenúa el color al pasar el cursor */ } /* Separador vertical entre los botones de idioma */ .lang-separator { color: var(--color-text-subtle); font-size: 14px; font-weight: 300; margin: 0 4px; } /* ===================== ** Menú Hamburguesa (para móviles) ====================== */ /* Contenedor del menú hamburguesa */ .hamburger { display: flex; /* Usa Flexbox para apilar las barras */ flex-direction: column; background: none; /* Quita el fondo del botón */ border: none; /* Quita el borde */ cursor: pointer; padding: 5px; gap: 4px; /* Espacio entre las barras */ z-index: 1001; /* Se asegura de que esté por encima del header */ } /* Estilos para cada una de las "barras" del icono hamburguesa */ .hamburger .bar { width: 22px; height: 2px; background-color: var(--color-text-light); /* Color blanco */ transition: all var(--transition-speed) ease; /* Transición para la animación de la cruz */ transform-origin: center; } /* Animación de la barra superior cuando el menú está activo (se convierte en la parte superior de la cruz) */ .hamburger.active .bar:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); } /* Animación de la barra del medio (se desvanece) */ .hamburger.active .bar:nth-child(2) { opacity: 0; } /* Animación de la barra inferior (se convierte en la parte inferior de la cruz) */ .hamburger.active .bar:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* ==================== ** NAVEGACIÓN Desktop y Mobile ==================== */ /* Menú de escritorio: oculto por defecto (mobile-first) */ .nav-menu.desktop-menu { display: none; list-style: none; padding: 0; margin: 0; } /* Menú móvil: se oculta por defecto fuera de la pantalla */ .mobile-menu { position: fixed; top: 0; right: -100%; /* Lo mueve completamente a la derecha, fuera de la vista */ width: 280px; height: 100vh; background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-left: 1px solid rgba(187, 126, 251, 0.3); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-left: 40px; transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Animación de entrada suave */ z-index: 999; } /* Muestra el menú móvil cuando tiene la clase 'active' */ .mobile-menu.active { right: 0; /* Lo mueve de nuevo a la posición visible */ } /* Estilos comunes para los enlaces de ambos menús */ .desktop-menu a, .mobile-menu a { color: var(--color-text-light); text-decoration: none; font-weight: 500; padding: 8px 0; position: relative; display: block; transition: all var(--transition-speed) ease; font-family: "Space Grotesk", sans-serif; } /* Elimina los puntos de la lista del menú móvil */ .mobile-menu ul { list-style: none; padding: 0; margin: 0; } /* Enlaces del menú móvil con un tamaño de fuente más grande */ .mobile-menu a { font-size: 24px; } /* Efectos de hover y active para los enlaces de ambos menús */ .desktop-menu a:hover, .mobile-menu a:hover, .desktop-menu a.active, .mobile-menu a.active { background-image: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); /* Crea un gradiente de texto */ -webkit-background-clip: text; /* Recorta el fondo al contorno del texto (compatibilidad) */ background-clip: text; /* Recorta el fondo al contorno del texto */ -webkit-text-fill-color: transparent; /* Hace el color del texto transparente para que se vea el gradiente */ transform: translateX(5px); /* Desplaza ligeramente el texto */ } /* Línea animada que aparece debajo de los enlaces */ .desktop-menu a::after, .mobile-menu a::after { content: ''; position: absolute; width: 0; /* Por defecto, la línea tiene un ancho de 0 */ height: 2px; bottom: 0; left: 0; background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); /* La línea es un gradiente */ transition: width var(--transition-speed) ease; /* Anima el ancho */ } /* La línea se expande al 100% al pasar el cursor o cuando el enlace está activo */ .desktop-menu a:hover::after, .desktop-menu a.active::after, .mobile-menu a:hover::after, .mobile-menu a.active::after { width: 100%; } /* Animación de entrada para los elementos de la lista del menú móvil */ .mobile-menu.active li { margin: 20px 0; opacity: 0; transform: translateX(30px); /* Se desplazan hacia la derecha y están invisibles */ transition: all var(--transition-speed) ease; } /* Se añaden retrasos escalonados para que los enlaces aparezcan uno por uno */ .mobile-menu.active li:nth-child(1) { transition-delay: 0.1s; } .mobile-menu.active li:nth-child(2) { transition-delay: 0.2s; } .mobile-menu.active li:nth-child(3) { transition-delay: 0.3s; } /* Cuando el menú está activo, los elementos se vuelven visibles y vuelven a su posición */ .mobile-menu.active li { opacity: 1; transform: translateX(0); } /* =========== ** Footer ============= */ .footer { background-color: rgba(0, 0, 0, 0.9); backdrop-filter: blur(var(--backdrop-blur-base)); -webkit-backdrop-filter: blur(var(--backdrop-blur-base)); padding: 15px 20px; display: flex; justify-content: center; align-items: center; text-align: center; border-top: 1px solid transparent; transition: all var(--transition-speed) ease; width: 100%; } /* Contenedor del logo en el footer */ .footer-logo { display: flex; flex-direction: column; align-items: center; gap: 5px; } /* Imagen del logo en el footer (más pequeña) */ .footer .logo-img { width: 25px; height: 25px; background: var(--color-text-light); border-radius: 8px; } /* Texto del logo en el footer (más pequeño y atenuado) */ .footer .logo-text { font-size: 12px; font-weight: 400; line-height: 1.1; color: var(--color-text-light); letter-spacing: 0.3px; white-space: nowrap; opacity: 0.7; } /* =========== ** Hero (primera sección principal) ============= */ .hero { min-height: 100vh; /* Ocupa toda la altura de la ventana */ display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 20px; position: relative; overflow: hidden; } .circuit-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; } .circuit-line { position: absolute; height: 2px; background: linear-gradient(90deg, transparent 0%, #06b6d4 20%, #8b5cf6 80%, transparent 100%); opacity: 0.6; transition: all 0.5s ease; } .circuit-line::before, .circuit-line::after { content: ''; position: absolute; border-radius: 50%; animation: pulse 2s ease-in-out infinite; } .circuit-line::before { width: 8px; height: 8px; background: #06b6d4; left: 20%; top: -3px; box-shadow: 0 0 15px #06b6d4, 0 0 30px #06b6d4; } .circuit-line::after { width: 6px; height: 6px; background: #8b5cf6; right: 20%; top: -2px; box-shadow: 0 0 12px #8b5cf6, 0 0 25px #8b5cf6; animation-delay: 1s; } .circuit-vertical { width: 2px; background: linear-gradient(180deg, transparent 0%, #9333ea 20%, #ec4899 80%, transparent 100%); } .circuit-vertical::before { background: #9333ea; box-shadow: 0 0 15px #9333ea, 0 0 30px #9333ea; } .circuit-vertical::after { background: #ec4899; box-shadow: 0 0 12px #ec4899, 0 0 25px #ec4899; } /* ================================== Estilos de Contenido del Hero (modificados) ================================== */ /* Título principal con animación de gradiente */ .main-title { /* CAMBIO PRINCIPAL: Clamp más conservador para evitar desbordamiento */ font-size: clamp(2.5rem, 6vw, 8rem); /* Antes era: clamp(3rem, 8vw, 8rem) */ font-weight: 900; /* MEJORA: Line-height más espaciado para mejor legibilidad */ line-height: 1.1; /* Antes era: 1em */ margin-bottom: 2rem; z-index: 10; position: relative; transition: all 0.3s ease; /* NUEVAS PROPIEDADES ANTI-DESBORDAMIENTO: */ /* Permite partir palabras largas automáticamente */ word-wrap: break-word; overflow-wrap: break-word; /* Añade guiones automáticos al partir palabras */ hyphens: auto; /* CENTRADO PERFECTO: */ text-align: center; width: 100%; /* LIMITADOR DE ANCHO: Nunca ocupará más del 90% de la pantalla */ max-width: 90vw; margin-left: auto; margin-right: auto; } .gradient-text { background: linear-gradient(45deg, #9333ea, #ec4899, #06b6d4); background-size: 300% 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: gradientShift 4s ease infinite; } /* Subtítulo del hero */ .subtitle { font-size: clamp(1rem, 2vw, 1.5rem); max-width: 600px; line-height: 1.6; opacity: 0.8; z-index: 10; position: relative; transition: all 0.3s ease; } /* Indicador de scroll (flecha animada) */ .scroll-indicator { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; cursor: pointer; transition: all var(--transition-speed) ease; z-index: 10; animation: bounce 2s infinite; } /* Texto del indicador de scroll */ .scroll-text { font-size: 12px; font-weight: 400; color: var(--color-text-subtle); letter-spacing: 1px; text-transform: uppercase; text-align: center; white-space: nowrap; } /* Flecha del indicador de scroll */ .scroll-arrow { font-family: 'Material Symbols Outlined'; font-size: 20px; color: var(--color-text-subtle); transform: rotate(90deg); transition: all var(--transition-speed) ease; } /* Efecto hover en el indicador de scroll */ .scroll-indicator:hover .scroll-arrow { color: var(--color-primary); transform: rotate(90deg) translateY(4px); } /* =========== ** Sobre mí, Proyectos y Contacto ============= */ /* Reduce el padding para acortar la distancia entre las secciones */ .about, .projects, .contact { min-height: auto; padding: 60px 20px 40px; /* Padding reducido */ display: flex; justify-content: center; align-items: center; position: relative; scroll-margin-top: 80px; /* Margen para que el header fijo no cubra el título al navegar */ } /* Contenedores interiores de las secciones */ .about-container, .projects-container, .contact-container { max-width: 1200px; width: 100%; margin: 0 auto; padding: 2rem 1rem; box-sizing: border-box; } /* Sección principal "about" */ .about { background-color: var(--color-background); } /* Caja principal del about */ .about-container { text-align: left; cursor: pointer; transition: all 0.4s var(--cubic-bezier); border-radius: 15px; position: relative; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 2px solid transparent; background-clip: padding-box; } /* Breve efecto al pulsar (shrink) */ .about-container:active { transform: scale(0.98); transition: transform 0.1s ease; } /* Título de la sección "Sobre mí" */ .about-title { font-size: clamp(2rem, 6vw, 3rem); font-weight: 700; letter-spacing: 1px; text-align: left; margin-bottom: 1.5rem; background-image: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Contenedor del contenido de texto de la sección "Sobre mí" */ .about-content { display: flex; flex-direction: column; gap: 1rem; text-align: left; } /* Párrafos del "Sobre mí" */ .about-text { font-size: clamp(1rem, 2.5vw, 1.1rem); font-weight: 300; line-height: 1.7; color: rgba(255, 255, 255, 0.85); margin: 0; } /* ** BOTÓN/MENSAJE DE DESCARGA DE CV */ .about-download-button { /* Posicionamiento absoluto para colocar el botón en la esquina */ position: absolute; /* Se mantiene en la esquina inferior derecha */ bottom: 1rem; /* Ajusta este valor para mover el botón más arriba, por ejemplo, a 1.5rem */ right: 1.5rem; /* Ajusta este valor para mover el botón más a la izquierda, por ejemplo, a 1.5rem */ /* Estilos del botón */ background: transparent; border: none; cursor: pointer; font-family: "Space Grotesk", sans-serif; font-size: 14px; font-weight: 500; color: var(--color-primary); /* Ahora es visible por defecto y no tiene animación de entrada */ opacity: 1; transform: translateY(0); transition: all var(--transition-speed) ease-in-out; padding: 8px 12px; border-radius: 8px; user-select: none; /* Para evitar la selección del texto al tocar */ } /* Muestra el botón cuando el contenedor padre tiene la clase :hover o .is-active */ .about-container:hover .about-download-button, .about-container.is-active .about-download-button { opacity: 1; transform: translateY(0); box-shadow: 0 0 10px rgba(187, 126, 251, 0.3); } /* Efecto hover sobre el botón */ .about-download-button:hover { background: rgba(187, 126, 251, 0.1); color: var(--color-secondary); border-color: var(--color-secondary); } /* Efecto de resplandor al pasar el cursor o al estar activo en el contenedor */ .about-container:hover, .about-container.is-active { transform: scale(1.02); border: 2px solid var(--color-primary); box-shadow: 0 0 20px rgba(187, 126, 251, 0.4), 0 0 40px rgba(187, 126, 251, 0.2), 0 0 60px rgba(187, 126, 251, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); animation: ledPulse 2s ease-in-out infinite; } /* Título y texto resplandecientes con animación al pasar el cursor */ .about-container:hover .about-title, .about-container.is-active .about-title { background-image: linear-gradient(90deg, var(--color-primary), var(--color-secondary), var(--color-primary)); background-size: 200% 200%; animation: shimmer 2s ease-in-out infinite; } .about-container:hover .about-text, .about-container.is-active .about-text { color: rgba(255, 255, 255, 0.95); } /* =========== ** PROYECTOS ============ */ /* Estructura y fondo de la sección de proyectos */ .projects { background-color: var(--color-background); } .projects-container { max-width: 1200px; width: 100%; margin: 0 auto; padding: 2rem 1rem; box-sizing: border-box; text-align: left; } /* Título de la sección de proyectos */ .projects-title { font-size: clamp(2rem, 6vw, 3rem); font-weight: 700; letter-spacing: 1px; text-align: left; margin-bottom: 3rem; background-image: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Grid de proyectos */ .projects-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; width: 100%; } /* Tarjeta de proyecto individual */ .project-card { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; background: var(--color-card-background); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 2px solid var(--color-card-border); border-radius: 15px; padding: 2rem; color: var(--color-card-text); text-decoration: none; position: relative; overflow: hidden; transition: all 0.4s var(--cubic-bezier); transform: scale(1) translateZ(0); min-height: 140px; width: 100%; cursor: pointer; } /* Contenido de la tarjeta del proyecto */ .project-content { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; padding-right: 0; margin-bottom: 1rem; width: 100%; } /* Título de la tarjeta del proyecto */ .project-card .project-title { font-size: 1.3rem; font-weight: 600; margin-bottom: 1rem; transition: all var(--transition-speed) ease; color: var(--color-text-light); line-height: 1.2; } /* Descripción del proyecto */ .project-card .project-description { font-size: 1rem; line-height: 1.5; margin-bottom: 0; color: var(--color-card-text); } /* Pie de la tarjeta: tags, etc */ .project-footer { margin-top: auto; align-self: flex-start; width: 100%; text-align: left; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 0.6rem; border-top: 1px solid rgba(255, 255, 255, 0.1); } /* Etiquetas de tecnologías */ .project-card .project-tags { font-size: 0.8rem; font-weight: 300; color: var(--color-text-subtle); margin: 0; white-space: normal; line-height: 1.3; } /* Efecto al pasar el cursor por una tarjeta de proyecto */ .project-card:hover { transform: scale(1.03) translateZ(10px); /* Aumenta ligeramente de tamaño */ border-color: var(--color-primary); /* Cambia el color del borde */ box-shadow: 0 0 20px rgba(187, 126, 251, 0.4), 0 0 40px rgba(187, 126, 251, 0.2), 0 0 60px rgba(187, 126, 251, 0.1), 0 10px 30px rgba(0, 0, 0, 0.3); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); z-index: 10; background: var(--color-card-background); animation: ledPulse 2s ease-in-out infinite; } /* Animación de gradiente en el título al pasar el cursor */ .project-card:hover .project-title { background-image: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer 2s ease-in-out infinite; } .project-card:hover .project-description { color: rgba(255, 255, 255, .95); } .project-card:hover .project-tags { color: var(--color-text-faded); } /* Mensaje "¡Tócame!" para proyectos en móviles */ .project-card .click-message-mobile { display: none; position: absolute; bottom: 1rem; right: 1rem; font-size: 10px; font-weight: 400; color: var(--color-text-subtle); letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; cursor: pointer; user-select: none; text-align: center; animation: pulse 2.5s infinite; z-index: 1; } /* Muestra el mensaje en pantallas pequeñas (hasta 1023px) */ @media (max-width: 1023px) { .project-card .click-message-mobile { display: block; } } /* Clase .is-active para cuando la tarjeta se toca en dispositivos táctiles */ .project-card.is-active { transform: scale(1.03) translateZ(10px); border-color: var(--color-primary); box-shadow: 0 0 20px rgba(187, 126, 251, 0.4), 0 0 40px rgba(187, 126, 251, 0.2), 0 0 60px rgba(187, 126, 251, 0.1), 0 10px 30px rgba(0, 0, 0, 0.3); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); z-index: 10; animation: ledPulse 2s ease-in-out infinite; } .project-card.is-active .project-title { background-image: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer 2s ease-in-out infinite; } .project-card.is-active .project-description { color: rgba(255, 255, 255, 0.95); } .project-card.is-active .project-tags { color: var(--color-text-faded); } /* =========== ** CONTACTO ============= */ .contact { background-color: #000000; position: relative; overflow: visible; } .contact-container { max-width: 1200px; width: 100%; margin: 0 auto 0 19%; padding: 2rem 1rem; box-sizing: border-box; } /* Título de contacto con gradiente y animación de entrada */ .contact-title { font-size: clamp(2rem, 6vw, 3rem); font-weight: 700; letter-spacing: 1px; text-align: left; margin-bottom: 3rem; background-image: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; opacity: 0; transform: translateY(30px); transition: opacity 1s ease-out, transform 1s ease-out; } /* Estructura interna de la sección de contacto */ .contact-content { display: flex; gap: 4rem; align-items: flex-start; justify-content: space-between; } /* Contenedor de la información de contacto */ .contact-info { flex: 1; display: flex; flex-direction: column; gap: 3rem; opacity: 0; transform: translateY(30px); transition: opacity 1s ease-out, transform 1s ease-out; } /* Contenedor de los enlaces de contacto */ .contact-links { display: flex; flex-direction: column; gap: 1.5rem; } /* Enlace de contacto individual */ .contact-link { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 0; color: var(--color-text-light); text-decoration: none; font-size: clamp(1.1rem, 2.5vw, 1.4rem); font-weight: 400; border-bottom: 1px solid rgba(255, 255, 255, 0.1); transition: all var(--transition-speed) ease; position: relative; overflow: visible; } /* Texto del enlace */ .link-text { transition: all var(--transition-speed) ease; } /* Icono del enlace */ .link-icon { font-size: 1.5rem; opacity: 0.7; transition: all var(--transition-speed) ease; transform: translateX(10px); } /* Efecto de hover en los enlaces de contacto */ .contact-link:hover { color: var(--color-primary); border-bottom-color: var(--color-primary); transform: translateX(10px); padding-left: 10px; } .contact-link:hover .link-text { background-image: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .contact-link:hover .link-icon { opacity: 1; transform: translateX(0) scale(1.1); color: var(--color-secondary); } /* Estilo para el email */ .contact-email { font-family: "Space Grotesk", sans-serif; font-size: clamp(1rem, 2vw, 1.2rem); } /* Íconos de redes sociales */ .social-icons { display: flex; gap: 1.5rem; justify-content: flex-start; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.1); } /* Estilo de cada ícono de red social */ .social-icon { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.1); border-radius: 12px; color: var(--color-text-light); transition: all var(--transition-speed) ease; text-decoration: none; backdrop-filter: blur(10px); border: 1px solid transparent; } /* SVG dentro del icono */ .social-icon svg { width: 24px; height: 24px; fill: currentColor; transition: all var(--transition-speed) ease; } /* Hover: resplandor y escala en los iconos sociales */ .social-icon:hover { background: var(--color-primary); transform: translateY(-5px) scale(1.1); border-color: var(--color-secondary); box-shadow: 0 10px 30px rgba(187, 126, 251, 0.3); color: white; } .social-icon:hover svg { transform: rotate(5deg); } /* Imagen de perfil o ilustración */ .contact-image { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; opacity: 0; transform: translateY(30px); transition: opacity 1s ease-out, transform 1s ease-out; } /* Contenedor de la imagen */ .image-container { position: relative; width: 300px; height: 400px; display: flex; align-items: center; justify-content: center; margin-bottom: 2rem; transition: all 0.6s ease; margin-top: 2.4rem; } /* Imagen de perfil */ .profile-image { width: 150%; height: 150%; object-fit: cover; object-position: center; border-radius: 10px; z-index: 2; transition: all 0.6s var(--cubic-bezier); filter: brightness(1) contrast(1.05) saturate(1.1); } /* =========== ** Animaciones ============= */ /* Animación de entrada hacia arriba */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Animación de brillo para los gradientes de texto */ @keyframes shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* NUEVA ANIMACIÓN: Brillo para el texto del hero */ @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Animación de pulsación de la flecha de scroll */ @keyframes pulse-down-subtle { 0%, 100% { transform: translateY(0px) rotate(90deg); opacity: 0.6; } 50% { transform: translateY(6px) rotate(90deg); opacity: 1; } } /* NUEVA ANIMACIÓN: Rebote sutil para el indicador de scroll */ @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } } /* Animación de pulsación general */ @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; } } /* Animación de resplandor para tarjetas y contenedores */ @keyframes ledPulse { 0%, 100% { box-shadow: 0 0 20px rgba(187, 126, 251, .4), 0 0 40px rgba(187, 126, 251, .2), 0 0 60px rgba(187, 126, 251, .1); } 50% { box-shadow: 0 0 25px rgba(187, 126, 251, .6), 0 0 50px rgba(187, 126, 251, .3), 0 0 75px rgba(187, 126, 251, .15); } } /* Resplandor en iconos sociales */ @keyframes socialPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(187, 126, 251, 0.4); } 50% { box-shadow: 0 0 0 10px rgba(187, 126, 251, 0); } } .social-icon:hover { animation: socialPulse 1.5s infinite; } /* Shimmer en enlaces de contacto */ @keyframes linkShimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } /* Brillo al pasar mouse por enlace contacto */ .contact-link::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); transform: translateX(-100%); transition: transform 0.6s ease; } .contact-link:hover::before { transform: translateX(100%); } /* NUEVA ANIMACIÓN: Flujo de circuitos */ @keyframes circuitFlow { 0% { opacity: 0; transform: translateX(-100px); } 10% { opacity: 0.6; } 90% { opacity: 0.6; } 100% { opacity: 0; transform: translateX(calc(100vw + 100px)); } } /* =========== ** Animaciones al entrar en vista (scroll) ============= */ /* Por defecto, los elementos están invisibles y desplazados hacia abajo */ .about-title, .about-text, .projects-title, .project-card, .contact-title, .contact-info, .contact-image { opacity: 0; transform: translateY(30px); transition: opacity 1s ease-out, transform 1s ease-out; } /* Cuando se les añade la clase .in-view (por JavaScript), se vuelven visibles y se deslizan a su posición original */ .about.in-view .about-title, .about.in-view .about-text, .projects.in-view .projects-title, .projects.in-view .project-card, .contact.in-view .contact-title, .contact.in-view .contact-info, .contact.in-view .contact-image { opacity: 1; transform: translateY(0); } /* Delays escalonados para que los párrafos aparezcan uno después del otro */ .about.in-view .about-text:nth-child(1) { transition-delay: 0.2s; } .about.in-view .about-text:nth-child(2) { transition-delay: 0.4s; } .about.in-view .about-text:nth-child(3) { transition-delay: 0.6s; } .about.in-view .about-text:nth-child(4) { transition-delay: 0.8s; } /* Delays escalonados para las tarjetas de proyectos */ .projects.in-view .project-card:nth-child(1) { transition-delay: 0.1s; } .projects.in-view .project-card:nth-child(2) { transition-delay: 0.2s; } .projects.in-view .project-card:nth-child(3) { transition-delay: 0.3s; } .projects.in-view .project-card:nth-child(4) { transition-delay: 0.4s; } /* Animaciones de entrada para la sección de contacto */ .contact.in-view .contact-title, .contact.in-view .contact-info, .contact.in-view .contact-image { opacity: 1; transform: translateY(0); } .contact.in-view .contact-info { transition-delay: 0.2s; } .contact.in-view .contact-image { transition-delay: 0.4s; } /* =========== ** MEDIA QUERIES – Responsive (VERSIÓN MEJORADA) ============= */ /* ================================== ** NUEVAS MEDIA QUERIES ESPECÍFICAS PARA EL TÍTULO ** Solucionan el problema de "Desarrolladora" cortándose ** ================================== */ /* DISPOSITIVOS MUY PEQUEÑOS: iPhone SE, Galaxy A pequeños (≤320px) */ @media (max-width: 320px) { .main-title { /* Tamaño fijo mínimo para pantallas extremas */ font-size: 2rem; /* 32px fijos */ line-height: 1.05; letter-spacing: -0.8px; /* Máxima compresión del espaciado */ max-width: 98vw; /* Aprovecha casi todo el espacio */ } /* Subtítulo también más pequeño en pantallas extremas */ .subtitle { font-size: 0.9rem; max-width: 95vw; } /* Hero con menos padding */ .hero { padding: 15px 10px; } } /* DISPOSITIVOS PEQUEÑOS: iPhone SE normal, Galaxy A pequeños (321px-375px) */ @media (min-width: 321px) and (max-width: 375px) { .main-title { /* Tamaño más pequeño pero aún legible */ font-size: clamp(2.2rem, 8vw, 3rem); /* Mínimo 35px */ line-height: 1.05; /* Líneas más compactas para ahorrar espacio vertical */ letter-spacing: -0.5px; /* Reduce el espacio entre letras para ganar anchura */ max-width: 95vw; /* Aprovecha más espacio horizontal */ } /* Hero con padding ajustado */ .hero { padding: 20px 15px; } } /* IPHONES ESTÁNDAR: iPhone 12, 13, 14, 15, Galaxy S21-23 (376px-428px) */ @media (min-width: 376px) and (max-width: 428px) { .main-title { /* Tamaño balanceado para estas pantallas */ font-size: clamp(2.8rem, 7vw, 4rem); /* Mínimo 45px */ line-height: 1.1; /* Line-height estándar */ letter-spacing: -0.3px; /* Reducción más sutil del espaciado */ max-width: 92vw; /* Margen de seguridad del 4% a cada lado */ } } /* MÓVILES GRANDES: iPhone Pro Max, OnePlus, etc. (429px-767px) */ @media (min-width: 429px) and (max-width: 767px) { .main-title { /* Tamaño más grande para pantallas amplias */ font-size: clamp(3.2rem, 6.5vw, 5rem); line-height: 1.1; max-width: 90vw; /* Margen de seguridad del 5% a cada lado */ } } /* TABLETS: iPads, tablets Android (768px-1023px) */ @media (min-width: 768px) and (max-width: 1023px) { .main-title { /* Tamaño grande para tablets */ font-size: clamp(4rem, 6vw, 6rem); line-height: 1.1; max-width: 85vw; /* Menos restricción de ancho */ } } /* ================================== ** MEDIA QUERIES ORIGINALES MEJORADAS ** ================================== */ /* ESCRITORIO - Ajustes para pantallas grandes */ @media (min-width: 1024px) { header { padding: 20px 40px; } .logo-img { width: 50px; height: 50px; font-size: 24px; } .logo-text { font-size: 20px; } .nav-controls { gap: 30px; } .language-selector { gap: 6px; } .lang-btn { font-size: 16px; } .lang-separator { font-size: 16px; } /* Despliega el menú de escritorio y oculta el menú móvil y el icono de hamburguesa */ .nav-menu.desktop-menu { display: flex; flex-direction: row; gap: 40px; align-items: center; } .desktop-menu li { margin: 0; } .desktop-menu a { font-size: 16px; font-weight: 500; } .mobile-menu, .hamburger { display: none; } /* Ajustes de espaciados y tamaños en secciones para escritorio */ .hero { padding: 120px 40px; } .hero-content { margin-bottom: 2rem; } /* MEJORA: Título de escritorio con valores optimizados */ .main-title { margin-bottom: 40px; /* CAMBIO: Usa clamp en lugar de valor fijo para mejor escalabilidad */ font-size: clamp(5rem, 6vw, 8rem); /* Antes era: font-size: 6rem; */ line-height: 1em; /* Line-height original para escritorio */ max-width: 80vw; /* Más libertad de ancho */ letter-spacing: normal; /* Espaciado normal entre letras */ } /* MEJORA: Subtítulo de escritorio mejorado */ .subtitle { /* CAMBIO: Mejor escalabilidad */ font-size: clamp(1.2rem, 2vw, 1.4rem); /* Antes era: font-size: 1.4rem; */ margin-bottom: 100px; max-width: min(600px, 80vw); /* Sistema dual de limitación */ } .about { padding: 80px 40px 60px; scroll-margin-top: 100px; } .about-container { padding: 50px; } .about-title { margin-bottom: 60px; font-size: 3rem; } .about-content { gap: 32px; } .about-text { font-size: 1.2rem; line-height: 1.8; max-width: 850px; } .projects { padding: 80px 40px 60px; scroll-margin-top: 100px; } .projects-container { padding: 50px; } .projects-title { font-size: 3rem; margin-bottom: 60px; text-align: left; } .projects-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; } .project-card { padding: 2.5rem; min-height: 150px; } .project-card .project-title { font-size: 1.5rem; } .project-card .project-description { font-size: 0.95rem; } .contact { padding: 80px 40px 60px; scroll-margin-top: 100px; } /* Asegurar que el brillo se mantenga dentro del área del enlace */ .contact-link { overflow: hidden; /* Esto evita que el brillo se salga del área del enlace */ } .contact-link::before { right: 0; left: auto; transform: translateX(100%); } .contact-link:hover::before { transform: translateX(-100%); } } /* TABLET y MOBILE (<=1023px) - VERSIÓN MEJORADA */ @media (max-width: 1023px) { .hamburger { display: flex; } .nav-menu.desktop-menu { display: none; } .mobile-menu { position: fixed; top: 0; right: -100%; width: 280px; height: 100vh; background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(var(--backdrop-blur-scrolled)); -webkit-backdrop-filter: blur(var(--backdrop-blur-scrolled)); border-left: 1px solid rgba(187, 126, 251, 0.3); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-left: 40px; transition: right 0.4s var(--cubic-bezier); list-style: none; z-index: 999; } .mobile-menu.active { right: 0; } .mobile-menu li { margin: 20px 0; opacity: 0; transform: translateX(30px); transition: all var(--transition-speed) ease; } .mobile-menu.active li { opacity: 1; transform: translateX(0); } .mobile-menu.active li:nth-child(1) { transition-delay: 0.1s; } .mobile-menu.active li:nth-child(2) { transition-delay: 0.2s; } .mobile-menu.active li:nth-child(3) { transition-delay: 0.3s; } /* MEJORA: Line-height optimizada para móviles */ .main-title { line-height: 1.1; /* Antes era: 1em - Ahora es más espaciado */ } /* MEJORA: Hero con padding optimizado */ .hero { /* NUEVO: Padding lateral reducido en móviles para ganar espacio */ padding: 20px 15px; /* Se añade esta regla que antes no existía */ } /* MEJORA: Subtítulo optimizado para móviles */ .subtitle { /* NUEVO: Mejor escalabilidad y centrado para móviles */ font-size: clamp(1rem, 3vw, 1.3rem); /* Escala mejor */ max-width: min(500px, 90vw); /* Limitación dual */ margin: 0 auto; /* Centrado explícito */ } .projects-container { margin-left: 0; padding: 2rem 1rem; } .projects-grid { display: flex; flex-direction: column; gap: 20px; } .project-card { flex-direction: column; padding: 2rem 1.5rem; min-height: auto; width: 100%; align-items: flex-start; } .project-content { padding-right: 0; margin-bottom: 1rem; } .project-footer { margin-top: 0; text-align: left; align-self: flex-start; min-width: auto; } .project-card .click-message-mobile { display: block; pointer-events: none; } /* MOBILE (<=767px) para CONTACTO */ @media (max-width: 767px) { .contact { min-height: auto; } .contact-container { padding: 2rem 1rem; margin: 0 auto; } /* Título de la sección de contacto alineado a la izquierda */ .contact-title { font-size: 2rem; margin-bottom: 2rem; text-align: left; } /* Contenido de contacto con elementos alineados a la izquierda */ .contact-content { flex-direction: column; gap: 2rem; text-align: left; } /* Información de contacto para que aparezca antes que la imagen */ .contact-info { order: 1; gap: 2rem; } /* Imagen de perfil para que aparezca al final */ .contact-image { order: 2; margin-bottom: 2rem; align-self: center; } .image-container { width: 200px; height: 280px; margin-bottom: 1rem; } .contact-links { gap: 1.5rem; } /* Enlaces de contacto con texto e ícono en la misma línea y alineados correctamente */ .contact-link { font-size: 1.1rem; padding: 1rem 0; flex-direction: row; align-items: center; justify-content: space-between; position: relative; } /* Corrección para que la línea de hover no se vea mal */ .contact-link:hover::after { width: 100%; } .link-icon { transform: translateX(0); font-size: 1.2rem; } .contact-link:hover { transform: translateX(0); padding-left: 0; } /* Íconos sociales alineados a la izquierda */ .social-icons { justify-content: flex-start; gap: 1rem; padding-top: 1.5rem; position: relative; z-index: 2; } .social-icon { width: 45px; height: 45px; position: relative; z-index: 2; } .social-icon svg { width: 20px; height: 20px; } .social-icon:hover { transform: translateY(-2px) scale(1.05); } /* Tooltip/mensaje en móvil: evita que bloquee clics */ .click-message-mobile { pointer-events: none; max-width: 100%; white-space: normal; overflow-wrap: break-word; z-index: 1; } } }