/* ****************************** Computed Properties ****************************** */

:root {
  /* ****************** Regla para obtener Textos Fluidos ****************** */
  --step--2: clamp(0.91rem, calc(0.89rem + 0.1vw), 0.96rem);
  --step--1: clamp(1.09rem, calc(1.05rem + 0.21vw), 1.2rem);
  --step-0: clamp(1.31rem, calc(1.24rem + 0.37vw), 1.5rem);
  --step-1: clamp(1.58rem, calc(1.46rem + 0.59vw), 1.88rem);
  --step-2: clamp(1.89rem, calc(1.71rem + 0.89vw), 2.34rem);
  --step-3: clamp(2.27rem, calc(2.01rem + 1.29vw), 2.93rem);
  --step-4: clamp(2.72rem, calc(2.36rem + 1.83vw), 3.66rem);
  --step-5: clamp(3.27rem, calc(2.75rem + 2.56vw), 4.58rem);

  /* ****************** FIN Regla para obtener Textos Fluidos ****************** */

  --font: "Chicken Soup";

  --form-placeholder-color: #006999;
}

/* ****************************** Reset ****************************** */
html {
  color: red; /* Este color de fuente no se aplicará al sitio Web, porque la pseudoclase ":root" tiene mayor peso, es decir, una especificidad 
    mayor que la del elemento "html". */

  box-sizing: border-box; /*Si no se colocara esta propiedad, o bien, si se le asignara el valor "content-box"(predeterminado), se comprobará
    que no se mostrará el texto en tres columnas; ¿por qué sucede esto?, porque cada elemento hijo mide 200px, los 3 elementos hijos en total miden 600px, que es
    el ancho total asignado al elemento, pero a esa medida se le debería sumar el padding, margin, border, etc., con lo cual ya las
    3 columnas no cabrían juntas porque sobrepasarían el ancho máximo de 600px. 
    
    Usando el valor "border-box", sin embargo, eso se corrige, porque cada elemento hijo medirá 200px de ancho real, y al sumar los 3, equivalen a los 600px
    de ancho que se definieron en la propiedad "width". Dentro del valor de 200px de ancho de cada elemento, ya se incluyen los valores
    de padding, margin, border, etc. 
  
    He ahí la importancia de asignar un valor "boder-box" a la propiedad "box-sizing".
    
    */
}

*,
*::before,
*::after {
  /* Se agregan además los selectores que indicarán que a todos los elementos del sitio Web,
y a aquellos elementos a los que se les haya asignado el pseudoelemento "::before", y a los que se les haya aplicado
el pseudoelemento "::after", se les asignará la propiedad "box-sizing" que heredará (inherit) su valor 
del elemento padre, el cual es el elemento "html". 

El pseudoelemento "before", puede escribirse tanto así ::before como así :before. Aunque, la forma más apropiada de escribir un pseudoelemento es así "::before".
El pseudoelemento "after", puede escribirse tanto así ::after como así :after. Aunque, la forma más apropiada de escribir un pseudoelemento es así "::after".

*/

  box-sizing: inherit;
}

/* La regla @font-face permite definir una tipografía que puede ser utilizada a lo largo del sitio Web. */
@font-face {
  font-family: "Chicken Soup"; /* Se define el nombre de la familia tipográfica y es la manera en que CSS identificará a este tipo de fuente personalizada. 
                           Este nombre lo elige el usuario; en este caso, se usará el nombre "Chalet", pero
                           podría ser cualquier otro. Cuando se desee aplicar esta tipografía a alguna sección del sitio Web, será este nombre 
                           el que se utilizará.   */
  src: url("../assets/Chicken Soup.woff") format("woff"),
    url("../assets/Chicken Soup.woff2") format("woff2");
  /* Es necesario indicar por medio de la función "url()" la ubicación de la fuente, 
    y también agregar la función "format()" para indicar el formato que corresponde a la fuente que se está importando. */

  /* Si también se tuviera el archivo "Chalet.woff2", se podría realizar la importación de la siguiente forma: 
         src: url("../assets/Chalet.woff") format("woff"), 
              url("../assets/Chalet.woff2") format("woff2");

        Como en este caso el archivo "Chalet.woff2" no existe, no se escrió así la propiedad. 
    */

  font-display: swap;
  /*
    font-display: permie elegir cómo se desea cargar una fuente personalizada.
        - auto: permite que el navegador utilice el método predeterminado que suele ser "block". 
        - block: oculta brevemente el texto hasta que la fuente haya sido descargada por completo. 
        - swap: indica al navegador que utilice la fuente alternativa para mostrar el texto hasta que la fuente
                personalizada se hay cargado por completo. ¡ESTA ES LA OPCIÓN RECOMENDADA!
        - fallback: es una muestra de "auto" y "swap". 
        - optional: ocultará el texto, luego lo cargará con la fuente alternativa y finalmente aplicará la fuente personalizada. 
    */
}

