#splash-screen {
  display: flex;
  justify-content: center; /* centra horizontalmente */
  align-items: center;     /* centra verticalmente */
  height: 100vh;           /* ocupa el alto completo de la pantalla */
  width: 100%;
  background: #fff;        /* opcional: fondo blanco */
}

/* Imagen responsiva */
#splash-screen img {
  max-width: 80%;   /* se adapta al ancho del dispositivo */
  height: auto;     /* mantiene proporción */ 
}


.efectoT 
{
  width: 100%;
  max-width: 100%;
  padding: 10px;
  border: 1px solid black;
  justify-content: center; /* centra horizontalmente */
  align-items: center;
}

@media (max-width: 768px) 
{
  .efectoT 
  {
    width: 100%;
    justify-content: center; /* centra horizontalmente */
    align-items: center;
  }
}



/* imagen encabezado pagina  */

.encabezado 
{
  width: 100%;
  max-width: 100%;
  padding: 0px;
  border: 1px solid black;
}

@media (max-width: 768px) {
  .encabezado {
    width: 100%;
  }
}


.floatleft { float: left }
.floatright { float: right }
.alignleft 
{
    float: left;
    margin-right: 15px;
}

.alignright {
    float: right;
    margin-left: 15px;
}

.aligncenter {
    display: block;
    margin: 0 auto 15px;
}

a:focus { outline: 0px solid }
img 
{
    max-width: 100%;
    height: auto;
}

.fix { overflow: hidden }

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 15px;
}


/*
.body__preloader{position:fixed;z-index:999999999999999999999;width:100%;height:100%;left:0;top:0;background-color:#fff;-webkit-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;opacity:1;visibility:visible}
.body__preloader.loaded{opacity:0;visibility:hidden;z-index:-2}
#loading{display:block;position:relative;z-index:1001;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;background:url(https://www.peengler.com/wp-content/uploads/blogger-gif.gif) no-repeat center center;background-size:60%;}
*/


body 
{ 
    font-family:Arial, Helvetica, sans-serif; 
    background-color: #0092FF;
    margin: 0;
    padding: 0;
    text-align: center;
    
}


#efectoT {
  
  justify-content: center;
  width: 100%;
}


#efectoT svg {
  width: 500px;  /* Se ajusta automáticamente a pantallas pequeñas */
  height: 90px; /* Mantiene proporción */
  text-align: center;
}



.header-area 
{
    background: none repeat scroll 0 0 #0092FF; 
    justify-content: center;
}

.heada-userer-area a 
{
    color: #E74C3C ;
}

.user-menu ul 
{
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

.user-menu li 
{
    display: inline-block;
}

.user-menu li a 
{
    display: block;
    font-size: 13px;
    margin-right: 5px;
    padding: 10px;
}

.user-menu li a i.fa 
{
    margin-right: 5px;
}

.header-right ul.list-inline 
{
    margin: 0;
    text-align: right;
}

.header-right ul.list-inline li a 
{
    display: block;
    padding: 9px;
}

.header-right ul.list-inline li ul a 
{
    padding: 5px 15px;
}

.header-right ul.list-inline li ul 
{
    border: medium none;
    border-radius: 0;
    left: 50%;
    margin-left: -50px;
    min-width: 100px;
    text-align: center;
}




.logo h1 
{
    align-content: center;
    font-size: 40px;
    margin: 20px 0;
    font-weight: 400;
}

.logo h1 a 
{
    color: #999;
}

.logo h1 a:hover {text-decoration: none;opacity: .7}
.logo h1 a span 
{
    color: #5a88ca;
}

.shopping-item 
{
    border: 2px solid red;
    float: right;
    font-size: 16px;
    margin-top: 15px;
    padding: 10px;
    position: relative;
}

.shopping-item a 
{
    color: #0000FF;
}


/* hubo cambio */
.cart-amunt
{
    color: #FF0000;
    font-weight: 300;
}

.product-count 
{
    background: none repeat scroll 0 0 red;
    border-radius: 50%;
    color: #fff;
    display: inline-block;
    font-size: 10px;
    height: 20px;
    padding-top: 0;  /* cambio antes 2px  */
    position: absolute;
    right: -10px;
    text-align: center;
    top: -10px;
    width: 20px;
}

.shopping-item i.fa 
{
    margin-left: 15px;
}

.shopping-item:hover 
{
    background: none repeat scroll 0 0 #5a88ca;
    border-color: #5a88ca;
}

.shopping-item:hover a 
{
    color: #fff;text-decoration: none
}

.shopping-item:hover .cart-amunt {
    color: #fff;
}

.shopping-item:hover .product-count {
    background: none repeat scroll 0 0 #000;
}



/* 23 de octubre */



/* Media Query: Asegura que los cambios solo se apliquen en dispositivos móviles (<= 767px) */
@media (max-width: 767px) 
{
    /* Selecciona el botón de alternancia del menú */
    .navbar-header .navbar-toggle 
    {
        
        float: left;
        margin-top: -5px;
        /* Ajusta el margen si es necesario para separarlo del borde izquierdo del div */
        margin-left: 15px; /* Margen estándar de Bootstrap */
        margin-right: 0;   /* Asegura que no haya margen derecho que lo empuje */
        /*
         * CAMBIA ESTE VALOR POR EL COLOR QUE DESEES
         * Ejemplo: Azul Marino
         */
        background-color:#0092FF; /* Color de fondo del botón */
        border-color: blue;     /* Recomendado: Cambiar el color del borde para que coincida */
    }
    
    
    .menu-gif {
        /* Flota a la izquierda para que se alinee con el texto y el botón */
        float: left; 
        
        /* Asegura la alineación vertical con la navbar */
        height: 25px; /* Altura deseada para el GIF (ajusta si es necesario) */
        width: auto;  /* Mantiene la proporción del GIF */
        margin-top: 12.5px; /* Ajusta este valor para centrarlo verticalmente */
        margin-left: 5px; /* Espacio entre el texto "Menú principal" y el GIF */
        
    }
    
    
    
    
    /* Selecciona el div del menú colapsado, Color de los bordes*/
    .navbar-collapse#mimenu {
        /* Borde Superior (opcional, si quieres separarlo de la barra de navegación) */
        border-top: 2px solid  #03E7FB; /* Color azul de Bootstrap */
        
        /* Borde Inferior (para delimitar el menú en la parte de abajo) */
        border-bottom: 2px solid  #03E7FB; /* Color azul de Bootstrap */
        
        /* Borde a los lados (opcional, si quieres que el contenedor tenga borde) */
         border-left: 1px solid  #03E7FB; 
         border-right: 1px solid  #03E7FB; 
    }
    
    .navbar-brand-mobile {
        /* Color del texto: Rojo (puedes usar un valor hexadecimal como #CC0000 para un rojo más intenso) */
        color: red; 
        
        /* Sombreado del texto: Gris */
        text-shadow: 
            /* Desplazamiento X, Desplazamiento Y, Radio de desenfoque, Color */
            2px 2px 2px gray; /* Puedes cambiar 'gray' por un código más específico como #666 */
            margin-right: 5px; /* Pequeño margen para separar el texto del GIF */
    }

    /* Opcional: Cambia el color del texto 'Menú' y las barras a blanco para que contrasten */
    .navbar-header .navbar-toggle h5 {
        color: #0092FF;
    }

    /* Opcional: Cambia el color de las barras (icon-bar) a blanco */
    .navbar-header .navbar-toggle .icon-bar {
        background-color: white;
    }

    /* Opcional: Estilo al pasar el ratón (hover) o enfocar (focus) */
    .navbar-header .navbar-toggle:hover,
    .navbar-header .navbar-toggle:focus {
        background-color: #0092FF; /* Un azul ligeramente más claro para el efecto hover */
    }
}



/* Aplica estilos básicos al texto "Menú principal" */
.navbar-brand-mobile {
    font-size: 18px; /* O el tamaño que prefieras */
    line-height: 20px; /* Ajusta la altura de la línea */
    padding: 15px 0; /* Espaciado superior e inferior para centrarlo verticalmente */
    height: 50px; /* La altura estándar de la navbar de Bootstrap */
    display: inline-block; /* Necesario para aplicar padding/margin */
    color: #333; /* El color de texto que desees (ej: gris oscuro) */
    margin-left: 10px; /* Espacio entre el botón y el texto */
    vertical-align: middle; /* Ayuda a la alineación vertical con el botón */
}






/* *************   */



.mainmenu-area ul.navbar-nav li a 
{
    
    color: #0000FF;  /* color (rojo) del texto que identifica los gifts animados del menu  /principal, tienda, tc. antes de pasar el mouse encima */
    width: auto;
    font-size: 18px; /* tamaño del texto: PRINCIPAL, TIENDA, PLANES, ETC .... */
    padding:2px;
  /*  align-items: left; */
    margin-top: 0;  /* elimina separación arriba del menú */
    margin-bottom: 0;
    
       
}


.mainmenu-area ul.navbar-nav li:hover a, .mainmenu-area ul.navbar-nav li.active a 
{
    background: #03E7FB; /*  color de fondo (Azul) cuando pasamos el mouse por un elemento del menu sin seleccionar  */
    color:#FB0B03; /* color del texto cuando se seleciona en el menu responsivo  */
    font-size: 18px; /* tamaño de la fuente del menu de opciones antes de colapsar */
    margin-top: 0;
    margin-bottom: 0;
}

.mainmenu-area .nav > li > a:focus 
{
    color: #FF0000; /* Seleccion de color al dar clic en elementos del menu, rojo */
    align-content: center;
    margin-top: 0;
     align-items: center;
  justify-content: center;
}


.slider-area 
{
  width: 80%;
  overflow: hidden;
  position: relative;
  background-color: #fff; /* Fondo neutro si la imagen no ocupa todo */
}

/* Cada slide */
.block-slider li 
{
  display: flex;
  flex-direction: column;     /* Imagen arriba, texto abajo */
  align-items: center;
  justify-content: center;
  text-align: left;
  padding: 20px 10px;         /* Espacio entre imagen y textos */
  box-sizing: border-box;
}

/* Imagen */
.block-slider img {
  width: 100%;
  max-width: 350px;           /* Tamaño máximo razonable para pantallas grandes */
  height: auto;
  border-radius: 12px;
  object-fit: contain;
}

/* Grupo de textos */
/* .caption-group 
{
  position: static;    */       /* ❌ Quita el absolute para que NO se empalmen */
 /* margin-top: 25px;     */       /* Espacio entre la imagen y los textos */
/* } */

/* Títulos */
.caption.title 
{
  font-size: 1.8em;
  margin: 0.2em 0;
  color: #222;
}

/* Subtítulo */
.caption.subtitle 
{
  font-size: 1.1em;
  color: #555;
  margin-bottom: 0.8em;
}

/* Botón */
.caption .button-radius 
{
  background-color: #007BFF;
  color: white;
  padding: 6px 15px;
  border-radius: 20px;
  text-decoration: none;
  font-size: 5em;
  transition: 0.3s;
}



@media (max-width: 768px) {
  .caption.button-radius {
    padding: 5px 14px;   /* ← menos alto y un poco más angosto */
    font-size: 1.0em;    /* texto ligeramente más pequeño */
    border-radius: 6px;  /* bordes más suaves */
  }
}

