/*INICIO*/

section#inicio .inicio{
    position: relative;
    height: 100vh; 
    display: flex;
    justify-content: center; 
    align-items: center; 
    z-index: 1;
}

.img-container {
    position: relative;
    width: 100%; 
    height: 100%;
    overflow: hidden; 
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('/assets/img/bg-inicio.jpeg');
    background-size: cover;
    background-repeat: no-repeat; 
    background-position: center; 
}

.centered-image {
    position: absolute; 
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%); 
    z-index: 2; 
    max-width: 75vw; 
    min-width: 325px;
}

@media screen and (min-width:768px) {
    .centered-image{
        max-width: 30vw;
    }
}

.abierto-cerrado {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3; 
    padding: 1rem 2rem;
    border-radius: 10px;
    font-size: var(--tamaño-fuente-normal);
    font-weight: bold;
    color: var(--texto-secundario);
}

@media screen and (min-width:768px) {
    .centered-image{
        max-width: 35vw;
    }

    .abierto-cerrado{
        top: 65%;
        left: 50%;
        transform: translateX(-50%);
    }
}

.abierto {
    background-color: rgb(97, 147, 68);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.2), 0 0 24px rgb(97, 147, 68);
    color: #f1f1f1;
    padding: 20px 25px; /* Añadir relleno para mejorar la legibilidad */
    border-radius: 8px; /* Opcional: bordes redondeados para un mejor aspecto */
}

.cerrado {
    background-color: #dc3545;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.2), 0 0 24px #dc3545;
    color: #ffffff; /* Asegúrate de que el texto sea blanco para buen contraste */
    padding: 20px 25px; /* Añadir relleno para mejorar la legibilidad */
    border-radius: 8px; /* Opcional: bordes redondeados para un mejor aspecto */
}