/*=============================================
TOP
=============================================*/

#top ul{
	padding-top:8px;
}

#top ul li{
	display:inline;
	line-height:30px;
	margin:5px 5px;
	color:rgb(247, 243, 243);
}

.social ul li a i{
	font-size:20px;
	margin:50 5px;
}

.registro ul{
	font-family: 'Playfair Display', serif;
    font-size: 10px;          
    font-weight: 600;                        
    letter-spacing: 0.5px;     
    text-transform: uppercase;
	margin-left: 55px; 
}

/*=============================================
HEADER   
=============================================*/
header {
  background:whitesmoke;
  margin-bottom: 0;
  padding: 0px 0px;
  position: relative;
  overflow: visible;
  z-index: 100;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2); 
}


header #btnCategorias {
	margin: 70px 0;
  background-color:#2a5498;
}

header #btnCategorias p {
	line-height: 40px;
	margin-bottom: 0px;
}

header #btnCategorias p span {
	cursor: pointer;
}

header #buscador {
    margin: 70px 0;
    display: flex;
    align-items: center;
    gap: 0px; 
}

header #buscador input {
    flex: 14px; 
    padding: 19.7px;
    border-radius: 0;
   border: 1px solid black;

}

header #buscador button {
    padding: 9.5px;
    background-color: #2a5498;
    border: 1px solid #2a5498;
    border-radius: 1px;
    width: 40px; 
}
/*=================================
CARRITO
======================*/
header #carrito {
  margin: 68px 0;
  display: flex;
  align-items: stretch;
  gap: 0;
}
header #carrito button {
  font-size: 13px;
  line-height: 1.2;
  padding: 8px 15px;   
  min-height: 45px;    
  box-sizing: border-box;
  display: inline-block;
  background-color: #2a5498;
  color: #fff;
  border: none;
  border-radius: 6px 0 0 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  border-right: none;
  white-space: normal; 
}

header #carrito p {
  font-size: 13px;
  line-height: 1.2;
  padding: 6px 12px;
  min-height: 42px;    
  box-sizing: border-box;
  display: inline-block;
  white-space: normal;
  margin: 0;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-left: none;
  border-radius: 0 6px 6px 0;
  color: #333;
}
header #carrito button {
  background-color: #2a5498;
  color: #fff;
  border: none;
  border-radius: 6px 0 0 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  border-right: none; 
}

header #carrito button:hover {
  background-color: #2a5498;
}

header #carrito p {
  margin: 0;
  background-color: #f5f5f5;
  border: 1px solid black;
  border-left: none;
  border-radius: 0 6px 6px 0;
  color: #333;
}
/*=============================================
CATEGORÍAS 
=============================================*/
#categorias {
	display: none;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	background-color: gainsboro;
	border: 1px solid #ccc;
	padding: 20px;
	box-sizing: border-box;
	position: absolute; 
	top: 100%;          
	left: 0;
	right: 0;
	z-index: 2000; 
  font-family: 'Playfair Display', serif;
}
#categorias.activo {
	display: flex;
}

.menu-categorias {
	display: flex;
	width: 100%;
	position: relative;
	z-index: 1;
}

/*==============================
LISTA PRINCIPAL DE CATEGORÍAS 
================================*/
.lista-categorias {
	list-style: none;
	width: 250px;
	margin: 0;
	padding: 0;
	border-right: 1px solid #ddd;
}

.item-categoria {
	position: relative;
	cursor: pointer;
	padding: 0;
	background-color: transparent;
	border: none;
	box-shadow: none;
	border-radius: 0;
}

.item-categoria:hover {
	background-color: transparent;
	box-shadow: none;
	transform: none;
}

.item-categoria > a {
  display: block;
  padding: 12px 18px;
  color: #2f3e89 !important;
  text-decoration: none;
  font-weight: 700; 
  font-size: 16px; 
  letter-spacing: 0.5px; 
  border-radius: 6px;
  background-color: transparent;
  transition: all 0.3s ease;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); 
}

/* Efecto al pasar el mouse */
.item-categoria > a:hover {
  color:red !important; 
  background-color: rgba(47, 62, 137, 0.1); 
  transform: scale(1.03); 
}


