.container {
	max-width: 100vw !important;
}

.container-stream {
	position: relative; /* Necesario para posicionar el fondo */
	width: 100%;
	overflow: hidden;
	background-image: linear-gradient(
		to top right,
		var(--bs-primary) 0%,
		black 100%
	); /* Color de fondo base */
}

@media (max-width: 768px) {
	.contorno1 ::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		/* Movemos aquí las propiedades del fondo */
		background-image: url("/static/img/index/1.3f41dd204f4c.png") !important;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		opacity: 0.05;
		z-index: 1; /* Queda atrás */
	}
}

@media (min-width: 769px) {
	.container-stream {
		background-image:
			url("/static/img/index/bg-1.832dcbfd7e57.png"),
			linear-gradient(to top right, var(--bs-primary) 0%, black 100%) !important;
		background-size:
			77% auto,
			auto;
		background-position:
			-8vw center,
			0 0;
		background-repeat: no-repeat;
	}
}

/* container extra*/
.custom-icon {
	width: 30px; /*ancho*/
	height: 39px; /*alto*/
	margin-right: 8px;
	vertical-align: middle;
	margin-top: 5px;
}

.image-sientes-container {
	position: relative;
	padding: 0;
}

.background-woman {
	height: auto;
	width: 100%;
	object-position: center;
	opacity: 0.45;
	filter: grayscale(10%);
	margin-top: 5px;
}

.content-sientes-container {
	/* Aseguramos que el contenido esté en frente */
	position: relative;
	z-index: 10;
	display: flex; /* Para centrar la tarjeta verticalmente si es necesario */
	align-items: flex-start;
	padding: 20px !important;
}

.container-sientes {
	background-image: url("/static/img/index/marco2.2445bd0fb66a.webp");
	background-size:
		135% auto,
		auto;
	background-position: 38vw -59vh;
	background-repeat: no-repeat;
}

@media (max-width: 768px) {
	.container-sientes {
		background-size:
			100% auto,
			auto;
	}
}

/* Estilos de la lista */
.custom-list-item {
	background-color: transparent !important; /* Quitar fondo de la tarjeta/lista */
	border: none !important; /* Quitar bordes de los ítems de lista */
	padding: 15px 0 !important; /* Espacio vertical para cada ítem */
	font-size: 2rem !important;
	color: var(--color-body);
	display: flex;
	align-items: flex-start;
}

.desplazamiento-hacia-abajo {
	padding-left: 50px;
	margin-top: 55px;
}

/* Extra container 2 */
.conecta-section {
	background-color: var(--color-primary-dark); /* Azul petróleo */
	border: 1px solid rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(10px); /* Efecto de desenfoque */
}

/* Estilo para los títulos de cada ítem */
.feature-title {
	font-family: "Fredoka", sans-serif; /* O la que estés usando */
	color: white;
}

/* Iconos */
.bi {
	color: var(--color-warning); /* Color celeste brillante para los iconos */
}

.features-container {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 40px;
	margin-top: 18vh;
	max-width: 900px;
	margin-left: auto;
	margin-right: -18vw;
	position: relative;
}

.container-extra2 {
	background-image: url("/static/img/index/marco2.2445bd0fb66a.webp");
	background-size:
		75% auto,
		auto;
	background-position: center 15vh;
	background-repeat: no-repeat;
}

@media (max-width: 768px) {
	.container-extra2 {
		background-image: none !important;
	}
}

.feature-custom-img {
	width: 48px; /* Ajusta el   tamaño que desees */
	height: 48px; /* Mantén igual para que sean simétricas */
	object-fit: contain; /* Evita que la imagen se estire o se aplaste */
	display: block;
}

/* Alineación del contenedor para que las imágenes y el texto se vean ordenados */
.feature-item {
	display: flex;
	align-items: flex-start; /* Alinea la imagen con la primera línea del título */
	margin-bottom: 1rem !important;
}

.titulo-container {
	text-transform: uppercase !important;
	font-size: 4rem;
	margin-left: 11vw;
}

.titulo-container2 {
	text-transform: uppercase !important;
	margin-left: 5vw;
	font-size: 3rem;
}

/* Ajuste para que el celular resalte y no se pegue arriba */
.img-celular-desplazamiento {
	filter: drop-shadow(0px 20px 30px rgba(0, 0, 0, 0.5));
	transition: transform 0.5s ease;
	margin-left: 1vw;
	margin-top: 35px;
	max-height: 55vh;
}

/* Animación sutil para el celular al pasar el mouse */
.img-celular-desplazamiento:hover {
	transform: scale(1.05) rotate(-2deg);
}

/* Extra container 3 */
.container-cambio {
	position: relative; /* Necesario para posicionar el fondo */
	width: 100%;
	overflow: hidden;
	background-color: var(--color-surface-muted); /* Color de fondo base */
}

