.titulon{
    margin: 3vw;
    width: 100%;
    align-content: center;
    text-align: center;
}
.rr{
    flex-direction: row-reverse;
}
.btnwhats{
    position: relative;
}
#whb{
        z-index: 10;
        top: 86%;
        left: 87%;
        width: 5rem;
        position: fixed;
}
.icon-cart {
    width: 2.4rem;
    height: 2.4rem;
}
@font-face {

    font-family: 'poppin';

    src: url('fonts/Poppins-Regular.ttf') format('truetype'); /* Ruta a tu archivo de fuente Quicksand */

    /* Otros formatos de fuente si es necesario */

}



#llegainfor{
    opacity: 0;
}
.marquee {
            width: 100%;
            overflow: hidden;
            background-color: #333;
            padding: 10px 0;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        .marquee-content {
            display: flex;
            width: max-content;
            animation: scroll-left 15s linear infinite;
            color: white;
            font-size: 20px;
            font-weight: bold;
        }

        .marquee-content span {
            margin-right: 50px;
        }

        @keyframes scroll-left {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(-50%);
            }
        }
 
 .testimonio-parte{
            width:80%;
            margin: auto;
            display:flex;
            background-color:#fff;
          
            justify-content: center;
            margin-bottom: 3vw;

        }
        .testimonial-carousel{
                        display:flex;
                          gap:3vw;

        }
        .testimonial-card {
            width: 300px;
            padding: 20px;
            background-color: #f5f5f5;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        .stars {
            color: #ffcc00;
            font-size: 20px;
            margin-bottom: 10px;
        }

       .testimonio-parte h3 {
            margin: 0;
            font-size: 18px;
            color: #333333;
        }

        .testimonial-text {
            font-size: 14px;
            color: #555555;
            margin: 10px 0;
            line-height: 1.6;
        }

        .location {
            font-size: 12px;
            color: #888888;
            margin-top: 10px;
            font-style: italic;
        }
        .redod{
            display:flex;
            background-color:#E83C3C;
            width:30px;
            height:30px;
            border-radius:50%;
            position:absolute;
            top:-50%;
            align-content:center;
            justify-content:center;
            
        }
        .estrecir{
            display:flex;
            justify-content:space-between;
            margin-left:35%;
        }
        .espacio_redod{
            position:relative;
            left:-2.3vw;
        }
        .redod svg{
            color:#fff;
            width:50%
        }
        .progress-container {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 13px;
        }

        .circle {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: conic-gradient(
                #000 calc(var(--porcentaje) * 1%), 
                #fff calc(var(--porcentaje) * 1%)
            );
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 13px;
            font-weight: bold;
            color: #333;
        }
        .circulin{
                display: flex;
            border-radius: 50%;

            justify-content: center;
            align-items: center;
                width: 50px;
            height: 50px;
               background-color:#fff;
                z-index:1;
             
        }

        .text {
            max-width: 80%;
            font-size: 14px;
            line-height: 1.5;
        }
        .estadistica{
            
            background-color:#fff;
            padding:1.3vw;
            height:100%;
            width:50%;
        }
        .part_info{
                justify-content: space-between;
                display:flex;

    padding:2vw;
    font-family: 'Arial', 'Helvetica', sans-serif;

        width:80%;
        margin:auto;
            background-color:#fff;
        display:flex;
        flex-direction:row;
        }
        .inf_about{
            text-align:center;
            align-self:center;
            padding:3vw;
            width:50%;
            
        }
        #peque{
            font-size:10.1px;
            
        }     .tablita_decom{
        width: 40%;
     }
      .parte table {
            width: 80%;
            border-collapse: collapse;
        }

        . thead th {
            color: #000;
            padding: 12px;
            text-align: center;
            font-weight: bold;
        }

        .highlight {
        }

        tbody td {
            padding: 10px;
            text-align: center;
            border-bottom: 1px solid #ddd;
        }
tbody{      
background-color: #fff;

}
.tle{            border-top-left-radius:4vw;
box-shadow: 0px -2px 8px 0 rgba(0, 0, 0, 0.2);

}
.tri{            border-top-right-radius:4vw;
    box-shadow: 0px -2px 8px 0 rgba(0, 0, 0, 0.2);

}
.ble{
    border-bottom-left-radius:4vw;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2)

}
.bri{
    border-bottom-right-radius:4vw;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2)
;

}
        tbody tr:last-child td {
            border-bottom: none;
        }

        .checkmark {
            font-weight: bold;
        }

        .cross {
            color: #000;
            font-weight: bold;
        }
        .salido{
            background-color:#000;
            color:#fff;
                        border-bottom: 0px solid #ddd;

        }
        .sobre{
            height:20px;
            border-top-left-radius:4vw;
            border-top-right-radius:4vw;
            

        }
          .sobra{
            height:20px;
            border-bottom-left-radius:4vw;
            border-bottom-right-radius:4vw;

        }
        .blacki_theme{
            background-color: black;
            color: white;
        }
        .del_bor{
            border-bottom: 0px solid #ddd;
        }
.detalles_informativos tbody{
    border-spacing: 0;

}
.detalles_informativos td{
   border: 1px solid;
        border-spacing: 0;

}

/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  src: url('fonts/symbol.woff2') format('woff2');
}
.sector_iconos svg{
width:3vw;
height: 3vw;

}
.detalles_li{


margin-left: 0.7vw;
}
.caracteris_inmb{
    margin: auto;
}
.detalles_li h4{
    margin: 0;
}
.sector_iconos h2{
    margin: 0;
    font-size: 1vw;
}
.icon_li {
    width: 4vw;
    height: 4vw;
}
.sector_iconos{
    width:88%;

}
.sector_iconos p{
    margin: 0;
}
.sector_iconos ul{
list-style-type: none;
display: flex;
padding: 0;
flex-wrap:wrap;

}
.sector_iconos li{
    width: 32%;
    margin:0.33%;
    display: flex;
    flex-direction: row;

}
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}




























@media only screen and (min-width: 601px) {
    .thumbnail {
height: 10vw;
width: 10vw;
    }
    .divicla{width:100%; padding:2vw; 
display:flex;
    gap:4.7rem;
    margin: auto;
}
.divicla img{ width:49%;
    border-radius: 15px;

height:100%;
}
.texto_gener{
    width: 40%;
    padding: 2vw;

}
    
.titulo_inmb{
    font-size: 2vw;

}
.disponibilidad svg{ color:red; width:1vw; height:   1vw; }
.disponibilidad{font-size: 1vw; font-family: "pope"}
.price_inmb{
    font-size: 3vw;
    color: #8b8a8a;
}
@font-face {

    font-family: 'Kanit Light';

    src: url('fonts/kanit-Light.ttf') format('truetype');

    font-weight: normal;

    font-style: normal;

}
    .before_cont {
        width: 100%;
      overflow: hidden;
      font-size: 1.23vw;
      font-weight: bold;
      padding: 1.3vw;
      color: white;
      background-color: #262626;
    }

    .container_despla {
      width: 100%; /* Cambiamos el ancho para ajustarse al contenido clonado */
      display: flex;
      flex-direction: row;
      animation: desplazar 6s linear infinite;
      white-space: nowrap; /* Evita que el texto se rompa en múltiples líneas */
    }

 

    @keyframes desplazar {
      0% {
        transform: translateX(0); /* Iniciamos el desplazamiento desde la izquierda */
      }
      100% {
        transform: translateX(-35%); /* Movemos el contenido una vez, equivalente a la mitad del ancho del contenedor */
      } 
    }


.loquedicen{

width: 100%;
display: flex;
flex-direction: row;


}
#valoracion{
width: 50%;
padding: 2vw;
display: flex;
flex-direction: column;
}
#valoracion hr{
    border: 0;
  clear:both;
  display:block;
  width: 96%;               
  background-color:#4444;
  height: 1px;
}
#valoracion h1{
    margin: 0;
    font-size: 2vw;
}
.cir_valora{
    padding: 0.1vw;
    width: 90%;
    display: flex;
    flex-direction: row;
}

.cir_valora p{
    margin: 1vw;
    font-size: 1.4vw;
    color: #3c3c3c;


}
#valoracion svg{
    width: 80px;
    height: 80px;
}
#masde{
    font-size: 3vw;
}
#pedidos_entregados{
    width: 50%;
    text-align: center;
    padding: 3vw;
}
     circle{
            fill:none;
            stroke-width:10;
            transform:rotate(-70deg);
            transform-origin:50%;
             stroke-dasharray: 100 100;
                     stroke:#AAA;


            
        }
          circle:nth-child(2){
            
            stroke-dasharray: var(--porcentaje) 100;
            stroke:black;
            
            
        }
        .porcentajes_ci{
            position:relative;
            
        }
        .porcentajes_ci span{
            position:absolute;
            top:31%;
            left:29%;
            bottom:0%;
font-size:20px;
font-weight:bold;

            
        }
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; }

@font-face {

    font-family: 'Kanit Italic';

    src: url('fonts/Kanit-Italic.ttf')format('truetype');

    font-weight: normal;

    font-style: italic;

}
.btn_desc{
    margin-top: 1.3vw;
}
.button_disc{
    font-size: 1vw;
        font-weight: bold;
        color: white;
        width: 14vw;
        padding: 1vw;
        border-radius: 2vw;
        background-color: #000000;
}

a{

    text-decoration: none;

    color: inherit;




}

.onlymobile{

    display: none;

}



body {

        font-family: 'Kanit Italic', sans-serif;



    margin: 0; /* Elimina el margen predeterminado del cuerpo */


}

/* CSS en styles.css */



header {
display: none;

    background-color: rgb(38, 38, 38);

    color: #fff;

    font-weight: bold;

    justify-content: center;

    position: fixed;

    width: 100%;

    height: 5.2%;    

    top: 0; /* Fija el encabezado en la parte superior de la página */

    z-index: 1000; /* Ajusta el z-index para que el encabezado esté por encima de otros elementos */

justify-content: center;

}

html{
    overflow-x: hidden;

}


header ul {
    align-self: center;

    list-style-type: none;

    margin: 0;

    padding: 0;

}



header span {

    margin:3.9vw; /* Ajusta el margen entre los elementos */

}

.menu #menu_contenido{

    width: 90%;

    display: flex;

    flex-direction: row;

    margin-left: 10vw;
}

.menu {

    border-bottom-left-radius:1vw ;

    border-bottom-right-radius: 1vw;

    border: 1px solid #4444;

    background-color: #fafafa;

    top: 0;

z-index: 999 ;



position: fixed;


    padding-bottom: 0;


    display: flex; 

    width: 100%;

        max-width: 100%;

    height: 10%;

    max-height: 15%;

    overflow: hidden;

align-content: center;

text-align: center;

}

.menu a{

    text-align: center;

    align-content: center;

font-weight: bold;

margin-left: 2vw;

}



.menu span{

    text-align: center;

    align-content: center;

font-weight: bold;



}



.banner {position: relative;

    overflow: hidden;

    margin-top: 4.8rem;

    background-color: #000;

    width: 100%;

    height: 35vw; /* Ajusta la altura del banner según sea necesario */



}



.banner img{



	width: 100%;

    height: 100%;

object-fit: cover;



}





.drop_cat span{

	margin: 0;



}

.drop_cat{

      text-align: center;

    align-content: center;

    margin-left: 3vw;

    color: black;
    display: flex;


}



.drop_cat:hover {

	color: gray ;

}





.material-symbols-outlined {



  font-variation-settings:

  'FILL' 0,

  'wght' 400,

  'GRAD' 0,

  'opsz' 24

}





.material-symbols-outlined{

    font-size: 13px;

        cursor: default; /* Cambia el cursor a una mano para indicar que es interactivo */



}

.menu .material-symbols-outlined{

    font-size: 23px;

    margin-left: 0;
    align-self: center;



}

.menu .logo{

    position: relative;


    margin: 0;


width: 7rem;

max-height: 90%;

height: 3rem;

padding: 0;
display: flex;
overflow: hidden;
align-self:center;



}
.logo img{
    width: 100%;
    max-height: 100%;
}

.logo:hover{

    opacity: 0.57;

}



.menu_cat {

    width: 10rem;
        position: relative;
        top: 4rem;
        border: 1px solid #4444;
        display: none;
        opacity: 0;
        /* width: fit-content; */
        height: 0vw;
        background-color: #fff;
        border-radius: 10px;
        transition: opacity 4s ease-in-out, height 4s ease-in-out;
        z-index: 1000 !important;
}

