@charset "utf-8";

/* Esp 1200-1300 */
@media only screen and (min-width: 1200px) and (max-width: 1299px) {
	.menuion .navbar-nav > li > a.nav-link	{ padding:0 10px !important; }
}
/* Esp 1200-1300 */
@media only screen and (min-width: 1600px) {
	.menuion .navbar-collapse									{ margin-top: -1px; }
}

@media only screen and (min-width: 1400px) {
	.dN1400								{ display:none; }
	.menuion .navbar-nav > li > a.nav-link	{ padding:0 25px !important; }
	.menuion .navbar-nav > li > .cot_menu_abrir.nav-link	{ padding:0 25px !important; }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
	.dN1200								{ display:none; }

	#wowslider-container1 .ws-title			{ top:30% !important; width:60% !important; left:10% !important; padding:3% !important; }
	#wowslider-container1 .ws-title div  	{ font-size:30px !important; margin:10px 0 0 15% !important; width:85%; }
	#wowslider-container1 .ws-title span 	{ font-size:100px !important; width:100%; }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.dN992								{ display:none !important; }

	.iconFlot 							{ left:0; top:30%; width:50%; }

	#wowslider-container1 .ws-title			{ top:30% !important; width:70% !important;left:10% !important; padding:3% !important; }
	#wowslider-container1 .ws-title div  	{ font-size:28px !important; margin:10px 0 0 10% !important; width:80%; }
	#wowslider-container1 .ws-title span 	{ font-size:90px !important; width:100%; }

}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.dN768								{ display:none; }
	.iconFlot 							{ left:0; top:30%; width:75%; }

	#wowslider-container1 .ws-title			{ top:50% !important; width:70% !important; left:10% !important; padding:0; }
	#wowslider-container1 .ws-title div  	{ font-size:24px !important; margin:10px 0 0 0 !important; width:100%; }
	#wowslider-container1 .ws-title span 	{ font-size:80px !important; width:100%; }

}
@media only screen and (min-width: 576px) and (max-width: 767px) {
	.dN576								{ display:none; }
	.iconFlot 							{ left:0; top:40%; width:80%; }

	#wowslider-container1 .ws-title			{ top:50% !important; width:80% !important; left:10% !important; padding:0; }
	#wowslider-container1 .ws-title div  	{ font-size:22px !important; margin:10px 0 0 0 !important; width:100%; }
	#wowslider-container1 .ws-title span 	{ font-size:60px !important; width:100%; }

	/* Ajustar tamaño de fuente en tarjetas de productos */
	.production .t20 {
		font-size: 18px !important;
	}

	.production .pLR30 {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

}
@media only screen and (max-width: 575px) {
	.dN320								{ display:none; }
	.iconFlot 							{ left:0; top:50%; width:90%; }

	#wowslider-container1 .ws-title			{ top:50% !important; width:80% !important; left:10% !important; padding:0; }
	#wowslider-container1 .ws-title div  	{ font-size:20px !important; margin:10px 0 0 0 !important; width:100%; }
	#wowslider-container1 .ws-title span 	{ font-size:50px !important; width:100%; }

	/* Ajustar tamaño de fuente en tarjetas de productos */
	.production .t20 {
		font-size: 16px !important;
	}

	.production .t18 {
		font-size: 14px !important;
	}

	.production .t24 {
		font-size: 20px !important;
	}

	.production .pLR30 {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

}


/* BOOTSTRAP */

@media screen and (min-width: 992px) {

	.dN_oPC 							{ display:none !important; }
	.tabIn_oPC 							{ display:table-cell !important; vertical-align:middle; }

	.menuion													{ height:80px; position:relative; }
	.menuion .navbar-brand										{ padding:0; }
	.menuion .navbar											{ background:transparent !important; margin:0 !important; padding:0 !important; }
	.menuion .navbar-nav > li									{ height:80px; background-color:transparent; vertical-align:middle; display:table; text-align:center; margin:0; padding: 0; }
	.menuion .navbar-nav > li > a.nav-link						{ padding:0 15px; color:#666; display:table-cell; vertical-align:middle; text-transform:uppercase; border-left:1px solid #eee; border-bottom:4px solid #fff; border-top:4px solid #fff; }
	.menuion .navbar-nav > li > a.selection						{ border-bottom-color:#00b33f !important; color:#333 !important; }
	.menuion .navbar-nav > li > a.nav-link:visited,
	.menuion .navbar-nav > li > a.nav-link:active,
	.menuion .navbar-nav > li > a.nav-link:focus				{ color:#666 !important; background:#fff; border-top-color:#fff; border-bottom-color:#fff; }
	.menuion .navbar-nav > li > a.nav-link:hover				{ color:#333 !important; background:#effff5; border-top-color:#effff9; border-bottom-color:#effff9; }
	.menuion .navbar-nav > li > a.selection:visited,
	.menuion .navbar-nav > li > a.selection:active,
	.menuion .navbar-nav > li > a.selection:hover,
	.menuion .navbar-nav > li > a.selection:focus 				{ color:#666 !important; background:#fff !important; border-top-color:#fff !important; }

	.menuion .navbar-nav > li > a.mContacto						{ background:#fff !important; border-top:0 !important;  border-bottom:0 !important; }
	.menuion .navbar-nav > li > a.mContacto span				{ padding:9px 20px 10px; border-radius:10px; background:#00b33f !important; color:#fff !important; }
	.menuion .navbar-nav > li > a.mContacto span:hover			{ background:#019d38 !important; }


	/* Botón de WhatsApp en desktop */
	.menuion .navbar-nav > li > a.mTelefono {
		border: 0 !important;
		padding: 10px 20px !important;
		background: transparent !important;
		color: #666 !important;
		font-weight: 400 !important;
		transition: all 0.3s ease;
		text-decoration: none !important;
	}

	.menuion .navbar-nav > li > a.mTelefono:hover {
		background: rgba(37, 211, 102, 0.08) !important;
		color: #25D366 !important;
	}

	.menuion .navbar-nav > li > a.mTelefono i {
		color: #25D366 !important;
		margin-right: 8px;
		font-size: 18px;
		transition: all 0.3s ease;
	}

	.menuion .navbar-nav > li > a.mTelefono:hover i {
		transform: scale(1.1);
	}

	/* Botón del cotizador en desktop */
	.menuion .navbar-nav > li.cot-btn-desktop					{ height:80px; }
	.menuion .navbar-nav > li > .cot_menu_abrir.nav-link		{ color:#666; text-transform:uppercase; border-left:1px solid #eee; border-bottom:4px solid #fff; border-top:4px solid #fff; }
	.menuion .navbar-nav > li > .cot_menu_abrir.nav-link:hover	{ color:#333 !important; background:#effff5; border-top-color:#effff9; border-bottom-color:#effff9; }

	/**/
}

.mEs1 					{ margin-top: -120px; }
.mEs2 					{ bottom: -20%; }
.mEs3 					{ margin-top: -270px; }
.mEs4 					{ margin-left: -100px; }
.mEs5 					{ margin-bottom: -120px; }
.mEs6 					{ margin-top: -80px; }
.mEs7 					{ margin-bottom: -100px; }
.mEs8 					{ margin-top: -85px; }


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

	.mEs1 					{ margin-top: -20px; }
	.mEs2 					{ bottom: -10%; }
	.mEs3 					{ margin-top: -150px; }
	.mEs4 					{ margin-left: 0; }
	.mEs5 					{ margin-bottom: -50px; }
	.mEs6 					{ margin-top: -30px; }
	.mEs7 					{ margin-bottom: -40px; }
	.mEs8 					{ margin-top: -40px; }

	.dN_oS								{ display:none; }

	.navbar-header						{ padding:0; margin:0; border:0; }

	/* Botón hamburguesa con animación a X */
	.menuion .navbar-toggler {
		background-color: transparent;
		border: none;
		padding: 8px;
		border-radius: 8px;
		margin: 0;
		outline: none !important;
		transition: all 0.3s ease;
		position: relative;
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.menuion .navbar-toggler:hover {
		background-color: rgba(0,179,63,0.1);
		transform: scale(1.05);
	}

	/* Contenedor del icono hamburguesa */
	.menuion .navbar-toggler .hamburger-icon {
		width: 20px;
		height: 14px;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	/* Las 3 líneas del hamburguesa */
	.menuion .navbar-toggler .hamburger-icon span {
		display: block;
		height: 2px;
		width: 100%;
		background-color: #666;
		border-radius: 2px;
		transition: all 0.3s ease;
		transform-origin: center;
	}

	/* Hover - cambiar color a verde */
	.menuion .navbar-toggler:hover .hamburger-icon span {
		background-color: #00b33f;
	}

	/* Cuando el menú está abierto - fondo verde */
	.menuion .navbar-toggler[aria-expanded="true"] {
		background-color: #00b33f;
	}

	/* Transformar a X cuando está abierto */
	.menuion .navbar-toggler[aria-expanded="true"] .hamburger-icon span {
		background-color: #fff;
	}

	/* Línea superior se rota 45° y se mueve al centro */
	.menuion .navbar-toggler[aria-expanded="true"] .hamburger-icon span:nth-child(1) {
		transform: translateY(6px) rotate(45deg);
	}

	/* Línea del medio se oculta */
	.menuion .navbar-toggler[aria-expanded="true"] .hamburger-icon span:nth-child(2) {
		opacity: 0;
		transform: scale(0);
	}

	/* Línea inferior se rota -45° y se mueve al centro */
	.menuion .navbar-toggler[aria-expanded="true"] .hamburger-icon span:nth-child(3) {
		transform: translateY(-6px) rotate(-45deg);
	}

	.menuion .navbar-brand				{ padding:0;width:60%; }

	/* Menú colapsable mejorado - separado del header */
	.menuion .navbar-collapse			{
		padding: 0;
		background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
		border-radius: 15px;
		box-shadow: 0 10px 40px rgba(0,0,0,0.15);
		margin: 20px 5px 15px;
		overflow: hidden;
		animation: slideDown 0.4s ease-out;
		position: relative;
		border: 2px solid rgba(0,179,63,0.1);
	}

	/* Efecto de separación del header */
	.menuion .navbar-collapse::before {
		content: '';
		position: absolute;
		top: -10px;
		left: 50%;
		transform: translateX(-50%);
		width: 40px;
		height: 4px;
		background: linear-gradient(90deg, transparent, #00b33f, transparent);
		border-radius: 2px;
	}

	@keyframes slideDown {
		from {
			opacity: 0;
			transform: translateY(-20px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.menuion .navbar-nav				{
		background-color:transparent;
		margin:0;
		border:0;
		width:100%;
		padding:10px 0;
	}

	.menuion .logo						{ height:80px; }

	/* Items del menú con animación */
	.menuion .navbar-nav > li			{
		background-color:transparent;
		display:block !important;
		width:100% !important;
		border-left: 0;
		transition: all 0.3s ease;
		animation: fadeInLeft 0.5s ease forwards;
		opacity: 0;
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	/* Item activo/seleccionado en móvil */
	.menuion .navbar-nav > li.active,
	.menuion .navbar-nav > li > a.selection {
		background-color: rgba(0,179,63,0.1) !important;
	}

	/* Animación escalonada para cada item */
	.menuion .navbar-nav > li:nth-child(1) { animation-delay: 0.1s; }
	.menuion .navbar-nav > li:nth-child(2) { animation-delay: 0.15s; }
	.menuion .navbar-nav > li:nth-child(3) { animation-delay: 0.2s; }
	.menuion .navbar-nav > li:nth-child(4) { animation-delay: 0.25s; }
	.menuion .navbar-nav > li:nth-child(5) { animation-delay: 0.3s; }
	.menuion .navbar-nav > li:nth-child(6) { animation-delay: 0.35s; }

	@keyframes fadeInLeft {
		from {
			opacity: 0;
			transform: translateX(-20px);
		}
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}

	.menuion .navbar-nav > li:hover		{
		background-color: rgba(0,179,63,0.05);
	}

	/* Link con clase selection (página activa) */
	.menuion .navbar-nav > li > a.selection {
		background-color: rgba(0,179,63,0.1);
		color: #00b33f !important;
		font-weight: 700;
		border-left: 4px solid #00b33f !important;
	}

	.menuion .navbar-nav > li > a		{
		padding:12px 20px !important;
		color:#333 !important;
		display:block !important;
		width:100% !important;
		text-align:left;
		text-transform:uppercase;
		font-weight: 600;
		font-size: 14px;
		letter-spacing: 0.5px;
		border-bottom:1px solid rgba(0,0,0,0.05);
		border-left: 0 !important;
		transition: all 0.3s ease;
		box-sizing: border-box;
		margin: 0;
	}

	.menuion .navbar-nav > li > a:hover	{
		background-color: rgba(0,179,63,0.05);
		color: #00b33f !important;
		padding-left: 24px !important;
	}

	/* Estilos para el botón de Inicio en móvil */
	.menuion .navbar-nav > li > a i.fa-home {
		margin-right: 10px;
		font-size: 16px;
		display: inline-block;
	}

	/* Agregar iconos a los links en móvil */
	.menuion .navbar-nav > li > a::before {
		content: "";
		display: none;
	}

	/* Botón de contacto especial en móvil */
	.menuion .navbar-nav > li > a.mContacto {
		background: linear-gradient(135deg, #00b33f 0%, #019d38 100%) !important;
		color: #fff !important;
		border-radius: 10px;
		margin: 10px 15px;
		padding: 12px 20px !important;
		text-align: center;
		box-shadow: 0 4px 15px rgba(0,179,63,0.3);
		border: none !important;
		border-left: none !important;
		display: block !important;
		width: auto !important;
	}

	.menuion .navbar-nav > li > a.mContacto span {
		display: inline-block;
		padding: 0;
		margin: 0;
	}

	.menuion .navbar-nav > li > a.mContacto:hover {
		transform: translateY(-2px);
		box-shadow: 0 6px 20px rgba(0,179,63,0.4);
		padding: 12px 20px !important;
	}

	.menuion .navbar-nav > li > a.mContacto::before {
		display: none !important;
	}

	.menuion .navbar-nav > li > a.mContacto::before {
		display: none;
	}

	/* Cuando contacto está activo/seleccionado */
	.menuion .navbar-nav > li > a.mContacto.selection {
		background: linear-gradient(135deg, #019d38 0%, #017a2e 100%) !important;
		box-shadow: 0 6px 20px rgba(0,179,63,0.5);
		transform: translateY(-2px);
	}

	/* Botón de búsqueda rediseñado en móvil */
	.menuion .navbar-nav > li > a.taC_oS {
		background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
		border: 2px solid #dee2e6 !important;
		border-radius: 12px !important;
		margin: 10px 15px !important;
		padding: 14px 20px !important;
		text-align: left !important;
		display: flex !important;
		align-items: center;
		justify-content: flex-start !important;
		font-weight: 600 !important;
		color: #495057 !important;
		text-transform: none !important;
		letter-spacing: normal !important;
		box-shadow: 0 2px 8px rgba(0,0,0,0.08);
		transition: all 0.3s ease;
		border-left: 2px solid #dee2e6 !important;
		border-bottom: 2px solid #dee2e6 !important;
		width: auto !important;
		box-sizing: border-box;
	}

	.menuion .navbar-nav > li > a.taC_oS:hover {
		background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%) !important;
		border: 2px solid #00b33f !important;
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(0,179,63,0.15);
		padding: 14px 20px !important;
	}

	.menuion .navbar-nav > li > a.taC_oS i {
		color: #00b33f;
		font-size: 18px;
		margin-right: 12px;
		min-width: 20px;
		text-align: center;
	}

	.menuion .navbar-nav > li > a.taC_oS::before {
		display: none !important;
	}

	.menuion .navbar-nav > li > a i {
		margin-right: 10px;
		font-size: 16px;
		min-width: 20px;
		text-align: center;
	}

	/* Segundo navbar (búsqueda) */
	.menuion .navbar-nav.t20 {
		border-top: 2px solid rgba(0,179,63,0.1);
		padding: 10px 0 10px 0 !important;
		margin: 0;
	}

	/* Botón de WhatsApp en móvil */
	.menuion .navbar-nav > li > a.mTelefono {
		background: rgba(37, 211, 102, 0.08) !important;
		border-radius: 10px;
		margin: 5px 15px 0 15px;
		padding: 14px 20px !important;
		border: 2px solid rgba(37, 211, 102, 0.2) !important;
		border-left: 2px solid rgba(37, 211, 102, 0.2) !important;
		display: block !important;
		width: auto !important;
		text-align: center !important;
		color: #333 !important;
		font-weight: 600 !important;
		transition: all 0.3s ease;
		text-decoration: none !important;
		box-sizing: border-box;
	}

	.menuion .navbar-nav > li > a.mTelefono:hover {
		background: rgba(37, 211, 102, 0.15) !important;
		border-color: #25D366 !important;
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(37, 211, 102, 0.2);
		color: #25D366 !important;
	}

	.menuion .navbar-nav > li > a.mTelefono i {
		color: #25D366 !important;
		margin-right: 10px;
		font-size: 20px;
		transition: all 0.3s ease;
	}

	.menuion .navbar-nav > li > a.mTelefono:hover i {
		transform: scale(1.15);
	}

	.menuion .navbar-nav > li > a.mTelefono::before {
		display: none !important;
	}

	/* Ocultar botón del cotizador en el menú móvil desplegable */
	.menuion .navbar-collapse .cot-btn-desktop {
		display: none !important;
	}

	.ws_next, .ws_prev  				{ display:none; }


}