/* Archivo: styles.css */

/* Aseguramos que el botón y el menú móvil sean visibles */
.navbar-toggler {
	border: none;
	background-color: transparent;
	font-size: 1.5rem;
	color: white;
	cursor: pointer;
  }
  
  .mobile-menu {
	background-color: #1f1d1bde;
	position: absolute;
	top: -100%; /* Empieza fuera de la vista */
	left: 0;
	width: 100%;
	z-index: 1001;
	padding-top: 15px;
	padding-bottom: 15px;
	margin-bottom: 10px;
	opacity: -30; /* Inicialmente invisible */
	transition: all 0.2s ease-in-out; /* Añadimos la transición */
  }
  
  .mobile-menu.show {
	top: 100%; /* Aparece justo debajo del navbar */
	opacity: 1; /* Se hace visible */
  }
  
  .mobile-menu .btn {
	margin: 10px;
  }
  
  .mobile-menu .nav-link {
	color: white;
	padding: 10px 15px;
	text-decoration: none;
	border-bottom: 1px solid #444; 
  }
  
  .mobile-menu .nav-link:hover {
	background-color: #9e2a2f;
	color: white;
  }
  
  /* Desplazar solo el contenido del body hacia abajo cuando el menú móvil se abre */
  body.menu-open > *:not(header) {
	transform: none; /* Quitar desplazamiento */
	transition: none; /* Sin animación */
  }
  
  /*#######################################*/
  /* General */
  body {
	font-family: "Helvetica", sans-serif;
	line-height: 1.6;
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
	background-color: #ffffff;
  }
  
  /* Body para celular  */
  @media screen and (max-width: 768px) {
	body {
	  font-family: "Helvetica", sans-serif;
	  line-height: 1.6;
	  margin: 0;
	  padding: 0;
	  margin-top: 50px;
	  margin-bottom: 20px;
	  scroll-behavior: smooth;
	  background-color: #ffffff;
	}
	
  }
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
	font-family: "Playfair Display", sans-serif !important;
	font-weight: bold !important;
	color: #000000 !important;
	text-shadow: none !important;
  }
  
  p,
  a,
  li {
	color: #000000 !important;
	text-shadow: none !important;
  }
  
  /* Encabezado */
  header {
	background-color: #1f1d1b !important; /* Fondo negro */
	position: fixed !important; /* Fijar el encabezado en la parte superior */
	width: 100% !important; /* Asegurarse de que ocupe todo el ancho */
	top: 0; /* Alineación en la parte superior */
	left: 0;
	z-index: 1000 !important; /* Asegurarse de que el encabezado esté por encima de otros elementos */
	padding-top: 0px; /* Espacio para que no se solape con el contenido */
  }
  
  /* Espacio para el contenido cuando el encabezado está fijo */
  body {
	padding-top: 17px; /* Deja espacio para el encabezado fijo */
  }
  
  /* Logo en el encabezado */
  header .logo img {
	max-height: 65px !important; /* Controlar la altura del logo */
  }
  
  /* Enlaces de navegación */
  /* Estilo para los botones del encabezado (Inicio, Áreas Prácticas, etc.) */
  header .nav-link {
	font-size: 18px !important; /* Tamaño del texto */
	color: #ffffff !important; /* Color del texto (gris claro) */
	font-family: "Helvetica", sans-serif !important; /* Tipo de letra heredado */
	cursor: pointer !important; /* Cambiar el cursor a pointer */
	position: relative !important;
	border: none !important; /* Sin borde */
	background: none !important; /* Fondo transparente */
	transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !important;
	transition-duration: 600ms !important;
	transition-property: color !important; /* Transición en el color del texto */
  }
  
  /* Efecto cuando se pasa el ratón o se hace foco */
  header .nav-link:focus,
  header .nav-link:hover {
	color: #fff !important; /* Texto blanco cuando se pasa el ratón o se hace foco */
  }
  
  /* Pseudo-elemento que crea la línea debajo del botón */
  header .nav-link:after {
	content: "" !important;
	pointer-events: none !important;
	bottom: -2px !important;
	left: 0% !important;
	position: absolute !important;
	width: 0% !important;
	height: 2px !important; /* Altura de la línea */
	background-color: #9e2a2f !important; /* Línea blanca */
	transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !important;
	transition-duration: 400ms !important;
	transition-property: width, left !important; /* Animación de la línea */
  }
  
  /* Cuando se pasa el ratón o se hace foco, la línea se expande */
  header .nav-link:focus:after,
  header .nav-link:hover:after {
	width: 80% !important;
	left: 10% !important; /* La línea se expande desde el centro */
  }
  
  @media screen and (max-width: 768px) {
	/* Efecto cuando se pasa el ratón o se hace foco */
	header .nav-link:focus,
	header .nav-link:hover {
	  color: #fff !important; /* Texto blanco cuando se pasa el ratón o se hace foco */
	}
  
	/* Pseudo-elemento que crea la línea debajo del botón */
	header .nav-link:after {
	  content: "" !important;
	  pointer-events: none !important;
	  bottom: -2px !important;
	  left: 0% !important;
	  position: absolute !important;
	  width: 0% !important;
	  height: 2px !important; /* Altura de la línea */
	  background-color: #9e2a2f !important; /* Línea blanca */
	  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !important;
	  transition-duration: 400ms !important;
	  transition-property: width, left !important; /* Animación de la línea */
	}
  
	/* Cuando se pasa el ratón o se hace foco, la línea se expande */
	header .nav-link:focus:after,
	header .nav-link:hover:after {
	  width: 36% !important;
	  left: 0% !important; /* La línea se expande desde el centro */
	}
  }
  
  /* Estilo de los botones generales */
  
  header .btn {
	color: #fff !important; /* Texto blanco */
	border: 1px solid #fff !important; /* Borde blanco */
	background-color: #9e2a2f !important; /* Fondo transparente */
	font-weight: bold !important;
	transition: background-color 0.3s, border-color 0.3s !important;
	margin-top: 3px;
	margin-left: 2px;
  }
  
  /* Efecto hover para los botones */
  header .btn:hover {
	background-color: #9e2a2f !important; /* Fondo rojo oscuro al hacer hover */
	color: white !important;
	border-color: #9e2a2f !important; /* Borde rojo oscuro */
  }
  
  /* Estilo para el botón específico en el encabezado */
  header .btn-outline-light {
	border-color: #9e2a2f !important; /* Borde rojo oscuro */
	color: white !important; /* Texto blanco */
	background-color: #9e2a2f; /* Fondo rojo oscuro */
	font-weight: bold !important;
  }
  
  header .btn:hover {
	color: #9e2a2f !important; /* Texto rojo cuando se pasa el ratón */
	background-color: white !important; /* Fondo blanco al pasar el ratón */
	border-color: #9e2a2f !important; /* Borde rojo oscuro */
	transform: scale(1.03) !important; /* Aumenta el tamaño del botón */
  }
  
  /* Expansión de la línea cuando se pasa el ratón */
  header .btn:hover::after {
	width: 100% !important; /* La línea se expande a 100% */
	left: 0% !important; /* La línea empieza desde el borde izquierdo */
  }


 /* =====================
   Versión Desktop (por defecto)
========================= */

