/* TITULO MAS TEXTO ............................ */

.fondoGris100x100 {
  background-color: white;
  margin: 30px 0;
  padding: 0px;
}

.titulo{
  margin-bottom: 30px;
  font-size: 1.5rem;
}
.textosinMovil {
        display: block;
    }
    .texto-intro {
        display: none;
    }

/* BOTONES DISPOSITIVOS .....................*/
#containBTN {
  display: flex;
  justify-content: center;
  align-items: center;
  
}
.containBtnDispositivos {
  width: 100% !important;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.topVentas {
  text-decoration: none;
  color: black;
  font-family: "Oxygen", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  gap: 10px;
  height: 60px;
}

.moviles-dispositivos-financiados.logosMarcas,
.moviles-dispositivos-financiados .topVentas {
 width: 130px;
  border: 2px solid #eeeeee;
  margin-top: 0px;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.topVentas.activo {
    border:2px solid #F3155e; 
    
}
/* FILTRO .........................................*/
#cardBuscador {
  padding-top: 20px;
  padding-bottom: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.input-search-wrapper {
    position: relative;
    width: 40%;
}

.input-search-wrapper input {
    width: 100%;
    height: 44px;
    padding-left: 36px; 
    font-family: "Oxygen", sans-serif;
   font-size: 0.9rem;
   color: black !important;
    border-radius: 5px;
   border: 2px solid #eeeeee;
   
}


.input-search-wrapper .search-icon {
    position: absolute;
    left: 10px; /* espacio desde el borde del input */
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    pointer-events: none; /* para que no bloquee escribir en input */
    color: #888;
}

#btnFiltro {
  font-size: 1rem;
  font-family: "Oxygen", sans-serif;
  margin: 0px;
  line-height: 1;
  cursor: pointer;
}


.inputBuscador:focus {
    border: 2px solid #F3155e; 
    outline: none; 
}
.tituloChecks {
  font-size: 1.2rem;
  font-family: "Oxygen", sans-serif;
  margin: 0px;
  line-height: 1;
  font-weight: 600;
  margin-bottom: 10px;
}

#colFiltro {
  width: 100%;

  
}
.cardFiltros {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.cardInputCheck {
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: start;
  margin-bottom: 10px;
}
.labelMarcas {
  font-size: 1rem;
  font-family: "Oxygen", sans-serif;
  margin: 0px;
  line-height: 1;
  margin-left: 10px;
}



/* Linea precios flitros******************************** */

.cardInputPrecio{
  width: 100%;
  display: flex;
  flex-direction: column;
}
.cardBarra{
   display: flex;
  flex-direction: column; 
}
.tituloBarra {
  font-size: 1.2rem;
  font-family: "Oxygen", sans-serif;
  margin: 0px;
  line-height: 1;
  font-weight: 600;
  margin-top: 10px;
  margin-bottom: 10px;
}
#valorPrecio{
  
  font-size: 1rem !important;
  margin: 0px;
  line-height: 1;
  font-family: "Oxygen";
  color: #000000;
  margin-bottom: 10px;
}

/* Para Chrome, Safari y Opera */
#rangoPrecio {
  -webkit-appearance: none; /* usar estilo personalizado */
  width: 100%;
  height: 2px; /* mantener barra fina por defecto */
  background: black; /* color de la barra por defecto */
  border-radius: 5px;
  outline: none;
  margin-bottom: 10px;
 
}

/* La barra "llenada" hasta el thumb */
#rangoPrecio::-webkit-slider-thumb {
  -webkit-appearance: none; /* desactivar estilo por defecto */
  appearance: none;
  width: 15px; /* tamaño de la bolita */
  height: 15px;
  background: #F3155e; /* color de la bolita */
  border-radius: 50%;
  cursor: pointer;
  border: none;
  margin-top: -0.5px; /* centrar la bolita sobre la barra */
}

/* Para Firefox */
#rangoPrecio::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #F3155e; /* color de la bolita */
  border-radius: 50%;
  border: none;
  cursor: pointer;
}

#rangoPrecio::-moz-range-track {
  background: black; /* color de la barra */
  height: 5px;
  border-radius: 5px;
}

/* Para IE */
#rangoPrecio::-ms-thumb {
  width: 20px;
  height: 20px;
  background: #F3155e;
  border-radius: 50%;
  border: none;
  cursor: pointer;
}

#rangoPrecio::-ms-track {
  background: black;
  height: 5px;
  border-radius: 5px;
  border-color: transparent;
  color: transparent;
}



/* CAJAS............................................... */

.marginTop25 {
  margin-top: 0px;
}
.producto {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 15px 10px !important;
  height: 100% !important;
  box-shadow: 0px 5px 10px -5px grey;
}

.item2 {
  margin-bottom: 20px;
}
.marca {
  font-family: "Oxygen", sans-serif;
  font-size: 1.2rem;
  margin: 0px;
  line-height: 1;
  font-weight: 600;
  margin-bottom: 20px;
  color: #000000;
}

.cardImgProductos {
  width: 45%;
  margin-bottom: 10px;
}
.cardImgProductos img {
  width: 100%;
  object-fit: contain;
  object-position: center;
}

