:root {
  --fuente: 'Hanken Grotesk', sans-serif;

  /* sumarios */
  --primario1: hsl(0, 100%, 67%);
  --primario2: hsl(39, 100%, 56%);
  --primario3: hsl(166, 100%, 37%);
  --primario4: hsl(234, 85%, 45%);

  /* Gradientes */
  --violetaFondo: hsl(252, 100%, 67%);
  --azulFondo: hsl(241, 81%, 54%);

  --violetaCirculo: hsla(256, 72%, 46%, 1);
  --azulOscuroCirculo: hsla(241, 72%, 46%, 0);


  --White: hsl(0, 0%, 100%);
  --PaleBlue: hsl(221, 100%, 96%);
  --LighLavender: hsl(241, 100%, 89%);
  --DarkGrayBlue: hsl(224, 30%, 27%);
}


html, body {
  margin: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  font-family: var(--fuente);
  background-color: var(--White);
  min-height: 100vh;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

h1 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 1rem;
  font-family: var(--fuente);
  font-weight: 700;
  color: hsl(0, 0%, 100%);
}

.resultado {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 2rem;
  font-family: var(--fuente);
  color: var(--LighLavender);
  font-size: 30px;
  font-weight: 700;
}

h3 {
  font-family: var(--fuente);
  font-weight: 100;
  letter-spacing: 1.3px;
}
/** tamaño desktop (el default)**/
.contenedor-principal {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;  
  width: 90%;        
  margin: 4vh auto; 
     box-shadow: 0px 0px 12px 13px lavender;
     border-radius: 30px;
}
.contenedor-resultado{
  background: rgb(45, 42, 232);
  background: linear-gradient(0deg, rgba(45, 42, 232, 1) 0%, rgba(120, 86, 255, 1) 100%);
  border-radius: 30px;
}

/* Versión mobile */
@media (max-width: 763px) {
  .contenedor-principal {
  display: flex;
  flex-direction: column;
  width: 85%;
  max-width: 480px;
  margin: auto;
  }
  .contenedor-resultado {
    border-radius: 0 0 30px 30px;
  }
}


.contenedor-circulo {
  display: flex;
  flex-direction: row;
  justify-content: center;
}


.puntajes {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 180px;
  height: 170px;
  border-radius: 80%;
  background: rgb(66, 32, 201);
  background: linear-gradient(0deg, rgba(66, 32, 201, 0.24693627450980393) 30%, rgba(35, 32, 201, 0.9836309523809523) 100%);
}


@media (hover: hover) {
  .puntajes:hover {
    background: rgb(66, 32, 201);
    background: linear-gradient(0deg, rgba(52, 11, 233, 0.699) 30%, rgb(73, 63, 202) 100%);
  }
}

.puntaje-grande {
  font-family: var(--fuente);
  color: hsl(0, 0%, 100%);
  font-size: 4.5rem;
  font-weight: bold;
}

.puntaje-chico {
  font-family: var(--fuente);
  color: hsl(241, 100%, 89%);
  font-size: 1.2rem;
}

p {
  margin-bottom: 1rem;
  padding: 2rem 4rem;
  font-family: var(--fuente);
  color: hsl(241, 100%, 89%);
  font-weight: 20px;
  text-align: center;
}
/* Sumario */
.contenedor-sumario {
  padding: 0rem 2rem 0rem 2rem;
}

.titulo {
  font-family: var(--fuente);
  font-weight: 300;
}

.contenedor-caracteres {  
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 15px;
  font-family: var(--fuente);
}

.reaction-texto{
  color: hsl(0, 100%, 67%);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15px;
}
.memory-texto{
  color: hsl(39, 100%, 56%);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15px;
}
.verbal-texto{
  color: hsl(166, 100%, 37%);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15px;
}

.visual-texto{
  color: hsl(234, 85%, 45%);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15px;
}

.numeros {
  color: hsl(241, 100%, 89%);
}
.numeros-bold {
  font-size: bold;
}
/* Caracteres */
.reaction {
  background-color: hsl(0, 100%, 97%);
  border-radius: 14px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  gap: 2rem;
}


@media (hover: hover) {
  .reaction:hover {
  background-color: hsl(0, 100%, 95%);
  }
}

.memory {
  background-color: hsl(58, 57%, 88%);
  border-radius: 14px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  gap: 2rem;
}


@media (hover: hover) {
  .memory:hover {
  background-color: hsl(60, 48%, 84%);
  }
}
.verbal {
  background-color: hsl(138, 100%, 93%);
  border-radius: 14px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  gap: 2rem;
}


@media (hover: hover) {
  .verbal:hover {
  background-color: hsl(229, 100%, 90%);
  }
}
.visual {
  background-color: hsl(240, 80%, 94%);
  border-radius: 14px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  gap: 2rem;
}


@media (hover: hover) {
  .visual:hover {
  background-color: hsl(240, 100%, 93%);
  }
}
/* Boton */
.continue {
  padding: 12px;
  font-family: var(--fuente);
  font-weight: 500;
  color: hsl(0, 0%, 100%);
  text-decoration: none;
}

.boton-continue {
  margin: 1.5rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 2.8rem;
  padding: -5rem;
  background: rgb(35,32,201);
background: linear-gradient(0deg, rgba(35,32,201,1) 0%, rgba(66,32,201,0.8155637254901961) 100%);
  border-radius: 50px;
  
}

@media (hover: hover) {
  .boton-continue:hover {
    background: rgb(66, 32, 201);
    background: linear-gradient(0deg, rgb(67, 56, 233) 30%, rgb(11, 24, 207) 100%);
  }
}

/** Footer **/
.final {
  font-size: 1rem;
  text-align: center;
}

.final a {
  font-family: var(--fuente);
  font-weight: 100;
  letter-spacing: 1px;
  color: hsl(252, 100%, 67%);
  text-decoration: none;
}