@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Oswald:wght@200..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.cdnfonts.com/css/platonica');
/* ------------------- VARIABLES GENERICAS PARA EL SITIO ------------------- */
:root {

	/* Colors: */
	--white-color: #ffff;
	--color-inicio-body: #4e8d4a;
	--primer-color: #348F41;
	--segundo-color: #286C46;
	--tercer-color: #80BC00;
	--cuarto-color: #98989A;
	--quinto-color: #F8B826;
	--sexto-color: #F78930;
	--color-gris-p: #969799;
	--color-grisDos: #707070;
}

@keyframes float {
	0% {
    transform: translatey(0px);
	}
	50% {
			transform: translatey(-20px);
	}
	100% {
			transform: translatey(0px);
	}
}

@keyframes float2 {
	0% {
    transform: translatey(0px);
	}
	50% {
			transform: translatey(20px);
	}
	100% {
			transform: translatey(0px);
	}
}

@keyframes wave {
	0%, 100% {
			transform: translateY(0);
			font-variation-settings: "wght" 400;
	}
	50% {
			transform: translateY(-20px);
			font-variation-settings: "wght" 900;
	}
	/* 
	wght peso tipografico
	400 valor numerico del peso
	*/
}



*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: "Montserrat", sans-serif;
}

/* -------------------------------------------------------------------------- */
/*                                   CURSOR                                   */
/* -------------------------------------------------------------------------- */
.cursor{
	position: fixed;
	width: 20px;
	height: 20px;
	background: #000;
	border-radius: 50%;
	pointer-events: none;
	z-index: 5;
	transform: translate(-50%, -50%);
	transition: 1s ease;
	display: none;
}

#p3{
  display: none;
}

/* ------------------- MENU HEADER GENERICO ------------------- */
#loadingScreen {
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.9);
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-size: 24px;
	text-align: center;
	transition: opacity 1s ease-in-out;
}

header{
	/* position: sticky; */
	position: fixed;
	z-index: 3;
	top: 0;
	width: 100%;
	opacity: 0;
	transition: .5s ease;
	background: var(--white-color);
	-webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.52);
	-moz-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.52);
	box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.52);
}
 
#menu-mobile-header
{
	display: none;
}

#nav-interior{
	gap: 40px;
}

#menu-desktop-header #navbarNavDropdown{
	justify-content: end;
}

#nav-interior .menu-item{
	position: relative;
	font-size: 14px;
}

#nav-interior .menu-item::after{
	content: '';
	display: block;
	position: absolute;
	bottom: -5px;
	left: 0;
	margin: 1px;
	width: 0;
	height: 1px;
	background-color: #286C46;
	transition: .5s ease;
}

#nav-interior .menu-item:nth-child(1):after, 
#nav-interior .menu-item:nth-child(2):after
{
	display: none;
}

#nav-interior .menu-item:hover::after{
	width: 100%;
}

#nav-interior .menu-item.hover-disabled::after {
	content: none;
}

#nav-interior .menu-item.active::after,
#nav-interior .current-menu-item::after {
	width: 100%;
}

#header-padre #nav-interior li a{
	color: var(--segundo-color);
	padding: 0;
}

#background-top-header{
	background-color: var(--color-inicio-body);
	width: 100%;
	height: 8px;
}

.navbar .dropdown-menu{
	border-radius: 0;
	border: 0;
	text-align: center;
}

.navbar .dropdown-menu li a:hover{
	background: var(--segundo-color);
	color: #fff !important;
}

#dropdown-menu-1{
	width: 300px;
  left: -70px;
}
#dropdown-menu-1 li a{
	height: 40px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
#dropdown-menu-1 li::after{
	display: none !important;
}
#dropdown-menu-2{
	left: -68px;
	width: 200px;
}
#dropdown-menu-2 li a{
	height: 40px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
#dropdown-menu-2 li::after{
	display: none !important;
}

#menu-interior a img{
	width: 60%;
}

#menu-header{
	margin: 10px 0;
}

/* INICIO (incluye todo la landing de inicio) --------------------------------------------------- */
#body_8{
	background: var(--primer-color);
	width: 100%;
	height: 100vh;/
}
#content-inicio{
	position: relative;
	margin-top: 80px; /*en caso de que el header fuera fixed*/
}
#inicio{
	overflow: hidden;
	position: relative;
	/* position: relative;
  overflow-x: hidden;
  overflow-y: auto; */
}

#content-inicio  .circulo-left{
	position: absolute;
	left: -22%;
  top: 0px;
	animation: float 4s ease-in-out infinite;
}

#mobile-height .row .col-izquierda img{
  position: absolute;
	width: 30vw;
}

#content-inicio .circulo-left img{
	width: 25vw;
}

#content-inicio .col-izquierda{
	height: 50vh;
	display: flex;
	align-items: center;
}

#content-inicio .col-derecha{
	position: relative;
}
#content-inicio .col-derecha .circulo-top{
	position: absolute;
  top: -45px;
  width: 10vw;
  left: 140px;
	animation: float 4s ease-in-out infinite;
}

#content-inicio .col-derecha .circulo-right{
	position: absolute;
  width: 15vw;
  right: -18%;
  z-index: 2;
  top: 30px;
	animation: float 4s ease-in-out infinite;
}

#content-inicio  .lineaverdegris{
	position: absolute;
  top: -150px;
  right: -100px;
	z-index: 1;
	width: clamp(340px, 50%, 50vw);
	/*
		Minimo: 200px
		Ideal: 50%
		Maximo: 600px
		width: clamp(200px, 50%, 600px);
	*/
}

#content-inicio .lineaverdegris img:nth-child(2){
  display: none;
}

#contenedor-cards{
	max-width: 1000px;
	height: 100%;
	margin: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}

#contenedor-cards a{
	margin-bottom: 70px;
	position: relative;
	text-decoration: none;
	color: var(--unnamed-color-969799);
	text-transform: uppercase;
	padding: 20px;
}
#contenedor-cards a:hover{
	color: var(--white-color);
}


#video-texto{
	max-width: 1000px;
  background: var(--unnamed-color-4e8c49);
  margin: auto;
	margin-top: -15%;
	/* margin-top: -40px; */
}
#video-texto .row h2{
	font-size: clamp(1rem, -0.875rem + 6vw, 2.5rem);;
}

#p-video-contenedor .circulo-footer{
	display: none;
}

#video-interior {
	width: 100%;
	z-index: 1;
	padding: 0;
	position: relative;
	height: auto;
	border-radius: 55px;
	border: 5px solid green;
	box-shadow: 0px 10px 30px -8px rgba(0,0,0,0.75);
	-webkit-box-shadow: 0px 10px 30px -8px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 10px 30px -8px rgba(0,0,0,0.75);
}
#fondo-negro-video {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	left: 1px;
  top: -1px;
	background: rgba(0, 0, 0, .5);
	border-radius: 50px;
}
#video-interior #poster_principal{
	position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50px;
	object-fit: cover;
  object-position: center;
}
#prueba{
	clip-path: polygon(0% 30%, 100% 0%, 100% 100%, 0% 100%);
  background: var(--white-color);
  width: 100%;
  height: 100vh;
  position: relative;
	margin-top: -150px;
}
#prueba::after{
	content: "";
  display: block;
  position: absolute;
  bottom: -40px;
  width: 100%;
  clip-path: polygon(0 69%, 100% 0%, 100% 100%, 0 100%);
  height: 230px;
  background: var(--unnamed-color-4e8c49);
	margin: -1px;
}

