/* =========================================================
   THE WOODLANDS PADEL CLUB — Stylesheet
   Brand: #46983a (verde) · #001378 (azul) · #FFFFFF · #000000
   ========================================================= */

:root {
  /* Brand */
  --green: #46983a;
  --blue: #001378;
  --ink: #000000;
  --paper: #FFFFFF;

  /* Background system — verde corporativo y dos tintes */
  --black: #46983a;          /* fondo principal (verde) */
  --black-2: #3d8632;         /* superficies elevadas (cards, secciones) */
  --black-3: #2e6826;         /* inputs / superficies aún más profundas */

  --line: rgba(255, 255, 255, 0.22);
  --line-2: rgba(255, 255, 255, 0.4);

  --smoke: #FFFFFF;            /* texto principal sobre verde (titulares) */
  --smoke-dim: rgba(255, 255, 255, 0.85);
  --smoke-2: rgba(255, 255, 255, 0.7);

  /* Acento = azul corporativo */
  --lime: #001378;
  --cyan: #001378;
  --grad: linear-gradient(135deg, #001378 0%, #0024c4 100%);
  --grad-soft: linear-gradient(135deg, rgba(0,19,120,0.18) 0%, rgba(0,19,120,0.08) 100%);
}

/* Body copy en negro para que tenga buen contraste sobre el verde.
   Los titulares y displays grandes mantienen blanco (más legibles en grande). */
p, .lead, .sub, .footer-col li, .footer-col p,
.app-feature p, .court-card .info .spec,
.court-card .info .spec strong,
.event-card .info p, .test-card .quote,
.faq-item .a, .price-card .lead, .price-card ul li,
.tech-card p {
  color: var(--ink);
}

/* Para que pills, eyebrows y etiquetas en mono se lean bien */
.eyebrow, .ph-label, .ph-marker, .tag, .pill {
  color: var(--ink);
}
.eyebrow .dot, .pulse { background: var(--blue); box-shadow: 0 0 8px rgba(0,19,120,0.5); }

/* =========================================================
   ALTERNANCIA DE SECCIONES — verde ↔ blanco
   Verde (default):  títulos blancos · cuerpo blanco/azul · acento azul
   Blanco (impares): títulos azules · cuerpo negro · acento azul
   ========================================================= */
.section:nth-of-type(even) {
  background: var(--paper);
  color: var(--ink);
  border-top: 1px solid rgba(0,0,0,0.08) !important;
  /* Re-mapeo de variables dentro de secciones blancas:
     los "smoke" pasan a negros translúcidos, así cualquier texto
     que use --smoke / --smoke-dim / --smoke-2 (incluido inline) se ve. */
  --smoke: #000000;
  --smoke-dim: rgba(0, 0, 0, 0.75);
  --smoke-2: rgba(0, 0, 0, 0.55);
  --line: rgba(0, 0, 0, 0.1);
  --line-2: rgba(0, 0, 0, 0.2);
}
/* Quita el fondo verde de tarjetas dentro de secciones blancas */
.section:nth-of-type(even) .exp-card,
.section:nth-of-type(even) .court-card,
.section:nth-of-type(even) .coach-card,
.section:nth-of-type(even) .price-card,
.section:nth-of-type(even) .event-card,
.section:nth-of-type(even) .test-card,
.section:nth-of-type(even) .plan-tile,
.section:nth-of-type(even) .tech-card,
.section:nth-of-type(even) .gal-item,
.section:nth-of-type(even) .ig-tile {
  background: rgba(0,19,120,0.04);
  border: 1px solid rgba(0,19,120,0.12);
}
/* Titulares grandes en NEGRO sobre fondo blanco */
.section:nth-of-type(even) h1,
.section:nth-of-type(even) h2,
.section:nth-of-type(even) h3,
.section:nth-of-type(even) h4,
.section:nth-of-type(even) h5,
.section:nth-of-type(even) .font-display,
.section:nth-of-type(even) .num,
.section:nth-of-type(even) .price,
.section:nth-of-type(even) .price * {
  color: var(--ink);
}
/* Cuerpo en negro sobre blanco */
.section:nth-of-type(even) p,
.section:nth-of-type(even) .lead,
.section:nth-of-type(even) .sub,
.section:nth-of-type(even) li,
.section:nth-of-type(even) .spec,
.section:nth-of-type(even) .spec strong,
.section:nth-of-type(even) .eyebrow,
.section:nth-of-type(even) .badge,
.section:nth-of-type(even) .role,
.section:nth-of-type(even) .name {
  color: var(--ink);
}
/* Accent en VERDE (Fraunces italic) sobre fondo blanco */
.section:nth-of-type(even) .accent {
  color: var(--green) !important;
  -webkit-text-fill-color: var(--green) !important;
}
/* Botones en secciones blancas */
.section:nth-of-type(even) .btn-ghost {
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,19,120,0.25);
  color: var(--ink);
}
.section:nth-of-type(even) .btn-ghost:hover { background: rgba(0,19,120,0.08); }
.section:nth-of-type(even) .btn-outline {
  border: 1px solid var(--blue);
  color: var(--blue);
}
.section:nth-of-type(even) .btn-outline:hover {
  background: var(--blue);
  color: var(--paper);
}
/* Líneas y separadores en secciones blancas */
.section:nth-of-type(even) [class*="border"],
.section:nth-of-type(even) hr {
  border-color: rgba(0,0,0,0.1) !important;
}
/* Las superficies blue siguen forzando texto blanco — ver bloque siguiente */

/* Cuando una superficie tiene fondo azul (o gradiente azul), el texto va en blanco */
.btn-primary, .btn-primary *,
.courts-tab.active,
.court-card .book:hover,
.price-card .cta.solid,
.price-card.featured,
.price-card.featured *,
.faq-item.open .plus,
.footer-socials a:hover,
.app-mock .tabbar .tb.act,
.tag.blue, .pill.blue {
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
}
/* Excepción: el acento italic (Fraunces) dentro de una price-card destacada sigue siendo azul oscuro
   solo si está sobre fondo claro; si la card es azul, el accent vuelve a blanco. */
.price-card.featured .accent {
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--black);
  color: var(--smoke);
  font-family: 'Google Sans Flex', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(0,19,120,0.06), transparent 60%),
    radial-gradient(1000px 500px at -10% 30%, rgba(70,152,58,0.05), transparent 60%),
    var(--black);
}

img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }

/* Typography utilities */
.font-display { font-family: 'Google Sans Flex', system-ui, sans-serif; letter-spacing: 0.01em; line-height: 0.92; }
.font-grotesk { font-family: 'Google Sans Flex', system-ui, sans-serif; }
.font-mono { font-family: 'Google Sans Flex', system-ui, sans-serif; }

.eyebrow {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--smoke-dim);
}
.eyebrow .dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lime);
  margin-right: 10px;
  vertical-align: middle;
  box-shadow: 0 0 12px var(--lime);
}

/* Layout */
.container { max-width: 1440px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px) { .container { padding: 0 20px; } }

.section { padding: 120px 0; position: relative; }
@media (max-width: 720px) { .section { padding: 72px 0; } }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  border-radius: 999px;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s, background 0.3s, color 0.3s;
  white-space: nowrap;
}
.btn-primary {
  background: var(--green);
  color: var(--paper);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(70,152,58,0.45), 0 0 0 1px rgba(70,152,58,0.7);
}
.btn-ghost {
  background: rgba(245,245,245,0.06);
  color: var(--smoke);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(12px);
}
.btn-ghost:hover {
  background: rgba(245,245,245,0.12);
  transform: translateY(-2px);
}
.btn-outline {
  border: 1px solid var(--smoke);
  color: var(--smoke);
}
.btn-outline:hover {
  background: var(--smoke);
  color: var(--black);
}
.btn .arrow {
  display: inline-flex;
  width: 20px; height: 20px;
  align-items: center; justify-content: center;
  transition: transform 0.3s;
}
.btn:hover .arrow { transform: translateX(4px); }

/* Image placeholder */
.img-placeholder {
  position: relative;
  background:
    linear-gradient(135deg, #161616 0%, #0e0e0e 100%);
  overflow: hidden;
  isolation: isolate;
}
.img-placeholder.has-img { background: #0e0e0e; }
.img-placeholder .ph-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: saturate(0.85) contrast(1.05) brightness(0.85);
}
.img-placeholder .ph-overlay {
  position: absolute; inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.18) 100%);
  pointer-events: none;
}
.img-placeholder.has-img::before,
.img-placeholder.has-img::after { content: none; }
.img-placeholder::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(135deg,
      rgba(245,245,245,0.025) 0px,
      rgba(245,245,245,0.025) 1px,
      transparent 1px,
      transparent 14px);
  z-index: 0;
}
.img-placeholder::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 80% at 50% 50%, rgba(0,19,120,0.08), transparent 60%),
    radial-gradient(40% 60% at 80% 20%, rgba(70,152,58,0.06), transparent 70%);
  z-index: 0;
  mix-blend-mode: screen;
}
.img-placeholder .ph-label {
  position: absolute;
  bottom: 14px; left: 14px;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245,245,245,0.4);
  z-index: 2;
  display: flex; align-items: center; gap: 8px;
}
.img-placeholder .ph-label::before {
  content: '';
  width: 8px; height: 8px;
  border: 1px solid rgba(245,245,245,0.4);
}
.img-placeholder .ph-frame {
  position: absolute; inset: 14px;
  border: 1px solid rgba(245,245,245,0.06);
  z-index: 1;
  pointer-events: none;
}
.img-placeholder .ph-marker {
  position: absolute;
  top: 14px; right: 14px;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: rgba(245,245,245,0.3);
  z-index: 2;
}

/* Mobile burger + menu */
.nav-burger {
  display: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: rgba(11,11,11,0.4);
  backdrop-filter: blur(12px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
}
.nav-burger span {
  display: block;
  width: 16px; height: 1.5px;
  background: var(--smoke);
}
@media (max-width: 900px) {
  .nav-burger { display: flex; }
  .nav-cta { display: none; }
}
.mobile-menu {
  position: fixed; inset: 0;
  z-index: 200;
  background: var(--blue);
  backdrop-filter: blur(20px);
  animation: fadeIn 0.4s cubic-bezier(.2,.8,.2,1);
}
.mobile-menu-inner {
  padding: 24px;
  height: 100%;
  display: flex; flex-direction: column;
  max-width: 600px;
  margin: 0 auto;
}
.mobile-close {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  color: var(--smoke);
}
.mobile-menu-list {
  list-style: none;
  display: flex; flex-direction: column;
  flex: 1;
  justify-content: center;
}
.mobile-menu-list li {
  border-bottom: 1px solid var(--line);
  opacity: 0;
  animation: slideIn 0.5s cubic-bezier(.2,.8,.2,1) forwards;
}
.mobile-menu-list a {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 0;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: clamp(36px, 8vw, 56px);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--smoke);
}
.mobile-menu-list a.on { color: var(--green) !important; }
.mobile-menu-list a:hover,
.mobile-menu-list a:active { color: var(--green) !important; }
.mobile-menu-list .num {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--smoke-dim);
  width: 36px;
}
.mobile-menu-list a svg { margin-left: auto; opacity: 0.4; transition: opacity 0.3s, transform 0.3s; }
.mobile-menu-list a:hover svg { opacity: 1; transform: translateX(6px); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }

/* Page hero (inner pages) */
.page-hero {
  position: relative;
  padding: 200px 0 100px;
  min-height: 80vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.page-hero-bg {
  position: absolute; inset: 0;
  z-index: 0;
}
.page-hero-bg .img-placeholder { width: 100%; height: 100%; }
.page-hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,11,11,0.5) 0%, rgba(11,11,11,0.3) 30%, rgba(11,11,11,0.95) 100%);
  z-index: 2;
}
.page-hero .container { position: relative; z-index: 3; width: 100%; }
.page-hero-inner {
  max-width: 1100px;
}
.page-hero-title {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: clamp(56px, 11vw, 200px);
  line-height: 0.88;
  letter-spacing: -0.01em;
  margin: 0 0 32px;
  max-width: 1200px;
  text-transform: none;
}
.page-hero-title .accent {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
}
.page-hero-title .outline {
  -webkit-text-stroke: 1.5px var(--smoke);
  color: transparent;
}
.page-hero-sub {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 300;
  color: var(--smoke-dim);
  max-width: 600px;
  margin-bottom: 40px;
  line-height: 1.55;
}
/* Ocultar kicker del page-hero para que el look coincida con el del home */
.page-hero .hero-eyebrow { display: none !important; }
.page-hero-stats {
  display: flex; gap: 40px;
  margin-top: 60px;
  flex-wrap: wrap;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.page-hero-stats .hero-stat {
  border-left: 1px solid var(--line-2);
  padding-left: 20px;
  min-width: 100px;
}
.page-hero-stats .hero-stat .n {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: clamp(36px, 4vw, 64px);
  line-height: 1;
}
.page-hero-stats .hero-stat .l {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--smoke-dim);
  text-transform: uppercase;
  margin-top: 8px;
}
.breadcrumb {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--smoke-dim);
  margin-bottom: 24px;
}
.breadcrumb a { color: var(--smoke-dim); transition: color 0.2s; }
.breadcrumb a:hover { color: var(--lime); }
.breadcrumb .sep { opacity: 0.4; }

/* Nav */
.navbar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 20px 0;
  transition: all 0.4s cubic-bezier(.2,.8,.2,1);
}
.navbar.scrolled {
  background: var(--blue);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  padding: 14px 0;
  box-shadow: 0 8px 32px rgba(0,19,120,0.25);
}
.navbar .row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px;
}
.navbar .links {
  display: flex; gap: 36px; align-items: center;
}
.navbar .links a {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper);
  position: relative;
  transition: color 0.3s;
}
.navbar .links a:hover,
.navbar .links a.active { color: var(--paper); }
.navbar .links a::after {
  content: '';
  position: absolute;
  bottom: -8px; left: 0; right: 0;
  height: 1px;
  background: var(--paper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1);
}
.navbar .links a:hover::after,
.navbar .links a.active::after {
  transform: scaleX(1);
}
@media (max-width: 900px) {
  .navbar .links { display: none; }
}

/* Logo */
.logo {
  display: flex; align-items: center; gap: 12px;
  cursor: pointer;
}
.logo-img {
  height: 44px;
  width: auto;
  display: block;
  max-width: 240px;
  object-fit: contain;
}
.footer .logo-img { height: 56px; max-width: 280px; }
.logo-mark {
  width: 36px; height: 36px;
  position: relative;
  flex-shrink: 0;
}
.logo-text {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 18px;
  letter-spacing: 0.14em;
  line-height: 1;
}
.logo-text small {
  display: block;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 8px;
  letter-spacing: 0.32em;
  color: var(--smoke-dim);
  margin-top: 3px;
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.delay-1 { transition-delay: 0.1s; }
.reveal.delay-2 { transition-delay: 0.2s; }
.reveal.delay-3 { transition-delay: 0.3s; }
.reveal.delay-4 { transition-delay: 0.4s; }

/* Hero */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 200px 0 100px;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
}
.hero .container {
  max-width: 1440px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
}
.hero-title { text-transform: none !important; }

/* Acentos que no deben romper en escritorio (Cinco pistas / El partido… / Tres formas…) */
.accent.nowrap {
  white-space: nowrap;
  display: inline-block;
  font-size: clamp(38px, 6.2vw, 96px);
  line-height: 0.95;
}

/* Cards convertidas en <a> que mantienen el aspecto y son cursor pointer */
.event-card-link, .plan-tile-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  display: block;
}
.event-card-link:hover, .plan-tile-link:hover {
  transform: translateY(-3px);
  transition: transform 0.3s;
}
@media (max-width: 900px) {
  .accent.nowrap {
    white-space: normal;
    font-size: clamp(34px, 8vw, 64px);
  }
}

/* =========================================================
   CAROUSEL DE PISTAS (home preview)
   ========================================================= */
.courts-carousel {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  padding-bottom: 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,19,120,0.3) transparent;
}
.courts-carousel::-webkit-scrollbar { height: 6px; }
.courts-carousel::-webkit-scrollbar-track { background: transparent; }
.courts-carousel::-webkit-scrollbar-thumb {
  background: rgba(0,19,120,0.25);
  border-radius: 999px;
}
.courts-carousel::-webkit-scrollbar-thumb:hover { background: rgba(0,19,120,0.45); }
.courts-carousel .court-card {
  flex: 0 0 calc((100% - 72px) / 4); /* 4 visibles + 3 gaps de 24px */
  scroll-snap-align: start;
  min-width: 0;
}
@media (max-width: 900px) {
  .courts-carousel { gap: 16px; }
  .courts-carousel .court-card {
    flex: 0 0 calc((100% - 32px) / 2 + 16px); /* 1.5 visibles en tablet/móvil grande */
  }
}
@media (max-width: 560px) {
  .courts-carousel .court-card {
    flex: 0 0 82%; /* 1 card entera + peek de la siguiente */
  }
}

/* Ajustes internos del court-card en móvil para que se lea bien */
@media (max-width: 900px) {
  .court-card { aspect-ratio: 3/4; }
  .court-card .court-num {
    font-size: 42px !important;
    top: 14px; left: 14px;
  }
  .court-card .pill { font-size: 8px; padding: 4px 8px; }
  .court-card .info { padding: 16px !important; }
  .court-card h3 { font-size: 22px !important; margin-bottom: 10px; }
  .court-card .specs { gap: 10px; margin-bottom: 12px; }
  .court-card .spec { font-size: 9px !important; }
  .court-card .occupancy {
    padding: 8px 10px !important;
    gap: 8px !important;
  }
  .court-card .occ-pct { font-size: 12px !important; }
  .court-card .book {
    font-size: 11px !important;
    padding: 10px !important;
  }
}
@media (max-width: 560px) {
  .court-card { aspect-ratio: 4/5; }
  .court-card .court-num { font-size: 36px !important; }
  .court-card .info { padding: 14px !important; }
  .court-card h3 { font-size: 20px !important; }
  /* Stack specs en columna para no desbordar */
  .court-card .specs { flex-direction: column; gap: 4px; }
}
/* Forzar todo el contenido del hero alineado a la izquierda */
.hero .hero-title,
.hero .hero-sub,
.hero .hero-cta,
.hero .hero-stats-inline,
.hero .hero-eyebrow {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  max-width: 100% !important;
}
.hero .hero-cta,
.hero .hero-stats-inline {
  justify-content: flex-start !important;
}
.hero-bg {
  position: absolute; inset: 0;
  z-index: 0;
}
.hero-bg .img-placeholder {
  width: 100%; height: 100%;
}
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,11,11,0.55) 0%, rgba(11,11,11,0.35) 40%, rgba(11,11,11,0.85) 100%),
    linear-gradient(90deg, rgba(11,11,11,0.6) 0%, rgba(11,11,11,0.15) 100%);
  z-index: 1;
}
.hero .container { position: relative; z-index: 2; }
.hero-eyebrow {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 32px;
}
.hero-eyebrow .pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--lime);
  position: relative;
}
.hero-eyebrow .pulse::after {
  content: '';
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--lime);
  animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}
