Default

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Academia Internacional C.D. Leganés</title>
    <script src="https://cdn.tailwindcss.com" defer></script>
    <style>
      body {
        margin: 0;
        padding: 0;
        scroll-behavior: smooth; /* Scroll suave */
      }
    </style>
  </head>
  <body class="font-sans opacity-0 transition-opacity duration-500">

    <section class="hero-section">
      
      <img
        id="poster"
        src="https://statics-maker.llt-services.com/leg/images/2025/06/19/original/0ccf8dab-6863-485a-a85f-cc24bd5d1c02-568.png"
        alt="Fondo Hero"
        class="hero-bg"
        loading="eager"
      />

      
      <div class="hero-overlay"></div>

      
      <div class="hero-video">
        <iframe
          src="https://www.youtube.com/embed/6cFjvN2K3wE?autoplay=1&mute=1&loop=1&playlist=6cFjvN2K3wE&controls=0&modestbranding=1&showinfo=0&rel=0"
          frameborder="0"
          allow="autoplay; fullscreen"
          allowfullscreen
          loading="lazy"
        ></iframe>
      </div>

      
      <div class="hero-content">
        <h1 class="hero-title">TRAIN LIKE A PROFESSIONAL</h1>
        <p class="hero-subtitle">Join the CD Leganés International Women’s Academy</p>
        <div class="hero-buttons">
          <a href="#formulario" class="btn-blue">Request Information</a>
          <a href="#programas" class="btn-white">View Programs</a>
        </div>
      </div>
    </section>

    <script>
      // Ocultar imagen después de unos segundos
      window.addEventListener('DOMContentLoaded', () => {
        setTimeout(() => {
          const poster = document.getElementById('poster');
          if (poster) {
            poster.style.opacity = '0';
            poster.style.transition = 'opacity 1s ease';
          }
        }, 3000);
      });
    </script>

    <style>
      .hero-section {
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
        font-family: sans-serif;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: white;
      }

      .hero-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 1;
      }

      .hero-video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        pointer-events: none;
      }

      .hero-video iframe {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .hero-overlay {
        position: absolute;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 2;
      }

      .hero-content {
        position: relative;
        z-index: 3;
        padding: 0 20px;
        animation: fadeIn 1s ease forwards;
        opacity: 0;
      }

      .hero-title {
        font-size: 2.5rem;
        font-weight: bold;
        margin-bottom: 1rem;
      }

      @media (min-width: 768px) {
        .hero-title {
          font-size: 3.5rem;
        }
      }

      .hero-subtitle {
        font-size: 1.2rem;
        margin-bottom: 2rem;
      }

      @media (min-width: 768px) {
        .hero-subtitle {
          font-size: 1.5rem;
        }
      }

      .hero-buttons {
        display: flex;
        gap: 16px;
        justify-content: center;
        flex-wrap: wrap;
      }

      /* Botón azul con degradado tipo imagen */
      .btn-blue {
        display: inline-block;
        padding: 14px 32px;
        border-radius: 999px;
        background: linear-gradient(90deg, #4facfe, #0052d4); /* celeste a azul intenso */
        color: white;
        font-weight: 600;
        text-decoration: none;
        box-shadow: 0 4px 10px rgba(79, 172, 254, 0.4);
        transition: all 0.3s ease;
      }
      .btn-blue:hover {
        background: linear-gradient(90deg, #3ea1f8, #0042b8);
        transform: translateY(-2px);
      }

      /* Botón blanco */
      .btn-white {
        display: inline-block;
        padding: 14px 32px;
        border-radius: 999px;
        background: white;
        border: 2px solid #2563eb;
        color: #2563eb;
        font-weight: 600;
        text-decoration: none;
        box-shadow: 0 4px 10px rgba(37, 99, 235, 0.15);
        transition: all 0.3s ease;
      }
      .btn-white:hover {
        background: #f8fafc;
        transform: translateY(-2px);
      }

      @keyframes fadeIn {
        to {
          opacity: 1;
        }
      }
    </style>
</html>

<section class="draft-section stacked">
  <div class="draft-container-stacked">

    
    <div class="draft-image-wrapper-stacked">
      <img src="https://statics-maker.llt-services.com/leg/images/2025/05/06/original/a3f886e4-3202-4dd4-94a8-c5da1d00b5bb-813.jpg"
           alt="Jugadoras CD Leganés"
           class="draft-image-stacked" />
    </div>

    
    <div class="draft-text-stacked">
      <h2 class="draft-title-stacked">International Women's Academy</h2>
      <p class="draft-paragraph-stacked">
        Live a transformative experience in Madrid with CD Leganés. Open to players of all ages, our academy offers high-performance training, friendly matches, one-on-one mentorship, and personalized evaluations in a professional and safe environment.
      </p>

      <div class="draft-button-wrapper-stacked">
        <a href="#programas" class="btn-primary">View Programs</a>
      </div>
    </div>
  </div>
</section>

<style>
  /* Fondo celeste suave y respiración */
  .draft-section.stacked {
    width: 100%;
    background: linear-gradient(135deg, #e6f2ff 0%, #cfe5ff 100%);
    padding: 64px 24px;
  }

  /* Contenedor centrado y estrecho para lectura */
  .draft-container-stacked {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  /* Imagen grande con relación y sombra suave */
  .draft-image-wrapper-stacked {
    width: 100%;
  }

  .draft-image-stacked {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.18);
  }

  /* Texto centrado, buen ritmo tipográfico */
  .draft-text-stacked {
    text-align: center;
    padding: 0 8px;
  }

  .draft-title-stacked {
    font-size: 2rem;
    line-height: 1.15;
    font-weight: 800;
    margin: 8px 0 14px;
    color: #0b1b3a;
  }
  @media (min-width: 768px) {
    .draft-title-stacked { font-size: 2.5rem; }
  }

  .draft-paragraph-stacked {
    font-size: 1.05rem;
    line-height: 1.75;
    color: #0f2647;
    max-width: 820px;
    margin: 0 auto 18px;
    text-align: justify;
  }

  .draft-button-wrapper-stacked {
    margin-top: 10px;
  }

  /* Botón blanco con borde azul */
.btn-primary {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 999px;
  background: white;
  border: 2px solid #2563eb; /* azul */
  color: #2563eb; /* texto azul */
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.15);
  transition: all 0.3s ease;
}
.btn-primary:hover {
  background: #f8fafc; /* gris muy claro */
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.25);
}

  /* Suaviza el salto cuando se usa el anchor */
  html { scroll-behavior: smooth; }
</style>

<section class="referents" aria-label="Referentes y Dirección Deportiva">
  <div class="referents__container">

    
    <div class="referents__header">
      <h2 class="referents__title">Role Models & Sporting Leadership</h2>
      <p class="referents__subtitle">
        International talent and professional leadership to accelerate your development at C.D. Leganés.
      </p>
    </div>

    
    <div class="referents__grid">

      
      <article class="person-card" itemscope itemtype="https://schema.org/Person">
        <figure class="person-card__media">
          <img
            src="https://statics-maker.llt-services.com/leg/images/2023/03/27/optimized/5470e9ba-da12-4528-ad09-ddc2188dca5d-839.jpg"
            alt="Nouf Al Anzi entrenando con el CD Leganés"
            class="person-card__img"
            loading="lazy"
            itemprop="image"
          />
        </figure>
        <div class="person-card__body">
          <h3 class="person-card__name" itemprop="name">Nouf Al Anzi</h3>
          <p class="person-card__role">United Arab Emirates Captain</p>
          <p class="person-card__desc">
            Trained and competed with C.D. Leganés. A global reference for our players.
          </p>
          <a
            class="person-card__link"
            href="https://www.cdleganes.com/noticias/el-c-d-leganes-senior-femenino-incorpora-a-la-capitana-de-emiratos-arabes-unidos-nouf-al-anzi?utm_source=chatgpt.com"
            target="_blank" rel="noopener nofollow"
            aria-label="Abrir la nota oficial sobre Nouf Al Anzi"
          >View official announcement</a>
        </div>
      </article>

      
      <article class="person-card" itemscope itemtype="https://schema.org/Person">
        <figure class="person-card__media">
          <img
            src="https://statics-maker.llt-services.com/leg/images/2025/08/09/original/e59eabfb-7d20-4c28-a4f8-ed1a16d08b9f-769.jpg"
            alt="Cristina Pizarro, Coordinadora de Fútbol Femenino del CD Leganés"
            class="person-card__img"
            loading="lazy"
            itemprop="image"
          />
        </figure>
        <div class="person-card__body">
          <h3 class="person-card__name" itemprop="name">Cristina Pizarro</h3>
          <p class="person-card__role">Women’s Football Coordinator · Former professional player</p>
          <p class="person-card__desc">
            Sporting leadership and a high-performance vision for our first international intake.
          </p>
          <a
            class="person-card__link"
            href="https://www.cdleganes.com/noticias/el-cd-leganes-incorpora-a-cristina-pizarro-como-nueva-coordinadora-de-futbol-femenino"
            target="_blank" rel="noopener nofollow"
            aria-label="Abrir la nota oficial sobre Cristina Pizarro"
          >View official announcementl</a>
        </div>
      </article>

    </div>

    
    <div class="referents__cta">
      <a class="referents__btn" href="#formulario" aria-label="Ir al formulario para solicitar el dossier">
        Get the dossier
      </a>
    </div>

  </div>
</section>

<style>
  /* Smooth scroll solo con CSS */
  html { scroll-behavior: smooth; }

  /* Paleta y bases (alineado a tu bloque draft-cta) */
  .referents {
    width: 100%;
    background-color: rgb(20, 29, 76); /* azul profundo */
    color: #fff;
    padding: 72px 24px;
  }
  .referents__container { max-width: 1200px; margin: 0 auto; }

  .referents__header { text-align: center; margin-bottom: 40px; padding: 0 8px; }
  .referents__title {
    font-weight: 800; text-transform: uppercase; letter-spacing: .02em;
    font-size: 2rem; margin: 0 0 12px;
    text-shadow: 0 0 8px rgba(255,255,255,.25);
  }
  .referents__subtitle {
    margin: 0; opacity: .92;
    font-size: 1rem; line-height: 1.65;
  }

  /* Grid */
  .referents__grid {
    display: grid; gap: 24px;
    grid-template-columns: 1fr;
    margin-bottom: 28px;
  }
  @media (min-width: 768px) {
    .referents__grid { grid-template-columns: repeat(2, 1fr); }
  }

  /* Tarjeta persona */
  .person-card {
    background: #0f1a4a; /* contraste dentro del bloque */
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    box-shadow: 0 6px 16px rgba(0,0,0,.25);
    overflow: hidden;
    display: grid; grid-template-columns: 1fr; gap: 0;
  }
  @media (min-width: 640px) {
    .person-card { grid-template-columns: 46% 54%; }
  }

  .person-card__media { margin: 0; }
  .person-card__img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center 35%;
    aspect-ratio: 16 / 10;
    display: block;
  }

  .person-card__body {
    padding: 18px 18px 20px;
    display: flex; flex-direction: column; justify-content: center;
  }
  .person-card__name {
    font-weight: 800; margin: 0 0 6px; font-size: 1.25rem;
  }
  .person-card__role {
    margin: 0 0 10px; font-weight: 700; color: #7fd6ff; /* acento celeste */
    font-size: .95rem;
  }
  .person-card__desc {
    margin: 0; opacity: .95; line-height: 1.6; font-size: .98rem;
  }
  .person-card__link {
    display: inline-block; margin-top: 12px;
    color: #c7eafe; text-decoration: none; font-weight: 700;
    border-bottom: 2px solid rgba(199,234,254,.35); padding-bottom: 2px;
  }
  .person-card__link:hover { color: #fff; border-color: #fff; }

  /* CTA */
  .referents__cta { text-align: center; }
  .referents__btn {
    display: inline-block;
    background: #00c2ff; color: #001634; text-decoration: none;
    padding: 14px 22px; border-radius: 999px;
    font-weight: 800; letter-spacing: .02em;
    box-shadow: 0 10px 24px rgba(0,194,255,.28);
    transition: transform .12s ease, background-color .12s ease, box-shadow .12s ease;
  }
  .referents__btn:hover {
    background: #03a9dd; transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(0,194,255,.35);
  }

  /* Tipografía responsive */
  @media (min-width: 640px) {
    .referents__title { font-size: 2.4rem; }
    .referents__subtitle { font-size: 1.125rem; }
  }
  @media (min-width: 1024px) {
    .referents__title { font-size: 2.8rem; }
    .referents__subtitle { font-size: 1.2rem; }
  }
</style>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Features</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
      html, body {
        margin: 0;
        padding: 0;
      }
      .card:hover img {
        transform: scale(1.05);
        transition: transform 0.5s ease;
      }
    </style>
  </head>
  <body class="bg-white text-black font-sans">
    
    <section class="w-full py-20 px-6 bg-gradient-to-b from-white to-blue-50">
      <div class="text-center mb-16">
        <p class="text-sky-600 font-semibold uppercase tracking-widest">Features</p>
        <h2 class="text-4xl md:text-5xl font-bold">What Does the International Women's Academy Include?</h2>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 max-w-7xl mx-auto">
        
        <div class="card bg-white rounded-2xl overflow-hidden shadow-xl hover:shadow-2xl transition transform hover:scale-105">
          <img src="https://statics-maker.llt-services.com/leg/images/2025/04/25/original/a2a3c485-3c72-41ea-84c1-b5e254f01420-735.jpg" alt="Training Sessions" class="w-full h-44 object-cover">
          <div class="p-6">
            <h3 class="text-xl font-bold mb-2 text-sky-800">Daily Training Sessions</h3>
            <p>Sessions using CD Leganés’ professional methodology focused on high individual and collective performance.</p>
          </div>
        </div>

        <div class="card bg-white rounded-2xl overflow-hidden shadow-xl hover:shadow-2xl transition transform hover:scale-105">
          <img src="https://statics-maker.llt-services.com/leg/images/2025/04/25/original/bb3b1c38-c2b8-4357-899e-9e7370af83c9-329.jpg" alt="Friendly Matches" class="w-full h-44 object-cover">
          <div class="p-6">
            <h3 class="text-xl font-bold mb-2 text-sky-800">Friendly Matches</h3>
            <p>Compete against other teams and showcase your skills in front of the club's coaching staff.</p>
          </div>
        </div>

        <div class="card bg-white rounded-2xl overflow-hidden shadow-xl hover:shadow-2xl transition transform hover:scale-105">
          <img src="https://statics-maker.llt-services.com/leg/images/2025/05/01/original/4150a2e0-3f3f-4d46-b28f-aa9c5c1e3a61-54.png" alt="Scouting Reports" class="w-full h-44 object-cover">
          <div class="p-6">
            <h3 class="text-xl font-bold mb-2 text-sky-800">Scouting Reports</h3>
            <p>Personalized technical analysis to assess your performance and potential career projection.</p>
          </div>
        </div>

        <div class="card bg-white rounded-2xl overflow-hidden shadow-xl hover:shadow-2xl transition transform hover:scale-105">
          <img src="https://statics-maker.llt-services.com/leg/images/2025/05/01/original/e86bf197-3511-47f9-9a63-d56aeff46cc5-209.png" alt="Video Analysis" class="w-full h-44 object-cover">
          <div class="p-6">
            <h3 class="text-xl font-bold mb-2 text-sky-800">Video Analysis</h3>
            <p>Recording and review of your training sessions and matches, supported by artificial intelligence tools.</p>
          </div>
        </div>

        <div class="card bg-white rounded-2xl overflow-hidden shadow-xl hover:shadow-2xl transition transform hover:scale-105">
          <img src="https://statics-maker.llt-services.com/leg/images/2025/05/01/original/a01003d8-8720-4ffd-8dde-a83fffd47596-102.png" alt="Individual Guidance" class="w-full h-44 object-cover">
          <div class="p-6">
            <h3 class="text-xl font-bold mb-2 text-sky-800">Individual Guidance</h3>
            <p>One-on-one sessions with coaches and technical staff to enhance your development and opportunities.</p>
          </div>
        </div>

        <div class="card bg-white rounded-2xl overflow-hidden shadow-xl hover:shadow-2xl transition transform hover:scale-105">
          <img src="https://statics-maker.llt-services.com/leg/images/2020/06/03/original/370b6419-3d43-439e-915f-53c98cdd95a1-1176398162.jpg" alt="Madrid Experience" class="w-full h-44 object-cover">
          <div class="p-6">
            <h3 class="text-xl font-bold mb-2 text-sky-800">Madrid Experience</h3>
            <p>Cultural activities, international friendships, and full access to the football life in a major European city.</p>
          </div>
        </div>
      </div>

      
      <div class="text-center mt-16">
        <a href="#formulario" class="inline-block bg-gradient-to-r from-sky-400 to-blue-600 text-white font-bold py-4 px-10 text-lg rounded-full hover:scale-105 transition">
          Request Information
        </a>
      </div>
    </section>
  </body>
</html>

<section class="player-type-section">
  <div class="player-type-header">
    <h2 class="player-type-title">WHAT TYPE OF PLAYER ARE YOU?</h2>
    <p class="player-type-subtitle">
      Click on the card that best represents you and find out how we can help you.
    </p>
  </div>

  
  <div class="player-type-grid">
    <div class="player-type-card" onclick="openModal(0)">
      <img src="https://statics-maker.llt-services.com/leg/images/2025/06/24/original/0ad00971-9e05-4f94-8827-e188788f6845-768.jpg" alt="Study with scholarship">
      <div class="overlay">
        <h3>“I want to study with a scholarship”</h3>
        <p>Get ready in Europe before your university adventure.</p>
        <span class="cta">Click to learn more</span>
      </div>
    </div>

    <div class="player-type-card" onclick="openModal(1)">
      <img src="https://statics-maker.llt-services.com/leg/images/2025/05/06/original/d62e022c-bc23-40c7-892c-1e1eaf1eee4c-334.jpg" alt="Professional path">
      <div class="overlay">
        <h3>“Aim for professional football”</h3>
        <p>Train at the highest level with international visibility.</p>
        <span class="cta">Click to learn more</span>
      </div>
    </div>

    <div class="player-type-card" onclick="openModal(2)">
      <img src="https://statics-maker.llt-services.com/leg/images/2025/05/06/original/e3d364a4-aaf0-4481-9684-c2b8cd1e8bc7-722.jpg" alt="Improve">
      <div class="overlay">
        <h3>“I want to improve”</h3>
        <p>Increase your technical, physical, and mental level.</p>
        <span class="cta">Click to learn more</span>
      </div>
    </div>

    <div class="player-type-card" onclick="openModal(3)">
      <img src="https://statics-maker.llt-services.com/leg/images/2025/05/06/original/c02229b0-0ef2-4309-83d1-ae49b726d05a-207.jpg" alt="Unique experience">
      <div class="overlay">
        <h3>“I want a unique experience”</h3>
        <p>Live like a footballer in a magical city.</p>
        <span class="cta">Click to learn more</span>
      </div>
    </div>
  </div>

  
  <div class="referents__cta">
    <a class="referents__btn"
       href="https://statics-maker.llt-services.com/leg/documents/2025/08/08/1915e736-f051-41fa-afa3-e12ad594484f-168.pdf"
       target="_blank" rel="noopener"
       aria-label="Open PDF dossier">
      Get the dossier
    </a>
  </div>
</section>


<div class="modal" id="playerModal">
  <div class="modal-content">
    <span class="close" onclick="closeModal()">×</span>
    <img id="modalImage" src="" alt="Modal Image">
    <h3 id="modalTitle"></h3>
    <p id="modalText"></p>
    <a id="modalBtn" href="#formulario" class="schedule-button" onclick="closeModal()">Request Information</a>
  </div>
</div>

<style>
  .player-type-section {
    background: rgb(20, 29, 76);
    padding: 80px 20px;
    color: white;
    font-family: 'Helvetica Neue', sans-serif;
  }
  .player-type-title { font-size: 2.5rem; text-align: center; font-weight: 900; margin-bottom: 16px; }
  .player-type-subtitle { text-align: center; font-size: 1.1rem; color: #e2e8f0; margin-bottom: 40px; }

  .player-type-grid {
    display: flex; flex-wrap: wrap; gap: 24px; justify-content: center;
  }
  .player-type-card {
    position: relative; width: 300px; height: 420px; overflow: hidden; cursor: pointer;
    background: #1e293b; border: 1px solid #67e8f9;
    box-shadow: 0 0 4px #67e8f9, 0 0 8px #22d3ee, 0 0 12px rgba(103, 232, 249, 0.3);
    transition: transform 0.3s ease;
  }
  .player-type-card:hover { transform: scale(1.05); }
  .player-type-card img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.95); }

  .overlay {
    position: absolute; bottom: 0; padding: 20px; width: 100%;
    background: linear-gradient(0deg, rgba(15,23,42,0.95) 60%, transparent 100%);
  }
  .overlay h3 { font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
  .overlay p { font-size: 0.9rem; margin-bottom: 6px; color: #f1f5f9; }
  .overlay .cta { font-weight: 600; font-size: 0.9rem; color: #67e8f9; text-decoration: underline; }

  /* CTA below, centered */
  .referents__cta { text-align: center; margin-top: 28px; }
  .referents__btn{
    display:inline-block; background:#00c2ff; color:#001634; text-decoration:none;
    padding:14px 22px; border-radius:999px; font-weight:800; letter-spacing:.02em;
    box-shadow:0 10px 24px rgba(0,194,255,.28);
    transition:transform .12s ease, background-color .12s ease, box-shadow .12s ease;
  }
  .referents__btn:hover{ background:#03a9dd; transform:translateY(-1px); box-shadow:0 12px 28px rgba(0,194,255,.35); }

  /* Modal */
  .modal { display:none; position:fixed; z-index:9999; inset:0; background:rgba(15,23,42,.95); overflow:auto; }
  .modal-content{
    background:#1e293b; margin:5% auto; padding:30px; border-radius:16px; max-width:500px; color:white; text-align:center;
    box-shadow:0 0 30px rgba(0,255,255,.4); position:relative;
  }
  .modal-content img{ width:100%; border-radius:12px; margin-bottom:20px; }
  .modal-content h3{ font-size:1.5rem; margin-bottom:12px; color:#67e8f9; }
  .modal-content p{ font-size:1rem; margin-bottom:20px; color:#e2e8f0; }
  .schedule-button{
    background:linear-gradient(to right,#38bdf8,#2563eb); padding:12px 32px; border-radius:999px; color:#fff; text-decoration:none; font-weight:600; display:inline-block;
  }
  .close{ position:absolute; top:10px; right:18px; font-size:28px; cursor:pointer; color:#67e8f9; }
</style>

<script>
  const modal = document.getElementById("playerModal");
  const modalImage = document.getElementById("modalImage");
  const modalTitle = document.getElementById("modalTitle");
  const modalText = document.getElementById("modalText");

  const data = [
    {
      title: "“I want to study with a scholarship”",
      text: "Train with European methodology and high-level sessions before starting your university career.",
      image: "https://statics-maker.llt-services.com/leg/images/2025/06/24/original/0ad00971-9e05-4f94-8827-e188788f6845-768.jpg"
    },
    {
      title: "“Aim for professional football”",
      text: "Train at an elite level, receive performance reports, and gain real visibility in one of Europe's women's football hubs.",
      image: "https://statics-maker.llt-services.com/leg/images/2025/05/06/original/d62e022c-bc23-40c7-892c-1e1eaf1eee4c-334.jpg"
    },
    {
      title: "“I want to improve”",
      text: "If you’re not yet ready to compete at the highest level, start by improving your technique, strength, endurance, and mindset.",
      image: "https://statics-maker.llt-services.com/leg/images/2025/05/06/original/e3d364a4-aaf0-4481-9684-c2b8cd1e8bc7-722.jpg"
    },
    {
      title: "“I want a unique experience”",
      text: "Come live in Madrid, discover new cultures, train with a professional club, and make friends from all over the world.",
      image: "https://statics-maker.llt-services.com/leg/images/2025/05/06/original/c02229b0-0ef2-4309-83d1-ae49b726d05a-207.jpg"
    }
  ];

  function openModal(index) {
    modal.style.display = "block";
    modalImage.src = data[index].image;
    modalTitle.textContent = data[index].title;
    modalText.textContent = data[index].text;
  }
  function closeModal(){ modal.style.display = "none"; }

  window.onclick = function (e) { if (e.target === modal) closeModal(); }
</script>

<section class="schedule-section">
  <div class="schedule-header">
    <h2 class="schedule-title">Choose Your Program</h2>
    <p class="schedule-subtitle">
      Discover our international women's football training options: short-term stays, intensive programs, and academic-athletic experiences in Spain.
    </p>
  </div>

  <div class="schedule-options">

    
    <div class="schedule-card">
      <img src="https://statics-maker.llt-services.com/leg/images/2025/04/25/original/a2a3c485-3c72-41ea-84c1-b5e254f01420-735.jpg" alt="Short Stay" class="schedule-image">
      <h3 class="schedule-card-title">Under 16</h3>
      <p class="schedule-description">
        <strong>Ages:</strong> 12–15 years<br>
        <strong>Duration:</strong> 1 week to 1 month<br><br>
        <strong>Includes:</strong><br>
        ✔ Group training sessions<br>
        ✔ Official CD Leganés kit<br>
        ✔ High-performance facilities<br><br>
        
        📌 Max. 1 month stay<br>
        📌 Mandatory adult companion
      </p>
      <div class="schedule-buttons">
        <div class="schedule-tag tag-solicitud">Application required</div>
      <a href="#formulario" class="schedule-button">Request Information</a>
      </div>
    </div>

    
    <div class="schedule-card">
      <img src="https://statics-maker.llt-services.com/leg/images/2025/04/25/original/bb3b1c38-c2b8-4357-899e-9e7370af83c9-329.jpg" alt="Pro Training Month" class="schedule-image">
      <h3 class="schedule-card-title">Short Stay</h3>
      <p class="schedule-description">
        <strong>Ages:</strong> 16–23 years<br>
        <strong>Duration:</strong> 1 to 3 months<br><br>
        <strong>Includes:</strong><br>
        ✔ Full integration with the club's structure<br>
        ✔ Professional training & friendly matches<br>
        ✔ 360º performance evaluation<br>
        ✔ High-performance infrastructure<br>
        ✔ Match and event attendance<br><br>
        
        📌 Underage players must be accompanied by a legal guardian
      </p>
      <div class="schedule-buttons">
        <div class="schedule-tag tag-solicitud">Application required</div>
      <a href="#formulario" class="schedule-button">Request Information</a>
      </div>
    </div>

    
    <div class="schedule-card">
      <img src="https://statics-maker.llt-services.com/leg/images/2025/07/03/original/4efffadd-d076-4f7b-b35c-e93962f89b13-548.jpg" alt="CD Leganés Experience" class="schedule-image">
      <h3 class="schedule-card-title">C.D. Leganés Experience</h3>
      <p class="schedule-description">
        <strong>Ages:</strong> 16+ years<br>
        <strong>Duration:</strong> 3+ months<br><br>
        <strong>Includes:</strong><br>
        ✔ Full integration into the club's structure<br>
        ✔ Professional training & friendly matches<br>
        ✔ 360º performance evaluation<br>
        ✔ High-performance infrastructure<br>
        ✔ Match and event attendance<br>
        ✔ Optional academic education (UEM)<br><br>
        
        📌 Underage players must be accompanied by a legal guardian<br>
        📌 Valid visa required for stays over 3 months
      </p>
      <div class="schedule-buttons">
        <div class="schedule-tag tag-solicitud">Interview required</div>
      <a href="#formulario" class="schedule-button">Request Information</a>
      </div>
    </div>
  </div>

  
  <div class="schedule-extra-buttons">
    <p class="schedule-info-text">Got questions? We will get back to you in less than 24 hrs</p>
    <div class="schedule-button-group">
      <a href="#formulario" class="schedule-button">Request Information</a>
      <a href="https://statics-maker.llt-services.com/leg/documents/2025/08/08/1915e736-f051-41fa-afa3-e12ad594484f-168.pdf" target="_blank" class="schedule-button outline">View Dossier</a>
    </div>
  </div>
</section>

<style>
  .schedule-section {
    width: 100%;
    background: #ffffff;
    padding: 80px 20px;
    font-family: 'Helvetica Neue', sans-serif;
  }

  .schedule-header {
    max-width: 800px;
    margin: 0 auto 64px auto;
    text-align: center;
  }

  .schedule-title {
    font-size: 2.25rem;
    color: #1d4ed8;
    font-weight: 800;
    margin-bottom: 20px;
  }

  .schedule-subtitle {
    font-size: 1rem;
    color: #4b5563;
  }

  .schedule-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
  }

  @media (min-width: 768px) {
    .schedule-options {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .schedule-card {
    background: #ffffff;
    padding: 32px 24px;
    border-radius: 24px;
    border: 2px solid #38bdf8;
    text-align: center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .schedule-card:hover {
    transform: scale(1.03);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
  }

  .schedule-image {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 16px;
    margin-bottom: 24px;
  }

  .schedule-card-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1d4ed8;
    margin-bottom: 16px;
  }

  .schedule-description {
    font-size: 1rem;
    color: #374151;
    margin-bottom: 24px;
    line-height: 1.6;
    text-align: left;
  }

  .schedule-buttons {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: flex-end;
    height: 120px;
  }

  .schedule-tag {
    font-size: 0.875rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 999px;
    text-align: center;
  }

  .tag-solicitud {
    background-color: #fef3c7;
    color: #92400e;
  }

  .schedule-button {
    display: inline-block;
    background: linear-gradient(to right, #38bdf8, #2563eb);
    color: white;
    padding: 12px 32px;
    font-weight: 600;
    border-radius: 999px;
    font-size: 1rem;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
  }

  .schedule-button:hover {
    transform: scale(1.05);
  }

  /* FINAL CTA */
  .schedule-extra-buttons {
    text-align: center;
    margin-top: 60px;
  }

  .schedule-info-text {
    font-size: 1.1rem;
    color: #374151;
    margin-bottom: 20px;
  }

  .schedule-button-group {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
  }

  .schedule-button.outline {
    background: white;
    color: #2563eb;
    border: 2px solid #2563eb;
    box-shadow: none;
  }

  .schedule-button.outline:hover {
    background: #eff6ff;
    transform: scale(1.05);
  }
</style>

<section class="residence-section">
  <div class="residence-header">
    <h2 class="residence-title">Safe and Modern Accommodation</h2>
    <p class="residence-description">
      We know how important it is for families to feel confident about where their daughters will live. Our residence provides a comfortable, modern, and secure environment, with 24/7 supervision, common areas, a dining hall, double rooms, study spaces, and much more.
    </p>
  </div>

  
  <div class="residence-gallery">
    <div class="gallery-item">
      <img src="https://statics-maker.llt-services.com/leg/images/2024/04/03/original/5a2ccca9-aebb-4357-91b0-d1730a8aa48e-878.png" alt="Habitaciones" class="gallery-img">
      <div class="gallery-caption">Rooms</div>
    </div>
    <div class="gallery-item">
      <img src="https://statics-maker.llt-services.com/leg/images/2024/04/03/original/583408bb-54a3-4ffd-a43f-bae0265d55bb-228.jpg" alt="Comedor" class="gallery-img">
      <div class="gallery-caption">Full Board</div>
    </div>
    <div class="gallery-item">
      <img src="https://statics-maker.llt-services.com/leg/images/2024/04/03/original/bcc9b2e6-f9f4-4393-aee3-2b4a76dfd0db-450.jpg" alt="Zonas comunes" class="gallery-img">
      <div class="gallery-caption">Common Areas</div>
    </div>
    <div class="gallery-item">
      <img src="https://statics-maker.llt-services.com/leg/images/2024/04/03/original/3f31fcfb-dab5-43cb-8f0f-3dd31ef305cd-49.jpg" alt="Seguridad 24/7" class="gallery-img">
      <div class="gallery-caption">24/7 Security</div>
    </div>
  </div>
</section>

<style>
  .residence-section {
    width: 100%;
    background: white;
    padding: 80px 20px;
    font-family: sans-serif;
  }

  .residence-header {
    max-width: 960px;
    margin: 0 auto 48px auto;
    text-align: center;
  }

  .residence-title {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 20px;
  }

  @media (min-width: 640px) {
    .residence-title {
      font-size: 2.75rem;
    }
  }

  .residence-description {
    font-size: 1rem;
    color: #374151;
    max-width: 800px;
    margin: 0 auto;
    text-align: justify;
    line-height: 1.7;
  }

  @media (min-width: 640px) {
    .residence-description {
      font-size: 1.125rem;
    }
  }

  .residence-gallery {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
  }

  @media (min-width: 640px) {
    .residence-gallery {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1024px) {
    .residence-gallery {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  }

  .gallery-img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    transition: transform 0.3s ease;
    display: block;
  }

  .gallery-item:hover .gallery-img {
    transform: scale(1.05);
  }

  .gallery-caption {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0));
    color: white;
    padding: 14px;
    text-align: center;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    backdrop-filter: blur(2px);
  }
</style>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Jesús Polo Annex Stadium</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-white text-black font-sans">
  <section class="w-full min-h-[600px] flex flex-col md:flex-row">
    
    <div class="md:w-1/2 w-full h-[400px] md:h-auto">
      <img src="https://statics-maker.llt-services.com/leg/images/2025/04/25/original/4d9bc1fd-0bd5-44f8-9c96-23ebec1c694b-816.jpg" alt="Jesús Polo Annex Stadium" class="w-full h-full object-cover">
    </div>

    
    <div class="md:w-1/2 w-full flex flex-col justify-center px-8 py-12 bg-gradient-to-r from-blue-100 to-sky-100">
      <h2 class="text-3xl md:text-4xl font-bold mb-4">Jesús Polo Annex Stadium - Leganés, Madrid</h2>
      <p class="text-lg text-gray-800 text-justify mb-4">
        The players participating in the 2025 Women's International Draft will train in a top-level environment, designed to maximize athletic performance in every session.
      </p>
      <p class="text-lg text-gray-800 text-justify mb-6">
        This venue offers modern facilities, professional fields, and everything needed for a complete and professional development experience.
      </p>
      <ul class="text-gray-800 text-base space-y-3 pl-4">
        <li class="flex items-start gap-2">
          <span class="mt-1 w-2 h-2 rounded-full bg-sky-400"></span>
          <span>Official training center for the Women's First Team.</span>
        </li>
        <li class="flex items-start gap-2">
          <span class="mt-1 w-2 h-2 rounded-full bg-sky-400"></span>
          <span>Stadium seating capacity for over 2,000 people.</span>
        </li>
        <li class="flex items-start gap-2">
          <span class="mt-1 w-2 h-2 rounded-full bg-sky-400"></span>
          <span>Natural grass full-size football fields.</span>
        </li>
        <li class="flex items-start gap-2">
          <span class="mt-1 w-2 h-2 rounded-full bg-sky-400"></span>
          <span>Medical area with nursing and physiotherapy rooms.</span>
        </li>
        <li class="flex items-start gap-2">
          <span class="mt-1 w-2 h-2 rounded-full bg-sky-400"></span>
          <span>Multipurpose rooms for meetings, video analysis, and recovery sessions.</span>
        </li>
      </ul>

      
      <div class="mt-8 text-center md:text-left">
        <a href="#formulario" class="inline-block bg-gradient-to-r from-sky-400 to-blue-600 text-white font-bold py-4 px-10 text-lg rounded-full hover:scale-105 transition">
          Request Information
        </a>
      </div>
    </div>
  </section>
</body>
</html>

<section class="faq-section">
  <h2 class="faq-title">Frequently Asked Questions</h2>

  <div class="faq-content">
    
    <div class="faq-panel active" id="academia">
      <h3>Players</h3>

      <div class="faq-item">
        <button class="faq-question">What is the International Women's Academy?</button>
        <div class="faq-answer">
          It is a comprehensive training program for players who want to train, compete, and study in Spain, with the possibility of joining the CD Leganés women's team.
        </div>
      </div>

      <div class="faq-item">
        <button class="faq-question">Who can apply?</button>
        <div class="faq-answer">
          Women up to 23 years old with competitive experience, solid technical skills, and strong motivation to grow as footballers and international student-athletes.
        </div>
      </div>

      <div class="faq-item">
        <button class="faq-question">What does the program include?</button>
        <div class="faq-answer">
          Professional training, participation in local leagues, optional residence and meals, optional academic support, official kit, tutoring, and life in Madrid.
        </div>
      </div>

      <div class="faq-item">
        <button class="faq-question">Can I study while training?</button>
        <div class="faq-answer">
          Yes. You can access academic programs compatible with your training schedule, through partnerships with institutions like Universidad Europea de Madrid.
        </div>
      </div>

      <div class="faq-item">
        <button class="faq-question">Can I join the first team?</button>
        <div class="faq-answer">
          Outstanding players may be invited to join the first team or federated teams of CD Leganés, depending on their performance and development.
        </div>
      </div>

      <div class="faq-item">
        <button class="faq-question">Do you offer professional contracts or salaries?</button>
        <div class="faq-answer">
          No. The CD Leganés women’s first team is not professional, and the Academy does not offer contracts or salaries. The goal is to provide high-level training and a complete development structure to prepare players for top-level competition. Being based in Madrid means frequent exposure to scouts and professional clubs.
        </div>
      </div>

      <div class="faq-item">
        <button class="faq-question">How do I apply?</button>
        <div class="faq-answer">
          Fill out the <a href="https://app.360player.com/registration/cdleganesint/056599c2-f149-4db7-b204-177b8e8e7577" target="_blank">Expression of Interest</a> form and you will receive personalized information based on your profile. You can also contact us at <a href="mailto:internationalacademy@cdleganes.com">internationalacademy@cdleganes.com</a>.
        </div>
      </div>

      <h3>Families</h3>

      <div class="faq-item">
        <button class="faq-question">Where do players live?</button>
        <div class="faq-answer">
          In residences that collaborate with the club, offering meals, security, and a shared environment with other international players.
        </div>
      </div>

      <div class="faq-item">
        <button class="faq-question">How is their well-being ensured?</button>
        <div class="faq-answer">
          24/7 support, psychological assistance, and constant communication with families.
        </div>
      </div>

      <div class="faq-item">
        <button class="faq-question">Are scholarships or financial aid available?</button>
        <div class="faq-answer">
          Yes. We assess each profile for potential partial or full scholarships based on talent, personal situation, and performance.
        </div>
      </div>
    </div>
  </div>
</section>

<style>
  .faq-section {
    padding: 60px 20px;
    background: #f9f9fb;
  }

  .faq-title {
    font-size: 28px;
    color: #002c5f;
    text-align: center;
    margin-bottom: 40px;
  }

  .faq-panel {
    display: block;
  }

  .faq-item {
    margin-bottom: 16px;
  }

  .faq-question {
    background: #fff;
    border: 1px solid #ccc;
    padding: 14px 20px;
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    color: #002c5f;
    cursor: pointer;
    text-align: left;
    border-radius: 6px;
    transition: background 0.3s ease;
  }

  .faq-question:hover {
    background-color: #e0f2fe;
  }

  .faq-answer {
    display: none;
    padding: 14px 20px;
    background-color: #fff;
    border-left: 3px solid #0454b4;
    margin-top: 5px;
    border-radius: 0 0 6px 6px;
    font-size: 15px;
    color: #333;
    line-height: 1.6;
  }
</style>

<script>
  document.querySelectorAll('.faq-question').forEach(question => {
    question.addEventListener('click', () => {
      const answer = question.nextElementSibling;
      answer.style.display = answer.style.display === 'block' ? 'none' : 'block';
    });
  });
</script>

International Women's Academy

Join a high-intensity program and compete for a sports scholarship to join the CD Leganés Women’s First Team.  
This summer, feel the pepinero pride and take the leap toward your professional future.