/* Estilos para todos los elementos dentro del Banner Principal */
.banner-principal h1,
.banner-principal h2,
.banner-principal h3,
.banner-principal h4,
.banner-principal h5,
.banner-principal h6,
.banner-principal p,
.banner-principal a,
.banner-principal li {
  font-family: "Helvetica", sans-serif !important;
  font-weight: bold !important;
  color: #ffffff !important;
  text-shadow: none !important;
}

/* Banner con transición fade + zoom tipo Ken Burns */
.banner-fade {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.banner-fade .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: fadeZoom 12s infinite ease-in-out;
  transform: scale(1);
  z-index: 1;
}

.banner-fade .slide:nth-child(1) {
  background-image: url('assets/images/Banner.jpg');
  animation-delay: 0s;
}

.banner-fade .slide:nth-child(2) {
  background-image: url('assets/images/BAnner2.png');
  animation-delay: 6s;
}

@keyframes fadeZoom {
  0%   { opacity: 1; transform: scale(1); }
  45%  { opacity: 1; transform: scale(1.07); }
  50%  { opacity: 0; transform: scale(1.07); }
  95%  { opacity: 0; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}

/* Contenido centrado sobre el banner con fondo oscuro */
.banner-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4); /* Fondo más oscuro */
  color: #fff !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 20px;
  z-index: 2;
}

