:root {
  --primario: #ff4d4d;
  --primariooscuro: #ff4d4d;
  --secundarioscuro: rgb(85, 36, 175);
  --negro: rgb(255, 255, 0);
  --fuenteprincipal: "Oswald";
}
.categoria {
  height: 60px;
  width: 100%;
  padding-bottom: 60px;
  color: blue;
  text-align: left;
  font-size: 35px;
}
html {
  box-sizing: border-box;
  font-size: 60.5%;
}
* {
  margin: 0px;
  padding: 0px;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

/**Globales**/

body {
  background-color: var(--primario);
  font-size: 1.6 rem;
  line-height: 1.5;
}
p {
  font-size: 1.8rem;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--blanco);
  color: white;
}
a {
  text-decoration: none;
}
img {
  max-width: 90%;
}
.contenedor > h1 {
  max-width: 120rem;
  margin: 0 auto;
  color: #fefeff;
}
h1,
h2,
h3 {
  text-align: center;
  color: var(--secundario);
  font-family: var(--fuenteprincipal);
}
h1 {
  font-size: 4rem;
}
h2 {
  font-size: 3.2rem;
}
h3 {
  font-size: 2.4rem;
}
.header {
  display: flex;
  justify-content: center;
}
.header__logo,
h6 {
  margin: 3rem 0;
  width: 43rem;
  height: 20rem;
  font-size: 30px;
}

.comprar__titulo {
  color: #f1c70a;
  font-size: 4rem;
}
.bloque__titulo {
  color: #f1c70a;
  font-size: 3rem;
}

/*footer*/
.footer {
  background-color: black;
  padding: 1rem 0;
  margin-top: 2rem;
  color: white;
}
.footer__texto {
  font-family: var(--fuenteprincipal);
  text-align: center;
  font-size: 2.2rem;
}
.navegacion {
  background-color: black;
  padding: 1rem 0;
  display: flex;
  justify-content: center;
  gap: 2rem;
  color: white;
}
.navegacion__enlace {
  font-family: var(--fuenteprincipal);
  color: var(--blanco);
  font-size: 3rem;
  margin-right: 2rem;
}
.navegacion__enlace:last-of-type {
  margin-right: 0;
}
.navegacion__enlace:hover,
.navegacion__enlace__activo {
  color: var(--secundario);
}
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.producto__informacion {
  background-color: #fff;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
  border-radius: 20px;
}
.producto {
  padding: 1rem;
  border-style: double solid 10 rgba(241, 233, 233, 0.89);
}
.producto__imagen {
  width: 100%;
  border-radius: 700px 550px 8550px 200px;
  box-shadow: 5px 10px 10px 8px rgba(255, 255, 255, 0.87);
}
.producto__imagen:hover {
  width: 100%;
  border-radius: 50%;
  border-style: double solid 20 rgba(250, 10, 10, 0.89);
  box-shadow: 10px 5px 20px 0px rgba(255, 255, 255, 0.9);
  cursor: pointer;
}
.producto__nombre {
  font-size: 2.5rem;
  color: black;
}
.producto__precio {
  font-size: 2.8rem;
  color: black;
}
.producto__precio:hover {
  font-size: 2.8rem;
  color: white;
}
.producto__nombre:hover {
  font-size: 2.8rem;
  color: white;
}
.producto__informacion:hover {
  background-color: rgb(255, 0, 15);
  border-radius: 20px;
  color: white;
}
.producto__nombre,
.producto__precio {
  font-family: var(--fuenteprincipal);
  margin: 1rem 0;
  text-align: center;
  line-height: 1;
  color: black;
}
.grafico {
  min-height: 30rem;
  background-repeat: no-repeat;
  background-size: cover;
  grid-column: 1 / 3;
}
.grafico__ca {
  grid-row: 2 / 3;
  background-image: url(img/grafico1.jpg);
  border-radius: 20px;
}
.grafico__no {
  background-image: url(img/grafico2.jpg);
  grid-row: 8 / 9;
  border-radius: 20px;
}
@media (min-width: 768px) {
  .grafico__no {
    grid-row: 5 / 6;
    grid-column: 2 / 4;
  }
}

.nosotros {
  display: grid;
  grid-template-rows: repeat(2, auto);
  color: black;
}
@media (min-width: 768px) {
  .nosotros {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 2rem;
  }
}
.nosotros__imagen {
  grid-row: 1 / 2;
  min-width: 100%;
  border-radius: 20px;
}
@media (min-width: 768px) {
  .nosotros__imagen {
    grid-column: 2 / 3;
  }
}

.bloques {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
@media (min-width: 768px) {
  .bloques {
    grid-template-columns: repeat(4, 1fr);
  }
}

.bloque {
  text-align: center;
}

.bloque__titulo {
  margin: 0;
}

@media (min-width: 768px) {
  .camisa {
    display: flex;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 2rem;
  }
}

.galeria-hover {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  transform: scale(0);
  background: hsla(211, 64%, 73%, 0.7);
  transition: transform 0.5s;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.galeria-hover img {
  width: 50px;
}
.galeria-hover p {
  color: #fff;
}
.producto__imagen:hover .galeria-hover {
  height: 20px;
  width: 20px;
  background-color: #9b3224;
}