@media (max-width: 768px) {
  .block-slider4 li {
    padding-bottom: 10px;
  }
}



.caption .button-radius:hover 
{
  background-color: #0056b3;
}

/* ========================= */
/* 📱 RESPONSIVIDAD */
/* ========================= */

@media (max-width: 768px) 
{
  .block-slider img {
    max-width: 350px;   /* Imagen un poco más grande */
    
  }

  .caption.title
  {
    font-size: 2em;
     /*background-color: #0056b3;   color del fondo de titulo y subtitulo de */ /*los articulos en el slider  solo responsivo*/
  }
  

  .caption.subtitle 
  {
    font-size: 1em;
     /* background-color: #0056b3; */
  }
}


.caption.title,
.caption.subtitle 
{
  text-shadow: 1px 1px 3px rgba(0,0,0,0.6); /* texto de los titulos y subtitulos con sombra */
}


@media (max-width: 480px) {
  .block-slider li {
    padding: 10px 5px;
  }

  .block-slider img {
    max-width: 310px;  /* Ajuste perfecto en celulares */
    max-height: 370px;
  }

  .caption.title {
    font-size: 2em;
  }

  .caption.subtitle {
    font-size: 1.1em;
  }

  .caption .button-radius 
  {
    font-size: 1em;
    padding: 6px 14px;
  }
}


/* ------------------------------------------------------- */



/* 🔹 Tamaño normal (computadora o tablet) */
.block-slider4 img {
  max-width: 100%;
  height: auto;
}

/* 🔹 Para pantallas pequeñas (celulares) */
@media (max-width: 768px) {
  .block-slider4 img {
    width: 130%;         /* aumenta el tamaño de la imagen */
    max-width: none;     /* evita que se limite al contenedor */
    transform: scale(1.2); /* opción alternativa si prefieres agrandar sin afectar layout */
  }
  
  
  /* div que contiene el titulo y el subtitulo, la caja con el boton
     y dentro de el el texto "Ver detalles"  */
     
  .caption-group 
  {
      position: static;           /* ❌ Quita el absolute para que NO se empalmen */
      margin-top: 25px;           /* Espacio entre la imagen y los textos */
    width:120px;
    /*background-color: #87CEEB;;
      opacity: 0.7; */
    /*background:yellow;*/
    padding: 0px;
  }
  

  /* agrandar los títulos y subtítulos */
  .caption-group .caption.title {
    font-size: 1.5em;    /* aumenta el texto principal */
  }

  .caption-group .caption.subtitle {
    font-size: 1.1em;    /* subtítulo más visible */
  }

  /* opcional: ajusta el botón */
  .caption-group .caption.button-radius 
  {
    padding: 0px 15px 40px 34px; /* texto ver detalles just a la der */
    /* Resultado: 10px arriba, 20px derecha, 30px abajo, 40px izquierda */
    font-size: 1.4em; /* tamaño del texto: ver detalles cuando colapsa el slide
    r*/ 
  }
}

/* 🔹 Para pantallas muy pequeñas (celulares chicos, ~480px o menos) */
@media (max-width: 480px) {
  .block-slider4 img {
    width: 150%;
    transform: scale(2.1); /* tamaño de las imagenes en el slider */
  }

  .caption-group .caption.title {
    font-size: 1.5em;
  }

  .caption-group .caption.subtitle {
    font-size: 1.0em;
  }
}



/*  ------------------------------------------------------- */



/* Título y subtítulo */
.caption-group .caption.title {
     color: #333;
    font-size: clamp(18px, 2vw, 28px);
   
    margin: 10px 0;
}

.caption-group .caption.subtitle {
    color: #000;
    font-size: clamp(14px, 1.5vw, 20px);
    
    margin-bottom: 15px;
}



/*-------------------------
[9. Block slider]
---------------------------*/

.block-slider
{
    background-color:#0092FF;
	border:none;
	width: 100%;
	
}


.block-slider ul li
{
	display: flex;              /* centra elementos internamente */
       /* coloca imagen y texto uno debajo del otro */
    align-items: center;        /* centra horizontalmente */
    justify-content: center;    /* centra verticalmente */
    text-align: center;
    
    min-height: 40vh;           /* separacion entre el slider y el menu principal cuando colapsa */
    
    margin-top: 0;
}


.block-slider .bx-pager
{
	display:none;
}

.block-slider .bx-prev,
.block-slider .bx-next
{
	width: 60px;
	height: 60px;
	border: 2px solid #0000FF;
	color:black;  /* color de las flechas del slider antes de entrar en el */
	text-align: center;
	display: block;
	border-radius:60%;
	font-size: 30px;
	position: absolute;
	top: 55%; /* posicion vertical de los botones de slider */
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	line-height: 29px;
	-moz-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.s ease;
	
}


@media (max-width: 576px) 
{
  .block-slider .bx-prev,
  .block-slider .bx-next 
  {
    width: 35px;        /* más pequeños */
    height: 35px;
    font-size: 20px;    /* ícono más chico */
    line-height: 22px;  /* centra mejor el texto/ícono */
    border: 1.5px solid #0000FF;
    
  }
}



.block-slider img 
{
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto; /* centra la imagen */
  
}

/* Tablets */
@media (max-width: 992px) 
{
  .block-slider img 
  {
    width: 70%;   /* un poco más grande */
  }
}

/* Celulares */
@media (max-width: 576px)
{
  .block-slider img {
    width: 100%;  /* ocupa todo el ancho en pantallas pequeñas */
  }
}


.block-slider .bx-prev
{
	left: 10px;
	padding: 10px; /* flecha izquierda del slider */
	background:  #30B5FD;
}

.block-slider .bx-next
{
	right: 10px;
	padding: 10px; /* flecha derecha del slider */
	background:  #30B5FD;
}

.block-slider:hover .bx-prev
{
	left: 20px;
	
}

.block-slider:hover .bx-next
{
	right: 20px;
}

.block-slider .bx-prev:hover,
.block-slider .bx-next:hover
{
	background:  #0BF0F4;
	color: black;  /* color de las flechas der/izq del slider */
	border-color: #3300FF;
	padding: 20px;
	
	transform: scale(1.1);
	
	
	/* probar este 
	background: #0BF0F4;
    color: black;
    border-color: #3300FF;
    transform: scale(1.1);*/
	
	
}

/*         ---------------------  user menu, contenedor padre ---------------------- */
.user-menu 
{
  width: 1518px;
  height: 60px;
  background-color: #0092FF;
  border-color: black;
  border-width: 1px;
  border-style: solid;
}

.WA
{
  width: 1335px;
  height: 37px;
  background-color: transparent;
  border-color: transparent;
  border-width: 0px;
  border-style: solid;
  align-items: center;
}



/*         ---------------------  user menu, contenedor hijo ---------------------- */
.cms-flex__col-lg-12 hidden-mobile-tablet
{
  width: 6px;
  height: 60px;
  background-color: #feb139;
}


/*------------------
[4. Slidershow]
------------------*/

.block-slider .bx-pager
{
	display: block;
    text-align: center;
}

.block-slider .bx-pager-item
{
	width: 15px;
	height: 15px;
	background: #E3F2FD;
	font-size: 0;
	display: inline-block;
	border-radius: 50%;
	margin: 0 3px;
}


/* circulos de desplazamiento debajo del slider   */

.block-slider .bx-pager-item a
{
	width: 100%;
	height: 100%;
	background: #3300FF; /* Color de los circulos de desplazamiento del banner */
	display: block;
	border-radius: 50%;
	
}

.block-slider .bx-pager-item a.active
{
	background: #F44336;
}

.block-slider .caption-group
{
	position: absolute;
    top: 26%;
    right: 16%;
     /* border: 1px solid black; borde del nombre y etiqueta del texto del banner  */
    
}

.block-slider .caption-group .title
{
	margin: 0;
}

.block-slider .caption-group .subtitle
{ 
	margin: 0%;
	margin-top: 0;
	
}

.block-slider .caption-group .button-radius
{
    background-color:transparent;  /* area de ver detalles en color transparente */
	margin-top: 3px;
}

.block-slider .caption-group .primary
{
	color: #FF0000;   /* color de los titulos del slider titulo:rojo*/
}


.block-slider .caption-group .caption
{
    color:white;   /* color de los subtitulos del slider (blanco) y del texto, ver detalles */
}

/*----------------------
[10. Block top seller ]
------------------------*/

/* Boton de ver detalles cuando se hace expansivo, revisar cambios y pruebas
   solo en el celular */

.button-radius
{
  position: relative;
  border: 2px solid blue;
  padding: 6px;  /* texto ver detalles justificado arr o abajo */
  min-height: 40px;
  max-height: 40px;
  background: #fff;  /*background-color: transparent;*/
  display: inline-block;
  
  line-height: 30px;
  padding-left: 40px;
  padding-right: 6px; /* texto ver detalles justificado a laiz o der */
  margin: 0;
  color: #666666;
  -webkit-border-radius: 17px;
  -moz-border-radius: 17px;
  border-radius: 17px;
  -webkit-transition: all 1.5s ease;
  -moz-transition: all 1.5s ease;
  -o-transition: all 1.5s ease;
  -ms-transition: all 1.5s ease;
  transition: all 1.5s ease;
  margin-top: 16px;
  font-size: 18px;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.9); /* sombra del texto Ver detalles */
}

.button-radius .icon
{

  -webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  -ms-transition: all 1s ease-out;
  transition: all 1s ease-out;
  position: absolute;
  left: 2%;
  top: 4px;
  overflow: hidden;
}

.button-radius .icon:before
{
  font-family: 'FontAwesome';
  content: "\f105";
  font-size: 15px;
  color: #fff;
  width: 28px;
  height: 26px;
  background-color: #5a88ca;
  border-radius: 90%;
  text-align: center;
  line-height: 26px;
  float: left;
  -webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  -ms-transition: all 1s ease-out;
  transition: all 1s ease-out;
}

.button-radius.white{
  border-color: #fff;
  color: #fff;
  background: transparent;
}

.button-radius.white .icon:before
{
  background: #fff;
  color: #333;
}

.button-radius:hover .icon
{
  left: 100%;
  margin-left: -30px;
}

.button-radius:hover
{
  padding-left: 20px;
  padding-right: 40px;
}

.promo-area {
  background:#0092FF;
  color: blue;
  padding: 20px 0 20px;
}






.brands-area 
{
    width:80%;
    display: flex; 
    padding: 40px 0;
    text-align: center;
     overflow: hidden;
    justify-content: center;
    align-items: center;
    margin-left: auto; 
    margin-right: auto; 
    border-top:1px solid #0092FF; /*  color del borde de la seccion nuestras marcas */
    border-bottom:1px solid #0092FF;
    color: black;
    /* padding: 20px 20px0 20px 20px; */
  
     /* prueba */
    /*background-color: yellow;*/
    
   /* nuevo 24-03-26 */ 
    padding-bottom: 20px; /* Ajusta el número a tu gusto */
    margin-bottom: 0;
}



@media (max-width: 768px) {
      /* Estilos para pantallas de 768px de ancho o menos */
      .brands-area {
        width: 100%; /* El div ocupa todo el ancho en pantallas pequeñas */
      }
    }