.hero-title {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: clamp(56px, 11vw, 200px);
  line-height: 0.88;
  letter-spacing: -0.01em;
  margin-bottom: 32px;
  max-width: 1200px;
}
.hero-title .accent,
.page-hero-title .accent,
.section-head h2 .accent,
.event-feature h3 .accent,
.note-block blockquote .accent {
  font-family: 'Google Sans Flex', system-ui, sans-serif !important;
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.02em;
  color: var(--blue) !important;
  background: none !important;
  -webkit-text-fill-color: var(--blue) !important;
}
.hero-title .outline {
  -webkit-text-stroke: 1.5px var(--smoke);
  color: transparent;
}
.hero-sub {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 300;
  max-width: 540px;
  color: var(--smoke-dim);
  margin-bottom: 48px;
  line-height: 1.55;
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-floating {
  position: absolute;
  z-index: 3;
  background: rgba(19,19,19,0.6);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--line-2);
  border-radius: 18px;
  padding: 18px;
  min-width: 220px;
  transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
}
.hero-floating .row1 {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.hero-floating .label {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--smoke-dim);
  text-transform: uppercase;
}
.hero-floating .live {
  display: flex; align-items: center; gap: 6px;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 9px;
  color: var(--lime);
  letter-spacing: 0.16em;
}
.hero-floating .live::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 8px var(--lime);
  animation: blink 1.5s ease-in-out infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.hero-floating .big {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 32px;
  line-height: 1;
}
.hero-floating .sm {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 13px;
  color: var(--smoke);
  margin-top: 2px;
}
.hero-floating .desc {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 12px;
  color: var(--smoke-dim);
  margin-top: 6px;
}

.float-card-1 { top: 18%; right: 5%; animation: float 6s ease-in-out infinite; }
.float-card-2 { bottom: 25%; right: 12%; animation: float 7s ease-in-out infinite 1s; }
.float-card-3 { top: 38%; right: 18%; animation: float 8s ease-in-out infinite 2s; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@media (max-width: 980px) {
  .hero-floating { display: none; }
}

.hero-bottom-bar {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding-top: 80px;
  display: flex; gap: 48px; justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
}
.hero-stat {
  border-left: 1px solid var(--line-2);
  padding-left: 16px;
  min-width: 100px;
}
.hero-stat .n {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 38px;
  line-height: 1;
}
.hero-stat .l {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--smoke-dim);
  text-transform: uppercase;
  margin-top: 6px;
}
.hero-scroll-hint {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--smoke-dim);
  text-transform: uppercase;
  writing-mode: vertical-rl;
  display: flex; align-items: center; gap: 14px;
}
.hero-scroll-hint::after {
  content: '';
  width: 1px; height: 50px;
  background: linear-gradient(to bottom, var(--smoke-dim), transparent);
  animation: drop 2s ease-in-out infinite;
}
@keyframes drop {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* Ticker */
.ticker {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--black-2);
  padding: 18px 0;
  overflow: hidden;
}
.ticker-track {
  display: flex; gap: 60px;
  animation: ticker 40s linear infinite;
  white-space: nowrap;
}
.ticker-item {
  display: flex; align-items: center; gap: 16px;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 22px;
  letter-spacing: 0.08em;
  color: var(--smoke);
}
.ticker-item .sep {
  width: 8px; height: 8px;
  background: var(--lime);
  transform: rotate(45deg);
  flex-shrink: 0;
}
@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Section heading */
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
  margin-bottom: 80px;
}
.section-head .left { flex: 1; min-width: 280px; }
.section-head h2 {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: clamp(40px, 6vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.005em;
  margin-top: 24px;
}
.section-head h2 .accent {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
}
.section-head p {
  max-width: 380px;
  color: var(--smoke-dim);
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 15px;
}

/* Experience / Stats */
.exp-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
  margin-top: 24px;
}
@media (max-width: 900px) {
  .exp-grid { grid-template-columns: 1fr; }
}
.exp-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: var(--black-2);
  border: 1px solid var(--line);
  min-height: 320px;
}
.exp-card .img-placeholder { position: absolute; inset: 0; }
.exp-card .content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 28px;
  z-index: 2;
  background: linear-gradient(180deg, transparent 0%, rgba(11,11,11,0.85) 70%);
}
.exp-card h3 {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 36px;
  line-height: 1;
  margin-bottom: 8px;
}
.exp-card p {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 14px;
  color: var(--smoke-dim);
}
.exp-card.tall { grid-row: span 2; min-height: 660px; }
.exp-mini {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
@media (max-width: 600px) {
  .exp-mini { grid-template-columns: 1fr; }
}
.exp-card .tag {
  position: absolute;
  top: 20px; left: 20px;
  z-index: 2;
  padding: 6px 12px;
  background: rgba(11,11,11,0.6);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smoke);
  backdrop-filter: blur(10px);
}
.exp-card .icon-pill {
  position: absolute;
  top: 20px; right: 20px;
  z-index: 2;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--lime);
  display: flex; align-items: center; justify-content: center;
  color: var(--black);
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
}

/* Stat row */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  border-top: 1px solid var(--line);
  padding-top: 56px;
  margin-top: 72px;
}
@media (max-width: 800px) { .stat-row { grid-template-columns: repeat(2, 1fr); gap: 28px; } }
.stat {
  border-left: 1px solid var(--line-2);
  padding-left: 20px;
}
.stat .num {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 1;
}
.stat .num .sym {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat .lbl {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--smoke-dim);
  text-transform: uppercase;
  margin-top: 10px;
}

/* Courts */
.courts-tabs {
  display: flex; gap: 8px;
  background: var(--black-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px;
  width: fit-content;
  margin-bottom: 40px;
}
.courts-tab {
  padding: 10px 20px;
  border-radius: 999px;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--smoke-dim);
  transition: all 0.3s;
}
.courts-tab.active {
  background: var(--lime);
  color: var(--black);
}
.courts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .courts-grid { grid-template-columns: 1fr; } }
.court-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: var(--black-2);
  border: 1px solid var(--line);
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1), border-color 0.3s;
  cursor: pointer;
}
.court-card:hover {
  border-color: var(--line-2);
}
.court-card .img-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.court-card .img-wrap .img-placeholder { position: absolute; inset: 0; transition: transform 0.7s cubic-bezier(.2,.8,.2,1); }
.court-card:hover .img-wrap .img-placeholder { transform: none; }
.court-card .overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.55) 100%);
  z-index: 1;
}
.court-card .court-num {
  position: absolute; top: 18px; left: 18px;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 64px;
  line-height: 0.8;
  z-index: 2;
  color: var(--smoke);
  -webkit-text-stroke: 1px var(--smoke);
  -webkit-text-fill-color: transparent;
}
.court-card .meta {
  position: absolute; top: 20px; right: 20px;
  z-index: 2;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.court-card .pill {
  padding: 5px 10px;
  background: rgba(11,11,11,0.7);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}
.court-card .info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.court-card .info h3 { margin-bottom: 0; }
.court-card .info .specs { margin-bottom: 0; }
.court-card h3 {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 30px;
  line-height: 1;
  margin-bottom: 14px;
}
.court-card .specs {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.court-card .spec {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--smoke-dim);
  text-transform: uppercase;
}
.court-card .spec strong { color: var(--smoke); font-weight: 500; }
.court-card .occupancy {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(245,245,245,0.04);
  border: 1px solid var(--line);
  border-radius: 12px;
  backdrop-filter: blur(10px);
}
.court-card .occ-bar {
  flex: 1;
  height: 4px;
  background: rgba(245,245,245,0.1);
  border-radius: 2px;
  overflow: hidden;
}
.court-card .occ-fill {
  height: 100%;
  background: var(--grad);
}
.court-card .occ-pct {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 11px;
  color: var(--smoke);
}
.court-card .book {
  margin-top: 12px;
  width: 100%;
  padding: 14px;
  background: var(--smoke);
  color: var(--black);
  border-radius: 12px;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.3s, color 0.3s;
}
.court-card .book:hover { background: var(--lime); }

/* Academy */
.academy-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 1000px) { .academy-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .academy-grid { grid-template-columns: 1fr; } }
.coach-card {
  background: var(--black-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.4s, border-color 0.3s;
}
.coach-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-2);
}
.coach-card .img-wrap {
  aspect-ratio: 3 / 4;
  position: relative;
}
.coach-card .img-placeholder { position: absolute; inset: 0; }
.coach-card .body {
  padding: 20px;
}
.coach-card .name {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 24px;
  line-height: 1;
}
.coach-card .role {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--smoke-dim);
  text-transform: uppercase;
  margin-top: 8px;
}
.coach-card .badge {
  display: inline-block;
  margin-top: 14px;
  padding: 4px 10px;
  background: rgba(70,152,58,0.12);
  border: 1px solid rgba(70,152,58,0.3);
  border-radius: 999px;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--lime);
}

.training-plans {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 56px;
}
@media (max-width: 1000px) { .training-plans { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .training-plans { grid-template-columns: 1fr; } }
.plan-tile {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(245,245,245,0.02);
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}
.plan-tile:hover {
  background: rgba(245,245,245,0.04);
  border-color: var(--lime);
}
.plan-tile .num {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 11px;
  color: var(--smoke-2);
}
.plan-tile h4 {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 28px;
  line-height: 1;
  margin: 18px 0 12px;
}
.plan-tile p {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 13px;
  color: var(--smoke-dim);
}
.plan-tile .arr {
  position: absolute;
  bottom: 18px; right: 20px;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
}
.plan-tile:hover .arr { opacity: 1; transform: translateX(4px); }

/* Social events */
.events-wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
@media (max-width: 900px) { .events-wrap { grid-template-columns: 1fr; } }
.event-card {
  position: relative;
  min-height: 480px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color 0.3s;
}
.event-card:hover { border-color: var(--lime); }
.event-card .img-placeholder { position: absolute; inset: 0; }
.event-card .overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,11,11,0.1) 0%, rgba(11,11,11,0.5) 50%, rgba(11,11,11,0.95) 100%);
}
.event-card .top {
  position: absolute; top: 24px; left: 24px; right: 24px;
  z-index: 2;
  display: flex; justify-content: space-between; align-items: flex-start;
}
.event-card .date-block {
  background: rgba(11,11,11,0.6);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  padding: 12px 16px;
  text-align: center;
  backdrop-filter: blur(10px);
  min-width: 70px;
}
.event-card .date-block .d {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 36px;
  line-height: 1;
}
.event-card .date-block .m {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--smoke-dim);
  margin-top: 4px;
}
.event-card .ticket-pill {
  padding: 8px 14px;
  background: var(--lime);
  color: var(--black);
  border-radius: 999px;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}
.event-card .bottom {
  position: absolute;
  bottom: 24px; left: 24px; right: 24px;
  z-index: 2;
}
.event-card .cat {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 12px;
}
.event-card h3 {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 0.9;
  letter-spacing: -0.005em;
  margin-bottom: 14px;
}
.event-card .meta-row {
  display: flex; gap: 20px; flex-wrap: wrap;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 12px;
  color: var(--smoke-dim);
}
.event-card .meta-row span strong { color: var(--smoke); font-weight: 500; }
.event-card .avatars {
  display: flex; margin-top: 14px;
}
.event-card .avatars .av {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--black-3);
  border: 2px solid var(--black);
  margin-left: -8px;
  background:
    repeating-linear-gradient(45deg, #2a2a2a 0, #2a2a2a 2px, #1a1a1a 2px, #1a1a1a 4px);
}
.event-card .avatars .av:first-child { margin-left: 0; }
.event-card .avatars .more {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--black);
  border: 2px solid var(--black);
  margin-left: -8px;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 10px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600;
}

/* Membership */
.pricing-toggle {
  display: inline-flex;
  background: var(--black-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px;
  margin-bottom: 56px;
}
.pricing-toggle button {
  padding: 10px 22px;
  border-radius: 999px;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--smoke-dim);
  transition: all 0.3s;
}
.pricing-toggle button.on {
  background: var(--smoke);
  color: var(--black);
}
.pricing-toggle .save {
  margin-left: 6px;
  padding: 2px 8px;
  background: var(--lime);
  color: var(--black);
  border-radius: 999px;
  font-size: 9px;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
}

.pricing-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  align-items: stretch;
}
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } }
.price-card {
  background: var(--black-2);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 36px;
  position: relative;
  transition: transform 0.4s, border-color 0.3s;
}
.price-card:hover { transform: translateY(-4px); }
.price-card.featured {
  background: linear-gradient(180deg, rgba(70,152,58,0.05) 0%, rgba(0,19,120,0.05) 100%);
  border: 1px solid rgba(70,152,58,0.4);
  box-shadow: 0 0 0 1px rgba(70,152,58,0.1), 0 30px 80px rgba(70,152,58,0.08);
}
.price-card .tag {
  position: absolute; top: -12px; left: 36px;
  padding: 5px 12px;
  background: var(--lime);
  color: var(--black);
  border-radius: 999px;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}
.price-card .name {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--smoke-dim);
  margin-bottom: 24px;
}
.price-card .price {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 80px;
  line-height: 1;
  display: flex; align-items: baseline; gap: 6px;
}
.price-card .price .cur {
  font-size: 44px;
  color: var(--smoke-dim);
  margin-left: 4px;
}
.price-card .price .per {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 13px;
  color: var(--smoke-dim);
  font-weight: 400;
  margin-left: 4px;
}
.price-card .lead {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 14px;
  color: var(--smoke-dim);
  margin: 18px 0 28px;
  line-height: 1.5;
}
.price-card ul {
  list-style: none;
  display: flex; flex-direction: column; gap: 12px;
  margin-bottom: 36px;
}
.price-card li {
  display: flex; gap: 12px;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 14px;
  align-items: flex-start;
}
.price-card li::before {
  content: '';
  width: 18px; height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--lime) 30%, transparent 32%),
    rgba(70,152,58,0.12);
}
.price-card.muted li::before {
  background:
    radial-gradient(circle at 50% 50%, var(--smoke-dim) 30%, transparent 32%),
    rgba(245,245,245,0.06);
}
.price-card .cta {
  display: block;
  width: 100%;
  padding: 16px;
  border-radius: 999px;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  transition: all 0.3s;
}
.price-card .cta.solid { background: var(--lime); color: var(--black); }
.price-card .cta.solid:hover { box-shadow: 0 12px 40px rgba(70,152,58,0.3); }
.price-card .cta.ghost { background: rgba(245,245,245,0.06); color: var(--smoke); border: 1px solid var(--line-2); }
.price-card .cta.ghost:hover { background: rgba(245,245,245,0.1); }

/* Mobile app section */
.app-section { background: var(--black-2); }
.app-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center;
}
@media (max-width: 900px) { .app-row { grid-template-columns: 1fr; gap: 56px; } }
.app-features {
  display: grid; gap: 24px;
  margin-top: 40px;
}
.app-feature {
  display: flex; gap: 18px; align-items: flex-start;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.app-feature:last-child { border-bottom: none; }
.app-feature .icn {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(70,152,58,0.1);
  border: 1px solid rgba(70,152,58,0.3);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 22px;
  color: var(--lime);
}
.app-feature h4 {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 22px;
  line-height: 1;
  margin-bottom: 8px;
}
.app-feature p {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 13px;
  color: var(--smoke-dim);
}

.phones {
  position: relative;
  display: flex; justify-content: center;
  perspective: 1200px;
  min-height: 580px;
}
.phone {
  position: relative;
  width: 260px;
  background: var(--black);
  border: 1px solid var(--line-2);
  border-radius: 36px;
  padding: 10px;
  box-shadow: 0 40px 80px rgba(0,0,0,0.6);
  transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
}
.phone .screen {
  background: var(--black);
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 9 / 19.5;
  position: relative;
}
.phone.left {
  transform: rotate(-6deg) translateX(60px) translateY(20px);
  z-index: 1;
}
.phone.right {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-30%) rotate(6deg) translateY(0);
  z-index: 2;
}
@media (max-width: 600px) {
  .phone.left { display: none; }
  .phone.right { transform: translateX(-50%) rotate(0); position: static; }
}
.phone .notch {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 80px; height: 22px;
  background: #000;
  border-radius: 14px;
  z-index: 10;
}
.app-mock {
  padding: 56px 18px 16px;
  height: 100%;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #131313 0%, #0b0b0b 100%);
}
.app-mock-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.app-mock-head .h1 {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 18px;
}
.app-mock-head .h1 small {
  display: block;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 8px;
  letter-spacing: 0.16em;
  color: var(--smoke-dim);
  margin-top: 2px;
}
.app-mock-head .av {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--grad);
}
.app-mock .hero-card {
  background: linear-gradient(135deg, var(--lime), var(--cyan));
  border-radius: 16px;
  padding: 16px;
  color: var(--black);
  margin-bottom: 12px;
}
.app-mock .hero-card .tg {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.app-mock .hero-card .ti {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 24px;
  line-height: 1;
}
.app-mock .hero-card .sb {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 10px;
  margin-top: 4px;
  opacity: 0.8;
}
.app-mock .slot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px;
  background: rgba(245,245,245,0.04);
  border-radius: 12px;
  margin-bottom: 8px;
}
.app-mock .slot .time {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 16px;
}
.app-mock .slot .court {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 8px;
  letter-spacing: 0.14em;
  color: var(--smoke-dim);
  text-transform: uppercase;
}
.app-mock .slot .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 8px var(--lime);
}
.app-mock .tabbar {
  margin-top: auto;
  display: flex; justify-content: space-around;
  padding: 12px 0 0;
  border-top: 1px solid var(--line);
}
.app-mock .tabbar .tb {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--smoke-dim);
}
.app-mock .tabbar .tb.act { background: var(--lime); }

/* Testimonials */
.testimonials {
  position: relative;
}
.test-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
@media (max-width: 900px) { .test-grid { grid-template-columns: 1fr; } }
.test-card {
  padding: 36px;
  background: var(--black-2);
  border: 1px solid var(--line);
  border-radius: 24px;
  transition: border-color 0.3s, transform 0.4s;
}
.test-card:hover {
  border-color: var(--line-2);
  transform: translateY(-4px);
}
.test-card .quote {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  margin-bottom: 32px;
  color: var(--smoke);
  font-weight: 300;
}
.test-card .person {
  display: flex; align-items: center; gap: 14px;
}
.test-card .av {
  width: 44px; height: 44px;
  border-radius: 50%;
  background:
    repeating-linear-gradient(45deg, #2a2a2a 0, #2a2a2a 3px, #1a1a1a 3px, #1a1a1a 6px);
  position: relative;
}
.test-card .av::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, rgba(245,245,245,0.1), transparent 60%);
}
.test-card .name {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
}
.test-card .role {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smoke-dim);
  margin-top: 4px;
}
.test-card .stars {
  margin-bottom: 20px;
  letter-spacing: 4px;
  color: var(--lime);
  font-size: 12px;
}

/* Gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 120px;
  gap: 14px;
}
@media (max-width: 900px) {
  .gallery { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 100px; }
}
.gal-item {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
}
.gal-item:hover { transform: scale(1.02); }
.gal-item .img-placeholder { position: absolute; inset: 0; }
.gal-item .gal-tag {
  position: absolute;
  top: 14px; left: 14px;
  padding: 6px 10px;
  background: rgba(11,11,11,0.5);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s;
}
.gal-item:hover .gal-tag { opacity: 1; }
.gi-a { grid-column: span 5; grid-row: span 3; }
.gi-b { grid-column: span 4; grid-row: span 2; }
.gi-c { grid-column: span 3; grid-row: span 2; }
.gi-d { grid-column: span 4; grid-row: span 2; }
.gi-e { grid-column: span 3; grid-row: span 3; }
.gi-f { grid-column: span 5; grid-row: span 2; }
.gi-g { grid-column: span 4; grid-row: span 2; }
.gi-h { grid-column: span 8; grid-row: span 2; }
@media (max-width: 900px) {
  .gi-a, .gi-h { grid-column: span 6; grid-row: span 2; }
  .gi-b, .gi-c, .gi-d, .gi-e, .gi-f, .gi-g { grid-column: span 3; grid-row: span 2; }
}

/* FAQ */
.faq-wrap {
  max-width: 880px;
  margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 24px 0;
  cursor: pointer;
}
.faq-item .q {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.faq-item .q h4 {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.1;
  flex: 1;
}
.faq-item .plus {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  transition: transform 0.3s, background 0.3s, color 0.3s;
}
.faq-item.open .plus {
  background: var(--lime); color: var(--black);
  border-color: var(--lime);
  transform: rotate(45deg);
}
.faq-item .a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(.2,.8,.2,1), padding 0.3s;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 15px;
  color: var(--smoke-dim);
  line-height: 1.6;
}
.faq-item.open .a {
  max-height: 200px;
  padding-top: 16px;
}

/* Footer */
.footer {
  background: var(--black);
  border-top: 1px solid var(--line);
  padding-top: 100px;
}
.footer-cta {
  padding: 60px 56px;
  border-radius: 32px;
  background: var(--grad);
  color: var(--paper);
  --smoke: #FFFFFF;
  --smoke-dim: rgba(255,255,255,0.85);
  position: relative;
  overflow: hidden;
  margin-bottom: 80px;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 900px) { .footer-cta { grid-template-columns: 1fr; padding: 40px; } }
.footer-cta h2 {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: clamp(44px, 6vw, 88px);
  line-height: 0.92;
  letter-spacing: -0.005em;
}
.footer-cta .wa {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 18px 28px;
  background: var(--paper);
  color: var(--blue);
  border-radius: 999px;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.footer-cta .wa-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 8px var(--lime);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr;
  gap: 40px;
  margin-bottom: 64px;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-col h5 {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--smoke-dim);
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 14px;
  color: var(--smoke);
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--lime); }
.footer-col p {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 14px;
  color: var(--smoke-dim);
  margin-bottom: 8px;
}
.newsletter {
  display: flex;
  margin-top: 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 4px;
  background: var(--black-2);
}
.newsletter input {
  flex: 1;
  background: none;
  border: none;
  padding: 10px 16px;
  color: var(--smoke);
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 13px;
  outline: none;
}
.newsletter input::placeholder { color: var(--smoke-2); }
.newsletter button {
  padding: 10px 18px;
  background: var(--lime);
  color: var(--black);
  border-radius: 999px;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bigmark {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: clamp(80px, 18vw, 280px);
  line-height: 0.85;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, rgba(245,245,245,0.06) 0%, rgba(245,245,245,0) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px rgba(245,245,245,0.06);
  text-align: center;
  padding: 40px 0;
  user-select: none;
}
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smoke-dim);
  flex-wrap: wrap; gap: 16px;
}
.footer-socials { display: flex; gap: 18px; }
.footer-socials a {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s;
}
.footer-socials a:hover { background: var(--lime); color: var(--black); border-color: var(--lime); }

/* Sticky mobile CTA */
.mobile-cta {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 20px; right: 20px;
  z-index: 90;
  padding: 14px 20px;
  background: var(--green) !important;
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
  border-radius: 999px;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 20px 40px rgba(70,152,58,0.3);
  transition: background 0.3s, box-shadow 0.3s;
}
/* Cuando el botón está sobre una sección VERDE, pasa a AZUL */
.mobile-cta.on-green {
  background: var(--blue) !important;
  box-shadow: 0 20px 40px rgba(0,19,120,0.45) !important;
}
@media (max-width: 720px) { .mobile-cta { display: block; } }

/* Map */
.map-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--black-2);
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
}
.map-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(245,245,245,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,245,245,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}
.map-grid::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 40% 50%, rgba(0,19,120,0.08), transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(70,152,58,0.1), transparent 40%);
}
.map-pin {
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 2;
}
.map-pin .pulse {
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: var(--lime);
  opacity: 0.3;
  animation: pulse 2s ease-out infinite;
}
.map-pin .dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 24px var(--lime);
}
.map-pin .label {
  position: absolute;
  top: -56px; left: 50%; transform: translateX(-50%);
  white-space: nowrap;
  padding: 8px 14px;
  background: var(--black);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smoke);
}

/* Countdown */
.countdown {
  display: inline-flex;
  gap: 6px;
  margin-top: 16px;
}
.countdown .cell {
  background: rgba(11,11,11,0.7);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 8px 10px;
  min-width: 50px;
  text-align: center;
  backdrop-filter: blur(10px);
}
.countdown .cell .n {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 22px;
  line-height: 1;
}
.countdown .cell .l {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 8px;
  letter-spacing: 0.16em;
  color: var(--smoke-dim);
  text-transform: uppercase;
  margin-top: 4px;
}

/* Instagram */
.ig-row {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
}
@media (max-width: 720px) { .ig-row { grid-template-columns: repeat(3, 1fr); } }
.ig-tile {
  aspect-ratio: 1;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
}
.ig-tile .img-placeholder { position: absolute; inset: 0; }
.ig-tile .ig-overlay {
  position: absolute; inset: 0;
  background: rgba(11,11,11,0.5);
  opacity: 0; transition: opacity 0.3s;
  display: flex; align-items: center; justify-content: center;
  color: var(--lime);
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 12px;
}
.ig-tile:hover .ig-overlay { opacity: 1; }


/* =========================================================
   PAGE-SPECIFIC: PISTAS
   ========================================================= */

/* Tech specs grid */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 800px) { .tech-grid { grid-template-columns: 1fr; } }
.tech-card {
  padding: 36px;
  background: var(--black-2);
  border: 1px solid var(--line);
  border-radius: 24px;
  transition: border-color 0.3s, transform 0.4s;
}
.tech-card:hover { border-color: var(--line-2); transform: translateY(-3px); }
.tech-card .tech-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.tech-card .num {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--smoke-dim);
}
.tech-card .tech-stat { text-align: right; }
.tech-card .tech-stat .n {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 44px;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tech-card .tech-stat .l {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--smoke-dim);
  margin-top: 4px;
}
.tech-card h3 {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 28px;
  line-height: 1;
  margin-bottom: 12px;
}
.tech-card p {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 14px;
  color: var(--smoke-dim);
  line-height: 1.6;
}

/* Availability grid */
.avail-wrap { margin-top: 24px; }
.avail-tabs {
  display: flex; gap: 4px;
  margin-bottom: 24px;
  overflow-x: auto;
  padding-bottom: 6px;
}
.avail-tab {
  flex-shrink: 0;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--smoke-dim);
  background: transparent;
  transition: all 0.2s;
  white-space: nowrap;
}
.avail-tab.on {
  background: var(--smoke);
  color: var(--black);
  border-color: var(--smoke);
}
.avail-tab:hover:not(.on) { color: var(--smoke); border-color: var(--line-2); }

.avail-legend {
  display: flex; gap: 24px; flex-wrap: wrap;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.avail-legend span {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--smoke-dim);
  text-transform: uppercase;
}
.avail-legend i {
  width: 8px; height: 8px;
  border-radius: 50%;
}
.avail-legend i.d-free { background: var(--lime); }
.avail-legend i.d-busy { background: var(--cyan); }
.avail-legend i.d-taken { background: rgba(245,245,245,0.18); }
.avail-legend i.d-prime { background: #ff7a3c; box-shadow: 0 0 8px #ff7a3c; }

.avail-grid {
  display: grid;
  gap: 4px;
  background: var(--black-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 6px;
  overflow-x: auto;
}
.avail-cell {
  padding: 14px 10px;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 11px;
  border-radius: 8px;
  display: flex; align-items: center; gap: 8px;
  background: transparent;
  color: var(--smoke);
  min-height: 52px;
  text-align: left;
}
.avail-cell.head {
  color: var(--smoke-dim);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  justify-content: center;
  padding: 12px 10px;
  min-height: 0;
}
.avail-cell.head:first-child { justify-content: flex-start; }
.avail-cell.row-label {
  background: rgba(245,245,245,0.02);
  display: flex; flex-direction: column;
  align-items: flex-start; gap: 2px;
  padding: 10px 14px;
}
.avail-cell.row-label .num {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 18px;
  color: var(--smoke);
}
.avail-cell.row-label .nm {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smoke-dim);
}
.avail-cell.slot {
  justify-content: center;
  flex-direction: column; gap: 4px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.avail-cell.slot .state-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
}
.avail-cell.slot.free { background: rgba(70,152,58,0.06); color: var(--lime); }
.avail-cell.slot.free .state-dot { background: var(--lime); box-shadow: 0 0 6px var(--lime); }
.avail-cell.slot.free:hover { background: rgba(70,152,58,0.16); border-color: rgba(70,152,58,0.3); }
.avail-cell.slot.busy { background: rgba(0,19,120,0.06); color: var(--cyan); }
.avail-cell.slot.busy .state-dot { background: var(--cyan); }
.avail-cell.slot.busy:hover { background: rgba(0,19,120,0.14); }
.avail-cell.slot.taken { background: rgba(245,245,245,0.02); color: rgba(245,245,245,0.25); cursor: not-allowed; }
.avail-cell.slot.taken .state-dot { background: rgba(245,245,245,0.2); }
.avail-cell.slot.prime { background: rgba(255,122,60,0.08); color: #ff7a3c; }
.avail-cell.slot.prime .state-dot { background: #ff7a3c; box-shadow: 0 0 8px #ff7a3c; animation: blink 1.4s ease-in-out infinite; }
.avail-cell.slot.prime:hover { background: rgba(255,122,60,0.18); }

/* Price table */
.price-table {
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: var(--black-2);
}
.price-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
}
.price-row .cell {
  padding: 24px 28px;
  border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px;
}
.price-row:last-child .cell { border-bottom: none; }
.price-row .cell.label {
  background: rgba(245,245,245,0.02);
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--smoke-dim);
  justify-content: center;
}
.price-row.head .cell {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--smoke-dim);
  background: rgba(245,245,245,0.02);
}
.price-row .cell strong {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 32px;
  font-weight: 400;
  color: var(--smoke);
  line-height: 1;
}
.price-row .cell span {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smoke-dim);
}
@media (max-width: 800px) {
  .price-row {
    grid-template-columns: 1fr 1fr;
  }
  .price-row .cell.label {
    grid-column: 1 / -1;
    align-items: flex-start;
  }
  .price-row.head .cell.label { display: none; }
  .price-row.head .cell:nth-child(4) { display: none; }
}

.price-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
@media (max-width: 720px) { .price-notes { grid-template-columns: 1fr; gap: 32px; } }
.price-notes ul {
  list-style: none;
  margin-top: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.price-notes li {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 14px;
  color: var(--smoke);
  padding-left: 20px;
  position: relative;
}
.price-notes li::before {
  content: '·';
  position: absolute;
  left: 4px; top: -2px;
  color: var(--lime);
  font-size: 24px;
  line-height: 1;
}

/* =========================================================
   PAGE-SPECIFIC: ACADEMIA
   ========================================================= */
.coach-detail {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 40px;
  padding: 40px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.coach-detail:last-child { border-bottom: none; }
@media (max-width: 900px) {
  .coach-detail { grid-template-columns: 1fr; }
}
.coach-detail .img-wrap {
  aspect-ratio: 3 / 4;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}
.coach-detail .img-wrap .img-placeholder { position: absolute; inset: 0; }
.coach-detail .num {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--smoke-dim);
}
.coach-detail h3 {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.92;
  margin: 14px 0 8px;
}
.coach-detail .role {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 24px;
}
.coach-detail .bio {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 15px;
  color: var(--smoke-dim);
  line-height: 1.65;
  margin-bottom: 28px;
  max-width: 600px;
}
.coach-detail .meta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 28px;
}
@media (max-width: 600px) { .coach-detail .meta-grid { grid-template-columns: repeat(2, 1fr); } }
.coach-detail .meta-grid .item {
  border-left: 1px solid var(--line-2);
  padding-left: 14px;
}
.coach-detail .meta-grid .item .v {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 30px;
  line-height: 1;
}
.coach-detail .meta-grid .item .k {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--smoke-dim);
  text-transform: uppercase;
  margin-top: 6px;
}
.coach-detail .specs {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.coach-detail .specs span {
  padding: 6px 12px;
  background: rgba(245,245,245,0.04);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--smoke);
}

/* Weekly schedule */
.schedule-grid {
  display: grid;
  grid-template-columns: 80px repeat(7, 1fr);
  gap: 6px;
  margin-top: 24px;
  overflow-x: auto;
}
.schedule-cell {
  padding: 12px 10px;
  background: var(--black-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  min-height: 88px;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.schedule-cell.head {
  background: transparent;
  border: none;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--smoke-dim);
  text-transform: uppercase;
  min-height: 0;
  padding: 8px 6px;
  align-items: center; justify-content: center;
}
.schedule-cell.time {
  background: transparent;
  border: none;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 22px;
  color: var(--smoke);
  align-items: flex-start; justify-content: center;
  padding: 12px 4px;
}
.schedule-cell.cls {
  cursor: pointer;
  transition: all 0.2s;
}
.schedule-cell.cls:hover { background: rgba(245,245,245,0.05); border-color: var(--line-2); }
.schedule-cell .cls-name {
  font-weight: 600;
  font-size: 11px;
  color: var(--smoke);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.schedule-cell .cls-coach {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--smoke-dim);
  text-transform: uppercase;
}
.schedule-cell .cls-tag {
  margin-top: auto;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.schedule-cell .cls-tag.full { color: rgba(245,245,245,0.3); }
.schedule-cell .cls-tag.open { color: var(--lime); }
.schedule-cell .cls-tag.few { color: var(--cyan); }
.schedule-cell.cls.lime { border-color: rgba(70,152,58,0.2); background: rgba(70,152,58,0.04); }
.schedule-cell.cls.cyan { border-color: rgba(0,19,120,0.18); background: rgba(0,19,120,0.04); }

/* =========================================================
   PAGE-SPECIFIC: SOCIAL
   ========================================================= */
.event-feature {
  position: relative;
  min-height: 640px;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid var(--line);
  margin-bottom: 24px;
}
.event-feature .img-placeholder { position: absolute; inset: 0; }
.event-feature .ovr {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,11,11,0.2) 0%, rgba(11,11,11,0.55) 50%, rgba(11,11,11,0.95) 100%);
}
.event-feature .inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex; flex-direction: column;
  padding: 48px;
  justify-content: space-between;
}
@media (max-width: 720px) { .event-feature .inner { padding: 32px 24px; } .event-feature { min-height: 540px; } }
.event-feature .top-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px; flex-wrap: wrap;
}
.event-feature .date-card {
  background: rgba(11,11,11,0.6);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line-2);
  border-radius: 16px;
  padding: 16px 22px;
}
.event-feature .date-card .d {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 56px;
  line-height: 0.9;
}
.event-feature .date-card .m {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--smoke-dim);
  margin-top: 4px;
}
.event-feature .live-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: rgba(11,11,11,0.6);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smoke);
}
.event-feature .live-tag::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 8px var(--lime);
  animation: blink 1.4s ease-in-out infinite;
}
.event-feature h3 {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: clamp(48px, 7vw, 120px);
  line-height: 0.92;
  letter-spacing: -0.005em;
  margin-bottom: 16px;
}
.event-feature h3 .accent {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
}
.event-feature .lede {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 16px;
  color: var(--smoke-dim);
  margin-bottom: 24px;
  max-width: 540px;
}
.event-feature .info-row {
  display: flex; gap: 28px; flex-wrap: wrap;
  margin-bottom: 24px;
}
.event-feature .info-row .col {
  border-left: 1px solid var(--line-2);
  padding-left: 16px;
  min-width: 100px;
}
.event-feature .info-row .col .k {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smoke-dim);
  margin-bottom: 6px;
}
.event-feature .info-row .col .v {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 24px;
  line-height: 1;
}
.event-feature .actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* DJ / chef collabs */
.collabs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}
@media (max-width: 900px) { .collabs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .collabs-grid { grid-template-columns: 1fr; } }
.collab-card {
  background: var(--black-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  transition: border-color 0.3s, transform 0.4s;
}
.collab-card:hover { border-color: var(--line-2); transform: translateY(-3px); }
.collab-card .img-wrap {
  aspect-ratio: 1;
  position: relative;
}
.collab-card .img-placeholder { position: absolute; inset: 0; }
.collab-card .body { padding: 18px; }
.collab-card .role {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--smoke-dim);
  text-transform: uppercase;
}
.collab-card .name {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 22px;
  line-height: 1;
  margin: 6px 0 8px;
}
.collab-card .when {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 12px;
  color: var(--smoke-dim);
}

/* Calendar */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-top: 24px;
}
.cal-day {
  aspect-ratio: 1;
  background: var(--black-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
  display: flex; flex-direction: column; justify-content: space-between;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 11px;
  color: var(--smoke-dim);
  position: relative;
}
.cal-day.head {
  background: transparent;
  border: none;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  aspect-ratio: auto;
  padding: 8px 4px;
  align-items: center; justify-content: center;
}
.cal-day.has-event {
  border-color: rgba(70,152,58,0.3);
  background: rgba(70,152,58,0.04);
  color: var(--smoke);
  cursor: pointer;
  transition: all 0.2s;
}
.cal-day.has-event:hover { background: rgba(70,152,58,0.12); }
.cal-day .num {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 22px;
  color: var(--smoke);
  line-height: 1;
}
.cal-day .evt {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 8px;
  letter-spacing: 0.1em;
  color: var(--lime);
  text-transform: uppercase;
  line-height: 1.3;
}

/* =========================================================
   PAGE-SPECIFIC: CLUB (architecture / spaces)
   ========================================================= */
.spaces-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 160px;
  gap: 16px;
}
@media (max-width: 900px) { .spaces-grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 140px; } }
.space-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
}
.space-card:hover { transform: translateY(-4px); }
.space-card .img-placeholder { position: absolute; inset: 0; }
.space-card .ovr {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(11,11,11,0.92) 100%);
}
.space-card .content {
  position: absolute; bottom: 0; left: 0; right: 0;
  z-index: 2;
  padding: 20px;
}
.space-card .floor {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 8px;
}
.space-card h3 {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 26px;
  line-height: 1;
  margin-bottom: 6px;
}
.space-card p {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 12px;
  color: var(--smoke-dim);
}
.sp-1 { grid-column: span 7; grid-row: span 3; }
.sp-2 { grid-column: span 5; grid-row: span 2; }
.sp-3 { grid-column: span 5; grid-row: span 2; }
.sp-4 { grid-column: span 4; grid-row: span 2; }
.sp-5 { grid-column: span 4; grid-row: span 2; }
.sp-6 { grid-column: span 4; grid-row: span 2; }
.sp-7 { grid-column: span 8; grid-row: span 2; }
.sp-8 { grid-column: span 4; grid-row: span 2; }
@media (max-width: 900px) {
  .sp-1, .sp-7 { grid-column: span 6; grid-row: span 2; }
  .sp-2, .sp-3, .sp-4, .sp-5, .sp-6, .sp-8 { grid-column: span 3; grid-row: span 2; }
}

