@import url('https://fonts.googleapis.com/css2?family=Julius+Sans+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@300&display=swap');

body {
    margin: 0;
    padding: 0;
    font-family: 'Inconsolata';
    position: relative;
}


/* ♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞-NAVBAR DEFINITIVO-♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞- */
/* -----------------------------TAMAÑO PC--------------------------------------------- */
@media (min-width:1025px){
 
    .col1{
        height:620px; overflow-y:scroll;  
    }
    .container-fluid{
        margin-top: 30px;
    }
    .header{
        background-color: #ffffff;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .logo{
        padding-left: 100px;
    }
    .logo img{
        height: 55px;
        width: 87px;
        padding: 10px;
        float:left; 
    }
    .my_sunglasses{
        font-weight:800;
        font-size: 1.5em;
        margin-top: 9px;
        font-family: 'Julius Sans One', sans-serif;
        font-style: oblique;
        padding: 4px;
        justify-content: flex-start;
    }
    .barra-div{
        display: flex;
        padding: 8px;
        margin-left: 140px;
        margin-top: 16px;
    }
    .main_header_input{
        display: flex;
        padding: 10px;
        width: 620px;
        height: 48px;
        font-size:22px;
    }
    .botoncito{
        display: inline-block;
        background-color: #000000;
        color: white;
        width: 35px;
        text-align: center;
        text-decoration: none;
        border: none;
    }
    .botoncito:hover{
        cursor: pointer;
        font-size: 1.1rem;
        color: rgb(255, 239, 22);
    }
    /* solo se ve en pc */
    .publicidad {
        width: 200px;
        height:40px;
        margin-top: 10px;
        padding-right: 100px;
    }
    .publicidad img {
        display: block;
        width: 100%;
    }
    /* solo se ve en pc */

    .nav-links {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding-left: 100px;
        padding-right: 100px;
    }
    /* navbar de abajo */
    li a{
        text-decoration: none;
        font-size: 20px;
        color: #000000;
        font-family:sans-serif;
    }
    li a:hover{
        cursor:pointer;
        color: rgb(207, 152, 11);
    }
    ul{
        list-style: none;
    }
    .mas_opciones{
        display: none;
    }
    .nav-links{
      margin-top: 11px;
    }
    .nav-links li ul{
        display: none;
        position: absolute;
        min-width: 120px;
    }
    .nav-links li:hover > ul{
        display:block;
        background-color: black;
        opacity: 0.75;
        position:absolute;
        z-index: 999;
        border-radius: 10%;
        width: 150px;
        height: 120px;
    }
    .sub li a{
        color: #ccc;
    }
    .sub li a:hover{
        color: goldenrod;
    }
 .menu_bar{
    display: none;
 }
 .menu_opc{
    display: none;
 }
.carrito_menu{
    display: none;
}
.fixed-bottom{
    display: none;
}
.img_vacio{
    height: 400px; width: 400px;  margin-top: 8%;  display: flex; align-items: center; justify-content: center;
}
.popup-background{
    display: none;
}
}
/* -----------------------------TAMAÑO PC--------------------------------------------- */




