/* ══════════════════════════════════════════════════════════════════════════
   pro.bookrgo.app — hoja del sitio de venta.
   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/).
   Al tocar este fichero, sube PRO_CSS_VERSION (pro-site/chrome.js): se sirve
   con caché larga.
   ══════════════════════════════════════════════════════════════════════════ */

@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;
  --px-lime: #c8f04a;
  --px-lime-deep: #a6d22a;
  --px-green: #1f6b4f;
  --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;
}

/* ── 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-green);
}
.px-kicker::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--px-lime-deep); }
.px-section--ink .px-kicker, .px-hero .px-kicker, .px-band .px-kicker { color: var(--px-lime); }
.px-section--ink .px-kicker::before, .px-hero .px-kicker::before, .px-band .px-kicker::before { background: var(--px-lime); }

.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-green); }
.px-section--ink .px-hl, .px-hero .px-hl { color: var(--px-lime); }
.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-green);
  --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-lime); color: var(--px-ink) !important; }
.px-btn--primary:hover { background: #d6f86d; }
.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-lime-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-lime); padding: 4px 6px; border-radius: 5px; margin-left: 2px;
}
.px-logo--inv { color: #fff !important; }
.px-logo--inv .px-logo__pro { background: var(--px-lime); 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-green) !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-green) !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; }
.px-hero__media img, .px-hero__media video { 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-lime); }

/* ── 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-lime); }
.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-green); }

/* ── 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-lime); 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-lime); 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-green); }

/* ── 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-lime); }
.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-green); 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-green); 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-green); }
.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-lime); }
.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-lime); 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-lime-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-lime-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-green); 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-green); 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-green); }
.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-green); }
.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-lime); 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: rgba(200,240,74,.14); color: var(--px-lime); 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-lime); 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-lime); }
.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-lime); 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-lime); 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-lime); 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-lime); 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-lime); }

.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-lime); 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-lime); }
.px-flow__n--branch i { transform: rotate(0); background: rgba(200,240,74,.18); }
.px-flow__n--charge i { background: var(--px-lime); 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; }
}