@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');




:root {
  --letra-Titulo: 'Lexend', sans-serif;
  --letra-Parrafo: 'Poppins', sans-serif;
  --verde-Claro: #80BC00;
  --verde-Oscuro: #00953B;
  --gris: #808080;
  --blanco: #fff;
  --azul-oscuro: #010f53;
  --preload: #f5f4f4;
  --base-font-size: 50px;
  --i: '12';
}




body {
  overflow-x: hidden;
  background-color: #FFFFFF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3CradialGradient id='a' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23E8E8E8'/%3E%3Cstop offset='1' stop-color='%23FFFFFF'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='750' x2='1550' y2='750'%3E%3Cstop offset='0' stop-color='%23f4f4f4'/%3E%3Cstop offset='1' stop-color='%23FFFFFF'/%3E%3C/linearGradient%3E%3Cpath id='s' fill='url(%23b)' d='M1549.2 51.6c-5.4 99.1-20.2 197.6-44.2 293.6c-24.1 96-57.4 189.4-99.3 278.6c-41.9 89.2-92.4 174.1-150.3 253.3c-58 79.2-123.4 152.6-195.1 219c-71.7 66.4-149.6 125.8-232.2 177.2c-82.7 51.4-170.1 94.7-260.7 129.1c-90.6 34.4-184.4 60-279.5 76.3C192.6 1495 96.1 1502 0 1500c96.1-2.1 191.8-13.3 285.4-33.6c93.6-20.2 185-49.5 272.5-87.2c87.6-37.7 171.3-83.8 249.6-137.3c78.4-53.5 151.5-114.5 217.9-181.7c66.5-67.2 126.4-140.7 178.6-218.9c52.3-78.3 96.9-161.4 133-247.9c36.1-86.5 63.8-176.2 82.6-267.6c18.8-91.4 28.6-184.4 29.6-277.4c0.3-27.6 23.2-48.7 50.8-48.4s49.5 21.8 49.2 49.5c0 0.7 0 1.3-0.1 2L1549.2 51.6z'/%3E%3Cg id='g'%3E%3Cuse href='%23s' transform='scale(0.12) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.2) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.25) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(0.3) rotate(-20)'/%3E%3Cuse href='%23s' transform='scale(0.4) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(0.5) rotate(20)'/%3E%3Cuse href='%23s' transform='scale(0.6) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.7) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.835) rotate(-40)'/%3E%3Cuse href='%23s' transform='scale(0.9) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(1.05) rotate(25)'/%3E%3Cuse href='%23s' transform='scale(1.2) rotate(8)'/%3E%3Cuse href='%23s' transform='scale(1.333) rotate(-60)'/%3E%3Cuse href='%23s' transform='scale(1.45) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(1.6) rotate(10)'/%3E%3C/g%3E%3C/defs%3E%3Cg transform='rotate(0 0 0)'%3E%3Cg transform='rotate(0 0 0)'%3E%3Ccircle fill='url(%23a)' r='3000'/%3E%3Cg opacity='0.5'%3E%3Ccircle fill='url(%23a)' r='2000'/%3E%3Ccircle fill='url(%23a)' r='1800'/%3E%3Ccircle fill='url(%23a)' r='1700'/%3E%3Ccircle fill='url(%23a)' r='1651'/%3E%3Ccircle fill='url(%23a)' r='1450'/%3E%3Ccircle fill='url(%23a)' r='1250'/%3E%3Ccircle fill='url(%23a)' r='1175'/%3E%3Ccircle fill='url(%23a)' r='900'/%3E%3Ccircle fill='url(%23a)' r='750'/%3E%3Ccircle fill='url(%23a)' r='500'/%3E%3Ccircle fill='url(%23a)' r='380'/%3E%3Ccircle fill='url(%23a)' r='250'/%3E%3C/g%3E%3Cg transform='rotate(0 0 0)'%3E%3Cuse href='%23g' transform='rotate(10)'/%3E%3Cuse href='%23g' transform='rotate(120)'/%3E%3Cuse href='%23g' transform='rotate(240)'/%3E%3C/g%3E%3Ccircle fill-opacity='0.1' fill='url(%23a)' r='3000'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: cover;
  max-width: 2200px;
  margin: auto;
}

