/* ==========================================================================
   AREA UNITED · Página Fight Club (fight-club.html)
   Hero de página, datos, fichas por disciplina y tarifas. Reutiliza
   p2-fightclub.css (datos, horario, fotos) y p2-base.css. Prefijo p2-fcd-.
   ========================================================================== */

/* --- Enlace activo en cabecera y menú --- */
.nav-link[aria-current="page"]::after { transform: scaleX(1); }
.mm-link[aria-current="page"] { color: var(--yellow); }

/* --- Titulares de sección: la escala de la parte 2 (fuera de #part2) --- */
.p2-fcd .section-head h2 { font-size: var(--p2-fs-h2); max-width: 16ch; }
.p2-fcd .section-head { margin-bottom: clamp(32px, 4.5vw, 56px); }

/* --- Revelado propio (html.fc-anim lo pone js/fightclub-page.js) --- */
html.fc-anim [data-fc-split] .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 50ms);
}
html.fc-anim [data-fc-split].is-in .w { opacity: 1; transform: none; }
html.fc-anim .fc-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
  transition-delay: var(--d, 100ms);
}
html.fc-anim .fc-reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   HERO DE PÁGINA
   ========================================================================== */
.p2-fcd-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 78vh;
  display: grid;
  align-items: end;
  padding-top: calc(var(--header-h) + 56px);
  padding-bottom: 56px;
  background: var(--black-pure);
}
.p2-fcd-hero-bg { position: absolute; inset: 0; z-index: -2; }
.p2-fcd-hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.6) contrast(1.15) brightness(.55);
}
.p2-fcd-hero-shade {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 40%, rgba(0,0,0,.92) 100%);
}
.p2-fcd-hero-body { position: relative; z-index: 1; display: grid; gap: 18px; justify-items: start; }
.p2-fcd-back { font-size: 14px; color: var(--gray-text); }
.p2-fcd-back:hover { color: var(--white); }
.p2-fcd-back .arrow { transition: transform var(--t-base) var(--ease-out); }
.p2-fcd-back:hover .arrow { transform: translateX(-6px); }
.p2-fcd-hero .p2-fc-lockup { margin-top: 8px; }
.p2-fcd-hero .p2-tag { color: var(--yellow); }
.p2-fcd-title { font-size: var(--fs-h2); max-width: 12ch; }
.p2-fcd-hero .lead { color: #D6D6D4; }
.p2-fcd-hero .p2-actions { margin-top: 8px; }

/* ==========================================================================
   DATOS · tres datos a la izquierda, foto a la derecha
   ========================================================================== */
.p2-fcd-about { border-top: 0 !important; }
.p2-fcd-about-grid { display: grid; gap: 40px; }
.p2-fcd-about-photo { aspect-ratio: 4 / 5; max-width: 520px; }

/* ==========================================================================
   FICHAS POR DISCIPLINA
   ========================================================================== */
.p2-fcd-cards { display: grid; }
.p2-fcd-card {
  display: grid;
  gap: 32px;
  padding-block: 48px;
  border-top: 1px solid var(--surface-2);
}
.p2-fcd-card:last-child { border-bottom: 1px solid var(--surface-2); }
.p2-fcd-card-media { max-width: 520px; }
.p2-fcd-photo { aspect-ratio: 4 / 5; margin: 0; }

.p2-fcd-card-body { display: grid; gap: 28px; align-content: start; }
.p2-fcd-card-head { display: grid; gap: 10px; }
.p2-fcd-name { font-size: clamp(48px, 7vw, 96px); }
.p2-fcd-tagline {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--yellow);
}
.p2-fcd-card-detail { display: grid; gap: 28px; align-content: start; }

/* Horario: reutiliza .p2-fc-days / .p2-fc-slot de p2-fightclub.css */
.p2-fcd-schedule { display: grid; gap: 14px; }
.p2-fcd-schedule h4 { margin: 0; font-weight: 400; }

/* ==========================================================================
   TARIFAS (bloque claro)
   ========================================================================== */
