@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700&family=Share+Tech&display=swap");
* {
    margin: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px; /* Establece el tamaño de fuente raíz */
}

.contenedor {
    width: 100%;
    height: 100vh;
    background-color: rgb(92, 28, 28);
    outline: 4px solid;
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 1.5%;
}

.prueba {
    width: 50px;
}

.nombre-banca {
    background: linear-gradient(
        35deg,
        rgb(233, 233, 233) 22%,
        rgb(241, 241, 241) 22%
    ); /* Gradiente diagonal con una línea divisoria más pronunciada */
    grid-column: 6 / span 6;
    margin-top: 3%;
    grid-row: 1 / span 2;
    margin-bottom: 3vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4.5vh;
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: normal;
    border-radius: 5vh 5vh 0.8vh 0.8vh; /* Añade un borde redondeado */
    outline: 0.3vh dashed rgba(233, 233, 233, 0.4); /* ancho, estilo y color del outline con opacidad */
    padding: 1vh; /* espacio interno del elemento */
    outline-offset: 0.2vh; /* distancia entre el outline y el borde del div */
    box-shadow: 0 0 10px 2px rgba(247, 247, 247, 0.8); /* outer glow */
}

.texto-banca {
    color: #019948;
    grid-column: 6/12;
    margin-top: 3%;
    grid-row: 1/3;
    margin-bottom: 3%;
}

.loterias1 {
    background-color: rgb(255, 255, 255);
    grid-column: 1/5;
    margin-top: 15%;
    grid-row: 1/13;
    margin-bottom: 3%;
}

.loterias2 {
    background-color: rgb(255, 255, 255);
    grid-column: 13/17;
    grid-row: 3/13;
    margin-bottom: 3%;
}

.loterias3 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: rgb(255, 255, 255);
    grid-column: 5/13;
    grid-row: 10/12;
    margin-top: -0.8%;
    border-radius: 2.5vh; /* Añade un borde redondeado */
}

.logo-loterias3 {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
    width: 16vh;
    height: 12vh;
}

.texto-loterias3 {
    color: #454db9;
}

.texto-loterias3 h1 {
    width: 30vw;
    font-size: 2.1vw;
}

.loterias4 {
    background-color: rgb(255, 255, 255);
    grid-column: 5/13;
    grid-row: 12/13;
    margin-top: -1.1%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loteria-contenedor-multiple {
    position: relative;
    display: flex;
    align-items: center;
    background: linear-gradient(
        35deg,
        rgb(228, 228, 228) 22%,
        rgb(236, 236, 236) 22%
    ); /* Gradiente diagonal con una línea divisoria más pronunciada */
    grid-column: 1/5;
    grid-row: 2/3;
    margin-top: 4%;
    margin-left: 3%;
    margin-right: -3%;
    height: 12%;
}

.datos-loteria {
    display: flex;
    align-items: center;
    margin-left: 3%;
}

.resultados {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 1vw;
}

.resultados-singles {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 0.5vw;
}

.bolito {
    position: relative; /* Necesario para posicionar el pseudo-elemento correctamente */
    width: 5.2vh; /* Ajusta este valor según sea necesario */
    height: 5.2vh; /* Igual al width para mantener la forma circular */
    border-radius: 50%; /* Para mantener la forma circular */
    background: linear-gradient(
        to bottom,
        #5e89f5,
        #2e47a5,
        #2c50b3
    ); /* Utiliza tonalidades del azul proporcionado */
    margin-right: 0.6vh;
    margin-left: 0.6vh;
    margin: 0.3vh;
    animation: zoom 2s;
}

.bolito::before {
    content: "";
    position: absolute;
    top: 0;
    left: -150%; /* Empieza fuera del elemento */
    width: 250%; /* Asegura que cubra todo el elemento al pasar */
    height: 100%;
    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.5),
        rgba(255, 255, 255, 0.1)
    );
    transform: skewX(-25deg);
    animation: lightSweep 3s forwards;
    animation-iteration-count: 2;
}

