@charset "UTF-8";
/* ==========================================================================
   PRIME SPORT CENTER — Hoja de estilos principal (DEMO / propuesta de rediseño)
   --------------------------------------------------------------------------
   Autor: demo de propuesta. Stack: HTML5 + CSS3 + JS vanilla (sin build).
   Tipografía: Barlow Condensed (títulos) + Barlow (texto) vía Google Fonts.

   ÍNDICE
   01. Tokens de marca
   02. Reset y base
   03. Tipografía
   04. Layout (container / section)
   05. Animaciones de scroll
   06. Botones
   07. Header y navegación (incl. menú móvil)
   08. Hero
   08b. Secuencia de entrada cinematográfica (Inicio)
   09. Estadísticas (contador animado)
   10. Tarjetas: servicios / planes / equipo
   11. Marquesina de clubes
   12. Testimonios (carrusel)
   13. Formularios
   14. Bloques de contacto
   15. Footer
   16. Botón flotante de WhatsApp
   17. Accesibilidad / reduced motion
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Barlow:wght@400;500;600;700&display=swap');

/* PRUEBA de tipografía para títulos: Heading Now (trial). Local, sin publicar.
   >>> Es versión de prueba: para producción hace falta licencia y, mejor, woff2. */
@font-face {
  font-family: 'Heading Now';
  src: url('../public/fonts/HeadingNowTrial-44Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Heading Now';
  src: url('../public/fonts/HeadingNowTrial-45Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Heading Now';
  src: url('../public/fonts/HeadingNowTrial-46Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Heading Now';
  src: url('../public/fonts/HeadingNowTrial-47Extrabold.ttf') format('truetype');
  font-weight: 800; font-style: normal; font-display: swap;
}

/* ==========================================================================
   01. TOKENS DE MARCA
   El azul #18ACE8 está muestreado del asset original de marca (logo/formas),
   no es una aproximación. Ajusta aquí y se propaga a todo el sitio.
   ========================================================================== */
:root {
  /* --- Azul de marca --- */
  --blue-300: #7FD1F5;
  --blue-400: #4FC0F0;
  --blue-500: #18ACE8;  /* AZUL OFICIAL DE MARCA */
  --blue-600: #0F87BC;
  --blue-700: #0B668F;

  /* --- Negros / grises (evitamos #000 puro: mejor en OLED y menos duro) --- */
  --ink-950: #07080A;   /* fondo de página */
  --ink-900: #0C0E12;   /* secciones alternas */
  --ink-850: #12151A;   /* superficies */
  --ink-800: #191D24;   /* tarjetas */
  --ink-700: #232833;   /* bordes fuertes */
  --ink-600: #333A47;

  --white: #FFFFFF;
  --gray-100: #EEF1F5;
  --gray-300: #C3CAD5;  /* texto secundario sobre oscuro, contraste 9.5:1 */
  --gray-400: #99A2B0;  /* texto terciario, contraste 5.6:1 */
  --gray-500: #6C7480;

  /* --- Roles semánticos --- */
  --bg: var(--ink-950);
  --bg-alt: var(--ink-900);
  --surface: var(--ink-800);
  --surface-raised: var(--ink-850);
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: var(--white);
  --text-muted: var(--gray-300);
  --text-subtle: var(--gray-400);
  --accent: var(--blue-500);
  --accent-hover: var(--blue-400);
  --on-accent: #04212F;      /* texto sobre azul, contraste 8.4:1 */
  --danger: #FF6B6B;
  --success: #4ADE80;

  /* --- Tipografía --- */
  --font-display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  /* Fuente de PRUEBA solo para títulos sin cifras (la trial de Heading Now
     marca los números con marca de agua, por eso no va en botones/datos). */
  --font-head: 'Heading Now', 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Escala fluida: nunca hay que tocar media queries para el tamaño de texto */
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-lg: clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem);
  --fs-xl: clamp(1.25rem, 0.8vw + 1.05rem, 1.5rem);
  --fs-2xl: clamp(1.5rem, 1.6vw + 1.1rem, 2rem);
  --fs-3xl: clamp(1.875rem, 2.6vw + 1.2rem, 2.75rem);
  --fs-4xl: clamp(2.25rem, 4vw + 1.2rem, 3.75rem);
  --fs-hero: clamp(2.7rem, 7.65vw + 0.45rem, 6.05rem);
  --fs-stat: clamp(2.75rem, 4.5vw + 1rem, 4.25rem);

  /* --- Espaciado (ritmo de 4px) --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;

  /* Padding vertical ÚNICO para todas las secciones.
     Clave para el fix de huecos: los huecos enormes del original venían de
     secciones con márgenes descontrolados. Aquí el ritmo sale de esta variable. */
  --section-y: clamp(3.5rem, 7vw, 6.5rem);
  --container: 1200px;
  --container-narrow: 780px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* --- Radios, sombras, transiciones --- */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.55);
  --shadow-accent: 0 12px 32px rgba(24, 172, 232, 0.28);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);  /* Expo.out, sensación deportiva */
  --t-fast: 160ms;
  --t: 240ms;
  --t-slow: 420ms;

  /* --- Escala de z-index (capas declaradas, sin números mágicos) --- */
  --z-base: 1;
  --z-fab: 60;         /* WhatsApp: por DEBAJO del menú móvil, nunca encima */
  --z-backdrop: 80;
  --z-panel: 90;
  --z-header: 100;     /* el header manda: su botón de cerrar siempre clicable */
  --z-skip: 999;
}

/* ==========================================================================
   02. RESET Y BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem; /* compensa el header sticky al saltar a un ancla */
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* red de seguridad contra scroll horizontal en móvil */
}

body.is-locked { overflow: hidden; } /* bloquea scroll con el menú abierto */

img,
picture,
svg,
iframe {
  display: block;
  max-width: 100%;
}
img { height: auto; }

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}
button { cursor: pointer; }

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--t-fast) var(--ease-out);
}
a:hover { color: var(--accent-hover); }

ul, ol { list-style: none; padding: 0; }

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--blue-400);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection {
  background-color: var(--blue-500);
  color: var(--on-accent);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--sp-4);
  z-index: var(--z-skip);
  padding: var(--sp-3) var(--sp-5);
  background-color: var(--blue-500);
  color: var(--on-accent);
  font-weight: 700;
  border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
  transition: top var(--t) var(--ease-out);
}
.skip-link:focus { top: 0; color: var(--on-accent); }

/* ==========================================================================
   03. TIPOGRAFÍA
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}
h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); letter-spacing: 0; }
h4 { font-size: var(--fs-lg); letter-spacing: 0; }

p { text-wrap: pretty; }

/* Etiqueta pequeña. NO se usa como kicker sobre los títulos de sección
   (preferencia del proyecto: cada sección abre directa con su h2). Se reserva
   para etiquetas internas de un componente con función propia. */
.eyebrow {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  color: var(--blue-400);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 4px;
  flex-shrink: 0;
  margin-top: 0.6em;
  background-color: var(--blue-500);
  transform: skewX(-20deg); /* motivo angular de marca */
}

.section-head {
  max-width: 640px;
  margin-bottom: var(--sp-8);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.lead {
  margin-top: var(--sp-4);
  color: var(--text-muted);
  font-size: var(--fs-lg);
  line-height: 1.7;
}

.hl { color: var(--blue-500); } /* resalta una palabra dentro de un título */

/* ==========================================================================
   04. LAYOUT
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

/* TODAS las secciones usan este padding. No añadas márgenes verticales sueltos:
   es justo lo que producía los huecos negros del original. */
.section { padding-block: var(--section-y); }
.section--alt { background-color: var(--bg-alt); }
.section--tight { padding-block: clamp(2.5rem, 4vw, 3.5rem); }

.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.split { display: grid; gap: var(--sp-7); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--sp-9); }
  .split--reverse .split__media { order: 2; }
}
.split__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.split__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.split__media::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 45%; height: 6px;
  background-color: var(--blue-500);
  transform: skewX(-30deg) translateX(-8px);
}
/* Placeholder de foto en los casos de éxito (hasta tener las fotos de cada jugador) */
.split__media--ph {
  aspect-ratio: 4 / 3;
  display: grid; place-items: center; gap: var(--sp-3);
  background-color: var(--ink-850);
  border: 1px dashed var(--border-strong);
  color: var(--text-subtle); text-align: center; padding: var(--sp-6);
}
.split__media--ph svg { width: 48px; height: 48px; opacity: 0.55; }
.split__media--ph span { font-size: var(--fs-sm); letter-spacing: 0.02em; }

/* --- Sección Casos de Éxito en la home: ThreeDMarquee de fondo -------------
   Port del "3D Marquee" de Aceternity a CSS puro: pared de cajitas inclinada
   en 3D (rotateX/rotateZ), con columnas que suben y bajan en bucle. Va de
   fondo atenuado; encima, centrado, el título y el botón. Cada cajita es un
   escudo (placeholder de foto de jugador hasta tener el Drive). */
