/* ========================================================================== Overrides del sitio público sobre el tema base (main.css / responsive.css). Se cargan aparte (en vez de tocar los archivos del tema) para no perder los cambios si el tema se actualiza — mismo criterio que admin/css/custom.css. ========================================================================== */ /* -------------------------------------------------------------------------- Home — Hero con degradado en movimiento Antes: un naranja plano y estático (#ff6310 → #e59729). Ahora recorre el color de cada una de nuestras APIs (azul DNI/RUC, violeta Facturación, verde WhatsApp, dorado Tipo de Cambio) — solo en el header del home (Header.svelte con animated={true}); el resto de páginas de servicio conservan su propio color fijo. -------------------------------------------------------------------------- */ /* El overlay del header va inclinado (skewY) y no cubre toda la caja del header — deja un triángulo sin cubrir que hoy hereda el blanco de . Contra un degradado esa costura blanca se nota más que contra un naranja plano, así que la igualamos al fondo de la sección "Nuestras APIs" (#f9f9f9) para que header y esa sección se vean como una sola pieza. */ .hero-area.hero-uniform-bg { background: #f9f9f9; } .hero-area .overlay.animated-gradient { background: linear-gradient(120deg, #074bb1, #8e44ad, #128C7E, #b8860b, #074bb1); background-size: 400% 400%; animation: apisperuGradientFlow 18s ease infinite; } @keyframes apisperuGradientFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @media (prefers-reduced-motion: reduce) { .hero-area .overlay.animated-gradient { animation: none; background-position: 50% 50%; } } /* -------------------------------------------------------------------------- Home — Sección "Nuestras APIs" Antes: columnas con p-0 (cero espacio entre ellas) + una sola clase (.featured-border1) reusada en las 4 tarjetas, que solo dejaba una línea de 1px entre ellas — de ahí el efecto "pegadas". Tampoco tenían altura pareja: cada tarjeta medía lo que medía su propio texto. -------------------------------------------------------------------------- */ #features .featured-bg { background: transparent; display: flex; flex-wrap: wrap; } #features .featured-bg > [class*="col-"] { display: flex; padding: 12px; } #features .feature-item { width: 100%; display: flex; flex-direction: column; border: none; border-radius: 14px; background: #fff; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06); transition: transform 0.3s ease, box-shadow 0.3s ease; } #features .feature-item:hover { transform: translateY(-6px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12); } #features .feature-item p { flex-grow: 1; } /* Color de marca por API — el mismo que usa cada página de detalle en /servicios/*, para que cada tarjeta tenga identidad propia en vez de compartir el mismo círculo rosa genérico. */ #features .feature-facturacion .feature-icon { background: #f3e6fa; border-color: #8e44ad; } #features .feature-facturacion .feature-icon i { color: #8e44ad; } #features .feature-facturacion.feature-item:hover .feature-icon { background: #8e44ad; } #features .feature-dniruc .feature-icon { background: #e3f0fd; border-color: #074bb1; } #features .feature-dniruc .feature-icon i { color: #074bb1; } #features .feature-dniruc.feature-item:hover .feature-icon { background: #074bb1; } #features .feature-tipocambio .feature-icon { background: #faf1d6; border-color: #b8860b; } #features .feature-tipocambio .feature-icon i { color: #b8860b; } #features .feature-tipocambio.feature-item:hover .feature-icon { background: #b8860b; } #features .feature-whatsapp .feature-icon { background: #dcf8f0; border-color: #128C7E; } #features .feature-whatsapp .feature-icon i { color: #128C7E; } #features .feature-whatsapp.feature-item:hover .feature-icon { background: #128C7E; }