.banner-content h1 {
  font-size: 4rem;
  font-weight: bold;
  margin-bottom: 1rem;
  color: #fff !important;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);
}

.banner-content p {
  font-size: 1.6rem;
  margin-bottom: 1.5rem;
  color: #fff !important;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.70);
}

.btn-banner {
  border: 2px solid #9e2a2f;
  background-color: #9e2a2f;
  color: white !important;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s ease;
  border-radius: 10px;
}

.btn-banner:hover {
  background-color: white !important;
  color: #9e2a2f !important; /* Mantiene la visibilidad del texto */
  border: 2px solid #9e2a2f;
}

/* =====================
   Ajustes para Móviles
   (max-width: 768px)
========================= */
@media screen and (max-width: 768px) {
  .banner-fade {
    /* Puedes optar por mantener 100vh o usar un alto mínimo más ajustado */
    height: 70vh;
  }
  
  .banner-content h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
  }
  
  .banner-content p {
    font-size: 1.2rem;
    margin-bottom: 1rem;
  }
  
  .btn-banner {
    padding: 10px 20px;
    font-size: 14px;
  }
}

/* =====================
   Ajustes para iPad Pro
   (min-width: 769px and max-width: 1024px)
========================= */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .banner-fade {
    height: 90vh;
  }
  
  .banner-content h1 {
    font-size: 3.5rem;
  }
  
  .banner-content p {
    font-size: 1.4rem;
  }
  
  .btn-banner {
    padding: 12px 24px;
    font-size: 16px;
  }
}

  