/* ----------INICIO------------------TAMAÑO TABLET -------------INICIO--------------*/
@media (min-width:481px) and (max-width:1280px){
    .container-fluid{
        margin-top: 20px;
    }
    .header{
        background-color: #ffffff;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding-top: 5px;
    }
    .logo{
        padding-left: 5px;
    }
    .logo img{
        height: 34px;
        width: 57px;
        padding: 5px;
        float:left;
    }
    .my_sunglasses{
        font-size: 13px;
        margin:10px 0;
        font-family: 'Julius Sans One', sans-serif;
        font-style: oblique;
        font-weight: bold;
        padding: 3px 6px;
        justify-content: flex-start;
    }
    .barra-div{
        display: flex;
        margin-top: 8px;
        margin-left: 29px;
    }
    .main_header_input{
        display: flex;
        padding: 10px ;
        width: 284px;
        font-size:13.2px;
        height: 38px;
    }
    .botoncito{
        display: inline-block;
        background-color: #000000;
        color: white;
        width: 35px;
        text-align: center;
        text-decoration: none;
        border: none;
        font-size: 13px;
    }
    .botoncito:hover{
        cursor: pointer;
        font-size: 1.1rem;
        color: rgb(255, 239, 22);
    }
    .piso2{
        display: none;
    }
    .publicidad  {
        display: none;
    }
    .publicidad img {
        display: none;
    }
    form{
        width: 55%;
    }
    .menu_bar span{
        float: right;
        font-size:35px ;
        color: #000000;
    }
    header nav{
        width:100%;
        height:50%;
        margin:0 ;
        padding: 0%;
        position: fixed;
        background-color: #000000;
        z-index: 1001;
        /* left: -100%; */
        top: -100%;
    }
    header nav ul li{
        display: block;
        float: none;
        border-bottom: 1px solid  #fff;
    }


    
    .menu-container {
        width: 80%;
        float: left;
      }
      .menu_bar{
        display: block;
        /* width: 100%; */
        position: relative;
        z-index: 1002;
    }
    .menu_bar .bt-menu{
        position: absolute;
        top: 0;
        right: 0;
        width: 10px;
        margin-top: -17px;
        margin-right: 26px;
        display: block;
        padding: 20px;
        color: #050505;
        text-decoration: none;
        font-weight: bold;
        font-size: 31px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; 
    }
    .menu_bar2{
        position: fixed;
        display: block;
        padding: 20px;
        margin-left: -20px;
        margin-top: -20px;;
        color: #ffffff;
        text-decoration: none;
        font-weight: bold;
        font-size: 31px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    header nav ul li a {
        margin-top: 40px;
        color: #fff;
        padding: 1px;
        text-decoration:none ;
        display: block;
    }
   
      .segundo_div{
        display: none;
      }
      .fixed-bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #f0f0f0;
        padding: 20px;
        z-index: 999;
    }
    .total {
        float: left;
        padding-left: 25px;
        font-weight: bold;
        font-size: 25px;
    }
    .amount {
        float: right;
        padding-right: 25px;
        font-size: 25px;
        font-weight: bold;
    }
    .pay-button {
        display: block;
        width: 70%; /* Ancho del botón al 80% del ancho de la pantalla */
        margin: 10px auto 0;  /* Margen superior aumentado para bajar el botón */
        padding: 15px;
        font-size: 26px;
        font-weight: bold;
        color: #ffffff;
        background-color: #007bff;
        border: none;
        border-radius: 50px; /* Hacemos que el borde sea redondo */
        cursor: pointer;
        margin-top: 70px;
    }
    .img_vacio{
        height: 400px; width: 400px;  margin-top: 3%;  display: flex; align-items: center; justify-content: center;
    }
    .popup-background {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7); /* Fondo oscuro */
        z-index: 1100;
        align-items: center;
        justify-content: center;
    }
    .popup-content {
        background-color: #fff;
        width: 80%;
        max-width: 400px;
        padding: 20px;
        border-radius: 10px;
        text-align: center;
    }
    .option1 {
        margin: 10px 0;
        padding: 20px;
        background-color: #007bff;
        border-radius: 10px;
        cursor: pointer;
    }
    .option2 {
        margin: 10px 0;
        padding: 20px;
        background-color: #e49c03;
        border-radius: 10px;
        cursor: pointer;
    }
    .option_a  {
        color:  #fff ;
        text-decoration: none;
        font-size: 18px;
    }
    .option_b {
        color: #fff;
        text-decoration: none;
        font-size: 18px;
    }
    .tipo_d_e{
        margin-bottom: 25px;
    }

    
    .div-carrito {
        display: inline-block;
        position: relative;
        margin-top: 6px; 
        margin-left: 28px;
      }
      .carrito_menu {
        color: #000000;
        font-size: 26px;
    } 

    
            /* lineas  */
            header nav ul li{
                display: block;
                float: none;
                border-bottom: 1px solid   #ffffff ;
                
                /* margin-top: -10px; */
                width: 40%;
                /* height: 40%; */
            }
            header nav{
                width:101%;
                height: 50vh;
                margin:0 ;
                padding: 0%;
                position: fixed;
                background-color: #000000;
                z-index: 1001;
                top: -100%;
            }
    
    
        /* ♜♜♜♜♜♜♜♜♜♜♜♜♜♜♜♜ OPCION AMBURGESA ♜♜♜♜♜♜♜♜♜♜♜INICIO♜♜♜♜♜♜♜ */
        .list__item{
            list-style: none;
            width: 100%;
            /* text-align: center;           esto centraba las opciones ahora aparecen a la izquierda por defecto */ 
            overflow: hidden; 
            color: #fff;
            margin-left: -20px;
            margin-top: 40px;
            cursor: pointer;  
            border-bottom: 2px solid #000000; 
            font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        }
        /* al dar click el texto categoria cambia */
        .list__item:hover {
            cursor: pointer;
            color: rgb(255, 255, 255);
            transition: .5s;
        }
        /* al dar click el texto categoria cambia */
        .arrow{
            color: #fff;
        }
        .arrow .list__arrow{
            transform: rotate(90deg); 
            
        }
        .list__arrow{
            margin-left:auto;
            transition: transform .3s;
        }
        .opcion_list {
            display: flex;
            align-items: center;
            gap: 1em;
            width: 20%;
            margin: 0 auto; 
            margin-top: 10px;
            margin-left: 40px;
            font-size:  15px;
            font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        }
        .nav__link {
            color: #ffffff;
            display: block;
        /* padding-top: 1px; */
            text-decoration: none;
            list-style: none;

        }
  

        .list__button:hover .fa-solid{
            color: rgb(255, 255, 255);
        }    
    
        .list__button{
            display: flex;
            align-items: center;
            gap: 1em;
            width: 20%;
            margin: 0 auto; 
            margin-left: 13px;
            font-size: 25px;
        }
          /* hijos */
        .list__show .nav__link {
            /* margin-left: -700px;  */
            /* margin-bottom: 20; */
            font-size: 20px;
            margin-top: 10px;
        
        }
        /* hijos */

        /* hijos xd */
        .list__show{
            width: 45%;
            margin-left: 45px; 
            margin-bottom: -10px;
        
            /* margin-left: auto; */
            /* border-left: 2px solid #ffffff; */
            list-style: none;
            transition: height .4s;
            height: 0;
        }
        /* hijos xd*/
    

    /* ♜♜♜♜♜♜♜♜♜♜♜♜♜♜♜♜ OPCION AMBURGESA ♜♜♜♜♜♜♜♜♜♜FIN♜♜♜♜♜♜♜♜ */


    .ingresar_{
        position: relative;
        list-style: none;
        width: 100%;
        height: 40px;
        color: #fff;
        margin-left: -20px;
        padding-left: 36px;
        cursor: pointer;  
        font-size:25px;
        font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        border-bottom: 2px solid #000000;  
      
    }


    .contacto_{
        position: relative;
        list-style: none;
        width: 100%;
        height: 40px;
        color: #fff;
        margin-left: -20px;
        padding-left: 36px;
        cursor: pointer;  
        font-size:25px;
        font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        border-bottom: 2px solid #000000;  
      
      
        
    }
    .about_{
        position: relative;
        list-style: none;
        width: 100%;
        height: 40px;
        color: #fff;
        margin-left: -20px;
        padding-left: 36px;
        cursor: pointer;  
        font-size:25px;
        font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        border-bottom: 2px solid #000000;  
  
  
        
    }
   
 
    



}
/* -------------FIN-----------------TAMAÑO TABLET*-------------FIN-----------------------------/


/* -----------------------------TAMAÑO CELULAR --------------------------------------------- */
@media (max-width:480px){
    
    .header{
        background-color: #ffffff;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding-top: 5px;
    }

    .logo{
        padding-left: 5px;
        margin-right: 5px;
    }
    .logo img{
        height: 35px;
        width: 58px;
        padding: 5px;
        float:left;
        margin-top: 5px;

    }
    .my_sunglasses{
        font-weight:800;
        font-size: 0.8em;
        margin-left: 5px;
        margin-top: 15px;
        /* margin-right: 5px; */
        font-family: 'Julius Sans One', sans-serif;
        font-style: oblique;
        font-style: bold;
        padding: 2px;
        justify-content: flex-start;

    }
   

    .barra-div {
        margin-top: 7px;
        margin-left: 4px;
        margin-right: 1px;
        display: flex;
        padding: 8px;
        justify-content: space-between; /* Add this to evenly distribute the elements */
        min-height: 0;
        max-height: 30px;  
    }
    .main_header_input {
        flex: 1;
        font-size: 13px; 
        padding: 10px;
        margin-right: -2px; 
        min-width: 0; 
        max-width: 115px; 
        height: 30px;
        margin-top: 5px;
    }

    .botoncito {
        display: inline-block;
        background-color: #000000;
        color: white;
        width: 30px; /* Adjust the width of the button to create some space between buttons */
        height: 30px;
        text-align: center;
        text-decoration: none;
        border: none;
        border-radius:   0 50% 50% 0 ;
        margin-top: 5px;
        font-size: 13px;
    }
    .botoncito:hover{
        cursor: pointer;
        font-size: 1.1rem;
        color: rgb(255, 239, 22);
        margin-top: 5px;
    }




    .piso2{
        display: none;
    }


    .publicidad  {
        display: none;
    }
    .publicidad img {
        display: none;
    }

    form{
        width: 55%;
    }

    .menu_bar span{
        float: right;
        font-size:35px ;
        color: #000000;

    }


    .menu-container {
        width: 80%;
        float: left;
    }
      .menu_bar{
        display: block;
        /* width: 100%; */
        position: relative;
        z-index: 1002;
    }

    .menu_bar .bt-menu{
        position: absolute;
        top: 0;
        right: 0;
        width: 10px;
        margin-top: -8px;
        margin-right: 24px;
        display: block;
        padding: 20px;
        color: #050505;
        text-decoration: none;
        font-weight: bold;
        font-size: 31px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; 
    }


    .menu_bar2{
        position: fixed;
        display: block;
        padding: 20px;
        margin-left: -20px;
        margin-top: -8px;
        color: #ffffff;
        text-decoration: none;
        font-weight: bold;
        font-size: 31px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    

 
    .div-carrito {
        display: inline-block;
        position: relative;
        margin-top: 15px; 
      }
      .carrito_menu {
        color: #000000;
        font-size: 26px;
    } 
      

      .segundo_div {
        display: none; 
        }


       .fixed-bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #f0f0f0;
        padding: 7px;
        z-index: 999;
    }

  

    .amount {
        float: right;
        padding-right: 5px;
        font-size: 19px;
        font-weight: bold;
        
    }

    .pay-button {
        display: block;
        width: 80%; /* Ancho del botón al 80% del ancho de la pantalla */
        margin: 10px auto 0;  /* Margen superior aumentado para bajar el botón */
        padding: 10px;
        font-size: 17px;
        font-weight: bold;
        color: #ffffff;
        background-color: #007bff;
        border: none;
        border-radius: 50px; /* Hacemos que el borde sea redondo */
        cursor: pointer;
        margin-top: 35px;
        
    }


    .col1{
        height:570px; overflow-y:scroll;
        
    }


    .img_vacio{
        height: 300px; width: 300px;  margin-top: 15%;  display: flex; align-items: center; justify-content: center;
    }




    .popup-background {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7); /* Fondo oscuro */
        z-index: 1100;
        align-items: center;
        justify-content: center;
    }

    .popup-content {
        background-color: #fff;
        width: 80%;
        max-width: 400px;
        padding: 20px;
        border-radius: 10px;
        text-align: center;
    }



    .option1 {
        margin: 10px 0;
        padding: 20px;
        background-color: #007bff;
        border-radius: 10px;
        cursor: pointer;
    }

    .option2 {
        margin: 10px 0;
        padding: 20px;
        background-color: #e49c03;
        border-radius: 10px;
        cursor: pointer;
    }
    .option_a  {
        color:  #fff ;
        text-decoration: none;
        font-size: 18px;
    }
    .option_b {
        color: #fff;
        text-decoration: none;
        font-size: 18px;
    }
    .tipo_d_e{
        margin-bottom: 25px;
    }

  
      /* div principal ♜ */
      header nav{
        width:101%;
        height: 70vh;
        margin:0 ;
        padding: 0%;
        position: fixed;
        background-color: #000000;
        z-index: 1001;
        top: -100%;
    }
    /* div principal ♜ */



    /* header nav ul li a {
        margin-top: 40px;
        color: #811515;
        padding: 1px;
        text-decoration:none ;
        display: block;
    } */





    /* ♜♜♜♜♜♜♜♜♜♜♜♜♜♜♜♜ OPCION AMBURGESA ♜♜♜♜♜♜♜♜♜♜♜INICIO♜♜♜♜♜♜♜ */
    .list__item{
        list-style: none;
        width: 100%;
        /* text-align: center;           esto centraba las opciones ahora aparecen a la izquierda por defecto */ 
        overflow: hidden; 
        color: #fff;
        margin-left: -20px;
        margin-top: 40px;
        cursor: pointer;  
        border-bottom: 2px solid #000000; 
        font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    }
    /* al dar click el texto categoria cambia */
    .list__item:hover {
        cursor: pointer;
        color: rgb(255, 255, 255);
        transition: .5s;
    }
    /* al dar click el texto categoria cambia */
    .arrow{
        color: #fff;
    }
    .arrow .list__arrow{
        transform: rotate(90deg); 
        
    }
    .list__arrow{
        margin-left:auto;
        transition: transform .3s;
    }
    .opcion_list {
        display: flex;
        align-items: center;
        gap: 1em;
        width: 20%;
        margin: 0 auto; 
        margin-top: 30px;
        margin-left: 40px;
        font-size:  15px;
        font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    }
  


    .list__button:hover .fa-solid{
        color: rgb(255, 255, 255);
    }    

    .list__button{
        display: flex;
        align-items: center;
        gap: 1em;
        width: 20%;
        margin: 0 auto; 
        margin-top: 30px;
        margin-left: 15px;
        font-size: 20px;
    }
      /* hijos */
      .list__show .nav__link {
        font-size: 20px;
        margin-top: 20px;
        }
    /* hijos */

    .nav__link {
        color: #ffffff;
        display: block;
        text-decoration: none;
        list-style: none;
      
    }
    
    /* hijos xd */
    .list__show{
        width: 35%;
        margin-left: 45px; 
        list-style: none;
        transition: height .4s;
        height: 0;
    }
    /* hijos xd*/


