/* ============================================================ IPSOFACTS — Capa de experiencia inmersiva Animaciones al scroll, contadores, parallax, cuadrícula de plataformas. Paleta de marca (navy #071A35 / azul #1E7BFF). Solo se activan cuando tiene la clase .ifx-ready (se añade por JS): sin JS, todo el contenido queda visible. ============================================================ */ :root { --ifx-navy: #071A35; --ifx-blue: #1E7BFF; --ifx-blue-2: #2f6bff; --ifx-ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* ---- Barra de progreso de scroll ---- */ .ifx-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--ifx-blue), #6fa3ff); z-index: 999; pointer-events: none; box-shadow: 0 0 10px rgba(30,123,255,0.6); transition: width 0.1s linear; } /* ---- Estados de revelado (solo con JS activo) ---- */ .ifx-ready .ifx { opacity: 0; transform: translateY(42px); transition: opacity 0.7s var(--ifx-ease), transform 0.7s var(--ifx-ease); will-change: opacity, transform; } .ifx-ready .ifx.ifx-left { transform: translateX(-52px); } .ifx-ready .ifx.ifx-right { transform: translateX(52px); } .ifx-ready .ifx.ifx-scale { transform: scale(0.9); } .ifx-ready .ifx.ifx-blur { filter: blur(8px); } .ifx-ready .ifx.ifx-in { opacity: 1; transform: none; filter: none; } /* ---- Acento subrayado que se "dibuja" en títulos ---- */ .ifx-ready .ifx-underline .accent { position: relative; } .ifx-ready .ifx-underline .accent::after { content: ""; position: absolute; left: 0; bottom: -4px; height: 3px; width: 0; background: var(--ifx-blue); border-radius: 3px; transition: width 0.8s var(--ifx-ease) 0.3s; } .ifx-ready .ifx-underline.ifx-in .accent::after { width: 100%; } @media (prefers-reduced-motion: reduce) { .ifx-ready .ifx { opacity: 1 !important; transform: none !important; filter: none !important; transition: none; } .ifx-progress { display: none; } } /* ============================================================ Cuadrícula de plataformas gestionadas ============================================================ */ .plat-section { position: relative; background: radial-gradient(1200px 500px at 80% 0%, rgba(30,123,255,0.14), transparent 60%), linear-gradient(180deg, #071A35 0%, #0a1f3f 100%); color: #fff; overflow: hidden; } .plat-grid-wrap { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; } @media (min-width: 900px) { .plat-grid-wrap { grid-template-columns: 1.05fr 1fr; gap: 64px; } } .plat-copy .eyebrow { color: #7fb0ff; letter-spacing: 0.14em; } .plat-copy h2 { color: #fff; margin: 10px 0 18px; } .plat-copy h2 .accent { color: var(--ifx-blue); } .plat-copy p { color: rgba(255,255,255,0.78); max-width: 46ch; } .plat-copy .btn-primary { margin-top: 26px; } .plat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 480px) { .plat-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } } .plat-tile { aspect-ratio: 1 / 1; background: #fff; border-radius: 20px; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,0.28); transition: transform 0.25s var(--ifx-ease), box-shadow 0.25s var(--ifx-ease); position: relative; overflow: hidden; } .plat-tile::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(30,123,255,0.18), transparent 70%); opacity: 0; transition: opacity 0.25s ease; } .plat-tile:hover { transform: translateY(-6px) scale(1.04); box-shadow: 0 18px 44px rgba(30,123,255,0.35); } .plat-tile:hover::before { opacity: 1; } .plat-tile img { width: 46%; height: 46%; object-fit: contain; position: relative; z-index: 1; } .plat-tile .plat-fallback { font-family: var(--font-heading, Arial, sans-serif); font-weight: 800; font-size: 22px; color: var(--ifx-navy); position: relative; z-index: 1; }