:root {
  --bg: #090909;
  --panel: #121212;
  --panel2: #191919;
  --card-bg: #141414;
  --text: #f5f5f7;
  --muted: #a1a1aa;
  --line: #262626;
  --line-strong: #383838;
  --accent: #e11d48;
  --accent-hover: #be123c;
  --accent-glow: rgba(225, 29, 72, 0.35);
  --accent-gradient: linear-gradient(135deg, #e11d48 0%, #9f1239 100%);
  --ig-gradient: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  --wa-green: #25d366;
  --wa-green-hover: #20ba5a;
  --danger: #ef4444;
  --max: 1240px;
  --pad: clamp(18px, 4vw, 54px);
  --font-display: 'Bebas Neue', Impact, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --radius-sm: 4px;
  --radius-md: 8px;
  --transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  scroll-behavior: smooth;
}

/* Saltos del menú (#horarios, #ubicacion...): lo buscado queda 24 px bajo la barra de arriba, sin
   hueco en blanco. La barra mide 73-76 px, pero entre 821 y 1100 px el menú ocupa dos líneas y
   crece: main.js pone su alto real en --cabecera. Las secciones ya traen su relleno de arriba
   (110 px; 56 px hasta 820 px de ancho), así que a ellas solo les falta lo que no cubre ese relleno. */
[id] {
  scroll-margin-top: calc(var(--cabecera, 76px) + 24px);
}

.section[id] {
  scroll-margin-top: max(0px, calc(var(--cabecera, 76px) + 24px - 110px));
}

@media (max-width: 819.98px) {
  .section[id] {
    scroll-margin-top: calc(var(--cabecera, 76px) + 24px - 56px);
  }
}

/* «Inicio» sube del todo arriba */
#inicio {
  scroll-margin-top: 100vh;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: 12px;
  top: 12px;
  z-index: 9999;
  background: #fff;
  color: #000;
  padding: 10px 18px;
  font-weight: 700;
}

/* TOP ANNOUNCEMENT BANNER */
.announcement-bar {
  display: none;
  background: var(--accent);
  color: #fff;
  padding: 10px var(--pad);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-align: center;
  position: relative;
  z-index: 101;
}

.announcement-bar.active {
  display: block;
}

.announcement-bar a {
  text-decoration: underline;
  margin-left: 8px;
  color: #fff;
}

/* TOPBAR */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px var(--pad);
  background: rgba(9, 9, 9, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 0.06em;
}

.logo-mark {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 16px var(--accent-glow);
}

.nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.nav a {
  position: relative;
}

.nav a:not(.nav-cta):not(.admin-nav-btn):hover {
  color: var(--accent);
}

.admin-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--line-strong);
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: #bbb;
  cursor: pointer;
  transition: var(--transition);
}

.admin-nav-btn:hover {
  background: #252525;
  color: var(--accent);
  border-color: var(--accent);
}

.nav-cta {
  background: var(--accent);
  color: #fff !important;
  padding: 10px 18px;
  font-weight: 800;
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 12px var(--accent-glow);
}

.nav-cta:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.menu-btn {
  display: none;
  background: transparent;
  color: #fff;
  border: 1px solid var(--line-strong);
  padding: 10px 14px;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.05em;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

/* TYPOGRAPHY UTILS */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.eyebrow::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

h1, .section-head h2, .quote-band h2, .split-copy h2, .faq h2 {
  font-family: var(--font-display);
  line-height: 0.88;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.hero h1 {
  font-size: clamp(56px, 10vw, 130px);
  margin: 0.1em 0 0.25em;
  color: #ffffff;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.8);
}

.section-head h2 {
  font-size: clamp(44px, 6.5vw, 92px);
  margin-top: 6px;
}

/* HERO SECTION - DESKTOP FIRST (COMPACT, BALANCED, ZERO AIR) */
.hero {
  min-height: calc(100vh - 105px);
  max-height: 840px;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #090909;
}

.hero-media {
  position: absolute;
  inset: 0;
  background-image: url('../img/boxeador-jk1-boxing-badalona.webp');
  background-size: cover;
  background-position: right top;
  background-repeat: no-repeat;
  transition: opacity 0.5s ease;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, 
    #090909 0%, 
    rgba(9, 9, 9, 0.96) 38%, 
    rgba(9, 9, 9, 0.72) 55%, 
    rgba(9, 9, 9, 0.2) 85%, 
    rgba(9, 9, 9, 0) 100%
  ),
  linear-gradient(0deg, #090909 0%, rgba(9, 9, 9, 0) 25%);
}

.hero-content {
  position: relative;
  z-index: 2;
  width: min(var(--max), 100%);
  margin: 0 auto;
  padding: 48px var(--pad);
}

.hero-content .eyebrow {
  color: var(--accent);
  font-weight: 800;
  letter-spacing: 0.12em;
  font-size: 13px;
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(62px, 8.5vw, 118px);
  line-height: 0.92;
  margin: 0 0 16px;
  color: #ffffff;
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.9);
  letter-spacing: 0.02em;
}

.lead {
  max-width: 620px;
  font-size: clamp(16px, 1.4vw, 20px);
  color: #e2e2e0;
  line-height: 1.55;
  font-weight: 400;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 32px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  box-shadow: 0 4px 20px var(--accent-glow);
}

.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(225, 29, 72, 0.5);
}

.btn-whatsapp {
  background: var(--wa-green);
  color: #fff;
  border: 1px solid var(--wa-green);
  box-shadow: 0 4px 18px rgba(37, 211, 102, 0.25);
}

.btn-whatsapp:hover {
  background: var(--wa-green-hover);
  border-color: var(--wa-green-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.4);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(8px);
}

.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(231, 255, 56, 0.06);
  transform: translateY(-2px);
}

/* RATING STRIP */
.rating-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 26px var(--pad);
  max-width: var(--max);
  margin: auto;
  border-bottom: 1px solid var(--line);
}

.rating-badge {
  display: flex;
  align-items: center;
  gap: 16px;
}

.rating-number {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1;
  color: var(--accent);
}

.stars {
  color: var(--accent);
  font-size: 18px;
  letter-spacing: 2px;
  margin-bottom: 2px;
}

.rating-meta span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
}

.rating-location {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #bbb;
}

