:root{
  /* Paleta oficial: tomada del logo ZUON Pay */
  --ink:#0a1338;
  --ink-soft:#2a3558;
  --muted:#6a7596;
  --paper:#f6f9ff;
  --surface:#ffffff;
  --surface-soft:#edf3ff;
  --line:rgba(8,22,61,.12);
  --line-dark:rgba(255,255,255,.14);
  --blue:#3c38f6;
  --cyan:#01c2d4;
  --mint:#04df9b;
  --violet:#4b3bf2;
  --danger:#ee6b69;
  --warning:#f2ad43;
  --success:#06b889;
  --navy:#0a1338;
  --navy-2:#14245a;
  --gradient:linear-gradient(120deg,var(--blue),var(--cyan) 55%,var(--mint));
  --shadow:0 24px 70px rgba(29,54,113,.16);
  --radius:24px;
  --radius-sm:16px;
  --wrap:1180px;
  --display:'Manrope',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit}
::selection{background:rgba(57,70,244,.2)}

.skip-link{position:fixed;z-index:200;top:12px;left:12px;padding:10px 16px;border-radius:10px;background:#fff;color:var(--ink);transform:translateY(-150%);transition:transform .2s}
.skip-link:focus{transform:translateY(0)}
.wrap{width:min(calc(100% - 40px),var(--wrap));margin-inline:auto}
.wrap-narrow{width:min(calc(100% - 40px),880px);margin-inline:auto}

.site-header{position:sticky;top:0;z-index:100;background:rgba(246,249,255,.82);border-bottom:1px solid transparent;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.nav-shell{min-height:82px;display:flex;align-items:center;gap:34px}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.brand-mark{width:40px;height:30px;display:inline-block;background:url('/assets/img/logo-mark.webp') center/contain no-repeat}
.brand-name{font:800 22px/1 var(--display);letter-spacing:-.04em;color:var(--ink)}
.brand-name span{font-weight:500}
.desktop-nav{display:flex;align-items:center;justify-content:center;gap:28px;margin-left:auto}
.desktop-nav a{font-size:14px;font-weight:600;text-decoration:none;color:var(--ink-soft)}
.desktop-nav a:hover{color:var(--blue)}
.nav-actions{display:flex;align-items:center;gap:18px}
.login-link{font-size:14px;font-weight:600;text-decoration:none;color:var(--ink-soft)}
.mobile-menu{display:none;margin-left:auto;position:relative}
.mobile-menu summary{width:48px;height:48px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.75);display:grid;place-items:center;cursor:pointer;list-style:none;box-shadow:0 10px 30px rgba(31,50,98,.08)}
.mobile-menu summary::-webkit-details-marker{display:none}
.burger,.burger::before,.burger::after{width:20px;height:2px;border-radius:2px;background:var(--ink);display:block;position:relative}
.burger::before,.burger::after{content:"";position:absolute;left:0}
.burger::before{top:-6px}.burger::after{top:6px}
.mobile-panel{position:absolute;right:0;top:58px;width:min(300px,calc(100vw - 40px));padding:12px;background:rgba(255,255,255,.98);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.mobile-panel a{display:flex;align-items:center;min-height:46px;padding:8px 12px;border-radius:10px;text-decoration:none;font-weight:600;color:var(--ink-soft)}
.mobile-panel a:hover{background:var(--surface-soft);color:var(--blue)}
.mobile-panel .btn{margin-top:8px;color:#fff;justify-content:center}

.btn{display:inline-flex;min-height:52px;align-items:center;justify-content:center;gap:10px;padding:13px 22px;border:1px solid transparent;border-radius:999px;text-decoration:none;font-family:var(--display);font-size:15px;font-weight:700;line-height:1.2;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--navy);color:#fff;box-shadow:0 14px 32px rgba(7,20,58,.2)}
.btn-primary:hover{box-shadow:0 18px 40px rgba(7,20,58,.28)}
.btn-gradient{background:var(--gradient);color:#fff;box-shadow:0 14px 34px rgba(57,70,244,.25)}
.btn-ghost{border-color:var(--line);background:rgba(255,255,255,.58);color:var(--ink)}
.btn-light{background:#fff;color:var(--navy)}
.btn-sm{min-height:44px;padding:10px 18px;font-size:14px}

.hero{position:relative;isolation:isolate;overflow:hidden;padding:clamp(80px,10vw,128px) 0 clamp(74px,9vw,112px);background:
  radial-gradient(circle at 73% 26%,rgba(3,217,155,.22),transparent 30%),
  radial-gradient(circle at 47% 55%,rgba(93,92,255,.23),transparent 35%),
  linear-gradient(130deg,#edfbff 0%,#edf0ff 52%,#effdf9 100%)}
.hero::after{content:"";position:absolute;z-index:-1;inset:0;background-image:linear-gradient(rgba(255,255,255,.32) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.32) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.24),transparent 75%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(380px,.96fr);align-items:center;gap:clamp(48px,7vw,92px)}
.kicker{margin:0 0 22px;color:#566585;font-size:12px;font-weight:700;letter-spacing:.19em;text-transform:uppercase}
.hero h1,.page-hero h1{max-width:780px;margin:0;font:800 clamp(2.8rem,5.6vw,5.35rem)/.99 var(--display);letter-spacing:-.065em;text-wrap:balance}
.page-hero h1{font-size:clamp(2.65rem,5vw,4.75rem)}
.gradient-text{background:var(--gradient);background-clip:text;-webkit-background-clip:text;color:transparent}
.hero-copy>.lead,.page-hero .lead{max-width:650px;margin:28px 0 0;color:var(--ink-soft);font-size:clamp(1.03rem,1.4vw,1.18rem)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.trust-points{display:flex;flex-wrap:wrap;gap:10px 22px;margin:25px 0 0;padding:0;list-style:none;color:var(--muted);font-size:13px;font-weight:500}
.trust-points li{display:flex;align-items:center;gap:8px}
.trust-points li::before{content:"";width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--mint));box-shadow:0 0 0 4px rgba(3,190,222,.09)}

.product-demo{position:relative;max-width:490px;margin-inline:auto;padding:14px;border:1px solid rgba(255,255,255,.9);border-radius:32px;background:rgba(255,255,255,.36);box-shadow:var(--shadow);backdrop-filter:blur(16px)}
.demo-top{display:flex;align-items:center;gap:12px;padding:10px 8px 18px;border-bottom:1px solid var(--line)}
.demo-top .brand-mark{width:30px;height:23px}
.demo-top strong{display:block;font:700 15px var(--display)}
.demo-top small{display:block;color:var(--muted)}
.live-dot{width:9px;height:9px;border-radius:50%;background:var(--mint);margin-left:auto;box-shadow:0 0 0 5px rgba(4,217,155,.1)}
.receipt-card{width:72%;margin:18px 0 16px auto;padding:17px;border-radius:18px;background:#fff;box-shadow:0 8px 24px rgba(37,55,102,.08)}
.receipt-card span{display:block;color:var(--muted);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.receipt-card strong{display:block;margin-top:7px;font:800 23px var(--display)}
.receipt-lines{margin-top:12px;display:grid;gap:6px}.receipt-lines i{height:5px;border-radius:6px;background:#dfe5f2}.receipt-lines i:last-child{width:62%}
.result-card{position:relative;width:78%;padding:19px;border-radius:18px;background:#fff;box-shadow:0 16px 36px rgba(37,55,102,.11)}
.result-label{display:flex;align-items:center;gap:8px;color:var(--danger);font-weight:800;font-size:13px;letter-spacing:.04em}
.result-label::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor}
.result-card dl{display:grid;grid-template-columns:1fr auto;gap:8px;margin:14px 0;padding-bottom:14px;border-bottom:1px solid var(--line);font-size:13px}
.result-card dt{color:var(--muted)}.result-card dd{margin:0;font-weight:700;text-align:right}
.result-action{margin:0;font-size:13px;font-weight:700}
.demo-caption{margin:16px 6px 4px;color:var(--muted);font-size:12px;text-align:center}
.sim-label{position:absolute;right:18px;top:-16px;padding:7px 12px;border-radius:999px;background:var(--navy);color:#fff;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}

.evidence-band{background:var(--navy);color:#fff;padding:32px 0}
.evidence-grid{display:grid;grid-template-columns:1.2fr repeat(3,.72fr);align-items:center;gap:26px}
.evidence-intro{color:rgba(255,255,255,.72);font-size:13px}.evidence-intro strong{display:block;margin-bottom:4px;color:#fff;font:700 16px var(--display)}
.evidence-stat{padding-left:24px;border-left:1px solid var(--line-dark)}
.evidence-stat strong{display:block;font:800 clamp(1.65rem,3vw,2.35rem)/1 var(--display);background:linear-gradient(120deg,#fff,#66eed0);background-clip:text;-webkit-background-clip:text;color:transparent}
.evidence-stat span{display:block;margin-top:7px;color:rgba(255,255,255,.65);font-size:12px}

.section{padding:clamp(76px,9vw,120px) 0}
.section-alt{background:#edf3ff}
.section-dark{background:var(--navy);color:#fff}
.section-head{max-width:740px;margin-bottom:48px}
.section-head.center{margin-inline:auto;text-align:center}
.section-head h2{margin:0;font:800 clamp(2rem,4vw,3.45rem)/1.08 var(--display);letter-spacing:-.05em;text-wrap:balance}
.section-head .lead{margin:18px 0 0;color:var(--muted);font-size:1.05rem}
.section-dark .section-head .lead{color:rgba(255,255,255,.68)}

.journey{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;counter-reset:journey}
.journey-step{position:relative;min-height:210px;padding:24px;border:1px solid var(--line);border-radius:var(--radius-sm);background:rgba(255,255,255,.72)}
.journey-step::before{counter-increment:journey;content:"0" counter(journey);display:block;margin-bottom:28px;color:var(--blue);font:800 13px var(--display);letter-spacing:.12em}
.journey-step:not(:last-child)::after{content:"→";position:absolute;z-index:2;right:-14px;top:50%;width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--blue);font-weight:800}
.journey-step strong{display:block;font:750 18px/1.25 var(--display)}
.journey-step p{margin:10px 0 0;color:var(--muted);font-size:14px}

.product-grid{display:grid;grid-template-columns:1.18fr .82fr;gap:22px}
.product-card{position:relative;overflow:hidden;min-height:430px;padding:clamp(30px,4vw,48px);border:1px solid var(--line);border-radius:30px;background:#fff;box-shadow:0 20px 60px rgba(29,54,113,.1)}
.product-card.featured{color:#fff;background:
  radial-gradient(circle at 85% 10%,rgba(4,217,155,.22),transparent 33%),
  radial-gradient(circle at 20% 90%,rgba(57,70,244,.35),transparent 38%),var(--navy)}
.product-badge{display:inline-flex;padding:7px 11px;border-radius:999px;background:var(--surface-soft);color:var(--blue);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.featured .product-badge{background:rgba(255,255,255,.1);color:#72eed1}
.product-card h3{margin:24px 0 0;font:800 clamp(2rem,3.2vw,3rem)/1.05 var(--display);letter-spacing:-.05em}
.product-card>p{max-width:540px;margin:18px 0 0;color:var(--muted)}
.featured>p{color:rgba(255,255,255,.72)}
.product-list{margin:28px 0 34px;padding:0;list-style:none;display:grid;gap:10px;color:var(--ink-soft);font-size:14px}
.featured .product-list{color:rgba(255,255,255,.82)}
.product-list li{display:flex;gap:10px}.product-list li::before{content:"✓";color:var(--mint);font-weight:800}

.case-card{display:grid;grid-template-columns:.86fr 1.14fr;overflow:hidden;border:1px solid var(--line);border-radius:32px;background:#fff;box-shadow:var(--shadow)}
.case-numbers{padding:clamp(34px,5vw,58px);background:linear-gradient(145deg,var(--navy),#182963);color:#fff}
.case-numbers .big{display:block;font:800 clamp(3.1rem,6vw,5.8rem)/.9 var(--display);letter-spacing:-.07em;background:linear-gradient(120deg,#fff,#66eed0);background-clip:text;-webkit-background-clip:text;color:transparent}
.case-numbers p{margin:14px 0 0;color:rgba(255,255,255,.68)}
.case-copy{padding:clamp(34px,5vw,58px)}
.case-copy h3{margin:0;font:800 clamp(1.75rem,3vw,2.5rem)/1.12 var(--display);letter-spacing:-.04em}
.case-copy p{margin:17px 0 0;color:var(--muted)}
.case-meta{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}.case-meta span{padding:7px 11px;border-radius:999px;background:var(--surface-soft);font-size:12px;font-weight:700;color:var(--ink-soft)}

.trust-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:42px;align-items:start}
.trust-copy h2{margin:0;font:800 clamp(2.2rem,4.2vw,3.8rem)/1.05 var(--display);letter-spacing:-.055em}
.trust-copy p{color:rgba(255,255,255,.68)}
.trust-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.trust-card{padding:24px;border:1px solid var(--line-dark);border-radius:18px;background:rgba(255,255,255,.06)}
.trust-card strong{display:block;font:700 17px var(--display)}
.trust-card p{margin:10px 0 0;color:rgba(255,255,255,.65);font-size:13px}

.page-hero{position:relative;overflow:hidden;padding:clamp(72px,9vw,112px) 0;background:
  radial-gradient(circle at 80% 20%,rgba(4,217,155,.2),transparent 32%),
  radial-gradient(circle at 45% 60%,rgba(57,70,244,.22),transparent 38%),
  linear-gradient(135deg,#effbff,#eef1ff 60%,#effcf8)}
.page-hero-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(360px,.94fr);align-items:center;gap:clamp(42px,7vw,86px)}
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;color:var(--muted);font-size:13px}.breadcrumb a{text-decoration:none}.breadcrumb a:hover{color:var(--blue)}

.states-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.state-card{padding:26px;border:1px solid var(--line);border-radius:20px;background:#fff}
.state-head{display:flex;align-items:center;gap:10px;font:750 16px var(--display)}
.state-head i{width:10px;height:10px;border-radius:50%;background:currentColor}
.state-ok .state-head{color:var(--success)}.state-warn .state-head{color:var(--warning)}.state-risk .state-head{color:var(--danger)}
.state-card p{margin:12px 0 0;color:var(--muted);font-size:14px}.state-card b{display:block;margin-top:18px;color:var(--ink);font-size:13px}

.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:how}
.how-card{padding:28px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.75)}
.how-card::before{counter-increment:how;content:"0" counter(how);display:block;margin-bottom:24px;color:var(--blue);font:800 13px var(--display);letter-spacing:.1em}
.how-card h3{margin:0;font:750 20px var(--display)}.how-card p{margin:11px 0 0;color:var(--muted);font-size:14px}

.scenario-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.scenario-card{padding:28px;border:1px solid var(--line);border-radius:22px;background:#fff;text-decoration:none;transition:transform .2s,box-shadow .2s}
.scenario-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(29,54,113,.1)}
.scenario-card span{color:var(--blue);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.scenario-card h3{margin:14px 0 0;font:750 21px var(--display)}.scenario-card p{margin:10px 0 0;color:var(--muted);font-size:14px}

.cta-section{padding:clamp(74px,9vw,112px) 0;background:
  radial-gradient(circle at 16% 50%,rgba(3,190,222,.15),transparent 30%),
  radial-gradient(circle at 86% 35%,rgba(120,85,255,.18),transparent 34%),#edf3ff}
.cta-panel{padding:clamp(38px,6vw,72px);border:1px solid rgba(255,255,255,.9);border-radius:34px;background:rgba(255,255,255,.64);box-shadow:var(--shadow);text-align:center;backdrop-filter:blur(18px)}
.cta-panel h2{max-width:800px;margin:0 auto;font:800 clamp(2rem,4.4vw,3.8rem)/1.05 var(--display);letter-spacing:-.055em}.cta-panel p{max-width:670px;margin:20px auto 0;color:var(--muted)}.cta-panel .hero-actions{justify-content:center}

.faq{display:grid;gap:12px}.faq details{padding:0 22px;border:1px solid var(--line);border-radius:16px;background:#fff}.faq summary{padding:20px 36px 20px 0;cursor:pointer;font:700 16px var(--display);position:relative;list-style:none}.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";position:absolute;right:0;top:16px;font-size:24px;color:var(--blue)}.faq details[open] summary::after{content:"–"}.faq details p{margin:0;padding:0 0 20px;color:var(--muted)}

.site-footer{padding:52px 0 28px;background:#050f2d;color:#fff}
.footer-grid{display:grid;grid-template-columns:1.3fr .7fr .7fr;gap:36px}.site-footer .brand-name{color:#fff}.footer-copy{max-width:470px;color:rgba(255,255,255,.58);font-size:13px}.footer-links{display:grid;align-content:start;gap:8px}.footer-links strong{margin-bottom:8px;font:700 13px var(--display);letter-spacing:.1em;text-transform:uppercase}.footer-links a{color:rgba(255,255,255,.68);font-size:13px;text-decoration:none}.footer-links a:hover{color:#fff}.footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:42px;padding-top:22px;border-top:1px solid var(--line-dark);color:rgba(255,255,255,.45);font-size:11px}

a:focus-visible,summary:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}

@media(max-width:980px){
  .desktop-nav,.nav-actions .login-link{display:none}.mobile-menu{display:block}.nav-actions{margin-left:auto}.nav-actions .btn{display:none}
  .hero-grid,.page-hero-grid,.trust-grid{grid-template-columns:1fr}.product-demo{margin-top:16px}.hero-copy>.lead{max-width:720px}
  .evidence-grid{grid-template-columns:1fr 1fr}.evidence-intro{grid-column:1/-1}.evidence-stat:nth-child(2){border-left:0;padding-left:0}
  .journey{grid-template-columns:repeat(2,1fr)}.journey-step:not(:last-child)::after{display:none}
  .product-grid,.case-card{grid-template-columns:1fr}.product-card{min-height:0}
  .states-grid,.scenario-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:640px){
  .wrap,.wrap-narrow{width:min(calc(100% - 32px),var(--wrap))}.nav-shell{min-height:72px}.brand-mark{width:36px;height:27px}.brand-name{font-size:20px}
  .hero,.page-hero{padding:58px 0 70px}.hero-grid,.page-hero-grid{gap:48px}.hero h1,.page-hero h1{font-size:clamp(2.35rem,12vw,3.4rem);letter-spacing:-.06em}.hero-copy>.lead,.page-hero .lead{font-size:1rem}.hero-actions{display:grid}.btn{width:100%}
  .product-demo{padding:10px;border-radius:24px}.receipt-card{width:80%}.result-card{width:88%}
  .evidence-grid{grid-template-columns:1fr}.evidence-intro{grid-column:auto}.evidence-stat{padding:16px 0 0;border-left:0;border-top:1px solid var(--line-dark)}
  .section{padding:68px 0}.section-head{margin-bottom:34px}.section-head h2{font-size:2.15rem}
  .journey,.states-grid,.how-grid,.scenario-grid,.trust-cards{grid-template-columns:1fr}.journey-step{min-height:0}
  .product-card,.case-copy,.case-numbers{padding:28px 24px}.product-card h3{font-size:2rem}
  .footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.scenario-card{transition:none}.btn:hover,.scenario-card:hover{transform:none}}

/* ==================================================================
   ZUON Pay — bloques añadidos al fusionar la landing (sept 2026)
   ================================================================== */

/* Demo del hero con varias respuestas (rota con JS; sin JS se ve la primera) */
.demo-stack{display:grid}
.demo-panel{grid-area:1/1;opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.demo-panel.is-active{opacity:1;transform:none;pointer-events:auto}
.result-ok .result-label{color:var(--success)}
.result-warn .result-label{color:var(--warning)}
.result-risk .result-label{color:var(--danger)}
.demo-dots{display:flex;justify-content:center;gap:6px;margin-top:14px}
.demo-dots button{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:var(--line);cursor:pointer;transition:width .3s,background .3s}
.demo-dots button[aria-selected="true"]{width:22px;background:var(--blue)}

/* Cifras de operación (segunda fila de la banda de evidencia) */
.ops-band{background:var(--navy);color:#fff;padding:0 0 34px}
.ops-inner{padding-top:26px;border-top:1px solid var(--line-dark)}
.ops-eyebrow{margin:0 0 18px;color:rgba(255,255,255,.5);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.ops-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.ops-stat strong{display:block;font:800 clamp(1.6rem,3vw,2.3rem)/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;background:var(--gradient);background-clip:text;-webkit-background-clip:text;color:transparent}
.ops-stat strong span{display:inline;font:inherit;color:inherit;margin:0}
.ops-stat>span{display:block;margin-top:7px;color:rgba(255,255,255,.62);font-size:12px}

/* Estado adicional: en espera / no encontrado */
.state-wait .state-head{color:#4c6fa5}

/* Calculadora */
.calc{display:grid;grid-template-columns:1.05fr 1fr;gap:38px;padding:clamp(26px,4vw,40px);border:1px solid rgba(255,255,255,.9);border-radius:28px;background:rgba(255,255,255,.72);box-shadow:var(--shadow)}
.calc-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:grid;gap:6px;margin:0}
.field label{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--muted)}
.field input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);font-size:15px}
.field input:focus{outline:none;border-color:rgba(60,56,246,.55);box-shadow:0 0 0 4px rgba(60,56,246,.12)}
.calc-out{display:grid;gap:18px;align-content:center;padding-left:34px;border-left:1px solid var(--line)}
.calc-label{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.calc-value{display:block;margin-top:4px;font:800 clamp(1.7rem,3.6vw,2.5rem)/1 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums;background:var(--gradient);background-clip:text;-webkit-background-clip:text;color:transparent}
.calc-note{margin:0;max-width:46ch;color:var(--muted);font-size:13px}

/* Planes */
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.plan{position:relative;display:flex;flex-direction:column;gap:14px;padding:28px 24px;border:1px solid var(--line);border-radius:22px;background:#fff}
.plan h3{margin:0;font:800 21px var(--display);letter-spacing:-.03em}
.plan-for{margin:-8px 0 0;color:var(--muted);font-size:13px}
.plan-was{margin:0;color:var(--muted);font-size:13px}.plan-was s{text-decoration-thickness:1px}
.plan-price{display:flex;align-items:baseline;gap:6px;margin:-8px 0 0}
.plan-price strong{font:800 1.75rem/1 var(--display);letter-spacing:-.04em;color:var(--ink)}
.plan-price span{color:var(--muted);font-size:13px}
.plan ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:14px;color:var(--ink-soft)}
.plan li{position:relative;padding-left:18px}.plan li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--gradient)}
.plan .btn{margin-top:auto;width:100%}
.plan-featured{border-color:rgba(60,56,246,.35);box-shadow:0 30px 60px -34px rgba(60,56,246,.55)}
.plan-tag{position:absolute;top:-12px;left:22px;padding:6px 11px;border-radius:999px;background:var(--gradient);color:#fff;font:800 10px var(--display);letter-spacing:.12em;text-transform:uppercase}
.pilot{display:grid;grid-template-columns:1.6fr auto;gap:26px;align-items:center;padding:clamp(26px,4vw,40px);border:1px solid var(--line);border-radius:26px;background:#fff}
.pilot h3{margin:0 0 10px;font:800 22px var(--display);letter-spacing:-.03em}
.pilot p{margin:0;color:var(--muted);font-size:14px}
.pricing-note{margin:18px 0 0;text-align:center;color:var(--muted);font-size:12px}

/* Nota bajo el CTA del formulario */
.cta-note{margin:18px auto 0;max-width:560px;color:var(--muted);font-size:12px}

/* Página de gracias */
.thanks-panel{max-width:720px;margin:0 auto;text-align:center}
.thanks-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:34px 0 0;padding:0;list-style:none;text-align:left;counter-reset:thanks}
.thanks-steps li{padding:22px;border:1px solid var(--line);border-radius:18px;background:#fff}
.thanks-steps li::before{counter-increment:thanks;content:"0" counter(thanks);display:block;margin-bottom:14px;color:var(--blue);font:800 12px var(--display);letter-spacing:.12em}
.thanks-steps strong{display:block;font:750 16px var(--display)}.thanks-steps p{margin:8px 0 0;color:var(--muted);font-size:13px}

@media(max-width:980px){
  .ops-grid{grid-template-columns:1fr 1fr}
  .plans{grid-template-columns:1fr 1fr}
  .calc{grid-template-columns:1fr}.calc-out{padding-left:0;padding-top:22px;border-left:0;border-top:1px solid var(--line)}
}
@media(max-width:640px){
  .ops-grid{grid-template-columns:1fr 1fr;gap:16px}
  .plans{grid-template-columns:1fr}.pilot{grid-template-columns:1fr}.pilot .btn{width:100%}
  .calc-fields{grid-template-columns:1fr 1fr}
  .thanks-steps{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.demo-panel{transition:none}}

/* ==================================================================
   Inicio (zuon.ai) — bloques propios de la home
   ================================================================== */

/* Titular largo del inicio: un escalón por debajo del tamaño base */
.hero .hero-copy h1{font-size:clamp(2.4rem,4.5vw,4.15rem);letter-spacing:-.055em}

/* Conversación del hero: una venta completa sin el dueño */
.chat{position:relative;max-width:470px;margin-inline:auto;padding:14px 14px 16px;border:1px solid rgba(255,255,255,.9);border-radius:30px;background:rgba(255,255,255,.4);box-shadow:var(--shadow);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.chat-top{display:flex;align-items:center;gap:12px;padding:8px 6px 16px;border-bottom:1px solid var(--line)}
.chat-top strong{display:block;font:700 15px var(--display)}.chat-top small{display:block;color:var(--muted);font-size:12px}
.chat-thread{display:grid;gap:9px;padding-top:14px}
.msg{position:relative;max-width:84%;padding:10px 13px 8px;border-radius:16px;font-size:13.5px;line-height:1.45;box-shadow:0 6px 18px rgba(37,55,102,.06)}
.msg time{display:block;margin-top:5px;font-size:10.5px;color:var(--muted);text-align:right}
.msg-in{justify-self:start;background:#fff;border-bottom-left-radius:5px}
.msg-out{justify-self:end;background:#e7fbf1;border-bottom-right-radius:5px}
.msg-tag{position:absolute;top:-9px;right:12px;padding:3px 8px;border-radius:999px;font:800 9.5px var(--display);letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--navy)}
.msg-tag.pay{background:var(--gradient)}
.msg-receipt{display:flex;align-items:center;gap:10px;margin:2px 0 4px;padding:8px 10px;border-radius:10px;background:#f0f3fb;border:1px dashed var(--line)}
.msg-receipt i{flex:none;width:26px;height:34px;border-radius:4px;background:linear-gradient(#fff,#dfe5f2);border:1px solid var(--line)}
.msg-receipt span{font-size:11px;color:var(--muted)}.msg-receipt b{display:block;font:800 14px var(--display);color:var(--ink)}
.msg-out.confirm,.msg-in.confirm{background:#fff;border:1px solid rgba(4,223,155,.45)}
.msg-out.confirm .ok,.msg-in.confirm .ok{display:flex;align-items:center;gap:7px;color:var(--success);font:800 12px var(--display);letter-spacing:.04em}
.msg-out.confirm .ok::before,.msg-in.confirm .ok::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mint)}
.msg-out.confirm dl,.msg-in.confirm dl{display:grid;grid-template-columns:1fr auto;gap:3px 12px;margin:8px 0 0;font-size:12px}
.msg-out.confirm dt,.msg-in.confirm dt{color:var(--muted)}.msg-out.confirm dd,.msg-in.confirm dd{margin:0;font-weight:700;text-align:right}
.chat-caption{margin:14px 6px 0;color:var(--muted);font-size:12px;text-align:center}

/* Un martes cualquiera: la jornada del dueño */
.day{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,6vw,72px);align-items:start}
.day-copy h2{margin:0;font:800 clamp(2rem,4vw,3.3rem)/1.06 var(--display);letter-spacing:-.05em;text-wrap:balance}
.day-copy .lead{margin:18px 0 0;color:var(--muted)}
.day-copy .punch{margin:26px 0 0;padding:20px 22px;border-left:3px solid var(--blue);background:#fff;border-radius:0 16px 16px 0;font:600 17px/1.45 var(--display);color:var(--ink)}
.timeline{list-style:none;margin:0;padding:0;border-left:2px solid var(--line);display:grid;gap:22px}
.timeline li{position:relative;padding-left:26px}
.timeline li::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--blue)}
.timeline li.bad::before{border-color:var(--danger)}
.timeline time{display:block;font:800 12px var(--display);letter-spacing:.1em;color:var(--blue)}
.timeline li.bad time{color:var(--danger)}
.timeline p{margin:4px 0 0;color:var(--ink-soft);font-size:15px}

/* Explicación de producto (VIMA / ZUON Pay) */
.explain{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,64px);align-items:start}
.explain-head .product-badge{margin-bottom:18px}
.explain-head h2{margin:0;font:800 clamp(1.75rem,3.1vw,2.55rem)/1.1 var(--display);letter-spacing:-.045em}
.explain-head .lead{margin:18px 0 0;color:var(--muted)}
.explain-head .hero-actions{margin-top:26px}
.explain-list{display:grid;gap:12px}
.explain-item{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:20px 22px;border:1px solid var(--line);border-radius:18px;background:#fff}
.explain-item strong{font:800 13px/1.4 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.explain-item p{margin:0;color:var(--ink-soft);font-size:15px}
.explain-item.neg strong{color:var(--muted)}
.mini-steps{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.mini-steps li{padding:8px 12px;border-radius:999px;background:var(--surface-soft);color:var(--ink-soft);font-size:13px;font-weight:600}
.mini-steps li::before{content:counter(mini) " · ";counter-increment:mini;color:var(--blue);font-weight:800}
.mini-steps{counter-reset:mini}

/* ¿Por dónde empiezo? autoselección */
.choose{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.choose-card{display:flex;flex-direction:column;gap:14px;padding:28px;border:1px solid var(--line);border-radius:24px;background:#fff;text-decoration:none;transition:transform .2s,box-shadow .2s}
.choose-card:hover{transform:translateY(-4px);box-shadow:0 22px 48px rgba(29,54,113,.12)}
.choose-card q{display:block;font:700 clamp(1.15rem,1.6vw,1.35rem)/1.3 var(--display);letter-spacing:-.02em;color:var(--ink);quotes:"“" "”"}
.choose-card p{margin:0;color:var(--muted);font-size:14px;flex:1}
.choose-card .go{font:700 14px var(--display);color:var(--blue)}
.choose-card.dark{background:var(--navy);color:#fff;border-color:transparent}
.choose-card.dark q{color:#fff}.choose-card.dark p{color:rgba(255,255,255,.68)}.choose-card.dark .go{color:#72eed1}

/* Testimonios piloto */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.quote{margin:0;padding:26px;border:1px solid var(--line);border-radius:22px;background:#fff}
.quote p{margin:0;font-size:15px;color:var(--ink);line-height:1.55}
.quote p::before{content:"“";display:block;font:800 40px/0.6 var(--display);color:var(--cyan);margin-bottom:14px}
.quote footer{margin-top:16px;color:var(--muted);font-size:12.5px;font-weight:600}
.quotes-note{margin:16px 0 0;color:var(--muted);font-size:12px}

@media(max-width:980px){
  .day,.explain{grid-template-columns:1fr}
  .choose,.quotes{grid-template-columns:1fr}
  .explain-item{grid-template-columns:1fr;gap:8px}
}
@media(max-width:640px){
  .chat{padding:10px;border-radius:24px}.msg{max-width:92%;font-size:13px}
  .day-copy .punch{font-size:15.5px}
}

/* La pregunta de las credenciales: tres salidas malas y una buena */
.dilemma-head{max-width:760px;margin-bottom:40px}
.dilemma-head h2{margin:0;font:800 clamp(2rem,4.2vw,3.5rem)/1.05 var(--display);letter-spacing:-.055em;text-wrap:balance}
.dilemma-head .lead{margin:18px 0 0;color:var(--muted)}
.dilemma{display:grid;grid-template-columns:repeat(3,1fr) 1.25fr;gap:14px;align-items:stretch}
.option{position:relative;padding:26px 24px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.7)}
.option small{display:block;margin-bottom:14px;font:800 11px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.option strong{display:block;font:750 19px/1.25 var(--display);letter-spacing:-.02em;color:var(--ink)}
.option p{margin:10px 0 0;color:var(--muted);font-size:14px}
.option .cost{display:inline-block;margin-top:16px;padding:6px 10px;border-radius:8px;background:rgba(207,51,36,.08);color:var(--danger);font:700 12px var(--display)}
.option.good{color:#fff;border-color:transparent;background:
  radial-gradient(circle at 85% 12%,rgba(4,223,155,.28),transparent 34%),
  radial-gradient(circle at 15% 90%,rgba(60,56,246,.4),transparent 40%),var(--navy)}
.option.good small{color:#72eed1}.option.good strong{color:#fff;font-size:22px}.option.good p{color:rgba(255,255,255,.78)}
.option.good .btn{margin-top:20px}
.option.good .cost{background:rgba(4,223,155,.16);color:#72eed1}

/* Panel web: control completo del negocio */
.panel-section{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,64px);align-items:center}
.panel-copy h2{margin:0;font:800 clamp(2rem,4vw,3.2rem)/1.06 var(--display);letter-spacing:-.05em}
.panel-copy .lead{margin:18px 0 0;color:var(--muted)}
.panel-copy ul{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:10px;color:var(--ink-soft);font-size:15px}
.panel-copy li{display:flex;gap:10px}.panel-copy li::before{content:"";flex:none;margin-top:9px;width:7px;height:7px;border-radius:50%;background:var(--gradient)}
.panel-mock{position:relative;display:grid;grid-template-columns:150px 1fr;overflow:hidden;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:var(--shadow);font-size:12px}
.panel-side{padding:18px 14px;background:var(--navy);color:rgba(255,255,255,.7)}
.panel-side .brand-name{color:#fff;font-size:16px;display:block;margin:2px 0 22px}
.panel-side span{display:block;padding:8px 10px;border-radius:9px}
.panel-side span.on{background:rgba(255,255,255,.1);color:#fff;font-weight:700}
.panel-main{padding:18px 20px 20px}
.panel-main header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.panel-main header strong{font:800 15px var(--display);color:var(--ink)}.panel-main header span{color:var(--muted)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.kpi{padding:10px 12px;border:1px solid var(--line);border-radius:12px}
.kpi b{display:block;font:800 18px/1 var(--display);letter-spacing:-.03em;color:var(--ink)}.kpi span{display:block;margin-top:4px;color:var(--muted);font-size:10.5px}
.kpi.ok b{color:var(--success)}.kpi.warn b{color:var(--warning)}
.panel-table{width:100%;border-collapse:collapse}
.panel-table th{padding:6px 8px;text-align:left;font:700 10px var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
.panel-table td{padding:8px;border-bottom:1px solid var(--line);color:var(--ink-soft);white-space:nowrap}
.pill{display:inline-block;padding:3px 8px;border-radius:999px;font:700 10.5px var(--display)}
.pill.ok{background:rgba(4,223,155,.16);color:var(--success)}.pill.warn{background:rgba(240,160,35,.16);color:var(--warning)}.pill.wait{background:rgba(76,111,165,.14);color:#4c6fa5}.pill.vima{background:rgba(60,56,246,.1);color:var(--blue)}
.panel-note{margin:14px 0 0;color:var(--muted);font-size:12px}
.panel-mock .sim-label{top:12px;right:12px;z-index:2}

@media(max-width:980px){
  .dilemma{grid-template-columns:1fr 1fr}.option.good{grid-column:1/-1}
  .panel-section{grid-template-columns:1fr}.panel-mock{grid-template-columns:1fr}.panel-mock .sim-label{position:static;grid-column:1/-1;justify-self:start;margin:12px 12px 0}.panel-side{display:flex;flex-wrap:wrap;gap:4px;align-items:center}.panel-side .brand-name{margin:0 10px 0 0}.kpis{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .dilemma{grid-template-columns:1fr}.panel-mock{font-size:11.5px}.panel-table td:nth-child(3),.panel-table th:nth-child(3),.panel-table td:nth-child(5),.panel-table th:nth-child(5){display:none}.panel-main header span{display:none}.panel-side span:not(.on):not(.brand-name){display:none}
}

/* Control de riesgo (ZUON Pay): lo que intentaron y no pasó */
.risk-section{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,64px);align-items:center}
.risk-copy h2{margin:0;font:800 clamp(2rem,4vw,3.2rem)/1.06 var(--display);letter-spacing:-.05em}
.risk-copy .lead{margin:18px 0 0;color:var(--muted)}
.risk-copy .punch{margin:22px 0 0;padding:18px 20px;border-left:3px solid var(--danger);background:#fff;border-radius:0 16px 16px 0;font:600 16px/1.45 var(--display);color:var(--ink)}
.risk-copy ul{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:10px;color:var(--ink-soft);font-size:15px}
.risk-copy li{display:flex;gap:10px}.risk-copy li::before{content:"";flex:none;margin-top:9px;width:7px;height:7px;border-radius:50%;background:var(--danger)}
.kpi.risk b{color:var(--danger)}
.pill.risk{background:rgba(207,51,36,.1);color:var(--danger)}
.panel-table td.mono{font-variant-numeric:tabular-nums}
@media(max-width:980px){.risk-section{grid-template-columns:1fr}}

/* /pay/ como landing de campaña: hero más contundente, duelo de chats y CTA fija en móvil */
.page-hero.campaign h1{font-size:clamp(2.8rem,5.6vw,5.1rem);letter-spacing:-.06em}
.page-hero.campaign h1 .gradient-text{display:block}
.cta-micro{margin:12px 0 0;color:var(--muted);font-size:13px;font-weight:500}
.cta-micro b{color:var(--ink);font-weight:700}

.duel-head{max-width:760px;margin-bottom:36px}
.duel-head h2{margin:0;font:800 clamp(2rem,4.2vw,3.4rem)/1.05 var(--display);letter-spacing:-.055em;text-wrap:balance}
.duel-head .lead{margin:18px 0 0;color:var(--muted)}
.duel{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.duel .chat{max-width:none;margin:0}
.duel-tag{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;padding:7px 12px;border-radius:999px;font:800 11px var(--display);letter-spacing:.12em;text-transform:uppercase}
.duel-tag.now{background:rgba(207,51,36,.1);color:var(--danger)}
.duel-tag.after{background:rgba(4,223,155,.16);color:var(--success)}
.duel-verdict{margin:14px 6px 0;padding-top:12px;border-top:1px solid var(--line);font:700 14px/1.4 var(--display);color:var(--ink)}
.duel-verdict.bad{color:var(--danger)}
.duel-verdict small{display:block;margin-top:4px;font:500 12px/1.4 var(--body);color:var(--muted)}
.msg-boss{background:#fff;border-left:3px solid var(--danger)}
.msg-wait{align-self:center;justify-self:center;padding:4px 10px;border-radius:999px;background:rgba(10,19,56,.06);color:var(--muted);font-size:11px;font-weight:600}

.sticky-cta{display:none}
@media(max-width:640px){
  .sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;gap:10px;align-items:center;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(246,249,255,.92);border-top:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .sticky-cta .btn{flex:1;min-height:48px}
  .sticky-cta small{flex:none;color:var(--muted);font-size:11px;line-height:1.3;max-width:96px}
  body.has-sticky-cta{padding-bottom:78px}
  .duel{grid-template-columns:1fr}
  .page-hero.campaign h1{font-size:clamp(2.35rem,11.5vw,3.3rem)}
}
@media(max-width:980px){.duel{grid-template-columns:1fr}}
.scenario-card.dark{color:#fff;border-color:transparent;background:radial-gradient(circle at 85% 12%,rgba(4,223,155,.25),transparent 34%),var(--navy)}.scenario-card.dark span{color:#72eed1}.scenario-card.dark h3{color:#fff}.scenario-card.dark p{color:rgba(255,255,255,.72)}

/* ============================================================
   CHAT REALISTA
   Los mockups de conversación se ven como el chat que el
   visitante usa todos los días: burbujas con cola, hora dentro
   de la burbuja, doble check, fondo empapelado y, cuando hace
   falta, el marco del teléfono. Nada de esto usa imágenes: es
   CSS, así que pesa cero y se ve nítido en cualquier pantalla.
   ============================================================ */

.phone{position:relative;max-width:392px;margin-inline:auto;padding:10px;border-radius:46px;
  background:linear-gradient(165deg,#38426e,#0a1338 58%);
  box-shadow:0 50px 90px -38px rgba(10,19,56,.62),inset 0 0 0 1px rgba(255,255,255,.1)}
.phone::after{content:"";position:absolute;left:50%;bottom:16px;transform:translateX(-50%);width:118px;height:4px;border-radius:99px;background:rgba(255,255,255,.35);z-index:5;pointer-events:none}
.phone-screen{position:relative;overflow:hidden;border-radius:37px;background:#efeae2;padding-bottom:22px}
.phone-notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:86px;height:23px;border-radius:999px;background:#070c22;z-index:4}
.phone-status{display:flex;align-items:center;justify-content:space-between;padding:9px 20px 5px;background:#f5f2ef;font:700 12px var(--display);color:#111b1c}
.phone-status svg{display:block;opacity:.85}

.chat{position:relative;max-width:430px;margin-inline:auto;padding:0;overflow:hidden;border:0;border-radius:24px;
  background:#efeae2;backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 30px 62px -30px rgba(10,19,56,.42),0 0 0 1px rgba(10,19,56,.07)}
.phone .chat{border-radius:0;box-shadow:none;max-width:none}
.chat-top{display:flex;align-items:center;gap:11px;padding:9px 14px;border:0;background:#f5f2ef;box-shadow:0 1px 0 rgba(10,19,56,.09)}
.chat-top .back{flex:none;width:9px;height:9px;border-left:2px solid #54656f;border-bottom:2px solid #54656f;transform:rotate(45deg);margin-right:-2px}
.chat-top .avatar{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:linear-gradient(140deg,#dfe5f2,#c8d2e8);color:#54656f;font:800 13px var(--display);overflow:hidden}
.chat-top .avatar .brand-mark{width:22px;height:17px;margin:0}
.chat-top strong{display:block;font:600 15px var(--display);color:#111b1c;letter-spacing:-.01em}
.chat-top small{display:block;color:#667781;font-size:12px}
.chat-top .dots{margin-left:auto;width:3px;height:3px;border-radius:50%;background:#54656f;box-shadow:0 -6px 0 #54656f,0 6px 0 #54656f}

.chat-thread{display:grid;gap:8px;padding:16px 11px 20px;background-color:#efeae2;background-size:260px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='none' stroke='%23d9d1c7' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 28c6-8 15-8 21 0'/%3E%3Ccircle cx='100' cy='26' r='7'/%3E%3Cpath d='M160 18v15M152 26h15'/%3E%3Cpath d='M222 34c-7-6-3-15 5-11 8-4 12 5 5 11l-5 5z'/%3E%3Cpath d='M32 100h20M32 109h13'/%3E%3Cpath d='M110 96l9 15h-18z'/%3E%3Ccircle cx='178' cy='104' r='6'/%3E%3Cpath d='M232 97c9 0 9 13 0 13'/%3E%3Cpath d='M24 176c6-9 14-9 19 0'/%3E%3Cpath d='M96 168v17M88 177h16'/%3E%3Cpath d='M162 168l11 9-11 9z'/%3E%3Ccircle cx='224' cy='178' r='7'/%3E%3Cpath d='M56 234c6-8 15-8 20 0'/%3E%3Cpath d='M140 226l8 13h-16z'/%3E%3Ccircle cx='206' cy='232' r='5'/%3E%3C/g%3E%3C/svg%3E")}

.msg{position:relative;max-width:79%;padding:6px 9px 5px;border-radius:9px;font-size:13.6px;line-height:1.42;
  color:#111b1c;box-shadow:0 1px 1px rgba(11,20,26,.14)}
.msg strong{font-weight:700}
.msg time{float:right;margin:7px 0 -1px 12px;font-size:10.5px;color:rgba(17,27,28,.45);text-align:right}
.msg-in{justify-self:start;background:#fff;border-radius:9px;border-top-left-radius:0}
.msg-in::after{content:"";position:absolute;top:0;left:-8px;width:8px;height:13px;background:#fff;clip-path:polygon(100% 0,0 0,100% 100%)}
.msg-out{justify-self:end;background:#d9fdd3;border-radius:9px;border-top-right-radius:0}
.msg-out::after{content:"";position:absolute;top:0;right:-8px;width:8px;height:13px;background:#d9fdd3;clip-path:polygon(0 0,100% 0,0 100%)}
.msg-out time::after{content:"✓✓";margin-left:5px;font-size:11px;letter-spacing:-2px;color:#53bdeb}
.msg-boss{background:#fff;border-left:0}
.msg-boss::after{background:#fff}
.chat-day{justify-self:center;margin:2px 0 6px;padding:4px 11px;border-radius:8px;background:rgba(255,255,255,.85);
  box-shadow:0 1px 1px rgba(11,20,26,.1);color:#54656f;font:600 10.5px var(--display);letter-spacing:.04em;text-transform:uppercase}

/* Etiqueta discreta de producto dentro de la burbuja */
.msg-tag{position:static;display:block;width:fit-content;margin:1px 0 5px;padding:2px 7px;border-radius:5px;
  background:rgba(60,56,246,.1);color:var(--blue);font:800 9.5px var(--display);letter-spacing:.1em;text-transform:uppercase}
.msg-tag.pay{background:rgba(4,223,155,.18);color:#04996f}

/* Comprobante enviado como foto */
.msg-receipt{display:block;margin:1px 0 5px;border-radius:6px;overflow:hidden;line-height:0}
.msg-receipt svg.rcpt{display:block;width:100%;height:auto}

/* Respuesta estructurada de ZUON Pay dentro del chat */
.msg .result-card{width:auto;margin:0;padding:0;background:transparent;box-shadow:none}
.msg .result-label{font-size:12px;letter-spacing:.06em}
.msg .result-card dl{margin:9px 0;padding-bottom:9px;border-bottom:1px solid rgba(10,19,56,.1);font-size:12.5px;gap:6px}
.msg .result-card dt{color:#667781}
.msg .result-action{font-size:12.5px}
.msg.confirm,.msg-out.confirm,.msg-in.confirm{background:#fff;border:0}
.msg.confirm::after,.msg-out.confirm::after,.msg-in.confirm::after{background:#fff}
.msg .ok{display:flex;align-items:center;gap:7px;color:var(--success);font:800 12px var(--display);letter-spacing:.04em}

.chat-caption{margin:14px 6px 0;color:var(--muted);font-size:12px;text-align:center;text-wrap:balance}
.phone+.chat-caption,.product-demo .chat-caption{margin-top:16px}

/* El demo del hero de /pay/ vive dentro del teléfono */
.product-demo{max-width:392px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}

.demo-dots{margin-top:16px}
.duel .chat{max-width:none;margin:0}
.duel-verdict{border-top:0;margin-top:14px;padding-top:0}

@media(max-width:620px){
  .phone{max-width:340px;padding:8px;border-radius:40px}
  .phone-screen{border-radius:33px}
  .msg{font-size:13.2px}
}

/* Los tres escenarios del hero se apilan dentro del hilo */
.chat-thread .demo-stack{display:grid;justify-items:stretch}
.demo-panel{display:grid;gap:8px;justify-items:start}

/* Banda "¿te suena?": los mensajes que hoy llegan al dueño */
.recall-band{background:var(--navy);color:#fff;padding:clamp(34px,5vw,54px) 0}
.recall-inner{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(24px,4vw,54px);align-items:center}
.recall-copy .kicker{color:#66eed0}
.recall-copy h2{margin:10px 0 0;font:800 clamp(1.7rem,3.2vw,2.5rem)/1.1 var(--display);letter-spacing:-.045em;text-wrap:balance}
.recall-copy p{margin:14px 0 0;color:rgba(255,255,255,.7);font-size:15px}
.recall-msgs{list-style:none;margin:0;padding:0;display:grid;gap:10px;justify-items:start}
.recall-msgs li{position:relative;max-width:min(100%,430px);padding:8px 12px 7px;border-radius:9px;border-top-left-radius:0;
  background:#fff;color:#111b1c;font-size:13.8px;line-height:1.42;box-shadow:0 14px 30px -18px rgba(0,0,0,.7)}
.recall-msgs li::after{content:"";position:absolute;top:0;left:-8px;width:8px;height:13px;background:#fff;clip-path:polygon(100% 0,0 0,100% 100%)}
.recall-msgs li:nth-child(2){margin-left:clamp(0px,4vw,42px)}
.recall-msgs li:nth-child(4){margin-left:clamp(0px,2.5vw,26px)}
.recall-msgs b{display:block;margin-bottom:2px;color:var(--who,#8b5cf6);font:700 12.5px var(--display)}
.recall-msgs time{float:right;margin:6px 0 -1px 12px;font-size:10.5px;color:rgba(17,27,28,.45)}
.recall-foot{grid-column:1/-1;margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line-dark);color:rgba(255,255,255,.72);font-size:14px}
.recall-foot b{color:#fff}

/* Resultados del home: sobrio, fechado, sin adornos */
.proof{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,52px);align-items:start;
  padding:clamp(26px,4vw,44px);border:1px solid var(--line);border-radius:28px;background:#fff;box-shadow:var(--shadow)}
.proof h3{margin:0;font:800 clamp(1.4rem,2.4vw,2rem)/1.14 var(--display);letter-spacing:-.035em}
.proof p{margin:14px 0 0;color:var(--muted)}
.proof .proof-link{display:inline-block;margin-top:18px;font-weight:700;color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(60,56,246,.3)}
.proof-figures{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.proof-figures div{padding:18px 16px;background:#fff}
.proof-figures strong{display:block;font:800 clamp(1.5rem,2.6vw,2.1rem)/1 var(--display);letter-spacing:-.04em;color:var(--ink)}
.proof-figures span{display:block;margin-top:6px;color:var(--muted);font-size:12.5px;line-height:1.35}
.proof-note{margin:16px 0 0;color:var(--muted);font-size:12px;line-height:1.5}

@media(max-width:900px){
  .recall-inner,.proof{grid-template-columns:1fr}
  .recall-msgs li{max-width:none;justify-self:stretch}
  .recall-msgs li:nth-child(2),.recall-msgs li:nth-child(4){margin-left:0}
}

.hero-phone{max-width:392px;margin-inline:auto}
.phone{margin-top:30px}
.phone>.sim-label,.product-demo .sim-label{right:50%;transform:translateX(50%);top:-32px;z-index:6}
.msg.confirm>dl{display:grid;grid-template-columns:1fr auto;gap:6px;margin:9px 0 0;padding-top:9px;border-top:1px solid rgba(10,19,56,.1);font-size:12.5px}
.msg.confirm>dl dt{color:#667781}
.msg.confirm>dl dd{margin:0;font-weight:700;text-align:right}
.duel .sim-label{position:static;display:inline-flex;margin:0 0 12px 8px;padding:6px 11px;background:rgba(10,19,56,.07);color:var(--muted)}
.msg:has(>.msg-receipt){max-width:68%}

/* Comprobante: misma medida en todos los chats, texto legible */
.msg:has(>.msg-receipt){max-width:none;width:246px}
.msg-receipt{width:100%}
@media(max-width:620px){.msg:has(>.msg-receipt){width:min(246px,74%)}}

/* Duelo: las dos columnas miden lo mismo y el veredicto va en la franja inferior */
.duel{align-items:stretch}
.duel>div{display:flex;flex-direction:column}
.duel .chat{flex:1;display:flex;flex-direction:column}
.duel .chat-thread{flex:1;align-content:start}
.duel .duel-verdict{margin:0;padding:14px 16px 16px;background:#f5f2ef;box-shadow:0 -1px 0 rgba(10,19,56,.09)}
.duel-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px}
.duel-tags .duel-tag,.duel-tags .sim-label{margin:0}
.msg:has(>.msg-receipt){width:264px}
.msg-receipt{border:0;padding:0;background:transparent}
.option{display:flex;flex-direction:column;align-items:flex-start}
.option .cost{margin-top:auto;padding-top:0}
.option p{margin-bottom:16px}

/* CTA de WhatsApp: verde reconocible, mismo tamaño que .btn-primary */
.btn-wa{background:#0f8f4c;color:#fff;box-shadow:0 14px 32px rgba(15,143,76,.28)}
.btn-wa:hover{background:#0c7a41;transform:translateY(-1px)}
.btn-wa .wa-ico,.btn-light .wa-ico,.btn-ghost .wa-ico{flex:none;margin-right:2px}
.btn .wa-ico{vertical-align:-3px}
.sticky-cta .btn-wa{white-space:nowrap}
@media(max-width:520px){.wa-long{display:none}}
.proof-single{grid-template-columns:1fr;max-width:760px}
.proof-single .proof-note{margin-top:22px}

/* Escenas del mostrador: carrusel con scroll-snap, rota solo y se detiene al tocarlo */
.voices{position:relative}
.voices-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 32px)/3);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 4px 18px;margin:-4px -4px 0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.voices-track::-webkit-scrollbar{display:none}
.voices-track:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:12px}
.voice{scroll-snap-align:start;display:flex;flex-direction:column;gap:14px;padding:26px 26px 28px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 10px 30px -22px rgba(29,54,113,.35)}
.voice::before{content:"“";display:block;height:22px;font:800 56px/1 var(--display);color:var(--cyan);opacity:.55;margin-top:-6px}
.voice-sector{color:var(--blue);font:800 11px var(--display);letter-spacing:.12em;text-transform:uppercase}
.voice p{margin:0;color:var(--ink-soft);font-size:15px;line-height:1.55}
.voices-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:10px}
.voices-btn{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);font-size:16px;cursor:pointer;transition:background .2s,transform .2s}
.voices-btn:hover{background:var(--surface-soft);transform:translateY(-1px)}
.voices-btn:disabled{opacity:.35;cursor:default;transform:none}
.voices-dots{display:flex;gap:6px}
.voices-dots i{width:7px;height:7px;border-radius:99px;background:var(--line);transition:width .3s,background .3s}
.voices-dots i.is-on{width:20px;background:var(--blue)}
@media(max-width:980px){.voices-track{grid-auto-columns:calc((100% - 16px)/2)}}
@media(max-width:620px){.voices-track{grid-auto-columns:88%}.voice{padding:22px 20px 24px}.voice p{font-size:14.5px}}
.voice blockquote{margin:0}

/* Reseña: la cita es del cliente; la respuesta de abajo es nuestra y se ve distinta */
.voice{padding-bottom:0}
.voice blockquote{flex:1}
.voice-sol{margin:18px -26px 0;padding:16px 26px 20px;border-top:1px solid var(--line);
  border-radius:0 0 22px 22px;background:linear-gradient(180deg,rgba(4,223,155,.07),rgba(1,194,212,.05))}
.voice-sol span{display:block;margin-bottom:6px;color:#04996f;font:800 10.5px var(--display);letter-spacing:.12em;text-transform:uppercase}
.voice-sol p{margin:0;color:var(--ink-soft);font-size:14px;line-height:1.5}
@media(max-width:620px){.voice-sol{margin-inline:-20px;padding-inline:20px}}
@media(max-width:620px){
  .voice p{font-size:14px;line-height:1.5}
  .voice-sol p{font-size:13.5px}
  .voices-track{grid-auto-columns:92%}
}

/* Firma de la reseña: quién la dijo y desde dónde */
.voice-head{display:flex;align-items:center;gap:11px;margin-bottom:2px}
.voice-ini{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:linear-gradient(140deg,var(--blue),var(--cyan));color:#fff;font:800 14px var(--display)}
.voice-id b{display:block;font:700 14px var(--display);color:var(--ink);letter-spacing:-.01em}
.voice-id small{display:block;color:var(--muted);font-size:12px}

/* Móvil: la reseña completa cabe en una pantalla */
@media(max-width:700px){
  .voices-track{grid-auto-columns:min(90%,400px);gap:12px;scroll-padding-left:4px}
  .voice{padding:20px 20px 0;border-radius:18px}
  .voice::before{height:16px;font-size:42px;margin-top:-4px}
  .voice-sector{font-size:10.5px;letter-spacing:.1em}
  .voice p{font-size:14px;line-height:1.48}
  .voice blockquote{flex:0 1 auto}
  .voice-sol{margin:14px -20px 0;padding:14px 20px 18px;border-radius:0 0 18px 18px}
  .voice-sol p{font-size:13.5px;line-height:1.45}
  .voices-nav{margin-top:6px}
}

/* Cabecera de la reseña: quién habla, qué negocio y desde dónde */
.voice-head{display:flex;align-items:center;gap:11px}
.voice-head .voice-id b{display:block;font:700 15px var(--display);color:var(--ink);letter-spacing:-.015em}
.voice-head .voice-id small{display:block;margin-top:2px;color:var(--muted);font-size:12px;line-height:1.35}
.voice::before{margin-top:2px}
@media(max-width:700px){
  .voice::before{display:none}
  .voice p{font-size:13.6px}
  .voice-head .voice-id b{font-size:14.5px}
}

/* La reseña completa (antes y después) es del cliente; el "después" se ancla abajo */
.voice blockquote{display:flex;flex-direction:column;flex:1}
.voice blockquote>p{margin-bottom:18px}
.voice-sol{margin-top:auto}

/* Móvil: titulares y tarjetas de estado más compactos */
@media(max-width:620px){
  .section-head h2{font-size:clamp(1.55rem,6.8vw,1.95rem);letter-spacing:-.035em}
  .section-head .lead{font-size:.97rem;margin-top:12px}
  .section-head{margin-bottom:26px}
  .states-grid{gap:10px}
  .state-card{padding:14px 16px}
  .state-head{font-size:14.5px}
  .state-card p{margin:4px 0 0;font-size:13px;line-height:1.45}
  .state-card b{margin-top:8px;font-size:12.5px}
}

/* ============================================================
   Hero de /pay/: cada escenario entra como una conversación real
   (llega la foto → "escribiendo…" → llega la respuesta), y las
   pestañas con texto dejan claro que son tres casos distintos.
   ============================================================ */
@keyframes bubbleIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes typingShow{0%{opacity:0;transform:translateY(6px)}14%{opacity:1;transform:none}86%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-4px)}}
@keyframes dotPulse{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.demo-panel{transition:none;transform:none}
.demo-panel.is-active{opacity:1}
.reply-slot{display:grid;justify-items:start;width:100%}
.reply-slot>*{grid-area:1/1}
.typing{display:none;align-items:center;gap:4px;padding:11px 13px;border-radius:9px;border-top-left-radius:0;background:#fff;box-shadow:0 1px 1px rgba(11,20,26,.14)}
.typing i{width:7px;height:7px;border-radius:50%;background:#8696a0;animation:dotPulse 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
.demo-panel.is-active .msg-out{animation:bubbleIn .45s ease both}
.demo-panel.is-active .typing{display:flex;animation:typingShow 1.25s .45s ease both}
.demo-panel.is-active .reply-slot .msg-in{animation:bubbleIn .45s 1.6s ease both}
@media(prefers-reduced-motion:reduce){
  .demo-panel.is-active .msg-out,.demo-panel.is-active .reply-slot .msg-in{animation:none}
  .demo-panel.is-active .typing{display:none}
}
.demo-dots{gap:6px;flex-wrap:wrap}
.demo-dots button{width:auto;height:auto;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.75);color:var(--muted);font:700 11.5px var(--display);letter-spacing:.02em;transition:background .25s,color .25s}
.demo-dots button[aria-selected="true"]{width:auto;background:var(--navy);color:#fff;border-color:transparent}

/* Móvil: la conversación completa cabe en una pantalla */
@media(max-width:620px){
  .phone{max-width:332px;padding:7px;border-radius:38px}
  .phone-screen{border-radius:31px;padding-bottom:16px}
  .phone-notch{width:76px;height:20px;top:7px}
  .phone-status{padding:8px 16px 4px;font-size:11px}
  .chat-top{padding:7px 12px}
  .chat-top .avatar{width:32px;height:32px}
  .chat-top strong{font-size:14px}
  .chat-thread{padding:12px 9px 12px;gap:6px}
  .msg{font-size:12.8px;padding:5px 8px 4px}
  .msg time{font-size:10px;margin-top:5px}
  .msg:has(>.msg-receipt){width:186px}
  .msg .result-card dl{font-size:11.5px;gap:4px;margin:7px 0;padding-bottom:7px}
  .msg .result-label{font-size:11px}
  .msg .result-action{font-size:11.5px}
  .msg-tag{font-size:9px;margin-bottom:4px}
  .demo-caption{font-size:11.5px;margin-top:12px}
}
.reply-slot{align-items:start}
.reply-slot>.typing{align-self:start;height:auto}

/* Cita corta justo antes del precio: prueba social pegada a la decisión */
.quote-band{padding:clamp(30px,4vw,48px) 0;background:var(--navy);color:#fff}
.quote-band-inner{max-width:900px}
.quote-band blockquote{margin:0}
.quote-band p{margin:0;font:600 clamp(1.15rem,2.2vw,1.6rem)/1.35 var(--display);letter-spacing:-.02em;text-wrap:balance}
.quote-band footer{display:flex;align-items:center;gap:10px;margin-top:16px;color:rgba(255,255,255,.72);font-size:14px}
.quote-band footer b{color:#fff}
.quote-band .voice-ini{width:30px;height:30px;font-size:12px}

/* ===== Versión de prueba /pay/prueba/ ===== */
.trust-cards-light{margin-top:36px}
.trust-cards-light .trust-card{background:#fff;border:1px solid var(--line);color:var(--ink)}
.trust-cards-light .trust-card strong{color:var(--ink)}
.trust-cards-light .trust-card p{color:var(--muted)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.steps li{display:flex;gap:14px;padding:22px;border:1px solid var(--line);border-radius:20px;background:#fff}
.step-n{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;font:800 14px var(--display)}
.steps strong{display:block;font:750 16px/1.25 var(--display);color:var(--ink);letter-spacing:-.01em}
.steps p{margin:8px 0 0;color:var(--muted);font-size:14px;line-height:1.5}
.pilot-card{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;margin-top:22px;padding:26px 28px;border-radius:24px;
  color:#fff;background:radial-gradient(circle at 90% 10%,rgba(4,223,155,.28),transparent 38%),var(--navy)}
.pilot-card dl{display:grid;grid-template-columns:1fr 1fr;gap:16px 28px;margin:0}
.pilot-card dt{color:#72eed1;font:800 11px var(--display);letter-spacing:.12em;text-transform:uppercase}
.pilot-card dd{margin:5px 0 0;color:rgba(255,255,255,.85);font-size:14px;line-height:1.5}
.pilot-card .btn{white-space:nowrap}
.pricing-note a{color:var(--blue);font-weight:700}
@media(max-width:980px){.steps{grid-template-columns:1fr}.pilot-card{grid-template-columns:1fr}.pilot-card .btn{justify-self:start;white-space:normal}}
@media(max-width:620px){.pilot-card dl{grid-template-columns:1fr;gap:14px}.pilot-card{padding:22px 20px}.steps li{padding:18px}}
.lanzamiento .page-hero h1{font-size:clamp(2.1rem,4.5vw,3.9rem)}
/* Panel del dueño (página de prueba): viñetas en bloque y tabla que cabe */
#panel .risk-copy li{display:block;padding-left:17px;position:relative}
#panel .risk-copy li::before{position:absolute;left:0;top:9px}
#panel .risk-copy li strong{color:var(--ink)}
#panel .risk-copy li::before{background:var(--blue)}
#panel .panel-main{min-width:0;overflow:hidden}
#panel .panel-table{font-size:11px}
#panel .panel-table td{white-space:normal;padding:7px 6px}
#panel .panel-table th{padding:5px 6px}
#panel .kpis .kpi b{font-size:15px}

/* Banners de cita que rotan: todas las citas apiladas, una visible */
.quote-stack{display:grid}
.quote-stack>blockquote{grid-area:1/1;margin:0;opacity:0;transform:translateY(6px);transition:opacity .6s ease,transform .6s ease;pointer-events:none}
.quote-stack>blockquote.is-active{opacity:1;transform:none;pointer-events:auto}
.quote-dots{display:flex;gap:6px;margin-top:18px}
.quote-dots i{width:6px;height:6px;border-radius:99px;background:rgba(255,255,255,.28);transition:width .3s,background .3s}
.quote-dots i.is-on{width:18px;background:#66eed0}
.quote-band[data-quotes]{cursor:default}
@media(prefers-reduced-motion:reduce){.quote-stack>blockquote{transition:none}}

/* ============================================================
   PLANES — cuatro tarjetas compactas.
   El recomendado se distingue por el borde, no por el color del
   botón: los cuatro botones son verdes. Al pasar el mouse, la
   tarjeta se eleva igual que la recomendada.
   ============================================================ */
#precios{padding-block:clamp(38px,4vw,50px)}
#precios .section-head{margin-bottom:18px}
#precios .section-head h2{font-size:clamp(1.75rem,2.8vw,2.35rem)}
#precios .section-head .lead{margin-top:8px;font-size:1rem}

.plans{gap:14px;margin-bottom:18px;align-items:stretch}
.plan{padding:24px 19px;gap:9px;border-radius:20px;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.plan h3{font-size:19px}
.plan-for{margin:-2px 0 0;font:700 13px/1.32 var(--display);color:var(--ink-soft)}
.plan-desc{margin:0;color:var(--muted);font-size:12.5px;line-height:1.4}
.plan-price{margin:0;padding-top:11px;border-top:1px solid var(--line)}
.plan-price strong{font-size:1.6rem}
.plan-custom{font-size:1.15rem!important;color:var(--ink-soft)}
.plan ul{font-size:13px;gap:6px}
.plan li{padding-left:16px}
.plan li::before{top:.5em;width:5px;height:5px}
.plan .btn{margin-top:auto;width:100%;min-height:46px;white-space:nowrap;padding-inline:12px;font-size:14px}

/* Alturas iguales para que precios y botones queden en la misma línea */
@media(min-width:1101px){.plan-for{min-height:3.5em}.plan-desc{min-height:3.6em}}
@media(min-width:621px) and (max-width:1100px){.plan-desc{min-height:3.6em}}

/* Recomendado: solo el borde (inset, para no mover el layout) */
.plan-featured{border-color:transparent;box-shadow:inset 0 0 0 2px var(--blue)}
.plan-tag{top:-11px;left:19px;padding:5px 10px;font-size:9.5px}

/* Al pasar el mouse, cualquier tarjeta se eleva */
@media(hover:hover){
  .plan:hover{transform:translateY(-6px);border-color:rgba(60,56,246,.3);
    box-shadow:0 28px 54px -30px rgba(60,56,246,.5)}
  .plan-featured:hover{border-color:transparent;
    box-shadow:inset 0 0 0 2px var(--blue),0 28px 54px -30px rgba(60,56,246,.5)}
}
@media(prefers-reduced-motion:reduce){.plan,.plan:hover{transition:none;transform:none}}

@media(max-width:1100px){.plans{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.plans{grid-template-columns:1fr;gap:12px}.plan{padding:20px 18px}}

/* ============================================================
   Arranque de página más ajustado: el encabezado fijo ya ocupa
   83 px, así que el relleno superior del hero era espacio muerto.
   ============================================================ */
.hero{padding-top:clamp(36px,4vw,58px);padding-bottom:clamp(60px,7.5vw,96px)}
.page-hero{padding-top:clamp(30px,3.4vw,50px);padding-bottom:clamp(52px,6.5vw,80px)}
.breadcrumb{margin-bottom:16px}
@media(max-width:820px){
  .hero{padding-top:26px}
  .page-hero{padding-top:22px}
}
/* El teléfono del home mide más que el texto; centrarlos empujaba el
   titular 83 px hacia abajo. Se alinean por arriba en escritorio. */
@media(min-width:1024px){
  .hero-grid{align-items:start}
  .hero-phone{margin-top:8px}
}

/* Volumen del plan en lenguaje del cliente: pagos al mes y su equivalente diario */
.plan-volume{margin:-3px 0 1px;padding:7px 10px;border-radius:10px;background:var(--surface-soft)}
.plan-volume strong{display:block;font:750 13.5px/1.25 var(--display);color:var(--ink);letter-spacing:-.01em}
.plan-volume span{display:block;margin-top:2px;color:var(--muted);font-size:12px}
.plan-featured .plan-volume{background:rgba(60,56,246,.08)}
.plan-overage{max-width:880px;margin:4px auto 4px;color:var(--ink-soft);font-size:13.5px;line-height:1.45;text-align:center}
.plan-overage strong{color:var(--ink)}
.plan-price strong.plan-custom{line-height:1.6rem}
.plan-price{min-height:39px}

/* Cortesía mensual: visible como suma, en verde (valor que se regala) */
.plan-bonus{display:inline-block;width:fit-content;margin:3px 0 2px;padding:2px 8px;border-radius:999px;
  background:rgba(4,223,155,.16);color:#04845e;font:800 11px/1.3 var(--display);font-style:normal;letter-spacing:.02em}
.plan-volume{display:flex;flex-direction:column;align-items:flex-start}
@media(min-width:1101px){.plan-volume{min-height:76px}}

.plan{gap:8px}