/*
Theme Name:   Divi Child Theme
Description:  Child theme personalizado para Divi. Los estilos del padre se cargan via functions.php (wp_enqueue_style) en lugar de @import para mejor performance.
Author:       Oscar
Template:     Divi
Version:      2.0
*/

/* =========================================================
   TUS ESTILOS PERSONALIZADOS VAN AQUÍ
   ========================================================= */


/* ---------------------------------------------------------
   MENÚ HAMBURGUESA EN DESKTOP
   Fuerza el menú mobile (hamburguesa) en todas las pantallas
   --------------------------------------------------------- */

/* Mostrar el botón hamburguesa siempre */
#et_mobile_nav_menu,
.mobile_nav.opened,
.et_mobile_menu_active .et_mobile_nav_menu {
  display: block !important;
}

/* Ocultar la barra de navegación horizontal de desktop */
#et-top-navigation nav#top-menu-nav,
#et-top-navigation .et-cart-info {
  display: none !important;
}

/* Asegurarse que el contenedor del header deje espacio al botón */
#et-top-navigation {
  padding-right: 0 !important;
}


/* ---------------------------------------------------------
   GENERALES / TIPOGRAFÍA
   --------------------------------------------------------- */


/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */


/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */


/* ---------------------------------------------------------
   CARRUSEL DE ANUNCIOS
   Solo se aplica en mobile (máximo 425px)
   --------------------------------------------------------- */

/* MOBILE GRANDE (hasta 425px) */
@media only screen and (max-width: 425px) { 
	
	.anuncios-carrusel.whitebg .et_pb_column.et_pb_column_1_5 {
		background-color: unset !important;
	}
  
  /* Base: Estilos numéricos para anuncios */
  .anuncio-numericos .et_pb_module {
	max-height: 375px;
	min-height: 370px;
  }

  /* Variante: Anuncios cortos dentro de anuncio-numericos */
  .anuncio-numericos.cortos .et_pb_blurb {
	max-height: 300px;
	min-height: 300px;
  }
  .anuncios-carrusel .et_pb_module.et_pb_blurb {
  		min-height: 224px;
   }

  /* Contenedor del carrusel anuncio-5 */
  .anuncio-5 {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: scroll !important;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;        /* Snap obligatorio en eje X */
	-webkit-overflow-scrolling: touch;    /* Scroll suave en iOS */
	gap: 5px;
	padding: 0 16px;
	scrollbar-color: white transparent;   /* Color del scrollbar (Firefox) */
	scrollbar-width: thin;                /* Grosor del scrollbar (Firefox) */
  }

  /* Items del carrusel anuncio-5 */
  .anuncio-5-item {
	flex: 0 0 24%;
	min-width: 24%;
	max-width: 24%;
	scroll-snap-align: start;             /* Alinea el snap al inicio */
  }

  /* Contenedor del carrusel de anuncios principal */
  .anuncios-carrusel {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: scroll !important;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	gap: 16px;
	padding: 0 16px;
	scrollbar-color: white transparent;
	scrollbar-width: thin;
	width: 95%;
	max-width: 1280px;
	}
  .anuncios-carrusel .et_pb_blurb_description {
		text-align: left;
		line-height: 19px;
	}
  /* 
	 Items del carrusel de anuncios
	 Se aplica a .anuncio-item, .et_pb_column_1_6 y .et_pb_column_1_5
  */
  .anuncio-item,
  .et_pb_column.et_pb_column_1_6,
  .et_pb_column.et_pb_column_1_5 {
	flex: 0 0 80%;
	min-width: 70%;
	max-width: 70%;
	scroll-snap-align: start;
	background-color: #1a2721;           /* Verde oscuro diferenciado del contenedor #223128 */
	border-radius: 5px;
	padding: 10px;
  }

  /* Estilos específicos para .anuncio-item (con sombra) */
  .anuncio-item {
	max-height: 367px;
	min-height: 423px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  }

  /* Estilos específicos para columnas (sin sombra) */
  .anuncios-carrusel .et_pb_column.et_pb_column_1_6, .anuncios-carrusel .et_pb_column.et_pb_column_1_5 {
	max-height: 330px;                    /* Max height para columnas */
	min-height: unset;                    /* Min height para columnas */
	box-shadow: none;                     /* Sin sombra */
	padding: 20px;
	margin-bottom: unset;
	}

  /* Variante: Anuncios cortos (más pequeños en altura) */
  .cortos .anuncio-item,
  .cortos .et_pb_column.et_pb_column_1_6,
  .cortos .et_pb_column.et_pb_column_1_5 {
	max-height: 328px !important;
	min-height: 328px !important;  
  }

  /* 
	 Estilo del scrollbar para navegadores WebKit (Chrome, Safari, Edge)
	 Personaliza la aparencia del scroll horizontal
  */
  .anuncios-carrusel::-webkit-scrollbar {
	height: 6px;                          /* Altura del scrollbar */
  }

  .anuncios-carrusel::-webkit-scrollbar-track {
	background: white;                    /* Color del track (fondo) */
  }

  .anuncios-carrusel::-webkit-scrollbar-thumb {
	background-color: white;              /* Color del thumb (deslizador) */
	border-radius: 3px;
  }

  /* Reduce el gap entre items en anuncio-5 para mobile */
  .anuncio-5 {
	gap: 16px;
  }
  
  /* anuncio-5-item ocupa 70% del viewport */
  .anuncio-5-item {
	flex: 0 0 80%;
	min-width: 70%;
	max-width: 70%;
	max-height: 367px;
	min-height: 367px;
	padding: 10px;
  }
}

