body.no-js #mobileMenuToggle {
  display: none !important;
}
body.no-js nav,
body.no-js .site-header nav {
  display: none !important;
}
:root{
  --primary:#1e3a8a;
  --accent:#d97706;
  --bg:#f5f7fb;
  --card:#ffffff;
  --blue-banner:#1e3a8a;
  --orange-accent:#d97706;
  --gray-dark:#4b5563;
  --green-nature:#22c55e;
  --blue-water:#0ea5e9;
}
body{background:var(--bg);font-family:Inter,Segoe UI,Arial,sans-serif;color:#222}
.site-header{background:linear-gradient(90deg, #1e3a8a, #1e40af);padding:18px 0;color:white}
.brand{font-weight:700;letter-spacing:0.5px}
.site-header nav a{color:white;margin-left:18px;text-decoration:none;font-weight:600}
.hero{background:linear-gradient(180deg, #1e3a8a, #1e40af); padding:50px 0}
.hero .lead{opacity:0.95}
.service-card{background:var(--card);border-radius:8px;border-left: 4px solid var(--orange-accent)}
.card{border-radius:10px;border-top: 3px solid var(--blue-banner)}
.habitaciones .card-img-top{height:180px;object-fit:cover}
#successBox{background:#f0fff4;border-radius:8px;border-left: 4px solid var(--green-nature)}
footer{font-size:14px;background-color:#1e3a8a;color:white}

/* Additional CLUB EL META palette and hero enhancements */
:root{
  --primary-700: #1e3a8a; /* azul oscuro */
  --primary-800: #162f6f;
  --accent-500: #d97706; /* naranja */
  --muted-600: #6b7280;
}

/* Hero: background image is set in template via {% static %} inline style; overlay handled here */
.hero{
  position:relative;
  background-size:cover;
  background-position:center;
  min-height:60vh;
  display:flex;
  align-items:center;
  color: #fff;
}
.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  /* soft blue overlay to match branding */
  background: linear-gradient(rgba(30,58,138,0.55), rgba(30,58,138,0.55));
  z-index: 1;
}
.hero .container{position:relative;z-index:2}

/* Headings and accents */
h2.display-5, h3{color: #fff}
.lead{color: rgba(255,255,255,0.92)}

/* Buttons theme */
.btn-primary{
  background: var(--primary-700) !important;
  border-color: var(--primary-700) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(30,58,138,0.18);
}
.btn-primary:hover, .btn-primary:focus{
  background: var(--primary-800) !important;
  border-color: var(--primary-800) !important;
}
.btn-outline-light{
  color: #fff;
  border-color: rgba(255,255,255,0.7);
}
.btn-outline-light:hover{background: rgba(255,255,255,0.08)}

/* Cards and services */
.card{transition:transform .18s ease, box-shadow .18s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(16,24,40,0.12)}
.service-card strong{color:var(--primary-700)}

/* Responsive tweaks */
@media (max-width:767px){
  .hero{min-height:45vh;padding:40px 0}
  .display-5{font-size:1.6rem}
}

/* Utility: subtle link color for sections */
a.theme-link{color:var(--accent-500);font-weight:600}

/* Events cards ("Tipos de Eventos") */
.events-section{padding:48px 0; background: #fff}
.events-section .container{max-width:1100px}
.events-section .section-title{font-size:1.6rem;font-weight:700;color:var(--primary-700);margin-bottom:26px;letter-spacing:0.2px}

.events-section .card{padding:0;border-radius:10px;background:transparent;border:0}
.events-section .event-card{width:100%;max-width:none;border-radius:12px;background:#ffffff;border:1px solid rgba(16,24,40,0.04);box-shadow:0 6px 18px rgba(16,24,40,0.04);overflow:hidden;display:flex;flex-direction:column;height:100%}
.events-section .event-card .card-body{padding:1.6rem 1.8rem;display:flex;flex-direction:column;justify-content:space-between;gap:12px;min-height:190px}
.events-section .card .card-title{font-weight:700;color:var(--primary-700);display:flex;align-items:center;gap:12px;font-size:1.05rem}
.events-section .card .card-text{color:var(--muted-600);margin-top:8px;font-size:0.95rem}
.events-section .row{gap:20px}

/* Event list inline replacement: move from templates to static file to avoid cache/inconsistency issues */
.event-list { list-style: none; padding: 0; margin: 0; }
.event-list li { display: flex; align-items: center; gap: 12px; padding: 6px 0; color: #475569; }
.event-dot { width: 9px; height: 9px; border-radius: 50%; background: #1e40af; flex-shrink: 0; }
.event-card .card-body { padding: 1.4rem; }

/* Layout improvements: make event cards a nice centered grid */
.events-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:28px;
  align-items:stretch;
}
.events-section .card{width:100%;transition:transform .18s ease, box-shadow .18s ease}
.events-section .card .card-body{min-height:220px}
.events-section .card-title{font-size:1.04rem}

/* Enhanced visual styles for event cards */
.event-card{
  border-radius:10px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(16,24,40,0.04);
  border: 1px solid rgba(16,24,40,0.04);
  position:relative;
}
.event-card:hover{transform:translateY(-6px);box-shadow:0 12px 28px rgba(16,24,40,0.06)}

/* Title accent */
.event-card .card-title{display:flex;align-items:center;gap:10px;margin-bottom:8px;color:#123173;font-weight:700}

/* Emoji styling for card titles */
.emoji { font-size: 1.05rem; display: inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:8px; background: linear-gradient(180deg, rgba(30,58,138,0.08), rgba(59,130,246,0.06)); color: var(--primary-700); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); margin-right:8px }
.card-title .emoji { margin-right: 8px }

/* List adjustments */
.event-list li{justify-content:flex-start;padding:8px 0;align-items:center}
.event-list span{display:inline-block}
.event-dot{width:8px;height:8px;background:linear-gradient(180deg,#1e40af,#3b82f6);box-shadow:0 2px 6px rgba(30,64,175,0.08);flex-shrink:0}

/* subtle entrance animation */
.reveal{opacity:0;transform:translateY(18px) scale(.995);transition:opacity .6s ease, transform .6s cubic-bezier(.2,.9,.2,1)}
.reveal.visible{opacity:1;transform:none}

@media (max-width:768px){
  .events-grid{grid-template-columns: 1fr;gap:18px}
  .events-section .card{max-width:720px}
}
.events-section .card .emoji{font-size:20px;margin-right:8px}

/* Ensure the section title is centered and has breathing room */
.events-section > .container > h3{margin-bottom:18px;color:var(--primary-700);font-weight:700}

@media (min-width:992px){
  .events-section{padding:48px 0}
}

/* Removed 90% global zoom and debug banner per user request */

/* Two-column info area (membresía / contacto) */
.info-columns{padding:28px 0}
.info-columns .col-md-6{display:flex;flex-direction:column;justify-content:center}
.info-box{background:transparent;padding:18px}
.info-box h3{color:var(--primary-800);font-weight:700;margin-bottom:12px}
.info-box p{color:var(--muted-600);line-height:1.6}
.info-box .btn{margin-top:16px;padding:10px 18px}

/* Accent button for solicitar membresía */
.btn-membership{
  background: linear-gradient(180deg, var(--primary-700), var(--primary-800));
  border: none; color: #fff; padding:12px 20px; border-radius:8px;
  box-shadow: 0 8px 22px rgba(30,58,138,0.18);
}
.btn-contact{background:#6b7280;border:none;color:#fff;padding:10px 16px;border-radius:8px}

/* Add small decorative separator */
.section-separator{height:1px;background:rgba(16,24,40,0.04);margin:28px 0}

/* Small utility for reveal animations */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1;transform:none}

/* Estilos mejorados para navegación */
.nav-link-custom {
  color: white !important;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 15px;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.nav-link-custom:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.nav-link-custom i {
  font-size: 16px;
}

.nav-link-admin {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border: 1px solid rgba(245, 158, 11, 0.3);
  font-weight: 600;
}

.nav-link-admin:hover {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}

.nav-link-logout {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: white !important;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 15px;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.nav-link-logout:hover {
  background: rgba(239, 68, 68, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Responsive header: stack logo/brand and navigation on small screens */
@media (max-width: 768px) {
  .site-header .container {
    display:flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px;
    padding: 10px 12px;
  }
  /* Keep logo and brand on a single row, but allow nav to wrap below */
  .site-header .container > div:first-child {
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    gap:12px;
  }
  .site-header nav {
    width:100%;
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center;
    gap:8px;
    padding: 6px 0;
  }
  .nav-link-custom {
    padding: 6px 10px !important;
    font-size: 14px !important;
    background: rgba(255,255,255,0.06) !important;
    border-radius: 8px;
  }
  .nav-link-admin, .nav-link-logout { padding: 6px 10px !important; font-size:14px !important }
  .brand { font-size: 20px !important }
  .logo-img { height:48px !important; width:48px !important }
}

/* Uniform image sizing for carousels and content images */
/* Use object-fit: cover to preserve aspect and crop consistently */
.carousel-inner img,
.carousel-img,
.habitaciones .card-img-top,
.space-card img,
.events-section img,
.modal img {
  width: 100%;
  height: 360px !important;
  object-fit: cover !important;
  display: block;
}

/* Smaller variant for very small screens */
@media (max-width: 576px) {
  .carousel-inner img,
  .carousel-img,
  .habitaciones .card-img-top,
  .space-card img,
  .events-section img,
  .modal img {
    height: 220px !important;
  }
}