#contenedor-cards a::before{
	content: "";
	position: absolute;
	left: -50px;
	top: 0;
	display: block;
	width: 1px;
	height: 100%;
	background: var(--color-inicio-body);
	opacity: .5;
}
#contenedor-cards a:nth-child(2)::before{
	display: none;
}

span.bullets {
	margin: 0 20px;
}

#play-video {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 200px;
  height: 100px;
	z-index: 2;
	cursor: pointer;
}

#play-video img{
	width: 100%;
	height: 100%;
}

#video-texto .circulo-video-1{
	position: absolute;
  left: -28%;
  width: 35%;
  bottom: -150px;
  z-index: -1;
  animation: float2 4s ease-in-out infinite;
}
#video-texto .circulo-video-2 {
	position: absolute;
	width: 20%;
	right: -120px;
	z-index: -1;
	/* top: 200px; */
	top: 15vw;
	animation: float 4s ease-in-out infinite;
}

#inicio .circulo-footer{
	right: -90px;
	position: absolute;
	width: 20%;
	z-index: 1;
	bottom: -140px;
	animation: float 4s ease-in-out infinite;
}

#video_header{
	width: 100%;
  height: 100%;
	border-radius: 50px;
}

/* AREA DE NEGOCIOS ( SOLUCION CON ELEVACION ) --------------------------------------------------- */
#solucion-elevacion{
	height: 100vh;
	width: 100%;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
#bottom-header{
	display: none;
	justify-content: space-between;
}

#solucion-elevacion img{
	/* width: 50%; */
	width: 40%;
	transition: .8s ease;
}
#solucion-elevacion img.active{
	width: 20%;
  transform: translateY(-150%);
}

/* --------------------------------------- MENU INTERIOR AREA ---------------------------------------  */
/* PORQUE ELGIR KONE */
#body_173{
	background: #469dab;
	width: 100%;
	height: 100vh;
}

#kone{
	position: relative;
	overflow-x: hidden;
}

#kone-descripcion{
	margin-top: 100px;
	height: 100%;
	position: relative;
}

#logo-bajada-kone{
  width: 20%
}

#kone-descripcion .circulo-1{
	position: absolute;
	width: 20vw;
	left: -12%;
	animation: float 4s ease-in-out infinite;
}

#kone-descripcion .circulo-2{
	position: absolute;
  width: 6vw;
  left: 5%;
  bottom: 18%;
	animation: float2 4s ease-in-out infinite;
}

#kone-descripcion .circulo-3{
	position: absolute;
	width: 18vw;
	right: -8%;
	bottom: 12%;
	animation: float 4s ease-in-out infinite;
}

#kone-descripcion .circulo-4{
	position: absolute;
  width: 6vw;
  right: 5%;
  top: 5%;
	animation: float2 4s ease-in-out infinite;
}

.descripciones-kone {
  cursor: pointer;
}
.descripciones-kone img{
	width: 45px;
	transition: .3s ease;
}
.descripciones-kone h6{
	text-transform: uppercase;
	margin-top: 10px;
	font-size: .8rem;
}
.descripciones-kone p {
	opacity: 0;
	transform: translate(-50px, -15px);
	transition: .3s ease;
	width: 250px;
	font-size: 12px;
}

.top-title-kone{
	/* transform: translate(-2px, 18px); */
	transform: translate(0px, 30px);
	transition: .3s ease;
}	

#icons-kone  .p_kone_mobile{
  display: none;
}

#row-koneMapa-mobile{
  display: none;
}


/* PORQUE ELGIR FABRIMETAL ( TEMPLATE NAME: Por que Elegir Fabrimetal estos estilos corren para los tres menus de areas que son iguales ) */
#body_176{
	background: #22536b;
	width: 100%;
	height: 100vh;
	overflow-x: hidden;
}

#porqueFbarimetal{
	padding-top: 100px;
	min-height: 100%;
}


#title-porquefabrimetal{
	display: flex;
  justify-content: center;
	align-items: center;
}
#titulo-svg{
	background-image: url('https://fabrimetal.betatester.cl/wp-content/uploads/2025/04/logo-fabrimetal-porque.svg');
  width: 200px;
	height: 50px;
	margin: 0 20px;
  position: relative;
  display: block;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

p.porque-fabri-p_mobile{
	display: none;
}

#parrafo-generico-mobile{
	display: none;
}
.por-que-fabri {
  cursor: pointer;
}
.por-que-fabri img{
	transition: .3s ease;
	height: 60px;
}
.por-que-fabri h6{
	text-transform: uppercase;
	font-size: .6rem;
	margin-top: 10px;
}
.por-que-fabri p {
	opacity: 0;
	transform: translate(-60px, -15px);
	transition: .3s ease;
	width: 250px;
	font-size: 12px;
}

.por-que-fabri{
	transform: translate(0px, 30px);
	transition: .3s ease;
}	

/* .img-certificados a{
	width: 18%;
} */

.img-certificados a img{
	width: 100%;
	object-fit: contain;
	object-position: center;
	margin: 0 15px;
	transition: .3s ease;
	box-shadow: 0px 0px 20px -4px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: 0px 0px 20px -4px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 20px -4px rgba(0,0,0,0.75);
}
.img-certificados a img:hover{
	transform: scale(1.1);
}
#porqueFbarimetal .circulo-1{
	position: absolute;
	width: 20vw;
	left: -12%;
	animation: float 4s ease-in-out infinite;
}

#porqueFbarimetal .circulo-2{
	position: absolute;
  width: 6vw;
  left: 5%;
  bottom: 5%;
	animation: float2 4s ease-in-out infinite;
}

#porqueFbarimetal .circulo-3{
	position: absolute;
  width: 18vw;
  right: -5%;
  bottom: 5%;
	animation: float 4s ease-in-out infinite;
}

#porqueFbarimetal .circulo-4{
	position: absolute;
  width: 6vw;
  right: 5%;
  top: 15%;
	animation: float2 4s ease-in-out infinite;
}

/* DESCARGA CATALOGOS  */
#body_178{
	background: #22536b;
	width: 100%;
	height: 100vh;
	overflow-x: hidden;
}

#catalogos {
	padding-top: 100px;
	min-height: 100vh;
}

#catalogos .circulo-1{
	position: absolute;
  width: 13vw;
  left: -2%;
  top: 35%;
	animation: float 4s ease-in-out infinite;
}

#catalogos .circulo-2{
	position: absolute;
  width: 6vw;
  left: 15%;
  bottom: 18%;
	animation: float2 4s ease-in-out infinite;
}

#catalogos .circulo-3{
	position: absolute;
	width: 15vw;
	right: 3%;
	bottom: 10%;
	animation: float 4s ease-in-out infinite;
}

#catalogos .circulo-4{
	position: absolute;
  width: 8vw;
  right: -3%;
  top: 15%;
	animation: float2 4s ease-in-out infinite;
}

#acordeon-catalogos .accordion-item{
	background: transparent;
	border: none;
	border-radius: 20px;
	margin: 10px 0;
}

#acordeon-catalogos .accordion-item .accordion-header{
	max-width: 600px;
	margin: auto;
}

#acordeon-catalogos .accordion-item .accordion-header button:hover{
	background: #5ec3bd;
	color: #22536b;
}