.menu_cat {

    text-align: left;

    justify-self: left;

    padding: 0.7vw;

    padding-top:0.2vw;

}

.menu_cat ul{

    padding: 0;

    margin: 0.4vw;

    text-decoration: none;

    list-style-type: none;



}

.menu_cat a{

        font-weight: normal;



    text-decoration: none;

    margin: 0;

    text-align: left;

    margin-top: 0.2vw;

}

.drop_cat:hover .menu_cat {

    display: block;

    opacity: 1;

    position: fixed;

    height: fit-content;

}

.pqnosotros{
    padding: 1vw;
    width: 40%;
    margin-left: 5vw;
}
.pqnosotros p{
text-align: center;
width: 80%;
}
.pqnosotros h2{
    text-align: center;
    font-size: 2.2vw ;
}

.parte{
    padding: 1vw;

    display: flex;
    justify-content: space-between;

    margin-top: 2vw;

    background-color: #fff;

    width: 82%;
margin: auto;
    height: fit-content; /* Ajusta la altura del banner según sea necesario */



}



.imgen{

    overflow: hidden;

    height: 460px;

    max-height: 130%;

    max-width: 70%;

border-radius: 3vw;

padding: 2vw;

margin-left: 6vw;



}



#who{

    display: flex;

    flex-direction: column;

    padding: 6vw;

    width: 50%;

}

#who h4{

    text-align: center;

    font-size: 2vw;

    margin-bottom: 0;

}



#who p{



    color: #555252;

    font-size: 1.6vw;

}

* {

    box-sizing: border-box;

}

.categorias{



        width: 100%;

    max-width: 100%;

    padding: 2vw 8vw 0; /* Ajustar el relleno superior y eliminar el relleno inferior */

    padding-top: 2vw;

    overflow: hidden;

    display: grid;

    grid-template-columns: repeat(3, 1fr); /* Esto crea dos columnas de tamaño igual */



    gap: 20px; /* Espacio entre las celdas */    



padding-bottom: 3vw;

}







.categoria img{



    height: 100%;

    max-height: 100%;

    border-radius: 1vw;

        width: 100%;

    max-width: 100%;

    object-fit: cover;

        transition: transform 0.3s ease; /* Agregar una transición suave al efecto de zoom */





}

.parte_categoria{

    display: flex;

    flex-direction: column;

    margin-top: 2vw;

    background-color: #fafafa;

    width: 100%;

    max-width: 100%;

    overflow: hidden;

    height: fit-content; /* Ajusta la altura del banner según sea necesario */





}

.parte_producto{

    display: flex;

    flex-direction: column;

    margin-top: 9vw;

    background-color: #fff;

    width: 100%;

    max-width: 100%;

    overflow: hidden;

    height: fit-content; /* Ajusta la altura del banner según sea necesario */



}



.parte_categoria h2{

    text-align: center;

    margin-bottom: 0;

}





.categoria {



  width: 100%;

    height: 205px; /* Cambia la altura al 100% */

    max-height: 300px;

    border-radius: 1vw;

    overflow: hidden;

    display: flex;

    justify-content: center;

    align-items: center;

    position: relative;

}





.categoria .overlay {

    overflow: hidden;

    width: 100%;

    height: 100%;

    max-width: 100%;

    background-color: rgba(0, 0, 0, 0.5); /* Ajusta el color del fondo del overlay */

    z-index: 100;

    position: absolute;

    top: 0; /* Coloca el overlay en la parte superior del contenedor */

    left: 0; /* Coloca el overlay en la parte izquierda del contenedor */

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    color: white;

        transition: transform 10s ease; /* Ajusta la duración de la transición a 1 segundo */



}

.carousel_products-container{

    display: none;

}



.categoria .overlay:hover {



    overflow: hidden;

    width: 100%;

    height: 100%;

    max-width: 100%;



    background-color: rgba(0, 0, 0, 0.2); /* Ajusta el color del fondo del overlay */

  

}

 .categoria:hover img{



    transform: scale(1.2); /* Aplicar un aumento del 10% al hacer hover sobre la imagen */



}





.categoria .overlay h2 {

    color: white;

    text-align: center; /* Centra el texto dentro del overlay */

    margin: 0; /* Elimina el margen predeterminado */

}

.btn{

    padding: .8vw;

    border-radius: 0.5vw;

    font-size: 1.2vw;

}

.succes{

    background-color: #0ba435;

    color: white;

    font-weight: bold;

}

.content_productos{
height: fit-content;
    text-align: left;

        width: 85vw;

    max-width: 100%;

    padding: 8vw;

    padding-top: 2vw;

    padding-bottom: 0;

    overflow: hidden;

  display: grid;

    grid-template-columns: repeat(4, 1fr); /* Esto crea dos columnas de tamaño igual */

    gap: 20px; /* Espacio entre las celdas */    

    margin-bottom: 2vw;

}





.parte_producto h2{

    text-align: center;

}





.contenido_desctiptivo {

   

    font-size: 0.8vw;

    margin-bottom: 0;

text-align: center;

padding: 0.5vw;

}







.contenedor_imagen_producto img{



 

        width: 100%;

   height: auto;

    object-fit: cover;

    overflow: hidden;



}



.producto{

position: relative;

    border-radius: 1vw;

    width: 100%;

    height: 100%;



overflow: hidden;

}


.topleft {
    border-top-left-radius: 3vw;
}

.topright {
    border-top-right-radius: 3vw;
}
.bottomleft {
    border-bottom-left-radius: 3vw;
}

.bottomright {
    border-bottom-right-radius: 3vw;
}


.celda-regular{
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 4px 0px;    
    border-left: 0px;
}
  .tabla-comparativa {box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    width: 100%;
    font-family: Arial, sans-serif;
  }

  .tabla-comparativa th, .tabla-comparativa td {
    padding: 5px;
    
  }

  .centrada {
    text-align: center;
  }

  .logo-tabla-comparativa {
    --mobile-logo-width: 60px;
    --font-size: 1.8rem;
  }

  .otros {
    --font-size: 1.8rem;
  }

  .nombre-fila-tabla-comparativa {
    background-color: #fff;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
border-right: 0px;
  }
.bloque-explica{
    padding: 3vw;
    width: 100%;
    display:flex;
    background-color:#fff;
    
}
  .celda-destacada {

      color:#fff;
    background-color: #262626; /* Verde agua */
  }
  .rt{
border-top-left-radius: 2vw;
    border-top-right-radius:2vw ;

  }
  .bradius{
    border-bottom-left-radius: 4vw;
    border-bottom-right-radius: 4vw;
    padding:1vw;
  }
  .tablita svg{
width:1vw;
height: 1.4vw;
    
  }
  tr{
    margin: 0;
  }
  table{
  border-spacing: 0;
  }
  .tablita{
    padding: 1.2vw;
      font-size:1.3vw;
      font-weight:100;
      width:47%;
      margin:auto;
  }
  .tablita th,tr{
      width:fit-content;
      padding:1vw;
  }
  .tablita p{
    margin:0;
    padding: 0.47vw;

  }
  .why_usnew{
      max-width:50%;
      padding:2.5vw;
      
      
  }
  .why_usnew h2 {
      font-size:3vw;
      font-weight:bold;
 
  }
  


.content_productos .producto{

    border: 0.01px groove #e7e7e7;

        background-color: #fafafa;

}



.contenedor_imagen_producto {

    display: flex;

        flex-wrap: wrap;



width: 100%;

height: 260px;

max-height: 300px;

overflow: hidden;

margin-bottom: 0;

}

.ahorro{

   

    text-align: left;

    font-weight: bold;

    font-size: 0.96vw;

    position: absolute;

    background-color: rgba(0, 0, 0, 0.8); /* Ajusta el color del fondo del overlay */

    color: white;

    padding-top:0.3vw;

    padding-bottom: 0.3vw;

    padding-left: 0.7vw;

    padding-right: 0.7vw;

    border-radius: 0.6vw;

    justify-content: left;

}

.mod_tag{

    width: 100%;

    position: absolute;

    top: 8px;

    left: 8px;



}



.price{

        font-size: 1.5vw;

align-content: center;

    color: #000;

    text-align: center;

    font-weight: bold;

justify-content: center;







}
.bloque_precios{
    display: flex;
    flex-direction: row;
    align-items: center;
    }

.pricepp{
    font-size: inherit;
    font-size: 2vw;
}
.redpp{
    font-size: inherit;
        font-size: 2.2vw;

}
#tacha{
    font-size: 2vw;
}
.ahorro_tag_price_product{
    margin-left: 2vw;
    height: fit-content;
display: flex;
align-items: center;
padding: 0.3vw;
padding-right: 0.7vw;
        font-size: 1vw;
border-radius: 0.5vw;
flex-direction: row;
    background-color: #E83C3C;
    color:#fff;
}
.ahorro_tag_price_product svg{
    width:1vw;
height: 1vw;
align-self: center;
}

.producto s{

      text-decoration:line-through;  text-aling:center; color:gray; font-size:1.5vw;

}



.red{

    color: red;

    margin: 0.4vw;



}

.redpp{
font-size:2vw;
    color: red;

    margin: 0.4vw;



}
.seemore {

    align-items: center;

    width: fit-content;

    cursor: pointer;

    background-color: #fff;

    text-decoration: none;

    border: 1px solid green;

    color: green;

    font-weight: bold;

    padding: 1.5vw;

    transition: border-width 0.2s ease; /* Transición suave solo para el ancho del borde */

    box-sizing: border-box; /* Asegura que el tamaño del botón incluya el ancho del borde */

    margin-bottom: 2vw;

}



.seemore:hover {

    border-width: 4px; /* Aumenta el ancho del borde al pasar el cursor */

    border-color: #56f55e; /* Cambia el color del borde al pasar el cursor */

    color: white;

    background-color: green;

}







.parte_producto {

    justify-content: center;

    align-items: center;

    text-align: center;

    margin-bottom: 1vw;

}



.benefits{

        width: 100%;

    max-width: 100%;

    padding: 10vw;

    padding-top: 2vw;

    padding-bottom: 0;

    overflow: hidden;

  display: grid;

    grid-template-columns: repeat(4, 1fr); /* Esto crea dos columnas de tamaño igual */

    gap: 20px; /* Espacio entre las celdas */    

}



.cuadro_benefits{

    align-items: center;

    text-align: center;

}



.cuadro_benefits h2{

    margin-bottom: 0;

}



.detalles_producto{

width: 100%;

font-family: poppin;

padding-top: 0;

display: flex;

}

.central{

    margin-top:10%;



}

.detalles_producto .carousel-container{
margin-left: 4%;
    width: 46%;
position: fixed;
    margin-right: 8%;



}



.carousel-container img{

    border-radius: 1vw;



}





.carousel-slide {

  display: flex;

  overflow: hidden;

}



.carousel-slide img {

  width: 100%;

  display: none;

}



.carousel-slide img.active {

  display: block;

     height:40vw;

     width: 100%;

object-fit: cover;
}



.thumbnails {

  display: flex;
  overflow: auto;
    max-width: 100%;
height: auto;
  margin-top: 10px;

  margin-left: 0;

}



.thumbnail {

 
  object-fit: cover;

  margin-right: 5px;

  cursor: pointer;

  opacity: 0.6;

}



.thumbnail.active-thumbnail {

  border: 2px solid blue;

  opacity: 1;

}



.next-btn, .prev-btn{
        font-size: 2rem;
        color: #9d9696;
        border: 0 solid;
        /* border-radius: 3vw; */
        align-items: center;
        position: absolute;
        background-color: transparent;
        padding: 0.8vw;

  



}




 .carousel-slide:hover .anterior{

    display: flex;

}



.carousel-slide:hover .despues{

    display: flex;

}

.anterior, .despues{

display: none;

  height: fit-content;

    align-self: center;

   





}

.despues{

    position: relative;

    left: -7.3%;

}



.contenido_informativo{
margin-left: 57%;
    overflow: hidden;
margin-right: 3%;
  width: 50%;

    padding: 0.1vw ;
            margin-bottom: 3vw;

}

@font-face {

    font-family: 'pope';

    src: url('fonts/bold_p.ttf') format('truetype'); /* Ruta a tu archivo de fuente Quicksand */

    /* Otros formatos de fuente si es necesario */

}



.contenido_informativo .titulo{
        margin: 0;
        width: 80%;
        font-size: 2.4vw;

}


.contenido_informativo .view{

    font-size: 1.3vw;

    margin-left: 0.3vw;

}




