/*
  Tema LBFT sobre Bootstrap 5, estilo editorial inspirado en la referencia
  del cliente (Garcia Tennis Academy): serif editorial en titulares, botones
  en mayúsculas con flecha animada, tarjetas con borde fino que flotan con
  una sombra suave solo al hover, radio pequeño y consistente en todo.
  La paleta de marca NO cambia: navy #19105f + indigo #4f46e5, los mismos
  de siempre. Lo que cambia es fondo, tinta, tipografía, botones y tarjetas.
*/
:root {
  --lbft-navy: #19105f;
  --lbft-navy-rgb: 25, 16, 95;
  --lbft-indigo: #4f46e5;
  --lbft-indigo-dark: #3730a3;
  --lbft-purple-light: #f3e8ff;
  --lbft-cream: #faf8f5;
  --lbft-ink: #17171a;
  --lbft-hairline: #e2ddd3;
  --lbft-hairline-strong: #cfc8ba;
  --radius: 6px;
  --ease: cubic-bezier(.22, .61, .36, 1);

  --bs-body-bg: var(--lbft-cream);
  --bs-body-color: var(--lbft-ink);
  --bs-border-color: var(--lbft-hairline);

  --bs-primary: var(--lbft-navy);
  --bs-primary-rgb: var(--lbft-navy-rgb);
  --bs-primary-text-emphasis: var(--lbft-navy);
  --bs-primary-bg-subtle: #e3e1ee;
  --bs-primary-border-subtle: #b3aed1;
  --bs-link-color: var(--lbft-navy);
  --bs-link-color-rgb: var(--lbft-navy-rgb);
  --bs-link-hover-color: var(--lbft-indigo-dark);

  --font-display: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
}

body {
  font-family: var(--font-body);
  color: var(--lbft-ink);
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--lbft-ink);
  letter-spacing: -.01em;
}

h1, .display-4, .display-5 {
  font-weight: 700;
  line-height: 1.08;
}

/*
  Cualquier título dentro de un bloque con fondo oscuro/texto blanco debe
  heredar ese blanco, no el "ink" casi negro de la regla de arriba — si no,
  los títulos del hero y de la banda de reserva se ven oscuros sobre fondo
  oscuro. Un solo sitio para arreglarlo, vale para toda sección oscura
  presente o futura.
*/
.text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6,
.bg-brand-navy h1, .bg-brand-navy h2, .bg-brand-navy h3, .bg-brand-navy h4, .bg-brand-navy h5, .bg-brand-navy h6,
.testimonial-block h1, .testimonial-block h2, .testimonial-block h3 {
  color: inherit;
}

/* Etiqueta pequeña sobre un título de sección — el único elemento nuevo de
   "plantilla" (no reescribe ningún texto del cliente, solo lo antecede). */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lbft-navy);
  margin-bottom: .5rem;
}

.eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 2px;
  background: var(--lbft-indigo);
  display: inline-block;
  flex-shrink: 0;
}

/* Marca corta antes de un subtítulo de sección (no un eyebrow completo,
   solo el guion de acento) — para dividir subsecciones largas como las
   dos tandas de formules sin repetir una etiqueta entera. */
.title-mark {
  display: inline-block;
  width: 1.5rem;
  height: 3px;
  background: var(--lbft-indigo);
  margin-right: .6rem;
  margin-bottom: .2rem;
}

/* Eyebrow sobre fondo oscuro (footer navy, hero): blanco en vez de navy,
   si no se pierde contra el fondo. */
.bg-brand-navy .eyebrow, .text-white .eyebrow {
  color: var(--lbft-purple-light);
}

/* Links y texto secundario del footer navy: gris claro legible sobre
   fondo oscuro, no el .text-secondary gris oscuro pensado para fondo claro. */
.footer-link {
  color: rgba(255, 255, 255, .75);
  text-decoration: none;
  transition: color .15s var(--ease);
}

.footer-link:hover {
  color: #fff;
}

