/* ============================================================
   BACKSTAGE PASS — sistema de diseño
   Ticket de concierto: papel crudo, borde perforado, mono type
   ============================================================ */

:root{
  --paper:#FBF8F1;
  --paper-dim:#F1EEE5;
  --ink:#2C2C2A;
  --ink-soft:#5F5E5A;
  --line:#B4B2A9;
  --line-soft:#E5E3DA;
  --stub-green:#0F6E56;
  --stub-green-bg:#E1F5EE;
  --stub-gold:#EF9F27;
  --stub-red:#A32D2D;
  --radius-card:4px;
  --font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
  --max: 1120px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper-dim);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block;}
a{color:inherit;}

.wrap{max-width:var(--max);margin:0 auto;padding:0 20px;}

/* ---------- Nav ---------- */
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 0;
}
.nav__brand{
  font-family:var(--font-mono);
  font-size:14px;letter-spacing:1px;
  display:flex;align-items:center;gap:8px;
}
.nav__brand .dot{width:10px;height:10px;border-radius:50%;background:var(--stub-gold);display:inline-block;}
.nav__links{display:flex;gap:22px;align-items:center;font-size:14px;color:var(--ink-soft);}
.nav__links a:hover{color:var(--ink);}

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--font-mono);
  font-size:13px;letter-spacing:.5px;
  padding:12px 20px;border-radius:2px;
  border:1px solid var(--ink);
  background:var(--ink);color:var(--paper);
  cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  transition:transform .12s ease, background .12s ease;
  text-decoration:none;
}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0px) scale(.98);}
.btn--outline{background:transparent;color:var(--ink);}
.btn--stub{background:var(--stub-green);border-color:var(--stub-green);color:var(--stub-green-bg);width:100%;justify-content:center;}
.btn--stub:hover{background:#0c5c47;}
.btn--full{width:100%;justify-content:center;}
.btn[disabled]{opacity:.5;cursor:default;transform:none;}

/* ---------- Inputs ---------- */
label{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:1px;color:var(--ink-soft);margin-bottom:6px;text-transform:uppercase;}
input, select{
  width:100%;
  font-family:var(--font-mono);
  font-size:14px;
  padding:11px 12px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:2px;
  color:var(--ink);
  margin-bottom:14px;
}
input:focus, select:focus{outline:2px solid var(--stub-gold);outline-offset:1px;border-color:var(--stub-gold);}
input::placeholder{color:#9a988f;}
.field-error{color:var(--stub-red);font-size:12px;font-family:var(--font-mono);margin:-10px 0 12px;}

/* ---------- Hero ---------- */
.hero{padding:64px 0 40px;}
.hero__eyebrow{
  font-family:var(--font-mono);font-size:12px;letter-spacing:1.5px;
  color:var(--ink-soft);text-transform:uppercase;margin:0 0 14px;
}
.hero h1{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(34px, 6vw, 62px);
  line-height:1.02;
  margin:0 0 20px;
  letter-spacing:-.01em;
}
.hero p.lede{font-size:18px;color:var(--ink-soft);max-width:520px;margin:0 0 30px;}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap;}

/* ---------- Ticket card ---------- */
.ticket{
  position:relative;
  background:var(--paper);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-card);
  padding:26px 24px;
}
.ticket::before, .ticket::after{
  content:"";position:absolute;top:50%;transform:translateY(-50%);
  width:18px;height:18px;border-radius:50%;background:var(--paper-dim);
}
.ticket::before{left:-9px;}
.ticket::after{right:-9px;}
.ticket__row{display:flex;justify-content:space-between;align-items:center;border-bottom:1px dashed var(--line);padding-bottom:10px;margin-bottom:18px;}
.ticket__row span{font-family:var(--font-mono);font-size:11px;letter-spacing:1px;color:var(--ink-soft);}
.ticket__divider{border-top:1px dashed var(--line);margin:20px 0 16px;padding-top:16px;}
.ticket__label{font-family:var(--font-mono);font-size:11px;letter-spacing:1px;color:var(--ink-soft);text-transform:uppercase;margin:0 0 10px;}

/* ---------- Platform rows ---------- */
.platform{
  display:flex;justify-content:space-between;align-items:center;
  padding:11px 12px;background:#fff;border:1px solid var(--line-soft);
  margin-bottom:6px;border-radius:2px;text-decoration:none;
  transition:border-color .12s ease, transform .12s ease;
}
.platform:hover{border-color:var(--ink);transform:translateX(2px);}
.platform__name{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink);}
.platform__name i{font-size:17px;}
.platform__meta{font-size:12px;color:var(--ink-soft);font-family:var(--font-mono);}

/* ---------- Sections ---------- */
.section{padding:56px 0;}
.section__eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:1.5px;color:var(--ink-soft);text-transform:uppercase;margin:0 0 10px;}
.section h2{font-family:var(--font-display);font-size:clamp(24px,3.6vw,34px);font-weight:500;margin:0 0 26px;}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.stub-card{background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--radius-card);padding:22px;}
.stub-card .n{font-family:var(--font-mono);font-size:12px;color:var(--stub-gold);margin:0 0 10px;}
.stub-card h3{font-family:var(--font-display);font-weight:500;font-size:19px;margin:0 0 8px;}
.stub-card p{font-size:14px;color:var(--ink-soft);margin:0;}

.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.5px;
  padding:4px 10px;border-radius:20px;
  background:var(--stub-green-bg);color:var(--stub-green);
}

/* ---------- Pricing ---------- */
.billing-toggle{display:inline-flex; border:1px solid var(--line); border-radius:2px; margin-bottom:26px; overflow:hidden;}
.billing-btn{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.5px;
  padding:9px 16px; background:var(--paper); border:none; cursor:pointer; color:var(--ink-soft);
}
.billing-btn.is-active{background:var(--ink); color:var(--paper);}
.save-tag{color:var(--stub-gold); margin-left:4px;}
.billing-btn.is-active .save-tag{color:#F0997B;}

.pricing-grid{align-items:stretch;}
.price-card{display:flex; flex-direction:column;}
.price{margin:0 0 16px;}
.price .amount{font-family:var(--font-display); font-size:34px; font-weight:500;}
.price .period{font-size:13px; color:var(--ink-soft); margin-left:4px;}
.plan-features{list-style:none; padding:0; margin:0 0 20px; display:flex; flex-direction:column; gap:10px; flex:1;}
.plan-features li{display:flex; align-items:center; gap:8px; font-size:13px;}
.plan-features li i.ti-check{color:var(--stub-green);}
.plan-features li i.ti-x{color:var(--line);}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--line-soft);padding:30px 0;margin-top:40px;}
.footer__row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--ink-soft);}

/* ---------- Utility ---------- */
.center{text-align:center;}
.muted{color:var(--ink-soft);}
.mt-0{margin-top:0;}
.stack{display:flex;flex-direction:column;gap:12px;}
.spinner{
  width:16px;height:16px;border-radius:50%;
  border:2px solid var(--line-soft);border-top-color:var(--ink);
  animation:spin .7s linear infinite;display:inline-block;
}
@keyframes spin{to{transform:rotate(360deg);}}
.toast{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  background:var(--ink);color:var(--paper);
  padding:12px 18px;border-radius:2px;font-family:var(--font-mono);font-size:13px;
  z-index:50;
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .grid-3{grid-template-columns:1fr;}
  .nav__links{display:none;}
}
@media (max-width: 560px){
  .hero{padding:40px 0 28px;}
  .hero__actions{flex-direction:column;}
  .hero__actions .btn{width:100%;}
}