/*
Theme Name: Impreza Child
Template: Impreza
Version: 1.0
Author:	UpSolution
Theme URI: http://impreza.us-themes.com/
Author URI: http://us-themes.com/
*/

/*Add your own styles here:*/
/*--------------ENLACES CABECERA-----------------*/
.enlace-menu {
  display: inline-block;
  position: relative;
}

.enlace-menu a {
  position: relative;
  color: #fff;
  text-decoration: none;
  padding: 10px 20px;
  display: inline-block;
  z-index: 1;
}

.enlace-menu .garabato {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250%;
  height: 250%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

.enlace-menu .garabato path {
  stroke-width: 3;
  stroke: #9dff52;
  fill: none;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  transition: stroke-dashoffset 1s ease;
  opacity: 0;
}

.enlace-menu a:hover .garabato path {
  stroke-dashoffset: 0;
  opacity: 1;
}

/*-------------BOTONES--------------*/
.button-creative {
  position: relative;
  display: inline-block;
  border: none;
  cursor: pointer;
  overflow: hidden;
  transition: color 0.3s;
  font-size: 1.2rem;
  border-radius: 8px;
  z-index: 1;
}

.button-creative::before {
  content: '';
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, #9dff52 10%, transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.4s ease;
  border-radius: 50%;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.button-creative:hover::before {
  transform: translate(-50%, -50%) scale(1.2);
}

.button-creative:hover {
  color: #9dff52;
}

/*-------------IMAGEN ROTATORIA-----------------*/
.imagen-rotatoria {
  transition: transform 0.1s linear;
  will-change: transform;
}

/*---------------IMAGEN DECORAR FONDO----------------*/
.imagen-decorar-fondo {
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none; /* No interfiere con clics */
  opacity: 1; /* Hace que no destaque */
  filter: blur(140px); /* Desenfoque fuerte */
}

.imagen-decorar-fondo img {
  width: auto;
  height: auto;
  max-width: 70%;
  max-height: 70%;
  object-fit: cover;
}

/*-------------FILA CONTADORES--------------*/
.fila-contadores span.w-counter-value-part.type_number {
    color: white;
    font-size: 4.5rem;
}

.fila-contadores p.w-counter-title {
    font-size: 1.3rem;
    color: white;
}

/*-------------MOVIL INTERACTVO---------------*/
.columna-movil-interactivo .wpb_wrapper{
	height: 100%;
}


/*-------------------BOTONES REDONDOS------------------*/
.primer-boton-redondo {
	display: inline-flex;           /* Centra el ícono dentro */
	justify-content: center;
	align-items: center;
	border-radius: 50%;             /* Lo hace circular */
	background-color: #333333;      /* Color de fondo */
	color: #ffffff;                 /* Color del ícono */
	text-decoration: none;          /* Quita subrayado si es enlace */
	font-size: 16px;                /* Tamaño del ícono (ajústalo si quieres) */
	transition: background 0.3s;    /* Efecto hover suave */
}

.primer-boton-redondo span {
	background: #333;
    padding: 1.5rem;
    border-radius: 50%;
}

.primer-boton-redondo:after {
	display: none;
}

.primer-boton-redondo span.far.fa-arrow-right {
    transform: rotate(-45deg);
	transition: all 0.3s ease-in-out;
}

.primer-boton-redondo:hover span.far.fa-arrow-right {
	transform: rotate(0deg);
}

.segundo-boton-redondo:after {
	display: none;
}

.segundo-boton-redondo {
	display: inline-flex;           /* Centra el ícono dentro */
	justify-content: center;
	align-items: center;
	border-radius: 50%;             /* Lo hace circular */
	background-color: #333333;      /* Color de fondo */
	color: #ffffff;                 /* Color del ícono */
	text-decoration: none;          /* Quita subrayado si es enlace */
	font-size: 16px;                /* Tamaño del ícono (ajústalo si quieres) */
	transition: background 0.3s;    /* Efecto hover suave */
}

.segundo-boton-redondo span {
	background: #fff;
    padding: 1.5rem;
    border-radius: 50%;
}

.segundo-boton-redondo:hover {
	color: #000 !important;
}

.segundo-boton-redondo span.far.fa-arrow-right {
    transform: rotate(-45deg);
	transition: all 0.3s ease-in-out;
}

.segundo-boton-redondo:hover span.far.fa-arrow-right {
	transform: rotate(0deg);
}

/*-------FONDOS BORROSOS--------*/
.fondo-borroso {
  backdrop-filter: blur(8px);           /* Desenfoque del fondo */
  -webkit-backdrop-filter: blur(8px);   /* Soporte para Safari */
}

/*---------TEXTO VERTICAL------------*/
.texto-vertical {
  transform: rotate(270deg);
  transform-origin: left top;
  display: inline-block;
}

/*------------PRIMER CARRUSEL------------*/
/* Contenedor principal del marquee */
.marquee-left {
  position: relative;
  width: 125%;
  height: 250px;
  overflow-x: hidden;
}

/* Pista de animación */
.track-left {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
  animation: marquee-left 22s linear infinite;
}

/* Animación hacia la izquierda */
@keyframes marquee-left {
  0% {
    transform: translateX(0%);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  100% {
    transform: translateX(-50%);
    opacity: 1;
  }
}

/* Estilo de los elementos deslizables */
.imgSlide-left {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: -20px;
  object-fit: cover;
  width: 195px;
}

.imgSlide-left img {
  width: 30%;
  height: 50% !important;
  object-fit: contain !important;
}

.imgSlide-left .w-image-h-left {
  border-radius: 0px;
  height: auto;
}


/*------------IMG LINEAS LATERALES-----------*/
.img-lineas-laterales {
  position: relative;
  display: inline-block; /* Mantiene la imagen en el centro */
}

.img-lineas-laterales::before,
.img-lineas-laterales::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 45vw; /* Ocupa todo el ancho de la pantalla */
  height: 2px;  /* Grosor de la línea */
  background-color: #8b8b8b;
}

.img-lineas-laterales::before {
  left: calc(-47vw + 0%); /* Extiende la línea hacia la izquierda */
}

.img-lineas-laterales::after {
  right: calc(-47vw + 0%); /* Extiende la línea hacia la derecha */
}

/*-----------------CARRUSEL PROYECTOS--------------------*/
main {
	position: relative;
	width: 100%;
	height: 100%;
}

.item {
	width: 200px;
	height: 300px;
	list-style-type: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
	background-position: center;
	background-size: cover;
	border-radius: 20px;
	box-shadow: 0px 0px 13px 1px #ffffffc7;
	transition: transform 0.1s, left 0.75s, top 0.75s, width 0.75s, height 0.75s;

	&:nth-child(1), &:nth-child(2) {
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		transform: none;
		border-radius: 2rem;
		opacity: 1;
	}

	&:nth-child(3) { left: 50%; }
	&:nth-child(4) { left: calc(50% + 220px); }
	&:nth-child(5) { left: calc(50% + 440px); }
	&:nth-child(6) { left: calc(50% + 660px); opacity: 0; }
}

.content {
	width: min(30vw,400px);
	position: absolute;
	top: 50%;
	left: 3rem;
	transform: translateY(-50%);
	font: 400 0.85rem helvetica,sans-serif;
	color: white;
	text-shadow: 0 3px 8px rgba(0,0,0,0.5);
	opacity: 0;
	display: none;

	& .title {
		font-family: 'arial-black';
		text-transform: uppercase;
	}

	& .description {
		line-height: 1.7;
		margin: 1rem 0 1.5rem;
		font-size: 0.8rem;
	}

	& button {
		width: fit-content;
		background-color: rgba(0,0,0,0.1);
		color: white;
		border: 2px solid white;
		border-radius: 0.25rem;
		padding: 0.75rem;
		cursor: pointer;
	}
}

.item:nth-of-type(2) .content {
	display: block;
	animation: show 0.75s ease-in-out 0.3s forwards;
}

@keyframes show {
	0% {
		filter: blur(5px);
		transform: translateY(calc(-50% + 75px));
	}
	100% {
		opacity: 1;
		filter: blur(0);
	}
}

.nav {
	position: absolute;
	bottom: 2rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	user-select: none;

	& .btn {
		background-color: #9dff527d;
		color: rgba(0,0,0,0.7);
		border: 2px solid rgba(0,0,0,0.6);
		margin: 0 0.25rem;
		padding: 0.75rem;
		border-radius: 50%;
		cursor: pointer;

		&:hover {
			background-color: #9dff5229;
		}
	}
}

@media (width > 650px) and (width < 900px) {
	.content {
		& .title        { font-size: 1rem; }
		& .description  { font-size: 0.7rem; }
		& button        { font-size: 0.7rem; }
	}
	.item {
		width: 160px;
		height: 270px;

		&:nth-child(3) { left: 50%; }
		&:nth-child(4) { left: calc(50% + 170px); }
		&:nth-child(5) { left: calc(50% + 340px); }
		&:nth-child(6) { left: calc(50% + 510px); opacity: 0; }
	}
}

@media (width < 650px) {
	.content {
		& .title        { font-size: 0.9rem; }
		& .description  { font-size: 0.65rem; }
		& button        { font-size: 0.7rem; }
	}
	.item {
		width: 130px;
		height: 220px;

		&:nth-child(3) { left: 50%; }
		&:nth-child(4) { left: calc(50% + 140px); }
		&:nth-child(5) { left: calc(50% + 280px); }
		&:nth-child(6) { left: calc(50% + 420px); opacity: 0; }
	}
}

.slider {
	height: 90dvh;
}

.slider h2 {
	color: #fff;
}

.item::after {
	content: "";
	position: absolute;
	inset: 0; /* top, right, bottom, left = 0 */
	background: rgba(0, 0, 0, 0.4); /* negro semitransparente */
	border-radius: inherit; /* mantiene los bordes redondeados */
	z-index: 0; /* debajo del contenido */
}

.item .content {
	position: relative;
	z-index: 1; /* asegura que quede encima del overlay */
}

.item {
    &:nth-child(1), &:nth-child(2) { 
		box-shadow: none !important;
		border: 2px solid #f5f5f5!important;
	}
}


/*------------------ SEGUNDO CARRUSEL ---------------------*/

/* La sección será el referente del posicionamiento */
.seccion-logos-2 {
  position: relative;
}

/* Contenedor principal del marquee – centrado y rotado */
.seccion-logos-2 .marquee-right {
  position: absolute;                          /* centrado dentro de la sección */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-2deg); /* primero centrar, luego rotar */
  transform-origin: center;

  width: 140%;           /* ancho extra para que no se corte al rotar */
  height: 110px;
  overflow: hidden;       /* evita desbordes al rotar */
  z-index: 1;
}

/* “Cinta” blanca detrás (opcional visual, como en la captura) */
.seccion-logos-2 .marquee-right::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  z-index: 0;
}

/* Pista de animación */
.seccion-logos-2 .track-right {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
  animation: marquee-right 22s linear infinite;
  height: 100%;
  z-index: 1; /* por encima de la “cinta” */
}

/* Animación hacia la derecha */
@keyframes marquee-right {
  0% {
    transform: translateX(-50%);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}

/* Estilo de los elementos deslizables */
.imgSlide-right {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px;
  object-fit: cover;
  width: 105px;
}

.imgSlide-right img {
  width: 30%;
  height: 50% !important;
  object-fit: contain !important;
}

.imgSlide-right .w-image-h-right {
  border-radius: 0px;
  height: auto;
}

/* Container query (tal como lo tenías) */
@container (width >= calc(100cqw - 2rem)) and (min-width: calc(600px - 2rem)) {
  .g-cols.via_flex.type_default > div[class|="vc_col"].stretched > .vc_column-inner {
    margin: 0 !important;
  }
}