#acordeon-catalogos .accordion-item .accordion-header button{
	border-radius: 50px;
	padding: 8px;
	display: flex;
	justify-content: center;
	color: #22536b;
	font-weight: 600;
}
.accordion-button::after{
	margin-left: 0 !important;
	position: absolute;
	right: 15px;
}

#acordeon-catalogos .accordion-item .accordion-header .accordion-button:not(.collapsed){
	background: #5ec3bd;
	box-shadow: none;
	color: #22536b;
}

#acordeon-catalogos .accordion-body{
	text-align: center;
}
#acordeon-catalogos .accordion-body a{
	text-decoration: none;
	color: var(--white-color);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: .3s ease;
}

#acordeon-catalogos .accordion-body a:hover{
	color: #5ec3bd;
}

#acordeon-catalogos .accordion-body p{
	color: var(--white-color);
	font-size: 16px;
	font-weight: 600;
	margin: 0;
	padding: 10px 0;
}

#kone-catalogos{
	width: 300px;
	margin: auto;
}
/* PROYECTOS ICONICOS */
#body_180{
	background: #5ec3bd;
	overflow-x: hidden;
}

#proyectos-iconicos {
	padding-top: 100px;
	min-height: 100vh;
	position: relative;
}

#cards-p-iconicos{
	max-width: 400px;
}
#circle-card{
	width: 130px;
}

#descripcion-card-proyectosiconicos{
	width: 250px;
}

#cards-p-iconicos{
	position: relative;
}

#circle-card img{
	border-radius: 100px;
	aspect-ratio: 1/1;
}
#circle-card{
	border-radius: 100px;
	transition: .1s ease;
}
#circle-card:hover{
	transform: scale(1.05);
}
#cards-p-iconicos .card-body{
	position: relative;
	top: 20px;
	left: 2px;
}
#cards-p-iconicos div .titulo{
	position: relative;
	width: max-content;
  background: #22536b;
	color: var(--white-color);
	text-transform: uppercase;
	left: -15px;
  z-index: -1;
  text-align: center;
  top: 5px;
  border-radius: 0px 20px 20px 0px;
  font-size: clamp(0.75rem, 0.75rem + 0vw, 0.75rem);
	padding: 5px 20px;
	font-weight: 600;
}

#cards-p-iconicos div .sub-titulo{
	font-size: 14px;
	width: 300px;
	margin-left: 10px;
	/* margin-left: 5px; */
}
#cards-p-iconicos div .descripcion > p{
	width: 300px;
	font-size: 12px;
	margin-left: 5px;
	color: var(--white-color);
}

#title-pi{
	position: relative;
	width: 70%;;
  margin: auto;
}

#title-pi::before{
	content: '';
  position: absolute;
  display: flex;
  width: 30%;
  height: 1px;
  background: var(--white-color);
  left: 0;
  top: 20px;
}

#title-pi::after{
	content: '';
  position: absolute;
  display: flex;
  width: 30%;
  height: 1px;
  background: var(--white-color);
  right: 0;
  top: 20px;
}



#proyectos-iconicos .trazado-1-left{
	position: absolute;
  width: 15%;
  top: 25%;
  left: -80px;
	animation: float2 4s ease-in-out infinite;
}

#proyectos-iconicos .trazado-2-left{
	position: absolute;
  width: 15%;
  top: 55%;
  left: -80px;
	animation: float 4s ease-in-out infinite;
}

#proyectos-iconicos .trazado-1-right{
	position: absolute;
  width: 15%;
  top: 25%;
  right: -120px;
	animation: float 4s ease-in-out infinite;
}

#proyectos-iconicos .trazado-2-right{
	position: absolute;
  width: 15%;
  top: 55%;
  right: -100px;
	animation: float2 4s ease-in-out infinite;
}


/* HABLEMOS ( ---- circulos flotantes se encuentran aca ---- )*/
#body_182{
	background: #469dab;
}

#hablemos {
  padding-top: 100px;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

#hablemos .circulo-1{
  position: absolute;
  width: 13vw;
  left: -2%;
  top: 35%;
  animation: float 4s ease-in-out infinite;
}

#hablemos .circulo-2{
	position: absolute;
  width: 6vw;
  left: 15%;
  bottom: 18%;
	animation: float2 4s ease-in-out infinite;
}

#hablemos .circulo-3{
	position: absolute;
	width: 15vw;
	right: 3%;
	bottom: 10%;
	animation: float 4s ease-in-out infinite;
}

#hablemos .circulo-4{
	position: absolute;
  width: 8vw;
  right: -3%;
  top: 15%;
	animation: float2 4s ease-in-out infinite;
}


/* AREA DE NEGOCIOS ( SERVICIOS TECNICOS EN ELEVACION ) --------------------------------------------------- */
/* POR QUE ELEGIR FABRIMETAL */
#body_298{
	background: #f8b83e;
	width: 100%;
	height: 100vh;
	overflow-x: hidden;
}

/* AREAS MENTENCION - REPARACION - NORMALIZACION - MODERNIZACION */
#mantencion,
#reparacion,
#normalizacion, 
#modernizacion
{
	min-height: 100%;
}
#mantencion{
	background: #ee5a29;
	position: relative;
}

#mantencion .trazado-1-left{
	width: 15%;
  position: absolute;
  left: -6%;
  bottom: 10%;
  animation: float 4s ease-in-out infinite;
}

#mantencion .trazado-2-left{
	width: 15%;
  position: absolute;
  left: -5%;
  bottom: -10%;
  animation: float2 4s ease-in-out infinite;
	z-index: 5;
}

#mantencion .trazado-1-right{
	width: 15%;
  position: absolute;
  right: -5%;
  top: 5%;
  animation: float 4s ease-in-out infinite;
}

#mantencion .trazado-2-right{
	width: 15%;
	position: absolute;
	right: -5%;
	top: 25%;
	animation: float2 4s ease-in-out infinite;
}
#leerMantencion{
	display: none;
}



#reparacion{
	background: #f78930;
}
#reparacion .trazado-1-left{
	width: 15%;
  position: absolute;
  left: -6%;
  bottom: 10%;
  animation: float 4s ease-in-out infinite;
}

#reparacion .trazado-2-left{
	width: 15%;
  position: absolute;
  left: -5%;
  bottom: -10%;
  animation: float2 4s ease-in-out infinite;
}

#reparacion .trazado-1-right{
	width: 15%;
  position: absolute;
  right: -5%;
  top: 5%;
  animation: float 4s ease-in-out infinite;
}

#reparacion .trazado-2-right{
	width: 15%;
	position: absolute;
	right: -5%;
	top: 25%;
	animation: float2 4s ease-in-out infinite;
}


#normalizacion{
	background: #f8b826;
}
#normalizacion .trazado-1-left-n{
	width: 15%;
  position: absolute;
  left: -6%;
  bottom: 10%;
  animation: float 4s ease-in-out infinite;
}

#normalizacion .trazado-2-left-n{
	width: 15%;
  position: absolute;
  left: -5%;
  bottom: -10%;
  animation: float2 4s ease-in-out infinite;
}

#normalizacion .trazado-1-right-n{
	width: 15%;
  position: absolute;
  right: -5%;
  top: 5%;
  animation: float 4s ease-in-out infinite;
}

#normalizacion .trazado-2-right-n{
	width: 15%;
	position: absolute;
	right: -5%;
	top: 25%;
	animation: float2 4s ease-in-out infinite;
}