body::-webkit-scrollbar {
  width: 15px;
  background-color: var(--blanco);

}

body::-webkit-scrollbar-thumb {
  background: #6b6a6a;
  border-radius: 20px;

}

body::-webkit-scrollbar:hover {
  background-color: var(--blanco);
}

.centro {
  height: 100vh;
  padding: 0px;
  margin: 0px;
  background-position-y: 0px;
  /* background-position: center; */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
}

.centro .row {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
}

.centro .row .ruleta {
  display: flex;
  place-content: center;
  place-items: center;
  flex-direction: column;
  gap: 20px;
  /* background-color: #96693c29; */
  /* background-color: rgb(92, 91, 91); */
  /* opacity: 0.5; */
  backdrop-filter: blur(2px);
  clip-path: polygon(80% 0%, 100% 50%, 80% 100%, 0% 100%, 0 50%, 0% 0%);
  position: relative;
}

.centro .row .ruleta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  z-index: -1;
}


.conterul {
  width: max-content;
  height: max-content;
  position: relative;
}

.conterul::after {
  position: absolute;
  left: -80px;
  width: 150px;
  height: 120px;
  content: "";
  z-index: -1;
  top: 0px;
  bottom: 0px;
  margin: auto 0;
  background-image: url("../../assets/img/recursos/tronco.png");
  background-size: contain;
  background-repeat: no-repeat;
}

.conterul::before {
  position: absolute;
  right: -110px;
  width: 150px;
  height: 120px;
  content: "";
  z-index: -1;
  top: 0px;
  bottom: 0px;
  margin: auto 0;
  background-image: url("../../assets/img/recursos/tronco.png");
  background-size: contain;
  background-repeat: no-repeat;

}

#flecha {
  position: absolute;
  top: 0px;
  bottom: 0px;
  margin: auto 0;
  left: -60px;
  width: 80px;
  height: 80px;
  background-image: url("../../assets/img/recursos/flecha-correcta.png");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1;


  /* animation: mover 0.3s linear infinite; */
}

@keyframes mover {
  0% {
    transform: translateY(0%);
  }

  50% {
    transform: translateY(5px);
  }

  100% {
    transform: translateY(0%);
  }
}

/* Estilos CSS para la ruleta */
#ruleta-container {
  width: 350px;
  /* Ancho de la ruleta */
  height: 450px;
  /* Alto de la ruleta */
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.427);
  position: relative;
  margin: 0 auto;
  overflow-y: hidden;
  perspective: -1000px;
  /* Profundidad de la perspectiva */
  border-radius: 10px;
}



#nombresRuleta {
  list-style-type: none;
  padding: 0px;
  margin: 0;
  /* position: absolute; */
  overflow: hidden;
  top: 0;
  transform-style: preserve-3d;
  /* Preserva la perspectiva 3D */
}

@keyframes girarInfinito {
  0% {
    transform: translateY(0%);
  }

  100% {
    transform: translateY(-100%);
  }
}

#nombresRuleta li {
  font-size: 1.2rem;
  text-align: center;
  width: 100%;
  padding: 10px 40px;
  font-family: var(--letra-Titulo);
  font-weight: 400;
  margin-bottom: -2px;
  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.3);
  height: 90px;
  display: flex;
  place-content: center;
  place-items: center;
}


#primerNombre {
  display: flex;
  place-content: center;
  place-items: center;
}


#primerNombre2 {
  display: flex;
  place-content: center;
  place-items: center;
}


/* Efecto de escala y sombra al pasar el ratón por encima */
#nombresRuleta li:hover {
  /* transform: scale(1.02); Escala y rota al pasar el ratón por encima */
  /* box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.3); Sombra al pasar el ratón por encima */
  cursor: pointer;
}