.promo-area .zigzag-bottom, .brands-area .zigzag-bottom
{
    background: #f4f4f4;
    /*  border: 1px solid black;  Borde para el area de servicios 4 imagenes despues del banner  */
}






.single-promo {
    font-size: 20px;
    font-weight: 200;
    padding: 10px 10px;
    text-align: center;
    border-radius: 20px;  
}

.single-promo i {
  font-size: 50px;
}

.single-promo:hover 
{
    color: #fff;background: #FF0000;
}

.promo1 { background:#FFFFFF;}
.promo2 { background:#ffd900;}
.promo3 { background:#fa8072;}
.promo4 { background:#4abebd;}

/* Texto de las secciones: NUEVOS MODELOS, ACCESORIOS, ETC */
.section-title 
{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap; /* si la pantalla es pequeña, que baje el contenido */
 
  text-align: center;
  
  margin: 20px 0;
  font-size: 1.6rem;
  margin-top: 15px;
}


/* 🔹 Tamaño base de las imágenes */
.brand-logo {
  width: 15vw;     /* 15% del ancho de la pantalla */
  max-width: 120px; /* límite superior para pantallas grandes */
  height: auto;
}


/* nuestras marcas */

/* 📱 Ajuste para celulares */
@media (max-width: 600px) {
  .brand-logo {
    width: 40vw;   /* ocupa más ancho en pantallas pequeñas */
    max-width: 150px;
  }

  .section-title {
    flex-direction: column; /* apila texto e imágenes */
    font-size: 1rem;
  }
}


/*  fin de nuestras marcas  */


/* nuevos modelos  */


.section-title 
{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap; /* permite que se acomoden en varias líneas si es necesario */
  gap: 10px;
  font-size: 4.5rem;
  text-align: center;
  margin: 20px 0;
  font-weight: bold;
  color:black;
}

.section-title .icono-titulo {
  height: auto;
  width: 80px; /* tamaño base */
  max-width: 20vw; /* escala proporcional al ancho de la pantalla */
}

/* 📱 Ajuste para celulares */
@media (max-width: 600px) {
  .section-title {
    flex-direction: column;
    font-size: 1.5rem;
  }

  .section-title .icono-titulo {
    width: 60%;
    max-width: 120px;
  }
}


/* fin nuevos modelos  */









 @media screen and (max-width: 768px) 
 { /* Para pantallas de 768px o menos */
      .section-title 
      {
        font-size: 3rem; /* Tamaño más pequeño en pantallas pequeñas */
      }
      .header-logo 
      {
        width: 60px;
      }
      
      
  
      .single-product 
      {
        padding: 8px;
      }
      
  }

    @media screen and (max-width: 480px) { /* Para pantallas muy pequeñas */
      .section-title {
        font-size: 3rem;
        text-align: left; /* Ejemplo: alinear a la izquierda en móviles */
      }
    }



.product-f-image 
{

    position: relative;
    
}

.product-f-image img {
    max-width: 100%;   /* la imagen se adapta al ancho del contenedor */
    height: auto;  /* mantiene la proporción original */
    display: block; /* elimina espacios blancos debajo de la imagen */
    
}



@media (max-width: 576px) {
  .product-f-image {
    max-width: 100%;  /* más pequeño en pantallas chicas */
    
  }
}



.product-hover 
{
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    overflow: hidden;
    border: 1px solid #0092FF;
}


.view-details-link 
{
  display: inline-block;
  margin-top: 10px;
  color: #007bff;
}


/* despues */
.product-hover:after 
{
  background: none repeat scroll 0 0 #0092FF;
  content: "";
  height: 100%;
  left: -100%;
  opacity: 0.6;
  position: absolute;
  top: 0;
  width: 100%;transition: .4s;
}

.product-hover a 
{
    background: none repeat scroll 0 0 #0092FF; /* agregar al carrito y ver detalles */
    border-radius: 5px;
    color: #fff;
    display: block;
    font-size: 16px;
    left: 10%;
    margin: 0;
    padding: 10px;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    border: 1px solid #fff;  /*borde de la ventana emergente  */
    width: 80%;
    z-index: 99;
    transition: .4s;
}

.product-hover a:hover {
  background: #3399FF;
  text-decoration: none;border-color:#17202A ;
}




.product-carousel 
{
    display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 15px;
  box-sizing: border-box;
    padding-top: 30px; /* separacion entre los botones ade y atr arriba de las imagenes de los telefonos en nuevos productos */
}



.product-carousel-price ins 
{
  color: red;
  font-weight: bold;
  text-shadow: 1px 1px 2px black; 
  font-size: 1.9rem;
  text-decoration: none;
  
}



.product-carousel-price del 
{
  color: black;
  font-weight: bold;
  text-shadow: 1px 1px 2px gray; 
  font-size: 1.9rem;
  margin-left: 5px;
}



.product-hover a i.fa {
    margin-right: 5px;
}

.product-hover a.add-to-cart-link {top: -30%;}
.product-hover a.view-details-link { bottom: -28%;}

.single-product h2 
{
   font-size: 18px;
    line-height: 25px;
    margin-bottom: 10px;
    margin-top: 15px;
}

/* Color del nombre de los nuevos productos  */
.single-product h2 a 
{
    color: #222;
}
.single-product p 
{
    color: #5a88ca;
    font-weight: 700;
}


.single-product 
{
  flex: 0 0 100%; 
            scroll-snap-align: start; /* Punto de anclaje para el scroll snap */
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            border-radius: 0.75rem;
            /*background-color: white;*/
            padding: 1rem;
}



@media (max-width: 768px) {
  .section-title img {
    width: 50px;
    height: auto;
  }

  
}

 .single-product:hover {transform: translateY(-5px);}  
.single-product:hover .product-hover a.add-to-cart-link {top: 15%;}
.single-product:hover .product-hover a.view-details-link {bottom: 30%;}
.single-product:hover .product-hover:after{left: 0}






/* Celulares */
@media (max-width: 576px) {
  .product-carousel 
  {
    grid-template-columns: 1fr; /* 1 por fila */
  }
}

.latest-product .owl-nav {
  position: absolute;
  right: 0px;
  top: 0;
}

.latest-product .owl-nav div, .related-products-wrapper .owl-nav div
{
  background:#fa8072;
  color:#FFF;
  display: inline-block;
  margin-left: 15px;
  padding: 1px 10px;
}


.latest-product .owl-nav div:hover, .brand-wrapper .owl-nav div:hover, .related-products-wrapper .owl-nav div:hover 
{
    color: #FFF; 
    background:#0000FF;
} /* boton prev y next */


.brand-list 
{
    padding-top: 40px;
}


.floating
{
    animation: float 6s ease-in-out infinite;
    transform-style: preserve-3d;
}


.brand-list .owl-nav 
{
  position: absolute;
  right: 0;
  top: 0;
}


.brand-wrapper .owl-nav div {
  border: 1px solid #fff;
  color: #fff;
  display: inline-block;
  margin-left: 15px;
  padding: 1px 10px;
}

.brand-wrapper .owl-nav div {
  background:#FF0000;
  color:#0092FF;
  display: inline-block;
  margin-left: 15px;
  padding: 1px 10px;
  
}

.maincontent-area 
{
   padding: 40px 0;
   padding-bottom: 0;
    
}




/* --- ESTILOS RESPONSIVOS --- */

/* --- Responsivo --- */
@media (max-width: 1024px) {
  .single-product {
    flex: 0 0 33.333%; /* 3 productos por fila en tablets */
  }
}

@media (max-width: 768px) {
  .single-product {
    flex: 0 0 50%; /* 2 productos por fila en pantallas medianas */
  }
}



@media (max-width: 480px) {
  .col-md-12, .container, .row {
    width: 100% ;
    padding: 0 ;
    margin: 0 auto ;
  }

  .product-carousel, .single-product {
    display: block ;
  }
}







.header-logos {
  display: flex;
  justify-content: center;
  
  flex-wrap: wrap;
}

.header-logo {
  width: 80px;
  height: auto;
}

.product-wid-title {
  font-family: raleway;
  font-size: 27px;
  font-weight: 100px;
  margin-bottom: 40px;
}


.single-wid-product 
{
    margin-bottom: 31px;
    overflow: hidden;
    align-items: center;
}


/*  Tamaño de las imagenes del área Más Servicios  */
.product-thumb {
    float: left;
    height: 220px;
    width: 220px;
    margin-right: 15px;
    
}

.single-wid-product h2 {
    font-size: 12px;
    margin-bottom: 12px;
}

.product-wid-rating {
    color: #ffc808;
    margin-bottom: 10px;
}

.product-wid-price ins {
    color: #5a88ca;
    font-weight: 700;
    margin-right: 10px;
    text-decoration: none;
}

.single-wid-product h2 a 
{
    color: #222;
}

.single-wid-product h2 a:hover, .single-product h2 a:hover 
{
    color: #FF0000; /*  cambia de color al poner el mouse en el nombre del producto en  nuevos modelos  */
}



/* ----------------------------------------- */



/* Imágenes responsivas */

.single-product img 
{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto; /* centrar */
}

/* Línea adaptativa */
.section-title hr 
{
  width: 100%;
  max-width: 600px; /* opcional */
  height: 3px;
  background: #1F0E8E;
  border: none;
  margin: 10px auto;
}






.wid-view-more {
    background: none repeat scroll 0 0 #5a88ca;
    color: #fff;
    padding: 3px 15px;
    position: absolute;
    right: 10px;
    top: 3px;
}

.wid-view-more:hover 
{
    color: #fff;background-color: #222;text-decoration: none
}

.single-product-widget 
{
    position: relative;
}

/* tiene un area blanca , quitar !!!   */

.product-widget-area 
{
  padding-bottom: 10px;
  padding-top: 10px;
  
  /*  border: 1px solid #fff;  */
}


 /*  .product-widget-area .zigzag-bottom{background: #f4f4f4;}  */
.footer-top-area .zigzag-bottom
{
    background: yellow;
}

.footer-top-area 
{
    background: none repeat scroll 0 0 black;
    color: #999;
    padding: 35px 0 180px;
    
}


.footer-bottom-area 
{
    background: #000;color: #fff
}

.footer-about-us .h2 .span 
{
  color: cyan;
}

/* descripcion de la empresa en el pie de pagina */
.footer-wid-title 
{
  font-family: raleway;
  font-size: 22px;
  font-weight: 100;
  color: red;
  /*text-shadow: 1px 1px 2px white;*/
}

.footer-about-us .h2 
{
  font-weight: 200;
}

.footer-menu ul 
{
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

.footer-menu ul li 
{
    border-bottom: 1px dashed #555;
    padding: 5px 0;
}

.footer-menu a 
{
    display: block;
    padding: 5px 0;
    color: #999
}


.footer-social a 
{
  background: none repeat scroll 0 0 #fc0505;
  color: #fff;
  display: inline-block;
  font-size: 20px;
  height: 40px;
  margin-bottom: 10px;
  margin-right: 10px;
  padding-top: 5px;
  text-align: center;
  width: 40px;border: 1px solid #5a88ca;
}

.footer-social a:hover 
{
    background-color: #222;
    border-color: #666;
    
}

.footer-social 
{
    margin-top: 20px;
    
}


.newsletter-form input[type="email"] {
    background: none repeat scroll 0 0 #fff;
    border: medium none;
    margin-bottom: 10px;
    padding: 10px;
    width: 100%;
}

.newsletter-form input[type="submit"] {
    background: none repeat scroll 0 0 #5a88ca;
    border: medium none;
    color: #fff;
    display: inline-block;
    font-size: 18px;
    padding: 7px 20px;
    text-transform: uppercase;border: 1px solid #5a88ca;
}

.newsletter-form input[type="submit"]:hover {background: #222;border-color: #666}
.newsletter-form {
    margin-top: 25px;
}

a 
{
    color: #5a88ca
}

a:hover, a:focus 
{
    color:#FDFEFE
}

.footer-bottom-area 
{
  background: none repeat scroll 0 0 #000;
  color: #fff;
  padding-bottom: 20px;
}


.slide-bulletz 
{
    bottom: 30px;
    left: 0;
    position: absolute;
    text-align: center;
    width: 18%;
    z-index: 99;
}

ol.slide-indicators 
{
left: inherit;
list-style: outside none none;
margin: 0;
padding: 0;
position: relative;
width: 100%;
}

ol.slide-indicators li
{
    background: none repeat scroll 0 0 #222;
    border: medium none;
    border-radius: 0;
    cursor: pointer;
    display: inline-block;
    height: 10px;
    margin: 0 0 0 5px;
    width: 10px;
}

ol.slide-indicators li.active 
{
    background: none repeat scroll 0 0 #fff;
    height: 10px;
    margin: 0 0 0 5px;  
    width: 10px;
}


.carousel.carousel-fade .item { transition: opacity 1s ease-in-out }
.carousel.carousel-fade .active.left,
.carousel.carousel-fade .active.right {
    left: 0;
    z-index: 2;
    opacity: 0;
    filter: alpha(opacity=0);
}

.footer-card-icon {
  font-size: 25px;
  text-align: right;
}

.copyright > p {
  margin: 10px 0 0;
}

.product-big-title-area 
{
    background: url(img/crossword.png) repeat scroll 0 0 #0092FF;
}

.product-bit-title h2 {
  font-family: raleway;
  font-size: 70px;
  font-weight: 0;
  margin: 0;
  padding: 20px 0;color: #FF0000;
}

.single-product-area .zigzag-bottom 
{
    background-color: #f4f4f4;
    
}

.single-product-area {
  padding: 80px 0 130px;
}


.sidebar-title {
    color: #fead53;
    font-size: 25px;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.single-sidebar {
    margin-bottom: 50px;
}

input[type="text"], input[type="password"], input[type="email"], textarea {
    border: 1px solid #ddd;
    padding: 10px;
}

input[type="submit"], button[type=submit] {
    background: none repeat scroll 0 0 #5a88ca;
    border: medium none;
    color: #fff;
    padding: 11px 20px;
    text-transform: uppercase;
}

input[type="submit"]:hover, button[type=submit]:hover {background-color: #222}
.single-sidebar input[type="text"] {
    margin-bottom: 10px;
    width: 100%;
}
.thubmnail-recent {
    margin-bottom: 30px;
    overflow: hidden;
}

.recent-thumb {
    float: left;
    height: auto;
    margin-right: 15px;
    width: 63px;
}

.thubmnail-recent > h2 {
    font-size: 20px;
    margin-bottom: 10px;
}
.thubmnail-recent > h2 a {
    color: #222;
}

.product-sidebar-price > ins {
    color: #5a88ca;
    font-weight: 700;
    margin-right: 10px;
    text-decoration: none;
}

.single-sidebar > ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

.single-sidebar li {
    border-bottom: 1px solid #f1f1f1;
    padding: 10px 0;
}
.single-sidebar a {
    display: block;
}

.product-breadcroumb {
    margin-bottom: 20px;
}

.product-breadcroumb > a {
    margin-right: 31px;
    position: relative;
}

.product-breadcroumb > a::before {
    content: "/";
    position: absolute;
    right: -20px;
    top: 2px;
}

.product-breadcroumb > a:last-child::before {
    display: none;
}

.product-main-img {
    margin-bottom: 20px;
}

.product-gallery {
    margin-bottom: 25px;
    margin-left: -15px;
    overflow: hidden;
}

.product-gallery img {
    height: auto;
    margin-left: 15px;
    width: 76px;
}

.product-name {
    font-size: 25px;
    margin-bottom: 20px;
}

.product-inner-price {
    margin-bottom: 25px;
}

.product-inner-price > ins {
    color: #5a88ca;
    font-weight: 700;
    margin-right: 10px;
    text-decoration: none;
}

.quantity {
    float: left;
    margin-right: 15px;
}

.quantity input[type="number"] {
    border: 1px solid #5a88ca;
    padding: 5px;
    width: 50px;
}

.add_to_cart_button {
    background: none repeat scroll 0 0 #5a88ca;
    border: medium none;
    color: #fff;
  
    padding: 6px 25px;display: inline-block
}
.add_to_cart_button:hover {background-color: #222;color: #fff;text-decoration: none}
form.cart {
    margin-bottom: 25px;
}
.product-inner-category {
    margin-bottom: 30px;
}
.product-tab {
    border-bottom: 1px solid #ddd;
    list-style: outside none none;
    margin: 0 0 30px;
    padding: 0;
    text-align: center;
}
.product-tab li {
    display: inline-block;
}
.product-tab li.active {
    background: none repeat scroll 0 0 #5a88ca;
}
.product-tab li.active a {
    color: #fff;
}
.product-tab li a {
    color: #222;
    display: block;
    font-size: 16px;
    padding: 10px 30px;
}
.product-tab li a:hover {
    text-decoration: none;
}
.product-tab li a:focus {
    text-decoration: none;
}
.tab-content h2 {
    font-size: 20px;
}
.tab-content {
    margin-bottom: 30px;
}
.submit-review label {
    display: block;
}
.submit-review input[type="text"], .submit-review input[type="email"], .submit-review textarea {
    margin-bottom: 20px;
    width: 100%;
}
.rating-chooser {
    margin-bottom: 30px;
}
.rating-chooser p {
    font-weight: 700;
}
.rating-wrap-post {
    font-size: 20px;
}

.submit-review textarea {
    height: 105px;
}

.related-products-wrapper {
  margin-top: 30px;
}
.related-products-title {color: #feae52;
font-size: 25px;
margin-bottom: 30px;
text-transform: uppercase;}

.related-products-wrapper .owl-nav {
  position: absolute;
  right: 0;
  top: -56px;
}



table.shop_table {
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    margin-bottom: 50px;
    width: 100%;
}
table.shop_table th, table.shop_table td {
    border-left: 1px solid #ddd;
    border-top: 1px solid #ddd;
    padding: 15px;
    text-align: center;
}
table.shop_table th {
    background: none repeat scroll 0 0 #f4f4f4;
    font-size: 15px;
    text-transform: uppercase;
}
td.product-thumbnail img {
    height: auto;
    width: 70px;
}
td.product-name {
    font-size: 18px;
}
div.quantity input.plus, div.quantity input.minus {
    background: none repeat scroll 0 0 #5a88ca;
    border: medium none;
    color: #fff;
    height: 25px;
    line-height: 15px;
    width: 25px;
}
td.product-quantity div.quantity {
    float: none;
    margin: 0;
}
td.actions div.coupon {
    float: left;
}
.cart-collaterals {
    overflow: hidden;
}
.cross-sells {
    float: left;
    margin-right: 3%;
    width: 57%;
}
.cart_totals {
    float: right;
    margin-bottom: 50px;
    width: 40%;
}
.cart-collaterals h2 {
    color: #5a88ca;
    font-size: 25px;
    margin-bottom: 25px;
    text-transform: uppercase;
}
div.cart-collaterals ul.products {
    list-style: outside none none;
    margin: 0 0 0 -30px;
    padding: 0;
}
div.cart-collaterals ul.products li.product {
    float: left;
    margin-left: 30px;
    position: relative;
    width: 198px;
}
.cart_totals table {
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    width: 100%;
}
.cart_totals table th, .cart_totals table td {
    border-left: 1px solid #ddd;
    border-top: 1px solid #ddd;
    padding: 10px;
}
.cart_totals table th {
    background: none repeat scroll 0 0 #f4f4f4;
}
.onsale {
}
div.cart-collaterals ul.products li.product .onsale {
    background: none repeat scroll 0 0 #5a88ca;
    color: #fff;
    padding: 5px 10px;
    position: absolute;
    right: 0;
}
div.cart-collaterals ul.products li.product h3 {
    color: #333;
    font-size: 20px;
    margin-top: 15px;
}
div.cart-collaterals ul.products li.product .price {
    color: #333;
    display: block;
    margin-bottom: 10px;
    overflow: hidden;
}
.price > ins {
}

div.cart-collaterals ul.products li.product .price ins {
    color: #5a88ca;
    font-weight: 700;
    margin-left: 10px;
    text-decoration: none;
}


.woocommerce-info {
    background: none repeat scroll 0 0 #f4f4f4;
    font-size: 18px;
    margin-bottom: 20px;
    padding: 15px;
}
.col2-set {
    margin-left: -30px;
    overflow: hidden;
}
.col-1, .col-2 {
    float: left;
    margin-left: 30px;
    width: 360px;
}
#customer_details label {
    display: block;
    margin: 0 0 5px;
}
#customer_details input[type="text"], #customer_details textarea, .shipping_calculator input[type=text] {
    margin-bottom: 10px;
    width: 100%;
}
#customer_details h3 {
    color: #5a88ca;
    font-size: 20px;
    text-transform: uppercase;
}
.create-account {
    background: none repeat scroll 0 0 #f4f4f4;
    margin-bottom: 50px;
    padding: 15px;
}
#order_review_heading {
    color: #5a88ca;
    font-size: 20px;
    text-transform: uppercase;
}
#payment ul.payment_methods {
    list-style: outside none none;
    margin: 0 0 30px;
    padding: 0;
}
#payment ul.payment_methods li {
    margin-bottom: 15px;
}
a.about_paypal {
    font-size: 12px;
    margin-left: 15px;
}


#customer_details select, .shipping_calculator select {
  border: 1px solid #ddd;
  margin-bottom: 15px;
  padding: 10px;
  width: 100%;
}


table.shop_table td.product-remove a {
  display: inline-block;
  padding: 0 5px 2px;
  text-transform: uppercase;
}


table.shop_table td.product-remove a:hover {color: #fff;background: red;text-decoration: none}
table.shop_table td.product-name a{color: #222;}
table.shop_table td.product-name a:hover {color: #5a88ca;text-decoration: none}
div.quantity input.plus:hover, div.quantity input.minus:hover {background-color: #222}
div.cart-collaterals ul.products li.product a:hover h3 {color: #5a88ca}
div.cart-collaterals ul.products li.product a:hover {text-decoration: none}

div.cart-collaterals ul.products li.product:hover .add_to_cart_button{background-color: #222}


.cart-collaterals .shipping_calculator {
  float: right;
  width: 40%;
}


#login-form-wrap, #coupon-collapse-wrap {
    background: none repeat scroll 0 0 #f4f4f4;
    margin-bottom: 30px;
    padding: 25px;
}
#login-form-wrap label {
    display: block;
    margin-bottom: 5px;
}
#login-form-wrap input[type="text"], #login-form-wrap input[type="password"] {
    margin-bottom: 10px;
    width: 250px;
}
#login-form-wrap input[type="submit"] {
    margin-bottom: 15px;
}



.single-shop-product h2 {
    font-size: 20px;
    margin: 10px 0;
}
.product-option-shop {
    margin-top: 15px;
}

.single-shop-product {margin-bottom: 50px}

.pagination > li > a, .pagination > li > span {
  color: #5a88ca;
}

/*   https://www.silocreativo.com/zoom-imagenes-css-hover/   */

.zoom {
    transition: transform .2s; 
}
 
.zoom:hover {
    transform: scale(1.0); 
}

.zoom {
    transition: transform .3s; 
}


/*   ------------------ PRELOADER ------------------   */

/* #https://codepen.io/alexey-chudenkov/pen/wvaBRqy    */



/* ---------------------------------------------------- */
        /* ESTILOS CSS PURO PARA POSICIONAMIENTO Y RESPONSIVIDAD */
        /* ---------------------------------------------------- */
        .preloaderBg {
            position: fixed; /* Fija el elemento en el viewport (responsivo) */
            top: 0;
            left: 0;
            width: 100%; /* Cubre todo el ancho del viewport */
            height: 100%; /* Cubre todo el alto del viewport */
            display: flex; /* Habilita flexbox para centrado */
            align-items: center; /* Centrado vertical */
            justify-content: center; /* Centrado horizontal */
            z-index: 9999; /* Asegura que esté por encima de todo */
            background-color: rgba(17, 24, 39, 0.95); /* Fondo oscuro con opacidad */
            transition: opacity 1s ease-in-out; /* Transición para el desvanecimiento */
        }

        /* Estilos personalizados para el spinner del preloader */
        .preloader {
            width: 50px;
            height: 50px;
            border: 5px solid #10b981; /* Color verde esmeralda */
            border-top-color: transparent;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        /* Opcional: un segundo spinner o elemento */
        .preloader2 {
            width: 30px;
            height: 30px;
            border: 3px solid #3b82f6; /* Color azul */
            border-bottom-color: transparent;
            border-radius: 50%;
            animation: spin-reverse 1.5s linear infinite;
            margin-top: -40px; /* Centra con el spinner principal */
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: transform(360deg); }
        }
        
        @keyframes spin-reverse {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(-360deg); }
        }



/* fin de preloader */





  /* fa-refresh */


/* Globales */
*::after,
*::before,
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

.icon-cart{
    width: 40px;
    height: 40px;
    stroke: #000;
}

.icon-cart:hover{
    cursor: pointer;
}

.img{
    max-width: 100%;
}

/* Header */
.header{
    display: flex;
    justify-content: space-between;
    padding: 30px 0 40px 0;
}

/* Footer */
.footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 1rem;
}

/* Logo */
.logo-container {
    display: flex;
    align-items: center;
    margin-left: 55px;
    
  }
  
  .logo-container img {
    width: 40px; /* Ajusta el tamaño del logo según tus necesidades */
    height: 40px;
    margin-right: 10px; /* Agrega un margen entre el logo y el texto */
  }

/* Fin Logo */ 
  
/* Carrito */
.container-icon{
    position: relative;
    margin-right: 55px;
}

.count-products{
    position: absolute;
    top: 55%;
    right: 0;

    background-color: #FF5722; /* Cambio de color a naranja */
    color: #fff;
    width: 25px;
    height: 25px;

    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

#contador-productos{
    font-size: 12px;
}

.container-cart-products{
    position: absolute;
    top: 50px;
    right: 0;

    background-color: #fff;
    width: 400px;
    z-index: 1;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.20);
    border-radius: 10px;
    
}

.cart-product{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px;

    border-bottom: 1px solid rgba(0, 0, 0, 0.20);

}

.info-cart-product{
    display: flex;
    justify-content: space-between;
    flex: 0.8;
}

.titulo-producto-carrito{
    font-size: 20px;
}

.precio-producto-carrito{
    font-weight: 700;
    font-size: 20px;
    margin-left: 10px;
}

.cantidad-producto-carrito{
    font-weight: 400;
    font-size: 20px;
}

.icon-close{
    width: 25px;
    height: 25px;
}

.icon-close:hover{
    stroke: red;
    cursor: pointer;
}

.cart-total{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    gap: 20px;
}

.cart-total h3{
    font-size: 20px;
    font-weight: 700;
}

.total-pagar{
    font-size: 20px;
    font-weight: 900;
}

.hidden-cart{
    display: none;
}

/* Estilo para el botón de pagar redondo */
.btn-pagar {
    border: none;
    background: none;
    background-color: #FF5722;
    color: #fff;
    padding: 15px 25px; /* Ajusta el padding para que el botón tenga un ancho adecuado */
    cursor: pointer;
    border-radius: 0%; /* Aplica el borde redondo */
}


/* Fin carrito */

/* Carrito flotante */
/* Estilo para el carrito flotante */
.fixed-cart {
    position: fixed;
    top: 50px; /* Ajusta la posición vertical deseada */
    right: 50px; /* Ajusta la posición horizontal deseada */
    background-color: #fff; /* Color de fondo del carrito flotante */
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    z-index: 999; /* Asegura que el carrito esté por encima de otros elementos */
}

/* Estilo para el contador de productos en el carrito */
.count-products {
    /* ... los estilos existentes ... */
    position: absolute;
    top: 0;
    right: 0;
    /* ... otros estilos ... */
}

/* Estilo para el contenedor de productos del carrito flotante */
.container-cart-products {
    /* ... los estilos existentes ... */
    position: absolute;
    top: 100%; /* Ajusta la posición vertical deseada */
    right: 0;
    /* ... otros estilos ... */
}

/* Ajusta la posición del contenido del carrito en función del carrito flotante */
.row-product {
    margin-top: 90px; /* Ajusta la posición vertical deseada */
     justify-content: center;
    align-items: center;
}

/* ... otros estilos ... */

/* Fin carrito flotante*/


/* Main */


/* Banner */
.banner {
    background-image: url("https://img.freepik.com/vector-gratis/diseno-patron-pow-colorido-lindo-gatito_1017-14710.jpg?w=2000");
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(21, 18, 18);
    text-align: center;
}

.banner-text {
    
        font-family: 'Pacifico', cursive;
        font-size: 20px;
        letter-spacing: 0px;
        word-spacing: 0px;
        color: #000000;
        font-weight: normal;
        text-decoration: none;
        font-style: oblique;
        font-variant: normal;
        text-transform: none;
        
}

.banner-image {
    width: 100px;
    height: 100px;
}
/* Fin banner */


/*Slider*/
.slideshow-container
{
    position: relative;
    max-width: 100%;
    overflow: hidden;
    margin:auto;
    background-color: rgb(254, 254, 254);
}
   
   
  /*   nuevo 6 octubre 2025  */
  
 .caption-group 
 {
  position: absolute;
  top: 60%; /* controla la altura vertical */
  left: 25%;
  transform: translate(-50%, -50%);
  text-align: center;
}


.caption.title {
  font-size: 5rem;
  margin-bottom: 0.3em;
}


.caption.subtitle {
  font-size: 1.2rem;
  margin-bottom: 0.8em;
}



/* Ajuste extra solo para móviles */
@media (max-width: 768px) 
{
  .encabezadop 
  {
    margin-bottom: 0;
    
    margin-top: 0;
  }

  .mainmenu-area 
  {
    margin-top: 0;
    
    margin-bottom: 0;
  }
}


 /*   nuevo 6 octubre 2025  */

  
  
  

.mySlides{
    display:none;
    background-color: #f9f8f8;
   }



.prev, .next{
    cursor:pointer;
    position:absolute;
    top:50%;
    width:auto;
    margin-top:-22px;
    padding:16px;
    color:white;
    font-weight:bold;
    font-size:18px;
    transition:0.6s ease;
    border-radius:0 3px 3px 0;
   }

.next{
    right:0;
    border-radius:3px 0 0 3px;
   }

.prev:hover, .next:hover{
    background-color:rgba(0,0,0,0.8);
   }

.text{
    color:#f2f2f2;
    font-size:15px;
    padding:8px 12px;
    position:absolute;
    bottom:8px;
    width:100%;
    text-align:center;
   }
   

.numbertext{
    color:#f2f2f2;
    font-size:12px;
    padding:8px 12px;
    position:absolute;
    top:0;
   }

.fade{
    -webkit-animation-name:fade;
    -webkit-animation-duration:1.5s;
    animation-name:fade;
    animation-duration:1.5s;
   }
   
@-webkit-keyframes fade{
    from{opacity:.4}
    to{opacity:1}
   }
   
@keyframes fade{
    from{opacity:.4}
    to{opacity:1}
   }
  
/*Fin Slider*/

/* Espacio entre slider y catalogo */

/* Estilos para el espacio entre slider y catálogo */
.space-between-slider-catalogo {
    
    height: 200px; /* Ajusta la altura deseada */
    background-image: url("https://img.freepik.com/vector-gratis/diseno-patron-pow-colorido-lindo-gatito_1017-14710.jpg?w=2000");
    background-size: cover;
    background-position: center;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(21, 18, 18);
    text-align: center;
    
    
  }
  
/*Fin de espacion entre slider y catalogoa*/


/*Catalogo*/

/* Estilo para el contenedor del catálogo con imagen de fondo */
.catalogo-container 
{
    height: auto; /* O ajusta la altura deseada para el catálogo */
    background-image: url("https://img.freepik.com/vector-gratis/diseno-patron-pow-colorido-lindo-gatito_1017-14710.jpg?w=2000");
    background-size: cover;
    background-position: center;
    width: 100%;
    padding-bottom: 20px; /* Ajusta el espaciado inferior deseado */
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(21, 18, 18);
    text-align: center;
    /* Agrega otros estilos si es necesario, como tamaño, altura, etc. */

}


/* elementos: garantia, asistencia telefonica, seguridad y nuevos productos (Grid) */
.container-items{
    display: grid;
    grid-template-columns: repeat(3, 1fr);  
    gap: 10px;
    background-color: #fff; /* Fondo blanco para la información del producto */
    

}

.item{
    border-radius: 10px;
    border: 2px solid #000; /* Color negro (#000) para el borde */
    overflow: hidden; /* Para ocultar cualquier contenido que se salga del borde */

}

.item:hover{
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.20);
}

