@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Raleway:wght@100;200;300;400;500;600;700;800;900&display=swap');



@font-face {

  font-family: 'Austria';

  src: url('./fonts/fonts/Austria.otf') format('opentype');

}

@font-face {

  font-family: 'Segoe';

  src: url('./fonts/fonts/Segoe\ UI.ttf') format('opentype');

}



.titleMerch p {

  font-size: 80px;

  font-weight: bold;

  font-family: 'Montserrat', sans-serif;

  text-align: center;

  color: #000;

  letter-spacing: 1.48px;

}
.titleSec{
  font-size: 80px;

  font-weight: bold;

  font-family: 'Montserrat', sans-serif;

  text-align: center;

  color: #000;

  letter-spacing: 1.48px;
}



.subMerch p {
  font-size: 100px;
  font-weight: 200;
  font-family: 'Austria', sans-serif;
  text-align: center;
  color: #676767;
  opacity: .3;
}


.barra {
  background-color: #D4A315;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.barra p {
  font-size: 30px;
  font-weight: bold;
  font-family: 'Montserrat', sans-serif;
  color: #fff;
  margin-bottom: 0;
}

@media only screen and (max-width: 600px) {
  .titleMerch p {
    font-size: 30px;
  }

  .subMerch p {
    font-size: 25px;
  }

  .barra p {
    font-size: 15px;
  }
}

.card-title {

  text-align: left;

  font-size: 15px;

  font-weight: bold;

  font-family: 'Montserrat', sans-serif;

  color: #000000;

  margin-bottom: 0;

}

.card-title span {
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
}



.card-body {

  padding: 1rem 0rem;

}



.precio-detail {

  font-size: 45px;

  font-family: 'Raleway', sans-serif;

  font-weight: 600;

  text-align: left;

  color: #FC0E31;

}



.nombre-detail {

  font-size: 30px;

  font-weight: 600;

  font-family: 'Raleway', sans-serif;

  text-align: left;

  color: #FC0E31;

}



.texto-div {

  text-align: left;

  font-size: 20px;

  font-family: 'Raleway', sans-serif;

  font-weight: 600;

  color: #000000;

}



.desColor,
.desColor2 {

  font-size: 30px;

  font-weight: 500;

  font-family: 'Raleway', sans-serif;

  color: #000000;

}

.desColor span,
.desColor2 span {
  text-align: left;
  font-family: 'Raleway', sans-serif;
  color: #201F1F;
  font-weight: bold;
}

.espacio_pequeno {
  height: 20px;
  margin-bottom: 0;
}

.morado {

  background-color: #7947C7;

}



.rojo {

  background-color: #D4394D;

}



.naranja {

  background-color: #FE8E4B;

}



.negro {
  background-color: #000000;
}
.no-aplica{
  display: none;
}
.turquesa {
  background-color: #42E4C9;
}

.gris {
  background-color: #717B8E;
}

.azul {
  background-color: #C6E8F2;
}

.lila {
  background-color: #E9C2F7;
}

.salmon {
  background-color: #EEB0AC;
}

.rosa {
  background-color: #E490AC;
}

.azulF {
  background-color: #02253E;
}

.morado,

.rojo,

.naranja,

.negro,

.turquesa,

.gris,

.azul,

.lila,

.salmon,

.rosa,

.azulF {
  border-radius: 50%;
}

.form-check-input {
  margin-top: 0em;
}

.morado:checked {
  background-color: #7947C7 !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0px 0px 0px 1.5px #FC0E31;
}

.rojo:checked {
  background-color: #D4394D !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0px 0px 0px 1.5px #FC0E31;
}

.naranja:checked {
  background-color: #FE8E4B !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0px 0px 0px 1.5px #FC0E31;
}

.negro:checked {
  background-color: #000000 !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0px 0px 0px 1.5px #FC0E31;
}

.turquesa:checked {
  background-color: #42E4C9 !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0px 0px 0px 1.5px #FC0E31;
}

