@charset "utf-8";
/* CSS Document */
:root{
	/*Colors*/
	--MainColorBG:#FFF;
	--MainColorBG2:#12495C;
	--MainColorBG3:#007787;
	--MainTextColor:#1C1C1C;
	--SecondTextColor:#282828;
	--GreyTextColor:#C1C1C1;
	--DarkTextColor:#1C1C1C;
	--MidColor:#AAC3C9;
	--DarkColor:#035A90;
	--LightColor:#AAC3C9;
	--LightColor2:#D8A65A;

	--ErrorColor:#DD4C4A;
}
::selection{
	background:var(--MainColorBG2);
	color:var(--MidColor)
}
::-moz-selection{
	background:var(--MainColorBG2);
	color:var(--MidColor)
}
/*Tweak for overlay menu: BG:z-index:0;header:z-index:2;main:z-index:1;relative all. Then nav ul absolute*/
body{
    background-color:var(--MainColorBG);
	position:relative;
	z-index:0;
	overflow-x:hidden;
	color:var(--MainTextColor);
}
a{
	color:var(--DarkColor);
}
header{
    position:relative;
    z-index:2;
	background-color:var(--MainColorBG);
	& #HeaderSlider{
		min-height:100%;
		& .photobg{
			min-height:calc(100vh - 37vh);
		}
	}
	& #HeaderStatic{
		position: relative;
		z-index:5;
		padding:40px 0;
		display:flex;
		padding-top:157px;
		height:100%;
		flex-direction:column;
		& #HeaderTitles{
			min-height:calc(100vh - 37vh);
			padding-top:10%;
			order:1;
			& h1{
				text-align:left;
				min-height:170px;
				padding-left:10px;
				color:var(--MainTextColor);
				font-size:3.1rem;
			}
			& p{
				color:var(--MainTextColor);
				font-size:0.9rem;
			}
		}
	}
	& #HeaderProduct{
		position: relative;
		z-index:5;
		padding:157px 0 40px 0;
		display:flex;
		height:100%;
		flex-direction:column;
		& #ProductTitles{
			padding-top:10%;
			order:1;
			& h1{
				text-align:left;
				padding-left:10px;
				color:white;
				font-size:3.1rem;
				letter-spacing:3px;
			}
			& img{
				width:190px;
			}
			& p{
				color:white;
				font-size:0.9rem;
			}
		}
	}
	& #HeaderMain{
		position: relative;
		z-index:5;
		padding:40px 0;
		display:flex;
		padding-top:157px;
		height:100%;
		flex-direction:column;
		& #HeaderAction{
			order:2;
			&  a{
				margin:30px auto;
			}
		}
		& #HeaderInfo{
			min-height:calc(100vh - 37vh);
			padding-top:10%;
			order:1;
			& h2{
				text-align:left;
				min-height:170px;
				padding-left:10px;
				color:white;
				font-size:3.1rem;
				letter-spacing:3px;
			}
			& img{
				width:50%;
				margin-left:10%
			}
			& p{
				min-height:245px;
				color:white;
				font-size:0.9rem;
			}
		}
	}
	#HeaderContent{
		position:absolute;
		top:0;
		left:0;
		right:0;
		z-index:6;
	}
}
.photobgCover{
	background: rgb(31,32,36);
background: linear-gradient(180deg, rgba(31,32,36,0.7567401960784313) 6%, rgba(31,32,36,0.47102591036414565) 48%, rgba(31,32,36,1) 100%);
}
main{
    position:relative;
    z-index:1;
	padding:0;
	min-height:calc(100vh - 40vh);
	background-color:var(--MainColorBG);
	overflow:hidden;
}
footer{
	padding:0;
	overflow:hidden;
	background-color:var(--MainColorBG);
	color:var(--MainTextColor);
	& .Footer2{
		border-top:1px solid var(--MainColorBG2);
		min-height:250px;
		padding:30px 0 50px;
		& #FooterLogo img{
			width:250px;
			margin:30px auto;
		}
		& #FooterLinks{
			margin:40px auto;
			& div{
				margin:35px 0;
			}
		}
	}
	& #FooterMenu{
		list-style:none;
		text-align:left;
		& li{
			margin:10px 0 10px 20px;
			}
	}
	& #FooterNetworks{
		list-style:none;
		text-align:left;
		& li{
			margin:10px 0 10px 20px;
		}
	}
	& #FooterServices{
		list-style:none;
		text-align:left;
		& li{
			margin:10px 0 10px 20px;
		}
	}
}
#FooterTerms{
	& p{
		line-height:2.5rem;
	}
}
#FooterCompany{
	& p{
		text-align:center;
		line-height:2.5rem;
	}
}
#FooterCopyright{
	& p{
		text-align:center;
		line-height:2.5rem;
		& a{
			color:white;
			transition: color 0.6s cubic-bezier(0.25,1,0.5,1);
		}
		& a:hover{
			color:var(--LightColor2)
		}
	}
}
#FooterColletions{
	display:inline-flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	gap:20px;
	margin:22px auto;
	& a img{
		width:60px;
	}
}
#PaymentsType{
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:center;
	margin:30px auto;
	& a img{
		width:40px;
	}
}
#ManteinanceMode{
	height:100vh;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
}
#ManteinanceMode > .BlockHalf img{
	margin:30px 0
}
#ManteinanceMode > .BlockHalf h3{
	font-family:MainFont;
	color:white
}
#ErrorPage{
	min-height:calc(100vh - 50vh);
	padding:30px 0;
	display:flex;
	flex-direction:column;
	align-items:center;
}
#ErrorPage > .BlockHalf > img{
	width:70%;
}
#ErrorTitle{
	font-size:3rem;
	color:var(--MainColorBG2)
}
#ErrorMessage{
	font-size:1.2rem
}
.ModalNotification{
    width:400px;
    min-height:200px;
    position: fixed;
    top: 50%;
    left: 50%;
	padding:15px;
	margin-top: -100px;
    margin-left: -200px;
    background-color:white;
    border-radius:6px;
    text-align:center;
    z-index: 11;
}
.ModalNotification > i{
	animation:bounceIn .3s;
	animation-delay:.2s;
	font-size:65px;
	color:var(--HLColor1);
	margin:-24px auto 0
}
.NotificationInfo{
	margin-top:20px;
	padding-top:20px;
	border-top:1px solid #BBBBBB;
	font-size:17px;
	font-weight:bold;
	color:#4C4C4C;
	line-height:20pt
}
.active{
	font-weight:bolder;
}
#TopBar{
	height:50px;
	padding:10px 0;
	display:flex;
	flex-direction:row;
	justify-content:space-around;
	& > a{
		font-size:1.2rem;
		color:var(--MainTextColor)
	}
	& > a:hover{
		color:var(--HLColor2)
	}
	#HeaderNetworks{
		width:100%;
		margin:10px 0;
		display:flex;
		justify-content:center;
		gap:30px;
		& li{
			display:flex;
			justify-content:center;
			align-items:center;
		}
		& li a{
			color:white;
			transition: color 0.6s cubic-bezier(0.25,1,0.5,1);
		}
		& li a:hover{
			color:var(--LightColor2)
		}
		& li a i{
			font-size:1.9rem;
		}
	}
}
#MobileBars{
	margin:20px 0 0 -5px;
	width:50px;
	height:50px;
	font-size:32px;
	display:flex;
	justify-content:center;
	align-items:center;
	color:var(--MainTextColor);
	position: relative;
}
#CloseMobile{
	width:50px;
	height:50px;
	color:var(--MainTextColor)
}
.HeadLogo{
	margin:-50px auto 20px;
	width:285px;
	& p{
		font-family: MainFontBold;
		Color:white;
		text-align:center;
	}
}
#HeaderContent{
	padding-bottom:20px;
}
#HeadLogoHome{
	width:285px;
	margin:-10px 0 0 10px;
}
#BriefLogo{
	width:90% !important;
	max-width:90% !important;
	margin:40px auto;
}
nav{
	position:absolute;
	width:0;
	height:100vh;
	top:0;
	left:0;
	z-index:3;
	overflow-x: hidden;
	transition: 0.5s;
	background:var(--MainColorBG) url('../Images/guinard-noriega-iso-alpha.svg') no-repeat 250% center;
	background-size: 350px;
	& #WebMenu{
		opacity:0;
	}
	& #WebMenu{
		list-style:none;
		padding:20% 20px 0 20px;
	}
	& #WebMenu li:first-child{
		height:35px;
	}
	& #WebMenu li{
		position: relative;
        height: auto;
        margin: 10px 0;
        text-align: left;
		& a{
			display: block;
			color: var(--MainTextColor);
			font-size: 20px;
			text-decoration: none;
			padding: 10px 0;
			transition: all 0.3s;
		}
		& a:hover{
			color: var(--GreyTextColor);
		}
		& .Active {
			font-weight: bolder;
		}
		& .SubMenu {
			list-style: none;
			padding-left: 30px;
			margin: 0;
			& li:first-child{
				height: auto;
				font-size: 20px;
				text-align: left;
			}
			& li:last-child a{
				display:block !important;
				margin: 10px 0;
				background-color:transparent;
				font-weight:normal;
			}
		}
	}
	& #WebMenu li:first-child {
        font-size: 40px;
        text-align: right;
    }
	& #HeaderNetworks{
		opacity:0;
		width:80%;
		list-style:none;
		margin:30px auto 0;
		display:flex;
		flex-direction:row;
		flex-wrap: wrap;
		justify-content:space-around;
		& li:last-child a{
			margin:0;
			padding:0;
			background-color:transparent;
		}
		& li a i{
			margin:0 auto;
			font-size:1.7rem;
			color:var(--DarkTextColor);
		}
	}
}


