/* ===== Reset & tokens ===== */
*{box-sizing:border-box} html,body{height:100%}

:root{
  /* Neutros */
  --bg: #0b1020;                 /* fundo padrão (dark) */
  --surface: rgba(255,255,255,.06);
  --text: #e9eef8;
  --muted: #a4acc0;
  --radius: 14px;
  --shadow-1: 0 10px 30px rgba(0,0,0,.35);
  --shadow-2: 0 20px 40px rgba(0,0,0,.45);

  /* Brand (Court Blue -> Cyan) */
  --brand-600: #2456EA;
  --brand-500: #3B6BFF;
  --brand-cyan: #22D3EE;
  --brand-green: #16A34A;
  --grad-1: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-cyan) 100%);
  --grad-2: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-cyan) 100%);
  --glow: 0 0 0 3px rgba(36,86,234,.25), 0 10px 25px -5px rgba(36,86,234,.35);

  /* Semânticas */
  --ok: #16A34A; --warn:#F59E0B; --err:#EF4444; --info:#06B6D4;

  /* Tipografia fluida */
  --fs-0: clamp(0.98rem, 0.94rem + 0.3vw, 1.05rem);
  --fs-1: clamp(1.15rem, 1.05rem + 0.6vw, 1.35rem);
  --fs-2: clamp(1.45rem, 1.25rem + 1.1vw, 1.9rem);
  --fs-3: clamp(1.9rem, 1.6rem + 1.8vw, 2.6rem);

  /* Breakpoints */
  --bp-md: 768px; --bp-lg: 1100px;
}
@media(prefers-color-scheme:light){
  :root{
    --bg:#f7f8fb; --surface:#fff; --text:#0d1325; --muted:#4a5570;
    --shadow-1: 0 10px 25px rgba(0,0,0,.08);
    --shadow-2: 0 25px 40px rgba(0,0,0,.1);
  }
}

/* Fundo com “luz de estádio” */
body{
  margin:0; font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text); font-size:var(--fs-0); line-height:1.55;
  background:
    radial-gradient(1200px 600px at 10% -10%, color-mix(in oklab, var(--brand-600) 35%, transparent), transparent 60%),
    radial-gradient(1200px 600px at 120% 10%, color-mix(in oklab, var(--brand-cyan) 25%, transparent), transparent 60%),
    var(--bg);
}

/* ===== Util (prefixo qm-) ===== */
.qm-container{width:min(100%, 1200px); margin-inline:auto; padding-inline:1rem}
.qm-section{padding: clamp(1.5rem, 1.2rem + 2vw, 3rem) 0}
.qm-hidden{display:none !important}

/* ===== Header/Nav (usar quando migrar o topo para tema novo) ===== */
.qm-site-header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in oklab, var(--bg) 80%, transparent);
  border-bottom:1px solid color-mix(in oklab, var(--text) 15%, transparent);
  backdrop-filter:saturate(140%) blur(12px);
}
.qm-nav{display:flex; align-items:center; gap:1rem; padding: .75rem 0}
.qm-brand{display:flex; align-items:center; gap:.6rem; font-weight:700}
.qm-brand .qm-logo{width:34px; height:34px; border-radius:10px; background:var(--grad-1); box-shadow:var(--shadow-1)}

/* ===== Botões ===== */
.qm-btn{display:inline-flex; align-items:center; gap:.5rem; font-weight:600; border:0; cursor:pointer;
  padding:.8rem 1.1rem; border-radius:999px; transition:.2s transform, .2s box-shadow, .2s filter}
.qm-btn:active{transform:translateY(1px)}
.qm-btn-primary{background:var(--grad-1); color:white; box-shadow:var(--shadow-1)}
.qm-btn-primary:hover{filter:saturate(1.05) brightness(1.02); box-shadow:var(--glow)}
.qm-btn-ghost{background:transparent; border:1px solid color-mix(in oklab, var(--text) 12%, transparent); color:var(--text)}