#girar {
  background-color: #fff;
  padding: 20px;
  font-family: var(--letra-Titulo);
  text-align: center;
  font-weight: 800;
  font-size: 1.5rem;
  color: #545454;
  border-radius: 10px;
  border: none;
  outline: none;
  width: 300px;
  /* position: absolute; */
  transition: 0.2s ease-in-out;
}

#nombresRuletaRegalo {
  list-style-type: none;
  padding: 0px;
  margin: 0;
  /* position: absolute; */
  overflow: hidden;
  top: 0;
  transform-style: preserve-3d;
  /* Preserva la perspectiva 3D */
}

#nombresRuletaRegalo li {
  font-size: 1.2rem;
  text-align: center;
  width: 100%;
  padding: 10px 40px;
  font-family: var(--letra-Titulo);
  font-weight: 400;
  margin-bottom: -2px;
  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.3);
  height: 90px;
  display: flex;
  place-content: center;
  place-items: center;
}


#girar:hover {
  transform: scale(1.03);
}

.centro .row .respuesta {
  display: flex;
  place-content: center;
  place-items: center;
}

.centro .row .respuesta .rescentro {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 20px;
  height: 400px;
  width: 600px;
  font-family: var(--letra-Titulo);
  color: #ffffff;
  /* background-image: url("../../assets/img/recursos/globos.png"); */
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left top;
  padding: 50px;
  border-radius: 10px;
  backdrop-filter: blur(5px);
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.411);
  position: relative;
  overflow: hidden;
  /* clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); */
}

.centro .row .respuesta .rescentro ::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  z-index: -1;
}

.centro .row .respuesta .rescentro h1 {
  font-size: 2rem;
  font-weight: 800;
}

.centro .row .respuesta .rescentro p {
  font-size: 2rem;
  font-weight: 400;
  padding: 10px;
  border-radius: 5px;
  text-align: center;
}

.explosion {
  background-image: url("../../assets/img/recursos/guau.png");
  width: 300px;
  height: 400px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: 0px;
  left: 0px;
  margin: auto;
  z-index: 999;
  animation: gua 1s linear;
}

@keyframes gua {
  0% {
    transform: scale(1.3);
    opacity: 0;
  }

  100% {
    transform: scale(1.5);
    opacity: 1;
  }
}

.volver {
  padding: 10px;
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: rgb(255, 255, 255);
  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.57);
  z-index: 999;
  font-size: 3rem;
  height: auto;
  display: flex;
  place-content: center;
  place-items: center;
  border-radius: 10px;
  color: #373737;
  transition: 0.2s ease-in-out;
}

.volver:hover {
  transform: scale(1.03);
}

.lista_personas {
  padding: 10px;
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgb(254, 254, 254);
  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.57);
  z-index: 999;
  font-size: 3rem;
  height: auto;
  display: flex;
  place-content: center;
  place-items: center;
  border-radius: 10px;
  color: #373737;
  transition: 0.2s ease-in-out;

}

.lista_personas:hover {
  transform: scale(1.03);
}





/* FONDO ATRAS  */

.bienvenido {
  background-color: #0D182D;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%230f1c34' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23111f3b' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23132341' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23152648' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23172A4F' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23152648' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23132341' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23111f3b' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%230f1c34' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%230D182D' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: cover;
  height: 100vh;
  overflow-y: hidden;
  overflow-x: hidden;
  position: relative;
}

.burbujas {
  display: flex;
  position: absolute;
  height: 100vh;
  justify-content: center;
}

.burbujas span {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: #4fc3dc;
  margin: 0 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 10px #4fc3dc44,
    0 0 50px #4fc3dc,
    0 0 100px #4fc3dc;
  animation: animate 15s linear infinite;
  animation-duration: calc(125s / var(--i));
}

