/* Utilidades específicas para la landing de retos. Los estilos principales viven inline en el de cada index_*.html, siguiendo el patrón usado en catalogo-2026. */ /* Tarjeta de paso del proceso — imagen con ratio y hover sutil */ .step-img-wrap { position: relative; overflow: hidden; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); aspect-ratio: 16 / 10; margin-top: 1.2rem; } .step-img-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.6s ease; } .fmt-card:hover .step-img-wrap img { transform: scale(1.04); } /* Marco visual del hero (reemplaza el mosaico del catálogo) */ .hero-visual { position: relative; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); } .hero-visual img { width: 100%; height: auto; display: block; transition: transform 0.7s ease; } .hero-visual:hover img { transform: scale(1.03); } .hero-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(3, 6, 22, 0.55) 100%); pointer-events: none; } /* Pulso muy sutil para los glows del hero */ @keyframes pulseGlow { 0%, 100% { opacity: 0.9; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } } .hero-glow-l, .hero-glow-r { animation: pulseGlow 9s ease-in-out infinite; } .hero-glow-r { animation-delay: -4.5s; }