/* ♜♜♜♜♜♜♜♜♜♜♜♜♜♜♜♜ OPCION AMBURGESA ♜♜♜♜♜♜♜♜♜♜FIN♜♜♜♜♜♜♜♜ */


.ingresar_{
    position: relative;
    list-style: none;
    width: 100%;
    margin-bottom: 50px;
    margin-top: 25px;
    overflow: hidden; 
    color: #fff;
    margin-left: -20px;
    padding-left: 36px;
    cursor: pointer;  
    font-size:20px;
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    border-bottom: 2px solid #000000;  
 
}


.contacto_{
    list-style: none;
    width: 100%;
    margin-bottom: 50px;
    overflow: hidden; 
    color: #fff;
    margin-left: -20px;
    padding-left: 36px;
    cursor: pointer;  
    font-size:  20px;
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    border-bottom: 2px solid #000000;  

     

    
}
.about_{
    position: relative;
    list-style: none;
    width: 100%;
    margin-bottom: 50px;
    overflow: hidden; 
    color: #fff;
    margin-left: -20px;
    padding-left: 36px;
    cursor: pointer;  
    font-size:  20px;
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    border-bottom: 2px solid #000000;  
}
   
 
    
}
/* -----------------------------TAMAÑO CELULAR --------------------------------------------- */
/* ♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞-NAVBAR DEFINITIVO-♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞♞- */






















