/* BAW · Lienzo v11 · El sitio como cuadro.
   Cada sección es una obra: boceto áureo (φ = 1,618) bajo la pintura, bordes pintados a pincel,
   cartela de galería, grano de tela y un pincel con el que el visitante pinta junto a nosotros. */
:root{--phi:1.618;--phi-inv:.618}

/* ---------- Grano de tela sobre todo el cuadro ---------- */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:70;opacity:.07;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)'/%3E%3C/svg%3E"),
repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px)}

/* ---------- Bordes pintados a pincel entre obras ---------- */
.lz-edge{margin-top:-30px;-webkit-mask:url(lienzo-borde.svg) top left/1440px 32px repeat-x,linear-gradient(#000 0 0) 0 31px/100% calc(100% - 31px) no-repeat;mask:url(lienzo-borde.svg) top left/1440px 32px repeat-x,linear-gradient(#000 0 0) 0 31px/100% calc(100% - 31px) no-repeat}
.lz-host{position:relative;isolation:isolate}

/* ---------- Boceto áureo bajo cada obra ---------- */
.lz-phi{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:var(--lz-z,-1);color:var(--lz-c,rgba(81,37,201,.32))}
.lz-phi .g{fill:none;stroke:currentColor;stroke-width:1.15;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.6s cubic-bezier(.45,.05,.3,1)}
.lz-phi .sp{fill:none;stroke:currentColor;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 3.8s cubic-bezier(.45,.05,.3,1) .9s}
.lz-phi .eye{fill:currentColor;opacity:0;transition:opacity .8s 3.8s}
.lz-phi .eye-r{fill:none;stroke:currentColor;stroke-width:1.2;vector-effect:non-scaling-stroke;opacity:0}
.lz-phi .phi-t{font:italic 600 34px 'Space Grotesk',sans-serif;fill:currentColor;opacity:0;transition:opacity 1s 4.2s}
.lz-in .lz-phi .g,.lz-in .lz-phi .sp{stroke-dashoffset:0}
.lz-in .lz-phi .eye,.lz-in .lz-phi .phi-t{opacity:.9}
.lz-in .lz-phi .eye-r{animation:lzEye 3.2s ease-out 4.4s infinite}
@keyframes lzEye{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(4.2)}}
.lz-phi .eye-r{transform-box:fill-box;transform-origin:center}
.lz-dark .lz-phi{--lz-c:rgba(255,227,107,.30)}

/* ---------- Cartela de galería ---------- */
.lz-label{position:absolute;right:22px;bottom:52px;z-index:3;margin:0;max-width:268px;padding:10px 14px 11px;border-radius:3px;background:linear-gradient(180deg,#FFFEFA,#F4EFE3);color:#2B2A33;box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 10px 24px rgba(17,17,38,.28),0 2px 4px rgba(17,17,38,.18);font:400 11px/1.45 'IBM Plex Sans',sans-serif;transform:translateY(8px);opacity:0;transition:opacity .8s .4s,transform .8s .4s}
.lz-in .lz-label{opacity:1;transform:none}
.lz-label b{display:block;font:700 13px/1.25 'Space Grotesk',sans-serif;color:#111126;letter-spacing:-.01em}
.lz-label i{font-style:italic}
.lz-label small{display:flex;justify-content:space-between;gap:10px;margin-top:5px;padding-top:5px;border-top:1px solid rgba(17,17,38,.15);font:500 10px 'IBM Plex Mono',monospace;color:#5125C9;letter-spacing:.04em}
.lz-label::before{content:'';position:absolute;left:-1px;top:-1px;bottom:-1px;width:3px;background:linear-gradient(#FFE36B,#AC145B,#5125C9)}
@media (max-width:860px){.lz-label{display:none}}

/* ---------- Pincel del visitante ---------- */
#lz-brush{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:65}

/* ---------- Trazo pintado bajo los títulos ---------- */
.lz-stroke{position:relative;display:inline;background-image:linear-gradient(transparent 0,transparent 0);}
.lz-uline{position:absolute;left:-1%;bottom:-.14em;width:61.8%;height:.42em;z-index:-1;pointer-events:none;overflow:visible}
.lz-uline path{fill:none;stroke:var(--lz-u,#FFE36B);stroke-width:14;stroke-linecap:round;opacity:.5;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s cubic-bezier(.6,.05,.3,1) .5s}
.lz-in .lz-uline path{stroke-dashoffset:0}
h2.lz-h2{position:relative;isolation:isolate}

/* ---------- Realismo: notebook en "Qué incluye" ---------- */
.lz-laptop{position:relative;padding:14px 14px 18px;border-radius:24px 24px 10px 10px;background:linear-gradient(160deg,#3A3D4F,#15161F 40%,#22243A);box-shadow:0 0 0 1.5px #565A72 inset,0 50px 90px rgba(10,6,40,.55)}
.lz-laptop::before{content:'';position:absolute;top:5px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#0B0C12;box-shadow:0 0 0 1.5px #3A3D4F,0 0 4px #4DABF7 inset}
.lz-laptop>.lz-screen{position:relative;border-radius:8px!important;box-shadow:none!important;border:0!important}
.lz-laptop>.lz-screen::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:5;background:linear-gradient(115deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.04) 28%,transparent 29%,transparent 100%)}
.lz-base{position:relative;height:22px;margin:0 -7%;border-radius:2px 2px 18px 18px;background:linear-gradient(180deg,#D9DBE6 0%,#A7AABD 45%,#6E7186 100%);box-shadow:0 18px 30px rgba(10,6,40,.45),0 2px 0 #F4F5FA inset}
.lz-base::before{content:'';position:absolute;left:50%;top:0;width:18%;height:8px;margin-left:-9%;border-radius:0 0 10px 10px;background:linear-gradient(180deg,#8D90A5,#B9BCCC)}
.lz-base::after{content:'';position:absolute;left:8%;right:8%;bottom:-26px;height:22px;border-radius:50%;background:radial-gradient(closest-side,rgba(10,6,40,.45),transparent);z-index:-1}
/* teléfono con tienda en línea */
.lz-phone{position:absolute;right:-34px;bottom:6px;width:156px;height:314px;padding:9px;border-radius:30px;background:linear-gradient(150deg,#2A2C3D,#0D0E15);box-shadow:0 0 0 1.5px #5B5F78 inset,0 30px 60px rgba(10,6,40,.55);z-index:6;transform:rotate(6deg);animation:lzFloat 6s ease-in-out infinite}
@keyframes lzFloat{0%,100%{transform:rotate(6deg) translateY(0)}50%{transform:rotate(4deg) translateY(-10px)}}
.lz-phone .scr{position:relative;width:100%;height:100%;border-radius:22px;overflow:hidden;background:#FFFEFA;color:#111126;font:600 9px 'IBM Plex Sans',sans-serif}
.lz-phone .scr::after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.35),transparent 35%);pointer-events:none}
.lz-phone .notch{position:absolute;top:6px;left:50%;width:46px;height:12px;margin-left:-23px;border-radius:8px;background:#0D0E15;z-index:2}
.lz-phone .bar{display:flex;align-items:center;justify-content:space-between;padding:24px 10px 8px;background:linear-gradient(90deg,#5125C9,#AC145B);color:#FFF;font:700 10px 'Space Grotesk',sans-serif}
.lz-phone .cart{position:relative;width:18px;height:16px}
.lz-phone .cart svg{width:18px;height:16px;fill:none;stroke:#FFF;stroke-width:2}
.lz-phone .badge{position:absolute;right:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:#FFE36B;color:#111126;font:700 8px/14px 'IBM Plex Mono',monospace;text-align:center;overflow:hidden}
.lz-phone .badge span{display:block;animation:lzCount 6s steps(1) infinite}
@keyframes lzCount{0%{transform:translateY(0)}33.3%{transform:translateY(-14px)}66.6%{transform:translateY(-28px)}100%{transform:translateY(0)}}
.lz-phone .grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px}
.lz-phone .prod{border-radius:8px;background:#F1EEF9;padding:4px;display:flex;flex-direction:column;gap:3px}
.lz-phone .prod i{display:block;height:44px;border-radius:6px;background:linear-gradient(135deg,var(--a),var(--b));position:relative;overflow:hidden}
.lz-phone .prod i::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);background-size:250% 100%;animation:shimmerText 3s linear infinite}
.lz-phone .prod em{display:block;height:4px;width:80%;border-radius:3px;background:#CFC8E6}
.lz-phone .prod u{display:block;height:5px;width:45%;border-radius:3px;background:#AC145B;text-decoration:none}
.lz-phone .buy{margin:2px 8px 0;padding:7px 0;border-radius:9px;text-align:center;background:#25D366;color:#052E16;font:700 9px 'Space Grotesk',sans-serif;animation:lzPress 2s ease-in-out infinite}
@keyframes lzPress{0%,70%,100%{transform:scale(1)}78%{transform:scale(.92)}}
.lz-phone .fly{position:absolute;width:10px;height:10px;border-radius:50%;background:#FFE36B;box-shadow:0 0 10px #FFE36B;left:50%;bottom:44px;animation:lzFly 2s ease-in infinite;opacity:0}
@keyframes lzFly{0%,74%{opacity:0;transform:translate(0,0) scale(1)}78%{opacity:1}100%{opacity:0;transform:translate(52px,-228px) scale(.4)}}
.lz-phone .pay{display:flex;gap:4px;padding:8px 8px 0;justify-content:center}
.lz-phone .pay b{width:22px;height:13px;border-radius:3px;background:linear-gradient(135deg,#243BCE,#6CF0C2)}
.lz-phone .pay b:nth-child(2){background:linear-gradient(135deg,#FF782D,#FFE36B)}.lz-phone .pay b:nth-child(3){background:linear-gradient(135deg,#AC145B,#5125C9)}
/* tarjeta de datos flotante */
.lz-data{position:absolute;left:-46px;top:84px;width:176px;padding:12px 12px 10px;border-radius:14px;background:rgba(255,254,250,.96);color:#111126;box-shadow:0 24px 50px rgba(10,6,40,.45);z-index:6;transform:rotate(-5deg);animation:lzFloat2 7s ease-in-out infinite}
@keyframes lzFloat2{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(-3deg) translateY(-12px)}}
.lz-data b{display:flex;justify-content:space-between;font:700 11px 'Space Grotesk',sans-serif}
.lz-data b span{font:600 9px 'IBM Plex Mono',monospace;color:#0CA678}
.lz-data svg{display:block;width:100%;height:56px;margin-top:6px}
.lz-data .ln{fill:none;stroke:url(#lzLine);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:lzDraw 4s ease-in-out infinite}
@keyframes lzDraw{0%{stroke-dashoffset:1}55%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}
.lz-data .bars{display:flex;align-items:flex-end;gap:4px;height:26px;margin-top:6px}
.lz-data .bars i{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(#5125C9,#AC145B);transform-origin:bottom;animation:lzBar 3s ease-in-out infinite}
.lz-data .bars i:nth-child(2){animation-delay:.3s;background:linear-gradient(#243BCE,#6CF0C2)}.lz-data .bars i:nth-child(3){animation-delay:.6s}.lz-data .bars i:nth-child(4){animation-delay:.9s;background:linear-gradient(#FF782D,#FFE36B)}.lz-data .bars i:nth-child(5){animation-delay:1.2s}
@keyframes lzBar{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@media (max-width:980px){.lz-phone,.lz-data{display:none}.lz-base{margin:0 -3%}}

/* ---------- Realismo: retrato enmarcado en "El consultor" ---------- */
.lz-spot{position:relative}
.lz-spot::before{content:'';position:absolute;left:-30%;right:-30%;top:-140px;height:150%;pointer-events:none;z-index:0;background:radial-gradient(50% 60% at 50% 0%,rgba(255,236,170,.32),rgba(255,236,170,.08) 55%,transparent 75%);filter:blur(4px)}
.lz-frame{border:22px solid transparent;border-image:linear-gradient(135deg,#7A5A15 0%,#F7DC8A 18%,#B8862B 36%,#FFF0B8 50%,#9C7424 66%,#E9C46A 82%,#6E5012 100%) 1;padding:20px;background:radial-gradient(circle at 50% 40%,#FBF5E6,#EADFC5);box-shadow:0 0 0 2px #5C4410,inset 0 0 0 2px rgba(92,68,16,.5),inset 0 0 24px rgba(92,68,16,.35),0 34px 60px rgba(0,0,0,.5)}
.lz-frame .ring,.lz-frame .orbit{display:none}
.lz-frame img{box-shadow:0 0 0 6px #F3E9CF,0 0 0 7px #C9A85A,inset 0 0 20px rgba(0,0,0,.3)}
.lz-plaque{display:block;width:max-content;max-width:100%;margin:16px auto 0;padding:6px 16px;border-radius:2px;background:linear-gradient(135deg,#7A5A15,#F7DC8A 30%,#C9A04A 55%,#FFF0B8 70%,#9C7424);color:#3B2A05;font:700 11px 'Space Grotesk',sans-serif;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 4px 10px rgba(0,0,0,.35);position:relative;z-index:1}

/* ---------- Realismo: plantillas como pantallas reales ---------- */
.tpl-track .tpl{box-shadow:0 18px 30px rgba(10,6,40,.35),0 0 0 1px rgba(255,255,255,.1)!important;transform:perspective(700px) rotateY(-8deg)}
.tpl-track .tpl:nth-child(2n){transform:perspective(700px) rotateY(8deg)}

@media (prefers-reduced-motion:reduce){.lz-phi .g,.lz-phi .sp{transition:none;stroke-dashoffset:0}.lz-phi .eye,.lz-phi .phi-t{transition:none;opacity:.9}.lz-phone,.lz-data,.lz-phone *,.lz-data *{animation:none!important}.lz-uline path{transition:none;stroke-dashoffset:0}.lz-label{transition:none;opacity:1;transform:none}}

/* ---------- Realismo: el sueño se pinta sobre un caballete ---------- */
.dream-svg{overflow:visible}
.dream>p{margin-top:92px!important}
@media (max-width:700px){.dream>p{margin-top:40px!important}}