/* ============================================================ VIDRIO — la receta APROBADA. Portada de aizurg-demo/ummo (Nico 2026-08-06: «esa también me gusta») y de 01-Projects/ockulta-demo. Son DOS capas, y la primera es la que vende: 1. material CSS → borde cónico enmascarado + specular + sombras internas que simulan el GROSOR del vidrio. Corre en todos lados. 2. refracción real → feDisplacementMap sobre las superficies de más peso (nav, carrito, credencial, FAB). La monta vidrio.js. LA LEY: lo INTERACTIVO es vidrio, lo ESTÁTICO es editorial. LA CONDICIÓN: el vidrio necesita CONTRA QUÉ refractar. En las dos demos aprobadas hay una forma grande de materia cruzando por detrás de cada panel (el arco del planeta en UMMO, la foto de la canilla + el chopp en Ockulta). Sin eso, el glass es una tarjeta translúcida porque sí — el tell de AI-slop. ============================================================ */ :root { /* Redefinilos con la paleta del cliente sacada de su logo. El tint SIEMPRE lleva algo del hue de marca; el gris neutro con luces difusas es el tell con veto textual («muy genérico, muy IA»). */ --glass-bg: linear-gradient(148deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .045) 42%, rgba(255, 255, 255, .085) 100%); --glass-blur: 22px; --glass-r: 26px; --glass-r-chico: 16px; --acento: #F5A81E; /* el acento de marca, uno solo, AA */ --acento-hi: #FFCB5C; } /* ── CAPA 1 · el material ─────────────────────────────────── */ .glass { position: relative; isolation: isolate; /* las capas del vidrio no se escapan */ background: var(--glass-bg); border-radius: var(--glass-r); backdrop-filter: blur(var(--glass-blur)) saturate(185%) brightness(1.08); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(185%) brightness(1.08); /* las seis primeras sombras son el GROSOR: aro perimetral + la luz que entra por el canto de abajo. Las dos últimas separan del fondo. */ box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .42), inset 1px 0 0 0 rgba(255, 255, 255, .14), inset -1px 0 0 0 rgba(255, 255, 255, .14), inset 0 -1px 0 0 rgba(255, 255, 255, .08), inset 0 -14px 34px -22px rgba(255, 255, 255, .30), 0 26px 60px -26px rgba(0, 0, 0, .85), 0 2px 10px -4px rgba(0, 0, 0, .6); } .glass--chico { border-radius: var(--glass-r-chico); } /* el borde iluminado: una capa cónica enmascarada al contorno. Es lo que hace que el canto tenga dirección de luz en vez de un stroke parejo. El acento entra acá al 46% del barrido. */ .glass::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: conic-gradient(from 210deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .06) 24%, var(--acento-hi) 46%, rgba(255, 255, 255, .05) 66%, rgba(255, 255, 255, .55) 88%, rgba(255, 255, 255, .62)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 2; } /* el brillo especular que corre por arriba */ .glass::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 46%; border-radius: inherit; background: linear-gradient(178deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 78%); pointer-events: none; z-index: 1; } /* ★ El contenido va ENCIMA de las capas del vidrio. Sin esta línea, los pseudo-elementos con background tapan el texto — la falla que en su momento nos hizo desconfiar de los ::before y volver al inset puro. Con isolation:isolate + z-index explícito (1 · 2 · 3) el problema no existe. */ .glass > * { position: relative; z-index: 3; } /* ── CAPA 2 · refracción real ───────────────────────────────── La monta vidrio.js: pone html.has-refract sólo si el browser banca filtros SVG dentro de backdrop-filter (Chrome/Edge sí, WebKit NO). Sin refracción se queda con la capa 1, que ya se ve bien — y eso es el diseño para la mitad de los browsers, así que tiene que leer correcto igual. */ html.has-refract .glass--refract, html.has-refract [data-lente] { /* vidrio.js pisa esto inline con el filtro del tamaño exacto */ backdrop-filter: blur(11px) saturate(190%) brightness(1.1); -webkit-backdrop-filter: blur(11px) saturate(190%) brightness(1.1); } /* ── Reglas duras del material ────────────────────────────── 1. backdrop-filter SÓLO en capas estáticas. Un panel/drawer/popover que ANIMA no lleva blur propio (tint casi sólido .93; el blur vive en el overlay que no se mueve): animar blur re-rasteriza el subtree por frame. 2. Un z-index en un ANCESTRO crea stacking context y el backdrop deja de "ver" el fondo → la superficie sale en caja opaca. 3. Cap ~6 superficies de vidrio por PANTALLA. El vidrio marca lo interactivo; si todo es vidrio, nada lo es. 4. Nunca un vidrio sobre fondo plano: sin materia detrás no refracta nada. */ .glass--animado { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--glass-solido, rgba(20, 16, 8, .93)); } /* ============================================================ EL MUNDO — el fondo que le da al vidrio contra qué refractar. Patrón común a las dos demos aprobadas: fondo oscuro + UNA fuente de luz FÍSICA a la vista + una forma grande de materia + grano. Cambiá la forma por la del negocio (planeta, arco, vaso, chapa, parrilla). ============================================================ */ .mundo { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } /* la luz de la casa: tenue, para que el fondo quede oscuro y el vidrio se recorte. Dos radiales con el acento, NUNCA glows difusos centrados. */ .mundo__luz { position: absolute; inset: 0; background: radial-gradient(64% 46% at 82% 4%, rgba(245, 168, 30, .14), transparent 66%), radial-gradient(56% 44% at 8% 34%, rgba(224, 82, 27, .09), transparent 70%); } /* la forma: acá va el objeto-eje o el horizonte. El tamaño se calibra para que el arco caiga DENTRO de la pantalla en desktop y en mobile — es lo que hace legible al vidrio de arriba. Cuerpo casi negro con la luz concentrada en el borde: materia de noche, no un degradado. */ .mundo__forma { position: absolute; left: 50%; bottom: -140vw; width: 170vw; height: 170vw; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 50% 2%, rgba(255, 203, 92, .55) 0%, rgba(190, 110, 12, .30) 2.2%, #1A1006 7%, #0F0904 20%, #080502 46%); box-shadow: 0 0 0 1.5px rgba(255, 203, 92, .42), 0 0 120px 10px rgba(245, 168, 30, .16), inset 0 26px 130px -60px rgba(245, 168, 30, .5); } /* el grano: una textura, no un gradiente. Es la diferencia entre "materia" y el fondo-IA. vidrio.js setea --grano; esto es el fallback estático. */ .mundo__grano { position: absolute; inset: 0; opacity: .16; mix-blend-mode: overlay; background-image: var(--grano, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")); } /* el contenido de la página vive encima del mundo */ main, .nav, .cartel-demo, footer { position: relative; z-index: 1; }