.container-cambio::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	/* Movemos aquí las propiedades del fondo */
	background-image: url("/static/img/index/fondo-telefono.184e6bd9d9f0.webp");
	background-size: cover;
	background-position: left top;
	background-repeat: no-repeat;

	/* Aquí aplicas la opacidad sin afectar al texto */
	opacity: 0.35;
	z-index: 1; /* Queda atrás */
}

.container-3-col {
	position: relative;
	z-index: 2; /* Un valor alto lo trae al frente */
}

.titulo-cambio {
	color: var(--color-primary); /* Color azul petróleo de la imagen */
	font-size: clamp(2.5rem, 5vw, 4.5rem); /* Tamaño flexible según la pantalla */
	line-height: 1.1;
	letter-spacing: -1px;
	margin-bottom: 1.5rem;
	text-transform: uppercase; /* Asegura que esté en mayúsculas */
}

/* --- Subtítulo --- */
.subtitulo-cambio {
	color: var(--color-body) 333; /* Gris muy oscuro/negro */
	font-size: clamp(1.2rem, 2vw, 2rem); /* Se ajusta entre móvil y PC */
	font-weight: 400;
	line-height: 1.4;
	max-width: 90%; /* Evita que las líneas sean demasiado largas */
}

/* --- Botón "Solicita más info" --- */
.btn-solicita {
	display: inline-block;
	padding: 12px 35px;
	background: rgba(255, 255, 255, 0.4); /* Efecto cristal suave */
	backdrop-filter: blur(10px); /* Desenfoque de fondo */

	/* Borde fino y redondeado */
	border: 2px solid var(--color-warning); /* Color dorado del borde */
	border-radius: 50px;

	/* Texto del botón */
	color: var(--color-warning) !important; /* Dorado */
	font-weight: 800;
	font-size: 1.3rem;
	text-decoration: none;
	text-transform: uppercase;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* --- Efecto al pasar el ratón --- */
.btn-solicita:hover {
	background: var(--color-warning);
	color: white !important;
	transform: translateY(-3px); /* Pequeño salto hacia arriba */
	box-shadow: 0 6px 20px rgba(191, 161, 95, 0.4);
}

/* Extra container 4 */

/* Fondo de la sección completa */
.testimonios-section {
	background-color: var(--color-primary); /* Verde azulado oscuro */
	min-height: 60vh;
	position: relative;
	overflow: hidden;
}

/* Tarjeta con efecto Glassmorphism (Cristal) */
.testimonial-card {
	background: rgba(255, 255, 255, 0.1); /* Blanco muy transparente */
	backdrop-filter: blur(12px); /* Desenfoque del fondo */
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.2); /* Borde sutil */
	border-radius: 20px;
	padding: 53px;
	height: 108%;
	transition: transform 0.3s ease;
}

.testimonial-card:hover {
	transform: translateY(-10px);
	background: rgba(255, 255, 255, 0.15);
}

/* Estilo de la foto circular */
.profile-photo-container {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid rgba(255, 255, 255, 0.5);
}

.profile-photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.testimonial-name {
	color: white;
	font-weight: bold;
	font-size: 1.8rem;
	margin-bottom: 10px;
}

.testimonial-text {
	color: rgba(255, 255, 255, 0.9);
	font-size: 1.2rem;
	line-height: 1.4;
}

/* Opcional: El globo de texto gigante de fondo */
.testimonios-section::before {
	content: "";
	position: absolute;
	top: 10%;
	left: 5%;
	width: 90%;
	height: 80%;
	background-image: url("/static/img/index/fondo-contener4.dc666871c46b.webp");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0.2;
	z-index: 0;
}

.contener-opinion {
	margin: 10vh;
}

.titulo-container4 {
	font-size: 3.5rem;
	margin-left: 8vw;
}

/* container 5 */
.camino-section1 {
	position: relative; /* Necesario para posicionar el fondo */
	width: 100%;
}

@media (min-width: 769px) {
	.camino-section1::before {
		content: "";
		position: absolute;
		width: 160%;
		height: 138%;
		background-image: url("/static/img/index/fondo-conteiner5.627bbec9f0c7.webp"); /* Necesitarías este SVG */
		background-repeat: no-repeat;
		background-position: top;
		background-size: contain;
		margin: -10vw -7vh;
		opacity: 0.2;
	}
}

/* Título con el color azul petróleo de la imagen */
.camino-title {
	color: var(--color-primary);
	font-weight: 800;
	font-size: 3.7rem;
	padding-right: 25vw;
	line-height: 1.1;
}

/* Estilo de los números y texto de la lista */
.camino-numero {
	color: var(--color-body);
	font-weight: 500;
	font-size: 2.2rem;
}

.camino-texto {
	color: var(--color-body);
	font-weight: 400;
}

/* Botón personalizado: Amarillo con bordes muy redondeados */
.btn-solicita-info {
	background-color: white;
	color: var(--color-warning-dark); /* Dorado/Amarillo oscuro */
	border: 2px solid #e0e0e0;
	border-radius: 50px;
	font-size: 1.4rem;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
}