#modernizacion{
	background: #ee5a29;
}

#modernizacion .trazado-1-right-m{
	width: 15%;
  position: absolute;
  right: -5%;
  top: 5%;
  animation: float 4s ease-in-out infinite;
}

#modernizacion .trazado-2-right-m{
	width: 15%;
	position: absolute;
	right: -5%;
	top: 25%;
	animation: float2 4s ease-in-out infinite;
}

#container-modernizacion .row p{
	margin-bottom: 0;
	padding: 2px 0;
}

#info-modernizacion{
  display: none;
}


#custom-select-proyectos{
	width: 320px;
  margin: auto;
	position: relative;
	cursor: pointer;
	user-select: none;
}

.custom-select-trigger {
  background: transparent;
  padding: 8px 0px;
  border: 1px solid #fff;
  border-radius: 30px;
	position: relative;
}

#custom-select-trigger img{
	position: absolute;
	right: 10px;
  top: 7px;
}

.custom-options {
 	position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #fff;
  border-top: none;
  overflow-y: auto;
  z-index: 2;
	width: 300px;
	margin: auto;
}

.custom-option {
  padding: 10px 15px;
  border-top: 1px solid var(--sexto-color);
	color: var(--sexto-color);
}

.custom-option:hover {
  background: #eee;
}

.custom-options{
  display: none;
}

.custom-options.active {
  display: block;
}


#modal-proyectos {
  width: 90%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  display: none;
  overflow-y: auto;
  padding: 3vw 0;
}

#modal-proyectos .modalP{
  position: relative;
  width: 100%;
  height: 100vh;
}
#modal-proyectos .modalP .close-proyectos{
  position: absolute;
  right: 25%;
  top: 5px;
  cursor: pointer;
  font-size: 20px;
  background: #fff;
  padding: 0 9px;
  margin: auto;
  color: #000 !important;
  border-radius: 100px;
  margin: auto;
}

#modal-proyectos ul {
	margin: 0;
	padding-bottom: 30px;
}

#myTabContentAB{
	min-height: 100vh;
	position: relative;
}

#myTabContentAB .tab-pane{
	height: 100%;
	width: 100%;
	position: relative;
}

.titulo-descripcion-modal{
	position: relative;
}

.titulo-descripcion-modal p{
	background: #f8b83e;
	margin-top: -15px;
  border-radius: 50px;
	padding: 5px 15px;
	color: #fff;
}

#header-proyecto-modal{
	width: 50%;
	margin: auto;
	background: #ef5c34;
	border-radius: 70px;
	padding: 20px 40px;
}

#myTab-AB{
  border: none;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 30px;
}
#myTab-AB li button{
	background: transparent;
	border-radius: 20px;
	color: #fff;
	padding: 8px 30px;
	border: 1px solid #fff;
	text-transform: uppercase;
}

#myTab-AB li button.active{
	color: #F78930;
	font-weight: bold;
	background: #fff;
	border: 1px solid #fff;
}

#header-proyecto-modal p{
	margin: 0;
}


#modal-proyectos ul li{
	list-style: none;
	margin: 15px 0;
}

#modal-proyectos ul li img{
	filter: invert(1);
}


#swiper-servicios {
	min-height: 600px;
	height: 100vh;
	display: none;
}

.swiper-servicios .swiper-slide {
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.swiper-servicios .swiper-interno {
	width: 80%;
	height: 100%;
	overflow: clip;
	overflow-y: visible;
}

.swiper-servicios .swiper-interno .swiper-slide img {
	/* width: 240px; */
	width: 280px;
	display: block;
	border-radius: 100%;
	object-fit: cover;
	transition: .3s ease;
	transform-origin: center center;
	aspect-ratio: 1/1;
}


.swiper-servicios .swiper-interno .swiper-slide img:hover{
	position: relative;
	z-index: 999 !important;
	transform: scale(1.1);
}



.flechitasSTEE .swiper-button-next-{
	position: absolute;
  top: 45%;
  right: 40px;
  width: 20px;
  height: 20px;
	background-image: url('https://fabrimetal.betatester.cl/wp-content/uploads/2025/04/Icon-ion-ios-arrow-dropright-circle.svg');
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	cursor: pointer;
	z-index: 3;
}

.flechitasSTEE .swiper-button-prev-{
	position: absolute;
  top: 45%;
  left: 40px;
  width: 20px;
  height: 20px;
	background-image: url('https://fabrimetal.betatester.cl/wp-content/uploads/2025/04/Icon-ion-ios-arrow-dropleft-circle.svg');
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	cursor: pointer;
	z-index: 3;
}

.moder-niza {
  cursor: pointer;
}
.moder-niza img{
	height: 45px;
	transition: .3s ease;
}
.moder-niza h6{
	margin-top: 10px;
	font-size: .8rem;
}
.moder-niza p {
	opacity: 0;
	transform: translate(-60px, -12px);
	transition: .3s ease;
	width: 250px;
	font-size: .8rem;
}

.moder-niza{
	transform: translate(0px, 15px);
	transition: .3s ease;
}	

#info-modernizacion #container-modernizacion{
	display: none;
}

#info-modernizacion{
	position: relative;
	background-color: #ee5a29;
	color: var(--white-color);
	text-align: center;
  padding: 20px;
	min-height: 50vh;
	margin-top: -1px;
	display: none;
}
#info-modernizacion .trazado-1-left{
	position: absolute;
  top: -45%;
  left: -8%;
  width: 15%;
  z-index: 1;
  animation: float 4s ease-in-out infinite;
}

#info-modernizacion .trazado-2-left{
	position: absolute;
	top: -30%;
	left: -5%;
	width: 15%;
	z-index: 1;
	animation: float2 4s ease-in-out infinite;
}


/* HABLEMOS  */
#body_428{
	background: #F78930;
}


/* AREA DE NEGOCIOS ( REPUESTOS IDUSTRIALES ) --------------------------------------------------- */
#body_190{
	background: #91338f;
	overflow-x: hidden;
}

#porqueFbarimetal .trazado-1-left{
	position: absolute;
	width: 15%;
	top: 25%;
	left: -80px;
	animation: float2 4s ease-in-out infinite;
}

#porqueFbarimetal .trazado-2-left{
	position: absolute;
	width: 15%;
	top: 55%;
	left: -80px;
	animation: float 4s ease-in-out infinite;
}



/* PRODUCTOS -------------------------------- */
#productos{
	min-height: 100%;
	overflow: hidden;
}
#productos .swiper{
	z-index: 1;
}

#segmentos-cam-maq,
#segmento-gen
{
	position: relative;
	min-height: 650px;
	height: 100vh;
	gap: 15px;
	padding-top: 40px;
}
#segmentos-cam-maq h2,
#segmento-gen h2{
	text-transform: uppercase;
	font-weight: 600;
}

/* COLUMNA IZQUIERDA */
#segmentos-cam-maq{
	background: #6c2b69;
}

/* COLUMNA DERECHA */
#segmento-gen{
	background: #903091;
}

#swipergencammaq , #swipergen{
	width: 70%;
}

#swipergencammaq .swiper-slide {
	width: 50vw;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	min-width: 80px;
	max-width: 200px;
}

#swipergen .swiper-slide {
	width: 50vw;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	min-width: 80px;
	max-width: 200px;
}

.lista-producto ul li{
	list-style: none;
	position: relative;
}