/* ÁREAS PRACTICAS*/
.card {
	position: relative;
	width: 300px;
	max-width: 300px;
	margin: auto;
	height: 300px;
	border-radius: none;
	display: flex;
	justify-content: space-around;
	overflow: hidden;
	transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  }
  
  .card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
  }
  
  .card__content {
	position: absolute;
	top: 50%;
	left: -100%; /* Comienza fuera de la tarjeta, en el lado izquierdo */
	transform: translateY(-50%);
	width: 100%;
	height: 100%;
	padding: 20px;
	box-sizing: border-box;
	background-color: #9e2a30f1 !important ;
	opacity: 0; /* Oculto inicialmente */
	transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  }
  
  .card__content {
	position: absolute;
	top: 50%;
	left: -100%; /* Comienza fuera de la tarjeta, en el lado izquierdo */
	transform: translateY(-50%);
	width: 75%;
	height: 100%;
	padding: 20px;
	box-sizing: border-box;
	background-color: #9e2a2f;
	opacity: 0; /* Oculto inicialmente */
	transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  }
  
  .card:hover .card__content {
	left: 0; /* Se mueve hacia su posición inicial dentro de la tarjeta */
	opacity: 3; /* Aparece */
  }
  
  .card__title {
	margin: 0;
	font-size: 24px;
	color: #ffffff !important;
	font-weight: 700;
  }
  
  .card__description {
	margin: 10px 0 0;
	font-size: 14px;
	color: #ffffff !important;
	line-height: 1.4;
  }

  
 @media screen and (max-width: 768px) {
	/* ÁREAS PRÁCTICAS */
	.card  {
	  position: relative;
	  width: 300%;
	  max-width: 300px;
	  margin-left: auto;
	  height: 300px;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  overflow: hidden;
	  cursor: pointer; /* Para indicar que es clicable */
	}
  
	.card img {
	  width: 100%;
	  height: 100%;
	  object-fit: cover;
	}
  
	.card__content {
	  position: absolute;
	  bottom: 45;
	  left: 0;
	  width: 40%;
	  height: 100%;
	  padding: 20px;
	  box-sizing: border-box;
	  background-color: rgba(158, 42, 48, 0.637); /* Fondo con opacidad */
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: left;
	  color: #ffffff;
	  text-align: left;
	  z-index: 2;
	  opacity: 92%; /* Siempre visible */
	  filter: drop-shadow(5);
	  pointer-events: none; /* Evita interacción con la capa */
	}
  
	.card__title {
	  margin: -2;
	  font-size: 14px;
	  font-weight: 700;
	  justify-content: left;
	}
  
	.card__description {
	  margin-left: 1px;
	  font-size: 10px;
	  line-height: 1.4;
	}
  
	/* Estilo del enlace */
	.card-link {
	  text-decoration: none;
	}
  }
  
  @media screen and (min-width: 760px) and (max-width: 1000px) {
	/* ÁREAS PRÁCTICAS */
	.card {
		position: relative;
		width: 300%;
		max-width: 300px;
		margin: auto;
		display: flex;
		justify-content: center;	
		align-items: center;
		overflow: hidden;
		cursor: pointer; /* Para indicar que es clicable */
	}

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

	.card__content {
		position: absolute;
		bottom: 45px;
		left: 0;
		width: 70%;
		height: 100%;
		padding: 20px;
		box-sizing: border-box;
		background-color: rgba(158, 42, 48, 0.637); /* Fondo con opacidad */
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: left;
		color: #ffffff;
		text-align: left;
		z-index: 2;
		opacity: 92%; /* Siempre visible */
		filter: drop-shadow(5);
		pointer-events: none; /* Evita interacción con la capa */
	}

	.card__title {
		margin: -2;
		font-size: 14px;
		font-weight: 700;
		justify-content: left;
	}

	.card__description {
		margin-left: 1px;
		font-size: 10px;
		line-height: 1.4;
	}

	/* Estilo del enlace */
	.card-link {
		text-decoration: none;
	}
}

@media screen and (min-height: 1300px) {
	/* ÁREAS PRÁCTICAS */
	.card {
		position: relative;
		width: 100%;
		height: 400px; /* Aumentamos la altura para mejor visualización */
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		cursor: pointer; /* Para indicar que es clicable */
	}

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

	.card__content {
		position: absolute;
		bottom: 45px;
		left: 0;
		width: 60%; /* Un poco más de ancho para mayor visibilidad */
		height: 100%;
		padding: 25px;
		box-sizing: border-box;
		background-color: rgba(158, 42, 48, 0.8); /* Ajustamos la opacidad */
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: left;
		color: #ffffff;
		text-align: left;
		z-index: 2;
		opacity: 95%;
		filter: drop-shadow(5);
		pointer-events: none; /* Evita interacción con la capa */
	}

	.card__title {
		margin: -2;
		font-size: 18px; /* Aumentamos el tamaño de la fuente */
		font-weight: 700;
		justify-content: left;
	}

	.card__description {
		margin-left: 1px;
		font-size: 14px; /* Texto más grande para mejor lectura */
		line-height: 1.5;
	}

	/* Estilo del enlace */
	.card-link {
		text-decoration: none;
	}
}


  /* ================================
   Estilos Base – Desktop (por defecto)
=================================== */

