@import url("https://use.typekit.net/kex2fbj.css");
html{
    font-family: "futura-pt", sans-serif;
}


body{
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
    font-size: 18px;
}
:root {
    --bg: #0f172a;
    /* slate-900 */
    --panel: #111827;
    /* gray-900 */
    --front: #0b1220;
    --back: #0b1a2f;
    --text: #e5e7eb;
    /* gray-200 */
    --muted: #94a3b8;
    /* slate-400 */
    --brand: #60a5fa;
    /* blue-400 */
    --accent: #f59e0b;
    /* amber-500 */
    --ring: #93c5fd;
    /* blue-300 */
    --radius: 1.25rem;
    --shadow: 0 10px 25px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .2);
    --transition: transform 600ms cubic-bezier(.2, .8, .2, 1), box-shadow 250ms ease;
  }

  @media (prefers-color-scheme: light) {
    :root {
      --bg: #f8fafc;
      /* slate-50 */
      --panel: #ffffff;
      --front: #ffffff;
      --back: #f8fafc;
      --text: #0f172a;
      /* slate-900 */
      --muted: #475569;
      /* slate-600 */
      --ring: #3b82f6;
      /* blue-500 */
    }
  }

  .wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 48px 0px 80px;
  }

  h1 {
    font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.4rem);
    margin: 0 0 8px;
  }

  p.lead {
    margin: 0 0 28px;
    color: var(--muted);
  }
  .flip-card {
    position: relative;
    perspective: 1200px;
  }

  /* Needed for 3D */

  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 400px;
    border-radius: var(--radius);
    transform-style: preserve-3d;
    transition: var(--transition);
    /* box-shadow: var(--shadow); */
    /* background: linear-gradient(180deg, var(--front), var(--panel)); */
    outline: none;
    /* we draw focus on child */
  }



  /* Removed hover flip - cards only flip on button click */

  /* Programmatic flip via class (for mobile / keyboard) */
  .flip-card.is-flipped .flip-card-inner {
    transform: rotateY(180deg);
  }

  .flip-card-face {
    position: absolute;
    inset: 0;
    padding: 34px;
    border-radius: var(--radius);
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .flip-card-face.front {
    /* background: linear-gradient(180deg, var(--front), var(--panel)); */
    border: 1px solid rgba(255, 255, 255, .06);
  }

  .flip-card-face.back {
    /* background: linear-gradient(180deg, var(--back), var(--panel)); */
    background-color: #DEF3FF;
    border: 1px solid rgba(255, 255, 255, .08);
    transform: rotateY(180deg);
  }

  .title {
    font-weight: 700;
    letter-spacing: .2px;
  }

  .actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  .flip-toggle {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 3;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: .85rem;
    border: 1px solid rgba(148, 163, 184, .35);
    background: rgba(2, 6, 23, .7);
    color: var(--text);
    backdrop-filter: blur(6px);
    cursor: pointer;
  }

  .iswim-clases-parrafo {
    height: 130px;
  }
  /* sm  iswim-clases-parrafo */
  @media (min-width: 375px) {
    .flip-card-inner {
      height: 460px;
    }

    .iswim-clases-parrafo {
      height: 180px;
    }
  }

  /* Hide flip toggle button since we'll use the More Info button */
  .flip-toggle {
    display: none;
  }

  /* Focus styles for accessibility */
  .flip-toggle:focus-visible,
  .btn:focus-visible,
  .flip-card-inner:focus-visible {
    outline: 3px solid var(--ring);
    outline-offset: 3px;
  }

  /* Reduced motion: avoid dramatic flips */
  @media (prefers-reduced-motion: reduce) {
    .flip-card-inner {
      transition: none;
    }

    .flip-card:hover .flip-card-inner,
    .flip-card.is-flipped .flip-card-inner {
      transform: none;
    }

    .flip-card-face.back {
      display: none;
    }

    /* Instead, reveal back content below */
    .flip-card.reduced .back-inline {
      display: block;
      margin-top: 12px;
      color: var(--muted);
    }
  }




h1, h2, h3, h4{
    color: #2A357D;
    font-weight: heavy;
}

p{
 color: #2A357D;
}

li{
    color: #2A357D;
}

nav a{
    color: #4C56A5;
    text-decoration: none;
}

nav a:hover{
    color: #5FAED8;
}

.active{
    color: #5FAED8;
    /* font-weight: bold; */
}

/* Estilos adicionales para elementos activos del menú */
.menu-active-desktop {
    color: #2563eb !important;
    /* border-bottom: 2px solid #2563eb; */
    /* padding-bottom: 4px; */
}

.menu-active-mobile {
    background-color: #dbeafe;
    color: #1d4ed8;
    /* border-left: 4px solid #2563eb; */
}
#hero-home {
  background-image: url("../img/hero_index.png");
  background-position: center;
  background-size: cover;
  background-attachment: fixed; /* Parallax effect */
}

#hero-clases {
  background-image: url("../img/hero_clases.png");
  background-position: center;
  background-size: cover;
  background-attachment: fixed; /* Parallax effect */
}

#hero-beneficios {
  background-image: url("../img/hero_beneficios.png");
  background-position: center;
  background-size: cover;
  background-attachment: fixed; /* Parallax effect */
}

#hero-instalaciones {
  background-image: url("../img/hero_instalaciones.png");
  background-position: center;
  background-size: cover;
  background-attachment: fixed; /* Parallax effect */
}

#hero-nosotros {
  background-image: url("../img/hero_nosotros.png");
  background-position: center;
  background-size: cover;
  background-attachment: fixed; /* Parallax effect */
}

#hero-contacto {
  background-image: url("../img/hero_contacto.png");
  background-position: center;
  background-size: cover;
  background-attachment: fixed; /* Parallax effect */
}

/* regla para dispositivos móviles - max-width para aplicar solo en pantallas pequeñas */
@media (max-width: 768px) {
  #hero-home {
    background-image: url("../img/hero_index_sm.png");
    background-position: center center;
    background-size: auto, cover;
    background-repeat: no-repeat;
    background-attachment: scroll; /* Mejor performance en móviles */
  }

  #hero-clases {
    background-image: url("../img/hero_clases_sm.png");
    background-position: center center;
    background-size: auto, cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
  }

  #hero-beneficios {
    background-image: url("../img/hero_beneficios_sm.png");
    background-position: center center;
    background-size: auto, cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
  }

  #hero-instalaciones {
    background-image: url("../img/hero_instalaciones_sm.png");
    background-position: center center;
    background-size: auto, cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
  }

  #hero-nosotros {
    background-image: url("../img/hero_nosotros_sm.png");
    background-position: center center;
    background-size: auto, cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
  }

  #hero-contacto {
    background-image: url("../img/hero_contacto_sm.png");
    background-position: center center;
    background-size: auto, cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
  }
}

    /* Estilos para acordeón */
  .accordeon-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.8s ease-in-out, padding 0.8s ease-in-out, margin 0.8s ease-in-out;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
  }

  .accordeon-content.open {
    max-height: 500px; /* Altura máxima estimada */
    /* padding-top: 1.25rem; */ /* pt-5 = 20px */
    padding-bottom: 1rem; /* pb-4 = 16px */
    /* margin-top: 1.25rem; */ /* mt-5 = 20px */
  }

  .accordeon-toggle {
    transition: transform 0.3s ease-in-out;
  }

  .accordeon-toggle.rotated {
    transform: rotate(180deg);
  }
  .splide__arrow{
    border: 2px solid #898CC5 !important;
    background: transparent !important;
  }
   .splide__arrow svg{
    background: transparent !important;
    fill: #898CC5 !important;
  }