<style>
    /* Reset y fuente */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'Montserrat', sans-serif;
      color: #111;
      scroll-behavior: smooth;
    }

    /* Navegación */
    nav {
      position: fixed;
      top: 0;
      width: 100%;
      background: rgba(30, 58, 138, 0.95);
      display: flex;
      justify-content: center;
      padding: 15px 0;
      z-index: 1000;
      backdrop-filter: blur(6px);
      border-bottom: 3px solid #ffd700;
    }
    nav a {
      margin: 0 25px;
      color: #fff;
      text-decoration: none;
      font-weight: 600;
      font-size: 1.1em;
      transition: 0.3s;
    }
    nav a:hover {
      color: #ffd700;
      transform: scale(1.1);
    }

    /* Parallax sections */
    section {
      min-height: 100vh;
      padding: 80px 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #fff;
      text-align: center;
      background-attachment: fixed;
      background-size: cover;
      background-position: center;
      transition: opacity 1s ease, transform 1s ease;
      opacity: 0;
      transform: translateY(40px);
    }
    section.visible {
      opacity: 1;
      transform: translateY(0);
    }

    header {
      background-image: url('https://images.unsplash.com/photo-1507537297725-24a1c029d3ca?auto=format&fit=crop&w=1350&q=80');
      background-attachment: fixed;
      background-size: cover;
      background-position: center;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #ffd700;
      text-shadow: 2px 2px 15px rgba(0,0,0,0.6);
    }
    header h1 { font-size: 3em; margin-bottom: 15px; }
    header p { font-size: 1.5em; max-width: 800px; }

    /* Secciones con color sólido y sombra */
    #mision { background: #3b82f6; }
    #actividades { background: #1e3a8a; }
    #contacto { background: #2563eb; }

    h2 { font-size: 2.5em; margin-bottom: 20px; color: #ffd700; }
    h3 { font-size: 1.5em; margin-top: 15px; margin-bottom: 10px; }

    p { font-size: 1.1em; max-width: 800px; margin-bottom: 15px; }

    /* Botones animados */
    .btn {
      padding: 12px 30px;
      margin: 10px;
      background: #ffd700;
      color: #1e3a8a;
      border: none;
      border-radius: 25px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.4s;
      box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    }
    .btn:hover {
      transform: translateY(-5px) scale(1.05);
      box-shadow: 0 12px 25px rgba(0,0,0,0.4);
      background: #fbbf24;
    }

    /* Imágenes animadas */
    .imagenes {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
      margin: 25px 0;
    }
    .imagenes img {
      border-radius: 25px;
      width: 220px;
      border: 5px solid #ffd700;
      box-shadow: 0 8px 25px rgba(0,0,0,0.3);
      transition: transform 0.4s, box-shadow 0.4s;
    }
    .imagenes img:hover {
      transform: scale(1.1);
      box-shadow: 0 15px 35px rgba(0,0,0,0.4);
    }

    /* Footer con iconos sociales animados */
    footer {
      background: #1e3a8a;
      color: #ffd700;
      text-align: center;
      padding: 40px 20px;
      position: relative;
      overflow: hidden;
    }
    footer p { margin-bottom: 15px; }
    .social-icons {
      display: flex;
      justify-content: center;
      gap: 25px;
    }
    .social-icons a {
      color: #ffd700;
      font-size: 1.5em;
      transition: transform 0.3s, color 0.3s;
    }
    .social-icons a:hover {
      color: #fbbf24;
      transform: scale(1.3);
    }
  </style>