#DevelopedBy{
	text-align:center;
}
.ScrolltoTop{
	color:var(--LightColor)
}
/*ANIMATIONS*/
.FromRight[data-scroll]{
	transition: all ease 2s
}
.FromRight[data-scroll="in"]{
	opacity: 1;
	transform:translateX(0px)
}
.FromRight[data-scroll="out"]{
	opacity: 0;
	transform:translateX(90px)
}
.FromLeft[data-scroll]{
	transition: all 2s
}
.FromLeft[data-scroll="in"]{
	opacity: 1;
	transform:translateX(0px)
}
.FromLeft[data-scroll="out"]{
	opacity: 0;
	transform:translateX(-90px)
}
.FromDown[data-scroll]{
	transition: all 2s
}
.FromDown[data-scroll="out"]{
	opacity: 0;
	transform:translateY(90px)
}
.FromDown[data-scroll="in"]{
	opacity: 1;
	transform:translateY(0px)
}
.FromUp[data-scroll] {
    transition: all 2s;
}
.FromUp[data-scroll="out"] {
    opacity: 0;
    transform: translateY(-90px);
}
.Fade[data-scroll]{
	transition: all 2s
}
.Fade[data-scroll="in"]{
	opacity: 1;
}
.Fade[data-scroll="out"]{
	opacity: 0;
}
.SlideUp[data-scroll] {
    transition: all 2s;
}
.SlideUp[data-scroll="out"] {
    opacity: 0;
    transform: translateY(90px);
}
.SlideDown[data-scroll] {
    transition: all 2s;
}
.SlideDown[data-scroll="out"] {
    opacity: 0;
    transform: translateY(-90px);
}
@keyframes scrollY {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}
.ZoomInImg[data-scroll]{
	transition: all 1s
}
.ZoomInImg[data-scroll="in"]{
	transform: scale(1);
	opacity: 1;
}
.ZoomInImg[data-scroll="out"]{
	transform: scale(0.5);
	opacity: 0;
}
/*STARTS CUSTOM*/
.section{
	padding:20px 0 50px
}
.section .BlockHalf{
	vertical-align:top;
}
.section h1{
	font-size:2rem;
}
.section h1{
	display:inline-block;
	color:white;
	position: relative;
	text-align: left;
	margin:10px 5px 30px;
}
.SectionTitle h2{
	font-size:3rem;
	display:inline-block;
	color:var(--MainTextColor);
	position: relative;
	text-align: left;
	margin:10px 5px 30px;
	font-family: MainFontMedium;
	font-weight:100;
}
#YouTubeVideo{
    width:100%;
    height:190px;
    margin:10px auto
}
/*BUTTONS*/
.Button1,.Button2,.Button3,.Button4{
	min-width:250px;
	border: none;
	padding: 12px 40px;
	margin:10px 5px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	font-family:MainFont;
	font-weight:bolder;
	letter-spacing:2px;
	border-radius: 40px;
}
/*BUTTON COLORS*/
.Button1{
    background-color:var(--MainColorBG2);
	color:white;
}
.Button1:hover{
	background-color:var(--MainColorBG3);
	color:white
}
.Button2{
	background-color:var(--LightColor2);
	color:white
}
.Button2:hover{
	background-color:#E9C690;
	color:white
}
.Button3{
	background-color:#282828;
	color: white
}
.Button3:hover{
	background-color: #6D6A6A;
	color:white;
}
.Button4{
	background-color:var(--MainColorBG3);
	color: white
}
.Button4:hover{
	background-color:var(--MainColorBG2);
	color:white;
}
/*BLOG TEXT & SECTION Formats*/
.BlogTitle{
	display:inline-block;
	color:var(--MainTextColor);
	font-size:2rem;
	letter-spacing:3px;
	position: relative;
	text-align: left;
	margin:10px 5px 30px;
}
.ArticleText a{
	color:var(--LightColor);
}
.ArticleText a:hover{
	color:var(--LightColor2);
}
.section > img{
    min-width:290px;
    max-width:290px;
    margin:5px;
    border-radius:6px
}
.ArticleText > img,.ArticleText > p > img{
	min-width:80%;
	max-width:90%;
	margin:10px auto;
}
.ArticleText > h1,.ArticleText > h2,.ArticleText > h3,.ArticleText > h4,.ArticleText > h5,.ArticleText > h6,.section > h2,.section > h3,.section > h4,.section > h5,.section > h6{
    margin:10px 0;
    font-weight:bold;
	text-align:left;
}
.ArticleText > h3,.section > h2,.section > h3{
    color:var(--MainColor)
}
.ArticleText > h3,.ArticleText > h4,.ArticleText > h5,.ArticleText > h6,.section > h3,.section > h4,.section > h5,.section > h6{
	color:var(--SecondTextColor);
	margin:10px 2px;
}
.ArticleText > p,.section > p{
    line-height:2.5rem;
	font-size:1rem;
}
.ArticleText > ul,.section > ul{
    display:table;
	padding-left:25px;
}
.ArticleText > ul li,.section > ul li{
    display:table-row;
    line-height:2.5rem;
    margin-bottom:10px;;
    text-align:left
}
.ArticleText > ul li::before,.section > ul li::before{
    display:table-cell;
    content:"\2022";
    color:var(--LightColor3);
    font-weight: bold;
    width: 1em;
    text-align:left
}
.ArticleText > ol,.section > ol{
    display:table;
    counter-reset:item
}
.ArticleText > ol li,.section > ol li{
    display:table-row;
    line-height:1.7;
    margin-bottom:10px;;
    text-align:left
}
.ArticleText > ol li::before,.section > ol li::before{
    display:table-cell;
    content:counter(item) ". ";
    counter-increment: item;
    color:var(--LightColor2);
    font-weight: bold;
    width: 1em;
    text-align:left
}
/*FORM INPUTS*/
.FormInputEmail{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	height: 45px;
	padding: 5px;
	margin: 10px auto;
	border:2px solid var(--MainColor);
	border-radius:4px;
	background-color:transparent;
	font-family:Aller;
	transition:ease all 0.3s;
	font-size:18pt;
}
.FormInputEmail:focus{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border:1px solid var(--MidColor);
	background-color:var(--MainColor);
}
.FormInputEmail:invalid{
	background-color:var(--HLColor2);
}
.FormInputEmail:before{
	color:white;
	content: "*";
}
.SectionGalleryImage{
	width:100%;
}
.FormField{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width:90%;
	height: 40px;
	padding: 5px;
	margin: 10px auto;
	border:none;
	border:none;
	background-color:var(--MainColorBG);
	font-size:1.9rem;
	color:var(--DarkTextColor)
}
.FormField::placeholder{
	transition:ease-in-out 0.3s;
}
.FormField:focus::placeholder{
	color:var(--MainColorBG)
}
.FormField input:-internal-autofill-selected{
	background-color:var(--HLColor3);
}
.FormField[type=password]{
	width:85%
}
.FormFieldSelect{
	width:90%;
	height: 40px;
	padding: 5px;
	margin: 10px auto;
	border:none;
	outline:none;
	background-color:var(--MainColorBG);
	font-family:MainFont;
	font-size:1.1rem;
	color:var(--DarkTextColor)
}
.FormFieldSelect option{
	color:var(--GreyTextColor)
}
#ShowPassw{
	color:var(--MainColor);
	cursor: pointer;
}
.pass-wrapper{
	display:block;
}
.FormField:focus{
	outline:none;
}
.FormField:required{
	outline:none;
}
.FormTextArea{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width:90%;
	height: 40px;
	padding: 5px;
	margin: 10px auto;
	font-family:MainFont;
	font-size:1.1rem;
	border:none;
	background-color:var(--MainColorBG);
	font-size:1.9rem;
	color:var(--DarkTextColor)
}
.FormTextArea:disabled{
	background-color:#f3f3f3;
	cursor:not-allowed
}
.FormField::placeholder,.FormTextArea::placeholder,.FormFieldSelect::-webkit-datetime-edit-day-field,.FormFieldSelect::-webkit-datetime-edit-month-field,.FormFieldSelect::-webkit-datetime-edit-year-field,.FormFieldSelect::-webkit-datetime-edit-text{
	color: #a5a5a5;
	font-family:MainFont !important;
	font-size:1.1rem;
	transition:ease-in-out 0.3s;
}
.FormTextArea:focus::placeholder{
	color:#ffffff
}
#FormPassw{
	padding-left:15px;
}
.SendButton{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 10px 65px;
	margin: 10px auto;
	background-color:var(--HLColor3);
	color:var(--DarkTextColor);
	border:none;
	outline:none;
	letter-spacing:0.2rem;
	transition:ease all 0.3s;
	cursor:pointer;
	font-weight:bold;
	font-family:MainFont;
	font-size:1.2rem;
	&:hover{
		background-color:var(--HLColor4);
	}
	&:disabled{
		background-color:#b3b3b3;
		cursor:not-allowed
	}
}
.DonateButton{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 10px 65px;
	margin: 10px auto;
	background-color:var(--HLColor3);
	color:var(--DarkTextColor);
	border:none;
	outline:none;
	letter-spacing:0.2rem;
	transition:ease all 0.3s;
	cursor:pointer;
	font-weight:bold;
	font-family:MainFont;
	font-size:1.2rem;
	&:hover{
		background-color:var(--HLColor4);
	}
	&:disabled{
		background-color:#b3b3b3;
		cursor:not-allowed
	}
}
#HeadTitle{
	display:none;
}
/*BLOG*/
.ArticlesBlock{
	width:290px;
	min-height:288px;
	margin:20px auto;
	padding-bottom:10px;
	background-color:#F3F3F3;
	vertical-align:top;
}
.BlogReadMore{
	transition:ease all 0.3s;
}
.ArticlesBlock:hover .BlogReadMore{
	margin-right:5px;
}
.BlogImage{
	width:inherit;
	height:165px;
	overflow:hidden;
}
.BlogImage > img{
	width:100%;
	object-fit:cover;
}
.BlogInfo{
	text-align:left;
	padding:5px 10px;
}
.BlogName{
	height:76px;
	font-size:1.2rem;
	color:var(--MainColor);
	overflow: hidden;
	white-space: wrap;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	text-align:left;
}
.BlogData{
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:center;
	font-size:0.7rem;
	color:var(--MainTextColor)
}
#BlogTitle{
	text-align:left;
	font-size:1.9rem;
}
#BlogData{
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	align-items:flex-start;
	padding:10px 5px;
	text-align:left;
	font-size:0.9rem;
}
#BlogDate{
	text-align:left;
}
#BlogCoverImage{
	width:95%;
	margin:5px auto;
}
#Authors > h2{
	color:var(--MainColor)
}
#BlogSlider > h2{
	color:var(--MainColor);
	font-size:1.5rem;
}
#BlogSliderFeatured > .slick-dots li button::before{
	font-size:20px;
	color:rgba(116, 116, 116, 0.61)
}
#BlogSliderFeatured .slick-prev{
	left:3px;
	z-index:5
}
#BlogSliderFeatured .slick-next{
	right:3px;
	z-index:5
}
#NewsGrid{
	padding:30px 0;
}
/*REWC*/
div[id^='BlockCategory']{
	width:95%;
	min-height:420px;
	margin:10px auto;
	padding:10px 5px;
	align-items:center;
	background-color:var(--LightColor);
	vertical-align:top;
}
div[id^='BlockCategory'] > h2{
	text-transform: uppercase;
	margin:10px auto;
}
div[id^='BlockCategory'] > p{
	min-height:90px;
}
.VideoContainer{
	position: relative;
	padding-bottom: 56.25%;
}
.VideoContainer iframe {
	position: absolute;
    margin-right: auto;
    margin-left: auto;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
.CatVideo{
	aspect-ratio: 16 / 9;
	width: 100%;
}
/*COMPLETELY CUSTOM*/
#AwardSlider{
	& img{
		margin:0 auto;
		width:100px
	}
}
#MarketingDefSection, #MarketingSection{
	background:#007787 url('../Images/guinard-noriega-graphic-asset-03.webp') no-repeat;
	background-position: calc(50% + 350px) center; /* Mantiene la imagen a 350px a la derecha del centro exacto */
	background-size:700px;
	color:white;
}
#TeamDefSection{
	& h2, & h3{
		text-align: left;
	}
}
#TeamAllDefSection{
	background-color:var(--MainColorBG2);
	color:white;
	& h2, & h3{
		color:white;
		text-align: left;
	}
}
#ServicesDefSection, #ServicesSection{
	background:var(--MainColorBG2);
	color:white;
}
#Marketing2DefSection{
	background:url('../Images/guinard-noriega-iso-blue-alpha.svg') no-repeat center left;
	background-size:800px;
}
#ServicesDefSection{
	background:var(--MainColorBG2) url('../Images/guinard-noriega-iso-glod-stroke.svg') no-repeat center right;
	background-size: 600px;
	color:white;
}
#ServiceDetailDefSection{
	padding:30px 0 50px;
	& h1{
		width: 100%;
		color:var(--MainTextColor);
		text-align:left;
	}
	& p{
		line-height:2.5rem;
	}
	}