.lista-producto ul li::before{
	content: '•';
	position: relative;
	top: 0;
	left: 0;
}

#segmentos-cam-maq .trazado-1-left{
	position: absolute;
	left: -18%;
  bottom: 10px;
  width: 15vw;
  z-index: 0;
	animation: float 4s ease-in-out infinite;
}

#segmentos-cam-maq .trazado-2-left{
	position: absolute;
  left: -16%;
  bottom: -22%;
  width: 15vw;
  z-index: 0;
  animation: float2 4s ease-in-out infinite;
}

#segmento-gen .trazado-1-right{
	position: absolute;
	right: -16%;
  bottom: 40%;
	width: 15vw;
	z-index: 0;
	animation: float 4s ease-in-out infinite;
}

#segmento-gen .trazado-2-right{
	position: absolute;
	right: -25%;
	bottom: 15%;
	width: 20vw;
	z-index: 0;
	animation: float2 4s ease-in-out infinite;
}


#swiper-button-next-gen,
#swiper-button-next-cam
{
	background-image: url('https://fabrimetal.betatester.cl/wp-content/uploads/2025/04/Icon-ion-ios-arrow-dropright-circle.svg');
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	width: 20px;
  height: 20px;
  position: absolute;
  top: 40%;
	right: 50px;
	z-index: 2;
}

#swiper-button-prev-gen,
#swiper-button-prev-cam{
	background-image: url('https://fabrimetal.betatester.cl/wp-content/uploads/2025/04/Icon-ion-ios-arrow-dropleft-circle.svg');
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	width: 20px;
  height: 20px;
  position: absolute;
  top: 40%;
	left: 50px;
	z-index: 2;
}


/* PAGE NUESTRAS INSTALACIONES ------------------------ */
#body_34{
	min-height: 100%;
}

#container{
	min-height: 100%;
	position: relative;
}

#container .container, 
#container .container .row
{
	height: 100vh;
}

.section {
	min-height: 600px;
	position: relative;
	text-align: center;
	color: var(--white-color);
	overflow: hidden;
}
#s4 ul{
	margin: 0;
	padding: 0;
}
#s4 ul li{
	list-style: none;
}

#target-ball-1,
#target-ball-2,
#target-ball-3,
#target-ball-4
{
	border-radius: 50%;
}
#target-ball-1{
	background: #F78930;
	position: absolute;
  bottom: -120px;
  width: 200px;
  height: 200px;
  z-index: 0;
  right: 140px;
	opacity: 0;
}
#target-ball-2{
	background: var(--quinto-color);
	position: absolute;
  bottom: -150px;
  right: 17%;
  z-index: 0;
  width: 200px;
  height: 200px;
	opacity: 0;
}
#target-ball-3{
	background-color: #F78930;
	position: absolute;
  right: 34%;
  bottom: -35%;
  width: 50px;
  height: 50px;
	opacity: 0;
	z-index: 2;
}
#target-ball-4{
	position: absolute;
  bottom: -140px;
  left: 5%;
  width: 200px;
  height: 200px;
  z-index: 0;
	opacity: 0;
}
#s1{
	background: #7ebb29;
}

#s1 h2{
	position: relative;
}

#s1 h2::after{
	content: '';
  position: absolute;
  top: auto;
  bottom: -25px;
  left: calc(30% - 600px);
  height: 20px;
  width: calc(100% - (50% - 600px));
  background: var(--white-color);
  border-radius: 0 10px 10px 0;
  z-index: 0;
	margin: -10px 0;
}
#s1 p{
	margin-bottom: 0;
	margin-top: 50px;
}
#s2{
	background: #318e46;
}
#s2 h2{
	position: relative;
}

#s2 h2::after{
	content: '';
  position: absolute;
  top: auto;
  bottom: -25px;
  right: calc(30% - 600px);
  height: 20px;
  width: calc(100% - (50% - 600px));
  background: var(--white-color);
  border-radius: 10px 0px 0px 10px;
  z-index: 0;
}
#s2 p{
	margin-bottom: 0;
	margin-top: 50px;
}


#s3{
	background: #266c48;
}

#s3 h2{
	position: relative;
}

#s3 h2::after{
	content: '';
  position: absolute;
  top: auto;
  bottom: -25px;
  left: calc(30% - 600px);
  height: 20px;
  width: calc(100% - (50% - 600px));
  background: var(--white-color);
  border-radius: 0px 10px 10px 0px;
  z-index: 0;
}
#s3 p{
	margin-bottom: 0;
	margin-top: 50px;
}


#s4{
	background: #7ebb29;
}
#s4 h2{
	position: relative;
}

#s4 h2::after{
	content: '';
  position: absolute;
  top: auto;
  bottom: -25px;
  right: calc(30% - 600px);
  height: 20px;
  width: calc(100% - (50% - 600px));
  background: var(--white-color);
  border-radius: 10px 0px 0px 10px;
  z-index: 0;
}
#s4 p{
	margin-bottom: 0;
	margin-top: 50px;
}

#s1 .col-derecha-1,
#s2 .col-izquierda-2,
#s3 .col-derecha-3,
#s4 .col-izquierda-4
{
	position: relative;
	height: 50%;
	margin: auto;
}


#s1 img{
	position: absolute;
}

#s1 .img-1,
#s1 .img-2,
#s2 .col-izquierda-2 .img-1-s2,
#s3 .col-derecha-3 .img-1-s3,
#s3 .col-derecha-3 .img-2-s3,
#s4 .col-izquierda-4 .img-1-s4,
#s4 .col-izquierda-4 .img-2-s4{
  aspect-ratio: 1 / 1;
  border-radius: 100%;
  object-fit: cover;
	object-position: center;
}

#s1 .img-1{
	width: 75%;
  top: -80px;
  right: -18%;
  z-index: 2;
}
#s1 .img-2{
	width: 48%;
  top: 45%;
  left: 11%;
  z-index: 2;
}

#s1 .img-3{
	width: 40%;
  top: 0;
  left: 20%;
  z-index: 2;
}

#s2 .col-izquierda-2 .img-1-s2,
#s2 .col-izquierda-2 .img-2-s2
{
	position: absolute;
}

#s2 .col-izquierda-2 .img-1-s2{
	width: 80%;
  left: 0;
  top: -35px;
  z-index: 2;
}
#s2 .col-izquierda-2 .img-2-s2{
	width: 80%;
  left: 2%;
  top: -24px;
  z-index: 2;
}


#s3 img{
	position: absolute;
}
#s3 .col-derecha-3 .img-1-s3{
	width: 80%;
  top: -80px;
  right: -18%;
  z-index: 1;
}
#s3 .col-derecha-3 .img-2-s3{
	width: 22vw;
  top: 45%;
  left: 8%;
  z-index: 1;
}

#s3 .col-derecha-3 .img-3-s3{
	width: 50%;
  top: -15px;
  left: 18%;
  z-index: 0;
}

#s4 img{
	position: absolute;
}
#s4 .col-izquierda-4 .img-1-s4{
	width: 80%;
  top: -80px;
  left: 0;
  z-index: 2;
}
#s4 .col-izquierda-4 .img-2-s4{
	width: 40%;
  bottom: -100px;
  right: -1px;
  z-index: 2;
}
#s4 .col-izquierda-4 .img-3-s4{
	width: 38%;
  z-index: 0;
  top: 0;
  right: 25px;
}

