/* Landing de LinkPay USA.

Sale del <style> de docs/landing-referencia.html sin cambiarle una
regla: si algo se ve distinto al diseno, la diferencia esta en el HTML
o en el JS, no aca. Para comparar contra la referencia, ese archivo
sigue versionado.

Lo unico agregado abajo, al final, es lo que la plantilla necesita y el
diseno no traia: el aviso de error del registro y el precio del plan en
el modal, que ya existian en la landing vieja y hay que conservar.
*/

:root{
  color-scheme: dark;
  --bg:#000000;
  --surface:#0c1410;
  --surface-2:#13201a;
  --line:#22342a;
  --text:#eef5f0;
  /* 2.55:1 sobre blanco era el peor contraste de todo el proyecto, y
     el unico que de verdad incumplia el minimo de 4.5:1. #3b4657 da
     9.55:1. Es la landing, o sea el texto que leen los que todavia no
     son clientes. */
  --muted:#3b4657;
  --green:#2bd46f;
  --green-deep:#14a150;
  --green-ink:#022611;
  --chat-bg:#e6eee8;
  --bubble-in:#ffffff;
  --bubble-out:#cff3db;
  --chat-text:#10261a;
  --red:#e5484d;
  --blue:#4c7dff;
  --amber:#f2b33d;
  --radius-lg:28px;
  --radius-md:16px;
  --radius-sm:10px;
  --display:"Unbounded", "Helvetica Neue", Arial, sans-serif;
  --body:"Unbounded", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#000000; --text:#eef5f0; } }
:root[data-theme="dark"]{ --bg:#000000; --text:#eef5f0; }

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--body);font-size:15px;font-weight:300;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%}
a{color:inherit}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:6px}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}
h1,h2,h3{font-family:var(--display);line-height:1.05;letter-spacing:-0.02em}
h2{font-size:clamp(1.8rem,3.4vw,2.7rem);font-weight:800;max-width:20ch}
.lead{color:var(--muted);font-size:1.05rem;max-width:52ch}
section{padding:110px 0}

/* botones */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:999px;font-weight:600;text-decoration:none;transition:transform .15s ease, background .15s ease}
.btn-primary{background:var(--green);color:var(--green-ink)}
.btn-primary:hover{background:#45e283}
.btn-ghost{border:1.5px solid var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--green)}
.btn:active{transform:scale(.97)}

