/* GENERADO por scripts/gen-site-css.mjs desde app/web/site/src/ — NO editar a mano. */

/* ═══ 10-core.css ═══ */
/* ══════════════════════════════════════════════════════════════════════════
   Hoja ÚNICA de las páginas públicas de BookrGo que no son Flutter ni fichas
   de centro: pro.bookrgo.app, bookrgo.app (directorio, blog, legal) y
   communities.bookrgo.app. Skill: web-design-language.
   La comparten las páginas estáticas (layout.js, chrome 'pro') y las SSR de Go
   (/plans), así que TODO va con prefijo px- y nada toca selectores genéricos
   (.nav, .container, h1…) fuera de body.px: /plans trae su propio CSS.
   Identidad: tinta casi negra, papel cálido y un acento lima de pelota de
   pádel. Titulares en Bricolage Grotesque (ya autohospedada en /fonts/).
   La versión de la URL es el hash del contenido (SITE_CSS_VERSION en
   pro-site/chrome.js) y el parcial de Go se regenera con gen-pro-chrome.mjs.
   ══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/fonts/bricolage-grotesque.woff2') format('woff2');
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --px-ink: #0d1612;
  --px-ink-2: #1b2722;
  --px-paper: #fbfaf6;
  --px-surface: #ffffff;
  --px-sand: #f1eee5;
  --px-line: #e3dfd3;
  --px-text: #17211c;
  --px-muted: #5b6660;
  /* El ACENTO es lo único que cambia de un sitio a otro (body[data-site]):
     pro = lima de pelota de pádel; jugadores = menta de la app; comunidades =
     arcilla. Nunca se escribe un color de acento a pelo: siempre estos tres. */
  --px-accent: #c8f04a;      /* sobre oscuro: botón primario, kicker, cifras */
  --px-accent-deep: #a6d22a; /* el mismo, un punto más oscuro: viñetas y subrayados sobre claro */
  --px-on-accent: #0d1612;   /* texto encima del acento */
  --px-hl: #1f6b4f;          /* el acento LEGIBLE sobre papel (AA): enlaces, resaltes */
  --px-white: #ffffff;       /* texto sobre oscuro de máximo contraste */
  --px-on-dark: #eef3ea;
  --px-on-dark-muted: #a9b5ae;
  --px-col: 1200px;
  --px-text-col: 720px;
  --px-gutter: 20px;
  --px-radius: 18px;
  --px-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --px-body: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --px-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
}

/* Los otros dos sitios: mismo sistema, otro acento. */
[data-site="players"] {
  --px-accent: #5eead4;
  --px-accent-deep: #14b8a6;
  --px-on-accent: #04201b;
  --px-hl: #006a60;
}
[data-site="communities"] {
  --px-accent: #f4a37a;
  --px-accent-deep: #e0784a;
  --px-on-accent: #2a1208;
  --px-hl: #a4472a;
}

/* ── Base, solo en las páginas propias del sitio ─────────────────────────── */
body.px {
  margin: 0;
  background: var(--px-paper);
  color: var(--px-text);
  font-family: var(--px-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* Reset con especificidad CERO (:where): si no, `body.px p` ganaría a
   `.px-hero__sub` y se comería todos los márgenes de los componentes. */
:where(body.px) *, :where(body.px) *::before, :where(body.px) *::after { box-sizing: border-box; }
:where(body.px) :where(h1, h2, h3, p, ul, ol, figure) { margin: 0; padding: 0; }
:where(body.px) a { color: inherit; }
:where(body.px) img { max-width: 100%; display: block; }
.px-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.px-wrap { max-width: var(--px-col); margin: 0 auto; padding: 0 var(--px-gutter); }
.px-section { padding: 96px 0; }
.px-section--tight { padding: 64px 0; }
.px-section--sand { background: var(--px-sand); }
.px-section--ink { background: var(--px-ink); color: var(--px-on-dark); }

.px-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--px-hl);
}
.px-kicker::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--px-accent-deep); }
.px-section--ink .px-kicker, .px-hero .px-kicker, .px-band .px-kicker { color: var(--px-accent); }
.px-section--ink .px-kicker::before, .px-hero .px-kicker::before, .px-band .px-kicker::before { background: var(--px-accent); }

.px-h1, .px-h2, .px-h3 { font-family: var(--px-display); font-weight: 800; letter-spacing: -.025em; line-height: 1.05; }
.px-h1 { font-size: clamp(40px, 6vw, 76px); }
.px-h2 { font-size: clamp(30px, 4vw, 48px); }
.px-h3 { font-size: 22px; letter-spacing: -.015em; line-height: 1.2; font-weight: 700; }
.px-hl { color: var(--px-hl); }
.px-section--ink .px-hl, .px-hero .px-hl { color: var(--px-accent); }
.px-lead { font-size: 20px; line-height: 1.55; color: var(--px-muted); max-width: var(--px-text-col); }
.px-section--ink .px-lead { color: var(--px-on-dark-muted); }
.px-head-block { max-width: 780px; margin-bottom: 48px; }
.px-head-block .px-h2 { margin: 14px 0 16px; }
.px-head-block--center { margin-left: auto; margin-right: auto; text-align: center; }
.px-head-block--center .px-lead { margin: 0 auto; }

/* ── Páginas SSR de Go (/plans) con el chrome pro ───────────────────────────
   Allí el cuerpo es el de layout.html: no se resetea nada fuera de la cabecera
   y el pie. La cabecera conserva la columna del sitio (1200) aunque /plans
   componga más estrecho: que el menú no cambie de sitio al pasar de una página
   a otra pesa más que alinear su borde con el de una tabla. */
body.px-ssr { background: var(--px-paper); }
/* Y su contenido se viste con la identidad del sitio sin tocar su plantilla:
   /plans se escribe sobre los tokens de la ficha (bookrgo.css), así que basta
   con darles los valores de aquí. Solo en esta página: la clase px-ssr no la
   lleva nada más, y dentro de la app (embed) no se pone. */
body.px-ssr, body.px-ssr .v-tpl-bookrgo {
  --brand-accent: var(--px-ink);
  --brand-on-accent: #fff;
  --brand-accent-on-light: var(--px-hl);
  --v-acc-tint: #eef5d9;
  --v-acc-deep: var(--px-ink);
  --border-subtle: var(--px-line);
  --v-hair: var(--px-line);
  --surface-paper: #fff;
  --v-paper: var(--px-paper);
  --content-primary: var(--px-text);
  --content-secondary: var(--px-muted);
  --v-display: var(--px-display);
}
body.px-ssr .v-tpl-bookrgo :where(h1, h2) { font-family: var(--px-display); font-weight: 800; letter-spacing: -.025em; }
:where(.px-head, .px-foot) *, :where(.px-head, .px-foot) *::before, :where(.px-head, .px-foot) *::after { box-sizing: border-box; }
:where(.px-head, .px-foot) :where(p, ul) { margin: 0; padding: 0; }
:where(.px-head, .px-foot) a { color: inherit; }
:where(.px-head, .px-foot) img { display: block; }

/* ── Botones ─────────────────────────────────────────────────────────────── */
.px-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: 999px;
  font: 700 15px/1 var(--px-body); text-decoration: none; white-space: nowrap;
  border: 1.5px solid transparent; transition: transform .15s, background .15s, border-color .15s;
}
.px-btn:hover { transform: translateY(-1px); text-decoration: none; }
.px-btn--primary { background: var(--px-accent); color: var(--px-on-accent) !important; }
.px-btn--primary:hover { background: color-mix(in srgb, var(--px-accent) 82%, #fff); }
.px-btn--ghost { border-color: var(--px-line); color: var(--px-text) !important; background: transparent; }
.px-btn--ghost:hover { border-color: var(--px-text); }
.px-btn--light { border-color: rgba(255,255,255,.35); color: #fff !important; }
.px-btn--light:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.px-btn--lg { min-height: 54px; padding: 0 28px; font-size: 16px; }
.px-cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.px-link-arrow { font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--px-accent-deep); }
.px-link-arrow:hover { border-bottom-color: var(--px-text); }

/* ── Cabecera ────────────────────────────────────────────────────────────── */
.px-head {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251,250,246,.92);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--px-line);
  font-family: var(--px-body);
}
.px-bar {
  max-width: var(--px-col); margin: 0 auto; padding: 0 var(--px-gutter);
  height: 68px; display: flex; align-items: center; gap: 28px;
}
.px-logo {
  display: inline-flex; align-items: center; gap: 9px; flex: none;
  font: 800 20px/1 var(--px-display); letter-spacing: -.02em; color: var(--px-ink) !important; text-decoration: none !important;
}
.px-logo img { width: 28px; height: 28px; border-radius: 7px; }
.px-logo__pro {
  font: 800 11px/1 var(--px-body); letter-spacing: .08em; text-transform: uppercase;
  background: var(--px-ink); color: var(--px-accent); padding: 4px 6px; border-radius: 5px; margin-left: 2px;
}
.px-logo--inv { color: #fff !important; }
.px-logo--inv .px-logo__pro { background: var(--px-accent); color: var(--px-ink); }
.px-panel { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.px-nav { display: flex; align-items: center; gap: 2px; }
.px-item { position: relative; }
.px-top {
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px;
  border: 0; background: none; border-radius: 10px; cursor: pointer;
  font: 600 15px/1 var(--px-body); color: var(--px-text) !important; text-decoration: none !important;
}
.px-top:hover, .px-item--open > .px-top, .px-item:focus-within > .px-top { background: var(--px-sand); }
.px-top--on { color: var(--px-hl) !important; }
.px-caret { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .6; }
.px-menu {
  position: absolute; top: calc(100% + 10px); left: -12px; min-width: 520px;
  background: var(--px-surface); border: 1px solid var(--px-line); border-radius: 16px;
  box-shadow: 0 24px 60px -20px rgba(13,22,18,.28); padding: 18px;
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .15s, transform .15s, visibility .15s;
}
.px-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.px-menu--wide { min-width: 860px; }
.px-menu--narrow { min-width: 300px; }
@media (hover: hover) { .px-item:hover > .px-menu { opacity: 1; visibility: visible; transform: none; } }
.px-item:focus-within > .px-menu, .px-item--open > .px-menu { opacity: 1; visibility: visible; transform: none; }
.px-menu__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.px-menu__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.px-menu__h { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--px-muted); padding: 6px 12px 8px; }
.px-mi { display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none !important; }
.px-mi:hover { background: var(--px-sand); }
.px-mi__t { display: block; font-weight: 700; font-size: 15px; color: var(--px-text); }
.px-mi__l { display: block; font-size: 13px; color: var(--px-muted); line-height: 1.35; margin-top: 2px; }
.px-mi--aside { margin-top: 8px; border-top: 1px solid var(--px-line); border-radius: 0 0 10px 10px; padding-top: 14px; }
.px-menu__all { display: inline-block; margin: 12px 12px 2px; font-weight: 700; font-size: 14px; color: var(--px-hl) !important; text-decoration: none !important; }
.px-actions { display: flex; align-items: center; gap: 10px; }
.px-login { font-weight: 600; font-size: 15px; text-decoration: none !important; padding: 0 6px; color: var(--px-text) !important; }
.px-lang { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--px-line); border-radius: 999px; }
.px-lang__item { font: 700 12px/1 var(--px-body); padding: 6px 8px; border-radius: 999px; text-decoration: none !important; color: var(--px-muted) !important; }
.px-lang__item--on { background: var(--px-ink); color: #fff !important; }
.px-burger-in, .px-burger { display: none; }

@media (max-width: 1280px) { .px-login { display: none; } }
@media (max-width: 1080px) {
  .px-bar { gap: 12px; }
  .px-burger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; cursor: pointer; border-radius: 10px; }
  .px-burger__i, .px-burger__i::before, .px-burger__i::after { display: block; width: 20px; height: 2px; background: var(--px-ink); border-radius: 2px; position: relative; }
  .px-burger__i::before, .px-burger__i::after { content: ''; position: absolute; left: 0; }
  .px-burger__i::before { top: -6px; } .px-burger__i::after { top: 6px; }
  .px-panel {
    display: none; position: absolute; top: 68px; left: 0; right: 0; max-height: calc(100vh - 68px); overflow-y: auto;
    background: var(--px-paper); border-bottom: 1px solid var(--px-line); flex-direction: column; align-items: stretch; padding: 12px var(--px-gutter) 24px;
  }
  .px-burger-in:checked ~ .px-panel { display: flex; }
  .px-nav { flex-direction: column; align-items: stretch; }
  .px-top { width: 100%; justify-content: space-between; height: 48px; font-size: 17px; }
  .px-menu, .px-menu--wide, .px-menu--narrow { position: static; min-width: 0; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 8px; display: none; background: transparent; }
  .px-item--open > .px-menu, .px-item:focus-within > .px-menu { display: block; }
  .px-menu__cols, .px-menu__grid { grid-template-columns: 1fr; }
  .px-actions { flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--px-line); margin-top: 8px; }
  .px-actions .px-btn { flex: 1 1 auto; }
}

