@charset "UTF-8";
/* FONTS  #################################################*/
/***** VARIABLES Y COLORES ************/
.cuadro-col-ppal-claro--5 {
  background-color: rgb(253.9538461538, 198.2461538462, 245.65);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-medio--5 {
  background-color: rgb(251.8615384615, 84.7384615385, 226.95);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal--5 {
  background-color: rgb(217, 4, 185.25);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-fuerte--5 {
  background-color: hsl(303.9436619718, 146.3800904977%, 43.3333333333%);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-oscuro--5 {
  background-color: rgb(151.9, 2.8, 129.675);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-sec-oscuro--5 {
  background-color: rgb(2, 108.5, 17.875);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-sec--5 {
  background-color: rgb(4, 217, 35.75);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-sec-claro--5 {
  background-color: rgb(27.9846153846, 250.8153846154, 61.2);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-claro--4 {
  background-color: rgb(253.9538461538, 198.2461538462, 231.7230769231);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-medio--4 {
  background-color: rgb(251.8615384615, 84.7384615385, 185.1692307692);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal--4 {
  background-color: #d90484;
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-fuerte--4 {
  background-color: hsl(318.9436619718, 146.3800904977%, 43.3333333333%);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-oscuro--4 {
  background-color: rgb(151.9, 2.8, 92.4);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-sec-oscuro--4 {
  background-color: rgb(2, 108.5, 44.5);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-sec--4 {
  background-color: #04d959;
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-sec-claro--4 {
  background-color: rgb(27.9846153846, 250.8153846154, 116.9076923077);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-claro--3 {
  background-color: rgb(253.9538461538, 198.2461538462, 217.7961538462);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-medio--3 {
  background-color: rgb(251.8615384615, 84.7384615385, 143.3884615385);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal--3 {
  background-color: rgb(217, 4, 78.75);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-fuerte--3 {
  background-color: hsl(333.9436619718, 146.3800904977%, 43.3333333333%);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-oscuro--3 {
  background-color: rgb(151.9, 2.8, 55.125);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-sec-oscuro--3 {
  background-color: rgb(2, 108.5, 71.125);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-sec--3 {
  background-color: rgb(4, 217, 142.25);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-sec-claro--3 {
  background-color: rgb(27.9846153846, 250.8153846154, 172.6153846154);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-claro--2 {
  background-color: rgb(253.9538461538, 198.2461538462, 203.8692307692);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-medio--2 {
  background-color: rgb(251.8615384615, 84.7384615385, 101.6076923077);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal--2 {
  background-color: rgb(217, 4, 25.5);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-fuerte--2 {
  background-color: hsl(348.9436619718, 146.3800904977%, 43.3333333333%);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-oscuro--2 {
  background-color: rgb(151.9, 2.8, 17.85);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-sec-oscuro--2 {
  background-color: rgb(2, 108.5, 97.75);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-sec--2 {
  background-color: rgb(4, 217, 195.5);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-sec-claro--2 {
  background-color: rgb(27.9846153846, 250.8153846154, 228.3230769231);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-claro--1 {
  background-color: rgb(253.9538461538, 206.55, 198.2461538462);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-medio--1 {
  background-color: rgb(251.8615384615, 109.65, 84.7384615385);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal--1 {
  background-color: rgb(217, 35.75, 4);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-fuerte--1 {
  background-color: hsl(3.9436619718, 146.3800904977%, 43.3333333333%);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-oscuro--1 {
  background-color: rgb(151.9, 25.025, 2.8);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-sec-oscuro--1 {
  background-color: rgb(2, 92.625, 108.5);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-sec--1 {
  background-color: rgb(4, 185.25, 217);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-sec-claro--1 {
  background-color: rgb(27.9846153846, 217.6, 250.8153846154);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-claro {
  background-color: rgb(253.9538461538, 220.4769230769, 198.2461538462);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-medio {
  background-color: rgb(251.8615384615, 151.4307692308, 84.7384615385);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal {
  background-color: #d95904;
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-fuerte {
  background-color: hsl(18.9436619718, 146.3800904977%, 43.3333333333%);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-oscuro {
  background-color: rgb(151.9, 62.3, 2.8);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-sec-oscuro {
  background-color: rgb(2, 66, 108.5);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-sec {
  background-color: #0484d9;
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-sec-claro {
  background-color: rgb(27.9846153846, 161.8923076923, 250.8153846154);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-claro-1 {
  background-color: rgb(253.9538461538, 234.4038461538, 198.2461538462);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-medio-1 {
  background-color: rgb(251.8615384615, 193.2115384615, 84.7384615385);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-1 {
  background-color: rgb(217, 142.25, 4);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-fuerte-1 {
  background-color: hsl(33.9436619718, 146.3800904977%, 43.3333333333%);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-oscuro-1 {
  background-color: rgb(151.9, 99.575, 2.8);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-sec-oscuro-1 {
  background-color: rgb(2, 39.375, 108.5);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-sec-1 {
  background-color: rgb(4, 78.75, 217);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-sec-claro-1 {
  background-color: rgb(27.9846153846, 106.1846153846, 250.8153846154);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-claro-2 {
  background-color: rgb(253.9538461538, 248.3307692308, 198.2461538462);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-medio-2 {
  background-color: rgb(251.8615384615, 234.9923076923, 84.7384615385);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-2 {
  background-color: rgb(217, 195.5, 4);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-fuerte-2 {
  background-color: hsl(48.9436619718, 146.3800904977%, 43.3333333333%);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-oscuro-2 {
  background-color: rgb(151.9, 136.85, 2.8);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-sec-oscuro-2 {
  background-color: rgb(2, 12.75, 108.5);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-sec-2 {
  background-color: rgb(4, 25.5, 217);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-sec-claro-2 {
  background-color: rgb(27.9846153846, 50.4769230769, 250.8153846154);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-claro-3 {
  background-color: rgb(245.65, 253.9538461538, 198.2461538462);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-medio-3 {
  background-color: rgb(226.95, 251.8615384615, 84.7384615385);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-3 {
  background-color: rgb(185.25, 217, 4);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-fuerte-3 {
  background-color: hsl(63.9436619718, 146.3800904977%, 43.3333333333%);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-oscuro-3 {
  background-color: rgb(129.675, 151.9, 2.8);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-sec-oscuro-3 {
  background-color: rgb(17.875, 2, 108.5);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-sec-3 {
  background-color: rgb(35.75, 4, 217);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-sec-claro-3 {
  background-color: rgb(61.2, 27.9846153846, 250.8153846154);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-claro-4 {
  background-color: rgb(231.7230769231, 253.9538461538, 198.2461538462);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-medio-4 {
  background-color: rgb(185.1692307692, 251.8615384615, 84.7384615385);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-4 {
  background-color: #84d904;
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-fuerte-4 {
  background-color: hsl(78.9436619718, 146.3800904977%, 43.3333333333%);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-oscuro-4 {
  background-color: rgb(92.4, 151.9, 2.8);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-sec-oscuro-4 {
  background-color: rgb(44.5, 2, 108.5);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-sec-4 {
  background-color: #5904d9;
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-sec-claro-4 {
  background-color: rgb(116.9076923077, 27.9846153846, 250.8153846154);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-claro-5 {
  background-color: rgb(217.7961538462, 253.9538461538, 198.2461538462);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-medio-5 {
  background-color: rgb(143.3884615385, 251.8615384615, 84.7384615385);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-5 {
  background-color: rgb(78.75, 217, 4);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-fuerte-5 {
  background-color: hsl(93.9436619718, 146.3800904977%, 43.3333333333%);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-ppal-oscuro-5 {
  background-color: rgb(55.125, 151.9, 2.8);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-sec-oscuro-5 {
  background-color: rgb(71.125, 2, 108.5);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-sec-5 {
  background-color: rgb(142.25, 4, 217);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cuadro-col-sec-claro-5 {
  background-color: rgb(172.6153846154, 27.9846153846, 250.8153846154);
  width: 120px;
  height: 60px;
  display: inline-block;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/* FONTS  #################################################*/
/***** TAMAÑO DE TIPOGRAFIA ************/
.letra, .texto-destacado, body main h2, .texto-ultra-destacado, body main h1, .letra-comun-right, .letra-comun-center, body main p, .letra-comun-left {
  font-family: "Inter", sans-serif;
}

.letra-comun-right, .letra-comun-center, body main p, .letra-comun-left {
  color: #333333;
  font-weight: bold;
  text-align: right;
  font-size: 13.2px;
}
@media (min-width: 768px) {
  .letra-comun-right, .letra-comun-center, body main p, .letra-comun-left {
    font-size: 15.4px;
  }
}
@media (min-width: 1024px) {
  .letra-comun-right, .letra-comun-center, body main p, .letra-comun-left {
    font-size: 18.7px;
  }
}

.letra-comun-left {
  text-align: left;
}

.letra-comun-center, body main p {
  text-align: center;
}

.texto-destacado, body main h2, .texto-ultra-destacado, body main h1 {
  color: rgb(27.9846153846, 161.8923076923, 250.8153846154);
  background-color: rgb(151.9, 62.3, 2.8);
  font-weight: 800;
  text-shadow: 2px 3px 0 rgb(2, 66, 108.5);
  border-radius: 10px;
  text-align: center;
  margin: 20px auto;
  padding: 10px 15px;
  max-width: 90%;
  box-shadow: 10px 10px 10px rgb(2, 66, 108.5);
  font-size: 14.4px;
}
@media (min-width: 768px) {
  .texto-destacado, body main h2, .texto-ultra-destacado, body main h1 {
    font-size: 16.8px;
  }
}
@media (min-width: 1024px) {
  .texto-destacado, body main h2, .texto-ultra-destacado, body main h1 {
    font-size: 20.4px;
  }
}
.texto-destacado, body main h2, .texto-ultra-destacado, body main h1 {
  transition: all 0.3s ease;
}
.texto-destacado:hover, body main h2:hover, .texto-ultra-destacado:hover, body main h1:hover {
  background-color: hsl(18.9436619718, 146.3800904977%, 43.3333333333%);
  color: rgb(2, 66, 108.5);
  text-shadow: 2px 3px 0 rgb(27.9846153846, 161.8923076923, 250.8153846154);
  font-size: 15.6px;
}
@media (min-width: 768px) {
  .texto-destacado:hover, body main h2:hover, .texto-ultra-destacado:hover, body main h1:hover {
    font-size: 18.2px;
  }
}
@media (min-width: 1024px) {
  .texto-destacado:hover, body main h2:hover, .texto-ultra-destacado:hover, body main h1:hover {
    font-size: 22.1px;
  }
}

.texto-ultra-destacado, body main h1 {
  margin: 0 auto 20px auto;
  padding-top: 0;
  color: rgb(27.9846153846, 161.8923076923, 250.8153846154);
  background-color: #d95904;
  font-weight: 800;
  font-size: 15.6px;
}
@media (min-width: 768px) {
  .texto-ultra-destacado, body main h1 {
    font-size: 18.2px;
  }
}
@media (min-width: 1024px) {
  .texto-ultra-destacado, body main h1 {
    font-size: 22.1px;
  }
}
.texto-ultra-destacado, body main h1 {
  transition: all 0.3s ease;
}

.texto-ultra-destacado:hover, body main h1:hover {
  color: rgb(27.9846153846, 161.8923076923, 250.8153846154);
  background-color: rgb(151.9, 62.3, 2.8);
  text-shadow: 2px 3px 0 hsl(18.9436619718, 146.3800904977%, 43.3333333333%);
  font-size: 16.8px;
}
@media (min-width: 768px) {
  .texto-ultra-destacado:hover, body main h1:hover {
    font-size: 19.6px;
  }
}
@media (min-width: 1024px) {
  .texto-ultra-destacado:hover, body main h1:hover {
    font-size: 23.8px;
  }
}

/************ IMAGENES ***************************/
.imagen-destacada, body main img {
  max-width: 100%;
  height: auto;
  margin: 20px auto;
  transition: transform 0.5s ease;
}

.imagen-destacada:hover, body main img:hover {
  transform: scale(1.1);
}

/************ ANIMACIONES ************************************/
/* ## Clases simples con Transform */
/* Clase para mover la imagen (translate) */
.translate {
  transform: translate(50px, 50px);
  /* Mueve la imagen 50px a la derecha y 50px hacia abajo */
}

/* Clase para rotar la imagen (rotate) */
.rotate {
  transform: rotate(45deg);
  /* Rota la imagen 45 grados */
}

/* Clase para escalar la imagen (scale) */
.scale {
  transform: scale(1.5);
  /* Escala la imagen al 150% */
}

/* Clase para inclinar la imagen (skew) */
.skew {
  transform: skew(20deg, 10deg);
  /* Inclina la imagen 20 grados en X y 10 grados en Y */
}

/* ### Animaciones combinadas con keyframe */
@keyframes spinScale {
  0% {
    transform: rotate(0) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(2.5);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}
.spin-scale {
  animation: spinScale 2s 2;
  /* 2 segundos / 2 veces */
}

@keyframes zigzagMove {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(30px);
  }
  50% {
    transform: translateX(-30px);
  }
  75% {
    transform: translateX(30px);
  }
}
.zigzag {
  animation: zigzagMove 1.5s 2;
}

@keyframes heartbeat {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
}
.heartbeat {
  animation: heartbeat 1s 2;
}

@keyframes spiral {
  0% {
    transform: rotate(0) translate(0, 0);
  }
  25% {
    transform: rotate(90deg) translate(20px, 20px);
  }
  50% {
    transform: rotate(180deg) translate(40px, 0);
  }
  75% {
    transform: rotate(270deg) translate(20px, -20px);
  }
  100% {
    transform: rotate(360deg) translate(0, 0);
  }
}
.spiral {
  animation: spiral 2s 2;
}

@keyframes diagonalShake {
  0%, 100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(5px, 5px);
  }
  50% {
    transform: translate(-5px, -5px);
  }
  75% {
    transform: translate(5px, -5px);
  }
}
.diagonal-shake {
  animation: diagonalShake 1s 2;
}

.combinado {
  animation: combinado 5s 2;
}

@keyframes combinado {
  10% {
    transform: rotate(90deg) translate(20px, 20px);
  }
  25% {
    transform: scale(4);
  }
  50% {
    transform: translate(-50px, -20px);
  }
  70% {
    transform: rotate(180deg) translate(10px, 10px) scale(1.1);
  }
  75% {
    transform: rotate(280deg) translate(0, 0);
  }
  100% {
    transform: rotate(180deg) translate(0, 0);
  }
}
/* ### Personalización de duración y delay para animaciones de Animate.css */
.animate__animated.animate__bounce {
  animation-duration: 3s;
  /* Duración de la animación */
  animation-delay: 5ms;
  /* Retraso antes de que comience la animación */
}

.animate__animated.animate__fadeIn {
  animation-duration: 3s;
  animation-delay: 0.5s;
}

.animate__animated.animate__flip {
  animation-duration: 3s;
  animation-delay: 0.2s;
}

.animate__animated.animate__shakeX {
  animation-duration: 2s;
  animation-delay: 0.1s;
}

.animate__animated.animate__rubberBand {
  animation-duration: 3s;
  animation-delay: 0.3s;
}

/* FORMULARIOS #################################################*/
form {
  max-width: 500px;
  /* ancho máximo */
  margin: 2rem auto;
  /* espacio vertical */
  padding: 2rem;
  /* padding interno */
  background: #d95904;
  border-radius: 12px;
  /* Bordes  redondeados */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  /* Sombra pronunciada */
}

/* Contenedor para cada campo del formulario */
.form-group {
  margin-bottom: 1.5rem;
  /* Espacio entre campos */
  position: relative;
}

form label {
  display: block;
  font-weight: 600;
  color: rgb(2, 66, 108.5);
  margin-bottom: 0.5rem;
  /* Espacio entre label y input */
  margin-top: 10px;
  font-size: 13.2px;
}
@media (min-width: 768px) {
  form label {
    font-size: 15.4px;
  }
}
@media (min-width: 1024px) {
  form label {
    font-size: 18.7px;
  }
}

form input,
form textarea,
form select {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid rgb(2, 66, 108.5);
  border-radius: 6px;
  transition: all 0.3s ease;
  background-color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  /* Espaciado específico para textareas */
}
@media (min-width: 768px) {
  form input,
  form textarea,
  form select {
    font-size: 14px;
  }
}
@media (min-width: 1024px) {
  form input,
  form textarea,
  form select {
    font-size: 17px;
  }
}
form input:focus,
form textarea:focus,
form select:focus {
  outline: none;
  border-color: hsl(18.9436619718, 146.3800904977%, 43.3333333333%);
  box-shadow: 0 0 0 3px hsla(18.9436619718, 146.3800904977%, 43.3333333333%, 0.2);
}
form input form textarea,
form textarea form textarea,
form select form textarea {
  min-height: 120px;
  /* Altura mínima */
  resize: vertical;
  /* Permite redimensionar solo vertical */
}

/* Espacio adicional para checkboxes/radios */
.form-check {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
}
.form-check input[type=checkbox],
.form-check input[type=radio] {
  width: auto;
  margin-right: 0.5rem;
}

/***************** BOTONES *******************************************************************/
.botones {
  width: 100%;
  padding: 12px 10px;
  background: rgb(2, 66, 108.5);
  color: rgb(253.9538461538, 220.4769230769, 198.2461538462);
  font-size: 1.1rem;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  margin-top: 20px;
  cursor: pointer;
  transition: all 0.3s ease; /* Transición suave para todos los cambios */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil para profundidad */
}
.botones:hover {
  background: rgb(27.9846153846, 161.8923076923, 250.8153846154);
  transform: translateY(-1px); /* Levanta ligeramente el botón */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Sombra más pronunciada al hover */
}
.botones:active {
  transform: translateY(1px); /* Baja el botón 1px (como si se hundiera) */
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); /* Sombra casi plana */
}

/* ACORDEÓN #################################################*/
.accordion {
  width: 90%;
  margin: 10px auto;
}

.accordion-item {
  width: 95%;
  border: 1px solid #dee2e6; /* Borde para mejor visualización */
  border-radius: 5px; /* Esquinas redondeadas */
}

.accordion-button {
  font-weight: bold; /* Botones en negrita */
  background-color: rgb(2, 66, 108.5) !important; /* Fondo suave cuando no está abierto */
  color: black !important; /* Color del texto cuando no está abierto */
  padding: 10px 20px; /* Espacio interno */
  text-align: left;
  font-size: 1.1rem;
}
.accordion-button:not(.collapsed) {
  background-color: rgb(251.8615384615, 151.4307692308, 84.7384615385) !important; /* Fondo cuando está abierto */
  color: rgb(2, 66, 108.5) !important;
}
.accordion-button:focus {
  box-shadow: black;
}
.accordion-button.collapsed {
  background-color: rgb(27.9846153846, 161.8923076923, 250.8153846154) !important; /* Fondo cuando está cerrado */
  color: rgb(2, 66, 108.5) !important;
}

.accordion-body {
  min-height: 150px;
  padding: 20px; /* Espacio interno */
  background-color: rgba(255, 255, 255, 0.9); /* Fondo casi blanco */
  font-size: 1rem; /* Tamaño de texto del contenido */
  color: rgb(2, 66, 108.5); /* Color del texto dentro del cuerpo */
  font-weight: normal; /* Para que el texto del cuerpo no esté en negrita */
}

/* Carrusel - Versión simplificada */
#carrousel-home {
  width: 100%;
  margin: 0 auto;
}
#carrousel-home .carousel-inner {
  aspect-ratio: 16/9; /* Relación de aspecto recomendada */
}
#carrousel-home .carousel-inner .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Ajustes para el contenedor grid */
.item2-carrousel {
  grid-area: item2-carrousel;
  width: 100%;
  padding: 0;
  background: rgb(251.8615384615, 151.4307692308, 84.7384615385);
}

/* Media Queries simplificadas */
@media (min-width: 768px) {
  .item2-carrousel {
    padding: 2rem 0;
  }
  #carrousel-home .carousel-inner {
    max-height: 60vh;
  }
}
@media (min-width: 1024px) {
  /* Mantén tus estilos grid para desktop */
}
/* MENÚ  ################################################# */
.navbar.bg-dark {
  background-color: rgb(2, 66, 108.5) !important;
  font-size: 1.1rem;
}

.nav-link {
  font-weight: 200;
  font-size: inherit;
  padding: 0.5rem 1rem;
  transition: all 0.3s ease;
}
.nav-link:hover {
  font-size: 1.2rem;
  font-weight: bold;
}
.nav-link.active {
  background-color: hsl(18.9436619718, 146.3800904977%, 43.3333333333%);
  color: rgb(27.9846153846, 161.8923076923, 250.8153846154);
  font-size: 1.2rem;
  font-weight: bold;
}

.navbar-brand {
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.loguito {
  width: 45px;
  height: 45px;
}

.navbar.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

/* Estilos para el submenú dropdown */
.dropdown-menu {
  font-size: 1rem;
  background-color: rgb(2, 66, 108.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgb(27.9846153846, 161.8923076923, 250.8153846154);
}
.dropdown-menu .dropdown-item {
  color: rgb(27.9846153846, 161.8923076923, 250.8153846154);
  background-color: transparent !important;
  padding: 0.5rem 1.5rem;
  transition: background-color 0.3s ease;
}
.dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus {
  background-color: hsl(18.9436619718, 146.3800904977%, 43.3333333333%) !important;
  color: rgb(2, 66, 108.5) !important;
  font-weight: bolder;
}

/***********CARDS *********************/
.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.card .card-img-top {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.card .card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  padding: 15px;
}
.card .card-body .card-title {
  font-weight: bold;
  margin-bottom: 10px;
  text-align: left;
  font-size: 14.4px;
}
@media (min-width: 768px) {
  .card .card-body .card-title {
    font-size: 16.8px;
  }
}
@media (min-width: 1024px) {
  .card .card-body .card-title {
    font-size: 20.4px;
  }
}
.card .card-body .card-text {
  text-align: left;
  margin-bottom: 20px;
  flex-grow: 1;
  font-size: 12px;
}
@media (min-width: 768px) {
  .card .card-body .card-text {
    font-size: 14px;
  }
}
@media (min-width: 1024px) {
  .card .card-body .card-text {
    font-size: 17px;
  }
}
.card .card-body .btn {
  align-self: flex-start;
}

/* Estilos generales para el header */
header {
  background-color: rgb(2, 66, 108.5);
}
header .container-fluid {
  padding: 0;
}
header .navbar.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
header .navbar-brand {
  font-size: 1.3rem;
  color: rgb(27.9846153846, 161.8923076923, 250.8153846154);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
header .navbar-brand:hover {
  color: hsl(18.9436619718, 146.3800904977%, 43.3333333333%);
}
header .loguito {
  width: 45px;
  height: 45px;
}
@media (max-width: 768px) {
  header .navbar-collapse {
    padding: 0.5rem;
  }
  header .navbar-nav {
    flex-direction: column;
    text-align: center;
  }
  header .nav-item {
    margin-bottom: 1rem;
  }
}

/* LAYAUTS ESTRUCTURAL DEL SITIO #################################################*/
body {
  padding-top: 10px !important;
  background-color: rgb(253.9538461538, 220.4769230769, 198.2461538462);
  display: flex;
  justify-content: center;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}
body main {
  margin-top: 70px;
  padding: 0 15px;
}
body main li i {
  margin-right: 8px;
}

/* ################ Tablet  #################################  */
@media (min-width: 768px) {
  main {
    padding: 0 40px;
    /*
        img {
          max-width: 85%;
          display: block;
          margin: 0 auto;
        }*/
  }
  main p {
    max-width: 700px;
    margin: 0 auto;
  }
}
/* ################ Desktop ######################## */
@media (min-width: 1024px) {
  main {
    padding: 0 60px;
    /*
        img {
          max-width: 75%;
          display: block;
          margin: 0 auto;
        }*/
  }
  main p {
    max-width: 800px;
    margin: 0 auto;
  }
}
footer {
  flex-shrink: 0;
  padding: 10px 0;
  margin-top: auto;
  width: 100%;
  background-color: rgb(2, 66, 108.5);
  /* Tablet */
  /* Desktop */
}
footer section {
  text-align: center;
  color: rgb(253.9538461538, 220.4769230769, 198.2461538462);
  font-weight: bold;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px;
  font-size: 13.2px;
}
@media (min-width: 768px) {
  footer section {
    font-size: 15.4px;
  }
}
@media (min-width: 1024px) {
  footer section {
    font-size: 18.7px;
  }
}
footer section nav {
  margin: 10px 0;
}
footer section nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}
footer section nav ul li a {
  color: rgb(253.9538461538, 220.4769230769, 198.2461538462);
  text-decoration: none;
  font-weight: normal;
}
footer section nav ul li a:hover {
  text-decoration: underline;
}
footer section .iconos-sociales {
  margin: 10px 0;
  display: flex;
  justify-content: center;
  gap: 15px;
}
footer section .iconos-sociales a {
  color: rgb(253.9538461538, 220.4769230769, 198.2461538462);
  font-size: 1.5rem;
  transition: color 0.3s;
}
footer section .iconos-sociales a:hover {
  color: rgb(27.9846153846, 161.8923076923, 250.8153846154);
}
footer section .iconos-sociales a i {
  pointer-events: none;
}
footer section small {
  display: block;
  margin-top: 10px;
  font-weight: normal;
  font-size: 10.8px;
}
@media (min-width: 768px) {
  footer section small {
    font-size: 12.6px;
  }
}
@media (min-width: 1024px) {
  footer section small {
    font-size: 15.3px;
  }
}
@media (min-width: 768px) {
  footer section nav ul {
    justify-content: space-around;
  }
  footer section .iconos-sociales {
    gap: 20px;
  }
  footer section .iconos-sociales a {
    font-size: 1.8rem;
  }
}
@media (min-width: 1024px) {
  footer section {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0;
  }
  footer section nav {
    grid-column: 1/2;
  }
  footer section nav ul {
    justify-content: flex-start;
    margin: 0;
  }
  footer section .iconos-sociales {
    grid-column: 2/3;
    justify-content: center;
    margin: 0;
  }
  footer section small {
    grid-column: 3/4;
    text-align: right;
    margin: 0;
  }
}

.item1 {
  grid-area: item1;
}

.item2 {
  grid-area: item2;
  background: rgb(251.8615384615, 151.4307692308, 84.7384615385);
  padding: 5%;
  display: flex;
  align-items: center;
  align-content: center;
}

.item3 {
  grid-area: item3;
  background: rgb(251.8615384615, 151.4307692308, 84.7384615385);
  padding: 5%;
}

.area {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: "item1" "item2" "item3";
}

.area-destacada {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: "item1" "item2-carrousel" "item3";
}

.item2-carrousel {
  grid-area: item2-carrousel;
  background: rgb(251.8615384615, 151.4307692308, 84.7384615385);
  padding: 5%;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item2-carrousel #carousel-home {
  width: 100%;
  height: 100%;
}
.item2-carrousel #carousel-home .carousel-inner {
  max-height: 60vh;
  height: 100%;
  overflow: hidden;
}
.item2-carrousel .carousel-item img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

@media (min-width: 768px) {
  .area {
    grid-template-columns: 2fr 3fr;
    grid-template-rows: auto auto;
    grid-template-areas: "item1 item1" "item2 item3";
  }
  .area-destacada {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: "item1" "item3" "item2-carrousel";
  }
}
@media (min-width: 1024px) {
  .area {
    grid-template-columns: 5% 2fr 3fr 5%;
    grid-template-rows: auto auto;
    grid-template-areas: "item1 item1 item1 item1" ". item2 item3 .";
  }
  .area-destacada {
    grid-template-columns: 5% 2fr 3fr 5%;
    grid-template-rows: auto auto;
    grid-template-areas: "item1 item1 item1 item1" ". item3 item2-carrousel .";
  }
}
/* JUEGOS ANIMATE #################################################*/
.centrado {
  display: flex;
  justify-content: center;
}

#image-game-container {
  width: 80%;
  max-width: 1000px; /* Añadido para limitar el ancho máximo */
  height: 70%;
  text-align: center;
  padding: 50px 20px;
  background-image: radial-gradient(circle, #d95904, rgb(27.9846153846, 161.8923076923, 250.8153846154), rgb(251.8615384615, 151.4307692308, 84.7384615385));
  z-index: 1000;
  border-radius: 15px; /* bordes redondeados */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /*  sombra */
}

/* Estilos específicos para la imagen */
#image-game {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  transition: transform 0.3s ease;
  /* Transición suave para transformaciones */
}

#image-game:hover {
  transform: scale(2);
  /* Agranda la imagen un 10% al pasar el mouse */
  opacity: 0.5;
}

/********************** Estilos para la sección con AOS */
/* Agrega un margen superior a la sección AOS */
.aos-section {
  margin-top: 100px;
  /* Ajusta este valor según la altura del navbar */
  text-align: center;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 10px;
}

/**** Paleta de colores ******************************************************/
.muestra-linea {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 10px;
}

.muestra-linea > div {
  width: 15px;
  height: 15px;
  border-radius: 4px;
}

@media (min-width: 768px) {
  .muestra-linea {
    gap: 8px;
  }
  .muestra-linea > div {
    width: 30px;
    height: 30px;
  }
}
@media (min-width: 1024px) {
  .muestra-linea {
    gap: 10px;
  }
  .muestra-linea > div {
    width: 90px;
    height: 60px;
  }
}
p {
  text-align: center;
  font-weight: bold;
  margin: 0;
}

/******************************** GRID DE TARJETAS **********************************************************************************************/
.grid-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  /* Columnas responsivas */
  gap: 30px;
  /* Espacio entre tarjetas */
  padding: 20px;
  max-width: 1400px;
  /* Ancho máximo del grid */
  margin: 0 auto;
  /* Centrado horizontal */
}

/* Sobreescribe estilos de Bootstrap para las cards */
.grid-tarjetas .card {
  width: 100%;
  /* Asegura que tome el ancho del grid */
  border: none;
  /* Elimina borde por defecto */
  border-radius: 12px;
  /* Bordes más redondeados */
  overflow: hidden;
  /* Para que las imágenes no sobresalgan */
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* Sombra suave */
}
.grid-tarjetas .card:hover {
  transform: translateY(-5px);
  /* Efecto "levitar" */
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
}

/* Ajustes para imágenes dentro de las cards */
.grid-tarjetas .card-img-top {
  height: 200px;
  /* Altura fija para imágenes */
  object-fit: cover;
  /* Recorta la imagen manteniendo proporciones */
}

main .construccion {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
main .construccion button.botones {
  margin-top: 2rem;
}
main .construccion img.imagen-destacada {
  margin-top: 2rem;
}

/*# sourceMappingURL=styles.css.map */