.gris:checked {
  background-color: #717B8E !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0px 0px 0px 1.5px #FC0E31;
}

.azul:checked {
  background-color: #C6E8F2 !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0px 0px 0px 1.5px #FC0E31;
}

.lila:checked {
  background-color: #E9C2F7 !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0px 0px 0px 1.5px #FC0E31;
}

.salmon:checked {
  background-color: #EEB0AC !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0px 0px 0px 1.5px #FC0E31;
}

.rosa:checked {
  background-color: #E490AC !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0px 0px 0px 1.5px #FC0E31;
}

.azulF:checked {
  background-color: #02253E !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0px 0px 0px 1.5px #FC0E31;
}



.tallC:checked {
  background-color: #fff !important;
  border-color: #000 !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0px 0px 0px 1.5px #FC0E31;
}



.playE:checked {
  background-color: #fff !important;
  border-radius: 0px !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0px 0px 0px 1.5px #FC0E31;
}
.colorAT:checked {
  background-color: #fff !important;
  border-radius: 0px !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0px 0px 0px 1.5px #FC0E31;
}



.form-check-input {

  width: 2em;

  height: 2em;

  border: none;

}



.tallC {

  /* width: 4em;

  height: 3em;

  border: 1px solid black !important;

  border-radius: 10px !important; */

  width: 6em;
  height: 2.5em;
  border: 2px solid black !important;
  border-radius: 0px !important;
}



.playE {

  width: 4.9em;

  height: 4.9em;

  /* border: 1px solid black !important; */

  border-radius: 10px !important;

  transition: .5s all ease-in-out;



}
.colorAT {

  width: 4.9em;

  height: 4.9em;

  /* border: 1px solid black !important; */

  border-radius: 10px !important;

  transition: .5s all ease-in-out;



}



.posPlay {

  position: relative;

  left: 0.2em;

  top: -4.7em;

}



.imgPlay {

  width: 4.5em;

  border: 1px solid;

  /* border-radius: 10px; */

  transition: .5s all ease-in-out;

}



/* .imgPlay:hover {

    width: 5.5em;

}

.playE:hover {

    width: 5.9em;

    height: 5.9em;

}

.posPlay:hover {

    top: -5.7em;

} */

.cont-rad {

  height: 100%;

  /* background: red;  */

  width: 90px;

}





.boton-resta,

.boton-suma {

  border: 1px solid #FC0E31;

  width: 2.5em;

  height: 2.5em;

  padding: 0em 0em 0em 0em;

  margin-top: -6px;

  transition: .1s all ease-in;

  border-radius: 0px;
}



.cantidad-input {

  text-align: center;

  width: 2.5em;

  height: 2.5em;

  border: 1px solid #FC0E31;

  padding: 0em 0em 0em 0em;

  transition: .1s all ease-in;

}



.boton-anadir-carrito,
.boton-anadir-carrito2,
.boton-anadir-carrito3 {

  background: #FC0E31 0% 0% no-repeat padding-box;

  box-shadow: 0px 10px 10px #00000029;

  border-radius: 33px;

  font-size: 20px;

  font-family: 'Raleway', sans-serif;

  color: #FFFFFF;

  padding: 0.5em 1em 0.5em 1em;
  transition: .5s all ease;

}





@media only screen and (max-width: 600px) {

  .boton-anadir-carrito,
  .boton-anadir-carrito2,
  .boton-anadir-carrito3 {

    margin-top: 20px;

  }


}


.boton-anadir-carrito:hover,
.boton-anadir-carrito2:hover, 
.boton-anadir-carrito3:hover {

  background: #FC0E31 0% 0% no-repeat padding-box;

  box-shadow: 0px 10px 10px #00000029;

  color: #FFFFFF;

  transform: translateY(-15%);

}



.boton-resta:hover,

.boton-suma:hover,

.cantidad-input:hover {

  border: 2px solid #FC0E31;

}