.item img{
    width: 50%; /* 100% */
    height: 300px;
    object-fit: cover;
    border-radius: 10px 10px 0 0;
    transition: all .5s;
}

.item figure{
    overflow: hidden;
}

.item:hover img{
    transform: scale(1.2);
}

.info-product{
    padding: 15px 30px;
    line-height: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.price{
    font-size: 18px;
    font-weight: 900;
}

.info-product button{
    border: none;
    background: none;
    background-color: #FF5722; /* Cambio de color a naranja */
    color: #fff;
    padding: 15px 10px;
    cursor: pointer;
}

.cart-empty{
    padding: 20px;
    text-align: center;
}


.hidden{
    display: none;
}




/*
.{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}  */


.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    display: flex;
}

.modal-container {
    position: relative;
    margin: auto;
    width: 90%;
    max-width: 600px;
    max-height: 100%;
    background-color: #fff;
    border-radius: 6px;
    padding: 3em 2.5em;
    display: grid;
    gap: 1em;
    place-items: center;
    grid-auto-columns: 100%;
}

.title {
    text-align: center;
    font-size: 3rem;
    font-weight: 400;
}

.paragraph {
    text-align: center;
    margin-bottom: 1rem;
}

.modal-img {
    width: 60%;
    max-width: 200px;
}