.bolitonoche {
    position: relative; /* Necesario para posicionar el pseudo-elemento correctamente */
    width: 5.2vh; /* Ajusta este valor según sea necesario */
    height: 5.2vh; /* Igual al width para mantener la forma circular */
    border-radius: 50%; /* Para mantener la forma circular */
    background: linear-gradient(
        to bottom,
        #3364df,
        #06195f,
        #112e7e
    ); /* Utiliza tonalidades del azul proporcionado */
    margin-right: 0.6vh;
    margin-left: 0.6vh;
    margin: 0.3vh;
    animation: zoom 2s;
}

.bolitonoche::before {
    content: "";
    position: absolute;
    top: 0;
    left: -150%; /* Empieza fuera del elemento */
    width: 250%; /* Asegura que cubra todo el elemento al pasar */
    height: 100%;
    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.5),
        rgba(255, 255, 255, 0.1)
    );
    transform: skewX(-25deg);
    animation: lightSweep 3s forwards;
    animation-iteration-count: 2;
}

.bolitogris {
    width: 5.2vh; /* Ajusta este valor según sea necesario */
    height: 5.2vh; /* Igual al width para mantener la forma circular */
    border-radius: 50%; /* Para mantener la forma circular */
    background: linear-gradient(
        to bottom,
        #c3cbdd,
        #393f53,
        #30333a
    ); /* Utiliza tonalidades del azul proporcionado */
    margin-right: 0.6vh;
    margin-left: 0.6vh;
    margin: 0.3vh;
}

.bolitogris .numero {
    font-family: "Red Hat Display", sans-serif;
    font-style: italic;
    font-weight: 600;
    color: white;
    font-size: 3.3vh;
}

.bolito-single {
    position: relative; /* Necesario para posicionar el pseudo-elemento correctamente */
    width: 6.2vh; /* Ajusta este valor según sea necesario */
    height: 6.3vh; /* Igual al width para mantener la forma circular */
    border-radius: 50%; /* Para mantener la forma circular */
    overflow: hidden; /* Oculta el contenido que se sale de los bordes */
    background: linear-gradient(
        to bottom,
        #5e89f5,
        #2e47a5,
        #2c50b3
    ); /* Utiliza tonalidades del azul proporcionado */
    margin-right: 0.6vh;
    margin-left: 0.6vh;
    margin: 0.3vh;
    animation: zoom 2s;
}

.bolito-single::before {
    content: "";
    position: absolute;
    top: 0;
    left: -150%; /* Empieza fuera del elemento */
    width: 250%; /* Asegura que cubra todo el elemento al pasar */
    height: 100%;
    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.5),
        rgba(255, 255, 255, 0.1)
    );
    transform: skewX(-25deg);
    animation: lightSweep 3s forwards;
    animation-iteration-count: 2;
}

@keyframes lightSweep {
    0% {
        left: -150%;
    }
    50% {
        left: 150%;
    }
    100% {
        left: 150%;
        opacity: 0;
    }
}

.bolito-singlegris {
    width: 6.2vh; /* Ajusta este valor según sea necesario */
    height: 6.3vh; /* Igual al width para mantener la forma circular */
    border-radius: 50%; /* Para mantener la forma circular */
    /*background: radial-gradient(circle, #1288ac, #0a4658);*/
    background: linear-gradient(
        to bottom,
        #c3cbdd,
        #393f53,
        #30333a
    ); /* Utiliza tonalidades del azul proporcionado */
    margin-right: 0.6vh;
    margin-left: 0.6vh;
    margin: 0.3vh;
}

.bolito .numero {
    font-family: "Red Hat Display", sans-serif;
    font-style: italic;
    font-weight: 600;
    color: white;
    font-size: 3.3vh;
}

.bolitonoche .numero {
    font-family: "Red Hat Display", sans-serif;
    font-style: italic;
    font-weight: 600;
    color: white;
    font-size: 3.3vh;
}