.btn-solicita-info:hover {
	background-color: var(--color-warning-dark);
	color: white;
	transform: translateY(-3px);
}

/* Extra container 6 */
.contacto-section {
	position: relative;
	min-height: 100vh;
	overflow: hidden;
	background-color: var(--color-surface-muted);
}

/* Fondo con la imagen del laptop */
.bg-laptop-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.bg-laptop-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.9;
}

/* Estilo del Formulario (Blanco Sólido) */
.form-container {
	background: white;
	padding: 40px;
	border-radius: 15px;
	border: 1px solid var(--color-primary);
}

.form-title {
	color: var(--color-primary);
	font-weight: bold;
	margin-bottom: 25px;
}

.btn-enviar {
	background-color: var(--color-primary);
	color: white;
	border-radius: 20px;
	font-weight: bold;
	transition: 0.3s;
}

.btn-enviar:hover {
	background-color: var(--color-primary-dark);
	color: white;
}

.form-footer-text {
	font-size: 0.75rem;
	color: var(--color-muted);
	text-align: center;
}

/* Efecto Cristal */
.info-glass-card {
	background: rgba(255, 255, 255, 0.4);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 30px;
	color: white;
	min-width: 350px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.info-label {
	font-size: 2.5rem;
	font-weight: bold;
	margin-bottom: 5px;
	color: #fff;
	text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
}

.info-value {
	font-size: 1.5rem;
	color: #fff;
}

/* Copyright */
.copyright-text {
	color: white;
	font-weight: bold;
	font-style: italic;
	font-size: 1.8rem;
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
@media (max-width: 768px) {
	.copyright-text {
		font-size: 1rem !important;
		padding-top: 3vh;
	}
}

.container6 {
	position: relative; /* Necesario para posicionar el fondo */
	min-height: 100vh;
	width: 100%;
	overflow: hidden;
	background-color: var(--color-primary);
}

.container6::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	/* Movemos aquí las propiedades del fondo */
	background-image: url("/static/img/index/fondo-conteiner6.f68d14fa0612.webp");
	background-size: cover;
	background-position: left top;
	background-repeat: no-repeat;

	/* Aquí aplicas la opacidad sin afectar al texto */
	opacity: 0.3;
	z-index: 1; /* Queda atrás */
}

.z-index-2 {
	z-index: 2;
}

@media (max-width: 991px) {
	/* 1. ARREGLO GLOBAL: Forzamos a que las filas se vuelvan columnas */
	.row {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		margin: 0 !important;
		width: 100% !important;
	}

	/* 2. PRIMERA SECCIÓN (Multiplica tus resultados) */
	/* Invertimos el orden para que la imagen de la chica salga arriba del texto */
	.row.align-items-center.justify-content-center {
		flex-direction: column-reverse !important;
	}

	.col-8,
	.col-4,
	.col-lg-8,
	.col-lg-4,
	.col-md-7,
	.col-md-5 {
		width: 100% !important;
		max-width: 100% !important;
		padding: 20px !important;
		text-align: center !important;
		margin: 0 !important;
	}

	/* Ajuste de la imagen de la chica para que no tape el texto */
	.col-4 img,
	.img-celular-desplazamiento {
		height: auto !important;
		max-height: 45vh !important;
		width: auto !important;
		margin: 0 auto 20px auto !important;
		position: relative !important;
	}

	/* 3. TÍTULOS: Bajamos el tamaño para que quepan en la pantalla */
	.display-3,
	.titulo-container,
	.titulo-container2,
	.titulo-cambio,
	.camino-title {
		font-size: 2rem !important;
		margin: 10px 0 !important;
		padding: 0 !important;
		text-align: center !important;
	}

	/* 4. SECCIÓN "SIENTES..." */
	.desplazamiento-hacia-abajo {
		margin: 0 !important;
		padding-top: 40px !important;
	}

	.background-woman {
		position: absolute !important;
		opacity: 0.15 !important; /* La hacemos casi invisible de fondo para que se lea el texto */
		z-index: 0;
	}

	.custom-list-item {
		font-size: 1.1rem !important;
		text-align: left !important;
		background: rgba(
			255,
			255,
			255,
			0.8
		) !important; /* Fondo semi-blanco para leer mejor */
	}

	/* 5. SECCIÓN CONECTA-PLUS */
	.features-container {
		margin: 0 !important;
		padding: 15px !important;
	}

	.feature-item {
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
	}

	/* 7. FORMULARIO Y CONTACTO */
	.info-glass-card {
		margin-top: 20px;
		min-width: auto !important;
	}
}

.legal-link {
	color: #ffffff !important; /* Cambia esto por el color que desees (Hexadecimal, RGB o nombre) */
	text-decoration: none !important; /* Opcional: quita el subrayado */
}

/* Para que cambie de color cuando el usuario pase el mouse por encima */
.legal-link:hover {
	color: var(--bs-warning) !important;
	text-decoration: underline !important;
}