.burbujas span:nth-child(even) {

  background-color: #ff2d75;
  box-shadow: 0 0 0 10px #ff2d7544,
    0 0 50px #ff2d75,
    0 0 100px #ff2d75;

}

@keyframes animate {

  0% {
    transform: translateY(-50vh) scale(1);
  }

  50% {
    transform: translateY(100vh) scale(0);
  }

  100% {
    transform: translateY(-10vh) scale(1);
  }

}

.inicio {
  z-index: 99;
  display: flex;
  height: 100vh;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.inicio div {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 30px;
  flex-wrap: wrap;
  backdrop-filter: blur(5px);
}

.inicio div h1 {
  font-size: var(--letra-Titulo);
  font-size: 6rem;
  color: var(--blanco);
  font-weight: 800;
  width: 100%;
  border-bottom: 5px double var(--blanco);
  padding-bottom: 10px;
}

.inicio div .a {
  font-size: var(--letra-Titulo);
  font-size: 1.5rem;
  background-color: var(--blanco);
  padding: 20px 30px;
  border-radius: 10px;
  color: var(--azul-oscuro);
  text-decoration: none;
  font-weight: 800;
  border: 4px double var(--blanco);
  transition: 0.2s ease-in-out;
}

.inicio div .a:hover {
  background-color: transparent;
  color: var(--blanco);
}

/* COFIGURACION */

.config {
  padding: 50px;
  margin: 0px;
}


.config .row {
  height: 100%;
  margin: 0px;
}

.config .row .configcol {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.config .row .configcol h1 {
  margin: 0px;
  background-color: var(--gris);
  color: var(--blanco);
  font-family: var(--letra-Titulo);
  font-size: 2rem;
  font-weight: 800;
  text-align: center;
  padding: 20px;
  margin-bottom: 20px;
}

.restablecer{
  background-color: var(--verde-Claro);
  color: var(--blanco);
  display: flex;
  gap: 10px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-family: var(--letra-Titulo);
  width: max-content;
  padding: 10px;
  font-size: 1.2rem;
  font-weight: 800;
  border: none;
  border-radius: 5px;
}

.config .row .configcol form {
  padding: 10px;
  font-family: var(--letra-Titulo);
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-bottom: 8px double var(--gris);
  padding-bottom: 50px;
}

.config .row .configcol form a{
  background-color: rgb(5, 94, 0);
  width: max-content;
  padding: 10px 20px;
  color: var(--blanco);
  text-decoration: none;
}

.config .row .configcol form label{
  font-size: 1.5rem;
}

.config .row .configcol form  .secciones{
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.config .row .configcol form  .secciones h2{
  background-color: var(--verde-Oscuro);
  color: var(--blanco);
  font-weight: 800;
  padding: 10px;
}

.enviar {
  background-color: var(--azul-oscuro);
  color: var(--blanco);
  padding: 10px 20px;
  border-radius: 5px;
  width: max-content;
  margin-top: 20px;

}

table{
  padding-top: 20px;
  z-index: 99;
}

table th{
  background-color: var(--azul-oscuro) !important;
  color: var(--blanco);
}

.confeti{
  mix-blend-mode: multiply;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -99;
}

.titulo{
  text-align: center;
  background-color: var(--blanco);
  padding: 10px 20px;
  font-family: var(--letra-Titulo);
  font-weight: 800;
}

#regalos {
  position: absolute !important;
  top: -1600px;
  transition: 0.5s ease-in-out;
}

#ganador{
  width: 100%;
  text-align: center;
  background-color: var(--blanco);
  color: #d34b4b;
}

.girar_volver {
  background-color:  #ffffff;
  padding: 20px;
  font-family: var(--letra-Titulo);
  text-align: center;
  font-weight: 800;
  font-size: 1.5rem;
  color: #d34b4b;
  border-radius: 10px;
  border: none;
  outline: none;
  width: 300px;
  /* position: absolute; */
  transition: 0.2s ease-in-out;
  text-align: center;
  text-decoration: none;
}

.validacion_persona{
    position: fixed;
    left: 0px;
    top: 0px;
    background-image: url("../img/recursos/fest.jpg");
    background-size: cover;
    z-index: 999;
    height: 100vh;
    width: 100%;
    transition: 0.5s ease-in-out;
}

.validacion_persona .row{
    height: 100%;
    width: 100%;
}

.validacion_persona .row div{
    height: max-content;
    width: 50%;
    margin: auto;
    background-color: #00000062;
    backdrop-filter: blur(5px);
    padding: 40px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.validacion_persona .row div h3{
    font-family: var(--letra-Titulo);
    font-size: 3rem;
    color: var(--blanco);
    text-align: center;
    margin-bottom: 40px;
}

.validacion_persona .row div input{
    width: 70%;
    margin: auto;
    font-size: 2rem;
    font-family: var(--letra-Titulo);
    text-align: center;
}

.validacion_persona .row div button{
    margin: auto;
    font-size: 2rem;
    font-family: var(--letra-Titulo);
    text-align: center;
    margin-top: 40px;
    background-color: #4fc3dc;
    color: var(--blanco);
}





@media screen and (min-width: 1000px) and (max-width:1650px) {

  body::-webkit-scrollbar {
    width: 8px;
    background-color: var(--blanco);

  }


  .centro .row .ruleta {
    display: flex;
    place-content: center;
    place-items: center;
    flex-direction: column;
    gap: 20px;
    background-color: #963c4e29;

    backdrop-filter: blur(5px);
    clip-path: polygon(80% 0%, 100% 50%, 80% 100%, 0% 100%, 0 50%, 0% 0%);
  }



  .conterul::after {
    left: -50px;
    width: 80px;
    height: 90px;
  }

  .conterul::before {

    right: -50px;
    width: 80px;
    height: 90px;

  }

  #flecha {
    left: -30px;
    width: 40px;
    height: 40px;
  }


  /* Estilos CSS para la ruleta */
  #ruleta-container {
    width: 250px;
    height: 320px;
  }


  #nombresRuleta li {
    font-size: 0.8rem;
    padding: 10px 30px;
    margin-bottom: -2px;
    height: 65px;
    /* box-shadow: 3px 3px 3px 3px #c6c6c6; */
  }

  #nombresRuletaRegalo li {
    font-size: 0.8rem;
    padding: 10px 30px;
    margin-bottom: -2px;
    height: 65px;
  }


  #girar {
    padding: 10px;
    font-size: 0.9rem;
    width: 100px;
  }

  .girar_volver {
    padding: 10px;
    font-size: 0.9rem;
    width: 100px;
  }


  .centro .row .respuesta .rescentro {

    gap: 10px;
    height: 250px;
    width: 400px;
    padding: 30px;
  }

  .centro .row .respuesta .rescentro h1 {
    font-size: 1.5rem;

  }

  .centro .row .respuesta .rescentro p {
    font-size: 0.9rem;
  }

  .explosion {
    width: 200px;
    height: 300px;
  }


  .volver {
    font-size: 2rem;
  }

  .lista_personas {
    font-size: 2rem;
  }


  /* FONDO ATRAS  */


  .burbujas span {
    width: 30px;
    height: 30px;
    margin: 0 5px;
  }

  .inicio div {
    gap: 10px;
  }

  .inicio div h1 {
    font-size: 3rem;
    border-bottom: 5px double var(--blanco);
    padding-bottom: 10px;
  }

  .inicio div .a {
    font-size: 1rem;
    padding: 10px 20px;
    border-radius: 10px;
    border: 4px double var(--blanco);
  }


}