/* Founder note */
.note-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 900px) { .note-block { grid-template-columns: 1fr; gap: 32px; } }
.note-block .img-wrap {
  aspect-ratio: 4 / 5;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
}
.note-block .img-placeholder { position: absolute; inset: 0; }
.note-block blockquote {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: clamp(28px, 3.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.005em;
  margin-bottom: 24px;
}
.note-block blockquote .accent {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
}
.note-block .sig {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--smoke);
}
.note-block .sig small {
  display: block;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--smoke-dim);
  text-transform: uppercase;
  margin-top: 4px;
}

/* Press strip */
.press-strip {
  display: flex; flex-wrap: wrap;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
}
.press-strip .press-cell {
  flex: 1 1 200px;
  padding: 36px 24px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column;
  justify-content: center;
  min-height: 140px;
}
.press-strip .press-cell:last-child { border-right: none; }
.press-strip .press-cell .name {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 26px;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.press-strip .press-cell .quote {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 12px;
  color: var(--smoke-dim);
  line-height: 1.4;
}

/* =========================================================
   PAGE-SPECIFIC: CONTACTO
   ========================================================= */
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-form {
  background: var(--black-2);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 36px;
}
.contact-form h3 {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 36px;
  line-height: 1;
  margin-bottom: 8px;
}
.contact-form .lede {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 14px;
  color: var(--smoke-dim);
  margin-bottom: 28px;
}
.contact-form .field { margin-bottom: 18px; }
.contact-form label {
  display: block;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--smoke-dim);
  margin-bottom: 8px;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  background: rgba(245,245,245,0.03);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--smoke);
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--lime);
  background: rgba(245,245,245,0.05);
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.contact-form select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%23F5F5F5' stroke-width='1.5' fill='none'/></svg>"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }

.contact-info { display: flex; flex-direction: column; gap: 24px; }
.contact-block {
  padding: 28px;
  background: var(--black-2);
  border: 1px solid var(--line);
  border-radius: 20px;
}
.contact-block h4 {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--smoke-dim);
  margin-bottom: 18px;
}
.contact-block .big {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 32px;
  line-height: 1;
  margin-bottom: 10px;
}
.contact-block p {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 14px;
  color: var(--smoke-dim);
  line-height: 1.5;
}
.contact-block a {
  color: var(--lime);
  border-bottom: 1px solid rgba(70,152,58,0.3);
  padding-bottom: 1px;
}

.travel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}
@media (max-width: 700px) { .travel-grid { grid-template-columns: 1fr; } }
.travel-card {
  background: var(--black-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
}
.travel-card .icn {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(70,152,58,0.1);
  border: 1px solid rgba(70,152,58,0.3);
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 18px;
  color: var(--lime);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.travel-card h4 {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 22px;
  line-height: 1;
  margin-bottom: 10px;
}
.travel-card p {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 13px;
  color: var(--smoke-dim);
  line-height: 1.5;
}

/* Compare table for memberships */
.compare-table {
  margin-top: 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: var(--black-2);
}
.compare-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
}
.compare-row .cell {
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 14px;
  display: flex; align-items: center;
  color: var(--smoke);
}
.compare-row:last-child .cell { border-bottom: none; }
.compare-row.head .cell {
  background: rgba(245,245,245,0.03);
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--smoke);
  padding-top: 24px; padding-bottom: 24px;
}
.compare-row.head .cell.featured {
  background: rgba(70,152,58,0.06);
  color: var(--lime);
}
.compare-row .cell.label {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--smoke-dim);
  background: rgba(245,245,245,0.015);
  justify-content: flex-start;
}
.compare-row .cell.featured { background: rgba(70,152,58,0.025); }
.compare-row .cell .check {
  display: inline-block;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(70,152,58,0.1);
  border: 1px solid rgba(70,152,58,0.3);
  position: relative;
  flex-shrink: 0;
}
.compare-row .cell .check::after {
  content: '';
  position: absolute;
  top: 5px; left: 4px;
  width: 9px; height: 5px;
  border-left: 1.5px solid var(--lime);
  border-bottom: 1.5px solid var(--lime);
  transform: rotate(-45deg);
}
.compare-row .cell .dash {
  display: inline-block;
  width: 14px; height: 1px;
  background: rgba(245,245,245,0.2);
}
@media (max-width: 720px) {
  .compare-row { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .compare-row .cell { padding: 14px 12px; font-size: 12px; }
  .compare-row .cell.label { font-size: 10px; }
}

/* =========================================================
   OVERRIDE: en NAVBAR y HEROS, lo azul → verde
   ========================================================= */
/* Accent (Fraunces italic) en heros: azul (fondo verde) */
.hero .accent,
.hero-title .accent,
.page-hero .accent,
.page-hero-title .accent {
  color: var(--blue) !important;
  -webkit-text-fill-color: var(--blue) !important;
}

/* Navbar: cualquier botón primario o elemento azul pasa a verde */
.navbar .btn-primary {
  background: var(--green) !important;
  color: var(--paper) !important;
}
.navbar .btn-primary:hover {
  box-shadow: 0 12px 40px rgba(70,152,58,0.45), 0 0 0 1px rgba(70,152,58,0.7);
}
.navbar a,
.navbar .links a {
  color: var(--paper);
}
.navbar .links a:hover,
.navbar .links a.active { color: var(--paper) !important; }
.navbar .links a.active::after { background: var(--paper) !important; }

/* ============================================
   PUNTOS PARPADEANTES — todos desactivados
   ============================================ */
.pulse,
.hero-eyebrow .pulse,
.wa-dot,
.hero-floating .live,
.hero-floating .live::before,
.eyebrow .dot,
.eyebrow > .dot,
.eyebrow > span:first-child:not(:only-child).dot {
  display: none !important;
}
/* Cualquier elemento con animación blink/pulse/drop la pierde */
.eyebrow .dot,
.avail-cell.slot.prime .state-dot,
[class*="dot"]::before,
[class*="dot"]::after {
  animation: none !important;
}
/* Mata las keyframes de blink/pulse/drop por si quedan en algún sitio */
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 1; } }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 1; transform: scale(1); } }
@keyframes drop { 0%, 100% { opacity: 1; transform: translateY(0); } 50% { opacity: 1; transform: translateY(0); } }

/* Hero stats inline (debajo de los CTAs, alineados a la izquierda) */
.hero-stats-inline {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.18);
  max-width: 600px;
}
.hero-stats-inline .hero-stat .n {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 38px;
  line-height: 1;
  color: var(--paper);
  letter-spacing: 0.02em;
}
.hero-stats-inline .hero-stat .l {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-top: 6px;
}

/* Tarjetas flotantes del hero — ambas alineadas abajo, una al lado de otra */
.float-card-event,
.float-card-weather {
  position: absolute;
  bottom: 40px;
  padding: 20px 22px;
  border-radius: 18px;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.18);
  z-index: 3;
  color: var(--paper);
}
.float-card-event {
  right: 320px;
  width: 280px;
}
.float-card-weather {
  right: 24px;
  width: 280px;
}
/* En tabletas medianas, debajo, pero achicar gap */
@media (max-width: 1200px) {
  .float-card-event { right: 300px; width: 260px; }
  .float-card-weather { right: 24px; width: 260px; }
}
/* En móvil ocultas (ya estaba) */
@media (max-width: 980px) {
  .float-card-event, .float-card-weather { display: none; }
}
.float-card-event .label, .float-card-weather .label {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.float-card-event .big, .float-card-weather .big {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 26px;
  letter-spacing: 0.02em;
  margin-top: 8px;
  color: var(--paper);
}
.float-card-event .desc, .float-card-weather .sm {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.8);
}

/* Texto SOBRE IMÁGENES (etiquetas y marcadores en placeholders) — siempre blanco */
.ph-label, .ph-marker {
  color: var(--paper) !important;
}

/* Ocultar el título (COURT N) y las specs (iluminación, superficie) de las court-cards.
   La card mantiene la imagen, los pills "DISPONIBLE/OUTDOOR", la barra de ocupación y el botón. */
.court-card .info h3,
.court-card .info .specs {
  display: none !important;
}

/* =========================================================
   FOOTER — rediseño limpio
   ========================================================= */
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.1fr 1.2fr;
  gap: 56px;
  padding: 60px 0 40px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; }
}
.footer-col h5 {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 18px;
  letter-spacing: 0.14em;
  color: var(--paper);
  margin-bottom: 18px;
  text-transform: uppercase;
}
.footer-col p,
.footer-col li,
.footer-col a {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255,255,255,0.78);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col ul li { margin-bottom: 8px; }
.footer-col a { transition: color 0.2s; text-decoration: none; }
.footer-col a:hover { color: var(--paper); }
.footer-address-link {
  display: inline-block;
  color: rgba(255,255,255,0.95) !important;
  font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  padding-bottom: 2px;
}
.footer-address-link:hover { border-color: var(--paper); }
.footer-hours li {
  display: flex !important;
  justify-content: space-between;
  gap: 16px;
}
.footer-hours li span:last-child {
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
/* Iconos de redes sociales */
.footer-socials {
  display: flex;
  gap: 12px;
}
.footer-socials a {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.3);
  color: var(--paper);
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.footer-socials a:hover {
  background: var(--paper);
  color: var(--green) !important;
  border-color: var(--paper);
  transform: translateY(-2px);
}
/* Newsletter form */
.newsletter {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.newsletter input {
  flex: 1;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  color: var(--paper);
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.newsletter input::placeholder { color: rgba(255,255,255,0.55); }
.newsletter input:focus { border-color: var(--paper); background: rgba(255,255,255,0.12); }
.newsletter button {
  padding: 12px 20px;
  border-radius: 999px;
  border: 0;
  background: var(--paper);
  color: var(--green);
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.newsletter button:hover { background: var(--blue); color: var(--paper); }
/* Footer bottom — solo copyright y ubicación */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  padding: 24px 0;
  gap: 16px;
  flex-wrap: wrap;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* =========================================================
   AJUSTES FINALES DE COLOR · iteración del cliente
   ========================================================= */

/* HERO: el acento (Fraunces italic, "Spring, TX.") en VERDE */
.hero .accent,
.hero-title .accent,
.page-hero .accent,
.page-hero-title .accent {
  color: var(--green) !important;
  -webkit-text-fill-color: var(--green) !important;
}

/* SECCIONES BLANCAS: títulos en AZUL, acento en VERDE, cuerpo en NEGRO */
.section:nth-of-type(even) h1,
.section:nth-of-type(even) h2,
.section:nth-of-type(even) h4,
.section:nth-of-type(even) h5,
.section:nth-of-type(even) .font-display,
.section:nth-of-type(even) .num,
.section:nth-of-type(even) .price,
.section:nth-of-type(even) .price * {
  color: var(--blue) !important;
}
/* h3 dentro de cards con imagen → blanco (no azul). El resto de h3 → azul */
.section:nth-of-type(even) > .container > * h3:not(.exp-card h3):not(.event-card h3):not(.gal-item h3):not(.coach-card .img-wrap h3) {
  color: var(--blue) !important;
}
.section:nth-of-type(even) .accent {
  color: var(--green) !important;
  -webkit-text-fill-color: var(--green) !important;
}

/* ELEMENTOS SOBRE IMAGEN — siempre blanco (titulos, subtitulos, etiquetas) */
.exp-card .content h3,
.exp-card .content p,
.exp-card .tag,
.exp-card .icon-pill,
.event-card .content h3,
.event-card .content p,
.event-card .content .cat,
.event-card .meta-row,
.event-card .meta-row *,
.event-card .date-block,
.event-card .date-block *,
.gal-item .gal-tag,
.gal-item *,
.court-card,
.court-card *,
.court-card .info,
.court-card .info *,
.court-card .info h3,
.court-card .info .spec,
.court-card .info .spec strong,
.court-card .info .occ-pct,
.court-card .court-num,
.court-card .img-wrap .pill,
.court-card .img-wrap .meta * {
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
}

/* TAGS / PILLS sobre imagen — fondo translúcido con borde blanco */
.exp-card .tag,
.event-card .date-block,
.court-card .img-wrap .pill {
  background: rgba(0,0,0,0.5) !important;
  border: 1px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(8px);
}

/* INFO DE INSCRIPCIÓN / PRECIO sobre imagen → fondo AZUL, letras blancas */
.event-card .ticket-pill,
.pill.price,
.pill.ticket {
  background: var(--blue) !important;
  color: var(--paper) !important;
  border: 0 !important;
}

/* BOTONES dentro de cards con imagen → verde corporativo + texto blanco */
.court-card .book,
.court-card .book:hover,
.event-card .cta,
.exp-card .cta {
  background: var(--green) !important;
  color: var(--paper) !important;
  border: 0;
}

/* BARRAS DE PROGRESO → verde */
.occ-fill,
.occ-bar .occ-fill,
.progress-fill,
[class*="bar"] [class*="fill"] {
  background: var(--green) !important;
}

/* PLAN DESTACADO → fondo VERDE sólido (Player / "Más popular") */
.price-card.featured {
  background: var(--green) !important;
  border: 1px solid var(--green) !important;
  box-shadow: 0 30px 80px rgba(70,152,58,0.25), 0 0 0 1px rgba(70,152,58,0.4) !important;
}
.price-card.featured,
.price-card.featured .name,
.price-card.featured .lead,
.price-card.featured ul li,
.price-card.featured .price,
.price-card.featured .price *,
.price-card.featured .tag {
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
}
.price-card.featured .tag {
  background: var(--paper) !important;
  color: var(--green) !important;
  -webkit-text-fill-color: var(--green) !important;
}
.price-card.featured .cta.solid,
.price-card.featured .cta {
  background: var(--paper) !important;
  color: var(--green) !important;
}
.price-card.featured .cta.solid:hover,
.price-card.featured .cta:hover {
  background: var(--blue) !important;
  color: var(--paper) !important;
}
.price-card.featured ul li::before { color: var(--paper) !important; }

/* TOGGLE DE PRECIOS (mensual/anual) — rediseñado */
.pricing-toggle {
  display: inline-flex;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  padding: 6px;
  gap: 4px;
  margin-bottom: 56px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.section:nth-of-type(even) .pricing-toggle {
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.12);
}
.pricing-toggle button {
  padding: 12px 26px;
  border-radius: 999px;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--paper);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.section:nth-of-type(even) .pricing-toggle button {
  color: var(--ink);
}
.pricing-toggle button:hover {
  background: rgba(255,255,255,0.1);
}
.section:nth-of-type(even) .pricing-toggle button:hover {
  background: rgba(0,0,0,0.05);
}
.pricing-toggle button.on {
  background: var(--blue);
  color: var(--paper) !important;
  box-shadow: 0 6px 18px rgba(0,19,120,0.35);
}
.section:nth-of-type(even) .pricing-toggle button.on {
  background: var(--blue);
  color: var(--paper) !important;
}
.pricing-toggle .save {
  margin-left: 4px;
  padding: 3px 10px;
  background: var(--green);
  color: var(--paper) !important;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.pricing-toggle button.on .save {
  background: var(--paper);
  color: var(--blue) !important;
}

/* =========================================================
   PARRILLA DE DISPONIBILIDAD DE PISTAS — rediseño
   ========================================================= */
.avail-wrap {
  margin-top: 32px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 20px;
  padding: 28px;
  backdrop-filter: blur(10px);
}
.section:nth-of-type(even) .avail-wrap {
  background: rgba(0,0,0,0.025);
  border: 1px solid rgba(0,19,120,0.15);
  box-shadow: 0 4px 30px rgba(0,19,120,0.05);
}
.avail-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.section:nth-of-type(even) .avail-tabs {
  border-bottom-color: rgba(0,0,0,0.1);
}
.avail-tab {
  padding: 10px 18px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.22);
  color: var(--paper);
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s;
}
.section:nth-of-type(even) .avail-tab {
  border-color: rgba(0,0,0,0.18);
  color: var(--ink);
}
.avail-tab:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--paper);
}
.section:nth-of-type(even) .avail-tab:hover {
  background: rgba(0,19,120,0.06);
  border-color: var(--blue);
}
.avail-tab.on {
  background: var(--blue) !important;
  color: var(--paper) !important;
  border-color: var(--blue) !important;
  box-shadow: 0 6px 18px rgba(0,19,120,0.35);
}
.avail-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 18px;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.avail-legend span { display: inline-flex; align-items: center; gap: 8px; }
.avail-legend i {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.avail-legend i.d-free { background: var(--green); box-shadow: 0 0 0 3px rgba(70,152,58,0.18); }
.avail-legend i.d-busy { background: var(--blue); box-shadow: 0 0 0 3px rgba(0,19,120,0.18); }
.avail-legend i.d-taken { background: rgba(255,255,255,0.25); }
.section:nth-of-type(even) .avail-legend i.d-taken { background: rgba(0,0,0,0.2); }
.avail-legend i.d-prime { background: #ff7a3c; box-shadow: 0 0 0 3px rgba(255,122,60,0.25); }

.avail-grid {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}
.avail-cell {
  padding: 12px 10px;
  border-radius: 12px;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  transition: all 0.2s;
}
.avail-cell.head {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  padding: 8px 6px;
  font-weight: 600;
}
.section:nth-of-type(even) .avail-cell.head {
  color: rgba(0,0,0,0.55);
}
.avail-cell.head:first-child { justify-content: flex-start; }
.avail-cell.row-label {
  display: flex; flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  padding: 12px 14px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
}
.section:nth-of-type(even) .avail-cell.row-label {
  border-color: rgba(0,0,0,0.12);
}
.avail-cell.row-label .num {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 18px;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--paper);
}
.section:nth-of-type(even) .avail-cell.row-label .num { color: var(--blue); }
.avail-cell.row-label .nm {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  white-space: nowrap;
}
.section:nth-of-type(even) .avail-cell.row-label .nm {
  color: rgba(0,0,0,0.55);
}
.avail-cell.slot {
  cursor: pointer;
  border: 1px solid transparent;
  font-weight: 500;
}
.avail-cell.slot .state-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.avail-cell.slot.free {
  background: rgba(70,152,58,0.18);
  color: var(--paper);
  border-color: rgba(70,152,58,0.4);
}
.avail-cell.slot.free .state-dot { background: var(--green); }
.avail-cell.slot.free:hover {
  background: var(--green);
  transform: translateY(-1px);
}
.section:nth-of-type(even) .avail-cell.slot.free {
  background: rgba(70,152,58,0.14);
  color: var(--green);
  border-color: rgba(70,152,58,0.35);
}
.section:nth-of-type(even) .avail-cell.slot.free:hover {
  background: var(--green);
  color: var(--paper);
}
.avail-cell.slot.busy {
  background: rgba(0,19,120,0.22);
  color: var(--paper);
  border-color: rgba(0,19,120,0.4);
}
.avail-cell.slot.busy .state-dot { background: var(--blue); }
.avail-cell.slot.busy:hover {
  background: var(--blue);
  transform: translateY(-1px);
}
.section:nth-of-type(even) .avail-cell.slot.busy {
  background: rgba(0,19,120,0.12);
  color: var(--blue);
  border-color: rgba(0,19,120,0.35);
}
.section:nth-of-type(even) .avail-cell.slot.busy:hover {
  background: var(--blue);
  color: var(--paper);
}
.avail-cell.slot.taken {
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.3);
  cursor: not-allowed;
  border-color: rgba(255,255,255,0.08);
}
.avail-cell.slot.taken .state-dot { background: rgba(255,255,255,0.2); }
.section:nth-of-type(even) .avail-cell.slot.taken {
  background: rgba(0,0,0,0.04);
  color: rgba(0,0,0,0.3);
  border-color: rgba(0,0,0,0.08);
}
.avail-cell.slot.prime {
  background: rgba(255,122,60,0.14);
  color: #ff7a3c;
  border-color: rgba(255,122,60,0.4);
}
.avail-cell.slot.prime .state-dot { background: #ff7a3c; }
.avail-cell.slot.prime:hover { background: #ff7a3c; color: var(--paper); }

@media (max-width: 900px) {
  .avail-wrap { padding: 18px; }
  .avail-grid { grid-template-columns: 1fr !important; gap: 4px; }
  .avail-cell { padding: 8px; font-size: 10px; }
  .avail-cell.row-label { padding: 8px 12px; }
}

/* =========================================================
   CALENDARIO MENSUAL DE EVENTOS — rediseño
   ========================================================= */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-top: 28px;
  padding: 24px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 20px;
}
.section:nth-of-type(even) .cal-grid {
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,19,120,0.12);
  box-shadow: 0 4px 30px rgba(0,19,120,0.05);
}
.cal-day {
  aspect-ratio: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 10px;
  display: flex; flex-direction: column; justify-content: space-between;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  position: relative;
  transition: all 0.25s;
}
.section:nth-of-type(even) .cal-day {
  background: rgba(0,0,0,0.025);
  border-color: rgba(0,0,0,0.08);
  color: rgba(0,0,0,0.55);
}
.cal-day.head {
  background: transparent !important;
  border: none !important;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  aspect-ratio: auto;
  padding: 6px 4px 12px;
  align-items: center; justify-content: center;
  font-weight: 600;
  color: var(--paper);
}
.section:nth-of-type(even) .cal-day.head { color: var(--blue); }
.cal-day.has-event {
  background: rgba(70,152,58,0.14);
  border-color: rgba(70,152,58,0.4);
  color: var(--paper);
  cursor: pointer;
}
.cal-day.has-event:hover {
  background: var(--green);
  border-color: var(--green);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(70,152,58,0.3);
}
.section:nth-of-type(even) .cal-day.has-event {
  background: rgba(70,152,58,0.12);
  border-color: rgba(70,152,58,0.35);
  color: var(--ink);
}
.section:nth-of-type(even) .cal-day.has-event:hover {
  background: var(--green);
  color: var(--paper);
}
.cal-day .num {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 24px;
  color: var(--paper);
  line-height: 1;
  letter-spacing: 0.02em;
}
.cal-day.has-event .num { color: var(--paper); }
.cal-day.has-event:hover .num { color: var(--paper); }
.section:nth-of-type(even) .cal-day .num { color: var(--ink); }
.section:nth-of-type(even) .cal-day.has-event .num { color: var(--blue); }
.section:nth-of-type(even) .cal-day.has-event:hover .num { color: var(--paper); }
.cal-day .evt {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 8px;
  letter-spacing: 0.1em;
  color: var(--paper);
  text-transform: uppercase;
  line-height: 1.3;
  font-weight: 600;
  background: rgba(0,0,0,0.3);
  padding: 3px 6px;
  border-radius: 6px;
  align-self: flex-start;
}
.section:nth-of-type(even) .cal-day .evt {
  background: var(--blue);
  color: var(--paper) !important;
}
.cal-day.has-event:hover .evt {
  background: rgba(0,19,120,0.6);
}

@media (max-width: 700px) {
  .cal-grid { padding: 14px; gap: 5px; }
  .cal-day { padding: 6px; border-radius: 10px; }
  .cal-day .num { font-size: 18px; }
  .cal-day .evt { display: none; }
}

/* =========================================================
   PISTAS.html — sección de reserva (catalogo) en fondo blanco
   Aplica el mismo tratamiento que las secciones nth-of-type(even)
   ========================================================= */
.section#pistas,
.section#courts,
.section#booking {
  background: var(--paper) !important;
  color: var(--ink);
  border-top: 1px solid rgba(0,0,0,0.08) !important;
  --smoke: #000000;
  --smoke-dim: rgba(0, 0, 0, 0.75);
  --smoke-2: rgba(0, 0, 0, 0.55);
  --line: rgba(0, 0, 0, 0.1);
  --line-2: rgba(0, 0, 0, 0.2);
}
/* TARIFAS · 05: fondo verde corporativo con texto blanco */
.section#tarifas {
  background: var(--green) !important;
  color: var(--paper) !important;
  border-top: 1px solid rgba(255,255,255,0.18) !important;
}
.section#tarifas h1,
.section#tarifas h2,
.section#tarifas h3,
.section#tarifas h4,
.section#tarifas h5,
.section#tarifas .font-display,
.section#tarifas p,
.section#tarifas li,
.section#tarifas strong,
.section#tarifas span,
.section#tarifas .price-row .cell,
.section#tarifas .price-row .cell strong,
.section#tarifas .price-notes ul li,
.section#tarifas .eyebrow {
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
}
.section#tarifas .accent {
  color: var(--blue) !important;
  -webkit-text-fill-color: var(--blue) !important;
}
.section#tarifas .price-row {
  border-bottom-color: rgba(255,255,255,0.18) !important;
}
.section#tarifas .btn-outline {
  border-color: var(--paper) !important;
  color: var(--paper) !important;
  background: transparent !important;
}
/* Flecha del botón "Hazte socio": azul por defecto, blanca al hover */
.section#tarifas .btn-outline .arrow,
.section#tarifas .btn-outline .arrow svg path {
  color: var(--blue) !important;
  stroke: var(--blue) !important;
  transition: color 0.25s, stroke 0.25s;
}
.section#tarifas .btn-outline:hover {
  background: transparent !important;
  color: var(--paper) !important;
  border-color: var(--paper) !important;
}
.section#tarifas .btn-outline:hover .arrow,
.section#tarifas .btn-outline:hover .arrow svg path {
  color: var(--paper) !important;
  stroke: var(--paper) !important;
}