/*======================
SUBCATEGORÍAS 
======================*/
.submenu {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  width: 800px;
  background: #ffffff;
  border: 1px solid #ddd;
  border-left: 4px solid #2f3e89; /* ← Línea de separación */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  padding: 20px;
  border-radius: 0 10px 10px 0; /* Redondeado solo en la derecha */
  z-index: 9999;
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}


.item-categoria:hover .submenu {
  display: block;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/*===========================
LISTADO DEL SUBMENÚ
===========================*/
.submenu ul {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.submenu ul li {
  width: calc(33.33% - 12px);
}

.submenu ul li a {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  border-radius: 6px;
  color: #666 !important; 
  font-weight: 600; 
  font-size: 14px;
  background: transparent;
  transition: all 0.3s ease;
}

.submenu ul li a:hover {
  background: rgba(47, 62, 137, 0.08); 
  color: red !important; 
  transform: translateX(3px); 
}



/*=============================================
VENTANAS MODALES
=============================================*/

.modalTitulo{
	padding:5px 0px;
}

.modalTitulo h3{
	text-align:center;
	margin-top:-5px;
	padding:15px 0px;
	border-radius:5px 5px 0px 0px;
}

.modalFormulario .close{
	position:absolute;
	right:27px;
	top:15px;
	color:white;
}

.modalFormulario .facebook, .modalFormulario .google{
	cursor:pointer;
}

.modalFormulario .facebook p{
	background:#46639f;
}

.modalFormulario .google p{
	background:#d6513e;
}

.modalFormulario .facebook p, .modalFormulario .google p{
	color:white;
	text-align:center;
	line-height:40px;
	padding:8px;
	font-size:18px;
	margin-top:10px;
	margin-bottom:20px;
}

.modalFormulario p i{
	margin-left:-25px;
	margin-right:25px;
	font-size:25px;	
}

.modalFormulario form{
	padding:20px;
}

.modalFormulario form hr{
	border:1px solid #eee;
}

.modalFormulario form input[type="text"], .modalFormulario form input[type="email"], .modalFormulario form input[type="password"]{
	padding:25px;
}
.modalFormulario form input[type="submit"]{
	padding:15px;
}

.modalFormulario form .checkBox{
	margin-top:10px;
}

/*=============================================
ESCRITORIO GRANDE (LG revisamos en 1366px en adelante)
=============================================*/

@media (min-width:1200px){

	/*=============================================
	HEADER
	=============================================*/

	#logotipo {
    margin-left: -80px; /*LOGOTIPO*/
}

	#logotipo img {
		width: 140px;
		height: auto;
	}

	header #carrito{
		padding-left:100px;
	}

	.modalFormulario .facebook p{
		margin-right:-15px;
	}

}
/*=============================================
ESCRITORIO MEDIANO O TABLET HORIZONTAL (MD revisamos en 1024px)
=============================================*/
@media (max-width:1199px) and (min-width:992px){

	/*=============================================
	HEADER
	=============================================*/
	header #logotipo img {
		width: 130px;
		height: auto;
		float: left;
		padding: 20px 0;
	}

	header #carrito{
		padding-left:70px;
	}

	.modalFormulario .facebook p{
		margin-right:-15px;
	}

	/*=============================================
SUBMENUS (Tablet horizontal 992px - 1199px)
=============================================*/
.submenu {
	display: none;
	position: absolute;
	top: 0;
	left: 100%;
	width: 800px;
	background: #ffffff;
	border: 1px solid #ddd;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
	padding: 20px;
	border-radius: 10px;
	z-index: 9999;
	transition: opacity 0.3s ease, transform 0.3s ease;
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
}

.item-categoria:hover .submenu,
.item-categoria:focus-within .submenu {
	display: block;
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.submenu ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.submenu ul li {
	width: calc(33.33% - 10px);
}

.submenu ul li a {
	display: block;
	padding: 6px 10px;
	color: #333;
	text-decoration: none;
	border-radius: 6px;
	transition: background 0.3s ease, color 0.3s ease;
	white-space: normal;
	word-break: break-word;
}

.submenu ul li a:hover {
	background: grey;
	color: #d40000;
}

}


