html {
  font: 1rem sans-serif;
  color: #222;
  background-color: #f5f5f5;
  width: 100%;
}

header nav {
  text-align: center;
  align-items: center;
  background-color: #0d4a0d;
  color: white;
  padding: 1rem;
  margin-bottom: 1rem;
  width: 100%;
  justify-content: space-between;
  max-height: 75px;
}

.tituloHeader {
  font-weight: 900;
  height: 100%;
  color: #f5f5f5;
}

.tituloHeader img {
  height: 100%;
}

.hamburguesa {
  color: #f5f5f5;
  border: none;
}

.menu a,
.hamburguesa>span.navbar-toggler-icon {
  color: #f5f5f5;
}

.menu {
  align-items: center;
  margin-left: auto;
  margin-bottom: 1rem;
  align-self: baseline;
  font-weight: 900;
  height: 100%;
  color: #f5f5f5;
}

.bloque {
  max-height: max-content;
  margin-bottom: 1.5rem;
}

.comparacion {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr 4fr 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  text-align: center;
  max-width: 100%;
  max-height: calc(100% - 2rem);
  height: 100%;
  font-weight: bold;
}

.comparacion .imagenIzq {
  grid-area: 1 / 1 / 4 / 2;
}

.comparacion .imagenDer {
  grid-area: 1 / 2 / 4 / 3;
}

.comparacion .imagen {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  height: 100%;
}

.comparacion .epigrafe {
  grid-area: 3 / 1 / 4 / 3;
  background-color: rgba(75, 75, 75, 0.65);
  z-index: 1;
  color: #f5f5f5;
  font-style: italic;
  height: 100%;
  opacity: 50%;

}

.comparacion .titulo {
  color: #222;
  font-size: 2rem;
  font-weight: bold;
}

.comparacion .imagenIzqTitulo {
  grid-area: 1 / 1 / 2 / 2;
}

.comparacion .imagenDerTitulo {
  grid-area: 1 / 2 / 2 / 3;
}

.transparencia {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  max-height: calc(100% - 2rem);
}

