/* Tarima Design System — port a CSS estático (tokens + componentes) para las
   páginas públicas Blade/Livewire. Fuente de la verdad: design-system/. */

:root {
    /* Ink (base sala de conciertos, tinte violeta) */
    --ink-950:#0A0711; --ink-900:#100B1A; --ink-850:#15101F; --ink-800:#1B1528;
    --ink-700:#271E38; --ink-600:#372A4D; --ink-500:#4A3A66;
    /* Paper (superficies de dinero/recibo) */
    --paper:#FFFFFF; --paper-50:#FBF9FE; --paper-100:#F4F0FA; --paper-200:#E8E1F2;
    --line-light:#E6DFEF;
    /* Texto */
    --text-hi:#FFFFFF; --text-body:#E7E1F2; --text-mute:#A99FC0; --text-dim:#7A7094;
    --ink-text:#150E22; --ink-mute:#5B5270;
    /* Spotlight magenta (CTA/acento) */
    --spot-400:#FF5AA8; --spot-500:#F0308C; --spot-600:#D41F79; --spot-050:#FDE7F2;
    --spot-glow:rgba(240,48,140,.35);
    /* Violet (apoyo) */
    --violet-400:#9A6BF0; --violet-500:#7B3FE4; --violet-600:#6329C9;
    /* Amber (precios/highlight) */
    --amber-400:#FFC85A; --amber-500:#FFB627; --amber-600:#E89A00; --amber-050:#FFF3D6;
    --amber-glow:rgba(255,182,39,.30);
    /* Semánticos */
    --success-500:#2ED47A; --success-050:#E1F9EC; --warning-500:#FFB627;
    --danger-500:#FF4D5E; --danger-050:#FDE3E5; --info-500:#7B3FE4;
    /* Roles */
    --bg-app:var(--ink-950); --surface-1:var(--ink-900); --surface-2:var(--ink-800);
    --surface-card:var(--ink-850); --border-subtle:rgba(255,255,255,.08);
    --border-strong:rgba(255,255,255,.15);
    --accent:var(--spot-500); --accent-hi:var(--spot-400); --accent-press:var(--spot-600);
    --price:var(--amber-500); --cta-bg:var(--spot-500); --cta-text:#FFFFFF;
    --focus-ring:rgba(240,48,140,.55); --link:var(--spot-400);
    /* Fuentes */
    --font-display:'Space Grotesk',system-ui,sans-serif;
    --font-body:'Manrope',system-ui,sans-serif;
    --font-mono:'Space Mono',ui-monospace,monospace;
    /* Escala tipográfica */
    --fs-hero:44px; --fs-h1:32px; --fs-h2:24px; --fs-h3:20px; --fs-title:18px;
    --fs-body:16px; --fs-sm:14px; --fs-xs:12.5px; --fs-2xs:11px; --fs-amount:28px;
    /* Espacio */
    --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
    --sp-8:32px; --sp-10:40px; --sp-12:48px; --gutter:20px; --screen-max:430px;
    /* Radios */
    --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;
    /* Sombras / glows */
    --shadow-card:0 1px 2px rgba(0,0,0,.45),0 10px 30px rgba(0,0,0,.38);
    --shadow-paper:0 2px 8px rgba(10,7,17,.10),0 24px 48px rgba(10,7,17,.16);
    --glow-spot:0 10px 34px var(--spot-glow);
    --ease-out:cubic-bezier(.22,1,.36,1); --dur:200ms;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
    background:
        radial-gradient(55% 40% at 50% 0%,rgba(123,63,228,.16),rgba(0,0,0,0) 60%),
        radial-gradient(45% 35% at 85% 100%,rgba(240,48,140,.10),rgba(0,0,0,0) 60%),
        var(--bg-app);
    color:var(--text-body); font-family:var(--font-body); font-size:var(--fs-body);
    line-height:1.5; -webkit-font-smoothing:antialiased; min-height:100vh;
}
a{color:var(--link);text-decoration:none}
h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;color:var(--text-hi);margin:0}
.mono{font-family:var(--font-mono)}
.muted{color:var(--text-mute)}
.dim{color:var(--text-dim)}
.text-hi{color:var(--text-hi)}

