@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Instrument+Sans:wght@400;500;600&display=swap');

/* ============================================================
   EQ v2 — skin global (hero, botones, modales)
   Paleta club: navy #191A4E / #1A1A78 · arcilla #C25A38 · amarillo #F5D63D · naranjo #E8892B
   ============================================================ */

:root{
  --eq-navy:#191A4E;
  --eq-navy2:#1A1A78;
  --eq-clay:#C25A38;
  --eq-clay-d:#B85216;
  --eq-yellow:#F5D63D;
  --eq-orange:#E8892B;
  --eq-ink:#2b2c3a;
  --eq-muted:#8a8a99;
  --eq-line:#ececf3;
  --eq-bg:#f6f6fb;
}

/* ---------- Hero / breadcrumb ----------
   Calca el .breadcrumb-section del tema (mismo alto y background) para que
   la cabecera de reservas se vea IGUAL al resto del sitio y NO se solape
   con el menú superior (.header-section es position:absolute; z-index:99). */
.eq-hero{
  position:relative;
  background:linear-gradient(rgba(25,26,78,.80),rgba(26,26,120,.88)),
             url('/images/breadcrumbtenis-bg.jpg') center center/cover no-repeat;
  background-color:var(--eq-navy);
  color:#fff;
  min-height:420px;
  padding:210px 20px 56px;      /* deja pasar el nav absoluto de arriba */
  text-align:center;
  margin-bottom:34px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.eq-hero h2{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:56px;
  text-transform:uppercase;
  margin:0 0 12px;
  letter-spacing:.5px;
  color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.25);
  line-height:1.05;
}
.eq-hero .miga{
  font-family:'Space Grotesk',sans-serif;
  font-size:17px;font-weight:700;
  color:#fff;
}
.eq-hero .miga a{color:#fff;text-decoration:none;font-weight:700}
.eq-hero .miga a:hover{color:var(--eq-yellow)}
.eq-hero .miga span{margin-left:8px;color:var(--eq-orange)}
.eq-hero .miga span::before{content:'›';margin-right:8px;color:#fff}

@media (max-width:768px){
  .eq-hero{min-height:300px;padding:140px 18px 44px}
  .eq-hero h2{font-size:36px}
  .eq-hero .miga{font-size:15px}
}

/* ---------- Botones ---------- */
.btn-eq{
  display:inline-block;
  background:var(--eq-navy2);
  color:#fff!important;
  border:0;
  padding:12px 26px;
  border-radius:11px;
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:15px;
  cursor:pointer;
  text-decoration:none;
  transition:background .15s ease,transform .05s ease;
  line-height:1.1;
}
.btn-eq:hover{background:#26268f}
.btn-eq:active{transform:translateY(1px)}
.btn-eq[disabled],.btn-eq:disabled{background:#b9b9c9;cursor:not-allowed}
.btn-eq.sec,.btn-eq.gray{background:#5a5a6e}
.btn-eq.sec:hover,.btn-eq.gray:hover{background:#484857}
.btn-eq.peligro{background:var(--eq-clay-d)}
.btn-eq.peligro:hover{background:#9c440f}
.btn-eq.auto{min-width:150px}

.btn-mini{
  display:inline-block;margin-top:8px;
  background:var(--eq-orange);color:#fff;border:0;
  padding:7px 15px;border-radius:9px;
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13px;cursor:pointer;
  transition:background .15s;
}
.btn-mini:hover{background:#cf7715}
.btn-mini.anula{background:var(--eq-clay-d)}
.btn-mini.anula:hover{background:#9c440f}

/* ---------- Modales (tema oscuro club) ---------- */
.modal.eq-dark .modal-content{
  background:#fff;color:var(--eq-ink);
  border:0;border-radius:16px;overflow:hidden;
  box-shadow:0 20px 60px rgba(25,26,78,.35);
}
.modal.eq-dark .modal-body{padding:28px 26px}
.modal.eq-dark .modal-header{border:0;padding:20px 26px 0}
.modal.eq-dark .modal-footer{border:0;padding:0 26px 22px;justify-content:center;gap:10px}
.modal.eq-dark .modal-title{
  font-family:'Space Grotesk',sans-serif;color:var(--eq-navy2);font-weight:700;
}
.modal.eq-dark p{font-family:'Instrument Sans',sans-serif;color:#4a4b5a;line-height:1.55}
.modal.eq-dark .text-left{text-align:left}

/* ---------- Loader ---------- */
.cargando-eq{padding:34px 10px;text-align:center;color:var(--eq-muted);font-family:'Instrument Sans',sans-serif}
.cargando-eq h4{margin:12px 0 0;color:var(--eq-navy2);font-family:'Space Grotesk',sans-serif}
.spin{
  display:inline-block;width:34px;height:34px;border-radius:50%;
  border:4px solid #e3e3ef;border-top-color:var(--eq-orange);
  animation:eqspin .8s linear infinite;
}
@keyframes eqspin{to{transform:rotate(360deg)}}