/* ================================================================== VARIABLES GLOBALES (:root) ¿Qué hace esto?: ":root" selecciona la raíz del documento (el nivel más alto del HTML). Aquí definimos variables de CSS usando los guiones "--". Esto nos permite guardar colores y reutilizarlos usando "var(--nombre)". "rgba" significa Rojo, Verde, Azul y Alfa (opacidad/transparencia). Por ejemplo: rgba(255, 255, 255, 0.2) es blanco puro al 20% de visibilidad. ================================================================== */ /* --- VARIABLES DEL SISTEMA VISUAL (PALETA SÓLIDA PREMIUM) --- */ :root { --accent: #2563eb; --accent-hover: #1d4ed8; --accent-secondary: #0ea5e9; --surface: #0a0a0a; --surface-muted: #171717; --background: #020202; --white: #ffffff; --white-20: rgba(255, 255, 255, 0.2); --white-10: rgba(255, 255, 255, 0.1); --white-5: rgba(255, 255, 255, 0.05); } /* ================================================================== RESET DE CAJA GLOBAL (*) ¿Qué hace esto?: El asterisco (*) selecciona TODOS los elementos de la web. - margin: 0; y padding: 0; quitan los espacios automáticos que pone el navegador. - box-sizing: border-box; es una regla de oro en CSS. Le dice al navegador: "Si le doy un ancho de 100px a una caja, los bordes y rellenos se deben dibujar HACIA ADENTRO de esos 100px, no hacia afuera". Así nada se desborda. ================================================================== */ /* --- RESET DE CAJA GLOBAL --- */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Configuración del (el cuerpo entero de la página). - line-height: 1.5; separa las líneas de texto un 50% más de lo normal para que sea fácil de leer. - overflow-x: hidden; corta y esconde cualquier cosa que se salga de la pantalla por la derecha o izquierda, evitando que la página se mueva hacia los lados (scroll horizontal). */ body { background-color: var(--background); color: var(--white); font-family: 'Inter', sans-serif; line-height: 1.5; overflow-x: hidden; } /* ================================================================== UTILIDADES DE DISEÑO - "rem" es una medida relativa. 1rem equivale al tamaño de la letra del navegador (usualmente 16px). Es mejor que usar "px" fijos porque si el usuario hace zoom, la página se adapta correctamente. - margin: 0 auto; significa "0 margen arriba/abajo, y margen automático a los lados". Esto centra matemáticamente cualquier caja en la pantalla. ================================================================== */ /* --- UTILIDADES DE DISEÑO --- */ .max-w-7xl { max-width: 80rem; margin: 0 auto; } .max-w-4xl { max-width: 56rem; margin: 0 auto; } .py-28 { padding-top: 7.5rem; padding-bottom: 7.5rem; } /* Padding es relleno interior */ .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } /* ================================================================== HEADER / NAVBAR (LA BARRA DE NAVEGACIÓN SUPERIOR) ================================================================== */ /* --- HEADER / NAVBAR --- */ #navbar { /* position: fixed; saca a la barra del flujo normal de la página y la "pega" en la pantalla. Top:0 y Left:0 la pegan arriba a la izquierda. */ position: fixed; top: 0; left: 0; width: 100%; /* z-index controla la "profundidad" o capas (como en Photoshop). Un z-index de 1000 asegura que esta barra esté por encima del resto del contenido (que por defecto es 0). */ z-index: 1000; /* transition: si cambia un color o tamaño, toma 0.3 segundos en hacer la animación suave (ease). */ transition: all 0.3s ease; padding-top: 0.5rem; padding-bottom: 0.5rem; } .nav-container { /* display: flex; activa Flexbox. Convierte esta caja en flexible. */ display: flex; /* align-items: center; centra todo su contenido verticalmente. */ align-items: center; /* justify-content: space-between; toma los elementos dentro (logo y menú) y los empuja a los extremos opuestos de la pantalla. */ justify-content: space-between; height: 6rem; } .nav-blur { background: rgba(2, 2, 2, 0.88); /* backdrop-filter: blur(20px); es lo que crea el efecto de vidrio empavonado. Todo lo que quede por DEBAJO de esta barra se verá desenfocado 20 pixeles. */ backdrop-filter: blur(20px); border-bottom: 1px solid rgba(37, 99, 235, 0.12); } .logo-container { display: flex; align-items: center; gap: 0.85rem; /* gap es la separación o "calle" exacta entre los elementos de una caja flex */ cursor: pointer; } .logo-box { width: 2.75rem; height: 2.75rem; padding: 0.4rem; border-radius: 0.75rem; /* Redondea las esquinas de la caja */ display: flex; align-items: center; justify-content: center; background: rgba(37, 99, 235, 0.06); border: 1px solid rgba(37, 99, 235, 0.18); } .logo-box img { width: 100%; height: 100%; /* object-fit: contain; le dice a la imagen que no se deforme ni se estire. Debe encajar dentro de su caja manteniendo sus proporciones. */ object-fit: contain; } .logo-text { font-family: 'Manrope', sans-serif; font-size: 1.35rem; font-weight: 800; /* Grosor de la letra (800 es Extra Bold) */ letter-spacing: -0.03em; } .desktop-nav { display: flex; align-items: center; gap: 2.25rem; } .nav-link { background: none; border: none; color: rgba(255, 255, 255, 0.55); font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: color 0.25s; /* position: relative; es crucial aquí. Le dice al navegador: "Soy una caja anclada a mi lugar, y si meto cosas 'absolute' dentro de mí, se posicionarán basándose en MIS límites, no en los de la pantalla." */ position: relative; padding: 0.5rem 0; } /* Pseudo-clase :hover (cuando el ratón está encima) y clase .active */ .nav-link:hover, .nav-link.active { color: var(--white); } /* Pseudo-elemento ::after. Crea un elemento HTML "fantasma" que no existe en el código, solo en el diseño. En este caso, se usa para dibujar la rayita azul debajo del botón activo. */ .nav-link.active::after { content: ''; /* Necesario para que el pseudo-elemento exista */ /* position: absolute; flota libremente sin ocupar espacio, guiándose por los bordes de .nav-link */ position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--accent); border-radius: 9999px; /* box-shadow crea el resplandor: 0px a la derecha, 0px abajo, difuminado 12px, color azul */ box-shadow: 0 0 12px var(--accent); } .menu-toggle { display: none; /* display: none elimina visual y espacialmente el elemento de la pantalla. No existe para la PC. */ background: none; border: none; color: white; cursor: pointer; padding: 0.5rem; } /* ================================================================== MENÚ DESPLEGABLE MÓVIL ================================================================== */ /* --- MENÚ DESPLEGABLE MÓVIL --- */ .mobile-menu { position: fixed; /* inset: 0; es un atajo moderno. Es igual a escribir top:0; right:0; bottom:0; left:0;. Básicamente, "clava" el menú a las 4 esquinas de la pantalla, volviéndolo pantalla completa. */ inset: 0; background: #040404; z-index: 2000; /* Z-index mayor a 1000 para tapar la barra de navegación */ display: none; /* flex-direction: column; hace que los elementos flex en vez de estar uno al lado del otro, estén uno DEBAJO del otro. */ flex-direction: column; justify-content: center; align-items: center; gap: 2.5rem; } .mobile-menu.open { display: flex; } .mobile-menu button { background: none; border: none; color: rgba(255,255,255,0.7); font-size: 1.85rem; font-weight: 700; font-family: 'Manrope', sans-serif; } .close-menu { position: absolute; top: 2.5rem; right: 2rem; } /* ================================================================== SECCIÓN HERO (PORTADA PRINCIPAL) ================================================================== */ /* --- SECCIÓN HERO --- */ .hero { position: relative; padding-top: 13.5rem; padding-bottom: 7.5rem; /* vh = Viewport Height (Altura de pantalla). 90vh significa "Obliga a esta sección a medir como mínimo el 90% de la altura de la pantalla del usuario". */ min-height: 90vh; display: flex; flex-direction: column; align-items: center; text-align: center; overflow: hidden; } .gradient-bg-1 { position: absolute; /* Ignora al resto de elementos y se mueve por coordenadas de arriba y la izquierda */ top: -15%; left: 15%; width: 550px; height: 550px; background: rgba(37, 99, 235, 0.12); border-radius: 50%; /* filter: blur(); crea un desenfoque. A 130px, un círculo de color duro se convierte en una nube/mancha de luz suave. */ filter: blur(130px); /* pointer-events: none; hace que el elemento sea "fantasma" para el ratón. Los clics lo atraviesan, por lo que no interrumpe el uso de botones que estén debajo. */ pointer-events: none; } .text-huge { font-family: 'Manrope', sans-serif; /* clamp(minimo, valor-ideal, maximo); es magia matemática de CSS. Le dice al texto: "Tu tamaño ideal es 7.5% del ancho de la pantalla (7.5vw). Pero si la pantalla es muy chica, NUNCA bajes de 2.4rem. Y si la pantalla es de cine, NUNCA pases de 5.5rem". */ font-size: clamp(2.4rem, 7.5vw, 5.5rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.04em; margin-bottom: 2.5rem; } .gradient-text { /* linear-gradient: crea un degradado de pintura de izquierda a derecha. */ background: linear-gradient(to right, white, #eff6ff, var(--accent)); /* -webkit-background-clip: text; recorta ese fondo de pintura para que SOLO se dibuje por donde pasan las letras del texto. */ -webkit-background-clip: text; /* Luego hacemos las letras en sí transparentes para que se vea el fondo recortado. */ -webkit-text-fill-color: transparent; } .hero-desc { max-width: 42rem; margin: 0 auto 3.5rem; color: rgba(255, 255, 255, 0.55); /* Otro clamp para que la descripción también sea responsive. vw = Viewport Width (ancho de pantalla). */ font-size: clamp(1.05rem, 2vw, 1.2rem); line-height: 1.65; } .hero-actions { display: flex; justify-content: center; gap: 1.25rem; margin-bottom: 6.5rem; } /* ================================================================== BOTONES ================================================================== */ /* --- BOTONES --- */ .btn-accent { background: var(--accent); color: white; padding: 1.1rem 2.25rem; border-radius: 0.85rem; font-weight: 700; border: none; cursor: pointer; display: flex; align-items: center; gap: 0.65rem; transition: all 0.25s; box-shadow: 0 0 30px rgba(37, 99, 235, 0.25); } .btn-accent:hover { /* transform: scale(1.02); infla el botón volviéndolo un 2% más grande. */ transform: scale(1.02); /* filter: brightness(1.1); lo vuelve un 10% más brillante/luminoso de su color original. */ filter: brightness(1.1); } .btn-outline { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); color: white; padding: 1.1rem 2.25rem; border-radius: 0.85rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 0.65rem; transition: all 0.25s; } .btn-outline:hover { background: rgba(255, 255, 255, 0.08); } /* ================================================================== MOCKUP INTERACTIVO DEL DASHBOARD (CONSOLITA DEL HERO) ================================================================== */ /* --- INTERACTIVE ANALYTIC DASHBOARD MOCKUP --- */ .hero-mockup { width: 100%; max-width: 64rem; margin: 0 auto; } .api-dashboard-grid { /* El "!important" es una orden estricta al navegador: "Ignora cualquier otra regla css anterior y obedéceme sí o sí" */ padding: 1.25rem !important; background: #060606 !important; border: 1px solid rgba(37, 99, 235, 0.14) !important; text-align: left; display: flex; flex-direction: column; gap: 1.25rem; } .dash-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding-bottom: 0.85rem; } .dash-title-group { display: flex; align-items: center; gap: 0.75rem; } .logo-box-mini { width: 1.75rem; height: 1.75rem; background: var(--white-5); border-radius: 0.35rem; padding: 0.2rem; } .logo-box-mini img { width: 100%; height: 100%; object-fit: contain; } .dash-title-group h4 { font-size: 0.9rem; font-weight: 700; } /* font-family: monospace; hace que todas las letras tengan exactamente el mismo ancho (como una máquina de escribir). Ideal para simular código. */ .dash-title-group p { font-size: 0.68rem; color: rgba(255,255,255,0.4); font-family: monospace; } .dash-status-pill { display: flex; align-items: center; gap: 0.4rem; font-size: 0.65rem; font-family: monospace; background: rgba(0, 255, 102, 0.04); color: #00ff66; padding: 0.3rem 0.65rem; border-radius: 4px; border: 1px solid rgba(0, 255, 102, 0.18); } .pulse-dot { width: 0.45rem; height: 0.45rem; background-color: #00ff66; border-radius: 50%; box-shadow: 0 0 8px #00ff66; } /* display: grid; es el sistema bidimensional (filas y columnas) más poderoso de CSS. grid-template-columns: repeat(3, 1fr); divide el espacio en 3 columnas iguales. 1fr significa "1 Fracción" del espacio disponible. */ .dash-metrics-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .metric-mini-card { background: rgba(255,255,255,0.01); border: 1px solid rgba(255,255,255,0.04); padding: 0.85rem; border-radius: 0.75rem; display: flex; flex-direction: column; } .m-label { font-size: 0.58rem; font-family: monospace; color: rgba(255,255,255,0.35); } .m-value { font-family: 'Manrope', sans-serif; font-size: 1.35rem; font-weight: 700; } .m-value small { font-size: 0.65rem; color: rgba(255,255,255,0.4); margin-left: 0.15rem; } .text-cyan { color: var(--accent-secondary); } .text-blue { color: #3b82f6; } .text-green { color: #10b981; } /* Grid de 2 columnas asimétricas. La primera ocupa el 1.22 de una fracción, la segunda 0.78. Juntas suman 2 fracciones, dando más espacio al primer elemento. */ .dash-body-layout { display: grid; grid-template-columns: 1.22fr 0.78fr; gap: 1rem; min-height: 155px; } /* overflow-y: auto; le dice a la caja que, si los textos se salen de su altura, genere automáticamente una barrita de scroll vertical interna solo para esa caja. */ .dash-terminal { background: #020202; border: 1px solid rgba(255,255,255,0.04); border-radius: 0.75rem; padding: 0.85rem; display: flex; flex-direction: column; gap: 0.65rem; } .terminal-header { display: flex; justify-content: space-between; align-items: center; font-size: 0.58rem; font-family: monospace; color: rgba(255,255,255,0.3); } .terminal-body { font-family: monospace; font-size: 0.68rem; color: rgba(255,255,255,0.7); display: flex; flex-direction: column; gap: 0.35rem; overflow-y: auto; } .t-stamp { color: var(--accent); margin-right: 0.4rem; } /* Animación rápida (0.15s ease-out) para cuando aparece un nuevo texto de log */ .animate-log { animation: logEntry 0.15s ease-out; } @keyframes logEntry { from { opacity: 0; transform: translateX(-3px); } to { opacity: 1; transform: translateX(0); } } .dash-chart-preview { background: rgba(255,255,255,0.01); border: 1px solid rgba(255,255,255,0.03); border-radius: 0.75rem; padding: 0.85rem; display: flex; flex-direction: column; justify-content: space-between; } .chart-header { display: flex; justify-content: space-between; font-size: 0.58rem; font-family: monospace; color: rgba(255,255,255,0.25); } .bars-container { display: flex; align-items: flex-end; justify-content: space-between; height: 85px; gap: 3px; } /* Las barritas del gráfico animado. flex: 1 hace que todas se repartan equitativamente el ancho de su caja padre para llenarla entera sin importar cuántas sean. */ .live-bar { flex: 1; background: linear-gradient(to top, rgba(37, 99, 235, 0.1), var(--accent)); border-radius: 1px 1px 0 0; transition: height 0.35s ease; } /* ================================================================== CARRUSEL DE TECNOLOGÍAS (LA CINTA) ================================================================== */ /* --- TECH CAROUSEL --- */ .tech-carousel-wrapper { padding: 4.5rem 0; border-top: 1px solid var(--white-5); border-bottom: 1px solid var(--white-5); background: rgba(23, 23, 23, 0.2); overflow: hidden; position: relative; } /* Los ::before y ::after crean dos "cortinas" semi-transparentes a los costados de la cinta (un degradado de negro a transparente) para que parezca que los íconos entran y salen de la nada. */ .tech-carousel-wrapper::before, .tech-carousel-wrapper::after { content: ''; position: absolute; top: 0; bottom: 0; width: 6rem; z-index: 10; } .tech-carousel-wrapper::before { left: 0; background: linear-gradient(to right, var(--background), transparent); } .tech-carousel-wrapper::after { right: 0; background: linear-gradient(to left, var(--background), transparent); } /* white-space: nowrap; fuerza a que todos los textos se queden en 1 sola línea infinita, prohibiéndole al navegador crear saltos de línea (enters) automáticos. */ .tech-carousel { display: flex; gap: 3rem; white-space: nowrap; animation: infiniteScroll 35s linear infinite; } /* @keyframes dicta los fotogramas de una animación. Aquí le decimos que empiece en 0 de desplazamiento (X:0) y termine desplazado hacia la izquierda un -50%. (Javascript duplicó la cinta, así que cuando llega al 50% vuelve a empezar y no se nota el salto). */ @keyframes infiniteScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .tech-item { display: flex; align-items: center; gap: 0.65rem; opacity: 0.4; } /* border-radius: 50% en un elemento cuadrado (width y height iguales) lo convierte matemáticamente en un círculo perfecto. */ .tech-dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background-color: var(--accent); } .tech-name { font-family: 'Manrope', sans-serif; font-size: 1.35rem; font-weight: 500; } /* ================================================================== GRILLAS DE ESCRITORIO ================================================================== */ /* --- GRILLAS EXACTAS PARA PC --- */ .grid-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; } .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .projects-grid-pro { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } /* --- ESTILOS DE TARJETAS --- */ .feature-card { padding: 2.5rem; text-align: left; } /* translateY(-5px) mueve la tarjeta 5 pixeles verticalmente (Y) hacia arriba (negativo). Da el efecto de levitación. */ .feature-card:hover { background: rgba(37, 99, 235, 0.04); border-color: rgba(37, 99, 235, 0.2); transform: translateY(-5px); } .icon-box { width: 3.25rem; height: 3.25rem; background: var(--white-5); border: 1px solid var(--white-10); border-radius: 0.85rem; display: flex; align-items: center; justify-content: center; margin-bottom: 2rem; color: var(--accent); } .services-subtitle, .section-subtitle { max-width: 44rem; color: rgba(255, 255, 255, 0.6); font-size: 1.1rem; font-weight: 300; line-height: 1.6; margin-bottom: 2.5rem; } .service-card { padding: 2.5rem; display: flex; flex-direction: column; align-items: flex-start; text-align: left; } .service-card:hover { background: rgba(37, 99, 235, 0.04); border-color: rgba(37, 99, 235, 0.2); transform: translateY(-5px); } /* margin-top: auto; cuando estamos dentro de un Flexbox vertical, esto es magia pura: empuja el botón con fuerza magnética hasta el fondo de la tarjeta, llenando el espacio intermedio. */ .btn-service-more { background: #e2e8f0; color: #0f172a; border: none; padding: 0.6rem 1.15rem; border-radius: 0.5rem; font-size: 0.85rem; font-weight: 700; cursor: pointer; margin-top: auto; transition: all 0.2s; } .btn-service-more:hover { background: var(--white); transform: translateY(-1px); } .project-card-pro { padding: 2.5rem; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(135deg, rgba(255, 255, 255, 0.01) 0%, rgba(255, 255, 255, 0.03) 100%); border: 1px solid rgba(255, 255, 255, 0.04); min-height: 390px; } .project-card-pro:hover { transform: translateY(-5px); border-color: rgba(37, 99, 235, 0.25); background: linear-gradient(135deg, rgba(37, 99, 235, 0.02) 0%, rgba(255, 255, 255, 0.01) 100%); } .project-header-pro { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.75rem; } .project-meta-pro { font-family: monospace; font-size: 0.7rem; color: rgba(255, 255, 255, 0.3); letter-spacing: 0.12rem; } .project-status-pro { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.65rem; font-weight: 700; padding: 0.25rem 0.65rem; border-radius: 9999px; } .status-prod { background: rgba(16, 185, 129, 0.05); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.15); } .status-core { background: rgba(59, 130, 246, 0.05); color: #3b82f6; border: 1px solid rgba(59, 130, 246, 0.15); } .status-beta { background: rgba(245, 158, 11, 0.05); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.15); } .project-title-pro { font-family: 'Manrope', sans-serif; font-size: 1.5rem; font-weight: 800; margin-bottom: 1.25rem; } .project-desc-pro { color: rgba(255, 255, 255, 0.45); font-size: 0.92rem; line-height: 1.55; margin-bottom: 2rem; font-weight: 300; } /* flex-wrap: wrap; indica que si las etiquetas de las tecnologías ("React", "Go") no caben en una sola fila por el ancho, salten a la fila de abajo como si fuera texto normal. */ .project-tech-wrapper-pro { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 2.5rem; } .project-tag-pro { font-size: 0.7rem; font-weight: 500; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.6); padding: 0.3rem 0.65rem; border-radius: 0.4rem; } .project-footer-pro { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255, 255, 255, 0.04); padding-top: 1.25rem; } .project-metric-pro { display: flex; align-items: center; gap: 0.4rem; font-family: monospace; font-size: 0.8rem; } .metric-icon-pro { width: 13px; height: 13px; color: var(--accent); } .project-link-pro { font-size: 0.8rem; font-weight: 600; color: rgba(255, 255, 255, 0.4); display: flex; align-items: center; gap: 0.3rem; } /* --- CONTENEDORES GLASS (TÉCNICA DE GLASSMORPHISM) --- */ .glass-card { background: rgba(255, 255, 255, 0.015); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 1.25rem; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); /* Safari requiere el prefijo -webkit- para que el desenfoque funcione */ /* cubic-bezier(x1, y1, x2, y2) es una curva matemática avanzada que da como resultado una animación muy natural y reboteada, mejor que un simple "ease" o "linear". */ transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .section-badge { color: var(--accent); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.35rem; text-transform: uppercase; display: block; margin-bottom: 1.25rem; } .text-huge-sm { font-family: 'Manrope', sans-serif; font-size: clamp(2.1rem, 4.5vw, 3.5rem); font-weight: 800; line-height: 1.15; margin-bottom: 1.25rem; } .text-white-20 { color: var(--white-20); } .bg-muted { background: rgba(23, 23, 23, 0.08); } .bg-muted-5 { background: rgba(23, 23, 23, 0.03); } .about-content { margin-top: 3.5rem; display: flex; flex-direction: column; gap: 2.25rem; color: rgba(255, 255, 255, 0.5); font-size: 1.15rem; font-weight: 300; } /* ================================================================== SECCIÓN DE CONTACTO ================================================================== */ /* --- SECCIÓN CONTACTO --- */ .contact-layout { display: grid; /* Crea dos columnas casi iguales (51% y 49%). 1.05fr y 0.95fr suman 2fr en total. */ grid-template-columns: 1.05fr 0.95fr; gap: 4rem; /* align-items: stretch; obliga a ambas columnas (el texto y el formulario) a estirarse verticalmente para ser idénticamente altas, basándose en la que tenga más contenido. */ align-items: stretch; } .contact-info-side { display: flex; flex-direction: column; justify-content: flex-start; height: 100%; } .contact-text { color: rgba(255, 255, 255, 0.55); font-size: 1.05rem; line-height: 1.6; } .contact-image-wrapper { width: 100%; height: 100%; min-height: 320px; overflow: hidden; border-radius: 1.25rem; padding: 0.2rem; margin-top: 2.5rem; border: 1px solid rgba(255, 255, 255, 0.03); } .contact-image-wrapper img { width: 100%; height: 100%; display: block; border-radius: 1rem; opacity: 0.75; /* object-fit: cover; le dice a la imagen: "Si las proporciones de tu caja no cuadran con las tuyas, córtate los bordes hasta llenar todo el hueco, pero NUNCA te deformes." */ object-fit: cover; } .contact-form-side { padding: 3.5rem; width: 100%; height: auto; display: flex; flex-direction: column; justify-content: center; overflow: hidden; position: relative; } .glow-accent { /* Múltiples box-shadow combinados separados por comas para simular un resplandor ambiental y una sombra direccional. */ box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 40px rgba(37, 99, 235, 0.03); border: 1px solid rgba(37, 99, 235, 0.15); } .contact-form { display: flex; flex-direction: column; gap: 1.5rem; width: 100%; } .form-group { width: 100%; display: flex; flex-direction: column; } .form-group input, .form-group textarea, .form-select { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 0.75rem; padding: 1.1rem; color: var(--white); /* outline: none; quita la horrorosa caja celeste fosforescente o negra que el navegador Chrome o Safari le pone a los inputs de texto al hacer clic. */ outline: none; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); font-family: 'Inter', sans-serif; font-size: 0.95rem; width: 100%; } .form-group input:focus, .form-group textarea:focus, .form-select:focus { border-color: rgba(37, 99, 235, 0.6); background: rgba(37, 99, 235, 0.02); box-shadow: 0 0 15px rgba(37, 99, 235, 0.1); } /* ::placeholder apunta directamente a los textos fantasmas (como "Escribe tu nombre...") dentro de los inputs. */ .form-group input::placeholder, .form-group textarea::placeholder { color: rgba(255, 255, 255, 0.35); } /* appearance: none; elimina por completo la estética que el sistema operativo (Windows o Mac) impone sobre la cajita desplegable de un menú select. Esto nos permite reemplazar la flechita por defecto con un diseño personalizado en background-image. */ .form-select { appearance: none; cursor: pointer; color: rgba(255, 255, 255, 0.65); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgba(255,255,255,0.4)' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.25rem center; background-size: 1rem; } .form-select option { background: #0b0b0b; color: var(--white); } .btn-form-submit { width: 100%; padding: 1.1rem; background: var(--white); color: #000000; border-radius: 0.75rem; font-weight: 700; font-size: 0.95rem; border: none; cursor: pointer; transition: all 0.25s ease; box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1); } .btn-form-submit:hover { background: #e2e8f0; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(255, 255, 255, 0.15); } /* ================================================================== FOOTER (PIE DE PÁGINA) ================================================================== */ /* --- 💼 FOOTER BASE --- */ .footer { padding: 6rem 1.5rem 4.5rem; border-top: 1px solid var(--white-5); position: relative; } .footer-glow { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 400px; background: rgba(37, 99, 235, 0.03); filter: blur(100px); pointer-events: none; } .footer-grid { display: grid; grid-template-columns: 1.2fr 0.7fr 1.1fr; gap: 4rem; margin-bottom: 4.5rem; } .footer-desc { color: rgba(255,255,255,0.45); font-size: 0.85rem; line-height: 1.5; text-align: left; } .footer-nav h4, .footer-support h4 { color: var(--accent); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.25em; margin-bottom: 2rem; } /* list-style: none; es muy importante aquí. Le quita las viñetas (los puntitos negros) que HTML les pone a todas las listas