/* ── Hero con vídeo ──────────────────────────────────────────────────────── */
.px-hero { position: relative; color: #fff; background: var(--px-ink); overflow: hidden; isolation: isolate; }
.px-hero__media { position: absolute; inset: 0; z-index: -2; }
/* Apilados: la imagen queda con visibility:hidden al arrancar el vídeo, pero sigue
   ocupando sitio; sin position:absolute el vídeo caía debajo, fuera del hero. */
.px-hero__media img, .px-hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.px-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(13,22,18,.94) 0%, rgba(13,22,18,.78) 42%, rgba(13,22,18,.25) 100%),
    linear-gradient(0deg, rgba(13,22,18,.7) 0%, rgba(13,22,18,0) 40%);
}
.px-hero__in { max-width: var(--px-col); margin: 0 auto; padding: 120px var(--px-gutter) 72px; }
.px-hero__text { max-width: 760px; }
.px-hero .px-h1 { margin: 18px 0 22px; }
.px-hero__sub { font-size: 20px; line-height: 1.55; color: #d7e0da; max-width: 640px; margin-bottom: 32px; }
.px-hero__sub strong { color: #fff; }
.px-hero__note { margin-top: 16px; font-size: 14px; color: var(--px-on-dark-muted); }
.px-proof {
  margin-top: 64px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.16);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
}
.px-proof__n { font: 800 clamp(26px, 3vw, 38px)/1 var(--px-display); letter-spacing: -.02em; color: #fff; }
.px-proof__l { margin-top: 8px; font-size: 14px; line-height: 1.4; color: var(--px-on-dark-muted); }
.px-hero--page .px-hero__in { padding: 96px var(--px-gutter) 64px; }
.px-hero--page .px-h1 { font-size: clamp(36px, 5vw, 60px); }

/* ── Segmentos con foto ─────────────────────────────────────────────────── */
.px-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.px-tile {
  position: relative; display: flex; align-items: flex-end; min-height: 300px; border-radius: var(--px-radius);
  overflow: hidden; color: #fff; text-decoration: none !important; isolation: isolate; background: var(--px-ink);
}
.px-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .5s; }
.px-tile::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(13,22,18,.88) 0%, rgba(13,22,18,.15) 60%); }
.px-tile:hover img { transform: scale(1.04); }
.px-tile__b { padding: 22px; }
.px-tile__t, .px-tile__l, .px-tile__go { display: block; }
.px-tile__go { display: inline-block; }
.px-tile__t { font: 800 24px/1.1 var(--px-display); letter-spacing: -.02em; }
.px-tile__l { margin-top: 6px; font-size: 15px; color: #dfe7e2; }
.px-tile__go { margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--px-accent); }

/* ── El giro (banda oscura) ──────────────────────────────────────────────── */
.px-turn { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.px-turn__q { font: 800 clamp(30px, 4vw, 52px)/1.08 var(--px-display); letter-spacing: -.025em; }
.px-turn__list { display: grid; gap: 14px; }
.px-turn__row { display: grid; grid-template-columns: 54px 1fr; gap: 16px; padding: 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; }
.px-turn__n { font: 800 20px/1 var(--px-mono); color: var(--px-accent); }
.px-turn__row p { color: var(--px-on-dark-muted); font-size: 16px; }
.px-turn__row strong { color: #fff; display: block; margin-bottom: 2px; }

/* ── Pilares del producto (texto + foto alternos) ───────────────────────── */
.px-pillar { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 48px 0; }
.px-pillar + .px-pillar { border-top: 1px solid var(--px-line); }
.px-pillar:nth-child(even) .px-pillar__media { order: -1; }
.px-pillar__media { border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--px-sand); }
.px-pillar__media img { width: 100%; height: 100%; object-fit: cover; }
.px-pillar__n { font: 700 14px/1 var(--px-mono); color: var(--px-muted); }
.px-pillar .px-h2 { font-size: clamp(28px, 3.4vw, 42px); margin: 10px 0 14px; }
.px-pillar__pitch { font-size: 18px; color: var(--px-muted); margin-bottom: 22px; }
.px-feat-list { list-style: none; display: grid; gap: 4px; }
.px-feat-list a { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 12px; background: var(--px-surface); border: 1px solid var(--px-line); text-decoration: none; }
.px-feat-list a:hover { border-color: var(--px-text); }
.px-feat-list strong { display: block; font-size: 16px; }
.px-feat-list span { display: block; font-size: 14px; color: var(--px-muted); }
.px-feat-list i { font-style: normal; font-weight: 800; color: var(--px-hl); }

/* ── Capturas de la app en marco de móvil ───────────────────────────────── */
.px-phones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 1040px; margin: 0 auto; }
.px-phone { margin: 0; }
.px-phone__frame { position: relative; border-radius: 36px; padding: 10px; background: var(--px-ink); box-shadow: 0 30px 60px -30px rgba(13,22,18,.45); }
.px-phone__frame img { width: 100%; height: auto; border-radius: 27px; }
.px-demo { position: absolute; top: 22px; right: 22px; z-index: 1; font: 800 11px/1 var(--px-body); letter-spacing: .08em; text-transform: uppercase; background: var(--px-accent); color: var(--px-ink); padding: 5px 8px; border-radius: 6px; }
.px-phone figcaption { margin-top: 20px; color: var(--px-muted); font-size: 16px; text-align: center; }
.px-phone figcaption strong { display: block; color: var(--px-text); font: 700 19px/1.3 var(--px-display); margin-bottom: 4px; }

/* ── Tarjetas genéricas ──────────────────────────────────────────────────── */
.px-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.px-cards--4 { grid-template-columns: repeat(4, 1fr); }
.px-cards--2 { grid-template-columns: repeat(2, 1fr); }
.px-card { background: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-radius); padding: 26px; }
.px-section--ink .px-card { background: var(--px-ink-2); border-color: rgba(255,255,255,.1); }
.px-card .px-h3 { display: block; margin-bottom: 8px; }
.px-card p { color: var(--px-muted); font-size: 16px; }
.px-section--ink .px-card p { color: var(--px-on-dark-muted); }
.px-card__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--px-accent); color: var(--px-ink); display: grid; place-items: center; font: 800 18px/1 var(--px-mono); margin-bottom: 18px; }
a.px-card { display: block; text-decoration: none; transition: border-color .15s, transform .15s; }
a.px-card:hover { border-color: var(--px-text); transform: translateY(-2px); }
.px-card__go { display: inline-block; margin-top: 14px; font-weight: 700; font-size: 14px; color: var(--px-hl); }

/* ── Precios (escalera) ──────────────────────────────────────────────────── */
.px-ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.px-step { background: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-radius); padding: 24px; display: flex; flex-direction: column; }
.px-step--hi { background: var(--px-ink); color: #fff; border-color: var(--px-ink); }
.px-step__name { font: 800 20px/1 var(--px-display); }
.px-step__price { margin-top: 18px; font: 800 44px/1 var(--px-display); letter-spacing: -.03em; }
.px-step__price small { font: 600 15px/1 var(--px-body); color: var(--px-muted); letter-spacing: 0; }
.px-step--hi .px-step__price small { color: var(--px-on-dark-muted); }
.px-step__year { margin-top: 6px; font-size: 14px; color: var(--px-muted); min-height: 1.4em; }
.px-step--hi .px-step__year { color: var(--px-on-dark-muted); }
.px-step__fee { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--px-line); font-weight: 700; }
.px-step--hi .px-step__fee { border-color: rgba(255,255,255,.15); color: var(--px-accent); }
.px-step__fee span { display: block; font-weight: 500; font-size: 14px; color: var(--px-muted); }
.px-step--hi .px-step__fee span { color: var(--px-on-dark-muted); }
.px-ladder-note { margin-top: 22px; color: var(--px-muted); font-size: 15px; max-width: var(--px-text-col); }

/* ── Pasos ───────────────────────────────────────────────────────────────── */
.px-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: pxstep; }
.px-steps li { list-style: none; counter-increment: pxstep; background: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-radius); padding: 26px; }
.px-steps li::before { content: '0' counter(pxstep); display: block; font: 800 15px/1 var(--px-mono); color: var(--px-hl); margin-bottom: 18px; }
.px-steps strong { display: block; font: 700 20px/1.2 var(--px-display); margin-bottom: 8px; }
.px-steps p { color: var(--px-muted); font-size: 16px; }

/* ── Banda de foto con texto ─────────────────────────────────────────────── */
.px-band { position: relative; isolation: isolate; color: #fff; overflow: hidden; background: var(--px-ink); }
.px-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.px-band::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(13,22,18,.92) 0%, rgba(13,22,18,.6) 60%, rgba(13,22,18,.35) 100%); }
.px-band .px-wrap { padding-top: 104px; padding-bottom: 104px; }
.px-band .px-lead { color: #d7e0da; }
.px-band .px-h2 { margin: 14px 0 16px; max-width: 760px; }

/* ── Recursos ────────────────────────────────────────────────────────────── */
.px-post { display: flex; flex-direction: column; }
.px-post__tag, .px-post .px-h3 { display: block; }
.px-post__tag { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--px-hl); margin-bottom: 10px; }
.px-post .px-h3 { font-size: 20px; }
.px-post p { margin-top: 8px; }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.px-faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; }
.px-faq details { border-bottom: 1px solid var(--px-line); padding: 20px 0; }
.px-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; font: 700 18px/1.35 var(--px-body); }
.px-faq summary::-webkit-details-marker { display: none; }
.px-faq summary::after { content: '+'; font: 800 22px/1 var(--px-mono); color: var(--px-hl); }
.px-faq details[open] summary::after { content: '–'; }
.px-faq details p { margin-top: 12px; color: var(--px-muted); max-width: var(--px-text-col); }

