@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

*{

    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;

}

html {
    scroll-behavior: smooth;
}

body{
    background: url('/img/azul\ con\ violeta.jpg');
    background-size: cover;
    -webkit-font-smoothing: antialiased;
}

main {
    min-height: calc(100vh - 200px);
}


.header{
    background-color: rgb(15, 0, 68);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 85px;
    padding: 5px 10%;
    width: 100%;
    position: fixed;
    z-index: 4;
}

.div-izquierdo{
    display: flex;
    align-items: center;
}

.div-derecho{
    display: flex;
}

.header .logo{
    width: 70px;   
    cursor: pointer; 
    transition: 0.5s;    
}
.div-logo{
    margin-right: 0;
}

.logo:hover{
    transform: scale(1.2);
}    

.links_nav{
    text-decoration: none;
    color: inherit;
}

.btn-menu{
    font-size: 16px;
    color: white;
    border: none;
    padding: 8px;
    cursor: pointer;
    margin: 8px;
}

.btn-menu-responsive{
    display: none;
}    

.header .sub-menu li{
    display: inline-block;
    padding: 5px 20px;
    font-size: 16px;
    color: rgb(255, 255, 255);
    text-decoration: none;
    transition: 0.5s;
    width: 100%;
}

.header .sub-menu li:hover{
    transform: scale(1.1);
}

.btn-menu{
    position: relative;
    background-color: transparent;
    border-radius: 8px;
    padding: 20px;
}

.btn-menu:hover{
    background-color: rgb(35, 46, 98);
}

.sub-menu{
    background-color: rgb(15, 0, 68);
    position: absolute;
    display: none;    
    width: 25%;
    top: 4rem;
    padding: 10px;
    margin: 0rem 20px 20px 8px;
    z-index: 1;
    
}

.btn-menu:hover + .sub-menu{
 display: block;
}


.sub-menu:hover{
    display: block;
    cursor: pointer;
}

.sub-menu li:hover{
    background-color: rgb(35, 46, 98);
    border-radius: 5px;
}

.logo_x{
    display: none;
    width: 40px;    
}

.container-button{
    padding: 6px;
    width: max-content;
}

.isLogged {
    display: none;
}

.header a button {
    font-size: 16px;
    background-color: rgb(35, 46, 98);
    color: white;
    border: none;
    padding: 8px;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.5s;
    margin: 8px;    
}

.header a button:hover{
    transform: scale(1.2);
}


.logos-nav{
    width: 30px;
    height: 30px;
}



#logos-nav{
    background-color: transparent;
}

.logo-user{
    display: none;
}

.casilla-usuario{
    display: flex;
}

.div-barra-busqueda{
    position: flex;
    top: 5rem;
    background-color: rgb(15, 0, 68);
    padding: 18px;
    width: 100%;
    left: 0;
    display: flex;
    justify-content: flex-end;
    
}

.container-barra-busqueda{
    display: none;
    
}

.barra-busqueda{  
    font-size: 20px;  
    color: white;
    background-color: rgb(35, 46, 98);
    border-radius: 8px;    
    border: none;
    width: 90vw;
    padding: 0px 1rem;
}

.barra-busqueda:focus {
    outline: 1px solid rgb(106, 133, 163);
  }

