@font-face {
    font-family: "Sukhumvit Set";
    src: url("fonts/sukhumvitset-thin.ttf") format("truetype");
}
body {
    font-family: "Sukhumvit Set", sans-serif;
    background-color: rgb(44, 44, 44);
}
main {
    font-family: "Sukhumvit Set", sans-serif;
    color: hsl(34, 59%, 46%);
    background-color:rgb(44, 44, 44); /* Cambia el color según tus preferencias */
    padding: 20px; /* Ajusta el relleno según tus necesidades */
}
/* ------------------------------------------------------------------------------------------------------------------- */
.navbar {
    height: 70px; /* Ajusta la altura según tus necesidades */
    border-bottom: 2px solid hsl(34, 62%, 36%) !important; /* Borde inferior rojo de 4px */
}

.custom-navbar {
    background-color:rgb(44, 44, 44); /* Cambia esto al color que desees */
}
.navbar-collapse {
    background-color: rgb(44,44,44); /* Cambia esto al color que desees del menú desplegable principal   */
    border-radius: 4px; /* Bordes redondeados */
    padding: 10px; /* Espacio interno */
    border: #0f0b0b;
}
.custom-bg {
    background-color:gray; /* Cambia esto al color que desees */
    color: lab(56.64% 31.17 54.33);
    border: 1px solid hwb(27 15% 30%); /* Cambia esto al color que desees para las líneas */
}
.custom-text:hover {
    color: hsl(44, 50%, 46%); /* Cambia esto al color que desees al pasar el puntero */
}

.custom-text {
    color: hsl(34, 62%, 36%);
    font-size: 1.3rem;
    font-family: "Sukhumvit Set", sans-serif; /* Cambia 'Arial' a la fuente que desees */
    font-weight: bold;
    text-shadow: 1px 1px 2px hsla(0, 0%, 0%, 0.8); /* Sombra negra */
}

.custom-text:active,
.custom-text:focus {
    color: lch(52.93% 46.65 57.43); /* Cambia esto al color que desees al hacer clic o al enfocar */
}

button:focus,
button:active {
    background-color: hsl(34, 62%, 36%); /* Cambia esto al color que desees para el fondo */
    color: #b8862b; /* Cambia el color del texto */
    outline: none; /* Elimina el borde de enfoque predeterminado */
    border: 1px solid hsl(34, 62%, 46%); /* Agrega un borde para resaltar el botón */
}


/* Clase personalizada para cambiar el color de fondo del menú desplegable */
.dropdown-menu {
    background-color: lch(32.75% 0 296.81); /* Cambia esto al color que desees para el fondo del menú */
    font-size: 0.5rem; /* Ajusta el tamaño de la fuente */
}
.dropdown-menu ::selection {
    background-color: hsla(22, 71%, 49%, 0.829); /* Cambia esto al color que desees para la selección del texto */
    color: lab(90.21% -65.48 86.19 / 0.795); /* Cambia esto al color que desees para el texto seleccionado */
}
.dropdown-menu a,
.dropdown-menu button {
    font-size: 1.1rem; /* Ajusta el tamaño de la fuente para los elementos interactivos */
}

.dropdown-menu a:focus,
.dropdown-menu button:focus {
    background-color: hsl(34, 32%, 38%); /* Cambia esto al color que desees para el fondo al hacer focus */
    color:  hsla(22, 100%, 50%, 0.829); /* Cambia esto al color del texto al hacer focus */
    outline: none; /* Elimina el borde de enfoque predeterminado si es necesario */
}
.dropdown-menu a:hover,
.dropdown-menu button:hover {
    background-color: hwb(0 13% 86%); /* Fondo blanco al pasar el puntero */
    color: rgb(224, 120, 72); /* Cambia el color del texto al negro para contraste */
    outline: none; /* Elimina el borde de enfoque si es necesario */
}
.col {
    text-align: center;
}

/* ------------------------------------------------------------------------------------------------------------------- */