/* ── Migas ───────────────────────────────────────────────────────────────── */
.px-crumbs { font-size: 14px; color: var(--px-on-dark-muted); display: flex; flex-wrap: wrap; gap: 8px; }
.px-crumbs a { color: #fff; text-decoration: none; }
.px-crumbs a:hover { text-decoration: underline; }
.px-crumbs span[aria-hidden] { opacity: .5; }

/* ── Pie ─────────────────────────────────────────────────────────────────── */
.px-foot { background: var(--px-ink); color: var(--px-on-dark-muted); font-family: var(--px-body); font-size: 15px; }
.px-foot a { color: var(--px-on-dark); text-decoration: none; }
.px-foot a:hover { color: var(--px-accent); }
.px-foot__in { max-width: var(--px-col); margin: 0 auto; padding: 72px var(--px-gutter) 40px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.px-foot__brand p { margin: 16px 0 22px; max-width: 320px; line-height: 1.5; }
.px-foot__brand .px-btn { color: var(--px-ink) !important; }
.px-foot__brand .px-btn--light { color: #fff !important; }
.px-foot__brand .px-cta-row { gap: 10px; }
.px-foot__col { display: flex; flex-direction: column; gap: 10px; }
.px-foot__h { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-bottom: 6px; }
.px-foot__legal { max-width: var(--px-col); margin: 0 auto; padding: 22px var(--px-gutter) 32px; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; gap: 20px; align-items: center; font-size: 14px; }
.px-foot__legal .px-lang { margin-left: auto; border-color: rgba(255,255,255,.2); }
.px-foot__legal .px-lang__item { color: var(--px-on-dark-muted) !important; }
.px-foot__legal .px-lang__item--on { background: var(--px-accent); color: var(--px-ink) !important; }

/* ── Páginas del carril B2B (verticales y funciones) con el chrome pro ──── */
body.px .px-b2b .b2b-hero { padding: 0; border: 0; }
.px-b2b-body { padding-top: 24px; padding-bottom: 24px; }
.px-b2b-body .b2b-section { padding: 56px 0; border-bottom: 1px solid var(--px-line); }
.px-b2b-body .b2b-section:last-child { border-bottom: 0; }
.px-b2b-body .b2b-section h2 { font: 800 clamp(28px, 3.2vw, 40px)/1.1 var(--px-display); letter-spacing: -.025em; margin-bottom: 20px; max-width: 820px; }
.px-b2b-body .b2b-section h3 { font: 700 19px/1.25 var(--px-body); margin-bottom: 8px; }
.px-b2b-body .b2b-section > p { max-width: var(--px-text-col); color: var(--px-muted); }
.px-b2b-body .b2b-answer { max-width: 860px; background: var(--px-surface); border: 1px solid var(--px-line); border-left: 4px solid var(--px-accent-deep); border-radius: 14px; padding: 22px 26px; }
.px-b2b-body .b2b-answer p { font-size: 17px; color: var(--px-text); }
.px-b2b-body .b2b-answer p + p { margin-top: 10px; color: var(--px-muted); }
.px-b2b-body .b2b-pain { list-style: none; display: grid; gap: 10px; max-width: 820px; }
.px-b2b-body .b2b-pain li { position: relative; padding: 14px 18px 14px 46px; background: var(--px-surface); border: 1px solid var(--px-line); border-radius: 12px; }
.px-b2b-body .b2b-pain li::before { content: '—'; position: absolute; left: 18px; color: var(--px-accent-deep); font-weight: 800; }
.px-b2b-body .b2b-turn { background: var(--px-ink); color: var(--px-on-dark); border-radius: 22px; padding: 44px; }
.px-b2b-body .b2b-turn p { font: 800 clamp(24px, 3vw, 34px)/1.15 var(--px-display); letter-spacing: -.02em; max-width: 860px; }
.px-b2b-body .b2b-turn p + p { margin-top: 16px; font: 400 18px/1.55 var(--px-body); letter-spacing: 0; color: var(--px-on-dark-muted); }
.px-b2b-body .b2b-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.px-b2b-body .b2b-card { background: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-radius); padding: 24px; }
.px-b2b-body .b2b-card p { color: var(--px-muted); font-size: 16px; }
.px-b2b-body .b2b-card a { display: inline-block; margin-top: 12px; font-weight: 700; font-size: 14px; color: var(--px-hl); text-decoration: none; }
.px-b2b-body .b2b-table-wrap { overflow-x: auto; background: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-radius); }
.px-b2b-body table.b2b-cost { width: 100%; border-collapse: collapse; min-width: 520px; }
.px-b2b-body table.b2b-cost th, .px-b2b-body table.b2b-cost td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--px-line); }
.px-b2b-body table.b2b-cost tr:last-child td { border-bottom: 0; }
.px-b2b-body table.b2b-cost th { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--px-muted); }
.px-b2b-body table.b2b-cost td { font-family: var(--px-mono); font-size: 15px; }
.px-b2b-body table.b2b-cost td.ours { color: var(--px-hl); font-weight: 700; }
.px-b2b-body .b2b-note { margin-top: 12px; font-size: 14px; color: var(--px-muted); max-width: var(--px-text-col); }
.px-b2b-body .b2b-faq details { border-bottom: 1px solid var(--px-line); padding: 18px 0; max-width: 900px; }
.px-b2b-body .b2b-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; font-weight: 700; font-size: 18px; }
.px-b2b-body .b2b-faq summary::-webkit-details-marker { display: none; }
.px-b2b-body .b2b-faq summary::after { content: '+'; font: 800 22px/1 var(--px-mono); color: var(--px-hl); }
.px-b2b-body .b2b-faq details[open] summary::after { content: '–'; }
.px-b2b-body .b2b-faq p { margin-top: 10px; color: var(--px-muted); max-width: var(--px-text-col); }
.px-b2b-body .b2b-links { display: flex; flex-wrap: wrap; gap: 10px; }
.px-b2b-body .b2b-links a { background: var(--px-surface); border: 1px solid var(--px-line); border-radius: 999px; padding: 10px 16px; font-size: 15px; font-weight: 600; text-decoration: none; }
.px-b2b-body .b2b-links a:hover { border-color: var(--px-text); }
.px-b2b-body .b2b-mirror-link a, .px-b2b-body .b2b-second a { font-weight: 700; color: var(--px-hl); }
.px-b2b-body .b2b-cta { display: inline-flex; align-items: center; min-height: 54px; padding: 0 28px; margin-top: 18px; border-radius: 999px; background: var(--px-accent); color: var(--px-ink); font-weight: 800; text-decoration: none; }
.px-b2b-body .b2b-second { margin-top: 14px; }
.px-b2b-body .b2b-choice { margin-top: 18px; }
.px-hero .b2b-answer { max-width: 780px; margin-bottom: 24px; }
.px-hero .b2b-answer p { font-size: 18px; line-height: 1.55; color: #d7e0da; }
.px-hero .b2b-answer p + p { margin-top: 10px; font-size: 15px; color: var(--px-on-dark-muted); }
.px-b2b-body .b2b-intro .px-lead { font-size: 22px; color: var(--px-text); max-width: 860px; }
.px-hero .b2b-price { display: inline-block; margin-bottom: 26px; padding: 8px 14px; border-radius: 999px; background: color-mix(in srgb, var(--px-accent) 14%, transparent); color: var(--px-accent); font-weight: 700; font-size: 15px; }
.px-hero .px-proof--b2b { grid-template-columns: repeat(3, minmax(0, 1fr)); }


/* ── v2 de la portada: tira del ciclo, demo, ciclo, SEO y guiones ───────── */
.px-btn--text { background: transparent; color: inherit; border-color: transparent; text-decoration: underline; text-underline-offset: 4px; }
.px-hero__note a { color: var(--px-accent); font-weight: 700; text-decoration: none; }
.px-proof.px-loop { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.px-loop .px-proof__n { font-size: clamp(24px, 2.6vw, 32px); display: flex; align-items: baseline; gap: 10px; }
.px-loop__i { font: 700 13px/1 var(--px-mono); color: var(--px-accent); }
.px-demo-badge { position: absolute; top: 14px; right: 14px; z-index: 2; font: 800 11px/1 var(--px-body); letter-spacing: .08em; text-transform: uppercase; background: var(--px-accent); color: var(--px-ink); padding: 5px 8px; border-radius: 6px; }
.px-checks { list-style: none; display: grid; gap: 10px; margin-top: 22px; }
.px-checks li { position: relative; padding-left: 30px; font-size: 17px; }
.px-checks li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--px-ink); color: var(--px-accent); font: 800 12px/22px var(--px-body); text-align: center; }

.px-demosec { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.px-demosec .px-h2 { margin: 14px 0 16px; }
.px-demo__shots { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: end; text-decoration: none; }
.px-demo__shots .px-phone:nth-child(2) { transform: translateY(-28px); }
.px-demo__shots .px-phone__frame { border-radius: 28px; padding: 8px; transition: transform .3s; }
.px-demo__shots .px-phone__frame img { border-radius: 21px; }
.px-demo__shots:hover .px-phone__frame { transform: translateY(-4px); }
.px-demo__shots figcaption { margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--px-text); text-align: center; }

.px-cycle { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 8px; counter-reset: cyc; }
.px-cycle__step { position: relative; background: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-radius); overflow: hidden; display: flex; flex-direction: column; }
.px-cycle__step:not(:last-child)::after { content: '→'; position: absolute; right: -14px; top: 92px; z-index: 2; width: 28px; height: 28px; border-radius: 50%; background: var(--px-accent); color: var(--px-ink); font: 800 15px/28px var(--px-body); text-align: center; }
.px-cycle__media { position: relative; aspect-ratio: 16 / 10; background: var(--px-sand); }
.px-cycle__media img { width: 100%; height: 100%; object-fit: cover; }
.px-cycle__n { position: absolute; left: 14px; top: 14px; font: 700 13px/1 var(--px-mono); background: var(--px-ink); color: var(--px-accent); padding: 6px 8px; border-radius: 6px; }
.px-cycle__b { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.px-cycle__t { font: 800 28px/1 var(--px-display); letter-spacing: -.02em; }
.px-cycle__b p { color: var(--px-muted); font-size: 15px; line-height: 1.5; }
.px-cycle__b ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; }
.px-cycle__b li a { display: inline-block; padding: 6px 10px; border-radius: 999px; background: var(--px-sand); font-size: 13px; font-weight: 700; text-decoration: none; }
.px-cycle__b li a:hover { background: var(--px-accent); }