/* ❋❋❋❋❋❋❋❋❋❋❋  MAIN  ❋❋❋❋❋❋❋❋❋❋❋  ❋❋❋❋❋❋❋❋❋❋❋  MAIN  ❋❋❋❋❋❋❋❋❋❋❋❋❋❋❋❋❋❋❋❋❋❋  MAIN  ❋❋❋❋❋❋❋❋❋❋❋ */
/* -----------------------------TAMAÑO PC-------------------------TAMAÑO PC-------------------- */
@media (min-width:1025px){
    

    .div-principal{
        margin-bottom: 130px;
    }
    /* .imagen{
        width: 100% ;
        height: auto;
        display: block;
        
    } */

    /* .img_principal {
        border: 1px solid #CCCCCC;
        align-items: center;
        justify-content: center;
        height: 100%;
        margin: 0; 
        display: block;
        
    } */

    .imagen {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain; /* Ajusta la imagen sin distorsión */
        max-height: 700px; /* Altura máxima para imágenes largas */
    }

    
    .img_principal {
        border: 1px solid #CCCCCC;
        align-items: center;
        justify-content: center;
        height: auto; /* Elimina el 100% y permite ajuste automático */
        margin: 0; 
        display: block;
        max-height: 700px; /* Limita la altura máxima */
        overflow: hidden; /* Evita que el contenido excedente sobresalga */
    }

    /* TALLAS */
    .talla_div {
        display: flex;
        justify-content: space-between;
    }

    .tallas-panel {
        text-align: center;
    }

    .tallas-list {
        display: flex;
    }

    .talla {
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
        height: 50px;
        background-color: #f2f2f2;
        border: 1px solid #ddd;
        cursor: pointer;
        font-size: 16px;
        font-weight: bold;
        color: #333;
        padding-left: 15px;
        padding-right: 15px;
        transition: background-color 0.5s, color 0.5s;
    }


    .talla.selected {
        border: 2px solid #ffffff;
        color: #ffffff;
        background-color: #000000;
    } 


    .talla:hover {
        background-color: #000000;
        color: #ffffff;
    }
    /* TALLAS */






    .xxx{
        height: 100%;
    
        
    }

    #container_popup {
    display: none; background:  rgba(0, 0, 0, 0.9);  position: fixed; top: 0; left: 0; width: 100%;  height: 100%;
    z-index: 2;
    }
    #popup{
    width: 85%; height: 70%; background: #fff; position: absolute; left: 0; right:0; top:0;
    bottom: 0;  margin: auto  auto;
    Height:800px; overflow-y:scroll; } 
    .img_popup{
    width: 100% ;
    height: auto;
    }

    #close{ position: absolute; top:7px; right: 7px;  cursor: pointer; font-size: 40px ; padding: 30px; color: #fff;} 
    #close:hover{ position: absolute; top:7px; right: 7px; font-size: 1,2rem; color: #FF4E00; } 

    .info{
        margin-left: 40px;
        padding: 20px;
        border: 1px solid #CCCCCC; 
    }
    .rating{
        font-weight: 400;
    }
    .info_tittle h1{
        font-size: 30px;
        font-weight: bold;
        font-family: 'Julius Sans One', sans-serif;
        font-style:normal;
        font-weight: 700;
    }
    .info_marca h1{
        font-weight: bold;
        font-size: 20px;
        font-family: 'Julius Sans One', sans-serif;
        font-style:normal;
        font-weight: 700;
    }
    .info_precio h1{
        font-size: 45px;
        font-weight: 300; 
      
    }
    .info_stock h1{
        font-size: 18px;
        font-weight: 400; 
        
    }
    .talla{
        font-weight: bold;
        font-family: 'Julius Sans One', sans-serif;
        font-style:normal;
        font-weight: 700;
    }
    .agregar-al-carro {
        display: block;
        width: 100%;
        text-align: center;
        background-color: #000000;
        color: #ffffff;
        padding: 12px 0;
        border: none;
        border-radius: 5px;
        font-size: 20px;
        text-decoration: none;
        margin: 10px 0; 
        cursor: pointer;
        transition: background-color 0.3s ease-in-out;


        font-weight: bold;
        font-family: 'Julius Sans One', sans-serif;
        font-style:normal;
        font-weight: 700;
    }
    .agregar-al-carro {
        /* Otros estilos... */
        transition: background-color 0.5s, color 0.6s;
    }

    .agregar-al-carro:hover {
        background-color: #303030; 
        color: goldenrod;
        text-decoration: none; 
        
    }
    #c1{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    #c2{
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        margin-top: 10px;
    }
    .container{
        margin-top: 150px;
    }
    .cajita{
        border: 1px solid #CCCCCC; 
        width: 100px;
        height: 70px;
    }
    .cajita3{
        border: 1px solid #CCCCCC; 
        width: 100px;
        height: 70px;
    }
    #cajita2{
        display: flex;
        border: 1px solid #CCCCCC; 
        width: 100px;
        flex-direction: row;
        justify-content: space-evenly;
    }
    /* .img_SmartPhone{
        height: 70px;
        width: 98px;
    } */

    .img_SmartPhone {
        height: 70px;
        width: 98px;
        object-fit: cover; /* Recorta la imagen para miniaturas */
    }
    #miDivCuadrado{
    width: 100px;
    height: 100px;
    background-color: #ccc;
    cursor:pointer;
    }

 
      /* ¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡     Navegador de pestañas ¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡ inicio */
    
  
  
    .tab-container {
        display: flex;
        justify-content: space-around;
        font-family:sans-serif;
        margin-bottom: -3px;     /* barra delgada */
    }

    .tab {
        position: relative;
        padding: 10px 20px;
        cursor: pointer;
        border: none;
        background-color: transparent;
        outline: none;
        font-size: 16px;
        transition: color 0.3s;
        font-size: 20px;
    }

    .tab::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 50%; /* Ajusta el ancho de la barra */
        height: 5px; /* Ajusta el largo de la barra */
        background-color: transparent;
        transition: background-color 0.3s, width 0.3s; /* Agrega transiciones */
        
    }

   
    .tab.active {
        color: #333; /* Cambia el color del texto activo */
        
    }

    .tab.active::before {
        background-color: #333; /* Cambia el color de la barra activa */
        width: 180%; /* Ancho completo cuando está activa */
        
    }

    .tab-content {
        display: none;
        padding: 20px;
        background-color: #fff;
        width: 86%;
        margin-left: auto;
        margin-right: auto;
     
        border-top: 2px solid #ccc; /* Añade solo un borde en la parte superior */
        border-left: none; /* Elimina el borde izquierdo */
        border-right: none; /* Elimina el borde derecho */
        border-bottom: none; /* Elimina el borde inferior */
      
    }
    
    .tab-content.active {
        display: block;
    }
    /* ¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡     Navegador de pestañas ¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡ fin  */

  

    .garantia{
        width: 70%;
        margin: 0 auto; /* Esto centrará horizontalmente el contenedor */
        text-align: justify; /* Justifica el texto dentro del contenedor */
        font-family:sans-serif;
    
       
    }
    .garantia h1{
        margin-top: 60px;
        margin-bottom: 30px;
        font-weight: bold;
        font-family: 'Julius Sans One', sans-serif;
        font-style:normal;
        font-weight: 700;
    }
    .garantia span{
        display: block; /* Hace que el span ocupe el ancho completo del contenedor */
        margin-bottom: 230px;
    }

    .descripcion {
       
        width: 70%;
        margin: 0 auto; /* Esto centrará horizontalmente el contenedor */
        text-align: justify; /* Justifica el texto dentro del contenedor */
   
    }
  
    .descripcion h1 {
        margin-top: 60px;
        margin-bottom: 30px;
        font-weight: bold;
        font-family: 'Julius Sans One', sans-serif;
        font-style:normal;
        font-weight: 700;
    
    } 
    
    .descripcion span {
        display: block; /* Hace que el span ocupe el ancho completo del contenedor */
        margin-bottom: 230px;
    }
      /* [[[[[[[[[[[[[ tabla ]]]]]]]]]]]]] inicio */

      .tabla{
        margin-bottom: 100px;
        font-family:sans-serif;
        }
   .tabla_div{
    margin-bottom: 100px;
   }
    .tab-content table {
    
        width: 70%;
        border-collapse: collapse;
        margin-top: 10px;
        margin-left: auto; /* Centra horizontalmente la tabla */
        margin-right: auto; /* Centra horizontalmente la tabla */
    }
    
    .tab-content th, .tab-content td {
        padding: 8px;
        text-align: left;
        border-top: 1px solid #ddd; /* Línea superior */
        border-bottom: 1px solid #ddd; /* Línea inferior */
    }
    
    .tab-content th {
        background-color: #f2f2f2;
    }
    
    .tab-content tbody tr:hover {
        background-color: #f5f5f5;
    }
    /* [[[[[[[[[[[[[ tabla ]]]]]]]]]]]]] fin */
}
/* -----------------------------TAMAÑO PC-------------------------TAMAÑO PC-------------------- */






