/* Elevio — solo lo que no puede ser inline: fuentes, idioma, keyframes y los pocos ajustes responsive que necesitan media queries. */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&family=Inter:wght@300;400;500;600;700;800&family=Oswald:wght@400;500;600&family=Cormorant+Garamond:wght@500;600&display=swap'); /* Paleta Elevio 2.0 — cuerpo claro, bloques oscuros, acento índigo eléctrico. Sobrescribe los tokens del sistema para todo el sitio. */ :root { --color-bg: #14163a; --color-text: #f2f1ff; --color-accent: #5b7bff; --color-accent-100: #e4e8ff; --color-accent-200: #b9c4ff; --color-accent-300: #a9b6ff; --color-accent-400: #8f9dff; --color-accent-500: #3d5bff; --color-accent-800: #232758; --color-accent-900: #1a1d44; --color-neutral-100: #f2f1ff; --color-neutral-800: #232758; --elevio-violet: #7c3aed; --elevio-cyan: #7fd9d6; --elevio-amber: #f0c988; --elevio-coral: #ff8f8f; --elevio-ink-dark: #0e1030; /* tokens derivados del sistema: tema oscuro índigo */ --color-surface: #1e2150; --color-divider: rgba(255,255,255,.18); --shadow-sm: 0 0 0 1px rgba(255,255,255,.10); --shadow-md: 0 0 0 1px rgba(255,255,255,.10), 0 8px 22px rgba(0,0,0,.4); --shadow-lg: 0 0 0 1px rgba(255,255,255,.12), 0 18px 44px rgba(0,0,0,.5); } html { scroll-behavior: smooth; } body { -webkit-font-smoothing: antialiased; overflow-x: hidden; } * { box-sizing: border-box; } /* Idioma — el atributo en decide qué copia se ve. */ html[data-lang='es'] [data-l='en'] { display: none !important; } html[data-lang='en'] [data-l='es'] { display: none !important; } /* Cursor propio: escondemos el del sistema sobre el fondo, no sobre texto. */ @media (hover: hover) { body { cursor: none; } a, button, summary, [data-cursor-grow] { cursor: none; } input, textarea, select { cursor: text; } } /* Menú móvil */ html[data-menu='open'] [data-mobile-nav] { display: flex !important; } html[data-menu='open'] { overflow: hidden; } @media (min-width: 921px) { [data-menu-toggle] { display: none !important; } [data-mobile-nav] { display: none !important; } } @media (max-width: 920px) { [data-desktop-nav] { display: none !important; } } @media (max-width: 1080px) { [data-topbar] { display: none !important; } } /* Idioma seleccionado */ [data-lang-btn] { transition: opacity .2s ease, background .2s ease, color .2s ease; } [data-lang-btn][aria-pressed='true'] { opacity: 1 !important; color: #ffffff !important; background: #3d5bff !important; box-shadow: 0 4px 14px rgba(61, 91, 255, .35); font-weight: 600; } [data-lang-btn][aria-pressed='false'] { opacity: .55 !important; } [data-lang-btn][aria-pressed='false']:hover { opacity: 1 !important; } /* Página activa en la navegación */ [data-desktop-nav] a[aria-current='page'] { opacity: 1 !important; color: var(--color-accent-200) !important; border-bottom-color: var(--color-accent) !important; } [data-mobile-nav] a[aria-current='page'] { color: var(--color-accent-200) !important; } [data-mobile-nav] a[aria-current='page']::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 9px; border-radius: 50%; background: var(--color-accent); vertical-align: middle; } footer a[aria-current='page'] { color: #a9b6ff !important; } /* Enlaces por defecto */ a { color: var(--color-accent-200); } a:hover { color: var(--color-accent); } @keyframes elevio-logo-spin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } @media (prefers-reduced-motion: reduce) { [data-nav] img[alt="Elevio Marketing LLC"] { animation: none; } } /* Brillo animado sobre las letras de los títulos principales */ [data-shine] { background-image: linear-gradient(105deg, var(--color-text) 0%, var(--color-text) 34%, #3d5bff 48%, #7c3aed 56%, var(--color-text) 70%, var(--color-text) 100%); background-size: 240% 100%; background-clip: text; -webkit-background-clip: text; color: transparent; animation: elevio-shine 7s linear infinite; } @keyframes elevio-shine { 0% { background-position: 220% 0; } 100% { background-position: -220% 0; } } @media (prefers-reduced-motion: reduce) { [data-shine] { animation: none; background: none; color: var(--color-text); } } /* Marquee del portafolio */ @keyframes elevio-marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } } [data-marquee-track] { animation: elevio-marquee 64s linear infinite; } [data-marquee]:hover [data-marquee-track] { animation-play-state: paused; } [data-marquee-track][data-speed='slow'] { animation-duration: 96s; } [data-marquee-track][data-speed='fast'] { animation-duration: 42s; } /* Contenedor deslizable + flechas manuales */ [data-marquee-scroll] { scrollbar-width: none; -ms-overflow-style: none; } [data-marquee-scroll]::-webkit-scrollbar { display: none; } [data-marquee-arrow] { opacity: 0; transition: opacity .25s ease, background .2s ease, box-shadow .2s ease; cursor: pointer; } [data-marquee]:hover [data-marquee-arrow], [data-marquee-arrow]:focus-visible { opacity: 1; } @media (hover: none) { [data-marquee-arrow] { opacity: 1; } } @media (prefers-reduced-motion: reduce) { [data-marquee-track] { animation: none; } } /* Aura del hero */ @keyframes elevio-drift { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(2%,-3%,0) scale(1.08); } 100% { transform: translate3d(0,0,0) scale(1); } } [data-aura] { animation: elevio-drift 22s ease-in-out infinite; will-change: transform; } @media (prefers-reduced-motion: reduce) { [data-aura] { animation: none; } } /* Vistas previas del portafolio: "así se vería tu sitio" */ [data-preview-hint] { opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; } [data-preview-card]:hover [data-preview-hint], [data-preview-card]:focus-within [data-preview-hint] { opacity: 1; transform: translateY(0); } @media (hover: none) { [data-preview-hint] { opacity: 1; transform: none; } } /* FAQ nativo */ details[data-faq] summary::-webkit-details-marker { display: none; } details[data-faq] summary { list-style: none; } details[data-faq][open] [data-faq-plus] { transform: rotate(45deg); } /* Responsive: dos columnas → una */ @media (max-width: 900px) { [data-split] { grid-template-columns: 1fr !important; } [data-hero-grid] { grid-template-columns: 1fr !important; } [data-hide-sm] { display: none !important; } } @media (max-width: 720px) { [data-table-scroll] { overflow-x: auto; } }