/* =========================================================
   ACADEMIA · LOS PROGRAMAS
   ========================================================= */
.featured-prog {
  background: var(--green) !important;
  border: 1px solid var(--green) !important;
  box-shadow: 0 24px 60px rgba(70,152,58,0.25) !important;
}
.featured-prog,
.featured-prog *,
.featured-prog .tech-head .num,
.featured-prog h3,
.featured-prog p,
.featured-prog .prog-price,
.featured-prog .prog-pricelbl,
.featured-prog .prog-tag {
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
  border-color: rgba(255,255,255,0.4) !important;
}
.featured-prog .prog-tag {
  background: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
}
.featured-prog .prog-cta {
  background: var(--paper) !important;
  color: var(--blue) !important;
  -webkit-text-fill-color: var(--blue) !important;
  border: 0 !important;
}
.featured-prog .prog-cta:hover {
  background: var(--blue) !important;
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
}

/* Estilos comunes de programas */
.prog-price {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 28px;
  line-height: 1;
  color: var(--smoke);
}
.prog-pricelbl {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--smoke-dim);
  text-transform: uppercase;
  margin-top: 4px;
}
.prog-meta {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px;
}
.prog-tag {
  padding: 6px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--smoke-dim);
  text-transform: uppercase;
}
.prog-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.25s, color 0.25s;
}
.prog-cta.ghost {
  background: rgba(245,245,245,0.06);
  color: var(--smoke);
  border: 1px solid var(--line-2);
}
.prog-cta.ghost:hover {
  background: var(--blue);
  color: var(--paper);
}
.prog-cta.solid {
  background: var(--paper);
  color: var(--blue);
  border: 0;
}

/* =========================================================
   ACADEMIA · HORARIOS (sección #horarios) fondo blanco estilo availability
   ========================================================= */
.section#horarios {
  background: var(--paper) !important;
  color: var(--ink);
  --smoke: #000000;
  --smoke-dim: rgba(0, 0, 0, 0.75);
  --smoke-2: rgba(0, 0, 0, 0.55);
  --line: rgba(0, 0, 0, 0.1);
  --line-2: rgba(0, 0, 0, 0.2);
}
.section#horarios h1,
.section#horarios h2,
.section#horarios h4,
.section#horarios h5,
.section#horarios .font-display {
  color: var(--blue) !important;
}
.section#horarios .accent {
  color: var(--green) !important;
  -webkit-text-fill-color: var(--green) !important;
}
.section#horarios .schedule-grid {
  background: var(--paper) !important;
  border: 1px solid rgba(0,19,120,0.15) !important;
  border-radius: 20px !important;
  padding: 24px !important;
  box-shadow: 0 4px 30px rgba(0,19,120,0.06);
}
.section#horarios .schedule-cell {
  background: transparent !important;
}
.section#horarios .schedule-cell.head {
  color: rgba(0,0,0,0.55) !important;
  font-weight: 600;
}
.section#horarios .schedule-cell.time {
  color: var(--blue) !important;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
}
.section#horarios .schedule-cell.cls {
  background: rgba(0,19,120,0.05) !important;
  border: 1px solid rgba(0,19,120,0.2) !important;
  border-radius: 10px !important;
  padding: 8px !important;
}
.section#horarios .schedule-cell.cls .cls-name { color: var(--blue) !important; }
.section#horarios .schedule-cell.cls .cls-coach { color: rgba(0,0,0,0.65) !important; }
.section#horarios .schedule-cell.cls .cls-tag.full { color: rgba(0,0,0,0.4) !important; }
.section#horarios .schedule-cell.cls .cls-tag.few { color: #ff7a3c !important; }
.section#horarios .schedule-cell.cls .cls-tag.open { color: var(--green) !important; }
.section#horarios .btn-outline {
  border: 1px solid var(--blue) !important;
  color: var(--blue) !important;
  background: transparent !important;
}
.section#horarios .btn-outline:hover {
  background: var(--blue) !important;
  color: var(--paper) !important;
}

/* =========================================================
   SOCIAL · DESTACADO (event-feature) — texto siempre blanco
   ========================================================= */
.event-feature,
.event-feature * {
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
}
.event-feature .info-row .k {
  color: rgba(255,255,255,0.65) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.65) !important;
}
.event-feature .live-tag {
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.3);
  color: var(--paper) !important;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.event-feature .live-tag.tag-blue {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
}
.event-feature .countdown,
.event-feature .countdown * {
  color: var(--paper) !important;
}

/* =========================================================
   SOCIAL · FILTRO de PRÓXIMOS (filter-tabs)
   ========================================================= */
.filter-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  padding: 6px;
  width: fit-content;
}
.filter-tab {
  padding: 10px 18px;
  border-radius: 999px;
  background: transparent;
  border: 0;
  color: var(--paper);
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s;
}
.filter-tab:hover { background: rgba(255,255,255,0.1); }
.filter-tab.active {
  background: var(--blue);
  color: var(--paper);
  box-shadow: 0 6px 18px rgba(0,19,120,0.35);
}

/* PRÓXIMOS event cards: todo el texto en blanco (van sobre imagen) */
.section#proximos .event-card,
.section#proximos .event-card *,
.section#proximos .event-card h3,
.section#proximos .event-card .cat,
.section#proximos .event-card .meta-row span,
.section#proximos .event-card .meta-row strong,
.section#proximos .event-card .date-block,
.section#proximos .event-card .date-block *,
.section#proximos .event-card .ticket-pill {
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
}
.section#proximos .event-card .ticket-pill {
  background: var(--blue) !important;
  border: 0 !important;
}
.section#proximos .event-card .date-block {
  background: rgba(0,0,0,0.55) !important;
  border: 1px solid rgba(255,255,255,0.25);
}

/* =========================================================
   SOCIAL · CALENDARIO (cal-months) — múltiples meses
   ========================================================= */
/* Calendario único con navegación — full-width del container */
.cal-single {
  background: rgba(0,19,120,0.03);
  border: 1px solid rgba(0,19,120,0.15);
  border-radius: 20px;
  padding: 32px;
  margin-top: 24px;
  width: 100%;
  box-shadow: 0 4px 30px rgba(0,19,120,0.06);
}
.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(0,19,120,0.15);
}
.cal-month-title {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: clamp(28px, 3.5vw, 44px);
  letter-spacing: 0.02em;
  color: var(--blue);
  text-transform: uppercase;
  margin: 0;
  text-align: center;
  flex: 1;
}
.cal-nav {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--blue);
  color: var(--blue);
  font-size: 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s, color 0.25s, transform 0.2s;
}
.cal-nav:hover {
  background: var(--blue);
  color: var(--paper);
  transform: translateY(-1px);
}
.cal-single .cal-grid {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  gap: 8px;
}
.cal-single .cal-day {
  min-height: 110px;
}
.cal-empty { visibility: hidden; }

/* =========================================================
   SUSCRIPCIONES · VENTAJAS (ben-card)
   ========================================================= */
.ben-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 24px;
  overflow: hidden;
  transition: border-color 0.3s, transform 0.3s;
}
.ben-card:hover { border-color: var(--green); }
.section:nth-of-type(even) .ben-card {
  background: rgba(0,19,120,0.03);
  border-color: rgba(0,19,120,0.15);
}
.ben-img {
  position: relative;
  aspect-ratio: 16/9;
}
.ben-body { padding: 28px; }
.ben-num {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--smoke-dim);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.ben-card h3 {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 28px;
  line-height: 1;
  margin: 0 0 10px;
  color: var(--smoke);
}
.section:nth-of-type(even) .ben-card h3 { color: var(--blue); }
.ben-card p {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--smoke-dim);
  margin: 0;
}
@media (max-width: 900px) { .ben-grid { grid-template-columns: 1fr !important; } }

/* =========================================================
   SUSCRIPCIONES · LAS HISTORIAS (story-card)
   ========================================================= */
.stories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .stories-grid { grid-template-columns: 1fr !important; } }
.story-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 24px;
  overflow: hidden;
}
.section:nth-of-type(even) .story-card {
  background: rgba(0,19,120,0.03);
  border-color: rgba(0,19,120,0.15);
}
.story-featured {
  background: var(--green) !important;
  border: 1px solid var(--green) !important;
  box-shadow: 0 24px 60px rgba(70,152,58,0.25);
}
.story-featured,
.story-featured .story-quote,
.story-featured .story-name,
.story-featured .story-role,
.story-featured .story-plan {
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
}
.story-img {
  position: relative;
  aspect-ratio: 4/3;
}
.story-body { padding: 32px; }
.story-plan {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(245,245,245,0.06);
  color: var(--smoke);
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.section:nth-of-type(even) .story-plan {
  background: rgba(0,19,120,0.08);
  color: var(--blue);
}
.story-featured .story-plan {
  background: var(--paper) !important;
  color: var(--green) !important;
  -webkit-text-fill-color: var(--green) !important;
}
.story-quote {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--smoke);
  margin-bottom: 24px;
  font-weight: 300;
}
.section:nth-of-type(even) .story-quote { color: var(--ink); }
.story-person {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.story-featured .story-person { border-top-color: rgba(255,255,255,0.3); }
.story-av {
  width: 40px; height: 40px;
  border-radius: 50%;
}
.story-name {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--smoke);
}
.section:nth-of-type(even) .story-name { color: var(--ink); }
.story-role {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--smoke-dim);
  text-transform: uppercase;
  margin-top: 4px;
}

/* =========================================================
   SUSCRIPCIONES · ENTRAR (step-card)
   ========================================================= */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 900px) { .steps-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 560px) { .steps-grid { grid-template-columns: 1fr !important; } }
.step-card {
  padding: 28px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 16px;
  position: relative;
}
.section:nth-of-type(even) .step-card {
  background: rgba(0,19,120,0.03);
  border-color: rgba(0,19,120,0.15);
}
.step-num {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 60px;
  line-height: 0.85;
  color: var(--green);
}
.section:nth-of-type(even) .step-num { color: var(--green); }
.step-card h4 {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 26px;
  margin-top: 14px;
  margin-bottom: 10px;
  color: var(--smoke);
}
.section:nth-of-type(even) .step-card h4 { color: var(--blue); }
.step-card p {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 13px;
  color: var(--smoke-dim);
  line-height: 1.55;
  margin: 0;
}

/* =========================================================
   SUSCRIPCIONES · COMPARE TABLE — fix colores
   ========================================================= */
.section:nth-of-type(even) .compare-table .compare-row.head .cell {
  color: var(--blue);
  background: rgba(0,19,120,0.05);
}
.section:nth-of-type(even) .compare-table .cell.featured {
  background: rgba(70,152,58,0.08);
  color: var(--green) !important;
  font-weight: 600;
}
.section:nth-of-type(even) .compare-table .compare-row.head .cell.featured {
  background: var(--green);
  color: var(--paper) !important;
}
.section:nth-of-type(even) .compare-table .cell.label {
  color: var(--ink);
}

/* =========================================================
   SUSCRIPCIONES (#planes) · Plan destacado (PLAYER) en BLANCO
   ========================================================= */
#planes .price-card.featured {
  background: var(--paper) !important;
  border: 2px solid var(--green) !important;
  box-shadow: 0 30px 80px rgba(70,152,58,0.18) !important;
}
/* Forzar a NEGRO/AZUL todo el texto que mi rule anterior pintaba en blanco */
#planes .price-card.featured,
#planes .price-card.featured *,
#planes .price-card.featured .lead,
#planes .price-card.featured ul li,
#planes .price-card.featured .price,
#planes .price-card.featured .price * {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
}
#planes .price-card.featured .name {
  color: var(--blue) !important;
  -webkit-text-fill-color: var(--blue) !important;
}
#planes .price-card.featured .price,
#planes .price-card.featured .price span:not(.cur):not(.per) {
  color: var(--blue) !important;
  -webkit-text-fill-color: var(--blue) !important;
}
#planes .price-card.featured .accent {
  color: var(--green) !important;
  -webkit-text-fill-color: var(--green) !important;
}
/* Tag "MÁS POPULAR" → verde con texto blanco */
#planes .price-card.featured .tag {
  background: var(--green) !important;
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
}
/* CTA del plan destacado → verde sólido con texto blanco. Hover → azul */
#planes .price-card.featured .cta,
#planes .price-card.featured .cta.solid {
  background: var(--green) !important;
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
  border: 0 !important;
}
#planes .price-card.featured .cta:hover,
#planes .price-card.featured .cta.solid:hover {
  background: var(--blue) !important;
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
}
/* Bullets del listado → verde */
#planes .price-card.featured ul li::before {
  color: var(--green) !important;
}

