/* VORVEX Café POS SaaS · cafe-pos.php, cafe-verificar.php, cafe-pagar.php
   Usa los tokens de assets/vorvex-home-tokens.css (--vx-*). Todo con prefijo cf-
   para no chocar con .hero/.section/.card de style.css. */

.cf-body{background:var(--vx-bg,#05060a);color:var(--vx-text,#f4f6fb)}
.cf{--cf-paper:#f1ece2;--cf-ink:#211d18;--cf-ink-soft:#6b6257;--cf-ok:#5fd394;--cf-bad:#ff8f9b;--cf-warn:#ffcc74;
  max-width:var(--vx-max,1280px);margin:0 auto;padding:0 24px 96px;font-size:16px;line-height:1.6;overflow-wrap:anywhere}
.cf *,.cf *::before,.cf *::after{box-sizing:border-box}
.cf a{color:var(--vx-blue-bright,#5b8dff);text-decoration:underline;text-underline-offset:3px}
:where(.cf) :where(h1,h2,h3){margin:0}
.cf h1,.cf h2,.cf h3{color:var(--vx-text);letter-spacing:-.01em;line-height:1.15}
.cf h2{font-size:clamp(26px,3.2vw,36px);font-weight:750}
.cf h3{font-size:18px;font-weight:700}
:where(.cf) p{margin:0}
.cf :focus-visible{outline:2px solid var(--vx-blue-bright,#5b8dff);outline-offset:3px;border-radius:6px}
.cf-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
.cf-narrow{max-width:760px}

.cf-kicker{color:var(--vx-violet-soft,#a78bfa);font-weight:700;font-size:15px;margin-bottom:14px}
.cf-addr{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;color:var(--vx-text);background:var(--vx-surface,#10131d);border:1px solid var(--vx-line,#1e2433);padding:1px 7px;border-radius:6px;white-space:nowrap}

/* Botones */
.cf .cf-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;border-radius:10px;font-weight:700;font-size:15px;text-decoration:none;border:1px solid transparent;cursor:pointer;font-family:inherit;transition:background-color .15s,border-color .15s}
.cf .cf-btn-primary{background:var(--vx-blue,#2f6bff);color:#fff}
.cf .cf-btn-primary:hover{background:#4a7dff}
.cf .cf-btn-ghost{background:transparent;color:var(--vx-text);border-color:var(--vx-line,#1e2433)}
.cf .cf-btn-ghost:hover{border-color:var(--vx-blue-bright)}
.cf .cf-btn[aria-disabled="true"],.cf fieldset:disabled .cf-btn{opacity:.55;cursor:not-allowed}
.cf .cf-btn[hidden]{display:none}

/* Hero */
.cf-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center;padding:72px 0 64px}
.cf-hero h1{font-size:clamp(34px,4.6vw,54px);font-weight:800;max-width:17ch;letter-spacing:-.025em}
.cf-lede{color:#c3cad8;font-size:18px;max-width:56ch;margin-top:20px}
.cf-price-line{margin-top:18px;color:var(--vx-muted,#93a0b8);max-width:56ch}
.cf-price-line strong{color:var(--vx-text)}
.cf-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* El ticket: el único elemento con voz propia de la página */
.cf-ticket{margin:0;justify-self:center;width:100%;max-width:340px}
.cf-ticket-paper{background:var(--cf-paper);color:var(--cf-ink);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:13.5px;line-height:1.55;padding:26px 24px 30px;position:relative;transform:rotate(1.6deg);
  box-shadow:0 30px 60px -20px #000c,0 0 0 1px #0000000d;
  -webkit-mask:radial-gradient(circle 7px at 50% 100%,#0000 98%,#000) 0 0/16px 100% repeat-x;mask:radial-gradient(circle 7px at 50% 100%,#0000 98%,#000) 0 0/16px 100% repeat-x}
.cf-ticket-paper hr{border:0;border-top:1px dashed #8c8276;margin:12px 0}
.cf-t-biz{font-weight:800;text-align:center;letter-spacing:.06em}
.cf-t-meta{text-align:center;color:var(--cf-ink-soft);font-size:12px;margin-top:6px}
.cf-t-lines{display:grid;grid-template-columns:1fr auto;gap:2px 12px;margin:0}
.cf-t-lines dt,.cf-t-lines dd{margin:0}
.cf-t-lines dd{text-align:right;font-variant-numeric:tabular-nums}
.cf-t-mod{color:var(--cf-ink-soft);padding-left:12px}
.cf-t-total dt:first-child,.cf-t-total dd:nth-of-type(1){font-weight:800;font-size:15px}
.cf-t-foot{text-align:center;margin-top:14px;font-size:12px;color:var(--cf-ink-soft)}
.cf-ticket figcaption{color:var(--vx-dim,#5b6780);font-size:13px;text-align:center;margin-top:18px}

/* Secciones */
.cf-section{padding:64px 0;border-top:1px solid var(--vx-line-soft,#171d2b)}
.cf-head{max-width:640px;margin-bottom:36px}
.cf-head p{color:var(--vx-muted);margin-top:12px}

.cf-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 40px}
.cf-feature{padding-top:18px;border-top:2px solid var(--vx-line,#1e2433)}
.cf-feature:nth-child(3n+1){border-top-color:var(--vx-blue,#2f6bff)}
.cf-feature p{color:var(--vx-muted);margin-top:10px;font-size:15px}

/* Plan + pasos */
.cf-plan{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.cf-plan-card{background:var(--vx-surface,#10131d);border:1px solid var(--vx-line);border-radius:16px;padding:32px}
.cf-plan-price{margin-top:18px;color:var(--vx-muted)}
.cf-plan-price span{font-size:52px;font-weight:800;color:var(--vx-text);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.cf-plan-sub{color:var(--vx-muted);margin-top:4px}
.cf-list{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:10px}
.cf-list li{padding-left:26px;position:relative}
.cf-list li::before{content:"";position:absolute;left:2px;top:.45em;width:12px;height:7px;border-left:2px solid var(--cf-ok);border-bottom:2px solid var(--cf-ok);transform:rotate(-45deg)}
.cf-plan-note{margin-top:22px;color:var(--vx-muted);font-size:14px;border-top:1px solid var(--vx-line);padding-top:18px}
.cf-steps ol{list-style:none;counter-reset:cf;padding:0;margin:28px 0 0;display:grid;gap:26px}
.cf-steps li{counter-increment:cf;display:grid;grid-template-columns:44px 1fr;gap:4px 16px}
.cf-steps li::before{content:counter(cf);grid-row:span 2;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:800;border:1px solid var(--vx-line);color:var(--vx-blue-bright)}
.cf-steps li p{color:var(--vx-muted);font-size:15px}

/* Formulario */
.cf-signup .cf-head{margin-bottom:28px}
.cf-form,.cf-lead{max-width:760px}
.cf-form fieldset{border:0;margin:0;padding:0;min-width:0}
.cf-form-off{opacity:.5;margin-top:36px}
.cf-lead{background:var(--vx-surface);border:1px solid var(--vx-line);border-radius:16px;padding:26px}
.cf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.cf-wide{grid-column:1/-1}
.cf-field label{display:block;font-weight:600;font-size:14px;margin-bottom:7px;color:#d5dbe6}
.cf-opt{color:var(--vx-dim);font-weight:400}
.cf input:not([type=checkbox]){width:100%;min-height:48px;background:var(--vx-bg-elev,#0a0d15);border:1px solid #2a3245;color:var(--vx-text);padding:12px 14px;border-radius:10px;font-size:16px;font-family:inherit}
.cf input:not([type=checkbox]):focus{outline:none;border-color:var(--vx-blue-bright);box-shadow:0 0 0 3px #5b8dff33}
.cf input[aria-invalid="true"]{border-color:var(--cf-bad)}
.cf-slug{display:flex;flex-wrap:wrap;align-items:center;gap:0;background:var(--vx-bg-elev,#0a0d15);border:1px solid #2a3245;border-radius:10px;padding:0 14px 0 0}
.cf-slug:focus-within{border-color:var(--vx-blue-bright);box-shadow:0 0 0 3px #5b8dff33}
.cf .cf-slug input{flex:1 1 7rem;min-width:0;border:0;background:transparent;box-shadow:none;padding:12px 2px 12px 4px;text-align:right;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.cf .cf-slug input:focus{box-shadow:none}
.cf-slug-pre{color:var(--vx-dim);padding-left:14px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15px}
.cf-slug-suf{color:#c3cad8;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15px;white-space:nowrap}
.cf-help{color:var(--vx-muted);font-size:13.5px;margin-top:7px}
.cf-slug-status{font-size:14px;margin-top:6px;min-height:1.5em;font-weight:600;color:var(--vx-muted)}
.cf-slug-status.is-ok{color:var(--cf-ok)}
.cf-slug-status.is-bad{color:var(--cf-bad)}
.cf-err{color:var(--cf-bad);font-size:14px;margin-top:6px}
.cf-alert{background:#2a1418;border:1px solid #5a2830;color:#ffc2c9;padding:14px 16px;border-radius:10px;margin-bottom:20px;max-width:760px}
.cf-alert a{color:#fff}
.cf-warn{color:var(--cf-warn);margin-top:12px}
.cf-terms{margin-top:26px;border:1px solid var(--vx-line);border-radius:10px;padding:12px 16px;background:var(--vx-bg-elev)}
.cf-terms summary{cursor:pointer;font-weight:600;min-height:28px}
.cf-terms ul{margin:10px 0 4px;padding-left:20px;color:var(--vx-muted);font-size:14px;display:grid;gap:6px}
.cf-check{display:flex;gap:12px;align-items:flex-start;margin-top:18px}
.cf-check input{width:22px;height:22px;margin:2px 0 0;flex:none;accent-color:var(--vx-blue)}
.cf-check label{font-size:15px;color:#d5dbe6}
.cf-submit{margin-top:26px;width:100%;max-width:340px}
.cf-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.cf-done{background:#0f2219;border:1px solid #1f5a3c;border-radius:16px;padding:28px;max-width:760px}
.cf-done h3{color:var(--cf-ok);font-size:22px;margin-bottom:10px}
.cf-done p+p{margin-top:10px}
.cf-done a{color:#fff}

/* Pagar (sección informativa) */
.cf-pay p{max-width:64ch;color:#c3cad8;margin-top:14px}

/* FAQ */
.cf-faq h2{margin-bottom:24px}
.cf-faq details{border-bottom:1px solid var(--vx-line);max-width:820px}
.cf-faq summary{cursor:pointer;padding:18px 36px 18px 0;font-weight:650;font-size:17px;list-style:none;position:relative}
.cf-faq summary::-webkit-details-marker{display:none}
.cf-faq summary::after{content:"";position:absolute;right:8px;top:26px;width:9px;height:9px;border-right:2px solid var(--vx-muted);border-bottom:2px solid var(--vx-muted);transform:rotate(45deg);transition:transform .2s}
.cf-faq details[open] summary::after{transform:rotate(-135deg);top:30px}
.cf-faq details p{color:var(--vx-muted);padding:0 0 20px;max-width:68ch}

/* Páginas legales */
.cf-legal{max-width:820px;padding-top:56px}
.cf-legal h1{font-size:clamp(30px,4.4vw,42px);font-weight:800}
.cf-legal h2{font-size:21px;margin:36px 0 10px}
.cf-legal p,.cf-legal li{color:#c3cad8;max-width:72ch}
.cf-legal p+p{margin-top:12px}
.cf-legal ul{padding-left:22px;display:grid;gap:8px;margin:10px 0 0}
.cf-legal-meta{color:var(--vx-muted)!important;margin-top:10px}
.cf-legal-links{margin-top:28px;color:var(--vx-muted);font-size:14px}
.cf-lead .cf-help{margin-top:14px}
.cf-check label a{color:#fff}

/* Progreso y pago */
.cf-progress{padding:64px 0 24px}
.cf-progress h1{font-size:clamp(30px,4.4vw,44px);font-weight:800}
.cf-progress>p{margin-top:14px;color:#c3cad8}
.cf-progress-host{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--vx-muted)!important;margin-top:10px!important}
.cf-track{list-style:none;padding:0;margin:34px 0 8px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cf-track li{border-top:4px solid var(--vx-line);padding-top:12px;font-size:14px;color:var(--vx-dim);font-weight:600}
.cf-track li.is-done{border-top-color:var(--cf-ok);color:var(--vx-text)}
.cf-track li.is-now{border-top-color:var(--vx-blue);color:var(--vx-text)}
.cf-track li.is-stop{border-top-color:var(--cf-warn);color:var(--vx-text)}
.cf-progress-msg{font-size:18px;color:var(--vx-text)!important;margin-top:22px!important}
.cf-progress-actions{display:flex;flex-wrap:wrap;gap:12px}
.cf-facts{display:grid;grid-template-columns:max-content 1fr;gap:10px 22px;margin:28px 0 0;padding:20px 0;border-top:1px solid var(--vx-line);border-bottom:1px solid var(--vx-line)}
.cf-facts dt{color:var(--vx-muted)}
.cf-facts dd{margin:0}
.cf-bad{color:var(--cf-bad)}
.cf-total{font-size:44px;font-weight:800;letter-spacing:-.02em;margin:22px 0 18px!important;color:var(--vx-text)!important;font-variant-numeric:tabular-nums}
.cf-total span{font-size:16px;color:var(--vx-muted);font-weight:600}
.cf-methods{display:grid;gap:10px;max-width:420px}
.cf .cf-method{width:100%}
.cf-paybox .cf-alert{margin-top:8px}

@media (max-width:980px){
  .cf-hero{grid-template-columns:1fr;gap:44px;padding-top:48px}
  .cf-features{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cf-plan{grid-template-columns:1fr}
}
@media (max-width:640px){
  .cf{padding:0 16px 72px}
  .cf-features{grid-template-columns:1fr;gap:28px}
  .cf-grid{grid-template-columns:1fr}
  .cf-section{padding:48px 0}
  .cf-plan-card{padding:24px}
  .cf-lede{font-size:17px}
  .cf-slug-pre{display:none}
  .cf .cf-slug input{padding-left:14px;text-align:left}
  .cf-slug-suf{padding:0 0 10px 14px;flex-basis:100%}
  .cf-ticket-paper{transform:none}
  .cf-submit{max-width:none}
  .cf-facts{grid-template-columns:1fr;gap:2px}
  .cf-facts dd{margin-bottom:10px}
  .cf-track li{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .cf *{transition:none!important}
}

/* Plan mensual / anual en el pago */
.cf-plans{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}
.cf-plan-opt{display:flex;flex-direction:column;gap:4px;padding:14px;border:1px solid var(--vx-line,#1e2433);border-radius:14px;text-decoration:none;color:inherit;min-height:44px}
.cf-plan-opt b{font-size:16px}
.cf-plan-opt span{font-size:13px;opacity:.8}
.cf-plan-opt.on{border-color:var(--vx-blue,#2f6bff);box-shadow:0 0 0 1px var(--vx-blue,#2f6bff) inset}
.cf-plan-opt:focus-visible{outline:2px solid var(--vx-blue,#2f6bff);outline-offset:2px}
@media (max-width:420px){.cf-plans{grid-template-columns:1fr}}
/* Código de cursos */
.cf-code{font:700 20px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;word-break:break-all;padding:12px 14px;border-radius:12px;background:rgba(47,107,255,.08);border:1px dashed var(--vx-blue,#2f6bff)}
.cf .cf-plan-opt,.cf .cf-plan-opt b,.cf .cf-plan-opt span{text-decoration:none;color:var(--vx-text,#f2f5fa)}
.cf .cf-plan-opt:hover{border-color:var(--vx-blue-bright,#4a7dff)}