@import url(menu.css);

/* Reset de márgenes y rellenos, además de ajustar el box-sizing */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Estilos generales del cuerpo */
body {
  font-family: Helvetica, Arial, sans-serif;
  background: #d2d2d2;
  min-height: 100vh; /* Footer stays on bottom */
  display: flex; /* Footer stays on bottom */
  flex-direction: column; /* Footer stays on bottom */
}

/* Estilos del header */
header {
  width: 100%;
  height: 100px; /* Altura total del header, considerando el logo */
  background: #141e37;
  color: #bbb;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100; /* Asegura que el header quede sobre otros elementos */
}

/* Estilos de la imagen dentro del header */
header img {
  float: left;
  margin-top: 10px;
}

/* Estilos del logo */
.logo {
  height: 80px; /* Ajuste de altura del logo */
}

/* Contenedor general del header */
.contenedor-header {
  width: 97%;
  margin: auto; /* Centra el contenido horizontalmente */
}

/* Estilos para contener los elementos del header */
header .contenedor {
  display: table;
}


/* footer */

footer {
    margin-top: auto;
    width: 100%;
    /*background-color: #122335;*/
    color: #828282;
    text-align: center;
    /*padding: 20px 0;*/
    /*font-size: 14px;*/
}

footer a {
  text-decoration: none;
}


.inicio {
  background-color: #141e37;
  padding: 15px 0;
  font-size: 14px;
  color: #bbbbbb;
  letter-spacing: 1.5px;
}

.inicio:hover {
  background-color: #192645;
}

.footer {
  background-color: #141e37;
  padding: 15px 0;
  font-size: 14px;
  letter-spacing: 1.5px;
}

/* -------------------- MAIN CONTENT -------------------- */
main {
  flex: 1; /* Takes up remaining space to push footer to the bottom */
  padding: 120px 20px 20px; /* Adjusted for fixed header */
  text-align: center;
}

main h1 {
  /* test */  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.5rem;
  color: #141e37;
  margin-bottom: 20px;
  letter-spacing: 1px;
}

main p {
  font-size: 1.2rem;
  color: #333;
}

/* -------------------- INSTALACIONES PAGE -------------------- */
.jornada-section {
  margin: 40px 0; /* Space between jornadas */
}

.jornada-section h2 {
  font-size: 2rem;
  color: #141e37;
  margin-bottom: 20px;
  text-align: left;
}

/* Gallery for jornada images */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px; /* Space between images */
  padding: 10px;
}

.gallery img {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s;
}

.gallery img:hover {
  transform: scale(1.05); /* Slight zoom on hover */
}

/* Separator between jornadas */
.separator {
  width: 100%;
  height: 2px;
  background-color: #125c64;
  margin: 40px 0; /* Space above and below the separator */
  opacity: 0.3; /* Subtle appearance */
}



/* -------------------- NOSOTROS PAGE -------------------- */
.nosotros-section {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  text-align: center; /* Center the section title */
}

.nosotros-section h1 {
  font-size: 2.5rem;
  color: #141e37;
  margin-bottom: 20px;
  letter-spacing: 1px;
}

.nosotros-section h2 {
  /* test */font-family: 'Bebas Neue', sans-serif;
  font-size: 2rem;
  color: #141e37;
  margin-top: 30px;
  margin-bottom: 15px;
  text-align: left; /* Align headings to the left */
}

.nosotros-section p {
  font-size: 1.1rem;
  color: #333;
  line-height: 1.6;
  margin-bottom: 20px;
  text-align: left; /* Align paragraphs to the left */
}

.nosotros-image img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin-top: 20px;
}

/* -------------------- DOWNLOAD LINK -------------------- */
.download-link {
  margin-top: 30px; /* Space above the link */
  text-align: left; /* Align to the left */
}

.download-link a {
  color: #141e37; /* Same color as <h2> headings */
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: bold;
  transition: color 0.3s;
}

.download-link a:hover {
  color: #1A7A7A; /* Slightly lighter color on hover */
}

.download-link i {
  margin-right: 10px; /* Space between icon and text */
}

/* -------------------- UNORDERED LIST -------------------- */
.nosotros-section ul {
  list-style-type: disc; /* Use disc bullets (default) */
  margin-left: 20px; /* Indent the list */
  padding-left: 20px; /* Add padding for better spacing */
  text-align: left; /* Align list items to the left */
}

.nosotros-section ul li {
  font-size: 1.1rem;
  color: #333; /* Same color as paragraphs */
  line-height: 1.6;
  margin-bottom: 10px; /* Space between list items */
}

.nosotros-section ol {
  list-style-type: decimal; /* Usa números en lugar de viñetas */
  margin-left: 20px; /* Sangría de la lista */
  padding-left: 20px; /* Espaciado interno */
  text-align: left; /* Alineación del texto a la izquierda */
}

.nosotros-section ol li {
  font-size: 1.1rem;
  color: #333; /* Color igual que los párrafos */
  line-height: 1.6;
  margin-bottom: 10px; /* Espacio entre elementos */
}


/* -------------------- BOLD CLASS -------------------- */
.bold {
  font-weight: bold;
  color: #125c64; /* Same color as <h2> headings */
}