@charset "utf-8";

/* GENERAL */
*									{ margin:0; border:0; padding:0; outline:none; text-decoration:none; word-break:break-strict; }
img									{ max-width:100%; }
body								{ font-family: 'Titillium Web', sans-serif; font-weight:400; font-size:14px; line-height:1em; position:relative; }
a:hover, a:focus					{ text-decoration:none; outline:none; }
a									{ outline:none !important; }

.ff0								{ font-family: 'Titillium Web', sans-serif; font-weight:300; }
.ff1								{ font-family: 'Titillium Web', sans-serif; font-weight:400; }
.ff2								{ font-family: 'Titillium Web', sans-serif; font-weight:600; }
.ff3								{ font-family: 'Titillium Web', sans-serif; font-weight:700; }
.ff4								{ font-family: 'Titillium Web', sans-serif; font-weight:900; }
.ffX								{ font-family: 'Hind', sans-serif; font-weight:700; }
.rrss								{ font-family: 'rrss', sans-serif; font-weight:400; }

/* ESTRUCTURA */
.ionix								{ width:100%; max-width:2560px; min-width:320px; height:auto; position:relative; margin:0 auto;}
.generalMin							{ width:90%; max-width:1000px; min-width:320px; height:auto; position:relative; margin:0 auto; }
.general							{ width:90%; max-width:1600px; min-width:320px; height:auto; position:relative; margin:0 auto; }
.generalMax							{ width:96%; max-width:1920px; min-width:320px; height:auto; position:relative; margin:0 auto; }
.allion								{ height:auto; position:relative; }

/* ZONAS */

#wowslider-container1 .ws-title			{ position:absolute; top:35% !important; width:50% !important; height:auto !important; bottom:auto !important; left:10% !important; z-index:50; color:#fff; padding:3% !important; opacity:1; background-color:rgba(65, 109, 137, 0.5) }
#wowslider-container1 .ws-title div,
#wowslider-container1 .ws-title span 	{ display:block; font-family: 'Hind', sans-serif; border:0 !important; color:#fff !important; background-color:transparent !important; }
#wowslider-container1 .ws-title div  	{ font-size:30px !important; line-height:0.9em !important; padding:0 !important; font-weight:600 !important; margin:10px 0 0 30% !important; width:80%;  font-family: 'Titillium Web', sans-serif; }
#wowslider-container1 .ws-title span 	{ font-size:120px !important; line-height:0.8em !important; padding:0 !important; font-weight:700 !important; margin:0 !important; width:100%; }


