/* ========================================================================== PREPOXI TOOLKIT · v1.0 Design System CSS — derivado del canvas "Prepoxi LP" (Figma: Proposal OB Prepoxi) Vanilla CSS · sin frameworks · mobile-first · sin dependencias ========================================================================== ÍNDICE ------ 00. Documentación 0.1 Visión general e identidad 0.2 Origen de los valores (medido vs. inferido) 0.3 Convenciones (nomenclatura, capas, breakpoints) 01. @font-face 02. Design Tokens (:root) 2.1 Color · primitivos 2.2 Color · semánticos 2.3 Tipografía 2.4 Espaciado y layout 2.5 Bordes y radios 2.6 Sombras (elevación) 2.7 Movimiento, z-index 03. Reset / base 04. Tipografía (H1–H6, cuerpo, utilidades) 05. Layout (container, section, grid, stack, cluster, split) 06. Componentes 6.1 Botones 6.8 Card · testimonio 6.2 Chips / tags 6.9 Badge flotante / contador 6.3 Eyebrow 6.10 Filtros (tabs) 6.4 Header / nav 6.11 Formularios 6.5 Top bar / ticker 6.12 FAQ (accordion) 6.6 Hero 6.13 CTA (aside + banda) 6.7 Cards (caso, paso, producto) 6.14 Footer · 6.15 WhatsApp · 6.16 Dots 07. Utilidades 08. Accesibilidad, movimiento reducido e impresión ========================================================================== 0.1 VISIÓN GENERAL E IDENTIDAD ========================================================================== Estilo general · B2B industrial / editorial-técnico. Landing de cotización (lead-gen) para equipo Husqvarna Construction distribuido por Prepoxi (corte, perforación, compactación y preparación de superficies). · Paleta casi monocromática: un morado-índigo profundo (#393A6D) como color de marca y de acción, sobre blanco y gris-lavanda muy claro. El naranja aparece SOLO en la fotografía de producto (Husqvarna) y funciona como acento “natural”; no se usa en la UI. · Contraste geométrico intencional: – Controles (botones, inputs, filtros, cards de producto y de pasos) con esquinas RECTAS (radius 0) → precisión, catálogo técnico, ficha. – Contenedores emocionales (hero media, cards de caso, testimonios, badges, chips) con radios GRANDES (18–30px y pill) → cercanía, asesoría. · Tipografía de doble voz: – Coolvetica (display, grotesca condensada y redonda) para titulares, nombres de modelo y CTA principales → contundencia, “obra”. – Brandon Text (geométrica humanista) para lectura, labels y eyebrows en mayúsculas con tracking → claridad, servicio. · Densidad media, mucho aire vertical (secciones de 60px), bandas de color a sangre completa (top bar, ticker, CTA, footer) que segmentan el scroll. Tono · Consultivo, directo, sin hype: “Compra para tu trabajo. No a ciegas.” Habla de tú. Enfatiza orientación antes que venta (“Disponibilidad y precio por confirmar”, “Agregar a solicitud” en vez de “Comprar”). Público objetivo implícito · Contratistas, constructoras, responsables de obra, instaladores y equipos de mantenimiento industrial en el Bajío (Querétaro / Celaya). Usuarios prácticos, muchas veces en móvil y en campo → prioridad a legibilidad, targets táctiles grandes, WhatsApp visible y formularios cortos (2 pasos). ========================================================================== 0.2 ORIGEN DE LOS VALORES ========================================================================== [M] = Medido directamente en el panel de propiedades de Figma. [I] = Inferido (no visible/no definido en el archivo) → se aplica la mejor práctica estándar de la industria. Revisar con diseño. Estilos publicados en el archivo: Morado Principal, Morado Secundario, Degradado 1, Blanco, Negro, Basics/Whatsapp; efectos “SH” y “SHH”; guías “Grid 100px” y “Grid 50px”. El grupo “Brand” (Pink, Yellow, Gray, Purple, Cyan) parece heredado de una plantilla y NO se usa en el canvas, por lo que se excluye del sistema. [I] Inconsistencias detectadas en Figma que este toolkit NORMALIZA: · Line-heights menores que el tamaño de fuente (p. ej. título de producto 30px / lh 20px, botón 18px / lh 16.25px) → se corrigen a ≥ 1.0 para que el texto no se recorte al hacer wrap. · Labels de botón mezclan Coolvetica 18/15 y Brandon Black 14 → se unifica en Coolvetica por tamaño de botón. · Gaps de grid entre 14 y 23px → se normalizan a 20/24px. · Borde del select 0.5px vs. input 1px → se unifica en 1px. · Gris de checkbox #767676 y placeholder #757575 → un solo token. ========================================================================== 0.3 CONVENCIONES ========================================================================== · Prefijo de clases: .pp- (Prepoxi) para evitar colisiones. · Metodología: BEM ligero → .pp-card, .pp-card__title, .pp-card--dark · Tokens: --pp-* (primitivos) y --pp-c-* (semánticos de uso). Los componentes consumen SOLO semánticos; para hacer un re-theme basta con reasignar semánticos. · Unidades: rem para tipografía y espaciado (1rem = 16px), px solo para bordes y sombras. · Cascade layers: @layer reset, tokens, base, layout, components, utilities → las utilidades siempre ganan sin !important. · Breakpoints (min-width, mobile-first): sm 36em(576) · md 48em(768) · lg 64em(1024) xl 80em(1280) · 2xl 90em(1440) El diseño en Figma es desktop 1402px. Los valores móviles son [I]. ========================================================================== */ @layer reset, tokens, base, layout, components, utilities; /* Plus Jakarta Sans (solo cifras/badges) está en Google Fonts. Descomentar si no se auto-hospeda: @import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@700&display=swap"); */ /* ========================================================================== 01. @FONT-FACE -------------------------------------------------------------------------- Coolvetica (Typodermic) y Brandon Text (HVD Fonts) son fuentes comerciales: verificar licencia web y auto-hospedar en /fonts como WOFF2. Los pesos se declaran con el MISMO número que usa Figma (330/450/500) para que los valores del diseño se traduzcan 1:1. [M] ========================================================================== */ @font-face { font-family: "Coolvetica"; src: url("../fonts/coolvetica-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Brandon Text"; src: url("../fonts/brandon-text-light.woff2") format("woff2"); font-weight: 330; /* Figma: “Light” 330 */ font-style: normal; font-display: swap; } @font-face { font-family: "Brandon Text"; src: url("../fonts/brandon-text-bold.woff2") format("woff2"); font-weight: 450; /* Figma: “Bold” 450 (peso de lectura por defecto) */ font-style: normal; font-display: swap; } @font-face { font-family: "Brandon Text"; src: url("../fonts/brandon-text-black.woff2") format("woff2"); font-weight: 500; /* Figma: “Black” 500 */ font-style: normal; font-display: swap; } /* ========================================================================== 02. DESIGN TOKENS ========================================================================== */ @layer tokens { :root { /* --------------------------------------------------------------- 2.1 COLOR · PRIMITIVOS --------------------------------------------------------------- */ /* Marca */ --pp-indigo-700: #393a6d; /* [M] “Morado Principal” — marca, CTA, bandas */ --pp-indigo-600: #4d4f90; /* [M] “Morado Secundario” — eyebrows, metadatos */ --pp-indigo-800: #2c2d56; /* [I] hover/pressed (−8% L sobre 700) */ --pp-indigo-900: #212243; /* [I] active / texto sobre tintes */ /* Tintes de marca (Figma usa el morado con opacidad sobre blanco) */ --pp-indigo-50: #f7f7f9; /* [M] #393A6D @ 4.3% — fondo sección alterna */ --pp-indigo-75: #f6f6fa; /* [M] #4D4F90 @ 5% — fondo imagen producto */ --pp-indigo-100: #ededf4; /* [M] #4D4F90 @ 10% — fondo testimonio */ /* Alfas del morado principal para bordes (medidos en Figma) [M] */ --pp-indigo-a10: rgb(57 58 109 / 0.10); --pp-indigo-a12: rgb(57 58 109 / 0.12); --pp-indigo-a15: rgb(57 58 109 / 0.15); --pp-indigo-a18: rgb(57 58 109 / 0.18); --pp-indigo-a25: rgb(57 58 109 / 0.25); --pp-indigo-a35: rgb(57 58 109 / 0.35); /* Neutrales */ --pp-white: #ffffff; /* [M] “Blanco” */ --pp-ink-900: #242424; /* [M] “Negro” — texto principal */ --pp-ink-850: #262626; /* [M] variante en H2 testimonios (se unifica a 900) */ --pp-gray-600: #757575; /* [M] placeholder / borde checkbox (#767676) — AA 4.6:1 */ --pp-gray-400: #a3a3ad; /* [I] disabled text */ --pp-gray-200: #e4e4ea; /* [I] divisores neutros */ --pp-gray-100: #f2f2f5; /* [I] disabled bg */ /* Externos */ --pp-whatsapp: #25d366; /* [I] estilo “Basics/Whatsapp” (valor oficial de marca WA) */ /* Semánticos de estado — NO existen en Figma. [I] Se eligieron tonos sobrios/desaturados que conviven con el índigo y cumplen AA (≥ 4.5:1) sobre blanco como texto. */ --pp-green-700: #1f7a4d; --pp-green-50: #e9f5ef; /* éxito */ --pp-red-700: #b3261e; --pp-red-50: #fbeceb; /* error */ --pp-amber-700: #8a5a00; --pp-amber-50: #fdf3e1; /* alerta */ --pp-blue-700: var(--pp-indigo-600); --pp-blue-50: var(--pp-indigo-100); /* info */ /* Degradados [M] */ --pp-gradient-brand: linear-gradient(180deg, var(--pp-indigo-600) 0%, var(--pp-indigo-700) 100%); /* “Degradado 1” */ --pp-gradient-hero: radial-gradient(60% 80% at 75% 30%, rgb(77 79 144 / 0.10) 0%, rgb(77 79 144 / 0) 100%), linear-gradient(180deg, rgb(57 58 109 / 0.04) 0%, rgb(57 58 109 / 0.01) 100%); --pp-gradient-media: linear-gradient(180deg, rgb(57 58 109 / 0.95), rgb(77 79 144 / 0.88)); /* --------------------------------------------------------------- 2.2 COLOR · SEMÁNTICOS (los que consumen los componentes) --------------------------------------------------------------- */ --pp-c-bg: var(--pp-white); --pp-c-bg-alt: var(--pp-indigo-50); --pp-c-bg-media: var(--pp-indigo-75); --pp-c-bg-subtle: var(--pp-indigo-100); --pp-c-bg-inverse: var(--pp-indigo-700); --pp-c-text: var(--pp-ink-900); --pp-c-text-muted: var(--pp-gray-600); --pp-c-text-accent: var(--pp-indigo-600); --pp-c-text-brand: var(--pp-indigo-700); --pp-c-text-inverse: var(--pp-white); --pp-c-text-disabled: var(--pp-gray-400); --pp-c-border: var(--pp-indigo-a25); --pp-c-border-subtle: var(--pp-indigo-a15); --pp-c-border-strong: var(--pp-indigo-a35); --pp-c-border-brand: var(--pp-indigo-700); --pp-c-action: var(--pp-indigo-700); --pp-c-action-hover: var(--pp-indigo-800); --pp-c-action-active: var(--pp-indigo-900); --pp-c-on-action: var(--pp-white); --pp-c-focus: var(--pp-indigo-600); --pp-c-success: var(--pp-green-700); --pp-c-success-bg: var(--pp-green-50); --pp-c-error: var(--pp-red-700); --pp-c-error-bg: var(--pp-red-50); --pp-c-warning: var(--pp-amber-700); --pp-c-warning-bg: var(--pp-amber-50); --pp-c-info: var(--pp-blue-700); --pp-c-info-bg: var(--pp-blue-50); /* --------------------------------------------------------------- 2.3 TIPOGRAFÍA --------------------------------------------------------------- */ --pp-font-display: "Coolvetica", "Helvetica Neue", Arial, system-ui, sans-serif; /* [M] */ --pp-font-text: "Brandon Text", "Avenir Next", "Segoe UI", system-ui, sans-serif; /* [M] */ --pp-font-numeric: "Plus Jakarta Sans", var(--pp-font-text); /* [M] badges */ /* Pesos (equivalencia exacta Figma) */ --pp-fw-display: 400; /* Coolvetica Regular [M] */ --pp-fw-light: 330; /* Brandon “Light” [M] descripciones, legal */ --pp-fw-regular: 450; /* Brandon “Bold” [M] cuerpo por defecto */ --pp-fw-strong: 500; /* Brandon “Black” [M] eyebrows, labels */ --pp-fw-numeric: 700; /* Plus Jakarta Bold [M] */ /* Escala fluida: clamp(móvil, preferido, desktop-Figma) Mínimos móviles [I] con ratio ~1.25 (Major Third). Máximos [M]. */ --pp-fs-display: clamp(2.5rem, 1.75rem + 3.2vw, 3.9375rem); /* 63px H1 hero */ --pp-fs-h2: clamp(2.125rem, 1.6rem + 2.2vw, 3.125rem); /* 50px H2 sección */ --pp-fs-h3: clamp(1.625rem, 1.4rem + 0.9vw, 2rem); /* 32px modelo destacado*/ --pp-fs-h4: clamp(1.5rem, 1.35rem + 0.6vw, 1.875rem); /* 30px título producto */ --pp-fs-h5: clamp(1.375rem, 1.3rem + 0.35vw, 1.5625rem); /* 25px card / paso */ --pp-fs-h6: clamp(1.25rem, 1.2rem + 0.2vw, 1.375rem); /* 22px nombre testimonio*/ --pp-fs-title-alt: clamp(1.375rem, 1.25rem + 0.5vw, 1.75rem); /* 28px Brandon Black (aside) */ --pp-fs-lead: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem); /* 20px */ --pp-fs-lg: 1.125rem; /* 18px cuerpo grande / nav [M] */ --pp-fs-md: 1rem; /* 16px cuerpo [M] */ --pp-fs-sm: 0.9375rem; /* 15px specs, labels, botón sm [M] */ --pp-fs-xs: 0.875rem; /* 14px eyebrow, caption, legal [M] */ --pp-fs-2xs: 0.6875rem; /* 11px contador [M] */ /* Line-heights (normalizados desde Figma) */ --pp-lh-tight: 1.05; /* display (66.88/63 = 1.06) [M] */ --pp-lh-snug: 1.2; /* títulos de card [M] */ --pp-lh-normal: 1.35; /* lead / labels (26.4/20) [M] */ --pp-lh-relaxed: 1.5; /* cuerpo [M] */ /* Tracking */ --pp-ls-tight: -0.01em; /* títulos Brandon (-0.18 / -0.7px) [M] */ --pp-ls-normal: 0; --pp-ls-caps-sm: 0.06em; /* categoría producto 0.88px/14 [M] */ --pp-ls-caps: 0.08em; /* ticker 1.08px/14 [M] */ --pp-ls-caps-lg: 0.12em; /* eyebrow 1.65px/14 [M] */ /* Medida de lectura */ --pp-measure: 62ch; /* [I] */ /* --------------------------------------------------------------- 2.4 ESPACIADO Y LAYOUT Escala base 4px. Los valores de Figma (10,12,14,15,16,18,21,24,28, 34,60,65,80) se redondean al paso más cercano. --------------------------------------------------------------- */ --pp-space-0: 0; --pp-space-1: 0.25rem; /* 4 */ --pp-space-2: 0.5rem; /* 8 */ --pp-space-3: 0.75rem; /* 12 filtros (12/18) */ --pp-space-4: 1rem; /* 16 gap botón, badge */ --pp-space-5: 1.25rem; /* 20 gap grid normalizado */ --pp-space-6: 1.5rem; /* 24 padding card caso */ --pp-space-7: 1.75rem; /* 28 padding card paso */ --pp-space-8: 2rem; /* 32 padding aside (34) */ --pp-space-10: 2.5rem; /* 40 */ --pp-space-12: 3rem; /* 48 */ --pp-space-15: 3.75rem; /* 60 padding vertical sección [M] */ --pp-space-20: 5rem; /* 80 gutter desktop [M] */ --pp-space-24: 6rem; /* 96 */ /* Ritmo de sección (fluido) */ --pp-section-y: clamp(2.5rem, 1.5rem + 4vw, 3.75rem); /* 40 → 60 */ /* Contenedor: frame 1402px − 2×80px de gutter = 1242px de contenido [M] */ --pp-container-max: 77.625rem; /* 1242px */ --pp-container-narrow: 51.25rem; /* 820px (subtítulos centrados) [M] */ --pp-gutter: clamp(1rem, 0.25rem + 3.75vw, 5rem); /* 16 → 80 */ /* Grid */ --pp-grid-cols: 12; /* [I] guía “Grid 100px” sugiere 12 col. */ --pp-grid-gap: var(--pp-space-5); --pp-grid-gap-lg: var(--pp-space-6); /* Alturas de control */ --pp-control-h: 3.1875rem; /* 51px botón / CTA [M] */ --pp-control-h-sm: 3rem; /* 48px botón card [M] */ --pp-input-h: 3rem; /* 47.8/46px input/select [M] */ --pp-tap-min: 2.75rem; /* 44px WCAG 2.5.5 [I] */ /* Alturas de barras */ --pp-header-h: 5.0625rem; /* 81px [M] */ --pp-topbar-h: 2.5rem; /* 40px [M] */ --pp-ticker-h: 3rem; /* 48px [M] */ /* --------------------------------------------------------------- 2.5 BORDES Y RADIOS --------------------------------------------------------------- */ --pp-border-w: 1px; --pp-border: var(--pp-border-w) solid var(--pp-c-border); --pp-border-subtle: var(--pp-border-w) solid var(--pp-c-border-subtle); --pp-border-strong: var(--pp-border-w) solid var(--pp-c-border-strong); --pp-border-brand: var(--pp-border-w) solid var(--pp-c-border-brand); --pp-radius-none: 0; /* botones, inputs, cards producto/paso [M] */ --pp-radius-xs: 2px; /* checkbox [M] */ --pp-radius-md: 1.125rem; /* 18px testimonio (17.56) [M] */ --pp-radius-lg: 1.375rem; /* 22px badge flotante [M] */ --pp-radius-xl: 1.5rem; /* 24px card de caso [M] */ --pp-radius-2xl: 1.875rem; /* 30px media hero / CTA [M] */ --pp-radius-pill: 999px; /* chips [M] */ /* --------------------------------------------------------------- 2.6 SOMBRAS (ELEVACIÓN) — todas [M], ordenadas por nivel Probablemente “SH” ≈ sm/md y “SHH” ≈ lg en la librería Figma. --------------------------------------------------------------- */ --pp-shadow-0: none; --pp-shadow-1: 0 7px 20px rgb(23 41 65 / 0.04); /* testimonio */ --pp-shadow-2: 0 10px 30px rgb(36 36 36 / 0.05); /* chip */ --pp-shadow-3: 0 16px 40px rgb(0 0 0 / 0.06); /* card de caso */ --pp-shadow-4: 0 20px 50px rgb(0 0 0 / 0.10); /* badge flotante */ --pp-shadow-5: 0 32px 70px rgb(57 58 109 / 0.18); /* media hero (tinte de marca) */ --pp-shadow-focus: 0 0 0 3px var(--pp-c-bg), 0 0 0 5px var(--pp-c-focus); /* [I] */ /* --------------------------------------------------------------- 2.7 MOVIMIENTO / Z-INDEX [I] --------------------------------------------------------------- */ --pp-ease: cubic-bezier(0.2, 0, 0, 1); --pp-dur-fast: 120ms; --pp-dur: 200ms; --pp-dur-slow: 320ms; --pp-ticker-dur: 40s; --pp-z-base: 0; --pp-z-raised: 10; --pp-z-sticky: 100; --pp-z-float: 200; /* botón WhatsApp */ --pp-z-overlay: 900; --pp-z-modal: 1000; color-scheme: light; } } /* ========================================================================== 03. RESET / BASE ========================================================================== */ @layer reset { *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--pp-header-h) + var(--pp-space-4)); } body { min-height: 100dvh; } img, picture, video, canvas, svg { display: block; max-width: 100%; } img { height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; padding: 0; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } h1, h2, h3, h4, h5, h6 { text-wrap: balance; } p { text-wrap: pretty; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } a { color: inherit; } fieldset { border: 0; padding: 0; min-width: 0; } [hidden] { display: none !important; } } @layer base { body { background: var(--pp-c-bg); color: var(--pp-c-text); font-family: var(--pp-font-text); font-weight: var(--pp-fw-regular); font-size: var(--pp-fs-md); line-height: var(--pp-lh-relaxed); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none; /* evita negritas falsas: los pesos vienen de los archivos */ } ::selection { background: var(--pp-indigo-700); color: var(--pp-white); } :focus-visible { outline: 2px solid var(--pp-c-focus); outline-offset: 3px; } a { text-underline-offset: 0.18em; text-decoration-thickness: 1px; } a:hover { text-decoration-thickness: 2px; } hr { border: 0; border-top: var(--pp-border-subtle); } } /* ========================================================================== 04. TIPOGRAFÍA -------------------------------------------------------------------------- Jerarquía: H1 Coolvetica 63/1.05 → título hero (uno por página) H2 Coolvetica 50/1.07 → título de sección H3 Coolvetica 32/1.1 → modelo destacado / subtítulo display H4 Coolvetica 30/1.1 → nombre de producto H5 Coolvetica 25/1.1 → título de card / paso H6 Coolvetica 22/1.1 → nombre de persona / título menor Lead Brandon 450 20/1.35 → bajada de hero Body Brandon 450 16/1.5 → texto general Body-lg Brandon 450 18/1.4 → subtítulo de sección, nav Desc Brandon 330 18/1.5 → descripción de producto (lectura larga) Small Brandon 450 15/1.43 → specs Caption Brandon 330 14/1.4 → legal, notas Eyebrow Brandon 500 14 UPPER +0.12em, color acento ========================================================================== */ @layer base { h1, h2, h3, h4, h5, h6, .pp-h1, .pp-h2, .pp-h3, .pp-h4, .pp-h5, .pp-h6 { font-family: var(--pp-font-display); font-weight: var(--pp-fw-display); color: inherit; letter-spacing: var(--pp-ls-normal); } h1, .pp-h1 { font-size: var(--pp-fs-display); line-height: var(--pp-lh-tight); } h2, .pp-h2 { font-size: var(--pp-fs-h2); line-height: 1.07; } h3, .pp-h3 { font-size: var(--pp-fs-h3); line-height: 1.1; } h4, .pp-h4 { font-size: var(--pp-fs-h4); line-height: 1.1; } h5, .pp-h5 { font-size: var(--pp-fs-h5); line-height: 1.1; } h6, .pp-h6 { font-size: var(--pp-fs-h6); line-height: 1.1; } small { font-size: var(--pp-fs-xs); } strong, b { font-weight: var(--pp-fw-strong); } } @layer components { .pp-display { font-family: var(--pp-font-display); font-weight: var(--pp-fw-display); } .pp-lead { font-size: var(--pp-fs-lead); line-height: var(--pp-lh-normal); } .pp-body-lg { font-size: var(--pp-fs-lg); line-height: 1.4; } .pp-body { font-size: var(--pp-fs-md); line-height: var(--pp-lh-relaxed); } .pp-desc { font-size: var(--pp-fs-lg); line-height: var(--pp-lh-relaxed); font-weight: var(--pp-fw-light); } .pp-small { font-size: var(--pp-fs-sm); line-height: 1.43; } .pp-caption { font-size: var(--pp-fs-xs); line-height: 1.4; font-weight: var(--pp-fw-light); } /* Título alterno en Brandon Black (aside “¿Tu aplicación es diferente?”) */ .pp-title-alt { font-family: var(--pp-font-text); font-weight: var(--pp-fw-strong); font-size: var(--pp-fs-title-alt); line-height: 1.28; letter-spacing: -0.025em; } /* Título de card en Brandon (cards de caso) */ .pp-title-text { font-family: var(--pp-font-text); font-weight: var(--pp-fw-regular); font-size: var(--pp-fs-h5); line-height: var(--pp-lh-snug); letter-spacing: var(--pp-ls-tight); } /* 6.3 Eyebrow / kicker */ .pp-eyebrow { display: inline-block; font-family: var(--pp-font-text); font-weight: var(--pp-fw-strong); font-size: var(--pp-fs-xs); line-height: 1.3; letter-spacing: var(--pp-ls-caps-lg); text-transform: uppercase; color: var(--pp-c-text-accent); } .pp-eyebrow--tight { letter-spacing: var(--pp-ls-caps-sm); } .pp-on-dark .pp-eyebrow, .pp-eyebrow--inverse { color: var(--pp-c-text-inverse); } /* Encabezado de sección (eyebrow + título + bajada) */ .pp-section-head { display: grid; gap: var(--pp-space-2); margin-block-end: clamp(var(--pp-space-6), 3vw, var(--pp-space-10)); } .pp-section-head > p { font-size: var(--pp-fs-lg); line-height: 1.375; max-width: var(--pp-measure); } .pp-section-head--center { text-align: center; justify-items: center; } .pp-section-head--center > p { max-width: var(--pp-container-narrow); } } /* ========================================================================== 05. LAYOUT ========================================================================== */ @layer layout { .pp-container { width: 100%; max-width: calc(var(--pp-container-max) + 2 * var(--pp-gutter)); margin-inline: auto; padding-inline: var(--pp-gutter); } .pp-container--narrow { max-width: calc(var(--pp-container-narrow) + 2 * var(--pp-gutter)); } .pp-section { padding-block: var(--pp-section-y); background: var(--pp-c-bg); } .pp-section--alt { background: var(--pp-c-bg-alt); } .pp-section--inverse { background: var(--pp-c-bg-inverse); color: var(--pp-c-text-inverse); } /* Grid de 12 columnas */ .pp-grid { display: grid; grid-template-columns: repeat(var(--pp-grid-cols), minmax(0, 1fr)); gap: var(--pp-grid-gap); } .pp-grid > * { grid-column: 1 / -1; } /* Grids auto (cards). Mobile: 1 col → tablet: 2 → desktop: 3/4 */ .pp-cards { display: grid; gap: var(--pp-grid-gap); grid-template-columns: 1fr; } /* Grid intrínseco sin media queries (útil para catálogos) */ .pp-auto-grid { --pp-min: 17.5rem; /* 280px */ display: grid; gap: var(--pp-grid-gap); grid-template-columns: repeat(auto-fill, minmax(min(var(--pp-min), 100%), 1fr)); } /* Split 50/50 (hero, CTA, FAQ+aside, form+resumen) */ .pp-split { display: grid; gap: clamp(var(--pp-space-6), 4vw, var(--pp-space-12)); align-items: center; } .pp-split--top { align-items: start; } /* Primitivas de composición */ .pp-stack { display: flex; flex-direction: column; gap: var(--pp-stack-gap, var(--pp-space-4)); } .pp-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pp-cluster-gap, var(--pp-space-3)); } @media (min-width: 48em) { .pp-cards--2, .pp-cards--3, .pp-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pp-split { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pp-split--60-40 { grid-template-columns: 3fr 2fr; } /* formulario + resumen */ .pp-split--65-35 { grid-template-columns: 1.85fr 1fr; } /* FAQ + aside */ } @media (min-width: 64em) { .pp-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pp-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pp-col-span-6 { grid-column: span 6; } .pp-col-span-4 { grid-column: span 4; } .pp-col-span-8 { grid-column: span 8; } } } /* ========================================================================== 06. COMPONENTES ========================================================================== */ @layer components { /* ------------------------------------------------------------------ 6.1 BOTONES Rectos (radius 0), borde 1px, padding 15/21, min-h 51, gap 16. [M] Variantes: primary · outline · inverse · ghost/link Tamaños: md (default, 18px) · sm (15px, cards) ------------------------------------------------------------------ */ .pp-btn { --_bg: var(--pp-c-action); --_fg: var(--pp-c-on-action); --_bd: var(--pp-c-action); display: inline-flex; align-items: center; justify-content: center; gap: var(--pp-space-4); min-height: var(--pp-control-h); padding: 0.9375rem 1.3125rem; /* 15 / 21 */ border: var(--pp-border-w) solid var(--_bd); border-radius: var(--pp-radius-none); background: var(--_bg); color: var(--_fg); font-family: var(--pp-font-display); font-weight: var(--pp-fw-display); font-size: var(--pp-fs-lg); /* 18 */ line-height: 1; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; transition: background-color var(--pp-dur) var(--pp-ease), color var(--pp-dur) var(--pp-ease), border-color var(--pp-dur) var(--pp-ease), transform var(--pp-dur-fast) var(--pp-ease); } .pp-btn:hover { --_bg: var(--pp-c-action-hover); --_bd: var(--pp-c-action-hover); text-decoration: none; } .pp-btn:active { --_bg: var(--pp-c-action-active); transform: translateY(1px); } .pp-btn:focus-visible { outline: none; box-shadow: var(--pp-shadow-focus); } .pp-btn:disabled, .pp-btn[aria-disabled="true"] { --_bg: var(--pp-gray-100); --_fg: var(--pp-c-text-disabled); --_bd: var(--pp-gray-200); cursor: not-allowed; transform: none; } .pp-btn__icon { width: 1em; height: 1em; flex: none; } .pp-btn--outline { --_bg: var(--pp-c-bg); --_fg: var(--pp-c-text-brand); --_bd: var(--pp-c-border-brand); } .pp-btn--outline:hover { --_bg: var(--pp-c-bg-subtle); --_fg: var(--pp-c-text-brand); --_bd: var(--pp-c-border-brand); } /* Blanco sobre banda morada (CTA / aside) [M] */ .pp-btn--inverse { --_bg: var(--pp-white); --_fg: var(--pp-c-text-brand); --_bd: var(--pp-white); } .pp-btn--inverse:hover { --_bg: var(--pp-indigo-100); --_fg: var(--pp-c-text-brand); --_bd: var(--pp-indigo-100); } .pp-btn--link { --_bg: transparent; --_bd: transparent; --_fg: currentColor; min-height: var(--pp-tap-min); padding-inline: 0; font-family: var(--pp-font-text); font-weight: var(--pp-fw-regular); font-size: var(--pp-fs-md); text-decoration: underline; text-underline-offset: 0.2em; } .pp-btn--link:hover { --_bg: transparent; --_bd: transparent; text-decoration-thickness: 2px; } .pp-btn--sm { min-height: var(--pp-control-h-sm); padding: 0.8125rem 0.5625rem; /* 13 / 9 */ font-size: var(--pp-fs-sm); /* 15 */ } .pp-btn--block { display: flex; width: 100%; } /* Grupo de botones (en cards van 50/50) */ .pp-btn-group { display: flex; flex-wrap: wrap; gap: var(--pp-space-3); } .pp-btn-group--fill > .pp-btn { flex: 1 1 0; min-width: 8rem; } /* ------------------------------------------------------------------ 6.2 CHIPS (pill) · padding 10/14, borde morado 18%, sombra 2 [M] ------------------------------------------------------------------ */ .pp-chip { display: inline-flex; align-items: center; gap: var(--pp-space-2); min-height: 2.8125rem; /* 45px */ padding: 0.625rem 0.875rem; border: var(--pp-border-w) solid var(--pp-indigo-a18); border-radius: var(--pp-radius-pill); background: var(--pp-c-bg); box-shadow: var(--pp-shadow-2); font-size: var(--pp-fs-md); line-height: 1.4; color: var(--pp-c-text); text-decoration: none; } a.pp-chip:hover { border-color: var(--pp-c-border-brand); } /* ------------------------------------------------------------------ 6.4 HEADER / NAV · 81px, borde inferior morado 15% [M] ------------------------------------------------------------------ */ .pp-header { position: sticky; top: 0; z-index: var(--pp-z-sticky); background: var(--pp-c-bg); border-bottom: var(--pp-border-subtle); } .pp-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--pp-space-4); min-height: 4rem; } .pp-header__logo { flex: none; width: auto; height: 2.25rem; } .pp-nav { display: none; } .pp-nav__list { display: flex; gap: clamp(var(--pp-space-6), 3vw, var(--pp-space-10)); } .pp-nav__link { display: inline-flex; align-items: center; min-height: var(--pp-tap-min); font-size: var(--pp-fs-lg); line-height: 1.2; text-decoration: none; color: var(--pp-c-text); } .pp-nav__link:hover, .pp-nav__link[aria-current="page"] { color: var(--pp-c-text-brand); text-decoration: underline; text-underline-offset: 0.35em; } .pp-header__actions { display: flex; align-items: center; gap: var(--pp-space-2); } .pp-header__actions .pp-btn { min-height: 2.75rem; padding-block: 0.5rem; font-size: var(--pp-fs-md); } /* Botón hamburguesa (móvil) [I] */ .pp-menu-toggle { display: inline-grid; place-items: center; width: var(--pp-tap-min); height: var(--pp-tap-min); border: var(--pp-border); color: var(--pp-c-text-brand); } @media (min-width: 64em) { .pp-header__inner { min-height: var(--pp-header-h); } .pp-header__logo { height: 2.75rem; } .pp-nav { display: block; } .pp-menu-toggle { display: none; } } /* ------------------------------------------------------------------ 6.5 TOP BAR + TICKER (marquee) · fondo morado principal [M] ------------------------------------------------------------------ */ .pp-topbar { background: var(--pp-c-bg-inverse); color: var(--pp-c-text-inverse); text-align: center; padding: 0.625rem var(--pp-gutter); /* 10 */ font-size: var(--pp-fs-xs); line-height: 1.25; } @media (min-width: 48em) { .pp-topbar { font-size: var(--pp-fs-md); } } .pp-ticker { overflow: hidden; background: var(--pp-c-bg-inverse); color: var(--pp-c-text-inverse); padding-block: 0.875rem; /* 14 */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } .pp-ticker__track { display: flex; width: max-content; gap: var(--pp-space-6); animation: pp-marquee var(--pp-ticker-dur) linear infinite; } .pp-ticker:hover .pp-ticker__track { animation-play-state: paused; } .pp-ticker__item { display: inline-flex; align-items: center; gap: var(--pp-space-6); font-weight: var(--pp-fw-strong); font-size: var(--pp-fs-xs); line-height: 1.4; letter-spacing: var(--pp-ls-caps); text-transform: uppercase; white-space: nowrap; } .pp-ticker__item::after { content: "✦"; font-size: 0.75em; opacity: 0.9; } /* Duplicar el contenido del track en el HTML (aria-hidden en la copia) para que el loop sea continuo. */ @keyframes pp-marquee { to { transform: translateX(-50%); } } /* ------------------------------------------------------------------ 6.6 HERO ------------------------------------------------------------------ */ .pp-hero { background: var(--pp-gradient-hero); padding-block: clamp(var(--pp-space-8), 4vw, var(--pp-space-12)) var(--pp-space-6); } .pp-hero__content { display: grid; gap: var(--pp-space-5); } .pp-hero__title { max-width: 14ch; } .pp-hero__lead { max-width: 38rem; font-size: var(--pp-fs-lead); line-height: var(--pp-lh-normal); } .pp-hero__note { font-size: var(--pp-fs-lg); color: var(--pp-c-text-accent); } .pp-hero__media { position: relative; border-radius: var(--pp-radius-2xl); border: var(--pp-border-w) solid var(--pp-indigo-a12); box-shadow: var(--pp-shadow-5); background: var(--pp-gradient-media); aspect-ratio: 585 / 600; /* [M] */ isolation: isolate; } .pp-hero__media > img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .pp-hero__media .pp-badge-float { position: absolute; inset-block-start: var(--pp-space-6); inset-inline-start: var(--pp-space-6); } @media (max-width: 47.99em) { .pp-hero__media { aspect-ratio: 4 / 3; border-radius: var(--pp-radius-xl); } } /* ------------------------------------------------------------------ 6.7 CARDS ------------------------------------------------------------------ */ /* Base */ .pp-card { position: relative; display: flex; flex-direction: column; background: var(--pp-c-bg); border: var(--pp-border); color: var(--pp-c-text); } /* a) Card de CASO DE USO · radius 24, padding 24, min-h 205, sombra 3 [M] */ .pp-card--case { justify-content: space-between; gap: var(--pp-space-6); min-height: 12.8125rem; /* 205 */ padding: var(--pp-space-6); border-radius: var(--pp-radius-xl); border-color: var(--pp-c-border-brand); } .pp-card--case.pp-card--dark { background: var(--pp-c-bg-inverse); color: var(--pp-c-text-inverse); border-color: var(--pp-indigo-a10); box-shadow: var(--pp-shadow-3); } .pp-card__label { font-family: var(--pp-font-display); font-size: 1.5rem; line-height: 1.24; } /* 24 [M] */ .pp-card__meta { font-size: var(--pp-fs-md); line-height: 1.44; } /* b) Card de PASO · recta, padding 28, min-h 275, borde 25% [M] */ .pp-card--step { gap: var(--pp-space-3); min-height: 17.1875rem; /* 275 */ padding: var(--pp-space-7); border-radius: var(--pp-radius-none); } .pp-card__index { margin-block-end: auto; font-size: var(--pp-fs-h5); font-weight: var(--pp-fw-regular); line-height: 1; color: var(--pp-c-text-accent); font-variant-numeric: tabular-nums; } .pp-card--step .pp-card__title { font-size: var(--pp-fs-h5); line-height: 1.05; } .pp-card--step .pp-card__text { font-size: var(--pp-fs-md); line-height: var(--pp-lh-relaxed); } /* c) Card de PRODUCTO · recta, media con tinte 5%, ratio ~ 400/275 [M] */ .pp-card--product { border-radius: var(--pp-radius-none); border-color: var(--pp-c-border-subtle); } .pp-card--product:hover { border-color: var(--pp-c-border-strong); } .pp-card__media { display: grid; place-items: center; aspect-ratio: 400 / 275; background: var(--pp-c-bg-media); overflow: hidden; } .pp-card__media > img { width: 100%; height: 100%; object-fit: contain; padding: var(--pp-space-3); } .pp-card__body { display: flex; flex-direction: column; gap: var(--pp-space-2); flex: 1; padding: var(--pp-space-6); } .pp-card__category { /* HUSQVARNA / CORTE */ font-weight: var(--pp-fw-strong); font-size: var(--pp-fs-xs); line-height: 1.3; letter-spacing: var(--pp-ls-caps-sm); text-transform: uppercase; color: var(--pp-c-text-accent); } .pp-card--product .pp-card__title { font-size: var(--pp-fs-h4); line-height: 1; } .pp-card__sku { font-size: var(--pp-fs-xs); line-height: 1.4; color: var(--pp-c-text-accent); } .pp-card__desc { font-size: var(--pp-fs-lg); line-height: var(--pp-lh-relaxed); font-weight: var(--pp-fw-light); } .pp-card__spec { font-size: var(--pp-fs-sm); line-height: 1.43; font-weight: var(--pp-fw-strong); } .pp-card__note { font-size: var(--pp-fs-sm); line-height: 1.43; font-weight: var(--pp-fw-light); color: var(--pp-c-text-accent); } .pp-card__actions { margin-block-start: auto; padding-block-start: var(--pp-space-3); } /* Toda la card clicable sin anidar enlaces [I] */ .pp-card__link::after { content: ""; position: absolute; inset: 0; } .pp-card__actions { position: relative; z-index: var(--pp-z-raised); } /* ------------------------------------------------------------------ 6.8 CARD DE TESTIMONIO · radius 18, tinte 10%, borde marca, sombra 1 [M] ------------------------------------------------------------------ */ .pp-testimonial { display: flex; flex-direction: column; gap: var(--pp-space-5); padding: 1.375rem 1.3125rem; /* 22 / 21 */ border: var(--pp-border-brand); border-radius: var(--pp-radius-md); background: var(--pp-c-bg-subtle); box-shadow: var(--pp-shadow-1); } .pp-testimonial__name { font-family: var(--pp-font-display); font-size: var(--pp-fs-h6); line-height: 1.1; } .pp-testimonial__role { font-family: var(--pp-font-numeric); font-weight: var(--pp-fw-numeric); font-size: var(--pp-fs-sm); line-height: 1.2; } .pp-testimonial__rating { display: flex; gap: 2px; color: var(--pp-c-text-brand); } .pp-testimonial__rating svg { width: 0.9375rem; height: 0.9375rem; } .pp-testimonial__quote { font-size: var(--pp-fs-sm); line-height: 1.3; font-weight: var(--pp-fw-light); } .pp-testimonial__source { display: inline-flex; align-items: center; gap: var(--pp-space-2); font-size: var(--pp-fs-xs); font-weight: var(--pp-fw-strong); margin-block-start: auto; } .pp-media-tile { border-radius: var(--pp-radius-md); overflow: hidden; } .pp-media-tile > img { width: 100%; height: 100%; object-fit: cover; } /* Mosaico masonry de 3 columnas (testimonios + fotos) */ .pp-mosaic { display: grid; gap: var(--pp-space-4); } @media (min-width: 48em) { .pp-mosaic { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 64em) { .pp-mosaic { grid-template-columns: repeat(3, 1fr); align-items: start; } } /* ------------------------------------------------------------------ 6.9 BADGE FLOTANTE + CONTADOR ------------------------------------------------------------------ */ .pp-badge-float { /* “EQUIPO SUGERIDO · FS400 LV S” */ display: grid; gap: var(--pp-space-1); min-width: 13.75rem; /* 220 [M] */ padding: var(--pp-space-4) 1.125rem; /* 16 / 18 */ border: var(--pp-border-w) solid var(--pp-indigo-a12); border-radius: var(--pp-radius-lg); background: var(--pp-c-bg); box-shadow: var(--pp-shadow-4); } .pp-badge-float__title { font-family: var(--pp-font-display); font-size: var(--pp-fs-h3); line-height: 1; } .pp-count { /* contador de “Mi solicitud” */ display: inline-grid; place-items: center; min-width: 1.375rem; height: 1.375rem; padding-inline: 0.375rem; border-radius: var(--pp-radius-pill); background: var(--pp-c-action); color: var(--pp-c-on-action); font-family: var(--pp-font-numeric); font-weight: var(--pp-fw-numeric); font-size: var(--pp-fs-2xs); line-height: 1; font-variant-numeric: tabular-nums; } /* Estado (semánticos) [I] */ .pp-status { display: inline-flex; align-items: center; gap: var(--pp-space-1); padding: 0.125rem 0.5rem; border-radius: var(--pp-radius-pill); font-size: var(--pp-fs-xs); font-weight: var(--pp-fw-strong); background: var(--pp-c-info-bg); color: var(--pp-c-info); } .pp-status--success { background: var(--pp-c-success-bg); color: var(--pp-c-success); } .pp-status--error { background: var(--pp-c-error-bg); color: var(--pp-c-error); } .pp-status--warning { background: var(--pp-c-warning-bg); color: var(--pp-c-warning); } /* ------------------------------------------------------------------ 6.10 FILTROS (tabs de categoría) · padding 12/18, borde 35% [M] ------------------------------------------------------------------ */ .pp-filters { display: flex; gap: var(--pp-space-2); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; padding-block-end: 2px; /* evita recorte del focus ring */ } .pp-filters::-webkit-scrollbar { display: none; } @media (min-width: 48em) { .pp-filters { flex-wrap: wrap; overflow: visible; } } .pp-filter { flex: none; scroll-snap-align: start; min-height: 2.875rem; /* 46 */ padding: 0.75rem 1.125rem; border: var(--pp-border-strong); background: var(--pp-c-bg); color: var(--pp-c-text-brand); font-size: var(--pp-fs-sm); line-height: 1.3; transition: background-color var(--pp-dur) var(--pp-ease), color var(--pp-dur) var(--pp-ease); } .pp-filter:hover { background: var(--pp-c-bg-subtle); } .pp-filter[aria-pressed="true"], .pp-filter[aria-selected="true"], .pp-filter.is-active { background: var(--pp-c-action); border-color: var(--pp-c-action); color: var(--pp-c-on-action); } /* ------------------------------------------------------------------ 6.11 FORMULARIOS ------------------------------------------------------------------ */ .pp-form-card { /* contenedor del formulario */ display: grid; gap: var(--pp-space-5); padding: clamp(var(--pp-space-5), 2.5vw, var(--pp-space-8)); border: var(--pp-border-strong); background: var(--pp-c-bg); } .pp-form-card__step { padding-block-end: var(--pp-space-3); border-bottom: var(--pp-border-subtle); font-size: var(--pp-fs-xs); font-weight: var(--pp-fw-strong); color: var(--pp-c-text-accent); } .pp-field { display: grid; gap: var(--pp-space-2); } .pp-label { font-size: var(--pp-fs-sm); font-weight: var(--pp-fw-strong); line-height: 1.43; color: var(--pp-c-text); } .pp-label--lg { font-size: var(--pp-fs-lg); } .pp-label__req { color: var(--pp-c-error); margin-inline-start: 0.125rem; } .pp-hint { font-size: var(--pp-fs-xs); font-weight: var(--pp-fw-light); color: var(--pp-c-text-muted); } .pp-error-msg { font-size: var(--pp-fs-xs); font-weight: var(--pp-fw-strong); color: var(--pp-c-error); } .pp-input, .pp-select, .pp-textarea { width: 100%; min-height: var(--pp-input-h); padding: 0.8125rem 0.9375rem; /* 13 / 15 [M] */ border: var(--pp-border-strong); border-radius: var(--pp-radius-none); background: var(--pp-c-bg); color: var(--pp-c-text); font-size: max(16px, var(--pp-fs-sm)); /* ≥16px evita zoom en iOS [I] */ font-weight: var(--pp-fw-regular); line-height: 1.3; transition: border-color var(--pp-dur) var(--pp-ease), box-shadow var(--pp-dur) var(--pp-ease); } .pp-input::placeholder, .pp-textarea::placeholder { color: var(--pp-c-text-muted); font-weight: var(--pp-fw-light); opacity: 1; } .pp-input:hover, .pp-select:hover, .pp-textarea:hover { border-color: var(--pp-c-border-brand); } .pp-input:focus-visible, .pp-select:focus-visible, .pp-textarea:focus-visible { outline: none; border-color: var(--pp-c-focus); box-shadow: 0 0 0 3px var(--pp-indigo-a18); } .pp-input[aria-invalid="true"], .pp-select[aria-invalid="true"], .pp-textarea[aria-invalid="true"] { border-color: var(--pp-c-error); } .pp-input:disabled, .pp-select:disabled, .pp-textarea:disabled { background: var(--pp-gray-100); color: var(--pp-c-text-disabled); cursor: not-allowed; } .pp-textarea { min-height: 6.5rem; resize: vertical; } .pp-select { appearance: none; padding-inline-end: 2.75rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath stroke='%23242424' stroke-width='1.5' d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 0.75rem; } /* Búsqueda */ .pp-search { position: relative; } .pp-search .pp-input { padding-inline-start: 2.75rem; } .pp-search__icon { position: absolute; inset-inline-start: 0.9375rem; top: 50%; translate: 0 -50%; width: 1.125rem; height: 1.125rem; color: var(--pp-c-text-muted); pointer-events: none; } /* Fieldset de opciones (checkbox/radio en 2 columnas) */ .pp-fieldset { display: grid; gap: var(--pp-space-3); padding: var(--pp-space-4); border: var(--pp-border-strong); } .pp-fieldset__legend { padding: 0; font-size: var(--pp-fs-sm); font-weight: var(--pp-fw-strong); margin-block-end: var(--pp-space-2); float: left; width: 100%; } .pp-options { display: grid; gap: var(--pp-space-2) var(--pp-space-6); clear: both; } @media (min-width: 36em) { .pp-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .pp-check { display: inline-flex; align-items: center; gap: var(--pp-space-2); min-height: var(--pp-tap-min); font-size: var(--pp-fs-sm); font-weight: var(--pp-fw-light); cursor: pointer; } .pp-check input { flex: none; width: 1.125rem; height: 1.125rem; /* 13px en Figma → 18px por usabilidad [I] */ accent-color: var(--pp-c-action); border-radius: var(--pp-radius-xs); cursor: pointer; } /* ------------------------------------------------------------------ 6.12 FAQ (accordion nativo
) ------------------------------------------------------------------ */ .pp-faq { border-top: var(--pp-border-subtle); } .pp-faq__item { border-bottom: var(--pp-border-subtle); } .pp-faq__q { display: flex; align-items: center; gap: var(--pp-space-3); min-height: 3.5rem; padding-block: var(--pp-space-3); font-size: clamp(var(--pp-fs-md), 1rem + 0.3vw, var(--pp-fs-lead)); line-height: 1.25; cursor: pointer; list-style: none; } .pp-faq__q::-webkit-details-marker { display: none; } .pp-faq__q::before { content: ""; flex: none; width: 0.4rem; height: 0.4rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: -45deg; transition: rotate var(--pp-dur) var(--pp-ease); } .pp-faq__item[open] > .pp-faq__q::before { rotate: 45deg; } .pp-faq__q:hover { color: var(--pp-c-text-brand); } .pp-faq__a { padding: 0 0 var(--pp-space-5) var(--pp-space-6); max-width: var(--pp-measure); font-weight: var(--pp-fw-light); font-size: var(--pp-fs-md); } /* ------------------------------------------------------------------ 6.13 CTA ------------------------------------------------------------------ */ /* Aside morado (junto a FAQ) · padding 34 [M] */ .pp-cta-box { display: grid; gap: var(--pp-space-4); align-content: start; padding: clamp(var(--pp-space-6), 2.5vw, 2.125rem); background: var(--pp-c-bg-inverse); color: var(--pp-c-text-inverse); } @media (min-width: 48em) { .pp-cta-box { position: sticky; top: calc(var(--pp-header-h) + var(--pp-space-6)); } } /* Banda CTA a sangre completa */ .pp-cta-band { background: var(--pp-c-bg-inverse); color: var(--pp-c-text-inverse); padding-block: var(--pp-section-y); } .pp-cta-band__media { border-radius: var(--pp-radius-2xl); overflow: hidden; } .pp-cta-band__media > img { width: 100%; height: 100%; object-fit: cover; } /* Resumen de solicitud (form lateral) */ .pp-summary { display: grid; gap: var(--pp-space-4); padding: var(--pp-space-5); border: var(--pp-border-strong); align-content: start; } /* ------------------------------------------------------------------ 6.14 FOOTER · padding 65/25, fondo marca [M] ------------------------------------------------------------------ */ .pp-footer { background: var(--pp-c-bg-inverse); color: var(--pp-c-text-inverse); padding-block: clamp(var(--pp-space-10), 5vw, 4.0625rem) var(--pp-space-6); } .pp-footer__grid { display: grid; gap: var(--pp-space-8); } @media (min-width: 48em) { .pp-footer__grid { grid-template-columns: 1.4fr repeat(3, 1fr); } } .pp-footer__title { font-size: var(--pp-fs-lg); line-height: 1.07; letter-spacing: -0.02em; margin-block-end: var(--pp-space-3); } .pp-footer__list { display: grid; gap: var(--pp-space-1); } .pp-footer__link { font-size: var(--pp-fs-xs); font-weight: var(--pp-fw-light); line-height: 1.4; text-decoration: none; display: inline-block; padding-block: 0.25rem; } .pp-footer__link:hover { text-decoration: underline; } .pp-footer__legal { display: flex; flex-wrap: wrap; gap: var(--pp-space-2) var(--pp-space-6); margin-block-start: var(--pp-space-10); padding-block-start: var(--pp-space-5); border-top: 1px solid rgb(255 255 255 / 0.25); font-size: var(--pp-fs-xs); font-weight: var(--pp-fw-light); } /* ------------------------------------------------------------------ 6.15 BOTÓN FLOTANTE WHATSAPP ------------------------------------------------------------------ */ .pp-fab-whatsapp { position: fixed; inset-block-end: max(var(--pp-space-4), env(safe-area-inset-bottom)); inset-inline-end: var(--pp-space-4); z-index: var(--pp-z-float); display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: var(--pp-radius-pill); background: var(--pp-whatsapp); color: var(--pp-white); box-shadow: var(--pp-shadow-4); transition: transform var(--pp-dur) var(--pp-ease); } .pp-fab-whatsapp:hover { transform: scale(1.06); } .pp-fab-whatsapp svg { width: 1.75rem; height: 1.75rem; } /* ------------------------------------------------------------------ 6.16 CARRUSEL (scroll-snap nativo) + DOTS ------------------------------------------------------------------ */ .pp-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(16rem, 85%); gap: var(--pp-grid-gap); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; } .pp-carousel::-webkit-scrollbar { display: none; } .pp-carousel > * { scroll-snap-align: start; } @media (min-width: 48em) { .pp-carousel { grid-auto-columns: calc((100% - var(--pp-grid-gap)) / 2); } } @media (min-width: 64em) { .pp-carousel { grid-auto-columns: calc((100% - 2 * var(--pp-grid-gap)) / 3); } } .pp-dots { display: flex; justify-content: center; gap: var(--pp-space-1); margin-block-start: var(--pp-space-5); } .pp-dot { width: var(--pp-tap-min); height: var(--pp-tap-min); /* área táctil */ display: grid; place-items: center; } .pp-dot::before { content: ""; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--pp-indigo-a25); transition: background-color var(--pp-dur) var(--pp-ease); } .pp-dot[aria-current="true"]::before { background: var(--pp-c-action); } /* Banda de ayuda (“¿No sabes qué modelo necesitas?”) */ .pp-help-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pp-space-4); padding: var(--pp-space-4) var(--pp-space-5); border: var(--pp-border-subtle); } /* Banda de marca (logo partner) */ .pp-brand-band { background: var(--pp-c-bg-alt); padding-block: var(--pp-section-y); } } /* ========================================================================== 07. UTILIDADES ========================================================================== */ @layer utilities { .pp-on-dark { color: var(--pp-c-text-inverse); } .pp-text-center { text-align: center; } .pp-text-accent { color: var(--pp-c-text-accent); } .pp-text-brand { color: var(--pp-c-text-brand); } .pp-text-muted { color: var(--pp-c-text-muted); } .pp-fw-light { font-weight: var(--pp-fw-light); } .pp-fw-regular { font-weight: var(--pp-fw-regular); } .pp-fw-strong { font-weight: var(--pp-fw-strong); } .pp-uppercase { text-transform: uppercase; letter-spacing: var(--pp-ls-caps); } .pp-measure { max-width: var(--pp-measure); } .pp-bg-alt { background: var(--pp-c-bg-alt); } .pp-bg-inverse { background: var(--pp-c-bg-inverse); color: var(--pp-c-text-inverse); } .pp-bg-brand-gradient { background: var(--pp-gradient-brand); color: var(--pp-c-text-inverse); } .pp-radius-0 { border-radius: var(--pp-radius-none); } .pp-radius-md { border-radius: var(--pp-radius-md); } .pp-radius-xl { border-radius: var(--pp-radius-xl); } .pp-radius-2xl { border-radius: var(--pp-radius-2xl); } .pp-radius-pill { border-radius: var(--pp-radius-pill); } .pp-shadow-1 { box-shadow: var(--pp-shadow-1); } .pp-shadow-2 { box-shadow: var(--pp-shadow-2); } .pp-shadow-3 { box-shadow: var(--pp-shadow-3); } .pp-shadow-4 { box-shadow: var(--pp-shadow-4); } .pp-shadow-5 { box-shadow: var(--pp-shadow-5); } .pp-mt-0 { margin-block-start: 0; } .pp-mt-4 { margin-block-start: var(--pp-space-4); } .pp-mt-6 { margin-block-start: var(--pp-space-6); } .pp-mt-10 { margin-block-start: var(--pp-space-10); } .pp-mb-0 { margin-block-end: 0; } .pp-gap-2 { gap: var(--pp-space-2); } .pp-gap-4 { gap: var(--pp-space-4); } .pp-gap-6 { gap: var(--pp-space-6); } .pp-w-full { width: 100%; } .pp-hide-mobile { display: none; } @media (min-width: 48em) { .pp-hide-mobile { display: revert; } .pp-hide-desktop { display: none; } } .pp-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .pp-skip-link { position: absolute; inset-inline-start: var(--pp-space-4); top: -100%; z-index: var(--pp-z-modal); padding: var(--pp-space-3) var(--pp-space-4); background: var(--pp-c-action); color: var(--pp-c-on-action); } .pp-skip-link:focus { top: var(--pp-space-4); } } /* ========================================================================== 08. ACCESIBILIDAD, MOVIMIENTO REDUCIDO, ALTO CONTRASTE, IMPRESIÓN -------------------------------------------------------------------------- BUENAS PRÁCTICAS (resumen) 1. Contraste: #393A6D sobre blanco = 10.5:1 · #4D4F90 = 7.4:1 · #242424 = 15.5:1 · #757575 = 4.6:1 (mínimo AA). Blanco sobre #393A6D cumple AAA. No usar #4D4F90 con opacidad para texto. 2. Targets táctiles ≥ 44px (filtros, dots, links del footer, checkbox). 3. Focus visible en todos los interactivos (anillo doble, nunca outline:none sin reemplazo). 4. Semántica:
,