/* ══════════════════════════════════════════════════════════════════ FELIPEWORKS — HOJA DE ESTILOS Mobile-first: los estilos base son para mobile, se escala con min-width. Breakpoints usados en todo el archivo: 640px / 768px / 1024px. ══════════════════════════════════════════════════════════════════ */ /* ═══ SECCIÓN: VARIABLES GLOBALES ═══ ✏️ EDITAR: cambiá --accent acá para recolorear TODO el sitio sin tocar nada más. */ :root { /* --- Paleta de color --- */ --bg: #000000; /* Fondo general de la página */ --surface: #131316; /* Fondo de tarjetas, navbar, bloques elevados */ --border: #26262B; /* Bordes sutiles de 1px entre superficies */ --text: #EDEDED; /* Texto principal (alto contraste) */ --text-muted: #8A8A94; /* Texto secundario / descripciones */ --accent: #22D3EE; /* Único color de acento: links, botones, íconos, foco */ --accent-rgb: 34, 211, 238; /* Mismo acento en formato rgb() para usar con alpha */ /* --- Tipografía --- ✏️ EDITAR: si cambiás de fuente, actualizá también el de Google Fonts en index.html */ --font-base: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; /* --- Radios y bordes --- */ --radius-sm: 8px; --radius-md: 12px; /* --- Curva y duración estándar de transición --- ⚠️ NO TOCAR: se usa en todo el sitio para que las animaciones se sientan consistentes. */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 200ms; --dur-base: 300ms; --dur-slow: 400ms; /* --- Layout --- */ --container-w: 1180px; --edge-padding: 20px; /* padding lateral mínimo en mobile */ /* --- Espaciado vertical entre secciones (fluido, 100-140px en desktop) --- */ --section-py: clamp(64px, 11vw, 140px); } /* ═══ SECCIÓN: RESET Y BASE ═══ ⚠️ NO TOCAR: fundamentos de layout, no deberían necesitar cambios. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; /* Compensa el navbar sticky para que los anclajes no queden tapados */ scroll-padding-top: 76px; } body { background: var(--bg); color: var(--text); font-family: var(--font-base); font-weight: 400; line-height: 1.55; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Bloquea el scroll del body cuando el menú mobile o el lightbox están abiertos */ body.menu-open, body.lightbox-open { overflow: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } svg { flex-shrink: 0; } /* Respeta la preferencia de movimiento reducido del sistema operativo */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ═══ SECCIÓN: FONDO AMBIENTE GLOBAL ═══ Dos capas fijas detrás de TODO el contenido (van como primeros hijos de en index.html). No usan z-index a propósito: al ser los primeros elementos del DOM, el resto del sitio (navbar, secciones, tarjetas) pinta encima por orden natural. ⚠️ NO TOCAR el orden en el HTML. */ /* Capa 1: manchas de acento muy tenues que derivan lentamente en loop, para que el negro plano tenga vida sin distraer del contenido. */ .bg-ambient { position: fixed; inset: -10%; pointer-events: none; background: radial-gradient(circle at 22% 25%, rgba(var(--accent-rgb), 0.055), transparent 45%), radial-gradient(circle at 78% 72%, rgba(var(--accent-rgb), 0.04), transparent 50%); animation: bg-drift 24s ease-in-out infinite alternate; } @keyframes bg-drift { 0% { transform: translate(0, 0) rotate(0deg); } 100% { transform: translate(-3%, 4%) rotate(6deg); } } /* Capa 2: partículas finas y lentas + el rastro que deja el cursor al moverse (ambos dibujados en el mismo canvas por script.js). Pocas partículas a propósito, para que se sienta premium y no como una lluvia de puntitos. El rastro del cursor se dibuja como círculos con degradé radial (se funden con el fondo en los bordes) y su opacidad decae con cada frame hasta desaparecer del todo — no es una luz fija, sino una estela que se desvanece. */ .bg-particles { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; } /* Estado inicial/final de los elementos animados por IntersectionObserver (ver script.js) */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); } .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* Foco visible consistente en todo lo interactivo, navegable con teclado */ a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* ═══ SECCIÓN: UTILIDADES DE LAYOUT ═══ */ .container { width: 100%; max-width: var(--container-w); margin-inline: auto; padding-inline: var(--edge-padding); } section { padding-block: var(--section-py); overflow-x: hidden; } .section-head { max-width: 640px; margin-bottom: 48px; } .eyebrow { display: inline-block; color: var(--accent); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 12px; } .section-title { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 14px; } .section-sub { color: var(--text-muted); font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); max-width: 52ch; } /* ═══ SECCIÓN: BOTONES ═══ ⚠️ NO TOCAR la estructura de estados (hover/active/focus-visible): garantizan que cada botón se sienta táctil y accesible. Cambiá colores solo vía variables. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 26px; border-radius: var(--radius-sm); font-weight: 700; font-size: 0.95rem; letter-spacing: -0.01em; transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); white-space: nowrap; } .btn:active { transform: scale(0.98); } .btn-primary { background: var(--accent); color: var(--bg); } .btn-primary:hover { background: #67e2f5; } .btn-secondary { background: transparent; color: var(--text); border: 1px solid var(--border); } .btn-secondary:hover { border-color: var(--accent); color: var(--accent); } .btn-block { width: 100%; } /* ═══ SECCIÓN: NAVBAR ═══ */ .navbar { position: sticky; top: 0; z-index: 100; width: 100%; border-bottom: 1px solid transparent; background: rgba(9, 9, 11, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background-color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); } /* Fondo sólido + borde al scrollear (clase aplicada por script.js) */ .navbar.is-scrolled { background: rgba(9, 9, 11, 0.92); border-bottom-color: var(--border); } .navbar-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; } .logo { display: flex; align-items: center; gap: 0.5rem; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; } .logo-text span { color: var(--accent); } .logo-img { display: block; width: 32px; height: 32px; object-fit: contain; } .nav-links { display: none; align-items: center; gap: 32px; } .nav-links a:not(.btn) { font-size: 0.95rem; color: var(--text-muted); position: relative; padding: 4px 2px; transition: color var(--dur-fast) var(--ease); } .nav-links a:not(.btn)::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform var(--dur-base) var(--ease); } .nav-links a:not(.btn):hover { color: var(--text); } .nav-links a:not(.btn):hover::after { transform: scaleX(1); transform-origin: left; } /* Botón hamburguesa (solo visible en mobile) */ .hamburger { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; border-radius: var(--radius-sm); z-index: 110; transition: background-color var(--dur-fast) var(--ease); } .hamburger:hover { background: var(--surface); } .hamburger span { width: 20px; height: 2px; background: var(--text); border-radius: 2px; transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease); } .hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Panel de navegación mobile (drawer a pantalla completa) */ .mobile-menu { position: fixed; inset: 0; z-index: 105; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), visibility 0s linear var(--dur-base); } .mobile-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), visibility 0s linear 0s; } .mobile-menu a:not(.btn) { font-size: 1.4rem; font-weight: 700; color: var(--text); } .mobile-menu a:not(.btn):hover { color: var(--accent); } @media (min-width: 768px) { .nav-links { display: flex; } .hamburger { display: none; } .mobile-menu { display: none; } } /* ═══ SECCIÓN: HERO ═══ */ .hero { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: calc(100dvh - 72px); padding-block: 64px; } .hero-title { font-size: clamp(2.25rem, 1.6rem + 4.2vw, 4.25rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; max-width: 16ch; margin-bottom: 20px; } .hero-title .accent { color: var(--accent); } .hero-sub { color: var(--text-muted); font-size: clamp(1rem, 0.92rem + 0.4vw, 1.25rem); max-width: 56ch; margin-bottom: 36px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 40px; width: 100%; } .hero-actions .btn { flex: 1 1 auto; } @media (min-width: 640px) { .hero-actions .btn { flex: 0 1 auto; } } .hero-credibility { display: flex; flex-wrap: wrap; gap: 8px 14px; color: var(--text-muted); font-size: 0.85rem; } .hero-credibility span:not(:last-child)::after { content: "·"; margin-left: 14px; color: var(--border); } /* --- Hero: layout de dos columnas (texto izquierda, mockup derecha) --- Mobile: una sola columna (texto arriba, imagen debajo). */ .hero-grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; width: 100%; } @media (min-width: 768px) { .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 40px; } } /* Columna visual del hero */ .hero-visual { position: relative; z-index: 1; /* ⚠️ NO TOCAR: mantiene la imagen POR ENCIMA del rastro del cursor (canvas de fondo). No bajar de 1. */ width: 100%; max-width: 420px; /* en mobile la imagen va más chica... */ margin-inline: auto; /* ...y centrada */ } @media (min-width: 768px) { .hero-visual { max-width: none; margin-inline: 0; } } /* Glow radial cian detrás del frame, para integrarlo con la página */ .hero-glow { position: absolute; inset: -12% -8%; z-index: -1; /* detrás del frame (dentro de .hero-visual, que ya está sobre el rastro) */ background: radial-gradient(circle at 50% 45%, rgba(var(--accent-rgb), 0.2), transparent 62%); filter: blur(24px); pointer-events: none; } /* Frame de navegador hecho en CSS (barra + tres puntitos + URL). Es un