/* ============================================================
   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);
  --white-muted: rgba(255,255,255,.64);
  --white-faint: rgba(255,255,255,.38);
  --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);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--black-950);
  color: var(--white);
  font-family: var(--font-main);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body {
  margin: 0;
  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;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,0));
  z-index: -1;
}

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; }

.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: 650;
  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,.30); background: rgba(255,255,255,.09); }

.btn-primary { background: var(--pink); border-color: var(--pink); color: var(--white); box-shadow: 0 18px 46px rgba(255,45,120,.28); }
.btn-primary:hover { background: #ff4c91; border-color: #ff4c91; box-shadow: 0 22px 70px rgba(255,45,120,.36); }
.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;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  padding: 0 15px;
  color: var(--white-muted);
  background: rgba(255,255,255,.04);
  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;
  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: 650; }

.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);
}
@keyframes sponsorRun { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.players-head {
  display: grid;
  gap: 20px;
  margin-bottom: 34px;
}
.players-head .lead { max-width: 720px; margin: 0; }

.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; }

.player-card {
  scroll-snap-align: start;
  position: relative;
  min-height: 470px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #111;
  border: 1px solid var(--line);
}
.player-card img { width: 100%; height: 100%; min-height: 470px; object-fit: cover; object-position: center top; }
.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: var(--radius-lg);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.035);
  overflow: hidden;
  box-shadow: var(--shadow-deep);
}
.calendar-top { padding: clamp(24px, 4vw, 44px); display: grid; gap: 18px; }
.calendar-days { display: grid; grid-template-columns: repeat(7, minmax(128px, 1fr)); gap: 12px; overflow-x: auto; padding: 0 clamp(18px, 4vw, 44px) clamp(24px, 4vw, 44px); scroll-snap-type: x mandatory; }
.day-card { scroll-snap-align: start; min-height: 180px; border-radius: 24px; padding: 16px; background: rgba(255,255,255,.055); border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; }
.day-card strong { font-size: 34px; letter-spacing: 0.02em; }
.day-card span { color: var(--white-faint); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.day-card p { margin: 0; color: var(--white-muted); font-size: 13px; line-height: 1.35; }
.day-card.is-pink { background: linear-gradient(145deg, #ff445c, #ff2d78); color: #050506; }
.day-card.is-pink span, .day-card.is-pink p { color: rgba(0,0,0,.68); }
.day-card.is-dark { background: #050506; border-color: rgba(255,255,255,.28); }

.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; }

.footer {
  position: relative;
  padding: clamp(48px, 7vw, 86px) var(--gutter) 28px;
  border-top: 1px solid var(--line);
  background: #020204;
}
.footer-inner { max-width: var(--max); margin: 0 auto; }
.footer-main { display: grid; gap: 34px; }
.footer-brand { display: grid; gap: 18px; }
.footer-face { width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.05); display: grid; place-items: center; }
.footer-face img { width: 70%; }
.footer-logo { width: 136px; height: 52px; display: grid; place-items: center; background: var(--pink); color: var(--white); font-size: 28px; font-weight: 900; letter-spacing: 0.02em; }
.footer-brand p { max-width: 420px; color: var(--white-muted); line-height: 1.55; }
.footer-cols { display: grid; gap: 26px; }
.footer-col h3 { margin: 0 0 14px; color: var(--white); font-size: 12px; letter-spacing: .13em; text-transform: uppercase; }
.footer-col a, .footer-col p { display: block; color: var(--white-muted); font-size: 13px; line-height: 1.45; padding: 5px 0; }
.footer-col a:hover { color: var(--white); }
.footer-safe { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 32px; }
.footer-safe a { min-height: 76px; border-radius: 22px; border: 1px solid var(--line); background: rgba(255,255,255,.04); display: flex; align-items: center; padding: 16px; font-weight: 800; }
.footer-legal-note { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 10px; color: var(--white-faint); font-size: 12px; line-height: 1.5; }
.footer-bottom { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; color: var(--white-faint); font-size: 12px; }

.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;
  font-size: 15px;
  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"] { --dot: #4dd0ff; }
.cal-event[data-type="torneo"] { --dot: #ff2d78; }
.cal-event[data-type="evento"] { --dot: #ffd36a; }
.cal-event[data-type="viaje"] { --dot: #9d38ff; }
.cal-event[data-type="badbro"] { --dot: #ff8a4d; }
.cal-event[data-type="badown"] { --dot: #6effa1; }
.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"] { --dot: #4dd0ff; }
.cal-list-item[data-type="torneo"] { --dot: #ff2d78; }
.cal-list-item[data-type="evento"] { --dot: #ffd36a; }
.cal-list-item[data-type="viaje"] { --dot: #9d38ff; }
.cal-list-item[data-type="badbro"] { --dot: #ff8a4d; }
.cal-list-item[data-type="badown"] { --dot: #6effa1; }
.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(--pink); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.cal-list-item strong { font-size: 17px; letter-spacing: 0.02em; }
.cal-list-item p { margin: 0; color: var(--white-muted); font-size: 13px; line-height: 1.45; }

/* ---------- 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.
   ============================================================ */

