/* Mezzita · sistema visual v4 "producto primero"
   Papel cálido y quieto, un cardumen de peces de código al fondo, una barra de vidrio,
   titulares enormes y cortos, y el producto real en marcos de dispositivo. Todo lo que no
   es producto, trabajo real o precio, sobra. */
:root{
  --paper:#F4F3EE;
  --paper-2:#EAE8E1;
  --surface:#FFFFFF;
  --ink:#15171C;
  --ink-2:#4B5057;
  --ink-3:#7A7F86;
  --line:rgba(21,23,28,.1);
  --line-2:rgba(21,23,28,.2);
  --night:#121418;
  --night-2:#1B1E24;
  --on-night:#F4F3EE;
  --on-night-2:rgba(244,243,238,.64);
  --blue:#DA291C;
  --blue-hover:#B8221A;
  --on-blue:#FFFFFF;
  --sun:#FFC72C;
  --paid:#0F7A4B;
  --paid-soft:#DDF2E6;
  --alert:#B8392C;
  --wa:#1E8E5A;
  --ticket:#FFFDF6;
  --shadow-sm:0 1px 2px rgba(21,23,28,.05),0 8px 20px -14px rgba(21,23,28,.2);
  --shadow:0 2px 4px rgba(21,23,28,.05),0 24px 60px -30px rgba(21,23,28,.35);
  --shadow-lg:0 2px 4px rgba(0,0,0,.08),0 40px 90px -40px rgba(21,23,28,.5);

  --g-blur:blur(18px) saturate(150%);
  --g-fill:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.2) 60%),rgba(244,243,238,.45);
  --g-fill-strong:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,.1) 60%),rgba(244,243,238,.78);
  --g-edge:rgba(255,255,255,.8);
  --g-rim:inset 1px 1px 0 rgba(255,255,255,.95),inset -1px -1px 0 rgba(255,255,255,.4),inset 0 0 0 1px rgba(255,255,255,.25);
  --g-shadow:0 12px 30px -16px rgba(21,23,28,.35),0 0 0 1px rgba(21,23,28,.08);
  --g-hover:rgba(21,23,28,.07);
  --mx:30%;--my:20%;

  --f-display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --f-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"Geist Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --step--1:clamp(.84rem,.82rem + .1vw,.9rem);
  --step-0:clamp(1.02rem,.98rem + .2vw,1.1rem);
  --step-1:clamp(1.18rem,1.08rem + .45vw,1.4rem);
  --step-2:clamp(1.5rem,1.25rem + 1vw,2.05rem);
  --step-3:clamp(2rem,1.5rem + 2vw,3.2rem);
  --step-4:clamp(2.6rem,1.6rem + 4.2vw,5.2rem);
  --step-5:clamp(3rem,1.6rem + 6vw,6.6rem);

  --ease:cubic-bezier(.25,1,.5,1);
  --t-fast:160ms;--t:220ms;--t-slow:340ms;
  --radius:16px;
  --max:78rem;
  --hd-h:80px;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--paper);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:transparent;color:var(--ink);font:400 var(--step-0)/1.6 var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--paper)}
img,video{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.btn-primary:focus-visible,.sticker:focus-visible{outline-color:var(--ink)}.night :focus-visible{outline-color:var(--sun)}
::selection{background:var(--sun);color:var(--ink)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

.wrap{max-width:var(--max);margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.narrow{max-width:46rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
main>:first-child{padding-top:calc(var(--hd-h) + env(safe-area-inset-top,0px) + clamp(1.5rem,4vw,3.5rem))}
.page-head{padding-bottom:clamp(1.5rem,4vw,3rem)}

/* fondo: peces de código */
#backdrop{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:
  radial-gradient(70% 50% at 85% 0%,rgba(31,79,224,.07),transparent 60%),
  radial-gradient(50% 40% at 0% 100%,rgba(255,199,44,.12),transparent 60%)}
#backdrop canvas{position:absolute;inset:0;display:block}

/* ---------- tipografía ---------- */
h1,h2,h3,.display{font-family:var(--f-display);font-weight:700;letter-spacing:-.032em;line-height:.98;text-wrap:balance;margin:0;font-variation-settings:"opsz" 96,"wdth" 100}
h1{font-size:var(--step-5);font-weight:800;letter-spacing:-.04em}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1);line-height:1.15;letter-spacing:-.015em;font-variation-settings:"opsz" 24,"wdth" 100}
p{margin:0}
.lede{font-size:var(--step-1);color:var(--ink-2);line-height:1.45;max-width:34rem;text-wrap:pretty}
.eyebrow{font:500 var(--step--1)/1.3 var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}
.muted{color:var(--ink-3)}
.mono{font-family:var(--f-mono)}
.num{font-variant-numeric:tabular-nums}
.mark{box-decoration-break:clone;-webkit-box-decoration-break:clone;background:linear-gradient(transparent 60%,var(--sun) 60%,var(--sun) 94%,transparent 94%);padding-inline:.04em}
.callout{display:flex;flex-wrap:wrap;gap:.4rem .6rem;align-items:center;font-weight:500;color:var(--ink-2)}
.callout .pill{font:500 .74rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.08em;border:1px solid var(--line-2);padding:.45rem .65rem;border-radius:999px;color:var(--blue)}
.hero-copy{display:grid;gap:1.3rem;max-width:44rem}

/* ---------- header de vidrio ---------- */
.hd{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:env(safe-area-inset-top,0px);color:var(--ink)}
.hd::before{content:"";position:absolute;inset:0 0 -26px;pointer-events:none;background:linear-gradient(180deg,var(--paper) 0%,rgba(244,243,238,.92) 70%,rgba(244,243,238,0) 100%);opacity:0;transition:opacity var(--t-slow) ease}
.hd.is-condensed::before{opacity:1}
.hd-row{position:relative;display:flex;align-items:center;gap:1.2rem;height:var(--hd-h);transition:height var(--t-slow) var(--ease)}
.hd.is-condensed .hd-row{height:64px}
.logo{display:flex;align-items:center;gap:.55rem;text-decoration:none;font:700 1.25rem/1 var(--f-display);letter-spacing:-.035em;flex:none;font-variation-settings:"opsz" 24}
.logo img{height:44px;width:auto;flex:none}
.ft .logo img{height:52px}
@media (max-width:560px){.hd .logo img{height:40px}}
.logo small{font:500 .62rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.capsule{position:relative;margin-inline:auto;padding:5px 7px;border-radius:999px}
.glass-layer{position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;background:var(--g-fill);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border:1px solid var(--g-edge);box-shadow:var(--g-shadow);transition:background var(--t-slow) ease}
.hd.is-condensed .glass-layer{background:var(--g-fill-strong)}
.glass-layer::before,.burger::before,.mnav::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:var(--g-rim)}
.glass-layer::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(140px 80px at var(--mx) var(--my),rgba(255,255,255,.5),rgba(255,255,255,0) 70%);mix-blend-mode:soft-light}
.nav{position:relative;display:flex;align-items:center;gap:2px}
.nav .pill{position:relative;z-index:1;padding:8px 14px;border-radius:999px;text-decoration:none;font-weight:500;font-size:.93rem;color:var(--ink-2);white-space:nowrap;transition:color var(--t-fast) ease}
.nav .pill:hover,.nav .pill[aria-current="page"]{color:var(--ink)}
.nav .pill[aria-current="page"]{background:var(--g-hover)}
.nav.has-lens .pill[aria-current="page"]{background:transparent}
.nav.has-lens:not(:hover) .pill[aria-current="page"]{background:var(--g-hover)}
.nav-lens{position:absolute;top:0;left:0;height:100%;width:0;border-radius:999px;background:var(--g-hover);opacity:0;pointer-events:none;transition:transform var(--t-slow) var(--ease),width var(--t-slow) var(--ease),opacity var(--t-fast) ease}
.hd-cta{flex:none;padding:.66rem 1.05rem;font-size:.92rem}
.burger{display:none;margin-left:auto;flex:none;width:44px;height:44px;padding:0;position:relative;align-items:center;justify-content:center;background:var(--g-fill);border:1px solid var(--g-edge);border-radius:12px;-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);box-shadow:var(--g-shadow);color:inherit;cursor:pointer;transition:transform var(--t-fast) var(--ease)}
.burger:active{transform:scale(.94)}
.mnav{position:absolute;top:calc(100% - 8px);left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));display:grid;gap:2px;padding:.5rem;border-radius:16px;background:var(--g-fill-strong);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border:1px solid var(--g-edge);box-shadow:var(--g-shadow);transform-origin:top right;animation:sheet var(--t) var(--ease)}
.mnav[hidden]{display:none}
.mnav a:not(.btn){position:relative;z-index:3;padding:.8rem 1rem;border-radius:10px;font-weight:500;text-decoration:none;color:var(--ink-2)}
.mnav a:not(.btn):hover,.mnav a[aria-current="page"]{background:var(--g-hover);color:var(--ink)}
.mnav .btn{position:relative;z-index:3;margin-top:.4rem}
@keyframes sheet{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
@media (max-width:980px){.hd .capsule,.hd .hd-cta{display:none}.hd .burger{display:inline-flex}}
@media (prefers-reduced-transparency:reduce){.glass-layer,.burger,.mnav{background:#fff!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.92rem 1.35rem;border-radius:12px;border:1px solid transparent;font:600 1rem/1.15 var(--f-body);text-decoration:none;cursor:pointer;transition:transform var(--t-fast) var(--ease),background var(--t-fast) ease,color var(--t-fast) ease,border-color var(--t-fast) ease;text-align:center;letter-spacing:-.005em}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--blue);color:var(--on-blue);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 20px -12px rgba(218,41,28,.6)}
.btn-primary:hover{background:var(--blue-hover)}
.btn-ghost{background:rgba(255,255,255,.5);color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{background:var(--surface);border-color:var(--ink)}
.btn-light{background:var(--on-night);color:var(--night)}
.btn-light:hover{background:#fff}
.btn-lg{padding:1.05rem 1.5rem;font-size:1.06rem}
.btn .arr{display:inline-block;transition:transform var(--t-fast) var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.link{font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;text-decoration-color:var(--line-2);transition:text-decoration-color var(--t-fast) ease}
.link:hover{text-decoration-color:currentColor}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;align-items:center}
.friction{font-size:var(--step--1);color:var(--ink-3)}

/* ---------- secciones ---------- */
.sec{padding-block:clamp(3.5rem,8vw,7rem)}
.sec-tight{padding-block:clamp(2.5rem,5vw,4rem)}
.sec-head{display:grid;gap:1rem;margin-bottom:clamp(2rem,4vw,3rem);max-width:52rem}
.sec-head.row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1rem 2rem;max-width:none}
.night{background:var(--night);color:var(--on-night)}
.night .lede,.night .muted{color:var(--on-night-2)}
.night .eyebrow{color:var(--sun)}
.night .link{text-decoration-color:rgba(244,243,238,.3)}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1.25rem}
.grid-2>*,.grid-3>*{min-width:0}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.5rem,4vw,4rem);align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr}}

/* el contenido nunca se oculta esperando al scroll; solo un leve asentamiento al entrar */
.js .rv{transform:translateY(10px);transition:transform .6s var(--ease)}
.js .rv.in{transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{transform:none}}

/* ---------- hero (modelo: titular izquierda, texto y botones derecha, producto debajo) ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(1.5rem,4vw,4rem);align-items:end;padding-bottom:clamp(2rem,4vw,3.5rem)}
.hero h1{max-width:12ch}
.hero h1 .l2{display:block;font-weight:500;font-size:.42em;letter-spacing:-.02em;color:var(--ink-2);margin-top:.5em;line-height:1.15;max-width:22ch;font-variation-settings:"opsz" 48}
.hero-side{display:grid;gap:1.3rem;padding-bottom:.4rem}
@media (max-width:900px){.hero{grid-template-columns:1fr;align-items:start}}
.hero-foot{display:flex;flex-wrap:wrap;gap:.5rem 2rem;padding-block:1rem;border-top:1px solid var(--line);font-size:var(--step--1);color:var(--ink-3)}
.hero-foot b{color:var(--ink);font-weight:600}

/* el escenario: un panel oscuro con el producto dentro */
.stage{position:relative;background:var(--night);color:var(--on-night);border-radius:22px;padding:clamp(1.2rem,3vw,2.5rem);box-shadow:var(--shadow-lg);overflow:hidden;isolation:isolate}
.stage::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 80% 0%,rgba(31,79,224,.35),transparent 60%),radial-gradient(40% 50% at 10% 100%,rgba(255,199,44,.14),transparent 60%);z-index:-1}
.stage-bar{display:flex;align-items:center;gap:.6rem;font:500 .74rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--on-night-2);margin-bottom:clamp(1rem,3vw,2rem)}
.stage-bar i{width:.6rem;height:.6rem;border-radius:50%;background:rgba(244,243,238,.2)}
.stage-bar i:first-child{background:var(--alert)}
.stage-bar i:nth-child(2){background:var(--sun)}
.stage-bar i:nth-child(3){background:var(--paid)}
.stage-bar span{margin-left:.4rem}
.stage-grid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(1.2rem,3vw,2.5rem);align-items:center}
@media (max-width:980px){.stage-grid{grid-template-columns:1fr;justify-items:center}.stage-grid>.listing,.stage-grid>.receipt-col{display:none}}
.stage-note{display:grid;gap:.3rem;font-size:.9rem;color:var(--on-night-2)}
.stage-note b{color:var(--on-night);font-weight:600;font-size:1rem}

