/* ===================================================================== MAIN.CSS · Estilos principales del micrositio Template de Landing Pages para Eventos Especiales · Origin / Enrolit --------------------------------------------------------------------- ÍNDICE (usa Ctrl+F para saltar a una sección): 1. VARIABLES DE MARCA <-- AQUÍ SE CAMBIAN COLORES Y TIPOGRAFÍA 2. RESET Y BASE 3. TIPOGRAFÍA 4. UTILIDADES Y LAYOUT (contenedor, secciones, botones, badges) 5. HEADER / NAVEGACIÓN 6. HERO 7. CUENTA REGRESIVA (COUNTDOWN) 8. INFORMACIÓN DEL EVENTO (datos rápidos) 9. DISTANCIAS (5K / 10K / 15K) 10. CRONOGRAMA (TIMELINE) 11. BENEFICIOS 12. RUTA 13. UBICACIÓN / MAPA 14. INSCRIPCIONES (tarjetas VIP / Carrera) 15. FAQ (acordeón) 16. PATROCINADORES 17. CTA FINAL 18. FOOTER 19. EXTRAS (botón "subir", scroll indicator) CONSEJO PARA PRINCIPIANTES: - Los COLORES y la TIPOGRAFÍA se cambian SOLO en la sección 1 (VARIABLES). Cambia un valor ahí y se actualiza en toda la página. - Las medidas responsive (móvil/tablet) están en "responsive.css". - Las animaciones están en "animations.css". ===================================================================== */ /* ===================================================================== 1. VARIABLES DE MARCA ←★★★ CAMBIA AQUÍ COLORES Y FUENTES ★★★ --------------------------------------------------------------------- Todo el sitio usa estas variables. Para "re-marcar" el template para otro evento, normalmente solo necesitas cambiar valores de esta lista. ===================================================================== */ :root { /* ---- COLORES PRINCIPALES (marca del evento) ---------------------- */ --c-bg-deep: #25305C; /* ★ Fondo principal del sitio */ --c-bg: #25305C; /* Fondo general (igual al principal) */ --c-surface: #2f3c70; /* Tarjetas / superficies (algo más claras) */ --c-surface-2: #3a4884; /* Tarjetas elevadas / hover */ --c-primary: #e61e7b; /* Magenta principal (botones, acentos) */ --c-primary-2: #ff4da6; /* Rosa claro (degradados, brillos) */ --c-purple: #8a3ffb; /* Púrpura de apoyo */ --c-gold: #ffd56a; /* Dorado cálido (glow tipo "C" del hero) */ --c-gold-soft: #ffe9b0; /* Dorado suave */ /* ---- TEXTO ------------------------------------------------------- */ --c-text: #f5f4ff; /* Texto principal sobre fondo oscuro */ --c-text-muted: #b6b2e0; /* Texto secundario / descripciones */ --c-text-dim: #8783b8; /* Texto terciario / notas */ --c-on-accent: #ffffff; /* Texto sobre botones de color */ /* ---- BORDES Y LÍNEAS -------------------------------------------- */ --c-border: rgba(255, 255, 255, 0.10); --c-border-soft: rgba(255, 255, 255, 0.06); /* ---- DEGRADADOS (reutilizables) -------------------------------- */ --grad-primary: linear-gradient(135deg, #ff4da6 0%, #e61e7b 45%, #8a3ffb 100%); --grad-text: linear-gradient(100deg, #ff7cc0 0%, #ff4da6 40%, #c46bff 100%); --grad-gold: linear-gradient(120deg, #ffe9b0 0%, #ffd56a 55%, #ffb648 100%); --grad-surface: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01)); /* HERO (RESPALDO): si falta la imagen del hero, se ve este degradado de marca para que NUNCA aparezca un hueco vacío. */ --hero-fallback: radial-gradient(circle at 64% 42%, rgba(255, 213, 106, 0.30), transparent 42%), radial-gradient(circle at 30% 30%, rgba(255, 77, 166, 0.28), transparent 45%), radial-gradient(circle at 78% 80%, rgba(138, 63, 251, 0.30), transparent 50%), linear-gradient(150deg, #2c396f 0%, #25305C 60%, #202a52 100%); /* ---- TIPOGRAFÍA (las fuentes se cargan en el del HTML) -- */ --font-display: "Montserrat", "Segoe UI", system-ui, sans-serif; /* Títulos */ --font-body: "Montserrat", "Segoe UI", system-ui, sans-serif; /* Texto */ /* ---- ESCALA DE TAMAÑOS DE TEXTO (fluida: se adapta a la pantalla) */ --fs-hero: clamp(2.6rem, 6vw + 1rem, 6rem); /* Título del hero */ --fs-h2: clamp(2rem, 3.2vw + 1rem, 3.4rem); /* Títulos sección */ --fs-h3: clamp(1.25rem, 1vw + 0.9rem, 1.6rem);/* Subtítulos */ --fs-lead: clamp(1.05rem, 0.6vw + 0.9rem, 1.3rem); --fs-body: 1rem; --fs-small: 0.875rem; /* ---- ESPACIADO --------------------------------------------------- */ --space-section: clamp(4.5rem, 9vw, 9rem); /* Aire vertical entre secciones */ --container: 1200px; /* Ancho máximo del contenido */ --gutter: clamp(1.25rem, 4vw, 3rem); /* Margen lateral */ /* ---- BORDES REDONDEADOS ----------------------------------------- */ --radius-sm: 10px; --radius: 18px; --radius-lg: 28px; --radius-pill: 999px; /* ---- SOMBRAS ----------------------------------------------------- */ --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.20); --shadow: 0 18px 50px rgba(8, 6, 30, 0.45); --shadow-lg: 0 30px 80px rgba(8, 6, 30, 0.55); --shadow-glow: 0 14px 40px rgba(230, 30, 123, 0.35); /* ---- TRANSICIONES ------------------------------------------------ */ --t-fast: 0.18s ease; --t: 0.32s cubic-bezier(0.22, 0.61, 0.36, 1); --t-slow: 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); /* ---- ALTURA DEL HEADER (se usa para el scroll de anclas) -------- */ --header-h: 76px; } /* ===================================================================== 2. RESET Y BASE ===================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } /* El atributo hidden SIEMPRE oculta (aunque el elemento tenga display:flex). Se usa para "desactivar" secciones sin borrar su código (reutilizables). */ [hidden] { display: none !important; } html { scroll-behavior: smooth; /* Desplazamiento suave al hacer clic en el menú */ scroll-padding-top: var(--header-h); /* Que el header fijo no tape el título destino */ -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.65; color: var(--c-text); background-color: var(--c-bg-deep); /* Brillos sutiles de marca en el fondo de toda la página */ background-image: radial-gradient(circle at 12% 8%, rgba(138, 63, 251, 0.10), transparent 30%), radial-gradient(circle at 88% 22%, rgba(230, 30, 123, 0.10), transparent 32%); background-attachment: fixed; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, svg, iframe { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; } /* Foco visible y accesible para teclado (NO quitar: ayuda a accesibilidad) */ :focus-visible { outline: 3px solid var(--c-primary-2); outline-offset: 3px; border-radius: 4px; } /* Selección de texto con color de marca */ ::selection { background: var(--c-primary); color: #fff; } /* ===================================================================== 3. TIPOGRAFÍA ===================================================================== */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; color: var(--c-text); } p { color: var(--c-text-muted); } strong { color: var(--c-text); font-weight: 600; } /* Texto con degradado de marca (para palabras destacadas en títulos) */ .text-gradient { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .text-gold { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ===================================================================== 4. UTILIDADES Y LAYOUT ===================================================================== */ /* Contenedor central: limita el ancho y agrega márgenes laterales */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } /* Sección genérica: espaciado vertical estándar */ .section { position: relative; padding-block: var(--space-section); } /* Cabecera de sección (etiqueta + título + descripción) */ .section-head { max-width: 720px; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .section-head.is-center { margin-inline: auto; text-align: center; } /* Etiqueta pequeña tipo "píldora" arriba de los títulos */ .eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-primary-2); padding: 0.4rem 0.9rem; border: 1px solid var(--c-border); border-radius: var(--radius-pill); background: rgba(255, 77, 166, 0.06); margin-bottom: 1.1rem; } .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c-primary-2); box-shadow: 0 0 12px var(--c-primary-2); } .section-title { font-size: var(--fs-h2); margin-bottom: 1rem; } .section-desc { font-size: var(--fs-lead); color: var(--c-text-muted); max-width: 60ch; } .section-head.is-center .section-desc { margin-inline: auto; } /* ---- BOTONES ----------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 600; font-size: 1rem; line-height: 1; padding: 1rem 1.8rem; border-radius: var(--radius-pill); transition: transform var(--t), box-shadow var(--t), background var(--t), border-color var(--t); will-change: transform; } .btn:active { transform: translateY(1px) scale(0.99); } /* Botón primario (relleno de color) */ .btn-primary { color: var(--c-on-accent); background-image: var(--grad-primary); background-size: 160% 160%; background-position: 0% 50%; box-shadow: var(--shadow-glow); } .btn-primary:hover { transform: translateY(-3px); background-position: 100% 50%; box-shadow: 0 22px 50px rgba(230, 30, 123, 0.45); } /* Botón secundario (contorno / vidrio) */ .btn-ghost { color: var(--c-text); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--c-border); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .btn-ghost:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.25); } /* Botón dorado (acentos especiales tipo VIP) */ .btn-gold { color: #2a1c00; /* Degradado dorado del botón final: #FABE06 (250,190,6) → #FFF154 (255,241,84) */ background-image: linear-gradient(120deg, #FABE06 0%, #FFF154 100%); box-shadow: 0 14px 36px rgba(250, 190, 6, 0.30); } .btn-gold:hover { transform: translateY(-3px); box-shadow: 0 20px 46px rgba(255, 184, 72, 0.42); } .btn-lg { padding: 1.15rem 2.4rem; font-size: 1.08rem; } .btn-full { width: 100%; } /* Flecha que se mueve un poco en hover (microinteracción) */ .btn .arrow { transition: transform var(--t); } .btn:hover .arrow { transform: translateX(4px); } /* Tarjeta base reutilizable (efecto vidrio sutil / glassmorphism) */ .card { position: relative; background: var(--grad-surface), var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); overflow: hidden; } /* Línea/acento superior decorativo en tarjetas (opcional) */ .card-accent::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad-primary); opacity: 0.9; } /* ===================================================================== 5. HEADER / NAVEGACIÓN - Empieza transparente y al hacer scroll obtiene fondo + blur + sombra (la clase "is-scrolled" la agrega main.js). ===================================================================== */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h); display: flex; align-items: center; transition: background var(--t), box-shadow var(--t), border-color var(--t), height var(--t); border-bottom: 1px solid transparent; } .site-header.is-scrolled { background: rgba(19, 18, 52, 0.72); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); border-bottom-color: var(--c-border); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); } .header-inner { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } /* Logo / marca del evento en el header (texto editable o imagen) */ .brand { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.01em; color: var(--c-text); } .brand .brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--grad-primary); color: #fff; font-weight: 800; box-shadow: var(--shadow-glow); } .brand img { height: 40px; width: auto; } /* Navegación principal */ .nav { display: flex; align-items: center; gap: 0.35rem; } .nav a { position: relative; font-family: var(--font-display); font-weight: 500; font-size: 0.95rem; color: var(--c-text-muted); padding: 0.55rem 0.85rem; border-radius: var(--radius-pill); transition: color var(--t-fast), background var(--t-fast); } .nav a:hover { color: var(--c-text); background: rgba(255, 255, 255, 0.06); } /* El botón "Inscríbete" dentro del menú solo se muestra en móvil (en escritorio ya existe el botón del header). Ver responsive.css. */ .nav .nav-cta { display: none; } .header-cta { display: inline-flex; align-items: center; gap: 0.75rem; } /* Botón "hamburguesa" (solo visible en móvil; ver responsive.css) */ .nav-toggle { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--c-border); background: rgba(255, 255, 255, 0.04); } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; display: block; width: 20px; height: 2px; margin-inline: auto; background: var(--c-text); border-radius: 2px; transition: transform var(--t), opacity var(--t); } .nav-toggle span::before { transform: translateY(-6px); } .nav-toggle span::after { transform: translateY(4px); } /* Animación a "X" cuando el menú está abierto */ .nav-toggle.is-open span { background: transparent; } .nav-toggle.is-open span::before { transform: rotate(45deg); } .nav-toggle.is-open span::after { transform: rotate(-45deg) translateY(-4px); } /* ===================================================================== 6. HERO / BANNER PRINCIPAL - El banner es una IMAGEN completa (SIN texto encima). - Se muestra una imagen distinta en escritorio y en móvil (etiqueta