/* -------------------------------------TAMAÑO CELULAR -----------------------------------*/
@media (max-width:480px){

   .navegador_pestañas{
    display: none;
}

.imagen{
    width: 100% ;
    height: auto;
    display: block;
}
#container_popup {
    display: none; 
}
#popup{
    display: none; 
} 
.img_popup{
    display: none; 
}
#close{ display: none; 
}
#close:hover{ display: none; 
}
.info{
    margin-top: 15px;
    margin-bottom: 120px;
}

.info_tittle h1{
    font-size: 30px;
    font-weight: bold;
    font-family: 'Julius Sans One', sans-serif;
    font-style:normal;
    font-weight: 700;
}
.info_precio h1{
    font-size: 45px;
    font-weight: 300; 
}
#stock-display{
    font-size: 19px;
    font-weight: 700;
    font-family: 'Julius Sans One', sans-serif;
}

.fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #f0f0f0;
    padding: 7px;
    z-index: 999;
}
.info_marca h1{
    font-weight: bold;
    font-size: 20px;
    font-family: 'Julius Sans One', sans-serif;
    font-style:normal;
    font-weight: 700;
}
.btn-comprar{
    margin-top: 20px;
}
.agregar-al-carro {
    display: block;
    width: 100%;
    text-align: center;
    background-color: #000000;
    color: #ffffff;
    padding: 12px 0;
    border: none;
    border-radius: 5px;
    font-size: 20px;
    text-decoration: none;
    margin: 10px 0; 
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
  

    font-weight: bold;
    font-family: 'Julius Sans One', sans-serif;
    font-style:normal;
    font-weight: 700;
}
.agregar-al-carro {
    transition: background-color 0.5s, color 0.6s;
}