.numeric-input {

     border-radius: 1.3vw;

        background-color: #e2dfdf;



            display: flex;

            align-items: center;

            width: 90%;

            height: 3vw;



        }

        .numeric-input:hover{

        border-radius: 0.5vw;

        border: 0.3vw solid #8d8d89;

         background-color: #d0cbcb;

            

        }



.numeric-input:hover input{

  background-color: #d0cbcb;

  margin: 0;

  padding: 0;

  border: 0;

       }









        .numeric-input input {

            background-color: #e2dfdf;

            width: 70vw;

            height: 100%;

            text-align: center;

            padding: 5px;

            border: 1px solid #e5e5e5;

            border-radius: 4px;

            font-size: 16px;



        }



        .numeric-input input[type="number"]:focus {

    background-color: transparent; /* Cambia el color de fondo cuando el input está activo */

    outline: none; /* Quita el contorno predeterminado al enfocar el input */

}

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

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

    -webkit-appearance: none;

    margin: 0;

}



        .numeric-input button {

            width: 9vw;

            height: 100%;

            font-size: 1.7vw;

            color: #444;

            background-color: #e2dfdf;

            border: none;

            border-radius: 5px;

            cursor: pointer;

          

            

        }

       



       .box {

  animation: bounce 2.6s infinite;

  



}



@keyframes bounce {

    0%, 100% {

    transform: rotate(0deg);

  }

  10% {

    transform: rotate(-5deg);

  }

  20% {

    transform: rotate(7deg);

  }

  30% {

    transform: rotate(-6deg);

  }

  40% {

    transform: rotate(7deg);

  }

  50% {

    transform: rotate(-5deg);

  }

  60% {

    transform: rotate(5deg);

  }

  70% {

    transform: rotate(-5deg);

  }

  80% {

    transform: rotate(5deg);

  }

  90% {

    transform: rotate(-2deg);

  }

  91%{

        transform: rotate(0deg);



  }



92%{

        transform: rotate(0deg);



  }

  93%{

        transform: rotate(0deg);



  }

94%{

        transform: rotate(0deg);



  }

95%{

        transform: rotate(0deg);



  }



100%{

        transform: rotate(0deg);



  }

}



.detenida {

  animation: none !important; /* Detiene la animación */

}

#paybutton_mobile{

display: none;

}

#paybutton, #paybutton_car{
        margin-left: 0.4vw;
        border-radius: 0.8vw;
        margin-top: 2.7vw;
        margin-bottom: 1vw;
        width: 91%;
        padding: 1.2vw;
        background-color: #33c120 !important;
        border-width: 0px;
        box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.95) !important;

}
 #paybutton svg{
    width: 1.5vw;
    height: 1.5vw;
    align-self: center;
 }


.time_countdown{

    padding: 1vw;

    font-size: 1.8vw;

    text-align: center;



}

@font-face {

    font-family: 'pope_del';

    src: url('fonts/FiraSans-Medium.ttf') format('truetype'); /* Ruta a tu archivo de fuente Quicksand */

    /* Otros formatos de fuente si es necesario */

}



.time_countdown h1{




}



#countdown {

  width: 100%;



    display: flex;

    flex-direction: row;

    justify-content: center;

    font-family: "Roboto", sans-serif;

    font-size: 20px;

    color: #000;

    

    padding: 10px;

    margin-top: y;

    padding-left: 30px;

    font-size: 3vw;



}



#countdown > div {

    display: flex;

    flex-direction: column;

    margin-right: 5px;

    margin-left: 5px;

    align-items: center;

}



#countdown span {

    margin-right: 1px;

    font-size: 2.9vw;

    font-weight: bold;

    border: 1px solid #000;

    padding: 0.5vw;

    padding-top: 0.35vw;

    padding-bottom: 0.35vw;

    border-radius: 0.7vw;

}







#countdown .info_time {

    border: 0px;

    font-size: 18px;

    color: #999696;

}







.sve{

    margin-top: 2vw;

    margin-left: 3vw;

}

.sve svg{

    width: auto;

    max-width: 100%;

    height: 5vw;

    max-height: 2vw;

    margin-left: 0.1vw;





}



 @keyframes rotateUpDown {

        0% {

            transform: translateY(-50%) rotate(0deg);

        }

        25% {

            transform: translateY(0%) rotate(90deg);

        }

        50% {

            transform: translateY(50%) rotate(180deg);

        }

        75% {

            transform: translateY(0%) rotate(270deg);

        }

        100% {

            transform: translateY(-50%) rotate(360deg);

        }

    }



.arre span {



  display: inline-block;

  vertical-align: top;

}

.arre p{



    text-decoration: none;

    margin: 0;



}



.detalles_informativos li{
    font-size: 18px;
        align-items: auto;
        text-align: center;
        border-bottom: 1px solid #f4f4f4;
}

.detalles_informativos{

width: 90%;

margin: auto;
margin-top: 4vw;
text-align: center;

background-color: #FFF;

border-radius: 2vw;





}


.detalles_informativos h2{

        font-size: 2.4vw;



}

.detalles_informativos p, li{

        font-size: 1rem;
text-align: left;


}



.over_all {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100vw;

    background-color: rgba(0, 0, 0, 0.5);

    z-index: 900 !important;







}



.form_buyer {



    position: absolute;

top:0;
    left: 30%;

    background-color: #ffff;

    opacity: 1;

    z-index: 1000 !important;

    align-content: center;

    align-items: center;

    text-align: center;

    width: 45%;

    height: 100%;

    padding: 1.4vw;

    border-radius: 1vw;


  overflow: auto;



}



.form_buyer input{



    width: 100%;

    height: 3vw;

    padding: 0.8vw;

    border-radius: 0.2vw;

    border: 0.1 solid gray;



    border-top-left-radius: 0px !important;

    border-bottom-left-radius: 0px !important;

}





.form_buyer .praform{
    align-items: center;
    align-content: center;

    border-top-left-radius: 0.4vw;

    border-bottom-left-radius: 0.4vw;

    padding-left: 1vw;

    padding-right: 1vw;

    padding-top: 0.52vw;

    padding-bottom: 0.52vw;

background-color: #e1e1e1!important;

position: relative;

    font-size: 1.8vw;

    font-weight: bold;

    align-items: center;

    align-self: center;

}



.form_buyer input:hover{



    border: 0.1vw solid silver;



}

.form_buyer .info_f{

    text-align: left;

width: 20%;

max-width: 15%;

font-size: 1vw;

font-weight: bold;





}



.modelo_in{

width: 90%;

    height: 3vw;

    overflow: hidden;

    display: flex;

    flex-direction: row;

    margin: 0.8vw;



}

.info_f{

    display: flex;

    flex-direction: inline;

}



.info_f .material-symbols-outlined{

    color: red;

    font-weight: bold;

    font-size: 0.8vw;

    margin-top: 0.25vw;

}



.praform, input{



    border: 2px solid gray;

}



.form_buyer select{

    width: 100%;

    background-color: #b1a9a9;

    font-weight: bold;

    border-radius: 0.4vw;

    margin: 0;



}



.form_buyer select option{

    background-color: #fff;

    padding: 1vw;

}



.medio{

    width: 100%;

display: flex;

flex-direction: row;

margin-left: 10%;

}



.form_buyer input, option, select{

        font-size: 1.2vw;



}

 #map {

      width:70%;

      height: 300px;

      border: 1px solid black;

      overflow: hidden;

      margin: auto;

     }



#close{



    position: relative;

font-size: 2vw;

    font-weight: bold;

    color: gray;

        cursor: pointer; /* Cambia el cursor a una mano para indicar que es interactivo */

margin: 0;



}    

.des {

    overflow: auto;



    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */

    z-index: 1000; /* Asegura que esté por encima de otros elementos */

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    display: none;

}



.descuento #grat{

    margin: auto;

    color: white;

    font-size: 3vh;

    font-weight: bold;

    align-content: center;

background: linear-gradient(135deg, rgb(255, 156, 0) 0%, rgb(255, 20, 77) 72%) !important; width: 15vh !important; height: 15vh !important; clip-path: polygon(100% 50%, 88.64% 60.35%, 93.3% 75%, 78.28% 78.28%, 75% 93.3%, 60.35% 88.64%, 50% 100%, 39.65% 88.64%, 25% 93.3%, 21.72% 78.28%, 6.7% 75%, 11.36% 60.35%, 0% 50%, 11.36% 39.65%, 6.7% 25%, 21.72% 21.72%, 25% 6.7%, 39.65% 11.36%, 50% 0%, 60.35% 11.36%, 75% 6.7%, 78.28% 21.72%, 93.3% 25%, 88.64% 39.65%) !important;

}



.descuento #acept_desc{

    margin-top: 3vw;

    width:90%;

padding: 1.8vw;

font-size: 1.2vw;

color: rgb(255, 255, 255) !important; background: linear-gradient(315deg, rgb(255, 156, 0) 0%, rgb(255, 20, 77) 72%) !important; font-weight: 600 !important; border-color: rgb(0, 0, 0) !important; border-style: solid !important; border-width: 0px !important; border-radius: 6px !important; box-shadow: rgba(0, 0, 0, 0) 0px 2px 7px 0px !important;

}



.descuento #no_grax{

     margin-top: 2vw;

    width:90%;

padding: 1vw;

font-size: 1.2vw;

border: 2px solid;

background-color: #fff;

font-weight: bold;

}

.descuento{
width: 27vw;
    margin: auto;


    height: fit-content;

       padding: 2vw;

    border-radius: 2vw;

    background-color: #fff;

}



.des{

z-index: 10000 !important;



}

.invoice{



    margin: auto;


    margin-top: 1vw;

    background-color: #f9f9f9;

    padding: 1vw;

    width: 90%;

    border-radius: 0.3vw;

    border: 0.6px solid #d9d9d9;



}

.list_invoice {

display: flex;

flex-direction: row;

    text-align: left;

    margin-left: 1vw;



}



.list_invoice .detalle{



display: block;

width: 100%;

max-width: 27%;

color: #5c6067;

overflow: hidden;

  white-space: nowrap;

  margin-right: 35%;



}

.list_invoice .price_list{

    font-weight: bold;



}







.titulo_close{

    display: flex; flex-direction: row; text-align: center; align-content: center; align-items: center;align-self: center; 



    width: 80%;

    margin-left:  20%;

}



.titulo_close h1{

    font-weight: bold;

font-size: 1.4vw;

}

.titulo_close #close{

    margin-left: 10%;

}



.scroll-container {

    overflow-y: auto; /* Habilitar el desplazamiento solo en este contenedor */

    max-height: 100vw; /* Ajustar la altura máxima según sea necesario */

}



@font-face {

    font-family: 'Fira Sans Medium';

    src: url('fonts/FiraSans-Medium.ttf') format('truetype'); /* Ruta a tu archivo de fuente Quicksand */

    /* Otros formatos de fuente si es necesario */

}





.centro_gracias{

   font-family: 'Fira Sans Medium';



    display: flex;

    flex-direction: column;

    margin: auto;

margin-top: 6.7vw;
    width: 80%;

    align-items: center;

    align-content: center;

    text-align: center;

    justify-content: center;



}





.centro_gracias h1{

    font-size: 4vw;





}



.centro_gracias .img_gif{

    width: 55%;

    border-radius: 1vw;



}

#congrat{

    font-size: 24px;

    color: #6aa84f;

}



#team{



    width: 60%;

    text-align: center;

    align-self: center;

    margin:auto;

    color: #444;



}

.centro_gracias #atento{

    margin-top: 0.9vw;

    margin-bottom: 0.9vw;

    color: #f00;

    font-weight: bold;

}

#pure_text{

    display: flex;

    flex-direction: column;

          letter-spacing: 0.1em;

margin-bottom: 2vw;

}

.copyright {

          letter-spacing: 0;



    text-align: center; /* Centra el texto */

    font-size: 13px; /* Tamaño de fuente */

    color: #888; /* Color del texto */

    padding: 10px 0; /* Espaciado interior */

}



/* Estilo para el enlace dentro del aviso de copyright */

.copyright a {

    color: #555; /* Color del enlace */

    text-decoration: none; /* Quita el subrayado */

}



/* Estilo para el enlace cuando está en estado de hover */

.copyright a:hover {

    text-decoration: underline; /* Subraya el enlace al pasar el cursor sobre él */

}





.segunda_seccion{

    width: 100%;

    margin-top: 3vw;

    background-color: #fff;

        margin-bottom: 7vw;



}

#contenido_ss{

    text-align: center;

    align-items: center;

    align-content: center;

    width: 90%;

    margin: auto;

    margin-left: 8vw;

}

