/* JesuFit Landing — hoja de estilos pública. Todo color de marca se toma de variables CSS (--jf-*), generadas dinámicamente desde los valores guardados en el admin (JesuFit Landing → Colores). No hardcodear colores de marca nuevos acá: si hace falta un tono más, se agrega como variable. */ /* * El fondo oscuro se pinta en .jfl-landing (nuestro propio contenedor), NO en * — depender de body permitía que el wrapper propio del theme (que * pinta su propio blanco encima) lo tapara. .jfl-landing se estira a todo el * ancho del viewport con el truco de "full-bleed" (100vw + margen negativo), * así queda por encima de cualquier contenedor centrado del theme sin * necesitar tocar el theme ni ganar guerras de especificidad. */ .jfl-landing { --jf-bg-start: #121020; --jf-bg-start-rgb: 18, 16, 32; --jf-bg-end: #0b0915; --jf-bg-end-rgb: 11, 9, 21; --jf-magenta: #ff00b8; --jf-magenta-rgb: 255, 0, 184; --jf-magenta-light: #ff66dc; --jf-violet: #7a2cff; --jf-violet-rgb: 122, 44, 255; --jf-text: #f5f5f7; --jf-text-muted: #c8c7d4; position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: linear-gradient(180deg, var(--jf-bg-start) 0%, var(--jf-bg-end) 100%) !important; overflow-x: hidden; } .jfl-landing-inner { max-width: 1100px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; overflow-wrap: break-word; } .jfl-prose { max-width: 640px; } .jfl-landing *, .jfl-landing *::before, .jfl-landing *::after { box-sizing: border-box; } .jfl-landing img { max-width: 100%; height: auto; } .jfl-section { color: var(--jf-text); padding: 40px 20px; } /* Alineación editable por sección (Colores → cada pestaña tiene su propio selector "Alineación"). Centra títulos, párrafos, botones e imágenes; las filas de listas (pasos, checks, íconos) se resetean a la izquierda porque se leen mejor así aunque el resto de la sección esté centrado. */ .jfl-section--center { text-align: center; } .jfl-section--center .jfl-prose { margin-left: auto; margin-right: auto; } .jfl-section--center .jfl-tick-item, .jfl-section--center .jfl-icon-item, .jfl-section--center .jfl-step, .jfl-section--center .jfl-plan-includes li, .jfl-section--center .jfl-plan-comparison-item { text-align: left; } .jfl-eyebrow { margin: 0 0 8px; font-size: 12px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; color: var(--jf-magenta-light); } .jfl-h1 { margin: 0 0 12px; font-size: 24px; line-height: 1.2; color: #ffffff; } .jfl-intro { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: var(--jf-text-muted); } .jfl-highlight { background: linear-gradient(135deg, rgba(var(--jf-magenta-rgb), 0.14), rgba(var(--jf-violet-rgb), 0.14)); padding: 16px; border-radius: 16px; margin-bottom: 18px; } .jfl-highlight-label { margin: 0 0 6px; font-size: 13px; font-weight: bold; text-transform: uppercase; color: var(--jf-magenta-light); } .jfl-highlight-text { margin: 0; font-size: 18px; line-height: 1.5; font-weight: bold; color: #ffffff; } .jfl-step { display: flex; gap: 12px; margin-bottom: 14px; } .jfl-step-num { min-width: 30px; height: 30px; border-radius: 50%; background: var(--jf-magenta); display: flex; align-items: center; justify-content: center; font-weight: bold; color: #ffffff; } .jfl-step-text { margin: 3px 0 0; font-size: 15px; line-height: 1.5; color: var(--jf-text-muted); } .jfl-quote { border-left: 4px solid var(--jf-magenta); padding: 14px; border-radius: 12px; } .jfl-quote-text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--jf-text); } /* ─── Hero ───────────────────────────────────────────────────────────────── */ .jfl-hero-content { position: relative; z-index: 1; } .jfl-hero-title { font-size: 28px; } .jfl-hero-tagline { margin: 0 0 14px; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--jf-magenta-light); } .jfl-hero--has-image { position: relative; min-height: 360px; display: flex; flex-direction: column; justify-content: flex-end; background-size: cover; background-position: center; overflow: hidden; } .jfl-hero--has-image::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--jf-bg-start-rgb), .55) 0%, rgba(var(--jf-bg-end-rgb), .92) 100%); } /* ─── Botón principal ────────────────────────────────────────────────────── */ .jfl-btn { display: inline-block; margin-top: 6px; padding: 16px 30px; border-radius: 999px; background: linear-gradient(135deg, var(--jf-magenta), var(--jf-violet)); color: #ffffff; font-size: 14px; font-weight: 800; letter-spacing: .5px; text-align: center; text-decoration: none; box-shadow: 0 8px 24px rgba(var(--jf-magenta-rgb), .35); } /* ─── Prueba social: frases y galería ────────────────────────────────────── */ .jfl-phrase-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 18px; } .jfl-phrase-card { background: linear-gradient(135deg, rgba(var(--jf-magenta-rgb), .14), rgba(var(--jf-violet-rgb), .14)); border-radius: 16px; padding: 18px; font-size: 15px; font-weight: 700; line-height: 1.4; color: #ffffff; text-align: center; } .jfl-gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 18px; } .jfl-gallery-item { border-radius: 14px; overflow: hidden; aspect-ratio: 3 / 4; } .jfl-gallery-item img { display: block; width: 100%; height: 100%; object-fit: cover; } /* ─── Qué es JesuFit: pilares ────────────────────────────────────────────── */ .jfl-pillars-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 8px; } .jfl-pillar-card { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; padding: 20px; } .jfl-pillar-icon { margin-bottom: 10px; font-size: 32px; line-height: 1; } .jfl-pillar-title { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: #ffffff; } .jfl-pillar-desc { margin: 0; font-size: 14px; line-height: 1.5; color: var(--jf-text-muted); } /* ─── Subtítulo intermedio (dentro de una sección) ───────────────────────── */ .jfl-subhead { margin: 4px 0 12px; font-size: 18px; font-weight: 700; color: var(--jf-magenta-light); } /* ─── Pasos numerados con título (Método) ────────────────────────────────── */ .jfl-step-title { margin: 2px 0 4px; font-size: 16px; font-weight: 700; color: #ffffff; } /* ─── Listas con marca (check / cruz) ────────────────────────────────────── */ .jfl-tick-list { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 8px 0 18px; } .jfl-tick-item { display: flex; align-items: flex-start; gap: 10px; } .jfl-tick-mark { display: flex; align-items: center; justify-content: center; min-width: 22px; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: bold; flex-shrink: 0; margin-top: 1px; } .jfl-tick-mark--yes { background: var(--jf-magenta); color: #ffffff; } .jfl-tick-mark--no { background: rgba(255, 255, 255, .1); color: var(--jf-text-muted); } .jfl-tick-text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--jf-text-muted); } /* ─── Listas con ícono variable (Misión Booty & Shape: lo que incluye) ──── */ .jfl-icon-list { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 8px 0 18px; } .jfl-icon-item { display: flex; align-items: center; gap: 12px; } .jfl-icon-item-mark { display: flex; align-items: center; justify-content: center; min-width: 40px; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .06); font-size: 19px; flex-shrink: 0; } .jfl-icon-item-text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--jf-text-muted); } /* ─── Quién está detrás (fundadora) ──────────────────────────────────────── */ .jfl-founder-layout { display: flex; flex-direction: column; gap: 20px; } .jfl-founder-photo { width: 180px; margin: 0 auto; border-radius: 20px; overflow: hidden; flex-shrink: 0; } .jfl-founder-photo img { display: block; width: 100%; height: auto; } .jfl-founder-body { flex: 1; min-width: 0; } /* ─── Transformaciones: testimonios ──────────────────────────────────────── */ .jfl-testimonial-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 18px; } .jfl-testimonial-card { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; padding: 20px; } .jfl-testimonial-image { width: 100%; border-radius: 12px; overflow: hidden; margin-bottom: 14px; } .jfl-testimonial-image img { display: block; width: 100%; height: auto; } .jfl-testimonial-text { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: var(--jf-text); } .jfl-testimonial-name { margin: 0; font-size: 15px; font-weight: 700; color: #ffffff; } .jfl-testimonial-context { margin: 2px 0 0; font-size: 13px; color: var(--jf-magenta-light); } /* ─── Planes online ──────────────────────────────────────────────────────── */ /* En móvil, las 3 tarjetas se deslizan de costado (swipe) en vez de apilarse una debajo de la otra — cada tarjeta ya incluye su propia comparativa (.jfl-plan-comparison), así todo el contenido de un plan se ve junto, en una sola tarjeta. En escritorio se muestran las 3 en grilla y la comparativa aparece aparte, como tabla clásica. */ .jfl-plans-grid { display: flex; gap: 16px; margin-top: 18px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 8px; scrollbar-width: none; } .jfl-plans-grid::-webkit-scrollbar { display: none; } .jfl-plan-card { display: flex; flex-direction: column; flex: 0 0 85%; scroll-snap-align: center; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); border-radius: 20px; padding: 24px; } .jfl-plan-name { margin: 0 0 4px; font-size: 20px; font-weight: 800; color: #ffffff; } .jfl-plan-tagline { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--jf-magenta-light); } .jfl-plan-description { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--jf-text-muted); } .jfl-plan-includes { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; } .jfl-plan-includes li { font-size: 14px; line-height: 1.4; color: var(--jf-text-muted); padding-left: 20px; position: relative; } .jfl-plan-includes li::before { content: '✓'; position: absolute; left: 0; color: var(--jf-magenta); font-weight: bold; } .jfl-plan-focus { margin: 0 0 16px; font-size: 13px; font-style: italic; color: var(--jf-text-muted); } /* Comparativa dentro de la tarjeta — solo visible en móvil (ver media query). */ .jfl-plan-comparison { margin: 0 0 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .08); } .jfl-plan-comparison-title { margin: 0 0 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--jf-text-muted); } .jfl-plan-comparison-list { display: flex; flex-direction: column; gap: 8px; } .jfl-plan-comparison-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--jf-text-muted); } .jfl-plan-comparison-item .jfl-tick-mark { width: 18px; height: 18px; min-width: 18px; font-size: 10px; } .jfl-plan-card .jfl-btn { margin-top: auto; width: 100%; } .jfl-plan-footnote { margin: 20px 0 0; font-size: 13px; line-height: 1.5; color: var(--jf-text-muted); } /* ─── Tabla comparativa clásica (solo escritorio — ver .jfl-plan-comparison para la versión de móvil, integrada en cada tarjeta) ───────────────────── */ .jfl-comparison-wrap { display: none; margin-top: 24px; } .jfl-comparison-table { width: 100%; border-collapse: collapse; } .jfl-comparison-table thead th { font-size: 13px; font-weight: 700; color: #ffffff; padding: 10px 8px; text-align: center; border-bottom: 2px solid rgba(255, 255, 255, .12); } .jfl-comparison-table tbody td { padding: 10px 8px; text-align: center; font-size: 14px; border-bottom: 1px solid rgba(255, 255, 255, .08); } .jfl-comparison-feature { text-align: left !important; color: var(--jf-text-muted); } .jfl-cmp-yes { color: var(--jf-magenta); font-weight: bold; } .jfl-cmp-no { color: rgba(255, 255, 255, .25); } /* ─── Preguntas frecuentes (acordeón) ────────────────────────────────────── */ .jfl-faq-list { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; } .jfl-faq-item { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; overflow: hidden; } .jfl-faq-question { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 16px 18px; background: none; border: none; cursor: pointer; font-size: 15px; font-weight: 700; color: #ffffff; text-align: left; } .jfl-faq-icon { flex-shrink: 0; font-size: 18px; font-weight: 400; color: var(--jf-magenta-light); transition: transform .2s ease; } .jfl-faq-item--open .jfl-faq-icon { transform: rotate(45deg); } .jfl-faq-answer { padding: 0 18px 16px; font-size: 14px; line-height: 1.6; color: var(--jf-text-muted); } .jfl-faq-answer p { margin: 0; } /* ─── CTA final ───────────────────────────────────────────────────────────── */ .jfl-final-cta-image { border-radius: 16px; margin-bottom: 20px; } .jfl-final-cta-emotional { margin: 0 0 18px; font-size: 18px; line-height: 1.5; font-weight: bold; color: #ffffff; } @media (min-width: 640px) { .jfl-hero-title { font-size: 36px; } } @media (min-width: 700px) { .jfl-phrase-grid { grid-template-columns: repeat(3, 1fr); } .jfl-gallery-grid { grid-template-columns: repeat(4, 1fr); } .jfl-pillars-grid { grid-template-columns: repeat(3, 1fr); } .jfl-tick-list { grid-template-columns: repeat(2, 1fr); } .jfl-icon-list { grid-template-columns: repeat(2, 1fr); } .jfl-testimonial-grid { grid-template-columns: repeat(2, 1fr); } /* Escritorio: las tarjetas vuelven a grilla fija (ya no hace falta deslizar) y la comparativa pasa de estar dentro de cada tarjeta a ser una tabla aparte. */ .jfl-plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); overflow-x: visible; } .jfl-plan-comparison { display: none; } .jfl-comparison-wrap { display: block; } .jfl-hero--has-image { min-height: 460px; } .jfl-founder-layout { flex-direction: row; align-items: flex-start; } /* Con alineación centrada, la foto pasa arriba y el texto queda centrado debajo (en vez de la foto al costado), para un resultado prolijo. */ .jfl-section--center .jfl-founder-layout { flex-direction: column; align-items: center; } } @media (max-width: 480px) { .jfl-section { padding: 28px 16px; } .jfl-btn { display: block; width: 100%; } }