.logos-nav-lupa{
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.logo_x_usuario{
    width: 40px;
    display: none;
}

.counter_cart {
    display: flex;
    position: absolute;
    top: 42px;
    right: 10%;
    font-weight: bold;
    background-color: white;
    width: 23px;
    text-align: center;
    align-items: center;
    justify-content: center;
    height: 23px;
    border-radius: 100%;
}

/*  NAV RESPONSIVE  */

@media screen and (max-width: 990px) {
  
    .header{
        background-color: rgb(15, 0, 68);
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 85px;
        padding: 0px 0px;
        width: 100%;
        position: fixed;
        z-index: 4;
        
    }
    
    .div-izquierdo{        
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
    }
    
    .div-derecho{
        display: flex;
        margin-right: 15px;
    }
    
    .header .logo{
        width: 70px;   
        cursor: pointer; 
        transition: 0.5s;    
    }
    .div-logo{
        margin-right: 0;
        width: 70px;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .logo:hover {
        transform: scale(1.0);
    }
    
     
    
    .btn-menu{
        font-size: 16px;
        color: white;
        border: none;
        padding: 8px;
        cursor: pointer;
        margin: 8px;
    }   
    
    
    .header .sub-menu li{
        display: inline-block;
        font-size: 20px;
        color: rgb(255, 255, 255);
        text-decoration: none;
        width: 100%;
        padding: 13px;
    }

    .header .sub-menu li:hover{
        transform: none;
    }
    
    .btn-menu{        
        display: none;
    }
    
    
    .sub-menu{
        background-color: rgb(15, 0, 68);
        position: absolute;
        width: 100%;
        top: 4.5rem;
        padding: 20px;
        margin: 0rem 20px 20px 0px;
        display: none;     
    }    

    .logo-menu{
        width: 40px;
    }

    .btn-menu-responsive{
        position: relative;
        background-color: transparent;
        border-radius: 8px;
        padding: 20px;
        display: block;
        cursor: pointer;
        border-color: transparent;
    }    

    
    .sub-menu li:hover{
        background-color: transparent;
        transform: none;
        
    }

 
    .logo_x{
        display: flex;
        width: 40px;
        position: relative;
        margin-left: 90%;        
    }
    
    .container-button{
        padding: 6px;
                
    }
    
    .header a button {
        font-size: 20px;
        background-color: transparent;
        color: white;
        border: none;
        padding: 2px;
        border-radius: 5px;
        cursor: pointer;
        transition: 0.5s;
        margin: 8px;  
        text-transform: uppercase;  
    }
    
    .header a button:hover{
        transform: none;
    }
    
    
    .logos-nav{
        width: 40px;
        height: 40px;
    }
    
    #logos-nav{
        background-color: transparent;
    }
    
    .logo-user{
        display: flex;
        width: 40px;
        height: 40px;
        transition: 0.5s;
        border-radius: 100%;
    }

    .casilla-usuario{
        background-color: rgb(15, 0, 68);
        position: absolute;
        width: 100%;
        top: 4.8rem;
        right: 0;      
        padding: 20px;        
        display: none;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: normal;
        
    }   



    .logo_x_usuario{
        width: 40px;
        display: flex;
        margin-left: 90%;
    }
    
    .counter_cart {
        display: none;
    }

}



/* carousel */

.section__carousel {
    padding-top: 5rem;
}

.carousel {
    width: 100%;
    height: 400px;
    max-height: 70vh;
    box-shadow: 1em 1em 1em -1em grey;
    overflow: hidden;
    position: relative;
}

.carousel .big {
    width: 200%;
    border-radius: 1rem;
    height: 100%;
    box-shadow: 1em 1em 1em -1em grey;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    transition: all 0.8s ease-in-out;
    transform: translateX(0);
}

.carousel .img {
    width: 50%;
    height: 100%;
    object-fit: cover;
    border-radius: .5rem;
    box-shadow: 1em 1em 1em -1em grey;
}

.carousel .arrows {
    width: calc(100% - 2em);
    padding: 0;
    margin: 1em;
    background-color: transparent;
    display: flex;
    justify-content: space-between;
    list-style: none;
    position: absolute;
    z-index: 3;
    top: 45%;
}

.carousel .arrow {
    width: 3rem;
    height: 3rem;
}

.carousel .arrow:hover, .point:hover {
    cursor: pointer;
}

.carousel .no-activo {
    opacity: .3;
}

.carousel .activo {
    display: none;
}

.carousel .points {
    width: 100%;
    padding: 0.4em;
    margin: 1em 0;

    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    list-style: none;
    position: absolute;
    z-index: 1;
    top: 85%;
}

.carousel .point {
    width: 4rem;
    height: .3rem;
    background-color: white;
    box-shadow: .2em .2em .9em gray;

    margin: 1em;
    border-radius: 1em;
}

.carousel .point.active {
    background-color: #00ffff;
}

/* type products */

.section__type__products {
    width: 100%;
    margin: 2rem 0;
    overflow: hidden;
    padding: 1rem 0;
    text-transform: uppercase;
}

.ul__type__products {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    list-style: none;
    margin: 0rem;
}

.type__products {
    display: flex;
    flex-direction: column;
    width: 25%;
    height: 200px;
    text-align: center;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-shadow: 0em 1em 1em -1em grey;
    transition: all .5s ease-out;
    background-color: #f4f4f4;    
}

.img__type__products {
    width: 100px;
}

.type__products:hover {
    transform: scale(1.2);
    animation: opacitied 1s ease;
    cursor: pointer;
    background-color: white;
    border-radius: 10px;
}

@keyframes opacitied {
    from {
        opacity: 0.2;
    }
    to {
        opacity: 1;
    }
}

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

    .type__products {
        box-shadow: none;
        width: 50%;  
    }

    .type__products:hover {
        
        display: flex;
        width: 50%;
        height: 200px;
        text-align: center;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        box-shadow: none;
        transition: none;
        background-color: #f4f4f4; 
        transform: scale(1.1);
        border-radius: 0;        
    }

    .section__carousel {
        padding-top: 5rem;
    }


   .carousel {
        /* Aseguramos que el contenedor visible no se desborde */
        width: 100vw;
        height: fit-content;
        overflow: hidden;
        box-shadow: none;
    }

    .carousel .big {
        /* El contenedor de las imágenes tiene un ancho que es el 200% del ancho de la pantalla */
        width: 200vw;
        height: 100%;
        display: flex;
        transition: all 3s ease;
        box-shadow: none;
    }

    .carousel .img {
        /* Cada imagen ocupa el 100% del ancho de la pantalla */
        width: 100vw;
        height: 100%;
        object-fit: contain;
        box-shadow: none;
    }

    .carousel .arrows {
        top: 40%;
        width: calc(100% - 2em);
    }
    
    .carousel .arrow {
        width: 2rem;
        height: 2rem;
    }

    .carousel .points {
        display: none !important;
    }


    @keyframes opacitied {
        from {
            opacity: 1;
        }
        to {
            opacity: 1;
        }
    }
    

}