.totap{

    border-top: 1px solid black;

}



#invoiceTable{



    width: 90%;

    border-top: 1px solid #d9d9d9;



}

.it_in{

    margin-top: 1vw;

    display: flex;

    flex-direction: row;

    padding: 2px;

    text-align: left;

    margin-left: 1vw;

    border-bottom: 1px solid #d9d9d9;

    text-align: center;

    align-items: center;



}





.it_in .nom_in{

    margin-left: 3vw;

    font-size: 16px;



    width: 60%;

    max-width: 50%;

    text-align: left;

}

.it_in img{

    object-fit: cover;

    margin-top: 0.7vw;

    margin-left: 0.7vw;

    width: 5vw;

    height: 5vw;

    border-radius: 1vw;



}

.it_in .pri_in{





    font-weight: bold;

    font-size: 1.2vw;

    margin-left: 3vw;

}





.it_in_car{

    align-content: center;

text-align: center;

justify-content: center;

align-self: center;

    border-bottom: 1px solid rgb(38, 38, 38);

       display: flex;

    flex-direction: row;

}



.it_in_car .nom_in_car{

    align-content: center;

text-align: center;

justify-content: center;

align-self: center;

 

    margin-left: 1vw;

  



    width: 100%;

    text-align: left;

}

.imag_in_car{

     width:fit-content;

}

.it_in_car img{

    object-fit: cover;

    margin-top: 0.7vw;

    width: 5vw;

    height: 5vw;

    border-radius: 1vw;



}

.it_in_car .pri_in_car{

align-content: center;

text-align: center;

justify-content: center;

align-self: center;

    font-weight: bold;

    font-size: 1.2vw;

    margin-left: 1vw;

}









.dotpage_section{

    margin-top: 2vw;

    width: 100%;

background-color: #fafafa;

padding: 1vw;

}



.dot_page{

    background-color: rgb(38, 38, 38);

padding: 0.7vw;

color: #fff;

font-weight: bold;

margin: 0.2vw;

border: 0px;

border-radius: 0.7vw;

}

.difd{

    background-color: rgb(38, 38, 38);

}

.fin{

    background-color: #b5b5b561;

}



.seleccionado_page{



    background-color: #fff;

    color: rgb(38, 38, 38);

    border: 1px solid rgb(38, 38, 38);

}



.left_section_sub{

    display: flex;

    flex-direction: column;

    width: 130px;

    max-width: 16%;

    height: fit-content;

margin-top: 2vw;

margin-left: 20px;

    padding: 1.4vw;

    border-radius: 0.9vw;

background-color: #fafafa;

align-items: center;

justify-content: center;



}

.left_section_sub ul{

margin: 0;

    padding:0;

list-style-type: none;

}

.left_section_sub li{

    align-self: center;

    border-radius: 0.2vw;

    margin-bottom: 0.2vw;

    color: #fff;

    padding: 0.8vw;

background-color: rgb(38, 38, 38);



}



.left_section_sub li:hover{

    background-color: #fff;

    color: rgb(38, 38, 38);

    border:0.5px solid rgb(38, 38, 38);

}

.regulador{

    margin: 0.1vw;



    display: flex;

    flex-direction: row;

}

.regulador .content_productos{

    padding: 2vw;

}



.left_section_sub .selected_sub{

    background-color: #fff;

    color:rgb(38, 38, 38) ;

    border: 1px solid rgb(38, 38, 38) ;

}

.parte_producto h2{
text-align: left;
padding: 1vw;
    margin: 0;

}

.ban_cat{

 

align-content: center;

    width: 100%;

    height: 20vw;

    max-height: 20vw;  

    overflow: hidden;



}

.ban_cat img{

    width: 100%;

    position: relative;
            max-height: 239%;


    object-fit: cover;

}



.content_cat{

  width: 100%;

height: 100%;

position: absolute;

top: 0;

background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */

    color: #fff; 

    align-items: center;

    align-content: center;

    text-align: center;





}

.tofixthe{

    position: relative;

    top: initial;

    /



      z-index: 1000;

width: 100%;

height: 100%;

}

.order_section{

    width: 100%;

    align-content: center;

}

.filtro_select{

      width: 13vw;

    background-color: #e1e1e1;

    border-radius: 0.4vw;

    margin: 0;

    padding: 0.24VW;

}





.menu_carro_section{

    display: flex;

    flex-direction: row;

    margin-top: 1vw;

    cursor: pointer;

    margin-left:  5vw;

    position: relative;

align-content: center;

align-items: center;

height: 100%;



justify-content: center;

align-self: center;

}



#cantidad_en_bolsa{

    position: relative;

    left: -13px;

    top: -14px;

font-weight: bold;

background-color: rgb(38, 38, 38);

color: #fff;

font-size: 0.8vw;

border-radius: 1vw;

padding: 0.3VW;





}

.menu .carro_menu_vector{

    font-size: 2.3vw;



}

.carro_section_over{

    border-top-left-radius: 1vw;

    border-bottom-left-radius: 1vw;

background-color: #fafafa;

    width: 30%;

    height: 100vw;

    display: none;

    position: fixed;

z-index: 990 !important;

    right: 0;

    top: 7vw;

}



.invoice_over{

    width: 90%;

    border-top: 1px solid #d9d9d9;

    display: flex;

    flex-direction: column;

}

.parte_lista{

    margin-top: 1vw;

    border-radius: 1vw;

    background-color: #fff;

    padding: 1vw;

    display: block;

    width: 100%;

    text-align: left;



}

.detalle_lista{

    margin-left: 2vw;

    max-width: 100px;

    margin-right: 10vw;

}



.onlypc{

font-size: 2.3vh;



    width: 55%;

font-weight: 0;

display: flex;

flex-direction: row;

margin-left: 3vw;



}

.ove_menu_mobile{

    display: none;



}



.titulo_botones{

    height: 2vw;

width: fit-content;

background-color: #f0f0f0;

border: 1px solid #4444;

border-radius: 1vw;

    display: flex;

    flex-direction: row;

    align-items: center;

    margin-top: 1vw;

margin-bottom: 1vw;

}

.boton_carro{

    display: flex;

    align-items: center;

    align-content: center;

    text-align: center;

background-color: 0;

border: 0;

    margin: 1vw;

    padding: 0.3vw;

    height: 2vw;

    max-height: 90%;

}

.fix_tit{

    margin-left: 2vw;

    width: 40%;

    font-size: 1vw;

    display: flex;

    flex-direction: column;

}



.phone_search{

display: none;
}





.parte_opiniones{
    display: flex;
    flex-direction: column;
    width: 94%;
    margin: auto;
    margin-top: 1vw;

}






.carro_opi-container {
            position: relative;
            max-width: 100%;
            /* Ajusta el ancho según sea necesario */
            margin: 0 auto;
            overflow: hidden;
        }

        .carro_opi-slide {
            width: 100%;
            height: fit-content;
            border-radius: 2vw;
            display: flex;

            transition: transform 0.5s ease;
        }

        .carro_opi-item{
            position: relative;
                    margin: 1vw;
            border-radius: 2vw;
                        background-color: #f5f5f5;

            display: flex;
            width: 100%;
        }

        .puntos-container {
display: none;
            text-align: center;
            margin-top: 10px;
        }

        .punto {
            display: inline-block;
            height: 10px;
            width: 10px;
            border-radius: 50%;
            background-color: #bbb;
            margin: 0 5px;
            cursor: pointer;
        }

        .punto.active_punto {
            background-color: #333;
        }

        .estrellitas {
            margin: auto;
            color: rgb(255, 215, 0);
            margin-bottom: 0;
            font-size: 2vw;
        }

        .contenido_car_review {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: fit-content;


        }

        .contenido_car_review h3 {
            margin: auto;
            margin-top: 0;
            margin-bottom: 0;
        }

        .contenido_car_review svg {
            width: 1.8vw;
            height: 1.8vw;

        }

        .contenido_car_review #opinion {

            display: flex;
            align-items: center;
            text-align: center;

            padding-top: 0;
            font-size: 1.3vw;
          width: 88%;
            height: 10vw;
            overflow: auto;
            margin: auto;
            margin-top: 1vw;
            color: rgba(0, 0, 0, 0.7);

        }

        .testimonial {
            position: absolute;
            top: 3%;
            right: 2%;
            display: flex;
            align-items: center;
            color: white;
            height: fit-content;
            padding: 0.6vw;
            border-radius: 7vw;
            background-color: #ff2425;
        }





.slinea{
    width: 85%;
    color:#ad9f9f;
    margin-bottom: 0.4vw;
        margin-top: 0.4vw;

}
#ciudad_opion{
    
    text-align: center;
font-weight: 600;
        margin-top: 0;
        font-size: 1.2vw;
}

#mastestimonios_titulo{
    font-size: 4vw;
    text-align: center;
}












   .resenas {
        z-index: 988;
    position: fixed;
    top: 40%;
           border-radius:1vw;

    display: flex;
    flex-direction: column;
    align-items: center;
    width: 170px; /* ajusta el ancho según tus necesidades */
    overflow: hidden;

  }

  .contenedor-resena {
    width: fit-content;
         background-color:#fff;
    animation: deslizar 3s ease-in-out forwards;
  }
    .contenedor-resena a{
        text-decoration:none;
        color:#767676;
    }
.contenedor-resena .descripcion, .nombre,.enlace{ margin-left:1.3vw;  }
  @keyframes deslizar {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(0);
    }
  }



.contenedor-resena img{
    width:100%;

    max-height: 9vw;
}


      .review_item {
            display: flex;
            height: fit-content;
            overflow: hidden;
            max-width: fit-content;
        }

        .stars_overlay {

            z-index: 100;
            max-width: calc(var(--puntuacion) * 20%);
            white-space: nowrap;

            overflow: hidden;

        }

        .stars_underlay {
            position: absolute;
            

        }

        .review_item svg {
            width: 2.2vw;
            display: inline-block;
            margin: 0 auto;

        }

        .stars_underlay svg {
            color: #2626;
        }

        .container_review_custom p {
            margin: 0;
            margin-left: 1.5vw;
            font-weight: 200;
        }
        .container_review_custom{
            display:flex;
        }


            .circular {
                font-size: 2vw;
            width:fit-content;
           
            padding: 1.2vw;
            background-color: #000;
            color: #fff;
                        margin-bottom:1vw;
            border-radius: 10vw;
        }
        .logistica {
margin:auto ;

            width: 90%;
            display: flex;
            overflow: hidden;
            position: relative; /* Agrega esta línea */
        }
        .etapa { 
                        align-items:center;
z-index:100;
        width:33.33%;
            display:flex;
            flex-direction:column;
        }
        .linea {
           
            position: absolute;
            background-color: #000;
            height: 0.5vw;
            width: 66%;
            left:20%;
            top: 19%;
            transform: translateY(-50%);
            overflow: hidden;
        }
        .inicial {
            margin-left: 0;
        }
        .datos_etapa{
        display:flex;
        flex-direction:column;
            align-items:center;
            text-align:center;
        }

       .grid_reviews {
            display: flex;
            
            grid-gap: 10px;
            /* Espacio entre las celdas */
            margin: auto;
        max-width: 90%;
        flex-wrap: wrap
        }

        .over_cont_review_container img {
            max-width: 100%;
            height: auto;
        }

        .over_cont_review_container {
          max-width: calc(25% - 10px); /* Ancho máximo de cada elemento */
            box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
            height: fit-content; /* Ajusta automáticamente la altura según el contenido */
            border-radius: 1.4vw;
            overflow: hidden;
        }

        .box_desc_grid {
            width: 90%;
            margin: auto;
        }




.controls-cel{
    display: none;
}

}





























































































































@media only screen and (max-width: 600px) {
    #whb{
        left:80%;
        width: 2.4rem;
    }
    .progre-cir{
height: 19vw;
        width: 23%;
    justify-content: center;
    display: flex;
    }

     .progress-container {
        margin-left: 3vw;
        gap: 27px;
        }
    .marquee-content{
        font-size: 13px;
        animation: scroll-left 17s linear infinite;
    }

.circle {
            width: 100%;
            height: 100%;
            
        }
        .circulin{
             font-size: 18px;
                width: 80%;
            height: 80%;
              
             
        }
   
     .controls-cel {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
        }

        .preve-btn, .nexte-btn {
            font-size: 24px;
            cursor: pointer;
            margin: 0 10px;
            user-select: none;
        }

        .dot {
            height: 10px;
            width: 10px;
            margin: 0 5px;
            background-color: #bbb;
            border-radius: 50%;
            display: inline-block;
            cursor: pointer;
        }
