/* ================= fuentes ================= */
@font-face{font-family:"Bricolage";src:url("../fonts/bricolage.final.woff2?v=4151ac23") format("woff2");font-weight:400 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("../fonts/instrument.sub.woff2?v=f98a8422") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("../fonts/instrument-italic.sub.woff2?v=aeb7411d") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Geist";src:url("../fonts/geist.sub.woff2?v=9647329f") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("../fonts/geist-mono.sub.woff2?v=7baa1540") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Pixelify";src:url("../fonts/pixelify.sub.woff2?v=dd78ed98") format("woff2");font-weight:400 700;font-display:swap}

:root{
  color-scheme: dark;
  --cafe-hero:url("../img/cafe_hero.webp?v=21de5f66"); --cafe-flat:url("../img/cafe_flat.webp?v=8dbf3228"); --velvet:url("../img/velvet.webp?v=09ff38f6"); --seal:url("../img/seal.webp?v=7fa1f0a7"); --heart-img:url("../img/deco_heart.webp?v=5578b70f"); --barbers:url("../img/barbers.webp?v=880a1270");
  --ink:#0A0709; --ink-2:#120D11; --ink-3:#1B1419; --line:rgba(255,236,244,.09); --line-2:rgba(255,236,244,.16);
  --pink:#F71555; --pink-hot:#FF2D6B; --pink-deep:#B90C3F; --blush:#FF9DB9; --pink-ghost:rgba(247,21,85,.14);
  --white:#FFFFFF; --paper:#F4EDF0; --muted:#A8959D; --gold:#E6DCC6;
  --glass:rgba(16,11,15,.66);
  --f-display:"Bricolage","Arial Narrow",system-ui,sans-serif;
  --f-serif:"Instrument Serif","Didot","Bodoni 72",Georgia,serif;
  --f-body:"Geist","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-mono:"Geist Mono",ui-monospace,Consolas,monospace;
  --f-pixel:"Pixelify","Geist Mono",monospace;
  --fs-xs:.74rem; --fs-sm:.9rem; --fs-base:1.02rem; --fs-lg:1.16rem;
  --fs-xl:clamp(1.7rem, 1.2rem + 2vw, 2.7rem);
  --fs-2xl:clamp(2.5rem, 1.4rem + 4.6vw, 5rem);
  --fs-hero:clamp(3.3rem, 1.4rem + 8.2vw, 8.6rem);
  --r-sm:10px; --r-md:18px; --r-lg:28px;
  --gutter:clamp(16px, 4vw, 44px);
  --maxw:1240px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --gato:url("{{GATO}}"); --logo-w:url("{{LOGO_W}}");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--ink); color:var(--paper); font-family:var(--f-body); font-size:var(--fs-base); line-height:1.6; overflow-x:hidden; -webkit-tap-highlight-color:transparent; font-feature-settings:"ss01","cv11"}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--blush); outline-offset:3px; border-radius:6px}
h1,h2,h3,h4,h5{margin:0; font-weight:800; line-height:1; text-wrap:balance}
p{margin:0}
[hidden]{display:none!important}
.skip{position:absolute; left:-999px; top:8px; z-index:100; background:var(--pink); color:var(--white); padding:10px 14px; border-radius:8px}
.skip:focus{left:12px}
.serif{font-family:var(--f-serif); font-weight:400; font-style:italic; letter-spacing:-.01em}
.peek,.fl-cat,.jingle-cat{display:block; background:url("../img/gato.webp?v=98729fae") center/contain no-repeat; aspect-ratio:389/560; height:auto}
.logo-w{display:block; background:url("../img/logo_w.webp?v=eb9ff46b") center/contain no-repeat}

/* ================= fondo 3D ================= */
#bg3d{position:fixed; inset:0; width:100vw; height:100vh; height:100lvh; z-index:0; display:block; pointer-events:none; background:radial-gradient(120% 80% at 60% 30%, #1a0c14, #0A0709 70%)}
.page{position:relative; z-index:2; overflow-x:clip}



/* ================= utilidades ================= */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.eyebrow{font-family:var(--f-mono); font-size:var(--fs-xs); font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--blush); display:flex; align-items:center; gap:10px}
.eyebrow::before{content:""; width:22px; height:1.5px; background:currentColor}
.btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:50px; padding:13px 24px; border-radius:999px; border:1.5px solid transparent; font-family:var(--f-display); font-weight:700; font-stretch:92%; font-size:1.02rem; letter-spacing:.005em; text-decoration:none; transition:transform .25s var(--ease), background .2s, color .2s, border-color .2s, box-shadow .3s; white-space:nowrap; overflow:hidden; isolation:isolate}
.btn:active{transform:scale(.97)}
.btn-pink{background:var(--pink); color:var(--white); box-shadow:0 10px 30px -10px rgba(247,21,85,.7), inset 0 1px 0 rgba(255,255,255,.25)}
.btn-pink::after{content:""; position:absolute; inset:0; background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform:translateX(-120%); transition:transform .8s var(--ease); z-index:-1}
.btn-pink:hover{background:var(--pink-hot); box-shadow:0 14px 40px -8px rgba(247,21,85,.85)}
.btn-pink:hover::after{transform:translateX(120%)}
.btn-ghost{border-color:rgba(255,255,255,.25); color:var(--white); background:rgba(255,255,255,.03)}
.btn-ghost:hover{border-color:var(--white); background:rgba(255,255,255,.08)}
.btn-sm{min-height:40px; padding:8px 16px; font-size:.9rem}
.btn svg{width:20px; height:20px; flex:none}
.glass{background:var(--glass); border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 30px 80px -40px rgba(0,0,0,.9)}
@media (hover:hover) and (pointer:fine){.glass{backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3)}}

/* ================= barra superior ================= */
.topbar{position:fixed; top:0; left:0; right:0; z-index:50; padding-top:env(safe-area-inset-top,0px); transition:transform .4s var(--ease); border-bottom:1px solid transparent}
.topbar::before{content:""; position:absolute; inset:0 0 -26px; background:linear-gradient(180deg,rgba(10,7,9,.92),rgba(10,7,9,.6) 60%,rgba(10,7,9,0)); pointer-events:none; z-index:-1; transition:opacity .3s}
.topbar.solid::before{opacity:0}
.topbar.solid{background:rgba(10,7,9,.97); border-color:var(--line)}
@media (hover:hover) and (pointer:fine){.topbar.solid{background:rgba(10,7,9,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)}}
.topbar-in{max-width:var(--maxw); margin-inline:auto; padding:10px var(--gutter); display:flex; align-items:center; gap:12px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto}
.brand img{width:40px; height:40px; border-radius:11px; box-shadow:0 6px 20px -6px rgba(247,21,85,.7)}
.brand span{font-family:var(--f-serif); font-style:italic; font-size:1.9rem; line-height:1; color:var(--white)}
.menu{display:flex; gap:26px}
.menu a{text-decoration:none; font-weight:500; font-size:var(--fs-sm); color:var(--paper); opacity:.8; position:relative}
.menu a::after{content:""; position:absolute; left:0; right:0; bottom:-4px; height:1.5px; background:var(--pink); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease)}
.menu a:hover{opacity:1}
.menu a:hover::after{transform:scaleX(1)}
.icon-btn{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; border:1.5px solid rgba(255,255,255,.2); background:rgba(255,255,255,.03); color:var(--white); flex:none}
.icon-btn:hover{border-color:var(--white)}
.icon-btn[aria-pressed="true"]{background:var(--pink); border-color:var(--pink)}
.icon-btn svg{width:20px; height:20px}
.snd{display:flex; align-items:center; gap:8px; height:44px; padding:0 14px 0 12px; border-radius:999px; border:1.5px solid rgba(255,255,255,.2); background:rgba(255,255,255,.03); font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--white)}
.snd .eq{display:flex; gap:2px; align-items:flex-end; height:14px}
.snd .eq i{width:3px; background:var(--pink); border-radius:2px; height:30%; transition:height .2s}
.snd.on .eq i{animation:eq .9s ease-in-out infinite}
.snd .eq i:nth-child(1){height:45%}.snd .eq i:nth-child(2){height:80%}.snd .eq i:nth-child(3){height:55%}.snd .eq i:nth-child(4){height:95%}
.snd.hint{border-color:rgba(247,21,85,.7); animation:sndHint 1.8s ease-out infinite}
.snd.off .eq i{background:rgba(255,255,255,.35); height:20%}
@keyframes sndHint{0%{box-shadow:0 0 0 0 rgba(247,21,85,.55)}70%,100%{box-shadow:0 0 0 12px rgba(247,21,85,0)}}
@media (prefers-reduced-motion: reduce){.snd.hint{animation:none}}
.snd.on .eq i:nth-child(2){animation-delay:-.3s}.snd.on .eq i:nth-child(3){animation-delay:-.6s}.snd.on .eq i:nth-child(4){animation-delay:-.15s}
@keyframes eq{0%,100%{height:25%}50%{height:100%}}
.menu-btn{display:none}
@media (max-width:900px){
  .menu{position:fixed; inset:auto 0 auto 0; top:calc(64px + env(safe-area-inset-top,0px)); flex-direction:column; gap:0; background:rgba(10,7,9,.97); border-bottom:1px solid var(--line); padding:8px var(--gutter) 18px; transform:translateY(-8px); opacity:0; pointer-events:none; transition:.25s var(--ease)}
  .menu.open{opacity:1; transform:none; pointer-events:auto}
  .menu a{padding:14px 0; font-family:var(--f-display); font-size:1.4rem; font-weight:700; border-bottom:1px solid var(--line)}
  .menu-btn{display:grid}
  .topbar .cta-top{display:none}
  .snd .lbl{display:none}
  .snd{padding:0 12px}
}

