/* ═══════════════════════════════════════════════════════
main.css — Portafolio Yojhan
Incluye estilos de: portafolio-final + proyectos + sobre-mi
═══════════════════════════════════════════════════════ */
/* ── VARIABLES ── */
:root {
--bg: #08090d;
--bg-2: #0e1018;
--card: #11131b;
--card-2: #151824;
--text: #f4f7fb;
--muted: #a4adbd;
--muted-2: #717b8e;
--accent: #8b5cf6;
--accent-2: #22d3ee;
--accent-3: #d6ff4f;
--orange: #ff7a2f;
--line: rgba(255,255,255,0.1);
--line-2: rgba(255,255,255,0.06);
--line-soft: rgba(255,255,255,0.065);
--radius-xl: 34px;
--radius-lg: 26px;
--radius-md: 18px;
--shadow: 0 28px 80px rgba(0,0,0,0.45);
--container: 1240px;
}
/* ── RESET BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
a { text-decoration: none; }
img, video { display: block; max-width: 100%; }
body {
font-family: "Inter", sans-serif;
background:
radial-gradient(circle at 10% 0%, rgba(139,92,246,0.22), transparent 30%),
radial-gradient(circle at 90% 12%, rgba(34,211,238,0.16), transparent 28%),
linear-gradient(180deg, #07080c 0%, #0b0d13 42%, #07080c 100%);
color: var(--text);
overflow-x: hidden;
min-height: 100vh;
}
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
opacity: 0.26;
background-image:
linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
background-size: 52px 52px;
mask-image: linear-gradient(to bottom, black, transparent 82%);
z-index: -1;
}
/* ── LAYOUT ── */
.container-custom {
width: min(100% - 2rem, var(--container));
margin-inline: auto;
}
.section { padding: 116px 0; position: relative; }
/* ── TIPOGRAFÍA COMPARTIDA ── */
.eyebrow {
display: inline-flex; align-items: center; gap: 10px;
color: var(--accent-3);
font-size: 0.82rem; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.12em;
margin-bottom: 16px;
}
.eyebrow::before {
content: ""; width: 9px; height: 9px;
border-radius: 50%; background: var(--accent-3);
box-shadow: 0 0 24px rgba(214,255,79,0.7);
}
.section-title {
font-family: "Space Grotesk", sans-serif;
font-size: clamp(2.25rem,5vw,5.2rem);
line-height: 0.95; letter-spacing: -0.06em; font-weight: 700; margin: 0;
word-break: break-word; overflow-wrap: break-word;
}
.section-copy, .section-text, .hero-text {
color: var(--muted); line-height: 1.85; font-size: 1.02rem; max-width: 680px; margin: 20px 0 0;
}
/* ── BOTONES ── */
.magnetic-btn, .ghost-btn, .btn-main, .btn-ghost {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
border-radius: 999px; padding: 13px 18px;
font-weight: 800; font-size: 0.92rem;
transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, color 0.28s ease;
cursor: pointer; border: none;
}
.magnetic-btn, .btn-main {
color: #08090d; background: var(--accent-3);
border: 1px solid rgba(214,255,79,0.5);
box-shadow: 0 16px 42px rgba(214,255,79,0.16);
}
.magnetic-btn:hover, .btn-main:hover {
color: #08090d; transform: translateY(-4px) scale(1.01);
box-shadow: 0 24px 54px rgba(214,255,79,0.22);
}
.ghost-btn, .btn-ghost {
color: var(--text); background: rgba(255,255,255,0.05);
border: 1px solid var(--line); backdrop-filter: blur(14px);
}
.ghost-btn:hover, .btn-ghost:hover {
color: white; background: rgba(255,255,255,0.09); transform: translateY(-4px);
}
/* ── NAVEGACIÓN ── */
.site-nav {
position: fixed; top: 22px; left: 50%; transform: translateX(-50%);
width: min(980px, calc(100% - 2rem)); min-height: 66px;
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 10px 12px 10px 20px; border-radius: 999px;
background: rgba(8,9,13,0.72); border: 1px solid rgba(255,255,255,0.11);
backdrop-filter: blur(22px); z-index: 1050;
box-shadow: 0 18px 60px rgba(0,0,0,0.34);
}
.brand {
display: inline-flex; align-items: center; gap: 10px;
color: white; font-family: "Space Grotesk", sans-serif;
font-weight: 700; letter-spacing: -0.03em; white-space: nowrap;
}
.brand:hover { color: white; }
.brand-mark {
width: 34px; height: 34px; display: grid; place-items: center;
border-radius: 50%; color: #08090d;
background: linear-gradient(135deg, var(--accent-3), var(--accent-2)); font-weight: 900;
}
.nav-links {
display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none;
}
.nav-links a {
display: inline-flex; align-items: center;
padding: 11px 13px; border-radius: 999px;
color: var(--muted); font-size: 0.86rem; font-weight: 700;
transition: background 0.28s, color 0.28s;
}
.nav-links a:hover, .nav-links a.active,
.nav-links .current-menu-item > a, .nav-links .current_page_item > a {
color: white; background: rgba(255,255,255,0.08);
}
/* ── FLOATING CONTACT ── */
/* ── CURSOR ── */
#cursor-dot, #cursor-ring {
position: fixed; top: 0; left: 0;
border-radius: 50%; pointer-events: none;
transform: translate(-50%,-50%); z-index: 9999; transition: opacity 0.3s;
}
#cursor-dot {
width: 8px; height: 8px;
background: var(--accent-3); box-shadow: 0 0 12px rgba(214,255,79,0.8);
}
#cursor-ring {
width: 36px; height: 36px; border: 1.5px solid rgba(214,255,79,0.55);
transition: transform 0.12s ease, width 0.25s ease, height 0.25s ease, border-color 0.25s ease;
}
body.cursor-hover #cursor-ring { width: 56px; height: 56px; border-color: var(--accent-3); }
/* ── MARQUEE ── */
.marquee { overflow: hidden; border-block: 1px solid var(--line-2); background: rgba(255,255,255,0.025); }
.marquee-track { display: flex; width: max-content; animation: marquee 26s linear infinite; }
.marquee span {
padding: 20px 28px; color: rgba(255,255,255,0.68);
font-family: "Space Grotesk", sans-serif; font-weight: 700;
font-size: clamp(1.1rem,2vw,1.6rem); white-space: nowrap;
}
.marquee .accent { color: var(--accent-3); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* ════════════════════════════════════════
PORTAFOLIO-FINAL — HERO
════════════════════════════════════════ */
.hero {
min-height: 100vh; padding: 120px 0 70px;
display: flex; align-items: center;
}
.hero-shell {
display: grid; grid-template-columns: 1.1fr 0.9fr;
gap: 22px; align-items: stretch;
}
.hero-main {
min-height: 620px; position: relative; overflow: hidden;
padding: clamp(28px,5vw,58px);
border: 1px solid var(--line); border-radius: var(--radius-xl);
background:
linear-gradient(135deg, rgba(139,92,246,0.32), transparent 42%),
radial-gradient(circle at 82% 22%, rgba(34,211,238,0.26), transparent 28%),
linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.035));
box-shadow: var(--shadow);
}
.hero-main::after {
content: ""; position: absolute; right: -18%; bottom: -24%;
width: 620px; height: 620px; border-radius: 50%;
background: radial-gradient(circle, rgba(214,255,79,0.18), transparent 62%);
filter: blur(8px); pointer-events: none;
}
.hero-inner {
position: relative; z-index: 2; height: 100%;
display: flex; flex-direction: column; justify-content: space-between; gap: 70px;
}
.hero-label {
display: inline-flex; align-items: center; gap: 10px; width: fit-content;
padding: 9px 13px; border-radius: 999px;
background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.11);
color: white; font-size: 0.88rem; font-weight: 700;
}
.hero-title {
font-family: "Space Grotesk", sans-serif; max-width: 780px;
font-size: clamp(3.2rem,8vw,7.4rem); line-height: 0.84;
letter-spacing: -0.08em; font-weight: 700; margin: 22px 0 24px;
word-break: break-word; overflow-wrap: break-word;
}
.hero-title .outline {
color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.72);
}
.hero-title span {
color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.72);
}
.hero-description {
max-width: 660px; color: rgba(244,247,251,0.78); font-size: 1.03rem; line-height: 1.9; margin: 0;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-bottom { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.metric-card {
padding: 18px; border-radius: 22px;
background: rgba(8,9,13,0.44); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(12px);
}
.metric-card strong {
display: block; font-family: "Space Grotesk", sans-serif;
font-size: 1.5rem; line-height: 1; margin-bottom: 8px;
}
.metric-card span { color: rgba(244,247,251,0.68); font-size: 0.86rem; line-height: 1.55; }
/* FIX: la columna derecha repartía el alto con proporciones fijas
(1.08fr/0.92fr) sin importar el contenido → la foto del moodboard
dejaba un hueco vacío debajo. Ahora el moodboard ABSORBE todo el
alto sobrante (la foto lo cubre completo) y el panel de conexión
se dimensiona según su contenido. */
.hero-side { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 22px; }
.profile-card {
border: 1px solid var(--line); border-radius: var(--radius-xl);
background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.035));
box-shadow: var(--shadow); overflow: hidden; position: relative;
}
.profile-visual {
min-height: 360px; display: flex; align-items: flex-end; padding: 24px;
background:
linear-gradient(to top, rgba(8,9,13,0.92), transparent 56%),
radial-gradient(circle at 54% 28%, rgba(34,211,238,0.2), transparent 34%),
url("https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?q=80&w=1200&auto=format&fit=crop") center/cover;
}
.profile-chip {
display: inline-flex; align-items: center; gap: 10px; padding: 11px 13px;
border-radius: 999px; color: white; background: rgba(0,0,0,0.42);
border: 1px solid rgba(255,255,255,0.14); backdrop-filter: blur(12px);
font-weight: 800; font-size: 0.86rem;
}
.profile-content { padding: 24px; }
.profile-content h2 {
font-family: "Space Grotesk", sans-serif; font-size: 1.7rem;
letter-spacing: -0.04em; margin: 0 0 10px;
}
.profile-content p { color: var(--muted); line-height: 1.75; margin: 0; }
/* MOODBOARD CARD */
.moodboard-card {
border: 1px solid var(--line); border-radius: var(--radius-xl);
background: var(--card); overflow: hidden; position: relative;
box-shadow: var(--shadow);
display: flex; min-height: 320px;
}
/* El contenedor llena la card completa; la proporción 4/3 solo
aplica cuando la columna se apila en móvil (ver media query) */
.moodboard-placeholder { flex: 1; width: 100%; position: relative; }
.moodboard-photo {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; transition: transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.moodboard-card:hover .moodboard-photo { transform: scale(1.05); }
.moodboard-shade {
position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(to top, rgba(8,9,13,0.62), transparent 42%);
}
.moodboard-grid {
position: absolute; inset: 0;
display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr;
width: 100%; height: 100%;
}
.mb-cell { transition: opacity 0.3s; }
.mb-lime { background: var(--accent-3); }
.mb-cyan { background: var(--accent-2); }
.mb-purple { background: var(--accent); }
.mb-dark { background: #0e1018; border: 1px solid var(--line-soft); }
.mb-text { display: flex; align-items: center; justify-content: center; }
.mb-text span {
font-family: "Space Grotesk", sans-serif; font-size: 1.8rem;
font-weight: 700; letter-spacing: -0.06em; color: var(--muted-2);
}
.moodboard-label {
position: absolute; bottom: 14px; left: 14px;
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 14px; border-radius: 999px; font-size: 0.78rem; font-weight: 700;
background: rgba(0,0,0,0.55); backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.12); color: var(--muted);
}
.moodboard-card:hover .mb-lime { opacity: 0.85; }
.moodboard-card:hover .mb-cyan { opacity: 0.85; }
.moodboard-card:hover .mb-purple { opacity: 0.85; }
/* PANEL DE CONEXIÓN — redes + stack en una card estructurada */
.hero-connect {
border: 1px solid var(--line); border-radius: var(--radius-xl);
background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02));
box-shadow: var(--shadow);
padding: 22px; display: flex; flex-direction: column; gap: 14px;
}
.hero-connect-title {
display: inline-flex; align-items: center; gap: 8px;
font-size: 0.76rem; font-weight: 900; letter-spacing: 0.13em;
text-transform: uppercase; color: var(--muted-2);
}
.hero-connect-title i { font-size: 1rem; color: var(--accent-3); }
.hero-social {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.social-pill {
display: flex; align-items: center; gap: 12px; min-width: 0;
padding: 13px 15px; border-radius: var(--radius-md);
border: 1px solid var(--line-soft);
background: rgba(255,255,255,0.03);
color: var(--muted); text-decoration: none;
transition: border-color 0.25s, background 0.25s, transform 0.25s, color 0.25s;
overflow: hidden; position: relative;
}
.social-pill::before {
content: ""; position: absolute; inset: 0;
background: color-mix(in srgb, var(--c) 12%, transparent);
opacity: 0; transition: opacity 0.3s;
}
.social-pill:hover { border-color: color-mix(in srgb, var(--c) 50%, transparent); transform: translateY(-2px); color: var(--text); }
.social-pill:hover::before { opacity: 1; }
.social-pill i { font-size: 1.1rem; color: var(--c); position: relative; z-index: 1; flex: 0 0 auto; }
.social-pill-label {
font-size: 0.84rem; font-weight: 700; position: relative; z-index: 1;
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* TECH TAGS MINIMALISTAS */
.tech-tags {
display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 8px;
}
.tech-tags span {
padding: 7px 14px; border-radius: 999px;
font-size: 0.8rem; font-weight: 700;
border: 1px solid var(--line-soft);
background: rgba(255,255,255,0.04);
color: var(--muted);
transition: border-color 0.22s, color 0.22s;
}
.tech-tags span:hover { border-color: rgba(214,255,79,0.3); color: var(--accent-3); }
/* ════════════════════════════════════════
BOTÓN FLOTANTE DE CONTACTO
Mismo mecanismo CSS que el menú hamburguesa
(input:checkbox + label) — usa IDs distintos
para que no choquen entre sí.
════════════════════════════════════════ */
#contact-float-toggle { display: none; }
.contact-float-trigger {
position: fixed; right: 22px; bottom: 22px;
width: 52px; height: 52px; border-radius: 50%;
cursor: pointer; z-index: 1600;
display: grid; place-items: center;
background: linear-gradient(135deg, var(--accent-3), var(--accent-2));
color: #08090d; font-size: 1.1rem;
box-shadow: 0 8px 28px rgba(214,255,79,0.35);
transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}
.contact-float-trigger:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 16px 40px rgba(214,255,79,0.45); }
#contact-float-toggle:checked + .contact-float-trigger {
opacity: 0; transform: scale(0.8); pointer-events: none;
}
.contact-float-curva {
position: fixed; right: 0; bottom: 0;
width: 0; height: 0;
background: var(--card);
border-top-left-radius: 100% 100%;
border: 1px solid var(--line-soft);
transition: width 0.5s cubic-bezier(0.22,1,0.36,1), height 0.5s cubic-bezier(0.22,1,0.36,1);
z-index: 1500; pointer-events: none;
box-shadow: -4px -4px 40px rgba(0,0,0,0.4);
}
#contact-float-toggle:checked ~ .contact-float-curva {
width: 680px; height: 680px; pointer-events: auto;
}
.contact-float-panel {
position: fixed; right: 0; bottom: 0;
width: 0; height: 0;
z-index: 1601; opacity: 0; transform: scale(0.94);
transition: opacity 0.35s ease, transform 0.35s ease;
pointer-events: none;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
#contact-float-toggle:checked ~ .contact-float-panel {
width: 680px; height: 680px;
opacity: 1; transform: scale(1); pointer-events: auto;
}
.contact-float-content {
width: 320px; display: flex; flex-direction: column; gap: 14px;
transform: translate(42px, 90px); position: relative;
}
.contact-float-close {
position: absolute; top: -10px; right: -10px;
width: 36px; height: 36px; border-radius: 50%;
display: grid; place-items: center;
background: rgba(255,255,255,0.08); border: 1px solid var(--line);
color: var(--muted); cursor: pointer;
transition: transform 0.22s, background 0.22s;
}
.contact-float-close:hover { transform: scale(1.08); background: rgba(255,255,255,0.14); color: var(--text); }
.contact-float-badge {
display: inline-flex; align-items: center; gap: 7px; width: fit-content;
padding: 6px 12px; border-radius: 999px; font-size: 0.74rem; font-weight: 700;
background: rgba(214,255,79,0.08); border: 1px solid rgba(214,255,79,0.22); color: var(--accent-3);
}
.contact-float-title {
font-family: "Space Grotesk", sans-serif; font-size: 2rem;
font-weight: 700; letter-spacing: -0.05em; line-height: 1; margin: 0; color: var(--text);
}
.contact-float-role { margin: 0; font-size: 0.9rem; color: var(--accent-2); font-weight: 600; }
.contact-float-text { margin: 0; font-size: 0.88rem; line-height: 1.7; color: var(--muted); max-width: 28ch; }
.contact-float-links { display: flex; flex-direction: column; gap: 8px; }
.contact-float-links a {
display: inline-flex; align-items: center; gap: 10px;
color: var(--muted); font-size: 0.88rem; font-weight: 600;
padding: 10px 14px; border-radius: var(--radius-md);
background: rgba(255,255,255,0.04); border: 1px solid var(--line-soft);
transition: background 0.22s, color 0.22s, border-color 0.22s;
}
.contact-float-links a:hover { background: rgba(255,255,255,0.08); color: var(--text); border-color: var(--line); }
.contact-float-links i { color: var(--accent-3); font-size: 0.9rem; }
.contact-float-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.contact-float-btn-primary {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 18px; border-radius: 999px; font-size: 0.84rem; font-weight: 700;
background: linear-gradient(135deg, var(--accent-3), var(--accent-2)); color: #08090d;
transition: transform 0.22s, box-shadow 0.22s;
}
.contact-float-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(214,255,79,0.3); color: #08090d; }
.contact-float-btn-secondary {
display: inline-flex; align-items: center; padding: 10px 18px;
border-radius: 999px; font-size: 0.84rem; font-weight: 700;
background: rgba(255,255,255,0.06); border: 1px solid var(--line); color: var(--text);
transition: background 0.22s;
}
.contact-float-btn-secondary:hover { background: rgba(255,255,255,0.1); color: var(--text); }
@media (max-width: 760px) {
#contact-float-toggle:checked ~ .contact-float-curva { width: 100vw; height: 100vh; border-radius: 0; }
#contact-float-toggle:checked ~ .contact-float-panel { width: 100vw; height: 100vh; }
.contact-float-content { transform: translate(0, 0); padding: 40px 28px; }
}
/* SOBRE MÍ CARD CON GRADIENTE ANIMADO */
.sobre-mi-card {
display: flex; flex-direction: column; gap: 36px;
position: relative; overflow: hidden;
border-radius: var(--radius-xl); border: 1px solid var(--line);
padding: clamp(36px, 5vw, 60px); min-height: 380px;
text-decoration: none; color: var(--text);
background: var(--card);
transition: border-color 0.4s, transform 0.4s;
}
.sobre-mi-card:hover { border-color: rgba(214,255,79,0.28); transform: translateY(-4px); color: var(--text); }
/* Blobs de gradiente animados */
.sobre-mi-blob {
position: absolute; border-radius: 50%; pointer-events: none;
filter: blur(80px); animation: blob-move 8s ease-in-out infinite;
}
.blob-1 { width: 420px; height: 420px; top: -120px; left: -80px; background: rgba(139,92,246,0.28); animation-delay: 0s; }
.blob-2 { width: 320px; height: 320px; top: -60px; right: 60px; background: rgba(34,211,238,0.2); animation-delay: 2.5s; }
.blob-3 { width: 260px; height: 260px; bottom: -80px; left: 40%; background: rgba(214,255,79,0.15); animation-delay: 5s; }
@keyframes blob-move {
0%, 100% { transform: scale(1) translate(0, 0); }
33% { transform: scale(1.1) translate(20px, -15px); }
66% { transform: scale(0.95) translate(-15px, 10px); }
}
.sobre-mi-content { position: relative; z-index: 1; max-width: 680px; }
.sobre-mi-content h2 {
font-family: "Space Grotesk", sans-serif; font-weight: 700;
font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -0.06em; line-height: 0.97;
margin: 12px 0 16px;
}
.sobre-mi-content p { color: rgba(255,255,255,0.72); font-size: 1rem; line-height: 1.75; max-width: 50ch; margin: 0 0 24px; }
.sobre-mi-btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 13px 24px; border-radius: 999px; font-weight: 800; font-size: 0.92rem;
background: linear-gradient(135deg, var(--accent-3), var(--accent-2)); color: #08090d;
transition: transform 0.25s, box-shadow 0.25s;
}
.sobre-mi-card:hover .sobre-mi-btn { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(214,255,79,0.28); }
.sobre-mi-stats {
position: relative; z-index: 1;
display: flex; gap: 40px; flex-wrap: wrap;
padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.1);
}
.sobre-mi-stat strong {
display: block; font-family: "Space Grotesk", sans-serif;
font-size: 2rem; font-weight: 700; letter-spacing: -0.05em; color: var(--accent-3);
}
.sobre-mi-stat span { font-size: 0.84rem; color: var(--muted); }
/* ── ABOUT (portafolio-final) ── */
.about-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 24px; align-items: stretch; }
.about-card {
border-radius: var(--radius-xl); border: 1px solid var(--line); background: var(--card);
padding: clamp(26px,4vw,42px); min-height: 460px; overflow: hidden; position: relative;
}
.about-card.featured {
background:
linear-gradient(135deg, rgba(139,92,246,0.16), transparent 45%),
linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025));
}
.about-card h3 {
font-family: "Space Grotesk", sans-serif; font-size: clamp(2rem,4vw,4rem);
line-height: 0.94; letter-spacing: -0.06em; margin: 0 0 20px;
}
.about-card p { color: var(--muted); line-height: 1.9; margin: 0 0 18px; }
.signature-line { width: 100%; height: 1px; background: var(--line); margin: 26px 0; }
.tags { display: flex; flex-wrap: wrap; gap: 9px; }
.tags span {
padding: 8px 10px; border-radius: 999px; color: var(--muted);
font-size: 0.78rem; font-weight: 700;
background: rgba(255,255,255,0.045); border: 1px solid var(--line-2);
}
/* ── PROYECTOS DESTACADOS (portafolio-final) ── */
.projects-head {
display: grid; grid-template-columns: 0.95fr 0.75fr;
gap: 28px; align-items: end; margin-bottom: 42px;
}
.projects-board { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.project-card {
overflow: hidden; border-radius: var(--radius-xl);
border: 1px solid var(--line); background: var(--card);
transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
cursor: pointer;
}
/* Hace que el cubra TODA la card para
que sea clickeable en cualquier punto, no solo donde está el
texto del link. No dependemos solo del CSS de Bootstrap por si
cambia de orden de carga o de versión. */
.position-relative { position: relative; }
.stretched-link::after {
content: "";
position: absolute; inset: 0;
z-index: 1;
}
.project-card:hover { transform: translateY(-10px); border-color: rgba(214,255,79,0.24); box-shadow: 0 30px 90px rgba(0,0,0,0.38); }
.project-image {
height: 260px; position: relative; overflow: hidden;
background: radial-gradient(circle at 20% 10%, rgba(139,92,246,0.28), transparent 28%), #0d1018;
}
.projects-grid .project-image { height: 330px; }
.project-image img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 0.55s ease, filter 0.55s ease;
}
.project-card:hover .project-image img { transform: scale(1.06); filter: saturate(1.15); }
.project-badge {
position: absolute; left: 18px; top: 18px;
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 12px; border-radius: 999px; color: white;
background: rgba(0,0,0,0.46); border: 1px solid rgba(255,255,255,0.14);
backdrop-filter: blur(12px); font-size: 0.8rem; font-weight: 800;
}
.project-open {
position: absolute; right: 18px; bottom: 18px;
width: 48px; height: 48px; display: grid; place-items: center;
border-radius: 50%; color: #08090d; background: var(--accent-3);
transform: rotate(-28deg); transition: transform 0.28s ease;
}
.project-card:hover .project-open { transform: rotate(0) scale(1.05); }
.project-body { padding: 24px; }
.project-kicker {
color: var(--accent-2); font-size: 0.78rem; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 10px;
}
.project-body h3 {
font-family: "Space Grotesk", sans-serif; font-size: 1.7rem;
line-height: 1; letter-spacing: -0.055em; margin: 0 0 12px;
}
.project-body p { color: var(--muted); line-height: 1.78; margin: 0 0 18px; }
.projects-cta { display: flex; justify-content: center; margin-top: 34px; }
/* ── SERVICIOS / PROCESO ── */
.process-list { margin-top: 46px; border-top: 1px solid var(--line); }
.process-item {
display: grid; grid-template-columns: 0.3fr 0.9fr 1fr;
gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line); align-items: start;
}
.process-item span { color: var(--accent-3); font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1.15rem; }
.process-item h3 {
font-family: "Space Grotesk", sans-serif; font-size: clamp(1.6rem,3vw,2.55rem);
line-height: 1; letter-spacing: -0.06em; margin: 0;
}
.process-item p { color: var(--muted); line-height: 1.85; margin: 0; }
/* ── CONTACTO ── */
.contact-panel {
min-height: 520px; position: relative; overflow: hidden;
padding: clamp(28px,5vw,56px); border-radius: var(--radius-xl);
border: 1px solid var(--line);
background:
radial-gradient(circle at 75% 10%, rgba(214,255,79,0.18), transparent 30%),
linear-gradient(135deg, rgba(139,92,246,0.2), rgba(34,211,238,0.08)),
#10131b;
box-shadow: var(--shadow);
}
.contact-panel .section-title { max-width: 840px; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.social-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 44px; }
.social-row a {
width: 50px; height: 50px; display: grid; place-items: center;
border-radius: 50%; color: white; background: rgba(255,255,255,0.06);
border: 1px solid var(--line); transition: transform 0.28s, background 0.28s, color 0.28s;
}
.social-row a:hover { transform: translateY(-5px); background: white; color: #08090d; }
/* ── MODALES ── */
.project-modal .modal-content {
background: #10131b; color: white; border: 1px solid var(--line);
border-radius: 30px; overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,0.58);
}
.project-modal .modal-header { border-bottom: 1px solid var(--line); padding: 18px 22px; }
.project-modal .modal-title { font-family: "Space Grotesk", sans-serif; letter-spacing: -0.04em; font-weight: 700; }
.project-modal .btn-close { filter: invert(1); }
.project-modal .modal-body { padding: 22px; }
.modal-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 24px; align-items: start; }
.project-carousel { border-radius: 24px; overflow: hidden; border: 1px solid var(--line-2); background: #07080c; }
.project-carousel img, .project-carousel video {
width: 100%; height: 520px; object-fit: contain; background: #07080c;
}
.modal-info h3 {
font-family: "Space Grotesk", sans-serif; font-size: 2.2rem;
line-height: 1; letter-spacing: -0.06em; margin: 0 0 16px;
}
.modal-info p, .modal-info li { color: var(--muted); line-height: 1.85; }
.modal-info ul { padding-left: 1.1rem; margin: 18px 0 0; }
/* ── FOOTER ── */
footer { padding: 34px 0 46px; color: var(--muted-2); text-align: center; font-size: 0.94rem; }
/* ════════════════════════════════════════
PROYECTOS.HTML — ESTILOS ESPECÍFICOS
════════════════════════════════════════ */
.page-hero {
min-height: 78vh; padding: 128px 0 70px; display: flex; align-items: center;
}
.hero-panel {
min-height: 560px; position: relative; overflow: hidden;
display: grid; grid-template-columns: 1.05fr 0.95fr;
gap: 24px; align-items: stretch; padding: clamp(24px,4vw,34px);
border-radius: var(--radius-xl); border: 1px solid var(--line);
background:
linear-gradient(135deg, rgba(139,92,246,0.18), transparent 42%),
linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.025));
box-shadow: var(--shadow);
}
.hero-panel::after {
content: ""; position: absolute; right: -180px; bottom: -230px;
width: 620px; height: 620px; border-radius: 50%;
background: radial-gradient(circle, rgba(214,255,79,0.16), transparent 63%); pointer-events: none;
}
.hero-copy {
position: relative; z-index: 2; display: flex;
flex-direction: column; justify-content: space-between; gap: 46px;
padding: clamp(8px,3vw,26px);
}
.hero-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.stat-card {
padding: 18px; border-radius: 22px;
background: rgba(7,8,12,0.45); border: 1px solid var(--line-soft); backdrop-filter: blur(14px);
}
.stat-card strong {
display: block; font-family: "Space Grotesk", sans-serif;
font-size: 1.7rem; letter-spacing: -0.05em; margin-bottom: 8px;
}
.stat-card span { color: var(--muted); font-size: 0.86rem; line-height: 1.6; }
.hero-aside { position: relative; z-index: 2; display: grid; grid-template-rows: 1fr auto; gap: 18px; }
.featured-card {
overflow: hidden; border-radius: 30px; border: 1px solid rgba(255,255,255,0.11);
background: #0d1018; min-height: 400px; position: relative;
}
.featured-card img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.08) contrast(1.02); opacity: 0.9; }
.featured-overlay {
position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 22px;
background: linear-gradient(to top, rgba(7,8,12,0.92), transparent 62%);
}
.featured-overlay h2 {
font-family: "Space Grotesk", sans-serif; font-size: 2rem;
line-height: 1; letter-spacing: -0.055em; margin: 0 0 8px;
}
.featured-overlay p { color: rgba(245,247,251,0.74); line-height: 1.6; margin: 0; }
.category-pills {
display: flex; flex-wrap: wrap; gap: 10px; padding: 18px;
border-radius: 28px; border: 1px solid var(--line-soft); background: rgba(255,255,255,0.045);
}
.category-pills a {
display: inline-flex; align-items: center; gap: 9px;
padding: 10px 13px; border-radius: 999px; color: white;
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
font-size: 0.84rem; font-weight: 800; transition: transform 0.25s, background 0.25s;
}
.category-pills a:hover { transform: translateY(-3px); background: rgba(255,255,255,0.1); }
.section-head {
display: grid; grid-template-columns: 0.9fr 0.75fr;
gap: 28px; align-items: end; margin-bottom: 42px;
}
.projects-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
/* Experimentos */
.experiment-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
.experiment-card {
min-height: 360px; position: relative; overflow: hidden;
display: flex; flex-direction: column; justify-content: space-between;
padding: 24px; border-radius: var(--radius-lg); border: 1px solid var(--line);
background:
radial-gradient(circle at 80% 8%, rgba(214,255,79,0.12), transparent 30%),
linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025));
transition: transform 0.3s, border-color 0.3s;
cursor: pointer;
}
.experiment-card:hover { transform: translateY(-8px); border-color: rgba(34,211,238,0.28); }
.experiment-icon {
width: 54px; height: 54px; display: grid; place-items: center;
border-radius: 18px; color: #07080c;
background: linear-gradient(135deg, var(--accent-3), var(--accent-2));
margin-bottom: 38px; font-size: 1.3rem;
}
.experiment-card h3 {
font-family: "Space Grotesk", sans-serif; font-size: 1.65rem;
letter-spacing: -0.055em; line-height: 1; margin: 0 0 12px;
}
.experiment-card p { color: var(--muted); line-height: 1.75; margin: 0; }
.experiment-status {
display: inline-flex; width: fit-content; align-items: center; gap: 8px;
margin-top: 28px; padding: 9px 11px; border-radius: 999px;
color: white; background: rgba(255,255,255,0.06);
border: 1px solid var(--line-soft); font-size: 0.78rem; font-weight: 900;
}
.highlight-strip {
margin-top: 34px; padding: 24px; border-radius: var(--radius-lg);
border: 1px solid rgba(214,255,79,0.18); background: rgba(214,255,79,0.055);
display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 20px; align-items: center;
}
.highlight-strip h3 {
font-family: "Space Grotesk", sans-serif; font-size: 1.7rem;
line-height: 1; letter-spacing: -0.055em; margin: 0;
}
.highlight-strip p { color: var(--muted); line-height: 1.78; margin: 0; }
/* ════════════════════════════════════════
SOBRE-MI — ESTILOS ESPECÍFICOS
════════════════════════════════════════ */
.am-hero {
position: relative; min-height: 100vh; background: #07080b;
overflow: hidden; display: flex; flex-direction: column;
}
.hero-stage {
flex: 1; position: relative; display: grid;
grid-template-columns: 260px 1fr 30px;
min-height: calc(100vh - 100px); padding-top: 90px;
}
.hero-bg-text {
position: absolute; inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
pointer-events: none; z-index: 1; gap: 0; padding-top: 60px;
}
.hero-bg-text .bg-word {
font-family: "Space Grotesk", sans-serif;
font-size: clamp(7rem,18vw,18rem); font-weight: 700;
line-height: 0.82; letter-spacing: -0.04em; text-transform: uppercase;
white-space: nowrap; color: transparent;
-webkit-text-stroke: 2px rgba(214,255,79,0.18); user-select: none;
}
.hero-bg-text .bg-word-2 { -webkit-text-stroke: 2px rgba(255,255,255,0.06); }
.hero-photo-wrap {
position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
z-index: 3; width: clamp(320px,38vw,540px);
}
.hero-photo-wrap img {
width: 100%; display: block; object-fit: cover; object-position: top center;
-webkit-mask-image: linear-gradient(to top, transparent 0%, black 12%, black 100%);
mask-image: linear-gradient(to top, transparent 0%, black 12%, black 100%);
filter: contrast(1.05) brightness(0.96);
}
.hero-photo-glow {
position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%);
width: 60%; height: 200px;
background: radial-gradient(ellipse, rgba(214,255,79,0.18) 0%, transparent 70%);
z-index: 2; pointer-events: none;
}
.hero-col-left {
position: relative; z-index: 4;
padding: 0 0 40px 48px;
display: flex; flex-direction: column; justify-content: flex-end; gap: 22px;
}
/* Oculto visualmente, accesible para lectores de pantalla y buscadores */
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
clip: rect(0 0 0 0); clip-path: inset(50%);
overflow: hidden; white-space: nowrap;
}
.hero-name-block .hero-name-title {
font-family: "Space Grotesk", sans-serif;
font-size: clamp(1.8rem,2.8vw,2.6rem); font-weight: 700;
letter-spacing: -0.04em; line-height: 1.05; margin: 0 0 6px;
}
.hero-name-block .hero-name-title span { color: var(--accent-3); display: block; }
.hero-alias {
font-size: 0.76rem; font-weight: 800; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--muted-2); margin-bottom: 18px;
}
.hero-socials { display: flex; flex-direction: column; gap: 8px; }
.hero-socials a {
display: inline-flex; align-items: center; gap: 10px;
color: var(--muted-2); font-size: 0.78rem; font-weight: 700;
letter-spacing: 0.05em; text-transform: uppercase; transition: color 0.2s, transform 0.2s;
}
.hero-socials a i {
width: 32px; height: 32px; display: grid; place-items: center;
border-radius: 8px; border: 1px solid rgba(255,255,255,0.1);
background: rgba(255,255,255,0.04); font-size: 0.9rem; flex-shrink: 0;
transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.hero-socials a:hover { color: white; transform: translateX(4px); }
.hero-socials a:hover i { border-color: rgba(214,255,79,0.4); background: rgba(214,255,79,0.08); color: var(--accent-3); }
.hero-flag {
display: inline-flex; align-items: center; gap: 8px;
font-size: 0.76rem; font-weight: 800; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--muted-2);
}
.hero-col-right {
position: relative; z-index: 4;
padding: 0 clamp(16px, 2.5vw, 32px) 40px 0;
display: flex; flex-direction: column; justify-content: flex-end;
align-items: flex-end; gap: 18px; text-align: right;
}
.hero-status-badge {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 14px; border-radius: 4px;
background: rgba(214,255,79,0.08); border: 1px solid rgba(214,255,79,0.25);
font-size: 0.74rem; font-weight: 800; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--accent-3);
}
.status-dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--accent-3); box-shadow: 0 0 10px rgba(214,255,79,0.9);
animation: blink 2s ease-in-out infinite; flex-shrink: 0;
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.hero-role-lines { display: flex; flex-direction: column; gap: 6px; }
.hero-role-line {
font-family: "Space Grotesk", sans-serif;
font-size: clamp(1rem,1.6vw,1.3rem); font-weight: 700;
letter-spacing: -0.03em; color: rgba(255,255,255,0.38);
transition: color 0.2s;
}
.hero-role-line:first-child { color: white; font-size: clamp(1.2rem,2vw,1.65rem); }
.hero-desc {
max-width: 240px; color: var(--muted); font-size: 0.88rem; line-height: 1.7;
}
.hero-ctas { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.hero-scroll-hint {
position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 10px;
color: var(--muted-2); font-size: 0.72rem; font-weight: 800;
letter-spacing: 0.14em; text-transform: uppercase;
}
.scroll-line {
width: 1px; height: 52px;
background: linear-gradient(to bottom, var(--accent-3), transparent);
animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse { 0%,100% { opacity: 1; transform: scaleY(1); } 50% { opacity: 0.4; transform: scaleY(0.6); } }
.hero-stats-bar {
display: grid; grid-template-columns: repeat(4,1fr);
border-top: 1px solid var(--line-2);
}
.hero-stat {
padding: 22px 32px; border-right: 1px solid var(--line-2);
}
.hero-stat:last-child { border-right: none; }
.hero-stat-label {
font-size: 0.72rem; font-weight: 800; text-transform: uppercase;
letter-spacing: 0.12em; color: var(--muted-2); margin-bottom: 6px;
}
.hero-stat-value {
font-family: "Space Grotesk", sans-serif; font-size: 2.4rem;
font-weight: 700; letter-spacing: -0.06em; line-height: 1;
color: var(--accent-3); margin-bottom: 4px;
}
.hero-stat-sub { font-size: 0.78rem; color: var(--muted-2); }
/* Mobile info (oculto en desktop) */
.hero-mobile-info { display: none; }
/* NARRATIVE + TIMELINE */
.about-narrative { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 64px; }
.narrative-sticky { position: sticky; top: 120px; height: fit-content; }
.narrative-big-title {
font-family: "Space Grotesk", sans-serif;
font-size: clamp(3rem,6vw,6rem); font-weight: 700;
line-height: 0.88; letter-spacing: -0.07em; margin-bottom: 28px;
}
.narrative-big-title .stroke {
color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,0.5);
}
.narrative-bio { color: var(--muted); line-height: 1.9; font-size: 1rem; margin-bottom: 16px; }
.narrative-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.narrative-tags span {
padding: 9px 14px; border-radius: 999px;
background: rgba(255,255,255,0.05); border: 1px solid var(--line-2);
font-size: 0.84rem; font-weight: 700;
}
.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline-item { display: flex; gap: 24px; padding: 32px 0; border-bottom: 1px solid var(--line-2); }
.timeline-item:first-child { padding-top: 0; }
.tl-dot {
width: 42px; height: 42px; flex-shrink: 0;
display: grid; place-items: center; border-radius: 50%;
border: 1px solid rgba(255,255,255,0.12);
background: rgba(255,255,255,0.04); color: var(--muted-2); font-size: 0.9rem;
}
.tl-content { flex: 1; }
.tl-date { font-size: 0.76rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-2); margin-bottom: 8px; }
.tl-title { font-family: "Space Grotesk", sans-serif; font-size: 1.3rem; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 10px; }
.tl-desc { color: var(--muted); line-height: 1.8; font-size: 0.94rem; margin-bottom: 14px; }
.tl-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-tags span {
padding: 6px 11px; border-radius: 999px; font-size: 0.76rem; font-weight: 700;
background: rgba(255,255,255,0.045); border: 1px solid var(--line-2); color: var(--muted);
}
/* BENTO SKILLS */
.skills-bento { display: grid; grid-template-columns: repeat(12,1fr); gap: 16px; }
.bento-card {
padding: 26px; border-radius: var(--radius-lg);
border: 1px solid var(--line-2); background: rgba(255,255,255,0.03);
position: relative; overflow: hidden; transition: transform 0.3s, border-color 0.3s;
}
.bento-card:hover { transform: translateY(-6px); border-color: rgba(214,255,79,0.2); }
.b-1 { grid-column: 1/6; }
.b-2 { grid-column: 6/9; }
.b-3 { grid-column: 9/13; }
.b-4 { grid-column: 1/5; }
.b-5 { grid-column: 5/9; }
.b-6 { grid-column: 9/13; }
.bento-card h3 { font-family: "Space Grotesk", sans-serif; font-size: 1.3rem; letter-spacing: -0.04em; font-weight: 700; margin-bottom: 10px; }
.bento-card p { color: var(--muted); font-size: 0.9rem; line-height: 1.75; margin: 0; }
.bento-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; margin-bottom: 18px; font-size: 1.2rem; }
.icon-yellow { background: rgba(214,255,79,0.12); color: var(--accent-3); }
.icon-cyan { background: rgba(34,211,238,0.12); color: var(--accent-2); }
.icon-purple { background: rgba(139,92,246,0.14); color: var(--accent); }
.bento-tech-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.bento-tech-list span { padding: 7px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; background: rgba(255,255,255,0.06); border: 1px solid var(--line-2); color: var(--text); }
.bento-big-num { font-family: "Space Grotesk", sans-serif; font-size: clamp(3rem,5vw,5rem); font-weight: 700; line-height: 1; color: var(--accent-3); letter-spacing: -0.06em; margin-bottom: 6px; }
.bento-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(40px); opacity: 0.25; }
.glow-yellow { background: var(--accent-3); width: 160px; height: 160px; bottom: -40px; right: -40px; }
.glow-cyan { background: var(--accent-2); width: 120px; height: 120px; top: -30px; right: -30px; }
.glow-purple { background: var(--accent); width: 140px; height: 140px; bottom: -30px; left: -30px; }
/* SKILL BARS */
.skill-bars { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.skill-bar-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; font-size: 0.84rem; font-weight: 700; }
.skill-bar-head span:last-child { color: var(--accent-3); }
.skill-bar-track { height: 4px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; }
.skill-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); width: 0; transition: width 1.4s cubic-bezier(0.16,1,0.3,1); }
/* APPROACH */
.approach-scroll-wrap { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 8px; cursor: grab; }
.approach-scroll-wrap:active { cursor: grabbing; }
.approach-scroll-wrap::-webkit-scrollbar { display: none; }
.approach-track { display: flex; gap: 18px; width: max-content; padding: 4px 2px 16px; }
.approach-card {
width: 320px; flex-shrink: 0; padding: 30px 26px;
border-radius: var(--radius-lg); border: 1px solid var(--line);
background: linear-gradient(160deg, rgba(255,255,255,0.065), rgba(255,255,255,0.025));
position: relative; overflow: hidden; transition: transform 0.3s, border-color 0.3s;
}
.approach-card:hover { transform: translateY(-8px); border-color: rgba(214,255,79,0.22); }
.approach-num { font-family: "Space Grotesk", sans-serif; font-size: 3.2rem; font-weight: 700; line-height: 1; letter-spacing: -0.08em; color: rgba(255,255,255,0.06); margin-bottom: 18px; }
.approach-card h3 { font-family: "Space Grotesk", sans-serif; font-size: 1.45rem; letter-spacing: -0.05em; font-weight: 700; margin-bottom: 12px; }
.approach-card p { color: var(--muted); font-size: 0.92rem; line-height: 1.8; }
.approach-card-accent { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3)); transform: scaleX(0); transform-origin: left; transition: transform 0.35s ease; }
.approach-card:hover .approach-card-accent { transform: scaleX(1); }
.scroll-hint { display: flex; align-items: center; gap: 10px; color: var(--muted-2); font-size: 0.82rem; font-weight: 700; margin-bottom: 20px; }
.scroll-hint i { color: var(--accent-3); }
/* WHY */
.why-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 22px; align-items: stretch; }
.why-big-panel {
border-radius: var(--radius-xl); border: 1px solid var(--line);
background:
linear-gradient(135deg, rgba(139,92,246,0.18), transparent 42%),
radial-gradient(circle at 80% 10%, rgba(214,255,79,0.12), transparent 34%),
linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.025));
padding: clamp(28px,4vw,50px); position: relative; overflow: hidden;
}
.why-big-panel h2 { font-family: "Space Grotesk", sans-serif; font-size: clamp(2.4rem,4vw,4.2rem); letter-spacing: -0.06em; line-height: 0.92; font-weight: 700; margin-bottom: 22px; }
.why-big-panel p { color: var(--muted); font-size: 1.02rem; line-height: 1.9; margin-bottom: 18px; }
.why-checkmarks { display: flex; flex-direction: column; gap: 14px; margin-top: 26px; }
.why-check { display: flex; align-items: flex-start; gap: 14px; }
.why-check-icon { width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: rgba(214,255,79,0.12); color: var(--accent-3); font-size: 0.78rem; margin-top: 2px; }
.why-check-text strong { display: block; font-size: 0.96rem; font-weight: 700; margin-bottom: 3px; }
.why-check-text span { color: var(--muted); font-size: 0.88rem; line-height: 1.65; }
.why-side { display: flex; flex-direction: column; gap: 16px; }
.why-mini { border-radius: var(--radius-md); border: 1px solid var(--line-2); background: rgba(255,255,255,0.04); padding: 22px; transition: transform 0.3s, border-color 0.3s; }
.why-mini:hover { transform: translateX(6px); border-color: rgba(214,255,79,0.2); }
.why-mini-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.why-mini-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; font-size: 1rem; }
.why-mini h4 { font-family: "Space Grotesk", sans-serif; font-size: 1.05rem; letter-spacing: -0.03em; font-weight: 700; }
.why-mini p { color: var(--muted); font-size: 0.88rem; line-height: 1.7; }
/* AM-CONTACT */
.am-contact-panel {
min-height: 440px; position: relative; overflow: hidden;
padding: clamp(28px,5vw,60px); border-radius: var(--radius-xl); border: 1px solid var(--line);
background:
radial-gradient(circle at 78% 8%, rgba(214,255,79,0.18), transparent 30%),
linear-gradient(135deg, rgba(139,92,246,0.2), rgba(34,211,238,0.08)),
#10131b;
box-shadow: var(--shadow); display: flex; flex-direction: column; justify-content: center;
}
.am-contact-panel .section-title { font-family: "Space Grotesk", sans-serif; font-size: clamp(2.2rem,4.5vw,4.4rem); line-height: 0.92; letter-spacing: -0.06em; font-weight: 700; max-width: 820px; margin-bottom: 18px; }
/* ════════════════════════════════════════
RESPONSIVE
════════════════════════════════════════ */
@media (max-width: 1080px) {
.site-nav { justify-content: center; }
.nav-links { display: none; }
.hero-shell, .about-layout, .projects-head, .modal-grid,
.hero-panel, .section-head, .highlight-strip,
.about-narrative, .why-grid { grid-template-columns: 1fr; }
.projects-board, .project-categories-grid { grid-template-columns: 1fr; }
.experiment-grid { grid-template-columns: 1fr 1fr; }
.hero-side { grid-template-rows: auto; }
/* Apilado en móvil: el moodboard ya no puede "absorber alto
sobrante" (no hay columna al lado), vuelve a proporción fija */
.moodboard-card { min-height: 0; }
.moodboard-placeholder { aspect-ratio: 4 / 3; flex: none; }
.profile-visual { min-height: 420px; }
.featured-card { min-height: 360px; }
.hero-stage { grid-template-columns: 180px 1fr 180px; }
.skills-bento { grid-template-columns: 1fr 1fr; }
.b-1,.b-2,.b-3,.b-4,.b-5,.b-6 { grid-column: auto / span 1; }
/* El sticky de "Mi historia" solo tiene sentido cuando está al
lado del timeline en dos columnas. Apenas la grid se aplana a
una sola columna, el timeline queda DEBAJO, y el sticky hace
que el panel se quede fijo en pantalla mientras el timeline
pasa "por detrás" — se ve roto. Lo desactivamos aquí. */
.narrative-sticky { position: static; top: auto; margin-bottom: 40px; }
}
@media (max-width: 860px) {
.hero-stage { grid-template-columns: 1fr; }
.hero-col-left, .hero-col-right { display: none; }
.hero-mobile-info {
display: flex; flex-direction: column; align-items: center;
text-align: center; gap: 14px; padding: 24px 20px 30px;
}
.hero-mobile-info .hero-mobile-title {
font-family: "Space Grotesk", sans-serif;
font-size: 2.8rem; font-weight: 700; letter-spacing: -0.05em; margin: 0;
}
.hero-mobile-info .hero-mobile-title span { color: var(--accent-3); display: block; }
.m-role { font-size: 0.82rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-2); }
.hero-mobile-ctas { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.hero-stats-bar { grid-template-columns: 1fr 1fr; }
.hero-photo-wrap { width: clamp(260px,60vw,400px); }
}
@media (max-width: 760px) {
.section { padding: 86px 0; }
.hero { padding-top: 106px; }
.hero-main { min-height: auto; }
/* hero-stats siempre 1 columna en móvil */
.hero-bottom,
.hero-stats,
.projects-grid,
.experiment-grid { grid-template-columns: 1fr !important; }
.process-item { grid-template-columns: 1fr; gap: 12px; }
.project-image { height: 250px; }
.project-carousel img, .project-carousel video { height: 300px; }
.site-nav { min-height: 58px; }
/* Título más pequeño en móvil */
.hero-title { font-size: clamp(2rem, 9vw, 3rem); }
.section-title { font-size: clamp(1.9rem, 8vw, 2.8rem); }
.skills-bento { grid-template-columns: 1fr; }
.b-1,.b-2,.b-3,.b-4,.b-5,.b-6 { grid-column: 1/-1; }
.highlight-strip { grid-template-columns: 1fr; }
.hero-stats-bar { grid-template-columns: 1fr 1fr; }
/* Evitar desbordamiento horizontal en hero y page-proyectos */
.hero-shell,
.hero-panel,
.hero-inner,
.hero-grid { max-width: 100%; overflow: hidden; }
/* Fix espacio azul en page-experimentos:
el exp-hero-grid debe ser 1 columna y no desbordarse */
.exp-hero-grid { grid-template-columns: 1fr !important; width: 100%; }
.exp-carousel { width: 100%; align-items: center; }
.exp-stack { margin: 0 auto; }
/* Single-proyectos: respaldo de seguridad — el fix real está en el
min-width:0 de los hijos del grid (línea ~1010). Esto solo cubre
casos extremos (ventanas muy angostas) y ya no es la única defensa. */
.single-proyecto,
.project-hero,
.detail-grid,
.stats-strip,
.tech-grid,
.future-grid,
.feature-list,
.timeline-layout,
.related-grid { max-width: 100%; overflow-x: hidden; }
.stat-card,
.detail-block,
.tech-card,
.future-card,
.feature-item { width: 100%; box-sizing: border-box; }
/* Textos que desbordan: no cortar palabras sino reducir font */
.hero-panel .section-title { font-size: clamp(1.7rem, 7vw, 2.4rem); }
.hero-text, .section-copy { font-size: 0.92rem; }
}
@media (hover: none) {
#cursor-dot, #cursor-ring { display: none; }
}
/* ════════════════════════════════════════
NAV BLOB LÍQUIDO — DESKTOP
════════════════════════════════════════ */
.nav-container {
position: fixed;
top: 22px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 16px;
padding: 10px 12px 10px 20px;
border-radius: 60px;
/* Liquid glass — fondo semitransparente con blur intenso,
borde con brillo interior sutil y sombra de color */
background: rgba(14, 16, 24, 0.55);
border: 1px solid rgba(255, 255, 255, 0.13);
backdrop-filter: blur(32px) saturate(1.8);
-webkit-backdrop-filter: blur(32px) saturate(1.8);
box-shadow:
0 0 0 0.5px rgba(255,255,255,0.06) inset,
0 20px 60px rgba(0,0,0,0.38),
0 0 40px rgba(214,255,79,0.04);
z-index: 1050;
width: min(980px, calc(100% - 2rem));
}
.nav-brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: white;
font-family: "Space Grotesk", sans-serif;
font-weight: 700;
letter-spacing: -0.03em;
white-space: nowrap;
flex-shrink: 0;
position: relative;
z-index: 2;
}
.nav-brand:hover { color: white; }
.nav-btns {
position: relative;
display: flex;
align-items: center;
gap: 4px;
flex: 1;
justify-content: center;
}
/* El blob se posiciona relativo a .nav-btns — ahora en lima */
.blob {
position: absolute;
top: 4px;
left: 0;
height: calc(100% - 8px);
width: 80px;
background: radial-gradient(circle at 30% 30%, #eeff6e, #b8e000);
border-radius: 50px;
z-index: 0;
pointer-events: none;
transition:
transform 0.6s cubic-bezier(0.42, 0, 0.58, 1),
left 0.6s cubic-bezier(0.42, 0, 0.58, 1),
width 0.3s ease;
filter: drop-shadow(0 0 10px rgba(214,255,79,0.45));
}
/* Botón disponibilidad en el nav */
.nav-disponible {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 16px; border-radius: 999px; cursor: pointer;
font-size: 0.82rem; font-weight: 700; white-space: nowrap; flex-shrink: 0;
border: 1px solid rgba(74,222,128,0.3);
background: rgba(74,222,128,0.08);
color: #4ade80;
transition: background 0.22s, border-color 0.22s, transform 0.22s;
}
.nav-disponible:hover { background: rgba(74,222,128,0.14); border-color: rgba(74,222,128,0.5); transform: translateY(-1px); }
.nav-disponible-dot {
width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
background: #4ade80;
box-shadow: 0 0 8px rgba(74,222,128,0.8);
animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
0%, 100% { box-shadow: 0 0 8px rgba(74,222,128,0.8); }
50% { box-shadow: 0 0 16px rgba(74,222,128,1), 0 0 24px rgba(74,222,128,0.4); }
}
.nav-btn {
position: relative;
border: none;
background: none;
color: rgba(255, 255, 255, 0.65);
font-size: 0.86rem;
padding: 11px 16px;
border-radius: 40px;
z-index: 1;
cursor: pointer;
font-weight: 700;
overflow: hidden;
transition: color 0.3s ease;
font-family: "Inter", sans-serif;
white-space: nowrap;
}
.nav-btn:hover,
.nav-btn.active {
color: #08090d;
}
/* Ripple */
.ripple {
position: absolute;
border-radius: 50%;
transform: scale(0);
animation: rippleEffect 600ms ease-out forwards;
background: rgba(214, 255, 79, 0.35);
pointer-events: none;
z-index: 10;
}
@keyframes rippleEffect {
to { transform: scale(4); opacity: 0; }
}
/* ════════════════════════════════════════
MENÚ MÓVIL — topbar + drawer lateral
════════════════════════════════════════ */
#menu-toggle { display: none; }
/* Topbar fija solo en móvil: brand + botón hamburguesa */
.mobile-topbar {
display: none; /* oculta en desktop, se activa en el media query */
position: fixed; top: 0; left: 0; right: 0; z-index: 1500;
align-items: center; justify-content: space-between;
padding: 14px 18px;
background: rgba(7,8,12,0.78);
border-bottom: 1px solid var(--line-soft);
backdrop-filter: blur(18px);
}
.mobile-topbar-brand {
display: inline-flex; align-items: center; gap: 10px;
color: var(--text); font-family: "Space Grotesk", sans-serif;
font-weight: 700; font-size: 0.96rem; letter-spacing: -0.03em;
}
.mobile-topbar-brand:hover { color: var(--text); }
.toggle-hamburguesa {
display: flex;
width: 30px; height: 22px;
cursor: pointer; flex-direction: column; justify-content: space-between;
}
.toggle-hamburguesa span {
display: block; height: 2px;
background-color: var(--text); border-radius: 1px;
transition: transform 0.3s ease, opacity 0.3s ease;
}
#menu-toggle:checked ~ .mobile-topbar .toggle-hamburguesa span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
#menu-toggle:checked ~ .mobile-topbar .toggle-hamburguesa span:nth-child(2) { opacity: 0; }
#menu-toggle:checked ~ .mobile-topbar .toggle-hamburguesa span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }
/* Fondo con blur al abrir — deja entrever el sitio detrás, no lo
tapa con un color opaco como antes */
.menu-overlay {
display: none;
position: fixed; inset: 0; z-index: 1490;
background: rgba(7,8,12,0.4);
backdrop-filter: blur(4px);
opacity: 0; pointer-events: none;
transition: opacity 0.4s ease;
cursor: pointer;
}
#menu-toggle:checked ~ .menu-overlay {
opacity: 1; pointer-events: auto;
}
/* Panel del menú — se revela con un efecto circular que crece desde
la esquina donde está el botón hamburguesa (clip-path), en vez de
deslizarse desde un lado. El radio máximo está limitado a un % del
viewport (no un valor fijo en px) para que nunca cubra el 100% de
la pantalla en celulares pequeños como pasaba con la curva-esquina
original de 600px. */
.menu-lateral {
display: none;
flex-direction: column;
position: fixed; inset: 0; z-index: 1501;
background: linear-gradient(180deg, rgba(17,20,29,0.98), rgba(11,13,20,0.99));
clip-path: circle(0% at 36px 36px);
transition: clip-path 0.6s cubic-bezier(0.22,1,0.36,1);
pointer-events: none;
}
#menu-toggle:checked ~ .menu-lateral {
clip-path: circle(85% at 36px 36px);
pointer-events: auto;
}
/* El contenido interno se desplaza un poco y aparece con fade,
ligeramente después de que el círculo empieza a crecer */
.menu-lateral-header,
.menu-lateral-links,
.menu-lateral-footer {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
#menu-toggle:checked ~ .menu-lateral .menu-lateral-header,
#menu-toggle:checked ~ .menu-lateral .menu-lateral-links,
#menu-toggle:checked ~ .menu-lateral .menu-lateral-footer {
opacity: 1;
transform: translateY(0);
transition-delay: 0.18s;
}
.menu-lateral-header {
display: flex; align-items: center; justify-content: space-between;
padding: 18px 20px;
border-bottom: 1px solid var(--line-soft);
}
.menu-lateral-brand {
display: inline-flex; align-items: center; gap: 10px;
color: var(--text); font-family: "Space Grotesk", sans-serif;
font-weight: 700; font-size: 0.92rem; letter-spacing: -0.03em;
}
.menu-lateral-close {
display: grid; place-items: center;
width: 38px; height: 38px; border-radius: 50%;
background: rgba(255,255,255,0.06); border: 1px solid var(--line-soft);
color: var(--text); cursor: pointer; font-size: 1rem;
transition: background 0.22s, transform 0.22s;
}
.menu-lateral-close:hover { background: rgba(255,255,255,0.12); transform: rotate(90deg); }
.menu-lateral-links {
display: flex; flex-direction: column; gap: 10px;
padding: 24px 20px; flex: 1;
}
.menu-link-card {
position: relative; overflow: hidden;
display: flex; align-items: center; gap: 14px;
padding: 14px 12px; border-radius: var(--radius-md);
border: none; background: transparent;
color: var(--muted); font-weight: 700; font-size: 1rem;
transition: transform 0.25s ease, color 0.22s ease;
}
.menu-link-card i {
position: relative; z-index: 1;
font-size: 1rem; width: 22px; text-align: center;
}
.menu-link-card span { position: relative; z-index: 1; }
.menu-link-card:hover,
.menu-link-card.active {
color: var(--text); transform: translateX(5px);
}
.menu-link-card.active { color: var(--text); }
/* Línea activa debajo del link activo */
.menu-link-card.active::after {
content: ""; position: absolute; left: 12px; bottom: 6px;
width: 20px; height: 2px; border-radius: 999px;
background: var(--accent-3);
}
.menu-link-glow { display: none; }
.menu-link-card:nth-child(1) i { color: var(--accent-3); }
.menu-link-card:nth-child(2) i { color: var(--accent-2); }
.menu-link-card:nth-child(3) i { color: var(--accent); }
.menu-link-card:nth-child(4) i { color: var(--accent-3); }
.menu-lateral-footer {
padding: 18px 20px 26px;
border-top: 1px solid var(--line-soft);
}
.menu-lateral-mail {
display: flex; align-items: center; gap: 10px;
color: var(--muted-2); font-size: 0.84rem; font-weight: 700;
word-break: break-all;
}
.menu-lateral-mail i { color: var(--accent-2); }
/* Mostrar topbar y menú solo en móvil */
@media (max-width: 768px) {
.nav-container { display: none; }
.mobile-topbar { display: flex; }
.menu-overlay { display: block; }
.menu-lateral { display: flex; }
/* Reserva el espacio de la topbar fija para que el contenido no
quede tapado debajo de ella, sin depender de que cada plantilla
tenga su propio padding-top calculado correctamente */
body { padding-top: 62px; }
}
/* ════════════════════════════════════════════════
SINGLE-PROYECTOS — página individual de proyecto
════════════════════════════════════════════════ */
/* ── BREADCRUMB ── */
.breadcrumb-row {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin-bottom: 0; color: var(--muted-2);
font-size: 0.86rem; font-weight: 700;
}
.breadcrumb-row a {
color: var(--muted); display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px; border-radius: 999px;
border: 1px solid var(--line-soft);
background: rgba(255,255,255,0.04);
transition: color 0.22s, background 0.22s, transform 0.22s;
}
.breadcrumb-row a:hover { color: white; background: rgba(255,255,255,0.09); transform: translateX(-3px); }
.breadcrumb-sep { color: var(--muted-2); }
.breadcrumb-current { color: var(--muted-2); }
/* ── HERO DEL PROYECTO ── */
.project-hero { padding: 128px 0 80px; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 28px; align-items: start; }
/* Galería */
.gallery-wrap {
display: flex; flex-direction: column; gap: 0;
border-radius: var(--radius-xl); border: 1px solid var(--line);
overflow: hidden; box-shadow: var(--shadow); background: var(--card);
}
/* FIX: antes height fija 480px + object-fit:cover recortaba las
capturas. Ahora la imagen se muestra COMPLETA (contain) sobre una
capa difuminada de la misma foto que rellena el hueco, así
cualquier proporción se ve bien presentada. */
.gallery-main { position: relative; overflow: hidden; background: var(--bg-2); aspect-ratio: 16 / 10; }
.gallery-blur {
position: absolute; inset: -30px; z-index: 0;
background-size: cover; background-position: center;
filter: blur(26px) saturate(1.25) brightness(0.45);
transform: scale(1.12);
}
.gallery-main > img {
position: relative; z-index: 1;
width: 100%; height: 100%; object-fit: contain;
transition: opacity 0.4s ease, transform 0.6s ease;
}
.gallery-main img.fade-in { animation: galImgFade 0.4s ease forwards; }
.gallery-main .gallery-badge, .gallery-main .gallery-expand,
.gallery-main .gallery-counter, .gallery-main .gallery-arrow { z-index: 2; }
@keyframes galImgFade { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } }
.gallery-badge {
position: absolute; left: 20px; top: 20px;
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 14px; border-radius: 999px; color: white;
background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.14);
backdrop-filter: blur(14px); font-size: 0.8rem; font-weight: 900;
}
.gallery-expand {
position: absolute; right: 20px; top: 20px;
width: 40px; height: 40px; display: grid; place-items: center;
border-radius: 50%; color: white;
background: rgba(0,0,0,0.44); border: 1px solid rgba(255,255,255,0.14);
backdrop-filter: blur(12px); cursor: pointer;
transition: background 0.25s, transform 0.25s;
}
.gallery-expand:hover { background: rgba(255,255,255,0.12); transform: scale(1.1); }
.gallery-counter {
position: absolute; right: 20px; bottom: 20px;
padding: 7px 12px; border-radius: 999px; color: white;
background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.12);
backdrop-filter: blur(12px); font-size: 0.78rem; font-weight: 900;
}
.gallery-arrow {
position: absolute; top: 50%; transform: translateY(-50%);
width: 44px; height: 44px; display: grid; place-items: center;
border-radius: 50%; color: white;
background: rgba(0,0,0,0.44); border: 1px solid rgba(255,255,255,0.14);
backdrop-filter: blur(12px); cursor: pointer;
transition: background 0.25s, transform 0.25s, opacity 0.25s;
opacity: 0;
}
.gallery-wrap:hover .gallery-arrow { opacity: 1; }
/* En pantallas táctiles no hay hover: las flechas siempre visibles */
@media (hover: none) { .gallery-arrow { opacity: 1; } }
.gallery-arrow:hover { background: rgba(255,255,255,0.14); }
.gallery-arrow.prev { left: 16px; }
.gallery-arrow.next { right: 16px; }
.gallery-arrow:active { transform: translateY(-50%) scale(0.92); }
.gallery-thumbs {
display: flex; gap: 10px; padding: 14px 16px;
border-top: 1px solid var(--line-soft);
background: rgba(255,255,255,0.025);
overflow-x: auto; scrollbar-width: none;
}
.gallery-thumbs::-webkit-scrollbar { display: none; }
.gallery-thumbs button {
flex: 0 0 80px; height: 58px;
border-radius: 14px; overflow: hidden;
border: 2px solid transparent; padding: 0;
background: var(--bg-2); cursor: pointer;
opacity: 0.5; transition: border-color 0.22s, opacity 0.22s, transform 0.22s;
}
.gallery-thumbs button:hover { opacity: 0.8; transform: translateY(-2px); }
.gallery-thumbs button.active { border-color: var(--accent-3); opacity: 1; }
.gallery-thumbs button img { width: 100%; height: 100%; object-fit: cover; }
/* Info panel: sticky solo aplica en desktop (2 columnas). Correctamente
desactivado con position:static en @media (max-width:1080px) más abajo. */
.info-panel { position: sticky; top: 106px; display: flex; flex-direction: column; gap: 16px; }
.info-card {
padding: 28px; border-radius: var(--radius-lg);
border: 1px solid var(--line);
background: linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.025));
}
.info-card .project-kicker { margin-bottom: 12px; }
.info-card .project-title {
font-family: "Space Grotesk", sans-serif;
font-size: clamp(1.9rem,3.5vw,3rem);
line-height: 0.95; letter-spacing: -0.06em; font-weight: 700;
margin: 0 0 16px;
/* FIX AUDITORÍA: a diferencia de .section-title (línea 84), este título
vive dentro de un card de ancho fijo (.info-card). Sin word-break/
overflow-wrap, un título largo o una palabra sin espacios se sale
del borde de la tarjeta en vez de bajar de línea. */
word-break: break-word; overflow-wrap: break-word;
}
.info-card .project-desc { color: var(--muted); line-height: 1.86; font-size: 0.98rem; margin: 0; }
.info-card .tags { margin-top: 18px; }
.meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.meta-item { padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,0.04); border: 1px solid var(--line-soft); min-width: 0; }
.meta-item small { display: block; color: var(--muted-2); font-size: 0.72rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 5px; }
.meta-item span {
color: var(--text); font-weight: 700; font-size: 0.9rem;
display: block; word-break: break-word; overflow-wrap: anywhere;
white-space: normal; line-height: 1.5;
}
.meta-item .meta-status-dot {
display: flex; flex-direction: row;
align-items: flex-start; gap: 8px;
word-break: normal; overflow-wrap: anywhere; white-space: normal;
min-width: 0;
}
.meta-item .meta-status-dot::before {
content: ""; width: 8px; height: 8px; min-width: 8px; border-radius: 50%;
background: #22c55e; box-shadow: 0 0 10px rgba(34,197,94,0.8);
animation: pulseDotProyecto 2s ease infinite;
flex-shrink: 0; margin-top: 5px; display: block;
}
@keyframes pulseDotProyecto { 0%,100% { box-shadow: 0 0 10px rgba(34,197,94,0.8); } 50% { box-shadow: 0 0 18px rgba(34,197,94,1); } }
.btn-row { display: flex; flex-direction: column; gap: 10px; }
.btn-row .btn-main, .btn-row .btn-ghost { width: 100%; }
/* Stats strip dentro del hero del proyecto */
.project-hero .stats-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 32px; }
.project-hero .stat-card {
padding: 22px; border-radius: var(--radius-md);
border: 1px solid var(--line-soft); background: rgba(255,255,255,0.035);
text-align: center; transition: border-color 0.3s, transform 0.3s, background 0.3s;
}
.project-hero .stat-card:hover { border-color: rgba(214,255,79,0.24); transform: translateY(-6px); background: rgba(214,255,79,0.04); }
.project-hero .stat-card strong {
display: block; font-family: "Space Grotesk", sans-serif;
font-size: 2rem; letter-spacing: -0.06em; margin-bottom: 6px;
background: linear-gradient(135deg, var(--accent-3), var(--accent-2));
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.project-hero .stat-card span { color: var(--muted); font-size: 0.82rem; line-height: 1.5; }
/* Detail blocks (Problema/Solución/Resultado/Qué demuestra) */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
/* FIX AUDITORÍA — causa raíz del overflow horizontal en la vista single:
por spec, los hijos de un grid/flex tienen min-width:auto implícito,
es decir, nunca se encogen más allá del contenido "irrompible" que
contengan (una URL larga, una palabra técnica sin espacios, etc.).
Eso empujaba el ancho del card y desbordaba el contenedor — el tema
lo tapaba con "overflow-x:hidden" en el media query de abajo (línea
~1077), un parche que oculta el síntoma pero no arregla la causa y
además puede recortar sombras/hover de las tarjetas. Con min-width:0
los hijos pueden encogerse y el texto envuelve normalmente. */
.detail-grid > *,
.tech-grid > *,
.future-grid > *,
.related-grid > *,
.feature-list > *,
.project-hero .stats-strip > * { min-width: 0; }
.detail-block {
padding: 30px; border-radius: var(--radius-lg);
border: 1px solid var(--line);
background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02));
transition: border-color 0.3s, transform 0.35s;
}
.detail-block:hover { transform: translateY(-6px); }
.detail-block.purple { background: linear-gradient(135deg, rgba(139,92,246,0.14), transparent 45%), linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.025)); border-color: rgba(139,92,246,0.22); }
.detail-block.lime { background: linear-gradient(135deg, rgba(214,255,79,0.1), transparent 45%), linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02)); border-color: rgba(214,255,79,0.18); }
.detail-block.teal { background: linear-gradient(135deg, rgba(34,211,238,0.1), transparent 45%), linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02)); border-color: rgba(34,211,238,0.18); }
.block-icon {
width: 48px; height: 48px; display: grid; place-items: center;
border-radius: 16px; color: #08090d;
background: linear-gradient(135deg, var(--accent-3), var(--accent-2));
font-size: 1.2rem; margin-bottom: 18px;
}
.detail-block h3 { font-family: "Space Grotesk", sans-serif; font-size: 1.45rem; letter-spacing: -0.05em; margin: 0 0 12px; }
.detail-block p { color: var(--muted); line-height: 1.86; margin: 0; }
.detail-block ul { margin: 12px 0 0; padding-left: 1.1rem; }
.detail-block ul li { color: var(--muted); line-height: 1.86; margin-bottom: 5px; }
/* Feature list (módulos) */
.feature-list { display: flex; flex-direction: column; gap: 0; }
.feature-item {
display: grid; grid-template-columns: 56px 1fr auto;
align-items: center; gap: 20px;
padding: 24px 0; border-bottom: 1px solid var(--line-soft);
transition: padding-left 0.28s ease;
}
.feature-item:last-child { border-bottom: none; }
.feature-item:hover { padding-left: 8px; }
.feature-num {
width: 48px; height: 48px; display: grid; place-items: center;
border-radius: 16px; border: 1px solid var(--line);
background: rgba(255,255,255,0.04);
font-family: "Space Grotesk", sans-serif; font-weight: 700;
color: var(--accent-3); font-size: 0.9rem;
transition: background 0.28s, border-color 0.28s;
}
.feature-item:hover .feature-num { background: rgba(214,255,79,0.1); border-color: rgba(214,255,79,0.28); }
.feature-copy h4 { font-family: "Space Grotesk", sans-serif; font-size: 1.1rem; letter-spacing: -0.04em; margin: 0 0 4px; }
.feature-copy p { color: var(--muted); font-size: 0.88rem; line-height: 1.7; margin: 0; }
.feature-badge { padding: 7px 12px; border-radius: 999px; white-space: nowrap; font-size: 0.74rem; font-weight: 900; }
.badge-green { background: rgba(34,197,94,0.12); color: #4ade80; border: 1px solid rgba(34,197,94,0.2); }
.badge-blue { background: rgba(34,211,238,0.12); color: #22d3ee; border: 1px solid rgba(34,211,238,0.2); }
.badge-purple { background: rgba(139,92,246,0.12); color: #a78bfa; border: 1px solid rgba(139,92,246,0.2); }
.badge-lime { background: rgba(214,255,79,0.1); color: #d6ff4f; border: 1px solid rgba(214,255,79,0.2); }
/* Video */
.video-wrap { position: relative; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); box-shadow: var(--shadow); }
.video-wrap video { width: 100%; max-height: 560px; object-fit: cover; display: block; }
.video-overlay {
position: absolute; inset: 0; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 16px;
background: linear-gradient(to top, rgba(7,8,12,0.92), rgba(7,8,12,0.4));
transition: opacity 0.35s ease; cursor: pointer;
}
.video-overlay.hidden { opacity: 0; pointer-events: none; }
.play-btn {
width: 80px; height: 80px; display: grid; place-items: center;
border-radius: 50%; color: #07080c; background: var(--accent-3);
font-size: 1.8rem;
box-shadow: 0 0 0 16px rgba(214,255,79,0.1), 0 24px 50px rgba(214,255,79,0.2);
transition: transform 0.28s, box-shadow 0.28s;
}
.video-overlay:hover .play-btn { transform: scale(1.08); box-shadow: 0 0 0 22px rgba(214,255,79,0.14), 0 28px 60px rgba(214,255,79,0.28); }
.video-overlay p { color: rgba(255,255,255,0.8); font-weight: 700; letter-spacing: 0.04em; font-size: 0.9rem; }
/* Timeline + tech stack */
.timeline-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
/* ── TIMELINE BLOB — versión definitiva ──
La línea tiene:
- track gris de fondo (::before)
- línea de progreso lima (inyectada por JS como .timeline-progress-line)
- blob blob que se desliza SOBRE la línea (inyectado por JS como .timeline-blob)
- puntos que se activan al pasar sobre ellos
*/
/* ════ TIMELINE — geometría exacta ════
Línea centrada en x=10px (desde borde izq del .timeline)
padding-left del .timeline = 40px
.timeline-dot: 14px ancho, centrado en x=10 → left = -(40-10) - 7 = -37px relativo al item
.timeline-blob: 24px ancho, centrado en x=10 → left = 10 - 12 = -2px desde .timeline
*/
.timeline {
position: relative;
padding-left: 40px;
}
/* Track de fondo — centrado en x=8px, ancho 4px → left=6px */
.timeline::before {
content: ""; position: absolute;
left: 8px; top: 0; bottom: 0;
width: 4px;
background: rgba(255,255,255,0.08);
border-radius: 999px;
z-index: 0;
transform: translateX(-50%);
}
/* Línea de progreso lima — mismo centro */
.timeline-progress-line {
position: absolute;
left: 8px; top: 0;
width: 4px; height: 0%;
background: linear-gradient(to bottom, #d6ff4f, #22d3ee);
border-radius: 999px;
z-index: 1;
transform: translateX(-50%);
transition: height 0.45s cubic-bezier(0.34,1.2,0.64,1);
box-shadow: 0 0 14px rgba(214,255,79,0.6);
}
/* Blob deslizante — centrado en x=8px, ancho 24px → left = 8-12 = -4px */
.timeline-blob {
position: absolute;
left: -4px; top: 0;
width: 24px; height: 30px;
z-index: 4; pointer-events: none;
transition: top 0.5s cubic-bezier(0.34,1.56,0.64,1);
filter: drop-shadow(0 0 12px rgba(214,255,79,0.95));
}
.timeline-blob svg { width: 100%; height: 100%; overflow: visible; }
.timeline-blob .blob-fill { fill: #d6ff4f; }
/* Items — padding-left = 40px, contenido empieza a 40px del borde */
.timeline-item {
position: relative;
padding: 0 0 44px 24px;
cursor: pointer;
transition: opacity 0.3s ease;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item:not(.is-active) { opacity: 0.38; }
.timeline-item:hover:not(.is-active) { opacity: 0.62; }
/* Punto centrado sobre la línea
Posición relativa al .timeline-item:
El item empieza en x=40 (padding-left del .timeline)
La línea está en x=8 (del .timeline)
Entonces desde el item: x = 8 - 40 = -32px
El punto tiene 14px de ancho → left = -32 - 7 = -39px
Pero usamos left relativo al item con position:absolute:
left = -(padding-left del item = 24) - (distancia al centro de línea = 8) - (radio = 7) = -39px
Simplificado: el item tiene padding-left 24px, la línea está a 8px del timeline,
así que desde el item la línea está en -24+8 = -16px, el punto left = -16 - 7 = -23px ✓
*/
.timeline-dot {
display: none;
}
/* Texto */
.timeline-step {
color: var(--muted-2); font-size: 0.76rem; font-weight: 900;
letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px;
transition: color 0.3s ease;
}
.timeline-item.is-active .timeline-step { color: #d6ff4f; }
.timeline-item h4 {
font-family: "Space Grotesk", sans-serif; font-size: 1.55rem;
letter-spacing: -0.055em; margin: 0 0 10px;
transition: color 0.3s ease;
}
.timeline-item.is-active h4 { color: white; }
.timeline-item p { color: var(--muted); line-height: 1.85; margin: 0; }
@media (max-width: 760px) {
.timeline { padding-left: 32px; }
.timeline::before { left: 6px; width: 3px; }
.timeline-progress-line { left: 6px; width: 3px; }
.timeline-blob { left: -6px; width: 18px; height: 24px; }
.timeline-dot { left: -27px; width: 12px; height: 12px; }
.timeline-item { padding-left: 20px; padding-bottom: 32px; }
}
.tech-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.tech-card {
padding: 22px 18px; border-radius: var(--radius-md);
border: 1px solid var(--line-soft); background: rgba(255,255,255,0.035);
display: flex; flex-direction: column; align-items: center;
gap: 6px; text-align: center;
transition: border-color 0.3s, transform 0.3s, background 0.3s;
}
.tech-card:hover { border-color: rgba(214,255,79,0.24); transform: translateY(-6px); background: rgba(214,255,79,0.04); }
.tech-card span { font-family: "Space Grotesk", sans-serif; font-size: 0.9rem; font-weight: 700; letter-spacing: -0.02em; }
.tech-card small { color: var(--muted-2); font-size: 0.75rem; }
/* Mejoras futuras */
.future-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.future-card {
padding: 24px; border-radius: var(--radius-md);
border: 1px solid rgba(34,211,238,0.15); background: rgba(34,211,238,0.04);
transition: border-color 0.3s, transform 0.3s;
}
.future-card:hover { border-color: rgba(34,211,238,0.3); transform: translateY(-5px); }
.future-card i { font-size: 1.5rem; color: var(--accent-2); margin-bottom: 12px; display: block; }
.future-card h4 { font-family: "Space Grotesk", sans-serif; font-size: 1.05rem; letter-spacing: -0.04em; margin: 0 0 8px; }
.future-card p { color: var(--muted); font-size: 0.88rem; line-height: 1.72; margin: 0; }
/* Proyectos relacionados */
.related-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.related-card {
display: block; overflow: hidden; border-radius: var(--radius-lg);
border: 1px solid var(--line); background: var(--card);
color: var(--text);
box-shadow: 0 20px 60px rgba(0,0,0,0.22);
transition: transform 0.34s, border-color 0.34s;
}
.related-card:hover { transform: translateY(-10px); border-color: rgba(214,255,79,0.24); color: var(--text); }
.related-img { height: 200px; overflow: hidden; background: var(--bg-2); position: relative; }
.related-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s, filter 0.5s; }
.related-card:hover .related-img img { transform: scale(1.07); filter: saturate(1.1); }
.related-open {
position: absolute; right: 14px; bottom: 14px;
width: 40px; height: 40px; display: grid; place-items: center;
border-radius: 50%; color: #08090d; background: var(--accent-3);
transform: rotate(-28deg); transition: transform 0.28s;
}
.related-card:hover .related-open { transform: rotate(0) scale(1.05); }
.related-body { padding: 20px; }
.related-kicker { color: var(--accent-2); font-size: 0.74rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; }
.related-body h3 { font-family: "Space Grotesk", sans-serif; font-size: 1.3rem; letter-spacing: -0.05em; margin: 0; }
/* Lightbox — pantalla completa con navegación (creado por JS) */
#lightbox {
display: none; position: fixed; inset: 0; z-index: 5000;
background: rgba(5,6,10,0.92); backdrop-filter: blur(20px);
flex-direction: column; align-items: center; justify-content: center;
animation: lightboxFadeIn 0.3s ease;
}
#lightbox.open { display: flex; }
@keyframes lightboxFadeIn { from { opacity: 0; } to { opacity: 1; } }
.lightbox-stage {
display: flex; align-items: center; justify-content: center;
width: 100%; height: 100%; padding: 64px 90px 84px;
}
#lightbox img {
max-width: 100%; max-height: 100%;
border-radius: 16px; box-shadow: 0 40px 100px rgba(0,0,0,0.7);
object-fit: contain; cursor: default;
}
#lightbox img.fade-in { animation: lbImgZoom 0.32s cubic-bezier(0.22,1,0.36,1); }
@keyframes lbImgZoom { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
#lightbox-close {
position: absolute; top: 22px; right: 22px; z-index: 2;
width: 48px; height: 48px; display: grid; place-items: center;
border-radius: 50%; color: white;
background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.14);
cursor: pointer; font-size: 1.2rem;
transition: background 0.22s, transform 0.22s;
}
#lightbox-close:hover { background: rgba(255,255,255,0.18); transform: rotate(90deg); }
.lightbox-arrow {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
width: 54px; height: 54px; display: grid; place-items: center;
border-radius: 50%; color: white; font-size: 1.25rem;
background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
backdrop-filter: blur(10px); cursor: pointer;
transition: background 0.22s, transform 0.22s;
}
.lightbox-arrow:hover { background: rgba(255,255,255,0.18); transform: translateY(-50%) scale(1.08); }
.lightbox-arrow.prev { left: 22px; }
.lightbox-arrow.next { right: 22px; }
.lightbox-footer {
position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 2;
display: flex; flex-direction: column; align-items: center; gap: 12px;
}
#lightbox-counter {
padding: 7px 16px; border-radius: 999px; color: white;
background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
backdrop-filter: blur(10px); font-size: 0.82rem; font-weight: 900; letter-spacing: 0.06em;
}
#lightbox-dots { display: flex; gap: 8px; }
.lightbox-dot {
width: 9px; height: 9px; border-radius: 50%; padding: 0;
background: rgba(255,255,255,0.28); border: none; cursor: pointer;
transition: background 0.22s, transform 0.22s;
}
.lightbox-dot:hover { background: rgba(255,255,255,0.55); }
.lightbox-dot.active { background: var(--accent-3); transform: scale(1.3); }
@media (max-width: 760px) {
.lightbox-stage { padding: 70px 14px 92px; }
.lightbox-arrow { width: 44px; height: 44px; }
.lightbox-arrow.prev { left: 10px; }
.lightbox-arrow.next { right: 10px; }
}
/* Toast (copiar enlace) */
#toast-proyecto {
position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(80px);
padding: 14px 22px; border-radius: 999px;
background: rgba(17,20,29,0.94); border: 1px solid var(--line);
backdrop-filter: blur(18px); color: white;
font-weight: 700; font-size: 0.88rem;
display: flex; align-items: center; gap: 10px;
z-index: 4000; box-shadow: 0 20px 50px rgba(0,0,0,0.4);
transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), opacity 0.4s ease;
opacity: 0;
}
#toast-proyecto.show { transform: translateX(-50%) translateY(0); opacity: 1; }
#toast-proyecto i { color: var(--accent-3); }
/* Back to top (single proyecto) */
.back-top-proyecto {
position: fixed; right: 24px; bottom: 24px; z-index: 1040;
width: 52px; height: 52px; display: grid; place-items: center;
border-radius: 50%; color: white;
background: rgba(255,255,255,0.08); border: 1px solid var(--line);
backdrop-filter: blur(14px);
transition: transform 0.28s, background 0.28s, opacity 0.28s;
opacity: 0; pointer-events: none;
}
.back-top-proyecto.visible { opacity: 1; pointer-events: all; }
.back-top-proyecto:hover { transform: translateY(-5px); background: rgba(255,255,255,0.14); }
@media (max-width: 1080px) {
.hero-grid { grid-template-columns: 1fr; }
.info-panel { position: static; }
.detail-grid { grid-template-columns: 1fr; }
.project-hero .stats-strip, .exp-detalle-head .stats-strip { grid-template-columns: repeat(2,1fr); }
.tech-grid { grid-template-columns: repeat(3,1fr); }
.related-grid { grid-template-columns: 1fr 1fr; }
.future-grid { grid-template-columns: 1fr 1fr; }
.timeline-layout { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 760px) {
.project-hero { padding-top: 106px; }
.gallery-main { aspect-ratio: 4 / 3; height: auto; }
.project-hero .stats-strip, .exp-detalle-head .stats-strip, .tech-grid, .related-grid, .future-grid { grid-template-columns: 1fr; }
}
/* ════════════════════════════════════════════════
MODO EXPERIMENTO — diferenciación visual para
proyectos del grupo "experimento"
════════════════════════════════════════════════ */
/* Redefine el acento principal (lima) a cian dentro de esta
página: como casi todo el diseño usa var(--accent-3) para
botones, glows, bordes activos y números destacados, este
único cambio de variable local recolorea todo en cascada sin
tener que duplicar selectores. */
.single-experimento {
--accent-3: #22d3ee;
}
.lab-tag {
display: inline-flex; align-items: center; gap: 10px;
padding: 10px 18px; border-radius: 999px; margin-bottom: 22px;
background: rgba(34,211,238,0.08);
border: 1px solid rgba(34,211,238,0.25);
color: #8fe9f5; font-size: 0.84rem; font-weight: 700;
}
.lab-tag i { color: #22d3ee; }
/* El kicker y el botón principal usan --accent (morado) en vez de
--accent-3 en algunos puntos del diseño original; los alineamos
también al cian para que el modo experimento se sienta consistente. */
.single-experimento .btn-main {
background: linear-gradient(135deg, #22d3ee, #8b5cf6);
}
/* ════════════════════════════════════════════════
BANNER "EXPLORAR EXPERIMENTOS" — page-proyectos.php
════════════════════════════════════════════════ */
.lab-banner {
display: flex; align-items: center; gap: 24px;
padding: 28px 30px; border-radius: var(--radius-xl);
border: 1px solid rgba(34,211,238,0.18);
background:
radial-gradient(circle at 85% 10%, rgba(34,211,238,0.12), transparent 40%),
linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
color: var(--text); text-decoration: none;
transition: border-color 0.3s, transform 0.3s;
}
.lab-banner:hover { border-color: rgba(34,211,238,0.34); transform: translateY(-4px); color: var(--text); }
.lab-banner-copy { display: flex; align-items: center; gap: 18px; flex: 1; min-width: 0; }
.lab-banner-icon {
width: 52px; height: 52px; flex: 0 0 52px; display: grid; place-items: center;
border-radius: 16px; font-size: 1.3rem; color: #08090d;
background: linear-gradient(135deg, #22d3ee, #8b5cf6);
}
.lab-banner-copy h3 { font-family: "Space Grotesk", sans-serif; font-size: 1.15rem; letter-spacing: -0.04em; margin: 0 0 5px; }
.lab-banner-copy p { color: var(--muted); font-size: 0.86rem; margin: 0; max-width: 480px; }
.lab-banner-thumbs { display: flex; }
.lab-banner-thumbs img {
width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
border: 2px solid var(--bg); margin-left: -14px;
box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
.lab-banner-thumbs img:first-child { margin-left: 0; }
.lab-banner-arrow {
width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center;
border-radius: 50%; border: 1px solid var(--line);
transition: transform 0.3s, background 0.3s;
}
.lab-banner:hover .lab-banner-arrow { transform: translateX(4px); background: rgba(34,211,238,0.12); }
/* ════════════════════════════════════════════════
CARRUSEL HERO DE EXPERIMENTOS — page-experimentos.php
════════════════════════════════════════════════ */
.exp-hero {
position: relative; min-height: 100vh;
display: flex; align-items: flex-end;
overflow: hidden; padding-top: 128px;
}
.exp-hero-bg-stack { position: absolute; inset: 0; z-index: 0; }
.exp-hero-bg {
position: absolute; inset: 0;
background-size: cover; background-position: center;
opacity: 0; transition: opacity 0.9s ease;
}
.exp-hero-bg.is-active { opacity: 1; }
.exp-hero-overlay {
position: absolute; inset: 0;
background:
linear-gradient(to top, rgba(7,8,12,0.96) 10%, rgba(7,8,12,0.55) 55%, rgba(7,8,12,0.35) 100%),
linear-gradient(to right, rgba(7,8,12,0.55), transparent 60%);
}
.exp-hero-content {
position: relative; z-index: 1; width: 100%;
padding-bottom: 56px;
padding-inline: clamp(20px, 5vw, 64px);
}
.exp-hero-top {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 40px;
}
.exp-back {
display: inline-flex; align-items: center; gap: 8px;
color: var(--muted); font-size: 0.86rem; font-weight: 700;
padding: 9px 16px; border-radius: 999px;
border: 1px solid rgba(255,255,255,0.16);
background: rgba(255,255,255,0.05);
transition: color 0.22s, background 0.22s;
}
.exp-back:hover { color: var(--text); background: rgba(255,255,255,0.1); }
.exp-lab-tag {
display: inline-flex; align-items: center; gap: 9px;
padding: 9px 16px; border-radius: 999px;
background: rgba(34,211,238,0.1); border: 1px solid rgba(34,211,238,0.28);
color: #8fe9f5; font-size: 0.8rem; font-weight: 700;
}
.exp-lab-tag i { color: #22d3ee; }
/* Dos columnas: texto a la izquierda, carrusel a la derecha —
igual al patrón de referencia (tipo "Globe Express") */
.exp-hero-grid {
display: grid; grid-template-columns: 1.05fr 0.95fr;
gap: 40px; align-items: center;
}
.exp-hero-info { position: relative; }
.exp-info-block {
position: absolute; inset: 0;
opacity: 0; transform: translateY(14px); pointer-events: none;
transition: opacity 0.5s ease, transform 0.5s ease;
}
.exp-info-block.is-active {
position: relative; opacity: 1; transform: translateY(0); pointer-events: auto;
}
.exp-kicker {
display: block; color: #22d3ee; font-size: 0.8rem; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 14px;
}
.exp-title {
font-family: "Space Grotesk", sans-serif; font-weight: 700;
font-size: clamp(2.1rem, 4vw, 3.6rem); line-height: 0.98; letter-spacing: -0.05em;
margin: 0 0 16px;
word-break: break-word; overflow-wrap: break-word; /* FIX AUDITORÍA: overflow en columna angosta */
}
.exp-desc { color: rgba(255,255,255,0.78); font-size: 1rem; line-height: 1.7; max-width: 42ch; margin: 0 0 26px; }
.exp-ver-detalle {
display: inline-flex; align-items: center; gap: 10px;
padding: 13px 22px; border-radius: 999px; border: none; cursor: pointer;
background: linear-gradient(135deg, #22d3ee, #8b5cf6); color: #08090d;
font-weight: 800; font-size: 0.92rem;
transition: transform 0.25s, box-shadow 0.25s;
}
.exp-ver-detalle:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(34,211,238,0.28); }
/* Columna derecha: carrusel vertical de tarjetas + controles debajo */
.exp-carousel { display: flex; flex-direction: column; align-items: center; gap: 22px; }
/* Contenedor del abanico: tamaño fijo, las cartas se posicionan
absolutamente dentro y JS calcula su offset diagonal según la
distancia al índice activo (efecto baraja de naipes) */
.exp-stack {
position: relative; width: 100%; max-width: 300px; height: 260px;
}
.exp-card {
position: absolute; top: 0; left: 50%;
width: 150px; height: 210px; margin-left: -75px;
border-radius: var(--radius-md); overflow: hidden;
background-size: cover; background-position: center;
border: 2px solid transparent; cursor: pointer; padding: 0;
transition: transform 0.45s cubic-bezier(0.22,1,0.36,1), opacity 0.45s ease, border-color 0.3s, z-index 0s;
}
.exp-card-overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(7,8,12,0.85), rgba(7,8,12,0.05) 55%);
transition: opacity 0.3s;
}
.exp-card-title {
position: absolute; left: 12px; right: 12px; bottom: 12px;
color: white; font-family: "Space Grotesk", sans-serif;
font-weight: 700; font-size: 0.8rem; text-align: left; letter-spacing: -0.02em;
opacity: 0; transition: opacity 0.3s;
}
.exp-card.is-active {
border-color: #22d3ee;
box-shadow: 0 18px 40px rgba(34,211,238,0.24);
}
.exp-card.is-active .exp-card-title { opacity: 1; }
/* Controles debajo del carrusel: flechas + barra de progreso + contador */
.exp-carousel-controls { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 300px; }
.exp-carousel-arrow {
flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center;
border-radius: 50%; color: white; cursor: pointer;
background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
backdrop-filter: blur(10px);
transition: background 0.22s, transform 0.22s;
}
.exp-carousel-arrow:hover { background: rgba(255,255,255,0.16); transform: translateY(-2px); }
.exp-carousel-progress {
flex: 1; height: 2px; border-radius: 2px;
background: rgba(255,255,255,0.16); overflow: hidden;
}
.exp-carousel-progress span {
display: block; height: 100%; border-radius: 2px;
background: linear-gradient(90deg, #22d3ee, #8b5cf6);
transition: width 0.4s ease;
}
.exp-carousel-counter {
flex: 0 0 auto; color: rgba(255,255,255,0.6);
font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 0.92rem;
}
.exp-carousel-counter #exp-counter-current { color: white; }
.exp-detalle { transition: opacity 0.3s ease; }
.exp-detalle.is-hidden { display: none; }
.exp-detalle-head { padding-top: 64px; }
/* Dos columnas: texto a la izquierda, galería a la derecha —
en vez de apilados (que dejaba una foto gigante debajo de una
card centrada, desbalanceado) */
.exp-detalle-grid {
display: grid; grid-template-columns: 1fr 0.9fr;
gap: 36px; align-items: start; margin-bottom: 36px;
}
.exp-detalle-intro {
padding: 30px 32px; border-radius: var(--radius-lg);
border: 1px solid rgba(34,211,238,0.16);
background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
text-align: left; height: 100%;
}
.exp-detalle-intro .exp-kicker { margin-bottom: 12px; }
.exp-detalle-title {
font-family: "Space Grotesk", sans-serif; font-weight: 700;
font-size: clamp(1.6rem, 2.4vw, 2.1rem); letter-spacing: -0.05em; line-height: 1.08;
margin: 0 0 14px;
/* FIX AUDITORÍA: título dentro de .exp-detalle-intro (card de ancho fijo,
border + padding). Igual que .info-card .project-title, necesita poder
partir palabras largas para no desbordar la tarjeta. */
word-break: break-word; overflow-wrap: break-word;
}
.exp-detalle-desc { color: var(--muted); font-size: 0.96rem; line-height: 1.75; margin: 0 0 24px; }
.exp-detalle-meta {
display: flex; gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
.exp-detalle-meta .meta-item { flex: 0 0 auto; min-width: 150px; padding: 16px 20px; }
.exp-detalle-tags { margin: 0; }
/* Galería contenida — antes era a ancho completo y se veía
gigante; ahora ocupa solo su columna, con altura moderada */
.exp-detalle-gallery .gallery-main { aspect-ratio: 4 / 3; height: auto; }
/* FIX AUDITORÍA — .stats-strip reusa las mismas clases que en
single-proyectos.php (.project-hero), pero acá el contenedor real
es .exp-detalle-head y ese combo nunca tuvo display:grid definido.
Sin layout, los .stat-card caían en display:block apilados sin gap
ni margin — de ahí el apiñamiento. Se replica el mismo patrón visual
que .project-hero .stat-card para mantener consistencia. */
.exp-detalle-head .stats-strip {
display: grid; grid-template-columns: repeat(4,1fr); gap: 14px;
margin-bottom: 8px;
}
.exp-detalle-head .stats-strip > * { min-width: 0; }
.exp-detalle-head .stat-card {
padding: 22px; border-radius: var(--radius-md);
border: 1px solid var(--line-soft); background: rgba(255,255,255,0.035);
text-align: center; transition: border-color 0.3s, transform 0.3s, background 0.3s;
}
.exp-detalle-head .stat-card:hover { border-color: rgba(214,255,79,0.24); transform: translateY(-6px); background: rgba(214,255,79,0.04); }
.exp-detalle-head .stat-card strong {
display: block; font-family: "Space Grotesk", sans-serif;
font-size: clamp(2.4rem, 4vw, 2.9rem); letter-spacing: -0.07em; margin-bottom: 8px;
background: linear-gradient(135deg, var(--accent-3), var(--accent-2));
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 18px rgba(214,255,79,0.28));
}
.exp-detalle-head .stat-card span { color: var(--muted); font-size: 0.88rem; line-height: 1.55; }
@media (max-width: 1080px) {
.exp-detalle-grid { grid-template-columns: 1fr; gap: 24px; }
.exp-detalle-gallery .gallery-main { aspect-ratio: 16 / 10; }
}
@media (max-width: 760px) {
.exp-detalle-intro { padding: 24px 22px; }
.exp-detalle-gallery .gallery-main { aspect-ratio: 4 / 3; }
}
@media (max-width: 1080px) {
.exp-hero-grid { grid-template-columns: 1fr; gap: 36px; }
.exp-title { font-size: clamp(2.1rem, 6vw, 3rem); }
.exp-carousel { align-items: flex-start; }
.exp-stack, .exp-carousel-controls { max-width: 280px; }
}
@media (max-width: 760px) {
.exp-hero { padding-top: 110px; min-height: auto; padding-bottom: 20px; }
.exp-hero-content { padding-bottom: 30px; padding-inline: 6px; }
.exp-hero-top { flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.exp-back { font-size: 0.8rem; padding: 8px 14px; }
.exp-lab-tag { font-size: 0.74rem; padding: 8px 13px; }
.exp-hero-grid { gap: 30px; }
.exp-title { font-size: clamp(1.9rem, 8vw, 2.6rem); }
.exp-desc { font-size: 0.92rem; max-width: none; }
.exp-ver-detalle { width: 100%; justify-content: center; padding: 14px 20px; }
.exp-carousel { align-items: center; }
.exp-stack { max-width: 240px; height: 220px; }
.exp-card { width: 128px; height: 178px; margin-left: -64px; }
.exp-carousel-controls { max-width: 240px; }
.exp-carousel-arrow { flex: 0 0 38px; width: 38px; height: 38px; }
.exp-carousel-counter { display: none; }
.lab-banner { flex-direction: column; align-items: flex-start; }
.lab-banner-thumbs { display: none; }
}
@media (max-width: 420px) {
.exp-stack { max-width: 210px; height: 196px; }
.exp-card { width: 112px; height: 158px; margin-left: -56px; }
.exp-carousel-controls { max-width: 210px; }
}
/* ════════════════════════════════════════
SECCIÓN EXPLORA MI TRABAJO — front-page.php
════════════════════════════════════════ */
.explora-grid {
display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 36px;
}
.explora-card {
position: relative; overflow: hidden;
display: flex; flex-direction: column; gap: 14px;
padding: 30px 28px; border-radius: var(--radius-xl);
border: 1px solid var(--line-soft);
background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02));
color: var(--text); text-decoration: none;
transition: border-color 0.3s, transform 0.35s;
}
.explora-card:hover { border-color: rgba(214,255,79,0.24); transform: translateY(-8px); color: var(--text); }
.explora-icon {
width: 52px; height: 52px; display: grid; place-items: center;
border-radius: 18px; font-size: 1.3rem; color: #08090d;
background: linear-gradient(135deg, var(--accent-3), var(--accent-2));
}
.explora-num {
font-size: 0.74rem; font-weight: 800; text-transform: uppercase;
letter-spacing: 0.12em; color: var(--accent-2);
}
.explora-card h3 {
font-family: "Space Grotesk", sans-serif; font-size: 1.25rem;
letter-spacing: -0.04em; margin: 0;
}
.explora-card p { color: var(--muted); font-size: 0.9rem; line-height: 1.75; margin: 0; flex: 1; }
.explora-cta {
display: inline-flex; align-items: center; gap: 8px;
font-size: 0.84rem; font-weight: 700; color: var(--accent-3);
margin-top: 4px;
}
@media (max-width: 900px) { .explora-grid { grid-template-columns: 1fr; } }
/* ═══════════════════════════════════════════
CORRECCIONES Y MEJORAS — Auditoría 2026
═══════════════════════════════════════════ */
/* ─── FIX #10: nav-btn ahora es — resetear estilos de enlace ─── */
a.nav-btn {
text-decoration: none;
display: inline-block;
}
a.nav-btn:hover,
a.nav-btn.active {
color: #08090d;
text-decoration: none;
}
/* ─── FIX #38: Inline styles de hero-stat-stack movidos a CSS ─── */
.hero-stat-stack {
display: flex;
flex-direction: column;
justify-content: center;
gap: 14px;
padding: 22px 32px;
}
.hero-stat-stack-row {
display: flex;
gap: 12px;
align-items: center;
}
.stat-tag {
font-size: 0.78rem;
font-weight: 800;
color: white;
}
.stat-tag--accent { color: var(--accent-3); }
.stat-tag--muted { color: var(--muted-2); }
/* ─── FIX #38: hero-mobile-desc y hero-mobile-btn desde inline ─── */
.hero-mobile-desc {
color: var(--muted);
font-size: 0.88rem;
max-width: 300px;
margin: 0 auto 16px;
}
.hero-mobile-btn {
padding: 11px 18px;
font-size: 0.84rem;
}
/* ─── FIX #38: section--no-top para evitar padding-top doble ─── */
.section--no-top { padding-top: 0; }
/* ─── FIX #38: section-title helpers (evitan inline font-size) ─── */
.section-title--skills,
.section-title--approach,
.section-title--why {
font-family: "Space Grotesk", sans-serif;
font-size: clamp(2.2rem, 4vw, 4rem);
letter-spacing: -0.06em;
font-weight: 700;
}
.section-title--skills { margin-bottom: 36px; }
.section-title--approach { margin-bottom: 12px; }
.section-title--why { margin-bottom: 40px; }
/* FIX AUDITORÍA: single-proyectos.php y page-experimentos.php repetían
style="margin-bottom:30/32/34/36px" a mano en cada , un valor
distinto y arbitrario por sección sin ninguna razón de diseño — de ahí
la sensación de espaciado inconsistente entre bloques del single. Se
reemplazan por 2 pasos de una escala fija de 8px, reutilizables en
cualquier plantilla. */
.section-title--space-md { margin-bottom: 32px; }
.section-title--space-lg { margin-bottom: 40px; }
/* section-lead: párrafo introductorio debajo del h2 */
.section-lead {
color: var(--muted);
margin-bottom: 28px;
max-width: 560px;
}
/* ─── FIX #24: why-subtitle reemplaza el H2 duplicado ─── */
.why-subtitle {
font-family: "Space Grotesk", sans-serif;
font-size: clamp(1.4rem, 2.5vw, 2rem);
font-weight: 700;
letter-spacing: -0.04em;
color: var(--text);
margin-bottom: 20px;
}
/* ─── FIX #38: bento-card helpers (evitan inline styles) ─── */
.bento-card--centered {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.bento-card--available {
background: linear-gradient(135deg, rgba(214,255,79,0.12), rgba(34,211,238,0.06));
border-color: rgba(214,255,79,0.2);
}
/* ─── FIX #38: approach-card--accent (reemplaza inline style) ─── */
.approach-card--accent {
border-color: rgba(214,255,79,0.25);
background: linear-gradient(160deg, rgba(214,255,79,0.08), rgba(34,211,238,0.04));
}
.approach-num--faded { color: rgba(214,255,79,0.15); }
/* ─── FIX #38: why-mini--highlight (reemplaza inline style) ─── */
.why-mini--highlight {
border-color: rgba(214,255,79,0.2);
background: rgba(214,255,79,0.04);
}
/* ─── FIX #20: tl-dot--accent (reemplaza inline styles del timeline) ─── */
.tl-dot--accent {
background: rgba(214,255,79,0.1);
border-color: rgba(214,255,79,0.3);
color: var(--accent-3);
}
.tl-date--accent { color: var(--accent-3); }
/* ─── FIX #37: Breakpoints unificados — eliminada duplicación 760px/768px ─── */
/* El breakpoint de 768px ya existía en media query line 1395 con .nav-container.
Añadimos aquí las reglas que faltaban para tablet (768px) y mobile pequeño (480px) */
@media (max-width: 480px) {
/* Teléfonos pequeños — iPhone SE, Galaxy A-series */
.hero-title { font-size: clamp(1.8rem, 8vw, 2.4rem); }
.hero-actions { flex-direction: column; }
.hero-actions .magnetic-btn,
.hero-actions .ghost-btn { width: 100%; justify-content: center; }
.contact-actions { flex-direction: column; }
.contact-actions .magnetic-btn,
.contact-actions .ghost-btn { width: 100%; justify-content: center; }
.explora-grid { grid-template-columns: 1fr; }
.projects-board { grid-template-columns: 1fr; }
.hero-stats-bar { grid-template-columns: 1fr 1fr; }
.hero-stat-stack { display: none; } /* Demasiado info para móvil muy pequeño */
.sobre-mi-stats { flex-direction: column; gap: 16px; }
.section { padding: 64px 0; }
}
@media (max-width: 768px) {
/* Tablet y móvil — reglas que complementan las existentes */
.hero-shell { grid-template-columns: 1fr; }
.hero-side { display: none; } /* En móvil el hero-side se oculta */
.projects-head { flex-direction: column; gap: 20px; }
.why-grid { grid-template-columns: 1fr; }
/* Stat stack en mobile queda en 2 columnas */
.hero-stats-bar { grid-template-columns: 1fr 1fr; }
}
/* ═══════════════════════════════════════════
FOOTER PROFESIONAL — 4 columnas + barra inferior
═══════════════════════════════════════════ */
.site-footer {
margin-top: 90px;
border-top: 1px solid var(--line-2);
background:
radial-gradient(circle at 12% 0%, rgba(139,92,246,0.10), transparent 42%),
radial-gradient(circle at 88% 10%, rgba(34,211,238,0.07), transparent 38%),
linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.25));
padding: 64px 0 28px;
}
.footer-top {
display: grid;
grid-template-columns: 1.4fr 0.8fr 1fr 1fr;
gap: 44px;
padding-bottom: 44px;
border-bottom: 1px solid var(--line-2);
}
/* Col 1 — Marca */
.footer-logo {
display: inline-flex; align-items: center; gap: 12px;
font-family: "Space Grotesk", sans-serif;
font-weight: 700; font-size: 1.15rem; letter-spacing: -0.03em;
color: var(--text); transition: color 0.22s;
}
.footer-logo:hover { color: var(--accent-3); }
.footer-tagline {
margin: 16px 0 20px; max-width: 320px;
color: var(--muted); font-size: 0.92rem; line-height: 1.75;
}
.footer-badge {
display: inline-flex; align-items: center; gap: 9px;
padding: 9px 15px; border-radius: 999px;
font-size: 0.78rem; font-weight: 800; color: var(--text);
background: rgba(214,255,79,0.07); border: 1px solid rgba(214,255,79,0.22);
}
.footer-badge-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--accent-3);
box-shadow: 0 0 0 0 rgba(214,255,79,0.5);
animation: footerPulse 2.2s ease-out infinite;
}
@keyframes footerPulse {
0% { box-shadow: 0 0 0 0 rgba(214,255,79,0.45); }
70% { box-shadow: 0 0 0 9px rgba(214,255,79,0); }
100% { box-shadow: 0 0 0 0 rgba(214,255,79,0); }
}
/* Encabezados de columna */
.footer-heading {
margin: 0 0 18px;
font-size: 0.74rem; font-weight: 900;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--muted-2);
}
/* Listas de enlaces */
.footer-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.footer-nav a {
display: inline-flex; align-items: center; gap: 9px;
color: var(--muted); font-size: 0.92rem; font-weight: 600;
transition: color 0.22s, transform 0.22s;
}
.footer-nav a:hover { color: var(--accent-3); transform: translateX(3px); }
.footer-nav a i { font-size: 0.95rem; color: var(--muted-2); transition: color 0.22s; }
.footer-nav a:hover i { color: var(--accent-3); }
.footer-contact a { word-break: break-all; }
/* Col 4 — CTA */
.footer-col-cta p { margin: 0 0 18px; color: var(--muted); font-size: 0.92rem; line-height: 1.7; }
.footer-cta-btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 13px 22px; border-radius: 999px;
font-size: 0.9rem; font-weight: 800; color: #08090d;
background: var(--accent-3);
transition: transform 0.24s, box-shadow 0.24s;
}
.footer-cta-btn:hover {
color: #08090d; transform: translateY(-2px);
box-shadow: 0 14px 34px rgba(214,255,79,0.22);
}
.footer-cta-btn i { transition: transform 0.24s; }
.footer-cta-btn:hover i { transform: translate(2px, -2px); }
.footer-cv-link {
display: inline-flex; align-items: center; gap: 8px;
margin-top: 14px; color: var(--muted); font-size: 0.86rem; font-weight: 700;
transition: color 0.22s;
}
.footer-cv-link:hover { color: var(--accent-2); }
/* Barra inferior */
.footer-bottom {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; flex-wrap: wrap; padding-top: 24px;
}
.footer-copy, .footer-made { color: var(--muted-2); font-size: 0.82rem; }
.footer-made i { color: var(--accent); font-size: 0.75rem; }
.footer-top-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 18px; border-radius: 999px;
font-size: 0.82rem; font-weight: 800; color: var(--muted);
background: rgba(255,255,255,0.04); border: 1px solid var(--line);
cursor: pointer; transition: color 0.22s, background 0.22s, transform 0.22s;
}
.footer-top-btn:hover { color: var(--text); background: rgba(255,255,255,0.09); transform: translateY(-2px); }
@media (max-width: 1080px) {
.footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 640px) {
/* En pantallas angostas las pastillas sociales van en 1 columna
para que el email no quede cortado */
.hero-social { grid-template-columns: 1fr; }
.site-footer { padding: 48px 0 22px; }
.footer-top { grid-template-columns: 1fr; gap: 32px; }
.footer-bottom { flex-direction: column; text-align: center; }
}
/* ── MIGAS DE PAN — ubicaciones ── */
.breadcrumb-holder { margin-bottom: 22px; }
/* Sobre mí: capa flotante sobre el hero a pantalla completa */
.breadcrumb-overlay {
position: absolute; top: 96px; left: 0; right: 0; z-index: 30;
}
@media (max-width: 760px) { .breadcrumb-overlay { top: 78px; } }
/* Experimentos: compacta dentro del hero oscuro */
.exp-breadcrumb { flex-wrap: wrap; }
.exp-breadcrumb a, .exp-breadcrumb .breadcrumb-current { font-size: 0.84rem; }
/* ═══════════════════════════════════════════
CORRECCIONES CRÍTICAS VISUALES — Ronda 3
═══════════════════════════════════════════ */
/* NOTA AUDITORÍA: este bloque duplicaba por completo ".status-dot" /
".meta-item span" ya definidos arriba (línea ~1518) — se eliminó para
dejar una sola fuente de verdad. Ver ".meta-status-dot" y ".meta-item". */
/* ─── Responsive timeline ─── */
@media (max-width: 760px) {
.timeline { padding-left: 30px; }
.timeline::before { left: 5px; }
.timeline-dot { left: -18px; width: 14px; height: 14px; }
.timeline-item { padding-left: 22px; padding-bottom: 32px; }
}
/* ═══════════════════════════════════════════
CURSOR BLOB — reemplaza el cursor del sistema
═══════════════════════════════════════════ */
*, *::before, *::after { cursor: none !important; }
#cursor-dot, #cursor-ring { display: none !important; }
#cursor-blob {
position: fixed; top: 0; left: 0;
width: 28px; height: 28px;
pointer-events: none; z-index: 99999;
transform: translate(-50%, -50%);
transition: width 0.2s cubic-bezier(0.34,1.56,0.64,1),
height 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
#cursor-blob svg { width: 100%; height: 100%; overflow: visible; }
#cursor-blob .blob-path {
fill: #d6ff4f;
filter: drop-shadow(0 0 10px rgba(214,255,79,0.9))
drop-shadow(0 0 24px rgba(214,255,79,0.4));
}
body.cursor-hover-active #cursor-blob {
width: 36px; height: 36px;
}
body.cursor-hover-active #cursor-blob .blob-path {
fill: rgba(214,255,79,0.85);
filter: drop-shadow(0 0 18px rgba(214,255,79,1))
drop-shadow(0 0 40px rgba(214,255,79,0.5));
}
body.cursor-clicking #cursor-blob {
width: 20px; height: 20px;
}
body.cursor-clicking #cursor-blob .blob-path {
fill: #eeff6e;
filter: drop-shadow(0 0 6px rgba(214,255,79,1));
}
/* ═══════════════════════════════════════════
ZOOM + BLUR al hacer clic en cards
═══════════════════════════════════════════ */
.card-focus-overlay {
position: fixed; inset: 0;
background: rgba(3, 4, 6, 0.82);
backdrop-filter: blur(18px) saturate(0.6);
-webkit-backdrop-filter: blur(18px) saturate(0.6);
z-index: 9000;
opacity: 0; pointer-events: none;
transition: opacity 0.35s ease;
/* clip-path se aplica via JS para crear el hueco donde está la card */
}
.card-focus-overlay.active {
opacity: 1; pointer-events: auto;
}
.card-focused {
transform: scale(1.04) !important;
box-shadow: 0 40px 120px rgba(0,0,0,0.6) !important;
transition:
transform 0.4s cubic-bezier(0.34,1.56,0.64,1),
box-shadow 0.4s ease !important;
}
/* Ocultar cursor en móvil y restablecer cursor del sistema */
@media (hover: none) {
#cursor-blob { display: none !important; }
*, *::before, *::after { cursor: auto !important; }
}
/* ── Zoom+blur también aplica a tl-content (timeline sobre-mi) ── */
.tl-content.card-focused {
position: relative !important;
z-index: 850 !important;
transform: scale(1.03) translateY(-3px) !important;
box-shadow:
0 0 0 1px rgba(214,255,79,0.35),
0 30px 80px rgba(0,0,0,0.7) !important;
transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s ease !important;
border-radius: var(--radius-md);
background: rgba(255,255,255,0.04);
padding: 16px;
}
/* Elementos dentro de scroll horizontal — asegurar que el zoom sea visible */
.approach-scroll-wrap {
overflow-x: auto;
overflow-y: visible;
}
.approach-card.card-focused {
z-index: 850 !important;
}
/* ── Borde animado que rodea la card enfocada ── */
.card-focus-border {
position: fixed;
pointer-events: none;
z-index: 9001;
opacity: 0;
background: transparent;
transition: opacity 0.2s ease;
/* El borde se dibuja con un gradiente cónico que rota */
--border-size: 2px;
padding: var(--border-size);
}
.card-focus-border::before,
.card-focus-border::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
}
/* Fondo del borde — muestra el recorrido */
.card-focus-border::before {
background: conic-gradient(
from 0deg,
#d6ff4f 0%,
#d6ff4f var(--progress, 0%),
rgba(255,255,255,0.08) var(--progress, 0%),
rgba(255,255,255,0.08) 100%
);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
padding: 2px;
opacity: 0;
transition: opacity 0.2s ease;
}
.card-focus-border.active {
opacity: 1;
}
.card-focus-border.active::before {
opacity: 1;
animation: borderDraw 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards,
borderPulse 2s ease-in-out 0.7s infinite;
}
@keyframes borderDraw {
0% { --progress: 0%; }
100% { --progress: 100%; }
}
@keyframes borderPulse {
0%, 100% {
box-shadow: 0 0 12px rgba(214,255,79,0.3);
opacity: 1;
}
50% {
box-shadow: 0 0 28px rgba(214,255,79,0.6);
opacity: 0.85;
}
}
@property --progress {
syntax: '';
inherits: false;
initial-value: 0%;
}