.agregar-al-carro:hover {
    background-color: #303030; 
    color: goldenrod;
    text-decoration: none; 
    
}
/* TALLAS */
.talla_div {
    display: flex;
    justify-content: space-between;
}

.tallas-panel {
    text-align: center;
}

.tallas-list {
    display: flex;
}

.talla {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 50px;
    background-color: #f2f2f2;
    border: 1px solid #ddd;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    padding-left: 15px;
    padding-right: 15px;
    transition: background-color 0.5s, color 0.5s;
}


.talla.selected {
 
    color: #ffffff;
    background-color: #000000;
} 


.talla:hover {
    background-color: #000000;
    color: #ffffff;
}
/* TALLAS */






}
/* -------------------------------------TAMAÑO CELULAR -----------------------------------*/




/* ......................................TAMAÑO TABLET ..................................*/
@media (min-width:481px) and (max-width:1280px){
    .navegador_pestañas{
        display: none;
    }
    .imagen{
        width: 100% ;
        height: auto;
        display: block;
        margin-top: -36px;
    }
    #container_popup {
        display: none; 
    }
    #popup{
        display: none; 
    } 
    .img_popup{
        display: none; 
    }
    #close{ display: none; 
    }
    #close:hover{ display: none; 
    }
    .info{
        margin-top: 15px;
        margin-bottom: 50px;
    }
    .info_tittle h1{
        font-size: 30px;
        font-weight: bold;
        font-family: 'Julius Sans One', sans-serif;
        font-style:normal;
        font-weight: 700;
    }
    .info_precio h1{
        font-size: 45px;
        font-weight: 300; 
    }
    .info_stock h1{
        font-size: 18px;
        font-weight: 500;
    }
    #stock-display{
        font-size: 19px;
        font-weight: 700;
        font-family: 'Julius Sans One', sans-serif;
    }
    .info_marca h1{
        font-weight: bold;
        font-size: 20px;
        font-family: 'Julius Sans One', sans-serif;
        font-style:normal;
        font-weight: 700;
    }
    
