/* CSS STYLES
UNIVERSAL - WEBS DI
AUTHOR: M. en C. OMAR AGNI G. */

@charset "UTF-8";

:root {
	--azul-marino-overlay: rgba(0, 31, 63, 0.9);
	--azul-header: #223575;
	--dorado: #FFD700;
	--ostion: #F4F4F4;
}

html{
	scroll-padding-top: 160px;
	scroll-behavior: smooth;
}

body {
            color: #036;
            margin: 5;
            overflow-x: hidden;
        }

.sticky-header { 
	position: sticky; 
	top: 0; 
	z-index: 1020; 
	background-color: var(--ostion) !important;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2); 
}

.logo-img { 
	height: 60px; 
	width: auto; 
	margin-right: 15px; 
}

/* Estilos para el contador */

#ContadorRegresivoPET {
	color: #fff;
	background: #27C4B9;
	padding: 30px;
	border-radius: 15px;
	display: inline-block;
	text-align: center;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr; /* Una columna por defecto */
	gap: 10px; /* Espacio entre las filas */
}

.contador-digits {
	font-size: 50px;
	transition: transform 0.5s ease-in-out;
}
.countdown {
	font-size: 2rem;
}

/* Animación de los números */

.contador-digits.animate {
	transform: scale(1.3);
}

#contador div {
	text-align: center;
}

@media(min-width: 768px) {
	#contador {
		grid-template-columns: repeat(4, 1fr); /* Cuatro columnas en pantallas grandes */
	}
}

/* Navbar */

.navbar-light .navbar-nav .nav-link { 
	/*color: white !important; */
	color: #039 !important;
}

/* Barra de redes sociales */
.social-bar { 
	background: #fff; 
}

/* Ajuste del Slider para no deformar imágenes */

.carousel-control-prev-icon, .carousel-control-next-icon {
	background-color: rgba(0, 0, 0, 0.3); /* Un pequeño fondo oscuro circular */
	border-radius: 50%;
	padding: 20px;
	background-size: 50%;
}
	
.carousel-item img { 
	width: 100%; 
	height: 60h; /* 500px;  Ajuste de altura */
	object-fit: contain;
	background: #000; /* #f8f9fa; Versión inicial */ 
}

@media (max-width: 768px) {
	.carousel-item img {
		height: 300px; /* Altura más baja para móviles */
	}
}

/* Personalización Lightbox Azul Marino */

.glightbox-container .goverlay { 
	background: var(--azul-marino-overlay) !important;
}

.img-galeria {
    padding: 10px !important;
    background-color: transparent; 
}

/* FOOTER */

footer { 
	background: #223575;  /* GRIS OSCURO */
	color: #fff; 
	padding: 40px 0; 
}

.footer-logo { 
	height: 120px; 
}

footer a {
	color: #ffffff !important;
	text-decoration: none;
	transition: color 0.3s ease;
}

footer a:visited, footer a:hover {
	color: var(--dorado) !important;
}

/* NavBar */

@media (min-width: 992px) { 
.navbar-nav .nav-item.dropdown:hover > .dropdown-menu {
	display: block;
	margin-top: 0; 
}

/* Submenús laterales */

.dropdown-submenu {
	position: relative;
}

.dropdown-submenu .dropdown-menu {
	top: 0;
	left: 100%;
	margin-top: -1px;
	display: none;
}

.dropdown-submenu:hover > .dropdown-menu {
	display: block;
}
    
.dropdown-menu {
	animation: fadeIn 0.3s;
}
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(10px); 
}

to { 
	opacity: 1; 
	transform: translateY(0); 
}
}

/* Estilos para la Galería en Grid */

.gallery-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 15px; 
}

@media (max-width: 992px) {
    .gallery-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .gallery-container {
        grid-template-columns: 1fr;
    }
}

/* Estilo de las imágenes */
.gallery-item {
    display: block;
    height: 250px; 
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    transition: transform 0.4s ease;
}

.gallery-item:hover img {
    transform: scale(1.1); 
}