/* assets/css/club_public.css */
/* Estilos públicos (HOME / disponibilidad / etc.) */

/* =========================
   Base + Fondo (robusto)
   ========================= */
body{
  min-height: 100vh;
  margin: 0;
  color:#fff;

  /* Fondo en capas:
     1) degradado
     2) imagen desde variable CSS --club-bg-image
  */
  background-color: #0b0f18;
  background-image:
    linear-gradient(180deg, rgba(10,12,18,.55), rgba(10,12,18,.75)),
    var(--club-bg-image, none);

  background-position: center center, center center;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
}

.bg-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.25);
  pointer-events: none;
  z-index: 0;
}

.page-wrap{ position: relative; z-index: 1; }

/* =========================
   Topbar / Marca
   ========================= */
.topbar{
  background: rgba(17,24,39,.45);
  border-bottom: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color:#fff;
}

.brand{
  font-weight: 800;
  letter-spacing: .4px;
  display:flex;
  align-items:center;
  gap:10px;
}
.brand img{
  height: 34px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
}

/* =========================
   Card “glass”
   ========================= */
.glass-card{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* =========================
   Botones
   ========================= */
.btn-ghost{
  border-color: rgba(255,255,255,.35);
  color: #fff;
  background: rgba(255,255,255,.06);
}
.btn-ghost:hover{
  background: rgba(59,130,246,.25);
  border-color: rgba(255,255,255,.45);
  color:#fff;
}

/* =========================
   Formularios
   ========================= */
.form-control{
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
}
.form-control:focus{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.35);
  color:#fff;
  box-shadow: 0 0 0 .2rem rgba(255,255,255,.08);
}

::placeholder{ color: rgba(255,255,255,.55) !important; }
.small-muted{ color: rgba(255,255,255,.75); }

/* =========================
   Modales
   ========================= */
.modal { z-index: 2000; }
.modal-backdrop { z-index: 1990; }

.modal-content{
  background: rgba(17,24,39,.78);
  border: 1px solid rgba(255,255,255,.18);
  color:#fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 14px;
}
.modal-header{ border-bottom: 1px solid rgba(255,255,255,.12); }

/* =========================
   Layout HOME: texto arriba izquierda + imagen derecha (desktop)
   ========================= */
@media (min-width: 992px){
  .hero-card{
    display: flex;
    align-items: flex-start;     /* título arriba */
    justify-content: space-between;
    gap: 18px;
  }
  .hero-left{
    flex: 1 1 auto;
    padding-top: 2px;
  }
  .hero-right{
    flex: 0 0 auto;
    margin-left: auto;           /* empuja derecha */
    text-align: right;
    align-self: flex-start;      /* arriba */
  }
  .hero-right img{
    max-width: 240px;            /* tamaño sugerido */
    width: 240px;
  }
}

/* =========================
   Splash
   ========================= */
#splashScreen{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.70);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 99999;
  opacity: 1;
  transition: opacity 600ms ease;
}
#splashScreen.hide{
  opacity: 0;
  pointer-events: none;
}

.splash-inner{
  text-align: center;
  padding: 20px 20px;
}

.splash-logo{
  width: 210px;
  height: 300px;
  border-radius: 22px;
  object-fit: contain;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
  animation: splashPop 700ms cubic-bezier(.2,.9,.2,1);
}

.splash-text{
  margin-top: 14px;
  font-weight: 800;
  letter-spacing: .4px;
  opacity: .95;
  animation: splashFadeUp 800ms ease;
}

.splash-sub{
  margin-top: 10px;
  font-size: 13px;
  opacity: .75;
}

@keyframes splashPop{
  from { transform: translateY(10px) scale(.88); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes splashFadeUp{
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: .95; }
}

@media (prefers-reduced-motion: reduce){
  .splash-logo, .splash-text { animation: none !important; }
  #splashScreen{ transition: none !important; }
}