.live-indicator {
  width: 10px;
  height: 10px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 10px #10b981;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

/* SECTIONS COMMON */
.section {
  max-width: var(--max);
  margin: auto;
  padding: 110px var(--pad);
}

.section-head {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 32px;
  align-items: flex-end;
  margin-bottom: 56px;
}

.section-head h2 {
  grid-column: 1 / -1;
}

.section-head > p:last-child {
  max-width: 580px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
}

/* DISCIPLINAS / CARDS */
.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.card {
  min-height: 320px;
  padding: 42px;
  background: var(--card-bg);
  display: flex;
  flex-direction: column;
  transition: var(--transition);
}

.card:hover {
  background: #191919;
}

.card-num {
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.15em;
}

.card h3 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 56px);
  letter-spacing: 0.02em;
  margin: 40px 0 10px;
  color: #fff;
}

.card p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  max-width: 380px;
}

.card .card-cta {
  margin-top: auto;
  padding-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: #fff;
}

.card:hover .card-cta {
  color: var(--accent);
  transform: translateX(4px);
}

/* SECTION JORDI / SPLIT */
.dark-section {
  background: #111111;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: none;
  padding: 0;
}

.portrait {
  min-height: 700px;
  position: relative;
  background-image: url('../img/jordi-querol-entrenador-boxeo-badalona.webp');
  background-size: cover;
  background-position: center 15%;
  background-repeat: no-repeat;
  background-color: #171717;
}

.portrait-banner {
  position: absolute;
  bottom: 30px;
  left: 30px;
  right: 30px;
  text-align: left;
  padding: 24px;
  border: 1px solid var(--line-strong);
  background: rgba(9, 9, 9, 0.75);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-sm);
}

.portrait-banner .fighter-nick {
  font-family: var(--font-display);
  font-size: 42px;
  color: var(--accent);
  line-height: 1;
}

.portrait-banner p {
  color: #ddd;
  font-size: 13px;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}

.split-copy {
  padding: 100px var(--pad);
  max-width: 680px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.split-copy h2 {
  font-size: clamp(52px, 7vw, 100px);
  margin-bottom: 18px;
}

.split-copy p {
  font-size: 17px;
  color: #ccc;
  line-height: 1.65;
}

.tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 28px 0;
}

.tags span {
  border: 1px solid var(--line-strong);
  background: #171717;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #ddd;
  border-radius: var(--radius-sm);
}

.text-link {
  font-weight: 800;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.text-link:hover {
  text-decoration: underline;
  transform: translateX(4px);
}

/* TIMELINE */
.timeline {
  border-top: 1px solid var(--line);
}

.timeline article {
  display: grid;
  grid-template-columns: 220px 1.2fr 1fr;
  gap: 26px;
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
  transition: var(--transition);
}

.timeline article:hover {
  background: rgba(255, 255, 255, 0.015);
  padding-left: 12px;
}

.timeline b {
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.timeline h3 {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.02em;
  margin: 0;
  color: #fff;
}

.timeline p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

/* TARIFAS Y PLANES */
.pricing-section {
  border-top: 1px solid var(--line);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.pricing-card,
.price-card {
  position: relative;
  background: #141414;
  border: 1px solid #333333;
  border-radius: var(--radius-md);
  padding: 38px 28px;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.pricing-card:hover,
.price-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(225, 29, 72, 0.25);
}

.pricing-card.featured,
.price-card.featured {
  border-color: var(--accent);
  background: linear-gradient(180deg, #1f1214 0%, #141414 70%);
  box-shadow: 0 10px 30px rgba(225, 29, 72, 0.25);
}

.popular-badge {
  position: absolute;
  top: -12px;
  right: 24px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
  padding: 4px 12px;
  border-radius: 20px;
  text-transform: uppercase;
}

.pricing-card .plan-tier {
  font-size: 12px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.pricing-card h3 {
  font-family: var(--font-display);
  font-size: 38px;
  letter-spacing: 0.02em;
  margin: 8px 0 14px;
}

.pricing-card .plan-price {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--accent);
  margin-bottom: 12px;
}

.pricing-card .plan-desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 24px;
  min-height: 42px;
}

.pricing-features {
  list-style: none;
  border-top: 1px solid var(--line);
  padding-top: 20px;
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pricing-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #ddd;
}

.pricing-features li::before {
  content: '✓';
  color: var(--accent);
  font-weight: 900;
}

.pricing-card .btn,
.price-card .btn,
.pricing-card .card-cta,
.price-card .card-cta {
  margin-top: auto;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 20px;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff !important;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.05em;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: var(--transition);
}

.pricing-card .card-cta:hover,
.price-card .card-cta:hover,
.pricing-card .btn:hover,
.price-card .btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: 0 0 20px var(--accent-glow);
  transform: translateY(-2px);
}

/* HORARIOS Y FILTRO INTERACTIVO */
.timetable-section {
  border-top: 1px solid var(--line);
}

.schedule-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.filter-btn {
  background: #171717;
  color: #aaa;
  border: 1px solid var(--line);
  padding: 9px 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}

.filter-btn:hover {
  color: #fff;
  border-color: #555;
}

.filter-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
}

table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
}

th, td {
  padding: 16px 18px;
  border-right: 1px solid #222;
  border-bottom: 1px solid #222;
  text-align: left;
  vertical-align: middle;
  font-size: 14px;
  transition: var(--transition);
}

th {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.05em;
  color: var(--accent);
  background: #141414;
}

td:first-child {
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.02);
}

.separator td {
  background: #191919;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.05em;
  padding: 10px 18px;
}

/* Filter highlight states */
td.class-highlight {
  background: rgba(231, 255, 56, 0.15) !important;
  color: #ffffff !important;
  font-weight: 700;
  border-left: 2px solid var(--accent);
}

td.class-dimmed {
  opacity: 0.35;
}

.mobile-hint {
  display: none;
  color: #888;
  font-size: 12px;
  margin-top: 12px;
}