/* Sobre Nosotros */
#sobre-nosotros {
	background-color: #1f1d1b !important; /* Fondo oscuro, elegante */
	color: #ffffff !important;
	min-height: 100vh;
	padding: 120px !important; 
  }
  
  /* Títulos, párrafos, li, etc. dentro de #sobre-nosotros */
  #sobre-nosotros h1,
  #sobre-nosotros h2,
  #sobre-nosotros h3,
  #sobre-nosotros h4,
  #sobre-nosotros p,
  #sobre-nosotros li {
	color: #ffffff !important; /* Texto blanco */
	font-weight: 700 !important;
  }
  
  /* Textos de párrafos en bloque de contenido */
  .sobre-nosotros-text {
	font-size: 1.2rem;
	line-height: 1.8;
	color: #1f1d1b !important; /* Texto de contraste */
	padding: 20px;
  }
  
  /* Enlaces dentro de la sección */
  #sobre-nosotros a {
	color: #9e2a2f !important;
	text-decoration: none;
	font-weight: bold;
  }
  #sobre-nosotros a:hover {
	color: #fff !important;
	text-decoration: underline;
  }
  
  /* Fondo para secciones internas */
  .sobre-nosotros-section {
	background-color: #1f1d1b !important;
	color: #f4f4f4 !important;
	padding: 20px;
	border-radius: 8px;
	margin-bottom: 20px;
  }
  
  /* Títulos de subsecciones */
  .sobre-nosotros-section h3 {
	color: #9e2a2f !important;
	font-size: 1.5rem !important;
	font-weight: 700;
  }
  
  /* Botones */
  .sobre-nosotros-btn {
	background-color: #9e2a2f !important;
	color: #fff !important;
	padding: 10px 20px;
	border-radius: 5px;
	text-transform: uppercase;
	font-weight: bold;
	border: none;
	transition: background-color 0.3s;
  }
  
  /* Imagen */
  .sobre-nosotros-image img {
	width: 100%;
	max-height: 1920px;
	object-fit: cover;
	transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  }
  .sobre-nosotros-image img:hover {
	transform: scale(1.05);
  }
  
  /* Animación de entrada de texto */
  .sobre-nosotros-text p,
  .sobre-nosotros-text h4,
  .sobre-nosotros-text ul {
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.6s ease-in-out;
  }
  .sobre-nosotros-text p.visible,
  .sobre-nosotros-text h4.visible,
  .sobre-nosotros-text ul.visible {
	opacity: 1;
	transform: translateY(0);
  }
  
  /* Mostrar contenido cuando se hace scroll (para pantallas >=768px) */
  @media screen and (min-width: 768px) {
	#sobre-nosotros .row {
	  display: flex;
	  justify-content: space-between;
	}
  }
  .visible {
	opacity: 1 !important;
	transform: translateY(0) !important;
  }
  /* Asegurarse de que el texto sea visible desde el principio */
  .sobre-nosotros-text p,
  .sobre-nosotros-text h4,
  .sobre-nosotros-text ul {
	opacity: 1 !important;
	transform: translateY(0) !important;
  }
  
  /* Cards de Sobre Nosotros */
  .card-sobre-nosotros {
	background-color: rgba(158, 42, 47, 0.9); /* Rojo oscuro con opacidad */
	color: #ffffff;
	border-radius: 10px;
	padding: 20px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  }
  .card-sobre-nosotros:hover {
	transform: scale(1.05);
	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
  }
  
  /* Nube de Palabras */
  .dynamic-word-cloud {
	position: relative;
	align-items: center;
	justify-content: center;
	width: 50%;
	height: 700px; /* Ajusta la altura según lo necesites */
	overflow: hidden;
	background-color: transparent;
  }
  .dynamic-word-cloud .word {
	position: absolute;
	font-family: "Arial", sans-serif;
	font-weight: bold;
	opacity: 0.8;
	filter: blur(6px);
	animation: floatAround 10s infinite ease-in-out;
	transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
  }
  .dynamic-word-cloud .word[data-highlight="true"] {
	filter: blur(0);
	animation: scaleAndBlurHighlight 12s infinite ease-in-out;
	z-index: 2;
  }
  .dynamic-word-cloud .word[data-size="1"] {
	font-size: 12px;
	color: #bbbbbb;
  }
  .dynamic-word-cloud .word[data-size="2"] {
	font-size: 16px;
	color: #e7e7e7;
  }
  .dynamic-word-cloud .word[data-size="3"] {
	font-size: 20px;
	color: #e2e2e2;
  }
  .dynamic-word-cloud .word[data-size="4"] {
	font-size: 24px;
	color: #ffffff;
  }
  .dynamic-word-cloud .word[data-size="5"] {
	font-size: 30px;
	color: #e4e4e4;
  }
  @keyframes floatAround {
	0%, 100% {
	  transform: translate(0, 0);
	}
	25% {
	  transform: translate(5px, -10px);
	}
	50% {
	  transform: translate(-5px, 10px);
	}
	75% {
	  transform: translate(-10px, -5px);
	}
  }
  @keyframes scaleAndBlurHighlight {
	0%, 100% {
	  transform: scale(1.2);
	  filter: blur(4px);
	}
	50% {
	  transform: scale(2);
	  filter: blur(0);
	}
  }
  /* Imagen en sobre-nosotros */
  .sobre-nosotros-image img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	height: auto;
	border-radius: 10px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  }
  /* Contenedor de la nube de palabras */
  .dynamic-word-cloud {
	width: 100%;
	height: 300px;
	position: relative;
	overflow: hidden;
  }
  
  /* ================================
		  Ajustes para Móviles
	 (max-width: 768px)
  =================================== */
  @media screen and (max-width: 768px) {
	/* Ajustar la sección Sobre Nosotros */
	#sobre-nosotros {
	  min-height: auto; /* Elimina 100vh para evitar problemas */
	  padding: 60px !important; /* Menos padding para móviles */
	}
	
	/* Ajustar textos y márgenes */
	.sobre-nosotros-text {
	  font-size: 1rem;
	  padding: 10px;
	}
	
	/* Ajustar Cards */
	.card-sobre-nosotros {
	  text-align: center;
	  padding: 15px;
	}
	
	/* Ocultar la Nube de Palabras */
	.dynamic-word-cloud {
	  display: none;
	}
  }
  
  /* ================================
		  Ajustes para iPad Pro
	 (min-width: 769px and max-width: 1024px)
  =================================== */
  @media screen and (min-width: 769px) and (max-width: 1024px) {
	/* Ajustar la sección Sobre Nosotros */
	#sobre-nosotros {
		min-height: 50vh; /* Elimina 100vh para evitar problemas */
		padding: 120px !important; /* Menos padding para móviles */
	  }
	  
	  /* Ajustar textos y márgenes */
	  .sobre-nosotros-text {
		font-size: 1rem;
		padding: 10px;
	  }
	  
	  /* Ajustar Cards */
	  .card-sobre-nosotros {
		text-align: center;
		padding: 15px;
	  }
	  
	  /* Ocultar la Nube de Palabras */
	  .dynamic-word-cloud {
		display: none;
	  }
	}
  
  