/* ================= portada ================= */
.hero{position:relative; min-height:min(100svh, 980px); display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); align-items:center; gap:24px; max-width:var(--maxw); margin-inline:auto; padding:calc(100px + env(safe-area-inset-top,0px)) var(--gutter) 56px}
.hero h1{font-family:var(--f-display); font-size:var(--fs-hero); font-weight:800; font-stretch:78%; letter-spacing:-.035em; color:var(--white); line-height:.86; margin-top:20px}
.hero h1 .l{display:block}
.hero h1 .serif{color:var(--pink); font-size:1.12em; letter-spacing:-.02em; padding-right:.06em; text-shadow:0 0 40px rgba(247,21,85,.45)}
.hero .lead{max-width:48ch; margin-top:26px; font-size:var(--fs-lg); color:var(--paper); opacity:.9}
.hero-ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.hero-meta{display:flex; gap:20px; flex-wrap:wrap; margin-top:34px; font-family:var(--f-mono); font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.hero-meta span{display:flex; align-items:center; gap:8px}
.hero-meta span::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--pink); box-shadow:0 0 10px var(--pink)}
.hero-stage{position:relative; height:min(66vh, 640px); min-height:360px; cursor:grab; touch-action:pan-y; -webkit-user-select:none; user-select:none}
.hero-fallback{position:absolute; inset:0; margin:auto; height:92%; width:auto; object-fit:contain; transition:opacity .6s; pointer-events:none}
.three-ready .hero-fallback{opacity:0}
.stage-hint{position:absolute; bottom:-6px; left:50%; transform:translateX(-50%); padding:7px 14px; border-radius:999px; background:rgba(10,7,9,.72); border:1px solid var(--line-2); font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--paper); white-space:nowrap; display:flex; gap:8px; align-items:center; pointer-events:none}
.stage-hint svg{width:16px; height:16px; color:var(--pink)}
.cat-bubble{position:absolute; top:4%; left:0; z-index:3; background:var(--white); color:var(--ink); font-family:var(--f-display); font-weight:700; font-size:1.02rem; padding:11px 17px; border-radius:20px 20px 4px 20px; box-shadow:0 14px 40px rgba(0,0,0,.45); animation:pop .35s var(--ease); max-width:240px; line-height:1.25}
@keyframes pop{from{transform:scale(.7); opacity:0}to{transform:none; opacity:1}}
.scroll-hint{position:absolute; left:var(--gutter); bottom:18px; font-family:var(--f-mono); font-size:var(--fs-xs); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); text-decoration:none; display:flex; gap:10px; align-items:center}
.scroll-hint i{width:2px; height:34px; background:linear-gradient(var(--pink), transparent); display:block; animation:drip 1.8s infinite}
@keyframes drip{0%{transform:scaleY(0); transform-origin:top}50%{transform:scaleY(1); transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0); transform-origin:bottom}}
.hero-copy > *{text-shadow:0 2px 18px rgba(10,7,9,.85)}
@media (max-width:900px){
  .hero{grid-template-columns:1fr; min-height:auto; padding-top:calc(86px + env(safe-area-inset-top,0px)); gap:0}
  .hero-copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero-stage{order:3; height:min(50vh, 430px); min-height:320px; margin-top:4px}
  .hero .lead{order:4; margin-top:6px}
  .hero-ctas{order:5}
  .hero-meta{order:6}
  .scroll-hint{display:none}
}

/* cinta */
.marquee-clip{overflow:hidden; padding-block:26px 10px}
.marquee{position:relative; background:var(--pink); color:var(--ink); overflow:hidden; transform:rotate(-1.8deg); width:104%; margin-left:-2%; box-shadow:0 20px 60px -20px rgba(247,21,85,.6)}
.marquee-track{display:flex; width:max-content; animation:slide 40s linear infinite}
.marquee-track span{display:flex; align-items:center; gap:24px; padding:14px 12px; font-family:var(--f-display); font-weight:800; font-stretch:80%; text-transform:uppercase; font-size:clamp(1.5rem, 1rem + 2vw, 2.7rem); letter-spacing:-.01em; white-space:nowrap}
.marquee-track em{font-family:var(--f-serif); font-weight:400; text-transform:none; color:var(--white); font-size:1.12em}
.marquee-track img{width:48px; height:48px; object-fit:contain}
@keyframes slide{to{transform:translateX(-50%)}}

/* ================= secciones ================= */
.section{padding-block:clamp(80px, 11vw, 150px)}
.section-head{display:grid; gap:18px; max-width:820px}
.section-head h2{font-family:var(--f-display); font-size:var(--fs-2xl); font-weight:800; font-stretch:80%; letter-spacing:-.03em; color:var(--white); line-height:.92}
.section-head h2 .serif{color:var(--pink); font-size:1.1em}
.section-head p{color:var(--muted); font-size:var(--fs-lg); max-width:58ch}
.section-head{position:relative; isolation:isolate}
.section-head::before{content:""; position:absolute; inset:-40px -60px; background:radial-gradient(closest-side, rgba(10,7,9,.82), rgba(10,7,9,.5) 60%, transparent); z-index:-1; pointer-events:none}
.section-head > *{text-shadow:0 2px 16px rgba(10,7,9,.95)}

/* índice */
.svc-index{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; margin-top:48px}
.svc-chip{position:relative; display:grid; grid-template-rows:auto 1fr; gap:10px; padding:18px 18px 20px; border-radius:var(--r-md); text-decoration:none; overflow:hidden; transition:border-color .3s, transform .4s var(--ease); transform-style:preserve-3d}
.svc-chip::before{content:""; position:absolute; inset:0; background:radial-gradient(120% 80% at 50% 0%, rgba(247,21,85,.22), transparent 60%); opacity:0; transition:opacity .4s}
.svc-chip:hover{border-color:rgba(247,21,85,.6)}
.svc-chip:hover::before{opacity:1}
.svc-chip .ic{width:84px; height:84px; object-fit:contain; transition:transform .5s var(--ease); filter:drop-shadow(0 12px 18px rgba(0,0,0,.5))}
.svc-chip:hover .ic{transform:translateY(-6px) rotate(-6deg) scale(1.06)}
.svc-chip b{font-family:var(--f-display); font-size:1.28rem; font-weight:700; font-stretch:88%; color:var(--white); display:flex; align-items:center; justify-content:space-between; gap:8px; line-height:1.1}
.svc-chip b svg{width:18px; height:18px; color:var(--pink); flex:none; transition:transform .3s}
.svc-chip:hover b svg{transform:translateX(4px)}
.svc-chip span{font-size:var(--fs-sm); color:var(--muted); line-height:1.45}
@media (max-width:980px){.svc-index{grid-template-columns:repeat(2, minmax(0,1fr))}.svc-chip .ic{width:66px; height:66px}}

/* bloque de servicio */
.svc{position:relative; padding-block:clamp(60px, 9vw, 120px)}
.svc-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(24px, 4vw, 64px); align-items:center}
.svc.flip .svc-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.svc.flip .svc-copy{order:2}
.svc-copy{border-radius:var(--r-lg); padding:clamp(24px, 3vw, 38px); display:grid; gap:16px; align-content:start; position:relative}
.svc-copy .num{position:absolute; top:18px; right:22px; width:74px; height:74px; object-fit:contain; filter:drop-shadow(0 10px 16px rgba(0,0,0,.55)); animation:bob 5s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px) rotate(4deg)}}
.svc-copy h3{font-family:var(--f-display); font-size:var(--fs-xl); font-weight:800; font-stretch:82%; color:var(--white); letter-spacing:-.025em; line-height:.98; padding-right:60px}
.svc-copy h3 .serif{color:var(--pink); font-size:1.1em}
.svc-copy > p{color:var(--paper); opacity:.9}
.incl{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.incl li{display:flex; gap:10px; align-items:flex-start; font-size:var(--fs-sm); color:var(--paper)}
.incl li svg{width:18px; height:18px; color:var(--pink); flex:none; margin-top:3px}
.svc-copy .btn{justify-self:start; margin-top:6px}
@media (max-width:900px){
  .svc-grid,.svc.flip .svc-grid{grid-template-columns:1fr}
  .svc.flip .svc-copy{order:0}
  .svc-copy .num{width:58px; height:58px}
}

/* marco de muestra */
.demo{position:relative; background:linear-gradient(180deg, rgba(28,20,26,.92), rgba(14,10,13,.94)); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:14px; box-shadow:0 40px 100px -40px rgba(247,21,85,.45), 0 0 0 1px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.07)}
.demo::before{content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background:linear-gradient(140deg, rgba(247,21,85,.7), transparent 30%, transparent 70%, rgba(255,157,185,.4)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none}
.demo-toolbar{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:2px 4px 12px}
.live{font-family:var(--f-mono); font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--blush); display:flex; align-items:center; gap:8px}
.live::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--pink); box-shadow:0 0 8px var(--pink); animation:ping 1.6s ease-in-out infinite}
@keyframes ping{50%{opacity:.3}}
.hint{font-size:var(--fs-xs); color:var(--muted)}
.seg{display:inline-flex; background:rgba(0,0,0,.4); border:1px solid var(--line-2); border-radius:999px; padding:3px; gap:2px}
.seg button{border:0; background:transparent; padding:7px 13px; border-radius:999px; font-size:var(--fs-xs); font-weight:600; color:var(--muted); min-height:34px; transition:background .2s, color .2s}
.seg button[aria-pressed="true"]{background:var(--pink); color:var(--white); box-shadow:0 6px 16px -6px rgba(247,21,85,.8)}
.peek{position:absolute; width:70px; right:22px; top:-94px; pointer-events:none; filter:drop-shadow(0 8px 14px rgba(0,0,0,.45)); z-index:4}
.svc.flip .peek{right:auto; left:22px; transform:scaleX(-1)}
.peek-say{position:absolute; top:-78px; right:98px; background:var(--white); color:var(--ink); font-family:var(--f-display); font-size:.82rem; font-weight:700; padding:6px 12px; border-radius:12px 12px 2px 12px; white-space:nowrap; pointer-events:none; z-index:4}
.svc.flip .peek-say{right:auto; left:98px; border-radius:12px 12px 12px 2px}
@media (max-width:600px){.peek{width:56px; top:-76px; right:12px}.svc.flip .peek{left:12px}.peek-say{top:-62px; right:74px}.svc.flip .peek-say{left:74px}}