/* QUOTE BAND */
.quote-band {
  padding: 100px var(--pad);
  background: linear-gradient(135deg, #160408 0%, #20040b 50%, #0d0205 100%);
  border-top: 1px solid rgba(225, 29, 72, 0.4);
  border-bottom: 1px solid rgba(225, 29, 72, 0.4);
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.quote-band::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 300px;
  background: radial-gradient(circle, rgba(225, 29, 72, 0.22) 0%, transparent 70%);
  pointer-events: none;
}

.quote-band .eyebrow-dark {
  display: inline-block;
  font-weight: 900;
  letter-spacing: 0.2em;
  font-size: 13px;
  color: var(--accent);
  margin-bottom: 12px;
  text-shadow: 0 0 12px var(--accent-glow);
}

.quote-band h2 {
  font-size: clamp(44px, 7vw, 108px);
  max-width: 1100px;
  margin: 0 auto 28px;
  color: #fff;
  line-height: 0.95;
}

.quote-band a {
  display: inline-block;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: #fff;
  background: rgba(225, 29, 72, 0.2);
  border: 1px solid var(--accent);
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.quote-band a:hover {
  background: var(--accent);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 20px var(--accent-glow);
}

/* REVIEWS */
.reviews {
  border-top: 1px solid var(--line);
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 34px;
}

.review-card {
  padding: 38px;
  border: 1px solid var(--line);
  background: var(--card-bg);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.review-card .review-stars {
  color: var(--accent);
  margin-bottom: 16px;
  font-size: 16px;
}

.review-card blockquote {
  font-size: clamp(19px, 2.2vw, 28px);
  font-weight: 700;
  line-height: 1.35;
  color: #f0f0ec;
  margin: 0 0 24px;
}

.review-card cite {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--muted);
  font-style: normal;
}

.reviewer-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #2a2a2a;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: var(--accent);
}

/* LOCATION */
.location {
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 52px;
  align-items: stretch;
}

.location address {
  font-style: normal;
  font-size: 24px;
  font-weight: 700;
  margin: 24px 0 16px;
  line-height: 1.4;
  color: #fff;
}

.location p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

.location-info-list {
  list-style: none;
  margin: 24px 0 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.location-info-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #ccc;
}

.location iframe {
  width: 100%;
  min-height: 480px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  filter: none !important;
}

/* FAQ */
.faq {
  border-top: 1px solid var(--line);
}

.faq-list {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq details {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 22px 26px;
  transition: var(--transition);
}

.faq details[open] {
  border-color: var(--line-strong);
  background: #181818;
}

.faq summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 0.03em;
  color: #fff;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '+';
  color: var(--accent);
  font-size: 28px;
  font-family: var(--font-body);
  transition: transform 0.2s ease;
}

.faq details[open] summary::after {
  content: '−';
  transform: rotate(180deg);
}

.faq details p {
  color: var(--muted);
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.6;
}

/* FOOTER */
footer {
  padding: 50px var(--pad);
  border-top: 1px solid var(--line);
  background: #060606;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr auto;
  align-items: center;
}

footer .footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 24px;
}

footer p, footer small {
  grid-column: 1 / -1;
  color: #777;
  font-size: 13px;
}

/* FLOATING WHATSAPP BUTTON */
.wa-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--wa-green);
  color: #fff;
  padding: 12px 20px;
  border-radius: 50px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.04em;
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.4);
  transition: var(--transition);
}

.wa-float:hover {
  background: var(--wa-green-hover);
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 30px rgba(37, 211, 102, 0.55);
}

.wa-float svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

/* ==========================================================================
   ADMIN & USER PROFILE MODAL (DASHBOARD GESTOR)
   ========================================================================== */
.admin-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.admin-modal-overlay.open {
  display: flex;
}

.admin-modal-container {
  background: #121212;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  width: min(940px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(231, 255, 56, 0.1);
  overflow: hidden;
  animation: adminFadeIn 0.25s ease-out;
}

@keyframes adminFadeIn {
  from { opacity: 0; transform: scale(0.97) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.admin-header {
  padding: 20px 28px;
  background: #181818;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.admin-header h2 {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.04em;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-header .admin-badge {
  background: var(--accent);
  color: #000;
  font-size: 11px;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.1em;
}

.admin-close-btn {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: #aaa;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 16px;
  transition: var(--transition);
}

.admin-close-btn:hover {
  background: #252525;
  color: #fff;
  border-color: #555;
}

/* Admin Tabs */
.admin-tabs {
  display: flex;
  gap: 2px;
  background: #0e0e0e;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

.admin-tab {
  padding: 14px 22px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: #999;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
}

.admin-tab:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.02);
}

.admin-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: rgba(231, 255, 56, 0.05);
}

/* Modal Body */
.admin-body {
  padding: 28px;
  overflow-y: auto;
  flex: 1;
}

.admin-view {
  display: none;
}

.admin-view.active {
  display: block;
}

/* Form Styles inside Admin */
.admin-card-section {
  background: #171717;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 20px;
  margin-bottom: 20px;
}

.admin-card-section h3 {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.03em;
  color: var(--accent);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.admin-field {
  margin-bottom: 16px;
}

.admin-field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #bbb;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.admin-input, .admin-textarea, .admin-select {
  width: 100%;
  background: #0d0d0d;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: #fff;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  transition: var(--transition);
}

.admin-input:focus, .admin-textarea:focus, .admin-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
}

.admin-textarea {
  resize: vertical;
  min-height: 70px;
}

/* Schedule Table Editor inside Admin */
.admin-schedule-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-bottom: 16px;
}

.admin-schedule-table th, .admin-schedule-table td {
  padding: 8px 10px;
  border: 1px solid var(--line);
}

.admin-schedule-table th {
  background: #202020;
  color: var(--accent);
  font-size: 11px;
}

.admin-schedule-table input {
  width: 100%;
  background: #111;
  border: 1px solid #333;
  color: #fff;
  padding: 6px;
  font-size: 12px;
  border-radius: 2px;
}

.admin-schedule-table input:focus {
  border-color: var(--accent);
  outline: none;
}

.admin-btn-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-btn-action {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 800;
  background: #222;
  color: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}

.admin-btn-action:hover {
  background: #333;
  border-color: #666;
}

.admin-btn-danger {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.4);
}

.admin-btn-danger:hover {
  background: var(--danger);
  color: #fff;
}

/* Modal Footer */
.admin-footer {
  padding: 18px 28px;
  background: #181818;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.admin-save-btn {
  background: var(--accent);
  color: #000;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.05em;
  padding: 12px 24px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: 0 4px 16px var(--accent-glow);
  transition: var(--transition);
}