.btns {
    display: flex;
    gap: 15px;
}

.btns > a {
    text-decoration: none;
    padding: 1rem;
    border-radius: .3rem;
    color: #fff;
    font-weight: 400;
}

.btns .open-view {
    color: #222;
    background-color: #e6e6e6;
    border: solid thin gray;
}

.open-guide {
    background-color: #6c63ff;
}

.close {
    position: absolute;
    top: .5rem;
    right: 1rem;
    font-size: 2rem;
    text-decoration: none;
}





.my-button {
  padding: 10px 20px;
  background-color: blue;
  color: black;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.my-button:hover {
  background-color: blue;
}

.my-button:active {
  background-color: blue ;
}

/* seccion de nuevos productos  */
#seccion-np {
  display: flex;
  justify-content: space-around;
}

/* slider */



/* videos promocionales  */

.videos 
{
   width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /*padding: 20px 0;*/
  
  /* nuevo 24-03-26 */
  margin-top: 0;
    padding-top: 0;
    line-height: 0;
}

/* 📱 En celulares (pantallas pequeñas) */
@media (max-width: 768px) {
  .videos video {
    width: 90%;      /* ocupa el 90% del ancho del viewport */
  }
}


/* 📱 En pantallas muy pequeñas (por debajo de 480px) */
@media (max-width: 480px) {
  .videos video {
    width: 95%;      /* un poco más ancho para aprovechar espacio */
  }
}