.footer-muted {
  color: rgba(255, 255, 255, .55);
}

/* Índice editorial (01, 02, 03…) delante de tarjetas o filas de lista */
.index-number {
  display: block;
  font-family: var(--font-body);
  font-weight: 800;
  color: var(--lbft-indigo);
  font-size: .95rem;
  letter-spacing: .04em;
  margin-bottom: .5rem;
}

/* ---------- Botones: mayúsculas, borde de 2px, radio pequeño, flecha
   animada al hover (mismo patrón que la referencia) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border-width: 2px;
  padding: .85rem 1.75rem;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .15s var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

.btn .arr {
  display: inline-block;
  transition: transform .25s var(--ease);
}

.btn:hover .arr {
  transform: translateX(4px);
}

.btn-primary {
  --bs-btn-bg: var(--lbft-navy);
  --bs-btn-border-color: var(--lbft-navy);
  --bs-btn-hover-bg: var(--lbft-indigo-dark);
  --bs-btn-hover-border-color: var(--lbft-indigo-dark);
  --bs-btn-active-bg: var(--lbft-indigo-dark);
  --bs-btn-active-border-color: var(--lbft-indigo-dark);
}

.btn-accent {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--lbft-indigo);
  --bs-btn-border-color: var(--lbft-indigo);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--lbft-indigo-dark);
  --bs-btn-hover-border-color: var(--lbft-indigo-dark);
}

.btn-outline-primary {
  --bs-btn-color: var(--lbft-navy);
  --bs-btn-border-color: var(--lbft-hairline-strong);
  --bs-btn-hover-bg: var(--lbft-navy);
  --bs-btn-hover-border-color: var(--lbft-navy);
}

.btn-light:hover {
  background: var(--lbft-indigo);
  border-color: var(--lbft-indigo);
  color: #fff;
}

.btn-outline-light {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255, 255, 255, .5);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-hover-color: var(--lbft-ink);
}

.bg-brand-navy {
  background-color: var(--lbft-navy) !important;
}

.text-brand-navy {
  color: var(--lbft-navy) !important;
}

/* ---------- Tarjetas editoriales: borde fino, sin sombra en reposo,
   flotan con sombra suave y difusa solo al hover ---------- */
.edito-card {
  --card-pad: clamp(1rem, 1.4vw, 1.35rem);
  border: 1px solid var(--lbft-hairline);
  border-radius: var(--radius);
  padding: var(--card-pad);
  background: #fff;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  height: 100%;
}

.edito-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 50px -28px rgba(22, 20, 26, .35);
  border-color: var(--lbft-hairline-strong);
}

.edito-card img {
  border-radius: var(--radius);
  display: block;
}

.edito-card .num,
.edito-card .index-number {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: .95rem;
  color: var(--lbft-indigo);
  letter-spacing: .04em;
}

/* Insignia numerada sobre la esquina de la imagen, en vez de un número
   suelto encima de la tarjeta — mismo detalle que la referencia. */
.edito-card .img-wrap {
  position: relative;
  margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 1rem;
}

.edito-card .img-wrap img {
  border-radius: var(--radius) var(--radius) 0 0;
}

.edito-card .img-badge {
  position: absolute;
  top: .75rem;
  left: .75rem;
  background: var(--lbft-indigo);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: .8rem;
  line-height: 1;
  padding: .4rem .55rem;
  border-radius: calc(var(--radius) - 2px);
}

/* Sustituto visual cuando un artículo no tiene imagen, para que la
   tarjeta no quede con un hueco en blanco. */
.img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 180px;
  background: linear-gradient(135deg, var(--lbft-navy), var(--lbft-indigo-dark));
  color: rgba(255, 255, 255, .6);
  border-radius: var(--radius) var(--radius) 0 0;
}