@media screen and (min-width: 650px) and (max-width:990px) {

    .config {
        padding: 50px 20px;
        margin: 0px;
      }

  .centro {
    height: max-content;
  }

  .centro .row .ruleta {
    gap: 20px;
    padding: 50px;
    background-color: #963c4e29;
    clip-path: none;
    height: 100vh;
    margin-bottom: 30px;
  }


  .conterul::after {
    left: -50px;
    width: 90px;
    height: 100px;
  }

  .conterul::before {
    right: -50px;
    width: 90px;
    height: 100px;
  }

  #flecha {
    left: -40px;
    width: 60px;
    height: 60px;
  }

  /* Estilos CSS para la ruleta */
  #ruleta-container {
    width: 250px;
    /* Ancho de la ruleta */
    height: 350px;
  }

  #nombresRuleta li {
    font-size: 0.9rem;
    height: 70px;
  }

  #nombresRuletaRegalo li {
    font-size: 0.9rem;
    height: 70px;
  }



  #girar {
    padding: 10px;
    font-size: 1rem;
    border-radius: 8px;
    width: 120px;
  }


  #girar:hover {
    transform: scale(1.03);
  }

  .girar_volver {
    padding: 10px;
    font-size: 1rem;
    border-radius: 8px;
    width: 120px;
  }


  .girar_volver:hover {
    transform: scale(1.03);
  }

  .centro .row .respuesta {
    padding: 30px;
  }

  .centro .row .respuesta .rescentro {
    gap: 20px;
    height: 300px;
    width: 80%;
    padding: 20px;
    border-radius: 10px;
  }



  .centro .row .respuesta .rescentro h1 {
    font-size: 1.5rem;
  }

  .centro .row .respuesta .rescentro p {
    font-size: 0.9rem;
  }

  .explosion {
    width: 200px;
    height: 300px;
  }

  .volver {
    padding: 8px;
    font-size: 2rem;
    border-radius: 5px;
  }

  .volver:hover {
    transform: scale(1.03);
  }

  .lista_personas {
    padding: 8px;
    font-size: 2rem;
    border-radius: 5px;
  }

  .lista_personas:hover {
    transform: scale(1.03);
  }

  /* FONDO ATRAS  */

  .burbujas {
    gap: 5px;
  }

  .burbujas span {
    width: 30px;
    height: 30px;
    margin: 0 0px;
  }

  .inicio div {
    gap: 10px;
  }

  .inicio div h1 {
    font-size: 3rem;
    border-bottom: 5px double var(--blanco);
    padding-bottom: 10px;
  }

  .inicio div .a {
    font-size: 1rem;
    padding: 10px 20px;
    border-radius: 10px;
    border: 4px double var(--blanco);
  }


}