.videos iframe {
  position: absolute;
  top: 0;
  left: 10;
  bottom: 0;
  right: 10;
  width: 100%;
  
}





/* 26 marzo 26 */

.videos video {
    width: 100%;
    height: auto;
    display: block;
}

@media (min-width: 1024px) {
    .videos video {
        width: 600px;   /* ajusta el tamaño */
        margin: 0 auto; /* lo centra */
    }
}








.videos2 {
  position: relative;
  width: 100%;
  max-width: 900px;   /* antes 1000px, más pequeño en pantallas grandes */
  margin: 0 auto;
  padding: 0;
  margin-bottom: 5px;
}

.videos2 video {
  width: 90%;          /* ligeramente reducido */
  height: auto;
  display: block;
  border: none;
  border-radius: 10px;
  margin: 0 auto;
}

/* Ajuste para celulares (se mantiene igual) */
@media (max-width: 768px) {
  .videos2 {
    padding-top: 2px;
    margin-bottom: 0;
  }

  .videos2 video {
    width: 90%;
    max-height: 220px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
    border-radius: 8px;
  }
}










/* Ajuste para pantallas grandes (más controlado) */
@media (min-width: 992px) {
  .videos2 video {
    width: 80%;          /* un poco más pequeño en desktop */
    max-height: 380px;   /* opcional, controla la altura */
  }
}




.brand-logo.gif-5g {
  width: 100%;
  max-width: 150px;  /* 🔹 tamaño más pequeño en todas las pantallas */
  height: auto;
  display: block;
  margin: 0 auto;    /* centra el GIF */
}

/* Opcional: aún más pequeño en celulares */
@media (max-width: 768px) {
  .brand-logo.gif-5g {
    max-width: 120px;
  }
}





/* videos promocionales */





/* ultima adicion de codigo */

/* imagenes reponsivas */
@media (max-width: 768px) 
{
  .responsive-img {
    width: 80%;
  }

  .mainItems {
    grid-template-columns: auto;
  }
}


 /* ancho y alto de los contenedore de articulos y servicios   */
 
.container 
{
   width: 80%;  /* o cualquier otro ancho */
   height: 60%;  /* o cualquier otra altura */
 /*  border: 1px solid black;  para visualizar el contenedor */
 
 
  
  
}


.responsive-img {
  width: 100%;
  object-fit: contain;
  height: auto; /* Mantiene la proporción original */
  /* O puedes usar: object-fit: cover;  para que llene el contenedor,
     o object-fit: contain; para que quepa dentro sin recortar */
}




/*  EFECTOS DE LAS IMAGENES DE SERVICIOS  */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
    
}

.contenedor {
    width: 60%;
    display: flex;
    justify-content: center;
    align-items:normal;
    height: 25vh;
    padding: 5px 0;
    margin-bottom: 10px;  /* espacio entre cada imagen cuando es en un dospositivo mas pequeño  */
}

.contenedor figure {
    position: relative;
    width: 210px;
    height: 175px;
    cursor: pointer;
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 0px 25px 25px rgba(0,0,0,0.50);
    padding: 5px 0;
   
}

.contenedor figure img {
    width: 100%;
    height: 100%;
    transition: all 400ms ease-out;
    will-change: transform;
}

.contenedor figure .capa {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 103, 123, 0.7);
    transition: all 400ms ease-out;
    opacity: 0;
    visibility: hidden;
    text-align: center;
}

.contenedor figure:hover > .capa {
    opacity: 1;
    visibility: visible;
}

.contenedor figure:hover > img {
    transform: scale(1.3);
}

.contenedor figure .capa h3 {
    color: yellow;
    font-weight: 400;
    margin: 30px 0 15px;
    transition: all 400ms ease-out;
}

.contenedor figure .capa p {
    color: blue;
    font-size: 18px;
    line-height: 1.5;
    max-width: 200px;
    margin: auto;
}




/*   imagenes ajustadas en el banner inicial */

.slider-area img 
{
      width: 35%;
      height: 35%;
}


.slider-inner .slider-item img
{
	height:auto;
	width:50%;
}


.list {
  display: flex;
  gap: 8px;
  padding: 16px;

  list-style: none;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}



/* configuracion de card para las marcas (carrusel)   */

/* card para las marcas   */

.card {
 /* width: 300px;  Ancho fijo */
 /*  height: 200px;  Alto fijo */
  /* O */
  width: 60%; /* Ancho relativo al contenedor */
  height: auto; /* Alto automático para mantener la proporción */
  min-width: 200px; /* Ancho mínimo */
  max-width: 800px; /* Ancho máximo */
  min-height: 150px; /* Alto mínimo */
  max-height: 250px; /* Alto máximo */
  
}





.videos 
{
    display: flex;
  justify-content: center;
  align-items: center;
  /* height: 100vh;  O el alto deseado */
  padding: 20px;
}



.mainmenu-area 
{
  /* Tamaño */
  width: 1800px;               /* Ajusta al 90% del ancho de la ventana */
  max-width: 1800px;        /* No crece más allá de 1600px */
  height: 90px;             /* Altura fija del menú */
  

  /* Estilo visual */
  background-color: #30B5FD; /* Color de fondo */
 
  border-radius: 10px;       /* Bordes redondeados */
  
  border-color: #0000FF;;
  
  font-family: "Roboto Condensed", sans-serif;
  font-size: 22px;
  text-transform: uppercase;

  /* Posicionamiento */
  
                /* Centrado horizontal */
                
  margin-top: 2.2%; /* separacion entre el borde de la pantalla y el borde del menu superior de opciones */
  margin-bottom: 0%;
  position: absolute;        /* Mejor que absolute para evitar problemas */
  z-index: 10;
  
  
  margin-left: auto;
  margin-right: auto;
      
  /* Flexbox para centrar contenido */
  display: flex;
  justify-content: center;
  align-items: center;
  
  top: 56%;
  left: 50%;
  transform: translate(-50%, -55%);
     

}


.menu-icon {
  width: 55px;
  height: auto;
  margin-right: 5px;
  vertical-align: middle;
}

/* En pantallas pequeñas */
@media (max-width: 576px) {
  .menu-icon {
    width: 42px; /* iconos más chicos */
  }

  .nav > li > a {
    font-size: 14px;   /* texto más pequeño */
    padding: 8px 10px; /* menos espacio */
  }
}




@media (max-width: 768px) {
  #mimenu {
    text-align: left; /* alinea todo a la izquierda */
  }

  #mimenu ul.nav {
    float: none;       /* quita alineaciones heredadas */
  }

  #mimenu ul.nav > li {
    display: block;    /* cada item ocupa toda la línea */
    text-align: left;  /* asegura que el texto quede alineado */
  }
}




.navbar,
.navbar-default,
.navbar-collapse {
  border: none;
  box-shadow: none;
}

.navbar-nav > li > a {
  border: none;
  box-shadow: none;
}






.navbar,
.navbar-collapse,
.navbar-collapse.collapse.show {
  background-color: #30B5FD; /* Color (azul) de navbar que contiene los elementos del menu y sus iconos (principal, tienda, planes, ...)  */
}


.navbar-nav .nav-link {
  color: #003b5c;  /* estaba en white */
}

.navbar-nav .nav-link:hover {
  color: #003b5c ; /* azul más oscuro para el hover */
}







@media (max-width: 768px) 
{
      .mainmenu-area 
      {
            width: 100%; /* Ancho del menu responsivo en 100% en pantallas pequeñas */
            /* Otros estilos para pantallas pequeñas */
            padding: 10px; 
            
      }
}

  
/* tamaño del div en pantallas grandes cuando se minimiza la pantalla, menu aparece en un div */  

@media (max-width: 760px) 
{
      .mainmenu-area 
      {
        height: 25vh; /* En pantallas muy pequeñas, cada item ocupa todo el ancho */ 
         margin-bottom: 0em;
        
      }
}


@media (max-height: 768px) 
{
      .mainmenu-area 
      {

            height: 0%; /* más grande que 20% */
            padding: 0px; 
            
      }
}




/*  nuevo  */


@media (min-width: 768px) 
{
      .collapse.navbar-collapse 
      {
        display: none; /* Muestra el menú completo en pantallas más grandes */
        
         
      }
}


  
.maimenu-area-toggle 
{
    display: none;  /* block */
    /* ... */
}
 
   
 
    
@media (max-width: 768px) 
{
  .navbar-nav ul 
  {
    flex-direction: column; /* Apilar los elementos del menú */
    display: none; /* Ocultar el menú por defecto */
    
  }
}






/* imagen principal de la pagina */

/* width="1500px" height="400px" */

.encabezadop 
{    
     text-align: center; 
    
        max-width: 100%; 
      
      /* border: 1px solid yellow;  borde de la imagen principal (banner)*/
     
     /*  width: 100%;   */ /* Ancho de la ventana */
     /*  height: 50vh; */ /* Altura de la ventana */
      overflow: hidden; /* Evita que la imagen sobresalga del div */
      display: block;
      justify-content: center; /* Centra horizontalmente */
      align-items: center; /* Centra verticalmente */
      margin: 0 auto; 
      padding: 0; 
     
     line-height: 0;
     
    
     
}