.casos-home {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: clamp(520px, 68vh, 760px);
  background-color: var(--bg);
}
.casos-home__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0.55;
}
.tdm__scene {
  flex-shrink: 0;
  width: 2000px;
  height: 2000px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 44px;
  transform: scale(0.66) rotateX(55deg) rotateZ(-45deg);
  transform-origin: center;
}
.tdm__col { display: flex; flex-direction: column; gap: 44px; will-change: transform; }
.tdm__col:nth-child(1) { animation: tdmFloatA 6s ease-in-out infinite alternate; }
.tdm__col:nth-child(2) { animation: tdmFloatB 8s ease-in-out infinite alternate; }
.tdm__col:nth-child(3) { animation: tdmFloatA 7s ease-in-out infinite alternate; }
.tdm__col:nth-child(4) { animation: tdmFloatB 9s ease-in-out infinite alternate; }
@keyframes tdmFloatA { from { transform: translate3d(0, -150px, 0); } to { transform: translate3d(0, 150px, 0); } }
@keyframes tdmFloatB { from { transform: translate3d(0, 150px, 0); } to { transform: translate3d(0, -150px, 0); } }
.tdm__tile {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: linear-gradient(160deg, var(--surface-raised), var(--ink-950));
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
}
.tdm__tile img { max-width: 62%; max-height: 62%; width: auto; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5)); }
/* Velo oscuro para que el texto central se lea sobre la pared de cajitas */
.casos-home__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(7, 8, 10, 0.82) 0%, rgba(7, 8, 10, 0.55) 55%, rgba(7, 8, 10, 0.72) 100%);
}
.casos-home__inner {
  position: relative;
  z-index: 2;
  max-width: 640px;
  padding: var(--sp-8) var(--sp-4);
  text-align: center;
}
@media (max-width: 700px) {
  .tdm__scene { transform: scale(0.55) rotateX(55deg) rotateZ(-45deg); }
}

/* Panel de escudo para los bloques split de Casos de Éxito (cuando no hay foto
   personal del jugador): degradado de marca + escudo del club centrado. */
.split__media--crest {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: var(--sp-8);
  border: 1px solid var(--border);
  background:
    radial-gradient(120% 120% at 15% 12%, rgba(24, 172, 232, 0.16), transparent 55%),
    linear-gradient(160deg, var(--ink-850), var(--ink-900));
}
.split__media--crest img {
  width: auto;
  height: auto;
  max-width: 56%;
  max-height: 72%;
  aspect-ratio: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.45));
}
.split__media--crest svg {
  width: 38%;
  height: 38%;
  color: var(--blue-400);
  opacity: 0.9;
}

/* Rejilla flexible para nº impares de tarjetas: la fila incompleta queda
   centrada (con grid auto-fit se estiraría a lo ancho). */
.flex-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-5);
}
.flex-cards > * { flex: 1 1 300px; max-width: 380px; }

/* ==========================================================================
   05. ANIMACIONES DE SCROLL (IntersectionObserver, ver js/main.js)
   Sólo se ocultan si hay JS (clase .js-reveal en <html>): sin JS todo es
   visible desde el principio.
   ========================================================================== */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity var(--t-slow) var(--ease-out),
    transform var(--t-slow) var(--ease-out);
  will-change: opacity, transform;
}
.js-reveal [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}
.js-reveal [data-reveal='left']  { transform: translateX(-28px); }
.js-reveal [data-reveal='right'] { transform: translateX(28px); }
.js-reveal [data-reveal='zoom']  { transform: scale(0.95); }

.js-reveal [data-stagger] > *:nth-child(1) { transition-delay: 0ms; }
.js-reveal [data-stagger] > *:nth-child(2) { transition-delay: 70ms; }
.js-reveal [data-stagger] > *:nth-child(3) { transition-delay: 140ms; }
.js-reveal [data-stagger] > *:nth-child(4) { transition-delay: 210ms; }
.js-reveal [data-stagger] > *:nth-child(5) { transition-delay: 280ms; }
.js-reveal [data-stagger] > *:nth-child(6) { transition-delay: 350ms; }
.js-reveal [data-stagger] > *:nth-child(7) { transition-delay: 420ms; }
.js-reveal [data-stagger] > *:nth-child(n+8) { transition-delay: 490ms; }

/* ==========================================================================
   06. BOTONES
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;              /* objetivo táctil accesible */
  padding: var(--sp-3) var(--sp-6);
  border: 2px solid transparent;
  border-radius: 999px;          /* botones tipo pastilla (redondeados) */
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--t) var(--ease-out),
    border-color var(--t) var(--ease-out),
    color var(--t) var(--ease-out),
    transform var(--t) var(--ease-out),
    box-shadow var(--t) var(--ease-out);
}
.btn:active { transform: translateY(1px) scale(0.985); }

.btn--primary { background-color: var(--blue-500); color: var(--on-accent); }
.btn--primary:hover {
  background-color: var(--blue-400);
  color: var(--on-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent);
}
.btn--ghost {
  border-color: var(--border-strong);
  color: var(--white);
  background-color: rgba(255, 255, 255, 0.04);
}
.btn--ghost:hover {
  border-color: var(--blue-500);
  color: var(--blue-300);
  background-color: rgba(24, 172, 232, 0.1);
  transform: translateY(-2px);
}
.btn--block { width: 100%; }

.btn__icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
  transition: transform var(--t) var(--ease-out);
}
.btn:hover .btn__icon { transform: translateX(3px); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.btn-row--center { justify-content: center; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
.link-arrow svg { width: 16px; height: 16px; transition: transform var(--t) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ==========================================================================
   07. HEADER Y NAVEGACIÓN
   ========================================================================== */
/* Header FLOTANTE: no ocupa todo el ancho ni toca el borde. Es una píldora
   centrada, separada del top, con cristal y esquinas redondeadas. */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  padding-top: clamp(0.75rem, 1.6vw, 1.25rem);
  transition: padding-top var(--t) var(--ease-out);
}

/* La barra en sí es el .header__inner: aquí viven el cristal, el borde y el
   redondeo. Siempre flota; al hacer scroll se vuelve algo más sólida. */
/* La barra en sí es el .header__inner: aquí viven el cristal, el borde y el
   redondeo. Siempre flota; al hacer scroll se vuelve algo más sólida. */
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 60px;
  padding-inline: var(--sp-4) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  background-color: rgba(9, 11, 14, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  /* aísla el header en su propia capa: menos repintado durante el scroll */
  transform: translateZ(0);
  transition:
    background-color var(--t) var(--ease-out),
    border-color var(--t) var(--ease-out),
    box-shadow var(--t) var(--ease-out);
}
@media (min-width: 768px) {
  .header__inner { min-height: 66px; padding-inline: var(--sp-5) var(--sp-4); }
}
/* Al bajar, la píldora gana cuerpo para separarse mejor del contenido. */
.header.is-scrolled .header__inner {
  background-color: rgba(9, 11, 14, 0.85);
  border-color: var(--border-strong);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
}
/* Con el menú móvil abierto, la píldora va sólida para no transparentarse
   sobre el panel. */
.header.is-open .header__inner {
  background-color: var(--ink-950);
  border-color: var(--border-strong);
}

.header__logo { display: block; flex-shrink: 0; line-height: 0; }
.header__logo img {
  width: auto; height: 42px;
  transition: transform var(--t) var(--ease-out);
}
.header__logo:hover img { transform: scale(1.04); }
@media (min-width: 768px) { .header__logo img { height: 50px; } }

.nav { display: none; align-items: center; gap: var(--sp-6); }
@media (min-width: 900px) { .nav { display: flex; } }

.nav__link {
  position: relative;
  padding-block: var(--sp-2);
  color: var(--gray-100);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 3px;
  background-color: var(--blue-500);
  transform: skewX(-20deg) scaleX(0);
  transform-origin: left;
  transition: transform var(--t) var(--ease-out);
}
.nav__link:hover { color: var(--white); }
.nav__link:hover::after { transform: skewX(-20deg) scaleX(1); }
.nav__link[aria-current='page'] { color: var(--blue-400); }
.nav__link[aria-current='page']::after { transform: skewX(-20deg) scaleX(1); }

/* --- Ítem con desplegable (Servicios) --- */
.nav__item { position: relative; display: inline-flex; }
.nav__link--parent { display: inline-flex; align-items: center; gap: 5px; }
.nav__caret {
  width: 13px; height: 13px;
  transition: transform var(--t) var(--ease-out);
}
.nav__item:hover .nav__caret,
.nav__item:focus-within .nav__caret { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  min-width: 320px;
  margin-top: 18px;                 /* separación bajo la píldora flotante */
  padding: var(--sp-2);
  display: grid;
  gap: 2px;
  background-color: rgba(9, 11, 14, 0.92);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(8px);
  transition:
    opacity var(--t) var(--ease-out),
    transform var(--t) var(--ease-out),
    visibility 0s linear var(--t);
}
/* Puente invisible para que el ratón cruce el hueco pílldora-menú sin cerrarlo */
.dropdown::before {
  content: '';
  position: absolute;
  top: -18px; left: 0; right: 0;
  height: 18px;
}
.nav__item:hover .dropdown,
.nav__item:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition:
    opacity var(--t) var(--ease-out),
    transform var(--t) var(--ease-out),
    visibility 0s;
}

.dropdown__link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--radius);
  color: var(--gray-100);
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.dropdown__link:hover { background-color: rgba(255, 255, 255, 0.06); color: var(--white); }
.dropdown__link[aria-current='page'] { color: var(--blue-400); background-color: rgba(24, 172, 232, 0.1); }
.dropdown__link svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--blue-400); }
.dropdown__link span {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.dropdown__all {
  margin-top: 2px;
  padding: var(--sp-3);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  color: var(--blue-400);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
}
.dropdown__all:hover { background-color: rgba(24, 172, 232, 0.1); }

/* --- Submenú móvil (acordeón nativo <details>) --- */
.msub { border-bottom: 1px solid var(--border); }
.msub > summary {
  /* reutiliza el estilo de enlace móvil, sin el marcador nativo */
  border-bottom: 0;
  list-style: none;
  cursor: pointer;
}
.msub > summary::-webkit-details-marker { display: none; }
.msub > summary .msub__caret { transition: transform var(--t) var(--ease-out); }
.msub[open] > summary .msub__caret { transform: rotate(180deg); }
.msub__list {
  display: flex;
  flex-direction: column;
  padding: 0 0 var(--sp-4) var(--sp-4);
  gap: var(--sp-1);
}
.msub__list a {
  display: block;
  padding: var(--sp-2) 0;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
}
.msub__list a:hover,
.msub__list a[aria-current='page'] { color: var(--blue-400); }

.header__cta { display: none; }
@media (min-width: 1024px) {
  /* CTA del header más compacto que un botón normal */
  .header__cta {
    display: inline-flex;
    min-height: 42px;
    padding: var(--sp-2) var(--sp-5);
    font-size: 1.03rem;
    letter-spacing: 0.05em;
  }
}

.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--white);
}
@media (min-width: 900px) { .burger { display: none; } }