.dot.active {
            background-color: #555;
        }

@keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }


    .testimonial-card{
        width: 100%;
       display: none;
            animation: fadeIn 0.5s;
    }
        .testimonial-card.active {
            display: block;
        }
    .testimonio-parte{
        flex-direction: column;
        width: 90%;
    }
    .pqnosotros{
        padding: 2vw;
    margin-bottom: 2vw;
    }
    
 .text{
    font-size: 15px;
    width: 70%;
margin-right: 5%;

}

    .inf_about{
        width: 90%;
        margin-bottom: 3vw;
    }
    .estadistica{
width: 100%;
    }

    .part_info{


        width: 100%;
        flex-direction: column;
    }
    .parte table{

        width:90%;
margin: auto;
    }
    .tablita_decom{
                width:100%;
margin-bottom: 6vw;
    }

   @font-face {

    font-family: 'Kanit Light';

    src: url('fonts/Kanit-Light.ttf') format('truetype');

    font-weight: normal;

    font-style: normal;

}

 .review_item {
            display: flex;
            height: fit-content;
            overflow: hidden;
            max-width: fit-content;
        }

        .stars_overlay {

            z-index: 100;
            max-width: calc(var(--puntuacion) * 20%);
            white-space: nowrap;

            overflow: hidden;

        }

        .stars_underlay {
            position: absolute;
            

        }

        .review_item svg {
            color:  rgb(255, 215, 0);
            width: 4.4vw;
            display: inline-block;
            margin: 0 auto;

        }

        .stars_underlay svg {
            color: #2626;
        }

        .container_review_custom p {
            margin: 0;
            margin-left: 1.5vw;
            font-weight: 200;
        }
        .container_review_custom{
            display:flex;
        }


       
        .logistica {
margin-top: 3vw;
            width: 90%;
            display: flex;
            overflow: hidden;
            position: relative; /* Agrega esta línea */
        }
        .etapa { 
                        align-items:center;
z-index:100;
        width:33.33%;
            display:flex;
            flex-direction:column;
        }
        .linea {
           
            position: absolute;
            background-color: #000;
            height: 0.5vw;
            width: 66%;
            left:20%;
            top: 19%;
            transform: translateY(-50%);
            overflow: hidden;
        }
        .inicial {
            margin-left: 0;
        }
        .datos_etapa{
        width: 90%;
        font-size: 3vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        }
@font-face {

    font-family: 'pope';

    src: url('fonts/bold_p.ttf') format('truetype'); /* Ruta a tu archivo de fuente Quicksand */

    /* Otros formatos de fuente si es necesario */

}


@font-face {

    font-family: 'Kanit Italic';

    src: url('fonts/Kanit-Italic.ttf') format('truetype');

    font-weight: normal;

    font-style: italic;

}

a{

    text-decoration: none;

    color: inherit;

    margin: inherit;



}

.phone_search{
    padding: 2vw;
    display: none;
    border-radius: 2vw;
background-color: rgb(38, 38, 38);
width: 100%;
height: 10vw;
align-content: center;
align-items: center;
top:-20vw;
    position: fixed;
 transition: top 0.3s ease; /* Animación de transición al cambiar la posición */

}

.show-search{
top: 13vw;
z-index: 1001;
display: block;

}

body {

        font-family: 'Kanit Italic', sans-serif;



    margin: 0; /* Elimina el margen predeterminado del cuerpo */



}

/* CSS en styles.css */



header {

    font-size: 2.3vw;

    background-color: rgb(38, 38, 38);

    color: #fff;

    font-weight: bold;

    display: flex;

    position: fixed;

    width: 100%;

    padding: 1vw;

    top: 0; /* Fija el encabezado en la parte superior de la página */

    z-index: 1000; /* Ajusta el z-index para que el encabezado esté por encima de otros elementos */

justify-content: center;

}



header ul {

    list-style-type: none;

    margin: 0;

    padding: 0;

}



header span {

    margin:1vw; /* Ajusta el margen entre los elementos */

}

.menu #menu_contenido{

    margin-top: 2vw;

    width: 80%;

    display: flex;

    flex-direction: row;

    margin-left: 10vw;

    overflow: hidden;

}

#search_input{
    margin: auto;
    align-self: center;
    border-radius: 0.3vw;
    width: 90%;
height: 80%;
border: 0px solid;

}

.icon-cart{
    width:1rem;
    height: 1rem;

}

.menu {

    font-size: 2.5vw;

    top:2%;

    border-bottom-left-radius:1vw ;

    border-bottom-right-radius: 1vw;

    border: 1px solid #4444;

    background-color: #fafafa;


    z-index: 999 !important;

    position: fixed;

    padding: 1vw;

    padding-bottom: 0;

 

    display: flex; 

    width: 100%;

        max-width: 100%;

    height: 10vw;

    max-height: 15%;

align-content: center;

text-align: center;

}

.menu a{

    text-align: center;

    align-content: center;

font-weight: bold;

margin-left: 2vw;

}



.menu span{

    text-align: center;

    align-content: center;

font-weight: bold;



}



.banner {

    position: relative;

    overflow: hidden;

    margin-top: 14vw;

    background-color: #000;

    width: 100%;

    height: 35vw; /* Ajusta la altura del banner según sea necesario */



}



.banner img{



    width: 100%;

    height: 100%;

object-fit: cover;



}





.drop_cat span{

    margin: 0;



}

.drop_cat{

    display: flex;

    flex-direction: row;

      text-align: center;

    align-content: center;

    margin-left: 3vw;

    color: black;

}



.drop_cat:hover {

    color: gray ;

}





.material-symbols-outlined {



  font-variation-settings:

  'FILL' 0,

  'wght' 400,

  'GRAD' 0,

  'opsz' 24

}





.material-symbols-outlined{

    font-size: 13px;

        cursor: default; /* Cambia el cursor a una mano para indicar que es interactivo */



}

.menu .material-symbols-outlined{

    font-size: 23px;

    margin-left: 0;



}

.menu .logo{



    position: relative;

    top: 0;



    

       margin: auto;

    margin-top: 0%;

width: 17vw;

max-height: 100%;

height:13vw;

padding: 0;

overflow: hidden;



}

.logo:hover{

    opacity: 0.57;

}



.menu_cat {

    border: 1px solid #4444;

    display: none;

    opacity: 0;

    width: fit-content;

    height: 0vw;

    background-color: #fff;

    border-radius: 1vw;

    transition: opacity 4s ease-in-out, height 4s ease-in-out; /* Cambio la duración de la transición de opacidad a 4 segundos */

    z-index: 1000 !important;

}

.menu_cat {

    text-align: left;

    justify-self: left;

    padding: 0.7vw;

    padding-top:0.2vw;

}

.menu_cat ul{

    padding: 0;

    margin: 0.4vw;

    text-decoration: none;

    list-style-type: none;



}

.menu_cat a{

        font-weight: normal;



    text-decoration: none;

    margin: 0;

    text-align: left;

    margin-top: 0.2vw;

}

.drop_cat:hover .menu_cat {

    display: block;

    opacity: 1;

    position: fixed;

    height: fit-content;

}



.parte{

    text-align: center;

    display: flex;

    flex-direction: column;

    margin-top: 2vw;

    background-color: #ffff;

    width: 100%;

    height: fit-content; /* Ajusta la altura del banner según sea necesario */



}



.imgen{



    overflow: hidden;

    margin: auto;

    margin-top: 5vw;

    max-height: 130%;

    max-width: 80%;

border-radius: 3vw;



}



#who{



    display: flex;

    flex-direction: column;

    padding: 2vw;

    width: 100%;

}

#who h4{

    justify-content: center;

    align-items: center;

    text-align: center;

    align-self: center;

    font-size: 6vw;

    margin-bottom: 0;

}



#who p{

    margin: auto;

    text-align: center;

    align-items: center;

    justify-content: center;

width: 76%;

    color: #555252;

    font-size: 4vw;

}

* {

    box-sizing: border-box;

}

.categorias{

display: none;

        width: 100%;

    max-width: 100%;

    padding: 2vw 8vw 0; /* Ajustar el relleno superior y eliminar el relleno inferior */

    padding-top: 2vw;

    overflow: hidden;





    gap: 20px; /* Espacio entre las celdas */    



padding-bottom: 3vw;

}







.categoria img{



    height: 100%;

    max-height: 100%;

    border-radius: 1vw;

        width: 100%;

    max-width: 100%;

    object-fit: cover;

        transition: transform 0.3s ease; /* Agregar una transición suave al efecto de zoom */





}

.parte_categoria{

    display: flex;

    flex-direction: column;

    margin-top: 2vw;

    background-color: #fafafa;

    width: 100%;

    max-width: 100%;

    overflow: hidden;

    height: fit-content; /* Ajusta la altura del banner según sea necesario */





}

.parte_producto{

    display: flex;

    flex-direction: column;

    margin-top: 9vw;

    background-color: #fff;

    width: 100%;

    max-width: 100%;

    overflow: hidden;

    height: fit-content; /* Ajusta la altura del banner según sea necesario */



}

.parte_categoria h2{

    text-align: center;

    margin-bottom: 0;

}





.categoria {



  width: 100%;

    height: 100%; /* Cambia la altura al 100% */

    max-height: 300px;

    border-radius: 1vw;

    overflow: hidden;

    display: flex;

    justify-content: center;

    align-items: center;

    position: relative;

}





.categoria .overlay {

    overflow: hidden;

    width: 100%;

    height: 100%;

    max-width: 100%;

    background-color: rgba(0, 0, 0, 0.5); /* Ajusta el color del fondo del overlay */

    z-index: 100;

    position: absolute;

    top: 0; /* Coloca el overlay en la parte superior del contenedor */

    left: 0; /* Coloca el overlay en la parte izquierda del contenedor */

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    color: white;

        transition: transform 10s ease; /* Ajusta la duración de la transición a 1 segundo */



}



.categoria .overlay:hover {



    overflow: hidden;

    width: 100%;

    height: 100%;

    max-width: 100%;



    background-color: rgba(0, 0, 0, 0.2); /* Ajusta el color del fondo del overlay */

  

}

 .categoria:hover img{



    transform: scale(1.2); /* Aplicar un aumento del 10% al hacer hover sobre la imagen */



}





.categoria .overlay h2 {

    color: white;

    text-align: center; /* Centra el texto dentro del overlay */

    margin: 0; /* Elimina el margen predeterminado */

}

.btn{

    padding: .8vw;

    border-radius: 0.5vw;

    font-size: 1.7vw;

    padding: 2vw;

}

.succes{

    font-size: 3vw;

    background-color: #0ba435;

    color: white;

    font-weight: bold;

}

.content_productos{

    text-align: left;

        width: 100vw;

    max-width: 100%;

    padding: 2vw;

    padding-top: 2vw;

    padding-bottom: 0;

    overflow: hidden;

  display: grid;

    grid-template-columns: repeat(2, 1fr); /* Esto crea dos columnas de tamaño igual */

    gap: 20px; /* Espacio entre las celdas */    

    margin-bottom: 2vw;

}





.parte_producto h2{

    text-align: center;

}





.contenido_desctiptivo {

   

    font-size: 2.2vw;

    margin-bottom: 0;

text-align: center;

padding: 0.5vw;

}







.contenedor_imagen_producto img{



 

        width: 100%;

       

   height: 100%;

    object-fit: cover;

    overflow: hidden;



}



.producto{

position: relative;

    border-radius: 1vw;

    width: 100%;

    height: 50vw;



overflow: hidden;

}





.content_productos .producto{

    border: 0.01px groove #e7e7e7;

        background-color: #fafafa;

}



.contenedor_imagen_producto {

    display: flex;

        flex-wrap: wrap;



width: 100%;

 height: 100%;

max-height: 80%;

overflow: hidden;

margin-bottom: 0;

}

.ahorro{

    text-align: left;

    font-weight: bold;

    font-size: 2vw;

    position: absolute;

    background-color: rgba(0, 0, 0, 0.8); /* Ajusta el color del fondo del overlay */

    color: white;

    padding-top:0.3vw;

    padding-bottom: 0.3vw;

    padding-left: 0.7vw;

    padding-right: 0.7vw;

    border-radius: 0.6vw;

    justify-content: left;

}

.mod_tag{

    align-content: center;

    width: 100%;

    position: absolute;

    top: 8px;

    left: 8px;



}