/* Ocultar hamburguesa y menú mobile de Divi */
#menu-footer .et_mobile_nav_menu {
	display: none !important;
}

/* Mostrar siempre el menú de escritorio */
#menu-footer .et_pb_menu__menu {
	display: block !important;
}

/* Ítems en columna, ancho completo */
#menu-footer ul.et-menu {
	display: flex !important;
	flex-direction: column;
}

#menu-footer ul.et-menu > li {
	width: 100% !important;
	display: block !important;
}

#menu-footer ul.et-menu > li > a {
	display: block;
	width: 100%;
}

@media (max-width: 980px) {
	#menu-footer.et_pb_menu--style-left_aligned .et_pb_menu__wrap {
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
	}
}
@media (max-width: 479px) {
	#menu-footer.et_pb_menu {
		margin: 0 !important;
	}
}
/* MOBILE MEDIO (hasta 375px) */
@media only screen and (max-width: 375px) {
  /* Ajusta altura de anuncios cortos */
  .cortos .anuncio-item,
  .cortos .et_pb_column.et_pb_column_1_6,
  .cortos .et_pb_column.et_pb_column_1_5 {
	max-height: 279px;
	min-height: 314px;
  }

  /* Aumenta ancho y altura en mobile medio */
  .anuncio-item,
  .et_pb_column.et_pb_column_1_6,
  .et_pb_column.et_pb_column_1_5 {
	flex: 0 0 85%;
	min-width: 70%;
	max-width: 86%;
	min-height: 423px;
  }
}

/* MOBILE PEQUEÑO (hasta 320px) */
@media only screen and (max-width: 320px) {
  /* Ajusta altura de anuncios cortos en mobile muy pequeño */
  .cortos .anuncio-item,
  .cortos .et_pb_column.et_pb_column_1_6,
  .cortos .et_pb_column.et_pb_column_1_5 {
	max-height: 279px;
	min-height: 355px;
  }

  /* Reajusta dimensiones para pantallas muy pequeñas */
  .anuncio-item,
  .et_pb_column.et_pb_column_1_6,
  .et_pb_column.et_pb_column_1_5 {
	flex: 0 0 85%;
	min-width: 70%;
	max-width: 86%;
	max-height: 367px;
	min-height: 423px;
  }
}