:root {
        --hsb-bg: #070707;
        --hsb-panel: #0f0f0f;
        --hsb-panel-2: #121212;
        --hsb-text: #f2f2f2;
        --hsb-muted: rgba(255, 255, 255, 0.65);
        --hsb-gold: #d1a64b;
        --hsb-border: rgba(255, 255, 255, 0.12);
        --hsb-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
      }

      body {
        background: radial-gradient(
            1200px 600px at 20% -10%,
            rgba(209, 166, 75, 0.12),
            transparent 60%
          ),
          radial-gradient(
            900px 500px at 80% 10%,
            rgba(209, 166, 75, 0.08),
            transparent 65%
          ),
          var(--hsb-bg);
        color: var(--hsb-text);
      }

      .hsb-navbar {
        background: rgba(7, 7, 7, 0.7);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid var(--hsb-border);
      }

      .hsb-brand {
        font-weight: 700;
        letter-spacing: 0.5px;
      }
      .hsb-brand .dot {
        color: var(--hsb-gold);
      }

      .hsb-hero {
        position: relative;
        border-radius: 22px;
        overflow: hidden;
        /*min-height: 340px;*/
        box-shadow: var(--hsb-shadow);
        border: 1px solid var(--hsb-border);
        background: #111;
      }
      .hsb-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(90deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.55) 44%, rgba(0,0,0,0.05) 70%, rgba(0,0,0,0) 100%),
          url("https://images.unsplash.com/photo-1520975958225-38e0d3b56a7f?auto=format&fit=crop&w=1800&q=70")
            center/cover no-repeat;
        transform: scale(1.02);
      }
      .hsb-hero-content {
        position: relative;
        z-index: 1;
        padding: clamp(18px, 3vw, 34px);
        /*max-width: 720px;*/
      }

      .hsb-title {
        font-weight: 800;
        line-height: 1.05;
        letter-spacing: -0.5px;
        font-size: clamp(30px, 4vw, 54px);
        margin-bottom: 10px;
      }
      .hsb-subtitle {
        font-size: clamp(14px, 2vw, 18px);
        color: var(--hsb-muted);
        margin-bottom: 18px;
      }

      .btn-hsb-primary {
        --bs-btn-bg: var(--hsb-gold);
        --bs-btn-border-color: var(--hsb-gold);
        --bs-btn-color: #0b0b0b;
        --bs-btn-hover-bg: #e0b65a;
        --bs-btn-hover-border-color: #e0b65a;
        --bs-btn-hover-color: #0b0b0b;
        --bs-btn-active-bg: #c99b3c;
        --bs-btn-active-border-color: #c99b3c;
        font-weight: 700;
      }

      .btn-hsb-outline {
        --bs-btn-color: #fff;
        --bs-btn-border-color: rgba(255, 255, 255, 0.35);
        --bs-btn-hover-bg: rgba(255, 255, 255, 0.08);
        --bs-btn-hover-border-color: rgba(255, 255, 255, 0.45);
        --bs-btn-hover-color: #fff;
        font-weight: 700;
      }

      .hsb-section-title {
        font-weight: 800;
        letter-spacing: -0.2px;
        font-size: 26px;
      }
      .hsb-section-link {
        color: var(--hsb-gold);
        text-decoration: none;
        font-weight: 700;
      }
      .hsb-section-link:hover {
        text-decoration: underline;
      }

      .hsb-tabs {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid var(--hsb-border);
        border-radius: 14px;
        padding: 6px;
        display: inline-flex;
        gap: 6px;
      }
      .hsb-tab {
        border-radius: 12px !important;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.78) !important;
        border: 0 !important;
      }
      .hsb-tab.active {
        background: rgba(209, 166, 75, 0.18) !important;
        color: #fff !important;
      }

      .hsb-card {
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.06),
            rgba(255, 255, 255, 0.03)
          ),
          var(--hsb-panel);
        border: 1px solid var(--hsb-border);
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
        height: 100%;
      }
      .hsb-card-img {
        width: 100%;
        height: 100%;
        min-height: 140px;
        object-fit: cover;
        filter: saturate(1.05);
      }

      .hsb-badge {
        font-weight: 800;
        letter-spacing: 0.4px;
        border-radius: 999px;
        padding: 6px_toggle 0.5rem;
        padding: 6px 12px;
        font-size: 12px;
        border: 1px solid var(--hsb-border);
        background: rgba(0, 0, 0, 0.35);
      }
      .hsb-badge--gold {
        border-color: rgba(209, 166, 75, 0.45);
        background: rgba(209, 166, 75, 0.16);
      }

      .hsb-activity-card {
        display: grid;
        grid-template-columns: 1.35fr 1fr;
        gap: 0;
      }
      @media (max-width: 991.98px) {
        .hsb-activity-card {
          grid-template-columns: 1fr;
        }
      }

      .hsb-activity-body {
        padding: 18px;
      }
      .hsb-meta {
        color: rgba(255, 255, 255, 0.7);
        font-weight: 700;
        font-size: 13px;
      }
      .hsb-activity-title {
        font-weight: 900;
        margin: 6px 0 10px;
        font-size: 22px;
        letter-spacing: -0.2px;
      }
      .hsb-location {
        color: rgba(255, 255, 255, 0.72);
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .hsb-cta {
        background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.68),
            rgba(0, 0, 0, 0.25)
          ),
          url("https://images.unsplash.com/photo-1547153760-18fc86324498?auto=format&fit=crop&w=1800&q=70")
            center/cover no-repeat;
        border-radius: 22px;
        border: 1px solid var(--hsb-border);
        overflow: hidden;
        box-shadow: var(--hsb-shadow);
      }
      .hsb-cta-inner {
        padding: clamp(18px, 3vw, 30px);
      }
      .hsb-cta-title {
        font-weight: 900;
        letter-spacing: -0.3px;
        font-size: clamp(22px, 3vw, 34px);
        margin-bottom: 8px;
      }
      .hsb-cta-text {
        color: var(--hsb-muted);
        margin-bottom: 16px;
        max-width: 640px;
      }

      .hsb-place-card .thumb {
        height: 160px;
        width: 100%;
        object-fit: cover;
      }
      .hsb-place-title {
        font-weight: 900;
        margin: 0;
      }
      .hsb-place-sub {
        color: var(--hsb-muted);
        margin: 0;
        font-weight: 600;
      }

      .hsb-footer {
        border-top: 1px solid var(--hsb-border);
        color: var(--hsb-muted);
      }
