/* ==========================================================================
   Recursos Worship — Plan RW VIP Básico · landing (2026)
   Se carga después de css/styles.css y css/nav.css (mismo sistema que la home);
   aquí solo va lo propio de esta página. Todo plano: sin sombras ni glows.
   Prefijo: pb- (plan básico).
   --------------------------------------------------------------------------
   1. Base de la página
   2. Selector de plan (Básico · Profesional · Director)
   3. Hero
   4. Franja oscura: un Básico por herramienta + tira
   5. Qué incluye (facturación + pestañas por producto)
   6. El plan Profesional los incluye todos (superficie que se expande)
   7. Funciones destacadas
   8. Tabla comparativa
   9. Responsive
   10. Movimiento reducido
   ========================================================================== */

/* 1. Base ------------------------------------------------------------------ */
.pb-page { --strip-h: 220px; }
.pb-page section[id] { scroll-margin-top: 96px; }
.pb-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 2. Selector de plan ------------------------------------------------------ */
/* Pill segmentado con enlaces a las tres páginas de planes; el actual lleva aria-current */
.pb-switch { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--fill); }
.pb-switch a { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--muted); white-space: nowrap; transition: background-color var(--t-ui), color var(--t-ui); }
.pb-switch a:hover { color: var(--ink); }
.pb-switch a[aria-current="page"] { background: var(--panel); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
:root[data-theme="dark"] .pb-hero .pb-switch a[aria-current="page"] { background: var(--surface-2); }

/* 3. Hero ------------------------------------------------------------------ */
/* Panel limpio, sin muro de imágenes: el material real va en la tira de abajo */
.pb-page .hero { min-height: clamp(640px, 86svh, 900px); }
.pb-hero .hero-title { max-width: 20ch; }
.pb-hero-price {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 12px;
  font-size: 16px; color: var(--muted);
}
.pb-hero-price strong { font-size: clamp(26px, 2.3vw, 32px); font-weight: 650; letter-spacing: -0.035em; color: var(--ink); font-variant-numeric: tabular-nums; }
.pb-hero-or { margin-right: 6px; color: var(--muted-2); }
.pb-hero-price .chip { height: 24px; margin-left: 6px; padding: 0 9px; font-size: 12px; vertical-align: 3px; }

/* 4. Franja oscura --------------------------------------------------------- */
.pb-works .works-list a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 4px; border-radius: 10px; transition: opacity var(--t-ui); }
.pb-works .works-list a:hover { opacity: 0.72; }
.pb-strip { margin-top: clamp(24px, 3vw, 48px); }
.pb-strip .s-card { width: calc(var(--strip-h) * var(--ar, 1.4)); }
.pb-strip .s-media { height: var(--strip-h); background: #0b0b10; }
.pb-strip .s-media img { object-position: left top; }
.pb-strip .s-media video { object-fit: cover; }

/* 5. Qué incluye ----------------------------------------------------------- */
.pb-include { padding-bottom: var(--space-lg); }
.pb-include .head { align-items: flex-end; }
.pb-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.pb-switch-sm a { height: 40px; }
.pb-billing { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--fill); }
.pb-billing button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--muted); transition: background-color var(--t-ui), color var(--t-ui); }
.pb-billing button:hover { color: var(--ink); }
.pb-billing button[aria-selected="true"] { background: var(--panel); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.pb-billing .chip { height: 22px; padding: 0 8px; font-size: 11.5px; }

/* Pestañas: tres tarjetas en una pista gris; la activa pasa a blanco */
.pb-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 5px; border-radius: 24px; background: var(--surface); }
.pb-tab {
  display: flex; align-items: center; gap: 14px; min-width: 0;
  padding: 14px 18px; border-radius: 20px; text-align: left;
  color: var(--muted);
  transition: background-color var(--t-ui), color var(--t-ui);
}
.pb-tab img { width: 36px; height: 36px; flex: none; opacity: 0.55; filter: grayscale(1); transition: opacity var(--t-ui), filter var(--t-ui); }
.pb-tab-copy { display: grid; gap: 2px; min-width: 0; }
.pb-tab-copy strong { font-size: 17px; font-weight: 620; letter-spacing: -0.015em; color: inherit; }
.pb-tab-copy small { font-size: 13.5px; color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-tab:hover { color: var(--ink); }
.pb-tab:hover img { opacity: 0.85; }
.pb-tab[aria-selected="true"] { background: var(--panel); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.pb-tab[aria-selected="true"] img { opacity: 1; filter: none; }
.pb-tab:focus-visible { outline-offset: -2px; border-radius: 20px; }

/* Panel: tarjeta del plan (izquierda) + detalle (derecha) */
.pb-panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(14px, 1.4vw, 22px); margin-top: clamp(14px, 1.4vw, 22px); }
.pb-panel[hidden] { display: none; }
.pb-panel:focus-visible { outline-offset: 6px; border-radius: var(--r-xl); }
.pb-panel.is-swap > * { animation: supportingReveal 0.6s var(--ease-quint) both; }
.pb-panel.is-swap > :nth-child(2) { animation-delay: 70ms; }

.pb-plan { display: flex; flex-direction: column; gap: 20px; padding: clamp(26px, 2.8vw, 40px); border-radius: var(--r-xl); background: var(--surface); align-self: start; }
.pb-plan-head { display: flex; align-items: center; gap: 14px; }
.pb-plan-head .product-ico { width: 44px; height: 44px; }
.pb-plan-sub { margin-top: 4px; font-size: 14px; color: var(--muted); }
.pb-trial { align-self: flex-start; }
.pb-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.pb-price s { font-size: 18px; font-weight: 500; color: var(--muted-2); }
.pb-price s:empty { display: none; }
.pb-price strong { font-size: clamp(52px, 5vw, 72px); font-weight: 650; line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.pb-price span { font-size: 16px; color: var(--muted); }
.pb-bill { margin-top: -10px; font-size: 14.5px; color: var(--muted); }
.pb-price.is-swap s, .pb-price.is-swap strong, .is-swap > b { animation: pbSwap 0.5s var(--ease-quint); }
@keyframes pbSwap { from { opacity: 0.2; filter: blur(6px); transform: translateY(6px); } to { opacity: 1; filter: none; transform: none; } }
.pb-plan-copy { font-size: 16.5px; line-height: 1.45; color: var(--ink-2); max-width: 40ch; }
.pb-plan > .btn { width: 100%; }
.pb-own { display: flex; align-items: flex-start; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.45; color: var(--muted); }
.pb-own .ico { margin-top: 1px; color: var(--accent-fg); }

.pb-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 1.4vw, 22px); align-content: start; }
.pb-detail-list { padding: clamp(24px, 2.4vw, 34px); border-radius: var(--r-xl); box-shadow: inset 0 0 0 1px var(--line); }
.pb-detail-list .list-label { margin-bottom: 16px; }
.pb-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.pb-feats li { display: flex; align-items: center; gap: 10px; font-size: 15.5px; line-height: 1.35; color: var(--ink-2); }
.pb-feats .ico { color: var(--accent-fg); }
/* «Todo en Plan Gratis» se despliega para ver qué incluye */
.pb-feat-free { grid-column: 1 / -1; display: block !important; }
.pb-feat-free summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; font-weight: 600; color: var(--ink); }
.pb-feat-free summary::-webkit-details-marker { display: none; }
.pb-feat-free summary::after { content: "Ver"; margin-left: 4px; padding: 2px 9px; border-radius: 999px; background: var(--fill); font-size: 12px; font-weight: 600; color: var(--muted); }
.pb-feat-free details[open] summary::after { content: "Ocultar"; }
.pb-feat-free p { margin: 10px 0 4px 28px; font-size: 14.5px; line-height: 1.5; color: var(--muted); max-width: 64ch; }