.price{

        font-size: 3vw;

align-content: center;

    color: #000;

    text-align: center;

    font-weight: bold;

justify-content: center;







}

.producto s{

      text-decoration:line-through;  text-aling:center; color:gray; font-size:3vw;

}



.red{

    color: red;

    margin: 0.4vw;



}
.redpp{
font-size:6vw;
    color: red;

    margin: 0.4vw;



}
.pricepp{
    font-size: 3vw;
}
#tacha{
    font-size: 4.5vw;
}
.seemore {

    align-items: center;

    width: fit-content;

    cursor: pointer;

    background-color: #fff;

    text-decoration: none;

    border: 1px solid green;

    color: green;

    font-weight: bold;

    padding: 1.5vw;

    font-size: 5vw;

    transition: border-width 0.2s ease; /* Transición suave solo para el ancho del borde */

    box-sizing: border-box; /* Asegura que el tamaño del botón incluya el ancho del borde */

    margin-bottom: 2vw;

}



.seemore:hover {

    border-width: 4px; /* Aumenta el ancho del borde al pasar el cursor */

    border-color: #56f55e; /* Cambia el color del borde al pasar el cursor */

    color: white;

    background-color: green;

}







.parte_producto {

    justify-content: center;

    align-items: center;

    text-align: center;

    margin-bottom: 1vw;

}



.benefits{



        width: 100%;

    max-width: 100%;

    padding: 3vw;

    padding-top: 2vw;

    padding-bottom: 0;

    overflow: hidden;

  display: grid;

    grid-template-columns: repeat(4, 1fr); /* Esto crea dos columnas de tamaño igual */

    gap: 10px; /* Espacio entre las celdas */    

}



.cuadro_benefits{

    align-items: center;

    text-align: center;

}



.cuadro_benefits h2{

    margin-bottom: 0;

    font-size: 3vw;

}

.benefits p{

    max-width: 100%;

    margin: 0;

    font-size: 3vw;

}



.detalles_producto{

margin-top: 10vw;

width: 100%;

padding-top: 0;

display: flex;

flex-direction: column;

}

.central{
overflow: hidden;
    margin-top:3vw;

    padding: 4vw;

    margin-left: 4vw;

}

.detalles_producto .carousel-container{
    position: relative;

    width: 90%;

margin: auto;

}



.carousel-container img{

    border-radius: 1vw;



}





.carousel-slide {

  display: flex;

  overflow: hidden;

}



.carousel-slide img {

  width: 100%;

  display: none;

}



.carousel-slide img.active {

  display: block;

     height:100%;

     width: 100%;

}



.thumbnails {

  display: flex;
  overflow: auto;
    max-width: 100%;
height: auto
  margin-top: 10px;

  margin-left: 0;

}



.thumbnail {

  width: 20vw;

  height: 20vwpx;

  object-fit: cover;

  margin-right: 5px;

  cursor: pointer;

  opacity: 0.6;

}



.thumbnail.active-thumbnail {

  border: 2px solid blue;

  opacity: 1;

}



.next-btn, .prev-btn{

border: 0;
font-size: 3.2vw;
    align-items: center;



    position: absolute;

    background-color: #ffff;

    padding: 0.8vw;

  

  



}

 .carousel-slide:hover .anterior{

    display: flex;

}



.carousel-slide:hover .despues{

    display: flex;

}

.anterior, .despues{

display: none;

  height: fit-content;

    align-self: center;

   





}

.despues{

    position: relative;

    left: -7.3%;

}



.contenido_informativo{

    overflow: hidden;

  width: 100%;

  margin: auto;

    padding: 2vw ;

}

.contenido_informativo .titulo{
    margin: auto;
margin-left: 0;
    width: 90%;

 font-size: 6.5vw;

}
.ahorro_tag_price_product{
    margin-left: 2vw;
    height: fit-content;
display: flex;
align-items: center;
padding: 0.3vw;
padding-right: 0.7vw;
        font-size: 2.3vw;
border-radius: 0.5vw;
flex-direction: row;
    background-color: #E83C3C;
    color:#fff;
}
.ahorro_tag_price_product svg{
    margin-left: 0.5vw;
        width: 2VW;
        height: 2VW;
        align-self: center;
        MARGIN-RIGHT: 1vw;
}
.bloque_precios{
    display: flex;
    flex-direction: row;
    align-items: center;
}
 #paybutton svg{
    width: 4vw;
    height: 4vw;
 }

.contenido_informativo .view{

    font-size: 4vw;

    margin-left: 0.3vw;

}

.contenido_informativo label {

    font-size: 1.4vw;


}

s{
        font-size: 1.4vw;


}
.contenido_informativo .price{

    font-size: 4.5vw;
    margin-right: 1.2vw;

}

.numeric-input {

     border-radius: 1.3vw;

        background-color: #e2dfdf;



            display: flex;

            align-items: center;

            width: 100%;

            height: 8vw;

            margin-bottom: 5vw;



        }

        .numeric-input:hover{

        border-radius: 0.5vw;

        border: 0.3vw solid #8d8d89;

         background-color: #d0cbcb;

            

        }



.numeric-input:hover input{

  background-color: #d0cbcb;

  margin: 0;

  padding: 0;

  border: 0;

       }









        .numeric-input input {

            background-color: #e2dfdf;

            width: 70%;

            height: 100%;

            text-align: center;

            padding: 5px;

            border: 1px solid #e5e5e5;

            border-radius: 4px;

            font-size: 16px;



        }



        .numeric-input input[type="number"]:focus {

    background-color: transparent; /* Cambia el color de fondo cuando el input está activo */

    outline: none; /* Quita el contorno predeterminado al enfocar el input */

}

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

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

    -webkit-appearance: none;

    margin: 0;

}



        .numeric-input button {

            width: 13.2vw;

            height: 100%;

            font-size: 4vw;

            color: #444;

            background-color: #e2dfdf;

            border: none;

            border-radius: 1vw;

            cursor: pointer;

          

            

        }

       



       .box {

  font-size: 4vw;

  animation: bounce 1.3s infinite;

  



}



@keyframes bounce {

    0%, 100% {

    transform: rotate(0deg);

  }

  10% {

    transform: rotate(-5deg);

  }

  20% {

    transform: rotate(7deg);

  }

  30% {

    transform: rotate(-6deg);

  }

  40% {

    transform: rotate(7deg);

  }

  50% {

    transform: rotate(-5deg);

  }

  60% {

    transform: rotate(5deg);

  }

  70% {

    transform: rotate(-5deg);

  }

  80% {

    transform: rotate(5deg);

  }

  90% {

    transform: rotate(-2deg);

  }

  91%{

        transform: rotate(0deg);



  }



92%{

        transform: rotate(0deg);



  }

  93%{

        transform: rotate(0deg);



  }

94%{

        transform: rotate(0deg);



  }

95%{

        transform: rotate(0deg);



  }



100%{

        transform: rotate(0deg);



  }

}



.detenida {

  animation: none !important; /* Detiene la animación */

}

#paybutton, #paybutton_car {

    margin-left: 0.4vw;

    border-radius: 1.5vw;

margin-top: 2vw;

width: 90%;

padding: 2vw;

    background-color: #33c120 !important;

    border-width: 0px ;

    box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.95) !important;

}

#paybutton_mobile{

width: 95%;

margin-left: 0vw;

height: 6%;

   left: 2.5%;

   font-size: 6vw;

    border-radius: 1.5vw;

padding: 2vw;

    background-color: #33c120 !important;

    border-width: 0px ;

    box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.95) !important;

    display: none;

    position: fixed;

    top: 93%;

}

.time_countdown{

    padding: 1vw;

    font-size: 5vw;

    text-align: center;



}



#countdown {

  width: 100%;



    display: flex;

    flex-direction: row;

    justify-content: center;

    font-family: "Roboto", sans-serif;

    font-size: 20px;

    color: #000;

    


    margin-top: y;


    font-size: 3vw;



}



#countdown > div {

    display: flex;

    flex-direction: column;

    margin-right: 5px;

    margin-left: 5px;

    align-items: center;

}



#countdown span {

    margin-right: 1px;

    font-size: 8vw;

    font-weight: bold;

    border: 1px solid #000;

    padding: 0.3vw;

    padding-top: 0.5vw;

    padding-bottom: 0.5vw;

    border-radius: 0.9vw;

}







#countdown .info_time {

    border: 0px;

    font-size: 2.6vw;

    color: #999696;

}







.sve{

    margin-top: 7.7vw;

    margin-left: 3vw;

}

.sve svg{

    width: auto;

    max-width: 100%;

    height: 5vw;

    max-height: 5vw;

    margin-left: 0.1vw;





}



 @keyframes rotateUpDown {

        0% {

            transform: translateY(-50%) rotate(0deg);

        }

        25% {

            transform: translateY(0%) rotate(90deg);

        }

        50% {

            transform: translateY(50%) rotate(180deg);

        }

        75% {

            transform: translateY(0%) rotate(270deg);

        }

        100% {

            transform: translateY(-50%) rotate(360deg);

        }

    }



.arre span {



  display: inline-block;

  vertical-align: top;

}

.arre p{



    text-decoration: none;

    margin: 0;



}





.detalles_informativos{

width: 100%;

margin: auto;

text-align: center;

background-color: #FFF;

 padding: 2vw;



overflow: scroll;
}

.detalles_informativos frame{
    max-width: 50%;
}

.detalles_informativos h2{

        font-size: 2.4vw;



}

.detalles_informativos p{
    text-align:left;

        font-size: 0.8rem;



}
.detalles_informativos li{
    text-align:left;
}
.detalles_informativos img{
    border-radius:2vw;
}


.over_all {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.5);

    z-index: 900 !important;







}



.form_buyer {


top: 1%;
    position: absolute;


    left: 2%;

    background-color: #ffff;

    opacity: 1;

    z-index: 1009 !important;

    align-content: center;

    align-items: center;

    text-align: center;

    width: 98%;

    height: 98%;

    padding: 0.7vw;

    border-radius: 1vw;

margin: auto;

  overflow: auto;
border:solid 2px #000;

border-radius: 4vw;
}



.form_buyer input{

height: 100%;
overflow: hidden;
font-size: 7vw;

    width: 100%;


    padding: 0.8vw;

    border-radius: 1vw;

    border: 0.1 solid gray;



    border-top-left-radius: 0px !important;

    border-bottom-left-radius: 0px !important;

}





.form_buyer .praform{

    border-top-left-radius: 1vw;

    border-bottom-left-radius: 1vw;

    padding-left: 1vw;

    padding-right: 1vw;

    padding-top: 0.52vw;

    padding-bottom: 0.52vw;

background-color: #e1e1e1!important;

position: relative;
align-content: center;

    font-size: 4.8vw;

    font-weight: bold;

    align-items: center;

height: 100%;
}



.form_buyer input:hover{



    border: 0.1vw solid silver;



}

.form_buyer .info_f{

    text-align: left;

width: 70%;

max-width: 100%;

font-size: 4vw;

font-weight: bold;





}



.modelo_in{

width: 90%;

    height: 17vw;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    margin: 0.5vw;



}

.info_f{

    display: flex;

    flex-direction: inline;

}



.info_f .material-symbols-outlined{

    text-align: left;

    color: red;

    font-weight: bold;

    font-size: 3vw;

    margin: 0;

    margin-top: 0.25vw;

}



.praform, input{



    border: 2px solid gray;

}



.form_buyer select{

    width: 100%;
height: 99%;
    background-color: #b1a9a9;

    font-weight: bold;

    border-radius: 0.4vw;

    margin: 0;



}


.form_buyer form{
align-content: center;
align-items: center;
display: flex;
flex-direction: column;
width: 90%;
margin: auto;

}


.form_buyer select option{

    background-color: #fff;

    padding: 1vw;

}

#tachado{
    color: red;
    font-size: 2.4vw;
}


.medio{

    width: 100%;

display: flex;
height: 70%;

flex-direction: row;



}



.form_buyer input, option, select{

        font-size: 4vw;



}

 #map {

      width:80%;

      height: 200px;

      border: 1px solid black;

      overflow: hidden;

      margin: auto;

     }



#close{



    position: relative;

font-size: 2vw;

    font-weight: bold;

    color: gray;

        cursor: pointer; /* Cambia el cursor a una mano para indicar que es interactivo */

margin: 0;



}    

.des {



    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */

    z-index: 1000; /* Asegura que esté por encima de otros elementos */

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    display: none;

}



