@charset "ISO-8859-1";
/* CSS Document */
@import url("normalize.css");

@font-face {
    font-family: 'OwenPro-SemiBold';
    src: url("../fonts/Owen Pro/OwenPro-SemiBold.otf") format('opentype'); 
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OwenPro-Medium';
    src: url("../fonts/Owen Pro/OwenPro-Medium.otf") format('opentype'); 
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OwenPro-Regular';
    src: url("../fonts/Owen Pro/OwenPro-Regular.otf") format('opentype'); 
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'OwenPro-Light';
    src: url("../fonts/Owen Pro/OwenPro-Light.otf") format('opentype'); 
    font-weight: normal;
    font-style: normal;
}

:root {
	--header-height: 5rem;
    --aqua: #00A0AF;
	--verde: #8DBB00;
	--negro: #000000;
	--gris: #1F242D;
	--gris-claro: #646972;
	--owenPro-600: 'OwenPro-SemiBold';
	--owenPro-500: 'OwenPro-Medium';
	--owenPro-400: 'OwenPro-Regular';
	--owenPro-300: 'OwenPro-Light';
/*========== z index ==========*/
	--z-tooltip: 10;
	--z-fixed: 100;
}

*{
	box-sizing: border-box;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}
#resultList{
	padding: 12px 0 36px 0 !important;
	}
/*=============== REUSABLE CSS CLASSES ===============*/
.container {
  max-width: 1320px;
  margin-inline: 1.5rem;
}

.hidden {
    visibility: hidden;
    opacity: 0;
}

/*=============== HEADER ===============*/
.header {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--z-fixed);
  font-family: var(--owenPro-500);
/*  margin: 2% auto;*/
  background-color: #FFFFFF;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/*=============== NAV ===============*/
.nav {
  height: var(--header-height);
  align-items: center;
}

.nav__data {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 0 2rem;
}

.nav__logo {
  display: inline-flex;
  align-items: center;
  column-gap: .25rem;
}

#nav__logo-img{
	width: 134px;
}

.nav__toggle {
  position: relative;
  width: 32px;
  height: 32px;
}

.nav__burger, 
.nav__close {
  position: absolute;
  width: max-content;
  height: max-content;
  inset: 0;
  margin: auto;
  font-size: 1.25rem;
  cursor: pointer;
  transition: opacity .1s, transform .4s;
}

.nav__close {
  opacity: 0;
}

.buscador{
	text-align: center;
	margin-top: 10vh;
}
.mainBanner__button{
	width: 187px;
	min-height: 62px;
	border: none;
	border-radius: 10px;
	background-image: url("../img_repository/boton-tienda/fondo-azul.svg");
	background-size: cover;
	padding: 10px 20px; 
	box-sizing: border-box;
	margin-top: .5rem;
	font-family: var(--owenPro-600);
	color: #FFFFFF;
	cursor: pointer;
	position: relative; 
	text-align: left;
	font-size: 1rem;
	transition: background-image 0.3s ease;
}
.mainBanner__button:hover{
	background-image: url("../img_repository/boton-tienda/fondo-verde.svg");
}

.letra__grande::after{
	content: ""; 
    display: block;
    width: 48px; 
    height: 48px;
    background-image: url("../img_repository/boton-tienda/icon-bolsa.svg"); 
    background-size: cover; 
    background-position: center; 
    position: absolute; 
    right: 18px; 
    top: 50%; 
    transform: translateY(-50%);
}
.letra__pequena{
	font-family: var(--owenPro-400);
	font-size: .5rem;
}
.letra__grande{
	font-size: 1.563rem;
	font-family: var(--owenPro-600);
}
.buscador{
	display: none;
}
.container-buscador__desktop p{
	display: inline-flex;
	color: #FFFFFF;
	font-family: var(--owenPro-500);
	font-size: 1.25rem;
	background-color: var(--gris);
	padding: 15px 13% 13px 4%;
	box-sizing: border-box;
	border-radius: 50px 0 0 50px;
}
.container-search{
	background-color: rgba(0, 0, 0, 0.4); 
}
#blurOverlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(100, 100, 100, 0.4); /* gris semitransparente */
	backdrop-filter: blur(4px); /* efecto de desenfoque */
	z-index: 0; /* debajo del searchBox */
	transition: opacity 0.3s ease;
}