/* Estilos para la franja de logos */


#logos-franja {
	padding: 50px 0;
	background-color: transparent; /* Fondo totalmente transparente */
}

/* Contenedor de los logos */
.logos-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 20px; /* Espaciado entre los logos */
	max-width: 1200px;
	margin: 0 auto;
}

/* Estilos para los logos normales */
.logo img {
	max-height: 60px;
	object-fit: contain;
	transition: transform 0.3s ease-in-out;
}

/* Estilos para los logos de empresas en blanco */
.logo-empresa img {
	max-height: 60px;
	object-fit: contain;
	filter: brightness(0) invert(1); /* Convierte los logos a blanco */
	transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}

/* Efecto hover para los logos de empresas */
.logo-empresa img:hover {
	transform: scale(1.1);
	filter: brightness(1);
}

/* Responsive para tablets */
@media screen and (max-width: 1024px) {
	.logos-container {
		flex-wrap: wrap;
		gap: 15px;
	}
	
	.logo img, .logo-empresa img {
		max-height: 50px;
	}
}

/* Responsive para móviles */
@media screen and (max-width: 768px) {
	.logos-container {
		flex-direction: column;
		gap: 10px;
	}
	
	.logo img, .logo-empresa img {
		max-height: 45px;
	}
}

  
  /*EQUIPOO */
  
  /* Estilos exclusivos para la sección Gerente General */
  #gerente-general {
	background-color: #9e2a2f !important; /* Fondo oscuro, elegante */
	color: #ffffff !important; /* Texto blanco para contraste */
	padding: 80px 30px !important; /* Espaciado alrededor */
  }

  .gerente-img-wrap img {
	max-width: 100%;
	max-height: 700px;
	width: auto;
	height: auto;
	border: 5px solid #9e2a2f20;
	border-radius: 12px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
	transition: transform 0.4s ease;
	object-fit: cover;
  }
  
  .gerente-img img {
	width: 70%;
	height: auto;
	margin-left: 30px;
	border-radius: 20px;
	box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
  }
  
  .gerente-text h2,
  .gerente-text h3 {
	color: #ffffff !important;
	font-weight: 700;
	width: 100%;
	height: auto;
  }

  .gerente-text h5,
  .gerente-text blockquote {
	color: #d4d4d4 !important;
	font-weight: 400;
	width: 100%;
	height: auto;
  }
  
  .gerente-text p {
	font-size: 1.1rem;
	line-height: 1.6;
	color: #ffffff !important;
  }

  .scroll-down-arrow {
	font-size: 2.5rem;
	color: #ffffff !important;
	transition: transform 0.3s ease;
  }
  
  .scroll-down-arrow:hover {
	transform: translateY(5px);
	color: #ffffff;
  }
  
  .scroll-down-arrow i {
	animation: bounce 2s infinite;
  }
  
  @keyframes bounce {
	0%, 100% {
	  transform: translateY(0);
	}
	50% {
	  transform: translateY(5px);
	}
  }
  
  
  /* Responsividad */
  @media screen and (max-width: 768px) {
	#gerente-general .row {
	  flex-direction: column;
	  align-items: center;
	}
  
	.gerente-img img {
	  width: 80%; /* Ajuste la imagen para pantallas pequeñas */
	}
  }
  




