/* -------------------- RESET -------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* -------------------- BODY -------------------- */
body {
  font-family: 'Open Sans', sans-serif;
  /*font-family: Helvetica, Arial, sans-serif;*/
  background: #d2d2d2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* -------------------- HEADER -------------------- */
header {
  width: 100%;
  height: 100px;
  background: #125c64;
  color: #bbb;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}

.contenedor-header {
  width: 97%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  height: 80px;
  margin-top: 10px;
}

/* -------------------- MENU -------------------- */
#menu-bar {
  display: none;
}

/* Mobile menu icon (visible only on mobile) */
.icon-menu, .icon-cerrar {
  font-size: 30px;
  color: #e5e5e5;
  cursor: pointer;
  display: block; /* Show by default for mobile */
}

/* Mobile menu styles */
.menu {
  position: absolute;
  top: 100px;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #125c64;
  transition: transform 0.3s ease-in-out;
  transform: translateX(-100%);
}

#menu-bar:checked ~ .menu {
  transform: translateX(0%);
}

.menu a {
  display: block;
  color: #e5e5e5;
  padding: 15px;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  font-weight: bold;
  letter-spacing: 1px;
}

.menu a.active {
  border-bottom: solid 2px #e5e5e5;
}

/* Desktop menu styles */
@media (min-width: 1024px) {
  .icon-menu, .icon-cerrar {
    display: none; /* Hide the mobile menu icon on desktop */
  }

  .menu {
    position: static;
    width: auto;
    height: auto;
    background: transparent;
    transform: translateX(0%);
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .menu a {
    display: inline-block;
    border-bottom: none;
    margin-left: 20px;
    padding: 10px 0;
  }

  .menu a:hover {
    border-bottom: solid 2px #e5e5e5;
  }

  .menu a.active {
    border-bottom: solid 2px #e5e5e5;
  }
}
/* -------------------- 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: #125c64;
  margin-bottom: 20px;
  letter-spacing: 1px;
}

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

/* -------------------- FOOTER -------------------- */
footer {
  margin-top: auto;
  width: 100%;
  color: #e5e5e5;
  text-align: center;
}

/* "Inicio de página" link */
.inicio-link {
  display: block;
  background-color: #125c64;
  padding: 15px 0;
  font-size: 14px;
  letter-spacing: 1.5px;
  color: #e5e5e5;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.3s;
}

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

.inicio-link i {
  margin-left: 5px; /* Space between text and icon */
}

/* Social links */
.social-links {
  background-color: #125c64;
  padding: 10px 0;
}

.social-links a {
  color: #e5e5e5;
  font-size: 24px;
  margin: 0 10px;
  transition: color 0.3s;
}

.social-links a:hover {
  color: #1A7A7A;
}

/* Footer text */
.footer {
  background-color: #125c64;
  padding: 15px 0;
  font-size: 14px;
  letter-spacing: 1.5px;
}

/*test */
h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2rem;
  color: #125c64;
  letter-spacing: 1px;
}

h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  color: #125c64;
  letter-spacing: 1px;
}

/* -------------------- 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: #125c64;
  margin-bottom: 20px;
  letter-spacing: 1px;
}

.nosotros-section h2 {
  /* test */font-family: 'Bebas Neue', sans-serif;
  font-size: 2rem;
  color: #125c64;
  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: #125c64; /* 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 */
}

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

/* -------------------- RONDA IMAGE -------------------- */
.ronda-image {
  margin: 20px 0; /* Space above and below the image */
  text-align: center; /* Center the image */
}

.ronda-image img {
  max-width: 100%; /* Ensure the image is responsive */
  height: auto; /* Maintain aspect ratio */
  border-radius: 10px; /* Match the site's style */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
}

/* Optional: Add a hover effect */
.ronda-image img:hover {
  transform: scale(1.02); /* Slight zoom on hover */
  transition: transform 0.3s; /* Smooth transition */
}

/********* ESTADISTICAS ******************/

/* Container for the form */
.responsive-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px;
}

/* Label styling */
.responsive-form label {
    font-size: 16px;
    margin-bottom: 5px;
}

/* Dropdown menu styling */
.styled-select {
    padding: 10px;
    width: 100%;
    max-width: 350px; /* Adjust width as needed */
    border: 2px solid #aaa; /*#122335;*/
    border-radius: 5px;
    font-size: 16px;
    background-color: #e7ecf2;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 1.5px;
    font-weight: bold;
}

  @media (max-width:1024px) {
    .styled-select {
      max-width: 100%;
    }
  }

/* Dropdown menu hover effect */
.styled-select:hover {
    border-color: #122335;
}

/* Dropdown menu focus effect */
.styled-select:focus {
    outline: none;
    border-color: #122335;
}

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

.jornada-section h2 {
  font-size: 2rem;
  color: #125c64;
  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 */
}

/* -------------------- INVITATION IMAGE -------------------- */
.invitation-image {
  margin: 20px 0; /* Space above and below the image */
  text-align: center; /* Center the image */
}

.invitation-image img {
  max-width: 100%; /* Ensure the image is responsive */
  height: auto; /* Maintain aspect ratio */
  border-radius: 10px; /* Match the site's style */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
}

/* Optional: Add a hover effect */
.invitation-image img:hover {
  transform: scale(1.02); /* Slight zoom on hover */
  transition: transform 0.3s; /* Smooth transition */
}