* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  background: #f5f5f5;
  color: #333;
  line-height: 1.6;
  overflow-x: hidden;
}

/* HEADER */
header {
  background: linear-gradient(to right, #003366, #0066cc);
  color: #fff;
  padding: 20px 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1000;
  flex-wrap: wrap;
}

header h1 {
  font-size: 1.8rem;
}

nav ul {
  display: flex;
  list-style: none;
  gap: 20px;
  flex-wrap: wrap;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

nav ul li a:hover {
  color: #ffcc00;
}

/* HERO */
.hero {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
  background: url('img/foto5.jpg') no-repeat center/cover;
  position: relative;
  padding: 0 20px;
}
.hero::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,50,100,0.6);
}
.hero-content {position:relative; z-index:2;}
.hero h1 {font-size: 3rem; margin-bottom: 1rem;}
.hero p {font-size: 1.2rem; margin-bottom: 2rem;}
.btn {
  display: inline-block;
  background: #ffcc00;
  color: #003366;
  padding: 12px 25px;
  border-radius: 25px;
  font-weight: 600;
  transition: transform 0.3s ease, background 0.3s ease;
}
.btn:hover {
  transform: scale(1.05);
  background: #ffd633;
}

/* SECCIONES */
section {
  padding: 80px 50px;
  text-align: center;
}
section h2 {
  font-size: 2.2rem;
  margin-bottom: 20px;
  color: #003366;
}
.about {
  background: #fff;
  text-align: center;
  animation: fadeIn 1.5s ease-in-out;
}
.about h2 {font-size: 2.5rem; margin-bottom: 1rem; color: #005b96;}
.about p {font-size: 1.1rem; max-width: 800px; margin: auto; line-height: 1.6;}

/* PLANES */
.plans {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}
.plan {
  background: #fff;
  border-radius: 20px;
  padding: 30px;
  width: 300px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  transition: transform 0.4s ease;
}
.plan:hover {transform: translateY(-10px);}
.plan h3 {font-size: 1.5rem; color: #003366; margin-bottom: 15px;}
.plan p {font-size: 1.1rem; margin-bottom: 15px;}

/* BENEFICIOS */
.benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}
.benefit {
  background: #fff;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}
.benefit:hover {transform: scale(1.05);}
.benefit i {font-size: 2rem; color: #0066cc; margin-bottom: 10px;}

/* FOOTER */
footer {
  background: #003366;
  color: white;
  text-align: center;
  padding: 20px;
}

/* ANIMACIONES */
@keyframes fadeInDown {from {opacity:0; transform:translateY(-40px);} to {opacity:1; transform:translateY(0);}}
@keyframes fadeInUp {from {opacity:0; transform:translateY(40px);} to {opacity:1; transform:translateY(0);}}
.reveal {opacity:0; transform:translateY(50px); transition:0.8s ease;}
.reveal.active {opacity:1; transform:translateY(0);}

/* PARALLAX */
.parallax {
  background: url('img/foto4.jpg') no-repeat center/cover;
  background-attachment: fixed;
  background-size: cover;
  padding: 6rem 10%;
  color: white;
  text-align: center;
}
.parallax h2 {color: white;}

/* ESTADÍSTICAS */
.stats {display:flex; justify-content:space-around; align-items:center; flex-wrap:wrap; text-align:center;}
.stat {flex:1; min-width:200px; margin:1rem;}
.stat h3 {font-size:2.5rem; color:#00c3ff;}

/* GALERÍA */
.gallery {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1rem;
}
.gallery img {
  width:100%;
  border-radius:15px;
  transition:transform 0.5s;
}
.gallery img:hover {transform:scale(1.05);}
#gallery img{width:100%; height: 350px; object-fit:cover;}

/* NOTICIAS */
.news {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:2rem;
}
.news-card {
  background:#fff;
  padding:1.5rem;
  border-radius:15px;
  box-shadow:0 4px 15px rgba(0,0,0,0.1);
  transition:0.3s;
}
.news-card:hover {transform:translateY(-5px);}
.news-card h4 {margin-bottom:1rem; color:#003366;}

/* RESPONSIVE */
@media (max-width: 1024px) {
  header {flex-direction: column; text-align: center; gap: 15px;}
  nav ul {justify-content: center;}
  .hero h1 {font-size: 2.5rem;}
  .hero p {font-size: 1rem;}
}

@media (max-width: 768px) {
  header {padding: 15px 20px;}
  section {padding: 60px 20px;}
  .hero {padding: 0 10px;}
  .hero h1 {font-size: 2rem;}
  .plans, .stats {flex-direction: column; align-items: center;}
  .plan {width: 100%; max-width: 350px;}
}

@media (max-width: 480px) {
  header h1 {font-size: 1.4rem;}
  nav ul {flex-direction: column; gap: 10px;}
  .hero h1 {font-size: 1.6rem;}
  .hero p {font-size: 0.9rem;}
  .btn {padding: 10px 18px; font-size: 0.9rem;}
  section h2 {font-size: 1.6rem;}
  .about p {font-size: 1rem;}
  .stat h3 {font-size: 2rem;}
}

/* Estilos del botón hamburguesa */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.8rem;
  cursor: pointer;
}

/* Modo móvil */
@media (max-width: 768px) {
  .menu-toggle {display: block;}

  nav {
    width: 100%;
    background: #003366;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
  }

  nav.active {
    max-height: 300px; /* suficiente para los enlaces */
  }

  nav ul {
    flex-direction: column;
    text-align: center;
    gap: 15px;
    padding: 20px 0;
  }

  /* Main plegable */
  #main {
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  #main.collapsed {
    opacity: 0.2;
    transform: scale(0.98);
    pointer-events: none; /* evita clics en el contenido mientras el menú está abierto */
  }
}