.hidden {
	display: none !important;
}
#searchBox {
    position: fixed;
    top: calc(var(--header-height) + 2.5rem);
    left: 0;
    width: 80%;
    height: 80vh;
    background-color: #EEF0F2; 
    z-index: 1; 
    overflow: auto;
    margin: 0% 10% 5% 10%;
    border-radius: 20px;
    display: grid;
    grid-template-rows:10vh 12vh auto; 
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.close__button { 
	grid-area: 1 / 1 / 2 / 2; 
	justify-self: end;
    margin: 2%;
	cursor: pointer;
	height: 50px;
	}

.container-buscador__desktop { 
	grid-area: 2 / 1 / 3 / 2; 
	text-align: center;
	}
.buscador__btn{
	background-color: var(--gris);
	color: #FFFFFF;
	border-radius: 50px 0 0 50px;
	height: 2.313rem;
    width: 14%;
    text-align: start;
    padding: 0 2%;	
	font-size: 1.25rem;
	}
.buscador__btn-lupa{
	background-color: var(--gris);
	padding: 6px;
    border-radius: 50px;
    margin: 0px 0px 30px -28px;
    height: 52px;
    width: 52px;
}

.container-buscador__desktop input{
	height: 51px;
	width: 60%;
	border: none;
	}
#buscadorProd input::placeholder {
	color: #626262; 
  	font-size: 20px;
	line-height: 16px;
	font-family: var(--owenPro-300);
}
.dropdown__buscar{
	background-color: #FFFFFF; 
	border-radius: 0!important;
}
.input-mobile{
	width: 80%!important;
}
.overflow-hidden{
	overflow: hidden;
}

/*Iconos del menú - Categorías */
.accesorios-menu__icon::before{
    content: "";
    background-image: url("../img_repository/iconos-flechas/categorias-iconos/accesorios_negro.svg");
    background-size: 21px 21px;
    display: inline-block;
    width: 21px;
    height: 21px;
    margin: 0 12px 4px 0px;
}
.computo-menu__icon::before{
    content: "";
    background-image: url("../img_repository/iconos-flechas/categorias-iconos/computo_negro.svg");
    background-size: 21px 21px;
    display: inline-block;
    width: 21px;
    height: 21px;
    margin: 0 12px 4px 0px;
}
.consumibles-menu__icon::before{
    content: "";
    background-image: url("../img_repository/iconos-flechas/categorias-iconos/consumibles_negro.svg");
    background-size: 21px 21px;
    display: inline-block;
    width: 21px;
    height: 21px;
    margin: 0 12px 4px 0px;
}
.electronica-menu__icon::before{
    content: "";
    background-image: url("../img_repository/iconos-flechas/categorias-iconos/electronica_negro.svg");
    background-size: 21px 21px;
    display: inline-block;
    width: 21px;
    height: 21px;
    margin: 0 12px 4px 0px;
}
.energia-menu__icon::before{
    content: "";
    background-image: url(../img_repository/iconos-flechas/categorias-iconos/energia_negro.svg);
    background-size: 21px 21px;
    display: inline-block;
    width: 21px;
    height: 21px;
    margin: 0 12px 4px 0px;
}
.venta-menu__icon::before{
    content: "";
    background-image: url("../img_repository/iconos-flechas/categorias-iconos/venta_negro.svg");
    background-size: 21px 21px;
    display: inline-block;
    width: 21px;
    height: 21px;
    margin: 0 12px 4px 0px;
}
.redes-menu__icon::before{
    content: "";
    background-image: url("../img_repository/iconos-flechas/categorias-iconos/redes_negro.svg");
    background-size: 21px 21px;
    display: inline-block;
    width: 21px;
    height: 21px;
    margin: 0 12px 4px 0px;
}
.tabletas-menu__icon::before{
    content: "";
    background-image: url("../img_repository/iconos-flechas/categorias-iconos/tableta_negro.svg");
    background-size: 21px 21px;
    display: inline-block;
    width: 21px;
    height: 21px;
    margin: 0 12px 4px 0px;
}