.loteria-contenedor-multiple::after {
    content: "";
    position: absolute;
    bottom: -1.5vh; /* Ajusta este valor para mover la sombra hacia abajo de manera responsiva */
    right: -0.7%; /* Usa porcentaje para mantener la sombra consistente en diferentes tamaños de pantalla */
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0.9vw 0.9vw 0; /* Usa unidades de vista más pequeñas para el tamaño del triángulo */
    border-color: transparent rgb(33, 59, 33) transparent transparent; /* Cambia la sombra a verde sólido */
    transform: rotate(270deg); /* Rotar el triángulo 270 grados */
    z-index: 1; /* Asegura que la sombra esté detrás de todo el contenido */
}

.loteria-contenedor-single::after {
    content: "";
    position: absolute;
    bottom: -1.5vh; /* Ajusta este valor para mover la sombra hacia abajo de manera responsiva */
    right: -0.7%; /* Usa porcentaje para mantener la sombra consistente en diferentes tamaños de pantalla */
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0.9vw 0.9vw 0; /* Usa unidades de vista más pequeñas para el tamaño del triángulo */
    border-color: transparent rgb(33, 59, 33) transparent transparent; /* Cambia la sombra a verde sólido */
    transform: rotate(270deg); /* Rotar el triángulo 270 grados */
    z-index: 1; /* Asegura que la sombra esté detrás de todo el contenido */
}

.loteria-contenedor-single-noshadow::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    transform: rotate(270deg); /* Rotar el triángulo 270 grados */
    z-index: 1; /* Asegura que la sombra esté detrás de todo el contenido */
}

.logo-loteria {
    width: 11vw;
    margin-left: 1%;
}

.loteria-contenedor-single {
    position: relative;
    display: flex;
    align-items: center;
    background: linear-gradient(
        35deg,
        rgb(228, 228, 228) 22%,
        rgb(236, 236, 236) 22%
    ); /* Gradiente diagonal con una línea divisoria más pronunciada */
    grid-column: 1/5;
    grid-row: 2/3;
    margin-top: 4%;
    margin-left: 3%;
    margin-right: -3%;
    height: 12%;
}

.loteria-contenedor-single-noshadow {
    position: relative;
    display: flex;
    align-items: center;
    background: linear-gradient(
        35deg,
        rgb(228, 228, 228) 22%,
        rgb(236, 236, 236) 22%
    ); /* Gradiente diagonal con una línea divisoria más pronunciada */
    grid-column: 1/5;
    grid-row: 2/3;
    margin-top: 4%;
    margin-left: 3%;
    margin-right: -3%;
    height: 12%;
}

.bolito-single .numero {
    font-family: "Red Hat Display", sans-serif;
    font-style: italic;
    font-weight: 600;
    color: white;
    font-size: 3.6vh;
}

.bolito-singlegris .numero {
    font-family: "Red Hat Display", sans-serif;
    font-style: italic;
    font-weight: 600;
    color: white;
    font-size: 3.6vh;
}

.carousel-item {
    height: 55vh; /* Adjust the height as needed */
}
.carousel-item img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

/* Estilos para el borde de metal */
.carousel {
    border: 0.5vh solid transparent; /* Tamaño del borde */
    border-image: linear-gradient(
        45deg,
        #202020,
        #2b2b2b
    ); /* Degradado de metal */
    border-image-slice: 1; /* Dividir el degradado en partes iguales */
    box-shadow: 0 0 5px 2px rgba(99, 99, 99, 0.8); /* outer glow */
}

.slideshow {
    grid-column: 5/13;
    grid-row: 2/10;
    margin-top: 4.5vh;
}

.fecha-hora {
    background: linear-gradient(
        45deg,
        rgb(243, 243, 243) 48%,
        rgb(255, 255, 255) 50%
    ); /* Gradiente diagonal con una línea divisoria más pronunciada */
    grid-column: 13/17;
    margin-top: 6%;
    grid-row: 1/3;
}

.recuadro-rojo {
    background: linear-gradient(
        rgb(255, 7, 7) 40%,
        rgb(230, 0, 0) 60%
    ); /* Gradiente diagonal con una línea divisoria más pronunciada */
    color: white;
    grid-column: 13 / span 4;
    height: 55%;
    grid-row: 1 / span 2;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3.4vh;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
    box-shadow: 0 7px 4px rgba(0, 0, 0, 0.3); /* Sombra inferior elegante */
    border: 3px white solid;
}