.form-check-input:checked[type=radio] {

  background-image: none;

}



.accordion-button {

  width: 65%;

  font-size: 25px;

  font-weight: 600;

  border: 1px solid #fc0e3147;

  margin-top: 10px;

}



.accordion-button:not(.collapsed) {

  color: #FC0E31;

  background-color: #ffffff;

  box-shadow: none;

}



.accordion-button:focus {

  z-index: 3;

  border-color: #FC0E31;

  outline: 0;

  box-shadow: none;

  margin-bottom: 5px;

}



#img-gran {

  width: 70%;

  height: auto;

  padding: 1em;

}



.merch {

  display: flex;

}



.btn-ver-pedido {

  background-color: #D4A315;

  color: #ffffff;

  font-family: 'Raleway';

  font-size: 16px;

  border-radius: 8px;

  transition: 1s all ease;

}



.btn-ver-pedido:hover {

  color: #ffffff;

  background-color: #D4A315;

  box-shadow: 0px 5px 17px 0px #000000b5;

}



.buscador {

  border-radius: 20px;

  border: 1px solid #D4A315;

  height: 2em;

  margin-left: 2em;

  margin-top: 0.5em;

  margin-right: 1em;

}



.img-carrito {

  cursor: pointer;

}



.cartTextHeadNombre {

  color: #000000;

  font-size: 15px;

  font-family: 'Raleway';

  margin-top: 13px;

}



.cartTextHeadNombre:hover {

  cursor: pointer;

  text-decoration: underline;

}



.text-product {

  background: red;

  width: 26px;

  height: 26px;

  color: white;

  border-radius: 44px;

  text-align: center;

}



.cuadroBusqueda {

  background: rgb(255, 255, 255);

  width: 20em;

  height: 9em;

  overflow-y: scroll;

  overflow-x: hidden;

  position: absolute;

  top: 3em;

  z-index: 1;

  border-bottom: 2px solid #C4AB09;

  border-right: 2px solid #C4AB09;

  border-left: 2px solid #C4AB09;

  border-radius: 6px;

  padding: 1em;

}



.cuadroBusqueda::-webkit-scrollbar {

  width: 8px;

  height: 8px;

}



.cuadroBusqueda::-webkit-scrollbar-thumb {

  background: #ccc;

  border-radius: 4px;

}



.cuadroBusqueda::-webkit-scrollbar-thumb:hover {

  background: #b3b3b3;

  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);

}



.cuadroBusqueda::-webkit-scrollbar-thumb:active {

  background-color: #999999;

}



/* .cuadroBusqueda {

  display: none;

}

*/

/* .cuadroBusqueda:hover {

  display: block;

}  */



.btn-pedido {

  background-color: #D4A315;

  color: white;

  text-align: center;

  font-size: 1.1em;

  cursor: pointer;

  width: 100%;

  padding: 5px;

  font-weight: 700;

}



.cuadroProducto {



  background: rgb(255, 255, 255);

  width: 20em;

  height: 15em;

  overflow-y: scroll;

  overflow-x: hidden;

  position: absolute;

  top: 3em;

  z-index: 1;

  border-bottom: 2px solid #D4A315;

  border-right: 2px solid #D4A315;

  border-left: 2px solid #D4A315;

  border-radius: 6px;

  padding: 1em;

  right: 18em;



}



.cuadroProducto::-webkit-scrollbar {

  width: 8px;

  height: 8px;

}



.cuadroProducto::-webkit-scrollbar-thumb {

  background: #ccc;

  border-radius: 4px;

}



.cuadroProducto::-webkit-scrollbar-thumb:hover {

  background: #b3b3b3;

  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);

}



.cuadroProducto::-webkit-scrollbar-thumb:active {

  background-color: #999999;

}



.cuadroProducto {

  display: none;

}





.cuadroProducto:hover {

  display: block;

}



