/* Archivo: Paginas/index.css */

body {
    font-family: 'Schibsted Grotesk', sans-serif;
    background-color: #1e1e1e; /* Fondo oscuro */
    color: #ffffff; /* Texto blanco */
    margin: 0;
    padding: 0;
}

.banner {
    width: 100%;
    z-index: 1;
    height: auto; /* Ajustar la altura según la imagen */
    overflow: hidden;
    border-radius: 11px;
    border: 2px solid #00cc99; /* Agregar borde con color verde oscuro */
    box-sizing: border-box; /* Asegura que el borde se incluya en el ancho total */
}

.banner img {
    width: 100%;
    height: 550px;
    display: block;
}

.container {
    display: flex;
    flex-wrap: nowrap; /* Prevent wrapping */
    justify-content: space-between; /* Space out the blocks */
    margin: 20px;
    overflow-x: auto; /* Allow horizontal scrolling if needed */
}

.container section, .coming-soon {
    width: calc(33.33% - 20px); /* Adjust width to fit 3 blocks per row with spacing */
    padding: 20px;
    background-color: #101010; /* Fondo oscuro */
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    margin-bottom: 20px; /* Agregar margen para espaciado */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Espaciar el contenido uniformemente */
    height: 300px; /* Altura fija para bloques uniformes */
}

.coming-soon {
    background-color: #333333; /* Fondo oscuro para el nuevo bloque */
    color: #ffffff; /* Texto blanco */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1.5em;
    margin-bottom: 20px;
    width: calc(33.33% - 20px); /* Ajustar el ancho para alinear en una fila */
}

.coming-soon img {
    max-width: 60%; /* Tamaño ajustado para la imagen */
    height: auto;
    border-radius: 10px;
    margin-bottom: 10px;
}

img {
    width: 100%;
    border-radius: 10px;
}

hr {
    border: none;
    border-top: 2px solid #00cc99; /* Línea verde oscuro */
    margin: 20px 0;
}

.btn {
    background-color: transparent;
    color: #00cc99;
    border: 2px solid #00cc99;
    border-radius: 5px;
    padding: 10px 20px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.btn:hover {
    background-color: #00cc99;
    color: #ffffff;
}

.announcement {
    background-color: #ffcc00; /* Amarillo claro para visibilidad */
    color: #000000; /* Texto negro */
    padding: 10px;
    margin: 20px 0;
    border-radius: 5px;
    font-weight: bold;
}

/*------------------------Particles-----------------------------*/

#particle-container {
    position: relative;
    bottom: 25px;
    width: 10vw;
    height: 10vh;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    opacity: 0.8;
    animation: move linear infinite;
}

@keyframes move {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-10vh);
    }
}
/*----------------------Countdown------------*/
#countdown {
    position: relative; /* Ensure it's positioned correctly */
    top: -440px; /* Adjust this value to move it down from the top */
    right: -55%; /* Adjust this value to move it left from the right edge */
    z-index: 2; /* Ensure it is in front of other elements */
    color: #fff; /* Optional: text color */
}

#countdown-timer {
    font-size: 1.5em;
    font-weight: bold;
}

#countdown-timer p {
    display: inline;
    margin: 0 5px;
    padding: 5px;
    background-color: #333;
    color: #fff;
    border-radius: 5px;
}