.p1040								{ padding:10px 40px 15px; }
.max250 							{ max-width:250px; }
.max350 							{ max-width:350px; }
.h180 								{ height:180px; }
.bRS1 								{ border-right:1px solid #ccc; }
label 								{ margin-bottom:0; }

.let                                { letter-spacing: 0.3em; }

.iconFlot 							{ left:0; top:30%; max-width:35%; }

.production 						{}
.production .bVerdeT,
.production .bVerde					{ opacity:0; }
.production:hover .bVerdeT,
.production:hover .bVerde			{ opacity:1; }
.production:hover					{ z-index:5; }
.production:hover .productionIn		{ -webkit-box-shadow: 0 5px 10px 1px rgba(0,0,0,0.3); box-shadow: 0 5px 10px 1px rgba(0,0,0,0.3); }
.production:hover .h200				{ height:230px; }

.categorion 						{ }
.categorion .capa2 .tabIn 			{ vertical-align:top; }
.categorion .capa1 .tabIn 			{ vertical-align:bottom; }
.categorion .capa2 					{ opacity:0; }
.categorion .capa1 					{ opacity:1; }
.categorion:hover .capa2 			{ opacity:1; }
.categorion:hover .capa1 			{ opacity:0; }

.colorVerde 						{ color:#00b33f; }
.colorAmarillo 						{ color:#efdf70; }
.colorNaranja 						{ color:#ca7c42; }
.colorRojo 							{ color:#fc476e; }
.colorAzul							{ color:#244253; }
.colorAzul2							{ color:#2eade2; }

.bVerde 							{ background-color:#00b33f; }
.bAmarillo 							{ background-color:#efdf70; }
.bNaranja 							{ background-color:#ca7c42; }
.bRojo 								{ background-color:#fc476e; }
.bAzul 								{ background-color:#244253; }
.bAzul2 							{ background-color:#2eade2; }


.bVerdeGrad 						{
	background: #3b3b3b; /* Old browsers */
	background: -moz-linear-gradient(45deg,  #3b3b3b 50%, #3b3b3b 50%, #20713d 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg,  #3b3b3b 50%,#3b3b3b 50%,#20713d 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg,  #3b3b3b 50%,#3b3b3b 50%,#20713d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b3b3b', endColorstr='#20713d',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.bC666 								{ border-color:#666; }
.bCAmarillo 						{ border-color:#efdf70; }

.bShadow 							{ -webkit-box-shadow: 0 0 15px 1px rgba(0,0,0,0.3); box-shadow: 0 0 15px 1px rgba(0,0,0,0.3); }
.tShadow 							{ text-shadow: 0 0 10px rgba(0,0,0,0.8); }
.tShadow2 							{ text-shadow: 2px 5px 10px rgba(0,0,0,0.5); }

.b000T 								{ background:rgba(0,0,0,0.5); }
.bVerdeT 							{ background:rgba(0,179,63,0.6); }
.bVerdeT2 							{ background:rgba(0,89,35,0.8); }

.bVerdeHover:hover 					{ background-color:#019d38; }


.rotar {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

/* TRANSFORM */
.bHover:hover						{ background-color:#ffce00; color:#333; }
.bHover2:hover						{ background-color:#eee; color:#333; }
.aHover:hover						{ color:#ccc; }

.bHover, .bHover2, .bVerdeHover, .aHover, .aS, .menuion *, .production, .production *, .categorion, .categorion *		{
	-webkit-transition: all 350ms ease-in;
	-moz-transition: all 350ms ease-in;
	-ms-transition: all 350ms ease-in;
	-o-transition: all 350ms ease-in;
	transition: all 350ms ease-in;
}




.fx_menu {
    position  : fixed;
    top       : 30px;
    left      : 50%;
    transform : translateX(-50%);
    width     : 90%;
    max-width : 1920px;
    z-index   : 9999;
    transition: all 0.4s ease;
}

.fx_menu.scrolled {
    top: 0;
    width: 100%;
    max-width: 100%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}


.card-hover {
    position: relative;
    overflow: hidden;
}

.card-hover .overlay {
    background: rgba(0, 0, 0, 0.3);
    transition: background 0.3s ease;
    z-index: 2;
}

.card-hover:hover .overlay {
    background: rgba(0, 0, 0, 0.6);
}

.card-hover .img-hover {
    width: 100%;
    height: auto;
    transition: transform 0.5s ease;
    display: block;
}

.card-hover:hover .img-hover {
    transform: scale(1.05);
}

.card-hover .icon-hover {
    transition: transform 0.3s ease;
}

.card-hover:hover .icon-hover {
    transform: translateX(6px);
}

.card-hover .content-hover {
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 0.8;
    transform: translateY(10px);
}

.card-hover:hover .content-hover {
    opacity: 1;
    transform: translateY(0);
}

.card-hover .title-hover {
    transition: letter-spacing 0.3s ease;
}

.card-hover:hover .title-hover {
    letter-spacing: 0.5px;
}

.clientes-logos img {
    filter: grayscale(100%) brightness(0.7);
    transition: filter 0.4s ease;
}

.clientes-logos img:hover {
    filter: grayscale(0%) brightness(1);
}

.fx_card-hover {
    position: relative;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s ease, box-shadow 0.4s ease, filter 0.4s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.fx_card-hover:hover {
    /* transform: translateY(-5px); */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    filter: brightness(1.1);
}

.fx_card-hover .fx_icon-hover {
    transition: transform 0.4s ease;
}

.fx_card-hover:hover .fx_icon-hover {
    transform: translateX(6px);
}


.rotar {
    transform: rotate(-90deg);
    transform-origin: right bottom;
    display: inline-block;
}













.col-2dot4,
.col-sm-2dot4,
.col-md-2dot4,
.col-lg-2dot4,
.col-xl-2dot4 {
    position: relative;
    width: 100%;
    min-height: 1px;
}
.col-2dot4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
}
@media (min-width: 540px) {
    .col-sm-2dot4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}
@media (min-width: 720px) {
    .col-md-2dot4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}
@media (min-width: 960px) {
    .col-lg-2dot4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}
@media (min-width: 1140px) {
    .col-xl-2dot4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}

.filtrion input[type="radio"] {
	display: none;
}
.filtrion input[type="radio"] + label span {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin: -3px 12px 0 0;
	vertical-align: middle;
	background: url(../../resources/radio-uncheck.png);
	background-size: cover;
	cursor: pointer;
}
.filtrion input[type="radio"]:checked + label span {
	background: url(../../resources/radio-check.png);
	background-size: cover;
}


#formion .h300::-webkit-scrollbar{
    width: 3px;
    background-color: #F5F5F5;
}
#formion .h300::-webkit-scrollbar-track{
    background-color: #eee;
}
#formion .h300::-webkit-scrollbar-thumb{
    background-color: #999;
}












.product-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.product-item {
    border: 1px solid #ddd;
    padding: 15px;
    width: calc(33.333% - 20px); /* 3 por fila, ajustando por el gap */
    box-sizing: border-box;
    background-color: #fff;
    text-align: center;
}
.product-item img {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}
.product-item button {
    background-color: #5cb85c;
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 4px;
}
.product-item button:hover {
    background-color: #4cae4c;
}

.quote-item {
    border-bottom: 1px solid #eee;
    padding: 8px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.quote-item span {
    flex-grow: 1;
}
.quote-item .remove-item {
    background-color: #d9534f;
    color: white;
    border: none;
    padding: 5px 8px;
    cursor: pointer;
    font-size: 0.8em;
    border-radius: 3px;
    margin-left: 10px;
}

#btn-go-to-quote-form {
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    margin-top: 15px;
    border-radius: 4px;
}
#btn-go-to-quote-form:hover {
    background-color: #0056b3;
}

/* Formulario */
.quote-form-container {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    background: #fff;
    border: 1px solid #ddd;
}
.quote-form-container label {
    display: block;
    margin-bottom: 8px;
}
.quote-form-container input[type="text"],
.quote-form-container input[type="email"],
.quote-form-container textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    border-radius: 4px;
}
.quote-form-container button[type="submit"] {
    background-color: #28a745;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.quote-form-container button[type="submit"]:hover {
    background-color: #218838;
}
.summary-item {
    padding: 5px 0;
    border-bottom: 1px dashed #eee;
}
.summary-item:last-child {
    border-bottom: none;
}




.cot_menu_overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 99991;
}

.cot_menu_panel {
  position: fixed;
  top: 0; right: 0;
  width: 500px;
  max-width: 80%;
  height: 100%;
  background: #fff;
  box-shadow: -2px 0 10px rgba(0,0,0,0.3);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 99992;
}

.cot_menu_overlay.cot_menu_activo {
  opacity: 1;
  visibility: visible;
}

.cot_menu_panel.cot_menu_activo {
  transform: translateX(0%);
}

.cot_menu_oculto {
  display: none;
}



/* ... (tu CSS existente) ... */

/* assets/css/style.css */

/* ... (otros estilos que puedas tener) ... */

#form-messages, /* Para el formulario de contacto */
#quote-form-messages { /* Para el formulario de cotización */
    margin-top: 20px;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid transparent; /* Borde base */
    display: none; /* Oculto por defecto, se mostrará con JS */
}

/* Clase para mostrar el div de mensajes */
#form-messages.show,
#quote-form-messages.show {
    display: block;
}

/* Mensaje de Éxito (Verde) */
#form-messages.success,
#quote-form-messages.success {
    background-color: #dff0d8;
    color: #3c763d;
    border-color: #d6e9c6;
}

/* Mensaje de Error (Rojo) */
#form-messages.error,
#quote-form-messages.error {
    background-color: #f2dede;
    color: #a94442;
    border-color: #ebccd1;
}

/* Mensaje Informativo (Azul) */
#form-messages.info,
#quote-form-messages.info {
    background-color: #d9edf7;
    color: #31708f;
    border-color: #bce8f1;
}


.carousel-indicators li {
  background-color: #b5deb5; /* verde claro para bullets inactivos */
}
.carousel-indicators .active {
  background-color: #28a745; /* verde Bootstrap para el activo */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: #28a745;      /* fondo verde */
  background-size: 60% 60%;       /* tamaño del icono interno */
  border-radius: 50%;             /* forma circular */
  width: 3rem;
  height: 3rem;
}

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-left'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
}
.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-right'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}


.toggle-icon {
	font-size: 22px;
	font-weight: bold;
	color: #28a745; /* verde */
	transition: transform 0.3s;
}

/* Logo responsive con escala progresiva */
.logo-svg {
	width: 300px;
	height: auto;
	display: block;
	transition: width 0.3s ease;
}

/* PC Mediano - 1280px a 1919px */
@media (max-width: 1919px) {
	.logo-svg {
		width: 280px;
	}
}

@media (max-width: 1600px) {
	.logo-svg {
		width: 260px;
	}
}

@media (max-width: 1440px) {
	.logo-svg {
		width: 250px;
	}
}

@media (max-width: 1280px) {
	.logo-svg {
		width: 240px;
	}
}

/* Laptop - 992px a 1279px */
@media (max-width: 1199px) {
	.logo-svg {
		width: 220px;
	}
}

@media (max-width: 991px) {
	.logo-svg {
		width: 200px;
	}
}

/* Tablet - 768px a 991px */
@media (max-width: 768px) {
	.logo-svg {
		width: 180px;
	}
}

/* Móvil grande - 576px a 767px */
@media (max-width: 576px) {
	.logo-svg {
		width: 160px;
	}
}

/* Móvil pequeño - menos de 576px */
@media (max-width: 480px) {
	.logo-svg {
		width: 150px;
	}
}

/* Móvil muy pequeño - menos de 375px */
@media (max-width: 375px) {
	.logo-svg {
		width: 140px;
	}
}

/* Botón de cotizador responsive */
.cot-btn-mobile {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	margin-right: 10px;
	padding: 8px 12px;
	font-size: 18px;
	color: #333;
	cursor: pointer;
	transition: all 0.3s ease;
	background: transparent;
	border: none;
}

.cot-btn-mobile:hover {
	color: #00b33f;
}

/* Botón del cotizador en desktop */
.cot-btn-desktop {
	display: flex;
	align-items: center;
}

.cot-btn-desktop .cot_menu_abrir {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	padding: 0.5rem 1rem !important;
	height: 100%;
}

.cot-btn-desktop .cot_menu_abrir:hover {
	color: #00b33f;
}

/* Asegurar que el badge esté bien posicionado */
.cot_quote-items-badge {
	position: absolute;
	bottom: 50%;
	right: 50%;
	margin: 0 -15px -15px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background-color: #999;
	color: #fff;
	font-size: 10px;
}

/* Asegurar que el navbar use flexbox */
.navbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

/* En desktop (mayor a 992px) */
@media (min-width: 992px) {
	.cot-btn-mobile {
		display: none !important;
	}

	.cot-btn-desktop {
		display: block !important;
	}
}

/* En móvil y tablet (menor a 992px) */
@media (max-width: 991px) {
	.navbar {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.navbar-brand {
		flex: 0 0 auto;
		order: 1;
	}

	.cot-btn-mobile {
		display: flex !important;
		flex: 0 0 auto;
		order: 2;
		margin-left: auto;
	}

	.navbar-toggler {
		flex: 0 0 auto;
		order: 3;
		margin-left: 10px;
	}

	.navbar-collapse {
		flex-basis: 100%;
		width: 100%;
		order: 4;
		clear: both;
	}

	/* Ocultar botón desktop en móvil */
	.cot-btn-desktop {
		display: none !important;
	}
}