/*=============================================
TABLET HORIZONTAL Y ABAJO (revisamos en 1024px)
=============================================*/
@media (max-width:1024px){

	.submenu {
		left: 100%;
		width: 100%;
		top: 0;
	}

	.submenu ul li {
		width: 100%; 
	}

	.submenu ul li a {
		white-space: normal;
		word-break: break-word;
	}
}

@media (max-width: 991px) and (min-width: 768px) {

  /*=============================================
  HEADER GENERAL
  =============================================*/
  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    flex-wrap: wrap;
  }

  /*=============================================
  LOGOTIPO
  =============================================*/
  #logotipo {
    margin-left: 0;
    flex: 0 0 auto;
  }

  #logotipo img {
    width: 100px;
    height: auto;
  }

  /*=============================================
  BOTÓN CATEGORÍAS
  =============================================*/
  #btnCategorias {
    padding: 0 9px;
    font-size: 11px;
    height: 40px;
    border-radius: 0px;
    margin: 0 8px;
    white-space: nowrap;
    color: white;
    cursor: pointer;
  }

  /*=============================================
  BUSCADOR
  =============================================*/
  #buscador {
    display: flex;
    max-width: 200px;
    flex: 1 1 auto;
    margin-right: 12px;
  }

  #buscador input {
    padding: 0 10px;
    font-size: 11px;
    height: 36px;
    border: 1px solid #ccc;
    border-radius: 4px 0 0 4px;
    box-sizing: border-box;
    flex: 1;
  }

  #buscador button {
    padding: 0 10px;
    font-size: 11px;
    height: 40px;
    border: 1px solid #ccc;
    border-left: none;
    background-color: black;
    color: white;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
  }

  /*=============================================
  CARRITO
  =============================================*/
 #carrito {
  display: flex;
  align-items: center;
  height: 40px; /* asegura que todo se alinee */
}

#carrito button,
#carrito p {
  height: 40px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  font-size: 12px;
  padding: 0 10px;
}

/* Estilos específicos para cada uno */
#carrito button {
  border-radius: 6px 0 0 6px;
  background-color: black;
  color: white;
  border: none;
  cursor: pointer;
}

#carrito p {
  font-size: 10px;
  border-radius: 0 6px 6px 0;
  margin: 0;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-left: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}

  /*=============================================
  MODAL FORMULARIO
  =============================================*/
  .modalFormulario .facebook p {
    margin-right: -15px;
  }

  /*=============================================
  SUBMENUS
  =============================================*/
  .submenu {
    left: 100%;
    width: 100%;
    top: 0;
  }

  .submenu ul li {
    width: 100%;
  }

  .submenu ul li a {
    white-space: normal;
    word-break: break-word;
  }
}

/*========================
MOVIL
========================*/
@media (max-width:767px) {
  
  /*=============================================
  TOP
  =============================================*/
  #top ul {
    text-align: center;
  }

  #top #registro {
    border-top: 1px solid #222;
  }

  /*=============================================
  HEADER
  =============================================*/
  header #logotipo {
    width: 100%;
    text-align: center;
    margin: 0 auto;
  }

  header #logotipo img {  
    padding: 20px 0 10px 0;
    display: block;
    margin: 0 auto;
    max-width: 70%;
    height: auto;
    float: none !important;
  }
/*========================================
  Contenedor de categorías + buscador
  =======================================*/ 
  header .col-lg-6.col-md-6.col-sm-8.col-xs-12 {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100% !important;
    margin: 5px auto !important;
    padding: 0 10px;
    gap: 0; 
    flex-wrap: nowrap;
  }
  /*==========================
  Botón Categorías 
  ==========================*/ 
  header #btnCategorias {
    margin: 0;
    padding: 6px 10.1px;
    flex: 0 0 auto;
    max-width: 130px;
    border-radius: 1px 0 0 px;
    text-align: center;
    white-space: nowrap;
    color: white;
    cursor: pointer;
  }

  header #btnCategorias p {
    line-height: normal;
    margin: 0;
    font-size: 14px;
  }

  header #btnCategorias p span {
    margin-left: 7px;
  }
 /*============================
  Buscador 
  ===========================*/
