/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 21 2025 | 21:45:37 */

.rolenor-header{
	
  transition: .3s all ease;
}

.rolenor-header.elementor-sticky--effects{
 
}

.texto-degradado strong{
	background-color: transparent;
	font-weight: 400;
	background-image: linear-gradient(262deg, #E24C4A 0%, #386BB7 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 2px linear-gradient(262deg, #E24C4A 0%, #386BB7 100%); /* Borde negro de 2px */
	opacity: 1;
}


.rolenor-form.light input,
.rolenor-form.light textarea{
	border:2px solid #fff !important;
	border-radius:8px;
	background:transparent !important;
	outline:none !important;
	color:#fff !important;
	font-size:16px;
	font-weight:500;
	backdrop-filter:blur(10px)
}

.rolenor-form.light input:focus,
.rolenor-form.light textarea:focus{
	border:2px solid #fff;
}

.rolenor-form.light input::placeholder{
	color:#fff;
	opacity:1;
}

.rolenor-form.light textarea {
	height:80px
}
.rolenor-form.light .gform-footer {
	position: relative;
	overflow: hidden;
	padding: 2px;
	max-width: 250px !important;
	border-radius: 5px;

}

.rolenor-form.light .gform-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 3px;
	background: linear-gradient(256deg, #e24c4a 14.51%, #1a9dd9 95.96%);
	border-radius: 12px;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;
	background-clip: border-box;
	pointer-events: none;
	z-index: 1;
}

.rolenor-form.light .gform_button {
	background: transparent !important;
	font-size: 17px !important;
	padding: 10px;
	width: 100% !important;
	border-radius: 5px !important;
	border: none !important;
	backdrop-filter: blur(0px);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.4s ease;
	position: relative;
	z-index: 2;
	overflow: hidden;
}

.rolenor-form.light .gform_button::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, 
		transparent, 
		rgba(26, 157, 217, 0.3), 
		rgba(226, 76, 74, 0.3), 
		transparent
	);
	transition: left 0.5s ease;
	z-index: -1;
}

.rolenor-form.light .gform_button:hover::before {
	left: 100%;
}

.rolenor-form.light .gform_button:hover {
	background: linear-gradient(135deg, 
		rgba(26, 157, 217, 0.2) 0%, 
		rgba(226, 76, 74, 0.2) 100%
	) !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(26, 157, 217, 0.3);
}

.form-group {
	margin-bottom: 20px;
}

.form-group label {
	display: block;
	color: #fff;
	font-weight: 500;
	margin-bottom: 8px;
	font-size: 14px;
} 

.rolenor_testimonios .prev-arrow{
    border-radius:30px 0px 0px 0px
}

.rolenor_testimonios .next-arrow{
    border-radius:30px 0px 0px 0px
}

.rolenor_testimonios .prev-arrow::before{
    content: "";
    position: absolute;
    background-color: transparent;
    top: 0;
    height: 64px;
    width: 20px;   
    left: 0;
    border-bottom-right-radius: 20px;
    box-shadow: 0 20px 0 0 #ffffff;
    transform:translateX(-20px)
}

.rolenor_testimonios .next-arrow::before{
    content: "";
    position: absolute;
    background-color: transparent;
    bottom: 0;
    height: 40px;
    width: 20px;
    left: 0;
    border-bottom-right-radius: 20px;
    box-shadow: 0 20px 0 0 #ffffff;
    transform:translateX(-20px)
}

.industria-item .btn-rolenor {
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	height: 0;
	overflow: hidden;
	transition: height 0.4s ease, opacity 0.4s ease;
}

/* Hover con animación más suave */
.industria-item:hover .btn-rolenor {
	height: 38px;
	opacity: 1;
}

.btn-rolenor::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 3px;
	background: linear-gradient(-256deg, #00AFFF 14.51%, #0F266F 95.96%);
	border-radius: 30px;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;
	background-clip: border-box;
	pointer-events: none;
	z-index: 1;
}
.btn-rolenor .elementor-button{
	background: transparent !important;
	font-size: 17px !important;
	padding: 10px;
	width: 100% !important;
	border-radius: 30px !important;
	border: none !important;
	backdrop-filter: blur(0px);
	color: #0c0d0e;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.4s ease;
	position: relative;
	z-index: 2;
	overflow: hidden;
	
}

.btn-rolenor .elementor-button:hover,
.btn-rolenor:hover::before{
	background:#1a9dd9 !important;
	color:#fff
}

/*.btn-rolenor .elementor-button::before,
.btn-rolenor .elementor-button::after{
	content: "\f105";
	font-family: "Font Awesome 5 Free";
  font-weight: 900;
	transition:.3s all ease;
	transform-origin:right;
	width:10px;
}*/

.btn-rolenor .elementor-button{
	display:flex;
	justify-content:center;
	gap:20px
}

.btn-rolenor .elementor-button::before{
	opacity:0;
	color:#fff
}


.btn-rolenor .elementor-button:hover::before{
	opacity:1
}

.btn-rolenor .elementor-button:hover::after{
	opacity:0;
}

.industria-slider .slick-arrow{
    border-radius:3em;
    background:transparent;
    transition:.3s all ease
}

.industria-slider .slick-arrow svg path{
    color:#000;
    transition:.3s all ease
}

.industria-slider .slick-arrow:hover svg path{
    color:#fff;
}

.industria-slider .slick-arrow::before{
    content:"";
    display:block;
    width:50px;
    height:50px;
    position:absolute;
    padding:3px;
    background: linear-gradient(256deg, #e24c4a 14.51%, #1a9dd9 95.96%);
    border-radius: 3em;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    background-clip: border-box;
}

.industria-slider .slick-arrow:hover{
     background: linear-gradient(256deg, #e24c4a 14.51%, #1a9dd9 95.96%);
}