.btn-comprar{
    margin-top: 20px;
}
.agregar-al-carro {
    display: block;
    width: 100%;
    text-align: center;
    background-color: #000000;
    color: #ffffff;
    padding: 12px 0;
    border: none;
    border-radius: 5px;
    font-size: 20px;
    text-decoration: none;
    margin: 10px 0; 
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
  

    font-weight: bold;
    font-family: 'Julius Sans One', sans-serif;
    font-style:normal;
    font-weight: 700;
}
.agregar-al-carro {
    transition: background-color 0.5s, color 0.6s;
}

.agregar-al-carro:hover {
    background-color: #303030; 
    color: goldenrod;
    text-decoration: none; 
    
}
/* TALLAS */
.talla_div {
    display: flex;
    justify-content: space-between;
}

.tallas-panel {
    text-align: center;
}

.tallas-list {
    display: flex;
}

.talla {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 50px;
    background-color: #f2f2f2;
    border: 1px solid #ddd;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    padding-left: 15px;
    padding-right: 15px;
    transition: background-color 0.5s, color 0.5s;
}


.talla.selected {
 
    color: #ffffff;
    background-color: #000000;
} 


.talla:hover {
    background-color: #000000;
    color: #ffffff;
}
/* TALLAS */
}
/* ......................................TAMAÑO TABLET ..................................*/
/* ❋❋❋❋❋❋❋❋❋❋❋  MAIN  ❋❋❋❋❋❋❋❋❋❋❋  ❋❋❋❋❋❋❋❋❋❋❋  MAIN  ❋❋❋❋❋❋❋❋❋❋❋❋❋❋❋❋❋❋❋❋❋❋  MAIN  ❋❋❋❋❋❋❋❋❋❋❋ */
































