/** * PlayPalabras — Estilos de la landing (plantilla template-landing.php). * * Todo scopeado bajo .pp-landing, con variables propias para NO pisar los * tokens --pp-* del tema. El modo oscuro llega por [data-theme="dark"], que * el script anti-parpadeo de inc/enqueue.php siempre deja escrito en * (light u dark), así que no hace falta duplicar con prefers-color-scheme. * * Orden del archivo: * 1. Tokens * 2. Primitivas (wrap, section, títulos, botones) * 3. Componentes por sección, en el mismo orden que la plantilla * 4. Barra fija de CTA * * @package PlayPalabras */ /* ============================================================ 1. TOKENS ============================================================ */ .pp-landing { --pp-accent: #7c5cfc; --pp-accent-strong: #6d51de; --pp-accent-2: #0fa87a; --pp-bg: #ffffff; --pp-surface: #f7f8fa; --pp-surface-2: #eef0f3; --pp-fg: #0a0a0a; --pp-fg-soft: #2b2f36; --pp-muted: #646b76; --pp-border: #e6e8ec; --pp-border-strong: #d6d9df; --pp-radius-sm: 8px; --pp-radius: 14px; --pp-radius-lg: 22px; --pp-radius-pill: 999px; --pp-shadow-1: 0 1px 2px rgba(15, 18, 28, .06), 0 6px 18px rgba(15, 18, 28, .05); --pp-shadow-2: 0 10px 30px rgba(15, 18, 28, .08), 0 2px 8px rgba(15, 18, 28, .05); --pp-shadow-cta: 0 6px 20px rgba(124, 92, 252, .35); --pp-grad: linear-gradient(135deg, var(--pp-accent) 0%, var(--pp-accent-2) 100%); --pp-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; --pp-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Alto de la barra fija de CTA — se reserva como padding del
. */ --pp-bar-h: 0px; } [data-theme="dark"] .pp-landing { --pp-bg: #0b0c0f; --pp-surface: #131519; --pp-surface-2: #1b1e24; --pp-fg: #f3f4f6; --pp-fg-soft: #d6d9df; --pp-muted: #9aa1ad; --pp-border: #262a31; --pp-border-strong: #343943; --pp-shadow-1: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 18px rgba(0, 0, 0, .35); --pp-shadow-2: 0 10px 30px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .4); } /* ============================================================ 2. PRIMITIVAS ============================================================ */ .pp-landing, .pp-landing * { box-sizing: border-box; } .pp-landing { width: 100%; margin: 0; padding-bottom: var(--pp-bar-h); font-family: var(--pp-font); color: var(--pp-fg); background: var(--pp-bg); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .pp-landing a { color: var(--pp-accent); text-decoration: none; } .pp-landing a:hover { text-decoration: underline; } .pp-landing img { max-width: 100%; display: block; } .pp-landing h1, .pp-landing h2, .pp-landing h3 { margin: 0; line-height: 1.15; letter-spacing: -.02em; font-weight: 800; text-wrap: balance; } .pp-landing p { margin: 0; } .pp-landing [id] { scroll-margin-top: 90px; } .pp-landing .wrap { max-width: 1080px; margin: 0 auto; padding: 0 clamp(18px, 5vw, 40px); } .pp-landing .wrap--narrow { max-width: 820px; } .pp-landing .section { padding: clamp(52px, 7vw, 88px) 0; } .pp-landing .section--gray { background: var(--pp-surface); } .pp-landing .eyebrow { display: inline-block; margin: 0 0 14px; padding: 6px 12px; color: var(--pp-accent); background: color-mix(in srgb, var(--pp-accent) 8%, transparent); font-weight: 700; font-size: 12.5px; letter-spacing: .09em; text-transform: uppercase; border-radius: var(--pp-radius-pill); } .pp-landing .section-title { font-size: clamp(26px, 3.8vw, 40px); margin: 0 0 12px; } .pp-landing .section-sub { color: var(--pp-muted); font-size: clamp(16px, 2vw, 18.5px); max-width: 58ch; margin: 0 0 clamp(28px, 4vw, 44px); } .pp-landing .center { text-align: center; } .pp-landing .center .section-sub { margin-inline: auto; } .pp-landing .center .section-title { margin-inline: auto; max-width: 22ch; } /* Botones ---------------------------------------------------- */ .pp-landing .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 26px; border: 2px solid transparent; border-radius: 12px; font-family: inherit; font-weight: 700; font-size: 16px; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; } .pp-landing .btn:hover { text-decoration: none; } .pp-landing .btn--primary { background: var(--pp-grad); color: #fff; box-shadow: var(--pp-shadow-cta); } .pp-landing .btn--secondary { background: var(--pp-bg); color: var(--pp-fg); border-color: var(--pp-border-strong); } .pp-landing .btn--lg { padding: 17px 32px; font-size: 17.5px; } .pp-landing .btn--block { display: flex; width: 100%; } .pp-landing .btn-row { display: flex; flex-wrap: wrap; gap: 12px; } .pp-landing .fineprint { margin: 14px 0 0; color: var(--pp-muted); font-size: 14px; } .pp-landing :focus-visible { outline: 3px solid var(--pp-accent); outline-offset: 3px; border-radius: 6px; } @media (prefers-reduced-motion: no-preference) { .pp-landing { scroll-behavior: smooth; } .pp-landing .btn { transition: transform .15s ease, box-shadow .15s ease; } .pp-landing .btn:hover { transform: translateY(-1px); } .pp-landing .btn--primary:hover { box-shadow: 0 10px 26px rgba(124, 92, 252, .45); } } /* ============================================================ 3.1 HERO ============================================================ */ .pp-landing .hero { padding: clamp(36px, 6vw, 72px) 0 clamp(40px, 6vw, 64px); background: radial-gradient(ellipse 80% 60% at 10% 0%, rgba(124, 92, 252, .12), transparent 60%), radial-gradient(ellipse 60% 60% at 90% 10%, rgba(15, 168, 122, .1), transparent 60%), var(--pp-bg); } .pp-landing .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: center; } .pp-landing .hero h1 { font-size: clamp(31px, 5vw, 52px); margin: 0 0 16px; max-width: 16ch; } .pp-landing .hero__lede { font-size: clamp(16.5px, 2vw, 20px); color: var(--pp-fg-soft); max-width: 44ch; margin: 0 0 26px; } .pp-landing .trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; color: var(--pp-muted); font-size: 14.5px; } .pp-landing .trust li { display: inline-flex; align-items: center; gap: 8px; list-style: none; } .pp-landing .trust svg { flex: none; color: var(--pp-accent-2); } .pp-landing .trust ul, .pp-landing ul.trust { padding: 0; margin: 22px 0 0; } @media (max-width: 880px) { .pp-landing .hero-grid { grid-template-columns: 1fr; gap: 30px; } .pp-landing .hero h1 { max-width: 100%; } } /* Flashcard interactiva -------------------------------------- */ .pp-landing .card-demo { position: relative; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 420px; min-height: 292px; margin-inline: auto; padding: 44px 26px 34px; background: linear-gradient(160deg, #faf9ff 0%, #ffffff 55%, #f4faff 100%); border: 1px solid var(--pp-border); border-radius: var(--pp-radius-lg); box-shadow: var(--pp-shadow-2); font-family: inherit; color: inherit; text-align: center; cursor: pointer; } [data-theme="dark"] .pp-landing .card-demo { background: linear-gradient(160deg, #16151f 0%, #131519 55%, #101820 100%); } .pp-landing .card-demo__top { position: absolute; top: 16px; left: 22px; right: 22px; display: flex; align-items: center; justify-content: space-between; color: var(--pp-muted); font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } /* * Las caras y sus hijos son (van dentro de un