.ServiceBlock{
	display:inline-flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	width:270px;
	min-height:160px;
	margin:10px 5px;
	padding:10px 5px;
	background-color:white;
	color:var(--MainTextColor);
	vertical-align:top;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
	& a{
		color:var(--MainTextColor);
		text-decoration:none;
		& h3{
			width:100%;
			display:flex;
			flex-direction:row;
			justify-content: flex-start;
			align-items: center;
			margin:10px 2px;
			font-size:1.2rem;
			& img{
				height:30px;
				margin-right:5px;
			}
		}
		& p{
			font-size:0.9rem;
			line-height:1.3rem;
		}
	}
	& a:hover{
		color:var(--MainColorBG2);
		transition:ease all 0.3s;
	}
}
.MemberBlock{
	width:280px;
	height:412px;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding:10px 5px;
	margin:20px 5px;
	& a{
		color:var(--MainTextColor);
		text-decoration:none;
		& img{
			width:100%;
		}
		& h2{
			font-size:1.1rem;
			color:var(--MainColor);
			margin:10px 2px;
			text-align: left;
		}
	}
}
#ProfileDefSection{
	padding:30px 0 50px;
	& #ProfileFrame{
		display:grid;
		& .div1{
			order:2;
			& img{
				width:90%;
				margin:10px auto;
			}
		}
		& .div2{
			order:1;
			& h1{
				width:100%;
				color:var(--MainTextColor);
				margin:10px 2px;
			}
			& h3{
				width:100%;
				text-align: left;
			}
		}
		& .div3{
			order:3;
		}
	}
}
#TeamGallery{
	position: relative;
	min-height: 720px; /* Altura de los óvalos */
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: visible;
}
.GalleryServiceModStatic{
	margin: -110px 0 0 50px;
}
#MemberSlider {
	width: 100%;
	position: relative;
	z-index: 5;
	& .ProfImage {
		display: flex !important;
		justify-content: center;
		align-items: center;
	}
	& img{
		border-radius: 50%;
		margin: 0 auto 30px;
		width: 577px; /* Tamaño real fijo */
		height: 577px;
		object-fit: cover;
	}
}
#SliderBg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 550px;
	height: 720px;
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;

	& #Circle {
		width: 550px;
		height: 550px;
		border-radius: 50%;
		position: absolute;
		background-color: var(--MidColor);
		z-index: 2;
	}
	& #Oval1 {
		position: absolute;
		width: 550px;
		height: 720px;
		border: 1px solid var(--MainColorBG3);
		border-radius: 50%;
		z-index: 1;
		pointer-events: none;
		animation: rotateOval1 12s linear infinite;
	}
	& #Oval2 {
		position: absolute;
		width: 550px;
		height: 720px;
		border: 1px solid var(--LightColor2);
		border-radius: 50%;
		z-index: 0;
		pointer-events: none;
		animation: rotateOval2 12s linear infinite;
	}
}

