/* Layout: hero 3D a sangre con un toldo de tela que ondea; después, capítulos fijados al scroll (un día en el negocio, capas de servicios en 3D, calle horizontal de escaparates) y un cierre comercial con anclas de precio honestas. Contenido alineado a la izquierda. */
:root{
  --carbon:#16120F; --crema:#FFF4E6; --papel:#FFFAF3; --butano:#FF5A1F; --cana:#FFC531;
  --botica:#1E8C6E; --tinta:#1C1916; --gris:#7A7068; --rosa:#FF7EB0; --melocoton:#FFE9CF;
  --line:rgba(28,25,22,.14); --line-d:rgba(255,244,230,.14); --crema-60:rgba(255,244,230,.7);
  --f-display:'Bricolage Grotesque','Avenir Next',system-ui,sans-serif;
  --f-text:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --step--1:.875rem; --step-0:1rem; --step-1:1.25rem; --step-2:1.6rem; --step-3:2.2rem; --step-4:clamp(2.3rem,5.4vw,4rem); --step-5:clamp(3rem,8vw,7rem);
  color-scheme:light;
}
*{box-sizing:border-box}
body{background:var(--crema);color:var(--tinta);font-family:var(--f-text);font-size:var(--step-0);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--crema)}
h1,h2,h3,h4{font-family:var(--f-display);line-height:1.02;letter-spacing:-.025em;text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--butano);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:1280px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.band{padding-block:clamp(72px,11vw,144px);position:relative}
.dark{background:var(--carbon);color:var(--crema)}
.sec-head{display:grid;gap:16px;max-width:820px;margin-bottom:clamp(32px,5vw,60px)}
.sec-head h2{font-size:var(--step-4);font-weight:800}
.sec-head p{font-size:var(--step-1);color:var(--gris);max-width:60ch}
.dark .sec-head p{color:var(--crema-60)}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.split .w>span{display:inline-block}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 24px;border-radius:999px;font-weight:700;text-decoration:none;border:2px solid var(--carbon);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s;background:transparent;white-space:nowrap}
.btn-primary{background:var(--butano);color:var(--carbon);box-shadow:4px 4px 0 var(--carbon)}
.btn-primary:hover{box-shadow:6px 6px 0 var(--carbon)}
.btn-primary:active{box-shadow:1px 1px 0 var(--carbon)}
.btn-ghost:hover{background:var(--carbon);color:var(--crema)}
.dark .btn{border-color:var(--crema)}
.dark .btn-primary{box-shadow:4px 4px 0 var(--crema)}
.dark .btn-ghost:hover{background:var(--crema);color:var(--carbon)}
.wa-btn{background:#25D366;color:var(--carbon)}
.fine{font-size:.82rem;color:var(--gris)}
.dark .fine{color:var(--crema-60)}
.awning{--w:48px;--a:var(--butano);--b:var(--crema);height:64px;background:repeating-linear-gradient(90deg,var(--a) 0 var(--w),var(--b) var(--w) calc(var(--w)*2));
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - var(--w)/2) no-repeat,radial-gradient(circle calc(var(--w)/2) at calc(var(--w)/2) 0,#000 98%,#0000) bottom/var(--w) calc(var(--w)/2) repeat-x;
          mask:linear-gradient(#000 0 0) top/100% calc(100% - var(--w)/2) no-repeat,radial-gradient(circle calc(var(--w)/2) at calc(var(--w)/2) 0,#000 98%,#0000) bottom/var(--w) calc(var(--w)/2) repeat-x}
.check-dot{flex:none;width:18px;height:18px;border-radius:50%;background:var(--botica) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}

/* ---------- nav ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--crema) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--f-display);font-weight:800;font-size:1.65rem;letter-spacing:-.04em}
.logo svg{width:38px;height:38px;flex:none}
.nav-links{display:flex;gap:26px;font-weight:500}
.nav-links a{text-decoration:none;opacity:.8}
.nav-links a:hover{opacity:1;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px;text-decoration-color:var(--butano)}
.nav .btn{padding:10px 18px;box-shadow:3px 3px 0 var(--carbon)}
.progress{position:absolute;left:0;bottom:-1px;height:3px;width:100%;background:var(--butano);transform-origin:left;transform:scaleX(0)}
@media (max-width:900px){.nav-links{display:none}}

/* ---------- hero 3D ---------- */
.hero{position:relative;min-height:min(900px,100svh);overflow:hidden;background:radial-gradient(120% 80% at 75% 40%,#FFE3C2 0,var(--crema) 60%)}
#hero3d{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:32px;padding-block:150px 80px;min-height:inherit;align-items:center}
.hero-copy{display:grid;gap:24px;min-width:0}
.hero h1{font-size:var(--step-5);font-weight:800;letter-spacing:-.05em;line-height:.95}
.hero h1 .l{display:inline-block;animation:rise .9s cubic-bezier(.2,1.2,.3,1) both;animation-delay:calc(.35s + var(--i)*28ms)}
.hero h1 .wd{display:inline-block;white-space:nowrap;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
@keyframes rise{from{transform:translateY(110%) rotate(8deg)}to{transform:none}}
.hero .lead{font-size:var(--step-1);max-width:44ch;color:#4a423b}
.loss{display:inline-flex;align-items:center;gap:10px;justify-self:start;background:var(--carbon);color:var(--crema);border-radius:999px;padding:8px 16px 8px 8px;font-size:.88rem;font-weight:600}
.loss i{width:26px;height:26px;border-radius:50%;background:var(--butano);display:grid;place-items:center;font-style:normal;font-weight:800;color:var(--carbon);flex:none}
.own{display:grid;gap:10px;background:color-mix(in srgb,#fff 78%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:2px solid var(--carbon);border-radius:22px;padding:16px;box-shadow:6px 6px 0 var(--carbon);max-width:560px}
.own label{font-weight:700;font-size:.95rem}
.own-row{display:grid;grid-template-columns:1fr auto auto;gap:8px}
.own input,.own select{min-width:0;padding:13px 14px;border-radius:14px;border:2px solid var(--line);background:#fff}
.own input:focus,.own select:focus{outline:none;border-color:var(--carbon)}
@media (max-width:620px){.own-row{grid-template-columns:1fr 1fr}.own-row input{grid-column:1/-1}}
.hero-alt{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:var(--step--1);font-weight:600;padding:0;margin:0;list-style:none}
.hero-alt li{display:flex;align-items:center;gap:8px}
.hero-spacer{min-height:380px}
.no3d .hero-fallback{display:block}
.no3d .hero-spacer{display:none}
.hero-fallback{display:none;position:relative;justify-self:center;width:min(100%,300px)}
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr;padding-top:330px;align-items:start}
  .hero-spacer{display:none}
  .no3d .hero .wrap{padding-top:110px}
}

/* ---------- marquee ---------- */
.marquee{background:var(--carbon);color:var(--crema);overflow:hidden}
.marquee-skew{will-change:transform}
.marquee-track{display:flex;gap:44px;width:max-content;padding-block:20px;animation:slide 40s linear infinite;font-family:var(--f-display);font-weight:700;font-size:1.6rem;letter-spacing:-.02em}
.marquee-track span{display:flex;align-items:center;gap:44px;white-space:nowrap}
.marquee-track span::after{content:"";width:14px;height:14px;border-radius:50%;background:var(--cana)}
.marquee-track span:nth-child(3n)::after{background:var(--butano)}
.marquee-track span:nth-child(3n+1)::after{background:var(--rosa)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- datos ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid var(--carbon);border-bottom:2px solid var(--carbon)}
.stat{padding:30px 24px 26px;display:grid;gap:8px;align-content:start;border-right:2px solid var(--carbon);min-width:0}
.stat:last-child{border-right:none}
.stat b{font-family:var(--f-display);font-weight:800;font-size:clamp(2.6rem,5vw,4rem);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.stat:nth-child(1) b{color:var(--butano)}.stat:nth-child(3) b{color:var(--botica)}
.stat p{font-weight:600}
.stat a{font-size:.75rem;color:var(--gris)}
@media (max-width:900px){.stats{grid-template-columns:1fr 1fr}.stat:nth-child(2){border-right:none}.stat:nth-child(-n+2){border-bottom:2px solid var(--carbon)}}

/* ---------- un día en tu negocio ---------- */
.day{--dbg:var(--carbon);--dfg:var(--crema);background:var(--dbg);color:var(--dfg);transition:background .7s ease,color .7s ease}
.day-intro{padding-block:clamp(72px,10vw,120px) 0}
.day-intro .sec-head p{color:inherit;opacity:.72}
.day-stage{display:grid;gap:48px;padding-block:40px 100px}
.day-ch{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:28px;align-items:center;border-top:1px solid color-mix(in srgb,currentColor 20%,transparent);padding-top:32px}
.day-time{font-family:var(--f-display);font-weight:800;font-size:clamp(3.4rem,9vw,7.5rem);line-height:.9;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.day-ch h3{font-size:var(--step-3);font-weight:800;margin-top:10px}
.day-ch p{max-width:46ch;opacity:.8;margin-top:12px;font-size:var(--step-1)}
.day-tag{display:inline-flex;margin-top:16px;border:2px solid currentColor;border-radius:999px;padding:5px 14px;font-weight:700;font-size:.85rem}
.mini-phone{width:100%;max-width:260px;aspect-ratio:9/18;border-radius:36px;background:#0d0a08;padding:10px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6),inset 0 0 0 2px #3a332d;justify-self:center}
.mini-phone .scr{height:100%;border-radius:27px;overflow:hidden;position:relative}
@media (max-width:760px){.day-ch{grid-template-columns:1fr}.mini-phone{max-width:230px}}
/* modo animado: un único teléfono fijo */
.motion .day-stage{display:block;padding-block:0;height:100svh;position:relative}
.day-pin{display:none}
.motion .day-pin{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,.7fr);gap:clamp(20px,4vw,60px);align-items:center;height:100%}
.motion .day-list{display:none}
.pin-copy{position:relative;min-height:340px;min-width:0}
.pin-copy article{position:absolute;inset:0;display:grid;align-content:center;opacity:0;transform:translateY(-30px);transition:opacity .2s ease,transform .3s ease;pointer-events:none}
.pin-copy article.on{transition:opacity .5s ease .15s,transform .6s cubic-bezier(.2,1,.3,1) .15s}
.pin-copy article.on{opacity:1;transform:none;pointer-events:auto}
.pin-copy h3{font-size:var(--step-3);font-weight:800;margin-top:10px}
.pin-copy p{max-width:44ch;opacity:.8;margin-top:12px;font-size:var(--step-1)}
.pin-phone{perspective:1400px}
.pin-phone .device{height:min(620px,74svh);width:auto;aspect-ratio:9/18.5;border-radius:46px;background:#0d0a08;padding:12px;box-shadow:0 50px 90px -40px rgba(0,0,0,.7),inset 0 0 0 2px #3a332d;transform-style:preserve-3d;will-change:transform;position:relative}
.pin-phone .device::before{content:"";position:absolute;top:22px;left:50%;translate:-50% 0;width:86px;height:24px;border-radius:20px;background:#0d0a08;z-index:5}
.pin-phone .screens{position:relative;height:100%;border-radius:34px;overflow:hidden;background:#fff}
.pin-phone .scr{position:absolute;inset:0;opacity:0;transform:scale(1.06);transition:opacity .25s ease,transform .3s ease}
.pin-phone .scr.on{transition:opacity .45s ease .12s,transform .6s ease .12s}
.pin-phone .scr.on{opacity:1;transform:none}
.pin-side{display:grid;gap:14px;justify-items:start}
.dots-nav{display:grid;gap:10px}
.dots-nav button{display:flex;align-items:center;gap:12px;background:none;border:none;cursor:pointer;font-weight:700;font-variant-numeric:tabular-nums;opacity:.45;transition:opacity .3s;padding:2px 0;text-align:left}
.dots-nav button i{width:10px;height:10px;border-radius:50%;background:currentColor;transition:transform .3s}
.dots-nav button.on{opacity:1}
.dots-nav button.on i{transform:scale(1.6);background:var(--butano)}
@media (max-width:900px){
  .motion .day-pin{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:12px;padding-block:84px 20px;align-items:start;justify-items:center}
  .pin-copy{min-height:210px;width:100%}
  .pin-copy .day-time{font-size:3.2rem}
  .pin-copy h3{font-size:1.5rem}
  .pin-copy p{font-size:1rem}
  .pin-side{display:none}
  .pin-phone .device{width:auto;height:min(46svh,420px);max-height:none}
}
/* pantallas del móvil */
.scr{background:#fff;color:#1c1916;font-size:12.5px;line-height:1.35}
.scr-inner{position:absolute;inset:0;padding:52px 14px 16px;display:flex;flex-direction:column;gap:10px}
.lock{background:linear-gradient(170deg,#1d1a33,#3b2a4a 60%,#6b3a3a)}
.lock .scr-inner{color:#fff;align-items:center}
.lock .clk{font-family:var(--f-display);font-weight:700;font-size:54px;line-height:1;margin-top:10px;letter-spacing:-.03em}
.lock .dt{font-size:12px;opacity:.8}
.notif{width:100%;background:rgba(255,255,255,.88);color:#1c1916;border-radius:16px;padding:10px 12px;display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;backdrop-filter:blur(10px);box-shadow:0 10px 30px -10px rgba(0,0,0,.4)}
.notif .ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-weight:800;color:#fff;font-size:13px}
.notif b{display:block;font-size:12px}
.notif small{opacity:.6;font-size:10.5px}
.wa{background:#0b141a}
.wa .scr-inner{padding-top:44px;gap:6px}
.wa-top{display:flex;align-items:center;gap:8px;color:#e9edef;font-weight:700;padding-bottom:6px;border-bottom:1px solid #222d34}
.wa-top i{width:28px;height:28px;border-radius:50%;background:#C9A227;display:grid;place-items:center;color:#111;font-style:normal;font-weight:800}
.wa-top small{display:block;font-weight:500;color:#8696a0;font-size:10px}
.bub{max-width:84%;padding:7px 10px;border-radius:10px;background:#202c33;color:#e9edef;font-size:12px}
.bub.out{align-self:flex-end;background:#005c4b}
.bub small{display:block;text-align:right;font-size:9.5px;opacity:.6}
.bub .ai{display:inline-block;font-size:9px;font-weight:800;background:var(--cana);color:#111;border-radius:4px;padding:0 4px;margin-bottom:2px}
.gapp .scr-inner{gap:8px}
.g-head{display:flex;align-items:center;gap:8px;font-weight:700}
.g-head i{width:26px;height:26px;border-radius:50%;background:#2E3134;color:#FFC20E;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:11px}
.g-stars{color:#F4B400;font-size:20px;letter-spacing:2px}
.g-text{background:#f1f3f4;border-radius:10px;padding:10px}
.g-reply{border-left:3px solid #1a73e8;padding:6px 10px;background:#e8f0fe;border-radius:0 10px 10px 0}
.g-reply b{font-size:11px;color:#1a73e8;display:block}
.pass{border-radius:16px;padding:14px;color:#F3EAD3;background:#111;border:2px solid #C9A227;display:grid;gap:10px}
.pass-top{display:flex;justify-content:space-between;font-family:'Alfa Slab One',serif;color:#C9A227;font-size:13px;letter-spacing:.04em}
.pass-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pass-grid i{aspect-ratio:1;border-radius:50%;border:2px dashed #6b5a2a;display:grid;place-items:center;font-style:normal;font-size:16px}
.pass-grid i.on{background:#C9A227;border:none;color:#111;font-weight:800}
.pass-grid i.free{border-color:#A31621;color:#ff8a8a;font-size:8px;font-weight:800;text-align:center;line-height:1}
.pass-qr{height:56px;border-radius:8px;background:repeating-linear-gradient(90deg,#fff 0 3px,#111 3px 5px,#fff 5px 9px,#111 9px 10px);border:6px solid #fff}
.menu-scr{background:#F3E9DA}
.menu-scr .scr-inner{gap:8px;color:#2B2522}
.langs{display:flex;gap:6px}
.langs span{border:1.5px solid #2B2522;border-radius:999px;padding:2px 9px;font-weight:700;font-size:11px}
.langs span.on{background:#B5502D;border-color:#B5502D;color:#fff}
.dish{display:flex;justify-content:space-between;gap:8px;border-bottom:1px dashed rgba(43,37,34,.3);padding-bottom:6px}
.dish b{font-family:'Fraunces',serif}
.menu-scr h4{font-family:'Fraunces',serif;font-size:22px;letter-spacing:0}
.rep-scr .scr-inner{gap:10px}
.kpi{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kpi div{background:#f4ede4;border-radius:12px;padding:10px}
.kpi b{display:block;font-family:var(--f-display);font-size:22px;line-height:1}
.kpi .up{color:var(--botica);font-weight:700;font-size:10.5px}
.bars{display:flex;align-items:flex-end;gap:6px;height:70px;padding:8px;background:#f4ede4;border-radius:12px}
.bars i{flex:1;background:var(--butano);border-radius:4px 4px 0 0}
.book{background:#111;color:#F3EAD3}
.book .scr-inner{gap:10px}
.book h4{font-family:'Alfa Slab One',serif;color:#C9A227;font-size:16px;letter-spacing:.05em;font-weight:400}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.slots span{border:1px solid #444;border-radius:8px;padding:6px 0;text-align:center;font-weight:700;font-size:11px}
.slots span.x{color:#555;text-decoration:line-through}
.slots span.ok{background:#C9A227;color:#111;border-color:#C9A227}
.ok-card{background:#1e8c6e;color:#fff;border-radius:12px;padding:10px;font-weight:600}
.ok-card b{display:block;font-size:14px}

/* ---------- capas de servicios ---------- */
.layers-sec{background:var(--melocoton);overflow:hidden}
.layers{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:center}
.motion .layers-pin{height:100svh;display:grid;align-items:center}
.layer-text{display:grid;gap:26px}
.layer-info{display:grid;gap:10px;padding:20px 22px;border:2px solid var(--carbon);border-radius:22px;background:var(--papel);transition:transform .3s,box-shadow .3s,opacity .3s}
.layer-info h3{font-size:var(--step-2);font-weight:800;display:flex;align-items:center;gap:12px}
.layer-info h3 i{width:18px;height:18px;border-radius:5px;background:var(--c);border:2px solid var(--carbon);flex:none}
.layer-info ul{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.layer-info li{display:flex;justify-content:space-between;gap:12px;font-size:.95rem;border-bottom:1px dashed var(--line);padding-bottom:4px}
.layer-info li span:last-child{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.layer-info li .new{font-size:.68rem;font-weight:800;background:var(--cana);border-radius:999px;padding:1px 7px;margin-left:6px;vertical-align:1px}
.motion .layer-text{position:relative;min-height:400px}
.motion .layer-info{position:absolute;inset:auto 0;top:50%;translate:0 -50%;opacity:0;transform:translateY(30px);pointer-events:none}
.motion .layer-info.on{opacity:1;transform:none;pointer-events:auto;box-shadow:6px 6px 0 var(--carbon)}
.iso{position:relative;height:min(600px,70svh);perspective:2200px;display:grid;place-items:center}
.stack{position:relative;width:min(330px,62vw);aspect-ratio:1;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-38deg);margin-top:120px}
.plane{position:absolute;inset:0;border-radius:26px;background:var(--c);border:3px solid var(--carbon);transform-style:preserve-3d;transform:translate3d(var(--dx,0px),var(--dy,0px),calc(var(--i)*var(--gap,90px)));transition:filter .3s,opacity .3s,transform .3s;box-shadow:0 0 0 1px rgba(0,0,0,.05)}
.plane::after{content:"";position:absolute;inset:0;border-radius:23px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 26px,transparent 26px 52px)}
.plane .pl-name{position:absolute;left:18px;bottom:14px;font-family:var(--f-display);font-weight:800;font-size:1.45rem;color:var(--carbon);transform:translateZ(2px);z-index:1}
.plane .chips{position:absolute;inset:18px 18px 54px;display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px;transform-style:preserve-3d;z-index:1}
.plane .chips span{background:var(--papel);border:2px solid var(--carbon);border-radius:12px;padding:6px 10px;font-weight:700;font-size:.78rem;transform:translateZ(14px);box-shadow:0 6px 0 -1px rgba(22,18,15,.35)}
.plane.dim{filter:saturate(.35) brightness(.92);opacity:.75}
@media (max-width:900px){
  .layers{grid-template-columns:1fr}
  .iso{height:340px;order:-1}
  .stack{width:min(210px,52vw);margin-top:70px}
  .plane .chips span{font-size:.62rem;padding:4px 6px}
  .plane .pl-name{font-size:1rem}
  .motion .layer-text{min-height:300px}
  .motion .layers-pin{align-content:center;gap:0}
}

/* ---------- wallet ---------- */
.wallet{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
@media (max-width:900px){.wallet{grid-template-columns:1fr}}
.w-copy{display:grid;gap:22px}
.w-copy .sec-head{margin:0}
.w-brands{display:flex;flex-wrap:wrap;gap:8px}
.w-brands button{border:2px solid var(--crema);background:transparent;border-radius:999px;padding:8px 16px;font-weight:700;cursor:pointer}
.w-brands button[aria-pressed="true"]{background:var(--crema);color:var(--carbon)}
.w-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.w-list li{display:flex;gap:12px;align-items:flex-start}
.w-stage{position:relative;perspective:1200px;display:grid;justify-items:center;gap:22px;padding-top:70px}
.w-card{position:relative;width:min(400px,100%);aspect-ratio:1.42;border-radius:22px;padding:20px;display:grid;grid-template-rows:auto 1fr auto;gap:12px;transform-style:preserve-3d;transition:transform .2s ease-out;box-shadow:0 40px 80px -30px rgba(0,0,0,.7);overflow:hidden;--wa:#C9A227;--wb:#111;--wf:#F3EAD3;background:var(--wb);color:var(--wf);border:2px solid var(--wa)}
.w-card::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.22) 45%,transparent 60%);transform:translateX(var(--shine,-60%));pointer-events:none}
.w-card .wc-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.w-card .wc-name{font-family:var(--wfont,'Alfa Slab One'),serif;font-size:1.15rem;color:var(--wa);letter-spacing:.03em}
.w-card .wc-count{font-size:.78rem;text-align:right;opacity:.85}
.w-card .wc-count b{display:block;font-size:1.4rem;font-variant-numeric:tabular-nums;color:var(--wa)}
.wc-stamps{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;align-items:center}
.wc-stamps i{aspect-ratio:1;border-radius:50%;border:2px dashed color-mix(in srgb,var(--wf) 35%,transparent);display:grid;place-items:center;font-style:normal;font-weight:800;position:relative}
.wc-stamps i.on{border:none;background:var(--wa);color:var(--wb);animation:stamp .45s cubic-bezier(.2,1.6,.4,1) both}
.wc-stamps i.on::before{content:"";position:absolute;inset:18%;border-radius:50%;border:2px solid var(--wb);opacity:.35}
.wc-stamps i.free{border-color:var(--rosa);color:var(--rosa);font-size:.55rem;line-height:1;text-align:center}
.wc-stamps i.free.on{background:var(--rosa);color:var(--carbon)}
@keyframes stamp{0%{transform:scale(2.4) rotate(-30deg);opacity:0}100%{transform:none;opacity:1}}
.w-card.shake{animation:shake .35s ease}
@keyframes shake{30%{translate:0 6px}60%{translate:0 -3px}}
.wc-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;font-size:.78rem}
.wc-bottom .bc{width:72px;height:72px;background:#fff;border-radius:8px;padding:5px;display:grid;grid-template-columns:repeat(9,1fr)}
.wc-bottom .bc i{display:block}.wc-bottom .bc i.on{background:#111}
.w-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.w-notif{position:absolute;top:0;left:50%;translate:-50% 0;width:min(360px,100%);background:rgba(255,255,255,.95);color:var(--tinta);border-radius:18px;padding:12px 14px;display:grid;grid-template-columns:34px 1fr;gap:10px;box-shadow:0 20px 40px -16px rgba(0,0,0,.6);transform:translateY(-20px);opacity:0;transition:transform .45s cubic-bezier(.2,1.4,.4,1),opacity .3s;font-size:.85rem;z-index:3}
.w-notif.show{transform:none;opacity:1}
.w-notif .ic{width:34px;height:34px;border-radius:9px;background:var(--carbon);color:var(--cana);display:grid;place-items:center;font-weight:800}
.w-notif small{color:var(--gris)}
#confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}
.add-wallet{display:inline-flex;align-items:center;gap:10px;background:#000;color:#fff;border-radius:12px;padding:10px 16px;font-weight:600;font-size:.85rem;border:1.5px solid #444}
.add-wallet i{width:24px;height:18px;border-radius:4px;background:linear-gradient(180deg,#3a8ee6 0 33%,#f5b335 33% 66%,#ef5a4c 66%);flex:none}

/* ---------- calle horizontal ---------- */
.street-sec{background:var(--crema);overflow:hidden}
.street-head{padding-block:clamp(72px,10vw,120px) 24px}
.h-track{display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px max(16px,env(safe-area-inset-left,0px)) 40px}
.motion .h-track{overflow:visible;width:max-content;padding-left:max(16px,calc((100vw - 1280px)/2 + 16px));padding-right:12vw}
.motion .h-pin{height:100svh;display:grid;align-content:center;overflow:hidden}
.panel{flex:0 0 min(880px,88vw);scroll-snap-align:center;display:grid;gap:14px;perspective:1600px;position:relative}
.panel-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.panel-head h3{font-size:clamp(1.8rem,4vw,3rem);font-weight:800}
.panel-head .uses{display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0;list-style:none}
.panel-head .uses li{border:1.5px solid var(--carbon);border-radius:999px;padding:4px 10px;font-size:.78rem;font-weight:600;background:var(--papel)}
.panel-num{position:absolute;right:0;top:-.42em;font-family:var(--f-display);font-weight:800;font-size:clamp(6rem,16vw,13rem);line-height:1;color:transparent;-webkit-text-stroke:2px rgba(22,18,15,.12);z-index:-1;pointer-events:none}
.browser{min-width:0;border:2px solid var(--carbon);border-radius:18px;overflow:hidden;background:#fff;box-shadow:10px 10px 0 var(--carbon);transform-style:preserve-3d;will-change:transform;position:relative}
.bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#efe6da;border-bottom:2px solid var(--carbon)}
.dots{display:flex;gap:6px}.dots i{width:11px;height:11px;border-radius:50%;background:#d9cbb8;border:1.5px solid var(--carbon)}
.dots i:first-child{background:var(--butano)}.dots i:nth-child(2){background:var(--cana)}
.url{flex:1;min-width:0;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:5px 14px;font-size:.8rem;color:#4a423b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.demo-tag{font-size:.72rem;font-weight:700;background:var(--cana);border-radius:999px;padding:3px 10px;white-space:nowrap}
.viewport{height:min(560px,58svh);overflow:auto;overscroll-behavior:contain}
.yours{position:absolute;z-index:3;top:58px;right:16px;background:var(--butano);color:var(--carbon);border:2px solid var(--carbon);border-radius:999px;padding:6px 14px;font-weight:800;font-size:.8rem;box-shadow:3px 3px 0 var(--carbon);transform:rotate(3deg)}
.street-end{flex:0 0 min(520px,80vw);display:grid;align-content:center;gap:18px;padding:20px}
.street-end h3{font-size:var(--step-4);font-weight:800}

/* ---------- antes / después ---------- */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:900px){.ba{grid-template-columns:1fr}}
.ba-frame{position:relative;max-width:460px;width:100%;aspect-ratio:4/5;border:2px solid var(--carbon);border-radius:24px;overflow:hidden;box-shadow:8px 8px 0 var(--carbon);justify-self:center;background:#fff;--pos:50%}
.gl{position:absolute;inset:0;padding:22px;display:grid;gap:12px;align-content:start;font-size:.9rem;color:#202124;background:#fff}
.gl.after{clip-path:inset(0 0 0 var(--pos))}
.gl.before{filter:saturate(.3)}
.gl .search{border:1px solid #dfe1e5;border-radius:999px;padding:9px 16px;color:#5f6368;font-size:.85rem;margin-top:26px}
.gl .photo{height:120px;border-radius:12px;background:#e8eaed;display:grid;place-items:center;color:#80868b;font-size:.8rem}
.gl.after .photo{background:repeating-linear-gradient(-45deg,#FFC20E 0 12px,#1a1a1a 12px 24px) bottom/100% 22px no-repeat,#2E3134;color:#FFC20E;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:1.6rem;letter-spacing:.04em;padding-bottom:22px}
.gl h4{font-family:var(--f-text);font-size:1.2rem;letter-spacing:0}
.rating{display:flex;align-items:center;gap:6px;font-weight:600}
.rating b{font-size:1.2rem}
.rating .st{color:#F4B400;letter-spacing:1px}
.rating span{color:#5f6368}
.gl .row{display:flex;flex-wrap:wrap;gap:6px}
.gl .row span{border:1px solid #dadce0;border-radius:999px;padding:5px 12px;font-size:.78rem;font-weight:600;color:#1a73e8}
.gl.before .row span{color:#5f6368}
.gl .rev{border-top:1px solid #eee;padding-top:10px;font-size:.82rem;color:#3c4043}
.gl .open{color:#188038;font-weight:700}.gl .closed{color:#d93025;font-weight:700}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:var(--carbon);pointer-events:none;z-index:3}
.ba-handle::after{content:"";position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:var(--butano) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316120F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center/22px no-repeat;border:2px solid var(--carbon)}
.ba-frame{user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:ew-resize}
.ba-handle:focus-visible{outline:none}
.ba-handle:focus-visible::after{box-shadow:0 0 0 4px var(--cana)}
.ba-frame.drag .ba-handle::after{transform:scale(1.12)}
.ba-handle::after{transition:transform .15s}
.ba-labels{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;z-index:2;pointer-events:none}
.ba-labels span{background:var(--carbon);color:var(--crema);font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:999px}
.ba-labels span:last-child{background:var(--butano);color:var(--carbon)}

/* ---------- auditoría gratis ---------- */
.audit{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,48px);align-items:center;background:var(--cana);border:2px solid var(--carbon);border-radius:32px;padding:clamp(22px,4vw,44px);box-shadow:10px 10px 0 var(--carbon)}
.audit h2{font-size:var(--step-3);font-weight:800}
.audit p{max-width:56ch;margin-top:8px}
.audit form{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.audit input{flex:1 1 180px;min-width:0;padding:13px 16px;border-radius:14px;border:2px solid var(--carbon);background:#fff}
.gift{width:120px;height:120px;position:relative;transform:rotate(-8deg)}
.gift .box{position:absolute;inset:30px 10px 0;background:var(--butano);border:3px solid var(--carbon);border-radius:10px}
.gift .lid{position:absolute;left:0;right:0;top:16px;height:30px;background:var(--rosa);border:3px solid var(--carbon);border-radius:8px;animation:lid 2.4s ease-in-out infinite}
.gift .rib{position:absolute;left:50%;top:16px;bottom:0;width:16px;margin-left:-8px;background:var(--crema);border-inline:3px solid var(--carbon)}
@keyframes lid{0%,60%,100%{transform:none}75%{transform:translateY(-14px) rotate(-6deg)}}
@media (max-width:640px){.audit{grid-template-columns:1fr}.gift{width:90px;height:90px}}

/* ---------- packs ---------- */
.launch{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-bottom:34px;background:var(--carbon);color:var(--crema);border-radius:20px;padding:16px 22px}
.launch b{font-family:var(--f-display);font-size:1.15rem}
.cd{display:flex;gap:8px;font-variant-numeric:tabular-nums}
.cd span{background:var(--butano);color:var(--carbon);border-radius:10px;padding:6px 10px;font-family:var(--f-display);font-weight:800;font-size:1.2rem;line-height:1;text-align:center;min-width:56px}
.cd small{display:block;font-family:var(--f-text);font-size:.62rem;font-weight:700;margin-top:3px}
.packs{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch}
@media (max-width:1180px){.packs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.packs{grid-template-columns:1fr}}
.pack{position:relative;border:2px solid var(--carbon);border-radius:26px;background:var(--papel);padding:26px 24px;display:flex;flex-direction:column;gap:16px;overflow:hidden;min-width:0}
.pack h3{font-size:var(--step-2);font-weight:800}
.pack .for{color:var(--gris);font-size:.9rem;margin-top:4px}
.anchor{display:grid;gap:2px}
.anchor .was-l{font-size:.8rem;font-weight:600;color:var(--gris)}
.was{position:relative;justify-self:start;font-family:var(--f-display);font-weight:800;font-size:2.5rem;letter-spacing:-.03em;color:var(--gris);line-height:1.05;font-variant-numeric:tabular-nums}
.was::after{content:"";position:absolute;left:-4%;right:-4%;top:52%;height:5px;background:var(--butano);border-radius:3px;transform:rotate(-8deg);transform-origin:left}
.now{font-family:var(--f-display);font-weight:800;font-size:3.2rem;line-height:.95;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.now small{font-size:.95rem;letter-spacing:0;font-weight:600}
.range{font-size:.82rem;color:var(--gris)}
.save-pill{justify-self:start;background:var(--botica);color:#fff;font-weight:800;border-radius:999px;padding:4px 12px;font-size:.8rem;margin-top:6px}
.monthly{border-top:1px dashed var(--line);padding-top:12px;display:grid;gap:2px}
.monthly b{font-family:var(--f-display);font-size:1.5rem}
.monthly span{font-size:.82rem;color:var(--gris)}
.pack ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;flex:1;align-content:start}
.pack li{display:flex;gap:10px;align-items:flex-start;font-size:.92rem}
.pack li .check-dot{width:16px;height:16px;margin-top:3px;background-size:10px}
.pack .btn{margin-top:auto}
.freebie{position:relative;display:flex;align-items:center;gap:12px;border:2px dashed var(--carbon);border-radius:16px;padding:10px 12px;background:#fff}
.nfc-mini{flex:none;width:58px;height:40px;border-radius:8px;background:linear-gradient(145deg,#2c2520,#16120F);border:2px solid var(--carbon);position:relative;transform:rotate(-8deg);box-shadow:3px 3px 0 var(--butano)}
.nfc-mini::before{content:"G";position:absolute;left:8px;top:50%;translate:0 -50%;width:18px;height:18px;border-radius:50%;background:#fff;color:#4285F4;font-weight:800;font-size:.7rem;display:grid;place-items:center}
.nfc-mini::after{content:"";position:absolute;right:8px;top:50%;width:14px;height:14px;translate:0 -50%;border:2px solid var(--cana);border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;transform:rotate(45deg)}
.nfc-mini.x2{box-shadow:3px 3px 0 var(--butano),9px -5px 0 -2px var(--carbon)}
.freebie b{display:block;font-size:.9rem}
.freebie small{color:var(--gris);font-size:.78rem}
.freebie .stampx{position:absolute;right:-8px;top:-14px;background:var(--rosa);color:var(--carbon);border:2px solid var(--carbon);border-radius:999px;padding:3px 10px;font-weight:800;font-size:.72rem;transform:rotate(8deg)}
.pack.hot{background:var(--carbon);color:var(--crema);box-shadow:10px 10px 0 var(--butano);padding-top:0;transform:translateY(-12px)}
.pack.hot .awning{--w:24px;height:38px;margin-inline:-24px}
.pack.hot .for,.pack.hot .range,.pack.hot .monthly span,.pack.hot .anchor .was-l{color:var(--crema-60)}
.pack.hot .was{color:var(--crema-60)}
.pack.hot .freebie{background:#2a221d;border-color:var(--crema)}
.pack.hot .freebie small{color:var(--crema-60)}
.pack.hot .monthly{border-color:var(--line-d)}
.pack.hot .btn{border-color:var(--crema)}
.ribbon{align-self:flex-start;background:var(--cana);color:var(--carbon);font-weight:800;font-size:.75rem;padding:5px 12px;border-radius:999px;margin-top:6px}
.pack.socio{background:linear-gradient(160deg,#fff,#f6eadb)}
@media (max-width:1180px){.pack.hot{transform:none}}
.tarifa{margin-top:28px;border:2px solid var(--carbon);border-radius:20px;background:var(--papel);overflow:hidden}
.tarifa summary{cursor:pointer;padding:16px 22px;font-weight:700}
.tarifa .tw{overflow-x:auto;padding:0 22px 20px}
.tarifa table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:480px}
.tarifa th,.tarifa td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
.tarifa td:nth-child(n+2),.tarifa th:nth-child(n+2){text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.guar{margin-top:30px;display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media (max-width:760px){.guar{grid-template-columns:1fr}}
.guar>div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;border:2px dashed var(--carbon);border-radius:22px;padding:18px 22px;background:#fff8ec;min-width:0}
.seal{width:76px;height:76px;border-radius:50%;background:var(--botica);color:#fff;display:grid;place-items:center;text-align:center;font-family:var(--f-display);font-weight:800;line-height:1;font-size:.75rem;border:3px solid var(--carbon)}
.seal b{display:block;font-size:1.6rem}
.seal.p{background:var(--rosa);color:var(--carbon)}
.guar h3{font-size:var(--step-1);font-weight:800}
.guar p{color:#4a423b;margin-top:4px;font-size:.92rem}
.honest{margin-top:30px;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;padding:22px 26px;border-radius:22px;background:var(--carbon);color:var(--crema)}
.honest .awning{--w:14px;width:70px;height:36px;border-radius:6px 6px 0 0}
.honest p{color:var(--crema-60);margin-top:4px}

/* ---------- configurador ---------- */
.cfg{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,64px);align-items:start}
@media (max-width:940px){.cfg{grid-template-columns:1fr}}
.cfg-intro{display:grid;gap:18px;position:sticky;top:100px}
.cfg-intro h2{font-size:var(--step-4);font-weight:800}
.cfg-intro p{color:var(--crema-60);font-size:var(--step-1)}
@media (max-width:940px){.cfg-intro{position:static}}
.wizard{min-width:0;background:var(--crema);color:var(--tinta);border-radius:28px;padding:clamp(20px,3.4vw,36px);box-shadow:10px 10px 0 var(--butano)}
.prog{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:8px}
.prog i{height:7px;border-radius:7px;background:rgba(22,18,15,.12);transition:background .3s}
.prog i.done{background:var(--butano)}
.prog-label{font-size:.82rem;color:var(--gris);font-weight:600;margin-bottom:22px}
.panel-w{display:grid;gap:20px;animation:fadeUp .35s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.panel-w h3{font-size:var(--step-3);font-weight:800}
.panel-w .hint{color:var(--gris);margin-top:-10px}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:560px){.opts{grid-template-columns:repeat(2,1fr)}}
.opt{position:relative;display:grid;gap:4px;padding:14px;border:2px solid var(--line);border-radius:16px;background:var(--papel);cursor:pointer;text-align:left;font-weight:600;transition:border-color .15s,transform .15s}
.opt:hover{border-color:var(--carbon)}
.opt[aria-pressed="true"]{border-color:var(--carbon);background:#fff;box-shadow:3px 3px 0 var(--carbon);transform:translate(-1px,-1px)}
.opt[aria-pressed="true"]::after{content:"";position:absolute;top:10px;right:10px;width:18px;height:18px;border-radius:50%;background:var(--butano) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316120F' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/10px no-repeat}
.opt .sw{width:28px;height:12px;border-radius:3px;background:repeating-linear-gradient(90deg,var(--a) 0 7px,#fff 7px 14px);border:1.5px solid var(--carbon)}
.opt small{font-weight:500;color:var(--gris);font-size:.8rem}
.opts.list{grid-template-columns:1fr 1fr}
@media (max-width:640px){.opts.list{grid-template-columns:1fr}}
.opts.list .opt{grid-template-columns:1fr auto;align-items:center;padding-right:40px}
.opts.list .opt .pr{font-weight:700;font-size:.82rem;text-align:right;font-variant-numeric:tabular-nums}
.field{display:grid;gap:8px}
.field label{font-weight:700}
.field output{font-family:var(--f-display);font-weight:800;font-size:1.5rem;color:var(--butano);font-variant-numeric:tabular-nums}
.field .lab{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
input[type=range]{width:100%;accent-color:var(--butano);height:28px}
.checks{display:flex;flex-wrap:wrap;gap:10px}
.check{display:flex;align-items:center;gap:10px;border:2px solid var(--line);border-radius:999px;padding:9px 16px;font-weight:600;cursor:pointer;background:var(--papel)}
.check input{width:18px;height:18px;accent-color:var(--botica)}
.nav-btns{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:6px;flex-wrap:wrap}
.btn-back{border:none;background:none;font-weight:700;cursor:pointer;padding:12px 4px;text-decoration:underline;text-underline-offset:4px}
.btn[disabled]{opacity:.4;pointer-events:none}
.res-big{background:var(--carbon);color:var(--crema);border-radius:20px;padding:22px;display:grid;gap:6px}
.res-big .k{font-size:.9rem;color:var(--crema-60)}
.res-big .v{font-family:var(--f-display);font-weight:800;font-size:clamp(2.4rem,6vw,3.6rem);line-height:1;color:var(--cana);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.res-big .v small{font-size:1rem;color:var(--crema);letter-spacing:0}
.res-big .loss2{margin-top:6px;color:var(--rosa);font-weight:700;font-size:.92rem}
.res-price{display:grid;grid-template-columns:1.2fr 1fr;gap:10px}
@media (max-width:560px){.res-price{grid-template-columns:1fr}}
.res-cell{border:2px solid var(--line);border-radius:16px;padding:14px;display:grid;gap:4px;background:var(--papel);align-content:start}
.res-cell b{font-family:var(--f-display);font-size:1.6rem;font-variant-numeric:tabular-nums;line-height:1.05}
.res-cell span{font-size:.8rem;color:var(--gris)}
.res-cell .was{font-size:1.6rem}
.res-cell .save-pill{color:#fff;font-size:.85rem}
.res-gifts{display:flex;flex-wrap:wrap;gap:10px}
.res-gifts .freebie{flex:1 1 220px}
.res-list{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;list-style:none}
.res-list li{background:#fff;border:1.5px solid var(--carbon);border-radius:999px;padding:5px 12px;font-size:.82rem;font-weight:600}
details.formula{font-size:.85rem;color:var(--gris);border-top:1px dashed var(--line);padding-top:10px}
details.formula summary{cursor:pointer;font-weight:700;color:var(--tinta)}
details.formula ul{margin:8px 0 0;padding-left:18px;display:grid;gap:4px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.form-grid{grid-template-columns:1fr}}
.form-grid .full{grid-column:1/-1}
.inp{display:grid;gap:6px;font-weight:700;font-size:.9rem}
.inp input{font-weight:500;padding:13px 16px;border-radius:14px;border:2px solid var(--line);background:#fff;color:var(--tinta)}
.inp input:focus{border-color:var(--carbon);outline:none;box-shadow:3px 3px 0 var(--butano)}
.inp .err{color:#b3261e;font-weight:600;font-size:.8rem;min-height:1.1em}
.msg-box{background:#fff;border:2px dashed var(--line);border-radius:16px;padding:14px;font-size:.9rem;white-space:pre-wrap}
.done-actions{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- FAQ y pie ---------- */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,64px)}
@media (max-width:900px){.faq{grid-template-columns:1fr}}
.faq-list{display:grid;gap:12px}
.faq-list details{border:2px solid var(--carbon);border-radius:18px;background:var(--papel);overflow:hidden}
.faq-list summary{list-style:none;cursor:pointer;padding:18px 22px;font-family:var(--f-display);font-weight:700;font-size:var(--step-1);display:flex;justify-content:space-between;gap:14px;align-items:center}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;background:var(--cana) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316120F' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .25s}
.faq-list details[open] summary::after{transform:rotate(45deg);background-color:var(--butano)}
.faq-list details p{padding:0 22px 20px;color:#4a423b;max-width:62ch}
.foot{background:var(--carbon);color:var(--crema);overflow:hidden}
.foot-cta{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:end;padding-block:clamp(56px,8vw,96px) 40px}
@media (max-width:760px){.foot-cta{grid-template-columns:1fr}}
.foot-cta h2{font-size:var(--step-4);font-weight:800;max-width:16ch}
.wordmark{font-family:var(--f-display);font-weight:800;font-size:clamp(6rem,28vw,24rem);line-height:.78;letter-spacing:-.07em;color:var(--butano);margin:0;padding-top:.04em;user-select:none;white-space:nowrap;overflow:hidden}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;border-top:1px solid var(--line-d);padding-block:22px;font-size:.85rem;color:var(--crema-60)}
.float-cta{position:fixed;z-index:40;right:max(18px,calc(env(safe-area-inset-right,0px) + 18px));bottom:calc(18px + env(safe-area-inset-bottom,0px));display:flex;gap:10px;align-items:center;transform:translateY(160%);transition:transform .4s cubic-bezier(.2,1.3,.4,1)}
.float-cta.show{transform:none}
.mbar-wa{width:54px;height:54px;border-radius:50%;background:#25D366;color:var(--carbon);border:2px solid var(--carbon);display:grid;place-items:center;box-shadow:4px 4px 0 var(--carbon);flex:none}
.mbar-wa svg{width:28px;height:28px}
/* móvil: barra fija abajo, en la zona del pulgar */
@media (max-width:640px){
  .float-cta{left:0;right:0;bottom:0;padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:color-mix(in srgb,var(--crema) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line)}
  .float-cta .btn{flex:1;padding-block:14px}
  .mbar-wa{width:50px;height:50px;box-shadow:3px 3px 0 var(--carbon)}
  .foot-bottom{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .nav .btn{display:none}
  .hero .wrap{padding-top:300px;padding-bottom:56px;gap:20px}
  .hero h1{font-size:clamp(2.6rem,12.5vw,3.4rem)}
  .hero .lead{font-size:1.08rem}
  .loss{font-size:.8rem;border-radius:18px;align-items:flex-start}
  .own{padding:14px;box-shadow:4px 4px 0 var(--carbon)}
  .own-row .btn{grid-column:1/-1}
  .band{padding-block:64px}
  .sec-head h2{font-size:clamp(2rem,9vw,2.6rem)}
  .sec-head p{font-size:1.05rem}
  .stats{grid-template-columns:1fr 1fr}
  .stat{padding:20px 14px;border-right:2px solid var(--carbon);border-bottom:2px solid var(--carbon)}
  .stat:nth-child(2n){border-right:none}
  .stat:nth-child(n+3){border-bottom:none}
  .stat b{font-size:2.3rem}
  .stat p{font-size:.88rem}
  .plane .chips{display:none}
  .plane .pl-name{font-size:1.1rem}
  .packs{gap:22px}
  .pack.hot{order:-1}
  .pack{padding:22px 20px}
  .now{font-size:2.8rem}
  .launch{padding:14px 16px}
  .cd span{min-width:0;flex:1}
  .cd{width:100%}
  .nav-btns .btn,.done-actions .btn{flex:1 1 100%}
  .nav-btns{flex-direction:column-reverse;align-items:stretch}
  .done-actions{width:100%}
  .audit form .btn{flex:1 1 100%}
  .w-stage{padding-top:84px}
  .wc-stamps{gap:6px}
  .panel{flex-basis:90vw}
  .viewport{height:56svh}
  .faq-list summary{font-size:1.05rem;padding:16px 18px}
}
*{-webkit-tap-highlight-color:transparent}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ---------- v3.1: capas, auditoría, ticket, calle ---------- */
.plane.on{--dx:-18px;--dy:-18px}
.layer-info .ly-lead{font-size:1.05rem;color:#4a423b}
.layer-info ul{gap:8px}
.layer-info li{justify-content:flex-start;align-items:center;gap:10px;border-bottom:none;padding-bottom:0;font-weight:600}
.layer-info .ly-pack{justify-self:start;font-size:.78rem;font-weight:700;border:1.5px solid var(--carbon);border-radius:999px;padding:3px 10px;margin-top:4px}
.layers-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-block:24px 72px}
.layers-cta p{font-size:var(--step-1);max-width:46ch;font-weight:600}
.motion .viewport{overflow:hidden}
.audit{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.audit-why{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:6px;font-weight:600}
.audit-why li{display:flex;gap:10px;align-items:center}
.report{background:#fff;border:2px solid var(--carbon);border-radius:20px;padding:18px;display:grid;gap:12px;box-shadow:6px 6px 0 var(--carbon);transform:rotate(2deg);position:relative;font-size:.92rem}
.rp-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.rp-top small{display:block;color:var(--gris);font-size:.8rem}
.rp-ring{--v:54;width:72px;height:72px;border-radius:50%;display:grid;place-content:center;text-align:center;line-height:1;background:radial-gradient(closest-side,#fff 78%,transparent 80% 100%),conic-gradient(var(--butano) calc(var(--v)*1%),#efe6da 0);flex:none}
.rp-ring b{font-family:var(--f-display);font-size:1.5rem}
.rp-ring small{font-size:.65rem;color:var(--gris)}
.rp-pos{background:var(--crema);border-radius:12px;padding:8px 12px}
.report ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.report li{display:grid;grid-template-columns:22px 1fr;column-gap:8px;align-items:center;font-weight:600}
.report li::before{content:"";width:18px;height:18px;border-radius:50%;grid-row:span 2}
.report li.ok::before{background:var(--botica) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/11px no-repeat}
.report li.ko::before{background:#d93025 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/10px no-repeat}
.report li small{color:var(--gris);font-weight:500;font-size:.78rem}
.rp-fix{border-top:1px dashed var(--line);padding-top:10px}
.rp-ex{position:absolute;top:-12px;right:16px;background:var(--rosa);border:2px solid var(--carbon);border-radius:999px;padding:2px 10px;font-size:.72rem;font-weight:800}
@media (max-width:760px){.audit{grid-template-columns:1fr}.report{transform:none}}
/* ticket de caja con el desglose */
.tk-wrap summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:700;font-size:.88rem;text-decoration:underline;text-underline-offset:4px}
.tk-wrap summary::-webkit-details-marker{display:none}
.tk-wrap summary::before{content:"";width:22px;height:22px;border-radius:6px;background:var(--cana) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316120F' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/12px no-repeat;border:1.5px solid var(--carbon);transition:transform .25s}
.tk-wrap[open] summary::before{transform:rotate(45deg)}
.ticket{--tk:#fffdf8;margin-top:12px;background:var(--tk);color:var(--tinta);padding:16px 16px 26px;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:.78rem;line-height:1.45;box-shadow:0 14px 24px -18px rgba(0,0,0,.6);
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 10px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/16px 10px repeat-x;
          mask:linear-gradient(#000 0 0) top/100% calc(100% - 10px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/16px 10px repeat-x;transform-origin:top}
.tk-wrap[open] .ticket{animation:tkPrint .5s cubic-bezier(.2,1,.3,1) both}
@keyframes tkPrint{from{transform:scaleY(.2);opacity:0}to{transform:none;opacity:1}}
.tk-head{text-align:center;border-bottom:1px dashed #999;padding-bottom:8px;margin-bottom:8px;font-weight:700}
.tk-head small{font-weight:400;color:#666}
.ticket ul{list-style:none;padding:0;margin:0;display:grid;gap:3px}
.ticket li{display:flex;gap:6px;align-items:baseline}
.ticket li i{flex:1;border-bottom:1px dotted #aaa;min-width:12px;transform:translateY(-3px)}
.ticket li b{font-weight:700;white-space:nowrap}
.ticket li span{min-width:0}
.ticket li.gift b s{color:#999;font-weight:400;margin-right:4px}
.ticket li.gift b em{font-style:normal;background:var(--rosa);padding:0 4px;border-radius:3px}
.tk-wrap[open] .ticket li{animation:tkRow .3s ease both;animation-delay:calc(.25s + var(--i)*55ms)}
@keyframes tkRow{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.tk-sum{border-top:1px dashed #999;margin-top:8px;padding-top:8px;display:grid;gap:3px}
.tk-sum .disc b{color:var(--botica)}
.tk-sum .tot{font-size:1.05rem;border-top:2px solid var(--tinta);padding-top:6px;margin-top:4px}
.tk-sum .tot b{font-size:1.3rem}
.tk-foot{text-align:center;color:#666;margin-top:10px;font-size:.7rem}
.tarifa{background:#fffdf8}
.tarifa .tw{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:.85rem}