.admin-save-btn:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
}

.admin-reset-btn {
  background: transparent;
  color: #888;
  border: 1px solid var(--line-strong);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  cursor: pointer;
  transition: var(--transition);
}

.admin-reset-btn:hover {
  color: #fff;
  border-color: #666;
}

/* Image preview thumbnails in Admin */
.admin-preview-box {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
}

.admin-preview-img {
  width: 120px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: #000;
}

/* Toast notification */
.admin-toast {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 10000;
  background: var(--accent);
  color: #000;
  font-weight: 800;
  font-size: 14px;
  padding: 14px 22px;
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
  transform: translateY(-100px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.admin-toast.show {
  transform: translateY(0);
  opacity: 1;
}

/* RESPONSIVE DESIGN */
@media (max-width: 992px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
  }
}

@media (max-width: 819.98px) {
  .nav {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: #0c0c0c;
    padding: 26px var(--pad);
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    border-bottom: 1px solid var(--line-strong);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.9);
  }

  .nav.open {
    display: flex;
  }

  .menu-btn {
    display: block;
  }

  .hero {
    min-height: 700px;
  }

  .hero h1 {
    font-size: clamp(52px, 16vw, 86px);
  }

  .section {
    padding-top: 76px;
    padding-bottom: 76px;
  }

  .section-head {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .split {
    grid-template-columns: 1fr;
  }

  .portrait {
    min-height: 480px;
  }

  .timeline article {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .review-grid {
    grid-template-columns: 1fr;
  }

  .location {
    grid-template-columns: 1fr;
  }

  .mobile-hint {
    display: block;
  }

  footer {
    grid-template-columns: 1fr;
  }

  .wa-float span {
    display: none;
  }

  .wa-float {
    padding: 16px;
    border-radius: 50%;
    bottom: 20px;
    right: 20px;
  }

  .admin-modal-container {
    max-height: 95vh;
  }
  
  .admin-header h2 {
    font-size: 22px;
  }
  
  .admin-body {
    padding: 18px;
  }
}

/* Brand/photo preservation: original team mark and full uncropped supplied photos. */
.brand-logo{width:44px;height:44px;object-fit:contain;flex:0 0 auto;border-radius:50%;}
.footer-brand .brand-logo{width:48px;height:48px;}
/* Cleaned duplicate hero overrides */
.portrait{background-size:contain;background-position:center;background-color:#090909;}
.real-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start;}
.real-gallery .real-photo{margin:0;background:#111;border:1px solid var(--line);padding:10px;}
.real-gallery .real-photo:first-child{grid-row:span 2;}
.real-gallery .real-photo img{display:block;width:100%;height:auto;max-height:520px;object-fit:contain;background:#090909;}
.real-gallery figcaption{font-size:11px;color:#aaa;padding-top:8px;}
#admin-login-gate[hidden],.admin-tabs[hidden],.admin-body[hidden],.admin-footer[hidden]{display:none!important;}
.admin-status{margin:10px 0;color:var(--accent);font-size:13px;}
.admin-plan{grid-template-columns:repeat(3,minmax(0,1fr));}
@media(max-width:700px){.hero-media{background-size:auto 78%;background-position:center top;}.hero-overlay{background:linear-gradient(0deg,rgba(9,9,9,.98) 0%,rgba(9,9,9,.55) 60%,rgba(9,9,9,.05) 100%);}.real-gallery{grid-template-columns:1fr;}.real-gallery .real-photo:first-child{grid-row:auto}.real-gallery .real-photo img{max-height:none}.admin-plan{grid-template-columns:1fr}}

.real-gallery {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) #111;
  padding: 8px 4px 18px;
  gap: 18px;
}

.real-gallery .real-photo-link {
  display: block;
  flex: 0 0 min(48%, 470px);
  max-width: 470px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  scroll-snap-align: start;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: var(--transition);
}

.real-gallery .real-photo {
  position: relative;
  margin: 0;
  background: #111;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px;
  width: 100%;
  overflow: hidden;
  transition: var(--transition);
}

.real-gallery .real-photo img {
  display: block;
  width: 100%;
  height: 290px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: #090909;
  transition: transform 0.45s ease;
}

.real-gallery .real-photo-link:hover .real-photo {
  border-color: var(--accent);
  box-shadow: 0 10px 30px rgba(225, 29, 72, 0.35);
  transform: translateY(-4px);
}

.real-gallery .real-photo-link:hover img {
  transform: scale(1.05);
}

.real-gallery .real-photo-link:hover figcaption {
  color: var(--accent);
}

.real-gallery .real-photo-link:hover figcaption span {
  text-decoration: underline;
}

.ig-card-badge {
  position: absolute;
  top: 22px;
  right: 22px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 6px 12px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition);
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.real-gallery .real-photo-link:hover .ig-card-badge {
  background: var(--ig-gradient);
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(220, 39, 67, 0.6);
  transform: scale(1.08);
}

.real-gallery figcaption {
  font-size: 12px;
  color: #bbb;
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 500;
  transition: var(--transition);
}

.real-gallery figcaption span {
  color: var(--accent);
  font-weight: 700;
}

.gallery-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  max-width: var(--max);
  margin: 14px auto 0;
}

.gallery-controls button {
  width: 44px;
  height: 44px;
  background: #111;
  color: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.gallery-controls button:hover {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 14px var(--accent-glow);
}

.gallery-controls span,
.gallery-social {
  font-size: 12px;
  color: #aaa;
}

.gallery-social a {
  color: var(--accent);
  font-weight: 700;
}

@media(max-width: 700px) {
  .real-gallery .real-photo-link {
    flex-basis: 88%;
  }
  .gallery-controls {
    justify-content: center;
  }
}

/* ==========================================================================
   FICHA DE ESTADÍSTICAS OFICIALES DE COMBATE (JORDI QUEROL)
   ========================================================================== */
.fighter-stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #0d0d0d;
  border-bottom: 1px solid var(--line);
}

.fighter-stat-item {
  padding: 24px var(--pad);
  border-right: 1px solid var(--line);
  text-align: center;
  transition: var(--transition);
}

.fighter-stat-item:last-child {
  border-right: none;
}

.fighter-stat-item:hover {
  background: rgba(225, 29, 72, 0.04);
}

.fighter-stat-val {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.2vw, 36px);
  color: #fff;
  letter-spacing: 0.04em;
  display: block;
  line-height: 1.1;
}

.fighter-stat-val.highlight {
  color: var(--accent);
  text-shadow: 0 0 16px var(--accent-glow);
}

.fighter-stat-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-top: 6px;
  display: block;
}

@media(max-width: 768px) {
  .fighter-stats-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .fighter-stat-item:nth-child(2) {
    border-right: none;
  }
  .fighter-stat-item {
    padding: 16px 12px;
    border-bottom: 1px solid var(--line);
  }
}

/* ==========================================================================
   SECCIÓN VIDEOTECA YOUTUBE: COMBATES EN ACCIÓN
   ========================================================================== */
.videos-section {
  background: #090909;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  margin-top: 36px;
}

.video-card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.video-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 10px 30px rgba(225, 29, 72, 0.25);
}

