/* ===================================================================== Portfolio Digital Pro · estilos del sitio público Aesthetic: Visioneon · dark · neon gradient · tech ===================================================================== */ /* ---------- Tokens de diseño ---------- */ :root{ --bg-0:#0a0a0d; --bg-1:#101015; --bg-2:#16161e; --panel:#14141b; --panel-2:#1d1d27; --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.14); --text:#eaeaea; --text-mute:#b9b9c2; --text-dim:#7a7a85; /* Colores Visioneon */ --cyan:#00d4ff; --blue:#4b6cff; --violet:#7b5cff; --purple:#a259ff; /* Alias para mantener compatibilidad con el CSS original */ --gold:#00d4ff; --gold-soft:#a259ff; --gold-deep:#4b6cff; --accent:#00d4ff; --brand-gradient:linear-gradient(90deg,#00d4ff 0%,#4b6cff 38%,#7b5cff 68%,#a259ff 100%); --brand-gradient-soft:linear-gradient(135deg,rgba(0,212,255,.18),rgba(75,108,255,.14),rgba(162,89,255,.18)); --success:#6ec588; --danger:#e36a6a; --warning:#e0b34a; --info:#6aa5e3; --radius:20px; --radius-lg:32px; --radius-xl:44px; --shadow-sm:0 4px 20px rgba(0,0,0,.25); --shadow:0 20px 60px rgba(0,0,0,.4); --shadow-gold:0 20px 60px rgba(0,212,255,.18); --shadow-brand:0 20px 60px rgba(162,89,255,.22); --font-display:'Fraunces','Cormorant Garamond',Georgia,serif; --font-body:'Plus Jakarta Sans','Inter',system-ui,-apple-system,Segoe UI,sans-serif; --font-mono:'JetBrains Mono','Courier New',monospace; } /* ====== MODO CLARO ====== Se activa cuando está presente. Mantiene los acentos cyan/blue/violet pero invierte los fondos y texto. */ html[data-theme="light"] { --bg-0: #fafafa; --bg-1: #ffffff; --bg-2: #f4f4f7; --panel: #ffffff; --panel-2: #f0f0f5; --line: rgba(0,0,0,.08); --line-strong: rgba(0,0,0,.16); --text: #1a1a23; --text-mute: #555560; --text-dim: #888894; --shadow-sm: 0 4px 20px rgba(0,0,0,.06); --shadow: 0 20px 60px rgba(0,0,0,.10); --shadow-gold: 0 20px 60px rgba(0,212,255,.25); --shadow-brand: 0 20px 60px rgba(162,89,255,.18); } html[data-theme="light"] body::before { background: radial-gradient(ellipse 60% 50% at 15% 0%, rgba(0,212,255,.08), transparent 60%), radial-gradient(ellipse 80% 60% at 95% 100%, rgba(162,89,255,.06), transparent 60%), radial-gradient(circle at 50% 50%, rgba(0,0,0,.02) 1px, transparent 1px) !important; } html[data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg-2); } html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #ccc; } html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #999; } /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} /* El fondo principal va en HTML, no en body, así el canvas dentro del body (z-index 0) se ve por encima del fondo en TODA la página. */ html { background: var(--bg-0); } body{ margin:0; /* SIN background aquí: el canvas de partículas (hijo del body) se ve a través */ background: transparent; color:var(--text); font-family:var(--font-body); font-weight:400; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* Anular cualquier regla que pudiera intentar aplicar transform/filter */ body, html { transform: none !important; filter: none !important; } a{color:inherit;text-decoration:none;transition:color .25s} a:hover{color:var(--gold)} img{max-width:100%;display:block} button{font-family:inherit} /* ---------- Background atmosphere ---------- */ body::before{ content:""; position:fixed;inset:0; background: radial-gradient(ellipse 60% 50% at 15% 0%, rgba(0,212,255,.08), transparent 60%), radial-gradient(ellipse 80% 60% at 95% 100%, rgba(162,89,255,.07), transparent 60%); background-size:auto, auto; pointer-events:none; z-index:0; } /* Stacking context: - #bg-particles tiene z-index:-1 (detrás de todo pero por delante del background del body) - body::before tiene z-index:-2 (más al fondo aún) - secciones, navbar, etc. NO necesitan z-index explícito y se pintan por orden DOM. */ /* ---------- Typography ---------- */ .display-serif{ font-family:var(--font-display); font-weight:300; font-style:normal; font-variation-settings:"opsz" 144, "SOFT" 0; letter-spacing:-.02em; line-height:1.05; } .display-serif em{ font-style:italic; color:var(--gold); font-weight:300; } .eyebrow{ display:inline-flex;align-items:center;gap:.6rem; font-family:var(--font-body); font-size:.72rem;font-weight:600; text-transform:uppercase; letter-spacing:.22em; color:var(--gold); } .eyebrow::before{ content:"";width:2.5rem;height:1px;background:var(--brand-gradient); } .section-title{ font-family:var(--font-display); font-weight:300; font-size:clamp(2.2rem,4.5vw,4rem); line-height:1.05; letter-spacing:-.025em; margin:1rem 0 1.5rem; } .section-title em{font-style:italic;color:var(--gold);font-weight:300} .section-lead{font-size:1.1rem;color:var(--text-mute);max-width:60ch} /* ---------- Container & section spacing ---------- */ .container{max-width:1240px;margin:0 auto;padding:0 1.5rem;width:100%} .section{padding:7rem 0;position:relative} .section.tight{padding:5rem 0} .section.alt{background:linear-gradient(180deg, rgba(20,20,28,.6) 0%, rgba(10,10,13,.4) 100%)} .section.deep{background:rgba(20,20,28,.55)} html[data-theme="light"] .section.alt{background:linear-gradient(180deg, rgba(244,244,247,.6) 0%, rgba(250,250,250,.4) 100%)} html[data-theme="light"] .section.deep{background:rgba(244,244,247,.55)} /* ---------- Navbar ---------- */ .navbar-glass{ position:fixed !important; top:0 !important; left:0 !important; right:0 !important; z-index:100; background:rgba(10,10,13,.72); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); border-bottom:1px solid var(--line); transition:padding .3s, background .3s; } html[data-theme="light"] .navbar-glass { background: rgba(255,255,255,0.78); border-bottom-color: rgba(0,0,0,0.06); } /* Cuando el menú móvil está abierto, la navbar se hace totalmente sólida */ body.nav-open .navbar-glass { background: var(--bg-0) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; z-index: 10002 !important; } .navbar-glass.scrolled{padding-block:.5rem} .navbar-inner{ display:flex;align-items:center;justify-content:space-between; padding:1.1rem 1.5rem;max-width:1240px;margin:0 auto; } .brand{ font-family:var(--font-display); font-size:1.5rem; font-weight:400; font-style:italic; color:var(--text); letter-spacing:-.01em; display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; transition: filter 0.25s, transform 0.25s; } .brand:hover { filter: drop-shadow(0 0 14px rgba(0,212,255,0.35)); transform: translateY(-1px); } .brand-logo { height: 40px; width: 40px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(0,212,255,0.25)); transition: transform 0.3s ease; } .brand:hover .brand-logo { transform: rotate(5deg) scale(1.05); } .brand-text { background: linear-gradient(135deg, #00d4ff 0%, #a259ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 600; font-style: normal; font-family: var(--font-body, system-ui); letter-spacing: 0.02em; font-size: 1.15rem; } .brand span{color:var(--gold)} @media (max-width: 480px) { .brand-logo { height: 32px; width: 32px; } .brand-text { font-size: 1rem; } } .nav-links{display:flex;gap:2rem;align-items:center;list-style:none;margin:0;padding:0} .nav-links a{ color:var(--text-mute); font-size:.92rem; font-weight:500; position:relative; } .nav-links a:hover{color:var(--text)} .nav-links a.cta{ color:var(--bg-0); background:var(--brand-gradient); padding:.7rem 1.4rem; border-radius:999px; font-weight:700; } .nav-links a.cta:hover{filter:brightness(1.08);color:var(--bg-0);box-shadow:var(--shadow-brand)} /* ============================================================= NAV — Iconos sociales y theme toggle (estilos para desktop) ============================================================= */ .nav-links li.nav-socials .nav-socials-inner { display: inline-flex; align-items: center; gap: 0.5rem; } .nav-social-icon { display: inline-flex !important; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); color: var(--text-mute); font-size: 0.95rem; text-decoration: none; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); padding: 0; position: relative; overflow: hidden; } .nav-social-icon::before { content: ""; position: absolute; inset: 0; background: var(--brand-gradient, linear-gradient(135deg, #00d4ff, #a259ff)); border-radius: 50%; opacity: 0; transition: opacity 0.3s; z-index: -1; } .nav-social-icon i { position: relative; z-index: 1; transition: transform 0.3s; } .nav-social-icon:hover { color: #0a0a0d !important; border-color: transparent; transform: translateY(-2px) scale(1.05); box-shadow: 0 6px 20px rgba(0,212,255,0.35); } .nav-social-icon:hover::before { opacity: 1; } .nav-social-icon:hover i { transform: scale(1.1); } /* Icono específico LinkedIn */ .nav-social-icon[aria-label*="LinkedIn" i]:hover, .nav-social-icon[aria-label*="Linkedin" i]:hover { box-shadow: 0 6px 20px rgba(10, 102, 194, 0.4); } .nav-social-icon[aria-label*="LinkedIn" i]:hover::before, .nav-social-icon[aria-label*="Linkedin" i]:hover::before { background: linear-gradient(135deg, #0a66c2, #0094ff); } /* Icono específico WhatsApp */ .nav-social-icon[aria-label*="WhatsApp" i]:hover, .nav-social-icon[aria-label*="Whatsapp" i]:hover { box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4); } .nav-social-icon[aria-label*="WhatsApp" i]:hover::before, .nav-social-icon[aria-label*="Whatsapp" i]:hover::before { background: linear-gradient(135deg, #25d366, #128c7e); } /* Modo claro */ html[data-theme="light"] .nav-social-icon { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); color: var(--text-mute); } html[data-theme="light"] .nav-social-icon:hover { color: #fff !important; } .nav-toggle{ display:none;background:none;border:0;color:var(--text); font-size:1.5rem;cursor:pointer; width:44px;height:44px; align-items:center;justify-content:center; border-radius:8px;transition:background .2s, color .2s; z-index:10001;position:relative; } .nav-toggle:hover{background:rgba(255,255,255,.06)} .nav-toggle.open{color:var(--gold)} .nav-toggle.open i::before{content:"\f00d"} /* Controles móviles (toggle de tema + hamburguesa) — ocultos en desktop */ .nav-mobile-controls { display: none; align-items: center; gap: .5rem; } .theme-toggle-mobile { display: none; } @media (max-width: 991px) { .nav-toggle { display: inline-flex !important; } .nav-mobile-controls { display: inline-flex !important; } .theme-toggle-mobile { display: inline-flex !important; z-index: 10001; position: relative; } .nav-links { position: fixed !important; top: 0 !important; right: -100% !important; bottom: 0 !important; left: auto !important; width: min(88vw, 380px) !important; height: 100vh !important; max-height: 100dvh !important; flex-direction: column !important; align-items: stretch !important; /* Fondo cristalino con gradiente y efecto holográfico */ background: radial-gradient(ellipse 90% 50% at 100% 0%, rgba(0,212,255,.12), transparent 60%), radial-gradient(ellipse 80% 60% at 0% 100%, rgba(162,89,255,.10), transparent 60%), linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%) !important; border-left: 1px solid var(--line-strong) !important; padding: 0 !important; margin: 0 !important; gap: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; z-index: 10000 !important; opacity: 0; pointer-events: none; transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease !important; box-shadow: -16px 0 50px rgba(0, 0, 0, 0.6), -2px 0 20px rgba(0, 212, 255, 0.08); list-style: none; } /* Cabecera del menú con logo (imagen + texto) */ .nav-links::before { content: ""; display: block; height: 90px; padding: 1.4rem 1.6rem 0.8rem; background-image: url('assets/img/logo-visioneon-header.png'); background-repeat: no-repeat; background-position: 1.6rem center; background-size: 50px 50px; border-bottom: 1px solid var(--line); margin-bottom: 0.8rem; box-sizing: border-box; filter: drop-shadow(0 0 10px rgba(0,212,255,0.25)); } /* Línea decorativa animada debajo del logo */ .nav-links::after { content: ""; position: absolute; top: 80px; left: 1.6rem; width: 50px; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--purple)); border-radius: 2px; transform: scaleX(0); transform-origin: left center; transition: transform 0.5s 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .nav-links.open { right: 0 !important; opacity: 1 !important; pointer-events: auto !important; } .nav-links.open::after { transform: scaleX(1); } /* ============= ENLACES PRINCIPALES ============= */ .nav-links li.nav-link-item, .nav-links li.nav-cta-item { width: 100%; list-style: none; padding: 0 1.6rem; opacity: 0; transform: translateX(20px); } /* Animación stagger: cada item aparece con un delay incremental */ .nav-links.open li.nav-link-item, .nav-links.open li.nav-cta-item { animation: navItemIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .nav-links.open li.nav-link-item:nth-of-type(1) { animation-delay: 0.10s; } .nav-links.open li.nav-link-item:nth-of-type(2) { animation-delay: 0.16s; } .nav-links.open li.nav-link-item:nth-of-type(3) { animation-delay: 0.22s; } .nav-links.open li.nav-link-item:nth-of-type(4) { animation-delay: 0.28s; } .nav-links.open li.nav-link-item:nth-of-type(5) { animation-delay: 0.34s; } .nav-links.open li.nav-link-item:nth-of-type(6) { animation-delay: 0.40s; } .nav-links.open li.nav-cta-item { animation-delay: 0.48s; } .nav-links.open li.nav-socials { animation-delay: 0.56s; } @keyframes navItemIn { to { opacity: 1; transform: none; } } .nav-links li.nav-link-item a { display: flex; align-items: center; width: 100%; padding: 0.95rem 1.1rem; font-size: 1.02rem; font-weight: 500; border-radius: 12px; color: var(--text); border: 1px solid transparent; position: relative; transition: all 0.25s; overflow: hidden; } /* Flecha sutil que aparece al hover */ .nav-links li.nav-link-item a::after { content: "→"; position: absolute; right: 1.1rem; opacity: 0; transform: translateX(-8px); transition: all 0.25s; color: var(--cyan); } .nav-links li.nav-link-item a:hover, .nav-links li.nav-link-item a:active { background: linear-gradient(135deg, rgba(0,212,255, 0.08), rgba(162,89,255,0.06)); color: var(--cyan); border-color: rgba(0,212,255,0.18); padding-left: 1.3rem; } .nav-links li.nav-link-item a:hover::after, .nav-links li.nav-link-item a:active::after { opacity: 1; transform: translateX(0); } /* ============= CTA "HABLEMOS" ============= */ .nav-links li.nav-cta-item { margin-top: 1rem; margin-bottom: 0.5rem; } .nav-links li.nav-cta-item a { display: flex; align-items: center; justify-content: center; width: 100%; background: var(--brand-gradient, linear-gradient(135deg, #00d4ff, #a259ff)); color: var(--bg-0); text-align: center; font-weight: 700; border-radius: 999px; padding: 1rem 1.3rem; font-size: 1.02rem; box-shadow: 0 8px 30px rgba(0, 212, 255, 0.25); transition: all 0.25s; } .nav-links li.nav-cta-item a:hover { filter: brightness(1.1); color: var(--bg-0); transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0, 212, 255, 0.35); } /* ============= ICONOS SOCIALES + TEMA (fila propia) ============= */ .nav-links li.nav-socials { width: 100%; list-style: none; padding: 1.5rem 1.6rem 1.2rem; margin-top: auto; border-top: 1px solid var(--line); opacity: 0; transform: translateX(20px); } .nav-socials-inner { display: flex; gap: 0.6rem; align-items: center; justify-content: flex-start; flex-wrap: wrap; } .nav-social-icon, .nav-socials .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.04); border: 1px solid var(--line); color: var(--text); font-size: 1rem; text-decoration: none; padding: 0; cursor: pointer; transition: all 0.25s; flex-shrink: 0; } .nav-social-icon:hover { background: var(--brand-gradient, linear-gradient(135deg, #00d4ff, #a259ff)); color: var(--bg-0); border-color: transparent; transform: scale(1.08); } .nav-socials .theme-toggle:hover { background: rgba(0,212,255,0.12); border-color: rgba(0,212,255,0.4); color: var(--cyan); transform: rotate(15deg); } /* Overlay oscuro detrás del menú */ body.nav-open::after { content: ""; position: fixed; inset: 0; background: radial-gradient(ellipse at 70% 30%, rgba(0,212,255,0.08), transparent 60%), rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%); z-index: 9999; animation: navFadeIn 0.3s ease; } @keyframes navFadeIn { from { opacity: 0; } to { opacity: 1; } } } /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.6rem; font-family:var(--font-body);font-weight:600;font-size:.95rem; padding:1rem 1.8rem;border-radius:999px;border:0;cursor:pointer; transition:all .3s cubic-bezier(.16,1,.3,1);text-decoration:none;line-height:1; white-space:nowrap; position:relative;overflow:hidden; } .btn-gold{ background:var(--brand-gradient); color:var(--bg-0); font-weight:700; box-shadow:0 6px 20px rgba(0,212,255,.25); } .btn-gold::before { content:"";position:absolute;inset:0; background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform:translateX(-100%);transition:transform .6s; } .btn-gold:hover{ filter:brightness(1.08); color:var(--bg-0); transform:translateY(-2px); box-shadow:0 12px 32px rgba(0,212,255,.4), 0 0 0 1px rgba(0,212,255,.25); } .btn-gold:hover::before { transform:translateX(100%); } .btn-ghost{ background:rgba(255,255,255,.04); color:var(--text); border:1px solid var(--line-strong); } .btn-ghost:hover{ background:rgba(0,212,255,.08); border-color:var(--cyan); color:var(--cyan); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,212,255,.18); } html[data-theme="light"] .btn-ghost { background:rgba(0,0,0,.03); } html[data-theme="light"] .btn-ghost:hover { background:rgba(162,89,255,.08); border-color:var(--purple); color:var(--purple); } .btn-sm{padding:.7rem 1.2rem;font-size:.85rem} .btn-lg{padding:1.2rem 2.2rem;font-size:1rem} /* ---------- Hero ---------- */ .hero{ min-height:100vh; display:flex;align-items:center; padding:7rem 0 4rem; position:relative; overflow:hidden; } .hero-grid{display:grid;grid-template-columns:1fr;gap:4rem;align-items:center} @media(min-width:992px){.hero-grid{grid-template-columns:1.3fr .9fr;gap:5rem}} .hero-title{ font-family:var(--font-display); font-weight:300; font-size:clamp(2.5rem,6vw,5.5rem); line-height:.98; letter-spacing:-.035em; margin:1.5rem 0 1.5rem; } .hero-title em{font-style:italic;color:var(--gold);font-weight:300} .hero-sub{font-size:1.15rem;color:var(--text-mute);max-width:58ch;margin-bottom:2.5rem} .hero-actions{display:flex;flex-wrap:wrap;gap:1rem} .hero-meta{ display:flex;flex-wrap:wrap;gap:2.5rem; margin-top:3.5rem;padding-top:2.5rem; border-top:1px solid var(--line); } .hero-meta-item small{color:var(--text-dim);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase} .hero-meta-item strong{display:block;font-family:var(--font-display);font-weight:300;font-size:1.8rem;color:var(--text);margin-top:.3rem} .hero-side{position:relative} .hero-card{ position:relative; background:linear-gradient(180deg, var(--panel) 0%, var(--bg-1) 100%); border:1px solid var(--line); border-radius:var(--radius-lg); padding:2.5rem; overflow:hidden; } .hero-card::before{ content:"";position:absolute;inset:0; background:radial-gradient(circle at 100% 0%, rgba(0,212,255,.12), transparent 50%), radial-gradient(circle at 20% 100%, rgba(162,89,255,.10), transparent 55%); pointer-events:none; } .hero-card-eyebrow{ font-family:var(--font-mono);font-size:.7rem; color:var(--gold);letter-spacing:.2em;text-transform:uppercase; margin-bottom:1rem; } .hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.5rem} .hero-stat{ padding:1.2rem; border:1px solid var(--line); border-radius:var(--radius); background:rgba(255,255,255,.02); } .hero-stat-value{font-family:var(--font-display);font-size:2rem;font-weight:300;color:var(--gold);line-height:1} .hero-stat-label{font-size:.78rem;color:var(--text-mute);margin-top:.5rem;line-height:1.3} .hero-badge{ display:inline-flex;align-items:center;gap:.5rem; font-family:var(--font-mono);font-size:.72rem; color:var(--text-mute); background:rgba(255,255,255,.04); border:1px solid var(--line); padding:.5rem 1rem;border-radius:999px; letter-spacing:.05em; } .hero-badge .dot{ width:8px;height:8px;border-radius:50%; background:var(--success); box-shadow:0 0 0 4px rgba(110,197,136,.2); animation:pulse 2s infinite; } @keyframes pulse{ 0%,100%{box-shadow:0 0 0 4px rgba(110,197,136,.2)} 50%{box-shadow:0 0 0 8px rgba(110,197,136,.05)} } /* ---------- About section ---------- */ .about-grid{display:grid;grid-template-columns:1fr;gap:3rem;align-items:center} @media(min-width:992px){.about-grid{grid-template-columns:1fr 1.3fr;gap:5rem}} .about-portrait{ position:relative; border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:4/5; background:linear-gradient(135deg,#111827 0%, #11111a 100%); border:1px solid var(--line); } .about-portrait::before{ content:"";position:absolute;inset:0; background: radial-gradient(circle at 30% 20%, rgba(0,212,255,.22), transparent 60%), radial-gradient(circle at 80% 80%, rgba(162,89,255,.14), transparent 60%); } .about-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .about-portrait-label{position:absolute;bottom:1.5rem;left:1.5rem;font-family:var(--font-mono);font-size:.72rem;color:var(--purple);letter-spacing:.2em;text-transform:uppercase} .about-text p{font-size:1.08rem;color:var(--text-mute);margin-bottom:1.5rem} .about-text p.lead{color:var(--text);font-size:1.2rem;line-height:1.6} .skills-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;margin-top:2.5rem} .skill-item{padding:1.2rem;border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.02);transition:.25s} .skill-item:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 0 20px rgba(0,212,255,.08)} .skill-item i{color:var(--gold);font-size:1.3rem;margin-bottom:.6rem} .skill-name{font-weight:600;font-size:.95rem;color:var(--text)} .skill-bar{margin-top:.7rem;height:4px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden} .skill-bar span{display:block;height:100%;background:var(--brand-gradient);border-radius:2px} /* ---------- Service cards ---------- */ .services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:1.5rem;margin-top:3rem} .service-card{ position:relative; padding:2.5rem; background:linear-gradient(180deg, var(--panel) 0%, var(--bg-1) 100%); border:1px solid var(--line); border-radius:var(--radius-lg); transition:.3s; overflow:hidden; } .service-card::before{content:"";position:absolute;top:0;right:0;width:200px;height:200px;background:radial-gradient(circle, rgba(0,212,255,.09), transparent 70%);transform:translate(50%,-50%)} .service-card:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:var(--shadow-brand)} .service-icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;background:rgba(0,212,255,.10);border:1px solid rgba(0,212,255,.22);border-radius:18px;color:var(--gold);font-size:1.4rem;margin-bottom:1.5rem} .service-card h3{font-family:var(--font-display);font-weight:400;font-size:1.5rem;line-height:1.2;margin:0 0 .8rem} .service-card p{color:var(--text-mute);margin-bottom:1.2rem} .service-card .price{font-family:var(--font-mono);font-size:.85rem;color:var(--gold);letter-spacing:.05em} .service-card .more{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;color:var(--text);font-size:.9rem;font-weight:600} .service-card .more i{transition:transform .2s} .service-card:hover .more i{transform:translateX(4px)} /* ---------- Pricing plans ---------- */ .plans-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-top:3rem;align-items:stretch} .plan-card{position:relative;padding:2.5rem 2rem;background:linear-gradient(180deg, var(--panel) 0%, var(--bg-1) 100%);border:1px solid var(--line);border-radius:var(--radius-lg);display:flex;flex-direction:column;transition:.3s} .plan-card.highlighted{border-color:var(--gold);background:linear-gradient(180deg, rgba(0,212,255,.08) 0%, rgba(162,89,255,.05) 45%, var(--bg-1) 100%);transform:scale(1.02)} .plan-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .plan-card.highlighted:hover{transform:translateY(-4px) scale(1.02)} .plan-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;background:var(--brand-gradient);color:var(--bg-0);padding:.4rem 1rem;border-radius:999px;font-weight:800} .plan-name{font-family:var(--font-display);font-weight:400;font-size:1.6rem;margin:0 0 .3rem} .plan-tagline{color:var(--text-mute);font-size:.95rem;margin-bottom:1.5rem;min-height:2.5em} .plan-price{ display:flex; align-items:baseline; gap:.4rem; margin-bottom:1.5rem; padding-bottom:1.5rem; border-bottom:1px solid var(--line); flex-wrap:wrap; } .plan-price-amount{ font-family:var(--font-display); font-weight:300; font-size:clamp(2rem, 6vw, 2.8rem); color:var(--gold); line-height:1.05; white-space:nowrap; letter-spacing:-0.01em; } .plan-price-cycle{ color:var(--text-mute); font-size:.9rem; white-space:nowrap; } .plan-features{list-style:none;padding:0;margin:0 0 2rem;flex:1} .plan-features li{position:relative;padding:.55rem 0 .55rem 1.7rem;color:var(--text-mute);font-size:.95rem} .plan-features li::before{content:"✓";position:absolute;left:0;color:var(--gold);font-weight:700;font-size:1rem} .plan-card .btn{width:100%} /* ---------- Portfolio / projects ---------- */ .portfolio-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:3rem} .filters{display:flex;flex-wrap:wrap;gap:.6rem} .filter{ background:rgba(255,255,255,.04); color:var(--text); border:1px solid rgba(255,255,255,.1); border-radius:999px; padding:.65rem 1.3rem; font-size:.88rem; font-weight:600; cursor:pointer; transition:all .25s cubic-bezier(.16,1,.3,1); } .filter:hover{ background:rgba(0,212,255,.08); border-color:rgba(0,212,255,.4); color:var(--cyan); transform:translateY(-1px); } .filter.active{ background:var(--brand-gradient); color:#08070d; border-color:transparent; font-weight:700; box-shadow:0 6px 20px rgba(0,212,255,.3); } html[data-theme="light"] .filter{ background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.1); color:var(--text); } html[data-theme="light"] .filter:hover{ background:rgba(0,150,200,.1); border-color:rgba(0,150,200,.4); color:#0094d4; } html[data-theme="light"] .filter.active{ color:#ffffff; } .projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:1.5rem} .project-card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;transition:.3s;display:flex;flex-direction:column} /* (Reglas adicionales de .project-card más abajo, con clickable card) */ .project-card:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:var(--shadow-brand)} .project-cover{position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,#111827 0%, #11111a 100%);overflow:hidden} .project-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.5s} .project-card:hover .project-cover img{transform:scale(1.06)} .project-badges{position:absolute;top:1rem;left:1rem;display:flex;gap:.4rem;flex-wrap:wrap;z-index:2} .badge-tag{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; padding:.32rem .75rem; border-radius:999px; background:rgba(8,10,18,.82); color:#f4f1ea; border:1px solid rgba(0,212,255,.25); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); font-weight:600; } .badge-tag.sale{background:var(--brand-gradient);color:#08070d;border-color:transparent} .badge-tag.sold{background:var(--success);color:#08070d;border-color:transparent} .badge-tag.reserved{background:var(--warning);color:#08070d;border-color:transparent} .badge-tag.featured{ background:linear-gradient(135deg, rgba(0,212,255,.2), rgba(162,89,255,.2)); color:#00d4ff; border:1px solid rgba(0,212,255,.5); } /* En modo claro: el badge se mantiene oscuro pero con buen contraste */ html[data-theme="light"] .badge-tag{ background:rgba(18,20,32,.92); color:#ffffff; border-color:rgba(0,150,200,.4); } html[data-theme="light"] .badge-tag.featured{ background:linear-gradient(135deg, #00a8d4, #7c4ddb); color:#ffffff; border-color:transparent; } .project-body{padding:1.8rem;flex:1;display:flex;flex-direction:column} .project-category{font-family:var(--font-mono);font-size:.7rem;color:var(--text-dim);letter-spacing:.15em;text-transform:uppercase;margin-bottom:.6rem} .project-title{font-family:var(--font-display);font-weight:400;font-size:1.4rem;line-height:1.2;margin:0 0 .7rem} .project-desc{color:var(--text-mute);font-size:.95rem;margin-bottom:1.2rem;flex:1} .project-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:auto;padding-top:1rem;border-top:1px solid var(--line)} .project-price{font-family:var(--font-display);font-size:1.4rem;color:var(--gold);font-weight:400} .project-link{ display:inline-flex; align-items:center; gap:.4rem; font-size:.9rem; font-weight:600; color:var(--cyan); position:relative; z-index:3; } /* La tarjeta ENTERA es clickable: un ::before del enlace cubre toda la card */ .project-link::before{ content:""; position:absolute; inset:0; /* Sale del .project-foot y cubre toda la .project-card padre */ top:auto; left:auto; right:auto; bottom:auto; } .project-card{ position:relative; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; transition:.3s; display:flex; flex-direction:column; cursor:pointer; } .project-card .project-link::before{ position:absolute; inset:0; z-index:1; } .project-card:hover{ border-color:rgba(0,212,255,.35); box-shadow:0 16px 50px rgba(0,212,255,.12); transform:translateY(-3px); } .project-card:hover .project-link{color:var(--cyan)} .project-link:hover{color:var(--purple)} .project-link i{transition:transform .2s} .project-link:hover i, .project-card:hover .project-link i{transform:translateX(4px)} /* Los botones del carrusel y badges deben quedar por encima del ::before */ /* El carrusel y sus controles se elevan por encima de la portada. Los badges NO entran aquí: son una capa flotante sobre la imagen y deben conservar position:absolute (ver .project-badges más arriba). Si se les pone position:relative pasan al flujo y la portada los tapa. */ .project-card .card-carousel{ position:relative; z-index:2; } .project-card .card-car-btn, .project-card .card-car-dot{ z-index:4; } /* Los badges van por encima de la imagen y de las diapositivas */ .project-card .project-badges{ z-index:5; } .marketplace-banner{background:linear-gradient(135deg, rgba(0,212,255,.08), rgba(162,89,255,.05), transparent);border:1px solid var(--line);border-radius:var(--radius-lg);padding:2rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;margin-bottom:3rem} .marketplace-banner i{font-size:1.8rem;color:var(--gold)} /* ---------- Stack / tech cloud ---------- */ .tech-cloud{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;margin-top:3rem} .tech-chip{display:inline-flex;align-items:center;gap:.6rem;padding:.8rem 1.4rem;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.02);font-size:.92rem;transition:.2s} .tech-chip:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px);box-shadow:0 0 18px rgba(0,212,255,.10)} .tech-chip i{font-size:1.1rem;color:var(--gold)} /* ---------- Process timeline ---------- */ .process-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem;margin-top:3rem} .process-step{padding:1.8rem;border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.02);transition:.3s;position:relative} .process-step:hover{border-color:var(--gold);transform:translateY(-4px);box-shadow:0 0 20px rgba(0,212,255,.08)} .process-step-num{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:2.5rem;color:var(--gold);line-height:1;margin-bottom:1rem;display:block} .process-step h3{font-family:var(--font-display);font-weight:400;font-size:1.2rem;margin:0 0 .5rem} .process-step p{color:var(--text-mute);font-size:.92rem;margin:0} /* ---------- Testimonials ---------- */ .testi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.5rem; margin-top:3rem; align-items:stretch; } .testi-card{ padding:2.2rem; border:1px solid var(--line); border-radius:var(--radius-lg); background:linear-gradient(180deg, var(--panel) 0%, var(--bg-1) 100%); position:relative; display:flex; flex-direction:column; height:100%; } .testi-card::before{ content:"\201C"; position:absolute; top:1rem; right:1.5rem; font-family:var(--font-display); font-size:5rem; color:var(--cyan); opacity:.2; line-height:1; } .testi-stars{color:var(--gold);font-size:.9rem;margin-bottom:1rem;letter-spacing:.1em} .testi-content{ color:var(--text); font-size:1.05rem; line-height:1.6; margin-bottom:1.5rem; font-style:italic; font-family:var(--font-display); font-weight:300; flex:1; } .testi-author{ display:flex; align-items:center; gap:1rem; padding-top:1rem; border-top:1px solid var(--line); margin-top:auto; } .testi-author-avatar{width:48px;height:48px;border-radius:50%;background:var(--brand-gradient);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:400;font-size:1.2rem;color:var(--bg-0)} .testi-author-info strong{display:block;font-size:.95rem} .testi-author-info span{color:var(--text-mute);font-size:.85rem} /* ---------- FAQ ---------- */ .faq-list{margin-top:3rem;max-width:880px;margin-left:auto;margin-right:auto} .faq-item{border-bottom:1px solid var(--line)} .faq-q{width:100%;background:none;border:0;color:var(--text);text-align:left;padding:1.6rem 0;cursor:pointer;font-family:var(--font-display);font-weight:400;font-size:1.25rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;transition:color .2s} .faq-q:hover{color:var(--gold)} .faq-q .icon{flex-shrink:0;width:32px;height:32px;border-radius:50%;border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;transition:.3s;color:var(--gold)} .faq-item.open .faq-q .icon{transform:rotate(45deg);background:var(--brand-gradient);color:var(--bg-0);border-color:transparent} .faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;color:var(--text-mute)} .faq-item.open .faq-a{max-height:500px} .faq-a-inner{padding:0 0 1.6rem;font-size:1rem;line-height:1.7} /* ---------- Contact ---------- */ .contact-grid{display:grid;grid-template-columns:1fr;gap:3rem;align-items:start} @media(min-width:992px){.contact-grid{grid-template-columns:.9fr 1.1fr;gap:5rem}} .contact-form{background:linear-gradient(180deg, var(--panel) 0%, var(--bg-1) 100%);border:1px solid var(--line);border-radius:var(--radius-lg);padding:2.5rem;display:flex;flex-direction:column;gap:1rem} .contact-form label{display:block;font-size:.8rem;font-weight:600;color:var(--text-mute);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.4rem} .form-input, .contact-form input, .contact-form select, .contact-form textarea{width:100%;background:var(--bg-0);color:var(--text);border:1px solid var(--line);border-radius:14px;padding:1rem 1.2rem;font-family:inherit;font-size:.95rem;transition:.2s} .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus, .form-input:focus{outline:0;border-color:var(--gold);background:var(--bg-1);box-shadow:0 0 0 3px rgba(0,212,255,.10)} .contact-form textarea{resize:vertical;min-height:120px} .contact-info-card{padding:2rem;border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.02);margin-bottom:1rem} .contact-info-row{display:flex;align-items:center;gap:1rem;padding:.7rem 0} .contact-info-row i{width:42px;height:42px;border-radius:12px;background:rgba(0,212,255,.10);color:var(--gold);display:flex;align-items:center;justify-content:center;flex-shrink:0} .contact-info-row strong{display:block;font-size:.85rem;color:var(--text-mute);font-weight:500} .contact-info-row span{display:block;font-size:1.05rem;color:var(--text);font-weight:600} #formMsg{font-size:.9rem;min-height:1.5em} #formMsg.ok{color:var(--success)} #formMsg.err{color:var(--danger)} /* ---------- Footer ---------- */ /* ============================================================= FOOTER — Versión premium con soporte claro/oscuro ============================================================= */ .footer { position: relative; padding: 5rem 0 3rem; background: linear-gradient(135deg, rgba(0,212,255,.03) 0%, rgba(162,89,255,.03) 100%), linear-gradient(180deg, rgba(20,20,28,.7) 0%, rgba(10,10,16,.85) 100%); border-top: 1px solid rgba(255,255,255,.06); } .footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,212,255,.4), rgba(162,89,255,.4), transparent); } /* ==== MODO CLARO ==== */ html[data-theme="light"] .footer { background: linear-gradient(135deg, rgba(0,212,255,.05) 0%, rgba(162,89,255,.05) 100%), linear-gradient(180deg, rgba(248,248,252,.9) 0%, rgba(240,240,247,.95) 100%); border-top: 1px solid rgba(0,0,0,.06); } html[data-theme="light"] .footer::before { background: linear-gradient(90deg, transparent, rgba(0,150,200,.5), rgba(120,60,200,.5), transparent); } .footer-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; margin-bottom: 3rem; } @media(min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } } .footer-brand { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.8rem; margin-bottom: 1rem; background: linear-gradient(135deg, var(--cyan) 0%, var(--purple) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .footer-brand span { background: linear-gradient(135deg, var(--cyan) 0%, var(--purple) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .footer-about { color: var(--text-mute); max-width: 42ch; line-height: 1.7; } .footer h5 { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 1.2rem; font-weight: 700; background: linear-gradient(135deg, var(--cyan) 0%, var(--purple) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem; } .footer-list a { color: var(--text-mute); font-size: .95rem; transition: all .25s cubic-bezier(.16,1,.3,1); display: inline-block; position: relative; } .footer-list a:hover { color: var(--cyan); padding-left: .5rem; } .footer-list a::before { content: "→"; position: absolute; left: -1rem; opacity: 0; transition: all .25s; color: var(--cyan); } .footer-list a:hover::before { opacity: 1; left: -.3rem; } /* ==== Iconos sociales del footer ==== */ .footer-social { display: flex; gap: .7rem; margin-top: 1.2rem; flex-wrap: wrap; } .footer-social a { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; color: var(--text-mute); transition: all .3s cubic-bezier(.16,1,.3,1); position: relative; overflow: hidden; text-decoration: none; } .footer-social a::before { content: ""; position: absolute; inset: 0; background: var(--brand-gradient, linear-gradient(135deg, #00d4ff, #a259ff)); border-radius: 50%; opacity: 0; transition: opacity .3s; z-index: 0; } .footer-social a i { position: relative; z-index: 1; transition: transform .3s; } .footer-social a:hover { color: #0a0a0d; border-color: transparent; transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 24px rgba(0,212,255,.3); } .footer-social a:hover::before { opacity: 1; } .footer-social a:hover i { transform: scale(1.15); } html[data-theme="light"] .footer-social a { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.1); color: #555; } html[data-theme="light"] .footer-social a:hover { color: #fff; box-shadow: 0 8px 24px rgba(162,89,255,.3); } /* ==== Bloque legal ==== */ .footer-legal { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.06); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } html[data-theme="light"] .footer-legal { border-top-color: rgba(0,0,0,.08); } .footer-legal-links { display: flex; gap: 1.4rem; flex-wrap: wrap; font-size: .85rem; } .footer-legal-links a { color: var(--text-mute); transition: all .25s; position: relative; } .footer-legal-links a::after { content: ""; position: absolute; bottom: -2px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--cyan), var(--purple)); transform: scaleX(0); transform-origin: left center; transition: transform .25s; } .footer-legal-links a:hover { color: var(--cyan); } .footer-legal-links a:hover::after { transform: scaleX(1); } .footer-bottom { padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.06); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .85rem; color: var(--text-dim); } html[data-theme="light"] .footer-bottom { border-top-color: rgba(0,0,0,.08); } .footer-bottom a { color: var(--text-mute); transition: color .2s; } .footer-bottom a:hover { color: var(--cyan); } /* ============================================================= BOTONES FLOTANTES — Stack de redes sociales ============================================================= */ .float-stack { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 90; display: flex; flex-direction: column-reverse; gap: .8rem; align-items: flex-end; } .float-cta { display: flex; align-items: center; gap: .7rem; background: #25d366; color: #fff; padding: .9rem 1.3rem; border-radius: 999px; font-weight: 600; font-size: .92rem; text-decoration: none; box-shadow: 0 10px 30px rgba(0,0,0,.3); transition: all .3s cubic-bezier(.16,1,.3,1); white-space: nowrap; position: relative; overflow: hidden; } .float-cta i { font-size: 1.25rem; flex-shrink: 0; } .float-cta:hover { transform: translateY(-3px) scale(1.04); color: #fff; } /* Colores por marca */ .float-cta--whatsapp { background: linear-gradient(135deg, #25d366, #128c7e); box-shadow: 0 8px 24px rgba(37,211,102,.4); } .float-cta--whatsapp:hover { box-shadow: 0 14px 36px rgba(37,211,102,.6); } .float-cta--linkedin { background: linear-gradient(135deg, #0a66c2, #0094ff); box-shadow: 0 8px 24px rgba(10,102,194,.4); } .float-cta--linkedin:hover { box-shadow: 0 14px 36px rgba(10,102,194,.6); } .float-cta--instagram { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); box-shadow: 0 8px 24px rgba(220,39,67,.4); } .float-cta--instagram:hover { box-shadow: 0 14px 36px rgba(220,39,67,.6); } .float-cta--facebook { background: linear-gradient(135deg, #1877f2, #0a5dc2); box-shadow: 0 8px 24px rgba(24,119,242,.4); } .float-cta--facebook:hover { box-shadow: 0 14px 36px rgba(24,119,242,.6); } .float-cta--twitter { background: linear-gradient(135deg, #1a1a1a, #000); box-shadow: 0 8px 24px rgba(0,0,0,.5); } .float-cta--twitter:hover { box-shadow: 0 14px 36px rgba(0,0,0,.7); } .float-cta--telegram { background: linear-gradient(135deg, #2aabee, #229ed9); box-shadow: 0 8px 24px rgba(42,171,238,.4); } .float-cta--telegram:hover { box-shadow: 0 14px 36px rgba(42,171,238,.6); } .float-cta--youtube { background: linear-gradient(135deg, #ff0000, #cc0000); box-shadow: 0 8px 24px rgba(255,0,0,.4); } .float-cta--youtube:hover { box-shadow: 0 14px 36px rgba(255,0,0,.6); } .float-cta--github { background: linear-gradient(135deg, #333, #1a1a1a); box-shadow: 0 8px 24px rgba(0,0,0,.5); } .float-cta--github:hover { box-shadow: 0 14px 36px rgba(0,0,0,.7); } .float-cta--tiktok { background: linear-gradient(135deg, #010101, #25f4ee 50%, #fe2c55); box-shadow: 0 8px 24px rgba(254,44,85,.4); } .float-cta--tiktok:hover { box-shadow: 0 14px 36px rgba(254,44,85,.6); } .float-cta--email { background: linear-gradient(135deg, #00d4ff, #a259ff); box-shadow: 0 8px 24px rgba(0,212,255,.4); } .float-cta--email:hover { box-shadow: 0 14px 36px rgba(0,212,255,.6); } .float-cta--phone { background: linear-gradient(135deg, #00d4ff, #0094ff); box-shadow: 0 8px 24px rgba(0,148,255,.4); } .float-cta--phone:hover { box-shadow: 0 14px 36px rgba(0,148,255,.6); } .float-cta--default { background: linear-gradient(135deg, #00d4ff, #a259ff); box-shadow: 0 8px 24px rgba(0,212,255,.4); } .float-cta--default:hover { box-shadow: 0 14px 36px rgba(0,212,255,.6); } /* En móvil: solo iconos circulares para no ocupar espacio */ @media (max-width: 600px) { .float-stack { bottom: 1rem; right: 1rem; gap: .6rem; } .float-cta { padding: 0; width: 52px; height: 52px; justify-content: center; border-radius: 50%; } .float-cta__label { display: none; } .float-cta i { font-size: 1.35rem; } } /* ---------- Project detail page ---------- */ .project-detail{padding-top:9rem} .project-back{display:inline-flex;align-items:center;gap:.5rem;color:var(--text-mute);font-size:.9rem;font-weight:500;margin-bottom:2rem} .project-back:hover{color:var(--gold)} .project-hero{margin-bottom:3rem} .project-meta-bar{display:flex;flex-wrap:wrap;gap:2rem;padding:1.5rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:2rem 0 3rem} .project-meta-item small{display:block;font-size:.72rem;color:var(--text-dim);letter-spacing:.15em;text-transform:uppercase;margin-bottom:.3rem} .project-meta-item strong{font-size:1rem;color:var(--text);font-weight:600} .project-hero-img{width:100%;max-height:520px;object-fit:cover;border-radius:var(--radius-lg);border:1px solid var(--line)} .project-content-grid{display:grid;grid-template-columns:1fr;gap:3rem} @media(min-width:992px){.project-content-grid{grid-template-columns:1.6fr .8fr;gap:4rem}} .project-block{margin-bottom:2.5rem} .project-block h2{font-family:var(--font-display);font-weight:400;font-size:1.8rem;margin-bottom:1rem} .project-block h2 .num{color:var(--cyan);font-style:italic;margin-right:.6rem} .project-block p{color:var(--text-mute);font-size:1.05rem;line-height:1.7} .project-side{position:sticky;top:6rem;align-self:start} .project-side-card{padding:2rem;background:linear-gradient(180deg, var(--panel) 0%, var(--bg-1) 100%);border:1px solid var(--line);border-radius:var(--radius-lg);margin-bottom:1.5rem} .project-side-card .price-big{font-family:var(--font-display);font-weight:300;font-size:3rem;color:var(--gold);line-height:1;margin-bottom:.5rem} .project-side-card .price-small{color:var(--text-mute);font-size:.9rem;margin-bottom:1.5rem} .project-side-card .btn{width:100%;margin-bottom:.6rem} .project-side-card hr{border:0;border-top:1px solid var(--line);margin:1.5rem 0} .project-side-card ul{list-style:none;padding:0;margin:0} .project-side-card ul li{padding:.5rem 0;color:var(--text-mute);font-size:.92rem;display:flex;gap:.6rem} .project-side-card ul li::before{content:"✓";color:var(--gold);font-weight:700;flex-shrink:0} .gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;margin-top:1rem} .gallery-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);border:1px solid var(--line)} /* ---------- Reveal animation ---------- */ .reveal,[data-reveal]{opacity:1;transform:none;transition:opacity .8s ease, transform .8s ease} html.js-ready .reveal,html.js-ready [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease} html.js-ready .reveal.in,html.js-ready [data-reveal].is-visible,html.js-ready [data-reveal].in{opacity:1;transform:none} /* Red de seguridad: si el JS de reveal falla o tarda, mostrar todo igualmente a los 3s para que la página nunca se quede en blanco/oculta. */ @keyframes revealFailsafe{to{opacity:1;transform:none}} html.js-ready .reveal:not(.in),html.js-ready [data-reveal]:not(.is-visible):not(.in){animation:revealFailsafe .6s ease 3s forwards} .delay-1{transition-delay:.1s}.delay-2{transition-delay:.2s}.delay-3{transition-delay:.3s}.delay-4{transition-delay:.4s} /* ============================================================= RESPONSIVE — Mobile-first refinado ============================================================= */ /* No usamos overflow:hidden aquí porque rompe position:fixed. El scroll-lock se gestiona en JS si es necesario. */ body.nav-open { /* sin reglas que rompan fixed */ } @media (max-width: 991px) { .navbar-glass { padding: .9rem 0; } .navbar-inner { padding: 0 1.2rem; } .brand { font-size: 1.15rem; } .btn { padding: .85rem 1.5rem; font-size: .9rem; } .btn-lg { padding: 1rem 1.7rem; font-size: .95rem; } .container { padding: 0 1.2rem; } .hero { min-height: auto; padding: 7rem 0 4rem; } .hero-grid { gap: 2.5rem; } .hero-title { font-size: clamp(2.2rem, 7vw, 3.2rem) !important; line-height: 1.05 !important; } .hero-sub { font-size: 1.05rem; max-width: 100%; } .hero-actions { flex-wrap: wrap; gap: .6rem; } .hero-actions .btn { flex: 1 1 auto; min-width: 0; } .hero-meta { gap: 1.2rem; flex-wrap: wrap; } .section { padding: 4.5rem 0; } .section-title { font-size: clamp(1.8rem, 5vw, 2.4rem) !important; line-height: 1.15; } .section-eyebrow { font-size: .75rem; } .about-portrait { max-width: 320px; margin: 0 auto; } /* .project-card no lleva relleno: su portada va a ras del borde y el texto ya tiene el suyo en .project-body */ .service-card, .plan-card { padding: 1.5rem; } .project-card .project-body { padding: 1.5rem; } .process-step { padding: 1.5rem; } .testimonial-card { padding: 1.8rem; } .plans-grid { grid-template-columns: 1fr; gap: 1rem; } .tech-cloud .tech-chip { padding: .5rem .9rem; font-size: .85rem; } .contact-form { padding: 1.8rem; } .footer { padding: 3rem 0 2rem; } .footer-grid { grid-template-columns: 1fr !important; gap: 2rem; text-align: left; } .footer-legal { flex-direction: column; align-items: flex-start; gap: .8rem; } .footer-legal-links { gap: 1rem; } .float-cta { bottom: 1rem; right: 1rem; padding: .9rem 1rem; } } @media (max-width: 767px) { html { font-size: 15px; } .container { padding: 0 1rem; } .hero { padding: 6.5rem 0 3rem; } .hero-actions .btn { width: 100%; } .hero-badge { font-size: .8rem; padding: .4rem .9rem; } .section { padding: 3.5rem 0; } .section-head { margin-bottom: 2rem; } .services-grid,.projects-grid,.process-grid,.testimonials-grid,.skills-grid,.stats-grid { grid-template-columns: 1fr !important; gap: 1rem !important; } .hero-meta { gap: 1rem; } .hero-meta-item { flex: 1 1 calc(50% - .5rem); min-width: 0; } .hero-meta-item strong { font-size: 1.4rem; } .hero-title { font-size: clamp(1.8rem, 8vw, 2.8rem) !important; } .section-title { font-size: clamp(1.6rem, 6vw, 2rem) !important; } .form-grid { grid-template-columns: 1fr !important; gap: 1rem; } input, select, textarea { font-size: 16px !important; } .tech-cloud { gap: .4rem; } .plan-card.highlighted { transform: none !important; } .project-meta-bar { flex-direction: column; align-items: flex-start; gap: .8rem; } .project-sidebar { position: static !important; margin-top: 2rem; } .gallery-grid { grid-template-columns: 1fr !important; } .float-cta span { display: none; } .float-cta { width: 56px; height: 56px; padding: 0; justify-content: center; } .float-cta i { font-size: 1.4rem; margin: 0; } .cookie-banner { left: .5rem; right: .5rem; bottom: .5rem; max-width: 100%; } .cookie-banner__inner { padding: 1.1rem; flex-direction: column; align-items: stretch; } .cookie-banner__actions { justify-content: stretch; } .cookie-banner__actions .btn-gold,.cookie-banner__actions .btn-ghost { flex: 1; } .modal-content { max-width: calc(100vw - 2rem); margin: 1rem; } } @media (max-width: 479px) { html { font-size: 14px; } .container { padding: 0 .9rem; } .hero { padding: 6rem 0 2.5rem; } .hero-meta-item { flex: 1 1 100%; } .btn { padding: .8rem 1.2rem; font-size: .88rem; } .section { padding: 3rem 0; } .footer-brand { font-size: 1.5rem; } .footer-list a { font-size: .9rem; } .legal-page { padding: 6rem 0 3rem; } .legal-head h1 { font-size: clamp(1.8rem, 7vw, 2.4rem); } .legal-body { font-size: .95rem; } .legal-body h2 { font-size: 1.4rem; } .legal-table { font-size: .8rem; } .legal-table th, .legal-table td { padding: .6rem .5rem; } .error-code { font-size: clamp(5rem, 22vw, 8rem) !important; } } @media (hover: none) { .btn:hover, .nav-links a:hover, .card:hover, .service-card:hover, .plan-card:hover, .project-card:hover, .testimonial-card:hover { transform: none !important; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .reveal, [data-reveal] { opacity: 1 !important; transform: none !important; } } /* ---------- Scrollbar (webkit) ---------- */ ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:var(--bg-0)} ::-webkit-scrollbar-thumb{background:var(--panel-2);border-radius:5px} ::-webkit-scrollbar-thumb:hover{background:var(--purple)} /* ---------- Selection ---------- */ ::selection{background:var(--cyan);color:var(--bg-0)} /* ============================================================= Páginas legales ============================================================= */ .legal-page{padding:8rem 0 5rem;min-height:80vh} .legal-head{margin-bottom:3rem;padding-bottom:2rem;border-bottom:1px solid var(--line)} .legal-head h1{font-family:var(--font-display);font-weight:400;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.05;letter-spacing:-.02em;margin:.6rem 0 .8rem} .legal-head h1 em{color:var(--gold);font-style:italic} .legal-head .muted{color:var(--text-mute);font-size:.92rem} .legal-body{max-width:880px;margin:0 auto;font-size:1.02rem;line-height:1.78} .legal-body h2{font-family:var(--font-display);font-weight:400;font-size:1.7rem;margin:2.5rem 0 1rem;color:var(--text);letter-spacing:-.01em} .legal-body h3{font-size:1.15rem;margin:1.8rem 0 .8rem;color:var(--purple);font-weight:600} .legal-body p{color:var(--text-mute);margin:0 0 1rem} .legal-body ul,.legal-body ol{color:var(--text-mute);padding-left:1.4rem;margin:0 0 1.2rem} .legal-body li{margin-bottom:.4rem} .legal-body strong{color:var(--text);font-weight:600} .legal-body a{color:var(--gold);text-decoration:underline;text-decoration-color:rgba(0,212,255,.35);text-underline-offset:3px} .legal-body a:hover{text-decoration-color:var(--gold)} .legal-body code{font-family:var(--font-mono);background:var(--panel);padding:.15rem .45rem;border-radius:4px;font-size:.86em;color:var(--purple)} .legal-table-wrap{overflow-x:auto;margin:1rem 0 1.5rem} .legal-table{width:100%;border-collapse:collapse;font-size:.92rem;background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden} .legal-table th,.legal-table td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--line)} .legal-table thead th{background:var(--panel-2);color:var(--gold);font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em} .legal-table tbody tr:last-child td{border-bottom:none} /* ============================================================= Páginas de error ============================================================= */ .error-page{padding:10rem 0 6rem;min-height:90vh;display:flex;align-items:center} .error-wrap{text-align:center;max-width:680px;margin:0 auto} .error-code{font-family:var(--font-display);font-style:italic;font-size:clamp(7rem,18vw,12rem);line-height:.9;color:transparent;-webkit-text-stroke:1.5px var(--gold);letter-spacing:-.04em;margin-bottom:1rem} .error-wrap h1{font-family:var(--font-display);font-weight:400;font-size:clamp(2rem,5vw,3rem);margin:0 0 1rem;letter-spacing:-.02em} .error-wrap h1 em{color:var(--gold);font-style:italic} .error-wrap .muted{color:var(--text-mute);font-size:1.05rem;margin-bottom:2.2rem} .error-cta{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap} /* ============================================================= Banner de cookies ============================================================= */ /* ============================================================= COOKIE BANNER — Diseño moderno con botones premium ============================================================= */ .cookie-banner { position: fixed; left: 1.2rem; right: 1.2rem; bottom: 1.2rem; z-index: 9000; background: linear-gradient(135deg, rgba(0,212,255,.04) 0%, rgba(162,89,255,.04) 100%), linear-gradient(180deg, rgba(18,18,28,.92), rgba(10,10,16,.95)); border: 1px solid rgba(0,212,255,0.15); border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(0,212,255,.08), inset 0 1px 0 rgba(255,255,255,.04); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); animation: cookieIn .4s cubic-bezier(.16,1,.3,1) both; max-width: 820px; margin: 0 auto; overflow: hidden; } .cookie-banner::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan), var(--purple), transparent); } html[data-theme="light"] .cookie-banner { background: linear-gradient(135deg, rgba(0,212,255,.04) 0%, rgba(162,89,255,.04) 100%), linear-gradient(180deg, rgba(255,255,255,.95), rgba(250,250,253,.97)); border-color: rgba(0,0,0,0.08); box-shadow: 0 30px 80px rgba(0,0,0,.15), 0 0 0 1px rgba(0,212,255,.06); } .cookie-banner.out { animation: cookieOut .28s ease forwards; } @keyframes cookieIn { from { transform: translateY(30px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes cookieOut { to { transform: translateY(20px) scale(.98); opacity: 0; } } .cookie-banner__inner { padding: 1.5rem 1.6rem; display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; position: relative; } .cookie-banner__icon { flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, rgba(0,212,255,.15), rgba(162,89,255,.15)); border: 1px solid rgba(0,212,255,.25); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--cyan); } .cookie-banner__text { flex: 1; min-width: 240px; } .cookie-banner__text strong { display: block; color: var(--text); font-family: var(--font-body); font-weight: 700; font-size: 1.02rem; margin-bottom: .3rem; letter-spacing: -.01em; } .cookie-banner__text p { color: var(--text-mute); font-size: .9rem; line-height: 1.55; margin: 0; } .cookie-banner__text a { color: var(--cyan); text-decoration: underline; text-decoration-color: rgba(0,212,255,.4); text-underline-offset: 3px; transition: color .2s; } .cookie-banner__text a:hover { color: var(--purple); } .cookie-banner__actions { display: flex; gap: .6rem; flex-wrap: wrap; } /* Botones cookies modernos (clases nuevas) */ .cookie-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .75rem 1.3rem; font-size: .88rem; font-weight: 600; font-family: inherit; border-radius: 12px; border: 1px solid transparent; cursor: pointer; transition: all .25s cubic-bezier(.16,1,.3,1); text-decoration: none; position: relative; overflow: hidden; } .cookie-btn-primary { background: var(--brand-gradient, linear-gradient(135deg, #00d4ff, #a259ff)); color: #0a0a0d; box-shadow: 0 6px 20px rgba(0,212,255,.25); } .cookie-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,212,255,.4); filter: brightness(1.08); color: #0a0a0d; } .cookie-btn-primary::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.3) 50%, transparent 70%); transform: translateX(-100%); transition: transform .6s; } .cookie-btn-primary:hover::before { transform: translateX(100%); } .cookie-btn-ghost { background: rgba(255,255,255,.04); color: var(--text); border-color: rgba(255,255,255,.12); } .cookie-btn-ghost:hover { background: rgba(0,212,255,.08); border-color: rgba(0,212,255,.35); color: var(--cyan); } html[data-theme="light"] .cookie-btn-ghost { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.1); color: var(--text); } html[data-theme="light"] .cookie-btn-ghost:hover { background: rgba(162,89,255,.08); border-color: rgba(162,89,255,.3); color: var(--purple); } /* Compatibilidad con clases antiguas (btn-gold/btn-ghost) en el banner */ .cookie-banner__actions .btn-gold, .cookie-banner__actions .btn-ghost { padding: .75rem 1.3rem; font-size: .88rem; border-radius: 12px; font-weight: 600; } .cookie-prefs { margin-top: 1rem; display: flex; gap: 1rem; flex-wrap: wrap; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.06); width: 100%; } .cookie-pref { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--text-mute); cursor: pointer; padding: .4rem .8rem; border-radius: 8px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); transition: all .2s; } .cookie-pref:hover { background: rgba(0,212,255,.06); border-color: rgba(0,212,255,.2); color: var(--text); } .cookie-pref input { accent-color: var(--cyan); cursor: pointer; } @media (max-width: 640px) { .cookie-banner { left: .8rem; right: .8rem; bottom: .8rem; } .cookie-banner__inner { padding: 1.2rem; flex-direction: column; align-items: stretch; gap: 1rem; } .cookie-banner__icon { align-self: flex-start; } .cookie-banner__actions { width: 100%; } .cookie-banner__actions .cookie-btn, .cookie-banner__actions .btn-gold, .cookie-banner__actions .btn-ghost { flex: 1; padding: .85rem 1rem; } } /* ============================================================= Enlaces legales del footer (.footer-legal ya está definido arriba) ============================================================= */ .footer-legal-copy { color: var(--text-mute); font-size: .85rem; } /* ============================================================= Página de derechos RGPD ============================================================= */ .rights-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin:2rem 0} .right-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1.4rem 1.2rem;transition:all .25s} .right-card:hover{border-color:rgba(0,212,255,.4);transform:translateY(-2px)} .right-card h3{font-family:var(--font-display);font-style:italic;font-weight:400;color:var(--purple);font-size:1.1rem;margin:0 0 .4rem} .right-card p{color:var(--text-mute);font-size:.88rem;margin:0;line-height:1.5} .rights-form{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:2rem;margin:2rem 0} .rights-form .form-row{margin-bottom:1.2rem} .rights-form label{display:block;color:var(--text);font-size:.92rem;margin-bottom:.4rem;font-weight:500} .rights-form .req{color:var(--gold)} .rights-form input[type=text],.rights-form input[type=email],.rights-form textarea{width:100%;background:var(--bg-1);border:1px solid var(--line);border-radius:8px;padding:.7rem .9rem;color:var(--text);font-family:inherit;font-size:.95rem;transition:border-color .2s} .rights-form input:focus,.rights-form textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(0,212,255,.10)} .rights-form small{display:block;color:var(--text-dim);font-size:.78rem;margin-top:.3rem} .rights-form .checks-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.5rem} .rights-form .check{display:flex;align-items:center;gap:.5rem;padding:.5rem .8rem;background:var(--bg-1);border:1px solid var(--line);border-radius:8px;cursor:pointer;color:var(--text-mute);font-weight:400} .rights-form .check:hover{border-color:rgba(0,212,255,.3);color:var(--text)} .rights-form .check input{accent-color:var(--gold)} /* ============================================================= Form consent (checkbox de privacidad) ============================================================= */ .form-consent{display:flex;align-items:flex-start;gap:0.75rem;padding:1rem 1.2rem;margin:1.2rem 0;background:rgba(0,212,255,0.05);border:1px solid var(--line);border-radius:12px;font-size:0.88rem;line-height:1.5;color:var(--text-mute);transition:border-color 0.2s, background 0.2s} .form-consent:hover{border-color:rgba(0,212,255,0.25)} .form-consent input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:0;flex-shrink:0;background:var(--bg-1);border:1.5px solid var(--line-strong);border-radius:5px;cursor:pointer;transition:all 0.2s;position:relative;margin-top:1px} .form-consent input[type="checkbox"]:hover{border-color:var(--gold)} .form-consent input[type="checkbox"]:checked{background:var(--brand-gradient);border-color:transparent} .form-consent input[type="checkbox"]:checked::after{content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);color:var(--bg-0);font-weight:bold;font-size:14px;line-height:1} .form-consent input[type="checkbox"]:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .form-consent label{flex:1;cursor:pointer;color:var(--text);margin:0;user-select:none} .form-consent label a{color:var(--gold);text-decoration:underline;text-decoration-color:rgba(0,212,255,0.4);text-underline-offset:2px;font-weight:500} .form-consent label a:hover{text-decoration-color:var(--gold)} .form-submit{margin-top:0.5rem;width:100%;justify-content:center} @media (min-width: 768px) {.form-submit{width:auto}} .form-note{display:block;margin-top:0.8rem;color:var(--text-dim);font-size:0.8rem} /* ============================================================= THEME TOGGLE — Botón claro/oscuro mejorado ============================================================= */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); color: var(--text-mute); cursor: pointer; font-size: 0.95rem; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); padding: 0; position: relative; overflow: hidden; } .theme-toggle::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, rgba(0,212,255,0.4), rgba(162,89,255,0.3) 60%, transparent); opacity: 0; transition: opacity 0.3s; border-radius: 50%; } .theme-toggle i { position: relative; z-index: 1; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .theme-toggle:hover { border-color: rgba(0,212,255,0.4); color: var(--cyan); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,212,255,0.25); } .theme-toggle:hover::before { opacity: 1; } .theme-toggle:hover i { transform: rotate(360deg) scale(1.1); } html[data-theme="light"] .theme-toggle { background: rgba(0,0,0,0.03); border-color: var(--line); color: #555; } html[data-theme="light"] .theme-toggle:hover { background: rgba(162, 89, 255, 0.08); color: var(--purple); } /* ============================================================= FILTROS — animación al cambiar ============================================================= */ .project-item, .marketplace-item { transition: opacity 0.28s ease, transform 0.28s ease; } .filter-hide { opacity: 0; transform: scale(0.96) translateY(8px); } .filter-show { opacity: 1; transform: none; } .filters .filter { transition: all 0.25s; position: relative; } .filters .filter.active { background: var(--brand-gradient, linear-gradient(135deg, #00d4ff, #a259ff)); color: var(--bg-0); border-color: transparent; box-shadow: 0 4px 20px rgba(0, 212, 255, 0.25); } /* ============================================================= FONDO DE PARTÍCULAS, CARRUSELES Y BARRA DE PROGRESO ============================================================= */ #bg-particles { display: block !important; visibility: visible !important; position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; pointer-events: none !important; z-index: 0 !important; opacity: 0.85 !important; } html[data-theme="light"] #bg-particles { opacity: 1; /* En modo claro intensificamos el blend para que las partículas se vean contra el fondo blanco/gris */ mix-blend-mode: multiply; } /* El navbar y el WhatsApp flotante mantienen su position:fixed. Solo aseguramos que las secciones (que son position:relative natural) queden por encima de las partículas. */ /* (Las secciones se apilan naturalmente por orden DOM, sin z-index explícito, para que el canvas de partículas con z-index:-1 se vea de fondo por toda la web) */ /* ============================================================= HERO — Mejora visual extra (efecto parallax + glow) ============================================================= */ .hero-title em { display: inline-block; position: relative; background: linear-gradient(135deg, #00d4ff 0%, #a259ff 60%, #ff4d8d 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; background-size: 200% 200%; animation: gradientShift 6s ease-in-out infinite; } @keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Tilt sutil en cards de proyectos */ .project-card { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s; transform-style: preserve-3d; perspective: 1000px; } .project-card:hover { transform: translateY(-6px) rotateX(2deg) rotateY(-2deg); box-shadow: 0 30px 70px rgba(0,0,0,0.4), 0 0 0 1px rgba(0, 212, 255, 0.15); } .project-card .project-cover img { transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .project-card:hover .project-cover img { transform: scale(1.08); } /* Scroll progress bar arriba */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, #00d4ff, #a259ff); z-index: 1000; transition: width 0.1s linear; pointer-events: none; box-shadow: 0 0 10px rgba(0,212,255,0.5); } /* ============================================================= CARRUSEL — Página de proyecto (galería completa) ============================================================= */ .carousel { position: relative; border-radius: var(--radius-lg, 16px); overflow: hidden; background: rgba(20,20,28,.5); border: 1px solid var(--line); } .carousel-track { display: flex; transition: transform .5s cubic-bezier(.16,1,.3,1); } .carousel-slide { min-width: 100%; position: relative; display: flex; align-items: center; justify-content: center; background: rgba(10,10,16,.6); } .carousel-slide img { width: 100%; display: block; max-height: 70vh; aspect-ratio: 16/10; object-fit: contain; } .carousel-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem 1.2rem .9rem; background: linear-gradient(180deg, transparent, rgba(0,0,0,.8)); color: #fff; font-size: .92rem; } .carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); background: rgba(10,10,16,.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1rem; transition: all .25s cubic-bezier(.16,1,.3,1); z-index: 2; } .carousel-btn:hover { background: var(--brand-gradient, linear-gradient(135deg,#00d4ff,#a259ff)); border-color: transparent; color: #0a0a0d; transform: translateY(-50%) scale(1.08); } .carousel-prev { left: 14px; } .carousel-next { right: 14px; } .carousel-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 2; } .carousel-dot { width: 9px; height: 9px; border-radius: 50%; border: 0; background: rgba(255,255,255,.35); cursor: pointer; padding: 0; transition: all .25s; } .carousel-dot.active { background: var(--cyan, #00d4ff); width: 26px; border-radius: 5px; box-shadow: 0 0 10px rgba(0,212,255,.6); } /* ============================================================= MINI-CARRUSEL — Tarjetas de proyecto del índice ============================================================= */ .card-carousel { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; } .card-carousel-track { display: flex; height: 100%; width: 100%; transition: transform .45s cubic-bezier(.16,1,.3,1); } /* IMPORTANTE: anular el position:absolute que .project-cover img aplica a todas las imágenes — en el carrusel deben fluir en horizontal. */ .card-carousel-track .card-carousel-slide { position: relative !important; inset: auto !important; min-width: 100%; width: 100%; height: 100%; object-fit: cover; display: block; flex: 0 0 100%; transform: none !important; } .project-card:hover .card-carousel-track .card-carousel-slide { transform: none !important; } .card-car-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); background: rgba(10,10,16,.65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: .8rem; opacity: 0; transition: all .25s; z-index: 2; } .project-card:hover .card-car-btn { opacity: 1; } .card-car-btn:hover { background: var(--brand-gradient, linear-gradient(135deg,#00d4ff,#a259ff)); border-color: transparent; color: #0a0a0d; } .card-car-prev { left: 10px; } .card-car-next { right: 10px; } .card-car-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 2; } .card-car-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.4); cursor: pointer; transition: all .25s; } .card-car-dot.active { background: var(--cyan, #00d4ff); width: 20px; border-radius: 4px; } /* Touch: en móvil las flechas siempre visibles */ @media (hover: none) { .card-car-btn { opacity: 1; } } /* ============================================================= PRODUCTOS PROPIOS — Diseño enterprise ============================================================= */ .products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1.5rem; margin-top: 3.5rem; align-items: stretch; } /* Con un solo producto, no estirar a todo el ancho. Clase desde PHP (compatible con todos los navegadores) + :has() moderno. */ .products-grid--single, .products-grid:has(> .product-card:only-child) { grid-template-columns: minmax(0, 900px); justify-content: center; } .product-card { --pcolor-from: #00d4ff; --pcolor-to: #a259ff; --pcolor-from-rgb: 0,212,255; --pcolor-to-rgb: 162,89,255; position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 2.4rem; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .35s, box-shadow .35s; } /* Halo de color en la esquina superior */ .product-card::before { content: ""; position: absolute; top: -140px; right: -140px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--pcolor-from-rgb), .18) 0%, rgba(var(--pcolor-to-rgb), .06) 45%, transparent 70%); z-index: -1; transition: opacity .35s; } .product-card:hover { transform: translateY(-4px); border-color: rgba(var(--pcolor-from-rgb), .45); box-shadow: 0 24px 70px rgba(var(--pcolor-from-rgb), .16); } /* --- Cabecera: icono + estado --- */ .product-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.8rem; } .product-icon-box { width: 60px; height: 60px; border-radius: 16px; background: linear-gradient(135deg, var(--pcolor-from), var(--pcolor-to)); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #fff; flex-shrink: 0; box-shadow: 0 10px 30px rgba(var(--pcolor-from-rgb), .3); } .product-status { display: inline-flex; align-items: center; gap: .5rem; padding: .42rem .9rem; border-radius: 999px; font-family: var(--font-mono, monospace); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; border: 1px solid; white-space: nowrap; } .product-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: productDotPulse 2.4s ease-in-out infinite; } @keyframes productDotPulse { 0%,100%{opacity:1} 50%{opacity:.35} } .product-status--coming { color:#d99a12; background:rgba(217,154,18,.12); border-color:rgba(217,154,18,.35); } .product-status--waitlist { color:#8b45ff; background:rgba(139,69,255,.12); border-color:rgba(139,69,255,.35); } .product-status--beta { color:#0090b8; background:rgba(0,144,184,.12); border-color:rgba(0,144,184,.35); } .product-status--live { color:#2f9e56; background:rgba(47,158,86,.12); border-color:rgba(47,158,86,.35); } html[data-theme="dark"] .product-status--coming { color:#f5c85a; background:rgba(245,200,90,.1); border-color:rgba(245,200,90,.3); } html[data-theme="dark"] .product-status--waitlist { color:#b98aff; background:rgba(162,89,255,.12); border-color:rgba(162,89,255,.32); } html[data-theme="dark"] .product-status--beta { color:#00d4ff; background:rgba(0,212,255,.1); border-color:rgba(0,212,255,.3); } html[data-theme="dark"] .product-status--live { color:#6ec588; background:rgba(110,197,136,.12);border-color:rgba(110,197,136,.32); } /* --- Textos --- */ .product-category { display: inline-block; font-family: var(--font-mono, monospace); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); margin-bottom: .7rem; } .product-name { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 400; line-height: 1.1; margin: 0 0 .6rem; color: var(--text); letter-spacing: -.015em; } .product-tagline { font-size: 1.05rem; font-weight: 600; margin: 0 0 1rem; background: linear-gradient(120deg, var(--pcolor-from), var(--pcolor-to)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .product-desc { color: var(--text-mute); font-size: .98rem; line-height: 1.65; margin: 0 0 1.8rem; max-width: 62ch; } /* --- Funcionalidades en dos columnas --- */ .product-features { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .75rem 1.5rem; flex: 1; } .product-features li { color: var(--text); font-size: .92rem; display: flex; align-items: flex-start; gap: .65rem; line-height: 1.5; } .product-features li i { color: var(--pcolor-from); font-size: .7rem; margin-top: .35rem; flex-shrink: 0; } /* --- Pie --- */ .product-foot { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding-top: 1.5rem; border-top: 1px solid var(--line); margin-top: auto; } .product-price-info { color: var(--text-dim); font-size: .84rem; font-family: var(--font-mono, monospace); max-width: 34ch; line-height: 1.4; } .product-cta { display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1.5rem; border-radius: 12px; background: linear-gradient(135deg, var(--pcolor-from), var(--pcolor-to)); color: #fff; font-weight: 700; font-size: .92rem; text-decoration: none; white-space: nowrap; box-shadow: 0 8px 24px rgba(var(--pcolor-from-rgb), .28); transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s; } .product-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(var(--pcolor-from-rgb), .4); color: #fff; } .product-cta i { transition: transform .25s; } .product-cta:hover i { transform: translateX(3px); } html[data-theme="light"] .product-card { background: #fff; border-color: rgba(0,0,0,.08); box-shadow: 0 2px 14px rgba(0,0,0,.05); } html[data-theme="light"] .product-card:hover { box-shadow: 0 24px 60px rgba(var(--pcolor-from-rgb), .18); } @media (max-width: 640px) { .product-card { padding: 1.8rem 1.4rem; } .product-features { grid-template-columns: 1fr; } .product-foot { flex-direction: column; align-items: flex-start; } .product-cta { width: 100%; justify-content: center; } } /* ============================================================= LANDING DE PRODUCTO (/producto.php?slug=...) ============================================================= */ .product-page { padding-top: 5rem; --pcolor-from-rgb: var(--pcolor-from-rgb, 0,212,255); --pcolor-to-rgb: var(--pcolor-to-rgb, 162,89,255); } .product-back { display: inline-flex; align-items: center; gap: .5rem; color: var(--text-mute); font-size: .9rem; text-decoration: none; transition: color .2s; margin-bottom: 2rem; } .product-back:hover { color: var(--cyan); } .product-hero { padding: 3rem 0 4rem; position: relative; } .product-hero-inner { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; } @media(min-width: 900px) { .product-hero-inner { grid-template-columns: 1.4fr 1fr; } } .product-hero-title { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 300; line-height: 1.05; margin: 0 0 1rem; background: linear-gradient(135deg, var(--pcolor-from) 0%, var(--pcolor-to) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .product-hero-tagline { font-size: 1.3rem; color: var(--text); margin: 0 0 1.5rem; font-weight: 500; } .product-hero-desc { color: var(--text-mute); font-size: 1.05rem; line-height: 1.7; margin: 0 0 2.2rem; max-width: 56ch; } .product-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; } /* Icono grande decorativo */ .product-hero-visual { display: flex; align-items: center; justify-content: center; } .product-hero-icon { width: min(300px, 70vw); height: min(300px, 70vw); border-radius: 32px; background: linear-gradient(135deg, rgba(var(--pcolor-from-rgb), 0.15), rgba(var(--pcolor-to-rgb), 0.15)); border: 1px solid rgba(var(--pcolor-from-rgb), 0.3); display: flex; align-items: center; justify-content: center; font-size: min(140px, 34vw); color: var(--pcolor-from); position: relative; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.4), 0 0 60px rgba(var(--pcolor-from-rgb), 0.15); } .product-hero-icon::before { content: ""; position: absolute; inset: -50%; background: conic-gradient(from 0deg, transparent, rgba(var(--pcolor-from-rgb), 0.4), transparent); animation: productHeroRotate 8s linear infinite; opacity: .5; } .product-hero-icon::after { content: ""; position: absolute; inset: 3px; border-radius: 30px; background: linear-gradient(135deg, rgba(10,10,20,.9), rgba(20,20,32,.9)); } .product-hero-icon i { position: relative; z-index: 1; } @keyframes productHeroRotate { to { transform: rotate(360deg); } } /* Descripción larga */ .product-long-container { max-width: 780px; } .product-long-desc { color: var(--text-mute); font-size: 1.05rem; line-height: 1.8; } /* Grid de funcionalidades */ .product-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; max-width: 900px; margin: 0 auto; } .product-feature-item { display: flex; gap: .9rem; padding: 1.2rem 1.3rem; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 14px; transition: all .25s; } .product-feature-item:hover { border-color: rgba(var(--pcolor-from-rgb), 0.3)); transform: translateY(-2px); } .product-feature-icon { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, var(--pcolor-from), var(--pcolor-to)); color: #08070d; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .8rem; font-weight: 700; } .product-feature-text { color: var(--text); font-size: .95rem; line-height: 1.5; } /* Waitlist */ .product-waitlist-container { max-width: 700px; } .product-waitlist-card { padding: 3rem 2.5rem; background: radial-gradient(circle at 20% 0%, rgba(var(--pcolor-from-rgb), 0.12), transparent 60%), linear-gradient(180deg, var(--panel), var(--bg-1)); border: 1px solid var(--line); border-radius: 24px; text-align: center; } .product-waitlist-card h2 { font-family: var(--font-display); font-size: 2rem; font-weight: 300; margin: .5rem 0 1rem; } .product-waitlist-card p { color: var(--text-mute); margin: 0 auto 2rem; max-width: 50ch; } .product-waitlist-form { display: flex; gap: .6rem; max-width: 480px; margin: 0 auto; flex-wrap: wrap; } .product-waitlist-form input[type=email] { flex: 1; min-width: 220px; padding: .9rem 1.1rem; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 12px; color: var(--text); font-family: inherit; font-size: .95rem; } .product-waitlist-form input[type=email]:focus { outline: none; border-color: var(--pcolor-from); box-shadow: 0 0 0 3px rgba(var(--pcolor-from-rgb), 0.15); } .product-waitlist-note { margin-top: 1.2rem; font-size: .85rem; color: var(--text-dim); min-height: 1.3em; } .product-waitlist-note.loading { color: var(--cyan); } .product-waitlist-note.ok { color: var(--success, #6ec588); } .product-waitlist-note.err { color: var(--danger, #e36a6a); } /* Datos de contacto en el footer */ .footer-contact-item { display: flex; align-items: center; gap: .6rem; color: var(--text-mute); font-size: .92rem; margin-top: .7rem; text-decoration: none; transition: color .25s; width: fit-content; } .footer-contact-item i { color: var(--cyan); font-size: .85rem; width: 16px; } .footer-contact-item:hover { color: var(--cyan); } /* ============================================================= NEUTRALIZADOR DEL INTRO (pantalla de carga eliminada) Si por cualquier motivo quedara un intro.js antiguo en el servidor, esto impide que se muestre y que bloquee el scroll. ============================================================= */ #intro-screen { display: none !important; } html.intro-pending body { visibility: visible !important; } body.intro-active { overflow: auto !important; }