/* Reglas Globales */

html,
body {
  height: 100%;
  margin: 0; /* Elimina margen por defecto del navegador */
}

.wrapper {
  /* Altura mínima para ocupar la pantalla completa menos el footer */
  min-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
}

/* Navbar y sus estilos */
.navbar {
  flex-shrink: 0; /* Evita que se contraiga */
}

/* Fuente y estilo global del cuerpo */
body {
  font-family: "Arial", sans-serif;
}

/* Logo de la marca utilizado en la navbar */
.brandlogo {
  height: 50px;
  width: auto;
}

/* Colores de enlaces en la navbar */
.navbar-light .nav-link {
  color: #000;
}

.navbar-light .nav-link:hover {
  color: #0d9488;
}

/* Espacio entre enlaces de la navbar */
.navbar-nav .nav-link {
  margin-right: 15px;
}

/* Ajuste del logo en la navbar */
.navbar-brand img {
  display: block;
  max-height: 80px;
}

/* Sección de encabezado (Hero) que puede ser común */
header {
  background: url("../assets/img/") no-repeat center center;
  background-size: cover;
}

/* Fondo personalizado (ej: Hero section) */
.custombg {
  background-color: #0d9488;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
}

/* Ajustes del carrusel (aplican globalmente si se usan carruseles en otras páginas) */
.carousel-control-prev,
.carousel-control-next {
  width: 5%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: black;
}

.carousel-control-prev {
  left: -5%;
}

.carousel-control-next {
  right: -5%;
}

/* Padding estándar para secciones en todas las páginas */
section {
  padding: 2rem 0;
}

/* Footer global */
footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 1rem 0;
  margin-top: auto;
}

/* Ajustes responsivos en la navbar */
@media (min-width: 768px) {
  .nav-link {
    font-size: 0.9rem;
  }
}

@media (min-width: 992px) {
  .nav-link {
    font-size: 1.2rem;
  }
}

/* Estilos para .card si se usan de forma global en otras páginas también */
.card {
  height: 100%;
  max-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.card-body {
  flex-grow: 1;
  display: flex;
  align-items: center; 
  justify-content: center;
}

.card-title-container {
  width: 100%;
  text-align: center;
  margin-top: auto;
}

/* Hover global para tarjetas (si se quiere la misma experiencia en todas las páginas) */
.card:hover {
  color: #0d9488;
}