.descuento #grat{

    display: flex;

    margin: auto;

    color: white;

    font-size: 7vw;

     height: 10vw;

    font-weight: bold;

    align-items: center;

    justify-content: center;

    align-content: center;

    text-align: center;

background: linear-gradient(135deg, rgb(255, 156, 0) 0%, rgb(255, 20, 77) 72%) !important; width: 29vw !important; height: 28vw !important; clip-path: polygon(100% 50%, 88.64% 60.35%, 93.3% 75%, 78.28% 78.28%, 75% 93.3%, 60.35% 88.64%, 50% 100%, 39.65% 88.64%, 25% 93.3%, 21.72% 78.28%, 6.7% 75%, 11.36% 60.35%, 0% 50%, 11.36% 39.65%, 6.7% 25%, 21.72% 21.72%, 25% 6.7%, 39.65% 11.36%, 50% 0%, 60.35% 11.36%, 75% 6.7%, 78.28% 21.72%, 93.3% 25%, 88.64% 39.65%) !important;



}





.descuento #acept_desc{

    margin-top: 3vw;

    width:90%;

padding: 1.8vw;

font-size: 4vw;

color: rgb(255, 255, 255) !important; background: linear-gradient(315deg, rgb(255, 156, 0) 0%, rgb(255, 20, 77) 72%) !important; font-weight: 600 !important; border-color: rgb(0, 0, 0) !important; border-style: solid !important; border-width: 0px !important; border-radius: 6px !important; box-shadow: rgba(0, 0, 0, 0) 0px 2px 7px 0px !important;

}



.descuento #no_grax{

     margin-top: 2vw;

    width:90%;

padding: 1vw;

font-size: 4vw;

border: 2px solid;

background-color: #fff;

font-weight: bold;

}

.descuento{

height: 90%;
    margin: auto;

    width: 65%;


       padding: 1vw;

margin-top: 6%;
    border-radius: 2vw;

    background-color: #fff;

}



.des{

z-index: 10000 !important;



}

.invoice{



    margin: auto;


    margin-top: 1vw;

    background-color: #f9f9f9;

    padding: 1vw;

    width: 90%;

    border-radius: 0.3vw;

    border: 0.6px solid #d9d9d9;



}

.list_invoice {

display: flex;

flex-direction: row;

    text-align: left;

    margin-left: 1vw;



}



.list_invoice .detalle{



display: block;

width: 100%;

max-width: 35%;

color: #5c6067;

overflow: hidden;

  white-space: nowrap;

  margin-right: 40%;



}

.list_invoice .price_list{

    font-weight: bold;



}







.titulo_close{

    display: flex; flex-direction: row; text-align: center; align-content: center; align-items: center;align-self: center; 



    width: 80%;

    margin-left:  20%;

}









.titulo_close h1{

    font-weight: bold;

font-size: 4.4vw;

}



.titulo_close #close{

    font-size: 7vw;

    margin: 0;

    margin-left: 10%;





}



.scroll-container {

    overflow-y: auto; /* Habilitar el desplazamiento solo en este contenedor */

    max-height: 100%; /* Ajustar la altura máxima según sea necesario */

}



@font-face {

    font-family: 'Fira Sans Medium';

    src: url('fonts/FiraSans-Medium.ttf') format('truetype'); /* Ruta a tu archivo de fuente Quicksand */

    /* Otros formatos de fuente si es necesario */

}







.centro_gracias{

   font-family: 'Fira Sans Medium';



    display: flex;

    flex-direction: column;

    margin: auto;
    margin-top: 8vw;

    width: 80%;

    align-items: center;

    align-content: center;

    text-align: center;

    justify-content: center;



}





.centro_gracias h1{

    font-size: 4vw;





}

.logo img{
    width: 100%;
    max-height: 100%;
}

.centro_gracias .img_gif{

    width: 30%;

    border-radius: 1vw;



}

#congrat{

    font-size: 24px;

    color: #6aa84f;

}



#team{



    width: 60%;

    text-align: center;

    align-self: center;

    margin:auto;

    color: #444;



}

.centro_gracias #atento{

    margin-top: 0.9vw;

    margin-bottom: 0.9vw;

    color: #f00;

    font-weight: bold;

}

#pure_text{

    display: flex;

    flex-direction: column;

          letter-spacing: 0.1em;

margin-bottom: 2vw;

}

.copyright {

          letter-spacing: 0;



    text-align: center; /* Centra el texto */

    font-size: 13px; /* Tamaño de fuente */

    color: #888; /* Color del texto */

    padding: 10px 0; /* Espaciado interior */

}



/* Estilo para el enlace dentro del aviso de copyright */

.copyright a {

    color: #555; /* Color del enlace */

    text-decoration: none; /* Quita el subrayado */

}



/* Estilo para el enlace cuando está en estado de hover */

.copyright a:hover {

    text-decoration: underline; /* Subraya el enlace al pasar el cursor sobre él */

}





.segunda_seccion{

    width: 100%;

    margin-top: 3vw;

    background-color: #fff;

        margin-bottom: 7vw;



}

#contenido_ss{

    text-align: center;

    align-items: center;

    align-content: center;

    width: 90%;

    margin: auto;

    margin-left: 8vw;

}

.totap{

    border-top: 1px solid black;

}



#invoiceTable{



    width: 100%;

    border-top: 1px solid #d9d9d9;



}

.it_in{
position: relative;
    margin-top: 1vw;

    display: flex;

    flex-direction: row;

    padding: 2px;

    text-align: left;

    margin-left: 1vw;

    border-bottom: 1px solid #d9d9d9;

    text-align: center;

    align-items: center;
height: auto;


}





.it_in .nom_in{

    margin-left: 3vw;

    font-size: 3.3vw;



    width: 60%;

    max-width: 54%;

    text-align: left;

}

.it_in img{

    object-fit: cover;

    margin-top: 0.7vw;

    margin-left: 0.7vw;

    width: 15vw;

    height: 13vw;

    border-radius: 1vw;



}

.it_in .pri_in{





    font-weight: bold;

    font-size: 3vw;

    margin-left: 3vw;

}





.it_in_car{

    width: 100vw;

margin-left: 2vw;

    border-bottom: 1px solid rgb(38, 38, 38);

       display: flex;

    flex-direction: row;

}



.it_in_car .nom_in_car{

    align-content: center;

text-align: center;

justify-content: center;

align-self: center;

 

    margin-left: 3vw;

    font-size: 3vw;



    width: 100%;

    max-width: 100%;

    text-align: left;

}

.imag_in_car{

     width:fit-content;

}

.it_in_car img{

    object-fit: cover;

    margin-top: 0.7vw;

    width: 15vw;

    height: 15vw;

    border-radius: 1vw;



}

.it_in_car .pri_in_car{

align-content: center;

text-align: center;

justify-content: center;

align-self: center;

    font-weight: bold;

    font-size: 3.3vw;

    margin-left: 3vw;

}









.dotpage_section{

    margin-top: 2vw;

    width: 100%;

background-color: #fafafa;

padding: 1vw;

}



.dot_page{

    background-color: rgb(38, 38, 38);

padding: 0.7vw;

color: #fff;

font-weight: bold;

margin: 0.2vw;

border: 0px;

border-radius: 0.7vw;

}

.difd{

    background-color: rgb(38, 38, 38);

}

.fin{

    background-color: #b5b5b561;

}



.seleccionado_page{



    background-color: #fff;

    color: rgb(38, 38, 38);

    border: 1px solid rgb(38, 38, 38);

}



.left_section_sub{

    display: flex;

    flex-direction: row;

    width: 100%;

    max-width: 100%;

   overflow: auto; 

margin-top: 2vw;



    padding: 1.4vw;

    border-radius: 0.9vw;

background-color: #fafafa;





}

.left_section_sub ul{

    width: 100%;

    max-width: 100%;

display: flex;

flex-direction: row;

margin: 0;

    padding:0;

list-style-type: none;

text-align: center;

}

.left_section_sub li{

    display: flex;

height: 10vw;

    text-align: center;

    font-size: 3.6vw;

    justify-content: center;

    align-self: center;

    border-radius: 0.4vw;

    margin-bottom: 0.4vw;

    border: 1px solid #ffff;

    color: #fff;

    padding: 0.8vw;

background-color: rgb(38, 38, 38);

align-items: center;



}



.left_section_sub li:hover{

    background-color: #fff;

    color: rgb(38, 38, 38);

    border:0.5px solid rgb(38, 38, 38);

}

.regulador{

    margin: 0.1vw;

width: 100%;

    display: flex;

    flex-direction: column;

}

.regulador .content_productos{

    padding: 2vw;

}



.left_section_sub .selected_sub{

    background-color: #fff;

    color:rgb(38, 38, 38) ;

    border: 1px solid rgb(38, 38, 38) ;

}

.parte_producto h2{

    margin: 0;

}
#invoiceTable tr{
    width: 100%;
    border:0;
    margin: 0;
    height: auto;
}
.ban_cat{

 margin-top:14vw;
z-index: 100;
align-content: center;

    width: 100%;

    height: 28vw;

    max-height: 28vw;  

    overflow: hidden;



}

.ban_cat img{

    width: 100%;

    position: relative;

    object-fit: cover;
        max-height: 239%;

}



.content_cat{

  width: 100%;

height: 100%;

position: absolute;

top: 0;

background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */

    color: #fff; 

    align-items: center;

    align-content: center;

    text-align: center;





}

.tofixthe{

    position: relative;

    top: initial;


      z-index: 997;

width: 100%;

height: 100%;

}

.order_section{

    width: 100%;

    align-content: center;

}

.filtro_select{

    font-size: 3.2vw;

      width: 25%;

    background-color: #e1e1e1;

    border-radius: 0.4vw;

    margin: 0;

    padding: 0.24VW;

}





.menu_carro_section{

    margin-top: 4vw;

    cursor: pointer;

    position: relative;

align-content: center;

align-items: center;



width: 7vw;

justify-content: center;

align-self: center;

}

#cantidad_en_bolsa{

    position: relative;

    left:2vw;

    top: -6vw;

font-weight: bold;

background-color: rgb(38, 38, 38);

color: #fff;

font-size: 1.8vw;

border-radius: 1vw;

padding: 0.7VW;







}

.menu .carro_menu_vector{

    font-size: 5vw;



}

.carro_section_over{

    border-top-left-radius: 1vw;

    border-bottom-left-radius: 1vw;

background-color: #fafafa;

    width: 100%;

    height: 100%;

    display: none;

    position: fixed;

z-index: 1000 !important;

    right: 0;

    top: 14vw;

}



#invoice_over{

    width: 100%;

    border-top: 1px solid #d9d9d9;

    display: flex;

    flex-direction: column;

}

.parte_lista{

    margin-top: 1vw;

    border-radius: 1vw;

    background-color: #fff;

    padding: 1vw;

    display: block;

    width: 100%;

    text-align: left;



}

.detalle_lista{

    margin-left: 2vw;

    max-width: 100px;

    margin-right: 10vw;

}

.carousel_products-container {

          position: relative;

          width: 95%;

          overflow: hidden;

          margin: auto;

        }



        .carousel_products {

          display: flex;

          transition: transform 0.5s ease;

          height: 40vw;

        }



        .product {

          flex: 0 0 calc(100% / 1);

          max-width: 90%;

          margin-right: 3%;

          text-align: center;

          border-radius: 1vw;

          background-color: #fff;



        }

        .contenedor_imagen_producto{

            height: 90%;

            width: 100%;

        max-height: 70%;

        }

        .contenedor_imagen_producto img{

                        width: 100%;



            max-height: 100%;

            max-width: 100%;

            object-fit:cover ;

                        border-bottom-left-radius: 0;

                        border-bottom-right-radius:0 ;

        }

.mod_tag, .ahorro,.material-symbols-outlined{

    font-size: 2.9vw;

}

        .prev,

        .next {

          position: absolute;

          top: 50%;

          transform: translateY(-90%);

          background-color: rgba(0, 0, 0, 0.5);

          color: white;

          border: none;

          cursor: pointer;

          padding: 10px;

          z-index: 100;

        }



        .prev {

          left: 0;

        }



        .next {

          right: 0;

        }



        /* Puntos indicadores */

        .dot-container {

          text-align: center;

          margin-top: 10vw;



        }



        .dot {

          height: 10px;

          width: 10px;

          background-color: #bbb;

          border-radius: 50%;

          display: inline-block;

          margin: 0 7px;

          cursor: pointer;

        }



        .active-dot {

          background-color: #333;

        }

        .centro_gracias{

            padding: 3vw;

            background-color: #f9f7f7;

            width: 100%;

        }



        .corcin{background-color: #f9f7f7;}



        .onlypc{

            display: none;

        }



        .onlymobile{

           display: flex;

           align-items: center;



        }

        #menu_mobile{

            position: absolute;

            top: 0;

            height: 100%;

               width: 80%;

               background-color: #fff;

        }

        #menu_mobile li{

            margin-bottom: 3vw;

            font-weight: normal;

            text-align: left;

            

        list-style: none;

        }

