/* MICHEMICAL DATA LAB — HOME V2 — PROPUESTA F Basada en mediciones EXACTAS de GenOS (C:\GENOS-AUDIT-EXACT\), no en estimaciones visuales. Archivo independiente: no reutiliza clases de preview-e.css a propósito (E fue descartado). */ @font-face { font-family: "TikTok Sans Preview"; src: url("./assets/fonts/TikTokSans36pt-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Geist Mono Preview"; src: url("./assets/fonts/GeistMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Geist Mono Preview"; src: url("./assets/fonts/GeistMono-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Departure Mono Preview"; src: url("./assets/fonts/DepartureMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } :root { --ink: #0a0e14; --muted: rgba(10,14,20,.62); --accent: #2f80ed; --accent-2: #00a6d6; --yellow: #ffc857; --line: rgba(10,14,20,.10); --font-display: "TikTok Sans Preview", "Arial Black", sans-serif; --font-mono: "Geist Mono Preview", ui-monospace, monospace; --font-label: "Departure Mono Preview", ui-monospace, monospace; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body.pf { min-height: 100vh; font-family: var(--font-mono); color: var(--ink); overflow-x: hidden; background: linear-gradient(160deg, #cfe8f8 0%, #e5f4fc 55%, #f1f9ff 100%); background-attachment: fixed; } /* ============ GRID DE FONDO — patrón EXACTO medido de GenOS (4 verticales / 2 horizontales / cruces) ============ */ #pf-grid { position: fixed; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: difference; } #pf-grid path.pf-lines { stroke: rgba(255,255,255,.10); stroke-width: 1; fill: none; } #pf-grid path.pf-cross { stroke: rgba(255,255,255,.25); stroke-width: 1; fill: none; } /* ============ GLOW QUE SIGUE AL MOUSE — único efecto de mouse (sin parallax grupal) ============ */ #pf-glow { position: fixed; top: 0; left: 0; z-index: 2; width: 560px; height: 560px; margin-left: -280px; margin-top: -280px; border-radius: 50%; background: radial-gradient(circle, rgba(47,128,237,.14) 0%, rgba(0,166,214,.06) 45%, transparent 72%); pointer-events: none; will-change: transform; } /* ============ CANVAS DE STICKERS (Canvas2D, sin Three.js/WebGL) ============ Auditoría C:\GENOS-AUDIT-EXACT\STICKERS-CLIP-SIZE-EXACT-AUDIT.md: en GenOS, #bg-canvas (las 16 instancias que caen) vive en z-index:1 — POR DEBAJO de #about-s (z:2). No hay fade ni límite físico: los objetos SIGUEN cayendo detrás de Story, simplemente el panel opaco de la sección (mayor z-index, bloque normal del documento) los tapa al pasar por encima — confirmado experimentalmente haciendo transparente about-s (los sprites reaparecieron) y revirtiendo. z-index:3 aquí era la causa raíz: mayor que Story (2) y que Featured (auto/0), así que NINGUNA de las dos podía taparlo nunca sin importar el scroll. Bajado a -1 (por debajo también de #pf-grid:1, replicando bg-canvas:1 < grid:20 de GenOS, donde el grid TAMBIÉN pinta por encima de los objetos que caen) para que los fondos opacos ya existentes de Story (::before) y Featured (::before) puedan ocluirlo, igual que about-s ocluye a bg-canvas. La física/velocidad/tamaño no cambian — solo el orden de pintura. */ #pf-stickers { position: fixed; inset: 0; z-index: -1; pointer-events: none; transition: opacity .3s ease; } /* ============ ESTELA DE FLUIDO DEL MOUSE (WebGL2, propio — ver home-v2-fluid.js) ============ Auditoría C:\GENOS-AUDIT-EXACT\OUR-STORY-EXACT-AUDIT.md (sección 7-9): en GenOS el fluid vive en z-index:9997 — POR ENCIMA del header (50), del grid (20) y de TODO el contenido (secciones deliberadamente en z-index bajo, ~2). Confirmado visualmente: un splat se pinta ENCIMA del propio header. La versión anterior de este comentario decía lo opuesto ("va detrás de... para que nunca tape header/texto") — eso era la arquitectura INVERSA a GenOS, ya corregida aquí. pointer-events:none se conserva, así que el header sigue siendo clickeable aunque el fluid se pinte visualmente por encima. */ #pf-fluid { /* width/height:100% resolvía contra un contenedor afectado por el scrollbar vertical (1425px medidos en vez de 1440px) — comparación A/B confirmó ~1.04% de compresión horizontal del trazo. 100vw/100vh se define desde el initial containing block, no desde el ancho ya restado por el scrollbar. */ position: fixed; inset: 0; z-index: 9997; width: 100vw; height: 100vh; pointer-events: none; } /* ============ HEADER FLOTANTE — geometría EXACTA medida de GenOS ============ */ .pf-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; pointer-events: none; } .pf-bar { pointer-events: auto; margin: 12px 56px; padding: 22px 40px; border-radius: 16px; border: 1px solid rgba(10,14,20,.08); background: rgba(241,249,255,.58); backdrop-filter: blur(20px) saturate(1.7); box-shadow: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; transition: background .4s, border-color .4s; } .pf-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); } .pf-mark { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -.02em; } .pf-brandname { font-family: var(--font-label); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; opacity: .78; } .pf-nav { display: flex; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; } .pf-nav a { position: relative; font-family: var(--font-label); font-size: 15px; font-weight: 400; letter-spacing: 1.05px; text-transform: uppercase; color: var(--ink); text-decoration: none; opacity: .96; /* Departure Mono solo trae peso 400 en el .woff2 instalado: el synthetic-bold del navegador es débil en este glifo, así que reforzamos el trazo para que SÍ se lea marcado */ -webkit-text-stroke: .6px currentColor; padding: 7px 14px; border-radius: 999px; transition: opacity .18s ease; } .pf-nav a:hover { opacity: 1; } /* Recuadro de hover — geometría y timing medidos en GenOS (.nb::before / .nb:hover::before): pseudo-elemento fuera del padding box, no cambia el tamaño del link, solo el borde anima. */ .pf-nav a::before { content: ""; position: absolute; inset: -0.15rem; border: 2px dotted transparent; border-radius: 2px; transition: border-color .2s; pointer-events: none; } .pf-nav a:hover::before { border-color: rgba(54,54,48,.32); } .pf-actions { display: flex; align-items: center; gap: 12px; } .pf-cart { font-family: var(--font-label); font-size: 13px; letter-spacing: .04em; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; display: flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none; opacity: .9; } .pf-toggle { display: none; font-family: var(--font-label); font-size: 18px; background: none; border: none; color: var(--ink); cursor: pointer; } /* ============ HERO — CSS Grid de 12 columnas, igual método que GenOS ============ */ .pf-hero { position: relative; z-index: 5; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto 1fr; /* padding-bottom: auditoría C:\GENOS-AUDIT-EXACT\FALL-LIMIT-SPACING-EXACT-AUDIT.md midió "último contenido del hero (.pf-scroll-hint) → bottom del hero" = 22.89px en GenOS vs 90px en Michemical (+67.11px de exceso, el ÚNICO espacio realmente sobrante detectado en todo el hero/Story). La causa era literalmente este valor: .pf-scroll-hint es el último elemento del grid, así que el padding-bottom del propio .pf-hero ES ese espacio final. Corregido al valor medido exacto, sin redondear a 20/24/25/30. */ padding: 152px 56px 22.89px; } /* fila superior: 3 bloques por grid-column span, SIN fondo, SIN borde, SIN sombra */ .pf-meta-left { grid-column: 1 / 4; grid-row: 1; } .pf-meta-center{ grid-column: 4 / 8; grid-row: 1; } .pf-meta-right { grid-column: 8 / 13; grid-row: 1; } .pf-meta-left { font-family: var(--font-display); font-weight: 500; color: var(--ink); font-size: clamp(19px, 2.4vw, 30px); line-height: 1.25; margin: 0; } .pf-meta-center { /* Auditoría GENOS-AUDIT-EXACT/TYPOGRAPHY-COLOR-COMPARISON.md: GenOS usa rgb(0,0,0) opaco en el bloque equivalente (span.h-tag) — el --muted (alfa .62) aplicado aquí era la causa CRÍTICA del aspecto "lavado". Se usa --ink (mismo tono ya opaco de SOFTWARE/nav). */ font-family: var(--font-mono); font-weight: 500; color: var(--ink); font-size: clamp(14px, 1.4vw, 16.8px); line-height: 1.55; margin: 0; } .pf-meta-right { /* weight 500 (no 400): color ya era idéntico a .pf-meta-center (var(--ink) en ambos, sin opacity/blend de por medio) — la diferencia de tonalidad restante era el peso de fuente (Regular vs Medium, archivos reales vía @font-face, no synthetic-bold). Se iguala a 500 para que ambos bloques usen el mismo archivo de fuente y el mismo grosor de trazo. */ font-family: var(--font-mono); font-weight: 500; color: var(--ink); font-size: clamp(13px, 1.2vw, 15.2px); line-height: 1.7; margin: 0; } /* aire medido entre el bloque superior y el H1: ~240px a 1440px, proporcional en otros anchos */ .pf-h1-wrap { grid-column: 1 / 13; grid-row: 2; margin-top: clamp(80px, 8vw, 160px); align-self: start; } .pf-h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.5rem, 6vw, 5.5rem); line-height: .95; letter-spacing: -.025em; text-transform: uppercase; margin: 0; color: var(--ink); -webkit-text-stroke: .5px var(--ink); } .pf-h1 span { display: block; } .pf-lede { grid-column: 1 / 8; grid-row: 3; /* Auditoría: color --muted (alfa .62) + font-weight 400 (sin declarar, caía al default del navegador) eran MÁS liviano que su comparable más cercano en ambas páginas (pf-meta-center/ h-tag, weight 500) — efecto compuesto. Se corrige a --ink opaco + weight 500. */ font-family: var(--font-mono); font-weight: 500; font-size: 16px; line-height: 1.5; color: var(--ink); max-width: 46ch; margin: 26px 0 0; } .pf-ctas { grid-column: 1 / 8; grid-row: 4; display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; } .pf-btn { font-family: var(--font-label); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; padding: 14px 22px; border-radius: 999px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; border: 1px solid transparent; transition: transform .15s ease; } .pf-btn:hover { transform: translateY(-2px); } /* Auditoría C:\GENOS-AUDIT-EXACT\BUTTONS-SOCIAL-EXACT-AUDIT.md: CTA verde de marca de GenOS (.bento-btn) aplicado aquí — background/hover/radius/color/transition EXACTOS medidos. NO se tocan width/height/padding/font-family/font-size/font-weight de este botón: son geometría/tipografía propia del componente Michemical (radius:999px→6px es un cambio de estilo visual, no de dimensión, así que sí se copia). font-weight NO se sube a 700 (el valor de GenOS) porque "Departure Mono Preview" solo tiene el archivo @font-face de peso 400 cargado — forzar 700 aquí produciría negrita sintética débil, el mismo problema ya evitado deliberadamente en el nav en una etapa anterior. .pf-btn.secondary ("HABLEMOS") NO forma parte del grupo azul auditado — sigue exactamente igual. */ .pf-btn.primary { background: rgb(192, 254, 4); color: rgb(0, 0, 0); border-radius: 6px; transition: background .2s ease, transform .15s ease; } .pf-btn.primary:hover { background: rgb(170, 238, 0); transform: translateY(-1px); } /* Auditoría BUTTONS-CATEGORIES-OFFER-AUDIT.md: única diferencia de FORMA real medida entre HABLEMOS y EXPLORAR CATÁLOGO era el border-radius (altura/padding/tipografía/flex ya eran idénticos) — se iguala a 6px. Color/fondo/borde de HABLEMOS quedan sin tocar a propósito (el pedido fue "misma forma", no "mismo color"). */ .pf-btn.secondary { background: transparent; color: var(--ink); border-color: var(--line); border-radius: 6px; } .pf-scroll-hint { grid-column: 1/13; grid-row: 5; margin-top: 60px; font-family: var(--font-label); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: center; } /* ============ SEGUNDA SECCIÓN — "NUESTRA HISTORIA" (post-hero) ============ Auditoría C:\GENOS-AUDIT-EXACT\OUR-STORY-EXACT-AUDIT.md — valores medidos de #about-s de GenOS (no estimados): padding 72px 56px (sección) + 32px 8px (wrapper interno, el mismo doble padding real de GenOS: 4.5rem/1rem base + 2rem/0.5rem de .ab-content), sin height/min-height (altura por contenido, igual que GenOS: 657.39px en GenOS es un RESULTADO, no un valor fijado). STACKING (corregido — auditoría STICKERS-CLIP-SIZE-EXACT-AUDIT.md): la versión anterior ponía z-index:2 y el fondo #fbfaf4 en la SECCIÓN misma, como un solo bloque — eso crea su propio stacking context, y con #pf-grid fijo en z:1 (nunca se toca, ver #pf-grid), ese bloque único quedaba SIEMPRE por encima del grid dentro de Story, ocultándolo, sin importar el valor. Igual que se hizo con .pf-featured-section: la sección ya NO tiene z-index propio (position:relative sigue sirviendo como containing block del ::before, pero sin z-index no crea stacking context) — el fondo vive en ::before (z:0) y el contenido en .pf-story-inner (z:4), cada uno participando por separado en el stacking context raíz junto a #pf-grid(1) y #pf-stickers(-1, ver ese selector). Resultado: stickers(-1) < fondo Story(0) < grid(1) < contenido Story(4) — el fondo ocluye los stickers que caen detrás, PERO queda por debajo del grid, que sigue visible encima, exactamente como #about-s(2) oculta a #bg-canvas(1) en GenOS mientras su grid(20) sigue por encima de ambos. */ .pf-story { position: relative; padding: 72px 56px; } .pf-story::before { content: ""; position: absolute; inset: 0; z-index: 0; background: #fbfaf4; pointer-events: none; } .pf-story-inner { position: relative; z-index: 4; /* por encima de #pf-grid(1)/#pf-stickers(-1); por debajo de #pf-fluid(9997) y el header(50) */ display: flex; flex-direction: column; gap: 24px; padding: 32px 8px; } .pf-story-title { font-family: var(--font-display); font-size: 25.6px; font-weight: 800; line-height: normal; letter-spacing: -.64px; color: var(--ink); margin: 0; } .pf-story-title::after { content: ""; display: block; width: 40px; height: 3px; background: rgb(192, 254, 4); margin-top: 6.4px; margin-bottom: 0; } .pf-story-body { font-family: var(--font-mono); font-size: 15px; font-weight: 500; line-height: 25.5px; letter-spacing: normal; color: var(--ink); max-width: 50%; margin: 0; } .pf-story-body strong { font-weight: 700; } /* Auditoría BUTTONS-SOCIAL-EXACT-AUDIT.md: bloque social de "Our Story" (.ab-links > .ab-link > .social-ico en GenOS) — aquí colapsado a un solo nivel: el propio ES la caja circular 44×44 medida (.social-ico), sin replicar el wrapper rectangular exterior de GenOS (.ab-link, 66×54px, borde/hover distinto) que el brief no pidió reproducir. gap:8px = el mismo valor medido para el bloque "about" de GenOS (el bloque "footer" usa 12px, no aplica aquí). */ .pf-social { display: flex; gap: 8px; } .pf-social-ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(192, 254, 4, .35); background: rgba(192, 254, 4, .03); box-shadow: rgba(192, 254, 4, .15) 0 0 6px 0; color: rgb(0, 0, 0); text-decoration: none; animation: iconFlash 2.4s ease-in-out infinite; } .pf-social-ico svg { width: 22px; height: 22px; display: block; } .pf-social-ico:hover { border-color: rgb(192, 254, 4); transform: scale(1.18); background: rgba(192, 254, 4, .07); } @keyframes iconFlash { 0% { box-shadow: transparent 0 0 0 0; background: transparent; } 40% { box-shadow: rgba(192, 254, 4, .7) 0 0 14px 5px, rgba(91, 140, 255, .3) 0 0 28px 10px; background: rgba(192, 254, 4, .08); } 70% { box-shadow: rgba(160, 107, 255, .5) 0 0 10px 3px; } 100% { box-shadow: transparent 0 0 0 0; background: transparent; } } /* ============ WHATSAPP FLOTANTE — GLOBAL, independiente del bloque social ============ Auditoría FINAL-ALIGNMENT-ANIMATION-WHATSAPP-AUDIT.md Parte E: .wa-float real de GenOS — fixed, 58×58px, right/bottom:24px, radius:50%, padding:0, background:rgb(37,211,102), sin borde, z-index:9999, ícono 28×28px, box-shadow base rgba(37,211,102,.5) 0 4px 20px 0 + animación waPulse propia (NO iconFlash — es otra animación, con otro keyframe y otro propósito). Visible en las 7 secciones probadas por GenOS sin excepción (fixed a nivel BODY, nunca se mueve/oculta/cambia). Color del glyph SVG interior: NO auditado explícitamente en el informe (solo tamaño 28×28px) — se usa blanco (convención universal del badge de WhatsApp, incluida su propia identidad de marca oficial), necesidad técnica mínima reportada, no un valor medido. */ .pf-wa-float { position: fixed; right: 24px; bottom: 24px; z-index: 9999; width: 58px; height: 58px; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgb(37, 211, 102); border: none; color: #fff; box-shadow: rgba(37, 211, 102, .5) 0 4px 20px 0; animation: waPulse 2.5s ease-in-out infinite; transition: transform .2s, box-shadow .2s; } .pf-wa-float svg { width: 28px; height: 28px; display: block; } .pf-wa-float:hover { transform: scale(1.12); box-shadow: rgba(37, 211, 102, .5) 0 4px 20px, rgba(37, 211, 102, .075) 0 0 0 10.54px; } @keyframes waPulse { 0%, 100% { box-shadow: rgba(37, 211, 102, .5) 0 4px 20px, rgba(37, 211, 102, .3) 0 0 0 0; } 60% { box-shadow: rgba(37, 211, 102, .5) 0 4px 20px, rgba(37, 211, 102, 0) 0 0 0 14px; } } /* ============ BARRA TÉCNICA GLOBAL (.pf-techbar) ============ Auditoría FINAL-BOTTOM-DECOR-METADATA-AUDIT.md Parte E/10/11: .hb real de GenOS — fixed (mismo z-index:50 que su
, del que es hijo), rect completo 0,828.2,1440×71.8 a 1440×900 → padding:22.4px 56px (56px = mismo padding horizontal que .ft-bot del footer), display:flex;justify-content:space-between;align-items:center (NO es centrado absoluto: el bloque central queda donde space-between lo deja según el ancho de los 3 textos, confirmado en la auditoría — no se fuerza ningún centrado adicional). Tipografía compartida por los 3 bloques: tronica-mono→var(--font-label) (mismo mapeo ya establecido en todo el proyecto), 13.6px, weight 400, letter-spacing 0.408px, uppercase, rgba(54,54,48,.6)→var(--muted) (mismo mapeo de "gris secundario" ya establecido, en vez de copiar el rgba literal de GenOS). z-index:50 igual al header (mismo nivel auditado, sin mover ni rediseñar el header principal — este es un componente aislado, separado del nav). pointer-events:none: es contenido informativo, no interactivo (igual criterio que el propio
de GenOS, que también es pointer-events:none en su wrapper). */ .pf-techbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 22.4px 56px; pointer-events: none; } .pf-techbar span { font-family: var(--font-label); font-size: 13.6px; font-weight: 400; letter-spacing: .408px; text-transform: uppercase; color: var(--muted); } @media (max-width: 480px) { /* Auditoría Parte I: GenOS oculta el bloque IZQUIERDO (.hcp, vía clase "dn") a 390px de ancho, dejando reloj+coordenadas visibles. Mismo comportamiento conceptual aquí — breakpoint reutilizado del ya establecido en este archivo (480px), ya que la auditoría no documentó el valor exacto del media query de GenOS, solo el resultado observado a 390px. */ .pf-techbar-left { display: none; } } /* ============ TERCERA SECCIÓN — "LO MÁS PEDIDO" (post-hero) ============ Auditoría C:\GENOS-AUDIT-EXACT\AFTER-HERO-SECTION-AUDIT.md: GenOS corta ABRUPTO de transparente/celeste a crema sólido exactamente al terminar el hero — sin gradiente, sin fade, sin animación de entrada. #pf-grid y #pf-fluid ya son fixed/inset:0, así que siguen apareciendo por encima de esta sección automáticamente, sin ningún cambio aquí. #featuredGrid/.product-card/.card-body/etc. usan el MISMO nombre de clase que producción (public\app.js::productCard()) a propósito, para que este markup sea portable sin rehacerlo — solo se re-estiliza la superficie, ver app.js (renderFeatured/productCard, reutilizado sin cambios). */ .pf-featured-section { /* SIN z-index propio a propósito: con z-index:auto (el default), position:relative NO crea un stacking context aquí, así que ::before (fondo, z:0) y .pf-featured-inner (contenido, z:4) participan CADA UNO por separado en el stacking context raíz —igual que #pf-grid (z:1)— en vez de quedar atrapados como una sola capa monolítica por encima de él (ese era el bug: z-index:5 + fondo opaco en el MISMO elemento ocultaba grid/fluid en toda esta sección). Nota (auditoría OUR-STORY-EXACT-AUDIT.md): desde que #pf-fluid subió a z:9997 (ver #pf-fluid), z:4 aquí ya NO está por encima del fluid — coincide con el propio GenOS, donde el fluid puede pintarse sobre CUALQUIER contenido, header incluido. */ position: relative; padding: 120px 56px 140px; } .pf-featured-section::before { content: ""; position: absolute; inset: 0; z-index: 0; background: #fbfaf4; pointer-events: none; } .pf-featured-inner { position: relative; z-index: 4; /* por encima de #pf-grid(1)/#pf-stickers(-1); por debajo de #pf-fluid(9997) y del header(50) */ } /* Auditoría C:\GENOS-AUDIT-EXACT\SERVICES-HEADER-EXACT-AUDIT.md: reemplaza la cabecera anterior (eyebrow+H2 gigante+descripción, 414.59px de alto medido) por el componente EXACTO de GenOS para "Services" (div.wh > span.wh-t) — aquí "Servicios", texto propio de Michemical, misma estructura/medidas. .pf-featured-wh es block-level normal (sin grid): con box-sizing:border-box ya global, llena el 100% del ancho de contenido de la sección (1328px a 1440px de viewport = 1440-56-56, ya provisto por el padding existente de .pf-featured-section, sin tocarlo) — el border-bottom hereda ese mismo ancho de forma natural, sin necesidad de calcularlo ni de un valor fijo en px. padding-left/right:8px reproduce el mismo patrón "56px sección + 8px wrapper = 64px" ya usado en "Nuestra historia" para alinear el título con la primera línea vertical del grid (x=63.5). Altura proyectada: 120 (padding-top de sección, sin cambios) + 8+36+20+2+40 (componente .wh) ≈ 226px, frente a los 414.59px anteriores — más compacto, como GenOS. */ .pf-featured-wh { padding: 8px 8px 20px; margin-bottom: 40px; border-bottom: 2px solid #000; } .pf-featured-wh-title { font-family: var(--font-display); font-size: 28px; font-weight: 800; line-height: normal; letter-spacing: -.84px; color: var(--ink); text-transform: none; margin: 0; } .pf-featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } /* Re-skin de las mismas clases que renderFeatured()/productCard() generan en producción — estructura intacta, solo cambia tipografía/superficie al lenguaje editorial del hero. */ .pf-featured-grid .product-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; } .pf-featured-grid .product-media { position: relative; aspect-ratio: 16/10; background: #f1f0e9; display: flex; align-items: center; justify-content: center; } .pf-featured-grid .product-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .pf-featured-grid .product-media .fallback-icon { display: none; font-family: var(--font-label); font-size: 22px; letter-spacing: .04em; color: var(--muted); } .pf-featured-grid .product-media.empty .fallback-icon, .pf-featured-grid .product-media.broken .fallback-icon { display: block; } .pf-featured-grid .product-media.empty img, .pf-featured-grid .product-media.broken img { display: none; } .pf-featured-grid .card-body { flex: 1; display: flex; flex-direction: column; gap: 16px; padding: 22px 22px 24px; } /* Auditoría CARDS-TEXT-OFFER-EXACT-AUDIT.md: GenOS JAMÁS colorea el texto de sus etiquetas equivalentes (.wc-badge) en verde — el verde ahí es solo el FONDO de una píldora, el texto siempre es negro puro. Se corrige color de texto verde → var(--ink) (mismo mapeo ya usado en toda la card para el "negro" de GenOS), sin tocar fondo/tamaño/peso/tipografía. */ .pf-featured-grid .badge.single { display: inline-block; font-family: var(--font-label); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin-bottom: 10px; } .pf-featured-grid h3 { /* Auditoría: única diferencia real de título vs GenOS era font-weight (700 vs 500) — color base ya era prácticamente idéntico (rgb(0,0,0) GenOS vs var(--ink) Michemical). */ font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.2; color: var(--ink); margin: 0 0 8px; } .pf-featured-grid .card-text { /* Auditoría: mismo font-weight (400) que GenOS; la diferencia real era el alfa .62 del propio rgba() de --muted, NO una opacity CSS separada. Se pasa a var(--ink) sólido. */ font-family: var(--font-mono); font-size: 13.5px; line-height: 1.55; color: var(--ink); margin: 0; } .pf-featured-grid .feature-list { /* Auditoría: GenOS no tiene bullets (sin equivalente auditado) — el hallazgo aplicable es que Michemical los aclaraba artificialmente con opacity:.8 aparte (no alfa de color). Se sube a 1; texto/tamaño/tipografía/indentación/símbolos sin tocar. */ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); opacity: 1; } .pf-featured-grid .feature-list li { padding-left: 14px; position: relative; } .pf-featured-grid .feature-list li::before { content: "—"; position: absolute; left: 0; opacity: .5; } .pf-featured-grid .price-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); } /* Auditoría: .price ya coincide con GenOS (color var(--ink) sólido, weight 700, sin alfa) — NO se toca, confirmado explícitamente correcto. */ .pf-featured-grid .price { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink); } /* Auditoría: mismo alfa .62 de --muted que .card-text — se pasa a var(--ink) sólido. */ .pf-featured-grid .monthly { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--ink); margin-top: 2px; } /* Auditoría BUTTONS-CATEGORIES-OFFER-AUDIT.md: causa raíz confirmada del wrap de "Ver oferta" en 4/6 cards a 1440px — .price-row (flex, space-between) no daba flex-shrink:0 a ningún hijo, así que cuando el texto de precio vecino era largo ("Cotización según proyecto"), .card-actions se encogía por debajo del mínimo de una línea del botón (~110.6px, medido en las 2 cards que ya renderizaban bien y confirmado con control a 1920px). No se fija un width — con flex-shrink:0 el botón alcanza naturalmente su ancho de una sola línea con su padding/font ya existentes. */ .pf-featured-grid .card-actions { display: flex; gap: 8px; flex-shrink: 0; } .pf-featured-grid .btn { font-family: var(--font-label); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 10px 16px; border-radius: 999px; text-decoration: none; border: 1px solid transparent; display: inline-flex; align-items: center; cursor: pointer; transition: transform .15s ease; background: none; } .pf-featured-grid .btn:hover { transform: translateY(-1px); } /* Auditoría CARDS-TEXT-OFFER-EXACT-AUDIT.md (Parte H): igualado a AGREGAR — auditoría confirmó que height/padding/tipografía/white-space/display/hover-transform YA coincidían; las únicas 5 propiedades realmente distintas eran background/radius/border-color/color/ hover-background, ahora igualadas 1:1 a los valores reales de .btn:not(.secondary) (ver abajo). Se mantiene el fix de flex-shrink:0 de .card-actions (una sola línea). */ .pf-featured-grid .btn.secondary { background: rgb(192, 254, 4); color: rgb(0, 0, 0); border-radius: 6px; border-color: transparent; } .pf-featured-grid .btn.secondary:hover { background: rgb(170, 238, 0); } /* Auditoría BUTTONS-SOCIAL-EXACT-AUDIT.md: mismo CTA verde de .pf-btn.primary aplicado a los 6 botones "Agregar" — hover transform ya coincidía con GenOS (-1px, regla compartida arriba), solo faltaban background/color/radius/transition. */ .pf-featured-grid .btn:not(.secondary) { background: rgb(192, 254, 4); color: rgb(0, 0, 0); border-radius: 6px; transition: background .2s ease, transform .15s ease; } .pf-featured-grid .btn:not(.secondary):hover { background: rgb(170, 238, 0); } .pf-featured-empty, .pf-featured-error { grid-column: 1 / 13; font-family: var(--font-mono); font-size: 14px; color: var(--muted); text-align: center; padding: 40px 0; } /* ============ WARP — escena final negra, INDEPENDIENTE del footer (400vh scroll-pin) ============ Auditoría C:\GENOS-AUDIT-EXACT\WARP-TO-FOOTER-EXACT-AUDIT.md: GenOS tiene #warp-s (negro, 400vh) y