.pb-shot { margin: 0; height: clamp(220px, 20vw, 320px); border-radius: var(--r-xl); overflow: hidden; background: #0d0d10; }
.pb-shot img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }

.pb-up { display: grid; gap: 14px; padding: clamp(22px, 2.2vw, 30px); border-radius: var(--r-xl); background: var(--accent-soft); }
.pb-up-title { font-size: 14px; font-weight: 600; color: var(--accent-ink); }
.pb-up-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pb-up-list li { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--panel); font-size: 13.5px; font-weight: 560; color: var(--ink-2); }
.pb-up-list img { width: 18px; height: 18px; }

/* 6. El plan Profesional los incluye todos --------------------------------- */
.pb-pro { padding-top: 0; margin-top: calc(var(--space-md) * -0.25); }
.pb-pro-surface { background: var(--accent-deep); color: #fff; padding: clamp(36px, 5.6vw, 96px) clamp(22px, 4.4vw, 80px); }
.pb-pro-inner { max-width: 1320px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.pb-pro-copy { display: grid; gap: 22px; }
.pb-pro-kicker { font-size: 14px; font-weight: 600; color: #c4b5fd; }
.pb-pro .h2 { color: #fff; max-width: 16ch; }
.pb-pro-lead { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.45; color: rgba(255, 255, 255, 0.74); max-width: 46ch; }
.pb-pro-lead strong { color: #fff; font-weight: 600; }
.pb-pro .btn-row { margin-top: 6px; }
.pb-pro-side { display: grid; gap: 18px; }
.pb-pro-list { display: grid; gap: 8px; }
.pb-pro-list li { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.06); }
.pb-pro-list img { width: 32px; height: 32px; flex: none; }
.pb-pro-list span { display: grid; gap: 1px; min-width: 0; }
.pb-pro-list strong { font-size: 16px; font-weight: 620; letter-spacing: -0.01em; }
.pb-pro-list small { font-size: 13.5px; color: rgba(255, 255, 255, 0.62); }
.pb-math { display: grid; gap: 10px; padding: 18px 4px 0; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.pb-math-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 15px; color: rgba(255, 255, 255, 0.72); }
.pb-math-row s { font-size: 17px; color: rgba(255, 255, 255, 0.55); white-space: nowrap; }
.pb-math-row strong { font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, 0.72); white-space: nowrap; }
.pb-math-row strong b { font-size: clamp(26px, 2.4vw, 34px); font-weight: 650; letter-spacing: -0.04em; color: #fff; font-variant-numeric: tabular-nums; }
.pb-math-row b { font-weight: inherit; display: inline-block; }
.pb-math-row.is-pro span { color: #fff; font-weight: 560; }
.pb-math-note { font-size: 12.5px; color: rgba(255, 255, 255, 0.5); }

/* 7. Funciones destacadas -------------------------------------------------- */
.pb-features { padding-bottom: var(--space-lg); }
.pb-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 18px); }
.pb-tile { display: flex; flex-direction: column; min-height: 560px; border-radius: var(--r-xl); background: var(--surface); overflow: hidden; isolation: isolate; transition: background-color 0.3s var(--ease-ui); }
.pb-tile:hover { background: var(--surface-2); }
.pb-tile-copy { display: grid; gap: 12px; padding: clamp(24px, 2.4vw, 36px); }
.pb-tile-row { display: flex; align-items: center; gap: 12px; margin-bottom: 2px; }
.pb-tile-copy p { color: var(--muted); font-size: 16.5px; line-height: 1.45; max-width: 38ch; }
.pb-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.pb-tags li { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 999px; background: var(--panel); font-size: 13px; font-weight: 560; color: var(--ink-2); }
.pb-tile-media { flex: 1 1 auto; min-height: 280px; margin: 4px clamp(14px, 1.4vw, 20px) clamp(14px, 1.4vw, 20px); border-radius: 20px; overflow: hidden; }
/* Mosaico de recursos reales (2 × 2) */
.pb-mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; }
.pb-mosaic > div, .pb-titles > div { position: relative; overflow: hidden; border-radius: 14px; background: var(--media-bg); }
.pb-mosaic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-quint), opacity 0.7s var(--ease-quint); }
.pb-tile:hover .pb-mosaic img { transform: scale(1.04); }
.pb-mosaic span, .pb-titles span { position: absolute; left: 8px; bottom: 8px; z-index: 1; height: 24px; display: inline-flex; align-items: center; padding: 0 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: #141414; font-size: 11.5px; font-weight: 600; }
/* Captura de la app recortada como máscara */
.pb-tile-shot { position: relative; background: #0d0d10; }
.pb-tile-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% top; transition: transform 1s var(--ease-quint), opacity 0.7s var(--ease-quint); }
.pb-tile:hover .pb-tile-shot img { transform: scale(1.03); }
/* Dos títulos animados reales de RW Titler */
.pb-titles { display: grid; grid-template-rows: 1fr 1fr; gap: 8px; }
.pb-titles > div { background: #0f0f12; }
.pb-titles video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* 8. Tabla comparativa ----------------------------------------------------- */
.pb-compare .head { margin-bottom: clamp(32px, 3.6vw, 52px); }
.pb-seg { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 2px; margin-top: 8px; padding: 4px; border-radius: 999px; background: var(--fill); }
.pb-seg button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--muted); transition: background-color var(--t-ui), color var(--t-ui); }
.pb-seg button img { width: 18px; height: 18px; opacity: 0.6; filter: grayscale(1); transition: opacity var(--t-ui), filter var(--t-ui); }
.pb-seg button:hover { color: var(--ink); }
.pb-seg button[aria-selected="true"] { background: var(--panel); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.pb-seg button[aria-selected="true"] img { opacity: 1; filter: none; }

.pb-cmp { padding: clamp(6px, 1vw, 14px); border-radius: var(--r-xl); background: var(--panel); }
.pb-cmp:focus-visible { outline-offset: 4px; }
.pb-cmp.is-swap tbody { animation: supportingReveal 0.55s var(--ease-quint) both; }
.pb-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 15px; }
.pb-table caption { text-align: left; }
.pb-table th, .pb-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; line-height: 1.35; }
.pb-table tbody th { text-align: left; font-weight: 500; color: var(--ink-2); }
.pb-table col.pb-col-feat { width: 34%; }
.pb-table thead th { padding: 22px 16px 20px; vertical-align: bottom; border-bottom-color: var(--line-2); }
.pb-table thead th:first-child { text-align: left; vertical-align: bottom; }
.pb-th { display: grid; justify-items: center; gap: 6px; }
.pb-th-tag { height: 22px; padding: 0 9px; font-size: 11.5px; }
.pb-th-name { font-size: clamp(18px, 1.5vw, 22px); font-weight: 650; letter-spacing: -0.025em; color: var(--ink); }
.pb-th-price { font-size: 13.5px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.pb-th-price b { font-size: clamp(22px, 2vw, 28px); font-weight: 650; letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; display: inline-block; }
.pb-th-bill { font-size: 12.5px; font-weight: 500; color: var(--muted-2); }
.pb-th .btn { margin-top: 8px; }
.pb-th-lead { display: grid; gap: 6px; }
.pb-th-lead strong { font-size: 15px; font-weight: 600; color: var(--ink); }
.pb-th-lead span { font-size: 13.5px; font-weight: 500; color: var(--muted); max-width: 26ch; }
.pb-table .pb-group > * { padding: 26px 16px 10px; text-align: left; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); }
.pb-table tbody:last-child tr:last-child > * { border-bottom: 0; }
.pb-th-unit { display: none; font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--muted); }
/* Columna del plan actual resaltada (banda morada suave, continua de arriba abajo) */
.pb-table .is-current { background: var(--accent-soft); }
.pb-table thead .is-current { border-radius: 20px 20px 0 0; }
.pb-table tbody:last-child tr:last-child .is-current { border-radius: 0 0 20px 20px; }
.pb-yes { display: inline-block; vertical-align: middle; color: var(--accent-fg); }
.pb-no { color: var(--muted-2); }
.pb-val { font-weight: 560; color: var(--ink); }
.pb-short { display: none; }
.pb-cmp-foot { margin-top: 18px; text-align: center; font-size: 13.5px; color: var(--muted); }