/*Iconos del menú hover - Categorías-------------- */
.accesorios-menu__icon:hover::before{
    content: "";
    background-image: url("../img_repository/iconos-flechas/categorias-iconos/accesorios_blanco.svg");
    background-size: 21px 21px;
    display: inline-block;
    width: 21px;
    height: 21px;
    margin: 0 8px 4px 0px;
}
.computo-menu__icon:hover::before{
    content: "";
    background-image: url("../img_repository/iconos-flechas/categorias-iconos/computo_blanco.svg");
    background-size: 21px 21px;
    display: inline-block;
    width: 21px;
    height: 21px;
    margin: 0 8px 4px 0px;
}
.consumibles-menu__icon:hover::before{
    content: "";
    background-image: url("../img_repository/iconos-flechas/categorias-iconos/consumibles_blanco.svg");
    background-size: 21px 21px;
    display: inline-block;
    width: 21px;
    height: 21px;
    margin: 0 8px 4px 0px;
}
.electronica-menu__icon:hover::before{
    content: "";
    background-image: url("../img_repository/iconos-flechas/categorias-iconos/electronica_blanco.svg");
    background-size: 21px 21px;
    display: inline-block;
    width: 21px;
    height: 21px;
    margin: 0 8px 4px 0px;
}
.energia-menu__icon:hover::before{
    content: "";
    background-image: url("../img_repository/iconos-flechas/categorias-iconos/energia_blanco.svg");
    background-size: 21px 21px;
    display: inline-block;
    width: 21px;
    height: 21px;
    margin: 0 8px 4px 0px;
}
.venta-menu__icon:hover::before{
    content: "";
    background-image: url("../img_repository/iconos-flechas/categorias-iconos/venta_blanco.svg");
    background-size: 21px 21px;
    display: inline-block;
    width: 21px;
    height: 21px;
    margin: 0 8px 4px 0px;
}
.redes-menu__icon:hover::before{
    content: "";
    background-image: url("../img_repository/iconos-flechas/categorias-iconos/redes_blanco.svg");
    background-size: 21px 21px;
    display: inline-block;
    width: 21px;
    height: 21px;
    margin: 0 8px 4px 0px;
}
.tabletas-menu__icon:hover::before{
    content: "";
    background-image: url("../img_repository/iconos-flechas/categorias-iconos/tableta_blanco.svg");
    background-size: 21px 21px;
    display: inline-block;
    width: 21px;
    height: 21px;
    margin: 0 8px 4px 0px;
}
/* Estilo base del sub-submenú */
.dropdown__subsubmenu {
  position: absolute;
  top: 0;
  left: 100%;
  display: none;
  background-color: #fff;
  border: 1px solid #ccc;
  width: 160px;
  z-index: 1000;
  padding: 10px 0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Estilo para los enlaces dentro del sub-submenú */
.dropdown__subsublink {
  display: block;
  padding: 10px 20px;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
}

.dropdown__subsublink:hover {
  background-color: #f5f5f5;
  color: var(--aqua);
}

/* Mostrar sub-submenú cuando se hace hover al <li> padre */
.dropdown__sublink:hover + .dropdown__subsubmenu,
.dropdown__subsubmenu:hover {
  display: block;
}

/* Ajuste si el sublink está dentro de un <a> */
.dropdown__submenu li {
  position: relative;
}
#resultList li {
    display: flex; 
    align-items: center; 
	cursor: pointer;
    width: 85%;
    margin: 7px auto;
    border-radius: 10px;
}
#resultList li:hover {
	border: 2px solid var(--aqua);
}

#resultList h3 {
    display: flex; 
    align-items: center; 
	font-size: 1.25rem;
	color: var( --color-gris);
	margin-left: 2rem;
	font-family: var(--owenPro-400);
}
.result-image {
	max-width: 98px;
	max-height: 110px;
}

#noResultsMessage, #loadingMessage{
	margin-left: 9%;
}