/*card */

.container__products {
    margin-top: 3rem;
}


.container__products .title__section__products {
    display: flex;
    justify-content: center;
    text-transform: uppercase;
    margin: 4rem 0;
    font-size: 2rem;
}

.products {
    display: flex;
    flex-wrap: wrap;
    margin: 2rem;
    justify-content: space-around;
    background-color: transparent;
    padding-bottom: 4rem;
}

.products .container__card {
    display: flex;
    flex-direction: column;
    width: 300px;
    margin: 2rem 1.5rem;
    border-radius: 10px;
    background-color: transparent;
    animation: presentacion .5s ease-out 0s normal;
}

@keyframes presentacion {
    0% {
        transform: scale(.1);

    } 100% {
        transform: scale(1);
    }
}

.products .container__img__card {
    height: 100%;
    border-radius: 10px 10px 0 0;
    padding: 1.5rem;
    padding-bottom: 0;
    background-color: white;
}

.products .img__card {
    width: 100%;
}

.products .container__info__card {
    display: flex;
    height: 100%;
    background-color: #f4f4f4;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-flow: column;
    padding: 1.5rem;
    padding-top: 1rem;
    border-radius: 0 0 10px 10px;
}

.products .title__card {
    text-align: center;
    padding: .2rem;
    text-align: center;
}

.products .container__check__stock {
    display: flex;
    margin: 0 1rem ;
}

.products .stock__products {
    margin: .5rem;
    display: block;
    width: 100%;
}

.products .price__products {
    display: block;
    margin: .5rem 1rem;
    font-weight: bold;
    font-size: 1.5rem;
}

.products .price__products__old {
    text-decoration: line-through;
    color: #5792eb;
    font-weight: bold;
}

.products .financing {
    font-size: .8rem;
    margin: 0.5rem 1rem;
}

.products .price__card {
    color: #5792eb;
}