header #buscador {
  flex: 1 1 auto;
  margin: 0;
  display: flex;
  align-items: center;   
  max-width: 160px; 
}

header #buscador input {
  flex: 1;
  padding: 4px 5px;
  font-size: 11px;
  border-radius: 0 1px 1px 0;
  border: 1px solid black;
  border-left: none;
  height: 29px;
}

header #buscador button {
  padding: 3px 8px;
  font-size: 11px;
  border: 0.8px solid  #2a5498;
  border-left: none;
  border-radius: 0 4px 4px 0;
  background-color: bl;
  color: white;
  cursor: pointer;
  height: 29px;
}
 /*============ 
 Carrito 
 ==============*/
header #carrito {
  width: 100%;
  margin: 10px auto;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: stretch; 
}

header #carrito button {
  font-size: 13px;
  line-height: 1.2;
  padding: 8px 15px;
  min-height: 44px;
  box-sizing: border-box;
  display: inline-block;
  background-color: #2a5498;
  color: #fff;
  border: none;
  border-radius: 6px 0 0 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  border-right: none;
  white-space: normal;
}

header #carrito p {
  font-size: 13px;
  line-height: 1.2;
  padding: 6px 12px;
  min-height: 42px;
  box-sizing: border-box;
  display: inline-block;
  white-space: normal;
  margin: 0;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-left: none;
  border-radius: 0 6px 6px 0;
  color: #333;
}
@media (max-width: 767px) {
  .item-categoria {
    position: relative;
  }

  .submenu {
    position: absolute;
    top: 0;
    left: 100%; 
    width: 200px; 
    background: #f9f9f9;
    border: 1px solid #ddd;
    padding: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    display: none;
    z-index: 9999;
  }

  .submenu ul {
    display: flex;
    flex-direction: column;
    gap: 5px;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .submenu ul li a {
    display: block;
    padding: 8px 10px;
    background-color: transparent;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease;
  }

  .submenu ul li a:hover {
    background-color: transparent;
  }

  /*================================ 
  Mostrar submenu cuando pasas 
  ====================================*/
  .item-categoria:hover .submenu,
  .item-categoria:focus-within .submenu {
    display: block;
  }
}
 /*===========================
 Reduce margen general
 ============================= */
  header #btnCategorias,
  header #buscador {
    margin: 0 !important;
  }

  header #buscador input::placeholder {
    font-size: 12px;
  }

  .modalFormulario .google p {
    margin-top: -15px;
  }
}
/*========================
CELULARES MUY CHICOS (RESPONSIVO)
========================*/
@media (max-width: 480px) {

  /* Logo más pequeño */
  header #logotipo img {  
    max-width: 50%;
    padding: 10px 0;
  }

  /* Contenedor principal: stack en columna */
  header .col-lg-6.col-md-6.col-sm-8.col-xs-12 {
    flex-direction: column; 
    align-items: center;
    gap: 8px;
    width: 100%;
  }

  /* Botón Categorías */
  header #btnCategorias {
    width: 90%;
    max-width: none;
    text-align: center;
    font-size: 12px;
    padding: 6px 0;
  }

  /* Buscador ocupa toda la fila */
  header #buscador {
    width: 90%;
    max-width: none;
    margin: 0 auto;
  }

  header #buscador input {
    font-size: 12px;
    height: 32px;
  }

  header #buscador button {
    font-size: 12px;
    height: 32px;
  }

  /* Carrito debajo, centrado */
  header #carrito {
    flex-direction: column;
    width: 90%;
    margin: 5px auto;
    gap: 5px;
  }

  header #carrito button,
  header #carrito p {
    width: 100%;
    font-size: 12px;
    min-height: 34px;
    padding: 6px;
    box-sizing: border-box;
  }

  /* Submenú más angosto */
  .submenu {
    width: 140px;
    left: 100%; /* sigue hacia la derecha */
  }

  .submenu ul li a {
    font-size: 12px;
  }
}