/* Layout móvil-first */
.screen{max-width:var(--screen-max);margin:0 auto;padding:var(--gutter);padding-bottom:120px}
.brand{font-family:var(--font-display);font-weight:700;font-size:21px;color:#fff;letter-spacing:-.02em}
.eyebrow{font-size:var(--fs-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim)}

/* Hero */
.hero{position:relative;border-radius:var(--r-xl);overflow:hidden;margin-bottom:var(--sp-5);
    min-height:180px;background:var(--surface-2);display:flex;align-items:flex-end}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,7,17,0) 30%,rgba(10,7,17,.85) 100%)}
.hero__body{position:relative;padding:var(--sp-5)}
.hero h1{font-size:var(--fs-h1)}

/* Cards */
.card{background:var(--surface-card);border:1.5px solid var(--border-subtle);
    border-radius:var(--r-xl);box-shadow:var(--shadow-card);padding:var(--sp-5);margin-bottom:var(--sp-4)}
.paper{background:var(--paper);color:var(--ink-text);border:1px solid var(--line-light);
    border-radius:var(--r-lg);box-shadow:var(--shadow-paper);padding:var(--sp-5);margin-bottom:var(--sp-4)}
.paper .muted{color:var(--ink-mute)}

/* Tipos de entrada */
.tier{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
    background:var(--surface-card);border:1.5px solid var(--border-subtle);
    border-radius:var(--r-lg);padding:var(--sp-4);margin-bottom:var(--sp-3);transition:border-color var(--dur) var(--ease-out)}
.tier.is-selected{border-color:var(--spot-500);box-shadow:var(--glow-spot)}
.tier__name{font-weight:700;color:var(--text-hi)}
.tier__price{font-family:var(--font-mono);color:var(--price);font-size:var(--fs-title)}
.tier__soldout{font-size:var(--fs-xs);color:var(--danger-500);font-weight:600}