/* =========================================================
   SOCIOS · REPASO DE CONTRASTE — secciones blancas
   ========================================================= */

/* COMPARAR · 03 (#comparar) — fondo blanco, texto oscuro/azul */
.section#comparar .compare-table {
  background: var(--paper) !important;
  border: 1px solid rgba(0,19,120,0.15) !important;
  box-shadow: 0 4px 30px rgba(0,19,120,0.06);
  margin-top: 24px;
}
.section#comparar .compare-row .cell {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  border-bottom: 1px solid rgba(0,19,120,0.12) !important;
  background: transparent !important;
}
.section#comparar .compare-row.head .cell {
  background: rgba(0,19,120,0.06) !important;
  color: var(--blue) !important;
  -webkit-text-fill-color: var(--blue) !important;
  font-weight: 600;
}
.section#comparar .compare-row.head .cell.featured {
  background: var(--green) !important;
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
}
.section#comparar .compare-row .cell.featured {
  background: rgba(70,152,58,0.08) !important;
  color: var(--green) !important;
  -webkit-text-fill-color: var(--green) !important;
  font-weight: 700;
}
.section#comparar .compare-row .cell.label {
  background: rgba(0,0,0,0.025) !important;
  color: rgba(0,0,0,0.7) !important;
  -webkit-text-fill-color: rgba(0,0,0,0.7) !important;
}
.section#comparar .compare-row .cell .check {
  background: rgba(70,152,58,0.15) !important;
  border: 1px solid rgba(70,152,58,0.5) !important;
}
.section#comparar .compare-row .cell .check::after {
  border-left-color: var(--green) !important;
  border-bottom-color: var(--green) !important;
}
.section#comparar .compare-row .cell .dash {
  background: rgba(0,0,0,0.3) !important;
}

/* VENTAJAS · 04 (#ventajas) — sección verde · cards más legibles */
.section#ventajas .ben-card {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
}
.section#ventajas .ben-card h3 { color: var(--paper) !important; }
.section#ventajas .ben-card p { color: rgba(255,255,255,0.82) !important; }
.section#ventajas .ben-card .ben-num { color: rgba(255,255,255,0.65) !important; }

/* LAS HISTORIAS · 05 (#historias) — fondo blanco · texto oscuro */
.section#historias .story-card:not(.story-featured) {
  background: var(--paper) !important;
  border: 1px solid rgba(0,19,120,0.12) !important;
  box-shadow: 0 4px 24px rgba(0,19,120,0.05);
}
.section#historias .story-card:not(.story-featured) .story-quote {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
}
.section#historias .story-card:not(.story-featured) .story-name {
  color: var(--blue) !important;
  -webkit-text-fill-color: var(--blue) !important;
}
.section#historias .story-card:not(.story-featured) .story-role {
  color: rgba(0,0,0,0.6) !important;
  -webkit-text-fill-color: rgba(0,0,0,0.6) !important;
}
.section#historias .story-card:not(.story-featured) .story-plan {
  background: rgba(0,19,120,0.1) !important;
  color: var(--blue) !important;
  -webkit-text-fill-color: var(--blue) !important;
}
.section#historias .story-card:not(.story-featured) .story-person {
  border-top: 1px solid rgba(0,0,0,0.1) !important;
}

/* ENTRAR · 06 (#onboarding) — sección verde · cards de pasos */
.section#onboarding .step-card {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
}
.section#onboarding .step-card .step-num {
  color: var(--paper) !important;
}
.section#onboarding .step-card h4 { color: var(--paper) !important; }
.section#onboarding .step-card p { color: rgba(255,255,255,0.82) !important; }

/* =========================================================
   CLUB · REPASO DE CONTRASTE
   ========================================================= */
/* LA HISTORIA · 02 (#historia) — sección blanca · note-block */
.section#historia { /* blanca por nth-of-type(even) */ }
.section#historia .note-block blockquote {
  color: var(--blue) !important;
}
.section#historia .note-block blockquote .accent {
  color: var(--green) !important;
  -webkit-text-fill-color: var(--green) !important;
}
.section#historia .note-block p {
  color: var(--ink) !important;
}
.section#historia .note-block .sig {
  color: var(--blue) !important;
}
.section#historia .note-block .sig small {
  color: rgba(0,0,0,0.55) !important;
}

/* LOS ESPACIOS · 03 (#espacios) — sección verde · cards sobre imagen */
.section#espacios .space-card,
.section#espacios .space-card * {
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
}
.section#espacios .space-card .floor {
  color: rgba(255,255,255,0.7) !important;
}

/* EL ENTORNO · 04 (#entorno) — sección blanca */
.section#entorno .hero-stat .n { color: var(--blue) !important; }
.section#entorno .hero-stat .l { color: rgba(0,0,0,0.6) !important; }

/* LOS VALORES · 05 (#valores) — sección verde · tech-cards blancos translúcidos */
.section#valores .tech-card {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
}
.section#valores .tech-card .num { color: var(--paper) !important; }
.section#valores .tech-card h3 { color: var(--paper) !important; }
.section#valores .tech-card p { color: rgba(255,255,255,0.85) !important; }

/* =========================================================
   ACADEMIA · REPASO DE CONTRASTE
   ========================================================= */
/* El equipo (#coaches) — sección verde · coach-detail */
.section#coaches .coach-detail h3,
.section#coaches .coach-detail .role,
.section#coaches .coach-detail .num,
.section#coaches .coach-detail .bio,
.section#coaches .coach-detail .meta-grid .v,
.section#coaches .coach-detail .meta-grid .k,
.section#coaches .coach-detail .specs span {
  color: var(--paper) !important;
}
.section#coaches .coach-detail .role { color: var(--green) !important; }
.section#coaches .coach-detail .bio { color: rgba(255,255,255,0.85) !important; }
.section#coaches .coach-detail .meta-grid .k { color: rgba(255,255,255,0.65) !important; }
.section#coaches .coach-detail .specs span {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
}

/* =========================================================
   SOCIAL · REPASO DE CONTRASTE
   ========================================================= */
/* Partners (#artistas) — sección verde · collab-card */
.section#artistas .collab-card .role,
.section#artistas .collab-card .name,
.section#artistas .collab-card .when {
  color: var(--paper) !important;
}
.section#artistas .collab-card .role { color: var(--green) !important; }
.section#artistas .collab-card .when { color: rgba(255,255,255,0.75) !important; }

/* Pasados (#pasados) — galería blanca · gal-tag visibles */
.section#pasados .gal-tag {
  background: var(--paper) !important;
  color: var(--blue) !important;
  border: 1px solid rgba(0,19,120,0.2);
}

/* =========================================================
   RESPONSIVE · PASADA GENERAL PARA MÓVIL
   ========================================================= */

/* TODOS los acentos nowrap → permitir salto en móvil */
@media (max-width: 900px) {
  .accent.nowrap {
    white-space: normal !important;
    display: inline !important;
    font-size: clamp(30px, 8vw, 56px) !important;
  }
}

/* HERO + PAGE-HERO: padding, tipos y espaciado */
@media (max-width: 900px) {
  .hero { padding: 100px 0 60px !important; min-height: auto !important; }
  .page-hero { padding: 110px 0 60px !important; min-height: auto !important; }
  .hero .container,
  .page-hero .container {
    padding: 0 20px !important;
  }
  .hero-title, .page-hero-title {
    font-size: clamp(40px, 11vw, 80px) !important;
    line-height: 0.95 !important;
    margin-bottom: 20px !important;
  }
  .hero-sub, .page-hero-sub {
    font-size: 14px !important;
    max-width: 100% !important;
  }
  .hero-cta, .page-hero-cta {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }
  .hero-cta .btn, .page-hero-cta .btn {
    justify-content: center;
  }
  /* Stats del hero/page-hero más compactas */
  .hero-stats-inline {
    gap: 24px !important;
    margin-top: 28px !important;
    padding-top: 24px !important;
  }
  .hero-stats-inline .hero-stat .n { font-size: 28px !important; }
  .hero-stats-inline .hero-stat .l { font-size: 9px !important; }
  /* page-hero stats grid - stack 2x2 */
  .page-hero-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  .page-hero-stats .hero-stat .n { font-size: 26px !important; }
  .page-hero-stats .hero-stat .l { font-size: 9px !important; }
}

/* SECTION HEAD: tipo más compacta */
@media (max-width: 900px) {
  .section { padding: 60px 0 !important; }
  .section-head h2, .section-head h3 {
    font-size: clamp(32px, 8vw, 56px) !important;
    line-height: 1 !important;
  }
  .section-head p {
    font-size: 14px !important;
  }
  .section-head .action {
    margin-top: 16px;
  }
}

/* SECTION HEAD action button → ancho completo */
@media (max-width: 600px) {
  .section-head { display: block !important; }
  .section-head .action,
  .section-head .action .btn {
    display: flex !important;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
  }
}

/* EXP-GRID (Club experience) → 1 columna */
@media (max-width: 900px) {
  .exp-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .exp-card { min-height: 280px !important; }
  .exp-mini { grid-template-columns: 1fr !important; }
}

/* SPACES BENTO (página Club) → 1 columna ordenada */
@media (max-width: 900px) {
  .spaces-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: 280px !important;
    gap: 12px !important;
  }
  .space-card { grid-column: auto !important; grid-row: auto !important; }
}

/* COACH DETAIL → vertical en móvil */
@media (max-width: 900px) {
  .coach-detail {
    flex-direction: column !important;
    gap: 24px !important;
    padding: 0 !important;
  }
  .coach-detail .img-wrap {
    width: 100% !important;
    aspect-ratio: 4/3 !important;
  }
  .coach-detail h3 { font-size: 32px !important; }
  .coach-detail .role { font-size: 11px !important; }
  .coach-detail .bio { font-size: 14px !important; }
  .coach-detail .meta-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }
  .coach-detail .specs { flex-wrap: wrap; gap: 6px; }
}

/* TECH GRID y CARDS de programas/valores → 1 col */
@media (max-width: 900px) {
  .tech-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .tech-card { padding: 24px !important; }
  .tech-card h3 { font-size: 22px !important; }
  .tech-card p { font-size: 13px !important; }
  .prog-grid { grid-template-columns: 1fr !important; }
}

/* COMPARE TABLE → scroll horizontal y nombres más cortos */
@media (max-width: 720px) {
  .compare-table {
    overflow-x: auto;
  }
  .compare-row {
    grid-template-columns: 140px repeat(3, 110px) !important;
    min-width: 470px;
  }
  .compare-row .cell {
    padding: 12px 10px !important;
    font-size: 11px !important;
  }
  .compare-row .cell.label { font-size: 9px !important; }
}

/* PRICING TOGGLE + GRID → tighter */
@media (max-width: 900px) {
  .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .pricing-toggle { width: 100%; justify-content: center; }
  .pricing-toggle button {
    flex: 1;
    padding: 10px 14px !important;
    font-size: 12px !important;
  }
}

/* SCHEDULE GRID (academia) → scroll horizontal */
@media (max-width: 900px) {
  .schedule-grid {
    overflow-x: auto;
    grid-template-columns: 80px repeat(7, 1fr) !important;
    min-width: 720px;
  }
  .schedule-cell { padding: 8px !important; font-size: 10px !important; }
  .schedule-cell.time { font-size: 14px !important; }
}

/* AVAILABILITY GRID (pistas) → scroll horizontal cuidadoso */
@media (max-width: 900px) {
  .avail-wrap { padding: 16px !important; }
  .avail-wrap > .avail-grid {
    overflow-x: auto;
    grid-template-columns: 140px repeat(8, minmax(80px, 1fr)) !important;
    min-width: 800px;
  }
  .avail-tab {
    padding: 8px 14px !important;
    font-size: 11px !important;
  }
}

/* MONTH CALENDAR (single) → más compacto */
@media (max-width: 700px) {
  .cal-single { padding: 18px !important; }
  .cal-single .cal-day { min-height: 60px !important; }
  .cal-single .cal-day .num { font-size: 16px !important; }
  .cal-single .cal-day .evt { display: none; }
  .cal-month-title { font-size: 22px !important; }
  .cal-nav { width: 36px !important; height: 36px !important; font-size: 16px !important; }
}

/* FILTER TABS (eventos) → scroll horizontal */
@media (max-width: 700px) {
  .filter-tabs {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
  }
  .filter-tab {
    flex-shrink: 0;
    padding: 8px 14px !important;
    font-size: 11px !important;
  }
}

/* EVENTS WRAP (próximos) → 1 col */
@media (max-width: 900px) {
  .events-wrap {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .event-card { min-height: 420px !important; }
}

/* EVENT FEATURE (destacado) → stack vertical */
@media (max-width: 900px) {
  .event-feature .inner {
    padding: 24px !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .event-feature h3 { font-size: 32px !important; }
  .event-feature .lede { font-size: 14px !important; }
  .event-feature .info-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .event-feature .actions {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }
  .event-feature .actions .btn { justify-content: center; }
}

/* GALLERY → 2 col en móvil */
@media (max-width: 900px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: 180px !important;
  }
  .gallery .gal-item { grid-column: auto !important; grid-row: auto !important; }
}
@media (max-width: 480px) {
  .gallery {
    grid-template-columns: 1fr !important;
    grid-auto-rows: 220px !important;
  }
}

/* STORIES (socios) y BENEFITS → 1 col */
@media (max-width: 900px) {
  .stories-grid { grid-template-columns: 1fr !important; }
  .ben-grid { grid-template-columns: 1fr !important; }
}

/* NOTE BLOCK (club historia) → stack vertical */
@media (max-width: 900px) {
  .note-block {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .note-block .img-wrap { aspect-ratio: 4/3; max-height: 320px; }
  .note-block blockquote { font-size: 22px !important; }
}

/* TARIFAS / price-table → scroll horizontal */
@media (max-width: 720px) {
  .price-table {
    overflow-x: auto;
  }
  .price-row {
    grid-template-columns: 1.4fr 1fr 1fr !important;
    min-width: 480px;
  }
}

/* FOOTER CTA → stack vertical */
@media (max-width: 900px) {
  .footer-cta {
    grid-template-columns: 1fr !important;
    padding: 40px 28px !important;
    gap: 28px !important;
  }
  .footer-cta h2 { font-size: 36px !important; }
}

/* FLOATING CARDS del hero → ocultas en cualquier móvil */
@media (max-width: 900px) {
  .float-card-event,
  .float-card-weather,
  .float-card-1,
  .float-card-2,
  .float-card-3 {
    display: none !important;
  }
}

/* COURTS-CAROUSEL ya manejado, pero refuerzo padding */
@media (max-width: 600px) {
  .courts-carousel { padding-left: 4px; padding-right: 4px; }
}

/* APPLY CTA (academia EMPIEZA HOY) → stack */
@media (max-width: 900px) {
  #apply .footer-cta {
    grid-template-columns: 1fr !important;
    padding: 36px 24px !important;
  }
  #apply .footer-cta h2 { font-size: 36px !important; }
}

/* APPLY FLOW (socios entrar) ya stack en 560px → asegurar también en 720 */
@media (max-width: 720px) {
  .steps-grid { grid-template-columns: 1fr !important; }
}

/* COLLABS-GRID (partners) → 2 col en móvil grande, 1 en pequeño */
@media (max-width: 900px) {
  .collabs-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
}
@media (max-width: 500px) {
  .collabs-grid { grid-template-columns: 1fr !important; }
}

/* ARCH-GRID (club entorno) → stack */
@media (max-width: 900px) {
  .arch-grid { grid-template-columns: 1fr !important; }
  .arch-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
}

/* CONTAINER padding lateral en móvil */
@media (max-width: 600px) {
  .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* =========================================================
   RESPONSIVE · SEGUNDA PASADA · arreglos finos
   ========================================================= */

/* ===== NAVBAR · móvil ===== */
@media (max-width: 900px) {
  .navbar { padding: 14px 0 !important; }
  .navbar .container { padding: 0 16px !important; }
  .logo-img { height: 36px !important; max-width: 180px !important; }
  .navbar.scrolled { padding: 10px 0 !important; }
}

/* ===== CALENDAR · arreglos en móvil ===== */
@media (max-width: 700px) {
  .cal-single {
    margin-top: 16px;
    padding: 14px !important;
    border-radius: 16px;
  }
  .cal-header {
    margin-bottom: 14px;
    padding-bottom: 12px;
    gap: 8px;
  }
  .cal-month-title { font-size: 18px !important; letter-spacing: 0.01em; }
  .cal-nav { width: 36px !important; height: 36px !important; font-size: 16px !important; }
  .cal-single .cal-grid { gap: 4px !important; }
  .cal-single .cal-day {
    min-height: 44px !important;
    padding: 4px !important;
    border-radius: 8px !important;
  }
  .cal-single .cal-day.head {
    min-height: auto !important;
    padding: 4px 0 8px !important;
    font-size: 9px !important;
  }
  .cal-single .cal-day .num { font-size: 13px !important; }
  /* En vez de ocultar la etiqueta del evento, mostramos un puntito */
  .cal-single .cal-day .evt {
    display: block !important;
    background: transparent !important;
    color: transparent !important;
    padding: 0 !important;
    margin-top: 2px;
    height: 4px;
    width: 4px;
    border-radius: 50%;
    align-self: center;
    overflow: hidden;
  }
  .cal-single .cal-day.has-event .evt {
    background: var(--paper) !important;
  }
  .section:nth-of-type(even) .cal-single .cal-day.has-event .evt,
  .section#calendario .cal-single .cal-day.has-event .evt {
    background: var(--green) !important;
  }
}
@media (max-width: 380px) {
  .cal-single .cal-day { min-height: 38px !important; }
  .cal-single .cal-day .num { font-size: 12px !important; }
}

/* ===== FOOTER · arreglos en móvil ===== */
@media (max-width: 900px) {
  .footer { padding-top: 60px; }
  .footer-grid {
    padding: 40px 0 28px !important;
    gap: 32px !important;
  }
  .footer-col h5 { font-size: 16px; margin-bottom: 12px; }
  .footer-col p, .footer-col li, .footer-col a { font-size: 13px; }
  /* Horas: bajar texto y prevenir overflow */
  .footer-hours li {
    font-size: 13px;
    gap: 8px;
  }
  /* Newsletter form en mobile: stack vertical */
  .newsletter {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .newsletter input,
  .newsletter button {
    width: 100% !important;
    text-align: center;
  }
  /* Footer bottom: stack en móvil */
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
    padding: 20px 0 !important;
    font-size: 10px !important;
  }
  /* Address link rompe bien */
  .footer-address-link {
    font-size: 13px !important;
    word-break: break-word;
  }
}
@media (max-width: 480px) {
  .footer-grid { gap: 28px !important; }
  /* Permitir que líneas largas (emails, etc.) corten */
  .footer-col a, .footer-col li, .footer-col p {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

/* ===== HERO STATS INLINE más compactas en móvil pequeño ===== */
@media (max-width: 480px) {
  .hero-stats-inline {
    gap: 16px !important;
    max-width: 100% !important;
  }
  .hero-stats-inline .hero-stat {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
  }
  .hero-stats-inline .hero-stat .n { font-size: 24px !important; }
  .hero-stats-inline .hero-stat .l { font-size: 8px !important; letter-spacing: 0.12em !important; }
}

/* ===== Buttons en móvil pequeño: que no rebasen ===== */
@media (max-width: 480px) {
  .btn {
    padding: 14px 20px !important;
    font-size: 12px !important;
    white-space: normal !important;
  }
  .btn .arrow { transform: scale(0.85); }
}

/* ===== Bigmark / footer text · evitar desbordes ===== */
@media (max-width: 900px) {
  .footer-grid h5 + ul li {
    font-size: 12px;
  }
}

/* ===== SCHEDULE GRID academia: scroll suave + indicador ===== */
@media (max-width: 900px) {
  .section#horarios .schedule-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .section#horarios .schedule-grid::-webkit-scrollbar { height: 4px; }
  .section#horarios .schedule-grid::-webkit-scrollbar-thumb {
    background: rgba(0,19,120,0.3);
    border-radius: 999px;
  }
}

/* ===== COMPARE TABLE: scroll suave + indicador ===== */
@media (max-width: 720px) {
  .section#comparar .compare-table {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .section#comparar .compare-table::-webkit-scrollbar { height: 4px; }
  .section#comparar .compare-table::-webkit-scrollbar-thumb {
    background: rgba(0,19,120,0.3);
    border-radius: 999px;
  }
}

/* ===== EVENT CARDS: prevenir desborde de info-row ===== */
@media (max-width: 600px) {
  .event-card .meta-row span {
    font-size: 11px !important;
    word-break: break-word;
  }
  .event-card h3 { font-size: 24px !important; }
  .event-card .ticket-pill {
    font-size: 10px !important;
    padding: 6px 10px !important;
  }
}

/* ===== STORY CARDS (socios): textos más compactos ===== */
@media (max-width: 600px) {
  .story-quote { font-size: 14px !important; }
  .story-body { padding: 24px !important; }
}

/* ===== COURT CARDS: por debajo de 380px ajustar tamaños finales ===== */
@media (max-width: 380px) {
  .court-card h3 { font-size: 18px !important; }
  .court-card .spec { font-size: 8px !important; }
  .court-card .court-num { font-size: 32px !important; }
}

/* ===== MOBILE-CTA fija: no tapar texto del final ===== */
@media (max-width: 600px) {
  body { padding-bottom: 70px; }
  .mobile-cta {
    bottom: 12px !important;
    right: 12px !important;
    left: 12px !important;
    text-align: center;
    padding: 14px 18px !important;
    font-size: 12px !important;
  }
}

/* ===== HERO-EYEBROW (kicker) ya oculto pero por si reaparece ===== */
@media (max-width: 900px) {
  .hero-eyebrow .eyebrow {
    font-size: 9px !important;
    letter-spacing: 0.14em !important;
  }
}

/* ===== Anchor jump offset: que la navbar no oculte títulos al hacer scroll a #id ===== */
@media (max-width: 900px) {
  section[id],
  div[id] {
    scroll-margin-top: 80px;
  }
}

/* ===== Texto base más legible en móvil ===== */
@media (max-width: 480px) {
  html, body { font-size: 15px; }
}

/* =========================================================
   TIPOGRAFÍA · Display (antes Anton) ahora Google Sans Flex bold
   ========================================================= */
.font-display,
.hero-title,
.page-hero-title,
.section-head h2,
.section-head h3,
.hero-stats-inline .hero-stat .n,
.hero-stat .n,
.stat-row .stat .num,
.court-card h3,
.court-card .court-num,
.exp-card h3,
.event-card h3,
.event-feature h3,
.coach-card .name,
.coach-detail h3,
.tech-card h3,
.tech-stat .n,
.prog-price,
.cal-month-title,
.cal-day .num,
.price-card .name,
.price-card .price,
.price-card .price *,
.faq-item .q h4,
.collab-card .name,
.gal-tag,
.test-card .name,
.travel-card h4,
.step-card .step-num,
.step-card h4,
.ben-card h3,
.logo-text {
  font-family: 'Google Sans Flex', system-ui, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.005em;
}
/* Stats grandes con peso máximo */
.hero-stats-inline .hero-stat .n,
.stat-row .stat .num,
.hero-stat .n,
.tech-stat .n {
  font-weight: 900 !important;
}

/* =========================================================
   GOOGLE TRANSLATE — ocultar UI por defecto + botón propio ES/EN
   ========================================================= */
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
.skiptranslate iframe,
.goog-te-gadget,
.VIpgJd-ZVi9od-ORHb-OEVmcd { display: none !important; }
body { top: 0 !important; position: static !important; }
font[style*="background-color"] { background: transparent !important; box-shadow: none !important; }
/* Botón de cambio de idioma en navbar */
.lang-toggle {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.4);
  background: transparent;
  color: var(--paper);
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
  min-width: 44px;
  text-align: center;
}
.lang-toggle:hover {
  background: var(--paper);
  color: var(--blue);
  border-color: var(--paper);
}
@media (max-width: 900px) {
  .lang-toggle {
    padding: 6px 10px;
    font-size: 10px;
    min-width: 38px;
  }
}