/* General */
.contact-footer {
	background-color: #e0dddd; /* Fondo claro */
	color: #333; /* Texto oscuro para mejor contraste */
	padding: 20px 15px;
	font-family: Arial, sans-serif;
	text-align: center;
  }
  
  .contact-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 40px;
  }
  
  
  /* Íconos */
  .contact-item i {
	font-size: 36px;
	color: #9e2a2f; /* Rojo característico */
	margin-bottom: 10px;
  }
  
  /* Títulos */
  .contact-item h4 {
	font-size: 16px;
	color: #9e2a2f;
	margin: 10px 0 5px;
  }
  
  /* Texto */
  .contact-item p {
	font-size: 14px;
	margin: 0;
  }
  
  .contact-item a {
	color: #9e2a2f;
	text-decoration: none;
  }
  
  .contact-item a:hover {
	text-decoration: underline;
  }
  
  /* Responsividad */
  @media (max-width: 768px) {
	.contact-grid {
	  grid-template-columns: 1fr; /* Una sola columna en móviles */
	  gap: 20px; /* Mayor separación */
	}
  
	.contact-item {
	  text-align: center;
	  align-items: center;
	}
  
	.contact-item i {
	  font-size: 30px; /* Iconos más grandes */
	}
  
	.contact-item h4 {
	  font-size: 16px; /* Títulos más legibles */
	}
  
	.contact-item p {
	  font-size: 14px; /* Párrafos más legibles */
	}
  
	.contact-item p a {
	  display: block; /* Cada número en una línea separada */
	  margin: 5px 0;
	}
  }
  
  /* Estilo del formulario */
  .contacto {
	background-color: #1f1d1b !important;
	color: #fff !important;
	padding: 50px 20px !important;
  }
  
  .contacto h2 {
	color: #fff !important;
	text-align: center !important;
	text-shadow: none !important;
  }
  
  .contacto .form-label {
	font-weight: bold !important;
	color: #fff !important;
  }
  
  .contacto .form-control,
  .contacto .form-select {
	width: 100%;
	margin-bottom: 15px;
	padding: 10px;
	font-size: 16px;
  }
  
  .contacto .btn {
	background-color: #9e2a2f !important;
	color: #fff !important;
	border: 1px solid #9e2a2f !important;
	transition: background-color 0.3s, color 0.3s !important;
	padding: 10px;
	font-size: 16px;
  }
  
  .contacto .btn:hover {
	background-color: #fff !important;
	color: #9e2a2f !important;
	border-color: #fff !important;
  }
  
  /* Ajustes para móviles en el formulario */
  @media (max-width: 768px) {
	.row {
	  flex-direction: column; /* Una sola columna en móviles */
	}
  
	.col-md-4,
	.col-md-8 {
	  width: 100%; /* Ancho completo en móviles */
	}
  
	.img-fluid {
	  max-width: 200px; /* Logo más pequeño en móviles */
	  margin: 0 auto; /* Centrado horizontal */
	}
  
	.contacto .btn {
	  width: 100%; /* Botón ocupa todo el ancho */
	}
  }
  
  /* Pie de Página */
  footer {
	background-color: #1b1b1b !important;
	color: #fff !important; /* Asegura que el texto sea blanco */
	text-align: center !important;
  }
  
  footer p {
	font-size: 16px; /* Tamaño de la fuente */
	color: #dcdcdc !important; /* Color del texto para el pie de página */
  }
  