/* 9. Responsive ------------------------------------------------------------ */
@media (max-width: 1200px) {
  .pb-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb-bento .pb-tile:last-child { grid-column: 1 / -1; min-height: 0; }
  .pb-bento .pb-tile:last-child .pb-titles { grid-template-columns: 1fr 1fr; grid-template-rows: none; aspect-ratio: 32 / 9; min-height: 0; }
  .pb-tab-copy small { display: none; }
}
@media (max-width: 1000px) {
  .pb-panel { grid-template-columns: 1fr; }
  .pb-pro-inner { grid-template-columns: 1fr; }
  .pb-pro .h2 { max-width: 20ch; }
}
@media (max-width: 900px) {
  .pb-page { --strip-h: 180px; }
  .pb-include .head { align-items: flex-start; }
  .pb-controls { justify-content: flex-start; }
  .pb-bento { grid-template-columns: 1fr; }
  .pb-tile { min-height: 0; }
  .pb-tile-media { aspect-ratio: 16 / 10; min-height: 0; }
  .pb-bento .pb-tile:last-child .pb-titles { aspect-ratio: auto; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .pb-titles { aspect-ratio: 16 / 18 !important; }
  .pb-table th, .pb-table td { padding: 12px 10px; }
}
@media (max-width: 680px) {
  .pb-tabs { gap: 3px; padding: 4px; border-radius: 20px; }
  .pb-tab { flex-direction: column; justify-content: center; gap: 8px; padding: 12px 6px; border-radius: 16px; text-align: center; }
  .pb-tab img { width: 30px; height: 30px; }
  .pb-tab-copy strong { font-size: 14px; }
  .pb-feats { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pb-hero-price { font-size: 14.5px; gap: 4px 10px; }
  .pb-hero-price strong { font-size: 24px; }
  .pb-switch a { height: 34px; padding: 0 13px; font-size: 13.5px; }
  .pb-controls { width: 100%; }
  .pb-billing button { padding: 0 14px; }
  .pb-plan { padding: 24px 20px; }
  .pb-detail-list { padding: 22px 20px; }
  .pb-shot { height: 200px; }
  .pb-pro-surface { padding: 40px 20px; }
  .pb-pro-list li { padding: 11px 14px; }
  .pb-math-row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .pb-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; border-radius: 20px; }
  .pb-seg button { justify-content: center; height: 38px; padding: 0 6px; border-radius: 16px; font-size: 12.5px; gap: 5px; white-space: nowrap; }
  .pb-seg button img { width: 16px; height: 16px; }
  /* Tabla a 375 px: cuatro columnas compactas, etiquetas cortas en la cabecera */
  .pb-cmp { padding: 4px; border-radius: 22px; }
  .pb-table { font-size: 13px; }
  .pb-table col.pb-col-feat { width: 37%; }
  .pb-table th, .pb-table td { padding: 11px 5px; }
  .pb-table tbody th { padding-left: 10px; }
  .pb-table thead th { padding: 16px 4px 14px; }
  .pb-table thead th:first-child { padding-left: 10px; }
  .pb-table .pb-group > * { padding: 20px 5px 8px; font-size: 11px; }
  .pb-table .pb-group th { padding-left: 10px; }
  .pb-th-name { font-size: 14.5px; }
  .pb-th-price b { font-size: 15px; }
  .pb-th-per, .pb-th-bill, .pb-th-tag, .pb-th-lead span { display: none; }
  .pb-th-unit { display: block; }
  .pb-th .btn { height: 30px; padding: 0 10px; font-size: 12px; }
  .pb-val { font-size: 12.5px; }
  .pb-long { display: none; }
  .pb-short { display: inline; }
  /* El nombre largo sigue disponible para lectores de pantalla */
  .pb-th-name .pb-long { display: inline; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pb-yes.ico-sm { width: 16px; height: 16px; }
  .pb-table thead .is-current { border-radius: 14px 14px 0 0; }
  .pb-table tbody:last-child tr:last-child .is-current { border-radius: 0 0 14px 14px; }
}

/* 10. Movimiento reducido -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pb-panel.is-swap > *, .pb-cmp.is-swap tbody, .pb-price.is-swap s, .pb-price.is-swap strong, .is-swap > b { animation: none !important; }
}