body {
  margin: 0;
  padding: 0;
  /* El contenido que sobrepase el Viewport, se ocultará. 
  
  Esto es necesario, porque se debe recordar que en el sitio Web se agregó una ventana modal, la cual, al abrirse, 
  quita la barra de desplazamiento vertical. Debido a ello, es necesario asignar el ancho de cada sección del documento
  en "100vw", para que así cuando la barra de desplazamiento vertical se oculte, no se vea el espacio que ocupaba
  "vacío", es decir, sin color de fondo. Si se hubiera dejado únicamente el valor de ancho de  "100%" (100% del ancho del Viewport, lo cual no incluye el ancho de las barras de desplazamiento) cuando se abriera la ventana modal y se ocultará la barra de desplazamiento vertical, el espacio donde esta estaba
  quedaría sin color. 

  Relacionado con lo antes dicho, como ahora el ancho de cada elemento es "100vw", se mostrará la barra de desplazamiento horizontal para ver
  el fragmento de página que queda oculto por la barra de desplazamiento vertical. Para que dicha barra de desplazamiento horizontal
  no se muestre, se oculta con "overflow-x: hidden", el contenido que exceda el 100% del elemento contenedor. 
  
  
  */
  overflow-x: hidden;

  /* background: #222; */

  /* Acá se está consumiento la fuente "Chicken Soup" que fue definida anteriormente mediante la regla "@font-face". */
  font-family: var(--font), sans-serif; /* Cuando se suba el sitio Web al hosting, dependiendo del rendimiendo del servidor en el que está alojado, 
    demorará cierto tiempo en cargar la fuente indicada. Precisamente por ello, se recomienda colocar una segunda fuente que
     no haya necesidad de importar, sino que sea una de las fuentes estándar utilizadas comúnmente. 
     
     En este caso, si tarda demasiado en cargar o no encuentra la fuente "Chicken Soup", asignará la fuente "sans-serif".
     */
}

/* ****************************** Utilities ****************************** */

/*
@keyframes deselect {
  from {
    filter: drop-shadow(0.3rem 0.3rem 0.5rem #0011ff);
    transform: scale(1.2, 1.2);
    opacity: 1;
  }
  to {
    transform: scale(1, 1);
    filter: none;
    opacity: 0.6;
  }
}

*/

/* Esta clase se utiliza para que cuando se seleccione un elemento, 
esta clase se asigne al último elemento anterior al que se le aplicó la clase "selection".

Esto permitirá que el último elemento anterior seleccionado tenga un animación que lo haga volver a su 
estado  normal, es decir, que se deseleccione. 
*/
/*
.deselect {
  animation: deselect 0.5s forwards ease-in-out;
}
*/

@keyframes opacity {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.6;
  }
}

.opacity {
  animation: opacity 0.5s ease-in-out forwards;
}

/* Esta clase se asignará al elemento que se seleccione dentro del área de la calculadora. */
@keyframes selection {
  from {
  }
  to {
    filter: drop-shadow(0.3rem 0.3rem 0.5rem #0011ff);
    transform: scale(1.2, 1.2);
  }
}

.selection {
  animation: selection 0.5s forwards ease-in-out;
}

.text-shadow {
  text-shadow: 0.2rem 0.2rem 0.25rem #de7326;
}

/* ****************************** Site Styles ****************************** */

.buttonResult {
  font-size: var(--step-0);
}

.nombre > label {
  font-size: var(--step--1);
}
#nombre {
  border-radius: 0.45rem;
  /* Este selector modifica el pseudoelemento "placeholder"" de TODOS (*) los elementos que sean hijos directos del formulario. */
  color: var(--form-placeholder-color);
  text-align: center;
}

