/* ========================================================= TOKENS ========================================================= */ :root{ --bg: #0B0C10; --bg-panel: #14161C; --bg-panel-2: #191B22; --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.14); --text: #F2F3F5; --text-muted: #8A8F9C; --red: #E8384F; --red-dim: rgba(232,56,79,0.14); --blue: #3E8FFF; --blue-dim: rgba(62,143,255,0.14); --gold: #E3B341; --gold-dim: rgba(227,179,65,0.14); --font-display: 'Space Grotesk', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; --radius: 14px; --container: 1240px; --ease: cubic-bezier(.2,.7,.3,1); } *{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ color:var(--text); font-family:var(--font-body); line-height:1.5; overflow-x:hidden; min-height:100vh; display:flex; flex-direction:column; } body > *{ width:100%; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul{ list-style:none; } .eyebrow{ font-family:var(--font-mono); font-size:0.75rem; letter-spacing:0.14em; color:var(--red); margin-bottom:10px; } .section-title{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.8rem, 3vw, 2.4rem); letter-spacing:0.01em; } /* ========================================================= FONDO ANIMADO — el mismo patrón hexagonal de tu about_me original. OPTIMIZACIÓN DE RENDIMIENTO (visualmente 100% idéntico): antes esto vivía en , animando "background-position". Como mide lo alto que sea TODA la página, el navegador tenía que repintar esa altura completa en cada fotograma de la animación — en páginas largas como about.html (con Skills, Studio Contributions y Achievements apiladas) eso se notaba como lag al hacer scroll. Ahora el patrón vive en un ::before fijo del tamaño de la pantalla (no de toda la página) y la animación mueve ese ::before con "transform" en vez de "background-position". El patrón es infinito y uniforme (sin ningún punto de referencia fijo), así que da exactamente el mismo resultado visual en cualquier posición de scroll — pero ahora la GPU solo compone una capa del tamaño de la ventana, sin repintar nada, así que no cuesta más en una página larga que en una corta. El "overscan" (top/left/right/bottom negativos) es un poco más grande que la propia animación para que nunca se vea un borde sin patrón al desplazarse. ========================================================= */ .hero-bg{ pointer-events:none; } html{ background-color:var(--bg); } body::before{ content:""; position:fixed; top:-160px; left:-100px; right:-100px; bottom:-160px; z-index:-1; pointer-events:none; background-image: repeating-linear-gradient(120deg, rgba(255,255,255,0.09) 1px, transparent 2px 78px), repeating-linear-gradient(60deg, rgba(255,255,255,0.09) 1px, transparent 2px 78px), repeating-linear-gradient(0deg, rgba(255,255,255,0.07) 1px, transparent 2px 78px); background-size: 92px 156px; background-position: 0 0, 46px 78px, 0 0; animation: hex-bg 14s linear infinite; will-change: transform; } @keyframes hex-bg { 0% { transform:translate3d(0, 0, 0); } 100% { transform:translate3d(92px, 156px, 0); } } /* ========================================================= BUTTONS ========================================================= */ .btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:0.8rem; letter-spacing:0.06em; padding:13px 24px; border-radius:8px; border:1px solid var(--border-strong); transition:transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease); white-space:nowrap; cursor:pointer; background:transparent; color:var(--text); font-family:var(--font-mono); appearance:none; -webkit-appearance:none; } .btn:hover{ transform:translateY(-2px) scale(1.06); } .btn-primary{ background:var(--red); border-color:var(--red); color:#fff; box-shadow:0 0 0 rgba(232,56,79,0); } .btn-primary:hover{ box-shadow:0 8px 24px rgba(232,56,79,0.35); } .btn-outline{ background:transparent; border-color:var(--border-strong); color:var(--text); } .btn-outline:hover{ border-color:var(--red); color:var(--red); } .btn-ghost{ background:transparent; border-color:var(--border); color:var(--text-muted); } .btn-ghost:hover{ color:var(--text); border-color:var(--border-strong); } .btn-lg{ padding:16px 30px; font-size:0.85rem; } .btn-sm{ padding:9px 16px; font-size:0.72rem; } .btn-block{ width:100%; justify-content:center; } /* ========================================================= NAVBAR ========================================================= */ .navbar{ position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:14px clamp(20px, 4vw, 48px); border-bottom:1px solid transparent; transition:border-color .3s var(--ease); } /* El fondo difuminado vive en un ::before propio, en vez de ir directamente en .navbar, a propósito: "backdrop-filter" (igual que "transform" o "filter") convierte al elemento que lo lleva en el "contenedor" de referencia para cualquier hijo con position:fixed. #navLinks es position:fixed y vive DENTRO de .navbar — con el backdrop-filter puesto directamente en .navbar, el menú móvil dejaba de posicionarse respecto a toda la pantalla y pasaba a calcularse respecto a la propia barra de navegación (que solo mide ~64px de alto), así que al abrirlo quedaba comprimido en una tira minúscula en vez de ocupar la pantalla — exactamente el "desastre" que se ve en el vídeo. Moviendo el blur a un ::before (que no es antecesor de #navLinks, así que no cuenta como su contenedor) se consigue el mismo efecto visual sin romper el menú. */ .navbar::before{ content:""; position:absolute; inset:0; z-index:-1; background:rgba(11,12,16,0.6); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); transition:background .3s var(--ease); } .navbar.scrolled{ border-bottom-color:var(--border); } .navbar.scrolled::before{ background:rgba(11,12,16,0.85); } .logo_Raki{ display:flex; align-items:center; gap:12px; transition:transform .2s var(--ease); } .logo_Raki:hover{ transform:scale(1.06); } .logo_Raki img{ width:38px; height:38px; object-fit:contain; } .logo-text{ display:flex; flex-direction:column; line-height:1.1; } .logo-name{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; letter-spacing:0.03em; } .logo-role{ font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.12em; color:var(--red); } .nav-links{ display:flex; align-items:center; gap:22px; } .nav-links a{ display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:0.74rem; letter-spacing:0.06em; color:var(--text-muted); transition:color .2s var(--ease), transform .2s var(--ease); white-space:nowrap; } .nav-links a img{ width:16px; height:16px; object-fit:contain; opacity:.8; } .nav-links a:hover{ color:var(--text); transform:scale(1.08); } .nav-links a.active{ color:var(--red); } .nav-cta{ margin-left:6px; } .hamburger{ display:none; flex-direction:column; gap:5px; background:none; border:none; appearance:none; -webkit-appearance:none; cursor:pointer; padding:6px; } .hamburger span{ width:24px; height:2px; background:var(--text); transition:transform .25s var(--ease), opacity .25s var(--ease); } .hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2){ opacity:0; } .hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } /* ========================================================= HERO (home) ========================================================= */ .hero{ position:relative; padding:clamp(50px,8vw,90px) clamp(20px,5vw,64px) 60px; overflow:hidden; } .hero-bg{ position:absolute; inset:0; background: radial-gradient(ellipse 60% 55% at 82% 30%, var(--blue-dim), transparent 60%), radial-gradient(ellipse 45% 45% at 20% 75%, var(--red-dim), transparent 60%); z-index:-1; will-change:transform; } .hero-inner{ max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:1.05fr 0.95fr; align-items:center; gap:40px; } .hero-title{ font-family:var(--font-display); font-weight:700; font-size:clamp(3.2rem, 9vw, 6rem); line-height:0.95; letter-spacing:0.01em; } .hero-role{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.3rem, 3vw, 1.7rem); color:var(--red); letter-spacing:0.12em; margin-top:6px; } .hero-tags{ font-family:var(--font-mono); font-size:0.85rem; color:var(--text-muted); letter-spacing:0.04em; margin:20px 0 30px; } .hero-tags .dot{ color:var(--red); margin:0 4px; } /* Reveal escalonado del hero: el bloque en sí ya no se desvanece como unidad (se anula su propio .reveal), en su lugar cada hijo directo (eyebrow, título, rol, tags, botón, iconos sociales) aparece uno detrás de otro cuando el bloque entra en pantalla. */ .hero-copy.reveal{ opacity:1; transform:none; } .hero-copy > *{ opacity:0; transform:translateY(14px); transition:opacity .55s var(--ease), transform .55s var(--ease); } .hero-copy.visible > *{ opacity:1; transform:none; } .hero-copy.visible > *:nth-child(1){ transition-delay:0ms; } .hero-copy.visible > *:nth-child(2){ transition-delay:90ms; } .hero-copy.visible > *:nth-child(3){ transition-delay:170ms; } .hero-copy.visible > *:nth-child(4){ transition-delay:250ms; } .hero-copy.visible > *:nth-child(5){ transition-delay:330ms; } .hero-copy.visible > *:nth-child(6){ transition-delay:410ms; } /* El personaje aparece justo después del texto */ .hero-art{ transition-delay:460ms; } .social-row{ display:flex; gap:14px; margin-top:28px; } .social-row a{ width:38px; height:38px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:8px; transition:border-color .2s var(--ease), transform .2s var(--ease); } .social-row a:hover{ border-color:var(--red); transform:translateY(-2px); } .social-row img{ width:18px; height:18px; object-fit:contain; } .hero-art{ position:relative; display:flex; justify-content:center; align-items:center; } .hero-art-glow{ position:absolute; width:70%; height:70%; background:radial-gradient(circle, var(--blue-dim), transparent 65%); filter:blur(10px); z-index:0; animation:hero-glow-float 7s ease-in-out infinite; } @keyframes hero-glow-float{ 0%, 100%{ transform:translate3d(0,0,0); } 50%{ transform:translate3d(0,-10px,0); } } .hero-character{ position:relative; z-index:1; max-width:420px; width:100%; filter:drop-shadow(0 20px 50px rgba(0,0,0,0.55)); will-change:transform; } /* ========================================================= PAGE HERO — cabecera pequeña para páginas internas (Portfolio, Challenges, Availability, Payment, Contact...) ========================================================= */ .page-hero{ max-width:var(--container); margin:0 auto; padding:56px clamp(20px,5vw,64px) 20px; } .page-hero .section-title{ font-size:clamp(2.2rem, 5vw, 3.2rem); } .page-hero p.lede{ color:var(--text-muted); max-width:640px; margin-top:14px; font-size:1rem; } /* Mismo criterio que en el Hero de index: el bloque no se desvanece como unidad, sus hijos (eyebrow, título, lede) aparecen uno detrás de otro. */ .page-hero.reveal{ opacity:1; transform:none; } .page-hero > *{ opacity:0; transform:translateY(14px); transition:opacity .55s var(--ease), transform .55s var(--ease); } .page-hero.visible > *{ opacity:1; transform:none; } .page-hero.visible > *:nth-child(1){ transition-delay:0ms; } .page-hero.visible > *:nth-child(2){ transition-delay:100ms; } .page-hero.visible > *:nth-child(3){ transition-delay:200ms; } .back-link{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:0.78rem; color:var(--text-muted); letter-spacing:0.05em; transition:color .2s var(--ease); } .back-link:hover{ color:var(--red); } /* ========================================================= PORTFOLIO GRID (usado en index.html y portfolio.html) ========================================================= */ .portfolio{ max-width:var(--container); margin:60px auto; padding:0 clamp(20px,5vw,64px); } .section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:28px; flex-wrap:wrap; } .portfolio-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; perspective:1000px; } .project-card{ position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); background:var(--bg-panel); aspect-ratio:4/3; transition:border-color .25s var(--ease), transform .2s ease-out, box-shadow .25s var(--ease); cursor:pointer; will-change:transform; } .project-card.featured{ grid-column:span 2; } .project-card:not(.featured){ grid-column:span 1; } .portfolio-divider{ grid-column:1 / -1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; margin:24px 0 8px; } .portfolio-divider h3{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing:0.04em; text-transform:uppercase; } .portfolio-divider-line{ display:block; width:min(320px, 60%); height:1px; background:var(--border); } /* Separador DENTRO de la galería de un proyecto (project.html), para marcar el inicio de un grupo (ej. "Animation 2D", "Rigging"...). A diferencia de .portfolio-divider (centrado, para el grid), este va alineado a la izquierda, como en la referencia del usuario. */ .project-divider{ display:flex; flex-direction:column; gap:8px; margin:22px 0 4px; } .project-divider h3{ font-family:var(--font-display); font-weight:700; font-size:1.4rem; letter-spacing:0.01em; color:var(--text); } .project-divider-line{ display:block; width:100%; max-width:260px; height:1px; background:var(--border-strong); } /* Entrada propia de las tarjetas del portfolio: en vez del fade genérico de .reveal, cada tarjeta "cae" con una ligera rotación que alterna de lado según sea par/impar — sensación de avanzar pieza a pieza por el portfolio en vez de un fade plano. */ @keyframes card-enter{ from{ opacity:0; transform:translateY(34px) scale(0.92) rotate(var(--card-rot, -2.2deg)); } to{ opacity:1; transform:translateY(0) scale(1) rotate(0deg); } } .project-card.reveal{ opacity:0; transform:none; } .project-card.reveal:nth-child(even){ --card-rot: 2.2deg; } .project-card.reveal.visible{ animation:card-enter .7s var(--ease) forwards; } .project-card img, .project-card video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); } .project-card:hover img, .project-card:hover video{ transform:scale(1.06); } .project-card:hover{ border-color:var(--border-strong); box-shadow:0 14px 34px -18px rgba(232,56,79,0.4); } .project-overlay{ position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.15) 55%, transparent 100%); display:flex; flex-direction:column; justify-content:flex-end; padding:18px; } .project-overlay h3{ font-family:var(--font-display); font-size:1rem; letter-spacing:0.03em; } .project-overlay p{ font-family:var(--font-mono); font-size:0.72rem; color:var(--red); margin-top:4px; letter-spacing:0.04em; } /* ========================================================= PROJECT DETAIL — estilo ArtStation: imágenes apiladas a la izquierda, panel fijo a la derecha ========================================================= */ .project-layout{ max-width:var(--container); margin:0 auto; padding:24px clamp(20px,5vw,64px) 100px; display:grid; grid-template-columns:1fr 320px; gap:44px; align-items:start; } .project-images{ display:flex; flex-direction:column; gap:6px; } .project-images img, .project-images video{ width:100%; border-radius:8px; border:1px solid var(--border); } /* Fila con dos (o más) piezas lado a lado, mismo alto: la pieza más ancha marca la altura y la(s) más pequeña(s) se recortan (cover) para encajar en su columna sin deformarse. Pensado para casos como "quiero este vídeo pequeño junto a este otro más grande". Si quieres cambiar la proporción entre columnas, ajusta grid-template-columns más abajo. */ .project-row{ display:flex; align-items:stretch; gap:6px; /* Altura fija por defecto (como antes), para filas normales de vídeos/imágenes recortadas. Cuando la fila incluye una pieza marcada con fit:"contain" (ej. un cartel), esta altura se desactiva más abajo y es esa pieza la que manda. */ height:clamp(240px, 32vw, 480px); } .project-row:has(.fit-contain){ height:auto; } .project-row img, .project-row video{ border-radius:8px; border:1px solid var(--border); object-fit:cover; flex:1 1 0; min-width:0; width:100%; } /* La primera pieza de la fila siempre ocupa la columna estrecha y la segunda la ancha (misma proporción en TODAS las filas, tengan o no una pieza fit:"contain", para que se vean consistentes entre sí). */ .project-row > :first-child{ flex:0 0 clamp(180px, 32%, 340px); } /* Piezas marcadas con fit:"contain" (ej. carteles con texto): marcan la altura de toda la fila (se ven completas, sin recortar) y el resto de piezas de la fila se estiran para igualar esa altura, recortándose ellas en su lugar. Así no queda ningún hueco negro. */ .project-row img.fit-contain, .project-row video.fit-contain{ object-fit:contain; background:#0b0c10; } /* Un recuadro que rota entre imágenes ([ "a","b" ]) también puede ir dentro de una fila: se comporta igual que el resto de piezas (misma altura, recortado). */ .project-row .project-image-rotator{ flex:1 1 0; min-width:0; height:100%; } .project-row .project-image-rotator .rotator-base, .project-row .project-image-rotator img.is-incoming{ height:100%; object-fit:cover; } .project-side{ position:sticky; top:90px; display:flex; flex-direction:column; gap:20px; } .artist-card{ display:flex; align-items:center; gap:12px; background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius); padding:14px; } .artist-card img{ width:46px; height:46px; border-radius:50%; object-fit:cover; border:2px solid var(--red); } .artist-card .artist-name{ font-family:var(--font-display); font-weight:700; font-size:0.95rem; } .artist-card .artist-role{ font-family:var(--font-mono); font-size:0.7rem; color:var(--text-muted); } .project-title{ font-family:var(--font-display); font-weight:700; font-size:1.6rem; line-height:1.15; } .project-category{ font-family:var(--font-mono); font-size:0.78rem; color:var(--red); margin-top:8px; letter-spacing:0.04em; } .project-description{ color:var(--text-muted); font-size:0.92rem; margin-top:14px; } .project-description a{ color:#4da3ff; text-decoration:underline; text-underline-offset:2px; } .project-description a:hover{ color:#7cbcff; } .tag-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; } .tag{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.05em; color:var(--text-muted); border:1px solid var(--border); border-radius:6px; padding:5px 10px; } .project-nav-buttons{ display:flex; gap:10px; margin-top:6px; } .project-nav-buttons .btn{ flex:1; } @media (max-width: 900px){ .project-layout{ grid-template-columns:1fr; } .project-side{ position:static; order:-1; } } /* ========================================================= ABOUT + SERVICES (home) ========================================================= */ .split-section{ max-width:var(--container); margin:80px auto; padding:0 clamp(20px,5vw,64px); display:grid; grid-template-columns:0.9fr 1.1fr; gap:50px; } .about-body{ display:flex; align-items:center; gap:20px; margin:20px 0 26px; } .about-avatar{ width:88px; height:88px; border-radius:50%; object-fit:cover; border:2px solid var(--red); padding:3px; } .about-text{ color:var(--text-muted); font-size:0.95rem; } /* Logo decorativo: se queda en el flujo normal justo donde estaba (así el botón "MORE ABOUT ME" no se mueve ni un píxel), pero se desplaza visualmente hacia la derecha con "transform" — eso no afecta la posición de ningún otro elemento de la página — para caer en el hueco marcado, y gira sobre sí mismo, en el sitio, en sentido de las agujas del reloj, sin parar. Solo gira esta imagen. */ .about-decor-spin{ --decor-shift: 150px; display:block; width:220px; height:220px; object-fit:contain; margin:44px 0 0 0; transform:translateX(var(--decor-shift)); opacity:0.9; pointer-events:none; animation:about-decor-spin 10s linear infinite; } @keyframes about-decor-spin{ from{ transform:translateX(var(--decor-shift)) rotate(0deg); } to{ transform:translateX(var(--decor-shift)) rotate(360deg); } } @media (max-width: 1024px){ .about-decor-spin{ --decor-shift: 0px; margin:30px auto 0; width:170px; height:170px; } } /* A propósito NO se desactiva con prefers-reduced-motion (igual que el barrido de fondo del CTA más abajo en este archivo): el autor de la web quiere que este logo siempre esté girando. */ .service-cards{ display:grid; gap:14px; margin-top:20px; } .service-card{ background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius); padding:22px; transition:border-color .25s var(--ease), transform .25s var(--ease); } .service-card:hover{ transform:translateY(-3px); } .service-card.accent-red:hover{ border-color:var(--red); box-shadow:0 12px 28px -16px rgba(232,56,79,0.45); } .service-card.accent-blue:hover{ border-color:var(--blue); box-shadow:0 12px 28px -16px rgba(62,143,255,0.45); } .service-icon{ width:38px; height:38px; margin-bottom:14px; } .service-card.accent-red .service-icon{ color:var(--red); } .service-card.accent-blue .service-icon{ color:var(--blue); } .service-icon svg{ width:100%; height:100%; } .service-card h3{ font-family:var(--font-display); font-size:0.95rem; letter-spacing:0.04em; margin-bottom:8px; } .service-card p{ color:var(--text-muted); font-size:0.86rem; } /* ========================================================= PÁGINA: ABOUT ME (completa) ========================================================= */ /* Envoltorio de "ABOUT ME": agrupa el page-hero y el about-page para que compartan un mismo fondo con resplandor, recortado con overflow:hidden igual que .hero en la home (así el brillo se ve completo y suave, no cortado). */ .about-hero-wrap{ position:relative; overflow:hidden; } .about-hero-bg{ position:absolute; inset:0; background: radial-gradient(ellipse 55% 55% at 20% 65%, var(--red-dim), transparent 60%), radial-gradient(ellipse 60% 55% at 82% 35%, var(--blue-dim), transparent 60%); z-index:-1; pointer-events:none; will-change:transform; } .about-page{ max-width:var(--container); margin:0 auto; padding:20px clamp(20px,5vw,64px) 90px; display:grid; grid-template-columns:0.85fr 1.15fr; gap:60px; align-items:center; position:relative; } .about-page-art{ position:relative; display:flex; justify-content:center; } .about-page-art img{ max-width:340px; width:100%; filter:drop-shadow(0 20px 50px rgba(0,0,0,0.55)); } .about-page-text p{ color:var(--text-muted); margin-top:16px; font-size:0.98rem; } .stat-row{ display:flex; gap:30px; margin-top:30px; flex-wrap:wrap; } .stat-row .stat-num{ font-family:var(--font-display); font-weight:700; font-size:1.8rem; color:var(--red); } .stat-row .stat-label{ font-family:var(--font-mono); font-size:0.7rem; color:var(--text-muted); letter-spacing:0.05em; } @media (max-width: 900px){ .about-page{ grid-template-columns:1fr; text-align:center; } .about-page-art{ order:-1; } .stat-row{ justify-content:center; } } /* ========================================================= PÁGINA: ABOUT ME — SKILLS & SOFTWARE (cajas de categorías + tira de iconos en movimiento continuo) ========================================================= */ .skills-section{ max-width:var(--container); margin:0 auto; padding:20px clamp(20px,5vw,64px) 30px; } .skills-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-top:26px; } .skill-card{ background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius); padding:26px 24px; transition:border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); } .skill-card:hover{ border-color:var(--red); transform:translateY(-3px); box-shadow:0 12px 28px -16px rgba(232,56,79,0.4); } .skill-card h3{ font-family:var(--font-display); font-weight:700; font-size:1.2rem; letter-spacing:0.02em; margin:0 0 16px; text-align:center; } .skill-card .tag-row{ margin-top:0; } /* Tira de iconos que se desplaza sola hacia la izquierda sin parar (igual que en tu vídeo de referencia): fichas grandes, en escala de grises por defecto, que cobran color y se resaltan con un marco al pasar el ratón por encima. El "mask-image" difumina los dos extremos para que los iconos no aparezcan/desaparezcan de golpe en los bordes. script.js pinta la lista de SKILLS_MARQUEE dos veces seguidas dentro de este track; la animación mueve el track exactamente el 50% de su ancho total (= una vuelta completa de la lista original), así al llegar ahí lo que se ve es idéntico a como empezó y el bucle no se nota. El padding-top/bottom (en vez de dejar el track pegado al borde) es lo que evita que "overflow:hidden" recorte la ficha cuando sube con el hover — le da sitio de sobra para subir sin toparse con el borde del recuadro. */ .skills-marquee{ overflow:hidden; margin-top:10px; padding:18px 0 14px; -webkit-mask-image:linear-gradient(to right, transparent, black 8%, black 92%, transparent); mask-image:linear-gradient(to right, transparent, black 8%, black 92%, transparent); } .skills-marquee-track{ display:flex; align-items:center; gap:18px; width:max-content; /* La duración y la distancia del recorrido las fija script.js (--marquee-duration / --marquee-distance) según el ancho real de la pantalla y cuántas copias de la lista hacen falta para que nunca se vea un hueco. El "30s" y "50%" de aquí son solo un valor de respaldo por si el JS no llega a ejecutarse. */ animation:skills-marquee-scroll var(--marquee-duration, 30s) linear infinite; will-change:transform; } @keyframes skills-marquee-scroll{ from{ transform:translateX(0); } to{ transform:translateX(calc(-1 * var(--marquee-distance, 50%))); } } /* Cada ficha: por defecto en gris y algo apagada (igual que el vídeo), a todo color y con un marco alrededor al pasar el ratón por encima (o al enfocarla con teclado). "--badge-color" es el acento de ESE marco/glow — cada herramienta puede tener el suyo, se define en SKILLS_MARQUEE (portfolio-data.js). */ .skill-badge{ --badge-color: var(--text); display:flex; align-items:center; justify-content:center; width:110px; height:110px; flex-shrink:0; border-radius:16px; background:var(--bg-panel); border:1px solid transparent; filter:grayscale(1); opacity:0.55; transition:transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease), opacity .25s var(--ease); } a.skill-badge{ cursor:pointer; } .skill-badge:hover, .skill-badge:focus-visible{ transform:translateY(-4px); border-color:var(--badge-color); box-shadow:0 10px 26px -14px var(--badge-color); filter:grayscale(0); opacity:1; } .skill-badge .badge-glyph{ font-family:var(--font-display); font-weight:700; font-size:1.4rem; color:var(--text); } /* Icono con tu propia imagen (logo del programa), si la pusiste en "icon" dentro de SKILLS_MARQUEE (portfolio-data.js). Si no pones ninguna, el badge sigue mostrando las 2-3 letras (.badge-glyph) como hasta ahora — no hace falta rellenar todas a la vez, puedes ir sustituyéndolas de una en una. */ .skill-badge .badge-icon{ width:56%; height:56%; object-fit:contain; } /* A propósito NO se desactiva con prefers-reduced-motion (mismo criterio que el logo giratorio de about-decor-spin y el barrido de fondo del CTA en este mismo archivo): quieres que esta tira se mueva siempre para todo el mundo, sin depender de la configuración de accesibilidad del sistema de cada visitante. */ @media (max-width: 900px){ .skills-grid{ grid-template-columns:1fr 1fr; } } @media (max-width: 560px){ .skills-grid{ grid-template-columns:1fr; } } /* ========================================================= ABOUT ME — STUDIO CONTRIBUTIONS (misma tira de logos en movimiento continuo que la de "SKILLS & SOFTWARE" — mismas fichas .skill-badge, misma animación skills-marquee-scroll, pero con "animation-direction: reverse" para que se desplace hacia la DERECHA en vez de hacia la izquierda — con los logos de los estudios con los que has colaborado, justo encima de "Skills & Software") ========================================================= */ .studios-section{ max-width:var(--container); margin:60px auto; padding:0 clamp(20px,5vw,64px); } .studios-marquee{ overflow:hidden; margin-top:10px; padding:18px 0 14px; -webkit-mask-image:linear-gradient(to right, transparent, black 8%, black 92%, transparent); mask-image:linear-gradient(to right, transparent, black 8%, black 92%, transparent); } .studios-marquee-track{ display:flex; align-items:center; gap:18px; width:max-content; animation:skills-marquee-scroll var(--marquee-duration, 30s) linear infinite; animation-direction:reverse; will-change:transform; } /* Solo aquí (STUDIO CONTRIBUTIONS): el logo del estudio ocupa TODO el recuadro de la ficha, sin margen interior. Se sobreescriben las reglas genéricas de .skill-badge/.badge-icon (que dejan el icono al 56% para los programas de SKILLS & SOFTWARE) solo dentro de .studios-marquee-track, así esa sección no se ve afectada. */ .studios-marquee-track .skill-badge{ overflow:hidden; padding:0; } .studios-marquee-track .skill-badge .badge-icon{ width:100%; height:100%; object-fit:cover; } /* ========================================================= PÁGINA: ABOUT ME — ACHIEVEMENTS (logros/hitos agrupados en tarjetas, con icono, categoría y una lista de resultados marcados con check) ========================================================= */ .achievements-section{ max-width:var(--container); margin:0 auto; padding:20px clamp(20px,5vw,64px) 90px; } .achievements-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; margin-top:26px; } /* Solo en esta sección: "MILESTONES" en dorado, como sello de logro */ .achievements-section .eyebrow{ color:var(--gold); } .achievement-card{ background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius); padding:22px 24px; transition:border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); } .achievement-card:hover{ border-color:var(--gold); transform:translateY(-3px); box-shadow:0 12px 28px -16px rgba(227,179,65,0.4); } .achievement-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .achievement-title-group{ display:flex; align-items:center; gap:10px; min-width:0; } .achievement-icon{ width:34px; height:34px; flex-shrink:0; border-radius:8px; background:var(--gold-dim); display:flex; align-items:center; justify-content:center; font-size:1rem; } .achievement-card h3{ font-family:var(--font-display); font-weight:700; font-size:0.98rem; letter-spacing:0.01em; } .achievement-badge{ flex-shrink:0; font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.05em; padding:5px 12px; border-radius:20px; background:var(--gold-dim); color:var(--gold); white-space:nowrap; } .achievement-lead{ font-size:0.86rem; font-weight:600; color:var(--text); margin:12px 0 8px; } .achievement-list{ display:flex; flex-direction:column; gap:7px; margin-top:12px; } .achievement-card:has(.achievement-lead) .achievement-list{ margin-top:0; } .achievement-list li{ display:flex; align-items:flex-start; gap:9px; color:var(--text-muted); font-size:0.85rem; } /* Check (completado) y reloj (pendiente) — mismo dorado para que peguen entre sí */ .achv-status-icon{ width:15px; height:15px; flex-shrink:0; margin-top:2px; color:var(--gold); } @media (max-width: 720px){ .achievements-grid{ grid-template-columns:1fr; } .achievement-card-head{ flex-wrap:wrap; } } /* ========================================================= PÁGINA: CHALLENGES ========================================================= */ .challenge-grid{ max-width:var(--container); margin:0 auto; padding:20px clamp(20px,5vw,64px) 90px; display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; } .challenge-card{ position:relative; display:block; aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); background:var(--bg-panel); cursor:pointer; text-decoration:none; transition:border-color .25s var(--ease), transform .2s ease-out, box-shadow .25s var(--ease); } .challenge-card img, .challenge-card video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); } .challenge-card:hover img, .challenge-card:hover video{ transform:scale(1.06); } .challenge-card:hover{ border-color:var(--red); transform:translateY(-3px); box-shadow:0 12px 28px -16px rgba(232,56,79,0.4); } .challenge-overlay{ position:absolute; inset:0; background:linear-gradient(to top, rgba(8,9,13,0.92) 0%, rgba(8,9,13,0.72) 19%, rgba(8,9,13,0.55) 34%, rgba(8,9,13,0.39) 47%, rgba(8,9,13,0.28) 56.5%, rgba(8,9,13,0.2) 65%, rgba(8,9,13,0.13) 73%, rgba(8,9,13,0.08) 80.2%, rgba(8,9,13,0.04) 86.1%, rgba(8,9,13,0.015) 91%, rgba(8,9,13,0.003) 95.2%, rgba(8,9,13,0) 100%); display:flex; flex-direction:column; justify-content:flex-end; padding:22px; } .challenge-status{ position:absolute; top:14px; left:14px; display:inline-block; font-family:var(--font-mono); font-size:0.65rem; letter-spacing:0.06em; padding:4px 10px; border-radius:20px; text-shadow:none; backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); } .challenge-status.done{ background:rgba(8,8,11,0.6); color:var(--red); border:1px solid rgba(232,56,79,0.45); } .challenge-status.progress{ background:rgba(8,8,11,0.6); color:var(--gold); border:1px solid rgba(227,179,65,0.45); } .challenge-text{ position:relative; flex-shrink:0; margin:0 -22px -22px; padding:14px 22px 20px; } .challenge-overlay h3{ font-family:var(--font-display); font-size:1.05rem; margin-bottom:6px; color:var(--text); position:relative; z-index:1; text-shadow:0 1px 3px rgba(0,0,0,0.85), 0 2px 10px rgba(0,0,0,0.6); } .challenge-overlay p{ color:var(--text-muted); font-size:0.85rem; margin:0; position:relative; z-index:1; text-shadow:0 1px 3px rgba(0,0,0,0.85), 0 2px 10px rgba(0,0,0,0.6); } @media (max-width: 900px){ .challenge-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width: 560px){ .challenge-grid{ grid-template-columns:1fr; } } /* ========================================================= PÁGINA: AVAILABILITY ========================================================= */ .availability-panel{ max-width:900px; margin:0 auto; padding:20px clamp(20px,5vw,64px) 90px; } .status-banner{ display:flex; align-items:center; gap:14px; background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius); padding:20px 24px; margin-bottom:30px; } .status-dot{ width:12px; height:12px; border-radius:50%; background:#3ED598; box-shadow:0 0 0 4px rgba(62,213,152,0.18); flex-shrink:0; } .status-banner.busy .status-dot{ background:var(--red); box-shadow:0 0 0 4px var(--red-dim); } .status-banner strong{ font-family:var(--font-display); font-size:1rem; } .schedule-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:30px; } .schedule-card{ background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius); padding:22px 24px; transition:border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); } .schedule-card:hover{ border-color:var(--red); transform:translateY(-3px); box-shadow:0 12px 28px -16px rgba(232,56,79,0.4); } .schedule-head{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--border); } .schedule-label{ font-family:var(--font-mono); font-size:0.72rem; color:var(--red); letter-spacing:0.08em; } .schedule-time{ font-family:var(--font-display); font-size:0.95rem; color:var(--text); } .schedule-card p{ color:var(--text-muted); font-size:0.88rem; margin:0; } @media (max-width: 640px){ .schedule-grid{ grid-template-columns:1fr; } } .info-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; } .info-card{ background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius); padding:20px; transition:border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); } .info-card:hover{ border-color:var(--red); transform:translateY(-3px); box-shadow:0 12px 28px -16px rgba(232,56,79,0.4); } .info-card h4{ font-family:var(--font-mono); font-size:0.72rem; color:var(--red); letter-spacing:0.08em; margin-bottom:8px; } .info-card p{ color:var(--text-muted); font-size:0.88rem; } @media (max-width: 640px){ .info-grid{ grid-template-columns:1fr; } } /* ========================================================= PÁGINA: PAYMENT ========================================================= */ .pricing-grid{ max-width:800px; margin:0 auto; padding:20px clamp(20px,5vw,64px) 0; display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; } .pricing-card{ position:relative; background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius); padding:28px 24px; display:flex; flex-direction:column; gap:16px; transition:border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); } .pricing-card:hover{ transform:translateY(-4px); box-shadow:0 14px 30px -18px rgba(232,56,79,0.4); } .pricing-card.highlight{ border-color:var(--red); background:var(--bg-panel-2); } .pricing-card.highlight-gold{ border-color:var(--gold); background:var(--bg-panel-2); } .pricing-card.highlight-blue{ border-color:var(--blue); background:var(--bg-panel-2); } .pricing-card.highlight:hover{ box-shadow:0 14px 30px -18px rgba(232,56,79,0.4); } .pricing-card.highlight-gold:hover{ box-shadow:0 14px 30px -18px rgba(227,179,65,0.4); } .pricing-card.highlight-blue:hover{ box-shadow:0 14px 30px -18px rgba(62,143,255,0.4); } .pricing-badge{ position:absolute; top:0; right:20px; transform:translateY(-50%); font-family:var(--font-mono); font-size:0.62rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; padding:5px 12px; border-radius:999px; background:var(--red); color:#fff; white-space:nowrap; } .pricing-badge.badge-gold{ background:var(--gold); color:#1a1408; } .pricing-badge.badge-blue{ background:var(--blue); color:#fff; } .pricing-card h3{ font-family:var(--font-display); font-size:1.1rem; } .pricing-range{ display:block; font-family:var(--font-mono); font-size:0.68rem; color:var(--text-muted); letter-spacing:0.04em; margin-top:2px; } .pricing-price{ font-family:var(--font-display); font-weight:700; font-size:2rem; } .pricing-price span{ font-family:var(--font-mono); font-size:0.75rem; color:var(--text-muted); } .pricing-card ul{ display:flex; flex-direction:column; gap:8px; } .pricing-card li{ color:var(--text-muted); font-size:0.85rem; padding-left:18px; position:relative; } .pricing-card li::before{ content:"—"; position:absolute; left:0; color:var(--red); } .pricing-card .btn-block{ margin-top:auto; } .pricing-card.highlight-gold li::before{ color:var(--gold); } .pricing-card.highlight-gold .btn-primary{ background:var(--gold); border-color:var(--gold); color:#1a1408; } .pricing-card.highlight-gold .btn-primary:hover{ background:transparent; color:var(--gold); box-shadow:0 8px 24px rgba(227,179,65,0.35); } .pricing-card.highlight-blue li::before{ color:var(--blue); } .pricing-card.highlight-blue .btn-primary{ background:var(--blue); border-color:var(--blue); color:#fff; } .pricing-card.highlight-blue .btn-primary:hover{ background:transparent; color:var(--blue); box-shadow:0 8px 24px rgba(62,143,255,0.35); } .pricing-note{ max-width:800px; margin:24px auto 90px; padding:0 clamp(20px,5vw,64px); color:var(--text-muted); font-size:0.9rem; text-align:center; } @media (max-width: 900px){ .pricing-grid{ grid-template-columns:1fr; } } /* ========================================================= PÁGINA: CONTACT ========================================================= */ .contact-panel{ max-width:900px; margin:0 auto; padding:20px clamp(20px,5vw,64px) 100px; display:grid; grid-template-columns:1fr 1fr; gap:16px; } .contact-tile{ display:flex; align-items:center; gap:14px; background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius); padding:20px; transition:border-color .2s var(--ease), transform .2s var(--ease); } .contact-tile:hover{ border-color:var(--red); transform:translateY(-3px); box-shadow:0 12px 28px -16px rgba(232,56,79,0.4); } .contact-tile img{ width:26px; height:26px; object-fit:contain; } .contact-tile strong{ display:block; font-family:var(--font-display); font-size:0.95rem; } .contact-tile span{ display:block; color:var(--text-muted); font-size:0.78rem; margin-top:2px; } @media (max-width: 640px){ .contact-panel{ grid-template-columns:1fr; } } /* ========================================================= PÁGINA: EMAIL (email.html) — formulario de contacto real. No toca nada de la página CONTACT: es una sección aparte que reutiliza el mismo lenguaje visual (bg-panel, border, radius, colores de :root) y también reaprovecha ".contact-tile" para los dos enlaces rápidos de abajo (mailto / Discord). La "ventana de código" (.email-window) es un guiño al mundo dev/Roblox de Raki: una barra de título tipo editor con puntos de color y un nombre de archivo ("email_me.lua"), en los mismos tonos rojo/gris del resto del sitio (nada de verde/amarillo estilo macOS, para no romper la paleta). ========================================================= */ .email-section{ max-width:900px; margin:0 auto; padding:20px clamp(20px,5vw,64px) 100px; display:flex; flex-direction:column; gap:20px; } .email-window{ background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; } .email-window-bar{ display:flex; align-items:center; gap:8px; padding:14px 18px; background:var(--bg-panel-2); border-bottom:1px solid var(--border); } .email-dot{ width:10px; height:10px; border-radius:50%; background:var(--border-strong); flex-shrink:0; } .email-dot:first-child{ background:var(--red); } .email-window-title{ margin-left:6px; font-family:var(--font-mono); font-size:0.78rem; color:var(--text-muted); letter-spacing:0.02em; } .email-window-body{ padding:clamp(20px,4vw,32px); } .email-comment{ font-family:var(--font-mono); font-size:0.8rem; line-height:1.7; color:var(--text-muted); margin-bottom:26px; } .email-comment .tok-kw{ color:var(--red); } .email-form{ display:flex; flex-direction:column; gap:18px; } .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } .form-group{ display:flex; flex-direction:column; gap:8px; } .form-group label{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em; color:var(--red); } .form-group input, .form-group textarea{ width:100%; background:var(--bg); border:1px solid var(--border-strong); border-radius:8px; padding:12px 14px; color:var(--text); font-family:var(--font-body); font-size:0.9rem; transition:border-color .2s var(--ease), box-shadow .2s var(--ease); } .form-group textarea{ resize:vertical; min-height:130px; } .form-group input::placeholder, .form-group textarea::placeholder{ color:var(--text-muted); } .form-group input:focus, .form-group textarea:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 3px var(--red-dim); } .email-submit-row{ display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-top:6px; } .email-status{ font-family:var(--font-mono); font-size:0.8rem; color:var(--text-muted); } .email-status.is-success{ color:#3ED598; } .email-status.is-error{ color:var(--red); } .email-quicklinks{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } @media (max-width: 640px){ .form-row{ grid-template-columns:1fr; } .email-quicklinks{ grid-template-columns:1fr; } } /* ========================================================= CTA ========================================================= */ .cta{ /* OJO: antes tenía "width:100%" (heredado de "body > *") + márgenes fijos a los lados → el ancho total (100% + márgenes) se salía de la pantalla por la derecha. Con este cálculo, el ancho YA descuenta esos márgenes, y el "max-width" lo deja alineado con el resto de secciones de arriba (que usan el mismo --container). */ position:relative; width:calc(100% - (clamp(20px,5vw,64px) * 2)); max-width:var(--container); margin:40px auto 80px; padding:70px 30px; border-radius:var(--radius); overflow:hidden; text-align:center; background:var(--bg-panel); /* color de respaldo mientras cargan las imágenes de fondo */ border:1px solid var(--border); /* Aísla esta caja en su propia capa de composición: dentro coinciden dos animaciones a la vez (el fondo de triángulos del , que se repinta sin parar, y el carrete de imágenes recortado en esquinas redondeadas). Sin aislarla, el navegador recalcula ambas cosas juntas al hacer scroll y se nota un pequeño tirón justo aquí. "contain" + la promoción a capa propia evitan ese recálculo cruzado, sin cambiar nada visualmente. */ contain:paint; transform:translateZ(0); transition:border-color .3s var(--ease), box-shadow .3s var(--ease); } .cta:hover{ border-color:rgba(232,56,79,0.85); box-shadow:0 0 32px rgba(232,56,79,0.26), inset 0 0 32px rgba(232,56,79,0.06); } .cta-title{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.8rem, 4vw, 2.6rem); margin:8px 0 26px; } /* ========================================================= FONDO DEL CTA — "carrete" continuo, en bucle infinito Las rutas se configuran en portfolio-data.js (CTA_BACKGROUND_IMAGES), NO aquí ni en el index.html. Cómo funciona: script.js coloca las imágenes DOS VECES seguidas (la misma secuencia repetida) dentro de #ctaBg > .cta-bg-track, como un carrete: [...imágenes otra vez...][...imágenes...]. Cada imagen se muestra A SU TAMAÑO REAL (ancho 100%, alto según su proporción real) — NO se recorta ni se estira, y no se solapan entre sí: van pegadas, una justo debajo de la otra, tal cual. Una única animación LINEAL (velocidad constante) mueve ese carrete hacia arriba sin parar. Cuando ha subido exactamente lo que mide una "vuelta" completa (la mitad del carrete, que mide el doble por estar duplicado), lo que se ve es pixel por pixel idéntico a como empezó — así el bucle no se nota nunca y jamás cambia de sentido, siempre sube. Como ahora el alto de cada imagen depende de su proporción real (no de un porcentaje inventado), script.js espera a que las imágenes carguen, mide su alto real en píxeles y con eso calcula dónde debe empezar y terminar el barrido — por eso el carrete aparece con una pequeña transición de opacidad en cuanto está listo, en vez de arrancar de golpe. ========================================================= */ .cta-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; } .cta-bg-track{ position:absolute; top:0; left:0; width:100%; /* "--cta-scroll-from" y "--cta-scroll-to" los calcula script.js una vez conoce el alto real de las imágenes cargadas. */ animation:cta-bg-scroll 36s linear infinite; will-change:transform; opacity:0; transition:opacity .4s ease; } .cta-bg-track.is-ready{ opacity:1; } .cta-bg-track img{ display:block; width:100%; height:auto; /* tamaño real de la imagen, sin recortar */ max-width:none; /* pisa el "img{max-width:100%}" global del reset */ } @keyframes cta-bg-scroll{ 0% { transform:translateY(var(--cta-scroll-from, -75%)); } 100% { transform:translateY(var(--cta-scroll-to, -25%)); } } .cta-overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(rgba(8,9,12,0.88), rgba(8,9,12,0.92)); pointer-events:none; } .cta-content{ position:relative; z-index:2; } /* ========================================================= FOOTER ========================================================= */ .site-footer{ border-top:1px solid var(--border); padding-top:50px; margin-top:auto; } .footer-grid{ max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px; padding:0 clamp(20px,5vw,64px) 30px; } .footer-tagline{ color:var(--text-muted); font-size:0.85rem; margin-top:10px; } .footer-availability{ color:var(--text-muted); font-size:0.8rem; margin-top:6px; } .footer-col h4{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.1em; color:var(--red); margin-bottom:14px; } .footer-col a{ display:block; color:var(--text-muted); font-size:0.86rem; padding:5px 0; transition:color .2s var(--ease); } .footer-col a:hover{ color:var(--text); } .footer-bottom{ border-top:1px solid var(--border); padding:18px clamp(20px,5vw,64px); text-align:center; font-family:var(--font-mono); font-size:0.7rem; color:var(--text-muted); letter-spacing:0.05em; background:rgba(11,12,16,0.85); } /* ========================================================= SCROLL REVEAL ========================================================= */ .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); } .reveal.visible{ opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } .reveal{ opacity:1; transform:none; transition:none; } .project-card img, .btn, .service-card, .logo_Raki{ transition:none; } .project-card.reveal.visible{ animation:none; opacity:1; transform:none; } .project-card{ transform:none !important; } .hero-copy > *{ opacity:1; transform:none; transition:none; } .hero-art-glow{ animation:none; } .hero-character{ transform:none !important; } /* El barrido del fondo del CTA se deja siempre activo (a propósito NO se desactiva aquí), aunque el sistema pida reducir movimiento, porque así lo ha pedido el autor de la web. El resto de animaciones de la página sí sigue respetando esa preferencia de accesibilidad. */ } /* ========================================================= RESPONSIVE (general) ========================================================= */ @media (max-width: 1024px){ .hero-inner{ grid-template-columns:1fr; text-align:center; } .social-row{ justify-content:center; } .hero-character{ max-width:320px; margin-top:20px; } .split-section{ grid-template-columns:1fr; } .portfolio-grid{ grid-template-columns:repeat(2, 1fr); } .project-card.featured{ grid-column:span 2; } } @media (max-width: 768px){ .nav-links{ position:fixed; inset:64px 0 0 0; flex-direction:column; align-items:flex-start; gap:2px; padding:20px clamp(20px,5vw,64px); background:rgba(11,12,16,0.97); backdrop-filter:blur(14px); border-top:1px solid var(--border); transform:translateY(-12px); opacity:0; pointer-events:none; transition:opacity .25s var(--ease), transform .25s var(--ease); overflow-y:auto; } .nav-links.open{ transform:translateY(0); opacity:1; pointer-events:auto; } .nav-links a{ width:100%; padding:14px 0; border-bottom:1px solid var(--border); } .nav-cta{ margin:14px 0 0; width:100%; justify-content:center; } .hamburger{ display:flex; } .footer-grid{ grid-template-columns:1fr; gap:24px; } } @media (max-width: 560px){ .portfolio-grid{ grid-template-columns:1fr; } .project-card.featured{ grid-column:span 1; } .about-body{ flex-direction:column; text-align:center; } } /* ========================================================= BOTÓN FIJO "VOLVER ATRÁS" Siempre visible abajo a la derecha, no se mueve con el scroll. ========================================================= */ .back-fab{ position:fixed; right:24px; bottom:24px; z-index:300; width:52px; height:52px; display:flex; align-items:center; justify-content:center; border-radius:10px; border:1px solid var(--border-strong); background:rgba(11,12,16,0.85); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); color:var(--text); font-size:1.3rem; line-height:1; cursor:pointer; appearance:none; -webkit-appearance:none; transition:transform .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); } .back-fab:hover{ border-color:var(--red); color:var(--red); transform:scale(1.08); } @media (max-width: 560px){ .back-fab{ width:46px; height:46px; right:16px; bottom:16px; } } /* ========================================================= BARRA DE PROGRESO DE SCROLL ========================================================= */ .scroll-progress{ position:fixed; top:0; left:0; height:3px; width:100%; background:var(--red); transform:scaleX(0); transform-origin:0 50%; z-index:400; will-change:transform; pointer-events:none; } /* ========================================================= SLIDESHOW EN LAS TARJETAS DEL PORTFOLIO Cada proyecto va rotando entre TODAS sus imágenes con un barrido horizontal, sin mezclarse con otros proyectos. El barrido alterna de dirección en cada cambio (dir-right / dir-left), en vez de ir siempre hacia el mismo lado. ========================================================= */ .project-card img.is-incoming{ transition: clip-path 1s var(--ease); z-index: 2; } .project-card img.is-incoming.dir-right{ clip-path: inset(0 100% 0 0); /* empieza oculta, tapada por la derecha */ } .project-card img.is-incoming.dir-right.is-active{ clip-path: inset(0 0 0 0); /* se revela de izquierda a derecha */ } .project-card img.is-incoming.dir-left{ clip-path: inset(0 0 0 100%); /* empieza oculta, tapada por la izquierda */ } .project-card img.is-incoming.dir-left.is-active{ clip-path: inset(0 0 0 0); /* se revela de derecha a izquierda */ } /* Recuadro dentro de project.html que agrupa 2+ imágenes y las va rotando en el mismo sitio (usado cuando en portfolio-data.js metes varias rutas juntas dentro de [ ]). */ .project-image-rotator{ position:relative; overflow:hidden; border-radius:8px; } .project-image-rotator .rotator-base{ display:block; width:100%; border-radius:8px; border:1px solid var(--border); } .project-image-rotator img.is-incoming{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: clip-path 1s var(--ease); z-index:2; } .project-image-rotator img.is-incoming.dir-right{ clip-path: inset(0 100% 0 0); } .project-image-rotator img.is-incoming.dir-right.is-active{ clip-path: inset(0 0 0 0); } .project-image-rotator img.is-incoming.dir-left{ clip-path: inset(0 0 0 100%); } .project-image-rotator img.is-incoming.dir-left.is-active{ clip-path: inset(0 0 0 0); } .project-image-rotator img.is-incoming.is-active{ clip-path: inset(0 0 0 0); }