.burger__box { position: relative; width: 26px; height: 18px; }
.burger__bar {
  position: absolute;
  left: 0;
  width: 100%; height: 2.5px;
  background-color: currentColor;
  border-radius: 2px;
  transition:
    transform var(--t) var(--ease-out),
    opacity var(--t-fast) var(--ease-out),
    top var(--t) var(--ease-out);
}
.burger__bar:nth-child(1) { top: 0; }
.burger__bar:nth-child(2) { top: 50%; transform: translateY(-50%); }
.burger__bar:nth-child(3) { top: 100%; transform: translateY(-100%); }
.burger[aria-expanded='true'] .burger__bar:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.burger[aria-expanded='true'] .burger__bar:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] .burger__bar:nth-child(3) { top: 50%; transform: translateY(-50%) rotate(-45deg); }

/* Panel móvil por DEBAJO del header (z-panel < z-header): el botón de cerrar y
   el logo quedan siempre accesibles y nada se superpone. */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-panel);
  display: flex;
  flex-direction: column;
  padding: 96px var(--gutter) var(--sp-7);
  background-color: var(--ink-950);
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-12px);
  transition:
    opacity var(--t) var(--ease-out),
    transform var(--t) var(--ease-out),
    visibility 0s linear var(--t);
}
.mobile-nav.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition:
    opacity var(--t) var(--ease-out),
    transform var(--t) var(--ease-out),
    visibility 0s;
}
@media (min-width: 900px) { .mobile-nav { display: none; } }

.mobile-nav__list { display: flex; flex-direction: column; gap: var(--sp-1); }
.mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--border);
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 7vw, 2.25rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0;
  transform: translateX(-16px);
  transition:
    opacity var(--t) var(--ease-out),
    transform var(--t) var(--ease-out),
    color var(--t-fast) var(--ease-out);
}
.mobile-nav.is-open .mobile-nav__link { opacity: 1; transform: none; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(1) .mobile-nav__link { transition-delay: 60ms; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(2) .mobile-nav__link { transition-delay: 110ms; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(3) .mobile-nav__link { transition-delay: 160ms; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(4) .mobile-nav__link { transition-delay: 210ms; }
.mobile-nav__link:hover,
.mobile-nav__link[aria-current='page'] { color: var(--blue-400); }
.mobile-nav__link svg { width: 20px; height: 20px; opacity: 0.45; }

.mobile-nav__footer { margin-top: auto; padding-top: var(--sp-7); }
.mobile-nav__contact {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  color: var(--text-subtle);
  font-size: var(--fs-sm);
}
.mobile-nav__contact a { color: var(--text-muted); text-decoration: none; }
.mobile-nav__contact a:hover { color: var(--blue-400); }

/* ==========================================================================
   08. HERO (páginas internas usan .page-hero)
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  padding-top: 96px;
  padding-bottom: clamp(3rem, 8vh, 6rem);
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg picture { display: block; width: 100%; height: 100%; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--ink-950) 1%, rgba(7, 8, 10, 0.35) 45%, rgba(7, 8, 10, 0.18) 100%),
    linear-gradient(to right, rgba(7, 8, 10, 0.65) 0%, rgba(7, 8, 10, 0.15) 65%, transparent 100%);
}
.hero__inner { position: relative; z-index: var(--z-base); width: 100%; }
.hero__content { max-width: 780px; }
/* Variante home: contenido en el punto medio-bajo, no pegado al fondo */
.hero--mid { align-items: center; }
/* Empuje moderado para que el contenido no quede pegado al fondo pero las
   reseñas de Google se vean desde el principio (antes 22vh dejaba las reseñas
   fuera de pantalla en escritorio y tablet). */
.hero--mid .hero__inner { margin-top: clamp(0.75rem, 3vh, 3rem); }
.hero__title { font-size: var(--fs-hero); line-height: 0.94; letter-spacing: -0.02em; }
.hero__title .hl { display: block; }
.hero__text {
  max-width: none;            /* usa todo el ancho de la columna del hero */
  margin-top: var(--sp-4);
  color: var(--gray-100);
  font-size: clamp(0.85rem, 1.6vw, 1rem); /* escala en anchos medios para caber en 2 líneas */
  line-height: 1.5;
  text-wrap: balance;         /* reparte las 2 líneas de forma pareja */
}
.hero__actions { margin-top: var(--sp-5); }
.hero__actions .btn { min-height: 44px; padding: var(--sp-2) var(--sp-5); font-size: 0.95rem; }
.hero .reviews-badge { margin-top: var(--sp-4); }
/* En móvil, los CTA del hero a ancho completo y apilados (más limpio y mejor táctil) */
@media (max-width: 520px) {
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
}
/* En móvil/tablet vertical, el contenido del hero se alinea arriba y con menos
   empuje, para que las reseñas de Google se vean por encima de la barra del
   navegador (antes el margin-top de 22vh las dejaba fuera de pantalla). */
@media (max-width: 700px) {
  .hero--mid { align-items: flex-start; }
  .hero--mid .hero__inner { margin-top: clamp(1.25rem, 7vh, 4.5rem); }
  .hero { padding-bottom: var(--sp-8); }
}

/* ==========================================================================
   08b. SECUENCIA DE ENTRADA CINEMATOGRÁFICA (sólo en Inicio)
   --------------------------------------------------------------------------
   El alto de .entry ES el recorrido de scroll; el escenario va anclado con
   sticky. El progreso 0 a 1 mueve cuatro cosas:
     1. el campo se acerca a la portería y se apaga
     2. el umbral oscurece al cruzar
     3. el centro aparece por dentro y la cámara se posa
     4. entra el hero

   DEGRADACIÓN: todo cuelga de .js-cine, que sólo se añade si hay JS y el
   usuario NO pide movimiento reducido. Sin esa clase, .entry mide una pantalla,
   el interior y el hero están visibles y la home funciona como hero normal.

   >>> SI SE CAMBIA LA FOTO DEL CAMPO hay que recalcular transform-origin:
       debe apuntar al hueco por el que "se entra" en ESA foto. Ahora apunta a
       la boca de la portería de prime-3.jpg (75% 58%).
   ========================================================================== */
.entry { position: relative; background-color: var(--ink-950); }
.entry__stage {
  position: relative;
  display: flex;
  /* Contenido centrado verticalmente (medio-izquierda), no al fondo */
  align-items: center;
  height: 100svh;
  overflow: hidden;
}
.entry__layer { position: absolute; inset: 0; z-index: 0; }
.entry__layer img { width: 100%; height: 100%; object-fit: cover; }
.entry__layer--pitch { opacity: 0; }   /* estado de respaldo: ya estás dentro */
.entry__layer--inside { opacity: 1; }

.entry__dark {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--ink-950);
  opacity: 0;
  pointer-events: none;
}
/* Velo permanente: garantiza contraste del header y del hero sobre cualquier
   fotograma, incluido el campo a pleno sol. */
.entry__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to top, var(--ink-950) 0%, rgba(7, 8, 10, 0.5) 24%, rgba(7, 8, 10, 0.06) 62%, rgba(7, 8, 10, 0.03) 100%),
    linear-gradient(to bottom, rgba(7, 8, 10, 0.6) 0%, transparent 22%);
}
.entry__fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  height: 30vh;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--ink-950) 88%);
}
.entry__hero {
  position: relative;
  z-index: 4;
  width: 100%;
  /* centrado vertical, desplazado a un término medio entre el centro y el fondo */
  margin-top: clamp(5rem, 24vh, 15rem);
  padding-block: var(--sp-5);
}
.entry__cue {
  position: absolute;
  left: 50%; bottom: var(--sp-5);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  color: var(--gray-300);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
}
.entry__cue-rail {
  position: relative;
  width: 1px; height: 46px;
  background-color: rgba(255, 255, 255, 0.22);
  overflow: hidden;
}
.entry__cue-rail::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--blue-500);
  animation: cue-run 1.9s var(--ease-out) infinite;
}
@keyframes cue-run {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

.js-cine .entry { height: var(--entry-runway, 300vh); }
.js-cine .entry__stage { position: sticky; top: 0; }
.js-cine .entry__layer--pitch {
  opacity: 1;
  transform-origin: 75% 58%; /* boca de la portería en prime-3 */
  will-change: transform, opacity;
}
.js-cine .entry__layer--inside {
  opacity: 0;
  transform: scale(1.3);
  will-change: transform, opacity;
}
.js-cine .entry__hero { opacity: 0; will-change: opacity, transform; }

@media (max-width: 767px) {
  .js-cine .entry { --entry-runway: 240vh; }
  .entry__fade { height: 22vh; }
  /* En vertical, cover recorta la foto 16:9 al centro y la portería (que está a
     la derecha del original) queda fuera de plano: se desplaza el encuadre para
     que entre, y se realinea el origen a donde queda ahora. */
  .entry__layer--pitch img { object-position: 75% center; }
  .js-cine .entry__layer--pitch { transform-origin: 77% 57%; }
}
@media (max-height: 480px) {
  .js-cine .entry { --entry-runway: 200vh; }
  .entry__cue { display: none; }
}

/* --- Hero secundario (páginas internas) --- */
.page-hero {
  position: relative;
  display: flex;
  /* Mismo alto que el hero de la home (viewport completo), pero con el
     contenido alineado arriba, justo debajo del header, no a media altura. */
  align-items: flex-start;
  min-height: 100svh;
  padding-top: calc(66px + clamp(1.75rem, 4vw, 3rem)); /* alto píldora + margen */
  padding-bottom: clamp(3rem, 8vh, 6rem);
  overflow: hidden;
}
.page-hero__bg { position: absolute; inset: 0; z-index: 0; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Overlay más suave: se ve más la foto, pero se mantiene lo justo para que
     el título blanco y las migas sigan legibles. */
  background:
    linear-gradient(to top, var(--ink-950) 0%, rgba(7, 8, 10, 0.32) 48%, rgba(7, 8, 10, 0.12) 100%),
    linear-gradient(to right, rgba(7, 8, 10, 0.62), transparent 68%);
}
.page-hero__inner { position: relative; z-index: var(--z-base); }
.page-hero__text {
  max-width: 60ch;
  margin-top: var(--sp-4);
  color: var(--gray-100);
  font-size: var(--fs-lg);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  color: var(--gray-400);
  font-size: var(--fs-sm);
}
.breadcrumb a { color: var(--gray-300); text-decoration: none; }
.breadcrumb a:hover { color: var(--blue-400); }
.breadcrumb li { display: flex; align-items: center; gap: var(--sp-2); }
.breadcrumb li + li::before { content: '/'; color: var(--ink-600); }
.breadcrumb [aria-current='page'] { color: var(--blue-400); }

/* ==========================================================================
   09. ESTADÍSTICAS, contador animado
   Los valores viven en data-count en el HTML: editar allí, no aquí.
   ========================================================================== */
.stats { position: relative; overflow: hidden; background-color: var(--ink-900); }
.stats__bg { position: absolute; inset: 0; z-index: 0; }
.stats__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.18; }
.stats__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--ink-900) 0%, rgba(12, 14, 18, 0.75) 50%, var(--ink-900) 100%);
}
.stats__inner { position: relative; z-index: var(--z-base); }
.stats__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) var(--sp-4); }
@media (min-width: 768px) { .stats__grid { grid-template-columns: repeat(4, 1fr); } }