/*Acordeon*/
/* Estilos generales */
.accordion-button {
	background-color: #9e2a2f;
	color: white;
	font-weight: bold;
	border: none;
	transition: background-color 0.3s ease, transform 0.3s ease;
  }
  
  .accordion-button:hover {
	background-color: #7d1e25;
	transform: scale(1.02);
  }
  
  .accordion-button:not(.collapsed) {
	background-color: #7d1e25;
  }
  
  .accordion-body {
	background-color: #f8f9fa;
	border-top: 1px solid #ddd;
	padding: 1rem;
	transition: max-height 0.3s ease, opacity 0.3s ease;
	overflow: hidden;
	max-height: 0;
	opacity: 0;
  }
  
  .accordion-collapse.show .accordion-body {
	max-height: 500px; /* Ajusta según el contenido */
	opacity: 1;
  }
  
  /* Iconos */
  .material-icons {
	vertical-align: middle;
  }

  /* Cambia el color de fondo y texto del botón del acordeón */
  .accordion-button {
    background-color: #9e2a2f; /* Color rojo */
    color: white; /* Texto blanco */
    border: none; /* Elimina el borde predeterminado */
  }

  /* Cambia el color cuando el botón está enfocado o activo */
  .accordion-button:focus {
    box-shadow: none; /* Elimina la sombra azul al hacer clic */
    background-color: #9e2a2f; /* Mantén el color rojo */
    color: white;
  }

  /* Cambia el color cuando el acordeón está colapsado (cerrado) */
  .accordion-button:not(.collapsed) {
    background-color: #9e2a2f; /* Color rojo */
    color: white;
  }

  /* Cambia el color del ícono de flecha cuando el acordeón está abierto */
  .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  }

  /* Cambia el color del ícono de flecha cuando el acordeón está cerrado */
  .accordion-button.collapsed::after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath fill-rule='evenodd' d='M8 1a.5.5 0 0 1 .5.5v11.793l5.146-5.147a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 .708-.708L7.5 12.293V1.5A.5.5 0 0 1 8 1z'/%3E%3C/svg%3E");
  }