/* ============================================= ENHANCE.CSS — Dirección de arte premium AZ Consultoría · estilo agencia NY / Apple Tipografía: Satoshi (Fontshare) Se suma a style.css sin reescribirlo. ============================================= */ /* ---------- 0) BASE / RENDER PREMIUM ---------- */ html { scroll-behavior: smooth; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; letter-spacing: -0.011em; } /* Clase 'js' la añade un script inline en para evitar FOUC */ .js [data-hero] { opacity: 0; transform: translateY(26px); will-change: transform, opacity; } /* ---------- 1) JERARQUÍA TIPOGRÁFICA ---------- */ h1, h2, h3, h4, h5 { font-family: 'Satoshi', sans-serif; letter-spacing: -0.025em; } h1 { font-weight: 700; letter-spacing: -0.035em; } h2 { font-weight: 700; letter-spacing: -0.03em; } h3 { font-weight: 600; } .section-title { font-size: clamp(30px, 3.6vw, 46px) !important; font-weight: 700 !important; letter-spacing: -0.03em; line-height: 1.08 !important; } .section-desc { font-size: 18px !important; line-height: 1.65 !important; color: #54607A !important; /* +contraste vs gris original */ letter-spacing: -0.011em; } /* Eyebrow / label más sobrio, tipo agencia */ .label { font-weight: 600 !important; letter-spacing: 1.6px !important; font-size: 11px !important; border-radius: 100px; } /* Número de sección decorativo */ .section-num { font-family: 'Satoshi', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.5px; color: rgba(11,43,92,0.45); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 10px; } .section-num::before { content: ''; width: 26px; height: 1px; background: rgba(11,43,92,0.30); } /* ---------- 2) RITMO VERTICAL CONSISTENTE ---------- */ .section-pad { padding: 120px 0 !important; } /* ---------- 3) HERO ---------- */ .hero { isolation: isolate; padding: 150px 0 120px !important; background: radial-gradient(ellipse 70% 55% at 72% -8%, rgba(46,181,232,0.24), transparent 60%), radial-gradient(ellipse 55% 50% at -5% 115%, rgba(245,131,31,0.13), transparent 55%), linear-gradient(158deg, #09203F 0%, #0B2B5C 46%, #0E3468 100%) !important; } /* Desactivamos los blobs radiales originales del ::before/::after de style.css: ahora el degradado vive en el background directo. Mantenemos uno sutil para parallax. */ .hero::before { width: 720px !important; height: 720px !important; top: -200px !important; right: -160px !important; background: radial-gradient(circle, rgba(46,181,232,0.20) 0%, transparent 62%) !important; will-change: transform; } .hero::after { width: 480px !important; height: 480px !important; bottom: -160px !important; left: -120px !important; background: radial-gradient(circle, rgba(245,131,31,0.12) 0%, transparent 62%) !important; will-change: transform; } /* Patrón geométrico sutil */ .hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse 85% 75% at 50% 35%, black 25%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 35%, black 25%, transparent 80%); pointer-events: none; z-index: 0; } .hero-cursor-glow { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(46,181,232,0.16), transparent 62%); } /* Eyebrow del hero */ .hero-label { font-family: 'Satoshi', sans-serif !important; font-weight: 600 !important; font-size: 12px !important; letter-spacing: 1.8px !important; color: #7FD3F2 !important; } /* Headline display */ .hero h1 { font-family: 'Satoshi', sans-serif !important; font-size: clamp(38px, 4.8vw, 66px) !important; font-weight: 700 !important; letter-spacing: -0.04em !important; line-height: 1.04 !important; color: #fff !important; margin-bottom: 22px !important; text-wrap: balance; } .hero h1 .highlight { display: inline !important; background: linear-gradient(96deg, #2EB5E8 0%, #7FD3F2 55%, #2EB5E8 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; animation: shineMove 7s linear infinite; } @keyframes shineMove { 0% { background-position: 0% 50%; } 100% { background-position: 220% 50%; } } /* Subheadline 1 línea, mayor contraste */ .hero-sub { font-size: 19px !important; line-height: 1.55 !important; color: rgba(255,255,255,0.80) !important; max-width: 520px !important; margin-bottom: 34px !important; letter-spacing: -0.011em; } .hero-btns { gap: 14px !important; margin-bottom: 44px !important; } /* Stats con más aire y contraste */ .hero-stats { gap: 40px !important; padding-top: 32px !important; } .hero-stat .num { font-family: 'Satoshi', sans-serif !important; font-size: 40px !important; font-weight: 700 !important; letter-spacing: -0.03em; color: #fff !important; } .hero-stat .num span { color: #fff; } .hero-stat .num span[data-count] { color: #fff; } .hero-stat p { font-size: 12.5px !important; color: rgba(255,255,255,0.62) !important; margin-top: 4px !important; letter-spacing: 0.2px; } /* ---------- 4) BOTONES (premium + micro-interacción) ---------- */ .btn { font-family: 'Satoshi', sans-serif !important; font-weight: 600 !important; font-size: 15px !important; letter-spacing: -0.01em; border-radius: 12px !important; padding: 15px 30px !important; will-change: transform; } .btn-primary { background: var(--naranja) !important; box-shadow: 0 8px 28px -8px rgba(245,131,31,0.55) !important; position: relative; overflow: hidden; } .btn-primary::after { content: ''; position: absolute; top: 0; left: -120%; width: 55%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,0.5), transparent); transform: skewX(-20deg); transition: left 0.7s ease; } .btn-primary:hover::after { left: 140%; } .btn-ghost { background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.22) !important; backdrop-filter: blur(6px); color: #fff !important; } /* ---------- 5) HERO VISUAL CARD ---------- */ .hero-visual { perspective: 1400px; will-change: transform; } .hero-card { background: linear-gradient(135deg, rgba(255,255,255,0.11) 0%, rgba(255,255,255,0.04) 100%) !important; backdrop-filter: blur(20px) saturate(1.2) !important; -webkit-backdrop-filter: blur(20px) saturate(1.2) !important; border: 1px solid rgba(255,255,255,0.16) !important; border-radius: 22px !important; box-shadow: 0 36px 90px -34px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.16) inset !important; transition: transform 0.4s cubic-bezier(.2,.7,.2,1); } .hero-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(560px circle at var(--cmx,50%) var(--cmy,50%), rgba(46,181,232,0.16), transparent 60%); pointer-events: none; opacity: 0; transition: opacity 0.3s; } .hero-card:hover::before { opacity: 1; } .hero-card-title { font-family: 'Satoshi', sans-serif !important; } .service-pill { position: relative; overflow: hidden; border-radius: 14px !important; } .service-pill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(46,181,232,0.10) 50%, transparent 70%); transform: translateX(-100%); transition: transform 0.7s ease; pointer-events: none; } .service-pill:hover::after { transform: translateX(100%); } .service-pill .pill-info h4 { font-family: 'Satoshi', sans-serif !important; } .hero-badge { font-family: 'Satoshi', sans-serif !important; animation: badgeFloat 4.5s ease-in-out infinite; } @keyframes badgeFloat { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } } /* Hint de scroll */ .hero-scroll-hint { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: 'Satoshi', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,0.40); z-index: 2; pointer-events: none; } .hero-scroll-hint::after { content: ''; width: 1px; height: 38px; background: linear-gradient(to bottom, rgba(46,181,232,0.8), transparent); animation: scrollLine 2.2s ease-in-out infinite; } @keyframes scrollLine { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } /* ---------- 6) MARQUEE ---------- */ .marquee { background: #09203F; border-top: 1px solid rgba(255,255,255,0.07); border-bottom: 1px solid rgba(255,255,255,0.07); overflow: hidden; padding: 20px 0; position: relative; } .marquee::before, .marquee::after { content: ''; position: absolute; top: 0; bottom: 0; width: 140px; z-index: 2; pointer-events: none; } .marquee::before { left: 0; background: linear-gradient(90deg, #09203F, transparent); } .marquee::after { right: 0; background: linear-gradient(-90deg, #09203F, transparent); } .marquee-track { display: flex; gap: 52px; width: max-content; animation: marqueeMove 40s linear infinite; } .marquee-track span { font-family: 'Satoshi', sans-serif; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; color: rgba(255,255,255,0.52); display: inline-flex; align-items: center; gap: 52px; white-space: nowrap; } .marquee-track span::after { content: ''; width: 7px; height: 7px; background: var(--cyan); border-radius: 50%; display: inline-block; } .marquee:hover .marquee-track { animation-play-state: paused; } @keyframes marqueeMove { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ---------- 7) SERVICIOS: tilt 3D ---------- */ .servicio-card { transform-style: preserve-3d; will-change: transform; border-radius: 18px !important; } .servicio-card h3 { font-family: 'Satoshi', sans-serif; font-weight: 700; } .servicio-card .card-icon { transition: transform 0.5s cubic-bezier(.2,.7,.2,1); } .servicio-card:hover .card-icon { transform: translateZ(40px) scale(1.06) rotate(-4deg); } .servicio-card h3, .servicio-card p, .servicio-card .card-link { transition: transform 0.5s cubic-bezier(.2,.7,.2,1); } .servicio-card:hover h3 { transform: translateZ(22px); } .servicio-card:hover p { transform: translateZ(12px); } .servicio-card:hover .card-link { transform: translateZ(22px); } .servicio-card::before { height: 4px !important; } /* ---------- 8) REVEAL (Motion inView añade .is-visible) ---------- */ .reveal { opacity: 0; transform: translateY(40px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); will-change: transform,opacity; } .reveal-x-l { opacity: 0; transform: translateX(-48px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); } .reveal-x-r { opacity: 0; transform: translateX(48px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); } .reveal.is-visible, .reveal-x-l.is-visible, .reveal-x-r.is-visible { opacity: 1; transform: none; } /* Subrayado animado del título */ .section-title { position: relative; display: block; } .section-title::after { content: ''; position: absolute; left: 0; bottom: -10px; height: 3px; width: 0; background: linear-gradient(90deg, var(--naranja), var(--cyan)); border-radius: 2px; transition: width 1.1s cubic-bezier(.2,.7,.2,1) .2s; } .text-center .section-title::after { left: 50%; transform: translateX(-50%); } .section-title.is-visible::after { width: 60px; } /* ---------- 9) POR QUÉ / EQUIPO / CONTACTO ---------- */ [data-parallax] { will-change: transform; } .por-que-visual { position: relative; transform: translateZ(0); border-radius: 22px !important; } .por-que-visual::after { content: ''; position: absolute; inset: -1px; border-radius: 23px; background: linear-gradient(135deg, rgba(46,181,232,0.45), transparent 42%, rgba(245,131,31,0.38)); z-index: -1; opacity: 0.45; filter: blur(14px); } .metric-box { transition: transform .4s ease, background .3s; } .metric-box:hover { transform: translateY(-3px); background: rgba(255,255,255,0.14) !important; } .metric-box .val { font-family: 'Satoshi', sans-serif; font-weight: 700; } .team-card { position: relative; overflow: hidden; border-radius: 18px !important; } .team-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(46,181,232,0.10), transparent 60%); opacity: 0; transition: opacity 0.4s; pointer-events: none; } .team-card:hover::before { opacity: 1; } .team-card h4 { font-family: 'Satoshi', sans-serif; font-weight: 700; } .team-avatar { font-family: 'Satoshi', sans-serif !important; transition: transform 0.45s cubic-bezier(.2,.7,.2,1), box-shadow 0.45s cubic-bezier(.2,.7,.2,1); } .team-card:hover .team-avatar { transform: scale(1.06) translateY(-4px); box-shadow: 0 18px 40px -14px rgba(11,43,92,0.5), 0 0 0 4px rgba(46,181,232,0.28); } /* Slots de imagen (equipo + logo): estilos base */ image-slot.team-avatar { display: block; margin: 0 auto 16px; border-radius: 50%; overflow: hidden; box-shadow: 0 6px 20px -8px rgba(11,43,92,0.4); } .logo image-slot { display: block; } .footer-brand .logo { display: inline-flex; } .contacto-form-card { position: relative; overflow: hidden; border-radius: 22px !important; } .contacto-form-card::before { content: ''; position: absolute; top: -1px; left: -1px; right: -1px; height: 4px; background: linear-gradient(90deg, var(--naranja), var(--cyan), var(--naranja)); background-size: 200% 100%; animation: shineMove 5s linear infinite; } /* ---------- 10) WHATSAPP / PROGRESS / FOOTER ---------- */ .wa-float::before, .wa-float::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25D366; animation: waPulse 2.4s ease-out infinite; opacity: 0; } .wa-float::after { animation-delay: 1.2s; } @keyframes waPulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.8); opacity: 0; } } .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--cyan), var(--naranja)); z-index: 1000; transition: width 0.05s linear; box-shadow: 0 0 10px rgba(46,181,232,0.5); } footer { position: relative; } .logo-text, .footer-col h4 { font-family: 'Satoshi', sans-serif !important; } [data-count] { display: inline-block; min-width: 1ch; } /* ---------- 11) NAV polish ---------- */ .nav-links a { font-family: 'Satoshi', sans-serif !important; font-weight: 500; } .nav-links a.active { font-weight: 700 !important; } /* ---------- 12) REDUCED MOTION ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; } .marquee-track { animation: none !important; } .hero-cursor-glow { display: none; } .js [data-hero] { opacity: 1 !important; transform: none !important; } } /* ---------- 13) RESPONSIVE ---------- */ @media (max-width: 1024px) { .section-pad { padding: 92px 0 !important; } } @media (max-width: 980px) { .hero-inner { grid-template-columns: 1fr !important; } .hero-visual { display: none !important; } } @media (max-width: 768px) { .hero { padding: 96px 0 72px !important; } .hero h1 { font-size: clamp(34px, 9vw, 50px) !important; } .hero-scroll-hint { display: none; } .section-pad { padding: 72px 0 !important; } .marquee-track span { font-size: 17px; gap: 34px; } .marquee-track span::after { gap: 34px; } }