/* =========================================================
   MEMBERSHIP · CARRUSEL DE PLANES EN MÓVIL
   ========================================================= */
.pricing-carousel-wrap {
  position: relative;
}
/* Botones de navegación: ocultos por defecto (desktop) */
.pricing-nav {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--green);
  color: var(--green);
  font-size: 20px;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.pricing-nav:hover {
  background: var(--green);
  color: var(--paper);
}
.pricing-nav:active {
  transform: translateY(-50%) scale(0.95);
}
.pricing-nav.prev { left: 4px; }
.pricing-nav.next { right: 4px; }

@media (max-width: 768px) {
  .pricing-nav {
    display: inline-flex !important;
  }
  /* Grid → carrusel horizontal */
  .pricing-grid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    gap: 16px !important;
    /* padding lateral para que la primera y última card no toquen el borde
       y se vea la card centrada */
    padding: 20px 8% 24px !important;
    margin: 0 -20px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pricing-grid::-webkit-scrollbar { display: none; }
  .pricing-grid .price-card {
    flex: 0 0 84% !important;
    scroll-snap-align: center;
    min-width: 0;
    margin: 0 !important;
  }
}

/* =========================================================
   FOOTER ACCORDION (móvil)
   ========================================================= */
/* Por defecto en escritorio: <details> abiertos sin cabecera plegable */
.footer-acc { display: block; }
.footer-acc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  cursor: default;
}
.footer-acc summary::-webkit-details-marker { display: none; }
.footer-acc summary h5 { margin: 0; }
.footer-acc .chev { display: none; }

/* En escritorio el contenido está siempre visible */
@media (min-width: 700px) {
  .footer-acc[open] summary,
  .footer-acc:not([open]) summary { cursor: default; }
  .footer-acc > :not(summary) { display: block; }
  /* Forzar contenido visible aunque el details esté cerrado */
  .footer-acc:not([open]) > :not(summary) { display: block; }
}

/* En móvil: comportamiento accordion */
@media (max-width: 699px) {
  /* Reorganizar footer-grid en una sola columna apilada */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 32px 0 24px !important;
  }
  /* Brand column siempre visible arriba */
  .footer-brand {
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    margin-bottom: 8px;
  }
  /* Cada acordeón con borde inferior */
  .footer-acc {
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  .footer-acc summary {
    padding: 18px 0;
    cursor: pointer;
  }
  .footer-acc summary h5 {
    font-size: 16px !important;
    color: var(--paper);
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }
  .footer-acc .chev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.3);
    color: var(--paper);
    font-size: 14px;
    flex-shrink: 0;
    transition: transform 0.3s, background 0.3s;
  }
  .footer-acc[open] .chev {
    transform: rotate(45deg);
    background: var(--paper);
    color: var(--blue);
  }
  /* Contenido dentro del details (todo lo que no es summary) */
  .footer-acc > :not(summary) {
    padding-bottom: 18px;
    margin-top: 0 !important;
  }
  .footer-acc ul {
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .footer-acc ul li {
    padding: 6px 0;
    font-size: 14px;
  }
  /* Newsletter dentro de acordeón: layout vertical limpio */
  .footer-newsletter > p {
    margin: 0 0 14px !important;
    padding: 0 0 8px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: rgba(255,255,255,0.78) !important;
  }
  .footer-newsletter .newsletter {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100%;
    padding: 0 0 18px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  .footer-newsletter .newsletter input {
    width: 100% !important;
    padding: 14px 18px !important;
    font-size: 14px !important;
    border-radius: 999px !important;
    text-align: left !important;
    box-sizing: border-box;
    background: rgba(255,255,255,0.12) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    color: var(--paper) !important;
    -webkit-text-fill-color: var(--paper) !important;
  }
  .footer-newsletter .newsletter input::placeholder {
    color: rgba(255,255,255,0.55) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.55) !important;
  }
  .footer-newsletter .newsletter button {
    width: 100% !important;
    padding: 14px !important;
    font-size: 13px !important;
    border-radius: 999px !important;
    text-align: center !important;
    box-sizing: border-box;
    background: var(--paper) !important;
    color: var(--green) !important;
    border: 0 !important;
  }
}

/* =========================================================
   "VER MÁS" — Ocultar contenido extra solo en MÓVIL
   ========================================================= */
.show-more-btn {
  display: none;
  margin: 16px auto 0;
  padding: 12px 24px;
  border: 1px solid currentColor;
  background: transparent;
  border-radius: 999px;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.show-more-btn:hover {
  background: currentColor;
}
.show-more-btn:hover {
  color: var(--paper);
}
/* Color del botón según fondo de sección */
.section:nth-of-type(odd) .show-more-btn { color: var(--paper); }
.section:nth-of-type(odd) .show-more-btn:hover { background: var(--paper); color: var(--blue); }
.section:nth-of-type(even) .show-more-btn { color: var(--blue); }
.section:nth-of-type(even) .show-more-btn:hover { background: var(--blue); color: var(--paper); }

/* En MÓVIL: mostrar el botón y ocultar los items extra */
@media (max-width: 768px) {
  .show-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .faq-hidden-mobile,
  .events-wrap > .event-card.collapse-mobile {
    display: none !important;
  }
  /* Centrar el botón */
  .faq-wrap { position: relative; }
  .faq-wrap .show-more-btn { display: block; width: fit-content; }
}

/* =========================================================
   FILOSOFÍA · 02 (academia) — layout mejorado
   ========================================================= */
.philo-wrap {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 60px;
  align-items: center;
}
.philo-title {
  font-size: clamp(38px, 4.5vw, 72px);
  line-height: 1.02;
  margin-top: 20px;
  letter-spacing: -0.005em;
  padding-bottom: 8px;
}
@media (max-width: 900px) {
  .philo-wrap {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .philo-title {
    font-size: clamp(34px, 9vw, 56px) !important;
    line-height: 1.05 !important;
    margin-top: 12px !important;
  }
}

/* =========================================================
   COLLAPSE-MOBILE: ocultar items extra en móvil
   ========================================================= */
.show-more-mobile {
  display: none;
}
@media (max-width: 768px) {
  .collapse-mobile { display: none !important; }
  .show-more-mobile {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 24px auto 0;
    padding: 12px 24px;
    border: 1px solid currentColor;
    background: transparent;
    border-radius: 999px;
    font-family: 'Google Sans Flex', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.25s, color 0.25s;
    width: fit-content;
  }
  .section:nth-of-type(odd) .show-more-mobile { color: var(--paper); }
  .section:nth-of-type(odd) .show-more-mobile:hover { background: var(--paper); color: var(--blue); }
  .section:nth-of-type(even) .show-more-mobile { color: var(--blue); }
  .section:nth-of-type(even) .show-more-mobile:hover { background: var(--blue); color: var(--paper); }
  /* Centrar el botón cuando sigue al grid */
  .tech-grid + .show-more-mobile,
  #coaches > .container > div + .show-more-mobile {
    display: flex !important;
    margin-left: auto;
    margin-right: auto;
  }
}

/* =========================================================
   SCHEDULE (academia) · vista escritorio vs móvil
   ========================================================= */
.schedule-mobile { display: none; }
@media (max-width: 900px) {
  .schedule-desktop { display: none !important; }
  .schedule-mobile {
    display: block;
    margin-top: 24px;
  }
  .schedule-day {
    background: var(--paper);
    border: 1px solid rgba(0,19,120,0.15);
    border-radius: 14px;
    margin-bottom: 10px;
    overflow: hidden;
  }
  .schedule-day > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
  }
  .schedule-day > summary::-webkit-details-marker { display: none; }
  .schedule-day .day-name {
    font-family: 'Google Sans Flex', system-ui, sans-serif;
    font-size: 22px;
    letter-spacing: 0.02em;
    color: var(--blue);
    flex: 1;
  }
  .schedule-day .day-count {
    font-family: 'Google Sans Flex', system-ui, sans-serif;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(0,0,0,0.55);
  }
  .schedule-day .chev {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(0,19,120,0.3);
    color: var(--blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: transform 0.3s, background 0.3s;
  }
  .schedule-day[open] .chev {
    transform: rotate(45deg);
    background: var(--blue);
    color: var(--paper);
  }
  .schedule-day .day-classes {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid rgba(0,19,120,0.1);
  }
  .schedule-day .day-classes li {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(0,19,120,0.06);
    align-items: center;
  }
  .schedule-day .day-classes li:last-child { border-bottom: 0; }
  .schedule-day .day-time {
    font-family: 'Google Sans Flex', system-ui, sans-serif;
    font-size: 18px;
    color: var(--blue);
  }
  .schedule-day .day-info { min-width: 0; }
  .schedule-day .day-class-name {
    font-family: 'Google Sans Flex', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
  }
  .schedule-day .day-class-coach {
    font-family: 'Google Sans Flex', system-ui, sans-serif;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(0,0,0,0.55);
    margin-top: 2px;
  }
  .schedule-day .day-class-tag {
    font-family: 'Google Sans Flex', system-ui, sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 999px;
  }
  .schedule-day .day-class-tag.open {
    background: rgba(70,152,58,0.15);
    color: var(--green);
  }
  .schedule-day .day-class-tag.few {
    background: rgba(255,122,60,0.15);
    color: #ff7a3c;
  }
  .schedule-day .day-class-tag.full {
    background: rgba(0,0,0,0.05);
    color: rgba(0,0,0,0.45);
  }
  .schedule-day .day-empty {
    padding: 16px 18px;
    border-top: 1px solid rgba(0,19,120,0.1);
    font-size: 13px;
    color: rgba(0,0,0,0.5);
    font-style: italic;
    margin: 0;
  }
}

/* =========================================================
   DISPONIBILIDAD (pistas) · vista escritorio vs móvil
   ========================================================= */
.avail-mobile { display: none; }
@media (max-width: 900px) {
  .avail-desktop { display: none !important; }
  .avail-mobile {
    display: block;
    margin-top: 16px;
  }
  .avail-hour {
    background: var(--paper);
    border: 1px solid rgba(0,19,120,0.15);
    border-radius: 14px;
    margin-bottom: 10px;
    overflow: hidden;
  }
  .avail-hour > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
  }
  .avail-hour > summary::-webkit-details-marker { display: none; }
  .avail-hour .hour-time {
    font-family: 'Google Sans Flex', system-ui, sans-serif;
    font-size: 24px;
    letter-spacing: 0.02em;
    color: var(--blue);
  }
  .avail-hour .hour-summary {
    font-family: 'Google Sans Flex', system-ui, sans-serif;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--green);
    font-weight: 600;
    flex: 1;
    text-align: right;
  }
  .avail-hour .chev {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(0,19,120,0.3);
    color: var(--blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: transform 0.3s, background 0.3s;
  }
  .avail-hour[open] .chev {
    transform: rotate(45deg);
    background: var(--blue);
    color: var(--paper);
  }
  .avail-hour .hour-courts {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid rgba(0,19,120,0.1);
  }
  .avail-hour .hour-court {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(0,19,120,0.06);
    align-items: center;
  }
  .avail-hour .hour-court:last-child { border-bottom: 0; }
  .avail-hour .hour-court-num {
    font-family: 'Google Sans Flex', system-ui, sans-serif;
    font-size: 18px;
    color: var(--blue);
  }
  .avail-hour .hour-court-name {
    font-family: 'Google Sans Flex', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
  }
  .avail-hour .hour-court-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Google Sans Flex', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
  }
  .avail-hour .hour-court-state .state-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    display: inline-block;
  }
  .avail-hour .hour-court.free .hour-court-state {
    background: rgba(70,152,58,0.15);
    color: var(--green);
  }
  .avail-hour .hour-court.free .state-dot { background: var(--green); }
  .avail-hour .hour-court.busy .hour-court-state {
    background: rgba(0,19,120,0.12);
    color: var(--blue);
  }
  .avail-hour .hour-court.busy .state-dot { background: var(--blue); }
  .avail-hour .hour-court.taken .hour-court-state {
    background: rgba(0,0,0,0.05);
    color: rgba(0,0,0,0.45);
  }
  .avail-hour .hour-court.taken .state-dot { background: rgba(0,0,0,0.3); }
  .avail-hour .hour-court.prime .hour-court-state {
    background: rgba(255,122,60,0.15);
    color: #ff7a3c;
  }
  .avail-hour .hour-court.prime .state-dot { background: #ff7a3c; }
}

/* =========================================================
   CONTACTO · Tabla de horarios (HORARIOS · 04)
   Fondo verde de sección, todo el texto en blanco
   ========================================================= */
.section#horarios-contacto .hours-table {
  margin-top: 24px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
}
.section#horarios-contacto .hours-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 2fr;
  gap: 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.section#horarios-contacto .hours-row:last-child { border-bottom: 0; }
.section#horarios-contacto .hours-row .cell {
  padding: 18px 22px;
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
  display: flex;
  align-items: center;
  font-size: 14px;
}
.section#horarios-contacto .hours-row.head .cell {
  background: rgba(255,255,255,0.08);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255,255,255,0.85) !important;
}
.section#horarios-contacto .hours-row .cell.day {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 18px;
  letter-spacing: 0.04em;
  color: var(--paper) !important;
  text-transform: uppercase;
}
.section#horarios-contacto .hours-row .cell.time {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 22px;
  color: var(--paper) !important;
  letter-spacing: 0.02em;
}
.section#horarios-contacto .hours-row .cell.note {
  color: rgba(255,255,255,0.85) !important;
}
@media (max-width: 700px) {
  .section#horarios-contacto .hours-table { border-radius: 14px; }
  .section#horarios-contacto .hours-row {
    grid-template-columns: 1fr;
    padding: 14px 0;
  }
  .section#horarios-contacto .hours-row .cell {
    padding: 4px 18px;
    font-size: 13px;
  }
  .section#horarios-contacto .hours-row .cell.day {
    font-size: 18px;
    padding-top: 12px;
  }
  .section#horarios-contacto .hours-row .cell.time { font-size: 20px; }
  .section#horarios-contacto .hours-row.head {
    display: none;
  }
}

/* =========================================================
   CONTACTO · mapa Google Maps embebido
   ========================================================= */