.px-seo { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.px-seo .px-h2 { margin: 14px 0 16px; }
.px-seo .px-lead { color: var(--px-on-dark-muted); }
.px-seo__points { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; margin-top: 28px; }
.px-seo__points strong { display: block; color: #fff; font-size: 16px; margin-bottom: 4px; }
.px-seo__points p { color: var(--px-on-dark-muted); font-size: 15px; line-height: 1.5; }
.px-serp { position: relative; background: #fff; color: #202124; border-radius: 20px; padding: 22px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); font-family: arial, var(--px-body); }
.px-serp__bar { display: flex; align-items: center; gap: 10px; border: 1px solid #dfe1e5; border-radius: 999px; padding: 10px 16px; font-size: 15px; margin-bottom: 20px; }
.px-serp__bar span { width: 14px; height: 14px; border: 2px solid #9aa0a6; border-radius: 50%; }
.px-serp__res { display: grid; gap: 4px; padding: 14px; border: 2px solid var(--px-accent); border-radius: 14px; }
.px-serp__url { font-size: 13px; color: #4d5156; }
.px-serp__t { font-size: 20px; color: #1a0dab; line-height: 1.3; }
.px-serp__m { font-size: 13px; color: #70757a; }
.px-serp__d { font-size: 14px; color: #4d5156; line-height: 1.5; }
.px-serp__slots { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 13px; color: #202124; }
.px-serp__slots b { background: #1a73e8; color: #fff; padding: 7px 14px; border-radius: 999px; font-size: 13px; }
.px-serp__ghost { height: 14px; border-radius: 6px; background: #f1f3f4; margin-top: 16px; width: 70%; }
.px-serp__ghost + .px-serp__ghost { width: 90%; margin-top: 8px; }

.px-guion { display: grid; grid-template-columns: .8fr 1.2fr; gap: 32px; align-items: start; margin-bottom: 20px; }
.px-flow { position: relative; background: var(--px-ink); color: var(--px-on-dark); border-radius: 22px; padding: 26px; }
.px-flow__h { font: 800 20px/1.2 var(--px-display); margin-bottom: 18px; }
.px-flow ol { list-style: none; display: grid; gap: 0; }
.px-flow__n { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; padding: 10px 0; font-size: 15px; }
.px-flow__n:not(:last-child)::after { content: ''; position: absolute; left: 16px; top: 44px; bottom: -10px; width: 2px; background: rgba(255,255,255,.18); }
.px-flow__n i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-style: normal; font-weight: 800; background: rgba(255,255,255,.08); color: var(--px-accent); }
.px-flow__n--branch i { transform: rotate(0); background: color-mix(in srgb, var(--px-accent) 18%, transparent); }
.px-flow__n--charge i { background: var(--px-accent); color: var(--px-ink); }
.px-flow__n--charge span { color: #fff; font-weight: 700; }
.px-glist { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.px-glist > div { background: var(--px-surface); border: 1px solid var(--px-line); border-radius: 14px; padding: 16px 18px; }
.px-glist strong { display: block; font: 700 17px/1.25 var(--px-display); margin-bottom: 4px; }
.px-glist p { font-size: 14.5px; color: var(--px-muted); line-height: 1.45; }

@media (max-width: 1080px) {
  .px-demosec, .px-seo, .px-guion { grid-template-columns: 1fr; gap: 36px; }
  .px-cycle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .px-cycle__step::after { display: none; }
}
@media (max-width: 640px) {
  .px-proof.px-loop { grid-template-columns: 1fr; gap: 14px; }
  .px-cycle, .px-glist, .px-seo__points { grid-template-columns: 1fr; }
  .px-demo__shots { gap: 8px; }
  .px-demo__shots .px-phone:nth-child(2) { transform: translateY(-14px); }
  .px-demo__shots .px-phone__frame { border-radius: 16px; padding: 4px; }
  .px-demo__shots .px-phone__frame img { border-radius: 13px; }
  .px-demo__shots figcaption { font-size: 12px; }
  .px-demo-badge { top: 8px; right: 8px; font-size: 9px; }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .px-section { padding: 72px 0; }
  .px-tiles, .px-cards, .px-cards--4, .px-ladder { grid-template-columns: repeat(2, 1fr); }
  .px-phones { gap: 18px; }
  .px-pillar, .px-turn, .px-faq { grid-template-columns: 1fr; gap: 32px; }
  .px-pillar:nth-child(even) .px-pillar__media { order: 0; }
  .px-foot__in { grid-template-columns: 1fr 1fr; }
  .px-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  body.px { font-size: 16px; }
  .px-section { padding: 56px 0; }
  .px-tiles, .px-cards, .px-cards--4, .px-cards--2, .px-ladder, .px-steps { grid-template-columns: 1fr; }
  .px-tile { min-height: 230px; }
  .px-phones { grid-template-columns: 1fr; max-width: 300px; }
  .px-hero__in { padding: 72px var(--px-gutter) 48px; }
  .px-hero__sub, .px-lead { font-size: 18px; }
  .px-proof, .px-hero .px-proof--b2b { grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 40px; }
  .px-foot__in { grid-template-columns: 1fr; }
  .px-b2b-body .b2b-turn { padding: 28px; }
  .px-cta-row .px-btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .px-btn, .px-tile img, a.px-card, .px-menu { transition: none; }
}

/* ── Todas las funciones: una tarjeta por función, con su captura ─────────── */
.px-feats__h { font: 800 22px/1.2 var(--px-display); letter-spacing: -.01em; margin: 44px 0 16px; }
.px-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.px-feat { scroll-margin-top: 96px; background: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-radius); overflow: hidden; display: flex; flex-direction: column; }
.px-feat:target { border-color: var(--px-accent-deep); box-shadow: 0 0 0 3px var(--px-accent); }
.px-feat__shot { position: relative; height: 220px; overflow: hidden; background: var(--px-sand); padding: 18px 28px 0; }
.px-feat__shot img { width: 100%; height: auto; border-radius: 16px 16px 0 0; box-shadow: 0 12px 30px -16px rgba(13,22,18,.4); }
.px-feat__shot .px-demo-badge { position: absolute; right: 12px; top: 12px; z-index: 1; }
.px-feat__b { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.px-feat__b h4 { font: 700 18px/1.25 var(--px-body); }
.px-feat__b p { color: var(--px-muted); font-size: 15px; line-height: 1.5; }
.px-feat__b a { margin-top: auto; padding-top: 6px; font-weight: 700; font-size: 14px; color: var(--px-hl); text-decoration: none; }

/* ── Demostraciones en las páginas de función (pro-site/demos.js) ─────────── */
/* Hero partido: el H1 a la izquierda y la app en un móvil a la derecha. */
.b2b-hero--split { background: var(--px-ink); }
.b2b-hero--split .px-hero__in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 56px; align-items: center; }
.b2b-hero--split::after { display: none; }
.px-device { position: relative; max-width: 330px; margin: 0 auto; }
.px-device .px-phone__frame { border-radius: 40px; padding: 11px; background: #050806; box-shadow: 0 40px 80px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08); }
.px-device .px-phone__frame img, .px-device .px-phone__frame video { display: block; width: 100%; height: auto; border-radius: 30px; }
.px-device .px-demo-badge { position: absolute; top: 18px; right: 18px; z-index: 1; }
.px-device__glow { position: absolute; inset: 12% -18% -6%; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--px-accent) 28%, transparent), transparent); }
.px-stores { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
.px-stores a { display: inline-flex; }
.px-stores img { height: 48px; width: auto; }
.px-stores__note { flex-basis: 100%; font-size: 14px; color: var(--px-on-dark-muted); }
.px-b2b-body .px-stores__note { color: var(--px-muted); }

/* Recorrido grabado: el móvil reproduciendo y los pasos al lado. */
.px-b2b-body .b2b-demo { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; }
.b2b-demo__steps { list-style: none; counter-reset: st; display: grid; gap: 12px; margin-top: 8px; }
.b2b-demo__steps li { counter-increment: st; position: relative; padding: 14px 18px 14px 58px; background: var(--px-surface); border: 1px solid var(--px-line); border-radius: 12px; font-weight: 600; }
.b2b-demo__steps li::before { content: counter(st, decimal-leading-zero); position: absolute; left: 16px; top: 13px; font: 700 13px/1 var(--px-mono); background: var(--px-ink); color: var(--px-accent); padding: 6px 7px; border-radius: 6px; }

/* Tira de móviles con su pie. */
.px-b2b-body .b2b-phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: end; max-width: 1000px; margin: 8px auto 0; }
.px-b2b-body .b2b-phones .px-phone:nth-child(2) { transform: translateY(-24px); }
.px-b2b-body .b2b-phones .px-phone__frame { position: relative; border-radius: 30px; padding: 8px; }
.px-b2b-body .b2b-phones .px-phone__frame img { border-radius: 23px; }
.px-b2b-body .b2b-phones .px-demo-badge { position: absolute; top: 14px; right: 14px; z-index: 1; }
.px-b2b-body .b2b-phones figcaption { margin-top: 14px; font-weight: 700; color: var(--px-text); text-align: center; }

/* Funciones de la página en filas alternas, cada una con su captura. */
.px-b2b-body .b2b-rows { display: grid; gap: 28px; }
.b2b-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; background: var(--px-surface); border: 1px solid var(--px-line); border-radius: 24px; padding: 40px 48px 0; overflow: hidden; }
.b2b-row:nth-child(even) .b2b-row__shot { order: -1; }
.b2b-row__b { padding-bottom: 40px; }
.b2b-row__b h3 { font: 800 clamp(22px, 2.4vw, 30px)/1.15 var(--px-display) !important; letter-spacing: -.02em; margin-bottom: 12px !important; }
.b2b-row__b p { color: var(--px-muted); font-size: 17px; }
.b2b-row__b a { display: inline-block; margin-top: 14px; font-weight: 700; font-size: 15px; color: var(--px-hl); text-decoration: none; }
.b2b-row__shot { position: relative; align-self: end; height: 380px; overflow: hidden; display: flex; justify-content: center; }
.b2b-row__shot img { width: min(320px, 100%); height: auto; align-self: flex-start; border-radius: 28px 28px 0 0; border: 8px solid var(--px-ink); border-bottom: 0; }
.b2b-row__shot .px-demo-badge { position: absolute; top: 14px; right: calc(50% - 150px); z-index: 1; }

/* Mosaico de plantillas de la ficha. */
.px-b2b-body .b2b-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; }
.b2b-tpl { margin: 0; }
.b2b-tpl__img { position: relative; height: 300px; overflow: hidden; border-radius: 20px; border: 6px solid var(--px-ink); background: var(--px-sand); }
.b2b-tpl__img img { width: 100%; height: auto; }
.b2b-tpl figcaption { margin-top: 10px; font-weight: 700; text-align: center; }

@media (max-width: 1080px) {
  .px-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b2b-hero--split .px-hero__in { grid-template-columns: 1fr; gap: 36px; }
  .px-device { max-width: 280px; }
  .px-b2b-body .b2b-demo { grid-template-columns: 1fr; gap: 32px; }
  .b2b-row { grid-template-columns: 1fr; gap: 24px; padding: 28px 24px 0; }
  .b2b-row:nth-child(even) .b2b-row__shot { order: 0; }
  .b2b-row__b { padding-bottom: 0; }
  .b2b-row__shot { height: 320px; }
}
@media (max-width: 640px) {
  .px-feats { grid-template-columns: 1fr; }
  .px-feat__shot { height: 200px; }
  .px-b2b-body .b2b-phones { gap: 8px; }
  .px-b2b-body .b2b-phones .px-phone:nth-child(2) { transform: translateY(-12px); }
  .px-b2b-body .b2b-phones .px-phone__frame { border-radius: 16px; padding: 4px; }
  .px-b2b-body .b2b-phones .px-phone__frame img { border-radius: 13px; }
  .px-b2b-body .b2b-phones .px-demo-badge { display: none; }
  .px-b2b-body .b2b-phones figcaption { font-size: 12px; }
  .px-stores img { height: 42px; }
  .px-b2b-body .b2b-tpls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .b2b-tpl__img { height: 220px; border-width: 4px; border-radius: 14px; }
}

/* ── Galería de recorridos grabados (portada y Todas las funciones) ───────── */
.px-tours { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 28px 22px; }
.px-tour { margin: 0; }
.px-tour .px-phone__frame { position: relative; border-radius: 30px; padding: 8px; background: var(--px-ink); box-shadow: 0 30px 60px -30px rgba(13,22,18,.45); }
.px-tour video { display: block; width: 100%; height: auto; border-radius: 23px; background: var(--px-sand); }
.px-tour figcaption { margin-top: 12px; font-weight: 700; text-align: center; }
@media (max-width: 640px) {
  .px-tours { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; }
  .px-tour .px-phone__frame { border-radius: 18px; padding: 5px; }
  .px-tour video { border-radius: 14px; }
  .px-tour figcaption { font-size: 13px; }
}

/* ═══ 50-directory.css ═══ */
/* 50-directory — páginas del directorio servidas por Go (país, región, ciudad,
   barrio, municipal, mejores ciudades, torneos, federados…). Anatomía en la
   skill web-design-language §Páginas del directorio.
   Las plantillas de Go no comparten JS con las estáticas: escriben a mano el
   MISMO marcado que site/blocks.js (px-hero--page, px-crumbs, px-section…). */

/* ── Conmutador de deporte: una fila de pastillas con su recuento ───────── */
.px-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.px-chips__l { flex-basis: 100%; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--px-muted); margin-bottom: 2px; }
.px-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--px-surface); border: 1px solid var(--px-line); font-size: 14px; font-weight: 700; color: var(--px-text); text-decoration: none; white-space: nowrap; }
a.px-chip:hover { border-color: var(--px-text); }
.px-chip b, .px-chip span { font: 700 12px/1 var(--px-mono); color: var(--px-muted); }
.px-chip--on { background: var(--px-ink); border-color: var(--px-ink); color: var(--px-white); }
.px-chip--on b { color: var(--px-accent); }
.px-chip--empty { opacity: .5; }
.px-hero .px-chip { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: var(--px-white); }
.px-hero a.px-chip:hover { border-color: var(--px-white); }
.px-hero .px-chip span { color: var(--px-on-dark-muted); }
.px-hero .px-chip--on { background: var(--px-accent); border-color: var(--px-accent); color: var(--px-on-accent); }
.px-hero .px-chip--on b { color: var(--px-on-accent); }
.px-hero .px-chips__l { color: var(--px-on-dark-muted); }
.px-hero__chips { margin-top: 36px; }

/* ── Lugares: rejilla de enlaces a la siguiente escala (regiones, ciudades) ─ */
.px-places { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; list-style: none; }
.px-places a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; background: var(--px-surface); border: 1px solid var(--px-line); border-radius: 14px; text-decoration: none; font-weight: 700; color: var(--px-text); transition: border-color .15s, transform .15s; }
.px-places a:hover { border-color: var(--px-text); transform: translateY(-1px); }
.px-places a::after { content: '→'; color: var(--px-hl); font-weight: 800; }
.px-places small { display: block; font: 600 12px/1.3 var(--px-mono); color: var(--px-muted); margin-top: 2px; }

/* ── Tarjeta destacada con foto: un estudio, un ranking, una guía ───────── */
.px-promo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); background: var(--px-ink); color: var(--px-on-dark); border-radius: 24px; overflow: hidden; }
.px-promo__b { padding: 44px 48px; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.px-promo__b .px-h2 { font-size: clamp(26px, 3vw, 38px); }
.px-promo__b p { color: var(--px-on-dark-muted); font-size: 17px; }
.px-promo__media { position: relative; min-height: 280px; }
.px-promo__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.px-promo .px-cta-row { margin-top: 8px; }

@media (max-width: 1080px) {
  .px-promo { grid-template-columns: 1fr; }
  .px-promo__media { min-height: 220px; order: -1; }
  .px-promo__b { padding: 30px 26px; }
}
@media (max-width: 640px) {
  .px-places { grid-template-columns: 1fr 1fr; }
  .px-places a { padding: 12px 12px; font-size: 14px; }
}

/* ═══ 51-geo.css ═══ */
/* 51-geo — piezas propias de las páginas geográficas del directorio servidas
   por Go: región (community.html), ciudad (city.html), barrio
   (neighborhood.html), mejores ciudades (best_cities.html) e instalaciones
   municipales (municipal.html). Lo común a todo el directorio (conmutador de
   deporte, rejilla de lugares, tarjeta destacada) vive en 50-directory.css.
   Colores SOLO con tokens --px-* (y los --sport-* de sports.css, que el layout
   de Go sigue sirviendo en las páginas del sistema). */

/* ── Cifras de la cabecera: más estrechas que la prueba de la portada ───── */
.px-proof--geo { margin-top: 36px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); max-width: 760px; }
.px-hero__pill { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 24px; padding: 7px 14px; border-radius: 999px; background: color-mix(in srgb, var(--px-accent) 16%, transparent); color: var(--px-accent); font-size: 14px; font-weight: 700; }
.px-hero__credit { margin-top: 10px; font-size: 12px; color: var(--px-on-dark-muted); }
.px-hero__credit a { color: inherit; }
.px-hero .px-btn { white-space: normal; text-align: center; line-height: 1.2; }

/* ── Atribución pequeña al pie de un bloque (Esri, Google, Wikipedia) ───── */
.px-credit { margin-top: 12px; font-size: 12px; line-height: 1.5; color: var(--px-muted); }
.px-credit a { color: inherit; text-decoration: underline; }

/* ── Lista de centros: tarjeta rica con foto, etiquetas y acciones ──────── */
.px-venues { list-style: none; display: grid; gap: 14px; }
.px-venue { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 20px; align-items: start; padding: 18px; background: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-radius); transition: border-color .15s; }
.px-venue:hover { border-color: color-mix(in srgb, var(--px-text) 40%, var(--px-line)); }
.px-venue--noimg { grid-template-columns: minmax(0, 1fr) auto; }
.px-venue__img { width: 120px; height: 120px; border-radius: 14px; object-fit: cover; background: var(--px-ink-2); overflow: hidden; font-size: 11px; color: var(--px-on-dark-muted); }
.px-venue__t { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.px-venue__name { font: 700 19px/1.25 var(--px-display); letter-spacing: -.01em; color: var(--px-text); text-decoration: none; }
.px-venue__name:hover { color: var(--px-hl); }
h2.px-venue__name, h3.px-venue__name { margin: 0; }
.px-venue__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.px-venue__addr { margin-top: 6px; font-size: 14px; color: var(--px-muted); }
.px-venue__addr a { color: var(--px-hl); }
.px-venue__sports { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.px-venue__desc { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--px-muted); }
.px-venue__go { display: flex; flex-direction: column; gap: 8px; min-width: 170px; }
.px-venue__go .px-btn { min-height: 40px; padding: 8px 16px; font-size: 14px; white-space: normal; text-align: center; line-height: 1.2; }
.px-venue__web { font-size: 13px; color: var(--px-muted); text-align: center; text-decoration: underline; }
.px-venue__brand { font-size: 12px; color: var(--px-muted); text-align: center; }

/* Etiquetas de la tarjeta: titularidad, Premier Padel, club federado. */
.px-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.4; background: color-mix(in srgb, var(--px-hl) 10%, var(--px-surface)); color: var(--px-hl); border: 1px solid color-mix(in srgb, var(--px-hl) 22%, transparent); }
.px-badge--ink { background: var(--px-ink); border-color: var(--px-ink); color: var(--px-accent); }
.px-badge--line { background: transparent; color: var(--px-text); border-color: var(--px-line); }

/* Etiqueta de deporte con el color del catálogo (sports.css da --sport-*). */
.px-sporttag { display: inline-flex; padding: 3px 10px; border-radius: 8px; font-size: 12px; font-weight: 700; background: var(--sport-soft, var(--px-sand)); color: var(--sport-ink, var(--px-muted)); border: 1px solid var(--sport-hair, var(--px-line)); }

/* Favorito rápido (estado lo pone el JS de city.html con .is-on). */
.px-fav { border: 0; background: none; cursor: pointer; padding: 2px 4px; font-size: 20px; line-height: 1; color: var(--px-muted); }
.px-fav.is-on { color: var(--px-hl); }

/* ── Puerta del gestor al final de una lista (parcial claim_cta) ────────── */
.px-claim { display: flex; gap: 14px; align-items: center; margin-top: 16px; padding: 16px 18px; border: 1.5px dashed color-mix(in srgb, var(--px-hl) 45%, var(--px-line)); border-radius: var(--px-radius); background: color-mix(in srgb, var(--px-accent) 7%, var(--px-surface)); text-decoration: none; color: inherit; }
.px-claim:hover { border-style: solid; }
.px-claim__plus { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--px-ink); color: var(--px-accent); font: 800 22px/1 var(--px-body); }
.px-claim__b { flex: 1; min-width: 0; }
.px-claim__b strong { display: block; font-size: 16px; color: var(--px-text); }
.px-claim__b span { display: block; margin-top: 2px; font-size: 14px; color: var(--px-muted); }
.px-claim .px-btn { flex: 0 0 auto; min-height: 40px; font-size: 14px; }

