/* ============================
    RESET / BASE
============================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
}

body {
  line-height: 1.6;
  color: #333;
  background-color: #f9f9f9;
}

/* ============================
    NAVBAR / HEADER
============================ */
header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 2rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

header .logo img {
  height: 80px;
  width: 120px;
}

/* Estilos de la navegación principal (Desktop) */
.nav-menu ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

.nav-menu ul li a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  transition: color 0.3s;
}

.nav-menu ul li a:hover,
.nav-menu ul li a.active {
  color: #6b5b95; /* color destacado */
}

/* Botón de menú hamburguesa (oculto por defecto en Desktop) */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: #6b5b95;
}


/* ============================
    SECCIONES
============================ */
section {
  padding: 100px 2rem 60px; /* 100px top para navbar fija */
  min-height: 80vh;
}
#hero {
  /* Eliminamos estilos previos de background y centrado */
  padding: 0; /* Eliminamos el padding para que el contenido lateral lo controle */
  min-height: 100vh;
  display: flex;
  background-color: #fff; /* Fondo blanco por defecto */
}

.hero-container {
    display: flex;
    width: 100%;
    height: 100vh; /* Ocupa toda la altura de la vista */
    max-width: 1400px; /* Opcional: limita el ancho máximo */
    margin: 0 auto;
}

.hero-izquierda {
    flex: 1; /* Ocupa el 50% del ancho */
    background-color: #fff; /* Fondo blanco sólido */
    display: flex;
    align-items: center; /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */
    padding: 2rem; /* Padding interno */
}

.hero-derecha {
    flex: 1; /* Ocupa el otro 50% del ancho */
    /* RUTA DE TU IMAGEN AQUÍ - Reemplaza 'assets/actividad.jpeg' */
    background: url('assets/actividad.jpg') no-repeat center center/cover; 
    filter: brightness(0.95) grayscale(20%) blur(1px); /* Ajusta brillo, gris y desenfoque */
    min-height: 50vh; /* Asegura una altura mínima */
}

.hero-content {
  max-width: 90%; /* Limita el ancho del texto para una mejor lectura */
  text-align: left; /* Alineamos el texto a la izquierda dentro de su contenedor */
  color: #333; /* El color del texto debe ser oscuro sobre el fondo blanco */
}

#hero h2 {
  font-size: 2.5rem; /* Ajuste para un título de sección */
  margin-bottom: 1rem;
  color: #6b5b95; /* Color destacado de tu fundación */
}

#hero p {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.btn {
  /* Mantenemos los estilos del botón ya definidos */
  margin-top: 1.5rem;
}

.btn {
  display: inline-block;
  background-color: #6b5b95;
  color: #fff;
  padding: 0.8rem 1.5rem;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.btn:hover {
  background-color: #57427f;
}

/* ============================
    NOSOTROS / ABOUT (Actualizado)
============================ */
#nosotros {
  background-color: #fff;
  text-align: center;
  padding-bottom: 20px; /* Reducción de 60px a 20px */
}

#nosotros h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem; /* Aseguramos un pequeño margen en el título */
  /* margin-bottom: 1rem; */
}

#nosotros p {
  max-width: 900px;
margin: 0 auto 0;
  font-size: 1.1rem;
  line-height: 1.5;
}



/* ============================
    PROGRAMAS (sin cambios)
============================ */
#programas {
  background-color: #f0f0f0;
  text-align: center;
  padding-top: 40px; 
  padding-bottom: 60px;
 min-height: 50vh; /* Opcional: reducimos el min-height si solo quieres el contenido */
}

.programas-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
}

.programa {
  background: #fff;
  padding: 1rem;
  border-radius: 8px;
  width: 300px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}

.programa:hover {
  transform: translateY(-5px);
}

.programa img {
  width: 100%;
  height: auto; /* Ajuste para evitar deformación */
  border-radius: 5px;
  margin-bottom: 1rem;
}

.programa h3 {
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
}

/* ============================
    CTA / DONAR (sin cambios)
============================ */
#cta {
  background-color: #6b5b95;
  color: #fff;
  text-align: center;
}

#cta h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

#cta p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

/* ============================
    CONTACTO (sin cambios)
============================ */
#contacto-home {
  background-color: #fff;
  text-align: center;
}

#contacto-home h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

#contacto-home form {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#contacto-home input,
#contacto-home textarea {
  padding: 0.8rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 100%;
}

#contacto-home button {
  background-color: #6b5b95;
  color: #fff;
  border: none;
  padding: 0.8rem;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 5px;
}

#contacto-home button:hover {
  background-color: #57427f;
}

/* ============================
    FOOTER (sin cambios)
============================ */
footer {
  background-color: #333;
  color: #fff;
  padding: 2rem;
  text-align: center;
}

footer .social {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

footer .social li a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

footer .social li a:hover {
  color: #6b5b95;
}

/* ============================
    RESPONSIVE (Actualizado)
============================ */
@media (max-width: 768px) {
    header {
      padding: 0.5rem 1rem;
    }
    header .logo img {
     height: 60px; /* se reduce en celulares/tablets */
   }

  /* Mostrar el botón de menú y ocultar la navegación por defecto */
  .menu-toggle {
    display: block;
  }

  .nav-menu {
    /* Ocultar menú en móvil por defecto */
    display: none;
    position: absolute;
    top: 100%; /* Justo debajo del header */
    left: 0;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border-top: 1px solid #ddd;
    padding: 1rem 0;
  }

  /* Mostrar menú cuando tiene la clase 'active' */
  .nav-menu.active {
    display: block;
  }

  .nav-menu ul {
    flex-direction: column;
    gap: 0;
    text-align: center;
  }

  .nav-menu ul li a {
    display: block; /* Ocupa todo el ancho para una mejor área de clic */
    padding: 0.8rem 1rem;
    border-bottom: 1px solid #eee;
  }
  
  .nav-menu ul li:last-child a {
    border-bottom: none;
  }
  
  /* Contenido */
  section {
      padding: 80px 1rem 40px; /* Ajuste el padding para móviles */
      min-height: auto;
  }
  
/* ============================
    RESPONSIVE para HERO
============================ */
@media (max-width: 768px) {
    .hero-container {
        flex-direction: column; /* Apilar en dispositivos móviles */
        height: auto; /* Permite que la altura crezca con el contenido */
    }

    .hero-izquierda {
        order: 2; /* Movemos el texto abajo de la imagen */
        min-height: 60vh;
        padding: 40px 1rem;
    }

    .hero-derecha {
        order: 1; /* Movemos la imagen arriba del texto */
        min-height: 300px;
        height: 50vh; /* La imagen de fondo ocupa 50% de la vista */
    }

    .hero-content {
      max-width: 100%;
      text-align: center; /* Centramos el texto en móviles */
    }
    
    #hero h2 {
      font-size: 2rem;
    }
    #hero p {
      font-size: 1rem;
    }
}

  #nosotros {
    padding-bottom: 10px; /* Reducción aún más agresiva en móvil */
}

  .programas-grid {
    flex-direction: column;
    align-items: center;
  }
  .programa {
      width: 90%; /* Ajuste de ancho para los programas */
      padding-top: 20px; /* Reducción aún más agresiva en móvil */
  }

}