.card-text-desc1 {

  position: relative;
  opacity: 0.7;
  color: gray;
  margin-bottom: -10px;
  text-align: left;
  font-size: 18px;
  font-family: 'Segoe', sans-serif;
}

.card-text-desc {
  font-family: 'Raleway', sans-serif;
  position: relative;
  opacity: 0.7;
  color: gray;
  margin-top: -35px;
  text-align: left;
  font-size: 30px;
  margin-bottom: -13px;
  font-weight: bold;

}



.card-text-nor {

  text-align: left;

  font-size: 25px;

  font-weight: 600;

  color: #000000;


  font-family: 'Segoe', sans-serif;

}



.card-text-desc1 span {

  background: #D4A315;
  display: block;
  width: 47px;
  height: 4px;
  position: absolute;
  top: 13px;
  left: 0%;
  transform: skewY(19deg);
}

.card-text-desc span {
  background: #D4A315;
  display: block;
  width: 74px;
  height: 6px;
  position: absolute;
  top: 20px;
  left: 0%;
  transform: skewY(19deg);
}



input[type="number"]::-webkit-inner-spin-button,

input[type="number"]::-webkit-outer-spin-button {

  -webkit-appearance: none;

  margin: 0;

}



input[type="number"] {

  -moz-appearance: textfield;

  /* Firefox */

}



.cantidadportalla:hover {

  cursor: pointer;

}



@media screen and (max-width:468px) {

  .boton-anadir-carrito,
  .boton-anadir-carrito2,
  .boton-anadir-carrito3 {
    margin-left: 0rem;
    margin-top: 25px;
  }

  .discos {
    margin-right: 15px;
    margin-left: 15px;
  }

  .precio-detail {
    font-size: 40px;
  }

  .card-text-desc {
    font-size: 25px;
  }

  .card-text-desc span {
    width: 56px;
    top: 16px;
  }

  div#precio {
    margin-bottom: 20px;
  }

  .title-pago p {
    font-size: 40px!important;
  }
}

/* -------------------------------------- */

.espacio-carrito {

  height: 100px;

}



.lupa {

  position: relative;

  left: -3em;

  top: 1em;

}



.title-pago p {

  color: #2C2C2C;

  font-size: 70px;

  font-weight: bold;

}



.mg3 input:focus,

.mg3 select:focus,

.mg3 textarea:focus {

  background-color: #fff !important;

  color: #000 !important;

}



.mg3 input:checked {

  background-color: #0d6efd !important;

  color: #000 !important;

}



.mg3 textarea,

.mg3 input,

.mg3 select,

.buscador {

  background-color: #fff !important;

  color: #000 !important;

}



.inp {

  width: 1em;

  height: 1em;

  border: 1px solid gray;

}



.form-check .inp:focus {

  background-color: #0d6efd
}



.rfg {

  display: none;

}



.rfc {

  display: block;

}



.def {

  display: none;

}



.dep {

  display: block;

}



.mg3 {

  padding-bottom: 10px;

}



.merch #bolsa {

  width: 45px;

}



.btn-efecPe a button {

  list-style-type: none;

  margin: 0;

  padding: 0;

}



.btn-efecPe a button {

  --c: #FC0E31;

  color: var(--c);

  font-size: 15px;

  border: 0.3em solid var(--c);

  border-radius: 40px;

  width: 12em;

  height: 3.2em;

  text-transform: uppercase;

  font-weight: bold;

  font-family: sans-serif;

  letter-spacing: 0.1em;

  text-align: center;

  line-height: 3em;

  position: relative;

  overflow: hidden;

  z-index: 1;

  transition: 0.5s;

  margin: 1em;

  background: white;

  padding: 0px 10px;

}



.btn-efecPe a button span {

  position: absolute;

  width: 25%;

  height: 100%;

  background-color: var(--c);

  transform: translateY(150%);

  border-radius: 50%;

  left: calc((var(--n) - 1) * 25%);

  transition: 0.5s;

  transition-delay: calc((var(--n) - 1) * 0.1s);

  z-index: -1;

}



