/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
html{
  
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
   scroll-behavior: smooth
}



/* 1. Selector universal para toda la página y todos los elementos */
*,
*::before,
*::after,
html,
body,
a,
button,
input,
textarea,
select,
.buy,
.card,
#mascota,
.categories a {
  cursor: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/519428b1-ab9d-4778-b28e-7c79ff0290c0/dktklyy-7c9d2edf-af07-4f24-b40f-8f37a61c05f1.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiIvZi81MTk0MjhiMS1hYjlkLTQ3NzgtYjI4ZS03Yzc5ZmYwMjkwYzAvZGt0a2x5eS03YzlkMmVkZi1hZjA3LTRmMjQtYjQwZi04ZjM3YTYxYzA1ZjEucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.t2jo9j2x-QabgH1OKBalFrDIKbrg4EPGbFzHccZncGc") 16 16, auto !important;
}

/* 2. Forzar el cursor personalizado al interactuar (apuntar, hacer clic, selecciones) */
a:hover,
button:hover,
input:hover,
textarea:hover,
*:hover,
*:active,
*:focus {
  cursor: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/519428b1-ab9d-4778-b28e-7c79ff0290c0/dktklyy-7c9d2edf-af07-4f24-b40f-8f37a61c05f1.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiIvZi81MTk0MjhiMS1hYjlkLTQ3NzgtYjI4ZS03Yzc5ZmYwMjkwYzAvZGt0a2x5eS03YzlkMmVkZi1hZjA3LTRmMjQtYjQwZi04ZjM3YTYxYzA1ZjEucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.t2jo9j2x-QabgH1OKBalFrDIKbrg4EPGbFzHccZncGc") 16 16, auto !important;
}






body{
    background:#ffdbf7;
    color:#333;
 
}



/* HEADER */

.topbar{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    background:#d4f6ff;

    z-index:99999;

    box-shadow:0 2px 10px rgba(0,0,0,.15);

} 


header{
   height:180px;

    background:#fff4d4;

    padding:20px;

    text-align:center;
}



/* LOGO */
header img{
    width:90px;
    height:90px;
    border-radius:50%;
    object-fit:cover;
}

header h1{
    margin-top:10px;
    font-size:30px;
}

header p{
    margin-top:5px;
    color:#666;
}





/* BUSCADOR */

.search{
    padding:15px;
}

.search input{
    width:98.3%;
    padding:14px;
    border-radius:12px;
    border:1px solid #ddd;
    font-size:16px;
}
#sinResultados{

display:none;

text-align:center;

padding:50px;

font-size:22px;

color:#777;

}





/* CATEGORIAS */

.categories{

    display:flex;

    overflow-x:auto;

    gap:10px;

    padding:0 15px 15px;

    white-space:nowrap;

}

.categories a{
    text-decoration:none;
    background:#ff7eb6;
    color:white;
    padding:10px 18px;
    border-radius:30px;
    white-space:nowrap;
    font-weight:bold;
}





/* SECCIONES */

section{
    padding-top:20px;
    scroll-margin-top:300px;
}

section h2{
    margin-left:15px;
    margin-bottom:10px;
    font-size:26px;
}




/* PRODUCTOS */

.products{

display:flex;

gap:18px;

overflow-x:auto;

overflow-y:hidden;

padding:15px;

}


.card{

    background:#d4f6ff;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 5px 15px rgba(0,0,0,.08);
    transition:.25s;
    flex:0 0 320px;


}

.card:hover{

    transform:translateY(-4px);

}

.card img{

    width:100%;
    height:180px;
    object-fit:cover;
    cursor:zoom-in;

}

.info{

    padding:15px;

}

.info h3{

    margin-bottom:10px;

}

.price{

    color:#ff4f87;
    font-size:22px;
    font-weight:bold;
    margin-bottom:10px;

}

.description{

    color:#666;
    font-size:14px;
    margin-bottom:15px;

}




/* PRODUCTO AGOTADO CAMBIAR DE "CARD" A "CARD AGOTADO" EN EL HTML PARA QUE FUNCIONE */

.card.agotado{

    position:relative;

    opacity:.75;

}

.card.agotado img{

    filter:grayscale(100%);

}

.card.agotado::before{

    content:"AGOTADO";

    position:absolute;

    top:15px;

    left:-40px;

    width:150px;

    text-align:center;

    background:#e53935;

    color:white;

    font-weight:bold;

    padding:8px;

    transform:rotate(-35deg);

    z-index:50;

    box-shadow:0 2px 8px rgba(0,0,0,.3);

}

.card.agotado .buy{

    background:#999;

    pointer-events:none;

    cursor:not-allowed;

}

.card.agotado .buy::after{

    content:" (Sin stock)";

}





/* ZOOM */
#visor{

    position:fixed;
    inset:0;
    background:rgba(0,0,0,.85);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:999999;

}

#visor img{

    max-width:90vw;
    max-height:90vh;
    border-radius: 40px
}




.buy{

    display:block;
    text-align:center;
    text-decoration:none;
    background:#ff7eb6;
    color:white;
    padding:12px;
    border-radius:10px;
    font-weight:bold;

}




footer{

    text-align:center;
    color:#888;
    padding:40px;

}





@media(max-width:500px){

.card img{

height:150px;

}

}





/* MASCOTA FUFU*/

#mascota{

    position:fixed;

    bottom:20px;

    right:20px;

    width:150px;

    z-index:9999;

    cursor:pointer;

    transform-origin:center bottom;

    transition:transform .12s ease-out;

    user-select:none;

    -webkit-user-drag:none;

}

/* Cursor al hacer clic */

#mascota:active{

    cursor:grabbing;

}

#mascota:hover{

    transform:scale(1.08);

}



/* GLOBITO DIALOGO DE FUFU */

#dialogo{

    position:fixed;

    bottom:135px;

    right:25px;

    max-width:240px;

    background:white;

    color:#444;

    padding:14px;

    border-radius:18px;

    box-shadow:0 5px 20px rgba(0,0,0,.2);

    font-size:15px;

    line-height:1.4;

    display:none;

    z-index:10000;

  animation:flotar 2s ease-in-out infinite;
}

      /* PIQUITO DEL GLOBO */
      
      #dialogo::after{
      
          content:"";
      
          position:absolute;
      
          bottom:-12px;
      
          right:35px;
      
          border-width:12px 10px 0 10px;
      
          border-style:solid;
      
          border-color:white transparent transparent transparent;
      
      }

                /* ANIMACIÓN */
                
                .mostrar{
                
                    display:block !important;
                
                    animation:aparecer .25s ease;
                
                }
                
                @keyframes aparecer{
                
                from{
                
                opacity:0;
                
                transform:translateY(15px);
                
                }
                
                to{
                
                opacity:1;
                
                transform:translateY(0);
                
                }
                
                }
                @keyframes flotar{
                
                0%{
                transform:translateY(0px);
                }
                
                50%{
                transform:translateY(-6px);
                }
                
                100%{
                transform:translateY(0px);
                }
                
                }