:root{
  --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);
}

/* ---------- 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,.player-info,.week-cell,.cal-cell,.cal-list-item,.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)); }
.footer-face{ width:44px; height:44px; }
.footer-face img{ width:100%; height:auto; }

/* ============================================================
   7. FOOTER EDITORIAL — estructura y alineación reales
   ============================================================ */
.footer{ background:#060609; border-top:1px solid var(--hair); padding:clamp(3rem,6vw,5.5rem) var(--gutter) 2rem; }
.footer-inner{ max-width:var(--wrap); margin:0 auto; }
.footer-main{ display:grid; gap:clamp(2.4rem,5vw,4rem); align-items:start; }
@media (min-width:900px){ .footer-main{ grid-template-columns:320px 1fr; } }
.footer-brand{ display:grid; gap:14px; align-content:start; }
.footer-brand-top{ display:flex; align-items:center; gap:14px; }
.footer-logo{ width:auto; height:auto; padding:8px 16px; background:var(--pink); color:#fff; display:inline-grid; place-items:center; border-radius:10px; font-weight:800; font-size:1.35rem; letter-spacing:0; }
.footer-brand h3{ margin:0; font-size:var(--text-h3); letter-spacing:0; }
.footer-inst{ display:grid; gap:5px; }
.footer-inst p{ margin:0; font-size:.82rem; line-height:1.7; color:var(--tech-soft); }
.footer-inst .strong{ color:#fff; font-weight:600; }
.footer-inst a{ color:var(--tech); text-decoration:none; }
.footer-inst a:hover{ color:var(--pink); }
.footer-cols{ display:grid; gap:clamp(1.6rem,4vw,2.4rem); grid-template-columns:repeat(2,1fr); }
@media (min-width:680px){ .footer-cols{ grid-template-columns:repeat(4,1fr); } }
.footer-col{ display:grid; gap:2px; align-content:start; }
.footer-col h4{ margin:0 0 10px; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:#fff; }
.footer-col a,.footer-col p{ color:var(--tech-soft); font-size:.82rem; line-height:1.5; padding:4px 0; font-weight:500; text-decoration:none; }
.footer-col a:hover{ color:#fff; }
.footer-lopivi{ margin-top:clamp(2.4rem,5vw,3.4rem); padding-top:clamp(1.6rem,3vw,2.2rem); border-top:1px solid var(--hair); display:grid; gap:8px; }
.footer-lopivi p{ margin:0; font-size:.8rem; line-height:1.7; color:var(--tech-soft); max-width:760px; }
.footer-lopivi .strong{ color:#fff; }
.footer-safe{ margin-top:clamp(1.6rem,3vw,2.2rem); display:flex; flex-wrap:wrap; gap:10px 22px; }
.footer-safe a{ font-size:.78rem; font-weight:600; letter-spacing:.01em; color:var(--tech); text-decoration:none; border-bottom:1px solid transparent; padding:0; min-height:0; background:none; }
.footer-safe a:hover{ color:#fff; border-bottom-color:var(--pink); }
.footer-gumzux{ margin-top:clamp(1.8rem,3vw,2.4rem); padding-top:1.4rem; border-top:1px solid var(--hair); display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.footer-gumzux img{ height:20px; width:auto; opacity:.9; }
.footer-gumzux a{ display:inline-flex; }
.footer-bottom{ margin-top:1.4rem; display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; }
.footer-bottom span{ font-size:.78rem; color:var(--tech-soft); }
.footer-bottom a{ color:var(--pink); text-decoration:none; font-weight:700; }
.footer-bottom a:hover{ text-decoration:underline; }

/* ============================================================
   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; } }