.btn-efecPe a button:hover {

  color: white;

}



.btn-efecPe a button:hover span {

  transform: translateY(0) scale(2);

}



.btn-efecPe a button span:nth-child(1) {

  --n: 1;

}



.btn-efecPe a button span:nth-child(2) {

  --n: 2;

}



.btn-efecPe a button span:nth-child(3) {

  --n: 3;

}



.btn-efecPe a button span:nth-child(4) {

  --n: 4;

}



/* ----------------------------pagar con----------------------- */

.btn-efecPa a button {

  list-style-type: none;

  margin: 0;

  padding: 0;

}



.btn-efecPa a button {

  --c: #FC0E31;

  color: var(--c);

  font-size: 15px;

  border: 0.3em solid var(--c);

  border-radius: 40px;

  width: 12em;

  height: 3.2em;

  text-transform: uppercase;

  font-weight: bold;

  font-family: sans-serif;

  letter-spacing: 0.1em;

  text-align: center;

  line-height: 3em;

  position: relative;

  overflow: hidden;

  z-index: 1;

  transition: 0.5s;

  margin: 1em;

  background: white;

  padding: 0px 10px;

}



.btn-efecPa a button span {

  position: absolute;

  width: 25%;

  height: 100%;

  background-color: var(--c);

  transform: translateY(150%);

  border-radius: 50%;

  left: calc((var(--n) - 1) * 25%);

  transition: 0.5s;

  transition-delay: calc((var(--n) - 1) * 0.1s);

  z-index: -1;

}



.btn-efecPa a button:hover {

  color: white;

  border: 0.3em solid #FC0E31;

}



.btn-efecPa a button:hover span {

  transform: translateY(0) scale(2);

}



.btn-efecPa a button span:nth-child(1) {

  --n: 1;

}



.btn-efecPa a button span:nth-child(2) {

  --n: 2;

}



.btn-efecPa a button span:nth-child(3) {

  --n: 3;

}



.btn-efecPa a button span:nth-child(4) {

  --n: 4;

}

/* ------------------------------------Menu lateral------------------------------------------- */
.categoria-tienda {
  background: #D4A315;
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: bold;
  padding: 10px;
  text-align: left;
  margin-bottom: 0px;
  cursor: pointer;

}

.card ul {
  list-style: none;
  padding: 0em 2em 0em 2em;
  text-align: left;
  font-size: 15px;
  color: #000;
  font-family: 'Montserrat', sans-serif;
}

.card ul li {
  margin-bottom: 5px;
  cursor: pointer;
  transition: .3s all ease-out;
}

.card ul li:hover {
  font-weight: 600;
}

.catFam {
  background: #D4A315;
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: bold;
  padding: 10px;
  text-align: left;
  margin-bottom: 5px;
  cursor: pointer;
}

.catProd {
  list-style: none;
  padding: 7px;
  text-align: left;
  font-size: 15px;
  color: #000;
  font-family: 'Montserrat', sans-serif;
}

.selectMenu {
  font-weight: 700;
  color: #D4A315;
  padding-bottom: 0px;
  transition: .3s all ease-in-out;
  font-size: 15px;
  border-bottom: 1px solid #D4A315;
}

.padd {
  padding: 3rem;
}

.submenmerch {
  width: 14%;
}

@media screen and (min-width: 992px) {

  .tien-mov {
    display: none;
  }

}

@media screen and (max-width:1366px) {
  .submenmerch {
    width: 20%;
  }
}

@media screen and (max-width:1024px) {
  .padd {
    padding: 1rem;
  }

  .submenmerch {
    width: 22.5%;
  }
}

@media screen and (max-width: 991px) {
  
  .tien-esc {
    display: none;
  }
  
}
@media screen and (max-width:468px) {
  .padd {
    padding: 0rem;
  }
}
@media screen and (max-width:375px){
  .padd {
    padding: 0rem;
  }

}