/* Estilos para un contenedor general */
/* Establece la altura automática del contenedor */
.container-general{
    
    height: auto;
    margin-top: calc(60/100 * var(--height-header));
}

/* Estilos para el contenedor de bienvenida */
/* Establece una imagen de fondo para el contenedor */
.welcome-container{
    background-image: url("../images/Beauchef851_background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Estilos para el contenedor de información de bienvenida */
/* Establece un color de fondo semitransparente para el contenedor */
.welcome-info-container{
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    height: 70vh;
    width: 70vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

/* Estilos para el título de una lista de tareas (FL: To-Do List en inglés) */
/* Establece el grosor de la fuente del título como negrita */
.titulo_FL{
    font-weight: 600 !important;
}

/* Estilos para el subcontenedor de la cuenta regresiva */
/* Utiliza un contenedor flexible con dirección de columna */
.countdown-subcontainer{
    display: flex;
    flex-direction: column;
}

/* Establece el ancho de la fila de tiempo al 80% del contenedor padre */
.time-row{
    width: 80%;
}

/* Utiliza un contenedor flexible con dirección de columna */
.time-holders{
    display: flex;
    flex-direction: column;
}

/* Estilos para el contenedor de la feria laboral */
/* Utiliza un contenedor flexible */
.feria-laboral-container{
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
}

/* Estilos para el contenedor de transición */
/* Establece un degradado lineal como fondo del contenedor */
.transition-container{
    background-image: linear-gradient(to bottom, #FFFFFF, #DF2112);
    display: flex;
    flex-direction: column;
    height: 100vh;
    color: #FFFFFF;
}

/* Estilos para el contenedor de instituciones */
/* Establece un color de fondo rojo para el contenedor */
.instituciones-container{
    background-color: #DF2112;
    display: flex;
    flex-direction: column;
    color: #FFFFFF;
}

/* Estilos para el contenedor de imágenes reactivo */
/* Establece la posición relativa del contenedor */
.image-reactive-container{
    position: relative;
    display: flex;
    transition: transform 0.3s ease;
    background-color: transparent;
    width: 250px;
    height: 250px;
    justify-content: center;
    align-items: center;
}

/* Estilos para la imagen reactiva */
.reactive-img {
    /* Establecer el tamaño original de la imagen */
    max-width: 100%;
    max-height: 100%;
    width: fit-content;
    height: fit-content;
    object-fit: scale-down;
    transition: transform 0.4s ease; /* Para que la imagen mantenga su proporción y se ajuste dentro del contenedor */
  }

  .texto-hover {
    /* Posicionar el texto abajo del contenedor de la imagen */
    position: absolute;
    top: 95%;
    left: 0;
    width: 100%;
    padding: 10px;
    color: white;
    text-align: center;
    opacity: 0; /* Inicialmente el texto estará oculto */
    transition: opacity 0.4s ease; /* Agregar una transición suave */
  }

  .image-reactive-container:hover .texto-hover {
    color: white;
    opacity: 1; /* Mostrar el texto en hover */
  }

  .image-reactive-container:hover {
    transform: scale(1.1); /* Escalar la imagen al 110% del tamaño original en hover */
  }

  @media (max-width: 576px) { /* Pantallas pequeñas (menos de 576px) */
    .custom-title {
        font-size: 1rem !important; /* Tamaño personalizado para pantallas pequeñas */
    }

    .time-row{
        width: 100%;
    }
}