/* Reset básico */
body,
h1,
h2,
p,
ul,
li,
nav,
header,
footer {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* Estilos para Layout */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* Asegura que ocupe toda la pantalla */
  margin: 0;

  font-family: Arial, sans-serif;
  line-height: 1.6;
  background: #f4f4f4;
  color: #333;

}

.miImg {
  width: 100%;
  height: 100vh;
  /* 100% de la altura de la ventana */
  object-fit: cover;
  /* Mantiene la proporción de la imagen sin distorsionar */
}

footer {
  /* background-color: #f23333; */
  /* background: linear-gradient(to right, #0000ff 33.33%, #008000 33.33%, #008000 66.66%, #ff0000 66.66%); */
  background: linear-gradient(to right,
        #003E95 30%,
        /* Azul principal */
        #0a7e65 33%,
        /* Transición Azul -> Verde */
        #007E2D 36%,
        #007E2D 63%,
        /* Verde principal */
        #a81515 66%,
        /* Transición Verde -> Rojo */
        #E90B18 69%
        /* Rojo principal */
      );
  color: white;
  text-align: center;
  padding: 0.5rem;
}

.footer-fixed {
  position: relative;
  bottom: 0;
  width: 100%;
}




header {
  background: #f4f6f9;
  color: #E90B18;
  padding: 1rem 0;
  text-align: center;
  position: fixed;
  /* Mantener el header fijo al desplazarse */
  width: 100%;
  top: -120px;
  /* Inicialmente fuera de la pantalla */

  z-index: 1000;
  transition: top 1s ease;
  /* Animación suave */
}

header.visible {
  top: 0;
  /* Header aparece en la parte superior */
}

header h1 {
  margin-bottom: 0.5rem;
}
.redondeado {
  border-radius: 15px 0 0 15px;

}
nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

nav a {
  color: #fff;
  text-decoration: none;
}

main {
  padding: 2rem;
  background: #fff;
  margin: 1rem auto;
  /* max-width: 800px; */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-top: 120px;
    /* Altura suficiente para que el contenido no quede tapado */
}

section {
  margin-bottom: 2rem;
}

/* Botón */
button {
  background: #007bff;
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-radius: 4px;
  font-size: 1rem;
}

button:hover {
  background: #0056b3;
}
.navbar-nav .nav-link:hover {
  color: #e4e706;
background: linear-gradient(to right,
      #003E95 30%,
      /* Azul principal */
      #0a7e65 33%,
      /* Transición Azul -> Verde */
      #007E2D 36%,
      #007E2D 63%,
      /* Verde principal */
      #a81515 66%,
      /* Transición Verde -> Rojo */
      #E90B18 69%
      /* Rojo principal */
    );
  /* Cambiar color al pasar el ratón */
  text-decoration: underline;
  /* Subrayar la opción */
}

.dropdown-menu {
  border-radius: 0 0 15px 15px;
  /* Esquinas redondeadas */
  transition: all 0.3s ease;
  /* Transición suave */
}

.dropdown-menu .dropdown-item:hover {
  background-color: #eef130;
  /* Fondo amarillo en hover */
  color: #000;
  /* Texto negro */
}
/* Desplegar menú al pasar el ratón */
.nav-item.dropdown:hover .dropdown-menu {
  display: block;
  /* Mostrar el menú desplegable */
  margin-top: 0;
  /* Elimina el salto del submenú */
  transition: all 0.3s ease-in-out;
  /* Transición suave */
}

/* Efecto hover en las opciones */
.dropdown-item:hover {
  background-color: #eef130;
  /* Cambia el fondo */
  color: #000;
  /* Cambia el texto */
}
/* Contenedor Principal */
.main-container {
  display: flex;
  height: 100vh;
  /* Altura completa de la pantalla */
  width: 100%;
}

/* Columna Izquierda */
.left-column {
  flex: 1;
  /* Ocupa el 50% del ancho */
  background-color: #f8f9fa;
  /* Color de fondo opcional */
  overflow: hidden;
  /* Evita desbordes de la imagen */
}

.left-column img {
  width: 100%;
  /* La imagen ocupa toda la columna */
  height: 100%;
  /* Escala la imagen para llenar el espacio */
  object-fit: cover;
  /* Recorta para que la imagen no se deforme */
}

/* Columna Derecha */
.right-column {
  flex: 1;
  /* Ocupa el otro 50% */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  /* Fondo blanco para contraste */
  padding: 2rem;
  text-align: center;
}

/* Estilo del Botón */
.action-btn {
  background-color: #0056b3;
  color: #ffffff;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  margin-top: 1rem;
  transition: background-color 0.3s ease;
}

.action-btn:hover {
  background-color: #ffc107;
  /* Color amarillo al pasar el ratón */
  color: #000;
}

/* Loader: ocupa toda la pantalla */
.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  /* Fondo semitransparente */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  /* Asegura que esté al frente */
}

/* Spinner animado */
.spinner {
  border: 5px solid #f3f3f3;
  /* Color claro */
  border-top: 5px solid #d9534f;
  /* Color principal (Bootstrap danger) */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

/* Animación del spinner */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.card-body {
  display: none;
  transition: opacity 0.3s ease;
}

.card:hover .card-body {
  display: block;
  opacity: 1;
  font-size: 14px;
  color:white;
  background-color: rgba(231, 23, 23, 0.9);
  /* Fondo semitransparente */
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 10px;
}

.card-img-top {
  transition: transform 0.3s ease;
}

.card:hover .card-img-top {
  transform: scale(1.1);
}

.img-responsive .img-fluid {
  padding-bottom: 10px;
  padding-top: 5px;

}

@media (max-width: 768px) {
  .loader {
    width: 100%;
    height: 100%;
  }

  #home {
    margin: 0;
    padding: 0;
  }
  .titulo {
    visibility: hidden;
  }
  header {
    height: 100px;
  }
    header .logo {
      margin-top: 0px;
      height: 40px;
      width: 60px;
      /* Altura reducida */
    }
    header .redondeado{
      margin-top: 0px;
      position: relative;

      top: -80px;
        /* Ya no es fijo */
    }
    main {
      top: -90px;
    }
}