/* ===================================================================== Visioneon · estilos del sitio público Aesthetic: Mediterranean Premium · azul mar + arena + dorado tostado ===================================================================== */ /* ---------- Tokens de diseño ---------- */ :root{ /* Fondos: oscuros pero CÁLIDOS (no negro frío, sino azul marino profundo) */ --bg-0:#0F2734; /* Azul mediterráneo nocturno — fondo más oscuro */ --bg-1:#152F3D; /* Azul mediterráneo profundo — fondo principal */ --bg-2:#1B3B4E; /* Azul mediterráneo — alternativo */ --panel:#1A3441; /* Tarjetas */ --panel-2:#22404F; /* Tarjetas elevadas */ --line:rgba(237,229,210,.10); /* Arena al 10% */ --line-strong:rgba(237,229,210,.20); --text:#F4EFE2; /* Arena clarísima — texto principal */ --text-mute:#C9C2B0; /* Arena */ --text-dim:#8A8473; /* Arena oscura */ /* Paleta Visioneon Mediterranean */ --sea-deep:#0F2734; /* Azul mar profundo */ --sea:#1B3B4E; /* Azul mediterráneo */ --sea-soft:#3D5C6E; /* Azul mediterráneo suave */ --sand:#EDE5D2; /* Arena */ --sand-soft:#F4EFE2; /* Arena clara */ --gold:#C29B4A; /* Dorado tostado — único color de acento */ --gold-soft:#D9B468; /* Dorado claro hover */ --gold-deep:#9C7A36; /* Dorado oscuro */ /* Alias retrocompat con el CSS original (mantiene compatibilidad) */ --cyan:var(--gold); --blue:var(--sea); --violet:var(--gold-deep); --purple:var(--gold-soft); --accent:var(--gold); /* Gradiente Visioneon: del azul profundo al dorado tostado, sutil */ --brand-gradient:linear-gradient(90deg,#1B3B4E 0%, #3D5C6E 45%, #C29B4A 100%); --brand-gradient-soft:linear-gradient(135deg,rgba(27,59,78,.18),rgba(194,155,74,.12)); --success:#6BAF85; --danger:#B5443C; --warning:#C29B4A; --info:#5C8AA8; --radius:14px; --radius-lg:22px; --radius-xl:32px; --shadow-sm:0 2px 12px rgba(0,0,0,.15); --shadow:0 12px 40px rgba(0,0,0,.25); --shadow-gold:0 12px 40px rgba(194,155,74,.15); --shadow-brand:0 12px 40px rgba(27,59,78,.30); --font-display:'Cormorant Garamond','Fraunces',Georgia,serif; --font-body:'Inter','Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,sans-serif; --font-mono:'JetBrains Mono','Courier New',monospace; } /* ====== MODO CLARO ====== Se activa cuando está presente. Mantiene la estructura editorial pero con paleta clara para usuarios diurnos. */ html[data-theme="light"] { --bg-0: #FBFAF6; /* Blanco roto cálido — fondo Visioneon */ --bg-1: #FFFFFF; /* Blanco puro — cards */ --bg-2: #EDE5D2; /* Arena — secciones alternas */ --panel: #FFFFFF; --panel-2: #F4EFE2; --line: rgba(27,59,78,.08); --line-strong: rgba(27,59,78,.16); --text: #1B3B4E; /* Azul mediterráneo — texto principal */ --text-mute: #3D5C6E; --text-dim: #7C8A93; --shadow-sm: 0 2px 12px rgba(27,59,78,.06); --shadow: 0 12px 40px rgba(27,59,78,.10); --shadow-gold: 0 12px 40px rgba(194,155,74,.20); --shadow-brand: 0 12px 40px rgba(27,59,78,.12); } html[data-theme="light"] body::before { background: radial-gradient(ellipse 60% 50% at 15% 0%, rgba(194,155,74,.06), transparent 60%), radial-gradient(ellipse 80% 60% at 95% 100%, rgba(27,59,78,.04), transparent 60%), radial-gradient(circle at 50% 50%, rgba(27,59,78,.015) 1px, transparent 1px) !important; } html[data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg-2); } html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #C9C2B0; } html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #8A8473; } /* ---------- 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(194,155,74,.08), transparent 60%), radial-gradient(ellipse 80% 60% at 95% 100%, rgba(217,180,104,.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(--gold); } .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(27,59,78,.20) 0%, rgba(15,39,52,.10) 100%)} .section.deep{background:rgba(27,59,78,.30)} /* En modo claro, los alt y deep usan arena suave */ html[data-theme="light"] .section.alt{ background:linear-gradient(180deg, rgba(237,229,210,.55) 0%, rgba(237,229,210,.20) 100%); } html[data-theme="light"] .section.deep{ background:rgba(237,229,210,.65); } /* ---------- Navbar ---------- */ .navbar-glass{ position:fixed !important; top:0 !important; left:0 !important; right:0 !important; z-index:100; background:rgba(15,39,52,.78); 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(251,250,246,0.82); border-bottom-color: rgba(27,59,78,0.08); } /* 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(194,155,74,0.35)); transform: translateY(-1px); } .brand-logo { height: 40px; width: 40px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(194,155,74,0.25)); transition: transform 0.3s ease; } .brand:hover .brand-logo { transform: rotate(5deg) scale(1.05); } .brand-text { background: linear-gradient(135deg, #C29B4A 0%, #D9B468 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:#0F2734; background:var(--gold); padding:.7rem 1.4rem; border-radius:999px; font-weight:700; letter-spacing:.01em; box-shadow:0 4px 14px rgba(194,155,74,.30); transition: background .2s, box-shadow .2s, transform .2s; } .nav-links a.cta:hover{ background:var(--gold-soft); color:#0F2734; box-shadow:0 8px 24px rgba(194,155,74,.45); transform:translateY(-1px); } /* Modo claro: el botón gira a azul mar sólido para destacar sobre fondo claro */ html[data-theme="light"] .nav-links a.cta{ background:var(--sea); color:var(--sand-soft); box-shadow:0 4px 14px rgba(27,59,78,.25); } html[data-theme="light"] .nav-links a.cta:hover{ background:var(--sea-deep); color:var(--sand-soft); box-shadow:0 8px 24px rgba(27,59,78,.40); } /* ============================================================= 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, #C29B4A, #D9B468)); 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: #0F2734 !important; border-color: transparent; transform: translateY(-2px) scale(1.05); box-shadow: 0 6px 20px rgba(194,155,74,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, #1B3B4E); } /* 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(237,229,210,.08)} .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(194,155,74,.12), transparent 60%), radial-gradient(ellipse 80% 60% at 0% 100%, rgba(217,180,104,.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(194, 155, 74, 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(194,155,74,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(194,155,74, 0.08), rgba(217,180,104,0.06)); color: var(--cyan); border-color: rgba(194,155,74,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(--gold); color: #0F2734; text-align: center; font-weight: 700; border-radius: 999px; padding: 1rem 1.3rem; font-size: 1.02rem; box-shadow: 0 8px 30px rgba(194, 155, 74, 0.35); transition: background 0.2s, box-shadow 0.2s, transform 0.2s; } .nav-links li.nav-cta-item a:hover { background: var(--gold-soft); color: #0F2734; box-shadow: 0 12px 36px rgba(194, 155, 74, 0.50); transform: translateY(-1px); } html[data-theme="light"] .nav-links li.nav-cta-item a { background: var(--sea); color: var(--sand-soft); box-shadow: 0 8px 30px rgba(27, 59, 78, 0.25); } html[data-theme="light"] .nav-links li.nav-cta-item a:hover { background: var(--sea-deep); color: var(--sand-soft); } /* ============= 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, #C29B4A, #D9B468)); color: var(--bg-0); border-color: transparent; transform: scale(1.08); } .nav-socials .theme-toggle:hover { background: rgba(194,155,74,0.12); border-color: rgba(194,155,74,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(194,155,74,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{ display:inline-flex;align-items:center;justify-content:center;gap:.6rem; font-family:var(--font-body);font-weight:700;font-size:.95rem; padding:1rem 1.8rem;border-radius:999px;border:0;cursor:pointer; transition:background .25s, color .25s, transform .25s, box-shadow .25s; text-decoration:none;line-height:1; position:relative;overflow:hidden; background:var(--gold); color:#0F2734; letter-spacing:.02em; box-shadow:0 6px 20px rgba(194,155,74,.30), 0 0 0 1px rgba(194,155,74,.15); } .btn-gold::before { content:"";position:absolute;inset:0; background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform:translateX(-100%);transition:transform .6s; } .btn-gold:hover{ background:var(--gold-soft); color:#0F2734; transform:translateY(-2px); box-shadow:0 12px 32px rgba(194,155,74,.45), 0 0 0 1px rgba(194,155,74,.3); } .btn-gold:hover::before { transform:translateX(100%); } /* Modo claro: el botón se invierte, ahora azul mar sólido con texto arena */ html[data-theme="light"] .btn-gold { background: var(--sea); color: var(--sand-soft); box-shadow: 0 6px 20px rgba(27,59,78,.25), 0 0 0 1px rgba(27,59,78,.15); } html[data-theme="light"] .btn-gold:hover { background: var(--sea-deep); color: var(--sand-soft); box-shadow: 0 12px 32px rgba(27,59,78,.40), 0 0 0 1px rgba(27,59,78,.25); } .btn-ghost{ 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;cursor:pointer; transition:background .25s, color .25s, border-color .25s, transform .25s, box-shadow .25s; text-decoration:none;line-height:1; background:rgba(237,229,210,.04); color:var(--text); border:1px solid var(--line-strong); } .btn-ghost:hover{ background:rgba(194,155,74,.10); border-color:var(--gold); color:var(--gold); transform:translateY(-2px); box-shadow:0 8px 24px rgba(194,155,74,.18); } html[data-theme="light"] .btn-ghost { background:rgba(27,59,78,.02); color: var(--text); border-color: rgba(27,59,78,.20); } html[data-theme="light"] .btn-ghost:hover { background:rgba(194,155,74,.10); border-color:var(--gold); color:var(--gold-deep); } .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(194,155,74,.12), transparent 50%), radial-gradient(circle at 20% 100%, rgba(217,180,104,.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(237,229,210,.03); } .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(237,229,210,.05); 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, var(--sea) 0%, var(--sea-deep) 100%); border:1px solid var(--line); } .about-portrait::before{ content:"";position:absolute;inset:0; background: radial-gradient(circle at 30% 20%, rgba(194,155,74,.22), transparent 60%), radial-gradient(circle at 80% 80%, rgba(217,180,104,.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(237,229,210,.03);transition:.25s} .skill-item:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 0 20px rgba(194,155,74,.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(237,229,210,.08);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(194,155,74,.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(194,155,74,.10);border:1px solid rgba(194,155,74,.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(194,155,74,.08) 0%, rgba(217,180,104,.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(--gold);color:#0F2734;padding:.4rem 1rem;border-radius:999px;font-weight:800;box-shadow:0 4px 16px rgba(194,155,74,.35)} .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:transparent;color:var(--text-mute);border:1px solid var(--line);border-radius:999px;padding:.6rem 1.2rem;font-size:.85rem;font-weight:500;cursor:pointer;transition:.2s} .filter:hover{color:var(--text);border-color:var(--line-strong)} .filter.active{background:var(--gold);color:#0F2734;border-color:var(--gold);font-weight:700;box-shadow:0 4px 16px rgba(194,155,74,.30)} html[data-theme="light"] .filter.active{background:var(--sea);color:var(--sand-soft);border-color:var(--sea)} .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} .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, var(--sea) 0%, var(--sea-deep) 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(194,155,74,.25); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); font-weight:600; } .badge-tag.sale{background:var(--brand-gradient);color:#0F2734;border-color:transparent} .badge-tag.sold{background:var(--success);color:#0F2734;border-color:transparent} .badge-tag.reserved{background:var(--warning);color:#0F2734;border-color:transparent} .badge-tag.featured{ background:linear-gradient(135deg, rgba(194,155,74,.2), rgba(217,180,104,.2)); color:#C29B4A; border:1px solid rgba(194,155,74,.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(--text)} .project-link:hover{color:var(--gold)} .project-link i{transition:transform .2s} .project-link:hover i{transform:translateX(4px)} .marketplace-banner{background:linear-gradient(135deg, rgba(194,155,74,.08), rgba(217,180,104,.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(237,229,210,.03);font-size:.92rem;transition:.2s} .tech-chip:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px);box-shadow:0 0 18px rgba(194,155,74,.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(237,229,210,.03);transition:.3s;position:relative} .process-step:hover{border-color:var(--gold);transform:translateY(-4px);box-shadow:0 0 20px rgba(194,155,74,.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} .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} .testi-card::before{content:"\201C";position:absolute;top:1rem;right:1.5rem;font-family:var(--font-display);font-size:5rem;color:var(--gold);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} .testi-author{display:flex;align-items:center;gap:1rem;padding-top:1rem;border-top:1px solid var(--line)} .testi-author-avatar{width:48px;height:48px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:600;font-size:1.2rem;color:#0F2734;box-shadow:0 4px 12px rgba(194,155,74,.30);flex-shrink:0} html[data-theme="light"] .testi-author-avatar{background:var(--sea);color:var(--sand-soft);box-shadow:0 4px 12px rgba(27,59,78,.20)} .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(--gold);color:#0F2734;border-color:var(--gold);box-shadow:0 2px 8px rgba(194,155,74,.30)} html[data-theme="light"] .faq-item.open .faq-q .icon{background:var(--sea);color:var(--sand-soft);border-color:var(--sea)} .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(194,155,74,.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(237,229,210,.03);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(194,155,74,.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(194,155,74,.03) 0%, rgba(217,180,104,.03) 100%), linear-gradient(180deg, rgba(27,59,78,.55) 0%, rgba(15,39,52,.80) 100%); border-top: 1px solid rgba(237,229,210,.08); } .footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(194,155,74,.4), rgba(217,180,104,.4), transparent); } /* ==== MODO CLARO ==== */ html[data-theme="light"] .footer { background: linear-gradient(135deg, rgba(194,155,74,.05) 0%, rgba(217,180,104,.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(237,229,210,.05); border: 1px solid rgba(237,229,210,.12); display: flex; align-items: center; justify-content: center; color: var(--text-mute); transition: background .25s, border-color .25s, color .25s, transform .25s, box-shadow .25s; position: relative; text-decoration: none; } .footer-social a i { transition: transform .3s; } .footer-social a:hover { background: var(--gold); border-color: var(--gold); color: #0F2734; transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 24px rgba(194,155,74,.40); } .footer-social a:hover i { transform: scale(1.15); } html[data-theme="light"] .footer-social a { background: rgba(27,59,78,.04); border-color: rgba(27,59,78,.12); color: var(--text-mute); } html[data-theme="light"] .footer-social a:hover { background: var(--sea); border-color: var(--sea); color: var(--sand-soft); box-shadow: 0 8px 24px rgba(27,59,78,.30); } /* ==== Bloque legal ==== */ .footer-legal { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(237,229,210,.08); 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(237,229,210,.08); 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; /* Evitar flash de contenido sin estilar antes de aplicar position:fixed */ visibility: hidden; } html.loaded .float-stack, body .float-stack { visibility: visible; } .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, #1B3B4E); 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, #C29B4A, #D9B468); box-shadow: 0 8px 24px rgba(194,155,74,.40); } .float-cta--email:hover { box-shadow: 0 14px 36px rgba(194,155,74,.6); } .float-cta--phone { background: linear-gradient(135deg, #1B3B4E, #3D5C6E); box-shadow: 0 8px 24px rgba(27,59,78,.40); } .float-cta--phone:hover { box-shadow: 0 14px 36px rgba(27,59,78,.6); } .float-cta--default { background: linear-gradient(135deg, #C29B4A, #D9B468); box-shadow: 0 8px 24px rgba(194,155,74,.4); } .float-cta--default:hover { box-shadow: 0 14px 36px rgba(194,155,74,.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)} html.js-ready .reveal.in,html.js-ready [data-reveal].is-visible,html.js-ready [data-reveal].in{opacity:1;transform:none} .delay-1{transition-delay:.1s}.delay-2{transition-delay:.2s}.delay-3{transition-delay:.3s}.delay-4{transition-delay:.4s} /* ============================================================= FOUC FIX — Evita rectángulos/elementos visibles antes del CSS ============================================================= */ .legal-page, .legal-head, .legal-body { background: transparent !important; } /* Asegurar contenedores que no tengan herencias raras */ main.legal-page > .container { background: transparent; } /* ============================================================= 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; } .service-card, .plan-card, .project-card { 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(194,155,74,.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 — Visioneon Mediterranean · RGPD compliant ============================================================= */ .cookie-banner { position: fixed; left: 1.2rem; right: 1.2rem; bottom: 1.2rem; z-index: 999999; background: linear-gradient(180deg, rgba(15,39,52,.96), rgba(11,30,42,.98)); border: 1px solid rgba(194,155,74,0.25); border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(194,155,74,.10); 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: 860px; margin: 0 auto; } .cookie-banner::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); border-radius: 18px 18px 0 0; pointer-events: none; } html[data-theme="light"] .cookie-banner { background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(251,250,246,.99)); border-color: rgba(27,59,78,0.12); box-shadow: 0 30px 80px rgba(27,59,78,.18), 0 0 0 1px rgba(194,155,74,.10); } .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: flex-start; flex-wrap: wrap; position: relative; } .cookie-banner__icon { flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, rgba(194,155,74,.18), rgba(217,180,104,.12)); border: 1px solid rgba(194,155,74,.30); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--gold); } .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: .35rem; 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(--gold); text-decoration: underline; text-decoration-color: rgba(194,155,74,.4); text-underline-offset: 3px; transition: color .2s; } .cookie-banner__text a:hover { color: var(--gold-soft); } .cookie-banner__actions { display: flex; gap: .6rem; flex-wrap: wrap; width: 100%; margin-top: .3rem; } /* Botones del banner */ .cookie-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem 1.4rem; font-size: .9rem; font-weight: 600; font-family: inherit; border-radius: 12px; border: 1px solid transparent; cursor: pointer; transition: background .2s, border-color .2s, color .2s, box-shadow .2s, transform .2s; text-decoration: none; letter-spacing: .01em; user-select: none; pointer-events: auto; } /* Botón primario "Aceptar todas" / "Guardar elección" — dorado solido */ .cookie-btn-primary { background: var(--gold); color: #0F2734; border-color: var(--gold); box-shadow: 0 6px 18px rgba(194,155,74,.28); } .cookie-btn-primary:hover { background: var(--gold-soft); border-color: var(--gold-soft); color: #0F2734; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(194,155,74,.42); } .cookie-btn-primary:active { transform: translateY(0); } /* Modo claro: el primario gira a azul mar */ html[data-theme="light"] .cookie-btn-primary { background: var(--sea); border-color: var(--sea); color: var(--sand-soft); box-shadow: 0 6px 18px rgba(27,59,78,.25); } html[data-theme="light"] .cookie-btn-primary:hover { background: var(--sea-deep); border-color: var(--sea-deep); color: var(--sand-soft); box-shadow: 0 10px 26px rgba(27,59,78,.40); } /* Botones ghost "Solo necesarias" / "Configurar" */ .cookie-btn-ghost { background: rgba(237,229,210,.05); color: var(--text); border-color: rgba(237,229,210,.18); } .cookie-btn-ghost:hover { background: rgba(194,155,74,.12); border-color: var(--gold); color: var(--gold); transform: translateY(-1px); } html[data-theme="light"] .cookie-btn-ghost { background: rgba(27,59,78,.03); border-color: rgba(27,59,78,.14); color: var(--text); } html[data-theme="light"] .cookie-btn-ghost:hover { background: rgba(194,155,74,.10); border-color: var(--gold); color: var(--gold-deep); } /* Preferencias granulares (checkboxes) */ .cookie-prefs { margin-top: 1rem; display: flex; gap: .8rem; flex-wrap: wrap; padding-top: 1rem; border-top: 1px solid rgba(237,229,210,.10); width: 100%; } .cookie-pref { display: inline-flex; align-items: center; gap: .6rem; font-size: .88rem; color: var(--text-mute); cursor: pointer; padding: .55rem .95rem; border-radius: 10px; background: rgba(237,229,210,.04); border: 1px solid rgba(237,229,210,.10); transition: all .2s; user-select: none; } .cookie-pref:hover { background: rgba(194,155,74,.08); border-color: rgba(194,155,74,.30); color: var(--text); } .cookie-pref input { accent-color: var(--gold); cursor: pointer; width: 16px; height: 16px; } html[data-theme="light"] .cookie-pref { background: rgba(27,59,78,.03); border-color: rgba(27,59,78,.10); } html[data-theme="light"] .cookie-pref:hover { background: rgba(194,155,74,.08); border-color: rgba(194,155,74,.30); } /* Móvil */ @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%; flex-direction: column; } .cookie-banner__actions .cookie-btn { width: 100%; } .cookie-prefs { flex-direction: column; } .cookie-pref { width: 100%; } } /* Botón flotante "Configurar cookies" en footer (clase .BtnCookie del proyecto antiguo) */ .BtnCookie { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem; background: rgba(237,229,210,.04); color: var(--text-mute); border: 1px solid rgba(237,229,210,.10); border-radius: 999px; font-size: .85rem; cursor: pointer; transition: all .2s; font-family: inherit; } .BtnCookie:hover { background: rgba(194,155,74,.10); border-color: var(--gold); color: var(--gold); } html[data-theme="light"] .BtnCookie { background: rgba(27,59,78,.04); border-color: rgba(27,59,78,.10); } html[data-theme="light"] .BtnCookie:hover { background: rgba(194,155,74,.08); border-color: var(--gold); color: var(--gold-deep); } /* ============================================================= 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(194,155,74,.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:linear-gradient(180deg, var(--panel) 0%, var(--bg-1) 100%);border:1px solid var(--line);border-radius:18px;padding:2.4rem;margin:2rem 0;box-shadow:0 8px 32px rgba(0,0,0,.12)} .rights-form .form-row{margin-bottom:1.4rem} .rights-form label{display:block;color:var(--text);font-size:.92rem;margin-bottom:.5rem;font-weight:600} .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:10px;padding:.85rem 1rem;color:var(--text);font-family:inherit;font-size:.95rem;transition:border-color .2s, box-shadow .2s, background .2s} .rights-form input:focus,.rights-form textarea:focus{outline:none;border-color:var(--gold);background:var(--bg-0);box-shadow:0 0 0 3px rgba(194,155,74,.15)} .rights-form small{display:block;color:var(--text-dim);font-size:.78rem;margin-top:.4rem} .rights-form .checks-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.6rem} .rights-form .check{display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;background:var(--bg-1);border:1px solid var(--line);border-radius:10px;cursor:pointer;color:var(--text-mute);font-weight:500;transition:border-color .2s, color .2s, background .2s} .rights-form .check:hover{border-color:rgba(194,155,74,.40);color:var(--text);background:rgba(194,155,74,.04)} .rights-form .check:has(input:checked){border-color:var(--gold);color:var(--text);background:rgba(194,155,74,.08)} .rights-form .check input{accent-color:var(--gold);width:16px;height:16px;cursor:pointer} .rights-form .form-submit{margin-top:1rem} /* ============================================================= 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(194,155,74,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(194,155,74,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(--gold);border-color:var(--gold)} .form-consent input[type="checkbox"]:checked::after{content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#0F2734;font-size:14px;font-weight:bold;line-height:1} html[data-theme="light"] .form-consent input[type="checkbox"]:checked{background:var(--sea);border-color:var(--sea)} html[data-theme="light"] .form-consent input[type="checkbox"]:checked::after{color:var(--sand-soft)} .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(194,155,74,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(194,155,74,0.4), rgba(217,180,104,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(194,155,74,0.4); color: var(--cyan); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(194,155,74,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(217, 180, 104, 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, #C29B4A, #D9B468)); color: var(--bg-0); border-color: transparent; box-shadow: 0 4px 20px rgba(194, 155, 74, 0.25); } /* ============================================================= /* ============================================================= INTRO SCREEN — Pantalla de carga con logo Visioneon 3D ============================================================= */ /* No usamos overflow:hidden aquí porque rompe position:fixed. El scroll-lock durante el intro se gestiona en el JS. */ body.intro-active { /* sin reglas que rompan fixed */ } #intro-screen { position: fixed; inset: 0; z-index: 99999; background: radial-gradient(ellipse 60% 50% at 50% 30%, rgba(194,155,74,0.18), transparent 60%), radial-gradient(ellipse 80% 60% at 50% 90%, rgba(217,180,104,0.15), transparent 60%), #050509; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity 0.8s ease, transform 0.8s ease, filter 0.8s ease; perspective: 1200px; } #intro-screen.closing { opacity: 0; transform: scale(1.08); filter: blur(6px); pointer-events: none; } #intro-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; } .intro-content { position: relative; z-index: 2; text-align: center; cursor: default; user-select: none; padding: 0 1.5rem; } /* ============ LOGO 3D STAGE ============ */ .intro-logo-stage { position: relative; width: clamp(280px, 60vw, 540px); margin: 0 auto; transform-style: preserve-3d; transition: transform 0.2s ease-out; animation: introStageEntry 1.4s cubic-bezier(0.16, 1, 0.3, 1) backwards; } @keyframes introStageEntry { 0% { opacity: 0; transform: scale(0.6) rotateX(25deg); } 100% { opacity: 1; transform: scale(1) rotateX(0); } } /* Wrapper del logo */ .intro-logo-wrap { position: relative; display: flex; align-items: center; justify-content: center; transform-style: preserve-3d; } .intro-logo-img { width: 100%; height: auto; display: block; border-radius: 18px; } /* Logo principal: flota suavemente en 3D */ .intro-logo-img:not(.intro-logo-img-glow) { position: relative; z-index: 3; animation: introLogoFloat 4s ease-in-out infinite; filter: drop-shadow(0 10px 40px rgba(194,155,74,0.35)) drop-shadow(0 0 60px rgba(217,180,104,0.25)); } @keyframes introLogoFloat { 0%, 100% { transform: translateZ(0) translateY(0); } 50% { transform: translateZ(25px) translateY(-10px); } } /* Capa glow: misma imagen difusa detrás para halo de neón */ .intro-logo-img-glow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.6; filter: blur(35px) saturate(1.8); animation: introLogoPulse 2.6s ease-in-out infinite; } @keyframes introLogoPulse { 0%, 100% { opacity: 0.4; transform: scale(1.02); } 50% { opacity: 0.7; transform: scale(1.08); } } /* ============ LÍNEA DECORATIVA ============ */ .intro-line { width: 0; height: 1px; margin: 1.6rem auto 1.2rem; background: linear-gradient(90deg, transparent, #C29B4A, #D9B468, transparent); animation: introLineGrow 1.2s ease-out 1.2s forwards; } @keyframes introLineGrow { to { width: min(320px, 70vw); } } /* ============ STATUS ============ */ .intro-status { display: inline-flex; align-items: center; gap: 0.6rem; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; color: rgba(244, 241, 234, 0.7); letter-spacing: 0.04em; opacity: 0; animation: introFadeIn 0.6s ease 1.6s forwards; } @keyframes introFadeIn { to { opacity: 1; } } .intro-dot { width: 8px; height: 8px; border-radius: 50%; background: #C29B4A; box-shadow: 0 0 12px #C29B4A; animation: introDotBlink 1s ease-in-out infinite; } @keyframes introDotBlink { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } /* ============ BARRA DE PROGRESO ============ */ .intro-progress { width: min(280px, 60vw); height: 2px; background: rgba(255,255,255,0.08); margin: 1.5rem auto 0; border-radius: 2px; overflow: hidden; opacity: 0; animation: introFadeIn 0.6s ease 1.6s forwards; } .intro-progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, #C29B4A 0%, #D9B468 100%); box-shadow: 0 0 14px rgba(194,155,74,0.6); animation: introProgress 2.6s cubic-bezier(0.5, 0, 0.5, 1) 0.4s forwards; } @keyframes introProgress { to { width: 100%; } } /* ============ BOTÓN SKIP ============ */ .intro-skip { position: absolute; top: 1.4rem; right: 1.4rem; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: rgba(244, 241, 234, 0.8); padding: 0.5rem 1rem; font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; border-radius: 999px; cursor: pointer; letter-spacing: 0.05em; transition: all 0.25s; opacity: 0; animation: introFadeIn 0.6s ease 1.8s forwards; z-index: 10; } .intro-skip:hover { background: rgba(194, 155, 74, 0.12); border-color: rgba(194, 155, 74, 0.45); color: #C29B4A; transform: translateX(2px); } @media (max-width: 480px) { .intro-skip { top: 1rem; right: 1rem; padding: .4rem .8rem; font-size: .7rem; } } ============================================================= */ #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, #C29B4A 0%, #D9B468 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(194, 155, 74, 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, #C29B4A, #D9B468); z-index: 1000; transition: width 0.1s linear; pointer-events: none; box-shadow: 0 0 10px rgba(194,155,74,0.5); } /* ============================================================= CARRUSEL — Página de proyecto (galería completa) ============================================================= */ .carousel { position: relative; border-radius: var(--radius-lg, 16px); overflow: hidden; background: rgba(27,59,78,.40); 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: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(194,155,74,.30); background: rgba(15,39,52,.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--sand-soft); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1rem; transition: background .2s, border-color .2s, color .2s, transform .25s; z-index: 2; box-shadow: 0 4px 16px rgba(0,0,0,.30); } .carousel-btn:hover { background: var(--gold); border-color: var(--gold); color: #0F2734; transform: translateY(-50%) scale(1.08); box-shadow: 0 6px 20px rgba(194,155,74,.45); } html[data-theme="light"] .carousel-btn { background: rgba(255,255,255,.92); border-color: rgba(27,59,78,.18); color: var(--sea); box-shadow: 0 4px 16px rgba(27,59,78,.15); } html[data-theme="light"] .carousel-btn:hover { background: var(--sea); border-color: var(--sea); color: var(--sand-soft); box-shadow: 0 6px 20px rgba(27,59,78,.35); } .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(237,229,210,.45); cursor: pointer; padding: 0; transition: all .25s; } .carousel-dot:hover { background: rgba(237,229,210,.70); } .carousel-dot.active { background: var(--gold); width: 26px; border-radius: 5px; box-shadow: 0 0 12px rgba(194,155,74,.55); } html[data-theme="light"] .carousel-dot { background: rgba(27,59,78,.25); } html[data-theme="light"] .carousel-dot:hover { background: rgba(27,59,78,.50); } html[data-theme="light"] .carousel-dot.active { background: var(--gold-deep); } /* ============================================================= 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,#C29B4A,#D9B468)); border-color: transparent; color: #0F2734; } .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, #C29B4A); width: 20px; border-radius: 4px; } /* Touch: en móvil las flechas siempre visibles */ @media (hover: none) { .card-car-btn { opacity: 1; } }