* {
	padding:0;
	margin:0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
 
html {
    height: 100%;
}

body {
    background: #FEFEFE;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

main {
    flex: 1;
}
 
.menu_bar {
	display:none;
}
 
/*==============================================================================
  HEADER PROFESIONAL - OPCIÓN B: Degradado Sutil
  Colegio Sor Juana Inés de la Cruz
==============================================================================*/

header {
	width: 100%;
	height: 60px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
 
header nav {
	background: linear-gradient(90deg, #0f4571 0%, #062554 100%); /* DEGRADADO AZUL */
	z-index: 1000;
	width: 100%;
	font-family: 'Shanti', 'sans-serif';
	font-size: 13px;
}
 
header nav ul {
	list-style: none;
}

header nav ul a {
	text-decoration: none;
	color: #fff;
}

header nav ul a img {
	margin-right: 10px;
	margin-left: 20px;
}

header nav ul a:hover {
	text-decoration: none;
	color: #fff;
}

header nav ul a span {
	font-size: 14px;
}
 
header nav ul li {
	display: inline-block;
	position: relative;
	transition: all 0.3s ease;
}
 
header nav ul li:hover {
	background: rgba(25, 91, 55, 0.9); /* VERDE con transparencia */
	transition: all 0.3s ease;
}

header nav ul li a {
	color: #fff;
	display: block;
	text-decoration: none;
	padding: 20px;
	transition: all 0.3s ease;
}

header nav ul li a.active {
	background: linear-gradient(90deg, rgba(25, 91, 55, 0.9) 0%, rgba(25, 91, 55, 0.7) 100%);
	width: 100%;
	box-shadow: inset 0 -3px 0 rgba(255, 255, 255, 0.3);
}

header nav ul li a:hover {
	text-decoration: none;
	color: #fff;
	background: rgba(25, 91, 55, 0.85);
}
 
header nav ul li a span {
	margin-right: 10px;
}

header nav ul li:hover .children {
	display: block;
}
 
header nav ul li .children {
	display: none;
	background: linear-gradient(135deg, #0f4571 0%, #062554 100%); /* Degradado en submenú */
	position: absolute;
	width: 150%;
	z-index: 1000;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
	border-top: 3px solid #195b37;
}
 
header nav ul li .children li {
	display: block;
	overflow: hidden;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	transition: all 0.3s ease;
}

header nav ul li .children li:last-child {
	border-bottom: none;
}
 
header nav ul li .children li a {
	display: block;
	padding: 15px 20px;
}

header nav ul li .children li:hover {
	background: rgba(25, 91, 55, 0.9);
	padding-left: 5px;
}
 
header nav ul li .children li a span {
	float: right;
	position: relative;
	top: 3px;
	margin-right: 0;
	margin-left: 10px;
}
 
header nav ul li .caret {
	position: relative;
	top: 3px;
	margin-left: 10px;
	margin-right: 0px;
	transition: transform 0.3s ease;
}

header nav ul li:hover .caret {
	transform: rotate(180deg);
}

/* Efecto de línea inferior */
header nav ul li a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 3px;
	background: rgba(255, 255, 255, 0.3);
	transition: all 0.3s ease;
	transform: translateX(-50%);
}

header nav ul li a:hover::after,
header nav ul li a.active::after {
	width: 80%;
}

/* Logo */
header nav ul a img {
	transition: transform 0.3s ease;
}

header nav ul a:hover img {
	transform: scale(1.05);
}

/* Responsive */
@media (max-width: 768px) {
	header {
		height: auto;
	}
	
	header nav ul li {
		display: block;
		width: 100%;
	}
	
	header nav ul li a {
		padding: 15px 20px;
	}
	
	header nav ul li .children {
		position: relative;
		width: 100%;
	}
}

/*==============================================================================
  MEJORAS ADICIONALES
==============================================================================*/

/* Efecto de línea inferior al hacer hover */
header nav ul li a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 3px;
	background: rgba(255, 255, 255, 0.3);
	transition: all 0.3s ease;
	transform: translateX(-50%);
}

header nav ul li a:hover::after,
header nav ul li a.active::after {
	width: 80%;
}

/* Mejorar el logo si existe */
header nav ul a img {
	transition: transform 0.3s ease;
}

header nav ul a:hover img {
	transform: scale(1.05); /* Zoom sutil al logo */
}

/* Responsive */
@media (max-width: 768px) {
	header {
		height: auto;
	}
	
	header nav ul li {
		display: block;
		width: 100%;
	}
	
	header nav ul li a {
		padding: 15px 20px;
	}
	
	header nav ul li .children {
		position: relative;
		width: 100%;
	}
}

/*==============================================================================
  BOTÓN PLATAFORMA - Verde Institucional
==============================================================================*/

/* Cambiar el botón rojo de Plataforma a verde */
header nav .btn-danger,
nav .btn-danger {
    background: linear-gradient(135deg, #195b37 0%, #0d3d25 100%) !important;
    border-color: #195b37 !important;
    color: white !important;
    padding: 10px 25px !important;
    border-radius: 5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(25, 91, 55, 0.3) !important;
}

header nav .btn-danger:hover,
nav .btn-danger:hover {
    background: linear-gradient(135deg, #1a6b42 0%, #0f4a2d 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(25, 91, 55, 0.4) !important;
    color: white !important;
    text-decoration: none !important;
}

/* Icono dentro del botón */
header nav .btn-danger i {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

header nav .btn-danger:hover i {
    transform: translateX(3px);
}

/*==============================================================================
  BOTÓN PLATAFORMA - Uniforme en todas las páginas
==============================================================================*/

/* Sobrescribir TODOS los botones de Plataforma (danger y success) */
header nav .btn-danger,
header nav .btn-success,
nav .btn-danger,
nav .btn-success,
a.btn-danger[href*="ingresar"],
a.btn-success[href*="ingresar"] {
    background: linear-gradient(135deg, #195b37 0%, #0d3d25 100%) !important;
    border: 2px solid #195b37 !important;
    color: white !important;
    padding: 10px 25px !important;
    border-radius: 25px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 3px 10px rgba(25, 91, 55, 0.3) !important;
    display: inline-block !important;
    text-decoration: none !important;
    margin: 5px 10px !important;
    position: relative !important;
}

/* Hover del botón */
header nav .btn-danger:hover,
header nav .btn-success:hover,
nav .btn-danger:hover,
nav .btn-success:hover,
a.btn-danger[href*="ingresar"]:hover,
a.btn-success[href*="ingresar"]:hover {
    background: linear-gradient(135deg, #1a6b42 0%, #0f4a2d 100%) !important;
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 5px 15px rgba(25, 91, 55, 0.5) !important;
    color: white !important;
    border-color: #1a6b42 !important;
    text-decoration: none !important;
}

/* Quitar cualquier línea inferior del menú */
header nav .btn-danger::after,
header nav .btn-success::after,
nav .btn-danger::after,
nav .btn-success::after {
    display: none !important;
}

/* Asegurar que no se vea como item de menú */
header nav ul .btn-danger,
header nav ul .btn-success {
    background: linear-gradient(135deg, #195b37 0%, #0d3d25 100%) !important;
    border-radius: 25px !important;
}

/* Icono dentro del botón */
.btn-danger i,
.btn-success i {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.btn-danger:hover i,
.btn-success:hover i {
    transform: translateX(3px);
}

/* El span "Ingresar a" antes del botón */
header nav ul span.text-white {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    margin-right: 5px;
}


/*==============================================================================
  SECCIÓN PRINCIPAL CON VIDEO - MEJORAS
  Colegio Sor Juana Inés de la Cruz
==============================================================================*/
.video-fluid {
	width: 100%;
	height: auto;
	margin-top: -150px;
	border: 4px solid #ffffff97;
  }

  main .container-fluid {
	background: #0f4571;
	height: 300px;
  }

  main img {
	width: 400px;
  }

  main .container-fluid h4 {
	font-family: 'Shanti', 'sans-serif';
  }

  main .container-fluid p {
	font-family: 'Roboto', 'sans-serif';
	font-size: 14px;
  }

  main .container-fluid .bars {
	  display: none;
  }

/*==============================================================================
  PÁGINA PRINCIPAL (INDEX)
==============================================================================*/

/* Imagen Superior del Colegio */
.img-fluida1 {
    width: 100%;
    height: 580px; /* para ajustar tamaño de imagen */
    background-image: url("../fotos/imagenes Colegio Sor Juana Ines de la Cruz/Colegio_SorJuana.jpg");
    background-size: cover;
    background-position: center 40%; /* Mejor posicionamiento */
    background-repeat: no-repeat;
    position: relative;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

/* Overlay oscuro suave */
.img-fluida1::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
}

.img-fluida1 .container {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* Hero Section con Video */
.hero-section {
    background: linear-gradient(135deg, #195b37 0%, #062554 100%);
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,.02) 10px, rgba(255,255,255,.02) 20px);
    pointer-events: none;
}

/* Video wrapper */
.video-wrapper {
    position: relative;
    background: #000;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.video-wrapper:hover {
    transform: scale(1.02) translateY(-5px);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.2);
}

.video-wrapper video {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* TEXTO EN BLANCO - VISIBLE */
.hero-text {
    position: relative;
    z-index: 1;
}

.hero-text h4 {
    font-family: 'Shanti', sans-serif;
    font-size: 40px;
    font-weight: 700;
    color: #FFFFFF !important; /* BLANCO PURO */
    margin-bottom: 20px;
    text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.7); /* Sombra más fuerte */
    line-height: 1.2;
}

/* Eliminar cualquier línea roja extraña debajo del título */
.hero-text h4::after,
.hero-text h4::before {
    display: none !important;
}

.hero-text hr {
    width: 100px;
    height: 4px;
    background: white;
    border: none;
    margin: 25px 0;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.3);
}

.hero-text p {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    line-height: 1.8;
    color: #FFFFFF !important; /* BLANCO PURO */
    margin-bottom: 35px;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7); /* Sombra más fuerte */
}

/* Botón mejorado */
.btn-hero {
    background: white;
    color: #195b37;
    padding: 16px 40px;
    font-size: 18px;
    font-weight: 700;
    font-family: 'Shanti', sans-serif;
    border-radius: 50px;
    border: none;
    box-shadow: 
        0 5px 20px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.btn-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.btn-hero:hover::before {
    left: 100%;
}

.btn-hero:hover {
    transform: translateY(-3px);
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    background: #f8f8f8;
    color: #062554;
    text-decoration: none;
}

.btn-hero i {
    transition: transform 0.3s ease;
    font-size: 16px;
}

.btn-hero:hover i {
    transform: translateX(5px);
}

/* Responsive */
@media (max-width: 992px) {
    .img-fluida1 {
        height: 400px;
    }
    
    .hero-section {
        padding: 50px 0;
    }
    
    .hero-text h4 {
        font-size: 32px;
    }
    
    .hero-text p {
        font-size: 17px;
    }
}

@media (max-width: 768px) {
    .img-fluida1 {
        height: 300px;
    }
    
    .hero-section {
        padding: 40px 0;
    }
    
    .video-wrapper {
        margin-bottom: 30px;
        border-radius: 15px;
    }
    
    .hero-text {
        text-align: center;
    }
    
    .hero-text h4 {
        font-size: 28px;
        margin-top: 10px;
    }
    
    .hero-text p {
        font-size: 16px;
    }
    
    .hero-text hr {
        margin: 20px auto;
    }
    
    .btn-hero {
        display: flex;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
        justify-content: center;
        padding: 15px 30px;
    }
}

@media (max-width: 576px) {
    .img-fluida1 {
        height: 250px;
    }
    
    .hero-section {
        padding: 30px 0;
    }
    
    .hero-text h4 {
        font-size: 24px;
    }
    
    .hero-text p {
        font-size: 15px;
        line-height: 1.6;
    }
    
    .btn-hero {
        font-size: 16px;
        padding: 14px 25px;
        max-width: 100%;
    }
}

/* Animaciones */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-text {
    animation: fadeInUp 0.8s ease-out;
}

.video-wrapper {
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}


/*==============================================================================
  FIN DE ESTILOS DEL INDEX
==============================================================================*/



/*==============================================================================
  PÁGINA DE ADMINISTRACIÓN - Diseño Profesional
  Colegio Sor Juana Inés de la Cruz
==============================================================================*/

/* Tarjetas de Contacto */
.tarjeta-contacto {
    background: white;
    border-radius: 15px;
    padding: 35px 25px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    height: 100%;
    border-top: 4px solid #195b37;
    position: relative;
    overflow: hidden;
}

.tarjeta-contacto::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(25, 91, 55, 0.03) 0%, transparent 70%);
    pointer-events: none;
}

.tarjeta-contacto:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.icono-contacto {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1;
}

.icono-contacto i {
    font-size: 32px;
    color: white;
}

.tarjeta-contacto h4 {
    font-family: 'Shanti', sans-serif;
    font-size: 22px;
    color: #0f4571;
    margin: 20px 0 15px;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.tarjeta-contacto .info-principal {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    color: #195b37;
    font-weight: 600;
    margin: 10px 0;
    position: relative;
    z-index: 1;
}

.tarjeta-contacto .info-secundaria {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #6c757d;
    margin: 5px 0;
    position: relative;
    z-index: 1;
}

/* Contenedor de Imagen */
.contenedor-imagen-administracion {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    border: 4px solid #195b37;
    cursor: pointer;
}

.contenedor-imagen-administracion img {
    width: 100%;
    display: block;
    transition: all 0.4s ease;
}

.contenedor-imagen-administracion:hover img {
    transform: scale(1.05);
}

/* Overlay de la Imagen */
.overlay-imagen-admin {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(25, 91, 55, 0.85) 0%, rgba(15, 69, 113, 0.85) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.contenedor-imagen-administracion:hover .overlay-imagen-admin {
    opacity: 1;
}

.overlay-imagen-admin i {
    font-size: 50px;
    color: white;
    margin-bottom: 15px;
    animation: pulse-zoom 1.5s infinite;
}

@keyframes pulse-zoom {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.overlay-imagen-admin p {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    color: white;
    margin: 0;
    font-weight: 600;
}

/* Llamado a la Acción */
.cta-administracion {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 50px 30px;
    border-radius: 15px;
    border: 3px solid #195b37;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.cta-administracion h4 {
    font-family: 'Shanti', sans-serif;
    font-size: 28px;
    color: #0f4571;
    margin-bottom: 15px;
    font-weight: 700;
}

.cta-administracion p {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #6c757d;
    margin-bottom: 25px;
}

.btn-cta-admin {
    display: inline-block;
    background: linear-gradient(135deg, #195b37 0%, #0d3d25 100%);
    color: white;
    padding: 15px 40px;
    border-radius: 50px;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(25, 91, 55, 0.3);
    border: 2px solid #195b37;
}

.btn-cta-admin:hover {
    background: linear-gradient(135deg, #28a745 0%, #195b37 100%);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(25, 91, 55, 0.4);
    color: white;
    text-decoration: none;
}

.btn-cta-admin i {
    margin-right: 10px;
}

/* Responsive */
@media (max-width: 768px) {
    .tarjeta-contacto {
        padding: 25px 20px;
        margin-bottom: 20px;
    }
    
    .tarjeta-contacto h4 {
        font-size: 20px;
    }
    
    .tarjeta-contacto .info-principal {
        font-size: 16px;
    }
    
    .cta-administracion {
        padding: 40px 20px;
    }
    
    .cta-administracion h4 {
        font-size: 24px;
    }
    
    .btn-cta-admin {
        display: block;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
}

/*==============================================================================
  FIN DE PÁGINA DE ADMINISTRACIÓN
==============================================================================*/



/*==============================================================================
  FOOTER COMPACTO - Más espacio blanco, menos alto
  Colegio Sor Juana Inés de la Cruz
==============================================================================*/

/* Footer principal - Más compacto */
footer {
    background: linear-gradient(135deg, #195b37 0%, #0f4571 50%, #062554 100%);
    color: white;
    margin-top: 300px; /* AUMENTADO: Más espacio en blanco arriba */
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.2);
}

footer a {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px; /* Reducido de 15px */
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

footer a:hover {
    color: #ffffff;
    text-decoration: none;
    transform: translateX(3px);
}

/* Sección media del footer - REDUCIDO */
.footer-middle {
    padding: 30px 0 10px; /* Reducido de 50px 0 20px */
    color: white;
}

/* Padding de las columnas - REDUCIDO */
.footer-pad {
    padding: 0 15px;
    margin-bottom: 20px; /* Reducido de 30px */
}

/* Títulos del footer - MÁS PEQUEÑOS */
.mainfooter .footer-pad h4 {
    color: #ffffff;
    font-family: 'Shanti', sans-serif;
    font-size: 17px; /* Reducido de 20px */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px; /* Reducido de 1.5px */
    margin-bottom: 18px; /* Reducido de 25px */
    padding-bottom: 12px; /* Reducido de 15px */
    border-bottom: 2px solid rgba(255, 255, 255, 0.3); /* Reducido de 3px */
    display: inline-block;
}

/* Listas del footer - MÁS COMPACTAS */
.footer-pad ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-pad ul li {
    padding: 7px 0; /* Reducido de 10px */
    font-size: 14px; /* Reducido de 15px */
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.6; /* Reducido de 1.8 */
    transition: all 0.3s ease;
    position: relative;
    padding-left: 18px; /* Reducido de 20px */
}

.footer-pad ul li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px; /* Reducido de 14px */
}

.footer-pad ul li:hover {
    padding-left: 22px; /* Reducido de 25px */
    color: white;
}

/* Copyright - MÁS COMPACTO */
.copy {
    font-size: 12px; /* Reducido de 13px */
    padding: 15px 10px; /* Reducido de 20px */
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(0, 0, 0, 0.1);
    letter-spacing: 0.5px;
}

/*==============================================================================
  ICONOS SOCIALES - MÁS PEQUEÑOS
==============================================================================*/

ul.social-network {
    list-style: none;
    display: flex;
    gap: 12px; /* Reducido de 15px */
    margin: 0;
    padding: 0;
}

ul.social-network li {
    display: inline-block;
    margin: 0;
}

/* Botones sociales circulares - MÁS PEQUEÑOS */
.social-circle li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px; /* Reducido de 45px */
    height: 38px; /* Reducido de 45px */
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    text-align: center;
    font-size: 18px; /* Reducido de 20px */
    color: white;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 2px solid rgba(255, 255, 255, 0.2);
    text-decoration: none;
}

.social-circle li a:hover {
    background: white;
    color: #195b37;
    transform: translateY(-4px) scale(1.1); /* Reducido de -5px */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* Reducido de 10px 25px */
    border-color: white;
}

.social-circle li i {
    margin: 0;
    line-height: 1;
}

/* Facebook específico */
.social-network a.icoFacebook:hover {
    background-color: #3B5998;
    color: white;
    border-color: #3B5998;
}

/* Efecto de rotación suave */
.social-circle li a:hover i {
    transform: rotate(360deg);
    transition: transform 0.6s ease;
}

.social-circle i {
    color: inherit;
    transition: all 0.3s ease;
}

/*==============================================================================
  RESPONSIVE - FOOTER
==============================================================================*/

@media (max-width: 768px) {
    footer {
        margin-top: 80px; /* Reducido de 120px en móviles */
    }
    
    .footer-middle {
        padding: 30px 0 15px; /* Reducido */
    }
    
    .mainfooter .footer-pad h4 {
        font-size: 16px;
        margin-bottom: 15px;
    }
    
    .footer-pad {
        text-align: center;
        margin-bottom: 25px;
    }
    
    .footer-pad ul li {
        padding-left: 0;
        font-size: 13px;
    }
    
    .footer-pad ul li::before {
        display: none;
    }
    
    ul.social-network {
        justify-content: center;
    }
    
    .copy {
        font-size: 11px;
        padding: 12px 10px;
    }
}

@media (max-width: 576px) {
    footer {
        margin-top: 60px; /* Aún más reducido en móviles pequeños */
    }
    
    .footer-middle {
        padding: 25px 0 12px;
    }
    
    .mainfooter .footer-pad h4 {
        font-size: 15px;
    }
    
    .footer-pad ul li {
        font-size: 13px;
        padding: 6px 0;
    }
    
    .social-circle li a {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }
    
    .copy {
        font-size: 10px;
        padding: 10px 8px;
    }
}

/*==============================================================================
  EXTRAS
==============================================================================*/

/* Eliminar estilos antiguos que puedan interferir */
.social-network a {
    background-color: transparent;
}

/* Línea decorativa (si existe) */
.linebot {
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    width: 30%;
    margin: 15px auto;
}

/* Animación de entrada del footer */
@keyframes fadeInFooter {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

footer {
    animation: fadeInFooter 0.8s ease-out;
}



/*==============================================================================
  SECCIÓN NOSOTROS - CSS COMPLETO Y MEJORADO
  Colegio Sor Juana Inés de la Cruz
==============================================================================*/

/* Variables de colores institucionales */
:root {
    --color-verde-principal: #195b37;
    --color-verde-claro: #195b37a1;
    --color-azul-oscuro: #062554;
    --color-gris-texto: #555555;
    --color-gris-claro: #f7f7f7;
    --color-blanco: #ffffff;
}

/*==============================================================================
  1. MISIÓN Y VISIÓN - DISEÑO DE TARJETAS MEJORADO
==============================================================================*/

/* Contenedor de Misión */
main .container .mision {
    background: linear-gradient(135deg, #ffffff 0%, #f0f8f4 100%);
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 20px rgba(25, 91, 55, 0.15);
    border-left: 5px solid var(--color-verde-principal);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

main .container .mision::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(25, 91, 55, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

main .container .mision:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(25, 91, 55, 0.25);
}

main .container .mision h3 {
    font-family: 'Shanti', 'sans-serif';
    font-size: 28px;
    color: var(--color-verde-principal);
    font-weight: 700;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

main .container .mision h3 i {
    font-size: 32px;
    color: var(--color-verde-principal);
}

main .container .mision .linebot {
    border-bottom: 4px solid var(--color-verde-principal);
    width: 80px;
    margin-bottom: 20px;
    border-radius: 2px;
}

main .container .mision p {
    font-family: 'Roboto', 'sans-serif';
    font-size: 16px;
    line-height: 1.8;
    text-align: justify;
    color: var(--color-gris-texto);
    margin-bottom: 0;
    position: relative;
    z-index: 1;
}

/* Contenedor de Visión */
main .container .vision {
    background: linear-gradient(135deg, #ffffff 0%, #e8f4ff 100%);
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 20px rgba(6, 37, 84, 0.15);
    border-left: 5px solid var(--color-azul-oscuro);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

main .container .vision::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(6, 37, 84, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

main .container .vision:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(6, 37, 84, 0.25);
}

main .container .vision h3 {
    font-family: 'Shanti', 'sans-serif';
    font-size: 28px;
    color: var(--color-azul-oscuro);
    font-weight: 700;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

main .container .vision h3 i {
    font-size: 32px;
    color: var(--color-azul-oscuro);
}

main .container .vision .linebot {
    border-bottom: 4px solid var(--color-azul-oscuro);
    width: 80px;
    margin-bottom: 20px;
    border-radius: 2px;
}

main .container .vision p {
    font-family: 'Roboto', 'sans-serif';
    font-size: 16px;
    line-height: 1.8;
    text-align: justify;
    color: var(--color-gris-texto);
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
    padding-left: 20px;
    border-left: 3px solid rgba(6, 37, 84, 0.2);
}

main .container .vision p:last-child {
    margin-bottom: 0;
}

/*==============================================================================
  2. RESEÑA HISTÓRICA - DISEÑO MODERNO CON TIMELINE
==============================================================================*/

/* Título Principal de Reseña */
.seccion-resena-titulo {
    text-align: center;
    margin: 50px 0 40px;
    position: relative;
}

.icono-resena {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--color-verde-principal) 0%, var(--color-azul-oscuro) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 5px 20px rgba(25, 91, 55, 0.3);
    animation: pulso 2s ease-in-out infinite;
}

.icono-resena i {
    font-size: 40px;
    color: white;
}

@keyframes pulso {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 5px 20px rgba(25, 91, 55, 0.3);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 8px 30px rgba(25, 91, 55, 0.5);
    }
}

.titulo-resena {
    font-family: 'Shanti', 'sans-serif';
    font-size: 38px;
    color: var(--color-verde-principal);
    font-weight: 700;
    margin-bottom: 10px;
}

.linea-resena {
    width: 120px;
    height: 4px;
    background: linear-gradient(to right, var(--color-verde-principal), var(--color-azul-oscuro));
    margin: 15px auto;
    border-radius: 2px;
}

.subtitulo-resena {
    font-family: 'Roboto', 'sans-serif';
    font-size: 18px;
    color: var(--color-gris-texto);
    font-style: italic;
}

/* Contenedor del Timeline */
.contenido-resena {
    position: relative;
    padding-left: 50px;
    margin-top: 50px;
}

/* Línea vertical del timeline */
.contenido-resena::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, 
        var(--color-verde-principal) 0%, 
        var(--color-azul-oscuro) 100%);
    border-radius: 2px;
}

/* Tarjetas de historia */
.tarjeta-historia {
    position: relative;
    background: white;
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 40px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border-left: 4px solid var(--color-verde-principal);
}

/* Punto del timeline */
.tarjeta-historia::before {
    content: '';
    position: absolute;
    left: -47px;
    top: 30px;
    width: 20px;
    height: 20px;
    background: var(--color-verde-principal);
    border: 4px solid white;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(25, 91, 55, 0.2);
    z-index: 1;
}

.tarjeta-historia:hover {
    transform: translateX(10px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

/* Fecha de la historia */
.fecha-historia {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, var(--color-verde-principal), var(--color-azul-oscuro));
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-family: 'Roboto', 'sans-serif';
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 15px;
    box-shadow: 0 3px 10px rgba(25, 91, 55, 0.3);
}

.fecha-historia.especial {
    background: linear-gradient(135deg, #d4af37, #f4d03f);
    color: #333;
    animation: brillo 2s ease-in-out infinite;
}

@keyframes brillo {
    0%, 100% {
        box-shadow: 0 3px 10px rgba(212, 175, 55, 0.4);
    }
    50% {
        box-shadow: 0 5px 20px rgba(212, 175, 55, 0.6);
    }
}

/* Título de cada historia */
.titulo-historia {
    font-family: 'Shanti', 'sans-serif';
    font-size: 24px;
    color: var(--color-verde-principal);
    margin-bottom: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
}

.titulo-historia i {
    margin-right: 10px;
    color: var(--color-azul-oscuro);
}

/* Texto de la historia */
.texto-historia {
    font-family: 'Roboto', 'sans-serif';
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-gris-texto);
    text-align: justify;
    margin-bottom: 15px;
}

.texto-historia:last-child {
    margin-bottom: 0;
}

.texto-historia strong {
    color: var(--color-verde-principal);
    font-weight: 700;
}

/* Caja destacada para miembros */
.caja-destacada {
    background: linear-gradient(135deg, #f0f8f4 0%, #e8f4ff 100%);
    border-radius: 10px;
    padding: 20px;
    margin-top: 20px;
    border-left: 4px solid var(--color-azul-oscuro);
}

.caja-destacada h4 {
    font-family: 'Shanti', 'sans-serif';
    font-size: 20px;
    color: var(--color-azul-oscuro);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.lista-miembros {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lista-miembros li {
    font-family: 'Roboto', 'sans-serif';
    font-size: 15px;
    color: var(--color-gris-texto);
    padding: 8px 0;
    display: flex;
    align-items: center;
}

.lista-miembros i {
    color: var(--color-verde-principal);
    margin-right: 10px;
}

/* Tarjeta final destacada */
.tarjeta-historia.destacada-final {
    background: linear-gradient(135deg, #fff9e6 0%, #fff 100%);
    border-left: 4px solid #d4af37;
}

.tarjeta-historia.destacada-final::before {
    background: linear-gradient(135deg, #d4af37, #f4d03f);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.2);
}

/* Valores Institucionales - VERSIÓN MEJORADA Y PROFESIONAL */
.valores-institucionales {
    background: white;
    padding: 35px;
    border-radius: 15px;
    margin-top: 25px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
    border: 3px solid var(--color-verde-principal);
    position: relative;
    overflow: hidden;
}

/* Borde decorativo superior */
.valores-institucionales::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(to right, var(--color-verde-principal) 0%, var(--color-azul-oscuro) 100%);
}

.valores-institucionales h4 {
    font-family: 'Shanti', 'sans-serif';
    font-size: 26px;
    color: var(--color-verde-principal);
    margin: 0 0 30px;
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-top: 10px;
}

/* Remover el ícono de medalla */
.valores-institucionales h4 i {
    display: none;
}

.pilares-grid {
    display: flex;
    justify-content: space-around;
    gap: 40px;
    flex-wrap: wrap;
    padding: 20px 0;
}

.pilar {
    text-align: center;
    flex: 1;
    min-width: 150px;
    transition: transform 0.3s ease;
    padding: 25px 20px;
    background: linear-gradient(135deg, #f0f8f4 0%, #e8f4ff 100%);
    border-radius: 12px;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
    border: 2px solid transparent;
}

.pilar:hover {
    transform: translateY(-10px);
    border-color: var(--color-verde-principal);
    box-shadow: 0 8px 25px rgba(25, 91, 55, 0.2);
}

.pilar i {
    font-size: 60px;
    color: var(--color-verde-principal);
    margin-bottom: 20px;
    display: block;
    transition: all 0.3s ease;
}

.pilar:hover i {
    color: var(--color-azul-oscuro);
    transform: scale(1.1);
}

.pilar span {
    font-family: 'Roboto', 'sans-serif';
    font-size: 22px;
    color: var(--color-azul-oscuro);
    font-weight: 700;
    display: block;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/*==============================================================================
  3. CRONOLOGÍA PATRONATO
==============================================================================*/

main .container .cronologia {
    font-family: 'Shanti', 'sans-serif';
    color: white;
    background: linear-gradient(135deg, var(--color-azul-oscuro) 0%, #0a3a66 100%);
    padding: 20px;
    border-radius: 15px 15px 0 0;
    box-shadow: 0 5px 15px rgba(6, 37, 84, 0.3);
}

main .container .cronologia h3 {
    padding-left: 15px;
    font-size: 26px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

main .container .historia .patronato {
    background: linear-gradient(135deg, #f7f7f7 0%, #e8f4ff 100%);
    padding: 25px;
    border-radius: 0 0 15px 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

main .container .historia .patronato h5 {
    font-family: 'Shanti', 'sans-serif';
    font-size: 22px;
    color: var(--color-verde-principal);
    padding-left: 10px;
    margin-bottom: 15px;
    font-weight: 700;
}

main .container .historia .patronato hr {
    border-top: 3px solid var(--color-verde-claro);
    width: 80px;
    margin-left: 10px;
}

main .container .historia .patronato ol {
    text-align: left;
    padding-left: 40px;
}

main .container .historia .patronato ol li {
    color: var(--color-gris-texto);
    font-family: 'Roboto', 'sans-serif';
    font-size: 16px;
    padding: 8px 0;
    line-height: 1.6;
}

/* Francisco V. Ruiz */
main .container .historia .franciscovruiz {
    text-align: center;
    padding: 30px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
}

main .container .historia .franciscovruiz h5 {
    font-family: 'Shanti', 'sans-serif';
    font-size: 24px;
    color: var(--color-verde-principal);
    margin-bottom: 20px;
    font-weight: 700;
}

main .container .historia .franciscovruiz img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

main .container .historia .franciscovruiz img:hover {
    transform: scale(1.05);
}

/*==============================================================================
  SECCIÓN SOR JUANA 
  Imagen principal con estilo + Modal funcionando
==============================================================================*/

/* ==================== IMAGEN PRINCIPAL EN LA PÁGINA ==================== */

/* Título Simple */
.titulo-imagen-sorjuana h3 {
    font-family: 'Shanti', sans-serif;
    font-size: 32px;
    color: #0f4571;
    font-weight: 700;
}

.titulo-imagen-sorjuana i {
    color: #195b37;
}

.linea-simple-sorjuana {
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #195b37, #0f4571);
    margin: 20px auto;
}

/* Contenedor de Imagen Principal */
.contenedor-imagen-simple-sorjuana {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.enlace-imagen-sorjuana {
    position: relative;
    display: block;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    border: 5px solid #195b37;
    cursor: pointer;
    transition: all 0.3s ease;
}

.enlace-imagen-sorjuana:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
    border-color: #0f4571;
}

/* Imagen Principal Grande */
.imagen-principal-sorjuana {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}

.enlace-imagen-sorjuana:hover .imagen-principal-sorjuana {
    transform: scale(1.05);
}

/* Overlay con Zoom en la Imagen Principal */
.overlay-zoom-sorjuana {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(25, 91, 55, 0.9) 0%, rgba(15, 69, 113, 0.9) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.enlace-imagen-sorjuana:hover .overlay-zoom-sorjuana {
    opacity: 1;
}

.overlay-zoom-sorjuana i {
    font-size: 60px;
    color: white;
    margin-bottom: 15px;
    animation: pulse-zoom-sorjuana 1.5s infinite;
}

@keyframes pulse-zoom-sorjuana {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.overlay-zoom-sorjuana p {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    color: white;
    font-weight: 600;
    margin: 0;
}

/* Texto de Ayuda bajo la Imagen */
.texto-click-ampliar {
    text-align: center;
    margin-top: 20px;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #6c757d;
    font-style: italic;
}

.texto-click-ampliar i {
    color: #195b37;
    margin-right: 8px;
}

/* ==================== MODAL PARA AMPLIAR ==================== */

/* Modal más grande */
#modal-sorjuana .modal-dialog {
    max-width: 900px !important;
    margin: 30px auto;
}

@media (min-width: 992px) {
    #modal-sorjuana .modal-dialog {
        max-width: 1000px !important;
    }
}

/* Contenido del Modal */
#modal-sorjuana .modal-content,
.modal-sorjuana-content {
    border-radius: 15px;
    border: none;
    overflow: hidden;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
}

/* Header del Modal */
#modal-sorjuana .modal-header,
.modal-sorjuana-header {
    background: linear-gradient(90deg, #195b37, #0f4571);
    color: white;
    border: none;
    padding: 20px 25px;
}

#modal-sorjuana .modal-title,
.modal-sorjuana-header .modal-title {
    font-family: 'Shanti', sans-serif;
    font-size: 22px;
    font-weight: 700;
}

#modal-sorjuana .close,
.modal-sorjuana-header .close {
    color: white;
    opacity: 1;
    font-size: 32px;
    font-weight: 300;
    text-shadow: none;
}

#modal-sorjuana .close:hover,
.modal-sorjuana-header .close:hover {
    opacity: 0.8;
}

/* Body del Modal - Centrado y Grande */
#modal-sorjuana .modal-body,
.modal-sorjuana-body {
    padding: 40px !important;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 600px;
}

/* Imagen GRANDE Y CENTRADA en el Modal */
#modal-sorjuana .modal-body img,
.modal-sorjuana-body img {
    max-width: 100% !important;
    max-height: 80vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    display: block;
    margin: 0 auto;
}

/* ==================== RESPONSIVE ==================== */

/* Tablet y Desktop */
@media (max-width: 991px) {
    #modal-sorjuana .modal-dialog {
        max-width: 95% !important;
        margin: 20px auto;
    }
    
    #modal-sorjuana .modal-body,
    .modal-sorjuana-body {
        padding: 30px !important;
        min-height: 500px;
    }
    
    #modal-sorjuana .modal-body img,
    .modal-sorjuana-body img {
        max-height: 70vh !important;
    }
}

/* Tablet */
@media (max-width: 768px) {
    .titulo-imagen-sorjuana h3 {
        font-size: 26px;
    }
    
    .overlay-zoom-sorjuana i {
        font-size: 45px;
    }
    
    .overlay-zoom-sorjuana p {
        font-size: 16px;
    }
    
    .texto-click-ampliar {
        font-size: 14px;
    }
    
    #modal-sorjuana .modal-dialog {
        max-width: 95% !important;
        margin: 10px auto;
    }
    
    #modal-sorjuana .modal-body,
    .modal-sorjuana-body {
        padding: 25px !important;
        min-height: 450px;
    }
    
    #modal-sorjuana .modal-body img,
    .modal-sorjuana-body img {
        max-height: 65vh !important;
    }
    
    #modal-sorjuana .modal-header,
    .modal-sorjuana-header {
        padding: 15px 20px;
    }
    
    #modal-sorjuana .modal-title,
    .modal-sorjuana-header .modal-title {
        font-size: 18px;
    }
}

/* Móvil */
@media (max-width: 576px) {
    .titulo-imagen-sorjuana h3 {
        font-size: 22px;
    }
    
    .enlace-imagen-sorjuana {
        border-width: 3px;
    }
    
    #modal-sorjuana .modal-dialog {
        margin: 5px auto;
    }
    
    #modal-sorjuana .modal-body,
    .modal-sorjuana-body {
        padding: 20px !important;
        min-height: 400px;
    }
    
    #modal-sorjuana .modal-body img,
    .modal-sorjuana-body img {
        max-height: 60vh !important;
    }
}




/*==============================================================================
  4. RESPONSIVE DESIGN
==============================================================================*/

@media (max-width: 992px) {
    .titulo-resena {
        font-size: 32px;
    }
    
    main .container .mision h3,
    main .container .vision h3 {
        font-size: 24px;
    }
}

@media (max-width: 768px) {
    /* Timeline responsive */
    .contenido-resena {
        padding-left: 30px;
    }
    
    .contenido-resena::before {
        left: 10px;
    }
    
    .tarjeta-historia::before {
        left: -37px;
        width: 16px;
        height: 16px;
    }
    
    .tarjeta-historia {
        padding: 20px;
    }
    
    .tarjeta-historia:hover {
        transform: translateX(5px);
    }
    
    /* Títulos */
    .titulo-resena {
        font-size: 28px;
    }
    
    .titulo-historia {
        font-size: 20px;
    }
    
    .texto-historia {
        font-size: 15px;
    }
    
    /* Pilares */
    .pilares-grid {
        flex-direction: column;
        gap: 20px;
    }
    
    .pilar {
        margin-bottom: 10px;
        min-width: 100%;
    }
    
    .valores-institucionales {
        padding: 25px 20px;
    }
    
    .valores-institucionales h4 {
        font-size: 22px;
    }
    
    /* Misión y Visión */
    main .container .mision,
    main .container .vision {
        padding: 20px;
        margin-bottom: 20px;
    }
    
    main .container .mision h3,
    main .container .vision h3 {
        font-size: 22px;
    }
    
    main .container .mision p,
    main .container .vision p {
        font-size: 15px;
    }
}

@media (max-width: 576px) {
    .icono-resena {
        width: 60px;
        height: 60px;
    }
    
    .icono-resena i {
        font-size: 30px;
    }
    
    .titulo-resena {
        font-size: 24px;
    }
    
    .fecha-historia {
        font-size: 12px;
        padding: 6px 15px;
    }
    
    .pilar i {
        font-size: 50px;
    }
    
    .pilar span {
        font-size: 18px;
    }
    
    main .container .cronologia h3 {
        font-size: 20px;
        flex-direction: column;
        text-align: center;
    }
}

/*==============================================================================
  FIN DE SECCIÓN NOSOTROS
==============================================================================*/



/*==============================================================================
  PÁGINAS DE NIVELES EDUCATIVOS - Primaria, Secundaria, Preescolar
  Diseño profesional y formal
==============================================================================*/

/* Imagen de banner superior */
.img-fluida1 {
    width: 100%;
    height: 650px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

/* .img-fluida1::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(25, 91, 55, 0.7), rgba(15, 69, 113, 0.7));
} */

/* Barra gris con título */
.barra-gris {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 4px solid #195b37;
    position: relative;
    overflow: hidden;
}

.barra-gris::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(25, 91, 55, 0.02) 10px,
        rgba(25, 91, 55, 0.02) 20px
    );
}

/* Header de galería con icono */
.header-galeria {
    position: relative;
    z-index: 1;
}

.icono-contenedor {
    display: inline-block;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #195b37 0%, #0d3d25 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 5px 20px rgba(25, 91, 55, 0.3);
    animation: pulse-icon 2s ease-in-out infinite;
}

@keyframes pulse-icon {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 5px 20px rgba(25, 91, 55, 0.3);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 8px 25px rgba(25, 91, 55, 0.4);
    }
}

.icono-contenedor i {
    font-size: 40px;
    color: white;
}

.header-galeria h2 {
    font-family: 'Shanti', sans-serif;
    font-size: 42px;
    font-weight: 700;
    color: #195b37;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Título y descripción */
main h4 {
    font-family: 'Shanti', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #0f4571;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 15px;
}

main h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #195b37, #0f4571);
    border-radius: 2px;
}

main hr {
    display: none;
}

/* Sección objetivo */
.objetivo {
    background: linear-gradient(135deg, rgba(25, 91, 55, 0.05), rgba(15, 69, 113, 0.05));
    padding: 30px;
    border-radius: 15px;
    border-left: 5px solid #195b37;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    margin-bottom: 30px;
}

.objetivo p {
    font-size: 18px;
    line-height: 1.8;
    color: #333;
    margin: 0;
    text-align: justify;
}

.objetivo span {
    color: #195b37;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Galería de imágenes */
main .row img {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    border-radius: 15px !important;
}

main .row img:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
}

/* Espaciado de imágenes */
main .row > div[class*="col-"] {
    margin-bottom: 30px;
}

/* Botón de galería */
.btn-outline-success {
    background: transparent;
    border: 3px solid #195b37;
    color: #195b37;
    padding: 15px 50px;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(25, 91, 55, 0.2);
    position: relative;
    overflow: hidden;
}

.btn-outline-success::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: #195b37;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
    z-index: -1;
}

.btn-outline-success:hover {
    color: white;
    border-color: #195b37;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(25, 91, 55, 0.4);
}

.btn-outline-success:hover::before {
    width: 300px;
    height: 300px;
}

/* Agregar icono al botón */
.btn-outline-success::after {
    content: '→';
    margin-left: 10px;
    font-size: 20px;
    display: inline-block;
    transition: transform 0.3s ease;
}

.btn-outline-success:hover::after {
    transform: translateX(5px);
}

/* Responsive */
@media (max-width: 768px) {
    .img-fluida1 {
        height: 250px;
    }
    
    .header-galeria h2 {
        font-size: 32px;
    }
    
    main h4 {
        font-size: 24px;
    }
    
    .objetivo {
        padding: 20px;
    }
    
    .objetivo p {
        font-size: 16px;
    }
    
    .btn-outline-success {
        padding: 12px 30px;
        font-size: 16px;
    }
    
    .icono-contenedor {
        width: 60px;
        height: 60px;
    }
    
    .icono-contenedor i {
        font-size: 30px;
    }
}

@media (max-width: 576px) {
    .img-fluida1 {
        height: 200px;
    }
    
    .header-galeria h2 {
        font-size: 28px;
    }
    
    main h4 {
        font-size: 20px;
    }
    
    .btn-outline-success {
        padding: 10px 25px;
        font-size: 14px;
        width: 100%;
    }
}

/* Animaciones de entrada */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

main .container > .row {
    animation: fadeInUp 0.8s ease-out;
}

main .container > .row:nth-child(2) {
    animation-delay: 0.2s;
}

main .container > .row:nth-child(3) {
    animation-delay: 0.4s;
}

main .container > .row:nth-child(4) {
    animation-delay: 0.6s;
}

/* Características de Primaria */
.caracteristicas-primaria {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 60px 0;
    margin: 60px 0;
    border-radius: 20px;
}

.caracteristica-card {
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: all 0.3s ease;
    height: 100%;
    border-top: 4px solid #195b37;
}

.caracteristica-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.caracteristica-card i {
    font-size: 50px;
    color: #195b37;
    margin-bottom: 20px;
}

.caracteristica-card h5 {
    font-family: 'Shanti', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #0f4571;
    margin-bottom: 15px;
}

.caracteristica-card p {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
}

/*==============================================================================
  FIN DE ESTILOS DE NIVELES EDUCATIVOS
==============================================================================*/


  /*Contacto*/
  section h2 {
	  font-family: 'Shanti', 'sans-serif';
	  color: #195b37a1;
  }

  section p {
	  font-family: 'Roboto', 'sans-serif';
	  color: #b1a9b1;
	  font-size: 16px;
  }

  section form label {
	  font-family: 'Roboto', 'sans-serif';
	  color: #0c42774b;
	  font-size: 14px;
  }

  section ul p {
	  font-size: 14px;
  }

  section ul li i {
	  color: #195b37a1;
  }


  /*Ingresar*/
  main .container .imagenes {
	  border: 1px solid #a9b1ae52;
	  padding: 10px;
	  border-radius: 10px;
  }

  main .container .imagenes:hover {
	background-color: #a9b1ae21;
  }

  main .container .form .form-group .form-control {
	  color: #b1a9b1;
	  font-size: 14px;
	  border-radius: 0px;
	  font-family: 'Roboto', 'sans-serif';
  }

  main .container .form .form-group .form-control:focus {
	border-color: #28a745;
	box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
} 

  main .container .form .form-group .form-control::placeholder {
	  color: #a9b1ae;
  }
 
  main .container .form .form-check {
	  color: #b1a9b1;
	  font-family: 'Roboto', 'sans-serif';
	  font-size: 14px;
	  text-transform: inherit;
  }

  .login-sec {
	  background-color: #0c427704;
	  padding: 50px 30px; 
	  position:relative;
	  border-top: 5px solid #195b37a1;
	  border-bottom: 5px solid #195b37a1;
	  border-left: 1px solid #195b3733;
	  border-right: 1px solid #195b3733;
	}

  .login-sec .copy-text {
	  position:absolute; 
	  width:80%; 
	  bottom:20px; 
	  font-size:13px; 
	  text-align:center;
	}
  
  .login-sec h2 {
	  margin-bottom:30px;
	  font-weight:800; 
	  font-size:25px; 
	  color: #195b37a1;
	}

  .login-sec h2:after {
	  content:" "; 
	  width:100px; 
	  height:5px; 
	  background:#0c42774b; 
	  display:block; 
	  margin-top:20px; 
	  border-radius:3px; 
	  margin-left:auto;
	  margin-right:auto
	}

  .btn-login {
	  background: #195b37a1; 
	  color:#fff; 
	}

  .banner-text {
	  width:70%; 
	  position:absolute; 
	  bottom:40px; 
	  padding-left:20px;
	}

  .banner-text h2 {
	  color:#fff; 
	  font-weight:600;
	}

  .banner-text h2:after {
	  content:" "; 
	  width:100px; 
	  height:5px; 
	  background:#FFF; 
	  display:block; 
	  margin-top:20px; 
	  border-radius:3px;
	}

  .banner-text p {
	  color:#fff;
	}

	/*Galeria*/

	#demo {
		height:100%;
		position:relative;
		overflow:hidden;
	  }
	  
	  
	  .green{
		background-color:#6fb936;
	  }
			  .thumb{
				  margin-bottom: 30px;
			  }
			  
			  .page-top{
				  margin-top:85px;
			  }
	  
		 
	  img.zoom {
		  width: 100%;
		  height: 200px;
		  border-radius:5px;
		  object-fit:cover;
		  -webkit-transition: all .3s ease-in-out;
		  -moz-transition: all .3s ease-in-out;
		  -o-transition: all .3s ease-in-out;
		  -ms-transition: all .3s ease-in-out;
	  }
			  
	   
	  .transition {
		  -webkit-transform: scale(1.2); 
		  -moz-transform: scale(1.2);
		  -o-transform: scale(1.2);
		  transform: scale(1.2);
	  }
		  .modal-header {
		 
		   border-bottom: none;
	  }
		  .modal-title {
			  color:#000;
		  }
		  .modal-footer{
			display:none;  
		  }


/*Accceso a Plataforma*/
main .container .form-check {
	font-family: 'Roboto', 'sans-serif';
	font-size: 14px;
	color: #195b37a1;
	text-transform: uppercase;
}	

main .container .form-check:hover {
	font-weight: bold;
	transition: .3s;
}

main .container .card {
	 font-family: 'Roboto', 'sans-serif';
	 font-size: 14px;
	 color: #b1a9b1;
}

/*Plataforma*/
main .container .foto_perfil {
	display: block;
	margin: auto;
}

main .container .datos-per {
	font-family: 'Roboto', 'sans-serif';
	font-size: 16px;
}

main .container .datos-per ul {
	list-style: none;
	margin: 15px;
}

main .container .datos-per ul li {
	padding: 5px;
	color: darkgray;
}

main .container .datos-per ul li strong {
	color: #595959be;
}

main .container #icone_grande {
	font-size: 33px;
	padding-top: 15px;
}

main .container .texto_grande {
	font-family: 'Roboto', 'sans-serif';
	font-size: 16px;
}

main .container .mod-datos {
	font-family: 'Roboto', 'sans-serif';
	font-size: 14px;
	color: #837f83a9;
}

main .container .mod-datos .form-control {
	font-size: 12px;
	font-family: 'Roboto', 'sans-serif';
	color: rgba(0, 0, 0, 0.527);
}

main .container .mod-datos .form-control:focus {
	border-color: #28a745;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.subir{
    padding: 15px;
    background: #062554;
    color:#fff;
	border:0px solid #fff;
	cursor: pointer;
	transition: .3s;
}
 
.subir:hover{
    color:#fff;
    background: #195b37;
}

main .container .subir_trabajo {
	border-bottom: 20px solid #195b37;
	width: 100%;
	border-radius: 5px;
	border-top: 0.5px solid #195b3754;
	margin-top: 20px;
	border-left: 0.5px solid #195b3754;
	border-right: 0.5px solid #195b3754;
	font-family: 'Roboto', 'sans-serif';
	font-size: 14px;
	background-color: #195b371a;
}

main .container .img-tareas {
	display: block;
	margin: auto;
	height: 250px;
}

main .container .table {
	font-family: 'Roboto', 'sans-serif';
	font-size: 14px;
}

main .container .table .download {
	font-family: 'Roboto', 'sans-serif';
	font-size: 11px;
	color: #59595983;
}

main .container .table .download:hover {
	color: #595959;
	text-decoration: none;
}

main .container nav .breadcrumb {
	background-color: transparent;
	font-family: 'Roboto', 'sans-serif';
	font-size: 14px;
	padding-top: 20px;
}

main .container nav .breadcrumb li {
	color: #3b589879;
}

main .container nav .breadcrumb .breadcrumb-item a {
	color: #195b37;
	text-decoration: none;
}

main .container nav .breadcrumb .breadcrumb-item a:hover {
	color: #195b3779;
}

/*Calendario Escolar*/
main .calendario-escolar h5 {
	font-size: 20px;
	font-weight: bold;
	color: #195b37;
}

main .container .calendario-escolar {
	font-family: 'Roboto', 'sans-serif';
	font-size: 16px;
	color: #0000009c;
	padding: 15px;
}

main .container .calendario-escolar ul {
	padding-left: 40px;
}

main .container .calendario-escolar ul li span {
	font-weight: bold;
	color: rgba(0, 0, 0, 0.644);
}

main .container .calendario-escolar p span {
	font-weight: bold;
	color: rgba(0, 0, 0, 0.644);
}

/*Galerias*/
.item {
    float: left;
    position: relative;
    line-height: 1em;
}

.grid-sizer { width: 20%; }
.item { width: 20%; }

@media screen and (max-width: 1224px) {
  /* 10 columns for larger screens */
  .grid-sizer { width: 33.33%; }
  .item { width: 33.33%; }
}

@media screen and (max-width: 720px) {
  /* 10 columns for larger screens */
  .grid-sizer { width: 50%; }
  .item { width: 50%; }
}

@media screen and (max-width: 480px) {
  /* 10 columns for larger screens */
  .grid-sizer { width: 100%; }
  .item { width: 100%; }
}

.image{
    max-width: 100%;
    margin: 0;
    display: block;
}

.image:after {
    clear:both;
}

.onhandover {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    text-decoration: none;
    color: #fff;
    display: none;
}

.onhandover .title {
    text-align: center;
    font-size: 30px;
}

.onhandover .description {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,0.80);
    width: 100%;
    margin: 0;
}

.onhandover .description p {
    text-align: center;
}

.item:hover .onhandover {
    display: block;
}

/*Galeria*/
.lg-backdrop.in {
    opacity: 0.85;
}
.fixed-size.lg-outer .lg-inner {
  background-color: #FFF;
}
.fixed-size.lg-outer .lg-sub-html {
  position: absolute;
  text-align: left;
}
.fixed-size.lg-outer .lg-toolbar {
  background-color: transparent;
  height: 0;
}
.fixed-size.lg-outer .lg-toolbar .lg-icon {
  color: #FFF;
}
.fixed-size.lg-outer .lg-img-wrap {
  padding: 12px;
}

/*Galeria preescolar*/
  
.btn:focus, .btn:active, button:focus, button:active {
	outline: none !important;
	box-shadow: none !important;
  }
  
  .thumb{
	margin-top: 15px;
	margin-bottom: 15px;
  }

  /*Maestros*/
  #customFile .custom-file-control:lang(es)::after {
	content: "Seleccionar archivo...";
  }
  
  #customFile .custom-file-control:lang(es)::before {
	content: "Elegir";
  }
  
  /*when a value is selected, this class removes the content */
  .custom-file-control.selected:lang(es)::after {
	content: "" !important;
  }
  
  .custom-file {
	overflow: hidden;
  }
  .custom-file-control {
	white-space: nowrap;
  }


  /**********************************************Seccion Alumnos*****************************************/
  /*Material didactico*/
  main .container .material {
	border: 1px solid #b1a9b1;
	  padding: 20px;
	  border-color: #b1a9b149;
	  background-color: #b1a9b10a;
  }

  main .container .material table {
	  font-family: 'Roboto', 'sans-serif';
	  font-size: 12px;
	  text-transform: uppercase;
  }

  main .container .material table a {
	  color: #195b37;
	  text-decoration: none;
  }

  main .container .material table a:hover {
	color: #195b3781;
  }

  /*Pendientes*/
  main .container .pendientes h5 {
	color: #195b37;
	text-align: center;
  }

  main .container .pendientes {
	border: 1px solid #b1a9b1;
	  padding: 20px;
	  border-color: #b1a9b149;
	  background-color: #b1a9b10a;
  }

  main .container .pendientes table {
	  font-family: 'Roboto', 'sans-serif';
	  font-size: 12px;
	  text-transform: uppercase;
	  color: rgba(0, 0, 0, 0.541);
  }

  main .container .pendientes .actividad a {
	  color: #28a745;
  }

  main .container .pendientes .actividad a:hover {
	  color: #72c585;
	  transition: .2s;
  }

  main .container .pendientes .actividades {
	  font-size: 12px;
	  font-family: 'Roboto', 'sans-serif';
	  color: #8b888b;
	  text-transform: uppercase;
  }

  main .container .pendientes .actividades select {
	  border-radius: 0px;
	  font-size: 12px;
  }

  main .container .pendientes .actividades select:focus {
	border-color: #28a745;
	box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
  }


main .container .pendientes .custom-file-label {
	border-radius: 0px;
}

main .container .pendientes .custom-file label {
	font-family: 'Roboto', 'sans-serif';
	font-size: 10px;
}


/*Eviados*/
main .container .enviados h5 {
	color: #195b37;
	text-align: center;
  }

main .container .enviados {
	border: 1px solid #b1a9b1;
	  padding: 20px;
	  border-color: #b1a9b149;
	  background-color: #b1a9b10a;
  }

  main .container .enviados .actividades {
	font-size: 12px;
	font-family: 'Roboto', 'sans-serif';
	color: #8b888b;
	text-transform: uppercase;
}

main .container .enviados .actividades select {
	border-radius: 0px;
	font-size: 12px;
}

main .container .enviados .actividades select:focus {
  border-color: #28a745;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

  main .container .enviados table {
	  font-family: 'Roboto', 'sans-serif';
	  font-size: 12px;
	  text-transform: uppercase;
	  color: #9e9e9ed7;
  }

  main .container .enviados .word {
	  color: blue;
	  font-size: 15px;
  }

  main .container .enviados .excel {
	color: green;
	font-size: 15px;
}

main .container .enviados .power {
	color: red;
	font-size: 15px;
}

main .container .enviados .custom-file-label {
	border-radius: 0px;
}

main .container .enviados .custom-file label {
	font-family: 'Roboto', 'sans-serif';
	font-size: 12px;
	color: #595959af;
}


/**********************************************Barra Galería*****************************************/
/* Opción 4 - Galería con icono educativo */
.barra-gris {
    background: #0f4571;
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

.barra-gris::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(135deg, transparent 0%, rgba(25, 91, 55, 0.3) 100%);
}

.header-galeria {
    position: relative;
    z-index: 2;
}

.icono-contenedor {
    display: inline-block;
    background: rgba(255, 255, 255, 0.1);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    line-height: 80px;
    margin-bottom: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
}

.icono-contenedor i {
    font-size: 35px;
    color: #efb04e;
}

.header-galeria h2 {
    font-family: 'Shanti', 'sans-serif';
    font-size: 40px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.descripcion {
    font-family: 'Roboto', 'sans-serif';
    font-size: 16px;
    color: rgba(255, 255, 255, 0.85);
}




  /**********************************************Seccion Maestros*****************************************/
  /*Maestros*/
  main .container .subir-tareas {
	  border: 1px solid #b1a9b1;
	  padding: 20px;
	  border-color: #b1a9b149;
	  background-color: #b1a9b10a;
  }

  main .container .subir-tareas h5 {
	  font-family: 'Roboto', 'sans-serif';
	  font-size: 20px;
	  color: #195b37;
  }

  main .container .subir-tareas {
	  font-family: 'Roboto', 'sans-serif';
	  font-size: 13px;
	  color: #595959af;
  }

  main .container .subir-tareas .custom-file-label {
	  border-radius: 0px;
  }

  main .container .subir-tareas .form-control {
	  font-family: 'Roboto', 'sans-serif';
	  font-size: 14px;
	  color: #595959af;
	  border: 1px solid #b1a9b1;
	border-color: #b1a9b149;	 
	font-family: 'Roboto', 'sans-serif';
	font-size: 12px;
	border-radius: 0px;
  }

  main .container .subir-tareas .form-control:focus {
	border-color: #28a745;
	box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
  }

  main .container .subir-tareas .form-control::placeholder {
	  color: #595959af;
  }

  main .container .subir-tareas .custom-file label {
	  font-family: 'Roboto', 'sans-serif';
	  font-size: 12px;
	  color: #595959af;
  }

  /*Maestros Calificar*/
  main .container .calificar {
	border: 1px solid #b1a9b1;
	padding: 20px;
	border-color: #b1a9b149;
	background-color: #b1a9b10a;
	font-family: 'Roboto', 'sans-serif';
	font-size: 15px;
	color: #595959af;
  }

  main .container .calificar h5 {
	font-family: 'Roboto', 'sans-serif';
	font-size: 20px;
	color: #195b37;
  }

  main .container .calificar .form-control {
	font-family: 'Roboto', 'sans-serif';
	font-size: 14px;
	color: #595959af;
  }

  main .container .calilficar .custom-file label {
	font-family: 'Roboto', 'sans-serif';
	font-size: 14;
	color: #595959af;
  }

  /*Seccion administrador*/

  /******************Altas******************/
main .container .altas {
	border: 1px solid #b1a9b1;
	border-color: #b1a9b149;
	padding: 20px;
	background-color: #b1a9b10a;
	font-family: 'Roboto', 'sans-serif';
	font-size: 15px;
	color: #595959af;
}

main .container .altas h5 {
	font-family: 'Roboto', 'sans-serif';
	font-size: 18px;
	color: #195b37;
  }

  main .container .altas label {
	  color: #195b37ad;
	  font-size: 12px;
  }

  main .container .altas .form-control {
	font-family: 'Roboto', 'sans-serif';
	font-size: 12px;
	color: #595959af;
	border: 0px;
	background-color: transparent;
	border-radius: 0px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.11);
	text-transform: uppercase;
  }

  main .container .altas .form-control:focus {
	border-color: #28a745;
	box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
  }

  main .container .altas.custom-file label {
	font-family: 'Roboto', 'sans-serif';
	font-size: 14;
	color: #595959af;
  }

  main .container .altas .form-control::placeholder {
	color: #59595960;
}

main .container .altas small {
	font-size: 11px;
}

/******************Bajas******************/

main .container .bajas {
	border: 1px solid #b1a9b1;
	border-color: #b1a9b149;
	padding: 20px;
	background-color: #b1a9b10a;
	font-family: 'Roboto', 'sans-serif';
	font-size: 12px;
}

main .container .bajas .subtema {
	border-bottom: 5px solid #195b37;
	width: 40%;
	display: block;
	margin: auto;
}

main .container .bajas h5 {
	font-family: 'Roboto', 'sans-serif';
	font-size: 18px;
	color: #195b37;
}

main .container .bajas .form-control {
	font-family: 'Roboto', 'sans-serif';
	font-size: 12px;
	color: #595959af;
	border-radius: 0px;
	text-transform: uppercase;
}

main .container .bajas .form-control::placeholder {
	color: #59595960;
}

main .container .bajas .form-control:focus {
	border-color: #28a745;
	box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
  }

/******************Crear******************/

main .container .crear {
	border: 1px solid #b1a9b1;
	border-color: #b1a9b149;
	padding: 20px;
	background-color: #b1a9b10a;
	font-family: 'Roboto', 'sans-serif';
	font-size: 15px;
	color: #595959af;
}

main .container .crear h5 {
	font-family: 'Roboto', 'sans-serif';
	font-size: 18px;
	color: #195b37;
}

main .container .crear .form-control {
	font-family: 'Roboto', 'sans-serif';
	font-size: 12px;
	color: #595959af;
	border-radius: 0px;
}

main .container .crear .form-control::placeholder {
	color: #59595960;
}

main .container .crear .form-control:focus {
	border-color: #28a745;
	box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
  }

/******************Horarios******************/

main .container .horario {
	border: 1px solid #b1a9b1;
	border-color: #b1a9b149;
	padding: 20px;
	background-color: #b1a9b10a;
	font-family: 'Roboto', 'sans-serif';
	font-size: 12px;
}

main .container .horario {
	border-bottom: 5px solid #195b37;
	width: 40%;
	display: block;
	margin: auto;
}

main .container .horario h5 {
	font-family: 'Roboto', 'sans-serif';
	font-size: 18px;
	color: #195b37;
}

main .container .horario .form-control {
	font-family: 'Roboto', 'sans-serif';
	font-size: 12px;
	color: #595959af;
	border-radius: 0px;
	text-transform: uppercase;
}

main .container .horario .form-control::placeholder {
	color: #59595960;
}

main .container .horario .form-control:focus {
	border-color: #28a745;
	box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
  }


  /******************Altas Tutor******************/

  main .container .altas_t {
	border: 1px solid #b1a9b1;
	border-color: #b1a9b149;
	padding: 25px;
	background-color: #b1a9b10a;
	font-family: 'Roboto', 'sans-serif';
	font-size: 12px;
	color: lightslategray;
  }

  main .container .altas_t .form-control {
	font-family: 'Roboto', 'sans-serif';
	font-size: 12px;
	color: #595959af;
	border-radius: 0px;
	width: 500px;
  }

  main .container .altas_t .form-control::placeholder {
	color: #59595960;
  }

  main .container .altas_t .form-control:focus {
	border-color: #28a745;
	box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
  }


   /******************Tabla Consultas Docentes******************/

   main .tabla_docentes {
	   font-family: 'Shanti', 'sans-serif';
	   background: url("../img/19008.jpg");
   	background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   }

   main .tabla_docentes h3 {
	color: #195b37;
   }

   main .tabla_docentes .form-control {
	font-size: 14px;
	color: #595959af;
	border-radius: 0px;
   }

   main .tabla_docentes .form-control:focus {
	border-color: #28a745;
	box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); 
   }

   main .tabla_docentes table {
	   font-size: 13px;
   }


   /**************************Aniversario***************************/

   main .aniversario {
	font-family: 'Shanti', 'sans-serif';
	background-color: #e6e6e68d;
   }

   main .aniversario .img_aniv {
	border-right: 5px solid #062656;
	margin-top: 20px;
   }

   main .aniversario .vid_aniv iframe {
	   border-top: 1px solid #96969644;
	   border-bottom: 1px solid #96969644;;
	   padding: 20px;
   }


/* Carrusel de Imágenes Destacadas */
.carrusel-container-simple {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.carrusel-wrapper-simple {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
}

.carrusel-slide {
    min-width: 100%;
    flex-shrink: 0;
}

.carrusel-slide img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: block;
}

/* Botones de navegación */
.btn-prev, .btn-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(25, 91, 55, 0.8);
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
}

.btn-prev:hover, .btn-next:hover {
    background: rgba(25, 91, 55, 1);
    transform: translateY(-50%) scale(1.1);
}

.btn-prev {
    left: 20px;
}

.btn-next {
    right: 20px;
}

/* Indicadores (dots) */
.dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid white;
}

.dot:hover {
    background: rgba(255, 255, 255, 0.8);
    transform: scale(1.2);
}

.dot.active {
    background: #195b37;
    width: 30px;
    border-radius: 10px;
}

/* Responsive */
@media (max-width: 768px) {
    .carrusel-slide img {
        height: 350px;
    }
    
    .btn-prev, .btn-next {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
    
    .btn-prev {
        left: 10px;
    }
    
    .btn-next {
        right: 10px;
    }
}

@media (max-width: 576px) {
    .carrusel-slide img {
        height: 250px;
    }
    
    .dots {
        bottom: 10px;
    }
    
    .dot {
        width: 8px;
        height: 8px;
    }
    
    .dot.active {
        width: 20px;
    }
}



/*==============================================================================
  PÁGINA DE GALERÍA -
  Colegio Sor Juana Inés de la Cruz
==============================================================================*/

/* Tarjetas de Galerías por Nivel */
.tarjeta-galeria-nivel {
    background: white;
    border-radius: 15px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    height: 100%;
    border-top: 4px solid #195b37;
}

.tarjeta-galeria-nivel:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.icono-nivel-galeria {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.icono-nivel-galeria i {
    font-size: 40px;
    color: white;
}

.tarjeta-galeria-nivel h4 {
    font-family: 'Shanti', sans-serif;
    font-size: 26px;
    color: #0f4571;
    margin: 20px 0 15px;
    font-weight: 700;
}

.tarjeta-galeria-nivel p {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #6c757d;
    margin-bottom: 25px;
    line-height: 1.6;
}

.btn-galeria-nivel {
    display: inline-block;
    background: linear-gradient(135deg, #195b37 0%, #0d3d25 100%);
    color: white;
    padding: 12px 30px;
    border-radius: 50px;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(25, 91, 55, 0.3);
}

.btn-galeria-nivel:hover {
    background: linear-gradient(135deg, #28a745 0%, #195b37 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(25, 91, 55, 0.4);
    color: white;
    text-decoration: none;
}

/* Grid de Imágenes Mejorado */
.contenedor-imagen-galeria {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.15);
    margin-bottom: 30px;
    background: #000;
}

.img-galeria {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
    transition: all 0.4s ease;
}

.contenedor-imagen-galeria:hover .img-galeria {
    transform: scale(1.1);
    opacity: 0.8;
}

/* Overlay para imágenes */
.overlay-galeria {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(25, 91, 55, 0.9) 0%, rgba(15, 69, 113, 0.9) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.contenedor-imagen-galeria:hover .overlay-galeria {
    opacity: 1;
}

.overlay-galeria i {
    font-size: 40px;
    color: white;
    margin-bottom: 10px;
    animation: zoom-pulse 1.5s infinite;
}

@keyframes zoom-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.overlay-galeria p {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: white;
    margin: 0;
    font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
    .tarjeta-galeria-nivel {
        padding: 30px 20px;
        margin-bottom: 20px;
    }
    
    .icono-nivel-galeria {
        width: 70px;
        height: 70px;
    }
    
    .icono-nivel-galeria i {
        font-size: 35px;
    }
    
    .img-galeria {
        height: 200px;
    }
}

@media (max-width: 576px) {
    .img-galeria {
        height: 180px;
    }
    
    .overlay-galeria i {
        font-size: 35px;
    }
    
    .overlay-galeria p {
        font-size: 14px;
    }
}

/*==============================================================================
  FIN DE PÁGINA DE GALERÍA
==============================================================================*/



/* ==================== TÍTULO GALERÍA ==================== */

.seccion-galeria-formal {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #f8f9fa 100%);
    padding: 60px 20px;
    margin: 50px 0;
    border-top: 3px solid #195b37;
    border-bottom: 3px solid #195b37;
    position: relative;
}

.titulo-galeria-fusion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

/* Líneas doradas decorativas */
.linea-dorada {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent, #efb04e 30%, #d4952d 50%, #efb04e 70%, transparent);
    position: relative;
}

.linea-dorada::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: #efb04e;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px rgba(239, 176, 78, 0.6);
}

/* Contenido central */
.contenido-titulo-fusion {
    text-align: center;
    padding: 0 20px;
}

/* Escudo institucional */
.escudo-institucional {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, #195b37 0%, #28a745 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 8px 20px rgba(25, 91, 55, 0.3);
    border: 4px solid #efb04e;
}

.escudo-institucional i {
    font-size: 40px;
    color: white;
}

/* Textos institucionales */
.texto-institucional {
    max-width: 600px;
    margin: 0 auto;
}

.etiqueta-institucional {
    display: block;
    font-family: 'Roboto', 'sans-serif';
    font-size: 11px;
    color: #195b37;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
    font-weight: 600;
}

.titulo-galeria-principal {
    font-family: 'Shanti', 'sans-serif';
    font-size: 36px;
    color: #195b37;
    margin: 0;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}




.separador-dorado::before,
.separador-dorado::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: #efb04e;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}

.separador-dorado::before {
    left: -15px;
}

.separador-dorado::after {
    right: -15px;
}

.descripcion-institucional {
    font-family: 'Roboto', 'sans-serif';
    font-size: 16px;
    color: #6c757d;
    margin: 0;
    font-style: italic;
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 992px) {
    .titulo-galeria-fusion {
        gap: 30px;
    }
    
    .titulo-galeria-principal {
        font-size: 30px;
    }
}

@media (max-width: 768px) {
    .seccion-galeria-formal {
        padding: 40px 15px;
    }
    
    .titulo-galeria-fusion {
        flex-direction: column;
        gap: 25px;
    }
    
    .linea-dorada {
        width: 80%;
        height: 2px;
    }
    
    .escudo-institucional {
        width: 75px;
        height: 75px;
    }
    
    .escudo-institucional i {
        font-size: 32px;
    }
    
    .titulo-galeria-principal {
        font-size: 26px;
    }
    
    .etiqueta-institucional {
        font-size: 10px;
        letter-spacing: 1.5px;
    }
    
    .descripcion-institucional {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .titulo-galeria-principal {
        font-size: 22px;
    }
    
    .linea-dorada {
        width: 100%;
    }
}


/* ==================== SECCIÓN CALENDARIO ESCOLAR ==================== */

/* Título del Calendario */
.seccion-calendario-titulo {
    text-align: center;
    margin-bottom: 40px;
    padding: 30px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #f8f9fa 100%);
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-top: 4px solid #195b37;
    border-bottom: 4px solid #195b37;
}

.icono-calendario-wrapper {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #195b37 0%, #28a745 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 5px 15px rgba(25, 91, 55, 0.3);
    border: 3px solid #efb04e;
}

.icono-calendario-wrapper i {
    font-size: 32px;
    color: white;
}

.titulo-calendario {
    font-family: 'Shanti', 'sans-serif';
    font-size: 32px;
    color: #195b37;
    margin: 0 0 15px 0;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.linea-calendario {
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #efb04e, #d4952d, #efb04e, transparent);
    margin: 15px auto;
}

.subtitulo-calendario {
    font-family: 'Roboto', 'sans-serif';
    font-size: 18px;
    color: #6c757d;
    margin: 0;
    font-weight: 500;
}

/* Contenedor de la Imagen */
.contenedor-calendario {
    max-width: 1100px;
    margin: 0 auto;
}

.contenedor-calendario a.link-imagen-calendario {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    border: 4px solid #195b37;
    cursor: zoom-in;
}

.img-calendario-grande {
    width: 100%;
    display: block;
    transition: transform 0.4s ease;
}

.contenedor-calendario a:hover .img-calendario-grande {
    transform: scale(1.05);
}

/* Overlay de Zoom */
.overlay-zoom {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(25, 91, 55, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.contenedor-calendario a:hover .overlay-zoom {
    opacity: 1;
}

.overlay-zoom i {
    font-size: 60px;
    color: white;
    margin-bottom: 15px;
    animation: pulso 1.5s infinite;
}

.overlay-zoom p {
    font-family: 'Roboto', 'sans-serif';
    font-size: 18px;
    color: white;
    margin: 0;
    font-weight: 500;
}

@keyframes pulso {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Botón de Descarga */
.acciones-calendario {
    text-align: center;
    margin-top: 30px;
}

.btn-descargar-calendario {
    display: inline-block;
    padding: 15px 35px;
    background: linear-gradient(135deg, #195b37 0%, #28a745 100%);
    color: white;
    font-family: 'Roboto', 'sans-serif';
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(25, 91, 55, 0.3);
    transition: all 0.3s ease;
    border: 2px solid #efb04e;
	cursor: pointer;
}

.btn-descargar-calendario:hover {
    background: linear-gradient(135deg, #28a745 0%, #195b37 100%);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(25, 91, 55, 0.4);
    color: white;
    text-decoration: none;
}

.btn-descargar-calendario i {
    font-size: 18px;
}

/* Responsive */
@media (max-width: 768px) {
    .titulo-calendario {
        font-size: 26px;
    }
    
    .subtitulo-calendario {
        font-size: 16px;
    }
    
    .icono-calendario-wrapper {
        width: 60px;
        height: 60px;
    }
    
    .icono-calendario-wrapper i {
        font-size: 28px;
    }
    
    .contenedor-calendario a {
        border: 3px solid #195b37;
    }
    
    .overlay-zoom i {
        font-size: 45px;
    }
    
    .overlay-zoom p {
        font-size: 16px;
    }
    
    .btn-descargar-calendario {
        padding: 12px 25px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .titulo-calendario {
        font-size: 22px;
    }
    
    .subtitulo-calendario {
        font-size: 14px;
    }
}


/* ==================== PÁGINA DE INSCRIPCIONES ==================== */

/* Título Principal Inscripciones */
.seccion-inscripciones-titulo {
    background: linear-gradient(135deg, #0f4571 0%, #195b37 100%);
    padding: 60px 20px;
    margin-bottom: 50px;
    position: relative;
    overflow: hidden;
}

.seccion-inscripciones-titulo::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 50%;
}

.titulo-inscripciones-wrapper {
    display: flex;
    align-items: center;
    gap: 30px;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.icono-inscripciones {
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

.icono-inscripciones i {
    font-size: 45px;
    color: white;
}

.etiqueta-superior-inscripciones {
    display: block;
    font-family: 'Roboto', 'sans-serif';
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
    font-weight: 600;
}

.titulo-principal-inscripciones {
    font-family: 'Shanti', 'sans-serif';
    font-size: 42px;
    color: white;
    margin: 0;
    font-weight: bold;
    letter-spacing: 1px;
}

.linea-decorativa-inscripciones {
    width: 80px;
    height: 4px;
    background: white;
    margin: 15px 0;
}

.subtitulo-inscripciones {
    font-family: 'Roboto', 'sans-serif';
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

/* Títulos de Sección */
.titulo-seccion-inscripciones {
    font-family: 'Shanti', 'sans-serif';
    font-size: 32px;
    color: #195b37;
    font-weight: bold;
}

.titulo-seccion-inscripciones i {
    color: #0f4571;
}

/* Tarjetas de Fechas */
.tarjeta-fecha {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border-top: 4px solid #195b37;
    height: 100%;
}

.tarjeta-fecha:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.tarjeta-fecha.inscripcion-nueva {
    border-top-color: #195b37;
}

.tarjeta-fecha.reinscripcion {
    border-top-color: #0f4571;
}

.encabezado-fecha {
    text-align: center;
    margin-bottom: 20px;
}

.encabezado-fecha i {
    font-size: 40px;
    color: #195b37;
    margin-bottom: 15px;
}

.encabezado-fecha h3 {
    font-family: 'Shanti', 'sans-serif';
    font-size: 24px;
    color: #195b37;
    margin: 10px 0;
}

.etiqueta-tipo {
    display: inline-block;
    background: #f8f9fa;
    color: #6c757d;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-family: 'Roboto', 'sans-serif';
    text-transform: uppercase;
    letter-spacing: 1px;
}

.fecha-destacada {
    background: linear-gradient(135deg, #195b37 0%, #0d3d2a 100%);
    color: white;
    padding: 20px;
    border-radius: 10px;
    font-family: 'Roboto', 'sans-serif';
    font-size: 18px;
    text-align: center;
    font-weight: 500;
}

/* Sección de Costos */
.seccion-costos {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 60px 0;
    margin: 50px 0;
}

/* Tarjetas de Costos */
.tarjeta-costo {
    background: white;
    border-radius: 15px;
    padding: 30px 20px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    height: 100%;
    position: relative;
    border: 2px solid #e9ecef;
}

.tarjeta-costo:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    border-color: #195b37;
}

.tarjeta-costo.destacada {
    border: 3px solid #0f4571;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}

.icono-costo {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #195b37 0%, #0d3d2a 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.icono-costo i {
    font-size: 32px;
    color: white;
}

.tarjeta-costo h4 {
    font-family: 'Shanti', 'sans-serif';
    font-size: 22px;
    color: #195b37;
    margin: 15px 0 10px;
}

.descripcion-costo {
    font-family: 'Roboto', 'sans-serif';
    font-size: 14px;
    color: #6c757d;
    margin: 5px 0;
}

.precio {
    font-family: 'Shanti', 'sans-serif';
    font-size: 48px;
    color: #195b37;
    font-weight: bold;
    margin: 20px 0;
    line-height: 1;
}

.precio-small {
    font-family: 'Shanti', 'sans-serif';
    font-size: 32px;
    color: #195b37;
    font-weight: bold;
    margin: 10px 0;
}

.nota-costo {
    font-family: 'Roboto', 'sans-serif';
    font-size: 14px;
    color: #6c757d;
    margin: 10px 0 0;
}

/* Imagen de Instalaciones */
.imagen-instalaciones {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    border: 4px solid #195b37;
    position: relative;
}

.imagen-instalaciones::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(25, 91, 55, 0.1) 0%, transparent 100%);
    z-index: 1;
    pointer-events: none;
}

.imagen-instalaciones img {
    width: 100%;
    display: block;
    transition: transform 0.5s ease;
}

.imagen-instalaciones:hover img {
    transform: scale(1.05);
}

/* Call to Action */
.seccion-cta-inscripciones {
    background: linear-gradient(135deg, #0f4571 0%, #195b37 100%);
    padding: 50px 20px;
    margin: 50px 0 0;
}

.titulo-cta {
    font-family: 'Shanti', 'sans-serif';
    font-size: 28px;
    color: white;
    margin: 0 0 10px;
}

.subtitulo-cta {
    font-family: 'Roboto', 'sans-serif';
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.btn-cta-inscripciones {
    display: inline-block;
    background: white;
    color: #195b37;
    padding: 15px 40px;
    border-radius: 50px;
    font-family: 'Roboto', 'sans-serif';
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    border: 2px solid white;
}

.btn-cta-inscripciones:hover {
    background: transparent;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    text-decoration: none;
}

/* Responsive */
@media (max-width: 768px) {
    .titulo-inscripciones-wrapper {
        flex-direction: column;
        text-align: center;
    }
    
    .linea-decorativa-inscripciones {
        margin: 15px auto;
    }
    
    .titulo-principal-inscripciones {
        font-size: 32px;
    }
    
    .titulo-seccion-inscripciones {
        font-size: 26px;
    }
    
    .precio {
        font-size: 40px;
    }
    
    .titulo-cta {
        font-size: 22px;
        text-align: center;
    }
    
    .subtitulo-cta {
        text-align: center;
    }
}


/* ==================== PÁGINA DE ACTIVIDADES ==================== */


/* ==================== TÍTULO PRINCIPAL - COLORES INSTITUCIONALES ==================== */

.seccion-actividades-titulo-feria {
    background: linear-gradient(135deg, #195b37 0%, #0f4571 50%, #062554 100%);
    padding: 60px 20px;
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

.seccion-actividades-titulo-feria::before {
    content: '🎊';
    position: absolute;
    font-size: 200px;
    opacity: 0.08;
    top: -50px;
    left: 5%;
    animation: float-icono 6s ease-in-out infinite;
}

.seccion-actividades-titulo-feria::after {
    content: '🎉';
    position: absolute;
    font-size: 150px;
    opacity: 0.08;
    bottom: -30px;
    right: 10%;
    animation: float-icono 8s ease-in-out infinite;
}

@keyframes float-icono {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(5deg);
    }
}

.titulo-actividades-wrapper-feria {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

.etiqueta-superior-actividades {
    display: block;
    font-family: 'Roboto', 'sans-serif';
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
    font-weight: 600;
}

.titulo-principal-actividades {
    font-family: 'Shanti', 'sans-serif';
    font-size: 42px;
    color: white;
    margin: 0;
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
}

.linea-decorativa-actividades {
    width: 80px;
    height: 4px;
    background: white;
    margin: 15px auto;
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.4);
}

.subtitulo-actividades {
    font-family: 'Roboto', 'sans-serif';
    font-size: 18px;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    font-weight: 500;
}

/* ==================== INVITACIÓN FIESTAS PATRIAS ==================== */

.invitacion-fiestas-patrias {
    background: linear-gradient(135deg, #195b37 0%, #0f4571 50%, #195b37 100%);
    padding: 50px 20px;
    position: relative;
    overflow: hidden;
}

.invitacion-fiestas-patrias::before {
    content: '🎪';
    position: absolute;
    font-size: 180px;
    opacity: 0.06;
    top: -20px;
    left: 8%;
    animation: rotate-feria 10s ease-in-out infinite;
}

.invitacion-fiestas-patrias::after {
    content: '🎡';
    position: absolute;
    font-size: 140px;
    opacity: 0.06;
    bottom: -10px;
    right: 12%;
    animation: rotate-feria 12s ease-in-out infinite;
}

@keyframes rotate-feria {
    0%, 100% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(10deg) scale(1.05);
    }
}

.contenido-invitacion {
    text-align: center;
    position: relative;
    z-index: 1;
}

.iconos-decorativos-feria {
    font-size: 40px;
    margin: 15px 0;
    animation: bounce-feria 2s ease-in-out infinite;
}

@keyframes bounce-feria {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-10px) scale(1.05);
    }
}

.titulo-invitacion {
    margin: 20px 0;
}

.colegio-nombre {
    display: block;
    font-family: 'Shanti', 'sans-serif';
    font-size: 32px;
    color: white;
    font-weight: bold;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
    margin-bottom: 10px;
}

.invita-texto {
    display: block;
    font-family: 'Roboto', 'sans-serif';
    font-size: 24px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.evento-principal-feria {
    font-family: 'Shanti', 'sans-serif';
    font-size: 48px;
    color: white;
    font-weight: bold;
    margin: 20px 0 10px;
    text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.fecha-evento-feria {
    font-family: 'Roboto', 'sans-serif';
    font-size: 28px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    margin: 10px 0 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* ==================== TARJETAS DE VIDEO - COLORES INSTITUCIONALES ==================== */

.tarjeta-video-feria {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    height: 100%;
    border: 4px solid #195b37;
}

.tarjeta-video-feria:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(25, 91, 55, 0.3);
    border-color: #0f4571;
}

.encabezado-video-feria {
    padding: 25px;
    background: linear-gradient(135deg, #195b37 0%, #0f4571 100%);
    border-bottom: 4px solid #195b37;
}

.fecha-video-feria {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 8px 18px;
    border-radius: 25px;
    font-size: 13px;
    font-family: 'Roboto', 'sans-serif';
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.titulo-video-feria {
    font-family: 'Shanti', 'sans-serif';
    font-size: 28px;
    color: white;
    margin: 15px 0 10px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.descripcion-video-feria {
    font-family: 'Roboto', 'sans-serif';
    font-size: 15px;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    line-height: 1.6;
}

/* ==================== CONTENEDOR DE VIDEO ==================== */

.contenedor-video-feria {
    position: relative;
    background: #000;
    padding: 0;
    border-radius: 0 0 20px 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Video de Circular - Vertical (CORREGIDO) */
.video-circular {
    width: 100%;
    height: auto;
    max-height: 500px;
    display: block;
    object-fit: contain;
    background: #000;
}

/* Video de Feria - Horizontal */
.video-feria {
    width: 100%;
    height: 350px;
    display: block;
    object-fit: cover;
    background: #000;
}

/* Controles del video personalizados */
.video-feria::-webkit-media-controls-panel,
.video-circular::-webkit-media-controls-panel {
    background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.9));
}

/* ==================== SECCIÓN DE INFORMACIÓN ==================== */

.seccion-info-actividades-feria {
    background: linear-gradient(135deg, #0f4571 0%, #195b37 100%);
    padding: 50px 20px;
    margin-top: 50px;
}

.titulo-info-actividades {
    font-family: 'Shanti', 'sans-serif';
    font-size: 26px;
    color: white;
    margin: 0 0 10px;
}

.subtitulo-info-actividades {
    font-family: 'Roboto', 'sans-serif';
    font-size: 16px;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
}

.btn-info-actividades-feria {
    display: inline-block;
    background: white;
    color: #195b37;
    padding: 12px 30px;
    border-radius: 50px;
    font-family: 'Roboto', 'sans-serif';
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid white;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.btn-info-actividades-feria:hover {
    background: transparent;
    color: white;
    transform: translateY(-3px);
    text-decoration: none;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 768px) {
    .video-feria,
    .video-circular {
        max-height: 400px;
    }
    
    .video-feria {
        height: 300px;
    }
    
    .titulo-info-actividades {
        font-size: 22px;
        text-align: center;
    }
    
    .subtitulo-info-actividades {
        text-align: center;
    }
    
    .btn-info-actividades-feria {
        display: block;
        margin: 10px auto;
        width: 100%;
        max-width: 300px;
    }
}

@media (max-width: 576px) {
    .evento-principal-feria {
        font-size: 28px;
    }
    
    .video-circular {
        max-height: 350px;
    }
    
    .video-feria {
        height: 250px;
    }
    
    .titulo-video-feria {
        font-size: 24px;
    }
}

/*==============================================================================
  FIN DE PÁGINA DE ACTIVIDADES - COLORES INSTITUCIONALES
==============================================================================*/



/*==============================================================================
  PÁGINA DE CONTACTO 
  Colegio Sor Juana Inés de la Cruz
==============================================================================*/

/* Tarjetas de Información */
.tarjeta-contacto-info {
    background: white;
    border-radius: 15px;
    padding: 35px 25px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    height: 100%;
    border-top: 4px solid #195b37;
    position: relative;
    overflow: hidden;
}

.tarjeta-contacto-info::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(25, 91, 55, 0.03) 0%, transparent 70%);
    pointer-events: none;
}

.tarjeta-contacto-info:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.icono-contacto-info {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #195b37 0%, #0d3d25 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 5px 15px rgba(25, 91, 55, 0.3);
    position: relative;
    z-index: 1;
}

.icono-contacto-info i {
    font-size: 32px;
    color: white;
}

.tarjeta-contacto-info h4 {
    font-family: 'Shanti', sans-serif;
    font-size: 22px;
    color: #0f4571;
    margin: 20px 0 15px;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.tarjeta-contacto-info .info-principal {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    color: #195b37;
    font-weight: 600;
    margin: 10px 0;
    position: relative;
    z-index: 1;
}

.tarjeta-contacto-info .info-secundaria {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #6c757d;
    margin: 5px 0;
    position: relative;
    z-index: 1;
}

/* Formulario de Contacto */
.formulario-contacto-wrapper {
    background: white;
    border-radius: 20px;
    padding: 50px 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    border: 3px solid #f8f9fa;
    position: relative;
    overflow: hidden;
}

.formulario-contacto-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, #195b37 0%, #0f4571 100%);
}

.titulo-formulario {
    font-family: 'Shanti', sans-serif;
    font-size: 28px;
    color: #0f4571;
    margin-bottom: 30px;
    text-align: center;
    font-weight: 700;
}

.form-label-contacto {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #195b37;
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}

.form-control-contacto {
    width: 100%;
    padding: 12px 15px;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    color: #333;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    transition: all 0.3s ease;
    background: #f8f9fa;
}

.form-control-contacto:focus {
    outline: none;
    border-color: #195b37;
    background: white;
    box-shadow: 0 0 0 0.2rem rgba(25, 91, 55, 0.15);
}

.form-control-contacto::placeholder {
    color: #adb5bd;
    font-style: italic;
}

/* Botón de Envío */
.btn-enviar-contacto {
    background: linear-gradient(135deg, #195b37 0%, #0d3d25 100%);
    color: white;
    padding: 15px 50px;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 600;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(25, 91, 55, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-enviar-contacto:hover {
    background: linear-gradient(135deg, #28a745 0%, #195b37 100%);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(25, 91, 55, 0.4);
}

.btn-enviar-contacto:active {
    transform: translateY(-1px);
}

/* Contenedor del Mapa */
.contenedor-mapa {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    border: 4px solid #195b37;
    margin-bottom: 50px;
}

.contenedor-mapa iframe {
    display: block;
    width: 100%;
}

/* Responsive */
@media (max-width: 768px) {
    .formulario-contacto-wrapper {
        padding: 30px 20px;
    }
    
    .titulo-formulario {
        font-size: 24px;
    }
    
    .btn-enviar-contacto {
        width: 100%;
        padding: 12px 30px;
        font-size: 16px;
    }
    
    .tarjeta-contacto-info {
        margin-bottom: 20px;
    }
    
    .contenedor-mapa {
        border: 3px solid #195b37;
    }
    
    .contenedor-mapa iframe {
        height: 350px;
    }
}

@media (max-width: 576px) {
    .icono-contacto-info {
        width: 60px;
        height: 60px;
    }
    
    .icono-contacto-info i {
        font-size: 28px;
    }
    
    .tarjeta-contacto-info h4 {
        font-size: 20px;
    }
    
    .formulario-contacto-wrapper {
        padding: 25px 15px;
    }
    
    .contenedor-mapa iframe {
        height: 300px;
    }
}

/*==============================================================================
  FIN DE PÁGINA DE CONTACTO
==============================================================================*/


/*==============================================================================
  GALERÍAS POR NIVEL (Primaria y Secundaria)
==============================================================================*/

/* Botón Volver */
.btn-volver-galeria {
    display: inline-block;
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    color: white;
    padding: 12px 30px;
    border-radius: 50px;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(108, 117, 125, 0.3);
}

.btn-volver-galeria:hover {
    background: linear-gradient(135deg, #495057 0%, #343a40 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(108, 117, 125, 0.4);
    color: white;
    text-decoration: none;
}

.btn-volver-galeria i {
    transition: transform 0.3s ease;
}

.btn-volver-galeria:hover i {
    transform: translateX(-5px);
}

/* Breadcrumb Personalizado */
.breadcrumb-item a {
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb-item a:hover {
    color: #0f4571 !important;
}

.breadcrumb-item.active {
    color: #6c757d;
    font-weight: 600;
}

/* Modal Mejorado */
.modal-content {
    border-radius: 15px;
    border: none;
    overflow: hidden;
}

.modal-header {
    padding: 20px 25px;
}

.modal-body {
    padding: 30px;
}

.modal-footer {
    padding: 15px 25px;
}

/* Responsive para Galerías de Nivel */
@media (max-width: 768px) {
    .btn-volver-galeria {
        display: block;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
}

/*==============================================================================
  FIN DE GALERÍA PRIMARIA
==============================================================================*/



/*==============================================================================
  GALERÍA SECUNDARIA - Variante con colores azules
==============================================================================*/

/* Contenedor de imágenes para secundaria */
.contenedor-imagen-galeria-secundaria {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.15);
    background: #000;
}

/* Overlay con colores azules para secundaria */
.overlay-galeria-secundaria {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(15, 69, 113, 0.9) 0%, rgba(25, 91, 55, 0.9) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.contenedor-imagen-galeria-secundaria:hover .overlay-galeria-secundaria {
    opacity: 1;
}

.overlay-galeria-secundaria i {
    font-size: 40px;
    color: white;
    margin-bottom: 10px;
    animation: zoom-pulse 1.5s infinite;
}

.overlay-galeria-secundaria p {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: white;
    margin: 0;
    font-weight: 600;
}

/* Icono contenedor azul para secundaria */
.header-galeria .icono-contenedor[style*="0f4571"] {
    background: linear-gradient(135deg, #0f4571 0%, #062554 100%) !important;
}

/*==============================================================================
  FIN DE GALERÍA SECUNDARIA
==============================================================================*/


/*==============================================================================
  CORRECCIÓN DE MODAL PARA GALERÍAS
  Hace que las imágenes se vean grandes y centradas
==============================================================================*/

/* Modal más grande */
#image-gallery .modal-dialog {
    max-width: 900px !important;
    margin: 30px auto;
}

/* Contenido del modal */
#image-gallery .modal-content {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

/* Header del modal */
#image-gallery .modal-header {
    padding: 20px 25px;
    border-bottom: none;
}

/* Body del modal - centrado */
#image-gallery .modal-body {
    padding: 30px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 500px;
    background: #f8f9fa !important;
}

/* Imagen dentro del modal - GRANDE Y CENTRADA */
#image-gallery .modal-body img,
#image-gallery-image {
    max-width: 100% !important;
    max-height: 70vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    border-radius: 10px !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2) !important;
    display: block;
    margin: 0 auto;
}

/* Footer del modal */
#image-gallery .modal-footer {
    padding: 15px 25px;
    border-top: none;
    background: #f8f9fa !important;
    display: flex;
    justify-content: space-between;
}

/* Botones del modal */
#image-gallery .modal-footer button {
    padding: 10px 25px;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.3s ease;
}

#image-gallery .modal-footer button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Botón cerrar (X) */
#image-gallery .modal-header .close {
    font-size: 32px;
    font-weight: 300;
    text-shadow: none;
    opacity: 1;
}

#image-gallery .modal-header .close:hover {
    opacity: 0.8;
}

/* Responsive para móviles */
@media (max-width: 768px) {
    #image-gallery .modal-dialog {
        max-width: 95% !important;
        margin: 10px auto;
    }
    
    #image-gallery .modal-body {
        padding: 20px !important;
        min-height: 400px;
    }
    
    #image-gallery .modal-body img,
    #image-gallery-image {
        max-height: 60vh !important;
    }
    
    #image-gallery .modal-footer {
        flex-direction: column;
        gap: 10px;
    }
    
    #image-gallery .modal-footer button {
        width: 100%;
    }
}

@media (max-width: 576px) {
    #image-gallery .modal-body {
        min-height: 300px;
        padding: 15px !important;
    }
    
    #image-gallery .modal-body img,
    #image-gallery-image {
        max-height: 50vh !important;
    }
    
    #image-gallery .modal-header {
        padding: 15px 20px;
    }
    
    #image-gallery .modal-title {
        font-size: 18px;
    }
}

/*==============================================================================
  FIN DE CORRECCIÓN DE MODAL
==============================================================================*/

/*==============================================================================
  PÁGINA DE PLATAFORMA / LOGIN
  Colegio Sor Juana Inés de la Cruz - Acceso al Sistema
==============================================================================*/

/* ==================== TÍTULO "PLATAFORMA" DESTACADO ==================== */

.barra-gris {
    background: linear-gradient(135deg, #0f4571 0%, #195b37 100%);
    padding: 60px 20px;
    margin-bottom: 50px;
    position: relative;
    overflow: hidden;
    border: none;
}

.barra-gris::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 50%;
}

.barra-gris h4,
.barra-gris h4.text-muted,
.barra-gris .text-muted {
    font-family: 'Shanti', 'sans-serif' !important;
    font-size: 48px !important;
    color: #FFFFFF !important;
    margin: 0 !important;
    font-weight: bold !important;
    text-align: center !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3) !important;
    position: relative !important;
    z-index: 1 !important;
}

.barra-gris h4::after {
    content: '' !important;
    display: block !important;
    width: 120px !important;
    height: 4px !important;
    background: white !important;
    margin: 20px auto 0 !important;
    border-radius: 2px !important;
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.3) !important;
}

/* ==================== TARJETAS DE SELECCIÓN (Alumnos, Maestros, Padres) ==================== */

main .container .imagenes {
    background: white;
    border: 3px solid #e9ecef;
    border-radius: 20px;
    padding: 30px 20px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

main .container .imagenes::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(25, 91, 55, 0.05) 0%, transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

main .container .imagenes:hover {
    background: linear-gradient(135deg, #f0f8f4 0%, #e8f4ff 100%);
    border-color: #195b37;
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 15px 40px rgba(25, 91, 55, 0.2);
}

main .container .imagenes:hover::before {
    opacity: 1;
}

/* Radio buttons ocultos */
main .container .imagenes .form-check-input {
    position: absolute;
    opacity: 0;
}

/* Imágenes dentro de las tarjetas */
main .container .imagenes img {
    transition: all 0.4s ease;
    filter: grayscale(20%);
    position: relative;
    z-index: 1;
}

main .container .imagenes:hover img {
    transform: scale(1.1);
    filter: grayscale(0%);
}

/* Texto debajo de las imágenes */
main .container .imagenes p {
    font-family: 'Shanti', 'sans-serif';
    font-size: 20px;
    color: #0f4571;
    margin-top: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

main .container .imagenes:hover p {
    color: #195b37;
}

/* Efecto cuando está seleccionado */
main .container .imagenes:has(.form-check-input:checked) {
    background: linear-gradient(135deg, #195b37 0%, #0d3d25 100%);
    border-color: #195b37;
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 20px 50px rgba(25, 91, 55, 0.3);
}

main .container .imagenes:has(.form-check-input:checked) p {
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

main .container .imagenes:has(.form-check-input:checked) img {
    filter: brightness(1.2) contrast(1.1);
}

/* ==================== FORMULARIO DE LOGIN ==================== */

main .container .card {
    border: none;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    background: white;
}

/* Encabezado del formulario */
main .container .card h5 {
    background: linear-gradient(135deg, #0f4571 0%, #195b37 100%);
    color: white;
    font-family: 'Shanti', 'sans-serif';
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
    padding: 25px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

/* Cuerpo del formulario */
main .container .card .card-body {
    padding: 40px 30px;
}

/* Labels del formulario */
main .container .form label {
    font-family: 'Roboto', 'sans-serif';
    font-size: 14px;
    color: #195b37;
    font-weight: 600;
    margin-bottom: 8px;
}

/* Inputs del formulario */
main .container .form .form-control {
    border: 2px solid #e9ecef;
    border-radius: 10px;
    padding: 12px 15px;
    font-family: 'Roboto', 'sans-serif';
    font-size: 15px;
    color: #333;
    background: #f8f9fa;
    transition: all 0.3s ease;
}

main .container .form .form-control:focus {
    border-color: #195b37;
    background: white;
    box-shadow: 0 0 0 0.2rem rgba(25, 91, 55, 0.15);
    outline: none;
}

main .container .form .form-control::placeholder {
    color: #adb5bd;
    font-style: italic;
}

/* Checkbox de recordar */
main .container .form .form-check {
    margin: 20px 0;
}

main .container .form .form-check-label {
    font-family: 'Roboto', 'sans-serif';
    font-size: 14px;
    color: #6c757d;
    font-weight: 500;
    cursor: pointer;
}

main .container .form .form-check-input {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

main .container .form .form-check-input:checked {
    background-color: #195b37;
    border-color: #195b37;
}

/* Botón de Ingresar */
main .container .btn-success,
main .container #btnLogin {
    background: linear-gradient(135deg, #195b37 0%, #0d3d25 100%) !important;
    border: none !important;
    color: white !important;
    padding: 14px 40px !important;
    font-family: 'Roboto', 'sans-serif' !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-radius: 50px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 5px 15px rgba(25, 91, 55, 0.3) !important;
    text-decoration: none !important;
    display: inline-block !important;
}

main .container .btn-success:hover,
main .container #btnLogin:hover {
    background: linear-gradient(135deg, #28a745 0%, #195b37 100%) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(25, 91, 55, 0.4) !important;
    text-decoration: none !important;
}

/* Mensajes de validación */
main .container .invalid-feedback {
    font-family: 'Roboto', 'sans-serif';
    font-size: 13px;
    color: #dc3545;
    margin-top: 5px;
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 768px) {
    .barra-gris h4 {
        font-size: 36px;
        letter-spacing: 2px;
    }
    
    main .container .imagenes {
        padding: 25px 15px;
        margin-bottom: 20px;
    }
    
    main .container .imagenes p {
        font-size: 18px;
    }
    
    main .container .card .card-body {
        padding: 30px 20px;
    }
    
    main .container .btn-success,
    main .container #btnLogin {
        width: 100% !important;
        padding: 12px 30px !important;
    }
}

@media (max-width: 576px) {
    .barra-gris {
        padding: 40px 15px;
    }
    
    .barra-gris h4 {
        font-size: 28px;
        letter-spacing: 1px;
    }
    
    main .container .imagenes {
        padding: 20px 10px;
    }
    
    main .container .imagenes p {
        font-size: 16px;
    }
    
    main .container .card h5 {
        font-size: 20px;
        padding: 20px;
    }
}

/* ==================== ANIMACIONES ==================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

main .container > .row {
    animation: fadeInUp 0.8s ease-out;
}

main .container > .row:nth-child(2) {
    animation-delay: 0.2s;
}

main .container > .row:nth-child(3) {
    animation-delay: 0.4s;
}

/*==============================================================================
  FIN DE PÁGINA DE PLATAFORMA / LOGIN
==============================================================================*/

/* ==================== GALERÍA DE FOTOS Y VIDEOS ==================== */

.seccion-galeria-actividades {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #f8f9fa 100%);
    padding: 80px 0;
    margin-top: 50px;
}

/* Título de la Galería */
.icono-galeria-actividades {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #195b37 0%, #0f4571 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 20px rgba(25, 91, 55, 0.3);
}

.icono-galeria-actividades i {
    font-size: 36px;
    color: white;
}

.titulo-galeria-actividades {
    font-family: 'Shanti', 'sans-serif';
    font-size: 38px;
    color: #195b37;
    font-weight: bold;
    margin: 20px 0 15px;
}

.linea-galeria-actividades {
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, #195b37, #0f4571);
    margin: 15px auto;
    border-radius: 2px;
}

.subtitulo-galeria-actividades {
    font-family: 'Roboto', 'sans-serif';
    font-size: 18px;
    color: #6c757d;
    margin: 0;
}

.subtitulo-seccion-galeria {
    font-family: 'Shanti', 'sans-serif';
    font-size: 28px;
    color: #0f4571;
    font-weight: bold;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 3px solid #195b37;
}

/* Items de Galería de Fotos */
.item-galeria-actividades {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: all 0.3s ease;
    background: #000;
}

.item-galeria-actividades:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(25, 91, 55, 0.3);
}

.item-galeria-actividades img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
    transition: all 0.4s ease;
}

.item-galeria-actividades:hover img {
    transform: scale(1.1);
    opacity: 0.8;
}

/* Overlay de las fotos */
.overlay-galeria-actividades {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(25, 91, 55, 0.9) 0%, rgba(15, 69, 113, 0.9) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.item-galeria-actividades:hover .overlay-galeria-actividades {
    opacity: 1;
}

.overlay-galeria-actividades i {
    font-size: 50px;
    color: white;
    animation: pulse-zoom 1.5s infinite;
}

@keyframes pulse-zoom {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Items de Videos */
.item-video-galeria {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    border: 3px solid #195b37;
}

.item-video-galeria:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(25, 91, 55, 0.3);
    border-color: #0f4571;
}

.video-galeria-actividades {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
    background: #000;
}

.caption-video {
    padding: 15px 20px;
    background: linear-gradient(135deg, #195b37 0%, #0f4571 100%);
    color: white;
    font-family: 'Roboto', 'sans-serif';
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
    .seccion-galeria-actividades {
        padding: 60px 0;
    }
    
    .titulo-galeria-actividades {
        font-size: 30px;
    }
    
    .subtitulo-seccion-galeria {
        font-size: 24px;
    }
    
    .item-galeria-actividades img {
        height: 200px;
    }
    
    .video-galeria-actividades {
        height: 250px;
    }
}

@media (max-width: 576px) {
    .titulo-galeria-actividades {
        font-size: 26px;
    }
    
    .item-galeria-actividades img {
        height: 180px;
    }
    
    .video-galeria-actividades {
        height: 200px;
    }
}

/* ==================== FIN GALERÍA DE FOTOS Y VIDEOS ==================== */