/* ============================================================
   CanchaYa — Sistema de diseño compartido (design tokens)
   Verde cancha de noche + cal fluo + vidrio esmerilado
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Archivo+Black&display=swap');

:root{
  /* verdes base */
  --pitch:#0c4733;        /* verde cancha de noche */
  --pitch-deep:#04160f;   /* fondo profundo */
  --pitch-2:#0a3527;      /* verde medio */
  --emerald:#19e08a;      /* acento esmeralda (glow) */
  --emerald-soft:#0fae6b;
  /* cal */
  --lime:#c8f95c;         /* línea de cal fluo */
  --lime-deep:#a8e23a;
  --chalk:#f4f6ef;        /* blanco cal */
  /* superficies */
  --grey:#10231b;
  --grey-soft:#16302456;
  --line:rgba(200,249,92,.14);
  --line-soft:rgba(244,246,239,.08);
  /* estados */
  --taken:#5a3030;
  --amber:#f6b73c;
  --amber-soft:#3a2f14;
  --red:#e0654f;
  /* vidrio */
  --glass:rgba(10,38,28,.55);
  --glass-strong:rgba(8,30,22,.74);
  --glass-brd:rgba(255,255,255,.10);
  --glass-hi:rgba(255,255,255,.06);
  --blur:saturate(160%) blur(18px);
  /* glow reutilizable */
  --glow-lime:0 0 28px -4px rgba(200,249,92,.55);
  --glow-emerald:0 0 34px -6px rgba(25,224,138,.45);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Archivo',system-ui,sans-serif;
  color:var(--chalk);
  -webkit-font-smoothing:antialiased;
  background:var(--pitch-deep);
}

/* ---------- Fondo ambiente reutilizable ----------
   Resplandores de cancha de noche detrás del contenido. */
.bg-pitch{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(80% 55% at 50% -8%, #11543d 0%, transparent 60%),
    radial-gradient(60% 50% at 90% 110%, rgba(25,224,138,.10) 0%, transparent 60%),
    radial-gradient(50% 40% at 8% 100%, rgba(200,249,92,.07) 0%, transparent 60%),
    var(--pitch-deep);
}
/* líneas de cal muy sutiles */
.bg-lines{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(transparent 49.6%, rgba(200,249,92,.035) 50%, transparent 50.4%);
  background-size:100% 96px;
}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.pin{width:14px;height:14px;vertical-align:-2px;color:#86d3aa;flex-shrink:0}

/* ---------- Utilidad: tarjeta de vidrio ---------- */
.glass{
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur);
  backdrop-filter:var(--blur);
  border:1px solid var(--glass-brd);
  border-radius:18px;
  box-shadow:0 18px 50px -20px rgba(0,0,0,.7), inset 0 1px 0 var(--glass-hi);
}

/* Logo reutilizable */
.logo{
  font-family:'Archivo Black',sans-serif;
  font-size:1.4rem;letter-spacing:-.5px;color:var(--chalk);
  text-decoration:none;display:flex;align-items:center;gap:8px;
}
.logo span{color:var(--lime)}
.logo .dot{width:19px;height:19px;color:var(--lime);flex-shrink:0;filter:drop-shadow(0 0 5px rgba(200,249,92,.5))}

/* Botones */
.btn-primary{
  background:linear-gradient(135deg,var(--lime),var(--lime-deep));
  color:#06291c;font-weight:700;
  padding:15px 28px;border-radius:11px;text-decoration:none;font-size:1rem;
  border:none;cursor:pointer;font-family:'Archivo';display:inline-block;
  transition:transform .15s, box-shadow .15s, filter .15s;
  box-shadow:0 10px 32px -8px rgba(200,249,92,.55);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px -8px rgba(200,249,92,.75);filter:brightness(1.05)}
.btn-ghost{
  background:rgba(255,255,255,.04);color:var(--chalk);font-weight:600;
  padding:15px 28px;border-radius:11px;text-decoration:none;font-size:1rem;
  border:1px solid var(--glass-brd);cursor:pointer;font-family:'Archivo';
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:border-color .15s,background .15s,transform .15s;display:inline-block;
}
.btn-ghost:hover{border-color:var(--lime);background:rgba(200,249,92,.10);transform:translateY(-2px)}