@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Libre+Bodoni:ital,wght@0,400..700;1,400..700&display=swap");

:root {
  --rosita: #fadbd6;
  --rosa: #e58d97;
  --marron: #59373b;
  --textoChico: 16px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}
body {
  height: auto;
  margin: 0 auto;
  max-width: 1920px;
  background-color: var(--rosita);
  font-family: "Roboto", serif;
  font-weight: 400;
  font-style: normal;
}

/* Header */
header {
  background: radial-gradient(
    circle,
    rgba(250, 219, 214, 1) 57%,
    rgba(229, 141, 151, 1) 100%
  );
}
#contenedorLogo {
  border-right: 1px solid #59373b;
  border-left: 1px solid #59373b;
  padding-top: 5px;
}

#logoA {
  margin: auto;
  width: 200px;
  height: 80px;
}

#textoLogo {
  color: var(--marron);
  margin: 0%;
}
#info {
  background-color: var(--rosa);
  color: var(--marron);

}
#info h2 {
  margin: auto;
    font-size: 16px;
}
#info h1 {
  font-family: "Courier New";
  margin: auto;
  animation: marquee 9.5s infinite linear;
  font-size: 24px;
  text-shadow: 0px 0px 7px rgba(80, 5, 5, 0.6);
}
#info2 {
  background: rgb(250, 219, 214);
  background: linear-gradient(
    190deg,
    rgba(250, 219, 214, 1) 0%,
    rgba(229, 141, 151, 1) 100%
  );
  margin: 1%;
}
#info2 p {
  color: var(--rosita);
  font-family: "Courier New";
  font-weight: 400;
  font-style: normal;
  font-size: var(--textoChico);
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--marron);
  text-shadow: 0px 0px 7px rgba(80, 5, 5, 0.6);
  margin: auto;
}

@keyframes marquee {
  0% {
    transform: translateX(-10%);
  }
  100% {
    transform: translateX(0%);
  }
}

.whatsapp {
  text-shadow: 6px 6px 31px rgba(100,51,57,1);

}
.whatsapp .bi {
  position:fixed;
  width:60px;
  height:60px;
  bottom:60px;
  right:40px;
  /* background: radial-gradient(circle, rgba(238,170,178,1) 57%, rgba(229,141,151,0.4654236694677871) 20%); */
  color:var(--marron);
  /* border-radius:50px; */
  text-align:center;
  /* align-items: center; */
   font-size:30px;
  z-index:100;

}
.inputMio {
  border: var(--marron) solid 1px;
  background-color: var(--rosita);
  margin-top: 2%;
}

.inputBtonMio {
  border: var(--marron) solid 1px;
  background-color: var(--rosa);
  margin-top: 2%;
}

.logoCantidadPesos {
  text-decoration: none;
  color: var(--marron);
  text-align: start;
}
#usuarioIngresarCrear ul li a {
  color: var(--marron);
}
.row figcaption {
  margin-bottom: 0;
}
.row figure {
  margin-bottom: 0;
}
hr {
  height: 1px;
  box-shadow: 0px 0px 9px 2px #59373b;
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
}

/* Fin header */

/* Inicio main */
#ContenedorCard {
  margin-top: 2%;
}
.card {
  margin: auto;
  border: var(--rosa) solid 3px;
  border-radius: 5px;
  box-shadow: 0px 0px 17px 7px rgba(229, 141, 151, 0.75);
  -webkit-box-shadow: 0px 0px 17px 7px rgba(229, 141, 151, 0.75);
  -moz-box-shadow: 0px 0px 17px 7px rgba(229, 141, 151, 0.75);
}
.fotoProductoCard{
  width: 275px;
  height: 310px;
}
.cardMio {
  width: 280px;
  margin-bottom: 4%;
}
.btonMio {
  color: var(--marron);
  border: var(--rosa) solid 3px;
  background: linear-gradient(
    190deg,
    rgba(250, 219, 214, 1) 0%,
    rgba(229, 141, 151, 1) 100%
  );
}
.precioProducto {
  text-align: center;
  color: var(--marron);
  font-size: 24px;

  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

/* fin Main */
/* Inicio Footer */
footer {
  background: radial-gradient(
    circle,
    rgba(250, 219, 214, 1) 57%,
    rgba(229, 141, 151, 1) 100%
  );
  border-top: var(--marron) solid 2px;
  margin-top: 2%;
  color: var(--marron);
  font-size: 18px;
  font-family: "Libre Bodoni", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}
footer .row {
  margin-top: 2%;
}
.mapaUbicacion {
  border: var(--marron) solid 2px;
  margin-top: 2%;
  border-radius: 5%;
}
/* Fin footer */

/* Inicio Modales  */

/* Modal Carrito */

.modalMio {
  border: var(--marron) solid 2px;
  background-color: var(--rosita);
  color: var(--marron);
}

/* Modal Carrito Pago */
#modalPago .modal-header {
  text-align: center;
  background-color: var(--marron);

}

#modalPago .modal-title {
  margin: auto;
  color: var(--rosa);
  font-size: 24px;
}
#logoCarritoModal {
  margin: auto;
  width: 50%;
}
#totalPagarUltim {
  width: 100%;
  background-color: var(--marron);
  padding: 5%;
  border-radius: 6px;
}
#totalPagarUltim h5 {
  margin: auto;
  color: var(--rosa);
}

/*=============================================
ESCRITORIO GRANDE (LG revisamos en 1366px en adelante)
=============================================*/

@media (min-width: 1200px) {
  .registro ul {
    font-size: 24px;
  }
}

/*=============================================
ESCRITORIO MEDIANO O TABLET HORIZONTAL (MD revisamos en 1024px)
=============================================*/

@media (min-width: 992px) {
  .registro ul {
    font-size: 18px;
  }
}

/*=============================================
ESCRITORIO PEQUEÑO O TABLET VERTICAL (SM revisamos en 768px)
=============================================*/

@media (max-width: 991px) and (min-width: 768px) {
  .registro ul {
    font-size: 14px;
  }
}

/*=============================================
ESCRITORIO PEQUEÑO O TABLET VERTICAL (SM revisamos en 768px)
=============================================*/

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  ...;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .registro ul {
    font-size: 14px;
  }
  #logoCarrito {
    font-size: 24px;
    background-color: var(--rosa);
    border: var(--marron) solid 1px;
    border-radius: 5%;
    margin: auto;
    padding-top: 2px;
    padding-bottom: 5px;
    padding-right: 8px;
    padding-left: 8px;
  }
  h1{ font-size: 16px;}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  ...;
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  ...;
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  ...;
}