.video-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

.video-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.video-card:hover .video-thumb {
  transform: scale(1.06);
}

.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(225, 29, 72, 0.9);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 0 25px rgba(225, 29, 72, 0.6);
  transition: var(--transition);
}

.video-play-btn svg {
  width: 22px;
  height: 22px;
  fill: #fff;
  margin-left: 3px;
}

.video-card:hover .video-play-btn {
  transform: translate(-50%, -50%) scale(1.15);
  background: #e11d48;
  box-shadow: 0 0 35px rgba(225, 29, 72, 0.9);
}

.video-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
}

.video-duration {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
}

.video-info {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.video-title {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.04em;
  color: #fff;
  margin-bottom: 6px;
  line-height: 1.15;
}

.video-subtitle {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
  margin-bottom: 16px;
  flex: 1;
}

.video-cta {
  font-size: 12px;
  font-weight: 800;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* MODAL LIGHTBOX REPRODUCTOR YOUTUBE */
.video-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.94);
  backdrop-filter: blur(12px);
  padding: 20px;
  align-items: center;
  justify-content: center;
}

.video-modal-overlay.active {
  display: flex;
}

.video-modal-container {
  position: relative;
  width: min(960px, 100%);
  background: #111;
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  box-shadow: 0 0 50px rgba(225, 29, 72, 0.35);
  overflow: hidden;
}

.video-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background: #161616;
  border-bottom: 1px solid var(--line);
}

.video-modal-title {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.05em;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 85%;
}

.video-modal-close {
  background: none;
  border: none;
  color: #aaa;
  font-size: 26px;
  cursor: pointer;
  padding: 0 6px;
  line-height: 1;
  transition: color 0.2s;
}

.video-modal-close:hover {
  color: #fff;
}

.video-modal-frame-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.video-modal-frame-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* ==========================================================================
   HUB DE REDES SOCIALES: INSTAGRAM, FACEBOOK Y GOOGLE MAPS
   ========================================================================== */
.social-hub-section {
  background: #0d0d0d;
}

.social-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 36px;
}

.social-card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 26px;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
}

.social-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
}

.social-card.instagram:hover {
  border-color: #e1306c;
  box-shadow: 0 10px 30px rgba(225, 48, 108, 0.25);
}

.social-card.facebook:hover {
  border-color: #1877f2;
  box-shadow: 0 10px 30px rgba(24, 119, 242, 0.25);
}

.social-card.youtube:hover {
  border-color: #ff0000;
  box-shadow: 0 10px 30px rgba(255, 0, 0, 0.25);
}

.social-card.google:hover {
  border-color: #ea4335;
  box-shadow: 0 10px 30px rgba(234, 67, 53, 0.25);
}

.social-card-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.social-icon-box {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  flex-shrink: 0;
}

.social-icon-box svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

.social-icon-box.ig {
  background: var(--ig-gradient);
}

.social-icon-box.fb {
  background: #1877f2;
}

.social-icon-box.yt {
  background: #ff0000;
}

.social-icon-box.gmaps {
  background: #34a853;
}

.social-card h3 {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 2px;
}

.social-card span.handle {
  font-size: 13px;
  color: var(--muted);
}

.social-card p {
  font-size: 13px;
  color: #bbb;
  line-height: 1.5;
  margin-bottom: 20px;
  flex: 1;
}

.social-card .social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #181818;
  border: 1px solid var(--line-strong);
  color: #fff;
  transition: var(--transition);
}

.social-card:hover .social-btn {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 4px 16px var(--accent-glow);
}


.topbar-phone:hover {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 16px var(--accent-glow);
}
@media (max-width: 600px) {
  .topbar-phone {
    font-size: 11px !important;
    padding: 4px 8px !important;
  }
}
/* ==========================================================================
   TOP UTILITY BAR & TOPBAR ACTIONS (ANTI-CUTOFF ARCHITECTURE)
   ========================================================================== */
.top-utility-bar {
  background: #050505;
  border-bottom: 1px solid var(--line);
  padding: 7px var(--pad);
  font-size: 12px;
  color: var(--muted);
  position: relative;
  z-index: 102;
}

.utility-container {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.utility-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.utility-right {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

.utility-phone-link {
  color: #fff !important;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition);
}

.utility-phone-link:hover {
  color: var(--accent) !important;
}

.utility-wa-link {
  color: var(--wa-green) !important;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.topbar-phone-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: #fff !important;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: var(--transition);
}

.topbar-phone-pill:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 16px var(--accent-glow);
}

@media (max-width: 900px) {
  .utility-left {
    display: none;
  }
  .utility-right {
    width: 100%;
    justify-content: center;
    gap: 16px;
  }
}

/* ==========================================================================
   TIKTOK SOCIAL CARD STYLING
   ========================================================================== */
.social-card.tiktok:hover {
  border-color: #25f4ee;
  box-shadow: 0 10px 30px rgba(37, 244, 238, 0.25), 0 0 20px rgba(254, 44, 85, 0.25);
}

.social-icon-box.tt {
  background: #000;
  border: 1px solid #333;
}

.social-card.tiktok:hover .social-icon-box.tt {
  border-color: #fe2c55;
  box-shadow: 0 0 15px rgba(254, 44, 85, 0.7);
}

/* ==========================================================================
   3-COLUMN VIDEO GRID (BALANCED 3 COMBATES)
   ========================================================================== */
@media (min-width: 960px) {
  .video-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ==========================================================================
   REVIEWS / TESTIMONIOS (GOOGLE MAPS VERIFIED)
   ========================================================================== */
.reviews {
  background: #090909;
  position: relative;
}

.reviews-summary-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 16px 24px;
  margin-top: 24px;
  margin-bottom: 28px;
}

.google-badge-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.stars-gold, .review-stars {
  color: #fbbf24;
  letter-spacing: 2px;
  font-size: 1.15rem;
}

.rating-text {
  font-size: 0.9rem;
  color: var(--muted);
}

.rating-text strong {
  color: #fff;
  font-size: 1.05rem;
}

.btn-google-maps {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: var(--transition);
}

.btn-google-maps:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px var(--accent-glow);
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

.review-card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: var(--transition);
  position: relative;
}