@keyframes rotateOval1 {
	from { transform: rotate(45deg); }
	to { transform: rotate(405deg); }
}

@keyframes rotateOval2 {
	from { transform: rotate(-45deg); }
	to { transform: rotate(315deg); }
}
.ServiceModStatic{
	display:inline-flex;
	justify-content:center;
	align-items: center;
	margin-top: 30px;
}
#ServiceStaticImg{
	width:550px !important;
	height: 550px !important;
}
#ContactDefSection{
	padding:95px 0 125px;
	background-color: var(--MainColorBG2);
	color:white;
}
#ContactData{
	width:90%;
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	align-items:flex-start;
	margin:40px 0;
	padding-left:50px;
	& li{
		text-align:left;
		margin-bottom:15px;
		& a{
			color:white;
			transition: ease all 0.3s;
		}
		& a:hover{
			color:var(--LightColor2);
		}
	}
}
.image-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 16px;
    width: 100%;
    max-width: 800px;
    min-height: 400px;
    margin: 0 auto;
}

.grid-cell {
    display: flex;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}

.grid-cell img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    will-change: transform;
}

/* Alineaciones exactas por celda */
.top-left{
	justify-content: flex-end;
	align-items: flex-end;
	& img{
		width:80%;
	}
}
.top-right{
	justify-content: flex-start;
	align-items: flex-end;
	& img{
		width:100%;
	}
}
.bottom-left{
	justify-content: flex-end;
	align-items: flex-start;
	& img{
		width:65%;
	}
}
.bottom-right{
	justify-content: flex-start;
	align-items: flex-start;
	& img{
		width:85%;
	}
}