/* Pastillas de filtro por categoría (listado de blog) */
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.filter-pill {
  display: inline-block;
  border: 1px solid var(--lbft-hairline-strong);
  border-radius: 999px;
  padding: .5rem 1.15rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--lbft-ink);
  text-decoration: none;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}

.filter-pill:hover {
  border-color: var(--lbft-navy);
  color: var(--lbft-navy);
}

.filter-pill.active {
  background: var(--lbft-navy);
  border-color: var(--lbft-navy);
  color: #fff;
}

/* Insignia de categoría sobre el título de una tarjeta de artículo */
.category-badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--lbft-indigo);
  margin-bottom: .5rem;
}

/* Tarjeta de persona (équipe, dirigeants, coachs): foto circular pequeña +
   rol + texto, borde fino, sin sombra — mismo patrón que la referencia. */
.person-card {
  border: 1px solid var(--lbft-hairline);
  border-radius: var(--radius);
  padding: 1.5rem;
  height: 100%;
}

.photo {
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  margin-bottom: 1rem;
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.role-tag {
  display: block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--lbft-indigo);
  margin-bottom: .35rem;
}

/* Variante sin borde/caja, centrada — para grid de dirigeants/equipo donde
   la referencia no usa tarjetas con marco, solo foto+nombre+rol. */
.person-card-plain .photo {
  width: 5rem;
  height: 5rem;
}

/* Pull-quote editorial: frase real destacada en una caja con acento,
   reutilizando texto que ya está en el párrafo principal — técnica de
   revista, no contenido nuevo. */
.pull-quote {
  position: relative;
  background: var(--lbft-cream);
  border: 1px solid var(--lbft-hairline);
  border-left: 3px solid var(--lbft-indigo);
  border-radius: var(--radius);
  padding: 1.75rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--lbft-navy);
}

.pull-quote::before {
  content: "\201C";
  position: absolute;
  top: .5rem;
  right: 1.25rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.5rem;
  color: var(--lbft-hairline-strong);
  line-height: 1;
}

/*
  Cabecera clara de página interna: alternativa al page-hero oscuro con
  foto, para páginas donde el contenido pide un inicio más ligero (aire,
  eyebrow + título grande en tinta, sin overlay ni foto de fondo).
*/
.page-hero-light {
  padding: 3rem 0 2rem;
}

/* Tarjeta plana sin marco (fallback para imagen + texto suelto) */
.flat-card img {
  border-radius: var(--radius);
  display: block;
}

.card-hover {
  transition: opacity .15s ease-in-out, transform .15s ease-in-out;
}

.card-hover:hover {
  opacity: .92;
}

/* Listas con divisor fino en vez de tarjetas con sombra (agenda, filosofía) */
.hairline-list > * {
  border-top: 1px solid var(--lbft-hairline);
  padding-top: 1.25rem;
  margin-top: 1.25rem;
}