.products .btn__products {
    color: white;
    display: flex;
    justify-content: center;
    width: 90%;
    text-transform: uppercase;
    font-size: 1.1rem;
    margin: .5rem 1rem;
    padding: .7rem;
    border-radius: 10px;
    background: linear-gradient(to right, rgb(54, 209, 220) 0%, rgb(91, 134, 229) 51%, rgb(54, 209, 220) 100%);
    background-size: 200% auto;
    border: none;
    transition: .5s;
}

.products .btn__products:hover {
    background-position: 100%;
    cursor: pointer;
}

.products .text__btn {
    margin: 0.4rem 0 0.4rem 1rem;
}

.products .container__card:hover {
    transform: scale(1.1);
    cursor: pointer;
    box-shadow: 1em 1em 1em -1em gray;
}

@media screen and (max-width: 990px){
    .products .container__card:hover {
        transform: scale(1.0);
        cursor: pointer;
        box-shadow: none
    }
}


/* shipping */
.section__shipping {
    margin: 1rem 0 0 0;
}
.container__shipping {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: #f4f4f4;
    flex-wrap: wrap;
}

.shipping {
    text-align: center;
    margin: 2rem;
}

.truck__fast, .check__shield, .credit__card {
    width: 50px;
    height: 50px;
}

/* div rgb */

.iva {
    background: #ff0059;
    background: -webkit-linear-gradient(45deg,rgba(255,0,0,1) 0%,rgba(255,0,255,1) 18%,rgba(0,0,255,1) 30%,rgba(0,240,255,1) 45%,rgba(0,255,0,1) 63%,rgba(255,255,0,1) 80%,rgba(255,120,0,1) 90%,rgba(255,0,0,1) 100%);
    background-size: 400% 400%;
    animation: rgbBg 20s linear infinite;
    -moz-animation: rgbBg 20s linear infinite;
    -webkit-animation: rgbBg 20s linear infinite;
    position: relative;
    padding: 3px;
}

@keyframes rgbBg {
    0% {
        background-position: 400% 0;
    }
    100% {
        background-position: 0 400%;
    }
}

/* esta seccion esta dedicada al footer de la pagina */

footer {
    background-color: rgb(15, 0, 68);
    color: #fff;
    padding: 20px 0;
    font-size: 14px;
    width: 100%;
  }
  
  .footer-container {
    margin: 0 auto;
    display: flex;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }
  

  
  .footer-links ul, .footer-social ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .footer-links li, .footer-social li {
    margin: 0 10px;    
  }

  .footer-links li{
    transition: 0.5s;
  }

  .li_inicio{
    cursor: pointer;
  }

  .footer-links li:hover{
    transform: scale(1.1);
  }
  
  .footer-links a, .footer-social a {
    color: #fff;
    text-decoration: none;
    
  }
  

  
  .footer-social i {
    font-size: 20px;
  }
  
  .footer-copy {
    background-color: rgb(15, 0, 68);
    text-align: center;
    padding: 10px 0;
  }

  .logos-redes-sociales{
    width: 25px;
  }

  .logos-redes-sociales:hover{
    opacity: 0.5;
  }


  /* mobile */

  @media screen and (max-width: 500px) {
    /* carousel responsive */
    
    .points {
        display: none !important;
    }

    /* type products responsive */

    .type__products {
        font-size: .7rem;
    }
}




/* cosas para otras paginas */

.pagina_construccion{
    width: 100%;
    height: 100vh;
    object-fit: none;
}



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

    .pagina_construccion{
        margin-top:5.5rem;
        margin-bottom: 25rem;
    }
    
}

/* hace girar la pantalla de carga */
@keyframes girar {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
}

/* ===== Skeleton Loader (componentes page) ===== */
.skeleton__loader__container {
    padding: 150px 2rem 2rem;
    width: 100%;
}

.skeleton__loader__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
}

.skeleton__card {
    background: rgba(255,255,255,0.85);
    border-radius: 10px;
    width: 280px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.skeleton__img {
    width: 100%;
    height: 180px;
    background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: 8px;
}

.skeleton__line {
    height: 14px;
    border-radius: 6px;
    background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
}

.skeleton__line--long  { width: 85%; }
.skeleton__line--medium{ width: 60%; }
.skeleton__line--short { width: 40%; }

@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}