@media screen and (min-width: 421px) and (max-width:650px) {

    .config {
        padding: 50px 20px;
        margin: 0px;
      }
  .centro {
    height: max-content;
  }

  .centro .row .ruleta {
    gap: 20px;
    padding: 50px;
    background-color: #963c4e29;
    clip-path: none;
    height: 100vh;
    margin-bottom: 30px;
  }


  .conterul::after {
    left: -50px;
    width: 90px;
    height: 100px;
  }

  .conterul::before {
    right: -50px;
    width: 90px;
    height: 100px;
  }

  #flecha {
    left: -40px;
    width: 60px;
    height: 60px;
  }

  /* Estilos CSS para la ruleta */
  #ruleta-container {
    width: 250px;
    /* Ancho de la ruleta */
    height: 350px;
  }

  #nombresRuleta li {
    font-size: 0.9rem;
    height: 70px;
  }

  #nombresRuletaRegalo li {
    font-size: 0.9rem;
    height: 70px;
  }



  #girar {
    padding: 10px;
    font-size: 1rem;
    border-radius: 8px;
    width: 120px;
  }

  #girar:hover {
    transform: scale(1.03);
  }

  .girar_volver {
    padding: 10px;
    font-size: 1rem;
    border-radius: 8px;
    width: 120px;
  }

  .girar_volver:hover {
    transform: scale(1.03);
  }

  .centro .row .respuesta {
    padding: 30px;
  }

  .centro .row .respuesta .rescentro {
    gap: 20px;
    height: 250px;
    width: 95%;
    padding: 20px;
    border-radius: 10px;
  }


  .centro .row .respuesta .rescentro h1 {
    font-size: 1.5rem;
  }

  .centro .row .respuesta .rescentro p {
    font-size: 0.9rem;
  }

  .explosion {
    width: 200px;
    height: 300px;
  }





  .volver {
    padding: 8px;
    font-size: 2rem;
    border-radius: 5px;
  }

  .volver:hover {
    transform: scale(1.03);
  }



  .lista_personas {
    padding: 8px;
    font-size: 2rem;
    border-radius: 5px;
  }

  .lista_personas:hover {
    transform: scale(1.03);
  }

  /* FONDO ATRAS  */

  .burbujas {
    gap: 5px;

  }

  .burbujas span {
    width: 13px;
    height: 13px;
    margin: 0 0px;
  }

  .inicio div {
    gap: 10px;
  }

  .inicio div h1 {
    font-size: 1.3rem;
    border-bottom: 5px double var(--blanco);
    padding-bottom: 10px;
  }

  .inicio div .a {
    font-size: 0.8rem;
    padding: 10px 20px;
    border-radius: 10px;
    border: 4px double var(--blanco);
  }


}

