/* ——————————————- */
/* — CSS para Estilizar el Carrusel — */
/* ——————————————- */
/* Variables de Color (Ajustadas a UNICÓRDOBA) */
:root {
–primary-color: #004d99; /* Azul principal */
–secondary-color: #f7a800; /* Naranja de acento */
–card-bg: #fff;
–bg-light: #f4f4f9;
/* Colores de Iconos Temáticos para Finanzas */
–icon-color-1: #4CAF50; /* Diferidos Estudiantes */
–icon-color-2: #FF9800; /* Tesorería */
–icon-color-3: #2196F3; /* Normatividad Financiera */
–icon-color-4: #E91E63; /* Contabilidad */
–icon-color-5: #00BCD4; /* Inicio */
–icon-color-6: #795548; /* Presupuesto */
}
/* Estilos del Contenedor Swiper */
.mySwiper {
width: 90%;
max-width: 1200px;
padding-top: 50px;
padding-bottom: 50px;
margin: 0 auto;
}
/* Estilos Generales de la Tarjeta */
.card {
background-color: var(–card-bg);
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
padding: 30px;
text-align: center;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 77, 153, 0.2);
}
/* Estilos del Encabezado (Título de la Tarjeta) */
.card h3 {
color: var(–primary-color);
font-size: 1.3em;
margin-top: 15px;
margin-bottom: 25px;
font-weight: 600;
line-height: 1.3;
/* Altura fija para que los títulos largos no muevan los botones */
min-height: 3.9em;
}
/* Estilos Base del Icono */
.card .icon {
width: 60px;
height: 60px;
border-radius: 50%;
margin: 0 auto 15px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
color: var(–card-bg);
font-size: 24px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
/* — ESTILOS DE ICONOS ESPECÍFICOS (Color de fondo para cada tarjeta) — */
.card-diferidos .icon { background-color: var(–icon-color-1); }
.card-tesoreria .icon { background-color: var(–icon-color-2); }
.card-normatividad .icon { background-color: var(–icon-color-3); }
.card-contabilidad .icon { background-color: var(–icon-color-4); }
.card-inicio .icon { background-color: var(–icon-color-5); }
.card-presupuesto .icon { background-color: var(–icon-color-6); }
/* Estilos del Botón */
.card .btn {
display: inline-block;
padding: 10px 25px;
background-color: var(–primary-color);
color: var(–card-bg);
text-decoration: none;
border-radius: 8px;
font-weight: 700;
letter-spacing: 0.5px;
transition: background-color 0.3s ease, transform 0.2s ease;
margin-top: auto;
}
.card .btn:hover {
background-color: #003366;
transform: scale(1.05);
}
/* Estilos de Navegación (Flechas y Paginación) */
.swiper-button-next, .swiper-button-prev {
color: var(–primary-color) !important;
opacity: 0.8;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.swiper-pagination-bullet-active {
background: var(–secondary-color) !important;
}
/* Responsive Design */
@media (max-width: 768px) {
.swiper-button-next, .swiper-button-prev { top: 40%; }
}
var swiper = new Swiper(“.mySwiper”, {
spaceBetween: 30,
loop: true,
navigation: {
nextEl: “.swiper-button-next”,
prevEl: “.swiper-button-prev”,
},
pagination: {
el: “.swiper-pagination”,
clickable: true,
},
// Configuración responsiva: Muestra 1, 2, 3 o 4 tarjetas
breakpoints: {
0: {
slidesPerView: 1,
},
640: {
slidesPerView: 2,
},
900: {
slidesPerView: 3,
},
1200: {
slidesPerView: 4,
}
}
});
