/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/ClientSide/css.css to edit this template
*/
/* 
    Created on : Feb 20, 2024, 12:29:35 PM
    Author     : larcejimenez
*/

/* Estilos generales y de fondo */
body {
    text-align: center; /* Centra el texto en el cuerpo de la página */
    background: url("../img/fondo.jpg") repeat center center; /* Establece una imagen de fondo repetida centrada */
    background-size: cover; /* Ajusta el tamaño de la imagen de fondo para cubrir completamente el área */
    font-family: 'Arial', sans-serif; /* Define la familia de fuentes para el texto */
}

/* Contenedor principal */
#container {
    display: flex; /* Utiliza el modelo de caja flexible para el diseño */
    flex-direction: column; /* Establece la dirección de los elementos secundarios en columnas */
    align-items: center; /* Centra los elementos secundarios horizontalmente */
    color: white; /* Letras blancas */
    background-color: rgba(0, 0, 0, 0.9); /* Fondo negro translúcido (ajusta el valor al gusto) */
    max-width: 80%; /* Ancho máximo del contenedor */
    margin: 0 auto; /* Centra el contenedor horizontalmente */
}

/* Reloj y estilos de tiempo */
#reloj, .tiempo {
    padding: 5px; /* Aumenta el padding alrededor del contenido */
    background-color: #3f7536; /* Establece el color de fondo */
    color: #fff; /* Establece el color del texto */
    border-radius: 5px; /* Define las esquinas redondeadas */
}

/* Imagen de compromiso */
.imagen-compromiso {
    max-width: 50%; /* Establece el ancho máximo de la imagen */
    height: auto; /* Mantiene la relación de aspecto de la imagen */
    display: block; /* Convierte la imagen en un elemento de bloque */
    margin: 0 auto; /* Centra la imagen horizontalmente */
}

/* Estilos del botón de mostrar Pop-Up */
#showPopupBtn {
    padding: 10px 20px; /* Aumenta el tamaño del botón ajustando el relleno */
    background-color: #2b2eb5; /* Cambia el color de fondo del botón */
    color: white; /* Cambia el color del texto */
    font-size: 18px; /* Aumenta el tamaño del texto */
    border: none; /* Elimina el borde del botón */
    border-radius: 5px; /* Redondea las esquinas del botón */
    cursor: pointer; /* Cambia el cursor a un puntero cuando se pasa sobre el botón */
    transition: background-color 0.3s; /* Suaviza el cambio de color al pasar el ratón */
}

#showPopupBtn:hover {
    background-color: #45a049; /* Oscurece el color de fondo del botón al pasar el ratón */
}

/* Estilos para el Pop-Up */
#popupContainer {
    position: fixed; /* Establece la posición fija para que el pop-up permanezca en su lugar */
    top: 0; /* Coloca el pop-up en la parte superior */
    left: 0; /* Coloca el pop-up en el lado izquierdo */
    width: 100%; /* Establece el ancho al 100% del viewport */
    height: 100%; /* Establece la altura al 100% del viewport */
    background-color: rgba(0, 0, 0, 0.5); /* Fondo negro translúcido */
    display: none; /* Inicialmente oculto */
    justify-content: center; /* Centra los elementos horizontalmente */
    align-items: center; /* Centra los elementos verticalmente */
    z-index: 9999; /* Índice Z alto para asegurarse de que aparezca encima de otros elementos */
}


#popupContent {
    background-color: white; /* Color de fondo del contenido del pop-up */
    padding: 20px; /* Espacio alrededor del contenido */
    border-radius: 5px; /* Define las esquinas redondeadas */
    width: 50%; /* Ancho del pop-up */
    max-width: 600px; /* Ancho máximo del pop-up */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Sombra para efecto elevado */
}

#popupContent button {
    display: block; /* Hace que cada botón ocupe su propia línea */
    width: 80%; /* Ancho del botón */
    margin: 10px auto; /* Centra los botones horizontalmente y añade espacio vertical */
    padding: 10px; /* Espacio dentro del botón */
    border: none; /* Elimina el borde */
    border-radius: 5px; /* Define las esquinas redondeadas */
    color: white; /* Color del texto */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
}

/* Colores específicos para cada botón */
#popupContent button:nth-child(1) {
    background-color: #e8746f; /* Color del primer botón */
}

#popupContent button:nth-child(2) {
    background-color: #74bced; /* Color del segundo botón */
}

#popupContent button:nth-child(3) {
    background-color: #ebcd73; /* Color del tercer botón */
}

