:root {
      --bg: #0c1620;
      --panel: #0f1c28;
      --muted: #d0d8e0;
      --text: #ffffff;
      --accent: #d6a642;
      --divider: rgba(255,255,255,.08);
      --radius: 16px;
      --ink: #dfe6ee;         /* texto base claro */
      --gold: #e5b65c;        /* acento dorado */
      --gold-700:#c79b43;
      --stroke: #1d2933;      /* borde sutil */
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      line-height: 1.6;
    }
    h1,h2,h3,h4,h5,h6 { font-family: "Playfair Display", serif; }

    /* Navbar */
    .navbar { backdrop-filter: saturate(120%) blur(6px); background: linear-gradient(to bottom, rgba(12,22,32,.85), rgba(12,22,32,.35)); border-bottom: 1px solid var(--divider); }
    .navbar-brand, .navbar-nav .nav-link { color: #dfe7ef !important; }
    .navbar-nav .nav-link:hover { color: #fff !important; }

    /* Hero */
    .hero {
      position: relative;
      padding-top: 120px;
      min-height: 72vh;
      display: flex;
      align-items: center;
      overflow: hidden;
      background: radial-gradient(1200px 600px at 70% 30%, rgba(214,166,66,.06), transparent 60%),
                  radial-gradient(600px 400px at 20% 70%, rgba(143,179,199,.05), transparent 60%);
    }
    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: url('../../assets/imgs/home-banner-01.jpg') center/cover no-repeat;
      filter: brightness(.55) saturate(90%);
      z-index: -2;
      transform: scale(1);
      animation: zoomslow 25s ease-in-out infinite alternate;
    }
    @keyframes zoomslow {
      0% { transform: scale(1) translate(0, 0); }
      100% { transform: scale(1.1) translate(0, -10px); }
    }
    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(to bottom, rgba(12,22,32,.25) 0%, rgba(12,22,32,.65) 60%, var(--bg) 100%);
    }
    .eyebrow { color: var(--accent); font-weight: 700; font-family: "Playfair Display", serif; font-size: clamp(16px, 2vw, 20px); }
    .hero h1 { font-weight: 800; line-height: 1.15; font-size: clamp(36px, 6vw, 68px); text-wrap: balance; }
    .hero p { color: var(--muted); font-size: clamp(14px, 1.2vw, 18px); max-width: 52ch; }

    /* Eventos */
    #eventos { background: linear-gradient(to bottom, var(--bg), #0b1a26); }
    .event-list { border-top: 1px solid var(--divider); }
    .event-item { border-bottom: 1px solid var(--divider); padding: 22px 0; cursor:pointer; position:relative; }
    .event-name { font-family: "Playfair Display", serif; font-size: 1.4rem; font-weight: 700; color: #dfe7ef; margin:0; }
    .event-meta { font-size: .9rem; color: #e1c071; opacity: .95; }

    .event-details { display:none; padding: 20px 0 0; }
    .event-item:hover .event-details { display:block; animation: fadeIn .5s ease; }
    @keyframes fadeIn { from { opacity:0; transform:translateY(-10px);} to {opacity:1; transform:translateY(0);} }

    .detail-img img { width:100%; border-radius: var(--radius); box-shadow:0 8px 20px rgba(0,0,0,.35); }
    .detail-copy h4 { color: var(--accent); }

    .btn-reservar {
      background: var(--accent);
      color: #0c1620;
      font-weight:600;
      border:none;
      border-radius:50px;
      padding:8px 24px;
      transition: all .3s ease;
    }
    .btn-reservar:hover { background:#f1c85b; color:#000; }

    footer { background:#0a141d; border-top:1px solid var(--divider); color: var(--muted); }
    .copyright { border-top:1px solid var(--divider); color:#9fb0bf; font-size:.9rem; }

    /* Mejor contraste en texto dentro de los detalles de evento */
    .event-details p,
    .event-details ul,
    .event-details li {
      color: #d8dee7 !important;  /* gris claro legible */
    }

    .event-details h4 {
      color: var(--accent); /* mantiene el dorado */
    }

    .event-details a.btn-reservar {
      margin-top: 10px;
    }

    /* --- Ajustes de contraste global --- */
    .text-muted,
    .text-muted-soft,
    footer,
    footer a,
    footer small,
    footer .text-muted {
      color: #d8dee7 !important;   /* gris claro visible sobre fondo oscuro */
    }

    footer h4, footer h3 {
      color: #ffffff !important;
    }

    footer a:hover {
      color: var(--accent) !important;
    }

    /* Parrafos explicativos (como el bloque sobre eventos) */
    #eventos p,
    #eventos .text-muted {
      color: #d8dee7 !important;
    }

    /* Bordes del footer más visibles */
    footer {
      border-top: 1px solid rgba(255,255,255,0.15);
      background: #0b1621;
    }


/* ===============================
   CONTACTO / RESERVAS 
================================= */

.py-6{padding-top:4rem;padding-bottom:4rem}
  .mb-6{margin-bottom:4rem}
  .contacto-dark{background:var(--bg); position:relative; overflow:hidden;}
  /* textura sutil */
  .contacto-dark::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:
      radial-gradient(1200px 600px at 80% -10%, rgba(255,255,255,.06), transparent 60%),
      radial-gradient(900px 500px at -10% 110%, rgba(255,255,255,.05), transparent 60%);
    mix-blend-mode:screen;opacity:.3;
  }

  .text-light{color:var(--ink)!important}
  .text-gold{color:var(--gold)}
  .eyebrow{letter-spacing:.08em;text-transform:uppercase;font-size:.85rem}

  .reservation-wrap{background:rgba(18,27,36,.5); border:1px solid var(--stroke); border-radius:1rem}
  .card-dark{background:var(--panel); border:1px solid var(--stroke); border-radius:1rem}
  .img-side img{display:block; object-position:center}

  /* Campos oscuros */
  .form-control-dark, .form-select.form-control-dark{
    background:#0f161d; border:1px solid #22303b; color:var(--ink);
  }
  .form-control-dark::placeholder{color:#7c8a97}
  .form-control-dark:focus, .form-select.form-control-dark:focus{
    border-color:var(--gold); box-shadow:0 0 0 .15rem rgba(229,182,92,.25);
    background:#111a22; color:var(--ink);
  }
  .form-check-input{background:#0f161d; border:1px solid #22303b}
  .form-check-input:checked{background-color:var(--gold); border-color:var(--gold)}

  /* Botón dorado */
  .btn-gold{background:var(--gold); border:0; color:#1b1b1b; font-weight:600; letter-spacing:.02em}
  .btn-gold:hover{background:var(--gold-700); color:#111;}
  .link-gold{color:var(--gold); text-decoration:none}
  .link-gold:hover{text-decoration:underline}

  /* Ornamento taza dibujada (como en la card) */
  .sketch-cup{
    position:absolute; right:1.25rem; top:1.25rem; width:150px; height:120px; opacity:.08; 
    background:
      radial-gradient(circle at 50% 70%, transparent 28%, #fff 29% 31%, transparent 32%),
      radial-gradient(circle at 65% 75%, transparent 38%, #fff 39% 41%, transparent 42%),
      linear-gradient(#fff,#fff) 20% 68%/60% 2px no-repeat;
    filter:blur(.4px);
  }

  /* Helpers */
  .object-fit-cover{object-fit:cover}
  .text-muted{color:var(--muted)!important}

/* ==== PARCHE CONTRASTE FORMULARIO (Contacto/Reservas) ==== */
/* Más contraste en campos, placeholder y foco */
.contacto-dark .form-control,
.contacto-dark .form-select,
.contacto-dark textarea,
.contacto-dark .form-control-dark,
.contacto-dark .form-select.form-control-dark{
  background: #0b1722;                        /* más claro que #0f161d -> sube contraste */
  border: 1px solid rgba(255,255,255,.22);    /* borde más visible */
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.contacto-dark .form-control::placeholder,
.contacto-dark textarea::placeholder{
  color: #b7c2cc;                              /* placeholder más claro/legible */
  opacity: 1;
}

/* Foco bien marcado en dorado + halo */
.contacto-dark .form-control:focus,
.contacto-dark .form-select:focus,
.contacto-dark textarea:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 .16rem rgba(214,166,66,.32);
  background: #0e1e2a;                         /* un punto más luminoso en foco */
  color:#fff;
}

/* Checkbox visible */
.contacto-dark .form-check-input{
  background: #0b1722;
  border: 1px solid rgba(255,255,255,.22);
}
.contacto-dark .form-check-input:checked{
  background-color: var(--accent);
  border-color: var(--accent);
}

/* Asegura contraste del panel del formulario respecto al fondo */
.contacto-dark .card-dark{
  background: #0e1b27;                          /* un paso más claro que --panel */
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: saturate(110%) blur(2px);
}

/* Botón dorado: que no se “apague” */
.contacto-dark .btn-reservar{
  background: var(--accent);
  color: #0c1620;
  border-radius: 10px;
  padding: 14px 20px;
  font-weight: 700;
  letter-spacing: .02em;
}
.contacto-dark .btn-reservar:hover{ background:#f1c85b; color:#000; }
.contacto-dark .btn-reservar:disabled{ opacity:.95; }

/* Línea divisoria superior (si usas card con imagen a la derecha) */
.contacto-dark .reservation-wrap{
  border: 1px solid rgba(255,255,255,.18);
}

/* Por si Bootstrap mete .text-muted dentro del form */
.contacto-dark .text-muted{ color:#c9d3dc !important; }


/* ===== Hero compact / sin imagen (para páginas internas como Contacto) ===== */
.hero--compact{
  min-height: 34vh;             /* en vez de 72vh */
  padding-top: 56px;             /* en vez de 120px */
  padding-bottom: 4px;
}
@media (min-width: 992px){
  .hero--compact{ min-height: 28vh; padding-top: 72px; padding-bottom: 4px; }
}

/* Quita la imagen y la animación del ::before de la home */
.hero--noimg::before{
  background: none !important;
  animation: none !important;
  filter: none !important;
}

/* Opcional: rebajar el overlay para que no “oscurezca” tanto */
.hero--noimg::after{
  background: linear-gradient(to bottom, rgba(12,22,32,.0) 0%, var(--bg) 100%) !important;
}

/* Ajuste tipográfico suave para hero compacto */
.hero--compact h1{ font-size: clamp(28px, 4.5vw, 48px); }
.hero--compact .eyebrow{ font-size: clamp(14px, 1.6vw, 18px); }


.event-item ul li strong {
  color: var(--bs-primary);
}

.event-item ul li:first-child {
  margin-bottom: 0.25rem;
}

.event-item ul li + li {
  margin-left: 0.75rem;
  list-style: disc;
}


/* OVERLAY ACCESO SOCIOS */
.socio-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
}

.socio-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top, rgba(255,255,255,.04), transparent 55%),
              rgba(0,0,0,.78);
  backdrop-filter: blur(6px);
}

.socio-overlay-card {
  position: relative;
  z-index: 1;
  max-width: 420px;
  width: 90%;
  background: rgba(15, 23, 42, .96);
  color: #f8fafc;
  border-radius: 1.5rem;
  padding: 2.4rem 2.2rem;
  box-shadow: 0 18px 60px rgba(0,0,0,.6);
  transform: translateY(24px) scale(.96);
  opacity: 0;
  transition:
    transform .45s cubic-bezier(.22,.61,.36,1),
    opacity .45s ease;
}

.socio-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.socio-overlay.show .socio-overlay-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.socio-overlay.is-hidden-inicial {
  display: none; /* si ya está logueado, ni se muestra */
}

.socio-overlay-logo span {
  font-family: "Playfair Display", serif;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-size: .78rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid rgba(248,250,252,.18);
}

/* Opcional: al mostrar, bloquea el scroll del body */
body.socio-lock-scroll {
  overflow: hidden;
}