@media screen and (min-width: 320px) and (max-width:420px) {
    .config {
        padding: 50px 20px;
        margin: 0px;
      }
  .centro {
    height: max-content;
  }

  .centro .row .ruleta {
    gap: 20px;
    padding: 50px;
    background-color: #963c4e29;
    clip-path: none;
    height: 100vh;
    margin-bottom: 30px;
  }


  .conterul::after {
    left: -50px;
    width: 80px;
    height: 90px;
  }

  .conterul::before {
    right: -50px;
    width: 80px;
    height: 90px;
  }

  #flecha {
    left: -40px;
    width: 50px;
    height: 50px;
  }

  /* Estilos CSS para la ruleta */
  #ruleta-container {
    width: 220px;
    /* Ancho de la ruleta */
    height: 320px;
  }

  #nombresRuleta li {
    font-size: 0.9rem;
    height: 65px;
  }

  #nombresRuletaRegalo li {
    font-size: 0.9rem;
    height: 65px;
  }


  #girar {
    padding: 10px;
    font-size: 1rem;
    border-radius: 8px;
    width: 120px;
  }

  #girar:hover {
    transform: scale(1.03);
  }


  .girar_volver {
    padding: 10px;
    font-size: 1rem;
    border-radius: 8px;
    width: 120px;
  }

  .girar_volver:hover {
    transform: scale(1.03);
  }

  .centro .row .respuesta {
    padding: 30px;
  }

  .centro .row .respuesta .rescentro {
    gap: 20px;
    height: 250px;
    width: 95%;
    padding: 20px;
    border-radius: 10px;
  }


  .centro .row .respuesta .rescentro h1 {
    font-size: 1.5rem;
  }

  .centro .row .respuesta .rescentro p {
    font-size: 0.9rem;
  }

  .explosion {
    width: 200px;
    height: 300px;
  }



  .volver {
    padding: 8px;
    font-size: 2rem;
    border-radius: 5px;
  }

  .volver:hover {
    transform: scale(1.03);
  }

  
  .lista_personas {
    padding: 8px;
    font-size: 2rem;
    border-radius: 5px;
  }

  .lista_personas:hover {
    transform: scale(1.03);
  }

  /* FONDO ATRAS  */

  .burbujas {
    gap: 5px;
  }

  .burbujas span {
    width: 13px;
    height: 13px;
    margin: 0 0px;
  }

  .inicio div {
    gap: 10px;
  }

  .inicio div h1 {
    font-size: 1.5rem;
    border-bottom: 5px double var(--blanco);
    padding-bottom: 10px;
  }

  .inicio div .a {
    font-size: 1rem;
    padding: 10px 20px;
    border-radius: 10px;
    border: 4px double var(--blanco);
  }

}