/* nav */
header{position:sticky;top:0;z-index:40;background:rgba(0,0,0,.78);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .2s}
header.scrolled{border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.logo{font-family:var(--display);font-weight:900;font-size:1.55rem;letter-spacing:-0.03em;text-decoration:none;display:flex;align-items:baseline;gap:6px}
.logo .lp{color:var(--green)}
.logo .usa{font-size:.9rem;letter-spacing:.02em}
.logo .u{color:var(--red)} .logo .s{color:#fff} .logo .a{color:var(--blue)}
.nav-links{display:flex;gap:26px;font-size:.95rem;color:var(--muted)}
.nav-links a{text-decoration:none}
.nav-links a:hover{color:var(--text)}
.nav-right{display:flex;align-items:center;gap:14px;font-size:.95rem}
.lang{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.lang a{padding:5px 11px;text-decoration:none;color:var(--muted);font-size:.82rem;font-weight:600}
.lang a.on{background:var(--surface-2);color:var(--text)}
.nav-right .login{text-decoration:none;color:var(--muted)}
.nav-right .btn{padding:10px 18px}
@media (max-width:900px){.nav-links{display:none}}
@media (max-width:520px){.lang{display:none}.nav-right{gap:10px;font-size:.85rem}.nav-right .btn{padding:9px 14px}.logo{font-size:1.25rem}}
@media (max-width:360px){.nav-right .btn{display:none}}

/* hero */
.hero{padding:70px 0 90px;position:relative;overflow:hidden;isolation:isolate}
#scene{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
.hero > .wrap{position:relative;z-index:1}
.stage{perspective:1400px}
.phone{transition:transform .25s ease-out;will-change:transform}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.live{display:inline-flex;align-items:center;gap:9px;font-size:.9rem;color:var(--muted);margin-bottom:26px}
.live i{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(43,212,111,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(43,212,111,0)}100%{box-shadow:0 0 0 0 rgba(43,212,111,0)}}
.hero h1{font-size:clamp(2.7rem,5.6vw,4.9rem);font-weight:900;max-width:13ch}
.hero h1 .strike{position:relative;white-space:nowrap}
.hero h1 .strike::after{content:"";position:absolute;left:-4px;right:-4px;top:54%;height:.11em;background:var(--red);transform:rotate(-4deg);transform-origin:left;animation:strike .7s .5s ease-out both}
@keyframes strike{from{transform:rotate(-4deg) scaleX(0)}to{transform:rotate(-4deg) scaleX(1)}}
.hero .lead{margin:26px 0 34px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.fine{margin-top:22px;font-size:.9rem;color:var(--muted)}

/* escenario demo */
.stage{position:relative;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:end}
.phone,.phone-still{width:320px;background:#050505;border-radius:44px;padding:11px;border:1px solid #2a2a2a;box-shadow:0 40px 90px -30px rgba(43,212,111,.35)}
.screen{background:var(--chat-bg);border-radius:34px;overflow:hidden;height:600px;display:flex;flex-direction:column;color:var(--chat-text)}
.chat-top{display:flex;align-items:center;gap:10px;padding:16px 16px 12px;background:#0f3b24;color:#fff}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--green);display:grid;place-items:center;font-size:1.1rem}
.chat-top b{display:block;font-size:.95rem;line-height:1.2}
.chat-top small{font-size:.75rem;opacity:.8}
.chat-body{flex:1;overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column;gap:8px;scroll-behavior:smooth}
.msg{max-width:86%;padding:9px 12px;border-radius:14px;font-size:.8rem;line-height:1.45;font-weight:400;animation:pop .22s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.msg.in{background:var(--bubble-in);align-self:flex-start;border-bottom-left-radius:4px}
.msg.out{background:var(--bubble-out);align-self:flex-end;border-bottom-right-radius:4px}
.typing{display:flex;gap:4px;padding:12px 14px}
.typing span{width:7px;height:7px;border-radius:50%;background:#9bb3a4;animation:blink 1s infinite}
.typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s}
@keyframes blink{50%{opacity:.25}}
.chips{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px 14px;background:var(--chat-bg);border-top:1px solid #d3ddd6;min-height:58px}
.chip{background:#fff;border:1.5px solid #0f3b24;color:#0f3b24;padding:7px 11px;border-radius:999px;font-size:.74rem;font-weight:600;transition:background .12s}
.chip:hover{background:#dff5e7}
.chip.sel{background:#0f3b24;color:#fff}
.chip.go{background:var(--green-deep);border-color:var(--green-deep);color:#fff}
.order{background:#fff;border-radius:14px;padding:12px;align-self:flex-start;width:88%;animation:pop .22s ease-out;font-size:.86rem}
.order{font-size:.78rem}
.order .row{display:flex;justify-content:space-between;gap:8px;padding:2px 0}
.order .sub{color:#5d7466}
.order .tot{border-top:1px dashed #c9d6cd;margin-top:6px;padding-top:6px;font-weight:700}
.pay{margin-top:10px;width:100%;background:#0f3b24;color:#fff;border-radius:10px;padding:10px;font-weight:600;font-size:.88rem}
.pay.done{background:var(--green-deep)}
.demo-note{margin-top:14px;font-size:.88rem;color:var(--muted);display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.reset{color:var(--green);font-weight:600;text-decoration:underline;text-underline-offset:3px}

.side{display:flex;flex-direction:column;gap:14px;min-width:0}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:16px}
.panel h3{font-size:.95rem;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:8px}
.panel h3 small{font-family:var(--body);font-weight:500;color:var(--muted);font-size:.78rem}
.empty{color:var(--muted);font-size:.85rem;margin-top:10px}
.ticket{margin-top:12px;background:#fff8e6;color:#2b2208;border-radius:10px;padding:12px;font-size:.85rem;animation:drop .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes drop{from{opacity:0;transform:translateY(-18px) rotate(-2deg)}to{opacity:1;transform:none}}
.ticket b{font-family:var(--display);font-size:1.05rem}
.ticket ul{list-style:none;margin:6px 0 10px}
.ticket li.x{color:#8a6a12;padding-left:12px}
.ticket button{background:#2b2208;color:#fff8e6;border-radius:8px;padding:8px 12px;font-weight:600;font-size:.82rem;width:100%}
.ticket button:disabled{opacity:.45;cursor:default}
.track{list-style:none;margin-top:12px;display:grid;gap:9px}
.track li{display:flex;align-items:center;gap:10px;font-size:.86rem;color:var(--muted)}
.track li::before{content:"";width:12px;height:12px;border-radius:50%;border:2px solid var(--line);flex:none;transition:all .25s}
.track li.on{color:var(--text)}
.track li.on::before{background:var(--green);border-color:var(--green)}
@media (max-width:1020px){.hero-grid{grid-template-columns:1fr}.stage{justify-content:center}}
@media (max-width:640px){.stage{grid-template-columns:1fr;justify-items:center}.phone{width:100%;max-width:330px}.side{width:100%}}

/* rubros */
.rubros{border-block:1px solid var(--line);padding:26px 0}
.rubros .wrap{display:flex;flex-wrap:wrap;gap:10px 34px;align-items:center;justify-content:center;color:var(--muted);font-family:var(--display);font-weight:700;font-size:1.05rem}

/* calculadora */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;margin-top:48px}
.field{margin-bottom:30px}
.field label{display:flex;justify-content:space-between;font-weight:600;margin-bottom:12px}
.field output{font-family:var(--display);font-weight:800;color:var(--green)}
input[type=range]{width:100%;accent-color:var(--green);height:28px}
.seg{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px}
.seg button{flex:1;padding:9px;border-radius:999px;font-weight:600;color:var(--muted);font-size:.92rem}
.seg button[aria-pressed=true]{background:var(--surface-2);color:var(--text)}
.result{background:var(--green);color:var(--green-ink);border-radius:var(--radius-lg);padding:36px}
.result .k{font-size:.98rem;font-weight:600;opacity:.8}
.result .big{font-family:var(--display);font-weight:900;font-size:clamp(2.6rem,5vw,3.8rem);line-height:1;margin:6px 0 22px;letter-spacing:-0.03em}
.bars{display:grid;gap:12px;margin-bottom:20px}
.bar{display:grid;grid-template-columns:130px 1fr auto;gap:12px;align-items:center;font-size:.92rem;font-weight:600}
.bar .t{height:14px;border-radius:7px;background:rgba(2,38,17,.14);overflow:hidden}
.bar .t i{display:block;height:100%;border-radius:7px;background:var(--green-ink);transition:width .35s ease}
.bar.app .t i{background:var(--red)}
.result small{display:block;font-size:.82rem;opacity:.75}
@media (max-width:860px){.calc{grid-template-columns:1fr}}

/* pasos */
.steps{display:grid;grid-template-columns:320px 1fr;gap:40px;margin-top:48px}
.step-list{display:grid;gap:6px;counter-reset:s}
.step-btn{text-align:left;padding:16px 18px;border-radius:var(--radius-md);display:flex;gap:14px;align-items:center;color:var(--muted);font-weight:600;border:1px solid transparent}
.step-btn .n{font-family:var(--display);font-weight:800;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;flex:none;font-size:.9rem}
.step-btn[aria-selected=true]{background:var(--surface);border-color:var(--line);color:var(--text)}
.step-btn[aria-selected=true] .n{background:var(--green);border-color:var(--green);color:var(--green-ink)}
.step-view{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:40px;min-height:300px;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.step-view h3{font-size:1.8rem;margin-bottom:12px}
.step-view p{color:var(--muted)}
.art{background:var(--surface-2);border-radius:var(--radius-md);padding:20px;font-size:.88rem;display:grid;gap:8px;animation:pop .3s ease-out}
.art .line{background:var(--bg);border-radius:8px;padding:9px 12px;display:flex;justify-content:space-between}
.art .ok{color:var(--green);font-weight:600}
@media (max-width:900px){.steps{grid-template-columns:1fr}.step-view{grid-template-columns:1fr;padding:28px}}

/* modo dueño */
.owner{background:var(--surface);border-block:1px solid var(--line)}
.owner-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.owner-demo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mini-chat{background:var(--chat-bg);color:var(--chat-text);border-radius:var(--radius-md);padding:14px;display:flex;flex-direction:column;gap:8px;min-height:340px}
.voice{background:var(--bubble-out);align-self:flex-end;border-radius:14px;border-bottom-right-radius:4px;padding:10px 12px;display:flex;align-items:center;gap:10px;width:88%}
.voice button{width:34px;height:34px;border-radius:50%;background:#0f3b24;color:#fff;display:grid;place-items:center;flex:none;font-size:.8rem}
.wave{display:flex;gap:2px;align-items:center;height:26px;flex:1}
.wave i{flex:1;background:#0f3b24;border-radius:2px;opacity:.35;transition:opacity .1s}
.wave.play i{animation:wv .6s infinite alternate}
@keyframes wv{from{transform:scaleY(.4)}to{transform:scaleY(1);opacity:.9}}
.tr{font-size:.8rem;color:#4d6557;align-self:flex-end;font-style:italic;max-width:88%}
.yn{display:flex;gap:6px;align-self:flex-start}
.menu-list{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-md);padding:16px}
.menu-list h4{font-family:var(--display);font-size:.95rem;margin-bottom:10px}
.item{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px solid var(--line);font-size:.9rem;gap:8px}
.tag{font-size:.74rem;font-weight:600;padding:3px 9px;border-radius:999px;background:rgba(43,212,111,.14);color:var(--green);transition:all .3s;white-space:nowrap}
.tag.off{background:rgba(229,72,77,.15);color:var(--red)}
.item.off span:first-child{text-decoration:line-through;color:var(--muted)}
@media (max-width:960px){.owner-grid{grid-template-columns:1fr}}
@media (max-width:560px){.owner-demo{grid-template-columns:1fr}}

/* países */
.countries{margin-top:44px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.tab{padding:10px 18px;border-radius:999px;border:1.5px solid var(--line);font-weight:600;color:var(--muted)}
.tab[aria-selected=true]{border-color:var(--green);color:var(--text);background:var(--surface)}
.country-view{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.country-view > div{padding:28px;border-right:1px solid var(--line)}
.country-view > div:last-child{border-right:none}
.country-view h4{font-family:var(--display);font-size:1.1rem;margin-bottom:12px}
.country-view ul{list-style:none;display:grid;gap:8px;color:var(--muted);font-size:.95rem}
.soon{font-size:.72rem;color:var(--amber);border:1px solid rgba(242,179,61,.4);border-radius:999px;padding:1px 7px;margin-left:6px}
@media (max-width:800px){.country-view{grid-template-columns:1fr}.country-view > div{border-right:none;border-bottom:1px solid var(--line)}}

/* funciones */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 48px;margin-top:52px}
.feat div{border-top:2px solid var(--line);padding-top:18px}
.feat div.big{grid-column:span 2;border-top-color:var(--green)}
.feat h3{font-size:1.25rem;margin-bottom:8px;display:flex;gap:10px;align-items:center}
.feat p{color:var(--muted);font-size:.98rem;max-width:46ch}
@media (max-width:860px){.feat{grid-template-columns:1fr}.feat div.big{grid-column:auto}}

/* precios */
.plans{display:grid;grid-template-columns:1fr 1.08fr 1fr;gap:18px;margin-top:48px;align-items:stretch}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px;display:flex;flex-direction:column}
.plan.pro{background:var(--text);color:#07120b;border:none;transform:translateY(-12px)}
.plan.pro .muted,.plan.pro li{color:#3b4d42}
.plan h3{font-size:1.4rem}
.plan .badge{align-self:flex-start;background:var(--green);color:var(--green-ink);font-size:.78rem;font-weight:700;padding:4px 10px;border-radius:999px;margin-bottom:14px}
.muted{color:var(--muted);font-size:.95rem;margin:6px 0 18px}
.price{font-family:var(--display);font-weight:900;font-size:2.7rem;letter-spacing:-0.03em;line-height:1}
.price small{font-size:1rem;font-weight:600;letter-spacing:0}
.trial{font-size:.86rem;margin:8px 0 22px;color:var(--green)}
.plan.pro .trial{color:var(--green-deep)}
.plan ul{list-style:none;display:grid;gap:10px;margin-bottom:28px;flex:1}
.plan li{padding-left:26px;position:relative;color:var(--muted);font-size:.95rem}
.plan li::before{content:"";position:absolute;left:0;top:.35em;width:14px;height:8px;border-left:2.5px solid var(--green);border-bottom:2.5px solid var(--green);transform:rotate(-45deg)}
.plan.pro li::before{border-color:var(--green-deep)}
.plan .btn{justify-content:center}
.plan.pro .btn-primary{background:#07120b;color:var(--green)}
.custom{margin-top:26px;text-align:center;color:var(--muted)}
@media (max-width:900px){.plans{grid-template-columns:1fr}.plan.pro{transform:none}}

/* faq */
.faq{max-width:800px;margin-top:40px}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;font-family:var(--display);font-weight:700;font-size:1.15rem;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:16px;font-size:1.7rem;color:var(--green);transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--muted);padding-bottom:22px;max-width:65ch}

/* cierre */
.final{text-align:center;padding:120px 0}
.final h2{margin:0 auto 18px;max-width:18ch;font-size:clamp(2rem,4.2vw,3.2rem)}
.final .lead{margin:0 auto 34px}
footer{border-top:1px solid var(--line);padding:40px 0;font-size:.9rem;color:var(--muted)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;align-items:center}
footer nav{display:flex;flex-wrap:wrap;gap:18px}
footer a{text-decoration:none}
footer a:hover{color:var(--text)}

/* modal */
dialog{margin:auto;border:none;border-radius:var(--radius-lg);background:var(--surface);color:var(--text);width:min(440px,92vw);padding:32px;border:1px solid var(--line)}
dialog::backdrop{background:rgba(0,0,0,.7);backdrop-filter:blur(4px)}
dialog h3{font-size:1.6rem}
dialog form{display:grid;gap:14px;margin-top:20px}
dialog label{display:grid;gap:6px;font-size:.9rem;font-weight:600}
dialog input,dialog select{background:var(--bg);border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:12px;color:var(--text);font:inherit}
dialog input:focus,dialog select:focus{border-color:var(--green);outline:none}
.kind{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kind input{position:absolute;opacity:0}
.kind label{border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:14px;text-align:center;cursor:pointer;font-weight:600}
.kind input:checked + label{border-color:var(--green);background:var(--surface-2)}
.kind input:focus-visible + label{outline:3px solid var(--green)}
.close{position:absolute;right:18px;top:14px;font-size:1.4rem;color:var(--muted)}

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

/* ===== versión limpia ===== */
.works .brand{display:inline-flex;align-items:center;height:32px}
.works .brand img{height:26px;width:auto;max-width:150px;display:none}
.works .brand.has-logo img{display:block}
.works .brand.has-logo b{display:none}
.works .brand b{font-family:var(--display);font-weight:700;font-size:1.1rem;color:#cfdcd4;letter-spacing:-0.01em}

.top{position:relative;overflow:hidden;padding:96px 0 0;text-align:center;isolation:isolate}
.top::before{content:"";position:absolute;left:50%;bottom:-260px;width:900px;height:620px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(43,212,111,.34),rgba(43,212,111,0));z-index:-1}
.top h1{font-size:clamp(2.3rem,6vw,5.4rem);font-weight:900;max-width:min(100%,960px);margin:0 auto;text-wrap:balance;overflow-wrap:break-word;letter-spacing:-0.02em;line-height:1}
.top .lead{margin:26px auto 34px;font-size:1.1rem}
.top h1 .dot{color:var(--green)}
.top .cta{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.top .fine{margin-top:18px}
.top .phone-still{margin:64px auto 0;height:440px;overflow:hidden;border-radius:44px 44px 0 0;border-bottom:none;box-shadow:0 -10px 90px -20px rgba(43,212,111,.45)}
.top .phone-still .screen{border-radius:34px 34px 0 0;height:560px}
.works{border-block:1px solid var(--line);padding:30px 0}
.works .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 42px}
.works p{color:var(--muted);font-size:.9rem;width:100%;text-align:center}
.works span{font-family:var(--display);font-weight:700;font-size:1.1rem;color:#cfdcd4;letter-spacing:-0.01em;transition:color .15s}
.works span:hover{color:var(--text)}
.num{padding:130px 0}
.num-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.num-grid.flip > :first-child{order:2}
.big-num{font-family:var(--display);font-weight:900;color:var(--green);font-size:clamp(6rem,14vw,11.5rem);line-height:.85;letter-spacing:-0.04em}
.num h2{margin-top:14px;font-size:clamp(1.7rem,3.2vw,2.5rem)}
.num .lead{margin-top:18px}
.calc-one{display:grid;gap:8px}
.calc-one .result{margin-top:10px}
.num.wide .country-block{margin-top:56px}
.hero.play{padding:120px 0;border-block:1px solid var(--line);background:var(--surface)}
.hero.play h2{font-size:clamp(1.9rem,3.6vw,2.9rem);max-width:14ch}
.hero.play .lead{margin:22px 0 0}
.quick{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:860px;margin:0 auto}
.quick input,.quick select{flex:1 1 200px;background:var(--surface);border:1.5px solid var(--line);border-radius:999px;padding:15px 20px;color:var(--text);font:inherit}
.quick input:focus,.quick select:focus{border-color:var(--green);outline:none}
.quick .btn{flex:1 1 100%;justify-content:center;max-width:320px}
.final .fine{margin-top:18px}
@media (max-width:900px){.num-grid{grid-template-columns:1fr}.num-grid.flip > :first-child{order:0}.num{padding:90px 0}.top .phone-still{height:380px}}

/* ---- lo que el modal ya tenia y hay que conservar ---- */
.modal-plan-price{color:var(--muted);font-size:.9rem;margin-top:10px}
.field-password{position:relative;display:flex;align-items:center}
.field-password input{width:100%;padding-right:44px}
.password-toggle{position:absolute;right:10px;font-size:1.05rem;line-height:1;opacity:.7}
.password-toggle:hover{opacity:1}
.form-msg{display:none;font-size:.88rem;border-radius:var(--radius-sm);padding:10px 12px;margin-top:4px}
.form-msg.show{display:block}
.form-msg.error{background:rgba(229,72,77,.12);color:#ff9b9e}
.form-msg.success{background:rgba(43,212,111,.12);color:var(--green)}
.form-msg a{color:inherit;text-decoration:underline}
dialog .kind input:disabled + label{opacity:.5;cursor:default}

/* ---- el logo de la marca en la barra ----
   El diseño de referencia traía un logotipo de TEXTO. Se usa el SVG
   oficial de /logo, el mismo del panel, que es la marca de verdad.
   Estas reglas van al final a propósito: así el CSS de la referencia
   queda intacto arriba y se puede seguir comparando contra el archivo.
   El SVG mide 320x64, o sea 5:1 -- a 172px de ancho da 34px de alto y
   entra holgado en la barra de 72px. */
/* EL LOGO SE VEIA CHICO (dueño, 4-oct-2026): el SVG oficial mide 320x64
   pero el dibujo ocupa solo de x=11 a x=242 -- le sobra casi un cuarto
   vacío a la derecha. A 172px, "LinkPay" quedaba de ~18px. No se toca el
   archivo (se usa también en correos y PDF): se muestra más grande y el
   margen vacío se recorta acá, con márgenes negativos proporcionales al
   ancho y overflow:hidden. --logo-w es el ancho del archivo entero; lo
   que ocupa en el menú es ~74% de eso. */
.logo{--logo-w:250px; overflow:hidden; flex:0 0 auto}
.logo img{display:block; width:var(--logo-w); max-width:none; height:auto;
  margin-left:calc(var(--logo-w) * -0.03); margin-right:calc(var(--logo-w) * -0.23)}
/* Todos los tamaños del logo, acá y en ningún otro lado. Los de celular
   están medidos para que el logo, «Iniciar sesión» y el botón entren en
   una línea (ver la sección del encabezado en celular, más abajo). */
@media (max-width:1100px){.logo{--logo-w:225px}}
@media (max-width:680px){.logo{--logo-w:200px}}
@media (max-width:520px){.logo{--logo-w:150px}}
@media (max-width:380px){.logo{--logo-w:134px}}

/* Parrafo de presentacion bajo el titular (19-sep-2026).
   VA AL FINAL a proposito: el CSS de referencia tiene que quedar
   contiguo y sin cortes -- hay una prueba que lo exige, y meter
   una regla en el medio la rompe. Lo nuevo se agrega abajo. */
.pitch{color:var(--muted);font-size:1rem;line-height:1.65;max-width:62ch;margin:0 auto 34px;text-wrap:pretty}
.top .pitch{margin:0 auto 32px}
@media (max-width:720px){.pitch{font-size:.95rem;text-align:left}}
/* precios: dos formas de cobrar, no tres escalones (26-sep-2026) */
.plans-2{grid-template-columns:1.08fr 1fr;max-width:860px;margin-left:auto;margin-right:auto}
.plan .nota{color:var(--muted);font-size:.9rem;line-height:1.55;margin:0 0 14px}
.plan.pro .nota{color:#3b4d42}
.plan .nota-suave{font-size:.85rem;opacity:.85;flex:1}
.sin-lista{margin-top:56px;text-align:center}
.sin-lista h3{font-size:1.25rem;margin-bottom:22px}
ul.sin{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 20px;padding:0}
ul.sin li{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px 14px;font-weight:600;font-size:.95rem}
.sin-lista .nota{color:var(--muted);font-size:.95rem;max-width:640px;margin:0 auto}
.incluido{margin-top:56px}
.incluido h3{font-size:1.25rem;margin-bottom:22px;text-align:center}
ul.incluido-lista{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0;padding:0}
ul.incluido-lista li{padding-left:26px;position:relative}
ul.incluido-lista li::before{content:"";position:absolute;left:0;top:.45em;width:14px;height:8px;border-left:2.5px solid var(--green);border-bottom:2.5px solid var(--green);transform:rotate(-45deg)}
ul.incluido-lista strong{display:block;font-size:.98rem;margin-bottom:2px}
ul.incluido-lista span{color:var(--muted);font-size:.9rem;line-height:1.45}
.cierre{margin-top:56px;text-align:center;font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:-0.02em;line-height:1.3}
.letra-chica{margin-top:32px;text-align:center;color:var(--muted);font-size:.82rem;line-height:1.6}
@media (max-width:900px){
  .plans-2{grid-template-columns:1fr}
  ul.sin{grid-template-columns:repeat(2,1fr)}
  ul.incluido-lista{grid-template-columns:1fr}
  .cierre{font-size:1.25rem}
}

/* ---------------------------------------------------------------------
   EL PERIODO DEL PRECIO NO SE PARTE, Y LA PAGINA TAMPOCO SE DESBORDA.

   Va ACA ABAJO y no tocando la regla de .price de mas arriba: las
   primeras 319 lineas de este archivo son el CSS de
   docs/landing-referencia.html copiado TAL CUAL, y test_landing_nueva.py
   comprueba que siga entero, sin recortes. Editarlo en el sitio rompe
   esa prueba, que existe para cazar justamente eso.

   EL PROBLEMA, medido el 27-sep-2026 con Chromium a cinco anchos: a
   320px y 360px "per completed order" / "por pedido cerrado" se rompia
   en CUATRO lineas. Comparte renglon con el $1.50 a 2.7rem y le queda
   muy poco ancho.

   WHITE-SPACE:NOWRAP A SECAS NO ALCANZA, y fue el primer intento: la
   frase quedaba junta pero estiraba el renglon mas alla de la tarjeta, y
   a 320px la pagina entera se desplazaba 27px en horizontal. Un scroll
   lateral en un telefono es peor que una palabra sola en otra linea.

   Por eso el renglon es flex CON wrap: la frase no se parte por dentro
   (nowrap) y, cuando no entra al lado del precio, baja ENTERA a la linea
   siguiente en vez de empujar. Comprobado a 320, 360, 390, 768 y 1280,
   en los dos idiomas: una sola linea y cero desborde.
   --------------------------------------------------------------------- */
.price{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.4rem}
.price small{white-space:nowrap}

/* ===================================================================
   LA FRANJA DE VENEZUELA (2-oct-2026)
   Arriba de todo, con los tres colores de la bandera. No se cierra y no
   tapa nada: es una puerta a /ve, no un anuncio.
   =================================================================== */
.franja-ve{
  display:flex; align-items:center; justify-content:center; gap:10px;
  flex-wrap:wrap; padding:10px 16px; text-decoration:none;
  background:#0c110e; color:#f1f5f2; font-size:14px; line-height:1.4;
  border-bottom:1px solid #1f2723; position:relative;
}
.franja-ve b{color:#22d36b; white-space:nowrap}
.franja-ve:hover b{text-decoration:underline}
/* La bandera es un SVG en la plantilla (index.html): se ve nítida a
   cualquier densidad de pantalla. 3:2, como la oficial. */
.franja-ve-bandera{
  display:block; width:27px; height:18px; flex:0 0 auto;
  border-radius:2px; box-shadow:0 0 0 1px rgba(255,255,255,.12);
}
@media (max-width:600px){ .franja-ve{font-size:13px; padding:8px 12px} }

/* ===================================================================
   LINKPAY CONECTA: las cajas (2-oct-2026)
   Sin logos ni colores de terceros: las guias de marca de Square,
   Clover y Toast permiten nombrarlos ("funciona con") y no usar su
   logotipo como propio. Asi que el estado se marca con el verde de
   LinkPay y nada mas.
   =================================================================== */
.conecta-lista{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:28px 0 18px;
}
.conecta-item{
  border:1px solid rgba(127,127,127,.28); border-radius:16px; padding:20px;
}
.conecta-item h3{margin:10px 0 8px; font-size:20px; line-height:1.2}
.conecta-item p{margin:0; opacity:.78; font-size:16px; line-height:1.5}
.conecta-estado{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:4px 10px; border-radius:999px;
  border:1px solid rgba(127,127,127,.4); opacity:.75;
}
.conecta-listo .conecta-estado{
  border-color:#22d36b; color:#22d36b; opacity:1;
}
@media (max-width:820px){ .conecta-lista{grid-template-columns:1fr} }

/* ===================================================================
   DEMO DEL CHAT: EL CATÁLOGO DE WHATSAPP (4-oct-2026)
   Las piezas que ve hoy un cliente de La NONA: la tarjeta del producto
   con «Ver catálogo», el catálogo con el carrito, el mensaje de carrito
   enviado y los botones de respuesta pegados a la burbuja.
   =================================================================== */
.screen{position:relative}
.wa-prod{background:#fff;border-radius:12px;overflow:hidden;align-self:flex-start;width:78%;
  box-shadow:0 1px 1px rgba(0,0,0,.08);animation:pop .22s ease-out;font-size:.78rem}
.wa-prod-foto{height:118px;display:grid;place-items:center;font-size:58px}
.wa-prod-info{padding:8px 10px 6px;display:grid;gap:1px}
.wa-prod-info b{font-size:.84rem}
.wa-prod-info small{color:#667781;font-size:.7rem}
.wa-precio{color:#10261a;font-weight:600}
.wa-prod-ver{display:block;width:100%;border-top:1px solid #e9edef;color:#027eb5;font-weight:600;
  font-size:.8rem;padding:9px;background:#fff}
.wa-prod-ver:hover,.wa-botones button:hover{background:#f5f7f6}

.msg.wa-con-botones{padding:0;overflow:hidden;min-width:62%}
.wa-con-botones .wa-texto{padding:9px 12px}
.wa-botones button{display:block;width:100%;border-top:1px solid #e9edef;color:#027eb5;font-weight:600;
  font-size:.8rem;padding:9px 10px;background:#fff}
.wa-con-botones.usado .wa-botones button{color:#8aa0ab;cursor:default}

.wa-carrito{min-width:60%}
.wa-carrito-fila{display:flex;gap:10px;align-items:center}
.wa-carrito-fila b{display:block;font-size:.8rem}
.wa-carrito-foto{width:44px;height:44px;border-radius:8px;display:grid;place-items:center;font-size:24px;flex:none}
.wa-carrito-ver{margin-top:8px;padding-top:7px;border-top:1px solid rgba(0,0,0,.08);text-align:center;
  color:#027eb5;font-weight:600;font-size:.78rem}

.wa-cat{position:absolute;inset:0;z-index:5;background:#fff;display:flex;flex-direction:column;
  color:#10261a;animation:wa-sube .22s ease-out}
@keyframes wa-sube{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.wa-cat-cab{display:flex;align-items:center;gap:10px;padding:16px 14px 12px;background:#0f3b24;color:#fff}
.wa-cat-cab b{display:block;font-size:.9rem;line-height:1.2}
.wa-cat-cab small{font-size:.72rem;opacity:.85}
.wa-cat-volver{color:#fff;font-size:1.25rem;padding:2px 6px;border-radius:8px;background:transparent}
.wa-cat-lista{flex:1;overflow-y:auto;padding:4px 12px}
.wa-cat-item{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid #eef1ef}
.wa-cat-foto{width:52px;height:52px;border-radius:10px;display:grid;place-items:center;font-size:28px;flex:none}
.wa-cat-txt{flex:1;display:grid;gap:1px;font-size:.78rem;min-width:0}
.wa-cat-txt b{font-size:.8rem}
.wa-cat-txt small{color:#667781;font-size:.68rem;line-height:1.3}
.wa-cant{display:flex;align-items:center;gap:6px;flex:none}
.wa-cant button{width:28px;height:28px;border-radius:50%;background:#e7f8ee;color:#0f3b24;font-weight:700;font-size:1rem;line-height:1}
.wa-cant span{min-width:14px;text-align:center;font-weight:700;font-size:.8rem}
.wa-cat-pie{padding:10px 12px 14px;border-top:1px solid #eef1ef}
.wa-cat-carrito{width:100%;padding:11px;border-radius:999px;background:var(--green-deep);color:#fff;font-weight:700;font-size:.82rem}
.wa-cat-carrito:disabled{background:#c9d6cd;color:#5d7466;cursor:default}
.wa-cat-carrito.enviar{background:#0f3b24}
/* Que ningún mensaje se encoja cuando el chat se llena: la columna es
   flex y, sin esto, la tarjeta y los botones quedaban aplastados. */
.chat-body > *{flex-shrink:0}
.wa-cat-txt b,.wa-cat-txt small{overflow-wrap:anywhere}
/* La foto real va encima del emoji (que queda de respaldo). */
.wa-foto{position:relative;overflow:hidden}
.wa-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ENCABEZADO EN CELULAR (dueño, 4-oct-2026): «Iniciar sesión» y el botón
   se partían en dos líneas a 390px. Cada uno queda en una sola línea
   (nowrap) y se ajustan letra, relleno y logo para que entren los tres
   en el ancho de un teléfono. Debajo de 360px el botón ya se ocultaba
   (regla de arriba) y así sigue. */
.nav-right .login,.nav-right .btn{white-space:nowrap}
@media (max-width:520px){
  .nav{gap:10px}
  .nav-right{gap:10px;font-size:.74rem}
  .nav-right .btn{padding:7px 11px}
}