/* ── Análisis deportivo de la ciudad: nota, sub-puntuaciones, tabla ─────── */
.px-score { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: start; }
.px-score__card { background: var(--px-ink); color: var(--px-on-dark); border-radius: var(--px-radius); padding: 26px 22px; text-align: center; }
.px-score__n { font: 800 64px/1 var(--px-display); letter-spacing: -.03em; color: var(--px-accent); }
.px-score__l { margin-top: 8px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--px-on-dark-muted); }
.px-score__reco { font-size: 19px; line-height: 1.5; }
.px-score__rank { margin-top: 10px; font-size: 15px; color: var(--px-muted); }
.px-score__rank strong { color: var(--px-text); }
.px-meters { list-style: none; display: grid; gap: 14px; margin-top: 24px; }
.px-meter__h { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; font-size: 14px; margin-bottom: 6px; }
.px-meter__h small { color: var(--px-muted); font-size: 13px; }
.px-meter__v { font: 700 13px/1 var(--px-mono); color: var(--px-muted); white-space: nowrap; }
.px-meter__v span { color: var(--px-text); font-family: var(--px-body); font-weight: 600; }
.px-meter__bar { height: 10px; border-radius: 999px; background: var(--px-line); overflow: hidden; }
.px-meter__bar i { display: block; height: 100%; border-radius: inherit; background: var(--px-hl); }
.px-explain { margin-top: 18px; font-size: 13px; color: var(--px-muted); }
.px-facts { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 16px; font-size: 15px; color: var(--px-muted); }
.px-facts strong { font: 800 20px/1 var(--px-display); color: var(--px-text); margin-right: 4px; }

/* Tabla de datos (desglose por deporte, ranking de ciudades). */
.px-table-wrap { margin-top: 26px; overflow-x: auto; background: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-radius); }
.px-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.px-table th { text-align: left; padding: 12px 16px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--px-muted); background: var(--px-paper); border-bottom: 1px solid var(--px-line); }
.px-table td { padding: 12px 16px; border-bottom: 1px solid var(--px-line); vertical-align: middle; }
.px-table tr:last-child td { border-bottom: 0; }
.px-table a { color: var(--px-hl); font-weight: 700; text-decoration: none; }
.px-table a:hover { text-decoration: underline; }
.px-table small { color: var(--px-muted); font-size: 13px; }
.px-num { font-family: var(--px-mono); white-space: nowrap; }
.px-num--hi { font-weight: 800; color: var(--px-hl); }
.px-rank__pos { width: 56px; font: 800 16px/1 var(--px-mono); color: var(--px-muted); }
.px-table tr:nth-child(-n+3) .px-rank__pos { color: var(--px-hl); }

/* Huecos: deportes que la región tiene y la ciudad no. */
.px-gaps { margin-top: 24px; }
.px-gaps p { font-size: 15px; color: var(--px-muted); margin-bottom: 10px; }
.px-gaps p strong { color: var(--px-text); }
.px-gaps .px-chip { font-size: 13px; padding: 6px 12px; }
.px-context { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--px-line); font-size: 15px; color: var(--px-muted); }
.px-context a { color: var(--px-hl); font-weight: 700; text-decoration: none; }

/* ── Mapa: la aérea con su contorno + el mapa incrustado ────────────────── */
.px-geomap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.px-geomap--one { grid-template-columns: minmax(0, 1fr); }
.px-geomap--one .px-aerial { aspect-ratio: 21 / 9; }
.px-aerial, .px-embed { position: relative; margin: 0; border-radius: var(--px-radius); overflow: hidden; background: var(--px-ink-2); aspect-ratio: 1200 / 630; }
.px-aerial img, .px-aerial svg, .px-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.px-aerial svg { pointer-events: none; }
.px-aerial path { fill: color-mix(in srgb, var(--px-white) 6%, transparent); stroke: var(--px-white); stroke-width: 2.5; stroke-linejoin: round; }
.px-aerial figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 14px; color: var(--px-white); font-weight: 700; background: linear-gradient(0deg, color-mix(in srgb, var(--px-ink) 80%, transparent), transparent); }
.px-aerial figcaption small { display: block; font-weight: 500; font-size: 13px; color: var(--px-on-dark); }

/* ── Sede Premier Padel: tarjeta oscura con su lista de cercanos ────────── */
.px-sede { background: var(--px-ink); color: var(--px-on-dark); border-radius: 24px; padding: 36px 40px; }
.px-sede + .px-sede { margin-top: 18px; }
.px-sede__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.px-sede__date { font: 700 14px/1 var(--px-mono); color: var(--px-accent); }
.px-sede .px-h2 { color: var(--px-white); font-size: clamp(26px, 3vw, 36px); }
.px-sede__meta { margin-top: 8px; color: var(--px-on-dark-muted); }
.px-sede .px-cta-row { margin-top: 20px; }
.px-sede .px-h3 { margin-top: 30px; color: var(--px-white); }
.px-sede__sub { margin-top: 4px; font-size: 15px; color: var(--px-on-dark-muted); }
.px-sede__near { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 16px; }
.px-sede__near li { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--px-white) 6%, transparent); border: 1px solid color-mix(in srgb, var(--px-white) 12%, transparent); }
.px-sede__near a { color: var(--px-white); font-weight: 700; text-decoration: none; }
.px-sede__near small { color: var(--px-on-dark-muted); font-size: 13px; }
.px-sede__near .px-sede__cta { color: var(--px-accent); font-size: 13px; text-decoration: underline; }
.px-sede .px-badge--line { color: var(--px-on-dark); border-color: color-mix(in srgb, var(--px-white) 25%, transparent); }

/* ── Paginación de la lista ─────────────────────────────────────────────── */
.px-pager { display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 28px; }
.px-pager__l { font: 600 14px/1 var(--px-mono); color: var(--px-muted); }

/* ── Bloques de aviso y cierre ──────────────────────────────────────────── */
.px-callout .px-h3 { margin-bottom: 8px; }
.px-callout p + p { margin-top: 8px; }
.px-callout .px-cta-row { margin-top: 16px; }
.px-callout a:not(.px-btn) { color: var(--px-hl); font-weight: 700; }
/* Secciones cortas seguidas (mapa, aviso, alternativas…): sin doble margen. */
.px-section--chain + .px-section--chain { padding-top: 0; }
/* Puente al carril de gestores: al pie y en voz baja. */
.px-bridge { max-width: 780px; padding: 20px 24px; border-radius: var(--px-radius); border: 1px solid var(--px-line); background: var(--px-surface); }
.px-bridge strong { display: block; font-size: 16px; margin-bottom: 4px; }
.px-bridge p { font-size: 14px; color: var(--px-muted); line-height: 1.6; }
.px-bridge a { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 700; color: var(--px-hl); text-decoration: none; }
.px-disclaimer { margin-top: 22px; font-size: 13px; color: var(--px-muted); max-width: var(--px-text-col); }

/* Hueco de anuncio: rotulado y separado del contenido. */
.px-ad { max-width: var(--px-col); margin: 0 auto; padding: 24px var(--px-gutter); }
.px-ad__l { display: block; margin-bottom: 6px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--px-muted); }
.px-ad .adsbygoogle { display: block; }

