:root {
  --color-encabezado: #FC3D82;
  --color-fuente:#97214D;
  --color-fondo:#EF9FC4;
  --fuente:'elephant bold';
}

@font-face {
    font-family: 'elephant';
    src: url('../css/font/DKLemon.otf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    text-shadow:-1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}

@font-face {
    font-family: 'elephant bold';
    src: url('../css/font/DKLemon.otf');
    font-style: bold;
    font-display: swap;
    font-weight: 1200;
    text-shadow:-1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}


@font-face {
    font-family: 'elephant2';
    src: url('../css/font/DKLemon.otf');
    font-style: normal;
    font-display: swap;
    font-weight: 1200;
    text-shadow:-1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}
.spnprecio {
    font-size:4vh;
}
.scroll {
  scrollbar-color: var(--color-encabezado) var(--color-fondo);
  scrollbar-width: auto;
}

.elephant {
    font-family:var(--fuente);
    color:var(--color-fuente);
}

.banner {    
    /*background-image:url(../img/banner.png);    */
    background-color: rgba(74,253,231,0.5);
    background-size: auto 100%;
    background-position: center top;    
    text-shadow:-1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;       
}
.navbar {
    background-color: var(--color-encabezado);    
    font-size: 4vh;
    text-shadow:-1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}

.footer-item {
    color: var(--color-fuente);    
    font-size: 50vw;
}

.nav-link {
    color:var(--color-fuente);
    font-weight: bold;  

}

.list-group-item:hover {
    color:var(--color-fondo);    
    text-shadow:-1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}

.botonAgregar {
  border: none; 
  color: white; 
  padding: 14px 28px; 
  cursor: pointer; 
  border-radius: 5px; 
  display: inline-block;
  margin: 5px;
  border-radius:10px 0 10px 0;
}

body {
  font-family: "elephant bold";  
  background-image: url('../img/fondo2025.jpg');
  
}

@media (min-width: 992px) {
  body {
  
  }

}


@-webkit-keyframes opacityPulse {
    0% {opacity: 0.1;}
    50% {opacity: 1.0;}
    100% {opacity: 0.1;}
}

@keyframes opacityPulse {
    0% {opacity: 0.1;}
    50% {opacity: 1.0;}
    100% {opacity: 0.1;}
}


.opacityPulse-css {
    animation: opacityPulse 2s ease-out;
    animation-iteration-count: infinite;
    opacity: 1;
}

.logo {
  padding: 1px;
  background-color: black;
  transition: transform .2s; /* Animation */
  width: 50px;
  height: 50px;
  margin: 0 auto;  
} 

.logo:hover {      
  transform: rotate(1turn);
  -webkit-transform:rotate(1turn);
  border-radius:50%;  
  -webkit-border-radius:50%;
  box-shadow: 0px 0px 15px 15px red;
  -webkit-box-shadow: 0px 0px 15px 15px red;
}

.btn-inicio {
    position: fixed;
    right: 10px;
    bottom: 100px;
    z-index: 99;
}

.btn-wsp {
    position: fixed;
    right: 10px;
    bottom: 40px;
    z-index: 99;
}



.footer-distributed {
    background-color: #EFA8CF;
    color: var(--color-fuente);
    width: 100%;
    text-align: left;    
    font-size:  15wv;
    padding: 20px 20px;
    font-family: "elephant bold";
}

.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
    display: inline-block;
    vertical-align: top;    
}

/* Footer left */

.footer-distributed .footer-left{
    width: 30%;    
}




/* The company logo */

.footer-distributed h3{
    color:  var(--color-fuente);
    font-size: 36px;
    margin: 0;
}

.footer-distributed h3 span{
    color:  var(--color-fuente);    
}

/* Footer links */

.footer-distributed .footer-links{
    color:  var(--color-fuente);
    margin: 20px 0 12px;
    padding: 0;
}

.footer-distributed .footer-links a{
    display:inline-block;
    line-height: 1.8;
    text-decoration: none;
    color:  inherit;
}

.footer-distributed .footer-company-name{
    color:  #8f9296;
    font-size: 14px;
    font-weight: normal;
    margin: 0;
}

/* Footer Center */

.footer-distributed .footer-center{
    width: 35%;
    border-left:2px solid var(--color-fuente);
    
}

.footer-distributed .footer-center i{
    background-color:  #33383b;
    color: var(--color-fuente);
    font-size: 25px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    text-align: center;
    line-height: 42px;
    margin: 10px 15px;
    vertical-align: middle;
}

.footer-distributed .footer-center i.fa-envelope{
    font-size: 17px;
    line-height: 38px;
}

.footer-distributed .footer-center p{
    display: inline-block;
    color: var(--color-fuente);
    vertical-align: middle;
    margin:0;
}

.footer-distributed .footer-center p span{
    display:block;
    font-weight: normal;
    font-size:14px;
    line-height:2;
}

.footer-distributed .footer-center p a{
    color:  var(--color-fuente);
    text-decoration: none;
    text-width:1200;
}


/* Footer Right */

.footer-distributed .footer-right{
    width: 30%;
}

.footer-distributed .footer-company-about{
    line-height: 20px;
    color:  #92999f;
    font-size: 13px;
    font-weight: normal;
    margin: 0;
}

.footer-distributed .footer-company-about span{
    display: block;
    color:  #ffffff;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 20px;
}

.footer-distributed .footer-icons{
    margin-top: 25px;
}


.footer-distributed .footer-icons a{
    display: inline-block;
    width: 35px;
    height: 35px;
    cursor: pointer;
    background-color:  #33383b;
    border-radius: 2px;

    font-size: 20px;
    color: #ffffff;
    text-align: center;
    line-height: 35px;

    margin-right: 3px;
    margin-bottom: 2px;
}

.footer-distributed .footer-stsoftware{
    line-height: 20px;
    color:  #92999f;
    font-size: 10px;
    font-weight: normal;
    position:relative;
    right: 1px;
    bottom: 0px;

}

@media (max-width: 880px) {

    .footer-distributed{
        font: bold 14px sans-serif;
        padding: 55px 10px;
    }

    .footer-distributed .footer-left,
    .footer-distributed .footer-center,
    .footer-distributed .footer-right{
        display: block;
        width: 100%;
        margin-bottom: 40px;
        text-align: center;
    }

    .footer-distributed .footer-center i{
        margin-left: 0;
    }
}




/*********estilos para pedidos ***********************/
.linea {
  border-top: 1px solid black;
  height: 2px;
  max-width: 20%;
  margin: 15 0 0 0 ;  
}

.punto {
  border-top: 0px solid black;
  height: 2px;
  max-width: 5%;
  margin: 0 5 0 0 ;  
}

.inicial {
    color:black;    
}

.actual {
    color:red;
    border-color:red;
}
.pendiente{
    color:gray;
    border-color:gray;
}
.cumplido{
    color:green;
    border-color:green;
}

.btnLogin {
 background: #92c7eb;
 background-size: cover;
 background-position: center;
 display: inline-block;
 border: none;
 padding: 10px;
 width: 70px;
 border-radius: 900px;
 height: 70px;
 transition: all 0.5s;
 cursor: pointer;
font-size: calc(5px + 0.390625vw);
}
.btnLogin:hover
{
 width: 200px;
 height: 75px;
 font-size: calc(10px + 0.390625vw);
} 


.txtCyberMonday{

font-family: "elephant bold";
font-weight: bold;  
color: var(--color-fuente); 
text-transform: uppercase;
}
  
 .btnLogin {
 background: #92c7eb;
 background-size: cover;
 background-position: center;
 display: inline-block;
 border: none;
 padding: 10px;
 width: 70px;
 border-radius: 900px;
 height: 70px;
 transition: all 0.5s;
 cursor: pointer;
font-size: calc(5px + 0.390625vw);
}
.btnLogin:hover
{
 width: 200px;
 height: 75px;
 font-size: calc(10px + 0.390625vw);
} 


.btncarrito {
  border-radius: 4px;
  background-color: #edbad1;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.btncarrito span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.btncarrito span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.btncarrito:hover span {
  padding-right: 25px;
}

.btncarrito:hover span:after {
  opacity: 1;
  right: 0;
}