.hero{position:relative; overflow:hidden; padding:90px 0 86px;}
.hero-blob{position:absolute; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle, rgba(14,148,136,0.16), transparent 70%); top:-180px; right:-120px; pointer-events:none; z-index:0; transition:transform .35s cubic-bezier(.22,1,.4,1); animation:blobBreathe 8s ease-in-out infinite;}
@keyframes blobBreathe{0%,100%{transform:scale(1);} 50%{transform:scale(1.08);}}
.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:60px; align-items:center; position:relative; z-index:1;}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-family:'IBM Plex Mono'; font-size:0.72rem; color:var(--accent-dark); background:var(--accent-tint); padding:6px 12px; border-radius:4px; margin-bottom:22px; border:1px solid rgba(14,148,136,0.12);}
.hero h1{font-size:2.7rem; line-height:1.12; margin-bottom:20px;}
.hero h1 .strike{position:relative; color:var(--ink-faint); display:inline-block;}
.hero h1 .strike::after{content:''; position:absolute; left:-2%; right:-2%; top:52%; height:3px; background:var(--stamp); transform:rotate(-2deg) scaleX(0); transform-origin:left; animation:strikeDraw .7s cubic-bezier(.22,1,.4,1) 1.2s forwards;}
@keyframes strikeDraw{to{transform:rotate(-2deg) scaleX(1);}}
.hero h1 em{font-style:normal; color:var(--accent-dark);}
.hero p.sub{font-size:1.08rem; color:var(--ink-soft); max-width:480px; margin-bottom:30px;}
.hero-ctas{display:flex; gap:18px; align-items:center; flex-wrap:wrap;}
.hero-note{margin-top:20px; font-size:0.78rem; color:var(--ink-faint); font-family:'IBM Plex Mono';}
.hero-eyebrow{opacity:0; transform:translateY(20px); animation:fadeUp .7s ease .25s forwards;}
.hero-title{opacity:0; transform:translateY(24px); animation:fadeUp .8s ease .4s forwards;}
.hero-sub{opacity:0; transform:translateY(20px); animation:fadeUp .7s ease .55s forwards;}
.hero-ctas{opacity:0; transform:translateY(20px); animation:fadeUp .7s ease .7s forwards;}
.hero-note{opacity:0; animation:fadeIn .7s ease .9s forwards;}
@keyframes fadeUp{to{opacity:1; transform:translateY(0);}}
@keyframes fadeIn{to{opacity:1;}}
.receipt-stack{position:relative; height:430px; perspective:1000px;}
.receipt{position:absolute; left:50%; width:288px; background:var(--paper); padding:22px 20px 18px; box-shadow:0 24px 48px -18px rgba(23,30,35,0.35); font-family:'IBM Plex Mono'; clip-path:polygon(0% 12px,4% 2px,8% 12px,12% 2px,16% 12px,20% 2px,24% 12px,28% 2px,32% 12px,36% 2px,40% 12px,44% 2px,48% 12px,52% 2px,56% 12px,60% 2px,64% 12px,68% 2px,72% 12px,76% 2px,80% 12px,84% 2px,88% 12px,92% 2px,96% 12px,100% 12px,100% 100%,0% 100%); transition:transform .35s cubic-bezier(.22,1,.4,1), box-shadow .35s ease; transform-style:preserve-3d;}
.receipt.r1{top:0; z-index:1; animation:dropInR1 .9s cubic-bezier(.22,1.6,.4,1) .3s both, swayR1 6s ease-in-out 1.6s infinite;}
.receipt.r2{top:150px; z-index:2; animation:dropInR2 .9s cubic-bezier(.22,1.6,.4,1) .65s both, swayR2 6.5s ease-in-out 2s infinite;}
@keyframes dropInR1{0%{opacity:0; transform:translate(-54%,-80px) rotate(0deg) scale(0.92);} 100%{opacity:1; transform:translate(-54%,0) rotate(-3.5deg);}}
@keyframes dropInR2{0%{opacity:0; transform:translate(-46%,-80px) rotate(0deg) scale(0.92);} 100%{opacity:1; transform:translate(-46%,0) rotate(2deg);}}
@keyframes swayR1{0%,100%{transform:translate(-54%,0) rotate(-3.5deg);} 50%{transform:translate(-54%,-7px) rotate(-2deg);}}
@keyframes swayR2{0%,100%{transform:translate(-46%,0) rotate(2deg);} 50%{transform:translate(-46%,-7px) rotate(3.2deg);}}
.receipt-stack:hover .receipt.r1{transform:translate(-54%,-8px) rotate(-5deg) translateZ(20px); box-shadow:0 30px 60px -20px rgba(23,30,35,0.4);}
.receipt-stack:hover .receipt.r2{transform:translate(-46%,8px) rotate(4deg) translateZ(20px); box-shadow:0 30px 60px -20px rgba(23,30,35,0.4);}
.rc-total .pulse-bad{display:inline-block; animation:pulseBad 1.6s ease-in-out infinite;}
@keyframes pulseBad{0%,100%{opacity:0.55;} 50%{opacity:1;}}
.stamp-mark{animation:stampPop .55s cubic-bezier(.34,1.7,.6,1) both;}
.stamp-mark.bad{animation-delay:1.3s;}
.stamp-mark.good{animation-delay:1.7s;}
@keyframes stampPop{0%{opacity:0; transform:scale(2.4) rotate(0deg);} 60%{opacity:1;} 100%{opacity:0.92; transform:scale(1) rotate(var(--rot,-8deg));}}
.stamp-mark.bad{--rot:-14deg;}
.stamp-mark.good{--rot:-8deg;}
.rc-head{font-size:0.72rem; font-weight:700; letter-spacing:0.06em; border-bottom:1px dashed var(--line-strong); padding-bottom:10px; margin-bottom:10px; display:flex; justify-content:space-between; color:var(--ink-soft);}
.rc-row{display:flex; justify-content:space-between; font-size:0.76rem; padding:3px 0; color:var(--ink-soft);}
.rc-row.dim{color:var(--ink-faint);}
.rc-total{display:flex; justify-content:space-between; font-size:0.82rem; font-weight:700; border-top:1px dashed var(--line-strong); margin-top:8px; padding-top:8px;}
.stamp-mark{position:absolute; font-family:'IBM Plex Mono'; font-weight:700; font-size:0.95rem; padding:5px 10px; border:2.5px solid; border-radius:5px; letter-spacing:0.05em; text-transform:uppercase; opacity:0.92;}
.stamp-mark.bad{color:var(--ink-faint); border-color:var(--ink-faint); top:38px; right:14px;}
.stamp-mark.good{color:var(--accent-dark); border-color:var(--accent-dark); bottom:14px; right:16px;}
.ticker{background:var(--ink); overflow:hidden; padding:12px 0; white-space:nowrap; position:relative; z-index:1;}
.ticker::before,.ticker::after{content:''; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none;}
.ticker::before{left:0; background:linear-gradient(90deg, var(--ink), transparent);}
.ticker::after{right:0; background:linear-gradient(-90deg, var(--ink), transparent);}
.ticker-track{display:inline-block; animation:tickerScroll 22s linear infinite;}
.ticker-track span{color:#8FE0D3; font-size:0.74rem; letter-spacing:0.08em; margin-right:36px; display:inline-block; transition:transform .2s ease;}
.ticker:hover .ticker-track{animation-play-state:paused;}
.ticker-track span:hover{transform:scale(1.1); color:#fff;}
@keyframes tickerScroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
section{padding:80px 0; position:relative; z-index:1;}
.section-head{max-width:560px; margin-bottom:46px;}
.section-tag{font-family:'IBM Plex Mono'; font-size:0.72rem; color:var(--accent-dark); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:10px; display:block;}
.section-head h2{font-size:1.7rem; line-height:1.25;}
.section-head p{color:var(--ink-soft); margin-top:12px; font-size:1rem; font-family:'Inter';}
.pain-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.pain-card{background:var(--paper); border:1px solid var(--line-strong); border-radius:8px; padding:22px; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; transform-style:preserve-3d;}
.pain-card:hover{border-color:var(--accent); box-shadow:0 18px 40px -22px rgba(14,148,136,0.25); transform:translateY(-4px);}
.pain-card .icon{font-family:'IBM Plex Mono'; font-weight:700; font-size:0.8rem; color:var(--stamp); margin-bottom:12px; transition:transform .3s ease;}
.pain-card:hover .icon{transform:scale(1.1) rotate(-4deg);}
.pain-card h3{font-size:0.96rem; margin-bottom:6px;}
.pain-card p{font-size:0.87rem; color:var(--ink-soft); font-family:'Inter';}
.arrow-row{display:flex; align-items:center; justify-content:center; gap:10px; color:var(--ink-faint); font-family:'IBM Plex Mono'; font-size:0.74rem; margin:28px 0; text-transform:uppercase; letter-spacing:0.06em;}
.arrow-row .line{flex:1; height:1px; border-top:1px dashed var(--line-strong); position:relative; overflow:hidden;}
.arrow-row .line::after{content:''; position:absolute; top:0; left:-100%; width:100%; height:1px; background:var(--accent); animation:lineFlow 2.2s linear infinite;}
@keyframes lineFlow{to{left:100%;}}
.benefit-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.benefit-card{background:var(--ink); border-radius:8px; padding:22px; color:#fff; transition:transform .25s ease, box-shadow .25s ease; position:relative; overflow:hidden;}
.benefit-card::before{content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent); transition:left .55s ease;}
.benefit-card:hover{transform:translateY(-4px); box-shadow:0 18px 40px -22px rgba(23,30,35,0.35);}
.benefit-card:hover::before{left:100%;}
.benefit-card h3{font-size:0.96rem; margin-bottom:6px; color:#fff;}
.benefit-card p{font-size:0.87rem; color:rgba(255,255,255,0.72); font-family:'Inter';}
.service-receipt{background:var(--paper); border:1px solid var(--line-strong); border-radius:10px; padding:8px 0; box-shadow:0 20px 40px -28px rgba(23,30,35,0.25); overflow:hidden;}
.sr-head{display:flex; justify-content:space-between; padding:16px 26px; border-bottom:1px dashed var(--line-strong); font-family:'IBM Plex Mono'; font-size:0.72rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.06em;}
.sr-item{display:grid; grid-template-columns:210px 1fr 150px; gap:18px; align-items:center; padding:18px 26px; border-bottom:1px dashed var(--line); position:relative; overflow:hidden; transition:background .25s ease, transform .25s ease;}
.sr-item::before{content:''; position:absolute; top:0; bottom:0; left:-60%; width:40%; background:linear-gradient(90deg, transparent, rgba(14,148,136,0.18), transparent); transform:skewX(-20deg); transition:left .7s ease;}
.sr-item:hover::before{left:120%;}
.sr-item:last-of-type{border-bottom:none;}
.sr-item:hover{background:var(--accent-tint); transform:translateX(4px);}
.sr-name{font-family:'IBM Plex Mono'; font-weight:700; font-size:0.92rem; transition:color .2s ease;}
.sr-item:hover .sr-name{color:var(--accent-dark);}
.sr-name span{display:block; font-family:'IBM Plex Mono'; font-weight:400; font-size:0.68rem; color:var(--accent-dark); text-transform:uppercase; margin-top:3px; letter-spacing:0.04em;}
.sr-desc{font-size:0.85rem; color:var(--ink-soft); font-family:'Inter';}
.sr-desc b{color:var(--ink); font-weight:600;}
.sr-price{font-family:'IBM Plex Mono'; font-weight:700; color:var(--stamp); font-size:0.88rem; text-align:right; transition:transform .25s ease;}
.sr-item:hover .sr-price{transform:scale(1.05);}
.sr-price span{display:block; font-weight:400; color:var(--ink-faint); font-size:0.68rem; margin-top:3px;}
.sr-price .cuotas{color:var(--accent-dark);}
.sr-foot{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; padding:18px 26px; font-family:'IBM Plex Mono'; font-size:0.78rem; color:var(--ink-soft);}
.sr-foot b{color:var(--ink);}
.process-strip{display:grid; grid-template-columns:repeat(4,1fr); background:var(--paper); border:1px solid var(--line-strong); border-radius:8px; overflow:hidden; position:relative;}
.process-line{position:absolute; top:36px; left:12.5%; right:12.5%; height:2px; background:var(--line); z-index:0;}
.process-line-fill{height:100%; width:0%; background:var(--accent); transition:width 1.2s cubic-bezier(.22,1,.4,1);}
.proc-step{padding:24px 20px; border-right:1px dashed var(--line-strong); position:relative; z-index:1;}
.proc-step:last-child{border-right:none;}
.proc-num{font-family:'IBM Plex Mono'; font-size:0.76rem; color:var(--accent-dark); margin-bottom:10px; display:block; width:34px; height:34px; border-radius:50%; background:var(--accent-tint); display:flex; align-items:center; justify-content:center; border:1px solid rgba(14,148,136,0.15); transition:transform .3s ease, background .3s ease;}
.proc-step:hover .proc-num{transform:scale(1.1); background:rgba(14,148,136,0.15);}
.proc-step h3{font-size:0.92rem; margin-bottom:6px;}
.proc-step p{font-size:0.82rem; color:var(--ink-soft); font-family:'Inter';}
.case{background:var(--ink); border-radius:14px; padding:38px; color:#fff; display:grid; grid-template-columns:1fr 0.85fr; gap:36px; align-items:center; position:relative; overflow:hidden;}
.case::before{content:''; position:absolute; top:-50%; right:-20%; width:500px; height:500px; background:radial-gradient(circle, rgba(14,148,136,0.15), transparent 70%); pointer-events:none; animation:caseGlow 7s ease-in-out infinite;}
@keyframes caseGlow{0%,100%{transform:scale(1); opacity:.6;} 50%{transform:scale(1.15); opacity:1;}}
.case-label{font-family:'IBM Plex Mono'; font-size:0.7rem; color:#8FE0D3; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:14px; display:block;}
.case h3{color:#fff; font-size:1.3rem; margin-bottom:14px; font-family:'IBM Plex Mono'; position:relative; z-index:1;}
.case-line{display:flex; gap:10px; font-size:0.87rem; color:rgba(255,255,255,0.78); margin-bottom:10px; align-items:flex-start; font-family:'Inter'; position:relative; z-index:1;}
.case-line b{color:#fff; min-width:84px; font-weight:700; font-family:'IBM Plex Mono'; font-size:0.7rem; margin-top:2px;}
.case-disclaimer{font-size:0.72rem; color:rgba(255,255,255,0.42); margin-top:16px; font-family:'Inter'; position:relative; z-index:1;}
.phone{background:#0D1417; border-radius:26px; padding:12px; box-shadow:0 20px 40px -16px rgba(0,0,0,0.5); max-width:260px; margin:0 auto; transition:transform .35s cubic-bezier(.22,1,.4,1); animation:phoneFloat 5s ease-in-out infinite; position:relative; z-index:1;}
@keyframes phoneFloat{0%,100%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(-8px) rotate(0.5deg);}}
.phone:hover{transform:translateY(-12px) rotate(-1deg) scale(1.02);}
.phone-screen{background:#ECE5DD; border-radius:16px; overflow:hidden; height:340px; display:flex; flex-direction:column;}
.phone-bar{background:var(--accent-dark); color:#fff; padding:11px 14px; display:flex; align-items:center; gap:9px; font-family:'IBM Plex Mono'; font-weight:600; font-size:0.78rem;}
.phone-bar .avatar{width:26px; height:26px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; color:var(--accent-dark); font-size:0.68rem; font-weight:800;}
.phone-bar .status{font-size:0.6rem; font-weight:400; opacity:0.8; display:block;}
.chat{flex:1; padding:12px; display:flex; flex-direction:column; gap:7px; overflow:hidden;}
.bubble{max-width:80%; padding:8px 10px; border-radius:11px; font-size:0.74rem; font-family:'Inter'; opacity:0; transform:translateY(6px) scale(0.96); animation:pop .4s ease forwards;}
.bubble.in{align-self:flex-start; background:#fff; border-bottom-left-radius:3px;}
.bubble.out{align-self:flex-end; background:#D9FDD3; border-bottom-right-radius:3px;}
.bubble b{display:block; font-size:0.6rem; color:var(--accent-dark); margin-bottom:2px; font-family:'IBM Plex Mono';}
@keyframes pop{to{opacity:1; transform:translateY(0) scale(1);}}
.cutline{display:flex; align-items:center; gap:10px; color:var(--ink-faint); font-family:'IBM Plex Mono'; font-size:0.7rem; margin:8px 0 0; position:relative;}
.cutline .dash{flex:1; border-top:1px dashed var(--line-strong); position:relative; overflow:visible;}
.cutline .scissors{display:inline-block; animation:scissorsMove 3s ease-in-out infinite;}
@keyframes scissorsMove{0%,100%{transform:translateX(0) rotate(0deg);} 50%{transform:translateX(8px) rotate(-14deg);}}
.plan-toggle{display:inline-flex; background:var(--paper); border:1px solid var(--line-strong); border-radius:100px; padding:4px; margin-bottom:20px; position:relative;}
.plan-toggle::before{content:''; position:absolute; top:4px; bottom:4px; width:calc(50% - 4px); background:var(--ink); border-radius:100px; transition:transform .3s cubic-bezier(.22,1,.4,1); left:4px;}
.plan-toggle.cuotas::before{transform:translateX(100%);}
.pt-btn{border:none; background:transparent; padding:9px 18px; border-radius:100px; font-family:'IBM Plex Mono'; font-size:0.8rem; font-weight:600; color:var(--ink-soft); cursor:pointer; transition:color .25s ease; position:relative; z-index:1;}
.pt-btn.active{color:#fff;}
.plan-cards{margin-bottom:20px; position:relative; min-height:220px;}
.plan-card{background:var(--paper); border:1px solid var(--line-strong); border-radius:10px; padding:24px; position:absolute; inset:0; transition:opacity .35s ease, transform .35s cubic-bezier(.22,1,.4,1);}
.plan-card.hidden{opacity:0; pointer-events:none; transform:translateX(20px);}
.plan-tag{display:inline-block; color:var(--accent-dark); background:var(--accent-tint); padding:4px 10px; border-radius:4px; font-size:0.68rem; margin-bottom:10px;}
.plan-card h3{font-size:1.05rem; margin-bottom:8px;}
.plan-card p{font-size:0.88rem; color:var(--ink-soft); font-family:'Inter'; margin-bottom:12px;}
.plan-card p b{color:var(--ink);}
.plan-list{list-style:none; display:flex; flex-direction:column; gap:6px;}
.plan-list li{font-size:0.85rem; color:var(--ink-soft); font-family:'Inter'; padding-left:18px; position:relative;}
.plan-list li::before{content:'✓'; position:absolute; left:0; color:var(--accent-dark); font-weight:700;}
.price-band{display:flex; justify-content:space-between; align-items:center; background:var(--stamp-tint); border:1px dashed var(--stamp); border-radius:8px; padding:22px 26px; flex-wrap:wrap; gap:16px; transition:transform .25s ease, box-shadow .25s ease;}
.price-band:hover{transform:translateY(-3px); box-shadow:0 14px 30px -18px rgba(178,58,46,0.25);}
.addon-card{background:var(--paper); border:1px solid var(--line-strong); border-radius:10px; padding:20px 22px; margin-bottom:20px; transition:border-color .25s ease, box-shadow .25s ease;}
.addon-card:hover{border-color:var(--accent); box-shadow:0 12px 30px -22px rgba(14,148,136,0.2);}
.addon-card.active{border-color:var(--accent); box-shadow:0 12px 30px -22px rgba(14,148,136,0.18);}
.addon-row{display:flex; gap:16px; align-items:flex-start;}
.addon-text h3{font-size:0.98rem; display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px;}
.addon-price{font-size:0.72rem; color:var(--accent-dark); background:var(--accent-tint); padding:3px 9px; border-radius:4px; font-weight:600;}
.addon-text p{font-size:0.85rem; color:var(--ink-soft); font-family:'Inter';}
.addon-text p b{color:var(--ink);}
.addon-note{font-size:0.72rem; color:var(--ink-faint); margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); transition:color .25s ease;}
.addon-card.active .addon-note{color:var(--accent-dark);}
.switch{position:relative; display:inline-block; width:42px; height:24px; flex-shrink:0; margin-top:2px; cursor:pointer;}
.switch input{opacity:0; width:0; height:0;}
.slider{position:absolute; cursor:pointer; inset:0; background:var(--line-strong); border-radius:100px; transition:.25s;}
.slider::before{content:''; position:absolute; height:18px; width:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.25s cubic-bezier(.34,1.7,.6,1);}
.switch input:checked + .slider{background:var(--accent);}
.switch input:checked + .slider::before{transform:translateX(18px);}
.price-band .txt{font-size:0.95rem; font-family:'Inter';}
.price-band .txt b{color:var(--ink); font-family:'IBM Plex Mono';}
.price-band .txt span{display:block; color:var(--ink-soft); font-size:0.83rem; margin-top:4px;}
.faq-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.faq-item{background:var(--paper); border:1px solid var(--line-strong); border-radius:8px; padding:20px; transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;}
.faq-item:hover{transform:translateY(-2px); box-shadow:0 12px 28px -22px rgba(23,30,35,0.15);}
.faq-item.open{border-color:var(--accent); box-shadow:0 12px 28px -22px rgba(14,148,136,0.18);}
.faq-item h3{font-size:0.92rem; margin-bottom:0; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:10px;}
.faq-item h3::after{content:'+'; font-family:'IBM Plex Mono'; color:var(--accent-dark); font-size:1.1rem; transition:transform .3s cubic-bezier(.34,1.7,.6,1); flex-shrink:0;}
.faq-item.open h3::after{transform:rotate(225deg);}
.faq-item p{font-size:0.85rem; color:var(--ink-soft); font-family:'Inter'; max-height:0; opacity:0; overflow:hidden; transition:max-height .4s cubic-bezier(.22,1,.4,1), opacity .3s ease, margin-top .4s ease;}
.faq-item.open p{max-height:220px; opacity:1; margin-top:10px;}
.final-cta{text-align:center; padding:90px 0 110px; position:relative;}
.final-cta h2{font-size:1.9rem; margin-bottom:14px;}
.final-cta p{color:var(--ink-soft); margin-bottom:26px; font-size:1rem; font-family:'Inter';}
.final-cta .btn-stamp{animation:ctaPulse 3s ease-in-out infinite;}
@keyframes ctaPulse{0%,100%{box-shadow:0 0 0 0 rgba(178,58,46,0);} 50%{box-shadow:0 0 0 8px rgba(178,58,46,0.12);}}
footer{border-top:1px dashed var(--line-strong); padding:26px 0 96px; font-size:0.78rem; color:var(--ink-faint); font-family:'IBM Plex Mono'; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}
.sticky-cta{display:none; position:fixed; bottom:0; left:0; right:0; z-index:60; background:var(--paper); border-top:1px solid var(--line-strong); padding:12px 16px; box-shadow:0 -8px 24px rgba(23,30,35,0.1); transform:translateY(100%); animation:stickyUp .5s cubic-bezier(.22,1.6,.4,1) 1.2s forwards;}
@keyframes stickyUp{to{transform:translateY(0);}}
.sticky-cta .btn{width:100%; justify-content:center; padding:14px;}
/* ---------- SERVICES GRID WITH PREVIEWS ---------- */
.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.service-card{
    background:var(--paper); border:1px solid var(--line-strong); border-radius:10px;
    overflow:hidden; display:flex; flex-direction:column;
    transition:transform .35s cubic-bezier(.22,1,.4,1), box-shadow .35s ease, border-color .35s ease;
  }
.service-card:hover{transform:translateY(-6px); box-shadow:0 24px 48px -24px rgba(23,30,35,0.22); border-color:var(--accent);}
.service-preview{
    height:210px; background:linear-gradient(135deg, #f7f5ef, #edeae0); border-bottom:1px dashed var(--line-strong);
    display:flex; align-items:center; justify-content:center; padding:18px; position:relative; overflow:hidden;
  }
.service-preview::before{
    content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 0%, rgba(14,148,136,0.06), transparent 60%); opacity:0; transition:opacity .4s ease;
  }
.service-card:hover .service-preview::before{opacity:1;}
.service-meta{padding:20px; display:flex; flex-direction:column; flex:1;}
.service-tag{font-size:0.65rem; color:var(--accent-dark); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:8px;}
.service-meta h3{font-size:1rem; margin-bottom:8px;}
.service-meta p{font-size:0.84rem; color:var(--ink-soft); font-family:'Inter'; line-height:1.55; margin-bottom:16px; flex:1;}
.service-foot{display:flex; justify-content:space-between; align-items:center; padding-top:14px; border-top:1px dashed var(--line);}
.service-foot .time{font-size:0.7rem; color:var(--ink-faint);}
.service-foot .price{font-size:0.9rem; color:var(--stamp); font-weight:700;}
.service-foot .price small{font-weight:400; color:var(--accent-dark); font-size:0.68rem; display:block; margin-top:2px;}
.services-footer{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; padding:18px 26px; font-family:'IBM Plex Mono'; font-size:0.78rem; color:var(--ink-soft); background:var(--paper); border:1px solid var(--line-strong); border-radius:10px; margin-top:16px;}
.services-footer b{color:var(--ink);}
/* Preview: browser */
.preview-browser{width:100%; max-width:210px; background:#fff; border-radius:9px; box-shadow:0 12px 28px -12px rgba(23,30,35,0.25); overflow:hidden; transform:scale(1); transition:transform .4s ease;}
.service-card:hover .preview-browser{transform:scale(1.03) translateY(-3px);}
.pb-top{display:flex; align-items:center; gap:8px; padding:6px 10px; background:var(--ink); border-bottom:1px solid rgba(255,255,255,0.08);}
.pb-dots{display:flex; gap:4px;}
.pb-dots span{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.25);}
.pb-dots span:nth-child(1){background:#FF5F56;}
.pb-dots span:nth-child(2){background:#FFBD2E;}
.pb-dots span:nth-child(3){background:#27C93F;}
.pb-tabs{display:flex; gap:8px;}
.pb-tabs span{font-size:0.45rem; color:rgba(255,255,255,0.5); font-family:'IBM Plex Mono'; padding:2px 6px; border-radius:3px; background:rgba(255,255,255,0.05);}
.pb-tabs span.active{color:#fff; background:rgba(255,255,255,0.15);}
.pb-address{display:flex; align-items:center; gap:6px; padding:5px 10px; background:#f7f5ef; border-bottom:1px solid var(--line);}
.pb-address svg:first-child{width:9px; height:9px; color:var(--accent-dark);}
.pb-address svg:last-child{width:9px; height:9px; color:#FFB800;}
.pb-address span{flex:1; font-size:0.5rem; color:var(--ink-soft); font-family:'IBM Plex Mono'; text-align:center; background:#fff; padding:2px 8px; border-radius:3px; border:1px solid var(--line);}
.pb-body{padding:8px;}
.pb-nav{display:flex; align-items:center; gap:8px; margin-bottom:8px;}
.pb-logo{width:14px; height:14px; border-radius:50%; background:var(--accent); margin-right:auto;}
.pb-nav span{font-size:0.45rem; color:var(--ink-soft); font-family:'Inter';}
.pb-cta{margin-left:auto; font-size:0.45rem; background:var(--accent); color:#fff; padding:2px 7px; border-radius:3px; font-family:'IBM Plex Mono'; font-weight:600;}
.pb-hero{display:flex; gap:8px; background:linear-gradient(135deg, var(--accent-tint), #fff); border-radius:6px; padding:8px; margin-bottom:8px;}
.pb-hero-text{display:flex; flex-direction:column; gap:4px; flex:1;}
.pb-hero-text strong{font-size:0.62rem; color:var(--ink); font-family:'IBM Plex Mono'; line-height:1.2;}
.pb-hero-text > span{font-size:0.45rem; color:var(--ink-soft); font-family:'Inter'; line-height:1.3;}
.pb-chip{align-self:flex-start; font-size:0.4rem; color:var(--accent-dark); background:#fff; padding:2px 5px; border-radius:3px; font-family:'IBM Plex Mono';}
.pb-btn{align-self:flex-start; font-size:0.42rem; background:var(--ink); color:#fff; padding:3px 7px; border-radius:3px; font-family:'IBM Plex Mono'; margin-top:auto;}
.pb-hero-img{width:34px; height:34px; border-radius:5px; background:linear-gradient(135deg, var(--accent), var(--accent-dark)); opacity:.85;}
.pb-products{display:grid; grid-template-columns:repeat(3,1fr); gap:5px;}
.pb-product{background:#f7f5ef; border-radius:5px; padding:5px; display:flex; flex-direction:column; gap:3px;}
.pb-product div{height:22px; background:var(--line-strong); border-radius:3px;}
.pb-product span{font-size:0.5rem; color:var(--stamp); font-weight:700; font-family:'IBM Plex Mono'; text-align:center;}
/* Preview: whatsapp */
.preview-whatsapp{width:100%; max-width:170px; background:#ECE5DD; border-radius:14px; overflow:hidden; box-shadow:0 12px 28px -12px rgba(23,30,35,0.25); transform:scale(1); transition:transform .4s ease; display:flex; flex-direction:column;}
.service-card:hover .preview-whatsapp{transform:scale(1.04) translateY(-3px);}
.pw-status-bar{display:flex; justify-content:space-between; align-items:center; padding:3px 8px; background:#0B756C; color:rgba(255,255,255,0.8); font-size:0.45rem; font-family:'IBM Plex Mono';}
.pw-bar{display:flex; align-items:center; gap:6px; background:var(--accent-dark); color:#fff; padding:6px 8px;}
.pw-back{font-size:0.8rem; color:rgba(255,255,255,0.7); line-height:1;}
.pw-avatar{width:18px; height:18px; border-radius:50%; background:#fff; color:var(--accent-dark); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.55rem;}
.pw-info{flex:1; display:flex; flex-direction:column;}
.pw-info div{font-size:0.55rem; font-family:'IBM Plex Mono'; font-weight:600;}
.pw-info span{font-size:0.4rem; color:rgba(255,255,255,0.7); font-family:'Inter';}
.pw-icons{display:flex; gap:6px; font-size:0.55rem; color:rgba(255,255,255,0.85);}
.pw-chat{flex:1; padding:8px; display:flex; flex-direction:column; gap:5px; overflow:hidden;}
.pw-date{align-self:center; font-size:0.4rem; color:var(--ink-faint); background:rgba(255,255,255,0.6); padding:1px 6px; border-radius:8px; font-family:'IBM Plex Mono'; margin-bottom:2px;}
.pw-bubble{max-width:88%; padding:5px 7px; border-radius:9px; font-size:0.52rem; font-family:'Inter'; line-height:1.3; position:relative;}
.pw-bubble time{display:block; font-size:0.35rem; color:var(--ink-faint); margin-top:2px; text-align:right;}
.pw-bubble.in{align-self:flex-start; background:#fff; border-bottom-left-radius:2px; box-shadow:0 1px 2px rgba(0,0,0,0.05);}
.pw-bubble.out{align-self:flex-end; background:#D9FDD3; border-bottom-right-radius:2px; box-shadow:0 1px 2px rgba(0,0,0,0.05);}
.pw-bubble.ok{background:#c8f0e9; color:var(--accent-dark);}
.pw-typing{align-self:flex-start; display:flex; gap:2px; padding:5px 7px; background:#fff; border-radius:9px; border-bottom-left-radius:2px; width:28px;}
.pw-typing span{width:4px; height:4px; border-radius:50%; background:var(--ink-faint); animation:typingBounce 1.2s infinite ease-in-out;}
.pw-typing span:nth-child(2){animation-delay:.15s;}
.pw-typing span:nth-child(3){animation-delay:.3s;}
@keyframes typingBounce{0%,60%,100%{transform:translateY(0);} 30%{transform:translateY(-3px);}}
.pw-input{display:flex; align-items:center; gap:5px; padding:5px 8px; background:#fff; border-top:1px solid var(--line);}
.pw-input span:first-child{font-size:0.55rem; color:var(--ink-faint);}
.pw-input span:nth-child(2){flex:1; font-size:0.45rem; color:var(--ink-faint); font-family:'Inter';}
.pw-input span:nth-child(3),.pw-input span:nth-child(4){font-size:0.55rem; color:var(--ink-soft);}
/* Preview: menu QR */
.preview-menu{width:100%; max-width:170px; background:#fff; border-radius:10px; padding:10px; box-shadow:0 12px 28px -12px rgba(23,30,35,0.22); transform:scale(1); transition:transform .4s ease; display:flex; flex-direction:column;}
.service-card:hover .preview-menu{transform:scale(1.03) translateY(-3px);}
.pm-header{display:flex; flex-direction:column; align-items:center; margin-bottom:8px;}
.pm-logo{width:20px; height:20px; border-radius:50%; background:var(--stamp); margin-bottom:4px;}
.pm-title{font-family:'IBM Plex Mono'; font-size:0.7rem; font-weight:700; color:var(--ink);}
.pm-sub{font-size:0.45rem; color:var(--ink-faint); font-family:'Inter';}
.pm-tabs{display:flex; gap:4px; margin-bottom:8px; border-bottom:1px solid var(--line); padding-bottom:5px;}
.pm-tabs span{flex:1; text-align:center; font-size:0.45rem; color:var(--ink-soft); padding:2px 0; border-radius:3px; font-family:'IBM Plex Mono';}
.pm-tabs span.active{background:var(--accent-tint); color:var(--accent-dark); font-weight:600;}
.pm-list{display:flex; flex-direction:column; gap:6px; flex:1;}
.pm-dish{display:flex; align-items:center; gap:6px;}
.pm-thumb{width:22px; height:22px; border-radius:4px; background:var(--line-strong); flex-shrink:0;}
.pm-info{flex:1; min-width:0;}
.pm-info strong{display:block; font-size:0.52rem; color:var(--ink); font-family:'Inter'; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pm-info span{display:block; font-size:0.4rem; color:var(--ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pm-right{display:flex; align-items:center; gap:4px;}
.pm-right span{font-size:0.55rem; color:var(--ink); font-weight:700; font-family:'IBM Plex Mono';}
.pm-right button{width:14px; height:14px; border-radius:50%; border:none; background:var(--accent); color:#fff; font-size:0.7rem; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer;}
.pm-qr{display:flex; align-items:center; justify-content:center; gap:6px; margin-top:8px; padding-top:6px; border-top:1px dashed var(--line); color:var(--accent-dark); font-size:0.48rem; font-family:'IBM Plex Mono';}
.pm-qr svg{width:14px; height:14px;}
/* Preview: POS */
.preview-pos{width:100%; max-width:210px; height:100%; background:#fff; border-radius:9px; overflow:hidden; box-shadow:0 12px 28px -12px rgba(23,30,35,0.25); transform:scale(1); transition:transform .4s ease; display:flex;}
.service-card:hover .preview-pos{transform:scale(1.03) translateY(-3px);}
.pos-sidebar{width:42px; background:var(--ink); padding:6px 4px; display:flex; flex-direction:column; gap:4px;}
.pos-cat{font-size:0.38rem; color:rgba(255,255,255,0.6); padding:4px 2px; border-radius:3px; text-align:center; font-family:'IBM Plex Mono';}
.pos-cat.active{background:rgba(255,255,255,0.12); color:#fff;}
.pos-main{flex:1; display:flex; padding:6px; gap:5px;}
.pos-products{display:grid; grid-template-columns:1fr 1fr; gap:4px; flex:1;}
.pos-prod{background:#f7f5ef; border-radius:4px; padding:4px; display:flex; flex-direction:column; gap:2px; align-items:center; text-align:center;}
.pos-prod div{width:20px; height:16px; background:var(--line-strong); border-radius:2px;}
.pos-prod span{font-size:0.42rem; color:var(--ink); font-weight:600; font-family:'Inter';}
.pos-prod small{font-size:0.4rem; color:var(--stamp); font-family:'IBM Plex Mono';}
.pos-ticket{width:70px; background:#faf9f5; border:1px solid var(--line); border-radius:5px; padding:6px; display:flex; flex-direction:column; gap:3px;}
.pos-ticket-head{font-size:0.42rem; color:var(--ink-faint); text-align:center; border-bottom:1px dashed var(--line); padding-bottom:3px; margin-bottom:3px; font-family:'IBM Plex Mono';}
.pos-line{display:flex; justify-content:space-between; font-size:0.4rem; font-family:'Inter'; color:var(--ink-soft);}
.pos-totals{margin-top:auto; border-top:1px dashed var(--line); padding-top:4px; display:flex; flex-direction:column; gap:2px;}
.pos-totals > div{display:flex; justify-content:space-between; font-size:0.4rem; color:var(--ink-soft); font-family:'Inter';}
.pos-grand{font-weight:700; color:var(--ink); font-family:'IBM Plex Mono'; margin-top:2px;}
.pos-pay{margin-top:5px; background:var(--accent); color:#fff; text-align:center; font-size:0.45rem; font-family:'IBM Plex Mono'; font-weight:700; padding:4px 0; border-radius:3px;}
/* Preview: dashboard */
.preview-dashboard{width:100%; max-width:210px; height:100%; background:#fff; border-radius:9px; overflow:hidden; box-shadow:0 12px 28px -12px rgba(23,30,35,0.22); transform:scale(1); transition:transform .4s ease; display:flex;}
.service-card:hover .preview-dashboard{transform:scale(1.03) translateY(-3px);}
.dash-sidebar{width:36px; background:var(--ink); padding:8px 4px; display:flex; flex-direction:column; gap:6px; align-items:center;}
.dash-logo{width:14px; height:14px; border-radius:3px; background:var(--accent); margin-bottom:6px;}
.dash-sidebar span{width:100%; font-size:0.32rem; color:rgba(255,255,255,0.55); text-align:center; padding:3px 1px; border-radius:3px; font-family:'IBM Plex Mono';}
.dash-sidebar span.active{background:rgba(255,255,255,0.1); color:#fff;}
.dash-content{flex:1; padding:7px; display:flex; flex-direction:column; gap:6px;}
.dash-top{display:flex; justify-content:space-between; align-items:center;}
.dash-top strong{font-size:0.55rem; color:var(--ink); font-family:'IBM Plex Mono';}
.dash-avatar{width:16px; height:16px; border-radius:50%; background:var(--accent); color:#fff; font-size:0.45rem; display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono'; font-weight:700;}
.dash-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:4px;}
.dash-stat{background:#f7f5ef; border-radius:4px; padding:5px; text-align:center;}
.dash-stat span{display:block; font-size:0.38rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.02em;}
.dash-stat strong{display:block; font-size:0.65rem; color:var(--ink); font-family:'IBM Plex Mono';}
.dash-stat small{display:block; font-size:0.35rem; color:var(--accent-dark); font-weight:600;}
.dash-chart{background:#f7f5ef; border-radius:4px; padding:6px;}
.dash-chart-title{font-size:0.4rem; color:var(--ink-faint); margin-bottom:4px; font-family:'IBM Plex Mono';}
.dash-bars{display:flex; align-items:flex-end; justify-content:space-between; gap:4px; height:38px;}
.dash-bars > div{flex:1; background:var(--accent); border-radius:2px 2px 0 0; opacity:.85; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; position:relative;}
.dash-bars > div:nth-child(odd){opacity:.65;}
.dash-bars > div span{font-size:0.35rem; color:var(--ink-faint); margin-bottom:2px; font-family:'IBM Plex Mono';}
.dash-table{font-size:0.42rem; font-family:'Inter'; color:var(--ink-soft);}
.dash-table > div{display:flex; justify-content:space-between; padding:2px 0; border-bottom:1px dashed var(--line);}
.dash-table > div:first-child{font-weight:700; color:var(--ink); font-family:'IBM Plex Mono';}
.dash-status{font-size:0.35rem; padding:1px 4px; border-radius:3px; font-family:'IBM Plex Mono'; font-weight:700;}
.dash-status.ok{background:#d4edda; color:#155724;}
.dash-status.warn{background:#f8d7da; color:#721c24;}
/* Preview: automation */
.preview-automation{width:100%; max-width:220px; height:100%; position:relative; transform:scale(1); transition:transform .4s ease; display:flex; align-items:center; justify-content:center;}
.service-card:hover .preview-automation{transform:scale(1.03);}
.auto-grid{position:absolute; inset:0; background-image:linear-gradient(rgba(14,148,136,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(14,148,136,0.05) 1px, transparent 1px); background-size:12px 12px;}
.auto-node{position:absolute; background:#fff; border:1px solid var(--line-strong); border-radius:7px; padding:5px 7px; display:flex; align-items:center; gap:5px; box-shadow:0 4px 12px -4px rgba(23,30,35,0.15); z-index:2;}
.auto-icon{width:18px; height:18px; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:0.65rem;}
.auto-node.trigger .auto-icon{background:#fff3cd;}
.auto-node.process .auto-icon{background:#e3f3f1;}
.auto-node.action .auto-icon{background:#f7f5ef;}
.auto-node.success .auto-icon{background:#d4edda;}
.auto-label{display:flex; flex-direction:column;}
.auto-label strong{font-size:0.48rem; color:var(--ink); font-family:'IBM Plex Mono';}
.auto-label span{font-size:0.36rem; color:var(--ink-faint); font-family:'Inter';}
.auto-node.trigger{left:8px; top:50%; transform:translateY(-50%);}
.auto-node.top{left:80px; top:30px; transform:translateY(-50%);}
.auto-node.bottom{left:80px; top:92px; transform:translateY(-50%);}
.auto-node.end{right:8px; top:50%; transform:translateY(-50%);}
.auto-node.success{right:8px; top:50%; transform:translateY(-50%);}
.auto-lines{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1;}
.auto-path{stroke:var(--accent); stroke-width:2; fill:none; stroke-dasharray:4 4; animation:dashFlow 1.2s linear infinite;}
.auto-dot{fill:var(--accent); animation:dotPulse 1.2s ease-in-out infinite;}
.auto-dot:nth-of-type(2){animation-delay:.4s;}
.auto-dot:nth-of-type(3){animation-delay:.8s;}
@keyframes dashFlow{to{stroke-dashoffset:-16;}}
@keyframes dotPulse{0%,100%{opacity:1; r:4;} 50%{opacity:.5; r:3;}}
.auto-log{position:absolute; bottom:4px; left:6px; right:6px; background:rgba(255,255,255,0.95); border:1px solid var(--line); border-radius:4px; padding:4px 5px; display:flex; flex-direction:column; gap:2px; z-index:3;}
.auto-log div{display:flex; justify-content:space-between; font-size:0.34rem; font-family:'IBM Plex Mono'; color:var(--ink-soft);}
.auto-log div span:first-child{color:var(--ink-faint);}
.auto-log div:last-child span:last-child{color:var(--accent-dark); font-weight:700;}