@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');



.hex.small {
  width: 120px;
  height: 104px;
}

.hex.tiny {
  width: 84px;
  height: 73px;
}

.hexGrid {
  width: 850px;
  /* margin-bottom: 100px;*/
}

.hexGridA {
  width: 960px; /* (.hex.width x 0.75) x (..grid-auto-rows x2) + ((.hex.width x 0.1) x 3), for size + (10px) space between hexes */
  height: 92px; /* (.hex.height / 2) + (space between hexes / 2) */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.hexGridB {
  width: 960px;
  height: 92px; /* (.hex.height / 2) + (space between hexes / 2)S */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px; /* original value */
  margin-left: 160px; /* (.hex.width x 0.75) + (..grid-auto-rows x 0.10), for size + (10px) space between hexes (.hexGridA and .hexGridB) */
}


/* Hexagons */
.hex {
  display: flex;
  position: relative;
  width: 200px; /* ..grid-auto-rows x 2, to creates overflow to grid-auto-rows */
  height: 174px; /* ..grid-auto-rows x 2, to creates overflow to grid-auto-rows */
  clip-path: polygon(25% 0%, 75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
}

.hex1 {
  background-color: #ebebeb;
  margin-top: 68px;
  margin-left: 62px;
}

.hex2 {
  background-color: #ebebeb;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}

.hex2 p.numero {
  font-size: 3em;
  color: #E62A24;
  font-weight: bold;
  line-height: 1; 
  margin: 5px 0; 
}

.hex2 p.large {
  font-size: 1.2em;
  color: #444343;
  margin: 0; 
  font-weight: bold;
}

.hex2 .sup {
  font-size: 0.6em;
  vertical-align: super;
  color: #E62A24;
}

.hex2:hover {
  background-color: #E62A24;
}

.hex2:hover .sup{
	color: white;
}
.hex2:hover p {
  color: white;
}

.hex3 {
  background-color: #ebebeb;
  margin-top: 70px;
  margin-left: 20px;
}

.hex4 {
  background-color: #E62A24;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 0.5;
  text-align: center;
  position: relative;
}

.hex4 .image-container {
  width: 30%; 
  height: 50px; 
  background: url('../img/cohete_negro.png') no-repeat center;
  background-size: contain;
}

.hex4 p {
	font-weight: bold;
}

.hex4 p.large {
  font-size: 1.2em; 
  margin: 5px 0;  
  color: white;
}

.hex4 p.small {
  font-size: 0.6em; 
  margin: 5px 0;  
  color: white;
}

.hex4:hover {
  background-color: #444343;
}

.hex4:hover .image-container {
  background: url('../img/cohete_rojo.png') no-repeat center;
  background-size: contain;
}



.hex5 {
  background-color: #444343;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center; 
}

.hex5 p.numero {
  font-size: 3em;
  color: #E62A24;
  font-weight: bold;
  line-height: 1; 
  margin: 5px 0; 
}

.hex5 p.small {
  font-size: 0.6em;
  color: white;
  margin: 0; 
}

.hex5:hover {
  background-color: #ebebeb;
}

.hex5:hover p.small{
  color: #444343;
}

.hex7 {
	background-color: #ebebeb;
	margin-top: -55px;
	margin-left: -34px;
}


.hex8 {
  background-color: #E62A24;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 0.5;
  text-align: center;
  position: relative;
}

.hex8 .image-container {
  width: 30%; 
  height: 50px; 
  background: url('../img/grafico_negro.png') no-repeat center;
  background-size: contain;
}

.hex8 p {
	font-weight: bold;
}

.hex8 p.large {
  font-size: 1.2em; 
  margin: 5px 0;  
  color: white;
}

.hex8 p.small {
  font-size: 0.6em; 
  margin: 5px 0;  
  color: white;
}

.hex8:hover {
  background-color: #444343;
}

.hex8:hover .image-container {
  background: url('../img/grafico_rojo.png') no-repeat center;
  background-size: contain;
}



.hex9 {
  background-color: #444343;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center; 
}

.hex9 p.numero {
  font-size: 3em;
  color: #E62A24;
  font-weight: bold;
  line-height: 1; 
  margin: 5px 0; 
}

.hex9 p.small {
  font-size: 0.6em;
  color: white;
  margin: 0; 
}

.hex9:hover {
  background-color: #ebebeb;
}

.hex9:hover p.small{
  color: #444343;
}

.hex10 {
  background-color: #ebebeb;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center; 
}

.hex10 p.numero {
  font-size: 3em;
  color: #E62A24;
  font-weight: bold;
  line-height: 1; 
  margin: 5px 0; 
}

.hex10 p.small {
  font-size: 0.6em;
  color: #444343;
  margin: 0; 
}

.hex10:hover {
  background-color: #E62A24;
}

.hex10:hover p {
  color: white; 
}


.hex11 {
  background-color: #ebebeb;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center; 
}

.hex11 p.numero {
  font-size: 3em;
  color: #E62A24;
  font-weight: bold;
  line-height: 1; 
  margin: 5px 0; 
}

.hex11 p.small {
  font-size: 0.6em;
  color: #444343;
  margin: 0; 
}


.hex11:hover p{
  color: white;
}

.hex11:hover {
  background-color: #E62A24;
}


.hex13 {
  background-color: #ebebeb;
      margin-left: 88px;
}

.hex6 {
  background-color: #444343;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 0.5; 
}

.hex6 img {
  width: 30%; 
  height: auto;
 
}
.hex6 p {
	font-weight: bold;
}

.hex6 p.large {
  font-size: 1.2em; 
  margin: 5px 0;  
  color: white;
}

.hex6 p.medium {
  font-size: 0.9em; 
  margin: 5px 0;  
  color: white;
}

.hex6 p.small {
  font-size: 0.6em; 
  margin: 5px 0;  
  color: white;
}

.hex6:hover {
  background-color: #ebebeb;
}

.hex6:hover p.large {
  color: #E62A24;
}

.hex6:hover p.medium,
.hex6:hover p.small {
  color: #444343;
}