.p2-fcd-pricing-grid { display: grid; gap: 40px; }
.p2-fcd-table-wrap { display: grid; gap: 12px; justify-items: start; }
.p2-fcd-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--gray-line-light);
}
.p2-fcd-table th, .p2-fcd-table td { text-align: left; vertical-align: middle; }
.p2-fcd-table thead th {
  padding: 12px 10px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--gray-text-light);
  background: var(--off-white);
  border-bottom: 1px solid var(--black-pure);
}
.p2-fcd-table thead th:first-child { padding-left: 14px; }
.p2-fcd-table tbody tr { border-bottom: var(--line); }
.p2-fcd-table tbody tr:last-child { border-bottom: 0; }
.p2-fcd-table tbody th {
  padding: 12px 10px 12px 14px;
  font-weight: 400;
  font-size: 13px;
  color: var(--gray-text-light);
  white-space: nowrap;
}
.p2-fcd-table tbody th b { font-weight: 400; font-size: 32px; line-height: 1; color: var(--black-pure); margin-right: 8px; }
.p2-fcd-table tbody td { padding: 12px 10px; white-space: nowrap; }
.p2-fcd-table tbody td b { font-weight: 400; font-size: 28px; line-height: 1; color: var(--black-pure); }
.p2-fcd-table tbody td span { font-size: 12px; color: var(--gray-text-light); margin-left: 4px; }
.p2-fcd-both { display: none; }           /* pictogramas boxeo + grappling: solo con sitio */
.p2-fcd-both .p2-icon-24 { width: 18px; height: 18px; color: var(--black-pure); }

.p2-fcd-includes-wrap { display: grid; gap: 16px; align-content: start; }
.p2-fcd-includes-wrap > h3 { margin: 0; font-weight: 400; color: var(--black-pure); }
.p2-fcd-includes { display: grid; border-top: 1px solid var(--black-pure); }
.p2-fcd-includes li {
  padding: 12px 0 12px 22px;
  position: relative;
  border-bottom: var(--line);
  font-size: 15px;
  line-height: 1.5;
  color: var(--gray-text-light);
}
.p2-fcd-includes li::before {       /* cuadrado amarillo, como el label de los bloques claros */
  content: "";
  position: absolute;
  left: 0; top: 19px;
  width: 10px; height: 10px;
  background: var(--yellow);
}
.p2-fcd-pricing-actions { margin-top: 12px; }

/* ==========================================================================
   TABLET
   ========================================================================== */
@media (min-width: 768px) {
  .p2-fcd-hero { min-height: 72vh; padding-bottom: 72px; }
  .p2-fcd-hero-body { gap: 20px; }
  .p2-fcd-table thead th { padding: 14px 16px; }
  .p2-fcd-table tbody th { padding: 14px 16px; }
  .p2-fcd-table tbody th b { font-size: 36px; }
  .p2-fcd-table tbody td { padding: 14px 16px; }
  .p2-fcd-table tbody td b { font-size: 32px; }
  .p2-fcd-both { display: inline-flex; gap: 6px; margin-left: 14px; vertical-align: middle; }
}

/* ==========================================================================
   ESCRITORIO
   ========================================================================== */
@media (min-width: 1024px) {
  .p2-fcd-hero { min-height: 82vh; padding-bottom: 88px; }
  .p2-fcd-hero .p2-fc-lockup { height: 64px; }
  .p2-fcd-about-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: center; }
  .p2-fcd-about-photo { max-width: none; }

  /* Con foto: foto 5 / texto 7 (alternando lados). Sin foto: cabecera 5 / horario 7 */
  .p2-fcd-card { padding-block: 64px; gap: 64px; }
  .p2-fcd-card--photo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .p2-fcd-card--photo .p2-fcd-card-media { max-width: none; position: sticky; top: calc(var(--header-h) + 24px); }
  .p2-fcd-card--alt .p2-fcd-card-media { order: 2; }
  .p2-fcd-card--alt .p2-fcd-card-body { order: 1; }
  .p2-fcd-card--text .p2-fcd-card-body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
  .p2-fcd-card-body { gap: 32px; }

  .p2-fcd-pricing-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; }
}
@media (min-width: 1280px) {
  .p2-fcd-about-grid, .p2-fcd-card, .p2-fcd-pricing-grid, .p2-fcd-card--text .p2-fcd-card-body { gap: 96px; }
}

/* Reduced motion: el hero no anima nada propio; el revelado lo gestiona el JS */
@media (prefers-reduced-motion: reduce) {
  html.fc-anim [data-fc-split] .w, html.fc-anim .fc-reveal { opacity: 1; transform: none; }
}