.button_disc{
          font-size: 2.6vw;
        font-weight: bold;
        color: white;
        width: 25vw;
        padding: 1vw;
        border-radius: 2vw;
        background-color: #000000;
}

.btn_desc{
    margin-top: 1.3vw;
    margin-bottom: 1.3vw;
}
        #menu_mobile ul{

            padding-left:2vw ;

            align-items: left;

        }

        #menu_mobile a{

            font-weight: normal;

        }



.hidden {

    display: none;

}

#menu_mobile .toggle{ 

    font-size: 5vw;

    margin-left: 13VW;

    padding: 1vw;}



#menu_mobile .toggle:hover{

   

    background-color: #f4f4f4;

    border-radius: 2vw;

    border:2px solid #4444;

}

.ove_menu_mobile{



    width: 100%;

 background-color: rgba(0, 0, 0, 0.5);

top: 13.9vw;                font-size: 4.4vw;

margin: 0;

left: -100%;

       

                position: fixed;

            height: 100%;

            z-index: 1000!important;

              transition: left 0.3s ease; /* Animación de transición al cambiar la posición */



}

.show-menu {

  left: 0; /* Muestra el menú desplazándolo hacia la izquierda */

}

.pc{

display: none;

    }



.adicional{
        margin-top: 16vw;

}







.order_section .material-symbols-outlined{

font-size: 3vw;

}







     .circular {
                font-size: 4.4vw;
            width:fit-content;
           
            padding: 2.6vw;
            background-color: #000;
            color: #fff;
                        margin-bottom:1vw;
            border-radius: 10vw;
        }







.titulo_botones{

    height: 6vw;

width: fit-content;

background-color: #f0f0f0;

border: 1px solid #4444;

border-radius: 1vw;

    display: flex;

    flex-direction: row;

    align-items: center;

    margin-top: 1vw;

margin-bottom: 1vw;

}

.boton_carro{

    display: flex;

    align-items: center;

    align-content: center;

    text-align: center;

background-color: 0;

border: 0;

    margin: 4vw;

    padding: 0.3vw;

    height: 2vw;

    max-height: 90%;

}

.fix_tit{

    align-self: center;

    margin-left: 2vw;

    width: 50%;

    font-size: 3vw;

    display: flex;

    flex-direction: column;

}



.detalles_informativos img{
    max-width: 100%;
    height: 30%;

}

.mobileres{
    display: grid;
}
.parte_categoria{
    margin-top: 5vw;
}






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; }








 .before_cont {
        width: 100%;
      overflow: hidden;
      font-size: 2.3vw;
      font-weight: bold;
      padding: 3.3vw;
      color: white;
      background-color: #262626;
    }

    .container_despla {
      width: 100%; /* Cambiamos el ancho para ajustarse al contenido clonado */
      display: flex;
      flex-direction: row;
      animation: desplazar 6s linear infinite;
      white-space: nowrap; /* Evita que el texto se rompa en múltiples líneas */
    }

   

    @keyframes desplazar {
      0% {
        transform: translateX(0); /* Iniciamos el desplazamiento desde la izquierda */
      }
      100% {
        transform: translateX(-35%); /* Movemos el contenido una vez, equivalente a la mitad del ancho del contenedor */
      } 
    }


.loquedicen{

width: 100%;
display: flex;
flex-direction: column;


}
#valoracion{
width: 100%;
padding: 3vw;
display: flex;
flex-direction: column;
}
#valoracion hr{
    border: 0;
  clear:both;
  display:block;
  width: 96%;               
  background-color:#4444;
  height: 1px;
}
#valoracion h1{
    margin: 0;
    font-size: 5.4vw;
}
.cir_valora{
    padding: 0.1vw;
    width: 90%;
    display: flex;
    flex-direction: row;
}

.cir_valora p{
    width: 100%;
    margin: auto;
display: flex; 
align-items: center;
       margin-left: 3vw;
        /* margin: 1vw; */
        margin-bottom: 0.3vw;
            margin-top: 0;

    font-size: 3.23vw;
    color: #3c3c3c;


}
#valoracion svg{
    width: 65px;
    height: 65px;
}
#masde{
    font-size: 5vw;
}
#pedidos_entregados{
    width: 100%;
    text-align: center;
    padding: 5.3vw;
}
     circle{
            fill:none;
            stroke-width:6;
            transform:rotate(-70deg);
            transform-origin:50%;
             stroke-dasharray: 100 100;
                     stroke:#AAA;


            
        }
          circle:nth-child(2){
            
            stroke-dasharray: var(--porcentaje) 100;
            stroke:black;
            
            
        }
        .porcentajes_ci{
            position:relative;
            
        }
        .porcentajes_ci span{
            position:absolute;
            top:28%;
            left:24%;
            bottom:0%;
font-size:18px;
font-weight:bold;

            
        }



.topleft {
    border-top-left-radius: 3vw;
}

.topright {
    border-top-right-radius: 3vw;
}
.bottomleft {
    border-bottom-left-radius: 3vw;
}

.bottomright {
    border-bottom-right-radius: 3vw;
}


.celda-regular{
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 4px 0px;    
    border-left: 0px;
}
  .tabla-comparativa {box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    width: 100%;
    font-family: Arial, sans-serif;
  }

  .tabla-comparativa th, .tabla-comparativa td {
    padding: 5px;
    
  }

  .centrada {
    text-align: center;
  }

  .logo-tabla-comparativa {
    --mobile-logo-width: 60px;
    --font-size: 1.8rem;
  }

  .otros {
    --font-size: 1.8rem;
  }

  .nombre-fila-tabla-comparativa {
    background-color: #fff;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
border-right: 0px;
  }
.bloque-explica{
    padding: 3vw;
    width: 100%;
    display:flex;
    flex-direction: column;
    background-color:#fff;
    
}
  .celda-destacada {

      color:#fff;
    background-color: #262626; /* Verde agua */
  }
  .rt{
border-top-left-radius: 2vw;
    border-top-right-radius:2vw ;

  }
  .bradius{
    border-bottom-left-radius: 4vw;
    border-bottom-right-radius: 4vw;
    padding:1vw;
  }
  .tablita svg{
width:2vw;
height: 2.4vw;
    
  }
  tr{
    margin: 0;
  }
  table{
  border-spacing: 0;
  }
  .tablita{
    padding: 1.2vw;
      font-size:3.4vw;
      font-weight:100;
      width:100%;
      margin:auto;
      margin-bottom: 2vw;
  }
  .tablita th,tr{
      width:fit-content;
      padding:1vw;
  }
  .tablita p{
          font-weight: 600;
        font-size: 3.4vw;
        margin: 0;
        padding: 1.2vw;

  }
  .why_usnew{
      padding:3vw;
      
      
  }
  .why_usnew h2 {
      font-size:5vw;
      font-weight:bold;
 
  }
  




#citar{
    margin: 0;
        padding: 1vw;
        color: #ad9f9f;
}



.parte_opiniones{
    display: flex;
    flex-direction: column;
    width: 94%;
    margin: auto;
    margin-top: 1vw;

}






.carro_opi-container {
            position: relative;
            max-width: 100%;
            /* Ajusta el ancho según sea necesario */
            margin: 0 auto;
            overflow: hidden;
        }

        .carro_opi-slide {
            width: 100%;
            height: fit-content;
            background-color: #f5f5f5;
            border-radius: 2vw;
            display: flex;

            transition: transform 0.5s ease;
        }

        .carro_opi-item {
            display: flex;
            flex: 0 0 auto;
            width: 100%;
        }

        .puntos-container {

            text-align: center;
            margin-top: 10px;
        }

        .punto {
            display: inline-block;
            height: 10px;
            width: 10px;
            border-radius: 50%;
            background-color: #bbb;
            margin: 0 5px;
            cursor: pointer;
        }

        .punto.active_punto {
            background-color: #333;
        }

        .estrellitas {
            margin: auto;
            color: rgb(255, 215, 0);
            margin-top: 1vw;
            margin-bottom: 0;
            font-size: 4vw;
        }

        .contenido_car_review {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: fit-content;


        }

        .contenido_car_review h3 {
            margin: auto;
            margin-top: 0;
            margin-bottom: 0;
        }

        .contenido_car_review svg {
            width: 3.3vw;
            height: 3.3vw;

        }

        .contenido_car_review #opinion {

            display: flex;
            align-items: center;
            text-align: center;

            padding-top: 0;
            font-size: 3.3vw;
            overflow: hidden;
            width: 73%;
            margin: auto;
            margin-top: 2vw;
            color: rgba(0, 0, 0, 0.7);

        }

        .testimonial {
            position: absolute;
            top: 3%;
            right: 2%;
            display: flex;
            align-items: center;
            color: white;
            height: fit-content;
            padding: 1.3vw;
            border-radius: 7vw;
            background-color: #ff2425;
        }





.slinea{
    width: 85%;
    color:#ad9f9f;
    margin-top: 2vw;

}
#ciudad_opion{
    
    text-align: center;
font-weight: 600;
        margin-top: 0;
}

#mastestimonios_titulo{
    font-size: 7vw;
    text-align: center;
}










 .resenas {
        z-index: 988;
    position: fixed;
    top: 40%;
           border-radius:1vw;

    display: flex;
    flex-direction: column;
    align-items: center;
    width: 84px; /* ajusta el ancho según tus necesidades */
    overflow: hidden;

  }

  .contenedor-resena {
    width: fit-content;
         background-color:#fff;
    animation: deslizar 3s ease-in-out forwards;
  }
    .contenedor-resena a{
        text-decoration:none;
        color:#767676;
    }
.contenedor-resena .descripcion, .nombre,.enlace{ margin-left:1.3vw;  }
  @keyframes deslizar {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(0);
    }
  }



.contenedor-resena img{
    width:100%;
        max-height: 14vw;

}



.contenedor-resena{
    font-size: 2.5vw;
}





  .grid_reviews {
            display: flex;
            
            grid-gap: 10px;
            /* Espacio entre las celdas */
            margin: auto;
        max-width: 90%;
        flex-wrap: wrap
        }

        .over_cont_review_container img {
            max-width: 100%;
            height: auto;
        }

        .over_cont_review_container {
          max-width: calc(50% - 10px); /* Ancho máximo de cada elemento */
            box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
            height: fit-content; /* Ajusta automáticamente la altura según el contenido */
            border-radius: 1.4vw;
            overflow: hidden;
        }

        .box_desc_grid {
            width: 90%;
            margin: auto;
        }
        .box_desc_grid p{
            max-width: 87%;
            font-size: 76%;
        }
        .box_desc_grid h4{
            margin: 0;
        }
.fecha_box_review{
    color: gray;
    font-size: 79%;
}

.cabecera_reviews{
    margin: auto;
    width: 90%;
    display: flex;
    flex-direction: column;
    margin-top: 3vw;
}
.make_new_rev{
    margin: auto;
    margin-top: 2vw;
    padding: 1.7vw;
            font-size: 89%;

        margin-bottom: 2vw;
width: 100%;
            box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);

            background-color: #ffff;
}








.sector_iconos svg{
width:5vw;
height: 5vw;

}
.detalles_li{


margin-left: 3.4vw;
}
.caracteris_inmb{
    margin: auto;
}
.detalles_li h4{
    margin: 0;
}
.sector_iconos h2{
    margin: 0;
    font-size: 1vw;
}
.icon_li {
    width: 4vw;
    height: 4vw;
}
.sector_iconos{
    font-size: 2.5vw;
    width:95%;

}
.sector_iconos p{
    margin: 0;
}
.sector_iconos ul{
list-style-type: none;
display: flex;
padding: 0;
flex-wrap:wrap;

}
.sector_iconos li{
    width: 32%;
    margin:0.33%;
    display: flex;
    flex-direction: row;

}




.disponibilidad svg{ color:red; width:3vw; height:   3vw; }
.disponibilidad{font-size: 3vw; font-family: "pope"}
.price_inmb{
    font-size: 3vw !important;
    color: #8b8a8a;
}







}