.stat { text-align: center; }
@media (min-width: 768px) {
  .stat { text-align: left; padding-left: var(--sp-5); border-left: 2px solid var(--border); }
}
.stat__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  font-weight: 800;
  line-height: 1;
  color: var(--white);
  font-variant-numeric: tabular-nums; /* el ancho no baila al subir el contador */
  font-feature-settings: 'tnum' 1;
}
@media (min-width: 768px) { .stat__value { justify-content: flex-start; } }
.stat__suffix { color: var(--blue-500); }
.stat__label {
  margin-top: var(--sp-2);
  color: var(--text-subtle);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ==========================================================================
   10. TARJETAS
   ========================================================================== */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--sp-6);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    transform var(--t) var(--ease-out),
    border-color var(--t) var(--ease-out),
    background-color var(--t) var(--ease-out),
    box-shadow var(--t) var(--ease-out);
}
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 4px;
  background-color: var(--blue-500);
  transform: skewX(-30deg) scaleX(0);
  transform-origin: left;
  transition: transform var(--t) var(--ease-out);
}
.card:hover {
  transform: translateY(-5px);
  border-color: var(--border-strong);
  background-color: var(--surface-raised);
  box-shadow: var(--shadow-lg);
}
.card:hover::before { transform: skewX(-30deg) scaleX(1.2); }

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  margin-bottom: var(--sp-5);
  background-color: rgba(24, 172, 232, 0.12);
  border: 1px solid rgba(24, 172, 232, 0.25);
  border-radius: var(--radius);
  color: var(--blue-400);
  transition: background-color var(--t) var(--ease-out), color var(--t) var(--ease-out);
}
.card__icon svg { width: 28px; height: 28px; }
.card:hover .card__icon { background-color: var(--blue-500); color: var(--on-accent); }

.card__title { margin-bottom: var(--sp-3); }
.card__text { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.7; }
.card__foot { margin-top: auto; padding-top: var(--sp-5); }

/* --- Tilt 3D (efecto "flotar en el aire", port del 3D card de Aceternity) ---
   El contenedor da la perspectiva; cada tarjeta rota hacia el cursor (rotación
   fijada inline por js/main.js) y sus capas se elevan con translateZ para dar
   profundidad real. Solo se activa en punteros finos con hover (ver JS) y
   respeta prefers-reduced-motion. */
.grid--tilt { perspective: 1200px; }

.card--tilt {
  transform-style: preserve-3d;
  /* vuelta a la posición de reposo: ease-out fuerte, no el débil por defecto */
  transition: transform 260ms cubic-bezier(0.23, 1, 0.32, 1),
              border-color var(--t) var(--ease-out),
              background-color var(--t) var(--ease-out),
              box-shadow var(--t) var(--ease-out);
}
/* Mientras se inclina, el JS gobierna el transform: anulamos el translateY del
   hover normal para que no compitan dos transforms. */
.card--tilt.is-tilting { transition-duration: 0ms; }
.card--tilt.is-tilting:hover { transform: none; } /* lo pone el JS inline */

/* Capas que "flotan". En reposo, translateZ 0; al inclinar, se separan. */
.card--tilt .card__icon,
.card--tilt .card__title,
.card--tilt .card__text {
  transition: transform 260ms cubic-bezier(0.23, 1, 0.32, 1),
              background-color var(--t) var(--ease-out),
              color var(--t) var(--ease-out);
  transform: translateZ(0);
}
.card--tilt.is-tilting .card__icon  { transform: translateZ(65px); }
.card--tilt.is-tilting .card__title { transform: translateZ(45px); }
.card--tilt.is-tilting .card__text  { transform: translateZ(28px); }

@media (prefers-reduced-motion: reduce) {
  .card--tilt, .card--tilt * { transform: none !important; }
}

/* --- 3D Pin (port del "3D Pin" de Aceternity a CSS puro) -------------------
   Cada tarjeta es un enlace. En punteros con hover, la tarjeta se inclina
   hacia atrás (rotateX) y aparece una "chincheta" flotante: píldora con el
   título, línea de luz cian y anillos tipo radar que laten. En táctil queda
   como tarjeta-enlace normal. Respeta prefers-reduced-motion. */
.grid--pin { perspective: 1400px; row-gap: clamp(2.75rem, 5vw, 4.5rem); }

.pin {
  position: relative;
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
  perspective: 1200px;
}

/* La tarjeta visible: mismo lenguaje que .card */
.pin__card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--sp-6);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transform: rotateX(0deg) scale(1);
  transform-origin: center 70%;
  transition:
    transform 700ms var(--ease-out),
    border-color var(--t) var(--ease-out),
    background-color var(--t) var(--ease-out),
    box-shadow var(--t) var(--ease-out);
}
/* Barra de acento superior, como en .card */
.pin__card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 4px;
  background-color: var(--blue-500);
  transform: skewX(-30deg) scaleX(0);
  transform-origin: left;
  transition: transform var(--t) var(--ease-out);
}

/* Decoración de la chincheta: oculta en reposo */
.pin__perspective {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms var(--ease-out);
}
/* Píldora con el título, flotando sobre la tarjeta */
.pin__label {
  position: absolute;
  left: 50%;
  top: -0.9rem;
  transform: translateX(-50%) translateY(8px);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.85rem;
  white-space: nowrap;
  border-radius: 999px;
  background-color: var(--ink-950);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  color: #fff;
  font-family: var(--font-body, inherit);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: transform 500ms var(--ease-out);
}
.pin__label::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background-color: var(--blue-400);
  box-shadow: 0 0 8px 1px rgba(24, 172, 232, 0.8);
}
/* Línea de luz que "clava" la chincheta en la tarjeta */
.pin__line {
  position: absolute;
  left: 50%;
  top: 0.6rem;
  width: 1px;
  height: 0;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, transparent, var(--blue-500));
  box-shadow: 0 0 6px 1px rgba(24, 172, 232, 0.55);
  transition: height 600ms var(--ease-out);
}
/* Anillos tipo radar, tumbados sobre la superficie de la tarjeta */
.pin__glow {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 180px;
  height: 180px;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
}
.pin__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(24, 172, 232, 0.14), transparent 70%);
  transform: translate(-50%, -50%) rotateX(60deg) scale(0.3);
  opacity: 0;
}

/* Estados hover: solo en punteros finos con hover real */
@media (hover: hover) and (pointer: fine) {
  .pin:hover .pin__card {
    transform: rotateX(26deg) scale(0.9);
    border-color: var(--border-strong);
    background-color: var(--surface-raised);
    box-shadow: var(--shadow-lg);
  }
  .pin:hover .pin__card::before { transform: skewX(-30deg) scaleX(1.2); }
  .pin:hover .pin__card .card__icon { background-color: var(--blue-500); color: var(--on-accent); }
  .pin:hover .pin__perspective { opacity: 1; }
  .pin:hover .pin__label { transform: translateX(-50%) translateY(-4px); }
  .pin:hover .pin__line { height: 1.6rem; }
  .pin:hover .pin__ring { animation: pinRadar 5s ease-out infinite; }
  .pin:hover .pin__ring:nth-child(2) { animation-delay: 1.6s; }
  .pin:hover .pin__ring:nth-child(3) { animation-delay: 3.2s; }
}
/* En táctil (iPad, móvil) no hay hover: el efecto se dispara al tocar/mantener
   pulsada la tarjeta, para que la animación también exista en esos dispositivos. */