.points {
  font-size: var(--step-4);
  font-weight: bold;
}

.points-nivel {
  font-size: var(--step-1);
}

.content-modal {
  color: #ffc107;
  text-align: center;
}

.container-modal {
  background-color: #212529;
}
.content {
  /* Se establece que la altura mínima será de 100vh, para que sin importar la altura de la pantalla en la cual se visualice el sitio Web,
  la página muestre siempre todo su contenido. */
  min-height: 100vh;

  background-image: linear-gradient(to top, #68286670 15%, #22222200 40%),
    url("../assets/portada1.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

  width: 100vw;
  color: #fff;
  margin: 0;
  padding: 0;
}

.content > div[class="contenthijo"] {
  /* Es indispensable que el elemento "hijo" del elemento al que se le asignó la propiedad "min-height: 100vh", el cual también tiene asignada
  la imagen de fondo, herede de su padre la propiedad "min-height" mediante el valor "inherit". */
  min-height: inherit;
  display: flex;
  flex-direction: row;
  justify-content: center;

  align-content: center;
  flex-wrap: wrap; /* La propiedad "flex-wrap" especifica si los elementos "hijos" son obligados a permanecer en una misma línea o pueden fluir en varias líneas.
  
  Puede utilizar los siguientes valores: 
    - nowrap (default): todo los elementos flexibles estarán en una sola línea. Los elementos se distribuirán en una sola fila o en una sola columna, dependiendo del 
    valor que fue asignado en la propiedad "flex-direction" es "row" o "column" respectivamente. 
    - wrap: los elementos flexibles se distribuirán en varias líneas de arriba hacia abajo. 
    - wrap-reverse: los elementos flexibles se distribuirán en varias líneas de abajo hacia arriba. 

  IMPORTANTE: Como se asignó el valor "nowrap", si se cambia el tamaño de la ventana, se comprobará que los elementos se siguen mostrando en una sola fila (se muestra
  la barra de scroll horizontal), aún cuando ya no quepan dentro del ancho del viewport actual. 

  IMPORTANTE 2: Si a los elementos "flex" se les asignará un ancho determinado de, por ejemplo, "20%", el valor "nowrap" impedirá que
  dicho ancho se aplique, por lo que los elementos seguirán teniendo el mismo ancho original y no se aplicará el ancho de "20%". 
  */

  /* 
  Tanto la propiedad "flex-direction" como la propiedad "flex-wrap" permiten configurar lo que se conoce como el "FLUJO DE LA CAJA".
  
  Debido a ello, existe una propiedad Shortand (abreviada) que permite configurar ambas propiedades. 
  Dicha propiedad shorthand tiene la siguiente estructura: 
      flex-flow: <flex-direction || <flex-wrap>;

  Ejemplo: 
  flex-flow: column wrap;
  */
}

.content2 {
  padding: 1rem;
  background-color: #89df13;
  width: 100vw;
  min-height: 100vh;

  /* padding: 1.5rem; */

  display: grid;

  /* Se desea que el ancho mínimo de cada columna sea
  equivalente al ancho del contenido menor (min-content) de los Grid Item;
  y se desea que el ancho mayor sea del 20% del contenedor padre. 

  Como son 4 columnas, y cada una mide un máximo del 20% de la anchura del contenedor padre, 
  suman un total de "80%". Sin embargo, como más adelante se utiliza la propiedad "justify-content: space-evenly", 
  el "20%" de espacio restante se distribuye al principio y al final del Grid y entre cada Grid Item. 
  */
  grid-template-columns: repeat(4, minmax(min-content, 20%));
  grid-template-rows: repeat(10, auto);

  justify-items: center;

  justify-content: space-evenly; /* La propiedad "justify-content" define cómo el navegador distribuye el espacio entre y alrededor de los Grid Tracks completos, 
  a lo largo del eje horizontal de su contenedor. 
  
  Puede tener los siguientes valores: 
    - start (default): Los Grid Track se colocan a partir del comienzo principal. El margen del primer item es alineado al ras con el borde del comienzo  
                            principal de la línea y cada item siguiente es alineado al ras con el precedente.
    - end: Los Grid Track se colocan a parti del final principal. El margen del último item es alineado al ras con el borde del final principal de la línea y      
                cada item precedente es alineado al ras con el siguiente.
    - center: Los Grid Track son colocados hacia el centro de la línea. Los Grid Item se alinean al ras entre sí y en torno al centro de la línea. El espacio entre el borde 
              del comienzo principal de la línea y el primer item es el mismo que el espacio entre el borde del final principal y el último item de la línea.
    - space-between: Los Grid Track se distribuyen uniformemente sobre la línea. El espaciamiento se hace de tal manera que el espacio adyacente entre dos items es el  
                     mismo. El borde del comienzo principal y el borde del final principal se alinean al ras con el borde del primer y último item respectivamente.
    - space-around: Los Grid Track se alinean uniformemente de tal manera que el espacio entre dos items adyacentes es el mismo. El espacio vacío anterior al primer item y 
                    posterior al último item equivale a la mitad del espacio entre dos items adyacentes.
    - space-evenly: Los Grid Track tendrán un espacio idéntico alrededor de ellos. Mientras que el valor "space-around" asigna al espacio que está antes del primer item, 
                    y después del último item la MITAD del espacio que hay entre dos items adyacentes, el valor "space-evenly" asigna un espacio idéntico
                    tanto entre los items, como al espacio que se deja antes del primer item y al espacio que se deja después del último item. 
    - stretch: cambia el tamaño de los Grid Track de la Grid para permitir que la cuadrícula ocupe todo el ancho del contenedor de la cuadrícula
  */
  align-items: center;

  align-content: center;

  gap: 1vw 1vh;

  grid-template-areas:
    "titulo             titulo                  titulo                  titulo"
    "instrucciones      instrucciones           instrucciones           instrucciones"
    "nombre             nombre                  nombre                  nombre"
    "cuerpo1            cuerpo2                 cuerpo3                 subtotal-cuerpo"
    "cuerpo4            .                       cuerpo5                 subtotal-cuerpo"
    "ojos1              ojos2                   ojos3                   subtotal-ojos"
    "ojos4              .                       ojos5                   subtotal-ojos"
    "boca1              boca2                   boca3                   subtotal-boca"
    "patas1             .                       patas2                  subtotal-patas"
    "total-punteo       total-punteo            total-punteo            total-punteo";
}

.content3 {
  min-height: 100vh;
  /* width: 100vw; */
  width: 100vw;
  background-color: #682866;
}

.content3 img {
  margin: 2vh 1vw;

  max-width: 80%;
  max-height: 26vh;

  border-radius: 10px;
  object-fit: cover;
  transition: transform 0.4s ease-in-out, box-shadow 0.5s ease-in-out;
}

.content3 img:hover {
  transform: scale(1.05);
  box-shadow: 0.3rem 0.3rem 0.5rem 0.1rem #ffff0095;
}

.content-manual {
  position: relative;
  top: 10vh;
  height: 90vh;

  /*
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  */
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;

  justify-items: center;
  justify-content: center;
  align-items: center;
}

.modal-open {
  overflow: scroll;
}

.content img {
  max-width: 80%;
  height: auto;

  width: 80%;

  cursor: pointer;
}

.containerButtons {
  display: flex;
  width: 100%;
  height: 100px;
  margin-bottom: 0.5rem;

  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
}
.containerButtons > a {
  font-size: var(--step-1);
}

.buttonCalculator {
  /* Centrar texto del buttonCalculator*/
  display: flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  background-color: #622560;
  color: #ffff00;
  font-weight: bold;
  opacity: 1;
  border: medium solid #8dbf22;

  cursor: pointer;
  min-height: 50px;
  width: 200px;
  /* margin-bottom: 10px; */
  border-radius: 10%;

  transition: transform 0.2s ease-in-out, border 0.2s ease-in-out,
    color 0.2s ease-in-out, background-color 0.2s ease-in-out,
    opacity 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* IMPORTANTE: para asignar las pseudoclases de estado, se debe recordar que el orden correcto para su
  funcionamiento es el siguiente: 
  
       1. :link 
       2. :visited 
       3  :hover 
       4. :active.
  */

.buttonCalculator:visited {
  opacity: 1;
  background-color: #622560;
  color: #ffff00;
  border: medium solid #8dbf22;
}

.buttonCalculator:active {
  opacity: 1;
  background-color: #8dbf22;
  color: #ffff00;
  border: medium solid #622560;
  transform: scale(1.2, 1.2);
}

.buttonManual {
  /* Centrar texto del buttonManual */
  display: flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  background-color: #830507;
  color: #ffffff;
  font-weight: bold;
  opacity: 1;
  border: medium solid #c9c20b;

  cursor: pointer;

  width: 200px;
  min-height: 50px;
  border-radius: 10%;

  transition: transform 0.2s ease-in-out, border 0.2s ease-in-out,
    color 0.2s ease-in-out, background-color 0.2s ease-in-out,
    opacity 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* IMPORTANTE: para asignar las pseudoclases de estado, se debe recordar que el orden correcto para su
  funcionamiento es el siguiente: 
  
       1. :link 
       2. :visited 
       3  :hover 
       4. :active.
  */
.buttonManual:visited {
  opacity: 1;
  background-color: #830507;
  color: #ffffff;
  border: medium solid #c9c20b;
}

.buttonManual:active {
  opacity: 1;
  background-color: #2951fd;
  color: #ffffff;
  border: medium solid #c9c20b;
  transform: scale(1.2, 1.2);
}

.content h1 {
  color: white;
}

/* Selector de hijos directos más un selector de hijos descendientes.
En este caso, este estilo se aplicará a todos los elementos "img" que sean hijos descendientes del elemento "div", pero solo si este "div"
es hijo directo del elemento al que se le asignó la clase "content2". 
*/
.content2 > div img {
  width: 50px;
  height: auto;
  padding: 0.3rem;

  max-width: 100%;
  cursor: pointer;
}

/* El comodín "^" aplica el estilo únicamente si el atributo contiene el texto en cuestión al inicio. */
/* Aplica el tamaño del texto fluido únicamente a los elementos div descendientes del elemento al que se le asignó la clase "content2",
cuyo nombre de clase comience con el texto "titulo". */
.content2 div[class^="titulo"] {
  font-size: var(--step-2);
  text-align: center;
}

/* El comodín "^" aplica el estilo únicamente si el atributo contiene el texto en cuestión al inicio. */
/* Aplica el tamaño del texto fluido únicamente a los elementos div descendientes del elemento al que se le asignó la clase "content2",
cuyo nombre de clase comience con el texto "puntos". */
.content2 div[class^="puntos"] {
  font-size: var(--step--2);
}

.content2 div[class^="subtotal"] {
  font-size: var(--step-0);
}

/* El comodín "~" aplica el estilo únicamente si el atributo contiene el texto en cuestión en una lista de clases separadas por espacios. Es decir, 
que este selector aplicará este estilo solamente si dentro del atributo class (el cual contiene varias clases separadas por espacios), existe la palabra "total-punteo".
*/

/*
Se hizo de esta manera, porque, aunque por ahora el elemento que tiene asignada la clase "total-punteo" solamente contiene dicha clase, 
desde JavaScript, se le agregará también la clase "text-shadow". 

Si en lugar de usar este selector:  div[class~="total-punteo"] 
se usara este otro, el cual buscaría al elemento que contenga exclusivamente la clase "total-punteo":  div[class="total-punteo"]
haría que cuando desde JavaScript se agregara la clase "text-shadow" a este elemento,  en lugar de que dicha clase fuera agregada a la clase
ya existente llamada "total-punteo", el selector div[class="total-punteo"] ya no aplicaría el estilo correspondiente, porque ahora
ya no habría una única clase asignada (total-punteo) sino que habrían dos clases asignadas: "total-punteo" y "text-shadow".  
*/
.content2 div[class~="total-punteo"] {
  font-size: var(--step-3);
}

/* ************************ Grid ************************ */
.nombre {
  grid-area: nombre;
  font-size: var(--step--1);
  margin-bottom: 0.3rem;
}

.titulo {
  grid-area: titulo;
}

.instrucciones {
  grid-area: instrucciones;
  justify-self: start;
  font-size: var(--step--1);
}

.instrucciones p {
  text-align: left;
}

/* ********** CUERPO ********** */

.cuerpo-1 {
  grid-area: cuerpo1;
}

/* El comodín "|" aplica el estilo únicamente si contiene el texto en cuestión al principio de una lista de clases (o id's) separadas por espacios, y si después del texto en cuestión hay un guión medio "-".

En este caso, este estilo se aplicará a todos los elementos "div" que sean hijos descendientes del elemento
al que se le asignó la clase "content2", que contengan clases que comiencen por el texto "cuerpo-". 

Es decir que aplicará este estilo a todos los elementos que tengan asignadas las clases 
"cuerpo-1", "cuerpo-2", "cuerpo-3", "cuerpo-4", "cuerpo-5", "ojos-1", "ojos-2", etc. 
*/
.content2 div[class|="cuerpo"],
.content2 div[class|="ojos"],
.content2 div[class|="boca"],
.content2 div[class|="patas"] {
  transition: transform 0.3s ease-in-out;
}

.content2 div[class|="cuerpo"]:hover,
.content2 div[class|="ojos"]:hover,
.content2 div[class|="boca"]:hover,
.content2 div[class|="patas"]:hover {
  transform: scale(1.2, 1.2);
  /*box-shadow: 0.01rem 0.01rem 1.5rem 0.5rem #df3740; */ /* La propiedad "box-shadow" añade efectos de sombra alrededor de la caja de un elemento. 
    Puede tener los siguientes valores: 
        - none: quitar cualquier sombra de caja que se haya aplicado al elemento. 
        - Primer valor: desplazamiento horizontal (x), el cual se indica en pixeles o en cualquier otra unidad de medida.
        - Segundo valor: desplazamiento vertical (y), el cual se indica en pixeles o en cualquier otra unidad de medida.
        - Tercer valor (opcional): define el desenfoque o difuminación (blur-radius) de la sombra, el cual se indica en pixeles o en cualquier otra unidad de medida.
        - Cuarto valor (opcional): define la propagación (spread-radius) de la sombra. La propagación define el tamaño de la sombra. 
        - Penúltimo valor: color de la sombra. Si no se define un color, el elemento heredará el color que corresponda al color de fuente que se haya
          asignado al elemento, por medio de la propiedad "color".  
        - Último valor (opcional): Cambia la sombra, permitiendo agregar el siguiente valor 
            - inset (sombra interna). Se debe tomar en cuenta que el estilo de sombra predeterminado es el estilo "outset", el cual aplica
              una sombra externa a la caja del elemento.
            

    NOTA: el color hexadecimal tiene 8 dígitos, porque en los últimos dos se indica la opacidad que será aplicada a la sombra
    de la caja del elemento. 
    
    */
}

.cuerpo-2 {
  grid-area: cuerpo2;
}

.cuerpo-3 {
  grid-area: cuerpo3;
}

.cuerpo-4 {
  grid-area: cuerpo4;
}

.cuerpo-5 {
  grid-area: cuerpo5;
}

.subtotal-cuerpo {
  grid-area: subtotal-cuerpo;
  font-weight: bold;
}

/* ********** OJOS ********** */

.ojos-1 {
  grid-area: ojos1;
}

.ojos-2 {
  grid-area: ojos2;
}

.ojos-3 {
  grid-area: ojos3;
}

.ojos-4 {
  grid-area: ojos4;
}

.ojos-5 {
  grid-area: ojos5;
}

.subtotal-ojos {
  grid-area: subtotal-ojos;
  font-weight: bold;
}

/* ********** BOCA ********** */

.boca-1 {
  grid-area: boca1;
}

.boca-2 {
  grid-area: boca2;
}

.boca-3 {
  grid-area: boca3;
}

.subtotal-boca {
  grid-area: subtotal-boca;
  font-weight: bold;
}

/* ********** PATAS ********** */

.patas-1 {
  grid-area: patas1;
}

.patas-2 {
  grid-area: patas2;
}

.subtotal-patas {
  grid-area: subtotal-patas;
  font-weight: bold;
}

.total-punteo {
  grid-area: total-punteo;
}

@media screen and (min-width: 320px) {
  .content img {
    margin-top: 10%;
  }
}

@media screen and (min-width: 480px) {
}

@media screen and (min-width: 768px) {
  .content2 {
    /* Se desea que el ancho mínimo de cada columna sea
  equivalente al ancho del contenido menor (min-content) de los Grid Item;
  y se desea que el ancho mayor sea del 20% del contenedor padre. 

  Como son 6 columnas, y cada una mide un máximo del 10% de la anchura del contenedor padre, 
  suman un total de "60%". Sin embargo, como anteriormente en este archivo se asignó la propiedad "justify-content: space-evenly", 
  el "40%" de espacio restante se distribuye al principio y al final del Grid y entre cada Grid Item. 
  */
    grid-template-columns: repeat(6, minmax(min-content, 10%));
    grid-template-rows: repeat(8, auto);

    grid-template-areas:
      "titulo             titulo                  titulo                  titulo                  titulo              titulo"
      "instrucciones      instrucciones           instrucciones           instrucciones           instrucciones       instrucciones"
      "nombre             nombre                  nombre                  nombre                  nombre              nombre"
      "cuerpo1            cuerpo2                 cuerpo3                 cuerpo4                 cuerpo5             subtotal-cuerpo"
      "ojos1              ojos2                   ojos3                   ojos4                   ojos5               subtotal-ojos"
      "boca1              .                       boca2                   .                       boca3               subtotal-boca"
      ".                  patas1                  .                       patas2                  .                   subtotal-patas"
      "total-punteo       total-punteo            total-punteo            total-punteo            total-punteo        total-punteo";

    gap: 0 0;
  }

  .content3 img {
    margin: 1rem;

    /* max-width: 600px; */
  }
}

@media screen and (min-width: 1024px) {
  .content img {
    max-width: 100%;
    height: auto;

    width: 50%;
    margin-top: 0%;
  }

  /* Selector de hijos directos más un selector de hijos descendientes.
En este caso, este estilo se aplicará a todos los elementos "img" que sean hijos descendientes del elemento "div", pero solo si este "div"
es hijo directo del elemento al que se le asignó la clase "content2". 
*/
  .content2 > div img {
    width: 80px;
  }

  .content-manual {
    margin: 0 auto;
    /* width: 90% */
    width: 100%;
    grid-template-columns: repeat(2, 50%);
    /* justify-items: stretch; */
    justify-items: center;
  }

  .content3 img {
    max-height: 40vh;
  }

  .content3 img:nth-child(3) {
    grid-column: span 2;
    justify-self: center;
  }

  .buttonCalculator {
    /* Centrar texto del buttonCalculator*/

    opacity: 0.7;
  }

  /* IMPORTANTE: para asignar las pseudoclases de estado, se debe recordar que el orden correcto para su
  funcionamiento es el siguiente: 
  
       1. :link 
       2. :visited 
       3  :hover 
       4. :active.
  */
  .buttonCalculator:hover {
    opacity: 1;
    background-color: #622560;
    color: yellow;
    border: medium solid #8dbf22;
    transform: scale(1.2, 1.2);
  }

  .buttonCalculator:active {
    transform: scale(1.3, 1.3);
  }

  .buttonManual {
    opacity: 0.7;
  }

  .buttonManual:hover {
    opacity: 1;
    background-color: #830507;
    color: #ffffff;
    border: medium solid #c9c20b;
    transform: scale(1.2, 1.2);
  }

  .buttonManual:active {
    transform: scale(1.3, 1.3);
  }
}