/* base.css */
@font-face {
  font-family: 'Mistral',Arial, sans-serif;
  src: url('../Fuentes/mistral.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


html, body {
  height: 100%;
  font-family: 'Arial', 'Helvetica', 'sans-serif';
}  

/* .fondo-imagen {

  background: url('../img/fondo.jpg') center/cover no-repeat;
  min-height: 100vh;
} */
.titulo{
  position: absolute;
  top:250px;
  right:50px;
  font-family: 'Mistral';
  /* src: url('./fuentes/Mistral.ttf') format('truetype'); */
  background-color:transparent;
  color: #003366;
  font-style: normal;
  font-size: 45px !important;
  /* letter-spacing: 1px; */
  text-shadow: 1px 1px 4px rgba(0,0,0,3);
  
  
  /* margin-top: 200px;
  margin-left: 450px; */
  
}

.titulo2{
  position: absolute;
  top:200px;
  left:50px;
  font-family: 'Arial';
  /* src: url('./fuentes/Mistral.ttf') format('truetype'); */
  background-color:transparent;
  color: #fafcfd;
  font-style: normal;
  font-size: 16px !important;
  max-width: 250px;
  /* letter-spacing: 1px; */
  text-shadow: 1px 1px 4px rgba(0,0,0,3);
  
  
  /* margin-top: 200px;
  margin-left: 450px; */
  
}

.hero {
  height: 100vh;
  background-image: url('../img/fondo.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.nav-menu {
  width: 100%;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.4); /* semitransparente para que se vea sobre la imagen */
}

.secciones {
  display: flex;
  flex-wrap: wrap;      /* permite que bajen en pantallas pequeñas */
  gap: 20px;            /* espacio entre ellas */
}

.micursos{
  max-width: 100%;
  height: 65px;
  margin: 20px;
  margin-bottom: 0px;
  background-color: #2fb5b9;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  overflow: hidden;
  display: flex;
  
  flex-direction:column;

  transition: transform 0.3s ease, box-shadow 0.3s ease;
  padding: 0rem;
  align-content: center;

  /* Fallback: color sólido mientras no cargue el gradient */
  background-color: #003366;

  /* Degradado lineal de arriba abajo */
  background-image: linear-gradient(
    to bottom,        /* dirección: arriba ↓ abajo */
    #003366 0%,       /* color al inicio (0%) */
    #005f99 50%,      /* color intermedio (50%) */
    #0080cc 100%      /* color final (100%) */
  );
}

.micursos P {
  padding-top: 0px !important;
  color: white;
  text-align: center;
  font-style:initial;
  font-size: 48px !important;
}

.propaganda{
  flex: 1 1 45%;        /* base 45% ancho, crece o se encoge según espacio */
  max-width: 50%;
  height: 200px;
  margin-left: 20px;            /* ya usas gap en el padre */
  background-color: #003366;
  border-radius: 8px;
  box-shadow: rgba(0,0,0,0.1) 0px 4px 12px;
  padding: 1.5rem;
  color: white;
  display: flex;
  flex-direction: column;
  align-items:last baseline; /* baja el texto al pie de la sección */
  transition: transform 0.3s ease, box-shadow 0.3s ease;

  background-image: url('../img/cruceros.jpg');  /*traslados*/
  background-size: cover;        /* ajusta la imagen al tamaño del contenedor */
  background-position: center;   /* centra la imagen */
  background-repeat: no-repeat;  /* evita que se repita */
}

.propaganda p {
  color: white;
  text-align: center;
  font-style:initial;
  font-size: 48px !important;
}



.trasla{
  flex: 1 1 45%;        /* base 45% ancho, crece o se encoge según espacio */
  max-width: 50%;
  height: 200px;
  margin-right:  20px;            /* ya usas gap en el padre */
  background-color: #003366;
  border-radius: 8px;
  box-shadow: rgba(0,0,0,0.1) 0px 4px 12px;
  padding: 1.5rem;
  color: white;
  display: flex;
  flex-direction: column;
  align-items:last baseline; /* baja el texto al pie de la sección */
  transition: transform 0.3s ease, box-shadow 0.3s ease;


  background-image: url('../img/colonia new.jpg');
  background-size: cover ;        /* ajusta la imagen al tamaño del contenedor */
  background-position:center ;   /* centra la imagen */
  background-repeat: no-repeat;  /* evita que se repita */
}

.trasla p {
  color: white;
  text-align: center;
  font-style:initial;
  font-size: 48px !important;
}

.final{
  /*flex: 1 1 45%;        /* base 45% ancho, crece o se encoge según espacio */
  max-width: 100%;
  height: 100px;
  margin:  20px;
  margin-top: 20px;
  margin-bottom: 20px !important;            /* ya usas gap en el padre */
  background-color: #003366;
  border-radius: 8px;
  box-shadow: rgba(0,0,0,0.1) 0px 4px 12px;
  padding-bottom:  0,5rem;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* baja el texto al pie de la sección */
  transition: transform 0.3s ease, box-shadow 0.3s ease;

  /* Fallback: color sólido mientras no cargue el gradient */
  background-color: #003366;

  /* Degradado lineal de arriba abajo */
  background-image: linear-gradient(
    to bottom,        /* dirección: arriba ↓ abajo */
    #003366 0%,       /* color al inicio (0%) */
    #005f99 50%,      /* color intermedio (50%) */
    #0080cc 100%      /* color final (100%) */
  );


}

/* Footer – íconos sociales */
footer .redes i {
  font-size: 1.4rem;          /* Agranda un poco los íconos */
  transition: color 0.2s ease;
  text-decoration: none;
}

footer .redes a:hover i {
  color: #00d7b6;
  text-decoration: none;             /* Color de acento en hover */
}

.container{
  -ms-flex-align: end;
  text-align: center, end;
  color: white !important;
  margin-bottom: 20px;
}