.transparencia .estrella {
  grid-area: 1 / 1 / 6 / 5;
  object-fit: scale-down;
  max-width: 90%;
  max-height: 90%;
  z-index: 1;
  animation: spin 10s linear infinite;
  align-self: center;
  justify-self: center;
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.transparencia .cell-1-1 {
  grid-area: 1 / 1 / 2 / 2;
  background-color: blue;
}

.transparencia .cell-1-2 {
  grid-area: 1 / 2 / 2 / 3;
  background-color: green;
}

.transparencia .cell-1-3 {
  grid-area: 1 / 3 / 2 / 4;
  background-color: yellow;
}

.transparencia .cell-2-1 {
  grid-area: 2 / 1 / 3 / 2;
  background-color: red;
}

.transparencia .cell-2-2 {
  grid-area: 2 / 2 / 3 / 3;
  background-color: hotpink;
}

.transparencia .cell-2-3 {
  grid-area: 2 / 3 / 3 / 4;
  background-color: salmon;
}

.transparencia .cell-3-1 {
  grid-area: 3 / 1 / 4 / 2;
  background-color: saddlebrown;
}

.transparencia .cell-3-2 {
  grid-area: 3 / 2 / 4 / 3;
  background-color: aqua;
}

.transparencia .cell-3-3 {
  grid-area: 3 / 3 / 4 / 4;
  background-color: slateblue;
}

.transparencia .cell-4-1 {
  grid-area: 4 / 1 / 5 / 2;
  background-color: orange;
}

.transparencia .cell-4-2 {
  grid-area: 4 / 2 / 5 / 3;
  background-color: lime;
}

.transparencia .cell-4-3 {
  grid-area: 4 / 3 / 5 / 4;
  background-color: gray;
}

.animadoMD {
  max-width: 100%;
  object-fit: cover;
}

.animadoSM {
  max-width: 100%;
  object-fit: cover;
  width: 100%;
  display: none;
}

.soporte {
  max-height: 100%;
  object-fit: cover;
  width: 100%;
}

.pie {
  gap: 1rem;
  text-align: center;
  margin-top: 3rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  background-color: #446a44;
  width: 100%;
}

.pieBotones {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-around;
  align-items: center;
  margin-top: 1rem;
  background-color: #446a44;
  width: 100%;
}

.pie {
  color: #f5f5f5;
  text-decoration: underline #f5f5f5 2px;
  font-weight: 900;
}

.pie a {
  color: #f5f5f5;
  text-decoration: none;
  font-weight: bold;
}

.pie a img {
  color: #f5f5f5;
  text-decoration: none;
  font-weight: bold;
  max-width: 100%;
  max-height: 3rem;
}

.pie a.rfc {
  font: normal 40px/1.3em Courier, Sans-Serif;
  color: #000;
  text-decoration: none;
  background-color: #f5f5f5;
  padding: 1px;
}

.listaHistoria {
  list-style-image: url(./img/logoWebpicon.webp);
  list-style-position: inside;
  text-align: justify !important;
}

.futuro {
  max-width: 100%;
}

.futuroFlex {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  max-width: 100%;
  gap: 2rem;
}

.futuroFlex p {
  min-width: 50%;
  max-height: 100%;
  text-align: justify;
}

.futuroFlex img {
  max-height: 50%;
  max-width: 100%;
  object-fit: contain;
}

.futuroFlex div {
  display: flex;
  flex-direction: column;
  max-width: 100%;
}

.ventajaItem {
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.ventajaItem .ventajaTexto {
  width:100%;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.ventajaItem .ventajaTexto>span {
  color:rgb(0, 85, 0);
  font-weight: bold;
}

.desventajaItem {
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.desventajaItem .desventajaTexto {
  width:100%;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.desventajaItem .desventajaTexto>span {
  color:rgb(85, 0, 0);
  font-weight: bold;
}

#carouselEjemplos {
  min-height: 50vh;
}

.gridConejo {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 2fr 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  min-height: 30vh;
}

.gridConejo .pasto {
  grid-area: 2 / 1 / 3 / 6;
  background-color: rgb(73, 156, 73); ;
}

.gridConejo .rojo1 {
  grid-area: 1 / 1 / 2 / 2;
}

.gridConejo .rojo2 {
  grid-area: 1 / 3 / 2 / 4;
}

.gridConejo .rojo3 {
  grid-area: 1 / 5 / 2 / 6;
}

.gridConejo .rojo1 ,
.gridConejo .rojo2 ,
.gridConejo .rojo3 {
  background-color: darkred;
}

.gridConejo .gris1 {
  grid-area: 1 / 2 / 2 / 3;
}

.gridConejo .gris2 {
  grid-area: 1 / 4 / 2 / 5;
}


.gridConejo .gris1,
.gridConejo .gris2 {
  background-color: lightgray;
}

.gridConejo .conejo {
  grid-area: 1 / 1 / 2 / 6;
}

#conejo {
  bottom: 15%;
  position: absolute;
  animation: linear infinite;
  animation-name: run;
  animation-duration: 5s;
}
@keyframes run {
  0% {
    right: 0;
  }
  48% {
    transform: rotateY(0deg); 
  }
  50% { 
    right: calc(100% - 100px);
    transform: rotateY(180deg); 
  }
  98% {
    transform: rotateY(180deg); 
  }
  100% {
    right: 0;    
    transform: rotateY(0deg);
  }
}

/*
  Media Queries
  max-width: 767px (md en bootstrap)
*/
@media screen and (max-width: 767px) {

  .bloque {
    max-height: none;
    max-width: 100%;
  }

  header nav {
    padding: 1rem;
    margin-bottom: 1rem;
    width: 100%;
    justify-content: space-between;
    max-height: fit-content;
  }

  .comparacion {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr 3fr 1rem 1rem 3fr 1fr;
    max-height: 27rem;
  }

  .comparacion .imagenIzq {
    grid-area: 1 / 1 / 4 / 3;
    ;
  }

  .comparacion .imagenDer {
    grid-area: 4 / 1 / 7 / 3;
  }

  .comparacion .imagen {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    width: 100%;
  }

  .comparacion .epigrafe {
    grid-area: 3 / 1 / 5 / 3;
  }

  .comparacion .titulo {
    color: #222;
    font-size: 2rem;
    background-color: rgba(75, 75, 75, 0.65);
    color: #f5f5f5;
    height: 100%;
  }

  .comparacion .imagenIzqTitulo {
    grid-area: 1 / 1 / 2 / 3;
  }

  .comparacion .imagenDerTitulo {
    grid-area: 6 / 1 / 7 / 3;
  }

  .futuroFlex div {
    max-width: 100%;
    flex-direction: row;
    gap: 1rem;
  }

  .futuroFlex {
    flex-direction: column;
  }

  .futuroFlex img {
    max-width: 50%;
  }
}

/*
  Media Queries
  max-width: 575px (sm en bootstrap)
*/
@media screen and (max-width: 575px) {
  .animadoSM {
    display: block;
  }

  .animadoMD {
    display: none;
  }

  .transparencia {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }

  .transparencia .estrella {
    grid-area: 1 / 1 / 3 / 3;
  }

  .transparencia .cell-1-1 {
    grid-area: 1 / 1 / 2 / 2;
  }

  .transparencia .cell-1-2 {
    grid-area: 1 / 2 / 2 / 3;
  }

  .transparencia .cell-2-1 {
    grid-area: 2 / 1 / 3 / 2;
  }

  .transparencia .cell-2-2 {
    grid-area: 2 / 2 / 3 / 3;
  }

  .transparencia .cell-1-3,
  .transparencia .cell-2-3,
  .transparencia .cell-3-1,
  .transparencia .cell-3-2,
  .transparencia .cell-3-3,
  .transparencia .cell-4-1,
  .transparencia .cell-4-2,
  .transparencia .cell-4-3 {
    display: none;
  }

  .pieBotones {
    flex-direction: column;
    justify-content: space-around;
    gap: 0.5rem;
  }
}