.encabezadop img 
{
   width: 100%;  /* La imagen ocupa todo el ancho del div */
   height: auto;  /* La altura se ajusta automáticamente para mantener la */        /*proporción */
   display: block;  /* Elimina el espacio extra debajo de la imagen */
  
   max-width: 100%;
   max-height: 100%;
  
  display: block;
  margin: 0 auto; /* centra en pantallas grandes */
  
  
}


/* Ajustes específicos para pantallas medianas */
@media (max-width: 992px) {
  .encabezadop img {
    width: 80%;             /* Reduce un poco la imagen */
  }
}

/* Ajustes para celulares */
@media (max-width: 576px) {
  .encabezadop img {
    width: 100%;            /* Ocupa todo el ancho en móviles */
    margin: 0;
  }
}




/* videos de encabezado de planes  */
 
 .video-planes 
 {
  width: 120%;      /* Ocupa todo el ancho disponible */
  height: auto;     /* Ajusta la altura manteniendo proporción */
  max-width: 1300px; /* Opcional: límite en pantallas grandes */
  display: block;
  margin:  auto;     /* Centrado */
  
}


.video-planes2 
 {
   width:110%;        /* ocupa todo el ancho disponible */
    max-width:1210px;  /* tamaño máximo en pantallas grandes */
    height:auto;       /* mantiene proporción */
    display:block;
    margin:auto;
    border-radius:10px;
  
}


/* banners publicitarios  */




.bannersp img {
  width: 90%;
  height: auto;
}

/* SOLO en celulares */
@media (max-width: 768px) {

  .bannersp img {
    width: 100%;   /* ocupa todo el ancho */
    height: auto;  /* mantiene proporción */
  }

  .bannersp {
    padding: 0;
    margin: 0;
  }
  
  .bannersp {
  text-align: center;
}

.bannersp:hover img 
{
    -webkit-transform:scale(1.1);
    transform:scale(1.1);
    filter: saturate(140%);
}



/* imagen que se carga antes que la pagina (responsiva)  */

.img-inicial 
{
  display: flex;                /* usamos flexbox */
  justify-content: center;      /* centra horizontal */
  align-items: center;          /* centra vertical */
  height: 100vh;                /* ocupa el alto completo de la pantalla */
  width: 80vw;                  /* ocupa todo el ancho */
  background: #fff;             /* opcional: color de fondo */
  position: relative;           /* por si luego quieres superponer algo */
}

/* La imagen se hace responsiva */
.img-inicial img 
{
  max-width: 90%;   /* nunca será más grande que el 90% del ancho */
  height: auto;     /* mantiene la proporción */
  justify-content: center;
  align-items: center; 
  display: block;  
}

@media (max-width: 600px) {
  .img-inicial img {
    max-width: 80%;
  }
}


    
    .preloaderBg-img {
        display: flex;           /* Convierte el div en un contenedor flex */
        justify-content: center; /* Centra horizontalmente el contenido */
        align-items: center;
        width: 100%;
        height: auto;
    }

    /* Para pantallas pequeñas, por ejemplo */
    @media (max-width: 600px) {
        .preloaderBg-img{
            max-width: 80%; /* Limita el ancho máximo en pantallas pequeñas */
        }
    }
    
    
    @media (max-width: 480px) {
    #efectoT text {
          font-size: 12vw;
          justify-content: center; /* centra horizontalmente */
          align-items: center;
        }
    }
    


/* Estilos para pantallas grandes (Escritorio) */
@media (min-width: 992px) 
{
    /* Ajusta el padding de los enlaces para hacer el menú más alto y ancho */
    .mainmenu-area .nav > li > a {
        padding-top: 20px;    /* Aumenta la altura del menú */
        padding-bottom: 20px; /* Aumenta la altura del menú */
        padding-left: 20px;   /* Aumenta el espaciado horizontal */
        padding-right: 20px;  /* Aumenta el espaciado horizontal */
        font-size: 16px;      /* Mantén o ajusta el tamaño de la fuente */
    }

    /* Asegúrate de que el contenedor no tenga un color de fondo diferente al menú */
    .mainmenu-area {
        height: auto; /* Permite que la altura se ajuste al contenido (los enlaces) */
    }
}


/* Estilos para Móviles (Bootstrap XS/SM) - Después del colapso */
@media (max-width: 767px) {
    /* Aumenta el padding vertical para los enlaces del menú colapsado */
    .mainmenu-area .nav > li > a {
        padding-top: 0px;
        padding-bottom: 0px;
        padding-left: 10px; /* Alinea a la izquierda, fácil de leer */
        font-size: 16px;    /* Tamaño de fuente cómodo para móvil */
        text-align: left;
         background: #30B5FD; /* fondo del color del menu colapsado cuando se le da clic para ver las opciones */
    }
    
    /* Asegura que el botón de colapsar sea visible y fácil de presionar */
    .navbar-header {
        float: none;
        text-align: center;
        
    }
    
}



/* Media Query para teléfonos móviles (ancho de hasta 600px, cubriendo 6.4 pulgadas) */
@media (max-width: 600px) {
    
    /* 1. Ajuste del Contenedor Principal del Menú */
    .mainmenu-area .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* 2. Estilo del Botón de Hamburguesa */
    .navbar-toggle {
        /* Asegura que el botón de hamburguesa sea fácil de presionar */
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 9px 10px; /* Un poco más de área para tocar */
        background: #30B5FD;
        border: 1px solid blue;
        
        
    }

    /* 3. Estilo de los Enlaces del Menú Colapsado */
    .mainmenu-area .nav > li > a {
        padding-top: 10px;    /* Espacio vertical adecuado */
        padding-bottom: 10px;
        font-size: 15px;      /* Tamaño de fuente legible */
        text-align: left;     /* Alinea el texto a la izquierda para mejor lectura */
        /* Asegúrate de que el enlace ocupe todo el ancho */
        width: 100%;
        background: #30B5FD; /* fondo del color del menu colapsado cuando se le da clic para ver las opciones */
        display: block;
        
        
          
    }

    /* 4. Ajuste de los Íconos dentro de los enlaces */
    .menu-icon {
        width: 24px; /* Aumenta el tamaño del ícono ligeramente para mejor visibilidad */
        margin-right: 8px; /* Más espacio entre el ícono y el texto */
        vertical-align: middle;
    }

    /* 5. Asegurar que los textos del carrusel (si estuvieran visibles) se ajusten */
    .caption-group h2, .caption-group h4 {
        font-size: 1.1em;
    }
}





/*    iphone    */




body {
    margin: 0;
    padding: 0;
    min-height: 100%;   /* antes 100vh  */
    box-sizing: border-box; 
}

/* Contenedor principal para centrar el contenido y limitar su ancho máximo */
.main-content {
    max-width: 1000px;   /* antes 1200px  */
    margin: 0 auto;
    padding: 20px;
    position: relative;
    z-index: 10;
    
}




/* Estilos de la Disposición (Flexbox para imagen y especificaciones) */
.product-details {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    justify-content: center;
}

.product-image {
    flex: 1;
    max-width: 400px;
    display: flex;
    justify-content: center;
}

.product-image img {
    /* En escritorio, ocupa el 100% de su contenedor */
    width: 100%;
    height: auto;
    display: block;
}

.product-specs {
    flex: 2;
    text-align: left;
}

.specs-list {
    font-size: clamp(16px, 2vw, 23px);
    color: blue;
    width: fit-content;
    margin: 0;
}

.back-link {
    font-size: 15px;
    color: red;
    text-decoration: none;
    display: block;
    margin-top: 20px;
}

.image-logo {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 20;
}

.image-logo img {
    /* Tamaño base del logo en escritorio */
    width: 170px;
    height: 180px;
}

/* ============================================== */
/* Media Query para Celulares (Reducción del 10%) */
/* ============================================== */

