body {
	font-family: 'Roboto', sans-serif !important;
}

:root {
	--bs-primary: #00AFEF;
	/* Pon aquí tu color azul específico */
}

/* Si quieres forzar el color en clases específicas */
.text-primary {
	color: var(--bs-primary) !important;
}

.bg-primary {
	background-color: var(--bs-primary) !important;
}

/* Opcional: Desplegar menú al pasar el mouse */
.nav-item.dropdown:hover .dropdown-menu {
	display: block;
	margin-top: 0;
}

.text-justify {
	text-align: justify !important;
}

.dropdown {
	position: relative;
}

.dropdown-menu {
	margin-top: 0 !important;
	/* Elimina espacios muertos */
	top: 100% !important;
	/* Asegura que salga justo debajo */
}

.texto-ajustado {
	padding-left: 25% !important;
	padding-right: 25% !important;
	text-align: center;
	/* Opcional: para que se vea más ordenado */
}

.card-body {
	padding-left: 15% !important;
	padding-right: 15% !important;
}

.padding-personalizado {
	/* El margen lateral crea el espacio vacío fuera de la parte blanca */
	margin-left: 15%;
	margin-right: 15%;

	/* Mantenemos el padding interno para que el texto no toque el borde del fondo blanco */
	padding: 1.5rem 1rem;

	/* Esto es lo que crea el efecto visual de "bloque separado" */
	background-color: white;
	border-radius: 0 0 10px 10px;
	/* Opcional: bordes redondeados solo abajo */
}

.contenedor-texto {
	margin-left: 15%;
	margin-right: 15%;
}

/* Clase para el efecto de negrita al pasar el mouse */
.nav-hover-bold {
	font-weight: normal;
	/* Estado normal */
}

.nav-hover-bold:hover {
	color: var(--bs-primary) !important;
	/* Opcional: que también tome tu color primario */
}


/* Forzar el color de tu variable en los botones primarios */
.btn-primary {
	background-color: var(--bs-primary) !important;
	border-color: var(--bs-primary) !important;
}

/* Mantener el estilo al pasar el mouse */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
	background-color: #008cc9 !important;
	/* Un tono un poco más oscuro para el efecto hover */
	border-color: #008cc9 !important;
}

.btn-outline-primary {
	color: var(--bs-primary) !important;
	border-color: var(--bs-primary) !important;
}

.btn-outline-primary:hover {
	background-color: var(--bs-primary) !important;
	color: #fff !important;
}

.banner-unico {
	position: relative;
	height: 400px;
	width: 100%;
	overflow: hidden;
	background-color: #000;
	/* Color de fondo por si la imagen tarda en cargar */
}

.banner-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Mantiene proporción y llena el espacio */
	object-position: center;
	/* Centra la imagen */
}

.banner-contenido {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/* Centrado absoluto */
	text-align: center;
	width: 100%;
	z-index: 1;
}

.banner-unico .container {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	/* Esto centra el contenedor en pantalla, pero su contenido sigue el flujo de bootstrap */
}

.banner-img {
	width: 100%;
	display: block;
}


.whatsapp-float {
	position: fixed;
	width: 60px;
	height: 60px;
	bottom: 40px;
	right: 40px;
	background-color: #25d366;
	color: #FFF;
	border-radius: 50px;
	text-align: center;
	font-size: 30px;
	box-shadow: 2px 2px 3px #999;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: transform 0.3s;
}

.whatsapp-float:hover {
	transform: scale(1.1);
	color: #FFF;
}




.card.toIndex {
  background-color: transparent; /* elimina el fondo blanco del contenedor */
  border: none;                  /* opcional: sin borde */
}

.card-body.toIndex {
  width: 90%;
  margin: -30px auto 0 auto;   /* sube 30px encima de la imagen */
  background-color: #fff;
  border-radius: 10px;         /* bordes redondeados */
  padding: 1.5rem;
  position: relative;          /* mantiene flujo normal */
  z-index: 2;                  /* asegura que quede sobre la imagen */

  max-height: 80px;          /* solo se muestran 50px */
  overflow: hidden;          /* oculta el resto del contenido */
  transition: max-height 1s ease; /* animación suave */
}

.card.toIndex:hover .card-body.toIndex {
  max-height: 500px;         /* se expande al pasar el mouse */
}

.card.toIndex {
  overflow: hidden; /* recorta cualquier desborde de la imagen */
}

.card.toIndex .card-img-top {
  transition: transform 0.5s ease; /* animación suave */
}

.card-body.toIndex {
  padding-top: 1.6rem;   /* menos espacio arriba */
}

.card-body.toIndex h5 {
  margin-bottom: 2rem; 
  margin-top: -0.1rem; 
}

.img-container {
  overflow: hidden;     /* recorta el zoom dentro del marco */
}

.img-container img {
  transition: transform 0.3s ease;
  display: block;       /* elimina espacios fantasma */
  width: 100%;          /* asegura que ocupe todo el ancho */
}

.card.toIndex:hover .img-container img {
  transform: scale(1.1); /* zoom interno */
}


.py-6 {
  padding-top: 2rem !important;   /* más alto arriba */
  padding-bottom: 9rem !important; /* más alto abajo */
}

/* Efecto en iconos */

.icon-zoom {
  display: inline-block;              /* asegura que transform funcione */
  transition: transform 0.3s ease;    /* animación suave */
}

.icon-zoom:hover {
  transform: scale(1.25);              /* crece un 10% */
}