/* ─── Modelo ÚNICO de vista previa + paywall ────────────────────────────────── Fuente de verdad compartida por Driver Tacho, Lex, Docs, Tax y RRHH. Regla de producto (2026-06-05): · PRE-PAGO → vista previa AMPLIA (se ven los KPIs/cabecera), contenido NÍTIDO (sin difuminado). El popup de prepago aparece como OVERLAY centrado ENCIMA de la parte baja de la vista previa, con degradado. · POST-PAGO → contenido completo en ventana fija (~25% del alto) con scroll. El overlay lo posiciona window.DsPaywall.overlayCard() envolviendo la vista previa en un .ds-pw-stage (contexto relativo); aquí va todo el estilo. Se carga AL FINAL del de cada landing para vencer reglas previas. ─────────────────────────────────────────────────────────────────────────── */ /* ── Estados de la ventana de vista previa ─────────────────────────────────── */ /* Bloqueado (pre-pago): ventana AMPLIA (se ven los KPIs) sin scroll. min-height = max-height → ventana de altura FIJA: así un escrito CORTO (p.ej. "solicitud de copia de datos" en Docs) ocupa el mismo alto que un informe largo de Tacho/Lex. Sin esto, la caja crecía solo hasta el contenido y los escritos breves se veían "muy bajos". */ .ds-preview-locked { position: relative; min-height: clamp(420px, 62vh, 720px) !important; max-height: clamp(420px, 62vh, 720px) !important; overflow: hidden !important; } /* Desbloqueado (post-pago): MISMA altura fija que la vista previa (.ds-preview-locked) con scroll lateral. Mismo clamp para que coincidan. */ .ds-preview-unlocked { min-height: clamp(420px, 62vh, 720px) !important; max-height: clamp(420px, 62vh, 720px) !important; overflow-y: auto !important; overflow-x: hidden; scrollbar-gutter: stable; } /* Anula CUALQUIER difuminado (blur 3px) o máscara (mask 50%, Tax) de los modelos viejos: el contenido visible va siempre nítido. */ .ds-preview-locked, .ds-preview-unlocked, .ds-preview-locked > *, .ds-preview-unlocked > * { filter: none !important; -webkit-mask: none !important; mask: none !important; } /* Stage: contexto de posición que envuelve SOLO la vista previa para que el overlay se superponga exactamente sobre ella (lo crea DsPaywall.overlayCard). */ .ds-pw-stage { position: relative; } /* ── Popup de prepago — OVERLAY centrado sobre la parte baja de la vista previa. Agrupa las clases de TODAS las herramientas para un look idéntico. ──────── */ .dtf-paywall, .driver-lex-paywall, .driver-docs-paywall, .drrhh-paywall, .dtax-ai-paywall { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; transform: none !important; width: auto !important; height: 72% !important; display: flex !important; align-items: flex-end; justify-content: center; margin: 0 !important; padding: 18px 16px !important; box-sizing: border-box; z-index: 6; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .55) 42%, rgba(255, 255, 255, .95) 100%) !important; } .dtf-paywall[hidden], .driver-lex-paywall[hidden], .driver-docs-paywall[hidden], .drrhh-paywall[hidden], .dtax-ai-paywall[hidden] { display: none !important; } .dtf-paywall-card, .driver-lex-paywall-card, .driver-docs-paywall-card, .drrhh-paywall-card, .dtax-ai-paywall-card { margin: 0 auto; padding: 22px 24px; max-width: 520px; width: min(520px, 100%); background: #fff; border: 1px solid #0b4f9f; border-radius: 14px; text-align: center; box-shadow: 0 16px 40px rgba(11, 79, 159, .22); pointer-events: auto; } .dtf-paywall-card h3, .driver-lex-paywall-card h3, .driver-docs-paywall-card h3, .drrhh-paywall-card h3, .dtax-ai-paywall-card h3, .dtax-ai-paywall-card .dtax-ai-paywall-title { margin: 0 0 8px; color: #0b4f9f; font-weight: 700; } .dtf-paywall-card p, .driver-lex-paywall-card p, .driver-docs-paywall-card p, .drrhh-paywall-card p, .dtax-ai-paywall-card p { margin: 0 0 12px; color: #1a2540; line-height: 1.5; } .dtf-paywall-price, .driver-lex-paywall-price, .driver-docs-paywall-price, .drrhh-paywall-price { margin: 12px 0 4px !important; padding: 8px 12px; background: #eff6ff; border-radius: 8px; color: #0b4f9f; font-weight: 700; } .dtf-paywall-vat, .driver-lex-paywall-vat, .driver-docs-paywall-vat, .drrhh-paywall-vat { margin: 0 0 16px !important; color: #56627a; font-size: .82rem; font-style: italic; text-align: center; } .dtax-ai-paywall-card .dtax-ai-paywall-actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; margin-top: 12px; } /* Móvil: el overlay puede ocupar algo más de alto para que la tarjeta no se apriete contra el contenido. */ @media (max-width: 560px) { .dtf-paywall, .driver-lex-paywall, .driver-docs-paywall, .drrhh-paywall, .dtax-ai-paywall { height: 82% !important; padding: 14px 10px !important; } .dtf-paywall-card, .driver-lex-paywall-card, .driver-docs-paywall-card, .drrhh-paywall-card, .dtax-ai-paywall-card { padding: 18px 16px; } }