/*FINISH CUSTOMS*/
/*Tablet*/
@media (min-width: 600px){
	header{
		& #HeaderStatic{
			& #HeaderTitles{
				& h1{
					text-align:center;
				}
			}
		}
		& #HeaderProduct{
			& #HeaderTitles{
				& h1{
					text-align:center;
				}
			}
		}
	}
	#SliderTitles{
		margin:9% 0 0 10%;
		& h2{
			margin-right:22%;
		}
	}
	footer{
		& a{
			color:var(--MainTextColor) !important;
		}
		& a:hover{
			color:var(--MainColorBG2) !important;
		}
	}
	#HeaderNetworks{
		width:70%;
	}
	#YouTubeVideo{
        width:560px;
        height:315px;
        margin:20px auto
    }
	#YouTubeVideoMain{
        width:560px;
        height:315px;
        margin:20px auto
    }
	#Terms{
		display:flex;
		flex-direction:row;
		justify-content:space-around;
		align-items:center;
	}
	#Terms li{
		margin:10px 15px;
	}
	#Copyright{
		text-align:left;
	}
	#DevelopedBy{
		text-align:right;
	}
	.BlogName{
		font-size: 1.4rem;
	}
	.Button1,.Button2,.Button3{
		max-width:70%;
	}
	#ManteinanceMode{
		flex-direction:row;
		height:100vh;
	}
	#ManteinanceMode .BlockHalf:last-child{
		text-align:left;
	}
	#ErrorPage{
		flex-direction:row;
		align-items:center;
	}
	#ErrorTitle{
		font-size:2rem;
	}
	/*CUSTOMS*/
	
}
/*PC*/
@media (min-width: 900px){
	body{
		font-size:1rem;
		overflow-x:visible;
	}
	#HeaderBG{
		background-image:url('../Images/guinard-noriega-iso-color.svg');
		background-position: 80% bottom;
		background-repeat: no-repeat;
		background-size:500px;
	}
	#WhatsappButton {
        /* No necesita estilos adicionales, mantiene los de la clase Button1 */
        position: static;
    }
	header{
		& #HeaderStatic{
			background-image: url('../Images/guinard-noriega-iso-color.svg');
			background-position: bottom right;
			background-repeat: no-repeat;
			background-size:550px;
			& #HeaderTitles{
				display:flex;
				flex-direction:column;
				justify-content:flex-end;
				width:50%;
				padding-bottom:75px;
				& h1{
					text-align:left;
					min-height:auto;
				}
				& p{
					min-height:auto;
					color:var(--MainTextColor);
					font-size:0.9rem;
					line-height:1.9;
				}
			}
		}
		& #HeaderProduct{
			padding:157px 0 20px 0;
			& #ProductTitles{
				display:flex;
				flex-direction:row;
				justify-content:flex-end;
				padding-top:50px;
				& h1{
					text-align:left;
					min-height:auto;
					letter-spacing:5px;
				}
				& p{
					margin:75px 0 0 30px;
					min-height:auto;
					color:white;
					font-size:0.9rem;
					line-height:1.9;
				}
			}
		}
		& #HeaderMain{
			flex-direction:row;
			align-items:flex-end;
			& #HeaderAction{
				width:50%;
				order:1;
				&  a{
					margin:30px auto;
				}
			}
			& #HeaderInfo{
				display:flex;
				flex-direction:column;
				justify-content:flex-end;
				width:50%;
				order:2;
				& h2{
					min-height:auto;
					letter-spacing:5px;
				}
				& img{
					width:40%;
					margin-left:10px;
				}
				& p{
					min-height:auto;
					color:white;
					font-size:0.9rem;
					line-height:1.9;
				}
			}
		}
	}
	main{
		min-height:calc(100vh - 30vh);
		overflow:visible;
	}
	footer{
		padding:0 0 20px 0;
		& .Footer2{
			padding:20px 0 30px 0;
			& #FooterLogo{
				display: inline-flex;
				align-items: center;
				min-height:300px;
				text-align: left;
				vertical-align:top;
				& a img{
					width:280px;
				}
			}
			& #FooterLinks{
				display:inline-flex;
				flex-direction:row;
				min-height:300px;
				align-items:flex-start;
				vertical-align:top;
				margin:0;
				& div{
					width:40%;
					margin:0 0 20px 9px;
				}
				& .Active {
					font-weight: bolder;
				}
			}
		}
	}
	#FooterMenu{
		list-style: none;
		text-align:left;
		& li{
			margin:10px 0;
		}
		& .Active {
			font-weight: bolder;
		}
	}
	#FooterTerms{
		& p{
			margin:0;
			text-align:right;
		}
	}
	#FooterCopyright{
		& p{
			margin:0;
			text-align:left;
		}
	}
	.active{
		font-weight:bolder;
	}
	#TopBar{
		padding:0;
		height:38px;
		display: flex;
		flex-direction:row;
		justify-content:flex-end;
		align-items: center;
		& > a{
			font-size:1rem;
			padding:5px 10px;
		}
		#HeaderNetworks{
			width:1180px;
			margin:10px 0;
			display:flex;
			justify-content:flex-end;
			& li{
				display:flex;
				justify-content:center;
				align-items:center;
			}
			& li a{
				color:white;
				transition: color 0.6s cubic-bezier(0.25,1,0.5,1);
			}
			& li a:hover{
				color:var(--LightColor2)
			}
			& li a i{
				font-size:1.9rem;
			}
		}
	}
	#HeaderContent{
		min-height:120px;
		padding:10px 0;
		position:relative;
		z-index:2;
		& #MobileBars{
			display:none;
		}
		#HeaderStructure{
			display:flex;
			flex-direction:row;
			justify-content:space-between;
			align-items:center;
			#MobileBars{
				display:none;
			}
			.HeadLogo{
				margin:0;
				width:250px;
				overflow:visible;
			}
			#HeadLogoHome{
				width:283px;
			}
			nav{
				display:inline-block;
				position:relative;
				right:0;
				top:0;
				height:71px;
				z-index:3;
				overflow-x:visible;
				transition: 0.5s;
				grid-column:2;
				grid-row: 2;
				background-color:transparent;
			}
			#WebMenu{
				opacity:100%;
				list-style:none;
				padding:20px 0 0 0;
				display:flex;
				align-items:center;
				justify-content:flex-end;
				& li{
					position: relative;
					height:30px;
					white-space: nowrap;
					margin:10px auto;
					text-align:center;
					border-bottom:none
				}
				& li a{
					padding:5px 15px;
					display:flex;
					align-items:center;
					justify-content:center;
					color:var(--DarkTextColor);
					font-size:1em
				}
				& li:first-child{
					display: none;
				}
				& .SubMenu{
					display: none;
					position: absolute;
					left: 0;
					top: 100%;
					list-style: none;
					padding: 0;
					margin: 0;
					background-color: var(--MainColorBG); /* Cambia esto según tu esquema de colores */
					box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
					& li:first-child {
						font-size:1em;
						width:100%;
					}
					& li {
						display: block;
						height:40px;
					}
					& li a {
						display: block;
						padding:5px 15px;
						font-weight:normal;
						color:var(--MainTextColor) !important;
						background-color:var(--MainColorBG);
						font-size:1em !important;
						border-radius:0;
						text-align: left;
					}
					& li a:hover {
						color:var(--MainTextColor);
					}
				}
				/* Mostrar el submenú al pasar el ratón por encima del elemento padre */
				& .dropdown:hover .SubMenu {
					display: block;
				}
			}
			.menu-icon{
				display:none;
			}
			#HeaderNetworks{
				display:none;
			}
		}
	}
	.section{
		padding:75px 0;
	}
	.section h1{
		font-size:2.3rem;
		margin:30px 0 30px;
	}
	#BriefLogo {
		width: 450px !important;
		max-width: 450px !important;
		margin: 40px auto 40px 50%;
	}
	.SectionTitle{
		text-align: left;
	}
	.SectionTitle h2{
		font-size:2.9rem;
	}
	/*BUTTONS*/
    .Button1,.Button2,.Button3{
        max-width:290px;
    }
	#NoOpinionInfo > .Button1{
		width:220px;
		max-width:220px;
	}
	.BlogName{
		font-size: 1.8rem;
	}
	#Authors{
		text-align:left;
	}
	#ErrorPage > .BlockHalf > img{
		width:50%;
	}
	#ErrorTitle{
		font-size:3.5rem;
		text-align:left;
	}
	#SearchFormIndex > h1{
		font-size:4rem;
	}
	#SearchFormIndex > p{
		width:70%;
		margin:0 auto;
	}
	#SearchFormIndex > #SearchBar{
		width:70%;
	}
	#HeadTitle{
		display:inline-block;
		color:var(--MainColor);
		font-size:1.9rem;
		text-align:left;
	}
	/*BLOG*/
	.ArticlesBlock{
		margin:20px 15px;
	}
	.BlogName{
		font-size:1.2rem;
	}
	#BlogTitle{
		font-size:2.5rem;
	}
	#BlogData{
		flex-direction:row;
		justify-content:flex-start;
	}
	#BlogData > div{
		margin:10px 15px;
	}
	/*CUSTOMS*/
	#AwardSlider{
		& img{
			width:110px
		}
	}
	.SectionGalleryImage{
		width:550px !important;
	}
	#ProfileDefSection{
		& #ProfileFrame{
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-template-rows: auto 1fr; /* La primera fila para el nombre, la segunda para la bio */
			grid-column-gap: 0px;
			grid-row-gap: 0px;
			align-items: start; /* Evita que los div se estiren para llenar el espacio sobrante */
			& .div1 { grid-area: 1 / 1 / 3 / 2; }
			& .div2 { grid-area: 1 / 2 / 2 / 3; }
			& .div3 { grid-area: 2 / 2 / 3 / 3; }
		}
		& .ProfileEducation{
			padding-top: 30px;
			column-count: 2;
			column-gap: 40px;
			text-align: justify;
			& h2, & h3 {
				break-after: avoid; /* Evita que el título quede solo al final de una columna */
				break-inside: avoid; /* Evita que el título se parta a la mitad */
				margin-top: 0;
			}
			& p, & ul {
				margin-bottom: 20px;
				break-inside: avoid; /* Opcional: mantiene párrafos o listas completas en una sola columna */
			}
		}
	}
	#ServiceDetailDefSection{
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		grid-template-rows: auto repeat(5, 1fr); /* La primera fila se ajusta al contenido */
		grid-column-gap: 0px;
		grid-row-gap: 0px;
		& .div1 { grid-area: 1 / 1 / 2 / 6; }
		& .div2 { grid-area: 2 / 1 / 7 / 4; text-align: left; }
		& .div3 { grid-area: 2 / 4 / 7 / 6; }
	}
	#ContactData{
		margin:20px 0;
	}
}