@media (max-width: 1080px) {
  .px-score { grid-template-columns: 1fr; gap: 22px; }
  .px-score__card { max-width: 280px; }
  .px-geomap { grid-template-columns: 1fr; }
  .px-sede { padding: 30px 26px; }
}
@media (max-width: 640px) {
  .px-venue, .px-venue--noimg { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .px-venue--noimg > .px-venue__b { grid-column: 1 / -1; }
  .px-venue__img { width: 76px; height: 76px; border-radius: 12px; }
  .px-venue__go { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; min-width: 0; }
  .px-venue__go .px-btn { flex: 1 1 160px; }
  .px-venue__web, .px-venue__brand { flex-basis: 100%; }
  .px-venue__name { font-size: 17px; }
  .px-claim { flex-wrap: wrap; }
  .px-claim .px-btn { flex: 1 1 100%; }
  .px-sede { padding: 26px 20px; border-radius: 20px; }
  .px-table th, .px-table td { padding: 10px 10px; }
  .px-score__n { font-size: 52px; }
  .px-aerial, .px-embed { aspect-ratio: 4 / 3; }
}

/* ═══ 52-misc.css ═══ */
/* 52-misc — páginas sueltas servidas por Go: calendario Premier Padel
   (tournaments_padel), clubes federados FEP (fep_clubs), partida (/m/:id),
   club (/c/:id), reserva (/bookings/:sqid), «no encontrado», la Radiografía del
   deporte (informe de datos) y la guía para urbanizaciones (communities).
   Skill web-design-language. Solo tokens --px-* (o color-mix sobre ellos): el
   acento cambia de sitio solo. */

/* ── Texto secundario bajo un bloque ────────────────────────────────────── */
.px-note { margin-top: 18px; font-size: 15px; line-height: 1.6; color: var(--px-muted); max-width: var(--px-text-col); }
.px-note--small { font-size: 13px; }
.px-note a { color: var(--px-hl); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.px-head-block + .px-note { margin-top: -28px; }
.px-section--ink .px-note, .px-gear .px-note { color: var(--px-on-dark-muted); }
.px-section--ink .px-note a, .px-gear .px-note a { color: var(--px-accent); }
.px-lead strong { color: var(--px-text); }
.px-section--ink .px-lead strong { color: var(--px-white); }
.px-lead--ink { color: var(--px-text); font-size: 21px; }
.px-section--ink .px-link-arrow { color: var(--px-white); border-bottom-color: var(--px-accent); }

/* ── Etiquetas cortas: deporte, estado, código ──────────────────────────── */
.px-flags { display: flex; flex-wrap: wrap; gap: 8px; }
.px-flag { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--px-line); background: var(--px-sand); color: var(--px-text); font: 700 12px/1.2 var(--px-body); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.px-hero .px-flag { background: color-mix(in srgb, var(--px-white) 10%, transparent); border-color: color-mix(in srgb, var(--px-white) 22%, transparent); color: var(--px-white); }
.px-flag--accent, .px-hero .px-flag--accent { background: var(--px-accent); border-color: var(--px-accent); color: var(--px-on-accent); }
.px-flag--ink { background: var(--px-ink); border-color: var(--px-ink); color: var(--px-white); font-size: 10px; padding: 3px 7px; }
.px-flag--off, .px-hero .px-flag--off { background: transparent; color: var(--px-on-dark-muted); }
.px-flag--warn, .px-hero .px-flag--warn { background: var(--px-white); border-color: var(--px-white); color: var(--px-ink); }
.px-flag--code, .px-hero .px-flag--code { font-family: var(--px-mono); text-transform: none; letter-spacing: .02em; background: transparent; border-style: dashed; }
.px-hero .px-flags + .px-h1 { margin-top: 18px; }

/* Línea de dirección o ciudad, con su punto. */
.px-place-line { display: block; font-size: 14px; line-height: 1.45; color: var(--px-muted); }
.px-place-line::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; border: 2px solid var(--px-accent-deep); vertical-align: 1px; }

/* ── Calendario de torneos: una tarjeta por sede ────────────────────────── */
.px-events { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.px-event { display: flex; flex-direction: column; gap: 14px; background: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-radius); padding: 28px; }
.px-event__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.px-event__date { font: 700 13px/1 var(--px-mono); color: var(--px-hl); }
.px-event .px-h3 { font-size: 26px; }
.px-event__h { margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--px-line); font: 800 12px/1.3 var(--px-body); letter-spacing: .1em; text-transform: uppercase; color: var(--px-muted); }
.px-nearby { list-style: none; display: grid; gap: 8px; }
.px-nearby li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--px-paper); border: 1px solid var(--px-line); }
.px-nearby__b { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.px-nearby__b .px-place-line { flex-basis: 100%; }
.px-nearby__name { font-weight: 700; font-size: 15px; text-decoration: none; color: var(--px-text); }
.px-nearby__name:hover { color: var(--px-hl); }
.px-nearby__go { flex-shrink: 0; font-size: 13px; font-weight: 700; color: var(--px-hl); text-decoration: none; white-space: nowrap; }
.px-nearby__go:hover { text-decoration: underline; }

/* Bloque oscuro de material (enlaces de afiliado). */
.px-gear { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; padding: 44px 48px; border-radius: 24px; background: var(--px-ink); color: var(--px-on-dark); }
.px-gear .px-h2 { font-size: clamp(26px, 3vw, 38px); margin-bottom: 14px; }
.px-gear .px-lead { color: var(--px-on-dark-muted); font-size: 17px; }

/* ── Clubes por comunidad (federados FEP) ───────────────────────────────── */
.px-groups { display: grid; gap: 16px; }
.px-group { background: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-radius); padding: 26px 28px; }
.px-group__h { font: 800 clamp(22px, 2.4vw, 28px)/1.15 var(--px-display); letter-spacing: -.02em; }
.px-group__h a { text-decoration: none; color: var(--px-text); }
.px-group__h a:hover { color: var(--px-hl); }
.px-group__n { font: 600 14px/1 var(--px-body); letter-spacing: 0; color: var(--px-muted); }
.px-clubs { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 28px; margin-top: 14px; }
.px-clubs li { padding: 11px 0; border-bottom: 1px solid var(--px-line); }
.px-clubs a { font-weight: 700; font-size: 15px; text-decoration: none; color: var(--px-text); }
.px-clubs a:hover { color: var(--px-hl); }
.px-clubs .px-place-line { margin-top: 2px; font-size: 13px; }
.px-backlinks { gap: 12px 18px; color: var(--px-muted); }

/* ── Cifras de una ficha (partida, club) dentro de la cabecera ──────────── */
/* Es un <dl>: la etiqueta va primero en el marcado y la cifra se ve arriba. */
.px-figs { margin-bottom: 0; }
.px-figs > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.px-figs dd { margin: 0; }
.px-figs .px-proof__n { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.1; overflow-wrap: anywhere; }

/* Texto + tarjeta lateral (descripción y lugar, problema y lista…). */
.px-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: start; }
.px-split__main .px-h2 { margin-bottom: 16px; }
.px-venue-card { display: grid; gap: 10px; }
.px-venue-card .px-h3 { margin-top: 2px; }
.px-venue-card .px-note { margin-top: 6px; }

/* ── Justificante de reserva ────────────────────────────────────────────── */
.px-ticket { max-width: 720px; margin: 0 auto; display: grid; gap: 22px; padding: 32px; background: var(--px-surface); border: 1px solid var(--px-line); border-radius: 24px; box-shadow: 0 30px 60px -40px color-mix(in srgb, var(--px-ink) 45%, transparent); }
.px-ticket__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 0; }
.px-ticket__facts > div { padding: 14px 0; border-bottom: 1px dashed var(--px-line); }
.px-ticket__facts dt { font: 800 11.5px/1.2 var(--px-body); letter-spacing: .1em; text-transform: uppercase; color: var(--px-muted); }
.px-ticket__facts dd { margin: 6px 0 0; font: 700 21px/1.25 var(--px-display); letter-spacing: -.01em; overflow-wrap: anywhere; }
.px-ticket__lines { display: grid; gap: 6px; font-size: 15px; }
.px-ticket__lines a { color: var(--px-hl); font-weight: 700; }
.px-ticket .px-note { margin-top: 0; }
.px-btn--danger { background: transparent; border-color: var(--px-text); color: var(--px-text) !important; cursor: pointer; }
.px-btn--danger:hover { background: var(--px-ink); color: var(--px-white) !important; }

/* ── «No encontrado»: cabecera centrada con una pista dibujada detrás ───── */
.px-lost .px-hero__in { padding: 140px var(--px-gutter) 128px; text-align: center; }
.px-lost .px-hero__text { margin: 0 auto; }
.px-lost .px-hero__sub { margin-left: auto; margin-right: auto; }
.px-lost .px-cta-row { justify-content: center; }
.px-lost::before {
  content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(900px, 96%); aspect-ratio: 2 / 1; transform: translate(-50%, -50%);
  border: 2px solid color-mix(in srgb, var(--px-accent) 14%, transparent); border-radius: 14px;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), color-mix(in srgb, var(--px-accent) 10%, transparent) calc(50% - 1px), color-mix(in srgb, var(--px-accent) 10%, transparent) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(0deg, transparent calc(50% - 1px), color-mix(in srgb, var(--px-accent) 6%, transparent) calc(50% - 1px), color-mix(in srgb, var(--px-accent) 6%, transparent) calc(50% + 1px), transparent calc(50% + 1px));
}

/* ── Hueco de publicidad (AdSense) ──────────────────────────────────────── */
.px-adslot-section { padding: 28px 0; }
.px-adslot { padding: 10px 14px 14px; border: 1px dashed var(--px-line); border-radius: 14px; background: var(--px-surface); }
.px-adslot__l { display: block; margin-bottom: 6px; font: 700 11px/1 var(--px-body); letter-spacing: .1em; text-transform: uppercase; color: var(--px-muted); }
.px-adslot__ins { display: block; }

/* ── Radiografía del deporte: informe de datos ──────────────────────────── */
.px-rx-hero .px-hero__text { max-width: 860px; }
.px-rx-hero .px-h1 { font-size: clamp(34px, 4.4vw, 54px); }
.px-rx-hero .px-hero__sub { font-size: 18px; max-width: 760px; }
.px-proof--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.px-proof__n small { font-size: .5em; color: var(--px-on-dark-muted); letter-spacing: 0; }
.px-rx-chips .px-chip strong { color: var(--px-text); }
.px-rx-insight { margin-bottom: 28px; font-size: 17px; line-height: 1.65; max-width: 900px; }

/* Tabla de datos fuera de un texto largo: tarjeta con scroll propio en móvil. */
.px-datatable { background: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-radius); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.px-datatable--gap { box-shadow: inset 4px 0 0 var(--px-ink); }
.px-datatable table { width: 100%; border-collapse: collapse; font-size: 15px; }
.px-datatable th { text-align: left; padding: 14px 18px; background: var(--px-paper); border-bottom: 1px solid var(--px-line); font: 800 11.5px/1.3 var(--px-body); letter-spacing: .08em; text-transform: uppercase; color: var(--px-muted); white-space: nowrap; }
.px-datatable td { padding: 13px 18px; border-bottom: 1px solid var(--px-line); vertical-align: middle; }
.px-datatable tr:last-child td { border-bottom: 0; }
.px-datatable tbody tr:hover { background: color-mix(in srgb, var(--px-sand) 55%, transparent); }
.px-datatable td a { font-weight: 700; color: var(--px-text); text-decoration: none; }
.px-datatable td a:hover { color: var(--px-hl); text-decoration: underline; text-underline-offset: 3px; }
.px-datatable td a.px-datatable__plain { font-weight: 500; }
.px-datatable__sub { font-size: 13px; color: var(--px-muted); }
.px-datatable__bar { min-width: 150px; }

/* Cifra en una tabla o lista: mono; --up/--down llevan su triángulo. */
.px-val { font: 700 14px/1.3 var(--px-mono); white-space: nowrap; }
.px-val--hi, .px-val--up { color: var(--px-hl); }
.px-val--muted { color: var(--px-muted); font-weight: 600; }
.px-val--small { font-size: 12px; }
.px-val--up::before, .px-val--down::before { content: ''; display: inline-block; width: 0; height: 0; margin-right: 6px; border-left: 5px solid transparent; border-right: 5px solid transparent; vertical-align: 2px; }
.px-val--up::before { border-bottom: 7px solid currentColor; }
.px-val--down { color: var(--px-text); font-weight: 800; }
.px-val--down::before { border-top: 7px solid currentColor; }

/* Barra de porcentaje (el ancho lo pone el dato). */
.px-rx-bar { display: block; height: 7px; margin-bottom: 6px; border-radius: 4px; background: color-mix(in srgb, var(--px-text) 8%, transparent); overflow: hidden; }
.px-rx-bar i { display: block; height: 100%; border-radius: 4px; background: var(--px-hl); }
.px-rx-bar--muted i { background: color-mix(in srgb, var(--px-text) 32%, transparent); }

/* Correlaciones sobre banda oscura. */
.px-corr { list-style: none; display: grid; gap: 2px; margin-top: 14px; }
.px-corr li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--px-white) 10%, transparent); }
.px-corr li:last-child { border-bottom: 0; }
.px-corr a { color: var(--px-white); font-weight: 700; text-decoration: none; }
.px-corr a:hover { text-decoration: underline; }
.px-corr .px-val { color: var(--px-accent); }
.px-corr--down .px-val { color: var(--px-on-dark-muted); }