.hairline-list > *:first-child {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

/* Navbar transparente sobre la imagen de cabecera de cada página */
.navbar-brand-overlay {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 1030;
  background: transparent;
}

.navbar-brand-overlay .navbar-nav .nav-link,
.navbar-brand-overlay .navbar-brand,
.navbar-brand-overlay .nav-cta {
  color: #fff;
}

.navbar-brand-overlay .navbar-nav .nav-link {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .92rem;
}

.navbar-brand-overlay .navbar-nav .nav-link:hover,
.navbar-brand-overlay .navbar-nav .nav-link:focus {
  color: var(--lbft-purple-light);
}

/* Le carré du bouton hamburger est blanc (.bg-white) mais navbar-dark
   fournit une icône aux barres blanches par défaut : invisible sur fond
   blanc. On force les barres en navy pour qu'elles ressortent. */
.navbar-toggler.bg-white .navbar-toggler-icon {
  /* rgb(25, 16, 95) = --lbft-navy : une var() imbriquée dans ce data-URI
     ne se résout pas (elle est à l'intérieur d'une chaîne url()), d'où
     la couleur écrite en dur. */
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgb(25, 16, 95)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Le panneau mobile (.navbar-collapse) hérite du fond transparent de
   .navbar-brand-overlay : une fois ouvert, les liens flottent sans fond
   sur la photo/le contenu de la page. On lui donne un fond plein, assorti
   à la variante du nav (overlay foncé vs. nav-solid clair). */
@media (max-width: 991.98px) {
  .navbar-collapse {
    background: var(--lbft-navy);
    border-radius: var(--radius);
    margin-top: .75rem;
    padding: 1rem 1.25rem;
    box-shadow: 0 22px 50px -20px rgba(0, 0, 0, .45);
  }

  body.nav-solid .navbar-collapse {
    background: var(--lbft-cream);
    box-shadow: 0 22px 50px -20px rgba(0, 0, 0, .25);
  }
}

/*
  Variante sólida del nav para páginas que empiezan con una cabecera clara
  (.page-hero-light) en vez de foto oscura: el nav transparente con texto
  blanco se volvería invisible sobre fondo crema, igual que el bug del
  "RESERVER UN TERRAIN" corregido antes — mismo problema, contexto nuevo.
*/
body.nav-solid .navbar-brand-overlay {
  position: relative;
  background: var(--lbft-cream);
  border-bottom: 1px solid var(--lbft-hairline);
}

body.nav-solid .navbar-brand-overlay .navbar-nav .nav-link,
body.nav-solid .navbar-brand-overlay .navbar-brand {
  color: var(--lbft-ink);
}

body.nav-solid .navbar-brand-overlay .nav-cta {
  color: var(--lbft-indigo);
  border-bottom-color: var(--lbft-indigo);
}

body.nav-solid .navbar-brand-overlay .navbar-nav .nav-link:hover,
body.nav-solid .navbar-brand-overlay .navbar-nav .nav-link:focus {
  color: var(--lbft-navy);
}

/* Menú desplegable oscuro con icono + texto + flecha por item, en vez de
   una lista plana de links de texto. */
.dropdown-menu {
  border: 0;
  border-radius: var(--radius);
  box-shadow: 0 22px 50px -20px rgba(0, 0, 0, .45);
  padding: .6rem;
  margin-top: .75rem !important;
  min-width: 16rem;
  background: var(--lbft-navy);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: .85rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .92rem;
  color: #fff;
  border-radius: calc(var(--radius) - 2px);
  padding: .75rem .85rem;
  transition: background .15s var(--ease), color .15s var(--ease);
}

.dropdown-item:hover, .dropdown-item:focus {
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

.dropdown-item + li > .dropdown-item {
  margin-top: .15rem;
}

.dropdown-item .dd-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: var(--lbft-purple-light);
}

.dropdown-item .dd-icon svg {
  width: 1.1rem;
  height: 1.1rem;
}

.dropdown-item .dd-text {
  flex-grow: 1;
}

.dropdown-item .dd-arrow {
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-4px);
  color: var(--lbft-purple-light);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}

.dropdown-item:hover .dd-arrow {
  opacity: 1;
  transform: translateX(0);
}

/*
  CTA del nav: link de texto subrayado, no un botón en caja — como el
  "SCHEDULE AN EVALUATION" de la referencia. BUG ya corregido: el
  "!important" de aquí pisaba el blanco que necesitaba sobre la foto
  oscura del nav — nunca uses !important en un color que otro contexto
  (.navbar-brand-overlay) necesita poder sobreescribir.
*/
.nav-cta {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .85rem;
  text-decoration: none;
  border-bottom: 1px solid var(--lbft-indigo);
  color: var(--lbft-indigo);
  padding-bottom: .2rem;
}

.navbar-brand-overlay .nav-cta {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, .7);
}

/* Banda de CTA con foto real de fondo (como las secciones oscuras con foto
   de la referencia), en vez de un bloque de color sólido plano. */
