/* ═══════════════════════════════════════════════════════════════════════
LUZ — la home como un junk journal físico (2026-08-28, segunda pasada).
Identidad SEPARADA de "Collage Indie" (estilos.css), que sigue rigiendo
el resto del sitio: lectura, tienda, cuenta, cómo funciona, catálogo
completo. Todo lo de este archivo cuelga de `body.tema-luz-activo`, que
app.js pone y saca según la vista activa — un solo punto de contacto.
Regla que gobierna el archivo:
"no es una web con decoración de junk journal; es una web cuya interfaz
entera está diseñada como un junk journal".
Por eso NADA acá es un rectángulo de UI: todo bloque es una hoja con
fibra, borde rasgado, giro propio y una sombra distinta de la de al lado.
═══════════════════════════════════════════════════════════════════════ */
body.tema-luz-activo{
/* ---- paleta (§43): apagada, cálida, nada saturado digital ---- */
--lz-crema:#F1EBDD; --lz-crema-rgb:241,235,221;
--lz-papel:#E8DCC6; --lz-papel-2:#DFD0B4; --lz-papel-3:#D6C4A3;
--lz-oscuro:#272522; --lz-oscuro-rgb:39,37,34;
--lz-tinta:#4A4238; --lz-tinta-suave:#6B6053;
--lz-salvia:#68705C; --lz-salvia-rgb:104,112,92;
--lz-oliva:#77745D; --lz-oliva-rgb:119,116,93;
--lz-rosa:#C79B90; --lz-rosa-rgb:199,155,144;
--lz-terracota:#B66F52; --lz-terracota-rgb:182,111,82;
--lz-mostaza:#C5A044; --lz-mostaza-rgb:197,160,68;
--lz-azul:#71838A; --lz-azul-rgb:113,131,138;
--lz-oro:#B28A37; --lz-oro-rgb:178,138,55;
--lz-oro-tinta:#7F5C1F; /* dorado legible: 5.12:1 sobre crema, medido */
--lz-borgona:#7C443A;
/* ═══ SISTEMA TIPOGRAFICO (2026-09-03) ═══════════════════════════════════
El dueño eligio CINCO de diez muestras: O, P, N, L, G. Son de mundos
distintos, asi que en vez de descartar cuatro, cada una toma el rol donde
su forma SIGNIFICA algo — que es como funciona un collage de verdad: no
una tipografia, sino recortes de varias fuentes con una logica.
G · Poiret One → titulos (art deco fino, la voz principal)
O · Anton → numerales y precios (impacto, contraste)
L · Uncial Antiqua → nombres de las cartas (letra de manuscrito)
P · Petit Formal Script → notas de papel y poemas (escrito a mano)
N · Shrikhand → marca del footer y cinta (cierre calido)
Jost queda en la UI; EB Garamond en los parrafos largos de la lectura. */
--lz-serif:'Poiret One',Georgia,'Times New Roman',serif; /* G */
--lz-numero:'Anton',Impact,system-ui,sans-serif; /* O */
--lz-carta:'Uncial Antiqua',Georgia,serif; /* L */
--lz-mano:'Petit Formal Script','Segoe Script',cursive; /* P */
--lz-marca:'Shrikhand',Georgia,serif; /* N */
--lz-texto:'EB Garamond',Georgia,serif; /* parrafos largos: la lectura misma */
/* JOST = la Futura de Google Fonts: la voz geometrica mid-century para
etiquetas en mayusculas, numerales chicos, botones y cuerpo corto.
Reemplaza a Work Sans (2026-09-02, estructura V2). */
--lz-sans:'Jost',system-ui,-apple-system,sans-serif;
/* ---- sombras (§18, §35): tres pesos, para que NO todas las piezas
lleven la misma. "objeto sobre papel", nunca "elevated card UI". ---- */
--lz-s1:0 2px 6px rgba(40,30,20,.10);
--lz-s2:0 6px 14px rgba(40,30,20,.15);
--lz-s3:0 13px 28px rgba(40,30,20,.20);
/* ---- fibra de papel: ruido procedural, tilea perfecto a cualquier
tamaño (un swatch fotográfico deja costuras al repetir) ---- */
--lz-fibra:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23f)' opacity='.5'/%3E%3C/svg%3E");
/* ---- veteado de pulpa: manchas MUY suaves y grandes, no rayas.
Primera versión usaba baseFrequency='.006 .5' (X bajísima, Y alta) y salía
un rayado horizontal tipo cartón corrugado que dominaba toda la página —
"la textura es ambiente, no protagonista" (§2.6, §42). Ahora la frecuencia
es casi isotrópica y la opacidad baja 3×: se ve al acercarse, no de lejos. ---- */
--lz-veteado:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011 .017' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23h)' opacity='.14'/%3E%3C/svg%3E");
background:var(--lz-crema);
}
/* Las capas de Collage Indie (grano oscuro, viñeta de vela, efímera) no
aplican acá: Luz trae su propia materialidad. */
body.tema-luz-activo .velon,
body.tema-luz-activo .grano,
body.tema-luz-activo .efimera{display:none}
/* El toggle claro/oscuro no tiene sentido sobre una identidad de marca fija */
body.tema-luz-activo .tg-tema{display:none}
/* ═══ EL CANVAS — una sola hoja grande, no un stack de secciones (§6) ═══
Tres capas de textura superpuestas:
1. manchas de baja frecuencia (el papel no tiene un tono plano)
2. hebras largas de fibra
3. grano fino
Ninguna sube de .06 de opacidad: textura de ambiente, nunca ruido (§42). */
body.tema-luz-activo #vCatalogo{
position:relative; z-index:1; isolation:isolate;
/* La hoja recorta sus propias decoraciones en el canto, como una página real.
Causa medida antes de aplicarlo (§2.14 prohíbe usar esto como parche a
ciegas): las piezas que asoman a propósito —carta de tarot en right:-3%,
flor en left:-7%, tarjetas rotadas— generaban 9-16px de scroll horizontal
real a ≤768px. `clip` y no `hidden`: no crea contenedor de scroll, así que
no rompe posicionamiento ni agrega barra. Verificado que ningún texto vive
a menos de 18px del borde, así que no se recorta contenido. */
overflow-x:clip;
color:var(--lz-oscuro); background:var(--lz-crema);
background-image:
radial-gradient(ellipse 40% 30% at 12% 8%, rgba(182,111,82,.055), transparent 70%),
radial-gradient(ellipse 45% 26% at 88% 22%, rgba(104,112,92,.05), transparent 72%),
radial-gradient(ellipse 35% 22% at 20% 62%, rgba(178,138,55,.045), transparent 70%),
radial-gradient(ellipse 50% 30% at 78% 88%, rgba(124,68,58,.04), transparent 74%),
var(--lz-veteado), var(--lz-fibra);
background-size:auto, auto, auto, auto, 420px 420px, 200px 200px;
background-blend-mode:normal, normal, normal, normal, multiply, multiply;
}
/* Borde del canvas: el papel se oscurece apenas contra los cantos, como una
hoja fotografiada. No es una viñeta de UI — es muy tenue y no se mueve. */
body.tema-luz-activo #vCatalogo::before{
content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
background:
linear-gradient(90deg, rgba(120,96,64,.07), transparent 9%, transparent 91%, rgba(120,96,64,.07)),
linear-gradient(180deg, rgba(120,96,64,.05), transparent 5%, transparent 96%, rgba(120,96,64,.06));
}
/* ═══ UTILIDADES DE MATERIAL (§54) ═══════════════════════════════════════ */
/* Una hoja de papel: color + fibra + sombra. El borde rasgado lo pone
.lz-rasgado-a/b/c por separado, para poder variarlo pieza por pieza. */
.lz-papel{
position:relative;
background-color:var(--lz-papel);
background-image:var(--lz-fibra);
background-size:200px 200px; background-blend-mode:multiply;
box-shadow:var(--lz-s2);
}
/* Tres bordes rasgados DISTINTOS. Repetir uno solo delata el componente. */
.lz-rasgado-a{
clip-path:polygon(0% 2.4%, 5% .5%, 13% 2.8%, 22% .4%, 31% 2.2%, 41% .6%, 52% 2.6%, 62% .5%,
71% 2.4%, 81% .7%, 90% 2.5%, 100% .8%,
99.3% 26%, 100% 52%, 99.2% 77%, 100% 98%,
91% 99.4%, 82% 97.3%, 72% 99.5%, 61% 97.4%, 50% 99.3%, 39% 97.2%, 29% 99.4%,
19% 97.5%, 10% 99.5%, 3% 97.6%, 0% 99%,
.8% 74%, 0% 49%, .7% 25%);
}
.lz-rasgado-b{
clip-path:polygon(0% 1.6%, 8% 3.2%, 17% .4%, 26% 2.9%, 36% .7%, 47% 2.4%, 57% .3%, 68% 2.7%,
77% .6%, 87% 2.9%, 95% .5%, 100% 2.2%,
99.4% 31%, 100% 61%, 99.3% 88%, 100% 99%,
89% 97.4%, 78% 99.5%, 68% 97.2%, 57% 99.4%, 46% 97.3%, 36% 99.6%, 25% 97.4%,
14% 99.3%, 5% 97.5%, 0% 99.4%,
.6% 66%, 0% 38%, .8% 16%);
}
.lz-rasgado-c{
clip-path:polygon(0% 3.4%, 6% .6%, 15% 3%, 25% .8%, 34% 2.6%, 44% .4%, 55% 2.8%, 65% .6%,
74% 3.1%, 84% .5%, 93% 2.7%, 100% 1%,
99.2% 22%, 100% 44%, 99.4% 68%, 100% 96.6%,
93% 99.5%, 84% 97.2%, 74% 99.4%, 63% 97.5%, 52% 99.2%, 42% 97.4%, 31% 99.5%,
21% 97.3%, 11% 99.4%, 4% 97.4%, 0% 98.8%,
.7% 70%, 0% 43%, .9% 21%);
}
/* Cinta de enmascarar. Semitransparente, beige amarillento, con hilos
verticales tenues (el arrugado) y los DOS extremos rasgados por máscara —
nunca un rectángulo perfecto (§19). */
.lz-cinta{
position:absolute; z-index:60; pointer-events:none;
width:82px; height:23px;
background:
repeating-linear-gradient(90deg, rgba(255,255,255,.13) 0 1px, transparent 1px 7px),
linear-gradient(170deg, rgba(226,208,168,.68), rgba(203,182,138,.6));
box-shadow:0 1px 3px rgba(40,30,20,.14);
-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
mask-image:linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
transform:rotate(var(--cinta-giro,-4deg));
}
.lz-cinta::after{ /* fibra dentro de la propia cinta */
content:""; position:absolute; inset:0; opacity:.5; mix-blend-mode:multiply;
background-image:var(--lz-fibra); background-size:120px 120px;
}
.lz-cinta-a{ top:-11px; left:14%; --cinta-giro:-5deg }
.lz-cinta-b{ bottom:-10px; right:16%; --cinta-giro:3.5deg; width:66px }
/* ═══ RECORTE SOBRE PAPEL (§18) ═══════════════════════════════════════════
Un recorte pálido (lirios blancos, palomas) sobre el fondo crema se lava y
se lee como una mancha gris. La solución no es subirle el contraste a la
foto: es la del propio junk journal — pegarlo sobre un papelito recortado
un poco más grande, con su giro y su sombra. Sirve para cualquier pieza. */
.lz-recorte{ position:relative; display:block; transform:rotate(var(--giro,0deg)) }
.lz-recorte::before{
content:""; position:absolute; inset:-8% -9%; z-index:0;
background-color:#F7F2E6; background-image:var(--lz-fibra);
background-size:150px 150px; background-blend-mode:multiply;
box-shadow:var(--lz-s2); transform:rotate(var(--giro-papel,-3deg));
clip-path:polygon(0% 4%, 8% .6%, 20% 4%, 33% .8%, 46% 3.6%, 59% .5%, 72% 4%, 85% .7%, 100% 3%,
98.8% 34%, 100% 68%, 99% 97%,
87% 99.4%, 74% 96.6%, 60% 99.5%, 46% 96.8%, 32% 99.4%, 18% 96.6%, 6% 99.5%, 0% 97%,
1.2% 66%, 0% 33%);
}
.lz-recorte img{ position:relative; z-index:1; width:100%; height:auto; display:block }
/* Sparkles: polvo dorado. Tamaño, opacidad, giro y ritmo VARIADOS (§41) —
el mismo SVG repetido 30 veces con idéntico tamaño se nota. */
.lz-brillo{
position:absolute; z-index:30; pointer-events:none; color:var(--lz-oro);
width:var(--b,11px); height:var(--b,11px); opacity:.75;
transform:rotate(var(--bg,0deg));
animation:lzDestello var(--bd,4.2s) ease-in-out infinite var(--br,0s);
}
.lz-brillo svg{width:100%; height:100%}
@keyframes lzDestello{ 0%,100%{opacity:.28; transform:rotate(var(--bg,0deg)) scale(.82)}
50%{opacity:.9; transform:rotate(var(--bg,0deg)) scale(1)} }
@keyframes lzFlotar{ 0%,100%{transform:translateY(0) rotate(var(--giro,0deg))}
50%{transform:translateY(-4px) rotate(var(--giro,0deg))} }
@keyframes lzGiraLento{ to{transform:rotate(360deg)} }
@keyframes lzEntra{ from{opacity:0; transform:translateY(16px) rotate(var(--giro,0deg)) scale(.985)}
to{opacity:1; transform:translateY(0) rotate(var(--giro,0deg)) scale(1)} }
/* La flotacion va en el HIJO (img o recorte), no en la caja: la caja la mueve
la entrada coreografiada y despues el parallax del mouse. Un `img` suelto
flota sin rotar (la rotacion la tiene la caja); un `.lz-recorte` flota con
su propio giro, que ya vive en el. */
@keyframes lzFlotarIn{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.lz-flota > img{ animation:lzFlotarIn 6.5s ease-in-out infinite }
.lz-flota > .lz-recorte{ animation:lzFlotar 6.5s ease-in-out infinite }
.lz-flota-b > img, .lz-flota-b > .lz-recorte{ animation-duration:8s; animation-delay:-2.6s }
.lz-flota-c > img, .lz-flota-c > .lz-recorte{ animation-duration:5.4s; animation-delay:-1.3s }
@media (prefers-reduced-motion: reduce){
.lz-flota, .lz-brillo, .lz-sol{animation:none}
.lz-brillo{opacity:.6}
[class*="lz-"]{animation-duration:.01ms !important; animation-iteration-count:1 !important}
}
/* ═══ HEADER (§24) ═══════════════════════════════════════════════════════ */
body.tema-luz-activo .top{padding:26px 44px 0; position:relative; z-index:70}
/* Logo apilado, como la referencia: el sol a la izquierda y "LUZ / TAROT" en
dos líneas. `.word` trae el nombre en una sola cadena para no romper el resto
del sitio; acá se parte en dos con ancho fijo + text-wrap. */
/* EL NOMBRE ESCRITO SE SACA, EL SOL QUEDA (2026-09-01, pedido en vivo: "que
no diga hada tarot que no sirve de nada, deja espacio para los botones").
Medido antes de tocar nada: a 900px de ancho el nav central quedaba
literalmente PEGADO al logo de un lado y a los controles del otro -cero
margen, `navLeft === brandRight` y `navRight === derLeft`-. El sol YA es
un icono de marca reconocible por si solo -estaba ahi desde el primer
diseño-, asi que sacar el texto no deja al header sin identidad: la deja
mas chica. `.word` se conserva en el DOM (no se borra el texto) por
accesibilidad -sigue siendo el nombre accesible del boton "ir al inicio"
para lectores de pantalla- pero visualmente no ocupa lugar. */
body.tema-luz-activo .brand{gap:0; align-items:center}
body.tema-luz-activo .word{
position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;
}
/* Sol de tinta del logo, dibujado, no un icono geométrico. Un poco mas grande
que antes (27px -> 32px): al quedar solo, el sol es el mark entero y
necesita sentirse como una marca hecha y derecha, no como un adorno chico
que se quedo sin la mitad de su logo. */
body.tema-luz-activo .brand::before{
content:""; width:32px; height:32px; flex:0 0 auto; background:var(--lz-oro);
-webkit-mask:var(--lz-sol-logo) center/contain no-repeat;
mask:var(--lz-sol-logo) center/contain no-repeat;
}
body.tema-luz-activo{
--lz-sol-logo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='black'%3E%3Ccircle cx='20' cy='20' r='7.4'/%3E%3Cpath d='M20 1.5c1 3.6 1.6 6.2 1.6 8.2 0 .7-.6.9-1 .3C19.4 7.6 19 4.9 20 1.5Zm0 37c-1-3.6-1.6-6.2-1.6-8.2 0-.7.6-.9 1-.3 1.2 2.4 1.6 5.1.6 8.5Zm18.5-18.5c-3.6 1-6.2 1.6-8.2 1.6-.7 0-.9-.6-.3-1 2.4-1.2 5.1-1.6 8.5-.6Zm-37 0c3.6-1 6.2-1.6 8.2-1.6.7 0 .9.6.3 1-2.4 1.2-5.1 1.6-8.5.6ZM33 7c-1.8 3.2-3.3 5.5-4.7 6.9-.5.5-1 .2-.8-.5.8-2.6 2.4-4.8 5.5-6.4ZM7 33c1.8-3.2 3.3-5.5 4.7-6.9.5-.5 1-.2.8.5-.8 2.6-2.4 4.8-5.5 6.4ZM33 33c-3.2-1.8-5.5-3.3-6.9-4.7-.5-.5-.2-1 .5-.8 2.6.8 4.8 2.4 6.4 5.5ZM7 7c3.2 1.8 5.5 3.3 6.9 4.7.5.5.2 1-.5.8C10.8 11.7 8.6 10.1 7 7Z'/%3E%3C/g%3E%3C/svg%3E");
}
body.tema-luz-activo .nav-centro{gap:30px}
body.tema-luz-activo .nav-centro a{
font-family:var(--lz-sans); font-size:11px; letter-spacing:.13em; text-transform:uppercase;
color:var(--lz-tinta); font-weight:500; position:relative; padding-bottom:3px;
}
/* Subrayado a mano alzada al pasar: trazo irregular, no un border-bottom */
body.tema-luz-activo .nav-centro a::after{
content:""; position:absolute; left:-2px; right:-2px; bottom:0; height:4px; opacity:0;
background:var(--lz-oro-tinta); transition:opacity .22s ease;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 5' preserveAspectRatio='none'%3E%3Cpath d='M1 3.4c9-1.6 18-2.2 27-1.6s18 2 27 1.4 15-1.4 24-.4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 5' preserveAspectRatio='none'%3E%3Cpath d='M1 3.4c9-1.6 18-2.2 27-1.6s18 2 27 1.4 15-1.4 24-.4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
body.tema-luz-activo .nav-centro a:hover{color:var(--lz-oscuro)}
body.tema-luz-activo .nav-centro a:hover::after{opacity:1}
body.tema-luz-activo .nav-der-link{font-family:var(--lz-sans); color:var(--lz-tinta); font-size:10px; letter-spacing:.13em}
body.tema-luz-activo .nav-der-link:hover{color:var(--lz-oro-tinta)}
body.tema-luz-activo .tg-idioma button{color:var(--lz-tinta-suave); font-family:var(--lz-sans)}
body.tema-luz-activo .tg-idioma button.activo{color:var(--lz-oscuro)}
body.tema-luz-activo .tg-idioma .sep{color:rgba(39,37,34,.28)}
/* "Mi cuenta": recorte de papel negro, no un botón de UI */
body.tema-luz-activo .entrar, body.tema-luz-activo .icono-cuenta{
font-family:var(--lz-sans); background:var(--lz-oscuro); color:var(--lz-crema);
border:0; border-radius:1px; padding:11px 20px; font-size:10.5px; letter-spacing:.13em;
text-transform:uppercase; font-weight:600; display:flex; align-items:center; gap:8px;
box-shadow:var(--lz-s2); transform:rotate(-.6deg);
transition:transform .22s ease, box-shadow .22s ease;
clip-path:polygon(0% 6%, 3% 0%, 40% 3%, 70% 0%, 100% 4%, 98% 50%, 100% 95%,
62% 100%, 28% 96%, 2% 100%, 0% 55%);
}
body.tema-luz-activo .entrar::before{content:"☆"; color:var(--lz-mostaza); font-size:12px}
body.tema-luz-activo .entrar:hover, body.tema-luz-activo .icono-cuenta:hover{
transform:rotate(-.6deg) translateY(-2px); box-shadow:var(--lz-s3);
}
/* Chispitas de tinta alrededor del header, muy chicas */
body.tema-luz-activo .top::before, body.tema-luz-activo .top::after{
content:""; position:absolute; pointer-events:none; background:var(--lz-oro); opacity:.5;
-webkit-mask:var(--lz-chispa) center/contain no-repeat;
mask:var(--lz-chispa) center/contain no-repeat;
}
body.tema-luz-activo{
--lz-chispa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.7 4.6 1.4 7.7 2.6 9.4C15.8 11 18.9 11.7 24 12c-4.6.7-7.7 1.4-9.4 2.6C13 15.8 12.3 18.9 12 24c-.7-4.6-1.4-7.7-2.6-9.4C8.2 13 5.1 12.3 0 12c4.6-.7 7.7-1.4 9.4-2.6C11 8.2 11.7 5.1 12 0Z' fill='black'/%3E%3C/svg%3E");
}
body.tema-luz-activo .top::before{left:35%; top:4px; width:13px; height:13px}
body.tema-luz-activo .top::after{right:19%; top:-2px; width:9px; height:9px; opacity:.38}
@media (max-width:860px){ body.tema-luz-activo .top::before, body.tema-luz-activo .top::after{display:none} }
/* ═══ MARGINALIA — la decoración recorre TODA la página ══════════════════
Diferencia estructural con la referencia que faltaba: ahí los objetos no
están sólo dentro del hero, bordean la hoja entera de arriba a abajo. Se
posicionan en % del alto total de #vCatalogo, así siguen repartidos aunque
el contenido crezca.
NO quedan fuera del contenido, y el comentario anterior decia que si: media
"verificado midiendo que ninguna invade el texto" y era falso. Medido en el
navegador el 2026-09-01 a 1280px: `mg-ojo` ocupa x 12->106 y el h1 del hero
empieza en x=44, o sea que la primera letra de "Descubre" quedaba tapada por
el dije, y la "t" de "tiene para ti" por la lamina botanica.
EL Z-INDEX BAJA DE 12 A 5. El 12 no competia contra `.lz-hero-texto`
(z-index:50) como parecia: `.lz-hero-texto` vive DENTRO de `.lz-hero`, que
es `position:relative; z-index:10` y por lo tanto su propio contexto de
apilamiento -su 50 solo ordena a sus hermanos ahi adentro y nunca sale a
competir afuera-. La comparacion real era marginalia(12) contra
.lz-hero(10), y por eso el hero era la UNICA seccion tapada: todas las
demas son z-index:20. Con 5 la decoracion queda debajo de todo el
contenido, que es lo que corresponde a una decoracion de margen; ninguna
tiene fondo opaco, asi que sigue viendose igual donde no hay texto.
`pointer-events:none` la hacia invisible al diagnostico: `elementFromPoint`
devolvia el H1 aunque el dije estuviera pintado encima. */
.lz-marginalia{position:absolute; inset:0; z-index:5; pointer-events:none}
.lz-mg{position:absolute; display:block; filter:drop-shadow(0 5px 10px rgba(40,30,20,.16))}
.lz-mg img, .lz-mg svg{width:100%; height:auto; display:block}
/* — borde izquierdo, de arriba a abajo — */
.lz-mg.mg-ojo{ left:1.4%; top:88px; width:82px; transform:rotate(-9deg) }
.lz-mg.mg-llave{ left:2.6%; top:210px; width:46px; transform:rotate(14deg) }
.lz-mg.mg-botanica{ left:.6%; top:330px; width:104px; --giro:-6deg; --giro-papel:4deg }
.lz-mg.mg-sol-chico{left:2%; top:20%; width:74px; transform:rotate(7deg); opacity:.9 }
.lz-mg.mg-estrella{ left:3%; top:38%; width:52px; transform:rotate(-4deg); opacity:.85 }
.lz-mg.mg-corazon{ left:1.6%; top:57%; width:66px; transform:rotate(9deg); opacity:.9 }
/* — borde derecho — */
.lz-mg.mg-mariposa{ right:1.2%; top:26%; width:88px; transform:rotate(8deg) }
.lz-mg.mg-luna{ right:2.4%; top:44%; width:58px; transform:rotate(-11deg); opacity:.9 }
.lz-mg.mg-espiral{ right:3.4%; top:62%; width:38px; color:var(--lz-oro); opacity:.7;
filter:none; transform:rotate(6deg) }
.lz-mg.mg-mariquita{right:2%; top:74%; width:34px; transform:rotate(-16deg) }
/* En pantallas donde el contenido ya usa casi todo el ancho, la marginalia
estorbaría: se apaga entera en vez de encimarse al texto. */
@media (max-width:1180px){ .lz-marginalia{display:none} }
/* ═══ HERO (§9, §32, §33) ════════════════════════════════════════════════
Composición, no dos columnas rígidas: el texto y el collage se solapan y
comparten aire. Más compacto y más denso que la primera pasada. */
.lz-hero{
position:relative; z-index:10; max-width:var(--contenido); margin:0 auto;
padding:38px 44px 30px; display:grid; grid-template-columns:1fr; gap:22px;
}
/* Papel grande de fondo del hero: la hoja sobre la que está pegado todo */
.lz-hero-hoja{
position:absolute; z-index:-1; inset:6px 22px 34px;
background-color:rgba(232,220,198,.5);
background-image:var(--lz-fibra); background-size:200px 200px; background-blend-mode:multiply;
box-shadow:var(--lz-s1); transform:rotate(-.5deg);
clip-path:polygon(0% 2%, 7% .3%, 18% 2.4%, 30% .4%, 43% 2%, 56% .5%, 68% 2.3%, 80% .4%, 91% 2%, 100% .6%,
99.4% 30%, 100% 66%, 99.3% 98%,
88% 99.6%, 74% 97.6%, 60% 99.5%, 45% 97.5%, 31% 99.6%, 17% 97.6%, 6% 99.5%, 0% 98%,
.7% 64%, 0% 33%);
}
.lz-hero-texto{position:relative; z-index:50; max-width:540px; padding-top:10px}
.lz-hero-texto h1{
font-family:var(--lz-serif); font-weight:700; font-size:clamp(46px,6.4vw,76px); line-height:.98;
letter-spacing:-.02em; margin:0 0 20px; color:var(--lz-oscuro); font-optical-sizing:auto;
}
/* Cada linea del titulo entra desde abajo por una mascara (ver prepararTituloHero
en app.js, que envuelve las lineas). El padding/margen negativo deja lugar a
los descendentes de Bodoni y a la tira mostaza, que sobresale -3%. */
.lz-linea{display:block; overflow:hidden; padding:0 .15em .12em; margin:0 -.15em -.12em}
.lz-linea-in{
display:inline-block; transform:translateY(112%) rotate(2.5deg); transform-origin:0 100%;
animation:lzLinea 1.05s calc(.22s + var(--i,0) * .12s) cubic-bezier(.16,.84,.44,1) both;
}
@keyframes lzLinea{to{transform:translateY(0) rotate(0)}}
body.lz-listo .lz-linea-in{animation:none; transform:none}
/* Tira de papel mostaza detrás de "universo": rasgada, no un rectángulo (§9) */
.lz-hero-texto h1 .lz-resalto{
position:relative; display:inline-block; padding:.02em .2em .04em; color:var(--lz-oscuro);
font-style:italic; font-weight:500; letter-spacing:-.01em;
}
.lz-hero-texto h1 .lz-resalto::before{
content:""; position:absolute; inset:12% -3% 12%; z-index:-1;
background:linear-gradient(178deg, var(--lz-mostaza), #BE9636);
transform:rotate(-1.1deg); opacity:.92;
clip-path:polygon(0% 8%, 6% 0%, 17% 6%, 29% 1%, 41% 7%, 54% 1%, 66% 6%, 78% 0%, 89% 6%, 100% 2%,
99% 92%, 88% 99%, 76% 93%, 63% 100%, 50% 93%, 37% 99%, 25% 93%, 13% 100%, 4% 94%, 0% 98%);
}
.lz-hero-sub{
font-family:var(--lz-sans); font-size:16px; line-height:1.62; color:var(--lz-tinta);
max-width:34ch; margin:0 0 26px;
}
.lz-hero-sub .lz-chispa-txt{display:inline-block; width:13px; height:13px; vertical-align:-1px; color:var(--lz-oro)}
.lz-hero-disclaimer{
font-family:var(--lz-sans); font-size:9px; line-height:1.55; color:rgba(74,66,56,.62);
max-width:40ch; margin:20px 0 0;
}
/* CTA: recorte de papel negro con la esquina irregular (§11, §57) */
.lz-cta{
position:relative; display:inline-flex; align-items:center; gap:13px; cursor:pointer; border:0;
background:var(--lz-oscuro); color:var(--lz-crema); font-family:var(--lz-sans); font-weight:600;
font-size:12.5px; letter-spacing:.11em; text-transform:uppercase; padding:17px 30px;
text-decoration:none; border-radius:1px; box-shadow:var(--lz-s2);
transition:transform .24s cubic-bezier(.2,.8,.3,1), box-shadow .24s ease;
clip-path:polygon(0% 5%, 2% 0%, 35% 3%, 68% 0%, 100% 4%, 98.6% 48%, 100% 96%,
66% 100%, 33% 96.5%, 2% 100%, 0% 52%);
}
.lz-cta::after{content:"→"; font-size:14px; transition:transform .24s ease}
.lz-cta:hover{transform:translateY(-2px); box-shadow:var(--lz-s3)}
.lz-cta:hover::after{transform:translateX(4px)}
.lz-cta:active{transform:translateY(0)}
/* ═══ COLLAGE DEL HERO — capas físicas (§13, §51) ════════════════════════
z-index por capa, no valores arbitrarios:
papel 10 · paisaje 20 · sol 30 · figura 40 · querubines/flores 50 ·
carta 55 · stickers/nota 60 · brillos 65 */
.lz-collage{position:relative; z-index:20; min-height:430px; margin:0 -10px}
.lz-collage img{display:block}
.lz-pieza{position:absolute}
.lz-pieza img{width:100%; height:100%; object-fit:contain}
/* Scrap de papel suelto detrás del collage, rotado y con cinta */
.lz-scrap{
position:absolute; z-index:10;
background-color:var(--lz-papel-2); background-image:var(--lz-fibra);
background-size:200px 200px; background-blend-mode:multiply; box-shadow:var(--lz-s1);
}
/* s1 se apaga: la hoja manuscrita real (.lz-papel-carta) ocupa ese lugar y hace
el mismo trabajo con papel de verdad. Dos capas de respaldo en la misma zona
se leían como suciedad, no como profundidad. */
.lz-scrap.s1{ display:none }
/* s2 también se apaga: era un rectángulo de color plano y ahora hay papel real
(la carta manuscrita) haciendo de respaldo. */
.lz-scrap.s2{ display:none }
/* Paisaje de montañas: al fondo, difuminado en el borde superior para que no
se lea como un bloque verde recortado con tijera. */
.lz-paisaje{ left:-3%; right:-3%; bottom:2%; height:30%; z-index:20; opacity:.42 }
.lz-paisaje svg{
width:100%; height:100%; color:var(--lz-salvia);
-webkit-mask-image:linear-gradient(180deg, transparent 0, #000 42%, #000 100%);
mask-image:linear-gradient(180deg, transparent 0, #000 42%, #000 100%);
}
/* Sol: el elemento más grande del collage. Se solapa con la cabeza de la
figura para leerse como HALO detrás de ella, igual que la referencia (§13).
Asset del dueño (grabado dorado con cara, 440x443). Reemplaza a la xilografía
de 1493, que en su fuente estaba superpuesta a una luna: recortarla partía la
cara y dejaba un halo gris de los trazos del propio grabado. */
/* aspect-ratio del asset real (399x530), no 1:1: con la caja cuadrada el
`object-fit:contain` dejaba aire muerto arriba y abajo y el sol se veía
más chico de lo que su ancho sugería. */
/* Tres restricciones medidas, no estimadas:
1. el sol no puede empezar antes de y≈70 o pisa el menú del header;
2. su disco (el ~73% superior de la caja) no puede llegar a la cabeza;
3. la referencia lo quiere GRANDE, así que en vez de achicarlo se corre la
figura a la derecha (left:28%) y su cabeza queda fuera del disco. */
.lz-sol{
top:-8%; left:17%; width:50%; max-width:356px; aspect-ratio:440/443; z-index:30;
filter:drop-shadow(0 6px 14px rgba(40,30,20,.16));
}
/* El giro lento va en la IMAGEN, no en la caja: la caja la mueve el parallax
del mouse, y dos animaciones sobre el mismo `transform` se pisan. */
.lz-sol img{animation:lzGiraLento 300s linear infinite}
/* Figura: recorte pegado encima del paisaje, sombra propia distinta (§14).
Arranca a media altura para que el sol quede detrás de su cabeza. */
/* ESCENA: mujer + montañas + campo de flores en un solo bloque de papel, como
la referencia. Sustituye al grabado rococó monocromo, que era el hueco visual
más grande: la referencia tiene una FOTO en color dentro de un paisaje.
El bloque trae pegados unos rayos de su propio sol en la esquina superior
izquierda; la máscara los disuelve para que asome el sol de la capa de abajo,
en vez de ver dos soles superpuestos. */
.lz-escena{
position:absolute; left:9%; bottom:-3%; width:72%; max-width:496px; z-index:40;
filter:drop-shadow(0 12px 22px rgba(40,30,20,.2));
/* Borde rasgado: el bloque venía como un rectángulo perfecto y se leía como
un pegado, no como un recorte de papel (§27). */
clip-path:polygon(0% 2.4%, 7% .5%, 17% 2.6%, 28% .6%, 39% 2.4%, 50% .5%, 61% 2.6%, 72% .6%,
83% 2.4%, 93% .7%, 100% 2%,
99.2% 28%, 100% 56%, 99.3% 84%, 100% 97.4%,
90% 99.5%, 79% 97.4%, 68% 99.6%, 56% 97.5%, 45% 99.4%, 33% 97.3%, 22% 99.5%,
11% 97.4%, 0% 99%,
.8% 72%, 0% 44%, .7% 20%);
}
.lz-escena img{
width:100%; height:auto; display:block;
/* Dos máscaras a la vez:
1. disuelve los rayos del propio sol del bloque (esquina superior
izquierda) para que asome el sol de la capa de abajo, no dos soles;
2. desvanece el canto izquierdo en su mitad alta, que si no corta los
rayos del sol con una vertical recta y delata el rectángulo. */
-webkit-mask-image:
radial-gradient(ellipse 40% 30% at 18% 6%, transparent 26%, #000 76%),
linear-gradient(100deg, transparent 0, rgba(0,0,0,.35) 7%, #000 17%);
mask-image:
radial-gradient(ellipse 40% 30% at 18% 6%, transparent 26%, #000 76%),
linear-gradient(100deg, transparent 0, rgba(0,0,0,.35) 7%, #000 17%);
-webkit-mask-composite:source-in; mask-composite:intersect;
}
/* Querubines sobre la nube, arriba a la derecha (§8 de la referencia).
z-index por encima de la nota: con 45 quedaban tapados por ella (z 60). */
.lz-querubines{
position:absolute; right:-3%; top:-9%; width:42%; max-width:290px; z-index:62;
transform:rotate(1.5deg); filter:drop-shadow(0 8px 16px rgba(40,30,20,.18));
-webkit-mask-image:radial-gradient(ellipse 60% 58% at 52% 54%, #000 56%, transparent 90%);
mask-image:radial-gradient(ellipse 60% 58% at 52% 54%, #000 56%, transparent 90%);
}
.lz-querubines img{width:100%; height:auto; display:block}
/* `figura-vintage.webp` (el grabado rococó con alfa derivado de la tinta) salió
del hero: la referencia pide una FOTO en color dentro de un paisaje, no un
grabado monocromo. El asset y su script de recorte quedan en el repo. */
/* NINGUNA pieza lleva ya máscara de CSS. Regla que queda de esta ronda: o el
asset trae alfa real, o no entra al collage. Un `radial-gradient` como
máscara no recorta — deja un rectángulo con los bordes desvanecidos, y sobre
un fondo claro se lee exactamente como lo que es: una foto mal pegada. */
/* Mariposa joya y luna con cara: reemplazan a los querubines de Rafael, que
estaban pintados sobre nubes y no tienen borde recortable. "Alas" y motivos
celestes están en la lista del brief (§10) igual que los querubines. */
.lz-alado{ z-index:50 }
.lz-alado.a1{ top:-1%; right:0%; width:20%; max-width:132px; aspect-ratio:1;
--giro:5deg; transform:rotate(5deg); filter:drop-shadow(0 8px 15px rgba(40,30,20,.22)) }
.lz-alado.a2{ top:22%; right:22%; width:12%; max-width:78px; aspect-ratio:260/306;
--giro:-7deg; transform:rotate(-7deg); filter:drop-shadow(0 5px 10px rgba(40,30,20,.2)) }
/* Botánica y corazón de rayos, escalas muy distintas (§61) */
.lz-flor{ z-index:50 }
/* La flor va A LOS PIES de la figura, como el campo florido de la referencia;
la del margen izquierdo es otra instancia, a otra escala y lejos, para que
no se lean como el mismo objeto repetido. */
.lz-flor.f1{ left:2%; bottom:-1%; width:17%; max-width:112px;
--giro:-7deg; --giro-papel:6deg }
.lz-flor.f2{ left:1%; top:6%; width:11%; max-width:70px; aspect-ratio:300/287;
--giro:12deg; transform:rotate(12deg); filter:drop-shadow(0 5px 9px rgba(40,30,20,.18)) }
/* Carta de tarot: objeto físico con marco de papel, cinta y sombra fuerte (§15) */
.lz-carta-tarot{
position:absolute;
right:-1%; bottom:11%; width:22%; max-width:172px; z-index:55;
transform:rotate(7.5deg); padding:6px 6px 20px;
background:#FBF7EC; background-image:var(--lz-fibra); background-size:120px 120px;
background-blend-mode:multiply;
box-shadow:var(--lz-s3); border-radius:1px;
}
.lz-carta-tarot img{width:100%; height:auto; object-fit:cover; aspect-ratio:5/8.6}
/* Segunda carta asomando por detrás — profundidad barata y creíble */
.lz-carta-tarot::before{
content:""; position:absolute; inset:8px -14px 4px 18px; z-index:-1;
background:#F0E7D5; border-radius:1px; transform:rotate(6deg);
box-shadow:var(--lz-s1);
}
/* Nota escrita a mano, sujeta con cinta (§4) */
.lz-nota{
position:absolute; left:70%; top:30%; z-index:60; max-width:152px; margin:0;
padding:16px 18px 14px; text-align:center; transform:rotate(-4.5deg);
background:#FBF7EC; background-image:var(--lz-fibra); background-size:150px 150px;
background-blend-mode:multiply; box-shadow:var(--lz-s2);
clip-path:polygon(0% 5%, 10% 1%, 24% 5%, 38% 0%, 52% 5%, 67% 1%, 81% 5%, 93% 0%, 100% 4%,
99% 94%, 88% 99%, 74% 94%, 60% 100%, 45% 94%, 31% 99%, 17% 94%, 5% 99%, 0% 95%);
}
.lz-nota span{
font-family:var(--lz-serif); font-size:15.5px; font-style:italic; font-weight:500; color:var(--lz-tinta);
line-height:1.4; display:block;
}
.lz-nota::after{content:"♥"; display:block; margin-top:6px; color:var(--lz-terracota); font-size:11px}
/* Stickers sueltos (§16, §67). Los tres primeros son OBJETOS FOTOGRAFIADOS que
mandó el dueño —corazón bordado con ojo, llave de bronce, mariquita—, no
dibujos SVG: el brief pide "assets visuales vintage, no iconos" (§15, §16).
Cada uno con su giro, escala y sombra distintos. */
.lz-sticker{ position:absolute; z-index:60 }
.lz-sticker svg, .lz-sticker img{width:100%; height:100%; object-fit:contain; display:block}
.lz-sticker.st-ojo{ left:-3%; top:31%; width:15%; max-width:96px; aspect-ratio:260/267;
transform:rotate(-8deg); filter:drop-shadow(0 5px 10px rgba(40,30,20,.24)) }
.lz-sticker.st-llave{ left:7%; bottom:24%; width:8%; max-width:52px; aspect-ratio:130/331;
transform:rotate(16deg); filter:drop-shadow(0 3px 7px rgba(40,30,20,.2)) }
/* La mariquita se posa SOBRE la flor de abajo, no flotando en el vacío: §66
pide que cada objeto tenga un punto de apoyo visual. */
.lz-sticker.st-mariquita{ left:14%; bottom:14%; width:7%; max-width:44px; aspect-ratio:150/177;
transform:rotate(-14deg); filter:drop-shadow(0 3px 6px rgba(40,30,20,.26)) }
.lz-sticker.st-espiral{ left:2%; bottom:40%; width:5.5%; max-width:32px; aspect-ratio:1;
color:var(--lz-oro); opacity:.75; transform:rotate(8deg) }
.lz-sticker.st-espiral svg{height:100%}
/* Hoja manuscrita del siglo XIX detrás del collage: papel de verdad, con su
borde rasgado real. Reemplaza a un `.lz-scrap` que era color plano + clip-path. */
.lz-papel-carta{
position:absolute; right:1%; top:-4%; width:46%; max-width:310px; z-index:10;
opacity:.92; transform:rotate(4deg); filter:drop-shadow(0 7px 14px rgba(40,30,20,.18));
}
/* ═══ CARTA DEL DÍA ══════════════════════════════════════════════════════
Una carta boca abajo sobre el papel; al tocarla gira y muestra la carta real
del mazo con su significado. Sin cuenta, sin pago y sin LLM — el significado
sale del mazo, así que no compite por Ollama con el show en vivo. */
.lz-carta-dia{
position:relative; z-index:20; max-width:940px; margin:12px auto 0;
padding:36px 44px 4px; display:grid; grid-template-columns:1fr auto; gap:34px; align-items:center;
}
.lz-cd-eyebrow{
display:block; font-family:var(--lz-sans); font-size:10px; letter-spacing:.18em;
text-transform:uppercase; color:var(--lz-oro-tinta); margin:0 0 10px;
}
.lz-cd-texto h2{
font-family:var(--lz-serif); font-weight:600; font-size:clamp(24px,3vw,34px);
margin:0 0 12px; color:var(--lz-oscuro); line-height:1.1;
}
.lz-cd-texto p{font-family:var(--lz-sans); font-size:14px; line-height:1.65; color:var(--lz-tinta); max-width:36ch; margin:0}
.lz-cd-mesa{display:flex; align-items:center; gap:26px; flex-wrap:wrap; justify-content:flex-end}
/* La carta: dos caras y un giro 3D real, como levantar una carta de la mesa */
.lz-cd-carta{
position:relative; width:152px; aspect-ratio:5/8.4; flex:0 0 auto; padding:0; border:0;
background:none; cursor:pointer; transform-style:preserve-3d;
transition:transform .85s cubic-bezier(.2,.75,.3,1);
transform:rotate(-2.5deg);
}
.lz-cd-carta.girada{transform:rotate(1.5deg) rotateY(180deg)}
.lz-cd-carta:hover:not(.girada){transform:rotate(-2.5deg) translateY(-5px)}
.lz-cd-carta:focus-visible{outline:2px solid var(--lz-oro-tinta); outline-offset:6px}
.lz-cd-cara{
position:absolute; inset:0; backface-visibility:hidden; border-radius:2px;
overflow:hidden; box-shadow:var(--lz-s3); background:#FBF7EC;
}
.lz-cd-cara svg, .lz-cd-cara img{width:100%; height:100%; object-fit:cover; display:block}
.lz-cd-frente{transform:rotateY(180deg); padding:5px; background:#FBF7EC}
/* El mazo viene en violetas y celestes saturados que chocan con la paleta
cálida. §29 pide tratar tonalmente cualquier asset que no pertenezca a la
pieza en vez de mezclarlo crudo: sepia leve + saturación baja lo integra
sin desteñir la carta. */
.lz-cd-frente img{border-radius:1px; filter:sepia(.42) saturate(.82) contrast(1.04) brightness(1.02)}
.lz-cd-lectura{max-width:290px}
.lz-cd-lectura h3{
font-family:var(--lz-serif); font-weight:600; font-size:19px; margin:0 0 8px; color:var(--lz-oscuro);
}
.lz-cd-lectura p{font-family:var(--lz-sans); font-size:13.5px; line-height:1.6; color:var(--lz-tinta); margin:0 0 12px}
.lz-cd-lectura a{font-family:var(--lz-sans); font-size:12.5px}
.lz-cd-pista{
font-family:var(--lz-sans); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
color:var(--lz-tinta-suave); margin:0;
}
@media (prefers-reduced-motion: reduce){ .lz-cd-carta{transition:none} }
/* ═══ "ELIGE TU LECTURA" (§20, §69) ══════════════════════════════════════ */
.lz-lecturas{position:relative; z-index:20; max-width:var(--contenido); margin:0 auto; padding:16px 44px 0}
.lz-titulo-seccion{text-align:center; position:relative; margin:0 0 34px}
.lz-titulo-seccion .lz-orna{display:block; width:190px; margin:0 auto 12px; color:var(--lz-oro)}
.lz-titulo-seccion .lz-orna svg{width:100%; height:auto}
.lz-titulo-seccion h2{
font-family:var(--lz-serif); font-weight:600; font-size:clamp(28px,3.6vw,40px);
margin:0; color:var(--lz-oscuro); letter-spacing:-.01em;
}
/* Las cuatro lecturas: mini páginas de un journal, NO product cards (§11, §37).
Cada una: papel propio, arco arriba, cinta, giro, sello, sombra distinta. */
.lz-destacadas{
display:grid; grid-template-columns:repeat(4,1fr); gap:22px; align-items:start;
}
/* El papel se pinta en un ::before, NO en el botón: el clip-path del borde
rasgado recortaba la etiqueta "Más elegida" que sobresale por arriba,
dejándola como una mancha negra. Clipeando solo la capa de papel, los
elementos que salen del papel (badge, cinta, sello) siguen visibles. */
.lz-lectura{
position:relative; display:flex; flex-direction:column; align-items:stretch;
padding:16px 16px 20px; cursor:pointer; border:0; text-align:center;
background:none; color:var(--lz-oscuro); overflow:visible;
transform:rotate(var(--giro,0deg));
transition:transform .3s cubic-bezier(.2,.8,.3,1), filter .3s ease;
filter:drop-shadow(var(--lz-sombra-propia, 0 6px 14px rgba(40,30,20,.15)));
}
.lz-lectura::before{
content:""; position:absolute; inset:0; z-index:0;
background-color:var(--lz-papel); background-image:var(--lz-fibra);
background-size:200px 200px; background-blend-mode:multiply;
clip-path:polygon(0% 1.6%, 9% .2%, 22% 1.8%, 36% .3%, 50% 1.6%, 64% .2%, 78% 1.8%, 91% .3%, 100% 1.4%,
99.4% 34%, 100% 68%, 99.3% 98.4%,
89% 99.8%, 76% 98.2%, 62% 99.7%, 48% 98.3%, 34% 99.8%, 20% 98.2%, 8% 99.7%, 0% 98.6%,
.7% 66%, 0% 32%);
}
.lz-lectura > *{position:relative; z-index:1}
/* Tinte por lectura: color, sello, sombra Y TONO DE PAPEL propios — nunca
cuatro clones (§21). Los cuatro papeles son de colores distintos, como
cuatro hojas diferentes del mismo cuaderno. */
.lz-lectura.lzt-salvia{ --lzt:#4E5647; --lzt-rgb:var(--lz-salvia-rgb); --lz-sombra-propia:0 5px 12px rgba(40,30,20,.15) }
.lz-lectura.lzt-rosa{ --lzt:#8E4B36; --lzt-rgb:var(--lz-rosa-rgb); --lz-sombra-propia:0 3px 8px rgba(40,30,20,.13) }
.lz-lectura.lzt-oliva{ --lzt:#5C5A3F; --lzt-rgb:var(--lz-oliva-rgb); --lz-sombra-propia:0 11px 22px rgba(40,30,20,.2) }
.lz-lectura.lzt-mostaza{ --lzt:#7F5C1F; --lzt-rgb:var(--lz-mostaza-rgb); --lz-sombra-propia:0 6px 14px rgba(40,30,20,.16) }
.lz-lectura.lzt-salvia::before{ background-color:#E2E1D2 }
.lz-lectura.lzt-rosa::before{ background-color:#EFDCD5 }
.lz-lectura.lzt-oliva::before{ background-color:#E1DFC8 }
.lz-lectura.lzt-mostaza::before{ background-color:#F0E5CC }
/* Hover 3D: la tarjeta se inclina siguiendo al mouse (--rx/--ry los setea
app.js, solo con puntero fino). Sin mouse encima vuelve sola. */
.lz-lectura:hover{
transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotate(calc(var(--giro,0deg) * .35)) translateY(-6px);
z-index:5; filter:drop-shadow(0 18px 30px rgba(40,30,20,.26)) }
.lz-lectura:hover .lz-lectura-emblema{ transform:translateY(-3px) scale(1.04) }
.lz-lectura:hover .lz-lectura-flecha{ transform:translateX(5px) }
.lz-lectura:focus-visible{ outline:2px solid var(--lz-oro-tinta); outline-offset:4px }
/* Arco: panel de color liso con forma de carta de tarot, y la ilustración
vintage CENTRADA encima. Antes acá iba una foto del catálogo recortada en
arco, y eso convertía las cuatro en fichas de producto. */
.lz-lectura-arco{
position:relative; display:grid; place-items:center; margin:4px 0 14px;
aspect-ratio:1/1.2; border-radius:999px 999px 2px 2px;
background:rgba(var(--lzt-rgb),.26);
box-shadow:inset 0 0 0 1px rgba(var(--lzt-rgb),.42);
overflow:hidden;
}
/* Rayos tenues detrás del emblema, como los grabados de la referencia */
.lz-lectura-arco::before{
content:""; position:absolute; inset:0;
background:repeating-conic-gradient(from 0deg at 50% 46%,
rgba(var(--lzt-rgb),.16) 0deg 3deg, transparent 3deg 9deg);
-webkit-mask-image:radial-gradient(circle at 50% 46%, #000 18%, transparent 62%);
mask-image:radial-gradient(circle at 50% 46%, #000 18%, transparent 62%);
}
.lz-lectura-emblema{
position:relative; z-index:1; width:58%; max-width:104px; height:auto;
filter:drop-shadow(0 4px 9px rgba(40,30,20,.22));
transition:transform .35s cubic-bezier(.2,.8,.3,1);
}
.lz-lectura-cuerpo{display:flex; flex-direction:column; gap:5px; padding-top:8px}
.lz-lectura-nombre{
font-family:var(--lz-serif); font-weight:600; font-size:19px; line-height:1.18;
color:var(--lz-oscuro); text-wrap:balance;
}
.lz-lectura-que{font-family:var(--lz-sans); font-size:12px; color:var(--lz-tinta-suave); letter-spacing:.02em}
.lz-lectura-precio{
font-family:var(--lz-serif); font-weight:600; font-size:19px; color:var(--lzt);
display:flex; align-items:center; justify-content:center; gap:5px; margin-top:3px;
}
.lz-lectura-precio .coin{font-style:normal; font-size:12px; opacity:.85}
.lz-lectura-flecha{
font-family:var(--lz-sans); font-size:17px; color:var(--lz-tinta); margin-top:7px;
transition:transform .24s ease;
}
/* "Empezá acá" / "La más completa": etiqueta de papel oscuro pegada arriba */
.lz-lectura-badge{
position:absolute; z-index:65; top:-11px; left:50%; transform:translateX(-50%) rotate(-1.6deg);
background:var(--lz-oscuro); color:var(--lz-crema); font-family:var(--lz-sans);
font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
padding:5px 11px; white-space:nowrap; box-shadow:var(--lz-s1); border-radius:1px;
}
.lz-lectura-badge::after{content:" ✦"; color:var(--lz-mostaza)}
.lz-pie-lecturas{
display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
margin:34px 0 0; font-family:var(--lz-sans); font-size:12.5px; color:var(--lz-tinta);
}
.lz-pie-sep{color:rgba(74,66,56,.4)}
.lz-link-tinta{color:var(--lz-oro-tinta); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.lz-link-tinta:hover{color:var(--lz-oscuro)}
/* ═══ DIARIO DE LUZ (§20, §21, §70) ══════════════════════════════════════
Hoja verde ARRANCADA y pegada: borde irregular en los cuatro lados, giro,
textura propia, cinta que la sujeta y un querubín que se sale del bloque. */
/* La hoja verde se pinta en un ::before para que el borde rasgado NO recorte
al querubín, que por diseño tiene que salirse del bloque (§26). */
/* width con gutter fijo en vez de margin:auto a secas: la hoja está ROTADA, y
pegada al borde del viewport sus esquinas salían de la página (15px medidos
a 1280). Con 44px de aire a cada lado la rotación y el querubín que asoma
caben sin desbordar — §2.14: se arregla la causa, no se tapa con overflow. */
.lz-diario{
position:relative; z-index:20; width:calc(100% - 88px); max-width:var(--contenido);
margin:74px auto 0; padding:52px 46px 48px; color:#F4F1E7;
transform:rotate(-.45deg); filter:drop-shadow(0 13px 28px rgba(40,30,20,.22));
display:grid; grid-template-columns:minmax(190px,262px) 1fr; gap:40px;
}
.lz-diario::before{
content:""; position:absolute; inset:0; z-index:0;
/* Un punto más hondo que --lz-salvia para que el texto blanco pase AA (5.47:1
medido, contra 4.58:1 con el salvia base). Sigue siendo el mismo verde. */
background-color:#5C6451;
background-image:
radial-gradient(ellipse 50% 40% at 20% 30%, rgba(0,0,0,.09), transparent 70%),
radial-gradient(ellipse 40% 35% at 82% 70%, rgba(255,255,255,.05), transparent 70%),
var(--lz-veteado);
background-size:auto, auto, 420px 420px; background-blend-mode:normal, normal, multiply;
clip-path:polygon(0% 2.2%, 6% .4%, 15% 2.6%, 25% .5%, 35% 2.2%, 46% .3%, 57% 2.5%, 67% .4%,
77% 2.3%, 87% .5%, 95% 2.6%, 100% .8%,
99.2% 26%, 100% 53%, 99.3% 79%, 100% 97.6%,
92% 99.6%, 82% 97.4%, 71% 99.5%, 60% 97.3%, 49% 99.6%, 38% 97.4%, 27% 99.5%,
17% 97.3%, 8% 99.6%, 0% 98%,
.8% 76%, 0% 50%, .7% 24%);
}
.lz-diario > *{position:relative; z-index:1}
.lz-diario-texto b{
font-family:var(--lz-serif); font-weight:600; font-size:clamp(27px,3.1vw,36px);
display:block; line-height:1.06; margin:0 0 18px; letter-spacing:.02em;
}
/* Sin alpha: a .82 sobre el verde daba 3.52:1 -falla AA para texto de cuerpo-.
A opacidad plena y con el verde de la hoja un punto más hondo, 5.47:1. */
.lz-diario-texto p{
font-family:var(--lz-sans); font-size:13.5px; line-height:1.65;
color:#F4F1E7; max-width:28ch; margin:0 0 26px;
}
.lz-diario .lz-cta{background:#F6F3E8; color:var(--lz-oscuro); box-shadow:0 4px 12px rgba(0,0,0,.22)}
.lz-diario-lista{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
/* Cada artículo: recorte pegado con cinta, giro propio, sombra propia (§25) */
.lz-articulo{
position:relative; background:#FBF7EC; color:var(--lz-oscuro); border-radius:1px;
padding:9px 9px 2px; transform:rotate(var(--giro,0deg));
transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease;
}
.lz-articulo:nth-child(1){--giro:-2deg; box-shadow:var(--lz-s2)}
.lz-articulo:nth-child(2){--giro:1.4deg; box-shadow:var(--lz-s3)}
.lz-articulo:nth-child(3){--giro:-.9deg; box-shadow:var(--lz-s2)}
.lz-articulo:hover{transform:rotate(calc(var(--giro,0deg) * .3)) translateY(-4px); box-shadow:var(--lz-s3)}
.lz-articulo-img{aspect-ratio:4/3; overflow:hidden; background:rgba(39,37,34,.07)}
.lz-articulo-img img{width:100%; height:100%; object-fit:cover; filter:sepia(.26) saturate(1.04) contrast(1.02)}
.lz-articulo h3, .lz-articulo h4{
font-family:var(--lz-serif); font-size:16.5px; line-height:1.25; font-weight:600;
margin:12px 5px 6px; letter-spacing:-.01em;
}
/* Parallax interno de la foto al scrollear (--sy lo setea app.js): la foto
esta un 14% mas grande que su marco y se desliza dentro de el. */
.lz-articulo-img img{transform:translateY(var(--sy,0px)) scale(1.14); will-change:transform}
.lz-articulo time{
display:block; margin:0 5px 12px; font-family:var(--lz-sans); font-size:9px;
letter-spacing:.14em; color:rgba(39,37,34,.5); text-transform:uppercase;
}
/* Bola de cristal apoyada en el borde de la hoja verde (§26): se sale del
bloque, tiene alfa real y es objeto de tarot, no un querubín borroso.
Abajo y hacia afuera para no tapar el tercer artículo (§64). */
/* Más a la derecha y más abajo que el primer intento: centrada sobre el borde
tapaba la última palabra del tercer artículo ("...en tu camino"). §64. */
/* SE VEIA MAL: A CABALLO ENTRE EL PAPEL VERDE Y EL FONDO CLARO (2026-09-01,
reporte real con captura: "se ve mal la bola de cristal esta mal puesta").
`bottom:-21%` la hacia colgar 68px por debajo del borde de `.lz-diario` a
1280px -y `.lz-beneficios` no tiene fondo propio (es la crema de la pagina),
asi que la mitad de arriba de la bola quedaba sobre el papel rasgado verde
y la mitad de abajo sobre la crema: una esfera que reflejaria SU ALREDEDOR
partida en dos colores planos, ni sentada en un lado ni en el otro. Medido
en las tres resoluciones que la tocan (1280, 700, 400px): las tres cruzaban
el borde. Ahora queda DENTRO del papel torn-edge de `.lz-diario::before`
(que ademas esta inset ~2-3% del borde de la caja, ver ese selector) en las
tres. */
.lz-diario-bola{
position:absolute; right:-2%; bottom:38%; width:122px; height:auto; z-index:60;
filter:drop-shadow(0 14px 20px rgba(0,0,0,.3));
}
/* ═══ BENEFICIOS (§23) — la pausa del journal, limpia pero no corporativa ═══ */
.lz-beneficios{
position:relative; z-index:20; max-width:var(--contenido); margin:0 auto;
padding:86px 44px 62px; display:grid; grid-template-columns:repeat(4,1fr); gap:34px;
}
.lz-beneficio{text-align:center; position:relative}
/* Ilustraciones vintage recortadas, no iconos de línea: el §19 pide "pequeño
símbolo vintage", y cuatro SVG geométricos delataban la UI moderna debajo. */
.lz-ben-ilus{
width:auto; height:46px; margin:0 auto 16px; display:block;
filter:drop-shadow(0 3px 7px rgba(40,30,20,.18));
}
.lz-beneficio svg{width:36px; height:36px; color:var(--lz-oro); margin:0 auto 16px; display:block}
.lz-beneficio b{
display:block; font-family:var(--lz-sans); font-size:11.5px; letter-spacing:.13em;
text-transform:uppercase; margin:0 0 9px; color:var(--lz-oscuro); font-weight:600;
}
.lz-beneficio span{font-family:var(--lz-sans); font-size:13px; line-height:1.6; color:var(--lz-tinta)}
/* Filete de tinta entre columnas, a mano alzada */
.lz-beneficio + .lz-beneficio::before{
content:""; position:absolute; left:-17px; top:12%; bottom:12%; width:2px; opacity:.3;
background:var(--lz-oro);
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 100' preserveAspectRatio='none'%3E%3Cpath d='M1.5 2c.7 16-.8 32 .3 48s-.4 32 .1 48' stroke='black' stroke-width='1' fill='none'/%3E%3C/svg%3E") center/100% 100% no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 100' preserveAspectRatio='none'%3E%3Cpath d='M1.5 2c.7 16-.8 32 .3 48s-.4 32 .1 48' stroke='black' stroke-width='1' fill='none'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
/* ═══ NEWSLETTER (§22) — hoja rosa pegada, no un banner ══════════════════ */
/* Mismo patrón: el papel rosa va en ::before para que la flor y el sol
puedan salirse por las esquinas sin que el rasgado los corte. */
.lz-newsletter{
position:relative; z-index:20; max-width:820px; margin:16px auto 92px; padding:50px 48px 46px;
color:#3A211C; text-align:center; transform:rotate(.6deg);
filter:drop-shadow(0 13px 28px rgba(40,30,20,.2));
}
.lz-newsletter::before{
content:""; position:absolute; inset:0; z-index:0;
background-color:var(--lz-rosa);
background-image:
radial-gradient(ellipse 48% 40% at 25% 25%, rgba(255,255,255,.13), transparent 70%),
radial-gradient(ellipse 44% 36% at 80% 78%, rgba(124,68,58,.09), transparent 70%),
var(--lz-fibra);
background-size:auto, auto, 200px 200px; background-blend-mode:normal, normal, multiply;
clip-path:polygon(0% 3%, 8% .5%, 19% 3.4%, 31% .6%, 43% 3%, 55% .4%, 67% 3.2%, 79% .6%, 90% 3%, 100% 1%,
99% 30%, 100% 62%, 99.2% 97%,
89% 99.5%, 77% 97%, 65% 99.6%, 52% 97.2%, 40% 99.5%, 27% 97.1%, 15% 99.6%, 0% 98%,
1% 66%, 0% 34%);
}
.lz-newsletter > *{position:relative; z-index:1}
.lz-newsletter h2{font-family:var(--lz-serif); font-weight:600; font-size:clamp(24px,2.8vw,32px); margin:0 0 11px}
.lz-newsletter p{font-family:var(--lz-sans); font-size:14px; max-width:42ch; margin:0 auto 28px; color:rgba(58,33,28,.8)}
.lz-newsletter form{display:flex; gap:10px; max-width:450px; margin:0 auto; flex-wrap:wrap; justify-content:center}
.lz-newsletter input{
flex:1 1 230px; font-family:var(--lz-sans); font-size:13.5px; padding:14px 16px;
border:1px solid rgba(58,33,28,.2); border-radius:1px; color:var(--lz-oscuro);
background-color:#FBF7EC; background-image:var(--lz-fibra); background-size:140px 140px;
background-blend-mode:multiply;
}
.lz-newsletter input::placeholder{color:rgba(58,33,28,.5)}
.lz-newsletter input:focus{outline:2px solid var(--lz-borgona); outline-offset:1px}
.lz-newsletter button{
font-family:var(--lz-sans); font-weight:600; font-size:11.5px; letter-spacing:.11em;
text-transform:uppercase; background:var(--lz-oscuro); color:#FBF7EC; border:0;
border-radius:1px; padding:14px 24px; cursor:pointer; box-shadow:var(--lz-s1);
transition:transform .22s ease, box-shadow .22s ease;
}
.lz-newsletter button:hover{transform:translateY(-2px); box-shadow:var(--lz-s2)}
/* Lirios sobre su papelito, pegados en la esquina y saliéndose del bloque. */
.lz-newsletter-flor{
position:absolute; left:-30px; top:-40px; width:124px; z-index:65;
--giro:-11deg; --giro-papel:5deg;
}
.lz-newsletter-sol{
position:absolute; right:38px; top:-30px; width:70px; height:70px; z-index:65;
color:var(--lz-oro-tinta); filter:drop-shadow(0 5px 9px rgba(40,30,20,.22)); transform:rotate(6deg);
}
/* ═══ FOOTER (§46) — el collage sigue hasta el final ═════════════════════ */
.lz-footer{position:relative; z-index:20; max-width:var(--contenido); margin:0 auto; padding:12px 44px 120px}
.lz-footer::before{ /* filete de tinta, trazo irregular */
content:""; display:block; height:2px; margin:0 0 44px; opacity:.28; background:var(--lz-oro);
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 4' preserveAspectRatio='none'%3E%3Cpath d='M2 2.6c50-1.4 100-1.9 150-1.2s100 1.8 150 1.1 60-1.2 96-.4' stroke='black' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 4' preserveAspectRatio='none'%3E%3Cpath d='M2 2.6c50-1.4 100-1.9 150-1.2s100 1.8 150 1.1 60-1.2 96-.4' stroke='black' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
/* Tres cartas repartidas a mano, con marco de papel y sombras distintas */
.lz-footer-cartas{display:flex; justify-content:center; align-items:flex-end; gap:0; margin:0 0 42px}
.lz-footer-cartas img{
width:104px; aspect-ratio:5/8.6; object-fit:cover; border-radius:1px;
padding:5px; background:#FBF7EC;
}
.lz-footer-cartas img:nth-child(1){transform:rotate(-10deg) translateX(20px); z-index:1; box-shadow:var(--lz-s2)}
.lz-footer-cartas img:nth-child(2){transform:rotate(1.5deg) translateY(-10px); z-index:3; box-shadow:var(--lz-s3)}
.lz-footer-cartas img:nth-child(3){transform:rotate(9deg) translateX(-20px); z-index:2; box-shadow:var(--lz-s2)}
/* Adornos de borde del footer. Van FLANQUEANDO las cartas, no abajo: ahí
pisaban el texto legal, y §64 lo prohíbe explícitamente. */
.lz-footer-flor{
position:absolute; left:4%; top:52px; width:112px; z-index:20;
--giro:8deg; --giro-papel:-5deg;
}
.lz-footer-querubin{
position:absolute; right:4%; top:46px; width:120px; z-index:20;
--giro:-6deg; --giro-papel:4deg;
}
body.tema-luz-activo .disclaimer{
max-width:64ch; margin:0 auto; padding:0; font-family:var(--lz-sans);
font-size:9.5px; line-height:1.6; color:rgba(74,66,56,.66); text-align:center;
}
.lz-footer-redes{
display:flex; align-items:center; justify-content:center; gap:16px; margin:26px 0 24px;
font-family:var(--lz-sans); font-size:10px; letter-spacing:.15em; text-transform:uppercase;
color:var(--lz-tinta);
}
/* Antes eran