.contact-map-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 21/9;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(0,19,120,0.15);
  box-shadow: 0 12px 40px rgba(0,19,120,0.1);
  margin-top: 24px;
  background: rgba(0,19,120,0.04);
}
.contact-map-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: hue-rotate(-15deg) saturate(0.85);
}
@media (max-width: 700px) {
  .contact-map-wrap { aspect-ratio: 1/1; border-radius: 16px; }
}

/* Travel cards (UBICACIÓN) — adapt al sistema */
.travel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.travel-card {
  padding: 28px;
  background: rgba(0,19,120,0.04);
  border: 1px solid rgba(0,19,120,0.15);
  border-radius: 16px;
}
.section:nth-of-type(odd) .travel-card {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
}
.travel-card .icn {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--blue);
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 16px;
}
.travel-card h4 {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 22px;
  margin-bottom: 10px;
  color: var(--blue);
}
.section:nth-of-type(odd) .travel-card h4 { color: var(--paper); }
.travel-card p {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}
.section:nth-of-type(odd) .travel-card p { color: rgba(255,255,255,0.85); }
.travel-card a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.travel-card a:hover { color: var(--green); }
@media (max-width: 900px) {
  .travel-grid { grid-template-columns: 1fr !important; gap: 12px; }
  .travel-card { padding: 22px; }
}

/* === Newsletter footer (escritorio Y móvil): sin pildora wrapper === */
.footer-newsletter .newsletter {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
@media (min-width: 700px) {
  .footer-newsletter p {
    font-size: 13px;
    margin-bottom: 12px;
    line-height: 1.5;
  }
  .footer-newsletter .newsletter {
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 4px !important;
  }
  .footer-newsletter .newsletter input {
    width: 100%;
    padding: 12px 18px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    color: var(--paper) !important;
    box-sizing: border-box;
  }
  .footer-newsletter .newsletter button {
    width: 100%;
    padding: 12px 22px !important;
    border-radius: 999px !important;
    background: var(--paper) !important;
    color: var(--green) !important;
    border: 0 !important;
  }
  .footer-newsletter .newsletter button:hover {
    background: var(--blue) !important;
    color: var(--paper) !important;
  }
}

/* =========================================================
   MÓVIL · COMPRIMIR EL HOME (menos scroll)
   ========================================================= */
@media (max-width: 768px) {
  /* Ocultar Galería y Testimonios en móvil (son decorativas) */
  body > #root .section#gallery,
  body > #root .section#testimonials,
  body > #root .section.testimonials {
    display: none !important;
  }

  /* Reducir padding general entre secciones */
  .section { padding: 40px 0 !important; }

  /* Hero: dejar suficiente aire pero no tanto */
  .hero { padding: 100px 0 50px !important; }

  /* Reducir gaps en las grids principales */
  .exp-grid,
  .academy-grid,
  .training-plans,
  .events-wrap,
  .pricing-grid,
  .gallery {
    gap: 12px !important;
  }

  /* ClubExperience más compacto */
  .exp-card { min-height: 220px !important; }
  .exp-card .content h3 { font-size: 22px !important; }
  .exp-card .content p { font-size: 12px !important; }

  /* Academia preview: solo 2 coaches y 2 programas en móvil */
  .academy-grid .coach-card:nth-child(n+3),
  .training-plans .plan-tile:nth-child(n+3) {
    display: none !important;
  }
  .academy-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .training-plans {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Social preview: solo 1 evento en móvil */
  .events-wrap > .event-card:nth-child(n+2) {
    display: none !important;
  }

  /* Banda sonora del club (Collabs · social.html): solo 2 partners en móvil */
  .collabs-grid > .collab-card:nth-child(n+3) {
    display: none !important;
  }

  /* Section heads más compactos */
  .section-head { margin-bottom: 24px !important; }

  /* FAQ ítems más compactos */
  .faq-item { padding: 16px 0 !important; }
  .faq-item .q h4 { font-size: 18px !important; }
  .faq-item .a { font-size: 13px !important; }
}

/* =========================================================
   HOME · APLICAR ESTILO COHERENTE A LAS SECCIONES
   ========================================================= */

/* === MEMBERSHIP en home: featured plan también con fondo blanco === */
.section#membership .price-card.featured {
  background: var(--paper) !important;
  border: 2px solid var(--green) !important;
  box-shadow: 0 30px 80px rgba(70,152,58,0.18) !important;
}
.section#membership .price-card.featured,
.section#membership .price-card.featured *,
.section#membership .price-card.featured .lead,
.section#membership .price-card.featured ul li,
.section#membership .price-card.featured .price,
.section#membership .price-card.featured .price * {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
}
.section#membership .price-card.featured .name {
  color: var(--blue) !important;
  -webkit-text-fill-color: var(--blue) !important;
}
.section#membership .price-card.featured .price,
.section#membership .price-card.featured .price span:not(.cur):not(.per) {
  color: var(--blue) !important;
  -webkit-text-fill-color: var(--blue) !important;
}
.section#membership .price-card.featured .accent {
  color: var(--green) !important;
  -webkit-text-fill-color: var(--green) !important;
}
.section#membership .price-card.featured .tag {
  background: var(--green) !important;
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
}
.section#membership .price-card.featured .cta,
.section#membership .price-card.featured .cta.solid {
  background: var(--green) !important;
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
  border: 0 !important;
}
.section#membership .price-card.featured .cta:hover,
.section#membership .price-card.featured .cta.solid:hover {
  background: var(--blue) !important;
  color: var(--paper) !important;
}
.section#membership .price-card.featured ul li::before {
  color: var(--green) !important;
}

/* === FAQ — adaptativo: en VERDE (texto blanco), en BLANCO (texto azul/negro) === */
.section#faq:nth-of-type(odd) .faq-item {
  border-bottom-color: rgba(255,255,255,0.18) !important;
}
.section#faq:nth-of-type(odd) .faq-item h4 { color: var(--paper) !important; }
.section#faq:nth-of-type(odd) .faq-item .a { color: rgba(255,255,255,0.85) !important; }
.section#faq:nth-of-type(odd) .faq-item .plus {
  border-color: rgba(255,255,255,0.4) !important;
  color: var(--paper) !important;
}
.section#faq:nth-of-type(odd) .faq-item.open .plus {
  background: var(--green) !important;
  border-color: var(--green) !important;
  color: var(--paper) !important;
}
/* FAQ en sección BLANCA */
.section#faq:nth-of-type(even) .faq-wrap .faq-item {
  border-bottom-color: rgba(0,19,120,0.15) !important;
}
.section#faq:nth-of-type(even) .faq-wrap .faq-item .q h4,
.section#faq:nth-of-type(even) .faq-wrap .faq-item h4 {
  color: var(--blue) !important;
  -webkit-text-fill-color: var(--blue) !important;
}
.section#faq:nth-of-type(even) .faq-wrap .faq-item .a {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
}
.section#faq:nth-of-type(even) .faq-wrap .faq-item .plus {
  border-color: rgba(0,19,120,0.3) !important;
  color: var(--blue) !important;
  -webkit-text-fill-color: var(--blue) !important;
}
.section#faq:nth-of-type(even) .faq-wrap .faq-item.open .plus {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
}
/* También el título de la sección FAQ en blanco */
.section#faq:nth-of-type(even) .section-head h2 {
  color: var(--blue) !important;
}
.section#faq:nth-of-type(even) .section-head .accent {
  color: var(--green) !important;
  -webkit-text-fill-color: var(--green) !important;
}

/* === TESTIMONIOS — adaptativo: en VERDE (cards translúcidas blancas), en BLANCO (cards verde sólido) === */
/* Sección VERDE (impar) */
.section#testimonials:nth-of-type(odd) .test-card {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
}
.section#testimonials:nth-of-type(odd) .test-card .quote { color: var(--paper) !important; }
.section#testimonials:nth-of-type(odd) .test-card .stars { color: var(--green) !important; }
.section#testimonials:nth-of-type(odd) .test-card .name { color: var(--paper) !important; }
.section#testimonials:nth-of-type(odd) .test-card .role { color: rgba(255,255,255,0.75) !important; }

/* Sección BLANCA (par) */
.section#testimonials:nth-of-type(even) .test-card {
  background: var(--paper) !important;
  border: 1px solid rgba(0,19,120,0.15) !important;
  box-shadow: 0 4px 20px rgba(0,19,120,0.05);
}
.section#testimonials:nth-of-type(even) .test-card .quote { color: var(--ink) !important; }
.section#testimonials:nth-of-type(even) .test-card .stars { color: var(--green) !important; }
.section#testimonials:nth-of-type(even) .test-card .name { color: var(--blue) !important; }
.section#testimonials:nth-of-type(even) .test-card .role { color: rgba(0,0,0,0.6) !important; }

/* === ACADEMY (preview home) — sección blanca: coaches y plan-tiles === */
.section#academy .coach-card {
  background: rgba(0,19,120,0.04) !important;
  border: 1px solid rgba(0,19,120,0.15) !important;
}
.section#academy .coach-card .name { color: var(--blue) !important; }
.section#academy .coach-card .role { color: var(--ink) !important; }
.section#academy .plan-tile {
  background: rgba(0,19,120,0.04) !important;
  border: 1px solid rgba(0,19,120,0.15) !important;
}
.section#academy .plan-tile .num { color: var(--green) !important; }
.section#academy .plan-tile h4 { color: var(--blue) !important; }
.section#academy .plan-tile p { color: var(--ink) !important; }
.section#academy .plan-tile .arr { color: var(--blue) !important; }

/* === CLUB (preview home) — sección blanca, exp-cards en imagen, texto blanco === */
.section#club .exp-card .content h3 { color: var(--paper) !important; }
.section#club .exp-card .content p { color: rgba(255,255,255,0.85) !important; }
.section#club .exp-card .tag {
  background: rgba(0,0,0,0.5) !important;
  color: var(--paper) !important;
}
.section#club .stat-row .stat .num { color: var(--blue) !important; }
.section#club .stat-row .stat .num * { color: var(--blue) !important; }
.section#club .stat-row .stat .lbl { color: rgba(0,0,0,0.6) !important; }
.section#pistas h1, .section#booking h1, .section#tarifas h1,
.section#pistas h2, .section#booking h2, .section#tarifas h2,
.section#pistas h4, .section#booking h4, .section#tarifas h4,
.section#pistas h5, .section#booking h5, .section#tarifas h5,
.section#pistas .font-display, .section#booking .font-display, .section#tarifas .font-display,
.section#pistas > .container > * > h3,
.section#booking > .container > * > h3,
.section#tarifas > .container > * > h3 {
  color: var(--blue) !important;
}
.section#pistas .accent,
.section#booking .accent,
.section#tarifas .accent {
  color: var(--green) !important;
  -webkit-text-fill-color: var(--green) !important;
}
.section#pistas .section-head p,
.section#booking .section-head p,
.section#tarifas .section-head p,
.section#pistas > .container > p,
.section#booking > .container > p,
.section#tarifas > .container > p {
  color: var(--ink) !important;
}
/* Court-cards: como tarjetas con imagen de fondo y TODO el texto en blanco encima */
.section#pistas .court-card {
  background: transparent !important;
  border: 1px solid rgba(0,19,120,0.12) !important;
  box-shadow: 0 8px 30px rgba(0,19,120,0.08);
  overflow: hidden !important;
}
.section#pistas .court-card .info { overflow: hidden !important; }
.section#pistas .courts-carousel { overflow-y: hidden !important; }
/* TODO el texto en la card sobre fondo blanco section → BLANCO (porque la imagen está debajo) */
.section#pistas .court-card,
.section#pistas .court-card *,
.section#pistas .court-card .info,
.section#pistas .court-card .info *,
.section#pistas .court-card .info h3,
.section#pistas .court-card .info .spec,
.section#pistas .court-card .info .spec strong,
.section#pistas .court-card .info .occ-pct,
.section#pistas .court-card .occupancy .spec {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
/* Texto sobre la imagen (#01, pills, labels) siempre BLANCO */
.section#pistas .court-card .court-num,
.section#pistas .court-card .img-wrap .pill,
.section#pistas .court-card .img-wrap .meta *,
.section#pistas .court-card .img-wrap .ph-label,
.section#pistas .court-card .img-wrap .ph-marker,
.section#courts .court-card .court-num,
.section#courts .court-card .img-wrap .pill,
.section#courts .court-card .img-wrap .meta *,
.section#courts .court-card .img-wrap .ph-label,
.section#courts .court-card .img-wrap .ph-marker {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
/* El "01" outline grande: stroke y fill en blanco — mismo estilo en home y pistas */
.section#pistas .court-card .court-num,
.section#courts .court-card .court-num {
  -webkit-text-stroke: 1px #FFFFFF !important;
  -webkit-text-fill-color: transparent !important;
  color: #FFFFFF !important;
}

/* Recuadro de la parrilla de disponibilidad sobre fondo blanco */
.section#booking .avail-wrap {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,19,120,0.15) !important;
  box-shadow: 0 4px 30px rgba(0,19,120,0.06);
}
.section#booking .avail-grid {
  background: #FFFFFF !important;
  border: 0 !important;
  padding: 0 !important;
}
.section#booking .avail-tabs { border-bottom-color: rgba(0,0,0,0.08) !important; }
.section#booking .avail-tab {
  border-color: rgba(0,0,0,0.18) !important;
  color: var(--ink) !important;
}
.section#booking .avail-tab:hover {
  background: rgba(0,19,120,0.06) !important;
  border-color: var(--blue) !important;
}
.section#booking .avail-tab.on {
  background: var(--blue) !important;
  color: #FFFFFF !important;
  border-color: var(--blue) !important;
}
.section#booking .avail-cell.head { color: rgba(0,0,0,0.55) !important; }
.section#booking .avail-cell.row-label { border-color: rgba(0,0,0,0.12) !important; }
.section#booking .avail-cell.row-label .num { color: var(--blue) !important; }
.section#booking .avail-cell.row-label .nm { color: rgba(0,0,0,0.55) !important; }
.section#booking .avail-cell.slot.free {
  background: rgba(70,152,58,0.14) !important;
  color: var(--green) !important;
  border-color: rgba(70,152,58,0.35) !important;
}
.section#booking .avail-cell.slot.free:hover {
  background: var(--green) !important;
  color: #FFFFFF !important;
}
.section#booking .avail-cell.slot.busy {
  background: rgba(0,19,120,0.12) !important;
  color: var(--blue) !important;
  border-color: rgba(0,19,120,0.35) !important;
}
.section#booking .avail-cell.slot.busy:hover {
  background: var(--blue) !important;
  color: #FFFFFF !important;
}
.section#booking .avail-cell.slot.taken {
  background: rgba(0,0,0,0.04) !important;
  color: rgba(0,0,0,0.35) !important;
  border-color: rgba(0,0,0,0.08) !important;
}
.section#booking .avail-cell.slot.prime {
  background: rgba(255,122,60,0.14) !important;
  color: #ff7a3c !important;
  border-color: rgba(255,122,60,0.4) !important;
}

/* =========================================================
   CONTACTO · Formulario (#formulario)
   Sección con fondo verde (default) — solo el panel del form en blanco
   ========================================================= */
.section#formulario .contact-form {
  background: var(--paper) !important;
  border: 1px solid rgba(0,19,120,0.12) !important;
  box-shadow: 0 24px 60px rgba(0,19,120,0.08);
  border-radius: 20px;
  padding: 36px;
}
.section#formulario .contact-form h3 {
  color: var(--green) !important;
  -webkit-text-fill-color: var(--green) !important;
}
.section#formulario .contact-form .lede {
  color: var(--ink) !important;
}
/* Labels y textos del formulario en negro */
.section#formulario .contact-form label,
.section#formulario .contact-form .field label,
.section#formulario .contact-form .field-note,
.section#formulario .contact-form .promise {
  color: var(--ink) !important;
}
/* Inputs sobre fondo blanco */
.section#formulario .contact-form input,
.section#formulario .contact-form select,
.section#formulario .contact-form textarea {
  background: var(--paper) !important;
  border: 1px solid rgba(0,19,120,0.18) !important;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
}
.section#formulario .contact-form input::placeholder,
.section#formulario .contact-form textarea::placeholder {
  color: rgba(0,0,0,0.4) !important;
}
.section#formulario .contact-form input:focus,
.section#formulario .contact-form select:focus,
.section#formulario .contact-form textarea:focus {
  border-color: var(--green) !important;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(70,152,58,0.15);
}
/* Selección "De qué quieres hablar" — pills */
.section#formulario .contact-form .topic-pills label,
.section#formulario .contact-form .pill-radio label {
  background: rgba(0,0,0,0.04) !important;
  border: 1px solid rgba(0,19,120,0.18) !important;
  color: var(--ink) !important;
}
.section#formulario .contact-form .topic-pills input:checked + label,
.section#formulario .contact-form .pill-radio input:checked + label {
  background: var(--green) !important;
  border-color: var(--green) !important;
  color: var(--paper) !important;
}
/* Botón Enviar */
.section#formulario .contact-form button[type="submit"],
.section#formulario .contact-form .submit {
  background: var(--green) !important;
  color: var(--paper) !important;
  border: 0;
}
.section#formulario .contact-form button[type="submit"]:hover {
  background: var(--blue) !important;
}
.section#formulario .contact-form .promise,
.section#formulario .contact-form .footnote {
  color: rgba(0,0,0,0.55) !important;
  font-size: 12px !important;
}

/* =========================================================
   AJUSTES FINALES PETICIONES CLIENTE
   ========================================================= */
/* Quitar etiquetas y marcadores transparentes de TODAS las imágenes */
.ph-label, .ph-marker, .img-placeholder .ph-label, .img-placeholder .ph-marker {
  display: none !important;
}
/* Quitar la flechita ↗ decorativa del card outdoor (ClubExperience) */
.exp-card .icon-pill { display: none !important; }

/* HOME · Sección de Pistas (id #courts): título en AZUL, acento en VERDE
   Ya está en fondo blanco vía la regla #courts general */
.section#courts h1,
.section#courts h2,
.section#courts h4,
.section#courts h5,
.section#courts .font-display,
.section#courts > .container > * > h3 {
  color: var(--blue) !important;
}
.section#courts .accent {
  color: var(--green) !important;
  -webkit-text-fill-color: var(--green) !important;
}
.section#courts .section-head p,
.section#courts > .container > p {
  color: var(--ink) !important;
}

/* Botón "Ver las 5 pistas" (btn-outline) en secciones de pistas */
.section#courts .btn-outline,
.section#pistas .btn-outline,
.section#booking .btn-outline,
.section#tarifas .btn-outline {
  border: 1px solid var(--blue) !important;
  color: var(--blue) !important;
  background: transparent !important;
}
.section#courts .btn-outline:hover,
.section#pistas .btn-outline:hover,
.section#booking .btn-outline:hover,
.section#tarifas .btn-outline:hover {
  background: var(--blue) !important;
  color: var(--paper) !important;
  border-color: var(--blue) !important;
}

/* Plan destacado (Player · más popular): texto del botón en AZUL en vez de verde */
.price-card.featured .cta,
.price-card.featured .cta.solid {
  color: var(--blue) !important;
  -webkit-text-fill-color: var(--blue) !important;
}
.price-card.featured .cta:hover,
.price-card.featured .cta.solid:hover {
  background: var(--blue) !important;
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
}