#popupContent button:nth-child(4) {
    background-color: #5cb87f; /* Color del cuarto botón */
}

#popupContent button:nth-child(5) {
    background-color: #b3b3b3; /* Color del quinto botón */
}

.gallery img {
    width: 40%; /* Ancho de las imágenes en la galería */
    height: auto; /* Altura automática para mantener la proporción */
    object-fit: cover; /* Ajusta el contenido de la imagen para cubrir el contenedor */
    display: block; /* Convierte la imagen en un elemento de bloque */
    margin: 0 auto; /* Centra la imagen horizontalmente */
    border-radius: 15px; /* Define las esquinas redondeadas */
}

.carousel-item img {
    max-height: 500px; /* Altura máxima de las imágenes del carrusel */
    width: 75%; /* Ancho de las imágenes del carrusel */
    height: auto; /* Altura automática para mantener la proporción */
    object-fit: cover; /* Ajusta el contenido de la imagen para cubrir el contenedor */
    border-radius: 10px; /* Define las esquinas redondeadas */
}

.tarjeta {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5); /* Sombra de la tarjeta */
    transition: 0.3s; /* Transición suave */
    margin: 15px auto; /* Margen alrededor de la tarjeta y centrado */
    display: flex; /* Dispone los elementos lado a lado */
    align-items: center; /* Alinea verticalmente los elementos */
    justify-content: center; /* Centra los elementos */
    max-width: 600px; /* Ancho máximo de la tarjeta */
    text-align: left; /* Alineación del texto */
    color: black; /*Color de texto de tarjeta*/
    background-color: white; /*Color de fondo de tarjeta*/
    border-radius: 5%; /* Bordes redondeados para crear una imagen circular */
    padding: 5px; /* Aumenta el padding alrededor del contenido */
}

.imagen-tarjeta {
    width: 150px; /* Ancho de la imagen */
    height: 150px; /* Altura de la imagen */
    border-radius: 50%; /* Bordes redondeados para crear una imagen circular */
    margin-right: 20px; /* Margen a la derecha de la imagen */
}

button {
    background-color: #4CAF50; /* Color de fondo del botón */
    color: white; /* Color del texto del botón */
    padding: 10px 24px; /* Relleno del botón */
    margin: 10px 0; /* Margen superior e inferior del botón */
    border: none; /* Sin borde */
    cursor: pointer; /* Cambio de cursor al pasar el ratón */
    border-radius: 5px; /* Bordes redondeados */
}

button:hover {
    background-color: #45a049; /* Cambio de color de fondo al pasar el ratón */
}

iframe {
    max-width: 80%; /* Hace que los iframes se ajusten al ancho del contenedor */
}

/* Media query para dispositivos móviles */
@media (max-width: 768px) {
    #container {
        max-width: 100%; /* Modifica el ancho máximo para dispositivos móviles */
    }

    #popupContent {
        width: 90%; /* Modifica el ancho del pop-up para dispositivos móviles */
    }
}

.rojo {
    color: red; /*color de texto*/
    display: inline; /* Mostrar los elementos en la misma línea */
}

/* Estilos para la galería */

/* La clase ".gallery" se aplica al contenedor de la galería */
.gallery {
    /* Configuración de diseño flexible */
    display: flex; /* Establece el contenedor como un contenedor flexible */
    flex-wrap: wrap; /* Permite que los elementos hijos se envuelvan automáticamente en múltiples líneas */
    gap: 10px; /* Espacio entre los elementos hijos */
    justify-content: center; /* Centra los elementos hijos horizontalmente dentro del contenedor */
}

/* Estilos para las imágenes dentro de la galería */
.gallery img {
    /* Configuración del tamaño de las imágenes */
    width: calc(33% - 10px); /* Establece el ancho de las imágenes al 33% del contenedor, menos el espacio entre ellas */
    height: auto; /* Ajusta automáticamente la altura para mantener la proporción de aspecto */
}

/* Estilos para dispositivos con un ancho máximo de 768px */
@media (max-width: 768px) {
    .gallery img {
        /* Ajuste del tamaño de las imágenes para dispositivos más pequeños */
        width: calc(50% - 10px); /* Establece el ancho de las imágenes al 50% del contenedor, menos el espacio entre ellas */
    }
}

/* Estilos para dispositivos con un ancho máximo de 480px */
@media (max-width: 480px) {
    .gallery img {
        /* Ajuste adicional del tamaño de las imágenes para dispositivos aún más pequeños */
        width: 100%; /* Establece el ancho de las imágenes al 100% del contenedor para que se ajusten al ancho del contenedor */
    }
}