/* ==========================================================================
   Recursos Worship — RW Library · 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.
   --------------------------------------------------------------------------
   1. Base de la página (tokens, logo de RW Library en la barra)
   2. Hero (muro de previews + prueba social)
   3. Funciona con + tira
   4. Biblioteca VIP (8 categorías)
   5. Superficie, intro y explorador
   6. Lo que obtiene tu iglesia (mosaicos)
   7. Fondos en alta definición
   8. Equipa a tu iglesia
   9. Precios
   10. FAQ
   11. Responsive
   12. Movimiento reducido
   ========================================================================== */

/* 1. Base ------------------------------------------------------------------ */
/* El morado de la home se mantiene; el índigo profundo y el degradado del titular
   salen del logo de RW Library (#150665 y #0000fe → #db00fe). */
.lib-page {
  --accent-deep: #150665;
  --strip-h: 240px;                       /* alto de la tira */
  --car-h: clamp(220px, 19vw, 300px);     /* alto de las tarjetas del explorador */
}
.lib-page .text-gradient {
  background-image: linear-gradient(100deg, #2b17e6 0%, #3d00fe 28%, #8a00fe 55%, #db00fe 78%, #2b17e6 100%);
}
/* Sobre el hero negro el azul puro del logo pierde contraste: misma familia, más luminosa */
:root[data-theme="dark"] .lib-page .text-gradient {
  background-image: linear-gradient(100deg, #6f63ff 0%, #7a52ff 28%, #b25cff 55%, #e66bff 78%, #6f63ff 100%);
}
/* Franja oscura del shell y tarjeta de «Ayuda» del menú, en el índigo de RW Library */
.lib-page .hero-shell { background: #080320; }
.lib-page .rm-card { background: var(--accent-deep); }
.lib-page .rm-card:hover { background: #1d0a85; }
.lib-page section[id], .lib-page [id="precios"] { scroll-margin-top: 96px; }

/* Logo de RW Library en la barra (232×55). Colapsado se recorta hasta su símbolo (32/55 del alto). */
.lib-page .rw-nav { --logo-h: 30px; --logo-w: 127px; --logo-mark-w: 19px; --logo-mark-h: 32px; }

/* Avatares superpuestos (logos de iglesias y retratos de clientes de la oferta) */
.lib-avatars { display: inline-flex; flex: none; }
.lib-avatars img { width: 32px; height: 32px; border-radius: 999px; object-fit: cover; background: #fff; outline: 2px solid var(--panel); }
.lib-avatars img + img { margin-left: -9px; }
.lib-avatars.is-logos img { object-fit: contain; padding: 2px; }

/* 2. Hero ------------------------------------------------------------------ */
.lib-badge { gap: 9px; padding-left: 6px; }
.lib-badge img { width: 24px; height: 24px; flex: none; }
.lib-badge .chip { margin-left: 2px; }
.lib-hero .hero-title { max-width: 18ch; }
.lib-proof { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 28px; margin-top: 4px; font-size: 14px; color: var(--muted); }
.lib-proof li { display: inline-flex; align-items: center; gap: 10px; text-align: left; }
.lib-proof strong { color: var(--ink); font-weight: 600; }

/* 3. Funciona con + tira --------------------------------------------------- */
.lib-ew { width: 22px !important; }
/* Tarjetas de ancho variable: todas a la misma altura, el ancho sale del formato */
.lib-strip .s-card { width: calc(var(--strip-h) * var(--ar, 1.7778)); }
.lib-strip .s-media { height: var(--strip-h); background: #120a2e; }
.lib-strip .s-card.is-tall .s-meta span { display: none; }

/* 4. Biblioteca VIP -------------------------------------------------------- */
.lib-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 18px); }
.lib-cat {
  display: flex; flex-direction: column;
  padding: 10px; border-radius: var(--r-xl);
  background: var(--surface);
  transition: background-color var(--t-ui) var(--ease-ui);
}
.lib-cat:hover { background: var(--surface-2); }
.lib-cat-media { position: relative; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; background: #120a2e; }
.lib-cat-media img, .lib-cat-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-quint), opacity 0.4s var(--ease-quint); }
.lib-cat-media .is-hover { opacity: 0; transition: none; } /* video al instante, sin zoom (pedido) */
/* El lower third ocupa poco del cuadro 16:9: se acerca un poco hacia su caja */
.lib-cat[data-media="titulos"] .lib-cat-media img { scale: 1.08; transform-origin: 50% 78%; }
.lib-cat.is-playing .lib-cat-media .is-hover { opacity: 1; }
/* Minimovies: sin preview en la tienda → bloque de color con el icono */
.lib-cat-media.is-plain { display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-fg); }
.lib-cat-glyph { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 20px; background: var(--panel); }
.lib-cat-copy { display: grid; gap: 6px; padding: 18px 12px 14px; }
.lib-cat-num { font-size: clamp(34px, 3vw, 46px); font-weight: 650; line-height: 1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; color: var(--ink); }
.lib-cat-copy h3 { margin-top: 6px; font-size: 17px; font-weight: 620; letter-spacing: -0.015em; }
.lib-cat-copy p:last-child { color: var(--muted); font-size: 15px; line-height: 1.45; }

/* 5. Superficie, intro y explorador --------------------------------------- */
.lib-wordmark { width: auto; height: 30px; }
.lib-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: 14.5px; color: var(--muted); }
.lib-rating strong { color: var(--ink); font-weight: 600; }
.lib-rating .stars { margin-right: 4px; }
.lib-explorer-side { display: grid; gap: 22px; }
.lib-carousel .c-card { width: calc(var(--car-h) * var(--ar, 1.7778) + 20px); }
.lib-carousel .c-media { height: var(--car-h); aspect-ratio: auto; }
.lib-carousel .c-card.is-tall .c-meta span { display: none; }
.lib-carousel.is-entering { scroll-snap-type: none; }

/* 6. Lo que obtiene tu iglesia (mosaicos) ---------------------------------- */
.lib-gets .cat-mosaic[data-set="pantallas"] > div:first-child { grid-column: 1 / -1; }
.lib-gets .cat-mosaic[data-set="pantallas"] > div:first-child img { object-fit: cover; object-position: 50% 50%; }
.lib-gets .cat-mosaic[data-set="redes"] { grid-template-rows: 1fr; }

/* 7. Fondos en alta definición -------------------------------------------- */
.lib-hd { padding-top: var(--space-md); }
.lib-hd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 18px); margin-top: clamp(12px, 1.2vw, 18px); }
.lib-hd-card { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #0f0f12; }
.lib-hd-card video { width: 100%; height: 100%; object-fit: cover; }
.lib-hd-card .thumb-label { opacity: 1; transform: none; filter: none; }

/* 8. Equipa a tu iglesia --------------------------------------------------- */
.lib-equip { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.lib-equip .split-media { justify-self: center; width: min(100%, 460px); background: #111; }
.lib-equip .split-media img { aspect-ratio: 576 / 800; object-fit: cover; }

/* 9. Precios --------------------------------------------------------------- */
.lib-pricing .head { margin-bottom: 0; }
.lib-pricing .kicker b { font-size: 14px; }
.lib-billing { display: inline-flex; gap: 2px; margin-top: 10px; padding: 4px; border-radius: 999px; background: var(--fill); }
.lib-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); }
.lib-billing button:hover { color: var(--ink); }
.lib-billing button[aria-selected="true"] { background: var(--panel); color: var(--ink); }
.lib-billing .chip { height: 22px; padding: 0 8px; font-size: 11.5px; }
.lib-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 18px); margin-top: clamp(40px, 4.5vw, 64px); align-items: stretch; }
.lib-plan { position: relative; display: flex; flex-direction: column; gap: 20px; padding: clamp(24px, 2.4vw, 36px); border-radius: var(--r-xl); background: var(--surface); }
.lib-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; }
.lib-plan-chip { height: 26px; padding: 0 10px; font-size: 11.5px; letter-spacing: 0.04em; }
.lib-plan-products { display: flex; flex-wrap: wrap; gap: 8px; }
/* Los iconos de producto llevan índigo oscuro: van siempre sobre placas blancas (también en oscuro) */
.lib-plan-products a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; transition: background-color var(--t-ui); }
.lib-plan-products a:hover { background: #ececf2; }
.lib-plan-products img { width: 24px; height: 24px; }
.lib-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.lib-price s { font-size: 18px; font-weight: 500; color: var(--muted-2); }
.lib-price s:empty { display: none; }
.lib-price strong { font-size: clamp(48px, 4.4vw, 64px); font-weight: 650; line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.lib-price span { font-size: 16px; color: var(--muted); }
.lib-price.is-swap s, .lib-price.is-swap strong, .lib-billed.is-swap { animation: libSwap 0.5s var(--ease-quint); }
@keyframes libSwap { from { opacity: 0.2; filter: blur(6px); transform: translateY(6px); } to { opacity: 1; filter: none; transform: none; } }
.lib-billed { margin-top: -10px; font-size: 13.5px; color: var(--muted); }
.lib-plan-copy { color: var(--muted); font-size: 16px; line-height: 1.45; max-width: 36ch; }
.lib-plan .list-label { margin-bottom: 14px; }
.lib-feats { display: grid; gap: 10px; }
.lib-feats li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink-2); }
.lib-feats .ico { color: var(--accent-fg); }
.lib-plan > .btn { width: 100%; margin-top: auto; }
.lib-plan > .btn-ghost { background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2); }
.lib-plan > .btn-ghost:hover { background: var(--panel); box-shadow: inset 0 0 0 1px var(--ink); }
/* Plan destacado: índigo profundo de RW Library (el mismo del CTA final) */
.lib-plan.is-featured { background: var(--accent-deep); color: #fff; }
.lib-plan.is-featured .lib-plan-chip { background: var(--accent); color: #fff; }
.lib-plan.is-featured .lib-price s { color: rgba(255, 255, 255, 0.5); }
.lib-plan.is-featured .lib-price span, .lib-plan.is-featured .lib-billed, .lib-plan.is-featured .lib-plan-copy { color: rgba(255, 255, 255, 0.72); }
.lib-plan.is-featured .list-label, .lib-plan.is-featured .lib-feats li { color: #fff; }
.lib-plan.is-featured .lib-feats .ico { color: #c4b5fd; }
:root[data-theme="dark"] .lib-plan.is-featured { background: #1d0b7a; }

/* 10. FAQ ------------------------------------------------------------------ */
.lib-faq .acc-panel p + .lib-faq-list { margin-top: -14px; }
.lib-faq-list { display: grid; gap: 6px; padding: 0 56px 26px 0; color: var(--muted); font-size: 17px; line-height: 1.5; opacity: 0; filter: blur(4px); transition: opacity 0.4s var(--ease-quint), filter 0.4s var(--ease-quint); }
.lib-faq-list li { position: relative; padding-left: 18px; }
.lib-faq-list li::before { content: ""; position: absolute; left: 2px; top: 0.66em; width: 6px; height: 6px; border-radius: 99px; background: var(--accent-fg); }
.acc-item.is-open .lib-faq-list { opacity: 1; filter: none; transition-delay: 0.08s; }

/* 11. Responsive ----------------------------------------------------------- */
@media (max-width: 1200px) {
  .lib-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lib-plans { grid-template-columns: 1fr; max-width: 620px; }
}
@media (max-width: 900px) {
  .lib-page { --strip-h: 190px; --car-h: 230px; }
  .lib-explorer .explorer-head { gap: 22px; }
  .lib-equip { grid-template-columns: 1fr; }
  .lib-equip .split-media { width: min(100%, 420px); }
  .lib-hd-grid { grid-template-columns: 1fr 1fr; }
  .lib-hd-grid > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
  .lib-page .rw-nav { --logo-h: 26px; --logo-w: 110px; }
}
@media (max-width: 560px) {
  .lib-page { --car-h: 168px; }
  .lib-badge { font-size: 12.5px; }
  .lib-badge .chip { display: none; }
  .lib-proof { flex-direction: column; gap: 10px; font-size: 13px; }
  .lib-cats { gap: 10px; }
  .lib-cat { padding: 6px; border-radius: 22px; }
  .lib-cat-media { border-radius: 16px; }
  .lib-cat-copy { padding: 12px 6px 8px; gap: 4px; }
  .lib-cat-num { font-size: 30px; }
  .lib-cat-copy h3 { font-size: 15px; margin-top: 4px; }
  .lib-cat-copy p:last-child { font-size: 13.5px; }
  .lib-cat-glyph { width: 48px; height: 48px; border-radius: 14px; }
  .lib-hd-grid { grid-template-columns: 1fr; }
  .lib-wordmark { height: 24px; }
  .lib-billing button { padding: 0 14px; }
  .lib-faq-list { padding-right: 12px; }
}

/* 12. Movimiento reducido -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .lib-price.is-swap s, .lib-price.is-swap strong, .lib-billed.is-swap { animation: none !important; }
  .lib-carousel.is-in .c-card { animation: none !important; }
  .lib-faq-list { transition: none; }
}

/* Interfaz 2026 de RW Library (captura clara/oscura alternada como el logo).
   Se ancla arriba a la izquierda: nunca se recortan la barra superior ni la lateral «RW Media». */
.lib-page img.lib-ui { object-position: 0 0; }
.lib-page .showcase-shot:has(img.lib-ui) { background: var(--surface); }