/* ============================================================
   BACAN — CSS GLOBAL DEFINITIVO
   Club Bádminton Bacán Cantillana
   HTML5 + CSS3 + JS Vanilla · Sin frameworks
   ------------------------------------------------------------
   1. Fuentes Poppins locales (assets/fonts/poppins/)
   2. Variables y reset
   3. Header / navegación
   4. Componentes globales (botones, tarjetas, sliders, forms)
   5. Bloques por sección
   6. Footer editorial
   7. Responsive mobile-first
   ============================================================ */

/* ---------- 1. FUENTES POPPINS LOCALES ---------- */

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins/Poppins-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins/Poppins-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins/Poppins-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins/Poppins-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins/Poppins-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-main: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --black-950: #020204;
  --black-900: #050507;
  --black-850: #09090d;
  --black-800: #0f0d12;
  --black-700: #171216;
  --white: #ffffff;
  --white-soft: rgba(255,255,255,.86);
  /* A-03: Subido de .64 a .72 — ratio 7.6:1 sobre fondos oscuros */
  --white-muted: rgba(255,255,255,.72);
  /* A-04: Subido de .38 a .54 — supera AA (4.5:1) para texto normal */
  --white-faint: rgba(255,255,255,.54);
  --line: rgba(255,255,255,.13);
  --line-strong: rgba(255,255,255,.23);
  --pink: #ff2d78;
  --pink-hot: #ff0f73;
  --pink-soft: rgba(255,45,120,.18);
  --orange: #ff8a4d;
  --purple: #9d38ff;
  --yellow: #ffd36a;
  --radius-xs: 12px;
  --radius-sm: 18px;
  --radius-md: 28px;
  --radius-lg: 42px;
  --radius-xl: 64px;
  --pill: 999px;
  --shadow-pink: 0 28px 90px rgba(255,45,120,.22);
  --shadow-deep: 0 34px 120px rgba(0,0,0,.62);
  --max: 1440px;
  --gutter: clamp(18px, 4vw, 64px);
  --section: clamp(76px, 11vw, 164px);
  /* M-01: --ease definida aquí, no era nunca undefined */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* Variables de la tarjeta clara de FAQ en /familias/ (única sección con fondo claro del sitio) */
  --fucsia: var(--pink);
  --ivory: #f5f1ec;
  --ink: #221a1c;
  --line-l: rgba(34,26,28,.12);
  --muted-l: rgba(34,26,28,.58);
  /* A-01: Variables Phase 2.0 consolidadas en este único :root — eliminando el segundo bloque */
  --text-hero: clamp(2rem, 4.5vw, 3.3rem);
  --text-h2:   clamp(1.55rem, 3.2vw, 2.3rem);
  --text-h3:   clamp(1.1rem, 2vw, 1.45rem);
  --text-body: clamp(0.92rem, 0.95vw + 0.35rem, 1.06rem);
  --tech:      #A3B1C6;
  --tech-soft: #8E9BAE;
  --gap-grid:  clamp(1.4rem, 3vw, 2.4rem);
  --wrap:      1200px;
  --card:      #0c0c12;
  --card-2:    #101019;
  --hair:      rgba(255,255,255,.10);
}

* { box-sizing: border-box; }

html {
  /* M-02: smooth scroll solo con prefers-reduced-motion:no-preference
     y solo en desktop — en iOS Safari choca con scroll-snap del carousel */
  scroll-behavior: auto;
  overflow-x: hidden;
  background: var(--black-950);
  color: var(--white);
  font-family: var(--font-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* M-05: optimizeLegibility en todo — geometricPrecision solo desktop */
  text-rendering: optimizeLegibility;
}

/* HIG Selection: Resaltado de texto con acento de marca */
::selection {
  background: rgba(255,45,120,0.35);
  color: #ffffff;
}
@media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
  html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
    text-rendering: geometricPrecision;
  }
}

body {
  margin: 0;
  padding: 0;
  background: var(--bg, #050507);
  color: var(--text, #ffffff);
  font-family: "Poppins", system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  background:
    radial-gradient(circle at 14% 6%, rgba(255,45,120,.18), transparent 25vw),
    radial-gradient(circle at 82% 16%, rgba(157,56,255,.12), transparent 26vw),
    linear-gradient(180deg, #050507 0%, #000 68%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 45% 38%, rgba(255,211,106,.08), transparent 22vw),
    radial-gradient(circle at 18% 72%, rgba(255,45,120,.12), transparent 30vw);
  opacity: .85;
  z-index: -2;
}

/* ============================================================
    APPLE HIG TYPOGRAPHY & LINE HEIGHT HARMONIZATION
   ============================================================ */
h1, .h-xxl {
  font-size: clamp(2.2rem, 6vw, 4.2rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.025em !important;
  font-weight: 800 !important;
}

h2, .h-xl, .h-lg {
  font-size: clamp(1.6rem, 4.5vw, 2.6rem) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.02em !important;
  font-weight: 800 !important;
}

h3 {
  font-size: clamp(1.1rem, 2.2vw, 1.45rem) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  font-weight: 700 !important;
}

p, .lead {
  font-size: clamp(0.95rem, 1.35vw, 1.12rem) !important;
  line-height: 1.65 !important;
  color: rgba(255, 255, 255, 0.78) !important;
}

button, a.btn, .player-card, .day-card, .apple-dot-item {
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.35s ease, background 0.25s ease, opacity 0.25s ease !important;
}

button:active, a.btn:active {
  transform: scale(0.96) !important;
}

img, video, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select { font: inherit; }

button { cursor: pointer; }

::selection { background: var(--pink); color: var(--white); }

/* .site-shell overflow:hidden eliminado — recortaba el footer en apps/ y metodo-bacan/ */

.skip-link {
  position: fixed;
  left: 14px;
  top: 14px;
  z-index: 999;
  transform: translateY(-140%);
  background: var(--white);
  color: var(--black-950);
  border-radius: var(--pill);
  padding: 10px 16px;
  font-weight: 800;
}

.skip-link:focus { transform: translateY(0); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  padding: 16px var(--gutter);
  backdrop-filter: blur(18px);
  background: linear-gradient(180deg, rgba(2,2,4,.80), rgba(2,2,4,.42));
  border-bottom: 1px solid rgba(255,255,255,.08);
}

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

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: max-content;
}

.brand-mark {
  width: 116px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--pink);
  color: var(--white);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1;
}

.brand-sub {
  display: none;
  color: var(--white-faint);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
}

.nav-toggle {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--white);
  border-radius: var(--pill);
  padding: 11px 16px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.main-nav {
  position: fixed;
  inset: 74px 14px auto 14px;
  display: grid;
  gap: 4px;
  padding: 18px;
  background: rgba(10,10,14,.96);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow-deep);
  transform: translateY(-18px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}

.main-nav.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }

.main-nav a {
  color: var(--white-muted);
  font-size: 14px;
  font-weight: 600;
  padding: 11px 12px;
  border-radius: var(--pill);
  transition: background .18s ease, color .18s ease;
}

.main-nav a:hover, .main-nav a:focus-visible { background: rgba(255,255,255,.07); color: var(--white); }

.header-cta { display: none; }

.btn, .capsule {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border-radius: var(--pill);
  border: 1px solid rgba(255,255,255,.16);
  padding: 0 20px;
  background: rgba(255,255,255,.05);
  color: var(--white);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.btn:hover, .capsule:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.36);
  /* FIX: fondo translúcido visible en todos los fondos oscuros */
  background: rgba(255,255,255,.12);
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
}
.btn:active, .capsule:active, .btn-pink:active, .bacan-apps-home__cta:active { transform: scale(0.97); }

/* btn-pink hover explícito — efecto negro con resplandor rosa */
.btn-pink:hover {
  background: #050506 !important;
  color: #ffffff !important;
  border: 1px solid var(--pink) !important;
  box-shadow: 0 14px 40px rgba(255, 45, 120, 0.44);
  transform: translateY(-2px);
}
/* btn-ghost — Ver nuestras aplicaciones y similares */
.btn-ghost:hover {
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.50) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,.4);
}
/* btn-link hover */
.btn-link:hover { color: var(--pink); }

.btn-primary {
  background: var(--pink);
  border-color: var(--pink);
  color: var(--white);
  box-shadow: 0 12px 32px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.28) !important;
}
.btn-primary:hover {
  background: #ff4c91;
  border-color: #ff4c91;
  box-shadow: 0 18px 44px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.4) !important;
  transform: translateY(-2px);
}
.btn-dark { background: #050506; color: var(--white); border-color: #050506; }
.btn-light { background: var(--white); color: var(--black-950); border-color: var(--white); }

.section { padding: var(--section) var(--gutter); position: relative; }
.section-inner { max-width: var(--max); margin: 0 auto; position: relative; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--pink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.display-title {
  margin: 18px 0 0;
  font-size: clamp(54px, 12vw, 168px);
  line-height: .82;
  letter-spacing: 0.02em;
  font-weight: 900;
}

.section-title {
  margin: 0;
  font-size: clamp(42px, 7vw, 104px);
  line-height: .88;
  letter-spacing: 0.02em;
  font-weight: 900;
}

.lead {
  color: var(--white-muted);
  font-size: clamp(17px, 2.2vw, 26px);
  line-height: 1.45;
  font-weight: 400;
}

.text-muted { color: var(--white-muted); }

.hero {
  min-height: calc(100svh - 76px);
  display: grid;
  align-items: center;
  padding: clamp(46px, 6vw, 92px) var(--gutter) clamp(62px, 9vw, 120px);
}

.hero-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  gap: 38px;
}

.hero-copy { position: relative; z-index: 2; }

.hero .lead { max-width: 660px; margin: 22px 0 0; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.hero-proof {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.hero-proof span {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.035);
  color: var(--white-muted);
  padding: 10px 14px;
  border-radius: var(--pill);
  font-size: 12px;
  font-weight: 700;
}

.hero-media {
  position: relative; /* A-14: necesario para que .play y .hero-tag se posicionen correctamente */
  min-height: 520px;
}

.hero-photo-card {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  border-radius: clamp(34px, 5vw, 76px);
  background: linear-gradient(135deg, rgba(255,45,120,.95), rgba(255,138,77,.85));
  box-shadow: var(--shadow-pink), var(--shadow-deep);
  transform: rotate(1deg);
}

.hero-photo-card img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  object-position: center top;
  mix-blend-mode: normal;
}

.hero-photo-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(0deg, rgba(0,0,0,.72), transparent);
}

.hero-floating-card {
  position: absolute;
  left: -10px;
  bottom: 34px;
  width: min(88%, 360px);
  background: rgba(255,255,255,.86);
  color: var(--black-950);
  border-radius: 28px;
  padding: 20px;
  box-shadow: 0 24px 70px rgba(0,0,0,.36);
  backdrop-filter: blur(18px);
}

.hero-floating-card strong {
  display: block;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.02em;
  margin-bottom: 7px;
}

.hero-floating-card p { margin: 0; color: rgba(0,0,0,.62); font-size: 13px; line-height: 1.4; font-weight: 600; }

.bacan-face {
  position: fixed;
  right: clamp(14px, 4vw, 42px);
  top: 88px;
  z-index: 80;
  width: clamp(58px, 8vw, 104px);
  height: clamp(58px, 8vw, 104px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--line);
  box-shadow: 0 20px 80px rgba(255,45,120,.20);
  backdrop-filter: blur(14px);
  transform: translate3d(0,0,0);
  transition: opacity .24s ease;
}

.bacan-face img { width: 78%; height: 78%; object-fit: contain; }
.bacan-face.is-soft { opacity: .36; }

.club-section { padding-top: clamp(70px, 10vw, 150px); }

.club-grid {
  display: grid;
  gap: 26px;
  align-items: stretch;
}

.club-copy {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.035);
  padding: clamp(24px, 5vw, 56px);
  backdrop-filter: blur(18px);
}

.club-copy .lead { margin: 24px 0 0; max-width: 780px; }

.club-text {
  margin-top: 26px;
  display: grid;
  gap: 16px;
  color: var(--white-muted);
  font-size: 16px;
  line-height: 1.65;
}

.video-panel {
  position: relative;
  min-height: 430px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: radial-gradient(circle at 12% 20%, rgba(255,45,120,.45), transparent 36%), linear-gradient(145deg, #12080e, #040406);
  box-shadow: var(--shadow-deep);
}

.video-panel img {
  width: 100%;
  height: 100%;
  min-height: 430px;
  object-fit: cover;
  object-position: center top;
  opacity: .72;
}

.video-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.78), rgba(0,0,0,.08));
}

.video-content {
  position: absolute;
  inset: auto 24px 24px 24px;
  z-index: 2;
}

.play-button {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.46);
  background: var(--pink);
  color: var(--white);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.02em;
  box-shadow: 0 24px 70px rgba(255,45,120,.34);
}

.video-content h3 { margin: 18px 0 8px; font-size: 34px; line-height: .94; letter-spacing: 0.02em; }
.video-content p { margin: 0; color: var(--white-muted); line-height: 1.45; }

.sponsors-section { padding-top: 0; }
.sponsor-band {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.025);
}
.sponsor-head {
  max-width: var(--max);
  margin: 0 auto;
  padding: 24px var(--gutter) 0;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: var(--white-faint);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-weight: 800;
}
.sponsor-track {
  display: flex;
  gap: 42px;
  width: max-content;
  padding: 28px 0 34px;
  animation: sponsorRun 34s linear infinite;
}
.sponsor-track:hover { animation-play-state: paused; }
.sponsor-logo {
  height: 56px;
  width: auto;
  object-fit: contain;
  opacity: .88;
  filter: grayscale(1) brightness(2.2);
}
/* M-08: @keyframes sponsorRun duplicada eliminada (la activa está en L1715) */

.players-head {
  display: grid;
  gap: 20px;
  margin-bottom: 34px;
}
.players-head .lead { max-width: 52ch; margin: 14px 0 0; color: var(--white-soft); }

.horizontal-scroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 78vw);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 0 18px;
  scrollbar-width: none;
}
.horizontal-scroll::-webkit-scrollbar { display: none; }

.carousel {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 30px 20px !important;
  scrollbar-width: none !important;
}
.carousel::-webkit-scrollbar {
  display: none !important;
}

.player-card {
  scroll-snap-align: center !important;
  position: relative !important;
  min-height: 480px !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  background: #08080c !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  flex-shrink: 0 !important;
  width: clamp(280px, 42vw, 440px) !important;
  opacity: 0.55 !important;
  transform: scale(0.88) !important;
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s ease, border-color 0.3s ease, box-shadow 0.35s ease !important;
  cursor: pointer !important;
}

.player-card.is-active-center {
  opacity: 1 !important;
  transform: scale(1) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.85) !important;
  z-index: 4 !important;
}

.player-card.is-neighbor {
  opacity: 0.5 !important;
  transform: scale(0.88) !important;
  filter: brightness(0.85) !important;
}

.player-card img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  z-index: 1 !important;
  transition: transform 0.6s ease !important;
}

.player-card.is-active-center:hover img {
  transform: scale(1.05) !important;
}

/* BOTÓN ACCIÓN FLOTANTE: AMPLIAR FOTO ↗ (ESTILO APPLE TV+) */
.player-expand-action-btn {
  margin-top: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 10px 20px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #000000 !important;
  border: none !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.25) !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.player-expand-action-btn:hover {
  transform: scale(1.04) translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(255, 255, 255, 0.45) !important;
}

/* INDICADORES PÍLDORA APPLE TV+ */
.apple-tv-dots-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 18px !important;
  width: 100% !important;
}

.apple-dot-item {
  position: relative !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.25) !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease !important;
}

.apple-dot-item.is-active {
  width: 32px !important;
  background: #ffffff !important;
}

.carousel .player-card .player-info,
.player-card .player-info {
  position: absolute !important;
  inset: auto 0 0 0 !important;
  z-index: 10 !important;
  background: linear-gradient(0deg, rgba(2,2,4,0.95) 0%, rgba(2,2,4,0.65) 60%, transparent 100%) !important;
  border: none !important;
  border-radius: 0 0 28px 28px !important;
  padding: 32px 20px 20px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  box-shadow: none !important;
}

.player-info-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  gap: 8px !important;
}

.player-comp-label {
  font-size: 0.8rem !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-weight: 500 !important;
}

.player-name {
  margin: 0 !important;
  font-size: clamp(1.25rem, 2vw, 1.55rem) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
}