.cta-photo {
  --hero-img: none;
  position: relative;
  padding: 5rem 0;
  background-color: var(--lbft-navy);
  background-image:
    linear-gradient(180deg, rgba(23, 20, 40, .55) 0%, rgba(17, 12, 46, .88) 100%),
    var(--hero-img);
  background-size: cover;
  background-position: center;
}

/*
  Cabecera de identidad de las páginas internas: banda compacta, foto
  confinada a la derecha vía degradado duro (no overlay uniforme de lado
  a lado como el hero de home) para que se lea como una pieza distinta del
  hero de portada, no el mismo bloque repetido en las 12 páginas.
  Cada plantilla solo define --hero-img inline; el resto lo controla esta clase.
*/
.page-hero {
  --hero-img: none;
  position: relative;
  padding: 7rem 0 2.75rem;
  color: #fff;
  background-color: var(--lbft-navy);
  background-image:
    linear-gradient(100deg, var(--lbft-navy) 40%, rgba(25, 16, 95, .55) 60%, rgba(25, 16, 95, .1) 100%),
    var(--hero-img);
  background-size: cover;
  background-position: center;
}

.page-hero .container {
  position: relative;
}

.page-hero .breadcrumb a {
  color: var(--lbft-purple-light);
}

.page-hero .eyebrow {
  color: var(--lbft-purple-light);
}

.page-hero .eyebrow::before {
  background: #fff;
}

.page-hero h1 {
  display: inline-block;
  position: relative;
  padding-bottom: .65rem;
  margin-bottom: 0;
  color: #fff;
}

.page-hero h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3.5rem;
  height: 4px;
  border-radius: 2px;
  background: var(--lbft-indigo);
}

/*
  Hero de portada: split texto/foto con corte diagonal (arquetipo
  ASYMMETRIC) — texto a la izquierda sobre navy sólido, foto real a la
  derecha con el borde izquierdo cortado en diagonal. Cifras del club con
  icono, no solo número — mismo espíritu que la referencia, con nuestra
  paleta y tipografía.
*/
.hero-home {
  position: relative;
  overflow: hidden;
  min-height: 82vh;
  display: flex;
  align-items: center;
  background: var(--lbft-navy);
}

.hero-home .hero-text {
  position: relative;
  z-index: 2;
  padding: 7rem 0 3rem;
}

.hero-home .hero-photo {
  position: absolute;
  inset: 0;
  left: 46%;
  clip-path: polygon(6% 0, 100% 0, 100% 100%, 0% 100%);
}

.hero-home .hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-home .hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(25, 16, 95, .5) 0%, rgba(25, 16, 95, 0) 30%);
}

@media (max-width: 991.98px) {
  .hero-home .hero-photo {
    display: none;
  }
}

.hero-stats {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .25);
}

.hero-stats .stat-item {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.stat-icon {
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  color: var(--lbft-purple-light);
}

.hero-stats .num {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
}

.hero-stats .lbl {
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .65);
  margin-top: .15rem;
}

/*
  Bloque de testimonio real (citation d'un dirigeant du club) en fondo
  sólido de marca: único momento de máximo contraste de la home aparte del
  hero (checklist anti-genérico, punto 8). Marca de agua del logo real +
  comilla tipográfica gigante como únicos elementos decorativos.
*/
.testimonial-block {
  position: relative;
  background: var(--lbft-navy);
  color: #fff;
  overflow: hidden;
}

.testimonial-block .logo-watermark {
  position: absolute;
  right: -3rem;
  top: 50%;
  transform: translateY(-50%);
  height: 14rem;
  opacity: .08;
  filter: brightness(0) invert(1);
}

.testimonial-block blockquote {
  position: relative;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -.005em;
}

.testimonial-block blockquote::before {
  content: "\201C";
  display: block;
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  color: var(--lbft-indigo);
  margin-bottom: -1rem;
}

.agenda-item {
  padding-top: 1.25rem;
  margin-top: 1.25rem;
  border-top: 1px solid var(--lbft-hairline);
}

.agenda-item:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}