.review-card:hover {
  transform: translateY(-4px);
  border-color: rgba(225, 29, 72, 0.5);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.review-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.reviewer-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #ff0055);
  color: #fff;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(225, 29, 72, 0.3);
}

.reviewer-meta {
  flex-grow: 1;
}

.reviewer-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 2px 0;
  text-transform: none;
  font-family: inherit;
}

.reviewer-role {
  font-size: 0.8rem;
  color: var(--muted);
  display: block;
}

.review-quote {
  font-size: 0.95rem;
  line-height: 1.65;
  color: #d1d5db;
  font-style: italic;
  margin-bottom: 20px;
  flex-grow: 1;
}

.review-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 14px;
}

.review-verified {
  font-size: 0.78rem;
  color: #10b981;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* ==========================================================================
   MOBILE FIRST & ALL-DEVICES RESPONSIVE OPTIMIZATION
   ========================================================================== */
@media (max-width: 819.98px) {
  .hero {
    min-height: 92svh !important;
    max-height: none !important;
    align-items: flex-end !important;
    padding-top: 70px !important;
  }

  .hero-media {
    background-size: cover !important;
    background-position: 70% top !important;
  }

  .hero-overlay {
    background: linear-gradient(180deg, 
      rgba(9, 9, 9, 0.1) 0%, 
      rgba(9, 9, 9, 0.45) 35%, 
      rgba(9, 9, 9, 0.88) 60%, 
      #090909 95%
    ) !important;
  }

  .hero-content {
    padding: 24px var(--pad) 34px !important;
    width: 100% !important;
  }

  .hero h1 {
    font-size: clamp(44px, 13.5vw, 68px) !important;
    line-height: 0.94 !important;
    margin-bottom: 12px !important;
  }

  .lead {
    font-size: 15px !important;
    line-height: 1.5 !important;
    max-width: 100% !important;
  }

  .hero-actions {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
    margin-top: 20px !important;
  }

  .hero-actions .btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px 20px !important;
  }

  /* Compact section headers on mobile */
  .section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  .section-head h2 {
    font-size: clamp(38px, 10vw, 54px) !important;
    line-height: 0.95 !important;
  }

  /* Single column cards on small screens */
  .cards {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Single column videos */
  .video-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  /* Single column reviews */
  .reviews-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Location map on mobile */
  .location iframe {
    min-height: 320px !important;
  }
}

@media (max-width: 480px) {
  :root {
    --pad: 16px;
  }

  .hero h1 {
    font-size: clamp(38px, 12vw, 48px) !important;
  }

  .lead {
    font-size: 14px !important;
  }

  .brand span {
    font-size: 14px !important;
  }
}


/* ==========================================================================
   WORDPRESS-STYLE CMS & LIVE VISUAL BUILDER STYLES
   ========================================================================== */
.live-cms-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10005;
  background: #0d0d0d;
  border-bottom: 2px solid var(--accent);
  padding: 10px var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.95);
  font-family: var(--font-body);
  animation: liveBarSlide 0.25s ease-out;
}

@keyframes liveBarSlide {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

.live-cms-info {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: #fff;
}

.live-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 12px #10b981;
  animation: livePulse 1.2s infinite;
  flex-shrink: 0;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.3); }
}

.live-cms-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-live-save {
  background: var(--accent);
  color: #000;
  font-weight: 900;
  font-size: 12px;
  padding: 8px 18px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: 0 2px 12px var(--accent-glow);
  transition: var(--transition);
}

.btn-live-save:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.btn-live-panel, .btn-live-exit {
  background: #222;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}

.btn-live-panel:hover {
  background: #333;
}

.btn-live-exit:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border-color: #f87171;
}

/* ==========================================================================
   MARCA DE AGUA EN GRIS "MODO EDICIÓN" EN TODA LA PANTALLA
   ========================================================================== */
.live-edit-watermark {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.035) 0,
    rgba(255, 255, 255, 0.035) 2px,
    transparent 2px,
    transparent 140px
  );
}

body.cms-live-active .live-edit-watermark {
  display: block;
}

.watermark-badge {
  position: fixed;
  z-index: 9992;
  pointer-events: none;
  background: rgba(20, 20, 20, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #888;
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.15em;
  padding: 8px 20px;
  border-radius: 4px;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  user-select: none;
}

.watermark-badge-bottom-left {
  bottom: 24px;
  left: 24px;
}

.watermark-badge-bottom-right {
  bottom: 24px;
  right: 24px;
}

/* Watermark diagonal texts across body */
body.cms-live-active::before {
  content: "MODO EDICIÓN  ·  MODO EDICIÓN  ·  MODO EDICIÓN  ·  MODO EDICIÓN";
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
  font-family: var(--font-display);
  font-size: clamp(38px, 8vw, 90px);
  font-weight: 900;
  letter-spacing: 0.25em;
  color: rgba(255, 255, 255, 0.045);
  pointer-events: none;
  white-space: nowrap;
  z-index: 9988;
  user-select: none;
}

/* Visual builder editing outline */
body.cms-live-active [data-cms],
body.cms-live-active [data-sched-cell] {
  outline: 2px dashed rgba(231, 255, 56, 0.6) !important;
  outline-offset: 3px;
  cursor: text !important;
  transition: outline-color 0.2s, background 0.2s;
}

body.cms-live-active [data-cms]:hover,
body.cms-live-active [data-sched-cell]:hover {
  outline-color: var(--accent) !important;
  background: rgba(231, 255, 56, 0.08) !important;
}

body.cms-live-active [data-cms]:focus,
body.cms-live-active [data-sched-cell]:focus {
  outline: 2px solid var(--accent) !important;
  background: rgba(231, 255, 56, 0.15) !important;
}

/* Schedule Table editing in Admin */
.admin-schedule-table input {
  width: 100%;
  background: #0d0d0d;
  border: 1px solid var(--line-strong);
  color: #fff;
  padding: 8px;
  font-size: 13px;
  border-radius: 3px;
  transition: border-color 0.2s;
}

.admin-schedule-table input:focus {
  border-color: var(--accent);
  background: #181818;
  outline: none;
}

/* Media selector cards in admin */
.admin-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 12px;
}

