/* Variables de Marca Unicórdoba */ :root { --adm-blue: #004d99; --adm-gold: #f7a800; --adm-white: #ffffff; --adm-bg: #f8fafc; /* Colores de iconos específicos */ --clr-inicio: #4CAF50; --clr-casos: #2196F3; --clr-admitidos: #FF9800; --clr-atencion: #E91E63; } .adm-wrapper { padding: 40px 0 60px; font-family: 'Segoe UI', Roboto, sans-serif; } .adm-wrapper .mySwiper { padding: 20px 15px 60px !important; } /* Tarjeta Estilo Premium */ .adm-card { background: var(--adm-white); border-radius: 24px; padding: 40px 25px; text-align: center; height: 360px; /* Altura optimizada */ display: flex; flex-direction: column; align-items: center; justify-content: space-between; box-shadow: 0 12px 35px rgba(0, 77, 153, 0.08); border: 1px solid rgba(0, 0, 0, 0.03); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); margin: 10px; position: relative; overflow: hidden; } /* Efecto Glow al pasar el mouse */ .adm-card:hover { transform: translateY(-12px); box-shadow: 0 20px 45px rgba(0, 77, 153, 0.15); } /* Círculo de Icono con fondo dinámico */ .adm-icon-box { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; transition: 0.5s; color: white; font-size: 32px; box-shadow: 0 6px 15px rgba(0,0,0,0.1); } /* Asignación de colores por tarjeta */ .card-inicio .adm-icon-box { background: var(--clr-inicio); } .card-casos .adm-icon-box { background: var(--clr-casos); } .card-admitidos .adm-icon-box { background: var(--clr-admitidos); } .card-atencion .adm-icon-box { background: var(--clr-atencion); } .adm-card:hover .adm-icon-box { transform: rotateY(360deg) scale(1.1); box-shadow: 0 0 20px rgba(0,0,0,0.2); } /* Títulos */ .adm-card h3 { font-size: 1.15rem !important; font-weight: 700 !important; color: var(--adm-blue) !important; line-height: 1.3 !important; margin: 0 0 20px 0 !important; min-height: 60px; display: flex; align-items: center; } /* Botón Moderno */ .adm-btn { background: var(--adm-blue); color: white !important; padding: 12px 28px; border-radius: 12px; text-decoration: none !important; font-weight: 700; font-size: 0.9rem; width: 85%; transition: 0.3s; box-shadow: 0 4px 15px rgba(0, 77, 153, 0.2); } .adm-btn:hover { background: var(--adm-gold); color: var(--adm-blue) !important; transform: scale(1.05); } /* Personalización de Swiper (Flechas y Puntos) */ .adm-wrapper .swiper-button-next, .adm-wrapper .swiper-button-prev { color: var(--adm-blue) !important; background: white; width: 45px !important; height: 45px !important; border-radius: 50%; box-shadow: 0 5px 15px rgba(0,0,0,0.1); } .adm-wrapper .swiper-button-next:after, .adm-wrapper .swiper-button-prev:after { font-size: 18px !important; font-weight: bold; } .adm-wrapper .swiper-pagination-bullet-active { background: var(--adm-gold) !important; width: 25px !important; border-radius: 5px !important; } document.addEventListener('DOMContentLoaded', function() { new Swiper(".admSwiper", { slidesPerView: 1, spaceBetween: 25, loop: true, grabCursor: true, autoplay: { delay: 4000, disableOnInteraction: false, }, pagination: { el: ".swiper-pagination", clickable: true, }, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, breakpoints: { 640: { slidesPerView: 2 }, 1024: { slidesPerView: 3 }, 1200: { slidesPerView: 4 } } }); });