.player-category-tag {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* ============================================================
   5 OPCIONES DE ANIMACIÓN DE BORDES TENDENCIAS 2027 (ALTA VISIBILIDAD 3.5PX)
   ============================================================ */
.player-ring-el {
  display: none !important;
}

/* TARJETA 1 · OPCIÓN 1: BARRIDO DE TITANIO LÍQUIDO PLATA (3.5PX) */
.player-card:nth-child(1) {
  border: 3.5px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.7) !important;
  animation: cardTitaniumSweepAmp 2.6s infinite alternate ease-in-out !important;
}
@keyframes cardTitaniumSweepAmp {
  0% { border-color: rgba(255, 255, 255, 0.3); transform: translateY(0) scale(1); }
  50% { border-color: #ffffff; transform: translateY(-6px) scale(1.04); box-shadow: 0 24px 60px rgba(0,0,0,0.92), inset 0 1px 0 rgba(255,255,255,0.35); }
  100% { border-color: rgba(255, 255, 255, 0.3); transform: translateY(0) scale(1); }
}

/* TARJETA 2 · OPCIÓN 2: EXTRUSIÓN Y PARALLAX 3D SPATIAL (3.5PX visionOS) */
.player-card:nth-child(2) {
  border: 3.5px solid rgba(255, 255, 255, 0.5) !important;
  perspective: 800px !important;
  transform-style: preserve-3d !important;
  animation: cardSpatialFloat3DAmp 3.6s infinite alternate ease-in-out !important;
}
@keyframes cardSpatialFloat3DAmp {
  0% { transform: perspective(800px) rotateY(-10deg) rotateX(6deg) translateY(0); border-color: rgba(255,255,255,0.4); box-shadow: 6px 12px 28px rgba(0,0,0,0.8); }
  100% { transform: perspective(800px) rotateY(10deg) rotateX(-6deg) translateY(-8px); border-color: #ffffff; box-shadow: -6px 28px 60px rgba(0,0,0,0.95), inset 0 1px 0 rgba(255,255,255,0.35); }
}

/* TARJETA 3 · OPCIÓN 3: FILAMENTO LÁSER CIAN ELÉCTRICO (3.5PX) */
.player-card:nth-child(3) {
  border: 3.5px solid #00f2fe !important;
  animation: cardLaserPulseAmp 1.8s infinite alternate ease-in-out !important;
}
@keyframes cardLaserPulseAmp {
  0% { border-color: #00f2fe; box-shadow: 0 16px 40px rgba(0,0,0,0.85); transform: scale(1); }
  100% { border-color: #ffffff; box-shadow: 0 24px 60px rgba(0,0,0,0.95), inset 0 1px 0 rgba(255,255,255,0.35); transform: scale(1.04) translateY(-4px); }
}

/* TARJETA 4 · OPCIÓN 4: REFRACCIÓN PRISMÁTICA DE ZAFIRO (3.5PX) */
.player-card:nth-child(4) {
  border: 3.5px solid #00c6ff !important;
  animation: cardPrismaticRefractAmp 2.2s infinite ease-in-out !important;
}
@keyframes cardPrismaticRefractAmp {
  0% { border-color: #00c6ff; transform: scale(1); }
  50% { border-color: #a855f7; transform: scale(1.05) translateY(-5px); box-shadow: 0 16px 40px rgba(0,0,0,0.85); }
  100% { border-color: #00c6ff; transform: scale(1); }
}

/* TARJETA 5 · OPCIÓN 5: PULSO HÁPTICO NEUMÓRFICO RITMO CARDÍACO (3.5PX) */
.player-card:nth-child(5) {
  border: 3.5px solid rgba(255, 255, 255, 0.6) !important;
  animation: cardHapticHeartbeatAmp 3s infinite cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}
@keyframes cardHapticHeartbeatAmp {
  0% { transform: scale(1) rotate(0deg); border-color: rgba(255,255,255,0.4); }
  15% { transform: scale(1.08) rotate(2deg) translateY(-6px); border-color: #ffffff; box-shadow: 0 20px 50px rgba(0,0,0,0.9); }
  25% { transform: scale(0.97) rotate(-1deg); }
  35% { transform: scale(1.04) rotate(1deg); }
  50% { transform: scale(1) rotate(0deg); border-color: rgba(255,255,255,0.4); }
  100% { transform: scale(1) rotate(0deg); border-color: rgba(255,255,255,0.4); }
}

/* DESKTOP HOVER: Elevación 3D + Glow Rosa + Zoom de foto */
@media (min-width: 769px) {
  .player-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 30px 70px rgba(0,0,0,0.85), inset 0 0 0 1px rgba(255,255,255,0.3) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    z-index: 5;
  }
  .player-card:hover img {
    transform: scale(1.05);
  }
  .player-card.big:hover {
    transform: translateY(-12px) scale(1.025);
    box-shadow: 0 40px 90px rgba(0,0,0,0.9), inset 0 0 0 1px rgba(255,255,255,0.35) !important;
  }
}
/* Steve Lemay HIG #2: Tactile Spring Compression on ALL Interactive Cards */
.player-card:active,
.day-card:active,
.behance-card:active,
.app-card:active,
.social-card:active,
.channel-card:active,
.part:active,
.subcard:active {
  transform: scale(0.975) !important;
  transition: transform 0.12s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Steve Lemay HIG #3: Vibrancy Glass Backdrop Blur on Floating Badges */
.hero-tag,
.player-category-tag,
.day-tag {
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}
.player-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.82), transparent 55%); }
.player-card-content { position: absolute; inset: auto 20px 20px 20px; z-index: 2; }
.player-card-content span { color: var(--pink); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .10em; }
.player-card-content h3 { margin: 8px 0 8px; font-size: 34px; line-height: .94; letter-spacing: 0.02em; }
.player-card-content p { margin: 0; color: var(--white-muted); font-size: 14px; line-height: 1.45; }

.cards-grid {
  display: grid;
  gap: 16px;
  margin-top: 36px;
}
.behance-card {
  position: relative;
  min-height: 280px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 24px;
  background:
    radial-gradient(circle at 12% 14%, rgba(255,138,77,.18), transparent 30%),
    radial-gradient(circle at 78% 82%, rgba(255,45,120,.24), transparent 32%),
    rgba(255,255,255,.035);
  box-shadow: var(--shadow-deep);
}
.behance-card.large { min-height: 420px; }
.behance-card.pink { background: linear-gradient(145deg, #ff445c, #ff2d78 48%, #ff77bd); color: var(--black-950); }
.behance-card.dark { background: radial-gradient(circle at 15% 82%, rgba(255,45,120,.22), transparent 36%), #07070a; }
.behance-card h3 { margin: 0; font-size: clamp(34px, 6vw, 68px); line-height: .88; letter-spacing: 0.02em; }
.behance-card p { color: currentColor; opacity: .68; line-height: 1.5; max-width: 520px; }
.behance-card.pink .capsule { border-color: rgba(0,0,0,.24); background: rgba(0,0,0,.08); color: var(--black-950); }
.card-bottom { position: absolute; left: 24px; right: 24px; bottom: 24px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }

.month-grid {
  display: grid;
  gap: 20px;
  align-items: stretch;
}
.month-photo { border-radius: var(--radius-lg); overflow: hidden; min-height: 520px; border: 1px solid var(--line); box-shadow: var(--shadow-deep); }
.month-photo img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; object-position: center top; }
.month-copy { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; border-radius: var(--radius-lg); padding: clamp(28px, 5vw, 58px); background: linear-gradient(145deg, #ff3b63, #ff2d78 48%, #f879c2); color: #050506; }
.month-copy .eyebrow { color: rgba(0,0,0,.64); border-color: rgba(0,0,0,.16); background: rgba(255,255,255,.12); }
.month-copy h2 { margin: 16px 0 0; font-size: clamp(48px, 8vw, 106px); line-height: .82; letter-spacing: 0.02em; }
.month-copy p { color: rgba(0,0,0,.68); line-height: 1.55; font-weight: 600; }
.month-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.month-stats div { border: 1px solid rgba(0,0,0,.14); border-radius: 18px; padding: 14px; }
.month-stats strong { display: block; font-size: 24px; letter-spacing: 0.02em; }
.month-stats span { font-size: 11px; text-transform: uppercase; font-weight: 800; color: rgba(0,0,0,.58); }

.calendar-preview {
  border-radius: clamp(24px, 4vw, 36px);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.025);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
  box-shadow: 0 34px 120px rgba(0,0,0,.7);
}
.calendar-top { padding: clamp(28px, 4vw, 52px); display: grid; gap: 16px; }
.calendar-days {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  overflow-x: auto;
  /* A-11: scrollbar oculta en Firefox desktop también */
  scrollbar-width: none;
  padding: 0 clamp(20px, 4vw, 48px) clamp(28px, 4vw, 48px);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.calendar-days::-webkit-scrollbar { display: none; }
.day-card {
  scroll-snap-align: start;
  min-width: 240px;
  min-height: 230px;
  border-radius: 26px;
  padding: 22px 20px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* A-10: overflow visible para que el ring del calendario no quede recortado */
  overflow: visible;
  box-sizing: border-box;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.day-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}
.day-card strong {
  font-size: clamp(1.25rem, 2.2vw, 1.45rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin: 12px 0 8px;
  overflow-wrap: break-word;
  word-break: break-word;
}
.day-card span.day-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.day-card span.day-time {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .88;
}
.day-card p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.45;
  opacity: .84;
}

/* VARIANTE 1: ESCUELAS / INICIACIÓN (Cristal Obsidiana con Acento Rosa Fucsia BACAN - Estándar Apple Dark Mode) */
.day-card.is-pink {
  background: linear-gradient(145deg, rgba(255, 45, 120, 0.16) 0%, rgba(8, 8, 12, 0.95) 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 45, 120, 0.5) !important;
  box-shadow: 0 14px 36px rgba(255, 45, 120, 0.18), inset 0 1px 0 rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}
.day-card.is-pink span.day-tag {
  background: #ff2d78 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 14px rgba(255, 45, 120, 0.5) !important;
}
.day-card.is-pink span.day-time,
.day-card.is-pink p {
  color: rgba(255,255,255,0.88) !important;
}

/* VARIANTE 2: TECNIFICACIÓN (Azul Neón / Obsidiana) */
.day-card.is-cyan {
  background: linear-gradient(145deg, #0f192e, #060b17) !important;
  color: #ffffff !important;
  border: 1px solid rgba(77,208,255,0.4) !important;
}
.day-card.is-cyan span.day-tag {
  background: rgba(77,208,255,0.18) !important;
  color: #4dd0ff !important;
}
.day-card.is-cyan span.day-time { color: #4dd0ff !important; }
.day-card.is-cyan p { color: rgba(255,255,255,0.85) !important; }

/* VARIANTE 3: TORNEOS / PARTIDOS (Dorado Eléctrico WCAG AAA) */
.day-card.is-gold {
  background: linear-gradient(145deg, #ffd36a, #e6a100) !important;
  color: #050507 !important;
  border: 1px solid rgba(255,211,106,0.8) !important;
}
.day-card.is-gold span.day-tag {
  background: rgba(5,5,7,0.16) !important;
  color: #050507 !important;
}
.day-card.is-gold span.day-time,
.day-card.is-gold p,
.day-card.is-gold strong {
  color: #050507 !important;
}

/* VARIANTE 4: BADBRO / EVENTOS (Morado Neón) */
.day-card.is-purple {
  background: linear-gradient(145deg, #9d38ff, #6206c7) !important;
  color: #ffffff !important;
  border: 1px solid rgba(157,56,255,0.6) !important;
}
.day-card.is-purple span.day-tag {
  background: rgba(255,255,255,0.22) !important;
  color: #ffffff !important;
}
.day-card.is-purple span.day-time,
.day-card.is-purple p {
  color: rgba(255,255,255,0.92) !important;
}

.social-grid { display: grid; gap: 16px; }
.social-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgba(255,255,255,.035); padding: clamp(24px, 4vw, 42px); min-height: 260px; display: flex; flex-direction: column; justify-content: space-between; }
.social-card h3 { margin: 0; font-size: clamp(34px, 5vw, 70px); line-height: .9; letter-spacing: 0.02em; }
.social-card p { color: var(--white-muted); line-height: 1.5; max-width: 420px; }


.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(12px);
}
.modal.is-open { display: grid; }
.modal-card { width: min(760px, 100%); border-radius: 34px; border: 1px solid var(--line); background: radial-gradient(circle at 20% 0, rgba(255,45,120,.24), transparent 34%), #09090d; padding: clamp(24px,4vw,46px); box-shadow: var(--shadow-deep); }
.modal-card h2 { margin: 0 0 14px; font-size: clamp(36px, 6vw, 72px); line-height: .9; letter-spacing: 0.02em; }
.modal-card p { color: var(--white-muted); line-height: 1.6; }
.modal-actions { display: flex; justify-content: flex-end; margin-top: 24px; }

.reveal { opacity: 0; transform: translateY(34px); transition: opacity .62s ease, transform .62s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (min-width: 680px) {
  .brand-sub { display: block; }
  .horizontal-scroll { grid-auto-columns: minmax(320px, 42vw); }
  .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .social-grid { grid-template-columns: 1fr 1fr; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer-safe { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

@media (min-width: 980px) {
  .nav-toggle { display: none; }
  .main-nav { position: static; inset: auto; opacity: 1; pointer-events: auto; transform: none; display: flex; align-items: center; gap: 2px; padding: 0; border: 0; background: transparent; box-shadow: none; border-radius: 0; }
  .main-nav a { font-size: 12px; padding: 9px 10px; }
  .header-cta { display: inline-flex; }
  .hero-grid { grid-template-columns: 1.05fr .95fr; align-items: center; }
  .club-grid { grid-template-columns: 1.1fr .9fr; }
  .players-head { grid-template-columns: 1fr .85fr; align-items: end; }
  .horizontal-scroll { grid-auto-columns: minmax(350px, 30vw); }
  .cards-grid { grid-template-columns: 1.2fr .8fr .8fr; }
  .behance-card.large { grid-row: span 2; }
  .month-grid { grid-template-columns: .9fr 1.1fr; }
  .social-grid { grid-template-columns: 1.2fr .8fr .8fr; }
  .footer-main { grid-template-columns: .95fr 1.45fr; align-items: start; }
  .footer-cols { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

@media (min-width: 1180px) {
  .main-nav a { padding: 10px 12px; }
  .hero-photo-card { min-height: 650px; }
  .hero-photo-card img { min-height: 650px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
}
/* ============================================================
   COMPONENTES DE PÁGINAS INTERNAS
   ============================================================ */

/* Estado activo de navegación */
.main-nav a[aria-current="page"] { color: var(--white); background: rgba(255,45,120,.16); }

/* Jerarquía tipográfica Poppins */
h1, .hero-title, .display-title { font-weight: 800; }
h2, .section-title { font-weight: 700; }
h3 { font-weight: 700; }
body { font-weight: 400; }
.main-nav a, .footer-col a, .footer-col p { font-weight: 500; }
.btn, .capsule { font-weight: 700; }
.eyebrow, .tag { font-weight: 500; letter-spacing: .13em; }

/* ---------- HERO DE PÁGINA INTERNA ---------- */

.page-hero {
  padding: clamp(56px, 8vw, 120px) var(--gutter) clamp(46px, 6vw, 92px);
}

.page-hero-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  gap: 34px;
}

.page-hero .display-title { font-size: clamp(46px, 10vw, 138px); }

.page-hero .lead { max-width: 720px; margin: 22px 0 0; }

.page-photo {
  position: relative;
  overflow: hidden;
  min-height: 380px;
  border-radius: clamp(30px, 4vw, 60px);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-deep);
  transform: rotate(-1deg);
}

.page-photo img {
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
  object-position: center top;
}

.page-photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background: linear-gradient(0deg, rgba(0,0,0,.66), transparent);
}

.page-photo-tag {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 2;
  background: var(--pink);
  color: var(--white);
  border-radius: var(--pill);
  padding: 10px 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* Hero con degradado propio por sección */
.page-hero.tone-badown { background: radial-gradient(circle at 82% 8%, rgba(157,56,255,.24), transparent 34%), transparent; }
.page-hero.tone-badbro { background: radial-gradient(circle at 82% 8%, rgba(255,138,77,.22), transparent 34%), transparent; }
.page-hero.tone-menor { background: radial-gradient(circle at 82% 8%, rgba(255,45,120,.14), transparent 34%), transparent; }

/* ---------- TARJETA PARTIDA (sesión tipo Academia) ---------- */

.split-card {
  display: grid;
  gap: 2px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-deep);
  margin-top: 36px;
}

.split-half {
  padding: clamp(26px, 4vw, 50px);
  background: rgba(255,255,255,.035);
  display: grid;
  gap: 14px;
  align-content: start;
}

.split-half.is-pink {
  background: linear-gradient(145deg, #ff445c, #ff2d78 52%, #ff77bd);
  color: #050506;
}

.split-half.is-pink .split-kicker { color: rgba(0,0,0,.6); }
.split-half.is-pink p { color: rgba(0,0,0,.68); }

.split-kicker {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--pink);
}

.split-half h3 {
  margin: 0;
  font-size: clamp(30px, 4.4vw, 54px);
  line-height: .9;
  letter-spacing: 0.02em;
}

.split-half p { margin: 0; color: var(--white-muted); line-height: 1.6; }

.split-data {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.split-data span {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.05);
  border-radius: var(--pill);
  padding: 10px 15px;
  font-size: 12px;
  font-weight: 700;
}

.split-half.is-pink .split-data span { border-color: rgba(0,0,0,.2); background: rgba(255,255,255,.16); color: #050506; }

/* ---------- CHIPS (habilidades, beneficios) ---------- */

.chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.chip {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.045);
  border-radius: var(--pill);
  padding: 14px 22px;
  font-size: clamp(14px, 1.8vw, 18px);
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.chip:hover { border-color: var(--pink); background: var(--pink-soft); transform: translateY(-2px); }

.chip.is-big { font-size: clamp(18px, 3vw, 30px); padding: 18px 28px; }

/* ---------- LISTA EDITORIAL (bloques texto + foto) ---------- */

.feature-grid {
  display: grid;
  gap: 20px;
  margin-top: 40px;
}

.feature-block {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.035);
  overflow: hidden;
  display: grid;
}

.feature-body { padding: clamp(24px, 4vw, 44px); display: grid; gap: 14px; align-content: start; }
.feature-body h3 { margin: 0; font-size: clamp(28px, 4vw, 52px); line-height: .9; letter-spacing: 0.02em; }
.feature-body p { margin: 0; color: var(--white-muted); line-height: 1.65; }
.feature-body ul { margin: 0; padding-left: 20px; color: var(--white-muted); line-height: 1.8; }

.feature-media { position: relative; min-height: 260px; }
.feature-media img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; object-position: center top; position: absolute; inset: 0; }

/* ---------- TIMELINE (historia CLUB) ---------- */

.timeline { display: grid; gap: 18px; margin-top: 40px; position: relative; }

.timeline-item {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.035);
  padding: clamp(22px, 3.6vw, 40px);
  display: grid;
  gap: 12px;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 22px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--pink), var(--purple));
}

.timeline-kicker {
  color: var(--pink);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .13em;
}

.timeline-item h3 { margin: 0; font-size: clamp(26px, 4vw, 46px); line-height: .92; letter-spacing: 0.02em; }
.timeline-item p { margin: 0; color: var(--white-muted); line-height: 1.65; }

.quote-band {
  margin-top: 44px;
  border-radius: var(--radius-lg);
  padding: clamp(30px, 6vw, 70px);
  background: linear-gradient(135deg, #ff2d78, #ff8a4d 62%, #ffd36a);
  color: #050506;
  box-shadow: var(--shadow-pink);
}

.quote-band p {
  margin: 0;
  font-size: clamp(26px, 4.6vw, 58px);
  line-height: .96;
  letter-spacing: 0.02em;
  font-weight: 800;
  max-width: 1000px;
}

/* ---------- ACORDEÓN FAQ ---------- */

.accordion { display: grid; gap: 12px; margin-top: 30px; }

.accordion-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.035);
  overflow: hidden;
}

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  background: transparent;
  border: 0;
  color: var(--white);
  padding: 20px 22px;
  font-size: clamp(15px, 2vw, 19px);
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: color .18s ease;
}

.accordion-trigger::after {
  content: "+";
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  font-weight: 700;
  font-size: 18px;
  transition: transform .22s ease, background .22s ease, border-color .22s ease;
}

.accordion-item.is-open .accordion-trigger { color: var(--pink); }
.accordion-item.is-open .accordion-trigger::after { transform: rotate(45deg); background: var(--pink); border-color: var(--pink); color: var(--white); }

.accordion-panel {
  display: none;
  padding: 0 22px 22px;
  color: var(--white-muted);
  line-height: 1.65;
}

.accordion-panel p { margin: 0 0 10px; }
.accordion-item.is-open .accordion-panel { display: block; }

.faq-group { margin-top: 44px; }
.faq-group > h3 { margin: 0 0 6px; font-size: clamp(24px, 3.4vw, 40px); letter-spacing: 0.02em; line-height: .94; }

/* ---------- FORMULARIOS WHATSAPP ---------- */

.form-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: radial-gradient(circle at 14% 0, rgba(255,45,120,.16), transparent 36%), rgba(255,255,255,.035);
  padding: clamp(24px, 4.4vw, 52px);
  box-shadow: var(--shadow-deep);
  display: grid;
  gap: 18px;
}

.form-card h3 { margin: 0; font-size: clamp(28px, 4.4vw, 54px); line-height: .9; letter-spacing: 0.02em; }
.form-card > p { margin: 0; color: var(--white-muted); line-height: 1.6; max-width: 620px; }

.form-grid { display: grid; gap: 14px; }

.field { display: grid; gap: 8px; }

.field label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--white-muted);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  border-radius: 16px;
  border: 1px solid var(--line-strong);
  background: rgba(0,0,0,.4);
  color: var(--white);
  padding: 14px 16px;
  /* Móvil 1: 16px para eliminar auto-zoom en iOS Safari */
  font-size: 16px !important;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.field textarea { min-height: 120px; resize: vertical; }

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(255,45,120,.24);
}

.field select { appearance: none; }

.form-note { color: var(--white-faint); font-size: 12px; line-height: 1.5; margin: 0; }

.form-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.form-feedback { color: var(--pink); font-size: 13px; font-weight: 700; min-height: 18px; margin: 0; }

/* ---------- EQUIPACIÓN ---------- */

.notice-band {
  margin-top: 34px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.045);
  padding: clamp(20px, 3vw, 34px);
  display: grid;
  gap: 8px;
}

.notice-band strong { font-size: clamp(18px, 2.6vw, 26px); letter-spacing: 0.02em; }
.notice-band p { margin: 0; color: var(--white-muted); line-height: 1.55; }

.product-grid { display: grid; gap: 16px; margin-top: 36px; }

.product-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.035);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.product-photo { position: relative; min-height: 300px; }
.product-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.product-photo::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(0deg, rgba(0,0,0,.6), transparent); }

.product-body { padding: 22px; display: grid; gap: 12px; }
.product-body h3 { margin: 0; font-size: clamp(24px, 3vw, 34px); line-height: .92; letter-spacing: 0.02em; }
.product-body p { margin: 0; color: var(--white-muted); font-size: 14px; line-height: 1.5; }

.size-picker { display: flex; flex-wrap: wrap; gap: 8px; }

.size-btn {
  min-width: 46px;
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: rgba(0,0,0,.4);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.size-btn:hover { border-color: var(--pink); transform: translateY(-1px); }
.size-btn.is-selected { background: var(--pink); border-color: var(--pink); color: var(--white); }

.product-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.product-foot .capsule { min-height: 42px; }
.product-state { color: var(--white-faint); font-size: 12px; font-weight: 700; }

/* ---------- CALENDARIO (página propia) ---------- */

.cal-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

.legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  padding: 9px 15px;
  font-size: 12px;
  font-weight: 700;
  color: var(--white-muted);
}

.legend-chip::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--dot, var(--pink)); }

.legend-chip[data-type="entreno"] { --dot: #4dd0ff; }
.legend-chip[data-type="torneo"] { --dot: #ff2d78; }
.legend-chip[data-type="evento"] { --dot: #ffd36a; }
.legend-chip[data-type="viaje"] { --dot: #9d38ff; }
.legend-chip[data-type="badbro"] { --dot: #ff8a4d; }
.legend-chip[data-type="badown"] { --dot: #6effa1; }
.legend-chip[data-type="summer"] { --dot: #ffe94d; }
.legend-chip[data-type="jugador"] { --dot: #ffffff; }
.legend-chip[data-type="aviso"] { --dot: #ff4444; }

.cal-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 40px;
}

.cal-month-label { margin: 0; font-size: clamp(30px, 5vw, 58px); letter-spacing: 0.02em; line-height: .9; }
.cal-nav { display: flex; gap: 8px; }

.cal-grid-head {
  display: none;
  grid-template-columns: repeat(7, minmax(0,1fr));
  gap: 8px;
  margin-top: 24px;
  color: var(--white-faint);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.cal-grid {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.cal-cell {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  min-height: 96px;
  padding: 12px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.cal-cell.is-out { opacity: .32; }
.cal-cell.is-today { border-color: var(--pink); box-shadow: 0 0 0 2px rgba(255,45,120,.28); }

.cal-daynum { font-size: 18px; font-weight: 800; letter-spacing: 0.02em; }
.cal-dayname { color: var(--white-faint); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }

.cal-event {
  border-radius: 10px;
  padding: 7px 9px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  background: rgba(255,255,255,.08);
  border-left: 3px solid var(--dot, var(--pink));
}

.cal-event[data-type="entreno"], .cal-event[data-type="training"] { --dot: #ff2d78; }
.cal-event[data-type="torneo"], .cal-event[data-type="match"] { --dot: #ffd36a; }
.cal-event[data-type="badbro"], .cal-event[data-type="evento"], .cal-event[data-type="special"] { --dot: #9d38ff; }
.cal-event[data-type="badown"] { --dot: #ff7a5c; }
.cal-event[data-type="viaje"] { --dot: #4dd0ff; }
.cal-event[data-type="summer"] { --dot: #ffe94d; }
.cal-event[data-type="jugador"] { --dot: #ffffff; }
.cal-event[data-type="aviso"] { --dot: #ff4444; }

.cal-list { display: grid; gap: 12px; margin-top: 34px; }

.cal-list-item {
  display: grid;
  gap: 6px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.035);
  padding: 16px 18px;
  border-left: 4px solid var(--dot, var(--pink));
}

.cal-list-item[data-type="entreno"], .cal-list-item[data-type="training"] { --dot: #ff2d78; }
.cal-list-item[data-type="torneo"], .cal-list-item[data-type="match"] { --dot: #ffd36a; }
.cal-list-item[data-type="badbro"], .cal-list-item[data-type="evento"], .cal-list-item[data-type="special"] { --dot: #9d38ff; }
.cal-list-item[data-type="badown"] { --dot: #ff7a5c; }
.cal-list-item[data-type="viaje"] { --dot: #4dd0ff; }
.cal-list-item[data-type="summer"] { --dot: #ffe94d; }
.cal-list-item[data-type="jugador"] { --dot: #ffffff; }
.cal-list-item[data-type="aviso"] { --dot: #ff4444; }

.cal-list-date { color: var(--dot, var(--pink)); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.cal-list-item strong { font-size: 17px; letter-spacing: 0.02em; color: var(--white); }
.cal-list-item p { margin: 0; color: var(--white-soft); font-size: 14px; line-height: 1.5; }

/* ---------- APPS ---------- */

.app-grid { display: grid; gap: 16px; margin-top: 36px; }

.app-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 84% 10%, rgba(157,56,255,.16), transparent 34%),
    rgba(255,255,255,.035);
  padding: clamp(22px, 3.6vw, 40px);
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
}

.app-card h3 { margin: 0; font-size: clamp(26px, 3.6vw, 44px); line-height: .9; letter-spacing: 0.02em; }
.app-card p { margin: 12px 0 0; color: var(--white-muted); line-height: 1.55; }

.app-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.app-meta span {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.05);
  border-radius: var(--pill);
  padding: 8px 13px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--white-muted);
}

.guntux-band {
  margin-top: 40px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong);
  background: #050506;
  padding: clamp(26px, 5vw, 60px);
  display: grid;
  gap: 14px;
}

.guntux-band h3 { margin: 0; font-size: clamp(30px, 5.4vw, 70px); line-height: .88; letter-spacing: 0.02em; }
.guntux-band p { margin: 0; color: var(--white-muted); line-height: 1.6; max-width: 760px; }

/* ---------- VOLÚMENES BADBRO ---------- */

.vol-grid { display: grid; gap: 16px; margin-top: 36px; }

.vol-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  min-height: 360px;
  padding: clamp(22px, 3.6vw, 40px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  box-shadow: var(--shadow-deep);
}

.vol-card.vol-1 { background: linear-gradient(160deg, rgba(255,45,120,.9), rgba(255,138,77,.85)); color: #050506; }
.vol-card.vol-2 { background: linear-gradient(160deg, rgba(157,56,255,.9), rgba(255,45,120,.8)); }
.vol-card.vol-next { background: radial-gradient(circle at 20% 12%, rgba(255,255,255,.1), transparent 34%), #07070a; }

.vol-num { font-size: clamp(56px, 9vw, 120px); line-height: .8; letter-spacing: 0.02em; font-weight: 800; opacity: .9; }
.vol-card h3 { margin: 0; font-size: clamp(26px, 3.6vw, 44px); line-height: .9; letter-spacing: 0.02em; }
.vol-card p { margin: 0; line-height: 1.5; opacity: .78; max-width: 480px; }
.vol-card.vol-1 p { color: rgba(0,0,0,.68); }

/* ---------- ESTRUCTURA TERRITORIAL / LISTAS FUERTES ---------- */

.big-list { display: grid; gap: 10px; margin-top: 34px; }

.big-list-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  border-bottom: 1px solid var(--line);
  padding: 18px 4px;
  transition: padding .2s ease, border-color .2s ease;
}

.big-list-item:hover { border-color: var(--pink); padding-left: 12px; }
.big-list-item strong { font-size: clamp(24px, 4vw, 46px); letter-spacing: 0.02em; line-height: .92; font-weight: 800; }
.big-list-item span { color: var(--white-muted); font-size: 14px; line-height: 1.45; }

/* ---------- PROTECCIÓN DEL MENOR (panel numerado fijo) ---------- */

.protocol-grid { display: grid; gap: 14px; margin-top: 40px; counter-reset: protocolo; }

.protocol-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.035);
  padding: clamp(22px, 3.4vw, 38px);
  display: grid;
  gap: 10px;
}

.protocol-item h3 { margin: 0; display: flex; align-items: baseline; gap: 14px; font-size: clamp(22px, 3vw, 34px); letter-spacing: 0.02em; line-height: .95; }
.protocol-item h3::before {
  counter-increment: protocolo;
  content: counter(protocolo, decimal-leading-zero);
  color: var(--pink);
  font-size: clamp(26px, 3.6vw, 44px);
  font-weight: 800;
  letter-spacing: 0.02em;
}
.protocol-item p { margin: 0; color: var(--white-muted); line-height: 1.65; }
.protocol-item ul { margin: 0; padding-left: 20px; color: var(--white-muted); line-height: 1.8; }

.responsable-card {
  margin-top: 40px;
  border-radius: var(--radius-lg);
  padding: clamp(26px, 5vw, 60px);
  background: linear-gradient(145deg, #ff3b63, #ff2d78 52%, #b44dff);
  color: var(--white);
  display: grid;
  gap: 12px;
  box-shadow: var(--shadow-pink);
}

.responsable-card .eyebrow { border-color: rgba(255,255,255,.34); color: rgba(255,255,255,.85); background: rgba(255,255,255,.12); }
.responsable-card h3 { margin: 0; font-size: clamp(30px, 5.4vw, 68px); line-height: .88; letter-spacing: 0.02em; }
.responsable-card p { margin: 0; line-height: 1.55; color: rgba(255,255,255,.86); max-width: 780px; }

/* ---------- CANALES DE CONTACTO ---------- */

.channel-grid { display: grid; gap: 14px; margin-top: 36px; }

.channel-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.035);
  padding: clamp(20px, 3vw, 34px);
  display: grid;
  gap: 10px;
  align-content: start;
  transition: border-color .18s ease, transform .18s ease;
}

a.channel-card:hover { border-color: var(--pink); transform: translateY(-3px); }

.channel-card span { color: var(--pink); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.channel-card strong { font-size: clamp(18px, 2.6vw, 26px); letter-spacing: 0.02em; line-height: 1.05; word-break: break-word; }
.channel-card p { margin: 0; color: var(--white-muted); font-size: 13px; line-height: 1.5; }

/* ---------- PROSA LEGAL ---------- */

.legal-prose {
  max-width: 900px;
  display: grid;
  gap: 8px;
}

.legal-prose h2 { font-size: clamp(26px, 4vw, 44px); letter-spacing: 0.02em; line-height: .94; margin: 34px 0 6px; }
.legal-prose h3 { font-size: clamp(19px, 2.6vw, 26px); letter-spacing: 0.02em; margin: 22px 0 2px; }
.legal-prose p, .legal-prose li { color: var(--white-muted); line-height: 1.75; font-size: 15px; }
.legal-prose ul { margin: 4px 0; padding-left: 22px; }
.legal-prose strong { color: var(--white); }
.legal-prose a { color: var(--pink); font-weight: 700; }
.legal-prose a:hover { text-decoration: underline; }

/* ---------- CTA FINAL COMÚN ---------- */

.cta-final {
  margin-top: clamp(50px, 7vw, 90px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 12% 12%, rgba(255,45,120,.3), transparent 36%),
    radial-gradient(circle at 88% 88%, rgba(157,56,255,.22), transparent 36%),
    #060608;
  padding: clamp(30px, 6vw, 74px);
  display: grid;
  gap: 20px;
  box-shadow: var(--shadow-deep);
}

.cta-final h2 { margin: 0; font-size: clamp(34px, 6.4vw, 88px); line-height: .86; letter-spacing: 0.02em; }
.cta-final p { margin: 0; color: var(--white-muted); line-height: 1.55; max-width: 720px; }
.cta-final .form-actions { margin-top: 4px; }

/* ---------- RESPONSIVE PÁGINAS INTERNAS ---------- */

@media (min-width: 680px) {
  .split-card { grid-template-columns: 1fr 1fr; }
  .feature-block { grid-template-columns: 1.1fr .9fr; }
  .feature-block.is-flipped .feature-body { order: 2; }
  .feature-block.is-flipped .feature-media { order: 1; }
  .product-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .app-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .vol-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .channel-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cal-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .form-grid.two-cols { grid-template-columns: 1fr 1fr; }
  .form-grid.two-cols .field.full { grid-column: 1 / -1; }
}

@media (min-width: 980px) {
  .page-hero-grid { grid-template-columns: 1.15fr .85fr; align-items: end; }
  .page-hero-grid.no-media { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .app-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .vol-grid { grid-template-columns: 1.1fr .95fr .95fr; }
  .channel-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .cal-grid { grid-template-columns: repeat(7, minmax(0,1fr)); }
  .cal-grid-head { display: grid; }
  .cal-cell .cal-dayname { display: none; }
  .protocol-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .timeline { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .timeline-item.is-wide { grid-column: 1 / -1; }
}

@media (max-width: 979px) {
  .cal-cell.is-out { display: none; }
  .cal-cell:not(:has(.cal-event)) { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}
/* ============================================================
   FASE 2.0 FINAL — RECONSTRUCCIÓN VISUAL COMPLETA
   Corrige los ~30 fallos detectados en producción:
   fondos por sección · sponsors renombrados · cards sin solape
   · calendario con mes · hero sin hover roto · BADOWN jerarquía
   · footer editorial alineado · carita real · GUMZUX.
   Capa final: gobierna sobre las anteriores.
   ============================================================ */

/* A-01: segundo :root eliminado — variables fusionadas en el bloque principal (L57) */

/* ---------- FONDO BASE NEUTRO (cada sección pone el suyo) ---------- */
html{ background:#050506; }
body{ background:#050506; }
body::before{ display:none; }

/* ============================================================
   1. FONDOS POR SECCIÓN — cada bloque su atmósfera
   ============================================================ */

/* utilidades de fondo por sección */
.bg-black{ background:#050506; }
.bg-carbon{ background:linear-gradient(180deg,#08080b,#0c0c11); }
.bg-pink{
  background:
    radial-gradient(900px 600px at 80% 12%, rgba(255,45,120,.22), transparent 60%),
    radial-gradient(700px 500px at 8% 90%, rgba(255,138,77,.10), transparent 60%),
    #070406;
}
.bg-purple{
  background:
    radial-gradient(900px 620px at 15% 10%, rgba(157,56,255,.20), transparent 60%),
    radial-gradient(700px 520px at 90% 88%, rgba(255,45,120,.12), transparent 60%),
    #06050a;
}
.bg-warm{
  background:
    radial-gradient(900px 600px at 85% 20%, rgba(255,138,77,.16), transparent 60%),
    radial-gradient(700px 520px at 10% 84%, rgba(255,45,120,.14), transparent 60%),
    #080506;
}
.bg-photo-1{ background:#050506 url("../img/fondos/fondo-1.jpg") center/cover no-repeat fixed; }
.bg-photo-2{ background:#050506 url("../img/fondos/fondo-2.jpg") center/cover no-repeat fixed; }
.bg-photo-1::before,
.bg-photo-2::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(90deg, rgba(5,5,6,.94) 0%, rgba(5,5,6,.72) 42%, rgba(5,5,6,.30) 100%);
  pointer-events:none;
}
.bg-photo-1 > *, .bg-photo-2 > *{ position:relative; z-index:1; }

@media (prefers-reduced-motion:reduce){
  .bg-photo-1, .bg-photo-2{ background-attachment:scroll; }
}
@media (max-width:768px){
  .bg-photo-1, .bg-photo-2{ background-attachment:scroll; }
}

/* separadores suaves entre secciones para que "respire" el cambio de fondo */
.section, .hero, .page-hero, .sponsors-section, footer.footer{ position:relative; }

/* ============================================================
   2. TIPOGRAFÍA — sin colisiones
   ============================================================ */
h1,.hero-title,.display-title,.page-hero .display-title{ font-size:var(--text-hero); line-height:1.32; letter-spacing:.01em; }
h2,.section-title,.month-copy h2,.cta-final h2,.modal-card h2,.cal-month-label,.legal-prose h2,.quote-band p{ font-size:var(--text-h2); line-height:1.32; letter-spacing:.01em; }
h3,.behance-card h3,.video-content h3,.player-info h3,.social-card h3,.split-half h3,.feature-body h3,.timeline-item h3,.form-card h3,.app-card h3,.vol-card h3,.guntux-band h3,.responsable-card h3,.protocol-item h3,.faq-group>h3,.legal-prose h3,.channel-card strong,.big-list-item strong,.notice-band strong{ font-size:var(--text-h3); line-height:1.32; letter-spacing:.01em; }
.protocol-item h3::before{ font-size:var(--text-h3); letter-spacing:0; }
.brand-mark{ font-size:1.2rem; letter-spacing:-.01em; }
.vol-num{ font-size:clamp(2.2rem,5vw,3.6rem); line-height:1.1; letter-spacing:0; }
.quote-band p{ font-weight:800; }

section.section{ padding-block:clamp(5.5rem,8.5vw,10rem); }
.hero,.page-hero{ margin-top:clamp(1.4rem,3vw,3rem); }
.hero{ min-height:0; align-items:start; }

.cards-grid,.social-grid,.app-grid,.vol-grid,.channel-grid,.product-grid,.feature-grid,.protocol-grid,.timeline,.hero-grid,.page-hero-grid,.club-grid,.month-grid,.footer-cols,.players-layout,.week-grid{ gap:var(--gap-grid); }

/* Texto de lectura */
p,li,.lead,.club-text,.club-text p,.player-info p,.behance-card p,.social-card p,.feature-body p,.feature-body ul,.timeline-item p,.app-card p,.vol-card p,.channel-card p,.product-body p,.notice-band p,.guntux-band p,.protocol-item p,.protocol-item ul,.legal-prose p,.legal-prose li,.accordion-panel,.form-card>p,.cta-final p,.cal-list-item p{ font-size:var(--text-body); line-height:1.75; color:var(--tech); }
.hero-floating-card p,.form-note,.product-state,.cal-list-item p{ color:var(--tech-soft); }
.month-copy p,.split-half.is-pink p,.vol-card.vol-1 p,.quote-band p,.hero-floating-card strong,.hero-floating-card p{ color:rgba(0,0,0,.72); }
.responsable-card p{ color:rgba(255,255,255,.9); }

.eyebrow{ font-size:.66rem; }
.chip{ font-size:.85rem; padding:11px 18px; }
.chip.is-big{ font-size:.95rem; padding:13px 20px; }

/* ============================================================
   3. HERO — arreglar hover roto de los tags
   ============================================================ */
.hero-proof span{
  font-size:.72rem;
  transition:none;              /* sin hover que dejaba "Bádminton" en rosa pisado */
}
.hero-proof span:hover{ background:rgba(255,255,255,.06); color:var(--white); border-color:var(--hair); }
.hero-photo-card,.hero-photo-card img,.hero-media{ min-height:440px; }
.hero .lead,.page-hero .lead{ max-width:620px; margin-top:1.1rem; }
@media (min-width:1180px){ .hero-photo-card,.hero-photo-card img{ min-height:520px; } }

/* ============================================================
   4. SPONSORS — "SPONSORS OFICIALES", sin BACAN·CANTILLANA,
      dos líneas divididas
   ============================================================ */
.sponsors-section{ padding:clamp(3rem,6vw,5rem) 0; border-block:1px solid var(--hair); }
.sponsor-band{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.sponsor-head{ display:flex; align-items:center; justify-content:center; margin-bottom:26px; }
.sponsor-head span{ font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--tech-soft); }
.sponsor-head span:last-child{ display:none; }              /* borra "BACAN · CANTILLANA" */
.sponsor-rows{ display:grid; gap:22px; overflow:hidden; }
.sponsor-rows::before,.sponsor-rows::after{
  content:""; position:absolute; top:0; bottom:0; width:14%; z-index:3; pointer-events:none;
}
.sponsor-row-wrap{ position:relative; overflow:hidden; padding:6px 0; }
.sponsor-row-wrap::before,.sponsor-row-wrap::after{
  content:""; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none;
}
.sponsor-row-wrap::before{ left:0; background:linear-gradient(90deg,#050506,transparent); }
.sponsor-row-wrap::after{ right:0; background:linear-gradient(270deg,#050506,transparent); }
/* línea divisoria entre las dos filas */
.sponsor-rows .sponsor-row-wrap + .sponsor-row-wrap{ border-top:1px solid var(--hair); }
.sponsor-track{ display:flex; align-items:center; gap:clamp(38px,6vw,72px); width:max-content; animation:sponsorRun 46s linear infinite; }
.sponsor-track.reverse{ animation:sponsorRunRev 52s linear infinite; }
.sponsor-track:hover{ animation-play-state:paused; }
@keyframes sponsorRun{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes sponsorRunRev{ from{transform:translateX(-50%)} to{transform:translateX(0)} }
.sponsor-logo{ height:42px; width:auto; filter:grayscale(1) brightness(2.4); opacity:.8; flex:none; }
@media (prefers-reduced-motion:reduce){ .sponsor-track,.sponsor-track.reverse{ animation:none; flex-wrap:wrap; justify-content:center; } }

/* ============================================================
   5. CARDS ECOSISTEMA — sin solape texto/botón
   ============================================================ */
.cards-grid{ display:grid; grid-template-columns:1fr; }
@media (min-width:680px){ .cards-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .cards-grid{ grid-template-columns:repeat(3,1fr); } }

.behance-card{
  background:var(--card) !important;
  border:1px solid var(--hair);
  border-radius:var(--radius-lg);
  box-shadow:none;
  min-height:0;
  padding:clamp(22px,2.6vw,32px);
  display:flex; flex-direction:column;
  gap:12px;                       /* separa texto del botón: nunca se pisan */
}
.behance-card.dark{ background:var(--card-2) !important; }
.behance-card.pink{ background:linear-gradient(150deg,#ff2d78,#ff5c9d) !important; color:#08070a; border-color:transparent; }
.behance-card.pink p{ color:rgba(0,0,0,.74); }
.behance-card h3{ margin:0; }
.behance-card p{ margin:0; flex:1; }              /* el texto empuja el botón abajo, sin solaparse */
.behance-card .card-bottom{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:4px; }
.behance-card.large{ grid-row:span 2; }
@media (max-width:679px){ .behance-card.large{ grid-row:auto; } }
.capsule{ flex:none; }

/* Cards limpias generales */
.app-card,.social-card,.channel-card,.feature-block,.split-half,.form-card,.product-card,.notice-band,.timeline-item,.protocol-item,.week-cell,.eq-card{ background:var(--card) !important; box-shadow:none; }
.split-half.is-pink{ background:linear-gradient(150deg,#ff2d78,#ff5c9d) !important; }

/* ============================================================
   DEPORTISTAS — foto y ficha independientes
   ============================================================ */
.players-layout{ display:grid; gap:var(--gap-grid); }
@media (min-width:900px){ .players-layout{ grid-template-columns:.9fr 1.1fr; align-items:stretch; } }
.player-media{ position:relative; overflow:hidden; border-radius:var(--radius-lg); border:1px solid var(--hair); min-height:360px; }
.player-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; }
.player-media::after{ content:""; position:absolute; inset:auto 0 0 0; height:34%; background:linear-gradient(0deg,rgba(0,0,0,.6),transparent); }
.player-media-tag{ position:absolute; left:16px; bottom:16px; z-index:2; background:var(--pink); color:#fff; border-radius:var(--pill); padding:8px 16px; font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.player-info{ border:1px solid var(--hair); border-radius:var(--radius-lg); padding:clamp(24px,4vw,44px); display:grid; gap:16px; align-content:center; }
.player-info h3{ margin:0; }
.player-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.player-tags span{ border:1px solid var(--hair); border-radius:var(--pill); padding:8px 14px; font-size:.72rem; font-weight:700; color:var(--tech); }

/* ============================================================
   CALENDARIO RESUMIDO HOME — grid asimétrica limpia
   ============================================================ */
.week-grid{ display:grid; gap:14px; margin-top:34px; grid-template-columns:repeat(2,1fr); }
@media (min-width:680px){ .week-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1024px){ .week-grid{ grid-template-columns:repeat(6,1fr); } .week-cell.wide{ grid-column:span 2; } }
.week-cell{ border:1px solid var(--hair); border-radius:var(--radius-md); padding:20px; display:grid; gap:8px; align-content:start; min-height:148px; }
.week-cell.is-train{ border-left:3px solid #4dd0ff; }
.week-cell.is-special{ border-left:3px solid var(--pink); background:var(--card-2) !important; }
.week-cell.is-rest{ opacity:.6; }
.week-cell .wd{ color:var(--tech-soft); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; }
.week-cell strong{ font-size:var(--text-h3); letter-spacing:0; }
.week-cell p{ margin:0; font-size:.82rem; line-height:1.55; color:var(--tech); }

/* ============================================================
   CALENDARIO (página) — nombre del mes visible + rejilla cuadrada
   ============================================================ */
.cal-controls{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; margin-top:36px; }
.cal-month-label{ margin:0; color:#fff; }
.cal-grid-head{ display:none; }
@media (min-width:900px){ .cal-grid-head{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin-top:22px; color:var(--tech-soft); font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; } }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin-top:12px; }
@media (max-width:640px){ .cal-grid{ grid-template-columns:repeat(7,1fr); gap:4px; } .cal-cell{ min-height:0 !important; padding:6px !important; } .cal-cell .cal-event{ display:none; } .cal-cell.has-ev{ box-shadow:inset 0 -3px 0 var(--pink); } }

/* ============================================================
   BADOWN TEAM — jerarquía del subtítulo corregida
   ============================================================ */
.page-hero.tone-badown .lead{ font-size:clamp(1rem,1.5vw,1.2rem); color:var(--tech); max-width:560px; margin-top:1.3rem; }
.page-hero.tone-badown .display-title{ margin-bottom:0; }

/* ============================================================
   APPS — enlaces a la pantalla app / apps reales
   ============================================================ */
.app-grid{ display:grid; grid-template-columns:1fr; }
@media (min-width:680px){ .app-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .app-grid{ grid-template-columns:repeat(3,1fr); } }
.app-card{ border:1px solid var(--hair); border-radius:var(--radius-lg); padding:clamp(22px,3vw,34px); min-height:0; display:flex; flex-direction:column; gap:14px; }
.app-card h3{ margin:0; }
.app-card p{ margin:0; flex:1; }
.app-card .app-meta{ display:flex; flex-wrap:wrap; gap:8px; }
.app-card .app-meta span{ border:1px solid var(--hair); border-radius:var(--pill); padding:7px 12px; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--tech); }
.app-card .form-actions{ margin-top:auto; }

/* ============================================================
   6. CARITA REAL (cara.png)
   ============================================================ */
.bacan-face{ width:clamp(84px,10vw,132px); height:auto; }
.bacan-face img{ width:100%; height:auto; display:block; filter:drop-shadow(0 12px 30px rgba(157,56,255,.45)); }
.video-face{ position:absolute; top:clamp(14px,2.6vw,24px); left:clamp(14px,2.6vw,24px); z-index:3; width:clamp(58px,8vw,86px); height:auto; }
.video-face img{ width:100%; height:auto; display:block; filter:drop-shadow(0 8px 20px rgba(0,0,0,.5)); }

/* ============================================================
   GUNTUX→GUMZUX band (Apps)
   ============================================================ */
.guntux-band{ border:1px solid var(--hair); background:var(--card-2); border-radius:var(--radius-lg); padding:clamp(26px,5vw,54px); display:grid; gap:14px; margin-top:40px; }
.guntux-band h3{ margin:0; }
.gumzux-logo-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.gumzux-logo-row img{ height:26px; width:auto; }
.gumzux-logo-row a{ display:inline-flex; }

/* ============================================================
   Legales / prosa
   ============================================================ */
.legal-prose{ max-width:900px; }
.legal-prose a{ color:var(--pink); }

@media (prefers-reduced-motion:reduce){
  .bacan-face{ transition:none; }
}

/* ============================================================
   APPS · ESCENA CLAUDE DESIGN reconstruida en Vanilla
   Panel de escritorio (recibos) + 5 iPhones "Diseño Responsive"
   ============================================================ */

/* ---------- ESCRITORIO ---------- */
.scene-desktop{ margin-top:44px; perspective:1800px; }
.desk-laptop{ max-width:1000px; margin:0 auto; transform:rotateX(2deg); }
.desk-screen{
  position:relative; border-radius:16px 16px 0 0; overflow:hidden;
  border:12px solid #16161d; border-bottom:0; background:#0a0a10;
  aspect-ratio:16/10; box-shadow:0 50px 120px rgba(255,45,120,.12), 0 40px 80px rgba(0,0,0,.6);
}
.desk-base{ height:16px; border-radius:0 0 16px 16px; background:linear-gradient(#1c1c24,#0d0d12); position:relative; box-shadow:0 24px 44px rgba(0,0,0,.5); }
.desk-base::after{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:96px; height:5px; border-radius:0 0 7px 7px; background:#000; }

.deskp{ position:absolute; inset:0; background:radial-gradient(1000px 500px at 12% 60%,rgba(255,45,120,.06),transparent 60%),#0a0a10; padding:clamp(12px,2vw,24px); display:flex; flex-direction:column; gap:clamp(8px,1.4vw,16px); overflow:hidden; container-type:inline-size; }
.deskp-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.deskp-brand{ display:flex; align-items:center; gap:10px; font-size:clamp(9px,1.15cqw,14px); color:#fff; line-height:1.3; }
.deskp-brand b{ font-weight:800; }
.deskp-brand small{ color:#6b7688; }
.deskp-logo{ width:clamp(26px,3cqw,40px); aspect-ratio:1; border-radius:11px; background:var(--pink); display:grid; place-items:center; font-weight:800; color:#fff; font-size:clamp(11px,1.5cqw,18px); }
.deskp-meta{ display:flex; align-items:center; gap:8px; }
.deskp-meta span{ font-size:clamp(7px,.9cqw,11px); color:#8E9BAE; border:1px solid var(--hair); border-radius:999px; padding:5px 10px; }
.deskp-meta .cloud{ color:#fff; }
.deskp-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(6px,1cqw,12px); }
.deskp-kpi{ border:1px solid var(--hair); border-radius:14px; background:#101019; padding:clamp(8px,1.2cqw,16px); display:grid; gap:3px; }
.deskp-kpi.is-pink{ border-color:rgba(255,45,120,.5); background:linear-gradient(160deg,rgba(255,45,120,.14),rgba(157,56,255,.08)); }
.deskp-kpi span{ font-size:clamp(6px,.82cqw,10px); color:#8E9BAE; letter-spacing:.02em; }
.deskp-kpi b{ font-size:clamp(15px,2.4cqw,30px); font-weight:800; letter-spacing:-.02em; color:#fff; }
.deskp-kpi.is-pink b{ color:var(--pink); }
.deskp-tabs{ display:flex; align-items:center; gap:clamp(4px,.8cqw,10px); border:1px solid var(--hair); border-radius:999px; padding:5px; overflow:hidden; }
.deskp-tabs span{ font-size:clamp(7px,.92cqw,12px); color:#8E9BAE; padding:6px 12px; border-radius:999px; white-space:nowrap; display:inline-flex; align-items:center; gap:5px; font-weight:600; }
.deskp-tabs span.on{ background:var(--pink); color:#fff; }
.deskp-tabs i{ font-style:normal; background:rgba(255,45,120,.25); color:var(--pink); font-size:.82em; padding:1px 6px; border-radius:999px; font-weight:800; }
.deskp-tabs span.on i{ background:rgba(0,0,0,.25); color:#fff; }
.deskp-body{ display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(8px,1.4cqw,18px); min-height:0; }
.deskp-panel{ border:1px solid var(--hair); border-radius:16px; background:#0d0d15; padding:clamp(10px,1.6cqw,22px); display:flex; flex-direction:column; gap:clamp(6px,1cqw,12px); }
.deskp-panel h4{ margin:0; font-size:clamp(11px,1.5cqw,19px); font-weight:800; color:#fff; letter-spacing:-.01em; }
.deskp-psub{ margin:0; font-size:clamp(7px,.9cqw,11px); color:#6b7688; }
.deskp-two{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(6px,1cqw,12px); }
.deskp-f{ display:grid; gap:4px; }
.deskp-f label{ font-size:clamp(6px,.78cqw,9px); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6b7688; }
.deskp-ctl{ border:1px solid var(--hair); border-radius:10px; background:#08080d; padding:clamp(7px,1cqw,12px); font-size:clamp(8px,1cqw,13px); color:#fff; font-weight:500; }
.deskp-actions{ display:flex; gap:8px; margin-top:2px; flex-wrap:wrap; }
.deskp-btn{ background:var(--pink); color:#fff; border-radius:999px; padding:clamp(8px,1.1cqw,13px) clamp(12px,1.6cqw,20px); font-size:clamp(8px,1cqw,13px); font-weight:700; }
.deskp-btn.ghost{ background:transparent; border:1px solid var(--hair); color:#fff; }
.deskp-name{ margin:0; font-size:clamp(11px,1.5cqw,18px); font-weight:800; color:#fff; }
.deskp-mini{ border:1px solid var(--hair); border-radius:12px; background:#08080d; padding:clamp(7px,1cqw,13px); display:grid; gap:2px; }
.deskp-mini span{ font-size:clamp(6px,.78cqw,9px); color:#6b7688; letter-spacing:.06em; text-transform:uppercase; }
.deskp-mini b{ font-size:clamp(9px,1.15cqw,15px); color:#fff; font-weight:700; }
.deskp-mini b.ok{ color:#5ef2a0; }
.deskp-tutor{ margin:auto 0 0; font-size:clamp(8px,1cqw,12px); color:#8E9BAE; line-height:1.6; }
.deskp-tutor b{ color:#fff; }
.deskp-tutor .pink{ color:var(--pink); font-weight:700; }
@container (max-width:640px){ .deskp-body{ grid-template-columns:1fr; } .deskp-body .deskp-panel:last-child{ display:none; } .deskp-tabs span:nth-child(n+5){ display:none; } }

/* ---------- MÓVILES ---------- */
.scene-mobile-head{ display:flex; flex-direction:column; gap:6px; }
.scene-idx{ font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--tech-soft); }
.section-title em{ font-style:italic; font-weight:500; color:var(--pink); font-family:Georgia,"Times New Roman",serif; letter-spacing:0; }

.scene-phones{ display:flex; justify-content:center; align-items:flex-start; gap:clamp(-30px,-2vw,12px); margin-top:44px; padding:20px 0; }
.mphone{
  position:relative; width:clamp(150px,15vw,208px); flex:none;
  border-radius:30px; border:7px solid #16161d; background:#08080c;
  aspect-ratio:9/19.5; overflow:hidden; box-shadow:0 34px 80px rgba(0,0,0,.6);
  transition:transform .45s cubic-bezier(.4,0,.2,1);
}
.mphone::before{ content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%); width:34%; height:16px; border-radius:0 0 12px 12px; background:#000; z-index:6; }
.mphone:nth-child(1){ transform:translateY(30px) rotate(-9deg); z-index:1; }
.mphone:nth-child(2){ transform:translateY(10px) rotate(-4deg); z-index:2; }
.mphone:nth-child(3){ transform:translateY(-6px) rotate(0deg); z-index:3; }
.mphone:nth-child(4){ transform:translateY(10px) rotate(4deg); z-index:2; }
.mphone:nth-child(5){ transform:translateY(30px) rotate(9deg); z-index:1; }
.mphone:hover{ transform:translateY(-16px) rotate(0deg) scale(1.05); z-index:9; }

.mp-scr{ position:absolute; inset:0; background:linear-gradient(180deg,#0c0c12,#08080c); padding:0 12px 12px; overflow:hidden; display:flex; flex-direction:column; }
.mp-bar{ display:flex; align-items:center; justify-content:space-between; padding:12px 6px 8px; font-size:9px; font-weight:700; color:#fff; }
.mp-eyebrow{ color:var(--pink); font-size:7.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin-bottom:4px; }
.mp-h{ font-size:15px; font-weight:800; letter-spacing:-.02em; color:#fff; line-height:1.05; margin-bottom:3px; }
.mp-h em{ font-style:italic; font-weight:500; color:#8E9BAE; font-family:Georgia,serif; }
.mp-note{ font-size:8.5px; color:#6b7688; margin-bottom:9px; line-height:1.4; }
.mp-pill{ display:inline-block; background:var(--pink); color:#fff; font-size:9px; font-weight:700; padding:8px 14px; border-radius:999px; margin-bottom:9px; }
.mp-pill.block{ display:block; text-align:center; margin-top:auto; }
.mp-kpis{ display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-bottom:9px; }
.mp-kpis.three{ grid-template-columns:repeat(3,1fr); }
.mp-kpi{ border:1px solid var(--hair); border-radius:9px; background:#101019; padding:6px 8px; display:grid; gap:1px; }
.mp-kpi.is-pink{ border-color:rgba(255,45,120,.4); background:rgba(255,45,120,.12); }
.mp-kpi span{ font-size:6px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#6b7688; }
.mp-kpi b{ font-size:15px; font-weight:800; letter-spacing:-.03em; color:#fff; }
.mp-kpi.is-pink b{ color:var(--pink); }
.mp-kpi b.green{ color:#5ef2a0; }
.mp-sub{ font-size:6.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#6b7688; margin:4px 0 6px; }
.mp-row,.mp-row2,.mp-row3{ display:flex; align-items:center; justify-content:space-between; gap:8px; border:1px solid rgba(255,255,255,.06); border-radius:8px; background:#0c0c12; padding:6px 8px; margin-bottom:4px; }
.mp-row span,.mp-row2 span,.mp-row3 span{ display:grid; min-width:0; }
.mp-row span b,.mp-row2 span b,.mp-row3 span b{ font-size:9px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-row span em,.mp-row2 span em{ font-size:7px; font-style:normal; color:#6b7688; }
.mp-row3 span{ display:flex; gap:8px; }
.mp-row>b{ font-size:10px; font-weight:800; }
.mp-row>b.pos{ color:#5ef2a0; }
.mp-row2 i,.mp-row3 i{ font-style:normal; font-size:7px; font-weight:700; padding:3px 7px; border-radius:999px; white-space:nowrap; }
.mp-row3 i.sc{ color:#fff; background:rgba(255,255,255,.08); font-weight:800; font-size:9px; }
.tag-green{ color:#5ef2a0; background:rgba(94,242,160,.14); }
.tag-pink{ color:#fff; background:var(--pink); }
.mp-row2 i:not(.tag-green):not(.tag-pink){ color:#8E9BAE; }
.mp-f{ display:grid; gap:3px; margin-bottom:6px; }
.mp-f label{ font-size:6px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#6b7688; }
.mp-ctl{ border:1px solid var(--hair); border-radius:8px; background:#101019; padding:7px 9px; font-size:9px; color:#fff; font-weight:500; }
.mp-cal{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.mp-cal span{ aspect-ratio:1; border-radius:5px; display:grid; place-items:center; font-size:7.5px; font-weight:700; color:#8E9BAE; background:#101019; border:1px solid rgba(255,255,255,.06); }
.mp-cal .tr{ border-color:rgba(77,208,255,.55); color:#fff; }
.mp-cal .to{ background:var(--pink); border-color:var(--pink); color:#fff; }
.mp-cal .vi{ background:#9d38ff; border-color:#9d38ff; color:#fff; }
.mp-cal .ev{ background:#ffd36a; border-color:#ffd36a; color:#08070a; }
.mp-cal .out{ opacity:.3; }

@media (max-width:760px){
  .desk-laptop{ transform:none; }
  .scene-phones{ overflow-x:auto; justify-content:flex-start; gap:14px; padding:14px 4px 22px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
  .scene-phones::-webkit-scrollbar{ height:0; }
  .mphone{ width:min(66vw,250px); scroll-snap-align:center; transform:none !important; }
  .mphone:hover{ transform:none !important; }
}
@media (prefers-reduced-motion:reduce){ .mphone{ transition:none; } }

/* ============================================================
   BACAN · Cabecera y pie globales
   Componentes compartidos por las páginas públicas vigentes.
   ============================================================ */

.bacan-global-header,
.bacan-global-footer {
  --global-bg: #050505;
  --global-surface: #111;
  --global-text: #fff;
  --global-muted: rgba(255,255,255,.66);
  --global-soft: rgba(255,255,255,.82);
  --global-line: rgba(255,255,255,.14);
  --global-pink: #ff2d78;
  color: var(--global-text);
  /* A-02: Poppins en todo el header/footer, no fuente del sistema */
  font-family: var(--font-main);
}

.bacan-global-header *,
.bacan-global-footer * {
  box-sizing: border-box;
}

.bacan-global-header {
  position: sticky;
  z-index: 1000;
  top: 0;
  width: 100%;
  border-bottom: 1px solid var(--global-line);
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(5,5,5,.92);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 4px 30px rgba(0,0,0,0.5);
  /* Steve Lemay HIG #1: iOS Dynamic Island / Safe Area Inset Support */
  padding-top: max(0px, env(safe-area-inset-top));
}

.bacan-global-header__inner {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(12px, 1.8vw, 24px);
  width: min(100% - 32px, 1440px);
  min-height: 76px;
  margin-inline: auto;
}

.bacan-global-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

.bacan-global-nav a {
  border-radius: 999px;
  color: var(--global-muted);
  font-size: clamp(.78rem, .82vw, .88rem);
  font-weight: 600;
  line-height: 1.2;
  padding: 8px 14px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease, transform 0.2s ease;
}

.bacan-global-nav a:hover,
.bacan-global-nav a:focus-visible {
  background: rgba(255,255,255,.09);
  color: #ffffff;
  transform: translateY(-1px);
}

.bacan-global-nav a[aria-current="page"] {
  background: rgba(255,45,120,0.12);
  color: var(--global-pink);
  font-weight: 700;
}

.bacan-global-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--global-text);
  text-decoration: none;
}

.bacan-global-brand__mark {
  color: var(--global-text);
  font-size: clamp(1.25rem,2vw,1.7rem);
  font-weight: 900;
  letter-spacing: -.055em;
  line-height: 1;
}

.bacan-global-brand__sub {
  padding-left: 12px;
  border-left: 1px solid var(--global-line);
  color: var(--global-muted);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .045em;
  line-height: 1.25;
  text-transform: uppercase;
}

.bacan-global-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0px;
  min-width: 0;
  overflow: hidden;
}

.bacan-global-nav a {
  border-radius: 9px;
  color: var(--global-muted);
  font-size: clamp(.62rem,.65vw,.72rem);
  font-weight: 600;
  line-height: 1.2;
  padding: 8px clamp(5px,.55vw,9px);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease;
}

.bacan-global-nav a:hover,
.bacan-global-nav a:focus-visible {
  background: rgba(255,255,255,.08);
  color: var(--global-text);
}

.bacan-global-nav a[aria-current="page"] {
  background: transparent;
  color: var(--global-pink);
}

/* FIX: CTA pill del nav mobile oculto en desktop */
@media (min-width: 1024px) {
  .bcn-nav-cta { display: none !important; }
}

.bacan-global-header__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 1px solid var(--global-pink);
  border-radius: 999px;
  background: var(--global-pink);
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .035em;
  padding: 10px 16px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.bacan-global-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 1px solid var(--global-line);
  border-radius: 11px;
  background: transparent;
  color: var(--global-text);
  cursor: pointer;
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  padding: 9px 14px;
}

.bacan-global-header a:focus-visible,
.bacan-global-header button:focus-visible,
.bacan-global-footer a:focus-visible,
.bacan-global-footer button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.bacan-global-footer {
  border-top: 1px solid var(--global-line);
  background: var(--global-bg);
  /* FIX responsive: forzar alineación izquierda explícita en todos los breakpoints */
  text-align: left;
}

/* FIX responsive — footer: alineación izquierda en todos los hijos */
.bacan-global-footer,
.bacan-global-footer__brand,
.bacan-global-footer__col,
.bacan-global-footer__lopivi,
.bacan-global-footer__meta,
.bacan-global-footer__bottom,
.bacan-global-footer h2,
.bacan-global-footer h3,
.bacan-global-footer p,
.bacan-global-footer a,
.bacan-global-footer span {
  text-align: left !important;
}

.bacan-global-footer__inner {
  width: min(100% - 40px, 1440px);
  margin-inline: auto;
  padding-block: clamp(54px,7vw,90px) 34px;
}

.bacan-global-footer__grid {
  display: grid;
  grid-template-columns: 1.35fr repeat(3,minmax(0,1fr));
  gap: clamp(28px,4vw,64px);
  align-items: start;
}

.bacan-global-footer__brand {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  gap: 9px;
  min-width: 0;
}

.bacan-global-footer__brand p,
.bacan-global-footer__brand h2,
.bacan-global-footer__brand a {
  text-align: left !important;
}

.bacan-global-footer__brand-top {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px;
  margin-bottom: 4px;
  width: 100%;
}

.bacan-global-footer__face {
  display: grid;
  width: 40px;
  height: 40px;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--global-line);
  border-radius: 50%;
  background: var(--global-surface);
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), border-color 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
}

.bacan-global-footer__face:hover {
  transform: rotate(8deg) scale(1.15);
  border-color: #ffffff;
  box-shadow: 0 10px 24px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.3);
}

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

.bacan-global-footer__logo {
  color: var(--global-text);
  font-size: 1.65rem;
  font-weight: 900;
  letter-spacing: -.055em;
}

.bacan-global-footer h2,
.bacan-global-footer h3,
.bacan-global-footer p {
  margin: 0;
}

.bacan-global-footer h2 {
  color: #ffffff !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

.bacan-global-footer h3 {
  display: flex !important;
  align-items: center !important;
  min-height: 36px !important;
  margin-bottom: 8px !important;
  color: rgba(255, 255, 255, 0.42) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

.bacan-global-footer p,
.bacan-global-footer a,
.bacan-global-footer button {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

.bacan-global-footer a {
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.bacan-global-footer a:hover {
  color: #ffffff !important;
}

.bacan-global-footer__col a,
.bacan-global-footer__cookie-button {
  display: block !important;
  width: fit-content !important;
  padding-block: 4px !important;
  font-size: 0.8rem !important;
  font-weight: 400 !important;
}

.bacan-global-footer__cookie-button {
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.bacan-global-footer__cookie-button:hover {
  color: var(--global-text);
}

.bacan-global-footer__lopivi,
.bacan-global-footer__meta,
.bacan-global-footer__bottom {
  border-top: 1px solid var(--global-line);
}

.bacan-global-footer__lopivi {
  display: grid;
  gap: 6px;
  margin-top: clamp(34px,5vw,58px);
  padding-top: 24px;
}

.bacan-global-footer__lopivi p {
  font-size: 0.76rem !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.5) !important;
  line-height: 1.5 !important;
}

.bacan-global-footer__lopivi strong {
  color: rgba(255, 255, 255, 0.8) !important;
  font-weight: 600 !important;
}

.bacan-global-footer__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 24px;
  padding-top: 22px;
}

.bacan-global-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
}

.bacan-global-footer__gumzux {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bacan-global-footer__gumzux img {
  display: block;
  width: auto;
  height: 32px;
  opacity: 1;
}

.bacan-global-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 22px;
  padding-top: 20px;
}

@media (max-width: 1180px) {
  .bacan-global-header__inner {
    /* FIX responsive: auto 1fr auto dejaba un hueco 1fr vacío entre logo y toggle
       que estiraba visualmente el header en móvil. */
    grid-template-columns: auto auto;
    justify-content: space-between;
  }

  .bacan-global-header__cta {
    display: none;
  }

  .bacan-global-nav-toggle {
    display: inline-flex;
  }

  .bacan-global-nav {
    position: absolute;
    z-index: 2;
    top: calc(100% + 1px);
    right: 0;
    left: 0;
    display: grid;
    align-items: stretch;
    justify-content: stretch;
    gap: 0;
    max-height: calc(100vh - 92px);
    overflow-y: auto;
    border: 1px solid var(--global-line);
    border-top: 0;
    border-radius: 0 0 14px 14px;
    background: rgba(8,8,8,.98);
    box-shadow: 0 22px 44px rgba(0,0,0,.42);
    opacity: 0;
    padding: 8px;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .18s ease, transform .18s ease;
  }

  .bacan-global-nav.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .bacan-global-nav a {
    padding: 13px 14px;
    text-align: left;
  }
}

@media (max-width: 900px) {
  .bacan-global-footer__grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 560px) {
  .bacan-global-header__inner {
    width: min(100% - 24px, 1440px);
    min-height: 68px;
  }

  .bacan-global-brand__sub {
    display: none;
  }

  .bacan-global-footer__inner {
    width: min(100% - 32px, 1440px);
  }

  .bacan-global-footer__grid {
    grid-template-columns: 1fr;
  }

  .bacan-global-footer__meta,
  .bacan-global-footer__bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  /* FIX responsive — footer mobile: alineación izquierda explícita */
  .bacan-global-footer__brand-top {
    justify-content: flex-start;
  }
  .bacan-global-footer__social {
    justify-content: flex-start;
  }
  .bacan-global-footer__gumzux {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bacan-global-nav {
    transition: none;
  }
}

/* ============================================================
   BACAN · NAVEGACIÓN POR PUNTOS (scroll-spy lateral)
   Se construye por JS (assets/js/dotnav.js) solo si la página
   tiene 2 o más paradas marcadas con data-dot-label.
   ============================================================ */

.bacan-dotnav {
  position: fixed;
  right: clamp(14px, 2vw, 26px);
  top: 50%;
  z-index: 60;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

@media (min-width: 1400px) {
  .bacan-dotnav {
    display: flex;
    transform: translateY(-50%);
    right: 18px;
  }
}

.bacan-dotnav__dot {
  position: relative;
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: background 0.25s cubic-bezier(0.34,1.56,0.64,1), border-color 0.25s ease, transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}

/* HIG Touch Target 44x44px */
.bacan-dotnav__dot::before {
  content: '';
  position: absolute;
  inset: -17px;
  border-radius: 50%;
}

.bacan-dotnav__dot:hover,
.bacan-dotnav__dot:focus-visible {
  border-color: #ff2d78;
  transform: scale(1.35);
}

.bacan-dotnav__dot.is-active {
  background: #ff2d78;
  border-color: #ff2d78;
  transform: scale(1.45);
}

.bacan-dotnav__tip {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%) translateX(10px) scale(0.92);
  white-space: nowrap;
  background: rgba(8, 8, 12, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(0.34,1.56,0.64,1), transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
}

.bacan-dotnav__dot:hover .bacan-dotnav__tip,
.bacan-dotnav__dot:focus-visible .bacan-dotnav__tip {
  opacity: 1;
  transform: translateY(-50%) translateX(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .bacan-dotnav__dot,
  .bacan-dotnav__tip {
    transition: none;
  }
}

/* ============================================================
   BACAN · Submenú local (Eventos) y migas de pan
   Añadido: componentes de navegación generados por header.php.
   No modifica ninguna regla existente (100 % aditivo).
   ============================================================ */

.bacan-subnav {
  position: sticky;
  top: 76px;
  z-index: 900;
  width: 100%;
  border-bottom: 1px solid rgba(255,255,255,.14);
  background: rgba(5,5,5,.96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.bacan-subnav__inner {
  display: flex;
  align-items: center;
  gap: 4px;
  width: min(100% - 32px, 1440px);
  margin-inline: auto;
  padding-block: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.bacan-subnav a {
  flex: none;
  border-radius: 999px;
  padding: 7px 16px;
  color: rgba(255,255,255,.66);
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.bacan-subnav a:hover,
.bacan-subnav a:focus-visible {
  background: rgba(255,255,255,.08);
  color: #fff;
}

.bacan-subnav a[aria-current="page"] {
  background: #ff2d78;
  color: #fff;
}

.bacan-breadcrumbs {
  width: 100%;
}

.bacan-breadcrumbs__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: min(100% - 32px, 1440px);
  margin-inline: auto;
  padding-block: 14px 0;
  font-size: .74rem;
  color: rgba(255,255,255,.5);
}

.bacan-breadcrumbs a {
  color: rgba(255,255,255,.5);
  text-decoration: none;
}

.bacan-breadcrumbs a:hover {
  color: #fff;
}

.bacan-breadcrumbs [aria-current="page"] {
  color: rgba(255,255,255,.82);
}

.bacan-breadcrumbs__sep {
  color: rgba(255,255,255,.3);
}

@media (max-width: 640px) {
  .bacan-breadcrumbs__inner { display: none; } /* en móvil, el submenú ya indica sección; evitamos duplicar */
}

/* ---------- CONSOLIDACIÓN · Reglas compartidas por 2 o más páginas (antes duplicadas) ---------- */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter);}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px;}
.h-xxl{font-size:clamp(2.4rem,6vw,4.8rem);}
.h-lg{font-size:clamp(1.7rem,3.4vw,2.6rem);}
.accent{color:var(--pink);}
.btn-ghost{border:1px solid var(--line-strong);color:#fff;}
/* FIX footer-bug: selector «section» desnudo eliminado — aplicaba padding a TODOS los section del sitio
   incluidos los del interior del footer global, descuadrándolo en todas las páginas.
   Las secciones con padding propio ya usan su clase específica (.page-hero, .legal-hero, etc.).
   Las secciones sin clase explícita de /como-lo-hemos-conseguido/ se cubren con el selector de abajo. */
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 80% at 80% 0%,rgba(255,45,120,.20),transparent 55%),linear-gradient(180deg,var(--black-900),var(--black-950));z-index:-1;}
.page-hero .crumb{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--white-faint);margin-bottom:16px;}
.page-hero .h-xxl{max-width:20ch;margin-bottom:22px;}
.philo{background:linear-gradient(180deg,var(--black-950),var(--black-850));}
.philo p{color:var(--white-soft);margin:0 0 16px;max-width:54ch;}
.cta-band{background:var(--black-950);}
.pink-panel{position:relative;background:linear-gradient(135deg,var(--pink),var(--pink-hot));border-radius:var(--radius-xl);padding:clamp(34px,5vw,60px);text-align:center;box-shadow:var(--shadow-pink);}
.pink-panel h2{color:#fff;margin-bottom:12px;}
.pink-panel p{color:rgba(255,255,255,.92);max-width:52ch;margin:0 auto 26px;}
.pink-panel .btn-ghost{border-color:rgba(255,255,255,.65);}
.legal-hero{padding:clamp(60px,8vw,110px) 0 clamp(40px,5vw,64px);border-bottom:1px solid var(--line);}
.legal-hero .eyebrow{display:inline-block;font-size:.75rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--pink);margin-bottom:16px;}
.legal-hero h1{margin:0 0 16px;font-size:clamp(2rem,4vw,3rem);font-weight:800;line-height:1.08;letter-spacing:-.02em;}
.legal-hero .updated{font-size:.85rem;color:var(--white-faint);margin-top:8px;}
.legal-body{padding:clamp(40px,6vw,80px) 0 clamp(60px,8vw,120px);}
.legal-content{max-width:780px;}
.legal-content h2{font-size:1.25rem;font-weight:700;margin:2.2em 0 .7em;color:var(--white);}
.legal-content p,.legal-content li{font-size:.97rem;color:var(--white-muted);margin-bottom:.9em;}
.legal-content ul{padding-left:1.4em;}
.legal-content ul li{margin-bottom:.4em;}
.legal-content a{color:var(--pink);text-decoration:underline;}
.legal-content h3{font-size:1rem;font-weight:600;margin:1.6em 0 .5em;color:var(--white-soft);}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;}
.split .media{aspect-ratio:5/6;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-deep);}
.split .media img{width:100%;height:100%;object-fit:cover;}
.split h2{margin-bottom:16px;}
.split .lead{margin-bottom:26px;}
.band{border-top:1px solid var(--line);}
.rows .row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);margin-bottom:clamp(28px,4vw,48px);align-items:start;}
.rows .row:last-child{margin-bottom:0;}
.rows h3{font-size:clamp(1.3rem,2.4vw,1.9rem);margin-bottom:10px;}
.rows p{margin:0;color:var(--white-soft);}
.pink-panel .eyebrow{color:rgba(255,255,255,.85);}
.pink-panel .micro{margin-top:16px;font-size:.8rem;color:rgba(255,255,255,.8);}
@media (max-width:860px){
  .split{grid-template-columns:1fr;}
}
@media (max-width:820px){
  .rows .row{grid-template-columns:1fr;gap:10px;}
}

/* ---------- CONSOLIDACIÓN · Específico de /academia/ ---------- */
.method{background:var(--black-950);}
.method .head{max-width:64ch;margin-bottom:46px;}
.method .head .lead{margin-top:18px;}
.two-parts{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.part{position:relative;border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(26px,3vw,40px);background:linear-gradient(180deg,var(--black-800),var(--black-950));overflow:hidden;}
.part .hour{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--pink);}
.part h3{font-size:clamp(1.5rem,2.4vw,2rem);margin:10px 0 14px;}
.part p{margin:0;color:var(--white-soft);}
.part .big-num{position:absolute;right:20px;top:8px;font-size:6rem;font-weight:800;color:rgba(255,255,255,.05);line-height:1;}
.philo .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;}
.philo h2{margin-bottom:18px;}
.philo .card{border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(26px,3vw,40px);background:var(--black-900);}
.philo .card .tag{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--pink);margin-bottom:12px;display:block;}
.philo .card p{color:var(--white-soft);margin:0;}
@media (max-width:820px){
  .two-parts{grid-template-columns:1fr;}
  .philo .grid{grid-template-columns:1fr;}
}

/* ---------- CONSOLIDACIÓN · Específico de /como-lo-hemos-conseguido/ ---------- */
.container { max-width: 800px; margin: 0 auto; padding: 40px 24px; }
.subtitle { font-size: 20px; color: #888; margin-bottom: 48px; }
.highlight { color: #ff3366; font-weight: 600; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 40px 0; padding: 32px; background: #1a1a1a; border-radius: 12px; }
.stat { text-align: center; }
.stat-number { font-size: 36px; font-weight: 700; color: #ff3366; }
.stat-label { font-size: 13px; color: #888; margin-top: 4px; }
.cta-section { background: #1a1a1a; border: 1px solid #333; border-radius: 12px; padding: 32px; margin: 48px 0; text-align: center; }
.cta-section h3 { color: #fff; font-size: 24px; margin-bottom: 12px; }
.cta-section p { color: #888; margin-bottom: 24px; }
.cta-button { display: inline-block; background: #ff3366; color: #fff; padding: 16px 32px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 16px; }
.cta-button:hover { background: #ff5588; }
.method-steps { margin: 32px 0; }
.step { display: flex; gap: 20px; margin-bottom: 32px; padding: 24px; background: #0f0f0f; border-radius: 10px; border-left: 3px solid #ff3366; }
.step-number { font-size: 32px; font-weight: 700; color: #ff3366; min-width: 50px; }
.step-content h3 { color: #fff; margin-bottom: 8px; font-size: 18px; }
.step-content p { color: #aaa; margin: 0; }
/* FIX footer-bug: eliminado selector residual .container ~ footer que sobreescribía
   .bacan-global-footer en páginas con contenedor .container (como /como-lo-hemos-conseguido/).
   Ahora todas las páginas muestran exactamente el mismo footer global unificado. */
@media (max-width: 600px){
  /* 04-08-2026: se retira "header > div > a:last-child" de este selector.
     Apuntaba al botón ASÍ LO CONSEGUIMOS y lo ocultaba por debajo de 600px,
     justo lo contrario de lo que declara el bloque de cabecera móvil. */
  header > div > nav { display: none !important; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .step { flex-direction: column; gap: 12px; }
}

/* ---------- CONSOLIDACIÓN · Específico de /contacto/ ---------- */
.contact{background:var(--black-950);}
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,64px);align-items:start;}
.channels{display:flex;flex-direction:column;gap:16px;}
.channel{border:1px solid var(--line);border-radius:var(--radius-md);padding:24px;background:linear-gradient(180deg,var(--black-800),var(--black-950));transition:border-color .2s;}
.channel:hover{border-color:var(--pink);}
.channel .k{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--pink);}
.channel h3{font-size:1.15rem;margin:8px 0 6px;}
.channel p{margin:0;color:var(--white-muted);font-size:.92rem;}
.channel a{color:var(--white);font-weight:600;}
.form-card h2{margin-bottom:8px;}
.form-card .sub{color:var(--white-muted);font-size:.95rem;margin:0 0 24px;}
.field input::placeholder,.field textarea::placeholder{color:var(--white-faint);}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-soft);}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.submit{
  display:inline-flex;
  align-items:center;
  justify-content: center;
  gap:10px;
  background:var(--pink);
  color:#fff;
  font-weight:700;
  font-size: 0.98rem;
  padding:15px 28px;
  min-height: 52px;
  border:none;
  border-radius:var(--pill);
  cursor:pointer;
  font-family:inherit;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
  box-shadow: 0 12px 32px rgba(255,45,120,0.3);
}
.submit:hover{
  background: #050506 !important;
  color: #ffffff !important;
  border: 1px solid var(--pink) !important;
  box-shadow: 0 14px 36px rgba(255,45,120,0.45);
  transform: translateY(-2px);
}
.submit:active {
  transform: scale(0.97);
}
@media (max-width: 768px) {
  .submit {
    width: 100% !important;
  }
}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.82rem;color:var(--white-muted);margin:6px 0 20px;}
.consent input{margin-top:3px;}
.micro{font-size:.78rem;color:var(--white-faint);margin-top:14px;}
@media (max-width:860px){
  .contact-grid{grid-template-columns:minmax(0,1fr);}
  .grid-2{grid-template-columns:1fr;}
  .channel a{overflow-wrap:anywhere;}
}

/* ---------- CONSOLIDACIÓN · Específico de /cookies/ ---------- */
.cookie-table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.cookie-table-scroll:focus-visible{outline:2px solid var(--pink);outline-offset:3px;}
.cookie-table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:.9rem;}
.cookie-table th{background:rgba(255,45,120,.12);color:var(--white);padding:10px 14px;text-align:left;border:1px solid var(--line);}
.cookie-table td{padding:10px 14px;border:1px solid var(--line);color:var(--white-muted);vertical-align:top;}

/* ---------- CONSOLIDACIÓN · Específico de /el-club/ ---------- */
.tl{position:relative;max-width:900px;margin-inline:auto;}
.tl::before{content:"";position:absolute;left:22px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--pink),var(--line));}
.tl-step{position:relative;padding:0 0 clamp(38px,5vw,60px) 66px;}
.tl-step:last-child{padding-bottom:0;}
.tl-num{position:absolute;left:0;top:0;width:46px;height:46px;border-radius:var(--pill);background:var(--black-800);border:2px solid var(--pink);display:grid;place-items:center;font-weight:700;font-size:.95rem;color:#fff;}
.tl-step h3{font-size:clamp(1.3rem,2.4vw,1.8rem);margin-bottom:10px;}
.tl-step p{margin:0;color:var(--white-soft);max-width:60ch;}
.closing{background:linear-gradient(180deg,var(--black-950),var(--black-850));}
.closing blockquote{margin:0 auto;max-width:22ch;text-align:center;font-size:clamp(1.8rem,4vw,3rem);font-weight:800;line-height:1.1;letter-spacing:-.02em;}
.closing .sub{display:block;max-width:60ch;margin:26px auto 0;text-align:center;color:var(--white-muted);font-size:1.02rem;font-weight:400;}

/* ---------- CONSOLIDACIÓN · Específico de /eventos/ ---------- */
.subs{background:var(--black-950);}
.subs .head{margin-bottom:44px;max-width:60ch;}
.subgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.subcard{display:flex;flex-direction:column;justify-content:space-between;min-height:230px;border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(24px,3vw,36px);background:linear-gradient(180deg,var(--black-800),var(--black-950));transition:border-color .2s;}
.subcard:hover{border-color:var(--pink);}
.subcard .k{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--pink);}
.subcard h3{font-size:clamp(1.4rem,2.2vw,1.9rem);margin:12px 0 10px;}
.subcard p{margin:0 0 18px;color:var(--white-muted);font-size:.95rem;}
.subcard .go{font-weight:600;border-bottom:2px solid var(--pink);padding-bottom:2px;align-self:flex-start;}
.philo .row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:start;margin-bottom:clamp(30px,4vw,54px);}
.philo .row:last-child{margin-bottom:0;}
.philo h3{font-size:clamp(1.4rem,2.4vw,2rem);margin-bottom:12px;}
@media (max-width:820px){
  .subgrid{grid-template-columns:1fr;}
  .philo .row{grid-template-columns:1fr;gap:12px;}
}

/* ---------- CONSOLIDACIÓN · Específico de /familias/ ---------- */
.fam-hero{padding-block:clamp(56px,8vw,110px) clamp(30px,4vw,54px);background:radial-gradient(80% 70% at 80% 0,rgba(255,45,120,.16),transparent 55%),linear-gradient(180deg,var(--black-900),var(--black-950));}
.fam-hero .crumb{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--white-faint);margin-bottom:14px;}
.fam-hero .eyebrow{display:inline-block;font-size:.75rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--pink);margin-bottom:14px;}
.fam-hero h1{margin:0;font-size:clamp(2.2rem,5vw,3.8rem);font-weight:800;letter-spacing:-.02em;line-height:1.04;max-width:20ch;}
.fam-hero p{color:var(--white-muted);margin:16px 0 0;max-width:56ch;font-size:1.05rem;}
.faq{background:var(--ivory);color:var(--ink);padding-block:clamp(56px,8vw,120px);}

/* ============================================================
   BANNER DE PATROCINADORES · ANCHO COMPLETO (FULL-BLEED EDGE-TO-EDGE)
   ============================================================ */
.bacan-sponsors-banner {
  width: 100% !important;
  max-width: 100% !important;
  background: #020204 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-top: 1px solid rgba(255,255,255,0.1) !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  display: block !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.bacan-sponsors-banner__inner {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
}

.bacan-sponsors-banner picture {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.bacan-sponsors-banner img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  border: none !important;
  box-shadow: none !important;
}
.faq-title{font-size:clamp(1.9rem,4vw,3rem);font-weight:800;letter-spacing:-.02em;margin:0 0 40px;}
.faq-title em{font-style:italic;color:var(--fucsia);}
.faq-list{border-top:1px solid var(--line-l);}
.faq-item{border-bottom:1px solid var(--line-l);}
.faq-row{
  width:100%;
  display:grid;
  grid-template-columns:auto 1.4fr 1fr auto;
  align-items:center;
  gap:20px;
  padding:22px 4px;
  min-height: 52px;
  background:none;
  border:none;
  cursor:pointer;
  font-family:inherit;
  text-align:left;
  color:var(--ink);
  transition: color 0.2s ease;
}
.faq-num{font-weight:700;font-size:.85rem;color:var(--muted-l);}
.faq-question{font-weight:600;font-size:clamp(1rem,1.6vw,1.18rem);}
.faq-summary{color:var(--muted-l);font-size:.92rem;}
.faq-toggle{font-size:1.4rem;font-weight:400;color:var(--muted-l);transition:transform .25s,color .25s;justify-self:end;}
.faq-item.is-open .faq-num,.faq-item.is-open .faq-question,.faq-item.is-open .faq-toggle{color:var(--fucsia);}
.faq-panel{max-height:0;overflow:hidden;transition:max-height .32s cubic-bezier(.4,0,.2,1);}
.faq-panel-inner{padding:0 4px 24px;max-width:70ch;}
.faq-panel-inner p{margin:0;color:#33282e;line-height:1.65;}
.faq-panel-inner a{color:var(--fucsia);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,45,170,.35);}
@media (max-width:820px){
  .faq-row{grid-template-columns:auto 1fr auto;}
  .faq-summary{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .faq-panel{transition:none;}
}

/* ---------- CONSOLIDACIÓN · Específico de Home (/) ---------- */
.h-xl{font-size:clamp(2.1rem,5vw,3.8rem);}
.btn-pink{background:var(--pink);color:#fff;}
.btn-link{color:var(--white);font-weight:600;border-bottom:2px solid var(--pink);padding-bottom:2px;border-radius:0;}
.hero-bg{position:absolute;inset:0;background:radial-gradient(120% 90% at 70% 10%,rgba(255,45,120,.22),transparent 55%),linear-gradient(180deg,var(--black-900),var(--black-950));z-index:0;}
.hero-copy .h-xxl{margin-bottom:22px;}
.hero-copy .lead{margin-bottom:34px;}
.hero-media img{width:100%;height:100%;object-fit:cover;}
.hero-media .veil{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(2,2,4,.7));}
.play{
  /* A-06: reset de button para mantener el estilo visual intacto */
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(255,255,255,.4);
  padding: 0;
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:84px;height:84px;border-radius:var(--pill);
  background:rgba(255,255,255,.14);backdrop-filter:blur(6px);
  display:grid;place-items:center;
  cursor: pointer;
}
.play::after{content:"";border-left:22px solid #fff;border-top:13px solid transparent;border-bottom:13px solid transparent;margin-left:6px;}
.hero-tag{position:absolute;left:20px;bottom:20px;font-size:.8rem;font-weight:600;color:var(--white-soft);}
/* FIX: .players tenía padding heredado del selector section{} global (eliminado).
   Ahora lo declara explícitamente. */
.players{background:var(--black-950);padding-block:var(--section);}
.carousel {
  display:flex;
  gap:22px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-snap-stop: always;
  padding-bottom:14px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.carousel::-webkit-scrollbar{display:none;}
/* A-09: shadow rosa en la card destacada — explicitó para resistir cualquier override */
.player-card.big{
  flex-basis:clamp(320px,80vw,520px);
  border-color:var(--pink);
  box-shadow:var(--shadow-pink) !important;
}
/* A-05: focus outline visible en btn-pink — en fondo rosa el rosa es invisible */
.btn-pink:focus-visible {
  outline: 2.5px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(255,45,120,0.5);
}
/* RESTORE: .player-card .grad eliminado accidentalmente durante sprint 2 */
.player-card .grad{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(2,2,4,.15) 58%,rgba(2,2,4,.85));}
.player-card.big .grad{background:linear-gradient(180deg,transparent 38%,rgba(255,255,255,.04) 55%,rgba(2,2,4,.88));}
.player-info .num{font-size:.8rem;font-weight:700;opacity:.8;}
.player-info .meta{font-size:.9rem;color:rgba(255,255,255,.85);margin-top:4px;}
.arrows{display:flex;gap:10px;}
/* A-08: flechas ocultas en móvil — el foco se controla por scroll automático */
@media (max-width: 768px) { .arrows { display: none !important; } }
.arrows button{width:48px;height:48px;border-radius:var(--pill);border:1px solid var(--line-strong);background:none;color:#fff;font-size:1.2rem;cursor:pointer;font-family:inherit;}
/* ============================================================
    APPLE 2027 MASTER UNBOXED CANVAS & SPATIAL REFRACTION DESIGN SYSTEM
   ============================================================ */

/* 1. SECCIONES NARRATIVAS EDITORIALES LIBRES (SIN CAJAS EXTERIORES) */
.section,
.feature,
.feature-dark,
.badown,
.page-hero,
.club-section,
.academia-section,
.familias-section,
.metodo-section {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding-block: clamp(40px, 7vw, 92px) !important;
}

/* 2. MEDIAS Y FOTOGRAFÍAS A SANGRE CON BISEL ESPECULAR DE CRISTAL 2027 */
.feature .media,
.badown .media,
.page-hero .media,
.club-media,
.metodo-media,
.split .media {
  position: relative !important;
  border-radius: 32px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.35s ease, box-shadow 0.35s ease !important;
  isolation: isolate !important;
}

.feature .media:hover,
.badown .media:hover,
.split .media:hover {
  transform: translateY(-6px) scale(1.015) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

.feature .media img,
.badown .media img,
.split .media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  mix-blend-mode: normal !important;
  display: block !important;
  transition: transform 0.6s ease !important;
}

.feature .media:hover img,
.badown .media:hover img,
.split .media:hover img {
  transform: scale(1.04) !important;
}

/* 3. DISPOSITIVOS Y SOFTWARE EN CANVAS FLOTANTE (APPS 2027) */
.bacan-apps-home__content,
.app-card,
.product-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
}

.bacan-apps-home__background img,
.app-device-mockup {
  border-radius: 36px !important;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

/* 4. CIFRAS TIPOGRÁFICAS GIGANTES EN TITANIO PLATA */
.stat-number,
.vol-num,
.large-stat {
  font-size: clamp(3rem, 8vw, 5.5rem) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  color: #ffffff !important;
  background: linear-gradient(180deg, #ffffff 30%, rgba(255, 255, 255, 0.5) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ============================================================
    ACADEMIA — UNBOXED CANVAS LIBRE (SIN CAJAS NI PANELES CERRADOS)
   ============================================================ */
.two-parts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(24px, 4vw, 48px);
  margin-top: clamp(32px, 5vw, 56px);
}

.two-parts .part {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0 !important;
  padding: 32px 0 0 0 !important;
  box-shadow: none !important;
}

.two-parts .part .big-num {
  font-size: clamp(3.2rem, 7vw, 5rem) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  background: linear-gradient(180deg, #ffffff 30%, rgba(255, 255, 255, 0.4) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  margin-bottom: 12px !important;
  display: block !important;
}

.two-parts .part .hour {
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.5) !important;
  display: block !important;
  margin-bottom: 6px !important;
}

.philo .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.philo .card {
  background: transparent !important;
  border: none !important;
  border-left: 2px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 0 !important;
  padding: 12px 0 12px 28px !important;
  box-shadow: none !important;
}

.philo .card .tag {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  padding: 5px 14px !important;
  border-radius: 999px !important;
  display: inline-block !important;
  margin-bottom: 16px !important;
}

.cta-band {
  background: transparent !important;
  border: none !important;
  padding-block: clamp(48px, 8vw, 96px) !important;
}

.pink-panel {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0 !important;
  padding: 48px 0 0 0 !important;
  box-shadow: none !important;
  text-align: left !important;
}

.pink-panel h2 {
  font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
  line-height: 1.15 !important;
}

/* 5. MICRO-LÍNEAS DIVISORIAS DE 1PX EN MICRO-OPACIDAD */
.editorial-divider,
.timeline-item,
.protocol-item {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: none !important;
  background: transparent !important;
}

/* ---------- CONSOLIDACIÓN · Específico de /proteccion-de-datos/ ---------- */
.activity-block{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:24px;margin-bottom:24px;}
.activity-block h3{margin:0 0 14px;color:var(--white);font-size:1.05rem;}
.activity-block table{width:100%;border-collapse:collapse;table-layout:fixed;}
.activity-block td{padding:6px 10px;font-size:.9rem;color:var(--white-muted);border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere;}
.activity-block td:first-child{width:38%;color:var(--white-soft);font-weight:600;}

/* ---------- CONSOLIDACIÓN · Específico de /proteccion-del-menor/ ---------- */
.legal-hero .lead{font-size:1.1rem;color:var(--white-muted);max-width:600px;}
.lopivi-banner{background:rgba(255,45,120,.1);border:1px solid rgba(255,45,120,.4);border-radius:16px;padding:28px 32px;margin:clamp(32px,5vw,56px) 0;}
.lopivi-banner h2{margin:0 0 10px;font-size:1.15rem;font-weight:700;color:var(--pink);}
.lopivi-banner p{margin:0;color:var(--white-soft);font-size:.97rem;}
.lopivi-banner strong{color:#fff;}
.corregir{background:rgba(255,45,120,.18);border:1px solid var(--pink);border-radius:4px;padding:1px 6px;font-weight:600;color:var(--pink);}
.contact-card{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:14px;padding:24px 28px;margin-top:32px;}
.contact-card h3{margin:0 0 10px;font-size:1rem;font-weight:700;color:var(--white);}
.contact-card p{margin:4px 0;font-size:.95rem;color:var(--white-muted);}

/* ---------- CONSOLIDACIÓN · Hero de home usa un h-xxl mayor que el resto ---------- */
.hero .h-xxl{font-size:clamp(2.6rem,7vw,5.4rem);}

/* ---------- HOME · Clases semánticas que sustituyen inline styles eliminados ---------- */
/* Separación entre los dos párrafos lead del hero */
/* A-07: Aumentado de 18px a 30px — los dos leads del hero necesitan más aire */
.hero-copy .lead + .lead { margin-top: 30px; }
/* Lead de la sección deportistas: valores reales que antes vivían en el style="" */
.players-lead { margin-top: 14px !important; max-width: 52ch !important; color: var(--white-soft) !important; }
/* CTA primario de las secciones feature (antes style="margin-top:24px") */
.feature-action { margin-top: 24px; }
/* Enlace secundario de las secciones feature (antes style="margin-top:14px") */
.feature-secondary { margin-top: 14px; }

@media (max-width:860px){
  /* A-14: hero-media necesita position relative para los hijos absolutos */
  .hero-media{ position:relative !important; aspect-ratio:16/12; }
}

/* ============================================================
   FIX RESPONSIVO MOBILE — HOME
   Todos los cambios de este bloque son ADITIVOS en breakpoints
   mobile. Las reglas de escritorio no se modifican.
   ============================================================ */

/* FIX 1: Hero — título cortado en mobile */
@media (max-width: 640px) {
  .hero .h-xxl {
    font-size: clamp(1.9rem, 8.5vw, 2.6rem);
    overflow-wrap: break-word;
/* Steve Lemay & Don Norman HIG Rule: NUNCA partir palabras con guión en titulares */
h1, h2, h3, .h-xl, .h-xxl, .display-title, .hero-title, .section-title, .bacan-apps-home__title {
  hyphens: none !important;
  -webkit-hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: break-word;
}
  }
  .hero {
    padding-inline: clamp(20px, 5vw, 40px);
  }
}

/* FIX 3: Carousel deportistas — padding lateral para "peek" de siguiente tarjeta */
@media (max-width: 640px) {
  .carousel {
    padding-inline: clamp(16px, 4vw, 20px);
    scroll-padding-left: clamp(16px, 4vw, 20px);
  }
}

/* ============================================================
   EDICIÓN MÓVIL DIRECTIVA 2026 (ESTÁNDAR APPLE EXECUTIVE)
   ============================================================ */

/* PREVENCIÓN GLOBAL DE DESBORDAMIENTO HORIZONTAL EN MÓVIL */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }
  .wrap, .hero-grid, .split {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-inline: 16px !important;
  }

  /* ── C-01: JERARQUÍA TIPOGRÁFICA RESTAURADA EN MÓVIL ──
     Cada nivel tiene su propio tamaño. Antes todos compartían
     el mismo clamp() y el resultado era un único tamaño caótico. */

  /* H1 / Hero: el más grande */
  .hero .h-xxl, h1.h-xxl, h1, .display-title {
    font-size: clamp(2rem, 8vw, 2.8rem) !important;
    line-height: 1.08 !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
/* Steve Lemay & Don Norman HIG Rule: NUNCA partir palabras en títulos móviles */
    max-width: 100% !important;
  }

  /* H2: títulos de sección */
  h2, .h-xl, .section-title {
    font-size: clamp(1.55rem, 5.5vw, 2.1rem) !important;
    line-height: 1.15 !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    max-width: 100% !important;
  }

  /* H2 variante compacta: features laterales */
  .h-lg {
    font-size: clamp(1.3rem, 4.8vw, 1.72rem) !important;
    line-height: 1.2 !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }

  /* H3: títulos de cards — el más pequeño */
  h3 {
    font-size: clamp(1.05rem, 3.8vw, 1.3rem) !important;
    line-height: 1.28 !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }

  .carousel {
    padding: 20px 14px !important;
    gap: 14px !important;
  }
  .player-card {
    width: calc(100vw - 52px) !important;
    min-height: 420px !important;
    border-radius: 24px !important;
  }
  .player-expand-action-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 10px 16px !important;
    font-size: 0.82rem !important;
  }

  .hero-media {
    min-height: auto !important;
    height: auto !important;
    max-width: 100% !important;
    aspect-ratio: 16/9 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    margin-top: 16px !important;
  }
  .hero-media img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
    aspect-ratio: 16/9 !important;
  }

  /* 2. SECCIÓN CALENDARIO HOME: ELIMINAR CONTENEDOR CAJA EXTERNO EN MÓVIL */
  #dot-calendario .calendar-preview {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    padding: 0 !important;
  }
  #dot-calendario .calendar-top {
    padding: 0 0 24px 0 !important;
    text-align: left !important;
  }

  /* 3. SECCIÓN APLICACIONES HOME: ELIMINAR CARD OSCURA EXTERNA Y ENCUADRAR TEXTO A LA IZQUIERDA */
  .bacan-apps-home__content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    text-align: left !important;
  }
  .bacan-apps-home__title,
  .bacan-apps-home__text {
    text-align: left !important;
    max-width: 100% !important;
  }

  /* 4. PÍLDORAS DE ENCABEZADO: TAMAÑO AJUSTADO Y MÁRGENES SIN COLISIÓN */
  .eyebrow, .bacan-apps-home__eyebrow, span.pill {
    font-size: 0.68rem !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    padding: 5px 13px !important;
    margin-bottom: 16px !important;
    display: inline-block !important;
    max-width: fit-content !important;
  }
  .section, .feature {
    padding-block: clamp(32px, 5vw, 56px) !important;
  }

  /* 5. TARJETAS DE DEPORTISTA CON LAYOUT INFERIOR PERFECTO */
  .carousel .player-card,
  .horizontal-scroll .player-card {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 28px !important;
    min-height: 420px !important;
  }

  .player-info {
    position: absolute !important;
    inset: auto 0 0 0 !important;
    padding: 28px 16px 20px 16px !important;
    background: linear-gradient(0deg, rgba(5,5,7,0.98) 0%, rgba(5,5,7,0.7) 65%, transparent 100%) !important;
    z-index: 10 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  .player-info-bottom {
    position: static !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .player-name {
    margin: 0 !important;
    font-size: 1.22rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.15 !important;
  }

  .player-category-tag {
    background: #ff2d78 !important;
    color: #ffffff !important;
    font-size: 0.65rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 14px rgba(255, 45, 120, 0.6) !important;
  }

  /* 6. ENFOQUE APPLE iOS CARD CAROUSEL (PEEK PATTERN + HIG SPECULAR LIGHT) */
  .carousel,
  .horizontal-scroll {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding-left: 20px !important;
    padding-right: 22vw !important;
    padding-block: 16px 28px !important;
    gap: 14px !important;
    scrollbar-width: none !important;
    margin-inline: -20px;
  }
  .carousel::-webkit-scrollbar,
  .horizontal-scroll::-webkit-scrollbar,
  .calendar-days::-webkit-scrollbar { display: none !important; }

  .carousel .player-card,
  .horizontal-scroll .player-card {
    flex: 0 0 78vw !important;
    min-width: 78vw !important;
    max-width: 320px !important;
    scroll-snap-align: start !important;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease, box-shadow 0.35s ease !important;
    transform: scale(0.96);
    opacity: 0.88;
    border-radius: 26px !important;
  }

  .carousel .player-card.is-focused,
  .horizontal-scroll .player-card.is-focused {
    transform: scale(1.02) !important;
    opacity: 1 !important;
    z-index: 2 !important;
  }

  /* FIX CALENDARIO MÓVIL: Tarjeta a 240px para que la 2ª tarjeta (MIÉRCOLES) asome claramente */
  .calendar-days {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 16px 24px 16px !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 !important;
    scrollbar-width: none !important;
  }

  .calendar-days .day-card {
    flex: 0 0 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
    min-height: 200px !important;
    scroll-snap-align: start !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* ── C-07: PROGRESS RING en div dedicado (.player-ring-el)
     Libera ::after de la card para el degradado de la foto.
     ::before = pista gris / ::after = progreso conic-gradient ── */
  .carousel .player-card,
  .horizontal-scroll .player-card {
    --ring-p: 0%;   /* animado por JS con rAF */
  }

  /* ── 2027 BORDE DE BISEL DE CRISTAL ESPECULAR ZAFIRO (SIN RESPLANDOR ROSA) ── */
  .player-ring-el {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: conic-gradient(
      from -90deg,
      #ff2d78     0%,
      #ff8ab4     calc(var(--ring-p) / 2),
      #ff2d78     var(--ring-p),
      transparent var(--ring-p) 100%
    );
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 2.5px;
  }

  /* ── MODAL EXPANDIDO ── */
  .player-card-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.88);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: opacity 0.32s ease;
  }
  .player-card-overlay.active {
    opacity: 1;
    pointer-events: auto;
  }
  .player-card.is-expanded {
    position: fixed !important;
    inset: 6vh 4vw !important;
    width: auto !important;
    height: 88vh !important;
    max-width: 420px !important;
    margin: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 9999 !important;
    border-radius: 32px !important;
    box-shadow: 0 40px 100px rgba(0,0,0,0.9) !important;
    transition: all 0.42s cubic-bezier(0.34, 1.2, 0.64, 1) !important;
    cursor: zoom-out;
  }
  .player-card.is-expanded .player-ring,
  .player-card.is-expanded .player-ring-el {
    display: none;
  }
  .player-card.is-expanded .player-info {
    padding: 40px 24px 32px 24px !important;
  }
  .player-card.is-expanded .player-name {
    font-size: 1.7rem !important;
  }
  .player-card.is-expanded .player-category-tag {
    font-size: 0.75rem !important;
    padding: 7px 18px !important;
  }

  /* ESTILOS FICHA TÉCNICA EXTENDIDA (APPLE HERO MORPH BIO) */
  .player-expanded-bio {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.15);
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: fadeInBio 0.35s ease forwards;
  }
  @keyframes fadeInBio {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .player-bio-sub {
    margin: 0;
    color: rgba(255,255,255,0.85);
    font-size: 0.88rem;
    line-height: 1.45;
  }
  .player-bio-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .bio-badge {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.18);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
  }
  .player-wa-btn {
    margin-top: 6px;
    width: 100%;
    font-size: 0.78rem !important;
    padding: 10px 14px !important;
  }

  /* FLECHAS MAGNÉTICAS ESCRITORIO */
  .arrows button {
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, border-color 0.2s ease !important;
  }
  .arrows button:hover {
    border-color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.3) !important;
    color: #ffffff !important;
  }
  /* Botón cerrar X en la tarjeta expandida (HIG Target 44x44px) */
  .player-close-btn {
    display: none;
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    color: #fff;
    font-size: 1.25rem;
    line-height: 44px;
    text-align: center;
    cursor: pointer;
    z-index: 10000;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background 0.2s ease, transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
  }
  .player-card.is-expanded .player-close-btn {
    display: block;
  }
  .player-close-btn:hover {
    background: rgba(255,45,120,0.45);
  }
  /* M-14: evitar que el :active global de .player-card comprima el botón × */
  .player-close-btn:active {
    transform: none !important;
    transition: none !important;
  }

  .video-panel, .media, .media img, .media video {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
  }
}

/* RESPUESTA HÁPTICA AL TOQUE EN DISPOSITIVOS MÓVILES */
button, a.btn, .day-card, .player-card, .cal-filter-btn {
  -webkit-tap-highlight-color: transparent;
}
button:active, a.btn:active, .day-card:active, .player-card:active, .cal-filter-btn:active {
  transform: scale(0.96) !important;
  transition: transform 0.08s cubic-bezier(0.1, 1, 0.2, 1) !important;
}

/* ACCELERACIÓN GPU 60 FPS */
.calendar-days, .horizontal-scroll, .carousel, .cal-grid {
  will-change: transform, scroll-position;
  transform: translateZ(0);
}

/* ESTILOS ICONOS SOCIALES DE CRISTAL 120/100 (APPLE HIG) */
.bacan-global-footer__social {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
}

.social-icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 44px !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
  will-change: transform;
}

.social-icon-btn svg {
  display: block !important;
  flex: none !important;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.social-icon-btn:hover {
  transform: translateY(-4px) scale(1.05) !important;
  background: rgba(255, 45, 120, 0.16) !important;
  border-color: #ff2d78 !important;
  color: #ffffff !important;
  box-shadow: 0 10px 28px rgba(255, 45, 120, 0.35) !important;
}

.social-icon-btn:hover svg {
  transform: rotate(12deg) scale(1.15) !important;
}

/* ============================================================
   TENDENCIAS DE ANIMACIÓN 2027 (APPLE VISIONOS / HIG MASTERPIECE)
   1. Instagram: Refracción de Cristal Cáustico
   2. Facebook: Profundidad Espacial 3D (visionOS)
   3. TikTok: Deformación de Contorno Líquido
   4. WhatsApp: Iluminación Ray-Tracing Reactiva
   ============================================================ */

/* 1. INSTAGRAM — Refracción de Cristal Cáustico Irisado */
.social-caustic {
  position: relative;
  overflow: hidden;
}
.social-caustic::before {
  content: '';
  position: absolute;
  top: -50%; left: -120%;
  width: 50%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 45, 120, 0.6), rgba(255, 138, 77, 0.6), transparent);
  transform: rotate(30deg);
  transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.social-caustic:hover::before {
  left: 180%;
}
.social-caustic:hover {
  border-color: rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.3) !important;
}

/* 2. FACEBOOK — Profundidad Espacial 3D (visionOS) */
.social-spatial {
  transform-style: preserve-3d;
  perspective: 600px;
}
.social-spatial:hover {
  transform: perspective(600px) rotateX(10deg) rotateY(-10deg) translateZ(12px) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.35) !important;
}
.social-spatial:hover svg {
  transform: translateZ(18px) scale(1.2) !important;
}

/* 3. TIKTOK — Deformación de Contorno Líquido Elástico */
.social-liquid {
  transition: transform 0.35s cubic-bezier(0.34, 2, 0.64, 1), background 0.2s ease !important;
}
.social-liquid:hover {
  transform: scaleX(1.08) scaleY(0.95) translateY(-3px) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.3) !important;
}

/* 4. WHATSAPP — Iluminación Ray-Tracing Reactiva a la Luz */
.social-raytracing {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.social-raytracing:hover {
  transform: translateY(-4px) scale(1.04) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.3) !important;
}

/* ============================================================
   5 REDES SOCIALES FUTURISTAS INVENTADAS (TENDENCIAS 2028-2030)
   ============================================================ */

/* ============================================================
   ANIMACIÓN AURANET CUÁNTICA CON COLORES DE MARCA OFICIALES
   (INSTAGRAM, FACEBOOK, TIKTOK, WHATSAPP)
   ============================================================ */

.social-quantum {
  position: relative;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.social-quantum svg {
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.social-quantum:hover svg {
  transform: scale(1.3) rotate(360deg) !important;
}

/* REDES SOCIALES EN 1 ÚNICA LÍNEA HORIZONTAL SIN RECORTES */
.bacan-global-footer__social {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  width: 100% !important;
  overflow: visible !important;
  margin-bottom: 24px !important;
}

.bacan-global-footer__social .social-icon-btn {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  justify-content: center !important;
  padding: 8px 10px !important;
  font-size: 0.78rem !important;
  white-space: nowrap !important;
}

/* 1. INSTAGRAM (Estilo Especular Apple) */
.social-quantum-ig:hover {
  transform: translateY(-3px) scale(1.03) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.3) !important;
}

/* 2. FACEBOOK (Estilo Especular Apple) */
.social-quantum-fb:hover {
  transform: translateY(-3px) scale(1.03) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.3) !important;
}

/* 3. TIKTOK (Estilo Especular Apple) */
.social-quantum-tt:hover {
  transform: translateY(-3px) scale(1.03) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.3) !important;
}

/* 4. WHATSAPP (Estilo Especular Apple) */
.social-quantum-wa:hover {
  transform: translateY(-3px) scale(1.03) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.3) !important;
}

/* ============================================================
   ESTILOS CRÉDITO GUMZUX PERFECCIONADO (SIN LÍNEA SUPERIOR)
   ============================================================ */

.bacan-global-footer__gumzux-clean {
  margin-top: 16px !important;
  padding-top: 0 !important;
  border-top: none !important; /* SIN LÍNEA SUPERIOR EN PC NI MÓVIL */
  width: 100% !important;
}

.gumzux-hero-link-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 18px !important;
  text-decoration: none !important;
  color: #ffffff !important;
  width: 100% !important;
}

/* LOGOTIPO GUMZUX ALINEADO Y ELEGANTE */
.gumzux-logo-wrapper {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

.gumzux-svg-logo-v5 {
  width: clamp(140px, 15vw, 170px) !important;
  height: auto !important;
  display: block !important;
  animation: hapticHeartbeatContinuous 3.2s infinite cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
  transition: transform 0.2s ease, filter 0.2s ease !important;
}

.gumzux-svg-logo-v5.is-tapped {
  transform: scale(1.15) rotate(2deg) translateY(-2px) !important;
  filter: drop-shadow(0 4px 16px rgba(255, 255, 255, 0.7)) !important;
}
.gumzux-svg-logo-v5 path {
  fill: #ffffff !important;
}
@keyframes hapticHeartbeatContinuous {
  0% { transform: scale(1) rotate(0deg); }
  15% { transform: scale(1.06) rotate(1deg) translateY(-1px); filter: drop-shadow(0 3px 10px rgba(255,255,255,0.3)); }
  25% { transform: scale(0.98) rotate(-0.5deg); }
  35% { transform: scale(1.03) rotate(0.5deg); filter: drop-shadow(0 2px 6px rgba(255,255,255,0.2)); }
  50% { transform: scale(1) rotate(0deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* JERARQUÍA TIPOGRÁFICA Y ESPACIADOS */
.gumzux-headline {
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
}

/* ENLACE LIMPIO "IR A GUMZUX.COM ↗" */
.gumzux-link-clean {
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #ffffff !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  flex-shrink: 0 !important;
  opacity: 0.92 !important;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.gumzux-hero-link-row:hover .gumzux-link-clean {
  opacity: 1 !important;
  transform: translateX(2px) !important;
}

.gumzux-link-clean svg {
  display: block !important;
}

/* ============================================================
   PERFECCIONADO MÓVIL 12/10 (ESPACIADOS, CABECERA Y TIPOGRAFÍA)
   ============================================================ */

/* CABECERA FIJA (STICKY) CON DESENFOQUE DE CRISTAL AL HACER SCROLL (APPLE 2027) */
.bacan-global-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  background: rgba(5, 5, 7, 0.88) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: background 0.3s ease, box-shadow 0.3s ease !important;
}

/* BOTÓN HEADER CTA SUTIL Y ELEGANTE "ASÍ LO CONSEGUIMOS ↗" (APPLE 2027) */
.bacan-global-header__cta {
  position: relative !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #18181d !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  border-radius: 999px !important;
  padding: 7px 14px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32) !important;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}

/* ANIMACIÓN AMBIENTAL AUTOMÁTICA EN MÓVIL Y DESKTOP (SIN RATÓN) */
.bacan-global-header__cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 70%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  animation: bacanAmbientShimmer 3.6s infinite ease-in-out;
  pointer-events: none;
}

@keyframes bacanAmbientShimmer {
  0% { left: -120%; }
  22% { left: 180%; }
  100% { left: 180%; }
}

.bacan-global-header__cta:hover {
  background: #282830 !important;
  border-color: rgba(255, 255, 255, 0.38) !important;
  transform: translateY(-1px) scale(1.02) !important;
}

@media (max-width: 768px) {
  /* 1. Cabecera móvil ultra-limpia (Logo + ASÍ LO CONSEGUIMOS ↗ + Hamburguesa) */
  .bacan-global-header__inner {
    padding: 10px 14px !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .bacan-global-brand {
    font-size: 0.95rem !important;
    flex-shrink: 0 !important;
  }
  .bacan-live-widget {
    display: none !important; /* Ocultar clima solo de la barra de cabecera móvil para dejar espacio total a ASÍ LO CONSEGUIMOS ↗ */
  }
  .bacan-global-header__cta {
    display: inline-flex !important; /* BOTÓN ESTRELLA ASÍ LO CONSEGUIMOS ↗ 100% VISIBLE Y SIN CORTES CON ANIMACIÓN */
    padding: 6px 12px !important;
    font-size: 0.70rem !important;
    font-weight: 800 !important;
    margin-left: auto !important;
    margin-right: 6px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
  .bacan-global-nav-toggle,
  [data-nav-toggle] {
    display: flex !important; /* BOTÓN HAMBURGUESA 100% VISIBLE */
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
  }

  /* 2. Jerarquía tipográfica calibrada (sin títulos gigantes en 5 líneas) */
  .h-xxl,
  .display-title,
  h1.page-title {
    font-size: clamp(1.7rem, 6.5vw, 2.2rem) !important;
    line-height: 1.16 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 12px !important;
  }

  .section-title,
  h2.h-xl {
    font-size: clamp(1.35rem, 5vw, 1.75rem) !important;
    line-height: 1.22 !important;
    margin-bottom: 14px !important;
  }

  .lead {
    font-size: clamp(0.92rem, 3.8vw, 1.02rem) !important;
    line-height: 1.5 !important;
    color: rgba(255, 255, 255, 0.78) !important;
  }

  /* 3. Espaciado fluido de secciones y Heros */
  .page-hero {
    padding: clamp(40px, 8vw, 60px) 0 clamp(24px, 5vw, 36px) !important;
  }

  .section {
    padding: clamp(36px, 7vw, 56px) 0 !important;
  }

  .app-grid {
    gap: 14px !important;
    margin-top: 20px !important;
  }

  .app-card {
    padding: 20px 18px !important;
    border-radius: 22px !important;
  }

  /* 4. Botones de acción móvil full-width perfectos */
  .form-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 16px !important;
  }

  .form-actions .btn,
  .form-actions .capsule {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 48px !important;
  }
}

/* RESPONSIVE MÓVIL: PÍLDORAS MÁS PEQUEÑAS + 2 LÍNEAS GUMZUX */
@media (max-width: 768px) {
  .bacan-global-footer__social {
    gap: 5px !important;
    margin-bottom: 24px !important;
  }
  .bacan-global-footer__social .social-icon-btn {
    padding: 6px 6px !important;
    font-size: 0.68rem !important;
    border-radius: 999px !important;
  }
  .bacan-global-footer__social .social-icon-btn svg {
    width: 15px !important;
    height: 15px !important;
  }
  .gumzux-hero-link-row {
    flex-wrap: wrap !important;
    row-gap: 10px !important;
  }
  .gumzux-headline {
    white-space: normal !important;
    font-size: 0.78rem !important;
    line-height: 1.3 !important;
  }
  .gumzux-link-clean {
    width: 100% !important;
    margin-left: 0 !important;
    padding-top: 2px !important;
    font-size: 0.78rem !important;
  }
}

/* BOTÓN ESTÁTICO DE VISITA A LA WEB GUMZUX.COM ↗ (SIN ANIMACIÓN) */
.gumzux-cta-btn-static {
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 44px !important;
  padding: 8px 18px !important;
  border-radius: 999px !important;
  background: rgba(255, 45, 120, 0.16) !important;
  border: 1.5px solid #ff2d78 !important;
  color: #ffffff !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* ============================================================
    TARJETA CONGELADA BACAN REGISTER-CARD (100% IDÉNTICA AL EDITOR)
   ============================================================ */
:root {
  --panel: rgba(255, 49, 112, .94);
  --dark-text: #08080a;
  --white-line: rgba(255,255,255,.18);
  --radius-xl: 34px;
  --radius-pill: 999px;
}

.bacan-register-card-container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding-block: clamp(36px, 6vw, 72px) !important;
  width: 100% !important;
}

.register-card {
  position: relative !important;
  width: min(520px, 88vw) !important;
  border-radius: var(--radius-xl, 34px) !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(255,255,255,.34), transparent 24%),
    linear-gradient(145deg, #ff425d 0%, #ff2d78 45%, #ff6cb8 100%) !important;
  box-shadow:
    0 35px 100px rgba(255, 45, 120, .34),
    0 14px 44px rgba(0,0,0,.55) !important;
  color: var(--dark-text, #08080a) !important;
  padding: clamp(24px, 3vw, 34px) !important;
  transform: rotate(-2.2deg) !important;
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

@media (max-width: 768px) {
  .register-card {
    transform: rotate(0deg) !important;
    width: 100% !important;
  }
}

.register-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  pointer-events: none !important;
  mix-blend-mode: overlay !important;
}

.register-card::after {
  content: "" !important;
  position: absolute !important;
  width: 160px !important;
  height: 160px !important;
  right: -56px !important;
  top: -56px !important;
  background: rgba(255,255,255,.13) !important;
  border-radius: 50% !important;
  filter: blur(5px) !important;
  pointer-events: none !important;
}

.card-head {
  display: flex !important;
  justify-content: space-between !important;
  gap: 18px !important;
  align-items: flex-start !important;
  margin-bottom: 26px !important;
}

.card-title {
  font-size: clamp(42px, 5.6vw, 68px) !important;
  line-height: .86 !important;
  letter-spacing: -.075em !important;
  font-weight: 950 !important;
  color: #08080a !important;
  margin: 0 !important;
}

.card-subtitle {
  margin-top: 10px !important;
  color: rgba(0,0,0,.66) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  max-width: 330px !important;
}

.card-tag {
  flex: 0 0 auto !important;
  border: 1px solid rgba(0,0,0,.28) !important;
  border-radius: var(--radius-pill, 999px) !important;
  padding: 9px 12px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
  color: #08080a !important;
}

.register-card .switch {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  padding: 6px !important;
  border: 1px solid rgba(0,0,0,.15) !important;
  border-radius: var(--radius-pill, 999px) !important;
  background: rgba(255,255,255,.10) !important;
  margin-bottom: 22px !important;
}

.register-card .switch button {
  border: 0 !important;
  border-radius: var(--radius-pill, 999px) !important;
  padding: 13px 14px !important;
  background: transparent !important;
  color: rgba(0,0,0,.55) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  cursor: pointer !important;
  transition: background .18s ease, color .18s ease, transform .18s ease !important;
}

.register-card .switch button.is-active {
  background: #050506 !important;
  color: white !important;
  transform: translateY(-1px) !important;
}

.register-card form {
  display: grid !important;
  gap: 12px !important;
}

.register-card .field {
  display: grid !important;
  gap: 7px !important;
  position: relative !important;
}

.register-card label {
  color: rgba(0,0,0,.72) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: .075em !important;
  font-weight: 950 !important;
  padding-left: 2px !important;
}

.register-card input,
.register-card select,
.register-card textarea {
  width: 100% !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  outline: 0 !important;
  border-radius: 14px !important;
  min-height: 48px !important;
  padding: 0 15px !important;
  background: rgba(255,255,255,.15) !important;
  color: #050506 !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

.register-card input::placeholder,
.register-card textarea::placeholder {
  color: rgba(0,0,0,.34) !important;
  font-weight: 650 !important;
}

.register-card textarea {
  padding-top: 14px !important;
  min-height: 92px !important;
  resize: vertical !important;
}

.register-card input:focus,
.register-card select:focus,
.register-card textarea:focus {
  background: rgba(255,255,255,.24) !important;
  border-color: rgba(0,0,0,.34) !important;
  box-shadow: 0 0 0 4px rgba(0,0,0,.08) !important;
}

.register-card .grid-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}

@media (max-width: 540px) {
  .register-card .grid-2 {
    grid-template-columns: 1fr !important;
  }
}

.register-card .consent {
  display: flex !important;
  gap: 10px !important;
  align-items: flex-start !important;
  padding: 12px 2px 4px !important;
  color: rgba(0,0,0,.68) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

.register-card .consent input {
  width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  margin-top: 1px !important;
  accent-color: #050506 !important;
  flex: 0 0 auto !important;
}

.register-card .actions {
  display: grid !important;
  grid-template-columns: 1.2fr .8fr !important;
  gap: 10px !important;
  margin-top: 8px !important;
}

@media (max-width: 480px) {
  .register-card .actions {
    grid-template-columns: 1fr !important;
  }
}

.register-card .btn {
  min-height: 52px !important;
  border-radius: var(--radius-pill, 999px) !important;
  border: 1px solid rgba(0,0,0,.75) !important;
  background: #050506 !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  cursor: pointer !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease !important;
}

.register-card .btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 38px rgba(0,0,0,.28) !important;
}

.register-card .btn.secondary {
  background: transparent !important;
  color: #050506 !important;
}

.register-card .btn.secondary:hover {
  background: rgba(0,0,0,.08) !important;
}

.register-card .micro {
  margin-top: 16px !important;
  color: rgba(0,0,0,.58) !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

/* ============================================================
   5 OPCIONES DE ANIMACIÓN CONTINUA AUTOMÁTICA (APPLE 2027 AUTOPLAY SIN HOVER)
   ============================================================ */
.gumzux-5anims-wrapper {
  margin-top: 32px !important;
  padding-top: 24px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  width: 100% !important;
}

.gumzux-5anims-title {
  font-size: 0.82rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
  color: #ff2d78 !important;
  text-transform: uppercase !important;
  margin-bottom: 20px !important;
}

.gumzux-5anims-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  width: 100% !important;
}

.gumzux-anim-block {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 16px 20px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 16px !important;
  transition: border-color 0.3s ease, background 0.3s ease !important;
}

.gumzux-anim-block:hover {
  border-color: rgba(255, 45, 120, 0.5) !important;
  background: rgba(255, 45, 120, 0.04) !important;
}

.gumzux-anim-num {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  color: rgba(255, 255, 255, 0.6) !important;
  text-transform: uppercase !important;
}

.gumzux-pure-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  text-decoration: none !important;
}

/* OPCIÓN 1: BARRIDO DE DESTELLO TITANIO LÍQUIDO ESPECULAR CONTINUO */
.gumzux-svg-logo-v1 {
  width: clamp(200px, 25vw, 280px) !important;
  height: auto !important;
  display: block !important;
}
.gumzux-svg-logo-v1 path {
  fill: #ffffff !important;
  animation: titaniumSweepContinuous 2.4s infinite alternate ease-in-out !important;
}
@keyframes titaniumSweepContinuous {
  0% { filter: brightness(1) drop-shadow(0 2px 8px rgba(0,0,0,0.5)); transform: translateY(0); }
  50% { filter: brightness(1.8) contrast(1.3) drop-shadow(0 6px 18px rgba(255,45,120,0.6)); transform: translateY(-3px) scale(1.04); }
  100% { filter: brightness(1) drop-shadow(0 2px 8px rgba(0,0,0,0.5)); transform: translateY(0); }
}

/* OPCIÓN 2: FLOTACIÓN E INCLINACIÓN PARALLAX 3D CONTINUA (visionOS) */
.gumzux-svg-logo-v2 {
  width: clamp(200px, 25vw, 280px) !important;
  height: auto !important;
  display: block !important;
  perspective: 600px !important;
  transform-style: preserve-3d !important;
  animation: spatialFloat3DContinuous 4s infinite alternate ease-in-out !important;
}
.gumzux-svg-logo-v2 path {
  fill: #ffffff !important;
}
@keyframes spatialFloat3DContinuous {
  0% { transform: perspective(600px) rotateY(-10deg) rotateX(6deg) translateY(0); filter: drop-shadow(4px 8px 12px rgba(0,0,0,0.7)); }
  100% { transform: perspective(600px) rotateY(10deg) rotateX(-6deg) translateY(-6px); filter: drop-shadow(-4px 14px 20px rgba(255,45,120,0.5)); }
}

/* OPCIÓN 3: TRAZO LÁSER NEÓN FUCSIA CONTINUO EN ARISTAS VECTORIALES */
.gumzux-svg-logo-v3 {
  width: clamp(200px, 25vw, 280px) !important;
  height: auto !important;
  display: block !important;
  animation: logoPulseScale 2s infinite alternate ease-in-out !important;
}
.gumzux-svg-logo-v3 path {
  fill: #ffffff !important;
  stroke: #ff2d78 !important;
  stroke-width: 2.5px !important;
  animation: laserBorderPulseContinuous 1.6s ease-in-out infinite alternate !important;
}
@keyframes laserBorderPulseContinuous {
  0% { stroke: #ff2d78; filter: drop-shadow(0 0 4px #ff2d78); }
  100% { stroke: #00f2fe; filter: drop-shadow(0 0 10px #00f2fe); }
}
@keyframes logoPulseScale {
  0% { transform: scale(1); }
  100% { transform: scale(1.05); }
}

/* OPCIÓN 4: REFRACCIÓN PRISMÁTICA CÁUSTICA CONTINUA */
.gumzux-svg-logo-v4 {
  width: clamp(200px, 25vw, 280px) !important;
  height: auto !important;
  display: block !important;
  animation: prismaticRefractContinuous 2.2s infinite ease-in-out !important;
}
.gumzux-svg-logo-v4 path {
  fill: #ffffff !important;
}
@keyframes prismaticRefractContinuous {
  0% { filter: drop-shadow(3px 0px 0px #ff2d78) drop-shadow(-3px 0px 0px #00f2fe); transform: scale(1); }
  50% { filter: drop-shadow(-3px 0px 0px #ff2d78) drop-shadow(3px 0px 0px #00f2fe); transform: scale(1.05) translateY(-2px); }
  100% { filter: drop-shadow(3px 0px 0px #ff2d78) drop-shadow(-3px 0px 0px #00f2fe); transform: scale(1); }
}

/* OPCIÓN 5: PULSO HÁPTICO INERCIAL CONTINUO (RITMO CARDÍACO APPLE) */
.gumzux-svg-logo-v5 {
  width: clamp(200px, 25vw, 280px) !important;
  height: auto !important;
  display: block !important;
  animation: hapticHeartbeatContinuous 3s infinite cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}
.gumzux-svg-logo-v5 path {
  fill: #ffffff !important;
}
@keyframes hapticHeartbeatContinuous {
  0% { transform: scale(1) rotate(0deg); }
  15% { transform: scale(1.1) rotate(1.5deg) translateY(-3px); filter: drop-shadow(0 6px 16px rgba(255,45,120,0.6)); }
  25% { transform: scale(0.98) rotate(-1deg); }
  35% { transform: scale(1.06) rotate(1deg); filter: drop-shadow(0 4px 12px rgba(255,45,120,0.4)); }
  50% { transform: scale(1) rotate(0deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@media (max-width: 768px) {
  .gumzux-pure-link {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .gumzux-cta-btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ============================================================
    MÉSTATIC TITANIUM MONOCHROME · MÉTODO BACAN (SOBRIEDAD APPLE PRO)
   ============================================================ */

/* 1. GRADIENTE MONOCROMÁTICO EN TITANIO BLANCO/PLATA PARA H1 ACCENT */
.accent-metallic {
  background: linear-gradient(180deg, #FFFFFF 0%, #A1A1AA 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block !important;
  font-weight: 950 !important;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5)) !important;
}

/* 2. PÍLDORA BADGE EN CRISTAL TITANIO NEUTRO (SIN LEDS NI NEONES) */
.eyebrow-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(14px) !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.9) !important;
  margin-bottom: 16px !important;
}

/* 3. MANIFIESTO DEL MÉSTATIC (MONOCROMÁTICO Y SERIO) */
.manifesto-box {
  position: relative !important;
  margin: 32px 0 48px !important;
  padding: 32px 36px !important;
  background: rgba(18, 18, 22, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-left: 3px solid rgba(255, 255, 255, 0.40) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45) !important;
}

.manifesto-quote {
  font-size: clamp(1.15rem, 2.8vw, 1.55rem) !important;
  line-height: 1.45 !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  font-style: italic !important;
  margin: 0 0 12px 0 !important;
}

.manifesto-author {
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  color: rgba(255, 255, 255, 0.55) !important;
  text-transform: uppercase !important;
}

/* 4. MÓDULO COMPARATIVO ANTES VS. DESPUÉS (SIN COLORES DE SEMÁFORO) */
.comparison-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
  margin: 32px 0 !important;
}

@media (max-width: 768px) {
  .comparison-grid {
    grid-template-columns: 1fr !important;
  }
}

.comparison-card {
  padding: 24px !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.comparison-card.before {
  border-color: rgba(255, 255, 255, 0.07) !important;
}

.comparison-card.after {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}

.comparison-tag {
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
  display: inline-block !important;
}

.before .comparison-tag { color: rgba(255, 255, 255, 0.45) !important; }
.after .comparison-tag { color: #ffffff !important; }

/* 5. DIAGRAMA INTERACTIVO DE LOS 4 PILARES */
.pilares-flow {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  margin: 28px 0 40px !important;
}

@media (max-width: 900px) {
  .pilares-flow {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .pilares-flow {
    grid-template-columns: 1fr !important;
  }
}

.pilar-flow-step {
  padding: 16px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  text-align: center !important;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease !important;
}

.pilar-flow-step:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.pilar-num {
  font-size: 1.4rem !important;
  font-weight: 950 !important;
  color: rgba(255, 255, 255, 0.45) !important;
  display: block !important;
  margin-bottom: 4px !important;
}

.pilar-name {
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
}

/* 6. MÉTRICAS ANIMADAS (MONOCROMÁTICAS) */
.stat-ticker-number {
  font-size: clamp(2.4rem, 5vw, 3.6rem) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  color: #ffffff !important;
  letter-spacing: -0.04em !important;
  display: block !important;
  margin-bottom: 6px !important;
}

/* 7. TARJETA CONGELADA (ELEGANCIA DE MARCA BACAN) */
.register-card.metodo-edition {
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.6) !important;
}

.btn-whatsapp-svg {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

.btn-whatsapp-svg svg {
  width: 20px !important;
  height: 20px !important;
  fill: currentColor !important;
}

/* 8. MODAL DE POLÍTICA / CONSENTIMIENTO */
.modal-consent-link {
  color: #050506 !important;
  text-decoration: underline !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}



/* ============================================================
   FONDOS NIVEL 2 — GLOW AMBIENTAL TITANIO (aprobado 04-08-2026)
   Resplandor radial blanco/gris + grano sutil. NUNCA magenta:
   el rosa queda reservado a elementos interactivos (Skill 2).
   Se aplica solo a secciones narrativas de la Home mediante la
   clase .glow-bg; las secciones densas en datos quedan planas.
   ============================================================ */
.glow-bg { position: relative; }

.glow-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 760px 520px at 12% 10%, rgba(255,255,255,0.07), transparent 60%),
    radial-gradient(ellipse 640px 520px at 88% 78%, rgba(255,255,255,0.05), transparent 60%),
    radial-gradient(ellipse 900px 620px at 50% 105%, rgba(180,180,190,0.045), transparent 65%);
}

.glow-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.glow-bg > .wrap { position: relative; z-index: 2; }

/* ============================================================
   TARJETA CTA — NIVEL 2 (aprobado 04-08-2026)
   Nombre y teléfono a la vista; el resto tras "+ Más detalles".
   Un solo botón fuerte; "Copiar solicitud" pasa a enlace sutil.
   Mensajes en línea (sustituyen a alert()).
   ============================================================ */
.register-card .card-details {
  display: none !important;
}

.register-card .card-details.is-open {
  display: grid !important;
  gap: 12px !important;
}

.register-card .card-toggle-details {
  justify-self: start !important;
  background: none !important;
  border: 0 !important;
  padding: 2px !important;
  color: rgba(0,0,0,.68) !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  cursor: pointer !important;
  letter-spacing: .02em !important;
}

.register-card .card-toggle-details:hover {
  color: #050506 !important;
}

.register-card .actions {
  grid-template-columns: 1fr !important;
}

.register-card .card-copy-link {
  background: none !important;
  border: 0 !important;
  padding: 6px !important;
  justify-self: center !important;
  color: rgba(0,0,0,.6) !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  cursor: pointer !important;
}

.register-card .card-copy-link:hover {
  color: #050506 !important;
}

.register-card .card-form-msg {
  margin: 10px 0 0 !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.28) !important;
  border: 1px solid rgba(0,0,0,.14) !important;
  color: #08080a !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .25s ease, transform .25s ease;
}

.register-card .card-form-msg.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.register-card .card-form-msg.is-error {
  background: rgba(5,5,6,.85) !important;
  border-color: rgba(5,5,6,.9) !important;
  color: #ffffff !important;
}


/* ============================================================================
   BLOQUE 4 (04-08-2026) · Cabecera, retícula y etiquetas de estado
   Se añade al FINAL a propósito: gana por orden de cascada a los bloques
   duplicados que hay más arriba, sin borrarlos ni romper nada existente.
   ============================================================================ */

/* --- UI-01 · CABECERA ESCRITORIO ---------------------------------------
   Logo a la izquierda · navegación centrada en el eje real · CTA a la derecha.
   Las dos columnas laterales son 1fr iguales, así la central cae en el centro
   geométrico del contenedor (centrado óptico real, no aparente).
   Encerrado en min-width:1181px: el menú móvil no se toca. */
@media (min-width: 1181px) {
  .bacan-global-header__inner {
    grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
    justify-content: initial;
    column-gap: clamp(16px, 2vw, 32px);
  }
  .bacan-global-brand       { grid-column: 1; justify-self: start; }
  .bacan-global-nav         { grid-column: 2; justify-self: center; }
  .bacan-global-header__cta { grid-column: 3; justify-self: end; }
  .bacan-global-nav-toggle  { display: none; }

  /* overflow:hidden recortaba el menú en silencio si no cabía */
  .bacan-global-nav { overflow: visible; gap: 2px; }

  /* El tamaño anterior bajaba a 9,9px: ilegible. Área táctil mínima 38px. */
  .bacan-global-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    border-radius: 999px;
    padding: 9px 12px;
    font-size: clamp(.76rem, .82vw, .88rem);
    letter-spacing: -.005em;
  }
}

/* --- UI-02 · CABECERA MÓVIL --------------------------------------------
   El contenedor es grid con 2 columnas, pero a ≤768px vuelven a estar en
   flujo TRES hijos (marca, CTA y hamburguesa): el CTA se caía a una segunda
   fila. Tres columnas explícitas y una sola fila. */
@media (max-width: 768px) {
  .bacan-global-header__inner {
    grid-template-columns: auto 1fr auto !important;
    grid-auto-flow: column !important;
    column-gap: 8px !important;
    align-items: center !important;
  }
  .bacan-global-brand       { grid-column: 1; justify-self: start; }
  .bacan-global-header__cta { grid-column: 2; justify-self: end; }
  .bacan-global-nav-toggle,
  [data-nav-toggle]         { grid-column: 3; justify-self: end; }
}

/* --- UI-03 · ETIQUETA DE ESTADO "PRÓXIMAMENTE" -------------------------
   Antes iba con estilos en línea que la dejaban en negro sobre negro
   (contraste 1:1) en la tarjeta dorada. Una etiqueta de estado es un
   elemento funcional: se lee siempre, sobre cualquier variante de tarjeta. */
.day-card span.day-tag.day-tag--pendiente,
.day-card.is-pink span.day-tag.day-tag--pendiente,
.day-card.is-cyan span.day-tag.day-tag--pendiente,
.day-card.is-gold span.day-tag.day-tag--pendiente,
.day-card.is-purple span.day-tag.day-tag--pendiente {
  background: rgba(5,5,7,.88) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.32) !important;
}
.day-card .day-time--pendiente { color: rgba(255,255,255,.94) !important; font-weight: 900; }
.day-card.is-gold .day-time--pendiente { color: #050507 !important; }

/* El CTA de cabecera se ve en TODOS los anchos: es la acción principal del sitio. */
.bacan-global-header__inner > a.bacan-global-header__cta { display: inline-flex !important; }

/* --- UI-04 · RETÍCULA ÚNICA --------------------------------------------
   .hero y .section aportaban padding-inline y además contenían un .wrap que
   lo volvía a aportar: la columna del hero quedaba 64px más estrecha que las
   secciones .feature, y los titulares no alineaban entre sí en la misma
   página. Ahora el gutter horizontal lo pone solo .wrap.
   No se toca .section-inner, que sí depende del padding de .section. */
.section > .wrap,
.hero    > .wrap { padding-inline: 0; }

@media (max-width: 768px) {
  .hero { padding-inline: 0 !important; }
}


/* ============================================================================
   BLOQUE 5 (04-08-2026) · Doctrina visual · Titanio monocromático
   Acento rosa SOLO en lo funcional. Cero superficies de color saturado.
   Al final del archivo a propósito: gana por cascada sin borrar nada.
   ============================================================================ */

/* --- UI-05 · TARJETAS DE DEPORTISTA -----------------------------------
   Antes: cinco tratamientos distintos asignados por posición en el DOM
   (:nth-child), tres de ellos con cian, zafiro y morado, con animación
   infinita de escala y rotación. Reordenar el JSON de deportistas le
   cambiaba el color a un jugador.
   Ahora: un solo tratamiento. El énfasis lo da el ESTADO, no la posición. */
.player-card,
.player-card:nth-child(1),
.player-card:nth-child(2),
.player-card:nth-child(3),
.player-card:nth-child(4),
.player-card:nth-child(5) {
  border: 1px solid rgba(255,255,255,.15) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,.70) !important;
  animation: none !important;
  transform: none !important;
  perspective: none !important;
  transform-style: flat !important;
}
.player-card.is-active-center,
.player-card.is-focused {
  border-color: rgba(255,255,255,.42) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.85) !important;
}

/* --- UI-06 · TARJETAS DE AGENDA ---------------------------------------
   Antes: dorado y morado rellenando la superficie entera, con el dorado
   invirtiendo el modo (texto negro sobre claro) dentro de una página oscura.
   Ahora: una sola superficie de cristal de titanio. El tipo de actividad se
   codifica en un filete de 3px y en la etiqueta, nunca en el fondo. */
.day-card.is-pink,
.day-card.is-cyan,
.day-card.is-gold,
.day-card.is-purple {
  background: rgba(255,255,255,.045) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-left: 3px solid rgba(255,255,255,.28) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.55) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

/* Único acento cromático permitido: el entrenamiento, que es lo funcional. */
.day-card.is-pink { border-left-color: var(--pink, #ff2d78) !important; }
.day-card.is-pink span.day-tag {
  background: var(--pink, #ff2d78) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
.day-card.is-cyan span.day-tag,
.day-card.is-gold span.day-tag,
.day-card.is-purple span.day-tag {
  background: rgba(255,255,255,.12) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.24) !important;
}
.day-card.is-pink span.day-time,
.day-card.is-cyan span.day-time,
.day-card.is-gold span.day-time,
.day-card.is-purple span.day-time,
.day-card.is-pink p,
.day-card.is-cyan p,
.day-card.is-gold p,
.day-card.is-purple p,
.day-card.is-gold strong {
  color: rgba(255,255,255,.86) !important;
}
.day-card .day-time--pendiente,
.day-card.is-gold .day-time--pendiente { color: rgba(255,255,255,.94) !important; }

/* --- UI-07 · PREFERS-REDUCED-MOTION ------------------------------------
   El reset global usa el selector universal (especificidad 0,0,0) mientras
   que las animaciones que molestan usan clases CON !important: en empate de
   !important gana la especificidad mayor, así que el logo del pie seguía
   latiendo cada 3,2s en las 27 páginas con "reducir movimiento" activado.
   Este bloque las anula una por una. Debe quedar al final del archivo. */
@media (prefers-reduced-motion: reduce) {
  .player-card,
  .player-card:nth-child(1),
  .player-card:nth-child(2),
  .player-card:nth-child(3),
  .player-card:nth-child(4),
  .player-card:nth-child(5),
  .gumzux-svg-logo-v1,
  .gumzux-svg-logo-v1 path,
  .gumzux-svg-logo-v2,
  .gumzux-svg-logo-v3,
  .gumzux-svg-logo-v3 path,
  .gumzux-svg-logo-v4,
  .gumzux-svg-logo-v5,
  .bacan-global-header__cta::before,
  .bacan-global-header__cta::after,
  .sponsor-track,
  .sponsor-track.reverse {
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }
}

/* --- UI-08 · FOCO DE TECLADO VISIBLE -----------------------------------
   El anillo global es rosa; sobre el degradado rosa de la tarjeta CTA daba
   un contraste de 1,1:1. Y outline:0 !important lo eliminaba del todo en los
   campos del formulario. Anillo negro con halo blanco: se ve sobre cualquier
   fondo. :focus-visible no dispara con ratón, así que nada cambia al clicar. */
.register-card a:focus-visible,
.register-card button:focus-visible,
.register-card input:focus-visible,
.register-card select:focus-visible,
.register-card textarea:focus-visible,
.register-card .switch button:focus-visible {
  outline: 3px solid #050506 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 6px rgba(255,255,255,.55) !important;
}

/* --- UI-10 · PIE DE PÁGINA ---------------------------------------------
   Sustituye a los 15 style="text-align:left!important" que había en el
   marcado de partials/footer.php y que solo repetían lo que ya decía el CSS. */
.bacan-global-footer,
.bacan-global-footer * { text-align: left; }
.bacan-global-footer__brand { align-items: flex-start; }
.bacan-global-footer__brand-top { justify-content: flex-start; }


/* ============================================================================
   BLOQUE 7 (04-08-2026) · Tarjeta CTA: área táctil y plan B de WhatsApp
   ============================================================================ */

/* La casilla de consentimiento bloquea la conversión y medía 18x18px.
   HIG pide 44x44 como mínimo en pantalla táctil. */
.register-card label.consent {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  min-height: 44px !important;
  padding: 8px 0 !important;
  cursor: pointer !important;
}
.register-card label.consent input[type="checkbox"] {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  margin: 10px 0 0 0 !important;
  accent-color: #050506 !important;
  cursor: pointer !important;
}

/* Enlace de respaldo cuando el navegador bloquea la ventana de WhatsApp
   (habitual en los navegadores internos de Instagram y Facebook). */
.register-card .card-form-msg__link {
  display: inline-block;
  margin-top: 4px;
  color: #050506;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.register-card .card-form-msg__link:focus-visible {
  outline: 3px solid #050506;
  outline-offset: 2px;
}

/* ============================================================
   MÉTODO BACAN · página rehecha (encargo 08-08-2026)
   Una foto delante, tres movimientos, una tarjeta, el archivo.
   El pilar LOPIVI sale del método: tiene su propia página.
   ============================================================ */
.met-hero{position:relative;background:#050507}
.met-hero-foto img{display:block;width:100%;height:min(64vh,620px);object-fit:cover;object-position:center 38%}
.met-hero-texto{max-width:880px;margin:0 auto;padding:clamp(28px,5vw,56px) 24px 8px;text-align:left}
.met-kicker{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:700;margin-bottom:14px}
.met-h1{font-size:clamp(30px,5.4vw,54px);line-height:1.06;letter-spacing:-.02em;font-weight:900;color:#fff;max-width:19ch}
.met-lead{margin-top:18px;font-size:clamp(16px,2.2vw,19px);line-height:1.6;color:rgba(255,255,255,.72);max-width:58ch}

.met-movimientos{max-width:1080px;margin:0 auto;padding:clamp(30px,6vw,70px) 24px 0;display:flex;flex-direction:column;gap:clamp(44px,7vw,86px)}
.met-mov{display:grid;gap:clamp(20px,4vw,48px);align-items:center}
@media(min-width:820px){
  .met-mov{grid-template-columns:5fr 6fr}
  .met-mov-invertido .met-mov-foto{order:2}
}
.met-mov-foto{margin:0;border-radius:22px;overflow:hidden}
.met-mov-foto img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.met-num{font-size:13px;font-weight:800;letter-spacing:.18em;color:rgba(255,255,255,.4)}
.met-mov-texto h2{font-size:clamp(24px,3.6vw,36px);line-height:1.1;letter-spacing:-.015em;font-weight:800;color:#fff;margin:10px 0 16px}
.met-mov-texto p{font-size:16px;line-height:1.65;color:rgba(255,255,255,.72);max-width:56ch}
.met-dato{margin-top:14px;font-weight:700;color:#fff!important}

.met-doc{padding:clamp(48px,8vw,100px) 24px}
.met-doc-tarjeta{max-width:1080px;margin:0 auto;background:#0d0d11;border:1px solid rgba(255,255,255,.09);
  border-radius:28px;overflow:hidden;display:grid}
@media(min-width:820px){ .met-doc-tarjeta{grid-template-columns:5fr 6fr} }
.met-doc-portada{background:linear-gradient(160deg,#17171d,#0a0a0d);display:flex;align-items:center;justify-content:center;
  padding:clamp(34px,5vw,60px);min-height:300px}
.met-doc-libro{width:min(230px,68%);aspect-ratio:3/4.05;background:#0b0b0e;border:1px solid rgba(255,255,255,.14);
  border-radius:6px 14px 14px 6px;box-shadow:22px 30px 60px rgba(0,0,0,.55), inset 6px 0 14px rgba(255,255,255,.05);
  transform:rotate(-4deg);display:flex;flex-direction:column;justify-content:space-between;
  padding:22px 20px;position:relative}
.met-doc-libro::before{content:"";position:absolute;left:9px;top:0;bottom:0;width:1px;background:rgba(255,255,255,.16)}
.met-doc-marca{font-size:11px;font-weight:800;letter-spacing:.2em;color:#fff;border:1px solid rgba(255,255,255,.4);
  padding:4px 8px;border-radius:4px;align-self:flex-start}
.met-doc-t1{font-size:clamp(22px,2.6vw,30px);font-weight:900;line-height:1.05;color:#fff;letter-spacing:-.01em}
.met-doc-t2{font-size:13px;color:rgba(255,255,255,.6);margin-top:6px}
.met-doc-anio{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.met-doc-texto{padding:clamp(28px,4.5vw,54px)}
.met-doc-texto h2{font-size:clamp(24px,3.4vw,34px);font-weight:800;letter-spacing:-.015em;color:#fff;margin-bottom:12px}
.met-doc-texto>p{font-size:16px;line-height:1.6;color:rgba(255,255,255,.72);max-width:50ch}
.met-doc-campos{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.met-doc-campos input[type=email]{flex:1 1 200px;min-width:0;background:#151519;border:1px solid rgba(255,255,255,.16);
  color:#fff;border-radius:40px;padding:14px 18px;font-size:16px;font-family:inherit}
.met-doc-campos input[type=email]::placeholder{color:rgba(255,255,255,.35)}
.met-doc-campos button{flex:0 0 auto;min-height:48px;background:#fff;color:#0a0a0d;border:0;border-radius:40px;
  padding:12px 24px;font-size:15px;font-weight:700;font-family:inherit;cursor:pointer}
.met-doc-campos button:hover{opacity:.88}
.met-trampa{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.met-doc-consent{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:13px;line-height:1.5;
  color:rgba(255,255,255,.62);cursor:pointer;max-width:52ch}
.met-doc-consent input{margin-top:2px;width:18px;height:18px;flex:0 0 auto;accent-color:#fff}
.met-doc-legal{margin-top:14px;font-size:12px;line-height:1.55;color:rgba(255,255,255,.45);max-width:52ch}
.met-doc-legal a{color:rgba(255,255,255,.65);text-decoration:underline;text-underline-offset:3px}
.met-doc-ok{margin-top:22px;padding:16px 18px;border-radius:14px;background:rgba(52,199,89,.12);
  border:1px solid rgba(52,199,89,.4);color:#d9f7e2;font-size:15px}

.met-archivo{max-width:880px;margin:0 auto;padding:0 24px clamp(56px,8vw,96px)}
.met-archivo p{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.5);border-top:1px solid rgba(255,255,255,.1);padding-top:22px}
.met-archivo a{color:rgba(255,255,255,.8);text-decoration:underline;text-underline-offset:3px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Tarjeta puerta (08-08-2026) ─────────────────────────────
   Variante de la tarjeta congelada: misma piel, cero campos.
   Un botón grande hacia /inscripcion/. */
.register-card.puerta{display:flex;flex-direction:column;gap:22px}
.btn-card-puerta{
  display:flex;align-items:center;justify-content:center;
  min-height:58px;padding:16px 28px;border-radius:999px;
  background:#0b0b0f;color:#fff;font-weight:800;font-size:18px;
  letter-spacing:.01em;text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.55);
}
.btn-card-puerta:hover{transform:translateY(-2px)}
.btn-card-puerta:active{transform:translateY(0)}
.card-puerta-nota{font-size:13px;line-height:1.5;color:rgba(10,10,15,.7);text-align:center;margin:0}
.card-puerta-nota a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px}
/* La puerta lleva un titular corto en una o dos líneas naturales:
   sin partir palabras y sin competir con la etiqueta. */
.register-card.puerta .card-head{align-items:flex-start;gap:14px}
/* La base de .card-title lleva !important, así que aquí también:
   sin partir palabras y con un cuerpo que quepa junto a la etiqueta. */
.register-card.puerta .card-title{
  overflow-wrap:normal !important;word-break:normal !important;hyphens:none !important;
  font-size:clamp(30px,7.5vw,46px) !important;line-height:1.02 !important;
  letter-spacing:-.04em !important;
}

/* ============================================================
   PARA CLUBES (08-08-2026)
   Tarjetas-objeto: fondo de color plano y el documento en
   perspectiva, como la referencia aprobada. El color vive en la
   escena; los controles son de tinta.
   ============================================================ */
.pc-ancho{max-width:1080px;margin:0 auto;padding:0 24px}
.pc-kicker{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:700;margin-bottom:14px}
.pc-hero{padding:clamp(48px,8vw,92px) 0 clamp(10px,2vw,18px);background:#050507}
.pc-h1{font-size:clamp(30px,5.4vw,54px);line-height:1.06;letter-spacing:-.02em;font-weight:900;color:#fff;max-width:18ch}
.pc-lead{margin-top:18px;font-size:clamp(16px,2.2vw,19px);line-height:1.6;color:rgba(255,255,255,.72);max-width:58ch}

.pc-fila{padding:clamp(20px,3.5vw,36px) 0}
.pc-fila-cab{margin-bottom:22px}
.pc-fila-cab h2{font-size:clamp(22px,3.2vw,32px);font-weight:800;letter-spacing:-.015em;color:#fff}
.pc-fila-cab p{margin-top:6px;font-size:15px;color:rgba(255,255,255,.6)}
.pc-rejilla{display:grid;gap:20px}
@media(min-width:860px){ .pc-rejilla{grid-template-columns:repeat(3,1fr)} }

.pc-obj{
  display:flex;flex-direction:column;background:#0d0d11;
  border:1px solid rgba(255,255,255,.09);border-radius:24px;overflow:hidden;
  text-decoration:none;color:#fff;
  transition:transform .3s cubic-bezier(.33,1,.68,1), box-shadow .3s;
}
.pc-obj:hover{transform:translateY(-4px);box-shadow:0 24px 54px -26px rgba(0,0,0,.8)}
.pc-obj-ancho{flex-direction:column}
@media(min-width:820px){
  .pc-obj-ancho{flex-direction:row}
  .pc-obj-ancho .pc-escena{flex:0 0 44%;aspect-ratio:auto;min-height:320px}
}
/* La escena: fondo plano, el documento inclinado con sus hojas */
.pc-escena{
  position:relative;aspect-ratio:16/11;background:var(--pc,#222);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.pc-libro{
  width:min(178px,58%);aspect-ratio:3/4.05;background:#0b0b0e;
  border:1px solid rgba(255,255,255,.16);border-radius:5px 12px 12px 5px;
  transform:rotate(-5deg);position:relative;
  box-shadow:18px 26px 44px rgba(0,0,0,.45), inset 5px 0 12px rgba(255,255,255,.05);
  display:flex;flex-direction:column;justify-content:space-between;padding:16px 14px;
}
.pc-libro::before{content:"";position:absolute;left:7px;top:0;bottom:0;width:1px;background:rgba(255,255,255,.16)}
.pc-libro::after{ /* las hojas asomando */
  content:"";position:absolute;right:-5px;top:6px;bottom:4px;width:5px;
  background:linear-gradient(90deg,#e8e8e8,#cfcfcf);border-radius:0 3px 3px 0;
}
.pc-l-marca{font-size:9px;font-weight:800;letter-spacing:.18em;color:#fff;
  border:1px solid rgba(255,255,255,.4);padding:3px 6px;border-radius:3px;align-self:flex-start}
.pc-l-t{font-size:15px;font-weight:800;line-height:1.12;color:#fff;letter-spacing:-.01em}
.pc-l-s{font-size:10px;color:rgba(255,255,255,.6);margin-top:4px}
.pc-l-a{font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.42)}

.pc-cuerpo{display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px;flex:1}
.pc-serie{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.pc-t{font-size:18px;font-weight:700;line-height:1.25;letter-spacing:-.01em}
.pc-d{font-size:14px;line-height:1.55;color:rgba(255,255,255,.62)}
.pc-btn{
  margin-top:auto;padding-top:12px;font-size:14.5px;font-weight:700;color:#fff;
}
.pc-obj:hover .pc-btn{text-decoration:underline;text-underline-offset:4px}

.pc-biblio{
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  background:#0d0d11;border:1px solid rgba(255,255,255,.09);border-radius:24px;
  padding:clamp(22px,3.5vw,34px);text-decoration:none;color:#fff;
  transition:transform .3s, box-shadow .3s;
}
.pc-biblio:hover{transform:translateY(-3px);box-shadow:0 22px 50px -26px rgba(0,0,0,.8)}
.pc-biblio .pc-t{display:block;margin-top:6px}
.pc-biblio .pc-d{display:block;margin-top:6px;max-width:56ch}
.pc-biblio .pc-btn{padding-top:0;white-space:nowrap}

.pc-final p{
  border-top:1px solid rgba(255,255,255,.1);padding-top:24px;
  font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.55);max-width:70ch;
}
.pc-final a{color:rgba(255,255,255,.85);text-decoration:underline;text-underline-offset:3px}

/* Sección de ganchos en la Home: reutiliza las tarjetas-objeto */
.pc-home{background:#050507;padding:clamp(48px,7vw,88px) 0}
.pc-home .pc-fila-cab h2{max-width:22ch}
.pc-home-mas{margin-top:26px}
.pc-home-mas a{
  display:inline-flex;align-items:center;min-height:48px;padding:13px 26px;border-radius:999px;
  background:#fff;color:#0a0a0d;font-weight:800;font-size:15px;text-decoration:none;
  transition:opacity .2s;
}
.pc-home-mas a:hover{opacity:.86}

/* ============================================================
   Tarjeta CÓPIANOS · variante GUMZUX Clubs (celeste) del
   componente register-card. Añadido 2026-08-23.
   ============================================================ */
.register-card.clubs{
  background:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,.42), transparent 28%),
    linear-gradient(145deg,#5cf0e4 0%,#28e8da 46%,#21f2ad 100%) !important;
  box-shadow:0 35px 100px rgba(33,242,173,.30),0 14px 44px rgba(0,0,0,.55) !important;
}
.split .bacan-register-card-container{padding-block:0 !important}
.register-card.clubs .card-tag{background:#0b0b0f !important;color:#fff !important;border:1px solid #0b0b0f !important}
.register-card.clubs .card-head{margin-bottom:0 !important}
.card-topline{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.card-topline .card-tag{flex:0 0 auto;margin-top:6px}
.register-card .card-regalo{margin:0 !important;flex:1 1 auto;text-align:left !important;color:#fff !important;font-family:Georgia,"Times New Roman",serif !important;font-style:italic !important;font-weight:700 !important;font-size:clamp(28px,4.4vw,52px) !important;line-height:.9 !important;letter-spacing:-.015em !important;text-shadow:0 3px 10px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.4) !important}