/* ===== Cards / Glass ===== */
.qm-card{background:color-mix(in oklab, var(--surface) 100%, transparent); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius); box-shadow:var(--shadow-1); overflow:hidden}
.qm-glass{@supports(backdrop-filter: blur(1px)){backdrop-filter: blur(12px) saturate(130%)}}

/* ===== Forms ===== */
.qm-input, .qm-select, .qm-textarea{
  width:100%; padding:.85rem 1rem; border-radius:12px; border:1px solid color-mix(in oklab, var(--text) 12%, transparent);
  background:color-mix(in oklab, var(--surface) 100%, transparent); color:var(--text);
}
.qm-input:focus, .qm-select:focus, .qm-textarea:focus{outline:none; box-shadow:var(--glow); border-color: transparent}
.qm-field{display:grid; gap:.5rem}
.qm-form{display:grid; gap:1rem}
.qm-help{font-size:.9em; color:var(--muted)}
.qm-input[readonly], .is-readonly{
  background: color-mix(in oklab, var(--text) 8%, var(--surface));
  color: color-mix(in oklab, var(--text) 70%, var(--muted));
  cursor: not-allowed;
}

/* ===== Grid responsivo ===== */
.qm-grid{display:grid; gap:1rem}
.qm-grid-2{grid-template-columns:1fr}
@media (min-width: 768px){ .qm-grid-2{grid-template-columns:1fr 1fr} }
.qm-grid-3{grid-template-columns:1fr}
@media (min-width: 900px){ .qm-grid-3{grid-template-columns:repeat(3,1fr)} }

/* ===== Hero ===== */
.qm-hero{
  padding: clamp(2rem, 4vw + 1rem, 6rem) 0;
  display:grid; gap:1.5rem; align-items:center;
}
.qm-hero h1{font-size:var(--fs-3); line-height:1.1; margin:0}
.qm-hero p{font-size:var(--fs-1); color:var(--muted); margin:0}

/* ===== Footer ===== */
.qm-site-footer{padding:2rem 0; color:var(--muted); border-top:1px solid color-mix(in oklab, var(--text) 15%, transparent)}

/* ===== Tabelas responsivas ===== */
.qm-table-wrap{overflow-x:auto}
table{width:100%; border-collapse:collapse}
th,td{padding:.9rem; border-bottom:1px solid color-mix(in oklab, var(--text) 12%, transparent)}
th{text-align:left; font-size:.92rem; color:var(--muted)}

/* ===== Anim ===== */
.qm-fade-in{opacity:0; transform:translateY(6px); animation:fade .5s ease forwards}
@keyframes fade{to{opacity:1; transform:none}}

/* ===== Chips por modalidade (opcional) ===== */
.qm-pill{display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .7rem; border-radius:999px; font-weight:600; font-size:.85rem; border:1px solid rgba(255,255,255,.12)}
.qm-pill--futebol{background: color-mix(in oklab, var(--brand-green) 22%, transparent); color:#CFF8DA; border-color: color-mix(in oklab, var(--brand-green) 35%, transparent)}
.qm-pill--volei{background: color-mix(in oklab, var(--info) 22%, transparent); color:#DFF8FB; border-color: color-mix(in oklab, var(--info) 35%, transparent)}
.qm-pill--basquete{background: color-mix(in oklab, #F97316 22%, transparent); color:#FFE8D8; border-color: color-mix(in oklab, #F97316 35%, transparent)}
.qm-pill--handebol{background: color-mix(in oklab, #DC2626 22%, transparent); color:#FFE0E0; border-color: color-mix(in oklab, #DC2626 35%, transparent)}
.qm-pill--beach{background: linear-gradient(135deg,#EFBF9C 0%, var(--brand-cyan) 100%); color:#0b1020; border:0}

.maps-icon{display:inline-flex;vertical-align:middle;opacity:.85;margin-left:.4rem}
.maps-icon:hover{opacity:1;transform:translateY(-1px) scale(1.04);transition:all .15s ease}