.hell-ball{
  position: absolute;
  width: 32px;
  height: 32px;
  background: #F8B826;
  z-index: 1;
  border-radius: 100px;
  transition: background-color 0.5s ease;
}

#chevron-ni{
  width: 2%;
  position: absolute;
  left: 50%;
  bottom: 12%;
  z-index: 3;
}

#chevron-ni img{
  width: 100%;
  object-fit: contain;
  object-position: center;
  filter: brightness(0) invert(1);
}

/* MARCAS QUE TRASNFORMAN ----------------------------- */
#marcas{
	position: relative;
	overflow: hidden;
}

#group-right-1,
#group-right-2{
	position: absolute;
	/* width: 50%; */
	height: 100%;
	right: -8%;
	z-index: 1;
}
#group-left-1,
#group-left-2
{
	position: absolute;
	/* width: 50%; */
	height: 100%;
	left: -8%;
	z-index: 1;
}

#group-right-1 img:nth-child(1){
	position: absolute;
	right: -10%;
  top: -30px;
  width: 18vw;
	animation: float 4s ease-in-out infinite;
}
#group-right-1 img:nth-child(2){
	position: absolute;
  right: -10%;
  width: 18vw;
  top: 160px;
	animation: float2 4s ease-in-out infinite;
}

#group-right-2 img:nth-child(1){
	position: absolute;
	right: -7%;
  top: 60%;
  width: 18vw;
	animation: float 4s ease-in-out infinite;
}
#group-right-2 img:nth-child(2){
	position: absolute;
  right: -5%;
  width: 18vw;
  top: 70%;
	animation: float2 4s ease-in-out infinite;
}

#group-left-1 img:nth-child(1){
	position: absolute;
  left: -10%;
  top: 20%;
  width: 18vw;
	animation: float 4s ease-in-out infinite;
}

#group-left-1 img:nth-child(2){
	position: absolute;
  left: -10%;
  width: 18vw;
  top: 30%;
	animation: float2 4s ease-in-out infinite;
}

#group-left-2 img:nth-child(1){
	position: absolute;
  left: -5%;
  bottom: -8%;
  width: 18vw;
	animation: float 4s ease-in-out infinite;
}

#group-left-2 img:nth-child(2){
	position: absolute;
  left: -4%;
  width: 18vw;
  bottom: -15%;
	animation: float2 4s ease-in-out infinite;
}

#marcas .slides h2{
	margin: 30px 0;
	text-transform: uppercase;
	font-weight: 600;
}
#marcas-slide {
	width: 60%;
	height: 18%;
	position: relative;
}
.custom-prev{
	position: absolute;
  left: 15%;
  top: 60%;
  width: 20px;
  height: 20px;
  z-index: 2;
  cursor: pointer;
	background-image: url('https://fabrimetal.betatester.cl/wp-content/uploads/2025/04/Icon-ion-ios-arrow-dropleft-circle.svg');
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}
.custom-next{
	position: absolute;
  right: 15%;
  top: 60%;
  width: 20px;
  height: 20px;
  z-index: 2;
	background-image: url('https://fabrimetal.betatester.cl/wp-content/uploads/2025/04/Icon-ion-ios-arrow-dropright-circle.svg');
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}
#marcas .swiper{
	z-index: 0;
}

#marcas-slide .swiper-slide {
	background: #fff;
	display: flex;
	border-radius: 100%;
}

#marcas-slide .swiper-slide img {
	display: block;
	aspect-ratio: 1/1;
	object-fit: cover;
	margin: auto;
}

#marcas-slide .swiper-wrapper{
	justify-content: space-around;
}

#marca_0{position:relative; background: #d77fc7; padding: 100px 0; text-align: center; color: var(--white-color)}
#marca_1{position:relative; background: #903091; padding: 100px 0; text-align: center; color: var(--white-color)}
#marca_2{position:relative; background: #6c2b69; padding: 100px 0; text-align: center; color: var(--white-color)}
#marca_3{position:relative; background: #d77fc7; padding: 100px 0; text-align: center; color: var(--white-color)}



/* HABLEMOS---------------------------------------  */
#body_196{
	background: #642f66;
}




/* IDENTIDAD ------------------------------- */
#body_32{
	background: #3b6b49;
}
#identidad{
	padding-top: 100px; /*en caso de que el header fuera fixed*/
	position: relative;
	min-height: 100vh;
	overflow: hidden;
}

.torre-generica{
	height: 600px;
	width: 17rem;
	border-radius: 150px 150px 0px 0px;
}

.torre-generica h2{
	font-family: 'Platonica', sans-serif;
}

.torre-generica ul li{
	list-style: none;
}
.torre-generica p{
	font-size: .9rem;
	height: 0;
}
.word {
	display: flex;
	gap: 0;
}

.word span {
	display: inline-block;
	font-size: 2rem;
	font-variation-settings: "wght" 400;
	animation: wave 2s ease-in-out infinite;
	font-family: 'Platonica', sans-serif;
}

#identidad .trazado-1-left{
	position: absolute;
  width: 15vw;
  top: 20%;
  left: -8%;
  z-index: -1;
	animation: float2 4s ease-in-out infinite;
}

#identidad .trazado-2-left{
	position: absolute;
  width: 15vw;
  top: 50%;
  left: -10%;
  z-index: -1;
	animation: float 4s ease-in-out infinite;
}

#identidad .trazado-1-right{
	position: absolute;
  width: 15vw;
  top: 20%;
  right: -5%;
  z-index: -1;
	animation: float 4s ease-in-out infinite;
}

#identidad .trazado-2-right{
	position: absolute;
	width: 15vw;
	top: 35%;
	right: -8%;
	z-index: -1;
	animation: float2 4s ease-in-out infinite;
}

/* PAGE CERTIFICADOS ----------------------------------------------- */

#body_36{
	background: var(--primer-color);
}
#p-certificados{
	padding-top: 100px; /*en caso de que el header fuera fixed*/
	position: relative;
}

#certificados-iso,
#certificados-kone
{
	/* position: relative; */
	overflow-x: hidden;
	min-height: 100vh;
}

#certificados-iso .iso-cert{
	transition: .5s ease;
	box-shadow: 0px 0px 20px -4px rgba(0,0,0,0.75);
	-webkit-box-shadow: 0px 0px 20px -4px rgba(0,0,0,0.75);	
	-moz-box-shadow: 0px 0px 20px -4px rgba(0,0,0,0.75);
}

#certificados-iso .iso-cert:hover{
	transform: scale(1.1);
}

#certificados-kone .kone-cer{
	transition: .5s ease;
	box-shadow: 0px 0px 20px -4px rgba(0,0,0,0.75);
	-webkit-box-shadow: 0px 0px 20px -4px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 20px -4px rgba(0,0,0,0.75);
}

#certificados-kone .kone-cer:hover{
	transform: scale(1.1);
}

#certificados-iso,
#certificados-kone{
  position: relative;
}
#certificados-iso .trazado-1-left,
#certificados-iso .trazado-2-left,
#certificados-iso .trazado-3-left,
#certificados-iso .trazado-1-right,
#certificados-iso .trazado-2-right,
#certificados-iso .trazado-3-right,
#certificados-iso .circulo-certi-dos,
#certificados-iso .circulo-certi{
  position: absolute;
}

/* LEFT PIRULINES */
#certificados-iso .trazado-1-left{
  left: -90px;
  top: 25%;
  width: 14%;
	animation: float 3s ease-in-out infinite;
}

