/* Pulido de interfaz: transiciones, jerarquía visual y micro-interacciones.
   Selectores por atributo porque el sitio usa estilos inline en vez de clases;
   así se reutiliza en las 6 páginas sin tocar cada bloque de HTML. */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3 { letter-spacing: -0.01em; }

a {
  transition: color .18s ease, background-color .18s ease, box-shadow .2s ease,
              transform .2s cubic-bezier(.16,1,.3,1), opacity .18s ease;
}
a:active { transform: scale(0.97); }

/* Botones/píldoras (CTAs): sombra permanente teñida de marca (no negra) +
   brillo interior superior, para que lean como pulsables incluso en reposo */
a[style*="linear-gradient(90deg, oklch(0.42 0.19 300)"] {
  box-shadow: 0 6px 16px -6px oklch(0.5 0.2 300 / .45),
              inset 0 1px 0 oklch(1 0 0 / .18);
}
a[style*="border-radius:999px"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -8px oklch(0.5 0.2 300 / .5),
              inset 0 1px 0 oklch(1 0 0 / .18);
}

/* Botón flotante de WhatsApp */
a[href*="wa.me"]:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 10px 24px -8px rgba(0,0,0,.35);
}

/* Tarjetas clicables (Inicio: Conoce el club, Clases y horarios, Galería) */
a[style*="border-radius:20px"]:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -18px rgba(0,0,0,.18);
}

/* Tarjetas informativas y preguntas frecuentes (mismo borde reutilizado en varias páginas) */
div[style*="border:1px solid oklch(0.92 0.01 80)"],
details[style*="border:1px solid oklch(0.92 0.01 80)"] {
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease;
}
div[style*="border:1px solid oklch(0.92 0.01 80)"]:hover,
details[style*="border:1px solid oklch(0.92 0.01 80)"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -18px rgba(0,0,0,.2);
}

/* Fotos: ligero zoom al pasar el ratón */
div[style*="overflow:hidden"] img {
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
div[style*="overflow:hidden"]:hover img {
  transform: scale(1.05);
}

/* Fotos grandes (hero, El club): marco tipo "doble bisel" — un hairline claro
   y un margen del color de fondo antes de la sombra, como si la foto estuviera
   montada en una bandeja, en vez de flotar plana sobre el fondo */
div[style*="aspect-ratio:4/5"],
div[style*="aspect-ratio:1/1"][style*="box-shadow"] {
  box-shadow: 0 0 0 1px oklch(1 0 0 / .7),
              0 0 0 7px oklch(0.985 0.006 80),
              0 24px 48px -20px oklch(0.16 0.02 290 / .35);
}

/* Resplandor ambiental de marca detrás de la primera sección de cada página,
   para dar profundidad a fondos planos sin depender de una imagen */
section:first-of-type { position: relative; overflow: hidden; }
section:first-of-type::before {
  content: "";
  position: absolute;
  top: -15%; right: -10%;
  width: 55%; aspect-ratio: 1;
  background: radial-gradient(circle, oklch(0.62 0.2 300 / .14), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
section:first-of-type > * { position: relative; z-index: 1; }

/* Textura fina de grano sobre toda la página: rompe la planitud digital sin
   afectar al rendimiento (capa fija, no repinta con el scroll) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: .025;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Tipografía: sin palabras huérfanas en titulares ni párrafos */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Subrayado animado en los enlaces del menú (excluye el botón "Clase de prueba") */
header nav a:not([style*="background"]) { position: relative; }
header nav a:not([style*="background"])::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: -4px;
  height: 2px;
  background: currentColor;
  transition: right .25s cubic-bezier(.16,1,.3,1);
}
header nav a:not([style*="background"]):hover::after { right: 0; }

/* Preguntas frecuentes: icono +/× en vez del triángulo por defecto del navegador */
details summary { cursor: pointer; list-style: none; position: relative; padding-right: 28px; }
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: "+";
  position: absolute; right: 0; top: 0;
  transition: transform .25s ease;
  color: oklch(0.5 0.2 300);
  font-weight: 700;
}
details[open] summary::after { transform: rotate(45deg); }

/* Aparición suave de secciones al hacer scroll (mejora progresiva: si el JS
   no carga, .reveal nunca se añade y el contenido queda siempre visible) */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.reveal.in-view { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}