@media (hover: none) {
  .pin__card { transition: transform 400ms var(--ease-out), border-color var(--t), background-color var(--t); }
  .pin:active .pin__card {
    transform: rotateX(22deg) scale(0.92);
    border-color: var(--border-strong);
    background-color: var(--surface-raised);
    box-shadow: var(--shadow-lg);
  }
  .pin:active .pin__card::before { transform: skewX(-30deg) scaleX(1.2); }
  .pin:active .pin__card .card__icon { background-color: var(--blue-500); color: var(--on-accent); }
  .pin:active .pin__perspective { opacity: 1; }
  .pin:active .pin__label { transform: translateX(-50%) translateY(-4px); }
  .pin:active .pin__line { height: 1.6rem; }
  .pin:active .pin__ring { animation: pinRadar 2.4s ease-out infinite; }
  .pin:active .pin__ring:nth-child(2) { animation-delay: 0.8s; }
  .pin:active .pin__ring:nth-child(3) { animation-delay: 1.6s; }
}
@keyframes pinRadar {
  0%   { transform: translate(-50%, -50%) rotateX(60deg) scale(0.3); opacity: 0; }
  25%  { opacity: 0.7; }
  100% { transform: translate(-50%, -50%) rotateX(60deg) scale(1.5); opacity: 0; }
}
/* Foco por teclado: que también se vea la chincheta y sea clara */
.pin:focus-visible { outline: none; }
.pin:focus-visible .pin__card {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(24, 172, 232, 0.35);
}
@media (prefers-reduced-motion: reduce) {
  .pin__card { transition: border-color var(--t), background-color var(--t); }
  .pin:hover .pin__card { transform: none; }
  .pin__perspective { display: none; }
}

/* --- Bento Grid (port del "Bento Grid" de Aceternity a CSS puro) -----------
   Rejilla asimétrica de servicios: 3 columnas, dos tarjetas anchas (span 2).
   Cada celda tiene arriba una zona de imagen (ahora placeholder de marca; se
   sustituye por <img class="bento__img"> cuando haya fotos) y debajo icono +
   título + texto. Hover sutil: sombra, brillo diagonal y texto que se desplaza.
   Cada tarjeta es un enlace, así que funciona en táctil. */
.bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 768px) {
  .bento {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 17rem;
    gap: var(--sp-5);
  }
  .bento__item--wide { grid-column: span 2; }
}
.bento__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  height: 100%;
  min-height: 15rem;
  padding: var(--sp-4);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
  transition:
    border-color var(--t) var(--ease-out),
    background-color var(--t) var(--ease-out),
    box-shadow var(--t) var(--ease-out);
}
.bento__item:hover {
  border-color: var(--border-strong);
  background-color: var(--surface-raised);
  box-shadow: var(--shadow-lg);
}
.bento__item:focus-visible {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(24, 172, 232, 0.35);
}
/* Zona de imagen: placeholder de marca hasta tener las fotos del Drive */
.bento__media {
  position: relative;
  flex: 1 1 auto;
  min-height: 6rem;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(24, 172, 232, 0.16), transparent 46%),
    linear-gradient(135deg, var(--surface-raised), var(--ink-950));
}
.bento__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.06) 50%, transparent 68%);
  transform: translateX(-100%);
}
.bento__item:hover .bento__media::after { animation: bentoShine 1.1s var(--ease-out); }
@keyframes bentoShine { to { transform: translateX(100%); } }
/* Cuando haya foto real: sustituir el contenido por <img class="bento__img"> */
.bento__media img,
.bento__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bento__body { transition: transform var(--t) var(--ease-out); }
.bento__item:hover .bento__body { transform: translateX(6px); }
.bento__icon {
  display: inline-flex;
  margin-bottom: var(--sp-2);
  color: var(--blue-400);
}
.bento__icon svg { width: 26px; height: 26px; }
.bento__title { margin-bottom: 4px; font-size: var(--fs-md, 1.05rem); }
.bento__text { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.6; }
@media (prefers-reduced-motion: reduce) {
  .bento__item, .bento__body { transition: none; }
  .bento__item:hover .bento__body { transform: none; }
  .bento__media::after { display: none; }
}

/* --- Case cards (Casos de Éxito) ------------------------------------------
   Tarjeta de caso: escudo del club como visual (o icono de escudo neutro si
   no tenemos ese escudo), etiqueta de hito, nombre, contexto y datos. Sin
   fotos personales, para evitar derechos de imagen. Hereda de .card. */
.case-card { height: 100%; }
.case-card__club {
  display: flex;
  align-items: center;
  height: 56px;
  margin-bottom: var(--sp-4);
}
.case-card__club img { height: 52px; width: auto; object-fit: contain; }
.case-card__club svg { width: 44px; height: 44px; color: var(--blue-400); }
.case-card__tag {
  align-self: flex-start;
  display: inline-block;
  margin-bottom: var(--sp-3);
  padding: 3px 11px;
  border-radius: 999px;
  border: 1px solid rgba(24, 172, 232, 0.30);
  background-color: rgba(24, 172, 232, 0.10);
  color: var(--blue-400);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.case-card__name { margin-bottom: 2px; }
.case-card__meta {
  margin-bottom: var(--sp-4);
  color: var(--blue-400);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.case-card__stats {
  list-style: none;
  margin: auto 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.case-card__stats li {
  position: relative;
  padding-left: 18px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.case-card__stats li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 9px;
  height: 2px;
  background-color: var(--blue-500);
}

.card--media { padding: 0; }
.card--media .card__media { position: relative; overflow: hidden; }
.card--media .card__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}
.card--media:hover .card__media img { transform: scale(1.05); }
.card--media .card__body { padding: var(--sp-6); display: flex; flex-direction: column; flex: 1; }

/* --- Tarjetas de PLAN: son 5, con flex-wrap caen 1 / 2 / 3+2 centradas --- */
.plans {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-5);
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 300px;
  max-width: 380px;
  padding: var(--sp-6) var(--sp-5);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition:
    transform var(--t) var(--ease-out),
    border-color var(--t) var(--ease-out),
    box-shadow var(--t) var(--ease-out);
}
.plan:hover {
  transform: translateY(-5px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg);
}
.plan--featured {
  border-color: var(--blue-500);
  background-color: var(--surface-raised);
  box-shadow: var(--shadow-accent);
}
.plan--featured:hover { box-shadow: 0 20px 50px rgba(24, 172, 232, 0.35); }
.plan__badge {
  position: absolute;
  top: -1px; right: var(--sp-5);
  padding: var(--sp-1) var(--sp-3);
  background-color: var(--blue-500);
  color: var(--on-accent);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.plan__name {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}
.plan__for {
  margin-top: var(--sp-2);
  color: var(--blue-400);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.plan__desc { margin-top: var(--sp-4); color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.65; }
.plan__meta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  padding-block: var(--sp-4);
  border-block: 1px solid var(--border);
}
.plan__meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
}
.plan__meta-key { color: var(--text-subtle); letter-spacing: 0.06em; text-transform: uppercase; }
.plan__meta-val { color: var(--white); font-weight: 600; text-align: right; }
.intensity { display: inline-flex; gap: 3px; }
.intensity__bar {
  width: 14px; height: 5px;
  background-color: var(--ink-600);
  border-radius: 1px;
  transform: skewX(-25deg);
}
.intensity__bar.is-on { background-color: var(--blue-500); }
.plan__price {
  margin-top: var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--white);
}
.plan__price span { color: var(--ink-600); }
.plan__price-note {
  display: block;
  margin-top: 2px;
  color: var(--text-subtle);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.plan__features { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-5); }
.plan__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.plan__feature svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 4px; color: var(--blue-500); }
.plan__cta { margin-top: auto; padding-top: var(--sp-6); }

/* --- Preguntas frecuentes (acordeón nativo con <details>) --- */
.faq { display: flex; flex-direction: column; gap: 0; }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__item[open] { border-bottom-color: var(--border-strong); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  color: var(--white);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  list-style: none;
  transition: color var(--t-fast) var(--ease-out);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--blue-400); }
.faq__icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--blue-500); transition: transform var(--t) var(--ease-out); }
.faq__item[open] .faq__icon { transform: rotate(45deg); }
.faq__a { padding-bottom: var(--sp-5); color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.75; max-width: 68ch; }

/* --- FAQ animada (acordeón estilo flareqom.com): chevron que rota, expansión
   suave con el truco grid-rows 0fr->1fr y glow azul en el item abierto. La
   apertura la gobierna js/main.js (initFaqx), un item abierto a la vez. --- */
.faqx { max-width: 860px; margin: var(--sp-8) auto 0; }
.faqx__item {
  border-top: 1px solid var(--border);
  border-radius: var(--radius);
  transition: background var(--t) var(--ease-out), border-color var(--t) var(--ease-out);
}
.faqx__item:last-child { border-bottom: 1px solid var(--border); }
.faqx__item.is-open {
  border-color: var(--border-strong);
  background: radial-gradient(130% 120% at 0% 0%, rgba(24, 172, 232, 0.10), transparent 58%);
}
.faqx__q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-4);
  background: none;
  border: none;
  color: var(--white);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: left;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease-out);
}
.faqx__q:hover { color: var(--blue-400); }
.faqx__chevron {
  width: 20px; height: 20px;
  flex-shrink: 0;
  color: var(--blue-500);
  transition: transform var(--t) var(--ease-out);
}
.faqx__item.is-open .faqx__chevron { transform: rotate(90deg); }
.faqx__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-slow) var(--ease-out);
}
.faqx__item.is-open .faqx__panel { grid-template-rows: 1fr; }
.faqx__a {
  overflow: hidden;
  min-height: 0;
  padding: 0 var(--sp-4) 0 calc(20px + var(--sp-4) * 2);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.75;
}
.faqx__item.is-open .faqx__a { padding-bottom: var(--sp-5); }
@media (prefers-reduced-motion: reduce) {
  .faqx__panel { transition: none; }
  .faqx__chevron { transition: none; }
}