.px-rx-method .px-prose { margin: 0 auto; }
.px-rx-method .px-prose > h2:first-child { margin-top: 0; }
.px-rx-method .px-cta-row { margin-top: 24px; }
.px-rx-foot { display: grid; gap: 16px; }
.px-rx-foot .px-note { margin-top: 0; max-width: 900px; }

/* ── Guía para urbanizaciones ───────────────────────────────────────────── */
.px-pains p { font-weight: 700; color: var(--px-text); margin-bottom: 12px; }
.px-pains ul { list-style: none; display: grid; gap: 10px; }
.px-pains li { position: relative; padding-left: 30px; font-size: 16px; color: var(--px-text); }
.px-pains li::before { content: '×'; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--px-sand); color: var(--px-text); font: 800 14px/20px var(--px-body); text-align: center; }
.px-split .px-checks { margin-top: 0; }
.px-quote { margin: 0; position: relative; padding-top: 58px; font: 600 20px/1.45 var(--px-display); color: var(--px-text); }
.px-quote::before { content: '\201C'; position: absolute; top: 14px; left: 24px; font: 800 64px/1 var(--px-display); color: var(--px-accent-deep); }
.px-ctaband__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: 32px; font-size: 14px; }
.px-ctaband__links a { color: var(--px-on-dark-muted); text-decoration: none; }
.px-ctaband__links a:hover { color: var(--px-white); text-decoration: underline; }

@media (max-width: 1080px) {
  .px-events, .px-gear, .px-split { grid-template-columns: 1fr; }
  .px-split { gap: 28px; }
  .px-gear { padding: 32px 28px; gap: 24px; }
}
@media (max-width: 640px) {
  .px-event, .px-group { padding: 22px 18px; }
  .px-nearby li { flex-direction: column; align-items: flex-start; gap: 6px; }
  .px-clubs { grid-template-columns: 1fr; }
  .px-ticket { padding: 22px 18px; }
  .px-ticket__facts dd { font-size: 18px; }
  .px-proof--3 { grid-template-columns: 1fr 1fr; }
  .px-lost .px-hero__in { padding: 96px var(--px-gutter) 88px; }
  .px-datatable th, .px-datatable td { padding: 11px 12px; }
  .px-datatable table { font-size: 14px; }
  .px-datatable__bar { min-width: 110px; }
  .px-quote { font-size: 18px; }
}

/* ═══ 60-editorial.css ═══ */
/* 60-editorial — blog, legal, ayuda y páginas de texto largo.
   Bloques JS: site/blocks.js (pageHero, doc, ctaBand). Anatomía en la skill
   web-design-language §Páginas de texto. */

/* ── Cabecera de página sin foto y compacta ─────────────────────────────── */
.px-hero--plain { background: radial-gradient(120% 140% at 85% 0%, var(--px-ink-2) 0%, var(--px-ink) 60%); }
.px-hero--plain::after { display: none; }
.px-hero--compact .px-hero__in { padding: 72px var(--px-gutter) 48px; }
.px-hero--compact .px-h1 { font-size: clamp(32px, 4.4vw, 52px); }
.px-hero .px-crumbs { margin-bottom: 18px; }
.px-crumbs--light { color: var(--px-muted); }
.px-crumbs--light a { color: var(--px-text); }

/* ── Documento con índice lateral ───────────────────────────────────────── */
.px-doc { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 56px; align-items: start; }
.px-doc--single { grid-template-columns: minmax(0, 1fr); max-width: calc(var(--px-text-col) + 2 * var(--px-gutter)); }
.px-doc__aside { position: sticky; top: 92px; display: grid; gap: 18px; max-height: calc(100vh - 110px); overflow-y: auto; }
.px-toc { background: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-radius); padding: 18px 18px 14px; }
.px-toc__h { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--px-muted); margin-bottom: 10px; }
.px-toc ol { list-style: none; display: grid; gap: 2px; counter-reset: toc; }
.px-toc li { counter-increment: toc; }
.px-toc a { display: grid; grid-template-columns: 26px 1fr; gap: 6px; padding: 7px 8px; border-radius: 8px; font-size: 14px; line-height: 1.35; text-decoration: none; color: var(--px-text); }
.px-toc a::before { content: counter(toc, decimal-leading-zero); font: 700 12px/1.6 var(--px-mono); color: var(--px-hl); }
.px-toc a:hover { background: var(--px-sand); }

/* ── Texto largo ────────────────────────────────────────────────────────── */
.px-prose { max-width: var(--px-text-col); font-size: 17px; line-height: 1.72; color: var(--px-text); }
.px-prose > * + * { margin-top: 1em; }
.px-prose h2 { font: 800 clamp(24px, 2.6vw, 32px)/1.15 var(--px-display); letter-spacing: -.02em; margin-top: 2.2em; scroll-margin-top: 96px; }
.px-prose h3 { font: 700 20px/1.3 var(--px-body); margin-top: 1.8em; scroll-margin-top: 96px; }
.px-prose h2 + *, .px-prose h3 + * { margin-top: .6em; }
.px-prose :where(ul, ol) { padding-left: 1.3em; }
.px-prose li + li { margin-top: .35em; }
.px-prose li::marker { color: var(--px-hl); font-weight: 700; }
.px-prose a { color: var(--px-hl); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.px-prose a:hover { color: var(--px-text); }
.px-prose strong { font-weight: 700; }
.px-prose blockquote { border-left: 4px solid var(--px-accent-deep); background: var(--px-surface); border-radius: 0 14px 14px 0; padding: 16px 20px; color: var(--px-text); }
.px-prose code { font: 500 .9em var(--px-mono); background: var(--px-sand); padding: 2px 6px; border-radius: 6px; }
.px-prose img, .px-prose figure img { border-radius: var(--px-radius); }
.px-prose figure figcaption { margin-top: 8px; font-size: 14px; color: var(--px-muted); }
.px-prose hr { border: 0; border-top: 1px solid var(--px-line); margin: 2.4em 0; }
.px-prose table { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--px-surface); border: 1px solid var(--px-line); border-radius: 14px; overflow: hidden; display: block; overflow-x: auto; }
.px-prose th, .px-prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--px-line); vertical-align: top; }
.px-prose th { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--px-muted); background: var(--px-paper); }
.px-prose tr:last-child td { border-bottom: 0; }
.px-prose .px-lead { font-size: 20px; color: var(--px-muted); }

/* Recuadro dentro del texto: aviso, resumen, consejo. */
.px-callout { background: var(--px-surface); border: 1px solid var(--px-line); border-left: 4px solid var(--px-accent-deep); border-radius: 14px; padding: 18px 22px; }
.px-callout--ink { background: var(--px-ink); color: var(--px-on-dark); border-color: var(--px-ink); }
.px-callout--ink a { color: var(--px-accent); }

/* ── Enlaces relacionados al pie de un documento ────────────────────────── */
.px-related { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.px-related a { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 16px 18px; background: var(--px-surface); border: 1px solid var(--px-line); border-radius: 14px; font-weight: 700; text-decoration: none; }
.px-related a::after { content: '→'; color: var(--px-hl); }
.px-related a:hover { border-color: var(--px-text); }

/* ── Banda final de CTA ─────────────────────────────────────────────────── */
.px-cta-row--center { justify-content: center; margin-top: 28px; }
.px-ctaband .px-h2 { margin: 14px 0 14px; }

@media (max-width: 1080px) {
  .px-doc { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .px-doc__aside { position: static; max-height: none; }
}

/* ═══ 61-editorial-pages.css ═══ */
/* 61-editorial-pages — páginas editoriales del sitio de jugadores: blog
   (índice y artículo, con los bloques que van dentro), sobre nosotros,
   contacto, descarga, iOS, verificación de email y la ayuda del gestor.
   Marcado: templates/{blog-*,about-page,contact-page,download-page,ios-page,
   verify-page}.js, site/editorial.js y scripts/build-help.mjs. Solo tokens
   --px-*: el acento cambia solo según el sitio (un artículo del blog puede
   caer en pro. o en communities.). Skill web-design-language. */

/* ── Componentes del sistema dentro del texto largo ─────────────────────── */
/* .px-prose subraya y tiñe todo enlace: los que son botón o tarjeta no. */
.px-prose :is(a.px-btn, a.px-card, a.px-store-badge) { text-decoration: none; }
.px-prose a.px-card { color: var(--px-text); }
.px-prose a.px-card:hover { color: var(--px-text); }
.px-prose .px-cards { margin-top: 1.4em; margin-bottom: 1.4em; }
.px-prose .px-card p { margin-top: 0; }
.px-prose .px-card .px-h3 { font-size: 19px; }
.px-prose .px-callout > * + * { margin-top: .6em; }
.px-prose .px-callout h3 { margin-top: 0; }
.px-prose .px-callout--ink a.px-btn--ghost { color: var(--px-white) !important; }

/* ── Tarjeta de artículo con foto (índice del blog y relacionados) ──────── */
/* Variante con foto de .px-post (10-core, «Recursos»): misma tarjeta y la
   misma etiqueta .px-post__tag, con la foto a sangre arriba. */
.px-posts { align-items: stretch; }
a.px-card.px-post--media { padding: 0; overflow: hidden; color: var(--px-text); }
.px-post__media { aspect-ratio: 16 / 9; background: var(--px-sand); overflow: hidden; }
.px-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
a.px-post--media:hover .px-post__media img { transform: scale(1.04); }
.px-post__b { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.px-post--media .px-post__tag { margin-bottom: 8px; }
.px-post--media p { font-size: 15px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.px-post__meta { margin-top: auto; padding-top: 12px; font: 600 13px/1.4 var(--px-mono); color: var(--px-muted); }

/* ── Preguntas frecuentes en una columna (dentro de un artículo) ────────── */
.px-faq--stack { display: block; }
.px-faq--stack h2 { margin-bottom: .4em; }
.px-prose .px-faq--stack details { margin-top: 0; }
.px-prose .px-faq--stack details p { margin-top: 10px; }

/* ── Anuncio dentro del artículo ────────────────────────────────────────── */
.px-ad { background: var(--px-surface); border: 1px solid var(--px-line); border-radius: 14px; padding: 14px; text-align: center; overflow: hidden; }
.px-ad__label { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--px-muted); }

/* ── Bloque de comunidad (Discord): secundario, no compite con el CTA ───── */
.px-community h3 { font: 700 19px/1.3 var(--px-display); }
.px-community p { color: var(--px-muted); }

/* ── Productos de afiliación (affiliate-block.js) ───────────────────────── */
.px-aff-block { background: var(--px-sand); border: 1px solid var(--px-line); border-radius: var(--px-radius); padding: 22px; }
.px-aff-block__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.px-prose .px-aff-block h2 { margin: 0; font-size: 22px; }
.px-aff-block__tag { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--px-muted); }
.px-aff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.px-prose a.px-aff-card { display: flex; flex-direction: column; background: var(--px-surface); border: 1px solid var(--px-line); border-radius: 14px; overflow: hidden; text-decoration: none; color: var(--px-text); transition: border-color .15s, transform .15s; }
.px-prose a.px-aff-card:hover { border-color: var(--px-text); transform: translateY(-2px); color: var(--px-text); }
.px-aff-card__img { aspect-ratio: 1 / 1; background: var(--px-surface); display: flex; align-items: center; justify-content: center; padding: 10px; }
.px-aff-card__img img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 0 !important; }
.px-aff-card__body { display: flex; flex-direction: column; gap: 4px; flex: 1; padding: 10px 12px 14px; }
.px-aff-card__brand { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--px-muted); }
.px-aff-card__name { font-size: 14px; line-height: 1.3; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.px-aff-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }
.px-aff-card__price { font-weight: 800; color: var(--px-hl); font-size: 15px; }
.px-aff-card__rrp { margin-left: 6px; font-weight: 400; font-size: 13px; color: var(--px-muted); text-decoration: line-through; }
.px-aff-card__rating { font-size: 13px; color: var(--px-muted); }
.px-aff-card__cta { margin-top: 8px; padding: 8px 10px; border-radius: 999px; text-align: center; font-size: 13px; font-weight: 700; background: var(--px-ink); color: var(--px-white); }
.px-prose a.px-aff-card:hover .px-aff-card__cta { background: var(--px-accent); color: var(--px-on-accent); }
.px-prose .px-aff-block__disclosure { margin-top: 14px; font-size: 12px; line-height: 1.5; color: var(--px-muted); }