@media (max-width: 768px) {
    /* 1. ESCALADO GENERAL DEL CONTENIDO: Reducir la base del cuerpo en un 10% (0.9 de 1.0) */
    body {
        /* Usamos la unidad 'rem' (root em) para escalar todas las fuentes. 
           1rem = 16px (por defecto), 0.9rem = 14.4px. */
        font-size: 70%; 
    }

    /* 2. AJUSTE DE LA DISPOSICIÓN: Apilar elementos */
    .product-details {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .product-image {
        max-width: 80%;
        margin-bottom: 20px;
    }

    /* 3. AJUSTE DE LA IMAGEN DEL IPHONE: Se reduce un 10% del ancho del contenedor. */
    .product-image img {
        width: 90%; 
    }

    /* 4. CENTRADO DE TEXTO Y LISTA */
    .product-specs {
        width: 100%;
        padding: 0 10px;
    }

    .specs-list {
        margin: 0 auto;
        text-align: center;
    }

    .back-link {
        text-align: center;
    }

    /* 5. AJUSTE DEL LOGO: Se reduce un 10% (180px * 0.90 = 162px) */
    .image-logo {
        bottom: 10px;
        right: 10px;
    }
    
    .image-logo img {
        width: 162px;
        height: 162px;
    }
}


@media (max-width: 768px) {
    /* ... otros ajustes ... */
    
    /* 1. ESCALADO GENERAL DEL CONTENIDO */
    body {
        font-size: 80%; 
    }

    /* 2. AJUSTE DE MARGEN DEL TÍTULO */
    .main-content {
        /* Asegura suficiente relleno en la parte superior del contenedor principal */
        padding-top: 60px; 
    }

    h1 {
        /* Añade margen superior adicional si es necesario para separarlo */
        margin-top: 10px; 
        margin-bottom: 25px; /* Ligeramente más espacio debajo del título */
        align-items: center;
        justify-content: center;
    }
    
    /* ... el resto de la media query ... */
}


















/* Contenedor principal */
.bannersp {
  width: 80%;            /* ocupa todo el ancho disponible */
  max-width: 120%;      /* ancho máximo opcional para pantallas grandes */
  margin: 0 auto;         /* centra el banner */
  padding: 0px;          /* espacio interno opcional */
  box-sizing: border-box; /* asegura que padding no altere el ancho */
  text-align: center;     /* centra la imagen si no ocupa todo el ancho */
}

/* Imagen responsiva */

.bannersp img {
  width: 80%;           /* ocupa todo el ancho del contenedor */
  height: auto;          /* ajusta la altura automáticamente */
  max-width: 90%;       /* evita que se salga del contenedor */
  border-radius: 10px;   /* opcional: bordes redondeados */
  display: inline-block; /* asegura buen centrado */
  justify-content: center; /* Centra horizontalmente */
  align-items: center;    /* Centra verticalmente */
  margin: 5px ; 
}

/* Ajustes específicos para celulares */
@media (max-width: 600px) {
  .bannersp {
    padding: 5px;
  }

  .bannersp img {
    width: 100%;        /* ocupa todo el ancho del celular */
    height: 50%;       /* mantiene proporción */
    object-fit: contain;
  }
}



.linea {
  width: 80%;
  max-width: 1200px;
  height: 3px;
  background: #1F0E8E;
  border: none;
  margin: 5px auto; /* Centra la línea */
}





.group {
  display: flex;
  flex-wrap: nowrap;      /* Todas las imágenes en una sola línea */
  justify-content: center;
  align-items: center;
  gap: 25px;              /* 🔹 Más separación entre imágenes */
  overflow-x: auto;       /* Permite desplazarse si no caben */
  /* background-color: #007bff; */ /* Fondo azul */
  padding: 20px;
  border-radius: 20px;    /* Esquinas redondeadas del fondo azul */
  scrollbar-width: none;  /* Oculta scrollbar en Firefox */
}

/* Oculta la barra de scroll en navegadores WebKit (Chrome, Safari, Edge) */
.group::-webkit-scrollbar {
  display: none;
}

.card {
  background-color: #1F75FF;
  border-radius: 15px;
  padding: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  flex: 0 0 auto;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: 100px;           /* 🔹 Tamaño más pequeño */
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.card img {
  width: 80%;             /* 🔹 Imagen más pequeña dentro de la tarjeta */
  height: auto;
  border-radius: 10px;
  display: block;
}



.footer-about-us .h2 .span {
  color: red; /* color del texto */
  text-shadow: 2px 2px 4px black; /* sombra negra (x, y, difuminado, color) */
}





/* carga del logo al arrancar la pagina en comptadoras y celulares */



html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}


/* Contenedor general */
.img-inicial {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  box-sizing: border-box;
}

/* 🔹 En pantallas grandes (por defecto): centrada y más grande */
.img-inicial img {
  width: 45%;               /* Más grande */
  max-width: 400px;
  height: auto;
  transform: translate(0, 0); /* Centrada completamente */
}

/* 🔹 En celulares (NO SE TOCA) */
@media (max-width: 600px) {
  .img-inicial img {
    width: 50%;
    max-width: 220px;
    transform: translate(-25%, -45%); /* Como ya te funcionó */
  }
}


/*******  promo redmi *******/


.predmi img {
  width: 80%;
  border-radius: 10px; /* esquinas redondeadas */
  height: auto;
  display: block;
  margin: 0 auto; /* centra la imagen */
}

/* --- Ajuste para celulares --- */
@media screen and (max-width: 768px) {
  .predmi img {
    width: 95%;     /* más ancha en celulares */
    max-width: 450px; /* evita que se haga demasiado grande */
  }
}






/* -------------------------------------- */
/* ESTILOS PREDETERMINADOS (Desktop y Tablet) */
/* -------------------------------------- */
.videotienda {
    /* TAMAÑO REDUCIDO */
    width: 90%; 
    max-width: 1400px; 
    /* Margen de escritorio, separación de 20px arriba y abajo */
    margin: 20px auto; 
}

/* Estilos del elemento VIDEO (Bordes redondeados en todas las pantallas) */
.video-tienda {
    width: 90%;
    height: auto;
    display: block;
    /* BORDE REDONDEADO a 10px */
    border-radius: 10px; 
}

/* -------------------------------------- */
/* MEDIA QUERY (Celulares - Ajuste de espacio) */
/* -------------------------------------- */
@media (max-width: 768px) {
    .videotienda {
        /* Tamaño maximizado para celulares */
        width: 90%; 
        height: 85%;
        
        /* Margen negativo para SUBIR el video y reducir la separación */
        margin-top: -10px; 
        
        /* Centrar horizontalmente y quitar margen inferior */
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0; 
    }
}



/* Video MÁS ALTO */
.video-tienda {
    width: 100%;
    height: auto;          
    max-height: 650px;     /* AUMENTADO (más alto) */
    object-fit: contain;   
    background: transparent;
    display: block;
    margin: 0;
    padding: 0;
}

/* CELULARES */
@media (max-width: 600px) {

    .slider {
        overflow: hidden;
        gap: 0 !important;
    }

    .slide {
        min-width: 100% !important;   /* Mantener ancho REAL del slide */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Reducir SOLO el contenido, no el slide */
    .slide img {
        transform: scale(0.75);
        transform-origin: center;
    }

    /* También reducimos el botón */
    .vista-btn {
        transform: scale(0.75);
        transform-origin: center;
    }
}






/* -------------------------------------- */
/* ESTILOS PREDETERMINADOS (Desktop y Tablet) */
/* -------------------------------------- */
.imagen2 {
    text-align: center;
    margin: 10px auto; 
}

.imagen2 img {
    /* TAMAÑO MANTENIDO para Desktop/Tablet (450px) */
    max-width: 450px; 
    
    /* Asegura que la imagen sea responsiva */
    width: 80%; 
    height: auto; 
    display: block; 
    margin: 0 auto; 
}

/* -------------------------------------- */
/* MEDIA QUERY (Celulares - TAMAÑO REDUCIDO) */
/* -------------------------------------- */
@media (max-width: 768px) {
    .imagen2 img {
        /* Reducimos el porcentaje de ancho para que ocupe menos espacio */
        width: 80%; 
        
        /* Reducimos el ancho máximo permitido */
        max-width: 250px; 
    }
}















/*     slider tienda  */


/* ===== CONTENEDOR DEL SLIDER ===== */
.slider-container {
    position: relative;
    
    /* Esta línea centra el contenedor horizontalmente */
    margin: 0 auto; 
    
    /* Las siguientes líneas se usan para el contenido interno y no son necesarias 
       para centrar el contenedor en sí, pero las mantendremos por si las necesitas 
       para otros propósitos: */
    justify-content: center;
    align-items: center; 
    
    width: 70%;
    overflow: hidden;
    padding: 40px 0;
}

/* ===== SLIDER ===== */
.slider {
  display: flex;
  transition: transform 0.4s ease;
  gap: 20px; /* más separación entre elementos */
}

.slider::-webkit-scrollbar {
  display: none; /* Oculta scroll Chrome */
}



/* --- Estilos generales --- */




.slide {
    flex: 0 0 25%;
    padding: 10px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;   /* 🔹 Imagen arriba / botón abajo */
    justify-content: space-between;  /* 🔹 Botón pegado al fondo */
    align-items: center;      /* 🔹 Centrado */
}


/* Optional: reducir separación general del slider */
.slider {
  gap: 5px;            /* 🔹 Reduce distancia entre slides en escritorio */
}

/* Imagen más pequeña si quieres */
.slide img {
    width: 100%;
    height: auto;
}

/* BOTÓN FIJO DENTRO DE CADA SLIDE */
/* Botón fijo al fondo */
.vista-btn {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    
    padding: 26px 60px;          /* 🔥 Muchísimo más grande */
    font-size: 26px;             /* 🔥 Texto grande de verdad */
    font-weight: 900;

    background-color: rgba(0, 0, 0, 0.85);
    color: #fff;
    border: none;
    border-radius: 20px;         /* Muy redondeado */

    cursor: pointer;
    transition: 0.3s ease;
}

.slide .vista-btn {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);

    padding: 22px 40px;
    font-size: 20px;
    font-weight: 800;

    background-color: rgba(0, 102, 255, 0.85);   /* 🔵 Azul con transparencia */
    color: #fff;

    border: none;
    border-radius: 16px;

    cursor: pointer;
    z-index: 20;
    transition: 0.3s ease;
}

.slide .vista-btn:hover {
    background-color: rgba(0, 102, 255, 0.95);   /* 🔵 Más intenso al pasar el mouse */
    transform: translateX(-50%) scale(1.06);
}




@media (max-width: 992px) {
  .slide {
    flex: 0 0 33.33%;
    padding: 5px;      /* 🔹 Mantener ajustes */
  }

  .slider {
    gap: 5px;
  }
}

/* --- CELULAR: 1 por vista real sin ver partes del siguiente --- */
@media (max-width: 600px) {

  .slider {
    justify-content: center;
    gap: 0;                         /* Sin separación */
  }

  .slide {
    flex: 0 0 80%;                 /* 1 elemento por pantalla */
    max-width: 80%;
    padding: 0;
    margin: 0;

    display: flex;                  /* 🔹 Centrado horizontal */
    flex-direction: column;
    align-items: center;            /* 🔹 Centra imagen y botón */
    justify-content: center;        /* 🔹 Centrado vertical (si el contenedor es alto) */
    text-align: center;
  }

  .slide img {
    width: 100%;
    height: auto;
}

  .vista-btn {
    margin-top: 10px;
  }
}






/* Pantallas medianas */
@media (min-width: 768px) and (max-width: 1199px) {
    .slide {
        transform: scale(0.85);   /* antes 0.85 */
    }
}

/* Pantallas grandes */
@media (min-width: 1200px) {
    .slide {
        transform: scale(0.60);   /* antes 0.75 */
    }
}













/* ===== BOTÓN DE VISTA RÁPIDA ===== */
.vista-btn {
  display: inline-block;
  background-color: #007bff;
  color: white;
  border: none;
  padding: 6px 10px;   /* 🔹 Tamaño más pequeño */
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;     /* 🔹 Letra más pequeña */
  font-weight: bold;
  width: auto;         /* 🔹 Evita que crezca demasiado */
  min-width: 90px;     /* 🔹 Controla el ancho final */
  text-align: center;
  margin-top: 5px;
}

.vista-btn:hover {
  background:#007bff;
  transform: translateX(-50%) scale(1.03);
}





/* ===== BOTONES DE NAVEGACIÓN ===== */
.nav-buttons {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  gap: 15px;
}

.nav-btn {
  background: black;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.3s;
}

.nav-btn:hover {
  background: #333;
}

/* ===== POPUP ===== */
.popup {
  display: none; /* 🔹 Oculta al cargar la página */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75%;
  max-width: 1000px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
  z-index: 1000;
  flex-direction: row;
  overflow: hidden;
}

/* IZQUIERDA (IMAGEN) */
.popup-left {
  width: 50%;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #ddd;
}

.popup-left img {
  width: 90%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
}

/* DERECHA (CONTENIDO) */
.popup-right {
  width: 50%;
  padding: 25px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.popup-right h2 {
  margin: 0 0 15px;
  font-size: 22px;
}

/* BOTÓN CERRAR */
.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 18px;
  line-height: 28px;
}

/* CAMPO EXPANDIBLE */
details {
  margin-top: 15px;
  background: #f8f8f8;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 10px;
}

summary {
  cursor: pointer;
  font-weight: bold;
  font-size: 16px;
  color: #333;
}

details p {
  margin-top: 8px;
  font-size: 15px;
  color: #444;
}

/* RESPONSIVO */
@media (max-width: 768px) {
  .popup {
    flex-direction: column;
    width: 90%;
  }
  .popup-left, .popup-right {
    width: 100%;
    border-right: none;
  }
  .popup-left img {
    width: 100%;
    height: 250px;
  }
}



/* ======= AJUSTES PARA CELULAR ======= */
@media (max-width: 600px) {

    /* 🔹 Mostrar todos los elementos en una fila, visibles */
    .slider {
        display: flex;
        overflow-x: hidden;
        gap: 8px; /* 🔥 espacio reducido entre elementos */
    }

    /* 🔹 Cada elemento un poco más grande (pero no gigante) */
    .slide {
        min-width: 65%;   /* antes 65% */
        max-width: 65%;
        flex-shrink: 0;
    }

    /* 🔹 Imagen más grande pero con buen margen */
    .slide img {
        width: 75% !important;   /* antes 75% */
        margin: auto;
        display: block;
    }
}