/* Stepper +/- */
.stepper{display:flex;align-items:center;gap:var(--sp-2)}
.stepper button{width:34px;height:34px;border-radius:var(--r-pill);border:1.5px solid var(--border-strong);
    background:var(--surface-2);color:#fff;font-size:18px;cursor:pointer;line-height:1;transition:all var(--dur)}
.stepper button:hover:not(:disabled){background:var(--spot-500);border-color:var(--spot-500)}
.stepper button:disabled{opacity:.35;cursor:not-allowed}
.stepper__val{min-width:24px;text-align:center;font-family:var(--font-mono);font-weight:700;color:#fff}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
    font-family:var(--font-body);font-weight:700;font-size:var(--fs-body);
    padding:14px 22px;border-radius:var(--r-pill);border:none;cursor:pointer;width:100%;
    background:var(--cta-bg);color:var(--cta-text);box-shadow:var(--glow-spot);
    transition:transform var(--dur) var(--ease-out),background var(--dur)}
.btn:hover{background:var(--spot-400)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn--amber{background:var(--amber-500);color:#3a2a00;box-shadow:0 10px 34px var(--amber-glow)}
.btn--amber:hover{background:var(--amber-400)}
.btn--ghost{background:transparent;border:1.5px solid var(--border-strong);color:var(--text-hi);box-shadow:none}
.btn--ghost:hover{background:var(--surface-2)}

/* Sticky total + CTA */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:rgba(16,11,26,.82);backdrop-filter:blur(18px);border-top:1px solid var(--border-subtle);
    padding:var(--sp-3) var(--gutter);}
.sticky-cta__wrap{max-width:var(--screen-max);margin:0 auto;display:flex;align-items:center;gap:var(--sp-4)}
.sticky-cta__total{flex:none}
.sticky-cta__total .amount{font-family:var(--font-mono);font-size:var(--fs-amount);color:#fff;font-weight:700}
.sticky-cta .btn{width:auto;flex:1}

/* Campos */
.field{margin-bottom:var(--sp-4)}
.field label{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--text-mute);margin-bottom:6px}
.field input,.field textarea{width:100%;background:var(--surface-2);border:1.5px solid var(--border-subtle);
    border-radius:var(--r-md);padding:12px 14px;color:#fff;font-family:var(--font-body);font-size:var(--fs-body)}
.field input::placeholder{color:var(--text-dim)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--spot-500);box-shadow:0 0 0 3px var(--focus-ring)}
.field .error{color:var(--danger-500);font-size:var(--fs-xs);margin-top:5px}
.paper .field input{background:var(--paper-50);color:var(--ink-text);border-color:var(--line-light)}

/* Código de referencia (callout fuerte) */
.reference{position:relative;text-align:center;border:2px dashed var(--spot-500);border-radius:var(--r-lg);
    padding:var(--sp-5);background:rgba(240,48,140,.06);box-shadow:var(--glow-spot);margin-bottom:var(--sp-4)}
.reference .label{font-size:var(--fs-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--text-mute)}
.reference .code{font-family:var(--font-mono);font-size:34px;font-weight:700;color:#fff;letter-spacing:4px;margin-top:6px}

/* Fila copiable (dato bancario) */
.copy-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
    padding:12px 0;border-bottom:1px solid var(--line-light)}
.copy-row:last-child{border-bottom:none}
.copy-row .k{font-size:var(--fs-sm);color:var(--ink-mute)}
.copy-row .v{font-family:var(--font-mono);font-weight:700;color:var(--ink-text)}
.copy-row .amount{color:var(--amber-600);font-size:var(--fs-title)}
.copy-btn{background:var(--spot-050);color:var(--spot-600);border:none;border-radius:var(--r-pill);
    padding:6px 12px;font-size:var(--fs-xs);font-weight:700;cursor:pointer;white-space:nowrap}
.copy-btn:hover{background:var(--spot-500);color:#fff}

/* Badge de estado */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:700;
    padding:5px 12px;border-radius:var(--r-pill)}
.badge--pending{background:var(--ink-700);color:var(--text-mute)}
.badge--awaiting{background:var(--amber-050);color:var(--amber-600)}
.badge--approved{background:var(--success-050);color:#137a44}
.badge--rejected,.badge--expired{background:var(--danger-050);color:#b3202e}

/* Chips de confianza */
.trust{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-4) 0}
.trust span{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--text-mute);
    background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:var(--r-pill);padding:6px 12px}
.trust svg{width:14px;height:14px;color:var(--success-500)}

/* Dropzone comprobante */
.dropzone{border:2px dashed var(--border-strong);border-radius:var(--r-lg);padding:var(--sp-6);
    text-align:center;color:var(--text-mute);cursor:pointer;transition:border-color var(--dur)}
.dropzone:hover{border-color:var(--spot-500)}
.dropzone input{display:none}

/* Estado grande (confirmación) */
.status-hero{text-align:center;padding:var(--sp-8) var(--sp-4)}
.status-hero .icon{width:72px;height:72px;border-radius:var(--r-pill);display:inline-flex;align-items:center;
    justify-content:center;margin-bottom:var(--sp-4)}
.status-hero .icon svg{width:36px;height:36px}
.status-hero.ok .icon{background:var(--success-050)} .status-hero.ok .icon svg{color:#137a44}
.status-hero.wait .icon{background:var(--amber-050)} .status-hero.wait .icon svg{color:var(--amber-600)}
.status-hero.bad .icon{background:var(--danger-050)} .status-hero.bad .icon svg{color:#b3202e}
.status-hero h1{font-size:var(--fs-h2);margin-bottom:var(--sp-2)}

.row{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);padding:8px 0}
.total-row{border-top:1px solid var(--border-subtle);margin-top:var(--sp-3);padding-top:var(--sp-3)}
.total-row .amount{font-family:var(--font-mono);font-size:var(--fs-h3);color:#fff;font-weight:700}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Validador en puerta */
.gate{max-width:var(--screen-max);margin:0 auto;padding:var(--gutter);min-height:100vh}
.gate__bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-5)}
.gate__event{font-weight:700;color:#fff}
.gate__reader{width:100%;max-width:340px;margin:1rem auto;border-radius:var(--r-lg);overflow:hidden;background:#000}
.gate__reader video,.gate__reader img{width:100%!important;border-radius:var(--r-lg)}
.event-pick{display:block;width:100%;text-align:left;background:var(--surface-card);border:1.5px solid var(--border-subtle);
    border-radius:var(--r-lg);padding:var(--sp-4);margin-bottom:var(--sp-3);color:#fff;cursor:pointer}
.event-pick:hover{border-color:var(--spot-500)}
.gate-result{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;padding:2rem;color:#fff;cursor:pointer}
.gate-result h1{font-size:60px;color:#fff;letter-spacing:-.02em;line-height:1}
.gate-result.ok{background:var(--success-500)}
.gate-result.warn{background:var(--amber-600)}
.gate-result.bad{background:var(--danger-500)}
.gate-result .meta{font-size:18px;margin-top:1.25rem;opacity:.95}
.gate-result .tap{margin-top:2.5rem;font-size:var(--fs-sm);opacity:.85}

/* ===== Landing de marketing (SaaS, desktop-first) ===== */
:root{ --shadow-pop:0 16px 48px rgba(0,0,0,.5); --r-2xl:28px; }
.mkt{background:var(--bg-app);min-height:100vh}
.mkt a{text-decoration:none}
.mkt h1,.mkt h2,.mkt h3{font-family:var(--font-display);font-weight:700}
.mkt .btn{width:auto;padding:10px 18px;font-size:14.5px}
.mkt .btn.lg{padding:14px 24px;font-size:16px}
.btn--secondary{background:var(--surface-2);color:#fff;border:1.5px solid var(--border-strong);box-shadow:none}
.btn--secondary:hover{background:var(--ink-700)}

.mkt-nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:20px;
    padding:16px clamp(20px,5vw,48px);background:rgba(10,7,17,.72);backdrop-filter:blur(18px);
    border-bottom:1px solid var(--border-subtle)}
.mkt-logo{font-family:var(--font-display);font-weight:700;font-size:23px;color:#fff;letter-spacing:-.02em}
.mkt-logo .dot{color:var(--amber-500)}
.mkt-navlinks{display:flex;gap:26px;margin-left:18px}
.mkt-navlinks a{font-size:14.5px;font-weight:600;color:var(--text-mute)}
.mkt-navlinks a:hover{color:var(--text-body)}
.mkt-navright{margin-left:auto;display:flex;gap:12px;align-items:center}
.mkt-signin{font-size:14.5px;font-weight:700;color:var(--text-body)}

.mkt-hero{position:relative;overflow:hidden;padding:clamp(48px,7vw,96px) clamp(20px,5vw,48px)}
.mkt-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(50% 55% at 20% 0%,rgba(123,63,228,.16),rgba(0,0,0,0) 60%)}
.mkt-hero__grid{position:relative;max-width:1120px;margin:0 auto;display:flex;gap:48px;
    align-items:center;flex-wrap:wrap;justify-content:center}
.mkt-hero__col{flex:1 1 440px;max-width:560px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:var(--r-pill);
    background:var(--surface-2);border:1px solid var(--border-subtle);font-size:12.5px;font-weight:700;
    letter-spacing:.04em;text-transform:uppercase;color:var(--spot-400)}
.mkt-hero h1{margin:20px 0 0;font-size:clamp(40px,6vw,60px);line-height:1.02;letter-spacing:-.03em;color:#fff}
.mkt-hero__sub{margin:22px 0 0;font-size:18px;line-height:1.6;color:var(--text-mute);max-width:460px}
.mkt-hero__cta{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}
.mkt-hero__trust{margin-top:30px;display:flex;flex-wrap:wrap;gap:20px}
.tnote{display:flex;align-items:center;gap:10px}
.tnote__ic{width:34px;height:34px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;
    background:rgba(240,48,140,.12);color:var(--spot-400)}
.tnote__ic svg{width:17px;height:17px}
.tnote.violet .tnote__ic{background:rgba(123,63,228,.14);color:var(--violet-400)}
.tnote.amber .tnote__ic{background:rgba(255,182,39,.14);color:var(--amber-500)}
.tnote__t{font-size:13.5px;font-weight:700;color:#fff}
.tnote__s{font-size:12px;color:var(--text-mute)}

.hero-mock{position:relative;width:320px;flex:none}
.hero-mock__glow{position:absolute;inset:-40px -30px;
    background:radial-gradient(60% 60% at 60% 30%,rgba(240,48,140,.28),rgba(0,0,0,0) 70%);filter:blur(6px)}
.hero-mock__frame{position:relative;border-radius:34px;background:var(--ink-950);border:1px solid var(--border-strong);
    box-shadow:var(--shadow-pop);padding:18px;transform:rotate(1.5deg)}
.mock-total{margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;
    background:var(--ink-900);border:1px solid var(--border-subtle);border-radius:var(--r-lg);padding:12px 14px}
.mock-total .amt{font-family:var(--font-mono);font-weight:700;color:#fff;font-size:20px}

.mkt-stats{border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);background:var(--surface-1)}
.mkt-stats__row{max-width:1120px;margin:0 auto;padding:28px clamp(20px,5vw,48px);display:flex;gap:32px;flex-wrap:wrap;justify-content:space-between}
.mkt-stat{flex:1 1 180px}
.mkt-stat__n{font-family:var(--font-mono);font-weight:700;font-size:30px;color:#fff}
.mkt-stat__l{font-size:13.5px;color:var(--text-mute);margin-top:2px}

.mkt-section{max-width:1120px;margin:0 auto;padding:clamp(56px,7vw,88px) clamp(20px,5vw,48px)}
.mkt-section h2{font-size:clamp(28px,4vw,40px);letter-spacing:-.02em;color:#fff;max-width:620px}
.eyebrow-amber{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--amber-500)}
.feat-grid{margin-top:36px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.feat{background:var(--surface-card);border:1.5px solid var(--border-subtle);border-radius:var(--r-xl);padding:24px;box-shadow:var(--shadow-card)}
.feat__ic{display:flex;width:48px;height:48px;border-radius:var(--r-lg);align-items:center;justify-content:center;background:rgba(240,48,140,.12);color:var(--spot-400);margin-bottom:16px}
.feat__ic svg{width:24px;height:24px}
.feat h3{margin:0 0 8px;font-size:18px;color:#fff}
.feat p{margin:0;font-size:14px;line-height:1.55;color:var(--text-mute)}

.mkt-band{background:var(--surface-1);border-top:1px solid var(--border-subtle)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.step__n{font-family:var(--font-mono);font-weight:700;font-size:15px;color:var(--spot-400);margin-bottom:12px}
.step h3{margin:0 0 8px;font-size:20px;color:#fff}
.step p{margin:0;font-size:14.5px;line-height:1.55;color:var(--text-mute)}

.cta-band{position:relative;overflow:hidden;border-radius:var(--r-2xl);border:1px solid var(--border-strong);background:var(--surface-card);padding:clamp(32px,5vw,56px);text-align:center}
.cta-band::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 120% at 50% 0%,rgba(240,48,140,.2),rgba(0,0,0,0) 65%)}
.cta-band>*{position:relative}
.cta-band h2{margin:0 auto 14px;max-width:560px;font-size:clamp(28px,4vw,40px);letter-spacing:-.02em;color:#fff}
.cta-band p{margin:0 auto 26px;max-width:460px;font-size:16px;line-height:1.6;color:var(--text-mute)}
.cta-band__btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.mkt-footer{border-top:1px solid var(--border-subtle)}
.mkt-footer__row{max-width:1120px;margin:0 auto;padding:40px clamp(20px,5vw,48px);display:flex;gap:24px;flex-wrap:wrap;justify-content:space-between;align-items:center}
.mkt-footer__links{display:flex;gap:26px;flex-wrap:wrap}
.mkt-footer__links a{font-size:13.5px;font-weight:600;color:var(--text-mute)}

@media(max-width:720px){.mkt-navlinks,.mkt-signin{display:none}.hero-mock{transform:scale(.92)}}