.hora {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0.5%;
    font-size: 3.4vh;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
    box-shadow: 0 7px 4px rgba(0, 0, 0, 0.3); /* Sombra inferior elegante */
}

img {
    width: 100%; /* or any custom size */
    height: 100%;
    object-fit: cover;
}

.bg-whitebottom {
    background-color: rgb(236, 236, 236);
    grid-column: 1/17;
    margin-top: 2.3%;
    grid-row: 12/14;
}

.bg-complementario {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(252, 77, 77);
    grid-column: 1/17;
    margin-top: 5.5vh;
    grid-row: 12/14;
}

.logo-divisa {
    width: 3.4vw;
    height: 3.4.2vw;
}

.combustibles-divisas {
    display: flex;
    font-family: "Roboto", sans-serif;
    font-weight: 600;
    font-style: normal;
    color: white;
    font-size: 2.2vh;
    margin-right: 6.5vw;
}

.titulos {
    border-right: 2px solid white; /* Añade el borde en el lado derecho */
    padding-right: 1vh;
}

.titulos {
    display: flex;
    flex-direction: column;
    margin-top: 0.7vh;
}

.titulos .titulo1,
.titulos .titulo2 {
    margin-top: -0.3vh; /* Elimina el margen superior */
    margin-bottom: 0; /* Elimina el margen inferior */
    padding-top: 0; /* Elimina el relleno superior */
    padding-bottom: 0; /* Elimina el relleno inferior */
}

.logo-sorteosrd {
    width: 7vw;
    height: 5vw;
    margin-top: -0.6vh;
    position: absolute;
    top: 90vh; /* Posiciona el elemento 6vh hacia arriba */
    left: 90vw; /* Posiciona el elemento 28vw desde la izquierda */
}

.flare0 {
    position: absolute;
    width: 70vw;
    height: 60vh;
    top: 12vh; /* Posiciona el elemento 4.2vh hacia arriba */
    left: 15vw; /* Posiciona el elemento 84vw desde la izquierda */
    mix-blend-mode: screen; /* Aplica el modo de fusión screen */
    border-radius: 10px; /* Ajusta este valor según lo necesario para suavizar los bordes */
    opacity: 90%;
    overflow: hidden; /* Asegura que la imagen no se salga de los bordes redondeados */
}

.flare1 {
    position: absolute;
    width: 7vw;
    height: 16vh;
    top: -4.2vh; /* Posiciona el elemento 4.2vh hacia arriba */
    left: 93vw; /* Posiciona el elemento 84vw desde la izquierda */
    mix-blend-mode: screen; /* Aplica el modo de fusión screen */
    border-radius: 10px; /* Ajusta este valor según lo necesario para suavizar los bordes */
    overflow: hidden; /* Asegura que la imagen no se salga de los bordes redondeados */
}

.flare6 {
    position: absolute;
    width: 5vw;
    height: 14vh;
    top: -4.4vh; /* Posiciona el elemento 6vh hacia arriba */
    left: 32vw; /* Posiciona el elemento 28vw desde la izquierda */
    mix-blend-mode: screen; /* Aplica el modo de fusión screen */
}

@keyframes moveLeftRight {
    0% {
        left: 30vw;
    }
    50% {
        left: 59vw;
    }
    100% {
        left: 30vw;
    }
}

@keyframes moveRightLeft {
    0% {
        left: 59vw;
    }
    50% {
        left: 35vw;
    }
    100% {
        left: 59vw;
    }
}

.flare7 {
    position: absolute;
    width: 15vw;
    height: 17vh;
    top: 2.8vh; /* Posiciona el elemento 2.8vh hacia arriba */
    left: 43vw; /* Posiciona el elemento 43vw desde la izquierda */
    mix-blend-mode: screen; /* Aplica el modo de fusión screen */
    animation: moveLeftRight 70s infinite; /* La animación durará 10 segundos y se repetirá infinitamente */
}

