/* * Mercados Pro Suite — hoja de estilos de marca. * * El contenido público (Planes, Suscripciones, Liga, Concurso, Asesor, * Pagos, Referidos, avisos legales) usa exactamente los mismos tokens que * el Radar Institucional (`Modules/Dashboard/Legacy/assets/css/ * dashboard-mercados-pro.css`, plugin "Dashboard Mercados Pro" v10.1.36): * mismo tipo de letra, mismo tamaño, misma paleta y el mismo botón en * píldora, para que ningún shortcode del plugin se vea fuera de marca * frente al Radar. `.mps-admin` (pantallas de wp-admin) usa su propia * paleta clara: wp-admin no se reskina, es el panel interno del sitio, no * cara al público. */ :root { --mps-color-black: #0b0b0c; --mps-color-yellow: #f4c10f; --mps-color-white: #ffffff; --mps-font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Paleta pública, idéntica a la del Radar Institucional (--sab-*). */ --mps-bg: #050505; --mps-card: #111111; --mps-gold: #ffd400; --mps-border: rgba(255, 212, 0, .55); --mps-text: #ffffff; --mps-muted: #d7d7d7; --mps-ok: #8cff86; --mps-bad: #ff8a8a; --mps-ui-font: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --mps-ui-size: 13px; --mps-ui-line: 1.42; } .mps-admin, .mps-status { font-family: var(--mps-font-family); } /* Franja de la oferta de fundador (Subscriptions\FounderBanner): en flujo * normal justo después de , no fija, para no chocar con la cabecera * de ningún tema. Mismo dorado/negro que el resto de la marca pública. */ .mps-founder-banner { box-sizing: border-box; width: 100%; padding: 10px 16px; background: var(--mps-gold) !important; text-align: center; } .mps-founder-banner p { margin: 0; color: #050505 !important; font-family: var(--mps-ui-font) !important; font-size: var(--mps-ui-size) !important; font-weight: 700 !important; line-height: 1.5 !important; } .mps-founder-banner a { color: #050505 !important; font-weight: 900 !important; text-decoration: underline !important; } .mps-admin h1, .mps-admin h2 { font-weight: 700; } .mps-status { display: inline-block; padding: 4px 10px; background: var(--mps-bg); color: var(--mps-text); border-left: 4px solid var(--mps-gold); border-radius: 2px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; } /* --------------------------------------------------------------------- * Contenido público: Planes, Suscripciones, Liga, Concurso, Asesor, * Pagos, Referidos, condiciones legales, Radar (solo sus avisos de "sin * acceso" — el contenido del Radar en sí trae su propio CSS heredado). * ------------------------------------------------------------------- */ .mps-radar, .mps-referidos, .mps-liga, .mps-liga-resultados, .mps-concurso, .mps-concurso-resultados, .mps-asesor, .mps-pagos, .mps-planes, .mps-sales-page, .mps-legal-notice { box-sizing: border-box; max-width: 1220px; margin: 0 auto 22px; padding: 28px; background: var(--mps-bg) !important; border: 1px solid var(--mps-border); border-radius: 18px; color: var(--mps-text) !important; font-family: var(--mps-ui-font) !important; font-size: var(--mps-ui-size) !important; line-height: var(--mps-ui-line) !important; } .mps-radar *, .mps-referidos *, .mps-liga *, .mps-liga-resultados *, .mps-concurso *, .mps-concurso-resultados *, .mps-asesor *, .mps-pagos *, .mps-planes *, .mps-sales-page *, .mps-legal-notice * { box-sizing: border-box; font-family: var(--mps-ui-font) !important; } /* Título principal de cada shortcode: mismo tratamiento que el titular del * Radar Institucional (`.sab-dmp-hero h1`). */ .mps-radar > h1, .mps-radar > h2, .mps-radar > h3, .mps-referidos > h3, .mps-liga > h3, .mps-liga-resultados > h3, .mps-concurso > h3, .mps-concurso-resultados > h3, .mps-asesor > h3, .mps-pagos > h3, .mps-planes > h3, .mps-sales-page > h1, .mps-sales-page > h2 { margin: 0 0 14px !important; color: var(--mps-text) !important; font-size: clamp(26px, 3.2vw, 40px) !important; line-height: 1.08 !important; font-weight: 900 !important; letter-spacing: -.03em !important; } /* Subtítulos y títulos internos (tarjetas de planes, ediciones, bloques): * misma familia y tamaño que el resto, en negrita, como hacen los títulos * internos del Radar (`.sab-dmp-panel h2,h3,h4...`). */ .mps-plan h3, .mps-liga-historico h4, .mps-liga-resultados h4, .mps-concurso-resultados h4, .mps-asesor-resultado h3, .mps-asesor-resultado h4, .mps-planes-group-title, .mps-sales-page h3, .mps-sales-page h4 { color: var(--mps-text) !important; font-size: var(--mps-ui-size) !important; font-weight: 800 !important; line-height: 1.3 !important; letter-spacing: 0 !important; text-transform: none !important; margin-top: 0 !important; } .mps-radar p, .mps-referidos p, .mps-liga p, .mps-liga-resultados p, .mps-concurso p, .mps-concurso-resultados p, .mps-asesor p, .mps-pagos p, .mps-planes p, .mps-sales-page p, .mps-legal-notice p { color: var(--mps-muted) !important; font-size: var(--mps-ui-size) !important; line-height: 1.6 !important; font-weight: 500 !important; } /* Precio de cada plan: mismo dorado que el resto de cifras/acentos * destacados del Radar, para que llame la atención sobre la descripción. */ .mps-plan-price { color: var(--mps-gold) !important; font-size: 17px !important; font-weight: 900 !important; letter-spacing: -.01em; margin: 4px 0 10px !important; } .mps-radar a, .mps-referidos a, .mps-liga a, .mps-liga-resultados a, .mps-concurso a, .mps-concurso-resultados a, .mps-asesor a, .mps-pagos a, .mps-planes a, .mps-sales-page a { color: var(--mps-gold) !important; } /* Tarjetas internas (plan, bote de la Liga, ediciones pasadas, resultado * del simulador, detalle de cartera del histórico...): mismo tratamiento de * "card" que usa el Radar para sus bloques (`.sab-dmp-missing`, `.sab-inst-card`). */ .mps-plan, .mps-liga-bote, .mps-liga-edicion, .mps-historico-card, .mps-asesor-resultado { background: var(--mps-card) !important; border: 1px solid rgba(255, 212, 0, .34); border-radius: 16px; padding: 18px; margin: 0 0 16px; } .mps-planes { padding-top: 18px; } .mps-planes-group + .mps-planes-group { margin-top: 32px; } .mps-planes-group-title { font-size: 15px !important; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 14px !important; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 212, 0, .28); } .mps-planes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; align-items: start; } /* Franja de confianza (✔ actualización diaria · ✔ acceso inmediato...): * texto pequeño y centrado, igual tono que el resto de microcopy. */ .mps-plans-trust { text-align: center; color: var(--mps-muted) !important; font-size: 12px !important; font-weight: 600 !important; margin: 0 0 4px !important; } /* Tarjeta destacada (una única por página, ver PlanCatalog::isFeatured()): * mismo dorado que el resto de acentos, con un halo sutil para que * sobresalga del resto sin salirse del sistema de color de la marca. */ .mps-plan--featured { border-color: var(--mps-gold) !important; box-shadow: 0 0 0 1px var(--mps-gold), 0 12px 30px rgba(255, 212, 0, .12); position: relative; } .mps-plan-badge { display: inline-flex; align-items: center; background: var(--mps-gold) !important; color: #050505 !important; border-radius: 999px; padding: 4px 12px; margin-bottom: 10px; font-size: 11px !important; font-weight: 900 !important; letter-spacing: .04em; text-transform: uppercase; } /* Beneficios en viñetas de cada tarjeta: check verde, igual criterio que el * resto de indicadores positivos de la marca (--mps-ok). */ .mps-plan-benefits { list-style: none; margin: 0 0 14px; padding: 0; } .mps-plan-benefits li { position: relative; padding-left: 22px; margin-bottom: 8px; color: var(--mps-muted) !important; font-size: 13px !important; line-height: 1.5 !important; font-weight: 500 !important; } .mps-plan-benefits li::before { content: '✔'; position: absolute; left: 0; color: var(--mps-ok); font-weight: 900; } /* Nota de pago a plazos bajo la tarjeta anual (radar_annual_quarterly): * secundaria (no compite con el botón "Suscribirse" de arriba) pero en una * caja con borde discontinuo dorado, no un simple párrafo apagado — tiene * que notarse que hay una segunda forma de pagar, no solo intuirse. */ .mps-plan-installments-note { margin: 12px 0 0 !important; padding: 10px 12px !important; background: rgba(255, 212, 0, .06) !important; border: 1px dashed rgba(255, 212, 0, .4); border-radius: 10px; font-size: 12px !important; } /* Aviso legal: caja con borde dorado, como `.sab-inst-note` en el Radar. */ .mps-legal-notice { background: rgba(255, 212, 0, .055) !important; padding: 18px 20px; } .mps-legal-notice p { margin: 0 0 10px; font-size: 12px !important; } .mps-legal-notice p:last-child { margin-bottom: 0; } /* Insignia "Activo": mismo verde que usa el Radar para fortaleza muy * fuerte (`--sab-very-strong` / `--sab-f-very-strong: #8cff7a`, aquí * --mps-ok). */ .mps-plan-active { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-weight: 600; } .mps-plan-active-badge { display: inline-flex; align-items: center; background: var(--mps-ok) !important; color: #052e12 !important; border-radius: 999px; padding: 4px 12px; margin-right: 8px; font-size: 11px !important; font-weight: 900 !important; letter-spacing: .04em; text-transform: uppercase; } /* Avisos de resultado (retiradas de Referidos...): borde de color según * estado, reutilizando el mismo verde/rojo que ya usa el Radar para * indicar subida/bajada (`.idx-change--up` / `.idx-change--down`). */ .mps-referidos-aviso { border-left: 3px solid var(--mps-gold); background: var(--mps-card) !important; border-radius: 10px; padding: 12px 16px !important; color: var(--mps-text) !important; margin: 0 0 16px; } .mps-referidos-aviso--success { border-left-color: var(--mps-ok); } .mps-referidos-aviso--error { border-left-color: var(--mps-bad); } /* Botones: misma píldora dorada que las pestañas y el botón de refresco * del Radar (`.sab-dmp-tab`, `.sab-inst-refresh`). Un único patrón para * todos los botones y envíos de formulario del plugin, dentro y fuera de * Mi Cuenta de WooCommerce. */ .mps-radar .button, .mps-referidos .button, .mps-liga .button, .mps-liga-resultados .button, .mps-concurso .button, .mps-concurso-resultados .button, .mps-asesor .button, .mps-pagos .button, .mps-planes .button, .mps-sales-page .button, .mps-radar input[type="submit"], .mps-referidos input[type="submit"], .mps-liga input[type="submit"], .mps-liga-resultados input[type="submit"], .mps-concurso input[type="submit"], .mps-concurso-resultados input[type="submit"], .mps-asesor input[type="submit"], .mps-pagos input[type="submit"], .mps-planes input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; appearance: none; border: 1px solid var(--mps-gold) !important; border-radius: 999px !important; padding: 11px 20px !important; background: #111 !important; color: var(--mps-text) !important; font-family: var(--mps-ui-font) !important; font-size: var(--mps-ui-size) !important; font-weight: 900 !important; line-height: 1 !important; text-decoration: none !important; text-transform: none !important; cursor: pointer; box-shadow: none !important; transition: filter .15s ease, transform .15s ease; } .mps-radar .button:hover, .mps-referidos .button:hover, .mps-liga .button:hover, .mps-liga-resultados .button:hover, .mps-concurso .button:hover, .mps-concurso-resultados .button:hover, .mps-asesor .button:hover, .mps-pagos .button:hover, .mps-planes .button:hover, .mps-sales-page .button:hover, .mps-radar input[type="submit"]:hover, .mps-referidos input[type="submit"]:hover, .mps-liga input[type="submit"]:hover, .mps-liga-resultados input[type="submit"]:hover, .mps-concurso input[type="submit"]:hover, .mps-concurso-resultados input[type="submit"]:hover, .mps-asesor input[type="submit"]:hover, .mps-pagos input[type="submit"]:hover, .mps-planes input[type="submit"]:hover, .mps-radar .button-primary, .mps-referidos .button-primary, .mps-liga .button-primary, .mps-liga-resultados .button-primary, .mps-concurso .button-primary, .mps-concurso-resultados .button-primary, .mps-asesor .button-primary, .mps-pagos .button-primary, .mps-planes .button-primary, .mps-sales-page .button-primary, .mps-radar input[type="submit"].button-primary, .mps-referidos input[type="submit"].button-primary, .mps-liga input[type="submit"].button-primary, .mps-liga-resultados input[type="submit"].button-primary, .mps-concurso input[type="submit"].button-primary, .mps-concurso-resultados input[type="submit"].button-primary, .mps-asesor input[type="submit"].button-primary, .mps-pagos input[type="submit"].button-primary, .mps-planes input[type="submit"].button-primary { background: var(--mps-gold) !important; border-color: var(--mps-gold) !important; color: #050505 !important; } /* CTA "Entrar a " cuando el plan ya está activo: mismo verde que * la insignia "Activo", para distinguirlo del botón dorado de "Suscribirse". */ .mps-plan-enter { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--mps-ok) !important; border-radius: 999px !important; padding: 11px 20px !important; margin: 6px 6px 0 0; background: rgba(140, 255, 134, .08) !important; color: var(--mps-ok) !important; font-family: var(--mps-ui-font) !important; font-size: var(--mps-ui-size) !important; font-weight: 900 !important; text-decoration: none !important; } .mps-plan-enter:hover, .mps-plan-enter:focus { background: var(--mps-ok) !important; border-color: var(--mps-ok) !important; color: #052e12 !important; } /* Campos de formulario (cartera de la Liga/Concurso, simulador del * Asesor...): misma tarjeta oscura que el resto. */ .mps-radar input[type="text"], .mps-radar input[type="number"], .mps-referidos input[type="text"], .mps-referidos input[type="number"], .mps-liga input[type="text"], .mps-liga input[type="number"], .mps-concurso input[type="text"], .mps-concurso input[type="number"], .mps-asesor input[type="text"], .mps-asesor input[type="number"], .mps-pagos input[type="text"], .mps-pagos input[type="number"], .mps-radar select, .mps-referidos select, .mps-liga select, .mps-liga-resultados select, .mps-concurso select, .mps-concurso-resultados select, .mps-asesor select, .mps-pagos select { background: var(--mps-card) !important; border: 1px solid rgba(255, 255, 255, .18) !important; border-radius: 10px !important; padding: 10px 12px !important; color: var(--mps-text) !important; font-family: var(--mps-ui-font) !important; font-size: var(--mps-ui-size) !important; } .mps-radar input:focus, .mps-referidos input:focus, .mps-liga input:focus, .mps-concurso input:focus, .mps-asesor input:focus, .mps-pagos input:focus, .mps-radar select:focus, .mps-referidos select:focus, .mps-liga select:focus, .mps-liga-resultados select:focus, .mps-concurso select:focus, .mps-concurso-resultados select:focus, .mps-asesor select:focus, .mps-pagos select:focus { outline: none !important; border-color: var(--mps-gold) !important; } /* Tablas (historial de retiradas, ediciones pasadas...): cabecera dorada * en mayúsculas, igual que `.sab-inst-table` en el Radar. */ .mps-radar table, .mps-referidos table, .mps-liga table, .mps-liga-resultados table, .mps-concurso table, .mps-concurso-resultados table, .mps-asesor table, .mps-pagos table, .mps-planes table { width: 100%; border-collapse: collapse; background: #080808 !important; } .mps-radar th, .mps-referidos th, .mps-liga th, .mps-liga-resultados th, .mps-concurso th, .mps-concurso-resultados th, .mps-asesor th, .mps-pagos th, .mps-planes th { color: var(--mps-gold) !important; font-weight: 900 !important; text-transform: uppercase; text-align: left; padding: 11px 13px !important; border-bottom: 1px solid rgba(255, 212, 0, .28) !important; } .mps-radar td, .mps-referidos td, .mps-liga td, .mps-liga-resultados td, .mps-concurso td, .mps-concurso-resultados td, .mps-asesor td, .mps-pagos td, .mps-planes td { padding: 11px 13px !important; border-bottom: 1px solid rgba(255, 255, 255, .1) !important; font-weight: 600 !important; } @media (max-width: 782px) { .mps-radar, .mps-referidos, .mps-liga, .mps-liga-resultados, .mps-concurso, .mps-concurso-resultados, .mps-asesor, .mps-pagos, .mps-planes, .mps-sales-page, .mps-legal-notice { padding: 18px 14px; border-radius: 14px; } .mps-planes-grid { grid-template-columns: 1fr; } .mps-sales-solution-grid, .mps-sales-forwho-grid { grid-template-columns: 1fr; } .mps-sales-sticky-cta { display: flex; } } /* * Marca de agua trazable (Frontend\Watermark) y fricción anti-copia. * No es una medida de seguridad: es disuasión y trazabilidad ante * capturas de pantalla (ver el docblock de Watermark.php). */ .mps-watermarked { position: relative; } .mps-watermark-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-repeat: repeat; pointer-events: none; z-index: 999; } .mps-watermark-content { position: relative; } .mps-protected { -webkit-user-select: none; -moz-user-select: none; user-select: none; } /* * Página de ventas (sergioavilabolsa.com/planes): copy de marketing pegado * directamente como contenido de la página en el editor de WordPress (no es * un shortcode del plugin, ver docs/marketing/pagina-planes.html) — pero * usa `.mps-sales-page` para heredar la misma paleta/tipografía/botones que * el resto de la marca (ver el grupo de selectores compartido más arriba). * Vive en la misma página que `[mercados_pro_planes]`, así que esta hoja ya * está cargada cuando se pinta. */ .mps-sales-page { display: block; } .mps-sales-section { margin: 40px 0; } .mps-sales-section:first-child { margin-top: 0; } .mps-sales-hero { text-align: center; padding-bottom: 8px; } .mps-sales-hero p { max-width: 720px; margin-left: auto; margin-right: auto; font-size: 15px !important; } .mps-sales-hero-trust { color: var(--mps-muted) !important; font-size: 12px !important; font-weight: 600 !important; } .mps-sales-media { width: 100%; max-width: 900px; margin: 24px auto; border: 1px solid rgba(255, 212, 0, .34); border-radius: 16px; overflow: hidden; background: var(--mps-card); } .mps-sales-media img { display: block; width: 100%; height: auto; } .mps-sales-media figcaption { padding: 10px 16px; color: var(--mps-muted) !important; font-size: 12px !important; text-align: center; border-top: 1px solid rgba(255, 255, 255, .08); } .mps-sales-solution-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 20px; } .mps-sales-card { background: var(--mps-card) !important; border: 1px solid rgba(255, 212, 0, .34); border-radius: 16px; padding: 18px; } .mps-sales-card ul { margin: 10px 0 0; padding: 0; list-style: none; } .mps-sales-card li { position: relative; padding-left: 18px; margin-bottom: 6px; font-size: 13px !important; color: var(--mps-muted) !important; } .mps-sales-card li::before { content: '•'; position: absolute; left: 0; color: var(--mps-gold); } .mps-sales-forwho-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; } .mps-sales-forwho-yes, .mps-sales-forwho-no { border-radius: 16px; padding: 18px; } .mps-sales-forwho-yes { background: rgba(140, 255, 134, .06) !important; border: 1px solid rgba(140, 255, 134, .3); } .mps-sales-forwho-no { background: rgba(255, 138, 138, .06) !important; border: 1px solid rgba(255, 138, 138, .3); } .mps-sales-forwho-yes ul, .mps-sales-forwho-no ul { list-style: none; margin: 0; padding: 0; } .mps-sales-forwho-yes li, .mps-sales-forwho-no li { margin-bottom: 8px; font-size: 13px !important; font-weight: 500; } .mps-sales-objection { background: var(--mps-card) !important; border-left: 3px solid var(--mps-gold); border-radius: 10px; padding: 16px 20px; margin-bottom: 12px; } .mps-sales-credentials { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; } .mps-sales-credentials-photo { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; border: 2px solid var(--mps-gold); flex-shrink: 0; } .mps-sales-credentials-body { flex: 1; min-width: 240px; } .mps-sales-faq-item { border-bottom: 1px solid rgba(255, 255, 255, .1); padding: 14px 0; } .mps-sales-faq-item:first-child { padding-top: 0; } .mps-sales-faq-item p { margin: 6px 0 0 !important; } .mps-sales-closing { text-align: center; } /* Botón fijo inferior en móvil desde la sección 3 en adelante (ver * docs/marketing/pagina-planes.html): oculto por defecto, el pequeño script * inline de esa misma página añade `.is-visible` con un IntersectionObserver * cuando se pasa el hero. No es un componente del plugin: vive en el propio * contenido pegado en el editor, esta hoja solo le da forma. */ .mps-sales-sticky-cta { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998; padding: 10px 16px; background: var(--mps-bg) !important; border-top: 1px solid var(--mps-border); text-align: center; transform: translateY(100%); transition: transform .25s ease; } .mps-sales-sticky-cta.is-visible { transform: translateY(0); } .mps-sales-sticky-cta .button { width: 100%; max-width: 420px; } @media (min-width: 783px) { .mps-sales-sticky-cta { display: none !important; } }