/* ── Centros reales de la ciudad (venues-block.js) ──────────────────────── */
.px-ven-block { background: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-radius); padding: 22px; }
.px-ven-block__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.px-prose .px-ven-block h2 { margin: 0; font-size: 22px; }
.px-ven-block__tag { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--px-hl); }
.px-prose .px-ven-block__sub { margin-top: 6px; font-size: 15px; color: var(--px-muted); }
.px-ven-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-top: 16px; }
.px-prose a.px-ven-card { display: flex; flex-direction: column; background: var(--px-paper); border: 1px solid var(--px-line); border-radius: 14px; overflow: hidden; text-decoration: none; color: var(--px-text); transition: border-color .15s, transform .15s; }
.px-prose a.px-ven-card:hover { border-color: var(--px-text); transform: translateY(-2px); color: var(--px-text); }
.px-ven-card__img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--px-accent) 30%, var(--px-sand)), var(--px-sand)); }
.px-ven-card__img img { width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; }
.px-ven-card__ph { width: 14px; height: 14px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--px-accent-deep); opacity: .7; }
.px-ven-card__badge { position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  background: color-mix(in srgb, var(--px-surface) 92%, transparent); color: var(--px-text); }
.px-ven-card__attr { position: absolute; right: 7px; bottom: 5px; font-size: 10px; color: var(--px-white); text-shadow: 0 1px 2px color-mix(in srgb, var(--px-ink) 70%, transparent); }
.px-ven-card__body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 12px 14px 14px; }
.px-ven-card__name { font-weight: 700; font-size: 15px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.px-ven-card__meta { display: flex; align-items: center; gap: 8px; min-height: 18px; }
.px-ven-card__rating { font-size: 13px; font-weight: 700; }
.px-ven-card__rcount { margin-left: 3px; font-weight: 400; color: var(--px-muted); }
.px-ven-card__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.px-ven-card__chip { padding: 2px 8px; border-radius: 999px; font-size: 11px; background: var(--px-sand); color: var(--px-text); }
.px-ven-card__cta { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 700; color: var(--px-hl); }
.px-prose .px-ven-block__all { display: inline-block; margin-top: 16px; font-weight: 700; }

/* ── Sobre nosotros y contacto ──────────────────────────────────────────── */
.px-prose .px-about__founded { font-size: 14px; color: var(--px-muted); }
.px-contact h2 { margin-top: 0 !important; font: 800 24px/1.15 var(--px-display); }
.px-prose .px-contact__mail { margin-top: 8px; font: 800 clamp(22px, 3vw, 30px)/1.2 var(--px-display); letter-spacing: -.01em; overflow-wrap: anywhere; }
.px-prose .px-contact__note { margin-top: 4px; font-size: 14px; color: var(--px-muted); }

/* ── Descarga: una tarjeta por tienda ───────────────────────────────────── */
.px-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: var(--px-accent); color: var(--px-on-accent); }
a.px-card.px-store { display: flex; flex-direction: column; gap: 14px; color: var(--px-text); }
.px-store__head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.px-store__head .px-h3 { margin: 0; }
.px-store__logo { flex-shrink: 0; color: var(--px-text); }
.px-store__badge img { height: 56px; width: auto; }
.px-store__badge--ios img { height: 42px; margin: 7px 0; }
.px-store__back { margin-top: 32px; font-size: 15px; font-weight: 700; }
.px-store__back a { color: var(--px-hl); text-decoration: none; }
.px-store__back a:hover { text-decoration: underline; }

/* ── iOS: insignia de tienda en la cabecera y lista de ventajas ─────────── */
.px-store-badge { display: inline-block; transition: opacity .15s; }
.px-store-badge:hover { opacity: .85; }
.px-store-badge img { height: 56px; width: auto; }
.px-store-badge--play img { height: 48px; }
.px-ios { max-width: calc(var(--px-text-col) + 2 * var(--px-gutter)); }
.px-ios .px-checks { margin-top: 0; }
.px-ios__also { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--px-line); }
.px-ios__also-h { margin-bottom: 12px; font-weight: 700; color: var(--px-muted); }
.px-ios__links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 28px; font-weight: 700; }
.px-ios__links a { color: var(--px-hl); text-decoration: none; }
.px-ios__links a:hover { text-decoration: underline; }

/* ── Verificación de email: tres estados que cambia el script ───────────── */
.px-verify { min-height: 56vh; display: flex; align-items: center; }
.px-verify .px-wrap { width: 100%; }
.px-verify__card { max-width: 560px; margin: 0 auto; padding: 40px 28px; text-align: center; background: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-radius); }
.px-verify__state { display: none; }
.px-verify__state.is-active { display: block; }
.px-verify__state .px-h2 { font-size: clamp(26px, 3.4vw, 36px); margin-bottom: 12px; }
.px-verify__state p { color: var(--px-muted); margin-bottom: 24px; }
.px-verify__state .px-cta-row--center { margin-top: 0; }
.px-verify__ico { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 18px; border-radius: 50%; font: 800 26px/1 var(--px-body); }
.px-verify__ico--ok { background: var(--px-accent); color: var(--px-on-accent); }
.px-verify__ico--ok::before { content: '✓'; }
.px-verify__ico--warn { background: var(--px-sand); color: var(--px-text); border: 1px solid var(--px-line); }
.px-verify__ico--warn::before { content: '!'; }
.px-spinner { display: inline-block; width: 36px; height: 36px; margin-bottom: 16px; border-radius: 50%;
  border: 3px solid var(--px-line); border-top-color: var(--px-accent-deep); animation: px-spin 1s linear infinite; }
@keyframes px-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .px-spinner { animation-duration: 3s; } }

/* ── Ayuda del gestor: buscador y lista por secciones ───────────────────── */
.px-help { max-width: calc(900px + 2 * var(--px-gutter)); }
.px-search { width: 100%; min-height: 54px; padding: 0 18px; font: inherit; font-size: 17px; color: var(--px-text);
  background: var(--px-surface); border: 1px solid var(--px-line); border-radius: 999px; }
.px-search:focus { outline: 2px solid var(--px-accent-deep); outline-offset: 2px; border-color: var(--px-text); }
.px-help-sec { margin-top: 36px; }
.px-help-sec[hidden], .px-help-card[hidden] { display: none !important; }
.px-help-sec__h { margin-bottom: 14px; font: 800 22px/1.2 var(--px-display); letter-spacing: -.015em; }
a.px-card.px-help-card { padding: 20px 22px; color: var(--px-text); }
.px-help-card .px-h3 { font-size: 18px; }
.px-help-card p { font-size: 15px; line-height: 1.5; }
.px-help-none { margin-top: 24px; color: var(--px-muted); }

@media (max-width: 1080px) {
  /* Una columna que NO crece con el contenido: con `1fr` a secas, una tabla
     ancha del artículo estiraba la columna (y el índice) más allá del móvil. */
  .px-doc { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .px-posts, .px-dl-stores, .px-help-list, .px-prose .px-cards { grid-template-columns: 1fr; }
  /* En móvil la lista del blog es larga: la foto se queda en franja. */
  .px-post__media { aspect-ratio: 21 / 8; }
  .px-verify__card { padding: 32px 20px; }
  .px-store-badge img { height: 48px; }
}

/* Un artículo que empieza por su primer H2 no arrastra el hueco de sección. */
.px-prose > h2:first-child { margin-top: 0; }

/* ═══ 70-audiences.css ═══ */
/* 70-audiences — ver app/web/site/src/README.md */

/* ═══ 71-audiences.css ═══ */
/* 71-audiences — portadas por audiencia: jugadores (/jugadores), vecinos
   (/propietarios), administradores (/administradores), kit de normas y la
   portada de reserva. Marcado: workers/seo-worker/src/site/audience.js.
   Solo tokens --px-* (o color-mix sobre ellos): el acento cambia por sitio. */

/* Hero partido: texto a la izquierda y la app en un móvil a la derecha, sin
   perder la foto de fondo. */
.px-hero--split .px-hero__in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 56px; align-items: center; }
.px-hero--split .px-proof { margin-top: 40px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.px-aud-device { max-width: 300px; width: 100%; }
.px-hero .px-stores__note { color: var(--px-on-dark-muted); }

/* Lista vertical con icono o número: pasos y funciones al lado de los móviles. */
.px-vsteps { list-style: none; display: grid; gap: 14px; counter-reset: pxv; }
.px-vsteps li { display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: start; padding: 18px 20px; background: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-radius); }
.px-vsteps .px-card__icon { margin: 0; }
.px-vsteps .px-h3 { font-size: 19px; margin-bottom: 4px; }
.px-vsteps p { color: var(--px-muted); font-size: 16px; }
.px-vsteps--num li { counter-increment: pxv; }
.px-vsteps--num li::before { content: '0' counter(pxv); width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--px-ink); color: var(--px-accent); font: 800 15px/1 var(--px-mono); }
.px-section--sand .px-vsteps li { background: var(--px-surface); }
.px-card__icon svg { width: 22px; height: 22px; }

/* Móviles de las portadas: tres capturas escalonadas. */
.px-aud-shots .px-phone__frame img { width: 100%; height: auto; }

/* Pilar con bloque de cabecera y tarjetas dentro. */
.px-aud-pillar { padding: 0; align-items: center; }
.px-aud-pillar .px-head-block { margin-bottom: 28px; }
.px-aud-pillar .px-h2 { margin: 14px 0 16px; }
.px-aud-paths .px-card { display: flex; flex-direction: column; }
.px-aud-paths .px-card p { margin-bottom: 20px; }
.px-aud-paths .px-btn { margin-top: auto; align-self: flex-start; }

/* Distintivo y nota. */
.px-pill { display: inline-block; padding: 7px 14px; border-radius: 999px; background: color-mix(in srgb, var(--px-accent) 22%, transparent); color: var(--px-hl); font-weight: 800; font-size: 14px; letter-spacing: .02em; }
.px-aud-note { margin-top: 14px; font-size: 14px; color: var(--px-muted); }
.px-section--ink .px-aud-note { color: var(--px-on-dark-muted); }
.px-aud-pillar .px-cta-row { margin-top: 26px; }

/* La pregunta de la banda oscura, como H2. */
.px-aud-turn { margin-top: 16px; }

/* Puertas de salida (plantilla de normas, planes). */
.px-aud-door { display: flex; flex-direction: column; gap: 10px; }
.px-aud-door .px-link-arrow { margin-top: auto; padding-top: 8px; color: var(--px-hl); font-weight: 700; text-decoration: none; }
.px-aud-single { grid-template-columns: minmax(0, 780px); }

/* Banda final con foto: las tiendas debajo de los botones. */
.px-aud-band .px-cta-row { margin-top: 28px; }
.px-aud-band .px-lead { margin-bottom: 4px; }

/* Pasos de cuatro. */
.px-steps--4 { grid-template-columns: repeat(4, 1fr); }

/* Kit de normas. */
.px-aud-warning { max-width: 900px; border-left-color: var(--px-accent-deep); }
.px-aud-warning .px-h3, .px-aud-license .px-h3 { display: block; margin-bottom: 6px; }
.px-template {
  background: var(--px-ink); color: var(--px-on-dark); border-radius: var(--px-radius); padding: 26px;
  white-space: pre-wrap; overflow-wrap: anywhere; font: 13.5px/1.6 var(--px-mono);
  max-height: 760px; overflow: auto; margin-bottom: 24px;
}
.px-aud-license { max-width: 900px; }

/* Portada de reserva: directorio y blog. */
.px-aud-dir { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; }
.px-aud-dir .px-h3 { margin-bottom: 14px; }
.px-aud-cities { margin-top: 28px; color: var(--px-muted); font-size: 15px; }
.px-aud-cities a { color: var(--px-hl); font-weight: 700; }
.px-aud-more { margin-top: 24px; }
.px-aud-more .px-link-arrow { color: var(--px-hl); font-weight: 700; text-decoration: none; }
.px-tile h3.px-tile__t { color: var(--px-white); }

@media (max-width: 1080px) {
  .px-hero--split .px-hero__in { grid-template-columns: 1fr; gap: 40px; }
  .px-aud-device { max-width: 260px; }
  .px-steps--4 { grid-template-columns: repeat(2, 1fr); }
  .px-aud-dir { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .px-steps--4 { grid-template-columns: 1fr; }
  .px-vsteps li { grid-template-columns: 40px 1fr; gap: 14px; padding: 16px; }
  .px-aud-device { max-width: 220px; }
  .px-template { padding: 18px; font-size: 12.5px; }
  /* Rótulos largos (FR) en botones a todo el ancho: que partan línea en vez de salirse. */
  .px-hero .px-btn, .px-aud-band .px-btn { white-space: normal; text-align: center; line-height: 1.25; padding-top: 10px; padding-bottom: 10px; }
}