.flare3 {
    position: absolute;
    width: 10vw;
    height: 12vh;
    top: 70vh; /* Posiciona el elemento 6vh hacia arriba */
    left: 69.5vw; /* Posiciona el elemento 28vw desde la izquierda */
    mix-blend-mode: screen; /* Aplica el modo de fusión screen */
}

.flare8 {
    position: absolute;
    width: 10vw;
    height: 12vh;
    top: 64vh; /* Posiciona el elemento 6vh hacia arriba */
    left: 21vw; /* Posiciona el elemento 28vw desde la izquierda */
    z-index: 1;
    mix-blend-mode: screen; /* Aplica el modo de fusión screen */
}

/* Consultas de medios para pantallas 2K */
@media (min-width: 2560px) {
    .texto-loterias3 h1 {
        font-size: 2.3vw;
    }
    .logo-loterias3 {
        width: 20%;
        height: 85%;
        margin-right: 2%;
    }

    .logo-loteria {
        width: 12vw;
        margin-left: 0.8%;
    }

    .resultados {
        margin-left: -3%;
    }

    .resultados-singles {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-left: -1.5vw;
    }

    .logo-divisa {
        width: 3.4vw;
        height: 3.4.2vw;
        margin-top: 0.5vh;
    }
}

/* Consultas de medios para pantallas 1366x768 */
@media (max-width: 1366px) and (min-width: 1280px) {
    .texto-loterias3 h1 {
        font-size: 2.1vw;
    }
    .logo-loterias3 {
        width: 20%;
        height: 85%;
        margin-right: 2%;
    }

    .resultados {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-left: 0.5vw;
    }

    .logo-loteria {
        width: 11.5vw;
        margin-left: 1%;
    }

    .resultados-singles {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-left: -1.3vw;
    }

    .logo-divisa {
        width: 3.4vw;
        height: 3.4.2vw;
        margin-top: 0.5vh;
    }
}

/* Consultas de medios para pantallas 2K */
@media (min-width: 1366px) {
}

/* CSS */
@keyframes zoom {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

.animacion-zoom {
    animation: zoom 2s;
}

.bolito-single:nth-child(1) {
    animation-delay: 0s; /* Sin retraso para el primer bolito-single */
}

.bolito-single:nth-child(2) {
    animation-delay: 0.5s; /* 0.5 segundos de retraso para el segundo bolito-single */
}

.bolito-single:nth-child(3) {
    animation-delay: 1s; /* 1 segundo de retraso para el tercer bolito-single */
}

.bolito-single:nth-child(1)::before {
    animation-delay: 0s; /* Sin retraso para el primer bolito-single */
}

.bolito-single:nth-child(2)::before {
    animation-delay: 0.5s; /* 0.5 segundos de retraso para el segundo bolito-single */
}

.bolito-single:nth-child(3)::before {
    animation-delay: 1s; /* 1 segundo de retraso para el tercer bolito-single */
}

/* Añadir delay a bolito */
.bolito:nth-child(1) {
    animation-delay: 0s;
}

.bolito:nth-child(2) {
    animation-delay: 0.5s;
}

.bolito:nth-child(3) {
    animation-delay: 1s;
}

.bolito:nth-child(1)::before {
    animation-delay: 0s;
}

.bolito:nth-child(2)::before {
    animation-delay: 0.5s;
}

.bolito:nth-child(3)::before {
    animation-delay: 1s;
}

/* Añadir delay a bolitonoche */
.bolitonoche:nth-child(1) {
    animation-delay: 0s;
}

.bolitonoche:nth-child(2) {
    animation-delay: 0.5s;
}

.bolitonoche:nth-child(3) {
    animation-delay: 1s;
}

.bolitonoche:nth-child(1)::before {
    animation-delay: 0s;
}

.bolitonoche:nth-child(2)::before {
    animation-delay: 0.5s;
}

.bolitonoche:nth-child(3)::before {
    animation-delay: 1s;
}