#certificados-iso .trazado-2-left{
  left: -40px;
  top: 40%;
  width: 14%;
	animation: float2 3.5s ease-in-out infinite;
}

#certificados-iso .trazado-3-left{
  left: 100px;
  top: 28%;
  width: 14%;
	animation: float 4s ease-in-out infinite;
}

#certificados-iso .circulo-certi{
  left: 10%;
  top: 25%;
  width: 2%;
	animation: float2 3s ease-in-out infinite;
}

/* RIGHT PIRULINES */
#certificados-iso .trazado-1-right{
  right: 60px;
  top: 45%;
  width: 14%;
	animation: float 3s ease-in-out infinite;
}

#certificados-iso .trazado-2-right{
  right: -40px;
  top: 40%;
  width: 14%;
	animation: float 3.5s ease-in-out infinite;
}

#certificados-iso .trazado-3-right{
  right: 100px;
  top: 28%;
  width: 14%;
	animation: float 4s ease-in-out infinite;
}

#certificados-iso .circulo-certi-dos{
  right: 3%;
  top: 30%;
  width: 2%;
	animation: float2 3s ease-in-out infinite;
}


/* PAGE DE SEGURIDAD ---------------------------------- */
#body_38{
	background-color: var(--primer-color);
}
#p-seguridad{
	padding-top: 100px; /*en caso de que el header fuera fixed*/
	position: relative;
	min-height: 100%;
	overflow: hidden;
}
.container-seguridad{
	max-width: 1000px;
	margin: auto;
	position: relative;
}

#p-seguridad .circulo:nth-child(1){
	width: 15%;
	position: absolute;
	right: -2%;
	top: 8vw;
	animation: float2 4s ease-in-out infinite;
}

#p-seguridad .circulo:nth-child(2){
	width: 15%;
	position: absolute;
	left: -5%;
	top: 20%;	
	animation: float 4s ease-in-out infinite;
}
#p-seguridad .circulo:nth-child(3),
#p-seguridad .circulo:nth-child(4)
{
	display: none;
}

.contenedor-monito{
	position: relative;
}

#elevatron-img{
	border-radius: 50%;
	overflow: hidden;
	position: relative;
  z-index: 1;
	background-color: #3b6b49;
	height: 250px;
	transition: .5s ease;
}

#elevatron-img-mobile{ display: none; }


#elevatron-img img{
	height: 100%;
	width: 100%;
	object-fit: contain;
	object-position: center;
	position: relative;
  left: -5px;
  top: -3px;
}
#mensaje-elevatron {
	position: absolute;
  width: 90%;
  right: 0;
  top: 15px;
  height: 90%;
	border-radius: 0px 20px 20px 0px;
	background-color: var(--tercer-color);
}

#mensaje-elevatron div{
	width: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: end;
}

#mensaje-elevatron div p:nth-child(2){
	position: relative;
	left: -6px;
	margin: 0;
}
.box-caract{
	position: relative;
}

.box-caract::after{
	content: '';
	display: block;
	width: 80px;
	height: 3px;
	position: absolute;
	bottom: 0;
	background: #eebb4a;
}

.carousel-container {
	position: relative;
	width: 100%;
	min-height: 800px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.carousel-container::after{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	clip-path: polygon(0 26%, 100% 0%, 100% 77%, 0% 100%);
	width: 100%;
	height: 100%;
	background-color: var(--tercer-color);
}

/* .items {
	position: relative;
	width: 80%;
	max-width: 1200px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.item {
	position: absolute;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	overflow: hidden;
	transition: all 500ms ease-in-out;
	z-index: 1;
	opacity: 0;
	box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
}

.item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.item.active {
	opacity: 1;
	z-index: 2;
	transform: translate(-50%, -50%) scale(1.6);
	left: 50%;
	top: 50%;
}

.item.prev {
	z-index: 1;
	opacity: 1;
	left: 25%;
	top: 50%;
	transform: translate(-90%, -50%) scale(0.6);
}

.item.next {
	z-index: 1;
	opacity: 1;
	left: 75%;
	top: 50%;
	transform: translate(-10%, -50%) scale(0.6);
}

.nav-button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	z-index: 2;
	transition: all 0.3s ease;
}

.nav-button:hover {
	transform: translateY(-50%) scale(1.1);
}

.nav-button.prev {
	left: 5%;
}

.nav-button.next {
	right: 5%;
} */

#s-campanas{
	width: 90%;
	height: 100%;
  position: relative;
}

#campanas-seguridad{
	position: relative;
	padding: 80px 0;
}

.swiper-button-next-cam img {
	width: 20px;
	height: 20px;
	right: 80px;
	top: 50%;
	position: absolute;
}

.swiper-button-prev-cam img{
  left: 80px;
  width: 20px;
  top: 50%;
  height: 20px;
  position: absolute;
}
.buttons-p{
	display: flex;
  position: absolute;
  top: 50%;
}
.card-campaigns
{
	border-radius: 18px;
	background: var(--white-color);
	width: auto;
	min-height: 500px;
}

.card-campaigns .img-card{
	width: 100%;
	height: 0;
	padding-top: 81.2%;
	position: relative;
	margin-bottom: 15px;
	border-radius: 20px;
}

.img-card img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.card-title {
	position: relative;
	font-weight: 600;
	max-width: 190px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  white-space: normal;
}
.card-body p{
	padding-top: 5px;
	color: #707070;
}


/* CONTACTANOS ------------------- */
#body_13{
	background-color: var(--tercer-color);
}
#contacto{
	padding-top: 100px; /*en caso de que el header fuera fixed*/
	position: relative;
  overflow-x: hidden;
}

#datos p{
	font-size: 14px;
	color: var(--color-gris-p);
}

/* ------------ ANIMACION DE VOLCAN LASCAR */
#Group_85,
#Group_71{ /*texto volcan lascar*/
	transform: scale(1);
	transform-box: fill-box;
  transform-origin: center;
	transition: .6s ease;
}

#globo-volcan,
#globo-conquistadores {
  transform: translateY(-50px);
  opacity: 0;
	transition: .6s ease;
}

#volcan-lascar{
	transition: 1s ease;
	cursor: pointer;
	transform-box: fill-box;
  transform-origin: center;
  transform: scale(.7);
}
#volcan-lascar #Group_74,
#globo-conquistadores ellipse
{
	fill: #348F41 !important;
}

#volcan-lascar:hover{
	transform: scale(1.1);
}
#volcan-lascar:hover #Group_85{
	transform: scale(1.1);
}
#volcan-lascar:hover #globo-volcan{
	opacity: 1;
	transform: translateY(0);
}
/* ------------ ANIMACION DE VOLCAN LASCAR */

/* ------------ ANIMACION LOS CONQUISTADORES */
#los-conquistadores{
	cursor: pointer;
	transform-box: fill-box;
  transform-origin: center;
  transform: scale(.7);
	transition: .6s ease;
}

#los-conquistadores:hover{
	transform: scale(1.1);
}

#los-conquistadores:hover #Group_71{
	transform: scale(1.1);
}

#los-conquistadores:hover #globo-conquistadores{
	opacity: 1;
	transform: translateY(0);
}
/* ------------ ANIMACION LOS CONQUISTADORES */

