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

:root {
  --fuenteTitulo: "Young Serif", serif;
  --fuenteTextos: "Manrope", sans-serif;

  --naranja: #f58634;
  --negro: #515151;
  --blanco: #ffffff;
  --gris: #7d7d7d;
  --grisClaro: #f0f0f0;
}

/** Nuestros Servicios **/
.nuestros-servicios {
  width: 100%;
  padding: 2rem;
  background-color: var(--grisClaro);
}

.nuestros-servicios-headig {
  margin: 2rem 0 0 0;
  text-align: center;
  font-family: var(--fuenteTitulo);
  font-weight: 400;
  color: var(--negro);
  font-size: 30px;
}

/* .nuestros-servicios-headig h2{
  font-size: 50px;
} */

.nuestros-servicios-headig span {
  color: var(--naranja);
  font-weight: 700;
}

.nuestros-servicios-cards {
  margin-top: 3rem;
  margin-bottom: 3rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.card-servicio {
  background-color: var(--blanco);
  border: 1px solid var(--blanco);
  border-radius: 10px;
  padding: 2rem 1rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.card-servicio-img {
  height: 9rem;
}

.card-servicio p {
  font-size: 13px;
  font-family: var(--fuenteTextos);
  font-weight: 700;
  text-align: center;
}

@media (min-width: 768px) {
  .nuestros-servicios-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  /* .nuestros-servicios-headig {
    font-size: 24px;
  } */

  .nuestros-servicios-cards {
    grid-template-columns: repeat(4, 1fr);
  }

  .card-servicio {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 1;
  }

  .card-servicio-txt {
    font-size: 16px;
    text-align: center;
    margin-top: 1.5rem;
  }
}

/** Realiza Tu Pedido **/
.realiza-tu-pedido {
  width: 100%;
  padding: 2rem;
  background-color: var(--naranja);
}

.realiza-tu-pedido-heading {
  margin: 2rem 0 0 0;
  font-size: 20px;
  text-align: left;
  font-family: var(--fuenteTitulo);
  font-weight: 400;
  color: var(--blanco);
}

.realiza-tu-pedido-heading span {
  font-weight: 700;
  font-size: 22px;
}

#comercial {
  color: var(--naranja);
  font-size: 30px;
  text-shadow: 0px 0px 4px #ffffff, 1px 1px 3px #ffffff, -1px -1px 3px #ffffff,
    1px -1px 3px #ffffff, -1px 1px 3px #ffffff;
}

.realiza-tu-pedido-cards {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 2rem;
}

.card-pedido {
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}

.card-pedido-img {
  width: 20rem;
}

.card-pedido-txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.card-pedido-txt h3 {
  margin: 0;
  text-align: center;
  font-family: var(--fuenteTitulo);
  color: var(--blanco);
}

.card-pedido-txt p {
  font-family: var(--fuenteTextos);
  font-weight: 400;
  color: var(--blanco);
  text-align: center;
}

.card-pedido-txt h3 {
  margin-top: 1rem;
  font-family: var(--fuenteTitulo);
  font-size: 18px;
  height: 6rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-pedido-txt p {
  font-family: var(--fuenteTextos);
  font-size: 14px;
}

@media (min-width: 768px) {
  .card-pedido {
    flex-direction: row;
    gap: 1rem;
  }
}

@media (min-width: 1024px) {
  .realiza-tu-pedido-heading {
    font-size: 24px;
  }

  .realiza-tu-pedido-cards {
    grid-template-columns: repeat(4, 1fr);
  }

  .card-pedido {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: center;
  }

  .card-servicio-txt {
    font-size: 16px;
    text-align: center;
    margin-top: 1.5rem;
  }
}

.realiza-pedido-btn {
  background-color: var(--blanco);
  color: var(--naranja);
  height: 4rem;
  margin: 0;
  max-width: 400px;
  border: 1px solid var(--naranja);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  margin-left: 15rem;
  font-size: 18px;
}

.realiza-pedido-btn:hover {
  background-color: var(--naranja);
  color: var(--blanco);
  border: 1px solid var(--blanco);
}

.realiza-siguenos {
  margin-top: 5%;
  display: flex;
  justify-content: space-between;
}

.siguenos {
  margin-top: 1rem;
  display: flex;
  align-items: end;
  gap: 2rem;
}

.siguenos p {
  color: var(--blanco);
  font-size: 13px;
}

.siguenos-redes {
  display: flex;
  border-radius: 20px 0px 0px 0px;
  gap: 5rem;
  justify-content: flex-end;
  align-items: center;
  padding-top: 1rem;
  padding-left: 4rem;
  padding-right: 3rem;
  box-shadow: -4px -3px 5px 0px rgba(0, 0, 0, 0.15);
}

.siguenos-redes img {
  width: 4rem;
  cursor: pointer;
}

@media (min-width: 768px) {
  .realiza-siguenos {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    align-items: center;
  }
}

.nuestros-productos {
  width: 100%;
  padding: 2rem;
  background-color: var(--blanco);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nuestros-productos-headig {
  margin: 2rem 0 0 0;
  font-size: 30px;
  text-align: center;
  font-family: var(--fuenteTitulo);
  font-weight: 400;
  color: var(--negro);
}

.nuestros-productos-headig span {
  color: var(--naranja);
  font-weight: 700;
}

/** Nuestros Productos **/

.productos-container {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-top: 3rem;
}

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
  margin-bottom: 9rem;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the back side */
.flip-card-back {
  background-color: rgb(255, 255, 255);
  border-radius: 20px;
  transform: rotateY(180deg);
}

.flip-card h1 {
  color: #f58634;
  font-size: 30px;
  margin: 2rem;
}

.btn-ver-productos_container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ver-productos {
  margin-top: 3rem;
  background-color: var(--naranja);
  color: var(--blanco);
  cursor: pointer;
  max-width: 300px;
}

.ver-productos:hover {
  background-color: var(--blanco);
  color: var(--naranja);
  outline: 2px solid var(--naranja);
}

@media (max-width: 1024px) {
  .productos-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

/** Valores **/
.nuestros-valores {
  background-color: var(--blanco);
  width: 100%;
}

.nuestros-valores-cards {
  display: grid;
  grid-template-columns: 1fr;
}

.valor-card {
  display: flex;
  gap: 3rem;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.valor-card img {
  width: 15rem;
}

.valor-card-txt h3 {
  text-align: center;
  font-size: 16px;
}

.valor-card-txt p {
  text-align: center;
  font-size: 14px;
}

.valor-card:nth-child(1),
.valor-card:nth-child(3) {
  background-color: #f0f0f0;
}

.valor-card:nth-child(2) {
  background-color: #dedede;
  flex-direction: row-reverse;
}

@media (min-width: 1024px) {
  .nuestros-valores-cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .valor-card {
    flex-direction: column;
  }

  .valor-card:nth-child(2) {
    flex-direction: column;
  }
}

@media (max-width: 1024px) {
  .realiza-pedido-btn {
    margin-left: 0rem;
  }

  .realiza-siguenos {
    flex-direction: column;
  }

  .siguenos-redes {
    margin-top: 3rem;
  }
}

@media (max-width: 767px) {
  .siguenos {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .siguenos p {
    margin-top: 5rem;
  }

  .realiza-siguenos {
    justify-content: center;
    align-items: center;
  }

  .siguenos-redes {
    margin-top: 1rem;
  }
}

.clientes {
  width: 100%;
  margin-top: 5rem;
}

.clientes__lista {
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
  gap: 2rem;
}

@media (min-width: 768px) {
  .clientes__lista {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 0 2rem;
  }
}