.admin-gallery-card {
  background: #111;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-gallery-card img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 4px;
  background: #000;
}

.admin-gallery-card label {
  font-size: 11px;
  color: #bbb;
  font-weight: 700;
}

.admin-download-btn {
  background: #2563eb;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  padding: 12px 20px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.admin-download-btn:hover {
  background: #1d4ed8;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
}
/* fix desbordamiento móvil */
.fighter-stats-strip{grid-template-columns:repeat(4,minmax(0,1fr))}
.fighter-stat-item{min-width:0;overflow-wrap:anywhere}
@media(max-width:768px){.fighter-stats-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Opiniones en móvil: la tarjeta ya no es más ancha que la pantalla (a 320 px se salía 15 px y la página se movía de lado) */
.review-card{min-width:0}
@media(max-width:819.98px){.reviews-grid{grid-template-columns:minmax(0,1fr)!important}}
/* Menú del móvil abierto: en pantallas bajas se desliza por dentro en vez de quedar cortado, y va por encima del aviso de cookies */
@media(max-width:819.98px){.nav.open{max-height:calc(100vh - 80px);max-height:calc(100dvh - 80px);overflow-y:auto;overscroll-behavior:contain}.topbar:has(.nav.open){z-index:10000}}
/* Al pulsar un apartado del menú, el apartado entero cabe en la pantalla con los botones de abajo
   (antes a 1418x695 «Comunidad» medía 902 px y debajo del menú caben unos 600: se cortaban las tarjetas;
   igual en «Disciplinas», «Jordi Querol» y «Combates»). Los tamaños siguen el alto de la pantalla (vh). */
@media (min-width: 820px) {
  .section-head{grid-template-columns:minmax(0,1fr);row-gap:0;margin-bottom:clamp(20px,3.6vh,44px)}
  .section-head > .eyebrow{grid-column:1;grid-row:1}
  .section-head h2{grid-column:1;grid-row:2;font-size:clamp(40px,min(5.6vw,8.4vh,76px),92px)}
  .section-head > p:last-child{grid-column:1;grid-row:3;max-width:760px;margin:clamp(8px,1.6vh,16px) 0 0}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card{min-height:0;padding:clamp(22px,3.4vh,36px) clamp(18px,1.8vw,30px)}
  .card h3{font-size:clamp(26px,min(2.6vw,5.2vh),46px);margin:clamp(12px,2.6vh,30px) 0 8px}
  .card p{font-size:14px;line-height:1.55}
  .card .card-cta{padding-top:18px;line-height:1.4}
  .portrait{min-height:clamp(420px,calc(100vh - var(--cabecera, 76px) - 60px),700px)}
  .split-copy{padding:clamp(24px,5vh,100px) var(--pad)}
  .split-copy h2{font-size:clamp(46px,min(6vw,10vh),100px)}
  .split-copy p{font-size:16px;line-height:1.6}
  .split-copy .tags{margin:clamp(14px,2.6vh,28px) 0}
  .video-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;margin-top:0}
  .video-info{padding:16px 18px}
  .social-hub-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:0}
  .social-card{padding:20px 18px}
  .social-card-top{gap:12px;margin-bottom:12px}
  .social-icon-box{width:42px;height:42px}
  .social-card p{font-size:12.5px;margin-bottom:14px}
  .social-card .social-btn{padding:9px 8px;font-size:11px;letter-spacing:.03em;text-align:center}
  .location{gap:40px}
  .location address{font-size:21px;margin:14px 0 10px}
  .location-info-list{margin:16px 0 22px;gap:8px}
  .location iframe,.location .ilw-map{min-height:min(480px,calc(100vh - var(--cabecera, 76px) - 80px))!important}
}
/* Ordenador: las 4 disciplinas y las 5 redes en una sola fila (en las redes, el icono encima del nombre para que todas queden alineadas) */
@media (min-width: 960px) {
  .cards{grid-template-columns:repeat(4,minmax(0,1fr))}
  .social-hub-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .social-card-top{flex-direction:column;align-items:flex-start;gap:10px}
}
@media (min-width: 1200px) {
  .social-card .social-btn{white-space:nowrap}
}
/* Portátil pequeño (1024 px): los dos botones de «Ubicación» en una fila */
@media (min-width: 960px) and (max-width: 1199px) {
  .location .hero-actions{flex-wrap:nowrap;gap:10px}
  .location .hero-actions .btn{padding-left:16px;padding-right:16px;font-size:12px;white-space:nowrap}
}
/* Al pulsar un apartado del menú (o un botón que salta a él), el apartado ocupa justo la pantalla que
   queda bajo la barra de arriba y su contenido queda centrado, con el mismo aire arriba y abajo.
   Solo los apartados del menú: «Opiniones» y las preguntas siguen con su alto, sin franjas vacías */
@media (min-width: 820px) {
  #disciplinas, #jordi, #combates, #horarios, #comunidad, #ubicacion {
    min-height: calc(100vh - var(--cabecera, 76px));
    min-height: calc(100svh - var(--cabecera, 76px));
    display: flex;
    flex-direction: column;
    justify-content: center;
    scroll-margin-top: var(--cabecera, 76px);
  }
  #disciplinas, #combates, #horarios, #comunidad, #ubicacion { padding-top: clamp(12px, 2vh, 40px); padding-bottom: clamp(12px, 2vh, 40px); }
  #disciplinas > *, #jordi > *, #combates > *, #horarios > *, #comunidad > * { width: 100%; }
  /* «Ubicación» sigue en dos columnas (texto y mapa), centradas en alto */
  #ubicacion { display: grid; align-content: center; }
  #jordi .split { flex: 1; }
  #jordi .portrait { min-height: 0; }
}
/* Pantallas de ordenador bajas: la tabla de horarios un poco más junta para que quepa entera */
@media (min-width: 820px) and (max-height: 820px) {
  .timetable-section .section-head { margin-bottom: 14px; }
  .schedule-filters { margin-bottom: 12px; }
  .filter-btn { padding: 7px 14px; }
  th, td { padding: 9px 14px; }
  th { font-size: 16px; }
}
/* Tableta y portátil pequeño (821-1099 px): la marca en una línea y el menú más junto, para que el botón
   «Probar clase» no se salga por la derecha (antes la página se movía de lado) */