/* ficha de Google */
.listing{background:var(--surface);color:var(--ink);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;width:100%;max-width:22rem;justify-self:end}
.listing-photos{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:2px;height:7rem}
.listing-photos span{background:linear-gradient(160deg,#C9C2AE,#9A917A)}
.listing-photos span:first-child{grid-row:span 2;background:linear-gradient(160deg,#D6B98A,#A8793F)}
.listing-photos span:nth-child(3){background:linear-gradient(200deg,#B6C0C9,#8794A1)}
.listing-body{padding:.95rem 1rem 1rem;display:grid;gap:.35rem}
.listing-name{font:600 1.05rem/1.2 var(--f-body);letter-spacing:-.01em}
.stars{display:flex;align-items:center;gap:.4rem;font-size:.88rem;color:var(--ink-2)}
.stars i{font-style:normal;color:#E8A317;letter-spacing:.04em}
.open-now{font-size:.84rem;color:var(--ink-2)}
.open-now b{color:var(--paid)}
.listing-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:.35rem;margin-top:.45rem}
.listing-actions span{display:grid;place-items:center;font-size:.66rem;font-weight:600;color:var(--blue);padding:.45rem 0;border:1px solid var(--line);border-radius:999px}

/* teléfono */
.phone{position:relative;width:min(100%,19.5rem);aspect-ratio:9/19;background:#0B0C10;border-radius:2.6rem;padding:.55rem;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 80px -30px rgba(0,0,0,.8);flex:none}
.phone::before{content:"";position:absolute;top:.95rem;left:50%;transform:translateX(-50%);width:5.5rem;height:1.5rem;background:#0B0C10;border-radius:999px;z-index:3}
.screen{position:relative;height:100%;background:#EFEAE2;border-radius:2.1rem;overflow:hidden;display:flex;flex-direction:column;color:var(--ink);font-family:var(--f-body)}
.screen::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(21,23,28,.06) .6px,transparent .6px);background-size:14px 14px;pointer-events:none}
.chat-hd{position:relative;z-index:2;display:flex;align-items:center;gap:.6rem;padding:2.2rem .9rem .7rem;background:#1F2C34;color:#fff}
.chat-hd .av{width:2rem;height:2rem;border-radius:50%;background:var(--sun);color:var(--ink);display:grid;place-items:center;font:700 .8rem var(--f-display)}
.chat-hd b{display:block;font-size:.9rem;font-weight:600;line-height:1.1}
.chat-hd small{font-size:.7rem;opacity:.7}
.chat{position:relative;flex:1;overflow:hidden;padding:.8rem .7rem;display:flex;flex-direction:column;gap:.45rem;justify-content:flex-end}
.chat .day{align-self:center;font:500 .62rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.7);color:var(--ink-3);padding:.25rem .55rem;border-radius:999px;margin-bottom:.2rem}
.bub{max-width:86%;padding:.5rem .7rem;border-radius:12px;font-size:.84rem;line-height:1.35;box-shadow:0 1px 1px rgba(0,0,0,.06);position:relative;animation:pop var(--t-slow) var(--ease)}
.bub.me{align-self:flex-end;background:#D9FDD3;border-bottom-right-radius:3px}
.bub.them{align-self:flex-start;background:#fff;border-bottom-left-radius:3px}
.bub .time{display:block;font-size:.62rem;color:var(--ink-3);text-align:right;margin-top:.15rem}
.bub .typing{display:inline-flex;gap:.2rem;padding:.2rem 0}
.bub .typing i{width:.38rem;height:.38rem;border-radius:50%;background:var(--ink-3);animation:dot 1s infinite}
.bub .typing i:nth-child(2){animation-delay:.15s}.bub .typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-3px);opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
.card{display:grid;gap:.4rem;padding:.55rem;border:1px solid var(--line);border-radius:10px;background:var(--paper);margin-top:.35rem}
.card .ph{height:3.6rem;border-radius:7px;background:linear-gradient(160deg,color-mix(in srgb,var(--tint,#C9B38A) 60%,#fff),var(--tint,#C9B38A))}
.card .row{display:flex;justify-content:space-between;gap:.5rem;align-items:center;font-size:.8rem}
.card .row b{font-weight:600}
.card .pr{font:500 .78rem var(--f-mono);white-space:nowrap}
.card button,.bub .act{font:600 .78rem var(--f-body);padding:.42rem .6rem;border-radius:8px;border:0;background:var(--blue);color:#fff;cursor:pointer;width:100%;transition:transform var(--t-fast) var(--ease)}
.card button:active,.bub .act:active{transform:scale(.97)}
.bub .act.ghost{background:transparent;color:var(--blue);border:1px solid var(--line-2)}
.bub .lines{display:grid;gap:.15rem;font:400 .76rem/1.4 var(--f-mono);margin:.2rem 0}
.bub .lines div{display:flex;justify-content:space-between;gap:.6rem}
.bub .lines .tot{border-top:1px dashed var(--line-2);padding-top:.2rem;margin-top:.1rem;font-weight:600}
.qr{display:grid;grid-template-columns:repeat(9,1fr);gap:2px;width:6.6rem;aspect-ratio:1;margin:.4rem auto;padding:.4rem;background:#fff;border-radius:8px;border:1px solid var(--line)}
.qr i{background:var(--ink);border-radius:1px}
.qr i.o{background:transparent}
.paid{display:inline-flex;align-items:center;gap:.4rem;font:600 .78rem var(--f-mono);letter-spacing:.08em;color:var(--paid);background:var(--paid-soft);padding:.35rem .6rem;border-radius:6px;margin-top:.3rem}
.chat-in{position:relative;z-index:2;display:flex;gap:.5rem;align-items:center;padding:.55rem .7rem .9rem;background:#F0F2F5}
.chat-in span{flex:1;background:#fff;border-radius:999px;padding:.5rem .8rem;font-size:.82rem;color:var(--ink-3)}
.chat-in i{width:2.1rem;height:2.1rem;border-radius:50%;background:var(--wa);display:grid;place-items:center}
.chat-in i::after{content:"";width:.6rem;height:.6rem;border-right:2px solid #fff;border-top:2px solid #fff;transform:rotate(45deg) translate(-1px,1px)}

/* recibo */
.receipt-col{display:grid;gap:1rem;justify-items:start;max-width:20rem}
.ticket{background:var(--ticket);color:var(--ink);font:400 .8rem/1.5 var(--f-mono);padding:1rem 1.1rem 1.5rem;border-radius:4px;box-shadow:var(--shadow);position:relative;width:100%;
  -webkit-mask:radial-gradient(circle 6px at 50% 100%,transparent 98%,#000) 0 0/14px 100% repeat-x;mask:radial-gradient(circle 6px at 50% 100%,transparent 98%,#000) 0 0/14px 100% repeat-x}
.ticket-head{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px dashed var(--line-2);padding-bottom:.45rem;margin-bottom:.45rem;font-weight:500}
.ticket-row{display:flex;justify-content:space-between;gap:1rem}
.ticket-total{display:flex;justify-content:space-between;border-top:1px dashed var(--line-2);margin-top:.45rem;padding-top:.45rem;font-weight:600;font-size:.92rem}
.stamp{position:absolute;right:.9rem;bottom:1.2rem;transform:rotate(-8deg);border:1.5px solid var(--paid);color:var(--paid);font:600 .72rem/1 var(--f-mono);letter-spacing:.12em;padding:.3rem .45rem;border-radius:4px;background:rgba(221,242,230,.75)}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:.8rem 1.4rem}
.kpis b{display:block;font:700 1.6rem/1 var(--f-display);letter-spacing:-.03em;color:var(--on-night)}
.kpis span{font-size:.78rem;color:var(--on-night-2)}

/* ---------- trabajo real: marcos de navegador ---------- */
.frame{position:relative;background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}
.frame-bar{display:flex;align-items:center;gap:.4rem;padding:.55rem .75rem;background:#F1F0EB;border-bottom:1px solid var(--line)}
.frame-bar i{width:.55rem;height:.55rem;border-radius:50%;background:rgba(21,23,28,.15)}
.frame-bar span{margin-left:.5rem;font:400 .68rem var(--f-mono);color:var(--ink-3);background:#fff;border-radius:6px;padding:.2rem .6rem;flex:1;max-width:22rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frame img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 30%);mix-blend-mode:soft-light}
.frame.tall img{aspect-ratio:9/19.5}
.feature-work{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(1.2rem,3vw,2.5rem);align-items:start}
.feature-work .side{display:grid;gap:1.2rem}
.feature-work .side .frame img{aspect-ratio:16/11}
@media (max-width:900px){.feature-work{grid-template-columns:1fr}}
.work-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));gap:1.25rem}
.work{display:grid;gap:.6rem;text-decoration:none;color:inherit}
.work .frame{transition:transform var(--t-slow) var(--ease),box-shadow var(--t-slow) ease}
.work:hover .frame{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.work b{font-weight:600}
.work span{font-size:.86rem;color:var(--ink-3)}
.work .cap{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.marquee{overflow:hidden;mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:3rem;width:max-content;animation:mq 40s linear infinite;font:600 1.05rem var(--f-display);letter-spacing:-.01em;color:var(--ink-3);padding-block:.4rem}
.marquee-track span{white-space:nowrap}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- tres puertas (compacto) ---------- */
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:0;border-top:1px solid rgba(244,243,238,.15)}
.door{padding:1.6rem 1.6rem 1.6rem 0;display:grid;gap:.6rem;align-content:start;border-bottom:1px solid rgba(244,243,238,.12)}
.door .n{font:500 .74rem/1 var(--f-mono);letter-spacing:.08em;color:var(--sun)}
.door h3{font-size:var(--step-2);color:var(--on-night)}
.door p{color:var(--on-night-2);font-size:.98rem}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr));gap:1.5rem}
.stat b{display:block;font:700 var(--step-3)/1 var(--f-display);letter-spacing:-.04em}
.stat span{color:var(--ink-2);font-size:.9rem}
.night .stat span{color:var(--on-night-2)}
.stat-link{color:inherit;text-decoration:none;border-radius:12px;transition:transform 160ms var(--ease-out,ease-out)}
.stat-logo{display:inline-block;height:.95em;width:auto;vertical-align:-.14em;margin-left:.15em;opacity:.85;transition:opacity 160ms ease}
@media (hover:hover) and (pointer:fine){.stat-link:hover .stat-logo{opacity:1}.stat-link:hover span{color:var(--on-night)}}
.stat-link:active{transform:scale(.98)}
.stat-link:focus-visible{outline:2px solid var(--sun);outline-offset:6px}

/* ---------- rubros ---------- */
.niches{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.niche{background:var(--surface);padding:1.3rem 1.2rem 1.4rem;display:grid;gap:.5rem;align-content:start;text-decoration:none;transition:background var(--t-fast) ease}
.niche:hover{background:var(--paper)}
.niche .k{font:500 .72rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.niche h3{font-size:var(--step-1)}
.niche p{color:var(--ink-2);font-size:.92rem}
.niche .go{font-weight:600;font-size:.9rem;color:var(--blue);margin-top:.2rem}

/* ---------- planes ---------- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17.5rem),1fr));gap:1rem;align-items:stretch}
.plan{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius);padding:1.6rem;display:flex;flex-direction:column;gap:1rem;position:relative;transition:border-color var(--t) ease,box-shadow var(--t) ease}
.plan:hover{border-color:var(--ink);box-shadow:var(--shadow-sm)}
.plan.feature{border-color:var(--ink);box-shadow:var(--shadow)}
.plan .tag{position:absolute;top:-.75rem;left:1.4rem;background:var(--sun);color:var(--ink);font:500 .7rem/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;padding:.4rem .6rem;border-radius:6px}
.plan h3{font-size:var(--step-2)}
.plan .for{color:var(--ink-2);font-size:.95rem}
.price{display:grid;gap:.15rem}
.price .setup{font:700 2.2rem/1 var(--f-display);letter-spacing:-.035em}
.price .setup small{font:500 .82rem var(--f-body);color:var(--ink-3);letter-spacing:0}
.price .monthly{font-weight:600;color:var(--ink-2)}
.price .was{font-size:.85rem;color:var(--ink-3)}
.plan ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem;font-size:.95rem}
.plan li{display:grid;grid-template-columns:.9rem 1fr;gap:.6rem;align-items:start}
.plan li::before{content:"";width:.5rem;height:.5rem;margin:.5rem .2rem 0;border-radius:50%;background:var(--paid)}
.plan li.inherit{font-weight:600}
.plan li.inherit::before{background:var(--sun)}
.plan .btn{margin-top:auto}
.plan .guar{font-size:.86rem;color:var(--paid);font-weight:600}
.per-day{font:400 .78rem var(--f-mono);color:var(--ink-3)}

/* ---------- garantía ---------- */
.guarantee{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.25rem,3vw,2.5rem);align-items:center;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);padding:clamp(1.6rem,4vw,2.6rem) 0}
.seal{width:clamp(6.5rem,13vw,8.5rem);aspect-ratio:1;border-radius:50%;background:var(--sun);color:var(--ink);display:grid;place-content:center;text-align:center;font:600 .76rem/1.05 var(--f-display);text-transform:uppercase;letter-spacing:.04em;box-shadow:inset 0 0 0 4px var(--sun),inset 0 0 0 5px var(--ink)}
.seal b{display:block;font-size:2.6rem;font-weight:800;letter-spacing:-.04em}
.guarantee blockquote{margin:0;font:600 var(--step-1)/1.35 var(--f-display);letter-spacing:-.015em}
.guarantee .fine{font-size:.9rem;color:var(--ink-3);margin-top:.6rem}
@media (max-width:560px){.guarantee{grid-template-columns:1fr}}

/* ---------- prueba ---------- */
.quote-card{display:grid;gap:1rem;padding:1.5rem 0 1.5rem 1.5rem;border-left:2px solid var(--sun)}
.quote-card blockquote{margin:0;font:500 var(--step-1)/1.4 var(--f-display);letter-spacing:-.015em}
.quote-card cite{font-style:normal;font-size:.9rem;color:var(--ink-3)}
.quote-card cite b{color:var(--ink);display:block;font-weight:600}
.night .quote-card cite{color:var(--on-night-2)}.night .quote-card cite b{color:var(--on-night)}
.cases{display:grid;border-top:1px solid var(--line-2)}
.case{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:.6rem 3rem;align-items:start;padding:1.6rem 0;border-bottom:1px solid var(--line)}
.case .result{font:600 var(--step-2)/1.1 var(--f-display);letter-spacing:-.025em}
.case p{color:var(--ink-2)}
.case .kind{font:500 .74rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);display:block;margin-bottom:.5rem}
.case .side{display:grid;gap:.6rem}
@media (max-width:720px){.case{grid-template-columns:1fr}}

/* ---------- servicios ---------- */
.menu{display:grid;border-top:1px solid var(--line-2)}
.menu-group{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:1rem 3rem;padding:2rem 0;border-bottom:1px solid var(--line)}
.menu-group h2{font-size:var(--step-2)}
.menu-group .why{color:var(--ink-2);margin-top:.6rem;font-size:.98rem}
.menu-items{display:grid}
.menu-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.3rem 1.5rem;padding:.9rem 0;border-bottom:1px dashed var(--line)}
.menu-item:last-child{border-bottom:0}
.menu-item b{font-weight:600}
.menu-item p{color:var(--ink-2);font-size:.95rem;grid-column:1}
.menu-item .in{grid-column:2;grid-row:1/span 2;font:500 .72rem/1.3 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);text-align:right;white-space:nowrap;align-self:start;padding-top:.3rem}
@media (max-width:720px){.menu-group{grid-template-columns:1fr}.menu-item{grid-template-columns:1fr}.menu-item .in{grid-column:1;grid-row:auto;text-align:left}}
.addons{display:grid;border-top:1px solid var(--line-2)}
.addon{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.4rem 1.5rem;padding:1.2rem 0;border-bottom:1px solid var(--line)}
.addon p{color:var(--ink-2);font-size:.95rem;grid-column:1}
.addon .p{font:500 1rem var(--f-mono);text-align:right;grid-row:1/span 2;grid-column:2;white-space:nowrap}
@media (max-width:560px){.addon{grid-template-columns:1fr}.addon .p{grid-row:auto;grid-column:1;text-align:left}}
.ladder{display:grid;border-left:1px solid var(--line-2);margin-left:.4rem}
.ladder>div{padding:0 0 1.6rem 1.4rem;position:relative;display:grid;gap:.3rem}
.ladder>div::before{content:"";position:absolute;left:-.3rem;top:.45rem;width:.55rem;height:.55rem;border-radius:50%;background:var(--blue)}
.ladder p{color:var(--ink-2)}

/* ---------- faq ---------- */
.faq{display:grid;border-top:1px solid var(--line-2)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;padding:1.1rem 0;font:600 var(--step-1)/1.3 var(--f-display);letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:.9rem;height:.9rem;flex:none;margin-top:.45rem;background:linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat;transition:transform var(--t) var(--ease);color:var(--blue)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 1.3rem;color:var(--ink-2);max-width:44rem}

/* ---------- cierre y footer ---------- */
.final{display:grid;gap:1.4rem;justify-items:start;max-width:52rem}
.ft{border-top:1px solid var(--line);padding-block:3rem 6rem;font-size:.92rem;color:var(--ink-2);background:var(--paper)}
.ft .wrap{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.ft h4{margin:0 0 .6rem;font:500 .74rem var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}
.ft a{text-decoration:none;display:block;padding:.2rem 0}
.ft a:hover{color:var(--ink);text-decoration:underline}
.ft .legal{grid-column:1/-1;font-size:.8rem;color:var(--ink-3);border-top:1px solid var(--line);padding-top:1.4rem}
.wa-float{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;align-items:center;gap:.5rem;background:var(--wa);color:#fff;text-decoration:none;font-weight:600;padding:.8rem 1.1rem;border-radius:999px;box-shadow:0 10px 24px -10px rgba(30,142,90,.7);transition:transform var(--t-fast) var(--ease)}
.wa-float:active{transform:scale(.96)}
.wa-float svg{width:20px;height:20px}
@media (max-width:640px){.wa-float{padding:.85rem}.wa-float span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.wa-float svg{width:24px;height:24px}}
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:70;pointer-events:none}
.progress i{display:block;height:100%;width:0;background:var(--blue)}

/* ---------- demo (teléfono grande + panel de control) ---------- */
.demo-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:start}
@media (max-width:900px){.demo-shell{grid-template-columns:1fr}}
.tabs{display:flex;flex-wrap:wrap;gap:.4rem}
.tabs button{font:500 .93rem var(--f-body);padding:.55rem .95rem;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--ink);cursor:pointer;transition:background var(--t-fast) ease,color var(--t-fast) ease,border-color var(--t-fast) ease}
.tabs button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.catalog{display:grid;border-top:1px solid var(--line-2)}
.catalog .cat-h{font:500 .72rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:1rem 0 .4rem}
.citem{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:.3rem .9rem;align-items:center;padding:.6rem 0;border-bottom:1px solid var(--line)}
.citem b{font-weight:600;font-size:.95rem}
.citem small{display:block;color:var(--ink-3);font-size:.8rem}
.citem .pr{font:500 .9rem var(--f-mono);white-space:nowrap}
.citem .pr s{color:var(--ink-3);font-weight:400;margin-left:.3rem}
.citem select{font:500 .82rem var(--f-body);padding:.35rem .4rem;border-radius:8px;border:1px solid var(--line-2);background:var(--paper);color:var(--ink);grid-column:1;justify-self:start}
.citem button{font:600 .85rem var(--f-body);padding:.45rem .8rem;border-radius:9px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer;transition:transform var(--t-fast) var(--ease)}
.citem button:active{transform:scale(.96)}
.citem.out{opacity:.5}
.citem.out button{background:var(--paper-2);border-color:var(--paper-2);color:var(--ink-3);cursor:not-allowed}
.field{display:grid;gap:.4rem}
.field label{font-weight:500;font-size:.92rem}
.field input,.field select{font:500 1rem var(--f-body);color:var(--ink);background:var(--surface);border:1px solid var(--line-2);border-radius:10px;padding:.7rem .85rem;width:100%;transition:border-color var(--t-fast) ease,box-shadow var(--t-fast) ease}
.field input:focus,.field select:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(31,79,224,.15)}
.calc{display:grid;gap:1.4rem;padding:clamp(1.25rem,3vw,2rem);border:1px solid var(--line-2);border-radius:var(--radius);background:var(--surface)}
.calc-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:1rem}
.calc-out{display:grid;gap:.35rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.calc-out .big{font:700 var(--step-3)/1 var(--f-display);letter-spacing:-.035em;color:var(--alert)}
.calc-out .vs{color:var(--ink-2);font-size:.98rem}
.toast{position:fixed;left:50%;bottom:calc(5rem + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:#fff;padding:.7rem 1rem;border-radius:10px;font-weight:500;z-index:70}

/* ---------- quiz / radiografía / blog (sin cambios de estructura) ---------- */
.quiz{display:grid;gap:1.4rem;padding:clamp(1.25rem,3vw,2rem);border:1px solid var(--line-2);border-radius:var(--radius);background:var(--surface)}
.q{display:grid;gap:.7rem;border:0;padding:0;margin:0}
.q legend{font-weight:600;font-size:1.02rem;padding:0;margin-bottom:.2rem}
.opts{display:flex;flex-wrap:wrap;gap:.5rem}
.opts label{cursor:pointer}
.opts input{position:absolute;opacity:0;pointer-events:none}
.opts span{display:inline-block;padding:.55rem .9rem;border:1px solid var(--line-2);border-radius:999px;font-weight:500;font-size:.93rem;background:var(--paper);transition:background var(--t-fast) ease,color var(--t-fast) ease,border-color var(--t-fast) ease}
.opts input:checked+span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.opts input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}
.result-box{border-top:1px solid var(--line);padding-top:1.3rem;display:grid;gap:.8rem}
.checks{display:grid;border-top:1px solid var(--line-2)}
.check{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem 1rem;align-items:center;padding:1rem 0;border-bottom:1px solid var(--line)}
.check .qtxt{font-weight:500}
.check .hint{grid-column:1/-1;font-size:.9rem;color:var(--ink-2);display:none;border-left:2px solid var(--alert);padding:.2rem 0 .2rem .85rem}
.check.no .hint{display:block}
.yn{display:flex;gap:.4rem}
.yn label{cursor:pointer}
.yn input{position:absolute;opacity:0;pointer-events:none}
.yn span{display:inline-block;min-width:3.4rem;text-align:center;padding:.5rem .7rem;border:1px solid var(--line-2);border-radius:10px;font-weight:600;background:var(--paper);transition:background var(--t-fast) ease,color var(--t-fast) ease}
.yn input:checked+span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.yn input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}
.scorecard{position:sticky;top:6rem;border:1px solid var(--line-2);border-radius:var(--radius);padding:1.5rem;display:grid;gap:1rem;background:var(--surface)}
.gauge{height:10px;border-radius:999px;background:var(--paper-2);overflow:hidden}
.gauge i{display:block;height:100%;width:0;background:var(--alert);transition:width var(--t-slow) var(--ease),background var(--t-slow) ease}
.score{font:700 3.6rem/1 var(--f-display);letter-spacing:-.04em}
.score small{font-size:1.1rem;color:var(--ink-3)}
.verdict{font-weight:600}
.diag-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.9fr);gap:clamp(1.5rem,4vw,3rem);align-items:start}
@media (max-width:900px){.diag-grid{grid-template-columns:1fr}.scorecard{position:static}}
.article .meta{font:400 .82rem var(--f-mono);color:var(--ink-3);margin-bottom:1rem}
.article h1{font-size:var(--step-3);margin-bottom:1rem;font-weight:700;letter-spacing:-.03em}
.article{padding-bottom:clamp(2.5rem,6vw,4.5rem)}
.prose{display:grid;gap:1.1rem;font-size:1.08rem;line-height:1.7}
.prose h2{font-size:var(--step-2);margin-top:1.4rem}
.prose ul,.prose ol{margin:0;padding-left:1.3rem;display:grid;gap:.5rem}
.prose a{color:var(--blue)}
.post-cta{margin-top:2.5rem;border-top:1px solid var(--line-2);padding-top:1.6rem;display:grid;gap:.9rem}
.posts{display:grid;border-top:1px solid var(--line-2)}
.posts a{display:grid;gap:.4rem;padding:1.5rem 0;border-bottom:1px solid var(--line);text-decoration:none}
.posts a:hover h2{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
.posts h2{font-size:var(--step-2)}
.posts p{color:var(--ink-2)}
.sites{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));border-top:1px solid var(--line-2)}
.sites a{display:grid;gap:.2rem;padding:1rem .2rem;border-bottom:1px solid var(--line);text-decoration:none}
.sites a b{font-weight:600}
.sites span{font-size:.88rem;color:var(--ink-3)}

/* ---------- vidrio ---------- */
.glass{position:relative;background:var(--g-fill-strong);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border:1px solid var(--g-edge);box-shadow:var(--g-shadow)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:var(--g-rim)}
.glass-dark{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.02) 60%),rgba(18,20,24,.55);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.glass-dark::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 1px 1px 0 rgba(255,255,255,.22),inset -1px -1px 0 rgba(255,255,255,.06)}
.stage .listing,.stage .ticket{border-radius:14px}
.stage .receipt-col .kpis{padding:1rem 1.1rem;border-radius:14px}
@media (prefers-reduced-transparency:reduce){.glass,.glass-dark{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}.glass{background:#fff}.glass-dark{background:#1B1E24}}

/* ---------- ficha de Google: hoy / en 7 días ---------- */
.listing[data-flip]{position:relative}
.listing .face{transition:opacity .5s var(--ease)}
.listing .face.before{position:absolute;inset:0;background:var(--surface);border-radius:inherit;display:flex;flex-direction:column}
.listing[data-state="after"] .face.before{opacity:0;pointer-events:none}
.listing[data-state="before"] .face.after{opacity:0}
.listing .face.before .listing-photos{height:7rem;grid-template-columns:1fr}
.listing .face.before .listing-photos span{background:linear-gradient(160deg,#B9B5AA,#8E8A80);filter:saturate(.2)}
.listing .face.before .stars i{color:#C9C4B8}
.listing .face.before .stars b{color:var(--alert)}
.listing .face.before .open-now b{color:var(--alert)}
.listing .face.before .q{font-size:.78rem;color:var(--ink-3);border-top:1px dashed var(--line);padding-top:.45rem;margin-top:.2rem}
.flip-tag{position:absolute;top:.6rem;left:.6rem;z-index:3;font:500 .64rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:.35rem .5rem;border-radius:6px;background:var(--ink);color:var(--paper);transition:background .3s ease}
.listing[data-state="before"] .flip-tag{background:var(--alert)}
.listing[data-state="before"] .flip-tag::after{content:"Hoy"}
.listing[data-state="after"] .flip-tag::after{content:"En 7 días hábiles"}

/* ---------- tres puertas: viñetas ---------- */
.door .ico{width:3rem;height:3rem;color:var(--sun)}
.door .ico svg{width:100%;height:100%}

/* ---------- selector de fondo (vista previa) ---------- */
.bgpick{position:fixed;left:calc(16px + env(safe-area-inset-left,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:45;display:flex;gap:.3rem;align-items:center;padding:.35rem .4rem .35rem .7rem;border-radius:999px;background:var(--g-fill-strong);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border:1px solid var(--g-edge);box-shadow:var(--g-shadow);font-size:.8rem}
.bgpick span{font:500 .66rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-right:.2rem}
.bgpick button{font:500 .8rem var(--f-body);padding:.4rem .65rem;border-radius:999px;border:1px solid transparent;background:transparent;color:var(--ink-2);cursor:pointer}
.bgpick button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
@media (max-width:720px){.bgpick{display:none}}

/* ---------- demo v2: dos lados ---------- */
.demo-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(1.5rem,3vw,3rem);align-items:start;place-items:stretch}
@media (max-width:900px){.demo-stage{grid-template-columns:minmax(0,1fr)}}
.demo-side,.demo-side .phone,.demo-side .screen,.demo-side .chat{min-width:0}
.demo-side{display:grid;gap:.8rem;justify-items:center}
.demo-side.owner{justify-items:stretch}
.side-label{font:500 .72rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--sun)}
.demo-stage .phone{width:min(100%,22rem)}
.demo-stage .phone .chat{overflow-y:auto;justify-content:flex-start;scrollbar-width:none}
.demo-stage .phone .chat::-webkit-scrollbar{display:none}
.chips{display:flex;gap:.3rem;flex-wrap:wrap;margin-bottom:.4rem}
.chips button{font:500 .72rem var(--f-body);padding:.3rem .6rem;border-radius:999px;border:1px solid var(--line-2);background:#fff;color:var(--ink);cursor:pointer}
.chips button[aria-pressed="true"]{background:var(--blue);color:#fff;border-color:var(--blue)}
.carousel{display:flex;gap:.5rem;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -.7rem;padding:0 .7rem .2rem;scrollbar-width:none}
.carousel::-webkit-scrollbar{display:none}
.carousel .card{flex:0 0 11rem;scroll-snap-align:start;margin-top:0}
.bub:has(.carousel){max-width:100%;width:100%;background:transparent;box-shadow:none;padding:0}
.bub:has(.carousel) .time{display:none}
.card .opt{font:500 .74rem var(--f-body);padding:.3rem .4rem;border-radius:7px;border:1px solid var(--line-2);background:#fff;color:var(--ink);width:100%}
.owner-panel{border-radius:20px;padding:1.3rem;color:var(--on-night);display:grid;gap:1.1rem;min-height:100%}
.owner-hd{display:flex;justify-content:space-between;align-items:start;gap:1rem}
.owner-hd b{display:block;font:600 1.05rem/1.2 var(--f-body)}
.owner-hd small{color:var(--on-night-2);font-size:.82rem}
.live-dot{width:.6rem;height:.6rem;border-radius:50%;background:var(--paid);box-shadow:0 0 0 0 rgba(15,122,75,.6);animation:pulse 1.8s infinite;margin-top:.4rem}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(15,122,75,.6)}70%{box-shadow:0 0 0 .6rem rgba(15,122,75,0)}100%{box-shadow:0 0 0 0 rgba(15,122,75,0)}}
.owner-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;padding:1rem;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.owner-kpis b{display:block;font:700 1.5rem/1 var(--f-display);letter-spacing:-.03em}
.owner-kpis span{font-size:.74rem;color:var(--on-night-2)}
.owner-live{display:grid;gap:.5rem;min-height:9rem}
.o-empty{color:var(--on-night-2);font-size:.9rem;padding:1rem;border:1px dashed rgba(255,255,255,.14);border-radius:12px}
.o-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.3rem .7rem;align-items:center;padding:.7rem .8rem;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);animation:pop var(--t-slow) var(--ease)}
.o-row b{display:block;font:600 .9rem/1.2 var(--f-body)}
.o-row small{display:block;color:var(--on-night-2);font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.o-dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--sun)}
.o-dot.ok{background:var(--paid)}
.o-amt{font:600 .9rem var(--f-mono)}
.o-row.pending{opacity:.75}
.o-row.pending .o-amt::after{content:" · pendiente";font-size:.68rem;color:var(--on-night-2);font-weight:400}
.o-row.new{background:rgba(15,122,75,.14);border-color:rgba(15,122,75,.35)}
.paid-amt{color:#5FD3B5}
.owner-controls{display:grid;gap:.9rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.1)}
.owner-controls .field label{color:var(--on-night-2)}
.owner-controls .field select{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:var(--on-night)}
.btn-ghost-dark{background:transparent;color:var(--on-night);border-color:rgba(255,255,255,.25)}
.btn-ghost-dark:hover{background:rgba(255,255,255,.08)}
.link-dark{background:none;border:0;cursor:pointer;font:600 1rem var(--f-body);color:var(--on-night-2);text-decoration:underline;text-underline-offset:4px}
.o-com{display:flex;flex-wrap:wrap;gap:.4rem .6rem;align-items:center;font-size:.86rem;color:var(--on-night-2);padding:.8rem 1rem;border-radius:12px;background:rgba(255,199,44,.08);border:1px solid rgba(255,199,44,.25)}
.o-com b{color:var(--on-night)}
.o-pct-wrap{display:inline-flex;align-items:center;gap:.2rem}
.o-com input{width:3.4rem;font:600 .95rem var(--f-mono);padding:.25rem .4rem;border-radius:7px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:var(--on-night);text-align:right}

/* =================== v6 · lenguaje visual (stickers, bloques redondeados, diagramas) =================== */
/* retícula tenue sobre el papel */
html{background-color:var(--paper);background-image:linear-gradient(rgba(21,23,28,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(21,23,28,.045) 1px,transparent 1px);background-size:56px 56px;background-attachment:fixed}
/* palabra destacada como etiqueta */
.sticker{display:inline-block;background:var(--blue);color:#fff;padding:.02em .22em .06em;border-radius:.16em;transform:rotate(-1.6deg);line-height:1;box-shadow:0 .08em 0 rgba(21,23,28,.25)}
.sticker.sun{background:var(--sun);color:var(--ink);transform:rotate(1.4deg)}
.sticker.red{background:var(--alert);color:#fff;transform:rotate(-2deg)}
.sticker.ink{background:var(--ink);color:var(--paper);transform:rotate(1deg)}
.night .sticker{box-shadow:none}
/* secciones oscuras como bloques redondeados dentro del papel */
main>.night{border-radius:clamp(1.4rem,3vw,2.6rem);margin-inline:max(8px,env(safe-area-inset-left,0px))}
.night .wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
/* garabatos */
.doodle{position:absolute;color:var(--ink);pointer-events:none}
.doodle svg{width:100%;height:100%;overflow:visible}
.doodle path{stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:400;stroke-dashoffset:400;animation:drawin 1.2s var(--ease) .6s forwards}
@keyframes drawin{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.doodle path{stroke-dashoffset:0;animation:none}}
.hero-side{position:relative}
.hero-side .doodle{right:-1.5rem;bottom:-3.4rem;width:5.5rem;height:4rem;transform:rotate(12deg)}
@media (max-width:900px){.hero-side .doodle{display:none}}

/* ---------- diagrama 1: el camino del cliente ---------- */
.flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem;position:relative;counter-reset:f}
.flow::before{content:"";position:absolute;left:8%;right:8%;top:2.1rem;border-top:2px dashed var(--line-2);background:linear-gradient(90deg,var(--paper),var(--paper));z-index:0}
.fnode{position:relative;z-index:1;display:grid;gap:.5rem;justify-items:center;text-align:center;counter-increment:f}
.fnode .fi{width:4.2rem;height:4.2rem;border-radius:50%;background:var(--surface);border:2px solid var(--ink);display:grid;place-items:center;color:var(--ink);position:relative;box-shadow:0 .25rem 0 var(--ink)}
.fnode .fi svg{width:2rem;height:2rem}
.fnode .fi::after{content:counter(f);position:absolute;top:-.5rem;right:-.5rem;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--sun);color:var(--ink);font:700 .72rem/1.5rem var(--f-mono);text-align:center;border:2px solid var(--ink)}
.fnode b{font:600 .98rem/1.2 var(--f-body);letter-spacing:-.01em}
.fnode span{font-size:.82rem;color:var(--ink-2);max-width:11rem}
.fnode .door-tag{font:500 .62rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--blue);background:rgba(31,79,224,.08);padding:.3rem .5rem;border-radius:999px}
.fnode.you .fi{background:var(--ink);color:var(--paper)}
@media (max-width:860px){.flow{grid-template-columns:1fr;gap:.6rem}.flow::before{left:2.05rem;right:auto;top:1rem;bottom:1rem;border-top:0;border-left:2px dashed var(--line-2)}.fnode{grid-template-columns:4.2rem 1fr;justify-items:start;text-align:left;gap:.2rem 1rem}.fnode .fi{grid-row:span 3}.fnode span{max-width:none}}

/* ---------- diagrama 2: la escalera de planes ---------- */
.stack{display:grid;gap:.6rem;max-width:40rem}
.stair{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.3rem 1rem;align-items:center;padding:1rem 1.2rem;border-radius:14px;border:2px solid var(--ink);background:var(--surface);position:relative}
.stair .lvl{font:700 1.4rem/1 var(--f-display);letter-spacing:-.03em;width:2.2rem}
.stair b{font-weight:600}
.stair small{display:block;color:var(--ink-2);font-size:.86rem}
.stair .pr{font:500 .9rem var(--f-mono);text-align:right;white-space:nowrap}
.stair:nth-child(1){margin-left:0}
.stair:nth-child(2){margin-left:clamp(0rem,4vw,2.5rem);background:var(--ink);color:var(--paper);border-color:var(--ink)}
.stair:nth-child(2) small{color:var(--on-night-2)}
.stair:nth-child(3){margin-left:clamp(0rem,8vw,5rem);background:var(--blue);color:#fff;border-color:var(--blue)}
.stair:nth-child(3) small{color:rgba(255,255,255,.75)}
.credit{display:flex;align-items:center;gap:.6rem;font-size:.86rem;color:var(--ink-2);padding-left:.4rem}
.credit svg{width:2.2rem;height:2.2rem;flex:none;color:var(--paid)}
.credit b{color:var(--ink)}

/* ---------- diagrama 3: 7 días, dos carriles ---------- */
.lanes{display:grid;grid-template-columns:7.5rem repeat(4,minmax(0,1fr));gap:.5rem;align-items:stretch}
.lanes .axis{grid-column:2/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
.lanes .axis span{font:500 .72rem/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:0 .2rem .5rem;border-bottom:2px solid var(--line-2);position:relative}
.lanes .axis span.hit{color:var(--ink);border-color:var(--sun)}
.lanes .axis span.hit::after{content:"";position:absolute;right:0;bottom:-.45rem;width:.7rem;height:.7rem;border-radius:50%;background:var(--sun);border:2px solid var(--ink)}
.lanes .lane{display:grid;align-content:center;font:600 .9rem var(--f-body);color:var(--ink-2);padding-right:.5rem}
.lanes .lane small{display:block;font-weight:400;color:var(--ink-3);font-size:.76rem}
.lanes .cell{border-radius:10px;padding:.65rem .75rem;font-size:.86rem;line-height:1.35;background:var(--surface);border:1px solid var(--line-2);min-height:3.4rem;display:grid;align-content:center}
.lanes .cell.you{background:rgba(255,199,44,.18);border-color:rgba(255,199,44,.6)}
.lanes .cell.us{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.lanes .cell.empty{background:transparent;border-style:dashed;color:var(--ink-3);text-align:center}
.lanes .cell.hit{background:var(--blue);color:#fff;border-color:var(--blue)}
@media (max-width:720px){.lanes{grid-template-columns:1fr}.lanes .axis{grid-column:1;grid-template-columns:repeat(4,minmax(0,1fr));gap:.25rem}.lanes .axis span{font-size:.6rem}.lanes .lane{padding:.6rem 0 .2rem}.lanes>.cell{display:none}.lanes .row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.25rem}.lanes .row .cell{font-size:.72rem;padding:.45rem}}
@media (min-width:721px){.lanes .row{display:contents}}

/* ---------- diagrama 4: hoy vs en 7 días ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.compare .col{border-radius:18px;padding:1.4rem;display:grid;gap:.8rem;align-content:start}
.compare .col.bad{background:var(--surface);border:2px dashed var(--line-2)}
.compare .col.good{background:var(--ink);color:var(--paper);border:2px solid var(--ink);box-shadow:.5rem .5rem 0 var(--sun)}
.compare .col h3{font-size:var(--step-1)}
.compare .col.bad h3{color:var(--alert)}
.compare .row{display:grid;grid-template-columns:1.6rem minmax(0,1fr);gap:.6rem;align-items:start;font-size:.95rem}
.compare .row i{width:1.4rem;height:1.4rem;border-radius:50%;display:grid;place-items:center;font:700 .8rem/1 var(--f-mono);font-style:normal}
.compare .bad .row i{background:var(--alert-soft,rgba(184,57,44,.15));color:var(--alert)}
.compare .good .row i{background:var(--paid);color:#fff}
.compare .row small{display:block;color:var(--ink-3);font-size:.78rem;margin-top:.1rem}
.compare .good .row small{color:var(--on-night-2)}
@media (max-width:720px){.compare{grid-template-columns:1fr}}

/* ---------- proceso escalonado (modelo: tarjetas con número gigante) ---------- */
.process{display:grid;gap:1rem;max-width:52rem}
.pcard{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem 1.4rem;align-items:center;padding:1.3rem 1.5rem;border-radius:18px;border:2px solid var(--ink);background:var(--surface);box-shadow:.4rem .4rem 0 var(--ink)}
.pcard:nth-child(2){margin-left:clamp(0rem,6vw,4rem)}
.pcard:nth-child(3){margin-left:clamp(0rem,12vw,8rem)}
.pcard .big{font:800 clamp(2.4rem,5vw,3.6rem)/1 var(--f-display);letter-spacing:-.05em;color:var(--blue)}
.pcard h3{font-size:var(--step-1)}
.pcard p{color:var(--ink-2);font-size:.95rem}

/* ---------- marquesina de etiquetas ---------- */
.tagmarquee .marquee-track{gap:.6rem;font:500 .95rem var(--f-body);color:var(--ink);animation-duration:34s}
.tagmarquee .marquee-track span{padding:.5rem .9rem;border-radius:999px;border:1.5px solid var(--ink);background:var(--surface)}
.tagmarquee .marquee-track span:nth-child(4n){background:var(--sun)}
.tagmarquee .marquee-track span:nth-child(4n+2){background:var(--ink);color:var(--paper)}

/* ---------- tarjeta CTA ---------- */
.cta-card{position:relative;border-radius:22px;background:var(--surface);border:2px solid var(--ink);box-shadow:.6rem .6rem 0 var(--blue);padding:clamp(1.6rem,4vw,3rem);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:2rem;align-items:center}
@media (max-width:860px){.cta-card{grid-template-columns:1fr}}
.cta-card .corner{position:absolute;width:.9rem;height:.9rem;border:2px solid var(--blue);background:var(--surface)}
.cta-card .corner.tl{top:-.5rem;left:-.5rem}.cta-card .corner.tr{top:-.5rem;right:-.5rem}.cta-card .corner.bl{bottom:-.5rem;left:-.5rem}.cta-card .corner.br{bottom:-.5rem;right:-.5rem}
/* beneficios trío con ícono */
.benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:1.5rem}
.benefit{display:grid;gap:.6rem;justify-items:start}
.benefit .bi{width:3.2rem;height:3.2rem;border-radius:12px;background:var(--sun);border:2px solid var(--ink);display:grid;place-items:center;box-shadow:.25rem .25rem 0 var(--ink)}
.benefit .bi svg{width:1.6rem;height:1.6rem}
.benefit p{color:var(--ink-2);font-size:.95rem}
.night .fnode.you .fi{background:var(--sun);color:var(--ink);border-color:var(--ink)}
.night .flow::before{border-color:rgba(244,243,238,.28)}
.night .fnode .door-tag{background:rgba(255,199,44,.14);color:var(--sun)}

/* =================== v7 =================== */
/* copy: nada de "para celular"; la web es la web */
/* banda de logos reales */
.logoband{display:grid;gap:1rem;margin-top:2.5rem}
.marquee-track.logos{gap:3.5rem;align-items:center;animation-duration:38s}
.marquee-track.logos span{display:grid;place-items:center;height:3.2rem;padding:0 .4rem}
.marquee-track.logos img{height:2.1rem;width:auto;max-width:9.5rem;object-fit:contain;opacity:1;transition:filter var(--t) ease,opacity var(--t) ease}
.marquee-track.logos span:hover img{transform:scale(1.04)}


/* sello de garantía, versión roseta */
.seal2{display:block;width:clamp(7.5rem,14vw,10rem);flex:none}
.seal2 svg{width:100%;height:auto;overflow:visible;filter:drop-shadow(0 .35rem 0 var(--ink))}
.seal2 .ros{fill:var(--sun);stroke:var(--ink);stroke-width:2.2;stroke-linejoin:round;transform-origin:50px 50px;animation:spin 40s linear infinite}
@media (prefers-reduced-motion:reduce){.seal2 .ros{animation:none}}
@keyframes spin{to{transform:rotate(360deg)}}
.seal2 .inner{fill:var(--paper);stroke:var(--ink);stroke-width:2}
.seal2 .big{font:800 30px var(--f-display);fill:var(--ink);text-anchor:middle;letter-spacing:-1.2px}
.seal2 .small{font:700 6.6px var(--f-mono);fill:var(--ink);text-anchor:middle;letter-spacing:.5px}
.seal2 .small2{font:700 5.2px var(--f-body);fill:var(--blue);text-anchor:middle;letter-spacing:.35px}
.seal2 .ring{fill:none;stroke:var(--ink);stroke-width:.8;stroke-dasharray:1.6 2.2;opacity:.55}
.seal2 .ribbon-fold{fill:rgba(0,0,0,.35)}
.seal2 .ribbon{fill:var(--blue);stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.guarantee{grid-template-columns:auto 1fr}
.guarantee .seal{display:none}

/* portafolio: bento con overlay al pasar */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(8rem,auto);gap:1rem}
.bento .work{display:block}
.bento .work:nth-child(1){grid-column:span 7;grid-row:span 2}
.bento .work:nth-child(2){grid-column:span 5}
.bento .work:nth-child(3){grid-column:span 5}
.bento .work:nth-child(4){grid-column:span 4}
.bento .work:nth-child(5){grid-column:span 4}
.bento .work:nth-child(6){grid-column:span 4}
.bento .frame{height:100%;display:flex;flex-direction:column}
.bento .frame img{flex:1;height:100%;aspect-ratio:auto;min-height:8rem}
.bento .work:nth-child(1) .frame img{min-height:22rem}
@media (max-width:900px){.bento .work{grid-column:span 12!important;grid-row:auto!important}.bento .frame img{aspect-ratio:16/10;min-height:0}}
.work{position:relative}
.work .cap{margin-top:.6rem}
.work .overlay{position:absolute;inset:0;border-radius:12px;background:linear-gradient(180deg,rgba(21,23,28,0) 40%,rgba(21,23,28,.7));opacity:0;transition:opacity var(--t) ease;display:flex;align-items:flex-end;justify-content:space-between;padding:1rem;color:#fff;pointer-events:none}
.work .overlay b{font-weight:600}
.work .overlay i{font-style:normal;width:2.2rem;height:2.2rem;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;font-weight:700;transform:translate(6px,-6px) scale(.8);transition:transform var(--t) var(--ease)}
.work:hover .overlay{opacity:1}
.work:hover .overlay i{transform:none}
.work .frame-wrap{position:relative}
.work:hover .frame img{transform:scale(1.02)}
.frame img{transition:transform var(--t-slow) var(--ease)}
.frame.tall{max-width:16rem;margin-inline:auto;border-radius:1.6rem}
.frame.tall .frame-bar{display:none}
.frame.tall img{aspect-ratio:9/19;object-position:top}
.bento .work.mobile{display:grid;place-items:center;padding:1rem;background:var(--ink);border-radius:12px}
.bento .work.mobile .frame.tall{box-shadow:0 30px 60px -30px rgba(0,0,0,.8);border:4px solid #0B0C10}

/* botón flotante de WhatsApp: vidrio + punto azul que late */
.wa-float{background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.04) 60%),rgba(30,142,90,.72);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);border:1px solid rgba(255,255,255,.45);box-shadow:inset 1px 1px 0 rgba(255,255,255,.55),0 12px 28px -12px rgba(30,142,90,.8)}
.wa-float::after{content:"";position:absolute;top:-.25rem;right:-.25rem;width:.85rem;height:.85rem;border-radius:50%;background:var(--blue);border:2px solid #fff;box-shadow:0 0 0 0 rgba(31,79,224,.65);animation:ping 1.8s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(31,79,224,.65)}70%{box-shadow:0 0 0 .75rem rgba(218,41,28,0)}100%{box-shadow:0 0 0 0 rgba(218,41,28,0)}}
@media (prefers-reduced-motion:reduce){.wa-float::after{animation:none}}

/* diagrama de flujo con puntos que viajan */
.flowmap-wrap{overflow-x:auto;scrollbar-width:thin;margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)));padding-inline:max(16px,env(safe-area-inset-left,0px))}
.flowmap{display:block;width:100%;min-width:760px;height:auto;font-family:var(--f-body)}
.flowmap .wires use{fill:none;stroke:rgba(244,243,238,.28);stroke-width:2}
.flowmap .wires use.dashed{stroke-dasharray:6 7;stroke:rgba(255,199,44,.5)}
.flowmap .movers circle{fill:var(--sun);filter:drop-shadow(0 0 6px rgba(255,199,44,.9))}
.flowmap .movers circle.paid{fill:#5FD3B5;filter:drop-shadow(0 0 6px rgba(95,211,181,.9))}
.flowmap .movers circle.star{fill:#fff}
.flowmap .movers circle.back{fill:rgba(255,199,44,.6);filter:none}
.flowmap .node rect{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.18);stroke-width:1.5}
.flowmap .node.hub rect{fill:var(--paper);stroke:var(--paper)}
.flowmap .node.hub.wa rect{fill:#1E8E5A;stroke:#1E8E5A}
.flowmap .node.out rect{fill:rgba(218,41,28,.25);stroke:rgba(255,255,255,.25)}
.flowmap .t{font-weight:700;font-size:17px;fill:var(--on-night);letter-spacing:-.2px}
.flowmap .s{font-size:12.5px;fill:var(--on-night-2)}
.flowmap .node.hub .t,.flowmap .node.hub .s{fill:var(--ink)}
.flowmap .node.hub.wa .t,.flowmap .node.hub.wa .s{fill:#fff}
.flowmap .node.out .t{font-size:13px}
.flowmap .node.out .s{font-size:10.5px}
.flowmap .c{text-anchor:middle}
.flowmap .back-label{font-size:11.5px;fill:rgba(255,199,44,.8)}
.flowmap .dot{fill:var(--sun)}
.flowmap .node.hub .dot{fill:var(--blue)}
.flowmap .node.hub.wa .dot{fill:#fff}
.flowmap .pulse{fill:none;stroke:var(--sun);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:fpulse 2s ease-out infinite}
.flowmap .node.hub .pulse{stroke:var(--blue)}
.flowmap .node.hub.wa .pulse{stroke:#fff}
.flowmap .node:nth-of-type(2) .pulse{animation-delay:.6s}.flowmap .node:nth-of-type(3) .pulse{animation-delay:1.2s}.flowmap .node.hub .pulse{animation-delay:.3s}.flowmap .node.hub.wa .pulse{animation-delay:.9s}
@keyframes fpulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.2);opacity:0}}
@media (prefers-reduced-motion:reduce){.flowmap .pulse{animation:none;opacity:0}.flowmap .movers{display:none}}

/* servicios: iconos por grupo */
.menu-group .gi{width:3.2rem;height:3.2rem;border-radius:12px;background:var(--sun);border:2px solid var(--ink);display:grid;place-items:center;box-shadow:.25rem .25rem 0 var(--ink);margin-bottom:.9rem}
.menu-group .gi svg{width:1.6rem;height:1.6rem}
.menu-group:nth-child(2) .gi{background:var(--blue);color:#fff}
.menu-group:nth-child(3) .gi{background:var(--paid);color:#fff}
.menu-group:nth-child(4) .gi{background:var(--surface)}

/* blog: portadas */
.posts a{grid-template-columns:9rem minmax(0,1fr);gap:.3rem 1.4rem;align-items:center}
.posts .cover{grid-row:span 3;aspect-ratio:1;border-radius:14px;border:2px solid var(--ink);display:grid;place-items:center;box-shadow:.3rem .3rem 0 var(--ink)}
.posts .cover svg{width:3rem;height:3rem}
.posts .cover.c1{background:var(--sun)}.posts .cover.c2{background:var(--blue);color:#fff}
@media (max-width:560px){.posts a{grid-template-columns:1fr}.posts .cover{grid-row:auto;width:5rem}}

/* demo: la web de ejemplo del negocio */
.demoweb{margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.demoweb .frame{box-shadow:var(--shadow-lg)}
.mocksite{--acc:#B8392C;background:#fff;color:var(--ink);font-family:var(--f-body)}
.mocksite .mhd{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding:.7rem 1.2rem;border-bottom:1px solid var(--line);font-size:.8rem}
.mocksite .mhd b{font:700 1rem var(--f-display);letter-spacing:-.02em}
.mocksite .mhd nav{display:flex;gap:.9rem;color:var(--ink-3)}
.mocksite .mhd .mbtn{background:var(--acc);color:#fff;padding:.35rem .7rem;border-radius:999px;font-weight:600}
.mocksite .mhero{padding:1.4rem 1.2rem 1.2rem;display:grid;gap:.6rem;align-content:center}
.mocksite .mhero h3{font:800 clamp(1.4rem,2.6vw,2rem)/1 var(--f-display);letter-spacing:-.03em;font-variation-settings:normal}
.mocksite .mhero p{font-size:.86rem;color:var(--ink-2);max-width:26rem}
.mocksite .mhero .row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-top:.3rem}
.mocksite .mcta{background:#1E8E5A;color:#fff;font:600 .85rem var(--f-body);padding:.6rem .9rem;border-radius:10px;border:0;cursor:pointer;display:inline-flex;gap:.4rem;align-items:center;transition:transform var(--t-fast) var(--ease)}
.mocksite .mcta:active{transform:scale(.97)}
.mocksite .mmeta{font-size:.74rem;color:var(--ink-3)}
.mocksite .mmeta b{color:#E8A317}
.mocksite .mvis{position:relative;background:linear-gradient(160deg,color-mix(in srgb,var(--acc) 70%,#fff),var(--acc));min-height:12rem}
.mocksite .mtiles{position:absolute;inset:auto 1rem 1rem auto;display:flex;gap:.5rem}
.mocksite .mtile{width:7rem;background:#fff;border-radius:10px;padding:.5rem;box-shadow:0 10px 24px -12px rgba(0,0,0,.4);font-size:.72rem}
.mocksite .mtile .ph{height:3rem;border-radius:7px;background:linear-gradient(160deg,color-mix(in srgb,var(--tint,#C9B38A) 60%,#fff),var(--tint,#C9B38A));margin-bottom:.35rem}
.mocksite .mtile b{display:block;font-weight:600}
.mocksite .mtile span{color:var(--ink-3)}
.mocksite .mbadge{position:absolute;top:1rem;left:1rem;background:rgba(255,255,255,.9);color:var(--ink);font:500 .66rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase;padding:.35rem .55rem;border-radius:6px}

.demoweb .step{font:500 .72rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.6rem}
.demo-side .side-label{color:var(--blue)}

/* v7b: casos phones strip, diag head, demo step label */
.phones{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem}
.phones .frame.tall{max-width:none;border-radius:1.4rem;border:3px solid var(--ink)}
.phones .cap{text-align:center;font-size:.85rem}
@media (max-width:900px){.phones{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.phones{grid-template-columns:repeat(2,minmax(0,1fr))}}
.diag-head{display:grid;grid-template-columns:minmax(0,1fr) 20rem;gap:2.5rem;align-items:center}
.diag-head .listing{max-width:20rem}
@media (max-width:900px){.diag-head{grid-template-columns:1fr}.diag-visual{max-width:20rem}}
.demoweb-step{margin-bottom:.8rem}
.guarantee{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.6rem;align-items:center}
@media (max-width:560px){.guarantee{grid-template-columns:1fr}}
.seal2.s60 .ros{fill:var(--blue)}.seal2.s60 .big{font-size:28px}.seal2.s60 .small{font-size:5.9px;letter-spacing:.3px}.seal2.s60 .ribbon{fill:var(--sun)}.seal2.s60 .small2{fill:var(--ink)}.seal2.s60 .inner{fill:var(--paper)}
.phone.nudge{animation:nudge .6s var(--ease)}
@keyframes nudge{0%{transform:none}30%{transform:translateY(-6px) scale(1.01)}100%{transform:none}}

@media (max-width:560px){.marquee-track.logos{gap:2rem}.marquee-track.logos img{height:1.5rem;max-width:6.5rem}}
.work-grid .cap,.feature-work .side .cap{flex-direction:column;align-items:flex-start;gap:.1rem}
@media (max-width:700px){.feature-work .cap{flex-direction:column;align-items:flex-start;gap:.2rem}}
.work-grid .cap span,.feature-work .side .cap span{font-size:.82rem}

/* v8: blog system */
.prose h3{font-size:1.2rem;margin-top:.6rem}
.prose table{width:100%;border-collapse:collapse;font-size:.95rem;margin:.4rem 0}
.prose th,.prose td{text-align:left;padding:.65rem .7rem;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{font:600 .78rem var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);background:var(--surface)}
.prose .dato{border:2px solid var(--ink);border-radius:14px;padding:1rem 1.2rem;background:var(--sun);box-shadow:.35rem .35rem 0 var(--ink);font-size:1rem}
.prose .dato b{display:block;font:700 .74rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.3rem}
.prose .nota{border-left:3px solid var(--blue);padding:.2rem 0 .2rem 1rem;color:var(--ink-2);font-size:1rem}
.prose blockquote{border-left:3px solid var(--sun);padding-left:1rem;font-style:italic;color:var(--ink-2)}
.prose img{max-width:100%;border-radius:12px;border:1px solid var(--line)}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.4rem}
.tags .pill{font:500 .72rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line-2);padding:.4rem .6rem;border-radius:999px;color:var(--ink-2)}
.toc{border:1px solid var(--line-2);border-radius:14px;padding:1.1rem 1.3rem;margin-bottom:1.8rem;background:var(--glass-bg,rgba(255,255,255,.55))}
.toc ol{margin:.5rem 0 0;padding-left:1.2rem;display:grid;gap:.3rem;font-size:.95rem}
.toc a{color:var(--ink-2)}.toc a:hover{color:var(--blue)}
.faq-block{margin-top:2.5rem}.faq-block h2{font-size:var(--step-2);margin-bottom:.8rem}
.faq-block details{border-top:1px solid var(--line);padding:.9rem 0}.faq-block details:last-child{border-bottom:1px solid var(--line)}
.faq-block summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq-block summary::after{content:"+";color:var(--blue);font-weight:500}.faq-block details[open] summary::after{content:"–"}
.faq-block p{margin-top:.6rem;color:var(--ink-2);line-height:1.6}
.sources{margin-top:2.2rem;font-size:.9rem;color:var(--ink-3)}.sources h2{font-size:1rem;margin-bottom:.5rem}.sources ol{padding-left:1.2rem;display:grid;gap:.3rem}.sources a{color:var(--ink-2);word-break:break-all}
.author{display:flex;gap:1rem;align-items:flex-start;margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--line-2);font-size:.92rem;color:var(--ink-2)}
.author .av-org{flex:none;width:2.6rem;height:2.6rem;border-radius:50%;background:#FFFBEF;border:1px solid var(--line-2);display:grid;place-items:center}.author .av-org img{width:1.8rem;height:auto}
.post-cta.night-card{background:var(--night);color:var(--on-night);border:0;border-radius:22px;padding:clamp(1.4rem,3vw,2.2rem);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem;align-items:center}
.post-cta.night-card h2{color:#fff;font-size:var(--step-2);margin:.3rem 0 .5rem}.post-cta.night-card p{color:var(--on-night-2)}.post-cta.night-card .eyebrow{color:var(--sun)}
@media (max-width:720px){.post-cta.night-card{grid-template-columns:1fr}}
.related{margin-top:2.5rem}.related .eyebrow{margin-bottom:1rem}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:1.2rem}
.pcardb{display:grid;gap:.5rem;padding:1.1rem;border:1px solid var(--line-2);border-radius:18px;background:rgba(255,255,255,.6);text-decoration:none;transition:transform var(--t) var(--ease),box-shadow var(--t) ease,border-color var(--t) ease}
.pcardb:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--ink)}
.pcardb .cover{width:3rem;height:3rem;border-radius:12px;border:2px solid var(--ink);display:grid;place-items:center;box-shadow:.25rem .25rem 0 var(--ink);margin-bottom:.4rem}
.pcardb .cover svg{width:1.5rem;height:1.5rem}
.pcardb h3{font-size:1.15rem;line-height:1.25;letter-spacing:-.02em}.pcardb p{color:var(--ink-2);font-size:.92rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pcardb .eyebrow{font-size:.68rem}
.rubro-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.rubro-tabs .pill{font-size:.85rem;padding:.5rem .9rem;border:1px solid var(--line-2);border-radius:999px;text-decoration:none;color:var(--ink-2);background:rgba(255,255,255,.6)}
.rubro-tabs .pill[aria-current]{background:var(--ink);color:#fff;border-color:var(--ink)}
.legal-page .prose{font-size:1rem}.legal-page h2{font-size:1.25rem}

/* v8: credenciales heredadas, badges, Levisoft */
.listing-photos span{background-size:cover;background-position:center}
.listing .face.before .listing-photos span{filter:grayscale(1) brightness(.8) contrast(.9)}
.badges{position:relative;isolation:isolate;display:grid;gap:1.1rem;padding:1.3rem 1.5rem 1.4rem;border-radius:20px;
  background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 50%,rgba(255,255,255,.08)),rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 20px 40px -30px rgba(0,0,0,.6)}
.badges::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(50% 90% at 12% 0%,rgba(255,255,255,.18),transparent 60%);pointer-events:none}
.badges .eyebrow{color:rgba(255,255,255,.72)}
.badge-row img{opacity:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.badge-row{display:flex;flex-wrap:wrap;gap:1.2rem 2rem;align-items:center}
.badge-row img{height:2.4rem;width:auto;max-width:9rem;object-fit:contain;opacity:.85;transition:opacity var(--t) ease}
.badge-row img:hover{opacity:1}
.night .badge-row img[alt="Shopify Partners"],.night .badge-row img[alt="Webflow Professional Partner"],.night .badge-row img[alt="Oracle NetSuite Solution Partner"]{filter:brightness(0) invert(1)}
@media (max-width:560px){.badge-row{gap:.9rem 1.2rem}.badge-row img{height:1.8rem;max-width:6.5rem}}
.creds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin:2rem 0}
.cred{border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:1.1rem 1.2rem;display:grid;gap:.4rem;align-content:start;background:rgba(255,255,255,.04)}
.cred .num{font:800 2rem/1 var(--f-display);letter-spacing:-.04em;color:#fff}
.cred span{color:var(--on-night-2);font-size:.9rem}
.cred-ic{display:flex;gap:.5rem;align-items:center;height:1.6rem}
.cred-ic img{height:1.4rem;width:auto}
.cred-ic.mit img{height:1.6rem;filter:brightness(0) invert(1)}
@media (max-width:900px){.creds{grid-template-columns:repeat(2,minmax(0,1fr))}}
.method{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem;margin-top:2.5rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.12)}
.method div{display:grid;gap:.3rem}.method b{color:#fff}.method span{color:var(--on-night-2);font-size:.92rem}
@media (max-width:900px){.method{grid-template-columns:repeat(2,minmax(0,1fr))}}
.nda{margin-top:2.5rem}.nda .eyebrow{color:var(--sun);margin-bottom:1rem}
.nda-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.nda-grid div{border:1px dashed rgba(255,255,255,.25);border-radius:14px;padding:1rem 1.1rem;display:grid;gap:.3rem}
.nda-grid small{font:500 .68rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-night-2)}.nda-grid b{color:#fff}.nda-grid span{color:var(--on-night-2);font-size:.9rem}
@media (max-width:720px){.nda-grid{grid-template-columns:1fr}}
.industries{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem}
.industries span{font-size:.82rem;padding:.4rem .8rem;border:1px solid rgba(255,255,255,.2);border-radius:999px;color:var(--on-night-2)}
.inline-logo{height:.9em;width:auto;vertical-align:-.08em;margin-left:.15em}
.levi{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;background:var(--ink);border-radius:999px;padding:.55rem 1rem .55rem 1.1rem;color:var(--on-night-2);font-size:.82rem}
.levi img{height:1.1rem;width:auto}
.ft-levi{display:inline-flex;align-items:center;gap:.5rem;margin-top:.6rem;text-decoration:none}
.ft-levi img{height:1rem;width:auto;filter:brightness(0);opacity:.8}
.mocksite .mvis{background-size:cover;background-position:center}
.mocksite .mvis[style*="background-image"]::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.45))}
.mocksite .mtile .ph{background-size:cover;background-position:center}
.hubs a{display:grid;gap:.4rem;padding:1.1rem;border:1px solid var(--line-2);border-radius:18px;background:rgba(255,255,255,.6);text-decoration:none;transition:transform var(--t) var(--ease),border-color var(--t) ease}
.hubs a:hover{transform:translateY(-3px);border-color:var(--ink)}
.hubs .cover{width:2.8rem;height:2.8rem;border-radius:11px;border:2px solid var(--ink);display:grid;place-items:center;box-shadow:.25rem .25rem 0 var(--ink);margin-bottom:.3rem}
.hubs .cover svg{width:1.4rem;height:1.4rem}
.hubs b{font-size:1rem}.hubs span:last-child{color:var(--ink-2);font-size:.85rem}
@media (max-width:1000px){.hubs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.hubs{grid-template-columns:1fr}}
.tscroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.tscroll table{min-width:32rem}
.prose,.legal-page .prose{overflow-wrap:anywhere}

/* v9: logo band always in colour on a dark panel; WhatsApp button squarer, dot on the left */
.logoband{position:relative;isolation:isolate;border-radius:22px;padding:1.4rem 1.6rem 1.2rem;color:#fff;
  background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.04) 45%,rgba(255,255,255,.1)),rgba(44,56,86,.66);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.2),0 24px 50px -30px rgba(21,23,28,.6)}
.logoband::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(60% 80% at 18% 0%,rgba(255,255,255,.22),transparent 60%);pointer-events:none}
.logoband .eyebrow{color:rgba(255,255,255,.7)}
.marquee-track.logos img{filter:drop-shadow(0 1px 0 rgba(0,0,0,.25))}
.marquee-track.logos img{transition:transform var(--t) var(--ease)}
.wa-float{border-radius:16px!important;padding:.8rem 1.1rem!important}
.wa-float::after{right:auto!important;left:-.3rem!important;top:-.3rem!important;width:.95rem!important;height:.95rem!important}
@media (max-width:640px){.wa-float{border-radius:16px!important;padding:.9rem!important}}
.hero-callout{grid-column:1/-1;margin-bottom:.2rem}
.hero-callout .pill{background:var(--ink);color:#fff;border-color:var(--ink)}

/* v9: demo mock websites, one theme per rubro (inspired by Pizza Planet, TNC Advocator, Staylo, Smilifye, Vinsor) */
.mocksite{--acc:#E63946;--acc2:#F5B400;--ink2:#111;--paper2:#fff;--ff:var(--f-body);--fd:var(--f-display);font-family:var(--ff);background:var(--paper2);color:var(--ink2);text-align:left}
.ms-top{font:500 .7rem var(--ff);padding:.45rem 1.2rem;background:var(--acc2);color:#111;letter-spacing:.02em}
.ms-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1.2rem;background:var(--nav-bg,#fff);color:var(--nav-fg,#111);border-bottom:1px solid rgba(0,0,0,.06)}
.ms-logo{font:800 1.05rem var(--fd);letter-spacing:-.02em}
.ms-nav nav{display:flex;gap:1rem;font-size:.78rem;opacity:.85}
.ms-btn{font:600 .74rem var(--ff);padding:.45rem .8rem;border-radius:var(--r,999px);background:var(--acc);color:#fff}
.ms-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);min-height:17rem;background:var(--hero-bg,#fff);color:var(--hero-fg,#111);overflow:hidden;isolation:isolate}
.ms-hero-img{background:var(--hero) center/cover;position:relative}
.ms-copy{padding:1.6rem 1.4rem 1.4rem;display:grid;gap:.55rem;align-content:center;position:relative;z-index:1}
.ms-copy small{font:600 .68rem var(--ff);letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.ms-copy h3{font:800 clamp(1.3rem,2.4vw,1.9rem)/1.08 var(--fd);letter-spacing:-.02em;font-variation-settings:normal;margin:0}
.ms-copy p{font-size:.84rem;line-height:1.5;opacity:.9;max-width:28rem;margin:0}
.ms-row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-top:.3rem}
.mocksite .mcta{background:#1E8E5A;color:#fff;font:600 .82rem var(--ff);padding:.6rem .9rem;border-radius:var(--r,999px);border:0;cursor:pointer;display:inline-flex;gap:.45rem;align-items:center;transition:transform var(--t-fast,.16s) var(--ease);box-shadow:0 8px 20px -10px rgba(0,0,0,.5)}
.mocksite .mcta:hover{transform:translateY(-1px)}.mocksite .mcta:active{transform:scale(.97)}
.ms-ghost{font:600 .78rem var(--ff);text-decoration:underline;text-underline-offset:4px;opacity:.9}
.ms-badge{font:500 .68rem var(--ff);opacity:.8;margin-top:.2rem}
.ms-items{padding:1.1rem 1.2rem 1.3rem;background:var(--items-bg,#fff);color:var(--items-fg,#111)}
.ms-items-hd{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.8rem;flex-wrap:wrap}
.ms-items-hd h4{font:700 1.05rem var(--fd);margin:0;letter-spacing:-.02em}.ms-items-hd span{font-size:.74rem;opacity:.7}
.ms-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.ms-card{background:var(--card-bg,#fff);border:1px solid var(--card-line,rgba(0,0,0,.08));border-radius:var(--rc,14px);overflow:hidden;display:grid}
.ms-ph{aspect-ratio:16/10;background:#ddd center/cover}
.ms-card-b{padding:.6rem .75rem .75rem;display:grid;gap:.15rem;font-size:.76rem}
.ms-card-b b{font-size:.84rem}.ms-card-b span{opacity:.7}.ms-card-b em{font-style:normal;font-weight:700;color:var(--acc);margin-top:.2rem}
@media (max-width:720px){.ms-hero{grid-template-columns:1fr}.ms-hero-img{min-height:9rem;order:-1}.ms-nav nav{display:none}.ms-grid{grid-template-columns:1fr 1fr}.ms-grid .ms-card:nth-child(3){display:none}}

/* Pizza: red hero, yellow accents, circular photo, heavy uppercase */
.ms-pizza{--acc:#F5B400;--acc2:#F5B400;--fd:"Rubik",var(--f-display);--r:6px;--rc:10px;--hero-bg:#E63946;--hero-fg:#fff}
.ms-pizza .ms-nav{--nav-bg:#E63946;--nav-fg:#fff;border-bottom:0}
.ms-pizza .ms-btn{background:#F5B400;color:#111}
.ms-pizza .ms-copy h3{text-transform:uppercase;font-weight:900;letter-spacing:-.01em}
.ms-pizza .ms-hero-img{background:none}
.ms-pizza .ms-hero-img::before{content:"";position:absolute;right:-6%;top:50%;transform:translateY(-50%);width:96%;aspect-ratio:1;border-radius:50%;background:var(--hero) center/cover;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);border:8px solid rgba(255,255,255,.12)}
.ms-pizza .mcta{background:#F5B400;color:#111}
.ms-pizza .ms-ghost{color:#fff}
.ms-pizza .ms-items{--items-bg:#fff}
.ms-pizza .ms-card{--card-bg:#FFF7DB;--card-line:#F5B400}.ms-pizza .ms-card-b em{color:#B8392C}




@media (min-width:721px){.ms-pizza .ms-hero-img{order:2}}

/* v10: premium pass on the demo mock sites */
.ms-hero{min-height:19rem}
.ms-copy{padding:2rem 1.6rem 1.6rem;gap:.7rem}
.ms-copy h3{font-size:clamp(1.45rem,2.6vw,2.1rem)}
.ms-items{padding:1.4rem 1.6rem 1.6rem}
.ms-items-hd{margin-bottom:1rem}.ms-items-hd h4{font-size:1.2rem}
.ms-grid{gap:1rem}
.ms-card{transition:transform var(--t) var(--ease),box-shadow var(--t) ease}
.ms-card:hover{transform:translateY(-3px);box-shadow:0 18px 36px -24px rgba(0,0,0,.45)}
.ms-ph{position:relative}
.ms-tag{position:absolute;top:.6rem;left:.6rem;font:600 .6rem var(--ff);letter-spacing:.08em;text-transform:uppercase;background:var(--acc);color:#fff;padding:.3rem .5rem;border-radius:3px;font-style:normal}
.ms-num{position:absolute;top:.6rem;left:.7rem;font:600 .78rem var(--ff);color:#fff;font-style:normal;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.ms-pills{display:flex;gap:.3rem;flex-wrap:wrap;margin:.25rem 0 .15rem}
.ms-pills span{font:600 .62rem var(--ff);padding:.25rem .55rem;border-radius:999px;background:#0F3D3E;color:#fff}
/* split section (pizza, wine) */
.ms-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:15rem;position:relative}
.ms-split-copy{padding:1.8rem 1.6rem;display:grid;gap:.6rem;align-content:center}
.ms-split-copy small{font:600 .66rem var(--ff);letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.ms-split-copy h4{font:800 1.35rem/1.15 var(--fd);margin:0;letter-spacing:-.02em}
.ms-split-copy p{font-size:.84rem;line-height:1.5;margin:0;opacity:.9}
.ms-split-img{background:center/cover}
.ms-contact{list-style:none;margin:.2rem 0;padding:0;display:grid;gap:.25rem;font-size:.78rem;opacity:.9}
.ms-contact li::before{content:"";display:inline-block;width:.45rem;height:.45rem;border-radius:50%;background:currentColor;margin-right:.5rem;opacity:.7}
.ms-pizza .ms-split{background:#E63946;color:#fff}
.ms-pizza .ms-split-img{clip-path:polygon(7% 0,100% 0,100% 100%,0 100%,3% 70%,9% 40%)}
.ms-pizza .ms-split .mcta{background:#F5B400;color:#111}
.ms-pizza .ms-grid .ms-ph{aspect-ratio:1;border-radius:50%;margin:1rem auto 0;width:72%;box-shadow:0 0 0 .55rem #F5B400,0 0 0 .7rem #E63946;background-color:#fff}
.ms-pizza .ms-card{--card-bg:transparent;--card-line:transparent;text-align:center;box-shadow:none!important}
.ms-pizza .ms-card-b{padding-top:1rem}.ms-pizza .ms-card-b b{font:800 .95rem var(--fd)}.ms-pizza .ms-card-b em{color:#E63946;font-size:1rem}
.ms-pizza .ms-items{--items-bg:#fff;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.ms-pizza .ms-hero{clip-path:polygon(0 0,100% 0,100% 94%,85% 98%,70% 94%,55% 99%,40% 95%,25% 99%,10% 95%,0 99%)}
.ms-bullets{margin:0;padding:0 0 0 1rem;display:grid;gap:.3rem;font-size:.8rem}
@media (max-width:720px){.ms-split{grid-template-columns:1fr}.ms-split-img{min-height:9rem;order:-1}.ms-pizza .ms-split-img{clip-path:none}}

.badge-row img[alt="Microsoft Partner"],.badge-row img[alt="Oracle NetSuite Solution Partner"]{filter:brightness(1.25) drop-shadow(0 1px 1px rgba(0,0,0,.35))}

/* v11: per-rubro flow in the demo + money strip */
.flowdemo .flowmap .node.src text{fill:#fff}
.money{margin-top:1.6rem;border-top:1px solid rgba(255,255,255,.12);padding-top:1.4rem}
.money .eyebrow{color:var(--sun);margin-bottom:.9rem}
.money-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.money-grid div{display:grid;grid-template-columns:auto 1fr;gap:.2rem .8rem;align-items:start;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:1rem 1.1rem}
.money-grid .mn{grid-row:span 2;width:2rem;height:2rem;border-radius:50%;background:var(--sun);color:var(--ink);font:800 .95rem var(--f-display);display:grid;place-items:center}
.money-grid b{color:#fff}.money-grid span:last-child{color:var(--on-night-2);font-size:.9rem}
@media (max-width:720px){.money-grid{grid-template-columns:1fr}}

/* v11: premium themes v2 (Protass Law, Tend, Berry Bros & Rudd) */
@media (max-width:720px){.ms-ranges-grid{grid-template-columns:1fr}}

/* v13: calculadora, checklist de entrega */
.calc2{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:1.5rem;align-items:start}
.calc2-in{display:grid;gap:1rem;padding:clamp(1.25rem,3vw,2rem);border:1px solid var(--line-2);border-radius:22px;background:rgba(255,255,255,.6)}
.c-fields{display:grid;gap:1.1rem}
.c-field{display:grid;gap:.45rem}
.c-label{font-weight:500;line-height:1.35}
.c-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:center}
.c-row input[type=range]{width:100%;accent-color:var(--blue);height:2rem}
.c-row output{font-weight:700;min-width:5.5rem;text-align:right;background:var(--surface);border:1px solid var(--line-2);border-radius:10px;padding:.4rem .6rem}
.calc2-out{position:sticky;top:5.5rem;display:grid;gap:.9rem;padding:clamp(1.25rem,3vw,2rem);border-radius:22px}
.c-big{font:800 clamp(2.6rem,5vw,3.8rem)/1 var(--f-display);letter-spacing:-.045em;color:#fff}
.c-year{color:var(--on-night-2);margin:0}.c-year b{color:#fff}
.c-break{display:grid;gap:.5rem;border-top:1px solid rgba(255,255,255,.12);padding-top:.9rem}
.c-break div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.2rem .8rem;align-items:baseline}
.c-break span{color:#fff}.c-break b{color:var(--sun)}.c-break small{grid-column:1/-1;color:var(--on-night-2);font-size:.8rem}
.c-vs{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;border-top:1px solid rgba(255,255,255,.12);padding-top:.9rem}
.c-vs div{display:grid;gap:.15rem}.c-vs small{font:500 .66rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-night-2)}.c-vs b{color:#fff}.c-vs span{color:var(--on-night-2);font-size:.85rem}
@media (max-width:900px){.calc2{grid-template-columns:1fr}.calc2-out{position:static}}
.howcalc div{display:grid;gap:.5rem;align-content:start}.howcalc .gi{width:3rem;height:3rem;border-radius:12px;background:var(--sun);border:2px solid var(--ink);display:grid;place-items:center;box-shadow:.25rem .25rem 0 var(--ink)}.howcalc .gi svg{width:1.4rem;height:1.4rem}.howcalc p{color:var(--ink-2);font-size:.95rem}
.sticker.red{background:#B8392C;color:#fff}
.deliver{list-style:none;margin:0;padding:0;display:grid;gap:.8rem;counter-reset:d}
.deliver li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1.2rem;align-items:start;padding:1.2rem 1.4rem;border:1px solid var(--line-2);border-radius:18px;background:rgba(255,255,255,.65)}
.deliver .dn{width:2.6rem;height:2.6rem;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font:800 1.1rem var(--f-display)}
.deliver b{font-size:1.1rem}.deliver p{margin:.2rem 0 .3rem;color:var(--ink-2)}.deliver small{color:var(--ink-3)}
.dtag{font:500 .66rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line-2);border-radius:999px;padding:.4rem .6rem;white-space:nowrap}
@media (max-width:640px){.deliver li{grid-template-columns:auto minmax(0,1fr)}.deliver .dtag{grid-column:2}}
.pcard-plain{border:1px solid var(--line-2);border-radius:18px;padding:1.4rem;background:rgba(255,255,255,.6);display:grid;gap:.8rem;align-content:start}
.plain{margin:0;padding-left:1.1rem;display:grid;gap:.45rem;color:var(--ink-2)}


/* v14: credenciales heredadas de Levisoft, distribución del sitio original (ratings a la izquierda, certificación y partners a la derecha), paleta clara con tinta azul marino y acento naranja Levisoft */
.levi-cred-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,4.5rem);align-items:start;background:#fff;border:1px solid var(--line-2);border-radius:26px;padding:clamp(1.6rem,4vw,3rem);box-shadow:0 30px 60px -45px rgba(21,23,28,.35)}
.rating-card{display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--ink);border-radius:18px;overflow:hidden;background:#fff;box-shadow:.45rem .45rem 0 var(--ink)}
.rc-cell{display:grid;justify-items:center;align-content:center;gap:.7rem;padding:clamp(1.6rem,3vw,2.6rem) 1.2rem;text-align:center;color:var(--ink)}
.rc-cell+.rc-cell{border-left:2px solid var(--ink)}
.rc-num{font:800 clamp(2.4rem,4.5vw,3.4rem)/1 var(--f-display);letter-spacing:-.04em;color:var(--ink)}
.stars{display:inline-flex;gap:.25rem;color:var(--sun)}
.stars svg{width:1.45rem;height:1.45rem;filter:drop-shadow(0 1px 0 rgba(21,23,28,.35))}
.rc-cell p{font-size:.88rem;color:var(--ink-2);margin:0;max-width:14rem;line-height:1.4}
.rc-icons{display:inline-flex;gap:.7rem;align-items:center}
.rc-icons img{height:1.4rem;width:auto}
.levi-cred-copy{display:grid;gap:.9rem;color:var(--ink)}
.levi-cred-copy .eyebrow{color:var(--ink-2);display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.lc-tag{background:var(--sun);color:var(--ink);padding:.3rem .55rem;border-radius:6px;border:1.5px solid var(--ink);box-shadow:.2rem .2rem 0 var(--ink);text-transform:uppercase}
.levi-cred-copy h1,.levi-cred-copy h2{font-size:var(--step-3);letter-spacing:-.03em;line-height:1.1}
.levi-cred-copy h1 .sticker,.levi-cred-copy h2 .sticker{font-size:.95em}
.lc-label{display:flex;align-items:center;gap:.6rem;font-size:.95rem;color:var(--ink-2);margin:.4rem 0 0}
.lc-n{font:600 .66rem var(--f-mono);letter-spacing:.08em;color:var(--blue);border:1px solid var(--blue);border-radius:999px;padding:.2rem .45rem}
.lc-mit{height:3.2rem;width:auto;max-width:16rem;object-fit:contain;object-position:left}
.lc-partners{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem 1.2rem}
.lc-partners span{display:grid;place-items:center;min-height:5rem;padding:.6rem .9rem;border:1px solid var(--line-2);border-radius:12px;background:#fff;transition:border-color var(--t) ease,transform var(--t) var(--ease),box-shadow var(--t) ease}
.lc-partners span:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:0 10px 20px -16px rgba(218,41,28,.6)}
.lc-partners img{max-height:3.4rem;max-width:100%;width:auto;object-fit:contain}
.lc-link{justify-self:start;display:inline-flex;align-items:center;gap:.4rem;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1.5px}
.lc-link:hover{color:var(--blue)}
.lc-foot{font-size:.92rem;color:var(--ink-2);margin-top:.4rem;padding-left:.9rem;border-left:3px solid var(--sun)}
@media (max-width:900px){.levi-cred-grid{grid-template-columns:1fr}.lc-partners{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.rating-card{grid-template-columns:1fr}.rc-cell+.rc-cell{border-left:0;border-top:2px solid var(--ink)}}

/* flowmap: legibilidad en móvil */
.flowmap-wrap{position:relative}
@media (max-width:720px){
  .flowmap{min-width:980px}
  .flowmap .t{font-size:21px}
  .flowmap .s{font-size:14px}
  .flowmap .node.out .t{font-size:15px}.flowmap .node.out .s{font-size:12px}
  .flowmap .back-label{font-size:13.5px}
}
.flowmap-hint{display:none;font:500 .7rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-night-2);margin:.4rem 0 .2rem}
@media (max-width:720px){.flowmap-hint{display:block}}

/* v17: CTAs más llamativos. Sombra sólida desplazada (lenguaje de los stickers), degradado, brillo que barre al pasar el cursor, ícono de WhatsApp automático, pulso suave solo en el CTA principal */
.btn{position:relative;overflow:hidden;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),background var(--t-fast) ease,border-color var(--t-fast) ease}
.btn-primary{background:linear-gradient(180deg,#F04A3D,var(--blue) 55%,#B8221A);border-color:#8F1A12;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),.3rem .3rem 0 var(--ink)}
.btn-primary:hover{background:linear-gradient(180deg,#F55A4D,#E6372A 55%,#DA291C);transform:translate(-2px,-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),.5rem .5rem 0 var(--ink)}
.btn-primary:active{transform:translate(1px,1px) scale(.99);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),.15rem .15rem 0 var(--ink)}
.btn-primary::after,.btn-sun::after{content:"";position:absolute;top:-40%;bottom:-40%;left:-30%;width:28%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg) translateX(-200%);pointer-events:none}
.btn-primary:hover::after,.btn-sun:hover::after{animation:sheen .9s var(--ease) 1}
@keyframes sheen{to{transform:skewX(-18deg) translateX(600%)}}
.btn-sun{background:linear-gradient(180deg,#FFD966,var(--sun) 55%,#F2B100);color:var(--ink);border-color:var(--ink);box-shadow:.3rem .3rem 0 var(--ink)}
.btn-sun:hover{transform:translate(-2px,-2px);box-shadow:.5rem .5rem 0 var(--ink);background:linear-gradient(180deg,#FFDE7A,#FFD04A 55%,#FFC72C)}
.btn-sun:active{transform:translate(1px,1px);box-shadow:.15rem .15rem 0 var(--ink)}
.btn-light{box-shadow:.3rem .3rem 0 rgba(0,0,0,.45)}
.btn-light:hover{transform:translate(-2px,-2px);box-shadow:.5rem .5rem 0 rgba(0,0,0,.45)}
.btn .wa-ic{width:1.15em;height:1.15em;flex:none;margin-left:-.15em}
.hd .hd-cta{box-shadow:inset 0 1px 0 rgba(255,255,255,.28),.2rem .2rem 0 var(--ink)}
.hd .hd-cta:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.28),.3rem .3rem 0 var(--ink)}
/* pulso de atención: solo el CTA principal del hero y de la tarjeta final */
.btn-pulse{animation:ctapulse 2.6s ease-out infinite}
@keyframes ctapulse{0%{outline:0 solid rgba(218,41,28,.45);outline-offset:0}60%{outline:10px solid rgba(218,41,28,0);outline-offset:10px}100%{outline:0 solid rgba(218,41,28,0);outline-offset:0}}
.btn-pulse:hover{animation:none}
.cta-sub{display:flex;align-items:center;gap:.5rem;font-size:.86rem;color:var(--ink-2);margin-top:.1rem}
.cta-sub .ok{width:1rem;height:1rem;border-radius:50%;background:var(--paid);color:#fff;display:grid;place-items:center;font-size:.6rem;font-weight:700;flex:none}
.night .cta-sub{color:var(--on-night-2)}
@media (prefers-reduced-motion:reduce){.btn-pulse{animation:none}.btn-primary:hover::after,.btn-sun:hover::after{animation:none}.btn-primary:hover,.btn-sun:hover,.btn-light:hover{transform:none}}
.night .btn-sun,.glass-dark .btn-sun,.flowdemo .btn-sun,.post-cta.night-card .btn-sun{box-shadow:.3rem .3rem 0 rgba(244,243,238,.9);border-color:var(--ink)}
.night .btn-sun:hover,.glass-dark .btn-sun:hover,.flowdemo .btn-sun:hover,.post-cta.night-card .btn-sun:hover{box-shadow:.5rem .5rem 0 rgba(244,243,238,.9)}

/* v18: verde WhatsApp en todo botón que abre WhatsApp; botón flotante rediseñado; barra fija en móvil */
:root{--wa:#25D366;--wa-deep:#128C7E;--wa-ink:#0B3D2E}
.btn[data-wa]{background:linear-gradient(180deg,#3CE37A,var(--wa) 50%,#1DB954);color:#07331F;border-color:var(--wa-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),.3rem .3rem 0 var(--ink);text-shadow:0 1px 0 rgba(255,255,255,.25)}
.btn[data-wa]:hover{background:linear-gradient(180deg,#4BEB86,#2FDB70 50%,#25D366);transform:translate(-2px,-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),.5rem .5rem 0 var(--ink)}
.btn[data-wa]:active{transform:translate(1px,1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),.15rem .15rem 0 var(--ink)}
.btn[data-wa]::after{content:"";position:absolute;top:-40%;bottom:-40%;left:-30%;width:28%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg) translateX(-200%);pointer-events:none}
.btn[data-wa]:hover::after{animation:sheen .9s var(--ease) 1}
.night .btn[data-wa],.glass-dark .btn[data-wa],.flowdemo .btn[data-wa],.post-cta.night-card .btn[data-wa]{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),.3rem .3rem 0 rgba(244,243,238,.9)}
.night .btn[data-wa]:hover,.glass-dark .btn[data-wa]:hover,.flowdemo .btn[data-wa]:hover,.post-cta.night-card .btn[data-wa]:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),.5rem .5rem 0 rgba(244,243,238,.9)}
.btn-pulse{animation:ctapulse-wa 2.6s ease-out infinite}
@keyframes ctapulse-wa{0%{outline:0 solid rgba(37,211,102,.55);outline-offset:0}60%{outline:10px solid rgba(37,211,102,0);outline-offset:10px}100%{outline:0 solid rgba(37,211,102,0);outline-offset:0}}
.hd .hd-cta[data-wa]{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),.2rem .2rem 0 var(--ink)}
/* flotante */
.wa-float{background:linear-gradient(180deg,#3CE37A,var(--wa) 50%,#1DB954)!important;color:#07331F!important;border:1.5px solid var(--wa-ink)!important;border-radius:16px!important;padding:.85rem 1.15rem .85rem 1rem!important;font-weight:700!important;box-shadow:.3rem .3rem 0 var(--ink),0 18px 40px -18px rgba(37,211,102,.7)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)!important}
.wa-float svg{width:24px!important;height:24px!important;filter:drop-shadow(0 1px 0 rgba(255,255,255,.3))}
.wa-float:hover{transform:translate(-2px,-2px);box-shadow:.5rem .5rem 0 var(--ink),0 22px 44px -18px rgba(37,211,102,.8)!important}
.wa-float::before{content:"";position:absolute;inset:-6px;border-radius:22px;border:2px solid rgba(37,211,102,.6);animation:waring 2.4s ease-out infinite;pointer-events:none}
@keyframes waring{0%{transform:scale(.96);opacity:.9}70%{transform:scale(1.18);opacity:0}100%{transform:scale(1.18);opacity:0}}
.wa-float::after{background:var(--blue)!important;border:2px solid #fff!important}
/* barra fija en móvil */
.mbar{display:none}
@media (max-width:640px){
  .wa-float{display:none!important}
  body{padding-bottom:calc(5.4rem + env(safe-area-inset-bottom,0px))}
  .mbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;gap:.25rem;justify-items:center;padding:.6rem max(12px,env(safe-area-inset-left,0px)) calc(.6rem + env(safe-area-inset-bottom,0px));background:rgba(244,243,238,.94);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);border-top:1px solid var(--line-2);box-shadow:0 -12px 30px -20px rgba(21,23,28,.35)}
  .mbar .btn{width:100%;font-size:1.02rem;padding:.95rem 1rem;justify-content:center}
  .mbar .btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),.25rem .25rem 0 var(--ink)}
  .mbar-sub{font-size:.72rem;color:var(--ink-2)}
}
@media (prefers-reduced-motion:reduce){.wa-float::before{animation:none;opacity:0}.btn[data-wa]:hover::after{animation:none}}

/* v20: solo comida · rojo intenso, iconos y temas de demo (pizza, helado, restaurante, bar, franquicia) */
.fi{display:inline-grid;place-items:center;width:1.25rem;height:1.25rem;margin-right:.4rem;vertical-align:-.3em}
.fi svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tabs.food-tabs button{display:inline-flex;align-items:center;gap:.1rem}
.niches.food{grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:1rem;background:transparent}
.niche.food{border:2px solid var(--ink);border-radius:20px;background:var(--surface);box-shadow:.35rem .35rem 0 var(--ink);transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.niche.food:hover{transform:translate(-.15rem,-.15rem);box-shadow:.5rem .5rem 0 var(--blue);background:var(--surface)}
.niche .ni{width:3.4rem;height:3.4rem;border-radius:14px;display:grid;place-items:center;background:var(--sun);border:2px solid var(--ink);margin-bottom:.3rem;color:var(--ink)}
.niche .ni svg{width:1.9rem;height:1.9rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.niche.food:nth-child(2n) .ni{background:var(--blue);color:#fff}
.niche.food:nth-child(3n) .ni{background:var(--ink);color:var(--sun)}
.foodbg{position:relative;isolation:isolate}
.foodbg::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.07;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240' fill='none' stroke='%23DA291C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 20l40 70H-10z'/%3E%3Ccircle cx='28' cy='58' r='4'/%3E%3Ccircle cx='42' cy='72' r='4'/%3E%3Cpath d='M150 60a16 16 0 1 1 32 0M148 60h36l-18 36z'/%3E%3Cpath d='M60 160h60a30 30 0 0 0-60 0zM56 172h68M60 184h60l-6 12H66z'/%3E%3Cpath d='M170 150h40l-4 40h-32zM190 190v20M180 210h20'/%3E%3Cpath d='M30 110c0 12 8 20 20 20s20-8 20-20'/%3E%3Cpath d='M120 20h20v20h-20zM120 50h20v20h-20zM150 20h20v20h-20z'/%3E%3C/svg%3E") 0 0/240px 240px}
.hubs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:1rem}
.cover.r-restaurantes{background:var(--blue);color:#fff}.cover.r-general{background:var(--sun);color:var(--ink)}
.offer{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:1.5rem;align-items:start}
.offer-card{position:relative;background:var(--surface);border:2px solid var(--ink);border-radius:24px;padding:clamp(1.4rem,3vw,2.2rem);box-shadow:.6rem .6rem 0 var(--blue);display:grid;gap:1.1rem}
.offer-card .tag{position:absolute;top:-.8rem;left:1.4rem;background:var(--sun);color:var(--ink);font:600 .72rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:.45rem .7rem;border-radius:999px;border:2px solid var(--ink)}
.offer-price{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr));gap:1rem;border-top:1px dashed var(--line-2);border-bottom:1px dashed var(--line-2);padding:1rem 0}
.offer-price div{display:grid;gap:.15rem}
.offer-price small{font:500 .68rem/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.offer-price b{font:800 clamp(1.6rem,3vw,2.2rem)/1 var(--f-display);letter-spacing:-.04em}
.offer-price b s{font-size:.55em;color:var(--ink-3);font-weight:500;letter-spacing:0;margin-left:.3rem}
.offer-price span{font-size:.86rem;color:var(--ink-2)}
.offer-price .hot b{color:var(--blue)}
.offer ul.inc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:.5rem .9rem;font-size:.95rem}
.offer ul.inc li{display:grid;grid-template-columns:1.3rem 1fr;gap:.5rem;align-items:start}
.offer ul.inc li::before{content:"✓";width:1.3rem;height:1.3rem;border-radius:50%;background:var(--paid);color:#fff;font:700 .75rem/1.3rem var(--f-body);text-align:center}
.rebate{display:grid;gap:.9rem;background:var(--ink);color:var(--paper);border-radius:24px;padding:clamp(1.4rem,3vw,2rem)}
.rebate .eyebrow{color:var(--sun)}
.rebate h3{font-size:var(--step-2);color:#fff}
.rebate p{color:var(--on-night-2)}
.rebate .steps{display:grid;gap:.6rem;counter-reset:r}
.rebate .steps div{display:grid;grid-template-columns:2rem 1fr;gap:.7rem;align-items:start;font-size:.95rem;color:#fff}
.rebate .steps div::before{counter-increment:r;content:counter(r);width:2rem;height:2rem;border-radius:50%;background:var(--sun);color:var(--ink);font:800 .95rem/2rem var(--f-display);text-align:center}
.rebate .steps small{display:block;color:var(--on-night-2);font-size:.82rem}
.rebate .ej{border-top:1px solid rgba(255,255,255,.14);padding-top:.9rem;display:grid;gap:.3rem;font-size:.9rem}
.rebate .ej b{color:var(--sun)}
.rebate .ej div{display:flex;justify-content:space-between;gap:1rem;color:#fff}
.rebate .ej div span:first-child{color:var(--on-night-2)}
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:1rem;margin-top:1.5rem}
.tier{background:var(--surface);border:1px solid var(--line-2);border-radius:20px;padding:1.4rem;display:grid;gap:.6rem;align-content:start}
.tier.main{border:2px solid var(--ink);box-shadow:.4rem .4rem 0 var(--sun)}
.tier .k{font:500 .7rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.tier h3{font-size:var(--step-1)}
.tier .pr{font:800 1.5rem/1 var(--f-display);letter-spacing:-.03em}.tier .pr small{font:500 .82rem var(--f-body);color:var(--ink-3);letter-spacing:0}
.tier p{color:var(--ink-2);font-size:.93rem}
.tier ul{margin:0;padding-left:1.1rem;color:var(--ink-2);font-size:.9rem;display:grid;gap:.25rem}
.qrkit{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:center;background:var(--surface);border:2px dashed var(--ink);border-radius:20px;padding:1.2rem}
.qrkit .qr{width:5.5rem;height:5.5rem;display:grid;grid-template-columns:repeat(9,1fr);gap:1px;background:#fff;padding:.35rem;border-radius:8px;border:1px solid var(--line-2)}
.qrkit .qr i{background:var(--ink);display:block;border-radius:1px}.qrkit .qr i.o{background:transparent}
.qrkit b{font-size:1.05rem}.qrkit p{color:var(--ink-2);font-size:.92rem}
.mesa-tag{display:inline-flex;align-items:center;gap:.4rem;background:var(--sun);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:.3rem .7rem;font:700 .78rem var(--f-display)}
.o-com{display:grid;gap:.45rem;font-size:.84rem;color:var(--on-night-2)}
.o-com-row{display:flex;justify-content:space-between;gap:.8rem;align-items:center;flex-wrap:wrap;padding:.4rem 0;border-bottom:1px solid rgba(255,255,255,.08)}
.o-com-row>b{color:var(--sun);font-size:.95rem}
.o-com-row span b{color:#fff}
.o-com-row.alt{border-bottom:0;flex-wrap:wrap;gap:.4rem .6rem}
.o-dot.cash{background:var(--sun)}
.o-amt.cash-amt{color:var(--sun)}
.o-row small em{font-style:normal;color:var(--sun)}
.ms-card-b em s{font-size:.78em;opacity:.55;font-weight:500;margin-left:.2rem}
.mocksite .mcta.ms-qr{background:#111;color:#fff}
.ms-band{display:flex;justify-content:space-between;align-items:center;gap:1.2rem;padding:1.4rem 1.6rem;background:#111;color:#fff;flex-wrap:wrap;position:relative;isolation:isolate}
.ms-band small{font:600 .66rem var(--ff);letter-spacing:.1em;text-transform:uppercase;color:#FFC72C}
.ms-band h4{font:700 1.15rem/1.2 var(--fd);margin:.2rem 0 0;max-width:30rem}
.ms-band .mcta{background:#FFC72C;color:#111}
/* Pizza: red + yellow (ya en la paleta del sitio) */
.ms-pizza{--hero-bg:#DA291C}.ms-pizza .ms-nav{--nav-bg:#DA291C}.ms-pizza .ms-split{background:#DA291C}
.ms-pizza .ms-btn,.ms-pizza .mcta,.ms-pizza .ms-split .mcta{background:#FFC72C;color:#111}.ms-pizza .ms-card-b em{color:#DA291C}
.ms-pizza .ms-grid .ms-ph{box-shadow:0 0 0 .55rem #FFC72C,0 0 0 .7rem #DA291C}
/* Helado: pastel rosa y menta, redondo, juguetón */
.ms-helado{--acc:#FF5C8A;--acc2:#FFE3EC;--fd:"Sora",var(--f-display);--r:999px;--rc:22px;--hero-bg:#FFE3EC;--hero-fg:#3B1E2B;--paper2:#FFF8FA}
.ms-helado .ms-top{background:#3B1E2B;color:#FFE3EC}
.ms-helado .ms-nav{--nav-bg:#FFF8FA;--nav-fg:#3B1E2B}
.ms-helado .ms-logo{font:800 1.1rem var(--fd);color:#FF5C8A}
.ms-helado .ms-btn{background:#FF5C8A;color:#fff}
.ms-helado .ms-hero{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
.ms-helado .ms-hero-img{border-radius:0 0 0 50%;margin:1rem 1rem 0 0;min-height:14rem}
.ms-helado .ms-copy small{color:#FF5C8A}
.ms-helado .ms-copy h3{font-weight:800;color:#3B1E2B}
.ms-helado .mcta{background:#FF5C8A;color:#fff}
.ms-helado .ms-ghost{color:#3B1E2B}
.ms-helado .ms-items{--items-bg:#FFF8FA}
.ms-helado .ms-items-hd h4{color:#3B1E2B;font-weight:800}
.ms-helado .ms-card{--card-bg:#fff;--card-line:#FFD0DE}.ms-helado .ms-card-b em{color:#FF5C8A}
.ms-helado .ms-tag{background:#2EC4B6;border-radius:999px}
.ms-flavors{padding:1.4rem 1.6rem 1.6rem;background:#fff}
.ms-flavor-grid{display:flex;flex-wrap:wrap;gap:.5rem}
.ms-flavor-grid .fl{font:700 .78rem var(--fd);padding:.55rem .95rem;border-radius:999px;color:#3B1E2B;background:#FFE3EC}
.fl-1{background:#FFF1C9}.fl-2{background:#D7F5F0}.fl-3{background:#E9E2FF}.fl-4{background:#FFDCC8}.fl-5{background:#DFF5D0}
.ms-split.helado{background:#2EC4B6;color:#0f2f2b}
.ms-split.helado small{color:#0f2f2b}.ms-split.helado h4{font-weight:800}.ms-split.helado .mcta{background:#0f2f2b;color:#fff;justify-self:start}
.ms-split.helado .ms-split-img{border-radius:0 50% 50% 0}
/* Restaurante: editorial cálido, serif, carta del día */
.ms-rest{--acc:#8A3B1E;--acc2:#F1E5D6;--fd:"Cormorant Garamond",Georgia,serif;--r:4px;--rc:6px;--hero-fg:#fff;--paper2:#FBF7F1}
.ms-rest .ms-top{background:#2B1D14;color:#F1E5D6}
.ms-rest .ms-nav{--nav-bg:#FBF7F1;--nav-fg:#2B1D14;border-bottom:1px solid #E6D9C7}
.ms-rest .ms-logo{font:700 1.2rem var(--fd);letter-spacing:.02em}
.ms-rest .ms-btn{background:#8A3B1E;color:#fff}
.ms-rest .ms-hero{grid-template-columns:1fr;min-height:19rem}
.ms-rest .ms-hero-img{position:absolute;inset:0;z-index:0}
.ms-rest .ms-hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,12,6,.2),rgba(20,12,6,.7))}
.ms-rest .ms-copy{max-width:36rem;padding:2.2rem 1.6rem 1.6rem}
.ms-rest .ms-copy small{color:#F1C27D}
.ms-rest .ms-copy h3{font:700 clamp(1.7rem,3vw,2.5rem)/1.05 var(--fd);letter-spacing:0}
.ms-rest .mcta{background:#8A3B1E;color:#fff}
.ms-rest .ms-ghost{color:#fff}
.ms-rest .ms-items{--items-bg:#FBF7F1}
.ms-rest .ms-items-hd h4{font:700 1.4rem var(--fd)}
.ms-rest .ms-card{--card-bg:#fff;--card-line:#E6D9C7}.ms-rest .ms-card-b b{font:700 1.05rem var(--fd)}.ms-rest .ms-card-b em{color:#8A3B1E}
.ms-rest .ms-tag{background:#8A3B1E;border-radius:2px}
.ms-menu{padding:1.4rem 1.6rem 1.6rem;background:#fff}
.ms-menu .ms-items-hd h4{font:700 1.3rem var(--fd)}
.ms-menu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.ms-menu-grid div{border:1px solid #E6D9C7;padding:.7rem .9rem;display:grid;gap:.15rem;font-size:.76rem;background:#FBF7F1}
.ms-menu-grid b{font:700 .95rem var(--fd);color:#8A3B1E}.ms-menu-grid span{opacity:.75}
.ms-band.rest{background:center/cover}.ms-band.rest::before{content:"";position:absolute;inset:0;background:rgba(43,29,20,.78);z-index:-1}
.ms-band.rest h4{font:700 1.35rem var(--fd)}.ms-band.rest small{color:#F1C27D}.ms-band.rest .mcta{background:#F1C27D;color:#2B1D14}
/* Bar y café: oscuro, ámbar, neón suave */
.ms-bar{--acc:#F2A900;--acc2:#F2A900;--fd:"Gilda Display",Georgia,serif;--r:3px;--rc:8px;--hero-fg:#fff;--paper2:#0F0E0C}
.ms-bar .ms-top{background:#F2A900;color:#0F0E0C}
.ms-bar .ms-nav{--nav-bg:#0F0E0C;--nav-fg:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.ms-bar .ms-logo{font:400 1.2rem var(--fd);letter-spacing:.08em;text-transform:uppercase;color:#F2A900}
.ms-bar .ms-nav nav{text-transform:uppercase;letter-spacing:.08em;font-size:.68rem}
.ms-bar .ms-btn{background:#F2A900;color:#0F0E0C}
.ms-bar .ms-hero{grid-template-columns:1fr;min-height:19rem}
.ms-bar .ms-hero-img{position:absolute;inset:0;z-index:0}
.ms-bar .ms-hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,14,12,.92),rgba(15,14,12,.35))}
.ms-bar .ms-copy{max-width:34rem;padding:2.2rem 1.6rem 1.6rem}
.ms-bar .ms-copy small{color:#F2A900;letter-spacing:.14em}
.ms-bar .ms-copy h3{font:400 clamp(1.7rem,3vw,2.5rem)/1.05 var(--fd);letter-spacing:0;text-shadow:0 0 24px rgba(242,169,0,.35)}
.ms-bar .mcta{background:#F2A900;color:#0F0E0C}
.ms-bar .mcta.ms-qr{background:#fff;color:#0F0E0C}
.ms-bar .ms-ghost{color:#fff}
.ms-bar .ms-items{--items-bg:#0F0E0C;--items-fg:#fff}
.ms-bar .ms-items-hd h4{font:400 1.4rem var(--fd);color:#F2A900}
.ms-bar .ms-card{--card-bg:#1A1815;--card-line:rgba(255,255,255,.1);color:#fff}.ms-bar .ms-card-b em{color:#F2A900}
.ms-bar .ms-tag{background:#F2A900;color:#0F0E0C}
.ms-hours{padding:0 1.6rem 1.6rem;background:#0F0E0C}
.ms-hours-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.ms-hour{position:relative;aspect-ratio:4/3;border-radius:8px;background:center/cover;color:#fff;display:grid;align-content:end;padding:.9rem;isolation:isolate;overflow:hidden}
.ms-hour::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.8));z-index:-1}
.ms-hour b{font:400 1.05rem var(--fd);color:#F2A900}.ms-hour span{font-size:.72rem;opacity:.85}
.ms-band.bar{background:#1A1815;border-top:1px solid rgba(255,255,255,.08)}.ms-band.bar h4{font:400 1.3rem var(--fd)}
/* Franquicia: rojo y amarillo, bloques, uppercase pesado */
.ms-franq{--acc:#DA291C;--acc2:#FFC72C;--fd:"Rubik",var(--f-display);--r:8px;--rc:12px;--hero-bg:#FFC72C;--hero-fg:#1a1a1a;--paper2:#fff}
.ms-franq .ms-top{background:#DA291C;color:#fff}
.ms-franq .ms-nav{--nav-bg:#fff;--nav-fg:#1a1a1a}
.ms-franq .ms-logo{font:900 1.15rem var(--fd);color:#DA291C;text-transform:uppercase;letter-spacing:-.02em}
.ms-franq .ms-btn{background:#DA291C;color:#fff}
.ms-franq .ms-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.ms-franq .ms-hero-img{clip-path:polygon(12% 0,100% 0,100% 100%,0 100%)}
.ms-franq .ms-copy small{color:#DA291C}
.ms-franq .ms-copy h3{text-transform:uppercase;font-weight:900;letter-spacing:-.01em}
.ms-franq .mcta{background:#DA291C;color:#fff}
.ms-franq .ms-ghost{color:#1a1a1a}
.ms-franq .ms-items{--items-bg:#fff}
.ms-franq .ms-items-hd h4{text-transform:uppercase;font-weight:900}
.ms-franq .ms-card{--card-bg:#FFF6D6;--card-line:#FFC72C}.ms-franq .ms-card-b b{font-weight:800}.ms-franq .ms-card-b em{color:#DA291C;font-size:1rem}
.ms-franq .ms-tag{background:#DA291C}
.ms-stores{padding:1.4rem 1.6rem 1.6rem;background:#F6F6F6}
.ms-stores .ms-items-hd h4{text-transform:uppercase;font-weight:900}
.ms-stores-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem}
.ms-stores-grid div{background:#fff;border:2px solid #1a1a1a;border-radius:10px;padding:.8rem .9rem;display:grid;gap:.1rem;font-size:.74rem;box-shadow:.25rem .25rem 0 #DA291C}
.ms-stores-grid i{font:900 .7rem var(--fd);font-style:normal;color:#DA291C}.ms-stores-grid b{font-weight:800;font-size:.9rem}.ms-stores-grid span{opacity:.7}
.ms-band.franq{background:#DA291C}.ms-band.franq small{color:#FFC72C}.ms-band.franq h4{font-weight:900;text-transform:uppercase}
@media (max-width:720px){.ms-helado .ms-hero,.ms-franq .ms-hero{grid-template-columns:1fr}.ms-helado .ms-hero-img{border-radius:0;margin:0;min-height:10rem;order:-1}.ms-franq .ms-hero-img{clip-path:none}.ms-menu-grid,.ms-hours-grid{grid-template-columns:1fr 1fr}.ms-stores-grid{grid-template-columns:1fr 1fr}.offer{grid-template-columns:1fr}.qrkit{grid-template-columns:1fr}}
.seal2.alt .big{font-size:22px}.seal2.alt .inner{fill:var(--sun)}
.cover.r-pizzerias{background:var(--blue);color:#fff}.cover.r-heladerias{background:#FFD6E0;color:var(--ink)}.cover.r-bares{background:var(--ink);color:var(--sun)}.cover.r-franquicias{background:var(--sun);color:var(--ink)}.cover.r-restaurantes{background:#8A3B1E;color:#fff}.cover.r-general{background:var(--surface);color:var(--blue)}
.hubs{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}

/* v21: menú web dentro del teléfono (reemplaza al chat) */
.ws{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;font-size:.8rem;background:#fff}
.ws-hd{background:#fff;border-bottom:1px solid var(--line);padding:2rem .7rem .55rem}
.ws-url{display:flex;align-items:center;gap:.4rem;font:500 .62rem var(--f-mono);color:var(--ink-3);background:#F1F1F1;border-radius:999px;padding:.3rem .6rem;margin-bottom:.5rem}
.ws-url i{width:.5rem;height:.5rem;border-radius:50%;background:var(--paid)}
.ws-brand{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.ws-brand b{font:800 .95rem var(--f-display);letter-spacing:-.02em}
.ws-chip{font:600 .62rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase;background:var(--paper);border:1px solid var(--line-2);border-radius:999px;padding:.25rem .5rem;white-space:nowrap}
.ws-chip.mesa{background:var(--sun);border-color:var(--ink)}
.ws-cats{display:flex;gap:.3rem;padding:.5rem .6rem;overflow-x:auto;scrollbar-width:none;flex:none}
.ws-cats::-webkit-scrollbar{display:none}
.ws-cats button{flex:none;font:600 .7rem var(--f-body);padding:.35rem .65rem;border-radius:999px;border:1px solid var(--line-2);background:#fff;color:var(--ink);cursor:pointer}
.ws-cats button[aria-pressed="true"]{background:var(--blue);color:#fff;border-color:var(--blue)}
.ws-list{flex:1;overflow-y:auto;padding:0 .6rem .6rem;display:grid;gap:.45rem;align-content:start;scrollbar-width:none}
.ws-list::-webkit-scrollbar{display:none}
.ws-item{display:grid;grid-template-columns:3rem minmax(0,1fr) auto;gap:.5rem;align-items:center;border:1px solid var(--line);border-radius:12px;padding:.45rem;background:#fff}
.ws-item.out{opacity:.5}
.ws-ph{width:3rem;height:3rem;border-radius:9px;background:linear-gradient(160deg,color-mix(in srgb,var(--tint,#C9B38A) 60%,#fff),var(--tint,#C9B38A))}
.ws-it{display:grid;gap:.1rem;min-width:0}
.ws-it b{font-size:.8rem;font-weight:600;line-height:1.15}.ws-it small{color:var(--ink-3);font-size:.68rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-it select{font:500 .68rem var(--f-body);padding:.2rem .3rem;border-radius:6px;border:1px solid var(--line-2);background:#fff;max-width:100%}
.ws-pr{font:600 .76rem var(--f-mono);color:var(--blue)}.ws-pr s{color:var(--ink-3);font-weight:400;font-size:.68rem}
.ws-add{width:2rem;height:2rem;border-radius:50%;border:0;background:var(--blue);color:#fff;font:700 1.1rem/1 var(--f-display);cursor:pointer;transition:transform var(--t-fast) var(--ease)}
.ws-add:active{transform:scale(.9)}.ws-add:disabled{background:var(--line-2);cursor:default}
.ws-bar{flex:none;padding:.5rem .6rem .9rem;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 30%)}
.ws-bar button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:.5rem;font:600 .78rem var(--f-body);padding:.65rem .8rem;border-radius:12px;border:0;background:var(--ink);color:#fff;cursor:pointer;box-shadow:0 10px 24px -12px rgba(0,0,0,.6)}
.ws-bar.empty button{background:var(--paper);color:var(--ink-3);box-shadow:none;border:1px dashed var(--line-2)}
.ws-cart{flex:1;overflow-y:auto;padding:.6rem .7rem .9rem;display:grid;gap:.55rem;align-content:start;scrollbar-width:none}
.ws-cart::-webkit-scrollbar{display:none}
.ws-cart h4{font:800 1rem var(--f-display);margin:0;letter-spacing:-.02em}
.ws-back{justify-self:start;font:600 .72rem var(--f-body);background:transparent;border:0;color:var(--blue);cursor:pointer;padding:0}
.ws-lines{display:grid;gap:.3rem}
.ws-lines div{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.4rem;align-items:center;font-size:.76rem}
.ws-lines b{font:600 .74rem var(--f-mono)}
.ws-rm{width:1.4rem;height:1.4rem;border-radius:50%;border:1px solid var(--line-2);background:#fff;cursor:pointer;font-size:.9rem;line-height:1}
.ws-field{display:grid;gap:.2rem}.ws-field span{font:600 .62rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.ws-field input,.ws-field select{font:500 .76rem var(--f-body);padding:.45rem .55rem;border-radius:8px;border:1px solid var(--line-2);background:#fff;width:100%}
.ws-tot{display:flex;justify-content:space-between;font-size:.76rem;color:var(--ink-2)}.ws-tot.big{border-top:1px dashed var(--line-2);padding-top:.4rem;font-size:.9rem;color:var(--ink)}.ws-tot.big b{font:800 1rem var(--f-display)}
.ws-pay{width:100%;font:700 .82rem var(--f-body);padding:.7rem .8rem;border-radius:12px;border:0;background:var(--paid);color:#fff;cursor:pointer;box-shadow:0 10px 24px -12px rgba(15,122,75,.7)}
.ws-fine{color:var(--ink-3);font-size:.66rem;line-height:1.35;text-align:center}
.ws-center{text-align:center;justify-items:center;align-content:center}
.ws-amt{font:800 1.6rem var(--f-display);letter-spacing:-.03em}
.ws-wait{display:inline-flex;gap:.25rem}.ws-wait i{width:.4rem;height:.4rem;border-radius:50%;background:var(--ink-3);animation:dot 1s infinite}.ws-wait i:nth-child(2){animation-delay:.15s}.ws-wait i:nth-child(3){animation-delay:.3s}
.ws-ok{width:3rem;height:3rem;border-radius:50%;background:var(--paid);color:#fff;display:grid;place-items:center;font:700 1.4rem var(--f-display);animation:pop var(--t-slow) var(--ease)}
.ws-done p{margin:0;font-size:.78rem;color:var(--ink-2)}.ws-eta{color:var(--ink)!important;font-weight:600}
.ws-opt{display:grid;grid-template-columns:auto 1fr;gap:.45rem;align-items:start;text-align:left;font-size:.7rem;color:var(--ink-2);background:var(--paper);border-radius:10px;padding:.5rem .6rem;width:100%}
.ws-opt input{margin-top:.15rem;accent-color:var(--paid)}
.ws-review{font-size:.72rem;color:var(--ink-2);border-top:1px dashed var(--line-2);padding-top:.5rem;width:100%}.ws-review b{color:var(--ink)}
.screen .ws .qr{width:7.5rem}
/* diagramas de flujo (mesa / delivery y recojo) */
.flows-tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.2rem}
.fc{display:none}.fc[data-on]{display:grid}
/* paneles del dueño: motivo de la comisión */
.o-row small em.why{color:var(--on-night-2)}

/* v22: landing premium dentro del teléfono + sin saltos de altura */
.screen .ws{position:absolute;inset:0;height:auto}
.phone{width:19.5rem}@media (max-width:420px){.phone{width:100%}}
.ws-hd.slim{padding:1.9rem .7rem .45rem;border-bottom:0}
.ws-land{flex:1;display:flex;flex-direction:column;overflow:hidden;--acc:#DA291C;--acc2:#FFC72C;--land-fg:#fff}
.ws-lh{position:relative;flex:1;min-height:11rem;background:var(--acc);color:var(--land-fg);padding:1rem .9rem .9rem;display:grid;align-content:end;gap:.3rem;isolation:isolate;overflow:hidden}
.ws-lph{position:absolute;right:-22%;top:-8%;width:78%;aspect-ratio:1;border-radius:50%;background:var(--img) center/cover;border:6px solid rgba(255,255,255,.15);box-shadow:0 20px 40px -18px rgba(0,0,0,.7);z-index:-1}
.ws-lh small{font:600 .6rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.ws-lh h3{font:800 1.25rem/1.05 var(--f-display);letter-spacing:-.025em;margin:0;text-transform:uppercase;max-width:11rem;text-shadow:0 2px 12px rgba(0,0,0,.25)}
.ws-go{justify-self:start;font:700 .78rem var(--f-body);padding:.55rem .85rem;border-radius:8px;border:0;background:var(--acc2);color:#111;cursor:pointer;margin-top:.3rem;box-shadow:0 8px 18px -10px rgba(0,0,0,.6)}
.ws-lf{background:#fff;padding:.7rem .7rem .4rem;display:grid;gap:.45rem}
.ws-lf>b{font:800 .85rem var(--f-display)}
.ws-lgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem}
.ws-lcard{display:grid;gap:.15rem;justify-items:center;text-align:center;cursor:pointer}
.ws-lph2{width:100%;aspect-ratio:1;border-radius:50%;background:center/cover;box-shadow:0 0 0 .3rem var(--acc2),0 0 0 .45rem var(--acc)}
.ws-lcard b{font-size:.66rem;font-weight:700;line-height:1.1;margin-top:.35rem}.ws-lcard em{font:700 .7rem var(--f-mono);font-style:normal;color:var(--acc)}
.ws-lbadge{background:#fff;font:500 .62rem var(--f-mono);color:var(--ink-3);text-align:center;padding:.2rem .5rem .8rem}
.ws.th-helado .ws-land{--acc:#FF5C8A;--acc2:#2EC4B6;--land-fg:#3B1E2B}.ws.th-helado .ws-lh{background:#FFE3EC}.ws.th-helado .ws-lh h3{text-transform:none;text-shadow:none}.ws.th-helado .ws-go{color:#fff}
.ws.th-rest .ws-land{--acc:#8A3B1E;--acc2:#F1C27D}.ws.th-rest .ws-lh{background:#2B1D14}.ws.th-rest .ws-lh h3{text-transform:none;font-weight:700}
.ws.th-bar .ws-land{--acc:#F2A900;--acc2:#F2A900}.ws.th-bar .ws-lh{background:#0F0E0C}.ws.th-bar .ws-lh h3{text-transform:none;font-weight:600}.ws.th-bar .ws-lf,.ws.th-bar .ws-lbadge{background:#1A1815;color:#fff}.ws.th-bar .ws-lf>b{color:#F2A900}
.ws.th-franq .ws-land{--acc:#DA291C;--acc2:#FFC72C;--land-fg:#1a1a1a}.ws.th-franq .ws-lh{background:#FFC72C}.ws.th-franq .ws-lh h3{text-shadow:none}.ws.th-franq .ws-go{background:#DA291C;color:#fff}
.ws.th-pizza .ws-cats button[aria-pressed="true"],.ws.th-pizza .ws-add{background:#DA291C}
.ws.th-helado .ws-cats button[aria-pressed="true"],.ws.th-helado .ws-add,.ws.th-helado .ws-pr{background:#FF5C8A;color:#fff}.ws.th-helado .ws-pr{background:none;color:#FF5C8A}
.ws.th-rest .ws-cats button[aria-pressed="true"],.ws.th-rest .ws-add{background:#8A3B1E}.ws.th-rest .ws-pr{color:#8A3B1E}
.ws.th-bar .ws-cats button[aria-pressed="true"],.ws.th-bar .ws-add{background:#F2A900;color:#111}.ws.th-bar .ws-pr{color:#B07A00}
.ws-ph[style*="background-image"]{background-size:cover;background-position:center}

/* v23: flujos como línea de tiempo numerada + aviso de demo interactiva */
.fl-legend{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.who{display:inline-block;font:600 .64rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;padding:.3rem .55rem;border-radius:999px;border:1px solid transparent}
.who.cliente{background:rgba(255,199,44,.25);color:var(--ink);border-color:rgba(255,199,44,.9)}
.who.sys{background:var(--ink);color:var(--paper)}
.who.local{background:var(--surface);color:var(--ink);border-color:var(--ink)}
.who.wa{background:rgba(37,211,102,.16);color:#117A3F;border-color:rgba(37,211,102,.6)}
.who.end{background:var(--paper-2);color:var(--ink-3);border-color:var(--line-2)}
.fl{list-style:none;margin:0;padding:0;position:relative;gap:.7rem;max-width:56rem}
.fl::before{content:"";position:absolute;left:1.15rem;top:1.4rem;bottom:2.4rem;width:2px;background:linear-gradient(var(--line-2),var(--line-2)) center/2px 100% no-repeat}
.fl>li{position:relative;display:grid;grid-template-columns:2.3rem minmax(0,1fr);gap:.9rem;align-items:start}
.fl-n{width:2.3rem;height:2.3rem;border-radius:50%;background:var(--surface);border:2px solid var(--ink);display:grid;place-items:center;font:800 .9rem var(--f-display);position:relative;z-index:1}
.fl-step>div{background:var(--surface);border:1px solid var(--line-2);border-radius:14px;padding:.8rem 1rem .85rem;display:grid;gap:.3rem;justify-items:start}
.fl-step[data-who="sys"]>div{border-color:var(--ink);box-shadow:.3rem .3rem 0 var(--ink)}
.fl-step[data-who="sys"] .fl-n{background:var(--ink);color:var(--paper)}
.fl-step[data-who="cliente"] .fl-n{background:var(--sun)}
.fl-step b{font-size:.98rem;font-weight:600;line-height:1.3}
.fl-step small{color:var(--ink-2);font-size:.86rem;line-height:1.4}
.fl-step small.wa-line{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap;margin-top:.15rem}
.fl-dec .fl-n{background:var(--blue);color:#fff;border-color:var(--blue)}
.fl-dec>div{background:rgba(218,41,28,.05);border:1.5px dashed var(--blue);border-radius:16px;padding:.8rem 1rem .9rem;display:grid;gap:.6rem}
.fl-dec>div>b{font:700 1rem var(--f-display);color:var(--blue)}
.fl-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:.6rem}
.fl-opts>div{background:var(--surface);border:1px solid var(--line-2);border-radius:12px;padding:.7rem .8rem;display:grid;gap:.35rem;justify-items:start;align-content:start}
.fl-opts>div.hi{border-color:var(--paid);box-shadow:inset 0 0 0 1px var(--paid)}
.fl-opts p{margin:0;font-size:.88rem;color:var(--ink-2);line-height:1.4}
.fl-opts em{font:600 .72rem var(--f-mono);font-style:normal;color:var(--paid);letter-spacing:.03em}
.fl-loop{grid-template-columns:1fr!important;justify-items:center;font:500 .8rem var(--f-mono);letter-spacing:.04em;color:var(--ink-2);border:1.5px dashed var(--line-2);border-radius:999px;padding:.5rem 1rem;margin:.4rem 0 0 2.3rem;text-align:center;display:flex!important;gap:.5rem;align-items:center}
.fl-loop span{color:var(--blue);font-size:1.1rem}
.night .fl::before{background:rgba(255,255,255,.2)}
.night .fl-n{background:var(--night-2);color:#fff;border-color:rgba(255,255,255,.6)}
.night .fl-step[data-who="cliente"] .fl-n{background:var(--sun);color:var(--ink)}
.night .fl-step[data-who="sys"] .fl-n{background:#fff;color:var(--ink);border-color:#fff}
.night .fl-step>div{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff}
.night .fl-step[data-who="sys"]>div{background:#fff;color:var(--ink);border-color:#fff;box-shadow:.3rem .3rem 0 var(--sun)}
.night .fl-step small{color:var(--on-night-2)}.night .fl-step[data-who="sys"] small{color:var(--ink-2)}
.night .fl-dec>div{background:rgba(255,199,44,.08);border-color:var(--sun)}.night .fl-dec>div>b{color:var(--sun)}.night .fl-dec .fl-n{background:var(--sun);color:var(--ink);border-color:var(--sun)}
.night .fl-opts>div{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}.night .fl-opts p{color:var(--on-night-2)}.night .fl-opts em{color:#5FD3B5}.night .fl-opts>div.hi{border-color:#5FD3B5;box-shadow:inset 0 0 0 1px #5FD3B5}
.night .who.cliente{color:#fff}.night .who.local{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}.night .who.sys{background:#fff;color:var(--ink)}.night .who.end{background:transparent;color:var(--on-night-2);border-color:rgba(255,255,255,.3)}.night .who.wa{color:#5FD3B5}
.night .fl-loop{color:var(--on-night-2);border-color:rgba(255,255,255,.25)}.night .fl-loop span{color:var(--sun)}
.night .flows-tabs button{color:#fff;border-color:rgba(255,255,255,.3)}.night .flows-tabs button[aria-pressed="true"]{background:var(--sun);color:var(--ink);border-color:var(--sun)}
/* aviso: la pantalla es interactiva */
.phone-wrap{position:relative;width:19.5rem;margin:1.2rem auto 0}@media (max-width:420px){.phone-wrap{width:100%}}
.phone-wrap .phone{width:100%}
.try-tag{position:absolute;top:-1.1rem;right:-1.2rem;z-index:5;display:flex;align-items:center;gap:.5rem;background:var(--sun);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:.5rem .8rem .5rem .6rem;font:700 .78rem var(--f-display);letter-spacing:-.01em;box-shadow:.25rem .25rem 0 var(--ink);transform:rotate(3deg);animation:trybob 2.4s ease-in-out infinite;pointer-events:none;white-space:nowrap}
.try-tag i{width:.6rem;height:.6rem;border-radius:50%;background:var(--blue);box-shadow:0 0 0 0 rgba(218,41,28,.6);animation:pulse 1.6s infinite;flex:none}
.try-tag svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.try-tag.auto{background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:.25rem .25rem 0 var(--sun);pointer-events:auto;text-decoration:none}
.try-tag.auto i{background:var(--sun);box-shadow:0 0 0 0 rgba(255,199,44,.6)}
@keyframes trybob{0%,100%{transform:rotate(3deg) translateY(0)}50%{transform:rotate(3deg) translateY(-4px)}}
.ws-go{animation:gopulse 1.8s ease-in-out infinite}
@keyframes gopulse{0%,100%{box-shadow:0 8px 18px -10px rgba(0,0,0,.6),0 0 0 0 rgba(255,255,255,.55)}50%{box-shadow:0 8px 18px -10px rgba(0,0,0,.6),0 0 0 8px rgba(255,255,255,0)}}
@media (prefers-reduced-motion:reduce){.try-tag,.ws-go{animation:none}}
@media (max-width:720px){.try-tag{right:.2rem;top:-1.2rem;font-size:.72rem}}

/* ---------- Experiencia ---------- */
.exp-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,5rem);align-items:center;padding-bottom:clamp(2rem,5vw,4rem)}
.exp-hero-copy{display:grid;gap:1.4rem;justify-items:start}
.exp-hero h1{font-size:clamp(2.8rem,1.6rem + 4.6vw,5.6rem);max-width:12ch}
.exp-hero .lede{max-width:30rem}
.exp-fan{position:relative;aspect-ratio:1.18;min-height:0}
.exp-fan .frame{position:absolute;width:74%;transform-origin:50% 100%;transition:transform 900ms cubic-bezier(.23,1,.32,1),box-shadow 900ms ease}
.exp-fan .frame img{aspect-ratio:16/10}
.exp-fan .fan-1{left:0;top:6%;transform:rotate(-6deg) translateY(4%)}
.exp-fan .fan-2{right:0;top:0;transform:rotate(4deg)}
.exp-fan .fan-3{left:11%;top:30%;transform:rotate(-1deg);box-shadow:var(--shadow-lg)}
.exp-fan .fan-4{width:23%;right:2%;bottom:-2%;border-radius:1.2rem;border:3px solid var(--ink);transform:rotate(5deg);box-shadow:var(--shadow-lg)}
.exp-fan .fan-4 img{aspect-ratio:9/19.5}
.exp-fan .fan-2{transition-delay:40ms}.exp-fan .fan-3{transition-delay:80ms}.exp-fan .fan-4{transition-delay:140ms}
.exp-fan.is-closed .frame{transition:none;transform:translate(0,6%) rotate(0deg) scale(.96)}
.exp-fan.is-closed .fan-1,.exp-fan.is-closed .fan-2{transform:translate(8%,12%) rotate(0) scale(.96)}
.exp-fan.is-closed .fan-4{transform:translate(-40%,0) rotate(0)}
.exp-logos{padding-bottom:clamp(1rem,3vw,2rem)}

.exp-case{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:center}
.exp-case+.exp-case{margin-top:clamp(3rem,7vw,6rem)}
.exp-case-rev{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
.exp-case-rev .exp-case-media{order:2}
.exp-case-media{position:relative;display:block;padding-bottom:6%;padding-right:9%;text-decoration:none}
.exp-case-rev .exp-case-media{padding-right:0;padding-left:9%}
.exp-case-media>.frame{transition:transform var(--t-slow) var(--ease)}
.exp-case-phone{position:absolute;right:0;bottom:0;width:24%;border-radius:1.2rem;border:3px solid var(--ink);box-shadow:var(--shadow-lg)}
.exp-case-rev .exp-case-phone{right:auto;left:0}
.exp-case-phone img{aspect-ratio:9/19.5}
@media (hover:hover) and (pointer:fine){.exp-case-media:hover>.frame{transform:translateY(-4px)}}
.exp-case-copy{display:grid;gap:.9rem;justify-items:start}
.exp-case-copy h3{font-size:var(--step-3)}
.exp-case-copy p{margin:0;color:var(--ink-2);max-width:32rem}
.exp-case-fact{font-size:var(--step-1)}
.exp-case-fact b{font-family:var(--f-display);color:var(--ink);letter-spacing:-.02em}

.exp-demo-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.exp-demo-copy{display:grid;gap:1.3rem;justify-items:start}
.exp-demo-copy h2{font-size:var(--step-3);max-width:16ch;line-height:1.02}
.exp-demo-shot{display:block;text-decoration:none;transition:transform var(--t-slow) var(--ease)}
.exp-demo-shot .frame{border-color:rgba(255,255,255,.12)}
@media (hover:hover) and (pointer:fine){.exp-demo-shot:hover{transform:translateY(-4px)}}

.pf-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:clamp(1.5rem,3vw,2.2rem)}
.pf-chip{font:500 .9rem/1 var(--f-body);color:var(--ink-2);background:rgba(255,255,255,.55);border:1px solid var(--line-2);border-radius:999px;padding:.6rem .95rem;cursor:pointer;display:inline-flex;gap:.45rem;align-items:center;transition:background var(--t-fast) ease,color var(--t-fast) ease,border-color var(--t-fast) ease,transform var(--t-fast) var(--ease)}
.pf-chip span{font:500 .75rem/1 var(--f-mono);color:var(--ink-3)}
.pf-chip:hover{border-color:var(--ink);color:var(--ink)}
.pf-chip:active{transform:scale(.97)}
.pf-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pf-chip[aria-pressed="true"] span{color:var(--sun)}
.pf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,2.5vw,2rem) clamp(1rem,2vw,1.6rem)}
.pf-item[hidden]{display:none}
.pf-more{display:none;margin-top:1.4rem;width:100%}
.pf-item .cap{flex-direction:column;align-items:flex-start;gap:.15rem}
.pf-item .cap span{font-size:.84rem}
@media (hover:hover) and (pointer:fine){.pf-item:hover .frame{transform:translateY(-4px);box-shadow:var(--shadow-lg)}}

.exp-nda{grid-template-columns:repeat(3,minmax(0,1fr))}
.exp-nda div{border:0;border-top:2px solid var(--ink);border-radius:0;padding:1rem 0 0;gap:.4rem}
.exp-nda small{color:var(--ink-3)}
.exp-nda b{color:var(--ink);font:700 var(--step-1)/1.2 var(--f-display);letter-spacing:-.02em}
.exp-nda span{color:var(--ink-2)}

@media (max-width:900px){
  .exp-hero{grid-template-columns:1fr}
  .exp-fan{max-width:34rem;width:90%;justify-self:center}
  .exp-case,.exp-case-rev{grid-template-columns:1fr}
  .exp-case-rev .exp-case-media{order:0}
  .exp-demo-grid{grid-template-columns:1fr}
  .pf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .exp-nda{grid-template-columns:1fr}
}
@media (max-width:600px){
  .pf-chips{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:16px;margin-inline:-16px;padding-inline:16px;scrollbar-width:none}
  .pf-chips::-webkit-scrollbar{display:none}
  .pf-chip{flex:none;scroll-snap-align:start}
  .pf-chips{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .pf-grid:not(.is-open) .pf-item:nth-child(n+7){display:none}
  .pf-grid:not(.is-open)~.pf-more{display:flex}
  .pf-grid{grid-template-columns:1fr;gap:.9rem}
  .pf-item{grid-template-columns:44% minmax(0,1fr);align-items:center;gap:.9rem}
  .pf-item .frame-bar{display:none}
  .pf-item .frame{border-radius:10px}
  .pf-item .cap{margin-top:0}
}
@media (prefers-reduced-motion:reduce){.exp-fan .frame{transition:none}}