@media screen and (min-width: 1118px) {
	.button__tienda-mini{
		display: none;
	}
}
@media screen and (max-width: 1318px) {
	.mainBanner__button{
		display: none;
	}	
}
/* Navigation for mobile devices */
@media screen and (max-width: 1118px) {
.desktop{
	display: none;
	}
.nav {
    margin-left: 0rem;
    }
.header {
  margin: auto;
}
.nav__data {
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    padding: 10px;
	margin: 0 0 0 1rem;
} 
.nav__logo {
    flex: 1;
	position: relative!important;
}

.nav__toggle,
.button__tienda-mini {
    margin-left: 10px; 
}

  .nav__menu {
    position: absolute;
    left: 0;
/*    top:calc(var(--header-height) + 1rem)!important;*/
    width: 100%;
    height: calc(100vh - 3.5rem);
    overflow: auto;
    pointer-events: none;
    opacity: 0;
    transition: top .4s, opacity .3s;
	background-image: url("../img_repository/fondo_menuMovil.svg");
	background-color: #ffffff; /* Color fijo para forzar contraste */
	background-blend-mode: normal; /* Asegura que el color no se mezcle */
	color: #000000; /* Forzar texto oscuro en fondo claro */
  }
  .nav__menu::-webkit-scrollbar {
    width: 0;
  }
  .nav__list {
    padding: 1rem 0;
  }	
/*ESTILOS DEL BUSCADOR	*/
	.buscador{
	display: block;
	margin-top: 0;
}	
	.button__tienda{
	display: none;
	}	
	
.nav__data{
	padding: 0;
}
.dropdown__submenu {
    padding-bottom:0rem!important;
}	
.dropdown__menu, .dropdown__submenu {
    border: none!important;
}
.dropdown__menu {
    top: -15px;
    position: relative;
}
 .dropdown__subsubmenu {
    position: static;
    display: none;
    border: none;
    background-color: transparent;
    box-shadow: none;
    padding: 0;
	width: 100%;
  }

  .dropdown__subsubmenu.active {
    display: block;
  }

  .dropdown__subsublink {
    padding-left: 50px; 
  }
	#blurOverlay{
	background-color: rgba(100, 100, 100, 0.0);
    backdrop-filter: none;	
	}
	
.result-image	{
	max-width: 92px;
	max-height: 95px;
}
}

.button__tienda{
	margin-left: -4rem;
}
.nav__link {
  color: var(--negro);
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color .3s;
  text-align: center;
}

.img__button{
	border: none;
	border-radius: 10px;
	background-image: url("../img_repository/boton-tienda/fondo-azul.svg");
	background-size: cover;
	padding: 10px; 
	box-sizing: border-box;
	margin-top: .5rem;
	cursor: pointer;
	position: relative; 
	transition: background-image 0.3s ease;
	width: 53px;
}
.img__button:hover{
	background-image: url("../img_repository/boton-tienda/fondo-verde.svg");
	background-size: cover;
}
/* Show menu */
.show-menu {
  opacity: 1;
  top: var(--header-height);
  pointer-events: initial;
}

/* Show icon */
.show-icon .nav__burger {
  opacity: 0;
  transform: rotate(90deg);
}
.show-icon .nav__close {
  opacity: 1;
  transform: rotate(90deg);
}

/*=============== DROPDOWN ===============*/
.dropdown__item {
  cursor: pointer;
}

.dropdown__arrow {
  font-size: 1.25rem;
  font-weight: initial;
  transition: transform .4s;
}

.dropdown__link, .dropdown__sublink {
  color: var(--negro);
  padding: 1rem;
  display: flex;
  transition: background-color .3s;
  text-align: left;
  align-items: center;  
  box-sizing: border-box;	
}
.dropdown__sublink button{
	background-color: red;
}
.dropdown__link{
  border-bottom: 1px solid #1F242D;
}
.dropdown__link:hover{
	color: white;
	background-color: var(--aqua);
}

.dropdown__submenu li:hover .dropdown__sublink,
.dropdown__submenu li:hover .sublink__gray {
   color: var(--aqua); 
   transition: color 0.3s ease; 
}