#contenedor-datos{
	background: var(--white-color);
	border-radius: 50px;
	max-width: 1000px;
	margin: auto;
}
#contenedor-datos{
	margin-bottom: 20px;
}
#contenedor-datos p:nth-child(1){
	margin-bottom: 8px;
	color: #99c142;
	font-weight: bolder;
}
#contacto .circulo-contacto-top{
	width: 25vw;
  position: absolute;
  z-index: -1;
  top: 0vw;
  left: 100px;
	animation: float 4s ease-in-out infinite;
}

#contacto .circulo-contacto-middle{
	width: 20vw;
  position: absolute;
  right: -90px;
  top: 30%;
  z-index: -1;
	animation: float 4s ease-in-out infinite;
}

#contacto .circulo-contacto-top-right{
	width: 5vw;
  position: absolute;
  right: 100px;
  top: 5%;
  z-index: -1;
  animation: float 4s ease-in-out infinite;
}

#mapa-svg{
	position: relative;
	border: 10px solid green;
	border-radius: 20px;
	background: var(--white-color);
}

#mapa-svg svg{
	width: 100%;
	height: 100%;
}

/* CANAL DE DENUNCIAS ------------------- */
#body_15{
	background: #afafaf;
	position: relative;
}
#canal-denuncias{
	margin-top: 150px;
}
#ver-mas-denuncias{
	display: none;
}

#canal-denuncias .col-derecha-denuncias{
	position: absolute;
	height: 80%;
	padding: 20px 10px;
	right: 0;
	top: 0;
	background-color: var(--white-color);
	border-radius: 25px 0px 0px 25px;
	-webkit-box-shadow: 0px 11px 12px -10px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 11px 12px -10px rgba(0,0,0,0.75);
	box-shadow: 0px 11px 12px -10px rgba(0,0,0,0.75);
}
#canal-denuncias .col-derecha-denuncias h3{
	color: #969799;
}

#line-middle {
	background: #000;
	height: 1px;
	width: 60%;
	margin: 0 auto;
}

.col-derecha-denuncias > div .obligatorio{
	font-style: italic;
	color: var(--color-gris-p);
}

#consulta-btn p,
#denuncia-btn p{
	margin-bottom: 15px;
}


#consulta-btn button{
	color: var(--white-color);
	background: var(--tercer-color);
	border-radius: 50px;
	padding: 5px 30px;
	outline: none;
	border: none;
}

#denuncia-btn button{
	color: var(--white-color);
	background: #de6632;
	border-radius: 50px;
	padding: 5px 30px;
	outline: none;
	border: none;
}

#ModalConsultaLabel,
#ModalDenunciaLabel{
  color: var(--tercer-color);
	font-weight: bold;
}

.cerrar-boton-consultas{
	background: var(--tercer-color);
	width: auto;
  height: 100%;
  padding: 5px;
  border-radius: 50px;
}

.cerrar-boton-consultas button{
	margin: 0 !important;
	filter: invert(1);
}

#body_15 .trazado-1-left-top{
	position: absolute;
	left: 50%;
	top: -15%;
	width: 10vw;
	z-index: -1;
	animation: float 4s ease-in-out infinite;
}

#body_15 .trazado-2-left-top{
	position: absolute;
  left: 50%;
  top: -20%;
  width: 15vw;
  z-index: -1;
  animation: float2 4s ease-in-out infinite;
}

#body_15 .trazado-1-left-bottom{
	position: absolute;
	left: -100px;
	bottom: 160px;
	width: 15vw;
	z-index: -1;
}

#body_15 .trazado-2-left-bottom{
	position: absolute;
  left: -80px;
  bottom: 0;
  width: 20vw;
  z-index: -1;
}

#correo-denuncias p a{
	text-decoration: none;
	color: var(--white-color);
}


/* TRABAJA CON NOSOTROS ------------------- */
#body_17{
	background: var(--segundo-color);
}

#trabaja-con-nosotros{
	padding-top: 120px;
}

#trabaja-con-nosotros .trazado-1t-left,
#trabaja-con-nosotros .trazado-2t-left{
  display: none;
}

#video-trabaja{
	position: relative;
}
#video-trabaja .trazado-1-left{
	position: absolute;
	left: -30px;
	top: -140px;
	width: 15vw;
	z-index: -1;
	animation: float 4s ease-in-out infinite;
}

#video-trabaja .trazado-2-left{
	position: absolute;
	left: -80px;
	top: -10px;
	width: 20vw;
	z-index: -1;
	animation: float2 4s ease-in-out infinite;
}

#video-trabaja .trazado-1-right{
	position: absolute;
	right: 45px;
	top: -140px;
	width: 15vw;
	z-index: -1;
	animation: float 4s ease-in-out infinite;
}

#video-trabaja .trazado-2-right{
	position: absolute;
	right: 0;
	top: -10px;
	width: 20vw;
	z-index: -1;
	animation: float2 4s ease-in-out infinite;
}


/* FOOTER ------------------- */
#footer{
	padding: 40px 0px 5px 0px;
	background: var(--cuarto-color);
	color: var(--white-color);
}

#footer a{
	text-decoration: none;
	color: #fff;
}

#footer .footer-top,
#footer .footer-bottom{
	padding: 20px 0;
}

#footer #logo-footer img{
	width: 40%;
}
#footer .rrss a{
	text-decoration: none;
}

#footer .rrss img {
	width: 6%;
	margin: 10px 5px;
}

#linea-footer-2{
	display: none !important;
}

/* CENTRAL EMERGENCIA ------------------- */
#bottom-contact{
	position: fixed;
	margin: auto;
	z-index: 2;
	bottom: 0;
	left: 0;
	right: 0;
	width: 260px;
	height: 30px;
	/* width: 400px;
	height: 150px; */
	opacity: 0;
	transition: .5s ease;
	background: var(--quinto-color);
	border-radius: 15px 15px 0px 0px;
	cursor: pointer;
}

#mensaje-emergencia {
	position: relative;
  margin: auto;
  opacity: 1;
  transition: opacity 0.3s ease;
  padding: 0 15px;
	color: #fff;
}
#mensaje-emergencia p a{
	text-decoration: none;
	color: #fff;
}

#bottom-contact:hover {
  width: 400px; 
  height: 120px;
}
#bottom-contact-interior p{
	position: relative;
	top: 6px;
	font-size: 14px;
}

#bottom-contact img{
	position: relative;
	width: 20%;
	left: 25px;
  top: -8px;
}

#mensaje-oculto{
	display: flex;
	position: relative;
	left: 20px;
}

@media (min-width: 992px) {
	#identidad .trazado-3-right , 
	#identidad .trazado-4-right , 
	#identidad .trazado-5-bottom , 
	#identidad .trazado-6-bottom{
		display: none;
	}
	#content-inicio .lineaverdegris{
		top: -180px;
	}
	#container-modernizacion h5{
		margin-top: 0 !important;
		margin-bottom: 20px !important;
	}
}

@media (min-width: 1600px){
	#identidad {
    height: 100vh;
	}

	#identidad-torres {
		position: absolute;
		bottom: 0;
	}
}

@media (max-height: 600px) {
	#identidad-torres {
		position: initial;
	}
	#cards-p-iconicos{
		max-width: 300px;
	}
	#circle-card{
		max-width: 100px;
	}

	#descripcion-card-proyectosiconicos{
		max-width: 200px;
	}

	#mobile-height .row .col-izquierda img {
    width: 25vw;
	}
	.swiper-servicios .swiper-interno .swiper-slide img{
		width: 240px;
	}
}