.informacion {
  width: 100% !important;
  margin-left: 0px !important;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.moviles-dispositivos-financiados h3 {
  color: #215581;
  text-align: center;
  font-size: 1.6rem;
  margin: 0px;
  line-height: 1;
  padding: 0px;
  margin-bottom: 10px;
}
.cardPrecio{
  display: flex;
  justify-content: center;
  align-items: end;
  margin-bottom: 15px;
}
.cardPrecio .precio {

  font-size: 2.5rem;
  margin: 0px;
  line-height: 1;
  font-family: "Oxygen";
  font-weight: 900;
  color: #215581;
}
.cardPrecio .mes {

  font-size: 1.2rem;
  margin: 0px;
  line-height: 1;
  font-family: "Oxygen";
  font-weight: 700;
  color: #215581;
  margin-left: 5px;
}
.moviles-dispositivos-financiados .desde {
  margin-top: 0px !important;
  margin-bottom: 5px !important;
  font-size: 0.9rem !important;
  margin: 0px;
  line-height: 1;
  font-family: "Oxygen";
  font-weight: 400;
  color: #000000;
}

.moviles-dispositivos-financiados .botonVerde {
  margin-top: 0px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  padding: 10px !important;
  width: 100% !important;
}

.checkAlmacenamiento, .checkMarcas, .checkPantalla{
    accent-color: #F3155e; 
}

.cardMaximo{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

}
.cardMaximo p{
   font-family: "Oxygen";
   font-size: 0.8rem;
   margin: 0px;
   line-height: 1;
   margin-bottom: 10px;
}

/* PRODUCTO NO ENCONTRADO CARD................................. */

.cardNoEncontrado{
  width: 100%;
  height: auto;
  padding: 30px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #eeeeee;
  box-shadow: 0px 5px 10px -5px grey;
 
}
.textoNoEncontrado{
  font-size: 1.2rem;
  margin: 0px;
  line-height: 1.2;
  font-family: "Oxygen";
  text-align: center;
}


.btnResultados{
    font-family: "Oxygen";
  display: none;
}


/* limpiar Filtros......................... */

.btnFiltro{
  font-family: "Oxygen";

}




/*   REDES SOCIALES............................ */
.redes {
  justify-content: center;
  align-items: center;
}
#formContainer{
  margin-top: 0px;
}

#formContainer h2{
  margin-bottom: 30px;
  text-align: center;
}
#formContainer h3{
    text-align: center;
  margin-bottom: 60px;
}

@media (max-width: 1450px) {
.titulo{
  margin-top: 0px;
  margin-bottom: 20px;
}
}


@media (max-width: 1200px) {


.containBtnDispositivos {
  gap: 20px;
}
  #cardBuscador {
  padding: 30px 0px;
  }
 .fondoGris100x100 {
  background-color: white;
  margin: 10px 0;
  padding: 0px;
}

.input-search-wrapper {
    position: relative;
    width: 50%;
}

#formContainer h2{
  margin-bottom: 20px;
  text-align: center;
}
#formContainer h3{
    text-align: center;
  margin-bottom: 50px;
}


}



@media (max-width: 765px) {
  .fondoGris100x100{
    margin: 0px;
  }
  .titulo{
  margin-top: 0px;
  margin-bottom: 10px;
}
.textosinMovil {
        display: none;
    }
    .texto-intro {
        display: block;
    }
  .containBtnDispositivos {
    width: 100% !important;
   
  }
  #cardBuscador {
  display: flex;
  flex-direction: column;
  justify-content:start;
  align-items: start;
  padding: 0px;
}
#btnFiltro{
  margin: 20px 0px;
}
#colFiltro{
  margin-bottom: 20px;
}
.texto-intro{
  margin-bottom: 20px;
}
 .ver-mas{
  text-decoration: none;
  color:#F3155e;
  font-family: 'Oxygen', sans-serif;
}
 .texto-largo,
  .ver-mas {
    display: inline; 
  }
.inputBuscador{
  width: 100%;
  padding: 10px;

}

.cardImgProductos{
  width: 40%;
}

.btn{
  width: 100%;
}
.input-search-wrapper {
    position: relative;
    width: 100%;
}

#formContainer h2{
  margin-bottom: 20px;
  text-align: center;
}
#formContainer h3{
    text-align: center;
  margin-bottom: 30px;
}

/* botones para movil................. */

.containBtnDispositivos{
  flex-wrap: nowrap;
  justify-content: start;
  overflow-x: auto;      
    -webkit-overflow-scrolling: touch; 
    scrollbar-width: thin; 
    gap: 10px;  
}
.containBtnDispositivos > * {
    flex: 0 0 auto; /* no se encojan, tamaño natural */
}

/* BOTON DE RESULTADOS MOVIL................ */

.btnResultados{
  display: block;
  margin-top: 20px;
}

}
@media (max-width: 400px) {
  .titulo{
  font-size: 1.3rem;
}
.moviles-dispositivos-financiados .topVentas{
  width: 120px;
}


}