/* --- Tarjetas de EQUIPO --- */
.team-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    transform var(--t) var(--ease-out),
    border-color var(--t) var(--ease-out),
    box-shadow var(--t) var(--ease-out);
}
.team-card:hover { transform: translateY(-5px); border-color: var(--blue-500); box-shadow: var(--shadow-lg); }
.team-card__media { position: relative; overflow: hidden; background-color: var(--ink-850); }
.team-card__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(0.9);
  transition: transform var(--t-slow) var(--ease-out), filter var(--t-slow) var(--ease-out);
}
.team-card:hover .team-card__media img { transform: scale(1.05); filter: saturate(1.1); }
.team-card__media::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(to top, var(--surface), transparent);
  pointer-events: none;
}
.team-card__body { position: relative; z-index: var(--z-base); margin-top: -28px; padding: 0 var(--sp-5) var(--sp-6); }
.team-card__role { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 800; line-height: 1.05; text-transform: uppercase; }
.team-card__area {
  display: inline-block;
  margin-top: var(--sp-2);
  color: var(--blue-400);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.team-card__bio { margin-top: var(--sp-3); color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.65; }

/* Aviso de contenido de ejemplo (visible sólo en la demo) */
.demo-note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background-color: rgba(24, 172, 232, 0.07);
  border: 1px dashed rgba(24, 172, 232, 0.4);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.demo-note svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: var(--blue-400); }
.demo-note strong { color: var(--white); }

/* --- Lista de pasos (metodología) --- */
.steps { display: grid; gap: var(--sp-5); counter-reset: step; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } }
.step {
  position: relative;
  padding-top: var(--sp-6);
  border-top: 2px solid var(--border);
  counter-increment: step;
  transition: border-color var(--t) var(--ease-out);
}
.step:hover { border-top-color: var(--blue-500); }
.step::before {
  content: '0' counter(step);
  position: absolute;
  top: var(--sp-4); right: 0;
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 800;
  line-height: 1;
  color: var(--ink-800);
  transition: color var(--t) var(--ease-out);
}
.step:hover::before { color: rgba(24, 172, 232, 0.3); }
.step__title { margin-bottom: var(--sp-3); }
.step__text { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.7; }

/* --- Sticky Scroll Reveal (port del componente de Aceternity) ---
   La lista de la izquierda scrollea; a la derecha, un panel fijo (sticky) que
   cambia de imagen según qué punto de la lista esté activo. En móvil el panel
   se oculta y cada punto muestra su propia imagen en línea. */
.sticky-scroll { display: grid; gap: var(--sp-6); }
@media (min-width: 900px) {
  .sticky-scroll {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-9);
    align-items: start;
  }
}

.ss__list { display: flex; flex-direction: column; }
.ss__item { padding-block: var(--sp-6); }
.ss__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.ss__desc {
  margin-top: var(--sp-3);
  color: var(--text-muted);
  font-size: var(--fs-base);
  line-height: 1.7;
  max-width: 46ch;
}
/* Imagen en línea: solo en móvil (en escritorio manda el panel sticky) */
.ss__media {
  margin-top: var(--sp-5);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}
.ss__media img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; }

.ss__visual { display: none; }

@media (min-width: 900px) {
  .ss__media { display: none; }             /* en escritorio, la imagen va en el panel */
  .ss__col { min-width: 0; align-self: start; }
  /* El título "Qué incluye" se queda FIJO arriba mientras los puntos pasan por
     debajo. Fondo sólido = los puntos desaparecen limpiamente tras él. */
  .ss__head {
    position: sticky;
    top: 100px;
    z-index: 2;
    margin-bottom: var(--sp-5);
    padding-bottom: var(--sp-4);
    background-color: var(--bg-alt);
  }
  .ss__head h2 { margin: 0; }
  /* Recorrido entre puntos: ajustado para que no queden pantallas casi vacías */
  .ss__item { padding-block: clamp(2.5rem, 13vh, 6rem); }
  .ss__item:first-child { padding-top: 0; }
  .ss__item:last-child { padding-bottom: var(--sp-8); }

  /* Atenúa los puntos inactivos para dar foco al activo */
  .ss__item .ss__title,
  .ss__item .ss__desc {
    opacity: 0.32;
    transition: opacity var(--t-slow) var(--ease-out);
  }
  .ss__item.is-active .ss__title { opacity: 1; }
  .ss__item.is-active .ss__desc { opacity: 0.85; }

  .ss__visual {
    display: block;
    position: sticky;
    top: 100px;                 /* bajo la píldora flotante */
    height: 24rem;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    background-color: var(--ink-850);
  }
  .ss__panel {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
  }
  .ss__panel.is-active { opacity: 1; transform: scale(1); }
  .ss__panel img { width: 100%; height: 100%; object-fit: cover; }
  /* Barra angular de marca sobre el panel */
  .ss__panel::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 42%; height: 6px;
    background-color: var(--blue-500);
    transform: skewX(-30deg) translateX(-8px);
  }
}

/* Movimiento reducido: sin atenuar ni escalar, todo visible */
@media (prefers-reduced-motion: reduce) {
  .ss__item .ss__title,
  .ss__item .ss__desc { opacity: 1 !important; }
  .ss__panel { transition: none; }
}

/* Variante con panel VERTICAL (fotos de cuerpo entero, p. ej. readaptación) */
.sticky-scroll--tall .ss__media img { aspect-ratio: 3 / 4; }
@media (min-width: 900px) {
  .sticky-scroll--tall .ss__visual {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    max-width: 440px;
    margin-inline: auto;
  }
}

/* ==========================================================================
   11. MARQUESINA DE CLUBES
   ========================================================================== */
.marquee {
  position: relative;
  overflow: hidden;
}
/* Degradados en los bordes con pseudo-elementos (más barato que mask-image,
   que obliga a rebufferizar el contenido en movimiento en cada frame). */
.marquee::before,
.marquee::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(40px, 8%, 120px);
  z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.marquee::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); }
.marquee__track {
  display: flex;
  width: max-content;
  gap: clamp(2rem, 4vw, 3.5rem);
  animation: marquee 55s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* -50%: el listado se duplica en el HTML */
}
.marquee__item { display: flex; align-items: center; flex-shrink: 0; }
.marquee__item img {
  width: auto;
  /* TODOS los escudos al mismo tamaño (lienzo cuadrado uniforme) */
  height: clamp(64px, 8vw, 84px);
  object-fit: contain;
  opacity: 1;
  transition: transform var(--t) var(--ease-out);
}
.marquee__item:hover img { transform: scale(1.08); }

/* ==========================================================================
   12. TESTIMONIOS (carrusel)
   ========================================================================== */
.carousel { position: relative; }
.carousel__viewport { overflow: hidden; border-radius: var(--radius-lg); }
.carousel__track { display: flex; transition: transform var(--t-slow) var(--ease-out); }
.carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
  padding: clamp(1.75rem, 4vw, 3rem);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.quote {
  position: relative;
  color: var(--gray-100);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}
.quote::before {
  content: '';
  display: block;
  width: 42px; height: 5px;
  margin-bottom: var(--sp-5);
  background-color: var(--blue-500);
  transform: skewX(-25deg);
}
.quote__author { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-6); }
.quote__avatar {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  flex-shrink: 0;
  background-color: rgba(24, 172, 232, 0.14);
  border: 1px solid rgba(24, 172, 232, 0.3);
  border-radius: 50%;
  color: var(--blue-400);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
}
.quote__name { color: var(--white); font-weight: 600; font-size: var(--fs-sm); }
.quote__meta { color: var(--text-subtle); font-size: var(--fs-xs); }

.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}
.carousel__btn {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  background-color: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--white);
  transition: background-color var(--t) var(--ease-out), border-color var(--t) var(--ease-out), color var(--t) var(--ease-out);
}
.carousel__btn:hover { background-color: var(--blue-500); border-color: var(--blue-500); color: var(--on-accent); }
.carousel__btn svg { width: 20px; height: 20px; }
.carousel__nav { display: flex; gap: var(--sp-3); }
.carousel__dots { display: flex; gap: var(--sp-2); }
.carousel__dot {
  width: 28px; height: 5px;
  padding: 0;
  background-color: var(--ink-700);
  border: 0;
  border-radius: 2px;
  transform: skewX(-25deg);
  transition: background-color var(--t) var(--ease-out), width var(--t) var(--ease-out);
}
.carousel__dot:hover { background-color: var(--ink-600); }
.carousel__dot[aria-selected='true'] { width: 44px; background-color: var(--blue-500); }

/* ==========================================================================
   12a. SEDES (página Sedes: bloque de sede + carrusel de fotos)
   ========================================================================== */