/* Card base */
.hsb-activity-card--overlay {
  border-radius: 18px;
  overflow: hidden;
}

/* Imagen */
.hsb-activity-card--overlay .hsb-card-img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
}

/* Overlay */
.hsb-activity-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 16px;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.8) 0%,
    rgba(0,0,0,0.55) 55%,
    rgba(0,0,0,0.05) 100%
  );
}

/* Título */
.hsb-activity-card--overlay .hsb-activity-title {
  font-weight: 900;
  font-size: 22px;
  line-height: 1.1;
}

/* Mobile */
@media (max-width: 991.98px) {
  .hsb-activity-card--overlay .hsb-card-img {
    height: 420px;
  }

  .hsb-activity-overlay {
    padding: 18px;
  }

  .hsb-activity-card--overlay .btn {
    font-size: 14px;
  }
}
/* =========================
   TILE overlay aislado (sin herencia rara)
========================= */
.hsb-tile{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
  background: #111;
}

.hsb-tile__img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* tamaños controlados (no gigantes) */
.hsb-tile--big{
  height: 340px;
}
.hsb-tile--small{
  height: 240px;
}

/* overlay SIEMPRE adentro de la card, no flotando */
.hsb-tile__overlay{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px;
  z-index: 2;

  /* menos transparente: más oscuro y legible */
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.93) 0%,
    rgba(0,0,0,0.75) 55%,
    rgba(0,0,0,0.12) 100%
  );
}

.hsb-tile__title{
  font-weight: 900;
  font-size: 22px;
  line-height: 1.12;
  margin-top: 4px;
}

.hsb-tile__title--small{
  font-size: 18px;
}

/* Mobile: TODAS se ven como la primera (overlay), mismo alto */
@media (max-width: 991.98px){
  .hsb-tile--big,
  .hsb-tile--small{
    height: 460px;
  }
  .hsb-tile__overlay{
    padding: 18px;
  }
}

/* Evitar que reglas viejas rompan el tile */
.hsb-tile .ratio{ display:none !important; }
.hsb-tile .hsb-activity-body{ display:none !important; }

/* Desktop: que el primero (big) tenga más altura */
@media (min-width: 992px){
  .hsb-tile--big{
    height: 495px; /* Prueba 400-460 según te guste */
  }
}