/* =========================================================
   CONTROLES DIGITALES — HERO AISLADO
   - Scopeado a #hero.cd-hero para no chocar con otros CSS
   - Compatible con cd-hero__* y hero__*
   ========================================================= */

/* ---------- Contenedor del hero ---------- */
#hero.cd-hero{
  /* "diales" locales (no ensuciamos :root) */
  --ov1:.35; --ov2:.60; --ov3:.85;         /* capas del overlay radial */
  --ovt:.18; --ovb:.45;                    /* overlay lineal top/bottom */
  --text-main:#f7f8fb; --text-dim:#dbe3ff; /* colores de texto */
  --chip-bg:rgba(255,255,255,.10);
  --chip-brd:rgba(255,255,255,.22);
  --cards-gap:18px;
  --chip-py:6px; --chip-px:10px; --chip-font:12.5px;
  --glass-base:.06; --glass-rad1:.08; --glass-rad2:.06;
  --glass-blur:14px; --glass-sat:115%;

  position: relative;
  min-height: min(80vh, 980px);
  display: grid;
  place-items: start center;               /* arriba y centrado */
  padding-top: clamp(60px, 8vh, 90px);     /* espacio bajo el header rojo */
  overflow: visible;
  isolation: isolate;
  color: var(--text-main);
  background: transparent !important;      /* neutraliza herencias */
  border-radius: 0 !important;
}

/* ---------- Fondo (soporta hero__bg o cd-hero__bg) ---------- */
#hero.cd-hero .cd-hero__bg,
#hero.cd-hero .hero__bg{
  position:absolute; inset:0; z-index:-2;
  background-color:#0b1325;
  /* Fallback automático si no hay WEBP */
  background-image: image-set(
    url("images/room11.webp") type("image/webp"),
    url("images/room12.jpg") type("image/jpeg")
  );
  background-position:center;
  background-size:cover;
  background-attachment:fixed;
  transform:scale(1.02);
  filter:saturate(1.05) contrast(1.05);
}

/* ---------- Overlay (soporta hero__overlay o cd-hero__overlay) ---------- */
#hero.cd-hero .cd-hero__overlay,
#hero.cd-hero .hero__overlay{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(70% 60% at 50% 35%,
      rgba(0,12,40,var(--ov1)) 0%,
      rgba(0,12,40,var(--ov2)) 65%,
      rgba(0,10,30,var(--ov3)) 100%),
    linear-gradient(to bottom,
      rgba(0,0,0,var(--ovt)),
      rgba(0,0,0,var(--ovb)));
}

/* ---------- Inner / Head (compat hero__* y cd-hero__*) ---------- */
#hero.cd-hero .hero__inner,
#hero.cd-hero .cd-hero__inner{
  width: min(1150px, 92%);
  padding: 0;
}
#hero.cd-hero .hero__head,
#hero.cd-hero .cd-hero__head{
  text-align: center;
  margin: 0 0 10px 0;
}
#hero.cd-hero .hero__head p,
#hero.cd-hero .cd-hero__head p{
  margin: 0;
  color: var(--text-dim);
  font-weight: 300;
  letter-spacing: .2px;
  text-shadow: 0 1px 0 rgba(0,0,0,.28);
}

/* ---------- Chips (scopeado) ---------- */
#hero.cd-hero .chips{
  display:grid; justify-items:center; gap:10px; margin:10px auto;
}
#hero.cd-hero .chips__rail{
  display:flex; gap:10px; width:max-content; max-width:100%;
  justify-content:center;
  overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  padding:12px 0;
}
#hero.cd-hero .chip{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:8px;
  padding:var(--chip-py) var(--chip-px);
  border-radius:999px;
  border:1px solid var(--chip-brd);
  background:var(--chip-bg);
  color:var(--text-main);
  font-size:var(--chip-font);
  text-decoration:none;
  backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .18s ease, background .18s ease,
             border-color .18s ease, box-shadow .18s ease;
  white-space:nowrap; user-select:none;
}
#hero.cd-hero .chip svg{ width:16px; height:16px; opacity:.9; }
#hero.cd-hero .chip:hover{
  transform:scale(1.03);
  border-color:rgba(99,102,241,.40);
  background:rgba(255,255,255,.14);
  box-shadow:0 10px 24px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.10);
}
#hero.cd-hero .chip.chip--active{
  border-color:rgba(34,197,94,.45);
  box-shadow:0 0 0 2px rgba(34,197,94,.25);
  background:rgba(34,197,94,.12);
}

/* ---------- Grid de tarjetas ---------- */
#hero.cd-hero .hero__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,2vw,22px);
  margin-top:var(--cards-gap);
}
#hero.cd-hero .card{
  position:relative;
  display:grid; grid-template-rows:auto 1fr auto; align-content:start; gap:10px;
  padding:clamp(16px,2.2vw,22px);
  min-height:190px;
  /* glass suave con brillos */
  background:
    radial-gradient(140% 90% at 20% 10%, rgba(255,255,255,var(--glass-rad1)) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(120% 100% at 90% 120%, rgba(255,255,255,var(--glass-rad2)) 0%, rgba(255,255,255,0) 70%),
    rgba(255,255,255,var(--glass-base));
  border:1px solid rgba(255,255,255,.22);
  border-radius:18px;
  color:#f7f8fb; text-decoration:none;
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow:0 10px 30px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .25s ease, box-shadow .25s ease,
             border-color .25s ease, background .25s ease;
}
#hero.cd-hero .card__icon{ width:28px; height:28px; opacity:.95; }
#hero.cd-hero .card__head{ display:flex; align-items:center; gap:10px; margin-bottom:2px; }
#hero.cd-hero .card h3{ margin:0; font-weight:750; letter-spacing:.2px; font-size:clamp(16px,2.1vw,20px); }
#hero.cd-hero .card ul{ list-style:none; padding:0; margin:0; color:#e3e9ff; font-size:clamp(13px,1.6vw,15px); }
#hero.cd-hero .card li{ margin:2px 0; }
#hero.cd-hero .card .btn{
  margin-top:8px; width:fit-content; padding:8px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  background:linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.06));
  font-size:13px; letter-spacing:.2px;
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
#hero.cd-hero .card:hover{
  transform:translateY(-5px);
  border-color:rgba(99,102,241,.55);
  box-shadow:0 20px 50px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.12);
  background:
    radial-gradient(140% 90% at 20% 10%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(120% 100% at 90% 120%, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 70%),
    rgba(255,255,255,.08);
}
#hero.cd-hero .card:hover .btn{
  border-color:rgba(255,255,255,.46);
  background:linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.10));
}

/* Estados del filtro por chips */
#hero.cd-hero .card.is-hidden{
  opacity:0; filter:blur(2px); pointer-events:none; transform:translateY(4px);
}
#hero.cd-hero .hero__grid.is-filtering{ transition: all .2s ease; }

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  #hero.cd-hero .hero__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:620px){
  #hero.cd-hero .hero__grid{ grid-template-columns:1fr; }
}