.dropdown__menu{
	background-color: #FFFFFF;
	box-shadow:inherit;
}

.dropdown__sublink span{
	color: gray;
	display: contents;
}
.dropdown__submenu:first-child{
	padding-top: 1rem;
}
.dropdown__submenu:last-child{
	padding-bottom: 1rem;
}
.dropdown__menu,.dropdown__submenu  {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease-out;
  padding: 0;
  margin: 0;
  width: 100%;
  border: 1px solid #1F242D;	
}

/* Show dropdown menu & submenu */
.dropdown__item:hover .dropdown__menu, 
.dropdown__subitem:hover > .dropdown__submenu {
  max-height: 1000px;
  transition: max-height .4s ease-in;
}

/* Rotate dropdown icon */
.dropdown__item:hover .dropdown__arrow {
  transform: rotate(180deg);
}

/*=============== DROPDOWN SUBMENU ===============*/
.dropdown__add {
  margin-left: auto;
}

/* For large devices */
@media screen and (min-width: 1118px) {
  .container {
    margin-inline: auto;
  }	
  .nav {
    height: calc(var(--header-height) + 2rem);
    display: flex;
    justify-content: center;
  }
  .nav__toggle {
    display: none;
  }
  .nav__list {
    height: 100%;
    display: flex;
    column-gap: 3rem;
  }
  .nav__link {
    height: 100%;
    padding: 0;
    justify-content: initial;
    column-gap: .25rem;
  }
  .nav__link:hover {
    background-color: transparent;
  }

  .dropdown__item, 
  .dropdown__subitem {
    position: relative;
  }

  .dropdown__menu, .dropdown__submenu {
    max-height: initial;
    overflow: initial;
    position: absolute;
    top: initial;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s, top .3s;
	width: auto;
	background-color: #F9F9FA;
  }

 .dropdown__submenu {
    position: absolute;
    left: 100%;
    top: -1px;
	min-width: 270px;
  }	
	
  .dropdown__link {
	width: 280px;
	align-items: center!important;
  }

  .dropdown__subitem .dropdown__link {
    padding-inline: 1rem;
  }

  /* Show dropdown menu */
  .dropdown__item:hover .dropdown__menu {
    opacity: 1;
    top: initial;
    pointer-events: initial;
    transition: top .3s;
  }

  /* Show dropdown submenu */
  .dropdown__subitem:hover > .dropdown__submenu {
    opacity: 1;
    top: 0;
    pointer-events: initial;
    transition: top .3s;
  }

#resultList h3:hover {
	color: var(--color-morado);
}
}
@media screen and (max-width: 975px) {
#resultList h3{
	font-size: 1rem;		
	}
#resultList{
	padding: 12px 0 80px 0 !important;
	margin-bottom: 1rem;
	}
}
@media screen and (max-width: 675px) {
#searchBox {
    position: absolute;
    top: 0rem;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1;
    overflow: auto;
    margin: 0;
    border-radius: 0px;
}
.overflow-hidden{
	overflow: hidden;
}
}
@media screen and (max-width: 540px) {
.container-buscador__desktop p {
    font-size: 1rem;
    padding: 14px 6% 11px 4%;
}
.container-buscador__desktop input {
    height: 42px;
}
.container-buscador__desktop ::placeholder {
   font-size: 1rem;
}
.buscador__btn-lupa {
    margin: 0px 0px 0px -28px;
    height: 44px;
    width: 44px;
}
.result-image{
    max-width: 70px;
    max-height: 73px;
    }
 #resultList h3{
    font-size: .8rem;
    }
}

/* For small devices */
@media screen and (max-width: 340px) {
  .container {
    margin-inline: 1rem;
  }
  .nav__link {
    padding-inline: 1rem;
  }
}

.result-item {
    list-style: none;
    margin: 0.5rem 0;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
    transition: box-shadow 0.2s ease;
}

.result-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.result-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    padding: 0.75rem;
}

.result-item-image {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    margin-right: 1rem;
    flex-shrink: 0;
}

.result-info {
    flex: 1;
}

.result-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: #1a202c;
    line-height: 1.2;
    word-break: break-word;
}