@media (min-width: 820px) and (max-width: 1099px) {
  .topbar { gap: 12px; }
  .brand { font-size: 18px; gap: 8px; white-space: nowrap; flex-shrink: 0; }
  .nav { gap: 12px; font-size: 11px; letter-spacing: 0.03em; min-width: 0; }
  .nav a { text-align: center; }
  .nav-cta { padding: 8px 10px; white-space: nowrap; }
}
/* Ordenador y tableta: cada título de apartado en una sola línea (el salto de línea queda solo para el móvil),
   para que el apartado quepa entero en la pantalla. La frase grande de la franja roja sigue en dos líneas: cabe. El tamaño está calculado para el título más largo
   («TEMPORADA 2026/27. PLANIFICA TU SEMANA.», unos 14,5 veces el alto de la letra) */
@media (min-width: 820px) {
  h2 br.solo-movil { display: none; }
  .section-head h2, .split-copy h2 { white-space: nowrap; }
}

/* ===== jk1boxing.com (web real, 3 nov 2026) ===== */
/* Portada: «Gimnasio de boxeo y kickboxing en Badalona» va dentro del título principal (lo que Google lee
   como tema de la página), con el mismo aspecto que tenía la línea pequeña de arriba */
.hero h1 .eyebrow { font-family: var(--font-body); line-height: 1.35; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85); }
.hero h1 .h1-lema { display: block; }
/* Texto solo para lectores de pantalla (el título de la tabla de horarios) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Redes: 4 tarjetas (sin Facebook hasta tener la página real): 2 por fila en tableta, las 4 en una fila en ordenador */
@media (min-width: 820px) { .social-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .social-hub-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Móvil: la portada acaba justo en el borde de abajo de la pantalla (antes medía el 92 % de la pantalla
   pero empezaba debajo de las dos barras de arriba, y «VER HORARIOS» quedaba cortado). main.js pone en
   --arriba-portada dónde empieza. En pantallas bajas, menos foto encima del texto. */
@media (max-width: 819.98px) {
  .hero { min-height: calc(100svh - var(--arriba-portada, 109px)) !important; }
  .hero-content { padding-bottom: 20px !important; }
}
@media (max-width: 819.98px) and (max-height: 620px) {
  .hero { padding-top: 20px !important; }
  .hero-content { padding-bottom: 22px !important; }
  .hero h1 { font-size: clamp(36px, 11vw, 52px) !important; }
  .hero-actions { margin-top: 14px !important; gap: 8px !important; }
  .hero-actions .btn { padding-top: 12px !important; padding-bottom: 12px !important; }
}
/* Móviles muy pequeños (320 px de ancho y poca altura): el botón de WhatsApp en una sola línea para que
   los dos botones quepan enteros */
@media (max-width: 340px) and (max-height: 620px) {
  .hero { padding-top: 10px !important; }
  .hero .lead { line-height: 1.45 !important; }
  .hero-actions .btn { font-size: 12px !important; letter-spacing: 0.02em !important; padding-left: 12px !important; padding-right: 12px !important; }
}
/* Horario: al resaltar una disciplina, las celdas vacías también se atenúan */
.table-wrap td { transition: opacity 0.2s ease, background-color 0.2s ease; }
/* Móvil: la burbuja de WhatsApp tapaba el botón «Ver horarios» de la portada; se esconde mientras
   se ven los botones de la portada (que ya llevan su propio WhatsApp) y aparece al bajar */
@media (max-width: 819.98px) {
  .wa-float.sobre-portada { opacity: 0; visibility: hidden; transform: translateY(16px); }
}

/* Técnica en vídeo (TikTok): portadas verticales enteras para que se vea a Jordi.
   Ordenador: 3 en fila, con el alto limitado a la pantalla. Móvil: se deslizan de lado. */
.video-card--vertical .video-thumb-wrap{aspect-ratio:9/16}
.video-card--vertical .video-info{padding:14px 16px}
.video-card--vertical .video-subtitle{margin-bottom:10px}
.video-grid.tiktok-grid{grid-template-columns:repeat(3,minmax(0,min(280px,calc((100vh - 360px) * .5625))))!important;justify-content:center}
@media (max-width: 819.98px){
  .video-grid.tiktok-grid{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px!important;padding:4px var(--pad) 10px;margin-inline:calc(var(--pad) * -1);scroll-padding-inline:var(--pad);scrollbar-width:thin}
  .video-grid.tiktok-grid .video-card{flex:0 0 min(64vw,250px);scroll-snap-align:start}
  .video-grid.tiktok-grid .video-card:hover{transform:none}
}
/* Reproductor de TikTok: ventana estrecha y vertical */
.video-modal-overlay.vertical .video-modal-container{width:min(400px,100%,calc((100vh - 110px) * .5625))}
.video-modal-overlay.vertical .video-modal-frame-wrap{aspect-ratio:9/16}
/* En las portadas verticales el botón va a la esquina para no tapar a Jordi ni el título */
.video-card--vertical .video-play-btn{top:auto;left:auto;right:12px;bottom:12px;transform:none;width:50px;height:50px}
.video-card--vertical:hover .video-play-btn{transform:scale(1.1)}
@media (max-width: 819.98px){.video-grid.tiktok-grid{justify-content:flex-start!important}}
/* Con el TikTok del club hay 5 redes: en ordenador, las 5 en una fila */
@media (min-width: 960px){.social-hub-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* Galería con fotos verticales (4:5) de Instagram y TikTok */
.real-gallery--vertical .real-photo-link{flex:0 0 min(64vw,260px);max-width:260px}
.real-gallery--vertical .real-photo img{height:auto;aspect-ratio:4/5;object-position:center top}