/* ============================================================================ styles.css — Estética cyberpunk de la vitrina de avatares ---------------------------------------------------------------------------- Idea general: fondo oscuro con rejilla y "scanlines", marcos tipo HUD con esquinas en ángulo, y un color de ACENTO neón que cambia según el avatar seleccionado. Ese acento vive en la variable --acento (la pone app.js); casi todo el brillo de la página se deriva de ella, así que cambiando el color del avatar en avatares.js se recolorea toda la ficha. ========================================================================== */ /* ---- Variables base. --acento/--acento2 las SOBREESCRIBE app.js por avatar. */ :root { --bg: #06070d; /* fondo casi negro azulado */ --bg2: #0c0e18; /* paneles */ --linea: #1b2030; /* bordes tenues */ --texto: #e7ecf5; /* texto principal */ --tenue: #8b93a7; /* texto secundario */ --acento: #58b6ff; /* NEÓN principal (lo cambia el avatar) */ --acento2: #8fe3ff; /* NEÓN secundario */ --radio: 14px; /* redondeo de los paneles */ } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: "Segoe UI", system-ui, -apple-system, sans-serif; color: var(--texto); background: var(--bg); /* Capas de fondo: vignette + dos resplandores de color + rejilla fina. Subir el tamaño 44px de la rejilla la hace más espaciada. */ /* Solo los resplandores radiales del color de acento. La rejilla de cuadros se quitó: la textura del fondo ahora son los motivos temáticos de cada avatar (ver la capa .decor-layer más abajo y motivos.js). */ background-image: radial-gradient(1200px 600px at 80% -10%, color-mix(in srgb, var(--acento) 18%, transparent), transparent 60%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, var(--acento2) 12%, transparent), transparent 60%); overflow: hidden; /* el scroll vive dentro de los paneles */ transition: background-image .5s ease; } /* ---- Overlay de scanlines (líneas de monitor CRT). pointer-events:none para que no estorbe el clic. Subir la opacidad lo hace más marcado. */ .scanlines { position: fixed; inset: 0; pointer-events: none; z-index: 50; background: repeating-linear-gradient( to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.16) 2px 3px); mix-blend-mode: multiply; opacity: .5; } /* ===== Capa de decoración: motivos temáticos del avatar esparcidos al fondo ===== Va DETRÁS de #app (z-index 0 < 1). La columna de info y los márgenes son transparentes y la dejan ver (igual que antes la rejilla). Se pinta con el color de acento del avatar activo y no recibe clics. */ .decor-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; color: var(--acento); } .decor-item { position: absolute; display: block; transform: translate(-50%, -50%); /* centra el motivo en su punto (base, si no hay animación) */ will-change: transform; animation: floaty var(--dur, 20s) ease-in-out infinite; animation-delay: var(--delay, 0s); } .decor-item svg { width: 100%; height: 100%; display: block; } .decor-item path { fill: currentColor; fill-rule: evenodd; } /* evenodd => los "ojos" quedan huecos */ /* Flote suave: sube/baja y gira un poco. translate(-50%) centra el motivo en su punto. */ @keyframes floaty { 0%, 100% { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); } 50% { transform: translate(-50%, calc(-50% - 14px)) rotate(calc(var(--rot, 0deg) + 8deg)); } } /* Accesibilidad: si el sistema pide menos movimiento, los motivos se quedan quietos. */ @media (prefers-reduced-motion: reduce) { .decor-item { animation: none; } } /* Botón flotante de música chill (galería). Se tiñe con el acento del avatar. */ .music-toggle { position: fixed; bottom: 16px; right: 16px; z-index: 85; /* por encima del panel "Sobre mí" */ width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; cursor: pointer; background: color-mix(in srgb, var(--acento) 16%, #0c0e18); border: 1px solid color-mix(in srgb, var(--acento) 45%, var(--linea)); color: #fff; font-size: 18px; line-height: 1; box-shadow: 0 0 18px color-mix(in srgb, var(--acento) 30%, transparent); transition: transform .1s, box-shadow .2s, background .2s; } .music-toggle:hover { transform: translateY(-2px); box-shadow: 0 0 28px color-mix(in srgb, var(--acento) 55%, transparent); } /* ============================ LAYOUT GENERAL ============================== */ #app { display: grid; grid-template-columns: 300px 1fr; /* ancho del menú lateral | escenario */ /* CLAVE: la fila mide exactamente el alto de la ventana (no el de su contenido). Sin esto, una imagen alta estira el escenario y se desborda. minmax(0,1fr) fija la altura y deja que los hijos con min-height:0 encojan para caber. */ grid-template-rows: minmax(0, 1fr); height: 100vh; gap: 18px; padding: 18px; position: relative; z-index: 1; /* por encima de la capa de decoración (#decor, z-index 0) */ } /* ============================== MENÚ LATERAL ============================== */ .sidebar { display: flex; flex-direction: column; background: linear-gradient(180deg, var(--bg2), #080a12); border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px 14px; overflow: hidden; } .brand { padding: 6px 8px 16px; border-bottom: 1px solid var(--linea); } .brand .logo { font-size: 26px; font-weight: 800; letter-spacing: 2px; /* Texto con brillo neón del acento. */ color: #fff; text-shadow: 0 0 12px color-mix(in srgb, var(--acento) 80%, transparent), 0 0 28px color-mix(in srgb, var(--acento) 45%, transparent); } .brand .logo b { color: var(--acento); } .brand .sub { margin-top: 4px; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--tenue); font-family: "Consolas", monospace; } .menu-label { font-family: "Consolas", monospace; font-size: 10px; letter-spacing: 3px; color: var(--tenue); text-transform: uppercase; padding: 16px 8px 8px; } .menu { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; } /* -------- Barras de scroll finas y temáticas (en vez de la gris del sistema) ---- Aparecen al haber muchos avatares; el "pulgar" toma el color de acento activo. Sube el 8px para una barra más gruesa; quita estas reglas para volver a la del sistema, o usa "scrollbar-width: none" para ocultarla del todo. */ .menu, .info-col, body { scrollbar-width: thin; /* Firefox */ scrollbar-color: color-mix(in srgb, var(--acento) 55%, var(--linea)) transparent; } .menu::-webkit-scrollbar, .info-col::-webkit-scrollbar, body::-webkit-scrollbar { width: 8px; height: 8px; } .menu::-webkit-scrollbar-track, .info-col::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: transparent; } .menu::-webkit-scrollbar-thumb, .info-col::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--acento) 50%, var(--linea)); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; /* aspecto delgado */ } .menu::-webkit-scrollbar-thumb:hover, .info-col::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover { background: var(--acento); background-clip: padding-box; } /* Cada botón de avatar en el menú. */ .menu-item { display: flex; align-items: center; gap: 12px; background: transparent; color: var(--texto); border: 1px solid transparent; border-left: 2px solid var(--linea); border-radius: 8px; padding: 11px 12px; font: inherit; text-align: left; cursor: pointer; transition: background .15s, border-color .15s, transform .1s; } .menu-item:hover { background: rgba(255,255,255,.03); border-left-color: var(--tenue); } .menu-item:active { transform: translateX(1px); } /* Punto de color de cada avatar (su acento). */ .menu-item .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); flex: none; } .menu-item .mi-name { font-weight: 600; } .menu-item .mi-jp { font-size: 11px; color: var(--tenue); font-family: "Consolas", monospace; } .menu-item .mi-txt { display: flex; flex-direction: column; line-height: 1.25; } /* Avatar seleccionado: fondo y borde encendidos con su acento. */ .menu-item.active { background: color-mix(in srgb, var(--acento) 12%, transparent); border-color: color-mix(in srgb, var(--acento) 45%, transparent); border-left: 2px solid var(--acento); box-shadow: inset 0 0 24px color-mix(in srgb, var(--acento) 14%, transparent); } .menu-item.active .mi-name { color: #fff; } /* Enlace a la página personal. margin-top:auto lo empuja al fondo del menú. */ .side-link { margin-top: auto; display: block; padding: 11px 12px; border-radius: 8px; border: 1px solid var(--linea); border-left: 2px solid var(--acento); color: var(--texto); text-decoration: none; font-family: "Consolas", monospace; font-size: 12px; letter-spacing: 1px; transition: background .15s, border-color .15s; } .side-link:hover { background: color-mix(in srgb, var(--acento) 12%, transparent); border-left-color: var(--acento2); } .sidebar-foot { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--linea); font-size: 11px; color: var(--tenue); font-family: "Consolas", monospace; display: flex; justify-content: space-between; } .sidebar-foot .blink { color: var(--acento); animation: blink 1.4s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } /* ============================== ESCENARIO ================================ */ /* Escenario en 2 columnas: visor grande a la izquierda, info a la derecha. Las dos columnas miden el alto completo, así la foto se ve grande y entera. Cambia la proporción 1.15fr / 0.85fr para dar más ancho a la foto o a la info. */ .stage { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 18px; min-height: 0; overflow: hidden; } /* Columna derecha de información. Si el texto es largo, scrollea ella sola. */ .info-col { display: flex; flex-direction: column; gap: 16px; min-height: 0; overflow-y: auto; /* Aire interno: la columna recorta su contenido (por el scroll), así que sin este padding el glow del título choca contra el borde y se ve "cuadrado". Súbelo si el halo todavía se corta; bájalo para pegar más el texto al borde. */ padding: 16px 18px; } /* ---- Cabecera: nombre + precio/comprar ---- */ .stage-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; } .title-block h1 { /* Tamaño del nombre. Más chico que antes porque ahora vive en la columna estrecha de la derecha; sube el último valor (48px) para agrandarlo. */ font-size: clamp(30px, 3vw, 48px); font-weight: 800; letter-spacing: 1px; line-height: .95; color: #fff; /* Glow neón SUAVIZADO: varias capas con desenfoque creciente y opacidad decreciente => halo redondo y difuso, sin borde duro. Sube las opacidades para un neón más intenso; baja el último px (48) para un halo más recogido. */ text-shadow: 0 0 6px color-mix(in srgb, var(--acento) 60%, transparent), 0 0 14px color-mix(in srgb, var(--acento) 45%, transparent), 0 0 28px color-mix(in srgb, var(--acento) 32%, transparent), 0 0 48px color-mix(in srgb, var(--acento) 20%, transparent); } .title-block .jp { margin-top: 6px; font-size: 16px; letter-spacing: 6px; color: var(--acento); font-family: "Consolas", monospace; } /* Fila con la etiqueta de servicio a la izquierda y el botón Consultar a la derecha. */ .price-block { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); padding: 12px 0; } .price-block .buy { margin-top: 0; } /* en fila no necesita el margen superior */ .buy { display: inline-block; margin-top: 10px; padding: 10px 22px; border-radius: 10px; background: var(--acento); color: #06070d; font-weight: 800; letter-spacing: 1px; text-decoration: none; text-transform: uppercase; font-size: 13px; box-shadow: 0 0 22px color-mix(in srgb, var(--acento) 55%, transparent); transition: transform .1s, box-shadow .2s, filter .2s; } .buy:hover { transform: translateY(-2px); filter: brightness(1.1); box-shadow: 0 0 34px color-mix(in srgb, var(--acento) 80%, transparent); } /* Etiqueta de servicio que reemplaza al precio (todavía sin precios). */ .service-tag { display: block; font-family: "Consolas", monospace; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--tenue); } /* Desplegable "¿Cómo funciona el ensamblado?" en la sección de detalles. */ .como { margin-top: 2px; } .como summary { cursor: pointer; list-style: none; font-family: "Consolas", monospace; font-size: 12px; letter-spacing: 1px; color: color-mix(in srgb, var(--acento) 80%, #fff); } .como summary::-webkit-details-marker { display: none; } /* oculta la flecha nativa */ .como summary::before { content: "▸ "; } .como[open] summary::before { content: "▾ "; } /* white-space:pre-line respeta los saltos de línea (\n) del texto en avatares.js. */ .como p { margin-top: 8px; color: var(--tenue); font-size: 13px; line-height: 1.6; white-space: pre-line; } /* ---- Visor (marco HUD con esquinas) ---- */ .viewer { position: relative; background: radial-gradient(700px 400px at 50% 0%, color-mix(in srgb, var(--acento) 10%, transparent), transparent 70%), var(--bg2); border: 1px solid color-mix(in srgb, var(--acento) 30%, var(--linea)); border-radius: var(--radio); min-height: 0; overflow: hidden; display: grid; grid-template-rows: 1fr; /* una sola zona: la galería de fotos */ } /* Esquinas en ángulo tipo interfaz de mira/HUD. */ .viewer::before, .viewer::after { content: ""; position: absolute; width: 26px; height: 26px; pointer-events: none; border: 2px solid var(--acento); opacity: .85; } .viewer::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; } .viewer::after { bottom: 10px; right: 10px; border-left: 0; border-top: 0; } .viewer-tabs { display: flex; gap: 4px; padding: 12px 14px 0; } .tab-btn { background: transparent; border: 1px solid var(--linea); border-bottom: 0; color: var(--tenue); font: inherit; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; padding: 8px 18px; border-radius: 8px 8px 0 0; cursor: pointer; font-family: "Consolas", monospace; } .tab-btn.active { color: #fff; border-color: color-mix(in srgb, var(--acento) 50%, var(--linea)); background: color-mix(in srgb, var(--acento) 10%, transparent); } .viewer-body { position: relative; min-height: 0; } .tab-pane { position: absolute; inset: 0; display: none; } .tab-pane.active { display: grid; } /* --- Pestaña FOTOS: imagen grande + tira de miniaturas --- */ #pane-fotos { grid-template-rows: 1fr auto; padding: 16px; gap: 12px; } .foto-main { min-height: 0; display: grid; place-items: center; border-radius: 10px; overflow: hidden; background: #04050a; } .foto-main img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; animation: pop .35s ease; /* pequeña aparición al cambiar de avatar */ } @keyframes pop { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: scale(1); } } /* Placeholder cuando una imagen aún no existe en disco. */ .foto-faltante { width: 100%; height: 100%; display: grid; place-content: center; gap: 8px; text-align: center; border: 1.5px dashed color-mix(in srgb, var(--acento) 40%, var(--linea)); border-radius: 10px; color: var(--tenue); font-family: "Consolas", monospace; } .foto-faltante .big { font-size: 40px; color: color-mix(in srgb, var(--acento) 70%, #fff); } .thumbs { display: flex; gap: 8px; flex: none; } .thumb { width: 54px; height: 54px; border-radius: 8px; overflow: hidden; cursor: pointer; border: 1px solid var(--linea); background: #04050a; padding: 0; flex: none; } .thumb img { width: 100%; height: 100%; object-fit: cover; } .thumb.active { border-color: var(--acento); box-shadow: 0 0 12px color-mix(in srgb, var(--acento) 55%, transparent); } /* --- Pestaña 3D: placeholder con cubo wireframe girando --- */ #pane-3d { place-items: center; align-content: center; gap: 18px; text-align: center; } .cube-stage { width: 120px; height: 120px; perspective: 600px; } .cube { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; animation: spin 7s linear infinite; /* baja el 7s para girar más rápido */ } .cube div { position: absolute; inset: 0; border: 1.5px solid var(--acento); background: color-mix(in srgb, var(--acento) 8%, transparent); box-shadow: inset 0 0 24px color-mix(in srgb, var(--acento) 25%, transparent); } .cube .f1 { transform: rotateY(0deg) translateZ(60px); } .cube .f2 { transform: rotateY(90deg) translateZ(60px); } .cube .f3 { transform: rotateY(180deg) translateZ(60px); } .cube .f4 { transform: rotateY(270deg) translateZ(60px); } .cube .f5 { transform: rotateX(90deg) translateZ(60px); } .cube .f6 { transform: rotateX(-90deg) translateZ(60px); } @keyframes spin { to { transform: rotateX(-25deg) rotateY(360deg); } } .pane3d-title { font-family: "Consolas", monospace; letter-spacing: 4px; color: #fff; font-size: 14px; } .pane3d-note { color: var(--tenue); font-size: 12px; max-width: 360px; line-height: 1.5; } /* ---- Detalles inferiores: descripción + tags ---- */ .details { background: var(--bg2); border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px 18px; display: grid; gap: 12px; } .details .desc { color: var(--tenue); line-height: 1.6; font-size: 14px; } .tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; } .tags li { font-family: "Consolas", monospace; font-size: 11px; letter-spacing: 1px; padding: 5px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--acento) 35%, var(--linea)); color: color-mix(in srgb, var(--acento) 75%, #fff); background: color-mix(in srgb, var(--acento) 8%, transparent); } /* ---- Responsive: en pantallas estrechas el menú pasa arriba ---- */ @media (max-width: 900px) { body { overflow: auto; } #app { grid-template-columns: 1fr; grid-template-rows: none; height: auto; } .menu { flex-direction: row; flex-wrap: wrap; } .side-link { margin-top: 8px; } .stage { grid-template-columns: 1fr; height: auto; overflow: visible; } .info-col { overflow: visible; } .viewer { min-height: 64vh; } } /* ========================================================================== PÁGINA "SOBRE MÍ" (sobre-mi.html) ========================================================================== */ body.about { /* Colores neón propios de esta página (aquí no hay avatar que los cambie). Cámbialos para recolorear toda la página personal. */ --acento: #8a6bff; /* violeta cyberpunk */ --acento2: #46e0ff; /* cian de apoyo */ overflow: auto; /* esta página sí hace scroll */ display: block; } .about-wrap { max-width: 1000px; margin: 0 auto; padding: 40px 24px 90px; position: relative; z-index: 1; } /* ===== Panel "Sobre mí" dentro de la galería (se abre sin recargar) ===== Va por encima de la galería (z-index 70). Lo activa/desactiva app.js con la clase .open. Tiene su propio tema violeta y su propio scroll. */ .about-panel { position: fixed; inset: 0; z-index: 70; --acento: #8a6bff; --acento2: #46e0ff; /* tema violeta del panel */ background: radial-gradient(1000px 700px at 50% 0%, #14121f, #06070d 75%); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility .3s ease; } .about-panel.open { opacity: 1; visibility: visible; pointer-events: auto; } .about-scroll { position: relative; z-index: 1; height: 100%; overflow-y: auto; max-width: 1000px; margin: 0 auto; padding: 40px 24px 90px; } .about-close { cursor: pointer; } /* Fondo del panel: el motivo de cada avatar en su color. Detrás del contenido. */ .about-decor { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .about-emoji { position: absolute; transform: translate(-50%, -50%); /* centra el motivo en su punto */ color: var(--acento); will-change: transform; /* el script lo recolorea por avatar */ animation: floaty var(--dur, 22s) ease-in-out infinite; /* reusa el flote del fondo de la galería */ } .about-emoji svg { width: 100%; height: 100%; display: block; } .about-emoji path { fill: currentColor; fill-rule: evenodd; } /* evenodd: huecos (ojos) bien */ @media (prefers-reduced-motion: reduce) { .about-emoji { animation: none; } } /* Botón "Volver a la galería": estilo de botón con borde+fondo+brillo para que se note bien. En hover se desplaza a la izquierda (sensación de "volver"). Sube el % del background/box-shadow para hacerlo aún más llamativo. */ .back-link { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 26px; padding: 12px 22px; border-radius: 10px; color: #fff; text-decoration: none; font-weight: 700; font-family: "Consolas", monospace; font-size: 14px; letter-spacing: 1px; background: color-mix(in srgb, var(--acento) 20%, transparent); border: 1px solid var(--acento); box-shadow: 0 0 18px color-mix(in srgb, var(--acento) 45%, transparent); transition: transform .12s, box-shadow .2s, background .2s; } .back-link:hover { color: #fff; transform: translateX(-4px); background: color-mix(in srgb, var(--acento) 30%, transparent); box-shadow: 0 0 30px color-mix(in srgb, var(--acento) 70%, transparent); } /* --- Tarjeta de perfil --- */ .profile-card { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start; background: linear-gradient(180deg, var(--bg2), #080a12); border: 1px solid color-mix(in srgb, var(--acento) 28%, var(--linea)); border-radius: var(--radio); padding: 28px; position: relative; overflow: hidden; } .profile-card::before { /* resplandor decorativo de fondo */ content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px 220px at 90% -20%, color-mix(in srgb, var(--acento) 22%, transparent), transparent 70%); } .avatar { position: relative; } .avatar img { width: 150px; height: 150px; border-radius: 20px; object-fit: cover; display: block; border: 2px solid var(--acento); box-shadow: 0 0 30px color-mix(in srgb, var(--acento) 50%, transparent); } .avatar.broken::after { /* si la foto no carga (sin internet) */ content: "miru"; display: grid; place-content: center; width: 150px; height: 150px; border-radius: 20px; border: 2px solid var(--acento); color: var(--acento); font: 700 22px "Consolas", monospace; } .profile-main h1 { font-size: 34px; color: #fff; line-height: 1.1; text-shadow: 0 0 18px color-mix(in srgb, var(--acento) 60%, transparent); } .profile-main .handle { font-size: 14px; color: var(--acento); font-family: "Consolas", monospace; letter-spacing: 1px; } .tagline { margin-top: 6px; color: var(--acento2); font-size: 15px; } .bio { margin-top: 14px; color: var(--tenue); line-height: 1.7; font-size: 14px; max-width: 60ch; } .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .chips span { font-family: "Consolas", monospace; font-size: 11px; letter-spacing: 1px; padding: 5px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--acento) 35%, var(--linea)); color: color-mix(in srgb, var(--acento) 75%, #fff); background: color-mix(in srgb, var(--acento) 8%, transparent); } .socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .social { font-family: "Consolas", monospace; font-size: 13px; cursor: pointer; padding: 10px 16px; border-radius: 10px; text-decoration: none; border: 1px solid color-mix(in srgb, var(--acento) 40%, var(--linea)); background: color-mix(in srgb, var(--acento) 8%, transparent); color: var(--texto); transition: transform .1s, box-shadow .2s, background .2s; } .social:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--acento) 16%, transparent); box-shadow: 0 0 20px color-mix(in srgb, var(--acento) 45%, transparent); } /* --- Sección de proyectos --- */ .projects { margin-top: 34px; } .projects h2 { font-family: "Consolas", monospace; font-size: 13px; letter-spacing: 3px; color: var(--tenue); text-transform: uppercase; margin-bottom: 14px; } .project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; } .project { display: block; text-decoration: none; background: var(--bg2); border: 1px solid var(--linea); border-radius: 12px; padding: 18px; transition: transform .1s, border-color .2s, box-shadow .2s; } .project:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--acento) 45%, var(--linea)); box-shadow: 0 0 24px color-mix(in srgb, var(--acento) 18%, transparent); } .project h3 { color: #fff; font-size: 16px; margin-bottom: 6px; } .project p { color: var(--tenue); font-size: 13px; line-height: 1.55; } @media (max-width: 620px) { .profile-card { grid-template-columns: 1fr; justify-items: center; text-align: center; } .bio { text-align: left; } } /* ========================================================================== INTRO / PRESENTACIÓN (se muestra al abrir index.html — ver intro.js) ========================================================================== */ .intro { /* Colores neón de la marca (independientes del avatar). Cámbialos para recolorear el logo de la intro. */ --in1: #ff4fd8; /* magenta */ --in2: #5ad0ff; /* cian */ position: fixed; inset: 0; z-index: 100; /* por encima de todo */ display: grid; place-items: center; background: radial-gradient(1000px 700px at 50% 42%, #161324, #05060c 72%); cursor: pointer; overflow: hidden; /* Es una pantalla de inicio: NO se cierra sola (se pasa con el botón ENTRAR). El