/* ================= DEMO: página web (Café Ronroneo) ================= */
.browser{border-radius:14px; overflow:hidden; background:#fff; margin-inline:auto; transition:max-width .6s var(--ease); max-width:100%; box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.demo-web[data-view="cel"] .browser{max-width:370px}
.browser-bar{display:flex; align-items:center; gap:6px; padding:9px 12px; background:#F1E9EC}
.browser-bar i{width:10px; height:10px; border-radius:50%; background:#dccbd1}
.browser-bar i:first-child{background:#FF5F57}.browser-bar i:nth-child(2){background:#FEBC2E}.browser-bar i:nth-child(3){background:#28C840}
.browser-bar .url{margin-left:8px; flex:1; background:#fff; border-radius:999px; padding:3px 12px; font-size:.72rem; color:#6b5a61; font-family:var(--f-mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.site{height:500px; overflow-y:auto; overscroll-behavior:contain; background:#0E0A0C; color:#F4EDF0; container-type:inline-size; font-family:var(--f-body); position:relative; scroll-behavior:smooth; scrollbar-width:thin}
.s-nav{position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; padding:12px 18px; background:rgba(14,10,12,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,.07)}
.s-logo{font-family:var(--f-serif); font-size:1.45rem; line-height:1}
.s-logo i{font-style:italic; color:var(--pink)}
.s-links{display:flex; gap:16px; font-size:.8rem; font-weight:500; opacity:.85}
.s-links a{text-decoration:none}
.s-cart{border:0; background:#fff; color:#0E0A0C; border-radius:999px; padding:7px 13px; font-size:.78rem; font-weight:700; display:flex; gap:6px; align-items:center}
.s-cart em{font-style:normal; background:var(--pink); color:#fff; border-radius:999px; min-width:20px; height:20px; display:inline-grid; place-items:center; font-size:.72rem; padding:0 6px; transition:transform .3s var(--ease)}
.s-cart em.bump{animation:bump .4s var(--ease)}
@keyframes bump{50%{transform:scale(1.45)}}
.s-hero{position:relative; min-height:300px; display:grid; align-content:end; padding:26px 22px; background:var(--cafe-hero) center/cover no-repeat; overflow:hidden}
.s-hero::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,10,12,.05) 20%, rgba(14,10,12,.92) 92%)}
.s-hero > *{position:relative}
.s-tag{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--blush)}
.s-hero h4{font-family:var(--f-serif); font-weight:400; font-size:clamp(2rem, 7cqw, 3.1rem); line-height:.95; margin-top:8px; max-width:14ch}
.s-hero h4 i{color:var(--pink)}
.s-hero p{font-size:.86rem; opacity:.85; margin-top:10px; max-width:40ch}
.s-row{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap}
.s-btn{border:0; background:var(--pink); color:#fff; font-weight:700; border-radius:999px; padding:10px 18px; font-size:.84rem; box-shadow:0 8px 22px -8px rgba(247,21,85,.8)}
.s-btn.alt{background:rgba(255,255,255,.12); box-shadow:none; backdrop-filter:blur(6px)}
.s-sec{padding:26px 22px}
.s-sec h5{font-family:var(--f-serif); font-weight:400; font-size:1.9rem; margin:0 0 4px; line-height:1}
.s-sec h5 i{color:var(--pink)}
.s-sub{font-size:.8rem; opacity:.6; margin-bottom:14px}
.s-tabs{display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap}
.s-tabs button{border:1px solid rgba(255,255,255,.2); background:transparent; border-radius:999px; padding:6px 13px; font-size:.78rem; font-weight:600}
.s-tabs button[aria-pressed="true"]{background:#fff; color:#0E0A0C; border-color:#fff}
.s-items{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.s-item{display:grid; grid-template-columns:62px 1fr auto; align-items:center; gap:12px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); border-radius:16px; padding:9px; transition:border-color .2s}
.s-item:hover{border-color:rgba(247,21,85,.5)}
.s-thumb{width:62px; height:62px; border-radius:12px; background:var(--cafe-flat) no-repeat; background-size:300% 300%}
.s-item b{display:block; font-size:.88rem; font-weight:600}
.s-item small{display:block; font-size:.72rem; opacity:.6; line-height:1.3}
.s-item span{font-family:var(--f-mono); font-size:.78rem; color:var(--blush)}
.s-add{border:0; width:34px; height:34px; border-radius:50%; background:var(--pink); color:#fff; font-size:1.2rem; font-weight:700; flex:none; line-height:1; transition:transform .2s}
.s-add:active{transform:scale(.85)}
.s-gal{display:grid; grid-template-columns:1.3fr 1fr; gap:8px; padding:0 22px}
.s-gal div{border-radius:16px; min-height:150px; background-size:cover; background-position:center}
.s-res{display:flex; flex-wrap:wrap; gap:10px; align-items:end; background:linear-gradient(135deg, #1d1318, #0e0a0c); border:1px solid rgba(255,255,255,.08); color:#fff; border-radius:18px; padding:16px}
.s-res label{display:grid; gap:4px; font-size:.66rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; opacity:.8}
.s-res select{background:#fff; color:#0E0A0C; border:0; border-radius:10px; padding:8px 10px; font-size:.86rem}
.s-foot{padding:20px 22px 28px; font-size:.74rem; opacity:.55; border-top:1px solid rgba(255,255,255,.08)}
.s-toast{position:sticky; bottom:12px; margin:0 auto; width:max-content; max-width:90%; background:#fff; color:#0E0A0C; padding:9px 16px; border-radius:999px; font-size:.8rem; font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,.35); z-index:6; animation:pop .25s var(--ease)}
.s-drawer{position:sticky; top:56px; z-index:6; margin:0 12px; background:#fff; color:#0E0A0C; border-radius:18px; padding:14px; box-shadow:0 16px 40px rgba(0,0,0,.4); font-size:.84rem; animation:pop .25s var(--ease)}
.s-drawer ul{list-style:none; margin:6px 0; padding:0; display:grid; gap:4px}
.s-drawer li{display:flex; justify-content:space-between}
.s-drawer .tot{display:flex; justify-content:space-between; font-weight:800; border-top:1px dashed #d8c6cd; padding-top:6px}
@container (max-width:520px){
  .s-links{display:none}
  .s-items{grid-template-columns:1fr}
  .s-gal{grid-template-columns:1fr}
}

/* ================= DEMO: juego ================= */
.game-wrap{position:relative; border-radius:14px; overflow:hidden; aspect-ratio:16/9; max-width:100%; background:#140E11; touch-action:manipulation; user-select:none; -webkit-user-select:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.game-wrap canvas{width:100%; height:100%; display:block}
.game-over{position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:12px; text-align:center; background:radial-gradient(circle at 50% 40%, rgba(40,10,24,.55), rgba(10,7,9,.82)); padding:16px}
.game-over .pix{font-family:var(--f-pixel); font-weight:700; font-size:clamp(1.4rem, 1rem + 2.2vw, 2.5rem); color:var(--white); line-height:1; text-shadow:0 4px 0 var(--pink-deep), 0 0 30px rgba(247,21,85,.6); letter-spacing:.02em}
.game-over .pix b{color:var(--pink); text-shadow:0 4px 0 #5a0620}
.game-over p{font-size:var(--fs-sm); color:var(--paper)}
.game-over small{font-family:var(--f-pixel); color:var(--blush); font-size:.9rem}
.game-over .row{display:flex; gap:14px; align-items:center; justify-content:center}
.game-over .row img{width:auto; image-rendering:auto}
.game-over .row .gi-cat{height:66px}
.game-over .row .gi-dog{height:42px}
.game-mute{position:absolute; top:8px; right:8px; width:36px; height:36px}
@media (max-width:600px){
  .game-wrap{aspect-ratio:4/3}
  .game-over{gap:6px; padding:10px 14px; align-content:center}
  .game-over .row .gi-cat{height:44px}
  .game-over .row .gi-dog{height:30px}
  .game-over .pix{font-size:1.25rem}
  .game-over p{font-size:.76rem; line-height:1.3; max-width:34ch}
  .game-over .btn{min-height:40px; padding:8px 22px}
  .game-over small{font-size:.75rem}
}

/* ================= DEMO: sala 3D ================= */
.expo-wrap{position:relative; aspect-ratio:16/10; max-width:100%; border-radius:14px; overflow:hidden; background:radial-gradient(circle at 50% 40%, #2a1720, #0A0709); touch-action:pan-y; cursor:grab}
.expo-wrap:active{cursor:grabbing}
.expo-wrap canvas{width:100%; height:100%; display:block}
.expo-label{position:absolute; left:12px; bottom:12px; background:rgba(247,240,232,.96); color:#1a1216; border-radius:4px; padding:12px 16px 12px; max-width:min(80%, 320px); pointer-events:none; box-shadow:0 10px 30px rgba(0,0,0,.4); border-left:3px solid var(--pink)}
.expo-label .mono{font-family:var(--f-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--pink-deep)}
.expo-label h4{font-family:var(--f-serif); font-weight:400; font-size:1.55rem; margin:4px 0 2px; line-height:1}
.expo-label p{font-size:.78rem; color:#5d4c53; line-height:1.4}
.expo-nav{position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:rgba(10,7,9,.6); color:var(--white); display:grid; place-items:center; backdrop-filter:blur(8px)}
.expo-nav:hover{background:var(--pink)}
.expo-nav svg{width:20px; height:20px}
.expo-nav.prev{left:10px}.expo-nav.next{right:10px}
.expo-msg{position:absolute; inset:0; display:grid; place-content:center; text-align:center; padding:20px; color:var(--muted); font-size:var(--fs-sm)}
.expo-dots{position:absolute; right:14px; bottom:16px; display:flex; gap:6px}
.expo-dots i{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.3); transition:background .3s, transform .3s}
.expo-dots i.on{background:var(--pink); transform:scale(1.3)}
@media (max-width:600px){.expo-wrap{aspect-ratio:4/5}}

/* ================= DEMO: carta ================= */
.letter-stage{position:relative; height:440px; border-radius:14px; overflow:hidden; background:#120a0e var(--velvet) center/cover no-repeat; display:grid; place-items:end center; perspective:900px; touch-action:pan-y}
.letter-stage::after{content:""; position:absolute; inset:0; background:radial-gradient(70% 60% at 50% 55%, transparent, rgba(8,4,6,.55)); pointer-events:none}
.env{position:relative; z-index:2; width:min(320px, 84%); aspect-ratio:3/2; transform-style:preserve-3d; transition:transform .5s var(--ease); margin-bottom:44px; filter:drop-shadow(0 26px 30px rgba(0,0,0,.55))}
.env-back,.env-front,.env-flap,.paper{position:absolute; left:0; right:0}
.env-back{inset:0; background:linear-gradient(180deg,#e9dfd6,#d8cbbf); border-radius:6px; z-index:0}
.paper{left:5%; right:5%; top:5%; height:90%; z-index:1; background:#fbf7f1 var(--paper-tex); background-size:cover; color:#2a1b21; border-radius:4px; padding:14px 16px; transform:translateY(0); transition:transform 1s var(--ease) .35s; box-shadow:0 8px 24px rgba(0,0,0,.25); font-size:.8rem; line-height:1.45; display:flex; flex-direction:column; gap:6px; overflow:hidden}
.paper .to{font-family:var(--f-serif); font-style:italic; font-size:1.45rem; line-height:1; color:var(--pink-deep)}
.paper .from{font-family:var(--f-serif); font-style:italic; font-size:1.05rem; text-align:right; margin-top:auto}
.paper .body{font-family:var(--f-serif); font-size:1rem; line-height:1.3}
.paper .body::after{content:"|"; color:var(--pink); animation:blink 1s steps(1) infinite}
.paper.done .body::after{content:""}
@keyframes blink{50%{opacity:0}}
.env-front{inset:0; z-index:2; border-radius:0 0 6px 6px; clip-path:polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%); background:linear-gradient(165deg, #f4ece4 0%, #e6d9cd 60%, #d9cabd 100%)}
.env-front::after{content:""; position:absolute; inset:0; background:linear-gradient(to top right, transparent 49.6%, rgba(0,0,0,.08) 50%, transparent 50.6%), linear-gradient(to top left, transparent 49.6%, rgba(0,0,0,.08) 50%, transparent 50.6%)}
.env-flap{top:0; height:58%; z-index:3; background:linear-gradient(to bottom, #efe5dc, #e2d4c7); clip-path:polygon(0 0, 100% 0, 50% 100%); transform-origin:top center; transition:transform .7s var(--ease), z-index 0s .35s}
.seal{position:absolute; left:50%; top:58%; transform:translate(-50%,-50%); z-index:4; width:76px; height:76px; border:0; background:var(--seal) center/contain no-repeat; padding:0; filter:drop-shadow(0 6px 10px rgba(0,0,0,.35)); transition:transform .3s var(--ease), opacity .3s}
.seal:hover{transform:translate(-50%,-50%) scale(1.08) rotate(-6deg)}
.env.open .env-flap{transform:rotateX(180deg); z-index:0}
.env.open .seal{opacity:0; pointer-events:none; transform:translate(-50%,-50%) scale(.3) rotate(40deg)}
.env.open .paper{transform:translateY(-100%)}
.tap-hint{position:absolute; bottom:12px; left:0; right:0; z-index:3; text-align:center; font-family:var(--f-mono); font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--blush); pointer-events:none; text-shadow:0 2px 8px #000}
.hearts{position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:5}
.heart{position:absolute; bottom:-40px; width:26px; height:26px; background:var(--heart-img) center/contain no-repeat; animation:rise linear forwards}
.heart.petal{background:none; border-radius:60% 0 60% 0; background:linear-gradient(135deg, #ff5a8a, #c4103f)}
@keyframes rise{to{transform:translate(var(--dx), -520px) rotate(var(--rot)); opacity:0}}
.demo-letter[data-mode="3d"] .env{transform:rotateX(var(--rx, 14deg)) rotateY(var(--ry, -20deg))}
.demo-letter[data-mode="3d"] .env-back{transform:translateZ(-12px)}
.demo-letter[data-mode="3d"] .env-front{transform:translateZ(8px)}
.demo-letter[data-mode="3d"] .env-flap{transform:translateZ(9px)}
.demo-letter[data-mode="3d"] .env.open .env-flap{transform:translateZ(-11px) rotateX(180deg)}
.demo-letter[data-mode="3d"] .seal{transform:translate(-50%,-50%) translateZ(26px)}
.demo-letter[data-mode="3d"] .env.open .paper{transform:translateY(-100%) translateZ(46px)}
.demo-letter[data-mode="3d"] .heart{animation-name:rise3d}
@keyframes rise3d{0%{transform:translateZ(80px) scale(1.3)}100%{transform:translate(var(--dx), -520px) translateZ(180px) rotate(var(--rot)) scale(2); opacity:0}}
.pix-canvas{position:relative; z-index:2; align-self:center; width:min(100%, 460px); height:auto; aspect-ratio:4/3; image-rendering:pixelated; image-rendering:crisp-edges; cursor:pointer; border-radius:6px; box-shadow:0 20px 40px rgba(0,0,0,.5)}
.letter-controls{display:flex; flex-wrap:wrap; gap:10px; align-items:end; padding:12px 4px 2px}
.field{display:grid; gap:5px; flex:1; min-width:140px}
.field label{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.field input,.field select,.field textarea{background:rgba(0,0,0,.35); border:1px solid var(--line-2); border-radius:12px; padding:11px 13px; color:var(--white); min-height:46px; width:100%; font-size:16px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--pink); outline:none; box-shadow:0 0 0 4px rgba(247,21,85,.15)}

/* ================= DEMO: app ================= */
.app-stage{position:relative; display:grid; place-items:center; padding:10px 0; border-radius:14px; background:radial-gradient(60% 60% at 50% 45%, rgba(247,21,85,.28), transparent 70%)}
.phone{width:min(320px, 100%); aspect-ratio:9/18.6; background:linear-gradient(145deg,#2a2328,#050304 40%,#1c171a); border-radius:48px; padding:10px; box-shadow:inset 0 0 0 1.5px #3b3237, inset 0 0 0 4px #0b090a, 0 40px 80px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.05); position:relative}
.phone::before{content:""; position:absolute; right:-3px; top:24%; width:3px; height:64px; border-radius:2px; background:#2b2428}
.phone-screen{position:relative; height:100%; border-radius:39px; overflow:hidden; background:#FFF8FA; color:#161014; display:flex; flex-direction:column; font-size:.86rem}
.statusbar{display:flex; justify-content:space-between; align-items:center; padding:12px 24px 4px; font-size:.74rem; font-weight:700}
.statusbar .cam{width:70px; height:20px; border-radius:12px; background:#0b090a}
.statusbar .bat{display:flex; gap:4px; align-items:center}
.statusbar .bat i{display:block; width:20px; height:10px; border:1.5px solid #161014; border-radius:3px; position:relative}
.statusbar .bat i::after{content:""; position:absolute; inset:1px 5px 1px 1px; background:#161014; border-radius:1px}
.app-body{flex:1; overflow-y:auto; padding:6px 14px 16px; display:grid; gap:12px; align-content:start; overscroll-behavior:contain; scrollbar-width:none}
.app-top{display:flex; justify-content:space-between; align-items:center}
.app-top h5{font-family:var(--f-serif); font-weight:400; font-size:1.55rem; margin:0; line-height:1}
.app-top h5 i{color:var(--pink)}
.app-top small{display:block; color:#7a6870; font-size:.72rem}
.app-av{width:40px; height:40px; border-radius:50%; background:#161014; color:#fff; display:grid; place-items:center; font-weight:800; font-size:.72rem}
.a-banner{position:relative; height:120px; border-radius:20px; overflow:hidden; background:var(--barbers) center/cover; display:flex; align-items:flex-end; padding:12px; color:#fff}
.a-banner::before{content:""; position:absolute; inset:0; background:linear-gradient(transparent 20%, rgba(0,0,0,.75))}
.a-banner b{position:relative; font-family:var(--f-display); font-stretch:85%; font-size:1.05rem; line-height:1.1}
.a-card{background:#fff; border-radius:20px; padding:14px; box-shadow:0 2px 14px rgba(22,16,20,.07); display:grid; gap:6px}
.a-card.dark{background:#161014; color:#fff}
.a-card.pink{background:linear-gradient(135deg,var(--pink),#ff5a8a); color:#fff}
.a-card h6{margin:0; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; opacity:.75}
.a-card p{font-size:.95rem; font-weight:700; line-height:1.3}
.a-btn{border:0; border-radius:14px; padding:12px; background:var(--pink); color:#fff; font-weight:800; width:100%; box-shadow:0 8px 20px -8px rgba(247,21,85,.7)}
.a-btn:disabled{background:#e9dce1; color:#9d8a92; box-shadow:none}
.a-btn.light{background:#fff; color:#161014; box-shadow:none}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{border:1.5px solid #eadde2; background:#fff; border-radius:12px; padding:7px 10px; font-size:.76rem; font-weight:700; text-align:left; color:#161014}
.chip small{display:block; font-weight:500; color:#7a6870}
.chip[aria-pressed="true"]{border-color:var(--pink); background:#FFE3EC}
.chip:disabled{opacity:.4; text-decoration:line-through}
.barbers{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.barber{display:grid; justify-items:center; gap:4px; text-align:center; font-size:.72rem; font-weight:700}
.barber i{width:58px; height:58px; border-radius:50%; background:#2a1b22 center/cover no-repeat; box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--pink)}
.barber small{font-weight:500; color:#7a6870}
.slots{display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
.slots .chip{text-align:center}
.a-label{font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#7a6870}
.stamps{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.stamps span{aspect-ratio:1; border-radius:50%; border:2px dashed #eadde2; display:grid; place-items:center; color:#eadde2}
.stamps span.on{border:0; background:var(--pink); color:#fff; box-shadow:0 6px 14px -6px rgba(247,21,85,.9)}
.stamps svg{width:60%; height:60%}
.app-tabs{display:grid; grid-template-columns:repeat(3,1fr); background:#fff; border-top:1px solid #f0e3e8; padding:6px 6px 16px}
.app-tabs button{border:0; background:transparent; display:grid; justify-items:center; gap:2px; font-size:.66rem; font-weight:700; color:#9d8a92; padding:6px 0}
.app-tabs button svg{width:22px; height:22px}
.app-tabs button[aria-current="page"]{color:var(--pink)}
.app-notif{position:absolute; left:10px; right:10px; top:38px; z-index:5; background:rgba(28,22,26,.94); backdrop-filter:blur(10px); color:#fff; border-radius:20px; padding:10px 12px; display:flex; gap:10px; align-items:center; font-size:.76rem; line-height:1.3; animation:drop .5s var(--ease); box-shadow:0 12px 30px rgba(0,0,0,.35)}
.app-notif img{width:32px; height:32px; border-radius:9px}
@keyframes drop{from{transform:translateY(-130%)}to{transform:none}}
.check{width:80px; height:80px; border-radius:50%; background:var(--pink); display:grid; place-items:center; margin:18px auto 6px; animation:pop .5s var(--ease); box-shadow:0 0 0 10px rgba(247,21,85,.15), 0 0 0 20px rgba(247,21,85,.07)}
.check svg{width:40px; height:40px; color:#fff}

/* ================= DEMO: bot ================= */
.chat{--c-bg:#0B141A; --c-head:#202C33; --c-me:#005C4B; --c-bot:#202C33; --c-acc:#00A884; border-radius:14px; overflow:hidden; display:flex; flex-direction:column; height:520px; background:var(--c-bg); color:#E9EDEF; position:relative}
.chat::before{content:""; position:absolute; inset:0; opacity:.06; background-image:var(--paw-pattern); background-size:120px 120px; pointer-events:none}
.demo-bot[data-app="tg"] .chat{--c-bg:#0E1621; --c-head:#17212B; --c-me:#2B5278; --c-bot:#182533; --c-acc:#5EB5F7}
.chat > *{position:relative}
.chat-head{display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--c-head)}
.chat-head .av{width:40px; height:40px; border-radius:50%; background:var(--pink); display:grid; place-items:center; overflow:hidden; flex:none}
.chat-head .av .logo-w{width:26px; height:27px}
.chat-head strong{display:block; font-size:.92rem}
.chat-head small{color:#8696A0; font-size:.74rem}
.chat-head .icon-btn{margin-left:auto; width:36px; height:36px; border-color:rgba(255,255,255,.18)}
.chat-log{flex:1; overflow-y:auto; padding:14px 12px; display:flex; flex-direction:column; gap:6px; overscroll-behavior:contain; scroll-behavior:smooth; scrollbar-width:thin}
.msg{max-width:82%; padding:7px 10px 18px; border-radius:12px; font-size:.86rem; line-height:1.42; position:relative; white-space:pre-line; animation:pop .2s var(--ease); word-wrap:break-word; box-shadow:0 1px 1px rgba(0,0,0,.2)}
.msg.bot{background:var(--c-bot); align-self:flex-start; border-top-left-radius:3px}
.msg.me{background:var(--c-me); align-self:flex-end; border-top-right-radius:3px}
.msg time{position:absolute; right:8px; bottom:3px; font-size:.64rem; color:rgba(233,237,239,.6)}
.msg.me time::after{content:" ✓✓"; color:var(--c-acc)}
.msg.pic{padding:4px 4px 20px; width:240px}
.msg.pic img{border-radius:9px; width:100%; aspect-ratio:1; object-fit:cover}
.msg.pic span{display:block; padding:6px 6px 0; font-size:.82rem}
.typing{align-self:flex-start; background:var(--c-bot); border-radius:12px; padding:10px 12px; display:flex; gap:4px}
.typing i{width:7px; height:7px; border-radius:50%; background:#8696A0; animation:bob2 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes bob2{50%{transform:translateY(-4px)}}
.chat-quick{display:flex; gap:6px; flex-wrap:wrap; padding:8px 10px; border-top:1px solid rgba(255,255,255,.06); background:rgba(0,0,0,.15)}
.chat-quick button{border:1.5px solid var(--c-acc); background:transparent; color:var(--c-acc); border-radius:999px; padding:6px 12px; font-size:.78rem; font-weight:600; transition:background .2s, color .2s}
.chat-quick button:hover{background:var(--c-acc); color:#0B141A}
.chat-input{display:flex; gap:8px; padding:8px 10px 10px; background:var(--c-head)}
.chat-input input{flex:1; min-width:0; border:0; border-radius:999px; padding:10px 14px; background:rgba(255,255,255,.08); color:#E9EDEF; font-size:16px}
.chat-input input:focus{outline:2px solid var(--c-acc)}
.chat-input button{width:42px; height:42px; border-radius:50%; border:0; background:var(--c-acc); color:#0B141A; display:grid; place-items:center; flex:none}
.chat-input button svg{width:20px; height:20px}

/* ================= DEMO: flyer ================= */
.flyer-layout{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr); gap:18px; align-items:start}
.flyer-box{display:grid; place-items:center; background:repeating-conic-gradient(#1b1318 0 25%, #151014 0 50%) 0 0/22px 22px; border-radius:14px; padding:20px; min-height:100%}
.flyer{--c1:#F71555; --c2:#B90C3F; --c3:#FF9DB9; --bg:#FFE3EC; --fg:#161014; position:relative; width:100%; max-width:340px; aspect-ratio:1/1; background:var(--bg); color:var(--fg); border-radius:4px; overflow:hidden; box-shadow:0 24px 50px rgba(0,0,0,.55); transition:aspect-ratio .45s var(--ease), max-width .45s var(--ease); font-family:var(--f-body); container-type:inline-size}
.flyer[data-fmt="story"]{aspect-ratio:9/16; max-width:250px}
.flyer *{transition:background-color .45s, color .45s, border-color .45s, opacity .45s, transform .45s var(--ease)}
.fl-in{position:absolute; inset:0; padding:7cqw; display:flex; flex-direction:column; gap:3cqw; z-index:2}
.fl-brand{font-family:var(--f-mono); font-size:3.4cqw; letter-spacing:.16em; text-transform:uppercase; font-weight:500}
.fl-title{font-family:var(--f-display); font-weight:800; font-stretch:78%; font-size:14.5cqw; line-height:.86; letter-spacing:-.02em; max-width:66%; overflow-wrap:anywhere; margin-top:auto; text-transform:uppercase}
.fl-title em{font-family:var(--f-serif); font-weight:400; text-transform:none; font-size:1.05em; color:var(--c1)}
.fl-sub{font-size:4cqw; font-weight:600; max-width:56%; line-height:1.25}
.fl-row{display:flex; align-items:center; gap:2.5cqw; flex-wrap:wrap}
.fl-badge{background:var(--c2); color:#fff; font-weight:800; border-radius:999px; padding:1.8cqw 4cqw; font-size:4.6cqw}
.fl-cta{background:var(--fg); color:var(--bg); font-weight:800; border-radius:999px; padding:1.8cqw 4cqw; font-size:3.6cqw}
.fl-date{display:none; flex-direction:column; align-items:center; justify-content:center; background:var(--fg); color:var(--bg); border-radius:3cqw; padding:2cqw 3cqw; line-height:1; font-weight:800; align-self:flex-start}
.fl-date b{font-size:9cqw; font-family:var(--f-display); font-stretch:80%}
.fl-date small{font-size:3cqw; letter-spacing:.1em}
.flyer[data-tpl="evento"] .fl-date{display:flex}
.flyer[data-fmt="story"] .fl-title{font-size:17cqw; max-width:100%}
.flyer[data-fmt="story"] .fl-sub{max-width:100%; font-size:5.2cqw}
.flyer[data-fmt="story"] .fl-brand{font-size:4.4cqw}
.flyer[data-fmt="story"] .fl-badge,.flyer[data-fmt="story"] .fl-cta{font-size:5.2cqw}
.flyer-controls{display:grid; gap:14px}
.ctl-group{border:0; margin:0; padding:0; display:grid; gap:7px}
.ctl-group legend{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding:0; margin-bottom:7px}
.ctl-row{display:flex; flex-wrap:wrap; gap:6px}
.ctl-row button{border:1px solid var(--line-2); background:rgba(0,0,0,.35); color:var(--paper); border-radius:999px; padding:7px 12px; font-size:.8rem; font-weight:600; min-height:38px}
.ctl-row button[aria-pressed="true"]{border-color:var(--pink); background:var(--pink-ghost); color:var(--white)}
.wheel{display:grid; grid-template-columns:96px 1fr; gap:12px; align-items:center}
.wheel canvas{width:96px; height:96px}
.swatches{display:grid; grid-template-columns:repeat(2,1fr); gap:6px}
.sw{border-radius:10px; overflow:hidden; border:1px solid var(--line); font-family:var(--f-mono); font-size:.62rem; color:var(--muted)}
.sw i{display:block; height:30px}
.sw span{display:block; padding:4px 6px; background:rgba(0,0,0,.4)}
.harmony-note{font-size:var(--fs-sm); color:var(--paper); background:rgba(0,0,0,.35); border-left:3px solid var(--pink); padding:10px 12px; border-radius:0 10px 10px 0}
@media (max-width:760px){.flyer-layout{grid-template-columns:1fr}}

/* ================= DEMO: asesoría ================= */
.adv-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:14px}
.adv-qs{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.q{display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; background:rgba(0,0,0,.3); border:1px solid var(--line-2); border-radius:14px; padding:12px 14px; text-align:left; font-size:var(--fs-sm); color:var(--paper); line-height:1.35; min-height:56px; transition:border-color .2s, background .2s}
.q[aria-checked="true"]{border-color:var(--pink); background:var(--pink-ghost)}
.q .sw-t{width:46px; height:26px; border-radius:999px; background:var(--ink-3); position:relative; flex:none; transition:background .2s; box-shadow:inset 0 0 0 1px var(--line-2)}
.q .sw-t::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform .25s var(--ease); box-shadow:0 2px 6px rgba(0,0,0,.4)}
.q[aria-checked="true"] .sw-t{background:var(--pink)}
.q[aria-checked="true"] .sw-t::after{transform:translateX(20px)}
.adv-result{min-width:0; background:rgba(0,0,0,.35); border:1px solid var(--line-2); border-radius:18px; padding:18px; display:grid; gap:12px; align-content:start; text-align:center; position:relative; overflow:hidden}
.adv-result .rocket{position:absolute; right:-6px; top:-6px; width:76px; opacity:.95; transition:transform 1s var(--ease)}
.adv-result.high .rocket{transform:translate(8px,-10px) rotate(8deg)}
.adv-result .btn{white-space:normal; text-align:center}
.gauge{width:100%; max-width:230px; margin-inline:auto; display:block}
.gauge .track{stroke:var(--ink-3)}
.gauge .val{stroke:url(#gaugeGrad); transition:stroke-dashoffset .9s var(--ease)}
.gauge text{fill:var(--white); font-family:var(--f-display); font-weight:800}
.adv-level{font-family:var(--f-serif); font-style:italic; font-size:1.8rem; color:var(--white); margin-top:-8px; line-height:1}
.bars{display:flex; align-items:flex-end; gap:6px; height:70px; padding:0 6px; border-bottom:1px solid var(--line-2)}
.bars div{flex:1; background:linear-gradient(180deg, var(--pink), var(--pink-deep)); border-radius:5px 5px 0 0; transition:height .8s var(--ease); min-height:4px}
.bars-cap{display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:.62rem; color:var(--muted); padding:4px 6px 0}
.bars-title{font-family:var(--f-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-align:left; margin-bottom:6px}
.adv-plan{list-style:none; margin:0; padding:0; display:grid; gap:8px; text-align:left}
.adv-plan li{display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start; font-size:.84rem; line-height:1.4; color:var(--paper)}
.adv-plan li b{font-family:var(--f-mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; background:var(--pink-ghost); color:var(--blush); border-radius:8px; padding:4px 7px; white-space:nowrap}
@media (max-width:760px){.adv-grid{grid-template-columns:1fr}}

/* ================= proceso ================= */
.steps{list-style:none; margin:48px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; counter-reset:s}
.step{border-radius:var(--r-md); padding:24px; display:grid; gap:10px; align-content:start; position:relative; overflow:hidden}
.step .n{font-family:var(--f-serif); font-style:italic; font-size:4rem; line-height:.8; color:var(--pink)}
.step h4{font-family:var(--f-display); font-stretch:88%; font-size:1.3rem; color:var(--white); font-weight:700; line-height:1.1}
.step p{font-size:var(--fs-sm); color:var(--muted)}
.step::after{content:""; position:absolute; right:-30px; bottom:-30px; width:120px; height:120px; border-radius:50%; background:radial-gradient(circle, rgba(247,21,85,.22), transparent 70%)}
@media (max-width:980px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* ================= jingle ================= */
.jingle{background:radial-gradient(90% 90% at 20% 30%, #ff3a72, var(--pink) 45%, #c40d44); color:var(--ink); position:relative; overflow:hidden}
.jingle > *{position:relative}
.jingle-grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(24px,5vw,72px); align-items:center}
.vinyl-wrap{position:relative; width:min(100%, 440px); aspect-ratio:1; margin-inline:auto}
.vinyl{position:absolute; inset:0; border-radius:50%; background:
  conic-gradient(from 0deg, rgba(255,255,255,.0) 0deg, rgba(255,255,255,.14) 30deg, rgba(255,255,255,0) 60deg, rgba(255,255,255,0) 180deg, rgba(255,255,255,.12) 210deg, rgba(255,255,255,0) 240deg),
  repeating-radial-gradient(circle, #0D090B 0 1.5px, #1b1318 1.5px 3px); box-shadow:0 40px 70px rgba(0,0,0,.4), inset 0 0 0 6px #070506; display:grid; place-items:center; animation:spin 3.2s linear infinite; animation-play-state:paused}
.vinyl.playing{animation-play-state:running}
.vinyl img{width:34%; border-radius:50%; border:5px solid var(--ink)}
@keyframes spin{to{transform:rotate(360deg)}}
.jingle-cat{position:absolute; width:46%; right:-8%; bottom:-8%; filter:drop-shadow(0 16px 20px rgba(0,0,0,.35)); transform-origin:bottom center}
.jingle-cat.dance{animation:dance .47s ease-in-out infinite alternate}
@keyframes dance{from{transform:rotate(-6deg) translateY(0)}to{transform:rotate(6deg) translateY(-10px)}}
.jingle .eyebrow{color:var(--ink)}
.jingle h2{font-family:var(--f-display); font-size:var(--fs-2xl); font-stretch:78%; color:var(--white); font-weight:800; letter-spacing:-.03em; margin-top:14px; line-height:.9}
.jingle h2 .serif{color:var(--ink)}
.jingle .slogan{font-size:var(--fs-xl); font-family:var(--f-serif); font-style:italic; margin-top:14px; line-height:1.05}
.player{margin-top:26px; background:var(--ink); color:var(--white); border-radius:22px; padding:14px; display:flex; align-items:center; gap:14px; box-shadow:0 20px 50px -20px rgba(0,0,0,.6)}
.play{width:58px; height:58px; border-radius:50%; border:0; background:var(--pink); color:var(--white); display:grid; place-items:center; flex:none; box-shadow:0 8px 20px -6px rgba(247,21,85,.9)}
.play svg{width:24px; height:24px}
.player-info{flex:1; min-width:0; display:grid; gap:6px}
.player-info b{font-family:var(--f-display); font-weight:700; font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.player-info small{color:var(--muted); font-family:var(--f-mono); font-size:.72rem; font-variant-numeric:tabular-nums}
.bar{height:6px; border-radius:999px; background:var(--ink-3); position:relative; cursor:pointer; touch-action:none}
.bar i{position:absolute; left:0; top:0; bottom:0; width:0; background:var(--pink); border-radius:999px}
.viz{display:flex; gap:3px; align-items:flex-end; height:28px}
.viz i{width:4px; border-radius:2px; background:var(--pink); height:15%}
.lyrics{margin-top:18px; background:rgba(10,7,9,.12); border-radius:18px; padding:14px 18px}
.lyrics summary{cursor:pointer; font-family:var(--f-display); font-weight:700; font-size:1.05rem}
.lyrics .cols{columns:2 220px; column-gap:28px; margin-top:12px}
.lyrics .st{break-inside:avoid; margin-bottom:14px}
.lyrics .st b{display:block; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; opacity:.7; margin-bottom:4px}
.lyrics .st p{font-weight:600; line-height:1.5; white-space:pre-line}
.lyrics mark{background:none; color:var(--white); font-weight:800; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px}
.rhyme-note{font-size:.8rem; margin-top:4px; font-weight:600; opacity:.85}
@media (max-width:900px){.jingle-grid{grid-template-columns:1fr}.vinyl-wrap{width:min(78%, 340px)}}

/* ================= contacto ================= */
.contact-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:18px; margin-top:48px; align-items:start}
.cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.ccard{border-radius:var(--r-md); padding:18px; display:grid; gap:12px; align-content:start; transition:border-color .3s, transform .3s var(--ease)}
.ccard:hover{border-color:rgba(247,21,85,.5); transform:translateY(-3px)}
.ccard.wide{grid-column:1/-1}
.ccard-top{display:flex; align-items:center; gap:12px}
.ccard-top .ic{width:46px; height:46px; border-radius:14px; background:linear-gradient(135deg, var(--pink), #ff5a8a); color:var(--white); display:grid; place-items:center; flex:none; box-shadow:0 10px 24px -10px rgba(247,21,85,.9)}
.ccard-top .ic svg{width:22px; height:22px}
.ccard-top b{display:block; color:var(--white); font-family:var(--f-display); font-weight:700; font-size:1.08rem}
.ccard-top small{color:var(--muted); font-size:.8rem}
.cval{font-family:var(--f-mono); font-size:.92rem; color:var(--paper); user-select:all; -webkit-user-select:all; overflow-wrap:anywhere; font-variant-numeric:tabular-nums}
.cact{display:flex; gap:8px; flex-wrap:wrap}
.contact-form{background:var(--white); color:var(--ink); border-radius:var(--r-lg); padding:clamp(20px,3vw,30px); display:grid; gap:14px; box-shadow:0 40px 80px -30px rgba(247,21,85,.45)}
.contact-form h3{font-family:var(--f-serif); font-weight:400; font-size:2.2rem; line-height:1}
.contact-form h3 i{color:var(--pink)}
.contact-form .field label{color:#6b5a61}
.contact-form .field input,.contact-form .field select,.contact-form .field textarea{background:#FFF5F8; color:var(--ink); border-color:#f0dde4}
.contact-form .to-row label{font-family:var(--f-body); font-size:.95rem; letter-spacing:0; text-transform:none; color:var(--ink)}
.to-row{display:flex; gap:8px}
.to-row label{flex:1; display:flex; align-items:center; justify-content:center; gap:8px; border:1.5px solid #f0dde4; border-radius:12px; padding:10px; font-weight:700; cursor:pointer; min-height:46px}
.to-row input{accent-color:var(--pink); width:18px; height:18px}
.to-row label:has(input:checked){border-color:var(--pink); background:#FFE3EC}
.form-note{font-size:.78rem; color:#6b5a61}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
@media (max-width:480px){.cards{grid-template-columns:1fr}}

/* pie */
.foot{border-top:1px solid var(--line); background:var(--ink); position:relative; z-index:2}
.foot-big{font-family:var(--f-display); font-weight:800; font-stretch:75%; font-size:clamp(3.2rem, 14vw, 13rem); line-height:.8; letter-spacing:-.04em; color:transparent; -webkit-text-stroke:1.5px rgba(247,21,85,.55); text-align:center; padding-top:40px; white-space:nowrap; overflow:hidden}
.foot-big .serif{-webkit-text-stroke:0; color:var(--pink)}
.foot-in{display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:center; padding-block:36px calc(40px + env(safe-area-inset-bottom,0px))}
.foot-brand{display:flex; align-items:center; gap:16px}
.foot-brand img{width:60px}
.foot-brand p{font-family:var(--f-serif); font-style:italic; font-size:1.4rem; color:var(--white); line-height:1.1}
.foot-brand small{display:block; font-family:var(--f-body); font-style:normal; font-size:.78rem; color:var(--muted); margin-top:4px}
.foot-links{display:flex; gap:18px; flex-wrap:wrap; font-size:var(--fs-sm)}
.foot-links a{text-decoration:none; color:var(--muted)}
.foot-links a:hover{color:var(--white)}

/* botón flotante */
.fab{position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:40; width:60px; height:60px; border-radius:50%; background:var(--pink); color:var(--white); display:grid; place-items:center; box-shadow:0 12px 30px rgba(247,21,85,.5); text-decoration:none; transition:transform .3s var(--ease)}
.fab:hover{transform:scale(1.06)}
.fab svg{width:28px; height:28px}
.fab::after{content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--pink); animation:ring 2.2s infinite}
@keyframes ring{to{transform:scale(1.5); opacity:0}}

/* huellitas y toast */
.paw-print{position:fixed; width:26px; height:26px; color:var(--pink); pointer-events:none; z-index:60; animation:pawfade 1.2s forwards}
@keyframes pawfade{0%{transform:translate(-50%,-50%) scale(.4) rotate(var(--r)); opacity:.95}100%{transform:translate(-50%,-50%) scale(1) rotate(var(--r)); opacity:0}}
.toast{position:fixed; left:50%; bottom:calc(92px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:70; background:var(--white); color:var(--ink); font-weight:600; padding:12px 18px; border-radius:999px; box-shadow:0 12px 30px rgba(0,0,0,.4); font-size:var(--fs-sm); animation:pop .25s var(--ease); max-width:calc(100% - 32px); text-align:center}

/* entrada suave (el contenido siempre es visible sin JS) */
.rv{transition:transform .6s var(--ease), opacity .6s var(--ease)}
.rv.pre{transform:translateY(18px); opacity:.001}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important}
  .rv.pre{transform:none; opacity:1}
}

/* ---------- pista de baile de Misha ---------- */
.stage-wrap{position:relative; width:100%; max-width:560px; aspect-ratio:3/2.15; margin-inline:auto; border-radius:26px; overflow:hidden; isolation:isolate;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08), 0 0 60px -10px rgba(247,21,85,.45); background:#0b0508}
.dance-lights{position:absolute; inset:0; pointer-events:none; opacity:calc(.75 + var(--energy,0) * .6)}
.dance-lights i{position:absolute; top:-20%; width:46%; height:130%; background:linear-gradient(180deg,rgba(255,120,170,.42),rgba(255,120,170,0) 75%); clip-path:polygon(45% 0,55% 0,100% 100%,0 100%); opacity:.12; transition:opacity .18s; transform-origin:50% 0}
.dance-lights i:nth-child(1){left:-6%; transform:rotate(-18deg)}
.dance-lights i:nth-child(2){left:27%; background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 70%)}
.dance-lights i:nth-child(3){right:-6%; transform:rotate(18deg)}
.dance-lights i.on{opacity:.55}
.stage-wrap:not(.live) .dance-lights i.on{opacity:.3}
.stage-wrap::after{content:""; position:absolute; left:50%; bottom:3.5%; width:30%; height:5%; transform:translateX(-50%); background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent); z-index:0}
.vinyl.mini{inset:auto; right:4%; top:5%; width:19%; height:auto; aspect-ratio:1; z-index:3}
.stage-tag{position:absolute; left:14px; bottom:10px; margin:0; font-size:11px; letter-spacing:.08em; color:#fff; opacity:.8; background:rgba(0,0,0,.45); padding:5px 9px; border-radius:99px; z-index:3}
.dance-heart{position:absolute; bottom:40%; width:18px; height:18px; background:var(--pink); clip-path:path('M9 16.5 1.8 9.6C-.6 7.2-.4 3.3 2.3 1.6 4.4.3 7.1.9 9 3c1.9-2.1 4.6-2.7 6.7-1.4 2.7 1.7 2.9 5.6.5 8z'); animation:danceHeart 1.3s ease-out forwards; z-index:4; pointer-events:none}
@keyframes danceHeart{from{transform:translate(0,0) scale(.4); opacity:1}to{transform:translate(var(--dx),-170px) scale(1.25) rotate(20deg); opacity:0}}

.made-in{display:flex; gap:22px; align-items:center; padding-block:10px 18px; border-top:1px solid var(--line); margin-top:10px}
.made-in img{width:120px; height:auto; flex:none; filter:drop-shadow(0 12px 18px rgba(0,0,0,.5))}
.made-in .eyebrow{margin-bottom:6px}
.made-in p{margin:0; max-width:52ch; color:rgba(255,255,255,.78); font-size:14px; line-height:1.55}
@media (max-width:560px){.made-in img{width:92px}}


/* ================= flyer con fotos reales ================= */
.flyer{background:#111}
.fl-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition:opacity .35s var(--ease), transform 6s linear}
.flyer[data-tpl="promo"] .fl-img{object-position:40% 50%}
.flyer[data-tpl="evento"] .fl-img{object-position:50% 30%}
.flyer[data-tpl="lanza"] .fl-img{object-position:24% 50%}
.flyer[data-fmt="story"][data-tpl="lanza"] .fl-img{object-position:18% 50%}
.fl-img.swap{opacity:0}
.fl-tint{position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(0,0,0,.15), transparent 35%, rgba(0,0,0,.78) 80%, rgba(0,0,0,.9))}
.fl-tint{background:linear-gradient(180deg, color-mix(in srgb, var(--bg) 10%, transparent) 0%, transparent 35%, color-mix(in srgb, var(--bg) 88%, transparent) 78%, var(--bg) 100%)}
.flyer[data-tpl="lanza"] .fl-tint{background:linear-gradient(270deg, color-mix(in srgb, var(--bg) 92%, transparent) 0%, color-mix(in srgb, var(--bg) 55%, transparent) 42%, transparent 70%), linear-gradient(0deg, color-mix(in srgb, var(--bg) 70%, transparent), transparent 40%)}
.flyer[data-tpl="lanza"] .fl-in{align-items:flex-end; text-align:right}
.flyer[data-tpl="lanza"] .fl-title,.flyer[data-tpl="lanza"] .fl-sub{max-width:62%}
.flyer[data-fmt="story"][data-tpl="lanza"] .fl-title,.flyer[data-fmt="story"][data-tpl="lanza"] .fl-sub{max-width:100%}
.flyer .fl-title{color:var(--fg); max-width:100%; font-size:12.4cqw; overflow-wrap:normal; word-break:normal; text-shadow:0 .4cqw 3cqw rgba(0,0,0,.45)}
.flyer[data-fmt="story"] .fl-title{font-size:14.5cqw}
.flyer .fl-brand{color:var(--fg); background:color-mix(in srgb, var(--bg) 70%, transparent); align-self:flex-start; padding:1.2cqw 2.6cqw; border-radius:999px; backdrop-filter:none}
.flyer[data-tpl="lanza"] .fl-brand{align-self:flex-end}
.flyer .fl-sub{color:var(--fg); opacity:.92; max-width:70%}
.flyer .fl-title::first-line{color:var(--c3)}
.fl-badge{background:var(--c1); box-shadow:0 1cqw 3cqw rgba(0,0,0,.35)}
.fl-cta{background:var(--fg); color:var(--bg)}
.flyer[data-tpl="evento"] .fl-date{display:flex; background:var(--c1); color:#fff; position:absolute; top:7cqw; right:7cqw}

/* ================= más ingresos ================= */
.money-grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(20px,4vw,60px); align-items:center}
.money-art{position:relative}
.money-art::before{content:""; position:absolute; inset:8% 6%; border-radius:50%; background:radial-gradient(closest-side, rgba(247,21,85,.35), transparent); z-index:-1}
.money-art img{width:min(100%, 460px); margin-inline:auto; filter:drop-shadow(0 26px 40px rgba(0,0,0,.5))}
.money-copy h2{font-family:var(--f-display); font-size:var(--fs-2xl); font-stretch:78%; font-weight:800; letter-spacing:-.03em; color:var(--white); line-height:.92; margin-top:12px}
.money-copy h2 .serif{color:var(--pink)}
.money-lead{margin-top:16px; font-size:var(--fs-lg); color:var(--paper); opacity:.92; max-width:52ch}
.money-list{list-style:none; margin:22px 0 26px; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.money-list li{background:rgba(255,255,255,.04); border:1px solid var(--line-2); border-radius:16px; padding:14px 16px; display:grid; gap:4px}
.money-list b{font-family:var(--f-display); font-size:1.05rem; color:var(--white)}
.money-list b::before{content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--pink); margin-right:8px; vertical-align:middle; box-shadow:0 0 10px var(--pink)}
.money-list span{font-size:var(--fs-sm); color:var(--muted)}
@media (max-width:860px){.money-grid{grid-template-columns:1fr}.money-art img{width:min(78%, 340px)}}
@media (max-width:480px){.money-list{grid-template-columns:1fr}}

/* ================= pagos ================= */
.pay-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:16px; margin-top:44px; align-items:stretch}
.pay-card{border-radius:var(--r-lg); padding:clamp(22px,3vw,34px); display:grid; gap:16px; align-content:start; position:relative; overflow:hidden}
.pay-art{width:min(62%, 280px); justify-self:center; margin:-4px 0 0; filter:drop-shadow(0 18px 26px rgba(0,0,0,.5))}
.pay-card .incl{display:block}
.pay-card .incl li{margin-bottom:10px}
.pay-actions{display:flex; flex-wrap:wrap; gap:10px}
.pay-card.how h3{font-family:var(--f-display); font-size:var(--fs-xl); font-stretch:82%; color:var(--white); letter-spacing:-.02em; line-height:1}
.pay-card.how h3 .serif{color:var(--pink)}
.pay-card.how > p{color:var(--paper); font-size:var(--fs-sm)}
.pay-card.how .btn{justify-self:start}
.pay-methods{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.pm{display:flex; align-items:center; gap:10px; background:rgba(0,0,0,.35); border:1px solid var(--line-2); border-radius:14px; padding:10px 12px; font-weight:700; font-size:.92rem; color:var(--white)}
.pm i{width:30px; height:30px; border-radius:9px; background:var(--c); color:#fff; display:grid; place-items:center; font-style:normal; font-family:var(--f-display); font-weight:800; font-size:1rem; flex:none}
.pay-safe{color:var(--muted); font-size:.74rem; line-height:1.4}
@media (max-width:900px){.pay-grid{grid-template-columns:1fr}.pay-art{width:min(66%, 260px)}}

/* ================= muestra café: pago de demostración ================= */
.browser{position:relative}
.s-pay{position:absolute; left:12px; right:12px; bottom:12px; z-index:7; max-height:calc(100% - 70px); overflow:auto; background:#fff; color:#0E0A0C; border-radius:18px; padding:16px; box-shadow:0 18px 44px rgba(0,0,0,.45); font-size:.86rem; animation:pop .25s var(--ease)}
.s-pay h6{margin:0 0 2px; font-size:1rem; font-family:var(--f-display)}
.s-pay .tot{display:flex; justify-content:space-between; font-weight:800; margin:8px 0 10px; font-size:1.05rem}
.s-pay .methods{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px}
.s-pay .methods button{border:1.5px solid #eadbe1; background:#fff; border-radius:12px; padding:10px 8px; font-weight:700; font-size:.8rem; color:#0E0A0C; min-height:44px}
.s-pay .methods button:hover{border-color:var(--pink)}
.s-pay .note{color:#7a6870; font-size:.72rem; margin-top:8px}
.s-pay .spin{width:36px; height:36px; border-radius:50%; border:4px solid #f3d7e1; border-top-color:var(--pink); margin:14px auto; animation:spin .8s linear infinite}
.s-pay .ok{width:58px; height:58px; border-radius:50%; background:var(--pink); color:#fff; display:grid; place-items:center; margin:6px auto 8px; animation:pop .4s var(--ease)}
.s-pay .ok svg{width:28px; height:28px}
.s-pay .center{text-align:center}
.s-pay .close{position:absolute; top:8px; right:10px; border:0; background:none; font-size:1.3rem; line-height:1; color:#7a6870; min-width:36px; min-height:36px}

/* ================= pista de baile (lienzo) ================= */
.dance-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; z-index:-1}
.dancer{position:absolute; left:0; top:0; width:100%; height:100%; display:block; cursor:pointer; touch-action:manipulation; z-index:1}
.stage-wrap::after{z-index:0}

.s-btn.glow{animation:glowPulse 1.1s ease-in-out 3}
@keyframes glowPulse{50%{transform:scale(1.04); box-shadow:0 0 0 6px rgba(247,21,85,.25), 0 10px 26px -6px rgba(247,21,85,.9)}}
@media (min-width:901px){
  .pay-card.main{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); align-items:center; column-gap:24px}
  .pay-card.main .pay-art{grid-row:span 2; width:100%; margin:0}
}
.pay-main{display:grid; gap:16px}