/* ═══════════════════════════════════════════════════════════════ GONLINE.CSS — Archivo de personalización rápida Modifica este archivo para cambiar colores, tipografía, espaciados y textos clave SIN tocar el HTML principal. ═══════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────── 1. PALETA DE COLORES Cambia los valores aquí para modificar toda la página. ───────────────────────────────────────────────────────────── */ :root { /* Fondos (oscuros) */ --color-paper: oklch(13% 0.012 55); /* Negro principal */ --color-paper-2: oklch(17% 0.014 57); /* Superficie elevada */ --color-paper-3: oklch(22% 0.014 58); /* Tarjetas */ --color-rule: oklch(28% 0.010 55); /* Bordes / divisores */ /* Texto */ --color-ink: oklch(92% 0.006 80); /* Texto principal */ --color-neutral: oklch(70% 0.007 55); /* Texto secundario */ --color-muted: oklch(52% 0.008 55); /* Texto atenuado */ /* Acento dorado — identidad GOnline */ --color-accent: oklch(72% 0.14 85); /* Dorado principal */ --color-accent-hi: oklch(78% 0.15 88); /* Dorado hover */ --color-accent-lo: oklch(62% 0.11 82); /* Dorado suave */ /* Secundario verde tech */ --color-green: oklch(65% 0.14 165); --color-green-lo: oklch(55% 0.12 165); /* Secundario azul tech */ --color-blue: oklch(62% 0.18 265); --color-blue-lo: oklch(52% 0.15 265); } /* ───────────────────────────────────────────────────────────── 2. TIPOGRAFÍA Cambia las fuentes aquí. Asegúrate de que estén importadas en el del HTML si usas Google Fonts. ───────────────────────────────────────────────────────────── */ :root { --font-display: "Geist", ui-sans-serif, system-ui, sans-serif; --font-body: "Switzer", "Geist", ui-sans-serif, system-ui, sans-serif; } /* ───────────────────────────────────────────────────────────── 3. TAMAÑOS DE FUENTE ───────────────────────────────────────────────────────────── */ :root { --text-xs: 0.65rem; --text-sm: 0.78rem; --text-base: 0.94rem; --text-md: 1rem; --text-lg: 1.15rem; --text-xl: 1.4rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --text-4xl: 3rem; --text-display: clamp(2.4rem, 4vw + 1rem, 4.2rem); --text-display-s:clamp(1.8rem, 2.5vw + 0.5rem, 2.8rem); } /* ───────────────────────────────────────────────────────────── 4. ESPACIADO (escala de 4pt) ───────────────────────────────────────────────────────────── */ :root { --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 36px; --space-2xl: 52px; --space-3xl: 72px; --space-4xl: 96px; } /* ───────────────────────────────────────────────────────────── 5. RADIOS DE BORDE ───────────────────────────────────────────────────────────── */ :root { --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 100px; } /* ───────────────────────────────────────────────────────────── 6. MOVIMIENTO / ANIMACIONES ───────────────────────────────────────────────────────────── */ :root { --dur-sm: 150ms; --dur-md: 250ms; --dur-lg: 400ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); } /* ───────────────────────────────────────────────────────────── 7. LOGO — TAMAÑO Ajusta el tamaño del logo en el nav y en el footer. ───────────────────────────────────────────────────────────── */ .nav-logo img { height: 56px; /* ← Cambia este valor para agrandar/achicar */ } /* ───────────────────────────────────────────────────────────── 8. BOTÓN PRINCIPAL (CTA dorado) ───────────────────────────────────────────────────────────── */ .btn-primary { background: var(--color-accent); color: oklch(14% 0.01 55); } .btn-primary:hover { background: var(--color-accent-hi); } /* ───────────────────────────────────────────────────────────── 9. BOTÓN WHATSAPP Para cambiar el color del botón de WhatsApp. ───────────────────────────────────────────────────────────── */ .btn-wa { background: linear-gradient(135deg, #25d366, #128c7e); } /* ───────────────────────────────────────────────────────────── 10. NAV — FONDO Y ALTURA ───────────────────────────────────────────────────────────── */ .nav { height: 64px; /* ← Altura del navbar */ background: oklch(13% 0.012 55 / 0.88); } /* ───────────────────────────────────────────────────────────── 11. HERO — AJUSTES VISUALES ───────────────────────────────────────────────────────────── */ .hero-h1 { /* Modifica el tamaño del título principal */ font-size: var(--text-display); } /* ───────────────────────────────────────────────────────────── 12. TARJETAS DE SERVICIO — HOVER COLOR Cambia el color de borde en hover de las tarjetas. ───────────────────────────────────────────────────────────── */ .svc-card:hover, .svc-plain:hover { border-color: oklch(45% 0.06 85 / 0.4); } /* ───────────────────────────────────────────────────────────── 13. FOOTER — STATEMENT PRINCIPAL ───────────────────────────────────────────────────────────── */ .footer-statement span { color: var(--color-accent); /* Color del texto destacado en footer */ } /* ───────────────────────────────────────────────────────────── 14. NÚMERO DE WHATSAPP — Para cambiar en un solo lugar (Nota: el número también debe cambiarse en los href del HTML) ───────────────────────────────────────────────────────────── */ /* Número actual: +52 612 129 8006 Para actualizar: buscar y reemplazar "526121298006" en el HTML. */ /* ───────────────────────────────────────────────────────────── 15. OVERRIDES PERSONALIZADOS Agrega aquí tus propios estilos adicionales. ───────────────────────────────────────────────────────────── */ /* Ejemplo: cambiar el color del label de sección */ /* .section-tag { color: var(--color-green); } */ /* Ejemplo: aumentar el espaciado entre secciones */ /* .section { padding: 120px 0; } */ /* ───────────────────────────────────────────────────────────── 16. MENÚ MÓVIL — Hamburguesa El menú se activa con la clase .open en el botón y en la lista. Ajusta colores y transición aquí. ───────────────────────────────────────────────────────────── */ /* Fondo del menú móvil overlay */ /* @media (max-width: 768px) { .nav-links { background: oklch(11% 0.012 55 / 0.99); } } */ /* Velocidad de la animación del overlay */ /* .nav-links { transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; } */