#tituloGaleria {
    color: hsl(34, 62%, 36%);
    font-size: 2.5rem;
    font-family: "Sukhumvit Set";
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px; /* Espacio entre el título y la galería */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Sombra negra */
}
.galeria {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.galeria .card {
    background-color: rgb(44, 44, 44);
    /*color: #fff;*/
    width: calc(33.33% - 5px);
    margin-bottom: 5px;
    /*box-sizing: border-box;*/
    /*border-color: #1f1e1e;*/
    border-radius: 8px;
    border: none;
    padding:10px;
    /*overflow: hidden;*
    /* Para que las esquinas redondeadas se apliquen correctamente */
    position: relative;
    /*box-shadow: 0 4px 8px rgb(0, 0, 0);*/
    transition: box-shadow 0.3s ease;
    /* Transición suave para el efecto de sombra */
}

.galeria .card img {
    width: 75%;
    border-radius: 4px;
    transition: transform 0.3s ease;
    box-shadow: 0 4px 8px rgb(0, 0, 0);
    /* Transición suave para el efecto de escala */
}

.galeria .card:hover img {
    transform: scale(1.03);
    /* Efecto de escala al pasar el ratón */
}

.card-body {
    padding: 15
    px;
    background-color: rgb(44, 44, 44);
    border-radius: 6px;
}

.card-text {
    color: #000000;
    font-weight: 100;
}

.card-img-top {
    margin: auto;
    display: block;
}
#myModal {
    display: none; /* Oculta el modal por defecto */
    position: fixed;
    z-index: 1050; /* Nivel de superposición */
    left: 0;
    top: 0;
    width: 100vw; /* Ocupa todo el ancho visible */
    height: 100vh; /* Ocupa todo el alto visible */
    background-color: rgba(0, 0, 0, 0.9); /* Fondo oscuro */
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Apila los elementos en columna */
    overflow: hidden; /* Evita barras de desplazamiento */
}

#imgModal {
        max-width: 100%; /* Máximo ancho: 90% del ancho visible */
        max-height: 100%; /* Máximo alto: 90% del alto visible */
        object-fit: contain; /* Ajusta la imagen sin deformarla */
        border: 2px solid #0f0b0b; /* Borde blanco para la imagen */
        display: block;
        margin: 0 auto; /* Centra la imagen horizontalmente */
        margin-top: 30px; /* Ajusta la posición vertical de la imagen */
}

#caption {
    text-align: center;
    color: #fff; /* Texto blanco para contraste */
    margin-top: 10px; /* Espacio entre la imagen y el texto */
    font-size: 16px; /* Ajusta el tamaño del texto */
    max-width: 90%; /* Asegura que el texto no exceda el ancho de la imagen */
    word-wrap: break-word; /* Permite que el texto se ajuste si es muy largo */
    margin: 0 auto; /* Centra la imagen horizontalmente */
}

.close {
    position: absolute;
    top: 10px; /* Posición desde la parte superior */
    right: 20px; /* Posición desde la parte derecha */
    color: white;
    font-size: 30px; /* Tamaño del botón */
    font-weight: bold;
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
}

.galeria {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.galeria .card {
    background-color: rgb(44, 44, 44);
    /*color: #fff;*/
    width: calc(33.33% - 5px);
    margin-bottom: 5px;
    /*box-sizing: border-box;*/
    /*border-color: #1f1e1e;*/
    border-radius: 8px;
    border: none;
    padding:10px;
    /*overflow: hidden;*
    /* Para que las esquinas redondeadas se apliquen correctamente */
    position: relative;
    /*box-shadow: 0 4px 8px rgb(0, 0, 0);*/
    transition: box-shadow 0.3s ease;
    /* Transición suave para el efecto de sombra */
}

.galeria .card img {
    width: 75%;
    border-radius: 4px;
    transition: transform 0.3s ease;
    box-shadow: 0 4px 8px rgb(0, 0, 0);
    /* Transición suave para el efecto de escala */
}

.galeria .card:hover img {
    transform: scale(1.03);
    /* Efecto de escala al pasar el ratón */
}

.card-body {
    padding: 15
    px;
    background-color: rgb(44, 44, 44);
    border-radius: 6px;
}

.card-text {
    color: #000000;
    font-weight: 100;
}

.card-img-top {
    margin: auto;
    display: block;
}