.sedes { display: flex; flex-direction: column; gap: clamp(3.5rem, 9vw, 6.5rem); }
.sede { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 900px) {
  .sede { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(2rem, 4vw, 4.5rem); }
  /* En filas pares la foto va a la izquierda; invertimos las columnas para que
     la foto caiga SIEMPRE en la columna ancha (mismo tamaño en todas las sedes). */
  .sede:nth-child(even) { grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); }
  .sede:nth-child(even) .sede__media { order: -1; }
}
.sede__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.sede__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.sede__chip svg { width: 14px; height: 14px; }
.sede__chip--city { background-color: var(--surface); border: 1px solid var(--border); color: var(--text-muted); }
.sede__chip--sala { background-color: rgba(24, 172, 232, 0.12); border: 1px solid rgba(24, 172, 232, 0.35); color: var(--blue-300); }
.sede__chip--campo { background-color: rgba(52, 211, 153, 0.12); border: 1px solid rgba(52, 211, 153, 0.4); color: #6ee7b7; }
.sede__name {
  font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 800;
  line-height: 1.02; text-transform: uppercase; letter-spacing: -0.01em;
}
.sede__loc {
  display: inline-flex; align-items: flex-start; gap: 8px;
  margin-top: var(--sp-4); color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.5;
  transition: color var(--t) var(--ease-out);
}
.sede__loc svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--blue-400); }
.sede__loc:hover { color: var(--blue-400); }
.sede__desc { margin-top: var(--sp-5); color: var(--text-muted); line-height: 1.7; }

/* Carrusel en variante fotos: los slides pierden la tarjeta del de citas */
.carousel--photos .carousel__slide { padding: 0; border: 0; background-color: transparent; border-radius: 0; }
.sede-photo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background-color: var(--ink-850); }
.sede-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sede-photo--ph {
  display: grid; place-items: center; gap: var(--sp-3);
  border: 1px dashed var(--border-strong); color: var(--text-subtle);
  text-align: center; padding: var(--sp-6);
}
.sede-photo--ph svg { width: 42px; height: 42px; opacity: 0.55; }
.sede-photo--ph span { font-size: var(--fs-sm); letter-spacing: 0.02em; }

/* Selector de sede en la página de contacto (mapa + botones que cambian) */
.sede-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.sede-tab {
  padding: 8px 16px; border-radius: 999px;
  background-color: var(--surface); border: 1px solid var(--border);
  color: var(--text-muted); font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer;
  transition: background-color var(--t) var(--ease-out), border-color var(--t) var(--ease-out), color var(--t) var(--ease-out);
}
.sede-tab:hover { border-color: var(--border-strong); color: var(--white); }
.sede-tab[aria-selected='true'] { background-color: var(--blue-500); border-color: var(--blue-500); color: var(--on-accent); }

/* ==========================================================================
   12b. RESEÑAS EN MARQUESINA (dos filas, sentidos opuestos, pausa al hover)
   Port del "infinite moving cards" de Aceternity, en CSS puro.
   ========================================================================== */
.reviews-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding: var(--sp-2) var(--sp-4);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.reviews-badge__score {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
}
.reviews-badge__stars { display: inline-flex; gap: 2px; color: #FFC83D; }
.reviews-badge__stars svg { width: 18px; height: 18px; }
.reviews-badge__meta { color: var(--text-subtle); font-size: var(--fs-sm); }
.reviews-badge__g { width: 20px; height: 20px; flex-shrink: 0; }
/* Variante para el hero: prueba social bajo los botones, enlazable a Google */
.reviews-badge--hero {
  text-decoration: none;
  transition: border-color var(--t) var(--ease-out), background-color var(--t) var(--ease-out);
}
.reviews-badge--hero:hover { border-color: var(--border-strong); background-color: var(--surface-raised); }
.reviews-badge--hero .reviews-badge__score { font-size: 1.15rem; }
.reviews-badge--hero .reviews-badge__stars svg { width: 16px; height: 16px; }

.reviews {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  margin-top: var(--sp-8);
}
.review-row {
  position: relative;
  overflow: hidden;
}
/* Degradados en los bordes con pseudo-elementos (más barato que mask-image) */
.review-row::before,
.review-row::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(32px, 6%, 100px);
  z-index: 2;
  pointer-events: none;
}
.review-row::before { left: 0; background: linear-gradient(to right, var(--bg-alt), transparent); }
.review-row::after { right: 0; background: linear-gradient(to left, var(--bg-alt), transparent); }
.review-track {
  display: flex;
  width: max-content;
  gap: var(--sp-5);
  will-change: transform;
  backface-visibility: hidden;
}
/* Fila superior: se desplaza hacia la DERECHA. Inferior: hacia la IZQUIERDA. */
.review-track--right { animation: review-right 45s linear infinite; }
.review-track--left  { animation: review-left 40s linear infinite; }
/* Se para al pasar el cursor o al enfocar con teclado (solo esa fila) */
.review-row:hover .review-track,
.review-row:focus-within .review-track { animation-play-state: paused; }

@keyframes review-left  { from { transform: translateX(0); }     to { transform: translateX(-50%); } }
@keyframes review-right { from { transform: translateX(-50%); }  to { transform: translateX(0); } }

.review-card {
  flex: 0 0 auto;
  width: min(84vw, 380px);
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color var(--t) var(--ease-out), transform var(--t) var(--ease-out);
}
.review-card:hover { border-color: var(--border-strong); transform: translateY(-4px); }
.review-card__stars { display: inline-flex; gap: 2px; margin-bottom: var(--sp-4); color: #FFC83D; }
.review-card__stars svg { width: 18px; height: 18px; }
.review-card__text {
  color: var(--gray-100);
  font-size: var(--fs-sm);
  line-height: 1.7;
  /* Recorta reseñas muy largas a 5 líneas para que las tarjetas casen */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review-card__author {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.review-card__avatar {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  flex-shrink: 0;
  background-color: rgba(24, 172, 232, 0.14);
  border: 1px solid rgba(24, 172, 232, 0.3);
  border-radius: 50%;
  color: var(--blue-400);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
}
.review-card__name { color: var(--white); font-weight: 600; font-size: var(--fs-sm); }
.review-card__meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-subtle);
  font-size: var(--fs-xs);
}
.review-card__meta svg { width: 13px; height: 13px; }

/* En móvil las tarjetas de reseña más pequeñas (antes ocupaban casi toda la
   pantalla) y con un poco menos de texto para que no queden tan altas. */
@media (max-width: 700px) {
  .review-card { width: min(72vw, 285px); padding: var(--sp-5); }
  .review-card__text { -webkit-line-clamp: 4; }
  .review-card__stars svg { width: 16px; height: 16px; }
  /* Tarjetas de equipo: no ocupar toda la pantalla en móvil */
  .team-card { width: 100%; max-width: 300px; margin-inline: auto; }
}

/* ==========================================================================
   13. FORMULARIOS
   ========================================================================== */
.form { display: grid; gap: var(--sp-5); }
.form__row { display: grid; gap: var(--sp-5); }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }

.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field__label { color: var(--gray-100); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.02em; }
.field__label .req { color: var(--blue-400); margin-left: 2px; }

.field__input,
.field__select,
.field__textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--ink-900);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--white);
  font-size: 1rem; /* 16px: evita el zoom automático en iOS */
  transition: border-color var(--t) var(--ease-out), background-color var(--t) var(--ease-out);
}
.field__textarea { min-height: 132px; resize: vertical; }
.field__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2399A2B0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  background-size: 18px;
  padding-right: var(--sp-8);
}
.field__select option { background-color: var(--ink-900); color: var(--white); }
.field__input::placeholder,
.field__textarea::placeholder { color: var(--gray-500); }
.field__input:focus,
.field__select:focus,
.field__textarea:focus { border-color: var(--blue-500); background-color: var(--ink-850); }
.field__help { color: var(--text-subtle); font-size: var(--fs-xs); }
.field__error { display: none; align-items: center; gap: var(--sp-2); color: var(--danger); font-size: var(--fs-xs); font-weight: 500; }
.field__error svg { width: 14px; height: 14px; flex-shrink: 0; }
.field.has-error .field__error { display: flex; }
.field.has-error .field__input,
.field.has-error .field__select,
.field.has-error .field__textarea { border-color: var(--danger); }

.field--check { flex-direction: row; align-items: flex-start; gap: var(--sp-3); }
.field--check input[type='checkbox'] {
  width: 20px; height: 20px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--blue-500);
  cursor: pointer;
}
.field--check label { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.5; }

.form__status {
  display: none;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.form__status.is-visible { display: flex; }
.form__status--ok {
  background-color: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.35);
  color: #C9F5D9;
}
.form__status svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
/* Estado de error de envío (cuando el servicio de formulario falla) */
.form__status--error {
  background-color: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.40);
  color: #FFC9C9;
}
.form__status--error svg { display: none; }