/* Footer ♡♡♡♡♡♡♡♡♡ Footer ♡♡♡♡♡♡♡♡♡ Footer ♡♡♡♡♡♡♡♡♡ Footer ♡♡♡♡♡♡♡♡♡  Footer ♡♡♡♡♡♡♡♡♡ Footer ♡♡♡♡♡♡♡♡♡  Footer*/
    /* INICIO ------------------------------------------TAMAÑO PC ---------------------------*/
    @media (min-width:1025px){ 
        .pre-footer img {
            display: block;
            width: 100%;
        }
        .pre-footer{
            margin-top: 120px;
            width: 100%;
            height: 390px;
            margin-bottom: 10px;
        }
        .footer-dark {
            padding: 50px 0;
        
            background: rgb(0,0,0);
            background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 44%, rgba(0,0,0,1) 76%, rgba(34,34,34,1) 92%, rgba(47,47,47,1) 92%, rgba(159,159,159,1) 95%,
            rgba(172,172,172,1) 96%, rgba(186,186,186,1) 98%, rgba(255,255,255,1) 99%, rgba(255,255,255,1) 100%);
            font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
            
        }
        .footer-dark a{
            color: #ffffff;
            opacity: 0.6;
        }
        .footer-dark a:hover{
            color: #ffffff;
            opacity: 1;
        }
        .custom-container {
            max-width: 1200px;
            margin: 0 auto;
        
        }
        .custom-row {
            display: flex;
            flex-wrap: wrap;
            margin-right: -65px; /* Reducir el margen */
            margin-left: -65px /* Reducir el margen */
        }
        .custom-col {
            color: #ffffff;
            flex: 1;
            box-sizing: border-box;
        }
    
        .custom-social {
            text-align: center;
            margin-top: 20px;
        }
        .custom-social > a {
            font-size: 20px;
            width: 36px;
            height: 36px;
            line-height: 36px;
            display: inline-block;
            text-align: center;
            border-radius: 50%;
            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
            margin: 0 8px;
            /* opacity: 0.6; */
        }
        .custom-social > a:hover {
            opacity: 1;
        }
        .custom-copyright {
            text-align: center;
            padding-top: 24px;
            opacity: 0.3;
            font-size: 13px;
            margin-bottom: 0;
        }
        .footer-dark ul {
            padding:0;
            list-style:none;
            line-height:1.6;
            margin-bottom:0;
        }
        .footer-dark ul a {
            text-decoration:none;
            font-size:14px;
        }
    
        .custom-copyright {
            text-align:center;
            padding-top:13px;
            opacity:0.4;
            font-size:13px;
            color: #fff;
        }
        .custom-copyright:hover {
            text-align:center;
            padding-top:13px;
            opacity:1;
            color: #fff;
            font-size:13px;
        } 
        .custom-col h3{
            font-size: 20px;
        }
        }
        /* FIN ----------------------------------------------TAMAÑO PC ---------------------------*/
    
    
    
        /* INICIO------------------------------------------TAMAÑO TABLET ---------------------------*/
        @media (min-width:481px) and (max-width:1280px){

            .orden_1{
                margin-top: 30px;
            }
            
            .pre-footer img {
                display: block;
                width: 100%;
                margin-top: 130px;
                margin-bottom: -22px;
            }
            .pre-footer{
                width: 100%;
             
            
            }
            .footer-dark {
                margin-top: 1px;
                padding: 70px 0;
                color: #f0f9ff;
                background: rgb(0,0,0);
                background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 44%, rgba(0,0,0,1) 76%, rgba(34,34,34,1) 92%, rgba(47,47,47,1) 92%, rgba(159,159,159,1) 95%,
                rgba(172,172,172,1) 96%, rgba(186,186,186,1) 98%, rgba(255,255,255,1) 99%, rgba(255,255,255,1) 100%);
                font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
            }
            .custom-container {
                max-width: 440px;
                margin: 0 auto;
            
            }
            .custom-row {
                display: flex;
                flex-wrap: wrap;
                margin-right: -65px; 
                margin-left: -65px 
            }
            .custom-col {
                flex: 1;
                box-sizing: border-box;
            }
            .custom-text p {
                opacity:0.6;
                cursor: pointer;
            }
            .custom-text p:hover {
                opacity:0.8;
            }
            .custom-social {
                text-align: center;
                margin-top: 20px;
            }
            .custom-social > a {
                font-size: 20px;
                width: 36px;
                height: 36px;
                line-height: 36px;
                display: inline-block;
                text-align: center;
                border-radius: 50%;
                box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
                margin: 0 8px;
                color: #fff;
                opacity: 0.75;
            }
            .custom-social > a:hover {
                opacity: 1;
            }
            .custom-copyright {
                text-align: center;
                padding-top: 24px;
                opacity: 0.3;
                font-size: 13px;
                margin-bottom: 0;
            }
            .footer-dark ul {
                padding:0;
                list-style:none;
                line-height:1.6;
                margin-bottom:0;
            }
            .footer-dark ul a {
                color:inherit;
                text-decoration:none;
                opacity:0.6;
                font-size:14px;
            }
            .footer-dark ul a:hover {
                opacity:0.8;
            } 
            .custom-copyright {
                text-align:center;
                padding-top:13px;
                opacity:0.3;
                font-size:13px;
            }
            .custom-copyright:hover {
                text-align:center;
                padding-top:13px;
                opacity:0.8;
                font-size:13px;
            } 
    
                .custom-col.orden_2,
            .custom-col.orden_3 {
                flex-basis: 50%; /* Ocupa la mitad del ancho disponible */
            }
            
    
            /* Estilo para la columna de sunglasses */
            .custom-col.orden_1 {
                flex-basis: 100%; /* Ocupa todo el ancho disponible */
            }
            
        }
        /* FIN --------------------------------------------TAMAÑO TABLET ---------------------------*/
    
    
        /* Inicio -------------------------------------TAMAÑO CELULAR --------------------------------- */
        @media (max-width:480px){
            .orden_3{
                margin-top: 30px;
            }
            .orden_1{
                margin-top: 30px;
            }
            .pre-footer img {
                display: block;
                width: 100%;
            }
            .pre-footer{
                width: 100%;
                height: 70px;
                margin-top: 100px;
            }
            .footer-dark {
                margin-top: 1px;
                font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
                padding: 50px 0;
                color: #f0f9ff;
                background: rgb(0,0,0);
                background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 28%, rgba(0,0,0,1) 53%, rgba(0,0,0,1) 75%, rgba(0,0,0,1) 89%, rgba(0,0,0,1) 95%, rgba(60,60,60,1) 97%, rgba(168,168,168,1) 99%, rgba(223,223,223,1) 100%);
            }
            .custom-container {
                max-width: 1200px;
                margin: 0 auto;
            
            }
            .custom-row {
                flex-direction: column;
                align-items: center; /* Centrar horizontalmente los elementos */
                text-align: center; /* Centrar el contenido de los elementos */
            }
    
    
            .custom-col {
                flex: 1;
                box-sizing: border-box;
                order: 2;
            }
            .custom-text p {
                opacity:0.6;
                cursor: pointer;
            }
            .custom-text p:hover {
                opacity:0.8;
            }
            .custom-social {
                text-align: center;
                margin-top: 20px;
            }
            .custom-social > a {
                font-size: 20px;
                width: 36px;
                height: 36px;
                line-height: 36px;
                display: inline-block;
                text-align: center;
                border-radius: 50%;
                box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
                margin: 0 8px;
                color: #fff;
                opacity: 0.75;
            }
            .custom-social > a:hover {
                opacity: 1;
            }
            .custom-copyright {
                text-align: center;
                padding-top: 24px;
                opacity: 0.3;
                font-size: 13px;
                margin-bottom: 0;
            }
            .footer-dark ul {
                padding:0;
                list-style:none;
                line-height:1.6;
                margin-bottom:0;
            }
            .footer-dark ul a {
                color:inherit;
                text-decoration:none;
                opacity:0.6;
                font-size:14px;
            }
            .footer-dark ul a:hover {
                opacity:0.8;
            } 
            .custom-copyright {
                text-align:center;
                padding-top:13px;
                opacity:0.4;
                font-size:15px;
            }
            .custom-copyright:hover {
                text-align:center;
                padding-top:13px;
                opacity:0.8;
                font-size:15px;
            }   
        
    
        }
        /* Fin --------------------------------------- TAMAÑO CELULAR --------------------------------- */
    /* Footer ♡♡♡♡♡♡♡♡♡ Footer ♡♡♡♡♡♡♡♡♡ Footer ♡♡♡♡♡♡♡♡♡ Footer ♡♡♡♡♡♡♡♡♡  Footer ♡♡♡♡♡♡♡♡♡ Footer ♡♡♡♡♡♡♡♡♡  Footer*/