.btn.is-loading { pointer-events: none; opacity: 0.75; }
.btn.is-loading .btn__label { opacity: 0.6; }
.spinner {
  display: none;
  width: 16px; height: 16px;
  border: 2px solid rgba(4, 33, 47, 0.3);
  border-top-color: var(--on-accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.btn.is-loading .spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   14. BLOQUES DE CONTACTO (visibles arriba, no sólo al final)
   ========================================================================== */
.contact-quick {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.contact-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: transform var(--t) var(--ease-out), border-color var(--t) var(--ease-out), background-color var(--t) var(--ease-out);
}
a.contact-card:hover { transform: translateY(-4px); border-color: var(--blue-500); background-color: var(--surface-raised); }
.contact-card__icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  background-color: rgba(24, 172, 232, 0.12);
  border-radius: var(--radius-sm);
  color: var(--blue-400);
}
.contact-card__icon svg { width: 22px; height: 22px; }
.contact-card__label { color: var(--text-subtle); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.contact-card__value {
  color: var(--white);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.contact-card__note { color: var(--text-subtle); font-size: var(--fs-xs); }

.map {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--ink-850);
}
.map iframe {
  width: 100%;
  height: clamp(300px, 45vh, 440px);
  border: 0;
  filter: grayscale(0.6) invert(0.92) hue-rotate(180deg) contrast(0.85);
}
/* Consentimiento: el mapa (Google) no carga hasta que se pulsa */
.map__consent {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-6);
  text-align: center;
  background-color: var(--surface);
}
.map__consent svg { width: 38px; height: 38px; color: var(--blue-400); }
.map__consent p { max-width: 34ch; margin: 0; color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.6; }
.map__consent[hidden] { display: none; }

/* Layout de la página de contacto. Orden del DOM = cuestionario, mapa, WhatsApp
   (así en móvil el formulario va primero y el mapa después). En escritorio se
   recoloca con grid-areas: el formulario a la izquierda y, a la derecha, el mapa
   arriba y el bloque de WhatsApp debajo. */
.contact-layout { display: flex; flex-direction: column; gap: var(--sp-8); }
@media (min-width: 900px) {
  .contact-layout {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-areas:
      "form map"
      "form wa";
    column-gap: var(--sp-9);
    row-gap: var(--sp-8);
    align-items: start;
  }
  .contact-layout__form { grid-area: form; }
  .contact-layout__map { grid-area: map; }
  .contact-layout__wa { grid-area: wa; }
}

.cta-band { position: relative; overflow: hidden; background-color: var(--ink-900); }
.cta-band__bg { position: absolute; inset: 0; z-index: 0; }
.cta-band__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.28; }
.cta-band__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, var(--ink-950) 15%, rgba(7, 8, 10, 0.6) 60%, rgba(24, 172, 232, 0.18) 100%);
}
.cta-band__inner { position: relative; z-index: var(--z-base); text-align: center; }
.cta-band__title { font-size: var(--fs-4xl); }
.cta-band__text { max-width: 54ch; margin: var(--sp-4) auto 0; color: var(--gray-100); font-size: var(--fs-lg); }
.cta-band .btn-row { justify-content: center; margin-top: var(--sp-7); }

/* ==========================================================================
   15. FOOTER
   ========================================================================== */
.footer { padding-top: var(--sp-9); background-color: var(--ink-950); border-top: 1px solid var(--border); }
.footer__grid { display: grid; gap: var(--sp-7); }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr; gap: var(--sp-6); } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr 1.2fr; } }
.footer__logo img { height: 56px; width: auto; }
.footer__about { max-width: 38ch; margin-top: var(--sp-4); color: var(--text-subtle); font-size: var(--fs-sm); line-height: 1.7; }
.footer__title {
  margin-bottom: var(--sp-4);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.footer__list { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer__list a,
.footer__list span { color: var(--text-subtle); font-size: var(--fs-sm); text-decoration: none; transition: color var(--t-fast) var(--ease-out); }
.footer__list a:hover { color: var(--blue-400); }
.footer__socials { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }
.footer__social {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--gray-300);
  transition: background-color var(--t) var(--ease-out), color var(--t) var(--ease-out), transform var(--t) var(--ease-out);
}
.footer__social:hover { background-color: var(--blue-500); color: var(--on-accent); transform: translateY(-3px); }
.footer__social svg { width: 20px; height: 20px; }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
  padding-block: var(--sp-5);
  border-top: 1px solid var(--border);
  color: var(--gray-500);
  font-size: var(--fs-xs);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.footer__legal a { color: var(--gray-500); text-decoration: none; }
.footer__legal a:hover { color: var(--gray-300); }

/* ==========================================================================
   16. BOTÓN FLOTANTE DE WHATSAPP
   z-index por debajo del menú móvil: nunca se superpone al panel abierto.
   ========================================================================== */
.wa-fab {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: var(--z-fab);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: 56px;
  padding-inline: var(--sp-4);
  background-color: #25D366;
  border-radius: 28px;
  color: #06301A;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out), opacity var(--t) var(--ease-out);
}
.wa-fab:hover { color: #06301A; transform: scale(1.05); box-shadow: 0 12px 32px rgba(37, 211, 102, 0.5); }
.wa-fab:active { transform: scale(0.98); }
.wa-fab svg { width: 28px; height: 28px; flex-shrink: 0; }
.wa-fab__label { display: none; }
@media (min-width: 640px) { .wa-fab__label { display: block; } }
@media (max-width: 639px) { .wa-fab { width: 56px; padding-inline: 0; justify-content: center; } }

/* Se esconde con el menú móvil abierto y durante la secuencia de entrada:
   no debe flotar sobre el panel ni sobre la escena cinematográfica. */
body.is-locked .wa-fab,
.wa-fab.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(0.9);
}

/* ==========================================================================
   17. ACCESIBILIDAD, movimiento reducido
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js-reveal [data-reveal] { opacity: 1 !important; transform: none !important; }
  /* Excepción: la marquesina de escudos y el fondo 3D de Casos son animaciones
     decorativas de marca (suaves, sin destellos ni parallax). Se mantienen en
     marcha aunque el dispositivo pida movimiento reducido, ya que el negocio las
     quiere siempre visibles. El resto de animaciones sí se desactivan. */
  .marquee__track {
    animation: marquee 55s linear infinite !important;
    animation-duration: 55s !important;
    animation-iteration-count: infinite !important;
  }
  .tdm__col:nth-child(1) { animation: tdmFloatA 6s ease-in-out infinite alternate !important; animation-duration: 6s !important; animation-iteration-count: infinite !important; }
  .tdm__col:nth-child(2) { animation: tdmFloatB 8s ease-in-out infinite alternate !important; animation-duration: 8s !important; animation-iteration-count: infinite !important; }
  .tdm__col:nth-child(3) { animation: tdmFloatA 7s ease-in-out infinite alternate !important; animation-duration: 7s !important; animation-iteration-count: infinite !important; }
  .tdm__col:nth-child(4) { animation: tdmFloatB 9s ease-in-out infinite alternate !important; animation-duration: 9s !important; animation-iteration-count: infinite !important; }
  .review-track--right { animation: review-right 45s linear infinite !important; animation-duration: 45s !important; animation-iteration-count: infinite !important; }
  .review-track--left { animation: review-left 40s linear infinite !important; animation-duration: 40s !important; animation-iteration-count: infinite !important; }
}

@media print {
  .header, .mobile-nav, .wa-fab, .carousel__controls { display: none !important; }
  body { background: #fff; color: #000; }
  .hero, .page-hero, .entry__stage { min-height: auto; padding-top: var(--sp-6); }
}

/* ==========================================================================
   PRUEBA Heading Now (trial): se aplica SOLO a títulos sin cifras. Todo lo que
   puede llevar números (botones, teléfonos, direcciones, precios, contadores,
   nav) se queda en Barlow para evitar la marca de agua del trial.
   Al pasar a la fuente con licencia, bastará con poner --font-head en los
   títulos o cambiar --font-display globalmente.
   ========================================================================== */
h1, h2, h3, h4,
.hero__title,
.section-head h2,
.plan__name,
.team-card__role,
.ss__title,
.ss__head h2,
.card__title,
.step__title,
.footer__title,
.quote {
  font-family: var(--font-head);
}
/* Excepciones dentro de títulos que sí pueden contener cifras: vuelven a Barlow */
.stat__value,
.step::before,
.reviews-badge__score,
.plan__price {
  font-family: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
}

/* ==========================================================================
   PÁGINAS LEGALES (aviso legal, privacidad, cookies)
   ========================================================================== */
/* Cabecera sobria para páginas legales (sin hero de imagen) */
.legal-head {
  padding-top: calc(66px + clamp(2rem, 5vw, 3.5rem));
  padding-bottom: clamp(1.25rem, 3vw, 2rem);
  border-bottom: 1px solid var(--border);
}
.legal-head h1 { margin-top: var(--sp-4); font-size: var(--fs-3xl); line-height: 1.05; }
.legal-head + .section { padding-top: clamp(2rem, 5vw, 3.5rem); }

.legal { max-width: 780px; }
.legal__updated { margin-bottom: var(--sp-6); color: var(--text-subtle); font-size: var(--fs-sm); }
.legal h2 { font-size: var(--fs-2xl); margin-top: var(--sp-8); margin-bottom: var(--sp-3); }
.legal h3 { font-size: var(--fs-lg); margin-top: var(--sp-6); margin-bottom: var(--sp-2); }
.legal p { color: var(--text-muted); line-height: 1.85; margin-bottom: var(--sp-4); }
.legal ul { list-style: disc; padding-left: 1.35rem; display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.legal li { color: var(--text-muted); line-height: 1.7; }
.legal a { color: var(--blue-400); overflow-wrap: anywhere; }
.legal strong { color: var(--white); }
.legal__ph { color: var(--blue-300); background: rgba(24,172,232,0.1); padding: 0 4px; border-radius: 4px; }
.legal-table { width: 100%; border-collapse: collapse; margin-bottom: var(--sp-5); font-size: var(--fs-sm); }
.legal-table th, .legal-table td { text-align: left; padding: var(--sp-3); border-bottom: 1px solid var(--border); vertical-align: top; }
.legal-table th { color: var(--white); font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--fs-xs); }
.legal-table td { color: var(--text-muted); }

/* Barra de horario (una línea, borde azul) */
.hours-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--blue-500);
  border-radius: var(--radius);
  background-color: rgba(24, 172, 232, 0.07);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.hours-bar svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--blue-400); }
.hours-bar strong { color: var(--white); }

/* Instagram (marcador; el widget real lo sustituye dentro de [data-instagram]) */
.ig-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-3);
}
@media (max-width: 900px) { .ig-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .ig-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); } }
.ig-tile {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.ig-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out), opacity var(--t) var(--ease-out); opacity: 0.9; }
.ig-tile:hover img { transform: scale(1.06); opacity: 1; }
.ig-tile__ic {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  opacity: 0;
  background: rgba(7,8,10,0.35);
  transition: opacity var(--t) var(--ease-out);
}
.ig-tile:hover .ig-tile__ic { opacity: 1; }
.ig-tile__ic svg { width: 30px; height: 30px; }